Merge pull request #120 from Conflux-Chain/feature-datepicker

feat: update Datepicker, useClickAway and Skeleton
Conflux-Chain · Dec 1, 2020 · 33f8589 · 33f8589
2 parents 7708282 + c0ab71a
commit 33f8589
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 23 deletions.
diff --git a/components/date-picker/generate-picker/index.tsx b/components/date-picker/generate-picker/index.tsx
@@ -17,6 +17,7 @@ import PickerTag from '../picker-tag'
 import generateSinglePicker from './generate-single-picker'
 import generateRangePicker from './generate-range-picker'
 import { InputColors, InputVariantTypes, NormalSizes } from '../../utils/prop-types'
+import useDatePickerHandle from './../use-date-picker-handle'
 
 export const Components = { button: PickerButton, rangeItem: PickerTag }
 
@@ -143,6 +144,7 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
     RangePicker: React.FC<RangePickerProps<DateType>>
     TimePicker: typeof TimePicker
     QuarterPicker: typeof QuarterPicker
+    useDatePickerHandle: typeof useDatePickerHandle
   }
 
   const MergedDatePicker = DatePicker as MergedDatePicker
@@ -152,6 +154,7 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   MergedDatePicker.RangePicker = RangePicker as React.FC<RangePickerProps<DateType>>
   MergedDatePicker.TimePicker = TimePicker
   MergedDatePicker.QuarterPicker = QuarterPicker
+  MergedDatePicker.useDatePickerHandle = useDatePickerHandle
 
   return MergedDatePicker
 }

diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx
@@ -17,7 +17,10 @@ export type RangePickerProps = BaseRangePickerProps<Dayjs>
 //      It's acceptable now, but the experience is not excellent.
 //      Think about `<input type="date/time" />`
 
-export const DatePicker = generatePicker<Dayjs>(generateConfig)
+const DatePicker = generatePicker<Dayjs>(generateConfig)
+DatePicker.useDatePickerHandle = useDatePickerHandle
+
+export { DatePicker }
 
 export default DatePicker
 

diff --git a/components/skeleton/__tests__/__snapshots__/index.test.tsx.snap b/components/skeleton/__tests__/__snapshots__/index.test.tsx.snap
@@ -30,6 +30,9 @@ exports[`Skeleton should render all variant correctly 1`] = `
             height: 1.5714rem;
             transform-style: preserve-3d;
           }
+          .skeleton::after {
+            border-left: 1px solid #EFF2FA;
+          }
           .skeleton.text {
             margin-top: 0;
             margin-bottom: 0;
@@ -102,6 +105,9 @@ exports[`Skeleton should render all variant correctly 2`] = `
             height: 1.5714rem;
             transform-style: preserve-3d;
           }
+          .skeleton::after {
+            border-left: 1px solid #EFF2FA;
+          }
           .skeleton.text {
             margin-top: 0;
             margin-bottom: 0;
@@ -174,6 +180,9 @@ exports[`Skeleton should render correctly 1`] = `
             height: 1.5714rem;
             transform-style: preserve-3d;
           }
+          .skeleton::after {
+            border-left: 1px solid #EFF2FA;
+          }
           .skeleton.text {
             margin-top: 0;
             margin-bottom: 0;
@@ -246,6 +255,9 @@ exports[`Skeleton should render correctly width custom with and height 1`] = `
             height: 1.5714rem;
             transform-style: preserve-3d;
           }
+          .skeleton::after {
+            border-left: 1px solid #EFF2FA;
+          }
           .skeleton.text {
             margin-top: 0;
             margin-bottom: 0;
@@ -318,6 +330,9 @@ exports[`Skeleton should render correctly width custom with and height 2`] = `
             height: 1.5714rem;
             transform-style: preserve-3d;
           }
+          .skeleton::after {
+            border-left: 1px solid #EFF2FA;
+          }
           .skeleton.text {
             margin-top: 0;
             margin-bottom: 0;
@@ -390,6 +405,9 @@ exports[`Skeleton should render correctly width custom with and height 3`] = `
             height: 1.5714rem;
             transform-style: preserve-3d;
           }
+          .skeleton::after {
+            border-left: 1px solid #EFF2FA;
+          }
           .skeleton.text {
             margin-top: 0;
             margin-bottom: 0;
@@ -548,6 +566,9 @@ exports[`Skeleton should render correctly with children 1`] = `
             height: 1.5714rem;
             transform-style: preserve-3d;
           }
+          .skeleton::after {
+            border-left: 1px solid #EFF2FA;
+          }
           .skeleton.text {
             margin-top: 0;
             margin-bottom: 0;

diff --git a/components/skeleton/skeleton.tsx b/components/skeleton/skeleton.tsx
@@ -88,6 +88,9 @@ export const Skeleton: React.FC<SkeletonProps> = ({
             height: 1.5714rem;
             transform-style: preserve-3d;
           }
+          .skeleton::after {
+            border-left: 1px solid #EFF2FA;
+          }
           .skeleton.text {
             margin-top: 0;
             margin-bottom: 0;

diff --git a/components/use-click-away/use-click-away.ts b/components/use-click-away/use-click-away.ts
@@ -1,19 +1,28 @@
 import { MutableRefObject, useEffect } from 'react'
 
-const useClickAway = (
-  ref: MutableRefObject<HTMLElement | null>,
-  handler: (event: Event) => void,
-) => {
+type RefObject = MutableRefObject<HTMLElement | null>
+
+const useClickAway = (refs: RefObject | Array<RefObject>, handler: (event: Event) => void) => {
   useEffect(() => {
     const callback = (event: Event) => {
-      const el = ref.current
-      if (!event || !el || el.contains((event as any).target)) return
-      handler(event)
+      let refsArray = Array.isArray(refs) ? refs : [refs]
+      let isAway = true
+      while (refsArray.length) {
+        const el = refsArray[0].current
+        if (!event || !el || el.contains((event as any).target)) {
+          isAway = false
+          refsArray = []
+        }
+        refsArray.shift()
+      }
+      if (isAway) {
+        handler(event)
+      }
     }
 
     document.addEventListener('click', callback)
     return () => document.removeEventListener('click', callback)
-  }, [ref, handler])
+  }, [refs, handler])
 }
 
 export default useClickAway
diff --git a/pages/en-us/components/date-picker.mdx b/pages/en-us/components/date-picker.mdx
@@ -2,7 +2,6 @@ import dayjs from 'dayjs'
 import { useState } from 'react'
 import { Layout, Playground, Attributes } from 'lib/components'
 import { Link, Text, Code, Spacer, DatePicker, Divider, Button } from 'components'
-import { useDatePickerHandle } from 'components/date-picker'
 import NextLink from 'next/link'
 
 export const meta = {
@@ -685,12 +684,12 @@ Select or input a date or time.
 <Playground
   title="With `UseDatePickerHandle`"
   desc="Use `hooks` to capture changes."
-  scope={{ DatePicker, Spacer, Button, dayjs, Divider, useDatePickerHandle }}
+  scope={{ DatePicker, Spacer, Button, dayjs, Divider }}
   code={`
 () => {
   const { RangePicker } = DatePicker
-  const { ref, setValue, getValue, focus, blur } = useDatePickerHandle()
-  const { ref: ref2, setValue: setValue2, getValue: getValue2, focus: focus2, blur: blur2 } = useDatePickerHandle()
+  const { ref, setValue, getValue, focus, blur } = DatePicker.useDatePickerHandle()
+  const { ref: ref2, setValue: setValue2, getValue: getValue2, focus: focus2, blur: blur2 } = DatePicker.useDatePickerHandle()
   const setChange = () => {
     console.log(ref)
     setValue(dayjs())

diff --git a/pages/zh-cn/components/date-picker.mdx b/pages/zh-cn/components/date-picker.mdx
@@ -2,7 +2,6 @@ import dayjs from 'dayjs'
 import { useState } from 'react'
 import { Layout, Playground, Attributes } from 'lib/components'
 import { Link, Text, Code, Spacer, DatePicker, Divider, Button } from 'components'
-import { useDatePickerHandle } from 'components/date-picker'
 import NextLink from 'next/link'
 
 export const meta = {
@@ -703,12 +702,12 @@ export const meta = {
 <Playground
   title="使用 `UseDatePickerHandle`"
   desc="使用 `hooks` 捕获日期选择框的变化。"
-  scope={{ DatePicker, Spacer, Button, dayjs, Divider, useDatePickerHandle }}
+  scope={{ DatePicker, Spacer, Button, dayjs, Divider }}
   code={`
 () => {
   const { RangePicker } = DatePicker
-  const { ref, setValue, getValue, focus, blur } = useDatePickerHandle()
-  const { ref: ref2, setValue: setValue2, getValue: getValue2, focus: focus2, blur: blur2 } = useDatePickerHandle()
+  const { ref, setValue, getValue, focus, blur } = DatePicker.useDatePickerHandle()
+  const { ref: ref2, setValue: setValue2, getValue: getValue2, focus: focus2, blur: blur2 } = DatePicker.useDatePickerHandle()
   const setChange = () => {
     console.log(ref)
     setValue(dayjs())
@@ -892,12 +891,12 @@ export const meta = {
 
 <Attributes.Title>共同的方法</Attributes.Title>
 
-| 名称           | 描述     | 参数                 | 返回值               |
-| -------------- | -------- | -------------------- | -------------------- |
-| **blur()**     | 移除焦点 | -                    | -                    |
-| **focus()**    | 获取焦点 | -                    | -                    |
-| **setValue()** | 设置值   | `dayjs` \| `dayjs[]` \| `null` | -                    |
-| **getValue()** | 获取值   | -                    | `dayjs` \| `dayjs[]` \| `null` |
+| 名称           | 描述     | 参数                           | 返回值                         |
+| -------------- | -------- | ------------------------------ | ------------------------------ |
+| **blur()**     | 移除焦点 | -                              | -                              |
+| **focus()**    | 获取焦点 | -                              | -                              |
+| **setValue()** | 设置值   | `dayjs` \| `dayjs[]` \| `null` | -                              |
+| **getValue()** | 获取值   | -                              | `dayjs` \| `dayjs[]` \| `null` |
 
 <Attributes.Title>useDatePickerHandle</Attributes.Title>