Refactor/radio

components/radio/__docs__/adaptor/index.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { Radio } from '@alifd/next';
+
+interface Data {
+    size: string;
+    state: string;
+    label: string;
+    type: string;
+    value: string;
+}
+
+export default {
+    name: 'Radio',
+    shape: ['normal', { value: 'button', label: 'Radio Button' }],
+    editor: (shape = 'normal') => {
+        if (shape === 'button') {
+            return {
+                props: [
+                    {
+                        name: 'size',
+                        type: Types.enum,
+                        options: ['large', 'medium', 'small'],
+                        default: 'medium',
+                    },
+                    {
+                        name: 'state',
+                        label: 'Status',
+                        type: Types.enum,
+                        options: ['normal', 'disabled'],
+                        default: 'normal',
+                    },
+                ],
+                data: {
+                    hover: true,
+                    disable: true,
+                    active: true,
+                    default: `Cell 1\n*Cell 2\nCell 3`,
+                },
+            };
+        }
+        return {
+            props: [
+                {
+                    name: 'state',
+                    label: 'Status',
+                    type: Types.enum,
+                    options: [
+                        'normal',
+                        'hover',
+                        'disabled',
+                        'checked',
+                        'checkedHover',
+                        'checkedDisabled',
+                    ],
+                    default: 'normal',
+                },
+                {
+                    name: 'label',
+                    type: Types.string,
+                    default: 'label',
+                },
+            ],
+        };
+    },
+    adaptor: ({ shape, size, state = '', label, data, ...others }: any) => {
+        if (shape === 'normal') {
+            return (
+                <Radio
+                    {...others}
+                    disabled={['disabled', 'checkedDisabled'].indexOf(state) !== -1}
+                    className={`${others.className || ''} ${
+                        ['hover', 'checkedHover'].indexOf(state) !== -1 ? 'hovered' : ''
+                    }`}
+                    checked={state.indexOf('checked') !== -1}
+                    label={label}
+                />
+            );
+        }
+
+        const list = (parseData(data) as Data[]).filter(({ type }) => type === NodeType.node);
+
+        return (
+            <Radio.Group
+                {...others}
+                size={size}
+                shape="button"
+                value={list.findIndex(item => item.state === 'active')}
+            >
+                {list.map((item, index) => (
+                    <Radio
+                        key={`key_${index}`}
+                        className={item.state === 'hover' ? 'hovered' : ''}
+                        value={index}
+                        disabled={item.state === 'disabled' || state === 'disabled'}
+                    >
+                        {item.value}
+                    </Radio>
+                ))}
+            </Radio.Group>
+        );
+    },
+};

components/radio/__docs__/demo/accessibility/index.md

@@ -2,7 +2,7 @@
 
 # 无障碍支持
 
-通过`aria-labelledby`给Group设置辅助技术可及的文本，按键请参考后文[#无障碍键盘操作指南](#无障碍键盘操作指南)。
+通过`aria-labelledby`给 Group 设置辅助技术可及的文本，按键请参考后文[#无障碍键盘操作指南](#无障碍键盘操作指南)。
 
 # en-US order=8
 

components/radio/__docs__/demo/accessibility/index.tsx

@@ -5,7 +5,7 @@ import { Radio } from '@alifd/next';
 const RadioGroup = Radio.Group;
 ReactDOM.render(
     <div>
-        <span id="radio-a11y">Programming language ：</span>
+        <span id="radio-a11y">Programming language :</span>
         <RadioGroup aria-labelledby="radio-a11y">
             <Radio id="python" value="python">
                 python

components/radio/__docs__/demo/button/index.tsx

@@ -22,37 +22,29 @@ const list = [
 ];
 
 class ControlApp extends React.Component {
-    constructor(props) {
-        super(props);
+    state = {
+        value1: 'apple',
+        value2: 'apple',
+        value3: '',
+    };
 
-        this.state = {
-            value1: 'apple',
-            value2: 'apple',
-            value3: '',
-        };
-
-        this.onNestChange = this.onNestChange.bind(this);
-        this.onSmallChange = this.onSmallChange.bind(this);
-        this.onMediumChange = this.onMediumChange.bind(this);
-    }
-
-    onSmallChange(value) {
+    onSmallChange = (value: string) => {
         this.setState({
             value1: value,
         });
-    }
+    };
 
-    onMediumChange(value) {
+    onMediumChange = (value: string) => {
         this.setState({
             value2: value,
         });
-    }
+    };
 
-    onNestChange(value) {
+    onNestChange = (value: string) => {
         this.setState({
             value3: value,
         });
-    }
+    };
 
     render() {
         return (

components/radio/__docs__/demo/control/index.tsx

@@ -20,26 +20,16 @@ const list = [
 ];
 
 class ControlApp extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            value: 'orange',
-        };
-
-        this.onChange = this.onChange.bind(this);
-    }
+    state = {
+        value: 'orange',
+    };
 
-    onChange(value) {
+    onChange = (value: string) => {
         this.setState({
             value: value,
         });
         console.log('onChange', value);
-    }
-
-    onClick(e) {
-        console.log('onClick', e);
-    }
+    };
 
     render() {
         return (

components/radio/__docs__/demo/dataSource/index.md

@@ -2,7 +2,7 @@
 
 # 传入数组配置
 
-通过配置 `dataSource` 参数来渲染单选框分组，数组中对象元素支持配置radio属性。
+通过配置 `dataSource` 参数来渲染单选框分组，数组中对象元素支持配置 radio 属性。
 
 # en-US order=2
 

components/radio/__docs__/demo/dataSource/index.tsx

@@ -22,22 +22,18 @@ const list = [
 ];
 
 class App extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            value: 'apple',
-            buttonValue: 'pear',
-        };
-    }
+    state = {
+        value: 'apple',
+        buttonValue: 'pear',
+    };
 
-    onChange = value => {
+    onChange = (value: string) => {
         this.setState({
             value: value,
         });
     };
 
-    onButtonChange = value => {
+    onButtonChange = (value: string) => {
         this.setState({
             buttonValue: value,
         });

components/radio/__docs__/demo/direction/index.md

@@ -2,7 +2,7 @@
 
 # 垂直展示
 
-垂直展示`<Radio.Group>`，配合更多输入框。仅适用于非Button样式的`<Radio.Group>`。
+垂直展示`<Radio.Group>`，配合更多输入框。仅适用于非 Button 样式的`<Radio.Group>`。
 
 # en-US order=5
 

components/radio/__docs__/demo/direction/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ChangeEvent } from 'react';
 import ReactDOM from 'react-dom';
 import { Radio, Input, Switch } from '@alifd/next';
 
@@ -8,7 +8,7 @@ class App extends React.Component {
         dir: true,
     };
 
-    onChange = (value, e) => {
+    onChange = (value: number, e: ChangeEvent<HTMLInputElement>) => {
         console.log('radio checked', value, e);
         this.setState({
             value,

components/radio/__docs__/demo/group/index.tsx

@@ -5,21 +5,15 @@ import { Radio } from '@alifd/next';
 const RadioGroup = Radio.Group;
 
 class App extends React.Component {
-    constructor(props) {
-        super(props);
+    state = {
+        value: 'orange',
+    };
 
-        this.state = {
-            value: 'orange',
-        };
-
-        this.onChange = this.onChange.bind(this);
-    }
-
-    onChange(value) {
+    onChange = (value: string) => {
         this.setState({
             value: value,
         });
-    }
+    };
 
     render() {
         return (

components/radio/__docs__/demo/isPreview/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Radio, Switch } from '@alifd/next';
+import type { RadioProps, GroupProps } from '@alifd/next/lib/radio';
 
 class App extends React.Component {
     state = {
@@ -20,10 +21,10 @@ class App extends React.Component {
         });
     };
 
-    renderChecked = (checked, props) =>
+    renderChecked: RadioProps['renderPreview'] = (checked, props) =>
         checked ? <span>{props.children}</span> : <span>null</span>;
 
-    renderPreview = (previewed, props) => <span>{previewed.label}</span>;
+    renderPreview: GroupProps['renderPreview'] = previewed => <span>{previewed.label}</span>;
 
     render() {
         return (

components/radio/__docs__/demo/useWithGrid/index.md

@@ -1,6 +1,6 @@
 # zh-CN order=7
 
-# 使用Grid快速布局
+# 使用 Grid 快速布局
 
 使用 `Grid` 布局 `RadioGroup` 中的选项。