Home Manual Reference Source
public class | source

GenericField

Extends:

react~Component → GenericField

GenericField is a generic component which can be used as different input fields in Form component

It is used widely in widget configuration modal. Constant values used for defining field type are described below.

Access

Stage.Basic.Form.GenericField

Usage

String input field

GenericField

<GenericField name="stringTest" type={GenericField.STRING_TYPE}
              label="STRING_TYPE" icon="rocket" placeholder="Write text..." />

Password input field

GenericField

<GenericField name="passwordTest" type={GenericField.PASSWORD_TYPE}
              label="PASSWORD_TYPE" icon="key" value="" />

Number input field

GenericField

<GenericField name="numberTest" type={GenericField.NUMBER_TYPE}
              label="NUMBER_TYPE" value="5" min={1} max={10} />

Boolean input field

GenericField

<GenericField name="booleanTest" type={GenericField.BOOLEAN_TYPE}
              label="BOOLEAN_TYPE" value="true" />

List input field

GenericField

<GenericField name="listTest" type={GenericField.LIST_TYPE}
              label="LIST_TYPE" items={['a','b','c']} value='b' />

Number list input field

GenericField

<GenericField name="numberListTest" type={GenericField.NUMBER_LIST_TYPE}
              label="NUMBER_LIST_TYPE" items={[1,2,3]} value={2} />

Multi select list input field

GenericField

<GenericField name="multiSelectListTest" type={GenericField.MULTI_SELECT_LIST_TYPE}
              label="MULTI_SELECT_LIST_TYPE" value={[2,3,4]} items={[1,2,3,{value:4, name:'four'}, {value:5, name:'five'}]} />

Editable list input field

GenericField

<GenericField name="editableListTest" type={GenericField.EDITABLE_LIST_TYPE}
              label="EDITABLE_LIST_TYPE" value='b' items={['a','b','c']}/>

Editable number list input field

GenericField

<GenericField name="numberEditableListTest" type={GenericField.NUMBER_EDITABLE_LIST_TYPE}
              label="NUMBER_EDITABLE_LIST_TYPE" items={[1,2,3]} value={2}/>

Custom field - Editable table

GenericField

<GenericField name="editableTable" type={GenericField.CUSTOM_TYPE} component={Stage.Basic.Form.Table}
              label="EDITABLE_TABLE_TYPE"
              columns={[
                {name: "metric", label: 'Metric', default: "", type: Stage.Basic.GenericField.EDITABLE_LIST_TYPE, description: "Name of the metric to be presented on the graph",
                 items: ["", "cpu_total_system", "cpu_total_user", "memory_MemFree", "memory_SwapFree", "loadavg_processes_running"]},
                {name: 'label', label: 'Label', default: "", type: Stage.Basic.GenericField.STRING_TYPE, description: "Chart label"},
                {name: 'unit', label: 'Unit', default: "", type: Stage.Basic.GenericField.STRING_TYPE, description: "Chart data unit"}
              ]}
              rows={3} />

Custom filed - Time filter

GenericField

<GenericField name="timeFilterTest" type={GenericField.CUSTOM_TYPE} component={Stage.Basic.TimeFilter}
              label="TIME_FILTER_TYPE" value={Stage.Basic.TimeFilter.INFLUX_DEFAULT_VALUE} />

Static Member Summary

Static Public Members
public static

boolean with no default

public static

two-state input field

public static

custom input field

public static

dropdown editable list

public static

dropdown alphanumeric list field

public static

dropdown multiselection list

public static

dropdown editable numeric list

public static

dropdown numeric list field

public static

numeric input field

public static

password input field

public static

alphanumeric input field

public static

propTypes

Static Public Members

public static BOOLEAN_LIST_TYPE: * source

boolean with no default

public static BOOLEAN_TYPE: * source

two-state input field

public static CUSTOM_TYPE: * source

custom input field

public static EDITABLE_LIST_TYPE: * source

dropdown editable list

public static LIST_TYPE: * source

dropdown alphanumeric list field

public static MULTI_SELECT_LIST_TYPE: * source

dropdown multiselection list

public static NUMBER_EDITABLE_LIST_TYPE: * source

dropdown editable numeric list

public static NUMBER_LIST_TYPE: * source

dropdown numeric list field

public static NUMBER_TYPE: * source

numeric input field

public static PASSWORD_TYPE: * source

password input field

public static STRING_TYPE: * source

alphanumeric input field

public static propTypes: * source

propTypes

Properties:

NameTypeAttributeDescription
label string

field's label to show above the field

name string

name of the input field

placeholder string
  • optional
  • default: ''

specifies a short hint that describes the expected value of an input field

type string
  • optional
  • default: GenericField.STRING_TYPE

specifies type of the field

icon string
  • optional
  • default: null

additional icon in right side of the input field

description string
  • optional
  • default: ''

fields description showed in popup when user hovers field

value object
  • optional
  • default: ''

specifies the value of an <input> element

required boolean
  • optional
  • default: {true}

define if a field is required adding a red star icon to label

items object[]
  • optional
  • default: []

list of items (for list types)

onChange function
  • optional

function called on input value change

max number
  • optional
  • default: null

maximal value (only for GenericField.NUMBER_TYPE type)

min number
  • optional
  • default: null

minimal value (only for GenericField.NUMBER_TYPE type)