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

package/popconfirm/_story/InTable/index.js

@@ -1,75 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { Table, Popconfirm, Tag, Tooltip, Button } from '@douyinfe/semi-ui/';
-
-export default function Demo(props = {}) {
-    const dataTotalSize = 46;
-
-    const columns = useMemo(
-        () => [
-            {
-                title: 'Name',
-                dataIndex: 'name',
-                width: 150,
-            },
-            {
-                title: 'Age',
-                dataIndex: 'age',
-                width: 150,
-            },
-            {
-                title: 'Address',
-                dataIndex: 'address',
-            },
-            {
-                align: 'left',
-                render: (text, record) => (
-                    <Popconfirm title={record.descriptionZh} content={record.descriptionZh} position={'leftTop'}>
-                        <Tag color="green">Show Info</Tag>
-                    </Popconfirm>
-                ),
-                width: 350,
-            },
-            {
-                align: 'center',
-                dataIndex: 'op',
-                title: '设置',
-                render: (text, record) => (
-                    <>
-                        <Button icon={'user'} />
-                        <Popconfirm
-                            title={record.descriptionZh}
-                            content={record.descriptionZh}
-                            position="left"
-                            style={{ width: 330 }}
-                        >
-                            <Button type="danger" style={{ position: 'relative' }}>
-                                Show Info
-                            </Button>
-                        </Popconfirm>
-                    </>
-                ),
-                width: 150,
-            },
-        ],
-        []
-    );
-
-    const data = useMemo(() => {
-        const _data = [];
-        for (let i = 0; i < dataTotalSize; i++) {
-            let age = 40 + (Math.random() > 0.5 ? 1 : -1) * Math.ceil(i / 3);
-            let name = `Edward King ${i}`;
-            _data.push({
-                key: '' + i,
-                name,
-                age,
-                address: `London, Park Lane no. ${i} Lake Park`,
-                description: `My name is ${name}, I am ${age} years old, living in New York No. ${i + 1} Lake Park.`,
-                descriptionZh: `我的名字叫做 ${name}，${age}岁，住在中关村大街${i + 1}号`,
-            });
-        }
-        return _data;
-    }, []);
-
-    return <Table columns={columns} dataSource={data} />;
-}

package/popconfirm/_story/ShowArrow/index.jsx

@@ -1,141 +0,0 @@
-import React, { useState } from 'react';
-import { Icon, Radio, RadioGroup, Button, ButtonGroup, Switch } from '@douyinfe/semi-ui/';
-import Popconfirm from '../..';
-import { strings } from '@douyinfe/semi-foundation/popconfirm/constants';
-import { IconAlertTriangle } from '@douyinfe/semi-icons';
-
-const defaultTitle = '确定是否要保存此修改？';
-const defaultContent = '此修改将不可逆';
-const typeMap = {
-    default: {
-        okType: 'primary',
-        cancelType: 'primary',
-        icon: 'alert_triangle',
-    },
-    warning: {
-        okType: 'warning',
-        cancelType: 'warning',
-        icon: (
-            <Icon
-                style={{
-                    color: 'var(--semi-color-warning)',
-                }}
-                type={<IconAlertTriangle />}
-                size="extra-large"
-            />
-        ),
-    },
-    danger: {
-        okType: 'danger',
-        cancelType: 'danger',
-        icon: (
-            <Icon
-                style={{
-                    color: 'var(--semi-color-danger)',
-                }}
-                type={<IconAlertTriangle />}
-                size="extra-large"
-            />
-        ),
-    },
-    tertiary: {
-        okType: 'tertiary',
-        cancelType: 'tertiary',
-        icon: (
-            <Icon
-                style={{
-                    color: 'var(--semi-color-tertiary)',
-                }}
-                type={<IconAlertTriangle />}
-                size="extra-large"
-            />
-        ),
-    },
-};
-
-function Demo(props = {}) {
-    const keys = Object.keys(typeMap);
-    const [type, setType] = useState('default');
-    const [title, setTitle] = useState(defaultTitle);
-    const [content, setContent] = useState(defaultContent);
-    const [icon, setIcon] = useState(typeMap[type].icon);
-    const [visible, _setVisible] = useState(true);
-
-    const changeType = e => {
-        const type = e && e.target && e.target.value;
-
-        if (type && keys.includes(type)) {
-            setType(type);
-        }
-    };
-
-    const setVisible = visible => _setVisible(visible);
-
-    const toggleVisible = () => setVisible(!visible);
-
-    const toggleTitle = () => setTitle(title ? null : defaultTitle);
-
-    const toggleContent = () => setContent(content ? null : defaultContent);
-
-    const toggleIcon = () => setIcon(icon ? null : typeMap[type].icon);
-
-    return (
-        <div>
-            <RadioGroup
-                onChange={changeType}
-                value={type}
-                style={{
-                    marginTop: 14,
-                    marginBottom: 14,
-                }}
-            >
-                {keys.map(key => (
-                    <Radio key={key} value={key}>
-                        <strong
-                            style={{
-                                color: `var(--semi-color-${key === 'default' ? 'primary' : key})`,
-                            }}
-                        >
-                            {key}
-                        </strong>
-                    </Radio>
-                ))}
-            </RadioGroup>
-            <div>
-                <label>展示title</label>
-                <Switch checked={Boolean(title)} onChange={toggleTitle} />
-            </div>
-            <div>
-                <label>展示content</label>
-                <Switch checked={Boolean(content)} onChange={toggleContent} />
-            </div>
-            <div>
-                <label>展示icon</label>
-                <Switch checked={Boolean(icon)} onChange={toggleIcon} />
-            </div>
-            <div
-                style={{
-                    margin: 200,
-                }}
-            >
-                {strings.POSITION_SET.map(pos => (
-                    <Popconfirm
-                        {...typeMap[type]}
-                        icon={icon}
-                        onVisibleChange={setVisible}
-                        title={title}
-                        content={content}
-                        key={pos}
-                        position={pos}
-                        arrowPointAtCenter
-                        showArrow
-                    >
-                        <Button onClick={toggleVisible}>点击此处 {pos}</Button>
-                    </Popconfirm>
-                ))}
-            </div>
-        </div>
-    );
-}
-
-export default Demo;

package/popconfirm/_story/TitlePopconfirm/index.js

@@ -1,130 +0,0 @@
-import React, { useState } from 'react';
-import { Icon, Radio, RadioGroup, Button, ButtonGroup, Switch } from '@douyinfe/semi-ui/';
-import Popconfirm from '../..';
-import { IconAlertTriangle } from '@douyinfe/semi-icons';
-const defaultTitle =
-    '确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？';
-const defaultContent =
-    '此修改将不可逆此修改将不可逆此修改将不可逆此修改将不可逆此修改将不可逆此修改将不可逆此修改将不可逆此修改将不可逆此修改将不可逆';
-const typeMap = {
-    default: {
-        okType: 'primary',
-        cancelType: 'primary',
-        icon:  <IconAlertTriangle />,
-    },
-    warning: {
-        okType: 'warning',
-        cancelType: 'warning',
-        icon: (
-            <IconAlertTriangle
-                style={{
-                    color: 'var(--semi-color-warning)',
-                }}
-                size="extra-large"
-            />
-        ),
-    },
-    danger: {
-        okType: 'danger',
-        cancelType: 'danger',
-        icon: (
-            <IconAlertTriangle
-                style={{
-                    color: 'var(--semi-color-danger)',
-                }}
-                size="extra-large"
-            />
-        ),
-    },
-    tertiary: {
-        okType: 'tertiary',
-        cancelType: 'tertiary',
-        icon: (
-            <IconAlertTriangle
-                style={{
-                    color: 'var(--semi-color-tertiary)',
-                }}
-                size="extra-large"
-            />
-        ),
-    },
-};
-
-function Demo(props = {}) {
-    const keys = Object.keys(typeMap);
-    const [type, setType] = useState('default');
-    const [title, setTitle] = useState(defaultTitle);
-    const [content, setContent] = useState(defaultContent);
-    const [icon, setIcon] = useState(typeMap[type].icon);
-    const [visible, _setVisible] = useState(true);
-
-    const changeType = e => {
-        const type = e && e.target && e.target.value;
-
-        if (type && keys.includes(type)) {
-            setType(type);
-        }
-    };
-
-    const setVisible = visible => _setVisible(visible);
-
-    const toggleVisible = () => setVisible(!visible);
-
-    const toggleTitle = () => setTitle(title ? null : defaultTitle);
-
-    const toggleContent = () => setContent(content ? null : defaultContent);
-
-    const toggleIcon = () => setIcon(icon ? null : typeMap[type].icon);
-
-    return (
-        <div>
-            <RadioGroup
-                onChange={changeType}
-                value={type}
-                style={{
-                    marginTop: 14,
-                    marginBottom: 14,
-                }}
-            >
-                {keys.map(key => (
-                    <Radio key={key} value={key}>
-                        <strong
-                            style={{
-                                color: `var(--semi-color-${key === 'default' ? 'primary' : key})`,
-                            }}
-                        >
-                            {key}
-                        </strong>
-                    </Radio>
-                ))}
-            </RadioGroup>
-            <div>
-                <label>展示title</label>
-                <Switch checked={Boolean(title)} onChange={toggleTitle} />
-            </div>
-            <div>
-                <label>展示content</label>
-                <Switch checked={Boolean(content)} onChange={toggleContent} />
-            </div>
-            <div>
-                <label>展示icon</label>
-                <Switch checked={Boolean(icon)} onChange={toggleIcon} />
-            </div>
-            <div>
-                <Popconfirm
-                    {...typeMap[type]}
-                    icon={icon}
-                    visible={visible}
-                    onVisibleChange={setVisible}
-                    trigger="custom"
-                    title={title}
-                    content={content}
-                >
-                    <Button onClick={toggleVisible}>点击此处</Button>
-                </Popconfirm>
-            </div>
-        </div>
-    );
-}
-
-export default Demo;

package/popconfirm/_story/TypesConfirm/index.jsx

@@ -1,121 +0,0 @@
-import React, { useState } from 'react';
-import { Icon, Radio, RadioGroup, Button } from '@douyinfe/semi-ui/';
-import Popconfirm from '../..';
-import { IconAlertTriangle } from '@douyinfe/semi-icons';
-export default function TypesConfirmDemo(props = {}) {
-    const typeMap = {
-        default: {
-            okType: 'primary',
-            cancelType: 'primary',
-            icon: 'alert_triangle',
-        },
-        warning: {
-            okType: 'warning',
-            cancelType: 'warning',
-            icon: (
-                <Icon
-                    style={{
-                        color: 'var(--semi-color-warning)',
-                    }}
-                    type={<IconAlertTriangle />}
-                    size="extra-large"
-                />
-            ),
-        },
-        danger: {
-            okType: 'danger',
-            cancelType: 'danger',
-            icon: (
-                <Icon
-                    style={{
-                        color: 'var(--semi-color-danger)',
-                    }}
-                    type={<IconAlertTriangle />}
-                    size="extra-large"
-                />
-            ),
-        },
-        tertiary: {
-            okType: 'tertiary',
-            cancelType: 'tertiary',
-            icon: (
-                <Icon
-                    style={{
-                        color: 'var(--semi-color-tertiary)',
-                    }}
-                    type={<IconAlertTriangle />}
-                    size="extra-large"
-                />
-            ),
-        },
-    };
-    const keys = Object.keys(typeMap);
-    const [type, setType] = useState('default');
-    const [visible, _setVisible] = useState(true);
-
-    const changeType = e => {
-        const type = e && e.target && e.target.value;
-
-        if (type && keys.includes(type)) {
-            setType(type);
-        }
-    };
-
-    const setVisible = visible => _setVisible(visible);
-
-    const toggleVisible = () => setVisible(!visible);
-
-    return (
-        <div>
-            <RadioGroup
-                onChange={changeType}
-                value={type}
-                style={{
-                    marginTop: 14,
-                    marginBottom: 14,
-                }}
-            >
-                {keys.map(key => (
-                    <Radio key={key} value={key}>
-                        <strong
-                            style={{
-                                color: `var(--semi-color-${key === 'default' ? 'primary' : key})`,
-                            }}
-                        >
-                            {key}
-                        </strong>
-                    </Radio>
-                ))}
-            </RadioGroup>
-            <div>
-                <Popconfirm
-                    {...typeMap[type]}
-                    visible={visible}
-                    onVisibleChange={setVisible}
-                    trigger="custom"
-                    title="确定是否要保存此修改？"
-                    content="此修改将不可逆"
-                >
-                    <Button onClick={toggleVisible}>点击此处</Button>
-                </Popconfirm>
-            </div>
-            <div
-                style={{
-                    marginTop: 320,
-                }}
-            >
-                <Popconfirm
-                    {...typeMap[type]}
-                    showArrow
-                    visible={visible}
-                    onVisibleChange={setVisible}
-                    trigger="custom"
-                    title="确定是否要保存此修改？"
-                    content="此修改将不可逆"
-                >
-                    <Button onClick={toggleVisible}>点击此处</Button>
-                </Popconfirm>
-            </div>
-        </div>
-    );
-}

package/popconfirm/_story/popconfirm.stories.js

@@ -1,170 +0,0 @@
-import React, { useState } from 'react';
-
-import Popconfirm from '../index';
-import Button from '../../button';
-import Input from '../../input';
-import Table from '../../table';
-import Toast from '../../toast';
-
-import TypesConfrimDemo from './TypesConfirm';
-import DynamicDisableDemo from './DynamicDisable';
-import TitleConfirmDemo from './TitlePopconfirm';
-import InTableDemo from './InTable';
-import ShowArrow from './ShowArrow';
-
-export default {
-  title: 'Popconfirm',
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-}
-
-let style = {
-  display: 'inline-block',
-  padding: '20px',
-};
-
-export const Simple = () => (
-  <div>
-    <div style={style}>
-      <Popconfirm
-        title="确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？"
-        content="此修改将不可逆"
-      >
-        <a>Delete</a>
-      </Popconfirm>
-    </div>
-  </div>
-);
-
-Simple.story = {
-  name: 'simple',
-};
-
-export const _Button = () => (
-  <div>
-    <div style={style}>
-      <Popconfirm position="bottomLeft" title="确定是否要保存此修改？" content="此修改将不可逆此修改将不可逆此修改将不可逆此修">
-        <Button>Save</Button>
-      </Popconfirm>
-    </div>
-  </div>
-);
-
-_Button.story = {
-  name: 'button',
-};
-
-const dataSource = [
-  {
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-  },
-  {
-    key: '4',
-    name: 'Disabled User',
-    age: 99,
-    address: 'Sidney No. 1 Lake Park',
-  },
-];
-const columns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    render: text => (
-      <Popconfirm position="bottomLeft" title="确定是否要保存此修改？" content="此修改将不可逆">
-        <Button>{text}</Button>
-      </Popconfirm>
-    ),
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-  },
-];
-
-export const _Table = () => (
-  <div>
-    <Table dataSource={dataSource} columns={columns} />
-  </div>
-);
-
-_Table.story = {
-  name: 'table',
-};
-
-export const TypesConfirm = () => <TypesConfrimDemo />;
-
-TypesConfirm.story = {
-  name: 'types-confirm',
-};
-
-export const DynamicDisable = () => <DynamicDisableDemo />;
-
-DynamicDisable.story = {
-  name: 'dynamic disable',
-};
-
-export const TitlePopconfirm = () => <TitleConfirmDemo />;
-
-TitlePopconfirm.story = {
-  name: 'title popconfirm',
-};
-
-export const InTable = () => <InTableDemo />;
-
-InTable.story = {
-  name: 'in table',
-};
-
-
-export const ShowArrowDemo = () => <ShowArrow />;
-ShowArrowDemo.style = {
-  name: 'show arrow'
-}
-
-export const ClickOutSideDemo = () => {
-    const [v, setV] = useState(false)
-    const onConfirm = () => {
-      Toast.success('确认保存！');
-    };
-
-    const onCancel = () => {
-      Toast.warning('取消保存！');
-    }
-    return (
-      <Popconfirm
-          title="确定是否要保存此修改？"
-          content="此修改将不可逆"
-          visible={v}
-          onClickOutSide={onCancel}
-          onConfirm={onConfirm}
-          onCancel={onCancel}
-      >
-          <Button onClick={() => setV(true)}>保存</Button>
-      </Popconfirm>
-    )
-}
-
-
-ClickOutSideDemo.story = {
-  name: 'ClickOutSideDemo',
-};

package/popconfirm/_story/popconfirm.stories.tsx

@@ -1,20 +0,0 @@
-import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
-
-import Popconfirm from '../index';
-import Button from '../../button';
-
-const stories = storiesOf('popconfirm', module);
-
-stories.add('simple', () => (
-    <div>
-        <div >
-            <Popconfirm
-                title="确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？确定是否要保存此修改？"
-                content="此修改将不可逆"
-            >
-                <Button>Delete</Button>
-            </Popconfirm>
-        </div>
-    </div>
-));