react-asc 18.6.0 → 18.7.2
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 +5 -1
- package/hooks/index.d.ts +1 -1
- package/hooks/useDebounce.d.ts +1 -0
- package/index.es.js +109 -88
- package/index.es.js.map +1 -1
- package/index.js +109 -87
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/hooks/Debounce.hook.d.ts +0 -1
|
@@ -8,8 +8,12 @@ export interface IAutoCompleteProps {
|
|
|
8
8
|
value?: string;
|
|
9
9
|
openOnFocus?: boolean;
|
|
10
10
|
disabled?: boolean;
|
|
11
|
+
placeholder?: string;
|
|
11
12
|
readOnly?: boolean;
|
|
12
|
-
|
|
13
|
+
debounce?: number;
|
|
14
|
+
showClearButton?: boolean;
|
|
15
|
+
onSelect?: (val: ISelectOption) => void;
|
|
16
|
+
onChange?: (val: string | undefined) => void;
|
|
13
17
|
onKeyDown?: (event: any) => void;
|
|
14
18
|
}
|
|
15
19
|
export declare const AutoComplete: (props: IAutoCompleteProps) => JSX.Element;
|
package/hooks/index.d.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useDebounce(callback: any, timeout: any, deps: any): void;
|
package/index.es.js
CHANGED
|
@@ -87,56 +87,56 @@ function styleInject(css, ref) {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
var css_248z$
|
|
91
|
-
var styles$
|
|
92
|
-
styleInject(css_248z$
|
|
90
|
+
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}";
|
|
91
|
+
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"};
|
|
92
|
+
styleInject(css_248z$R);
|
|
93
93
|
|
|
94
94
|
const Alert = (props) => {
|
|
95
95
|
const { children, className, color = COLOR.primary, variant = VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
|
|
96
96
|
const getCssClasses = () => {
|
|
97
97
|
const cssClasses = [];
|
|
98
|
-
cssClasses.push(styles$
|
|
98
|
+
cssClasses.push(styles$R.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$R.contained);
|
|
101
|
+
cssClasses.push(styles$R[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$R.outline);
|
|
105
|
+
cssClasses.push(styles$R[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$R['shadow']);
|
|
108
108
|
className && cssClasses.push(className);
|
|
109
109
|
return cssClasses.filter(r => r).join(' ');
|
|
110
110
|
};
|
|
111
111
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
112
112
|
};
|
|
113
113
|
|
|
114
|
-
var css_248z$
|
|
115
|
-
var styles$
|
|
116
|
-
styleInject(css_248z$
|
|
114
|
+
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}";
|
|
115
|
+
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"};
|
|
116
|
+
styleInject(css_248z$Q);
|
|
117
117
|
|
|
118
118
|
const AppBar = (props) => {
|
|
119
119
|
const { children, className, color = COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
|
|
120
120
|
const getCssClasses = () => {
|
|
121
121
|
const cssClasses = [];
|
|
122
|
-
cssClasses.push(styles$
|
|
123
|
-
cssClasses.push(styles$
|
|
124
|
-
shadow && cssClasses.push(styles$
|
|
122
|
+
cssClasses.push(styles$Q[color]);
|
|
123
|
+
cssClasses.push(styles$Q.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$Q['shadow']);
|
|
125
125
|
className && cssClasses.push(className);
|
|
126
126
|
return cssClasses.filter(r => r).join(' ');
|
|
127
127
|
};
|
|
128
128
|
return (React.createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
|
|
129
129
|
};
|
|
130
130
|
|
|
131
|
-
var css_248z$
|
|
132
|
-
var styles$
|
|
133
|
-
styleInject(css_248z$
|
|
131
|
+
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}";
|
|
132
|
+
var styles$P = {"appbarTitle":"AppBarTitle-module_appbarTitle__3J-Z1"};
|
|
133
|
+
styleInject(css_248z$P);
|
|
134
134
|
|
|
135
135
|
const AppBarTitle = (props) => {
|
|
136
136
|
const { children, className, onClick } = props;
|
|
137
137
|
const getCssClass = () => {
|
|
138
138
|
const cssClasses = [];
|
|
139
|
-
cssClasses.push(styles$
|
|
139
|
+
cssClasses.push(styles$P.appbarTitle);
|
|
140
140
|
className && cssClasses.push(className);
|
|
141
141
|
return cssClasses.filter(r => r).join(' ');
|
|
142
142
|
};
|
|
@@ -164,40 +164,40 @@ const Backdrop = (props) => {
|
|
|
164
164
|
return (createPortal(React.createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles() }), target));
|
|
165
165
|
};
|
|
166
166
|
|
|
167
|
-
var css_248z$
|
|
168
|
-
var styles$
|
|
169
|
-
styleInject(css_248z$
|
|
167
|
+
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}";
|
|
168
|
+
var styles$O = {"list":"List-module_list__1ax9w"};
|
|
169
|
+
styleInject(css_248z$O);
|
|
170
170
|
|
|
171
171
|
const List = (props) => {
|
|
172
172
|
const { children, className, isFlush } = props;
|
|
173
173
|
const getCssClasses = () => {
|
|
174
174
|
const cssClasses = [];
|
|
175
175
|
if (isFlush) {
|
|
176
|
-
cssClasses.push(styles$
|
|
176
|
+
cssClasses.push(styles$O.flush);
|
|
177
177
|
}
|
|
178
|
-
cssClasses.push(styles$
|
|
178
|
+
cssClasses.push(styles$O.list);
|
|
179
179
|
className && cssClasses.push(className);
|
|
180
180
|
return cssClasses.filter(css => css).join(' ');
|
|
181
181
|
};
|
|
182
182
|
return (React.createElement("ul", { className: getCssClasses() }, children));
|
|
183
183
|
};
|
|
184
184
|
|
|
185
|
-
var css_248z$
|
|
186
|
-
var styles$
|
|
187
|
-
styleInject(css_248z$
|
|
185
|
+
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}";
|
|
186
|
+
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"};
|
|
187
|
+
styleInject(css_248z$N);
|
|
188
188
|
|
|
189
189
|
const ListItem = (props) => {
|
|
190
190
|
const { id, children, color, active, className, isHoverable, isDisabled, onClick } = props;
|
|
191
191
|
const getCssClasses = () => {
|
|
192
192
|
const cssClasses = [];
|
|
193
193
|
if (active) {
|
|
194
|
-
cssClasses.push(styles$
|
|
194
|
+
cssClasses.push(styles$N['active']);
|
|
195
195
|
}
|
|
196
196
|
if (isDisabled) {
|
|
197
197
|
cssClasses.push(`disabled`);
|
|
198
198
|
}
|
|
199
|
-
color && cssClasses.push(styles$
|
|
200
|
-
cssClasses.push(styles$
|
|
199
|
+
color && cssClasses.push(styles$N[color]);
|
|
200
|
+
cssClasses.push(styles$N.listItem);
|
|
201
201
|
className && cssClasses.push(className);
|
|
202
202
|
return cssClasses.filter(css => css).join(' ');
|
|
203
203
|
};
|
|
@@ -207,32 +207,32 @@ const ListItem = (props) => {
|
|
|
207
207
|
return (React.createElement("li", { id: id, onClick: handleClick, className: getCssClasses() }, children));
|
|
208
208
|
};
|
|
209
209
|
|
|
210
|
-
var css_248z$
|
|
211
|
-
var styles$
|
|
210
|
+
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}";
|
|
211
|
+
var styles$M = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
|
|
212
|
+
styleInject(css_248z$M);
|
|
213
|
+
|
|
214
|
+
const ListItemAvatar = ({ avatar }) => (React.createElement("div", { className: styles$M.avatar }, avatar));
|
|
215
|
+
|
|
216
|
+
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}";
|
|
217
|
+
var styles$L = {"icon":"ListItemIcon-module_icon__-nsUy"};
|
|
212
218
|
styleInject(css_248z$L);
|
|
213
219
|
|
|
214
|
-
const
|
|
220
|
+
const ListItemIcon = ({ icon }) => (React.createElement("div", { className: styles$L.icon }, icon));
|
|
215
221
|
|
|
216
|
-
var css_248z$K = ".
|
|
217
|
-
var styles$K = {"
|
|
222
|
+
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}";
|
|
223
|
+
var styles$K = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
|
|
218
224
|
styleInject(css_248z$K);
|
|
219
225
|
|
|
220
|
-
const
|
|
226
|
+
const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$K.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
221
227
|
|
|
222
|
-
var css_248z$J = ".
|
|
223
|
-
var styles$J = {"
|
|
228
|
+
var css_248z$J = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1;\n}";
|
|
229
|
+
var styles$J = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
224
230
|
styleInject(css_248z$J);
|
|
225
231
|
|
|
226
|
-
const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$J.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
227
|
-
|
|
228
|
-
var css_248z$I = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1;\n}";
|
|
229
|
-
var styles$I = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
230
|
-
styleInject(css_248z$I);
|
|
231
|
-
|
|
232
232
|
const ListItemText = ({ primary, secondary }) => {
|
|
233
233
|
const getCssClasses = () => {
|
|
234
234
|
const cssClasses = [];
|
|
235
|
-
cssClasses.push(styles$
|
|
235
|
+
cssClasses.push(styles$J.listItemText);
|
|
236
236
|
return cssClasses.filter(css => css).join(' ');
|
|
237
237
|
};
|
|
238
238
|
return (React.createElement("div", { className: getCssClasses() },
|
|
@@ -243,9 +243,9 @@ const ListItemText = ({ primary, secondary }) => {
|
|
|
243
243
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
244
244
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
245
245
|
|
|
246
|
-
var css_248z$
|
|
247
|
-
var styles$
|
|
248
|
-
styleInject(css_248z$
|
|
246
|
+
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}";
|
|
247
|
+
var styles$I = {"selectContainer":"AutoComplete-module_selectContainer__SyqtX","select":"AutoComplete-module_select__2_7JD","selectMenu":"AutoComplete-module_selectMenu__2_ybA"};
|
|
248
|
+
styleInject(css_248z$I);
|
|
249
249
|
|
|
250
250
|
// preset value
|
|
251
251
|
// enter -> delay? -> show results
|
|
@@ -253,8 +253,9 @@ styleInject(css_248z$H);
|
|
|
253
253
|
// multiple
|
|
254
254
|
// custom template render items
|
|
255
255
|
const AutoComplete = (props) => {
|
|
256
|
-
const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, onChange, value } = props;
|
|
256
|
+
const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, showClearButton, onChange, onSelect, value } = props;
|
|
257
257
|
const [model, setModel] = useState('');
|
|
258
|
+
const [searchText, setSearchText] = useState('');
|
|
258
259
|
const [isShow, setIsShow] = useState(false);
|
|
259
260
|
const [optionsTemp, setOptionsTemp] = useState([]);
|
|
260
261
|
const selectConainter = useRef(null);
|
|
@@ -265,63 +266,71 @@ const AutoComplete = (props) => {
|
|
|
265
266
|
}
|
|
266
267
|
}, [value]);
|
|
267
268
|
useEffect(() => {
|
|
268
|
-
|
|
269
|
-
|
|
269
|
+
if (options && options.length > 0) {
|
|
270
|
+
const optionsOrigin = JSON.parse(JSON.stringify(options));
|
|
271
|
+
const regex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
|
|
272
|
+
const optionsFiltered = optionsOrigin.filter(o => { var _a; return (_a = o.label) === null || _a === void 0 ? void 0 : _a.match(regex); });
|
|
273
|
+
setOptionsTemp(optionsFiltered);
|
|
274
|
+
}
|
|
270
275
|
}, [options]);
|
|
276
|
+
useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
|
|
271
277
|
const getCssClass = () => {
|
|
272
278
|
const cssClasses = [];
|
|
273
279
|
className && cssClasses.push(className);
|
|
274
|
-
cssClasses.push(styles$
|
|
280
|
+
cssClasses.push(styles$I.select);
|
|
275
281
|
return cssClasses.filter(r => r).join(' ');
|
|
276
282
|
};
|
|
277
283
|
const show = () => setIsShow(true);
|
|
278
284
|
const hide = () => setIsShow(false);
|
|
279
285
|
const handleOnClick = (option) => {
|
|
280
286
|
if (model !== option.value) {
|
|
281
|
-
|
|
287
|
+
onSelect && onSelect(option);
|
|
282
288
|
}
|
|
283
289
|
setModel(option.label);
|
|
284
290
|
hide();
|
|
285
291
|
};
|
|
286
292
|
const handleOnChange = (e) => {
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
setModel(searchText);
|
|
290
|
-
const regex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
|
|
291
|
-
const optionsFiltered = optionsOrigin.filter(o => { var _a; return (_a = o.label) === null || _a === void 0 ? void 0 : _a.match(regex); });
|
|
292
|
-
setOptionsTemp(optionsFiltered);
|
|
293
|
+
setModel(e.target.value);
|
|
294
|
+
setSearchText(e.target.value);
|
|
293
295
|
show();
|
|
294
296
|
};
|
|
295
297
|
const handleOnFocus = () => {
|
|
296
298
|
openOnFocus && show();
|
|
297
299
|
};
|
|
300
|
+
const handleClickReset = () => {
|
|
301
|
+
setModel('');
|
|
302
|
+
setSearchText('');
|
|
303
|
+
};
|
|
298
304
|
return (React.createElement(React.Fragment, null,
|
|
299
|
-
React.createElement("div", { ref: selectConainter, className: styles$
|
|
300
|
-
React.createElement("
|
|
305
|
+
React.createElement("div", { ref: selectConainter, className: styles$I.selectContainer },
|
|
306
|
+
React.createElement("div", { className: "d-flex" },
|
|
307
|
+
React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
|
|
308
|
+
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
309
|
+
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
301
310
|
isShow &&
|
|
302
311
|
React.createElement(React.Fragment, null,
|
|
303
|
-
React.createElement("div", { className: styles$
|
|
312
|
+
React.createElement("div", { className: styles$I.selectMenu },
|
|
304
313
|
React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option) },
|
|
305
314
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
306
315
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() })))));
|
|
307
316
|
};
|
|
308
317
|
|
|
309
|
-
var css_248z$
|
|
310
|
-
var styles$
|
|
311
|
-
styleInject(css_248z$
|
|
318
|
+
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}";
|
|
319
|
+
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_"};
|
|
320
|
+
styleInject(css_248z$H);
|
|
312
321
|
|
|
313
322
|
const Badge = (props) => {
|
|
314
323
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
315
324
|
const getCssClassesBadgeContainer = () => {
|
|
316
325
|
const cssClasses = [];
|
|
317
|
-
cssClasses.push(styles$
|
|
326
|
+
cssClasses.push(styles$H.badgeContainer);
|
|
318
327
|
className && cssClasses.push(className);
|
|
319
328
|
return cssClasses.filter(css => css).join(' ');
|
|
320
329
|
};
|
|
321
330
|
const getCssClassesBadge = () => {
|
|
322
331
|
const cssClasses = [];
|
|
323
|
-
cssClasses.push(styles$
|
|
324
|
-
cssClasses.push(styles$
|
|
332
|
+
cssClasses.push(styles$H.badge);
|
|
333
|
+
cssClasses.push(styles$H[color]);
|
|
325
334
|
return cssClasses.filter(css => css).join(' ');
|
|
326
335
|
};
|
|
327
336
|
return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -329,43 +338,42 @@ const Badge = (props) => {
|
|
|
329
338
|
React.createElement("span", { className: getCssClassesBadge() }, content)));
|
|
330
339
|
};
|
|
331
340
|
|
|
332
|
-
var css_248z$
|
|
333
|
-
var styles$
|
|
334
|
-
styleInject(css_248z$
|
|
341
|
+
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}";
|
|
342
|
+
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"};
|
|
343
|
+
styleInject(css_248z$G);
|
|
335
344
|
|
|
336
345
|
const Icon = (props) => {
|
|
337
346
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
338
347
|
const getCssClasses = () => {
|
|
339
348
|
const cssClasses = [];
|
|
340
|
-
cssClasses.push(styles$
|
|
341
|
-
iconColor && cssClasses.push(styles$
|
|
349
|
+
cssClasses.push(styles$G.icon);
|
|
350
|
+
iconColor && cssClasses.push(styles$G[iconColor]);
|
|
342
351
|
className && cssClasses.push(className);
|
|
343
352
|
return cssClasses.filter(css => css).join(' ');
|
|
344
353
|
};
|
|
345
354
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
346
355
|
};
|
|
347
356
|
|
|
348
|
-
var css_248z$
|
|
349
|
-
var styles$
|
|
350
|
-
styleInject(css_248z$
|
|
357
|
+
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}";
|
|
358
|
+
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"};
|
|
359
|
+
styleInject(css_248z$F);
|
|
351
360
|
|
|
352
361
|
const ButtonTemplate = (props) => {
|
|
353
362
|
const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon"]);
|
|
354
363
|
const getCssClasses = () => {
|
|
355
364
|
const cssClasses = [];
|
|
356
|
-
cssClasses.push(
|
|
357
|
-
cssClasses.push(styles$E.button);
|
|
365
|
+
cssClasses.push(styles$F.button);
|
|
358
366
|
if (variant !== 'outline' && variant !== 'text') {
|
|
359
|
-
cssClasses.push(styles$
|
|
360
|
-
cssClasses.push(styles$
|
|
367
|
+
cssClasses.push(styles$F.btnContained);
|
|
368
|
+
cssClasses.push(styles$F[color]);
|
|
361
369
|
}
|
|
362
370
|
if (variant === 'outline') {
|
|
363
|
-
cssClasses.push(styles$
|
|
364
|
-
cssClasses.push(styles$
|
|
371
|
+
cssClasses.push(styles$F.btnOutline);
|
|
372
|
+
cssClasses.push(styles$F[color]);
|
|
365
373
|
}
|
|
366
374
|
if (variant === 'text') {
|
|
367
|
-
cssClasses.push(styles$
|
|
368
|
-
cssClasses.push(styles$
|
|
375
|
+
cssClasses.push(styles$F.btnText);
|
|
376
|
+
cssClasses.push(styles$F[color]);
|
|
369
377
|
}
|
|
370
378
|
if (isRounded && variant !== 'text') {
|
|
371
379
|
cssClasses.push(`rounded-pill`);
|
|
@@ -379,21 +387,25 @@ const ButtonTemplate = (props) => {
|
|
|
379
387
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
380
388
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
381
389
|
startIcon &&
|
|
382
|
-
React.createElement(Icon, { className: styles$
|
|
390
|
+
React.createElement(Icon, { className: styles$F.startIcon }, startIcon),
|
|
383
391
|
children,
|
|
384
392
|
endIcon &&
|
|
385
|
-
React.createElement(Icon, { className: styles$
|
|
393
|
+
React.createElement(Icon, { className: styles$F.endIcon }, endIcon))));
|
|
386
394
|
};
|
|
387
395
|
|
|
388
396
|
const Button = (props) => {
|
|
389
397
|
return (React.createElement(ButtonTemplate, Object.assign({}, props)));
|
|
390
398
|
};
|
|
391
399
|
|
|
400
|
+
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}";
|
|
401
|
+
var styles$E = {"buttonGroup":"ButtonGroup-module_buttonGroup__2RS71"};
|
|
402
|
+
styleInject(css_248z$E);
|
|
403
|
+
|
|
392
404
|
const ButtonGroup = (props) => {
|
|
393
405
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
394
406
|
const getCssClasses = () => {
|
|
395
407
|
const cssClasses = [];
|
|
396
|
-
cssClasses.push(
|
|
408
|
+
cssClasses.push(styles$E.buttonGroup);
|
|
397
409
|
className && cssClasses.push(className);
|
|
398
410
|
return cssClasses.filter(css => css).join(' ');
|
|
399
411
|
};
|
|
@@ -2123,6 +2135,15 @@ const useConstructor = (callBack = () => { }) => {
|
|
|
2123
2135
|
setHasBeenCalled(true);
|
|
2124
2136
|
};
|
|
2125
2137
|
|
|
2138
|
+
function useDebounce(callback, timeout, deps) {
|
|
2139
|
+
const timeoutId = useRef();
|
|
2140
|
+
useEffect(() => {
|
|
2141
|
+
clearTimeout(timeoutId.current);
|
|
2142
|
+
timeoutId.current = setTimeout(callback, timeout);
|
|
2143
|
+
return () => clearTimeout(timeoutId.current);
|
|
2144
|
+
}, deps);
|
|
2145
|
+
}
|
|
2146
|
+
|
|
2126
2147
|
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}";
|
|
2127
2148
|
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"};
|
|
2128
2149
|
styleInject(css_248z$4);
|
|
@@ -2522,5 +2543,5 @@ const TreeView = (props) => {
|
|
|
2522
2543
|
})));
|
|
2523
2544
|
};
|
|
2524
2545
|
|
|
2525
|
-
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useHover, useWindowSize };
|
|
2546
|
+
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useDebounce, useHover, useWindowSize };
|
|
2526
2547
|
//# sourceMappingURL=index.es.js.map
|