@edvisor/product-language 0.10.0 → 0.10.2

package/src/lib/components/select/select.tsx

@@ -0,0 +1,337 @@
+import { forwardRef, defaultTo, is, isDefined, isNil, safeArray, PropsWithChildren } from '@helpers'
+import { CSSProperties, useCallback, useRef, useState } from 'react'
+// import styled from 'styled-components'
+import { Menu } from './components/menu'
+import Value from './components/value'
+import { IOption, ISelectProps } from './types'
+import { equal, getDocument, keys } from './utils'
+
+/** 
+ * @TODO Use this container and remove the ContainerStyles 
+ * when we have a solution for  RWC styled components, or move away from it.
+ */
+/*const Container = styled.div`
+  position: relative;
+  cursor: default;
+  width: 100%;
+  box-sizing: border-box;
+  pointer-events: ${(props: { disabled?: boolean }) =>
+    is(props.disabled) ? 'none' : 'auto'};
+  opacity: ${(props: { disabled?: boolean }) => (is(props.disabled) ? 0.75 : 1)};
+  user-select: none;
+`*/
+
+const ContainerStyles: (props: { disabled?: boolean }) => CSSProperties = ({ disabled }) => ({
+  position: 'relative',
+  cursor: 'default',
+  width: '100%',
+  boxSizing: 'border-box',
+  pointerEvents: is(disabled) ? 'none' : 'auto',
+  opacity: is(disabled) ? 0.75 : 1,
+  userSelect: 'none',
+})
+
+const SelectImpl = <T,>(props: ISelectProps<T>, selectRef: React.ForwardedRef<HTMLDivElement>) => {
+  
+  type OptionValue = T | T[] | undefined
+
+  if (isNil(selectRef)) {
+    // eslint-disable-next-line no-null/no-null, react-hooks/rules-of-hooks
+    selectRef = useRef<HTMLDivElement>(null)
+  }
+
+  const [open, setOpen] = useState(false)
+  const [selectedIndex, setSelectedIndex] = useState<number | undefined>(undefined)
+  const [search, setSearch] = useState<string | undefined>(undefined)
+  const [focused, setFocused] = useState(false)
+
+  const {
+    className,
+    style,
+    clearable,
+    placeholder,
+    value,
+    disabled,
+    invalid,
+    errors,
+    labelComponent,
+    menuComponent,
+    multi,
+    emptyText,
+    rowHeight,
+    menuHeight,
+    menuTitle,
+    menuPosition,
+    label,
+    labelPosition,
+  } = props
+
+  const searchable = props.searchable
+  const document = getDocument()
+  const options = getOptions()
+
+  const onDocumentClick = useCallback((e: MouseEvent) => {
+    const target = e.target as HTMLInputElement
+    
+    if (isDefined(target) && isDefined(target.closest('.select-menu'))) {
+      return
+    }
+    
+    if (isDefined(selectRef) && typeof selectRef === 'object') {      
+      
+      const { current } = selectRef
+      
+      if (isDefined(current) && !current.contains(target)) {
+        closeMenu(props.value)
+      }
+
+    }
+  }, [props.value])
+
+  function getOptions(): IOption<T>[] {
+    
+    if (isDefined(search)) {
+      return safeArray(props.options)
+        .filter((option) => option.label
+          .toLowerCase()
+          .includes(search.toLowerCase()))
+    }
+    
+    return defaultTo(props.options, [])
+  }
+
+  function openMenu(): void {
+    
+    setOpen(true)
+    setSearch(isNil(props.value) ? search : undefined)
+    setSelectedIndex(options.findIndex((option) =>
+      equal(option.value, props.value)
+    ))
+    props.onOpen?.()
+    addDocumentListener()
+  }
+
+  
+  function closeMenu(val: OptionValue, callback?: () => void): void {
+    removeDocumentListener()
+    setOpen(false)
+    setSearch(isNil(val) ? search : undefined)
+    setSelectedIndex(undefined)
+    props.onClose?.()
+    if (typeof callback === 'function') {
+      callback()
+    }
+  }
+
+  function addDocumentListener(): void {
+    removeDocumentListener()
+    document?.addEventListener('click', onDocumentClick, { capture: true })
+  }
+
+  function onOptionSelect(selectValue: OptionValue, option?: IOption<T>): void {
+    setFocused(true)
+    closeMenu(selectValue, () => props.onChange?.(selectValue, option))
+  }
+
+  function removeDocumentListener(): void {
+    document?.removeEventListener('click', onDocumentClick, { capture: true })
+  }
+
+  function onKeyDown({ key }: React.KeyboardEvent): void {
+    switch (key) {
+      case keys.TAB:
+        if (open) {
+          closeMenu(props.value)
+        }
+        break
+      case keys.ARROW_UP:
+        if (open) {
+          setSelectedIndex(getNewSelectedIndex(key))
+        } else {
+          openMenu()
+        }
+        break
+      case keys.ARROW_DOWN:
+        if (open) {
+          setSelectedIndex(getNewSelectedIndex(key))
+        } else {
+          openMenu()
+        }
+        break
+    }
+  }
+
+  function onKeyUp({ key }: React.KeyboardEvent): void {
+    
+    switch (key) {      
+      case keys.ENTER:
+        if (selectedIndex !== undefined &&
+          isDefined(options[selectedIndex])) {
+          
+          const option = options[selectedIndex]
+          const newValue = option.value
+
+          onOptionSelect(
+            Array.isArray(value) && is(multi)
+              ? [...value, newValue]
+              : newValue,
+            option
+          )
+        }
+        break
+      case keys.ESC:
+        if (open) {
+          closeMenu(value)
+        }
+      break
+    }
+  }
+
+  const getNewSelectedIndex = (key: string) => {
+    
+    if (isNil(selectedIndex)) {
+      return 0
+    }
+    
+    let newSelectedIndex = selectedIndex
+
+    if (key === keys.ARROW_UP) {
+       
+      newSelectedIndex = newSelectedIndex - 1
+
+      if (newSelectedIndex < 0) {
+        newSelectedIndex = options.length - 1
+      }
+    }
+    
+    if (key === keys.ARROW_DOWN) {
+      if (newSelectedIndex === options.length - 1) {
+        newSelectedIndex = 0
+      } else {
+        newSelectedIndex = newSelectedIndex + 1
+      }
+    }
+
+    return newSelectedIndex
+  }
+
+  function onClear() {
+    onOptionSelect(is(props.multi) ? [] : undefined)
+  }
+
+  function toggleMenu(): void {    
+    if (!open) {
+      openMenu()
+    } else {
+      closeMenu(props.value)
+    }
+  }
+
+  function onSearch(searchValue: string): void {
+    
+    setSearch(searchValue)
+    setOpen(true)
+
+    if (options.length === 1 || (isDefined(searchValue))) {
+      setSelectedIndex(0)
+    } else {
+      setSelectedIndex(undefined)
+    }
+
+    props.onSearch?.(searchValue)
+  }
+
+  function onSearchFocus() {
+    if (!open && !focused) {
+      openMenu()
+    }
+
+    setFocused(true)
+  }
+
+  function onSearchBlur() {
+    setFocused(false)
+  }
+
+  function onOptionRemove(removedValue: OptionValue): void {
+    if (Array.isArray(props.value) && is(props.multi)) {
+      const values = props.value.filter(
+        (val) => !equal(val, removedValue)
+      )
+
+      onOptionSelect(values)
+    }
+  }
+
+  const classNames = [
+    'select',
+    className,
+    open && 'open',
+    is(invalid) && 'has-error'
+  ].filter((c) => Boolean(c))
+
+   /** 
+   * @TODO this is a hack to be able to use the ref in react-web-client
+   * RWC uses styled-components < v4 and expects the ref to be passes as
+   * "innerRef" not just "ref", but product-language uses > v4 and wants
+   * to use ref. So for some components that need a ref, like this one
+   * we will have to use a div and style it the old fashioned way until
+   * we upgrade rwc's styled-components or drop rwc
+   */
+  return (
+    <div
+      style={{ ...style, ...ContainerStyles({ disabled }) }}
+      ref={selectRef}
+      className={classNames.join(' ')}
+      onKeyUp={onKeyUp}
+      onKeyDown={onKeyDown}
+    >
+      <Value
+        clearable={clearable}
+        searchable={searchable}
+        open={open}
+        disabled={disabled}
+        multi={multi}
+        focused={focused}
+        options={props.options}
+        placeholder={placeholder}
+        invalid={invalid}
+        errors={errors}
+        value={value}
+        search={search}
+        label={label}
+        labelPosition={labelPosition}
+        labelComponent={labelComponent}
+        onClear={onClear}
+        onClick={toggleMenu}
+        onSearch={onSearch}
+        onSearchFocus={onSearchFocus}
+        onSearchBlur={onSearchBlur}
+        onOptionRemove={onOptionRemove}
+      />
+      <Menu
+        open={open}
+        options={options}
+        value={value}
+        multi={multi}
+        invalid={invalid}
+        search={search}
+        label={label}
+        labelPosition={labelPosition}
+        selectedIndex={selectedIndex}
+        labelComponent={labelComponent}
+        menuComponent={menuComponent}
+        emptyText={emptyText}
+        rowHeight={rowHeight}
+        menuTitle={menuTitle}
+        menuHeight={menuHeight}
+        menuPosition={menuPosition}
+        onSelect={onOptionSelect}
+      />
+    </div>
+  )
+}
+
+export const Select = forwardRef(SelectImpl) as <T> (
+  props: PropsWithChildren<ISelectProps<T>> & {ref?: React.ForwardedRef<HTMLDivElement>}
+) => ReturnType<typeof SelectImpl>