@broxus/react-uikit 0.1.0

package/dist/esm/components/Control/Select/index.js

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import RcSelect, { OptGroup, Option } from 'rc-select';
+import { Icon } from '../../Icon';
+import { Spinner } from '../../Spinner';
+import './index.scss';
+const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
+function InternalSelect(props, ref) {
+    const { className, listHeight = 256, listItemHeight = 24, showArrow = true, showSearch = false, onPressEnter, ...restProps } = props;
+    const innerRef = React.useRef(null);
+    const labelRef = React.useRef(null);
+    const [focused, setFocused] = React.useState(false);
+    const [internalOpen, setInternalOpen] = React.useState(restProps.defaultOpen || restProps.open || false);
+    const [offsetY, setOffsetY] = React.useState(2);
+    React.useImperativeHandle(ref, () => ({
+        blur() {
+            innerRef.current?.blur();
+        },
+        focus() {
+            innerRef.current?.focus();
+        },
+        scrollTo() {
+            return innerRef.current?.scrollTo;
+        },
+    }));
+    const onBlur = event => {
+        setFocused(false);
+        setInternalOpen(false);
+        restProps.onBlur?.(event);
+    };
+    const onFocus = event => {
+        setFocused(true);
+        restProps.onFocus?.(event);
+    };
+    const onKeyDown = event => {
+        if (event.keyCode === 13) {
+            setInternalOpen(true);
+            onPressEnter?.(event);
+        }
+        else if (event.keyCode === 32) {
+            setInternalOpen(true);
+        }
+        restProps.onKeyDown?.(event);
+    };
+    const onDropdownVisibleChange = (open) => {
+        setInternalOpen(open);
+        restProps.onDropdownVisibleChange?.(open);
+    };
+    const onClickIcon = () => {
+        setInternalOpen(true);
+    };
+    React.useEffect(() => {
+        setInternalOpen(restProps.defaultOpen || restProps.open || internalOpen);
+    }, [restProps.open, restProps.defaultOpen]);
+    React.useEffect(() => {
+        const select = labelRef.current?.firstElementChild;
+        if (select) {
+            let offset = parseInt(getComputedStyle?.(select).getPropertyValue('border-left-width'), 10);
+            if (restProps.direction !== 'rtl') {
+                offset *= -1;
+            }
+            setOffsetY(offset);
+        }
+    }, [labelRef.current, restProps.direction]);
+    const rootPrefixCls = 'uk';
+    const prefixCls = `${rootPrefixCls}-select`;
+    const mode = React.useMemo(() => {
+        const { mode: m } = restProps;
+        if (m === 'combobox') {
+            return undefined;
+        }
+        if (m === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
+            return 'combobox';
+        }
+        return m;
+    }, [restProps.mode]);
+    const wrapperClasses = React.useMemo(() => classNames([
+        'uk-control',
+        'uk-control-select',
+    ], {
+        [`uk-control-${restProps.size}`]: restProps.size,
+        'uk-control-rtl': restProps.direction === 'rtl',
+        'uk-focused': focused,
+        // eslint-disable-next-line sort-keys
+        'uk-disabled': restProps.disabled,
+    }, className), [className, focused, restProps.direction, restProps.disabled, restProps.size]);
+    const inputProps = React.useMemo(() => {
+        // Arrow or loading icon
+        let inputIcon;
+        if (restProps.loading) {
+            inputIcon = (React.createElement(Spinner, { key: "spinner", ratio: 0.9 }));
+        }
+        else if (showArrow) {
+            const isMultiple = mode === 'multiple' || mode === 'tags';
+            if (isMultiple) {
+                inputIcon = (React.createElement(Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon }));
+            }
+            else if (showSearch && internalOpen) {
+                inputIcon = (React.createElement(Icon, { key: "manage_search", icon: "manage_search" }));
+            }
+            else {
+                inputIcon = internalOpen
+                    ? (React.createElement(Icon, { key: "expand_less", icon: "expand_less" })) : (React.createElement(Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon }));
+            }
+        }
+        // Not found content
+        let mergedNotFound;
+        if (restProps.notFoundContent !== undefined) {
+            mergedNotFound = restProps.notFoundContent;
+        }
+        else if (mode === 'combobox') {
+            mergedNotFound = null;
+        }
+        else {
+            // mergedNotFound = renderEmpty('Select')
+        }
+        return {
+            clearIcon: React.createElement(Icon, { icon: "clear" }),
+            dropdownMatchSelectWidth: true,
+            inputIcon,
+            listHeight,
+            listItemHeight,
+            menuItemSelectedIcon: React.createElement(Icon, { icon: "check" }),
+            open: internalOpen,
+            prefixCls,
+            removeIcon: React.createElement(Icon, { icon: "clear" }),
+            showArrow,
+            showSearch,
+            transitionName: 'uk-motion-slide-up',
+            ...restProps,
+            dropdownClassName: classNames(restProps.dropdownClassName, {
+                [`${prefixCls}-dropdown-rtl`]: restProps.direction === 'rtl',
+            }),
+            notFoundContent: mergedNotFound,
+            onBlur,
+            onDropdownVisibleChange,
+            onFocus,
+            onKeyDown,
+        };
+    }, [restProps, internalOpen, mode]);
+    return (React.createElement("label", { ref: labelRef, className: wrapperClasses, htmlFor: restProps.id },
+        React.createElement(RcSelect, { ref: innerRef, ...inputProps, dropdownAlign: {
+                offset: [offsetY, 5],
+            }, mode: mode })));
+}
+const ForwardedSelect = React.forwardRef(InternalSelect);
+export const Select = ForwardedSelect;
+Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
+Select.Option = Option;
+Select.OptGroup = OptGroup;