Skip to content

Commit a36482e

Browse files
NadavShaarNadavShaar
authored
Merge pull request #76 from NadavShaar/eslint
2 parents 15a5260 + a0e255d commit a36482e

74 files changed

Lines changed: 4287 additions & 3151 deletions

Some content is hidden

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

‎.eslintrc.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es2021": true
5+
},
6+
"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended", "plugin:react-hooks/recommended"],
7+
"parser": "babel-eslint",
8+
"parserOptions": {
9+
"ecmaFeatures": {
10+
"jsx": true
11+
},
12+
"ecmaVersion": 12,
13+
"sourceType": "module"
14+
},
15+
"plugins": ["react", "prettier"],
16+
"rules": {
17+
"prettier/prettier": ["error", { "endOfLine": "auto", "tabWidth": 4 }],
18+
"react/prop-types": 0,
19+
"react-hooks/rules-of-hooks": "error",
20+
"react-hooks/exhaustive-deps": "warn"
21+
}
22+
}

‎demo/src/components/ColumnsControllers.jsx‎

Lines changed: 89 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,132 @@
11
import React from "react";
2-
import ControllerWrappper from './ControllerWrappper';
2+
import ControllerWrappper from "./ControllerWrappper";
33

44
const styles = {
55
column: {
6-
display: 'flex',
7-
flexDirection: 'column',
6+
display: "flex",
7+
flexDirection: "column",
88
paddingBottom: 5,
9-
borderBottom: '1px solid #eee'
9+
borderBottom: "1px solid #eee",
1010
},
1111
label: {
12-
fontWeight: 'bold',
13-
padding: '10px 0',
14-
color: '#125082',
15-
fontSize: 16
16-
}
17-
}
12+
fontWeight: "bold",
13+
padding: "10px 0",
14+
color: "#125082",
15+
fontSize: 16,
16+
},
17+
};
1818

1919
const ColumnsControllers = ({ controllers }) => {
20-
let columns = [ ...controllers.columns[0] ];
20+
let columns = [...controllers.columns[0]];
2121
const setColumns = controllers.columns[1];
2222

2323
const setLabel = (column, newLabel) => {
2424
column.label = newLabel;
2525
setColumns(columns);
26-
}
26+
};
2727

2828
const setVisible = (column) => {
2929
column.visible = !column.visible;
3030
setColumns(columns);
31-
}
31+
};
3232

3333
const setPinned = (column) => {
3434
column.pinned = !column.pinned;
3535
setColumns(columns);
36-
}
36+
};
3737

3838
const setSearchable = (column) => {
3939
column.searchable = !column.searchable;
4040
setColumns(columns);
41-
}
41+
};
4242

4343
const setSortable = (column) => {
4444
column.sortable = !column.sortable;
4545
setColumns(columns);
46-
}
46+
};
4747

4848
const setEditable = (column) => {
4949
column.editable = !column.editable;
5050
setColumns(columns);
51-
}
51+
};
5252

5353
const setResizable = (column) => {
5454
column.resizable = !column.resizable;
5555
setColumns(columns);
56-
}
56+
};
5757

5858
return (
5959
<React.Fragment>
60-
{
61-
columns.map((column, idx) => (
62-
<div key={column.id} style={styles.colmn}>
63-
<span style={styles.label}>{column.label || column.id}</span>
64-
{
65-
(column.id !== 'checkbox' && column.id !== 'buttons') ?
66-
<ControllerWrappper label='Label'>
67-
<input type='text' value={column.label} onChange={e => setLabel(column, e.target.value)} />
68-
</ControllerWrappper>
69-
:
70-
null
71-
}
72-
<ControllerWrappper label='Visible'>
73-
<input type='checkbox' checked={column.visible} onChange={e => setVisible(column)} />
74-
</ControllerWrappper>
75-
{
76-
(idx === 0 || idx === columns.length-1) ?
77-
<ControllerWrappper label='Pinned'>
78-
<input type='checkbox' checked={column.pinned} onChange={e => setPinned(column)} />
79-
</ControllerWrappper>
80-
:
81-
null
82-
}
83-
{
84-
(column.id !== 'checkbox' && column.id !== 'buttons') ?
85-
<ControllerWrappper label='Searchable'>
86-
<input type='checkbox' checked={column.searchable} onChange={e => setSearchable(column)} />
87-
</ControllerWrappper>
88-
:
89-
null
90-
}
91-
{
92-
(column.id !== 'checkbox' && column.id !== 'buttons') ?
93-
<ControllerWrappper label='Sortable'>
94-
<input type='checkbox' checked={column.sortable} onChange={e => setSortable(column)} />
95-
</ControllerWrappper>
96-
:
97-
null
98-
}
99-
{
100-
(column.id !== 'checkbox' && column.id !== 'buttons') ?
101-
<ControllerWrappper label='Editable'>
102-
<input type='checkbox' checked={column.editable} onChange={e => setEditable(column)} />
103-
</ControllerWrappper>
104-
:
105-
null
106-
}
107-
<ControllerWrappper label='Resizable'>
108-
<input type='checkbox' checked={column.resizable} onChange={e => setResizable(column)} />
109-
</ControllerWrappper>
110-
</div>
111-
)
112-
)
113-
}
60+
{columns.map((column, idx) => (
61+
<div key={column.id} style={styles.colmn}>
62+
<span style={styles.label}>
63+
{column.label || column.id}
64+
</span>
65+
{column.id !== "checkbox" && column.id !== "buttons" ? (
66+
<ControllerWrappper label="Label">
67+
<input
68+
type="text"
69+
value={column.label}
70+
onChange={(e) =>
71+
setLabel(column, e.target.value)
72+
}
73+
/>
74+
</ControllerWrappper>
75+
) : null}
76+
<ControllerWrappper label="Visible">
77+
<input
78+
type="checkbox"
79+
checked={column.visible}
80+
onChange={() => setVisible(column)}
81+
/>
82+
</ControllerWrappper>
83+
{idx === 0 || idx === columns.length - 1 ? (
84+
<ControllerWrappper label="Pinned">
85+
<input
86+
type="checkbox"
87+
checked={column.pinned}
88+
onChange={() => setPinned(column)}
89+
/>
90+
</ControllerWrappper>
91+
) : null}
92+
{column.id !== "checkbox" && column.id !== "buttons" ? (
93+
<ControllerWrappper label="Searchable">
94+
<input
95+
type="checkbox"
96+
checked={column.searchable}
97+
onChange={() => setSearchable(column)}
98+
/>
99+
</ControllerWrappper>
100+
) : null}
101+
{column.id !== "checkbox" && column.id !== "buttons" ? (
102+
<ControllerWrappper label="Sortable">
103+
<input
104+
type="checkbox"
105+
checked={column.sortable}
106+
onChange={() => setSortable(column)}
107+
/>
108+
</ControllerWrappper>
109+
) : null}
110+
{column.id !== "checkbox" && column.id !== "buttons" ? (
111+
<ControllerWrappper label="Editable">
112+
<input
113+
type="checkbox"
114+
checked={column.editable}
115+
onChange={() => setEditable(column)}
116+
/>
117+
</ControllerWrappper>
118+
) : null}
119+
<ControllerWrappper label="Resizable">
120+
<input
121+
type="checkbox"
122+
checked={column.resizable}
123+
onChange={() => setResizable(column)}
124+
/>
125+
</ControllerWrappper>
126+
</div>
127+
))}
114128
</React.Fragment>
115-
)
116-
}
129+
);
130+
};
117131

118-
export default ColumnsControllers;
132+
export default ColumnsControllers;

‎demo/src/components/ControllerWrappper.jsx‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,29 @@ import React from "react";
22

33
const styles = {
44
wrapper: {
5-
display: 'flex',
6-
justifyContent: 'space-between',
7-
padding: '7px 0',
8-
alignItems: 'center'
5+
display: "flex",
6+
justifyContent: "space-between",
7+
padding: "7px 0",
8+
alignItems: "center",
99
},
1010
label: {
11-
whiteSpace: 'nowrap',
12-
overflow: 'hidden',
13-
textOverflow: 'ellipsis'
11+
whiteSpace: "nowrap",
12+
overflow: "hidden",
13+
textOverflow: "ellipsis",
1414
},
1515
children: {
16-
display: 'flex',
17-
flexDirection: 'column'
18-
}
19-
}
16+
display: "flex",
17+
flexDirection: "column",
18+
},
19+
};
2020

2121
const ControllerWrappper = ({ label, children }) => {
2222
return (
2323
<div style={styles.wrapper}>
2424
<span style={styles.label}>{label}: </span>
25-
<div style={styles.children}>
26-
{children}
27-
</div>
25+
<div style={styles.children}>{children}</div>
2826
</div>
29-
)
30-
}
27+
);
28+
};
3129

32-
export default ControllerWrappper;
30+
export default ControllerWrappper;

0 commit comments

Comments
 (0)