Skip to content

Commit 08a703f

Browse files
batazorbatazor
committed
add condition
1 parent db92513 commit 08a703f

11 files changed

Lines changed: 260 additions & 79 deletions

File tree

‎.eslintrc.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ rules:
1010
no-use-before-define: ["error", { "functions": false, "classes": false }]
1111
no-param-reassign: ["error", { "props": false }]
1212
no-return-assign: 0
13+
no-confusing-arrow: 0
1314
no-restricted-syntax: 0
1415
no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]
1516
no-magic-numbers: ["error", { "ignoreArrayIndexes": true, "ignore": [-1, 0, 1] }]

‎README.md‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,33 @@ Generating form over react-final-form
66

77
```js
88
import Form from 'react-final-form-generator'
9-
// ...code
109

11-
<Form
12-
fields={fields}
10+
// Fields
11+
const fields = [
12+
{
13+
name: 'email',
14+
label: 'Email',
15+
type: 'TextField',
16+
},
17+
{
18+
name: 'submit',
19+
label: 'Submit',
20+
type: 'Button',
21+
condition: {
22+
when: 'email',
23+
is: 'test',
24+
action: '==',
25+
},
26+
},
27+
]
28+
// ...code
1329

14-
onChange={onChange}
15-
onSubmit={onSubmit}
16-
/>
30+
func renderForm() {
31+
return (
32+
<Form
33+
fields={fields}
34+
onSubmit={onSubmit}
35+
/>
36+
)
37+
}
1738
```

‎dist/Component/Condition.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
7+
var _react = require('react');
8+
9+
var _react2 = _interopRequireDefault(_react);
10+
11+
var _propTypes = require('prop-types');
12+
13+
var _propTypes2 = _interopRequireDefault(_propTypes);
14+
15+
var _reactFinalForm = require('react-final-form');
16+
17+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18+
19+
function filter(_ref) {
20+
var value = _ref.value,
21+
action = _ref.action,
22+
is = _ref.is;
23+
24+
switch (action) {
25+
case '>':
26+
return value > is;
27+
case '>=':
28+
return value >= is;
29+
case '<':
30+
return value < is;
31+
case '<=':
32+
return value <= is;
33+
case '==':
34+
return value == is; // eslint-disable-line
35+
case '!=':
36+
return value != is; // eslint-disable-line
37+
default:
38+
return true;
39+
}
40+
}
41+
42+
// eslint-disable-next-line
43+
var Condition = function Condition(_ref2) {
44+
var when = _ref2.when,
45+
is = _ref2.is,
46+
action = _ref2.action,
47+
children = _ref2.children;
48+
49+
if (when && is) {
50+
return _react2.default.createElement(
51+
_reactFinalForm.Field,
52+
{ name: when, subscription: { value: true } },
53+
function (_ref3) {
54+
var value = _ref3.input.value;
55+
return filter({ value: value, action: action, is: is }) ? children : null;
56+
}
57+
);
58+
}
59+
60+
return children;
61+
};
62+
63+
Condition.propTypes = {
64+
when: _propTypes2.default.string.isRequired,
65+
is: _propTypes2.default.bool.isRequired,
66+
children: _propTypes2.default.string.isRequired
67+
};
68+
69+
exports.default = Condition;

‎dist/Component/Control.js‎

Lines changed: 60 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ var _Recaptcha2 = require('./Recaptcha');
4242

4343
var _Recaptcha3 = _interopRequireDefault(_Recaptcha2);
4444

45+
var _Condition = require('./Condition');
46+
47+
var _Condition2 = _interopRequireDefault(_Condition);
48+
4549
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
4650

4751
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -60,45 +64,74 @@ var Control = function (_Component) {
6064

6165
_this.control = {
6266
Checkbox: function Checkbox(opt) {
63-
return _react2.default.createElement(_reactFinalForm.Field, _extends({
64-
component: _Checkbox3.default,
65-
fullWidth: true
66-
}, opt));
67+
return _react2.default.createElement(
68+
_Condition2.default,
69+
opt.condition,
70+
_react2.default.createElement(_reactFinalForm.Field, _extends({
71+
component: _Checkbox3.default,
72+
fullWidth: true
73+
}, opt))
74+
);
6775
},
6876
Radio: function Radio(opt) {
69-
return _react2.default.createElement(_reactFinalForm.Field, _extends({
70-
component: _Radio3.default,
71-
fullWidth: true
72-
}, opt));
77+
return _react2.default.createElement(
78+
_Condition2.default,
79+
opt.condition,
80+
_react2.default.createElement(_reactFinalForm.Field, _extends({
81+
component: _Radio3.default,
82+
fullWidth: true
83+
}, opt))
84+
);
7385
},
7486
TextField: function TextField(opt) {
75-
return _react2.default.createElement(_reactFinalForm.Field, _extends({
76-
component: _TextField3.default,
77-
fullWidth: true
78-
}, opt));
87+
return _react2.default.createElement(
88+
_Condition2.default,
89+
opt.condition,
90+
_react2.default.createElement(_reactFinalForm.Field, _extends({
91+
component: _TextField3.default,
92+
fullWidth: true
93+
}, opt))
94+
);
7995
},
8096
Select: function Select(opt) {
81-
return _react2.default.createElement(_reactFinalForm.Field, _extends({
82-
component: _Select3.default,
83-
fullWidth: true
84-
}, opt));
97+
return _react2.default.createElement(
98+
_Condition2.default,
99+
opt.condition,
100+
_react2.default.createElement(_reactFinalForm.Field, _extends({
101+
component: _Select3.default,
102+
fullWidth: true
103+
}, opt))
104+
);
85105
},
86106
Button: function Button(opt) {
87-
return _react2.default.createElement(_reactFinalForm.Field, _extends({
88-
component: _Button3.default,
89-
fullWidth: true
90-
}, opt));
107+
return _react2.default.createElement(
108+
_Condition2.default,
109+
opt.condition,
110+
_react2.default.createElement(_reactFinalForm.Field, _extends({
111+
component: _Button3.default,
112+
fullWidth: true,
113+
values: opt.values
114+
}, opt))
115+
);
91116
},
92117
Recaptcha: function Recaptcha(opt) {
93-
return _react2.default.createElement(_reactFinalForm.Field, _extends({
94-
component: _Recaptcha3.default,
95-
fullWidth: true
96-
}, opt));
118+
return _react2.default.createElement(
119+
_Condition2.default,
120+
opt.condition,
121+
_react2.default.createElement(_reactFinalForm.Field, _extends({
122+
component: _Recaptcha3.default,
123+
fullWidth: true
124+
}, opt))
125+
);
97126
},
98127
Custom: function Custom(opt) {
99-
return _react2.default.createElement(_reactFinalForm.Field, _extends({
100-
fullWidth: true
101-
}, opt));
128+
return _react2.default.createElement(
129+
_Condition2.default,
130+
opt.condition,
131+
_react2.default.createElement(_reactFinalForm.Field, _extends({
132+
fullWidth: true
133+
}, opt))
134+
);
102135
}
103136
};
104137
return _this;

‎dist/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ function FormGenerator(props) {
3434
initialValues: props.initialValues,
3535
render: function render(_ref) {
3636
var handleSubmit = _ref.handleSubmit,
37-
submitError = _ref.submitError;
37+
submitError = _ref.submitError,
38+
values = _ref.values;
3839
return _react2.default.createElement(
3940
_react.Fragment,
4041
null,
@@ -48,7 +49,8 @@ function FormGenerator(props) {
4849
subscription: { values: true }
4950
},
5051
_react2.default.createElement(_Control2.default, {
51-
fields: props.fields
52+
fields: props.fields,
53+
values: values
5254
})
5355
),
5456
_react2.default.createElement(

‎dist/stories/index.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,13 @@ var complex = [{
2727
}, {
2828
name: 'password',
2929
label: 'Password',
30-
type: 'TextField'
30+
type: 'TextField',
31+
typeInput: 'password'
3132
}, {
3233
name: 'retryPassword',
3334
label: 'Retry password',
34-
type: 'TextField'
35+
type: 'TextField',
36+
typeInput: 'password'
3537
}, {
3638
name: 'language',
3739
label: 'Language',
@@ -52,7 +54,12 @@ var complex = [{
5254
{
5355
name: 'submit',
5456
label: 'Submit',
55-
type: 'Button'
57+
type: 'Button',
58+
condition: {
59+
when: 'email',
60+
is: 'test',
61+
action: '=='
62+
}
5663
}];
5764

5865
(0, _react3.storiesOf)('Form', module).add('Simple', function () {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-final-form-generator",
3-
"version": "1.0.19",
3+
"version": "1.0.20",
44
"description": "Generating form over react-final-form",
55
"main": "dist/index.js",
66
"scripts": {

‎src/Component/Condition.js‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,37 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33
import { Field } from 'react-final-form'
44

5-
const Condition = ({ when, is, children }) => (
6-
<Field name={when} subscription={{ value: true }}>
7-
{({ input: { value } }) => (value === is ? children : null)}
8-
</Field>
9-
)
5+
function filter({ value, action, is }) {
6+
switch (action) {
7+
case '>':
8+
return value > is
9+
case '>=':
10+
return value >= is
11+
case '<':
12+
return value < is
13+
case '<=':
14+
return value <= is
15+
case '==':
16+
return value == is // eslint-disable-line
17+
case '!=':
18+
return value != is // eslint-disable-line
19+
default:
20+
return true
21+
}
22+
}
23+
24+
// eslint-disable-next-line
25+
const Condition = ({ when, is, action, children }) => {
26+
if (when && is) {
27+
return (
28+
<Field name={when} subscription={{ value: true }}>
29+
{({ input: { value } }) => filter({ value, action, is }) ? children : null}
30+
</Field>
31+
)
32+
}
33+
34+
return children
35+
}
1036

1137
Condition.propTypes = {
1238
when: PropTypes.string.isRequired,

0 commit comments

Comments
 (0)