From c648ca68784c36e24af51e9feb7d1fbb3002580b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Wed, 1 Mar 2017 17:04:58 +0000 Subject: [PATCH] don't use value's `id` on radio instances --- ui/src/components/form/input/story.js | 70 ++++++--------------------- ui/src/components/form/radio/index.js | 15 +++++- ui/src/components/form/toggle-base.js | 28 ++++++++--- 3 files changed, 49 insertions(+), 64 deletions(-) diff --git a/ui/src/components/form/input/story.js b/ui/src/components/form/input/story.js index 580a8cd3..7e44043a 100644 --- a/ui/src/components/form/input/story.js +++ b/ui/src/components/form/input/story.js @@ -12,10 +12,7 @@ storiesOf('Input', module) .add('type=email', () => ( - + We'll never share your email with anyone else. )) @@ -23,36 +20,24 @@ storiesOf('Input', module)
- + - + {/* eslint-disable object-curly-newline */} {/* eslint-enable object-curly-newline */} - + - + Unexpected children error! @@ -63,36 +48,24 @@ storiesOf('Input', module)
- + - + {/* eslint-disable object-curly-newline */} {/* eslint-enable object-curly-newline */} - + - + Unexpected children warning! @@ -103,36 +76,24 @@ storiesOf('Input', module)
- + - + {/* eslint-disable object-curly-newline */} {/* eslint-enable object-curly-newline */} - + - + Unexpected children success! @@ -142,10 +103,7 @@ storiesOf('Input', module) .add('Base meta', () => ( - + I'm a children of meta )); diff --git a/ui/src/components/form/radio/index.js b/ui/src/components/form/radio/index.js index ccee7b9a..840837a2 100644 --- a/ui/src/components/form/radio/index.js +++ b/ui/src/components/form/radio/index.js @@ -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 +}) => ( +
  • + {children} +
  • +)); const StyledUl = styled.ul` margin: 0; diff --git a/ui/src/components/form/toggle-base.js b/ui/src/components/form/toggle-base.js index e50a902c..c1e0b024 100644 --- a/ui/src/components/form/toggle-base.js +++ b/ui/src/components/form/toggle-base.js @@ -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 = (