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

package/dist/cjs/portal/PortalHost.js

@@ -0,0 +1,303 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.portalStore = exports.portalManager = exports.ensureGlobalPortalHost = exports.PortalHost = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../../utils");
+var _PortalContext = require("./PortalContext");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class PortalLayer extends _react().default.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().default.createElement(_reactNative().View, {
+      pointerEvents: "box-none",
+      style: [styles.portalLayer, fixed && webFixedStyle],
+      collapsable: false
+    }, entries.map(entry => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      key: entry.key,
+      pointerEvents: "box-none",
+      collapsable: false,
+      style: [styles.portalEntry, (0, _utils.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 (!(0, _utils.isNumber)(value)) continue;
+      max = (0, _utils.isNumber)(max) ? Math.max(max, value) : value;
+    }
+    return max;
+  }
+  if (! /*#__PURE__*/_react().default.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 : _reactNative().StyleSheet.flatten(style);
+    const zIndex = flattened?.zIndex;
+    if ((0, _utils.isNumber)(zIndex)) {
+      max = zIndex;
+    }
+  }
+  const childMax = getMaxZIndex(element.props.children);
+  if (!(0, _utils.isNumber)(childMax)) return max;
+  if (!(0, _utils.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
+};
+class PortalHost extends _react().default.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().default.createElement(_PortalContext.PortalContext.Provider, {
+      value: globalManager
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: styles.host,
+      collapsable: false
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: styles.root,
+      collapsable: false,
+      pointerEvents: "box-none"
+    }, children), /*#__PURE__*/_react().default.createElement(PortalLayer, {
+      ref: this.setLayerRef,
+      fixed: fixed
+    })));
+  }
+}
+exports.PortalHost = PortalHost;
+const styles = _reactNative().StyleSheet.create({
+  host: {
+    position: 'relative',
+    flex: 1
+  },
+  root: {
+    flex: 1
+  },
+  portalLayer: {
+    ..._reactNative().StyleSheet.absoluteFillObject
+  },
+  portalEntry: {
+    ..._reactNative().StyleSheet.absoluteFillObject
+  }
+});
+const webFixedStyle = _reactNative().Platform.OS === 'web' ? {
+  position: 'fixed'
+} : undefined;
+let autoHostContainer = null;
+let autoHostRoot = null;
+let hostPromise = null;
+let teardownScheduled = false;
+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().default.createElement(PortalHost, {
+      fixed: true
+    }));
+    maybeTeardownAutoHost();
+  }).catch(error => {
+    teardownAutoHost();
+    if (typeof __DEV__ !== 'undefined' && __DEV__ || isJestEnv) {
+      console.warn('[Portal] 无法自动挂载 PortalHost:', error);
+    }
+  }).finally(() => {
+    hostPromise = null;
+  });
+  return hostPromise;
+};
+exports.ensureGlobalPortalHost = ensureGlobalPortalHost;
+const portalManager = exports.portalManager = globalManager;
+const portalStore = exports.portalStore = {
+  clear: clearPortals,
+  getSnapshot: () => getEntriesSnapshot(),
+  hasHosts: () => hostStack.length > 0
+};

package/dist/cjs/portal/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _Portal.Portal;
+  }
+});
+Object.defineProperty(exports, "PortalHost", {
+  enumerable: true,
+  get: function () {
+    return _PortalHost.PortalHost;
+  }
+});
+Object.defineProperty(exports, "portalManager", {
+  enumerable: true,
+  get: function () {
+    return _PortalHost.portalManager;
+  }
+});
+var _PortalHost = require("./PortalHost");
+var _Portal = require("./Portal");

package/dist/cjs/progress/Progress.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Progress = 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 _utils = require("../../utils");
+var _tokens = require("./tokens");
+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); }
+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); }
+const GRADIENT_REGEX = /linear-gradient|radial-gradient|conic-gradient/i;
+const Progress = exports.Progress = /*#__PURE__*/(0, _react().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 = (0, _tokens.useProgressTokens)(tokensOverride);
+  const percentage = (0, _utils.clamp)((0, _utils.parsePercentage)(percentageProp ?? tokens.defaults.percentage), 0, 100);
+  const height = (0, _utils.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 = _reactNative().Platform.OS === 'web' && (0, _utils.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 = (0, _react().useRef)(new (_reactNative().Animated.Value)(percentage)).current;
+  (0, _react().useEffect)(() => {
+    if (shouldAnimate && duration > 0) {
+      const animation = _reactNative().Animated.timing(animatedValue, {
+        toValue: percentage,
+        duration,
+        useNativeDriver: false
+      });
+      animation.start();
+      return () => animation.stop();
+    } else {
+      animatedValue.setValue(percentage);
+    }
+  }, [percentage, shouldAnimate, duration, animatedValue]);
+  const [layout, setLayout] = (0, _react().useState)({
+    track: 0,
+    pivot: 0
+  });
+  const onTrackLayout = (0, _react().useCallback)(e => {
+    const width = e.nativeEvent.layout.width;
+    setLayout(prev => prev.track === width ? prev : {
+      ...prev,
+      track: width
+    });
+  }, []);
+  const onPivotLayout = (0, _react().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().default.createElement(_reactNative().Animated.View, {
+      style: [pivotContainerStyle, transformStyle],
+      pointerEvents: "none",
+      onLayout: onPivotLayout
+    }, (0, _utils.isText)(pivotContent) ? /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_reactNative().View, _extends({
+    style: style,
+    accessibilityRole: "progressbar",
+    accessibilityValue: {
+      min: 0,
+      max: 100,
+      now: percentage
+    }
+  }, rest), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: trackStyle,
+    onLayout: hasPivot ? onTrackLayout : undefined
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+    style: [tokens.layout.indicator, {
+      height,
+      backgroundColor: resolvedIndicatorColor,
+      borderRadius: height / 2,
+      ...(isGradient && {
+        backgroundImage: color
+      })
+    }, indicatorStyle, {
+      width: indicatorWidth
+    }]
+  })), pivotNode);
+});
+Progress.displayName = 'Progress';
+var _default = exports.default = Progress;

package/dist/cjs/progress/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Progress = require("./Progress");
+var _default = exports.default = _Progress.Progress;

package/dist/cjs/progress/tokens.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProgressTokens = exports.createProgressTokens = void 0;
+var _designSystem = require("../../design-system");
+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
+    }
+  };
+};
+exports.createProgressTokens = createProgressTokens;
+const useProgressTokens = exports.useProgressTokens = (0, _designSystem.createComponentTokensHook)('progress', createProgressTokens);