141 lines
4.0 KiB
TypeScript
141 lines
4.0 KiB
TypeScript
import React, { useState, useEffect, useCallback } from "react";
|
||
import CommonPopup from "@/components/CommonPopup";
|
||
import { View, Text, Image } from "@tarojs/components";
|
||
import Picker from "./Picker";
|
||
import {
|
||
renderYearMonth,
|
||
renderYearMonthDay,
|
||
renderHourMinute,
|
||
} from "./PickerData";
|
||
import imgs from "@/config/images";
|
||
import styles from "./index.module.scss";
|
||
interface PickerOption {
|
||
text: string | number;
|
||
value: string | number;
|
||
}
|
||
|
||
interface PickerProps {
|
||
visible: boolean;
|
||
setvisible: (visible: boolean) => void;
|
||
options?: PickerOption[][];
|
||
value?: (string | number)[];
|
||
type?: "month" | "day" | "hour" | "ntrp" | null;
|
||
img?: string;
|
||
onConfirm?: (options: PickerOption[], values: (string | number)[]) => void;
|
||
onChange?: (value: (string | number)[]) => void;
|
||
}
|
||
|
||
const PopupPicker = ({
|
||
visible,
|
||
setvisible,
|
||
value = [],
|
||
img,
|
||
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);
|
||
|
||
if (
|
||
type === "day" &&
|
||
JSON.stringify(defaultValue) !== JSON.stringify(values)
|
||
) {
|
||
const [year, month] = values;
|
||
const daysInMonth = new Date(Number(year), Number(month), 0).getDate();
|
||
const dayOptions = Array.from({ length: daysInMonth }, (_, i) => ({
|
||
text: i + 1 + "日",
|
||
value: i + 1,
|
||
}));
|
||
const newOptions = [...defaultOptions];
|
||
if (JSON.stringify(newOptions[2]) !== JSON.stringify(dayOptions)) {
|
||
newOptions[2] = dayOptions;
|
||
setDefaultOptions(newOptions);
|
||
}
|
||
}
|
||
|
||
if (JSON.stringify(defaultValue) !== JSON.stringify(values)) {
|
||
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 === "day") {
|
||
setDefaultOptions(renderYearMonthDay());
|
||
} 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}
|
||
>
|
||
{type === "ntrp" && (
|
||
<View className={`${styles["examination-btn"]}}`}>
|
||
<View className={`${styles["text-container"]}}`}>
|
||
<View className={`${styles["text-title"]}}`}>
|
||
不知道自己的<Text>（NTRP）</Text>水平
|
||
</View>
|
||
<View className={`${styles["text-btn"]}}`}>
|
||
<Text>快速测试</Text>
|
||
<Image src={imgs.ICON_ARROW_GREEN} className={`${styles["icon-arrow"]}`}></Image>
|
||
</View>
|
||
</View>
|
||
<View className={`${styles["img-container"]}}`}>
|
||
<View className={`${styles["img-box"]}`}>
|
||
<Image src={img!}></Image>
|
||
</View>
|
||
<View className={`${styles["img-box"]}`}>
|
||
<Image src={imgs.ICON_EXAMINATION}></Image>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)}
|
||
<Picker
|
||
visible={visible}
|
||
options={defaultOptions}
|
||
defaultValue={value}
|
||
onChange={changePicker}
|
||
/>
|
||
</CommonPopup>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default PopupPicker;
|