@xhsreds/reds-rn-next 0.2.2 → 0.2.3-beta202411091721

package/src/components/Form/interface/index.ts

@@ -27,15 +27,19 @@ export interface RedsForm {
   data: FormData;
   rules: FormRules;
   onSubmit?: (value: FormData) => any;
-  children: ReactNode[];
+  children: ReactNode[] | ReactNode;
   layout?: LAYOUT;
   align?: ALIGN;
+  showSubmit?: boolean;
+  submitText?: string;
 }
 
 export interface RedsFormEvent {}
 export const FormDefaultProps = {
   layout: LAYOUT.HORIZONTAL,
   align: ALIGN.LEFT,
+  showSubmit: true,
+  submitText: "提交",
 };
 
 export interface RedsFormItem {
@@ -58,7 +62,7 @@ export interface RedsFormItem {
   /**
    * label
    */
-  label: string;
+  label?: string;
   /**
    * value
    */
@@ -82,11 +86,19 @@ export interface RedsFormItem {
   /**
    * label styles
    */
-  labelStyle?: TextStyle;
+  labelStyle?: ViewStyle;
+  /**
+   * label text styles
+   */
+  labelTextStyle?: TextStyle;
   /**
    * formItem slot styles
    */
   formItemSlotStyles?: ViewStyle;
+  /**
+   * label slot
+   */
+  LabelComponent?: ReactNode;
 }
 
 export interface RedsFormItemEvent {

package/src/components/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from "react";
-import { GestureResponderEvent, TouchableOpacity, TouchableWithoutFeedback, Image } from "react-native";
+import { GestureResponderEvent, TouchableWithoutFeedback, Image } from "react-native";
 import { SvgXml } from "react-native-svg";
 import { RedsIcon, IconDefaultProps, iconType } from "./interface/index";
 import { useThemeColor } from "../ConfigProvider";
@@ -24,6 +24,8 @@ const Icon: React.FC<RedsIcon> = (props) => {
       } else {
         return icon ?? "";
       }
+    } else {
+      return "";
     }
   }, [icon, size, fill]);
 
@@ -32,7 +34,7 @@ const Icon: React.FC<RedsIcon> = (props) => {
   }, [props.type, icon]);
 
   return (
-    <TouchableOpacity testID="touchable-element" onPress={toggleIcon}>
+    <TouchableWithoutFeedback testID="touchable-element" onPress={toggleIcon}>
       {isImage ? (
         <TouchableWithoutFeedback onPress={toggleIcon}>
           <Image
@@ -44,7 +46,7 @@ const Icon: React.FC<RedsIcon> = (props) => {
       ) : (
         <SvgXml testID="svg-element" xml={iconSvg || ""} />
       )}
-    </TouchableOpacity>
+    </TouchableWithoutFeedback>
   );
 };
 

package/src/components/Icon/demo/index.tsx

@@ -63,7 +63,6 @@ export default function IconDemo() {
         <Icon
           icon={"https://picasso-static.xiaohongshu.com/fe-platform/3dabf74f0207cdb78ddc35730921d77c9d9bc99c.png"}
           size={100}
-          type={IconType.iconType.image}
         />
         <Br />
       </View>

package/src/components/Radio/Radio.tsx

@@ -60,17 +60,23 @@ const Radio = forwardRef<View, RedsRadio>((props, ref) => {
           <View style={[iconStyleClass, parent?.position === "right" && iconRight, type === "line" && hiddenBgStyle()]}>
             {checked && type === "line" ? (
               <Icon
-                icon={"https://picasso-static.xiaohongshu.com/fe-platform/8f401b554b1f9a8be17dc1e8696254b41ab5a439.png"}
+                icon={
+                  props.customIcon ||
+                  "https://picasso-static.xiaohongshu.com/fe-platform/8f401b554b1f9a8be17dc1e8696254b41ab5a439.png"
+                }
                 size={iconSizeMap[size]}
+                styles={props.customIconStyle}
                 type={IconType.iconType.image}
               />
             ) : (
               checked && (
                 <Icon
                   icon={
+                    props.customIcon ||
                     "https://picasso-static.xiaohongshu.com/fe-platform/8f401b554b1f9a8be17dc1e8696254b41ab5a439.png"
                   }
                   size={iconSizeMap[size]}
+                  styles={props.customIconStyle}
                   type={IconType.iconType.image}
                 />
               )
@@ -79,7 +85,7 @@ const Radio = forwardRef<View, RedsRadio>((props, ref) => {
 
           {children && (
             <View style={[parent?.direction === "vertical" && freestyle]}>
-              <Text style={labelStyle}>{children}</Text>
+              <Text style={[labelStyle, props.textStyle]}>{children}</Text>
               {!isLast && parent?.direction === "vertical" && <View style={getDividerStyle()} />}
             </View>
           )}

package/src/components/Radio/RadioGroup.tsx

@@ -15,6 +15,7 @@ const RadioGroup: FC<RedsRadioGroup> = ({
   children,
   onChange,
   type,
+  style = {},
 }) => {
   const updateValue = (value: string | number) => {
     onChange?.(value);
@@ -37,7 +38,7 @@ const RadioGroup: FC<RedsRadioGroup> = ({
 
   return (
     <RadioGroupContext.Provider value={contextValue}>
-      <View style={getRadioGroupStyle(direction)}>
+      <View style={[getRadioGroupStyle(direction), style]}>
         {childArray.map((child: React.ReactElement, index: number) => {
           return React.cloneElement(child, {
             isLast: index === childArray.length - 1,

package/src/components/Radio/doc/index.mdx

@@ -10,14 +10,17 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性         | 描述         | 类型                                   | 默认值 |
-| ------------ | ------------ | -------------------------------------- | ------ |
-| name         | name         | string                                 |        |
-| size         | 大小         | "small" | "medium" | "large" |        |
-| disabled     | 是否禁用     | boolean                                | false  |
-| checkedColor | 选中颜色     | string                                 |        |
-| type         | 选中icon类型 | "default" | "line"                |        |
-| children     | 单选文本     | React.ReactNode                        |        |
+| 属性            | 描述                   | 类型                                   | 默认值 |
+| --------------- | ---------------------- | -------------------------------------- | ------ |
+| name            | name                   | string                                 |        |
+| size            | 大小                   | "small" | "medium" | "large" |        |
+| disabled        | 是否禁用               | boolean                                | false  |
+| checkedColor    | 选中颜色               | string                                 |        |
+| type            | 选中icon类型           | "default" | "line"                |        |
+| customIcon      | 自定义选中icon图片url  | string                                 |        |
+| customIconStyle | 自定义选中icon图片样式 | ViewStyle                              | `{}`   |
+| children        | 单选文本               | React.ReactNode                        |        |
+| textStyle       | radio样式              | ViewStyle                              | `{}`   |
 
 ### Events
 

package/src/components/Radio/interface/index.ts

@@ -1,16 +1,22 @@
 import React, { ReactNode } from "react";
+import { ViewStyle } from "react-native";
 export interface RedsRadio {
   name?: string;
   size?: "small" | "medium" | "large";
   disabled?: boolean;
   checkedColor?: string;
   type?: "default" | "line";
+  customIcon?: string;
+  customIconStyle?: ViewStyle;
   children?: React.ReactNode;
   onClick?: (value: string) => void;
+  textStyle?: ViewStyle;
 }
 
 export const RadioDefaultProps = {
   disabled: false,
+  customIconStyle: {},
+  textStyle: {},
 };
 
 export interface RedsRadioGroup {
@@ -23,6 +29,7 @@ export interface RedsRadioGroup {
   type?: "default" | "line";
   children?: ReactNode;
   onChange?: (value: string | number) => void;
+  style?: ViewStyle;
 }
 
 export interface RadioGroupContextProps {

package/src/components/Rate/Rate.tsx

@@ -103,7 +103,7 @@ const Rate = (props: RedsRate) => {
   };
 
   useEffect(() => {
-    setRate(props.value || 0);
+    props.isControl && setRate(props.value || 0);
   }, []);
   return (
     <View style={styles.container}>

package/src/components/Rate/doc/index.mdx

@@ -10,15 +10,16 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性     | 描述                                                                               | 类型         | 默认值                                 |
-| -------- | ---------------------------------------------------------------------------------- | ------------ | -------------------------------------- |
-| type     | 默认展示评分组件的样式                                                             | RateType     | RateType.OUTLINED                      |
-| disabled | 是否禁用评分                                                                       | boolean      | false                                  |
-| size     | 图标尺寸                                                                           | RateSize     | RateSize.MEDIUM                        |
-| descType | 评分描述类型                                                                       | RateDescType | RateDescType.NUMBER                    |
-| pattern  | 评分组件类型                                                                       | RatePattern  | RatePattern.Star                       |
-| texts    | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜'] | string[]     | `["极差","失望","一般","满意","惊喜"]` |
-| value    | 选中的值                                                                           | number       |                                        |
+| 属性      | 描述                                                                               | 类型         | 默认值                                 |
+| --------- | ---------------------------------------------------------------------------------- | ------------ | -------------------------------------- |
+| type      | 默认展示评分组件的样式                                                             | RateType     | RateType.OUTLINED                      |
+| disabled  | 是否禁用评分                                                                       | boolean      | false                                  |
+| size      | 图标尺寸                                                                           | RateSize     | RateSize.MEDIUM                        |
+| descType  | 评分描述类型                                                                       | RateDescType | RateDescType.NUMBER                    |
+| pattern   | 评分组件类型                                                                       | RatePattern  | RatePattern.Star                       |
+| texts     | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜'] | string[]     | `["极差","失望","一般","满意","惊喜"]` |
+| value     | 选中的值                                                                           | number       |                                        |
+| isControl | 是否受控                                                                           | boolean      | false                                  |
 
 ### Events
 

package/src/components/Rate/interface/index.ts

@@ -33,6 +33,7 @@ export interface RedsRate {
   texts?: string[];
   value?: number;
   onChange?: (value: number) => void;
+  isControl?: boolean;
 }
 
 export interface RedsRateEvent {}
@@ -43,4 +44,5 @@ export const RateDefaultProps = {
   descType: RateDescType.NUMBER,
   pattern: RatePattern.Star,
   texts: ["极差", "失望", "一般", "满意", "惊喜"],
+  isControl: false,
 };

package/src/components/Sheets/AnimatedSheets.tsx

@@ -242,7 +242,7 @@ const Sheets = (props: RedsSheets) => {
   }, [colorMode]);
 
   return visible ? (
-    <View style={styles.wrapper} testID="Sheets">
+    <View style={[styles.wrapper, { zIndex: props.zIndex }]} testID="Sheets">
       {mask ? (
         <TouchableWithoutFeedback onPress={handleMask}>
           <View

package/src/components/Sheets/Sheets.tsx

@@ -91,7 +91,14 @@ const Sheets = (props: RedsSheets) => {
       <TouchableWithoutFeedback onPress={handleCancel}>
         <View style={[styles.iconBg, { backgroundColor: themeColor.Fill1 }]}>
           {type === "confirm" ? (
-            <Icon icon={Close} fill={themeColor.Bg} size={20} onClick={handleCancel} type={IconType.iconType.image} />
+            <Icon
+              icon={Close}
+              fill={themeColor.Bg}
+              size={20}
+              onClick={handleCancel}
+              type={IconType.iconType.image}
+              styles={{ borderRadius: 10 }}
+            />
           ) : (
             <Icon
               icon={ArrowLeft}
@@ -99,14 +106,29 @@ const Sheets = (props: RedsSheets) => {
               size={20}
               onClick={handleCancel}
               type={IconType.iconType.image}
+              styles={{ borderRadius: 10 }}
             />
           )}
         </View>
       </TouchableWithoutFeedback>
     ) : type === "confirm" ? (
-      <Icon icon={Close} fill={themeColor.Title} size={20} onClick={handleCancel} type={IconType.iconType.image} />
+      <Icon
+        icon={Close}
+        fill={themeColor.Title}
+        size={20}
+        onClick={handleCancel}
+        type={IconType.iconType.image}
+        styles={{ borderRadius: 10 }}
+      />
     ) : (
-      <Icon icon={ArrowLeft} fill={themeColor.Title} size={20} onClick={handleCancel} type={IconType.iconType.image} />
+      <Icon
+        icon={ArrowLeft}
+        fill={themeColor.Title}
+        size={20}
+        onClick={handleCancel}
+        type={IconType.iconType.image}
+        styles={{ borderRadius: 10 }}
+      />
     );
   };
 
@@ -146,7 +168,7 @@ const Sheets = (props: RedsSheets) => {
   }, [props.size]);
 
   return visible ? (
-    <View style={styles.wrapper} testID="Sheets">
+    <View style={[styles.wrapper, { zIndex: props.zIndex }]} testID="Sheets">
       {mask ? (
         <TouchableWithoutFeedback onPress={handleMask}>
           <View
@@ -200,15 +222,7 @@ const Sheets = (props: RedsSheets) => {
         ) : (
           <></>
         )}
-
-        <View
-          onLayout={(e) => {
-            console.log("e.nativeEvent.layout.height", e.nativeEvent.layout.height);
-            setChildHeight(e.nativeEvent.layout.height);
-          }}
-        >
-          {children}
-        </View>
+        {children}
 
         {/** action */}
         {showAction ? (

package/src/components/Sheets/demo/index.tsx

@@ -69,6 +69,8 @@ export default function App() {
   const [visible10, setVisible10] = useState(false);
   const [visible11, setVisible11] = useState(false);
   const [visible12, setVisible12] = useState(false);
+  const [visible13, setVisible13] = useState(false);
+  const [showView, setShowView] = useState(false);
 
   const { show: showAnimatedSheets, remove: removeAnimatedSheets } = useAnimatedSheets();
 
@@ -90,6 +92,8 @@ export default function App() {
           maskMode={SheetsType.SheetsMaskMode.dark}
         >
           <Children />
+          <Button onClick={() => setShowView((val) => !val)}>测试弹窗高度变化</Button>
+          {showView ? <Text style={{ width: "100%", height: 200, backgroundColor: "#f00" }}>xxxxxxx</Text> : <></>}
         </AnimatedSheets>
       </Portal>
 
@@ -318,6 +322,25 @@ export default function App() {
       >
         <ScrollChildren />
       </Sheets>
+
+      <Button onClick={() => setVisible13(true)}>无动画sheets, 高度变化</Button>
+      <Sheets
+        visible={visible13}
+        label={"标题"}
+        onCancel={() => setVisible13(false)}
+        onConfirm={() => setVisible13(false)}
+        cancel={false}
+        close={true}
+        size={SheetsType.SheetsSize.auto}
+        closeType={SheetsType.SheetsActionType.icon}
+        mask={true}
+        zIndex={1}
+        maskMode={SheetsType.SheetsMaskMode.dark}
+      >
+        <Children />
+        <Button onClick={() => setShowView((val) => !val)}>测试弹窗高度变化</Button>
+        {showView ? <Text style={{ width: "100%", height: 200, backgroundColor: "#f00" }}>xxxxxxx</Text> : <></>}
+      </Sheets>
     </View>
   );
 }

package/src/components/Sheets/doc/index.mdx

@@ -18,7 +18,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | sheetsType | sheets类型     | SheetsType       | SheetsType.normal     |
 | cancel     | 返回按钮       | boolean          | true                  |
 | close      | 关闭按钮       | boolean          | true                  |
-| zIndex     | 容器层级       | string           | 0                     |
+| zIndex     | 容器层级       | number           | 0                     |
 | cancelType | 返回按钮类型   | SheetsActionType | SheetsActionType.icon |
 | closeType  | 确定按钮类型   | SheetsActionType | SheetsActionType.icon |
 | cancelText | 取消操作文案   | string           | 取消                  |

package/src/components/Sheets/interface/index.ts

@@ -34,7 +34,7 @@ export interface RedsSheets {
   sheetsType?: SheetsType;
   cancel?: boolean;
   close?: boolean;
-  zIndex?: string;
+  zIndex?: number;
   cancelType?: SheetsActionType;
   closeType?: SheetsActionType;
   cancelText?: string;
@@ -55,7 +55,7 @@ export const SheetsDefaultProps = {
   sheetsType: SheetsType.normal,
   cancel: true,
   close: true,
-  zIndex: "0",
+  zIndex: 0,
   cancelType: SheetsActionType.icon,
   closeType: SheetsActionType.icon,
   cancelText: "取消",

package/src/components/Stepper/Stepper.tsx

@@ -48,15 +48,17 @@ const Stepper = (props: RedsStepper) => {
   };
 
   useEffect(() => {
-    setValue(
-      props.value! >= props.min! && props.value! <= props.max!
-        ? props.value!
-        : props.value! < props.min!
-          ? props.min!
-          : props.value! > props.max!
-            ? props.max!
-            : props.value!,
-    );
+    if (props.isControl) {
+      setValue(
+        props.value! >= props.min! && props.value! <= props.max!
+          ? props.value!
+          : props.value! < props.min!
+            ? props.min!
+            : props.value! > props.max!
+              ? props.max!
+              : props.value!,
+      );
+    }
   }, [props.value, props.max, props.min]);
 
   return (

package/src/components/Stepper/doc/index.mdx

@@ -10,12 +10,13 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性    | 描述       | 类型    | 默认值 |
-| ------- | ---------- | ------- | ------ |
-| value   | 当前的状态 | number  |        |
-| max     | 最大值     | number  |        |
-| min     | 最小值     | number  |        |
-| disable | disable    | boolean | false  |
+| 属性      | 描述       | 类型    | 默认值 |
+| --------- | ---------- | ------- | ------ |
+| value     | 当前的状态 | number  |        |
+| max       | 最大值     | number  |        |
+| min       | 最小值     | number  |        |
+| disable   | disable    | boolean | false  |
+| isControl | 是否受控   | boolean | false  |
 
 ### Events
 

package/src/components/Stepper/interface/index.ts

@@ -6,9 +6,11 @@ export interface RedsStepper {
   min?: number;
   disable?: boolean;
   onChange?: (value: number) => any;
+  isControl?: boolean;
 }
 
 export interface RedsStepperEvent {}
 export const StepperDefaultProps = {
   disable: false,
+  isControl: false,
 };