@bikdotai/bik-widgets 1.0.0

package/src/components/inputComponents/DatePicker.tsx

@@ -0,0 +1,278 @@
+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;