Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(ui-toolkit): fix form toggle infinite loop

This commit is contained in:
Sérgio Ramos 2018-01-09 14:57:00 +00:00
parent 98166047fd
commit 6bd073ff82
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui-toolkit/package.json
View File

@ -14,8 +14,7 @@
"compile:es": "babel src --out-dir dist/es --ignore spec.js",
"compile:umd": "UMD=1 babel src --out-dir dist/umd --ignore spec.js",
"compile": "redrun -p compile:*",
"dev":
"NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
"dev": "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
"styleguide:build": "NODE_ENV=production styleguidist build",
"styleguide": "NODE_ENV=development styleguidist server",
"prepublish": "NODE_ENV=production npm run compile"
@ -25,6 +24,7 @@
"joy-react-broadcast": "^0.6.9",
"joyent-icons": "^2.0.0",
"lodash.isboolean": "^3.0.3",
"lodash.isundefined": "^3.0.1",
"normalized-styled-components": "^1.0.17",
"outy": "^0.1.2",
"pascal-case": "^2.0.1",

18
packages/ui-toolkit/src/form/toggle.js
View File

@ -3,6 +3,7 @@ import styled from 'styled-components';
import { Subscriber } from 'joy-react-broadcast';
import remcalc from 'remcalc';
import rndId from 'rnd-id';
import isUndefined from 'lodash.isundefined';
import Label from './label';
import is from 'styled-is';
@ -26,7 +27,7 @@ const Input = styled.input`
left: 50%;
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.primary};
}
&:active {
box-shadow: none;
&:after {
@ -113,7 +114,7 @@ const InputLabel = styled.label`
&:hover {
border: ${remcalc(1)} solid ${props => props.theme.grey};
&:after {
&:after {
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
}
}
@ -122,18 +123,21 @@ const InputLabel = styled.label`
const BaseToggle = BaseInput(({ children, ...rest }) => {
const render = value => {
const id = rndId();
const checked =
isUndefined(rest.value) && isUndefined(rest.checked)
? undefined
: rest.value === true || rest.checked === true;
return (
<InputContainer>
<Input {...value} {...rest} id={id} type="checkbox" />
<Input {...rest} checked={checked} type="checkbox" />
<InputLabel
{...rest}
htmlFor={id}
htmlFor={rest.id}
error={rest.error}
warning={rest.warning}
success={rest.success}
/>
<Label {...rest}> {children}</Label>
<Label> {children}</Label>
</InputContainer>
);
};