49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import { TimePicker } from 'antd';
|
|
import { DownOutlined } from '@ant-design/icons';
|
|
|
|
export const CustomTimePicker = (props: any) => {
|
|
const { label, value, ...other } = props;
|
|
const [isActiveLabel, setIsActiveLabel] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
if (label) {
|
|
setIsActiveLabel(!!value);
|
|
} else {
|
|
setIsActiveLabel(false);
|
|
}
|
|
}, [value]);
|
|
|
|
const onOpenChange = (open: boolean) => {
|
|
if (open) {
|
|
if (!isActiveLabel) setIsActiveLabel(true)
|
|
} else {
|
|
setIsActiveLabel(!!value)
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`b-timepicker-wrap ${isActiveLabel ? 'b-timepicker__active' : ''}`}>
|
|
<div className="b-timepicker-label">
|
|
<span>{label}</span>
|
|
</div>
|
|
<TimePicker
|
|
className="b-timepicker"
|
|
format="HH:mm"
|
|
minuteStep={15}
|
|
value={value}
|
|
showNow={false}
|
|
onOpenChange={onOpenChange}
|
|
needConfirm={false}
|
|
placeholder=""
|
|
variant="filled"
|
|
allowClear={false}
|
|
suffixIcon={<DownOutlined style={{ color: '#2c7873', fontSize: 12 }} />}
|
|
{...other}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|