form-atoms / list-atom

A listAtom extension for the Jotai form-atoms.
https://form-atoms.github.io/list-atom/
MIT License
4 stars 1 forks source link

Doc: how to achieve `AddButton` as part of last item #5

Closed pgangwani closed 6 months ago

pgangwani commented 6 months ago

Is your feature request related to a problem? Please describe. I have requirement to have AddButton as part of last index item. But with current implementation AddButton's placement is hardcoded. Below is illustration: image

Additionally I would like to bind max index 1 (n) and min index 2(n+1) to have 2 way data binding with single atom. Meaning if I edit max1, min2 should be updated and vice versa

Describe the solution you'd like Make AddButton configurable and default no AddButton if props is not passed

Describe alternatives you've considered I have only one alternative to have value copied and concat, no other option as of now. Thanks to @MiroslavPetrik for helping me learn

Additional context Add any other context or screenshots about the feature request here.

MiroslavPetrik commented 6 months ago

But with current implementation AddButton's placement is hardcoded

You can use the useListActions(myListAtom) hook, which has add action. Use this action anywhere.

I've added example for this useful case, also displaying the add/remove actions only for the last item: https://form-atoms.github.io/list-atom/?path=/docs/components-list--docs#positioning-add-button

Make AddButton configurable and default no AddButton if props is not passed

For now, you can disable the default button by setting the prop to render empty fragment:

<List AddButton={() => <></>} />

Also for the add functionality, there is a new demo for prepend which is supported within the list and might be useful https://form-atoms.github.io/list-atom/?path=/docs/components-list--docs#prepend

I don't have time to go into the min/max bindings for now. perhaps the useList hook together with jotai-effect can be effective here.

MiroslavPetrik commented 6 months ago

Also docs for the useListActions is here https://github.com/form-atoms/list-atom?tab=readme-ov-file#uselistactions