@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/components/DateRangePicker/MobileDrawerPresets.tsx

@@ -0,0 +1,174 @@
+import React, { useState } from 'react'
+import { DateRangePreset } from './types'
+import Block from '../Primitives/Block/Block'
+import {
+    Drawer,
+    DrawerTrigger,
+    DrawerPortal,
+    DrawerOverlay,
+    DrawerContent,
+    DrawerBody,
+} from '../Drawer'
+import DatePickerComponent from './components/DatePickerComponent'
+import PresetItem from './components/PresetItem'
+import ActionButtons from './components/ActionButtons'
+import { MobileDrawerPresetsProps } from './types'
+
+const MobileDrawerPresets: React.FC<MobileDrawerPresetsProps> = ({
+    drawerOpen,
+    setDrawerOpen,
+    renderTrigger,
+    showPresets,
+    availablePresets,
+    activePreset,
+    selectedRange,
+    startTime,
+    endTime,
+    dateFormat,
+    handlePresetSelect,
+    handleStartTimeChange,
+    handleEndTimeChange,
+    setSelectedRange,
+    setStartDate,
+    setEndDate,
+    handleCancel,
+    handleApply,
+    showCustomDropdownOnly = false,
+    isDisabled = false,
+    isApplyDisabled = false,
+    applyDisabledMessage,
+    disableFutureDates = false,
+    disablePastDates = false,
+    maxYearOffset,
+}) => {
+    const [isCustomExpanded, setIsCustomExpanded] = useState(
+        showCustomDropdownOnly
+    )
+
+    const renderCustomDateInputs = () => (
+        <DatePickerComponent
+            selectedRange={selectedRange}
+            startTime={startTime}
+            endTime={endTime}
+            dateFormat={dateFormat}
+            handleStartTimeChange={handleStartTimeChange}
+            handleEndTimeChange={handleEndTimeChange}
+            setSelectedRange={setSelectedRange}
+            setStartDate={setStartDate}
+            setEndDate={setEndDate}
+            isDisabled={isDisabled}
+            disableFutureDates={disableFutureDates}
+            disablePastDates={disablePastDates}
+            maxYearOffset={maxYearOffset}
+        />
+    )
+
+    const renderPresetItem = (preset: DateRangePreset) => (
+        <PresetItem
+            key={preset}
+            preset={preset}
+            isActive={activePreset === preset}
+            isCustomExpanded={isCustomExpanded}
+            onPresetSelect={handlePresetSelect}
+            onCustomToggle={() => setIsCustomExpanded(!isCustomExpanded)}
+            setDrawerOpen={setDrawerOpen}
+            isDisabled={isDisabled}
+        />
+    )
+
+    const renderActionButtons = () => (
+        <ActionButtons
+            onCancel={() => {
+                handleCancel()
+                setDrawerOpen(false)
+            }}
+            onApply={handleApply}
+            isDisabled={isDisabled}
+            isApplyDisabled={isApplyDisabled}
+            applyDisabledMessage={applyDisabledMessage}
+        />
+    )
+
+    return (
+        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>
+            <DrawerTrigger onClick={() => !isDisabled && setDrawerOpen(true)}>
+                {renderTrigger()}
+            </DrawerTrigger>
+
+            <DrawerPortal>
+                <DrawerOverlay />
+                <DrawerContent
+                    contentDriven={true}
+                    mobileOffset={
+                        showCustomDropdownOnly || !showPresets
+                            ? undefined
+                            : undefined
+                    }
+                >
+                    <DrawerBody noPadding>
+                        <Block
+                            display="flex"
+                            flexDirection="column"
+                            height="100%"
+                            maxHeight="80vh"
+                            style={{
+                                opacity: isDisabled ? 0.6 : 1,
+                                pointerEvents: isDisabled ? 'none' : 'auto',
+                            }}
+                        >
+                            {showCustomDropdownOnly || !showPresets ? (
+                                <>
+                                    <Block
+                                        width="100%"
+                                        flexGrow={1}
+                                        style={{ overflowY: 'auto' }}
+                                    >
+                                        {renderCustomDateInputs()}
+                                    </Block>
+                                    {renderActionButtons()}
+                                </>
+                            ) : (
+                                showPresets && (
+                                    <>
+                                        <Block
+                                            flexGrow={1}
+                                            style={{
+                                                overflowY: 'auto',
+                                                minHeight: 0,
+                                            }}
+                                        >
+                                            {availablePresets.map(
+                                                renderPresetItem
+                                            )}
+
+                                            <Block
+                                                style={{
+                                                    maxHeight: isCustomExpanded
+                                                        ? '800px'
+                                                        : '0px',
+                                                    opacity: isCustomExpanded
+                                                        ? 1
+                                                        : 0,
+                                                    overflow: 'hidden',
+                                                    transition:
+                                                        'max-height 0.4s ease-in-out, opacity 0.3s ease-in-out',
+                                                }}
+                                            >
+                                                {renderCustomDateInputs()}
+                                            </Block>
+                                        </Block>
+
+                                        {isCustomExpanded &&
+                                            renderActionButtons()}
+                                    </>
+                                )
+                            )}
+                        </Block>
+                    </DrawerBody>
+                </DrawerContent>
+            </DrawerPortal>
+        </Drawer>
+    )
+}
+
+export default MobileDrawerPresets

package/lib/components/DateRangePicker/QuickRangeSelector.tsx

@@ -0,0 +1,241 @@
+import { forwardRef } from 'react'
+import { ChevronDown } from 'lucide-react'
+import {
+    DateRangePreset,
+    DateRangePickerSize,
+    CustomPresetConfig,
+} from './types'
+import {
+    getPresetLabel,
+    getPresetLabelWithCustom,
+    getFilteredPresets,
+} from './utils'
+import { CalendarTokenType } from './dateRangePicker.tokens'
+import Block from '../Primitives/Block/Block'
+import SingleSelect from '../SingleSelect/SingleSelect'
+import {
+    SelectMenuGroupType,
+    SelectMenuSize,
+    SelectMenuVariant,
+} from '../SingleSelect/types'
+
+type QuickRangeSelectorProps = {
+    isOpen: boolean
+    onToggle: () => void
+    activePreset: DateRangePreset
+    onPresetSelect: (preset: DateRangePreset) => void
+    excludeCustom?: boolean
+    customPresets?: CustomPresetConfig[]
+    className?: string
+    disableFutureDates?: boolean
+    disablePastDates?: boolean
+    isDisabled?: boolean
+    size?: DateRangePickerSize
+    maxMenuHeight?: number
+    isStandalone?: boolean
+    calendarToken?: CalendarTokenType
+}
+
+const QuickRangeSelector = forwardRef<HTMLDivElement, QuickRangeSelectorProps>(
+    (
+        {
+            activePreset,
+            onPresetSelect,
+            excludeCustom = false,
+            customPresets,
+            className,
+            disableFutureDates = false,
+            disablePastDates = false,
+            isDisabled = false,
+            size = DateRangePickerSize.MEDIUM,
+            maxMenuHeight = 200,
+            isStandalone = false,
+            calendarToken,
+        },
+        ref
+    ) => {
+        // Use the already processed presets directly
+        const presetConfigs = customPresets || []
+
+        // Get filtered presets based on configuration and restrictions
+        const filteredPresets = getFilteredPresets(
+            presetConfigs,
+            disableFutureDates,
+            disablePastDates
+        )
+
+        // Add CUSTOM preset if not excluded
+        const presetsToShow = excludeCustom
+            ? filteredPresets.filter((p) => p !== DateRangePreset.CUSTOM)
+            : filteredPresets
+
+        const selectItems: SelectMenuGroupType[] = [
+            {
+                items: presetsToShow.map((preset) => ({
+                    label: getPresetLabelWithCustom(preset, presetConfigs),
+                    value: preset,
+                })),
+            },
+        ]
+
+        const handlePresetSelect = (value: string) => {
+            if (!isDisabled) {
+                onPresetSelect(value as DateRangePreset)
+            }
+        }
+
+        const getSelectSize = (
+            pickerSize: DateRangePickerSize
+        ): SelectMenuSize => {
+            switch (pickerSize) {
+                case DateRangePickerSize.SMALL:
+                    return SelectMenuSize.SMALL
+                case DateRangePickerSize.LARGE:
+                    return SelectMenuSize.LARGE
+                case DateRangePickerSize.MEDIUM:
+                default:
+                    return SelectMenuSize.MEDIUM
+            }
+        }
+
+        const getContainerStyle = () => {
+            const baseStyle = {
+                backgroundColor:
+                    calendarToken?.trigger?.quickSelector?.backgroundColor,
+            }
+
+            if (isStandalone) {
+                const borderColor = isDisabled
+                    ? calendarToken?.trigger?.quickSelector?.border?.disabled
+                          ?.left
+                    : calendarToken?.trigger?.quickSelector?.border?.default
+                          ?.left
+
+                return {
+                    ...baseStyle,
+                    border: borderColor,
+                    borderRadius:
+                        calendarToken?.trigger?.quickSelector?.borderRadius
+                            ?.topLeft,
+                }
+            } else {
+                const stateKey = isDisabled ? 'disabled' : 'default'
+                return {
+                    ...baseStyle,
+                    borderLeft:
+                        calendarToken?.trigger?.quickSelector?.border?.[
+                            stateKey
+                        ]?.left,
+                    borderTop:
+                        calendarToken?.trigger?.quickSelector?.border?.[
+                            stateKey
+                        ]?.top,
+                    borderBottom:
+                        calendarToken?.trigger?.quickSelector?.border?.[
+                            stateKey
+                        ]?.bottom,
+                    borderTopLeftRadius:
+                        calendarToken?.trigger?.quickSelector?.borderRadius
+                            ?.topLeft,
+                    borderBottomLeftRadius:
+                        calendarToken?.trigger?.quickSelector?.borderRadius
+                            ?.bottomLeft,
+                }
+            }
+        }
+
+        return (
+            <Block
+                data-element="preset-selector"
+                position="relative"
+                ref={ref}
+                className={className}
+                style={getContainerStyle()}
+            >
+                <SingleSelect
+                    placeholder={getPresetLabel(activePreset)}
+                    items={selectItems}
+                    selected={activePreset}
+                    onSelect={handlePresetSelect}
+                    disabled={isDisabled}
+                    size={getSelectSize(size)}
+                    variant={SelectMenuVariant.NO_CONTAINER}
+                    useDrawerOnMobile={false}
+                    customTrigger={
+                        <Block
+                            data-element="single-select-button"
+                            role="button"
+                            tabIndex={isDisabled ? -1 : 0}
+                            aria-disabled={isDisabled}
+                            style={{
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                cursor: isDisabled ? 'not-allowed' : 'pointer',
+                                width: '100%',
+                                backgroundColor:
+                                    calendarToken?.trigger?.quickSelector
+                                        ?.backgroundColor,
+                                padding: `${calendarToken?.trigger?.quickSelector?.padding?.[size as keyof CalendarTokenType['trigger']['quickSelector']['padding']]?.y} ${calendarToken?.trigger?.quickSelector?.padding?.[size as keyof CalendarTokenType['trigger']['quickSelector']['padding']]?.x}`,
+                                gap: calendarToken?.trigger?.quickSelector?.gap,
+                                opacity: isDisabled ? 0.5 : 1,
+                                border: 'none',
+                                borderRadius: 0,
+                            }}
+                        >
+                            <Block
+                                data-element="placeholder"
+                                data-id={
+                                    getPresetLabel(activePreset) ||
+                                    'placeholder'
+                                }
+                                as="span"
+                                color={
+                                    calendarToken?.trigger?.quickSelector?.text
+                                        ?.color
+                                }
+                                fontSize={
+                                    calendarToken?.trigger?.quickSelector?.text
+                                        ?.fontSize?.[
+                                        size as keyof CalendarTokenType['trigger']['quickSelector']['text']['fontSize']
+                                    ]
+                                }
+                                fontWeight={
+                                    calendarToken?.trigger?.quickSelector?.text
+                                        ?.fontWeight
+                                }
+                                style={{
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                }}
+                            >
+                                {getPresetLabelWithCustom(
+                                    activePreset,
+                                    presetConfigs
+                                )}
+                            </Block>
+                            <ChevronDown
+                                size={
+                                    calendarToken?.trigger?.quickSelector
+                                        ?.iconSize
+                                }
+                                color={
+                                    calendarToken?.trigger?.quickSelector?.text
+                                        ?.color
+                                }
+                            />
+                        </Block>
+                    }
+                    maxMenuHeight={maxMenuHeight}
+                    minMenuWidth={150}
+                    maxMenuWidth={200}
+                />
+            </Block>
+        )
+    }
+)
+
+QuickRangeSelector.displayName = 'QuickRangeSelector'
+
+export default QuickRangeSelector