export function TimePickerBody()

in uui/components/inputs/timePicker/TimePickerBody.tsx [22:135]
107 lines of code
8 McCabe index (conditional complexity)

export function TimePickerBody(props: TimePickerBodyProps) {
    const MIN_HOURS = props.format === FORMAT_12H ? 1 : 0;
    const MAX_HOURS = props.format || FORMAT_12H;

    const setValue = (newTime: Dayjs) => {
        props.onValueChange({ hours: newTime.hour(), minutes: newTime.minute() });
    };

    const onHoursChange = (newHours: number) => {
        setValue(uuiDayjs.dayjs().set(props.value).hour(newHours));
    };

    const onMinutesChange = (newMinutes: number) => {
        setValue(uuiDayjs.dayjs().set(props.value).minute(newMinutes));
    };

    const onTimeTypeChange = () => {
        setValue(uuiDayjs.dayjs().set(props.value).add(12, 'h'));
    };

    const handleMinutesUpClick = () => {
        const minutesStep: number = props.minutesStep || 5;
        const value: Dayjs = uuiDayjs.dayjs().set(props.value);
        const minutesToAdd: number = minutesStep - (value.minute() % minutesStep);
        onMinutesChange(value.add(minutesToAdd, 'm').minute());
    };

    const handleMinutesDownClick = () => {
        const minutesStep: number = props.minutesStep || 5;
        const value: Dayjs = uuiDayjs.dayjs().set(props.value);
        const minutesToSubtract: number = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
        onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
    };

    return (
        <div className={ cx(css.root, uuiTimePicker.container, props.cx) } ref={ props.forwardedRef } { ...props.rawProps }>
            <div className={ css.ltrAlways }>
                <div className={ uuiTimePicker.elementContainer }>
                    <IconContainer
                        size={ 18 }
                        rawProps={ { 'aria-label': 'Increment hours' } }
                        cx={ uuiTimePicker.iconUp }
                        icon={ ArrowIcon }
                        onClick={ () => onHoursChange(uuiDayjs.dayjs().set(props.value).add(1, 'h').hour()) }
                    />
                    <NumericInput
                        cx={ uuiTimePicker.input }
                        onValueChange={ onHoursChange }
                        value={
                            +(uuiDayjs.dayjs()
                                .set(props.value)
                                .format(MAX_HOURS === FORMAT_12H ? 'hh' : 'HH'))
                        }
                        min={ MIN_HOURS }
                        max={ MAX_HOURS }
                    />
                    <IconContainer
                        size={ 18 }
                        rawProps={ { 'aria-label': 'Decrement hours' } }
                        cx={ uuiTimePicker.iconDown }
                        icon={ ArrowIcon }
                        onClick={ () => onHoursChange(uuiDayjs.dayjs().set(props.value).subtract(1, 'h').hour()) }
                    />
                </div>
                <div className={ uuiTimePicker.elementContainer }>
                    <IconContainer
                        size={ 18 }
                        rawProps={ { 'aria-label': 'Increment minutes' } }
                        cx={ uuiTimePicker.iconUp }
                        icon={ ArrowIcon }
                        onClick={ handleMinutesUpClick }
                    />
                    <NumericInput
                        cx={ uuiTimePicker.input }
                        onValueChange={ onMinutesChange }
                        value={ +uuiDayjs.dayjs().set(props.value).format('m') }
                        min={ MIN_MINUTES }
                        max={ MAX_MINUTES }
                    />
                    <IconContainer
                        size={ 18 }
                        rawProps={ { 'aria-label': 'Decrement minutes' } }
                        cx={ uuiTimePicker.iconDown }
                        icon={ ArrowIcon }
                        onClick={ handleMinutesDownClick }
                    />
                </div>
            </div>
            { MAX_HOURS === FORMAT_12H && (
                <div className={ uuiTimePicker.elementContainer }>
                    <IconContainer
                        size={ 18 }
                        cx={ uuiTimePicker.iconUp }
                        icon={ ArrowIcon }
                        onClick={ onTimeTypeChange }
                    />
                    <TextInput
                        cx={ uuiTimePicker.input }
                        onValueChange={ () => {
                        } }
                        isReadonly={ true }
                        value={ uuiDayjs.dayjs().set(props.value).format('A') }
                    />
                    <IconContainer
                        size={ 18 }
                        cx={ uuiTimePicker.iconDown }
                        icon={ ArrowIcon }
                        onClick={ onTimeTypeChange }
                    />
                </div>
            ) }
        </div>
    );
}