10 examples of 'react native number input' in JavaScript

5
function NumberInput(_ref) {
6
  var label = _ref.label;
7
  var value = _ref.value;
8
  var onChange = _ref.onChange;
9
  var min = _ref.min;
10
  var max = _ref.max;
11
12
  return React.createElement(
13
    'div',
14
    null,
15
    React.createElement(
16
      'label',
17
      null,
18
      label
19
    ),
20
    React.createElement('input', {
21
      value: value,
22
      onChange: onChange,
23
      type: 'number',
24
      min: min,
25
      max: max,
26
      step: 1
27
    })
28
  );
29
}

14
function InputNumber () {
15
  Component.call(this)
16
17
  this.setValue = this.setValue.bind(this)
18
}

17
function InputNumber(props: Props) {
18
  function handleChange(value) {
19
    if (value !== props.answer.value) {
20
      props.onChange({
21
        ...props.answer,
22
        value
23
      });
24
    }
25
  }
26
27
  return (
28
    <KeyboardAwareScrollView style={styles.container}>
29
      <Text style={styles.label}>{props.question.label}</Text>
30
      <View style={styles.inputContainer}>
31
        <TextInput
32
          keyboardType="numeric"
33
          autoFocus={false}
34
          autoCorrect={false}
35
          style={styles.input}
36
          autoCapitalize="none"
37
          value={props.answer.value}
38
          onChangeText={handleChange}
39
          placeholder={props.question.defaultValue}
40
          underlineColorAndroid="transparent"
41
          selectionColor={Theme.colors.color1}
42
          placeholderTextColor={Theme.fontColors.light}
43
        />
44
      </View>
45
    </KeyboardAwareScrollView>
46
  );
47
}

119
function renderNumberInput(props, renderer = mount) {
120
  return renderer(<Number { ...props } />);
121
}

27
export function createNumericInput(props: NumericInputProps, useFloat: boolean = false): HTMLInputElement {
28
  const input = document.createElement("input");
29
  input.type = "number";
30
  input.value = props.value.toString();
31
32
  input.onchange = () => {
33
    try {
34
      const value = useFloat ? parseFloat(input.value) : parseInt(input.value, 10);
35
      props.handler(value, input);
36
    } catch (_ex) {
37
      //
38
    }
39
  };
40
41
  if (undefined !== props.id) input.id = props.id;
42
  if (undefined !== props.display) input.style.display = props.display;
43
  if (undefined !== props.min) input.min = props.min.toString();
44
  if (undefined !== props.max) input.max = props.max.toString();
45
  if (undefined !== props.step) input.step = props.step.toString();
46
  if (undefined !== props.tooltip) input.title = props.tooltip;
47
  if (undefined !== props.disabled) input.disabled = props.disabled;
48
  if (undefined !== props.parent) props.parent.appendChild(input);
49
50
  return input;
51
}

152
InputNumber (h, props, vm) {
153
  if (props.status === 'preview') return renderValue(h, formatValue(props.props.value))
154
155
  return (
156
    <this.source.InputNumber {...props}></this.source.InputNumber>
157
  )
158
}

108
constructor(props: NumberInputFieldProps, context: any) {
109
  super(props, context);
110
}

17
constructor(props: IProps) {
18
  super(props);
19
20
  this.checkValues();
21
  this.state = {isModalShown: false};
22
}

57
constructor(props: Props) {
58
  super(props)
59
60
  const defaultValue = this.getData().get("default")
61
62
  this.state = {
63
    dirty: false,
64
    value: defaultValue,
65
    formattedValue: this.formatValue(defaultValue),
66
  }
67
}

67
export function createLabeledNumericInput(props: LabeledNumericInputProps): LabeledNumericInput {
68
  const div = document.createElement("div");
69
70
  const label = document.createElement("label");
71
  label.htmlFor = props.id;
72
  label.innerText = props.name;
73
  div.appendChild(label);
74
75
  const inputProps = { ...props };
76
  inputProps.parent = div;
77
  inputProps.display = "inline";
78
  const input = createNumericInput(inputProps, true === props.parseAsFloat);
79
80
  if (undefined !== props.parent)
81
    props.parent.appendChild(div);
82
83
  if (undefined !== props.tooltip)
84
    div.title = props.tooltip;
85
86
  return { label, div, input };
87
}