feat: Timeline.Item support label (ant-design#21560)

* feat: Timeline add label * improve label style with mode * update snapshot * use optional chaining * add doc * Update label.md Co-authored-by: 偏右 <[email protected]>
smwhr · Feb 26, 2020 · 3269d8c · 3269d8c
1 parent a321b5e
commit 3269d8c
Show file tree

Hide file tree

Showing 8 changed files with 250 additions and 12 deletions.
diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx
@@ -37,16 +37,6 @@ export default class Timeline extends React.Component<TimelineProps, any> {
     } = this.props;
     const prefixCls = getPrefixCls('timeline', customizePrefixCls);
     const pendingNode = typeof pending === 'boolean' ? null : pending;
-    const classString = classNames(
-      prefixCls,
-      {
-        [`${prefixCls}-pending`]: !!pending,
-        [`${prefixCls}-reverse`]: !!reverse,
-        [`${prefixCls}-${mode}`]: !!mode,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-      },
-      className,
-    );
 
     const pendingItem = pending ? (
       <TimelineItem pending={!!pending} dot={pendingDot || <LoadingOutlined />}>
@@ -86,6 +76,22 @@ export default class Timeline extends React.Component<TimelineProps, any> {
       });
     });
 
+    const hasLabelItem = timeLineItems.some(
+      (item: React.ReactElement<any>) => !!item?.props?.label,
+    );
+
+    const classString = classNames(
+      prefixCls,
+      {
+        [`${prefixCls}-pending`]: !!pending,
+        [`${prefixCls}-reverse`]: !!reverse,
+        [`${prefixCls}-${mode}`]: !!mode && !hasLabelItem,
+        [`${prefixCls}-label`]: hasLabelItem,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+      },
+      className,
+    );
+
     return (
       <ul {...restProps} className={classString}>
         {items}

diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx
@@ -11,6 +11,7 @@ export interface TimeLineItemProps {
   pending?: boolean;
   position?: string;
   style?: React.CSSProperties;
+  label?: React.ReactNode;
 }
 
 const TimelineItem: React.SFC<TimeLineItemProps> = props => (
@@ -23,6 +24,7 @@ const TimelineItem: React.SFC<TimeLineItemProps> = props => (
         children,
         pending,
         dot,
+        label,
         ...restProps
       } = props;
 
@@ -43,6 +45,7 @@ const TimelineItem: React.SFC<TimeLineItemProps> = props => (
 
       return (
         <li {...omit(restProps, ['position'])} className={itemClassName}>
+          {label && <div className={`${prefixCls}-item-label`}>{label}</div>}
           <div className={`${prefixCls}-item-tail`} />
           <div
             className={dotClassName}

diff --git a/components/timeline/__tests__/__snapshots__/demo.test.js.snap b/components/timeline/__tests__/__snapshots__/demo.test.js.snap
@@ -435,6 +435,153 @@ exports[`renders ./components/timeline/demo/custom.md correctly 1`] = `
 </ul>
 `;
 
+exports[`renders ./components/timeline/demo/label.md correctly 1`] = `
+Array [
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+    style="margin-bottom:20px"
+  >
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked"
+    >
+      <span
+        class="ant-radio ant-radio-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          type="radio"
+          value="left"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Left
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="right"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Right
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="alternate"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Alternate
+      </span>
+    </label>
+  </div>,
+  <ul
+    class="ant-timeline ant-timeline-label"
+  >
+    <li
+      class="ant-timeline-item ant-timeline-item-left"
+    >
+      <div
+        class="ant-timeline-item-label"
+      >
+        2015-09-01
+      </div>
+      <div
+        class="ant-timeline-item-tail"
+      />
+      <div
+        class="ant-timeline-item-head ant-timeline-item-head-blue"
+      />
+      <div
+        class="ant-timeline-item-content"
+      >
+        Create a services
+      </div>
+    </li>
+    <li
+      class="ant-timeline-item ant-timeline-item-left"
+    >
+      <div
+        class="ant-timeline-item-label"
+      >
+        2015-09-01 09:12:11
+      </div>
+      <div
+        class="ant-timeline-item-tail"
+      />
+      <div
+        class="ant-timeline-item-head ant-timeline-item-head-blue"
+      />
+      <div
+        class="ant-timeline-item-content"
+      >
+        Solve initial network problems
+      </div>
+    </li>
+    <li
+      class="ant-timeline-item ant-timeline-item-left"
+    >
+      <div
+        class="ant-timeline-item-tail"
+      />
+      <div
+        class="ant-timeline-item-head ant-timeline-item-head-blue"
+      />
+      <div
+        class="ant-timeline-item-content"
+      >
+        Technical testing
+      </div>
+    </li>
+    <li
+      class="ant-timeline-item ant-timeline-item-last ant-timeline-item-left"
+    >
+      <div
+        class="ant-timeline-item-label"
+      >
+        2015-09-01 09:12:11
+      </div>
+      <div
+        class="ant-timeline-item-tail"
+      />
+      <div
+        class="ant-timeline-item-head ant-timeline-item-head-blue"
+      />
+      <div
+        class="ant-timeline-item-content"
+      >
+        Network problems being solved
+      </div>
+    </li>
+  </ul>,
+]
+`;
+
 exports[`renders ./components/timeline/demo/pending.md correctly 1`] = `
 <div>
   <ul

diff --git a/components/timeline/__tests__/index.test.js b/components/timeline/__tests__/index.test.js
@@ -6,12 +6,13 @@ import rtlTest from '../../../tests/shared/rtlTest';
 
 const { Item } = TimeLine;
 
-const wrapperFactory = (timeLineProps = {}) =>
+const wrapperFactory = (timeLineProps = {}, labelItems) =>
   mount(
     <TimeLine type="editable-card" {...timeLineProps}>
       <Item key="1">foo</Item>
       <Item key="2">bar</Item>
       <Item key="3">baz</Item>
+      {labelItems}
     </TimeLine>,
   );
 
@@ -136,4 +137,16 @@ describe('TimeLine', () => {
       ).toBe(true);
     });
   });
+
+  it('renders Timeline item with label correctly', () => {
+    const label = '2020-01-01';
+    const wrapper = wrapperFactory(
+      {},
+      <Item key="1" label={label}>
+        foo
+      </Item>,
+    );
+    expect(wrapper.find('.ant-timeline-label')).toHaveLength(1);
+    expect(wrapper.find('.ant-timeline-item-label').text()).toBe(label);
+  });
 });
diff --git a/components/timeline/demo/label.md b/components/timeline/demo/label.md
@@ -0,0 +1,51 @@
+---
+order: 5
+title:
+  zh-CN: 标签
+  en-US: Label
+---
+
+## zh-CN
+
+使用 `label` 标签单独展示时间。
+
+## en-US
+
+Use `label` show time alone.
+
+```jsx
+import { useState } from 'react';
+import { Timeline, Radio } from 'antd';
+
+function TimelimeLabelDemo() {
+  const [mode, setMode] = useState('left');
+
+  const onChange = e => {
+    setMode(e.target.value);
+  };
+
+  return (
+    <>
+      <Radio.Group
+        onChange={onChange}
+        value={mode}
+        style={{
+          marginBottom: 20,
+        }}
+      >
+        <Radio value="left">Left</Radio>
+        <Radio value="right">Right</Radio>
+        <Radio value="alternate">Alternate</Radio>
+      </Radio.Group>
+      <Timeline mode={mode}>
+        <Timeline.Item label="2015-09-01">Create a services</Timeline.Item>
+        <Timeline.Item label="2015-09-01 09:12:11">Solve initial network problems</Timeline.Item>
+        <Timeline.Item>Technical testing</Timeline.Item>
+        <Timeline.Item label="2015-09-01 09:12:11">Network problems being solved</Timeline.Item>
+      </Timeline>
+    </>
+  );
+}
+
+ReactDOM.render(<TimelimeLabelDemo />, mountNode);
+```
diff --git a/components/timeline/index.en-US.md b/components/timeline/index.en-US.md
@@ -42,3 +42,4 @@ Node of timeline
 | color | Set the circle's color to `blue`, `red`, `green`, `gray` or other custom colors | string | `blue` |
 | dot | Customize timeline dot | string\|ReactNode | - |
 | position | Customize node position | `left` \| `right` | - |
+| label | Set the label | ReactNode | - |
diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md
@@ -43,3 +43,4 @@ title: Timeline
 | color    | 指定圆圈颜色 `blue, red, green, gray`，或自定义的色值 | string            | blue   |
 | dot      | 自定义时间轴点                                        | string\|ReactNode | -      |
 | position | 自定义节点位置                                        | `left` \| `right` | -      |
+| label    | 设置标签                                              | ReactNode         | -      |
diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less
@@ -117,7 +117,8 @@
   }
 
   &.@{timeline-prefix-cls}-alternate,
-  &.@{timeline-prefix-cls}-right {
+  &.@{timeline-prefix-cls}-right,
+  &.@{timeline-prefix-cls}-label {
     .@{timeline-prefix-cls}-item {
       &-tail,
       &-head,
@@ -231,4 +232,19 @@
       min-height: 48px;
     }
   }
+  &.@{timeline-prefix-cls}-label {
+    .@{timeline-prefix-cls}-item-label {
+      position: absolute;
+      top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
+      width: calc(50% - 12px);
+      text-align: right;
+    }
+    .@{timeline-prefix-cls}-item-right {
+      .@{timeline-prefix-cls}-item-label {
+        left: calc(50% + 14px);
+        width: calc(50% - 14px);
+        text-align: left;
+      }
+    }
+  }
 }