@gpa-gemstone/react-forms 1.1.10 → 1.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -38
- package/lib/ArrayCheckBoxes.d.ts +0 -1
- package/lib/DateRangePicker.d.ts +0 -1
- package/lib/DoubleInput.d.ts +0 -1
- package/lib/EnumCheckBoxes.d.ts +0 -1
- package/lib/Input.d.ts +0 -1
- package/lib/MutliCheckBoxSelect.d.ts +0 -1
- package/lib/MutliCheckBoxSelect.js +1 -1
- package/lib/Select.d.ts +0 -1
- package/lib/TextArea.d.ts +0 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
# react-forms
|
|
2
|
-
|
|
3
|
-

|
|
4
|
-
|
|
5
|
-
The Gemstone Web Library organizes all Gemstone functionality related to web.
|
|
6
|
-
|
|
7
|
-
[](https://github.com/gemstone/web/blob/master/LICENSE)
|
|
8
|
-
|
|
9
|
-
This library includes helpful npm package for creating strongly typed form components in react.
|
|
10
|
-
|
|
11
|
-
* Input
|
|
12
|
-
* CheckBox
|
|
13
|
-
* TextArea
|
|
14
|
-
* DatePicker
|
|
15
|
-
* Select
|
|
16
|
-
* EnumCheckBoxes
|
|
17
|
-
* DateRangePicker
|
|
18
|
-
* ArrayCheckBoxes
|
|
19
|
-
* ArrayMultiSelect
|
|
20
|
-
* MultiCheckBoxSelect
|
|
21
|
-
* DoubleInput
|
|
22
|
-
|
|
23
|
-
## Usage
|
|
24
|
-
|
|
25
|
-
```ts
|
|
26
|
-
interface iType = { Field1: string, Field2: number, Field3: boolean, Field4: string, Field5: string, EnumField: number, FromField: string, ToField: string}
|
|
27
|
-
let record:iType = {Field1: 'Hello', Field2: 1, Field3: false, Field4: 'alot of text blah blah blah', Field5: '01/01/2021', FromField: '01/01/2020', ToField: '01/01/2021'}
|
|
28
|
-
let options = [{Value: 1, Label: 'first'}, {Value:2, Label: 'second'}]
|
|
29
|
-
|
|
30
|
-
<Input<iType> Record={record} Field="Field1" Setter={(event) => record.Field1 = event.target.value} Valid={(field) => /*some criteria*/}>
|
|
31
|
-
<CheckBox<iType> Record={record} Field="Field3" Setter={(event) => record.Field3 = event.target.value}}>
|
|
32
|
-
<Select<iType> Record={record} Field="Field2" Setter={(event) => record.Field3 = event.target.value}} Options={options}>
|
|
33
|
-
<TextArea<iType> Record={record} Field="Field4" Setter={(event) => record.Field1 = event.target.value} Valid={(field) => /*some criteria*/}>
|
|
34
|
-
<DatePicker<iType> Record={record} Field="Field5" Setter={(event) => record.Field1 = event.target.value}>
|
|
35
|
-
<DateRangePicker<iType> Record={record} FromField="FromField" ToField="ToField" Label="Date Range" Setter={(event) => record.Field1 = event.target.value}>
|
|
36
|
-
<EnumCheckBoxes<iType> Record={record} Field="EnumField" Setter={(event) => record.Field3 = event.target.value}} Enum={['Monday', 'Tuesday','Wednesday']}>
|
|
37
|
-
<DoubleInput<iType> Record={record} Field1="Field4" Field1="Field5" Setter={(r) => record = r} Valid={(field) => /*some criteria*/}>
|
|
38
|
-
```
|
|
1
|
+
# react-forms
|
|
2
|
+
|
|
3
|
+

|
|
4
|
+
|
|
5
|
+
The Gemstone Web Library organizes all Gemstone functionality related to web.
|
|
6
|
+
|
|
7
|
+
[](https://github.com/gemstone/web/blob/master/LICENSE)
|
|
8
|
+
|
|
9
|
+
This library includes helpful npm package for creating strongly typed form components in react.
|
|
10
|
+
|
|
11
|
+
* Input
|
|
12
|
+
* CheckBox
|
|
13
|
+
* TextArea
|
|
14
|
+
* DatePicker
|
|
15
|
+
* Select
|
|
16
|
+
* EnumCheckBoxes
|
|
17
|
+
* DateRangePicker
|
|
18
|
+
* ArrayCheckBoxes
|
|
19
|
+
* ArrayMultiSelect
|
|
20
|
+
* MultiCheckBoxSelect
|
|
21
|
+
* DoubleInput
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
interface iType = { Field1: string, Field2: number, Field3: boolean, Field4: string, Field5: string, EnumField: number, FromField: string, ToField: string}
|
|
27
|
+
let record:iType = {Field1: 'Hello', Field2: 1, Field3: false, Field4: 'alot of text blah blah blah', Field5: '01/01/2021', FromField: '01/01/2020', ToField: '01/01/2021'}
|
|
28
|
+
let options = [{Value: 1, Label: 'first'}, {Value:2, Label: 'second'}]
|
|
29
|
+
|
|
30
|
+
<Input<iType> Record={record} Field="Field1" Setter={(event) => record.Field1 = event.target.value} Valid={(field) => /*some criteria*/}>
|
|
31
|
+
<CheckBox<iType> Record={record} Field="Field3" Setter={(event) => record.Field3 = event.target.value}}>
|
|
32
|
+
<Select<iType> Record={record} Field="Field2" Setter={(event) => record.Field3 = event.target.value}} Options={options}>
|
|
33
|
+
<TextArea<iType> Record={record} Field="Field4" Setter={(event) => record.Field1 = event.target.value} Valid={(field) => /*some criteria*/}>
|
|
34
|
+
<DatePicker<iType> Record={record} Field="Field5" Setter={(event) => record.Field1 = event.target.value}>
|
|
35
|
+
<DateRangePicker<iType> Record={record} FromField="FromField" ToField="ToField" Label="Date Range" Setter={(event) => record.Field1 = event.target.value}>
|
|
36
|
+
<EnumCheckBoxes<iType> Record={record} Field="EnumField" Setter={(event) => record.Field3 = event.target.value}} Enum={['Monday', 'Tuesday','Wednesday']}>
|
|
37
|
+
<DoubleInput<iType> Record={record} Field1="Field4" Field1="Field5" Setter={(r) => record = r} Valid={(field) => /*some criteria*/}>
|
|
38
|
+
```
|
package/lib/ArrayCheckBoxes.d.ts
CHANGED
package/lib/DateRangePicker.d.ts
CHANGED
package/lib/DoubleInput.d.ts
CHANGED
package/lib/EnumCheckBoxes.d.ts
CHANGED
package/lib/Input.d.ts
CHANGED
|
@@ -41,7 +41,7 @@ var MultiSelect = function (props) {
|
|
|
41
41
|
};
|
|
42
42
|
}, []);
|
|
43
43
|
return (React.createElement("div", { ref: multiSelect, style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
|
|
44
|
-
React.createElement("button", { style: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, className: "btn form-control dropdown-toggle", onClick: HandleShow },
|
|
44
|
+
React.createElement("button", { type: "button", style: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, className: "btn form-control dropdown-toggle", onClick: HandleShow },
|
|
45
45
|
props.Options.filter(function (x) { return x.Selected; }).length !== props.Options.length
|
|
46
46
|
? props.Options.filter(function (x) { return x.Selected; }).length
|
|
47
47
|
: 'All ',
|
package/lib/Select.d.ts
CHANGED
package/lib/TextArea.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gpa-gemstone/react-forms",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.15",
|
|
4
4
|
"description": "React Form modules for gpa webapps",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
"homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@types/jest": "^26.0.
|
|
39
|
+
"@types/jest": "^26.0.4",
|
|
40
40
|
"jest": "^27.0.6",
|
|
41
41
|
"prettier": "^2.3.2",
|
|
42
42
|
"ts-jest": "^27.0.3",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"typescript": "4.3.4"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@gpa-gemstone/helper-functions": "0.0.
|
|
48
|
+
"@gpa-gemstone/helper-functions": "0.0.9",
|
|
49
49
|
"@types/react": "^17.0.14",
|
|
50
50
|
"@types/styled-components": "^5.1.11",
|
|
51
51
|
"react": "^17.0.2",
|