SwatchList

used on pdp swatch item renderProps will return a button, or toggle, or whatever

TODO

• clean out duplicated props, reuse

Related

• ColorSwatchList
• SwatchList
• ToggleList

Overview

type Identifier = string | number | Symbol
interface SwatchItem {
  // commonstate
  isSelected: boolean
  isDisabled?: boolean
  // displayed in ui
  label: string
  // used for non-ui
  value: string
  // for identifying
  identifier: Identifier
  // required for radiogroups
  // name?: string
  // hovering, clicking, focusing
  // isActive | isFocused
  // 1. either you can set the onClick for each individual item
  // 2. or pass in a click handler for handling all items
  //    and it will update the item
}
type ListOfSwatches = Array<SwatchItem>
interface SwatchListRenderProp {
  (props: SwatchItem): ReactNode
}
interface OnSwatchChange {
  (props: SwatchItem): void
}
interface SwatchListProps {
  list: ListOfSwatches
  renderList: SwatchListRenderProp
  renderItem: SwatchListRenderProp
  // if we have a list of things, changing an item in the list is onChange
  onChange: OnSwatchChange
  // list level
  // isDisabled: boolean
}
class SwatchItemState {
  @action
  setIsSelected(isSelected: boolean) {
    this.isSelected = isSelected
  }
}
const swatchItemState = new SwatchItemState()
const swatchItemState = commonState()
const list: ListOfSwatches = [
  {
    isSelected: true,
    label: 'moose',
    value: 'canada',
  },
  {
    isSelected: false,
    label: 'eh',
    value: 1,
  },
]
function unselectItem(item: SwatchItem): void {
  selectItem(item, false)
}
function unselectList(listOf: ListOfSwatches = list): void {
  list.forEach(unselectItem)
}
function setIsSelected(item: SwatchItem, isSelected: boolean): void {
  if (isFunction(item.setIsSelected)) {
    item.setIsSelected(isSelected)
  }
  else {
    item.isSelected = isSelected
  }
}
const props: SwatchListProps = {
  list,
  // @todo check selectdropdown if it's item,event or reverse
  onChange(item: SwatchItem) {
    unselectList(list)
    setIsSelected(item, true)
  },
}