@hzab/form-render-mobile 0.5.1 → 0.5.2

package/package.json

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

package/src/components/FormItem/index.less

@@ -1,6 +1,9 @@
 .formily-form-item {
   display: flex;
   margin-bottom: 2vw;
+  .adm-list-item-content {
+    width: 100%;
+  }
   // 栅格布局重置样式
   &.adm-grid {
     display: grid;
@@ -8,29 +11,13 @@
   &: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 {
+  &.adm-formily-item-label-align-right {
+    .adm-formily-item-label {
       justify-content: flex-end;
       text-align: right;
     }
   }
-  .form-item-content {
+  .adm-formily-item-control {
     flex: 1;
     color: #808080;
   }
@@ -43,10 +30,183 @@
     }
   }
   &.layout-between {
-    justify-content: space-between;
-    .form-item-content {
-      flex: unset;
+    .adm-list-item-content {
+      width: 100%;
+      justify-content: space-between;
       text-align: right;
     }
   }
+
+  // 内容栅格样式
+  &.wrapper-col-24 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  &.wrapper-col-23 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 95.83333333%;
+    flex: 0 0 95.83333333%;
+    max-width: 95.83333333%;
+  }
+
+  &.wrapper-col-22 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 91.66666667%;
+    flex: 0 0 91.66666667%;
+    max-width: 91.66666667%;
+  }
+
+  &.wrapper-col-21 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 87.5%;
+    flex: 0 0 87.5%;
+    max-width: 87.5%;
+  }
+
+  &.wrapper-col-20 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 83.33333333%;
+    flex: 0 0 83.33333333%;
+    max-width: 83.33333333%;
+  }
+
+  &.wrapper-col-19 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 79.16666667%;
+    flex: 0 0 79.16666667%;
+    max-width: 79.16666667%;
+  }
+
+  &.wrapper-col-18 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 75%;
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+
+  &.wrapper-col-17 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 70.83333333%;
+    flex: 0 0 70.83333333%;
+    max-width: 70.83333333%;
+  }
+
+  &.wrapper-col-16 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 66.66666667%;
+    flex: 0 0 66.66666667%;
+    max-width: 66.66666667%;
+  }
+
+  &.wrapper-col-15 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 62.5%;
+    flex: 0 0 62.5%;
+    max-width: 62.5%;
+  }
+
+  &.wrapper-col-14 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 58.33333333%;
+    flex: 0 0 58.33333333%;
+    max-width: 58.33333333%;
+  }
+
+  &.wrapper-col-13 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 54.16666667%;
+    flex: 0 0 54.16666667%;
+    max-width: 54.16666667%;
+  }
+
+  &.wrapper-col-12 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+
+  &.wrapper-col-11 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 45.83333333%;
+    flex: 0 0 45.83333333%;
+    max-width: 45.83333333%;
+  }
+
+  &.wrapper-col-10 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 41.66666667%;
+    flex: 0 0 41.66666667%;
+    max-width: 41.66666667%;
+  }
+
+  &.wrapper-col-9 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 37.5%;
+    flex: 0 0 37.5%;
+    max-width: 37.5%;
+  }
+
+  &.wrapper-col-8 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 33.33333333%;
+    flex: 0 0 33.33333333%;
+    max-width: 33.33333333%;
+  }
+
+  &.wrapper-col-7 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 29.16666667%;
+    flex: 0 0 29.16666667%;
+    max-width: 29.16666667%;
+  }
+
+  &.wrapper-col-6 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+
+  &.wrapper-col-5 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 20.83333333%;
+    flex: 0 0 20.83333333%;
+    max-width: 20.83333333%;
+  }
+
+  &.wrapper-col-4 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 16.66666667%;
+    flex: 0 0 16.66666667%;
+    max-width: 16.66666667%;
+  }
+
+  &.wrapper-col-3 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 12.5%;
+    flex: 0 0 12.5%;
+    max-width: 12.5%;
+  }
+
+  &.wrapper-col-2 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 8.33333333%;
+    flex: 0 0 8.33333333%;
+    max-width: 8.33333333%;
+  }
+
+  &.wrapper-col-1 .adm-list-item-content-main {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 4.16666667%;
+    flex: 0 0 4.16666667%;
+    max-width: 4.16666667%;
+  }
+
+  &.wrapper-col-0 .adm-list-item-content-main {
+    display: none;
+  }
 }

package/src/components/FormItem/index.tsx

@@ -1,32 +1,23 @@
+import React, { useEffect, useRef, useState } from "react";
+import cls from "classnames";
+import { pickDataProps, usePrefixCls } from "@formily/antd-mobile/esm/__builtins__";
 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 { connect, mapProps } from "@formily/react";
+import { FormLayoutShallowContext, useFormLayout } from "../FormLayout";
+import { List, Popover } from "antd-mobile";
+import { ListItemProps } from "antd-mobile/es/components/list";
+import { CheckCircleOutline, CloseCircleOutline, ExclamationCircleOutline } from "antd-mobile-icons";
+
 import { useGlobalPropsContext } from "../../common/global-props-context";
 
 import "./index.less";
 
-export const GRID_COLUMNS = 24;
-
-export interface IFormItemProps {
+export interface IFormItemProps extends ListItemProps {
   className?: string;
   style?: React.CSSProperties;
-  prefixCls?: string;
-  label?: React.ReactNode;
-  colon?: boolean;
-  tooltip?: React.ReactNode;
-  tooltipIcon?: React.ReactNode;
-  layout?: "vertical" | "horizontal" | "inline" | "between";
-  tooltipLayout?: "icon" | "text";
+  label?: string;
   labelStyle?: React.CSSProperties;
   labelAlign?: "left" | "right";
-  labelFor?: string;
   labelWrap?: boolean;
   labelWidth?: number | string;
   wrapperWidth?: number | string;
@@ -35,43 +26,44 @@ export interface IFormItemProps {
   wrapperAlign?: "left" | "right";
   wrapperWrap?: boolean;
   wrapperStyle?: React.CSSProperties;
-  fullness?: boolean;
-  addonBefore?: React.ReactNode;
-  addonAfter?: React.ReactNode;
-  size?: "small" | "default" | "large";
-  inset?: boolean;
+  help?: string;
+  hasFeedback?: boolean;
+  required?: boolean;
+  noStyle?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
   extra?: React.ReactNode;
+  layout?: "vertical" | "horizontal" | "between";
   feedbackText?: React.ReactNode;
   feedbackLayout?: "loose" | "terse" | "popover" | "none" | (string & {});
   feedbackStatus?: "error" | "warning" | "success" | "pending" | (string & {});
   feedbackIcon?: React.ReactNode;
-  enableOutlineFeedback?: boolean;
-  getPopupContainer?: (node: HTMLElement) => HTMLElement;
+  size?: "mini" | "small" | "middle" | "large";
+  inset?: boolean;
+  bordered?: boolean;
+  tooltipLayout?: "icon" | "text";
+  tooltip?: React.ReactNode;
+  tooltipIcon?: React.ReactNode;
   asterisk?: boolean;
-  optionalMarkHidden?: boolean;
   gridSpan?: number;
-  bordered?: boolean;
+  __layout__?: boolean;
 }
 
-type ComposeFormItem = React.FC<React.PropsWithChildren<IFormItemProps>> & {
-  BaseItem?: React.FC<React.PropsWithChildren<IFormItemProps>>;
-};
-
-const ICON_MAP = {
-  error: <CloseCircleOutline />,
-  success: <CheckCircleOutline />,
-  warning: <ExclamationCircleOutline />,
+type ComposeFormItem = React.FC<IFormItemProps> & {
+  BaseItem?: React.FC<IFormItemProps>;
 };
 
 const useFormItemLayout = (props: IFormItemProps) => {
   const layout = useFormLayout();
-  const layoutType = props.layout ?? layout.layout ?? "horizontal";
   return {
-    ...props,
     ...layout,
-    layout: layoutType,
+    ...props,
+    __layout__: layout.__layout__,
+    layout: props.layout ?? layout.layout ?? "horizontal",
     labelAlign:
-      layoutType === "vertical" ? props.labelAlign ?? "left" : props.labelAlign ?? layout.labelAlign ?? "left",
+      layout.layout === "vertical"
+        ? props.labelAlign ?? layout.labelAlign ?? "left"
+        : props.labelAlign ?? layout.labelAlign ?? "left",
     labelWrap: props.labelWrap ?? layout.labelWrap,
     labelWidth: props.labelWidth ?? layout.labelWidth,
     wrapperWidth: props.wrapperWidth ?? layout.wrapperWidth,
@@ -79,43 +71,58 @@ const useFormItemLayout = (props: IFormItemProps) => {
     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 />,
+    tooltipIcon: props.tooltipIcon ?? layout.tooltipIcon ?? <ExclamationCircleOutline />,
   };
 };
 
-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;
+function useOverflow<Container extends HTMLElement, Content extends HTMLElement>() {
+  const [overflow, setOverflow] = useState(false);
+  const containerRef = useRef<Container>();
+  const contentRef = useRef<Content>();
+
+  useEffect(() => {
+    if (containerRef.current && contentRef.current) {
+      const contentWidth = contentRef.current.getBoundingClientRect().width;
+      const containerWidth = containerRef.current.getBoundingClientRect().width;
+      if (contentWidth && containerWidth && containerWidth < contentWidth) {
+        if (!overflow) setOverflow(true);
+      } else {
+        if (overflow) setOverflow(false);
+      }
+    }
+  }, []);
+
+  return {
+    overflow,
+    containerRef,
+    contentRef,
+  };
+}
+
+const ICON_MAP = {
+  error: <CloseCircleOutline />,
+  success: <CheckCircleOutline />,
+  warning: <ExclamationCircleOutline />,
+};
 
-  const formLayout = useFormItemLayout({ ...props });
+export const BaseItem: React.FC<IFormItemProps> = ({ children, ...props }) => {
+  const [active, setActive] = useState(false);
+  const formLayout = useFormItemLayout(props);
 
+  const { containerRef, contentRef, overflow } = useOverflow<HTMLDivElement, HTMLLabelElement>();
   const {
     label,
     style,
     layout,
-    addonBefore,
-    addonAfter,
-    asterisk,
-    optionalMarkHidden = false,
     feedbackStatus,
     extra,
     feedbackText,
-    fullness,
     feedbackLayout,
     feedbackIcon,
-    enableOutlineFeedback = true,
-    getPopupContainer,
     inset,
     bordered = true,
     labelWidth,
@@ -130,11 +137,12 @@ export const BaseItem = ({ children, ...props }) => {
     tooltipLayout,
     tooltip,
     tooltipIcon,
+    asterisk,
   } = formLayout;
-
   const labelStyle = { ...formLayout.labelStyle };
   const wrapperStyle = { ...formLayout.wrapperStyle };
-
+  // 固定宽度
+  // let enableCol = false
   if (labelWidth || wrapperWidth) {
     if (labelWidth) {
       labelStyle.width = labelWidth === "auto" ? undefined : labelWidth;
@@ -147,80 +155,174 @@ export const BaseItem = ({ children, ...props }) => {
     // 栅格模式
   }
 
-  let formatChildren =
+  const prefixCls = usePrefixCls("formily-item");
+  const formatChildren =
     feedbackLayout === "popover" ? (
       <Popover
         placement="top"
         content={
           <div
-          // className={cls({
-          //   [`${prefixCls}-${feedbackStatus}-help`]: !!feedbackStatus,
-          //   [`${prefixCls}-help`]: true,
-          // })}
+            className={cls({
+              [`${prefixCls}-${feedbackStatus}-help`]: !!feedbackStatus,
+              [`${prefixCls}-help`]: true,
+            })}
           >
             {ICON_MAP[feedbackStatus]} {feedbackText}
           </div>
         }
         visible={!!feedbackText}
-        // getPopupContainer={getPopupContainer}
       >
-        {children}
+        <>{children}</>
       </Popover>
     ) : (
       children
     );
 
-  if (Slots && Slots[name]) {
-    const Com = Slots[name];
-    // 获取数据
+  const gridStyles: React.CSSProperties = {
     // @ts-ignore
-    const value = field?.value;
-    formatChildren = (
-      <Com {...props} value={value} data={value} field={field} itemSchema={schema} globalProps={globalProps} />
+    ["--prefix-width"]: !isNaN(labelCol) ? `${(labelCol * 100) / 24}%` : undefined,
+  };
+
+  const getOverflowTooltip = () => {
+    if (overflow) {
+      return (
+        <div>
+          <div>{label}</div>
+          <div>{tooltip}</div>
+        </div>
+      );
+    }
+    return tooltip;
+  };
+
+  const renderLabelText = () => {
+    const labelChildren = (
+      <>
+        {asterisk && <span className={`${prefixCls}-asterisk`}>{"*"}</span>}
+        <div className={`${prefixCls}-label-content`} ref={containerRef}>
+          <label ref={contentRef}>{label}</label>
+        </div>
+      </>
     );
-  }
 
-  let renderLabelText = () => <div className="form-item-label-text">{title}</div>;
+    if ((tooltipLayout === "text" && tooltip) || overflow) {
+      return (
+        <Popover placement="top" content={getOverflowTooltip()}>
+          {labelChildren}
+        </Popover>
+      );
+    }
+    return labelChildren;
+  };
 
-  if (LabelSlots && LabelSlots[name]) {
-    const Com = LabelSlots[name];
-    renderLabelText = () => <Com label={props.label} />;
-  }
+  const renderTooltipIcon = () => {
+    if (tooltip && tooltipLayout === "icon" && !overflow) {
+      return (
+        <span className={`${prefixCls}-label-tooltip-icon`}>
+          <Popover placement="right" mode="dark" trigger="click" content={tooltip}>
+            <span>{tooltipIcon}</span>
+          </Popover>
+        </span>
+      );
+    }
+  };
 
-  const renderLabel = () =>
-    title && (
+  const renderLabel = () => {
+    if (!label) return null;
+    return (
       <div
-        className={`form-item-label ${labelWrap ? "item-label-wrap" : ""} label-align-${labelAlign}`}
+        className={cls({
+          [`${prefixCls}-label`]: true,
+          [`${prefixCls}-label-tooltip`]: (tooltip && tooltipLayout === "text") || overflow,
+        })}
         style={labelStyle}
       >
         {renderLabelText()}
-        {colon ? <span className="form-item-colon">{colon || "："}</span> : null}
+        {renderTooltipIcon()}
       </div>
     );
-
-  if (labelCol && wrapperCol && (layout === "horizontal" || layout === "inline")) {
-    return (
-      <Grid columns={GRID_COLUMNS} className={`formily-form-item layout-${layout}`}>
-        <Grid.Item span={labelCol}>{renderLabel()}</Grid.Item>
-        <Grid.Item className="form-item-content" span={wrapperCol}>
-          {formatChildren}
-        </Grid.Item>
-      </Grid>
-    );
-  }
+  };
 
   return (
-    <div className={`formily-form-item layout-${layout}`}>
-      {renderLabel()}
-      <div className="form-item-content">{formatChildren}</div>
-    </div>
+    <List.Item
+      {...pickDataProps(props)}
+      style={{
+        ...style,
+        ...gridStyles,
+      }}
+      className={cls({
+        [`wrapper-col-${wrapperCol}`]: true,
+        "formily-form-item": true,
+        [`layout-${layout}`]: true,
+        [`${prefixCls}`]: true,
+        [`${prefixCls}-layout-${layout}`]: true,
+        [`${prefixCls}-${feedbackStatus}`]: !!feedbackStatus,
+        [`${prefixCls}-feedback-has-text`]: !!feedbackText,
+        [`${prefixCls}-size-${size}`]: !!size,
+        [`${prefixCls}-feedback-layout-${feedbackLayout}`]: !!feedbackLayout,
+        [`${prefixCls}-active`]: active,
+        [`${prefixCls}-label-align-${labelAlign}`]: true,
+        [`${prefixCls}-control-align-${wrapperAlign}`]: true,
+        [`${prefixCls}-label-wrap`]: !!labelWrap,
+        [`${prefixCls}-control-wrap`]: !!wrapperWrap,
+        // [`${prefixCls}-no-form-layout`]: !formLayout.__layout__,
+        [`${prefixCls}-bordered-none`]: bordered === false || !!inset || !!feedbackIcon,
+        [props.className]: !!props.className,
+      })}
+      title={layout === "vertical" && renderLabel()}
+      prefix={layout !== "vertical" && renderLabel()}
+      extra={extra && <div className={cls(`${prefixCls}-extra`)}>{extra}</div>}
+      data-grid-span={props.gridSpan}
+    >
+      <div
+        onFocus={() => {
+          if (feedbackIcon) {
+            setActive(true);
+          }
+        }}
+        onBlur={() => {
+          if (feedbackIcon) {
+            setActive(false);
+          }
+        }}
+        className={cls({
+          [`${prefixCls}-control`]: true,
+        })}
+      >
+        <div className={cls(`${prefixCls}-control-content`)}>
+          <div
+            style={wrapperStyle}
+            className={cls({
+              [`${prefixCls}-control-content-component`]: true,
+              [`${prefixCls}-control-content-component-has-feedback-icon`]: !!feedbackIcon,
+            })}
+          >
+            <FormLayoutShallowContext.Provider value={undefined}>{formatChildren}</FormLayoutShallowContext.Provider>
+            {feedbackIcon && <div className={cls(`${prefixCls}-feedback-icon`)}>{feedbackIcon}</div>}
+          </div>
+        </div>
+        {!!feedbackText && feedbackLayout !== "popover" && feedbackLayout !== "none" && (
+          <div
+            className={cls({
+              [`${prefixCls}-${feedbackStatus}-help`]: !!feedbackStatus,
+              [`${prefixCls}-help`]: true,
+              [`${prefixCls}-help-enter`]: true,
+              [`${prefixCls}-help-enter-active`]: true,
+            })}
+          >
+            {feedbackText}
+          </div>
+        )}
+      </div>
+    </List.Item>
   );
 };
 
 // 适配
-export const FormItem: any = connect(
+export const FormItem: ComposeFormItem = connect(
   BaseItem,
-  mapProps((props: any, field: any) => {
+  mapProps((props, field) => {
+    const globalProps: any = useGlobalPropsContext();
     if (isVoidField(field))
       return {
         label: field.title || props.label,
@@ -246,6 +348,9 @@ export const FormItem: any = connect(
       if (field.selfSuccesses.length) return split(field.selfSuccesses);
     };
     const takeAsterisk = () => {
+      if (globalProps._scenario_ === "descriptions") {
+        return false;
+      }
       if (field.required && field.pattern !== "readPretty") {
         return true;
       }
@@ -255,14 +360,15 @@ export const FormItem: any = connect(
       return false;
     };
     return {
-      label: props.label || field.title,
+      label: field.title || props.label,
       feedbackStatus: takeFeedbackStatus(),
       feedbackText: takeMessage(),
       asterisk: takeAsterisk(),
-      optionalMarkHidden: field.pattern === "readPretty" && !("asterisk" in props),
       extra: props.extra || field.description,
     };
   }),
 );
 
+FormItem.BaseItem = BaseItem;
+
 export default FormItem;

package/src/components/index.ts

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