@ -1,17 +1,23 @@
< script >
import { onMount , getContext } from "svelte"
import { onMount } from "svelte"
import { Radiobutton } from "../Radiobutton"
import { Checkbox } from "../Checkbox"
import ClassBuilder from "../ClassBuilder.js"
import shortid from "shortid"
const cb = new ClassBuilder("list-item")
export let onClick = item => {}
let _id
let listProps = null
export let _bb
export let value = null
export let text = ""
export let secondaryText = ""
export let variant = "two-line"
export let inputElement = null
export let leadingIcon = ""
export let trailingIcon = ""
export let selected = false
@ -19,33 +25,51 @@
let role = "option"
function handleClick() {
if (!disabled) {
const selectItem = _bb.getContext("BBMD:list:selectItem")
selected = !selected
selectItem({
_id,
value,
text,
secondaryText,
selected,
disabled,
})
}
}
onMount(() => {
let context = getContext("BBMD:list:context")
_id = shortid.generate()
listProps = _bb.getContext("BBMD:list:props")
let context = _bb.getContext("BBMD:list:context")
if (context === "menu") {
role = "menuitem"
}
})
$: if (!!inputElement) {
setContext("BBMD:input:context", "list-item")
$: if (listProps && !!listProps. inputElement) {
_bb. setContext("BBMD:input:context", "list-item")
}
$: shouldSel = selected & & !listProps
$: console.log("Should Select", selected)
$: modifiers = {
selected,
selected: selected & & (!listProps || !listProps.inputElement) ,
disabled,
}
$: props = { modifiers }
$: listItemClass = cb.build({ props } )
$: useTwoLine = variant === "two-line" & & !!secondaryText
$: useTwoLine =
listProps & & listProps.variant === "two-line" & & !!secondaryText
< / script >
< li
class={ listItemClass }
role="option"
aria-selected={ selected }
tabindex="0"
on:click={ onClick } >
< li class = { listItemClass } role="option" tabindex = "0" on:click = { handleClick } >
{ #if leadingIcon }
< span class = "mdc-list-item__graphic material-icons" aria-hidden = "true" >
{ leadingIcon }
@ -58,11 +82,11 @@
{ : else }{ text }{ /if }
< / span >
{ #if inputElement }
{ #if inputElement === 'radiobutton' }
< Radiobutton checked = { selected } { disabled } / >
{ :else if inputElement === 'checkbox' }
< Checkbox checked = { selected } { disabled } / >
{ #if listProps }
{ #if listProps . inputElement === 'radiobutton' }
< Radiobutton checked = { selected } { disabled } { _bb } / >
{ :else if listProps . inputElement === 'checkbox' }
< Checkbox checked = { selected } { disabled } { _bb } / >
{ /if }
{ :else if trailingIcon }
<!-- TODO: Adapt label to accept class prop to handle this. Context is insufficient -->
Conor Mack
7 years ago