@douyinfe/semi-ui 2.1.2 → 2.1.5

package/steps/_story/steps.stories.js

@@ -0,0 +1,306 @@
+import React, { useState } from 'react';
+
+import { Form } from '../../form';
+import Radio from '../../radio';
+import Step from '../step';
+import Steps from '../index';
+import Icon from '../../icons';
+import Button from '../../button';
+import { IconTriangleDown, IconClear, IconTick, IconClose, IconBell } from '@douyinfe/semi-icons';
+
+export default {
+  title: 'Steps'
+}
+const sizes = ['default', 'small'];
+
+const AllSteps = () => {
+  const [stepProps, setProps] = useState({
+    type: 'basic',
+    size: 'small',
+    current: 0,
+    hasLine: true,
+    direction: 'horizontal',
+    initial: 0,
+    status: 'finish',
+  });
+  return (
+    <>
+      <Form
+        layout="vertical"
+        labelPosition="left"
+        onValueChange={v => setProps({ ...v })}
+        initValues={stepProps}
+      >
+        <Form.RadioGroup field="type">
+          <Radio value="fill">fill</Radio>
+          <Radio value="basic">basic</Radio>
+          <Radio value="nav">nav</Radio>
+        </Form.RadioGroup>
+        <Form.RadioGroup field="size">
+          <Radio value="small">small</Radio>
+          <Radio value="default">default</Radio>
+        </Form.RadioGroup>
+        <Form.RadioGroup field="hasLine">
+          <Radio value={true}>true</Radio>
+          <Radio value={false}>false</Radio>
+        </Form.RadioGroup>
+        <Form.InputNumber field="current"></Form.InputNumber>
+        <Form.RadioGroup field="direction">
+          <Radio value="horizontal">horizontal</Radio>
+          <Radio value="vertical">vertical</Radio>
+        </Form.RadioGroup>
+        <Form.InputNumber field="initial"></Form.InputNumber>
+        <Form.RadioGroup field="status">
+          <Radio value="wait">wait</Radio>
+          <Radio value="process">process</Radio>
+          <Radio value="finish">finish</Radio>
+          <Radio value="error">error</Radio>
+          <Radio value="warning">warning</Radio>
+        </Form.RadioGroup>
+      </Form>
+      <Steps type="basic" {...stepProps}>
+        <Step
+          title="Step.1"
+          icon={<IconBell />}
+          description="This is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long descriptionThis is a long description"
+        ></Step>
+        <Step title="Step.2" description="This is some description"></Step>
+        <Step title="Step.3"></Step>
+        <Step title="Step.4" description="This is some description"></Step>
+      </Steps>
+    </>
+  );
+};
+
+export const _AllSteps = () => <AllSteps></AllSteps>;
+
+_AllSteps.story = {
+  name: 'all steps',
+};
+
+const FillStep = () => {
+  return sizes.map(s => (
+    <Steps key={s} size={s} current={1}>
+      <Step title="中文" description="This is a description." />
+      <Step title="In Progress" description="This is a description." />
+      <Step title="Waiting" description="This is a description." />
+    </Steps>
+  ));
+};
+
+export const StepsDefaultFill = () => <FillStep />;
+
+StepsDefaultFill.story = {
+  name: 'steps default fill',
+};
+
+const BasicStep = () => {
+  return sizes.map(s => (
+    <Steps key={s} size={s} type="basic" current={1}>
+      <Step title="Step.1" description="This is a description.This is a description." />
+      <Step title="Step.2" description="This is a description.This is a description." />
+      <Step title="Step.3" description="This is a description.This is a description." />
+    </Steps>
+  ));
+};
+
+export const StepsBasic = () => <BasicStep />;
+
+StepsBasic.story = {
+  name: 'steps basic',
+};
+
+export const StepsWithIcon = () => {
+  return (
+    <Steps>
+      <Step status="finish" title="Login" icon={<IconTriangleDown />} />
+      <Step status="finish" title="Verification" icon={<IconClear />} />
+      <Step status="process" title="Pay" icon={<IconTick />} />
+      <Step status="wait" title="Done" icon={<IconClose />} />
+    </Steps>
+  );
+};
+
+StepsWithIcon.story = {
+  name: 'steps with icon',
+};
+
+const steps = [
+  {
+    title: 'First',
+    content: 'First-content',
+  },
+  {
+    title: 'Second',
+    content: 'Second-content',
+  },
+  {
+    title: 'Last',
+    content: 'Last-content',
+  },
+];
+
+class StepsDemo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      current: 0,
+    };
+  }
+
+  next() {
+    const current = this.state.current + 1;
+    this.setState({
+      current,
+    });
+  }
+
+  prev() {
+    const current = this.state.current - 1;
+    this.setState({
+      current,
+    });
+  }
+
+  render() {
+    const { current } = this.state;
+    return (
+      <div>
+        <Steps current={current}>
+          {steps.map(item => (
+            <Step key={item.title} title={item.title} />
+          ))}
+        </Steps>
+        <div className="steps-content">{steps[current].content}</div>
+        <div className="steps-action">
+          {current < steps.length - 1 && (
+            <Button type="primary" onClick={() => this.next()}>
+              Next
+            </Button>
+          )}
+          {current === steps.length - 1 && (
+            <Button type="primary" onClick={() => console.log('Processing complete!')}>
+              Done
+            </Button>
+          )}
+          {current > 0 && (
+            <Button
+              style={{
+                marginLeft: 8,
+              }}
+              onClick={() => this.prev()}
+            >
+              Previous
+            </Button>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export const StepsWithControled = () => {
+  return <StepsDemo></StepsDemo>;
+};
+
+StepsWithControled.story = {
+  name: 'steps with controled',
+};
+
+class StepsWithonChange extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      current: 1,
+    };
+  }
+
+  onChange(current) {
+    this.setState({ current });
+  }
+
+  render() {
+    const { current } = this.state;
+    const { Step } = Steps;
+    const steps = [
+      {
+        title: 'First',
+        content: 'First-content',
+      },
+      {
+        title: 'Second',
+        content: 'Second-content',
+      },
+      {
+        title: 'Last',
+        content: 'Last-content',
+      },
+    ];
+
+    return (
+      <div>
+        <Steps type="basic" current={current} onChange={current => this.onChange(current)}>
+          {steps.map(item => (
+            <Step key={item.title} title={item.title} />
+          ))}
+        </Steps>
+      </div>
+    );
+  }
+}
+
+export const StepsWithOnChange = () => {
+  return <StepsWithonChange />;
+};
+
+StepsWithOnChange.story = {
+  name: 'steps with onChange',
+};
+
+const StatusStep = () => {
+  return sizes.map(s => (
+    <Steps key={s} size={s} current={1} status="error">
+      <Step title="Finished" description="This is a description" />
+      <Step title="In Process" description="This is a description" />
+      <Step title="Waiting" description="This is a description" />
+    </Steps>
+  ));
+};
+
+export const StepsWithStatus = () => <StatusStep />;
+
+StepsWithStatus.story = {
+  name: 'steps with status',
+};
+
+const VerticalStep = () => {
+  return sizes.map(s => (
+    <Steps key={s} size={s} current={1} status="error" direction="vertical">
+      <Step title="Finished" description="This is a description" />
+      <Step title="In Process" description="This is a description" />
+      <Step title="Waiting" description="This is a description" />
+    </Steps>
+  ));
+};
+
+export const StepsVertical = () => <VerticalStep />;
+
+StepsVertical.story = {
+  name: 'steps vertical',
+};
+
+const LineStep = () => {
+  return sizes.map(s => (
+    <Steps key={s} size={s} hasLine={false} current={1} status="error">
+      <Step title="Finished" description="This is a description" />
+      <Step title="In Process" description="This is a description" />
+      <Step title="Waiting" description="This is a description" />
+    </Steps>
+  ));
+};
+
+export const StepsWithoutLine = () => <LineStep></LineStep>;
+
+StepsWithoutLine.story = {
+  name: 'steps without line',
+};

package/steps/_story/steps.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Steps from '../index';
+
+const Step = Steps.Step;
+
+const stories = storiesOf('Steps', module);
+
+stories.add('Steps default', () => (
+    <>
+       <Steps current={0} status="process">
+           <Step status='error' description='fe'>12</Step>
+           <Step status="finish" description='fe'>12</Step>
+           <Step status="wait" description='fe'>12</Step>
+        </Steps>
+    </>
+));

package/steps/basicStep.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { isFunction } from 'lodash';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { stepsClasses as css } from '@douyinfe/semi-foundation/steps/constants';
+import { IconTickCircle, IconAlertCircle, IconAlertTriangle } from '@douyinfe/semi-icons';
+
+export type Status = 'wait' | 'process' | 'finish' | 'error' | 'warning';
+export type Size = 'default' | 'small';
+export interface BasicStepProps {
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    status?: Status;
+    title?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    active?: boolean;
+    prefixCls?: string;
+    stepNumber?: string;
+    size?: Size;
+    done?: boolean;
+    onChange?: () => void;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+export enum stepSizeMapIconSize {
+    small = 'large',
+    default = 'extra-large'
+}
+
+const BasicStep = (props: BasicStepProps) => {
+    const {
+        prefixCls,
+        className,
+        size,
+        title,
+        description,
+        status,
+        style,
+        active,
+        done,
+        icon,
+        stepNumber,
+        onClick,
+        onChange,
+        ...restProps
+    } = props;
+    const renderIcon = () => {
+        let inner, progress;
+
+        if ('icon' in props) {
+            if (React.isValidElement(icon)) {
+                inner = icon;
+            }
+        } else if ('status' in props) {
+            switch (status) {
+                case 'error':
+                    inner = <IconAlertCircle size={stepSizeMapIconSize[size]} />;
+                    break;
+                case 'wait':
+                    inner = <span className={`${prefixCls}-number-icon`}>{stepNumber}</span>;
+                    break;
+                case 'process':
+                    inner = <span className={`${prefixCls}-number-icon`}>{stepNumber}</span>;
+                    progress = true;
+                    break;
+                case 'finish':
+                    inner = <IconTickCircle size={stepSizeMapIconSize[size]} />;
+                    break;
+                case 'warning':
+                    inner = <IconAlertTriangle size={stepSizeMapIconSize[size]} />;
+                    break;
+                default:
+                    inner = null;
+                    break;
+            }
+        }
+        const cls = classnames({
+            [`${prefixCls}-icon`]: true,
+            [`${prefixCls}-custom-icon`]: 'icon' in props,
+            [`${prefixCls}-icon-process`]: progress,
+        });
+
+        return inner ? <span className={cls}>{inner}</span> : null;
+    };
+    const classString = classnames(prefixCls, className, `${prefixCls}-${status}`, {
+        [`${prefixCls}-active`]: active,
+        [`${prefixCls}-done`]: done
+    });
+    const handleClick = (e: React.MouseEvent) => {
+        if (isFunction(onClick)) {
+            onClick(e);
+        }
+        onChange();
+    };
+    return (
+        <div {...restProps} className={classString} style={style} onClick={e => handleClick(e)}>
+            <div className={`${prefixCls}-container`}>
+                <div className={`${prefixCls}-left`}>{renderIcon()}</div>
+                <div className={`${prefixCls}-content`}>
+                    <div className={`${prefixCls}-title`}>
+                        <div className={`${prefixCls}-title-text`}>{title}</div>
+                    </div>
+                    {description && <div className={`${prefixCls}-description`}>{description}</div>}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+BasicStep.propTypes = {
+    prefixCls: PropTypes.string,
+    description: PropTypes.node,
+    icon: PropTypes.node,
+    status: PropTypes.oneOf(['wait', 'process', 'finish', 'error', 'warning']),
+    title: PropTypes.node,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    onClick: PropTypes.func,
+    active: PropTypes.bool,
+    done: PropTypes.bool,
+};
+BasicStep.defaultProps = {
+    prefixCls: css.ITEM,
+    active: false,
+    done: false,
+    status: 'wait',
+    className: '',
+};
+
+export default BasicStep;

package/steps/basicSteps.tsx

@@ -0,0 +1,110 @@
+import React, { cloneElement, Children, useMemo, isValidElement, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import cls from 'classnames';
+import { stepsClasses as css } from '@douyinfe/semi-foundation/steps/constants';
+
+export type Direction = 'horizontal' | 'vertical';
+export type Status = 'wait' | 'process' | 'finish' | 'error' | 'warning';
+export type Size = 'default' | 'small';
+export interface BasicStepsProps {
+    prefixCls?: string;
+    className?: string;
+    direction?: Direction;
+    current?: number;
+    initial?: number;
+    status?: Status;
+    style?: React.CSSProperties;
+    size?: Size;
+    hasLine?: boolean;
+    children?: React.ReactNode;
+    onChange?: (current: number) => void;
+}
+
+const Steps = (props: BasicStepsProps) => {
+    const {
+        size,
+        current,
+        status,
+        children,
+        prefixCls,
+        initial,
+        direction,
+        className,
+        style,
+        hasLine,
+        onChange,
+    } = props;
+    const inner = useMemo(() => {
+        const filteredChildren = Children.toArray(children).filter(c => isValidElement(c)) as Array<ReactElement>;
+        const content = Children.map(filteredChildren, (child: React.ReactElement, index) => {
+            if (!child) {
+                return null;
+            }
+            const stepNumber = initial + index;
+            const childProps = {
+                stepNumber: `${stepNumber + 1}`,
+                size,
+                ...child.props,
+            };
+
+            if (status === 'error' && index === current - 1) {
+                childProps.className = `${prefixCls}-next-error`;
+            }
+
+            if (!child.props.status) {
+                if (stepNumber === current) {
+                    childProps.status = status;
+                } else if (stepNumber < current) {
+                    childProps.status = 'finish';
+                } else {
+                    childProps.status = 'wait';
+                }
+            }
+            childProps.active = stepNumber === current;
+            childProps.done = stepNumber < current;
+            childProps.onChange = () => {
+                if (index !== current) {
+                    onChange(index + initial);
+                }
+            };
+            return cloneElement(child, { ...childProps });
+        });
+        return content;
+    }, [children, initial, prefixCls, direction, status, current, size]);
+
+    const wrapperCls = cls(className, {
+        [`${prefixCls}-basic`]: true,
+        [`${prefixCls}-${direction}`]: true,
+        [`${prefixCls}-${size}`]: size !== 'default',
+        [`${prefixCls}-hasline`]: hasLine,
+    });
+
+    return (
+        <div className={wrapperCls} style={style}>
+            {inner}
+        </div>
+    );
+};
+
+Steps.propTypes = {
+    prefixCls: PropTypes.string,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    current: PropTypes.number,
+    initial: PropTypes.number,
+    direction: PropTypes.oneOf(['horizontal', 'vertical']),
+    status: PropTypes.oneOf(['wait', 'process', 'finish', 'error', 'warning']),
+    hasLine: PropTypes.bool,
+};
+
+Steps.defaultProps = {
+    prefixCls: css.PREFIX,
+    current: 0,
+    direction: 'horizontal',
+    size: '',
+    initial: 0,
+    hasLine: true,
+    status: 'process',
+};
+
+export default Steps;

package/steps/context.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface ContextValue {
+    type?: 'nav' | 'fill' | 'basic';
+}
+
+export default React.createContext<ContextValue>(null);

package/steps/fillStep.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { isFunction } from 'lodash';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { stepsClasses as css } from '@douyinfe/semi-foundation/steps/constants';
+import { IconTickCircle, IconAlertCircle, IconAlertTriangle } from '@douyinfe/semi-icons';
+
+export type Status = 'wait' | 'process' | 'finish' | 'error' | 'warning';
+
+export interface FillStepProps {
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    status?: Status;
+    title?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    prefixCls?: string;
+    stepNumber?: string;
+    onChange?: () => void;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+
+const FillStep = (props: FillStepProps) => {
+    const { prefixCls, className, title, description, status, style, onClick, icon, onChange, stepNumber } = props;
+    const renderIcon = () => {
+        let inner, progress;
+
+        if ('icon' in props) {
+            inner = icon;
+        } else if ('status' in props) {
+            switch (status) {
+                case 'error':
+                    inner = <IconAlertCircle size="extra-large" />;
+                    break;
+                case 'wait':
+                    inner = stepNumber;
+                    break;
+                case 'process':
+                    inner = stepNumber;
+                    progress = true;
+                    break;
+                case 'finish':
+                    inner = <IconTickCircle size="extra-large" />;
+                    break;
+                case 'warning':
+                    inner = <IconAlertTriangle size="extra-large" />;
+                    break;
+                default:
+                    inner = null;
+                    break;
+            }
+        }
+        const cls = classnames({
+            [`${prefixCls }-left`]: true,
+            [`${prefixCls }-icon`]: 'icon' in props,
+            [`${prefixCls }-plain`]: !('icon' in props),
+            [`${prefixCls }-icon-process`]: progress,
+        });
+
+        return inner ? <div className={cls}>{inner}</div> : null;
+    };
+    const handleClick = (e: React.MouseEvent) => {
+        if (isFunction(onClick)) {
+            onClick(e);
+        }
+        onChange();
+    };
+    return (
+        <div
+            className={classnames({
+                [className]: Boolean(className),
+                [prefixCls]: true,
+                [`${prefixCls}-${status}`]: Boolean(status),
+                [`${prefixCls }-clickable`]: onClick,
+            })}
+            style={style}
+            onClick={e => {
+                handleClick(e);
+            }}
+        >
+            {renderIcon()}
+            <div className={`${prefixCls }-content`}>
+                <div className={`${prefixCls }-title`} title={typeof title === 'string' ? title : null}>
+                    <span className={`${prefixCls }-title-text`}>{title}</span>
+                </div>
+                <div
+                    className={`${prefixCls }-description`}
+                    title={typeof description === 'string' ? description : null}
+                >
+                    {description}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+FillStep.propTypes = {
+    prefixCls: PropTypes.string,
+    description: PropTypes.node,
+    icon: PropTypes.node,
+    status: PropTypes.oneOf(['wait', 'process', 'finish', 'error', 'warning']),
+    title: PropTypes.node,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    onClick: PropTypes.func,
+};
+FillStep.defaultProps = {
+    prefixCls: css.ITEM,
+    status: 'wait',
+    className: '',
+};
+
+export default FillStep;