linkmore-design/es/chart-table/index.js

🌈 🚀lm组件库。🚀

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useSelections } from 'ahooks';
import { isArray, mergeWith, cloneDeep } from 'lodash';
import React, { forwardRef, useImperativeHandle, useState } from 'react';
import defaultConfig from "./defaultConfig";
import Wrapper from "./wrapper";

/** 合并参数 */
// const mergeProps = (props: ChartTableProps) => {
//   const { resizeConfig, checkboxConfig, rowConfig, fieldNames } = props
//   return {
//     resizeConfig: merge(defaultResizeConfig, resizeConfig),
//     checkboxConfig: merge(defaultCheckboxConfig, checkboxConfig),
//     rowConfig: merge(defaultRowConfig, rowConfig),
//     fieldNames: merge(defaultFieldNames, fieldNames),
//     ...props,
//   }
// }

function customizer(objValue, srcValue) {
  if (isArray(objValue)) {
    return srcValue;
  }
}

/** 拓展行数据保存 */
var useSelection = function useSelection(_ref) {
  var dataSource = _ref.dataSource,
    checkboxConfig = _ref.checkboxConfig,
    id = _ref.id;
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    selectedRecords = _useState2[0],
    setSelectedRecords = _useState2[1];
  var selectedResult = useSelections([], checkboxConfig.defaultSelected || []);
  var toggle = function toggle(value) {
    var _selectedResult$selec;
    var isSelected = (_selectedResult$selec = selectedResult.selected) === null || _selectedResult$selec === void 0 ? void 0 : _selectedResult$selec.includes(value);
    selectedResult.toggle(value);
    if (isSelected) {
      setSelectedRecords(function (o) {
        return o.filter(function (v) {
          return v[id] !== value;
        });
      });
    } else {
      setSelectedRecords(function (o) {
        return [].concat(_toConsumableArray(o), [dataSource.find(function (v) {
          return v[id] === value;
        })]);
      });
    }
  };
  return _objectSpread(_objectSpread({}, selectedResult), {}, {
    toggle: toggle,
    selectedRecords: selectedRecords
  });
};
var ChartTable = function ChartTable(props, ref) {
  /** 防止改变对象 object */
  var mergeProps = mergeWith(cloneDeep(defaultConfig), props, customizer);
  var selectedResult = useSelection(mergeProps);

  /** 受控, 外部存在时调用外部参数 */
  var checkboxConfigRes = _objectSpread(_objectSpread({}, selectedResult), mergeProps.checkboxConfig);
  var instance = _objectSpread(_objectSpread({}, mergeProps), {}, {
    checkboxConfig: checkboxConfigRes
  });
  // const instance = useReactive({ ...mergeProps, checkboxConfig: checkboxConfigRes });
  // const instance = mergeWith(mergeProps, { checkboxConfig: selectedResult })
  // console.log('mergeResult: ', instance)

  useImperativeHandle(ref, function () {
    return {
      getInstance: function getInstance() {
        return instance;
      },
      getCheckboxRecords: function getCheckboxRecords() {
        return checkboxConfigRes.selectedRecords;
      },
      getSelection: function getSelection() {
        return checkboxConfigRes;
      }
    };
  });
  return /*#__PURE__*/React.createElement(Wrapper, instance);
};
export default /*#__PURE__*/forwardRef(ChartTable);