react-animated-select 0.2.9 → 0.3.6

package/src/selectJSX.jsx

@@ -0,0 +1,148 @@
+import {memo} from 'react'
+import {SelectContext} from './selectContext'
+import Options from './options'
+import SlideLeft from './slideLeft'
+
+const SelectJSX = memo(({
+    selectRef,
+    selectId,
+    
+    renderOptions,
+    selected,
+    title,
+    visibility,
+    active,
+    hasOptions,
+    hasActualValue,
+    
+    disabled,
+    loading,
+    error,
+    
+    registerOption,
+    unregisterOption,
+    handleBlur,
+    handleFocus,
+    handleToggle,
+    handleKeyDown,
+    handleListScroll,
+    setAnimationFinished,
+    clear,
+    
+    children,
+    renderedDropdown,
+    placeholder,
+    className,
+    style,
+    duration,
+    easing,
+    offset,
+    animateOpacity,
+    unmount,
+    ArrowIcon,
+    ClearIcon,
+    renderIcon,
+    hasMore,
+    loadButton
+}) => {
+    return (
+        <SelectContext.Provider
+            value={{registerOption, unregisterOption}}
+        >
+            {children}
+            {renderedDropdown}
+            <div
+                ref={selectRef}
+                style={{'--rac-duration': `${duration}ms`, ...style}}
+                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') : ''}`}>
+                    <span className='rac-title-text' key={title}>{title}</span>
+                    <SlideLeft visibility={loading && !error} duration={duration}>
+                        <span className='rac-loading-dots'><i/><i/><i/></span>
+                    </SlideLeft>
+                </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
+                    visibility={visibility}
+                    selectRef={selectRef}
+                    onAnimationDone={() => setAnimationFinished(true)}
+                    unmount={unmount}
+                    duration={duration}
+                    easing={easing}
+                    offset={offset}
+                    animateOpacity={animateOpacity}
+                >
+                    <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

@@ -0,0 +1,36 @@
+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/useSelect.jsx

@@ -1,84 +1,134 @@
-import {useState, useRef, useCallback, useMemo, useEffect} from 'react'
+import {useState, useRef, useCallback, useEffect, useMemo} from 'react'
 
 function useSelect({
     disabled,
-    isOpen,
-    setIsOpen, 
-    options,
+    open,
+    setOpen,
+    options = [],
     selectOption,
-    selected
+    selected,
+    hasMore,
+    loadMore,
+    loadButton,
+    loadButtonText,
+    setLoadingTitle,
+    loadOffset,
+    loadAhead
 }) {
     const justFocused = useRef(false)
     const lastWindowFocusTime = useRef(0)
+    const loadingTriggered = useRef(false)
     const [highlightedIndex, setHighlightedIndex] = useState(-1)
 
+    // loading state synchronization
     useEffect(() => {
-        const handleWindowFocus = () => {
-            lastWindowFocusTime.current = Date.now()
+        // 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 (isOpen) {
-            let index = -1
-            if (selected) {
-                const selectedIndex = options.findIndex(o => o.id === selected.id && !o.disabled)
-                if (selectedIndex >= 0) index = selectedIndex
-            }
-            if (index === -1) {
-                index = options.findIndex(o => !o.disabled)
-            }
-            setHighlightedIndex(index)
-        } else {
+        if (!open) {
             setHighlightedIndex(-1)
+            return
         }
-    }, [isOpen, selected, options])
 
-    const handleBlur = useCallback((e) => {
-        if (e.currentTarget.contains(e.relatedTarget)) return
-        setIsOpen(false)
-    }, [setIsOpen])
+        // blocking the reset of an index if it is already within the array (exmpl after loading)
+        if (highlightedIndex >= 0 && highlightedIndex < options.length) return
 
-    const handleFocus = useCallback(() => {
-        if (disabled) return
+        let index = -1
+        if (selected) {
+            index = options.findIndex(o => o.id === selected.id && !o.disabled)
+        }
         
-        if (document.hidden) return
+        if (index === -1) {
+            index = options.findIndex(o => !o.disabled)
+        }
+        setHighlightedIndex(index)
+    }, [open, options, selected])
 
-        const timeSinceWindowFocus = Date.now() - lastWindowFocusTime.current
-        if (timeSinceWindowFocus < 100) return
+    // find the next available option to switch to using the keyboard
+    const getNextIndex = useCallback((current, direction) => {
+        const isNavigable = (opt) => opt && !opt.disabled && !opt.loading
+        const len = options.length
+        if (len === 0) return -1
 
-        if (!isOpen) {
-            setIsOpen(true)
-            justFocused.current = true
-            setTimeout(() => {
-                justFocused.current = false
-            }, 200)
+        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
         }
-    }, [disabled, isOpen, setIsOpen])
+        return current
+    }, [options, hasMore, loadButton])
 
-    const handleToggle = useCallback((e) => {
-        if (disabled) return
-        if (e.target.closest('.rac-select-cancel')) return
-        if (justFocused.current) return
+    // closing the selector if focus is lost
+    const handleBlur = useCallback((e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setOpen(false)
+    }, [setOpen])
 
-        setIsOpen(!isOpen)
-    }, [disabled, isOpen, setIsOpen])
+    // 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])
 
-    const getNextIndex = (current, direction) => {
-        if (options.every(o => o.disabled)) return -1
-        let next = current
-        let loops = 0
-        do {
-            next += direction
-            if (next < 0) next = options.length - 1
-            if (next >= options.length) next = 0
-            loops++
-        } while (options[next]?.disabled && loops <= options.length)
-        return next
-    }
+    // 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
 
@@ -86,50 +136,34 @@ function useSelect({
             case 'Enter':
             case ' ':
                 e.preventDefault()
-                if (isOpen) {
+                if (open) {
                     if (highlightedIndex !== -1 && options[highlightedIndex]) {
                         selectOption(options[highlightedIndex], e)
                     }
-                } else {
-                    setIsOpen(true)
-                }
+                } else setOpen(true)
                 break
             case 'Escape':
                 e.preventDefault()
-                setIsOpen(false)
+                setOpen(false)
                 break
             case 'ArrowDown':
                 e.preventDefault()
-                if (!isOpen) {
-                    setIsOpen(true)
-                } else {
-                    setHighlightedIndex(prev => getNextIndex(prev, 1))
-                }
+                open ? setHighlightedIndex(prev => getNextIndex(prev, 1)) : setOpen(true)
                 break
             case 'ArrowUp':
                 e.preventDefault()
-                if (!isOpen) {
-                    setIsOpen(true)
-                } else {
-                    setHighlightedIndex(prev => getNextIndex(prev, -1))
-                }
+                open ? setHighlightedIndex(prev => getNextIndex(prev, -1)) : setOpen(true)
                 break
             case 'Tab':
-                if (isOpen) setIsOpen(false)
-                break
-            default:
+                if (open) setOpen(false)
                 break
         }
-    }, [disabled, isOpen, setIsOpen, highlightedIndex, options, selectOption])
+    }, [disabled, open, setOpen, highlightedIndex, options, selectOption, getNextIndex])
 
     return useMemo(() => ({
-        handleBlur, 
-        handleFocus, 
-        handleToggle, 
-        handleKeyDown, 
-        highlightedIndex, 
-        setHighlightedIndex
-    }), [handleBlur, handleFocus, handleToggle, handleKeyDown, highlightedIndex, setHighlightedIndex])
+        handleBlur, handleFocus, handleToggle, handleKeyDown,
+        highlightedIndex, setHighlightedIndex, handleListScroll
+    }), [handleBlur, handleFocus, handleToggle, handleKeyDown, highlightedIndex, handleListScroll])
 }
 
 export default useSelect