refactor: change CheckboxGroup component to antdesign Radio component

hypertrons · Apr 17, 2024 · 9e88112 · 9e88112
1 parent 9747b76
commit 9e88112
Showing 1 changed file with 12 additions and 19 deletions.
diff --git a/src/pages/Options/Options.tsx b/src/pages/Options/Options.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Stack, ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react';
-import { Checkbox } from 'antd';
+import { Stack } from 'office-ui-fabric-react';
+import { Checkbox, Radio, Space } from 'antd';
 
 import { importedFeatures } from '../../../README.md';
 import optionsStorage, { HypercrxOptions } from '../../options-storage';
@@ -9,17 +9,6 @@ import { HYPERCRX_GITHUB } from '../../constant';
 import TooltipTrigger from '../../components/TooltipTrigger';
 import './Options.css';
 
-const localeOptions: IChoiceGroupOption[] = [
-  {
-    key: 'en',
-    text: 'English',
-  },
-  {
-    key: 'zh_CN',
-    text: '简体中文 (Simplified Chinese)',
-  },
-];
-
 const stacksStyleOptions = {
   headerStack: {
     paddingBottom: '10px',
@@ -91,14 +80,18 @@ const Options = (): JSX.Element => {
             <p>
               {getMessageByLocale('options_locale_toolTip', options.locale)} :
             </p>
-            <ChoiceGroup
-              defaultSelectedKey={options.locale}
-              options={localeOptions}
-              onChange={async (e, option: any) => {
-                await optionsStorage.set({ locale: option.key });
+            <Radio.Group
+              defaultValue={options.locale}
+              onChange={async (e) => {
+                await optionsStorage.set({ locale: e.target.value });
                 setOptions(await optionsStorage.getAll());
               }}
-            />
+            >
+              <Space direction="vertical">
+                <Radio value={'en'}>English</Radio>
+                <Radio value={'zh_CN'}>简体中文 (Simplified Chinese)</Radio>
+              </Space>
+            </Radio.Group>
           </Stack>
         </Stack.Item>
         <Stack.Item className="Box">