es-grid-template/es/table-component/hook/useColumns.js

es-grid-template

import React, { Fragment } from 'react';
import ControlCheckbox from "../components/ControlCheckbox";
import { checkDecimalSeparator, checkThousandSeparator, getFormat, isColor, isEmpty } from "./utils";
import { numericFormatter } from 'react-numeric-component';
import dayjs from 'dayjs';
import moment from 'moment';
export const renderValueCell = (column, value, record, rowIndex, colIndex, format, editAble) => {
  switch (column?.type) {
    case 'number':
      const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
      const cellFormat = getFormat(colFormat, format);
      const thousandSeparator = cellFormat?.thousandSeparator;
      const decimalSeparator = cellFormat?.decimalSeparator;
      const dec = cellFormat?.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 numericFormatProps = {
        thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
        decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
        allowNegative: cellFormat?.allowNegative ?? true,
        prefix: cellFormat?.prefix,
        suffix: cellFormat?.suffix,
        decimalScale: dec,
        fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
      };

      // if ( typeof value === "string") {
      //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
      //
      // }

      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'

      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 (
      //   <Checkbox
      //     checked={!!value}
      //
      //   />
      // )

      return /*#__PURE__*/React.createElement(ControlCheckbox, {
        column: column,
        record: record,
        rowIndex: rowIndex,
        colIndex: colIndex,
        checked: !!value,
        checkValue: value,
        editAble: editAble
      });
    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 function convertToTanStackColumns({
  columns,
  expanded,
  setExpanded,
  expandable,
  format,
  editAble
}) {
  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
  return columns.map(col => {
    const {
      headerText,
      headerTemplate,
      field,
      width,
      allowResizing,
      minWidth,
      template,
      allowSorter
    } = col;
    const {
      children,
      ...restProps
    } = col;
    const newCol = {
      header: () => {
        if (headerTemplate) {
          if (typeof headerTemplate === 'function') {
            return headerTemplate(col);
          } else {
            return headerTemplate;
          }
        } else {
          return headerText;
        }
      },
      cell: props => {
        const {
          getValue,
          cell,
          row
        } = props;
        const cellValue = props.renderValue() ?? null;
        const record = cell.row.original;
        const colIndex = cell.column.getIndex();
        const rowIndex = cell.row.index;
        if (template) {
          if (typeof template === 'function') {
            return template({
              field: field ?? '',
              index: cell.row.index,
              rowData: cell.row.original,
              value: getValue()
            });
          } else {
            return template;
          }
        } else {
          return /*#__PURE__*/React.createElement(Fragment, null, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
            className: "ui-rc-table-row-expand-trigger",
            style: {
              paddingLeft: `${row.depth * 25}px`
            }
          }, /*#__PURE__*/React.createElement("div", null, row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
            // onClick: row.getToggleExpandedHandler(),
            onClick: () => {
              const keys = Object.keys(expanded);
              // @ts-ignore
              const tmp = {
                ...expanded
              };
              if (keys.includes(row.id)) {
                delete tmp[row.id];
                setExpanded(tmp);
              } else {
                setExpanded(old => ({
                  ...old,
                  [row.id]: true
                }));
              }
            },
            style: {
              cursor: "pointer"
            },
            className: "ui-rc-table-row-expand"
          }, row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
            className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
          }) : /*#__PURE__*/React.createElement("span", {
            className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
          })) : /*#__PURE__*/React.createElement("span", {
            className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
          }))), renderValueCell(col, cellValue, record, rowIndex, colIndex, format, editAble));
        }
      },
      enableResizing: allowResizing !== false,
      // enableResizing: true,
      id: field,
      size: width,
      accessorKey: field ?? '',
      sortDescFirst: false,
      minSize: minWidth,
      // maxSize: maxWidth,
      enableSorting: allowSorter !== false || col.sorter !== false
    };

    // if (field) {
    //   // @ts-ignore
    //   newCol.accessorKey = field;

    // }

    if (children) {
      // @ts-ignore
      newCol.columns = convertToTanStackColumns(children);
    }
    const meta = {
      ...restProps
    };
    if (Object.keys(meta).length > 0) {
      newCol.meta = meta;
    }
    return newCol;
  });
}