es-grid-template 0.0.7 → 0.0.8

package/lib/ColumnsChoose.js

@@ -4,97 +4,90 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ColumnsChoose = exports.BoxInputFilterColumn = void 0;
+exports.ColumnsChoose = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
 var _icons = require("@ant-design/icons");
 var _hooks = require("./hooks");
+var _tree = _interopRequireDefault(require("rc-master-ui/es/tree"));
+var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
 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 {
-  Search
-} = _antd.Input;
+// import type { TreeDataNode} from "antd";
 
-// const RowStyle = styled.div`
-//   padding: 6px 0;
-//
-//   height: 35px;
-//
-//   .ellipsis {
-//     overflow: hidden;
-//     white-space: nowrap;
-//     text-overflow: ellipsis;
-//     word-break: keep-all;
-//   }
-// `
+// const { Search } = Input;
 
 const BoxAction = _styledComponents.default.div.withConfig({
   displayName: "BoxAction",
   componentId: "es-grid-template__sc-1k89i9w-0"
 })(["border-top:1px solid #c4c4c4;padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
-const BoxInputFilterColumn = exports.BoxInputFilterColumn = _styledComponents.default.div.withConfig({
-  displayName: "BoxInputFilterColumn",
-  componentId: "es-grid-template__sc-1k89i9w-1"
-})(["display:flex;position:relative;align-items:center;.input__value{z-index:1;border-radius:0;border-top:0;border-left:0;border-right:0;&:focus{box-shadow:none !important;}&.is-clearable{padding-right:25px !important;}}.input__clear-icon{cursor:pointer;position:absolute;right:5px;z-index:10;}"]);
 const ColumnsChoose = props => {
   const {
     columns: propsColumns,
     setColumns: changeHiddenColumn
     // t,
-    // columnsGrouped,
-    // onChangeDisplay
-    // frozen
   } = props;
 
   // const dataList: { key: React.Key; title: string }[] = [];
 
-  const defaultColumns = (0, _react.useMemo)(() => {
-    const rs = propsColumns.filter(it => it.key || it.dataIndex);
-    return rs;
+  // const defaultColumns = useMemo(() => {
+  //   return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
+  // }, [propsColumns])
+
+  // const columnsChooseRef: any = useRef()
+  // const searchRef: any = useRef()
+
+  const [columns, setColumns] = (0, _react.useState)([]);
+  const [selectedKeys, setSelectedKeys] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    const defaultColumns = propsColumns.filter(it => it.key || it.dataIndex && it.showColumnChoose !== false);
+    const defaultSelectedKeys = (0, _hooks.getVisibleColumnKeys)(propsColumns);
+    setSelectedKeys(defaultSelectedKeys);
+    setColumns(defaultColumns);
   }, [propsColumns]);
   const defaultSelectedKeys = (0, _react.useMemo)(() => {
     return (0, _hooks.getVisibleColumnKeys)(propsColumns);
   }, [propsColumns]);
 
-  // const columnsChooseRef: any = useRef()
-  // const searchRef: any = useRef()
+  // console.log('defaultSelectedKeys', defaultSelectedKeys)
 
-  const [columns] = (0, _react.useState)(defaultColumns);
   const [clicked, setClicked] = (0, _react.useState)(false);
   const [autoExpandParent, setAutoExpandParent] = (0, _react.useState)(true);
   // const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
-  const [searchValue, setSearchValue] = (0, _react.useState)('');
-  const [selectedKeys, setSelectedKeys] = (0, _react.useState)(defaultSelectedKeys);
-  const treeData = (0, _react.useMemo)(() => {
-    const loop = data => data.map(item => {
-      const strTitle = item.title;
-      const index = strTitle.indexOf(searchValue);
-      const beforeStr = strTitle.substring(0, index);
-      const afterStr = strTitle.slice(index + searchValue.length);
-      const title = index > -1 ? /*#__PURE__*/_react.default.createElement("span", {
-        key: item.key
-      }, beforeStr, /*#__PURE__*/_react.default.createElement("span", {
-        className: "site-tree-search-value"
-      }, searchValue), afterStr) : /*#__PURE__*/_react.default.createElement("span", {
-        key: item.key
-      }, strTitle);
-      if (item.children) {
-        return {
-          title,
-          key: item.key,
-          children: loop(item.children)
-        };
-      }
-      return {
-        title,
-        key: item.key
-      };
-    });
+  // const [searchValue, setSearchValue] = useState('');
+
+  // const treeData = useMemo(() => {
+  //   const loop = (data: TreeDataNode[]): TreeDataNode[] =>
+  //     data.map((item) => {
+  //       const strTitle = item.title as string;
+  //       const index = strTitle.indexOf(searchValue);
+  //       const beforeStr = strTitle.substring(0, index);
+  //       const afterStr = strTitle.slice(index + searchValue.length);
+  //       const title =
+  //         index > -1 ? (
+  //           <span key={item.key}>
+  //             {beforeStr}
+  //             <span className="site-tree-search-value">{searchValue}</span>
+  //             {afterStr}
+  //           </span>
+  //         ) : (
+  //           <span key={item.key}>{strTitle}</span>
+  //         );
+  //       if (item.children) {
+  //         return { title, key: item.key, children: loop(item.children) };
+  //       }
+  //
+  //       return {
+  //         title,
+  //         key: item.key,
+  //       };
+  //     });
+  //
+  //   // return loop(defaultData);
+  //   return loop(columns as any);
+  // }, [searchValue, columns]);
 
-    // return loop(defaultData);
-    return loop(columns);
-  }, [searchValue]);
   const hide = () => {
     setClicked(false);
   };
@@ -121,10 +114,9 @@ const ColumnsChoose = props => {
   //   return parentKey!
   // }
 
-  const onChange = e => {
-    const {
-      value
-    } = e.target;
+  // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onChange = () => {
+    // const { value } = e.target
     // const newExpandedKeys = dataList
     //   .map((item) => {
     //     if (item.title.indexOf(value) > -1) {
@@ -134,14 +126,15 @@ const ColumnsChoose = props => {
     //   })
     //   .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
     // setExpandedKeys(newExpandedKeys)
-    setSearchValue(value);
+
+    // setSearchValue(value)
     setAutoExpandParent(true);
   };
   const onCheck = keys => {
     setSelectedKeys(keys);
   };
   const handleAccept = () => {
-    const rs1 = (0, _hooks.updateColumns)(columns, selectedKeys);
+    const rs1 = (0, _hooks.updateColumns)(propsColumns, selectedKeys);
     changeHiddenColumn(rs1);
     hide();
   };
@@ -155,18 +148,21 @@ const ColumnsChoose = props => {
       style: {
         minWidth: 250
       }
-    }, /*#__PURE__*/_react.default.createElement(Search, {
+    }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
       style: {
         marginBottom: 8
       },
       placeholder: "Search",
+      prefix: /*#__PURE__*/_react.default.createElement(_SearchOutlined.default, null),
       onChange: onChange
-    }), /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+    }), /*#__PURE__*/_react.default.createElement(_tree.default, {
       onExpand: onExpand
       // expandedKeys={expandedKeys}
       ,
-      autoExpandParent: autoExpandParent,
-      treeData: treeData,
+      autoExpandParent: autoExpandParent
+      // treeData={treeData}
+      ,
+      treeData: columns,
       defaultExpandAll: true,
       checkable: true
       // onSelect={(keys, info) => {

package/lib/FilterSearch.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
-var _uiRc = require("ui-rc");
+var _rcMasterUi = require("rc-master-ui");
 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 FilterSearch = props => {
@@ -27,7 +27,7 @@ const FilterSearch = props => {
       paddingLeft: 0,
       paddingRight: 0
     }
-  }, /*#__PURE__*/React.createElement(_uiRc.Input, {
+  }, /*#__PURE__*/React.createElement(_rcMasterUi.Input, {
     prefix: /*#__PURE__*/React.createElement(_SearchOutlined.default, null),
     placeholder: locale.filterSearchPlaceholder,
     onChange: onChange,

package/lib/{GridTable.d.ts → InternalTable.d.ts}

@@ -3,5 +3,5 @@ import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import './styles.scss';
 import type { GridTableProps } from "./type";
-declare const GridTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
-export default GridTable;
+declare const InternalTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
+export default InternalTable;

package/lib/InternalTable.js

@@ -0,0 +1,194 @@
+"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 _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/es");
+require("dayjs/locale/vi");
+require("./styles.scss");
+var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _TableGrid = _interopRequireDefault(require("./TableGrid"));
+var _reactResizable = require("react-resizable");
+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; }
+// import {ColumnsChoose} from "./ColumnsChoose";
+
+_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-1fs85vo-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 {
+    columns,
+    // title,
+    dataSource,
+    // toolbarItems,
+    // showColumnChoose,
+    ...rest
+  } = props;
+  const [tmpColumns, setColumns] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    const rs = columns ? [_rcMasterUi.Table.SELECTION_COLUMN, ...columns] : [];
+    setColumns(rs);
+  }, [columns]);
+  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 addResizeHandlers = _react.default.useCallback((cols, parentPath = []) => {
+    return cols.map((col, index) => {
+      const currentPath = [...parentPath, index];
+      if (!col?.dataIndex && !col.key) {
+        return col;
+      }
+      if (col.children) {
+        return {
+          ...col,
+          title: col.headerText ?? col.title,
+          ellipsis: col.ellipsis !== false,
+          children: addResizeHandlers(col.children, currentPath)
+        };
+      }
+      return {
+        ...col,
+        title: col.headerText ?? col.title,
+        ellipsis: col.ellipsis !== false,
+        onHeaderCell: () => ({
+          width: col.width,
+          onResize: handleResize(currentPath)
+        })
+      };
+    });
+  }, []);
+  const resizableColumns = _react.default.useMemo(() => {
+    return addResizeHandlers(tmpColumns);
+  }, [addResizeHandlers, tmpColumns]);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(GridStyle, {
+    heightTable: props.style?.minHeight,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
+    dataSource: dataSource,
+    components: {
+      header: {
+        cell: ResizableTitle
+      }
+    },
+    columns: resizableColumns,
+    setColumns: setColumns,
+    showSorterTooltip: {
+      target: 'sorter-icon'
+    }
+
+    // title={() => {
+    //   return (
+    //     <Fragment>
+    //       <div>
+    //         {title?.(dataSource as any)}
+    //       </div>
+    //
+    //
+    //       {(toolbarItems || showColumnChoose !== false) && (
+    //         <div style={{display: 'flex', justifyContent: 'space-between'}}>
+    //
+    //           <Toolbar
+    //             style={{width: '100%'}}
+    //             items={toolbarItems ?? []}
+    //             mode={'responsive'}
+    //             // mode={'scroll'}
+    //             onClick={(val: any) => {
+    //               console.log(val)
+    //             }}
+    //           />
+    //
+    //           {showColumnChoose && (
+    //             <ColumnsChoose
+    //               columns={resizableColumns}
+    //               setColumns={setColumns}
+    //             />
+    //           )}
+    //
+    //           <div />
+    //         </div>
+    //       )}
+    //
+    //
+    //     </Fragment>
+    //   )
+    // }}
+  }))));
+};
+var _default = exports.default = InternalTable;

package/lib/LoadingSpinner.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const ComponentSpinner: () => React.JSX.Element;
+export default ComponentSpinner;

package/lib/LoadingSpinner.js

@@ -0,0 +1,29 @@
+"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 _styledComponents = _interopRequireDefault(require("styled-components"));
+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 SpinnerStyle = _styledComponents.default.div.withConfig({
+  displayName: "SpinnerStyle",
+  componentId: "es-grid-template__sc-180f2ml-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, {
+    className: "fallback-spinner"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "loading"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "effect-1 effects"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "effect-2 effects"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "effect-3 effects"
+  })));
+};
+var _default = exports.default = ComponentSpinner;

package/lib/TableGrid.d.ts

@@ -0,0 +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;
+};
+declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
+export default TableGrid;