Skip to content

Commit

Permalink
Make Toggle stateless (#223)
Browse files Browse the repository at this point in the history
  • Loading branch information
ganlhi authored Jan 4, 2022
1 parent 875cb91 commit f93fe1e
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 22 deletions.
19 changes: 8 additions & 11 deletions src/components/Toggle/index.js
Original file line number Diff line number Diff line change
@@ -1,31 +1,28 @@
import React, { useState } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';

import Helper from '../Helper';
import {
StyledToggle,
ToggleBullet,
ToggleBulletLabelOn,
ToggleBulletLabelOff,
ToggleLabels,
ToggleBulletLabelOn,
ToggleContainer,
ToggleLabels,
} from './styles';

const Toggle = React.forwardRef(
(
{ children, className, checked, disabled, helper, onChange, ...props },
ref,
) => {
const [isOn, setIsOn] = useState(checked);

const handleToggle = () => {
if (disabled) {
return;
}

setIsOn(!isOn);
onChange(!isOn);
onChange(!checked);
};

const labelProps = {
Expand All @@ -43,25 +40,25 @@ const Toggle = React.forwardRef(
className='f-Toggle'
{...labelProps}
disabled={disabled}
isOn={isOn}
isOn={checked}
type='button'
>
<ToggleBullet
className='f-Toggle-bullet'
disabled={disabled}
isOn={isOn}
isOn={checked}
/>
<ToggleBulletLabelOn
className='f-Toggle-bullet-label f-Toggle-bullet-label--on'
disabled={disabled}
isOn={isOn}
isOn={checked}
>
ON
</ToggleBulletLabelOn>
<ToggleBulletLabelOff
className='f-Toggle-bullet-label f-Toggle-bullet-label--off'
disabled={disabled}
isOn={isOn}
isOn={checked}
>
OFF
</ToggleBulletLabelOff>
Expand Down
38 changes: 27 additions & 11 deletions src/components/Toggle/index.stories.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { boolean, text } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
Expand Down Expand Up @@ -64,19 +64,35 @@ stories.add('All states', () => (
</Toggle>
</div>
</div>
<Code>{`
<Code>{`
<Toggle name='no-text' onChange={noop} />
<Toggle name='with-helper' helper='With texts'>Label</Toggle>
`}</Code>
</>
));

stories.add('Playground', () => (
<Toggle
disabled={boolean('Is disabled?', false)}
helper={text('Label helper', 'Label helper')}
onChange={action('onChange')}
>
{text('Label', 'Toggle label')}
</Toggle>
));
stories.add('Playground', () => {
const [isChecked, setIsChecked] = useState(false);
const onChangeAction = action('onChange');

const onChange = state => {
onChangeAction(state);
setIsChecked(state);
};

return (
<>
<Toggle
disabled={boolean('Is disabled?', false)}
helper={text('Label helper', 'Label helper')}
onChange={onChange}
checked={isChecked}
>
{text('Label', 'Toggle label')}
</Toggle>

<button onClick={() => setIsChecked(true)}>Force ON</button>
<button onClick={() => setIsChecked(false)}>Force OFF</button>
</>
);
});

1 comment on commit f93fe1e

@vercel
Copy link

@vercel vercel bot commented on f93fe1e Jan 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.