@razorpay/blade/build/lib/web/production/components/DatePicker/QuickSelection/usePresetState.js

The Design System that powers Razorpay

import { useMemo } from 'react';
import { isSamePreset } from './utils.js';

var usePresetState = function usePresetState(_ref) {
  var presets = _ref.presets,
    selectedPreset = _ref.selectedPreset,
    currentDate = _ref.currentDate,
    _ref$displayFormat = _ref.displayFormat,
    displayFormat = _ref$displayFormat === void 0 ? 'default' : _ref$displayFormat;
  return useMemo(function () {
    // No presets provided → return empty state
    if (!presets) {
      return {
        presetStates: [],
        selectedPresetIndex: null,
        selectedPresetLabel: null,
        isCustomSelected: false,
        effectiveSelectionType: null,
        // Default when no presets
        displayFormat: 'default'
      };
    }

    // STEP 1: Calculate each preset's value and type
    // Example: "Last 7 days" → [2024-01-01, 2024-01-08], isCustomType: false
    // Example: "Custom" → [null, null], isCustomType: true
    var presetStates = presets.map(function (preset) {
      var _presetValue, _presetValue2;
      var presetValue = null;
      var isCustomType = false;
      presetValue = preset.value(currentDate); // Call function: "Last 7 days" → [startDate, endDate]
      // Check if preset returns valid dates (defined) or null (custom)
      isCustomType = !(((_presetValue = presetValue) === null || _presetValue === void 0 ? void 0 : _presetValue[0]) instanceof Date && ((_presetValue2 = presetValue) === null || _presetValue2 === void 0 ? void 0 : _presetValue2[1]) instanceof Date);
      return {
        preset: preset,
        // Original preset object { label: "Last 7 days", value: fn }
        value: presetValue,
        // Calculated dates [2024-01-01, 2024-01-08] or [null, null]
        isSelected: false,
        // ⏳ Will calculate this next
        isCustomType: isCustomType // true = Custom preset, false = Defined preset
      };
    });

    // STEP 2: Figure out which preset is currently selected
    // Example: User selected [2024-01-01, 2024-01-08] → matches "Last 7 days" preset
    var selectedPresetIndex = null;
    var isCustomSelected = false;
    if (!selectedPreset) {
      // No dates selected → find and select "Custom" preset by default
      selectedPresetIndex = presetStates.findIndex(function (state) {
        return state.isCustomType;
      });
      isCustomSelected = selectedPresetIndex !== -1;
    } else {
      // User has selected dates → see if they match any defined preset
      // Example: selectedPreset = [2024-01-01, 2024-01-08], check if matches "Last 7 days"
      selectedPresetIndex = presetStates.findIndex(function (state) {
        return !state.isCustomType && isSamePreset(selectedPreset, state.value);
      });
      if (selectedPresetIndex === -1) {
        // No match found → user made custom selection → select "Custom" preset
        selectedPresetIndex = presetStates.findIndex(function (state) {
          return state.isCustomType;
        });
        isCustomSelected = true;
      }
    }

    // STEP 3: Mark the selected preset as selected
    if (selectedPresetIndex !== -1) {
      presetStates[selectedPresetIndex].isSelected = true;
    }

    // STEP 4: Get the label for display
    // Example: selectedPresetIndex = 0 → presetStates[0].preset.label = "Last 7 days"
    var selectedPresetLabel = selectedPresetIndex !== -1 ? presetStates[selectedPresetIndex].preset.label : null;

    // STEP 5: Calculate effective selection type based on selected preset
    // If preset returns same-day range (like "Today"), display as single date
    var effectiveSelectionType = 'range'; // Default to range

    if (selectedPresetIndex !== -1) {
      var _selectedPresetState$, _selectedPresetState$2;
      var selectedPresetState = presetStates[selectedPresetIndex];

      // Check if selected preset represents same day (like "Today" preset)
      if ((_selectedPresetState$ = selectedPresetState.value) !== null && _selectedPresetState$ !== void 0 && _selectedPresetState$[0] && (_selectedPresetState$2 = selectedPresetState.value) !== null && _selectedPresetState$2 !== void 0 && _selectedPresetState$2[1] && selectedPresetState.value[0].toDateString() === selectedPresetState.value[1].toDateString()) {
        effectiveSelectionType = 'single'; // Same day = display as single
      } else {
        effectiveSelectionType = 'range'; // Different days = display as range
      }
    }

    // Based on the displayFormat prop
    // When displayFormat is 'compact', show only the preset label instead of dates
    var effectiveDisplayFormat = selectedPresetIndex !== -1 && displayFormat === 'compact' ? 'compact' : 'default';

    // Return final calculated state - this gets shared with all components
    return {
      presetStates: presetStates,
      // Array: [{ preset, value, isSelected, isCustomType }, ...]
      selectedPresetIndex: selectedPresetIndex,
      // Number: 0, 1, 2... or null
      selectedPresetLabel: selectedPresetLabel,
      // String: "Last 7 days" or "Custom" or null
      isCustomSelected: isCustomSelected,
      // Boolean: true if custom dates selected
      effectiveSelectionType: effectiveSelectionType,
      // 'single' | 'range' based on preset analysis
      displayFormat: effectiveDisplayFormat // 'compact' | 'default' based on preset analysis
    };
  }, [presets, selectedPreset, currentDate, displayFormat]); // Recalculate when any of these change
};

export { usePresetState };
//# sourceMappingURL=usePresetState.js.map