@teamix/pro 1.2.23 → 1.2.28

package/es/step/ProStepItem/components/VerStepItem/index.scss

@@ -0,0 +1,287 @@
+.teamix-pro-step {
+    /** 修改了一些基础组件样式*/
+    .next-timeline-item-has-left-content > .next-timeline-item-left-content p {
+        font-family: var(--font-size-body-1, 12px);
+        text-align: right;
+        margin-left: -20px;
+    }
+
+    .next-timeline-item-content {
+        margin-top: -6px;
+        margin-left: var(--s-4);
+    }
+
+    .next-timeline-item-done .next-timeline-item-content .next-timeline-item-title {
+        font-weight: normal;
+    }
+
+    .next-btn-text.next-btn-primary {
+        margin-left: -10px;
+    }
+
+    .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-content {
+        margin-left: var(--s-26);
+    }
+
+    &-wrapper {
+        overflow: hidden;
+        &-dot {
+            padding: 0 0 0 var(--s-2);
+        }
+
+        &-circle {
+            padding: 0 0 0 var(--s-4);
+        }
+
+        &-time-left {
+            &-dot {
+                padding: 0 0 0 var(--s-1);
+            }
+
+            &-circle {
+                padding: 0 0 0 var(--s-2);
+            }
+        }
+
+        &-left {
+            float: left;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            &-fold-icon {
+                width: var(--s-4);
+                height: var(--s-7);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+
+                &-close {
+                    width: 0;
+                    height: 0;
+                    border-left: 4px solid var(--color-text1-5, #a8a8a8);
+                    border-bottom: 4px solid transparent;
+                    border-top: 4px solid transparent;
+                }
+
+                &-open {
+                    transform: rotate(90deg);
+                }
+            }
+
+            &-fold-image {
+                height: var(--s-7);
+                width: var(--s-7);
+                border-radius: 50%;
+                overflow: hidden;
+                margin-right: var(--s-2);
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    background-size: cover;
+                }
+            }
+        }
+
+        &-right {
+            float: left;
+            &-top {
+                display: flex;
+                justify-content: left;
+                align-items: center;
+                height: var(--s-7);
+
+                &-title-info {
+                    &-normal {
+                        font-size: var(--font-size-body-2, 14px);
+                        color: var(--color-text1-3, #333333);
+                    }
+
+                    &-small {
+                        font-size: var(--font-size-body-1, 12px);
+                        color: var(--color-text1-3, #333333);
+                    }
+
+                    &-active {
+                        font-weight: 500;
+                        color: var(--color-text1-4, #1a1a1a);
+                    }
+                    &-disabled {
+                        color: var(--color-text1-1, #ccc);
+                    }
+                }
+
+                &-tag-info {
+                    padding-left: var(--s-3);
+                }
+
+                &-subTitle-info {
+                    padding-left: var(--s-4);
+                    font-family: var(--font-size-body-1, 12px);
+                    color: var(--color-text1-8, #848484);
+                }
+            }
+            &-discribe-info {
+                font-family: var(--font-size-body-1, 12px);
+                color: var(--color-text1-2, #5a5a5a);
+                margin-top: 1px;
+            }
+
+            &-content-info {
+                margin-top: var(--s-2);
+                &-close {
+                    display: none;
+                }
+                &-open {
+                    display: block;
+                }
+            }
+        }
+    }
+}
+
+.teamix-pro-step {
+    &-ver-step-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &-render-wrapper {
+            width: var(--s-6);
+            height: var(--s-6);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            &-disabled {
+                cursor: not-allowed;
+            }
+
+            &-dot {
+                width: var(--s-2);
+                height: var(--s-2);
+                border-radius: 50%;
+
+                &-disabled {
+                    background-color: transparent;
+                    background: transparent;
+                    color: var(--color-line1-3, #ccc);
+                    border: 1px solid var(--color-line1-3, #ccc);
+                }
+
+                &-process {
+                    background: var(--color-notice-5, #0064c8);
+                    background-color: var(--color-notice-5, #0064c8);
+                }
+                &-success {
+                    background: var(--color-notice-7, #589ad8);
+                    background-color: var(--color-notice-7, #589ad8);
+                }
+                &-error {
+                    background: var(--color-error-5, #e84738);
+                    background-color: var(--color-error-5, #e84738);
+                }
+                &-warning {
+                    background: var(--color-warning-5, #f98e1a);
+                    background-color: var(--color-warning-5, #f98e1a);
+                }
+                &-wait {
+                    background: var(--color-line1-3, #ccc);
+                    background-color: var(--color-line1-3, #ccc);
+                }
+            }
+            &-icon {
+                &-disabled {
+                    color: var(--color-line1-3, #ccc);
+                }
+
+                &-process {
+                    color: var(--color-notice-5, #0064c8);
+                }
+                &-success {
+                    color: var(--color-notice-7, #589ad8);
+                }
+                &-error {
+                    color: var(--color-error-5, #e84738);
+                }
+                &-warning {
+                    color: var(--color-warning-5, #f98e1a);
+                }
+                &-wait {
+                    color: var(--color-line1-3, #ccc);
+                }
+            }
+
+            &-circle {
+                width: var(--s-5);
+                height: var(--s-5);
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                &-disabled {
+                    background-color: transparent;
+                    background: transparent;
+                    color: var(--color-line1-3, #ccc);
+                    border: 1px solid var(--color-line1-3, #ccc);
+                }
+                &-process {
+                    color: var(--color-white, #fff);
+                    background: var(--color-notice-5, #0064c8);
+                    background-color: var(--color-notice-5, #0064c8);
+                }
+                &-success {
+                    color: var(--color-notice-5, #0064c8);
+                    background: var(--color-brand1-2, #cae3fd);
+                    background-color: var(--color-brand1-2, #cae3fd);
+                }
+                &-error {
+                    color: var(--color-error-5, #e84738);
+                    background: var(--color-error-2, #fcceca);
+                    background-color: var(--color-error-2, #fcceca);
+                }
+                &-warning {
+                    color: var(--color-warning-5, #f98e1a);
+                    background: var(--color-warning-2, #ffe0bf);
+                    background-color: var(--color-warning-2, #ffe0bf);
+                }
+                &-wait {
+                    color: var(--color-black, #000);
+                    background: var(--color-fill1-3, #eaeaea);
+                    background-color: var(--color-fill1-3, #eaeaea);
+                }
+            }
+
+            &-percent-color {
+                width: var(--s-5);
+                height: var(--s-5);
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background: transparent;
+                background-color: transparent;
+                color: var(--color-notice-5, #0064c8);
+                font-family: var(--font-size-body-1, 12px);
+                word-break: normal;
+                white-space: nowrap;
+                border: 1px solid var(--color-line1-2, #d9d9d9);
+            }
+        }
+    }
+}
+
+.teamix-pro-step {
+    &-time-left {
+        display: block;
+        margin-top: -2px;
+        &-dot {
+            width: var(--s-27);
+            padding-right: var(--s-2);
+        }
+        &-circle {
+            width: var(--s-31);
+            margin-left: -30px;
+        }
+    }
+}

package/es/step/ProStepItem/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HozStepItemProps, ModeStatusFromProStep, VerStepItemProps } from '../typing';
+declare const ProStepItem: React.FC<HozStepItemProps & VerStepItemProps & ModeStatusFromProStep>;
+export default ProStepItem;

package/es/step/ProStepItem/index.js

@@ -0,0 +1,57 @@
+var _excluded = ["_mode", "subTitle", "tags", "discription", "timeLeft", "image", "animation", "collapsed", "collapsible", "defaultCollapsed", "onCollapse"];
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import VerStepItem from './components/VerStepItem';
+import HozStepItem from './components/HozStepItem';
+
+var ProStepItem = function ProStepItem(props) {
+  var _mode = props._mode,
+      subTitle = props.subTitle,
+      tags = props.tags,
+      discription = props.discription,
+      timeLeft = props.timeLeft,
+      image = props.image,
+      animation = props.animation,
+      collapsed = props.collapsed,
+      collapsible = props.collapsible,
+      defaultCollapsed = props.defaultCollapsed,
+      onCollapse = props.onCollapse,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var renderProStepItem = function renderProStepItem() {
+    if (_mode === 'ver') {
+      return /*#__PURE__*/React.createElement(VerStepItem, _objectSpread({
+        subTitle: subTitle,
+        discription: discription,
+        tags: tags,
+        image: image,
+        timeLeft: timeLeft,
+        animation: animation,
+        collapsed: collapsed,
+        collapsible: collapsible,
+        defaultCollapsed: defaultCollapsed,
+        onCollapse: onCollapse
+      }, others));
+    }
+
+    return /*#__PURE__*/React.createElement(HozStepItem, _objectSpread({}, others));
+  };
+
+  return renderProStepItem();
+};
+
+ProStepItem.displayName = 'ProStepItem';
+ProStepItem.defaultProps = {
+  _mode: 'hoz'
+};
+export default ProStepItem;

package/es/step/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ProStepProps } from './typing';
+import ProStepItem from './ProStepItem';
+interface ProStepProperties {
+    /** ProStepItem */
+    Item: typeof ProStepItem;
+}
+declare const ProStep: React.FC<ProStepProps> & ProStepProperties;
+export { ProStep, ProStepItem };

package/es/step/index.js

@@ -0,0 +1,101 @@
+var _excluded = ["mode", "items", "shape", "children"];
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useMemo } from 'react';
+import { Step, Timeline } from '@alicloudfe/components';
+import ProStepItem from './ProStepItem';
+
+var ProStep = function ProStep(props) {
+  var mode = props.mode,
+      items = props.items,
+      shape = props.shape,
+      children = props.children,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var current = props.current,
+      labelPlacement = props.labelPlacement,
+      readOnly = props.readOnly,
+      animation = props.animation,
+      size = props.size;
+  var fold = props.fold; // 判断渲染组件是不是 ProStepItem, 并返回筛选后的children
+
+  var renderChildren = useMemo(function () {
+    return React.Children.map(children, function (child, index) {
+      var childElement = child;
+      var displayName = childElement.type.displayName;
+
+      if (displayName === 'ProStepItem') {
+        return /*#__PURE__*/React.cloneElement(childElement, {
+          _size: size,
+          _mode: mode,
+          _index: index,
+          _current: current,
+          _shape: shape
+        });
+      } // 如果不是 ProStepItem
+
+
+      console.error('Warning: ProStep has a child which is not a ProStepItem component');
+    });
+  }, [children]); // 设置circle, 覆盖 dot 阻止重新渲染节点样式
+
+  var shapeMap = function shapeMap() {
+    if (shape === 'arrow') return 'arrow';
+    return 'circle';
+  }; // 渲染 ProStepItem
+
+
+  var renderItem = function renderItem() {
+    // 传递了 item 采用 item 渲染数组的方式
+    if (items) {
+      return items.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(ProStepItem, _objectSpread({
+          key: index,
+          _mode: mode,
+          _shape: shape,
+          _index: index,
+          _current: current,
+          _size: size
+        }, item));
+      });
+    } else {
+      return renderChildren;
+    }
+  }; // 渲染 ProStep
+
+
+  var renderProStep = function renderProStep() {
+    if (mode === 'ver') {
+      return /*#__PURE__*/React.createElement(Timeline, _objectSpread({
+        fold: fold
+      }, others), renderItem());
+    }
+
+    return /*#__PURE__*/React.createElement(Step, _objectSpread({
+      current: current,
+      shape: shapeMap(),
+      labelPlacement: labelPlacement,
+      readOnly: readOnly,
+      animation: animation
+    }, others), renderItem());
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "teamix-pro-step"
+  }, renderProStep());
+};
+
+ProStep.Item = ProStepItem;
+ProStep.defaultProps = {
+  mode: 'hoz'
+};
+export { ProStep, ProStepItem };

package/es/step/typing.d.ts

@@ -0,0 +1,96 @@
+import { ItemProps as StepItemProps } from '@alicloudfe/components/types/step';
+import { ItemProps as TimeLineItemProps } from '@alicloudfe/components/types/timeline';
+import { ReactNode } from 'react';
+import { ProTagItem } from '@teamix/utils';
+export declare type ProStepItemStatus = 'success' | 'fail' | 'process' | 'warning' | 'wait';
+export declare type ModeStatusFromProStep = {
+    _mode?: string | 'hoz' | 'ver';
+};
+export declare type FoldProps = {
+    foldArea: [number, number];
+    foldShow: boolean;
+};
+export declare type ProStepProps = HozStepProps | VerTimeLineProps;
+export declare type ProStepBaseProps = {
+    /** 步骤条：节点展示类型*/
+    shape?: 'icon' | 'arrow' | 'dot' | 'number';
+    /** style */
+    style?: React.CSSProperties;
+    /** className */
+    className?: string;
+} & React.HTMLAttributes<HTMLElement>;
+export interface HozStepProps extends ProStepBaseProps {
+    /** 当前组件的展示形式 */
+    mode?: 'hoz';
+    /** 内部渲染自组件 */
+    items?: HozStepItemProps[];
+    /** 步骤条：当前步骤 */
+    current?: number;
+    /** 步骤条: 横向布局时( direction 为 hoz )的内容排列*/
+    labelPlacement?: 'hoz' | 'ver';
+    /** 步骤条: 是否可读模式 */
+    readOnly?: boolean;
+    /** 步骤条: 是否开启动效 */
+    animation?: boolean;
+    /**dot 形态下切换size */
+    size?: 'normal' | 'small';
+}
+export interface VerTimeLineProps extends ProStepBaseProps {
+    /** 当前组件的展示形式 */
+    mode?: 'ver';
+    /** 内部渲染自组件 */
+    items?: VerStepItemProps[];
+    /** 时间线: 自定义折叠选项 */
+    fold?: FoldProps[];
+}
+export interface ProStepItemBaseProps {
+    /**步骤条：节点展示类型 */
+    _shape?: 'icon' | 'arrow' | 'dot' | 'number';
+    /**节点索引 */
+    _index?: number;
+    /**活跃节点 */
+    _current?: number;
+    /**节点状态 */
+    status?: string | ProStepItemStatus;
+    /**节点设置为 icon 图标 */
+    icon?: string;
+    /**节点的内容 */
+    content?: ReactNode;
+    /**节点标题 */
+    title?: ReactNode;
+    /**自定义渲染 */
+    dotRender?: (index?: number, status?: string) => ReactNode;
+    /**点击事件 */
+    onClick?: (index: number) => void;
+    /**百分比展示 */
+    percent?: number;
+    /**是否禁用当前节点 */
+    disabled?: boolean;
+}
+export interface HozStepItemProps extends ProStepItemBaseProps {
+    /**dot 形态下切换size */
+    _size?: 'normal' | 'small';
+}
+export interface VerStepItemProps extends ProStepItemBaseProps {
+    /**节点副标题，在 timeline 可以展示格式化后的时间 */
+    subTitle?: ReactNode;
+    /**节点对应描述 */
+    discription?: ReactNode;
+    /**节点的 tag */
+    tags?: ProTagItem[] | ReactNode;
+    /**左侧展示内容 */
+    timeLeft?: ReactNode;
+    /**头像 */
+    image?: string | ReactNode;
+    /**是否需要 animation 动画 */
+    animation?: boolean;
+    /**卡片是否可折叠 */
+    collapsible?: boolean;
+    /**默认是否折叠，用于非受控模式 */
+    defaultCollapsed?: boolean;
+    /**是否折叠，受控模式 */
+    collapsed?: boolean;
+    /**折叠状态改变的回调函数 */
+    onCollapse?: (collapsed: boolean) => void;
+}
+export declare type ProStepItemProps = (HozStepItemProps | VerStepItemProps) & React.HTMLAttributes<HTMLElement> & StepItemProps & TimeLineItemProps;

package/es/step/typing.js

@@ -0,0 +1 @@
+export {};

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

@@ -150,8 +150,6 @@ var Filter = function Filter(props) {
         setVisible(!visible);
       }
     }),
-    //@ts-ignore
-    v2: true,
     triggerType: ['click'],
     align: "tl bl",
     visible: visible,
@@ -189,20 +187,7 @@ var Filter = function Filter(props) {
       } // 需要带上其他所有的信息
 
 
-      var rules = (_actionRef$current$ge5 = (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$g = _actionRef$current3.getState) === null || _actionRef$current3$g === void 0 ? void 0 : (_actionRef$current3$g2 = _actionRef$current3$g.call(_actionRef$current3)) === null || _actionRef$current3$g2 === void 0 ? void 0 : _actionRef$current3$g2.filterRules) !== null && _actionRef$current$ge5 !== void 0 ? _actionRef$current$ge5 : {};
-      var params = Object.fromEntries([].concat(_toConsumableArray(Object.entries(rules).map(function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 2),
-            k = _ref6[0],
-            v = _ref6[1];
-
-        if (v) {
-          return [k, v.params];
-        }
-
-        return null;
-      })), [[column.dataIndex, param]]).filter(function (item) {
-        return item && (item === null || item === void 0 ? void 0 : item[1]);
-      })); // 再设置所有的列筛选状态
+      var rules = (_actionRef$current$ge5 = (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$g = _actionRef$current3.getState) === null || _actionRef$current3$g === void 0 ? void 0 : (_actionRef$current3$g2 = _actionRef$current3$g.call(_actionRef$current3)) === null || _actionRef$current3$g2 === void 0 ? void 0 : _actionRef$current3$g2.filterRules) !== null && _actionRef$current$ge5 !== void 0 ? _actionRef$current$ge5 : {}; // 再设置所有的列筛选状态
 
       (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$s = _actionRef$current4.setFilterRules) === null || _actionRef$current4$s === void 0 ? void 0 : _actionRef$current4$s.call(_actionRef$current4, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
         rules: selected,
@@ -220,7 +205,7 @@ var Filter = function Filter(props) {
         } // 发送请求
 
 
-        (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$r = _actionRef$current6.request) === null || _actionRef$current6$r === void 0 ? void 0 : _actionRef$current6$r.call(_actionRef$current6, _objectSpread(_objectSpread({}, params), {}, _defineProperty({}, targetPageKey, 1)));
+        (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$r = _actionRef$current6.request) === null || _actionRef$current6$r === void 0 ? void 0 : _actionRef$current6$r.call(_actionRef$current6, _defineProperty({}, targetPageKey, 1));
         (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$r = _actionRef$current7.resetPage) === null || _actionRef$current7$r === void 0 ? void 0 : _actionRef$current7$r.call(_actionRef$current7); // 清空表格选择
 
         (_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$c = _actionRef$current8.clearRowSelection) === null || _actionRef$current8$c === void 0 ? void 0 : _actionRef$current8$c.call(_actionRef$current8);