add ability to select groups from dropdown

4 years ago · ce1fe5e600
2 changed files with 535 additions and 0 deletions
--- a/packages/bbui/src/Form/Core/PickerDropdown.svelte
+++ b/packages/bbui/src/Form/Core/PickerDropdown.svelte
@ -0,0 +1,406 @@
 <script>
  import "@spectrum-css/inputgroup/dist/index-vars.css"
  import "@spectrum-css/popover/dist/index-vars.css"
  import "@spectrum-css/menu/dist/index-vars.css"
  import { fly } from "svelte/transition"
  import { createEventDispatcher } from "svelte"
  import clickOutside from "../../Actions/click_outside"
  import Search from "./Search.svelte"
  import Icon from "../../Icon/Icon.svelte"
  import StatusLight from "../../StatusLight/StatusLight.svelte"
  import Detail from "../../Typography/Detail.svelte"
  export let primaryLabel = ""
  export let id = null
  export let placeholder = "Choose an option or type"
  export let disabled = false
  export let readonly = false
  export let updateOnChange = true
  export let error = null
  export let secondaryOptions = []
  export let primaryOptions = []
  export let secondaryFieldText = ""
  export let secondaryFieldIcon = ""
  export let secondaryFieldColour = ""
  export let getPrimaryOptionLabel = option => option
  export let getPrimaryOptionValue = option => option
  export let getPrimaryOptionColour = () => null
  export let getPrimaryOptionIcon = () => null
  export let getSecondaryOptionLabel = option => option
  export let getSecondaryOptionValue = option => option
  export let getSecondaryOptionColour = () => null
  export let onSelectOption = () => {}
  export let autoWidth = false
  export let autocomplete = false
  export let isOptionSelected = () => false
  export let isPlaceholder = false
  export let placeholderOption = null
  const dispatch = createEventDispatcher()
  let primaryOpen = false
  let secondaryOpen = false
  let focus = false
  let searchTerm = null
  $: groupTitles = Object.keys(primaryOptions)
  $: filteredOptions = getFilteredOptions(
    primaryOptions,
    searchTerm,
    getPrimaryOptionLabel
  )
  let iconData
  /*
  $: iconData = primaryOptions?.find(x => {
    return x.name === primaryFieldText
  })
  */
  const updateValue = newValue => {
    if (readonly) {
      return
    }
    dispatch("change", newValue)
  }
  const onClickPrimary = () => {
    dispatch("click")
    if (readonly) {
      return
    }
    primaryOpen = true
  }
  const onClickSecondary = () => {
    dispatch("click")
    if (readonly) {
      return
    }
    secondaryOpen = true
  }
  const onPickPrimary = newValue => {
    dispatch("pickprimary", newValue)
    primaryOpen = false
  }
  const onPickSecondary = newValue => {
    console.log(newValue)
    dispatch("picksecondary", newValue)
    secondaryOpen = false
  }
  const onFocus = () => {
    if (readonly) {
      return
    }
    focus = true
  }
  const onBlur = event => {
    if (readonly) {
      return
    }
    focus = false
    updateValue(event.target.value)
  }
  const onInput = event => {
    if (readonly || !updateOnChange) {
      return
    }
    updateValue(event.target.value)
  }
  const updateValueOnEnter = event => {
    if (readonly) {
      return
    }
    if (event.key === "Enter") {
      updateValue(event.target.value)
    }
  }
  const getFilteredOptions = (options, term, getLabel) => {
    if (autocomplete && term) {
      const lowerCaseTerm = term.toLowerCase()
      return options.filter(option => {
        return `${getLabel(option)}`.toLowerCase().includes(lowerCaseTerm)
      })
    }
    return options
  }
 </script>
 <div
  class="spectrum-InputGroup"
  class:is-invalid={!!error}
  class:is-disabled={disabled}
 >
  <div
    class="spectrum-Textfield spectrum-InputGroup-textfield"
    class:is-invalid={!!error}
    class:is-disabled={disabled}
    class:is-focused={focus}
    style="width: 70%"
  >
    {#if iconData}
      <svg
        width="16px"
        height="16px"
        class="spectrum-Icon iconPadding"
        style="color: {iconData?.color}"
        focusable="false"
      >
        <use xlink:href="#spectrum-icon-18-{iconData?.icon}" />
      </svg>
    {/if}
    <input
      {id}
      on:click={() => (primaryOpen = true)}
      on:blur
      on:focus
      on:input
      on:keyup
      on:blur={onBlur}
      on:input={onInput}
      on:keyup={updateValueOnEnter}
      value={primaryLabel || ""}
      placeholder={placeholder || ""}
      {disabled}
      {readonly}
      class="spectrum-Textfield-input spectrum-InputGroup-input"
      class:labelPadding={iconData}
    />
  </div>
  {#if primaryOpen}
    <div
      use:clickOutside={() => (primaryOpen = false)}
      transition:fly|local={{ y: -20, duration: 200 }}
      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
      class:auto-width={autoWidth}
      style="width: 70%"
    >
      <ul class="spectrum-Menu" role="listbox">
        {#if placeholderOption}
          <li
            class="spectrum-Menu-item placeholder"
            class:is-selected={isPlaceholder}
            role="option"
            aria-selected="true"
            tabindex="0"
            on:click={() => onSelectOption(null)}
          >
            <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
            <svg
              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
              focusable="false"
              aria-hidden="true"
            >
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </li>
        {/if}
        {#each groupTitles as title}
          <div class="spectrum-Menu-item">
            <Detail>{title}</Detail>
          </div>
          {#if primaryOptions}
            {#each primaryOptions[title].data as option, idx}
              <li
                class="spectrum-Menu-item"
                class:is-selected={isOptionSelected(
                  getPrimaryOptionValue(option, idx)
                )}
                role="option"
                aria-selected="true"
                tabindex="0"
                on:click={() =>
                  onPickPrimary({
                    value: primaryOptions[title].getValue(option),
                    label: primaryOptions[title].getLabel(option),
                  })}
              >
                {#if primaryOptions[title].getIcon(option)}
                  <div
                    style="background: {primaryOptions[title].getColour(
                      option
                    )};"
                    class="circle"
                  >
                    <div>
                      <Icon
                        size="S"
                        name={primaryOptions[title].getIcon(option)}
                      />
                    </div>
                  </div>
                {:else if getPrimaryOptionColour(option, idx)}
                  <span class="option-left">
                    <StatusLight color={getPrimaryOptionColour(option, idx)} />
                  </span>
                {/if}
                <span class="spectrum-Menu-itemLabel">
                  <span
                    class:spacing-group={primaryOptions[title].getIcon(option)}
                  >
                    {primaryOptions[title].getLabel(option)}
                    <span />
                  </span>
                  <svg
                    class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                  </svg>
                  {#if getPrimaryOptionIcon(option, idx) && getPrimaryOptionColour(option, idx)}
                    <span class="option-right">
                      <StatusLight
                        color={getPrimaryOptionColour(option, idx)}
                      />
                    </span>
                  {/if}
                </span>
              </li>
            {/each}
          {/if}
        {/each}
      </ul>
    </div>
  {/if}
  <div style="width: 30%">
    <button
      {id}
      class="spectrum-Picker spectrum-Picker--sizeM override-borders"
      {disabled}
      class:is-open={secondaryOpen}
      aria-haspopup="listbox"
      on:mousedown={onClickSecondary}
    >
      {#if secondaryFieldIcon}
        <span class="option-left">
          <Icon name={secondaryFieldIcon} />
        </span>
      {:else if secondaryFieldColour}
        <span class="option-left">
          <StatusLight color={secondaryFieldColour} />
        </span>
      {/if}
      <span class:auto-width={autoWidth} class="spectrum-Picker-label">
        {secondaryFieldText}
      </span>
      <svg
        class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
        focusable="false"
        aria-hidden="true"
      >
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </button>
    {#if secondaryOpen}
      <div
        use:clickOutside={() => (secondaryOpen = false)}
        transition:fly|local={{ y: -20, duration: 200 }}
        class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
        style="width: 30%"
      >
        <ul class="spectrum-Menu" role="listbox">
          {#each secondaryOptions as option, idx}
            <li
              class="spectrum-Menu-item"
              class:is-selected={isOptionSelected(
                getSecondaryOptionValue(option, idx)
              )}
              role="option"
              aria-selected="true"
              tabindex="0"
              on:click={() =>
                onPickSecondary(getSecondaryOptionValue(option, idx))}
            >
              {#if getSecondaryOptionColour(option, idx)}
                <span class="option-left">
                  <StatusLight color={getSecondaryOptionColour(option, idx)} />
                </span>
              {/if}
              <span class="spectrum-Menu-itemLabel">
                {getSecondaryOptionLabel(option, idx)}
              </span>
              <svg
                class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
                focusable="false"
                aria-hidden="true"
              >
                <use xlink:href="#spectrum-css-icon-Checkmark100" />
              </svg>
            </li>
          {/each}
        </ul>
      </div>
    {/if}
  </div>
 </div>
 <style>
  .spacing-group {
    margin-left: var(--spacing-m);
  }
  .spectrum-InputGroup {
    min-width: 0;
    width: 100%;
  }
  .override-borders {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .override-borders-left {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: 0px;
  }
  .spectrum-Popover {
    max-height: 240px;
    z-index: 999;
    top: 100%;
  }
  .option-left {
    padding-right: 8px;
  }
  .option-right {
    padding-left: 8px;
  }
  .circle {
    border-radius: 50%;
    height: 28px;
    color: white;
    font-weight: bold;
    line-height: 48px;
    font-size: 1.2em;
    width: 28px;
    position: relative;
  }
  .circle > div {
    position: absolute;
    text-decoration: none;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  .iconPadding {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: silver;
    margin-right: 10px;
  }
  .labelPadding {
    padding-left: calc(1em + 10px + 8px);
  }
 </style>
--- a/packages/bbui/src/Form/PickerDropdown.svelte
+++ b/packages/bbui/src/Form/PickerDropdown.svelte
@ -0,0 +1,129 @@
 <script>
  import Field from "./Field.svelte"
  import PickerDropdown from "./Core/PickerDropdown.svelte"
  import { createEventDispatcher } from "svelte"
  export let primaryValue = null
  export let secondaryValue = null
  export let inputType = "text"
  export let label = null
  export let labelPosition = "above"
  export let primaryPlaceholder = "test"
  export let secondaryPlaceholder = null
  export let autocomplete
  export let placeholder = null
  export let disabled = false
  export let readonly = false
  export let error = null
  export let updateOnChange = true
  export let getSecondaryOptionLabel = option =>
    extractProperty(option, "label")
  export let getSecondaryOptionValue = option =>
    extractProperty(option, "value")
  export let getSecondaryOptionColour = () => {}
  export let getSecondaryOptionIcon = () => {}
  export let quiet = false
  export let dataCy
  export let autofocus
  export let primaryOptions = []
  export let secondaryOptions = []
  let primaryLabel
  let secondaryLabel
  const dispatch = createEventDispatcher()
  $: secondaryFieldText = getSecondaryFieldText(
    secondaryValue,
    secondaryOptions,
    secondaryPlaceholder
  )
  $: secondaryFieldIcon = getSecondaryFieldAttribute(
    getSecondaryOptionIcon,
    secondaryValue,
    secondaryOptions
  )
  $: secondaryFieldColour = getSecondaryFieldAttribute(
    getSecondaryOptionColour,
    secondaryValue,
    secondaryOptions
  )
  const getSecondaryFieldAttribute = (getAttribute, value, options) => {
    // Wait for options to load if there is a value but no options
    if (!options?.length) {
      return ""
    }
    const index = options.findIndex(
      (option, idx) => getSecondaryOptionValue(option, idx) === value
    )
    return index !== -1 ? getAttribute(options[index], index) : null
  }
  const getSecondaryFieldText = (value, options, placeholder) => {
    // Always use placeholder if no value
    if (value == null || value === "") {
      return placeholder || "Choose an option"
    }
    return getSecondaryFieldAttribute(getSecondaryOptionLabel, value, options)
  }
  const onPickPrimary = e => {
    console.log("hello")
    primaryLabel = e.detail.label
    primaryValue = e.detail.value
    dispatch("pickprimary", e.detail.value)
  }
  const onPickSecondary = e => {
    console.log("hello222")
    secondaryValue = e.detail
    dispatch("picksecondary", e.detail)
  }
  const extractProperty = (value, property) => {
    if (value && typeof value === "object") {
      return value[property]
    }
    return value
  }
 </script>
 <Field {label} {labelPosition} {error}>
  <PickerDropdown
    {autocomplete}
    {dataCy}
    {updateOnChange}
    {error}
    {disabled}
    {readonly}
    {placeholder}
    {inputType}
    {quiet}
    {autofocus}
    {primaryOptions}
    {secondaryOptions}
    {getSecondaryOptionLabel}
    {getSecondaryOptionValue}
    {getSecondaryOptionIcon}
    {getSecondaryOptionColour}
    {secondaryFieldText}
    {secondaryFieldIcon}
    {secondaryFieldColour}
    {primaryValue}
    {secondaryValue}
    {primaryLabel}
    {secondaryLabel}
    on:pickprimary={onPickPrimary}
    on:picksecondary={onPickSecondary}
    on:click
    on:input
    on:blur
    on:focus
    on:keyup
  />
 </Field>