@hzab/form-render-mobile 0.0.20 → 0.1.0

package/package.json

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

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,147 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Checkbox as AntdCheckbox, Selector, List, Space } from "antd-mobile";
+import { connect, useField, useFieldSchema } from "@formily/react";
+import type { ISchema } from "@formily/react";
+import { CheckboxProps, CheckboxGroupProps } from "antd-mobile/es/components/checkbox";
+
+const checkboxColorMap = {
+  defaultColor: "#f5f5f5",
+  defaultTextColor: "#333333",
+  allCheckedColor: "#186DDA",
+  allCheckedTextColor: "#ffffff",
+  someCheckedColor: "#e7f1ff",
+  someCheckedTextColor: "#1677ff",
+};
+
+const CustomCheckbox: React.FC<CheckboxProps> = (props) => {
+  const field: any = useField();
+  return (
+    <AntdCheckbox
+      {...props}
+      checked={field.value.includes(props.value)}
+      onChange={() => {
+        const newValue = field.value.includes(props.value)
+          ? field.value.filter((v: any) => v !== props.value)
+          : [...field.value, props.value];
+        field.setValue(newValue);
+      }}
+    />
+  );
+};
+
+interface ICustomCheckboxGroupProps extends CheckboxGroupProps {
+  optionType?: "default" | "button";
+  indeterminate?: boolean; // 新增属性，用于控制是否显示半选状态
+}
+
+const CustomCheckboxGroup: React.FC<ICustomCheckboxGroupProps> = ({
+  children,
+  optionType,
+  indeterminate,
+  ...props
+}) => {
+  const field = useField<any>();
+  const fieldSchema: ISchema = useFieldSchema();
+  const isButtonMode = optionType === "button";
+  const enumOptions = (fieldSchema?.enum as []) || [];
+  const [selectorColor, setSelectorColor] = useState("#f5f5f5");
+
+  // 计算全选和半选状态
+  const { allChecked, noneChecked, someChecked } = useMemo(() => {
+    const allChecked = enumOptions?.every((option: any) => field.value?.includes(option.value));
+    const noneChecked = enumOptions?.every((option: any) => !field.value?.includes(option.value));
+    const someChecked = !allChecked && !noneChecked;
+    return { allChecked, noneChecked, someChecked };
+  }, [field.value, enumOptions]);
+
+  useEffect(() => {
+    if (allChecked) {
+      setSelectorColor(checkboxColorMap.allCheckedColor);
+    } else {
+      if (someChecked) setSelectorColor(checkboxColorMap.someCheckedColor);
+      else setSelectorColor(checkboxColorMap.defaultColor);
+    }
+  }, [allChecked, someChecked]);
+
+  // 处理全选和半选的逻辑
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      field.setValue(enumOptions?.map((option: any) => option.value));
+    } else {
+      field.setValue([]);
+    }
+  };
+
+  if (isButtonMode && enumOptions.length > 0) {
+    // Selector模式
+    const options = (enumOptions as []).map((item: any) => ({
+      label: item.label,
+      value: item.value,
+    }));
+
+    return (
+      <Space className="selector" wrap justify="end" style={{ width: "100%" }}>
+        {indeterminate && (
+          // 模拟半选、全选交互
+          <Selector
+            options={[{ label: "全选", value: "1" }]}
+            value={allChecked ? ["1"] : []}
+            showCheckMark={false}
+            style={{
+              "--color": selectorColor,
+              "--text-color":
+                allChecked || someChecked ? checkboxColorMap.someCheckedTextColor : checkboxColorMap.defaultTextColor,
+              "--checked-color": selectorColor,
+              "--checked-text-color": checkboxColorMap.allCheckedTextColor,
+            }}
+            onChange={([value]) => handleSelectAll(value === "1")}
+          />
+        )}
+        <Selector
+          {...(props as any)}
+          multiple
+          showCheckMark={false}
+          options={options}
+          value={field.value}
+          onChange={(values) => {
+            field.setValue(values);
+          }}
+          style={{
+            "--checked-color": checkboxColorMap.allCheckedColor,
+            "--checked-text-color": checkboxColorMap.allCheckedTextColor,
+          }}
+        />
+      </Space>
+    );
+  } else {
+    // 默认Checkbox模式
+    return (
+      <>
+        {indeterminate && (
+          <AntdCheckbox checked={allChecked} indeterminate={someChecked} onChange={(e) => handleSelectAll(e)}>
+            全选
+          </AntdCheckbox>
+        )}
+        <AntdCheckbox.Group
+          {...props}
+          value={field.value}
+          onChange={(values) => {
+            field.setValue(values);
+          }}
+        >
+          {(enumOptions as []).map((option: any) => (
+            <AntdCheckbox key={option.value} value={option.value}>
+              {option.label}
+            </AntdCheckbox>
+          ))}
+        </AntdCheckbox.Group>
+      </>
+    );
+  }
+};
+
+const Checkbox: any = connect(CustomCheckbox);
+
+Checkbox.Group = connect(CustomCheckboxGroup);
+
+export { Checkbox };

package/src/components/Radio/index.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { Radio as AntdRadio, Selector } from "antd-mobile";
+import { connect, mapProps, useField, useFieldSchema } from "@formily/react";
+import type { ISchema } from "@formily/react";
+import { RadioProps, RadioGroupProps } from "antd-mobile/es/components/radio";
+
+const CustomRadio: React.FC<RadioGroupProps> = (props) => {
+  const field: any = useField();
+  return <AntdRadio {...props} checked={field.value === props.value} onChange={field.onInput} />;
+};
+
+interface ICustomRadioGroupProps extends RadioGroupProps {
+  optionType?: "default" | "button";
+}
+
+const CustomRadioGroup: React.FC<ICustomRadioGroupProps> = ({ children, optionType, ...props }) => {
+  const field = useField<any>();
+  const fieldSchema: ISchema = useFieldSchema();
+  const isButtonMode = optionType === "button";
+
+  // 获取枚举值
+  const enumOptions = fieldSchema?.enum || [];
+
+  if (isButtonMode && enumOptions.length > 0) {
+    // Selector模式
+    const options = (enumOptions as []).map((item: any) => ({
+      label: item.label,
+      value: item.value,
+    }));
+
+    return (
+      <Selector
+        {...(props as any)}
+        showCheckMark={false}
+        options={options}
+        value={[field.value]}
+        onChange={(values) => {
+          field.setValue(values[0]);
+        }}
+        style={{
+          "--checked-color": "#186DDA",
+          "--checked-text-color": "#FFFFFF",
+        }}
+      />
+    );
+  } else {
+    // 默认Radio模式
+    return (
+      <AntdRadio.Group
+        {...props}
+        value={field.value}
+        onChange={(value) => {
+          field.setValue(value);
+        }}
+      >
+        {(enumOptions as []).map((option: any) => (
+          <AntdRadio key={option.value} value={option.value}>
+            {option.label}
+          </AntdRadio>
+        ))}
+      </AntdRadio.Group>
+    );
+  }
+};
+
+const Radio: any = connect(CustomRadio);
+
+Radio.Group = connect(CustomRadioGroup);
+
+export { Radio };

package/src/components/UserSelect/index.module.less

@@ -0,0 +1,61 @@
+.popup-head {
+  &-action {
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: solid 1px #eee;
+  }
+
+  .search-warp {
+    padding: 12px;
+  }
+}
+
+.list {
+  max-height: 40vh;
+  width: 100%;
+  overflow-y: scroll;
+  padding-bottom: 12px;
+}
+
+.search {
+  border: 1px solid #E6E6E6;
+  border-radius: 3px;
+  height: 22px;
+  padding: 6px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+
+  & input {
+    border: 0;
+    padding: 0;
+    outline: none;
+    width: 100%;
+  }
+}
+
+.item {
+  display: flex;
+  align-items: flex-start;
+
+  &-text {
+    padding-left: 10px;
+
+    &__name {
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    &__phone, &__idCard {
+      font-size: 12px;
+      color: rgba(23,26,29,0.6);
+    }
+  }
+}
+
+.placeholder {
+  text-align: right;
+  color: rgba(23,26,29,0.6);
+}

package/src/components/UserSelect/index.tsx

@@ -0,0 +1,197 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { Popup, CheckList, Avatar, Button, type AvatarProps } from "antd-mobile";
+import { useField, useFieldSchema } from "@formily/react";
+import { IFieldState } from "@formily/core";
+
+import styles from "./index.module.less";
+
+type AvatarSize = "large" | "small" | "default" | number;
+
+// 用户信息接口
+interface IUser {
+  label: string;
+  value: string | number;
+  avatar?: string; // 头像 URL，可选
+  phone?: string; // 手机号
+  idCard?: string; // 身份证号
+  [key: string]: any; // 其他可能的扩展信息
+}
+
+interface ISearchInputProps {
+  value?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+}
+
+// UserSelect组件的Props类型定义
+interface IUserSelectProps {
+  /**是否显示头像 */
+  isAvatar?: boolean;
+  /**选中值 */
+  value?: IUser[];
+
+  /**所有用户列表 */
+  options: IUser[];
+
+  /**多选模式 */
+  mode?: "multiple";
+
+  /**是否需要搜索 */
+  showSearch?: boolean;
+
+  /**头像大小 */
+  avatarSize?: AvatarSize;
+
+  /**自定义展示信息 */
+  infoRender?: React.ReactNode;
+
+  /**自定义展示key */
+  configKey?: {
+    phoneKey?: string;
+    idCardKey?: string;
+  };
+
+  /**头像形状 */
+  shape: "circle" | "square";
+
+  /**选中项变化时 */
+  onChange?: (value: IUser[]) => void;
+}
+
+const SHOW_NAME_MAX = 3;
+
+const SearchInput: React.FC<ISearchInputProps> = (props) => {
+  const { value, onChange, ...resetProps } = props;
+  const [searchValue, setSearchValue] = useState("");
+
+  const handleChange = (e) => {
+    const value = e.target.value;
+    setSearchValue?.(value);
+    onChange?.(value);
+  };
+
+  return (
+    <div className={styles["search"]}>
+      <input type="search" {...resetProps} value={searchValue} onChange={handleChange} />
+    </div>
+  );
+};
+
+export const UserSelect: React.FC<IUserSelectProps> = (props) => {
+  const { value, onChange, options, mode, isAvatar, avatarSize = 32, infoRender, configKey, shape = "square" } = props;
+  const field: any = useField<IFieldState>();
+  const [visible, setVisible] = useState(false);
+  const [filteredUsers, setFilteredUsers] = useState(options);
+  const [values, setValues] = useState<string[]>([]);
+
+  // 处理选中项变化
+  const handleSelectChange = (selected: string[]) => {
+    const selectedUsers = options.filter((user) => selected.includes(user.value.toString()));
+    field.setValue(selectedUsers);
+    if (onChange) {
+      onChange(selectedUsers);
+    }
+  };
+
+  const moreValue = useCallback((soucre: Record<string, any>, mainKey: string, secondaryKey?: string) => {
+    if (mainKey) return soucre[mainKey];
+
+    return soucre[secondaryKey];
+  }, []);
+
+  const avatarShape = useMemo(() => {
+    if (shape === "circle") return "50%";
+    if (shape === "square") return "4px";
+
+    return "4px";
+  }, [shape]);
+
+  // 渲染用户信息
+  const renderUserInfo = (user: IUser) => (
+    <div className={styles["item"]}>
+      {isAvatar && <Avatar src={user.avatar} style={{ "--size": `${avatarSize}px`, "--border-radius": avatarShape }} />}
+      {infoRender ? (
+        infoRender
+      ) : (
+        <div className={styles["item-text"]}>
+          <div className={styles["item-text__name"]}>{user.lable}</div>
+          <div className={styles["item-text__phone"]}>手机号：{moreValue(user, configKey?.phoneKey, "phone")}</div>
+          <div className={styles["item-text__idCard"]}>身份证号：{moreValue(user, configKey?.phoneKey, "idCard")}</div>
+        </div>
+      )}
+    </div>
+  );
+
+  // 处理搜索框文本变化
+  const handleSearch = (searchText: string) => {
+    const lowercasedFilter = searchText.toLowerCase();
+    const filteredData = options.filter((item) => {
+      return Object.keys(item).some((key) => item[key].toString().toLowerCase().includes(lowercasedFilter));
+    });
+    setFilteredUsers(filteredData);
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+  };
+
+  const handleConfirm = () => {
+    const vals: string[] = field.value.map((it: IUser) => it.lable);
+    setValues(vals);
+    setVisible(false);
+  };
+
+  const valuesJoin = useMemo(() => {
+    if (values.length >= SHOW_NAME_MAX) {
+      const vals = values.slice(0, SHOW_NAME_MAX);
+      return `${vals.join("、")}...等${values.length}人`;
+    }
+
+    return values.join("、");
+  }, [values]);
+
+  return (
+    <>
+      <div onClick={() => setVisible(true)} className={styles["placeholder"]}>
+        {valuesJoin || "请选择"}
+      </div>
+      <Popup
+        visible={visible}
+        onMaskClick={() => setVisible(false)}
+        bodyStyle={{
+          borderTopLeftRadius: "8px",
+          borderTopRightRadius: "8px",
+        }}
+      >
+        <div className={styles["popup-head"]}>
+          <div className={styles["popup-head-action"]}>
+            <Button fill="none" onClick={handleCancel}>
+              取消
+            </Button>
+            <Button color="primary" fill="none" onClick={handleConfirm}>
+              确定
+            </Button>
+          </div>
+          <div className={styles["search-warp"]}>
+            <SearchInput onChange={handleSearch} placeholder="请输入关键字搜索" />
+          </div>
+        </div>
+        <div className={styles["list"]}>
+          <CheckList
+            multiple={mode === "multiple"}
+            value={value?.map((user) => user.value.toString())}
+            onChange={handleSelectChange}
+          >
+            {filteredUsers.map((user, index) => (
+              <CheckList.Item key={user.value.toString() + index} value={user.value.toString()}>
+                {renderUserInfo(user)}
+              </CheckList.Item>
+            ))}
+          </CheckList>
+        </div>
+      </Popup>
+    </>
+  );
+};
+
+export default UserSelect;

package/src/components/index.ts

@@ -9,3 +9,6 @@ export * from "./Select";
 export * from "./Text";
 export * from "./TimePicker";
 export * from "./Uploader";
+export * from "./UserSelect";
+export * from "./Radio";
+export * from "./Checkbox";

package/src/index.less

@@ -33,4 +33,8 @@
       opacity: 1;
     }
   }
+
+  & .adm-radio, & .adm-checkbox {
+    padding-right: 10px;
+  }
 }

package/src/index.tsx

@@ -41,7 +41,7 @@ const FormRender = forwardRef((props: formPropsI, parentRef) => {
           CascadePicker,
           CheckList,
           Slider,
-          Checkbox,
+          // Checkbox,
           DatePicker,
           FormGrid,
           Input,