From 76264e3fe86d1ac3c9f6d91290e77db8d9272d1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=9F=E3=81=84=E3=81=A1=20=E3=81=B2?=
<taichi221228@icloud.com>
Date: Mon, 8 May 2023 18:12:53 +0900
Subject: [PATCH] Rewrite RadioButton component as FC (#24897)
---
.../mastodon/components/radio_button.jsx | 35 -------------------
.../mastodon/components/radio_button.tsx | 30 ++++++++++++++++
2 files changed, 30 insertions(+), 35 deletions(-)
delete mode 100644 app/javascript/mastodon/components/radio_button.jsx
create mode 100644 app/javascript/mastodon/components/radio_button.tsx
diff --git a/app/javascript/mastodon/components/radio_button.jsx b/app/javascript/mastodon/components/radio_button.jsx
deleted file mode 100644
index 0496fa286..000000000
--- a/app/javascript/mastodon/components/radio_button.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export default class RadioButton extends React.PureComponent {
-
- static propTypes = {
- value: PropTypes.string.isRequired,
- checked: PropTypes.bool,
- name: PropTypes.string.isRequired,
- onChange: PropTypes.func.isRequired,
- label: PropTypes.node.isRequired,
- };
-
- render () {
- const { name, value, checked, onChange, label } = this.props;
-
- return (
- <label className='radio-button'>
- <input
- name={name}
- type='radio'
- value={value}
- checked={checked}
- onChange={onChange}
- />
-
- <span className={classNames('radio-button__input', { checked })} />
-
- <span>{label}</span>
- </label>
- );
- }
-
-}
diff --git a/app/javascript/mastodon/components/radio_button.tsx b/app/javascript/mastodon/components/radio_button.tsx
new file mode 100644
index 000000000..9ba098f78
--- /dev/null
+++ b/app/javascript/mastodon/components/radio_button.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+ value: string;
+ checked: boolean;
+ name: string;
+ onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+ label: React.ReactNode;
+};
+
+export const RadioButton: React.FC<Props> = ({ name, value, checked, onChange, label }) => {
+ return (
+ <label className='radio-button'>
+ <input
+ name={name}
+ type='radio'
+ value={value}
+ checked={checked}
+ onChange={onChange}
+ />
+
+ <span className={classNames('radio-button__input', { checked })} />
+
+ <span>{label}</span>
+ </label>
+ );
+};
+
+export default RadioButton;