feat: timeselect (#216)

src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`timeselect props test 1`] = `
+<div>
+  <div
+    class="overlay-fade-enter-active nut-overlay"
+    style="z-index: 2000; animation-duration: 0.3s;"
+  />
+  <div
+    class="round popup-bottom  undefined nut-popup"
+    style="width: 100%; height: 50%; z-index: 2000; animation-duration: 0.3s;"
+  >
+    <div
+      class="nut-timeselect "
+    >
+      <div
+        class="nut-timeselect__title"
+      >
+        取件时间 1
+      </div>
+      <div
+        class="nut-timeselect__content"
+      >
+        <div
+          class="nut-timeselect__content-left"
+        >
+          <div
+            class="nut-timepannel nut-timepannel-active"
+          >
+            5月20日(今天)
+          </div>
+          <div
+            class="nut-timepannel "
+          >
+            5月21日(星期三)
+          </div>
+        </div>
+        <div
+          class="nut-timedetail "
+        >
+          <span
+            class="nut-timedetail__item"
+          >
+            9:00-10:00
+          </span>
+          <span
+            class="nut-timedetail__item"
+          >
+            10:00-11:00
+          </span>
+          <span
+            class="nut-timedetail__item"
+          >
+            11:00-12:00
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="nutui-popup__close-icon nutui-popup__close-icon--top-right"
+    >
+      <i
+        class=" nutui-iconfont nut-icon nutui-icon nut-icon-close "
+        style="font-size: 12px; width: 12px; height: 12px;"
+      />
+    </div>
+  </div>
+</div>
+`;

src/packages/timeselect/__test__/timeselect.spec.tsx

+import * as React from 'react'
+
+import { render, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import ReactTestUtils from 'react-dom/test-utils'
+
+import { TimeSelect } from '../timeselect'
+
+const state = {
+  visible1: true,
+  height: '50%',
+  title: '取件时间 1',
+  currentKey: 0,
+  dates: [
+    {
+      'pannel-key': '0',
+      date: '5月20日(今天)',
+    },
+    {
+      'pannel-key': '1',
+      date: '5月21日(星期三)',
+    },
+  ],
+  times: [
+    {
+      key: '0',
+      list: ['9:00-10:00', '10:00-11:00', '11:00-12:00'],
+    },
+    {
+      key: '1',
+      list: ['9:00-10:00', '10:00-11:00'],
+    },
+  ],
+}
+test('timeselect props test', async () => {
+  const App = () => {
+    return (
+      <TimeSelect
+        visible={state.visible1}
+        height={state.height}
+        title={state.title}
+        multiple
+        currentKey={state.currentKey}
+        dates={state.dates}
+        times={state.times}
+      />
+    )
+  }
+  const { container } = render(<App />)
+
+  await waitFor(
+    () => {
+      const titleDoms = container.querySelectorAll('.nut-timeselect__title')
+      expect(titleDoms[0].innerHTML).toBe(state.title)
+      container.querySelectorAll('.nut-timepannel').forEach((item, index) => {
+        expect(item.innerHTML).toBe(state.dates[index].date)
+      })
+    },
+    { timeout: 2000 }
+  )
+
+  await waitFor(
+    () => {
+      expect(container.querySelector('.nut-timedetail')).toBeInTheDocument()
+      expect(container).toMatchSnapshot()
+    },
+    { timeout: 2000 }
+  )
+})
+
+test('timeselect event test', async () => {
+  const App = () => {
+    return (
+      <TimeSelect
+        visible={state.visible1}
+        height={state.height}
+        title={state.title}
+        multiple
+        currentKey={state.currentKey}
+        dates={state.dates}
+        times={state.times}
+      />
+    )
+  }
+  const { container } = render(<App />)
+  await waitFor(
+    () => {
+      container
+        .querySelectorAll('.nut-timedetail__item')
+        .forEach((item, index) => {
+          ReactTestUtils.Simulate.click(item)
+          expect(item).toHaveClass('nut-timedetail__item-active')
+        })
+    },
+    { timeout: 2000 }
+  )
+})

src/packages/timeselect/demo.tsx

 import React, { useState } from 'react'
 import { TimeSelect } from './timeselect'
+import { TimeType } from '../timedetail/timedetail'
 import { Cell } from '../cell/cell'
 import Toast from '../toast'
 import { useTranslate } from '../../sites/assets/locale'
@@ -57,16 +58,19 @@ const TimeSelectDemo = () => {
     SetVisible1(true)
   }
   // 点击弹层 X 或者弹层外区域触发事件
-  const handleSelect = (selectTimeData: any) => {
+  const handleSelect = (selectTimeData: TimeType[]) => {
     SetVisible1(false)
     Toast.text(`${translated.text1}: ${JSON.stringify(selectTimeData)}`)
   }
   // 选择日期触发回调事件
-  const handlePannelChange = (pannelKey: any, selectTimeData: any) => {
+  const handlePannelChange = (
+    pannelKey: string | number,
+    selectTimeData: TimeType[]
+  ) => {
     console.log('pannelKey, selectTimeData: ', pannelKey, selectTimeData)
   }
   // 选择配送时间触发回调事件
-  const handleTimeChange = (time: any, selectTimeData: any) => {
+  const handleTimeChange = (time: string, selectTimeData: TimeType[]) => {
     console.log('time, selectTimeData: ', time, selectTimeData)
   }
   return (