@quillsql/react 1.7.4 → 1.7.6

package/src/DateRangePicker/DateRangePickerButton.tsx

@@ -1,250 +0,0 @@
-import React, { Dispatch, Ref, SetStateAction } from 'react';
-
-import { ArrowDownHeadIcon, CalendarIcon } from '../assets';
-
-import { DateRangePickerOption, DateRangePickerValue } from './DateRangePicker';
-import { formatSelectedDates } from './dateRangePickerUtils';
-import { hasValue } from '../components/selectUtils';
-
-interface DateRangePickerButtonProps {
-  value: DateRangePickerValue;
-  options: DateRangePickerOption[];
-  placeholder: string;
-  disabled: boolean;
-  calendarRef: Ref<HTMLButtonElement>;
-  showCalendar: boolean;
-  setShowCalendar: Dispatch<SetStateAction<boolean>>;
-  onCalendarKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
-  enableDropdown: boolean;
-  dropdownRef: Ref<HTMLButtonElement>;
-  showDropdown: boolean;
-  setShowDropdown: Dispatch<SetStateAction<boolean>>;
-  onDropdownKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
-  locale?: Locale;
-  dropdownPlaceholder?: string;
-  theme: any;
-}
-
-const DateRangePickerButton = ({
-  value,
-  options,
-  placeholder,
-  disabled,
-  calendarRef,
-  showCalendar,
-  setShowCalendar,
-  onCalendarKeyDown,
-  enableDropdown,
-  dropdownRef,
-  showDropdown,
-  setShowDropdown,
-  onDropdownKeyDown,
-  locale,
-  dropdownPlaceholder = 'Select',
-  theme,
-}: DateRangePickerButtonProps) => {
-  const [startDate, endDate, dropdownValue] = value;
-
-  const hasDateSelection =
-    (startDate || endDate) !== null && (startDate || endDate) !== undefined;
-  const hasDropdownSelection = hasValue(dropdownValue);
-
-  const calendarText = hasDateSelection
-    ? formatSelectedDates(startDate as Date, endDate as Date, locale)
-    : placeholder;
-  const dropdownText = dropdownValue
-    ? String(options.find(option => option.value === dropdownValue)?.text)
-    : dropdownPlaceholder;
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        borderRadius: '0.375rem',
-        background: theme?.backgroundColor,
-        fontFamily: theme?.fontFamily,
-        boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-      }}
-      // className={twMerge(
-      //   'qq-flex qq-items-center qq-justify-between',
-      //   getColorClassNames('white').bgColor,
-      //   borderRadius.md.all,
-      //   boxShadow.sm
-      // )}
-    >
-      <button
-        type="button"
-        style={{
-          fontFamily: theme?.fontFamily,
-          borderColor: theme?.borderColor || '#E5E7EB',
-          borderStyle: 'solid',
-          borderWidth: 1,
-          borderRadius: '0.375rem',
-          minHeight: 38,
-          borderRight: 'none',
-          borderTopRightRadius: 0,
-          borderBottomRightRadius: 0,
-          color: theme?.primaryTextColor,
-          cursor: 'pointer',
-          display: 'flex',
-          alignItems: 'center',
-          width: '100%',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          background: theme?.backgroundColor,
-          fontWeight: theme?.fontWeightMedium || '500',
-          fontSize: theme?.fontSizeSmall || '0.875rem',
-          paddingLeft: 10,
-          // borderRight: enableDropdown
-          //   ? border.none.right
-          //   : twMerge(borderRadius.md.right, border.sm.right),
-        }}
-        ref={calendarRef}
-        onClick={() => setShowCalendar(!showCalendar)}
-        onKeyDown={onCalendarKeyDown}
-        // className={twMerge(
-        //   'qq-flex qq-items-center qq-w-full qq-truncate focus:qq-outline-none focus:qq-ring-2',
-        //   getSelectButtonColors(hasDateSelection, disabled),
-        //   enableDropdown
-        //     ? border.none.right
-        //     : twMerge(borderRadius.md.right, border.sm.right),
-        //   getColorClassNames(BaseColors.Blue, colorPalette.lightRing)
-        //     .focusRingColor,
-        //   spacing.twoXl.paddingX,
-        //   spacing.sm.paddingY,
-        //   borderRadius.md.left,
-        //   border.sm.all
-        // )}
-        disabled={disabled}
-      >
-        <CalendarIcon
-          style={{
-            flex: 'none',
-            color: theme?.secondaryTextColor,
-            height: '1.25rem',
-            width: '1.25rem',
-            // marginLeft: '0.125rem',
-            marginRight: '0.75rem',
-          }}
-          // className={twMerge(
-          // 'qq-flex-none',
-          // getColorClassNames(DEFAULT_COLOR, colorPalette.lightText).textColor,
-          // sizing.lg.height,
-          // sizing.lg.width,
-          //   spacing.threeXs.negativeMarginLeft,
-          //   spacing.lg.marginRight
-          // )}
-          aria-hidden="true"
-        />
-        <p
-          style={{
-            margin: 0,
-            fontFamily: theme?.fontFamily,
-            color: theme?.primaryTextColor,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            fontWeight: theme?.fontWeightMedium || '500',
-            fontSize: theme?.fontSizeSmall || '0.875rem',
-          }}
-          // className={twMerge(
-          //   'qq-whitespace-nowrap qq-truncate',
-          //   fontSize.sm,
-          //   fontWeight.md
-          // )}
-        >
-          {calendarText}
-        </p>
-      </button>
-      {enableDropdown ? (
-        <button
-          type="button"
-          style={{
-            // fontFamily: theme?.fontFamily,
-            borderColor: theme?.borderColor || '#E5E7EB',
-            borderStyle: 'solid',
-            borderWidth: 1,
-            cursor: 'pointer',
-            marginLeft: -1,
-            borderRadius: '0.375rem',
-            width: '12rem',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            paddingLeft: '1rem',
-            paddingRight: '1rem',
-            display: 'inline-flex',
-            minHeight: 38,
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            background: theme?.backgroundColor,
-            fontSize: theme?.fontSizeSmall || '0.875rem',
-            // fontWeight: theme?.fontWeightMedium || '800',
-          }}
-          ref={dropdownRef}
-          onClick={() => setShowDropdown(!showDropdown)}
-          // className={twMerge(
-          //   'qq-inline-flex qq-justify-between qq-w-48 qq-truncate focus:qq-outline-none focus:qq-ring-2',
-          //   getSelectButtonColors(hasDropdownSelection, disabled),
-          //   getColorClassNames(BaseColors.Blue, colorPalette.lightRing)
-          //     .focusRingColor,
-          // spacing.twoXl.paddingX,
-          // spacing.sm.paddingY
-          // spacing.px.negativeMarginLeft,
-          // borderRadius.md.right,
-          // border.sm.all
-          // )}
-          onKeyDown={onDropdownKeyDown}
-          disabled={disabled}
-        >
-          <p
-            style={{
-              margin: 0,
-              fontFamily: theme?.fontFamily,
-              // fontFamily: 'Avenir',
-              color: theme?.primaryTextColor || '#364153',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              fontWeight: theme?.fontWeightMedium || '500',
-              fontSize: theme?.fontSizeSmall || '0.875rem',
-              // background: 'red',
-            }}
-            // className={twMerge(
-            //   'qq-whitespace-nowrap qq-truncate',
-            //   fontSize.sm,
-            //   fontWeight.md
-            // )}
-          >
-            {dropdownText}
-          </p>
-          <ArrowDownHeadIcon
-            style={{
-              height: '1.25rem',
-              width: '1.25rem',
-              flex: 'none',
-              color: theme?.secondaryTextColor,
-              marginRight: '-0.25rem',
-            }}
-            // className={twMerge(
-            //   'qq-flex-none',
-            //   sizing.lg.height,
-            //   sizing.lg.width,
-            //   spacing.twoXs.negativeMarginRight,
-            //   getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
-            //     .textColor
-            // )}
-            aria-hidden="true"
-          />
-        </button>
-      ) : null}
-    </div>
-  );
-};
-
-export default DateRangePickerButton;