Skip to content

Commit ec7da48

Browse files
Yi HengYi Heng
Yi Heng
authored and
Yi Heng
committed
*support add filter from detail popup
1 parent 6eda391 commit ec7da48

File tree

11 files changed

+1749
-2078
lines changed

11 files changed

+1749
-2078
lines changed

‎.vscode/settings.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,8 @@
2222
// "editor.defaultFormatter": "esbenp.prettier-vscode",
2323
"editor.formatOnSave": true
2424
},
25+
"javascript.implicitProjectConfig.checkJs": true,
26+
"tslint.exclude": "./**/*.js",
27+
"tslint.configFile": "./tslint.json",
28+
"tslint.alwaysShowRuleFailuresAsWarnings": false,
2529
}

‎index.d.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ export interface FilterMetaData {
1313
popupFilter?: boolean;
1414
}
1515

16+
interface JSONViewFilterOptions {
17+
disabledFields: string[];
18+
currentfilterCollection: FilterMetaData[];
19+
}
20+
1621
export interface ReactJsonViewProps {
1722
/**
1823
* This property contains your input JSON.
@@ -145,8 +150,9 @@ export interface ReactJsonViewProps {
145150
) => any)
146151
| false;
147152
kbnHighLight?: IResultItem;
148-
getCurrentfilterCollection: () => FilterMetaData[];
149-
onAddFilter?: () => void;
153+
filterOptions?: JSONViewFilterOptions;
154+
onClickFilter?: () => void;
155+
Tooltip?: any;
150156
validationMessage?: string;
151157
/**
152158
* Set to true to sort object keys.

‎package-lock.json‎

Lines changed: 1223 additions & 1713 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"dependencies": {
77
"classnames": "^2.2.6",
88
"flux": "^3.1.3",
9+
"ramda": "^0.27.0",
910
"react-base16-styling": "^0.6.0",
1011
"react-lifecycles-compat": "^3.0.4",
1112
"react-textarea-autosize": "^6.1.0"
@@ -36,10 +37,10 @@
3637
"mocha": "^4.0.1",
3738
"moment": "^2.22.2",
3839
"node": "8.4.0",
39-
"node-sass": "^4.9.0",
40+
"node-sass": "^4.14.1",
4041
"nyc": "^11.9.0",
41-
"react": "^16.4.0",
42-
"react-dom": "^16.4.0",
42+
"react": "^16.13.1",
43+
"react-dom": "^16.13.1",
4344
"react-github-button": "^0.1.11",
4445
"react-hot-loader": "^3.0.0-beta.6",
4546
"react-select": "^1.1.0",
@@ -52,7 +53,7 @@
5253
"tslint-plugin-prettier": "^2.0.1",
5354
"webpack": "^3.12.0",
5455
"webpack-bundle-size-analyzer": "^2.7.0",
55-
"webpack-dev-server": "^2.11.2"
56+
"webpack-dev-server": "^2.11.5"
5657
},
5758
"peerDependencies": {
5859
"react": "^16.0.0 || ^15.5.4",

‎src/js/components/DataTypes/String.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default class extends React.PureComponent {
4848
let highLightHtmlStringValue = value; // default
4949

5050
const fieldName =
51-
type === "array"
51+
props.namespace.length > 1
5252
? props.namespace[props.namespace.length - 1]
5353
: props.variable.name;
5454

‎src/js/components/Filter/FilterController.js‎

Lines changed: 179 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
import React from "react";
22
import classNames from "classnames";
3+
import { hasData } from "../../helpers/util";
34

45
const FilterInIcon = (props) => {
56
const id = "filterIn";
67

78
return (
89
<div
9-
onClick={() => props.onClick(id)}
10+
onClick={() => {
11+
if (props.disabled) return false;
12+
return props.onClick(id);
13+
}}
1014
className={classNames({
1115
"filter-icon-root": true,
1216
active: props.active,
17+
disabled: props.disabled,
1318
})}
1419
style={{
1520
display: "flex",
@@ -18,34 +23,52 @@ const FilterInIcon = (props) => {
1823
justifyContent: "center",
1924
}}
2025
>
21-
<svg
22-
xmlns="http://www.w3.org/2000/svg"
23-
version="1.1"
24-
width="24"
25-
height="24"
26-
viewBox="0 0 24 24"
27-
>
28-
<g
29-
id="Page-1"
30-
stroke="none"
31-
strokeWidth="1"
32-
fill="none"
33-
fillRule="evenodd"
26+
<props.Tooltip content={"Filter for value"}>
27+
<div
28+
style={{
29+
width: 24,
30+
height: 24,
31+
display: "flex",
32+
alignItems: "center",
33+
justifyContent: "center",
34+
}}
3435
>
35-
<g id="Group-26" transform="translate(-223.000000, -270.000000)">
36+
<svg
37+
xmlns="http://www.w3.org/2000/svg"
38+
version="1.1"
39+
width="24"
40+
height="24"
41+
viewBox="0 0 24 24"
42+
>
3643
<g
37-
id="ic-selected-in"
38-
transform="translate(223.000000, 270.000000)"
44+
id="Page-1"
45+
stroke="none"
46+
strokeWidth="1"
47+
fill="none"
48+
fillRule="evenodd"
3949
>
40-
<path
41-
d="M14.4271654,6.47470259 L14.6084,6.6481 C14.6084,6.6481 14.6094,6.6491 14.6094,6.6491 C16.7064,8.7511 16.7994,12.0941 14.8904,14.3061 L15.1404,14.5571 L15.2654,14.4321 C15.3634,14.3351 15.5234,14.3351 15.6214,14.4321 L18.9264,17.7371 C19.0244,17.8361 19.0244,17.9951 18.9264,18.0931 L18.0944,18.9241 C17.9964,19.0231 17.8374,19.0231 17.7384,18.9241 L14.4334,15.6201 C14.3354,15.5221 14.3354,15.3621 14.4334,15.2641 L14.5574,15.1401 L14.3064,14.8901 C12.0954,16.8021 8.7494,16.7091 6.6494,14.6101 C4.4504,12.4121 4.4504,8.8481 6.6484,6.6491 C8.78602162,4.51050541 12.2177499,4.45175888 14.4271654,6.47470259 Z M7.8014,7.7991 C6.2394,9.3621 6.2394,11.8951 7.8014,13.4581 C9.3634,15.0201 11.8964,15.0201 13.4584,13.4581 C15.0204,11.8951 15.0204,9.3621 13.4584,7.7991 C11.8954,6.2401 9.3654,6.2401 7.8014,7.7991 Z M10.6304,7.6296 C10.9894,7.6296 11.2804,7.9206 11.2804,8.2796 L11.2804,9.9806 L12.9804,9.9806 C13.3394,9.9806 13.6304,10.2716 13.6304,10.6296 C13.6304,10.9886 13.3394,11.2796 12.9804,11.2796 L11.2804,11.2796 L11.2804,12.9806 C11.2804,13.3386 10.9894,13.6296 10.6304,13.6296 C10.2714,13.6296 9.9804,13.3386 9.9804,12.9806 L9.9804,11.2786 L8.2804,11.2796 C7.9214,11.2796 7.6304,10.9886 7.6304,10.6296 C7.6304,10.2716 7.9214,9.9806 8.2804,9.9806 L9.9804,9.9796 L9.9804,8.2796 C9.9804,7.9206 10.2714,7.6296 10.6304,7.6296 Z"
42-
id="Combined-Shape"
43-
fill={props.active ? "#ffffff" : "#121419"}
44-
></path>
50+
<g id="Group-26" transform="translate(-223.000000, -270.000000)">
51+
<g
52+
id="ic-selected-in"
53+
transform="translate(223.000000, 270.000000)"
54+
>
55+
<path
56+
d="M14.4271654,6.47470259 L14.6084,6.6481 C14.6084,6.6481 14.6094,6.6491 14.6094,6.6491 C16.7064,8.7511 16.7994,12.0941 14.8904,14.3061 L15.1404,14.5571 L15.2654,14.4321 C15.3634,14.3351 15.5234,14.3351 15.6214,14.4321 L18.9264,17.7371 C19.0244,17.8361 19.0244,17.9951 18.9264,18.0931 L18.0944,18.9241 C17.9964,19.0231 17.8374,19.0231 17.7384,18.9241 L14.4334,15.6201 C14.3354,15.5221 14.3354,15.3621 14.4334,15.2641 L14.5574,15.1401 L14.3064,14.8901 C12.0954,16.8021 8.7494,16.7091 6.6494,14.6101 C4.4504,12.4121 4.4504,8.8481 6.6484,6.6491 C8.78602162,4.51050541 12.2177499,4.45175888 14.4271654,6.47470259 Z M7.8014,7.7991 C6.2394,9.3621 6.2394,11.8951 7.8014,13.4581 C9.3634,15.0201 11.8964,15.0201 13.4584,13.4581 C15.0204,11.8951 15.0204,9.3621 13.4584,7.7991 C11.8954,6.2401 9.3654,6.2401 7.8014,7.7991 Z M10.6304,7.6296 C10.9894,7.6296 11.2804,7.9206 11.2804,8.2796 L11.2804,9.9806 L12.9804,9.9806 C13.3394,9.9806 13.6304,10.2716 13.6304,10.6296 C13.6304,10.9886 13.3394,11.2796 12.9804,11.2796 L11.2804,11.2796 L11.2804,12.9806 C11.2804,13.3386 10.9894,13.6296 10.6304,13.6296 C10.2714,13.6296 9.9804,13.3386 9.9804,12.9806 L9.9804,11.2786 L8.2804,11.2796 C7.9214,11.2796 7.6304,10.9886 7.6304,10.6296 C7.6304,10.2716 7.9214,9.9806 8.2804,9.9806 L9.9804,9.9796 L9.9804,8.2796 C9.9804,7.9206 10.2714,7.6296 10.6304,7.6296 Z"
57+
id="Combined-Shape"
58+
fill={
59+
props.disabled
60+
? "#cccccc"
61+
: props.active
62+
? "#ffffff"
63+
: "#121419"
64+
}
65+
></path>
66+
</g>
67+
</g>
4568
</g>
46-
</g>
47-
</g>
48-
</svg>
69+
</svg>
70+
</div>
71+
</props.Tooltip>
4972
</div>
5073
);
5174
};
@@ -55,10 +78,14 @@ const FilterOutIcon = (props) => {
5578

5679
return (
5780
<div
58-
onClick={() => props.onClick(id)}
81+
onClick={() => {
82+
if (props.disabled) return false;
83+
return props.onClick(id);
84+
}}
5985
className={classNames({
6086
"filter-icon-root": true,
6187
active: props.active,
88+
disabled: props.disabled,
6289
})}
6390
style={{
6491
display: "flex",
@@ -67,34 +94,52 @@ const FilterOutIcon = (props) => {
6794
justifyContent: "center",
6895
}}
6996
>
70-
<svg
71-
xmlns="http://www.w3.org/2000/svg"
72-
version="1.1"
73-
width="24"
74-
height="24"
75-
viewBox="0 0 24 24"
76-
>
77-
<g
78-
id="Page-1"
79-
stroke="none"
80-
strokeWidth="1"
81-
fill="none"
82-
fillRule="evenodd"
97+
<props.Tooltip content={"Filter out value"}>
98+
<div
99+
style={{
100+
width: 24,
101+
height: 24,
102+
display: "flex",
103+
alignItems: "center",
104+
justifyContent: "center",
105+
}}
83106
>
84-
<g id="Group-26" transform="translate(-249.000000, -270.000000)">
107+
<svg
108+
xmlns="http://www.w3.org/2000/svg"
109+
version="1.1"
110+
width="24"
111+
height="24"
112+
viewBox="0 0 24 24"
113+
>
85114
<g
86-
id="ic-selected-out"
87-
transform="translate(249.000000, 270.000000)"
115+
id="Page-1"
116+
stroke="none"
117+
strokeWidth="1"
118+
fill="none"
119+
fillRule="evenodd"
88120
>
89-
<path
90-
d="M14.4269443,6.47470259 L14.6081,6.6481 C14.6081,6.6481 14.6091,6.6491 14.6091,6.6491 C16.7061,8.7511 16.7991,12.0941 14.8901,14.3061 L15.1401,14.5571 L15.2651,14.4321 C15.3631,14.3351 15.5231,14.3351 15.6211,14.4321 L18.9261,17.7371 C19.0251,17.8361 19.0251,17.9951 18.9261,18.0931 L18.0951,18.9241 C17.9961,19.0231 17.8371,19.0231 17.7391,18.9241 L14.4341,15.6201 C14.3361,15.5221 14.3361,15.3621 14.4341,15.2641 L14.5571,15.1401 L14.3061,14.8901 C12.0951,16.8021 8.7491,16.7091 6.6491,14.6101 C4.4511,12.4121 4.4501,8.8481 6.6481,6.6491 C8.78669459,4.51050541 12.2184492,4.45175888 14.4269443,6.47470259 Z M7.8021,7.7991 C6.2391,9.3621 6.2391,11.8951 7.8021,13.4581 C9.3641,15.0201 11.8971,15.0201 13.4591,13.4581 C15.0211,11.8951 15.0211,9.3621 13.4591,7.7991 C11.8951,6.2401 9.3651,6.2401 7.8021,7.7991 Z M12.9801,9.9806 C13.3391,9.9806 13.6301,10.2716 13.6301,10.6296 C13.6301,10.9886 13.3391,11.2796 12.9801,11.2796 L8.2801,11.2796 C7.9211,11.2796 7.6301,10.9886 7.6301,10.6296 C7.6301,10.2716 7.9211,9.9806 8.2801,9.9806 L12.9801,9.9806 Z"
91-
id="Combined-Shape"
92-
fill={props.active ? "#ffffff" : "#121419"}
93-
></path>
121+
<g id="Group-26" transform="translate(-249.000000, -270.000000)">
122+
<g
123+
id="ic-selected-out"
124+
transform="translate(249.000000, 270.000000)"
125+
>
126+
<path
127+
d="M14.4269443,6.47470259 L14.6081,6.6481 C14.6081,6.6481 14.6091,6.6491 14.6091,6.6491 C16.7061,8.7511 16.7991,12.0941 14.8901,14.3061 L15.1401,14.5571 L15.2651,14.4321 C15.3631,14.3351 15.5231,14.3351 15.6211,14.4321 L18.9261,17.7371 C19.0251,17.8361 19.0251,17.9951 18.9261,18.0931 L18.0951,18.9241 C17.9961,19.0231 17.8371,19.0231 17.7391,18.9241 L14.4341,15.6201 C14.3361,15.5221 14.3361,15.3621 14.4341,15.2641 L14.5571,15.1401 L14.3061,14.8901 C12.0951,16.8021 8.7491,16.7091 6.6491,14.6101 C4.4511,12.4121 4.4501,8.8481 6.6481,6.6491 C8.78669459,4.51050541 12.2184492,4.45175888 14.4269443,6.47470259 Z M7.8021,7.7991 C6.2391,9.3621 6.2391,11.8951 7.8021,13.4581 C9.3641,15.0201 11.8971,15.0201 13.4591,13.4581 C15.0211,11.8951 15.0211,9.3621 13.4591,7.7991 C11.8951,6.2401 9.3651,6.2401 7.8021,7.7991 Z M12.9801,9.9806 C13.3391,9.9806 13.6301,10.2716 13.6301,10.6296 C13.6301,10.9886 13.3391,11.2796 12.9801,11.2796 L8.2801,11.2796 C7.9211,11.2796 7.6301,10.9886 7.6301,10.6296 C7.6301,10.2716 7.9211,9.9806 8.2801,9.9806 L12.9801,9.9806 Z"
128+
id="Combined-Shape"
129+
fill={
130+
props.disabled
131+
? "#cccccc"
132+
: props.active
133+
? "#ffffff"
134+
: "#121419"
135+
}
136+
></path>
137+
</g>
138+
</g>
94139
</g>
95-
</g>
96-
</g>
97-
</svg>
140+
</svg>
141+
</div>
142+
</props.Tooltip>
98143
</div>
99144
);
100145
};
@@ -105,37 +150,119 @@ export default class FilterController extends React.PureComponent {
105150
filterOut: false,
106151
};
107152

153+
fieldName = "";
154+
fieldValue = null;
155+
enableFilter = true;
156+
108157
constructor(props) {
109158
super(props);
110159

111160
this.handleClick = this.handleClick.bind(this);
161+
162+
if (props.fieldMeta) {
163+
const { fieldMeta } = props;
164+
console.log("### props:", this.props);
165+
console.log("### variable:", this.props.variable);
166+
167+
let fieldName = "";
168+
if (fieldMeta.namespace.length > 1) {
169+
if (!fieldMeta.type) {
170+
this.enableFilter = false;
171+
}
172+
fieldName = fieldMeta.namespace[fieldMeta.namespace.length - 1];
173+
} else {
174+
fieldName = fieldMeta.variable.name;
175+
}
176+
177+
this.fieldValue = fieldMeta.variable.value;
178+
this.fieldName = fieldName;
179+
180+
if (
181+
// @ts-ignore
182+
hasData(props.filterOptions.disabledFields)
183+
) {
184+
// check disable fields
185+
const needDisabledField = props.filterOptions.disabledFields.some(
186+
(disabledField) => {
187+
return disabledField === this.fieldName;
188+
}
189+
);
190+
191+
if (needDisabledField && this.enableFilter) this.enableFilter = false;
192+
}
193+
}
194+
195+
console.log("### [FilterController] this.fieldName:", this.fieldName);
196+
197+
// @ts-ignore
198+
if (hasData(props.filterOptions.currentfilterCollection)) {
199+
props.filterOptions.currentfilterCollection.forEach((currentFilter) => {
200+
if (
201+
currentFilter.filterField === this.fieldName &&
202+
currentFilter.filterValue === this.fieldValue
203+
) {
204+
// fetch current Filter
205+
this.state = {
206+
filterIn: currentFilter.operator === "is" ? true : false,
207+
filterOut: currentFilter.operator === "isnot" ? true : false,
208+
};
209+
}
210+
});
211+
}
112212
}
113213

114214
handleClick(id) {
115215
const preState = this.state[id];
116216

217+
/**
218+
* @typedef {{id?: string, label?: string, filterField: string, filterValue: string, operator: string, popupFilter?: boolean, action?: string}} FilterMetaData
219+
*/
220+
/**
221+
* @type {FilterMetaData}
222+
*/
223+
const filterMeta = {
224+
// id: "",
225+
// label: "",
226+
filterField: this.fieldName,
227+
filterValue: this.fieldValue,
228+
operator: id === "filterIn" ? "is" : "isnot",
229+
popupFilter: true,
230+
action: !preState ? "add" : "remove",
231+
};
232+
233+
this.props.onClickFilter(filterMeta);
117234
this.setState(
118235
{
119236
filterIn: false,
120237
filterOut: false,
121238
},
122239
() => {
123240
this.setState({ [id]: !preState });
124-
241+
const hasFilter = !preState;
242+
this.props.onUpdateFilterStatus(hasFilter);
125243
}
126244
);
127245
}
128246

129247
render() {
130248
return (
131-
<div className="click-to-edit">
249+
<div
250+
className={classNames({
251+
"click-to-edit": true,
252+
hasFilter: this.state.filterIn || this.state.filterOut,
253+
})}
254+
>
132255
<div style={{ display: "flex", flexDirection: "row" }}>
133256
<FilterInIcon
257+
Tooltip={this.props.Tooltip}
134258
onClick={this.handleClick}
259+
disabled={!this.enableFilter}
135260
active={this.state.filterIn}
136261
/>
137262
<FilterOutIcon
263+
Tooltip={this.props.Tooltip}
138264
onClick={this.handleClick}
265+
disabled={!this.enableFilter}
139266
active={this.state.filterOut}
140267
/>
141268
</div>

0 commit comments

Comments
 (0)