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

es-grid-template

import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateString, getTypeFilter, isColor, isEmpty } from "../utils";
import { numericFormatter } from "react-numeric-component";
import dayjs from "dayjs";
import moment from "moment/moment";
import React, { Fragment } from "react";
import { CustomProvider, DatePicker, DateRangePicker, Empty, Input, Select } from "rc-master-ui";
import CheckboxFilter from "../../CheckboxFilter";
import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
import NumberRange from "../../number-range";
import NumberInput from "../../number";
// import {Typography} from "antd";
// const {RangePicker} = DatePicker

// const { Text } = Typography;

export 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
    }];
  }, []);
}
export const flatColumns2 = columns => {
  return columns.reduce((list, column) => {
    const subColumns = column.children;
    if (column === SELECTION_COLUMN) {
      return [...list, {
        ...column
      }];
    }
    if (subColumns && subColumns.length > 0) {
      return [...list, ...flatColumns2(subColumns).map(subColum => ({
        // fixed: parsedFixed,
        ...subColum
      }))];
    }
    return [...list, {
      ...column
    }];
  }, []);
};
export 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 = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
      const numericFormatProps = {
        thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
        decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
        allowNegative: format?.allowNegative ?? true,
        prefix: format?.prefix,
        suffix: format?.suffix,
        decimalScale: dec,
        fixedDecimalScale: format?.fixedDecimalScale ?? false
      };
      return !isEmpty(contentNumber) ? numericFormatter(contentNumber, numericFormatProps) : '';
    case 'date':
      return value ? dayjs(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
    case 'time':
      return value ? value : '';
    case 'year':
      const year = value ? moment(value).format('yyyy') : '';
      return /*#__PURE__*/React.createElement(Fragment, null, year);
    case 'datetime':
      return value ? moment(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
    case 'boolean':
      return value ? 'true' : 'false';
    case 'color':
      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
        className: 'w-100 h-100',
        style: {
          backgroundColor: isColor(value) ? value : '#fff',
          border: '1px solid #f0f0f0',
          height: '100%',
          minHeight: 20
        }
      }));
    case 'checkbox':
      return /*#__PURE__*/React.createElement(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;
  }
};
export const renderContent = (column, value, record, index, format) => {
  const cellValue = value instanceof Date ? getDateString(column, value) : value;
  const content = getValueCell(column, cellValue, format);
  return /*#__PURE__*/React.createElement(Fragment, null, column?.template ? typeof column.template === "function" ? column.template({
    value,
    index,
    rowData: record,
    field: column.field
  }) : column.template : content);
};
export 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 = getTypeFilter(column);
  const dateFormat = getDatepickerFormat(column?.typeFilter ?? column?.type, cellFormat) ?? 'DD/MM/YYYY';
  const dateRangeFormat = convertFormat(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.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);
        }
      }))));
    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);
        }
      })));
    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);
        }
      })))));
    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: column.source ? column.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 '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.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: column.source ? column.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, {
        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
      }))));
  }
};