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

package/lib/types/components/Form/interface/index.d.ts

@@ -22,15 +22,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 declare const FormDefaultProps: {
     layout: LAYOUT;
     align: ALIGN;
+    showSubmit: boolean;
+    submitText: string;
 };
 export interface RedsFormItem {
     /**
@@ -52,7 +56,7 @@ export interface RedsFormItem {
     /**
      * label
      */
-    label: string;
+    label?: string;
     /**
      * value
      */
@@ -76,11 +80,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 {
     (e: "validate", value: Event): any;

package/lib/types/components/Radio/interface/index.d.ts

@@ -1,15 +1,21 @@
 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 declare const RadioDefaultProps: {
     disabled: boolean;
+    customIconStyle: {};
+    textStyle: {};
 };
 export interface RedsRadioGroup {
     modelValue: string | number;
@@ -21,6 +27,7 @@ export interface RedsRadioGroup {
     type?: "default" | "line";
     children?: ReactNode;
     onChange?: (value: string | number) => void;
+    style?: ViewStyle;
 }
 export interface RadioGroupContextProps {
     modelValue: string | number;

package/lib/types/components/Rate/Rate.d.ts

@@ -9,6 +9,7 @@ declare const Rate: {
         descType: RateDescType;
         pattern: RatePattern;
         texts: string[];
+        isControl: boolean;
     };
 };
 export default Rate;

package/lib/types/components/Rate/interface/index.d.ts

@@ -25,6 +25,7 @@ export interface RedsRate {
     texts?: string[];
     value?: number;
     onChange?: (value: number) => void;
+    isControl?: boolean;
 }
 export interface RedsRateEvent {
 }
@@ -35,4 +36,5 @@ export declare const RateDefaultProps: {
     descType: RateDescType;
     pattern: RatePattern;
     texts: string[];
+    isControl: boolean;
 };

package/lib/types/components/Sheets/AnimatedSheets.d.ts

@@ -9,13 +9,11 @@ declare const Sheets: {
         sheetsType: SheetsType;
         cancel: boolean;
         close: boolean;
-        zIndex: string;
+        zIndex: number;
         cancelType: SheetsActionType;
         closeType: SheetsActionType;
         cancelText: string;
-        closeText: string; /**
-         * 标题区域高度
-         */
+        closeText: string;
         iconType: SheetsIconType;
         size: SheetsSize;
         onCancel: () => void;

package/lib/types/components/Sheets/Sheets.d.ts

@@ -12,7 +12,7 @@ declare const Sheets: {
         sheetsType: SheetsType;
         cancel: boolean;
         close: boolean;
-        zIndex: string;
+        zIndex: number;
         cancelType: SheetsActionType;
         closeType: SheetsActionType;
         cancelText: string;

package/lib/types/components/Sheets/interface/index.d.ts

@@ -29,7 +29,7 @@ export interface RedsSheets {
     sheetsType?: SheetsType;
     cancel?: boolean;
     close?: boolean;
-    zIndex?: string;
+    zIndex?: number;
     cancelType?: SheetsActionType;
     closeType?: SheetsActionType;
     cancelText?: string;
@@ -50,7 +50,7 @@ export declare const SheetsDefaultProps: {
     sheetsType: SheetsType;
     cancel: boolean;
     close: boolean;
-    zIndex: string;
+    zIndex: number;
     cancelType: SheetsActionType;
     closeType: SheetsActionType;
     cancelText: string;

package/lib/types/components/Stepper/Stepper.d.ts

@@ -4,6 +4,7 @@ declare const Stepper: {
     (props: RedsStepper): React.JSX.Element;
     defaultProps: {
         disable: boolean;
+        isControl: boolean;
     };
 };
 export default Stepper;

package/lib/types/components/Stepper/interface/index.d.ts

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

package/lib/types/components/Tab/styles.d.ts

@@ -5,10 +5,15 @@ declare const styles: {
         flexDirection: "row";
         alignItems: "center";
         justifyContent: "center";
+        width: "100%";
     };
     tabLeftContainer: {
         width: "100%";
         height: number;
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "flex-start";
     };
     tabSpaceContainer: {
         width: "100%";
@@ -29,9 +34,10 @@ declare const styles: {
     };
     underline: {
         height: number;
-        width: "90%";
         borderRadius: number;
         paddingHorizontal: number;
+        position: "absolute";
+        bottom: number;
     };
     smallText: {
         fontSize: number;
@@ -64,7 +70,6 @@ declare const styles: {
         flexDirection: "column";
         justifyContent: "center";
         alignItems: "center";
-        position: "relative";
     };
     leftIcon: {
         marginRight: number;
@@ -97,10 +102,6 @@ declare const styles: {
         alignItems: "center";
         flexDirection: "row";
     };
-    columnFlex: {
-        display: "flex";
-        alignItems: "center";
-    };
 };
 export declare const getRedsDropDownVariantStyles: () => {
     color: {

package/lib/types/components/Uploader/styles.d.ts

@@ -14,6 +14,7 @@ declare function getUploaderStyle(props: RedsUploader, themeColor: any): {
         height: number;
         marginRight: number;
         marginTop: number;
+        borderRadius: number;
     };
     identityView: {
         position: "relative";
@@ -49,10 +50,12 @@ declare function getUploaderStyle(props: RedsUploader, themeColor: any): {
     identityImage: {
         width: number;
         height: number;
+        borderRadius: number;
     };
     image: {
         width: "100%";
         height: "100%";
+        borderRadius: number;
     };
     close: {
         width: number;
@@ -120,7 +123,7 @@ declare function getUploaderStyle(props: RedsUploader, themeColor: any): {
         flexDirection: "column";
         alignItems: "center";
         justifyContent: "center";
-        backgroundColor: any;
+        backgroundColor: string;
     };
     identityProgressIndicator: {
         width: number;
@@ -134,7 +137,7 @@ declare function getUploaderStyle(props: RedsUploader, themeColor: any): {
         flexDirection: "column";
         alignItems: "center";
         justifyContent: "center";
-        backgroundColor: any;
+        backgroundColor: string;
     };
     progressDesc: {
         color: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.2.2",
+  "version": "0.2.3-beta202411091721",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {

package/src/components/ActionSheets/ActionSheets.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { View, TouchableWithoutFeedback, Text } from "react-native";
+import { View, TouchableWithoutFeedback, Text, ScrollView } from "react-native";
 import { RedsActionSheets, ActionSheetsDefaultProps } from "./interface/index";
 import styles from "./styles";
 import { useThemeColor } from "../ConfigProvider";
-import Sheets, { SheetsType } from "../Sheets";
+import { Sheets, SheetsType } from "../Sheets";
 import { ActionType } from "./interface";
 
 const ActionSheets = (props: RedsActionSheets) => {
@@ -33,6 +33,7 @@ const ActionSheets = (props: RedsActionSheets) => {
       visible={props.visible}
       cancel={false}
       close={false}
+      size={SheetsType.SheetsSize.half}
       sheetsType={SheetsType.SheetsType.normal}
       onCancel={handleClose}
     >
@@ -44,13 +45,15 @@ const ActionSheets = (props: RedsActionSheets) => {
         ) : (
           <></>
         )}
-        {props?.data?.map((item) => (
-          <TouchableWithoutFeedback onPress={() => handleClick(item.value)}>
-            <View style={[styles.action, { backgroundColor: themeColor.Bg2 }]}>
-              <Text style={getActionStyles(item.type as ActionType)}>{item.label}</Text>
-            </View>
-          </TouchableWithoutFeedback>
-        ))}
+        <ScrollView contentContainerStyle={{ flex: 1 }}>
+          {props?.data?.map((item) => (
+            <TouchableWithoutFeedback onPress={() => handleClick(item.value)} key={`${item.label}${item.value}`}>
+              <View style={[styles.action, { backgroundColor: themeColor.Bg2 }]}>
+                <Text style={getActionStyles(item.type as ActionType)}>{item.label}</Text>
+              </View>
+            </TouchableWithoutFeedback>
+          ))}
+        </ScrollView>
         <TouchableWithoutFeedback onPress={handleClose}>
           <View style={[styles.cancel, { backgroundColor: themeColor.Bg2 }]}>
             <Text style={{ color: themeColor.Title }}>取消</Text>

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

@@ -2,6 +2,16 @@ import React, { useRef, useEffect, useState } from "react";
 import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
 import { ActionSheets, Button, ActionSheetsType } from "@xhs/reds-rn-next";
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: 100,
+    paddingBottom: 100,
+    backgroundColor: "#eee",
+  },
+});
+
 export default function App() {
   const [visible1, setVisible1] = useState(false);
   const [visible2, setVisible2] = useState(false);
@@ -26,6 +36,22 @@ export default function App() {
       label: "操作",
       value: "5",
     },
+    {
+      label: "操作",
+      value: "6",
+    },
+    {
+      label: "操作",
+      value: "7",
+    },
+    {
+      label: "操作",
+      value: "8",
+    },
+    {
+      label: "操作",
+      value: "9",
+    },
   ];
 
   const list1 = [
@@ -49,7 +75,7 @@ export default function App() {
     console.log("handleChange", value);
   };
   return (
-    <View>
+    <View style={styles.container}>
       <Button onClick={() => setVisible1(true)}>有描述的ActionSheet</Button>
       <ActionSheets
         visible={visible1}

package/src/components/ActionSheets/styles.ts

@@ -3,9 +3,11 @@ import { StyleSheet } from "react-native";
 const styles = StyleSheet.create({
   ActionSheetsContainer: {
     width: "100%",
-    overflowY: "scroll",
     borderTopLeftRadius: 12,
     borderTopRightRadius: 12,
+    display: "flex",
+    height: "100%",
+    flexDirection: "column",
   },
   description: {
     height: 42,
@@ -18,6 +20,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     borderTopLeftRadius: 12,
     borderTopRightRadius: 12,
+    flexShrink: 0,
   },
   descriptionText: {
     fontSize: 12,

package/src/components/CheckBoxGroup/CheckBox.tsx

@@ -25,7 +25,11 @@ const CheckBox = (props: RedsCheckBox) => {
   };
 
   useEffect(() => {
-    setChecked((checkList as string[]).includes(props.value as string) || props.checked!);
+    if (props?.isControl) {
+      setChecked(props.checked!);
+    } else {
+      setChecked((checkList as string[]).includes(props.value as string));
+    }
   }, [props.checked]);
 
   return (

package/src/components/CheckBoxGroup/CheckBoxGroup.tsx

@@ -45,6 +45,7 @@ const CheckBoxGroup = (props: RedsCheckBoxGroup) => {
               disable: child?.props?.disable !== undefined || props.disable,
               size: props.size,
               onChange: handleChange,
+              isControl: false,
             });
           }
         })

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

@@ -60,6 +60,7 @@ export interface RedsCheckBox {
   style?: ViewStyle;
   size?: CheckBoxGroupSize;
   onChange?: (value: string | number, checked: boolean) => void;
+  isControl?: boolean;
 }
 
 export const RedsCheckBoxDefaultProps = {

package/src/components/Form/Form.tsx

@@ -1,26 +1,25 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import React, { useState, useRef, useEffect, useMemo, useCallback, forwardRef, useImperativeHandle } from "react";
 import { View, TouchableWithoutFeedback } from "react-native";
 import { RedsForm, FormDefaultProps, RedsFormItem } from "./interface/index";
 import { Button } from "../Button";
 import styles from "./styles";
 
-const Form = (props: RedsForm) => {
+const Form = forwardRef((props: RedsForm, ref) => {
   const refs = useRef<React.Ref<any>[]>([]);
-
   /**
    * 默认插槽内容
    */
   const formItems = useMemo(() => {
-    return props.children?.length
+    return props.children
       ? React.Children.map(props.children, (child, index) => {
           if (React.isValidElement(child)) {
             return React.cloneElement(child, {
-              // @ts-ignore
               rules: props.rules[(child?.props as RedsFormItem)?.name],
               value: props.data[(child?.props as RedsFormItem)?.name],
               layout: props.layout,
               align: props.align,
               ref: (el: any) => (refs.current[index] = el),
+              ...child?.props,
             });
           }
         })
@@ -28,26 +27,38 @@ const Form = (props: RedsForm) => {
   }, [props.children, props.rules, props.data]);
 
   const handleSubmit = () => {
-    refs?.current?.forEach?.((ref: any) => {
-      if (ref?.handleValidate) {
-        const validate = ref.handleValidate?.();
+    for (let i = 0; i < refs?.current.length; i++) {
+      // @ts-expect-error
+      if (refs.current[i]?.handleValidate) {
+        // @ts-expect-error
+        const validate = refs.current[i].handleValidate?.();
         if (!validate) {
           return;
         }
       }
-    });
+    }
     props?.onSubmit?.(props.data);
   };
 
+  useImperativeHandle(ref, () => {
+    return {
+      handleSubmit,
+    };
+  });
+
   return (
     <>
       {formItems}
-      <Button onClick={handleSubmit} type={"primary"} variant={"fill"} block>
-        提交
-      </Button>
+      {props.showSubmit ? (
+        <Button onClick={handleSubmit} type={"primary"} variant={"fill"} block>
+          {props.submitText}
+        </Button>
+      ) : (
+        <></>
+      )}
     </>
   );
-};
+});
 
 Form.defaultProps = FormDefaultProps;
 

package/src/components/Form/FormItem.tsx

@@ -12,6 +12,7 @@ import styles, {
 const FormItem = forwardRef((props: RedsFormItem, ref) => {
   const themeColor = useThemeColor();
   const [warning, setWarning] = useState("");
+
   /**
    * 提交前校验
    */
@@ -41,16 +42,20 @@ const FormItem = forwardRef((props: RedsFormItem, ref) => {
   useImperativeHandle(ref, () => ({
     handleValidate,
   }));
-
   return (
     <View style={[computedFormItemStyle(props, themeColor), props.styles]}>
       {/** label */}
-      <View style={computedLabelContainerStyle(props)}>
+      <View style={[computedLabelContainerStyle(props), props.labelStyle]}>
         <View style={{ position: "relative" }}>
-          <Text style={[computedLabelStyle(themeColor), props.labelStyle]}>{props.label}</Text>
+          {props?.LabelComponent ? (
+            props?.LabelComponent
+          ) : (
+            <Text style={[computedLabelStyle(themeColor), props.labelTextStyle]}>{props.label}</Text>
+          )}
           {props.required ? <Text style={styles(themeColor).require}>{"*"}</Text> : <></>}
         </View>
       </View>
+
       {/** formItem插槽 */}
       <View style={[computedChildrenStyle(props), props.formItemSlotStyles]}>
         {props.children}

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

@@ -1,15 +1,28 @@
 import React, { useRef, useEffect, useState } from "react";
 import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
-import { Form, FormItem, CheckBoxGroup, CheckBox, FormType, Rate, Stepper, RadioGroup, Radio } from "@xhs/reds-rn-next";
+import {
+  Form,
+  FormItem,
+  CheckBoxGroup,
+  CheckBox,
+  FormType,
+  Rate,
+  Stepper,
+  RadioGroup,
+  Radio,
+  Button,
+} from "@xhs/reds-rn-next";
 
 export default function App() {
   const [formData, setFormData] = useState({
     rate: 0,
     stepper: 3,
-    radio: "B",
+    radio: "",
     checkbox: [1, 2, 3],
   });
 
+  const formRef = useRef();
+
   const [formRules, setFormRules] = useState({
     rate: [{ validator: (val: any) => val <= 4, message: "值不能超过4" }],
     stepper: [{ validator: (val: any) => val <= 3, message: "值不能大于3" }],
@@ -24,9 +37,10 @@ export default function App() {
     console.log("handleSubmit", value);
   };
 
-  useEffect(() => {
-    console.log("formData", formData);
-  }, [formData]);
+  const handleSubmitCustom = () => {
+    // @ts-expect-error
+    formRef?.current?.handleSubmit?.();
+  };
 
   return (
     <ScrollView style={{ paddingHorizontal: 16 }}>
@@ -36,7 +50,6 @@ export default function App() {
           <Rate
             value={formData.rate}
             onChange={(value) => {
-              console.log("Rate", value);
               setFormData((data) => ({ ...data, ...{ rate: value } }));
             }}
           />
@@ -47,7 +60,7 @@ export default function App() {
             onChange={(value) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
           />
         </FormItem>
-        <FormItem label="radio输入" name="radio" value={formData.radio} key="radio">
+        <FormItem label="radio输入" name="radio" value={formData.radio} key="radio" required>
           <RadioGroup
             modelValue={formData.radio}
             onChange={(value: string | number) => setFormData((data) => ({ ...data, ...{ radio: value as string } }))}
@@ -136,6 +149,49 @@ export default function App() {
           </CheckBoxGroup>
         </FormItem>
       </Form>
+
+      <Text>部分垂直布局</Text>
+      <Form data={formData} rules={formRules} onSubmit={handleSubmit} showSubmit={false} ref={formRef}>
+        <FormItem label="rate" name="rate" value={formData.rate} required key="rate" layout={FormType.LAYOUT.VERTICAL}>
+          <Rate value={formData.rate} onChange={(value) => setFormData((data) => ({ ...data, ...{ rate: value } }))} />
+        </FormItem>
+        <FormItem label="stepper" name="stepper" value={formData.stepper} required key="stepper">
+          <Stepper
+            value={formData.stepper}
+            onChange={(value) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
+          />
+        </FormItem>
+        <FormItem label="radio输入" name="radio" value={formData.radio} key="radio">
+          <RadioGroup
+            modelValue={formData.radio}
+            onChange={(value: string | number) => setFormData((data) => ({ ...data, ...{ radio: value as string } }))}
+          >
+            <Radio name="A">选项</Radio>
+            <Radio name="B">选项</Radio>
+            <Radio name="C">选项</Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem
+          label="checkbox输入"
+          name="checkbox"
+          value={formData.checkbox}
+          key="checkbox"
+          LabelComponent={<Text>自定义label</Text>}
+        >
+          <CheckBoxGroup
+            onChange={(val) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
+            value={formData.checkbox}
+          >
+            <CheckBox label="多选" value={1} />
+            <CheckBox label="多选" value={2} />
+            <CheckBox label="多选" value={3} />
+            <CheckBox label="多选" value={4} />
+          </CheckBoxGroup>
+        </FormItem>
+      </Form>
+      <Button onClick={handleSubmitCustom} type={"primary"} variant={"fill"} block>
+        自定义提交按钮
+      </Button>
     </ScrollView>
   );
 }

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

@@ -10,13 +10,15 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性     | 描述         | 类型        | 默认值            |
-| -------- | ------------ | ----------- | ----------------- |
-| data     | 表单数据     | FormData    |                   |
-| rules    | 表单校验规则 | FormRules   |                   |
-| children | FormItem节点 | ReactNode[] |                   |
-| layout   | 布局         | LAYOUT      | LAYOUT.HORIZONTAL |
-| align    | 方向         | ALIGN       | ALIGN.LEFT        |
+| 属性       | 描述         | 类型                         | 默认值            |
+| ---------- | ------------ | ---------------------------- | ----------------- |
+| data       | 表单数据     | FormData                     |                   |
+| rules      | 表单校验规则 | FormRules                    |                   |
+| children   | FormItem节点 | ReactNode[] | ReactNode |                   |
+| layout     | 布局         | LAYOUT                       | LAYOUT.HORIZONTAL |
+| align      | 方向         | ALIGN                        | ALIGN.LEFT        |
+| showSubmit | 是否需要按钮 | boolean                      | true              |
+| submitText | 提交按钮文案 | string                       | 提交              |
 
 ### Events