@fairys/valtio-form-basic 0.0.12 → 0.0.13

package/lib/form/layout.d.ts

@@ -0,0 +1,153 @@
+export interface FairysValtioFormLayoutContextOptions {
+    /**平台*/
+    platform?: 'pc' | 'rn' | 'taro';
+    /**列数据*/
+    colCount?: number;
+    /**规则校验失败错误提示位置*/
+    errorLayout?: 'bottom-left' | 'bottom-right' | 'top-right' | 'top-left' | 'left-border-top' | 'right-border-top';
+    /**
+     * label显示模式
+     * @platform taro 支持 between
+     */
+    labelMode?: 'left' | 'top' | 'between';
+    /**表单项 className*/
+    formItemClassName?: string;
+    /**表单项 style*/
+    formItemStyle?: React.CSSProperties;
+    /**表单项 label  className*/
+    formItemLabelClassName?: string;
+    /**表单项 label  style*/
+    formItemLabelStyle?: React.CSSProperties;
+    /**表单项 body  className*/
+    formItemBodyClassName?: string;
+    /**表单项 body  style*/
+    formItemBodyStyle?: React.CSSProperties;
+    /**
+     * 底部边框类型
+     */
+    itemBorderType?: 'bottom' | 'body' | 'none';
+    /**边框颜色*/
+    itemBorderColor?: React.CSSProperties['borderColor'];
+    /**是否校验失败时显示红色边框*/
+    isInvalidBorderRed?: boolean;
+    /**是否校验失败时显示红色文本*/
+    isInvalidTextRed?: boolean;
+    /**是否显示冒号*/
+    showColon?: boolean;
+}
+export interface FairysValtioFormLayoutAttrsProps extends FairysValtioFormLayoutContextOptions {
+    /**
+     * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
+     */
+    gap?: string | number;
+    /**标题*/
+    title?: React.ReactNode;
+    /**额外内容*/
+    extra?: React.ReactNode;
+    /**内容*/
+    children?: React.ReactNode;
+    /**是否占据整行*/
+    isAllColSpan?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    /**头部ClassName*/
+    headerClassName?: string;
+    /**头部样式*/
+    headerStyle?: React.CSSProperties;
+    /**内容ClassName*/
+    bodyClassName?: string;
+    /**内容样式*/
+    bodyStyle?: React.CSSProperties;
+    /**是否边框*/
+    bordered?: boolean;
+    /**显示阴影*/
+    boxShadow?: boolean;
+    /**最后一个是否显示底部边框*/
+    lastItemBordered?: boolean;
+}
+export declare class FairysValtioFormLayoutInstance {
+    state: FairysValtioFormLayoutContextOptions;
+    updated: (options?: FairysValtioFormLayoutContextOptions) => void;
+}
+export declare const useFairysValtioFormLayoutInstance: (instance?: FairysValtioFormLayoutInstance) => FairysValtioFormLayoutInstance;
+export declare const FairysValtioFormLayoutContext: import("react").Context<FairysValtioFormLayoutInstance>;
+export declare const useFairysValtioFormLayoutContext: () => [FairysValtioFormLayoutContextOptions, FairysValtioFormLayoutInstance];
+/**
+ * 布局属性处理
+ *
+ * @example
+ *
+ * ```tsx
+import { Fragment } from 'react'
+import { useFairysValtioFormLayoutAttrs, FairysValtioFormLayoutContext } from "@fairys/valtio-form"
+import type { FairysValtioFormLayoutAttrsProps } from "@fairys/valtio-form"
+
+export interface LayoutProps extends FairysValtioFormLayoutAttrsProps {}
+
+export const Layout = (props: LayoutProps) => {
+  const { children, title, extra } = props
+  const {
+    formLayoutInstance,
+    layoutName, layoutStyle,
+    headerName, headerStyle,
+    headerTitleName, headerExtraName,
+    bodyName, bodyStyle
+  } = useFairysValtioFormLayoutAttrs(props)
+
+   return (
+     <FairysValtioFormLayoutContext.Provider value={formLayoutInstance}>
+       <div className={layoutName} style={layoutStyle}>
+         <div>
+           {title || extra ? (
+             <div style={headerStyle} className={headerName}>
+               <div className={headerTitleName}>{title}</div>
+               <div className={headerExtraName}>{extra}</div>
+             </div>
+           ) : (
+             <Fragment />
+           )}
+         </div>
+         <div className={bodyName} style={bodyStyle}>
+           {children}
+         </div>
+       </div>
+     </FairysValtioFormLayoutContext.Provider>
+   );
+}
+  ```
+ *
+*/
+export declare function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttrsProps): FairysValtioFormLayoutAttrsReturn;
+export interface FairysValtioFormLayoutAttrsReturn {
+    /**列数*/
+    colCount: number;
+    /**规则校验失败错误提示位置*/
+    errorLayout: string;
+    /**
+     * label显示模式
+     * @platform taro 支持 between
+     */
+    labelMode: string;
+    /**
+     * 底部边框类型
+     */
+    itemBorderType: string;
+    /**表单布局实例*/
+    formLayoutInstance: FairysValtioFormLayoutInstance;
+    /**布局ClassName*/
+    layoutName: string;
+    /**布局样式*/
+    layoutStyle: React.CSSProperties;
+    /**头部ClassName*/
+    headerName: string;
+    /**头部样式*/
+    headerStyle: React.CSSProperties;
+    /**头部标题ClassName*/
+    headerTitleName: string;
+    /**头部额外内容ClassName*/
+    headerExtraName: string;
+    /**内容ClassName*/
+    bodyName: string;
+    /**内容样式*/
+    bodyStyle: React.CSSProperties;
+}

package/lib/form/layout.js

@@ -0,0 +1,196 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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__);
+__webpack_require__.d(__webpack_exports__, {
+    FairysValtioFormLayoutInstance: ()=>FairysValtioFormLayoutInstance,
+    useFairysValtioFormLayoutContext: ()=>useFairysValtioFormLayoutContext,
+    useFairysValtioFormLayoutInstance: ()=>useFairysValtioFormLayoutInstance,
+    FairysValtioFormLayoutContext: ()=>FairysValtioFormLayoutContext,
+    useFairysValtioFormLayoutAttrs: ()=>useFairysValtioFormLayoutAttrs
+});
+const external_react_namespaceObject = require("react");
+const external_clsx_namespaceObject = require("clsx");
+var external_clsx_default = /*#__PURE__*/ __webpack_require__.n(external_clsx_namespaceObject);
+const external_valtio_namespaceObject = require("valtio");
+class FairysValtioFormLayoutInstance {
+    state = (0, external_valtio_namespaceObject.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 = (0, external_react_namespaceObject.useRef)();
+    if (!ref.current) if (instance) ref.current = instance;
+    else ref.current = new FairysValtioFormLayoutInstance();
+    return ref.current;
+};
+const FairysValtioFormLayoutContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(new FairysValtioFormLayoutInstance());
+const useFairysValtioFormLayoutContext = ()=>{
+    const instance = (0, external_react_namespaceObject.useContext)(FairysValtioFormLayoutContext);
+    const state = (0, external_valtio_namespaceObject.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_formItemClassName = state.formItemClassName;
+    const parent_formItemStyle = state.formItemStyle;
+    const parent_formItemLabelClassName = state.formItemLabelClassName;
+    const parent_formItemLabelStyle = state.formItemLabelStyle;
+    const parent_formItemBodyClassName = state.formItemBodyClassName;
+    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 parent_platform = state.platform;
+    const { colCount = parent_colCount, errorLayout = parent_errorLayout, labelMode = parent_labelMode, formItemClassName = parent_formItemClassName, formItemStyle = parent_formItemStyle, formItemLabelClassName = parent_formItemLabelClassName, formItemLabelStyle = parent_formItemLabelStyle, formItemBodyClassName = parent_formItemBodyClassName, formItemBodyStyle = parent_formItemBodyStyle, itemBorderType = parent_borderedType, itemBorderColor = parent_itemBorderColor, lastItemBordered = true, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, showColon = parent_showColon, platform = parent_platform, gap, isAllColSpan = false, className, style, headerClassName, headerStyle, bodyClassName, bodyStyle, bordered, boxShadow } = props;
+    (0, external_react_namespaceObject.useMemo)(()=>formLayoutInstance.updated({
+            colCount,
+            errorLayout,
+            labelMode,
+            formItemClassName,
+            formItemStyle,
+            formItemLabelClassName,
+            formItemLabelStyle,
+            formItemBodyClassName,
+            formItemBodyStyle,
+            itemBorderType,
+            itemBorderColor,
+            isInvalidBorderRed,
+            isInvalidTextRed,
+            showColon,
+            platform
+        }), [
+        colCount,
+        errorLayout,
+        labelMode,
+        formItemClassName,
+        formItemStyle,
+        formItemLabelClassName,
+        formItemLabelStyle,
+        formItemBodyClassName,
+        formItemBodyStyle,
+        itemBorderType,
+        itemBorderColor,
+        isInvalidBorderRed,
+        isInvalidTextRed,
+        showColon,
+        platform
+    ]);
+    const layoutCls = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()("fairys-valtio-form-layout fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__text-_zkh1_12px_zhk2_ fairystaroform__w-full fairystaroform__box-border fairystaroform__rounded-_zkh1_8px_zhk2_", {
+            'fairys-valtio-form-layout-all-col-span': isAllColSpan,
+            'fairys-valtio-form-layout-box-shadow': boxShadow,
+            'fairystaroform__border fairystaroform__border-solid fairystaroform__border-gray-200': bordered,
+            'fairys-valtio-form-layout-last-item-no-border': !lastItemBordered
+        }, className), [
+        className,
+        isAllColSpan,
+        bordered,
+        boxShadow,
+        lastItemBordered
+    ]);
+    const headerCls = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()("fairys-valtio-form-layout-header fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__flex fairystaroform__justify-between fairystaroform__items-center fairystaroform__flex-row fairystaroform__py-_zkh1_10px_zhk2_  fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200 fairystaroform__box-border", {
+            'fairystaroform__px-_zkh1_8px_zhk2_': bordered || boxShadow,
+            'fairystaroform__px-_zkh1_4px_zhk2_': !bordered && !boxShadow
+        }, headerClassName), [
+        headerClassName,
+        bordered,
+        boxShadow
+    ]);
+    const headerTitleCls = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()("fairys-valtio-form-layout-header-title fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__text-_zkh1_14px_zhk2_ fairystaroform__font-bold fairystaroform__box-border"), []);
+    const headerExtraCls = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()("fairys-valtio-form-layout-header-extra fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__box-border"), []);
+    const body_base = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()('fairys-valtio-form-layout-body fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__px-_zkh1_8px_zhk2_ fairystaroform__w-full fairystaroform__grid  fairystaroform__box-border fairystaroform__pt-_zkh1_8px_zhk2_ fairystaroform__pb-_zkh1_12px_zhk2_ fairystaroform__gap-_zkh1_6px_zhk2_', bodyClassName), [
+        bodyClassName
+    ]);
+    const styleBase = (0, external_react_namespaceObject.useMemo)(()=>{
+        const css = {};
+        if ('string' == typeof gap) css.gap = gap;
+        if ('number' == typeof gap) css.gap = `${gap}px`;
+        if (colCount) css.gridTemplateColumns = `repeat(${colCount}, auto)`;
+        return css;
+    }, [
+        colCount,
+        gap
+    ]);
+    return {
+        colCount,
+        errorLayout,
+        labelMode,
+        itemBorderType,
+        formLayoutInstance,
+        layoutName: layoutCls,
+        layoutStyle: style,
+        headerName: headerCls,
+        headerStyle: headerStyle,
+        headerTitleName: headerTitleCls,
+        headerExtraName: headerExtraCls,
+        bodyName: body_base,
+        bodyStyle: {
+            ...styleBase,
+            ...bodyStyle
+        }
+    };
+}
+exports.FairysValtioFormLayoutContext = __webpack_exports__.FairysValtioFormLayoutContext;
+exports.FairysValtioFormLayoutInstance = __webpack_exports__.FairysValtioFormLayoutInstance;
+exports.useFairysValtioFormLayoutAttrs = __webpack_exports__.useFairysValtioFormLayoutAttrs;
+exports.useFairysValtioFormLayoutContext = __webpack_exports__.useFairysValtioFormLayoutContext;
+exports.useFairysValtioFormLayoutInstance = __webpack_exports__.useFairysValtioFormLayoutInstance;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FairysValtioFormLayoutContext",
+    "FairysValtioFormLayoutInstance",
+    "useFairysValtioFormLayoutAttrs",
+    "useFairysValtioFormLayoutContext",
+    "useFairysValtioFormLayoutInstance"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from './common';
+export * from './form/layout';
+export * from './form/form';
+export * from './form/form.item';

package/lib/index.js

@@ -1,18 +1,15 @@
 "use strict";
 var __webpack_modules__ = {
-    "./form/form.item": function(module) {
+    common: function(module) {
+        module.exports = require("./common/index.js");
+    },
+    "form/form.item": function(module) {
         module.exports = require("./form/form.item.js");
     },
-    "./form/form": function(module) {
+    "form/form": function(module) {
         module.exports = require("./form/form.js");
     },
-    "./form/hooks": function(module) {
-        module.exports = require("./form/hooks/index.js");
-    },
-    "./form/instance": function(module) {
-        module.exports = require("./form/instance/index.js");
-    },
-    "./form/layout": function(module) {
+    "form/layout": function(module) {
         module.exports = require("./form/layout.js");
     }
 };
@@ -59,34 +56,28 @@ function __webpack_require__(moduleId) {
 var __webpack_exports__ = {};
 (()=>{
     __webpack_require__.r(__webpack_exports__);
-    var _form_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./form/hooks");
-    var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _form_hooks__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _form_hooks__WEBPACK_IMPORTED_MODULE_0__[key];
-    }).bind(0, __WEBPACK_IMPORT_KEY__);
-    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _form_instance__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./form/instance");
+    var common__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("common");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _form_instance__WEBPACK_IMPORTED_MODULE_1__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _form_instance__WEBPACK_IMPORTED_MODULE_1__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in common__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return common__WEBPACK_IMPORTED_MODULE_0__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _form_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("./form/layout");
+    var form_layout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("form/layout");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _form_layout__WEBPACK_IMPORTED_MODULE_2__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _form_layout__WEBPACK_IMPORTED_MODULE_2__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in form_layout__WEBPACK_IMPORTED_MODULE_1__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return form_layout__WEBPACK_IMPORTED_MODULE_1__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _form_form__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("./form/form");
+    var form_form__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("form/form");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _form_form__WEBPACK_IMPORTED_MODULE_3__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _form_form__WEBPACK_IMPORTED_MODULE_3__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in form_form__WEBPACK_IMPORTED_MODULE_2__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return form_form__WEBPACK_IMPORTED_MODULE_2__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _form_form_item__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("./form/form.item");
+    var form_form_item__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("form/form.item");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _form_form_item__WEBPACK_IMPORTED_MODULE_4__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _form_form_item__WEBPACK_IMPORTED_MODULE_4__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in form_form_item__WEBPACK_IMPORTED_MODULE_3__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return form_form_item__WEBPACK_IMPORTED_MODULE_3__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
 })();