es-grid-template 0.0.8 → 0.1.0

package/lib/{FilterSearch.js → grid-component/FilterSearch.js}

@@ -28,7 +28,7 @@ const FilterSearch = props => {
       paddingRight: 0
     }
   }, /*#__PURE__*/React.createElement(_rcMasterUi.Input, {
-    prefix: /*#__PURE__*/React.createElement(_SearchOutlined.default, null),
+    suffix: /*#__PURE__*/React.createElement(_SearchOutlined.default, null),
     placeholder: locale.filterSearchPlaceholder,
     onChange: onChange,
     value: value,

package/lib/grid-component/GridStyle.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    heightTable?: number | string;
+}>> & string;

package/lib/grid-component/GridStyle.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
+  displayName: "GridStyle",
+  componentId: "es-grid-template__sc-sueu2e-0"
+})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;z-index:-1;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined, props => props.heightTable ? `${props.heightTable}px` : undefined);

package/lib/grid-component/InternalTable.js

@@ -0,0 +1,293 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _rcMasterUi = require("rc-master-ui");
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactResizable = require("react-resizable");
+var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
+var _hooks = require("./hooks");
+var _becoxyIcons = require("becoxy-icons");
+var _useColumns = require("./hooks/useColumns");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/es");
+require("dayjs/locale/vi");
+var _en_US = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/en_US"));
+var _vi_VN = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/vi_VN"));
+var _GridEdit = _interopRequireDefault(require("./table/GridEdit"));
+var _Grid = _interopRequireDefault(require("./table/Grid"));
+require("./styles.scss");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+_dayjs.default.extend(_customParseFormat.default);
+const ResizableTitle = props => {
+  const {
+    onResize,
+    width,
+    ...restProps
+  } = props;
+  if (!width) {
+    return /*#__PURE__*/_react.default.createElement("th", restProps);
+  }
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    _react.default.createElement(_reactResizable.Resizable, {
+      width: width,
+      height: 0,
+      handle: /*#__PURE__*/_react.default.createElement("span", {
+        className: "react-resizable-handle",
+        onClick: e => {
+          e.stopPropagation();
+        }
+      }),
+      onResize: onResize,
+      draggableOpts: {
+        enableUserSelectHack: false
+      }
+    }, /*#__PURE__*/_react.default.createElement("th", restProps))
+  );
+};
+const GridStyle = _styledComponents.default.div.withConfig({
+  displayName: "GridStyle",
+  componentId: "es-grid-template__sc-1awgu8w-0"
+})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined, props => props.heightTable ? `${props.heightTable}px` : undefined);
+const InternalTable = props => {
+  const {
+    t,
+    columns: propsColumns,
+    lang,
+    dataSource,
+    allowResizing = true,
+    dataSourceFilter: propDataSourceFilter,
+    onFilterClick,
+    editAble,
+    ...rest
+  } = props;
+  const locale = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
+  const buddhistLocale = {
+    ...locale,
+    lang: {
+      ...locale.lang
+    }
+  };
+  const tableRef = (0, _react.useRef)(null);
+  const [data, setData] = (0, _react.useState)(dataSource);
+  const [columns, setColumns] = (0, _react.useState)([]);
+  const [isManualUpdate, setIsManualUpdate] = (0, _react.useState)(false);
+  const [dataSourceFilter, setDataSourceFilter] = (0, _react.useState)(propDataSourceFilter ?? []);
+  (0, _react.useEffect)(() => {
+    const rs = propsColumns ? [_rcMasterUi.Table.SELECTION_COLUMN, ...propsColumns] : [];
+    setColumns(rs);
+  }, [propsColumns]);
+  (0, _react.useEffect)(() => {
+    if (!isManualUpdate) {
+      setData(dataSource || []);
+    }
+    setIsManualUpdate(false);
+  }, [dataSource]);
+  const handleSearch = (selectedKeys, confirm) => {
+    confirm();
+  };
+  const onFilterCallback = (key, filterDataCallback) => {
+    const find = dataSourceFilter.find(it => it.key === key);
+    if (find) {
+      const newData = (0, _hooks.updateArrayByKey)(dataSourceFilter, {
+        key,
+        data: filterDataCallback
+      }, 'key');
+      setDataSourceFilter(newData);
+    } else {
+      const newData = [...dataSourceFilter, {
+        key,
+        data: filterDataCallback
+      }];
+      setDataSourceFilter(newData);
+    }
+  };
+  const getColumnSearchProps = (0, _react.useCallback)(column => ({
+    filterDropdown: ({
+      setSelectedKeys,
+      selectedKeys,
+      confirm,
+      close,
+      setOperatorKey,
+      operatorKey,
+      visible,
+      searchValue,
+      setSearchValue
+    }) => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          padding: 8,
+          minWidth: 275
+        },
+        onKeyDown: e => e.stopPropagation()
+      }, (column?.showOperator !== false || column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange') && /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
+        options: (0, _hooks.translateOption)(_hooks.numberOperator, t),
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: operatorKey,
+        onChange: val => {
+          setOperatorKey(val);
+        }
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          marginBottom: 8
+        }
+      }, (0, _useColumns.renderFilter)(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale)), /*#__PURE__*/_react.default.createElement(_antd.Space, {
+        style: {
+          justifyContent: 'end',
+          width: '100%'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        type: "primary",
+        onClick: () => {
+          confirm({
+            closeDropdown: false
+          });
+          handleSearch(selectedKeys, confirm);
+        },
+        icon: /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null),
+        size: "small",
+        style: {
+          width: 90
+        }
+      }, "Filter"), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        type: "link",
+        size: "small",
+        onClick: () => {
+          close();
+        }
+      }, "close")));
+    },
+    filterIcon: filtered => /*#__PURE__*/_react.default.createElement(_becoxyIcons.FilterFill, {
+      fontSize: 12,
+      onClick: () => {
+        onFilterClick?.(column, onFilterCallback);
+      },
+      style: {
+        color: filtered ? '#283046' : undefined
+      }
+    }),
+    filterDropdownProps: {
+      onOpenChange(open) {
+        if (open) {
+          // setTimeout(() => searchInput.current?.select(), 100)
+        }
+      }
+    }
+  }), [onFilterCallback, onFilterClick, _useColumns.renderFilter, t]);
+  const handleResize = indexPath => (e, {
+    size
+  }) => {
+    const updateColumns = (cols, path) => {
+      const [currentIndex, ...restPath] = path;
+      return cols.map((col, idx) => {
+        if (idx === currentIndex) {
+          if (restPath.length === 0) {
+            // Cập nhật width của cột cuối cùng trong path
+            // return { ...col, width: size.width }
+
+            // Kiểm tra minWidth trước khi cập nhật width
+            if (col.minWidth && size.width < col.minWidth) {
+              e.preventDefault();
+              return col; // Không cập nhật nếu nhỏ hơn minWidth
+            }
+
+            // Kiểm tra minWidth trước khi cập nhật width
+            if (col.maxWidth && size.width > col.maxWidth) {
+              e.preventDefault();
+              return col; // Không cập nhật nếu nhỏ hơn minWidth
+            }
+            return {
+              ...col,
+              width: size.width
+            };
+          } else if (col.children) {
+            // Tiếp tục cập nhật các cấp con
+            return {
+              ...col,
+              children: updateColumns(col.children, restPath)
+            };
+          }
+        }
+        // e.preventDefault()
+        return col;
+      });
+    };
+    setColumns(prevColumns => updateColumns(prevColumns, indexPath));
+  };
+  const transformColumns = _react.default.useCallback((cols, parentPath = []) => {
+    return cols.map((col, index) => {
+      const currentPath = [...parentPath, index];
+      // @ts-ignore
+      if (!col?.dataIndex && !col.key) {
+        return col;
+      }
+      if (col.children) {
+        return {
+          ...col,
+          title: col.headerText ?? col.title,
+          ellipsis: col.ellipsis !== false,
+          children: transformColumns(col.children, currentPath)
+        };
+      }
+      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.dataIndex === '#') {
+        return {
+          ...col,
+          title: col.headerText ?? col.title,
+          ellipsis: col.ellipsis !== false
+        };
+      }
+      return {
+        ...getColumnSearchProps(col),
+        ...col,
+        title: col.headerText ?? col.title,
+        ellipsis: col.ellipsis !== false,
+        onFilter: (value, record) => {
+          // @ts-ignore
+          return record[column?.dataIndex];
+        },
+        onHeaderCell: () => ({
+          width: col.width,
+          onResize: handleResize(currentPath)
+        })
+      };
+    });
+  }, [getColumnSearchProps]);
+  const mergedColumns = _react.default.useMemo(() => {
+    return transformColumns(columns);
+  }, [transformColumns, columns]);
+  const TableComponent = editAble ? _GridEdit.default : _Grid.default;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(GridStyle, {
+    heightTable: props.style?.minHeight,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
+    tableRef: tableRef,
+    dataSource: data,
+    components: {
+      header: {
+        cell: allowResizing ? ResizableTitle : undefined
+      }
+    },
+    columns: mergedColumns,
+    showSorterTooltip: {
+      target: 'sorter-icon'
+    }
+  }))));
+};
+var _default = exports.default = InternalTable;

package/lib/{LoadingSpinner.js → grid-component/LoadingSpinner.js}

@@ -11,7 +11,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const SpinnerStyle = _styledComponents.default.div.withConfig({
   displayName: "SpinnerStyle",
-  componentId: "es-grid-template__sc-180f2ml-0"
+  componentId: "es-grid-template__sc-jrz5mo-0"
 })(["width:1em;height:1em;font-size:20px;display:inline-block;transition:transform 0.3s ease,opacity 0.3s ease;transform-origin:50% 50%;line-height:1;.loading{position:absolute;top:50%;inset-inline-start:50%;margin:-10px;width:55px;height:55px;border-radius:50%;border:3px solid transparent;-webkit-box-sizing:border-box;box-sizing:border-box;.effect-1,.effect-2,.effect-3{width:36px;height:36px;border-radius:50%;border:3px solid transparent;border-left:3px solid #eb4619;-webkit-box-sizing:border-box;box-sizing:border-box;}.effect-1{position:absolute;animation:rotate 1s ease infinite;}.effect-2{position:absolute;animation:rotateOpacity 1s ease infinite 0.1s;}.effect-3{-webkit-animation:rotateOpacity 1s ease infinite 0.2s;animation:rotateOpacity 1s ease infinite 0.2s;}.loading .effects{transition:all 0.3s ease;}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(1turn);transform:rotate(1turn);}}@keyframes rotateOpacity{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);opacity:0.1;}100%{-webkit-transform:rotate(1turn);transform:rotate(1turn);opacity:1;}}"]);
 const ComponentSpinner = () => {
   return /*#__PURE__*/React.createElement(SpinnerStyle, {

package/lib/grid-component/Message/Message.d.ts

@@ -0,0 +1,2 @@
+declare const Message: (param: string) => string;
+export default Message;

package/lib/grid-component/Message/Message.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactHotToast = _interopRequireDefault(require("react-hot-toast"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Message = param => {
+  return _reactHotToast.default.success( /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "toastify-header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "title-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("h6", {
+    className: "toast-title"
+  }, param))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "toastify-body"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "list-unstyled mb-0"
+  }, /*#__PURE__*/_react.default.createElement("li", null)))));
+};
+var _default = exports.default = Message;

package/lib/grid-component/Message/index.d.ts

@@ -0,0 +1 @@
+export * from "./Message";

package/lib/grid-component/Message/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Message = require("./Message");
+Object.keys(_Message).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Message[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Message[key];
+    }
+  });
+});

package/{es → lib/grid-component}/TableGrid.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import './styles.scss';
 import type { GridTableProps } from "./type";
 type GridProps<T> = GridTableProps<T> & {
-    setColumns: any;
+    setColumns?: any;
+    tableRef: any;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;