@fairys/rn-valtio-form-basic 0.0.12

package/esm/hooks/layout.js

@@ -0,0 +1,142 @@
+import { createContext, useContext, useMemo, useRef } from "react";
+import { proxy, useSnapshot } from "valtio";
+import { StyleSheet } from "react-native";
+import { layoutStyles } from "../styles/layout.js";
+class FairysValtioFormLayoutInstance {
+    state = proxy({
+        colCount: 1,
+        errorLayout: 'bottom-right',
+        labelMode: 'between',
+        itemBorderType: 'bottom'
+    });
+    updated = (options = {})=>{
+        const keys = Object.keys(options);
+        for(let index = 0; index < keys.length; index++){
+            const key = keys[index];
+            this.state[key] = options[key];
+        }
+    };
+}
+const useFairysValtioFormLayoutInstance = (instance)=>{
+    const ref = useRef();
+    if (!ref.current) if (instance) ref.current = instance;
+    else ref.current = new FairysValtioFormLayoutInstance();
+    return ref.current;
+};
+const FairysValtioFormLayoutContext = createContext(new FairysValtioFormLayoutInstance());
+const useFairysValtioFormLayoutContext = ()=>{
+    const instance = useContext(FairysValtioFormLayoutContext);
+    const state = useSnapshot(instance.state);
+    return [
+        state,
+        instance
+    ];
+};
+function useFairysValtioFormLayoutAttrs(props) {
+    const formLayoutInstance = useFairysValtioFormLayoutInstance();
+    const [state] = useFairysValtioFormLayoutContext();
+    const parent_colCount = state.colCount || 1;
+    const parent_errorLayout = state.errorLayout || 'bottom-right';
+    const parent_labelMode = state.labelMode || 'between';
+    const parent_formItemStyle = state.formItemStyle;
+    const parent_formItemLabelStyle = state.formItemLabelStyle;
+    const parent_formItemBodyStyle = state.formItemBodyStyle;
+    const parent_borderedType = state.itemBorderType || 'bottom';
+    const parent_itemBorderColor = state.itemBorderColor;
+    const parent_isInvalidBorderRed = state.isInvalidBorderRed;
+    const parent_isInvalidTextRed = state.isInvalidTextRed;
+    const parent_showColon = state.showColon;
+    const { colCount = parent_colCount, errorLayout = parent_errorLayout, labelMode = parent_labelMode, formItemStyle = parent_formItemStyle, formItemLabelStyle = parent_formItemLabelStyle, formItemBodyStyle = parent_formItemBodyStyle, itemBorderType = parent_borderedType, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, showColon = parent_showColon, gap, style, headerStyle, headerTextStyle, headerExtraStyle, bodyStyle, bordered } = props;
+    useMemo(()=>formLayoutInstance.updated({
+            colCount,
+            errorLayout,
+            labelMode,
+            formItemStyle,
+            formItemLabelStyle,
+            formItemBodyStyle,
+            itemBorderType,
+            itemBorderColor,
+            isInvalidBorderRed,
+            isInvalidTextRed,
+            showColon
+        }), [
+        colCount,
+        errorLayout,
+        labelMode,
+        formItemStyle,
+        formItemLabelStyle,
+        formItemBodyStyle,
+        itemBorderType,
+        itemBorderColor,
+        isInvalidBorderRed,
+        isInvalidTextRed,
+        showColon
+    ]);
+    const _layoutStyle = useMemo(()=>[
+            StyleSheet.flatten([
+                layoutStyles["fairys-valtio-form-layout"],
+                bordered && layoutStyles["fairys-valtio-form-layout.bordered"],
+                style
+            ])
+        ], [
+        bordered,
+        style
+    ]);
+    const _headerStyle = useMemo(()=>[
+            StyleSheet.flatten([
+                layoutStyles["fairys-valtio-form-layout-header"],
+                headerStyle
+            ])
+        ], [
+        headerStyle
+    ]);
+    const _headerTitleStyle = useMemo(()=>[
+            StyleSheet.flatten([
+                layoutStyles["fairys-valtio-form-layout-header-title"],
+                headerTextStyle
+            ])
+        ], [
+        headerTextStyle
+    ]);
+    const _headerExtraStyle = useMemo(()=>[
+            StyleSheet.flatten([
+                layoutStyles["fairys-valtio-form-layout-header-extra"],
+                headerExtraStyle
+            ])
+        ], [
+        headerExtraStyle
+    ]);
+    const _bodyStyle = useMemo(()=>[
+            StyleSheet.flatten([
+                layoutStyles["fairys-valtio-form-layout-body"],
+                bodyStyle
+            ])
+        ], [
+        bodyStyle
+    ]);
+    const styleBase = useMemo(()=>{
+        const css = {};
+        if ('string' == typeof gap) css.gap = Number(gap);
+        if ('number' == typeof gap) css.gap = gap;
+        return css;
+    }, [
+        colCount,
+        gap
+    ]);
+    return {
+        colCount,
+        errorLayout,
+        labelMode,
+        itemBorderType,
+        formLayoutInstance,
+        layoutStyle: _layoutStyle,
+        headerStyle: _headerStyle,
+        headerTitleStyle: _headerTitleStyle,
+        headerExtraStyle: _headerExtraStyle,
+        bodyStyle: StyleSheet.flatten([
+            styleBase,
+            _bodyStyle
+        ])
+    };
+}
+export { FairysValtioFormLayoutContext, FairysValtioFormLayoutInstance, useFairysValtioFormLayoutAttrs, useFairysValtioFormLayoutContext, useFairysValtioFormLayoutInstance };

package/esm/index.d.ts

@@ -0,0 +1,9 @@
+export * from '@fairys/valtio-form-basic/esm/common';
+export * from './hooks/form';
+export * from './styles/form.item';
+export * from './styles/layout';
+export * from './hooks/form.item';
+export * from './hooks/layout';
+export * from './form.item';
+export * from './layout';
+export * from './form';

package/esm/index.js

@@ -0,0 +1,9 @@
+export * from "@fairys/valtio-form-basic/esm/common";
+export * from "./hooks/form.js";
+export * from "./styles/form.item.js";
+export * from "./styles/layout.js";
+export * from "./hooks/form.item.js";
+export * from "./hooks/layout.js";
+export * from "./form.item.js";
+export * from "./layout.js";
+export * from "./form.js";

package/esm/layout.d.ts

@@ -0,0 +1,4 @@
+import type { FairysValtioFormLayoutAttrsProps } from './hooks/layout';
+export interface FairysRNValtioFormLayoutProps extends FairysValtioFormLayoutAttrsProps {
+}
+export declare function FairysRNValtioFormLayout(props: FairysRNValtioFormLayoutProps): import("react/jsx-runtime").JSX.Element;

package/esm/layout.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { Text, View } from "react-native";
+import { FairysValtioFormLayoutContext, useFairysValtioFormLayoutAttrs } from "./hooks/layout.js";
+function FairysRNValtioFormLayout(props) {
+    const { children, title, extra } = props;
+    const { formLayoutInstance, layoutStyle, headerStyle, bodyStyle, headerTitleStyle, headerExtraStyle } = useFairysValtioFormLayoutAttrs(props);
+    return /*#__PURE__*/ jsx(FairysValtioFormLayoutContext.Provider, {
+        value: formLayoutInstance,
+        children: /*#__PURE__*/ jsxs(View, {
+            style: layoutStyle,
+            children: [
+                title || extra ? /*#__PURE__*/ jsxs(View, {
+                    style: headerStyle,
+                    children: [
+                        /*#__PURE__*/ jsx(View, {
+                            children: /*#__PURE__*/ jsx(Text, {
+                                style: headerTitleStyle,
+                                children: title
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(View, {
+                            children: /*#__PURE__*/ jsx(Text, {
+                                style: headerExtraStyle,
+                                children: extra
+                            })
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsx(Fragment, {}),
+                /*#__PURE__*/ jsx(View, {
+                    style: bodyStyle,
+                    children: children
+                })
+            ]
+        })
+    });
+}
+export { FairysRNValtioFormLayout };

package/esm/styles/form.item.d.ts

@@ -0,0 +1,164 @@
+export declare const formItemStyles: {
+    'fairys-valtio-form-item': {
+        padding: number;
+        fontSize: number;
+        position: "relative";
+        display: "flex";
+        flexDirection: "column";
+    };
+    'fairys-valtio-form-item.border-bottom': {
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    'fairys-valtio-form-item.border-bottom.red': {
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    'fairys-valtio-form-item-container': {
+        flex: number;
+        height: "100%";
+        display: "flex";
+    };
+    'fairys-valtio-form-item-container.between': {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        gap: number;
+    };
+    'fairys-valtio-form-item-container.top': {
+        flexDirection: "column";
+        gap: number;
+    };
+    'fairys-valtio-form-item-container.left': {
+        flexDirection: "row";
+        gap: number;
+    };
+    'fairys-valtio-form-item-label': {
+        display: "flex";
+        alignItems: "center";
+        position: "relative";
+        flexDirection: "row";
+        justifyContent: "flex-start";
+    };
+    'fairys-valtio-form-item-label.left': {
+        justifyContent: "flex-end";
+    };
+    'fairys-valtio-form-item-label.required': {
+        color: string;
+        marginEnd: number;
+    };
+    'fairys-valtio-form-item-label.show-colon': {
+        textAlign: "center";
+        marginHorizontal: number;
+        fontSize: number;
+    };
+    'fairys-valtio-form-item-label.show-colon.red': {
+        color: string;
+    };
+    'fairys-valtio-form-item-label-text': {
+        fontSize: number;
+        color: string;
+    };
+    'fairys-valtio-form-item-label-text.red': {
+        color: string;
+    };
+    'fairys-valtio-form-item-body': {
+        position: "relative";
+        flex: number;
+        display: "flex";
+    };
+    'fairys-valtio-form-item-body.left': {
+        flexDirection: "row";
+        justifyContent: "flex-start";
+    };
+    'fairys-valtio-form-item-body.top': {
+        flexDirection: "row";
+        justifyContent: "flex-end";
+    };
+    'fairys-valtio-form-item-body.between': {
+        flexDirection: "row";
+        justifyContent: "flex-end";
+    };
+    'fairys-valtio-form-item-body.border-bottom': {
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    'fairys-valtio-form-item-body.border-bottom.red': {
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    'fairys-valtio-form-item-body-input': {
+        minHeight: number;
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        flex: number;
+    };
+    'fairys-valtio-form-item-body-input.between': {
+        justifyContent: "flex-end";
+        textAlign: "right";
+    };
+    'fairys-valtio-form-item-body-input.not.between': {
+        justifyContent: "flex-start";
+        textAlign: "left";
+        alignItems: "center";
+    };
+    'fairys-valtio-form-item-body-extra': {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    'fairys-valtio-form-item-body-extra-text': {
+        fontSize: number;
+    };
+    'fairys-valtio-form-item-help': {
+        fontSize: number;
+        width: "100%";
+    };
+    'fairys-valtio-form-item-body-error': {
+        width: "100%";
+        display: "flex";
+        flexDirection: "row";
+        color: string;
+        position: "absolute";
+        fontSize: number;
+        zIndex: number;
+    };
+    'fairys-valtio-form-item-body-error-text': {
+        color: string;
+        fontSize: number;
+    };
+    'fairys-valtio-form-item-body-error.bottom-left': {
+        bottom: number;
+        left: number;
+        justifyContent: "flex-start";
+    };
+    'fairys-valtio-form-item-body-error.bottom-right': {
+        bottom: number;
+        right: number;
+        justifyContent: "flex-end";
+    };
+    'fairys-valtio-form-item-body-error.top-right': {
+        top: number;
+        right: number;
+        justifyContent: "flex-end";
+    };
+    'fairys-valtio-form-item-body-error.top-left': {
+        top: number;
+        left: number;
+        justifyContent: "flex-start";
+    };
+    'fairys-valtio-form-item-body-error.left-border-top': {
+        left: number;
+        bottom: number;
+        justifyContent: "flex-start";
+    };
+    'fairys-valtio-form-item-body-error.right-border-top': {
+        right: number;
+        bottom: number;
+        justifyContent: "flex-end";
+    };
+    'input.between': {
+        textAlign: "right";
+    };
+};

package/esm/styles/form.item.js

@@ -0,0 +1,166 @@
+import { StyleSheet } from "react-native";
+const formItemStyles = StyleSheet.create({
+    'fairys-valtio-form-item': {
+        padding: 4,
+        fontSize: 12,
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    'fairys-valtio-form-item.border-bottom': {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: '#d1d5db'
+    },
+    'fairys-valtio-form-item.border-bottom.red': {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: 'red'
+    },
+    'fairys-valtio-form-item-container': {
+        flex: 1,
+        height: '100%',
+        display: 'flex'
+    },
+    'fairys-valtio-form-item-container.between': {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8
+    },
+    'fairys-valtio-form-item-container.top': {
+        flexDirection: 'column',
+        gap: 4
+    },
+    'fairys-valtio-form-item-container.left': {
+        flexDirection: 'row',
+        gap: 8
+    },
+    'fairys-valtio-form-item-label': {
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative',
+        flexDirection: 'row',
+        justifyContent: 'flex-start'
+    },
+    'fairys-valtio-form-item-label.left': {
+        justifyContent: 'flex-end'
+    },
+    'fairys-valtio-form-item-label.required': {
+        color: 'red',
+        marginEnd: 4
+    },
+    'fairys-valtio-form-item-label.show-colon': {
+        textAlign: 'center',
+        marginHorizontal: 2,
+        fontSize: 12
+    },
+    'fairys-valtio-form-item-label.show-colon.red': {
+        color: 'red'
+    },
+    'fairys-valtio-form-item-label-text': {
+        fontSize: 12,
+        color: '#1f2937'
+    },
+    'fairys-valtio-form-item-label-text.red': {
+        color: 'red'
+    },
+    'fairys-valtio-form-item-body': {
+        position: 'relative',
+        flex: 1,
+        display: 'flex'
+    },
+    'fairys-valtio-form-item-body.left': {
+        flexDirection: 'row',
+        justifyContent: 'flex-start'
+    },
+    'fairys-valtio-form-item-body.top': {
+        flexDirection: 'row',
+        justifyContent: 'flex-end'
+    },
+    'fairys-valtio-form-item-body.between': {
+        flexDirection: 'row',
+        justifyContent: 'flex-end'
+    },
+    'fairys-valtio-form-item-body.border-bottom': {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: '#d1d5db'
+    },
+    'fairys-valtio-form-item-body.border-bottom.red': {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: 'red'
+    },
+    'fairys-valtio-form-item-body-input': {
+        minHeight: 32,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1
+    },
+    'fairys-valtio-form-item-body-input.between': {
+        justifyContent: 'flex-end',
+        textAlign: 'right'
+    },
+    'fairys-valtio-form-item-body-input.not.between': {
+        justifyContent: 'flex-start',
+        textAlign: 'left',
+        alignItems: 'center'
+    },
+    'fairys-valtio-form-item-body-extra': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    'fairys-valtio-form-item-body-extra-text': {
+        fontSize: 12
+    },
+    'fairys-valtio-form-item-help': {
+        fontSize: 10,
+        width: '100%'
+    },
+    'fairys-valtio-form-item-body-error': {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        color: 'red',
+        position: 'absolute',
+        fontSize: 10,
+        zIndex: 10
+    },
+    'fairys-valtio-form-item-body-error-text': {
+        color: 'red',
+        fontSize: 10
+    },
+    'fairys-valtio-form-item-body-error.bottom-left': {
+        bottom: -14,
+        left: 0,
+        justifyContent: 'flex-start'
+    },
+    'fairys-valtio-form-item-body-error.bottom-right': {
+        bottom: -14,
+        right: 0,
+        justifyContent: 'flex-end'
+    },
+    'fairys-valtio-form-item-body-error.top-right': {
+        top: -4,
+        right: 0,
+        justifyContent: 'flex-end'
+    },
+    'fairys-valtio-form-item-body-error.top-left': {
+        top: -4,
+        left: 0,
+        justifyContent: 'flex-start'
+    },
+    'fairys-valtio-form-item-body-error.left-border-top': {
+        left: 0,
+        bottom: -2,
+        justifyContent: 'flex-start'
+    },
+    'fairys-valtio-form-item-body-error.right-border-top': {
+        right: 0,
+        bottom: -2,
+        justifyContent: 'flex-end'
+    },
+    'input.between': {
+        textAlign: 'right'
+    }
+});
+export { formItemStyles };

package/esm/styles/layout.d.ts

@@ -0,0 +1,36 @@
+export declare const layoutStyles: {
+    'fairys-valtio-form-layout': {
+        fontSize: number;
+        width: "100%";
+        borderRadius: number;
+    };
+    'fairys-valtio-form-layout.bordered': {
+        borderWidth: number;
+        borderColor: string;
+    };
+    'fairys-valtio-form-layout-header': {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    'fairys-valtio-form-layout-header-title': {
+        fontSize: number;
+        fontWeight: "bold";
+    };
+    'fairys-valtio-form-layout-header-extra': {
+        fontSize: number;
+    };
+    'fairys-valtio-form-layout-body': {
+        paddingHorizontal: number;
+        width: "100%";
+        display: "flex";
+        flexDirection: "row";
+        flexWrap: "wrap";
+        gap: number;
+    };
+};

package/esm/styles/layout.js

@@ -0,0 +1,38 @@
+import { StyleSheet } from "react-native";
+const layoutStyles = StyleSheet.create({
+    'fairys-valtio-form-layout': {
+        fontSize: 12,
+        width: '100%',
+        borderRadius: 8
+    },
+    'fairys-valtio-form-layout.bordered': {
+        borderWidth: StyleSheet.hairlineWidth,
+        borderColor: '#d1d5db'
+    },
+    'fairys-valtio-form-layout-header': {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 10,
+        paddingHorizontal: 8,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: '#d1d5db'
+    },
+    'fairys-valtio-form-layout-header-title': {
+        fontSize: 14,
+        fontWeight: 'bold'
+    },
+    'fairys-valtio-form-layout-header-extra': {
+        fontSize: 12
+    },
+    'fairys-valtio-form-layout-body': {
+        paddingHorizontal: 8,
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 2
+    }
+});
+export { layoutStyles };

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@fairys/rn-valtio-form-basic",
+  "author": "SunLxy <1011771396@qq.com>",
+  "description": "rn表单框架组件",
+  "homepage": "https://github.com/autumn-fairy-tales/valtio-form-basic",
+  "version": "0.0.12",
+  "main": "esm/index.js",
+  "types": "esm/index.d.ts",
+  "module": "esm/index.js",
+  "license": "ISC",
+  "scripts": {
+    "build": "carefrees-rslib build --esm",
+    "watch": "carefrees-rslib build --watch --esm"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/autumn-fairy-tales/valtio-form-basic.git",
+    "directory": "packages/rn-valtio-form"
+  },
+  "files": [
+    "src",
+    "esm"
+  ],
+  "dependencies": {
+    "@fairys/valtio-form-basic": "^0.0.12"
+  },
+  "devDependencies": {
+    "react-native": "0.76.9",
+    "@types/react": "~18.2.21",
+    "react": "^18.0.0"
+  }
+}