react-native-system-ui 0.0.2 → 0.0.3

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

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGestureScroll = exports.default = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+const DEFAULT_THROTTLE = 16;
+const VELOCITY_NORMALIZER = 1000; // convert delta/ms to px per second
+
+const useGestureScroll = (options = {}) => {
+  const {
+    axis = 'y',
+    scrollEventThrottle = DEFAULT_THROTTLE,
+    onScroll,
+    onScrollBeginDrag,
+    onScrollEndDrag,
+    onMomentumScrollBegin,
+    onMomentumScrollEnd
+  } = options;
+  const scrollValue = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const lastOffsetRef = (0, _react().useRef)(0);
+  const lastTimestampRef = (0, _react().useRef)(null);
+  const velocityRef = (0, _react().useRef)(0);
+  const directionRef = (0, _react().useRef)(null);
+  const [direction, setDirection] = (0, _react().useState)(null);
+  const [isDragging, setIsDragging] = (0, _react().useState)(false);
+  const [isMomentum, setIsMomentum] = (0, _react().useState)(false);
+  const updateDirection = (0, _react().useCallback)(next => {
+    if (directionRef.current !== next) {
+      directionRef.current = next;
+      setDirection(next);
+    }
+  }, []);
+  const handleScroll = (0, _react().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 = (0, _react().useMemo)(() => {
+    const mapping = axis === 'x' ? [{
+      nativeEvent: {
+        contentOffset: {
+          x: scrollValue
+        }
+      }
+    }] : [{
+      nativeEvent: {
+        contentOffset: {
+          y: scrollValue
+        }
+      }
+    }];
+    return _reactNative().Animated.event(mapping, {
+      useNativeDriver: false,
+      listener: handleScroll
+    });
+  }, [axis, handleScroll, scrollValue]);
+  const handleScrollBeginDrag = (0, _react().useCallback)(event => {
+    setIsDragging(true);
+    onScrollBeginDrag?.(event);
+  }, [onScrollBeginDrag]);
+  const handleScrollEndDrag = (0, _react().useCallback)(event => {
+    setIsDragging(false);
+    onScrollEndDrag?.(event);
+  }, [onScrollEndDrag]);
+  const handleMomentumBegin = (0, _react().useCallback)(event => {
+    setIsMomentum(true);
+    onMomentumScrollBegin?.(event);
+  }, [onMomentumScrollBegin]);
+  const handleMomentumEnd = (0, _react().useCallback)(event => {
+    setIsMomentum(false);
+    onMomentumScrollEnd?.(event);
+  }, [onMomentumScrollEnd]);
+  const resetOffset = (0, _react().useCallback)((value = 0) => {
+    scrollValue.stopAnimation();
+    scrollValue.setValue(value);
+    lastOffsetRef.current = value;
+    lastTimestampRef.current = null;
+    velocityRef.current = 0;
+    updateDirection(null);
+  }, [scrollValue, updateDirection]);
+  const getVelocity = (0, _react().useCallback)(() => velocityRef.current, []);
+  const getCurrentOffset = (0, _react().useCallback)(() => lastOffsetRef.current, []);
+  const scrollProps = (0, _react().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
+  };
+};
+exports.useGestureScroll = useGestureScroll;
+var _default = exports.default = useGestureScroll;

package/dist/cjs/hooks/index.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useControllableValue: true,
+  useCountDown: true
+};
+Object.defineProperty(exports, "useControllableValue", {
+  enumerable: true,
+  get: function () {
+    return _useControllableValue.default;
+  }
+});
+Object.defineProperty(exports, "useCountDown", {
+  enumerable: true,
+  get: function () {
+    return _useCountDown.default;
+  }
+});
+var _usePresenceAnimation = require("./usePresenceAnimation");
+Object.keys(_usePresenceAnimation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _usePresenceAnimation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _usePresenceAnimation[key];
+    }
+  });
+});
+var _useSafeAreaPadding = require("./useSafeAreaPadding");
+Object.keys(_useSafeAreaPadding).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useSafeAreaPadding[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useSafeAreaPadding[key];
+    }
+  });
+});
+var _aria = require("./aria");
+Object.keys(_aria).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _aria[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _aria[key];
+    }
+  });
+});
+var _gesture = require("./gesture");
+Object.keys(_gesture).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _gesture[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gesture[key];
+    }
+  });
+});
+var _useControllableValue = _interopRequireDefault(require("./useControllableValue"));
+var _useCountDown = _interopRequireDefault(require("./useCountDown"));
+var _useHairline = require("./useHairline");
+Object.keys(_useHairline).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useHairline[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useHairline[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/hooks/useControllableValue.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _validate = require("../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] = (0, _react().useState)(() => {
+    if (isControlled) {
+      return value;
+    }
+    if (hasProp(props, defaultValuePropName)) {
+      return propsRecord[defaultValuePropName];
+    }
+    return defaultValue;
+  });
+  const mergedValue = isControlled ? value : internalValue;
+  const handlerRef = (0, _react().useRef)(propsRecord[trigger]);
+  (0, _react().useEffect)(() => {
+    handlerRef.current = propsRecord[trigger];
+  }, [props, trigger]);
+  const triggerChange = (0, _react().useCallback)((nextValue, ...args) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    const handler = handlerRef.current;
+    if ((0, _validate.isFunction)(handler)) {
+      ;
+      handler(nextValue, ...args);
+    }
+  }, [isControlled]);
+  return [mergedValue, triggerChange];
+}
+var _default = exports.default = useControllableValue;

package/dist/cjs/hooks/useCountDown.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseTime = exports.default = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _validate = require("../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
+  };
+};
+exports.parseTime = parseTime;
+const useCountDown = options => {
+  const {
+    time,
+    millisecond = false,
+    onChange,
+    onFinish
+  } = options;
+  const timeRef = (0, _react().useRef)(time);
+  const millisecondRef = (0, _react().useRef)(millisecond);
+  const onChangeRef = (0, _react().useRef)(onChange);
+  const onFinishRef = (0, _react().useRef)(onFinish);
+  timeRef.current = time;
+  millisecondRef.current = millisecond;
+  onChangeRef.current = onChange;
+  onFinishRef.current = onFinish;
+  const remainRef = (0, _react().useRef)(Math.max(0, time));
+  const endTimeRef = (0, _react().useRef)(Date.now() + remainRef.current);
+  const timerRef = (0, _react().useRef)(null);
+  const countingRef = (0, _react().useRef)(false);
+  const [current, setCurrent] = (0, _react().useState)(() => parseTime(remainRef.current));
+  const clearTimer = (0, _react().useCallback)(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const update = (0, _react().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 = (0, _react().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 = (0, _react().useCallback)(() => {
+    if (countingRef.current || remainRef.current <= 0) return;
+    countingRef.current = true;
+    endTimeRef.current = Date.now() + remainRef.current;
+    tick();
+  }, [tick]);
+  const pause = (0, _react().useCallback)(() => {
+    if (!countingRef.current) return;
+    countingRef.current = false;
+    remainRef.current = Math.max(endTimeRef.current - Date.now(), 0);
+    clearTimer();
+  }, [clearTimer]);
+  const reset = (0, _react().useCallback)(newTime => {
+    pause();
+    const next = Math.max(0, (0, _validate.isNumber)(newTime) ? newTime : timeRef.current);
+    remainRef.current = next;
+    endTimeRef.current = Date.now() + next;
+    setCurrent(parseTime(next));
+  }, [pause]);
+  (0, _react().useEffect)(() => () => clearTimer(), [clearTimer]);
+  return {
+    start,
+    pause,
+    reset,
+    current
+  };
+};
+var _default = exports.default = useCountDown;

package/dist/cjs/hooks/useHairline.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHairline = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _hairline = require("../utils/hairline");
+var _validate = require("../utils/validate");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * A hook to generate a hairline (separator) view that respects the container's padding.
+ * Useful for list items, cells, etc.
+ */
+const useHairline = ({
+  show = true,
+  containerStyle,
+  color,
+  width,
+  defaultPaddingHorizontal = 0
+}) => {
+  return (0, _react().useMemo)(() => {
+    if (!show) return null;
+    const flattened = _reactNative().StyleSheet.flatten(containerStyle);
+    const paddingHorizontal = (0, _validate.isNumber)(flattened?.paddingHorizontal) ? flattened.paddingHorizontal : undefined;
+    const resolveInset = (primary, secondary) => (0, _validate.isNumber)(primary) ? primary : (0, _validate.isNumber)(secondary) ? secondary : (0, _validate.isNumber)(paddingHorizontal) ? paddingHorizontal : defaultPaddingHorizontal;
+    const resolvedPadding = {
+      left: resolveInset(flattened?.paddingLeft, flattened?.paddingStart),
+      right: resolveInset(flattened?.paddingRight, flattened?.paddingEnd)
+    };
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [styles.hairline, (0, _hairline.createHairlineView)({
+        position: 'bottom',
+        color,
+        left: resolvedPadding.left,
+        right: resolvedPadding.right,
+        enabled: width > 0,
+        width
+      })]
+    });
+  }, [show, containerStyle, color, width, defaultPaddingHorizontal]);
+};
+exports.useHairline = useHairline;
+const styles = _reactNative().StyleSheet.create({
+  hairline: {
+    position: 'absolute',
+    bottom: 0
+  }
+});

package/dist/cjs/hooks/usePresenceAnimation.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePresenceAnimation = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _platform = require("../platform");
+const usePresenceAnimation = (visible, {
+  duration = 180,
+  easing = _reactNative().Easing.out(_reactNative().Easing.cubic),
+  appear = false
+} = {}) => {
+  const [mounted, setMounted] = (0, _react().useState)(visible);
+  const animated = (0, _react().useRef)(new (_reactNative().Animated.Value)(visible && !appear ? 1 : 0)).current;
+  const useNativeDriver = _platform.nativeDriverEnabled;
+  const animationIdRef = (0, _react().useRef)(0);
+  (0, _react().useEffect)(() => {
+    animationIdRef.current += 1;
+    const animationId = animationIdRef.current;
+    animated.stopAnimation();
+    if (visible) {
+      setMounted(true);
+      _reactNative().Animated.timing(animated, {
+        toValue: 1,
+        duration,
+        easing,
+        useNativeDriver
+      }).start();
+    } else {
+      _reactNative().Animated.timing(animated, {
+        toValue: 0,
+        duration,
+        easing,
+        useNativeDriver
+      }).start(() => {
+        if (animationId !== animationIdRef.current) return;
+        setMounted(false);
+      });
+    }
+  }, [animated, duration, easing, useNativeDriver, visible]);
+  return {
+    mounted,
+    animated
+  };
+};
+exports.usePresenceAnimation = usePresenceAnimation;

package/dist/cjs/hooks/useSafeAreaPadding.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSafeAreaPadding = useSafeAreaPadding;
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNativeSafeAreaContext() {
+  const data = require("react-native-safe-area-context");
+  _reactNativeSafeAreaContext = function () {
+    return data;
+  };
+  return data;
+}
+function useSafeAreaPadding(min) {
+  const insets = (0, _reactNativeSafeAreaContext().useSafeAreaInsets)();
+  if (_reactNative().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)
+  };
+}