@douyinfe/semi-ui 2.33.1 → 2.34.0-alpha.1

package/lib/es/steps/fillSteps.js

@@ -17,10 +17,8 @@ const Steps = props => {
     onChange
   } = props;
   const inner = useMemo(() => {
-    const filteredChildren = Children.toArray(children).filter(c => /*#__PURE__*/isValidElement(c));
-    const colStyle = direction === 'vertical' ? null : {
-      width: `${100 / filteredChildren.length}%`
-    };
+    const filteredChildren = Children.toArray(children).filter(c => /*#__PURE__*/isValidElement(c)); // const colStyle = direction === 'vertical' ? null : { width: `${100 / filteredChildren.length }%` };
+
     const content = Children.map(filteredChildren, (child, index) => {
       if (!child) {
         return null;
@@ -50,11 +48,11 @@ const Steps = props => {
         if (index !== current) {
           onChange(index + initial);
         }
-      };
+      }; // Whether colStyle is set has no effect
+      // return <Col style={colStyle}>{cloneElement(child, { ...childProps })}</Col>;
+
 
-      return /*#__PURE__*/React.createElement(Col, {
-        style: colStyle
-      }, /*#__PURE__*/cloneElement(child, Object.assign({}, childProps)));
+      return /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/cloneElement(child, Object.assign({}, childProps)));
     });
     return content;
   }, [children, initial, prefixCls, direction, status, current, onChange]);

package/lib/es/steps/index.d.ts

@@ -22,7 +22,69 @@ export interface NavStepsAllProps extends NavStepsProps {
 }
 export declare type StepsProps = FillStepsAllProps | BasicStepsAllProps | NavStepsAllProps;
 declare class Steps extends Component<StepsProps> {
-    static Step: (props: import("./step").StepProps) => JSX.Element;
+    static Step: {
+        (props: import("./step").StepProps): JSX.Element;
+        elementType: string;
+    };
+    static FillStep: {
+        (props: import("./fillStep").FillStepProps): JSX.Element;
+        propTypes: {
+            prefixCls: PropTypes.Requireable<string>;
+            description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            status: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            style: PropTypes.Requireable<object>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        };
+        defaultProps: {
+            prefixCls: string;
+            status: string;
+            className: string;
+        };
+        elementType: string;
+    };
+    static BasicStep: {
+        (props: import("./basicStep").BasicStepProps): JSX.Element;
+        propTypes: {
+            prefixCls: PropTypes.Requireable<string>;
+            description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            status: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            style: PropTypes.Requireable<object>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            active: PropTypes.Requireable<boolean>;
+            done: PropTypes.Requireable<boolean>;
+        };
+        defaultProps: {
+            prefixCls: string;
+            active: boolean;
+            done: boolean;
+            status: string;
+            className: string;
+        };
+        elementType: string;
+    };
+    static NavStep: {
+        (props: import("./navStep").NavStepProps): JSX.Element;
+        propTypes: {
+            prefixCls: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            style: PropTypes.Requireable<object>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            active: PropTypes.Requireable<boolean>;
+        };
+        defaultProps: {
+            prefixCls: string;
+            active: boolean;
+            className: string;
+        };
+        elementType: string;
+    };
     static propTypes: {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         type: PropTypes.Requireable<string>;

package/lib/es/steps/index.js

@@ -18,6 +18,9 @@ import Step from './step';
 import FillSteps from './fillSteps';
 import BasicSteps from './basicSteps';
 import NavSteps from './navSteps';
+import FillStep from './fillStep';
+import BasicStep from './basicStep';
+import NavStep from './navStep';
 import Context from './context';
 
 class Steps extends Component {
@@ -57,6 +60,9 @@ class Steps extends Component {
 }
 
 Steps.Step = Step;
+Steps.FillStep = FillStep;
+Steps.BasicStep = BasicStep;
+Steps.NavStep = NavStep;
 Steps.propTypes = {
   onChange: PropTypes.func,
   type: PropTypes.oneOf(['fill', 'basic', 'nav']),

package/lib/es/steps/navStep.d.ts

@@ -13,6 +13,8 @@ export interface NavStepProps {
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     "role"?: React.AriaRole;
     "aria-label"?: React.AriaAttributes["aria-label"];
+    usedInC2D?: boolean;
+    size?: string;
 }
 declare const NavStep: {
     (props: NavStepProps): JSX.Element;
@@ -29,5 +31,6 @@ declare const NavStep: {
         active: boolean;
         className: string;
     };
+    elementType: string;
 };
 export default NavStep;

package/lib/es/steps/navStep.js

@@ -16,10 +16,13 @@ const NavStep = props => {
     total,
     onClick,
     onKeyDown,
-    onChange
+    onChange,
+    size
   } = props;
   const classString = classnames(prefixCls, {
-    [`${prefixCls}-active`]: active
+    [`${prefixCls}-active`]: active,
+    [`${prefixCls}-nav`]: props.usedInC2D,
+    [`${prefixCls}-small`]: size === 'small'
   }, className);
 
   const handleClick = e => {
@@ -75,4 +78,5 @@ NavStep.defaultProps = {
   active: false,
   className: ''
 };
+NavStep.elementType = 'Steps.NavStep';
 export default NavStep;

package/lib/es/steps/navSteps.js

@@ -24,7 +24,8 @@ const Steps = props => {
 
       const childProps = Object.assign({
         index,
-        total
+        total,
+        size
       }, child.props);
       childProps.active = index === current;
 

package/lib/es/steps/step.d.ts

@@ -9,5 +9,8 @@ export interface StepProps {
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
-declare const Step: (props: StepProps) => JSX.Element;
+declare const Step: {
+    (props: StepProps): JSX.Element;
+    elementType: string;
+};
 export default Step;

package/lib/es/steps/step.js

@@ -28,4 +28,5 @@ const Step = props => {
   return renderStep();
 };
 
+Step.elementType = 'Steps.Step';
 export default Step;

package/lib/es/timeline/context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type ModeType = 'left' | 'right' | 'center' | 'alternate';
+export interface TimelineContextValue {
+    mode?: ModeType;
+    sum?: number;
+}
+declare const Context: React.Context<TimelineContextValue>;
+export default Context;

package/lib/es/timeline/context.js

@@ -0,0 +1,3 @@
+import React from 'react';
+const Context = /*#__PURE__*/React.createContext(null);
+export default Context;

package/lib/es/timeline/index.d.ts

@@ -2,12 +2,13 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/timeline/timeline.css';
 import Item, { TimelineItemProps } from './item';
+import { ModeType } from './context';
 export type { TimelineItemProps } from './item';
 export interface Data extends TimelineItemProps {
     content: React.ReactNode;
 }
 export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'> {
-    mode?: 'left' | 'right' | 'center' | 'alternate';
+    mode?: ModeType;
     className?: string;
     style?: React.CSSProperties;
     dataSource?: Data[];

package/lib/es/timeline/index.js

@@ -5,6 +5,7 @@ import '@douyinfe/semi-foundation/lib/es/timeline/timeline.css';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/timeline/constants';
 import ConfigContext from '../configProvider/context';
 import Item from './item';
+import Context from './context';
 const prefixCls = cssClasses.PREFIX;
 
 class Timeline extends PureComponent {
@@ -76,11 +77,15 @@ class Timeline extends PureComponent {
     }
 
     const items = childrenList || this.addClassName(children);
-    return /*#__PURE__*/React.createElement("ul", {
+    return /*#__PURE__*/React.createElement(Context.Provider, {
+      value: {
+        mode
+      }
+    }, /*#__PURE__*/React.createElement("ul", {
       "aria-label": this.props['aria-label'],
       style: style,
       className: classString
-    }, items);
+    }, items));
   }
 
 }

package/lib/es/timeline/item.d.ts

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/timeline/timeline.css';
+import { ModeType, TimelineContextValue } from './context';
 export interface TimelineItemProps {
     color?: string;
     children?: React.ReactNode;
@@ -12,8 +13,13 @@ export interface TimelineItemProps {
     className?: string;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLLIElement>;
+    mode?: ModeType;
+    odd?: boolean;
+    usedInC2D?: boolean;
 }
 export default class Item extends PureComponent<TimelineItemProps> {
+    static contextType: React.Context<TimelineContextValue>;
+    static elementType: string;
     static propTypes: {
         color: PropTypes.Requireable<string>;
         time: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -24,11 +30,15 @@ export default class Item extends PureComponent<TimelineItemProps> {
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        mode: PropTypes.Requireable<string>;
+        lastChild: PropTypes.Requireable<boolean>;
     };
+    context: TimelineContextValue;
     static defaultProps: {
         type: string;
         time: string;
         onClick: (...args: any[]) => void;
     };
+    getC2DCls: () => string;
     render(): JSX.Element;
 }

package/lib/es/timeline/item.js

@@ -4,8 +4,42 @@ import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/timeline/constants';
 import '@douyinfe/semi-foundation/lib/es/timeline/timeline.css';
+import Context from './context';
 const prefixCls = cssClasses.ITEM;
 export default class Item extends PureComponent {
+  constructor() {
+    super(...arguments); // getC2DCls is used in C2D, it does not work in non-C2D scenes
+
+    this.getC2DCls = () => {
+      let c2dCls = '';
+      const {
+        mode,
+        odd,
+        usedInC2D
+      } = this.props;
+
+      if (usedInC2D) {
+        switch (mode) {
+          case 'center':
+            c2dCls = `${prefixCls}-center  ${prefixCls}-left`;
+            break;
+
+          case 'alternate':
+            c2dCls = `${prefixCls}-alternate  ${prefixCls}-${odd ? 'left' : 'right'}`;
+            break;
+
+          default:
+            c2dCls = `${prefixCls}-${mode} ${mode === 'right' ? `${prefixCls}-mode-right` : ''}`;
+            break;
+        }
+
+        c2dCls += ` ${prefixCls}-not-last-child`;
+      }
+
+      return c2dCls;
+    };
+  }
+
   render() {
     const {
       className,
@@ -18,7 +52,7 @@ export default class Item extends PureComponent {
       extra,
       onClick
     } = this.props;
-    const itemCls = cls(prefixCls, className);
+    const itemCls = cls(prefixCls, className, this.getC2DCls());
     const dotCls = cls({
       [`${prefixCls}-head`]: true,
       [`${prefixCls}-head-custom`]: dot,
@@ -49,6 +83,7 @@ export default class Item extends PureComponent {
   }
 
 }
+Item.contextType = Context;
 Item.propTypes = {
   color: PropTypes.string,
   time: PropTypes.node,
@@ -58,10 +93,13 @@ Item.propTypes = {
   position: PropTypes.oneOf(strings.ITEM_POS),
   className: PropTypes.string,
   style: PropTypes.object,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  mode: PropTypes.string,
+  lastChild: PropTypes.bool
 };
 Item.defaultProps = {
   type: 'default',
   time: '',
   onClick: _noop
-};
+};
+Item.elementType = 'Timeline.Item';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.33.1",
+    "version": "2.34.0-alpha.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.33.1",
-        "@douyinfe/semi-animation-react": "2.33.1",
-        "@douyinfe/semi-foundation": "2.33.1",
-        "@douyinfe/semi-icons": "2.33.1",
-        "@douyinfe/semi-illustrations": "2.33.1",
-        "@douyinfe/semi-theme-default": "2.33.1",
+        "@douyinfe/semi-animation": "2.34.0-alpha.1",
+        "@douyinfe/semi-animation-react": "2.34.0-alpha.1",
+        "@douyinfe/semi-foundation": "2.34.0-alpha.1",
+        "@douyinfe/semi-icons": "2.34.0-alpha.1",
+        "@douyinfe/semi-illustrations": "2.34.0-alpha.1",
+        "@douyinfe/semi-theme-default": "2.34.0-alpha.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "1810821764823ef746b7a88aae299d12a31cca5d",
+    "gitHead": "8990c51afec33fcfc2f89234082597e484513756",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",