@symply.io/basic-components 1.3.11-alpha.9 → 1.4.0-alpha.10
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/AlertDialog/index.d.ts +2 -2
- package/AlertDialog/index.js +30 -9
- package/AlertDialog/types.d.ts +3 -3
- package/Autocomplete/index.d.ts +2 -2
- package/Autocomplete/index.js +32 -11
- package/Autocomplete/types.d.ts +2 -2
- package/Autocomplete/useInteractions.js +3 -3
- package/AutocompleteWithFilter/index.d.ts +2 -2
- package/AutocompleteWithFilter/index.js +35 -13
- package/AutocompleteWithFilter/types.d.ts +5 -5
- package/BasicModal/Content.js +16 -5
- package/BasicModal/index.d.ts +2 -2
- package/BasicModal/index.js +31 -10
- package/BasicModal/types.d.ts +2 -2
- package/BreadCrumbs/index.d.ts +2 -2
- package/BreadCrumbs/index.js +19 -9
- package/BreadCrumbs/types.d.ts +1 -1
- package/CheckBox/index.d.ts +4 -3
- package/CheckBox/index.js +36 -3
- package/CheckBox/types.d.ts +2 -6
- package/CheckBoxGroup/index.d.ts +4 -0
- package/CheckBoxGroup/index.js +30 -0
- package/CheckBoxGroup/types.d.ts +5 -0
- package/CheckBoxGroup/types.js +1 -0
- package/ConfirmPasswordInput/index.d.ts +4 -0
- package/ConfirmPasswordInput/index.js +42 -0
- package/ConfirmPasswordInput/types.d.ts +9 -0
- package/ConfirmPasswordInput/types.js +1 -0
- package/Copyright/index.d.ts +2 -2
- package/Copyright/index.js +14 -4
- package/Copyright/types.d.ts +1 -1
- package/DataTable/TableBody.js +24 -2
- package/DataTable/TableBodyRow.js +52 -41
- package/DataTable/TableFooter.js +41 -30
- package/DataTable/TableHeader.js +47 -36
- package/DataTable/index.d.ts +2 -1
- package/DataTable/index.js +30 -18
- package/DataTable/useTable.js +54 -46
- package/DateInput/FullDateInput/index.js +42 -20
- package/DateInput/FullDateInput/useInteractions.js +10 -10
- package/DateInput/MonthDayInput/index.js +36 -14
- package/DateInput/MonthDayInput/useInteractions.js +9 -9
- package/DateInput/MonthYearInput/index.js +36 -14
- package/DateInput/MonthYearInput/useInteractions.js +9 -9
- package/DateInput/index.d.ts +4 -3
- package/DateInput/index.js +4 -3
- package/DigitInput/index.d.ts +2 -2
- package/DigitInput/index.js +28 -7
- package/DigitInput/types.d.ts +3 -3
- package/DigitInput/useInteractions.js +9 -9
- package/DynamicHeaderBar/HeaderBar.d.ts +1 -13
- package/DynamicHeaderBar/HeaderBar.js +17 -6
- package/DynamicHeaderBar/HeaderButtons.d.ts +1 -1
- package/DynamicHeaderBar/HeaderButtons.js +24 -13
- package/DynamicHeaderBar/HeaderLine.d.ts +1 -6
- package/DynamicHeaderBar/HeaderLine.js +2 -2
- package/DynamicHeaderBar/index.d.ts +1 -17
- package/DynamicHeaderBar/index.js +26 -18
- package/DynamicHeaderBar/types.d.ts +33 -5
- package/FeinInput/index.d.ts +2 -2
- package/FeinInput/index.js +38 -17
- package/FeinInput/types.d.ts +2 -2
- package/FeinInput/useInteractions.js +9 -9
- package/FileUploader/index.d.ts +2 -2
- package/FileUploader/index.js +33 -12
- package/FileUploader/useInteractions.js +44 -29
- package/FormRadioGroup/index.d.ts +2 -2
- package/FormRadioGroup/index.js +29 -5
- package/FormRadioGroup/types.d.ts +3 -4
- package/FormSelector/MultipleSelector.js +32 -9
- package/FormSelector/SimpleSelector.js +32 -9
- package/FormSelector/useInteractions.js +7 -7
- package/HelpCaption/index.d.ts +2 -2
- package/HelpCaption/index.js +17 -6
- package/HelpCaption/useInteractions.js +2 -2
- package/LoadingModal/Modal.js +15 -4
- package/LoadingModal/index.d.ts +2 -1
- package/LoadingModal/index.js +3 -1
- package/LoadingModal/useLoadingModal.d.ts +1 -1
- package/LoadingModal/useLoadingModal.js +34 -16
- package/MenuButtonGroup/MenuItem.js +14 -3
- package/MenuButtonGroup/index.js +82 -14
- package/NumberInput/index.js +27 -5
- package/NumberInput/useInteractions.js +17 -17
- package/PasswordInput/index.d.ts +6 -4
- package/PasswordInput/index.js +79 -4
- package/PasswordInput/{Password.d.ts → types.d.ts} +3 -6
- package/PasswordInput/types.js +1 -0
- package/PhoneNumberInput/index.js +39 -17
- package/PhoneNumberInput/useInteractions.js +10 -10
- package/README.md +4 -8
- package/Sidebar/SidebarItem.js +17 -6
- package/Sidebar/SidebarItemsGroup.js +21 -10
- package/Sidebar/SidebarLink.js +27 -5
- package/Sidebar/index.js +17 -6
- package/SocialInput/index.d.ts +2 -2
- package/SocialInput/index.js +40 -19
- package/SocialInput/useInteractions.js +14 -14
- package/TabGroup/index.d.ts +2 -2
- package/TabGroup/index.js +25 -15
- package/TablePagination/Actions.js +15 -4
- package/TablePagination/index.d.ts +2 -2
- package/TablePagination/index.js +14 -4
- package/TablePagination/useInteractions.js +9 -9
- package/TextInput/index.d.ts +1 -1
- package/TextInput/index.js +31 -9
- package/TextInput/useInteractions.js +4 -4
- package/ToastPrompt/Prompt.d.ts +4 -2
- package/ToastPrompt/Prompt.js +23 -55
- package/ToastPrompt/index.js +22 -8
- package/ToastPrompt/types.d.ts +10 -17
- package/ToastPrompt/useInteractions.d.ts +8 -8
- package/ToastPrompt/useInteractions.js +23 -16
- package/VideoPlayerModal/index.d.ts +2 -2
- package/VideoPlayerModal/index.js +27 -6
- package/index.d.ts +6 -0
- package/index.js +6 -0
- package/package.json +1 -2
- package/useCustomTheme.js +16 -11
- package/utils/uuid.js +11 -10
- package/CheckBox/CheckBox.d.ts +0 -3
- package/CheckBox/CheckBox.js +0 -14
- package/CheckBox/CheckBoxGroup.d.ts +0 -3
- package/CheckBox/CheckBoxGroup.js +0 -8
- package/PasswordInput/ConfirmPassword.d.ts +0 -11
- package/PasswordInput/ConfirmPassword.js +0 -20
- package/PasswordInput/Password.js +0 -56
@@ -1,3 +1,14 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
1
12
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
2
13
|
import { cloneElement, useMemo } from "react";
|
3
14
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
@@ -10,12 +21,12 @@ import HeaderLine from "./HeaderLine";
|
|
10
21
|
import HeaderButtons from "./HeaderButtons";
|
11
22
|
import useCustomTheme from "../useCustomTheme";
|
12
23
|
function HeaderBar(props) {
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Grid, { sx: { mb: 1 }, children: [_jsxs(Grid, { container: true, direction: "row", justifyContent: "flex-start", alignItems: "center", children: [_jsx(Grid, { item: true, xs: 12, sm: hasButtons ? 6 : 12, md: hasButtons ? 5 : 12, lg: hasButtons ? 4 : 12, xl: hasButtons ? 3 : 12, children: _jsxs(Grid, { container: true, direction: "row", justifyContent: "flex-start", alignItems: "center", children: [showBackButton && (_jsx(IconButton, { onClick: ()
|
24
|
+
var title = props.title, color = props.color, subtitle = props.subtitle, bottomEl = props.bottomEl, _a = props.buttons, buttons = _a === void 0 ? [] : _a, showBackButton = props.showBackButton, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onBack = props.onBack;
|
25
|
+
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
26
|
+
var isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
|
27
|
+
var hasButtons = useMemo(function () { return buttons.length > 0; }, [buttons.length]);
|
28
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ sx: { mb: 1 } }, { children: [_jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [_jsx(Grid, __assign({ item: true, xs: 12, sm: hasButtons ? 6 : 12, md: hasButtons ? 5 : 12, lg: hasButtons ? 4 : 12, xl: hasButtons ? 3 : 12 }, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [showBackButton && (_jsx(IconButton, __assign({ onClick: function () {
|
18
29
|
onBack ? onBack() : window.history.back();
|
19
|
-
}, children: _jsx(ArrowBackIcon, { fontSize: "small" }) })), typeof title === "string" ? (_jsx(Typography, { align: "left", sx: { fontWeight: 600, fontSize: isLessThanSm ? 21 : 24 }, children: title })) : (cloneElement(title))] }) }), hasButtons ? (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9, children: _jsx(HeaderButtons, { buttons: buttons, primaryColor: primaryColor, secondaryColor: secondaryColor }) })) : (_jsx(_Fragment, {}))] }), _jsx(Grid, { container: true, direction: "row", children: _jsx(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: _jsx(HeaderLine, { color: color, primaryColor: primaryColor, secondaryColor: secondaryColor }) }) }), subtitle && (_jsx(Grid, { container: true, direction: "row", children: _jsx(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle })) : (cloneElement(subtitle)) }) })), bottomEl && (_jsx(Grid, { container: true, direction: "row", children: _jsx(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: cloneElement(bottomEl) }) }))] }) }));
|
30
|
+
} }, { children: _jsx(ArrowBackIcon, { fontSize: "small" }) }))), typeof title === "string" ? (_jsx(Typography, __assign({ align: "left", sx: { fontWeight: 600, fontSize: isLessThanSm ? 21 : 24 } }, { children: title }))) : (cloneElement(title))] })) })), hasButtons ? (_jsx(Grid, __assign({ item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9 }, { children: _jsx(HeaderButtons, { buttons: buttons, primaryColor: primaryColor, secondaryColor: secondaryColor }) }))) : (_jsx(_Fragment, {}))] })), _jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: _jsx(HeaderLine, { color: color, primaryColor: primaryColor, secondaryColor: secondaryColor }) })) })), subtitle && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle })) : (cloneElement(subtitle)) })) }))), bottomEl && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: cloneElement(bottomEl) })) })))] })) })));
|
20
31
|
}
|
21
32
|
export default HeaderBar;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { CSSProperties } from "react";
|
2
2
|
import { HeaderButtonProps } from "./types";
|
3
|
-
|
3
|
+
interface HeaderButtonsProps {
|
4
4
|
buttons: Array<HeaderButtonProps>;
|
5
5
|
primaryColor?: CSSProperties["color"];
|
6
6
|
secondaryColor?: CSSProperties["color"];
|
@@ -1,3 +1,14 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
1
12
|
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
2
13
|
import Fab from "@mui/material/Fab";
|
3
14
|
import Grid from "@mui/material/Grid";
|
@@ -9,30 +20,30 @@ import MenuButtonGroup from "../MenuButtonGroup";
|
|
9
20
|
import { HeaderButtonCategory } from "./types";
|
10
21
|
import useCustomTheme from "../useCustomTheme";
|
11
22
|
function HeaderButtons(props) {
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Grid, { container: true, spacing: 1, direction: "row", justifyContent: "flex-end", alignItems: "center", children: buttons.map((button)
|
23
|
+
var buttons = props.buttons, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
|
24
|
+
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
25
|
+
var isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
|
26
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Grid, __assign({ container: true, spacing: 1, direction: "row", justifyContent: "flex-end", alignItems: "center" }, { children: buttons.map(function (button) {
|
16
27
|
switch (button.type) {
|
17
28
|
case HeaderButtonCategory.TextButton: {
|
18
|
-
|
19
|
-
return (_jsx(Grid, { item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" }, children: _jsx(Button, { fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled, children: text }) }, text));
|
29
|
+
var _a = button.variant, variant = _a === void 0 ? "contained" : _a, text = button.text, onClick = button.onClick, color = button.color, size = button.size, startIcon = button.startIcon, endIcon = button.endIcon, disabled = button.disabled;
|
30
|
+
return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(Button, __assign({ fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled }, { children: text })) }), text));
|
20
31
|
}
|
21
32
|
case HeaderButtonCategory.FabButton: {
|
22
|
-
|
23
|
-
return (_jsx(Grid, { item: true, style: { textAlign: "end" }, children: _jsx(Fab, { onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled, variant: variant, children: icon }) }, title));
|
33
|
+
var title = button.title, onClick = button.onClick, color = button.color, _b = button.size, size = _b === void 0 ? "medium" : _b, icon = button.icon, disabled = button.disabled, variant = button.variant;
|
34
|
+
return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled, variant: variant }, { children: icon })) }), title));
|
24
35
|
}
|
25
36
|
case HeaderButtonCategory.IconButton: {
|
26
|
-
|
27
|
-
return (_jsx(Grid, { item: true, style: { textAlign: "end" }, children: _jsx(IconButton, { onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled, children: icon }) }, title));
|
37
|
+
var title = button.title, onClick = button.onClick, color = button.color, _c = button.size, size = _c === void 0 ? "medium" : _c, icon = button.icon, disabled = button.disabled;
|
38
|
+
return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(IconButton, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled }, { children: icon })) }), title));
|
28
39
|
}
|
29
40
|
case HeaderButtonCategory.MenuButton: {
|
30
|
-
|
31
|
-
return (_jsx(Grid, { item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" }, children: _jsx(MenuButtonGroup, { size: isLessThanSm ? "small" : size, variant: variant, buttons: btns, color: color, buttonText: buttonText, disabled: disabled, primaryColor: primaryColor, secondaryColor: secondaryColor }) }, buttonText));
|
41
|
+
var btns = button.buttons, buttonText = button.buttonText, disabled = button.disabled, variant = button.variant, size = button.size, color = button.color;
|
42
|
+
return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(MenuButtonGroup, { size: isLessThanSm ? "small" : size, variant: variant, buttons: btns, color: color, buttonText: buttonText, disabled: disabled, primaryColor: primaryColor, secondaryColor: secondaryColor }) }), buttonText));
|
32
43
|
}
|
33
44
|
default:
|
34
45
|
return _jsx(_Fragment, {});
|
35
46
|
}
|
36
|
-
}) }) }));
|
47
|
+
}) })) })));
|
37
48
|
}
|
38
49
|
export default HeaderButtons;
|
@@ -1,8 +1,3 @@
|
|
1
|
-
import {
|
2
|
-
interface HeaderLineProps {
|
3
|
-
color?: CSSProperties["color"];
|
4
|
-
primaryColor?: CSSProperties["color"];
|
5
|
-
secondaryColor?: CSSProperties["color"];
|
6
|
-
}
|
1
|
+
import type { HeaderLineProps } from "./types";
|
7
2
|
declare function HeaderLine(props: HeaderLineProps): JSX.Element;
|
8
3
|
export default HeaderLine;
|
@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import Divider from "@mui/material/Divider";
|
3
3
|
import useCustomTheme from "../useCustomTheme";
|
4
4
|
function HeaderLine(props) {
|
5
|
-
|
6
|
-
|
5
|
+
var color = props.color, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
|
6
|
+
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
7
7
|
return (_jsx(Divider, { sx: {
|
8
8
|
height: "3px",
|
9
9
|
backgroundColor: color || theme.palette.primary.main
|
@@ -1,23 +1,7 @@
|
|
1
|
-
import {
|
2
|
-
import { SxProps } from "@mui/material/styles";
|
3
|
-
import { HeaderBarProps } from "./HeaderBar";
|
4
|
-
interface HeaderProviderProps {
|
5
|
-
sx?: SxProps;
|
6
|
-
children: ReactElement;
|
7
|
-
primaryColor?: CSSProperties["color"];
|
8
|
-
secondaryColor?: CSSProperties["color"];
|
9
|
-
}
|
10
|
-
interface HeaderContextProps {
|
11
|
-
onInit: (props: HeaderBarProps) => void;
|
12
|
-
onShow: () => void;
|
13
|
-
onHide: () => void;
|
14
|
-
}
|
1
|
+
import type { HeaderContextProps, HeaderProviderProps } from "./types";
|
15
2
|
export declare function HeaderProvider(props: HeaderProviderProps): JSX.Element;
|
16
3
|
export declare function useHeaderBar(): HeaderContextProps;
|
17
4
|
export { default } from "./HeaderBar";
|
18
5
|
export { default as HeaderButtons } from "./HeaderButtons";
|
19
6
|
export { default as HeaderLine } from "./HeaderLine";
|
20
|
-
export * from "./HeaderBar";
|
21
|
-
export * from "./HeaderButtons";
|
22
|
-
export * from "./HeaderLine";
|
23
7
|
export * from "./types";
|
@@ -1,38 +1,49 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
1
12
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
2
13
|
import { cloneElement, createContext, useContext, useState, useCallback } from "react";
|
3
14
|
import Grid from "@mui/material/Grid";
|
4
15
|
import HeaderBar from "./HeaderBar";
|
5
|
-
|
6
|
-
onInit: ()
|
7
|
-
onShow: ()
|
8
|
-
onHide: ()
|
16
|
+
var HeaderContext = createContext({
|
17
|
+
onInit: function () { },
|
18
|
+
onShow: function () { },
|
19
|
+
onHide: function () { }
|
9
20
|
});
|
10
21
|
export function HeaderProvider(props) {
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
22
|
+
var children = props.children, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _a = props.sx, sx = _a === void 0 ? {} : _a;
|
23
|
+
var _b = useState(false), visible = _b[0], setVisible = _b[1];
|
24
|
+
var _c = useState({ title: "" }), headerProps = _c[0], setHeaderProps = _c[1];
|
25
|
+
var _d = useState(0), height = _d[0], setHeight = _d[1];
|
26
|
+
var onInit = useCallback(function (args) {
|
16
27
|
setHeaderProps(args);
|
17
28
|
}, []);
|
18
|
-
|
29
|
+
var onShow = useCallback(function () {
|
19
30
|
setVisible(true);
|
20
31
|
}, []);
|
21
|
-
|
32
|
+
var onHide = useCallback(function () {
|
22
33
|
setVisible(false);
|
23
34
|
}, []);
|
24
|
-
|
35
|
+
var measureRef = useCallback(function (node) {
|
25
36
|
if (node && headerProps) {
|
26
37
|
setHeight(node.getBoundingClientRect().height);
|
27
38
|
}
|
28
39
|
}, [headerProps]);
|
29
|
-
return (_jsx(HeaderContext.Provider, { value: { onInit, onHide, onShow }, children: _jsxs(_Fragment, { children: [visible ? (_jsx(Grid, { container: true, direction: "row", sx: {
|
40
|
+
return (_jsx(HeaderContext.Provider, __assign({ value: { onInit: onInit, onHide: onHide, onShow: onShow } }, { children: _jsxs(_Fragment, { children: [visible ? (_jsx(Grid, __assign({ container: true, direction: "row", sx: __assign({}, sx), ref: measureRef }, { children: _jsx(Grid, __assign({ item: true, xs: 12 }, { children: _jsx(HeaderBar, __assign({}, headerProps, { primaryColor: primaryColor, secondaryColor: secondaryColor })) })) }))) : (_jsx(_Fragment, {})), cloneElement(children, {
|
30
41
|
sx: {
|
31
42
|
p: 3,
|
32
43
|
py: 1,
|
33
|
-
pt: visible && height ?
|
44
|
+
pt: visible && height ? "calc(".concat(height, "px)") : undefined
|
34
45
|
}
|
35
|
-
})] }) }));
|
46
|
+
})] }) })));
|
36
47
|
}
|
37
48
|
export function useHeaderBar() {
|
38
49
|
return useContext(HeaderContext);
|
@@ -40,7 +51,4 @@ export function useHeaderBar() {
|
|
40
51
|
export { default } from "./HeaderBar";
|
41
52
|
export { default as HeaderButtons } from "./HeaderButtons";
|
42
53
|
export { default as HeaderLine } from "./HeaderLine";
|
43
|
-
export * from "./HeaderBar";
|
44
|
-
export * from "./HeaderButtons";
|
45
|
-
export * from "./HeaderLine";
|
46
54
|
export * from "./types";
|
@@ -1,8 +1,9 @@
|
|
1
|
-
import { ReactElement } from "react";
|
2
|
-
import { ButtonProps } from "@mui/material/Button";
|
3
|
-
import { IconButtonProps } from "@mui/material/IconButton";
|
4
|
-
import { FabProps } from "@mui/material/Fab";
|
5
|
-
import {
|
1
|
+
import type { ReactElement, CSSProperties } from "react";
|
2
|
+
import type { ButtonProps } from "@mui/material/Button";
|
3
|
+
import type { IconButtonProps } from "@mui/material/IconButton";
|
4
|
+
import type { FabProps } from "@mui/material/Fab";
|
5
|
+
import type { SxProps } from "@mui/material/styles";
|
6
|
+
import type { MenuButtonGroupProps } from "../MenuButtonGroup";
|
6
7
|
export declare enum HeaderButtonCategory {
|
7
8
|
IconButton = "icon",
|
8
9
|
TextButton = "text",
|
@@ -43,4 +44,31 @@ declare type HeaderMenuButtonProps = {
|
|
43
44
|
type: HeaderButtonCategory.MenuButton;
|
44
45
|
} & MenuButtonGroupProps;
|
45
46
|
export declare type HeaderButtonProps = HeaderFabButtonProps | HeaderTextButtonProps | HeaderIconButtonProps | HeaderMenuButtonProps;
|
47
|
+
export interface HeaderLineProps {
|
48
|
+
color?: CSSProperties["color"];
|
49
|
+
primaryColor?: CSSProperties["color"];
|
50
|
+
secondaryColor?: CSSProperties["color"];
|
51
|
+
}
|
52
|
+
export interface HeaderBarProps {
|
53
|
+
title: string | ReactElement;
|
54
|
+
color?: CSSProperties["color"];
|
55
|
+
subtitle?: string | ReactElement;
|
56
|
+
bottomEl?: ReactElement;
|
57
|
+
buttons?: Array<HeaderButtonProps>;
|
58
|
+
showBackButton?: boolean;
|
59
|
+
primaryColor?: CSSProperties["color"];
|
60
|
+
secondaryColor?: CSSProperties["color"];
|
61
|
+
onBack?: () => void;
|
62
|
+
}
|
63
|
+
export interface HeaderProviderProps {
|
64
|
+
sx?: SxProps;
|
65
|
+
children: ReactElement;
|
66
|
+
primaryColor?: CSSProperties["color"];
|
67
|
+
secondaryColor?: CSSProperties["color"];
|
68
|
+
}
|
69
|
+
export interface HeaderContextProps {
|
70
|
+
onInit: (props: HeaderBarProps) => void;
|
71
|
+
onShow: () => void;
|
72
|
+
onHide: () => void;
|
73
|
+
}
|
46
74
|
export {};
|
package/FeinInput/index.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
import { FeinInputProps } from "./types";
|
1
|
+
import type { FeinInputProps } from "./types";
|
2
2
|
export declare function FeinInputFormat(str: string): string;
|
3
3
|
export declare function onValidateFein(feinString: string): boolean;
|
4
4
|
declare function FeinInput(props: FeinInputProps): JSX.Element;
|
5
5
|
export default FeinInput;
|
6
|
-
export
|
6
|
+
export type { FeinInputProps };
|
package/FeinInput/index.js
CHANGED
@@ -1,3 +1,25 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
+
var t = {};
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
+
t[p] = s[p];
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
+
t[p[i]] = s[p[i]];
|
20
|
+
}
|
21
|
+
return t;
|
22
|
+
};
|
1
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
24
|
import { useRifm } from "rifm";
|
3
25
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
@@ -5,49 +27,48 @@ import TextField from "@mui/material/TextField";
|
|
5
27
|
import useInteractions from "./useInteractions";
|
6
28
|
import useCustomTheme from "../useCustomTheme";
|
7
29
|
export function FeinInputFormat(str) {
|
8
|
-
|
9
|
-
|
10
|
-
return chars.reduce((prev, curr, index)
|
30
|
+
var digits = (str.match(/\d+/g) || []).join("");
|
31
|
+
var chars = digits.split("");
|
32
|
+
return chars.reduce(function (prev, curr, index) {
|
11
33
|
if (index === 2) {
|
12
|
-
return
|
34
|
+
return "".concat(prev, " - ").concat(curr);
|
13
35
|
}
|
14
36
|
else {
|
15
|
-
return
|
37
|
+
return "".concat(prev).concat(curr);
|
16
38
|
}
|
17
|
-
},
|
39
|
+
}, "");
|
18
40
|
}
|
19
41
|
export function onValidateFein(feinString) {
|
20
|
-
|
42
|
+
var reg = /^\d{2}\s?-\s?\d{7}$/g;
|
21
43
|
return reg.test(feinString);
|
22
44
|
}
|
23
45
|
function FeinInput(props) {
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
46
|
+
var value = props.value, _a = props.error, error = _a === void 0 ? false : _a, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid FEIN" : _b, onBlur = props.onBlur, onFocus = props.onFocus, onChange = props.onChange, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "error", "helperText", "onBlur", "onFocus", "onChange", "onValidate", "primaryColor", "secondaryColor"]);
|
47
|
+
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
48
|
+
var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
|
49
|
+
var rifm = useRifm({
|
28
50
|
mask: true,
|
29
51
|
value: String(value),
|
30
|
-
onChange,
|
52
|
+
onChange: onChange,
|
31
53
|
replace: addMask,
|
32
54
|
format: FeinInputFormat
|
33
55
|
});
|
34
|
-
return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { value: rifm.value, onChange: rifm.onChange, error: error ||
|
56
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, onChange: rifm.onChange, error: error ||
|
35
57
|
(valLength > 0 &&
|
36
58
|
(onValidate ? !onValidate(value) : !onValidateFein(value))), helperText: valLength > 0 &&
|
37
59
|
(onValidate ? !onValidate(value) : !onValidateFein(value))
|
38
60
|
? helperText
|
39
|
-
: "", onFocus: event
|
61
|
+
: "", onFocus: function (event) {
|
40
62
|
if (onFocus) {
|
41
63
|
onFocus(event);
|
42
64
|
}
|
43
|
-
}, onBlur: event
|
65
|
+
}, onBlur: function (event) {
|
44
66
|
onChange(value.trim());
|
45
67
|
if (onBlur) {
|
46
68
|
onBlur(event);
|
47
69
|
}
|
48
70
|
}, InputLabelProps: {
|
49
71
|
shrink: true
|
50
|
-
},
|
72
|
+
} }, rest)) })));
|
51
73
|
}
|
52
74
|
export default FeinInput;
|
53
|
-
export * from "./types";
|
package/FeinInput/types.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
|
-
import { CSSProperties } from "react";
|
2
|
-
import { TextFieldProps } from "@mui/material/TextField";
|
1
|
+
import type { CSSProperties } from "react";
|
2
|
+
import type { TextFieldProps } from "@mui/material/TextField";
|
3
3
|
export interface FeinInputProps extends Omit<TextFieldProps, "onChange"> {
|
4
4
|
onChange: (value: string) => void;
|
5
5
|
onValidate?: (value?: string) => boolean;
|
@@ -1,16 +1,16 @@
|
|
1
1
|
import { useCallback, useMemo } from "react";
|
2
2
|
function useInteractions(props) {
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
return
|
3
|
+
var value = props.value;
|
4
|
+
var addMask = useCallback(function (str) {
|
5
|
+
var digits = (str.match(/\d+/g) || []).join("");
|
6
|
+
var areaCode = digits.slice(0, 2).padEnd(2, "_");
|
7
|
+
var prefixCode = digits.slice(2, 9).padEnd(7, "_");
|
8
|
+
return "".concat(areaCode, " - ").concat(prefixCode);
|
9
9
|
}, []);
|
10
|
-
|
11
|
-
|
10
|
+
var valLength = useMemo(function () {
|
11
|
+
var digitsArr = String(value).match(/\d/g);
|
12
12
|
return digitsArr ? digitsArr.length : 0;
|
13
13
|
}, [value]);
|
14
|
-
return { valLength, addMask };
|
14
|
+
return { valLength: valLength, addMask: addMask };
|
15
15
|
}
|
16
16
|
export default useInteractions;
|
package/FileUploader/index.d.ts
CHANGED
package/FileUploader/index.js
CHANGED
@@ -1,3 +1,25 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
+
var t = {};
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
+
t[p] = s[p];
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
+
t[p[i]] = s[p[i]];
|
20
|
+
}
|
21
|
+
return t;
|
22
|
+
};
|
1
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
24
|
import Link from "@mui/material/Link";
|
3
25
|
import Grid from "@mui/material/Grid";
|
@@ -10,32 +32,31 @@ import AlertDialog from "../AlertDialog";
|
|
10
32
|
import useInteractions from "./useInteractions";
|
11
33
|
import useCustomTheme from "../useCustomTheme";
|
12
34
|
function FileUploader(props) {
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
return (_jsxs(ThemeProvider, { theme: theme, children: [lessThanSm ? (_jsxs("div", {
|
35
|
+
var _a = props.height, height = _a === void 0 ? "150px" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "430px" : _b, _c = props.loading, loading = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, dropFileText = props.dropFileText, chooseFileText = props.chooseFileText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["height", "maxWidth", "loading", "disabled", "dropFileText", "chooseFileText", "primaryColor", "secondaryColor"]);
|
36
|
+
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
37
|
+
var lessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
|
38
|
+
var _e = useInteractions(__assign(__assign({}, rest), { disabled: disabled })), alertArgs = _e.alertArgs, rootProps = _e.rootProps, onCloseAlert = _e.onCloseAlert, onSelectFile = _e.onSelectFile, getRootProps = _e.getRootProps, getInputProps = _e.getInputProps;
|
39
|
+
return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [lessThanSm ? (_jsxs("div", __assign({}, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Link, __assign({ color: disabled ? theme.palette.grey[400] : theme.palette.primary.main, sx: {
|
18
40
|
fontFamily: "Roboto, Helvetica, Arial, sans-serif",
|
19
41
|
cursor: disabled ? "not-allowed" : "pointer"
|
20
|
-
}, children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") })] })) : (_jsx(Grid, { container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
|
42
|
+
} }, { children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") }))] }))) : (_jsx(Grid, __assign({ container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
|
21
43
|
border: "1px dashed #0099a7",
|
22
44
|
borderRadius: "5px",
|
23
45
|
outline: "none",
|
24
46
|
backgroundColor: "#F2F2F2",
|
25
|
-
maxWidth,
|
26
|
-
height,
|
47
|
+
maxWidth: maxWidth,
|
48
|
+
height: height,
|
27
49
|
width: "100%"
|
28
|
-
},
|
50
|
+
} }, rootProps, { children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Typography, __assign({ component: "p", variant: "caption", sx: {
|
29
51
|
fontSize: ".875rem",
|
30
52
|
textAlign: "center"
|
31
|
-
}, children: dropFileText || "Drop files here" }), _jsx(Button, { variant: "contained", onClick: onSelectFile, sx: {
|
53
|
+
} }, { children: dropFileText || "Drop files here" })), _jsx(Button, __assign({ variant: "contained", onClick: onSelectFile, sx: {
|
32
54
|
backgroundColor: "white !important",
|
33
55
|
color: disabled
|
34
56
|
? theme.palette.grey[400]
|
35
57
|
: theme.palette.primary.main,
|
36
58
|
fontFamily: "Roboto, Helvetica, Arial, sans-serif",
|
37
59
|
cursor: disabled ? "not-allowed" : "pointer"
|
38
|
-
}, disabled: disabled, children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) })] })) })), _jsx(AlertDialog, { open: alertArgs.open, primaryColor: primaryColor, secondaryColor: secondaryColor, onClose: onCloseAlert, children: alertArgs.message })] }));
|
60
|
+
}, disabled: disabled }, { children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) }))] })) }))), _jsx(AlertDialog, __assign({ open: alertArgs.open, primaryColor: primaryColor, secondaryColor: secondaryColor, onClose: onCloseAlert }, { children: alertArgs.message }))] })));
|
39
61
|
}
|
40
62
|
export default FileUploader;
|
41
|
-
export * from "./types";
|
@@ -1,22 +1,37 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
1
12
|
import { useState, useCallback, useMemo } from "react";
|
2
13
|
import { useDropzone } from "react-dropzone";
|
3
14
|
function useInteractions(props) {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
15
|
+
var _a = props.multiple, multiple = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, maxFiles = props.maxFiles, _c = props.maxSize, maxSize = _c === void 0 ? 1024 * 1024 * 5 : _c, accept = props.accept, onUpload = props.onUpload, sizeExceededErrorText = props.sizeExceededErrorText, wrongFileTypeErrorText = props.wrongFileTypeErrorText;
|
16
|
+
var ERROR_TYPE_MSG = useMemo(function () {
|
17
|
+
return wrongFileTypeErrorText ||
|
18
|
+
"The type of the file you uploaded is not accepted, please reupload!";
|
19
|
+
}, [wrongFileTypeErrorText]);
|
20
|
+
var ERROR_SIZE_MSG = useMemo(function () {
|
21
|
+
return sizeExceededErrorText ||
|
22
|
+
"Your file exceed the max size of ".concat(maxSize / 1024 / 1024, "MB.");
|
23
|
+
}, [sizeExceededErrorText, maxSize]);
|
24
|
+
var _d = useState({ open: false, message: "" }), alertArgs = _d[0], setAlertArgs = _d[1];
|
25
|
+
var onOpenAlert = useCallback(function (message) {
|
26
|
+
setAlertArgs(function (args) { return (__assign(__assign({}, args), { open: true, message: message })); });
|
12
27
|
}, []);
|
13
|
-
|
28
|
+
var onCloseAlert = useCallback(function () {
|
14
29
|
setAlertArgs({ open: false, message: "" });
|
15
30
|
}, []);
|
16
|
-
|
31
|
+
var onDrop = useCallback(function (acceptedFiles, rejectedFiles) {
|
17
32
|
if (rejectedFiles && rejectedFiles.length > 0) {
|
18
|
-
rejectedFiles.some((rejectedFile)
|
19
|
-
|
33
|
+
rejectedFiles.some(function (rejectedFile) {
|
34
|
+
var file = rejectedFile.file, errors = rejectedFile.errors;
|
20
35
|
if (accept && !Object.keys(accept).includes(file.type)) {
|
21
36
|
onOpenAlert(ERROR_TYPE_MSG);
|
22
37
|
return true;
|
@@ -36,29 +51,29 @@ function useInteractions(props) {
|
|
36
51
|
onUpload(acceptedFiles);
|
37
52
|
}
|
38
53
|
}, [accept, onUpload]);
|
39
|
-
|
40
|
-
onDrop,
|
41
|
-
accept,
|
42
|
-
multiple,
|
43
|
-
disabled,
|
44
|
-
maxSize,
|
45
|
-
maxFiles
|
46
|
-
});
|
47
|
-
|
48
|
-
onClick: e
|
49
|
-
onKeyDown: e
|
54
|
+
var _e = useDropzone({
|
55
|
+
onDrop: onDrop,
|
56
|
+
accept: accept,
|
57
|
+
multiple: multiple,
|
58
|
+
disabled: disabled,
|
59
|
+
maxSize: maxSize,
|
60
|
+
maxFiles: maxFiles
|
61
|
+
}), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps, onSelectFile = _e.open;
|
62
|
+
var rootProps = getRootProps({
|
63
|
+
onClick: function (e) { return e.stopPropagation(); },
|
64
|
+
onKeyDown: function (e) {
|
50
65
|
if (e.key === "Space" || e.key === "Enter") {
|
51
66
|
e.stopPropagation();
|
52
67
|
}
|
53
68
|
}
|
54
69
|
});
|
55
70
|
return {
|
56
|
-
alertArgs,
|
57
|
-
rootProps,
|
58
|
-
onCloseAlert,
|
59
|
-
onSelectFile,
|
60
|
-
getRootProps,
|
61
|
-
getInputProps
|
71
|
+
alertArgs: alertArgs,
|
72
|
+
rootProps: rootProps,
|
73
|
+
onCloseAlert: onCloseAlert,
|
74
|
+
onSelectFile: onSelectFile,
|
75
|
+
getRootProps: getRootProps,
|
76
|
+
getInputProps: getInputProps
|
62
77
|
};
|
63
78
|
}
|
64
79
|
export default useInteractions;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { FormRadioGroupProps } from "./types";
|
1
|
+
import type { RadioOption, FormRadioGroupProps } from "./types";
|
2
2
|
declare function FormRadioGroup(props: FormRadioGroupProps): JSX.Element;
|
3
3
|
export default FormRadioGroup;
|
4
|
-
export
|
4
|
+
export type { RadioOption, FormRadioGroupProps };
|