es-grid-template/lib/group-component/header/renderFilter.js

es-grid-template

"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,
    t,
    locale,
    dataSourceFilter,
    format,
    doFilter,
    tableLocal
  } = 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);
        },
        onPressEnter: () => doFilter?.(true)
      }))));
    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);
        },
        onPressEnter: () => doFilter?.(true)
      })));
    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'
        },
        style: {
          width: '100%',
          height: '100%'
        },
        value: dateValue,
        defaultValue: dateValue,
        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.DateRangePicker, {
        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",
        placement: "auto"
      }))));
    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',
        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: val => {
          setSelectedKeys(val);
        }
        // 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, {
        className: "aaaa",
        classNames: {
          input: 'filter-input'
        }
        // placeholder={t ? t('Search') : `Search`}
        ,
        placeholder: tableLocal?.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}
      }))));
  }
};
exports.renderFilter = renderFilter;