Refactor fieldset

src/fields/CheckboxesField.jsx

@@ -1,35 +1,26 @@
 import React from 'react'
 
-import { block, cleanProps, normalizeChoices } from '../utils'
+import { block } from '../utils'
+import FieldSet from '../utils/FieldSet'
 
 @block
 export default class CheckboxesField extends React.Component {
+  static defaultProps = { value: [] }
+
   render(b) {
-    const { value, onChange, ...props } = this.props
-    const values = value || []
+    const { onChange, ...props } = this.props
     return (
-      <fieldset className={b}>
-        {normalizeChoices(props).map(([choice, choiceLabel]) => (
-          <label
-            key={choice}
-            className={b.e('label').m({ on: values.includes(choice) })}
-          >
-            <input
-              {...cleanProps(props)}
-              type="checkbox"
-              checked={values.includes(choice)}
-              onChange={e =>
-                onChange(
-                  e.target.checked
-                    ? [...values, choice]
-                    : values.filter(val => val !== choice)
-                )
-              }
-            />
-            <span className={b.e('label-text')}>{choiceLabel}</span>
-          </label>
-        ))}
-      </fieldset>
+      <FieldSet
+        className={b}
+        isChecked={(choice, value) => value.includes(choice)}
+        onChange={(choice, value, checked) =>
+          onChange(
+            checked ? [...value, choice] : value.filter(val => val !== choice)
+          )
+        }
+        {...props}
+        type="checkbox"
+      />
     )
   }
 }

src/fields/RadiosField.jsx

@@ -1,28 +1,20 @@
 import React from 'react'
 
-import { block, cleanProps, normalizeChoices } from '../utils'
+import { block } from '../utils'
+import FieldSet from '../utils/FieldSet'
 
 @block
 export default class RadiosField extends React.Component {
   render(b) {
-    const { value, onChange, ...props } = this.props
+    const { onChange, ...props } = this.props
     return (
-      <fieldset className={b}>
-        {normalizeChoices(props).map(([choice, choiceLabel]) => (
-          <label
-            key={choice}
-            className={b.e('label').m({ on: choice === value })}
-          >
-            <input
-              {...cleanProps(props)}
-              type="radio"
-              checked={choice === value}
-              onChange={e => e.target.checked && onChange(choice)}
-            />
-            <span className={b.e('label-text')}>{choiceLabel}</span>
-          </label>
-        ))}
-      </fieldset>
+      <FieldSet
+        className={b}
+        isChecked={(choice, value) => choice === value}
+        onChange={(choice, value, checked) => checked && onChange(choice)}
+        {...props}
+        type="radio"
+      />
     )
   }
 }

src/utils/FieldSet.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { block, cleanProps, normalizeChoices } from '../utils'
+
+@block
+export default class FieldSet extends React.Component {
+  render(b) {
+    const { type, isChecked, value, onChange, ...props } = this.props
+    return (
+      <fieldset className={b}>
+        {normalizeChoices(props).map(([choice, choiceLabel]) => (
+          <label
+            key={choice}
+            className={b.e('label').m({ on: choice === value })}
+          >
+            <input
+              {...cleanProps(props)}
+              type={type}
+              checked={isChecked(choice, value)}
+              onChange={e => onChange(choice, value, e.target.checked)}
+            />
+            <span className={b.e('label-text')}>{choiceLabel}</span>
+          </label>
+        ))}
+      </fieldset>
+    )
+  }
+}