react-asc 23.6.0 → 23.6.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/Form/validators/MinValidator.d.ts +1 -0
- package/components/Form/validators/index.d.ts +1 -0
- package/index.es.js +170 -144
- package/index.js +170 -143
- package/package.json +1 -1
package/index.es.js
CHANGED
|
@@ -1219,7 +1219,9 @@ const EmailValidator = (value) => {
|
|
|
1219
1219
|
|
|
1220
1220
|
const IsEqualValidator = (valueA, valueB) => valueA === valueB;
|
|
1221
1221
|
|
|
1222
|
-
const MaxValidator = (valueA, valueB) => valueA
|
|
1222
|
+
const MaxValidator = (valueA, valueB) => valueA <= valueB;
|
|
1223
|
+
|
|
1224
|
+
const MinValidator = (valueA, valueB) => valueA >= valueB;
|
|
1223
1225
|
|
|
1224
1226
|
// values, isSubmitting, handleChange, handleBlur, handleSubmit
|
|
1225
1227
|
class Form extends Component {
|
|
@@ -1270,8 +1272,13 @@ class Form extends Component {
|
|
|
1270
1272
|
errors.push({ validator: validatorName, message: 'Email format is wrong' });
|
|
1271
1273
|
}
|
|
1272
1274
|
break;
|
|
1275
|
+
case 'min':
|
|
1276
|
+
if (!MinValidator(fieldValue, parseInt(validatorParam))) {
|
|
1277
|
+
errors.push({ validator: validatorName, message: `Number is less than ${validatorParam}` });
|
|
1278
|
+
}
|
|
1279
|
+
break;
|
|
1273
1280
|
case 'max':
|
|
1274
|
-
if (MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1281
|
+
if (!MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1275
1282
|
errors.push({ validator: validatorName, message: `Number is greater than ${validatorParam}` });
|
|
1276
1283
|
}
|
|
1277
1284
|
break;
|
|
@@ -1986,29 +1993,88 @@ const NumberSelect = (props) => {
|
|
|
1986
1993
|
return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
|
|
1987
1994
|
};
|
|
1988
1995
|
|
|
1989
|
-
var css_248z$k = ".
|
|
1990
|
-
var styles$k = {"
|
|
1996
|
+
var css_248z$k = ".Tooltip-module_tooltipContainer__9ZWx3 {\n display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n background-color: #333;\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 13px;\n position: absolute;\n left: -1000000px;\n z-index: 1100;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe,\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n position: absolute;\n width: 8px;\n height: 8px;\n z-index: -1;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n content: \"\";\n transform: rotate(45deg);\n background: #333;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=top] > #Tooltip-module_arrow__B6lfe {\n bottom: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=bottom] > #Tooltip-module_arrow__B6lfe {\n top: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=left] > #Tooltip-module_arrow__B6lfe {\n right: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=right] > #Tooltip-module_arrow__B6lfe {\n left: -4px;\n}";
|
|
1997
|
+
var styles$k = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
1991
1998
|
styleInject(css_248z$k);
|
|
1992
1999
|
|
|
2000
|
+
const Tooltip = (props) => {
|
|
2001
|
+
const { children, text, placement = 'bottom' } = props;
|
|
2002
|
+
const [show, setShow] = useState(false);
|
|
2003
|
+
const refChild = useRef();
|
|
2004
|
+
const refTooltip = useRef();
|
|
2005
|
+
useEffect(() => {
|
|
2006
|
+
if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
|
|
2007
|
+
// TODO - extract to own component?
|
|
2008
|
+
createPopper(refChild.current, refTooltip.current, {
|
|
2009
|
+
placement: placement,
|
|
2010
|
+
modifiers: [
|
|
2011
|
+
{
|
|
2012
|
+
name: 'offset',
|
|
2013
|
+
options: { offset: [0, 8] }
|
|
2014
|
+
},
|
|
2015
|
+
]
|
|
2016
|
+
});
|
|
2017
|
+
}
|
|
2018
|
+
}, [show]);
|
|
2019
|
+
const handleMouseOver = () => {
|
|
2020
|
+
setShow(true);
|
|
2021
|
+
};
|
|
2022
|
+
const handleMouseLeave = () => {
|
|
2023
|
+
setShow(false);
|
|
2024
|
+
};
|
|
2025
|
+
return (React.createElement(React.Fragment, null,
|
|
2026
|
+
React.createElement("div", { className: styles$k.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
|
|
2027
|
+
onMouseOver: handleMouseOver,
|
|
2028
|
+
onMouseLeave: handleMouseLeave,
|
|
2029
|
+
})),
|
|
2030
|
+
show && text &&
|
|
2031
|
+
React.createElement("div", { className: styles$k.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2032
|
+
text,
|
|
2033
|
+
React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2034
|
+
};
|
|
2035
|
+
|
|
2036
|
+
var css_248z$j = ".ProgressBar-module_progressBarContainer__vtbBw {\n display: flex;\n height: var(--progress-height);\n overflow: hidden;\n background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n color: var(--progress-bar-color);\n text-align: center;\n white-space: nowrap;\n transition: var(--progress-bar-transition);\n background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n width: 100%;\n height: 100%;\n animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n 0% {\n transform: translateX(0) scaleX(0);\n }\n 40% {\n transform: translateX(0) scaleX(0.4);\n }\n 100% {\n transform: translateX(100%) scaleX(0.5);\n }\n}";
|
|
2037
|
+
var styles$j = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
|
|
2038
|
+
styleInject(css_248z$j);
|
|
2039
|
+
|
|
1993
2040
|
const ProgressBar = (props) => {
|
|
1994
2041
|
const { className, color = COLOR.primary, value, indeterminate } = props, rest = __rest(props, ["className", "color", "value", "indeterminate"]);
|
|
2042
|
+
const [model, setModel] = useState();
|
|
2043
|
+
useEffect(() => {
|
|
2044
|
+
document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
|
|
2045
|
+
}, [color]);
|
|
2046
|
+
useEffect(() => {
|
|
2047
|
+
let newValue = value;
|
|
2048
|
+
if (value && value < 0) {
|
|
2049
|
+
newValue = 0;
|
|
2050
|
+
}
|
|
2051
|
+
if (value && value > 100) {
|
|
2052
|
+
newValue = 100;
|
|
2053
|
+
}
|
|
2054
|
+
setModel(newValue);
|
|
2055
|
+
}, [value]);
|
|
1995
2056
|
const getCssClasses = () => {
|
|
1996
2057
|
const cssClasses = [];
|
|
1997
|
-
cssClasses.push(styles$
|
|
2058
|
+
cssClasses.push(styles$j.progressBarContainer);
|
|
1998
2059
|
className && cssClasses.push(className);
|
|
1999
2060
|
return cssClasses.filter(r => r).join(' ');
|
|
2000
2061
|
};
|
|
2001
2062
|
const getCssClassesBar = () => {
|
|
2002
2063
|
const cssClasses = [];
|
|
2003
|
-
cssClasses.push(styles$
|
|
2004
|
-
indeterminate && cssClasses.push(styles$
|
|
2064
|
+
cssClasses.push(styles$j.progressBar);
|
|
2065
|
+
indeterminate && cssClasses.push(styles$j['indeterminate']);
|
|
2005
2066
|
return cssClasses.filter(r => r).join(' ');
|
|
2006
2067
|
};
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2068
|
+
const getStyle = () => {
|
|
2069
|
+
let width = model && model >= 0 ? model : 0;
|
|
2070
|
+
if (indeterminate) {
|
|
2071
|
+
width = 100;
|
|
2072
|
+
}
|
|
2073
|
+
return `${width}%`;
|
|
2074
|
+
};
|
|
2075
|
+
return (React.createElement(Tooltip, { text: model === null || model === void 0 ? void 0 : model.toString() },
|
|
2076
|
+
React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2077
|
+
React.createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
|
|
2012
2078
|
};
|
|
2013
2079
|
|
|
2014
2080
|
class SidebarItemModel {
|
|
@@ -2088,25 +2154,25 @@ const Sidebar = (props) => {
|
|
|
2088
2154
|
!item.isCollapsed && item.items && item.items.length > 0 && (React.createElement(List, { className: "list-level-1", key: `${item.id}-sub` }, item.items.map(subItem => (React.createElement(ListItem, { className: "list-item-level-1", active: isMenuItemActive(subItem.path), key: subItem.id, onClick: (e) => handleClickSubItem(item.path, subItem.path, e) }, subItem.label)))))))))));
|
|
2089
2155
|
};
|
|
2090
2156
|
|
|
2091
|
-
var css_248z$
|
|
2092
|
-
var styles$
|
|
2093
|
-
styleInject(css_248z$
|
|
2157
|
+
var css_248z$i = ".Snackbar-module_snackbar__O5T2b {\n display: flex;\n align-items: center;\n min-width: 288px;\n padding: 6px 16px;\n transform-origin: center;\n min-height: 52px;\n animation: Snackbar-module_bounceIn__E47iD 0.4s ease;\n z-index: 1001;\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n bottom: 2%;\n border-radius: var(--borderRadius);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_primary__ZBOTN {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_accent__0MnFy {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_secondary__s8-ez {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_light__Vrd7o {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_dark__U-5io {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Snackbar-module_text__G5r5D {\n width: 100%;\n padding: 8px 0;\n}\n\n.Snackbar-module_action__vus2Y {\n margin-left: auto;\n}\n.Snackbar-module_action__vus2Y:hover {\n cursor: pointer;\n}\n\n@keyframes Snackbar-module_bounceIn__E47iD {\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 0.9;\n }\n 80% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}";
|
|
2158
|
+
var styles$i = {"snackbar":"Snackbar-module_snackbar__O5T2b","bounceIn":"Snackbar-module_bounceIn__E47iD","primary":"Snackbar-module_primary__ZBOTN","accent":"Snackbar-module_accent__0MnFy","secondary":"Snackbar-module_secondary__s8-ez","light":"Snackbar-module_light__Vrd7o","dark":"Snackbar-module_dark__U-5io","text":"Snackbar-module_text__G5r5D","action":"Snackbar-module_action__vus2Y"};
|
|
2159
|
+
styleInject(css_248z$i);
|
|
2094
2160
|
|
|
2095
2161
|
const Snackbar = (props) => {
|
|
2096
2162
|
const { children, color = COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
|
|
2097
2163
|
const getCssClasses = () => {
|
|
2098
2164
|
const cssClasses = [];
|
|
2099
|
-
cssClasses.push(styles$
|
|
2165
|
+
cssClasses.push(styles$i.snackbar);
|
|
2100
2166
|
cssClasses.push(`shadow-lg`);
|
|
2101
|
-
cssClasses.push(styles$
|
|
2167
|
+
cssClasses.push(styles$i[color]);
|
|
2102
2168
|
return cssClasses.filter(css => css).join(' ');
|
|
2103
2169
|
};
|
|
2104
2170
|
const handleClickAction = (e) => {
|
|
2105
2171
|
onOk && onOk(e);
|
|
2106
2172
|
};
|
|
2107
2173
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2108
|
-
React.createElement("div", { className: styles$
|
|
2109
|
-
React.createElement("div", { className: styles$
|
|
2174
|
+
React.createElement("div", { className: styles$i.text }, children),
|
|
2175
|
+
React.createElement("div", { className: styles$i.action + ' text-accent', onClick: handleClickAction },
|
|
2110
2176
|
React.createElement("span", null, actionText))));
|
|
2111
2177
|
};
|
|
2112
2178
|
|
|
@@ -2144,29 +2210,29 @@ class SnackbarService {
|
|
|
2144
2210
|
}
|
|
2145
2211
|
const snackbarService = new SnackbarService();
|
|
2146
2212
|
|
|
2147
|
-
var css_248z$
|
|
2148
|
-
var styles$
|
|
2149
|
-
styleInject(css_248z$
|
|
2213
|
+
var css_248z$h = ".SpeedDialActions-module_speedDialActions__cY2i3 {\n margin-bottom: -32px;\n flex-direction: column-reverse;\n padding-bottom: 48px;\n display: flex;\n pointer-events: auto;\n}";
|
|
2214
|
+
var styles$h = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
|
|
2215
|
+
styleInject(css_248z$h);
|
|
2150
2216
|
|
|
2151
2217
|
const SpeedDialActions = (props) => {
|
|
2152
2218
|
const { children } = props;
|
|
2153
2219
|
const getCssClasses = () => {
|
|
2154
2220
|
const cssClasses = [];
|
|
2155
|
-
cssClasses.push(styles$
|
|
2221
|
+
cssClasses.push(styles$h.speedDialActions);
|
|
2156
2222
|
return cssClasses.filter(css => css).join(' ');
|
|
2157
2223
|
};
|
|
2158
2224
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
2159
2225
|
};
|
|
2160
2226
|
|
|
2161
|
-
var css_248z$
|
|
2162
|
-
var styles$
|
|
2163
|
-
styleInject(css_248z$
|
|
2227
|
+
var css_248z$g = ".SpeedDial-module_speedDial__W3VN2 {\n position: absolute;\n flex-direction: column-reverse;\n display: flex;\n z-index: 1050;\n align-items: center;\n right: 16px;\n bottom: 16px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
|
|
2228
|
+
var styles$g = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
|
|
2229
|
+
styleInject(css_248z$g);
|
|
2164
2230
|
|
|
2165
2231
|
const SpeedDial = (props) => {
|
|
2166
2232
|
const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
|
|
2167
2233
|
const getCssClasses = () => {
|
|
2168
2234
|
const cssClasses = [];
|
|
2169
|
-
cssClasses.push(styles$
|
|
2235
|
+
cssClasses.push(styles$g.speedDial);
|
|
2170
2236
|
className && cssClasses.push(className);
|
|
2171
2237
|
return cssClasses.filter(css => css).join(' ');
|
|
2172
2238
|
};
|
|
@@ -2183,15 +2249,15 @@ const SpeedDial = (props) => {
|
|
|
2183
2249
|
React.createElement(SpeedDialActions, null, children)));
|
|
2184
2250
|
};
|
|
2185
2251
|
|
|
2186
|
-
var css_248z$
|
|
2187
|
-
var styles$
|
|
2188
|
-
styleInject(css_248z$
|
|
2252
|
+
var css_248z$f = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n margin-bottom: 10px;\n}";
|
|
2253
|
+
var styles$f = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
|
|
2254
|
+
styleInject(css_248z$f);
|
|
2189
2255
|
|
|
2190
2256
|
const SpeedDialAction = (props) => {
|
|
2191
2257
|
const { icon, color = COLOR.light, onClick, className } = props;
|
|
2192
2258
|
const getCssClasses = () => {
|
|
2193
2259
|
const cssClasses = [];
|
|
2194
|
-
cssClasses.push(styles$
|
|
2260
|
+
cssClasses.push(styles$f.speedDialAction);
|
|
2195
2261
|
className && cssClasses.push(className);
|
|
2196
2262
|
return cssClasses.filter(css => css).join(' ');
|
|
2197
2263
|
};
|
|
@@ -2208,15 +2274,15 @@ const SpeedDialIcon = (props) => {
|
|
|
2208
2274
|
return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
2209
2275
|
};
|
|
2210
2276
|
|
|
2211
|
-
var css_248z$
|
|
2212
|
-
var styles$
|
|
2213
|
-
styleInject(css_248z$
|
|
2277
|
+
var css_248z$e = ".StepperActions-module_stepperActions__hBUkh {\n display: flex;\n}";
|
|
2278
|
+
var styles$e = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
|
|
2279
|
+
styleInject(css_248z$e);
|
|
2214
2280
|
|
|
2215
2281
|
const StepperActions = (props) => {
|
|
2216
2282
|
const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
2217
2283
|
const getCssClasses = () => {
|
|
2218
2284
|
const cssClasses = [];
|
|
2219
|
-
cssClasses.push(styles$
|
|
2285
|
+
cssClasses.push(styles$e.stepperActions);
|
|
2220
2286
|
className && cssClasses.push(className);
|
|
2221
2287
|
return cssClasses.filter(css => css).join(' ');
|
|
2222
2288
|
};
|
|
@@ -2233,31 +2299,31 @@ const StepPanel = (props) => {
|
|
|
2233
2299
|
return (React.createElement("div", { className: "steppanel" }, children));
|
|
2234
2300
|
};
|
|
2235
2301
|
|
|
2236
|
-
var css_248z$
|
|
2237
|
-
var styles$
|
|
2238
|
-
styleInject(css_248z$
|
|
2302
|
+
var css_248z$d = ".StepConnector-module_stepConnector__A7A-7 {\n flex: 1 1 auto;\n flex-shrink: 0;\n min-width: 20px;\n}\n\n.StepConnector-module_stepConnectorLine__8rQxv {\n display: block;\n border-color: var(--secondary);\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.StepConnector-module_stepConnectorLine__8rQxv.StepConnector-module_isActive__TUIKV {\n border-color: var(--primary);\n}\n\n.StepConnector-module_stepConnectorLineHorizontal__i09K0 {\n border-top-style: solid;\n border-top-width: 1px;\n}";
|
|
2303
|
+
var styles$d = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
|
|
2304
|
+
styleInject(css_248z$d);
|
|
2239
2305
|
|
|
2240
2306
|
const StepConnector = (props) => {
|
|
2241
2307
|
const { isActive, isHorizontal = true } = props;
|
|
2242
2308
|
const getCssClassesConnector = () => {
|
|
2243
2309
|
const cssClasses = [];
|
|
2244
|
-
cssClasses.push(styles$
|
|
2310
|
+
cssClasses.push(styles$d.stepConnector);
|
|
2245
2311
|
return cssClasses.filter(css => css).join(' ');
|
|
2246
2312
|
};
|
|
2247
2313
|
const getCssClassesLine = () => {
|
|
2248
2314
|
const cssClasses = [];
|
|
2249
|
-
cssClasses.push(styles$
|
|
2250
|
-
isActive && cssClasses.push(styles$
|
|
2251
|
-
isHorizontal && cssClasses.push(styles$
|
|
2315
|
+
cssClasses.push(styles$d.stepConnectorLine);
|
|
2316
|
+
isActive && cssClasses.push(styles$d['isActive']);
|
|
2317
|
+
isHorizontal && cssClasses.push(styles$d.stepConnectorLineHorizontal);
|
|
2252
2318
|
return cssClasses.filter(css => css).join(' ');
|
|
2253
2319
|
};
|
|
2254
2320
|
return (React.createElement("div", { className: getCssClassesConnector() },
|
|
2255
2321
|
React.createElement("div", { className: getCssClassesLine() })));
|
|
2256
2322
|
};
|
|
2257
2323
|
|
|
2258
|
-
var css_248z$
|
|
2259
|
-
var styles$
|
|
2260
|
-
styleInject(css_248z$
|
|
2324
|
+
var css_248z$c = ".Stepper-module_stepper__V6odG {\n display: flex;\n align-items: center;\n flex-direction: row;\n margin-bottom: 10px;\n}\n.Stepper-module_stepper__V6odG.Stepper-module_isHorizontal__Q-3Wu {\n overflow-x: auto;\n}";
|
|
2325
|
+
var styles$c = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
|
|
2326
|
+
styleInject(css_248z$c);
|
|
2261
2327
|
|
|
2262
2328
|
const Stepper = (props) => {
|
|
2263
2329
|
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
|
|
@@ -2345,8 +2411,8 @@ const Stepper = (props) => {
|
|
|
2345
2411
|
};
|
|
2346
2412
|
const getCssClasses = () => {
|
|
2347
2413
|
const cssClasses = [];
|
|
2348
|
-
cssClasses.push(styles$
|
|
2349
|
-
isHorizontal && cssClasses.push(styles$
|
|
2414
|
+
cssClasses.push(styles$c.stepper);
|
|
2415
|
+
isHorizontal && cssClasses.push(styles$c['isHorizontal']);
|
|
2350
2416
|
return cssClasses.filter(css => css).join(' ');
|
|
2351
2417
|
};
|
|
2352
2418
|
return (React.createElement(React.Fragment, null, steps &&
|
|
@@ -2359,17 +2425,17 @@ const Stepper = (props) => {
|
|
|
2359
2425
|
React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
|
|
2360
2426
|
};
|
|
2361
2427
|
|
|
2362
|
-
var css_248z$
|
|
2363
|
-
var styles$
|
|
2364
|
-
styleInject(css_248z$
|
|
2428
|
+
var css_248z$b = ".Typography-module_typography__sw-td {\n font-family: var(--fontFamily);\n}\n.Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\nh1 {\n font-size: calc(1.375rem + 1.5vw);\n}\n\nh2 {\n font-size: calc(1.325rem + 0.9vw);\n}\n\nh3 {\n font-size: calc(1.3rem + 0.6vw);\n}\n\nh4 {\n font-size: calc(1.275rem + 0.3vw);\n}\n\nh5 {\n font-size: 1.25rem;\n}\n\nh6 {\n font-size: 1rem;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-weight: 500 !important;\n margin-top: 0;\n margin-bottom: 0.5rem;\n line-height: 1.2;\n}";
|
|
2429
|
+
var styles$b = {"typography":"Typography-module_typography__sw-td","wrap":"Typography-module_wrap__W7G0R"};
|
|
2430
|
+
styleInject(css_248z$b);
|
|
2365
2431
|
|
|
2366
2432
|
const Wrapper = (props) => {
|
|
2367
2433
|
const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
|
|
2368
2434
|
const getCssClasses = () => {
|
|
2369
2435
|
const cssClasses = [];
|
|
2370
|
-
cssClasses.push(styles$
|
|
2371
|
-
cssClasses.push(styles$
|
|
2372
|
-
wrap && cssClasses.push(styles$
|
|
2436
|
+
cssClasses.push(styles$b.typography);
|
|
2437
|
+
cssClasses.push(styles$b.as);
|
|
2438
|
+
wrap && cssClasses.push(styles$b.wrap);
|
|
2373
2439
|
className && cssClasses.push(className);
|
|
2374
2440
|
return cssClasses.filter(css => css).join(' ');
|
|
2375
2441
|
};
|
|
@@ -2380,9 +2446,9 @@ const Typography = (_a) => {
|
|
|
2380
2446
|
return (React.createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
|
|
2381
2447
|
};
|
|
2382
2448
|
|
|
2383
|
-
var css_248z$
|
|
2384
|
-
var styles$
|
|
2385
|
-
styleInject(css_248z$
|
|
2449
|
+
var css_248z$a = ".Step-module_stepWrapper__IQwq1 {\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__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n border-radius: var(--borderRadius);\n}\n\n.Step-module_step__k42go {\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__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n border-radius: 100%;\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n}\n.Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n width: 18px !important;\n height: 18px !important;\n}\n\n.Step-module_stepIconCircle__hnxIV svg {\n width: 24px;\n height: 24px;\n}\n\n.Step-module_stepValue__B0-xv {\n position: absolute;\n color: var(--secondary-contrast-text);\n}\n.Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n color: var(--primary-contrast-text);\n}";
|
|
2450
|
+
var styles$a = {"stepWrapper":"Step-module_stepWrapper__IQwq1","hasLabel":"Step-module_hasLabel__LZNvd","disabled":"Step-module_disabled__JnxUP","step":"Step-module_step__k42go","stepIconCircle":"Step-module_stepIconCircle__hnxIV","stepValue":"Step-module_stepValue__B0-xv","isActive":"Step-module_isActive__3GGcl"};
|
|
2451
|
+
styleInject(css_248z$a);
|
|
2386
2452
|
|
|
2387
2453
|
const Step = (props) => {
|
|
2388
2454
|
const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
|
|
@@ -2394,29 +2460,29 @@ const Step = (props) => {
|
|
|
2394
2460
|
};
|
|
2395
2461
|
const getCssClasses = () => {
|
|
2396
2462
|
const cssClasses = [];
|
|
2397
|
-
cssClasses.push(styles$
|
|
2398
|
-
label && showLabel && cssClasses.push(styles$
|
|
2399
|
-
isDisabled && cssClasses.push(styles$
|
|
2463
|
+
cssClasses.push(styles$a.stepWrapper);
|
|
2464
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2465
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2400
2466
|
className && cssClasses.push(className);
|
|
2401
2467
|
return cssClasses.filter(css => css).join(' ');
|
|
2402
2468
|
};
|
|
2403
2469
|
const getCssClassesStep = () => {
|
|
2404
2470
|
const cssClasses = [];
|
|
2405
|
-
cssClasses.push(styles$
|
|
2406
|
-
label && showLabel && cssClasses.push(styles$
|
|
2407
|
-
isDisabled && cssClasses.push(styles$
|
|
2471
|
+
cssClasses.push(styles$a.step);
|
|
2472
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2473
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2408
2474
|
return cssClasses.filter(css => css).join(' ');
|
|
2409
2475
|
};
|
|
2410
2476
|
const getCssClassesStepValue = () => {
|
|
2411
2477
|
const cssClasses = [];
|
|
2412
|
-
cssClasses.push(styles$
|
|
2478
|
+
cssClasses.push(styles$a.stepValue);
|
|
2413
2479
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2414
|
-
isActive && cssClasses.push(styles$
|
|
2480
|
+
isActive && cssClasses.push(styles$a.stepValue['isActive']);
|
|
2415
2481
|
return cssClasses.filter(css => css).join(' ');
|
|
2416
2482
|
};
|
|
2417
2483
|
return (React.createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
|
|
2418
2484
|
React.createElement("div", { className: getCssClassesStep() },
|
|
2419
|
-
React.createElement(Icon, { className: styles$
|
|
2485
|
+
React.createElement(Icon, { className: styles$a.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary },
|
|
2420
2486
|
React.createElement(CircleSolidIcon, null)),
|
|
2421
2487
|
React.createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
|
|
2422
2488
|
React.createElement(Icon, null,
|
|
@@ -2427,83 +2493,83 @@ const Step = (props) => {
|
|
|
2427
2493
|
React.createElement(Typography, { className: "flex-shrink-0" }, label)));
|
|
2428
2494
|
};
|
|
2429
2495
|
|
|
2430
|
-
var css_248z$
|
|
2431
|
-
var styles$
|
|
2432
|
-
styleInject(css_248z$
|
|
2496
|
+
var css_248z$9 = "@keyframes SkeletonAvatar-module_skeleton-loading__eM-ZU {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonAvatar-module_skeletonAvatar__03QnJ {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background-color: var(--secondary);\n animation: SkeletonAvatar-module_skeleton-loading__eM-ZU 1s linear infinite alternate;\n}";
|
|
2497
|
+
var styles$9 = {"skeletonAvatar":"SkeletonAvatar-module_skeletonAvatar__03QnJ","skeleton-loading":"SkeletonAvatar-module_skeleton-loading__eM-ZU"};
|
|
2498
|
+
styleInject(css_248z$9);
|
|
2433
2499
|
|
|
2434
2500
|
const SkeletonAvatar = (props) => {
|
|
2435
2501
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2436
2502
|
const getCssClasses = () => {
|
|
2437
2503
|
const cssClasses = [];
|
|
2438
|
-
cssClasses.push(styles$
|
|
2504
|
+
cssClasses.push(styles$9.skeletonAvatar);
|
|
2439
2505
|
className && cssClasses.push(className);
|
|
2440
2506
|
return cssClasses.filter(r => r).join(' ');
|
|
2441
2507
|
};
|
|
2442
2508
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2443
2509
|
};
|
|
2444
2510
|
|
|
2445
|
-
var css_248z$
|
|
2446
|
-
var styles$
|
|
2447
|
-
styleInject(css_248z$
|
|
2511
|
+
var css_248z$8 = "@keyframes SkeletonText-module_skeleton-loading__EYFfJ {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonText-module_skeletonText__E5NCO {\n width: 100%;\n height: 0.7rem;\n margin-bottom: 0.5rem;\n border-radius: 0.25rem;\n animation: SkeletonText-module_skeleton-loading__EYFfJ 1s linear infinite alternate;\n}";
|
|
2512
|
+
var styles$8 = {"skeletonText":"SkeletonText-module_skeletonText__E5NCO","skeleton-loading":"SkeletonText-module_skeleton-loading__EYFfJ"};
|
|
2513
|
+
styleInject(css_248z$8);
|
|
2448
2514
|
|
|
2449
2515
|
const SkeletonText = (props) => {
|
|
2450
2516
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2451
2517
|
const getCssClasses = () => {
|
|
2452
2518
|
const cssClasses = [];
|
|
2453
|
-
cssClasses.push(styles$
|
|
2519
|
+
cssClasses.push(styles$8.skeletonText);
|
|
2454
2520
|
className && cssClasses.push(className);
|
|
2455
2521
|
return cssClasses.filter(r => r).join(' ');
|
|
2456
2522
|
};
|
|
2457
2523
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2458
2524
|
};
|
|
2459
2525
|
|
|
2460
|
-
var css_248z$
|
|
2461
|
-
var styles$
|
|
2462
|
-
styleInject(css_248z$
|
|
2526
|
+
var css_248z$7 = "@keyframes SkeletonFooter-module_skeleton-loading__OEErv {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonFooter-module_skeletonFooter__u2Gxc {\n width: 30%;\n height: 0.7rem;\n border-radius: 0.25rem;\n animation: SkeletonFooter-module_skeleton-loading__OEErv 1s linear infinite alternate;\n}";
|
|
2527
|
+
var styles$7 = {"skeletonFooter":"SkeletonFooter-module_skeletonFooter__u2Gxc","skeleton-loading":"SkeletonFooter-module_skeleton-loading__OEErv"};
|
|
2528
|
+
styleInject(css_248z$7);
|
|
2463
2529
|
|
|
2464
2530
|
const SkeletonFooter = (props) => {
|
|
2465
2531
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2466
2532
|
const getCssClasses = () => {
|
|
2467
2533
|
const cssClasses = [];
|
|
2468
|
-
cssClasses.push(styles$
|
|
2534
|
+
cssClasses.push(styles$7.skeletonFooter);
|
|
2469
2535
|
className && cssClasses.push(className);
|
|
2470
2536
|
return cssClasses.filter(r => r).join(' ');
|
|
2471
2537
|
};
|
|
2472
2538
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2473
2539
|
};
|
|
2474
2540
|
|
|
2475
|
-
var css_248z$
|
|
2476
|
-
var styles$
|
|
2477
|
-
styleInject(css_248z$
|
|
2541
|
+
var css_248z$6 = "@keyframes SkeletonImage-module_skeleton-loading__04lJ7 {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonImage-module_skeletonImage__2EwDG {\n height: 10rem;\n margin: 0.5rem 0;\n border-radius: 0.75rem;\n animation: SkeletonImage-module_skeleton-loading__04lJ7 1s linear infinite alternate;\n}\n\n.SkeletonImage-module_div__tqqrB {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: auto;\n border-radius: 0.75rem;\n border-color: none;\n}";
|
|
2542
|
+
var styles$6 = {"skeletonImage":"SkeletonImage-module_skeletonImage__2EwDG","skeleton-loading":"SkeletonImage-module_skeleton-loading__04lJ7","div":"SkeletonImage-module_div__tqqrB"};
|
|
2543
|
+
styleInject(css_248z$6);
|
|
2478
2544
|
|
|
2479
2545
|
const SkeletonImage = (props) => {
|
|
2480
2546
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2481
2547
|
const getCssClasses = () => {
|
|
2482
2548
|
const cssClasses = [];
|
|
2483
|
-
cssClasses.push(styles$
|
|
2549
|
+
cssClasses.push(styles$6.skeletonImage);
|
|
2484
2550
|
className && cssClasses.push(className);
|
|
2485
2551
|
return cssClasses.filter(r => r).join(' ');
|
|
2486
2552
|
};
|
|
2487
2553
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2488
|
-
React.createElement("div", { className: styles$
|
|
2554
|
+
React.createElement("div", { className: styles$6.img })));
|
|
2489
2555
|
};
|
|
2490
2556
|
|
|
2491
|
-
var css_248z$
|
|
2492
|
-
var styles$
|
|
2493
|
-
styleInject(css_248z$
|
|
2557
|
+
var css_248z$5 = ".Table-module_table__DHKNv {\n --bs-table-bg: transparent;\n --bs-table-accent-bg: transparent;\n --bs-table-striped-color: #212529;\n --bs-table-striped-bg: rgba(0, 0, 0, 0.05);\n --bs-table-active-color: #212529;\n --bs-table-active-bg: rgba(0, 0, 0, 0.1);\n --bs-table-hover-color: #212529;\n --bs-table-hover-bg: rgba(0, 0, 0, 0.075);\n width: 100%;\n margin-bottom: 1rem;\n color: #212529;\n vertical-align: top;\n border-color: #dee2e6;\n}\n.Table-module_table__DHKNv thead {\n vertical-align: bottom;\n}\n.Table-module_table__DHKNv > :not(caption) > * > * {\n padding: 0.5rem 0.5rem;\n background-color: var(--bs-table-bg);\n border-bottom-width: 1px;\n box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);\n}\n.Table-module_table__DHKNv > :not(:first-child) {\n border-top: 2px solid currentColor;\n}\n\n.Table-module_bordered__1Kp1p > :not(caption) > * > * {\n border-width: 0 1px;\n}\n.Table-module_bordered__1Kp1p > :not(caption) > * {\n border-width: 1px 0;\n}\n\n.Table-module_striped__jmxgE > tbody > tr:nth-of-type(odd) > * {\n --bs-table-accent-bg: var(--bs-table-striped-bg);\n color: var(--bs-table-striped-color);\n}\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n --bs-table-accent-bg: var(--bs-table-hover-bg);\n color: var(--bs-table-hover-color);\n}\n\n.Table-module_tableResponsive__ykttB {\n overflow-x: auto;\n}";
|
|
2558
|
+
var styles$5 = {"table":"Table-module_table__DHKNv","bordered":"Table-module_bordered__1Kp1p","striped":"Table-module_striped__jmxgE","hover":"Table-module_hover__P6r3y","tableResponsive":"Table-module_tableResponsive__ykttB"};
|
|
2559
|
+
styleInject(css_248z$5);
|
|
2494
2560
|
|
|
2495
2561
|
const Table = (props) => {
|
|
2496
2562
|
const { children, className, bordered, striped, hover, responsive = false } = props;
|
|
2497
2563
|
const getCssClasses = () => {
|
|
2498
2564
|
const cssClasses = [];
|
|
2499
|
-
cssClasses.push(styles$
|
|
2500
|
-
bordered && cssClasses.push(styles$
|
|
2501
|
-
striped && cssClasses.push(styles$
|
|
2502
|
-
hover && cssClasses.push(styles$
|
|
2565
|
+
cssClasses.push(styles$5.table);
|
|
2566
|
+
bordered && cssClasses.push(styles$5['bordered']);
|
|
2567
|
+
striped && cssClasses.push(styles$5['striped']);
|
|
2568
|
+
hover && cssClasses.push(styles$5['hover']);
|
|
2503
2569
|
className && cssClasses.push(className);
|
|
2504
2570
|
return cssClasses.filter(css => css).join(' ');
|
|
2505
2571
|
};
|
|
2506
|
-
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className: styles$
|
|
2572
|
+
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className: styles$5.tableResponsive }, children) },
|
|
2507
2573
|
React.createElement("table", { className: getCssClasses() }, children)));
|
|
2508
2574
|
};
|
|
2509
2575
|
|
|
@@ -2536,16 +2602,16 @@ const TableCell = (props) => {
|
|
|
2536
2602
|
React.createElement("td", Object.assign({}, rest), children)) }, children));
|
|
2537
2603
|
};
|
|
2538
2604
|
|
|
2539
|
-
var css_248z$
|
|
2540
|
-
var styles$
|
|
2541
|
-
styleInject(css_248z$
|
|
2605
|
+
var css_248z$4 = ".TabIndicator-module_tabIndicator__jSJhH {\n bottom: 0;\n height: 2px;\n position: absolute;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_primary__Q5jEo {\n background-color: var(--primary);\n}\n.TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_accent__qbgIG {\n background-color: var(--accent);\n}";
|
|
2606
|
+
var styles$4 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primary":"TabIndicator-module_primary__Q5jEo","accent":"TabIndicator-module_accent__qbgIG"};
|
|
2607
|
+
styleInject(css_248z$4);
|
|
2542
2608
|
|
|
2543
2609
|
const TabIndicator = (props) => {
|
|
2544
2610
|
const { color = COLOR.primary, width, amount, index } = props;
|
|
2545
2611
|
const getCssClasses = () => {
|
|
2546
2612
|
const cssClasses = [];
|
|
2547
|
-
cssClasses.push(styles$
|
|
2548
|
-
cssClasses.push(styles$
|
|
2613
|
+
cssClasses.push(styles$4.tabIndicator);
|
|
2614
|
+
cssClasses.push(styles$4[color]);
|
|
2549
2615
|
return cssClasses.filter(css => css).join(' ');
|
|
2550
2616
|
};
|
|
2551
2617
|
return (React.createElement("span", { className: getCssClasses(), style: {
|
|
@@ -2554,9 +2620,9 @@ const TabIndicator = (props) => {
|
|
|
2554
2620
|
} }));
|
|
2555
2621
|
};
|
|
2556
2622
|
|
|
2557
|
-
var css_248z$
|
|
2558
|
-
var styles$
|
|
2559
|
-
styleInject(css_248z$
|
|
2623
|
+
var css_248z$3 = ".Tabs-module_tabs__YyRTZ {\n display: flex;\n position: relative;\n}";
|
|
2624
|
+
var styles$3 = {"tabs":"Tabs-module_tabs__YyRTZ"};
|
|
2625
|
+
styleInject(css_248z$3);
|
|
2560
2626
|
|
|
2561
2627
|
const Tabs = (props) => {
|
|
2562
2628
|
const { children, className, fixed, color, indicatorColor, onChange, value } = props;
|
|
@@ -2571,7 +2637,7 @@ const Tabs = (props) => {
|
|
|
2571
2637
|
}, [children, value]);
|
|
2572
2638
|
const getCssClasses = () => {
|
|
2573
2639
|
const cssClasses = [];
|
|
2574
|
-
cssClasses.push(styles$
|
|
2640
|
+
cssClasses.push(styles$3.tabs);
|
|
2575
2641
|
className && cssClasses.push(className);
|
|
2576
2642
|
return cssClasses.filter(css => css).join(' ');
|
|
2577
2643
|
};
|
|
@@ -2595,15 +2661,15 @@ const Tabs = (props) => {
|
|
|
2595
2661
|
React.createElement(TabIndicator, { color: indicatorColor, width: (100 / React.Children.toArray(children).length) + '%', index: selectedIndex, amount: React.Children.toArray(children).length }))));
|
|
2596
2662
|
};
|
|
2597
2663
|
|
|
2598
|
-
var css_248z$
|
|
2599
|
-
var styles$
|
|
2600
|
-
styleInject(css_248z$
|
|
2664
|
+
var css_248z$2 = ".Tab-module_tab__Q8w1f {\n padding: 6px 12px;\n overflow: hidden;\n position: relative;\n font-size: 0.875rem;\n min-width: 72px;\n box-sizing: border-box;\n min-height: 48px;\n text-align: center;\n font-weight: 500;\n line-height: 1.75;\n white-space: normal;\n letter-spacing: 0.02857em;\n text-transform: uppercase;\n border-radius: 0;\n flex-grow: 1;\n flex-basis: 0;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
|
|
2665
|
+
var styles$2 = {"tab":"Tab-module_tab__Q8w1f"};
|
|
2666
|
+
styleInject(css_248z$2);
|
|
2601
2667
|
|
|
2602
2668
|
const Tab = (props) => {
|
|
2603
2669
|
const { label, className, isActive, disabled, value, onClick } = props;
|
|
2604
2670
|
const getCssClasses = () => {
|
|
2605
2671
|
const cssClasses = [];
|
|
2606
|
-
cssClasses.push(styles$
|
|
2672
|
+
cssClasses.push(styles$2.tab);
|
|
2607
2673
|
if (isActive) {
|
|
2608
2674
|
cssClasses.push(`show active`);
|
|
2609
2675
|
}
|
|
@@ -2618,46 +2684,6 @@ const TabPanel = (props) => {
|
|
|
2618
2684
|
return (React.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
|
|
2619
2685
|
};
|
|
2620
2686
|
|
|
2621
|
-
var css_248z$2 = ".Tooltip-module_tooltipContainer__9ZWx3 {\n display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n background-color: #333;\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 13px;\n position: absolute;\n left: -1000000px;\n z-index: 1100;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe,\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n position: absolute;\n width: 8px;\n height: 8px;\n z-index: -1;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n content: \"\";\n transform: rotate(45deg);\n background: #333;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=top] > #Tooltip-module_arrow__B6lfe {\n bottom: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=bottom] > #Tooltip-module_arrow__B6lfe {\n top: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=left] > #Tooltip-module_arrow__B6lfe {\n right: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=right] > #Tooltip-module_arrow__B6lfe {\n left: -4px;\n}";
|
|
2622
|
-
var styles$2 = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
2623
|
-
styleInject(css_248z$2);
|
|
2624
|
-
|
|
2625
|
-
const Tooltip = (props) => {
|
|
2626
|
-
const { children, text, placement = 'bottom' } = props;
|
|
2627
|
-
const [show, setShow] = useState(false);
|
|
2628
|
-
const refChild = useRef();
|
|
2629
|
-
const refTooltip = useRef();
|
|
2630
|
-
useEffect(() => {
|
|
2631
|
-
if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
|
|
2632
|
-
// TODO - extract to own component?
|
|
2633
|
-
createPopper(refChild.current, refTooltip.current, {
|
|
2634
|
-
placement: placement,
|
|
2635
|
-
modifiers: [
|
|
2636
|
-
{
|
|
2637
|
-
name: 'offset',
|
|
2638
|
-
options: { offset: [0, 8] }
|
|
2639
|
-
},
|
|
2640
|
-
]
|
|
2641
|
-
});
|
|
2642
|
-
}
|
|
2643
|
-
}, [show]);
|
|
2644
|
-
const handleMouseOver = () => {
|
|
2645
|
-
setShow(true);
|
|
2646
|
-
};
|
|
2647
|
-
const handleMouseLeave = () => {
|
|
2648
|
-
setShow(false);
|
|
2649
|
-
};
|
|
2650
|
-
return (React.createElement(React.Fragment, null,
|
|
2651
|
-
React.createElement("div", { className: styles$2.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
|
|
2652
|
-
onMouseOver: handleMouseOver,
|
|
2653
|
-
onMouseLeave: handleMouseLeave,
|
|
2654
|
-
})),
|
|
2655
|
-
show && text &&
|
|
2656
|
-
React.createElement("div", { className: styles$2.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2657
|
-
text,
|
|
2658
|
-
React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2659
|
-
};
|
|
2660
|
-
|
|
2661
2687
|
const HourSelect = (props) => {
|
|
2662
2688
|
const { className, value = 0, id, name, disabled, onChange } = props;
|
|
2663
2689
|
const [newValue, setNewValue] = useState(value);
|
|
@@ -2852,4 +2878,4 @@ const TreeItem = (props) => {
|
|
|
2852
2878
|
children && _isExpanded ? React.createElement("ul", null, children) : null));
|
|
2853
2879
|
};
|
|
2854
2880
|
|
|
2855
|
-
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, 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, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };
|
|
2881
|
+
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, 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, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };
|