Skip to content

Commit

Permalink
Issue #36: Dropdowns specific configuration (mode, allowClear, filter…
Browse files Browse the repository at this point in the history 
…Option, ...)
  • Loading branch information
@xrutayisire
xrutayisire committed Aug 1, 2023
1 parent 3b4e61d commit d7cb2ea
Show file tree
Hide file tree
Showing 14 changed files with 454 additions and 67 deletions.
142 changes: 141 additions & 1 deletion README.md
View file
Expand Up @@ -187,6 +187,13 @@ CronProps {
*/
readOnly?: boolean
/**
* Show clear button for each dropdown.
*
* Default: true
*/
allowClear?: boolean
/**
* Define if empty should trigger an error.
*
Expand All @@ -203,6 +210,8 @@ CronProps {
/**
* Define the clock format.
*
* Default: undefined
*/
clockFormat?: '12-hour-clock' | '24-hour-clock'
Expand Down Expand Up @@ -255,7 +264,7 @@ CronProps {
periodicityOnDoubleClick?: boolean
/**
* Define if it's possible to select only one or multiple values for each select.
* Define if it's possible to select only one or multiple values for each dropdown.
*
* Even in single mode, if you want to disable the double click on a dropdown option that
* automatically select / unselect a periodicity, set 'periodicityOnDoubleClick'
Expand Down Expand Up @@ -289,6 +298,137 @@ CronProps {
*/
allowedPeriods?: ['year', 'month', 'week', 'day', 'hour', 'minute', 'reboot']
/**
* Define a configuration that is used for each dropdown specifically.
* Configuring a dropdown will override any global configuration for the same property.
*
* Configurations available:
*
* // See global configuration
* // For 'months' and 'week-days'
* humanizeLabels?: boolean
*
* // See global configuration
* // For 'months' and 'week-days'
* humanizeValue?: boolean
*
* // See global configuration
* // For 'month-days', 'hours' and 'minutes'
* leadingZero?: boolean
*
* // See global configuration
* For 'period', 'months', 'month-days', 'week-days', 'hours' and 'minutes'
* disabled?: boolean
*
* // See global configuration
* For 'period', 'months', 'month-days', 'week-days', 'hours' and 'minutes'
* readOnly?: boolean
*
* // See global configuration
* // For 'period', 'months', 'month-days', 'week-days', 'hours' and 'minutes'
* allowClear?: boolean
*
* // See global configuration
* // For 'months', 'month-days', 'week-days', 'hours' and 'minutes'
* periodicityOnDoubleClick?: boolean
*
* // See global configuration
* // For 'months', 'month-days', 'week-days', 'hours' and 'minutes'
* mode?: Mode
*
* // The function will receive one argument, an object with value and label.
* // If the function returns true, the option will be included in the filtered set.
* // Otherwise, it will be excluded.
* // For 'months', 'month-days', 'week-days', 'hours' and 'minutes'
* filterOption?: FilterOption
*
* Default: undefined
*/
dropdownsConfig?: {
'period'?: {
disabled?: boolean
readOnly?: boolean
allowClear?: boolean
}
'months'?: {
humanizeLabels?: boolean
humanizeValue?: boolean
disabled?: boolean
readOnly?: boolean
allowClear?: boolean
periodicityOnDoubleClick?: boolean
mode?: 'multiple' | 'single'
filterOption?: ({
value,
label,
}: {
value: string
label: string
}) => boolean
}
'month-days'?: {
leadingZero?: boolean
disabled?: boolean
readOnly?: boolean
allowClear?: boolean
periodicityOnDoubleClick?: boolean
mode?: 'multiple' | 'single'
filterOption?: ({
value,
label,
}: {
value: string
label: string
}) => boolean
}
'week-days'?: {
humanizeLabels?: boolean
humanizeValue?: boolean
disabled?: boolean
readOnly?: boolean
allowClear?: boolean
periodicityOnDoubleClick?: boolean
mode?: 'multiple' | 'single'
filterOption?: ({
value,
label,
}: {
value: string
label: string
}) => boolean
}
'hours'?: {
leadingZero?: boolean
disabled?: boolean
readOnly?: boolean
allowClear?: boolean
periodicityOnDoubleClick?: boolean
mode?: 'multiple' | 'single'
filterOption?: ({
value,
label,
}: {
value: string
label: string
}) => boolean
}
'minutes'?: {
leadingZero?: boolean
disabled?: boolean
readOnly?: boolean
allowClear?: boolean
periodicityOnDoubleClick?: boolean
mode?: 'multiple' | 'single'
filterOption?: ({
value,
label,
}: {
value: string
label: string
}) => boolean
}
}
/**
* Change the component language.
* Can also be used to remove prefix and suffix.
Expand Down
105 changes: 77 additions & 28 deletions src/Cron.tsx
View file
Expand Up @@ -59,6 +59,8 @@ export default function Cron(props: CronProps) {
'minute',
'reboot',
],
allowClear,
dropdownsConfig,
} = props
const internalValueRef = useRef<string>(value)
const defaultPeriodRef = useRef<PeriodType>(defaultPeriod)
Expand Down Expand Up @@ -138,7 +140,8 @@ export default function Cron(props: CronProps) {
weekDays,
hours,
minutes,
humanizeValue
humanizeValue,
dropdownsConfig
)

setValue(cron, { selectedPeriod })
Expand All @@ -160,6 +163,7 @@ export default function Cron(props: CronProps) {
minutes,
humanizeValue,
valueCleared,
dropdownsConfig,
]
)

Expand Down Expand Up @@ -189,6 +193,8 @@ export default function Cron(props: CronProps) {
undefined,
undefined,
undefined,
undefined,
undefined,
undefined
)

Expand Down Expand Up @@ -281,10 +287,11 @@ export default function Cron(props: CronProps) {
setValue={setPeriod}
locale={locale}
className={className}
disabled={disabled}
readOnly={readOnly}
disabled={dropdownsConfig?.period?.disabled ?? disabled}
readOnly={dropdownsConfig?.period?.readOnly ?? readOnly}
shortcuts={shortcuts}
allowedPeriods={allowedPeriods}
allowClear={dropdownsConfig?.period?.allowClear ?? allowClear}
/>
)}

Expand All @@ -299,12 +306,19 @@ export default function Cron(props: CronProps) {
setValue={setMonths}
locale={locale}
className={className}
humanizeLabels={humanizeLabels}
disabled={disabled}
readOnly={readOnly}
humanizeLabels={
dropdownsConfig?.months?.humanizeLabels ?? humanizeLabels
}
disabled={dropdownsConfig?.months?.disabled ?? disabled}
readOnly={dropdownsConfig?.months?.readOnly ?? readOnly}
period={periodForRender}
periodicityOnDoubleClick={periodicityOnDoubleClick}
mode={mode}
periodicityOnDoubleClick={
dropdownsConfig?.months?.periodicityOnDoubleClick ??
periodicityOnDoubleClick
}
mode={dropdownsConfig?.months?.mode ?? mode}
allowClear={dropdownsConfig?.months?.allowClear ?? allowClear}
filterOption={dropdownsConfig?.months?.filterOption}
/>
)}

Expand All @@ -316,12 +330,21 @@ export default function Cron(props: CronProps) {
locale={locale}
className={className}
weekDays={weekDays}
disabled={disabled}
readOnly={readOnly}
leadingZero={leadingZero}
disabled={dropdownsConfig?.['month-days']?.disabled ?? disabled}
readOnly={dropdownsConfig?.['month-days']?.readOnly ?? readOnly}
leadingZero={
dropdownsConfig?.['month-days']?.leadingZero ?? leadingZero
}
period={periodForRender}
periodicityOnDoubleClick={periodicityOnDoubleClick}
mode={mode}
periodicityOnDoubleClick={
dropdownsConfig?.['month-days']?.periodicityOnDoubleClick ??
periodicityOnDoubleClick
}
mode={dropdownsConfig?.['month-days']?.mode ?? mode}
allowClear={
dropdownsConfig?.['month-days']?.allowClear ?? allowClear
}
filterOption={dropdownsConfig?.['month-days']?.filterOption}
/>
)}

Expand All @@ -334,13 +357,23 @@ export default function Cron(props: CronProps) {
setValue={setWeekDays}
locale={locale}
className={className}
humanizeLabels={humanizeLabels}
humanizeLabels={
dropdownsConfig?.['week-days']?.humanizeLabels ??
humanizeLabels
}
monthDays={monthDays}
disabled={disabled}
readOnly={readOnly}
disabled={dropdownsConfig?.['week-days']?.disabled ?? disabled}
readOnly={dropdownsConfig?.['week-days']?.readOnly ?? readOnly}
period={periodForRender}
periodicityOnDoubleClick={periodicityOnDoubleClick}
mode={mode}
periodicityOnDoubleClick={
dropdownsConfig?.['week-days']?.periodicityOnDoubleClick ??
periodicityOnDoubleClick
}
mode={dropdownsConfig?.['week-days']?.mode ?? mode}
allowClear={
dropdownsConfig?.['week-days']?.allowClear ?? allowClear
}
filterOption={dropdownsConfig?.['week-days']?.filterOption}
/>
)}

Expand All @@ -353,13 +386,20 @@ export default function Cron(props: CronProps) {
setValue={setHours}
locale={locale}
className={className}
disabled={disabled}
readOnly={readOnly}
leadingZero={leadingZero}
disabled={dropdownsConfig?.hours?.disabled ?? disabled}
readOnly={dropdownsConfig?.hours?.readOnly ?? readOnly}
leadingZero={
dropdownsConfig?.hours?.leadingZero ?? leadingZero
}
clockFormat={clockFormat}
period={periodForRender}
periodicityOnDoubleClick={periodicityOnDoubleClick}
mode={mode}
periodicityOnDoubleClick={
dropdownsConfig?.hours?.periodicityOnDoubleClick ??
periodicityOnDoubleClick
}
mode={dropdownsConfig?.hours?.mode ?? mode}
allowClear={dropdownsConfig?.hours?.allowClear ?? allowClear}
filterOption={dropdownsConfig?.hours?.filterOption}
/>
)}

Expand All @@ -371,12 +411,21 @@ export default function Cron(props: CronProps) {
locale={locale}
period={periodForRender}
className={className}
disabled={disabled}
readOnly={readOnly}
leadingZero={leadingZero}
disabled={dropdownsConfig?.minutes?.disabled ?? disabled}
readOnly={dropdownsConfig?.minutes?.readOnly ?? readOnly}
leadingZero={
dropdownsConfig?.minutes?.leadingZero ?? leadingZero
}
clockFormat={clockFormat}
periodicityOnDoubleClick={periodicityOnDoubleClick}
mode={mode}
periodicityOnDoubleClick={
dropdownsConfig?.minutes?.periodicityOnDoubleClick ??
periodicityOnDoubleClick
}
mode={dropdownsConfig?.minutes?.mode ?? mode}
allowClear={
dropdownsConfig?.minutes?.allowClear ?? allowClear
}
filterOption={dropdownsConfig?.minutes?.filterOption}
/>
)}

Expand Down

0 comments on commit d7cb2ea

Please sign in to comment.