@teamix/pro 1.2.32 → 1.3.0

package/es/{step/ProStepItem/components/VerStepItem → timeline/ProTimeLineItem}/index.scss

@@ -1,4 +1,8 @@
-.teamix-pro-step {
+.theme-hybridcloud-dark {
+    --wait-bg-color: #4d4d4d;
+}
+
+.teamix-pro-timeline {
     /** 修改了一些基础组件样式*/
     .next-timeline-item-has-left-content > .next-timeline-item-left-content p {
         font-family: var(--font-size-body-1, 12px);
@@ -23,6 +27,9 @@
         margin-left: var(--s-26);
     }
 
+    /**
+     *  title 区域样式
+     */
     &-wrapper {
         overflow: hidden;
         &-dot {
@@ -91,25 +98,12 @@
                 justify-content: left;
                 align-items: center;
                 height: var(--s-7);
+                margin-bottom: -4px;
 
                 &-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);
-                    }
+                    font-weight: 500;
+                    font-size: var(--font-size-body-2, 14px);
+                    color: var(--color-text1-3, #333333);
                 }
 
                 &-tag-info {
@@ -125,11 +119,10 @@
             &-discribe-info {
                 font-family: var(--font-size-body-1, 12px);
                 color: var(--color-text1-2, #5a5a5a);
-                margin-top: 1px;
+                margin-bottom: var(--s-1);
             }
 
             &-content-info {
-                margin-top: var(--s-2);
                 &-close {
                     display: none;
                 }
@@ -139,10 +132,10 @@
             }
         }
     }
-}
-
-.teamix-pro-step {
-    &-ver-step-item {
+    /**
+     *  节点样式
+     */
+    &-item {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -152,63 +145,43 @@
             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);
+                    background: var(--color-notice-4, #2a7dd1);
                 }
                 &-success {
-                    background: var(--color-notice-7, #589ad8);
-                    background-color: var(--color-notice-7, #589ad8);
+                    background: var(--color-success-4, #43bf7d);
                 }
                 &-error {
-                    background: var(--color-error-5, #e84738);
-                    background-color: var(--color-error-5, #e84738);
+                    background: var(--color-error-4, #ed675a);
                 }
                 &-warning {
-                    background: var(--color-warning-5, #f98e1a);
-                    background-color: var(--color-warning-5, #f98e1a);
+                    background: var(--color-warning-4, #ffa544);
                 }
                 &-wait {
-                    background: var(--color-line1-3, #ccc);
-                    background-color: var(--color-line1-3, #ccc);
+                    background: var(--wait-bg-color, var(--color-line1-5));
                 }
             }
             &-icon {
-                &-disabled {
-                    color: var(--color-line1-3, #ccc);
-                }
-
                 &-process {
-                    color: var(--color-notice-5, #0064c8);
+                    color: var(--color-notice-4, #2a7dd1);
                 }
                 &-success {
-                    color: var(--color-notice-7, #589ad8);
+                    color: var(--color-success-4, #43bf7d);
                 }
                 &-error {
-                    color: var(--color-error-5, #e84738);
+                    color: var(--color-error-4, #ed675a);
                 }
                 &-warning {
-                    color: var(--color-warning-5, #f98e1a);
+                    color: var(--color-warning-4, #ffa544);
                 }
                 &-wait {
-                    color: var(--color-line1-3, #ccc);
+                    color: var(--wait-bg-color, var(--color-line1-5));
                 }
             }
 
@@ -219,59 +192,34 @@
                 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);
+                    color: var(--color-success-4, #43bf7d);
+                    background: var(--color-success-2, #cdf8e1);
                 }
                 &-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);
+                    color: var(--wait-bg-color, var(--color-line1-5));
                     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;

package/es/timeline/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ProTimeLineProps } from './typing';
+import ProTimeLineItem from './ProTimeLineItem';
+import './index.scss';
+interface ProTimelineProperties {
+    /** ProTimeLineItem */
+    Item: typeof ProTimeLineItem;
+}
+declare const ProTimeline: React.FC<ProTimeLineProps> & ProTimelineProperties;
+export { ProTimeline, ProTimeLineItem };

package/es/{step → timeline}/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["mode", "items", "shape", "children"];
+var _excluded = ["items", "comment", "shape", "fold", "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; }
 
@@ -11,91 +11,67 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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,
+import { Timeline } from '@alicloudfe/components';
+import ProTimeLineItem from './ProTimeLineItem';
+import { baseClass } from '@teamix/utils';
+import classNames from 'classnames';
+import './index.scss';
+var cls = baseClass('teamix-pro-timeline');
+
+var ProTimeline = function ProTimeline(props) {
+  var items = props.items,
+      comment = props.comment,
       shape = props.shape,
+      fold = props.fold,
       children = props.children,
-      others = _objectWithoutProperties(props, _excluded);
+      others = _objectWithoutProperties(props, _excluded); // 判断渲染组件是不是 ProTimelineItem, 并返回筛选后的children
 
-  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) {
+    return React.Children.map(children, function (child) {
       var childElement = child;
       var displayName = childElement.type.displayName;
 
-      if (displayName === 'ProStepItem') {
+      if (displayName === 'ProTimeLineItem') {
         return /*#__PURE__*/React.cloneElement(childElement, {
-          _size: size,
-          _mode: mode,
-          _index: index,
-          _current: current,
-          _shape: shape
+          _shape: shape,
+          _comment: comment
         });
-      } // 如果不是 ProStepItem
+      }
 
-
-      console.error('Warning: ProStep has a child which is not a ProStepItem component');
+      console.error('Warning: ProTimeline has a child which is not a ProTimelineItem component');
     });
-  }, [children]); // 设置circle, 覆盖 dot 阻止重新渲染节点样式
-
-  var shapeMap = function shapeMap() {
-    if (shape === 'arrow') return 'arrow';
-    return 'circle';
-  }; // 渲染 ProStepItem
-
+  }, [children]);
 
   var renderItem = function renderItem() {
     // 传递了 item 采用 item 渲染数组的方式
     if (items) {
       return items.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(ProStepItem, _objectSpread({
+        return /*#__PURE__*/React.createElement(ProTimeLineItem, _objectSpread({
           key: index,
-          _mode: mode,
           _shape: shape,
-          _index: index,
-          _current: current,
-          _size: size
+          _comment: comment
         }, item));
       });
     } else {
       return renderChildren;
     }
-  }; // 渲染 ProStep
-
+  }; // 渲染 ProTimelineItem
 
-  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
+  var renderProTimeline = function renderProTimeline() {
+    return /*#__PURE__*/React.createElement(Timeline, _objectSpread({
+      fold: fold
     }, others), renderItem());
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "teamix-pro-step"
-  }, renderProStep());
+    className: classNames(cls({
+      '': true,
+      comment: comment
+    }))
+  }, renderProTimeline());
 };
 
-ProStep.Item = ProStepItem;
-ProStep.defaultProps = {
-  mode: 'hoz'
-};
-export { ProStep, ProStepItem };
+ProTimeline.Item = ProTimeLineItem;
+export { ProTimeline, ProTimeLineItem };

package/es/timeline/index.scss

@@ -0,0 +1,7 @@
+.teamix-pro-timeline{
+    &-comment {
+        .next-timeline-item-done .next-timeline-item-timeline{
+            height: 0;
+        }
+    }
+}

package/es/timeline/typing.d.ts

@@ -0,0 +1,101 @@
+import { ReactNode } from 'react';
+import { ProTagItem } from '@teamix/utils';
+export declare type ProTimeLineItemStatus = 'success' | 'fail' | 'process' | 'warning' | 'wait';
+export declare type FoldProps = {
+    /**
+     * 折叠区域
+     */
+    foldArea: [number, number];
+    /**
+     * 是否展示折叠图标
+     */
+    foldShow: boolean;
+};
+export declare type ProTimeLineProps = {
+    /**
+     * 时间线：节点展示类型
+     */
+    shape?: 'circle' | 'dot';
+    /**
+     * 内部渲染自组件
+     */
+    items?: ProTimeLineItemProps[];
+    /**
+     * 时间线: 自定义折叠选项
+     */
+    fold?: FoldProps[];
+    /**
+     * 是否为评论型 timeline
+     */
+    comment?: boolean;
+};
+export declare type ProTimeLineItemProps = {
+    /**
+     * 是否为评论型 timeline
+     */
+    _comment?: boolean;
+    /**
+     * 时间线：节点展示类型
+     */
+    _shape?: 'circle' | 'dot';
+    /**
+     * 节点状态
+     */
+    status?: string | ProTimeLineItemStatus;
+    /**
+     * 图标
+     */
+    icon?: string;
+    /**
+     * 节点的内容
+     */
+    content?: ReactNode;
+    /**
+     * 节点标题
+     */
+    title?: ReactNode;
+    /**
+     * 自定义渲染
+     */
+    dotRender?: (index?: number, status?: string) => ReactNode;
+    /**
+     * 节点副标题
+     */
+    subTitle?: ReactNode;
+    /**
+     * 节点对应描述
+     */
+    discription?: ReactNode;
+    /**
+     * 节点的标签
+     */
+    tags?: ProTagItem[] | ReactNode;
+    /**
+     * 左侧展示时间
+     */
+    timeLeft?: ReactNode;
+    /**
+     * 头像
+     */
+    image?: string | ReactNode;
+    /**
+     * animation 动画
+     */
+    animation?: boolean;
+    /**
+     * 卡片是否可折叠
+     */
+    collapsible?: boolean;
+    /**
+     * 默认是否折叠，用于非受控模式
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * 是否折叠，受控模式
+     */
+    collapsed?: boolean;
+    /**
+     * 折叠状态改变的回调函数
+     */
+    onCollapse?: (collapsed: boolean) => void;
+};

package/lib/actions/dialog-form.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,7 +23,7 @@ var _dialog = _interopRequireDefault(require("./dialog"));
 var _utils2 = require("./utils");
 
 var _excluded = ["schema"],
-    _excluded2 = ["schema", "useFieldValuesForRequest", "initialValues", "initialRequest", "formProps", "size", "onFinish"];
+    _excluded2 = ["schema", "useFieldValuesForRequest", "initialValues", "initialRequest", "formProps", "size", "onFinish", "beforeRequest"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,6 +31,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 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."); }
@@ -157,6 +161,7 @@ function useDialogFormAction(action, context) {
       _action$size = action.size,
       size = _action$size === void 0 ? 'small' : _action$size,
       _onFinish = action.onFinish,
+      propsBeforeRequest = action.beforeRequest,
       others = _objectWithoutProperties(action, _excluded2);
 
   var formRef = /*#__PURE__*/(0, _react.createRef)();
@@ -177,13 +182,55 @@ function useDialogFormAction(action, context) {
       }, dialogFormProps));
     },
     extendParams: useFieldValuesForRequest ? '{{fields}}' : undefined,
-    beforeRequest: function beforeRequest() {
-      return new Promise(function (resolve) {
-        formRef.current.validate().then(function () {
-          resolve({
-            fields: formRef.current.values
-          });
-        }).catch(function () {
+    beforeRequest: function beforeRequest(context) {
+      return new Promise(function (resolve, reject) {
+        formRef.current.validate().then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+          var beforeRequestContext, requestContext;
+          return regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  if (!propsBeforeRequest) {
+                    _context.next = 13;
+                    break;
+                  }
+
+                  _context.prev = 1;
+                  _context.next = 4;
+                  return (0, _utils.resolveMaybePromiseMethod)(propsBeforeRequest, context);
+
+                case 4:
+                  beforeRequestContext = _context.sent;
+                  _context.next = 10;
+                  break;
+
+                case 7:
+                  _context.prev = 7;
+                  _context.t0 = _context["catch"](1);
+                  beforeRequestContext = false;
+
+                case 10:
+                  if (!(beforeRequestContext === false)) {
+                    _context.next = 13;
+                    break;
+                  }
+
+                  reject(false);
+                  return _context.abrupt("return");
+
+                case 13:
+                  requestContext = Object.assign({
+                    fields: formRef.current.values
+                  }, _typeof(beforeRequestContext) === 'object' ? beforeRequestContext : {});
+                  resolve(requestContext);
+
+                case 15:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee, null, [[1, 7]]);
+        }))).catch(function () {
           resolve(false);
         });
       });

package/lib/form/Filter/AdvancedFilter.js

@@ -17,7 +17,7 @@ var _ProForm = _interopRequireDefault(require("../ProForm"));
 
 var _utils2 = require("../utils");
 
-var _excluded = ["schema", "onSubmit", "onReset", "onResetClick", "layout", "labelAlign", "wrapperAlign", "labelCol", "wrapperCol"];
+var _excluded = ["schema", "onSubmit", "onReset", "layout", "labelAlign", "wrapperAlign", "labelCol", "wrapperCol", "forceClear"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -54,12 +54,12 @@ var AdvancedFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
   var schema = props.schema,
       onSubmit = props.onSubmit,
       onReset = props.onReset,
-      onResetClick = props.onResetClick,
       layout = props.layout,
       labelAlign = props.labelAlign,
       wrapperAlign = props.wrapperAlign,
       labelCol = props.labelCol,
       wrapperCol = props.wrapperCol,
+      forceClear = props.forceClear,
       otherProps = _objectWithoutProperties(props, _excluded);
 
   var prefixCls = (0, _utils.usePrefixCls)('', {
@@ -90,7 +90,7 @@ var AdvancedFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
             component: 'Reset',
             props: {
               onResetValidateSuccess: onReset,
-              onClick: onResetClick,
+              forceClear: !!forceClear,
               children: (0, _utils.getMessage)('reset')
             }
           }, {
@@ -105,7 +105,7 @@ var AdvancedFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
         }]
       }])
     }];
-  }, [schema, onReset, onResetClick]);
+  }, [schema, onReset]);
   var getTeamixLayout = (0, _react.useMemo)(function () {
     return {
       breakpoints: [990],