@douyinfe/semi-ui 2.19.1-alpha.2 → 2.19.2-alpha.0

package/steps/_story/steps.stories.js

@@ -1,306 +0,0 @@
-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 StepsWithControlled = () => {
-  return <StepsDemo></StepsDemo>;
-};
-
-StepsWithControlled.story = {
-  name: 'steps with controlled',
-};
-
-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

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

@@ -1,141 +0,0 @@
-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>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-    "role"?: React.AriaRole;
-    "aria-label"?: React.AriaAttributes["aria-label"];
-}
-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,
-        onKeyDown,
-    } = 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, `${prefixCls}-${status}`, {
-        [`${prefixCls}-active`]: active,
-        [`${prefixCls}-done`]: done
-    }, className);
-    const handleClick = (e: React.MouseEvent) => {
-        if (isFunction(onClick)) {
-            onClick(e);
-        }
-        onChange();
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            if (isFunction(onKeyDown)) {
-                onKeyDown(e);
-            }
-            onChange();
-        }
-    };
-    return (
-        <div role={props["role"]} aria-label={props["aria-label"]} tabIndex={0} aria-current="step" className={classString} style={style} onClick={e => handleClick(e)} onKeyDown={handleKeyDown}>
-            <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

@@ -1,111 +0,0 @@
-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;
-    "aria-label"?: string;
-}
-
-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, onChange]);
-
-    const wrapperCls = cls(className, {
-        [`${prefixCls}-basic`]: true,
-        [`${prefixCls}-${direction}`]: true,
-        [`${prefixCls}-${size}`]: size !== 'default',
-        [`${prefixCls}-hasline`]: hasLine,
-    });
-
-    return (
-        <div aria-label={props["aria-label"]} 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

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