@unif/react-native-design 0.27.1 → 0.29.0

package/src/components/ui/Ribbon/styles.ts

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+import { fw, radius, space, type as t, type ColorTokens } from '../../../theme';
+import type { RibbonTone } from './types';
+
+export const makeStyles = (_c: ColorTokens) =>
+  StyleSheet.create({
+    root: { position: 'relative' },
+    visual: { alignItems: 'flex-end' },
+    bar: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: space['3'],
+      borderTopLeftRadius: radius.xs,
+      borderBottomLeftRadius: radius.xs,
+    },
+    text: { fontSize: t.micro, fontWeight: fw.medium },
+    fold: {
+      borderRightColor: 'transparent',
+      borderBottomColor: 'transparent',
+    },
+  });
+
+export function paletteFor(
+  tone: RibbonTone,
+  c: ColorTokens
+): { bg: string; fg: string; fold: string } {
+  switch (tone) {
+    case 'brand':
+      return { bg: c.primary, fg: c.onPrimary, fold: c.primaryPressed };
+    case 'danger':
+      return { bg: c.error, fg: c.onError, fold: c.error };
+  }
+}

package/src/components/ui/Ribbon/types.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type RibbonTone = 'brand' | 'danger';
+
+export type RibbonProps = {
+  /** 右上缎带的可见文案 */
+  label: string;
+  /** 语义色，默认 'brand' */
+  tone?: RibbonTone;
+  /** 被缎带标记的内容 */
+  children: ReactNode;
+  /** 可选读屏文案；不传时缎带只作为装饰，避免与内容重复播报 */
+  accessibilityLabel?: string;
+  /** 外层布局样式 */
+  style?: StyleProp<ViewStyle>;
+  /** E2E / 测试定位 */
+  testID?: string;
+};

package/src/components/ui/Stepper/Stepper.tsx

@@ -11,6 +11,7 @@ import { childTestID } from '../../../utils/testID';
 import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
 import { normalizeNonBlankText } from '../shared/accessibilityName';
 import { getStepperValueAccessibilityProps } from './accessibility';
+import { resolveStepperDisplayValue } from './displayValue';
 import { resolveStepperLayout } from './layout';
 import { nextStepperValue, normalizeStepper } from './normalizeStepper';
 import { StepperPressable } from './StepperPressable';
@@ -37,6 +38,7 @@ export function Stepper({
   max,
   step,
   size = 'md',
+  formatValue,
   disabled = false,
   testID,
 }: StepperProps): React.JSX.Element {
@@ -44,7 +46,7 @@ export function Stepper({
   const fontScale = useFontScale();
   const dims = sizingFor(size);
   const valueFontSize = scaleFontMetric(dims.fs, fontScale);
-  const layout = resolveStepperLayout(dims);
+  const layout = resolveStepperLayout(dims, { compact: size === 'xs' });
   const accessibleName = normalizeNonBlankText(accessibilityLabel);
   const hasBlankLabel = accessibleName === undefined;
   const normalized = normalizeStepper({
@@ -56,6 +58,7 @@ export function Stepper({
   });
   const { safeMin, safeStep, safeValue, canDecrement, canIncrement } =
     normalized;
+  const displayValue = resolveStepperDisplayValue(safeValue, formatValue);
   const decrementValue = nextStepperValue(normalized, 'decrement');
   const incrementValue = nextStepperValue(normalized, 'increment');
   const valueAccessibilityProps = getStepperValueAccessibilityProps({
@@ -161,8 +164,17 @@ export function Stepper({
           style={[styles.cell, { width: dims.w, height: dims.h }]}
           testID={childTestID(testID, 'value-visual')}
         >
-          <Text style={[styles.valueText, { fontSize: valueFontSize }]}>
-            {safeValue}
+          <Text
+            {...(formatValue === undefined
+              ? {}
+              : {
+                  adjustsFontSizeToFit: true,
+                  minimumFontScale: 0.75,
+                  numberOfLines: 1,
+                })}
+            style={[styles.valueText, { fontSize: valueFontSize }]}
+          >
+            {displayValue}
           </Text>
         </View>
       </View>

package/src/components/ui/Stepper/displayValue.ts

@@ -0,0 +1,6 @@
+export function resolveStepperDisplayValue(
+  value: number,
+  formatValue?: (value: number) => string
+): number | string {
+  return formatValue === undefined ? value : formatValue(value);
+}

package/src/components/ui/Stepper/layout.ts

@@ -14,15 +14,34 @@ export type ResolvedStepperLayout = {
   };
 };
 
-export function resolveStepperLayout({
-  h,
-  btn,
-  w,
-}: {
-  h: number;
-  btn: number;
-  w: number;
-}): ResolvedStepperLayout {
+export function resolveStepperLayout(
+  {
+    h,
+    btn,
+    w,
+  }: {
+    h: number;
+    btn: number;
+    w: number;
+  },
+  options?: { compact?: boolean }
+): ResolvedStepperLayout {
+  if (options?.compact === true) {
+    return {
+      decrementFrame: {
+        width: btn,
+        height: fixed.hitTarget,
+        alignItems: 'flex-end',
+      },
+      valueFrame: { width: w, height: fixed.hitTarget },
+      incrementFrame: {
+        width: btn,
+        height: fixed.hitTarget,
+        alignItems: 'flex-start',
+      },
+    };
+  }
+
   const sideWidth = Math.max(fixed.hitTarget, btn);
   const outerHeight = Math.max(fixed.hitTarget, h);
   return {

package/src/components/ui/Stepper/styles.ts

@@ -52,7 +52,8 @@ export const makeStyles = (c: ColorTokens) =>
     },
   });
 
-/** Stepper 尺寸推导:sm(control.sm=`r(28)` 高 / `r(28)` 按钮 / r(40) 值宽 / xs 字)/
+/** Stepper 尺寸推导:xs(r(24) 高 / r(24) 按钮 / r(40) 值宽 / micro 字)/
+ *  sm(control.sm=`r(28)` 高 / `r(28)` 按钮 / r(40) 值宽 / xs 字)/
  *  md(r(32) 高 / r(32) 按钮 / r(48) 值宽 / sm 字)。
  *  新增 size 在 types.ts 加 union + 这里加 case。 */
 export function sizingFor(size: StepperSize): {
@@ -62,6 +63,8 @@ export function sizingFor(size: StepperSize): {
   fs: number;
 } {
   switch (size) {
+    case 'xs':
+      return { h: r(24), btn: r(24), w: r(40), fs: t.micro };
     case 'sm':
       return { h: control.sm, btn: control.sm, w: r(40), fs: t.xs };
     case 'md':

package/src/components/ui/Stepper/types.ts

@@ -1,5 +1,5 @@
-/** Stepper 尺寸：sm=28px / md=32px */
-export type StepperSize = 'sm' | 'md';
+/** Stepper 尺寸：xs=24px / sm=28px / md=32px */
+export type StepperSize = 'xs' | 'sm' | 'md';
 
 export type StepperProps = {
   /** 当前值（受控） */
@@ -16,6 +16,8 @@ export type StepperProps = {
   step?: number;
   /** 尺寸，默认 'md' */
   size?: StepperSize;
+  /** 自定义中央值的可见文案；数值运算与 adjustable 语义仍使用归一化后的 number */
+  formatValue?: (value: number) => string;
   /** 整体禁用（三个操作节点都不暴露 action） */
   disabled?: boolean;
   /** E2E / 测试定位 */

package/src/components/ui/index.ts

@@ -20,6 +20,8 @@ export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
 export { Chip } from './Chip';
 export type { ChipProps } from './Chip';
+export { CircularProgress } from './CircularProgress';
+export type { CircularProgressProps } from './CircularProgress';
 export { confirm, ConfirmHost } from './Confirm';
 export type { ConfirmOptions } from './Confirm';
 export { DrawerHeader } from './DrawerHeader';
@@ -55,6 +57,8 @@ export { Radio } from './Radio';
 export type { GroupProps as RadioGroupProps, RadioProps } from './Radio';
 export { Reveal } from './Reveal';
 export type { RevealProps } from './Reveal';
+export { Ribbon } from './Ribbon';
+export type { RibbonProps, RibbonTone } from './Ribbon';
 export { Search } from './Search';
 export type { SearchProps } from './Search';
 export { Skeleton } from './Skeleton';