es-grid-template 0.1.0 → 0.1.2-1

package/es/grid-component/GridStyle.js

@@ -2,4 +2,4 @@ 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);
+})([".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;}}.react-resizable{position:relative;background-clip:padding-box;}.react-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], 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

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import React, { 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";
@@ -14,9 +13,9 @@ 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 "./styles.scss";
 import GridEdit from "./table/GridEdit";
 import Grid from "./table/Grid";
-import "./styles.scss";
 dayjs.extend(customParseFormat);
 const ResizableTitle = props => {
   const {
@@ -46,20 +45,18 @@ const ResizableTitle = props => {
     }, /*#__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,
+    allowResizing,
     dataSourceFilter: propDataSourceFilter,
     onFilterClick,
     editAble,
+    rowKey,
+    onDataChange,
     ...rest
   } = props;
   const locale = lang && lang === 'en' ? en : vi;
@@ -84,6 +81,15 @@ const InternalTable = props => {
     }
     setIsManualUpdate(false);
   }, [dataSource]);
+
+  // ============================ RowKey ============================
+  const getRowKey = React.useMemo(() => {
+    if (typeof rowKey === 'function') {
+      return rowKey;
+    }
+    // @ts-ignore
+    return record => record?.[rowKey];
+  }, [rowKey]);
   const handleSearch = (selectedKeys, confirm) => {
     confirm();
   };
@@ -224,32 +230,40 @@ const InternalTable = props => {
     return cols.map((col, index) => {
       const currentPath = [...parentPath, index];
       // @ts-ignore
-      if (!col?.dataIndex && !col.key) {
+      if (!col?.dataIndex && !col.key && !col.field) {
         return col;
       }
+      const transformedColumn = {
+        ...col,
+        dataIndex: col.field ?? col.dataIndex,
+        title: t ? t(col.headerText ?? col.title) : col.headerText ?? col.title,
+        ellipsis: col.ellipsis !== false,
+        align: col.textAlign ?? col.align,
+        fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+      };
       if (col.children) {
         return {
-          ...col,
-          title: col.headerText ?? col.title,
-          ellipsis: col.ellipsis !== false,
+          ...transformedColumn,
           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
+          ...transformedColumn
         };
       }
       return {
         ...getColumnSearchProps(col),
-        ...col,
-        title: col.headerText ?? col.title,
-        ellipsis: col.ellipsis !== false,
+        ...transformedColumn,
+        // dataIndex: col.field ?? col.dataIndex,
+        // key: col.field ?? col.dataIndex ?? col.key,
+        // title: col.headerText ?? col.title,
+        // ellipsis: col.ellipsis !== false,
+        // align: col.textAlign ?? col.align,
+        // fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed,
         onFilter: (value, record) => {
           // @ts-ignore
-          return record[column?.dataIndex];
+          return record[col.field ?? col.dataIndex];
         },
         onHeaderCell: () => ({
           width: col.width,
@@ -261,13 +275,17 @@ const InternalTable = props => {
   const mergedColumns = React.useMemo(() => {
     return transformColumns(columns);
   }, [transformColumns, columns]);
+
+  // console.log('mergedColumns', mergedColumns)
+
+  const triggerChangeColumns = () => {};
+  const triggerChangeData = newData => {
+    setIsManualUpdate(true);
+    setData(newData);
+    onDataChange?.(newData);
+  };
   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, {
+  return /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
     tableRef: tableRef,
     dataSource: data,
     components: {
@@ -275,10 +293,16 @@ const InternalTable = props => {
         cell: allowResizing ? ResizableTitle : undefined
       }
     },
-    columns: mergedColumns,
+    columns: mergedColumns
+    // columns={columns}
+    ,
     showSorterTooltip: {
       target: 'sorter-icon'
-    }
-  }))));
+    },
+    triggerChangeColumns: triggerChangeColumns,
+    triggerChangeData: triggerChangeData,
+    rowKey: rowKey,
+    getRowKey: getRowKey
+  }));
 };
 export default InternalTable;

package/es/grid-component/TableGrid.d.ts

@@ -3,7 +3,8 @@ import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import type { GridTableProps } from "./type";
 type GridProps<T> = GridTableProps<T> & {
-    setColumns?: any;
+    triggerChangeColumns?: () => void;
+    triggerChangeData?: () => void;
     tableRef: any;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;

package/es/grid-component/TableGrid.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useLayoutEffect, useRef } from 'react';
 import { createStyles } from 'antd-style';
 import { numericFormatter } from "react-numeric-component";
 import { Table, Toolbar } from "rc-master-ui";
@@ -15,6 +15,9 @@ import { flatColumns } from "./hooks/useColumns";
 import Pagination from "rc-master-ui/es/pagination";
 import ComponentSpinner from "./LoadingSpinner";
 import { ColumnsChoose } from "./ColumnsChoose";
+// import {useMergedState} from "rc-util";
+// import useMergedState from 'rc-util/lib/hooks/useMergedState';
+
 const convertFilters = filters => {
   const result = [];
   filters.forEach(({
@@ -63,7 +66,6 @@ const convertFilters = filters => {
 const useStyle = createStyles(({
   css
 }) => {
-  // const { antCls } = token
   const antCls = 'ui-rc';
   return {
     customTable: css`
@@ -82,6 +84,8 @@ const useStyle = createStyles(({
 });
 // type OnChange = NonNullable<TableProps<any>['onChange']>;
 
+// const EMPTY_LIST: React.Key[] = [];
+
 const TableGrid = props => {
   const {
     columns,
@@ -109,20 +113,31 @@ const TableGrid = props => {
     onFilterClick,
     dataSourceFilter: propDataSourceFilter,
     loading,
-    setColumns,
-    // dataSourceFilter,
+    triggerChangeColumns,
     ...rest
   } = props;
   const {
     styles
   } = useStyle();
+  const {
+    mode,
+    type,
+    checkboxOnly,
+    hideSelectAll,
+    columnWidth,
+    selectedRowKeys
+    // defaultSelectedRowKeys
+  } = selectionSettings || {};
   const clickRef = useRef(null);
   const menuRef = useRef(null);
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
-  const defaultSelected = useMemo(() => {
-    return selectionSettings?.defaultSelectedRowKeys ?? [];
-  }, [selectionSettings?.defaultSelectedRowKeys]);
+
+  // const defaultSelected = useMemo(() => {
+  //   return defaultSelectedRowKeys ?? []
+  //
+  // }, [defaultSelectedRowKeys])
+
   const [menuVisible, setMenuVisible] = React.useState(false);
   const [selectedRowData, setSelectedRowData] = React.useState(null);
   const [position, setPosition] = React.useState({
@@ -131,7 +146,25 @@ const TableGrid = props => {
     viewportWidth,
     viewportHeight
   });
-  const [selectedRowKeys, setSelectedRowKeys] = useState(defaultSelected);
+
+  // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(defaultSelected);
+
+  // ========================= Keys =========================
+  // const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
+  //   selectedRowKeys || defaultSelectedRowKeys || EMPTY_LIST,
+  //   {
+  //     value: selectedRowKeys,
+  //   },
+  // );
+
+  // Reset if rowSelection reset
+
+  // React.useEffect(() => {
+  //   if (!selectionSettings) {
+  //     setMergedSelectedKeys(EMPTY_LIST);
+  //   }
+  // }, [!!selectionSettings]);
+
   const contextMenuItems = React.useMemo(() => {
     if (typeof contextMenuHidden === "function" && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
@@ -199,7 +232,17 @@ const TableGrid = props => {
       });
     }
   };
-  const handleRowClick = () => {
+  const handleRowClick = () => () => {
+    // console.log(data)
+    // console.log(index)
+
+    // const key = getRowKey(record, index);
+
+    // console.log('key', key)
+
+    if (checkboxOnly !== true) {
+      if (type === 'single') {}
+    }
     if (clickRef.current) return;
 
     // @ts-ignore
@@ -221,7 +264,7 @@ const TableGrid = props => {
   };
   const onSelectChange = (keys, selectedRows, info, selectedRow) => {
     if (info.type === 'all') {
-      // setSelectedRowKeys(keys)
+      // setMergedSelectedKeys(keys)
       rowSelected?.({
         selected: selectedRows,
         type: 'rowSelected',
@@ -229,7 +272,7 @@ const TableGrid = props => {
       });
     } else {
       if (selectionSettings?.type === 'multiple') {
-        // setSelectedRowKeys(keys)
+        // setMergedSelectedKeys(keys)
         rowSelected?.({
           selected: selectedRows,
           type: 'rowSelected',
@@ -237,7 +280,8 @@ const TableGrid = props => {
         });
       } else {
         // @ts-ignore
-        setSelectedRowKeys([selectedRow[rowKey]]);
+        // setMergedSelectedKeys([selectedRow[rowKey]])
+
         rowSelected?.({
           selected: [selectedRow],
           type: 'rowSelected',
@@ -293,19 +337,21 @@ const TableGrid = props => {
     onRow: (data, index) => {
       return {
         onDoubleClick: handleRowDoubleClick(data, index),
-        onClick: handleRowClick,
+        // onClick: handleRowClick,
+        onClick: handleRowClick(),
         onContextMenu: onContextMenu(data)
       };
     },
     rowSelection: {
-      type: selectionSettings?.mode === 'checkbox' || selectionSettings?.type === 'multiple' ? 'checkbox' : "radio",
-      columnWidth: !selectionSettings?.mode ? 0.0000001 : selectionSettings?.columnWidth ?? 50,
+      ...selectionSettings,
+      type: selectionSettings?.mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
+      columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
       onChange: onSelectChange,
-      selectedRowKeys: selectionSettings?.mode === 'checkbox' && selectionSettings?.type === 'single' ? selectedRowKeys : undefined,
+      selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
       defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
       ...rowSelection,
-      hideSelectAll: !selectionSettings?.type || selectionSettings?.type === 'single' || selectionSettings?.mode === 'radio' ? true : selectionSettings?.hideSelectAll ?? selectionSettings?.type !== 'multiple'
+      hideSelectAll: !type || type === 'single' || selectionSettings?.mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     },
     onScroll: () => {
       setMenuVisible(false);
@@ -360,7 +406,7 @@ const TableGrid = props => {
         }
       }), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
         columns: columns,
-        setColumns: setColumns
+        triggerChangeColumns: triggerChangeColumns
       }), /*#__PURE__*/React.createElement("div", null)));
     }
   }, rest)), pagination && pagination.onChange && /*#__PURE__*/React.createElement(Pagination

package/es/grid-component/async-select/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { BaseOptionType, DefaultOptionType } from "rc-select/lib/Select";
+import type { SelectProps } from "rc-master-ui/es/select";
+export interface DebounceSelectProps<OptionType extends BaseOptionType = DefaultOptionType> extends SelectProps {
+    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void) => void;
+    debounceTimeout?: number;
+    defaultOptions?: OptionType[];
+}
+export declare function AsyncSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;

package/es/grid-component/async-select/index.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { Select } from "rc-master-ui";
+export function AsyncSelect({
+  loadOptions,
+  debounceTimeout = 500,
+  defaultOptions,
+  ...props
+}) {
+  const [options, setOptions] = useState(defaultOptions ?? []);
+  const debounceFetcher = useMemo(() => {
+    const fetchOptions = value => {
+      if (value.trim().length === 0) {
+        setOptions(defaultOptions ?? []);
+        return;
+      }
+      if (loadOptions) {
+        loadOptions(value, newOptions => {
+          setOptions(newOptions);
+        });
+      }
+    };
+    return debounce(fetchOptions, debounceTimeout);
+  }, [loadOptions, debounceTimeout]);
+  useEffect(() => {
+    setOptions(defaultOptions ?? []);
+  }, [defaultOptions]);
+  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    filterOption: loadOptions ? false : props?.filterOption,
+    onSearch: debounceFetcher,
+    onSelect: () => setOptions(defaultOptions ?? []),
+    options: options
+  }));
+}

package/es/grid-component/hooks/constant.d.ts

@@ -60,3 +60,13 @@ declare const SortOrder: {
     descend: string;
 };
 export default SortOrder;
+export declare const valueToBoolean: {
+    true: boolean;
+    false: boolean;
+    1: boolean;
+    0: boolean;
+};
+export declare const booleanToValue: {
+    true: number;
+    false: number;
+};

package/es/grid-component/hooks/constant.js

@@ -226,4 +226,14 @@ const SortOrder = {
    */
   descend: 'Descending'
 };
-export default SortOrder;
+export default SortOrder;
+export const valueToBoolean = {
+  true: true,
+  false: false,
+  1: true,
+  0: false
+};
+export const booleanToValue = {
+  true: 1,
+  false: 0
+};

package/es/grid-component/hooks/useColumns/index.js

@@ -7,6 +7,7 @@ import moment from "moment/moment";
 import React, { Fragment } from "react";
 import { DatePicker, Input, Select } from "rc-master-ui";
 import CheckboxFilter from "../../CheckboxFilter";
+// import {ColorPicker} from "antd";
 const {
   RangePicker
 } = DatePicker;
@@ -62,13 +63,15 @@ export const getValueCell = (column, value, format) => {
     case 'boolean':
       return value ? 'true' : 'false';
     case 'color':
-      return /*#__PURE__*/React.createElement(Fragment, null, isColor(value) ? /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: 'w-100 h-100',
         style: {
-          backgroundColor: value,
-          border: '1px solid #f0f0f0'
+          backgroundColor: isColor(value) ? value : '#fff',
+          border: '1px solid #f0f0f0',
+          height: '100%',
+          minHeight: 20
         }
-      }) : '');
+      }));
     case 'checkbox':
       return /*#__PURE__*/React.createElement(Input, {
         checked: !!content,

package/es/grid-component/hooks/utils.d.ts

@@ -33,3 +33,5 @@ export declare const totalFixedWidth: <T>(columns: ColumnsType<T>, type: 'left'
 export declare const isObjEmpty: (obj: any) => boolean;
 export declare const getColumnsVisible: <T>(columns: ColumnsType<T>, index: number) => import("../type").ColumnType<T>[];
 export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], rows: Record_1[], key: keyof Record_1) => Record_1[];
+export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
+export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];

package/es/grid-component/hooks/utils.js

@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 import moment from "moment/moment";
 import { v4 as uuidv4 } from 'uuid';
+import { presetPalettes } from "@ant-design/colors";
 export const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
@@ -317,4 +318,14 @@ export const updateData = (initData, rows, key) => {
   // Thêm các phần tử mới chưa có trong initialData
   const newRows = rows.filter(row => !initData.some(item => item[key] === row[key]));
   return [...updatedData, ...newRows];
+};
+export const parseBooleanToValue = (value, type) => {
+  return type === 'boolean' ? value : Number(value);
+};
+export const genPresets = (presets = presetPalettes) => {
+  return Object.entries(presets).map(([label, colors]) => ({
+    label,
+    colors,
+    key: label
+  }));
 };

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

@@ -1,2 +1,5 @@
 import InternalTable from './InternalTable';
+import type { ColumnsTable, TableProps, ColumnTable, CommandItem, ContextMenuItem } from './type';
+import type { ToolbarItem } from "rc-master-ui/es/toolbar";
+export type { ColumnsTable, TableProps, ColumnTable, ToolbarItem, CommandItem, ContextMenuItem };
 export default InternalTable;