@teamix/pro 1.2.34 → 1.3.2

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

@@ -1,279 +0,0 @@
-.teamix-pro-step {
-    .next-step-arrow .next-step-item-disabled{
-        background: var(--color-fill1-3, #eaeaea);
-        &::before{
-            border: var(--s-4) solid var(--color-fill1-3, #eaeaea);
-            border-left: calc(var(--s-4)) solid transparent;
-        }
-        &::after{
-            border-left-color: var(--color-fill1-3, #eaeaea);
-        }
-    }
-    &-hoz-step-item {
-        &-render-wrapper {
-            width: var(--s-6);
-            height: var(--s-6);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            margin-left: var(--s-0);
-
-            &-disabled {
-                cursor: not-allowed;
-            }
-
-            &-dot {
-                &-normal {
-                    width: var(--s-3);
-                    height: var(--s-3);
-                    border-radius: 50%;
-                }
-
-                &-small {
-                    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-error-5, #e84738);
-                    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-6);
-                height: var(--s-6);
-                border-radius: 50%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-
-                .next-icon.next-icon.next-icon:before {
-                    line-height: var(--s-6);
-                }
-
-                &-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 {
-                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);
-            }
-        }
-
-        &-render-tail {
-            &-process {
-                .next-step-item-tail-underlay .next-step-item-tail-overlay {
-                    background: var(--color-notice-5, #0064c8);
-                }
-            }
-
-            &-success {
-                .next-step-item-tail-underlay .next-step-item-tail-overlay {
-                    background: var(--color-notice-7, #589ad8);
-                }
-            }
-
-            &-error {
-                .next-step-item-tail-underlay .next-step-item-tail-overlay {
-                    background: var(--color-error-5, #e84738);
-                }
-            }
-
-            &-warning {
-                .next-step-item-tail-underlay .next-step-item-tail-overlay {
-                    background: var(--color-warning-5, #f98e1a);
-                }
-            }
-
-            &-wait {
-                .next-step-item-tail-underlay .next-step-item-tail-overlay {
-                    background: var(--color-line1-3, #ccc);
-                }
-            }
-        }
-        &-render-arrow {
-            &-process {
-                &.next-step-item-wait:before {
-                    border: var(--s-4) solid var(--color-notice-5, #0064c8);
-                    border-left: calc(var(--s-4)) solid transparent;
-                }
-
-                .next-step-item-container {
-                    background: var(--color-notice-5, #0064c8);
-
-                    .next-step-item-title {
-                        color: var(--color-white, #fff);
-                    }
-                }
-
-                &.next-step-item-wait:after {
-                    border-left-color: var(--color-notice-5, #0064c8);
-                }
-            }
-
-            &-success {
-                &.next-step-item-wait:before {
-                    border: var(--s-4) solid var(--color-notice-7, #589ad8);
-                    border-left: calc(var(--s-4)) solid transparent;
-                }
-
-                .next-step-item-container {
-                    background: var(--color-notice-7, #589ad8);
-
-                    .next-step-item-title {
-                        color: var(--color-white, #fff);
-                    }
-                }
-
-                &.next-step-item-wait:after {
-                    border-left-color: var(--color-notice-7, #589ad8);
-                }
-            }
-
-            &-error {
-                &.next-step-item-wait:before {
-                    border: var(--s-4) solid var(--color-error-5, #e84738);
-                    border-left: calc(var(--s-4)) solid transparent;
-                }
-
-                .next-step-item-container {
-                    background: var(--color-error-5, #e84738);
-
-                    .next-step-item-title {
-                        color: var(--color-white, #fff);
-                    }
-                }
-
-                &.next-step-item-wait:after {
-                    border-left-color: var(--color-error-5, #e84738);
-                }
-            }
-
-            &-warning {
-                &.next-step-item-wait:before {
-                    border: var(--s-4) solid var(--color-warning-5, #f98e1a);
-                    border-left: calc(var(--s-4)) solid transparent;
-                }
-
-                .next-step-item-container {
-                    background: var(--color-warning-5, #f98e1a);
-
-                    .next-step-item-title {
-                        color: var(--color-white, #fff);
-                    }
-                }
-
-                &.next-step-item-wait:after {
-                    border-left-color: var(--color-warning-5, #f98e1a);
-                }
-            }
-
-            &-wait {
-                &.next-step-item-wait:before {
-                    border: var(--s-4) solid var(--color-line1-3, red);
-                    border-left: calc(var(--s-4)) solid transparent;
-                }
-
-                .next-step-item-container {
-                    background: var(--color-line1-3, #ccc);
-
-                    .next-step-item-title {
-                        color: var(--color-white, #fff);
-                    }
-                }
-
-                &.next-step-item-wait:after {
-                    border-left-color: var(--color-line1-3, #ccc);
-                }
-            }
-        }
-
-        &-render-title {
-            &-small {
-                font-size: var(--font-size-body-1, 12px);
-            }
-        }
-    }
-}

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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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/typing.d.ts

@@ -1,96 +0,0 @@
-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/lib/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;