Skip to content

Commit 94f0d3e

Browse files
altaywtfaltaywtf
committed
Add complex accessor example
1 parent 15c6493 commit 94f0d3e

File tree

13 files changed

+329
-32
lines changed

13 files changed

+329
-32
lines changed

‎config/webpack/_loaders.dev.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ const config = require('../');
22
const extractCSS = require('./_extractCSS');
33

44
module.exports = [
5+
{
6+
test: /\.json$/,
7+
loader: 'json',
8+
},
59
{
610
test: /\.jsx?$/,
711
loader: 'babel',

‎config/webpack/_loaders.prod.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ const config = require('../');
22
const extractCSS = require('./_extractCSS');
33

44
module.exports = [
5+
{
6+
test: /\.json$/,
7+
loader: 'json',
8+
},
59
{
610
test: /\.jsx?$/,
711
loader: 'babel',

‎examples/components/App/index.jsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import style from './style.scss';
99
import Demo from '../Demo';
1010
import DemoAsync from '../DemoAsync';
1111

12+
// Example Accessor Data
13+
import question from '../../constants/question.json';
14+
1215
const App = () => (
1316
<div className={style.App}>
1417
<GitHubForkRibbon
@@ -59,6 +62,12 @@ const App = () => (
5962
value={JSON.parse('{"===":[1,{"var":["a.b"]}]}')}
6063
data={{ a: { b: 1, c: 15, d: { f: 18 } }, x: { y: 15 } }}
6164
/>
65+
66+
<Demo
67+
title="With Accessor - Complex JSON"
68+
value={JSON.parse('{"===":["41",{"var":["activity.answers.0.value"]}]}')}
69+
data={question}
70+
/>
6271
</div>
6372
</div>
6473
);

‎examples/components/Demo/index.jsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { PropTypes, Component } from 'react';
22
import ReactJsonLogic, { applyLogic } from '../../../dist';
3+
import Editor from '../Editor';
34
import style from './style.scss';
45

56
// PropTypes
@@ -20,7 +21,7 @@ class App extends Component {
2021
super(props);
2122
this.state = {
2223
value: props.value,
23-
data: JSON.stringify(props.data),
24+
data: JSON.stringify(props.data, null, '\t'),
2425
result: 'Not Evaluated',
2526
};
2627
}
@@ -61,13 +62,11 @@ class App extends Component {
6162

6263
<h4>Data for Accessor Fields <small>(Must be JSON)</small></h4>
6364

64-
<textarea
65+
<Editor
6566
value={data}
66-
onChange={e => this.onAccessorDataChange(e.target.value)}
67+
onChange={e => this.onAccessorDataChange(e)}
6768
/>
6869

69-
<hr />
70-
7170
<button
7271
disabled={Object.keys(value).length === 0}
7372
onClick={() => this.onEvaluate()}

‎examples/components/Demo/style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
border-radius: 2px;
44

55
padding: 10px 20px 20px 20px;
6-
margin: 15px auto 30px auto;
6+
margin: 15px auto 75px auto;
77

88
font-size: 14px;
99

‎examples/components/DemoAsync/index.jsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { PropTypes, Component } from 'react';
22
import ReactJsonLogic, { applyLogic } from '../../../dist';
3+
import Editor from '../Editor';
34
import style from './style.scss';
45

56
// PropTypes
@@ -72,13 +73,11 @@ class App extends Component {
7273

7374
<h4>Data for Accessor Fields <small>(Must be JSON)</small></h4>
7475

75-
<textarea
76+
<Editor
7677
value={data}
77-
onChange={e => this.onAccessorDataChange(e.target.value)}
78+
onChange={e => this.onAccessorDataChange(e)}
7879
/>
7980

80-
<hr />
81-
8281
<button
8382
disabled={Object.keys(value).length === 0}
8483
onClick={() => this.onEvaluate()}

‎examples/components/DemoAsync/style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
border-radius: 2px;
44

55
padding: 10px 20px 20px 20px;
6-
margin: 15px auto 30px auto;
6+
margin: 15px auto 75px auto;
77

88
font-size: 14px;
99

‎examples/components/Editor/index.jsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// Core
2+
import React, { PropTypes } from 'react';
3+
4+
// UI
5+
import 'brace';
6+
import AceEditor from 'react-ace';
7+
8+
import 'brace/mode/json';
9+
import 'brace/theme/github';
10+
11+
import style from './style.scss';
12+
13+
// PropTypes
14+
const { string, func } = PropTypes;
15+
const propTypes = {
16+
value: string,
17+
onChange: func,
18+
};
19+
20+
const Editor = ({ value, onChange }) => (
21+
<div>
22+
<AceEditor
23+
className={style.Editor}
24+
mode="json"
25+
theme="github"
26+
onChange={onChange}
27+
name="UNIQUE_ID_OF_DIV"
28+
editorProps={{ $blockScrolling: true }}
29+
value={value}
30+
tabSize={2}
31+
width="100%"
32+
height="200px"
33+
/>
34+
</div>
35+
);
36+
37+
Editor.propTypes = propTypes;
38+
39+
export default Editor;

‎examples/components/Editor/style.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.Editor {
2+
:global {
3+
.CodeMirror {
4+
max-height: 150px;
5+
}
6+
}
7+
8+
margin-bottom: 10px;
9+
}

‎examples/constants/question.json

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
{
2+
"activity": {
3+
"answers": [
4+
{
5+
"activity_category_key": "activity_category_2292027234",
6+
"answered_at": "2017-01-03T09:21:32Z",
7+
"choice_key": null,
8+
"choice_set_section_key": null,
9+
"combo_item_key": null,
10+
"question_key": "ratio_question_8476053142",
11+
"type": "EntryAnswer",
12+
"value": "41"
13+
},
14+
{
15+
"activity_category_key": "activity_category_2292027234",
16+
"answered_at": "2017-01-03T09:21:33Z",
17+
"choice_key": null,
18+
"choice_set_section_key": null,
19+
"combo_item_key": null,
20+
"question_key": "ratio_question_8476053142",
21+
"type": "EntryAnswer",
22+
"value": "38"
23+
},
24+
{
25+
"activity_category_key": "activity_category_2292027234",
26+
"answered_at": "2017-01-03T09:21:34Z",
27+
"choice_key": null,
28+
"choice_set_section_key": null,
29+
"combo_item_key": null,
30+
"question_key": "ratio_question_8476053142",
31+
"type": "EntryAnswer",
32+
"value": "20"
33+
}
34+
]
35+
},
36+
"category": {
37+
"action_type": "questionnaire",
38+
"answers": [
39+
{
40+
"activity_category_key": "activity_category_2292027234",
41+
"answered_at": "2017-01-03T09:21:32Z",
42+
"choice_key": null,
43+
"choice_set_section_key": null,
44+
"combo_item_key": null,
45+
"question_key": "ratio_question_8476053142",
46+
"type": "EntryAnswer",
47+
"value": "41"
48+
},
49+
{
50+
"activity_category_key": "activity_category_2292027234",
51+
"answered_at": "2017-01-03T09:21:33Z",
52+
"choice_key": null,
53+
"choice_set_section_key": null,
54+
"combo_item_key": null,
55+
"question_key": "ratio_question_8476053142",
56+
"type": "EntryAnswer",
57+
"value": "38"
58+
},
59+
{
60+
"activity_category_key": "activity_category_2292027234",
61+
"answered_at": "2017-01-03T09:21:34Z",
62+
"choice_key": null,
63+
"choice_set_section_key": null,
64+
"combo_item_key": null,
65+
"question_key": "ratio_question_8476053142",
66+
"type": "EntryAnswer",
67+
"value": "20"
68+
}
69+
],
70+
"key": "activity_category_2292027234"
71+
},
72+
"question": {
73+
"answers": [
74+
{
75+
"activity_category_key": "activity_category_2292027234",
76+
"answered_at": "2017-01-03T09:21:32Z",
77+
"choice_key": null,
78+
"choice_set_section_key": null,
79+
"combo_item_key": null,
80+
"question_key": "ratio_question_8476053142",
81+
"type": "EntryAnswer",
82+
"value": "41"
83+
},
84+
{
85+
"activity_category_key": "activity_category_2292027234",
86+
"answered_at": "2017-01-03T09:21:33Z",
87+
"choice_key": null,
88+
"choice_set_section_key": null,
89+
"combo_item_key": null,
90+
"question_key": "ratio_question_8476053142",
91+
"type": "EntryAnswer",
92+
"value": "38"
93+
},
94+
{
95+
"activity_category_key": "activity_category_2292027234",
96+
"answered_at": "2017-01-03T09:21:34Z",
97+
"choice_key": null,
98+
"choice_set_section_key": null,
99+
"combo_item_key": null,
100+
"question_key": "ratio_question_8476053142",
101+
"type": "EntryAnswer",
102+
"value": "20"
103+
}
104+
],
105+
"key": "ratio_question_8476053142",
106+
"type": "RatioQuestion"
107+
},
108+
"section": {
109+
"answers": [
110+
{
111+
"activity_category_key": "activity_category_2292027234",
112+
"answered_at": "2017-01-03T09:21:32Z",
113+
"choice_key": null,
114+
"choice_set_section_key": null,
115+
"combo_item_key": null,
116+
"question_key": "ratio_question_8476053142",
117+
"type": "EntryAnswer",
118+
"value": "41"
119+
},
120+
{
121+
"activity_category_key": "activity_category_2292027234",
122+
"answered_at": "2017-01-03T09:21:33Z",
123+
"choice_key": null,
124+
"choice_set_section_key": null,
125+
"combo_item_key": null,
126+
"question_key": "ratio_question_8476053142",
127+
"type": "EntryAnswer",
128+
"value": "38"
129+
},
130+
{
131+
"activity_category_key": "activity_category_2292027234",
132+
"answered_at": "2017-01-03T09:21:34Z",
133+
"choice_key": null,
134+
"choice_set_section_key": null,
135+
"combo_item_key": null,
136+
"question_key": "ratio_question_8476053142",
137+
"type": "EntryAnswer",
138+
"value": "20"
139+
}
140+
],
141+
"key": "choice_set_section_8213252125"
142+
},
143+
"visit": {
144+
"answers": [
145+
{
146+
"activity_category_key": "activity_category_2292027234",
147+
"answered_at": "2017-01-03T09:21:32Z",
148+
"choice_key": null,
149+
"choice_set_section_key": null,
150+
"combo_item_key": null,
151+
"question_key": "ratio_question_8476053142",
152+
"type": "EntryAnswer",
153+
"value": "41"
154+
},
155+
{
156+
"activity_category_key": "activity_category_2292027234",
157+
"answered_at": "2017-01-03T09:21:33Z",
158+
"choice_key": null,
159+
"choice_set_section_key": null,
160+
"combo_item_key": null,
161+
"question_key": "ratio_question_8476053142",
162+
"type": "EntryAnswer",
163+
"value": "38"
164+
},
165+
{
166+
"activity_category_key": "activity_category_2292027234",
167+
"answered_at": "2017-01-03T09:21:34Z",
168+
"choice_key": null,
169+
"choice_set_section_key": null,
170+
"combo_item_key": null,
171+
"question_key": "ratio_question_8476053142",
172+
"type": "EntryAnswer",
173+
"value": "20"
174+
}
175+
],
176+
"auditor_id": "mehmet",
177+
"sealed": false,
178+
"status": 0,
179+
"store": {
180+
"address": "address",
181+
"city": "Istanbul",
182+
"code": "8373506",
183+
"country": "Turkey",
184+
"district": "Besiktas",
185+
"hint": "8373506 BERKA--FERHATPASA address, Besiktas, Istanbul, state, Turkey",
186+
"latitude": 40.989266,
187+
"longitude": 28.386703,
188+
"name": "BERKA--FERHATPASA",
189+
"state": "state",
190+
"store_type": ""
191+
},
192+
"store_code": "8373506",
193+
"visit_status": "SUCCEEDED"
194+
}
195+
}

0 commit comments

Comments
 (0)