@cdx-ui/components 0.0.1-beta.17 → 0.0.1-beta.171

package/src/components/DateTimePicker/index.tsx

@@ -0,0 +1,233 @@
+import { forwardRef, useCallback, useEffect, useMemo, useRef, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Schedule } from '@cdx-ui/icons';
+import {
+  dataAttributes,
+  DateTimePickerContext,
+  DateTimePickerRoot as DateTimePickerRootPrimitive,
+  mergeDataAttributes,
+  useDateTimePickerContext,
+  type DateTimePickerRootProps as DateTimePickerRootPrimitiveProps,
+} from '@cdx-ui/primitives';
+import { clampDateTimeId, nowDateTimeId, type DateTimeId } from '@cdx-ui/formatters';
+import { cn, ParentContext, useParentContext } from '@cdx-ui/utils';
+import { Dialog } from '../Dialog';
+import { Icon } from '../Icon';
+import { DateTimeList, type DateTimeListProps } from '../DateTimeList';
+import { PickerTrigger, type PickerTriggerProps } from '../picker/PickerTrigger';
+import {
+  PickerBottomSheetSurface,
+  PickerDialogSurface,
+  PickerPopoverSurface,
+} from '../picker/surfaces';
+
+export interface DateTimePickerProps
+  extends DateTimePickerRootPrimitiveProps, Omit<ViewProps, 'children'> {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DATE_FIELD_SCOPE = 'DATE_FIELD';
+
+const DateTimePickerRoot = forwardRef<View, DateTimePickerProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({
+        ...parent,
+        [DATE_FIELD_SCOPE]: { variant: 'outline', size: 'default', fullWidth: true },
+      }),
+      [parent],
+    );
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <DateTimePickerRootPrimitive
+          ref={ref}
+          className={cn('gap-2', className)}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'date-time-picker' }))}
+        >
+          {children}
+        </DateTimePickerRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+DateTimePickerRoot.displayName = 'DateTimePicker';
+
+type DateTimePickerTriggerProps = Omit<
+  PickerTriggerProps,
+  'open' | 'setOpen' | 'disabled' | 'triggerRef' | 'accessibilityLabel'
+> & {
+  accessibilityLabel?: string;
+};
+
+const DateTimePickerTrigger = forwardRef<View, DateTimePickerTriggerProps>(
+  ({ accessibilityLabel, ...props }, ref) => {
+    const { open, setOpen, disabled, triggerRef, labels } = useDateTimePickerContext();
+    return (
+      <PickerTrigger
+        ref={ref}
+        open={open}
+        setOpen={setOpen}
+        disabled={disabled}
+        triggerRef={triggerRef}
+        accessibilityLabel={accessibilityLabel ?? labels.openDateTimePicker}
+        {...props}
+      />
+    );
+  },
+);
+
+DateTimePickerTrigger.displayName = 'DateTimePicker.Trigger';
+
+const DateTimePickerTriggerIndicator = () => (
+  <Icon as={Schedule} className="text-content-secondary" />
+);
+
+DateTimePickerTriggerIndicator.displayName = 'DateTimePicker.TriggerIndicator';
+
+type DateTimePickerListProps = Omit<
+  DateTimeListProps,
+  | 'value'
+  | 'onValueChange'
+  | 'onUserInteract'
+  | 'granularity'
+  | 'hour12'
+  | 'locale'
+  | 'minValue'
+  | 'maxValue'
+>;
+
+const DateTimePickerList = forwardRef<View, DateTimePickerListProps>(({ ...props }, ref) => {
+  const {
+    value,
+    onValueChange,
+    draftValue,
+    setDraftValue,
+    open,
+    granularity,
+    locale,
+    hour12,
+    minValue,
+    maxValue,
+  } = useDateTimePickerContext();
+  const userInteractedRef = useRef(false);
+
+  useEffect(() => {
+    if (open) {
+      userInteractedRef.current = false;
+    }
+  }, [open]);
+
+  const handleUserInteract = useCallback(() => {
+    userInteractedRef.current = true;
+  }, []);
+
+  const handleValueChange = useCallback(
+    (next: DateTimeId) => {
+      setDraftValue(next);
+      if (!open) {
+        onValueChange?.(next);
+        return;
+      }
+      if (value !== undefined || userInteractedRef.current) {
+        onValueChange?.(next);
+      }
+    },
+    [onValueChange, open, setDraftValue, value],
+  );
+
+  const listValue = open
+    ? (draftValue ??
+      clampDateTimeId(value ?? nowDateTimeId({ granularity }), { min: minValue, max: maxValue }))
+    : value;
+
+  return (
+    <DateTimeList
+      ref={ref}
+      value={listValue}
+      onValueChange={handleValueChange}
+      onUserInteract={handleUserInteract}
+      granularity={granularity}
+      locale={locale}
+      hour12={hour12}
+      minValue={minValue}
+      maxValue={maxValue}
+      {...props}
+    />
+  );
+});
+
+DateTimePickerList.displayName = 'DateTimePicker.List';
+
+function DateTimePickerDialog({ children }: { children: ReactNode }) {
+  const ctx = useDateTimePickerContext();
+  return (
+    <PickerDialogSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+    >
+      <Dialog.Popup className="p-4">
+        <DateTimePickerContext.Provider value={ctx}>{children}</DateTimePickerContext.Provider>
+      </Dialog.Popup>
+    </PickerDialogSurface>
+  );
+}
+
+function DateTimePickerBottomSheet({ children }: { children: ReactNode }) {
+  const ctx = useDateTimePickerContext();
+  return (
+    <PickerBottomSheetSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+    >
+      <DateTimePickerContext.Provider value={ctx}>{children}</DateTimePickerContext.Provider>
+    </PickerBottomSheetSurface>
+  );
+}
+
+function DateTimePickerPopover({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  const ctx = useDateTimePickerContext();
+  return (
+    <PickerPopoverSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+      anchorRef={ctx.anchorRef}
+      triggerRef={ctx.triggerRef}
+      className={className}
+    >
+      <DateTimePickerContext.Provider value={ctx}>{children}</DateTimePickerContext.Provider>
+    </PickerPopoverSurface>
+  );
+}
+
+type DateTimePickerCompound = typeof DateTimePickerRoot & {
+  Trigger: typeof DateTimePickerTrigger;
+  TriggerIndicator: typeof DateTimePickerTriggerIndicator;
+  List: typeof DateTimePickerList;
+  Popover: typeof DateTimePickerPopover;
+  Dialog: typeof DateTimePickerDialog;
+  BottomSheet: typeof DateTimePickerBottomSheet;
+};
+
+export const DateTimePicker = Object.assign(DateTimePickerRoot, {
+  Trigger: DateTimePickerTrigger,
+  TriggerIndicator: DateTimePickerTriggerIndicator,
+  List: DateTimePickerList,
+  Popover: DateTimePickerPopover,
+  Dialog: DateTimePickerDialog,
+  BottomSheet: DateTimePickerBottomSheet,
+}) as DateTimePickerCompound;

package/src/components/Dialog/animation.ts

@@ -0,0 +1,13 @@
+import type { SharedValue } from 'react-native-reanimated';
+import { createContext } from '@cdx-ui/utils';
+
+export interface DialogAnimationContextValue {
+  progress: SharedValue<number>;
+  isDragging: SharedValue<boolean>;
+  isGestureReleaseAnimationRunning: SharedValue<boolean>;
+}
+
+export const [DialogAnimationProvider, useDialogAnimation] =
+  createContext<DialogAnimationContextValue>('DialogAnimationContext', {
+    strict: false,
+  });