@douyinfe/semi-ui 2.1.5 → 2.2.0

package/navigation/__test__/navigation.test.js

@@ -36,7 +36,7 @@ describe(`Navigation`, () => {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwzthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{
                     collapseButton: true,
@@ -71,7 +71,7 @@ describe(`Navigation`, () => {
                 onSelect={data => console.log('trigger onSelect: ', data)}
                 onClick={data => console.log('trigger onClick: ', data)}
             >
-                <Nav.Header logo={'bytedance_logo'} text={'直播运营后台'} />
+                <Nav.Header logo={'bytedance_logo'} text={'Semi 运营后台'} />
                 <Nav.Item itemKey={'union'} text={'公会中心'} icon={'star'} />
                 <Nav.Sub itemKey={'user'} text="用户管理" icon="user">
                     <Nav.Item itemKey={'golder'} text={'金主管理'} />
@@ -135,7 +135,7 @@ describe(`Navigation`, () => {
                 items={items}
                 header={{
                     logo: 'bytedance_logo',
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{ collapseButton: true }}
             />
@@ -201,7 +201,7 @@ describe(`Navigation`, () => {
                 onClick={onClick}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwzthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{
                     collapseButton: true,

package/navigation/_story/AutoOpen/index.js

@@ -55,7 +55,7 @@ const Demo = (props = {}) => {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi运营后台',
                 }}
                 footer={{
                     collapseButton: true,

package/navigation/_story/WithChildren/index.js

@@ -106,7 +106,7 @@ const Demo = (props = {}) => {
                 onOpenChange={onOpenChange}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{
                     collapseButton: true,

package/navigation/_story/navigation.stories.js

@@ -272,7 +272,7 @@ class HorizontalDemo extends React.Component {
             logo: (
               <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />
             ),
-            text: '直播运营后台',
+            text: 'Semi 运营后台',
           }}
           footer={{
             collapseButton: true,

package/navigation/_story/navigation.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { IconHome, IconHistogram, IconSetting, IconLive, IconUser, IconStar } from '@douyinfe/semi-icons';
+import { IconHome, IconHistogram, IconSetting, IconLive, IconUser, IconStar, IconUserGroup } from '@douyinfe/semi-icons';
 
 import Nav from '..';
 
@@ -15,7 +15,7 @@ stories.add(`default`, () => {
                 <Nav onSelect={(...args: any[]) => console.log(...args)}>
                     <Nav.Header logo={<img src={logo} />} text={'火山运营'} />
                     <Nav.Item itemKey={'1'} text={'Option 1'} icon="mail" link="/mail" />
-                    <Nav.Sub text={'Group 2'} icon="folder" stayWhenClick={true} itemKey={'2'}>
+                    <Nav.Sub text={'Group 2'} icon="folder" itemKey={'2'}>
                         {['2-1', '2-2'].map(k => (
                             <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} link={`folder/${k}`} />
                         ))}
@@ -27,7 +27,7 @@ stories.add(`default`, () => {
                     </Nav.Sub>
                     <Nav.Item key={3} itemKey={'3'} text={'Option 3'} icon="gift" />
                     <Nav.Item key={4} itemKey={'4'} text={'Option 4'} icon="list" />
-                    <Nav.Sub text={'Group 5'} icon="flag" stayWhenClick={true} itemKey={'5'}>
+                    <Nav.Sub text={'Group 5'} icon="flag" itemKey={'5'}>
                         {['5-1', '5-2'].map(k => (
                             <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} />
                         ))}
@@ -80,7 +80,7 @@ stories.add(`fix 35`, () => {
                     onSelect={data => console.log('trigger onSelect: ', data)}
                     onClick={data => console.log('trigger onClick: ', data)}
                 >
-                    <Nav.Header logo={<img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />} text={'直播运营后台'} />
+                    <Nav.Header logo={<img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />} text={'Semi 运营后台'} />
                     <Nav.Item itemKey={'union'} text={'公会中心'} icon={<IconStar />} />
                     <Nav.Sub itemKey={'user'} text="用户管理" icon={<IconUser />}>
                         <Nav.Item itemKey={'golder'} text={'金主管理'} />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.1.5",
+    "version": "2.2.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,11 +14,11 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation-react": "2.1.5",
-        "@douyinfe/semi-foundation": "2.1.5",
-        "@douyinfe/semi-icons": "2.1.5",
-        "@douyinfe/semi-illustrations": "2.1.5",
-        "@douyinfe/semi-theme-default": "2.1.5",
+        "@douyinfe/semi-animation-react": "2.2.0",
+        "@douyinfe/semi-foundation": "2.2.0",
+        "@douyinfe/semi-icons": "2.2.0",
+        "@douyinfe/semi-illustrations": "2.2.0",
+        "@douyinfe/semi-theme-default": "2.2.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -53,6 +53,14 @@
         "pc component",
         "dark mode"
     ],
+    "homepage": "https://semi.design",
+    "bugs": {
+        "url": "https://github.com/DouyinFE/semi-design/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/DouyinFE"
+    },
     "_unpkg": true,
     "unpkgFiles": [
         "dist/css",
@@ -60,13 +68,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "8e2db56ec6e5a3f2ddf47ec03224e5e6adf443c2",
+    "gitHead": "f47324c727f9ca85ceb44649c4227b75876c4596",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.1.5",
+        "@douyinfe/semi-scss-compile": "2.2.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",
@@ -91,7 +99,7 @@
         "react-storybook-addon-props-combinations": "^1.1.0",
         "react-virtualized": "^9.22.3",
         "rimraf": "^3.0.2",
-        "sass": "1.32.13",
+        "sass": "1.45.0",
         "sinon": "^6.3.5",
         "terser-webpack-plugin": "^4.2.3",
         "through2": "^4.0.2",

package/pagination/_story/pagination.stories.js

@@ -146,3 +146,14 @@ export const PaginationDynamicUpdatePageSize = () => <DynamicPageSize />;
 PaginationDynamicUpdatePageSize.story = {
   name: 'Pagination dynamic update pageSize',
 };
+
+
+export const HideOnSingePageAndShowChanger = () => {
+  return (
+    <Pagination total={10} hideOnSinglePage showSizeChanger style={{ marginBottom: 12 }}></Pagination>
+  )
+}
+
+HideOnSingePageAndShowChanger.story = {
+  name: 'hideOnSingelePage & showSizeChanger at same time',
+};

package/pagination/index.tsx

@@ -14,6 +14,7 @@ import { cssClasses, numbers } from '@douyinfe/semi-foundation/pagination/consta
 import '@douyinfe/semi-foundation/pagination/pagination.scss';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+import warning from '@douyinfe/semi-foundation/utils/warning';
 
 import ConfigContext from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
@@ -127,6 +128,10 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         this.foundation = new PaginationFoundation(this.adapter);
         this.renderDefaultPage = this.renderDefaultPage.bind(this);
         this.renderSmallPage = this.renderSmallPage.bind(this);
+        warning(
+            Boolean(props.showSizeChanger && props.hideOnSinglePage),
+            '[Semi Pagination] You should not use showSizeChanger and hideOnSinglePage in ths same time. At this time, hideOnSinglePage no longer takes effect, otherwise there may be a problem that the switch entry disappears'
+        );
     }
 
     get adapter(): PaginationAdapter<PaginationProps, PaginationState> {
@@ -377,11 +382,11 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
     }
 
     renderSmallPage(locale: PaginationLocale) {
-        const { className, style, hideOnSinglePage, hoverShowPageSelect } = this.props;
+        const { className, style, hideOnSinglePage, hoverShowPageSelect, showSizeChanger } = this.props;
         const paginationCls = classNames(`${prefixCls}-small`, prefixCls, className);
         const { currentPage, total, pageSize } = this.state;
         const totalPageNum = Math.ceil(total / pageSize);
-        if (totalPageNum < 2 && hideOnSinglePage) {
+        if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
             return null;
         }
 
@@ -410,11 +415,11 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
 
     renderDefaultPage(locale: PaginationLocale) {
         const { total, pageSize } = this.state;
-        const { showTotal, className, style, hideOnSinglePage } = this.props;
+        const { showTotal, className, style, hideOnSinglePage, showSizeChanger } = this.props;
         const paginationCls = classNames(className, `${prefixCls}`);
         const showTotalCls = `${prefixCls }-total`;
         const totalPageNum = Math.ceil(total / pageSize);
-        if (totalPageNum < 2 && hideOnSinglePage) {
+        if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
             return null;
         }
         return (

package/popover/Arrow.tsx

@@ -55,7 +55,7 @@ const Arrow: React.FC<ArrowProps> = (props = {}) => {
             <path d="M0 0L1 0C1 4, 2 5.5, 4 7.5S7,10 7,12S6 14.5, 4 16.5S1,20 1,24L0 24L0 0z" fill={bgColor} />
         </svg>
     );
-}
+};
 
 Arrow.propTypes = {
     position: PropTypes.string,

package/rating/item.tsx

@@ -88,7 +88,7 @@ export default class Item extends PureComponent<RatingItemProps> {
             height: size,
             fontSize: size
         } : {};
-        const iconSize = size === 'small' ? 'default' : 'extra-large';
+        const iconSize = isCustomSize ? 'inherit' : (size === 'small' ? 'default' : 'extra-large');
         const content = character ? character : <IconStar size={iconSize} />;
         return (
             <li className={starCls} style={{ ...sizeStyle }}>

package/select/_story/select.stories.js

@@ -1033,12 +1033,12 @@ class CustomRender extends React.Component {
     };
   }
 
-  renderCustomOption(item) {
-    let optionStyle = {
+  renderCustomOption(item, index) {
+    const optionStyle = {
       display: 'flex',
     };
     return (
-      <Option value={item.name} style={optionStyle} showTick={false} {...item}>
+      <Option key={index} value={item.name} style={optionStyle} showTick={false} {...item}>
         <Avatar color={item.color} size="small">
           {item.abbr}
         </Avatar>
@@ -1098,7 +1098,7 @@ class CustomRender extends React.Component {
     };
   }
 
-  renderMultipleWithoutTag(optionNode, { onClose, index }) {
+  renderMultipleWithoutTag(optionNode) {
     let content = (
       <div>
         <Avatar color={optionNode.color} size="small">
@@ -1125,7 +1125,7 @@ class CustomRender extends React.Component {
           defaultValue={'夏可漫'}
           renderSelectedItem={this.renderSelectedItem}
         >
-          {list.map(item => this.renderCustomOption(item))}
+          {list.map((item, index) => this.renderCustomOption(item, index))}
         </Select>
         <Select
           style={{
@@ -1138,7 +1138,7 @@ class CustomRender extends React.Component {
           multiple
           renderSelectedItem={this.renderMultipleSelectedItem}
         >
-          {list.map(item => this.renderCustomOption(item))}
+          {list.map((item, index) => this.renderCustomOption(item, index))}
         </Select>
         <Select
           style={{
@@ -1151,7 +1151,7 @@ class CustomRender extends React.Component {
           multiple
           renderSelectedItem={this.renderMultipleWithoutTag}
         >
-          {list.map(item => this.renderCustomOption(item))}
+          {list.map((item, index) => this.renderCustomOption(item, index))}
         </Select>
       </React.Fragment>
     );
@@ -2122,15 +2122,15 @@ class OptionGroupDemo extends React.Component {
     });
   }
 
-  renderGroup(group) {
-    let options = group.children.map(option => (
-      <Select.Option value={option.value} label={option.label} key={option.label}></Select.Option>
+  renderGroup(group, index) {
+    const options = group.children.map(option => (
+      <Select.Option value={option.value} label={option.label} key={option.label} />
     ));
-    return <Select.OptGroup label={group.label}>{options}</Select.OptGroup>;
+    return <Select.OptGroup key={`${index}-${group.label}`} label={group.label}>{options}</Select.OptGroup>;
   }
 
   render() {
-    let { groups } = this.state;
+    const { groups } = this.state;
     return (
       <>
         <Select
@@ -2142,14 +2142,14 @@ class OptionGroupDemo extends React.Component {
           onSearch={this.handleSearch}
           remote
         >
-          {groups.map(group => this.renderGroup(group))}
+          {groups.map((group, index) => this.renderGroup(group, index))}
         </Select>
       </>
     );
   }
 }
 
-export const SelectOptionGroup = () => <OptionGroupDemo></OptionGroupDemo>;
+export const SelectOptionGroup = () => <OptionGroupDemo />;
 
 SelectOptionGroup.story = {
   name: 'Select OptionGroup',
@@ -2850,3 +2850,28 @@ export const ScrollIntoView = () => (
 ScrollIntoView.story = {
   name: 'scroll into view',
 };
+
+
+export const SelectInputPropsDemo = () => {
+
+  const inputProps = {
+    className: 'ttt',
+    onCompositionEnd: (v) => console.log(v.target.value)
+  };
+
+  return (
+    <Select 
+      // onSearch={(v) => console.log(v)}
+      optionList={list}
+      inputProps={inputProps}
+      multiple
+      filter
+      style={{ width: 200 }}
+    >
+    </Select>
+  )
+};
+SelectInputPropsDemo.story = {
+  name: 'inputProps',
+};
+

package/select/index.tsx

@@ -18,13 +18,14 @@ import { FixedSizeList as List } from 'react-window';
 import { getOptionsFromGroup } from './utils';
 import VirtualRow from './virtualRow';
 
-import Input from '../input/index';
+import Input, { InputProps } from '../input/index';
 import Option, { OptionProps } from './option';
 import OptionGroup from './optionGroup';
 import Spin from '../spin';
 import Trigger from '../trigger';
 import { IconChevronDown, IconClear } from '@douyinfe/semi-icons';
 import { isSemiIcon } from '../_utils';
+import { Subtract } from 'utility-types';
 
 import warning from '@douyinfe/semi-foundation/utils/warning';
 
@@ -40,6 +41,12 @@ const prefixcls = cssClasses.PREFIX;
 
 const key = 0;
 
+type ExcludeInputType = {
+    value?: InputProps['value'];
+    onFocus?: InputProps['onFocus'];
+    onChange?: InputProps['onChange'];
+}
+
 type OnChangeValueType = string | number | Record<string, any>;
 export interface optionRenderProps {
     key?: any;
@@ -115,6 +122,7 @@ export type SelectProps = {
     suffix?: React.ReactNode;
     prefix?: React.ReactNode;
     insetLabel?: React.ReactNode;
+    inputProps?: Subtract<InputProps, ExcludeInputType>;
     showClear?: boolean;
     showArrow?: boolean;
     renderSelectedItem?: RenderSelectedItemFn;
@@ -200,6 +208,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         dropdownStyle: PropTypes.object,
         outerTopSlot: PropTypes.node,
         innerTopSlot: PropTypes.node,
+        inputProps: PropTypes.object,
         outerBottomSlot: PropTypes.node,
         innerBottomSlot: PropTypes.node, // Options slot
         optionList: PropTypes.array,
@@ -558,18 +567,20 @@ class Select extends BaseComponent<SelectProps, SelectState> {
     handleInputChange = (value: string) => this.foundation.handleInputChange(value);
 
     renderInput() {
-        const { size, multiple, disabled } = this.props;
+        const { size, multiple, disabled, inputProps } = this.props;
+        const inputPropsCls = get(inputProps, 'className');
         const inputcls = cls(`${prefixcls}-input`, {
             [`${prefixcls}-input-single`]: !multiple,
             [`${prefixcls}-input-multiple`]: multiple,
-        });
+        }, inputPropsCls);
         const { inputValue } = this.state;
 
-        const inputProps: Record<string, any> = {
+        const selectInputProps: Record<string, any> = {
             value: inputValue,
             disabled,
             className: inputcls,
             onChange: this.handleInputChange,
+            ...inputProps,
         };
 
         let style = {};
@@ -578,18 +589,18 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             style = {
                 width: inputValue ? `${inputValue.length * 16}px` : '2px',
             };
-            inputProps.style = style;
+            selectInputProps.style = style;
         }
         return (
             <Input
                 ref={this.inputRef as any}
                 size={size}
-                {...inputProps}
                 onFocus={(e: React.FocusEvent<HTMLInputElement>) => {
                     // prevent event bubbling which will fire trigger onFocus event
                     e.stopPropagation();
                     // e.nativeEvent.stopImmediatePropagation();
                 }}
+                {...selectInputProps}
             />
         );
     }
@@ -883,7 +894,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                     </Tag>
                 );
             } else {
-                return content;
+                return <Fragment key={value}>{content}</Fragment>;
             }
         });
 

package/table/_story/DynamicFilters/index.js

@@ -6,22 +6,19 @@ class App extends React.Component {
     constructor() {
         super();
         const labels = [
-            { text: '范政源测试', value: 1428 },
-            { text: '商业化接单候选人', value: 4 },
-            { text: '华星MCN签约', value: 6 },
-            { text: '抖音', value: 18 },
-            { text: '抖音认证特效师', value: 3 },
-            { text: '测试boe能解决', value: 1427 },
-            { text: 'a哈哈哈哈', value: 1 },
-            { text: '测试啊', value: 1406 },
-            { text: 'asa', value: 1404 },
-            { text: '啊啊啊啊啊啊大 sad但', value: 1401 },
-            { text: 'chess', value: 1397 },
-            { text: '试试看嗷', value: 1396 },
-            { text: '爆款特效师', value: 2 },
-            { text: '123456789123', value: 24 },
-            { text: '哈哈', value: 23 },
-            { text: '匠子空间mcn签约', value: 7 },
+            { text: '测试数据0', value: 4 },
+            { text: '测试数据1', value: 18 },
+            { text: '测试数据2', value: 3 },
+            { text: '测试数据3', value: 1427 },
+            { text: '测试数据4', value: 1 },
+            { text: '测试数据5', value: 1406 },
+            { text: '测试数据6', value: 1404 },
+            { text: '测试数据7', value: 1401 },
+            { text: '测试数据8', value: 1397 },
+            { text: '测试数据9', value: 1396 },
+            { text: '测试数据10', value: 2 },
+            { text: '测试数据11', value: 24 },
+            { text: '测试数据12', value: 23 },
         ];
         this.state = {
             data: datsJson,

package/tabs/index.tsx

@@ -15,7 +15,7 @@ import TabPane from './TabPane';
 import TabsContext from './tabs-context';
 import { TabsProps, PlainTab, TabBarProps } from './interface';
 
-const panePickKeys = Object.keys(omit(TabPane.propTypes, ['children']));
+const panePickKeys = ['className', 'style', 'disabled', 'itemKey', 'tab', 'icon'];
 
 export * from './interface';
 

package/timeline/_story/timeline.stories.js

@@ -81,8 +81,21 @@ export const Mode = () => (
       }}
     >
       <Timeline mode="alternate">
-        <Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>
-        <Timeline.Item time="2015-09-01">初步排除网络异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>创建服务现场</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>初步排除网络异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>技术测试异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>网络异常正在修复</Timeline.Item>
+      </Timeline>
+    </div>
+    <br />
+    <div
+      style={{
+        width: '300px',
+      }}
+    >
+      <Timeline mode="right">
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>创建服务现场</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>初步排除网络异常</Timeline.Item>
         <Timeline.Item time="2015-09-01">技术测试异常</Timeline.Item>
         <Timeline.Item time="2015-09-01">网络异常正在修复</Timeline.Item>
       </Timeline>
@@ -93,9 +106,9 @@ export const Mode = () => (
         width: '300px',
       }}
     >
-      <Timeline mode="right">
-        <Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>
-        <Timeline.Item time="2015-09-01">初步排除网络异常</Timeline.Item>
+      <Timeline mode="left">
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>创建服务现场</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>初步排除网络异常</Timeline.Item>
         <Timeline.Item time="2015-09-01">技术测试异常</Timeline.Item>
         <Timeline.Item time="2015-09-01">网络异常正在修复</Timeline.Item>
       </Timeline>
@@ -108,7 +121,7 @@ export const Mode = () => (
     >
       <Timeline mode="center">
         <Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>
-        <Timeline.Item time="2015-09-01">初步排除网络异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>初步排除网络异常</Timeline.Item>
         <Timeline.Item time="2015-09-01">技术测试异常</Timeline.Item>
         <Timeline.Item time="2015-09-01">网络异常正在修复</Timeline.Item>
       </Timeline>
@@ -152,6 +165,7 @@ const data = [
     time: '2019-05-09 09:12',
     extra: '节点辅助说明信息',
     content: '网络异常正在修复',
+    dot: <IconAlertTriangle />,
     type: 'success',
   },
 ];
@@ -169,3 +183,53 @@ export const DataSource = () => (
 DataSource.story = {
   name: 'dataSource',
 };
+
+const dataWithOnClick = [
+  {
+      time: '2019-07-14 10:35',
+      extra: '节点辅助说明信息',
+      content: '创建服务现场',
+      type: 'ongoing',
+      onClick: e => console.log(e, '创建服务现场'),
+  },
+  {
+      time: '2019-06-13 16:17',
+      extra: '节点辅助说明信息',
+      content: <span style={{ fontSize: '18px' }}>初步排除网络异常</span>,
+      color: 'pink',
+      onClick: e => console.log(e, '初步排除网络异常'),
+  },
+  {
+      time: '2019-05-14 18:34',
+      extra: '节点辅助说明信息',
+      dot: <Icon type="alert_triangle" />,
+      content: '技术测试异常',
+      type: 'warning',
+      onClick: e => console.log(e, '技术测试异常'),
+  },
+  {
+      time: '2019-05-09 09:12',
+      extra: '节点辅助说明信息',
+      content: '网络异常正在修复',
+      type: 'success',
+      onClick: e => console.log(e, '网络异常正在修复'),
+  }
+];
+
+export const OnClickDemo = () => (
+  <div style={{ width: '400px' }}>
+    <div style={{ width: '300px' }}>
+        <Timeline mode='center'>
+            <Timeline.Item time='2015-09-01' onClick={e=>console.log(e, '创建服务现场')}>创建服务现场</Timeline.Item>
+            <Timeline.Item time='2015-09-01' onClick={e=>console.log(e, '初步排除网络异常')}>初步排除网络异常</Timeline.Item>
+            <Timeline.Item time='2015-09-01' onClick={e=>console.log(e, '技术测试异常')}>技术测试异常</Timeline.Item>
+            <Timeline.Item time='2015-09-01' onClick={e=>console.log(e, '网络异常正在修复')}>网络异常正在修复</Timeline.Item>
+        </Timeline>
+        <Timeline mode='alternate' dataSource={dataWithOnClick} />
+    </div>
+  </div>
+);
+
+OnClickDemo.story = {
+  name: 'onClick',
+};