@fairys/taro-valtio-form-basic 0.0.12

package/esm/form.d.ts

@@ -0,0 +1,18 @@
+import { FairysTaroValtioFormItem, FairysTaroValtioFormHideItem, FairysTaroValtioFormItemBase } from './form.item';
+import { useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextState, useFairysValtioFormInstanceContextHideState } from '@fairys/valtio-form-basic';
+import type { FairysValtioFormAttrsProps, MObject } from '@fairys/valtio-form-basic';
+export * from '@fairys/valtio-form-basic';
+export * from './form.item';
+export * from './layout';
+export interface FairysTaroValtioFormProps<T extends MObject<T> = object> extends FairysValtioFormAttrsProps<T> {
+}
+export declare function FairysTaroValtioForm<T extends MObject<T> = object>(props: FairysTaroValtioFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace FairysTaroValtioForm {
+    var useForm: typeof useFairysValtioFormInstance;
+    var useFormState: typeof useFairysValtioFormInstanceContextState;
+    var useFormHideState: typeof useFairysValtioFormInstanceContextHideState;
+    var useFormInstance: typeof useFairysValtioFormInstanceContext;
+    var FormItemBase: typeof FairysTaroValtioFormItemBase;
+    var FormItem: typeof FairysTaroValtioFormItem;
+    var FormHideItem: typeof FairysTaroValtioFormHideItem;
+}

package/esm/form.item.d.ts

@@ -0,0 +1,17 @@
+/**表单项*/
+import type { ViewProps } from '@tarojs/components';
+import type { FairysValtioFormItemAttrsProps, MObject } from '@fairys/valtio-form-basic';
+export interface FairysTaroValtioFormItemProps<T extends MObject<T> = object> extends Omit<ViewProps, 'style'>, FairysValtioFormItemAttrsProps {
+    /**是否使用控制隐藏的表单项*/
+    isHide?: boolean;
+    /**是否使用无样式表单项*/
+    noStyle?: boolean;
+}
+/**普通表单项*/
+export declare function FairysTaroValtioFormItemBase<T extends MObject<T> = object>(props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
+/**控制隐藏的表单项*/
+export declare function FairysTaroValtioFormHideItem<T extends MObject<T> = object>(props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
+/**无样式表单项*/
+export declare function FairysTaroValtioFormItemNoStyle<T extends MObject<T> = object>(props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
+/**表单项基础组件(根据isHide和noStyle判断是否使用控制隐藏的表单项和无样式表单项)*/
+export declare function FairysTaroValtioFormItem<T extends MObject<T> = object>(props: FairysTaroValtioFormItemProps<T>): import("react/jsx-runtime").JSX.Element;

package/esm/form.item.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { View } from "@tarojs/components";
+import { Fragment } from "react";
+import { FairysValtioFormParentAttrsContext, useFairysValtioFormInstanceContextHideState, useFairysValtioFormItemAttrs, useFairysValtioFormItemNoStyleAttrs } from "@fairys/valtio-form-basic";
+function FairysTaroValtioFormItemBase(props) {
+    const { label, extra, helpText } = props;
+    const { itemClassName, itemStyle, containerClassName, itemLabelClassName, itemLabelStyle, itemBodyClassName, itemBodyStyle, itemInputClassName, itemExtraClassName, errorClassName, helpClassName, isInvalid, itemBorderType, children, error, formAttrsNameInstance } = useFairysValtioFormItemAttrs(props);
+    return /*#__PURE__*/ jsxs(View, {
+        className: itemClassName,
+        style: itemStyle,
+        children: [
+            /*#__PURE__*/ jsxs(View, {
+                className: containerClassName,
+                children: [
+                    label ? /*#__PURE__*/ jsx(View, {
+                        className: itemLabelClassName,
+                        style: itemLabelStyle,
+                        children: label
+                    }) : /*#__PURE__*/ jsx(Fragment, {}),
+                    /*#__PURE__*/ jsxs(View, {
+                        className: itemBodyClassName,
+                        style: itemBodyStyle,
+                        children: [
+                            /*#__PURE__*/ jsx(FairysValtioFormParentAttrsContext.Provider, {
+                                value: formAttrsNameInstance,
+                                children: /*#__PURE__*/ jsx(View, {
+                                    className: itemInputClassName,
+                                    children: children
+                                })
+                            }),
+                            extra ? /*#__PURE__*/ jsx(View, {
+                                className: itemExtraClassName,
+                                children: extra
+                            }) : /*#__PURE__*/ jsx(Fragment, {}),
+                            'body' === itemBorderType && isInvalid ? /*#__PURE__*/ jsx(View, {
+                                className: errorClassName,
+                                children: error
+                            }) : /*#__PURE__*/ jsx(Fragment, {})
+                        ]
+                    })
+                ]
+            }),
+            helpText ? /*#__PURE__*/ jsx(View, {
+                className: helpClassName,
+                children: helpText
+            }) : /*#__PURE__*/ jsx(Fragment, {}),
+            isInvalid && 'body' !== itemBorderType ? /*#__PURE__*/ jsx(View, {
+                className: errorClassName,
+                children: error
+            }) : /*#__PURE__*/ jsx(Fragment, {})
+        ]
+    });
+}
+function FairysTaroValtioFormHideItem(props) {
+    const [state] = useFairysValtioFormInstanceContextHideState();
+    const isHide = state[props.name];
+    if (isHide) return /*#__PURE__*/ jsx(Fragment, {});
+    return /*#__PURE__*/ jsx(FairysTaroValtioFormItemBase, {
+        ...props
+    });
+}
+function FairysTaroValtioFormItemNoStyle(props) {
+    const { children, formAttrsNameInstance } = useFairysValtioFormItemNoStyleAttrs(props);
+    return /*#__PURE__*/ jsx(FairysValtioFormParentAttrsContext.Provider, {
+        value: formAttrsNameInstance,
+        children: children
+    });
+}
+function FairysTaroValtioFormItem(props) {
+    const { isHide, noStyle, ...rest } = props;
+    if (isHide) return /*#__PURE__*/ jsx(FairysTaroValtioFormHideItem, {
+        ...rest
+    });
+    if (noStyle) return /*#__PURE__*/ jsx(FairysTaroValtioFormItemNoStyle, {
+        ...rest
+    });
+    return /*#__PURE__*/ jsx(FairysTaroValtioFormItemBase, {
+        ...rest
+    });
+}
+export { FairysTaroValtioFormHideItem, FairysTaroValtioFormItem, FairysTaroValtioFormItemBase, FairysTaroValtioFormItemNoStyle };

package/esm/form.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { FairysTaroValtioFormLayout } from "./layout.js";
+import { FairysTaroValtioFormHideItem, FairysTaroValtioFormItem, FairysTaroValtioFormItemBase } from "./form.item.js";
+import { FairysValtioFormInstanceContext, useFairysValtioForm, useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextHideState, useFairysValtioFormInstanceContextState } from "@fairys/valtio-form-basic";
+export * from "@fairys/valtio-form-basic";
+export * from "./form.item.js";
+export * from "./layout.js";
+function FairysTaroValtioForm(props) {
+    const { formInstance, children, ...rest } = useFairysValtioForm(props);
+    return /*#__PURE__*/ jsx(FairysValtioFormInstanceContext.Provider, {
+        value: formInstance,
+        children: /*#__PURE__*/ jsx(FairysTaroValtioFormLayout, {
+            ...rest,
+            children: children
+        })
+    });
+}
+FairysTaroValtioForm.useForm = useFairysValtioFormInstance;
+FairysTaroValtioForm.useFormState = useFairysValtioFormInstanceContextState;
+FairysTaroValtioForm.useFormHideState = useFairysValtioFormInstanceContextHideState;
+FairysTaroValtioForm.useFormInstance = useFairysValtioFormInstanceContext;
+FairysTaroValtioForm.FormItemBase = FairysTaroValtioFormItemBase;
+FairysTaroValtioForm.FormItem = FairysTaroValtioFormItem;
+FairysTaroValtioForm.FormHideItem = FairysTaroValtioFormHideItem;
+export { FairysTaroValtioForm };

package/esm/index.d.ts

@@ -0,0 +1 @@
+export * from './form';

package/esm/index.js

@@ -0,0 +1 @@
+export * from "./form.js";

package/esm/layout.d.ts

@@ -0,0 +1,4 @@
+import type { FairysValtioFormLayoutAttrsProps } from '@fairys/valtio-form-basic';
+export interface FairysTaroValtioFormLayoutProps extends FairysValtioFormLayoutAttrsProps {
+}
+export declare function FairysTaroValtioFormLayout(props: FairysTaroValtioFormLayoutProps): import("react/jsx-runtime").JSX.Element;

package/esm/layout.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { View } from "@tarojs/components";
+import { FairysValtioFormLayoutContext, useFairysValtioFormLayoutAttrs } from "@fairys/valtio-form-basic";
+function FairysTaroValtioFormLayout(props) {
+    const { children, title, extra } = props;
+    const { formLayoutInstance, layoutName, layoutStyle, headerName, headerStyle, headerTitleName, headerExtraName, bodyName, bodyStyle } = useFairysValtioFormLayoutAttrs(props);
+    return /*#__PURE__*/ jsx(FairysValtioFormLayoutContext.Provider, {
+        value: formLayoutInstance,
+        children: /*#__PURE__*/ jsxs(View, {
+            className: layoutName,
+            style: layoutStyle,
+            children: [
+                title || extra ? /*#__PURE__*/ jsxs(View, {
+                    style: headerStyle,
+                    className: headerName,
+                    children: [
+                        /*#__PURE__*/ jsx(View, {
+                            className: headerTitleName,
+                            children: title
+                        }),
+                        /*#__PURE__*/ jsx(View, {
+                            className: headerExtraName,
+                            children: extra
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsx(Fragment, {}),
+                /*#__PURE__*/ jsx(View, {
+                    className: bodyName,
+                    style: bodyStyle,
+                    children: children
+                })
+            ]
+        })
+    });
+}
+export { FairysTaroValtioFormLayout };

package/lib/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __webpack_modules__ = {
+    "./form": function(module) {
+        module.exports = require("./form.js");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    var _form__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./form");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _form__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _form__WEBPACK_IMPORTED_MODULE_0__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+})();
+for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/package.json

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

package/src/form.item.tsx

@@ -0,0 +1,104 @@
+/**表单项*/
+
+import { View } from '@tarojs/components';
+import type { ViewProps } from '@tarojs/components';
+import { Fragment } from 'react';
+import type { FairysValtioFormItemAttrsProps, MObject } from '@fairys/valtio-form-basic';
+import {
+  useFairysValtioFormItemAttrs,
+  useFairysValtioFormInstanceContextHideState,
+  useFairysValtioFormItemNoStyleAttrs,
+  FairysValtioFormParentAttrsContext,
+} from '@fairys/valtio-form-basic';
+
+export interface FairysTaroValtioFormItemProps<T extends MObject<T> = object>
+  extends Omit<ViewProps, 'style'>,
+  FairysValtioFormItemAttrsProps {
+  /**是否使用控制隐藏的表单项*/
+  isHide?: boolean;
+  /**是否使用无样式表单项*/
+  noStyle?: boolean;
+}
+
+/**普通表单项*/
+export function FairysTaroValtioFormItemBase<T extends MObject<T> = object>(
+  props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
+) {
+  const { label, extra, helpText } = props;
+  const {
+    itemClassName,
+    itemStyle,
+    containerClassName,
+    itemLabelClassName,
+    itemLabelStyle,
+    itemBodyClassName,
+    itemBodyStyle,
+    itemInputClassName,
+    itemExtraClassName,
+    errorClassName,
+    helpClassName,
+    isInvalid,
+    itemBorderType,
+    children,
+    error,
+    formAttrsNameInstance,
+  } = useFairysValtioFormItemAttrs(props);
+
+  return (
+    <View className={itemClassName} style={itemStyle}>
+      <View className={containerClassName}>
+        {label ? (
+          <View className={itemLabelClassName} style={itemLabelStyle}>
+            {label}
+          </View>
+        ) : (
+          <Fragment />
+        )}
+        <View className={itemBodyClassName} style={itemBodyStyle}>
+          <FairysValtioFormParentAttrsContext.Provider value={formAttrsNameInstance}>
+            <View className={itemInputClassName}>{children}</View>
+          </FairysValtioFormParentAttrsContext.Provider>
+          {extra ? <View className={itemExtraClassName}>{extra}</View> : <Fragment />}
+          {itemBorderType === 'body' && isInvalid ? <View className={errorClassName}>{error}</View> : <Fragment />}
+        </View>
+      </View>
+      {helpText ? <View className={helpClassName}>{helpText}</View> : <Fragment />}
+      {isInvalid && itemBorderType !== 'body' ? <View className={errorClassName}>{error}</View> : <Fragment />}
+    </View>
+  );
+}
+/**控制隐藏的表单项*/
+export function FairysTaroValtioFormHideItem<T extends MObject<T> = object>(
+  props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
+) {
+  const [state] = useFairysValtioFormInstanceContextHideState();
+  const isHide = state[props.name];
+  if (isHide) {
+    return <Fragment />;
+  }
+  return <FairysTaroValtioFormItemBase<T> {...props} />;
+}
+
+/**无样式表单项*/
+export function FairysTaroValtioFormItemNoStyle<T extends MObject<T> = object>(
+  props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
+) {
+  const { children, formAttrsNameInstance } = useFairysValtioFormItemNoStyleAttrs(props);
+  return (
+    <FairysValtioFormParentAttrsContext.Provider value={formAttrsNameInstance}>
+      {children}
+    </FairysValtioFormParentAttrsContext.Provider>
+  );
+}
+
+/**表单项基础组件(根据isHide和noStyle判断是否使用控制隐藏的表单项和无样式表单项)*/
+export function FairysTaroValtioFormItem<T extends MObject<T> = object>(props: FairysTaroValtioFormItemProps<T>) {
+  const { isHide, noStyle, ...rest } = props;
+  if (isHide) {
+    return <FairysTaroValtioFormHideItem<T> {...rest} />;
+  }
+  if (noStyle) {
+    return <FairysTaroValtioFormItemNoStyle<T> {...rest} />;
+  }
+  return <FairysTaroValtioFormItemBase<T> {...rest} />;
+}

package/src/form.tsx

@@ -0,0 +1,38 @@
+import { FairysTaroValtioFormLayout } from './layout';
+import { FairysTaroValtioFormItem, FairysTaroValtioFormHideItem, FairysTaroValtioFormItemBase } from './form.item';
+import {
+  useFairysValtioForm,
+  FairysValtioFormInstanceContext,
+  useFairysValtioFormInstance,
+  useFairysValtioFormInstanceContext,
+  useFairysValtioFormInstanceContextState,
+  useFairysValtioFormInstanceContextHideState,
+} from '@fairys/valtio-form-basic';
+import type { FairysValtioFormAttrsProps, MObject } from '@fairys/valtio-form-basic';
+export * from '@fairys/valtio-form-basic';
+export * from './form.item';
+export * from './layout';
+export interface FairysTaroValtioFormProps<T extends MObject<T> = object> extends FairysValtioFormAttrsProps<T> { }
+
+export function FairysTaroValtioForm<T extends MObject<T> = object>(props: FairysTaroValtioFormProps<T>) {
+  const { formInstance, children, ...rest } = useFairysValtioForm(props);
+  return (
+    <FairysValtioFormInstanceContext.Provider value={formInstance}>
+      <FairysTaroValtioFormLayout {...rest}>{children}</FairysTaroValtioFormLayout>
+    </FairysValtioFormInstanceContext.Provider>
+  );
+}
+/**初始化实例*/
+FairysTaroValtioForm.useForm = useFairysValtioFormInstance;
+/**获取状态*/
+FairysTaroValtioForm.useFormState = useFairysValtioFormInstanceContextState;
+/**获取隐藏状态*/
+FairysTaroValtioForm.useFormHideState = useFairysValtioFormInstanceContextHideState;
+/**获取上下文实例*/
+FairysTaroValtioForm.useFormInstance = useFairysValtioFormInstanceContext;
+/**表单项基础组件*/
+FairysTaroValtioForm.FormItemBase = FairysTaroValtioFormItemBase;
+/**表单项*/
+FairysTaroValtioForm.FormItem = FairysTaroValtioFormItem;
+/**隐藏表单想*/
+FairysTaroValtioForm.FormHideItem = FairysTaroValtioFormHideItem;

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './form';

package/src/layout.tsx

@@ -0,0 +1,39 @@
+import { Fragment } from 'react';
+import { View } from '@tarojs/components';
+import type { FairysValtioFormLayoutAttrsProps } from '@fairys/valtio-form-basic';
+import { FairysValtioFormLayoutContext, useFairysValtioFormLayoutAttrs } from '@fairys/valtio-form-basic';
+export interface FairysTaroValtioFormLayoutProps extends FairysValtioFormLayoutAttrsProps { }
+
+export function FairysTaroValtioFormLayout(props: FairysTaroValtioFormLayoutProps) {
+  const { children, title, extra } = props;
+
+  const {
+    formLayoutInstance,
+    layoutName,
+    layoutStyle,
+    headerName,
+    headerStyle,
+    headerTitleName,
+    headerExtraName,
+    bodyName,
+    bodyStyle,
+  } = useFairysValtioFormLayoutAttrs(props);
+
+  return (
+    <FairysValtioFormLayoutContext.Provider value={formLayoutInstance}>
+      <View className={layoutName} style={layoutStyle}>
+        {title || extra ? (
+          <View style={headerStyle} className={headerName}>
+            <View className={headerTitleName}>{title}</View>
+            <View className={headerExtraName}>{extra}</View>
+          </View>
+        ) : (
+          <Fragment />
+        )}
+        <View className={bodyName} style={bodyStyle}>
+          {children}
+        </View>
+      </View>
+    </FairysValtioFormLayoutContext.Provider>
+  );
+}