playbook_ui 4.15.1.alpha1 → 4.18.1.pre.alpha1

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx

@@ -0,0 +1,58 @@
+/* @flow */
+
+import React from 'react'
+import { Caption, Flex, SectionSeparator } from '../../'
+
+import CurrentFilters, { FilterDescription } from './CurrentFilters'
+import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
+import FiltersPopover from './FiltersPopover'
+import ResultsCount from './ResultsCount'
+import SortMenu, { SortingChangeCallback, SortOptions, SortValue } from './SortMenu'
+
+export type FilterDoubleProps = {
+  children: Node,
+  filters?: FilterDescription,
+  onSortChange: SortingChangeCallback,
+  results?: number,
+  sortOptions: SortOptions,
+  sortValue?: SortValue,
+} & FilterBackgroundProps
+
+const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results, children, ...bgProps }: FilterDoubleProps) => (
+  <FilterBackground {...bgProps}>
+    <Flex
+        orientation="row"
+        vertical="center"
+    >
+      <FiltersPopover>
+        {children}
+      </FiltersPopover>
+      <CurrentFilters filters={filters} />
+    </Flex>
+    <SectionSeparator />
+    <Flex
+        className="filter-bottom"
+        orientation="row"
+        spacing="between"
+        vertical="center"
+    >
+      <ResultsCount
+          results={results}
+          title
+      />
+      <Flex
+          orientation="row"
+          vertical="center"
+      >
+        <Caption text="sort by:" />
+        <SortMenu
+            onChange={onSortChange}
+            options={sortOptions}
+            value={sortValue}
+        />
+      </Flex>
+    </Flex>
+  </FilterBackground>
+)
+
+export default FilterDouble

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx

@@ -0,0 +1,46 @@
+/* @flow */
+
+import React from 'react'
+import { isEmpty } from 'lodash'
+import { Flex } from '../../'
+
+import CurrentFilters, { FilterDescription } from './CurrentFilters'
+import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
+import FiltersPopover from './FiltersPopover'
+import ResultsCount from './ResultsCount'
+import SortMenu, { SortingChangeCallback, SortOptions, SortValue } from './SortMenu'
+
+export type FilterSingleProps = {
+  children?: Node,
+  filters?: FilterDescription,
+  onSortChange?: SortingChangeCallback,
+  results?: number,
+  sortOptions?: SortOptions,
+  sortValue?: SortValue,
+} & FilterBackgroundProps
+
+const FilterSingle = ({ onSortChange, sortOptions, sortValue, filters, results, children, ...bgProps }: FilterSingleProps) => (
+  <FilterBackground {...bgProps}>
+    <Flex
+        orientation="row"
+        vertical="center"
+    >
+      <If condition={children}>
+        <FiltersPopover>
+          {children}
+        </FiltersPopover>
+        <CurrentFilters filters={filters} />
+      </If>
+      <ResultsCount results={results} />
+      <If condition={!isEmpty(sortOptions)}>
+        <SortMenu
+            onChange={onSortChange}
+            options={sortOptions}
+            value={sortValue}
+        />
+      </If>
+    </Flex>
+  </FilterBackground>
+)
+
+export default FilterSingle

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx

@@ -0,0 +1,37 @@
+/* @flow */
+
+import React, { Node, useState } from 'react'
+import { CircleIconButton, PbReactPopover } from '../../'
+
+const FiltersPopoverProps = { children: Node }
+const FiltersPopover = ({ children }: FiltersPopoverProps) => {
+  const [hide, updateHide] = useState(true)
+  const toggle = () => updateHide(!hide)
+
+  const filterButton = (
+    <CircleIconButton
+        icon="filter"
+        id="filter"
+        onClick={toggle}
+        text="filter"
+        variant="secondary"
+    />
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="outside"
+        offset
+        placement="bottom"
+        reference={filterButton}
+        shouldClosePopover={updateHide}
+        show={!hide}
+    >
+      <div className="pb-form">
+        {children}
+      </div>
+    </PbReactPopover>
+  )
+}
+
+export default FiltersPopover

data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.jsx

@@ -0,0 +1,34 @@
+/* @flow */
+
+import React from 'react'
+import { Caption, TitleCount } from '../../'
+
+const resultsText = (results: number): string => results == 1 ? 'Result' : 'Results'
+
+type ResultsCountProps = {
+  results?: ?number,
+  title?: boolean,
+}
+const ResultsCount = ({ results, title }: ResultsCountProps) => (
+  <Choose>
+    <When condition={results && title}>
+      <TitleCount
+          align="center"
+          count={results}
+          title={`${resultsText(results)}:`}
+      />
+    </When>
+    <When condition={results}>
+      <Caption
+          className="filter-results"
+          size="xs"
+          text={`${results} ${resultsText(results)}`}
+      />
+    </When>
+    <Otherwise>
+      <div />
+    </Otherwise>
+  </Choose>
+)
+
+export default ResultsCount

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx

@@ -0,0 +1,85 @@
+/* @flow */
+
+import React, { useState } from 'react'
+import { find, map, partial } from 'lodash'
+import { Button, Icon, List, ListItem, PbReactPopover } from '../../'
+
+export type Direction = 'asc' | 'desc'
+export type SortOptions = { [name: string]: string }
+export type SortValue = { name: string, dir: Direction }
+export type SortingChangeCallback = (SortValue[]) => void
+
+const nextValue = (value: SortValue[], name: string): Direction => {
+  const current = find(value, { name })
+  return {
+    name,
+    dir: current && current.dir == 'asc' ? 'desc' : 'asc',
+  }
+}
+
+const directionIcon = (dir: Direction) => (
+  dir == 'asc' ? 'sort-amount-up' : 'sort-amount-down'
+)
+
+const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (SortValue) => void) => (
+  map(options, (label, name) => {
+    const next = nextValue(value, name)
+    return (
+      <ListItem key={`option-${next.name}-${next.dir}`}>
+        <Button
+            icon={directionIcon(next.dir)}
+            onClick={partial(handleChange, next)}
+            text={` ${label}`}
+            variant="link"
+        />
+      </ListItem>
+    )
+  })
+)
+
+export type SortMenuProps = {
+  value?: SortValue[],
+  options: SortOptions,
+  onChange: SortingChangeCallback,
+}
+const SortMenu = ({ options, value, onChange }: SortMenuProps) => {
+  const [hide, updateHide] = useState(true)
+  const toggle = () => updateHide(!hide)
+  const handleChange = (value: SortValue) => {
+    updateHide(true)
+    onChange([value])
+  }
+
+  const sortButton = (
+    <Button
+        id="sort-button"
+        onClick={toggle}
+        variant="link"
+    >
+      {map(value, ({ dir, name }) => (
+        <span key={`current-sort-${name}-${dir}`}>
+          <Icon icon={directionIcon(dir)} />
+          {` ${options[name]}`}
+        </span>
+      ))}
+    </Button>
+  )
+
+  return (
+    <PbReactPopover
+        className="pb_filter_sort_menu"
+        closeOnClick="outside"
+        offset
+        placement="bottom"
+        reference={sortButton}
+        shouldClosePopover={updateHide}
+        show={!hide}
+    >
+      <List>
+        {renderOptions(options, value, handleChange)}
+      </List>
+    </PbReactPopover>
+  )
+}
+
+export default SortMenu

data/app/pb_kits/playbook/pb_filter/Filter/index.jsx

@@ -0,0 +1,26 @@
+/* @flow */
+
+import React from 'react'
+
+import FilterSingle, { FilterSingleProps } from './FilterSingle'
+import FilterDouble, { FilterDoubleProps } from './FilterDouble'
+
+type FilterProps = FilterSingleProps | FilterDoubleProps & {
+  double?: boolean,
+}
+
+const Filter = ({
+  double = false,
+  ...templateProps
+}: FilterProps) => (
+  <Choose>
+    <When condition={double}>
+      <FilterDouble {...templateProps} />
+    </When>
+    <Otherwise>
+      <FilterSingle {...templateProps} />
+    </Otherwise>
+  </Choose>
+)
+
+export default Filter

data/app/pb_kits/playbook/pb_filter/_filter.jsx

@@ -1,224 +1,3 @@
 /* @flow */
 
-import React, { useState } from 'react'
-import {
-  Button,
-  Caption,
-  Card,
-  CircleIconButton,
-  Flex,
-  Icon,
-  List,
-  ListItem,
-  PbReactPopover,
-  SectionSeparator,
-  Title,
-  TitleCount,
-} from '../'
-
-type FilterProps = {
-  background?: Boolean,
-  className?: String,
-  data?: String,
-  id?: String,
-  children?: React.Node,
-  filters?: Array<Hash>,
-  results?: Number,
-  sortMenu?: Array<Hash>,
-  template?: 'default' | 'filter_only' | 'sort_only' | 'single'
-}
-
-const Filter = ({
-  background = true,
-  className = 'pb_filter_kit',
-  data,
-  filters = [{}],
-  id,
-  children,
-  results,
-  sortMenu = null,
-  template = 'default',
-}: FilterProps) => {
-  const [showFilterOptions, setShowFilterOptions] = useState(false)
-  const [showSortOptions, setShowSortOptions] = useState(false)
-  const handleToggleFilters = () => {
-    setShowFilterOptions(!showFilterOptions)
-  }
-  const handleToggleSort = () => {
-    setShowSortOptions(!showSortOptions)
-  }
-
-  const filterButton = (
-    <CircleIconButton
-        icon="filter"
-        id="filter"
-        onClick={handleToggleFilters}
-        text="filter"
-        variant="secondary"
-    />
-  )
-
-  const Filters = () => (
-    <If condition={template != 'sort_only' && filters != null}>
-      <PbReactPopover
-          closeOnClick="outside"
-          offset
-          placement="bottom"
-          reference={filterButton}
-          show={showFilterOptions}
-      >
-        <div className="pb-form">
-          {children}
-        </div>
-
-      </PbReactPopover>
-      <div className="maskContainer">
-        <div className="filters">
-          <div className="left_gradient" />
-          { filters.map((item, index) => (
-            <div
-                className="filter"
-                key={index}
-            >
-              <Caption text={item.name} />
-              <Title
-                  size={4}
-                  tag="h4"
-                  text={item.value}
-              />
-            </div>
-          ))}
-          <div className="right_gradient" />
-        </div>
-      </div>
-    </If>
-  )
-
-  const activeSort = () => {
-    return (
-      sortMenu.map((item) => (
-        item.active ? item.item : null
-      ))
-    )
-  }
-
-  const activeDirection = () => {
-    let direction
-    sortMenu.map((item) => {
-      item.active ? direction = item.direction : null
-    })
-    const icon = direction == 'asc' ? 'sort-amount-up' : 'sort-amount-down'
-    return icon
-  }
-
-  const sortButton = (
-    <If condition={sortMenu != null}>
-      <Button
-          id="sort-button"
-          onClick={handleToggleSort}
-          variant="link"
-      >
-        {activeSort()}
-        <Icon
-            fixedWidth
-            icon={`${activeDirection()}`}
-        />
-      </Button>
-    </If>
-  )
-  const Results = () => {
-    const resultsText = results > 1 ? 'Results' : 'Result'
-    return (
-      <If condition={results != undefined}>
-        <If condition={template != 'default'}>
-          <Caption
-              className="filter-results"
-              size="xs"
-              text={`${results} ${resultsText}`}
-          />
-          <Else />
-          <TitleCount
-              align="center"
-              count={results}
-              title={`${resultsText}:`}
-          />
-        </If>
-      </If>
-    )
-  }
-  const Sort = () => (
-    <If condition={template != 'filter_only'}>
-      <Flex
-          orientation="row"
-          vertical="center"
-      >
-        <If condition={template == 'default'}>
-          <Caption text="sort by:" />
-        </If>
-        <PbReactPopover
-            closeOnClick="outside"
-            offset
-            placement="bottom"
-            reference={sortButton}
-            show={showSortOptions}
-        >
-          <List>
-            {sortMenu ? sortMenu.map((item) => (
-              <ListItem key={item.item}>
-                <Button
-                    link={item.link}
-                    text={item.item}
-                    variant="link"
-                />
-              </ListItem>
-          )) : null}
-
-          </List>
-        </PbReactPopover>
-      </Flex>
-    </If>
-  )
-  const Core = () => (
-    <>
-      <Flex
-          orientation="row"
-          vertical="center"
-      >
-        <Filters />
-        <If condition={template != 'default'}>
-          <Results />
-          <Sort />
-        </If>
-      </Flex>
-      <If condition={template == 'default'}>
-        <SectionSeparator />
-        <Flex
-            className="filter-bottom"
-            orientation="row"
-            spacing="between"
-            vertical="center"
-        >
-          <Results />
-          <Sort />
-        </Flex>
-      </If>
-    </>
-  )
-  return (
-    <div
-        className={className}
-        data={data}
-        id={id}
-    >
-      <If condition={background}>
-        <Card padding="none">
-          <Core />
-        </Card>
-        <Else />
-        <Core />
-      </If>
-    </div>
-  )
-}
-
-export default Filter
+export { default } from './Filter'