2d:null 2e:["$","title",null,{"children":"Preact Form Components | Brendan Ratter | Observable"}] 33:T473,md` ## Filterable Multi-Select Control /First step along the road to an Excel/Tableau-style multi-select that facilitates complex filtering. The main \`MultiSelectControl\` component with two props: an immutable \`OrderedMap\` of items and an \`onChange\` handler that recieves another \`OrderedMap\`. The input and output ordered maps have the same keys, with the value of the output indicating which items are selected. The Map's keys should be strings and match the \`value\` property on the item. The items should extend the type: ~~~ts interface Item { /** The unique id of the item, will be used as the checkbox's value. */ value: string; /** Friendly name of the item, used as the label and live filtering. */ label: string; /** Whether the item will be checked, filtering on true produces the result. */ checked: boolean; } ~~~ Example below, with both the input data, and a label's only filtered version of the output data are shown first with the control underneath. Note that we are using the \`mutable\` method to extract the value from this control due to the live text filtering causing over-rendering. `34:T4b7,MultiSelectControl = { const isAllChecked = (items) => items.every(item => item.checked); const setAllChecked = (items, checked) => items.map(item => ({ ...item, checked })); return ({ items, onChange }) => { const [filterText, setFilterText] = useState(''); const selectAll = isAllChecked(items); const onItemChange = (item) => { onChange(items.set(item.value, item)); }; const onSelectAll = (item) => { onChange(setAllChecked(items, item.checked)); }; const onFilterText = (text) => { setFilterText(text); }; const displayItems = items .filter(item => item.label.toLowerCase().includes(filterText.toLowerCase().trim())) .map((item) => h`<${MultiSelectItem} item=${item} onChange=${onItemChange} />`); return h`

<${TextFilter} onFilterText=${onFilterText} text=${filterText} />

<${MultiSelectItem} item=${{ value: 'all', label: "Select All", checked: selectAll }} onChange=${onSelectAll} />

${[...displayItems.values()]}

`; }; }35:[] 31:{"id":"3bb617552d6ab799","slug":"preact-form-components","title":"Preact Form Components","thumbnail":"ceae27b100170a0899ca026b6214344d75110e6142b1a0d30583c922f650f243","access_level":"public","create_time":"$D2020-12-04T03:32:33.884Z","update_time":"$D2020-12-04T07:18:46.557Z","view_time":null,"first_public_time":"$D2020-12-04T23:48:35.759Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ac1efc54e02edbcb","login":"bratter","name":"Brendan Ratter","avatar_url":"https://avatars-next.observableusercontent.com/72254c56b9894f2113524282297d982abcaaa6b50b1fb4d9e19658e6572e58d6","tier":"starter_2024"},"version":122,"publish_version":122,"role":null,"authored":false,"authors":[{"type":"individual","id":"832b3a3dcd4c23fe","login":"bratter","name":"Brendan Ratter","avatar_url":"https://avatars-next.observableusercontent.com/72254c56b9894f2113524282297d982abcaaa6b50b1fb4d9e19658e6572e58d6","tier":null}],"members":[{"type":"individual","id":"832b3a3dcd4c23fe","login":"bratter","name":"Brendan Ratter","avatar_url":"https://avatars-next.observableusercontent.com/72254c56b9894f2113524282297d982abcaaa6b50b1fb4d9e19658e6572e58d6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Preact Form Components","cells":[{"id":0,"value":"md`\n# Preact Form Components\n\nComponents for forms built as Preact Components. Done in Observable either for testing/playing around or for implementing complex behavior.\n\nWhen passing around complex data structures, it is easier with [immutable.js](https://immutable-js.github.io/immutable-js/) data structures.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"multiSelectInput = immutable.OrderedMap([\n ['a', { value: 'a', label: 'My First item', checked: true }],\n ['b', { value: 'b', label: 'This is another item', checked: true }],\n ['c', { value: 'c', label: 'Filter me', checked: true }],\n]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"mutable multiSelectOutput = multiSelectInput","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"[...multiSelectOutput\n .filter(item => item.checked)\n .map(item => item.label)\n .values()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"viewof output = render((updateView) => h`

<${MultiSelectRoot} />

`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"MultiSelectRoot = () => {\n const [items, setItems] = useState(multiSelectInput);\n const onChange = (newItems) => setItems(newItems);\n \n useEffect(() => {\n mutable multiSelectOutput = items;\n }, [items]);\n \n return h`\n <${MultiSelectControl} items=${items} onChange=${onChange} />\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"MultiSelectItem = ({ item, onChange, name = 'filterItems' }) => {\n const onChangeHandler = (e) => {\n onChange({ ...item, checked: e.target.checked });\n };\n \n return h`\n

\n \n \n ${item.label} \n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"TextFilter = ({ text, onFilterText }) => {\n const onKeyUp = (e) => {\n if (e.code === 'Escape') onFilterText('');\n };\n const onInput = (e) => {\n onFilterText(e.target.value);\n };\n \n return h`\n \n \n Live Text Filter\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"multiSelectStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`\n## Base Control Form Styles\n\nTo be applied to forms in Observable notebooks to make the text and controls work better. Use once per form. All changes are scoped to the \\`controlForm\\` class to make isolation easier.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"controlFormStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`\n## Appendix: Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {h, render, useState, useEffect} from '@bratter/observable-preact'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"immutable = import('https://unpkg.com/immutable@4.0.0-rc.12/dist/immutable.es.js?module');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"