[MM-56297] Convert ./components/widgets/settings/radio_setting.tsx from Class Component to Function Component (#25770)

* [MM-56297] Convert `./components/widgets/settings/radio_setting.tsx` from Class Component to Function Component

* fix: check-types issue

webapp/channels/src/components/widgets/settings/radio_setting.tsx

@@ -1,13 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo, useCallback} from 'react';
+import type {ChangeEventHandler} from 'react';
 
 import Setting from './setting';
 
 type Props = {
     id: string;
-    options: Array<{text: string; value: string}>;
+    options?: Array<{text: string; value: string}>;
     label: React.ReactNode;
     onChange(name: string, value: any): void;
     value?: string;
@@ -17,48 +18,51 @@ type Props = {
 
 }
 
-export default class RadioSetting extends React.PureComponent<Props> {
-    public static defaultProps: Partial<Props> = {
-        labelClassName: '',
-        inputClassName: '',
-        options: [],
-    };
+const RadioSetting = ({
+    labelClassName = '',
+    inputClassName = '',
+    options = [],
+    onChange,
+    id,
+    label,
+    helpText,
+    value,
+}: Props) => {
+    const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
+        onChange(id, e.target.value);
+    }, [onChange, id]);
 
-    private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-        this.props.onChange(this.props.id, e.target.value);
-    };
+    return (
+        <Setting
+            label={label}
+            labelClassName={labelClassName}
+            inputClassName={inputClassName}
+            helpText={helpText}
+            inputId={id}
+        >
+            {
+                options.map(({value: option, text}) => {
+                    return (
+                        <div
+                            className='radio'
+                            key={option}
+                        >
+                            <label>
+                                <input
+                                    type='radio'
+                                    value={option}
+                                    name={id}
+                                    checked={option === value}
+                                    onChange={handleChange}
+                                />
+                                {text}
+                            </label>
+                        </div>
+                    );
+                })
+            }
+        </Setting>
+    );
+};
 
-    public render(): JSX.Element {
-        return (
-            <Setting
-                label={this.props.label}
-                labelClassName={this.props.labelClassName}
-                inputClassName={this.props.inputClassName}
-                helpText={this.props.helpText}
-                inputId={this.props.id}
-            >
-                {
-                    this.props.options.map(({value, text}) => {
-                        return (
-                            <div
-                                className='radio'
-                                key={value}
-                            >
-                                <label>
-                                    <input
-                                        type='radio'
-                                        value={value}
-                                        name={this.props.id}
-                                        checked={value === this.props.value}
-                                        onChange={this.handleChange}
-                                    />
-                                    {text}
-                                </label>
-                            </div>
-                        );
-                    })
-                }
-            </Setting>
-        );
-    }
-}
+export default memo(RadioSetting);