es-grid-template 0.0.7 → 0.0.13

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

@@ -0,0 +1,435 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flatColumns = flatColumns;
+exports.renderFilter = exports.renderContent = exports.getValueCell = void 0;
+var _utils = require("../utils");
+var _reactNumericComponent = require("react-numeric-component");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _moment = _interopRequireDefault(require("moment/moment"));
+var _react = _interopRequireWildcard(require("react"));
+var _rcMasterUi = require("rc-master-ui");
+var _CheckboxFilter = _interopRequireDefault(require("../../CheckboxFilter"));
+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 * as React from 'react'
+
+const {
+  RangePicker
+} = _rcMasterUi.DatePicker;
+function flatColumns(columns, parentKey = 'key') {
+  // @ts-ignore
+  return columns.filter(column => column && typeof column === 'object').reduce((list, column, index) => {
+    const {
+      fixed
+    } = column;
+    // Convert `fixed='true'` to `fixed='left'` instead
+    const parsedFixed = fixed === true ? 'left' : fixed;
+    const mergedKey = `${parentKey}-${index}`;
+    const subColumns = column.children;
+    if (subColumns && subColumns.length > 0) {
+      return [...list, ...flatColumns(subColumns, mergedKey).map(subColum => ({
+        fixed: parsedFixed,
+        ...subColum
+      }))];
+    }
+    return [...list, {
+      key: mergedKey,
+      ...column,
+      fixed: parsedFixed
+    }];
+  }, []);
+}
+const getValueCell = (column, value, format) => {
+  switch (column?.type) {
+    case 'number':
+      const thousandSeparator = column?.format?.thousandSeparator ? column?.format?.thousandSeparator : format?.thousandSeparator;
+      const decimalSeparator = column?.format?.decimalSeparator ? column?.format?.decimalSeparator : format?.decimalSeparator;
+      const dec = column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale;
+      const content = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString() : '0';
+      const numericFormatProps = {
+        thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+        decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+        allowNegative: (column?.format?.allowNegative ? column?.format?.allowNegative : format?.allowNegative) ?? true,
+        prefix: column?.format?.prefix ? column?.format?.prefix : format?.prefix,
+        suffix: column?.format?.suffix ? column?.format?.suffix : format?.suffix,
+        decimalScale: column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale,
+        fixedDecimalScale: (column?.format?.fixedDecimalScale ? column?.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
+      };
+      return !(0, _utils.isEmpty)(content) ? (0, _reactNumericComponent.numericFormatter)(content, numericFormatProps) : '';
+    case 'date':
+      return value ? (0, _dayjs.default)(value).format(column?.format?.dateFormat ?? format?.dateFormat ?? 'DD/MM/YYYY') : '';
+    case 'time':
+      return value ? value : '';
+    case 'year':
+      const year = value ? (0, _moment.default)(value).format('yyyy') : '';
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, year);
+    case 'datetime':
+      return value ? (0, _moment.default)(value).format(column?.format?.datetimeFormat ?? format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+    case 'boolean':
+      return value ? 'true' : 'false';
+    case 'color':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, (0, _utils.isColor)(value) ? /*#__PURE__*/_react.default.createElement("div", {
+        className: 'w-100 h-100',
+        style: {
+          backgroundColor: value,
+          border: '1px solid #f0f0f0'
+        }
+      }) : '');
+    case 'checkbox':
+      return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Input, {
+        checked: !!content,
+        readOnly: true,
+        type: "checkbox"
+      });
+    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;
+  }
+};
+exports.getValueCell = getValueCell;
+const renderContent = (column, value, record, index, format) => {
+  const cellValue = value instanceof Date ? (0, _utils.getDateString)(column, value) : value;
+  const content = getValueCell(column, cellValue, format);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, column?.template ? typeof column.template === "function" ? column.template(value, record, index) : column.template : content);
+};
+exports.renderContent = renderContent;
+const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale) => {
+  const type = (0, _utils.getTypeFilter)(column);
+  const dateFormat = (0, _utils.getDatepickerFormat)(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
+  const dateRangeFormat = (0, _utils.getDatepickerFormat)(column?.type, column) ?? 'DD/MM/YYYY';
+  const find = dataSourceFilter?.find(it => it.key === column?.key);
+  const options = find ? find.data : [];
+  switch (type) {
+    case 'Number':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
+        value: selectedKeys[0]
+        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
+        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
+        // allowNegative={col.format && col.format.allowNegative === true}
+        ,
+        allowNegative: true,
+        customInput: _rcMasterUi.Input,
+        className: ' rounded-0 input-element form-control',
+        onValueChange: values => {
+          // onChangeValueFilter(type, values.floatValue)
+          setSelectedKeys(values.floatValue || values.floatValue === 0 ? [values.floatValue] : []);
+        }
+      }))));
+    case 'NumberRange':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1 d-flex flex-column gap-1'
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          marginBottom: 8
+        }
+      }, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
+        value: selectedKeys[0]
+        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
+        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
+        ,
+        allowNegative: true,
+        customInput: _rcMasterUi.Input,
+        className: ' rounded-0 input-element form-control'
+        // onValueChange={(values: any) => {
+        //   onChangeValueFilter(type, values.floatValue, 'min')
+        // }}
+        ,
+        placeholder: 'Min',
+        autoFocus: true
+      })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
+        value: selectedKeys[1]
+        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
+        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
+        ,
+        allowNegative: true,
+        customInput: _rcMasterUi.Input,
+        className: ' rounded-0 input-element form-control',
+        onValueChange: () => {
+          // onChangeValueFilter(type, values.floatValue, 'max')
+        },
+        placeholder: 'Max'
+      })))));
+    case 'Date':
+      const dateValue = selectedKeys[0] ? (0, _utils.convertDateToDayjs)(new Date(selectedKeys[0]), dateFormat) : null;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: dateValue,
+        defaultValue: dateValue,
+        placeholder: column?.placeholder,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString, dateFormat)).format() : null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      }))));
+    case 'DateRange':
+      const dateRangeValue = [selectedKeys[0] ? (0, _utils.convertDateToDayjs)(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? (0, _utils.convertDateToDayjs)(new Date(selectedKeys[1]), dateRangeFormat) : ''];
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(RangePicker, {
+        format: {
+          format: dateRangeFormat,
+          type: 'mask'
+        }
+        // defaultValue={dateRangeValue}
+        ,
+        value: dateRangeValue,
+        placeholder: ['Ngày bắt đầu', 'Ngày kết thúc'],
+        popupStyle: {
+          zIndex: 9999
+        },
+        onChange: (value, dateString) => {
+          const newDateRangeValue = dateString[0] ? [dateString[0] ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString[0], dateRangeFormat)).format() : '', dateString[1] ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString[1], dateRangeFormat)).format() : ''] : '';
+
+          // setSelectedKeys(newDateValue ? [newDateValue] : [])
+          setSelectedKeys(newDateRangeValue);
+        },
+        style: {
+          width: '100%'
+        }
+        // popupClassName={'adv-popup-container'}
+        // getPopupContainer={() => menuRef.current}
+      }))));
+    case 'Week':
+      const weekValue = !(0, _utils.isEmpty)(selectedKeys[0]) ? (0, _dayjs.default)(selectedKeys[0], dateFormat) : null;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        picker: 'week',
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: weekValue,
+        defaultValue: weekValue,
+        placeholder: column?.placeholder,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ?? null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      }))));
+    case 'Month':
+      const monthValue = !(0, _utils.isEmpty)(selectedKeys[0]) ? (0, _dayjs.default)(selectedKeys[0], dateFormat) : null;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        picker: 'month',
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: monthValue,
+        defaultValue: monthValue,
+        placeholder: column?.placeholder,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ?? null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      })));
+
+    // case 'Quarter':
+    //
+    //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
+    //
+    //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
+    //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
+    //
+    //   return (
+    //     <Fragment>
+    //       <div>
+    //
+    //
+    //         <div className={'mb-1'}>
+    //
+    //           <DatePicker
+    //             format={{
+    //               format: dateFormat,
+    //               type: 'mask'
+    //             }}
+    //             locale={buddhistLocale}
+    //             style={{width: '100%', height: '100%'}}
+    //             value={pickerValue}
+    //             defaultValue={pickerValue}
+    //             placeholder={column.placeholder}
+    //             onChange={(date, dateString) => {
+    //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+    //               setSelectedKeys(newDateValue ? [newDateValue] : [])
+    //
+    //             }}
+    //
+    //           />
+    //         </div>
+    //
+    //
+    //       </div>
+    //     </Fragment>
+    //   )
+    //
+    // case 'Year':
+    //
+    //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
+    //
+    //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
+    //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
+    //
+    //   return (
+    //     <Fragment>
+    //       <div>
+    //
+    //
+    //         <div className={'mb-1'}>
+    //
+    //           <DatePicker
+    //             format={{
+    //               format: dateFormat,
+    //               type: 'mask'
+    //             }}
+    //             locale={buddhistLocale}
+    //             style={{width: '100%', height: '100%'}}
+    //             value={pickerValue}
+    //             defaultValue={pickerValue}
+    //             placeholder={column.placeholder}
+    //             onChange={(date, dateString) => {
+    //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+    //               setSelectedKeys(newDateValue ? [newDateValue] : [])
+    //
+    //             }}
+    //
+    //           />
+    //         </div>
+    //
+    //
+    //       </div>
+    //     </Fragment>
+    //   )
+
+    case 'Dropdown':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select
+      // options={translateOption(numberOperator, t)}
+      , {
+        options: options,
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: selectedKeys[0],
+        onChange: val => {
+          // setOperatorKey(val)
+          setSelectedKeys(val ? [val] : []);
+        },
+        showSearch: true,
+        allowClear: true
+      }))));
+
+    // case 'DropTree':
+    //   return (
+    //     <Fragment>
+    //       <div>
+    //         {col.filterOption && col.filterOption.showOperator === false ? (
+    //           ''
+    //         ) : (
+    //           <div className={'mb-1'}>
+    //             <Select
+    //               options={translateOption(numberOperator, t)}
+    //               // options={t ? numberOperator.map((it: any) => ({...it, label: t(it.label)})) : numberOperator}
+    //
+    //               classNamePrefix='select'
+    //               className={`react-select`}
+    //               value={translateOption(numberOperator, t).find(
+    //                 ope => ope.value === (operator ? operator : getDefaultOperator(col))
+    //               )}
+    //               onChange={(val: any) => {
+    //                 setCurrentFilter((prevState: any) => ({ ...prevState, operator: val.value }))
+    //               }}
+    //             />
+    //           </div>
+    //         )}
+    //
+    //         <div className={'mb-1'}>
+    //           <Input
+    //             placeholder={'Nhập giá trị'}
+    //             value={value}
+    //             onChange={(val: any) => {
+    //               onChangeValueFilter(type, val.value)
+    //             }}
+    //           />
+    //         </div>
+    //
+    //         <div className={'d-flex justify-content-end'}>
+    //           <Button color='flat-primary' className={'me-1 be-button'} onClick={(e: any) => handleOnFilter(e)}>
+    //             {t ? t('Filter') : 'Filter'}
+    //           </Button>
+    //           <Button color='flat-secondary' className={'be-button'} onClick={(e: any) => handleClearFilter(e)}>
+    //             {t ? t('Delete') : 'Delete'}
+    //           </Button>
+    //         </div>
+    //       </div>
+    //     </Fragment>
+    //   )
+    //
+    case 'Checkbox':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CheckboxFilter.default
+      // column={column}
+      , {
+        locale: {
+          filterTitle: 'Chọn tất cả',
+          filterCheckall: 'Chọn tất cả'
+        },
+        selectedKeys: selectedKeys,
+        onSelect: setSelectedKeys,
+        options: options,
+        filterMultiple: true,
+        open: visible,
+        searchValue: searchValue,
+        setSearchValue: setSearchValue
+      })))));
+    case 'Text':
+    default:
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Input, {
+        placeholder: `Search ${column?.dataIndex}`,
+        value: selectedKeys[0],
+        onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
+        // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}
+        ,
+        onPressEnter: () => confirm(),
+        allowClear: true
+      }))));
+  }
+};
+exports.renderFilter = renderFilter;

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

@@ -0,0 +1,35 @@
+import type * as React from "react";
+import dayjs from "dayjs";
+import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
+import type { ColumnEditType, ColumnsType, ColumnTable } from "../type";
+import type { SelectionSettings } from "../type";
+import type { AnyObject } from "../type";
+export declare const newGuid: () => any;
+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 isNullOrUndefined: (d: any) => boolean;
+export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
+export declare const convertDateToDayjs: (date: Date | undefined, format?: string) => dayjs.Dayjs;
+export declare const isNameColor: (strColor: string) => boolean;
+export declare const isColor: (value: string) => boolean;
+export declare const getAllVisibleKeys: (columns: any[]) => any[];
+export declare const getVisibleColumnKeys: (columns: any[]) => string[];
+export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
+export declare const updateColumns: (columns: any[], includes: string[]) => any[];
+export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, col: ColumnTable<any>) => string;
+export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
+export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
+export declare const updateArrayByKey: (arr: any[], element: any, key: string) => any[];
+export declare const getDateString: <T>(column: ColumnTable<T>, value: any) => string;
+export declare const getEditType: <T>(column: ColumnEditType<T>, rowData?: any) => EditType | ((rowData?: any) => EditType);
+export declare const isDisable: <T>(column: ColumnEditType<T>, rowData?: any) => boolean;
+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 totalFixedWidth: <T>(columns: ColumnsType<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => number;
+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[];