@douyinfe/semi-ui 2.35.0-beta.0 → 2.36.0-alpha.0

package/lib/es/steps/basicStep.js

@@ -25,7 +25,9 @@ const BasicStep = props => {
     stepNumber,
     onClick,
     onChange,
-    onKeyDown
+    onKeyDown,
+    usedInC2D,
+    direction: direction
   } = props;
 
   const renderIcon = () => {
@@ -88,7 +90,10 @@ const BasicStep = props => {
     [`${prefixCls}-active`]: active,
     [`${prefixCls}-done`]: done,
     [`${prefixCls}-hover`]: onChange || props.onClick,
-    [`${prefixCls}-${status}-hover`]: onChange || props.onClick
+    [`${prefixCls}-${status}-hover`]: onChange || props.onClick,
+    [`${prefixCls}-basic`]: usedInC2D,
+    [`${prefixCls}-${direction}`]: direction,
+    [`${prefixCls}-small`]: size === 'small'
   }, className);
 
   const handleClick = e => {
@@ -146,4 +151,5 @@ BasicStep.defaultProps = {
   status: 'wait',
   className: ''
 };
+BasicStep.elementType = 'Steps.BasicStep';
 export default BasicStep;

package/lib/es/steps/basicSteps.js

@@ -27,7 +27,8 @@ const Steps = props => {
       const stepNumber = initial + index;
       const childProps = Object.assign({
         stepNumber: `${stepNumber + 1}`,
-        size
+        size,
+        direction
       }, child.props);
 
       if (status === 'error' && index === current - 1) {

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

@@ -15,6 +15,7 @@ export interface FillStepProps {
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     "role"?: React.AriaRole;
     "aria-label"?: React.AriaAttributes["aria-label"];
+    usedInC2D?: boolean;
 }
 declare const FillStep: {
     (props: FillStepProps): JSX.Element;
@@ -33,5 +34,6 @@ declare const FillStep: {
         status: string;
         className: string;
     };
+    elementType: string;
 };
 export default FillStep;

package/lib/es/steps/fillStep.js

@@ -92,7 +92,8 @@ const FillStep = props => {
       [prefixCls]: true,
       [`${prefixCls}-${status}`]: Boolean(status),
       [`${prefixCls}-${status}-hover`]: Boolean(status) && (onChange || onClick),
-      [`${prefixCls}-clickable`]: onClick
+      [`${prefixCls}-clickable`]: onClick,
+      [`${prefixCls}-fill`]: props.usedInC2D
     }, className),
     style: style,
     onClick: e => {
@@ -127,4 +128,5 @@ FillStep.defaultProps = {
   status: 'wait',
   className: ''
 };
+FillStep.elementType = 'Steps.FillStep';
 export default FillStep;

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,10 +48,10 @@ const Steps = props => {
         if (index !== current) {
           onChange(index + initial);
         }
-      } : undefined;
-      return /*#__PURE__*/React.createElement(Col, {
-        style: colStyle
-      }, /*#__PURE__*/cloneElement(child, Object.assign({}, childProps)));
+      } : undefined; // Whether colStyle is set has no effect
+      // return <Col style={colStyle}>{cloneElement(child, { ...childProps })}</Col>;
+
+      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

@@ -16,6 +16,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 {
@@ -55,6 +58,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

@@ -15,10 +15,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 => {
@@ -68,4 +71,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;
       childProps.onChange = onChange ? () => {

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/switch/index.d.ts

@@ -45,7 +45,7 @@ declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<"default" | "small" | "large">;
+        size: PropTypes.Requireable<"small" | "default" | "large">;
         uncheckedText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         id: PropTypes.Requireable<string>;
     };

package/lib/es/table/Table.d.ts

@@ -60,7 +60,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         components: PropTypes.Requireable<any>;
         bordered: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"default" | "small" | "middle">;
+        size: PropTypes.Requireable<"small" | "default" | "middle">;
         tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
             align: PropTypes.Requireable<"left" | "right" | "center">;
@@ -297,7 +297,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         showTotal?: boolean;
         pageSize?: number;
         pageSizeOpts?: number[];
-        size?: "default" | "small";
+        size?: "small" | "default";
         currentPage?: number;
         defaultCurrentPage?: number;
         onPageChange?: (currentPage: number) => void;

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

@@ -16,7 +16,7 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
         components: PropTypes.Requireable<any>;
         bordered: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"default" | "small" | "middle">;
+        size: PropTypes.Requireable<"small" | "default" | "middle">;
         tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
             align: PropTypes.Requireable<"left" | "right" | "center">;

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

@@ -96,7 +96,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onAdd: PropTypes.Requireable<(...args: any[]) => any>;
         onRemove: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        size: PropTypes.Requireable<"default" | "small" | "large">;
+        size: PropTypes.Requireable<"small" | "default" | "large">;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         prefix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         suffix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;

package/lib/es/timePicker/TimePicker.d.ts

@@ -132,7 +132,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         secondStep: PropTypes.Requireable<number>;
         focusOnOpen: PropTypes.Requireable<boolean>;
         autoFocus: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"default" | "small" | "large">;
+        size: PropTypes.Requireable<"small" | "default" | "large">;
         panels: PropTypes.Requireable<PropTypes.InferProps<{
             panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             panelFooter: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;

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

@@ -49,7 +49,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         secondStep: import("prop-types").Requireable<number>;
         focusOnOpen: import("prop-types").Requireable<boolean>;
         autoFocus: import("prop-types").Requireable<boolean>;
-        size: import("prop-types").Requireable<"default" | "small" | "large">;
+        size: import("prop-types").Requireable<"small" | "default" | "large">;
         panels: import("prop-types").Requireable<import("prop-types").InferProps<{
             panelHeader: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
             panelFooter: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;

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.35.0-beta.0",
+    "version": "2.36.0-alpha.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.35.0-beta.0",
-        "@douyinfe/semi-animation-react": "2.35.0-beta.0",
-        "@douyinfe/semi-foundation": "2.35.0-beta.0",
-        "@douyinfe/semi-icons": "2.35.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.35.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.35.0-beta.0",
+        "@douyinfe/semi-animation": "2.36.0-alpha.0",
+        "@douyinfe/semi-animation-react": "2.36.0-alpha.0",
+        "@douyinfe/semi-foundation": "2.36.0-alpha.0",
+        "@douyinfe/semi-icons": "2.36.0-alpha.0",
+        "@douyinfe/semi-illustrations": "2.36.0-alpha.0",
+        "@douyinfe/semi-theme-default": "2.36.0-alpha.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "5f8a2d3593d072d886ec8863c31892fdd4caf8d2",
+    "gitHead": "b0ea78a81e9ba459f9f5a06c831235a5d5e9d3a0",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",