react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/portal/PortalHost.js

@@ -0,0 +1,282 @@
+import React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { isNumber } from '../../utils';
+import { PortalContext } from './PortalContext';
+class PortalLayer extends React.PureComponent {
+  state = {
+    entries: []
+  };
+  setEntries = entries => {
+    this.setState(prev => prev.entries === entries ? null : {
+      entries
+    });
+  };
+  render() {
+    const {
+      fixed
+    } = this.props;
+    const {
+      entries
+    } = this.state;
+    return /*#__PURE__*/React.createElement(View, {
+      pointerEvents: "box-none",
+      style: [styles.portalLayer, fixed && webFixedStyle],
+      collapsable: false
+    }, entries.map(entry => /*#__PURE__*/React.createElement(View, {
+      key: entry.key,
+      pointerEvents: "box-none",
+      collapsable: false,
+      style: [styles.portalEntry, isNumber(entry.zIndex) && {
+        zIndex: entry.zIndex
+      }]
+    }, entry.children)));
+  }
+}
+const getMaxZIndex = node => {
+  if (!node) return undefined;
+  if (Array.isArray(node)) {
+    let max;
+    for (const child of node) {
+      const value = getMaxZIndex(child);
+      if (!isNumber(value)) continue;
+      max = isNumber(max) ? Math.max(max, value) : value;
+    }
+    return max;
+  }
+  if (! /*#__PURE__*/React.isValidElement(node)) return undefined;
+  const element = node;
+  const style = element.props.style;
+  let max;
+  if (style && typeof style !== 'function') {
+    const flattened = typeof style === 'object' && !Array.isArray(style) && style !== null ? style : StyleSheet.flatten(style);
+    const zIndex = flattened?.zIndex;
+    if (isNumber(zIndex)) {
+      max = zIndex;
+    }
+  }
+  const childMax = getMaxZIndex(element.props.children);
+  if (!isNumber(childMax)) return max;
+  if (!isNumber(max)) return childMax;
+  return Math.max(max, childMax);
+};
+const hostStack = [];
+const portalEntries = new Map();
+const emptyEntries = [];
+let nextPortalKey = 1;
+let warnedNative = false;
+const isJestEnv = typeof globalThis !== 'undefined' && globalThis?.process?.env?.JEST_ENV === 'true';
+let snapshotDirty = true;
+let snapshotCache = emptyEntries;
+const markSnapshotDirty = () => {
+  snapshotDirty = true;
+};
+const getEntriesSnapshot = () => {
+  if (!snapshotDirty) return snapshotCache;
+  snapshotDirty = false;
+  snapshotCache = portalEntries.size === 0 ? emptyEntries : Array.from(portalEntries.values());
+  return snapshotCache;
+};
+const syncCurrentHost = () => {
+  const currentHost = hostStack[hostStack.length - 1];
+  if (currentHost) {
+    currentHost.setEntries(getEntriesSnapshot());
+  }
+};
+const setHostPresence = (host, present) => {
+  if (present) {
+    hostStack.push(host);
+    syncCurrentHost();
+    maybeTeardownAutoHost();
+    return;
+  }
+  const index = hostStack.lastIndexOf(host);
+  if (index >= 0) {
+    hostStack.splice(index, 1);
+  }
+  if (hostStack.length === 0) {
+    clearPortals();
+    return;
+  }
+  syncCurrentHost();
+  maybeTeardownAutoHost();
+};
+const mountPortal = (children, key) => {
+  const resolvedKey = key ?? nextPortalKey++;
+  portalEntries.set(resolvedKey, {
+    key: resolvedKey,
+    children,
+    zIndex: getMaxZIndex(children)
+  });
+  markSnapshotDirty();
+  syncCurrentHost();
+  return resolvedKey;
+};
+const updatePortal = (key, children) => {
+  const prev = portalEntries.get(key);
+  if (prev) {
+    prev.children = children;
+    prev.zIndex = getMaxZIndex(children);
+  } else {
+    portalEntries.set(key, {
+      key,
+      children,
+      zIndex: getMaxZIndex(children)
+    });
+  }
+  markSnapshotDirty();
+  syncCurrentHost();
+};
+const unmountPortal = key => {
+  if (portalEntries.delete(key)) {
+    markSnapshotDirty();
+    syncCurrentHost();
+    maybeTeardownAutoHost();
+  }
+};
+const scheduleTeardown = typeof queueMicrotask === 'function' ? queueMicrotask : task => {
+  Promise.resolve().then(task);
+};
+const teardownAutoHost = () => {
+  if (!autoHostRoot || teardownScheduled) return;
+  teardownScheduled = true;
+  scheduleTeardown(() => {
+    teardownScheduled = false;
+    if (!autoHostRoot) return;
+    if (hostStack.length > 1 || portalEntries.size === 0) {
+      const root = autoHostRoot;
+      const container = autoHostContainer;
+      autoHostRoot = null;
+      autoHostContainer = null;
+      root.unmount();
+      if (container?.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+    }
+  });
+};
+const maybeTeardownAutoHost = () => {
+  if (!autoHostRoot) return;
+  if (hostStack.length > 1 || portalEntries.size === 0) {
+    teardownAutoHost();
+  }
+};
+const clearPortals = () => {
+  if (portalEntries.size > 0) {
+    portalEntries.clear();
+    markSnapshotDirty();
+    syncCurrentHost();
+  }
+  warnedNative = false;
+  maybeTeardownAutoHost();
+};
+const globalManager = {
+  mount: mountPortal,
+  update: updatePortal,
+  unmount: unmountPortal
+};
+export class PortalHost extends React.Component {
+  layer = null;
+  componentWillUnmount() {
+    if (this.layer) {
+      setHostPresence(this.layer, false);
+      this.layer = null;
+    }
+  }
+  setLayerRef = layer => {
+    if (this.layer === layer) return;
+    if (this.layer) {
+      setHostPresence(this.layer, false);
+    }
+    this.layer = layer;
+    if (layer) {
+      setHostPresence(layer, true);
+    }
+  };
+  render() {
+    const {
+      children,
+      fixed
+    } = this.props;
+    return /*#__PURE__*/React.createElement(PortalContext.Provider, {
+      value: globalManager
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.host,
+      collapsable: false
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.root,
+      collapsable: false,
+      pointerEvents: "box-none"
+    }, children), /*#__PURE__*/React.createElement(PortalLayer, {
+      ref: this.setLayerRef,
+      fixed: fixed
+    })));
+  }
+}
+const styles = StyleSheet.create({
+  host: {
+    position: 'relative',
+    flex: 1
+  },
+  root: {
+    flex: 1
+  },
+  portalLayer: {
+    ...StyleSheet.absoluteFillObject
+  },
+  portalEntry: {
+    ...StyleSheet.absoluteFillObject
+  }
+});
+const webFixedStyle = Platform.OS === 'web' ? {
+  position: 'fixed'
+} : undefined;
+let autoHostContainer = null;
+let autoHostRoot = null;
+let hostPromise = null;
+let teardownScheduled = false;
+export const ensureGlobalPortalHost = () => {
+  if (hostStack.length > 0) {
+    return Promise.resolve();
+  }
+  if (typeof document === 'undefined') {
+    if (!warnedNative) {
+      warnedNative = true;
+      if (typeof __DEV__ !== 'undefined' && __DEV__ || isJestEnv) {
+        console.warn('[Portal] 请在根节点挂载 <PortalHost> 或 <ConfigProvider> 以启用静态组件能力。');
+      }
+    }
+    return Promise.resolve();
+  }
+  if (autoHostRoot) return Promise.resolve();
+  if (hostPromise) return hostPromise;
+  hostPromise = Promise.resolve().then(async () => {
+    if (hostStack.length > 0 || autoHostRoot) return;
+    const doc = document;
+    const {
+      createRoot
+    } = await import('react-dom/client');
+    if (hostStack.length > 0 || autoHostRoot) return;
+    autoHostContainer = doc.createElement('div');
+    autoHostContainer.setAttribute('data-rnsu-portal-host', 'true');
+    doc.body.appendChild(autoHostContainer);
+    autoHostRoot = createRoot(autoHostContainer);
+    autoHostRoot.render(/*#__PURE__*/React.createElement(PortalHost, {
+      fixed: true
+    }));
+    maybeTeardownAutoHost();
+  }).catch(error => {
+    teardownAutoHost();
+    if (typeof __DEV__ !== 'undefined' && __DEV__ || isJestEnv) {
+      console.warn('[Portal] 无法自动挂载 PortalHost:', error);
+    }
+  }).finally(() => {
+    hostPromise = null;
+  });
+  return hostPromise;
+};
+export const portalManager = globalManager;
+export const portalStore = {
+  clear: clearPortals,
+  getSnapshot: () => getEntriesSnapshot(),
+  hasHosts: () => hostStack.length > 0
+};

package/dist/es/portal/index.js

@@ -0,0 +1,3 @@
+export { PortalHost } from './PortalHost';
+export { Portal } from './Portal';
+export { portalManager } from './PortalHost';

package/dist/es/progress/Progress.js

@@ -0,0 +1,154 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { Animated, Platform, Text, View } from 'react-native';
+import { clamp, parseNumberLike, parsePercentage, isString, isText } from '../../utils';
+import { useProgressTokens } from './tokens';
+const GRADIENT_REGEX = /linear-gradient|radial-gradient|conic-gradient/i;
+export const Progress = /*#__PURE__*/memo(props => {
+  const {
+    tokensOverride,
+    percentage: percentageProp,
+    strokeWidth,
+    color,
+    trackColor,
+    pivotText,
+    pivotColor,
+    textColor,
+    inactive: inactiveProp,
+    showPivot: showPivotProp,
+    animated,
+    transition: transitionProp,
+    animationDuration: animationDurationProp,
+    style,
+    pivotStyle,
+    indicatorStyle,
+    ...rest
+  } = props;
+  const tokens = useProgressTokens(tokensOverride);
+  const percentage = clamp(parsePercentage(percentageProp ?? tokens.defaults.percentage), 0, 100);
+  const height = parseNumberLike(strokeWidth, tokens.sizing.height) ?? tokens.sizing.height;
+  const inactive = inactiveProp ?? tokens.defaults.inactive;
+  const showPivot = showPivotProp ?? tokens.defaults.showPivot;
+  const shouldAnimate = (animated ?? transitionProp ?? tokens.defaults.transition) && !inactive;
+  const duration = Math.max(0, animationDurationProp ?? tokens.defaults.animationDuration);
+  const isGradient = Platform.OS === 'web' && isString(color) && GRADIENT_REGEX.test(color);
+  const resolvedTrackColor = trackColor ?? tokens.colors.track;
+  const resolvedIndicatorColor = inactive ? tokens.colors.track : !isGradient ? color ?? tokens.colors.indicator : undefined;
+  const resolvedPivotBg = pivotColor ?? (isGradient ? inactive ? tokens.colors.track : tokens.colors.indicator : resolvedIndicatorColor);
+  const resolvedPivotTextColor = textColor ?? tokens.colors.pivotText;
+  const pivotContent = pivotText ?? `${percentage}%`;
+  const hasPivot = showPivot && pivotContent !== null && pivotContent !== false;
+  const animatedValue = useRef(new Animated.Value(percentage)).current;
+  useEffect(() => {
+    if (shouldAnimate && duration > 0) {
+      const animation = Animated.timing(animatedValue, {
+        toValue: percentage,
+        duration,
+        useNativeDriver: false
+      });
+      animation.start();
+      return () => animation.stop();
+    } else {
+      animatedValue.setValue(percentage);
+    }
+  }, [percentage, shouldAnimate, duration, animatedValue]);
+  const [layout, setLayout] = useState({
+    track: 0,
+    pivot: 0
+  });
+  const onTrackLayout = useCallback(e => {
+    const width = e.nativeEvent.layout.width;
+    setLayout(prev => prev.track === width ? prev : {
+      ...prev,
+      track: width
+    });
+  }, []);
+  const onPivotLayout = useCallback(e => {
+    const width = e.nativeEvent.layout.width;
+    setLayout(prev => prev.pivot === width ? prev : {
+      ...prev,
+      pivot: width
+    });
+  }, []);
+  const trackStyle = [tokens.layout.track, {
+    height,
+    backgroundColor: resolvedTrackColor,
+    borderRadius: height / 2
+  }];
+  let pivotNode = null;
+  if (hasPivot) {
+    const {
+      track: trackW,
+      pivot: pivotW
+    } = layout;
+    const pivotContainerStyle = [tokens.layout.pivot, {
+      bottom: height + tokens.sizing.pivotPaddingVertical * 2,
+      backgroundColor: resolvedPivotBg,
+      paddingHorizontal: tokens.sizing.pivotPaddingHorizontal,
+      paddingVertical: tokens.sizing.pivotPaddingVertical,
+      borderRadius: height,
+      opacity: trackW > 0 ? 1 : 0
+    }];
+    let transformStyle = null;
+    if (trackW > 0 && pivotW > 0) {
+      const p1 = pivotW / 2 / trackW * 100;
+      const p2 = (trackW - pivotW / 2) / trackW * 100;
+      if (p1 < p2) {
+        transformStyle = {
+          transform: [{
+            translateX: animatedValue.interpolate({
+              inputRange: [0, p1, p2, 100],
+              outputRange: [0, 0, trackW - pivotW, trackW - pivotW],
+              extrapolate: 'clamp'
+            })
+          }]
+        };
+      } else {
+        transformStyle = {
+          transform: [{
+            translateX: (trackW - pivotW) / 2
+          }]
+        };
+      }
+    }
+    pivotNode = /*#__PURE__*/React.createElement(Animated.View, {
+      style: [pivotContainerStyle, transformStyle],
+      pointerEvents: "none",
+      onLayout: onPivotLayout
+    }, isText(pivotContent) ? /*#__PURE__*/React.createElement(Text, {
+      style: [tokens.layout.pivotText, {
+        color: resolvedPivotTextColor,
+        fontSize: tokens.typography.pivotFontSize
+      }, pivotStyle]
+    }, pivotContent) : pivotContent);
+  }
+  const indicatorWidth = animatedValue.interpolate({
+    inputRange: [0, 100],
+    outputRange: ['0%', '100%']
+  });
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: style,
+    accessibilityRole: "progressbar",
+    accessibilityValue: {
+      min: 0,
+      max: 100,
+      now: percentage
+    }
+  }, rest), /*#__PURE__*/React.createElement(View, {
+    style: trackStyle,
+    onLayout: hasPivot ? onTrackLayout : undefined
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [tokens.layout.indicator, {
+      height,
+      backgroundColor: resolvedIndicatorColor,
+      borderRadius: height / 2,
+      ...(isGradient && {
+        backgroundImage: color
+      })
+    }, indicatorStyle, {
+      width: indicatorWidth
+    }]
+  })), pivotNode);
+});
+Progress.displayName = 'Progress';
+export default Progress;

package/dist/es/progress/index.js

@@ -0,0 +1,2 @@
+import { Progress } from './Progress';
+export default Progress;

package/dist/es/progress/tokens.js

@@ -0,0 +1,44 @@
+import { createComponentTokensHook } from '../../design-system';
+export const createProgressTokens = foundations => {
+  const onPrimary = foundations.palette.primary.foreground ?? '#ffffff';
+  return {
+    defaults: {
+      percentage: 0,
+      inactive: false,
+      showPivot: true,
+      transition: true,
+      animationDuration: 300
+    },
+    layout: {
+      track: {
+        overflow: 'hidden'
+      },
+      indicator: {
+        position: 'absolute',
+        left: 0,
+        top: 0
+      },
+      pivot: {
+        position: 'absolute'
+      },
+      pivotText: {
+        textAlign: 'center',
+        includeFontPadding: false
+      }
+    },
+    colors: {
+      track: foundations.palette.default[100],
+      indicator: foundations.palette.primary[500],
+      pivotText: onPrimary
+    },
+    typography: {
+      pivotFontSize: foundations.fontSize.xs
+    },
+    sizing: {
+      height: 4,
+      pivotPaddingHorizontal: foundations.spacing.xs,
+      pivotPaddingVertical: 2
+    }
+  };
+};
+export const useProgressTokens = createComponentTokensHook('progress', createProgressTokens);