From 0676151c6d6f1372e9189e263b4db724e5945b26 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Thu, 5 Mar 2020 11:56:23 +0000 Subject: [PATCH 1/2] Checkboxgroup with builder specific logic --- .../src/Checkbox/Checkbox.svelte | 42 +++++++++++++++---- .../src/Checkbox/CheckboxGroup.svelte | 36 +++++++--------- .../src/Radiobutton/Radiobutton.svelte | 1 - .../src/Radiobutton/RadiobuttonGroup.svelte | 2 +- .../src/Test/TestApp.svelte | 2 + .../src/Test/props.js | 26 ++++++++---- 6 files changed, 71 insertions(+), 38 deletions(-) diff --git a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte index ceced6af9c..eb7939a784 100644 --- a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte +++ b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte @@ -4,33 +4,42 @@ import { fieldStore } from "../Common/FormfieldStore.js" import ClassBuilder from "../ClassBuilder.js" import { MDCCheckbox } from "@material/checkbox" + import { generate } from "shortid" export let onClick = item => {} export let _bb export let id = "" + export let value = null export let label = "" export let disabled = false export let alignEnd = false export let indeterminate = false export let checked = false + let _id let instance = null let checkbox = null + let selectedItems + let context = _bb.getContext("BBMD:input:context") onMount(() => { + _id = generate() + if (!!checkbox) { instance = new MDCCheckbox(checkbox) instance.indeterminate = indeterminate if (context !== "list-item") { - //TODO: Fix this connected to Formfield context issue let fieldStore = _bb.getContext("BBMD:field-element") - if(fieldStore) - fieldStore.setInput(instance) + if (fieldStore) fieldStore.setInput(instance) } } + + if (context === "checkboxgroup") { + selectedItems = _bb.getContext("BBMD:checkbox:selectedItemsStore") + } }) let extras = null @@ -52,6 +61,25 @@ _bb.setStateFromBinding(_bb.props.checked, val) } } + + function handleOnClick() { + let item = { _id, label, value } + if (context === "checkboxgroup") { + let idx = selectedItems.getItemIdx($selectedItems, _id) + if (idx > -1) { + selectedItems.removeItem(_id) + } else { + selectedItems.addItem(item) + } + } else { + onClick(item) + } + } + + $: isChecked = + context === "checkboxgroup" + ? $selectedItems && $selectedItems.findIndex(i => i._id === _id) > -1 + : checked @@ -64,8 +92,8 @@ class={cb.elem`native-control`} {id} {disabled} - {checked} - on:click={onClick} + {isChecked} + on:click={handleOnClick} on:change={changed} />
@@ -86,9 +114,9 @@ class={cb.elem`native-control`} {id} {disabled} - {checked} + {isChecked} on:change={changed} - on:click={onClick} /> + on:click={handleOnClick} />
+ import { onMount } from "svelte" import Checkbox from "./Checkbox.svelte" import Label from "../Common/Label.svelte" + import createItemsStore from "../Common/ItemStore.js" + let selectedItemsStore + let checkItems + + export let _bb export let label = "" export let orientation = "row" export let fullwidth = false export let onChange = selectedItems => {} - export let items = [] - export let disabled = false export let alignEnd = false let selectedItems = [] - function handleonChange(item) { - if (!!item.checked) { - item.checked = !item.checked - } else { - item.checked = true - } - onChange(items.filter(i => i.checked)) - } + onMount(() => { + _bb.setContext("BBMD:input:context", "checkboxgroup") + selectedItemsStore = createItemsStore(() => onChange($selectedItemsStore)) + _bb.setContext("BBMD:checkbox:selectedItemsStore", selectedItemsStore) + }) + + $: checkItems && _bb.attachChildren(checkItems)
@@ -28,18 +31,7 @@
- {#each items as item, i} -
- handleonChange(item)} /> -
- {/each} +
diff --git a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte index 9916b0f0f1..0ed0902322 100644 --- a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte +++ b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte @@ -45,7 +45,6 @@ if (context === "radiobuttongroup") { selectedItems.addSingleItem(item) } else { - debugger onClick(item) } } diff --git a/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte b/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte index ca9ca66618..b72c043e6a 100644 --- a/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte +++ b/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte @@ -29,7 +29,7 @@ // item.checked = true // selected = item // items = items - // onChange(selected) + // onChange(selected)w // } $: alignRight = orientation === "column" && alignEnd diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte index 03976d2ff0..ebb478d858 100644 --- a/packages/materialdesign-components/src/Test/TestApp.svelte +++ b/packages/materialdesign-components/src/Test/TestApp.svelte @@ -40,6 +40,8 @@ Select, Radiobutton, Radiobuttongroup, + Checkbox, + Checkboxgroup, ], }, } diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js index aa55c680fb..5d01e1e43d 100644 --- a/packages/materialdesign-components/src/Test/props.js +++ b/packages/materialdesign-components/src/Test/props.js @@ -82,14 +82,26 @@ export const props = { }, Checkboxgroup: { _component: "@budibase/materialdesign-components/Checkboxgroup", - _children: [], label: "Whats your favourite?", - items: [ - { label: "Currys", indeterminate: true }, - { label: "Chips", checked: true }, - { label: "Pasties" }, - ], onChange: selectedItems => console.log(selectedItems), + _children: [ + { + _component: "@budibase/materialdesign-components/Checkbox", + _children: [], + label: "Currys", + indeterminate: true, + }, + { + _component: "@budibase/materialdesign-components/Checkbox", + _children: [], + label: "Chips", + }, + { + _component: "@budibase/materialdesign-components/Checkbox", + _children: [], + label: "Pasties", + }, + ], }, Radiobutton: { _component: "@budibase/materialdesign-components/Radiobutton", @@ -188,5 +200,5 @@ export const props = { value: "2", }, ], - }, + } } From d6425b09f24b4a6a419d1b8f5c9560456c7a4ce0 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Thu, 5 Mar 2020 14:59:08 +0000 Subject: [PATCH 2/2] Tidyup and bugfixes --- .../src/Checkbox/Checkbox.svelte | 14 +++++++-- .../src/Checkbox/CheckboxGroup.svelte | 2 +- .../src/Common/Formfield.svelte | 9 +++--- .../src/Radiobutton/Radiobutton.svelte | 30 +++++++++++++------ .../src/Radiobutton/RadiobuttonGroup.svelte | 11 ++----- .../src/Test/TestApp.svelte | 8 ----- .../src/Test/props.js | 5 ++++ 7 files changed, 44 insertions(+), 35 deletions(-) diff --git a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte index eb7939a784..ba9cfcf40c 100644 --- a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte +++ b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte @@ -22,6 +22,7 @@ let instance = null let checkbox = null let selectedItems + let checkProps let context = _bb.getContext("BBMD:input:context") @@ -39,6 +40,7 @@ if (context === "checkboxgroup") { selectedItems = _bb.getContext("BBMD:checkbox:selectedItemsStore") + checkProps = _bb.getContext("BBMD:checkbox:props") } }) @@ -80,18 +82,24 @@ context === "checkboxgroup" ? $selectedItems && $selectedItems.findIndex(i => i._id === _id) > -1 : checked + + $: isAlignedEnd = + context === "checkboxgroup" && !!checkProps ? checkProps.alignEnd : alignEnd + + $: isDisabled = + context === "checkboxgroup" && !!checkProps ? checkProps.disabled : disabled {#if context !== 'list-item'} - +
@@ -113,7 +121,7 @@ type="checkbox" class={cb.elem`native-control`} {id} - {disabled} + disabled={isDisabled} {isChecked} on:change={changed} on:click={handleOnClick} /> diff --git a/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte b/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte index fe9359771d..3bcaf3cbd2 100644 --- a/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte +++ b/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte @@ -15,12 +15,12 @@ export let disabled = false export let alignEnd = false - let selectedItems = [] onMount(() => { _bb.setContext("BBMD:input:context", "checkboxgroup") selectedItemsStore = createItemsStore(() => onChange($selectedItemsStore)) _bb.setContext("BBMD:checkbox:selectedItemsStore", selectedItemsStore) + _bb.setContext("BBMD:checkbox:props", { alignEnd, disabled }) }) $: checkItems && _bb.attachChildren(checkItems) diff --git a/packages/materialdesign-components/src/Common/Formfield.svelte b/packages/materialdesign-components/src/Common/Formfield.svelte index d019ac39a9..6ca9db9aba 100644 --- a/packages/materialdesign-components/src/Common/Formfield.svelte +++ b/packages/materialdesign-components/src/Common/Formfield.svelte @@ -17,15 +17,14 @@ let formField = null - let modifiers = { alignEnd } - let props = { modifiers } + $: modifiers = { alignEnd } + $: props = { modifiers } - let blockClasses = cb.build({ props }) + $: blockClasses = cb.build({ props }) onMount(() => { if (!!formField) fieldStore.set(new MDCFormField(formField)) - //TODO: Fix this, _bb is coming back undefined - // _bb.setContext("BBMD:field-element", fieldStore) + _bb.setContext("BBMD:field-element", fieldStore) }) onDestroy(unsubscribe) diff --git a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte index 0ed0902322..65f54d95e7 100644 --- a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte +++ b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte @@ -20,6 +20,7 @@ let instance = null let radiobtn = null let selectedItems + let radioProps let context = _bb.getContext("BBMD:input:context") @@ -35,8 +36,8 @@ } if (context === "radiobuttongroup") { selectedItems = _bb.getContext("BBMD:radiobutton:selectedItemsStore") - let props = _bb.getContext("BBMD:radiobutton:props") - name = props.name + radioProps = _bb.getContext("BBMD:radiobutton:props") + name = radioProps.name } }) @@ -56,19 +57,30 @@ } const cb = new ClassBuilder("radio") - let modifiers = { disabled } - let props = { modifiers, extras } - - const blockClass = cb.build({ props }) $: isChecked = context === "radiobuttongroup" ? $selectedItems && $selectedItems.findIndex(i => i._id === _id) > -1 : checked + + $: isAlignedEnd = + context === "radiobuttongroup" && !!radioProps + ? radioProps.alignEnd + : alignEnd + + $: isDisabled = + context === "radiobuttongroup" && !!radioProps + ? radioProps.disabled + : disabled + + $: modifiers = { disabled: isDisabled } + $: props = { modifiers, extras } + + $: blockClass = cb.build({ props }) {#if context !== 'list-item'} - +
@@ -93,7 +105,7 @@ type="radio" {name} {checked} - {disabled} + disabled={isDisabled} on:click={onClick} />
diff --git a/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte b/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte index b72c043e6a..ffe97ad6d8 100644 --- a/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte +++ b/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte @@ -12,6 +12,7 @@ export let orientation = "row" export let fullwidth = false export let alignEnd = false + export let disabled = false let selectedItemsStore let selected = null @@ -20,18 +21,10 @@ onMount(() => { _bb.setContext("BBMD:input:context", "radiobuttongroup") selectedItemsStore = createItemStore(() => onChange($selectedItemsStore)) - _bb.setContext("BBMD:radiobutton:props", { name }) + _bb.setContext("BBMD:radiobutton:props", { name, disabled, alignEnd }) _bb.setContext("BBMD:radiobutton:selectedItemsStore", selectedItemsStore) }) - // function handleOnClick(item) { - // if (!!selected) selected.checked = false - // item.checked = true - // selected = item - // items = items - // onChange(selected)w - // } - $: alignRight = orientation === "column" && alignEnd $: radioItems && _bb.attachChildren(radioItems) diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte index ebb478d858..baf3db4c81 100644 --- a/packages/materialdesign-components/src/Test/TestApp.svelte +++ b/packages/materialdesign-components/src/Test/TestApp.svelte @@ -28,20 +28,12 @@ props: { _component: "testcomponents/rootComponent", _children: [ - H1, - Overline, Button, BodyBoundToStore, Textfield, - Icon, - Datatable, - CustomersIndexTable, - List, Select, Radiobutton, Radiobuttongroup, - Checkbox, - Checkboxgroup, ], }, } diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js index 5d01e1e43d..62d28cdef4 100644 --- a/packages/materialdesign-components/src/Test/props.js +++ b/packages/materialdesign-components/src/Test/props.js @@ -77,12 +77,15 @@ export const props = { _component: "@budibase/materialdesign-components/Checkbox", _children: [], id: "test-check", + alignEnd: true, label: "Check Yo Self", onClick: () => alert`Before ya reck yo'self`, }, Checkboxgroup: { _component: "@budibase/materialdesign-components/Checkboxgroup", label: "Whats your favourite?", + disabled: true, + alignEnd: true, onChange: selectedItems => console.log(selectedItems), _children: [ { @@ -114,6 +117,8 @@ export const props = { _component: "@budibase/materialdesign-components/Radiobuttongroup", label: "Preferred method of contact: ", orientation: "column", + disabled: true, + alignEnd: true, onChange: selected => console.log("Radiobutton Group", selected), _children: [ {