don't use value's id
on radio instances
This commit is contained in:
parent
a8c4ca642c
commit
c648ca6878
@ -12,10 +12,7 @@ storiesOf('Input', module)
|
||||
.add('type=email', () => (
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<small>We'll never share your email with anyone else.</small>
|
||||
</FormGroup>
|
||||
))
|
||||
@ -23,36 +20,24 @@ storiesOf('Input', module)
|
||||
<div>
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta error='Unexpected inline error!' />
|
||||
</FormGroup>
|
||||
<FormGroup error='Unexpected group error!'>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup meta={{error: 'Unexpected meta error!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta error>
|
||||
Unexpected children error!
|
||||
</FormMeta>
|
||||
@ -63,36 +48,24 @@ storiesOf('Input', module)
|
||||
<div>
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta warning='Unexpected inline warning!' />
|
||||
</FormGroup>
|
||||
<FormGroup warning='Unexpected group warning!'>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup meta={{warning: 'Unexpected meta warning!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta warning>
|
||||
Unexpected children warning!
|
||||
</FormMeta>
|
||||
@ -103,36 +76,24 @@ storiesOf('Input', module)
|
||||
<div>
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta success='Unexpected inline success!' />
|
||||
</FormGroup>
|
||||
<FormGroup success='Unexpected group success!'>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup meta={{success: 'Unexpected meta success!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta success>
|
||||
Unexpected children success!
|
||||
</FormMeta>
|
||||
@ -142,10 +103,7 @@ storiesOf('Input', module)
|
||||
.add('Base meta', () => (
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<Input placeholder='Enter email' type='email' />
|
||||
<FormMeta>I'm a children of meta</FormMeta>
|
||||
</FormGroup>
|
||||
));
|
||||
|
@ -2,10 +2,21 @@ import styled from 'styled-components';
|
||||
import ToggleBase from '../toggle-base';
|
||||
import { Baseline } from '../../../shared/composers';
|
||||
import BaseInput from '../base-input';
|
||||
import React from 'react';
|
||||
|
||||
const RadioItem = BaseInput(styled.li`
|
||||
const Li = styled.li`
|
||||
list-style-type: none;
|
||||
`);
|
||||
`;
|
||||
|
||||
const RadioItem = BaseInput(({
|
||||
children,
|
||||
id, // hide id from li
|
||||
...props
|
||||
}) => (
|
||||
<Li {...props}>
|
||||
{children}
|
||||
</Li>
|
||||
));
|
||||
|
||||
const StyledUl = styled.ul`
|
||||
margin: 0;
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { remcalc, unitcalc, is } from '../../shared/functions';
|
||||
import { Subscriber } from 'react-broadcast';
|
||||
import { remcalc, unitcalc, is, rndId } from '../../shared/functions';
|
||||
import { Broadcast, Subscriber } from 'react-broadcast';
|
||||
import { boxes, colors } from '../../shared/constants';
|
||||
import BaseInput from './base-input';
|
||||
import styled from 'styled-components';
|
||||
@ -118,17 +118,27 @@ const ToggleBase = ({
|
||||
[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 = (
|
||||
<InnerContainer {...types} type={type}>
|
||||
<Input
|
||||
{...props}
|
||||
{...value}
|
||||
{...oldValue}
|
||||
id={newValue.id}
|
||||
type={type}
|
||||
/>
|
||||
<Label
|
||||
{...types}
|
||||
htmlFor={value.id}
|
||||
htmlFor={newValue.id}
|
||||
// eslint-disable-next-line react/prop-types
|
||||
error={props.error}
|
||||
// eslint-disable-next-line react/prop-types
|
||||
@ -139,12 +149,18 @@ const ToggleBase = ({
|
||||
</InnerContainer>
|
||||
);
|
||||
|
||||
return !OuterContainer ? toggle : (
|
||||
const el = !OuterContainer ? toggle : (
|
||||
<OuterContainer>
|
||||
{toggle}
|
||||
{children}
|
||||
</OuterContainer>
|
||||
);
|
||||
|
||||
return (
|
||||
<Broadcast channel='input-group' value={newValue}>
|
||||
{el}
|
||||
</Broadcast>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
|
Loading…
Reference in New Issue
Block a user