@hzab/form-render 1.7.15 → 1.7.16-alpha.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/form-render@1.7.16
+
+fix: 增加带描述和支持单个option禁用的radio和checkbox组件
+
 # @hzab/form-render@1.7.15
 
 fix: utils ossUpload 引用更新

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.7.15",
+  "version": "1.7.16-alpha.0",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/CheckboxWithTip/index.less

@@ -0,0 +1,14 @@
+.checkbox-desc {
+  .check-item {
+    .label-text {
+      font-size: 14px;
+    }
+
+    .desc-text {
+      font-size: 12px;
+      color: #8c8c8c;
+      margin-top: 4px;
+      line-height: 1.5;
+    }
+  }
+}

package/src/components/CheckboxWithTip/index.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Checkbox } from "antd";
+import { useField } from "@formily/react";
+import "./index.less";
+
+export interface CheckboxDescItem {
+  value: string | number;
+  label: string;
+  desc: string;
+  disabled?: boolean;
+}
+
+interface CheckboxWithDescProps {
+  value?: (string | number)[];
+  onChange?: (val: any[]) => void;
+  dataSource: CheckboxDescItem[];
+}
+
+const CheckboxWithTip: React.FC<CheckboxWithDescProps> = (props) => {
+  const field: any = useField();
+  const { value, onChange, dataSource = field?.dataSource || [], ...rest } = props;
+  return (
+    <Checkbox.Group
+      value={value}
+      onChange={(checkedList) => onChange?.(checkedList)}
+      className="checkbox-desc"
+      {...rest}
+    >
+      {dataSource.map((item, index) => (
+        <Checkbox className="check-item" key={index} value={item?.value} disabled={item?.disabled}>
+          <div className="label-text">{item?.label}</div>
+          <div className="desc-text">{item?.desc}</div>
+        </Checkbox>
+      ))}
+    </Checkbox.Group>
+  );
+};
+
+export { CheckboxWithTip };

package/src/components/RadioGroupWithTip/index.less

@@ -0,0 +1,13 @@
+.radio-group-tip {
+  .radio-item {
+    .radio-title {
+      font-size: 14px;
+    }
+    .radio-desc {
+      font-size: 12px;
+      color: #8c8c8c;
+      margin-top: 4px;
+      line-height: 1.5;
+    }
+  }
+}

package/src/components/RadioGroupWithTip/index.tsx

@@ -0,0 +1,38 @@
+import { Radio } from "antd";
+import { useField } from "@formily/react";
+import "./index.less";
+
+export interface RadioTipItem {
+  value: string | number;
+  label: string;
+  desc: string;
+  disabled?: boolean;
+}
+
+export interface RadioGroupWithTipProps {
+  value?: string | number;
+  onChange?: (val: string | number) => void;
+  dataSource?: RadioTipItem[];
+}
+
+const RadioGroupWithTip = (props: RadioGroupWithTipProps) => {
+  const field: any = useField();
+  const { value, onChange, dataSource = field?.dataSource || [], ...rest } = props;
+
+  const handleChange = (val: string | number) => {
+    onChange?.(val);
+  };
+
+  return (
+    <Radio.Group className="radio-group-tip" value={value} onChange={(e) => handleChange(e.target.value)} {...rest}>
+      {dataSource.map((item, index) => (
+        <Radio value={item?.value} className="radio-item" disabled={item?.disabled} key={index}>
+          <div className="radio-title">{item?.label}</div>
+          <div className="radio-desc">{item?.desc}</div>
+        </Radio>
+      ))}
+    </Radio.Group>
+  );
+};
+
+export { RadioGroupWithTip };

package/src/components/index.tsx

@@ -13,5 +13,7 @@ export * from "./DatePicker";
 export * from "./LocationPicker";
 export * from "./LocationListPicker";
 export * from "./RichEditor";
+export * from "./RadioGroupWithTip"
+export * from "./CheckboxWithTip"
 
 export { Text };