es-grid-template 1.7.22 → 1.7.24

package/lib/table-component/header/renderFilter.js

@@ -0,0 +1,291 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderFilter = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _moment = _interopRequireDefault(require("moment/moment"));
+var _rcMasterUi = require("rc-master-ui");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _utils = require("../hook/utils");
+var _number = _interopRequireDefault(require("../components/number"));
+var _numberRange = _interopRequireDefault(require("../components/number-range"));
+var _CheckboxFilter = _interopRequireDefault(require("../components/checkbox-filter/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 type { IFormat } from "../../tanstack-table/type";
+
+// import type { AnyObject } from './type';
+
+const renderFilter = args => {
+  const {
+    column,
+    selectedKeys,
+    setSelectedKeys,
+    confirm,
+    t,
+    locale,
+    buddhistLocale,
+    dateRangeLocale,
+    dataSourceFilter,
+    format
+  } = args;
+  const {
+    format: columnFormat,
+    typeFilter,
+    type: columnType,
+    field,
+    source
+  } = column?.meta ?? {};
+  const cellFormat = columnFormat ? typeof columnFormat === 'function' ? columnFormat({}) : columnFormat : format;
+  const type = (0, _utils.getTypeFilter)(column.meta ?? {});
+  const dateFormat = (0, _utils.getDatepickerFormat)(typeFilter ?? columnType, cellFormat) ?? 'DD/MM/YYYY';
+  const dateRangeFormat = (0, _utils.convertFormat)((0, _utils.getDateRangeFormat)(columnType, cellFormat) ?? 'dd/MM/yyyy');
+  const find = dataSourceFilter?.find(it => it.key === field);
+  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(_number.default, {
+        t: t,
+        value: selectedKeys[0],
+        onChange: vals => {
+          setSelectedKeys(vals);
+        }
+      }))));
+    case 'NumberRange':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_numberRange.default, {
+        t: t,
+        min: selectedKeys[0],
+        max: selectedKeys[1],
+        onChange: vals => {
+          setSelectedKeys(vals);
+        }
+      })));
+    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={t ? t(column?.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: any = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : '']
+      const dateRangeValue = selectedKeys && selectedKeys.length > 0 ? [selectedKeys[0] ? new Date(selectedKeys[0]) : '', selectedKeys[1] ? new Date(selectedKeys[1]) : ''] : 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.CustomProvider, {
+        locale: dateRangeLocale
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DateRangePicker
+      // placeholder={['Ngày bắt đầu', 'Ngày bắt đầu']}
+      , {
+        style: {
+          width: 300
+        },
+        format: dateRangeFormat,
+        value: dateRangeValue,
+        onChange: value => {
+          const newDateRangeValue = value ? [value[0] ? (0, _moment.default)(value[0]).format() : '', value[1] ? (0, _moment.default)(value[1]).format() : ''] : [];
+          setSelectedKeys(newDateRangeValue);
+        },
+        menuClassName: "rc-menu-popup"
+      })))));
+    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={find ? options : column.source ?? []}
+      , {
+        options: source ? source : options ?? [],
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: selectedKeys[0],
+        notFoundContent: /*#__PURE__*/_react.default.createElement(_rcMasterUi.Empty, {
+          image: _rcMasterUi.Empty.PRESENTED_IMAGE_SIMPLE,
+          description: locale?.emptyText
+        }),
+        onChange: val => {
+          // setOperatorKey(val)
+          setSelectedKeys(val ? [val] : []);
+        },
+        showSearch: true,
+        allowClear: true
+      }))));
+    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, {
+        locale: locale,
+        selectedKeys: selectedKeys,
+        onSelect: setSelectedKeys
+        // options={options}
+        ,
+        options: source ? source : 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: t ? t('Search') : `Search`,
+        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/table-component/hook/constant.d.ts

@@ -0,0 +1,73 @@
+export declare const defaultWidth: number;
+export declare const defaultRowHeight: number;
+export type IOperator = {
+    value: string;
+    label: string;
+    key: string;
+};
+export declare const numberOperator: IOperator[];
+export declare const stringOperator: IOperator[];
+export declare const dateOperator: IOperator[];
+export declare const dateTimeOperator: IOperator[];
+export declare const booleanOperator: IOperator[];
+export declare const translateOption: (options: IOperator[], t: any) => any[];
+export declare const transferFontSize: any;
+export declare const defaultDateFormat = "d/m/Y";
+export declare const defaultDateTimeFormat = "d/m/Y H:i";
+export declare const defaultTimeFormat = "H:i";
+export declare const defaultPageSizes: number[];
+export declare const alignToFlex: any;
+export declare const optionsSize: {
+    label: string;
+    value: string;
+    width: number;
+    height: number;
+}[];
+export declare const paperSize: {
+    a4: {
+        width: number;
+        height: number;
+    };
+    a3: {
+        width: number;
+        height: number;
+    };
+    letter: {
+        width: number;
+        height: number;
+    };
+};
+export declare const optionFont: {
+    value: string;
+    label: string;
+}[];
+export declare const optionsPaperOrientation: any[];
+export declare const optionFontSize: {
+    value: number;
+    label: string;
+}[];
+/**
+ * Sort order for BaseTable
+ */
+declare const SortOrder: {
+    /**
+     * Sort data in ascending order
+     */
+    ascend: string;
+    /**
+     * Sort data in descending order
+     */
+    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;
+};
+export declare const nonActionColumn: string[];

package/lib/table-component/hook/constant.js

@@ -0,0 +1,247 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.valueToBoolean = exports.translateOption = exports.transferFontSize = exports.stringOperator = exports.paperSize = exports.optionsSize = exports.optionsPaperOrientation = exports.optionFontSize = exports.optionFont = exports.numberOperator = exports.nonActionColumn = exports.defaultWidth = exports.defaultTimeFormat = exports.defaultRowHeight = exports.defaultPageSizes = exports.defaultDateTimeFormat = exports.defaultDateFormat = exports.default = exports.dateTimeOperator = exports.dateOperator = exports.booleanToValue = exports.booleanOperator = exports.alignToFlex = void 0;
+const defaultWidth = exports.defaultWidth = 100;
+const defaultRowHeight = exports.defaultRowHeight = 35;
+const numberOperator = exports.numberOperator = [{
+  value: 'equal',
+  label: 'Equal',
+  key: '=='
+}, {
+  value: 'greaterthan',
+  label: 'Greater than',
+  key: '>'
+}, {
+  value: 'greaterthanorequal',
+  label: 'Greater than or equal',
+  key: '>='
+}, {
+  value: 'lessthan',
+  label: 'Less than',
+  key: '<'
+}, {
+  value: 'lessthanorequal',
+  label: 'Less than or equal',
+  key: '<='
+}, {
+  value: 'notequal',
+  label: 'Not equal',
+  key: '!='
+}];
+const stringOperator = exports.stringOperator = [{
+  value: 'startswith',
+  key: '_=',
+  label: 'Starts with'
+}, {
+  value: 'endswith',
+  key: '|=',
+  label: 'Ends with'
+}, {
+  value: 'contains',
+  key: '~=',
+  label: 'Contains'
+}, {
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not equal'
+}];
+const dateOperator = exports.dateOperator = [{
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not equal'
+}, {
+  value: 'greaterthan',
+  key: '>',
+  label: 'Greater than'
+}, {
+  value: 'lessthan',
+  key: '<',
+  label: 'Less than'
+}];
+const dateTimeOperator = exports.dateTimeOperator = [{
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not equal'
+}, {
+  value: 'greaterthan',
+  key: '>',
+  label: 'Greater than'
+}, {
+  value: 'lessthan',
+  key: '<',
+  label: 'Less than'
+}];
+const booleanOperator = exports.booleanOperator = [{
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not equal'
+}];
+const translateOption = (options, t) => {
+  if (!t) {
+    return options;
+  }
+  return options.map(it => ({
+    ...it,
+    label: t(it.label)
+  }));
+};
+exports.translateOption = translateOption;
+const transferFontSize = exports.transferFontSize = {
+  6: 8,
+  7: 9,
+  8: 11,
+  9: 12,
+  10: 13,
+  11: 15,
+  12: 16,
+  13: 17,
+  14: 19,
+  15: 20,
+  16: 21,
+  17: 23,
+  18: 24,
+  19: 25,
+  20: 27,
+  21: 28,
+  22: 29,
+  24: 32,
+  26: 35,
+  27: 36,
+  28: 37
+};
+const defaultDateFormat = exports.defaultDateFormat = 'd/m/Y';
+const defaultDateTimeFormat = exports.defaultDateTimeFormat = 'd/m/Y H:i';
+const defaultTimeFormat = exports.defaultTimeFormat = 'H:i';
+const defaultPageSizes = exports.defaultPageSizes = [20, 30, 50, 100];
+const alignToFlex = exports.alignToFlex = {
+  center: 'center',
+  left: 'start',
+  right: 'end'
+};
+const optionsSize = exports.optionsSize = [{
+  label: 'letter',
+  value: 'letter',
+  width: 21.59,
+  height: 27.94
+}, {
+  label: 'A3',
+  value: 'a3',
+  width: 27.94,
+  height: 42
+}, {
+  label: 'A4',
+  value: 'a4',
+  width: 21,
+  height: 29.7
+}];
+const paperSize = exports.paperSize = {
+  a4: {
+    width: 21,
+    height: 29.7
+  },
+  a3: {
+    width: 27.94,
+    height: 42
+  },
+  letter: {
+    width: 21.59,
+    height: 27.94
+  }
+};
+const optionFont = exports.optionFont = [{
+  value: 'Times New Roman',
+  label: 'Times New Roman'
+}, {
+  value: 'Calibri',
+  label: 'Calibri (Body)'
+}];
+// portrait' | 'landscape'
+const optionsPaperOrientation = exports.optionsPaperOrientation = [{
+  value: 'portrait',
+  label: 'portrait'
+}, {
+  value: 'landscape',
+  label: 'landscape'
+}];
+const optionFontSize = exports.optionFontSize = [{
+  value: 8,
+  label: '8'
+}, {
+  value: 9,
+  label: '9'
+}, {
+  value: 10,
+  label: '10'
+}, {
+  value: 11,
+  label: '11'
+}, {
+  value: 12,
+  label: '12'
+}, {
+  value: 13,
+  label: '13'
+}, {
+  value: 14,
+  label: '14'
+}, {
+  value: 16,
+  label: '16'
+}, {
+  value: 18,
+  label: '18'
+}, {
+  value: 24,
+  label: '24'
+}, {
+  value: 36,
+  label: '36'
+}, {
+  value: 48,
+  label: '48'
+}];
+
+/**
+ * Sort order for BaseTable
+ */
+const SortOrder = {
+  /**
+   * Sort data in ascending order
+   */
+  ascend: 'Ascending',
+  /**
+   * Sort data in descending order
+   */
+  descend: 'Descending'
+};
+var _default = exports.default = SortOrder;
+const valueToBoolean = exports.valueToBoolean = {
+  true: true,
+  false: false,
+  1: true,
+  0: false
+};
+const booleanToValue = exports.booleanToValue = {
+  true: 1,
+  false: 0
+};
+const nonActionColumn = exports.nonActionColumn = ['#', 'command', 'selection_column'];

package/lib/table-component/hook/useColumns.d.ts

@@ -0,0 +1,11 @@
+import type { ColumnTable, ExpandableConfig, IFormat } from '../type';
+import type { ColumnDef, ExpandedState } from '@tanstack/react-table';
+export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
+export declare function convertToTanStackColumns<T>({ columns, expanded, setExpanded, expandable, format, editAble }: {
+    columns: ColumnTable<T>[];
+    expanded: ExpandedState;
+    setExpanded: any;
+    expandable?: ExpandableConfig<T>;
+    format?: IFormat;
+    editAble?: boolean;
+}): ColumnDef<T, any>[];