es-grid-template 0.0.8 → 0.1.0

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

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

package/es/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/es/grid-component/GridStyle.js

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+export const GridStyle = styled.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/es/grid-component/InternalTable.js

@@ -0,0 +1,284 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { Select, Table } from "rc-master-ui";
+import { Button, Space } from "antd";
+import { SearchOutlined } from "@ant-design/icons";
+import styled from "styled-components";
+import { Resizable } from "react-resizable";
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { numberOperator, translateOption, updateArrayByKey } from "./hooks";
+import { FilterFill } from "becoxy-icons";
+import { renderFilter } from "./hooks/useColumns";
+import dayjs from "dayjs";
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
+import en from 'rc-master-ui/es/date-picker/locale/en_US';
+import vi from 'rc-master-ui/es/date-picker/locale/vi_VN';
+import GridEdit from "./table/GridEdit";
+import Grid from "./table/Grid";
+import "./styles.scss";
+dayjs.extend(customParseFormat);
+const ResizableTitle = props => {
+  const {
+    onResize,
+    width,
+    ...restProps
+  } = props;
+  if (!width) {
+    return /*#__PURE__*/React.createElement("th", restProps);
+  }
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement(Resizable, {
+      width: width,
+      height: 0,
+      handle: /*#__PURE__*/React.createElement("span", {
+        className: "react-resizable-handle",
+        onClick: e => {
+          e.stopPropagation();
+        }
+      }),
+      onResize: onResize,
+      draggableOpts: {
+        enableUserSelectHack: false
+      }
+    }, /*#__PURE__*/React.createElement("th", restProps))
+  );
+};
+const GridStyle = styled.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 : vi;
+  const buddhistLocale = {
+    ...locale,
+    lang: {
+      ...locale.lang
+    }
+  };
+  const tableRef = useRef(null);
+  const [data, setData] = useState(dataSource);
+  const [columns, setColumns] = useState([]);
+  const [isManualUpdate, setIsManualUpdate] = useState(false);
+  const [dataSourceFilter, setDataSourceFilter] = useState(propDataSourceFilter ?? []);
+  useEffect(() => {
+    const rs = propsColumns ? [Table.SELECTION_COLUMN, ...propsColumns] : [];
+    setColumns(rs);
+  }, [propsColumns]);
+  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 = updateArrayByKey(dataSourceFilter, {
+        key,
+        data: filterDataCallback
+      }, 'key');
+      setDataSourceFilter(newData);
+    } else {
+      const newData = [...dataSourceFilter, {
+        key,
+        data: filterDataCallback
+      }];
+      setDataSourceFilter(newData);
+    }
+  };
+  const getColumnSearchProps = useCallback(column => ({
+    filterDropdown: ({
+      setSelectedKeys,
+      selectedKeys,
+      confirm,
+      close,
+      setOperatorKey,
+      operatorKey,
+      visible,
+      searchValue,
+      setSearchValue
+    }) => {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: 8,
+          minWidth: 275
+        },
+        onKeyDown: e => e.stopPropagation()
+      }, (column?.showOperator !== false || column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange') && /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(Select, {
+        options: translateOption(numberOperator, t),
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: operatorKey,
+        onChange: val => {
+          setOperatorKey(val);
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginBottom: 8
+        }
+      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale)), /*#__PURE__*/React.createElement(Space, {
+        style: {
+          justifyContent: 'end',
+          width: '100%'
+        }
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        onClick: () => {
+          confirm({
+            closeDropdown: false
+          });
+          handleSearch(selectedKeys, confirm);
+        },
+        icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
+        size: "small",
+        style: {
+          width: 90
+        }
+      }, "Filter"), /*#__PURE__*/React.createElement(Button, {
+        type: "link",
+        size: "small",
+        onClick: () => {
+          close();
+        }
+      }, "close")));
+    },
+    filterIcon: filtered => /*#__PURE__*/React.createElement(FilterFill, {
+      fontSize: 12,
+      onClick: () => {
+        onFilterClick?.(column, onFilterCallback);
+      },
+      style: {
+        color: filtered ? '#283046' : undefined
+      }
+    }),
+    filterDropdownProps: {
+      onOpenChange(open) {
+        if (open) {
+          // setTimeout(() => searchInput.current?.select(), 100)
+        }
+      }
+    }
+  }), [onFilterCallback, onFilterClick, 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.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.useMemo(() => {
+    return transformColumns(columns);
+  }, [transformColumns, columns]);
+  const TableComponent = editAble ? GridEdit : Grid;
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
+    heightTable: props.style?.minHeight,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
+    tableRef: tableRef,
+    dataSource: data,
+    components: {
+      header: {
+        cell: allowResizing ? ResizableTitle : undefined
+      }
+    },
+    columns: mergedColumns,
+    showSorterTooltip: {
+      target: 'sorter-icon'
+    }
+  }))));
+};
+export default InternalTable;

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from "styled-components";
 const SpinnerStyle = styled.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/es/grid-component/Message/Message.d.ts

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

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

@@ -0,0 +1,16 @@
+import React, { Fragment } from "react";
+import toast from "react-hot-toast";
+const Message = param => {
+  return toast.success( /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "toastify-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "title-wrapper"
+  }, /*#__PURE__*/React.createElement("h6", {
+    className: "toast-title"
+  }, param))), /*#__PURE__*/React.createElement("div", {
+    className: "toastify-body"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "list-unstyled mb-0"
+  }, /*#__PURE__*/React.createElement("li", null)))));
+};
+export default Message;

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

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

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

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

package/{lib → es/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;