es-grid-template 1.8.64 → 1.8.65

package/es/table-virtuoso/footer/TableFooterCell.d.ts

@@ -0,0 +1,7 @@
+import type { Column } from "@tanstack/react-table";
+import React from "react";
+interface TableFooterCellProps<T> {
+    column: Column<T, any>;
+}
+declare const TableFooterCell: <RecordType extends object>({ column }: TableFooterCellProps<RecordType>) => React.JSX.Element;
+export default TableFooterCell;

package/es/table-virtuoso/footer/TableFooterCell.js

@@ -0,0 +1,54 @@
+import React, { useContext } from "react";
+import { checkDecimalSeparator, checkThousandSeparator, getCommonPinningStyles, getFormat, isEmpty } from "../hook/utils";
+import { TableContext } from "../useContext";
+import classNames from "classnames";
+import { sumByField } from "../../grid-component/hooks";
+import { numericFormatter } from "react-numeric-component";
+const TableFooterCell = ({
+  column
+}) => {
+  const {
+    prefix,
+    format,
+    dataSource
+  } = useContext(TableContext);
+  const col = column.columnDef.meta ?? {};
+  const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
+  const cellFormat = getFormat(colFormat, format);
+  const thousandSeparator = cellFormat?.thousandSeparator;
+  const decimalSeparator = cellFormat?.decimalSeparator;
+
+  // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
+  const dec = cellFormat?.decimalScale;
+
+  // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
+  const sumValue = col.type === 'number' ? sumByField(dataSource, col?.field) : 0;
+  const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
+  const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
+  const numberValue = Number(value);
+  const numericFormatProps = {
+    thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+    decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+    allowNegative: cellFormat?.allowNegative ?? false,
+    prefix: cellFormat?.prefix,
+    suffix: cellFormat?.suffix,
+    decimalScale: dec,
+    fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+  };
+  return /*#__PURE__*/React.createElement("th", {
+    className: classNames(`${prefix}-grid-cell`, {
+      // [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      // [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      // [`${prefix}-grid-cell-text-right`]: true
+    })
+    // key={column.id}
+    ,
+    style: {
+      // display: 'flex',
+      ...getCommonPinningStyles(column),
+      minWidth: column?.getSize(),
+      height: 40
+    }
+  }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
+};
+export default TableFooterCell;

package/es/table-virtuoso/header/TableHeadCell.d.ts

@@ -0,0 +1,14 @@
+import type { Table } from '@tanstack/react-table';
+import { type Header } from '@tanstack/react-table';
+import React from 'react';
+interface TableHeadCellProps<T> {
+    t?: any;
+    table: Table<T>;
+    header: Header<T, unknown>;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    colSpan: any;
+    rowSpan: any;
+    rowIndex: number;
+}
+declare const TableHeadCell: <RecordType extends object>(props: TableHeadCellProps<RecordType>) => React.JSX.Element;
+export default TableHeadCell;

package/es/table-virtuoso/header/TableHeadCell.js

@@ -0,0 +1,265 @@
+import { flexRender } from '@tanstack/react-table';
+import React, { useContext } from 'react';
+import { Button, Space } from 'antd';
+import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
+import classNames from 'classnames';
+import { Checkbox, Dropdown, Select } from 'rc-master-ui';
+import { booleanOperator, nonActionColumn, numberOperator, stringOperator, translateOption } from "../hook/constant";
+import { extendsObject, getCommonPinningHeaderStyles, getDefaultOperator, getTypeFilter } from "../hook/utils";
+import { renderFilter } from "./renderFilter";
+import ReactDOMServer from 'react-dom/server';
+import { TableContext } from "../useContext";
+// import type { MenuProps } from 'rc-master-ui/es'
+
+const TableHeadCell = props => {
+  const {
+    header,
+    getPopupContainer,
+    table,
+    colSpan,
+    rowSpan,
+    rowIndex
+  } = props;
+  const {
+    t,
+    prefix,
+    setSorterChange,
+    setFilterChange,
+    wrapSettings,
+    selectionSettings,
+    setIsSelectionChange,
+    id,
+    locale
+  } = useContext(TableContext);
+  const isPinned = header.column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left');
+  const isFirstRightPinnedColumn = isPinned === 'right' && header.column.getIsFirstColumn('right');
+  const [selectedKeys, setSelectedKeys] = React.useState([]);
+  const [currentFilter, setCurrentFilter] = React.useState({});
+  const column = header.column.columnDef;
+  const originalColumn = header.column.columnDef.meta ?? {};
+  const filterValue = header.column.getFilterValue() ?? [];
+  const operatorValue = header.column.getFilterOperator() ?? getDefaultOperator(column?.meta ?? {});
+  const {
+    filterIcon
+  } = header.column.columnDef.meta ?? {};
+  const filtered = (header.column.getFilterValue() ?? []).length > 0;
+  const cellContent = flexRender(header.column.columnDef.header, header.getContext());
+  const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
+  const hasValue = html.trim().length > 0;
+  React.useEffect(() => {
+    setCurrentFilter(prev => ({
+      ...prev,
+      ope: operatorValue
+    }));
+  }, []);
+  React.useEffect(() => {
+    setSelectedKeys(filterValue);
+  }, []);
+  const style = {
+    transition: 'width transform 0.2s ease-in-out',
+    whiteSpace: 'nowrap',
+    borderTopWidth: rowIndex > 0 ? 0 : undefined
+  };
+  const getDropdownTrigger = () => {
+    let iconFilter;
+    if (typeof filterIcon === 'function') {
+      iconFilter = filterIcon(filtered);
+    } else if (filterIcon) {
+      iconFilter = filterIcon;
+    } else {
+      iconFilter = /*#__PURE__*/React.createElement(FilterFill, {
+        style: {
+          color: filtered ? '#E3165B' : '#283046'
+        },
+        fontSize: 12
+      });
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      role: "button",
+      tabIndex: -1,
+      className: classNames(`${prefix}-trigger`, {
+        active: filtered
+      }),
+      onClick: e => {
+        e.stopPropagation();
+      }
+    }, iconFilter);
+  };
+  const doFilter = type => {
+    if (type) {
+      header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+      header.column.setFilterOperator?.(currentFilter.ope);
+    } else {
+      header.column.setFilterValue(undefined);
+      setSelectedKeys([]);
+    }
+    setFilterChange(true);
+    setTimeout(() => {
+      setFilterChange(false);
+    }, 10);
+  };
+  const mergedDropdownProps = extendsObject({
+    trigger: ['click'],
+    placement: 'bottomRight',
+    children: getDropdownTrigger(),
+    getPopupContainer
+  }, {
+    // open: visible,
+    // open: visible.visible && visible.column === header.column.id,
+    // onOpenChange: onVisibleChange,
+
+    destroyPopupOnHide: true,
+    dropdownRender: () => {
+      const type = getTypeFilter(originalColumn);
+
+      // const operatorValue = (header.column.getFilterOperator() ?? getDefaultOperator(originalColumn)) as string
+
+      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(`${prefix}-grid-filter-dropdown`, {}),
+        style: {}
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          minWidth: 275,
+          padding: '8px'
+        }
+      }, column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(Select, {
+        options: translateOption(operatorOptions, t),
+        style: {
+          width: '100%',
+          marginBottom: 8
+        }
+
+        // value={operatorValue}
+        ,
+        value: currentFilter.ope,
+        onChange: val => {
+          setCurrentFilter(prev => ({
+            ...prev,
+            ope: val
+          }));
+          // header.column.setFilterOperator(val)
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginBottom: 8
+        }
+      }, renderFilter({
+        column: column,
+        selectedKeys,
+        setSelectedKeys
+      })), /*#__PURE__*/React.createElement(Space, {
+        style: {
+          justifyContent: 'end',
+          width: '100%'
+        }
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        onClick: () => {
+          doFilter(true);
+        },
+        size: "small",
+        style: {
+          width: 90
+        }
+      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
+        type: "link",
+        size: "small",
+        onClick: () => {
+          setSelectedKeys([]);
+          doFilter(false);
+        }
+      }, t ? t('Clear') : 'Clear'))));
+    }
+  });
+  return /*#__PURE__*/React.createElement("th", {
+    className: classNames(`${prefix}-grid-cell`, {
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
+      [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
+      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-center`]: (originalColumn?.headerTextAlign ?? originalColumn?.textAlign) === 'center',
+      [`${prefix}-grid-cell-text-right`]: (originalColumn?.headerTextAlign ?? originalColumn.textAlign) === 'right'
+    }),
+    colSpan: colSpan,
+    rowSpan: rowSpan,
+    key: header.id,
+    style: {
+      width: header.getSize(),
+      ...getCommonPinningHeaderStyles(header.column),
+      ...style
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": !hasValue ? '' : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement("div", null, cellContent))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('', {
+      [`${prefix}-grid-filter-column`]: header.column.id !== 'selection_column',
+      [`${prefix}-grid-selection-column`]: header.column.id === 'selection_column'
+    })
+  }, header.column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== false && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/React.createElement(Checkbox, {
+    checked: table.getIsAllRowsSelected(),
+    indeterminate: table.getIsSomeRowsSelected(),
+    onChange: e => {
+      setIsSelectionChange({
+        isChange: true,
+        type: 'all',
+        rowData: {},
+        rowsData: []
+      });
+      table.getToggleAllRowsSelectedHandler()(e);
+    }
+  }), header.column.id !== 'selection_column' && /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-column-title",
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('', {
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
+      [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')
+    })
+  }, cellContent)), !nonActionColumn.includes(header.column.id) && header.subHeaders.length < 2 && /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-header-trigger"
+  }, header.column.getCanSort() && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginInlineEnd: 6,
+      cursor: 'pointer'
+    },
+    onClick: e => {
+      setSorterChange(true);
+      const toggleSortingHandler = header.column.getToggleSortingHandler();
+      if (typeof toggleSortingHandler === 'function') {
+        toggleSortingHandler(e);
+      }
+    }
+  }, header.column.getIsSorted() ? header.column.getIsSorted() === 'asc' ? /*#__PURE__*/React.createElement(ArrowUp, {
+    fontSize: 15,
+    color: '#000',
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": locale?.triggerDesc ?? 'Click to sort descending'
+  }) : /*#__PURE__*/React.createElement(ArrowDown, {
+    fontSize: 15,
+    color: '#000',
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": locale?.cancelSort ?? 'Click to cancel sorting'
+  }) : /*#__PURE__*/React.createElement(SortCancel, {
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": locale?.triggerAsc ?? 'Click to sort ascending',
+    fontSize: 15,
+    style: {
+      display: 'flex'
+    },
+    className: classNames(`ui-rc-table-column-sorter-cancel`, {
+      active: true
+    })
+  })), header.column.getCanFilter() && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Dropdown, mergedDropdownProps)))), header.column.getCanResize() && /*#__PURE__*/React.createElement("div", {
+    onDoubleClick: () => header.column.resetSize(),
+    onMouseDown: header.getResizeHandler(),
+    onTouchStart: header.getResizeHandler(),
+    className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`
+  }));
+};
+export default TableHeadCell;

package/es/table-virtuoso/header/renderFilter.d.ts

@@ -0,0 +1,20 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import React from "react";
+import type { IFormat } from "../../table-component/type";
+type RenderFilterProps<RecordType> = {
+    column: ColumnDef<RecordType, unknown>;
+    selectedKeys: any[];
+    setSelectedKeys: (keys: any[]) => void;
+    t?: any;
+    locale?: any;
+    dataSourceFilter?: {
+        key: string;
+        data: any[];
+    }[];
+    format?: IFormat;
+    buddhistLocale?: any;
+    dateRangeLocale?: any;
+    doFilter?: (type: boolean) => void;
+};
+export declare const renderFilter: <RecordType>(args: RenderFilterProps<RecordType>) => React.JSX.Element;
+export {};

package/es/table-virtuoso/header/renderFilter.js

@@ -0,0 +1,289 @@
+// import type { IFormat } from "../../tanstack-table/type";
+
+// import type { AnyObject } from './type';
+
+import React, { Fragment } from "react";
+import moment from "moment/moment";
+import { CustomProvider, DatePicker, DateRangePicker, Empty, Input, Select } from "rc-master-ui";
+import dayjs from "dayjs";
+import { convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateRangeFormat, getTypeFilter, isEmpty } from "../hook/utils";
+import CheckboxFilter from "../../table-component/components/checkbox-filter/CheckboxFilter";
+import NumberInput from "../../table-component/components/number";
+import NumberRange from "../../table-component/components/number-range";
+export const renderFilter = args => {
+  const {
+    column,
+    selectedKeys,
+    setSelectedKeys,
+    // confirm,
+    t,
+    locale,
+    buddhistLocale,
+    dateRangeLocale,
+    dataSourceFilter,
+    format,
+    doFilter
+  } = args;
+  const {
+    format: columnFormat,
+    typeFilter,
+    type: columnType,
+    field,
+    source
+  } = column?.meta ?? {};
+  const cellFormat = columnFormat ? typeof columnFormat === 'function' ? columnFormat({}) : columnFormat : format;
+  const type = getTypeFilter(column.meta ?? {});
+  const dateFormat = getDatepickerFormat(typeFilter ?? columnType, cellFormat) ?? 'DD/MM/YYYY';
+  const dateRangeFormat = convertFormat(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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(NumberInput, {
+        t: t,
+        value: selectedKeys[0],
+        onChange: vals => {
+          setSelectedKeys(vals);
+        },
+        onPressEnter: () => doFilter?.(true)
+      }))));
+    case 'NumberRange':
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumberRange, {
+        t: t,
+        min: selectedKeys[0],
+        max: selectedKeys[1],
+        onChange: vals => {
+          setSelectedKeys(vals);
+        },
+        onPressEnter: () => doFilter?.(true)
+      })));
+    case 'Date':
+      const dateValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(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 ? moment(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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(CustomProvider, {
+        locale: dateRangeLocale
+      }, /*#__PURE__*/React.createElement(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] ? moment(value[0]).format() : '', value[1] ? moment(value[1]).format() : ''] : [];
+          setSelectedKeys(newDateRangeValue);
+        },
+        menuClassName: "rc-menu-popup"
+      })))));
+    case 'Week':
+      const weekValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(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 = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(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.createElement(Empty, {
+          image: Empty.PRESENTED_IMAGE_SIMPLE,
+          description: locale?.emptyText
+        }),
+        onChange: val => {
+          // setOperatorKey(val)
+          setSelectedKeys(val ? [val] : []);
+        },
+        showSearch: true,
+        allowClear: true
+      }))));
+    case 'Checkbox':
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxFilter, {
+        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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(Input, {
+        className: "aaaa",
+        classNames: {
+          input: 'filter-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: () => doFilter?.(true),
+        allowClear: true
+        // autoFocus={true}
+      }))));
+  }
+};