-
Notifications
You must be signed in to change notification settings - Fork 1
/
App.jsx
99 lines (83 loc) · 2.3 KB
/
App.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React from 'react';
import MultiTextField from './components/MultiTextField.jsx';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
values: []
};
this._handleValuesChanged =
this._handleValuesChanged.bind(this);
this._handleInputItemAdded =
this._handleInputItemAdded.bind(this);
this._handleInputItemRemoved =
this._handleInputItemRemoved.bind(this);
this._handleInputItemFocused =
this._handleInputItemFocused.bind(this);
this._handleInputItemBlured =
this._handleInputItemBlured.bind(this);
}
_handleValuesChanged(values) {
this._log('Values changed. New values are:');
this._log(values);
this.setState({
values: values
});
}
_handleInputItemAdded(newValue, itemIndex) {
this._log(`New item added. Values is ${newValue ? newValue : '[empty]'} at index ${itemIndex}.`);
}
_handleInputItemRemoved(removedValue, itemIndex) {
this._log(`Existing item removed. Removed values is ${removedValue ? removedValue : '[empty]'} at index ${itemIndex}.`);
}
_handleInputItemFocused(itemIndex) {
this._log(`Item at index ${itemIndex} gained focus.`);
}
_handleInputItemBlured(itemIndex) {
this._log(`Item at index ${itemIndex} lost focus.`);
}
_log(text) {
if (typeof text != 'object') {
console.log(text);
} else {
console.table(text);
}
}
render() {
return (
<div className="lvd-multitextfield-demo-container">
<MultiTextField
label="Society codes:"
inputProps={{
required: true,
underlined: true
}}
onGetInputProps={(itemValue, itemIndex) => {
return {
required: itemIndex % 2 == 0,
underlined: itemIndex % 2 == 1
};
}}
onGetInputItemErrorMessage={(itemValue, itemIndex) => {
if (!itemValue) {
return itemIndex % 2 == 0
? 'Please fill in this'
: 'Please fill in that';
} else {
return '';
}
}}
values={this.state.values}
minItemCount={3}
initialItemCount={4}
maxItemCount={10}
onInputItemAdded={this._handleInputItemAdded}
onInputItemRemoved={this._handleInputItemRemoved}
onInputItemFocus={this._handleInputItemFocused}
onInputItemBlur={this._handleInputItemBlured}
onChange={this._handleValuesChanged}
/>
</div>
);
}
}