Skip to content

Commit e138b43

Browse files
fubhyfubhy
committed
Refactoring Take 2. Sorry for rebasing this, I was in a hurry.
1 parent 9074f21 commit e138b43

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+1183
-1056
lines changed

‎.babelrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"stage": 0,
3+
"loose": "all",
4+
"optional": "runtime"
5+
}

‎.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
build
2+
node_modules

‎.eslintrc

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"extends": "eslint-config-airbnb",
3+
"env": {
4+
"browser": true,
5+
"mocha": true,
6+
"node": true
7+
},
8+
"rules": {
9+
"react/jsx-uses-react": 2,
10+
"react/jsx-uses-vars": 2,
11+
"react/react-in-jsx-scope": 2,
12+
13+
//Temporarirly disabled due to a possible bug in babel-eslint (todomvc example)
14+
"block-scoped-var": 0,
15+
// Temporarily disabled for test/* until babel/babel-eslint#33 is resolved
16+
"padded-blocks": 0,
17+
// We sometimes create setter callbacks in a loop to obscure the delta of a value.
18+
"no-loop-func": 0
19+
},
20+
"plugins": [
21+
"react"
22+
]
23+
}

‎.npmignore

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
examples
2+
scripts
3+
bower.json
4+
karma.conf.js
5+
tests.webpack.js
6+
webpack.config.js
7+
.babelrc
8+
.eslintrc
9+
.eslintignore
10+
.gitignore

‎examples/demo/config.js

+145
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import React from 'react';
2+
import { TextWidget, SelectWidget, DateWidget } from 'react-query-builder/components/widgets';
3+
import { ProximityOperator } from 'react-query-builder/components/operators';
4+
import { ComplexQueryOptions } from 'react-query-builder/components/options';
5+
6+
export default {
7+
conjunctions: {
8+
and: {
9+
label: 'And',
10+
value: (value) => value.size > 1 ? `(${value.join(' AND ')})` : value.first()
11+
},
12+
or: {
13+
label: 'Or',
14+
value: (value) => value.size > 1 ? `(${value.join(' OR ')})` : value.first()
15+
}
16+
},
17+
fields: {
18+
name: {
19+
label: 'Name',
20+
widget: 'text',
21+
operators: ['contains', 'startsWith', 'endsWith', 'proximity', 'complexQuery']
22+
},
23+
date: {
24+
label: 'Date',
25+
widget: 'date',
26+
operators: ['equals', 'range', 'minimum', 'maximum']
27+
},
28+
color: {
29+
label: 'Color',
30+
widget: 'select',
31+
options: {
32+
yellow: 'Yellow',
33+
green: 'Green',
34+
orange: 'Orange'
35+
},
36+
operators: ['equals']
37+
}
38+
},
39+
operators: {
40+
equals: {
41+
label: 'Equals',
42+
value: (value, field) => `${field}:${value.first()}`
43+
},
44+
contains: {
45+
label: 'Contains',
46+
value: (value, field) => `${field}:*${value.first()}*`
47+
},
48+
startsWith: {
49+
label: 'Starts with',
50+
value: (value, field) => `${field}:${value.first()}*`
51+
},
52+
endsWith: {
53+
label: 'Ends with',
54+
value: (value, field) => `${field}:*${value.first()}`
55+
},
56+
proximity: {
57+
label: 'Proximity',
58+
cardinality: 2,
59+
value: (value, field, options) => {
60+
const output = value.map(currentValue => currentValue.indexOf(' ') !== -1 ? `\\"${currentValue}\\"` : currentValue);
61+
return `${field}:"(${output.join(') (')})"~${options.get('proximity')}`;
62+
},
63+
options: {
64+
factory: (props) => <ProximityOperator {...props} />,
65+
defaults: {
66+
proximity: 2
67+
}
68+
}
69+
},
70+
complexQuery: {
71+
label: 'Complex query',
72+
cardinality: 2,
73+
value: (value, field, operatorOptions, valueOptions, operator, config) => {
74+
const output = value
75+
.map((currentValue, delta) => {
76+
const operatorDefinition = config.operators[operator];
77+
const selectedOperator = valueOptions.getIn([delta + '', 'operator'], 'contains');
78+
const valueFn = operatorDefinition.valueOptions.operators[selectedOperator].value;
79+
return valueFn(currentValue);
80+
}).map((currentValue) => currentValue.indexOf(' ') !== -1 ? `\\"${currentValue}\\"` : currentValue);
81+
82+
return `{!complexphrase}${field}:"(${output.join(') (')})"~${operatorOptions.get('proximity')}`;
83+
},
84+
options: {
85+
factory: (props) => <ProximityOperator {...props} />,
86+
defaults: {
87+
proximity: 2
88+
}
89+
},
90+
valueOptions: {
91+
factory: (props) => <ComplexQueryOptions {...props} />,
92+
operators: {
93+
contains: {
94+
label: 'Contains',
95+
value: (value) => `*${value}*`
96+
},
97+
startsWith: {
98+
label: 'Starts with',
99+
value: (value) => `${value}*`
100+
},
101+
endsWith: {
102+
label: 'Ends with',
103+
value: (value) => `*${value}`
104+
}
105+
},
106+
defaults: {
107+
operator: 'contains',
108+
proximity: 2
109+
}
110+
}
111+
},
112+
range: {
113+
label: 'Range',
114+
cardinality: 2,
115+
value: (value, field) => `[${field}:${value.first()} TO ${value.get(1)}]`
116+
},
117+
minimum: {
118+
label: 'Minimum',
119+
value: (value, field) => `[${field}:${value.first()} TO *]`
120+
},
121+
maximum: {
122+
label: 'Maximum',
123+
value: (value, field) => `[${field}:* TO ${value.first()}]`
124+
}
125+
},
126+
widgets: {
127+
text: {
128+
factory: (props) => <TextWidget {...props} />,
129+
value: (value) => value
130+
},
131+
select: {
132+
factory: (props) => <SelectWidget {...props} />,
133+
value: (value) => value
134+
},
135+
date: {
136+
factory: (props) => <DateWidget {...props} />,
137+
value: (value) => value
138+
}
139+
},
140+
settings: {
141+
defaultConjunction: 'and',
142+
defaultField: 'name',
143+
maxNesting: 10
144+
}
145+
};

‎examples/demo/index.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { Component } from 'react';
2+
import { Query, Builder, Preview } from 'react-query-builder';
3+
import config from './config';
4+
5+
export default class Demo extends Component {
6+
render() {
7+
return (
8+
<Query {...config}>
9+
{(props) => (
10+
<div>
11+
<Preview {...props}>
12+
{(string) => (
13+
<code className="query-preview">{string || 'Use the builder below to create a search query.'}</code>
14+
)}
15+
</Preview>
16+
<div className="query-builder">
17+
<Builder {...props} />
18+
</div>
19+
</div>
20+
)}
21+
</Query>
22+
);
23+
}
24+
}

‎examples/index.html

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<html>
22
<head>
33
<title>React Query Builder - Examples</title>
4-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
54
</head>
65
<body></body>
76
<script src="./bundle.js"></script>

‎examples/index.js

+17-20
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,25 @@
1+
import './reset.scss';
12
import './styles.scss';
2-
import React from 'react';
3-
import { default as Router, Route, Redirect, Link, RouteHandler } from 'react-router';
4-
import Simple from './simple';
3+
import React, { Component } from 'react';
4+
import HashHistory from 'react-router/lib/HashHistory';
5+
import { Router, Route, Redirect } from 'react-router';
6+
import Demo from './demo';
57

68
window.React = React;
79

8-
class App extends React.Component {
9-
render () {
10+
class App extends Component {
11+
render() {
1012
return (
11-
<div>
12-
<RouteHandler />
13-
</div>
14-
)
13+
<div>{this.props.children}</div>
14+
);
1515
}
1616
}
1717

18-
var routes = (
19-
<Route handler={App} path="/">
20-
<Route name="simple" handler={Simple} />
21-
<Redirect from="/" to="simple" />
22-
</Route>
23-
);
24-
25-
Router.run(routes, Router.HashLocation, function (Handler) {
26-
React.render(<Handler/>, document.body);
27-
});
28-
18+
React.render((
19+
<Router history={new HashHistory()}>
20+
<Redirect from="/" to="demo" />
21+
<Route name="root" path="/" component={App}>
22+
<Route name="demo" path="/demo" component={Demo} />
23+
</Route>
24+
</Router>
25+
), document.body);

‎examples/reset.scss

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/* http://meyerweb.com/eric/tools/css/reset/
2+
v2.0 | 20110126
3+
License: none (public domain)
4+
*/
5+
6+
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
7+
margin: 0;
8+
padding: 0;
9+
border: 0;
10+
font-size: 100%;
11+
font: inherit;
12+
vertical-align: baseline; }
13+
14+
/* HTML5 display-role reset for older browsers */
15+
16+
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
17+
display: block; }
18+
19+
body {
20+
line-height: 1; }
21+
22+
ol, ul {
23+
list-style: none; }
24+
25+
blockquote, q {
26+
quotes: none; }
27+
28+
blockquote {
29+
&:before, &:after {
30+
content: '';
31+
content: none; } }
32+
33+
q {
34+
&:before, &:after {
35+
content: '';
36+
content: none; } }
37+
38+
table {
39+
border-collapse: collapse;
40+
border-spacing: 0; }

0 commit comments

Comments
 (0)