@symply.io/basic-components 1.0.0-bata.7 → 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 (11) hide show
  1. package/BasicTable/TableBody.js +3 -4
  2. package/BasicTable/TableBodyRow.js +3 -3
  3. package/BasicTable/TableFooter.js +3 -3
  4. package/BasicTable/TableHeader.js +3 -3
  5. package/BasicTable/index.js +8 -16
  6. package/BasicTable/types.d.ts +2 -0
  7. package/BasicTable/useScroll.js +1 -1
  8. package/BasicTable/useTable.d.ts +6 -0
  9. package/BasicTable/useTable.js +2 -2
  10. package/README.md +14 -12
  11. package/package.json +1 -1
package/BasicTable/TableBody.js CHANGED
@@ -22,14 +22,14 @@ var BasicTableBody = forwardRef(function (props, ref) {
22
22
  overflowY: "auto",
23
23
  display: "block",
24
24
  minWidth: "100%",
25
- scrollbarWidth: forFrozen ? "none" : "inherit",
25
+ scrollbarWidth: forFrozen ? "none" : "initial",
26
26
  "&::-webkit-scrollbar": {
27
- width: forFrozen ? 0 : "inherit"
27
+ width: forFrozen ? 0 : "initial"
28
28
  }
29
29
  } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows && rows.length > 0 ? (rows.map(function (row, index) {
30
30
  return (_jsx(TableBodyRow, { row: row, rows: rows, columns: columns }, "BasicTable_".concat(index)));
31
31
  })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
32
- height: "60px",
32
+ height: theme.spacing(7.5),
33
33
  borderBottomWidth: "thin",
34
34
  borderBottomColor: "#e5e5e5",
35
35
  borderBottomStyle: "solid",
@@ -43,7 +43,6 @@ var BasicTableBody = forwardRef(function (props, ref) {
43
43
  fontWeight: 600
44
44
  }
45
45
  } }, { children: _jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: "center", sx: {
46
- minWidth: "135px",
47
46
  paddingLeft: theme.spacing(0.625),
48
47
  paddingRight: theme.spacing(0.625)
49
48
  } }, { children: noDataText })) }))) })) })));
package/BasicTable/TableBodyRow.js CHANGED
@@ -17,7 +17,7 @@ function BasicTableBodyRow(props) {
17
17
  var row = props.row, rows = props.rows, columns = props.columns;
18
18
  var theme = useCustomTheme();
19
19
  return (_jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
20
- height: "60px",
20
+ height: theme.spacing(7.5),
21
21
  borderBottomWidth: "thin",
22
22
  borderBottomColor: "#e5e5e5",
23
23
  borderBottomStyle: "solid",
@@ -31,9 +31,9 @@ function BasicTableBodyRow(props) {
31
31
  fontWeight: 600
32
32
  }
33
33
  } }, { children: columns.map(function (col) {
34
- var accessor = col.accessor, Cell = col.Cell, canBeFrozen = col.canBeFrozen, _a = col.align, align = _a === void 0 ? "center" : _a;
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
35
  return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
36
- minWidth: canBeFrozen ? "112px!important" : "135px",
36
+ minWidth: minWidth,
37
37
  paddingLeft: theme.spacing(0.625),
38
38
  paddingRight: theme.spacing(0.625)
39
39
  } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
package/BasicTable/TableFooter.js CHANGED
@@ -19,7 +19,7 @@ function BasicTableFooter(props) {
19
19
  return footers && footers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
20
20
  backgroundColor: "#eaf0f6",
21
21
  padding: theme.spacing(1.5, 0),
22
- height: "50px"
22
+ height: theme.spacing(6.25)
23
23
  } }, { children: _jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
24
24
  lineHeight: "24px",
25
25
  minWidth: "100%",
@@ -29,9 +29,9 @@ function BasicTableFooter(props) {
29
29
  fontWeight: 600
30
30
  }
31
31
  } }, { children: footers.map(function (footer) {
32
- var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, canBeFrozen = footer.canBeFrozen;
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
33
  return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
34
- minWidth: canBeFrozen ? "112px!important" : "135px",
34
+ minWidth: minWidth,
35
35
  paddingLeft: theme.spacing(0.625),
36
36
  paddingRight: theme.spacing(0.625),
37
37
  whiteSpace: "nowrap",
package/BasicTable/TableHeader.js CHANGED
@@ -19,7 +19,7 @@ function BasicTableHeader(props) {
19
19
  return headers && headers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
20
20
  backgroundColor: "#eaf0f6",
21
21
  padding: theme.spacing(1.5, 0),
22
- height: "50px"
22
+ height: theme.spacing(6.25)
23
23
  } }, { children: _jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
24
24
  lineHeight: "24px",
25
25
  minWidth: "100%",
@@ -29,9 +29,9 @@ function BasicTableHeader(props) {
29
29
  fontWeight: 600
30
30
  }
31
31
  } }, { children: headers.map(function (header) {
32
- var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, title = header.title, onSort = header.onSort, canBeFrozen = header.canBeFrozen, _b = header.canSort, canSort = _b === void 0 ? false : _b;
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
33
  return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, title: title, textAlign: align, sx: {
34
- minWidth: canBeFrozen ? "112px!important" : "135px",
34
+ minWidth: minWidth,
35
35
  paddingLeft: theme.spacing(0.625),
36
36
  paddingRight: theme.spacing(0.625),
37
37
  whiteSpace: "nowrap",
package/BasicTable/index.js CHANGED
@@ -22,25 +22,21 @@ import TableHeader from "./TableHeader";
22
22
  import TableFooter from "./TableFooter";
23
23
  function BasicTable(props) {
24
24
  var _a;
25
- var _b;
26
- var _c = props.columns, columns = _c === void 0 ? [] : _c, _d = props.rows, rows = _d === void 0 ? [] : _d, _e = props.headers, headers = _e === void 0 ? [] : _e, _f = props.footers, footers = _f === void 0 ? [] : _f, _g = props.noDataText, noDataText = _g === void 0 ? "No Data!" : _g, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
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;
27
26
  var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
28
27
  var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
29
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]);
30
29
  var canFreeze = useMemo(function () { return isUpMd && (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && fronzenColsCount > 0; }, [fronzenColsCount, isUpMd, rows.length]);
31
- var _h = useScroll({
30
+ var _g = useScroll({
32
31
  canFreeze: canFreeze
33
- }), frozenWidth = _h.frozenWidth, setFrozenWidth = _h.setFrozenWidth, fixedRef = _h.fixedRef, dynamicRef = _h.dynamicRef;
32
+ }), frozenWidth = _g.frozenWidth, setFrozenWidth = _g.setFrozenWidth, fixedRef = _g.fixedRef, dynamicRef = _g.dynamicRef;
34
33
  useEffect(function () {
35
- var _a, _b;
36
- var initFrozenWidth = ((_a = document.getElementById("frozenContainer")) === null || _a === void 0 ? void 0 : _a.clientWidth) ||
37
- ((_b = fixedRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) ||
38
- fronzenColsCount * 123 ||
39
- 370;
40
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);
41
37
  setFrozenWidth(function (fw) {
42
- if (fw !== initFrozenWidth) {
43
- return initFrozenWidth;
38
+ if (fw !== initialFrozenWidth_1) {
39
+ return initialFrozenWidth_1;
44
40
  }
45
41
  return fw;
46
42
  });
@@ -69,11 +65,7 @@ function BasicTable(props) {
69
65
  boxShadow: "6px 0 6px -4px rgba(0,0,0,0.15)"
70
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: {
71
67
  width: "100%",
72
- marginLeft: canFreeze
73
- ? ((_b = document.getElementById("frozenContainer")) === null || _b === void 0 ? void 0 : _b.clientWidth) ||
74
- frozenWidth ||
75
- 0
76
- : 0,
68
+ marginLeft: canFreeze ? frozenWidth || 0 : 0,
77
69
  overflow: "auto"
78
70
  } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) {
79
71
  return isUpMd ? !header.canBeFrozen : true;
package/BasicTable/types.d.ts CHANGED
@@ -8,12 +8,14 @@ interface InitialStateProps {
8
8
  }
9
9
  export interface IColumn {
10
10
  Header: ReactElement;
11
+ headerTip?: string;
11
12
  Body: ReactElement;
12
13
  Footer?: ReactElement;
13
14
  align?: "left" | "center" | "right";
14
15
  accessor: string;
15
16
  canSort?: boolean;
16
17
  canBeFrozen?: boolean;
18
+ minWidth?: number;
17
19
  [name: string]: unknown;
18
20
  }
19
21
  interface IHeader extends IColumn {
package/BasicTable/useScroll.js CHANGED
@@ -5,7 +5,7 @@ function useScroll(props) {
5
5
  var canFreeze = props.canFreeze;
6
6
  var theme = useTheme();
7
7
  var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
8
- var _a = useState(370), frozenWidth = _a[0], setFrozenWidth = _a[1];
8
+ var _a = useState(0), frozenWidth = _a[0], setFrozenWidth = _a[1];
9
9
  var fixedRef = useRef(null);
10
10
  var dynamicRef = useRef(null);
11
11
  var resetFrozenWidth = useCallback(function () {
package/BasicTable/useTable.d.ts CHANGED
@@ -3,34 +3,40 @@ import { UseTableProps, SortingProps } from "./types";
3
3
  declare function useTable(props: UseTableProps): {
4
4
  headers: {
5
5
  Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
6
+ headerTip?: string | undefined;
6
7
  Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
7
8
  Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
8
9
  align?: "left" | "right" | "center" | undefined;
9
10
  accessor: string;
10
11
  canSort: boolean | undefined;
11
12
  canBeFrozen?: boolean | undefined;
13
+ minWidth?: number | undefined;
12
14
  Cell: JSX.Element;
13
15
  title: string;
14
16
  onSort: ({ field }: Pick<SortingProps, "field">) => void;
15
17
  }[];
16
18
  footers: {
17
19
  Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
20
+ headerTip?: string | undefined;
18
21
  Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
19
22
  Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
20
23
  align?: "left" | "right" | "center" | undefined;
21
24
  accessor: string;
22
25
  canSort?: boolean | undefined;
23
26
  canBeFrozen?: boolean | undefined;
27
+ minWidth?: number | undefined;
24
28
  Cell: import("react").FunctionComponentElement<any>;
25
29
  }[];
26
30
  columns: {
27
31
  Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
32
+ headerTip?: string | undefined;
28
33
  Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
29
34
  Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
30
35
  align?: "left" | "right" | "center" | undefined;
31
36
  accessor: string;
32
37
  canSort?: boolean | undefined;
33
38
  canBeFrozen?: boolean | undefined;
39
+ minWidth?: number | undefined;
34
40
  Cell: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
35
41
  }[];
36
42
  rows: import("./types").IRow[];
package/BasicTable/useTable.js CHANGED
@@ -75,9 +75,9 @@ function useTable(props) {
75
75
  }, [columns, rest]);
76
76
  var headers = useMemo(function () {
77
77
  return columns.map(function (col) {
78
- var Header = col.Header, accessor = col.accessor, canSort = col.canSort;
78
+ var Header = col.Header, accessor = col.accessor, canSort = col.canSort, headerTip = col.headerTip;
79
79
  var canSortBy = canSort && !disableSortBy;
80
- return __assign(__assign({ Cell: (_jsxs(_Fragment, { children: [cloneElement(Header || _jsx(_Fragment, {}), { column: col }), canSortBy && renderSortingSymbol(accessor)] })), title: "".concat(canSortBy ? " (Click to sort)" : ""), canSort: canSortBy, onSort: canSortBy ? handleSort : function () { } }, col), rest);
80
+ return __assign(__assign({ Cell: (_jsxs(_Fragment, { children: [cloneElement(Header || _jsx(_Fragment, {}), { column: col }), canSortBy && renderSortingSymbol(accessor)] })), title: "".concat(headerTip || "").concat(canSortBy ? " (Click to sort)" : ""), canSort: canSortBy, onSort: canSortBy ? handleSort : function () { } }, col), rest);
81
81
  });
82
82
  }, [columns, disableSortBy, handleSort, renderSortingSymbol, rest]);
83
83
  var footers = useMemo(function () {
package/README.md CHANGED
@@ -211,26 +211,28 @@ Reusable table component
211
211
  ```tsx
212
212
  import { BasicTable, useTable } from '@symply.io/basic-components';
213
213
  // or
214
- import BasicTable, { useTable } from '@symply.io/basic-components/BreadCrumbs/BasicTable';
214
+ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
215
215
  ```
216
216
 
217
217
  <h5>Column Props (IColumn)</h5>
218
218
 
219
- | Name | Type | Default | Required | Description |
220
- | ----------- | --------------------------- | ------- | -------- | ----------------------------------------------- |
221
- | Body | ReactElement | | true | The component to render the column body cell. |
222
- | Header | ReactElement | | true | The component to render the column header cell. |
223
- | Footer | ReactElement | | false | The component to render the column footer cell. |
224
- | accessor | string | | true | The key of the column, it should be unique. |
225
- | align | "left" \|"center" \|"right" | | false | The alignment of the column. |
226
- | canBeFrozen | bool | | false | If true, the column can be frozen |
227
- | canSort | bool | | false | If true, the column can be sortable. |
219
+ | accessor | string | | true | The key of the column, it should be unique. |
220
+ | ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
221
+ | Name | Type | Default | Required | Description |
222
+ | align | "left" \|"center" \|"right" | | false | The alignment of the column. |
223
+ | Body | ReactElement | | true | The component to render the column body cell. |
224
+ | canBeFrozen | bool | | false | If true, the column can be frozen |
225
+ | canSort | bool | | false | If true, the column can be sortable. |
226
+ | Header | ReactElement | | true | The component to render the column header cell. |
227
+ | headerTip | string | | false | The tip title text when the mouse is over the header. |
228
+ | Footer | ReactElement | | false | The component to render the column footer cell. |
229
+ | minWidth | number | 120 | false | The minimum width of cells. |
228
230
 
229
231
  <h5>Hook Props</h5>
230
232
 
231
- | Name | Type | Default | Required | Description |
232
- | ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
233
233
  | columns | Array\<IColumn\> | | true | table columns |
234
+ | ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
235
+ | Name | Type | Default | Required | Description |
234
236
  | data | Array<{ [name]: unknown }> | | true | table data/rows |
235
237
  | disableSortBy | bool | | false | If true, the whole table can't be sortable. |
236
238
  | initialState | { sortBy?: SortByProps } | | false | Set the initial states |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.0.0-bata.7",
3
+ "version": "1.0.0-beta.10",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",