/config/jest/fileMock.js"
123 | }
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/src/components/Accessor/index.jsx:
--------------------------------------------------------------------------------
1 | // Core
2 | import React, { Component, PropTypes } from 'react';
3 | import Select from 'react-select';
4 |
5 | // Helpers
6 | import isEqual from 'lodash.isequal';
7 | import style from './style.scss';
8 |
9 | // PropTypes
10 | const { string, object, func } = PropTypes;
11 | const propTypes = {
12 | onChange: func.isRequired,
13 | value: string,
14 | data: object, // @TODO: make this required and check presence on mount, throw error if empty
15 | };
16 |
17 | const defaultProps = {
18 | value: '',
19 | data: {},
20 | };
21 |
22 | class Accessor extends Component {
23 | constructor(props) {
24 | super(props);
25 | this.state = {
26 | value: props.value,
27 | };
28 | }
29 |
30 | componentWillReceiveProps(nextProps) {
31 | const { value } = this.state;
32 |
33 | if (!isEqual(value, nextProps.value)) {
34 | this.setState({
35 | value: nextProps.value,
36 | });
37 | }
38 | }
39 |
40 | onChange = (value, level) => {
41 | let values = this.state.value.split('.').slice(0, level);
42 |
43 | values[level] = value;
44 | values = values.join('.');
45 |
46 | this.props.onChange(values);
47 | }
48 |
49 | renderSelector = (data, level) => {
50 | const { value } = this.state;
51 | const splittedValue = value.split('.');
52 | const levelValue = splittedValue[level] || '';
53 |
54 | let iterator = null;
55 |
56 | if (Array.isArray(data)) {
57 | iterator = Object.keys(data[0]);
58 | } else if (data !== null && typeof data === 'object') {
59 | iterator = Object.keys(data);
60 | }
61 |
62 | if (levelValue !== '' && !iterator.some(item => item === levelValue)) {
63 | iterator = [levelValue, ...iterator];
64 | }
65 |
66 | if (iterator) {
67 | return (
68 |
69 |
70 | this.onChange(e.value, level)}
74 | options={iterator.map(item => ({
75 | label: item,
76 | value: item,
77 | }))}
78 | promptTextCreator={label => `Create option: ${label}`}
79 | />
80 |
81 |
82 | {this.renderSelector(data[levelValue], level + 1)}
83 |
93 | {this.renderSelector(this.props.data, 0)}
94 |
95 | );
96 | }
97 | }
98 |
99 | Accessor.propTypes = propTypes;
100 | Accessor.defaultProps = defaultProps;
101 |
102 | export default Accessor;
103 |
--------------------------------------------------------------------------------
/src/components/Accessor/style.scss:
--------------------------------------------------------------------------------
1 | .IteratorWrapper, .SelectWrapper {
2 | display: inline-block;
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/Any/index.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Any Field
3 | *
4 | * This field is like a blueprint for whole structure. It's used for recursive rendering of
5 | * nested JSON Logic expression. Has a dropdown for selecting the type of children fields and
6 | * contains its children fields as child components.
7 | *
8 | * - onChange: Returns the latest part of the expression rendered by this component. Used by its
9 | * parent (and grand parents) to complete structure, part by part.
10 | *
11 | * - parent: Parent field, used for the selection of available operators (see src/options.js for
12 | * more detailed explanation) and extracting its children's value recursively.
13 | *
14 | * - value: Value of the field, passed from its parent.
15 | *
16 | * - data: Data available for accessor fields, gained from the parrent and will be passed to the
17 | * children fields.
18 | */
19 |
20 | // Core
21 | import React, { PropTypes, Component } from 'react';
22 |
23 | // Helpers
24 | import isEqual from 'lodash.isequal';
25 |
26 | // UI
27 | import SelectOperator from '../SelectOperator';
28 | import style from './style.scss';
29 |
30 | // Constants
31 | import { FIELD_TYPES, OPERATORS } from '../../options';
32 |
33 | // PropTypes
34 | const { string, any, object, func } = PropTypes;
35 | const propTypes = {
36 | onChange: func.isRequired,
37 | parent: string.isRequired,
38 | value: any,
39 | data: object,
40 | };
41 |
42 | const defaultProps = {
43 | value: {},
44 | data: {},
45 | };
46 |
47 | class Any extends Component {
48 | constructor(props) {
49 | super(props);
50 | this.state = this.onInitializeState(props);
51 | }
52 |
53 | componentWillReceiveProps(nextProps) {
54 | if (!isEqual(this.props.value, nextProps.value)) {
55 | this.setState(this.onInitializeState(nextProps));
56 | }
57 | }
58 |
59 | /**
60 | * Initializes component state with respect to props.
61 | *
62 | * This method will be called on initial render (from constructor) and cases like async loading,
63 | * which may end up with change in value prop.
64 | */
65 | onInitializeState = (props) => {
66 | const value = props.value;
67 | let field = 'value';
68 | let selectedOperator = null;
69 | let fields = [];
70 |
71 | if (typeof value === 'object' && Object.keys(value).length > 0) {
72 | const firstElem = Object.keys(value)[0];
73 |
74 | field = OPERATORS.some(operator =>
75 | operator.signature === firstElem || operator.label === firstElem,
76 | ) ? firstElem : 'value';
77 | } else if (typeof value === 'object') {
78 | field = '';
79 | }
80 |
81 | selectedOperator = OPERATORS.find(operator =>
82 | operator.signature === field || operator.label === field,
83 | );
84 |
85 | if (selectedOperator) {
86 | fields = selectedOperator.fields;
87 | }
88 |
89 | // Insert Extra Fields
90 | if (
91 | typeof value === 'object' &&
92 | Object.keys(value).length > 0 &&
93 | selectedOperator.fieldCount.min <= fields.length &&
94 | selectedOperator.fieldCount.max > fields.length &&
95 | value[field].length > fields.length
96 | ) {
97 | const extraFieldCount = value[field].length - fields.length;
98 | for (let i = 1; i <= extraFieldCount; i += 1) {
99 | fields = [...fields, FIELD_TYPES.ANY];
100 | }
101 | }
102 |
103 | return { field, value, selectedOperator, fields };
104 | }
105 |
106 | /**
107 | * Resets the content and type of its children.
108 | */
109 | onFieldChange = (field) => {
110 | let value = {};
111 |
112 | if (field === 'value') {
113 | value = '';
114 | } else {
115 | value[field] = [];
116 | }
117 |
118 | this.props.onChange(value);
119 | };
120 |
121 | /**
122 | * Updates its own state and emits changes to the parrent.
123 | */
124 | onChildValueChange = (childValue, index) => {
125 | const field = this.state.field;
126 | let value = this.state.value;
127 |
128 | if (field === 'value') {
129 | value = childValue;
130 | } else {
131 | value[field][index] = childValue;
132 | }
133 |
134 | this.props.onChange(value);
135 | }
136 |
137 | /**
138 | * Used for selection of available child components.
139 | * Removes accessor field from the list if props.data is empty
140 | * Return value of this method will be the entry point of Select component.
141 | */
142 | getAvailableOperators = () => {
143 | const { parent, data } = this.props;
144 |
145 | let operators = OPERATORS.filter(operator =>
146 | !operator.notAvailableUnder.some(item => item === parent),
147 | );
148 |
149 | if (Object.keys(data).length === 0) {
150 | operators = operators.filter(operator => operator.signature !== 'var');
151 | }
152 |
153 | return operators;
154 | }
155 |
156 | addField = () => {
157 | this.setState({ fields: [...this.state.fields, FIELD_TYPES.ANY] });
158 | }
159 |
160 | removeField = (index) => {
161 | const { value, field, fields } = this.state;
162 |
163 | fields.splice(index, 1);
164 | value[field].splice(index, 1);
165 |
166 | this.setState({ fields, value }, () => this.props.onChange(value));
167 | }
168 |
169 | /**
170 | * Renders child component by checking its type, initial value.
171 | * Also passes onChange action and data (which will be consumed by Accessor field) to the child.
172 | */
173 | renderChild = (childField, index) => {
174 | const { field, value, selectedOperator, fields } = this.state;
175 | const parent = field;
176 | const parentValue = value;
177 | const isRemovable = fields.length > selectedOperator.fieldCount.min;
178 |
179 | let childValue = '';
180 |
181 | if (parent !== 'value') {
182 | childValue = parentValue[parent][index];
183 | } else {
184 | childValue = parentValue;
185 | }
186 |
187 | const ChildComponent = childField.default;
188 |
189 | return (
190 |
191 | {isRemovable &&
192 |
200 | }
201 |
202 | this.onChildValueChange(val, index)}
206 | data={this.props.data}
207 | />
208 |
209 | );
210 | }
211 |
212 | render() {
213 | const { field, fields, selectedOperator } = this.state;
214 | let canAddMoreChildren = false;
215 |
216 | if (selectedOperator) {
217 | canAddMoreChildren = fields.length < selectedOperator.fieldCount.max;
218 | }
219 |
220 | return (
221 |
222 |
227 |
228 | {canAddMoreChildren &&
229 |
237 | }
238 |
239 | {selectedOperator &&
240 |
241 | {fields.map(this.renderChild)}
242 |
243 | }
244 |
56 |
57 | {'=>'}
58 |
59 |
60 |
68 |
102 |
103 |
113 |
114 |
115 |
121 |
122 |
19 |
29 | );
30 |
31 | SelectOperator.propTypes = propTypes;
32 | SelectOperator.defaultProps = defaultProps;
33 |
34 | export default SelectOperator;
35 |
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | // Global Dependencies
2 | import 'react-select/dist/react-select.css';
3 | import jsonLogic from 'json-logic-js-enhanced';
4 |
5 | // Local
6 | import ReactJsonLogic from './components/Master';
7 |
8 | export const applyLogic = jsonLogic.apply;
9 |
10 | export default ReactJsonLogic;
11 |
--------------------------------------------------------------------------------
/src/options.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Field Types Available for Usage to Build JSON Logic Expressions
3 | *
4 | * ANY: Consists of dropdown and selects its children fields.
5 | * Input: Basic HTML input with type selection.
6 | * Accessor: Data accessor field ("var" operator in JSON Logic)
7 | */
8 | export const FIELD_TYPES = {
9 | ANY: require('./components/Any'),
10 | INPUT: require('./components/Input'),
11 | ACCESSOR: require('./components/Accessor'),
12 | HIGHER_ORDER: require('./components/HigherOrder'),
13 | };
14 |
15 | /**
16 | * Operators Available for Usage to Build JSON Logic Expressions.
17 | *
18 | * - signature
19 | * Signature of the operator.
20 | *
21 | * - label
22 | * Visible name of the operator.
23 | *
24 | * - fields
25 | * Child fields that operator's structure constists of.
26 | *
27 | * - notAvailableUnder
28 | * Array of operators that wont be able to render this operator as its child field.
29 | */
30 | export const OPERATORS = [
31 | {
32 | type: 'Value Field',
33 | signature: 'value',
34 | label: 'value',
35 | fields: [FIELD_TYPES.INPUT],
36 | notAvailableUnder: ['master', 'or', 'and'],
37 | fieldCount: {
38 | min: 1,
39 | max: 1,
40 | },
41 | },
42 | {
43 | type: 'Higher Order',
44 | signature: 'some',
45 | label: 'some',
46 | fields: [FIELD_TYPES.HIGHER_ORDER, FIELD_TYPES.ANY],
47 | notAvailableUnder: [],
48 | fieldCount: {
49 | min: 1,
50 | max: 10,
51 | },
52 | },
53 | {
54 | type: 'Higher Order',
55 | signature: 'every',
56 | label: 'every',
57 | fields: [FIELD_TYPES.HIGHER_ORDER, FIELD_TYPES.ANY],
58 | notAvailableUnder: [],
59 | fieldCount: {
60 | min: 1,
61 | max: 10,
62 | },
63 | },
64 | {
65 | type: 'Higher Order',
66 | signature: 'map',
67 | label: 'map',
68 | fields: [FIELD_TYPES.HIGHER_ORDER, FIELD_TYPES.ANY],
69 | notAvailableUnder: [],
70 | fieldCount: {
71 | min: 1,
72 | max: 10,
73 | },
74 | },
75 | {
76 | type: 'Higher Order',
77 | signature: 'filter',
78 | label: 'filter',
79 | fields: [FIELD_TYPES.HIGHER_ORDER, FIELD_TYPES.ANY],
80 | notAvailableUnder: [],
81 | fieldCount: {
82 | min: 1,
83 | max: 10,
84 | },
85 | },
86 | {
87 | type: 'Accessor',
88 | signature: 'var',
89 | label: 'accessor',
90 | fields: [FIELD_TYPES.ACCESSOR],
91 | notAvailableUnder: ['master'],
92 | fieldCount: {
93 | min: 1,
94 | max: 1,
95 | },
96 | },
97 | {
98 | type: 'Statement',
99 | signature: 'or',
100 | label: 'or',
101 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
102 | notAvailableUnder: [],
103 | fieldCount: {
104 | min: 2,
105 | max: 10,
106 | },
107 | },
108 | {
109 | type: 'Statement',
110 | signature: 'and',
111 | label: 'and',
112 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
113 | notAvailableUnder: [],
114 | fieldCount: {
115 | min: 2,
116 | max: 10,
117 | },
118 | },
119 | {
120 | type: 'Logical',
121 | signature: '===',
122 | label: '===',
123 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
124 | notAvailableUnder: [],
125 | fieldCount: {
126 | min: 2,
127 | max: 2,
128 | },
129 | },
130 | {
131 | type: 'Logical',
132 | signature: '==',
133 | label: '==',
134 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
135 | notAvailableUnder: [],
136 | fieldCount: {
137 | min: 2,
138 | max: 2,
139 | },
140 | },
141 | {
142 | type: 'Logical',
143 | signature: '!=',
144 | label: '!=',
145 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
146 | notAvailableUnder: [],
147 | fieldCount: {
148 | min: 2,
149 | max: 2,
150 | },
151 | },
152 | {
153 | type: 'Logical',
154 | signature: '!==',
155 | label: '!==',
156 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
157 | notAvailableUnder: [],
158 | fieldCount: {
159 | min: 2,
160 | max: 2,
161 | },
162 | },
163 | {
164 | type: 'Logical',
165 | signature: '!',
166 | label: '!',
167 | fields: [FIELD_TYPES.ANY],
168 | notAvailableUnder: [],
169 | fieldCount: {
170 | min: 1,
171 | max: 1,
172 | },
173 | },
174 | {
175 | type: 'Numeric',
176 | signature: '<=',
177 | label: '<=',
178 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
179 | notAvailableUnder: [],
180 | fieldCount: {
181 | min: 2,
182 | max: 2,
183 | },
184 | },
185 | {
186 | type: 'Numeric',
187 | signature: '>=',
188 | label: '>=',
189 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
190 | notAvailableUnder: [],
191 | fieldCount: {
192 | min: 2,
193 | max: 2,
194 | },
195 | },
196 | {
197 | type: 'Numeric',
198 | signature: '<',
199 | label: '<',
200 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
201 | notAvailableUnder: [],
202 | fieldCount: {
203 | min: 2,
204 | max: 2,
205 | },
206 | },
207 | {
208 | type: 'Numeric',
209 | signature: '>',
210 | label: '>',
211 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
212 | notAvailableUnder: [],
213 | fieldCount: {
214 | min: 2,
215 | max: 2,
216 | },
217 | },
218 | {
219 | type: 'Numeric',
220 | signature: 'Between',
221 | label: '<=',
222 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY, FIELD_TYPES.ANY],
223 | notAvailableUnder: [],
224 | fieldCount: {
225 | min: 3,
226 | max: 3,
227 | },
228 | },
229 | {
230 | type: 'Arithmetic',
231 | signature: '+',
232 | label: '+',
233 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
234 | notAvailableUnder: ['master'],
235 | fieldCount: {
236 | min: 1,
237 | max: 100,
238 | },
239 | },
240 | {
241 | type: 'Arithmetic',
242 | signature: '-',
243 | label: '-',
244 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
245 | notAvailableUnder: ['master'],
246 | fieldCount: {
247 | min: 1,
248 | max: 2,
249 | },
250 | },
251 | {
252 | type: 'Arithmetic',
253 | signature: '*',
254 | label: '*',
255 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
256 | notAvailableUnder: ['master'],
257 | fieldCount: {
258 | min: 2,
259 | max: 100,
260 | },
261 | },
262 | {
263 | type: 'Arithmetic',
264 | signature: '/',
265 | label: '/',
266 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
267 | notAvailableUnder: ['master'],
268 | fieldCount: {
269 | min: 2,
270 | max: 2,
271 | },
272 | },
273 | {
274 | type: 'Arithmetic',
275 | signature: '%',
276 | label: '%',
277 | fields: [FIELD_TYPES.ANY, FIELD_TYPES.ANY],
278 | notAvailableUnder: ['master'],
279 | fieldCount: {
280 | min: 2,
281 | max: 2,
282 | },
283 | },
284 | ];
285 |
--------------------------------------------------------------------------------
32 |
33 | 
38 |