修改日历组件

src/components/Picker/PopupPicker.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import CommonPopup from '@/components/CommonPopup'
+import Picker from './Picker'
+import { renderYearMonth, renderHourMinute } from './PickerData'
+interface PickerOption {
+  text: string | number
+  value: string | number
+}
+
+interface PickerProps {
+  visible: boolean
+  setvisible: (visible: boolean) => void
+  options?: PickerOption[][]
+  value?: (string | number)[]
+  type?: 'month' | 'hour' |  null
+  onConfirm?: (options: PickerOption[], values: (string | number)[]) => void
+  onChange?: ( value: (string | number)[] ) => void
+}
+
+const PopupPicker = ({ 
+  visible, 
+  setvisible, 
+  value = [], 
+  onConfirm, 
+  onChange,
+  options = [],
+  type = null
+}: PickerProps) => {
+  
+  const [defaultValue, setDefaultValue] = useState<(string | number)[]>([])
+  const [defaultOptions, setDefaultOptions] = useState<PickerOption[][]>([])
+  const changePicker = (options: any[], values: any, columnIndex: number) => {
+    if (onChange) {
+        console.log('picker onChange', columnIndex, values, options)
+
+      setDefaultValue(values)
+    }
+  }
+
+  const handleConfirm = () => {
+    console.log(defaultValue,'defaultValue');
+    onChange(defaultValue)
+    setvisible(false)
+  }
+  
+  const dialogClose = () => {
+    setvisible(false)
+  }
+  useEffect(() => {
+    if (type === 'month') {
+      setDefaultOptions(renderYearMonth())
+    } else if (type === 'hour') {
+      setDefaultOptions(renderHourMinute())
+    } else {
+      setDefaultOptions(options)
+    }
+  }, [type])
+  
+//   useEffect(() => {
+//     if (value.length > 0 && defaultOptions.length > 0) {
+//         setDefaultValue([...value])
+//     }
+//   }, [value, defaultOptions])
+  return (
+    <>
+      <CommonPopup
+        visible={visible}
+        onClose={dialogClose}
+        showHeader={false}
+        title={null}
+        hideFooter={false}
+        cancelText='取消'
+        confirmText='完成'
+        onConfirm={handleConfirm}
+        position='bottom'
+        round
+        zIndex={1000}
+      >
+        <Picker
+          visible={visible}
+          options={defaultOptions}
+          defaultValue={value}
+          onChange={changePicker}
+        />
+      </CommonPopup>
+    </>
+  )
+}
+
+export default PopupPicker