es-grid-template 1.5.17 → 1.6.0

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

@@ -1,4 +1,4 @@
-import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateRangeFormat, getDateString, getFormat, getTypeFilter, isColor, isEmpty } from "../utils";
+import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateRangeFormat, getDateString, getEditType, getFormat, getTypeFilter, isColor, isEmpty } from "../utils";
 import { numericFormatter } from "react-numeric-component";
 import dayjs from "dayjs";
 import moment from "moment/moment";
@@ -8,6 +8,7 @@ import CheckboxFilter from "../../CheckboxFilter";
 import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
 import NumberRange from "../../number-range";
 import NumberInput from "../../number";
+import ControlCheckbox from "../content/ControlCheckbox";
 // import {Typography} from "antd";
 // const {RangePicker} = DatePicker
 
@@ -55,7 +56,67 @@ export const flatColumns2 = columns => {
     }];
   }, []);
 };
-export const getValueCell = (column, value, record, format) => {
+export const getValueCell = (column, value, record, rowIndex, colIndex, format) => {
+  switch (column?.type) {
+    case 'number':
+      const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+      const cellFormat = getFormat(colFormat, format);
+      const thousandSeparator = cellFormat?.thousandSeparator;
+      const decimalSeparator = cellFormat?.decimalSeparator;
+      const dec = cellFormat?.decimalScale;
+
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
+
+      const tmpval = typeof value === 'string' ? Number(value) : value;
+
+      // console.log('aaaaa', Number(value))
+
+      const numericFormatProps = {
+        thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+        decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+        allowNegative: cellFormat?.allowNegative ?? true,
+        prefix: cellFormat?.prefix,
+        suffix: cellFormat?.suffix,
+        decimalScale: dec,
+        fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+      };
+
+      // if ( typeof value === "string") {
+      //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
+      //
+      //   console.log('ttt', ttt)
+      // }
+
+      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
+
+      return !isEmpty(contentNumber) ? numericFormatter(contentNumber, numericFormatProps) : '';
+    case 'date':
+      return value ? dayjs(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
+    case 'time':
+      return value ? value : '';
+    case 'year':
+      const year = value ? moment(value).format('yyyy') : '';
+      return /*#__PURE__*/React.createElement(Fragment, null, year);
+    case 'datetime':
+      return value ? moment(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+    case 'boolean':
+      return value ? 'true' : 'false';
+    case 'color':
+      return value;
+    case 'checkbox':
+      return typeof value === 'boolean' ? value ? 'true' : 'false' : value ? '1' : '0';
+    case 'file':
+      const nameFile = typeof value === 'object' && !Array.isArray(value) ? value.name : Array.isArray(value) ? value.map(it => typeof it === 'object' ? it.name : it).filter(Boolean).join(", ") : '';
+      return value ? nameFile : '';
+    default:
+      if (Array.isArray(value)) {
+        return value.join(', ');
+      }
+      return value;
+  }
+};
+export const renderValueCell = (column, value, record, rowIndex, colIndex, format, editAble) => {
   switch (column?.type) {
     case 'number':
       const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
@@ -112,10 +173,21 @@ export const getValueCell = (column, value, record, format) => {
         }
       }));
     case 'checkbox':
-      return /*#__PURE__*/React.createElement(Input, {
+      // return (
+      //   <Checkbox
+      //     checked={!!value}
+      //
+      //   />
+      // )
+
+      return /*#__PURE__*/React.createElement(ControlCheckbox, {
+        column: column,
+        record: record,
+        rowIndex: rowIndex,
+        colIndex: colIndex,
         checked: !!value,
-        readOnly: true,
-        type: "checkbox"
+        checkValue: value,
+        editAble: editAble
       });
     case 'file':
       const nameFile = typeof value === 'object' && !Array.isArray(value) ? value.name : Array.isArray(value) ? value.map(it => typeof it === 'object' ? it.name : it).filter(Boolean).join(", ") : '';
@@ -127,15 +199,19 @@ export const getValueCell = (column, value, record, format) => {
       return value;
   }
 };
-export const renderContent = (column, value, record, index, format) => {
+export const renderContent = (column, value, record, index, colIndex, editAble, format, onClick) => {
   const cellValue = value instanceof Date ? getDateString(column, value) : value;
-  const content = getValueCell(column, cellValue, record, format);
+  const content = renderValueCell(column, cellValue, record, index, colIndex, format, editAble);
+  const editType = getEditType(column, record);
   return /*#__PURE__*/React.createElement(Fragment, null, column?.template ? typeof column.template === "function" ? column.template({
     value,
     index,
     rowData: record,
     field: column.field
-  }) : column.template : content);
+  }) : column.template : content, (editType === 'select' || editType === 'selectTable') && /*#__PURE__*/React.createElement("span", {
+    className: 'caret-down',
+    onClick: onClick
+  }));
 };
 export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t, format, dateRangeLocale) => {
   const cellFormat = column.format ? typeof column.format === 'function' ? column.format({}) : column.format : format;

package/es/grid-component/hooks/content/ControlCheckbox.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ColumnTable } from "../../type";
+type Props = {
+    column: ColumnTable;
+    record?: any;
+    rowIndex: number;
+    colIndex: number;
+    checkValue: any;
+    checked: boolean;
+    editAble?: boolean;
+};
+declare const ControlCheckbox: (props: Props) => React.JSX.Element;
+export default ControlCheckbox;

package/es/grid-component/hooks/content/ControlCheckbox.js

@@ -0,0 +1,87 @@
+import React, { useContext } from "react";
+import { isDisable, isEditable, parseBooleanToValue } from "../utils";
+import { Checkbox } from "rc-master-ui";
+import { TableContext } from "../../useContext";
+const ControlCheckbox = props => {
+  const {
+    column,
+    record,
+    rowIndex,
+    colIndex,
+    checkValue,
+    editAble,
+    checked
+  } = props;
+  const {
+    handleCellChange,
+    getRowKey
+  } = useContext(TableContext);
+
+  // const isEdit  =  getEditType(column, record)
+
+  const isEdit = React.useMemo(() => {
+    return isEditable(column, record);
+  }, [column, record]);
+
+  // const [isHover, setIsHover] = useState(false)
+
+  const inputNode = value => {
+    return /*#__PURE__*/React.createElement(Checkbox, {
+      checked: Boolean(value),
+      defaultChecked: Boolean(checked)
+      // style={{ textAlign: column.align ?? 'left' }}
+      ,
+      onChange: val => {
+        const newVal = typeof checkValue === "number" ? parseBooleanToValue(val.target.checked, typeof value) : val.target.checked;
+
+        // onChange(newVal)
+
+        const key = getRowKey?.(record, rowIndex);
+        // const formState = getValues()
+
+        handleCellChange?.({
+          key: key,
+          // @ts-ignore
+          record: {
+            ...record,
+            [column.field]: newVal
+          },
+          option: value,
+          prevState: value,
+          newState: newVal,
+          field: column.field ?? column.dataIndex,
+          indexCol: colIndex,
+          indexRow: rowIndex,
+          type: 'blur'
+        });
+      },
+      disabled: isDisable(column, record) ?? false
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    // onMouseEnter={() => {
+    //   setIsHover(true)
+    // }}
+    //
+    // onMouseLeave={() => {
+    //   setIsHover(false)
+    // }}
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: column.align ?? 'center',
+      paddingInline: 5,
+      height: '100%',
+      width: '100%'
+    }
+  }, editAble && isEdit !== false ? inputNode(checkValue) : /*#__PURE__*/React.createElement(Checkbox, {
+    checked: checked,
+    onChange: e => {
+      e.preventDefault();
+    },
+    style: {
+      textAlign: column.align ?? 'left'
+    }
+  }));
+};
+export default ControlCheckbox;

package/es/grid-component/hooks/content/HeaderContent.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ColumnTable } from "../../type";
 import type { IWrapSettings } from "../../type";
-type Props = {
+type Props = React.HTMLAttributes<HTMLDivElement> & {
     t?: any;
     id?: string;
     content?: string;

package/es/grid-component/hooks/content/HeaderContent.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment } from "react";
 import classnames from "classnames";
 import { getTemplate } from "../utils";
@@ -10,7 +11,10 @@ const HeaderContent = props => {
   const {
     t,
     id,
-    wrapSettings
+    wrapSettings,
+    column,
+    onCopy,
+    ...rest
   } = props;
   const {
     headerTooltip,
@@ -26,14 +30,15 @@ const HeaderContent = props => {
   const tooltip = React.useMemo(() => {
     return t ? t?.(headerTooltip ?? columnGroupText ?? headerText) : headerTooltip ?? columnGroupText ?? headerText;
   }, [columnGroupText, headerText, headerTooltip, t]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(HeaderStyle, {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(HeaderStyle, _extends({}, rest, {
     className: classnames('', {
       'ui-rc-table-cell-ellipsis': ellipsis !== false && headerTextWrap !== true,
       'header-text-wrap': headerTextWrap ?? (wrapSettings?.wrapMode === 'Header' || wrapSettings?.wrapMode === 'Both')
     }),
     "data-tooltip-id": `${id}-tooltip-header`,
     "data-tooltip-content": tooltip,
-    "data-tooltip-offset": 16
-  }, headerTemplate ? getTemplate(headerTemplate) : t ? t(text) : text));
+    "data-tooltip-offset": 16,
+    onCopy: onCopy
+  }), headerTemplate ? getTemplate(headerTemplate, column) : t ? t(text) : text));
 };
 export default HeaderContent;

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

@@ -287,21 +287,21 @@ const useColumns = config => {
             const cellFormat = getFormat(colFormat, format);
             if (groupSetting && groupSetting.hiddenColumnGroup === false) {
               if (record.children) {
-                return renderContent(col, value, record, rowIndex, cellFormat);
+                return renderContent(col, value, record, rowIndex, colIndex, false, cellFormat);
               }
               if (groupColumns?.includes(col.field)) {
                 return '';
               }
-              return renderContent(col, value, record, rowIndex, cellFormat);
+              return renderContent(col, value, record, rowIndex, colIndex, false, cellFormat);
             }
             if (col.field === firstNonGroupColumn?.field && record.children) {
               const currentGroupColumn = flatColumns2(cols).find(it => it.field === record.field);
               if (currentGroupColumn?.template) {
-                return renderContent(currentGroupColumn, record[record.field], record, rowIndex, cellFormat);
+                return renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat);
               }
-              return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, cellFormat));
+              return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
             }
-            return renderContent(col, value, record, rowIndex, cellFormat);
+            return renderContent(col, value, record, rowIndex, colIndex, false, cellFormat);
           },
           hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : transformedColumn.hidden
         };

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

@@ -11,6 +11,7 @@ export declare const sumDataByField: (data: any[], field: string) => any;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const isEmpty: (d: any) => boolean;
+export declare const removeVietnameseTones: (str: any) => any;
 export declare const isNullOrUndefined: (d: any) => boolean;
 export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
 export declare const convertDateToDayjs: (date: Date | undefined, format?: string) => dayjs.Dayjs;
@@ -48,7 +49,7 @@ export declare const isDisable: <T>(column: ColumnTable<T>, rowData?: any) => bo
 export declare const checkFieldKey: (key: string | undefined) => string;
 export declare const convertLabelToTitle: (data: any[]) => any[];
 export declare const convertArrayWithIndent: (inputArray: any[], parentIndent?: number) => any[];
-export declare const getTemplate: (template: any) => React.ReactNode | React.ReactElement;
+export declare const getTemplate: (template: any, column?: ColumnTable) => React.ReactNode | React.ReactElement;
 export declare const totalFixedWidth: <T>(columns: ColumnsTable<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => number;
 export declare const isObjEmpty: (obj: any) => boolean;
 export declare const getColumnsVisible: <T>(columns: ColumnsTable<T>, index: number) => ColumnTable<T>[];
@@ -58,6 +59,7 @@ export declare const genPresets: (presets?: import("@ant-design/colors").Palette
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];
 export declare const flattenArray: <RecordType extends AnyObject = AnyObject>(arr: any[]) => RecordType[];
 export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: string, data?: RecordType[]) => RecordType[];
+export declare const unFlattenData: <RecordType extends AnyObject = AnyObject>(data: RecordType[]) => RecordType[];
 export declare const countItemsBeforeIndex: (array: any[], index: number) => number;
 export declare const getRowNumber: (array: any[], rowKey: any, key: any) => number;
 export declare const getDefaultValue: (defaultValue: any) => AnyObject;
@@ -72,7 +74,21 @@ export declare const getFirstSelectCell: (selectCells: any) => {
     col: number;
 };
 export declare const getRowsPasteIndex: (pasteRows: any) => number[];
-export declare function addRows8(arr: any, n: number): {
+export declare function addRowsDownWithCtrl(arr: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
+export declare function addRowsDown(arr: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
+export declare function addRowsUpWithCtrl(array: any, n: number): {
     combined: any;
     addedRows: any[];
 } | {
@@ -101,7 +117,7 @@ export declare const filterDataByColumns2: (data: any[], queries: any) => any[];
 export declare const removeFieldRecursive: (data: any[], field: string) => any[];
 export declare const filterDataByColumns3: (data: any[], queries: any[]) => any[];
 export declare const shouldInclude: (item: any, queries: any[]) => any;
-export declare function filterDataByColumns4(data: any[], queries: any[]): any[];
+export declare function filterDataByColumns4(data: any[], queries: any[], keysFilter: string[] | undefined): any[];
 export declare function isDateString(str: any): boolean;
 export declare function compareDates(date1: any, date2: any): boolean;
 export declare function compareDate(itemValue: any, value: any): boolean;
@@ -149,3 +165,12 @@ export declare const detectSeparators: (str: string) => {
     thousandSeparator: string;
     decimalSeparator: string;
 };
+export declare const convertFilters: (filters: any[]) => any[];
+export declare const getAllRowKey: (data: any[]) => any[];
+export declare function updateDataByFilter(tree: any[], filter: any[]): any[];
+export declare function updateOrInsert(dataArray: any[], dataFilter: any[]): any[];
+export declare function mergeWithFilter(dataArray: any[], dataFilter: any[]): any[];
+export declare function mergeWithFilter2(dataArray: any[], dataFilter: any[]): any[];
+export declare const removeInvisibleColumns: (columns: any[]) => any[];
+export declare const sumByField: (data: any[], field: string) => number;
+export declare const customFilterOption: (input: string, option: any) => any;