@bikdotai/bik-widgets 1.0.0 → 1.0.1

package/src/components/inputComponents/DatePicker.tsx

@@ -1,278 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import CalendarIcon from '../../assets/svg/CalendarIcon';
-import CalendarClockIcon from '../../assets/svg/CalendarClockIcon';
-import styles from './DatePicker.module.css';
-import ErrorIcon from 'assets/svg/ErrorIcon';
-
-const convertLocalDateToUTC = (
-  localDateString: string,
-  includeTime = false,
-): string => {
-  if (!localDateString) return '';
-
-  if (includeTime) {
-    const localDate = new Date(localDateString);
-    return localDate.toISOString();
-  } else {
-    const [year, month, day] = localDateString.split('-').map(Number);
-    const utcDate = new Date(Date.UTC(year, month - 1, day));
-    return utcDate.toISOString().slice(0, 10);
-  }
-};
-
-const convertUTCDateToLocal = (
-  utcDateString: string,
-  includeTime = false,
-): string => {
-  if (!utcDateString) return '';
-
-  if (includeTime) {
-    const utcDate = new Date(utcDateString);
-    const localDate = new Date(
-      utcDate.getTime() - utcDate.getTimezoneOffset() * 60000,
-    );
-    return localDate.toISOString().slice(0, 16);
-  } else {
-    return utcDateString.slice(0, 10);
-  }
-};
-
-const isSafari = (): boolean => {
-  if (typeof window === 'undefined') return false;
-  const userAgent = window.navigator.userAgent;
-  return /^((?!chrome|android).)*safari/i.test(userAgent);
-};
-
-const getCurrentDateTimeString = (includeTime: boolean): string => {
-  const now = new Date();
-  if (includeTime) {
-    return now.toISOString();
-  } else {
-    return now.toISOString().slice(0, 10);
-  }
-};
-
-export interface DatePickerProps {
-  id?: string;
-  value: string;
-  disabled?: boolean;
-  isRequired?: boolean;
-  label?: string;
-  min?: string;
-  max?: string;
-  error?: string;
-  includeTime?: boolean;
-  onChange: (value: string) => void;
-  onValidate?: (value: string) => string | null;
-  onBlur?: () => void;
-  isPreview?: boolean;
-  fontColour?: string;
-}
-
-const DatePicker: React.FC<DatePickerProps> = ({
-  id,
-  value,
-  disabled = false,
-  isRequired = false,
-  label,
-  min,
-  max,
-  error,
-  includeTime = false,
-  onChange,
-  onValidate,
-  onBlur,
-  isPreview = false,
-  fontColour,
-}) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
-  // Handle Safari's default date behavior
-  useEffect(() => {
-    if (isSafari() && !value && !isPreview && !disabled) {
-      const currentDateTime = getCurrentDateTimeString(includeTime);
-      onChange(currentDateTime);
-    }
-  }, [includeTime, value, onChange, isPreview, disabled]);
-
-  const displayValue = convertUTCDateToLocal(value, includeTime);
-  const displayMin = min ? convertUTCDateToLocal(min, includeTime) : undefined;
-  const displayMax = max ? convertUTCDateToLocal(max, includeTime) : undefined;
-  const hasValue = Boolean(displayValue);
-  const shouldFloatLabel = isFocused || hasValue;
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const utcDateValue = convertLocalDateToUTC(e.target.value, includeTime);
-    onChange(utcDateValue);
-    if (onValidate && utcDateValue) {
-      onValidate(utcDateValue);
-    }
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-    if (onBlur) {
-      onBlur();
-    }
-  };
-
-  const handleInputFocus = () => {
-    setIsFocused(true);
-  };
-
-  const openPicker = () => {
-    if (inputRef.current && !disabled && !isPreview) {
-      const input = inputRef.current;
-      input.focus();
-      if ('showPicker' in input) {
-        try {
-          (input as HTMLInputElement & { showPicker: () => void }).showPicker();
-          return;
-        } catch (e) {
-          console.debug('showPicker failed, falling back to click');
-        }
-      }
-      setTimeout(() => {
-        if (input) {
-          input.click();
-        }
-      }, 10);
-    }
-  };
-
-  const bikGetWrapperClasses = (isFocused, error, disabled) => {
-    const classes = [styles['bik-datePicker__inputWrapper']];
-    if (isFocused)
-      classes.push(styles['bik-datePicker__inputWrapper--focused']);
-    if (error) classes.push(styles['bik-datePicker__inputWrapper--error']);
-    if (disabled)
-      classes.push(styles['bik-datePicker__inputWrapper--disabled']);
-    return classes.join(' ');
-  };
-
-  const bikGetLabelClasses = (shouldFloatLabel, error, disabled, hasValue) => {
-    const classes = [styles['bik-datePicker__label']];
-    if (shouldFloatLabel)
-      classes.push(styles['bik-datePicker__label--floated']);
-    if (error) classes.push(styles['bik-datePicker__label--error']);
-    if (disabled) classes.push(styles['bik-datePicker__label--disabled']);
-    if (hasValue) classes.push(styles['bik-datePicker__label--hasValue']);
-    return classes.join(' ');
-  };
-
-  const bikWrapperStyle = {
-    borderColor: error ? '#b92321' : '#e0e0e0',
-    backgroundColor: 'rgba(256, 256, 256, 0.3)',
-  };
-
-  return (
-    <div
-      className={styles['bik-datePicker__container']}
-      data-mode={isPreview ? 'preview' : 'default'}
-    >
-      <div
-        className={bikGetWrapperClasses(isFocused, error, disabled)}
-        style={bikWrapperStyle}
-      >
-        <input
-          ref={inputRef}
-          id={id}
-          type={includeTime ? 'datetime-local' : 'date'}
-          value={displayValue}
-          onChange={handleChange}
-          onFocus={handleInputFocus}
-          onBlur={handleBlur}
-          disabled={disabled || isPreview}
-          required={isRequired}
-          min={displayMin}
-          max={displayMax}
-          className={styles['bik-datePicker__input']}
-          onClick={!disabled && !isPreview ? openPicker : undefined}
-        />
-
-        {label && (
-          <div
-            className={bikGetLabelClasses(
-              shouldFloatLabel,
-              error,
-              disabled,
-              hasValue,
-            )}
-            onClick={
-              disabled || isPreview
-                ? undefined
-                : e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    openPicker();
-                  }
-            }
-            style={{
-              cursor: disabled
-                ? 'not-allowed'
-                : isPreview
-                  ? 'default'
-                  : 'pointer',
-              color: fontColour,
-            }}
-          >
-            {label}
-            {isRequired && (
-              <span className={styles['bik-datePicker__required']}>*</span>
-            )}
-          </div>
-        )}
-
-        <div
-          className={styles['bik-datePicker__icon']}
-          tabIndex={disabled || isPreview ? -1 : 0}
-          role="button"
-          onClick={
-            disabled || isPreview
-              ? undefined
-              : e => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  openPicker();
-                }
-          }
-          onKeyDown={
-            disabled
-              ? undefined
-              : e => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    openPicker();
-                  }
-                }
-          }
-          style={{
-            cursor: disabled
-              ? 'not-allowed'
-              : isPreview
-                ? 'default'
-                : 'pointer',
-          }}
-        >
-          {includeTime ? <CalendarClockIcon /> : <CalendarIcon />}
-        </div>
-      </div>
-
-      {error && (
-        <div
-          className={styles['bik-datePicker__error']}
-          style={{ display: 'flex', alignItems: 'center' }}
-        >
-          <div className={styles['bik-datePicker__errorIcon']}>
-            <ErrorIcon size={12} />
-          </div>
-          {error}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default DatePicker;