@teamix/pro 1.2.34 → 1.3.2

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

@@ -5,21 +5,27 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ProStep = void 0;
-Object.defineProperty(exports, "ProStepItem", {
+Object.defineProperty(exports, "ProTimeLineItem", {
   enumerable: true,
   get: function get() {
-    return _ProStepItem.default;
+    return _ProTimeLineItem.default;
   }
 });
+exports.ProTimeline = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _components = require("@alicloudfe/components");
 
-var _ProStepItem = _interopRequireDefault(require("./ProStepItem"));
+var _ProTimeLineItem = _interopRequireDefault(require("./ProTimeLineItem"));
 
-var _excluded = ["mode", "items", "shape", "children"];
+var _utils = require("@teamix/utils");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./index.scss");
+
+var _excluded = ["items", "comment", "shape", "fold", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -37,88 +43,62 @@ 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; }
 
-var ProStep = function ProStep(props) {
-  var mode = props.mode,
-      items = props.items,
+var cls = (0, _utils.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 = (0, _react.useMemo)(function () {
-    return _react.default.Children.map(children, function (child, index) {
+    return _react.default.Children.map(children, function (child) {
       var childElement = child;
       var displayName = childElement.type.displayName;
 
-      if (displayName === 'ProStepItem') {
+      if (displayName === 'ProTimeLineItem') {
         return /*#__PURE__*/_react.default.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.default.createElement(_ProStepItem.default, _objectSpread({
+        return /*#__PURE__*/_react.default.createElement(_ProTimeLineItem.default, _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.default.createElement(_components.Timeline, _objectSpread({
-        fold: fold
-      }, others), renderItem());
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_components.Step, _objectSpread({
-      current: current,
-      shape: shapeMap(),
-      labelPlacement: labelPlacement,
-      readOnly: readOnly,
-      animation: animation
+  var renderProTimeline = function renderProTimeline() {
+    return /*#__PURE__*/_react.default.createElement(_components.Timeline, _objectSpread({
+      fold: fold
     }, others), renderItem());
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "teamix-pro-step"
-  }, renderProStep());
+    className: (0, _classnames.default)(cls({
+      '': true,
+      comment: comment
+    }))
+  }, renderProTimeline());
 };
 
-exports.ProStep = ProStep;
-ProStep.Item = _ProStepItem.default;
-ProStep.defaultProps = {
-  mode: 'hoz'
-};
+exports.ProTimeline = ProTimeline;
+ProTimeline.Item = _ProTimeLineItem.default;

package/lib/timeline/index.scss

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

package/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamix/pro",
-  "version": "1.2.34",
+  "version": "1.3.2",
   "description": "TeamixPro大包",
   "repository": "http://gitlab.alibaba-inc.com/teamix/pro",
   "author": "Velociraptor(迅猛龙)",

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

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

package/es/step/ProStepItem/components/HozStepItem/index.js

@@ -1,235 +0,0 @@
-var _excluded = ["_size", "_index", "_shape", "_current", "status", "icon", "title", "content", "percent", "disabled", "dotRender", "onClick"];
-
-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, { memo, useCallback, useMemo } from 'react';
-import { Icon, Step } from '@alicloudfe/components';
-import classnames from 'classnames';
-import TeamixIcon from '@teamix/icon';
-import { baseClass } from '@teamix/utils';
-import './index.scss';
-var StepItem = Step.Item;
-var cls = baseClass('teamix-pro-step');
-
-var HozStepItem = function HozStepItem(props) {
-  var _size = props._size,
-      _index = props._index,
-      _shape = props._shape,
-      _current = props._current,
-      status = props.status,
-      icon = props.icon,
-      title = props.title,
-      content = props.content,
-      percent = props.percent,
-      disabled = props.disabled,
-      dotRender = props.dotRender,
-      onClick = props.onClick,
-      others = _objectWithoutProperties(props, _excluded);
-  /** 对枚举类型进行处理 */
-
-
-  var formatShape = function formatShape() {
-    if (['dot', 'icon', 'arrow', 'number'].includes(_shape)) return _shape;
-    return 'dot';
-  };
-
-  var formatStatus = function formatStatus() {
-    if (['success', 'fail', 'process', 'warning', 'wait'].includes(status)) return status;
-    return 'wait';
-  };
-
-  var formatSize = function formatSize() {
-    if (['normal', 'small'].includes(_size)) return _size;
-    return 'normal';
-  };
-  /** 计算当前节点的状态 */
-
-
-  var getStatus = useMemo(function () {
-    // 默认 status 取传递进来的 status 参数
-    var process = formatStatus() === 'process' && !disabled;
-    var success = formatStatus() === 'success' && !disabled;
-    var error = formatStatus() === 'fail' && !disabled;
-    var warning = formatStatus() === 'warning' && !disabled;
-    var wait = formatStatus() === 'wait' && !disabled; // 如果传递了 current 参数，则重新计算当前节点的状态
-
-    if (_current) {
-      process = _index === _current && !disabled;
-      wait = _index > _current && wait;
-      success = _index < _current && !error && !warning;
-    }
-
-    return {
-      process: process,
-      success: success,
-      error: error,
-      warning: warning,
-      wait: wait
-    };
-  }, [_index, _current, status]); // 获取一些常量
-
-  var process = getStatus.process,
-      success = getStatus.success,
-      error = getStatus.error,
-      warning = getStatus.warning,
-      wait = getStatus.wait;
-  var dot = formatShape() === 'dot';
-  var arrow = formatShape() === 'arrow';
-  var circle_icon = formatShape() === 'icon';
-  var circle_number = formatShape() === 'number';
-  var normal_size = formatSize() === 'normal';
-  var small_size = formatSize() === 'small';
-  /** 重新渲染 node 节点 */
-
-  var renderNode = useCallback(function () {
-    // 渲染dot 节点
-    var renderDot = function renderDot() {
-      return !icon ? /*#__PURE__*/React.createElement("div", {
-        className: classnames(cls({
-          'hoz-step-item-render-wrapper-dot-normal': normal_size,
-          'hoz-step-item-render-wrapper-dot-small': small_size,
-          'hoz-step-item-render-wrapper-dot-disabled': disabled,
-          'hoz-step-item-render-wrapper-dot-process': process,
-          'hoz-step-item-render-wrapper-dot-success': success,
-          'hoz-step-item-render-wrapper-dot-error': error,
-          'hoz-step-item-render-wrapper-dot-warning': warning,
-          'hoz-step-item-render-wrapper-dot-wait': wait
-        }))
-      }) : /*#__PURE__*/React.createElement("div", {
-        className: classnames(cls({
-          'hoz-step-item-render-wrapper-icon-disabled': disabled,
-          'hoz-step-item-render-wrapper-icon-process': process,
-          'hoz-step-item-render-wrapper-icon-success': success,
-          'hoz-step-item-render-wrapper-icon-error': error,
-          'hoz-step-item-render-wrapper-icon-warning': warning,
-          'hoz-step-item-render-wrapper-icon-wait': wait
-        }))
-      }, /*#__PURE__*/React.createElement(Icon, {
-        type: icon,
-        size: "small"
-      }));
-    }; // 渲染 circle 节点
-
-
-    var renderCircle = function renderCircle() {
-      if (dotRender) return /*#__PURE__*/React.createElement("div", {
-        className: classnames(cls('hoz-step-item-render-wrapper'))
-      }, dotRender());
-
-      var renderIconOrNumber = function renderIconOrNumber() {
-        if (percent) return /*#__PURE__*/React.createElement("div", {
-          className: classnames(cls('ver-step-item-render-wrapper-circle-percent'))
-        }, percent, "%");
-        if (icon) return /*#__PURE__*/React.createElement(Icon, {
-          type: icon,
-          size: "medium"
-        });
-        if (success) return /*#__PURE__*/React.createElement(TeamixIcon, {
-          type: "check-line",
-          size: "small"
-        });
-        if (error) return /*#__PURE__*/React.createElement(TeamixIcon, {
-          type: "close-line",
-          size: "small"
-        });
-        if (warning) return /*#__PURE__*/React.createElement(TeamixIcon, {
-          type: "exclamation-line",
-          size: "small"
-        });
-        if (process && circle_icon) return /*#__PURE__*/React.createElement(TeamixIcon, {
-          type: "loading-line",
-          size: "small"
-        });
-        if (wait && circle_icon) return /*#__PURE__*/React.createElement(TeamixIcon, {
-          type: "more-line",
-          size: "small"
-        });
-        return _index + 1;
-      };
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames(cls({
-          'hoz-step-item-render-wrapper-circle': true,
-          'hoz-step-item-render-wrapper-circle-disabled': disabled,
-          'hoz-step-item-render-wrapper-circle-process': process,
-          'hoz-step-item-render-wrapper-circle-success': success,
-          'hoz-step-item-render-wrapper-circle-error': error,
-          'hoz-step-item-render-wrapper-circle-warning': warning,
-          'hoz-step-item-render-wrapper-circle-wait': wait,
-          'hoz-step-item-render-wrapper-percent-color': percent
-        }))
-      }, renderIconOrNumber());
-    };
-
-    var renderStateNode = function renderStateNode() {
-      if (circle_icon || circle_number) {
-        return renderCircle();
-      }
-
-      return renderDot();
-    };
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: classnames(cls('hoz-step-item'))
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classnames(cls({
-        'hoz-step-item-render-wrapper': true,
-        'hoz-step-item-render-wrapper-disabled': disabled,
-        'hoz-step-item-render-wrapper-tail-process': process,
-        'hoz-step-item-render-wrapper-tail-success': success,
-        'hoz-step-item-render-wrapper-tail-error': error,
-        'hoz-step-item-render-wrapper-tail-warning': warning,
-        'hoz-step-item-render-wrapper-tail-wait': wait
-      }))
-    }, renderStateNode()));
-  }, [_index, _shape, _size, disabled, icon, percent, status, dotRender]); // 轴连接线添加color
-
-  var renderColor = useMemo(function () {
-    if (_current) {
-      if (_current > _index) return true;
-    }
-
-    return false;
-  }, [_index, _current]); // 重新渲染 title
-
-  var renderTitle = useCallback(function () {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classnames(cls({
-        'hoz-step-item-render-title-normal': normal_size && dot,
-        'hoz-step-item-render-title-small': small_size && dot
-      }))
-    }, title);
-  }, [_size, title]);
-  return /*#__PURE__*/React.createElement(StepItem, _objectSpread(_objectSpread({
-    className: classnames(cls({
-      'hoz-step-item-render-tail-process': process && renderColor,
-      'hoz-step-item-render-tail-success': success && renderColor,
-      'hoz-step-item-render-tail-error': error && renderColor,
-      'hoz-step-item-render-tail-warning': warning && renderColor,
-      'hoz-step-item-render-tail-wait': wait || !renderColor && !disabled,
-      'hoz-step-item-render-arrow-process': arrow && process,
-      'hoz-step-item-render-arrow-success': arrow && success,
-      'hoz-step-item-render-arrow-error': arrow && error,
-      'hoz-step-item-render-arrow-warning': arrow && warning,
-      'hoz-step-item-render-arrow-wait': arrow && wait
-    }))
-  }, others), {}, {
-    status: 'wait',
-    icon: icon,
-    title: renderTitle(),
-    content: content,
-    disabled: disabled,
-    itemRender: renderNode,
-    onClick: onClick
-  }));
-};
-
-export default /*#__PURE__*/memo(HozStepItem);