@teamix/pro 1.1.3 → 1.1.7

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,6 @@
+import { ProTableProps } from './typing';
+import './index.scss';
+export * from './typing';
+export * from '../actions';
+declare const ProTable: (props: ProTableProps) => JSX.Element;
+export default ProTable;