es-grid-template/lib/table-component/InternalTable.js

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
var _react = _interopRequireWildcard(require("react"));
require("react-resizable/css/styles.css");
var _dayjs = _interopRequireDefault(require("dayjs"));
require("dayjs/locale/es");
require("dayjs/locale/vi");
require("./style.scss");
var _faker = require("@faker-js/faker");
var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
var _Grid = _interopRequireDefault(require("./table/Grid"));
var _utils = require("./hook/utils");
var _useColumns = require("./hook/useColumns");
var _convert = require("./hook/convert");
var _hooks = require("../grid-component/hooks");
var _rcMasterUi = require("rc-master-ui");
var _useLocale = require("../locale/useLocale");
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; }
_dayjs.default.extend(_customParseFormat.default);
const InternalTable = props => {
  const {
    t,
    columns: propsColumns,
    // columns,
    lang,
    locale,
    dataSource,
    editAble,
    format,
    groupAble,
    groupSetting,
    groupColumns,
    selectionSettings,
    expandable,
    onChooseColumns,
    onExpandClick,
    // contextMenuClick,
    // contextMenuOpen,
    height,
    ignoreAccents,
    ...rest
  } = props;
  const id = _react.default.useMemo(() => {
    return _faker.faker.string.alpha(20);
  }, []);
  const language = _react.default.useMemo(() => {
    return (0, _useLocale.getLocale)(lang);
  }, [lang]);
  const languages = _react.default.useMemo(() => {
    return (0, _useLocale.getLocales)(lang);
  }, [lang]);
  const {
    defaultExpandedRowKeys,
    defaultExpandAllRows
  } = expandable || {};
  const rowKey = 'rowId';
  const prefix = 'ui-rc';
  const getWindowSize = () => {
    const {
      innerWidth,
      innerHeight
    } = window;
    return {
      innerWidth,
      innerHeight
    };
  };
  const [windowSize, setWindowSize] = (0, _react.useState)(getWindowSize());
  _react.default.useEffect(() => {
    const handleWindowResize = () => {
      setWindowSize(getWindowSize());
    };
    document.addEventListener('resize', handleWindowResize);
    return () => {
      document.removeEventListener('resize', handleWindowResize);
    };
  }, []);
  const [filterStates, setFilterState] = _react.default.useState(null);
  const [sorterStates, setSorterStates] = _react.default.useState([]);
  const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
  const [columns, setColumns] = _react.default.useState([]);
  const [isExpandClick, setIsExpandClick] = _react.default.useState(false);
  _react.default.useEffect(() => {
    // setColumns(propsColumns as any)

    setColumns((0, _utils.updateWidthsByOther)(propsColumns, columns));
  }, [propsColumns]);
  const [expanded, setExpanded] = _react.default.useState({});
  const convertData = _react.default.useMemo(() => {
    if (groupAble && groupSetting && groupSetting.client !== false) {
      return (0, _utils.groupArrayByColumns)(dataSource, groupColumns);
    }
    return (0, _utils.addRowIdArray)(dataSource);
  }, [dataSource, groupAble, groupColumns, groupSetting]);
  const mergedColumns = _react.default.useMemo(() => {
    return (0, _useColumns.convertToTanStackColumns)({
      t,
      columns,
      format,
      editAble
    });

    // return convertToTanStackColumns<RecordType>(columns)
  }, [t, columns, format, editAble]);
  const isDataTree = _react.default.useMemo(() => {
    return (0, _utils.isTreeArray)(dataSource);
  }, [dataSource]);
  const columnPinning = _react.default.useMemo(() => {
    return {
      left: (0, _utils.getFixedFields)(columns, 'left'),
      right: (0, _utils.getFixedFields)(columns, 'right')
    };
  }, [columns]);

  // ========================= Keys =========================
  const [mergedFilterKeys, setMergedFilterKeys] = (0, _useMergedState.default)((0, _utils.getAllRowKey)(convertData), {
    value: undefined
  });
  _react.default.useEffect(() => {
    if (onExpandClick || isExpandClick) {
      return;
    }
    if (defaultExpandAllRows) {
      const allKeys = (0, _utils.findAllChildrenKeys2)(convertData, rowKey, 'children');
      setExpanded((0, _utils.convertToObjTrue)(allKeys));
    } else {
      if (defaultExpandedRowKeys) {
        setExpanded((0, _utils.convertToObjTrue)(defaultExpandedRowKeys ?? []));
      }
    }
  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys, onExpandClick, isExpandClick]);

  // ========================= Keys =========================

  const {
    selectedRowKeys,
    defaultSelectedRowKeys
  } = selectionSettings ?? {};
  const [mergedSelectedKeys] = (0, _useMergedState.default)(selectedRowKeys || defaultSelectedRowKeys || [], {
    value: selectedRowKeys
  });
  const mergedData = _react.default.useMemo(() => {
    return (0, _utils.filterDataByColumns)(convertData, filterStates, sorterStates, mergedFilterKeys, ignoreAccents);
  }, [convertData, filterStates, mergedFilterKeys, sorterStates, ignoreAccents]);
  const columnVisibility = _react.default.useMemo(() => {
    return (0, _utils.getInvisibleColumns)(columns);
  }, [columns]);
  const [columnsHiddenKeys, setColumnsHiddenKeys] = (0, _useMergedState.default)(undefined, {
    value: undefined
  });
  const triggerChangeColumns = (cols, keys, type) => {
    if (type === 'cellClick') {
      setColumns(cols);
    } else {
      setColumns(cols);
      const aa = (0, _utils.flatColumns2)(columns).map(it => it.field);
      const rsss = (0, _utils.getDiffent2Array)(aa, keys);
      setColumnsHiddenKeys(rsss);
      onChooseColumns?.({
        showColumns: (0, _hooks.removeInvisibleColumns)([...cols]),
        columns: [...cols],
        flattenColumns: (0, _utils.convertFlatColumn1)([...cols])
      });
    }
  };
  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.ConfigProvider, {
    locale: language
  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.CustomProvider, {
    locale: languages
  }, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
    t: t,
    id: id,
    prefix: prefix,
    originData: convertData,
    dataSource: mergedData,
    locale: locale,
    lang: lang,
    format: format
    // columns={columns111 as any}
    ,
    columns: (0, _convert.convertColumns)(mergedColumns),
    propsColumns: columns,
    rowKey: rowKey,
    groupSetting: groupSetting,
    groupAble: groupAble,
    groupColumns: groupColumns,
    columnPinning: columnPinning,
    columnHidden: columnsHiddenKeys ? (0, _utils.convertToObj)(columnsHiddenKeys) : columnVisibility,
    triggerFilter: setFilterState,
    triggerSorter: setSorterStates,
    setMergedFilterKeys: setMergedFilterKeys,
    mergedFilterKeys: mergedFilterKeys,
    expanded: expanded,
    editAble: isFullScreen ? false : editAble,
    triggerChangeColumns: triggerChangeColumns,
    setExpanded: setExpanded,
    isFullScreen: isFullScreen,
    setIsFullScreen: setIsFullScreen,
    windowSize: windowSize,
    height: height,
    isDataTree: isDataTree,
    selectionSettings: selectionSettings,
    mergedSelectedKeys: mergedSelectedKeys,
    expandable: expandable,
    onExpandClick: onExpandClick,
    setColumns: setColumns,
    setIsExpandClick: setIsExpandClick
  })))));
};
var _default = exports.default = InternalTable;