don't use value's id on radio instances

This commit is contained in:
Sérgio Ramos 2017-03-01 17:04:58 +00:00 committed by Judit Greskovits
parent a8c4ca642c
commit c648ca6878
3 changed files with 49 additions and 64 deletions

View File

@ -12,10 +12,7 @@ storiesOf('Input', module)
.add('type=email', () => ( .add('type=email', () => (
<FormGroup> <FormGroup>
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<small>We&apos;ll never share your email with anyone else.</small> <small>We&apos;ll never share your email with anyone else.</small>
</FormGroup> </FormGroup>
)) ))
@ -23,36 +20,24 @@ storiesOf('Input', module)
<div> <div>
<FormGroup> <FormGroup>
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<FormMeta error='Unexpected inline error!' /> <FormMeta error='Unexpected inline error!' />
</FormGroup> </FormGroup>
<FormGroup error='Unexpected group error!'> <FormGroup error='Unexpected group error!'>
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<FormMeta /> <FormMeta />
</FormGroup> </FormGroup>
{/* eslint-disable object-curly-newline */} {/* eslint-disable object-curly-newline */}
<FormGroup meta={{error: 'Unexpected meta error!'}}> <FormGroup meta={{error: 'Unexpected meta error!'}}>
{/* eslint-enable object-curly-newline */} {/* eslint-enable object-curly-newline */}
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<FormMeta /> <FormMeta />
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<FormMeta error> <FormMeta error>
Unexpected children error! Unexpected children error!
</FormMeta> </FormMeta>
@ -63,36 +48,24 @@ storiesOf('Input', module)
<div> <div>
<FormGroup> <FormGroup>
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<FormMeta warning='Unexpected inline warning!' /> <FormMeta warning='Unexpected inline warning!' />
</FormGroup> </FormGroup>
<FormGroup warning='Unexpected group warning!'> <FormGroup warning='Unexpected group warning!'>
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<FormMeta /> <FormMeta />
</FormGroup> </FormGroup>
{/* eslint-disable object-curly-newline */} {/* eslint-disable object-curly-newline */}
<FormGroup meta={{warning: 'Unexpected meta warning!'}}> <FormGroup meta={{warning: 'Unexpected meta warning!'}}>
{/* eslint-enable object-curly-newline */} {/* eslint-enable object-curly-newline */}
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<FormMeta /> <FormMeta />
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<FormMeta warning> <FormMeta warning>
Unexpected children warning! Unexpected children warning!
</FormMeta> </FormMeta>
@ -103,36 +76,24 @@ storiesOf('Input', module)
<div> <div>
<FormGroup> <FormGroup>
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<FormMeta success='Unexpected inline success!' /> <FormMeta success='Unexpected inline success!' />
</FormGroup> </FormGroup>
<FormGroup success='Unexpected group success!'> <FormGroup success='Unexpected group success!'>
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<FormMeta /> <FormMeta />
</FormGroup> </FormGroup>
{/* eslint-disable object-curly-newline */} {/* eslint-disable object-curly-newline */}
<FormGroup meta={{success: 'Unexpected meta success!'}}> <FormGroup meta={{success: 'Unexpected meta success!'}}>
{/* eslint-enable object-curly-newline */} {/* eslint-enable object-curly-newline */}
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<FormMeta /> <FormMeta />
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<FormMeta success> <FormMeta success>
Unexpected children success! Unexpected children success!
</FormMeta> </FormMeta>
@ -142,10 +103,7 @@ storiesOf('Input', module)
.add('Base meta', () => ( .add('Base meta', () => (
<FormGroup> <FormGroup>
<Label>Email Address</Label> <Label>Email Address</Label>
<Input <Input placeholder='Enter email' type='email' />
placeholder='Enter email'
type='email'
/>
<FormMeta>I&#39;m a children of meta</FormMeta> <FormMeta>I&#39;m a children of meta</FormMeta>
</FormGroup> </FormGroup>
)); ));

View File

@ -2,10 +2,21 @@ import styled from 'styled-components';
import ToggleBase from '../toggle-base'; import ToggleBase from '../toggle-base';
import { Baseline } from '../../../shared/composers'; import { Baseline } from '../../../shared/composers';
import BaseInput from '../base-input'; import BaseInput from '../base-input';
import React from 'react';
const RadioItem = BaseInput(styled.li` const Li = styled.li`
list-style-type: none; list-style-type: none;
`); `;
const RadioItem = BaseInput(({
children,
id, // hide id from li
...props
}) => (
<Li {...props}>
{children}
</Li>
));
const StyledUl = styled.ul` const StyledUl = styled.ul`
margin: 0; margin: 0;

View File

@ -1,5 +1,5 @@
import { remcalc, unitcalc, is } from '../../shared/functions'; import { remcalc, unitcalc, is, rndId } from '../../shared/functions';
import { Subscriber } from 'react-broadcast'; import { Broadcast, Subscriber } from 'react-broadcast';
import { boxes, colors } from '../../shared/constants'; import { boxes, colors } from '../../shared/constants';
import BaseInput from './base-input'; import BaseInput from './base-input';
import styled from 'styled-components'; import styled from 'styled-components';
@ -118,17 +118,27 @@ const ToggleBase = ({
[type]: true [type]: true
}; };
const render = (value) => { const render = ({
// eslint-disable-next-line react/prop-types
id, // ignore id from value
...oldValue
}) => {
const newValue = {
...oldValue,
id: rndId()
};
const toggle = ( const toggle = (
<InnerContainer {...types} type={type}> <InnerContainer {...types} type={type}>
<Input <Input
{...props} {...props}
{...value} {...oldValue}
id={newValue.id}
type={type} type={type}
/> />
<Label <Label
{...types} {...types}
htmlFor={value.id} htmlFor={newValue.id}
// eslint-disable-next-line react/prop-types // eslint-disable-next-line react/prop-types
error={props.error} error={props.error}
// eslint-disable-next-line react/prop-types // eslint-disable-next-line react/prop-types
@ -139,12 +149,18 @@ const ToggleBase = ({
</InnerContainer> </InnerContainer>
); );
return !OuterContainer ? toggle : ( const el = !OuterContainer ? toggle : (
<OuterContainer> <OuterContainer>
{toggle} {toggle}
{children} {children}
</OuterContainer> </OuterContainer>
); );
return (
<Broadcast channel='input-group' value={newValue}>
{el}
</Broadcast>
);
}; };
return ( return (