@pareto-engineering/design-system 2.0.0-alpha.59 → 2.0.0-alpha.60

package/src/stories/f/ChoicesInput.stories.jsx

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
-
+import { useEffect } from 'react'
 import { ChoicesInput, FormDebugger } from 'ui'
-import { Formik, Form } from 'formik'
+import { Formik, Form, useField } from 'formik'
 
 export default {
   title        :'f/fields/ChoicesInput',
@@ -29,14 +29,6 @@ export default {
   },
 }
 
-const Template = (args) => (
-  <>
-    <ChoicesInput {...args} />
-    <FormDebugger />
-  </>
-)
-
-export const Base = Template.bind({})
 const optionsMap = [
   {
     value:'red',
@@ -72,18 +64,52 @@ const optionsMap = [
   },
 ]
 
+// eslint-disable-next-line react/prop-types
+const Template = ({ defaultValue, ...args }) => {
+  const Content = () => {
+    const [, , helpers] = useField(args.name)
+    const { setValue } = helpers
+
+    useEffect(() => {
+      setValue(defaultValue)
+    }, [])
+
+    return (
+      <>
+        <ChoicesInput {...args} />
+        <FormDebugger />
+      </>
+    )
+  }
+  return <Content />
+}
+
+export const Base = Template.bind({})
 Base.args = {
   id     :'colors',
   options:optionsMap,
   name   :'color',
 }
 
+export const WithDefaultFormikValue = Template.bind({})
+WithDefaultFormikValue.args = {
+  ...Base.args,
+  defaultValue:'red',
+}
+
 export const Multiple = Template.bind({})
 Multiple.args = {
   ...Base.args,
   multiple:true,
 }
 
+export const MultipleWithDefaultFormikValue = Template.bind({})
+MultipleWithDefaultFormikValue.args = {
+  ...Base.args,
+  multiple    :true,
+  defaultValue:['brown', 'violet'],
+}
+
 export const MultipleWithGrid = Template.bind({})
 MultipleWithGrid.args = {
   ...Base.args,

package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx

@@ -72,7 +72,7 @@ const ChoicesInput = ({
           <Choice
             key={choice.value}
             name={name}
-            id={name}
+            id={`${name}-${choice.value}`}
             multiple={multiple}
             validate={validate}
             disabled={disabled}

package/src/ui/f/fields/ChoicesInput/common/Choice/Choice.jsx

@@ -28,7 +28,15 @@ const Choice = ({
   validate,
   disabled,
 }) => {
-  const [field] = useField({ name, validate })
+  const type = multiple ? 'checkbox' : 'radio'
+
+  const [field] = useField({
+    name,
+    validate,
+    type,
+    value,
+  })
+
   return (
     <div
       className={[
@@ -43,7 +51,7 @@ const Choice = ({
       style={style}
     >
       <input
-        type={multiple ? 'checkbox' : 'radio'}
+        type={type}
         id={id}
         name={name}
         {...field}