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

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

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

14
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 { Subscriber } from 'joy-react-broadcast';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import rndId from 'rnd-id'; import rndId from 'rnd-id';
import isUndefined from 'lodash.isundefined';
import Label from './label'; import Label from './label';
import is from 'styled-is'; import is from 'styled-is';
@ -122,18 +123,21 @@ const InputLabel = styled.label`
const BaseToggle = BaseInput(({ children, ...rest }) => { const BaseToggle = BaseInput(({ children, ...rest }) => {
const render = value => { const render = value => {
const id = rndId(); const checked =
isUndefined(rest.value) && isUndefined(rest.checked)
? undefined
: rest.value === true || rest.checked === true;
return ( return (
<InputContainer> <InputContainer>
<Input {...value} {...rest} id={id} type="checkbox" /> <Input {...rest} checked={checked} type="checkbox" />
<InputLabel <InputLabel
{...rest} htmlFor={rest.id}
htmlFor={id}
error={rest.error} error={rest.error}
warning={rest.warning} warning={rest.warning}
success={rest.success} success={rest.success}
/> />
<Label {...rest}> {children}</Label> <Label> {children}</Label>
</InputContainer> </InputContainer>
); );
}; };