Merge remote-tracking branch 'origin/feature'

2024-12-02 20:19:44 +08:00 · 2020-02-27 22:42:59 +08:00 · 2020-02-27 22:42:59 +08:00 · 181ef7fabc
commit 181ef7fabc
parent 8e367cc6d5 3269d8c387
8 changed files with 250 additions and 12 deletions
--- 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}
--- 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}
--- 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
--- 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);
+  });
 });
--- 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);
+```
--- 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 | - |
--- 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         | -      |
--- 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;
+      }
+    }
+  }
 }