playbook_ui 7.0.1.pre.alpha12 → 7.0.1.pre.alpha14

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

@@ -0,0 +1,51 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+import { FormPill } from '../../'
+
+type Props = {
+  data: object,
+  multiValueTemplate: any,
+  removeProps: any,
+  selectProps: any,
+}
+
+const MultiValue = (props: Props) => {
+  const {
+    data,
+    removeProps,
+    selectProps,
+  } = props
+
+  const handleOnClick = () => {
+    if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(data)
+    removeProps.onClick()
+  }
+  const { imageUrl, label } = data
+
+  return (
+    <components.MultiValueContainer
+        className="text_input_multivalue_container"
+        {...props}
+    >
+      <If condition={imageUrl}>
+        <FormPill
+            avatarUrl={imageUrl}
+            marginRight="xs"
+            name={label}
+            onClick={handleOnClick}
+        />
+        <Else />
+        <FormPill
+            marginRight="xs"
+            onClick={handleOnClick}
+            text={label}
+        />
+      </If>
+    </components.MultiValueContainer>
+  )
+}
+
+export default MultiValue

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

@@ -0,0 +1,34 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+import {
+  User,
+} from '../../'
+
+const Option = (props: any) => {
+  const {
+    imageUrl,
+    label,
+  } = props.data
+  return (
+    <components.Option {...props}>
+      <Choose>
+        <When condition={imageUrl}>
+          <User
+              align="left"
+              avatarUrl={imageUrl}
+              name={label}
+              orientation="horizontal"
+          />
+        </When>
+        <When condition={!imageUrl}>
+          {label}
+        </When>
+      </Choose>
+    </components.Option>
+  )
+}
+
+export default Option

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

@@ -0,0 +1,13 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+const Placeholder = (props: any) => (
+  <components.IndicatorsContainer
+      className="placeholder"
+      {...props}
+  />
+)
+
+export default Placeholder

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

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

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx

@@ -0,0 +1,22 @@
+// @flow
+
+import React from 'react'
+import { Typeahead } from '../../'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadDefault = () => {
+  return (
+    <Typeahead
+        label="Colors"
+        options={options}
+    />
+  )
+}
+
+export default TypeaheadDefault

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

@@ -0,0 +1,29 @@
+/* @flow */
+
+import React from 'react'
+import { Typeahead } from '../..'
+
+const options = [
+  { label: 'Windows', value: '#FFA500' },
+  { label: 'Siding', value: '#FF0000' },
+  { label: 'Doors', value: '#00FF00' },
+  { label: 'Roofs', value: '#0000FF' },
+]
+
+import TypeaheadWithPillsSummary from './_typeahead_with_pills_summary'
+
+const TypeaheadWithPills = () => {
+  return (
+    <>
+      <TypeaheadWithPillsSummary />
+      <Typeahead
+          isMulti
+          label="Colors"
+          options={options}
+          placeholder=""
+      />
+    </>
+  )
+}
+
+export default TypeaheadWithPills

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -0,0 +1,84 @@
+/* @flow */
+
+import React, { useState } from 'react'
+
+import {
+  Caption,
+  Typeahead,
+  User,
+} from '../..'
+
+/**
+ *
+ * @const filterResults
+ * @ignore
+ * @returns {[Object]} - a custom mapping of objects, minimally containing
+ * `value` and `label` among other possible fields
+ * @summary - for doc example purposes only
+ */
+
+const filterResults = (results) =>
+  results.items.map((result) => {
+    return {
+      label: result.login,
+      value: result.id,
+    }
+  })
+
+/**
+ *
+ * @const promiseOptions
+ * @ignore
+ * @returns {Promise} - fetch API data results from Typeahead input text
+ * @see - https://react-select.com/home#async
+ * @summary - for doc example purposes only
+ */
+
+const promiseOptions = (inputValue) =>
+  new Promise((resolve) => {
+    if (inputValue) {
+      fetch(`https://api.github.com/search/users?q=${inputValue}`)
+        .then((response) => response.json())
+        .then((results) => resolve(filterResults(results)))
+    } else {
+      resolve([])
+    }
+  })
+
+const TypeaheadWithPillsAsync = () => {
+  const [users, setUsers] = useState([])
+  const handleOnChange = (value) => setUsers(value)
+
+  return (
+    <>
+      <If condition={users && users.length > 0}>
+        <Caption
+            marginBottom="xs"
+            text="State (Users)"
+        />
+        <For
+            each="user"
+            of={users}
+        >
+          <User
+              align="left"
+              key={user.value}
+              marginBottom="md"
+              name={user.label}
+              orientation="horizontal"
+          />
+        </For>
+      </If>
+      <Typeahead
+          async
+          isMulti
+          label="Github Users"
+          loadOptions={promiseOptions}
+          onChange={handleOnChange}
+          placeholder="type the name of a Github user"
+      />
+    </>
+  )
+}
+
+export default TypeaheadWithPillsAsync

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx

@@ -0,0 +1,45 @@
+/* @flow */
+
+import React from 'react'
+import { Body, Flex, FlexItem, Icon } from '../..'
+
+const TypeaheadWithPillsAsyncSummary = () => {
+  return (
+    <>
+      <Flex
+          marginBottom="lg"
+          vertical="center"
+      >
+        <FlexItem>
+          <Body
+              color="light"
+          >
+            <Icon
+                icon="info-circle"
+                marginRight="xs"
+            />
+          </Body>
+        </FlexItem>
+        <FlexItem>
+          <Body
+              color="light"
+          >
+            {'If the data field '}
+            <code>{'imageUrl'}</code>
+            {' is present, '}
+            <code>{'FormPill'}</code>
+            {' will receive that field as a prop and display the image. '}
+            <br />
+            {'Additionally, you can also leverage the callback prop: '}
+            <code>{'onMultiValueClick'}</code>
+            {' to perform custom work when a '}
+            <code>{'MultiValue'}</code>
+            {' item is clicked.'}
+          </Body>
+        </FlexItem>
+      </Flex>
+    </>
+  )
+}
+
+export default TypeaheadWithPillsAsyncSummary

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx

@@ -0,0 +1,101 @@
+/* @flow */
+
+import React, { useState } from 'react'
+
+import {
+  Caption,
+  Typeahead,
+  User,
+} from '../..'
+
+import TypeaheadWithPillsAsyncSummary from './_typeahead_with_pills_async_summary'
+
+/**
+ *
+ * @const filterResults
+ * @ignore
+ * @returns {[Object]} - a custom mapping of objects, minimally containing
+ * `value` and `label` among other possible fields
+ * @summary - for doc example purposes only
+ */
+
+const filterResults = (results) =>
+  results.items.map((result) => {
+    return {
+      imageUrl: result.avatar_url, //add the custom field
+      label: result.login,
+      value: result.id,
+    }
+  })
+
+/**
+ *
+ * @const promiseOptions
+ * @ignore
+ * @returns {Promise} - fetch API data results from Typeahead input text
+ * @see - https://react-select.com/home#async
+ * @summary - for doc example purposes only
+ */
+
+const promiseOptions = (inputValue) =>
+  new Promise((resolve) => {
+    if (inputValue) {
+      fetch(`https://api.github.com/search/users?q=${inputValue}`)
+        .then((response) => response.json())
+        .then((results) => resolve(filterResults(results)))
+    } else {
+      resolve([])
+    }
+  })
+
+const TypeaheadWithPillsAsyncUsers = () => {
+  const [users, setUsers] = useState([])
+  const handleOnChange = (value) => setUsers(value)
+
+  /**
+   *
+   * @const handleOnMultiValueClick {function} - a custom callback for the MultiValue click
+   * @ignore
+   * @returns {null}
+   * @summary - for doc example purposes only
+   */
+  const handleOnMultiValueClick = (value) => {
+    alert(`You removed the user: "${value.label}"`)
+  }
+
+  return (
+    <>
+      <TypeaheadWithPillsAsyncSummary />
+      <If condition={users && users.length > 0}>
+        <Caption
+            marginBottom="xs"
+            text="State (Users)"
+        />
+        <For
+            each="user"
+            of={users}
+        >
+          <User
+              align="left"
+              avatarUrl={user.imageUrl}
+              key={user.value}
+              marginBottom="md"
+              name={user.label}
+              orientation="horizontal"
+          />
+        </For>
+      </If>
+      <Typeahead
+          async
+          isMulti
+          label="Github Users"
+          loadOptions={promiseOptions}
+          onChange={handleOnChange}
+          onMultiValueClick={handleOnMultiValueClick}
+          placeholder="type the name of a Github user"
+      />
+    </>
+  )
+}
+
+export default TypeaheadWithPillsAsyncUsers

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx

@@ -0,0 +1,27 @@
+// @flow
+
+import React from 'react'
+import { Body, Icon } from '../..'
+
+const TypeaheadWithPillsSummary = () => {
+  return (
+    <>
+      <Body
+          color="light"
+          marginBottom="lg"
+      >
+        <Icon
+            icon="info-circle"
+            marginRight="xs"
+        />
+        {'Typeahead kit is data-driven. The minimum default fields are '}
+        <code>{'label'}</code>
+        {' and '}
+        <code>{'value'}</code>
+        {'.'}
+      </Body>
+    </>
+  )
+}
+
+export default TypeaheadWithPillsSummary

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml

@@ -1,4 +1,10 @@
 examples:
   rails:
-  - typeahead_default: Default
-  - typeahead_with_context_dark: With Context
+    - typeahead_default: Default
+    - typeahead_with_context_dark: With Context
+
+  react:
+    - typeahead_default: Default
+    - typeahead_with_pills: With Pills
+    - typeahead_with_pills_async: With Pills (Async Data)
+    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)

data/app/pb_kits/playbook/pb_typeahead/docs/index.js

@@ -0,0 +1,4 @@
+export { default as TypeaheadDefault } from './_typeahead_default'
+export { default as TypeaheadWithPills } from './_typeahead_with_pills'
+export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async'
+export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users'