es-grid-template/lib/grid-component/hooks/columns/index.js

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.flatColumns = flatColumns;
exports.renderFilter = exports.renderContent = exports.getValueCell = exports.flatColumns2 = 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"));
var _useSelection = require("rc-master-ui/es/table/hooks/useSelection");
var _numberRange = _interopRequireDefault(require("../../number-range"));
var _number = _interopRequireDefault(require("../../number"));
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 {Typography} from "antd";
// const {RangePicker} = DatePicker

// const { Text } = Typography;

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 flatColumns2 = columns => {
  return columns.reduce((list, column) => {
    const subColumns = column.children;
    if (column === _useSelection.SELECTION_COLUMN) {
      return [...list, {
        ...column
      }];
    }
    if (subColumns && subColumns.length > 0) {
      return [...list, ...flatColumns2(subColumns).map(subColum => ({
        // fixed: parsedFixed,
        ...subColum
      }))];
    }
    return [...list, {
      ...column
    }];
  }, []);
};
exports.flatColumns2 = flatColumns2;
const getValueCell = (column, value, format) => {
  switch (column?.type) {
    case 'number':
      const thousandSeparator = format?.thousandSeparator;
      const decimalSeparator = format?.decimalSeparator;
      const dec = format?.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;
      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
      const numericFormatProps = {
        thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
        decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
        allowNegative: format?.allowNegative ?? true,
        prefix: format?.prefix,
        suffix: format?.suffix,
        decimalScale: dec,
        fixedDecimalScale: format?.fixedDecimalScale ?? false
      };
      return !(0, _utils.isEmpty)(contentNumber) ? (0, _reactNumericComponent.numericFormatter)(contentNumber, numericFormatProps) : '';
    case 'date':
      return value ? (0, _dayjs.default)(value).format(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(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
    case 'boolean':
      return value ? 'true' : 'false';
    case 'color':
      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
        className: 'w-100 h-100',
        style: {
          backgroundColor: (0, _utils.isColor)(value) ? value : '#fff',
          border: '1px solid #f0f0f0',
          height: '100%',
          minHeight: 20
        }
      }));
    case 'checkbox':
      return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Input, {
        checked: !!value,
        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,
    index,
    rowData: record,
    field: column.field
  }) : column.template : content);
};
exports.renderContent = renderContent;
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;
  const type = (0, _utils.getTypeFilter)(column);
  const dateFormat = (0, _utils.getDatepickerFormat)(column?.typeFilter ?? column?.type, cellFormat) ?? 'DD/MM/YYYY';
  const dateRangeFormat = (0, _utils.convertFormat)((0, _utils.getDatepickerFormat)(column?.type, cellFormat) ?? 'DD/MM/YYYY');
  const find = dataSourceFilter?.find(it => it.key === column?.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);
        }
      })))));
    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: column.source ? column.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 '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, {
        locale: locale,
        selectedKeys: selectedKeys,
        onSelect: setSelectedKeys
        // options={options}
        ,
        options: column.source ? column.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;