feat(flat-component): Add disabled mode to ClassPicker component. (#675)

netless-io · May 27, 2021 · a6916fc · a6916fc
1 parent 9e3271e
commit a6916fc
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 1 deletion.
diff --git a/packages/flat-components/src/components/HomePage/ClassPicker/ClassPicker.stories.tsx b/packages/flat-components/src/components/HomePage/ClassPicker/ClassPicker.stories.tsx
@@ -60,3 +60,22 @@ LargeMode.parameters = {
         defaultViewport: "large",
     },
 };
+
+export const DisabledLargeMode: Story<ClassPickerProps> = args => {
+    const [classType, setClassType] = useState<ClassPickerItemType>("BigClass");
+    return <ClassPicker {...args} value={classType} onChange={setClassType} />;
+};
+DisabledLargeMode.argTypes = {
+    type: {
+        control: false,
+    },
+};
+DisabledLargeMode.args = {
+    large: true,
+    disabled: true,
+};
+DisabledLargeMode.parameters = {
+    viewport: {
+        defaultViewport: "large",
+    },
+};
diff --git a/packages/flat-components/src/components/HomePage/ClassPicker/index.less b/packages/flat-components/src/components/HomePage/ClassPicker/index.less
@@ -149,4 +149,45 @@
             }
         }
     }
+
+    .ant-radio-wrapper-disabled {
+        opacity: 0.4;
+        cursor: default;
+
+        > .ant-radio-disabled .ant-radio-input {
+            cursor: default;
+        }
+
+        &.ant-radio-wrapper-checked {
+            opacity: 1;
+
+            &:hover,
+            &:active {
+                &::after {
+                    border: 2px solid @primary-color;
+                }
+            }
+
+            > .ant-radio-checked .ant-radio-inner {
+                background-color: unset;
+                border-color: #3381ff !important;
+
+                &::after {
+                    background-color: #3381ff;
+                }
+            }
+        }
+
+        &::after {
+            transition: none;
+        }
+
+        &.ant-radio-checked,
+        &:hover,
+        &:active {
+            &::after {
+                border: 1px solid #dbe1ea;
+            }
+        }
+    }
 }
diff --git a/packages/flat-components/src/components/HomePage/ClassPicker/index.tsx b/packages/flat-components/src/components/HomePage/ClassPicker/index.tsx
@@ -10,12 +10,14 @@ export type { ClassPickerItemType } from "./ClassPickerItem";
 export interface ClassPickerProps {
     value?: ClassPickerItemType;
     large?: boolean;
+    disabled?: boolean;
     onChange?: (value: ClassPickerItemType) => void;
 }
 
-export const ClassPicker: React.FC<ClassPickerProps> = ({ value, onChange, large }) => {
+export const ClassPicker: React.FC<ClassPickerProps> = ({ value, onChange, large, disabled }) => {
     return (
         <Radio.Group
+            disabled={disabled}
             className={classNames("class-picker-container", {
                 "class-large-picker-container": large,
             })}