@broxus/react-uikit 0.1.0

package/dist/esm/components/Drawer/index.js

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import { tuple } from '@broxus/js-utils';
+import classNames from 'classnames';
+import RcDrawer from 'rc-drawer';
+import { addModalMode, removeModalMode, useForceUpdate } from '../../utils';
+import './index.scss';
+const DrawerContext = React.createContext(null);
+const PlacementTypes = tuple('top', 'right', 'bottom', 'left');
+const SizeTypes = tuple('default', 'large');
+const defaultPushState = { distance: 180 };
+export const Drawer = React.forwardRef((props, ref) => {
+    const { animation, children, className, defaultOpen, destroyOnClose, direction, duration = 'var(--drawer-transition-duration)', ease = 'var(--ease-in-out-circ)', keyboard = true, level = null, maskClosable = true, open, placement = 'right', prefixCls = 'uk-drawer', push = defaultPushState, showMask = true, size = 'default', style, trigger, wrapperClassName, zIndex, ...restProps } = props;
+    const forceUpdate = useForceUpdate();
+    const parentDrawer = React.useContext(DrawerContext);
+    const destroyClose = React.useRef(false);
+    const [internalPush, setPush] = React.useState(false);
+    const [internalOpen, setOpen] = React.useState(defaultOpen);
+    // eslint-disable-next-line no-param-reassign
+    const mergedOpen = open === undefined ? internalOpen : open;
+    React.useEffect(() => {
+        // fix: delete drawer in child and re-render, no push started.
+        // <Drawer>{show && <Drawer />}</Drawer>
+        if (mergedOpen && parentDrawer) {
+            parentDrawer.push();
+        }
+        return () => {
+            if (parentDrawer) {
+                parentDrawer.pull();
+                // parentDrawer = null
+            }
+        };
+    }, []);
+    React.useEffect(() => {
+        if (parentDrawer) {
+            if (mergedOpen) {
+                parentDrawer.push();
+                forceUpdate();
+            }
+            else {
+                parentDrawer.pull();
+                forceUpdate();
+            }
+        }
+    }, [mergedOpen]);
+    const drawerClassName = React.useMemo(() => classNames({
+        [`${prefixCls}-${size}`]: size !== undefined,
+        [`${prefixCls}-${animation}`]: animation !== undefined,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+        'no-mask': !showMask,
+    }, className), [prefixCls, size, animation, showMask, direction, className]);
+    const drawerWrapperClassName = React.useMemo(() => classNames(`${prefixCls}-container`, {
+        [`${prefixCls}-${animation}-container`]: animation !== undefined,
+    }, wrapperClassName), [prefixCls, animation, wrapperClassName]);
+    const operations = React.useMemo(() => ({
+        pull() {
+            if (push) {
+                setPush(false);
+                forceUpdate();
+            }
+        },
+        push() {
+            if (push) {
+                setPush(true);
+                forceUpdate();
+            }
+        },
+    }), [push]);
+    React.useImperativeHandle(ref, () => operations, [operations]);
+    const isDestroyOnClose = destroyOnClose && !mergedOpen;
+    const afterVisibleChange = (visible) => {
+        restProps.afterVisibleChange?.(visible);
+        if (visible) {
+            addModalMode();
+        }
+        else {
+            removeModalMode();
+        }
+    };
+    const getRcDrawerStyle = () => {
+        // get drawer push width or height
+        const getPushTransform = (_placement) => {
+            let distance;
+            // noinspection SuspiciousTypeOfGuard
+            if (typeof push === 'boolean') {
+                distance = push ? defaultPushState.distance : 0;
+            }
+            else {
+                distance = push?.distance;
+            }
+            distance = parseFloat(String(distance || 0));
+            if (_placement === 'left' || _placement === 'right') {
+                return `translateX(${_placement === 'left' ? distance : -distance}px)`;
+            }
+            if (_placement === 'top' || _placement === 'bottom') {
+                return `translateY(${_placement === 'top' ? distance : -distance}px)`;
+            }
+            return '';
+        };
+        return {
+            transform: internalPush ? getPushTransform(placement) : undefined,
+            zIndex,
+            ...style,
+        };
+    };
+    const collapse = () => {
+        setOpen(false);
+    };
+    const expand = () => {
+        setOpen(true);
+    };
+    const onClose = (event) => {
+        setOpen(false);
+        restProps.onClose?.(event);
+    };
+    const onDestroyTransitionEnd = () => {
+        if (!isDestroyOnClose) {
+            return;
+        }
+        if (!mergedOpen) {
+            destroyClose.current = true;
+            forceUpdate();
+        }
+    };
+    const renderBody = () => {
+        if (destroyClose.current && !mergedOpen) {
+            return null;
+        }
+        destroyClose.current = false;
+        const containerStyle = {};
+        if (isDestroyOnClose) {
+            // Increase the opacity transition, delete children after closing.
+            containerStyle.opacity = 0;
+            containerStyle.transition = 'opacity var(--transition-duration)';
+        }
+        return (React.createElement("div", { className: `${prefixCls}-body-wrapper`, style: containerStyle, onTransitionEnd: onDestroyTransitionEnd },
+            React.createElement("div", { className: `${prefixCls}-body` }, children)));
+    };
+    return (React.createElement(DrawerContext.Provider, { value: operations },
+        trigger?.({ collapse, expand, isOpen: !!mergedOpen }),
+        React.createElement(RcDrawer, { ...{
+                afterVisibleChange,
+                children,
+                className: drawerClassName,
+                defaultOpen,
+                duration,
+                ease,
+                handler: false,
+                keyboard,
+                level: (animation !== undefined && level == null) ? 'all' : level,
+                maskClosable,
+                open: mergedOpen,
+                placement,
+                prefixCls,
+                showMask,
+                style: getRcDrawerStyle(),
+                wrapperClassName: drawerWrapperClassName,
+                ...restProps,
+                onClose,
+            } }, renderBody())));
+});

package/dist/esm/components/Drawer/index.scss

@@ -0,0 +1,287 @@
+// Name:            Drawer
+// Description:     Component to create an drawer sidebar
+//
+// Component:       `uk-drawer`
+//
+// Sub-objects:     `uk-drawer-bar`
+//                  `uk-drawer-container`
+//                  `uk-drawer-page`
+//
+// Adopted:         `uk-drawer-close`
+//
+// Modifiers:       `uk-drawer-flip`
+//                  `uk-drawer-bar-animation`
+//                  `uk-drawer-reveal`
+//                  `uk-drawer-overlay`
+//                  `uk-drawer-container-animation`
+//
+// States:          `uk-open`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Drawer
+ ========================================================================== */
+
+.uk-drawer {
+    height: 100%;
+    position: fixed;
+    transition: height 0s ease var(--drawer-transition-duration),
+        transform var(--drawer-transition-duration) var(--ease-in-out-circ),
+        width 0s ease var(--drawer-transition-duration);
+    width: 0;
+    z-index: var(--drawer-z-index);
+    @if mixin-exists(hook-drawer) {
+        @include hook-drawer;
+    }
+}
+
+
+// Animation & Transition
+// ========================================================================
+
+.uk-drawer-push-container,
+.uk-drawer-reveal-container {
+    transform: none !important;
+}
+
+.uk-drawer > * {
+    transition: box-shadow var(--drawer-transition-duration) var(--ease-in-out-circ),
+        transform var(--drawer-transition-duration) var(--ease-in-out-circ);
+}
+
+/* Reveal animation */
+.uk-drawer-reveal:not(.uk-drawer-open) .uk-drawer-content-wrapper {
+    transform: none !important;
+    width: 0;
+}
+
+.uk-drawer-reveal .uk-drawer-content-wrapper {
+    overflow: hidden;
+    transition: width var(--drawer-transition-duration) var(--ease-in-out-circ);
+}
+
+.uk-drawer-reveal .uk-drawer-content {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+.uk-drawer-reveal.uk-drawer-right .uk-drawer-content {
+    left: auto;
+    right: 0;
+}
+
+.uk-drawer-reveal.uk-drawer-left .uk-drawer-content,
+.uk-drawer-reveal.uk-drawer-right .uk-drawer-content {
+    width: var(--drawer-width);
+}
+
+.uk-drawer-reveal.uk-drawer-left.uk-drawer-large .uk-drawer-content,
+.uk-drawer-reveal.uk-drawer-right.uk-drawer-large .uk-drawer-content {
+    width: var(--drawer-large-width);
+}
+
+
+// Content
+// ========================================================================
+
+.uk-drawer-content-wrapper {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    @if mixin-exists(hook-drawer-content-wrapper) {
+        @include hook-drawer-content-wrapper;
+    }
+}
+
+.uk-drawer-content {
+    background-clip: padding-box;
+    background-color: var(--drawer-content-background);
+    border: 0 none;
+    height: 100%;
+    outline: 0 none;
+    overflow: visible;
+    position: relative;
+    width: 100%;
+    z-index: 1;
+    @if mixin-exists(hook-drawer-content) {
+        @include hook-drawer-content;
+    }
+}
+
+
+// Body
+// ========================================================================
+
+.uk-drawer-body-wrapper {
+    display: flex;
+    flex-flow: column nowrap;
+    height: 100%;
+    width: 100%;
+    @if mixin-exists(hook-drawer-body-wrapper) {
+        @include hook-drawer-body-wrapper;
+    }
+}
+
+.uk-drawer-body {
+    display: flex;
+    flex-grow: 1;
+    overflow: auto;
+    padding: 0;
+    word-wrap: break-word;
+    @if mixin-exists(hook-drawer-body) {
+        @include hook-drawer-body;
+    }
+}
+
+
+// Side
+// ========================================================================
+
+/*
+ * Left and Right Placement
+ */
+.uk-drawer-left,
+.uk-drawer-right {
+    height: 100%;
+    top: 0;
+    width: 0;
+}
+
+// Content wrapper
+.uk-drawer-left,
+.uk-drawer-left .uk-drawer-content-wrapper {
+    left: 0;
+}
+
+.uk-drawer-right,
+.uk-drawer-right .uk-drawer-content-wrapper {
+    right: 0;
+}
+
+.uk-drawer-left .uk-drawer-content-wrapper,
+.uk-drawer-right .uk-drawer-content-wrapper {
+    height: 100%;
+}
+
+// Open state
+.uk-drawer-left.uk-drawer-open,
+.uk-drawer-right.uk-drawer-open {
+    transition: transform var(--drawer-transition-duration) var(--ease-in-out-circ);
+    width: 100%;
+}
+
+/*
+ * Top an Bottom Placement
+ */
+.uk-drawer-top,
+.uk-drawer-bottom {
+    height: 0;
+    left: 0;
+    width: 100%;
+}
+
+// Content wrapper
+.uk-drawer-top,
+.uk-drawer-top .uk-drawer-content-wrapper {
+    top: 0;
+}
+
+.uk-drawer-bottom,
+.uk-drawer-bottom .uk-drawer-content-wrapper {
+    bottom: 0;
+}
+
+.uk-drawer-top .uk-drawer-content-wrapper,
+.uk-drawer-bottom .uk-drawer-content-wrapper {
+    width: 100%;
+}
+
+// Open state
+.uk-drawer-top.uk-drawer-open,
+.uk-drawer-bottom.uk-drawer-open {
+    height: 100%;
+    transition: transform var(--drawer-transition-duration) var(--ease-in-out-circ);
+}
+
+
+// Size
+// ========================================================================
+
+.uk-drawer-default.uk-drawer-left .uk-drawer-content-wrapper,
+.uk-drawer-default.uk-drawer-right .uk-drawer-content-wrapper {
+    max-width: 100vw;
+    width: var(--drawer-width);
+}
+
+.uk-drawer-large.uk-drawer-left .uk-drawer-content-wrapper,
+.uk-drawer-large.uk-drawer-right .uk-drawer-content-wrapper {
+    max-width: 100vw;
+    width: var(--drawer-large-width);
+}
+
+.uk-drawer-default.uk-drawer-top .uk-drawer-content-wrapper,
+.uk-drawer-default.uk-drawer-bottom .uk-drawer-content-wrapper {
+    height: var(--drawer-height);
+    max-height: 100vh;
+}
+
+.uk-drawer-large.uk-drawer-top .uk-drawer-content-wrapper,
+.uk-drawer-large.uk-drawer-bottom .uk-drawer-content-wrapper {
+    height: var(--drawer-large-height);
+    max-height: 100vh;
+}
+
+
+// Mask
+// ========================================================================
+
+.uk-drawer-mask {
+    animation: uk-motion-fade var(--drawer-transition-duration) var(--ease-in-out-circ);
+    background-color: var(--drawer-mask-background);
+    height: 0;
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    transition: height 0s ease var(--drawer-transition-duration), opacity var(--drawer-transition-duration) linear;
+    width: 100%;
+    @if mixin-exists(hook-drawer-mask) {
+        @include hook-drawer-mask;
+    }
+}
+
+.uk-drawer-open .uk-drawer-mask {
+    height: 100%;
+    opacity: 1;
+    pointer-events: auto;
+    transition: opacity var(--drawer-transition-duration) linear;
+    @if mixin-exists(hook-drawer-mask-open) {
+        @include hook-drawer-mask-open;
+    }
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --drawer-content-background: var(--global-background);
+    --drawer-height: 360px;
+    --drawer-large-height: 768px;
+    --drawer-width: 360px;
+    --drawer-large-width: 768px;
+    --drawer-mask-background: #{$drawer-mask-background};
+    --drawer-z-index: calc(var(--global-z-index) + 30);
+    --drawer-transition-duration: var(--transition-medium-fast-duration);
+}

package/dist/esm/components/Drop/index.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { TriggerProps } from 'rc-trigger';
+import type { ActionType, AlignType, AnimationType, BuildInPlacements } from 'rc-trigger/lib/interface';
+import './index.scss';
+export interface DropProps extends Pick<TriggerProps, 'children' | 'getPopupContainer' | 'mouseEnterDelay' | 'mouseLeaveDelay'> {
+    align?: AlignType;
+    alignPoint?: boolean;
+    animation?: AnimationType;
+    arrow?: boolean;
+    hideAction?: ActionType[];
+    minOverlayWidthMatchTrigger?: boolean;
+    openClassName?: string;
+    overlay?: (() => React.ReactElement) | React.ReactElement;
+    overlayClassName?: string;
+    overlayStyle?: React.CSSProperties;
+    placement?: string;
+    placements?: BuildInPlacements;
+    prefixCls?: string;
+    showAction?: ActionType[];
+    transitionName?: string;
+    trigger?: ActionType | ActionType[];
+    visible?: boolean;
+    onOverlayClick?: (e: Event) => void;
+    onVisibleChange?: (visible: boolean) => void;
+}
+export declare const Drop: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<unknown>>;

package/dist/esm/components/Drop/index.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import Trigger from 'rc-trigger';
+import Placements from './placements';
+import './index.scss';
+export const Drop = React.forwardRef((props, ref) => {
+    const { align, alignPoint, animation, arrow = false, children, getPopupContainer, hideAction, minOverlayWidthMatchTrigger, overlay, overlayClassName, overlayStyle, prefixCls = 'uk-drop', placement = 'bottom-left', placements = Placements, showAction, transitionName = 'uk-motion-slide-up', trigger = ['hover'], visible, onOverlayClick, onVisibleChange, ...restProps } = props;
+    const triggerRef = React.useRef(null);
+    const [triggerVisible, setTriggerVisible] = React.useState();
+    const mergedVisible = 'visible' in restProps ? visible : triggerVisible;
+    const onPopupVisibleChange = (value) => {
+        setTriggerVisible(value);
+        onVisibleChange?.(value);
+    };
+    const getOverlayElement = () => {
+        if (typeof overlay === 'function') {
+            return overlay();
+        }
+        return overlay;
+    };
+    const getDropElement = () => (React.createElement(React.Fragment, null,
+        arrow && React.createElement("div", { className: `${prefixCls}-arrow` }),
+        React.cloneElement(getOverlayElement(), {
+            onClick: onOverlayClick,
+        })));
+    const getDropElementOrLambda = () => {
+        if (typeof overlay === 'function') {
+            return getDropElement;
+        }
+        return getDropElement();
+    };
+    const getMinOverlayWidthMatchTrigger = () => {
+        if (minOverlayWidthMatchTrigger !== undefined) {
+            return minOverlayWidthMatchTrigger;
+        }
+        return !alignPoint;
+    };
+    const renderChildren = () => {
+        const childrenProps = children.props ? children.props : {};
+        const childClassName = classNames(childrenProps.className, 'uk-open');
+        return triggerVisible && children
+            ? React.cloneElement(children, {
+                className: childClassName,
+            })
+            : children;
+    };
+    React.useImperativeHandle(ref, () => triggerRef.current);
+    let triggerHideAction = hideAction;
+    if (!triggerHideAction && trigger.indexOf('contextMenu') > -1) {
+        triggerHideAction = ['click'];
+    }
+    return (React.createElement(Trigger, { ref: triggerRef, ...restProps, action: trigger, builtinPlacements: placements, getPopupContainer: getPopupContainer, hideAction: triggerHideAction || [], popup: getDropElementOrLambda(), popupAlign: align, popupAnimation: animation, popupClassName: classNames(overlayClassName, {
+            [`${prefixCls}-show-arrow`]: arrow,
+        }), popupPlacement: placement, popupStyle: overlayStyle, popupTransitionName: transitionName, popupVisible: mergedVisible, prefixCls: prefixCls, showAction: showAction, stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', onPopupVisibleChange: onPopupVisibleChange }, renderChildren()));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Drop.displayName = 'Drop';
+}

package/dist/esm/components/Drop/index.scss

@@ -0,0 +1,94 @@
+// Name:            Drop
+// Description:     Component to position any element next to any other element.
+//
+// Component:       `uk-drop`
+//
+// Modifiers:       `uk-drop-placement-top-*`
+//                  `uk-drop-placement-bottom-*`
+//                  `uk-drop-stack`
+//                  `uk-drop-grid`
+//
+// States:          `uk-drop-hidden`
+//
+// Uses:            Animation
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Drop
+ ========================================================================== */
+
+/*
+ * 1. Set a default width
+ * 2. Set position
+ */
+
+.uk-drop {
+    /* 1 */
+    box-sizing: border-box;
+
+    /* 2 */
+    position: absolute;
+    width: var(--drop-width);
+    z-index: var(--drop-z-index);
+}
+
+/* Hide */
+.uk-drop-hidden { display: none; }
+
+
+/* Position Animation
+ ========================================================================== */
+
+[class*='uk-drop-placement-bottom'] {
+    &.uk-slide-up-enter.uk-slide-up-enter-active,
+    &.uk-slide-up-appear.uk-slide-up-appear-active {
+        animation-name: uk-slide-up-in;
+    }
+
+    &.uk-slide-up-leave.uk-slide-up-leave-active {
+        animation-name: uk-slide-up-out;
+    }
+}
+
+[class*='uk-drop-placement-top'] {
+    &.uk-slide-up-enter.uk-slide-up-enter-active,
+    &.uk-slide-up-appear.uk-slide-up-appear-active {
+        animation-name: uk-slide-down-in;
+    }
+
+    &.uk-slide-up-leave.uk-slide-up-leave-active {
+        animation-name: uk-slide-down-out;
+    }
+}
+
+
+/* Grid modifiers
+ ========================================================================== */
+
+.uk-drop-stack .uk-drop-grid > * { width: 100% !important; }
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-drop-misc) {
+    @include hook-drop-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --drop-margin: var(--global-margin);
+    --drop-width: #{$drop-width};
+    --drop-z-index: calc(var(--global-z-index) + 20);
+}

package/dist/esm/components/Drop/placements.d.ts

@@ -0,0 +1,57 @@
+declare const placements: {
+    'bottom-center': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'bottom-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'bottom-right': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'top-center': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'top-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'top-right': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+};
+export default placements;