playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0f60bb863c6a7be595fe8ffcaa866a7796a0bb896732cf7ba5990d40444e6405
-  data.tar.gz: a3e06332bf074ce75e69c35184fd624b26ee9bfd02efcfad057dbafbcac3c608
+  metadata.gz: 2df0f0270c3034cc3c34d508319933af0f3bd1961b9ec81b08bf52411381097c
+  data.tar.gz: 4f8fb1eea4a45848114ae267ba2f102359af6f03006543a82798e70007e18c50
 SHA512:
-  metadata.gz: c30ebfe71f1649440d65fda7871d6c6b4d11a0ced08299f38b5de90bd9f0c3108e3179e54fcbe3a064ef0b0411a11eb76382fcb9e464b2cc5c88e7c57224b33d
-  data.tar.gz: dda14920f8aa81dc398a665fee7b51d4bbedf537669f297fe76b3f04df0b813b47229cff6e809571bf62bbaa00909e9956b6e77d1895e338a956b4d3bf6d947d
+  metadata.gz: a392fbed9531d8af1023d645e5b1e5d6c74eff0baaade11e615d0381cb43af31584109c5d9d997daa816ae990786957f2620a3e016bc4335a98c727c5e11e7c7
+  data.tar.gz: 3f7b89e018d6535577e9c460947c8278f2a3cc16e34ae5cb99ed6965b24fbeb3026e8db0bc98a80fa86521dfac57bebe735805bcea2b7bad6d5ea77fdd1119e4

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -36,10 +36,9 @@
       vertical-align: top;
       width: 0.6em;
       top: 10px;
-      transform: rotate(135deg);
       font-size: 0.5em;
 
-      transform: rotate(-45deg);
+      transform: rotate(45deg);
       top: 12px;
     }
 

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
-import { findItemById, checkIt, unCheckIt } from "./helper_functions";
+import { findItemById, checkIt, unCheckIt, getParentAndAncestorsIds } from "./helper_functions";
 import MultiSelectHelper from "./_multi_select_helper";
 
 type MultiLevelSelectProps = {
@@ -42,17 +42,31 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const updatedData = formattedData.map((item: any) => {
       if (item.id === currentNode._id) {
         if (currentNode.checked) {
-          checkIt(item, selectedItems, setSelectedItems);
+          checkIt(item, selectedItems, setSelectedItems, false);
         } else {
-          unCheckIt(item, selectedItems, setSelectedItems);
+          unCheckIt(item, selectedItems, setSelectedItems, false);
         }
       } else if (item.children) {
         const foundItem = findItemById(item.children, currentNode._id);
         if (foundItem) {
           if (currentNode.checked) {
-            checkIt(foundItem, selectedItems, setSelectedItems);
+            checkIt(foundItem, selectedItems, setSelectedItems, false);
+            if (currentNode._parent) {
+              const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
+              parents.forEach((item:string) => {
+               const ancestor = findItemById(formattedData,item)
+               ancestor.expanded = true
+              });
+             }
           } else {
-            unCheckIt(foundItem, selectedItems, setSelectedItems);
+            unCheckIt(foundItem, selectedItems, setSelectedItems, false);
+            if (currentNode._parent) {
+             const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
+             parents.forEach((item:string) => {
+              const ancestor = findItemById(formattedData,item)
+              ancestor.expanded = true
+             });
+            }
           }
         }
       }
@@ -92,17 +106,18 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         treeData={formattedData}
         onChange={(
           // @ts-ignore
-          selectedNodes: { [key: string]: any }[], 
+          selectedNodes: { [key: string]: any }[],
           currentNode: { [key: string]: any }[]
         ) => {
           setCheckedData(currentNode);
           onSelect(currentNode);
+
         }}
         id={id}
         {...props}
       />
     );
-  }, [formattedData]);
+  }, [formattedData])
 
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>

data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts

@@ -19,19 +19,20 @@ export const findItemById = (
 export const checkIt = (
   foundItem: { [key: string]: any },
   selectedItems: any[],
-  setSelectedItems: Function
+  setSelectedItems: Function,
+  expand: boolean
 ) => {
   if (!foundItem) {
     return;
   }
 
   foundItem.checked = true;
-  foundItem.expanded = true;
+  foundItem.expanded = expand;
   selectedItems.push(foundItem);
 
   if (foundItem.children) {
     foundItem.children.map((x: any) => {
-      checkIt(x, selectedItems, setSelectedItems);
+      checkIt(x, selectedItems, setSelectedItems, expand);
     });
   }
 
@@ -41,20 +42,46 @@ export const checkIt = (
 export const unCheckIt = (
   foundItem: { [key: string]: any },
   selectedItems: any,
-  setSelectedItems: any
+  setSelectedItems: any,
+  expand: boolean
 ) => {
   if (!foundItem) {
     return;
   }
 
   foundItem.checked = false;
+  foundItem.expanded = false;
   const newSelectedItems = selectedItems.filter(
     (item: any) => item.id !== foundItem.id
   );
   if (foundItem.children) {
     foundItem.children.map((x: any) => {
-      unCheckIt(x, selectedItems, setSelectedItems);
+      unCheckIt(x, selectedItems, setSelectedItems, expand);
     });
   }
   setSelectedItems([...newSelectedItems]);
 };
+
+
+export const getParentAndAncestorsIds = (itemId:string, items:{ [key: string]: string; }[], ancestors:string[] = []):any => {
+  for (let i = 0; i < items.length; i++) {
+    const item:any = items[i];
+    if (item.id === itemId) {
+      // item found in current level of items array
+      return [...ancestors, item.id];
+    }
+    if (item.children && item.children.length > 0) {
+      // recursively search through children
+      const foundAncestors = getParentAndAncestorsIds(
+        itemId,
+        item.children,
+        [...ancestors, item.id]
+      );
+      if (foundAncestors) {
+        return foundAncestors;
+      }
+    }
+  }
+  // item not found in this level of items array or its children
+  return null;
+}

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -81,10 +81,11 @@ $pb_selectable_card_border: 2px;
         }
 
         .separator {
-          width: 2px;
-          margin-right: 0px;
           background: $royal;
         }
+        .psuedo_separator {
+          background-color: $royal;
+        }
       }
     }
   }
@@ -125,13 +126,17 @@ $pb_selectable_card_border: 2px;
 
   .separator {
     align-self: stretch;
-    width: 1px;
-    margin-right: 1px;
+    padding-right: 1px;
     margin-top: -1px;
     margin-bottom: -1px;
     background: $border_light;
   }
 
+  .psuedo_separator {
+    align-self: stretch;
+    padding-right: 1px;
+  }
+
   &.error {
     > label {
       border-color: $error;

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -13,9 +13,9 @@ import {
 
 import Icon from '../pb_icon/_icon'
 import Checkbox from '../pb_checkbox/_checkbox'
-import Card from '../pb_card/_card'
 import Flex from '../pb_flex/_flex'
 import Radio from '../pb_radio/_radio'
+import Card from '../pb_card/_card'
 
 type SelectableCardProps = {
   aria?: { [key: string]: string },
@@ -149,13 +149,15 @@ const SelectableCard = (props: SelectableCardProps) => {
                   </Input>
                 </Flex>
                 <div className="separator" />
-                <Card.Body
+                <div className="psuedo_separator"/>
+                <Card
+                    borderNone
                     dark={dark}
                     padding="sm"
                     status={error ? 'negative' : null}
                 >
                   {text ||props.children}
-                </Card.Body>
+                </Card>
               </Flex>
               :
             text || props.children

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -24,7 +24,8 @@
             <% end %>
           <% end %>
           <div class="separator"></div>
-          <%= pb_rails("card/card_body", props: { padding: "sm", status: object.status }) do %>
+          <div class="psuedo_separator"></div>
+          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
             <% if content.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>

data/app/pb_kits/playbook/pb_typeahead/{_typeahead.jsx → _typeahead.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
@@ -19,6 +17,7 @@ import Placeholder from './components/Placeholder'
 import ValueContainer from './components/ValueContainer'
 
 import { noop, buildDataProps } from '../utilities/props'
+import { Noop } from '../types'
 
 /**
  * @typedef {object} Props
@@ -33,16 +32,28 @@ type TypeaheadProps = {
   components?: object,
   createable?: boolean,
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   error?: string,
   id?: string,
   label?: string,
-  loadOptions?: string,
+  loadOptions?: string | Noop,
   getOptionLabel?: string | (() => any),
   getOptionValue?: string | (() => any),
   name?: string,
 }
 
+export type SelectValueType = {
+  label: string,
+  value: string,
+  imageUrl?: string,
+}
+
+type TagOnChangeValues = {
+  action?: string,
+  option?: SelectValueType,
+  removedValue?: string,
+}
+
 /**
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
@@ -67,7 +78,7 @@ const Typeahead = ({
       Control,
       ClearIndicator,
       IndicatorsContainer,
-      IndicatorSeparator: null,
+      IndicatorSeparator: null as null,
       MenuList,
       MultiValue,
       Option,
@@ -85,8 +96,9 @@ const Typeahead = ({
     isSearchable: true,
     name,
     multiKit: '',
-    onCreateOption: null,
+    onCreateOption: null as null,
     plusIcon: false,
+    onMultiValueClick: (_option: SelectValueType) => { },
     ...props,
   }
 
@@ -96,7 +108,7 @@ const Typeahead = ({
       : (async ? AsyncSelect : Select)
   )
 
-  const handleOnChange = (_data, { action, option, removedValue }) => {
+  const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -123,13 +135,13 @@ const Typeahead = ({
 
   return (
     <div {...dataProps}
-        className={classnames(classes, inlineClass)}
+      className={classnames(classes, inlineClass)}
     >
       <Tag
-          classNamePrefix="typeahead-kit-select"
-          error={error}
-          onChange={handleOnChange}
-          {...selectProps}
+        classNamePrefix="typeahead-kit-select"
+        error={error}
+        onChange={handleOnChange}
+        {...selectProps}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_typeahead/components/{ClearIndicator.jsx → ClearIndicator.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React, { useEffect } from 'react'
 import { components } from 'react-select'
 
@@ -11,8 +9,8 @@ const ClearContainer = (props: any) => {
 
   return (
     <components.ClearIndicator
-        className="clear_indicator"
-        {...props}
+      className="clear_indicator"
+      {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/{Control.jsx → Control.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import { components } from 'react-select'
 
@@ -13,14 +11,14 @@ type Props = {
 const TypeaheadControl = (props: Props) => (
   <div className="pb_typeahead_wrapper">
     <TextInput
-        dark={props.selectProps.dark}
-        error={props.selectProps.error}
-        label={props.selectProps.label}
+      dark={props.selectProps.dark}
+      error={props.selectProps.error}
+      label={props.selectProps.label}
     >
       <Flex>
         <components.Control
-            className="text_input"
-            {...props}
+          className="text_input"
+          {...props}
         />
       </Flex>
     </TextInput>

data/app/pb_kits/playbook/pb_typeahead/components/{IndicatorsContainer.jsx → IndicatorsContainer.tsx}

@@ -1,12 +1,10 @@
-/* @flow */
-
 import React from 'react'
 import { components } from 'react-select'
 
 const IndicatorsContainer = (props: any) => (
   <components.IndicatorsContainer
-      className="text_input_indicators"
-      {...props}
+    className="text_input_indicators"
+    {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/components/{MenuList.jsx → MenuList.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import { components } from 'react-select'
 

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

@@ -0,0 +1,66 @@
+import React from 'react'
+import { components } from 'react-select'
+
+import Badge from '../../pb_badge/_badge'
+import FormPill from '../../pb_form_pill/_form_pill'
+import { SelectValueType } from '../_typeahead'
+
+type Props = {
+  data: SelectValueType,
+  multiValueTemplate: any,
+  removeProps: any,
+  selectProps: any,
+}
+
+const MultiValue = (props: Props) => {
+  const { removeProps } = props
+  const { imageUrl, label } = props.data
+  const { multiKit } = props.selectProps
+
+  const formPillProps = {
+    marginRight: 'xs',
+    name: label,
+    avatarUrl: '',
+  }
+
+  if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
+
+  return (
+    <components.MultiValueContainer
+      className="text_input_multivalue_container"
+      {...props}
+    >
+      {multiKit === 'badge' &&
+        <Badge
+          closeProps={removeProps}
+          removeIcon
+          text={label}
+          variant="primary"
+        />
+      }
+
+      {multiKit !== 'badge' && imageUrl &&
+        <FormPill
+          avatarUrl={imageUrl}
+          closeProps={removeProps}
+          marginRight="xs"
+          name={label}
+          size={multiKit === 'smallPill' ? 'small' : ''}
+          text=''
+        />
+      }
+
+      {multiKit !== 'badge' && !imageUrl &&
+        <FormPill
+          closeProps={removeProps}
+          marginRight="xs"
+          name=''
+          size={multiKit === 'smallPill' ? 'small' : ''}
+          text={label}
+        />
+      }
+    </components.MultiValueContainer>
+  )
+}
+
+export default MultiValue

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { components } from 'react-select'
+
+import User from '../../pb_user/_user'
+
+const Option = (props: any) => {
+  const {
+    imageUrl,
+  } = props.data
+  const { valueComponent } = props.selectProps
+
+  return (
+    <components.Option {...props}>
+      <>
+        {!valueComponent && imageUrl &&
+          <User
+            align="left"
+            avatarUrl={imageUrl}
+            dark={props.selectProps.dark}
+            name={props.label}
+            orientation="horizontal"
+          />
+        }
+
+        {valueComponent &&
+          valueComponent(props.data)
+        }
+
+        {!valueComponent && !imageUrl &&
+          props.label
+        }
+      </>
+    </components.Option>
+  )
+}
+
+export default Option

data/app/pb_kits/playbook/pb_typeahead/components/{Placeholder.jsx → Placeholder.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import { components } from 'react-select'
 
@@ -9,18 +7,18 @@ import Icon from '../../pb_icon/_icon'
 const Placeholder = (props: any) => (
   <>
     <Flex
-        align="center"
-        className="placeholder"
+      align="center"
+      className="placeholder"
     >
       <components.IndicatorsContainer
-          {...props}
+        {...props}
       />
-      <If condition={props.selectProps.plusIcon}>
+      {props.selectProps.plusIcon &&
         <Icon
-            className="typeahead-plus-icon"
-            icon="plus"
+          className="typeahead-plus-icon"
+          icon="plus"
         />
-      </If>
+      }
     </Flex>
   </>
 )

data/app/pb_kits/playbook/pb_typeahead/components/{ValueContainer.jsx → ValueContainer.tsx}

@@ -1,12 +1,10 @@
-/* @flow */
-
 import React from 'react'
 import { components } from 'react-select'
 
-const ValueContainer = (props: Props) => (
+const ValueContainer = (props: any) => (
   <components.ValueContainer
-      className="text_input_value_container"
-      {...props}
+    className="text_input_value_container"
+    {...props}
   />
 )