@douyinfe/semi-ui 2.1.2 → 2.1.5

package/dropdown/_story/dropdown.stories.js

@@ -0,0 +1,331 @@
+import React from 'react';
+import Dropdown from '../index';
+import Avatar from '../../avatar';
+import Button from '@douyinfe/semi-ui/button/index';
+import InTableDemo from './inTable';
+import AutoClose from './AutoClose';
+import MultiDropdown from './MultiDropdown';
+import DisabledItem from './DisabledItem';
+import InHoverElements from './InHoverElements';
+import WrapAvatar from './WrapAvatar';
+import { IconChevronDown, IconBox, IconSimilarity } from '@douyinfe/semi-icons';
+
+export default {
+  title: 'Dropdown',
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  }
+}
+
+export {
+  InTableDemo,
+  MultiDropdown,
+  DisabledItem,
+  InHoverElements,
+  WrapAvatar
+}
+
+let style = {
+  display: 'inline-block',
+  padding: '20px',
+};
+
+const change = visible => {
+  debugger;
+};
+
+export const Dropdown1 = () => (
+  <div>
+    <div style={style}>
+      <Dropdown
+        trigger="click"
+        render={
+          <Dropdown.Menu>
+            <Dropdown.Item disabled>1111</Dropdown.Item>
+            <Dropdown.Divider />
+            <Dropdown.Item selected={true}>
+              2222 What if the text is super long? Longer than whatever you've known
+            </Dropdown.Item>
+            <Dropdown.Item>It looks OK</Dropdown.Item>
+          </Dropdown.Menu>
+        }
+      >
+        <div>分割线</div>
+      </Dropdown>
+    </div>
+
+    <div style={style}>
+      <Dropdown
+        onVisibleChange={change}
+        render={
+          <Dropdown.Menu>
+            <Dropdown.Item>333</Dropdown.Item>
+            <Dropdown.Item>44444</Dropdown.Item>
+          </Dropdown.Menu>
+        }
+      >
+        hover
+      </Dropdown>
+    </div>
+
+    <br />
+
+    <div style={style}>
+      <Dropdown
+        position="bottomRight"
+        render={
+          <Dropdown.Menu>
+            <Dropdown.Item>333</Dropdown.Item>
+            <Dropdown.Item>44444</Dropdown.Item>
+          </Dropdown.Menu>
+        }
+      >
+        hover bottomRight
+      </Dropdown>
+    </div>
+
+    <div style={style}>
+      <Dropdown
+        position="bottomLeft"
+        render={
+          <Dropdown.Menu>
+            <Dropdown.Item>333</Dropdown.Item>
+            <Dropdown.Item>44444</Dropdown.Item>
+          </Dropdown.Menu>
+        }
+      >
+        hover bottomLeft
+      </Dropdown>
+    </div>
+  </div>
+);
+
+export const Dropdown2 = () => {
+  return (
+    <div>
+      <Dropdown
+        trigger="click"
+        position="bottomLeft"
+        render={
+          <Dropdown.Menu>
+            <Dropdown.Item disabled>1111</Dropdown.Item>
+            <Dropdown.Divider />
+            <Dropdown.Item selected={true}>
+              2222 What if the text is super long? Longer than whatever you've known
+            </Dropdown.Item>
+            <Dropdown.Item>It looks OK</Dropdown.Item>
+          </Dropdown.Menu>
+        }
+      >
+        <Button>Open dropdown</Button>
+      </Dropdown>
+    </div>
+  );
+};
+
+export const AvatarDemo = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row-reverse',
+      }}
+    >
+      <Dropdown
+        autoAdjustOverflow={true}
+        trigger="click"
+        position="bottomRight"
+        getPopupContainer={() => document.querySelector('#dropdown-container')}
+        render={
+          <Dropdown.Menu>
+            <Dropdown.Item disabled>1111</Dropdown.Item>
+            <Dropdown.Divider />
+            <Dropdown.Item selected={true}>
+              2222 What if the text is super long? Longer than whatever you've known
+            </Dropdown.Item>
+            <Dropdown.Item>It looks OK</Dropdown.Item>
+          </Dropdown.Menu>
+        }
+      >
+        <div
+          style={{
+            display: 'inline-block',
+          }}
+        >
+          <Avatar size="small" src="" />
+          <IconChevronDown />
+        </div>
+      </Dropdown>
+      <div id="dropdown-container" />
+    </div>
+  );
+};
+
+export const DropdownOnVisibleChange = () => {
+  return (
+    <div>
+      <Dropdown
+        trigger="click"
+        onVisibleChange={(...args) => {
+          console.log('onVisibleChange: ', ...args);
+        }}
+        render={
+          <Dropdown.Menu>
+            <Dropdown.Item disabled>1111</Dropdown.Item>
+            <Dropdown.Divider />
+            <Dropdown.Item selected={true}>
+              2222 What if the text is super long? Longer than whatever you've known
+            </Dropdown.Item>
+            <Dropdown.Item>It looks OK</Dropdown.Item>
+          </Dropdown.Menu>
+        }
+      >
+        <Button>Open dropdown</Button>
+      </Dropdown>
+    </div>
+  );
+};
+
+export const DropdownAutoCloseWhenClicked = () => <AutoClose />;
+
+DropdownAutoCloseWhenClicked.story = {
+  name: 'dropdown auto close when clicked',
+};
+
+export const DropdownItemType = () => (
+  <>
+    <Dropdown
+      visible={true}
+      trigger="custom"
+      render={
+        <Dropdown.Menu>
+          <Dropdown.Item type="primary">primary</Dropdown.Item>
+          <Dropdown.Item type="secondary">secondary</Dropdown.Item>
+          <Dropdown.Item type="tertiary">tertiary</Dropdown.Item>
+          <Dropdown.Item type="warning">warning</Dropdown.Item>
+          <Dropdown.Item type="danger">danger</Dropdown.Item>
+          <Dropdown.Item>default</Dropdown.Item>
+        </Dropdown.Menu>
+      }
+    >
+      Different type Item
+    </Dropdown>
+    <Dropdown
+      visible={true}
+      trigger="custom"
+      showTick
+      render={
+        <Dropdown.Menu>
+          <Dropdown.Item type="primary" active>
+            primary
+          </Dropdown.Item>
+          <Dropdown.Item type="secondary">secondary</Dropdown.Item>
+          <Dropdown.Item type="tertiary">tertiary</Dropdown.Item>
+          <Dropdown.Item type="warning">warning</Dropdown.Item>
+          <Dropdown.Item type="danger" active>
+            编辑danger
+          </Dropdown.Item>
+          <Dropdown.Item>default</Dropdown.Item>
+        </Dropdown.Menu>
+      }
+    >
+      Different type Item
+    </Dropdown>
+  </>
+);
+
+export function DropdownItemPropsDemo() {
+  return (
+    <div>
+      <Dropdown
+        trigger="custom"
+        position="bottomLeft"
+        visible
+        render={
+          <Dropdown.Menu>
+            <Dropdown.Item icon={<IconBox />}>Menu Item 1</Dropdown.Item>
+            <Dropdown.Item iconType="setting">Menu Item 2</Dropdown.Item>
+            <Dropdown.Item disabled iconType="forward">
+              Menu Item 3
+            </Dropdown.Item>
+            <Dropdown.Item iconType="align_center" type="primary" iconType="branch">
+              primary
+            </Dropdown.Item>
+            <Dropdown.Item iconType="color_palette" type="secondary">
+              secondary
+            </Dropdown.Item>
+            <Dropdown.Item iconType="refresh" type="tertiary">
+              tertiary
+            </Dropdown.Item>
+            <Dropdown.Item iconType="search" type="warning">
+              warning
+            </Dropdown.Item>
+            <Dropdown.Item
+              icon={
+                <IconSimilarity
+                  style={{
+                    color: 'var(--semi-color-tertiary)',
+                  }}
+                />
+              }
+              type="danger"
+            >
+              danger
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        }
+      >
+        <Button>始终展示</Button>
+      </Dropdown>
+      <Dropdown
+        trigger="custom"
+        position="bottomLeft"
+        showTick
+        visible
+        render={
+          <Dropdown.Menu>
+            <Dropdown.Item active icon={<IconBox />}>
+              Menu Item 1
+            </Dropdown.Item>
+            <Dropdown.Item iconType="setting">Menu Item 2</Dropdown.Item>
+            <Dropdown.Item disabled iconType="forward">
+              Menu Item 3
+            </Dropdown.Item>
+            <Dropdown.Item iconType="align_center" type="primary" iconType="branch">
+              primary
+            </Dropdown.Item>
+            <Dropdown.Item iconType="color_palette" type="secondary">
+              secondary
+            </Dropdown.Item>
+            <Dropdown.Item iconType="refresh" type="tertiary">
+              tertiary
+            </Dropdown.Item>
+            <Dropdown.Item iconType="search" type="warning">
+              warning
+            </Dropdown.Item>
+            <Dropdown.Item
+              icon={
+                <IconSimilarity
+                  style={{
+                    color: 'var(--semi-color-tertiary)',
+                  }}
+                />
+              }
+              type="danger"
+            >
+              danger
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        }
+      >
+        <Button
+          style={{
+            marginLeft: 200,
+          }}
+        >
+          始终展示
+        </Button>
+      </Dropdown>
+    </div>
+  );
+}

package/dropdown/_story/dropdown.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Dropdown from '../index';
+
+const stories = storiesOf('Dropdown', module);
+
+stories.add(`default`, () => {
+    const Demo = () => {
+        return  <Dropdown
+        trigger="click"
+        render={
+            <Dropdown.Menu>
+                <Dropdown.Item disabled>1111</Dropdown.Item>
+                <Dropdown.Divider />
+                <Dropdown.Item selected={true}>
+                    2222 What if the text is super long? Longer than whatever you've known
+                </Dropdown.Item>
+                <Dropdown.Item>It looks OK</Dropdown.Item>
+            </Dropdown.Menu>
+        }
+    >
+        <div>分割线</div>
+    </Dropdown>
+    }
+
+    return <Demo/>
+})

package/dropdown/_story/inTable/index.js

@@ -0,0 +1,194 @@
+/* eslint-disable max-lines-per-function */
+import React, { useState } from 'react';
+import { Table, Dropdown, Tooltip, Tag, Popover } from '@douyinfe/semi-ui/';
+import { IconCaretdown, IconUser } from '@douyinfe/semi-icons';
+
+const CREATOR_MAP = {
+    ALL: {
+        value: 0,
+        desc: '创建者',
+    },
+    MINE: {
+        value: 1,
+        desc: '只看我的',
+    },
+};
+
+function InTableDemo({}) {
+    const [currentCreator, setCurrentCreator] = useState({});
+
+    const setCreator = type => {
+        if (type) {
+            setCurrentCreator(CREATOR_MAP[type] || {});
+        }
+    };
+
+    const onDropdownVisibleChange = (...args) => console.log('Dropdown onVisibleChange: ', ...args);
+
+    const onPopoverVisibleChange = (...args) => console.log('Popover onVisibleChange: ', ...args);
+
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            width: 150,
+        },
+        {
+            title: 'Age',
+            dataIndex: 'age',
+            width: 150,
+        },
+        {
+            title: 'Address',
+            dataIndex: 'address',
+        },
+        {
+            title: (
+                <Dropdown
+                    position={'bottomLeft'}
+                    trigger="click"
+                    onVisibleChange={onDropdownVisibleChange}
+                    render={(
+                        <Dropdown.Menu>
+                            <Dropdown.Item onClick={() => setCreator('ALL')}>创建者</Dropdown.Item>
+                            <Dropdown.Item onClick={() => setCreator('MINE')}>只看我的</Dropdown.Item>
+                        </Dropdown.Menu>
+                    )}
+                >
+                    <span>{'点击trigger'}</span>
+                    <IconCaretdown />
+                </Dropdown>
+            ),
+            key: 'creator',
+            render: () => (
+                <div>
+                    <Dropdown
+                        position={'bottomLeft'}
+                        trigger="click"
+                        onVisibleChange={onDropdownVisibleChange}
+                        render={(
+                            <Dropdown.Menu>
+                                <Dropdown.Item onClick={() => setCreator('ALL')}>创建者</Dropdown.Item>
+                                <Dropdown.Item onClick={() => setCreator('MINE')}>只看我的</Dropdown.Item>
+                            </Dropdown.Menu>
+                        )}
+                    >
+                        <span>
+                            <span>{currentCreator.desc}</span>
+                            <IconCaretdown />
+                        </span>
+                    </Dropdown>
+                    <span
+                        style={{
+                            marginLeft: 10,
+                        }}
+                    >
+                        <Popover
+                            trigger="click"
+                            onVisibleChange={onPopoverVisibleChange}
+                            content={(
+                                <article
+                                    style={{
+                                        padding: 20,
+                                    }}
+                                >
+                                    123
+                                </article>
+                            )}
+                        >
+                            <IconUser />
+                        </Popover>
+                    </span>
+                </div>
+            ),
+            width: 168,
+        },
+        {
+            title: (
+                <Dropdown
+                    position={'bottomLeft'}
+                    trigger="hover"
+                    onVisibleChange={onDropdownVisibleChange}
+                    render={(
+                        <Dropdown.Menu>
+                            <Dropdown.Item onClick={() => setCreator('ALL')}>创建者</Dropdown.Item>
+                            <Dropdown.Item onClick={() => setCreator('MINE')}>只看我的</Dropdown.Item>
+                        </Dropdown.Menu>
+                    )}
+                >
+                    <span>{'hover trigger'}</span>
+                    <IconCaretdown />
+                </Dropdown>
+            ),
+            key: 'hover-creator',
+            render: () => (
+                <div>
+                    <Dropdown
+                        position={'bottomLeft'}
+                        trigger="hover"
+                        onVisibleChange={onDropdownVisibleChange}
+                        render={(
+                            <Dropdown.Menu>
+                                <Dropdown.Item onClick={() => setCreator('ALL')}>创建者</Dropdown.Item>
+                                <Dropdown.Item onClick={() => setCreator('MINE')}>只看我的</Dropdown.Item>
+                            </Dropdown.Menu>
+                        )}
+                    >
+                        <span>
+                            <span>{currentCreator.desc}</span>
+                            <IconCaretdown />
+                        </span>
+                    </Dropdown>
+                    <span
+                        style={{
+                            marginLeft: 10,
+                        }}
+                    >
+                        <Popover
+                            trigger="hover"
+                            onVisibleChange={onPopoverVisibleChange}
+                            content={(
+                                <article
+                                    style={{
+                                        padding: 20,
+                                    }}
+                                >
+                                    123
+                                </article>
+                            )}
+                        >
+                            <IconUser />
+                        </Popover>
+                    </span>
+                </div>
+            ),
+            width: 168,
+        },
+        {
+            render: (text, record) => (
+                <Tooltip content={record.description}>
+                    <Tag color="green">Show Info</Tag>
+                </Tooltip>
+            ),
+            width: 150,
+        },
+    ];
+    const dataTotalSize = 43;
+    const data = [];
+
+    for (let i = 0; i < dataTotalSize; i++) {
+        let age = 40 + i;
+        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.`,
+        });
+    }
+
+    return <Table columns={columns} dataSource={data} />;
+}
+
+export default InTableDemo;

package/dropdown/context.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const DropdownContext = React.createContext({
+    level: 0,
+});
+export default DropdownContext;

package/dropdown/dropdownDivider.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses } from '@douyinfe/semi-foundation/dropdown/constants';
+import { BaseProps } from '../_base/baseComponent';
+
+
+const prefixCls = cssClasses.PREFIX;
+
+export type DropdownDividerProps = BaseProps;
+
+
+const DropdownDivider: React.FC<DropdownDividerProps> = (props = {}) => {
+    const { style, className } = props;
+    return <div className={classnames(`${prefixCls}-divider`, className)} style={style} />;
+};
+
+DropdownDivider.propTypes = {
+    style: PropTypes.object,
+    className: PropTypes.string,
+};
+
+export default DropdownDivider;

package/dropdown/dropdownItem.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses as css, strings } from '@douyinfe/semi-foundation/dropdown/constants';
+import DropdownContext from './context';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+import { IconTick } from '@douyinfe/semi-icons';
+import { noop } from 'lodash';
+
+export type Type = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
+
+export interface DropdownItemProps extends BaseProps {
+    disabled?: boolean;
+    selected?: boolean;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLLIElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLLIElement>;
+    onContextMenu?: React.MouseEventHandler<HTMLLIElement>;
+    forwardRef?: (ele: HTMLLIElement) => void;
+    type?: Type;
+    active?: boolean;
+    icon?: React.ReactNode;
+}
+
+const prefixCls = css.PREFIX;
+
+class DropdownItem extends BaseComponent<DropdownItemProps> {
+    static propTypes = {
+        children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+        name: PropTypes.string,
+        disabled: PropTypes.bool,
+        selected: PropTypes.bool,
+        onClick: PropTypes.func,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+        onContextMenu: PropTypes.func,
+        className: PropTypes.string,
+        style: PropTypes.object,
+        forwardRef: PropTypes.func,
+        type: PropTypes.oneOf(strings.ITEM_TYPE),
+        active: PropTypes.bool,
+        icon: PropTypes.node
+    };
+
+    static contextType = DropdownContext;
+
+    static defaultProps = {
+        disabled: false,
+        divided: false,
+        selected: false,
+        onMouseEnter: noop,
+        onMouseLeave: noop,
+        forwardRef: noop,
+    };
+
+
+    render() {
+        const { children, disabled, className, forwardRef, style, type, active, icon } = this.props;
+        const { showTick } = this.context;
+        const itemclass = cls(className, {
+            [`${prefixCls}-item`]: true,
+            [`${prefixCls}-item-disabled`]: disabled,
+            [`${prefixCls}-item-withTick`]: showTick,
+            [`${prefixCls}-item-${type}`]: type,
+            [`${prefixCls}-item-active`]: active,
+        });
+
+        const events = {};
+        if (!disabled) {
+            ['onClick', 'onMouseEnter', 'onMouseLeave', 'onContextMenu'].forEach(eventName => {
+                events[eventName] = this.props[eventName];
+            });
+        }
+        let tick = null;
+        switch (true) {
+            case showTick && active:
+                tick = <IconTick />;
+                break;
+            case showTick && !active:
+                tick = <IconTick style={{ color: 'transparent' }} />;
+                break;
+            default:
+                tick = null;
+                break;
+        }
+        let iconContent = null;
+        if (icon) {
+            iconContent = (
+                <div className={`${prefixCls}-item-icon`}>
+                    {icon}
+                </div>
+            );
+        }
+        return (
+            <li {...events} ref={ref => forwardRef(ref)} className={itemclass} style={style}>
+                {tick}
+                {iconContent}
+                {children}
+            </li>
+        );
+    }
+}
+
+export default DropdownItem;