feat[pc-components]: checkbox-group

packages/docs/.umirc.ts

@@ -62,6 +62,7 @@ export default defineConfig({
       {
         title: "表单组件",
         children: [
+          "/components/CheckboxGroup",
           "/components/Upload",
           "/components/FileCheckbox",
           "/components/Map",

packages/docs/docs/components/CheckboxGroup/index.md

@@ -0,0 +1,27 @@
+## DageCheckboxGroup 多选框
+
+### 控制最大选择个数
+
+```tsx
+import React, { useState } from "react";
+import { DageCheckboxGroup } from "@dage/pc-components";
+
+export default () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <DageCheckboxGroup
+      value={value}
+      max={2}
+      options={["Apple", "Banana", "Lemon"]}
+      onChange={setValue}
+    />
+  );
+};
+```
+
+## API
+
+[详细 API 参考 antd CheckboxGroup](https://ant.design/components/checkbox-cn)
+
+<API hideTitle exports='["DageCheckboxGroup"]' src='@dage/pc-components/index.d.ts'></API>

packages/pc-components/src/components/DageCheckboxGroup/index.tsx

@@ -0,0 +1,48 @@
+import { Checkbox, CheckboxOptionType } from "antd";
+import { CheckboxGroupProps } from "antd/lib/checkbox";
+import { isNumber, isObject, merge } from "lodash";
+import { FC, useEffect, useState } from "react";
+
+export interface DageCheckboxGroupProps extends CheckboxGroupProps {
+  /** 最大选择个数 */
+  max?: number;
+}
+
+export const DageCheckboxGroup: FC<DageCheckboxGroupProps> = ({
+  options,
+  max,
+  ...rest
+}) => {
+  const [_options, _setOptions] = useState<CheckboxOptionType[]>([]);
+
+  useEffect(() => {
+    _setOptions(
+      merge(
+        [],
+        options?.map((i) => {
+          if (isObject(i)) return i;
+          return {
+            label: i,
+            value: i,
+          };
+        }),
+        _options
+      )
+    );
+  }, [options]);
+
+  useEffect(() => {
+    const { value } = rest;
+
+    if (!value || !isNumber(max)) return;
+
+    _setOptions((val) => {
+      return val.map((i) => ({
+        ...i,
+        disabled: value.length >= max ? !value.includes(i.value) : false,
+      }));
+    });
+  }, [rest.value, max]);
+
+  return <Checkbox.Group options={_options} {...rest} />;
+};

packages/pc-components/src/components/index.ts

@@ -4,3 +4,4 @@ export * from "./DageUpload";
 export * from "./DageTableActions";
 export * from "./DageEditor";
 export * from "./DageLoading";
+export * from "./DageCheckboxGroup";