react-animated-select 0.5.2 → 0.6.0

package/src/selectJSX.jsx

@@ -1,265 +0,0 @@
-import {memo, useCallback, useEffect, useRef} from 'react'
-import {SelectContext} from './selectContext'
-import Options from './options'
-import SlideLeft from './slideLeft'
-import Animated from './animated'
-import {TransitionGroup} from 'react-transition-group'
-
-const SelectedItem = memo(({element, index, remove, renderIcon, DelIcon, normalizedOptions}) => {
-    let label = null
-
-    if (element?.jsx) {
-        label = element.jsx
-    } else if (element?.name) {
-        label = element.name
-    } else if (element?.raw !== undefined) {
-        const recovered = normalizedOptions.find(o =>
-            o.raw === element.raw ||
-            o.original === element.raw ||
-            o.userId === element.raw
-        )
-        if (recovered) {
-            label = recovered.jsx ?? recovered.name
-        }
-    }
-
-    if (label == null) {
-        label = typeof element === 'object' 
-            ? (element.label ?? element.name ?? element.value ?? 'Selected item') 
-            : String(element)
-    }
-
-    const handleDelete = useCallback((e) => {
-        e.stopPropagation()
-        e.preventDefault()
-        remove(element.id)
-    }, [element.id, remove])
-
-    const preventFocus = useCallback((e) => {
-        e.stopPropagation()
-        e.preventDefault()
-    }, [])
-
-    return (
-        <div className='rac-multiple-selected-option'>
-            {label} 
-            {renderIcon(DelIcon, {onClick: handleDelete, onMouseDown: preventFocus})}
-        </div>
-    )
-})
-
-const SelectJSX = memo(({
-    selectRef,
-    selectId,
-    removeOption, 
-    renderOptions,
-    selected,
-    selectedIDs,
-    setSelectedIds,
-    normalizedOptions,
-    title,
-    visibility,
-    active,
-    hasOptions,
-    hasActualValue,
-    optionsClassName,
-    selectedText,
-
-    disabled,
-    loading,
-    error,
-    
-    registerOption,
-    unregisterOption,
-    handleBlur,
-    handleFocus,
-    handleToggle,
-    handleKeyDown,
-    handleListScroll,
-    setAnimationFinished,
-    clear,
-    
-    children,
-    placeholder,
-    className,
-    style,
-    duration,
-    easing,
-    offset,
-    animateOpacity,
-    unmount,
-    ArrowIcon,
-    ClearIcon,
-    DelIcon,
-    renderIcon,
-    hasMore,
-    loadButton
-}) => {
-
-    const internalRef = useRef(null)
-
-    useEffect(() => {
-        if (selectRef) {
-            if (typeof selectRef === 'function') selectRef(internalRef.current)
-            else selectRef.current = internalRef.current
-        }
-    }, [selectRef])
-
-    const remove = useCallback((id) => {
-        if (removeOption) {
-            removeOption(id)
-        } else {
-            setSelectedIds(prev => prev.filter(o => o.id !== id))
-        }
-    }, [removeOption, setSelectedIds])
-
-    const renderSelectIDs = selectedIDs?.map((element, index) => (
-        <Animated
-            key={element.id ?? index}
-            duration={duration}
-            widthMode
-        >
-            <SelectedItem 
-                key={element.id ?? index}
-                element={element}
-                index={index}
-                remove={remove}
-                renderIcon={renderIcon}
-                DelIcon={DelIcon}
-                normalizedOptions={normalizedOptions}
-            />
-        </Animated>
-    ))
-
-    return (
-        <SelectContext.Provider
-            value={{registerOption, unregisterOption}}
-        >
-            {children}
-            <div
-                ref={internalRef}
-                style={{
-                    ...style,
-                    '--rac-duration': `${duration}ms`,
-                    '--rac-duration-fast': 'calc(var(--rac-duration) * 0.5)',
-                    '--rac-duration-base': 'var(--rac-duration)',
-                    '--rac-duration-slow': 'calc(var(--rac-duration) * 1.3)'
-                }}
-                className={
-                    `rac-select
-                    ${className}
-                    ${(!hasOptions || disabled) ? 'rac-disabled-style' : ''}
-                    ${loading ? 'rac-loading-style' : ''}
-                    ${error ? 'rac-error-style' : ''}`}
-                tabIndex={active ? 0 : -1}
-                role='combobox'
-                aria-haspopup='listbox'
-                aria-expanded={visibility}
-                aria-controls={`${selectId}-listbox`}
-                aria-label={placeholder}
-                aria-disabled={disabled || !hasOptions}
-                {...(active && {
-                    onBlur: handleBlur,
-                    onFocus: handleFocus,
-                    onClick: handleToggle,
-                    onKeyDown: handleKeyDown
-                })}
-            >
-                <div
-                    className={
-                        `rac-select-title
-                                ${(!error && !loading && selected?.type === 'boolean')
-                            ?
-                                (selected.raw ? 'rac-true-option' : 'rac-false-option')
-                            : ''}
-                    `}
-                >
-                    <TransitionGroup component={null}>
-                        {selectedIDs?.length && !selectedText ? (
-                            renderSelectIDs
-                        ) : (
-                            <Animated
-                                key={title}
-                                duration={duration}
-                                widthMode
-                            >
-                                <span className='rac-title-text'>{title}</span>
-                                
-                                <SlideLeft visibility={loading && !error} duration={duration}>
-                                    <span className='rac-loading-dots'><i/><i/><i/></span>
-                                </SlideLeft>
-                            </Animated>
-                        )}
-                    </TransitionGroup>
-                </div>
-
-                <div className='rac-select-buttons'>
-                    <SlideLeft
-                        visibility={hasActualValue && hasOptions && !disabled && !loading && !error}
-                        duration={duration}
-                        style={{display: 'grid'}}
-                    >
-                        {renderIcon(ClearIcon, { 
-                            className: 'rac-select-cancel', 
-                            onMouseDown: e => {
-                                e.preventDefault()
-                                e.stopPropagation()
-                            }, 
-                            onClick: clear 
-                        })}
-                    </SlideLeft>
-                    <SlideLeft
-                        visibility={active}
-                        duration={duration}
-                        style={{display: 'grid'}}
-                    >
-                        <span
-                            className={`rac-select-arrow-wrapper ${visibility ? '--open' : ''}`}
-                        >
-                            {renderIcon(ArrowIcon, {
-                                className: 'rac-select-arrow-wrapper'
-                            })}
-                        </span>
-                    </SlideLeft>
-                </div>
-
-                <Options
-                    className={optionsClassName}
-                    visibility={visibility}
-                    selectRef={selectRef}
-                    onAnimationDone={() => setAnimationFinished(true)}
-                    unmount={unmount}
-                    duration={duration}
-                    easing={easing}
-                    offset={offset}
-                    animateOpacity={animateOpacity}
-                    style={{
-                        ...style,
-                        '--rac-duration': `${duration}ms`
-                    }}
-                >
-                    <div
-                        onScroll={handleListScroll}
-                        tabIndex='-1'
-                        className='rac-select-list'
-                        role='listbox'
-                        aria-label='Options'
-                    >
-                        {renderOptions}
-                        {!loadButton && hasMore && (
-                            <div
-                                className='rac-select-option rac-disabled-option rac-loading-option'
-                                onClick={e => e.stopPropagation()}
-                            >
-                                <span className='rac-loading-option-title'>Loading</span>
-                                <span className='rac-loading-dots'><i/><i/><i/></span>
-                            </div>
-                        )}
-                    </div>
-                </Options>
-            </div>
-        </SelectContext.Provider>
-    )
-})
-
-export default SelectJSX

package/src/slideDown.jsx

@@ -1,36 +0,0 @@
-import {CSSTransition} from 'react-transition-group'
-import {useRef} from 'react'
-
-function SlideDown({visibility, children, duration = 300}) {
-    const nodeRef = useRef(null)
-
-    return(
-        <CSSTransition
-            in={visibility}
-            timeout={300}
-            classNames='slideDown'
-            unmountOnExit
-            nodeRef={nodeRef}
-            onEnter={() => (nodeRef.current.style.height = '0px')}
-            onEntering={() => (nodeRef.current.style.height = nodeRef.current.scrollHeight + 'px')}
-            onEntered={() => (nodeRef.current.style.height = 'auto')}
-            onExit={() => (nodeRef.current.style.height = nodeRef.current.scrollHeight + 'px')}
-            onExiting={() => (nodeRef.current.style.height = '0px')}
-        >
-            <div
-                ref={nodeRef}
-                style={{
-                    overflow: 'hidden',
-                    transition: `height ${duration}ms ease`,
-                    paddingLeft: '1em'
-                }}
-                className='slideDown-enter-done'
-                tabIndex={-1}
-            >
-                {children}
-            </div>
-        </CSSTransition>
-    )
-}
-
-export default SlideDown

package/src/slideLeft.jsx

@@ -1,41 +0,0 @@
-import {CSSTransition} from 'react-transition-group'
-import {useRef} from 'react'
-
-function SlideLeft({
-    visibility,
-    children,
-    duration = 300,
-    unmount,
-    style
-}) {
-    const nodeRef = useRef(null)
-
-    return (
-        <CSSTransition
-            in={visibility}
-            timeout={duration}
-            classNames='rac-slide-left'
-            unmountOnExit
-            nodeRef={nodeRef}
-            onEnter={() => (nodeRef.current.style.width = '0px')}
-            onEntering={() => (nodeRef.current.style.width = nodeRef.current.scrollWidth + 'px')}
-            onEntered={() => (nodeRef.current.style.width = 'auto')}
-            onExit={() => (nodeRef.current.style.width = nodeRef.current.scrollWidth + 'px')}
-            onExiting={() => (nodeRef.current.style.width = '0px')}
-            onExited={() => unmount?.()}
-        >
-            <div
-                ref={nodeRef}
-                style={{
-                    ...style,
-                    overflow: 'hidden',
-                    transition: `width ${duration}ms ease`
-                }}
-            >
-                {children}
-            </div>
-        </CSSTransition>
-    )
-}
-
-export default SlideLeft

package/src/useSelect.jsx

@@ -1,186 +0,0 @@
-import {useState, useRef, useCallback, useEffect, useMemo} from 'react'
-
-function useSelect({
-    disabled,
-    open,
-    setOpen,
-    options = [],
-    selectOption,
-    selected,
-    multiple,
-    hasMore,
-    loadMore,
-    loadButton,
-    loadButtonText,
-    setLoadingTitle,
-    loadOffset,
-    loadAhead,
-    expandedGroups
-}) {
-    const justFocused = useRef(false)
-    const lastWindowFocusTime = useRef(0)
-    const loadingTriggered = useRef(false)
-    const [highlightedIndex, setHighlightedIndex] = useState(-1)
-
-    // loading state synchronization
-    useEffect(() => {
-        // flag is reset if value of the loadButton or hasMore props has changed
-        loadingTriggered.current = false
-
-        if (loadButton) {
-            setLoadingTitle(loadButtonText)
-        }
-    }, [options.length, hasMore, loadButton, loadButtonText, setLoadingTitle])
-
-    // safely call loadMore prop
-    const safeLoadMore = useCallback(() => {
-        if (!hasMore || loadingTriggered.current) return
-        loadingTriggered.current = true
-        loadMore()
-    }, [hasMore, loadMore])
-
-    // calling a function when scrolling almost to the end;
-    // loadOffset is a prop indicating how many pixels before end loadMore will be called
-    const handleListScroll = useCallback((e) => {
-        if (loadButton || !hasMore || loadingTriggered.current) return
-
-        const {scrollTop, scrollHeight, clientHeight} = e.currentTarget
-        if (scrollHeight - scrollTop <= clientHeight + loadOffset) {
-            safeLoadMore()
-        }
-    }, [loadButton, hasMore, loadOffset, safeLoadMore])
-
-    // call a function when scrolling through options using keys;
-    // loadAhead prop how many options before the end it will be called
-    useEffect(() => {
-        if (!loadButton && open && hasMore && highlightedIndex >= options.length - loadAhead) {
-            safeLoadMore()
-        }
-    }, [highlightedIndex, open, hasMore, options.length, loadAhead, loadButton, safeLoadMore])
-
-    // force refocus blocking if the user exits the browser or the page
-    useEffect(() => {
-        const handleWindowFocus = () => {lastWindowFocusTime.current = Date.now()}
-        window.addEventListener('focus', handleWindowFocus)
-        return () => window.removeEventListener('focus', handleWindowFocus)
-    }, [])
-
-    // set highlighting to the first available option by default unless otherwise selected
-    useEffect(() => {
-        if (!open) {
-            setHighlightedIndex(-1)
-            return
-        }
-
-        // blocking the reset of an index if it is already within the array (exmpl after loading)
-        if (highlightedIndex >= 0 && highlightedIndex < options.length) {
-            if (!options[highlightedIndex] || options[highlightedIndex].hidden || options[highlightedIndex].groupHeader) {
-            } else return
-        }
-
-        let index = -1
-        if (selected) {
-            const firstSelected = multiple ? selected[0] : selected
-            if (firstSelected) {
-                index = options.findIndex(o => o.id === firstSelected.id && !o.disabled && !o.hidden && !o.groupHeader)
-            }
-        }
-        
-        if (index === -1) {
-            index = options.findIndex(o => !o.disabled && !o.hidden && !o.groupHeader)
-        }
-        setHighlightedIndex(index)
-    }, [open, options, selected])
-
-    // find the next available option to switch to using the keyboard
-    const getNextIndex = useCallback((current, direction) => {
-        const isNavigable = (opt) => 
-            opt &&
-            !opt?.groupHeader &&
-            (!opt?.group || expandedGroups?.has(opt?.group)) &&
-            !opt?.disabled &&
-            !opt?.loading
-        const len = options.length
-        if (len === 0) return -1
-
-        let next = current
-        // я не шарю нихуя в математике
-        for (let i = 0; i < len; i++) {
-            next = (next + direction + len) % len
-
-            // if autoloading is active but loadButton is inactive, then infinite scrolling is blocked
-            if (!loadButton && hasMore) {
-                if (direction > 0 && next === 0) return current
-                if (direction < 0 && next === len - 1) return current
-            }
-
-            if (isNavigable(options[next])) return next
-        }
-        return current
-    }, [options, hasMore, loadButton, expandedGroups])
-
-    // closing the selector if focus is lost
-    const handleBlur = useCallback((e) => {
-        const clickedInsidePortal = e.relatedTarget?.closest('.rac-options')
-        
-        if (!e.currentTarget.contains(e.relatedTarget) && !clickedInsidePortal) {
-            setOpen(false)
-        }
-    }, [setOpen])
-
-    // opening the selector when receiving focus
-    const handleFocus = useCallback(() => {
-        if (disabled || document.hidden || (Date.now() - lastWindowFocusTime.current < 100)) return
-        
-        if (!open) {
-            setOpen(true)
-            justFocused.current = true
-            setTimeout(() => {justFocused.current = false}, 200)
-        }
-    }, [disabled, open, setOpen])
-
-    // processing toggle click on select
-    const handleToggle = useCallback((e) => {
-        if (disabled || e.target.closest('.rac-select-cancel') || justFocused.current) return
-        setOpen(!open)
-    }, [disabled, open, setOpen])
-
-    // hotkey processing
-    const handleKeyDown = useCallback((e) => {
-        if (disabled) return
-
-        switch (e.key) {
-            case 'Enter':
-            case ' ':
-                e.preventDefault()
-                if (open) {
-                    if (highlightedIndex !== -1 && options[highlightedIndex]) {
-                        selectOption(options[highlightedIndex], e)
-                    }
-                } else setOpen(true)
-                break
-            case 'Escape':
-                e.preventDefault()
-                setOpen(false)
-                break
-            case 'ArrowDown':
-                e.preventDefault()
-                open ? setHighlightedIndex(prev => getNextIndex(prev, 1)) : setOpen(true)
-                break
-            case 'ArrowUp':
-                e.preventDefault()
-                open ? setHighlightedIndex(prev => getNextIndex(prev, -1)) : setOpen(true)
-                break
-            case 'Tab':
-                if (open) setOpen(false)
-                break
-        }
-    }, [disabled, open, setOpen, highlightedIndex, options, selectOption, getNextIndex])
-
-    return useMemo(() => ({
-        handleBlur, handleFocus, handleToggle, handleKeyDown,
-        highlightedIndex, setHighlightedIndex, handleListScroll
-    }), [handleBlur, handleFocus, handleToggle, handleKeyDown, highlightedIndex, handleListScroll])
-}
-
-export default useSelect