@symply.io/basic-components 1.0.0-beta.1 → 1.0.0-beta.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.
Files changed (47) hide show
  1. package/Autocomplete/index.d.ts +2 -2
  2. package/Autocomplete/types.d.ts +8 -9
  3. package/AutocompleteWithFilter/index.d.ts +2 -2
  4. package/AutocompleteWithFilter/index.js +3 -5
  5. package/AutocompleteWithFilter/types.d.ts +8 -9
  6. package/BasicModal/Content.js +5 -5
  7. package/BasicTable/TableBody.d.ts +4 -0
  8. package/BasicTable/TableBody.js +50 -0
  9. package/BasicTable/TableBodyRow.d.ts +3 -0
  10. package/BasicTable/TableBodyRow.js +42 -0
  11. package/BasicTable/TableFooter.d.ts +3 -0
  12. package/BasicTable/TableFooter.js +44 -0
  13. package/BasicTable/TableHeader.d.ts +3 -0
  14. package/BasicTable/TableHeader.js +47 -0
  15. package/BasicTable/index.d.ts +5 -0
  16. package/BasicTable/index.js +80 -0
  17. package/BasicTable/types.d.ts +72 -0
  18. package/BasicTable/types.js +1 -0
  19. package/BasicTable/useScroll.d.ts +9 -0
  20. package/BasicTable/useScroll.js +76 -0
  21. package/BasicTable/useTable.d.ts +44 -0
  22. package/BasicTable/useTable.js +94 -0
  23. package/DateInput/FullDateInput/index.d.ts +1 -1
  24. package/DateInput/FullDateInput/index.js +19 -6
  25. package/DateInput/FullDateInput/types.d.ts +3 -8
  26. package/DateInput/MonthDayInput/index.d.ts +1 -1
  27. package/DateInput/MonthDayInput/index.js +18 -7
  28. package/DateInput/MonthDayInput/types.d.ts +3 -8
  29. package/DateInput/MonthYearInput/index.d.ts +1 -1
  30. package/DateInput/MonthYearInput/index.js +18 -7
  31. package/DateInput/MonthYearInput/types.d.ts +3 -8
  32. package/DynamicHeaderBar/HeaderButtons.js +2 -2
  33. package/DynamicHeaderBar/types.d.ts +3 -0
  34. package/FeinInput/index.d.ts +1 -1
  35. package/FeinInput/index.js +5 -3
  36. package/FeinInput/types.d.ts +1 -1
  37. package/PasswordInput/Password.d.ts +2 -1
  38. package/PasswordInput/Password.js +7 -6
  39. package/PhoneNumberInput/index.d.ts +2 -0
  40. package/PhoneNumberInput/index.js +14 -3
  41. package/README.md +74 -15
  42. package/SocialInput/index.d.ts +1 -1
  43. package/SocialInput/index.js +5 -4
  44. package/SocialInput/types.d.ts +1 -1
  45. package/index.d.ts +2 -0
  46. package/index.js +2 -0
  47. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
- import { CustomAutocompleteProps } from "./types";
2
- declare function CustomAutocomplete(props: CustomAutocompleteProps): JSX.Element;
1
+ import { AutocompleteProps } from "./types";
2
+ declare function CustomAutocomplete<T, multiple extends boolean | undefined>(props: AutocompleteProps<T, multiple>): JSX.Element;
3
3
  export default CustomAutocomplete;
4
4
  export * from "./types";
@@ -1,15 +1,14 @@
1
1
  import { CSSProperties } from "react";
2
2
  import { TextFieldProps } from "@mui/material/TextField";
3
- export interface IAutocompleteOption {
3
+ export declare type AutocompleteOptionType<T> = T & {
4
4
  label: string;
5
- [name: string]: unknown;
6
- }
7
- export declare type AutocompleteOptionType = IAutocompleteOption | string;
8
- export interface CustomAutocompleteProps extends Omit<TextFieldProps, "onChange"> {
9
- multiple?: boolean;
10
- options: Array<AutocompleteOptionType>;
11
- value: Array<AutocompleteOptionType> | AutocompleteOptionType | null;
5
+ };
6
+ export declare type AutocompleteValueType<T, multiple> = multiple extends false | undefined ? AutocompleteOptionType<T> | null : Array<AutocompleteOptionType<T>> | null;
7
+ export interface AutocompleteProps<T, multiple> extends Omit<TextFieldProps, "onChange"> {
8
+ multiple?: multiple;
9
+ options: Array<AutocompleteOptionType<T>>;
10
+ value: AutocompleteValueType<T, multiple>;
12
11
  primaryColor?: CSSProperties["color"];
13
12
  secondaryColor?: CSSProperties["color"];
14
- onChange: (value: Array<AutocompleteOptionType> | AutocompleteOptionType | null) => void;
13
+ onChange: (value: AutocompleteValueType<T, multiple>) => void;
15
14
  }
@@ -1,4 +1,4 @@
1
- import { AutoCompleteWithFilterProps } from "./types";
2
- declare function AutocompleteWithFilter(props: AutoCompleteWithFilterProps): JSX.Element;
1
+ import { AutocompleteWithFilterProps } from "./types";
2
+ declare function AutocompleteWithFilter<T, multiple extends boolean | undefined>(props: AutocompleteWithFilterProps<T, multiple>): JSX.Element;
3
3
  export default AutocompleteWithFilter;
4
4
  export * from "./types";
@@ -36,18 +36,16 @@ function AutocompleteWithFilter(props) {
36
36
  ignoreCase: true,
37
37
  ignoreAccents: true,
38
38
  trim: true,
39
- stringify: function (option) {
40
- return typeof option === "string" ? option : option.label;
41
- }
39
+ stringify: function (option) { return option.label; }
42
40
  });
43
41
  var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
44
42
  return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, limitTags: 1, options: options, multiple: multiple, filterOptions: filter, onChange: function (_, value) {
45
43
  onChange(value);
46
44
  }, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
47
- return typeof option === "string" ? option || "" : option.label || "";
45
+ return option.label || "";
48
46
  }, renderOption: function (props, option, _a) {
49
47
  var selected = _a.selected;
50
- return (_jsxs("li", __assign({}, props, { children: [_jsx(Checkbox, { icon: icon, color: "primary", checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), typeof option === "string" ? option || "" : option.label || ""] })));
48
+ return (_jsxs("li", __assign({}, props, { children: [_jsx(Checkbox, { icon: icon, color: "primary", checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), option.label || ""] })));
51
49
  }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { variant: "outlined" }))); } }) })));
52
50
  }
53
51
  export default AutocompleteWithFilter;
@@ -1,16 +1,15 @@
1
1
  import { CSSProperties } from "react";
2
2
  import { TextFieldProps } from "@mui/material/TextField";
3
- export interface IAutoCompleteWithFilterOption {
3
+ export declare type AutocompleteWithFilterOptionType<T> = T & {
4
4
  label: string;
5
- [name: string]: unknown;
6
- }
7
- export declare type AutoCompleteWithFilterOptionType = IAutoCompleteWithFilterOption | string;
8
- export interface AutoCompleteWithFilterProps extends Omit<TextFieldProps, "onChange"> {
9
- multiple?: boolean;
10
- value: Array<AutoCompleteWithFilterOptionType> | AutoCompleteWithFilterOptionType | null;
11
- options: Array<AutoCompleteWithFilterOptionType>;
5
+ };
6
+ export declare type AutocompleteWithFilterValueType<T, multiple> = multiple extends false | undefined ? AutocompleteWithFilterOptionType<T> | null : Array<AutocompleteWithFilterOptionType<T>> | null;
7
+ export interface AutocompleteWithFilterProps<T, multiple> extends Omit<TextFieldProps, "onChange"> {
8
+ value: AutocompleteWithFilterValueType<T, multiple>;
9
+ options: Array<AutocompleteWithFilterOptionType<T>>;
12
10
  disableCloseOnSelect?: boolean;
11
+ multiple?: multiple;
13
12
  primaryColor?: CSSProperties["color"];
14
13
  secondaryColor?: CSSProperties["color"];
15
- onChange: (value: Array<AutoCompleteWithFilterOptionType> | AutoCompleteWithFilterOptionType | null) => void;
14
+ onChange: (value: AutocompleteWithFilterValueType<T, multiple>) => void;
16
15
  }
@@ -24,14 +24,14 @@ function Content(props) {
24
24
  var children = props.children, title = props.title, desc = props.desc, _a = props.color, color = _a === void 0 ? "primary" : _a, loading = props.loading, disabled = props.disabled, buttons = props.buttons, _b = props.submitText, submitText = _b === void 0 ? "Save" : _b, _c = props.cancelText, cancelText = _c === void 0 ? "Cancel" : _c, _d = props.showTopRightCloseButton, showTopRightCloseButton = _d === void 0 ? false : _d, _e = props.hideBottomButtons, hideBottomButtons = _e === void 0 ? false : _e, _f = props.noForm, noForm = _f === void 0 ? false : _f, onClose = props.onClose, onSubmit = props.onSubmit;
25
25
  var theme = useTheme();
26
26
  return (_jsxs(_Fragment, { children: [_jsxs(DialogTitle, __assign({ id: "form-dialog-title", sx: {
27
- "& > h6": {
28
- fontWeight: "700",
29
- },
30
- } }, { children: [title, showTopRightCloseButton ? (_jsx(IconButton, __assign({ "aria-label": "close", onClick: onClose, sx: {
27
+ "& > span": {
28
+ fontWeight: "700!important"
29
+ }
30
+ } }, { children: [_jsx("span", { children: title }), showTopRightCloseButton ? (_jsx(IconButton, __assign({ "aria-label": "close", onClick: onClose, sx: {
31
31
  position: "absolute",
32
32
  right: 8,
33
33
  top: 8,
34
- color: theme.palette.grey[500],
34
+ color: theme.palette.grey[500]
35
35
  } }, { children: _jsx(CloseIcon, {}) }))) : null] })), _jsxs(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: [desc && _jsx(DialogContentText, { children: desc }), Boolean(children) && cloneElement(children)] })), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: color, disabled: loading, fullWidth: true }, { children: cancelText })) })), _jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : undefined, variant: "contained", color: color, disabled: loading || disabled, fullWidth: true }, { children: submitText })) }))] })) })) })))] }));
36
36
  }
37
37
  export default Content;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { BasicTableBodyProps } from "./types";
3
+ declare const BasicTableBody: import("react").ForwardRefExoticComponent<BasicTableBodyProps & import("react").RefAttributes<HTMLDivElement>>;
4
+ export default BasicTableBody;
@@ -0,0 +1,50 @@
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
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { forwardRef } from "react";
14
+ import Grid from "@mui/material/Grid";
15
+ import useCustomTheme from "../useCustomTheme";
16
+ import TableBodyRow from "./TableBodyRow";
17
+ var BasicTableBody = forwardRef(function (props, ref) {
18
+ var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText;
19
+ var theme = useCustomTheme();
20
+ return (_jsx(Grid, __assign({ item: true, sx: {
21
+ maxHeight: "41vh",
22
+ overflowY: "auto",
23
+ display: "block",
24
+ minWidth: "100%",
25
+ scrollbarWidth: forFrozen ? "none" : "initial",
26
+ "&::-webkit-scrollbar": {
27
+ width: forFrozen ? 0 : "initial"
28
+ }
29
+ } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows && rows.length > 0 ? (rows.map(function (row, index) {
30
+ return (_jsx(TableBodyRow, { row: row, rows: rows, columns: columns }, "BasicTable_".concat(index)));
31
+ })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
32
+ height: theme.spacing(7.5),
33
+ borderBottomWidth: "thin",
34
+ borderBottomColor: "#e5e5e5",
35
+ borderBottomStyle: "solid",
36
+ padding: theme.spacing(0.5, 0),
37
+ minHeight: theme.spacing(6),
38
+ "& :nth-of-last-type(1)": {
39
+ borderBottom: "none"
40
+ },
41
+ "& input": {
42
+ fontSize: "0.9rem",
43
+ fontWeight: 600
44
+ }
45
+ } }, { children: _jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: "center", sx: {
46
+ paddingLeft: theme.spacing(0.625),
47
+ paddingRight: theme.spacing(0.625)
48
+ } }, { children: noDataText })) }))) })) })));
49
+ });
50
+ export default BasicTableBody;
@@ -0,0 +1,3 @@
1
+ import { BasicTableBodyRowProps } from "./types";
2
+ declare function BasicTableBodyRow(props: BasicTableBodyRowProps): JSX.Element;
3
+ export default BasicTableBodyRow;
@@ -0,0 +1,42 @@
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
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { cloneElement } from "react";
14
+ import Grid from "@mui/material/Grid";
15
+ import useCustomTheme from "../useCustomTheme";
16
+ function BasicTableBodyRow(props) {
17
+ var row = props.row, rows = props.rows, columns = props.columns;
18
+ var theme = useCustomTheme();
19
+ return (_jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
20
+ height: theme.spacing(7.5),
21
+ borderBottomWidth: "thin",
22
+ borderBottomColor: "#e5e5e5",
23
+ borderBottomStyle: "solid",
24
+ padding: theme.spacing(0.5, 0),
25
+ minHeight: theme.spacing(6),
26
+ "& :nth-of-last-type(1)": {
27
+ borderBottom: "none"
28
+ },
29
+ "& input": {
30
+ fontSize: "0.9rem",
31
+ fontWeight: 600
32
+ }
33
+ } }, { children: columns.map(function (col) {
34
+ var accessor = col.accessor, Cell = col.Cell, _a = col.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, _b = col.align, align = _b === void 0 ? "center" : _b;
35
+ return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
36
+ minWidth: minWidth,
37
+ paddingLeft: theme.spacing(0.625),
38
+ paddingRight: theme.spacing(0.625)
39
+ } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
40
+ }) })));
41
+ }
42
+ export default BasicTableBodyRow;
@@ -0,0 +1,3 @@
1
+ import { BasicTableFooterProps } from "./types";
2
+ declare function BasicTableFooter(props: BasicTableFooterProps): JSX.Element;
3
+ export default BasicTableFooter;
@@ -0,0 +1,44 @@
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
+ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
13
+ import { cloneElement } from "react";
14
+ import Grid from "@mui/material/Grid";
15
+ import useCustomTheme from "../useCustomTheme";
16
+ function BasicTableFooter(props) {
17
+ var footers = props.footers;
18
+ var theme = useCustomTheme();
19
+ return footers && footers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
20
+ backgroundColor: "#eaf0f6",
21
+ padding: theme.spacing(1.5, 0),
22
+ height: theme.spacing(6.25)
23
+ } }, { children: _jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
24
+ lineHeight: "24px",
25
+ minWidth: "100%",
26
+ "& span": {
27
+ color: "#172b4d",
28
+ fontSize: "1rem",
29
+ fontWeight: 600
30
+ }
31
+ } }, { children: footers.map(function (footer) {
32
+ var accessor = footer.accessor, Cell = footer.Cell, _a = footer.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, _b = footer.align, align = _b === void 0 ? "center" : _b;
33
+ return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
34
+ minWidth: minWidth,
35
+ paddingLeft: theme.spacing(0.625),
36
+ paddingRight: theme.spacing(0.625),
37
+ whiteSpace: "nowrap",
38
+ textOverflow: "ellipsis",
39
+ overflow: "hidden",
40
+ userSelect: "none"
41
+ } }, { children: cloneElement(Cell) }), accessor));
42
+ }) })) }))) : (_jsx(_Fragment, {}));
43
+ }
44
+ export default BasicTableFooter;
@@ -0,0 +1,3 @@
1
+ import { BasicTableHeaderProps } from "./types";
2
+ declare function BasicTableHeader(props: BasicTableHeaderProps): JSX.Element;
3
+ export default BasicTableHeader;
@@ -0,0 +1,47 @@
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
+ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
13
+ import { cloneElement } from "react";
14
+ import Grid from "@mui/material/Grid";
15
+ import useCustomTheme from "../useCustomTheme";
16
+ function BasicTableHeader(props) {
17
+ var headers = props.headers;
18
+ var theme = useCustomTheme();
19
+ return headers && headers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
20
+ backgroundColor: "#eaf0f6",
21
+ padding: theme.spacing(1.5, 0),
22
+ height: theme.spacing(6.25)
23
+ } }, { children: _jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
24
+ lineHeight: "24px",
25
+ minWidth: "100%",
26
+ "& span": {
27
+ color: "#172b4d",
28
+ fontSize: "1rem",
29
+ fontWeight: 600
30
+ }
31
+ } }, { children: headers.map(function (header) {
32
+ var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, _b = header.minWidth, minWidth = _b === void 0 ? "120px!important" : _b, title = header.title, onSort = header.onSort, _c = header.canSort, canSort = _c === void 0 ? false : _c;
33
+ return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, title: title, textAlign: align, sx: {
34
+ minWidth: minWidth,
35
+ paddingLeft: theme.spacing(0.625),
36
+ paddingRight: theme.spacing(0.625),
37
+ whiteSpace: "nowrap",
38
+ textOverflow: "ellipsis",
39
+ overflow: "hidden",
40
+ userSelect: "none",
41
+ cursor: canSort ? "pointer" : "default"
42
+ }, onClick: function () {
43
+ onSort({ field: accessor });
44
+ } }, { children: cloneElement(Cell) }), accessor));
45
+ }) })) }))) : (_jsx(_Fragment, {}));
46
+ }
47
+ export default BasicTableHeader;
@@ -0,0 +1,5 @@
1
+ import { BasicTableProps } from "./types";
2
+ declare function BasicTable(props: BasicTableProps): JSX.Element;
3
+ export default BasicTable;
4
+ export * from "./types";
5
+ export { default as useTable } from "./useTable";
@@ -0,0 +1,80 @@
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
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import { useMemo, useEffect } from "react";
14
+ import Grid from "@mui/material/Grid";
15
+ import TableContainer from "@mui/material/TableContainer";
16
+ import useMediaQuery from "@mui/material/useMediaQuery";
17
+ import ThemeProvider from "@mui/material/styles/ThemeProvider";
18
+ import useCustomTheme from "../useCustomTheme";
19
+ import useScroll from "./useScroll";
20
+ import TableBody from "./TableBody";
21
+ import TableHeader from "./TableHeader";
22
+ import TableFooter from "./TableFooter";
23
+ function BasicTable(props) {
24
+ var _a;
25
+ var _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rows, rows = _c === void 0 ? [] : _c, _d = props.headers, headers = _d === void 0 ? [] : _d, _e = props.footers, footers = _e === void 0 ? [] : _e, _f = props.noDataText, noDataText = _f === void 0 ? "No Data!" : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
26
+ var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
27
+ var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
28
+ var fronzenColsCount = useMemo(function () { var _a; return (_a = columns.filter(function (col) { return col.canBeFrozen; })) === null || _a === void 0 ? void 0 : _a.length; }, [columns]);
29
+ var canFreeze = useMemo(function () { return isUpMd && (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && fronzenColsCount > 0; }, [fronzenColsCount, isUpMd, rows.length]);
30
+ var _g = useScroll({
31
+ canFreeze: canFreeze
32
+ }), frozenWidth = _g.frozenWidth, setFrozenWidth = _g.setFrozenWidth, fixedRef = _g.fixedRef, dynamicRef = _g.dynamicRef;
33
+ useEffect(function () {
34
+ if (columns) {
35
+ var frozenCols = columns.filter(function (col) { return col.canBeFrozen; });
36
+ var initialFrozenWidth_1 = frozenCols.reduce(function (width, col) { return width + (col.minWidth || 120); }, 1);
37
+ setFrozenWidth(function (fw) {
38
+ if (fw !== initialFrozenWidth_1) {
39
+ return initialFrozenWidth_1;
40
+ }
41
+ return fw;
42
+ });
43
+ }
44
+ }, [columns, fixedRef, fronzenColsCount, setFrozenWidth]);
45
+ return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TableContainer, __assign({ sx: (_a = {
46
+ borderWidth: "thin",
47
+ borderColor: "#e5e5e5",
48
+ borderStyle: "solid",
49
+ borderRadius: "4px",
50
+ borderCollapse: "unset !important",
51
+ margin: theme.spacing(2, 0, 3, 0),
52
+ width: "100%"
53
+ },
54
+ _a[theme.breakpoints.up("sm")] = {
55
+ minWidth: "600px"
56
+ },
57
+ _a.position = "relative",
58
+ _a.transition = "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
59
+ _a) }, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center", wrap: "nowrap" }, { children: [canFreeze && (_jsx(Grid, __assign({ id: "frozenContainer", item: true, sx: {
60
+ top: 0,
61
+ left: 0,
62
+ position: "absolute",
63
+ zIndex: 999,
64
+ backgroundColor: "Menu",
65
+ boxShadow: "6px 0 6px -4px rgba(0,0,0,0.15)"
66
+ } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, columns: columns.filter(function (col) { return col.canBeFrozen; }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) { return footer.canBeFrozen; }) })] })) }))), _jsx(Grid, __assign({ item: true, style: {
67
+ width: "100%",
68
+ marginLeft: canFreeze ? frozenWidth || 0 : 0,
69
+ overflow: "auto"
70
+ } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) {
71
+ return isUpMd ? !header.canBeFrozen : true;
72
+ }) }), _jsx(TableBody, { rows: rows, ref: dynamicRef, noDataText: noDataText, columns: columns.filter(function (col) {
73
+ return isUpMd ? !col.canBeFrozen : true;
74
+ }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
75
+ return isUpMd ? !footer.canBeFrozen : true;
76
+ }) })] })) }))] })) })) })));
77
+ }
78
+ export default BasicTable;
79
+ export * from "./types";
80
+ export { default as useTable } from "./useTable";
@@ -0,0 +1,72 @@
1
+ import { ReactElement, CSSProperties } from "react";
2
+ interface SortByProps {
3
+ id: string;
4
+ desc: boolean;
5
+ }
6
+ interface InitialStateProps {
7
+ sortBy?: SortByProps;
8
+ }
9
+ export interface IColumn {
10
+ Header: ReactElement;
11
+ headerTip?: string;
12
+ Body: ReactElement;
13
+ Footer?: ReactElement;
14
+ align?: "left" | "center" | "right";
15
+ accessor: string;
16
+ canSort?: boolean;
17
+ canBeFrozen?: boolean;
18
+ minWidth?: number;
19
+ [name: string]: unknown;
20
+ }
21
+ interface IHeader extends IColumn {
22
+ Cell: ReactElement;
23
+ title: string;
24
+ canSort?: boolean;
25
+ onSort: (props: SortingProps) => unknown;
26
+ }
27
+ interface IFooter extends IColumn {
28
+ Cell: ReactElement;
29
+ }
30
+ interface IBodyColumn extends IColumn {
31
+ Cell: ReactElement;
32
+ }
33
+ export interface IRow {
34
+ [name: string]: unknown;
35
+ }
36
+ export interface SortingProps {
37
+ field: string;
38
+ isSorted?: boolean;
39
+ descending?: boolean;
40
+ }
41
+ export interface UseTableProps {
42
+ data: Array<IRow>;
43
+ columns: Array<IColumn>;
44
+ initialState?: InitialStateProps;
45
+ disableSortBy?: boolean;
46
+ onSort?: (props: SortingProps) => unknown;
47
+ }
48
+ export interface UseScrollProps {
49
+ canFreeze?: boolean;
50
+ }
51
+ export interface BasicTableHeaderProps {
52
+ headers: Array<IHeader>;
53
+ }
54
+ export interface BasicTableFooterProps {
55
+ footers: Array<IFooter>;
56
+ }
57
+ export interface BasicTableBodyProps {
58
+ columns: Array<IBodyColumn>;
59
+ rows: Array<IRow>;
60
+ noDataText?: string;
61
+ forFrozen?: boolean;
62
+ }
63
+ export interface BasicTableBodyRowProps {
64
+ columns: Array<IBodyColumn>;
65
+ rows: Array<IRow>;
66
+ row: IRow;
67
+ }
68
+ export declare type BasicTableProps = BasicTableHeaderProps & Omit<BasicTableBodyProps, "forFrozen"> & Partial<BasicTableFooterProps> & {
69
+ primaryColor?: CSSProperties["color"];
70
+ secondaryColor?: CSSProperties["color"];
71
+ };
72
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ import { UseScrollProps } from "./types";
3
+ declare function useScroll(props: UseScrollProps): {
4
+ frozenWidth: number;
5
+ setFrozenWidth: import("react").Dispatch<import("react").SetStateAction<number>>;
6
+ fixedRef: import("react").RefObject<HTMLDivElement>;
7
+ dynamicRef: import("react").RefObject<HTMLDivElement>;
8
+ };
9
+ export default useScroll;
@@ -0,0 +1,76 @@
1
+ import { useState, useCallback, useEffect, useRef } from "react";
2
+ import useTheme from "@mui/material/styles/useTheme";
3
+ import useMediaQuery from "@mui/material/useMediaQuery";
4
+ function useScroll(props) {
5
+ var canFreeze = props.canFreeze;
6
+ var theme = useTheme();
7
+ var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
8
+ var _a = useState(0), frozenWidth = _a[0], setFrozenWidth = _a[1];
9
+ var fixedRef = useRef(null);
10
+ var dynamicRef = useRef(null);
11
+ var resetFrozenWidth = useCallback(function () {
12
+ setFrozenWidth(function (fw) {
13
+ var _a, _b;
14
+ if (fw !== ((_a = fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth)) {
15
+ return ((_b = fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || fw;
16
+ }
17
+ return fw;
18
+ });
19
+ }, [fixedRef]);
20
+ var onFixedScroll = useCallback(function (event) {
21
+ if (isUpMd && (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current)) {
22
+ var targetDiv = event.target;
23
+ dynamicRef.current.scrollTop = targetDiv.scrollTop;
24
+ resetFrozenWidth();
25
+ }
26
+ }, [dynamicRef, isUpMd, resetFrozenWidth]);
27
+ var onDynamicScroll = useCallback(function (event) {
28
+ if (isUpMd && (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current)) {
29
+ var targetDiv = event.target;
30
+ fixedRef.current.scrollTop = targetDiv.scrollTop;
31
+ resetFrozenWidth();
32
+ }
33
+ }, [fixedRef, isUpMd, resetFrozenWidth]);
34
+ var removeEventFixed = useCallback(function () {
35
+ if (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) {
36
+ fixedRef.current.removeEventListener("scroll", onFixedScroll);
37
+ }
38
+ }, [fixedRef, onFixedScroll]);
39
+ var removeEventDynamic = useCallback(function () {
40
+ if (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current) {
41
+ dynamicRef.current.removeEventListener("scroll", onDynamicScroll);
42
+ }
43
+ }, [dynamicRef, onDynamicScroll]);
44
+ var bindEventFixed = useCallback(function () {
45
+ removeEventDynamic();
46
+ if (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) {
47
+ fixedRef.current.addEventListener("scroll", onFixedScroll);
48
+ }
49
+ }, [fixedRef, onFixedScroll, removeEventDynamic]);
50
+ var bindEventDynamic = useCallback(function () {
51
+ removeEventFixed();
52
+ if (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current) {
53
+ dynamicRef.current.addEventListener("scroll", onDynamicScroll);
54
+ }
55
+ }, [dynamicRef, onDynamicScroll, removeEventFixed]);
56
+ useEffect(function () {
57
+ if (canFreeze) {
58
+ if (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) {
59
+ fixedRef.current.addEventListener("mouseover", bindEventFixed);
60
+ }
61
+ if (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current) {
62
+ dynamicRef.current.addEventListener("mouseover", bindEventDynamic);
63
+ }
64
+ }
65
+ }, [
66
+ bindEventDynamic,
67
+ bindEventFixed,
68
+ canFreeze,
69
+ dynamicRef,
70
+ fixedRef,
71
+ onDynamicScroll,
72
+ onFixedScroll
73
+ ]);
74
+ return { frozenWidth: frozenWidth, setFrozenWidth: setFrozenWidth, fixedRef: fixedRef, dynamicRef: dynamicRef };
75
+ }
76
+ export default useScroll;
@@ -0,0 +1,44 @@
1
+ /// <reference types="react" />
2
+ import { UseTableProps, SortingProps } from "./types";
3
+ declare function useTable(props: UseTableProps): {
4
+ headers: {
5
+ Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
6
+ headerTip?: string | undefined;
7
+ Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
8
+ Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
9
+ align?: "left" | "right" | "center" | undefined;
10
+ accessor: string;
11
+ canSort: boolean | undefined;
12
+ canBeFrozen?: boolean | undefined;
13
+ minWidth?: number | undefined;
14
+ Cell: JSX.Element;
15
+ title: string;
16
+ onSort: ({ field }: Pick<SortingProps, "field">) => void;
17
+ }[];
18
+ footers: {
19
+ Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
20
+ headerTip?: string | undefined;
21
+ Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
22
+ Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
23
+ align?: "left" | "right" | "center" | undefined;
24
+ accessor: string;
25
+ canSort?: boolean | undefined;
26
+ canBeFrozen?: boolean | undefined;
27
+ minWidth?: number | undefined;
28
+ Cell: import("react").FunctionComponentElement<any>;
29
+ }[];
30
+ columns: {
31
+ Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
32
+ headerTip?: string | undefined;
33
+ Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
34
+ Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
35
+ align?: "left" | "right" | "center" | undefined;
36
+ accessor: string;
37
+ canSort?: boolean | undefined;
38
+ canBeFrozen?: boolean | undefined;
39
+ minWidth?: number | undefined;
40
+ Cell: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
41
+ }[];
42
+ rows: import("./types").IRow[];
43
+ };
44
+ export default useTable;