@idea-fragments/react-components-zendesk 0.1.1 → 0.1.2

package/src/components/forms/selectors/Dropdown.tsx

@@ -1,410 +0,0 @@
-import {
-  AddItem,
-  Autocomplete as ZenAutocomplete,
-  Dropdown as ZenDropdown,
-  Field,
-  HeaderItem,
-  Hint,
-  Item as ZItem,
-  Label as ZenLabel,
-  Menu,
-  Message,
-  Multiselect as ZenMultiSelect,
-  NextItem,
-  PreviousItem,
-  Select as ZenSelect,
-  Trigger,
-}                                                  from "@zendeskgarden/react-dropdowns"
-import { IItemProps }                              from "@zendeskgarden/react-dropdowns/dist/typings/Menu/Items/Item"
-import { VALIDATION }                              from "@zendeskgarden/react-dropdowns/dist/typings/styled/field/StyledMessage"
-import { buttonLikeHoverable }                     from "components/forms/buttonMixins"
-import {
-  getItemType,
-  Item
-}                                                  from "components/forms/selectors/Dropdown/Item"
-import {
-  MultiSelectorProps,
-  SelectorItemKey,
-  SelectorOption,
-  SelectorProps,
-  StateChange,
-}                                                  from "components/forms/selectors/types"
-import { VALIDATION_STATES }                       from "components/forms/validationStates"
-import { Loadable }                                from "components/loaders/Loadable"
-import { StateChangeOptions }                      from "downshift"
-import { debounce }                                from "lodash"
-import * as React                                  from "react"
-import {
-  ComponentType,
-  FC, PropsWithChildren,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-}                                                  from "react"
-import styled, { css, FlattenSimpleInterpolation } from "styled-components"
-import { Theme }                                   from "styles/theme/Theme.type"
-import { FONT_SIZES }                              from "styles/typography"
-import {
-  isEmpty,
-  isNotEmpty
-}                                                  from "utils/arrayHelpers"
-import { DO_NOTHING }                              from "utils/functionHelpers"
-import { Logger }                                  from "utils/logging/Logger"
-import {
-  isArray,
-  isNumber,
-  isString
-}                                                  from "utils/typeCheckers"
-
-export type MenuPlacement =
-  "start"
-  | "auto"
-  | "top"
-  | "top-start"
-  | "top-end"
-  | "bottom"
-  | "bottom-start"
-  | "bottom-end"
-  | "end"
-  | "end-top"
-  | "end-bottom"
-  | "start-top"
-  | "start-bottom"
-
-type OptionalSelectorProps = {
-  keyField?: string,
-  valueField?: string,
-}
-
-type CommonProps = {
-  async?: boolean,
-  isOpen?:boolean,
-  maxMenuHeight?: string,
-  menuCSS?: string,
-  menuItemComponent?: ComponentType<any>,
-  placement?: MenuPlacement,
-  returnItemOnChange?: boolean,
-  shouldFilterOptions?: boolean,
-  trigger?: ReactNode,
-  useRawOptions?: boolean,
-}
-
-type SelectorsProps = (CommonProps & SelectorProps)
-  | (CommonProps & MultiSelectorProps)
-
-type Props =
-  Omit<SelectorsProps, "keyField" | "valueField">
-  & OptionalSelectorProps
-
-const menuStyles = (extraStyles: string = "") => css`
-  && { width: 100%; }
-
-  &&, && * {
-    font-size: inherit;
-  }
-
-  ${extraStyles}
-`
-
-const CLEAR_OPTION = {
-  label:          "-- None --",
-  value:          "_cleared",
-  isClearingItem: true,
-}
-
-const logger = new Logger("Dropdown")
-
-export let Dropdown: FC<PropsWithChildren<Props>> = (props) => {
-  const [state, setState]                         = useState({ isOpen: false })
-  const controlledState                           = { ...state, ...props }
-  const [filteringOptions, setFilteringOptionsTo] = useState<boolean>(false)
-  const [searchFilter, setSearchFilter]           = useState<string>("")
-
-  const [
-          filteredOptions, setFilteredOptions,
-        ] = useState<SelectorOption[]>(props.options)
-
-  const {
-          async,
-          children,
-          className,
-          clearable,
-          shouldFilterOptions,
-          hint,
-          keyField,
-          label,
-          maxMenuHeight,
-          menuCSS,
-          menuItemComponent,
-          options,
-          placement,
-          returnItemOnChange,
-          trigger,
-          useRawOptions,
-          validation,
-          valueField,
-          onChange,
-          onStateChange,
-        } = props
-
-  const { selectedKey }  = props as SelectorProps
-  const { selectedKeys } = props as MultiSelectorProps
-
-  const filterFunc = useCallback((value: string) => {
-    const searchText    = value.trim().toLowerCase()
-    let matchingOptions = options
-
-    if (searchText !== "") {
-      matchingOptions = options.filter(option => {
-        return (
-          option[valueField!]
-            .trim()
-            .toLowerCase()
-            .indexOf(value.trim().toLowerCase()) !== -1
-        )
-      })
-    }
-
-    setFilteredOptions(matchingOptions)
-    setFilteringOptionsTo(false)
-  }, [options, valueField])
-
-  const filterMatchingOptionsRef = useRef(debounce(filterFunc, 300))
-
-  useEffect(() => {
-    if (!shouldFilterOptions) return
-    filterMatchingOptionsRef.current = debounce(filterFunc, 300)
-    setFilteredOptions(options)
-    setSearchFilter("")
-  }, [filterFunc, shouldFilterOptions, options])
-
-  useEffect(() => {
-    if (!shouldFilterOptions) return
-
-    setFilteringOptionsTo(true)
-    filterMatchingOptionsRef.current(searchFilter)
-  }, [searchFilter, shouldFilterOptions])
-
-  let { message }   = props
-  const optionNodes = useRawOptions ? options as JSX.Element[] : createOptions(
-    shouldFilterOptions ? filteredOptions : options,
-    keyField!,
-    valueField!,
-    menuItemComponent,
-    filteringOptions,
-    clearable,
-  )
-  message           = validation?.message ?? message
-  const messageNode = message
-                      ?
-                      <Message validation={validation!.validation as VALIDATION}>
-                        {message}
-                      </Message>
-                      : null
-  const hintNode    = hint ? <Hint>{hint}</Hint> : null
-  const labelNode   = label ? <Label>{label}</Label> : null
-
-  const handleChange = (item: SelectorOption | SelectorOption[]) => {
-    logger.writeInfo("selection made", item)
-    if ((item as SelectorOption).isClearingItem) {
-      onChange!(null)
-      return
-    }
-
-    if (isArray(item)) {
-      handleMultiSelectChange(item as SelectorOption[])
-      return
-    }
-
-    if (useRawOptions || returnItemOnChange) {
-      // @ts-ignore
-      onChange!(item)
-      return
-    }
-
-    onChange!((item as SelectorOption)[keyField!])
-  }
-
-  const handleMultiSelectChange = (items: Array<SelectorItemKey | SelectorOption>) => {
-    if (useRawOptions || returnItemOnChange) {
-      const rawSet = new Set(items)
-      // @ts-ignore
-      onChange!([...rawSet])
-      return
-    }
-    // When using the Dropdown with a MultiSelector, the dropdown
-    // spits back the item keys its given and will append the SelectorOption
-    // item to the end of the list. So we need to transform the last item
-    // into the SelectorItemKey
-    const changes = items.map((i: SelectorItemKey | SelectorOption) => {
-      if (isNumber(i) || isString(i)) return i as SelectorItemKey
-      return (i as SelectorOption)[keyField!] as SelectorItemKey
-    })
-
-    // @ts-ignore
-    onChange!([...new Set(changes)])
-  }
-
-  const handleStateChange = (changes: StateChange) => {
-    logger.writeInfo("state change", changes)
-    const item = changes.selectedItem || {}
-
-    onStateChange!({
-      ...changes,
-      selectedItem: item.isClearingItem ? null : item,
-    })
-
-    if (changes.hasOwnProperty("isOpen")) {
-      if (useRawOptions) {
-        setState({ ...state, ...changes })
-        return
-      }
-
-      setState({
-        ...state,
-        isOpen: item.isNextItem || item.isBackItem || changes.isOpen || false,
-      })
-      return
-    }
-
-    if (changes.hasOwnProperty("inputValue")) {
-      setSearchFilter(changes.inputValue || "")
-    }
-  }
-
-  const optionsLoaded = optionNodes && isNotEmpty(optionNodes)
-
-  return (
-    // @ts-ignore
-    <ZenDropdown
-      selectedItem={selectedKey}
-      selectedItems={selectedKeys
-                     ? [...new Set(selectedKeys)]
-                     : undefined}
-      isOpen={controlledState.isOpen}
-      onSelect={handleChange}
-      onStateChange={handleStateChange}
-      downshiftProps={{ itemToString: (item: any) => item }}
-    >
-      {
-        trigger
-        ? <Trigger>{trigger}</Trigger>
-        : <Field className={className}>
-          {labelNode}
-          {hintNode}
-          {children}
-          {messageNode}
-        </Field>
-      }
-
-      {controlledState.isOpen
-       ? <Menu css={menuStyles(menuCSS)}
-               maxHeight={maxMenuHeight}
-               placement={placement}
-         // popperModifiers={getPopperModifiers(fluid)}
-       >
-         {
-           async
-           ? <Loadable css={`flex-direction: column; min-height: 50px`}
-                       showSpinner={controlledState.isOpen && !optionsLoaded}>
-             {optionNodes}
-           </Loadable>
-           : optionNodes
-         }
-       </Menu>
-       : null}
-
-    </ZenDropdown>
-  )
-}
-
-// const getPopperModifiers = (fluid) => {
-//   if (!fluid) return null
-//   return {
-//     computeStyle: {
-//       fn: (data) => {
-//         const { width, left, right } = data.offsets.reference
-//
-//         data.styles.width         = width
-//         data.offsets.popper.width = width
-//         data.offsets.popper.left  = left
-//         data.offsets.popper.right = right
-//
-//         return data
-//       },
-//     },
-//   }
-// }
-
-// @ts-ignore
-Dropdown = styled(Dropdown)`
-  &&, && * {
-    font-size: inherit;
-  }
-
-  && {
-    ${({ fluid }) => fluid ? "width: 100%;" : ""}
-    ${Message as any} {
-      font-size: ${FONT_SIZES.XS};
-    }
-  }
-`
-
-Dropdown.defaultProps = {
-  async:              false,
-  useRawOptions:      false,
-  emptyState:         "Select One",
-  returnItemOnChange: false,
-  validation:         { validation: VALIDATION_STATES.NONE },
-  // maxMenuHeight: "20rem",
-  onChange:      DO_NOTHING,
-  onStateChange: DO_NOTHING,
-}
-
-export const Autocomplete = ZenAutocomplete as ComponentType<any>
-export const Select = ZenSelect as ComponentType<any>
-export const MultiSelect = styled(ZenMultiSelect as ComponentType<any>)`
-  && {
-    div { max-width: 100%; }
-  }
-`
-
-const Label = styled(ZenLabel)`
-  && { color: ${(p) => p.theme.styles.textColorPrimary}; }
-`
-
-const createOptions = (
-  options: SelectorOption[],
-  key: string,
-  value: string,
-  menuItemComponent: ComponentType<any> | undefined,
-  isFilteringOptions: boolean,
-  isClearable: boolean = false,
-) => {
-  if (isFilteringOptions) return [<Item disabled>Loading items...</Item>]
-  if (isEmpty(options)) return [<Item disabled>No matches found</Item>]
-
-  const nodes = options.map((o) => {
-    const ItemType  = getItemType(o)
-    const Component = menuItemComponent
-
-    return <ItemType key={o[key]}
-                     value={o}
-                     disabled={false}
-                     danger={o.danger}>
-      {Component ? <Component {...o} /> : o[value]}
-    </ItemType>
-  })
-
-  if (isClearable) {
-    nodes.unshift(
-      <Item key={CLEAR_OPTION.value} value={CLEAR_OPTION}>
-        {CLEAR_OPTION.label}
-      </Item>,
-    )
-  }
-
-  return nodes
-}

package/src/components/forms/selectors/MonthYearSelector.tsx

@@ -1,54 +0,0 @@
-// --- UNFINISHED ----
-
-import { TextFieldProps } from "components/forms/formField.types"
-import { Dropdown, Select }    from "components/forms/selectors/Dropdown"
-import { Moment }         from "moment"
-import moment                  from "moment"
-import * as React              from "react"
-import { useState }            from "react"
-
-type Props = {
-  minimumDate?: Moment,
-} & TextFieldProps<string, string>
-
-type State = {
-  isOpen: boolean
-}
-
-export const MonthYearSelector = (props: Props) => {
-  const [state, setState] = useState<State>({ isOpen: false })
-
-  const {
-          value,
-          emptyState,
-          disabled,
-          onChange,
-        }: Props = props
-
-  const setDropdownState = ({ isOpen }: State) => {
-    if (disabled || isOpen == null) return
-    setState({ isOpen })
-  }
-
-  // eslint-disable-next-line no-unused-vars
-  const handleCalendarChange = (d: Date) => {
-    // @ts-ignore
-    onChange(moment(d))
-    closeCalendar()
-  }
-
-  const closeCalendar = () => { setState({ isOpen: false }) }
-  return <Dropdown {...props}
-    // @ts-ignore
-                   onStateChange={setDropdownState}
-                   isOpen={state.isOpen}
-                   useRawOptions
-                   options={[]}
-                   menuCSS={`width: auto !important;`}>
-    {/*@ts-ignore*/}
-    <Select validation={props.validation.validation}
-            disabled={disabled}>
-      {value ? value : emptyState}
-    </Select>
-  </Dropdown>
-}

package/src/components/forms/selectors/MultiSelector.tsx

@@ -1,58 +0,0 @@
-import { Dropdown, MultiSelect } from "components/forms/selectors/Dropdown"
-import {
-  MultiSelectorProps,
-  SelectorItemKey,
-  SelectorOption,
-}                                from "components/forms/selectors/types"
-import { VALIDATION_STATES }     from "components/forms/validationStates"
-import {
-  Close,
-  Tag
-}                                from "components/tags/Tag"
-import React                     from "react"
-
-type Props = {
-  maxItems: 2,
-  selectedKeys: Array<SelectorItemKey>,
-} & MultiSelectorProps
-
-export let MultiSelector = ({ maxItems, ...props }: Props) => {
-  let {
-        keyField,
-        options,
-        optionsKeyMap,
-        valueField,
-        validation,
-      } = props
-
-  if (optionsKeyMap == null && options != null) {
-    optionsKeyMap = options.reduce(
-      (m: { [key: string]: SelectorOption }, o: SelectorOption) => {
-        m[o[keyField]] = o
-        return m
-      }, {},
-    )
-  }
-
-  return (
-    <Dropdown {...props} shouldFilterOptions>
-      <MultiSelect
-        maxItems={maxItems}
-        validation={validation?.validation}
-        renderItem={({ value, removeValue }: any) => (
-          <Tag size="large">
-            <span>{optionsKeyMap?.[value]?.[valueField]}</span>
-            <Close onClick={() => removeValue()} />
-          </Tag>
-        )}
-      />
-    </Dropdown>
-  )
-}
-
-// @ts-ignore
-MultiSelector.defaultProps = {
-  invalidOnNoSelection: true,
-  validation:           { validation: VALIDATION_STATES.NONE },
-}
-

package/src/components/forms/selectors/SearchableSelector.tsx

@@ -1,120 +0,0 @@
-import { Autocomplete, Dropdown } from "components/forms/selectors/Dropdown"
-import {
-  SelectorOption,
-  SelectorProps,
-  StateChange,
-}                                 from "components/forms/selectors/types"
-import React, {
-  FC,
-  PropsWithChildren,
-  useEffect,
-  useRef,
-  useState
-}                                 from "react"
-import styled                     from "styled-components"
-import {
-  COLORS,
-  veryLight
-}                                 from "styles/colors"
-import { FONT_WEIGHTS }           from "styles/typography"
-import { DO_NOTHING }             from "utils/functionHelpers"
-import { isFunction }             from "utils/typeCheckers"
-
-/* optionsKeyMap prop is not needed here. SearchableSelector uses Zendesk's Autocomplete
- * component which generates its own display value from options prop, unlike
- * our Selector component, which relies on you passing in the display value as a
- * child.
- *
- * SearchableSelector will take passed in options props and create required options
- * prop for Autocomplete based on passed in keyField and valueField.
- * */
-type Props = PropsWithChildren<{
-  onSearchTextChange?: (s: string) => void,
-}> & SelectorProps
-
-/*
- * If we need this full width, maybe add a Block wrapper here
- * */
-export let SearchableSelector: FC<Props> = ({ children, ...props }) => {
-  const {
-          emptyState,
-          keyField,
-          options,
-          selectedKey,
-          valueField,
-        }               = props
-  let { optionsKeyMap } = props
-
-  const [searchText, setSearchText]           = useState("")
-  const [matchingOptions, setMatchingOptions] = useState(options)
-
-  const filterOptions = useRef((value: any) => {
-    const matchingOptions = options.filter(option => {
-      return (
-        option[valueField]
-          .trim()
-          .toLowerCase()
-          .indexOf(String(value).trim().toLowerCase()) !== -1
-      )
-    })
-
-    setMatchingOptions(matchingOptions)
-  })
-
-  useEffect(() => {
-    filterOptions.current(searchText)
-  }, [searchText])
-
-  const handleStateChange = (state: StateChange) => {
-    if (state.hasOwnProperty("inputValue")) {
-      setSearchText(state.inputValue!)
-    }
-  }
-
-  if (optionsKeyMap == null && options != null) {
-    optionsKeyMap = options.reduce(
-      (m: { [key: string]: SelectorOption }, o: SelectorOption) => {
-        m[o[keyField]] = o
-        return m
-      }, {},
-    )
-  }
-
-  if (!optionsKeyMap) return null
-
-  return (
-    <Dropdown {...props}
-              onStateChange={handleStateChange}
-              options={matchingOptions}>
-      <Autocomplete>
-        {
-          !!selectedKey
-          ? isFunction(children)
-            /*@ts-ignore*/
-            ? (children as Function)(optionsKeyMap[selectedKey])
-            : optionsKeyMap[selectedKey][valueField]
-          : emptyState
-        }
-      </Autocomplete>
-    </Dropdown>
-  )
-}
-
-SearchableSelector.defaultProps = {
-  onSearchTextChange: DO_NOTHING,
-}
-
-SearchableSelector = styled(SearchableSelector)`
-  font-weight: ${({ flat }: Props) => flat ? FONT_WEIGHTS.BOLD : "inherit"};
-
-  &&& * {
-    ${({ flat }: Props) => flat ? "border: none;" : ""}
-    cursor: ${({ flat }: Props) => flat ? "pointer !important" : "inherit"};
-  }
-
-  :hover > div {
-    ${({ flat }: Props) => flat
-                           ? `background: ${veryLight(COLORS.GREY)};`
-                           : ""};
-  }
-`

package/src/components/forms/selectors/Selector.tsx

@@ -1,55 +0,0 @@
-import { Dropdown, Select }   from "components/forms/selectors/Dropdown"
-import { SelectorEmptyState } from "components/forms/selectors/SelectorEmptyState"
-import {
-  SelectorOption,
-  SelectorProps,
-}                             from "components/forms/selectors/types"
-import { VALIDATION_STATES }  from "components/forms/validationStates"
-import React                  from "react"
-
-export let Selector = ({ disabled, ...props }: SelectorProps) => {
-  let {
-        keyField,
-        options,
-        optionsKeyMap,
-        emptyState,
-        selectedKey,
-        small,
-        valueField,
-        validation,
-      } = props
-
-  if (optionsKeyMap == null && options != null) {
-    optionsKeyMap = options.reduce(
-      (m: { [key: string]: SelectorOption }, o: SelectorOption) => {
-        m[o[keyField]] = o
-        return m
-      }, {},
-    )
-  }
-
-  // TODO validation
-  // const getValidation = () => (
-  //     (invalidOnNoSelection && !selectedKey) ?
-  //     VALIDATION_RESULTS.ERROR : validation
-  // )
-
-  return (
-    <Dropdown {...props}>
-      <Select small={small}
-              disabled={disabled}
-              validation={validation?.validation}>
-        {selectedKey && optionsKeyMap?.hasOwnProperty(selectedKey)
-         ? optionsKeyMap[selectedKey][valueField]
-         : <SelectorEmptyState>{emptyState}</SelectorEmptyState>}
-      </Select>
-    </Dropdown>
-  )
-}
-
-// @ts-ignore
-Selector.defaultProps = {
-  invalidOnNoSelection: true,
-  validation:           { validation: VALIDATION_STATES.NONE },
-  optionNodes:          [],
-}

package/src/components/forms/selectors/SelectorEmptyState.tsx

@@ -1,5 +0,0 @@
-import styled from "styled-components"
-
-export const SelectorEmptyState = styled.span`
-  color: ${p => p.theme.styles.textColorSecondary};
-`