@edvisor/product-language 0.10.2 → 0.10.3

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

@@ -1,337 +0,0 @@
-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>