feat: add date, time, and range picker components to UI library with a showcase
This commit is contained in:
Firman Ramdhani
@@ -0,0 +1,176 @@
|
||||
import React from 'react';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
TimePicker,
|
||||
DatePicker,
|
||||
WeekPicker,
|
||||
MonthPicker,
|
||||
QuarterPicker,
|
||||
YearPicker,
|
||||
TimeRangePicker,
|
||||
DateRangePicker,
|
||||
WeekRangePicker,
|
||||
MonthRangePicker,
|
||||
QuarterRangePicker,
|
||||
YearRangePicker,
|
||||
InputStatusType
|
||||
} from '@repo/ui'; // Sesuaikan path
|
||||
|
||||
// --- UI Helper Components ---
|
||||
const Section = ({ title, description, children }: { title: string; description?: string; children: React.ReactNode }) => (
|
||||
<section className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
|
||||
<div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
|
||||
<h2 className="text-lg font-bold text-gray-800">{title}</h2>
|
||||
{description && <p className="text-sm text-gray-500 mt-1">{description}</p>}
|
||||
</div>
|
||||
<div className="p-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
const Card = ({ label, code, children }: { label: string; code?: string; children: React.ReactNode }) => (
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex justify-between items-baseline">
|
||||
<label className="text-sm font-semibold text-gray-700">{label}</label>
|
||||
{code && <span className="text-xs font-mono text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">{code}</span>}
|
||||
</div>
|
||||
<div className="w-full">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default function PickerShowcase({status}: {status: InputStatusType}) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-10 px-4 sm:px-6 lg:px-8 font-sans">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-10 text-center">
|
||||
<h1 className="text-3xl font-extrabold text-gray-900 tracking-tight">
|
||||
Component Picker Showcase
|
||||
</h1>
|
||||
<p className="mt-2 text-lg text-gray-600">
|
||||
Fully typed, Tailwind-styled, and robust date manipulation components.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 1. Single Pickers */}
|
||||
<Section title="Single Pickers" description="Komponen untuk memilih satu nilai waktu spesifik.">
|
||||
<Card label="Time Picker" code="<TimePicker />">
|
||||
<TimePicker placeholder="Select time..." className="w-full" />
|
||||
</Card>
|
||||
|
||||
<Card label="Date Picker" code="<DatePicker />">
|
||||
<DatePicker placeholder="Select date..." className="w-full" />
|
||||
</Card>
|
||||
|
||||
<Card label="Week Picker" code="<WeekPicker />">
|
||||
<WeekPicker placeholder="Select week..." className="w-full" />
|
||||
</Card>
|
||||
|
||||
<Card label="Month Picker" code="<MonthPicker />">
|
||||
<MonthPicker placeholder="Select month..." className="w-full" />
|
||||
</Card>
|
||||
|
||||
<Card label="Quarter Picker" code="<QuarterPicker />">
|
||||
<QuarterPicker placeholder="Select quarter..." className="w-full" />
|
||||
</Card>
|
||||
|
||||
<Card label="Year Picker" code="<YearPicker />">
|
||||
<YearPicker placeholder="Select year..." className="w-full" />
|
||||
</Card>
|
||||
|
||||
|
||||
</Section>
|
||||
|
||||
{/* 2. Range Pickers */}
|
||||
<Section title="Range Pickers" description="Komponen untuk memilih rentang waktu (Start - End).">
|
||||
<Card label="Time Range" code="<TimeRangePicker />">
|
||||
<TimeRangePicker className="w-full" />
|
||||
</Card>
|
||||
|
||||
<Card label="Date Range" code="<DateRangePicker />">
|
||||
<DateRangePicker className="w-full" />
|
||||
</Card>
|
||||
|
||||
<Card label="Week Range" code="<WeekRangePicker />">
|
||||
<WeekRangePicker className="w-full" />
|
||||
</Card>
|
||||
|
||||
<Card label="Month Range" code="<MonthRangePicker />">
|
||||
<MonthRangePicker className="w-full" />
|
||||
</Card>
|
||||
|
||||
<Card label="Quarter Range" code="<QuarterRangePicker />">
|
||||
<QuarterRangePicker className="w-full" />
|
||||
</Card>
|
||||
|
||||
<Card label="Year Range" code="<YearRangePicker />">
|
||||
<YearRangePicker className="w-full" />
|
||||
</Card>
|
||||
|
||||
|
||||
</Section>
|
||||
|
||||
{/* 3. Validation States */}
|
||||
<Section title="Validation & States" description="Visualisasi state error, warning, dan disabled.">
|
||||
<Card label="Error State" code={`status="${status}"`} >
|
||||
<DatePicker status={status} placeholder="Field is required" />
|
||||
<span className="text-xs text-red-500 mt-1 block">This field is required.</span>
|
||||
</Card>
|
||||
|
||||
<Card label="Warning State" code={`status="${status}"`} >
|
||||
<DatePicker status={status} placeholder="Check compatibility" defaultValue={dayjs()} />
|
||||
<span className="text-xs text-yellow-600 mt-1 block">Warning: Date is in the past.</span>
|
||||
</Card>
|
||||
|
||||
<Card label="Success State" code={`status="${status}"`} >
|
||||
<DatePicker status={status} defaultValue={dayjs()} />
|
||||
</Card>
|
||||
|
||||
<Card label="Disabled State" code="disabled">
|
||||
<div className="space-y-3">
|
||||
<DatePicker disabled placeholder="Cannot select" />
|
||||
<DateRangePicker disabled />
|
||||
</div>
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
{/* 4. Advanced & Customization */}
|
||||
<Section title="Advanced Features" description="Fitur lanjutan seperti format, waktu, dan presets.">
|
||||
<Card label="Date & Time" code="showTime">
|
||||
<DatePicker
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
placeholder="Select date & time"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card label="Custom Format" code='format="DD/MM/YYYY"'>
|
||||
<DatePicker
|
||||
format="DD/MM/YYYY"
|
||||
placeholder="31/12/2025"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card label="Range with Presets" code="presets={[...]}">
|
||||
<DateRangePicker
|
||||
presets={[
|
||||
{ label: 'Today', value: [dayjs(), dayjs()] },
|
||||
{ label: 'Next 7 Days', value: [dayjs(), dayjs().add(7, 'd')] },
|
||||
{ label: 'This Month', value: [dayjs().startOf('month'), dayjs().endOf('month')] },
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card label="Read Only Input" code="inputReadOnly">
|
||||
<DatePicker inputReadOnly placeholder="Click to open (No typing)" />
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -9,3 +9,4 @@ export * from './input/input-number.component';
|
||||
export * from './textarea/textarea.component';
|
||||
export * from './checkbox/checkbox.component';
|
||||
export * from './switch/switch.component';
|
||||
export * from "./picker";
|
||||
@@ -0,0 +1,179 @@
|
||||
import { forwardRef } from 'react';
|
||||
import RcPicker, { PickerPanel as RcPickerPanel, RangePicker as RcRangePicker } from '@rc-component/picker';
|
||||
import type { GenerateConfig } from '@rc-component/picker/lib/generate';
|
||||
import enUS from '@rc-component/picker/lib/locale/en_US';
|
||||
import {
|
||||
PickerProps,
|
||||
RangePickerProps,
|
||||
PickerPanelProps,
|
||||
InputStatusType,
|
||||
VALID_INPUT_STATUSES,
|
||||
SpecificPickerProps,
|
||||
SpecificRangePickerProps,
|
||||
} from '../types';
|
||||
|
||||
const COMPONENT_PREFIX = 'rc-picker';
|
||||
|
||||
interface PickerGenerateReturns<DateType extends object> {
|
||||
Picker: React.ForwardRefExoticComponent<PickerProps<DateType> & React.RefAttributes<any>>;
|
||||
RangePicker: React.ForwardRefExoticComponent<RangePickerProps<DateType> & React.RefAttributes<any>>;
|
||||
Calendar: React.ForwardRefExoticComponent<PickerPanelProps<DateType> & React.RefAttributes<any>>;
|
||||
|
||||
DatePicker: React.ForwardRefExoticComponent<SpecificPickerProps<DateType> & React.RefAttributes<any>>;
|
||||
WeekPicker: React.ForwardRefExoticComponent<SpecificPickerProps<DateType> & React.RefAttributes<any>>;
|
||||
MonthPicker: React.ForwardRefExoticComponent<SpecificPickerProps<DateType> & React.RefAttributes<any>>;
|
||||
QuarterPicker: React.ForwardRefExoticComponent<SpecificPickerProps<DateType> & React.RefAttributes<any>>;
|
||||
YearPicker: React.ForwardRefExoticComponent<SpecificPickerProps<DateType> & React.RefAttributes<any>>;
|
||||
TimePicker: React.ForwardRefExoticComponent<SpecificPickerProps<DateType> & React.RefAttributes<any>>;
|
||||
|
||||
DateRangePicker: React.ForwardRefExoticComponent<SpecificRangePickerProps<DateType> & React.RefAttributes<any>>;
|
||||
WeekRangePicker: React.ForwardRefExoticComponent<SpecificRangePickerProps<DateType> & React.RefAttributes<any>>;
|
||||
MonthRangePicker: React.ForwardRefExoticComponent<SpecificRangePickerProps<DateType> & React.RefAttributes<any>>;
|
||||
QuarterRangePicker: React.ForwardRefExoticComponent<SpecificRangePickerProps<DateType> & React.RefAttributes<any>>;
|
||||
YearRangePicker: React.ForwardRefExoticComponent<SpecificRangePickerProps<DateType> & React.RefAttributes<any>>;
|
||||
TimeRangePicker: React.ForwardRefExoticComponent<SpecificRangePickerProps<DateType> & React.RefAttributes<any>>;
|
||||
}
|
||||
|
||||
const getStatusClassName = (prefixCls: string, className?: string, status?: InputStatusType, disabled?: boolean) => {
|
||||
const currentStatus = status && VALID_INPUT_STATUSES.includes(status) ? status : '';
|
||||
return [
|
||||
className,
|
||||
prefixCls,
|
||||
currentStatus ? `picker-status-${currentStatus}` : '',
|
||||
disabled ? `${prefixCls}-disabled` : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
};
|
||||
|
||||
export function generateComponentPicker<DateType extends object>(
|
||||
generateConfig: GenerateConfig<DateType>,
|
||||
): PickerGenerateReturns<DateType> {
|
||||
// 1. Generic Picker
|
||||
const Picker = forwardRef<any, PickerProps<DateType>>((props, ref) => {
|
||||
const { status, className, locale, prefixCls = COMPONENT_PREFIX, ...restProps } = props;
|
||||
return (
|
||||
<RcPicker<DateType>
|
||||
ref={ref}
|
||||
prefixCls={prefixCls}
|
||||
generateConfig={generateConfig}
|
||||
locale={locale || enUS}
|
||||
className={getStatusClassName(prefixCls, className, status, props.disabled)}
|
||||
{...restProps}
|
||||
/>
|
||||
);
|
||||
});
|
||||
Picker.displayName = 'Picker';
|
||||
|
||||
// 2. Generic Range Picker
|
||||
const RangePicker = forwardRef<any, RangePickerProps<DateType>>((props, ref) => {
|
||||
const { status, className, locale, prefixCls = COMPONENT_PREFIX, ...restProps } = props;
|
||||
return (
|
||||
<RcRangePicker<DateType>
|
||||
ref={ref}
|
||||
prefixCls={prefixCls}
|
||||
generateConfig={generateConfig}
|
||||
locale={locale || enUS}
|
||||
className={getStatusClassName(prefixCls, className, status, props.disabled as boolean)}
|
||||
{...restProps}
|
||||
/>
|
||||
);
|
||||
});
|
||||
RangePicker.displayName = 'RangePicker';
|
||||
|
||||
// 3. Calendar
|
||||
const Calendar = forwardRef<any, PickerPanelProps<DateType>>((props, ref) => {
|
||||
const { locale, prefixCls = COMPONENT_PREFIX, ...restProps } = props;
|
||||
return (
|
||||
<RcPickerPanel<DateType>
|
||||
ref={ref}
|
||||
prefixCls={prefixCls}
|
||||
generateConfig={generateConfig}
|
||||
locale={locale || enUS}
|
||||
{...restProps}
|
||||
/>
|
||||
);
|
||||
});
|
||||
Calendar.displayName = 'Calendar';
|
||||
|
||||
// ================== Specific Pickers ==================
|
||||
const DatePicker = forwardRef<any, SpecificPickerProps<DateType>>((props, ref) => (
|
||||
<Picker ref={ref} placeholder="Select date" {...props} picker="date" />
|
||||
));
|
||||
DatePicker.displayName = 'DatePicker';
|
||||
|
||||
const TimePicker = forwardRef<any, SpecificPickerProps<DateType>>((props, ref) => (
|
||||
<Picker ref={ref} mode={undefined} placeholder="Select time" {...props} picker="time" />
|
||||
));
|
||||
TimePicker.displayName = 'TimePicker';
|
||||
|
||||
const WeekPicker = forwardRef<any, SpecificPickerProps<DateType>>((props, ref) => (
|
||||
<Picker ref={ref} mode={undefined} placeholder="Select week" {...props} picker="week" />
|
||||
));
|
||||
WeekPicker.displayName = 'WeekPicker';
|
||||
|
||||
const MonthPicker = forwardRef<any, SpecificPickerProps<DateType>>((props, ref) => (
|
||||
<Picker ref={ref} mode={undefined} placeholder="Select moth" {...props} picker="month" />
|
||||
));
|
||||
MonthPicker.displayName = 'MonthPicker';
|
||||
|
||||
const QuarterPicker = forwardRef<any, SpecificPickerProps<DateType>>((props, ref) => (
|
||||
<Picker ref={ref} mode={undefined} placeholder="Select quarter" {...props} picker="quarter" />
|
||||
));
|
||||
QuarterPicker.displayName = 'QuarterPicker';
|
||||
|
||||
const YearPicker = forwardRef<any, SpecificPickerProps<DateType>>((props, ref) => (
|
||||
<Picker ref={ref} mode={undefined} placeholder="Select year" {...props} picker="year" />
|
||||
));
|
||||
YearPicker.displayName = 'YearPicker';
|
||||
|
||||
// ================== Specific Range Pickers ==================
|
||||
|
||||
const DateRangePicker = forwardRef<any, SpecificRangePickerProps<DateType>>((props, ref) => (
|
||||
<RangePicker ref={ref} placeholder={['Start date', 'End date']} {...props} picker="date" />
|
||||
));
|
||||
DateRangePicker.displayName = 'DateRangePicker';
|
||||
|
||||
const TimeRangePicker = forwardRef<any, SpecificRangePickerProps<DateType>>((props, ref) => (
|
||||
<RangePicker ref={ref} mode={undefined} placeholder={['Start time', 'End time']} {...props} picker="time" />
|
||||
));
|
||||
TimeRangePicker.displayName = 'TimeRangePicker';
|
||||
|
||||
const WeekRangePicker = forwardRef<any, SpecificRangePickerProps<DateType>>((props, ref) => (
|
||||
<RangePicker ref={ref} mode={undefined} placeholder={['Start week', 'End week']} {...props} picker="week" />
|
||||
));
|
||||
WeekRangePicker.displayName = 'WeekRangePicker';
|
||||
|
||||
const MonthRangePicker = forwardRef<any, SpecificRangePickerProps<DateType>>((props, ref) => (
|
||||
<RangePicker ref={ref} mode={undefined} placeholder={['Start month', 'End month']} {...props} picker="month" />
|
||||
));
|
||||
MonthRangePicker.displayName = 'MonthRangePicker';
|
||||
|
||||
const QuarterRangePicker = forwardRef<any, SpecificRangePickerProps<DateType>>((props, ref) => (
|
||||
<RangePicker ref={ref} mode={undefined} placeholder={['Start quarter', 'End quarter']} {...props} picker="quarter" />
|
||||
));
|
||||
QuarterRangePicker.displayName = 'QuarterRangePicker';
|
||||
|
||||
const YearRangePicker = forwardRef<any, SpecificRangePickerProps<DateType>>((props, ref) => (
|
||||
<RangePicker ref={ref} mode={undefined} placeholder={['Start year', 'End year']} {...props} picker="year" />
|
||||
));
|
||||
YearRangePicker.displayName = 'YearRangePicker';
|
||||
|
||||
return {
|
||||
Picker,
|
||||
RangePicker,
|
||||
Calendar,
|
||||
DatePicker,
|
||||
WeekPicker,
|
||||
MonthPicker,
|
||||
QuarterPicker,
|
||||
YearPicker,
|
||||
TimePicker,
|
||||
DateRangePicker,
|
||||
WeekRangePicker,
|
||||
MonthRangePicker,
|
||||
QuarterRangePicker,
|
||||
YearRangePicker,
|
||||
TimeRangePicker,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Dayjs } from 'dayjs';
|
||||
import dayjsGenerateConfig from '@rc-component/picker/es/generate/dayjs';
|
||||
import { generateComponentPicker } from './generate-picker.component';
|
||||
|
||||
export const {
|
||||
// Base
|
||||
Picker,
|
||||
RangePicker,
|
||||
Calendar,
|
||||
// Pickers
|
||||
DatePicker,
|
||||
WeekPicker,
|
||||
MonthPicker,
|
||||
QuarterPicker,
|
||||
YearPicker,
|
||||
TimePicker,
|
||||
// Range Pickers
|
||||
DateRangePicker,
|
||||
WeekRangePicker,
|
||||
MonthRangePicker,
|
||||
QuarterRangePicker,
|
||||
YearRangePicker,
|
||||
TimeRangePicker,
|
||||
} = generateComponentPicker<Dayjs>(dayjsGenerateConfig);
|
||||
@@ -4,3 +4,4 @@
|
||||
@import './textarea.style.css';
|
||||
@import './checkbox.style.css';
|
||||
@import './switch.style.css';
|
||||
@import './picker.style.css';
|
||||
|
||||
@@ -0,0 +1,636 @@
|
||||
@layer components {
|
||||
/* =========================================
|
||||
PICKER BASE (INPUT WRAPPER)
|
||||
========================================= */
|
||||
.rc-picker {
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
/* Using variable dimensions from globals.css */
|
||||
height: var(--input-height);
|
||||
padding: 0 var(--input-padding-x);
|
||||
|
||||
font-size: var(--input-font-size);
|
||||
line-height: 1.5;
|
||||
color: var(--input-text);
|
||||
|
||||
background-color: var(--input-bg);
|
||||
border: 1px solid transparent;
|
||||
border-color: var(--input-border);
|
||||
border-radius: var(--input-radius);
|
||||
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Input inside Picker */
|
||||
.rc-picker-input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.rc-picker-input > input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rc-picker-input > input::placeholder {
|
||||
color: var(--input-placeholder);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Suffix Icon (Calendar Icon) */
|
||||
.rc-picker-suffix {
|
||||
margin-left: 0.5rem;
|
||||
color: var(--color-gray-400);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
font-size: var(--text-lg);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
/* Clear Icon */
|
||||
.rc-picker-clear {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: var(--input-padding-x);
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s, color 0.2s;
|
||||
background: var(--input-bg);
|
||||
color: var(--color-gray-400);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.rc-picker:hover:not(.rc-picker-disabled) .rc-picker-clear {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.rc-picker-clear:hover {
|
||||
color: var(--color-gray-500);
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
.rc-picker-clear-btn::after {
|
||||
content: "×";
|
||||
font-size: 1.2em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
STATES (HOVER, FOCUS, DISABLED, ERROR)
|
||||
========================================= */
|
||||
|
||||
/* Hover State */
|
||||
.rc-picker:hover:not(.rc-picker-disabled) {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
|
||||
/* Focused State */
|
||||
.rc-picker-focused {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Disabled State */
|
||||
.rc-picker-disabled {
|
||||
background-color: var(--disabled-bg);
|
||||
color: var(--disabled-text);
|
||||
border-color: var(--disabled-border);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rc-picker-disabled input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Range Picker Specific */
|
||||
.rc-picker-range.rc-picker-focused .rc-picker-active-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.rc-picker-range-separator {
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
line-height: 1;
|
||||
color: var(--color-gray-400);
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.rc-picker-active-bar {
|
||||
bottom: -1px;
|
||||
height: 2px;
|
||||
margin-left: var(--input-padding-x); /* Align with input start */
|
||||
background: var(--color-brand-500);
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease-out;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
PICKER DROPDOWN PANEL (THE MEAT)
|
||||
========================================= */
|
||||
.rc-picker-dropdown {
|
||||
position: absolute;
|
||||
z-index: 1050;
|
||||
box-sizing: border-box;
|
||||
font-size: var(--text-sm);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.rc-picker-dropdown-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Arrow styling removed for modern clean look (AntD v5/v6 typically removes large arrows) */
|
||||
.rc-picker-dropdown .rc-picker-range-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Panel Container */
|
||||
.rc-picker-panel-container {
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
background: #fff;
|
||||
border-radius: var(--radius-lg);
|
||||
/* Elevation 3/4 equivalent */
|
||||
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
transition: margin 0.3s;
|
||||
border: 1px solid var(--color-gray-100);
|
||||
}
|
||||
|
||||
.rc-picker-panel-layout {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.rc-picker-panel {
|
||||
vertical-align: top;
|
||||
background: transparent;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Double Panel (Range Picker) */
|
||||
.rc-picker-panel + .rc-picker-panel {
|
||||
border-left: 1px solid var(--color-gray-100);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
HEADER SECTION
|
||||
========================================= */
|
||||
.rc-picker-header {
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
border-bottom: 1px solid var(--color-gray-100);
|
||||
min-height: 40px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.rc-picker-header > * {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.rc-picker-header-view {
|
||||
flex: auto;
|
||||
text-align: center;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.rc-picker-header-view button {
|
||||
color: var(--color-gray-800);
|
||||
font-weight: inheriting;
|
||||
padding: 0 4px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: var(--text-sm);
|
||||
line-height: 40px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.rc-picker-header-view button:hover {
|
||||
color: var(--color-brand-500);
|
||||
}
|
||||
|
||||
/* Navigation Buttons (< << >> >) */
|
||||
.rc-picker-header-super-prev-btn,
|
||||
.rc-picker-header-prev-btn,
|
||||
.rc-picker-header-next-btn,
|
||||
.rc-picker-header-super-next-btn {
|
||||
min-width: 1.6em;
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-400);
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
line-height: 40px;
|
||||
padding: 0 5px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: color 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rc-picker-header-super-prev-btn:hover,
|
||||
.rc-picker-header-prev-btn:hover,
|
||||
.rc-picker-header-next-btn:hover,
|
||||
.rc-picker-header-super-next-btn:hover {
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
|
||||
/* Arrow Symbols using pseudo elements if needed, or rely on RC Picker default text symbols but styled */
|
||||
/* RC Picker default uses unicode arrows usually. */
|
||||
|
||||
/* =========================================
|
||||
BODY SECTION (CALENDAR GRID)
|
||||
========================================= */
|
||||
.rc-picker-body {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.rc-picker-content {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.rc-picker-content th,
|
||||
.rc-picker-content td {
|
||||
position: relative;
|
||||
min-width: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.rc-picker-content th {
|
||||
height: 32px;
|
||||
color: var(--color-gray-500);
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rc-picker-cell {
|
||||
padding: 4px 0;
|
||||
color: var(--color-gray-400);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rc-picker-cell-in-view {
|
||||
color: var(--color-gray-800);
|
||||
}
|
||||
|
||||
.rc-picker-cell-disabled {
|
||||
cursor: not-allowed;
|
||||
color: var(--disabled-text);
|
||||
}
|
||||
.rc-picker-cell-disabled .rc-picker-cell-inner {
|
||||
background: var(--disabled-bg);
|
||||
}
|
||||
|
||||
/* Inner Cell (The Circle/Square) */
|
||||
.rc-picker-cell-inner {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: var(--radius-md); /* Ant Design v5 uses slightly rounded squares, not full circles usually, but we can do md radius */
|
||||
transition: background 0.2s, border 0.2s, color 0.2s;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 0 4px; /* For longer text like months */
|
||||
}
|
||||
|
||||
/* Month/Year Panel cells are wider */
|
||||
.rc-picker-month-panel .rc-picker-cell-inner,
|
||||
.rc-picker-year-panel .rc-picker-cell-inner,
|
||||
.rc-picker-quarter-panel .rc-picker-cell-inner,
|
||||
.rc-picker-decade-panel .rc-picker-cell-inner {
|
||||
width: auto;
|
||||
padding: 0 12px;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
/* Hover State */
|
||||
.rc-picker-cell:hover:not(.rc-picker-cell-selected):not(.rc-picker-cell-range-start):not(.rc-picker-cell-range-end):not(.rc-picker-cell-disabled) .rc-picker-cell-inner {
|
||||
background: var(--color-gray-100);
|
||||
}
|
||||
|
||||
/* Selected Date */
|
||||
.rc-picker-cell-selected .rc-picker-cell-inner,
|
||||
.rc-picker-cell-range-start .rc-picker-cell-inner,
|
||||
.rc-picker-cell-range-end .rc-picker-cell-inner {
|
||||
color: #fff;
|
||||
background: var(--color-brand-500);
|
||||
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
|
||||
}
|
||||
|
||||
.rc-picker-cell-selected:hover .rc-picker-cell-inner {
|
||||
background: var(--color-brand-600);
|
||||
}
|
||||
|
||||
/* Today */
|
||||
.rc-picker-cell-today .rc-picker-cell-inner::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
border: 1px solid var(--color-brand-500);
|
||||
border-radius: var(--radius-md);
|
||||
content: '';
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rc-picker-cell-selected.rc-picker-cell-today .rc-picker-cell-inner::before {
|
||||
border-color: #fff; /* White border inside selected today */
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
RANGE SELECTION STYLING
|
||||
========================================= */
|
||||
|
||||
/* The strip between start and end */
|
||||
.rc-picker-cell-in-range > .rc-picker-cell-inner {
|
||||
background: var(--color-brand-50);
|
||||
border-radius: 0;
|
||||
min-width: 100%; /* Fill the whole cell width */
|
||||
color: var(--color-gray-800);
|
||||
}
|
||||
|
||||
.rc-picker-cell-in-range::before {
|
||||
background: var(--color-brand-50);
|
||||
}
|
||||
|
||||
/* Range Edge Adjustments */
|
||||
.rc-picker-cell-range-start > .rc-picker-cell-inner {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-left-radius: var(--radius-md);
|
||||
border-bottom-left-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.rc-picker-cell-range-end > .rc-picker-cell-inner {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: var(--radius-md);
|
||||
border-bottom-right-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* Ghost/Pseudo elements for continuous range background */
|
||||
/* RC Picker handles this logic via class combinations.
|
||||
We need to ensure the background flows nicely. */
|
||||
|
||||
.rc-picker-cell-range-start.rc-picker-cell-range-end .rc-picker-cell-inner {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* Range Hover (when selecting the second date) */
|
||||
.rc-picker-cell-range-hover-start::after,
|
||||
.rc-picker-cell-range-hover-end::after,
|
||||
.rc-picker-cell-range-hover::after {
|
||||
content: ""; /* Should show dotted line or lighter highlight */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-top: 2px dashed var(--color-brand-300);
|
||||
transform: translateY(-50%);
|
||||
z-index: 0;
|
||||
display: none; /* AntD v6 doesn't really emphasize this as much, can keep simple */
|
||||
}
|
||||
|
||||
|
||||
/* =========================================
|
||||
TIME PANEL
|
||||
========================================= */
|
||||
.rc-picker-time-panel {
|
||||
border-left: 1px solid var(--color-gray-100);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.rc-picker-time-panel .rc-picker-content {
|
||||
display: flex;
|
||||
max-height: 224px;
|
||||
height: 224px;
|
||||
}
|
||||
|
||||
.rc-picker-time-panel-column {
|
||||
flex: 1 0 auto;
|
||||
width: 60px; /* Wider for easier clicking */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: hidden;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
transition: background 0.3s;
|
||||
overflow-x: hidden;
|
||||
border-left: 1px solid var(--color-gray-100); /* Separator between hrs/min/sec */
|
||||
}
|
||||
|
||||
.rc-picker-time-panel-column:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.rc-picker-time-panel-column:hover {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.rc-picker-time-panel-column > li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rc-picker-time-panel-column > li .rc-picker-time-panel-cell-inner {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
margin: 0;
|
||||
padding: 0 0 0 12px;
|
||||
color: var(--color-gray-800);
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.rc-picker-time-panel-column > li:hover .rc-picker-time-panel-cell-inner {
|
||||
background: var(--color-gray-100);
|
||||
}
|
||||
|
||||
.rc-picker-time-panel-column > li.rc-picker-time-panel-cell-selected .rc-picker-time-panel-cell-inner {
|
||||
background: var(--color-brand-50);
|
||||
color: var(--color-brand-600);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rc-picker-time-panel-column > li.rc-picker-time-panel-cell-disabled .rc-picker-time-panel-cell-inner {
|
||||
color: var(--disabled-text);
|
||||
cursor: not-allowed;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Date + Time Layout */
|
||||
.rc-picker-datetime-panel {
|
||||
display: flex;
|
||||
}
|
||||
.rc-picker-datetime-panel .rc-picker-date-panel,
|
||||
.rc-picker-datetime-panel .rc-picker-time-panel {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
FOOTER
|
||||
========================================= */
|
||||
.rc-picker-footer {
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--color-gray-100);
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.rc-picker-footer-extra {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Ranges (Presets) */
|
||||
.rc-picker-ranges {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rc-picker-ranges > li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.rc-picker-ranges .rc-picker-preset > .rc-picker-preset-tag {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
color: var(--color-brand-500);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.rc-picker-ranges .rc-picker-preset > .rc-picker-preset-tag:hover {
|
||||
color: var(--color-brand-600);
|
||||
}
|
||||
|
||||
.rc-picker-ranges .rc-picker-ok {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* OK Button */
|
||||
.rc-picker-ok button {
|
||||
background: var(--color-brand-500);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 2px 12px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
font-size: var(--text-sm);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.rc-picker-ok button:hover {
|
||||
background: var(--color-brand-600);
|
||||
}
|
||||
|
||||
.rc-picker-ok button:disabled {
|
||||
background: var(--disabled-bg);
|
||||
color: var(--disabled-text);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rc-picker-now-btn {
|
||||
color: var(--color-brand-500);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.rc-picker-now-btn:hover {
|
||||
color: var(--color-brand-600);
|
||||
}
|
||||
|
||||
|
||||
/* =========================================
|
||||
STATUS MODIFIERS (ERROR, WARNING, ETC)
|
||||
========================================= */
|
||||
|
||||
.picker-status-error.rc-picker {
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
.picker-status-error.rc-picker:hover:not(.rc-picker-disabled) {
|
||||
border-color: var(--color-error-600);
|
||||
}
|
||||
.picker-status-error.rc-picker.rc-picker-focused {
|
||||
border-color: var(--color-error-600);
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
|
||||
.picker-status-warning.rc-picker {
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.picker-status-warning.rc-picker:hover:not(.rc-picker-disabled) {
|
||||
border-color: var(--color-warning-600);
|
||||
}
|
||||
.picker-status-warning.rc-picker.rc-picker-focused {
|
||||
border-color: var(--color-warning-600);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
|
||||
.picker-status-success.rc-picker {
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.picker-status-success.rc-picker:hover:not(.rc-picker-disabled) {
|
||||
border-color: var(--color-success-600);
|
||||
}
|
||||
.picker-status-success.rc-picker.rc-picker-focused {
|
||||
border-color: var(--color-success-600);
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ import { TextAreaProps as RcTextAreaProps } from '@rc-component/textarea';
|
||||
import { InputNumberProps as RcInputNumberProps } from '@rc-component/input-number';
|
||||
|
||||
import { CheckboxProps as RcCheckboxProps } from '@rc-component/checkbox';
|
||||
import type { PickerProps as RcPickerProps, RangePickerProps as RcRangePickerProps, PickerPanelProps as RcPickerPanelProps } from '@rc-component/picker';
|
||||
|
||||
import RcSwitch from '@rc-component/switch';
|
||||
type RcSwitchProps = ComponentProps<typeof RcSwitch>;
|
||||
@@ -83,3 +84,22 @@ export interface SwitchProps extends RcSwitchProps, BaseFormInputComponentProps
|
||||
label?: ReactNode;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define Picker props
|
||||
* We omit generateConfig because it is injected by the generator.
|
||||
* We make locale optional and default it in the implementation.
|
||||
*/
|
||||
export interface PickerProps<DateType extends object = any> extends Omit<RcPickerProps<DateType>, 'generateConfig' | 'locale'>, BaseFormInputComponentProps {
|
||||
locale?: RcPickerProps<DateType>['locale'];
|
||||
}
|
||||
export interface RangePickerProps<DateType extends object = any> extends Omit<RcRangePickerProps<DateType>, 'generateConfig' | 'locale'>, BaseFormInputComponentProps {
|
||||
locale?: RcRangePickerProps<DateType>['locale'];
|
||||
}
|
||||
|
||||
export interface PickerPanelProps<DateType extends object = any> extends Omit<RcPickerPanelProps<DateType>, 'generateConfig' | 'locale'> {
|
||||
locale?: RcPickerPanelProps<DateType>['locale'];
|
||||
}
|
||||
|
||||
export interface SpecificPickerProps<DateType extends object> extends PickerProps<DateType> {};
|
||||
export interface SpecificRangePickerProps<DateType extends object> extends RangePickerProps<DateType> {};
|
||||
|
||||
Reference in New Issue
Block a user