feat: export useDatePickerHandle

Conflux-Chain · Dec 1, 2020 · 727b823 · 727b823
1 parent 7708282
commit 727b823
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 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/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>