[form-builder] Add overridable part for array input functionality #795
Conversation
| @@ -3,6 +3,7 @@ import type {ArrayType, ItemValue} from './typedefs' | |||
| import React from 'react' | |||
| import DropDownButton from 'part:@sanity/components/buttons/dropdown' | |||
| import Button from 'part:@sanity/components/buttons/default' | |||
There was a problem hiding this comment.
☝️Neither DropdownButton or Button is in use in this file anymore and these imports can be removed.
| @@ -3,6 +3,7 @@ import React from 'react' | |||
| import {get} from 'lodash' | |||
| import {Item as DefaultItem, List as DefaultList} from 'part:@sanity/components/lists/default' | |||
| import {Item as SortableItem, List as SortableList} from 'part:@sanity/components/lists/sortable' | |||
| import ArrayFunctions from 'part:@sanity/form-builder/input/array/functions' | |||
| import Fieldset from 'part:@sanity/components/fieldsets/default' | |||
| import Button from 'part:@sanity/components/buttons/default' | |||
There was a problem hiding this comment.
The Button and DropdownButton imports can be removed from this file too
| readOnly={readOnly} | ||
| appendItem={this.append} | ||
| prependItem={this.prepend} | ||
| focusItem={this.handleFocusItem} |
There was a problem hiding this comment.
Any reason this prop is not named onFocusItem?
There was a problem hiding this comment.
I'm a bit torn on this - onFocusItem sounds like an event handler to me. "When an item is focused, call this function", but this is the opposite - it's an action: "Focus the item with the given path for me". Same goes for the other items, appendItem, focusItem and createValue are also actions, not event handlers.
There was a problem hiding this comment.
I see your point. Personally, I like to think about it from the component's perspective, and let it emit it blindly without having to consider context/what should happens next. When looking at it from the component's perspective it makes more sense to think of it as an event , e.g. "user requests the item to be focused/appended/whatever". So I think it should be up to up to the owner/consumer component to decide how to translate these events into the appropriate actions (or emit other events).
There was a problem hiding this comment.
Will change for the sake of consistency.
| children: ?Node, | ||
| value: Array<ItemValue>, | ||
| readOnly: ?boolean, | ||
| appendItem: (itemValue: ItemValue) => void, |
There was a problem hiding this comment.
Unless there's a good reason that I'm missing, I would prefer prefixing the function props here with on, e.g. onAppendItem. That is more in line with the conventions used elsewhere.
So
appendItem=>onAppendItemfocusItem=>onFocusItem,createValue=>onCreateValue
| onChange: (event: PatchEvent) => void | ||
| } | ||
|
|
||
| export default class ArrayFunctions extends React.Component<Props, State> { |
There was a problem hiding this comment.
This component has no state, so it should be just extends React.Component<Props>
|
Updated to address review feedback, please take another look :) |
* [form-builder] Add overridable part for array functionality * [test-studio] Add example of overriding array functions * [form-builder] Reorganize imports according to lint config * [form-builder] Remove state declaration from ArrayFunctions as it is stateless * [form-builder] Add `on`-prefix to append/prepend/createValue/focusItem
Sorry for the vague description.
Basically, we have seen people wanting to customize the process of adding new items to an array, but once you go down that path you quickly come to a point where you might want to perform other operations, such as adding a button for sorting the array items alphabetically or similar.
This PR moves the "Add"-button logic into a separate part and makes both the primitive and object version of array inputs use it. I had to do a few generalization changes, but it does lead to more code reuse.
There is an example added in the tests studio where it allows you to add items by searching the list of possible types.
Have not had time to give the API as much thought as I would have wanted, open for suggestions, feel free to make changes directly in the PR.