playbook_ui 7.3.0 → 7.4.0.pre.test3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c9b11071227a394af722c14bca8f59f2abc059a816353af4ffa8b5a7694a5eaf
-  data.tar.gz: b5eab2ae50132399b89d2a55f6b958148c4e6fbacbe9dbabc9f2ae3311052fc4
+  metadata.gz: f4211d32c465852e435e15c2ef8f84f09eb8c3b7a1688fe716cd8e5a7dbe3010
+  data.tar.gz: aa2b0edb1d453cfa833e456d05ba66cd3d673c03aefb489e1354f30fbf896a95
 SHA512:
-  metadata.gz: 9824c9204448f3108c5fdd315aad2572768122ec6f3d3643bb7428d98a5fda418bb6dcd9b1b1853e674e3975323894de257c381293122382022aca10a7a4e150
-  data.tar.gz: '09955236a98e1b3da1beb51c977f49c94dd99cf6fa74784d8d3d2f7dc670941c5a8a09a5e10ce9a9a889f3702fe1d30bdd1b78985d037e29edce9b466155b93b'
+  metadata.gz: b485cc3abd09ab954532ac9dd39a97c841b58be95a35b1e2ae1d6fc985d081131431f552eb50be5e9254257895041b0f278941f0a7d17810244d6742f5d34024
+  data.tar.gz: fc0c06ccb718a5b0b77ac77080836a3865f27f98ad63ed5cb4cf7e584114de508e95384307d535855aef5214cbb6e74bc9415f37049c1e3117ba193a2de2297d

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -6,6 +6,7 @@ import AsyncSelect from 'react-select/async'
 import { get } from 'lodash'
 
 import Control from './components/Control'
+import ClearIndicator from './components/ClearIndicator'
 import IndicatorsContainer from './components/IndicatorsContainer'
 import MenuList from './components/MenuList'
 import MultiValue from './components/MultiValue'
@@ -40,6 +41,7 @@ const Typeahead = (props: Props) => {
     defaultOptions: true,
     components: {
       Control,
+      ClearIndicator,
       IndicatorsContainer,
       IndicatorSeparator: null,
       MenuList,
@@ -58,7 +60,16 @@ const Typeahead = (props: Props) => {
 
   const Tag = props.async ? AsyncSelect : Select
 
-  const handleOnChange = (data, { action }) => {
+  const handleOnChange = (data, { action, option, removedValue }) => {
+    if (action === 'select-option') {
+      if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
+      const multiValueClearEvent = new CustomEvent('pb-typeahead-kit-result-option-select', { detail: option })
+      document.dispatchEvent(multiValueClearEvent)
+    }
+    if (action === 'remove-value' || action === 'pop-value') {
+      const multiValueRemoveEvent = new CustomEvent('pb-typeahead-kit-result-option-remove', { detail: removedValue })
+      document.dispatchEvent(multiValueRemoveEvent)
+    }
     if (action === 'clear') {
       const multiValueClearEvent = new CustomEvent('pb-typeahead-kit-result-clear')
       document.dispatchEvent(multiValueClearEvent)

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx

@@ -0,0 +1,19 @@
+/* @flow */
+
+import React, { useEffect } from 'react'
+import { components } from 'react-select'
+
+const ClearContainer = (props: any) => {
+  useEffect(() => {
+    document.addEventListener('pb-typeahead-kit:clear', props.clearValue)
+  }, true)
+
+  return (
+    <components.ClearIndicator
+        className="clear_indicator"
+        {...props}
+    />
+  )
+}
+
+export default ClearContainer

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -13,24 +13,17 @@ type Props = {
 }
 
 const MultiValue = (props: Props) => {
-  const {
-    data,
-    removeProps,
-    selectProps,
-  } = props
+  const { removeProps } = props
+  const { imageUrl, label } = props.data
 
-  const { imageUrl, label } = data
-
-  const handleOnMultiValueRemove = () => {
-    const multiValueRemoveEvent = new CustomEvent('pb-typeahead-kit-result-option-remove', { detail: data })
-    document.dispatchEvent(multiValueRemoveEvent)
+  const formPillProps = {
+    marginRight: 'xs',
+    name: label,
   }
 
-  const handleOnClick = () => {
-    if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(data)
-    handleOnMultiValueRemove()
-    removeProps.onClick()
-  }
+  if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
+
+  const handleOnClick = removeProps.onClick
 
   return (
     <components.MultiValueContainer

data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx

@@ -13,14 +13,9 @@ const Option = (props: any) => {
     label,
   } = props.data
 
-  const handleOptionClicked = () => {
-    const resultSelectedEvent = new CustomEvent('pb-typeahead-kit-result-option-select', { detail: props.data })
-    document.dispatchEvent(resultSelectedEvent)
-  }
-
   return (
     <components.Option {...props}>
-      <div onClick={handleOptionClicked}>
+      <div>
         <Choose>
           <When condition={imageUrl}>
             <User

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb

@@ -7,7 +7,9 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { options: options, label: "Colors", name: :foo, pills: true }) %>
+<%= pb_rails("typeahead", props: { default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
+
+<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>
@@ -22,4 +24,8 @@
   document.addEventListener("pb-typeahead-kit-result-clear", function() {
     console.log('All options cleared')
   })
+
+  document.querySelector('#clear-pills').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('pb-typeahead-kit:clear'))
+  })
 <% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md

@@ -1,8 +1,17 @@
 Typeahead kit is data-driven. The minimum default fields are `label` and `value`.
 
-`{ label: "Foo", value: "bar" }`
+This is an example of an option: `{ label: 'Windows', value: '#FFA500' }`
+
+#### Rails: Default Options
+
+You can also pass `default_options` which will populate the initial pill selections:
+
+`default_options: [{ label: 'Windows', value: '#FFA500' }]`
 
 #### Rails: Subscribing to JS Events
 `pb-typeahead-kit-result-option-select` event to perform custom work when an option is clicked.
 `pb-typeahead-kit-result-option-remove` event to perform custom work when a pill is clicked.
 `pb-typeahead-kit-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.
+
+#### Rails: Publishing JS Events
+`pb-typeahead-kit:clear` event to clear all options.

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -7,6 +7,7 @@ module Playbook
 
       prop :async, type: Playbook::Props::Boolean,
                     default: false
+      prop :default_options, type: Playbook::Props::HashArray, default: []
       prop :label
       prop :load_options
       prop :name
@@ -35,6 +36,7 @@ module Playbook
 
       def typeahead_with_pills_options
         base_options = {
+          defaultValue: default_options,
           isMulti: true,
           label: label,
           options: options,

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "7.3.0"
+  VERSION = "7.4.0.pre.test3"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.3.0
+  version: 7.4.0.pre.test3
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-10-23 00:00:00.000000000 Z
+date: 2020-10-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1770,6 +1770,7 @@ files:
 - app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
+- app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
 - app/pb_kits/playbook/pb_typeahead/components/Control.jsx
 - app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
 - app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
@@ -1889,7 +1890,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -1900,13 +1901,13 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubyforge_project: 
+rubyforge_project:
 rubygems_version: 2.7.3
-signing_key: 
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []