[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,40 +18,42 @@ type Props = {
 
 }
 
-export default class RadioSetting extends React.PureComponent<Props> {
+const RadioSetting = ({
-    public static defaultProps: Partial<Props> = {
+    labelClassName = '',
-        labelClassName: '',
+    inputClassName = '',
-        inputClassName: '',
+    options = [],
-        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);
-    };
-
-    public render(): JSX.Element {
     return (
         <Setting
-                label={this.props.label}
+            label={label}
-                labelClassName={this.props.labelClassName}
+            labelClassName={labelClassName}
-                inputClassName={this.props.inputClassName}
+            inputClassName={inputClassName}
-                helpText={this.props.helpText}
+            helpText={helpText}
-                inputId={this.props.id}
+            inputId={id}
         >
             {
-                    this.props.options.map(({value, text}) => {
+                options.map(({value: option, text}) => {
                     return (
                         <div
                             className='radio'
-                                key={value}
+                            key={option}
                         >
                             <label>
                                 <input
                                     type='radio'
-                                        value={value}
+                                    value={option}
-                                        name={this.props.id}
+                                    name={id}
-                                        checked={value === this.props.value}
+                                    checked={option === value}
-                                        onChange={this.handleChange}
+                                    onChange={handleChange}
                                 />
                                 {text}
                             </label>
@@ -60,5 +63,6 @@ export default class RadioSetting extends React.PureComponent<Props> {
             }
         </Setting>
     );
-    }
+};
-}
+
+export default memo(RadioSetting);