@startlibs/form 1.0.11 → 1.1.0

package/src/Combobox.jsx

@@ -0,0 +1,606 @@
+import React, {useRef, useMemo, useEffect} from 'react'
+import _ from 'lodash/fp'
+import styled,{css} from 'styled-components'
+import {FixedSizeList} from "react-window";
+import {ListItem, ContextListMenu, Icon, Loading} from '@startlibs/components'
+import {Fill, useUpdateEffect, useLazyConstant, useToggle, useRefState, useEnsureRef} from '@startlibs/core'
+import {normalizeText, getUID, callIfFunction, getColor, media, ifUndefined} from '@startlibs/utils'
+
+import {Field} from './Field'
+import {TextInput} from './TextInput'
+import {useInput} from './enhanceInput'
+import {getDialogLayersSize, ListSeparator, usePositioning, willUseIsSticky} from '@startlibs/components'
+
+export const ComboboxMenu = styled(ContextListMenu)`
+  z-index: 100;
+  background-color: white;
+  border-radius: 4px 4px 6px 6px;
+  margin-top: -1px;
+  margin-bottom: 0.5rem;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 10px -2px rgba(0,0,0,0.15), 0 1px 2px 0px rgba(0,0,0,0.2);
+  border: 1px solid #b4b4b4;
+  max-height: 25rem;
+  width: auto;
+  ${ListItem} > * {
+    font-size: 13px;
+  }
+  ${media.mobile`
+    ${ListItem} > * {
+      font-size: 14px;
+    }
+  `}
+  ${props => props.withoutIcons && css`
+    ${ListItem} > * {
+      padding-left: 1.25rem;
+      padding-right: 1.25rem;
+    }
+  `}
+  ${props => props.withWindowing && `
+    overflow: hidden;
+    padding: 0;
+  `}
+`
+export const ComboboxInput = styled.div `
+  width: 100%;
+  font-size: 14px;
+  border: 1px solid ${getColor('gray210')};
+  border-radius: 8px;
+  color: ${getColor('gray60')};
+  background: white;
+  position: relative;
+  display: block;
+  min-height: 3rem;
+  padding: 0.5rem 2.5rem 0.5rem 0.7rem;
+  overflow: auto;
+  outline: 0;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  word-break: break-word;
+  ${props => props.suggestive &&`
+    padding-right: 0.7rem;
+  `}
+  ${media.mobile`
+      min-height: 42px;
+      padding-left: 1rem;
+      ${props => props.suggestive &&`
+        padding-right: 1rem;
+      `}
+  `}
+  ${props => props.isFocused && css`
+    border-color: ${getColor('gray180')};
+    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
+  `}
+  :focus {
+    border-color: ${getColor('gray180')};
+    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
+  }
+  ${props => props.hasErrors && css`
+    border-color: ${getColor('alert')} !important;
+  `}
+  input {
+    position: absolute;
+    top: -1px;
+    left: 0;
+    border: none;
+    ${props => !props.suggestive &&`
+      padding-right: 2.5rem;
+    `}
+  }
+`
+
+const ComboboxDropdownIcon = styled(Icon)`
+  position: absolute;
+  top: 51%;
+  transform: translateY(-50%);
+  right: 1rem;
+  color: ${getColor('gray60')};
+`
+const FooterOptionsContainer = styled.div`
+  background: white;
+  border-top: 1px solid rgba(0,0,0,0.1);
+  padding: 0;
+  ${props => !props.hasWindoning && `
+    padding: 0.5rem 0;
+    margin: 0.5rem 0 -0.5rem;
+    bottom: -0.5rem;
+    position: sticky;
+  `}
+`
+const ComboboxPlaceholder = styled.div`
+  color: rgba(0,0,0,0.3);
+`
+
+const ComboboxLoading = styled(Loading)`
+  bottom: 6px;
+  right: 0.6rem;
+  left: auto;
+  top: auto;
+  ${media.mobile`
+    bottom: 9px;
+  `}
+`
+
+export const SEPARATOR = {}
+export const NO_DIGITABLE_FOUND = "Nenhum resultado encontrado"
+//shouldRecenter?
+export const Combobox = styled(React.forwardRef((
+  {
+    getLabel = _.identity,
+    getLabelAs,
+    getBoxLabelAs,
+    getIcon,
+    scrollContainer = (el) => el.closest('.dialog-container') || document.body,
+    className,
+    options,
+    autoFocus,
+    autoOpenMenu,
+    mandatory,
+    placeholder,
+    disabled,
+    fieldValue,
+    label,
+    path,
+    withWindowing,
+    tabIndex = 1,
+    fieldClassName,
+    descText,
+    helpText,
+    raw,
+    digitable,
+    digitableConstraint,
+    digitableAsOption,
+    suggestive,
+    onDigitableChange,
+    footerOptions,
+    isLoading,
+    isOptionDisabled,
+    menuRef,
+    overrideSetValue,
+    transformOnSelect = _.identity,
+    check = (a,b) => a === b,
+    ...rest
+  },ref
+) => {
+
+  const selectedElement = useRef()
+  const selectedElementIndex = useRef()
+  const fieldRef = useRef()
+  const windowingRef = useRef()
+  const skipFocus = useRefState(autoFocus)
+  const skipHover = useRefState()
+  const skipDigitableSetValue = useRefState()
+  const listElement = useEnsureRef(menuRef)
+  const container = useEnsureRef(ref)
+  const keyState = useRefState()
+
+  const contextMenu = useToggle(false)
+  const hover = useToggle()
+  const strongHover = useRefState()
+  const scrollToVisibility = useToggle()
+  const autoCompleteUID = useLazyConstant(() => getUID())
+  const [formValue, confirmValue, {hasErrors}] = useInput({fieldValue, path,...rest},raw)
+  const value = useToggle(formValue)
+  const setValue = (v) => {
+    value.openWith(v)
+  }
+  const digitableValue = useToggle(getLabel(value.isOpen))
+  const digitableRef = useRef()
+  const ignoringFilter = useToggle()
+
+  const setHover = (v) => {
+    hover.openWith(v)
+    if (digitable) {
+      strongHover.set(hover.get())
+    } else {
+      setValue(v)
+    }
+  }
+
+  React.useLayoutEffect(() => {
+    if (digitable && !skipDigitableSetValue.get()) {
+      if (contextMenu.isOpen) {
+        digitableRef.current.select()
+        if (value.get() && !suggestive) {
+          setHover(transformOnSelect(value.get()))
+        }
+      } else {
+        digitableValue.openWith(getLabel(value.get()))
+        strongHover.set(hover.get())
+        hover.close()
+      }
+    }
+    skipDigitableSetValue.set(false)
+  }, [contextMenu.isOpen])
+  useEffect(() => { contextMenu.isOpen && recenterScroll() }, [contextMenu.isOpen])
+
+  useEffect(() => { selectedElement.current && scrollToVisibility.isOpen && makeOptionVisible() },[hover])
+  useEffect(() => {autoFocus && container.current?.focus()},[])
+  useEffect(() => {autoOpenMenu && toggleCombobox()},[])
+  useUpdateEffect(() => {
+    if (value.isOpen !== formValue && !contextMenu.isOpen) {
+      confirmValue(value.isOpen)
+    }},[!!contextMenu.isOpen])
+  useEffect(() => {
+    if (formValue !== value.isOpen) {
+      setValue(formValue)
+    }
+    if (digitable) {
+      digitableValue.openWith(prev => prev !== getLabel(formValue) ? getLabel(formValue) : prev)
+    }
+  },[formValue])
+
+  const filteredOptions = useMemo(() =>
+    _.flow(
+      _.filter(v => {
+      if (!digitable || !digitableValue.isOpen || ignoringFilter.isOpen) {
+        return true
+      }
+      return normalizeText((getLabel(v))).includes(normalizeText(digitableValue.isOpen))
+    }),
+      _.sortBy(v => normalizeText(getLabel(v)).indexOf(normalizeText(digitableValue.isOpen))>0)
+    )(options)
+  ,[options,digitable, digitableValue.isOpen, ignoringFilter.isOpen])
+  const digitableOption = useMemo(() => {
+      const option= filteredOptions.length < 8 && digitableAsOption && !!digitableValue.isOpen && callIfFunction(digitableAsOption, digitableValue.isOpen)
+      return option || (!filteredOptions.length && digitable && !suggestive && NO_DIGITABLE_FOUND)
+    },
+    [digitableValue.isOpen, filteredOptions.length]
+  )
+
+  const availableOptions = filteredOptions.concat(digitableOption || [])
+
+  const allOptions = availableOptions.concat(footerOptions || [])
+    .filter((v) => v !== SEPARATOR)
+
+
+  const withPlaceholder = !value.isOpen && value.isOpen !== 0 && placeholder
+  useUpdateEffect(() => {
+    if (suggestive || !digitable) { return }
+    if (hover.isOpen) {
+      setHover(allOptions[0] === NO_DIGITABLE_FOUND ? allOptions[1] : allOptions[0])
+    } else if (digitableValue.isOpen) {
+      setHover(ifUndefined(value.isOpen,allOptions[0]))
+    }
+  },[digitableValue.isOpen])
+
+  const toggleCombobox = () => {
+    if (contextMenu.isOpen) {
+      contextMenu.close()
+    } else {
+      contextMenu.open()
+    }
+    hover.close()
+  }
+
+  const getCurrentHeight = () => listElement.current.offsetHeight - (listElement.current.querySelector(".JS-list-footer")?.offsetHeight || 0)
+
+  const recenterScroll = () => {
+    if (withWindowing) {
+      const index = hover.get() ? availableOptions.indexOf(hover.get()) : selectedElementIndex.current
+      if (windowingRef.current) {
+        windowingRef.current.scrollToItem(_.isFinite(index) ? index : availableOptions.map(getLabel).indexOf(getLabel(value.get())) || 0, "center")
+      }
+    } else {
+      if (!listElement.current) { return }
+      if (listElement.current.getBoundingClientRect().bottom > window.innerHeight) {
+        const currentScrollContainer = scrollContainer(container.current)
+        currentScrollContainer.scrollTop = listElement.current.getBoundingClientRect().bottom + currentScrollContainer.scrollTop - window.innerHeight
+      }
+      if (selectedElement.current) {
+        listElement.current.scrollTop = selectedElement.current.offsetTop + (selectedElement.current.offsetHeight / 2) - (getCurrentHeight() / 2)
+      }
+    }
+  }
+
+  const makeOptionVisible = () => {
+    if (withWindowing) {
+      if (windowingRef.current) {
+        windowingRef.current.scrollToItem(selectedElementIndex.current || 0)
+      }
+    } else {
+      if ((footerOptions && footerOptions?.indexOf(hover.isOpen)>=0) || !listElement.current) {
+        return
+      } else if (selectedElement.current.offsetTop < listElement.current.scrollTop) {
+        skipHover.set(true)
+        listElement.current.scrollTop = selectedElement.current.offsetTop
+      } else if (selectedElement.current.offsetTop + selectedElement.current.offsetHeight > listElement.current.scrollTop + getCurrentHeight()) {
+        skipHover.set(true)
+        listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight - getCurrentHeight()
+      }
+    }
+  }
+
+  const handleHover = (value,e) => {
+    if (skipHover.get()) {
+      skipHover.set(false)
+      return
+    }
+    scrollToVisibility.close()
+    hover.openWith(value)
+  }
+  const digitableKeyDown = (e) => {
+    if(e.key.length == 1 || e.key == "Spacebar") {
+      e.stopPropagation()
+    } else if (e.key === 'Tab' || e.key === 'Enter') {
+      if (suggestive && allOptions.indexOf(strongHover.get())<0) {
+        if (allOptions.indexOf(value.isOpen)>=0) {
+          setValue(transformOnSelect(value.isOpen))
+        } else {
+          setValue(transformOnSelect(callIfFunction(digitableAsOption,digitableValue.get()) || digitableValue.get()))
+        }
+      } else if (strongHover.get() === hover.get())  {
+        setValue(transformOnSelect(strongHover.get()))
+      }
+      if (e.key === "Enter") {
+        skipFocus.set(true);
+        container.current.focus()
+      }
+    }
+  }
+
+  const keyDown = (e) => {
+    if (e.getModifierState('Shift') && e.key === 'Tab') { return; }
+    if ((e.key === 'Escape' || e.key === 'Tab') && contextMenu.isOpen) {
+      e.stopPropagation()
+      toggleCombobox()
+    }
+    if (e.key.length === 1) {
+      e.stopPropagation()
+      if (!contextMenu.isOpen) {
+        contextMenu.open()
+        if (digitable) {
+          skipDigitableSetValue.set(true)
+          digitableValue.openWith(e.key)
+          return
+        }
+      }
+      const prevKeyState = keyState.get()
+      const repeated = !prevKeyState || (e.key === prevKeyState.word[0] && prevKeyState.repeated)
+      const word = (prevKeyState?.word||'')+e.key
+      clearTimeout(prevKeyState?.timeout || -1)
+      const timeout = setTimeout(() => keyState.set(null),1000)
+      keyState.set({repeated,word,timeout})
+
+      const labels = allOptions.map(o => {
+        const label = getLabel(o)
+        return _.isString(label) ? label.slice(0,repeated ? 1 : word.length).toLowerCase() : ""
+      })
+      const goTo = (index) => {
+        scrollToVisibility.open()
+        setHover(allOptions[index])
+      }
+
+      const currentIndex = allOptions.indexOf(hover.isOpen !== false ? hover.isOpen : value.isOpen)
+
+      const direction = repeated ? (e.shiftKey ? -1 : 1) : 0
+      const fnName = direction < 0 ? 'lastIndexOf' : 'indexOf'
+      const item = repeated ? word.slice(0,1) : word
+      const fromIndex = (currentIndex || (direction < 0 ? labels.length - 1 : 0)) + direction
+      const next = labels[fnName](item,fromIndex)
+      if (next >= 0) {
+        goTo(next)
+      } else {
+        const next = labels[fnName](item)
+        if (next >= 0) {
+          goTo(next)
+        }
+      }
+    }
+    if (['ArrowUp', 'ArrowDown', ' ', 'Enter'].indexOf(e.key) < 0) {
+      return
+    }
+    e.stopPropagation()
+    e.preventDefault()
+    if (contextMenu.isOpen) {
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        const oldValue = hover.isOpen !== false ? hover.isOpen : value.isOpen
+        const previousIndex = allOptions.indexOf(oldValue)
+        const newIndex = Math.min(Math.max((previousIndex + allOptions.length + (e.key === 'ArrowUp' ? (previousIndex < 0 ? 0 : -1) : 1)) % allOptions.length, 0), allOptions.length - 1)
+        scrollToVisibility.open()
+        setHover(allOptions[newIndex])
+      } else {
+        if (hover.isOpen !== false) {
+          setValue(transformOnSelect(hover.isOpen))
+        }
+        toggleCombobox()
+      }
+    } else {
+      toggleCombobox()
+    }
+  }
+
+  const createOption = (option,i,props,opts) => {
+    if (option === SEPARATOR) {
+      return <ListSeparator key={"separator"+i}/>
+    }
+    if (option === NO_DIGITABLE_FOUND) {
+      return <Option
+        key={NO_DIGITABLE_FOUND+i}
+        disabled
+        label={NO_DIGITABLE_FOUND}
+      />
+    }
+    const label = getLabel(option,{option:true})
+    const checked = hover.isOpen !== false ? check(option,hover.isOpen) : check(option,value.isOpen)
+    if (checked) {
+      selectedElementIndex.current = i
+    }
+    return <Option
+      key={label+i}
+      option={option}
+      disabled={callIfFunction(isOptionDisabled,option,label)}
+      icon={callIfFunction(getIcon,option)}
+      checked={checked}
+      label={getLabelAs ? getLabelAs(option) : label}
+      setValue={(v) => {
+        if (!callIfFunction(overrideSetValue,v,{setValue,close:contextMenu.close})) {
+          setValue(transformOnSelect(v));
+          digitableValue.openWith(getLabel(v))
+          contextMenu.close()
+        };
+        skipFocus.set(true);
+        container.current.focus()
+      }
+    }
+      setRef={selectedElement}
+      onHover={handleHover}
+      {...props}
+    />
+  }
+  const onClickInput = () => {
+    if (digitableRef.current && !contextMenu.get()) {
+      digitableRef.current.select()
+    }
+    if (!suggestive) {
+      ignoringFilter.open()
+    }
+    contextMenu.open()
+  }
+  const onFocus = (e) => {
+    if(listElement.current?.contains(e.target) || skipFocus.get()) {
+      skipFocus.set(false)
+    } else {
+      if (!suggestive) {
+        ignoringFilter.open()
+      }
+      contextMenu.open()
+    }
+  }
+
+  const onBlur = (e) => {
+    if(!listElement.current?.contains(e.relatedTarget)) {
+      if (!availableOptions.length && digitableAsOption && digitableValue.get()) {
+        setValue(transformOnSelect(callIfFunction(digitableAsOption,digitableValue.get())))
+      } else if (suggestive) {
+        setValue(transformOnSelect(callIfFunction(digitableAsOption,digitableValue.get()) || digitableValue.get()))
+      } else if (formValue !== value.isOpen) {
+        confirmValue(value.isOpen)
+      }
+      contextMenu.close()
+    }
+  }
+
+  return <Field
+    className={fieldClassName}
+    mandatory={mandatory}
+    descText={descText}
+    helpText={helpText}
+    label={label}
+    labelClick={toggleCombobox}
+    ref={fieldRef}
+  >
+    <ComboboxInput
+      onBlur={onBlur}
+      onFocus={onFocus}
+      onClick={onClickInput}
+      ref={container}
+      tabIndex={contextMenu.isOpen && digitable ? '-1' : tabIndex}
+      onKeyDown={keyDown}
+      disabled={disabled}
+      withPlaceholder={withPlaceholder}
+      hasErrors={hasErrors}
+      comboboxIsOpen={contextMenu.isOpen}
+      isFocused={digitable && !!contextMenu.isOpen}
+      suggestive={suggestive}
+    >
+      {(digitable && !!contextMenu.isOpen) ?
+        <TextInput
+          raw
+          tabIndex={tabIndex}
+          autoFocus
+          autoComplete={autoCompleteUID}
+          ref={digitableRef}
+          constraint={digitableConstraint}
+          onKeyDown={digitableKeyDown}
+          setValue={(v) => {ignoringFilter.close();digitableValue.openWith(v)}}
+          value={digitableValue.isOpen || ""}
+          placeholder={placeholder}
+          onChange={onDigitableChange}
+        />
+        : withPlaceholder ? 
+        <ComboboxPlaceholder>{placeholder}</ComboboxPlaceholder>
+        : <div>{(getBoxLabelAs ? getBoxLabelAs(value.isOpen) : getLabel(value.isOpen))}</div>
+      }
+      {isLoading ? <ComboboxLoading absolute size={20}/> : !suggestive && <ComboboxDropdownIcon icon="arrow-down"/>}
+      {
+        !!contextMenu.isOpen && (!suggestive || !digitable || (allOptions.length && digitableValue.isOpen)) &&
+        <ComboboxMenuContainer
+          withWindowing={withWindowing}
+          ref={listElement}
+          windowingRef={windowingRef}
+          options={availableOptions}
+          digitableValue={digitableValue.get()}
+          digitableAsOption={digitableAsOption}
+          footerOptions={footerOptions}
+          getIcon={getIcon}
+          createOption={createOption}
+        />
+      }
+    </ComboboxInput>
+  </Field>
+
+}))`
+ user-select: none;
+`
+const [WithIsSticky] = willUseIsSticky()
+
+export const Option = ({setValue, icon, option, onHover, checked, label, setRef, ...props}) =>
+  <ListItem
+    hover={checked}
+    tabIndex={-1}
+    onMouseOver={(e) => onHover(option,e)}
+    ref={checked ? setRef : undefined}
+    onClick={(e) => {e.stopPropagation(); setValue(option)}}
+    {...props}
+  >
+    <a>
+      {icon && <Icon icon={icon}/>}
+      {label}
+    </a>
+  </ListItem>
+
+const ITEM_HEIGHT = 37
+const ComboboxMenuContainer = React.forwardRef(({options,digitableAsOption,footerOptions,getIcon, createOption,withWindowing, digitableValue, windowingRef},ref) => {
+  const [positionInfo, positionPlaceholder] = usePositioning(ref, {fill:true,on:options.length})
+  const getMenuHeight = (options) => Math.min((options.length * ITEM_HEIGHT) + 9, 300 - ((footerOptions?.length || 0) * ITEM_HEIGHT) - (footerOptions?.length ? 7 : 0))
+  const slot = 'Popup'
+  const slotName = useMemo(() => getDialogLayersSize() === 0 ? slot : (slot + '-' + (getDialogLayersSize() - 1)), [])
+
+  return <>
+    {positionPlaceholder}
+    <Fill name={slotName}>
+      <ComboboxMenu
+        {...positionInfo}
+        ref={ref}
+        withWindowing={withWindowing}
+        withoutIcons={!getIcon}
+      >
+        {withWindowing
+         ? <FixedSizeList
+           ref={windowingRef}
+           height={getMenuHeight(options)}
+           itemCount={options.length}
+           itemSize={ITEM_HEIGHT}
+           width="100%"
+         >{({index, style}) =>
+            createOption(options[index],index,{style})
+          }</FixedSizeList>
+         : options.map(createOption).filter(Boolean)
+        }
+        {
+          footerOptions &&
+          <WithIsSticky intersection>{(sentinel,isSticky) => <>
+            <FooterOptionsContainer isSticky={isSticky} className="JS-list-footer" hasWindoning={withWindowing}>
+              {footerOptions.map(createOption)}
+            </FooterOptionsContainer>
+            {sentinel("margin-top:-3px;")}
+          </>}</WithIsSticky>
+        }
+      </ComboboxMenu>
+    </Fill>
+  </>
+})

package/src/ComboboxWithCustom.jsx

@@ -0,0 +1,68 @@
+import React, {useLayoutEffect} from 'react'
+import {usePrevious, useToggle} from '@startlibs/core'
+import {callIfFunction} from '@startlibs/utils'
+import {Combobox} from './Combobox'
+import {useFormMeta, useFormValue} from './Form'
+import {TextInput} from './TextInput'
+import _ from "lodash/fp";
+
+//shouldRecenter?
+export const ComboboxWithCustom = ({options,label,constraint, path, getLabel = _.identity, getBoxLabelAs = getLabel, valueOnCustom = _.identity,customIndex = options.length - 1, tabIndex = 1, ...extra}) => {
+  const customValue = useToggle()
+  const [value,setValue] = useFormValue(path)
+  const [meta,setMeta] = useFormMeta(["onCustom"].concat(_.toPath(path)))
+  const prevTitle = usePrevious(value)
+
+  useLayoutEffect(() => {
+    if (value === options[customIndex]) {
+      setMeta(true)
+      customValue.openWith('')
+      setValue(callIfFunction(valueOnCustom,prevTitle))
+    }
+  }, [value])
+
+  const updateCustomValue = e => {
+    if (e.type === 'keydown' && e.keyCode === 27) {
+      e.stopPropagation()
+      setMeta(false)
+      customValue.close()
+    } else if (
+      (e.type === 'keydown' && e.keyCode === 13) ||
+      e.type === 'blur'
+    ) {
+      e.stopPropagation()
+      if (customValue.isOpen) {
+        setValue(customValue.isOpen)
+      }
+      setMeta(false)
+      customValue.close()
+    }
+  }
+
+  const titleOptions = (!value || options.indexOf(value) >= 0) ? options : [value].concat(options)
+  return customValue.isOpen !== false ?
+    <TextInput
+      label={label}
+      tabIndex={tabIndex}
+      autoFocus
+      value={customValue.isOpen}
+      setValue={customValue.openWith}
+      maxLength={70}
+      onBlur={updateCustomValue}
+      onKeyPress={updateCustomValue}
+      onKeyDown={updateCustomValue}
+      constraint={constraint}
+      raw
+      {...extra}
+    /> :
+    <Combobox
+      getBoxLabelAs={v => v === options[customIndex] ? '' : getBoxLabelAs(v)}
+      label={label}
+      path={path}
+      onChange={setValue}
+      options={titleOptions}
+      tabIndex={tabIndex}
+      getLabel={getLabel}
+      {...extra}
+    />
+}