es-grid-template/lib/grid-component/ConvertColumnTable.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 _react = _interopRequireWildcard(require("react"));
var _reactResizable = require("react-resizable");
var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
var _dayjs = _interopRequireDefault(require("dayjs"));
require("dayjs/locale/es");
require("dayjs/locale/vi");
var _en_US = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/en_US"));
var _vi_VN = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/vi_VN"));
require("./styles.scss");
var _InternalTable = _interopRequireDefault(require("./InternalTable"));
var _useColumns = _interopRequireDefault(require("./hooks/useColumns"));
var _hooks = require("./hooks");
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 classNames from "classnames";

// import useMergedState from "rc-util/lib/hooks/useMergedState";

_dayjs.default.extend(_customParseFormat.default);

// const ASCEND = 'ascend';
// const DESCEND = 'descend';

const ResizableTitle = props => {
  const {
    onResize,
    width,
    ...restProps
  } = props;
  if (!width) {
    return /*#__PURE__*/_react.default.createElement("th", restProps);
  }
  return (
    /*#__PURE__*/
    // @ts-ignore
    _react.default.createElement(_reactResizable.Resizable, {
      width: width,
      height: 0,
      handle: /*#__PURE__*/_react.default.createElement("span", {
        className: "react-resizable-handle",
        onClick: e => {
          e.stopPropagation();
        }
      }),
      onResize: onResize,
      draggableOpts: {
        enableUserSelectHack: false
      }
    }, /*#__PURE__*/_react.default.createElement("th", restProps))
  );
};
const ConvertColumnTable = props => {
  const {
    t,
    columns: propsColumns,
    dataSource,
    lang,
    locale,
    format,
    allowResizing,
    dataSourceFilter: propDataSourceFilter,
    onFilterClick,
    editAble,
    rowKey: propRowKey,
    sortMultiple,
    groupAble,
    groupSetting,
    groupColumns,
    ...rest
  } = props;
  const local = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
  const buddhistLocale = {
    ...local,
    lang: {
      ...local.lang
    }
  };
  const rowKey = (0, _react.useMemo)(() => {
    return editAble ? 'rowId' : propRowKey ?? 'id';
  }, [editAble, propRowKey]);
  const [columns, setColumns] = _react.default.useState([]);

  // ========================= Keys =========================
  // const [columns, setColumns] = useMergedState(
  //   propsColumns || [],
  //   {
  //     value: propsColumns,
  //   },
  // );

  _react.default.useEffect(() => {
    setColumns(propsColumns);
  }, [propsColumns]);
  const handleResize = column => (e, {
    size
  }) => {
    const newColumn = {
      ...column,
      width: size.width
    };
    const newColumns = (0, _hooks.updateArrayByKey)(columns, newColumn, 'field');
    setColumns(newColumns);
  };
  const [transformSelectionColumns] = (0, _useColumns.default)({
    locale,
    t,
    buddhistLocale,
    dataSource,
    dataSourceFilter: propDataSourceFilter,
    format,
    sortMultiple,
    groupAble,
    groupSetting,
    groupColumns,
    handleResize
  });
  const mergedColumns = _react.default.useMemo(() => {
    return transformSelectionColumns(columns);
  }, [columns, transformSelectionColumns]);
  const mergerdData = _react.default.useMemo(() => {
    return dataSource;
  }, [dataSource]);
  return /*#__PURE__*/_react.default.createElement(_InternalTable.default, (0, _extends2.default)({}, rest, {
    t: t,
    editAble: editAble,
    dataSource: mergerdData,
    format: format,
    locale: locale,
    components: {
      header: {
        cell: allowResizing ? ResizableTitle : undefined
      }
    }
    // columns={mergedColumns}
    ,
    columns: mergedColumns ?? [],
    showSorterTooltip: {
      target: 'sorter-icon'
    },
    rowKey: rowKey,
    groupAble: groupAble,
    groupSetting: groupSetting
  }));
};
var _default = exports.default = ConvertColumnTable;