@hzab/form-render-mobile 0.4.7 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render-mobile",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "description": "formily-form-render-mobile",
   "main": "lib",
   "scripts": {

package/src/components/FormItem/index.less

@@ -0,0 +1,47 @@
+.formily-form-item {
+  margin-bottom: 2vw;
+  &:last-child {
+    margin-bottom: unset;
+  }
+  .form-item-label {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .form-item-label-text {
+      white-space: pre;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    &.item-label-wrap {
+      .form-item-label-text {
+        white-space: pre-line;
+        word-break: break-all;
+        overflow: unset;
+        text-overflow: unset;
+      }
+    }
+    &.label-align-right {
+      justify-content: flex-end;
+      text-align: right;
+    }
+  }
+  .form-item-content {
+    flex: 1;
+    color: #808080;
+  }
+  &.layout-vertical {
+    align-items: flex-start;
+    flex-direction: column;
+    margin-bottom: 4vw;
+    &:last-child {
+      margin-bottom: unset;
+    }
+  }
+  &.layout-between {
+    justify-content: space-between;
+    .form-item-content {
+      flex: unset;
+      text-align: right;
+    }
+  }
+}

package/src/components/FormItem/index.tsx

@@ -0,0 +1,256 @@
+import { isVoidField } from "@formily/core";
+import { connect, mapProps, useFieldSchema, useField } from "@formily/react";
+import { useFormLayout } from "../FormLayout";
+import { Popover, Grid } from "antd-mobile";
+import {
+  QuestionCircleOutline,
+  CloseCircleOutline,
+  CheckCircleOutline,
+  ExclamationCircleOutline,
+} from "antd-mobile-icons";
+import { useGlobalPropsContext } from "../../common/global-props-context";
+
+import "./index.less";
+
+export interface IFormItemProps {
+  className?: string;
+  style?: React.CSSProperties;
+  prefixCls?: string;
+  label?: React.ReactNode;
+  colon?: boolean;
+  tooltip?: React.ReactNode;
+  tooltipIcon?: React.ReactNode;
+  layout?: "vertical" | "horizontal" | "inline";
+  tooltipLayout?: "icon" | "text";
+  labelStyle?: React.CSSProperties;
+  labelAlign?: "left" | "right";
+  labelFor?: string;
+  labelWrap?: boolean;
+  labelWidth?: number | string;
+  wrapperWidth?: number | string;
+  labelCol?: number;
+  wrapperCol?: number;
+  wrapperAlign?: "left" | "right";
+  wrapperWrap?: boolean;
+  wrapperStyle?: React.CSSProperties;
+  fullness?: boolean;
+  addonBefore?: React.ReactNode;
+  addonAfter?: React.ReactNode;
+  size?: "small" | "default" | "large";
+  inset?: boolean;
+  extra?: React.ReactNode;
+  feedbackText?: React.ReactNode;
+  feedbackLayout?: "loose" | "terse" | "popover" | "none" | (string & {});
+  feedbackStatus?: "error" | "warning" | "success" | "pending" | (string & {});
+  feedbackIcon?: React.ReactNode;
+  enableOutlineFeedback?: boolean;
+  getPopupContainer?: (node: HTMLElement) => HTMLElement;
+  asterisk?: boolean;
+  optionalMarkHidden?: boolean;
+  gridSpan?: number;
+  bordered?: boolean;
+}
+
+type ComposeFormItem = React.FC<React.PropsWithChildren<IFormItemProps>> & {
+  BaseItem?: React.FC<React.PropsWithChildren<IFormItemProps>>;
+};
+
+const ICON_MAP = {
+  error: <CloseCircleOutline />,
+  success: <CheckCircleOutline />,
+  warning: <ExclamationCircleOutline />,
+};
+
+const useFormItemLayout = (props: IFormItemProps) => {
+  const layout = useFormLayout();
+  const layoutType = props.layout ?? layout.layout ?? "horizontal";
+  return {
+    ...props,
+    ...layout,
+    layout: layoutType,
+    labelAlign:
+      layoutType === "vertical" ? props.labelAlign ?? "left" : props.labelAlign ?? layout.labelAlign ?? "left",
+    labelWrap: props.labelWrap ?? layout.labelWrap,
+    labelWidth: props.labelWidth ?? layout.labelWidth,
+    wrapperWidth: props.wrapperWidth ?? layout.wrapperWidth,
+    wrapperAlign: props.wrapperAlign ?? layout.wrapperAlign,
+    wrapperWrap: props.wrapperWrap ?? layout.wrapperWrap,
+    size: props.size ?? layout.size,
+    inset: props.inset ?? layout.inset,
+    asterisk: props.asterisk,
+    optionalMarkHidden: props.optionalMarkHidden,
+    bordered: props.bordered ?? layout.bordered,
+    feedbackIcon: props.feedbackIcon,
+    feedbackLayout: props.feedbackLayout ?? layout.feedbackLayout ?? "loose",
+    tooltipLayout: props.tooltipLayout ?? layout.tooltipLayout ?? "icon",
+    tooltipIcon: props.tooltipIcon ?? layout.tooltipIcon ?? <QuestionCircleOutline />,
+  };
+};
+
+export const BaseItem = ({ children, ...props }) => {
+  // 组件外部传入的 props
+  const globalProps = useGlobalPropsContext();
+  const field = useField();
+  const { title } = field;
+  const { colon = "：", LabelSlots = {}, Slots = {} } = globalProps;
+  const schema = useFieldSchema();
+  const { name } = schema;
+
+  const formLayout = useFormItemLayout({ ...props });
+
+  const {
+    label,
+    style,
+    layout,
+    addonBefore,
+    addonAfter,
+    asterisk,
+    optionalMarkHidden = false,
+    feedbackStatus,
+    extra,
+    feedbackText,
+    fullness,
+    feedbackLayout,
+    feedbackIcon,
+    enableOutlineFeedback = true,
+    getPopupContainer,
+    inset,
+    bordered = true,
+    labelWidth,
+    wrapperWidth,
+    labelCol,
+    wrapperCol,
+    labelAlign,
+    wrapperAlign = "left",
+    size,
+    labelWrap,
+    wrapperWrap,
+    tooltipLayout,
+    tooltip,
+    tooltipIcon,
+  } = formLayout;
+
+  const labelStyle = { ...formLayout.labelStyle };
+  const wrapperStyle = { ...formLayout.wrapperStyle };
+
+  if (labelWidth || wrapperWidth) {
+    if (labelWidth) {
+      labelStyle.width = labelWidth === "auto" ? undefined : labelWidth;
+      labelStyle.maxWidth = labelWidth === "auto" ? undefined : labelWidth;
+    }
+    if (wrapperWidth) {
+      wrapperStyle.width = wrapperWidth === "auto" ? undefined : wrapperWidth;
+      wrapperStyle.maxWidth = wrapperWidth === "auto" ? undefined : wrapperWidth;
+    }
+    // 栅格模式
+  }
+
+  let formatChildren =
+    feedbackLayout === "popover" ? (
+      <Popover
+        placement="top"
+        content={
+          <div
+          // className={cls({
+          //   [`${prefixCls}-${feedbackStatus}-help`]: !!feedbackStatus,
+          //   [`${prefixCls}-help`]: true,
+          // })}
+          >
+            {ICON_MAP[feedbackStatus]} {feedbackText}
+          </div>
+        }
+        visible={!!feedbackText}
+        // getPopupContainer={getPopupContainer}
+      >
+        {children}
+      </Popover>
+    ) : (
+      children
+    );
+
+  if (Slots && Slots[name]) {
+    const Com = Slots[name];
+    // 获取数据
+    // @ts-ignore
+    const value = field?.value;
+    formatChildren = (
+      <Com {...props} value={value} data={value} field={field} itemSchema={schema} globalProps={globalProps} />
+    );
+  }
+
+  let renderLabelText = () => <div className="form-item-label-text">{title}</div>;
+
+  if (LabelSlots && LabelSlots[name]) {
+    const Com = LabelSlots[name];
+    renderLabelText = () => <Com label={props.label} />;
+  }
+
+  return (
+    <Grid columns={24} className={`formily-form-item layout-${layout}`}>
+      <Grid.Item span={labelCol}>
+        {title && (
+          <div
+            className={`form-item-label ${labelWrap ? "item-label-wrap" : ""} label-align-${labelAlign}`}
+            style={labelStyle}
+          >
+            {renderLabelText()}
+            {colon ? <span className="form-item-colon">{colon || "："}</span> : null}
+          </div>
+        )}
+      </Grid.Item>
+      <Grid.Item className="form-item-content" span={wrapperCol}>
+        {formatChildren}
+      </Grid.Item>
+    </Grid>
+  );
+};
+
+// 适配
+export const FormItem: any = connect(
+  BaseItem,
+  mapProps((props: any, field: any) => {
+    if (isVoidField(field))
+      return {
+        label: field.title || props.label,
+        asterisk: props.asterisk,
+        extra: props.extra || field.description,
+      };
+    if (!field) return props;
+    const takeFeedbackStatus = () => {
+      if (field.validating) return "pending";
+      return field.decoratorProps.feedbackStatus || field.validateStatus;
+    };
+    const takeMessage = () => {
+      const split = (messages: any[]) => {
+        return messages.reduce((buf, text, index) => {
+          if (!text) return buf;
+          return index < messages.length - 1 ? buf.concat([text, ", "]) : buf.concat([text]);
+        }, []);
+      };
+      if (field.validating) return;
+      if (props.feedbackText) return props.feedbackText;
+      if (field.selfErrors.length) return split(field.selfErrors);
+      if (field.selfWarnings.length) return split(field.selfWarnings);
+      if (field.selfSuccesses.length) return split(field.selfSuccesses);
+    };
+    const takeAsterisk = () => {
+      if (field.required && field.pattern !== "readPretty") {
+        return true;
+      }
+      if ("asterisk" in props) {
+        return props.asterisk;
+      }
+      return false;
+    };
+    return {
+      label: props.label || field.title,
+      feedbackStatus: takeFeedbackStatus(),
+      feedbackText: takeMessage(),
+      asterisk: takeAsterisk(),
+      optionalMarkHidden: field.pattern === "readPretty" && !("asterisk" in props),
+      extra: props.extra || field.description,
+    };
+  }),
+);
+
+export default FormItem;

package/src/components/FormLayout/index.tsx

@@ -0,0 +1,95 @@
+import React, { createContext, useContext } from "react";
+import cls from "classnames";
+import { usePrefixCls } from "@formily/antd-mobile/esm/__builtins__";
+import { List } from "antd-mobile";
+import { ListProps } from "antd-mobile/es/components/list";
+
+export interface IFormLayoutProps extends ListProps {
+  prefixCls?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  layout?: "vertical" | "horizontal";
+  labelAlign?: "right" | "left" | ("right" | "left")[];
+  wrapperAlign?: "right" | "left" | ("right" | "left")[];
+  labelCol?: number;
+  wrapperCol?: number;
+  labelWrap?: boolean;
+  labelWidth?: number;
+  wrapperWidth?: number;
+  wrapperWrap?: boolean;
+  inset?: boolean;
+  shallow?: boolean;
+  bordered?: boolean;
+  spaceGap?: number;
+  gridColumnGap?: number;
+  gridRowGap?: number;
+  tooltipLayout?: "icon" | "text";
+  tooltipIcon?: React.ReactNode;
+  feedbackLayout?: "loose" | "terse" | "popover" | "none";
+  size?: "mini" | "small" | "middle" | "large";
+  __layout__?: boolean;
+}
+
+export type IFormLayoutContext = IFormLayoutProps;
+export const FormLayoutDeepContext = createContext<IFormLayoutContext>(null);
+export const FormLayoutShallowContext = createContext<IFormLayoutContext>(null);
+export const useFormDeepLayout = () => useContext(FormLayoutDeepContext);
+export const useFormShallowLayout = () => useContext(FormLayoutShallowContext);
+export const useFormLayout = () => ({
+  ...useFormDeepLayout(),
+  ...useFormShallowLayout(),
+});
+
+export const FormLayout: React.FC<IFormLayoutProps> & {
+  useFormLayout: () => IFormLayoutContext;
+  useFormDeepLayout: () => IFormLayoutContext;
+  useFormShallowLayout: () => IFormLayoutContext;
+} = ({ shallow, children, prefixCls, className, style, ...props }) => {
+  const deepLayout = useFormDeepLayout();
+  const formPrefixCls = usePrefixCls("form", { prefixCls });
+  const layoutPrefixCls = usePrefixCls("formily-layout", { prefixCls });
+  const layoutClassName = cls(
+    layoutPrefixCls,
+    {
+      [`${formPrefixCls}-${props.layout}`]: true,
+      [`${formPrefixCls}-${props.size}`]: props.size,
+    },
+    className,
+  );
+  const renderChildren = () => {
+    const newDeepLayout = {
+      ...deepLayout,
+      __layout__: true,
+    };
+    if (!shallow) {
+      Object.assign(newDeepLayout, props);
+    } else {
+      if (props.size) {
+        newDeepLayout.size = props.size;
+      }
+    }
+    return (
+      <FormLayoutDeepContext.Provider value={newDeepLayout}>
+        <FormLayoutShallowContext.Provider value={shallow ? props : undefined}>
+          {children}
+        </FormLayoutShallowContext.Provider>
+      </FormLayoutDeepContext.Provider>
+    );
+  };
+
+  return (
+    <List className={layoutClassName} style={style} mode={props.mode}>
+      {renderChildren()}
+    </List>
+  );
+};
+
+FormLayout.defaultProps = {
+  shallow: true,
+};
+
+FormLayout.useFormDeepLayout = useFormDeepLayout;
+FormLayout.useFormShallowLayout = useFormShallowLayout;
+FormLayout.useFormLayout = useFormLayout;
+
+export default FormLayout;

package/src/components/FormLayout/style.ts

@@ -0,0 +1 @@
+import "antd-mobile/es/components/list/list.css";

package/src/components/index.ts

@@ -15,3 +15,7 @@ export * from "./Checkbox";
 export * from "./LocationPicker";
 export * from "./TreeSelect";
 export * from "./Slider";
+export * from "./FormItem";
+import FormLayout from "./FormLayout";
+
+export { FormLayout };

package/src/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useImperativeHandle, forwardRef } from "react";
 
 import {
-  FormLayout,
-  FormItem,
+  // FormLayout,
+  // FormItem,
   CascadePicker,
   CheckList,
   Checkbox,
@@ -26,6 +26,8 @@ import * as customComponents from "./components/index";
 import { GlobalPropsContext } from "./common/global-props-context";
 import { schemaHandler } from "./common/schemaHandler";
 
+import FormLayout, { FormLayoutDeepContext } from "./components/FormLayout";
+
 import { formPropsI } from "./type.d";
 
 import "./index.less";
@@ -36,8 +38,8 @@ const FormRender = forwardRef((props: formPropsI, parentRef) => {
     () =>
       createSchemaField({
         components: {
-          FormItem,
-          FormLayout,
+          // FormItem,
+          // FormLayout,
           CascadePicker,
           CheckList,
           // Checkbox,
@@ -90,21 +92,23 @@ const FormRender = forwardRef((props: formPropsI, parentRef) => {
     <GlobalPropsContext.Provider value={props}>
       <div className={`form-render ${props.className} ${isDetail ? "form-render-detail" : ""}`}>
         <FormProvider form={formRender}>
-          <FormLayout {...formLayoutProps}>
-            {/*  @ts-ignore */}
-            <SchemaField schema={schema?.schema} />
-            {props.hasSubmit !== false && isDetail !== true && readOnly !== true && !props.disabled ? (
-              <FormButtonGroup>
-                <Submit
-                  onSubmit={(values) => {
-                    props.onSubmit && props.onSubmit(values);
-                  }}
-                >
-                  {props.submitText || "提交"}
-                </Submit>
-              </FormButtonGroup>
-            ) : null}
-          </FormLayout>
+          <FormLayoutDeepContext.Provider value={formLayoutProps}>
+            <FormLayout {...formLayoutProps}>
+              {/*  @ts-ignore */}
+              <SchemaField schema={schema?.schema} />
+              {props.hasSubmit !== false && isDetail !== true && readOnly !== true && !props.disabled ? (
+                <FormButtonGroup>
+                  <Submit
+                    onSubmit={(values) => {
+                      props.onSubmit && props.onSubmit(values);
+                    }}
+                  >
+                    {props.submitText || "提交"}
+                  </Submit>
+                </FormButtonGroup>
+              ) : null}
+            </FormLayout>
+          </FormLayoutDeepContext.Provider>
           <div className="form-render-footer">{props.footerRender && props.footerRender()}</div>
         </FormProvider>
       </div>