timeline 组件

components/Timeline/__test__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div>
+  <ul>
+    <li
+      class="snake-timeline-item"
+    >
+      <div
+        class="snake-timeline-item-tail"
+      />
+      <div
+        class="snake-timeline-item-dot"
+      >
+        <div
+          class="snake-timeline-item-dot-default snake-timeline-item-dot-default-current"
+          style="background: rgb(44, 165, 241);"
+        />
+      </div>
+      <div
+        class="snake-timeline-item-content snake-timeline-item-content-current"
+        style="color: rgb(44, 165, 241);"
+      >
+        <p>
+          收件人已签收，阿乙
+        </p>
+        <p>
+          2018-08-03 13:34:23
+        </p>
+      </div>
+    </li>
+    <li
+      class="snake-timeline-item"
+    >
+      <div
+        class="snake-timeline-item-tail"
+      />
+      <div
+        class="snake-timeline-item-dot"
+      >
+        <div
+          class="snake-timeline-item-dot-default"
+        />
+      </div>
+      <div
+        class="snake-timeline-item-content"
+      >
+        <p>
+          收件人已签收，阿乙
+        </p>
+        <p>
+          2018-08-03 13:34:23
+        </p>
+      </div>
+    </li>
+    <li
+      class="snake-timeline-item snake-timeline-item-last"
+    >
+      <div
+        class="snake-timeline-item-tail"
+        style="height: 0%;"
+      />
+      <div
+        class="snake-timeline-item-dot"
+      >
+        <div
+          class="snake-timeline-item-dot-default"
+        />
+      </div>
+      <div
+        class="snake-timeline-item-content"
+      >
+        <p>
+          收件人已签收，阿乙
+        </p>
+        <p>
+          2018-08-03 13:34:23
+        </p>
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`renders correctly 2`] = `
+<div>
+  <ul>
+    <li
+      class="snake-timeline-item"
+    >
+      <div
+        class="snake-timeline-item-tail"
+      />
+      <div
+        class="snake-timeline-item-dot"
+      >
+        <div
+          class="snake-timeline-item-dot-default snake-timeline-item-dot-default-current"
+          style="background: rgb(17, 153, 238);"
+        />
+      </div>
+      <div
+        class="snake-timeline-item-content snake-timeline-item-content-current"
+        style="color: rgb(17, 153, 238);"
+      >
+        <p>
+          收件人已签收，阿乙
+        </p>
+        <p>
+          2018-08-03 13:34:23
+        </p>
+      </div>
+    </li>
+    <li
+      class="snake-timeline-item"
+    >
+      <div
+        class="snake-timeline-item-tail"
+      />
+      <div
+        class="snake-timeline-item-dot"
+      >
+        <div
+          class="snake-timeline-item-dot-default"
+        />
+      </div>
+      <div
+        class="snake-timeline-item-content"
+      >
+        <p>
+          收件人已签收，阿乙
+        </p>
+        <p>
+          2018-08-03 13:34:23
+        </p>
+      </div>
+    </li>
+    <li
+      class="snake-timeline-item snake-timeline-item-last"
+    >
+      <div
+        class="snake-timeline-item-tail"
+        style="height: 0%;"
+      />
+      <div
+        class="snake-timeline-item-dot"
+      >
+        <div
+          class="snake-timeline-item-dot-default"
+        />
+      </div>
+      <div
+        class="snake-timeline-item-content"
+      >
+        <p>
+          收件人已签收，阿乙
+        </p>
+        <p>
+          2018-08-03 13:34:23
+        </p>
+      </div>
+    </li>
+  </ul>
+</div>
+`;

components/Timeline/__test__/index.test.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { render } from 'react-testing-library'
+import Timeline from '../index'
+
+// how to remove any
+const TimelineItem = (Timeline as any).Item
+
+it('renders correctly', () => {
+  const options = [
+    {
+      content: (
+        <>
+          <p>收件人已签收，阿乙</p>
+          <p>2018-08-03 13:34:23</p>
+        </>
+      )
+    },
+    {
+      content: (
+        <>
+          <p>收件人已签收，阿乙</p>
+          <p>2018-08-03 13:34:23</p>
+        </>
+      )
+    },
+    {
+      content: (
+        <>
+          <p>收件人已签收，阿乙</p>
+          <p>2018-08-03 13:34:23</p>
+        </>
+      ),
+      lineHeight: 0
+    }
+  ]
+  const { container: Timeline1 } = render(<Timeline options={options} highlightColor="#2ca5f1" />)
+  expect(Timeline1).toMatchSnapshot()
+  const { container: Timeline2 } = render(
+    <Timeline>
+      <TimelineItem>
+        <p>收件人已签收，阿乙</p>
+        <p>2018-08-03 13:34:23</p>
+      </TimelineItem>
+      <TimelineItem>
+        <p>收件人已签收，阿乙</p>
+        <p>2018-08-03 13:34:23</p>
+      </TimelineItem>
+      <TimelineItem lineHeight={0}>
+        <p>收件人已签收，阿乙</p>
+        <p>2018-08-03 13:34:23</p>
+      </TimelineItem>
+    </Timeline>
+  )
+  expect(Timeline2).toMatchSnapshot()
+})

components/Timeline/index.scss

@@ -0,0 +1,50 @@
+@import '../styles/themes/default';
+
+$timeline: 'snake-timeline';
+
+.#{$timeline} {
+  &-item {
+    position: relative;
+    margin: 0;
+    padding: 0 0 20px;
+    font-size: 12px;
+    list-style: none;
+
+    &-last {
+      padding: initial;
+    }
+
+    &-tail {
+      position: absolute;
+      top: 0.75em;
+      left: 4px;
+      height: 100%;
+      border-left: 2px solid #e8e8e8;
+    }
+
+    &-dot {
+      position: absolute;
+
+      &-default {
+        width: 9px;
+        height: 9px;
+        border-radius: 100%;
+        background: #d8d8d8;
+
+        &-current {
+          background: #19e;
+        }
+      }
+    }
+
+    &-content {
+      position: relative;
+      margin: 0 0 0 18px;
+      top: -2px;
+
+      &-current {
+        color: #19e;
+      }
+    }
+  }
+}

components/Timeline/index.tsx

@@ -0,0 +1,4 @@
+import Timeline from './timeline'
+import TimelineItem from './timelineItem'
+;(Timeline as any).Item = TimelineItem
+export default Timeline

components/Timeline/timeline.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import cx from 'classnames'
+import TimelineItem from './timelineItem'
+import { TimelineProps } from 'types/timeline.d'
+import './index.scss'
+
+const defaultProps = {
+  prefixCls: 'snake-timeline',
+  current: 0,
+  highlightColor: '#1199EE'
+}
+
+// 此处因为使用 React.ref 进行包裹, 所以没办法直接直接将 Timeline.Item = TimelineItem
+const Timeline: React.FC<TimelineProps> = (userProps, ref) => {
+  const props = {
+    ...defaultProps,
+    ...userProps
+  }
+
+  const { prefixCls, current, options, children, highlightColor } = props
+  function cloneElement(ele: any, index: number) {
+    const count = (options && options.length) || React.Children.count(children)
+    return React.cloneElement(ele, {
+      className: cx(`${prefixCls}-item`, {
+        [`${prefixCls}-item-last`]: count - 1 === index
+      }),
+      ifCurrent: current === index,
+      highlightColor
+    })
+  }
+
+  function renderTimeline() {
+    if (options && options.length) {
+      return options.map((child, index) => {
+        const { content, lineHeight, dot } = child
+        return cloneElement(
+          <TimelineItem dot={dot} lineHeight={lineHeight} key={index}>
+            {content}
+          </TimelineItem>,
+          index
+        )
+      })
+    }
+
+    return React.Children.map(children, (child: React.ReactNode, index: number) => {
+      return cloneElement(child, index)
+    })
+  }
+
+  return <ul ref={ref}>{renderTimeline()}</ul>
+}
+
+export default React.forwardRef(Timeline)

components/Timeline/timelineItem.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TimeLineItemProps } from 'types/timeline.d'
+import './index.scss'
+
+const defaultProps = {
+  prefixCls: 'snake-timeline-item'
+}
+
+function TimeLineItem(userProps: TimeLineItemProps) {
+  const props = {
+    ...defaultProps,
+    ...userProps
+  }
+  const { prefixCls, dot, children, ifCurrent, lineHeight, highlightColor, ...restProps } = props
+  return (
+    <li {...restProps}>
+      <div className={cx(`${prefixCls}-tail`)} style={{ height: `${lineHeight}%` }} />
+      <div className={cx(`${prefixCls}-dot`)}>
+        {dot ? (
+          dot
+        ) : (
+          <div
+            className={cx(`${prefixCls}-dot-default`, {
+              [`${prefixCls}-dot-default-current`]: ifCurrent
+            })}
+            style={ifCurrent ? { background: highlightColor } : {}}
+          />
+        )}
+      </div>
+      <div
+        className={cx(`${prefixCls}-content`, { [`${prefixCls}-content-current`]: ifCurrent })}
+        style={ifCurrent ? { color: highlightColor } : {}}
+      >
+        {children}
+      </div>
+    </li>
+  )
+}
+
+export default TimeLineItem

components/index.tsx

@@ -14,3 +14,4 @@ export { default as Dropdown } from './Dropdown/index'
 export { default as BackTop } from './BackTop/index'
 export { default as Popover } from './Popover/index'
 export { default as Tooltip } from './Tooltip/index'
+export { default as Timeline } from './Timeline/index'