@douyinfe/semi-ui 2.1.4 → 2.2.0-beta.1

package/modal/Modal.tsx

@@ -47,8 +47,8 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         closable: PropTypes.bool,
         centered: PropTypes.bool,
         visible: PropTypes.bool,
-        width: PropTypes.number,
-        height: PropTypes.number,
+        width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        height:  PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         confirmLoading: PropTypes.bool,
         cancelLoading: PropTypes.bool,
         okText: PropTypes.string,
@@ -264,9 +264,9 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         if (!visible && !hidden) {
             this.foundation.toggleHidden(true, () => this.foundation.afterClose());
         } else if (visible && this.state.hidden) {
-            this.foundation.toggleHidden(false)
+            this.foundation.toggleHidden(false);
         }
-    }
+    };
 
     renderFooter = (): ReactNode => {
         const {

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/navigation/index.tsx

@@ -50,8 +50,8 @@ export interface NavProps extends BaseProps {
     defaultIsCollapsed?: boolean;
     defaultOpenKeys?: React.ReactText[];
     defaultSelectedKeys?: React.ReactText[];
-    footer?: React.ReactNode | NavHeaderProps;
-    header?: React.ReactNode | NavFooterProps;
+    footer?: React.ReactNode | NavFooterProps;
+    header?: React.ReactNode | NavHeaderProps;
     isCollapsed?: boolean;
     items?: NavItems;
     limitIndent?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.1.4",
+    "version": "2.2.0-beta.1",
     "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.4",
-        "@douyinfe/semi-foundation": "2.1.4",
-        "@douyinfe/semi-icons": "2.1.4",
-        "@douyinfe/semi-illustrations": "2.1.4",
-        "@douyinfe/semi-theme-default": "2.1.4",
+        "@douyinfe/semi-animation-react": "2.2.0-beta.1",
+        "@douyinfe/semi-foundation": "2.2.0-beta.1",
+        "@douyinfe/semi-icons": "2.2.0-beta.1",
+        "@douyinfe/semi-illustrations": "2.2.0-beta.1",
+        "@douyinfe/semi-theme-default": "2.2.0-beta.1",
         "@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": "c6ce83aa28229d455cba4c01bc84c53f76c57c78",
+    "gitHead": "b380360d4f966a59369dc1ab895cb23bb9903751",
     "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.4",
+        "@douyinfe/semi-scss-compile": "2.2.0-beta.1",
         "@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/radio/_story/radio.stories.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import Button from '../../button';
 import Space from '../../space';
 
-import { Radio, RadioGroup } from '../../index';
+import { Radio, RadioGroup, Form, Tooltip } from '../../index';
 import { Row, Col } from '../../grid';
 import './radio.scss';
 
@@ -855,3 +855,14 @@ export const RadioGroupPureCardStyle = () => (
 RadioGroupPureCardStyle.story = {
   name: 'radioGroup pureCard style'
 }
+
+export const FixWithFieldLossRef = () => {
+  return (
+    <Form>
+        <Tooltip visible trigger="custom" content={'hi bytedance'}>
+            <Form.Radio>Semi</Form.Radio>
+        </Tooltip>
+    </Form>
+  );
+}
+FixWithFieldLossRef.storyName = '修复 Form Field 丢失 ref 问题 #384';

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;
@@ -78,6 +85,7 @@ export type RenderMultipleSelectedItemFn = (optionNode: Record<string, any>, mul
 export type RenderSelectedItemFn = RenderSingleSelectedItemFn | RenderMultipleSelectedItemFn;
 
 export type SelectProps = {
+    id?: string;
     autoFocus?: boolean;
     arrowIcon?: React.ReactNode;
     defaultValue?: string | number | any[] | Record<string, any>;
@@ -114,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;
@@ -199,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,
@@ -557,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 = {};
@@ -577,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}
             />
         );
     }
@@ -882,7 +894,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                     </Tag>
                 );
             } else {
-                return content;
+                return <Fragment key={value}>{content}</Fragment>;
             }
         });
 
@@ -981,6 +993,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             multiple,
             filter,
             style,
+            id,
             size,
             className,
             validateStatus,
@@ -1063,6 +1076,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 ref={ref => ((this.triggerRef as any).current = ref)}
                 onClick={e => this.foundation.handleClick(e)}
                 style={style}
+                id={id}
                 tabIndex={tabIndex}
                 onMouseEnter={this.onMouseEnter}
                 onMouseLeave={this.onMouseLeave}

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/timeline/__test__/timeline.test.js

@@ -234,4 +234,20 @@ describe('Timeline', () => {
         timelineRight.unmount();
     });
 
-});
+  it('Timeline with time type ReactNode',()=>{
+    const timeline=mount(<Timeline>
+      <Timeline.Item time={<span>2019-07-14 10:35</span>}>第一个节点内容</Timeline.Item>
+      <Timeline.Item time="2019-06-13 16:17">第二个节点内容</Timeline.Item>
+    </Timeline>, {
+      attachTo: document.getElementById('container'),
+    });
+    const firstItem = timeline.find(`.${BASE_CLASS_PREFIX}-timeline-item .${BASE_CLASS_PREFIX}-timeline-item-content .${BASE_CLASS_PREFIX}-timeline-item-content-time`).at(0);
+    expect(
+      firstItem
+        .getDOMNode()
+        .innerHTML
+    ).toEqual('<span>2019-07-14 10:35</span>');
+    timeline.unmount();
+  });
+
+});