@teamix/pro 1.5.0-beta.1 → 1.6.0-beta.0

package/es/table/components/ToolBar/index.js

@@ -1,15 +1,20 @@
-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 from 'react';
+import React, { useEffect, 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';
 var cls = usePrefixCls('teamix-pro-table-toolbar');
 var presetToolBarMap = {
@@ -36,11 +41,46 @@ var presetToolBar = [{
   type: 'preset',
   component: FullScreenIcon
 }];
-
 var ToolBar = function ToolBar(props) {
-  var toolBar = props.toolBar;
-  var toolBarList = toolBar !== false ? presetToolBar : [];
+  var _toolBarRef$current, _toolBarRef$current$p, _toolBarRef$current$p2;
+  var toolBar = props.toolBar,
+    fullScreenState = props.fullScreenState;
+  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 () {
+    // console.log(
+    //   layoutInlineSize?.width,
+    //   leftWidth,
+    //   toolBarContentRef.current?.clientWidth,
+    // );
+    if ((layoutInlineSize === null || layoutInlineSize === void 0 ? void 0 : layoutInlineSize.width) && leftWidth && toolBarContentRef.current) {
+      var _toolBarContentRef$cu;
+      var width = layoutInlineSize.width;
+      // console.log('layoutInlineSize-width', width);
+      if (width - leftWidth <= ((_toolBarContentRef$cu = toolBarContentRef.current) === null || _toolBarContentRef$cu === void 0 ? void 0 : _toolBarContentRef$cu.clientWidth) + 8) {
+        setFlat(false);
+      } else {
+        setFlat(true);
+      }
+    }
+  }, 300));
+  var toolBarList = toolBar !== false ? presetToolBar : [];
   if (Array.isArray(toolBar)) {
     toolBarList = toolBar.map(function (item, index) {
       if (typeof item === 'string' && presetToolBarName.includes(item.toLowerCase())) {
@@ -50,7 +90,6 @@ var ToolBar = function ToolBar(props) {
           component: presetToolBarMap[item.toLowerCase()]
         };
       }
-
       return {
         type: 'custom',
         name: "custom".concat(index),
@@ -58,22 +97,46 @@ var ToolBar = function ToolBar(props) {
       };
     });
   }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: cls()
-  }, toolBarList.map(function (_ref) {
-    var type = _ref.type,
+  var renderFlatShape = function renderFlatShape() {
+    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(_defineProperty({}, name, true)),
-      key: name
-    }, type === 'preset' && /*#__PURE__*/React.createElement(Component, _objectSpread({}, props)), type === 'custom' && /*#__PURE__*/React.createElement("div", {
-      className: cls({
-        custom: true
-      })
-    }, Component));
-  }));
+      return /*#__PURE__*/React.createElement("span", {
+        className: cls('item', _defineProperty({}, name, true)),
+        key: name
+      }, type === 'preset' && /*#__PURE__*/React.createElement(Component, props), type === 'custom' && /*#__PURE__*/React.createElement("div", {
+        className: cls({
+          custom: true
+        })
+      }, Component));
+    }));
+  };
+  var renderUnFlatShape = function renderUnFlatShape() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__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(), /*#__PURE__*/React.createElement("div", {
+    className: cls('shadow'),
+    ref: toolBarContentRef
+  }, renderFlatShape()));
 };
-
 export default ToolBar;

package/es/table/components/ToolBar/index.scss

@@ -2,20 +2,40 @@
   width: 100%;
   text-align: right;
   margin-bottom: 8px;
+  &-flat {
+    margin-left: 8px;
+  }
+  &-item {
+    display: inline-block;
+    &:not(:first-child) {
+      margin-left: 8px;
+    }
+  }
+  &-content {
+    display: flex;
+  }
+  &-shadow {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+    height: 0px;
+    position: absolute;
+    z-index: -1;
+    overflow: hidden;
+  }
 }
 .teamix-pro-table-toolbar-custom {
   display: inline-block;
-  margin-left: 8px;
 }
 
 // FullScreen
 .teamix-pro-table-toolbar-icon {
-  margin-left: 8px;
   i {
     color: var(--color-fill1-6, #848484);
   }
 }
 
+
 // FilterColumn
 .teamix-pro-table-toolbar-filter-column {
   min-width: 180px;