es-grid-template 0.0.8 → 0.0.13

package/es/InternalTable.js

@@ -1,185 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useEffect, useState } from 'react';
-import { Table } from "rc-master-ui";
-import dayjs from "dayjs";
-import 'dayjs/locale/es';
-import 'dayjs/locale/vi';
-import "./styles.scss";
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import styled from "styled-components";
-import TableGrid from "./TableGrid";
-import { Resizable } from "react-resizable";
-// import {ColumnsChoose} from "./ColumnsChoose";
-
-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-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] = useState([]);
-  useEffect(() => {
-    const rs = columns ? [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.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.useMemo(() => {
-    return addResizeHandlers(tmpColumns);
-  }, [addResizeHandlers, tmpColumns]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
-    heightTable: props.style?.minHeight,
-    style: {
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, 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>
-    //   )
-    // }}
-  }))));
-};
-export default InternalTable;