@douyinfe/semi-ui 2.1.3 → 2.1.4-alpha.0

package/space/_story/space.stories.js

@@ -0,0 +1,254 @@
+import React from 'react';
+import { Button, Tag } from '@douyinfe/semi-ui/';
+import Space from '../index';
+
+export default {
+  title: 'Space'
+}
+
+const divStyle = {
+  width: 100,
+  height: 100,
+  backgroundColor: 'lightblue',
+  display: 'flex',
+  alignItems: 'center',
+};
+
+export const SpaceDefault = () => (
+  <>
+    <Space align="baseline">
+      <Button
+        onClick={() => {
+          alert('button');
+        }}
+      >
+        按钮
+      </Button>
+      <Button>按钮</Button>
+      <Tag> default tag </Tag>
+      <div style={divStyle}>div</div>
+    </Space>
+  </>
+);
+
+SpaceDefault.story = {
+  name: 'Space default',
+};
+
+export const SpaceAlign = () => (
+  <>
+    <Space align="center">
+      <span>horizontal:align-center</span>
+      <Button>按钮</Button>
+      <Button>按钮</Button>
+      <Tag> default tag </Tag>
+      <div style={divStyle}>div</div>
+    </Space>
+    <br />
+    <Space align="start">
+      <span>horizontal:align-start</span>
+      <Button>按钮</Button>
+      <Button>按钮</Button>
+      <Tag> default tag </Tag>
+      <div style={divStyle}>div</div>
+    </Space>
+    <br />
+    <Space align="end">
+      <span>horizontal:align-end</span>
+      <Button>按钮</Button>
+      <Button>按钮</Button>
+      <Tag> default tag </Tag>
+      <div style={divStyle}>div</div>
+    </Space>
+    <br />
+    <Space align="baseline">
+      <span>horizontal:align-baseline</span>
+      <Button>按钮</Button>
+      <Button>按钮</Button>
+      <Tag> default tag </Tag>
+      <div style={divStyle}>div</div>
+    </Space>
+    <hr />
+    <br />
+    <Space vertical align="center">
+      <span>vertical:align-center</span>
+      <Button>按钮</Button>
+      <Button>按钮</Button>
+      <Tag> default tag </Tag>
+      <div style={divStyle}>div</div>
+    </Space>
+    <br />
+    <Space vertical align="start">
+      <span>vertical:align-start</span>
+      <Button>按钮</Button>
+      <Button>按钮</Button>
+      <Tag> default tag </Tag>
+      <div style={divStyle}>div</div>
+    </Space>
+    <br />
+    <Space vertical align="end">
+      <span>vertical:align-end</span>
+      <Button>按钮</Button>
+      <Button>按钮</Button>
+      <Tag> default tag </Tag>
+      <div style={divStyle}>div</div>
+    </Space>
+    <br />
+    <Space vertical align="baseline">
+      <span>vertical:align-baseline</span>
+      <Button>按钮</Button>
+      <Button>按钮</Button>
+      <Tag> default tag </Tag>
+      <div style={divStyle}>div</div>
+    </Space>
+  </>
+);
+
+SpaceAlign.story = {
+  name: 'Space align',
+};
+
+export const SpaceVertical = () => (
+  <>
+    <Space direction="horizontal">
+      <Button>主要按钮</Button>
+      <Button type="secondary">次要按钮</Button>
+      <Button type="tertiary">第三按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+    </Space>
+    <br />
+    <Space vertical>
+      <Button>主要按钮</Button>
+      <Button type="secondary">次要按钮</Button>
+      <Button type="tertiary">第三按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+    </Space>
+  </>
+);
+
+SpaceVertical.story = {
+  name: 'Space vertical',
+};
+
+export const SpaceSpacing = () => (
+  <>
+    <Space spacing="loose">
+      <span>spacing-loose</span>
+      <Button>主要按钮</Button>
+      <Button type="secondary">次要按钮</Button>
+      <Button type="tertiary">第三按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+    </Space>
+    <br />
+    <Space spacing="medium">
+      <span>spacing-medium</span>
+      <Button>主要按钮</Button>
+      <Button type="secondary">次要按钮</Button>
+      <Button type="tertiary">第三按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+    </Space>
+    <br />
+    <Space spacing="tight">
+      <span>spacing-tight</span>
+      <Button>主要按钮</Button>
+      <Button type="secondary">次要按钮</Button>
+      <Button type="tertiary">第三按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+    </Space>
+    <br />
+    <Space spacing={30}>
+      <span>spacing-number-30</span>
+      <Button>主要按钮</Button>
+      <Button type="secondary">次要按钮</Button>
+      <Button type="tertiary">第三按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+    </Space>
+    <br />
+    <Space spacing={[20, 20]}>
+      <span>spacing-array-[20,20]</span>
+      <Button>主要按钮</Button>
+      <Button type="secondary">次要按钮</Button>
+      <Button type="tertiary">第三按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+    </Space>
+    <br />
+    <Space spacing={['medium', 'loose']}>
+      <span>spacing-array-['medium','loose']</span>
+      <Button>主要按钮</Button>
+      <Button type="secondary">次要按钮</Button>
+      <Button type="tertiary">第三按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+    </Space>
+    <br />
+    <Space spacing={['medium', 20]}>
+      <span>spacing-array-['medium',20]</span>
+      <Button>主要按钮</Button>
+      <Button type="secondary">次要按钮</Button>
+      <Button type="tertiary">第三按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+    </Space>
+    <br />
+    <Space wrap spacing="loose">
+      <span>spacing-loose,wrap=true</span>
+      <Button>主要按钮</Button>
+      <Button type="secondary">次要按钮</Button>
+      <Button type="tertiary">第三按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+    </Space>
+    <br />
+    <Space wrap spacing="medium">
+      <span>spacing-medium,wrap=true</span>
+      <Button>主要按钮</Button>
+      <Button type="secondary">次要按钮</Button>
+      <Button type="tertiary">第三按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+    </Space>
+    <br />
+    <Space wrap spacing="tight">
+      <span>spacing-tight,wrap=true</span>
+      <Button>主要按钮</Button>
+      <Button type="secondary">次要按钮</Button>
+      <Button type="tertiary">第三按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+    </Space>
+    <br />
+  </>
+);
+
+SpaceSpacing.story = {
+  name: 'Space spacing',
+};
+
+export const SpaceWrap = () => (
+  <>
+    <Space wrap={false}>
+      {new Array(30).fill(null).map((item, idex) => (
+        <Button key={idex}>按钮</Button>
+      ))}
+    </Space>
+    <br />
+    <Space wrap={true}>
+      {new Array(30).fill(null).map((item, idex) => (
+        <Button theme="solid" type="secondary" key={idex}>
+          按钮
+        </Button>
+      ))}
+    </Space>
+  </>
+);
+
+SpaceWrap.story = {
+  name: 'Space wrap',
+};

package/space/_story/space.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Space from '../index';
+import Button from '../../button';
+import Tag from '../../tag';
+
+
+const stories = storiesOf('Space', module);
+
+const divStyle = {
+    width: 100,
+    height: 100,
+    backgroundColor:'lightblue',
+    display: 'flex',
+    alignItems: 'center'
+}
+stories.add('Space default', () => (
+    <>
+        <Space align='baseline'>
+            <Button onClick={()=>{alert('button')}}>按钮</Button>
+            <Button>按钮</Button>
+            <Tag> default tag </Tag>
+            <div style={divStyle}>div</div>
+        </Space>
+    </>
+));

package/space/index.tsx

@@ -0,0 +1,95 @@
+import React, { PureComponent, ReactNode, CSSProperties } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { strings, cssClasses } from '@douyinfe/semi-foundation/space/constants';
+import '@douyinfe/semi-foundation/space/space.scss';
+import { isString, isArray, isNumber } from 'lodash';
+import { flatten } from './utils';
+
+const prefixCls = cssClasses.PREFIX;
+
+export type Align = 'start' | 'center' | 'end' | 'baseline';
+export type Spacing = 'loose' | 'medium' | 'tight' | number;
+
+export type SpaceProps = {
+    wrap?: boolean;
+    align?: Align;
+    vertical?: boolean;
+    spacing?: Spacing | Spacing[];
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+};
+
+class Space extends PureComponent<SpaceProps> {
+    static propTypes = {
+        wrap: PropTypes.bool,
+        align: PropTypes.oneOf(strings.ALIGN_SET),
+        vertical: PropTypes.bool,
+        spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+        children: PropTypes.node,
+        style: PropTypes.object,
+        className: PropTypes.string
+    };
+
+    static defaultProps = {
+        vertical: false,
+        wrap: false,
+        spacing: 'tight',
+        align: 'center'
+    };
+
+    render(): ReactNode {
+        const {
+            children = null,
+            style,
+            className,
+            spacing,
+            wrap,
+            align,
+            vertical
+        } = this.props;
+        const isWrap = wrap && vertical ? false : wrap;
+        const realStyle = { ...style };
+        let spacingHorizontalType = '';
+        let spacingVerticalType = '';
+        if (isString(spacing)) {
+            spacingHorizontalType = spacing;
+            spacingVerticalType = spacing;
+        } else if (isNumber(spacing)) {
+            realStyle.rowGap = spacing;
+            realStyle.columnGap = spacing;
+        } else if (isArray(spacing)) {
+            if (isString(spacing[0])) {
+                spacingHorizontalType = spacing[0];
+            } else if (isNumber(spacing[0])) {
+                realStyle.columnGap = `${spacing[0]}px`;
+            }
+            if (isString(spacing[1])) {
+                spacingVerticalType = spacing[1];
+            } else if (isNumber(spacing[1])) {
+                realStyle.rowGap = `${spacing[1]}px`;
+            }
+        }
+        const classNames = cls(prefixCls, className, {
+            [`${prefixCls}-align-${align}`]: align,
+            [`${prefixCls}-vertical`]: vertical,
+            [`${prefixCls}-horizontal`]: !vertical,
+            [`${prefixCls}-wrap`]: isWrap,
+            [`${prefixCls}-tight-horizontal`]: spacingHorizontalType === strings.SPACING_TIGHT,
+            [`${prefixCls}-tight-vertical`]: spacingVerticalType === strings.SPACING_TIGHT,
+            [`${prefixCls}-medium-horizontal`]: spacingHorizontalType === strings.SPACING_MEDIUM,
+            [`${prefixCls}-medium-vertical`]: spacingVerticalType === strings.SPACING_MEDIUM,
+            [`${prefixCls}-loose-horizontal`]: spacingHorizontalType === strings.SPACING_LOOSE,
+            [`${prefixCls}-loose-vertical`]: spacingVerticalType === strings.SPACING_LOOSE,
+        });
+        const childrenNodes = flatten(children);
+        return (
+            <div className={classNames} style={realStyle}>
+                {childrenNodes}
+            </div>
+        );
+    }
+}
+
+export default Space;

package/space/utils.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode, isValidElement } from 'react';
+
+const REACT_FRAGMENT_TYPE = 'Symbol(react.fragment)';
+
+/**
+ * Flatten the children and return the processed data
+ */
+export const flatten = (children: ReactNode): Array<ReactNode> => {
+    let res: Array<ReactNode> = [];
+
+    React.Children.forEach(children, child => {
+        if (child === undefined || child === null) {
+            return;
+        }
+        if (Array.isArray(child)) {
+            res = res.concat(flatten(child));
+        } else if (isValidElement(child) && child.type && child.type.toString() === REACT_FRAGMENT_TYPE && child.props) {
+            res = res.concat(flatten(child.props.children));
+        } else {
+            res.push(child);
+        }
+    });
+    return res;
+};

package/spin/__test__/spin.test.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Spin from '..';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import { sleep } from '../../_test_/utils';
+
+describe('Spin', () => {
+    it('should be controlled by spinning', () => {
+        const wrapper = shallow(<Spin spinning={false} />);
+        expect(
+            wrapper
+                .find(`.${BASE_CLASS_PREFIX}-spin`)
+                .hasClass(`${BASE_CLASS_PREFIX}-spin-hidden`)
+        ).toEqual(true);
+        
+        wrapper.setProps({ spinning: true });
+        expect(
+            wrapper
+                .find(`.${BASE_CLASS_PREFIX}-spin`)
+                .hasClass(`${BASE_CLASS_PREFIX}-spin-hidden`)
+        ).toEqual(false);
+    });
+
+    it('test delay', async () => {
+        const wrapper = shallow(<Spin delay={1000} spinning={false} />);
+        expect(
+            wrapper
+                .find(`.${BASE_CLASS_PREFIX}-spin`)
+                .hasClass(`${BASE_CLASS_PREFIX}-spin-hidden`)
+        ).toEqual(true);
+        
+        wrapper.setProps({ spinning: true });
+        wrapper.update()
+        expect(
+            wrapper
+                .find(`.${BASE_CLASS_PREFIX}-spin`)
+                .hasClass(`${BASE_CLASS_PREFIX}-spin-hidden`)
+        ).toEqual(true);
+        await sleep(1000);
+        expect(
+            wrapper
+                .find(`.${BASE_CLASS_PREFIX}-spin`)
+                .hasClass(`${BASE_CLASS_PREFIX}-spin-hidden`)
+        ).toEqual(false);
+    });
+});

package/spin/_story/Demo.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Spin from '../index';
+
+const Demo = () => {
+    return (
+        <Spin size="large" tip="hahahahahah" />
+    )
+}
+
+export default Demo

package/spin/_story/spin.stories.js

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import Button from '../../button/index';
+import Spin from '../index';
+
+export default {
+  title: 'Spin'
+}
+
+const Example1 = () => (
+  <div style={{ marginLeft: 30 }}>
+    <div style={{ marginTop: 20 }}>size:small</div>
+    <Spin size="small" />
+    <div style={{ marginTop: 20 }}>size:middle</div>
+    <Spin size="middle" />
+    <div style={{ marginTop: 20 }}>size:large</div>
+    <Spin size="large" />
+  </div>
+);
+
+export const SpinDefault = () => <Example1 />;
+
+SpinDefault.story = {
+  name: 'spin default',
+};
+
+const Example2 = () => {
+  const [visible, setVisible] = useState(true);
+  return (
+    <div>
+      <Spin spinning={visible} tip="loading">
+        <div style={{ 'background-color': '#e6f7ff', border: '1px solid #91d5ff' }}>
+          <p>yoyoyoyoyo</p>
+          <p>yoyoyoyoyo</p>
+          <p>yoyoyoyoyo</p>
+        </div>
+      </Spin>
+      <div style={{ marginTop: 30 }}>
+        <Button
+          onClick={() => {
+            setVisible(!visible);
+          }}
+          style={{ marginRight: 20 }}
+        >
+          受控
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export const SpinHasText = () => <Example2 />;
+
+SpinHasText.story = {
+  name: 'spin has text',
+};
+
+const Example3 = () => {
+  const [visible1, setVisible1] = useState(false);
+  const [visible2, setVisible2] = useState(false);
+  return (
+    <div style={{ marginLeft: 30 }}>
+      <div style={{ marginTop: 30 }}>
+        <Button
+          onClick={() => {
+            setVisible1(!visible1);
+          }}
+          style={{ marginRight: 20 }}
+        >
+          延迟显示spin
+        </Button>
+        <Spin delay={1000} spinning={visible1}></Spin>
+      </div>
+      <div style={{ marginTop: 30 }}>
+        <Button
+          onClick={() => {
+            setVisible2(!visible2);
+          }}
+          style={{ marginRight: 20 }}
+        >
+          受控显示spin
+        </Button>
+        <Spin spinning={visible2}></Spin>
+      </div>
+    </div>
+  );
+};
+
+export const SpinHasDelay = () => <Example3 />;
+
+SpinHasDelay.story = {
+  name: 'spin has delay',
+};

package/spin/_story/spin.stories.tsx

@@ -0,0 +1,6 @@
+import Demo from './Demo';
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+const stories = storiesOf('Spin', module);
+stories.add('Spin', () => <Demo />);

package/spin/icon.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
+
+let _id = -1;
+
+export interface IconProps {
+    id?: number;
+    component?: React.ReactNode;
+    size?: number;
+    className?: string;
+    type?: string;
+}
+
+function Icon(props: IconProps = {}) {
+    const { id: propsId, className, ...rest } = props;
+    let _propsId = propsId;
+    if (isNullOrUndefined(_propsId)) {
+        _id++;
+        _propsId = _id;
+    }
+    const id = `linearGradient-${_propsId}`;
+    return (
+        <svg
+            {...rest}
+            className={className}
+            width="48"
+            height="48"
+            viewBox="0 0 36 36"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <defs>
+                <linearGradient x1="0%" y1="100%" x2="100%" y2="100%" id={id}>
+                    <stop stopColor="currentColor" stopOpacity="0" offset="0%" />
+                    <stop stopColor="currentColor" stopOpacity="0.50" offset="39.9430698%" />
+                    <stop stopColor="currentColor" offset="100%" />
+                </linearGradient>
+            </defs>
+            <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <rect id="Rectangle" fillOpacity="0.01" fill="#FFFFFF" x="0" y="0" width="36" height="36" />
+                <path
+                    d="M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951"
+                    id="Path"
+                    stroke={`url(#${id})`}
+                    strokeWidth="4"
+                    strokeLinecap="round"
+                />
+            </g>
+        </svg>
+    );
+}
+
+export default Icon;