gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor(client): convert toggle-button to TypeScript

Browse Source
This commit is contained in:
Marlon Johnson
2021-06-19 22:28:33 -07:00
parent 42e8b2247e
commit 4f91a25fb9
1 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/components/helpers/ToggleButton.js → client/src/components/helpers/toggle-button.tsx
View File

@ -1,5 +1,4 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { import {
ToggleButtonGroup as BSBG, ToggleButtonGroup as BSBG,
ToggleButton as TB ToggleButton as TB
@ -9,15 +8,18 @@ import './toggle-button.css';
import ToggleCheck from '../../assets/icons/ToggleCheck'; import ToggleCheck from '../../assets/icons/ToggleCheck';
import Spacer from '../../assets/icons/Spacer'; import Spacer from '../../assets/icons/Spacer';
const propTypes = { interface ButtonProps {
name: PropTypes.string.isRequired, name: string;
offLabel: PropTypes.string, offLabel: string;
onChange: PropTypes.func.isRequired, onChange: (value: string) => void;
onLabel: PropTypes.string, onLabel: string;
value: PropTypes.bool.isRequired value: boolean;
}; condition: boolean;
}
function getActiveClass(condition) { type ActiveClass = Pick<ButtonProps, 'condition'>;
function getActiveClass(condition: ActiveClass | unknown) {
return condition ? 'active' : 'not-active'; return condition ? 'active' : 'not-active';
} }
@ -27,7 +29,7 @@ export default function ToggleButton({
value, value,
onLabel = 'On', onLabel = 'On',
offLabel = 'Off' offLabel = 'Off'
}) { }: ButtonProps): React.ReactNode {
const checkIconStyle = { const checkIconStyle = {
height: '15px', height: '15px',
width: '20px' width: '20px'
@ -71,4 +73,3 @@ export default function ToggleButton({
} }
ToggleButton.displayName = 'ToggleButton'; ToggleButton.displayName = 'ToggleButton';
ToggleButton.propTypes = propTypes;