@hzab/form-render-mobile 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render-mobile",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "formily-form-render-mobile",
   "main": "lib",
   "scripts": {
@@ -43,6 +43,7 @@
     "@formily/antd-mobile": "1.0.0-beta.3",
     "@formily/core": "2.2.29",
     "@formily/react": "2.2.29",
+    "@hzab/data-model": "^0.0.3",
     "antd-mobile": "^5.32.0",
     "antd-mobile-icons": "^0.2.2",
     "nanoid": "^5.0.3"

package/src/components/Cascader/index.jsx

@@ -1,11 +1,13 @@
 import { useState, useEffect } from "react";
 import { useField, observer } from "@formily/react";
 import { CascadePicker } from "antd-mobile";
-import { RightOutline } from "antd-mobile-icons";
+
+import PickerRightOutline from "../PickerRightOutline";
+import Placeholder from "../Placeholder";
 
 import "./index.less";
 
-function Cascader(props) {
+export const Cascader = observer((props) => {
   const { disabled, readOnly, placeholder = "请选择", onChange } = props;
 
   const field = useField();
@@ -39,7 +41,7 @@ function Cascader(props) {
   }
 
   return (
-    <div className="formily-cascader picker-box" onClick={onClick}>
+    <PickerRightOutline className="formily-cascader picker-box" onClick={onClick}>
       <CascadePicker
         {...props}
         style={{ pointerEvents: readOnly || disabled ? "none" : undefined }}
@@ -50,7 +52,7 @@ function Cascader(props) {
       >
         {(value) => {
           if (!value || value.length <= 0) {
-            return <div className="placeholder">{placeholder}</div>;
+            return <Placeholder {...props} placeholder={placeholder} isPicker />;
           }
           return value?.reduce((pre, cur) => {
             if (!cur) {
@@ -63,9 +65,8 @@ function Cascader(props) {
           }, "");
         }}
       </CascadePicker>
-      <RightOutline className="picker-right-icon" />
-    </div>
+    </PickerRightOutline>
   );
-}
+});
 
-export default observer(Cascader);
+export default Cascader;

package/src/components/DatePicker/index.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useMemo } from "react";
 import { useField, observer } from "@formily/react";
 import { DatePicker as ADataPicker } from "antd-mobile";
+import { Precision } from "antd-mobile/2x/es/components/date-picker/date-picker-utils";
 import { RightOutline } from "antd-mobile-icons";
 import dayjs from "dayjs";
 
@@ -9,6 +10,9 @@ import weekOfYear from "dayjs/plugin/weekOfYear";
 
 import { handleValue } from "./common/utils";
 
+import PickerOutline from "../PickerRightOutline";
+import Placeholder from "../Placeholder";
+
 import "./index.less";
 
 dayjs.extend(advancedFormat);
@@ -30,7 +34,18 @@ type fieldT = {
   dataSource: Array<Object>;
 };
 
-function DatePicker(props) {
+type DatePickerPropsT = {
+  value: string | number | Object;
+  disabled: boolean;
+  readOnly: boolean;
+  placeholder: string;
+  format: string;
+  picker: string;
+  precision: Precision;
+  showTime: boolean;
+  onChange: (date: string | number) => void;
+};
+export const DatePicker = observer((props: DatePickerPropsT) => {
   const { value, disabled, readOnly, placeholder = "请选择", format, onChange } = props;
 
   const field: fieldT = useField();
@@ -40,25 +55,27 @@ function DatePicker(props) {
 
   const [visible, setVisible] = useState(false);
 
-  const precision = useMemo(() => {
-    if (props.picker) {
-      return props.picker;
-    }
+  const precision: Precision = useMemo(() => {
     if (props.precision) {
       return props.precision;
     }
     const {
-      // time date month year
+      // time date month year decade quarter
       picker,
       showTime,
     } = props;
+    // TODO: 处理 季度、财年、时间 quarter decade time
     // 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'week' | 'week-day'
-    let _precision = "day";
+    // @ts-ignore 兼容 PC 端配置
+    let _precision: Precision = picker || "day";
+    if (picker === "date") {
+      _precision = "day";
+    }
     if ((!picker || picker === "date") && showTime) {
       _precision = "second";
     }
     return _precision;
-  }, [props.precision, props.picker, props.mode, props.showTime]);
+  }, [props.precision, props.picker, props.showTime]);
 
   useEffect(() => {
     if (dataSource) {
@@ -88,7 +105,7 @@ function DatePicker(props) {
   const _value = handleValue(value, formatStr, precision);
 
   return (
-    <div className="picker-box formily-date-picker" onClick={onClick}>
+    <PickerOutline className="picker-box formily-date-picker" onClick={onClick}>
       <ADataPicker
         {...props}
         value={_value}
@@ -98,11 +115,10 @@ function DatePicker(props) {
         precision={precision}
         onConfirm={onConfirm}
       >
-        {(val) => (val ? dayjs(val).format(formatStr) : <div className="placeholder">{placeholder}</div>)}
+        {(val) => (val ? dayjs(val).format(formatStr) : <Placeholder {...props} placeholder={placeholder} isPicker />)}
       </ADataPicker>
-      <RightOutline className="picker-right-icon" />
-    </div>
+    </PickerOutline>
   );
-}
+});
 
-export default observer(DatePicker);
+export default DatePicker;

package/src/components/NumberPicker/index.jsx

@@ -1,19 +1,13 @@
 import React from "react";
-import { connect, mapProps } from "@formily/react";
 import { Stepper } from "antd-mobile";
 
 import "./index.less";
 
-function NumberPicker({ precision, className, ...props }) {
+export const NumberPicker = ({ precision, className, ...props }) => {
   if (props.readOnly) {
     return props.value || "";
   }
   return <Stepper className={`number-picker ${className}`} {...props} digits={precision} />;
-}
+};
 
-export default connect(
-  NumberPicker,
-  mapProps((props, field) => {
-    return { ...props, form: field.form, field };
-  }),
-);
+export default NumberPicker;

package/src/components/Password/index.jsx

@@ -1,14 +1,8 @@
 import React from "react";
-import { connect, mapProps } from "@formily/react";
 import { Input } from "antd-mobile";
 
-function Password(props) {
-  return <Input {...props} type="password" placeholder={props.placeholder || "请输入"} />;
-}
+export const Password = (props) => {
+  return <Input {...props} type="password" placeholder={!props.readOnly ? props.placeholder || "请输入" : ""} />;
+};
 
-export default connect(
-  Password,
-  mapProps((props, field) => {
-    return { ...props, form: field.form, field };
-  }),
-);
+export default Password;

package/src/components/PickerRightOutline/index.less

@@ -0,0 +1,7 @@
+.form-item-picker-right-outline {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .picker-right-icon {
+  }
+}

package/src/components/PickerRightOutline/index.tsx

@@ -0,0 +1,14 @@
+import { RightOutline } from "antd-mobile-icons";
+
+import "./index.less";
+
+export const PickerOutline = (props) => {
+  return (
+    <div {...props} className={`form-item-picker-right-outline ${props.className}`}>
+      {props.children}
+      <RightOutline className="picker-right-icon" />
+    </div>
+  );
+};
+
+export default PickerOutline;

package/src/components/Placeholder/index.less

@@ -0,0 +1,3 @@
+.form-item-placeholder {
+  color: #ccc;
+}

package/src/components/Placeholder/index.tsx

@@ -0,0 +1,18 @@
+import "./index.less";
+
+export const Placeholder = (props) => {
+  const { value, placeholder, className, isPicker } = props;
+  if (value !== null && value !== undefined && value !== "") {
+    return value;
+  }
+  if (props.readOnly) {
+    return <span></span>;
+  }
+  return (
+    <div {...props} className={`form-item-placeholder ${className}`}>
+      {placeholder || isPicker ? "请选择" : "请输入"}
+    </div>
+  );
+};
+
+export default Placeholder;

package/src/components/Select/index.tsx

@@ -3,13 +3,23 @@ import { useField, observer } from "@formily/react";
 import { Picker } from "antd-mobile";
 import { RightOutline } from "antd-mobile-icons";
 
+import PickerRightOutline from "../PickerRightOutline";
+import Placeholder from "../Placeholder";
+
+import { formItemProps } from "../form-item";
+
 import "./index.less";
 
 type fieldT = {
   dataSource: Array<Object>;
 };
 
-function Select(props) {
+type SelectPropsT = {
+  value: number | string;
+  onChange: (val: any) => void;
+} & formItemProps;
+
+export const Select = observer((props: SelectPropsT) => {
   const { value, disabled, readOnly, placeholder = "请选择", onChange } = props;
 
   const field: fieldT = useField();
@@ -45,11 +55,12 @@ function Select(props) {
   }
 
   return (
-    <div className="formily-select picker-box" onClick={onClick}>
+    <PickerRightOutline className="formily-select picker-box" onClick={onClick}>
       <Picker
         {...props}
         value={Array.isArray(value) ? value : [value]}
         style={{ pointerEvents: readOnly || disabled ? "none" : undefined }}
+        // @ts-ignore
         columns={_options}
         visible={visible}
         onClose={onClose}
@@ -59,13 +70,12 @@ function Select(props) {
           return items && items.length > 0 && items[0] ? (
             items[0]?.label
           ) : (
-            <div className="placeholder">{placeholder || "请选择"}</div>
+            <Placeholder {...props} placeholder={placeholder} isPicker />
           );
         }}
       </Picker>
-      <RightOutline className="picker-right-icon" />
-    </div>
+    </PickerRightOutline>
   );
-}
+});
 
-export default observer(Select);
+export default Select;

package/src/components/Text/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import { connect, mapProps } from "@formily/react";
 
-function Text({ value, mode, content, className, ...props }) {
+export const Text = ({ value, mode, content, className, ...props }) => {
   const tagName = mode === "normal" || !mode ? "div" : mode;
   return React.createElement(
     tagName,
@@ -11,11 +10,6 @@ function Text({ value, mode, content, className, ...props }) {
     },
     value || content,
   );
-}
+};
 
-export default connect(
-  Text,
-  mapProps((props, field) => {
-    return { ...props, form: field.form, field };
-  }),
-);
+export default Text;

package/src/components/TimePicker/common/utils.ts

@@ -0,0 +1,63 @@
+export function getTimeColumns(opt: any = {}) {
+  const { use12Hours, isPM } = opt || {};
+  const configList = [
+    {
+      stepKey: "hourStep",
+      max: 23,
+    },
+    {
+      stepKey: "minuteStep",
+      max: 59,
+    },
+    {
+      stepKey: "secondStep",
+      max: 59,
+    },
+  ];
+
+  const columns = [[], [], []];
+
+  if (use12Hours) {
+    columns.push([
+      {
+        label: "AM",
+        value: "AM",
+      },
+      {
+        label: "PM",
+        value: "PM",
+      },
+    ]);
+  }
+
+  configList?.forEach((conf, idx) => {
+    let i = 0;
+    let { max, stepKey } = conf;
+    let step = opt[stepKey] || 1;
+    if (step <= 0 || step > max) {
+      step = 1;
+    }
+
+    if (use12Hours && stepKey === "hourStep") {
+      max = 11;
+      if (isPM) {
+        columns[idx].push({
+          label: "12",
+          value: "00",
+        });
+        i = step;
+      }
+    }
+
+    while (i <= max) {
+      let _val = `${i > 9 ? i : "0" + i}`;
+      columns[idx].push({
+        label: _val,
+        value: _val,
+      });
+      i += step;
+    }
+  });
+
+  return columns;
+}

package/src/components/TimePicker/index.tsx

@@ -0,0 +1,79 @@
+import { useState, useMemo } from "react";
+import { useField, observer } from "@formily/react";
+import { Picker } from "antd-mobile";
+import PickerRightOutline from "../PickerRightOutline";
+import Placeholder from "../Placeholder";
+import { getTimeColumns } from "./common/utils";
+import { formItemProps } from "../form-item";
+
+type TimePickerPropsT = {
+  use12Hours: boolean;
+} & formItemProps;
+
+export const TimePicker = observer((props: TimePickerPropsT) => {
+  const { value, disabled, readOnly, placeholder = "请选择", use12Hours, onChange } = props;
+  const field: any = useField();
+  const {} = field;
+  const [visible, setVisible] = useState(false);
+  const [columns, setColumns] = useState(getTimeColumns(props));
+
+  function onConfirm(val) {
+    // 数据进行合并
+    let resVal = val?.join(":");
+    if (use12Hours) {
+      if (val[3] === "PM" && val[0] == 0) {
+        val[0] = 12;
+      }
+      resVal = [...val]?.slice(0, 3)?.join(":");
+      resVal += ` ${val[3] || ""}`;
+    }
+    onChange && onChange(resVal);
+  }
+
+  function onSelect(v, ...args) {
+    if (use12Hours && v?.[3] == "PM") {
+      setColumns(getTimeColumns({ ...props, isPM: true }));
+    } else {
+      setColumns(getTimeColumns(props));
+    }
+  }
+
+  function onClick() {
+    if (readOnly || disabled) {
+      return;
+    }
+    setVisible((val) => {
+      return !val;
+    });
+  }
+
+  // 拆分字符串数据并转为数字格式
+  let pickerVal = value?.split(":");
+  if (use12Hours && pickerVal && pickerVal.length > 0) {
+    const t = pickerVal[2];
+    pickerVal.splice(2, 1, t.split(" ")?.[0]);
+    pickerVal.push(t.split(" ")?.[1]);
+    if (pickerVal[3] === "PM" && pickerVal[0] == 12) {
+      pickerVal[0] = "00";
+    }
+  }
+
+  return (
+    <PickerRightOutline className="picker-box formily-time-picker" onClick={onClick}>
+      <Picker
+        {...props}
+        value={pickerVal}
+        visible={visible}
+        columns={columns}
+        onSelect={onSelect}
+        onClose={() => {
+          setVisible(false);
+        }}
+        onConfirm={onConfirm}
+      />
+      <Placeholder {...props} value={value} placeholder={placeholder} />
+    </PickerRightOutline>
+  );
+});
+
+export default TimePicker;

package/src/components/Uploader/common/ossUpload.js

@@ -1,4 +1,4 @@
-import axios from "axios";
+import { axios } from "@hzab/data-model";
 
 export function getSignature(opt = {}) {
   const { serverUrl = "/api/v1/user/oss/getWebOssConfig" } = opt;

package/src/components/Uploader/index.jsx

@@ -1,8 +1,6 @@
-import { connect, mapProps } from "@formily/react";
+import UploaderCom from "./uploader";
 
-import Uploader from "./uploader";
-
-function UploaderCom(props) {
+export const Uploader = (props) => {
   const { field = {}, onChange, value } = props;
   const { name, mode, componentProps = {} } = field;
   const { multiple } = componentProps;
@@ -29,12 +27,7 @@ function UploaderCom(props) {
     ...componentProps,
   };
 
-  return <Uploader {..._props} onChange={onUploadChange} />;
-}
+  return <UploaderCom {..._props} onChange={onUploadChange} />;
+};
 
-export default connect(
-  UploaderCom,
-  mapProps((props, field) => {
-    return { ...props, form: field.form, field };
-  }),
-);
+export default Uploader;

package/src/components/form-item.d.ts

@@ -0,0 +1,7 @@
+export type formItemProps = {
+  value: any;
+  disabled: boolean;
+  readOnly: boolean;
+  placeholder: string;
+  onChange: (val: any) => void;
+};

package/src/components/index.ts

@@ -1,13 +1,11 @@
-import Text from "./Text";
-import Select from "./Select";
-import Cascader from "./Cascader";
-import NumberPicker from "./NumberPicker";
-import DatePicker from "./DatePicker";
-import Password from "./Password";
-import Uploader from "./Uploader";
-
 export * from "./ArrayCards";
 export * from "./ArrayTable";
+export * from "./Cascader";
+export * from "./DatePicker";
 export * from "./FormCollapse";
-
-export { NumberPicker, Password, Select, Cascader, DatePicker, Text, Uploader };
+export * from "./NumberPicker";
+export * from "./Password";
+export * from "./Select";
+export * from "./Text";
+export * from "./TimePicker";
+export * from "./Uploader";

package/src/index.less

@@ -16,4 +16,13 @@
       align-items: center;
     }
   }
+
+  &.form-render-detail {
+    .adm-formily-item-asterisk {
+      display: none;
+    }
+    .adm-selector-item-disabled {
+      opacity: 1;
+    }
+  }
 }

package/src/index.tsx

@@ -30,6 +30,7 @@ import { formPropsI } from "./type.d";
 import "./index.less";
 
 const FormRender = forwardRef((props: formPropsI, parentRef) => {
+  const { isDetail, readOnly } = props;
   const SchemaField = useMemo(
     () =>
       createSchemaField({
@@ -64,7 +65,7 @@ const FormRender = forwardRef((props: formPropsI, parentRef) => {
       createForm({
         initialValues: props.initialValues,
         // 禁用状态（注意，自定义组件组件自行获取对应的状态）
-        readOnly: props.readOnly,
+        readOnly: readOnly || isDetail,
         disabled: props.disabled,
         ...(props.formOptions || {}),
       }),
@@ -82,11 +83,11 @@ const FormRender = forwardRef((props: formPropsI, parentRef) => {
   }, [props.schema]);
 
   return (
-    <div className={`form-render ${props.className}`}>
+    <div className={`form-render ${props.className} ${isDetail ? "form-render-detail" : ""}`}>
       <FormProvider form={formRender}>
         {/*  @ts-ignore */}
         <SchemaField schema={schema} />
-        {props.hasSubmit !== false ? (
+        {props.hasSubmit !== false && isDetail !== true && readOnly !== true && !props.disabled ? (
           <FormButtonGroup>
             <Submit
               onSubmit={(values) => {

package/src/type.d.ts

@@ -13,6 +13,8 @@ export interface formPropsI {
   schemaScope?: Object;
   /** formily 自定义组件 */
   components?: SchemaReactComponents;
+  /** 是否详情页面 */
+  isDetail?: boolean;
   /** 是否只读 */
   readOnly?: boolean;
   /** 是否禁用 */