ggwzrd / react-mealby-validation-form Goto Github PK

I believe we should change the interfaces of value and data in the ListCombo component. Right now is to much coupled with the concept of T-shirts of brand and sizes while should be decoupled and more generic.

Suggested approach:

• Rename data prop to dataSource or source.
• Each option ( with sub-options ) in the dataSource object should look something like this

{
  label: "Dolce & Gabbana",
  value: "D_G",
  options: [
    { 
      label: "M",
      value: "m"
    },
    {
      label: "L",
      value: "l"
    },
    {
      label: "XXL",
      value: "xxl"
    }
  ]
}

• Value can be returned as you prefer with one of the following format

"D_G::L"

  {
     primary: "D_G",
     secodart: "L"
  }

["D_G","L"]

ListCombo field must be connected to the form using InputField. Let's suppose the user submits the form after choosing brand and size of the T-shirt, the ListCombo field should contain a value that looks like this ( I suppose )

{
  name: "Obey",
  size: "M"
}

The ListCombo receive default and current values through the prop value and:

• every time the users changes the brand from ListCombo the value of the form should be updated so that ListCombo will re-render with the new selected brand and will show the available sizes
• every time the users changes the size from ListCombo the form value should be updated so that ListCombo will re-render with the new selected size
• if the user selects a brand which doesn't have the previously selected size, the size field should be reset to null.