function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { usePrefixCls } from '@teamix/utils';
import React, { useEffect, useMemo, useRef } from 'react';
import { Button, Balloon } from '@alicloudfe/components';
import TeamixIcon from '@teamix/icon';
import FullScreenIcon from './FullScreenIcon';
import FilterColumnIcon from './FilterColumnIcon';
import DensityIcon from './DensityIcon';
import RefreshIcon from './RefreshIcon';
import { useSize, useSafeState } from '@teamix/hooks';
import debounce from 'lodash.debounce';
import './index.scss';
import CardSwitch from './CardSwitch';
import cloneDeep from 'lodash.clonedeep';
var cls = usePrefixCls('teamix-pro-table-toolbar');
var presetToolBarMap = {
  refresh: RefreshIcon,
  density: DensityIcon,
  filtercolumn: FilterColumnIcon,
  fullscreen: FullScreenIcon,
  switchcard: CardSwitch
};
var presetToolBarName = ['refresh', 'density', 'filtercolumn', 'fullscreen'];
var presetToolBar = [{
  name: 'refresh',
  type: 'preset',
  component: RefreshIcon
}, {
  name: 'density',
  type: 'preset',
  component: DensityIcon
}, {
  name: 'filterColumn',
  type: 'preset',
  component: FilterColumnIcon
}, {
  name: 'fullScreen',
  type: 'preset',
  component: FullScreenIcon
}];
var ToolBar = function ToolBar(props) {
  var _toolBarRef$current, _toolBarRef$current$p, _toolBarRef$current$p2;
  var toolBar = props.toolBar,
    fullScreenState = props.fullScreenState,
    switchCardView = props.switchCardView,
    actionRef = props.actionRef,
    _props$toolBarAutoWid = props.toolBarAutoWidth,
    toolBarAutoWidth = _props$toolBarAutoWid === void 0 ? true : _props$toolBarAutoWid;
  var toolBarRef = useRef(null);
  // const toolBarSize = useSize(toolBarRef);
  // 用于获取内容宽度
  var toolBarContentRef = useRef(null);
  // '.teamix-pro-form-query-filter-layout-inline' 元素
  var layoutInlineDom = (_toolBarRef$current = toolBarRef.current) === null || _toolBarRef$current === void 0 ? void 0 : (_toolBarRef$current$p = _toolBarRef$current.parentElement) === null || _toolBarRef$current$p === void 0 ? void 0 : (_toolBarRef$current$p2 = _toolBarRef$current$p.parentElement) === null || _toolBarRef$current$p2 === void 0 ? void 0 : _toolBarRef$current$p2.parentElement;
  // 监听它的尺寸变化
  var layoutInlineSize = useSize(layoutInlineDom);
  // '.teamix-pro-form-query-filter-layout-left' 元素
  var layoutLeftDom = layoutInlineDom === null || layoutInlineDom === void 0 ? void 0 : layoutInlineDom.firstElementChild;
  var leftWidth = layoutLeftDom === null || layoutLeftDom === void 0 ? void 0 : layoutLeftDom.clientWidth;
  // 展示形式，是否平铺
  var _useSafeState = useSafeState(),
    _useSafeState2 = _slicedToArray(_useSafeState, 2),
    flat = _useSafeState2[0],
    setFlat = _useSafeState2[1];
  // 监听高度，> 32px则切换形态
  useEffect(debounce(function () {
    if ((layoutInlineSize === null || layoutInlineSize === void 0 ? void 0 : layoutInlineSize.width) && leftWidth && toolBarContentRef.current && toolBarAutoWidth) {
      var _toolBarContentRef$cu;
      var width = layoutInlineSize.width;
      // 60 为容错
      if (width - leftWidth - 60 <= ((_toolBarContentRef$cu = toolBarContentRef.current) === null || _toolBarContentRef$cu === void 0 ? void 0 : _toolBarContentRef$cu.clientWidth) + 8) {
        setFlat(false);
      } else {
        setFlat(true);
      }
    }
  }, 300));
  // 初始态
  useEffect(function () {
    if (!((layoutInlineSize === null || layoutInlineSize === void 0 ? void 0 : layoutInlineSize.width) && leftWidth)) {
      setFlat(true);
    }
  }, []);
  var toolBarList = useMemo(function () {
    var result = toolBar !== false ? cloneDeep(presetToolBar) : [];
    if (switchCardView && !result.find(function (item) {
      return item.name === 'switchCard';
    })) {
      result.push({
        type: 'preset',
        name: 'switchCard',
        component: presetToolBarMap['switchcard']
      });
    }
    if (Array.isArray(toolBar)) {
      result = toolBar.map(function (item, index) {
        if (typeof item === 'string' && presetToolBarName.includes(item.toLowerCase())) {
          return {
            type: 'preset',
            name: item,
            component: presetToolBarMap[item.toLowerCase()]
          };
        }
        return {
          type: 'custom',
          name: "custom".concat(index),
          component: item
        };
      });
      if (!toolBar.includes('switchCard') && switchCardView && !result.find(function (item) {
        return item.name === 'switchCard';
      })) {
        result.push({
          type: 'preset',
          name: 'switchCard',
          component: presetToolBarMap['switchcard']
        });
      }
    }
    return result;
  }, [toolBar, actionRef.current]);
  var renderFlatShape = useMemo(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: cls('content')
    }, toolBarList.map(function (_ref) {
      var type = _ref.type,
        name = _ref.name,
        Component = _ref.component;
      return /*#__PURE__*/React.createElement("span", {
        className: cls('item', _defineProperty({}, name, true)),
        key: name
      }, type === 'preset' && /*#__PURE__*/React.createElement(Component, _objectSpread({}, props)), type === 'custom' && /*#__PURE__*/React.createElement("div", {
        className: cls({
          custom: true
        })
      }, Component));
    }));
  }, [toolBarList, props.columns]);
  var renderUnFlatShape = function renderUnFlatShape() {
    if (toolBar === false) {
      return /*#__PURE__*/React.createElement(React.Fragment, null);
    }
    return /*#__PURE__*/React.createElement(Balloon.Tooltip, {
      triggerType: ['click'],
      popupProps: {
        cache: true
      },
      style: {
        padding: 8
      },
      trigger: /*#__PURE__*/React.createElement(Button, null, /*#__PURE__*/React.createElement(TeamixIcon, {
        type: "more-line"
      })),
      align: "tr"
    }, renderFlatShape);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: cls('', {
      flat: flat
    }),
    ref: toolBarRef
  }, !flat && !fullScreenState ? renderUnFlatShape() : renderFlatShape, toolBarAutoWidth && /*#__PURE__*/React.createElement("div", {
    className: cls('shadow'),
    ref: toolBarContentRef
  }, renderFlatShape));
};
export default ToolBar;