From fad8948e2bfef9d7ff8cd38c880702fbf96e03a8 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Fri, 18 Mar 2022 20:58:45 -0400
Subject: [PATCH] Make radio components modular
---
.../components/dropdown/FilterDropdown.js | 2 +-
src/cryptometrics/components/radio/Radio.js | 25 ++++++++++++++++++
.../components/radio/RadioForm.js | 26 +++----------------
3 files changed, 29 insertions(+), 24 deletions(-)
create mode 100644 src/cryptometrics/components/radio/Radio.js
diff --git a/src/cryptometrics/components/dropdown/FilterDropdown.js b/src/cryptometrics/components/dropdown/FilterDropdown.js
index 12af95a..ec8b87f 100644
--- a/src/cryptometrics/components/dropdown/FilterDropdown.js
+++ b/src/cryptometrics/components/dropdown/FilterDropdown.js
@@ -2,7 +2,7 @@ import { ArrowRightIcon } from "@heroicons/react/outline";
import classNames from "classnames";
import React, { useState, useEffect, useRef } from "react";
import Button from "../button/Button";
-import { RadioInputForm } from "../radio/RadioForm";
+import RadioInputForm from "../radio/RadioForm";
import { CSSTransition } from "react-transition-group";
export function FilterDropdown({
diff --git a/src/cryptometrics/components/radio/Radio.js b/src/cryptometrics/components/radio/Radio.js
new file mode 100644
index 0000000..ff781fd
--- /dev/null
+++ b/src/cryptometrics/components/radio/Radio.js
@@ -0,0 +1,25 @@
+import React from "react";
+import classNames from "classnames";
+
+function Radio({ selected, radioValue, radioLabel, onChange }) {
+ return (
+ <label className="inline-flex items-center w-full">
+ <input
+ type="radio"
+ className="form-radio h-4 w-4 accent-indigo-600 hover:accent-indigo-700"
+ value={radioValue}
+ checked={selected === radioValue}
+ onChange={onChange}
+ />
+ <span
+ className={classNames("font-poppins ml-2 text-base", {
+ "dark:text-white font-extralight": selected !== radioValue,
+ "dark:text-indigo-500": selected === radioValue,
+ })}
+ >
+ {radioLabel}
+ </span>
+ </label>
+ );
+}
+export default Radio;
diff --git a/src/cryptometrics/components/radio/RadioForm.js b/src/cryptometrics/components/radio/RadioForm.js
index 79727e5..a6ab204 100644
--- a/src/cryptometrics/components/radio/RadioForm.js
+++ b/src/cryptometrics/components/radio/RadioForm.js
@@ -1,8 +1,8 @@
-import classNames from "classnames";
import React from "react";
import Input from "../inputs/Input";
+import Radio from "./Radio";
-export function RadioInputForm({
+function RadioInputForm({
inputLeftSymbol,
inputRightSymbol,
inputType,
@@ -46,24 +46,4 @@ export function RadioInputForm({
);
}
-export function Radio({ selected, radioValue, radioLabel, onChange }) {
- return (
- <label className="inline-flex items-center w-full">
- <input
- type="radio"
- className="form-radio h-4 w-4 accent-indigo-600 hover:accent-indigo-700"
- value={radioValue}
- checked={selected === radioValue}
- onChange={onChange}
- />{" "}
- <span
- className={classNames("font-poppins ml-2 text-base", {
- "dark:text-white font-extralight": selected !== radioValue,
- "dark:text-indigo-500": selected === radioValue,
- })}
- >
- {radioLabel}
- </span>
- </label>
- );
-}
+export default RadioInputForm;
--
GitLab