30:T75b,listInput = ({ input = defaultInput, min = 0, max = 0, value = null, defaultValue = '', } = {}) => { // This is a state variable that we will change as events occur on the input let values = value !== null ? value : new Array(Math.max(min, 1)).fill(defaultValue) // Templates const inputRow = (v, i) => html.fragment` changeValueAt(i, e.target.value)}>${input(v, i, values)} ` const footerRow = () => html.fragment` ` // Rerender Helpers const rerenderTbody = () => { const tbody = output.querySelector('tbody') tbody.innerHTML = '' tbody.appendChild(html.fragment`${values.map(inputRow)}`) } const rerenderTfoot = () => { const tfoot = output.querySelector('tfoot') tfoot.innerHTML = '' tfoot.appendChild(footerRow()) } const rerender = () => { rerenderTbody() rerenderTfoot() } // Event Dispatcher const dispatchInputEvent = () => { output.value = values output.dispatchEvent(new CustomEvent('input')) } // Event Handlers const addRow = () => { values.push(defaultValue) rerender() dispatchInputEvent() } const removeRow = removeIdx => { values = values.filter((_, i) => i !== removeIdx) rerender() dispatchInputEvent() } const changeValueAt = (i, value) => { values[i] = value rerender() dispatchInputEvent() } const output = html` ${values.map(inputRow)} ${footerRow()}

` output.value = values return output }31:[] 2e:{"title":"List Input","cells":[{"id":0,"value":"md`# List Input`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`_The reusable super-input that lets readers enter lists of things!_ 👯‍♀️👯‍♂️`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`## Basic Usage\n\nTo use it, import this notebook:\n\n~~~js\nimport { listInput } from '@harrislapiroff/list-input'\n~~~\n\nThen use it as a view:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"viewof listItems = listInput()","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`The list input produces an array value. Play around with the input above and watch the \\`listItems\\` below update as you add and remove items.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"listItems","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"md`## Customization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`\\`listInput\\` also takes a number of configuration options:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"listInput({\n min: 2,\n max: 5,\n value: ['Try', 'adding', 'an', 'item!'],\n defaultValue: 'You\\'re maxed out!',\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"md`You can even customize what kind of sub-input is used!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof numberList = listInput({\n input: v => html``,\n min: 2,\n defaultValue: 0,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"list(numberList)","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"md`A provided \\`input\\` should be a function that returns a DOM node or fragment. It should have the signature\n\n~~~js\n(value, index, values) => node\n~~~\n\nEnsure that \\`value\\` is used to render the input with the proper value set. The widget is rerendered every time it is updated, so it it crucial to render inputs with the proper value.\n\nThis also means that inputs that trigger a change event mid-input will be challenging to use. I accept suggestions on how to resolve that one.\n\nFor other config options, check out the code below in “Implementation.”\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`## See it in action!\n\nThe following notebooks use the list input (feel free to put in a suggestion if you also have a notebook using it):\n\n* [Boston-Area Rent Changes](https://observablehq.com/@harrislapiroff/boston-area-rent-changes)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`***\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"defaultInput = v => html.fragment``","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`***\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"list = arr => html`

${v}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"import { html } from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}