react-native-system-ui 0.0.2 → 0.0.4

package/dist/es/hooks/aria/useAriaOverlay.js

@@ -0,0 +1,25 @@
+import { useMemo, useRef } from 'react';
+import { useOverlay } from '@react-native-aria/overlays';
+import { mergeProps } from '@react-native-aria/utils';
+export const useAriaOverlay = ({
+  isOpen,
+  onClose,
+  isDismissable = true,
+  shouldCloseOnInteractOutside,
+  overlayProps: overlayPropOverrides
+}) => {
+  const overlayRef = useRef(null);
+  const {
+    overlayProps
+  } = useOverlay({
+    isOpen,
+    onClose,
+    isDismissable,
+    shouldCloseOnInteractOutside
+  }, overlayRef);
+  const resolvedOverlayProps = useMemo(() => mergeProps(overlayProps ?? {}, overlayPropOverrides ?? {}), [overlayPropOverrides, overlayProps]);
+  return {
+    overlayRef,
+    overlayProps: resolvedOverlayProps
+  };
+};

package/dist/es/hooks/aria/useAriaPress.js

@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import { Platform } from 'react-native';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { mergeProps } from '@react-native-aria/utils';
+const mergePropsCompat = (...args) => {
+  if (typeof mergeProps === 'function') {
+    return mergeProps(...args);
+  }
+  return Object.assign({}, ...args);
+};
+export const useAriaPress = ({
+  disabled = false,
+  allowHover = Platform.OS === 'web',
+  allowFocus = Platform.OS === 'web',
+  extraProps,
+  ...pressEvents
+} = {}) => {
+  const {
+    pressProps,
+    isPressed
+  } = usePress({
+    ...pressEvents,
+    isDisabled: disabled
+  });
+  const {
+    isHovered,
+    hoverProps
+  } = useHover({
+    isDisabled: disabled || !allowHover
+  });
+  const useFocusCompat = useFocus;
+  const {
+    isFocused,
+    focusProps
+  } = useFocusCompat({
+    isDisabled: disabled
+  });
+  const useFocusRingCompat = useFocusRing;
+  const {
+    focusProps: focusRingProps,
+    isFocusVisible
+  } = useFocusRingCompat({
+    isDisabled: disabled
+  });
+  const interactionProps = useMemo(() => {
+    let merged = pressProps;
+    if (allowHover) {
+      merged = mergePropsCompat(merged, hoverProps);
+    }
+    if (allowFocus && !disabled) {
+      merged = mergePropsCompat(merged, focusProps, focusRingProps);
+    }
+    if (extraProps) {
+      merged = mergePropsCompat(merged, extraProps);
+    }
+    return merged;
+  }, [allowFocus, allowHover, disabled, extraProps, focusProps, focusRingProps, hoverProps, pressProps]);
+  const states = useMemo(() => ({
+    hovered: !!isHovered,
+    pressed: !!isPressed,
+    focused: !!isFocused,
+    focusVisible: !!isFocusVisible,
+    disabled: !!disabled
+  }), [disabled, isFocusVisible, isFocused, isHovered, isPressed]);
+  return {
+    interactionProps,
+    states
+  };
+};

package/dist/es/hooks/aria/useAriaToggle.js

@@ -0,0 +1,16 @@
+import { useMemo, useRef } from 'react';
+import { useToggle } from '@react-native-aria/toggle';
+import { useToggleState } from '@react-stately/toggle';
+export const useAriaToggle = props => {
+  const inputRef = props.inputRef ?? useRef(null);
+  const state = useToggleState(props);
+  const {
+    inputProps
+  } = useToggle(props, state, inputRef);
+  const resolvedInputProps = useMemo(() => inputProps, [inputProps]);
+  return {
+    state,
+    inputProps: resolvedInputProps,
+    inputRef
+  };
+};

package/dist/es/hooks/gesture/index.js

@@ -0,0 +1,2 @@
+export * from './useGestureScroll';
+export {};

package/dist/es/hooks/gesture/useGestureScroll.js

@@ -0,0 +1,112 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+const DEFAULT_THROTTLE = 16;
+const VELOCITY_NORMALIZER = 1000; // convert delta/ms to px per second
+
+export const useGestureScroll = (options = {}) => {
+  const {
+    axis = 'y',
+    scrollEventThrottle = DEFAULT_THROTTLE,
+    onScroll,
+    onScrollBeginDrag,
+    onScrollEndDrag,
+    onMomentumScrollBegin,
+    onMomentumScrollEnd
+  } = options;
+  const scrollValue = useRef(new Animated.Value(0)).current;
+  const lastOffsetRef = useRef(0);
+  const lastTimestampRef = useRef(null);
+  const velocityRef = useRef(0);
+  const directionRef = useRef(null);
+  const [direction, setDirection] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isMomentum, setIsMomentum] = useState(false);
+  const updateDirection = useCallback(next => {
+    if (directionRef.current !== next) {
+      directionRef.current = next;
+      setDirection(next);
+    }
+  }, []);
+  const handleScroll = useCallback(event => {
+    onScroll?.(event);
+    const contentOffset = event.nativeEvent.contentOffset;
+    const current = axis === 'x' ? contentOffset.x ?? 0 : contentOffset.y ?? 0;
+    const delta = current - lastOffsetRef.current;
+    const timestamp = event.timeStamp ?? Date.now();
+    if (delta > 0) {
+      updateDirection('forward');
+    } else if (delta < 0) {
+      updateDirection('backward');
+    }
+    if (lastTimestampRef.current != null) {
+      const elapsed = Math.max(timestamp - lastTimestampRef.current, 1);
+      velocityRef.current = delta / elapsed * VELOCITY_NORMALIZER;
+    }
+    lastTimestampRef.current = timestamp;
+    lastOffsetRef.current = current;
+  }, [axis, onScroll, updateDirection]);
+  const animatedScrollHandler = useMemo(() => {
+    const mapping = axis === 'x' ? [{
+      nativeEvent: {
+        contentOffset: {
+          x: scrollValue
+        }
+      }
+    }] : [{
+      nativeEvent: {
+        contentOffset: {
+          y: scrollValue
+        }
+      }
+    }];
+    return Animated.event(mapping, {
+      useNativeDriver: false,
+      listener: handleScroll
+    });
+  }, [axis, handleScroll, scrollValue]);
+  const handleScrollBeginDrag = useCallback(event => {
+    setIsDragging(true);
+    onScrollBeginDrag?.(event);
+  }, [onScrollBeginDrag]);
+  const handleScrollEndDrag = useCallback(event => {
+    setIsDragging(false);
+    onScrollEndDrag?.(event);
+  }, [onScrollEndDrag]);
+  const handleMomentumBegin = useCallback(event => {
+    setIsMomentum(true);
+    onMomentumScrollBegin?.(event);
+  }, [onMomentumScrollBegin]);
+  const handleMomentumEnd = useCallback(event => {
+    setIsMomentum(false);
+    onMomentumScrollEnd?.(event);
+  }, [onMomentumScrollEnd]);
+  const resetOffset = useCallback((value = 0) => {
+    scrollValue.stopAnimation();
+    scrollValue.setValue(value);
+    lastOffsetRef.current = value;
+    lastTimestampRef.current = null;
+    velocityRef.current = 0;
+    updateDirection(null);
+  }, [scrollValue, updateDirection]);
+  const getVelocity = useCallback(() => velocityRef.current, []);
+  const getCurrentOffset = useCallback(() => lastOffsetRef.current, []);
+  const scrollProps = useMemo(() => ({
+    onScroll: animatedScrollHandler,
+    scrollEventThrottle,
+    onScrollBeginDrag: handleScrollBeginDrag,
+    onScrollEndDrag: handleScrollEndDrag,
+    onMomentumScrollBegin: handleMomentumBegin,
+    onMomentumScrollEnd: handleMomentumEnd
+  }), [animatedScrollHandler, handleMomentumBegin, handleMomentumEnd, handleScrollBeginDrag, handleScrollEndDrag, scrollEventThrottle]);
+  return {
+    scrollValue,
+    scrollProps,
+    direction,
+    isDragging,
+    isMomentum,
+    getVelocity,
+    getCurrentOffset,
+    resetOffset
+  };
+};
+export default useGestureScroll;

package/dist/es/hooks/index.js

@@ -0,0 +1,7 @@
+export * from './usePresenceAnimation';
+export * from './useSafeAreaPadding';
+export * from './aria';
+export * from './gesture';
+export { default as useControllableValue } from './useControllableValue';
+export { default as useCountDown } from './useCountDown';
+export * from './useHairline';

package/dist/es/hooks/useControllableValue.js

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { isFunction } from '../utils/validate';
+const hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function useControllableValue(props = {}, options = {}) {
+  const {
+    defaultValue,
+    defaultValuePropName = 'defaultValue',
+    valuePropName = 'value',
+    trigger = 'onChange'
+  } = options;
+  const propsRecord = props;
+  const isControlled = hasProp(props, valuePropName);
+  const value = propsRecord[valuePropName];
+  const [internalValue, setInternalValue] = useState(() => {
+    if (isControlled) {
+      return value;
+    }
+    if (hasProp(props, defaultValuePropName)) {
+      return propsRecord[defaultValuePropName];
+    }
+    return defaultValue;
+  });
+  const mergedValue = isControlled ? value : internalValue;
+  const handlerRef = useRef(propsRecord[trigger]);
+  useEffect(() => {
+    handlerRef.current = propsRecord[trigger];
+  }, [props, trigger]);
+  const triggerChange = useCallback((nextValue, ...args) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    const handler = handlerRef.current;
+    if (isFunction(handler)) {
+      ;
+      handler(nextValue, ...args);
+    }
+  }, [isControlled]);
+  return [mergedValue, triggerChange];
+}
+export default useControllableValue;

package/dist/es/hooks/useCountDown.js

@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { isNumber } from '../utils/validate';
+const parseTime = time => {
+  const total = Math.max(time, 0);
+  const days = Math.floor(total / (24 * 60 * 60 * 1000));
+  const hours = Math.floor(total % (24 * 60 * 60 * 1000) / (60 * 60 * 1000));
+  const minutes = Math.floor(total % (60 * 60 * 1000) / (60 * 1000));
+  const seconds = Math.floor(total % (60 * 1000) / 1000);
+  const milliseconds = total % 1000;
+  return {
+    total,
+    days,
+    hours,
+    minutes,
+    seconds,
+    milliseconds
+  };
+};
+const useCountDown = options => {
+  const {
+    time,
+    millisecond = false,
+    onChange,
+    onFinish
+  } = options;
+  const timeRef = useRef(time);
+  const millisecondRef = useRef(millisecond);
+  const onChangeRef = useRef(onChange);
+  const onFinishRef = useRef(onFinish);
+  timeRef.current = time;
+  millisecondRef.current = millisecond;
+  onChangeRef.current = onChange;
+  onFinishRef.current = onFinish;
+  const remainRef = useRef(Math.max(0, time));
+  const endTimeRef = useRef(Date.now() + remainRef.current);
+  const timerRef = useRef(null);
+  const countingRef = useRef(false);
+  const [current, setCurrent] = useState(() => parseTime(remainRef.current));
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const update = useCallback(remain => {
+    remainRef.current = remain;
+    const next = parseTime(remain);
+    setCurrent(next);
+    onChangeRef.current?.(next);
+    if (remain === 0) {
+      countingRef.current = false;
+      clearTimer();
+      onFinishRef.current?.();
+    }
+  }, [clearTimer]);
+  const tick = useCallback(() => {
+    if (!countingRef.current) return;
+    clearTimer();
+    const remain = Math.max(endTimeRef.current - Date.now(), 0);
+    update(remain);
+    if (remain <= 0) return;
+    const delay = millisecondRef.current ? Math.max(1, Math.min(30, remain)) : Math.max(1, Math.min(remain, remain % 1000 + 1));
+    timerRef.current = setTimeout(() => {
+      tick();
+    }, delay);
+  }, [clearTimer, update]);
+  const start = useCallback(() => {
+    if (countingRef.current || remainRef.current <= 0) return;
+    countingRef.current = true;
+    endTimeRef.current = Date.now() + remainRef.current;
+    tick();
+  }, [tick]);
+  const pause = useCallback(() => {
+    if (!countingRef.current) return;
+    countingRef.current = false;
+    remainRef.current = Math.max(endTimeRef.current - Date.now(), 0);
+    clearTimer();
+  }, [clearTimer]);
+  const reset = useCallback(newTime => {
+    pause();
+    const next = Math.max(0, isNumber(newTime) ? newTime : timeRef.current);
+    remainRef.current = next;
+    endTimeRef.current = Date.now() + next;
+    setCurrent(parseTime(next));
+  }, [pause]);
+  useEffect(() => () => clearTimer(), [clearTimer]);
+  return {
+    start,
+    pause,
+    reset,
+    current
+  };
+};
+export { parseTime };
+export default useCountDown;

package/dist/es/hooks/useHairline.js

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { createHairlineView } from '../utils/hairline';
+import { isNumber } from '../utils/validate';
+/**
+ * A hook to generate a hairline (separator) view that respects the container's padding.
+ * Useful for list items, cells, etc.
+ */
+export const useHairline = ({
+  show = true,
+  containerStyle,
+  color,
+  width,
+  defaultPaddingHorizontal = 0
+}) => {
+  return useMemo(() => {
+    if (!show) return null;
+    const flattened = StyleSheet.flatten(containerStyle);
+    const paddingHorizontal = isNumber(flattened?.paddingHorizontal) ? flattened.paddingHorizontal : undefined;
+    const resolveInset = (primary, secondary) => isNumber(primary) ? primary : isNumber(secondary) ? secondary : isNumber(paddingHorizontal) ? paddingHorizontal : defaultPaddingHorizontal;
+    const resolvedPadding = {
+      left: resolveInset(flattened?.paddingLeft, flattened?.paddingStart),
+      right: resolveInset(flattened?.paddingRight, flattened?.paddingEnd)
+    };
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.hairline, createHairlineView({
+        position: 'bottom',
+        color,
+        left: resolvedPadding.left,
+        right: resolvedPadding.right,
+        enabled: width > 0,
+        width
+      })]
+    });
+  }, [show, containerStyle, color, width, defaultPaddingHorizontal]);
+};
+const styles = StyleSheet.create({
+  hairline: {
+    position: 'absolute',
+    bottom: 0
+  }
+});

package/dist/es/hooks/usePresenceAnimation.js

@@ -0,0 +1,51 @@
+import { useEffect, useRef, useState } from 'react';
+import { Animated, Easing } from 'react-native';
+import { nativeDriverEnabled } from '../platform';
+export const usePresenceAnimation = (visible, {
+  duration = 180,
+  easing = Easing.out(Easing.cubic),
+  appear = false,
+  canAnimate = true
+} = {}) => {
+  const [mounted, setMounted] = useState(visible);
+  const animated = useRef(new Animated.Value(visible && !appear ? 1 : 0)).current;
+  const useNativeDriver = nativeDriverEnabled;
+  const animationIdRef = useRef(0);
+  useEffect(() => {
+    animationIdRef.current += 1;
+    const animationId = animationIdRef.current;
+    animated.stopAnimation();
+    if (visible) {
+      setMounted(true);
+      if (!canAnimate) {
+        animated.setValue(0);
+        return;
+      }
+      Animated.timing(animated, {
+        toValue: 1,
+        duration,
+        easing,
+        useNativeDriver
+      }).start();
+    } else {
+      if (!canAnimate) {
+        animated.setValue(0);
+        setMounted(false);
+        return;
+      }
+      Animated.timing(animated, {
+        toValue: 0,
+        duration,
+        easing,
+        useNativeDriver
+      }).start(() => {
+        if (animationId !== animationIdRef.current) return;
+        setMounted(false);
+      });
+    }
+  }, [animated, canAnimate, duration, easing, useNativeDriver, visible]);
+  return {
+    mounted,
+    animated
+  };
+};

package/dist/es/hooks/useSafeAreaPadding.js

@@ -0,0 +1,23 @@
+import { Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+export function useSafeAreaPadding(min) {
+  const insets = useSafeAreaInsets();
+  if (Platform.OS === 'web') {
+    const t = min?.top ?? 0,
+      b = min?.bottom ?? 0,
+      l = min?.left ?? 0,
+      r = min?.right ?? 0;
+    return {
+      paddingTop: `max(env(safe-area-inset-top, 0px), ${t}px)`,
+      paddingBottom: `max(env(safe-area-inset-bottom, 0px), ${b}px)`,
+      paddingLeft: `max(env(safe-area-inset-left, 0px), ${l}px)`,
+      paddingRight: `max(env(safe-area-inset-right, 0px), ${r}px)`
+    };
+  }
+  return {
+    paddingTop: Math.max(insets.top, min?.top ?? 0),
+    paddingBottom: Math.max(insets.bottom, min?.bottom ?? 0),
+    paddingLeft: Math.max(insets.left, min?.left ?? 0),
+    paddingRight: Math.max(insets.right, min?.right ?? 0)
+  };
+}

package/dist/es/index.js

@@ -1,73 +1,4 @@
-export { default as Button } from './button';
-export { default as Cell } from './cell';
-export { CellGroup } from './cell';
-export { default as Flex } from './flex';
-export { default as Space } from './space';
-export { default as Divider } from './divider';
-export { default as Tag } from './tag';
-export { Checkbox } from './checkbox';
-export { CheckboxGroup } from './checkbox';
-export { Radio } from './radio';
-export { RadioGroup } from './radio';
-export { default as Field } from './field';
-export { FieldGroup } from './field';
-export { default as Input } from './input';
-export { default as Form } from './form';
-export { default as Switch } from './switch';
-export { default as Badge } from './badge';
-export { default as Avatar } from './avatar';
-export { default as Grid } from './grid';
-export { default as Typography } from './typography';
-export { default as Loading } from './loading';
-export { default as Empty } from './empty';
-export { default as Image } from './image';
-export { useImageTokens } from './image';
-export { default as Progress } from './progress';
-export { default as Circle } from './circle';
-export { default as NoticeBar } from './notice-bar';
-export { default as Slider } from './slider';
-export { default as Stepper } from './stepper';
-export { default as Rate } from './rate';
-export { default as Selector } from './selector';
-export { default as Search } from './search';
-export { default as PasswordInput } from './password-input';
-export { default as Picker } from './picker';
-export { default as NumberKeyboard } from './number-keyboard';
-export { default as Collapse } from './collapse';
-export { default as Popup } from './popup';
-export { default as Overlay } from './overlay';
-export { default as Dialog } from './dialog';
-export { default as Toast } from './toast';
-export { default as Notify } from './notify';
-export { Portal } from './portal';
-export { PortalHost } from './portal';
-export { ConfigProvider } from './config-provider';
-export { useLocale } from './config-provider';
-export { zhCN } from './config-provider';
-export { enUS } from './config-provider';
-export { default as DatetimePicker } from './datetime-picker';
-export { default as Calendar } from './calendar';
-export { default as Cascader } from './cascader';
-export { default as Tabs } from './tabs';
-export { default as Tabbar } from './tabbar';
-export { default as NavBar } from './nav-bar';
-export { default as Sidebar } from './sidebar';
-export { default as IndexBar } from './index-bar';
-export { default as ActionSheet } from './action-sheet';
-export { default as ShareSheet } from './share-sheet';
-export { default as DropdownMenu } from './dropdown-menu';
-export { default as Area } from './area';
-export { default as List } from './list';
-export { default as PullRefresh } from './pull-refresh';
-export { default as ImagePreview } from './image-preview';
-export { default as Swiper } from './swiper';
-export { SwiperItem } from './swiper';
-export { SwiperPagIndicator } from './swiper';
-export { useSwiperPagIndicatorTokens } from './swiper';
-export { default as Uploader } from './uploader';
-export { useUploaderTokens } from './uploader';
-export { default as Skeleton } from './skeleton';
-export { useSkeletonTokens } from './skeleton';
-export { default as CountDown } from './count-down';
-export { default as WaterMark } from './water-mark';
-export { default as Pagination } from './pagination';
+export * from './components';
+export * from './design-system';
+export * from './hooks';
+export {};

package/dist/es/platform/animation.js

@@ -0,0 +1,2 @@
+import { Platform } from 'react-native';
+export const nativeDriverEnabled = Platform.OS !== 'web';

package/dist/es/platform/history.js

@@ -0,0 +1,7 @@
+export const addPopStateListener = listener => {
+  if (typeof window === 'undefined' || !window.addEventListener) return () => {};
+  window.addEventListener('popstate', listener);
+  return () => {
+    window.removeEventListener('popstate', listener);
+  };
+};

package/dist/es/platform/index.js

@@ -0,0 +1,6 @@
+export * from './animation';
+export * from './history';
+export * from './measure';
+export * from './runtime';
+export * from './scrollLock';
+export {};

package/dist/es/platform/measure.js

@@ -0,0 +1,48 @@
+import { isFunction } from '../utils/validate';
+export const measureInWindow = (node, callback) => {
+  if (!node) {
+    callback(null);
+    return;
+  }
+  try {
+    const maybeMeasureNode = node;
+    if (isFunction(maybeMeasureNode.measureInWindow)) {
+      maybeMeasureNode.measureInWindow((x, y, width, height) => {
+        if (![x, y, width, height].every(Number.isFinite)) {
+          callback(null);
+          return;
+        }
+        callback({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+      return;
+    }
+    const maybeDomNode = node;
+    if (isFunction(maybeDomNode.getBoundingClientRect)) {
+      const rect = maybeDomNode.getBoundingClientRect();
+      const x = rect?.left;
+      const y = rect?.top;
+      const width = rect?.width;
+      const height = rect?.height;
+      if (![x, y, width, height].every(Number.isFinite)) {
+        callback(null);
+        return;
+      }
+      callback({
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      });
+      return;
+    }
+  } catch (_error) {
+    callback(null);
+    return;
+  }
+  callback(null);
+};

package/dist/es/platform/runtime.js

@@ -0,0 +1,4 @@
+import { Platform } from 'react-native';
+export const isWeb = () => Platform.OS === 'web';
+export const isIOS = () => Platform.OS === 'ios';
+export const isAndroid = () => Platform.OS === 'android';

package/dist/es/platform/scrollLock.js

@@ -0,0 +1,16 @@
+let locked = false;
+let previousOverflow = '';
+export const setBodyScrollLocked = nextLocked => {
+  if (typeof document === 'undefined') return;
+  if (nextLocked && !locked) {
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    locked = true;
+    return;
+  }
+  if (!nextLocked && locked) {
+    document.body.style.overflow = previousOverflow;
+    locked = false;
+  }
+};
+export const isBodyScrollLocked = () => locked;

package/dist/es/utils/array.js

@@ -0,0 +1,5 @@
+export const toArray = value => {
+  if (value === undefined || value === null) return [];
+  if (Array.isArray(value)) return value;
+  return [value];
+};