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

package/list/_story/list.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import List from '../index';
+
+const stories = storiesOf('List', module);
+
+const data = [
+    '从明天起，做一个幸福的人',
+    '喂马，劈柴，周游世界',
+    '从明天起，关心粮食和蔬菜',
+    '我有一所房子，面朝大海，春暖花开'
+];
+
+stories.add('List', () => (
+    <>
+            <List
+                header={<div>Header</div>}
+                footer={<div>Footer</div>}
+                bordered
+                dataSource={data}
+                renderItem={(item, id) => (
+                    <List.Item>{item + id}</List.Item>
+                )}
+            />
+    </>
+));

package/list/index.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/list/constants';
+import { noop } from 'lodash';
+import '@douyinfe/semi-foundation/list/list.scss';
+import LocaleConsumer from '../locale/localeConsumer';
+import { Locale } from '../locale/interface';
+import ListItem from './item';
+import { Row } from '../grid';
+import Spin from '../spin';
+import ListContext, { Grid } from './list-context';
+import BaseComponent from '../_base/baseComponent';
+
+export { ListItemProps } from './item';
+
+export interface ListProps {
+    style?: React.CSSProperties;
+    className?: string;
+    bordered?: boolean;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    layout?: 'vertical' | 'horizontal';
+    size?: 'small' | 'large' | 'default';
+    split?: boolean;
+    emptyContent?: React.ReactNode;
+    dataSource?: any[];
+    renderItem?: (item: any, ind: number) => React.ReactNode;
+    grid?: Grid;
+    loading?: boolean;
+    loadMore?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+    onRightClick?: React.MouseEventHandler<HTMLLIElement>;
+}
+
+const prefixCls = cssClasses.PREFIX;
+
+class List extends BaseComponent<ListProps> {
+    static Item = ListItem;
+
+    static propTypes = {
+        style: PropTypes.object,
+        className: PropTypes.string,
+        bordered: PropTypes.bool,
+        footer: PropTypes.node,
+        header: PropTypes.node,
+        layout: PropTypes.oneOf(strings.LAYOUT),
+        size: PropTypes.oneOf(strings.SIZE),
+        split: PropTypes.bool,
+        emptyContent: PropTypes.node,
+        dataSource: PropTypes.array,
+        renderItem: PropTypes.func,
+        grid: PropTypes.object,
+        loading: PropTypes.bool,
+        loadMore: PropTypes.node,
+        onRightClick: PropTypes.func,
+        onClick: PropTypes.func,
+    };
+
+    static defaultProps = {
+        bordered: false,
+        split: true,
+        loading: false,
+        layout: 'vertical',
+        size: 'default',
+        onRightClick: noop,
+        onClick: noop,
+    };
+
+    renderEmpty = () => {
+        const { emptyContent } = this.props;
+        if (emptyContent) {
+            return (<div className={`${cssClasses.PREFIX}-empty`}>{emptyContent}</div>);
+        } else {
+            return (
+                <LocaleConsumer componentName="List">
+                    {
+                        (locale: Locale['List']) => (
+                            <div className={`${cssClasses.PREFIX}-empty`}>{locale.emptyText}</div>
+                        )
+                    }
+                </LocaleConsumer>
+            );
+        }
+    };
+
+    wrapChildren(childrenList: React.ReactNode, children: React.ReactNode) {
+        const { grid } = this.props;
+        if (grid) {
+            const rowProps = {};
+            ['align', 'gutter', 'justify', 'type'].forEach(key => {
+                if (key in grid) {
+                    rowProps[key] = grid[key];
+                }
+            });
+            return (
+                <Row type="flex" {...rowProps}>
+                    {childrenList ? childrenList : null}
+                    {children}
+                </Row>
+            );
+        }
+        return (
+            <ul className={`${prefixCls}-items`}>
+                {childrenList ? childrenList : null}
+                {children}
+            </ul>
+        );
+    }
+
+    render() {
+        const {
+            style,
+            className,
+            header,
+            loading,
+            onRightClick,
+            onClick,
+            footer,
+            layout,
+            grid,
+            size,
+            split,
+            loadMore,
+            bordered,
+            dataSource,
+            renderItem,
+            children
+        } = this.props;
+        const wrapperCls = cls(prefixCls, className, {
+            [`${prefixCls}-flex`]: layout === 'horizontal',
+            [`${prefixCls}-${size}`]: size,
+            [`${prefixCls}-grid`]: grid,
+            [`${prefixCls}-split`]: split,
+            [`${prefixCls}-bordered`]: bordered,
+        });
+        let childrenList;
+        if (dataSource && dataSource.length) {
+            childrenList = [];
+            const items = renderItem ? dataSource.map((item, index) => renderItem(item, index)) : [];
+            React.Children.forEach(items as any, (child, index) => {
+                const itemKey = child.key || `list-item-${index}`;
+                childrenList.push(
+                    React.cloneElement(child, {
+                        key: itemKey,
+                    })
+                );
+            });
+        } else if (!children && !loading) {
+            childrenList = this.renderEmpty();
+        }
+        return (
+            <div className={wrapperCls} style={style}>
+                {header ? <div className={`${cssClasses.PREFIX}-header`}>{header}</div> : null}
+                <ListContext.Provider
+                    value={{
+                        grid,
+                        onRightClick,
+                        onClick
+                    }}
+                >
+                    <Spin spinning={loading} size="large">
+                        {this.wrapChildren(childrenList, children)}
+                    </Spin>
+                </ListContext.Provider>
+                {footer ? <div className={`${cssClasses.PREFIX}-footer`}>{footer}</div> : null}
+                {loadMore ? loadMore : null}
+            </div>
+        );
+    }
+}
+
+export default List;

package/list/item.tsx

@@ -0,0 +1,109 @@
+import React, { PureComponent } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/list/constants';
+import { noop } from 'lodash';
+import { Col } from '../grid';
+import ListContext from './list-context';
+
+export interface ListItemProps {
+    extra?: React.ReactNode;
+    header?: React.ReactNode;
+    main?: React.ReactNode;
+    align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+    onRightClick?: React.MouseEventHandler<HTMLLIElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLLIElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLLIElement>;
+}
+
+const prefixCls = cssClasses.PREFIX;
+export default class ListItem extends PureComponent<ListItemProps> {
+    static contextType = ListContext;
+
+    static propTypes = {
+        extra: PropTypes.node,
+        header: PropTypes.node,
+        main: PropTypes.node,
+        align: PropTypes.oneOf(strings.ALIGN),
+        className: PropTypes.string,
+        style: PropTypes.object,
+        onClick: PropTypes.func,
+        onRightClick: PropTypes.func,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+    };
+
+    static defaultProps = {
+        align: 'flex-start',
+        onMouseEnter: noop,
+        onMouseLeave: noop,
+    };
+
+    wrapWithGrid(content: React.ReactNode) {
+        const { grid } = this.context;
+        const { gutter, justify, type, align, ...rest } = grid;
+        return (
+            <Col {...rest}>
+                {content}
+            </Col>
+        );
+    }
+
+    render() {
+        const {
+            header,
+            main,
+            className,
+            style,
+            extra,
+            children,
+            align,
+            onClick,
+            onRightClick,
+            onMouseEnter,
+            onMouseLeave
+        } = this.props;
+        const { onRightClick: contextOnRightClick, onClick: contextOnClick, grid: contextGrid } = this.context;
+        const handleContextMenu = onRightClick ? onRightClick : contextOnRightClick;
+        const handleClick = onClick ? onClick : contextOnClick;
+        const itemCls = cls(`${prefixCls}-item`, className);
+        const bodyCls = cls(`${prefixCls}-item-body`,
+            {
+                [`${prefixCls}-item-body-${align}`]: align,
+            }
+        );
+        let body;
+        if (header || main) {
+            body = (
+                <div className={bodyCls}>
+                    {header ? <div className={`${prefixCls}-item-body-header`}>{header}</div> : null}
+                    {main ? <div className={`${prefixCls}-item-body-main`}>{main}</div> : null}
+                </div>
+            );
+        }
+        let content = (
+            <li
+                role="list-item"
+                className={itemCls}
+                style={style}
+                onClick={handleClick}
+                onContextMenu={handleContextMenu}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+            >
+                {body ? body : null}
+                {children}
+                {extra ? <div className={`${prefixCls}-item-extra`}>{extra}</div> : null}
+            </li>
+        );
+
+        if (this.context && contextGrid) {
+            content = this.wrapWithGrid(content);
+        }
+
+        return content;
+    }
+}

package/list/list-context.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { RowProps } from '../grid/row';
+import { ColProps } from '../grid/col';
+
+export interface Grid extends RowProps, ColProps {}
+
+export interface ListContextValue {
+    onRightClick?: React.MouseEventHandler<HTMLLIElement>;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+    grid?: Grid;
+}
+
+const ListContext = React.createContext<ListContextValue>(null);
+
+export default ListContext;

package/locale/README.md

@@ -0,0 +1,53 @@
+### Name
+Semi Design locale package
+
+## Description
+Component multilingual support
+
+## Usage
+```js
+import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';
+import { LocaleProvider } from '@douyinfe/semi-ui';
+
+return (
+    <LocaleProvider locale={en_GB}>
+        <App/>
+    </LocaleProvider>
+);
+```
+
+## How to add a language package
+1. Create a language file, add it to source directory(semi-ui/packages/semi-ui/locale/source)
+
+![](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi-lang-file.png)
+
+2. Translation component built-in text
+
+![](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi-lang-content.jpg)
+
+3. In order to let users know that there is this language package, you need to:
+    - Add it to the [LocaleProvider page](./index.md) to let users know that there is this new language package
+    - Import this new language file to [demo scope](../../../src/templates/scope.js) so that demo can support it
+
+> Notice: Don't replace key in `${}` which is a dynamic value.
+
+![](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/locale-bug-1432.png)
+
+## What the language file should include
+- code: language package code
+- dateFnsLocale: need to pass date-fns locale object when formatting a date (using dateFns.format or dateFns.parse etc)
+- text: components' built-in text
+
+
+### UI
+<table>
+    <tbody>
+        <tr>
+            <td align="center"><a href="https://semi.design/zh-CN/contribute/"><img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/SemiLogo.jpg" width="100px;" alt="" style="max-width:100%;"><br><sub><b>Semi Teams</b></sub></a></td>
+        </tr>
+    </tbody>
+</table>
+
+## License
+
+MIT

package/locale/_story/locale.stories.js

@@ -0,0 +1,221 @@
+import React from 'react';
+import { useState } from 'react';
+import {
+  Modal,
+  Pagination,
+  DatePicker,
+  TimePicker,
+  Select,
+  Button,
+  Cascader,
+  LocaleProvider
+} from '../../index';
+
+import zh_CN from '@douyinfe/semi-ui/locale/source/zh_CN';
+import en_GB from '@douyinfe/semi-ui/locale/source/en_GB';
+import en_US from '@douyinfe/semi-ui/locale/source/en_US';
+import ko_KR from '@douyinfe/semi-ui/locale/source/ko_KR';
+import ja_JP from '@douyinfe/semi-ui/locale/source/ja_JP';
+import ru_RU from '@douyinfe/semi-ui/locale/source/ru_RU';
+import vi_VN from '@douyinfe/semi-ui/locale/source/vi_VN';
+
+const { Option } = Select;
+
+export default {
+  title: 'LocaleProvider'
+}
+// -√ Pagination
+// -√ Modal
+// -× DatePicker
+// -√ Table
+// -√ Select
+// -× Calendar
+// -√ Timepicker
+
+const TableDemo = () => {};
+
+const CascaderDemo = () => {
+  const treeData = [
+    {
+      label: '亚洲',
+      value: 'yazhou',
+      children: [
+        {
+          label: '中国',
+          value: 'zhongguo',
+          children: [
+            {
+              label: '北京',
+              value: 'beijing',
+            },
+            {
+              label: '上海',
+              value: 'shanghai',
+            },
+          ],
+        },
+        {
+          label: '日本',
+          value: 'riben',
+          children: [
+            {
+              label: '大阪',
+              value: 'daban',
+            },
+          ],
+        },
+      ],
+    },
+  ];
+  return <Cascader style={{ width: 300, margin: 10 }} treeData={treeData} filterTreeNode />;
+};
+
+const I18nComponent = () => {
+  const [modalVisible, setModalVisible] = useState(false);
+  const style = { margin: 10 };
+  return (
+    <>
+      <Pagination total={100} showTotal showSizeChanger style={style} />
+      <div style={style}>
+        <Button onClick={() => setModalVisible(true)}>Show Modal</Button>
+      </div>
+      <div style={style}>
+        <Select filter style={{ width: '180px' }}>
+          <Option value="abc">abc</Option>
+          <Option value="vigo" disabled>
+            vigo
+          </Option>
+          <Option value="hotsoon">hotsoon</Option>
+        </Select>
+        <CascaderDemo />
+      </div>
+      <Modal
+        title="Modal"
+        visible={modalVisible}
+        onOk={() => setModalVisible(false)}
+        onCancel={() => setModalVisible(false)}
+      >
+        <p>This is the content of a basic modal.</p>
+        <p>More content...</p>
+      </Modal>
+      <DatePicker style={{ ...style, width: 200 }} />
+      <DatePicker style={{ ...style, width: 250 }} type="dateTime" />
+      <DatePicker style={{ ...style, width: 250 }} type="dateRange" />
+      <DatePicker style={{ ...style, width: 400 }} type="dateTimeRange" />
+      <TimePicker style={style} />
+      <TimePicker use12Hours style={style} />
+      <br />
+      <br />
+    </>
+  );
+};
+
+class I18nDemo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      locale: zh_CN,
+    };
+    this.onLanguageChange = this.onLanguageChange.bind(this);
+  }
+
+  onLanguageChange(code) {
+    let language = {
+      zh_CN: zh_CN,
+      en_GB: en_GB,
+      ko_KR: ko_KR,
+      ja_JP: ja_JP,
+    };
+    this.setState({ locale: language[code] });
+  }
+
+  render() {
+    const { locale } = this.state;
+    return (
+      <>
+        <Select onChange={this.onLanguageChange}>
+          <Option value="zh_CN">中文</Option>
+          <Option value="en_GB">英语（英）</Option>
+          <Option value="ja_JP">日语</Option>
+          <Option value="ko_KR">韩语</Option>
+        </Select>
+        <hr />
+        <LocaleProvider locale={locale}>
+          <I18nComponent />
+        </LocaleProvider>
+      </>
+    );
+  }
+}
+
+export const LocaleZhCn = () => (
+  <LocaleProvider locale={zh_CN}>
+    <I18nComponent />
+  </LocaleProvider>
+);
+
+LocaleZhCn.story = {
+  name: 'Locale zh_CN',
+};
+
+export const LocaleEnGb = () => (
+  <LocaleProvider locale={en_GB}>
+    <I18nComponent />
+  </LocaleProvider>
+);
+
+LocaleEnGb.story = {
+  name: 'Locale en-GB',
+};
+
+export const LocaleEnUs = () => (
+  <LocaleProvider locale={en_US}>
+    <I18nComponent />
+  </LocaleProvider>
+);
+
+LocaleEnUs.story = {
+  name: 'Locale en-US',
+};
+
+export const LocaleJaJp = () => (
+  <LocaleProvider locale={ja_JP}>
+    <I18nComponent />
+  </LocaleProvider>
+);
+
+LocaleJaJp.story = {
+  name: 'Locale ja_JP',
+};
+
+export const LocaleKoKr = () => (
+  <LocaleProvider locale={ko_KR}>
+    <I18nComponent />
+  </LocaleProvider>
+);
+
+LocaleKoKr.story = {
+  name: 'Locale ko_KR',
+};
+
+export const LocaleRuRu = () => (
+  <LocaleProvider locale={ru_RU}>
+    <I18nComponent />
+  </LocaleProvider>
+);
+
+LocaleRuRu.story = {
+  name: 'Locale ru_RU',
+};
+
+export const LocaleViVn = () => (
+  <LocaleProvider locale={vi_VN}>
+    <I18nComponent />
+  </LocaleProvider>
+);
+
+LocaleViVn.story = {
+  name: 'Locale vi_VN',
+};
+
+export const Locale = () => <I18nDemo />;

package/locale/_story/locale.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { useState } from 'react';
+import { Modal, Pagination, DatePicker, TimePicker, Table, Select, Button, Cascader } from '../../index';
+
+import LocaleProvider from '../localeProvider';
+
+import zh_CN from '@douyinfe/semi-ui/locale/source/zh_CN';
+import en_GB from '@douyinfe/semi-ui/locale/source/en_GB';
+import en_US from '@douyinfe/semi-ui/locale/source/en_US';
+import ko_KR from '@douyinfe/semi-ui/locale/source/ko_KR';
+import ja_JP from '@douyinfe/semi-ui/locale/source/ja_JP';
+
+const stories = storiesOf('Locale', module);
+const Option = Select.Option;
+
+interface IProps {
+    [x: string]: any;
+}
+interface IState {
+    [x: string]: any;
+}
+
+stories.add('Locale zh_CN', () => (
+    <LocaleProvider>
+        <Select>
+            <Option value="zh_CN">中文</Option>
+            <Option value="en_GB">英语（英）</Option>
+            <Option value="ja_JP">日语</Option>
+            <Option value="ko_KR">韩语</Option>
+        </Select>
+    </LocaleProvider>
+));
+
+// stories.add('Locale en-GB', () => (
+//     <LocaleProvider locale={en_GB}>
+//         <I18nComponent />
+//     </LocaleProvider>
+// ));
+
+// stories.add('Locale en-US', () => (
+//     <LocaleProvider locale={en_US}>
+//         <I18nComponent />
+//     </LocaleProvider>
+// ));
+
+// stories.add('Locale ja_JP', () => (
+//     <LocaleProvider locale={ja_JP}>
+//         <I18nComponent />
+//     </LocaleProvider>
+// ));
+
+// stories.add('Locale ko_KR', () => (
+//     <LocaleProvider locale={ko_KR}>
+//         <I18nComponent />
+//     </LocaleProvider>
+// ));

package/locale/context.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Locale } from './interface';
+
+const LocaleContext = React.createContext<Locale>(null);
+export default LocaleContext;