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

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.convertToTanStackColumns = convertToTanStackColumns;
exports.toggleRowSelection = exports.renderValueCell = void 0;
var _react = _interopRequireWildcard(require("react"));
var _ControlCheckbox = _interopRequireDefault(require("../components/ControlCheckbox"));
var _utils = require("./utils");
var _reactNumericComponent = require("react-numeric-component");
var _dayjs = _interopRequireDefault(require("dayjs"));
var _moment = _interopRequireDefault(require("moment"));
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; }
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 = (0, _utils.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: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
        decimalSeparator: (0, _utils.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 = !(0, _utils.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 !(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(_ControlCheckbox.default, {
        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;
  }
};
exports.renderValueCell = renderValueCell;
function convertToTanStackColumns({
  t,
  columns,
  // expanded,
  // setExpanded,
  // expandable,
  format,
  editAble
}) {
  // const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0

  return (0, _utils.sortByType)(columns).map(col => {
    const {
      headerText,
      headerTemplate,
      field,
      width,
      allowResizing,
      minWidth,
      template,
      allowSortering,
      allowFiltering
    } = col;
    const {
      children,
      ...restProps
    } = col;
    const newCol = {
      header: () => {
        if (headerTemplate) {
          if (typeof headerTemplate === 'function') {
            return headerTemplate(col);
          } else {
            return headerTemplate;
          }
        } else {
          return t ? t(headerText) : headerText;
          // return field
        }
      },
      cell: props => {
        const {
          getValue,
          cell
        } = 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.default.createElement(_react.Fragment, null, renderValueCell(col, cellValue, record, rowIndex, colIndex, format, editAble));
        }
      },
      enableResizing: allowResizing !== false,
      // enableHiding: false,
      // enableResizing: true,
      id: field,
      size: width,
      accessorKey: field,
      sortDescFirst: false,
      minSize: minWidth,
      // maxSize: maxWidth,
      enableSorting: allowSortering !== false,
      // enableSorting: false,
      // enableColumnFilter: allowFiltering !== false && !nonActionColumn.includes(field)
      enableColumnFilter: allowFiltering !== false
    };
    if (children) {
      newCol.size = undefined;
      // @ts-ignore
      newCol.columns = convertToTanStackColumns({
        columns: children,
        editAble,
        format,
        t
      });
    }
    const meta = {
      ...restProps
    };
    if (Object.keys(meta).length > 0) {
      newCol.meta = meta;
    }
    return newCol;
  });
}
const toggleRowSelection = props => {
  const {
    selectionSettings,
    cell,
    isSelectionChange,
    e,
    setIsSelectionChange
  } = props;
  const {
    row
  } = cell;
  const {
    rowsData
  } = isSelectionChange ?? {};
  const prevSelected = rowsData && rowsData.length > 0 ? [...rowsData] : [];
  if (selectionSettings?.checkStrictly || selectionSettings?.type === 'single') {
    row.getToggleSelectedHandler()(e);
    if (row.getIsSelected()) {
      // đã chọn

      // xóa row ra list selected 
      const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
      setIsSelectionChange({
        isChange: true,
        type: 'rowSelected',
        rowData: row.original,
        rowsData: newRowsSelected ?? []
      });
    } else {
      // chưa selected

      const checkedRows = [...prevSelected, row];
      setIsSelectionChange({
        isChange: true,
        type: 'rowSelected',
        rowData: row.original,
        rowsData: selectionSettings?.type === 'single' ? [row] : checkedRows
      });
    }
    return;
  }
  if (row.subRows && row.subRows.length > 0) {
    // click vào row cha

    const allChild = (0, _utils.getAllChildren)(row);
    (0, _utils.toggleRowAndChildren)(row, !row.getIsSelected());
    if (row.getIsSelected()) {
      // đã chọn

      // const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== row.id)

      const newRowsSelected = (0, _utils.excludeItems)(prevSelected, [...allChild, row]);
      setIsSelectionChange({
        isChange: true,
        type: 'rowSelected',
        rowData: row.original,
        rowsData: newRowsSelected ?? []
      });
    } else {
      // chưa selected

      let checkedRows = [];
      if (row.subRows && row.subRows.length > 0) {
        checkedRows = [...prevSelected, row, ...allChild];
      } else {
        checkedRows = [...prevSelected, row];
      }
      setIsSelectionChange({
        isChange: true,
        type: 'rowSelected',
        rowData: row.original,
        rowsData: checkedRows
      });
    }
  } else {
    // click vào row không có cha

    row.getToggleSelectedHandler()(e);
    if (row.getIsSelected()) {
      // đã chọn

      const rowParent = row.getParentRow();
      // const rowParent1 = row.getParentRows()

      let newCheckedRows = [];
      if (rowParent) {}
      if (rowParent && (0, _utils.countUnselectedChildren)(row) === 1) {
        newCheckedRows = prevSelected.filter(it => it.id !== row.id && it.id !== rowParent.id);
      } else {
        // xóa row ra list selected 
        // const newRowsSelected = prevSelected.filter((it) => it.id !== row.id)
        newCheckedRows = prevSelected.filter(it => it.id !== row.id);
      }
      setIsSelectionChange({
        isChange: true,
        type: 'rowSelected',
        rowData: row.original,
        rowsData: newCheckedRows ?? []
      });
    } else {
      // chưa selected

      let checkedRows = [];
      const rowParent = row.getParentRow();

      // nếu có cha và cha chưa được chọn và tất cả con đã chọn => thêm row cha vào 
      if (rowParent && !rowParent.getIsSelected() && (0, _utils.countUnselectedChildren)(row) === 1) {
        rowParent.toggleSelected(!rowParent.getIsSelected());
        checkedRows = [...prevSelected, row, rowParent];
      } else {
        // chỉ thêm vào row hiện tại

        const isInclude = prevSelected.findIndex(it => it.id === cell.row.id);
        if (isInclude > -1) {
          // cập nhật data row hiện tại

          prevSelected[isInclude] = row;
          checkedRows = [...prevSelected];
        } else {
          checkedRows = [...prevSelected, row];
        }
      }
      setIsSelectionChange({
        isChange: true,
        type: 'rowSelected',
        rowData: row.original,
        rowsData: checkedRows
      });
    }
  }
};
exports.toggleRowSelection = toggleRowSelection;