react-asc 18.5.0 → 18.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/AutoComplete/AutoComplete.d.ts +4 -1
- package/components/TreeView/TreeNode.d.ts +1 -1
- package/components/TreeView/TreeView.d.ts +9 -2
- package/hooks/index.d.ts +1 -1
- package/hooks/useDebounce.d.ts +1 -0
- package/index.es.js +109 -93
- package/index.es.js.map +1 -1
- package/index.js +109 -92
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/hooks/Debounce.hook.d.ts +0 -1
package/index.js
CHANGED
|
@@ -95,56 +95,56 @@ function styleInject(css, ref) {
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
var css_248z$
|
|
99
|
-
var styles$
|
|
100
|
-
styleInject(css_248z$
|
|
98
|
+
var css_248z$R = ".Alert-module_alert__2yOUn {\n border-radius: var(--borderRadius);\n padding: 6px 16px;\n}\n\n.Alert-module_contained__1cUnn.Alert-module_primary__1pnWJ {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Alert-module_contained__1cUnn.Alert-module_accent__3TlkP {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Alert-module_contained__1cUnn.Alert-module_secondary__3cfYS {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Alert-module_contained__1cUnn.Alert-module_light__vSzHK {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Alert-module_contained__1cUnn.Alert-module_dark__3DrkS {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Alert-module_outline__3fdYC.Alert-module_primary__1pnWJ {\n color: var(--primary) !important;\n border: 1px solid var(--primary) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_secondary__3cfYS {\n color: var(--secondary) !important;\n border: 1px solid var(--secondary) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_accent__3TlkP {\n color: var(--accent) !important;\n border: 1px solid var(--accent) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_light__vSzHK {\n color: var(--light-contrast-text) !important;\n border: 1px solid var(--light) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_dark__3DrkS {\n color: var(--dark) !important;\n border: 1px solid var(--dark) !important;\n}";
|
|
99
|
+
var styles$R = {"alert":"Alert-module_alert__2yOUn","contained":"Alert-module_contained__1cUnn","primary":"Alert-module_primary__1pnWJ","accent":"Alert-module_accent__3TlkP","secondary":"Alert-module_secondary__3cfYS","light":"Alert-module_light__vSzHK","dark":"Alert-module_dark__3DrkS","outline":"Alert-module_outline__3fdYC"};
|
|
100
|
+
styleInject(css_248z$R);
|
|
101
101
|
|
|
102
102
|
const Alert = (props) => {
|
|
103
103
|
const { children, className, color = exports.COLOR.primary, variant = exports.VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
|
|
104
104
|
const getCssClasses = () => {
|
|
105
105
|
const cssClasses = [];
|
|
106
|
-
cssClasses.push(styles$
|
|
106
|
+
cssClasses.push(styles$R.alert);
|
|
107
107
|
if (variant === exports.VARIANT.contained) {
|
|
108
|
-
cssClasses.push(styles$
|
|
109
|
-
cssClasses.push(styles$
|
|
108
|
+
cssClasses.push(styles$R.contained);
|
|
109
|
+
cssClasses.push(styles$R[color]);
|
|
110
110
|
}
|
|
111
111
|
if (variant === exports.VARIANT.outline) {
|
|
112
|
-
cssClasses.push(styles$
|
|
113
|
-
cssClasses.push(styles$
|
|
112
|
+
cssClasses.push(styles$R.outline);
|
|
113
|
+
cssClasses.push(styles$R[color]);
|
|
114
114
|
}
|
|
115
|
-
shadow && cssClasses.push(styles$
|
|
115
|
+
shadow && cssClasses.push(styles$R['shadow']);
|
|
116
116
|
className && cssClasses.push(className);
|
|
117
117
|
return cssClasses.filter(r => r).join(' ');
|
|
118
118
|
};
|
|
119
119
|
return (React__default['default'].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
120
120
|
};
|
|
121
121
|
|
|
122
|
-
var css_248z$
|
|
123
|
-
var styles$
|
|
124
|
-
styleInject(css_248z$
|
|
122
|
+
var css_248z$Q = ".AppBar-module_appbar__1S8G1 {\n padding: 0.5rem 1rem;\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0;\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_primary__3CiO7 {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_secondary__1W4qT {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_accent__Mgcwx {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_light__1FxmL {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_dark__3n5rm {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_shadow__2c8iH {\n box-shadow: var(--shadow);\n}";
|
|
123
|
+
var styles$Q = {"appbar":"AppBar-module_appbar__1S8G1","primary":"AppBar-module_primary__3CiO7","secondary":"AppBar-module_secondary__1W4qT","accent":"AppBar-module_accent__Mgcwx","light":"AppBar-module_light__1FxmL","dark":"AppBar-module_dark__3n5rm","shadow":"AppBar-module_shadow__2c8iH"};
|
|
124
|
+
styleInject(css_248z$Q);
|
|
125
125
|
|
|
126
126
|
const AppBar = (props) => {
|
|
127
127
|
const { children, className, color = exports.COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
|
|
128
128
|
const getCssClasses = () => {
|
|
129
129
|
const cssClasses = [];
|
|
130
|
-
cssClasses.push(styles$
|
|
131
|
-
cssClasses.push(styles$
|
|
132
|
-
shadow && cssClasses.push(styles$
|
|
130
|
+
cssClasses.push(styles$Q[color]);
|
|
131
|
+
cssClasses.push(styles$Q.appbar);
|
|
132
|
+
shadow && cssClasses.push(styles$Q['shadow']);
|
|
133
133
|
className && cssClasses.push(className);
|
|
134
134
|
return cssClasses.filter(r => r).join(' ');
|
|
135
135
|
};
|
|
136
136
|
return (React__default['default'].createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
|
|
137
137
|
};
|
|
138
138
|
|
|
139
|
-
var css_248z$
|
|
140
|
-
var styles$
|
|
141
|
-
styleInject(css_248z$
|
|
139
|
+
var css_248z$P = ".AppBarTitle-module_appbarTitle__3J-Z1 {\n align-items: center;\n padding-top: 0.3125rem;\n padding-bottom: 0.3125rem;\n font-size: 1.25rem;\n line-height: 1.8;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden !important;\n display: inline-block;\n}\n.AppBarTitle-module_appbarTitle__3J-Z1:hover {\n cursor: pointer;\n}";
|
|
140
|
+
var styles$P = {"appbarTitle":"AppBarTitle-module_appbarTitle__3J-Z1"};
|
|
141
|
+
styleInject(css_248z$P);
|
|
142
142
|
|
|
143
143
|
const AppBarTitle = (props) => {
|
|
144
144
|
const { children, className, onClick } = props;
|
|
145
145
|
const getCssClass = () => {
|
|
146
146
|
const cssClasses = [];
|
|
147
|
-
cssClasses.push(styles$
|
|
147
|
+
cssClasses.push(styles$P.appbarTitle);
|
|
148
148
|
className && cssClasses.push(className);
|
|
149
149
|
return cssClasses.filter(r => r).join(' ');
|
|
150
150
|
};
|
|
@@ -172,40 +172,40 @@ const Backdrop = (props) => {
|
|
|
172
172
|
return (reactDom.createPortal(React__default['default'].createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles() }), target));
|
|
173
173
|
};
|
|
174
174
|
|
|
175
|
-
var css_248z$
|
|
176
|
-
var styles$
|
|
177
|
-
styleInject(css_248z$
|
|
175
|
+
var css_248z$O = ".List-module_list__1ax9w {\n width: 100%;\n display: flex;\n flex-direction: column;\n padding-left: 0;\n margin-bottom: 0;\n margin-top: 0;\n background-color: var(--white);\n}";
|
|
176
|
+
var styles$O = {"list":"List-module_list__1ax9w"};
|
|
177
|
+
styleInject(css_248z$O);
|
|
178
178
|
|
|
179
179
|
const List = (props) => {
|
|
180
180
|
const { children, className, isFlush } = props;
|
|
181
181
|
const getCssClasses = () => {
|
|
182
182
|
const cssClasses = [];
|
|
183
183
|
if (isFlush) {
|
|
184
|
-
cssClasses.push(styles$
|
|
184
|
+
cssClasses.push(styles$O.flush);
|
|
185
185
|
}
|
|
186
|
-
cssClasses.push(styles$
|
|
186
|
+
cssClasses.push(styles$O.list);
|
|
187
187
|
className && cssClasses.push(className);
|
|
188
188
|
return cssClasses.filter(css => css).join(' ');
|
|
189
189
|
};
|
|
190
190
|
return (React__default['default'].createElement("ul", { className: getCssClasses() }, children));
|
|
191
191
|
};
|
|
192
192
|
|
|
193
|
-
var css_248z$
|
|
194
|
-
var styles$
|
|
195
|
-
styleInject(css_248z$
|
|
193
|
+
var css_248z$N = ".ListItem-module_listItem__3hAZb {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0.75rem 1.25rem;\n min-width: 100%;\n color: var(--bodyColor);\n text-align: inherit;\n transition: background 0.5s ease;\n}\n.ListItem-module_listItem__3hAZb:hover, .ListItem-module_listItem__3hAZb.ListItem-module_active__hyvch {\n cursor: pointer;\n z-index: 1;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n color: var(--primary);\n}\n.ListItem-module_listItem__3hAZb + .ListItem-module_listItem__3hAZb {\n border-top-width: 0;\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_primary__2OJAg {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_accent__2RXHe {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_secondary__3EVjH {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_light__3CJBB {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_dark__SazkE {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
|
|
194
|
+
var styles$N = {"listItem":"ListItem-module_listItem__3hAZb","active":"ListItem-module_active__hyvch","primary":"ListItem-module_primary__2OJAg","accent":"ListItem-module_accent__2RXHe","secondary":"ListItem-module_secondary__3EVjH","light":"ListItem-module_light__3CJBB","dark":"ListItem-module_dark__SazkE"};
|
|
195
|
+
styleInject(css_248z$N);
|
|
196
196
|
|
|
197
197
|
const ListItem = (props) => {
|
|
198
198
|
const { id, children, color, active, className, isHoverable, isDisabled, onClick } = props;
|
|
199
199
|
const getCssClasses = () => {
|
|
200
200
|
const cssClasses = [];
|
|
201
201
|
if (active) {
|
|
202
|
-
cssClasses.push(styles$
|
|
202
|
+
cssClasses.push(styles$N['active']);
|
|
203
203
|
}
|
|
204
204
|
if (isDisabled) {
|
|
205
205
|
cssClasses.push(`disabled`);
|
|
206
206
|
}
|
|
207
|
-
color && cssClasses.push(styles$
|
|
208
|
-
cssClasses.push(styles$
|
|
207
|
+
color && cssClasses.push(styles$N[color]);
|
|
208
|
+
cssClasses.push(styles$N.listItem);
|
|
209
209
|
className && cssClasses.push(className);
|
|
210
210
|
return cssClasses.filter(css => css).join(' ');
|
|
211
211
|
};
|
|
@@ -215,32 +215,32 @@ const ListItem = (props) => {
|
|
|
215
215
|
return (React__default['default'].createElement("li", { id: id, onClick: handleClick, className: getCssClasses() }, children));
|
|
216
216
|
};
|
|
217
217
|
|
|
218
|
-
var css_248z$
|
|
219
|
-
var styles$
|
|
218
|
+
var css_248z$M = ".ListItemAvatar-module_avatar__1fjSE {\n margin-right: 16px;\n}\n.ListItemAvatar-module_avatar__1fjSE svg, .ListItemAvatar-module_avatar__1fjSE img {\n width: 24px;\n height: 24px;\n}\n.ListItemAvatar-module_avatar__1fjSE img {\n border-radius: 50%;\n}";
|
|
219
|
+
var styles$M = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
|
|
220
|
+
styleInject(css_248z$M);
|
|
221
|
+
|
|
222
|
+
const ListItemAvatar = ({ avatar }) => (React__default['default'].createElement("div", { className: styles$M.avatar }, avatar));
|
|
223
|
+
|
|
224
|
+
var css_248z$L = ".ListItemIcon-module_icon__-nsUy {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__-nsUy svg {\n width: 24px;\n height: 24px;\n}";
|
|
225
|
+
var styles$L = {"icon":"ListItemIcon-module_icon__-nsUy"};
|
|
220
226
|
styleInject(css_248z$L);
|
|
221
227
|
|
|
222
|
-
const
|
|
228
|
+
const ListItemIcon = ({ icon }) => (React__default['default'].createElement("div", { className: styles$L.icon }, icon));
|
|
223
229
|
|
|
224
|
-
var css_248z$K = ".
|
|
225
|
-
var styles$K = {"
|
|
230
|
+
var css_248z$K = ".ListItemAction-module_listItemAction__26S66 {\n display: flex;\n justify-content: center;\n min-width: 40px;\n}\n.ListItemAction-module_listItemAction__26S66 svg {\n width: 20px;\n height: 20px;\n}";
|
|
231
|
+
var styles$K = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
|
|
226
232
|
styleInject(css_248z$K);
|
|
227
233
|
|
|
228
|
-
const
|
|
234
|
+
const ListItemAction = ({ children, onClick }) => (React__default['default'].createElement("div", { className: styles$K.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
229
235
|
|
|
230
|
-
var css_248z$J = ".
|
|
231
|
-
var styles$J = {"
|
|
236
|
+
var css_248z$J = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1;\n}";
|
|
237
|
+
var styles$J = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
232
238
|
styleInject(css_248z$J);
|
|
233
239
|
|
|
234
|
-
const ListItemAction = ({ children, onClick }) => (React__default['default'].createElement("div", { className: styles$J.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
235
|
-
|
|
236
|
-
var css_248z$I = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1;\n}";
|
|
237
|
-
var styles$I = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
238
|
-
styleInject(css_248z$I);
|
|
239
|
-
|
|
240
240
|
const ListItemText = ({ primary, secondary }) => {
|
|
241
241
|
const getCssClasses = () => {
|
|
242
242
|
const cssClasses = [];
|
|
243
|
-
cssClasses.push(styles$
|
|
243
|
+
cssClasses.push(styles$J.listItemText);
|
|
244
244
|
return cssClasses.filter(css => css).join(' ');
|
|
245
245
|
};
|
|
246
246
|
return (React__default['default'].createElement("div", { className: getCssClasses() },
|
|
@@ -251,9 +251,9 @@ const ListItemText = ({ primary, secondary }) => {
|
|
|
251
251
|
const ListItemTextPrimary = ({ children }) => (React__default['default'].createElement("div", { className: "list-item-text-primary" }, children));
|
|
252
252
|
const ListItemTextSecondary = ({ children }) => (React__default['default'].createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
253
253
|
|
|
254
|
-
var css_248z$
|
|
255
|
-
var styles$
|
|
256
|
-
styleInject(css_248z$
|
|
254
|
+
var css_248z$I = ".AutoComplete-module_selectContainer__SyqtX {\n position: relative;\n}\n\n.AutoComplete-module_select__2_7JD {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n}\n.AutoComplete-module_select__2_7JD:hover {\n cursor: pointer;\n}\n\n.AutoComplete-module_selectMenu__2_ybA {\n background-color: var(--light);\n position: absolute;\n box-shadow: var(--shadow);\n border-radius: var(--borderRadius);\n width: 100%;\n top: 38px;\n z-index: 1050;\n max-height: 280px;\n overflow: auto;\n}";
|
|
255
|
+
var styles$I = {"selectContainer":"AutoComplete-module_selectContainer__SyqtX","select":"AutoComplete-module_select__2_7JD","selectMenu":"AutoComplete-module_selectMenu__2_ybA"};
|
|
256
|
+
styleInject(css_248z$I);
|
|
257
257
|
|
|
258
258
|
// preset value
|
|
259
259
|
// enter -> delay? -> show results
|
|
@@ -261,8 +261,9 @@ styleInject(css_248z$H);
|
|
|
261
261
|
// multiple
|
|
262
262
|
// custom template render items
|
|
263
263
|
const AutoComplete = (props) => {
|
|
264
|
-
const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, onChange, value } = props;
|
|
264
|
+
const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, onChange, onSelect, value } = props;
|
|
265
265
|
const [model, setModel] = React.useState('');
|
|
266
|
+
const [searchText, setSearchText] = React.useState('');
|
|
266
267
|
const [isShow, setIsShow] = React.useState(false);
|
|
267
268
|
const [optionsTemp, setOptionsTemp] = React.useState([]);
|
|
268
269
|
const selectConainter = React.useRef(null);
|
|
@@ -273,63 +274,64 @@ const AutoComplete = (props) => {
|
|
|
273
274
|
}
|
|
274
275
|
}, [value]);
|
|
275
276
|
React.useEffect(() => {
|
|
276
|
-
|
|
277
|
-
|
|
277
|
+
if (options && options.length > 0) {
|
|
278
|
+
const optionsOrigin = JSON.parse(JSON.stringify(options));
|
|
279
|
+
const regex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
|
|
280
|
+
const optionsFiltered = optionsOrigin.filter(o => { var _a; return (_a = o.label) === null || _a === void 0 ? void 0 : _a.match(regex); });
|
|
281
|
+
setOptionsTemp(optionsFiltered);
|
|
282
|
+
}
|
|
278
283
|
}, [options]);
|
|
284
|
+
useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
|
|
279
285
|
const getCssClass = () => {
|
|
280
286
|
const cssClasses = [];
|
|
281
287
|
className && cssClasses.push(className);
|
|
282
|
-
cssClasses.push(styles$
|
|
288
|
+
cssClasses.push(styles$I.select);
|
|
283
289
|
return cssClasses.filter(r => r).join(' ');
|
|
284
290
|
};
|
|
285
291
|
const show = () => setIsShow(true);
|
|
286
292
|
const hide = () => setIsShow(false);
|
|
287
293
|
const handleOnClick = (option) => {
|
|
288
294
|
if (model !== option.value) {
|
|
289
|
-
|
|
295
|
+
onSelect && onSelect(option);
|
|
290
296
|
}
|
|
291
297
|
setModel(option.label);
|
|
292
298
|
hide();
|
|
293
299
|
};
|
|
294
300
|
const handleOnChange = (e) => {
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
setModel(searchText);
|
|
298
|
-
const regex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
|
|
299
|
-
const optionsFiltered = optionsOrigin.filter(o => { var _a; return (_a = o.label) === null || _a === void 0 ? void 0 : _a.match(regex); });
|
|
300
|
-
setOptionsTemp(optionsFiltered);
|
|
301
|
+
setModel(e.target.value);
|
|
302
|
+
setSearchText(e.target.value);
|
|
301
303
|
show();
|
|
302
304
|
};
|
|
303
305
|
const handleOnFocus = () => {
|
|
304
306
|
openOnFocus && show();
|
|
305
307
|
};
|
|
306
308
|
return (React__default['default'].createElement(React__default['default'].Fragment, null,
|
|
307
|
-
React__default['default'].createElement("div", { ref: selectConainter, className: styles$
|
|
308
|
-
React__default['default'].createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, value: model }),
|
|
309
|
+
React__default['default'].createElement("div", { ref: selectConainter, className: styles$I.selectContainer },
|
|
310
|
+
React__default['default'].createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
|
|
309
311
|
isShow &&
|
|
310
312
|
React__default['default'].createElement(React__default['default'].Fragment, null,
|
|
311
|
-
React__default['default'].createElement("div", { className: styles$
|
|
313
|
+
React__default['default'].createElement("div", { className: styles$I.selectMenu },
|
|
312
314
|
React__default['default'].createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React__default['default'].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option) },
|
|
313
315
|
React__default['default'].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
314
316
|
React__default['default'].createElement(Backdrop, { isTransparent: true, onClick: () => hide() })))));
|
|
315
317
|
};
|
|
316
318
|
|
|
317
|
-
var css_248z$
|
|
318
|
-
var styles$
|
|
319
|
-
styleInject(css_248z$
|
|
319
|
+
var css_248z$H = ".Badge-module_badgeContainer__1QtTD {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.Badge-module_badge__2Y_LO {\n top: 0;\n right: 0;\n transform: scale(1) translate(50%, -50%);\n transform-origin: 100% 0%;\n height: 20px;\n display: flex;\n padding: 0 6px;\n z-index: 1;\n position: absolute;\n flex-wrap: wrap;\n font-size: 0.75rem;\n min-width: 20px;\n align-items: center;\n font-weight: 500;\n line-height: 1;\n align-content: center;\n flex-direction: row;\n justify-content: center;\n border-radius: 10px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Badge-module_badge__2Y_LO.Badge-module_primary__2mn7_ {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Badge-module_badge__2Y_LO.Badge-module_accent__8Hg8z {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Badge-module_badge__2Y_LO.Badge-module_secondary__1QqDc {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Badge-module_badge__2Y_LO.Badge-module_light__3Z7JO {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Badge-module_badge__2Y_LO.Badge-module_dark__2qWe_ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
|
|
320
|
+
var styles$H = {"badgeContainer":"Badge-module_badgeContainer__1QtTD","badge":"Badge-module_badge__2Y_LO","primary":"Badge-module_primary__2mn7_","accent":"Badge-module_accent__8Hg8z","secondary":"Badge-module_secondary__1QqDc","light":"Badge-module_light__3Z7JO","dark":"Badge-module_dark__2qWe_"};
|
|
321
|
+
styleInject(css_248z$H);
|
|
320
322
|
|
|
321
323
|
const Badge = (props) => {
|
|
322
324
|
const { children, content, className, color = exports.COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
323
325
|
const getCssClassesBadgeContainer = () => {
|
|
324
326
|
const cssClasses = [];
|
|
325
|
-
cssClasses.push(styles$
|
|
327
|
+
cssClasses.push(styles$H.badgeContainer);
|
|
326
328
|
className && cssClasses.push(className);
|
|
327
329
|
return cssClasses.filter(css => css).join(' ');
|
|
328
330
|
};
|
|
329
331
|
const getCssClassesBadge = () => {
|
|
330
332
|
const cssClasses = [];
|
|
331
|
-
cssClasses.push(styles$
|
|
332
|
-
cssClasses.push(styles$
|
|
333
|
+
cssClasses.push(styles$H.badge);
|
|
334
|
+
cssClasses.push(styles$H[color]);
|
|
333
335
|
return cssClasses.filter(css => css).join(' ');
|
|
334
336
|
};
|
|
335
337
|
return (React__default['default'].createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -337,43 +339,42 @@ const Badge = (props) => {
|
|
|
337
339
|
React__default['default'].createElement("span", { className: getCssClassesBadge() }, content)));
|
|
338
340
|
};
|
|
339
341
|
|
|
340
|
-
var css_248z$
|
|
341
|
-
var styles$
|
|
342
|
-
styleInject(css_248z$
|
|
342
|
+
var css_248z$G = ".Icon-module_icon__2etAT {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px;\n}\n.Icon-module_icon__2etAT svg {\n width: inherit;\n height: inherit;\n}\n.Icon-module_icon__2etAT.Icon-module_primary__32Mh4 {\n color: var(--primary);\n}\n.Icon-module_icon__2etAT.Icon-module_accent__2U_no {\n color: var(--accent);\n}\n.Icon-module_icon__2etAT.Icon-module_secondary__3cMmx {\n color: var(--secondary);\n}\n.Icon-module_icon__2etAT.Icon-module_light__2SugS {\n color: var(--light);\n}\n.Icon-module_icon__2etAT.Icon-module_dark__GWMzb {\n color: var(--dark);\n}";
|
|
343
|
+
var styles$G = {"icon":"Icon-module_icon__2etAT","primary":"Icon-module_primary__32Mh4","accent":"Icon-module_accent__2U_no","secondary":"Icon-module_secondary__3cMmx","light":"Icon-module_light__2SugS","dark":"Icon-module_dark__GWMzb"};
|
|
344
|
+
styleInject(css_248z$G);
|
|
343
345
|
|
|
344
346
|
const Icon = (props) => {
|
|
345
347
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
346
348
|
const getCssClasses = () => {
|
|
347
349
|
const cssClasses = [];
|
|
348
|
-
cssClasses.push(styles$
|
|
349
|
-
iconColor && cssClasses.push(styles$
|
|
350
|
+
cssClasses.push(styles$G.icon);
|
|
351
|
+
iconColor && cssClasses.push(styles$G[iconColor]);
|
|
350
352
|
className && cssClasses.push(className);
|
|
351
353
|
return cssClasses.filter(css => css).join(' ');
|
|
352
354
|
};
|
|
353
355
|
return (React__default['default'].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
354
356
|
};
|
|
355
357
|
|
|
356
|
-
var css_248z$
|
|
357
|
-
var styles$
|
|
358
|
-
styleInject(css_248z$
|
|
358
|
+
var css_248z$F = ".Button-module_button__3cIVZ {\n text-transform: uppercase !important;\n flex-shrink: 0;\n background-color: transparent;\n display: inline-block;\n font-weight: 400;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n min-width: 64px;\n font-size: 0.875rem;\n border-radius: var(--borderRadius);\n box-shadow: var(--shadow);\n}\n\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg:hover {\n background-color: var(--primary-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6 {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6:hover {\n background-color: var(--accent-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb:hover {\n background-color: var(--secondary-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z:hover {\n background-color: var(--light-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU:hover {\n background-color: var(--dark-dark);\n}\n.Button-module_btnContained__8Q4uL:disabled:hover {\n cursor: not-allowed;\n}\n\n.Button-module_btnText__32H44 {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnText__32H44.Button-module_primary__2soUg {\n color: var(--primary) !important;\n}\n.Button-module_btnText__32H44.Button-module_primary__2soUg:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_secondary__psAvb {\n color: var(--secondary) !important;\n}\n.Button-module_btnText__32H44.Button-module_secondary__psAvb:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_accent__1_cP6 {\n color: var(--accent) !important;\n}\n.Button-module_btnText__32H44.Button-module_accent__1_cP6:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important;\n}\n.Button-module_btnText__32H44.Button-module_light__JVK1z:hover {\n text-decoration: none;\n background: var(--light-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_dark__O89wU {\n color: var(--dark) !important;\n}\n.Button-module_btnText__32H44.Button-module_dark__O89wU:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important;\n}\n\n.Button-module_btnOutline__2drkn {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnOutline__2drkn.Button-module_primary__2soUg {\n color: var(--primary) !important;\n border-color: var(--primary) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_primary__2soUg:hover {\n background: var(--primary-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_secondary__psAvb {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_secondary__psAvb:hover {\n background: var(--secondary-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_accent__1_cP6 {\n color: var(--accent) !important;\n border-color: var(--accent) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_accent__1_cP6:hover {\n background: var(--accent-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_light__JVK1z:hover {\n background: var(--light-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_dark__O89wU {\n color: var(--dark) !important;\n border-color: var(--dark) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_dark__O89wU:hover {\n background: var(--dark-highlight) !important;\n}\n\n.Button-module_startIcon__1TN-G {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px;\n}\n.Button-module_startIcon__1TN-G svg {\n width: 18px;\n height: 18px;\n}\n\n.Button-module_endIcon__3uZjE {\n display: inherit;\n margin-left: 8px;\n}\n.Button-module_endIcon__3uZjE svg {\n width: 18px;\n height: 18px;\n}";
|
|
359
|
+
var styles$F = {"button":"Button-module_button__3cIVZ","btnContained":"Button-module_btnContained__8Q4uL","primary":"Button-module_primary__2soUg","accent":"Button-module_accent__1_cP6","secondary":"Button-module_secondary__psAvb","light":"Button-module_light__JVK1z","dark":"Button-module_dark__O89wU","btnText":"Button-module_btnText__32H44","btnOutline":"Button-module_btnOutline__2drkn","startIcon":"Button-module_startIcon__1TN-G","endIcon":"Button-module_endIcon__3uZjE"};
|
|
360
|
+
styleInject(css_248z$F);
|
|
359
361
|
|
|
360
362
|
const ButtonTemplate = (props) => {
|
|
361
363
|
const { children, variant = exports.VARIANT.contained, color = exports.COLOR.primary, isRounded, isActive, className, startIcon, endIcon } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon"]);
|
|
362
364
|
const getCssClasses = () => {
|
|
363
365
|
const cssClasses = [];
|
|
364
|
-
cssClasses.push(
|
|
365
|
-
cssClasses.push(styles$E.button);
|
|
366
|
+
cssClasses.push(styles$F.button);
|
|
366
367
|
if (variant !== 'outline' && variant !== 'text') {
|
|
367
|
-
cssClasses.push(styles$
|
|
368
|
-
cssClasses.push(styles$
|
|
368
|
+
cssClasses.push(styles$F.btnContained);
|
|
369
|
+
cssClasses.push(styles$F[color]);
|
|
369
370
|
}
|
|
370
371
|
if (variant === 'outline') {
|
|
371
|
-
cssClasses.push(styles$
|
|
372
|
-
cssClasses.push(styles$
|
|
372
|
+
cssClasses.push(styles$F.btnOutline);
|
|
373
|
+
cssClasses.push(styles$F[color]);
|
|
373
374
|
}
|
|
374
375
|
if (variant === 'text') {
|
|
375
|
-
cssClasses.push(styles$
|
|
376
|
-
cssClasses.push(styles$
|
|
376
|
+
cssClasses.push(styles$F.btnText);
|
|
377
|
+
cssClasses.push(styles$F[color]);
|
|
377
378
|
}
|
|
378
379
|
if (isRounded && variant !== 'text') {
|
|
379
380
|
cssClasses.push(`rounded-pill`);
|
|
@@ -387,21 +388,25 @@ const ButtonTemplate = (props) => {
|
|
|
387
388
|
return (React__default['default'].createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
388
389
|
React__default['default'].createElement("span", { className: "d-flex justify-content-center" },
|
|
389
390
|
startIcon &&
|
|
390
|
-
React__default['default'].createElement(Icon, { className: styles$
|
|
391
|
+
React__default['default'].createElement(Icon, { className: styles$F.startIcon }, startIcon),
|
|
391
392
|
children,
|
|
392
393
|
endIcon &&
|
|
393
|
-
React__default['default'].createElement(Icon, { className: styles$
|
|
394
|
+
React__default['default'].createElement(Icon, { className: styles$F.endIcon }, endIcon))));
|
|
394
395
|
};
|
|
395
396
|
|
|
396
397
|
const Button = (props) => {
|
|
397
398
|
return (React__default['default'].createElement(ButtonTemplate, Object.assign({}, props)));
|
|
398
399
|
};
|
|
399
400
|
|
|
401
|
+
var css_248z$E = ".ButtonGroup-module_buttonGroup__2RS71 button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__2RS71 button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}";
|
|
402
|
+
var styles$E = {"buttonGroup":"ButtonGroup-module_buttonGroup__2RS71"};
|
|
403
|
+
styleInject(css_248z$E);
|
|
404
|
+
|
|
400
405
|
const ButtonGroup = (props) => {
|
|
401
406
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
402
407
|
const getCssClasses = () => {
|
|
403
408
|
const cssClasses = [];
|
|
404
|
-
cssClasses.push(
|
|
409
|
+
cssClasses.push(styles$E.buttonGroup);
|
|
405
410
|
className && cssClasses.push(className);
|
|
406
411
|
return cssClasses.filter(css => css).join(' ');
|
|
407
412
|
};
|
|
@@ -2131,6 +2136,15 @@ const useConstructor = (callBack = () => { }) => {
|
|
|
2131
2136
|
setHasBeenCalled(true);
|
|
2132
2137
|
};
|
|
2133
2138
|
|
|
2139
|
+
function useDebounce(callback, timeout, deps) {
|
|
2140
|
+
const timeoutId = React.useRef();
|
|
2141
|
+
React.useEffect(() => {
|
|
2142
|
+
clearTimeout(timeoutId.current);
|
|
2143
|
+
timeoutId.current = setTimeout(callback, timeout);
|
|
2144
|
+
return () => clearTimeout(timeoutId.current);
|
|
2145
|
+
}, deps);
|
|
2146
|
+
}
|
|
2147
|
+
|
|
2134
2148
|
var css_248z$4 = ".Step-module_stepWrapper__1se3l {\n display: flex;\n align-items: center;\n padding-left: 8px;\n padding-right: 8px;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_stepWrapper__1se3l.Step-module_hasLabel__3cdCU:not(.Step-module_disabled__1R7hh):hover {\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n border-radius: var(--borderRadius);\n}\n\n.Step-module_step__2siYu {\n width: 40px;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_step__2siYu:not(.Step-module_hasLabel__3cdCU):not(.Step-module_disabled__1R7hh):hover {\n border-radius: 100%;\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n}\n.Step-module_step__2siYu.Step-module_hasLabel__3cdCU svg {\n width: 18px !important;\n height: 18px !important;\n}\n\n.Step-module_stepIconCircle__3IyDn svg {\n width: 24px;\n height: 24px;\n}\n\n.Step-module_stepValue__2TVrP {\n position: absolute;\n color: var(--secondary-contrast-text);\n}\n.Step-module_stepValue__2TVrP .Step-module_isActive__1QTL4 {\n color: var(--primary-contrast-text);\n}";
|
|
2135
2149
|
var styles$4 = {"stepWrapper":"Step-module_stepWrapper__1se3l","hasLabel":"Step-module_hasLabel__3cdCU","disabled":"Step-module_disabled__1R7hh","step":"Step-module_step__2siYu","stepIconCircle":"Step-module_stepIconCircle__3IyDn","stepValue":"Step-module_stepValue__2TVrP","isActive":"Step-module_isActive__1QTL4"};
|
|
2136
2150
|
styleInject(css_248z$4);
|
|
@@ -2448,16 +2462,16 @@ const TimeSelect = (props) => {
|
|
|
2448
2462
|
};
|
|
2449
2463
|
|
|
2450
2464
|
const TreeNode = (props) => {
|
|
2451
|
-
const { id, label, level, hasChildren, isExpanded, isSelected,
|
|
2465
|
+
const { id, label, level, hasChildren, isExpanded, isSelected, onToggleExpand, onClickSelect } = props;
|
|
2452
2466
|
return (React__default['default'].createElement("li", { className: "tree-node", style: { paddingLeft: `${(48 * level) + (hasChildren ? 0 : 1) * 48}px` } },
|
|
2453
2467
|
hasChildren &&
|
|
2454
|
-
React__default['default'].createElement(IconButton, { onClick: () =>
|
|
2468
|
+
React__default['default'].createElement(IconButton, { onClick: () => onToggleExpand(id), icon: !isExpanded ? React__default['default'].createElement(ChevronRightSolidIcon, null) : React__default['default'].createElement(ChevronDownSolidIcon, null) }),
|
|
2455
2469
|
React__default['default'].createElement(Checkbox, { checked: isSelected, onChange: () => onClickSelect(id) }),
|
|
2456
2470
|
label));
|
|
2457
2471
|
};
|
|
2458
2472
|
|
|
2459
2473
|
const TreeView = (props) => {
|
|
2460
|
-
const { data, onSelect } = props;
|
|
2474
|
+
const { data, onSelect, onExpand, onCollapse } = props;
|
|
2461
2475
|
const [flattenData, setFlattenData] = React.useState([]);
|
|
2462
2476
|
const [expandedItems, setExpandedItems] = React.useState([]);
|
|
2463
2477
|
const [selectedItemIds, setSelectedItemIds] = React.useState([]);
|
|
@@ -2476,14 +2490,16 @@ const TreeView = (props) => {
|
|
|
2476
2490
|
React.useEffect(() => {
|
|
2477
2491
|
setFlattenData(flattenDeep(data));
|
|
2478
2492
|
}, [data]);
|
|
2479
|
-
const
|
|
2493
|
+
const handleOnToggleExpand = (item) => {
|
|
2480
2494
|
if (item.hasChildren) {
|
|
2481
2495
|
let newExpandedItems = [...expandedItems];
|
|
2482
2496
|
if (isExpanded(item.id)) {
|
|
2483
2497
|
newExpandedItems = collapseRecursive(item, [...expandedItems]);
|
|
2498
|
+
onCollapse && onCollapse(item.id);
|
|
2484
2499
|
}
|
|
2485
2500
|
else {
|
|
2486
2501
|
newExpandedItems.push(item);
|
|
2502
|
+
onExpand && onExpand(item.id);
|
|
2487
2503
|
}
|
|
2488
2504
|
setExpandedItems(newExpandedItems);
|
|
2489
2505
|
}
|
|
@@ -2524,7 +2540,7 @@ const TreeView = (props) => {
|
|
|
2524
2540
|
};
|
|
2525
2541
|
return (React__default['default'].createElement("ul", { className: "treeview" }, flattenData.map(item => {
|
|
2526
2542
|
return isItemVisible(item) &&
|
|
2527
|
-
React__default['default'].createElement(TreeNode, { key: item.id, id: item.id, label: item.label, level: item.level, parentId: item.parentId, isExpanded: isExpanded(item.id), isSelected: isSelected(item.id), hasChildren: item.hasChildren,
|
|
2543
|
+
React__default['default'].createElement(TreeNode, { key: item.id, id: item.id, label: item.label, level: item.level, parentId: item.parentId, isExpanded: isExpanded(item.id), isSelected: isSelected(item.id), hasChildren: item.hasChildren, onToggleExpand: () => handleOnToggleExpand(item), onClickSelect: () => handleNodeClickSelect(item) });
|
|
2528
2544
|
})));
|
|
2529
2545
|
};
|
|
2530
2546
|
|
|
@@ -2633,6 +2649,7 @@ exports.loadingIndicatorService = loadingIndicatorService;
|
|
|
2633
2649
|
exports.modalService = modalService;
|
|
2634
2650
|
exports.snackbarService = snackbarService;
|
|
2635
2651
|
exports.useConstructor = useConstructor;
|
|
2652
|
+
exports.useDebounce = useDebounce;
|
|
2636
2653
|
exports.useHover = useHover;
|
|
2637
2654
|
exports.useWindowSize = useWindowSize;
|
|
2638
2655
|
//# sourceMappingURL=index.js.map
|