@teamix/pro 1.0.25 → 1.1.0

package/lib/table/components/ToolBar/Fullscreen.js

@@ -0,0 +1,85 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _components = require("@alicloudfe/components");
+
+require("./index.scss");
+
+var _utils = require("@teamix/utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var FullScreen = function FullScreen(props) {
+  var children = props.children,
+      visible = props.visible,
+      actionRef = props.actionRef;
+
+  function closeByESC(e) {
+    if (visible && e.code === 'Escape') {
+      var _actionRef$current, _actionRef$current$se, _actionRef$current2, _actionRef$current2$f;
+
+      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setFullScreenState) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, false);
+      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$f = _actionRef$current2.fullScreen) === null || _actionRef$current2$f === void 0 ? void 0 : _actionRef$current2$f.call(_actionRef$current2);
+    }
+  } // 监听esc按钮
+
+
+  (0, _react.useEffect)(function () {
+    var _actionRef$current3, _actionRef$current3$s;
+
+    actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$s = _actionRef$current3.setFullScreenState) === null || _actionRef$current3$s === void 0 ? void 0 : _actionRef$current3$s.call(_actionRef$current3, visible);
+    window.addEventListener('keydown', closeByESC);
+    return function () {
+      window.removeEventListener('keydown', closeByESC);
+    };
+  }, [visible]); // 全屏开启之后
+
+  var afterOpen = function afterOpen() {
+    _components.Message.show({
+      type: 'notice',
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, (0, _utils.getMessage)('press')), /*#__PURE__*/_react.default.createElement("span", {
+        className: "teamix-pro-table-full-screen-message-esc"
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: "teamix-pro-table-full-screen-message-esc-title"
+      }, "esc")), /*#__PURE__*/_react.default.createElement("span", null, (0, _utils.getMessage)('toExitFullScreen'))),
+      className: 'teamix-pro-table-full-screen-message'
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, /*#__PURE__*/_react.default.createElement(_components.Overlay, {
+    canCloseByOutSideClick: false,
+    align: "cc cc",
+    cache: true,
+    disableScroll: true,
+    shouldUpdatePosition: true,
+    animation: {
+      in: 'fadeIn',
+      out: 'fadeOut'
+    },
+    visible: visible,
+    wrapperStyle: {
+      zIndex: 999
+    },
+    afterOpen: afterOpen,
+    onRequestClose: function onRequestClose() {
+      var _actionRef$current4, _actionRef$current4$f;
+
+      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$f = _actionRef$current4.fullScreen) === null || _actionRef$current4$f === void 0 ? void 0 : _actionRef$current4$f.call(_actionRef$current4);
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "teamix-pro-table-full-screen"
+  }, children)));
+};
+
+var _default = FullScreen;
+exports.default = _default;

package/lib/table/components/ToolBar/RefreshIcon.d.ts

@@ -0,0 +1,4 @@
+import { ProTableLayoutProps } from '../../typing';
+import './index.scss';
+declare const LayoutIcon: (props: ProTableLayoutProps) => JSX.Element;
+export default LayoutIcon;

package/lib/table/components/ToolBar/RefreshIcon.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _components = require("@alicloudfe/components");
+
+var _icon = _interopRequireDefault(require("@teamix/icon"));
+
+var _utils = require("@teamix/utils");
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./index.scss");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 刷新
+ */
+var cls = (0, _utils.baseClass)('teamix-pro-table-toolbar-icon');
+
+var LayoutIcon = function LayoutIcon(props) {
+  var actionRef = props.actionRef; // const [fullscreen, setFullscreen] = useState<boolean>(false);
+  // // 销毁监听函数
+  // useEffect(() => {
+  //   return () => {
+  //     actionRef.current?.off?.('refreshIcon');
+  //   };
+  // }, []);
+  // // 监听全屏变化
+  // actionRef.current?.on?.(
+  //   (state: boolean) => {
+  //     setFullscreen(state);
+  //   },
+  //   'fullScreenState',
+  //   'refreshIcon',
+  // );
+
+  return /*#__PURE__*/_react.default.createElement(_components.Balloon.Tooltip, {
+    trigger: /*#__PURE__*/_react.default.createElement(_components.Button, {
+      iconSize: "small",
+      className: cls(),
+      onClick: function onClick() {
+        var _actionRef$current, _actionRef$current$re;
+
+        return (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$re = _actionRef$current.refresh) === null || _actionRef$current$re === void 0 ? void 0 : _actionRef$current$re.call(_actionRef$current);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+      size: "small",
+      type: "refresh-line"
+    })),
+    align: "t"
+  }, (0, _utils.getMessage)('refresh'));
+};
+
+var _default = LayoutIcon;
+exports.default = _default;

package/lib/table/components/ToolBar/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.scss';
+import { ProTableLayoutProps } from '../../typing';
+declare const ToolBar: React.FC<ProTableLayoutProps>;
+export default ToolBar;

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

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("@teamix/utils");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FullScreenIcon = _interopRequireDefault(require("./FullScreenIcon"));
+
+var _FilterColumnIcon = _interopRequireDefault(require("./FilterColumnIcon"));
+
+var _DensityIcon = _interopRequireDefault(require("./DensityIcon"));
+
+var _RefreshIcon = _interopRequireDefault(require("./RefreshIcon"));
+
+require("./index.scss");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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; }
+
+var cls = (0, _utils.baseClass)('teamix-pro-table-toolbar');
+var presetToolBarMap = {
+  refresh: _RefreshIcon.default,
+  density: _DensityIcon.default,
+  filtercolumn: _FilterColumnIcon.default,
+  fullscreen: _FullScreenIcon.default
+};
+var presetToolBarName = ['refresh', 'density', 'filtercolumn', 'fullscreen'];
+var presetToolBar = [{
+  name: 'refresh',
+  type: 'preset',
+  component: _RefreshIcon.default
+}, {
+  name: 'density',
+  type: 'preset',
+  component: _DensityIcon.default
+}, {
+  name: 'filterColumn',
+  type: 'preset',
+  component: _FilterColumnIcon.default
+}, {
+  name: 'fullScreen',
+  type: 'preset',
+  component: _FullScreenIcon.default
+}];
+
+var ToolBar = function ToolBar(props) {
+  var toolBar = props.toolBar;
+  var toolBarList = toolBar !== false ? presetToolBar : [];
+
+  if (Array.isArray(toolBar)) {
+    toolBarList = 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
+      };
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: cls()
+  }, toolBarList.map(function (_ref) {
+    var type = _ref.type,
+        name = _ref.name,
+        Component = _ref.component;
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: cls(_defineProperty({}, name, true)),
+      key: name
+    }, type === 'preset' && /*#__PURE__*/_react.default.createElement(Component, _objectSpread({}, props)), type === 'custom' && /*#__PURE__*/_react.default.createElement("div", {
+      className: cls({
+        custom: true
+      })
+    }, Component));
+  }));
+};
+
+var _default = ToolBar;
+exports.default = _default;

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

@@ -0,0 +1,110 @@
+.teamix-pro-table-toolbar {
+  width: 100%;
+  text-align: right;
+}
+.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;
+  max-height: 350px;
+  overflow: auto;
+  box-shadow: var(--popup-local-shadow, 0px 6px 24px 0px rgba(0, 0, 0, 0.1));
+  &-reset {
+    position: absolute;
+    right: 16px;
+    top: 6px;
+  }
+  // .next-menu {
+  //   padding: 0;
+  // }
+  .next-menu-divider {
+    margin: 0;
+  }
+  .next-menu-item-inner {
+    text-overflow: clip;
+    &:hover {
+      .teamix-pro-table-toolbar-filter-column-sort {
+        visibility: visible;
+        cursor: pointer;
+      }
+    }
+  }
+  .next-menu-item-text {
+    position: relative;
+    display: inline-block;
+    width: calc(100% - 8px);
+    height: 32px;
+    line-height: 32px;
+    padding-right: 40px;
+    white-space: nowrap;
+    overflow: hidden;
+    .teamix-pro-table-toolbar-filter-column-sort {
+      visibility: hidden;
+      position: absolute;
+      right: 16px;
+      top: 0;
+      color: var(--color-text1-7);
+      i {
+        &:hover {
+          color: var(--color-brand1-5);
+        }
+        &:active {
+          color: var(--color-brand1-6);
+        }
+      }
+    }
+  }
+}
+
+// fullscreen
+.teamix-pro-table-full-screen {
+  width: 100vw;
+  height: 100vh;
+  background: var(--color-fill1-1);
+  overflow: hidden;
+}
+.teamix-pro-table-full-screen-message.teamix-pro-table-full-screen-message.teamix-pro-table-full-screen-message {
+  background-color: var(--balloon-tooltip-color-bg, #292929);
+  border-color: var(--balloon-tooltip-color-border, transparent);
+  box-shadow: var(--balloon-tooltip-shadow, none);
+  color: var(--balloon-tooltip-color, #FFFFFF);
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 7px 12px;
+  font-size: 12px;
+  border-radius: 4px;
+  .next-message-symbol-icon {
+    display: none;
+  }
+  .next-message-content {
+    color: var(--balloon-tooltip-color, #FFFFFF);
+    padding: 0;
+  }
+  .teamix-pro-table-full-screen-message-esc {
+    margin: 0 4px;
+    border-radius: 2px;
+    padding: 0 2px;
+    position: relative;
+    // box-shadow: inset 0 0 1px 1px var(--color-fill1-1);
+    border: 1px solid var(--balloon-tooltip-color, #FFFFFF);
+    display: inline-block;
+    line-height: 1;
+    &-title {
+      transform: translateY(-0.5px);
+      display: inline-block;
+    }
+  }
+}

package/lib/table/index.d.ts

@@ -0,0 +1,7 @@
+import { ProTableProps } from './typing';
+import './index.scss';
+export * from './typing';
+export * from '../actions';
+export { default as ActionButton } from '../actions';
+declare const ProTable: (props: ProTableProps) => JSX.Element;
+export default ProTable;