es-grid-template/es/grid-component/ConvertColumnTable.js

es-grid-template

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useMemo } from 'react';
// import classNames from "classnames";

import { Resizable } from "react-resizable";
import customParseFormat from 'dayjs/plugin/customParseFormat';
import dayjs from "dayjs";
import 'dayjs/locale/es';
import 'dayjs/locale/vi';
import en from 'rc-master-ui/es/date-picker/locale/en_US';
import vi from 'rc-master-ui/es/date-picker/locale/vi_VN';
import "./styles.scss";
import InternalTable from "./InternalTable";
import useColumns from "./hooks/useColumns";
import { updateArrayByKey } from "./hooks";
// import useMergedState from "rc-util/lib/hooks/useMergedState";

dayjs.extend(customParseFormat);

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

const ResizableTitle = props => {
  const {
    onResize,
    width,
    ...restProps
  } = props;
  if (!width) {
    return /*#__PURE__*/React.createElement("th", restProps);
  }
  return (
    /*#__PURE__*/
    // @ts-ignore
    React.createElement(Resizable, {
      width: width,
      height: 0,
      handle: /*#__PURE__*/React.createElement("span", {
        className: "react-resizable-handle",
        onClick: e => {
          e.stopPropagation();
        }
      }),
      onResize: onResize,
      draggableOpts: {
        enableUserSelectHack: false
      }
    }, /*#__PURE__*/React.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 : vi;
  const buddhistLocale = {
    ...local,
    lang: {
      ...local.lang
    }
  };
  const rowKey = useMemo(() => {
    return editAble ? 'rowId' : propRowKey ?? 'id';
  }, [editAble, propRowKey]);
  const [columns, setColumns] = React.useState([]);

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

  React.useEffect(() => {
    setColumns(propsColumns);
  }, [propsColumns]);
  const handleResize = column => (e, {
    size
  }) => {
    const newColumn = {
      ...column,
      width: size.width
    };
    const newColumns = updateArrayByKey(columns, newColumn, 'field');
    setColumns(newColumns);
  };
  const [transformSelectionColumns] = useColumns({
    locale,
    t,
    buddhistLocale,
    dataSource,
    dataSourceFilter: propDataSourceFilter,
    format,
    sortMultiple,
    groupAble,
    groupSetting,
    groupColumns,
    handleResize
  });
  const mergedColumns = React.useMemo(() => {
    return transformSelectionColumns(columns);
  }, [columns, transformSelectionColumns]);
  const mergerdData = React.useMemo(() => {
    return dataSource;
  }, [dataSource]);
  return /*#__PURE__*/React.createElement(InternalTable, _extends({}, 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
  }));
};
export default ConvertColumnTable;