@broxus/react-uikit 0.1.0

package/dist/cjs/components/Dotnav/Item.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Button_1 = require("../Button/Button");
+function Item(props) {
+    const { className, isActive, onClick, ...restProps } = props;
+    return (React.createElement("li", { className: (0, classnames_1.default)({
+            'uk-active': isActive,
+        }, className), ...restProps },
+        React.createElement(Button_1.Button, { type: "text", onClick: onClick })));
+}
+exports.Item = Item;
+if (process.env.NODE_ENV !== 'production') {
+    Item.displayName = 'Dotnav.Item';
+}

package/dist/cjs/components/Dotnav/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Item } from './Item';
+import type { DotnavProps } from './Dotnav';
+import './index.scss';
+export type { DotnavProps };
+export interface CompoundedDotnav extends React.FunctionComponent<DotnavProps> {
+    Item: typeof Item;
+}
+export declare const Dotnav: CompoundedDotnav;

package/dist/cjs/components/Dotnav/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dotnav = void 0;
+const Dotnav_1 = require("./Dotnav");
+const Item_1 = require("./Item");
+require("./index.scss");
+exports.Dotnav = Dotnav_1.Dotnav;
+exports.Dotnav.Item = Item_1.Item;

package/dist/cjs/components/Dotnav/index.scss

@@ -0,0 +1,162 @@
+// Name:            Dotnav
+// Description:     Component to create dot navigations
+//
+// Component:       `uk-dotnav`
+//
+// Modifier:        `uk-dotnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Dotnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset list
+ * 3. Gutter
+ */
+
+.uk-dotnav {
+    display: flex;
+
+    /* 1 */
+    flex-wrap: wrap;
+    list-style: none;
+
+    /* 2 */
+    margin: 0 0 0 /* 3 */ calc(var(--dotnav-margin-horizontal) * -1);
+    padding: 0;
+    @if mixin-exists(hook-dotnav) {
+        @include hook-dotnav;
+    }
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ */
+
+.uk-dotnav > * {
+    /* 1 */
+    flex: none;
+
+    /* 2 */
+    padding-left: var(--dotnav-margin-horizontal);
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items
+ * 1. Hide text if present
+ */
+
+.uk-dotnav > * > * {
+    background: var(--dotnav-item-background);
+    border-radius: var(--dotnav-item-border-radius);
+    box-sizing: border-box;
+    display: block;
+    height: var(--dotnav-item-height);
+    overflow: hidden;
+
+    /* 1 */
+    text-indent: 100%;
+    white-space: nowrap;
+    width: var(--dotnav-item-width);
+    @if mixin-exists(hook-dotnav-item) {
+        @include hook-dotnav-item;
+    }
+}
+
+/* Hover + Focus */
+.uk-dotnav > * > :hover,
+.uk-dotnav > * > :focus {
+    background-color: var(--dotnav-item-hover-background);
+    outline: none;
+    @if mixin-exists(hook-dotnav-item-hover) {
+        @include hook-dotnav-item-hover;
+    }
+}
+
+/* OnClick */
+.uk-dotnav > * > :active {
+    background-color: var(--dotnav-item-onclick-background);
+    @if mixin-exists(hook-dotnav-item-onclick) {
+        @include hook-dotnav-item-onclick;
+    }
+}
+
+/* Active */
+.uk-dotnav > .uk-active > * {
+    background-color: var(--dotnav-item-active-background);
+    @if mixin-exists(hook-dotnav-item-active) {
+        @include hook-dotnav-item-active;
+    }
+}
+
+
+/* Modifier: 'uk-dotnav-vertical'
+ ========================================================================== */
+
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+
+.uk-dotnav-vertical {
+    /* 1 */
+    flex-direction: column;
+
+    /* 2 */
+    margin-left: 0;
+    margin-top: calc(var(--dotnav-margin-vertical) * -1);
+}
+
+/* 2 */
+// noinspection Stylelint
+.uk-dotnav-vertical > * {
+    padding-left: 0;
+    padding-top: var(--dotnav-margin-vertical);
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-dotnav-misc) {
+    @include hook-dotnav-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --dotnav-margin-horizontal: #{$dotnav-margin-horizontal};
+    --dotnav-margin-vertical: var(--dotnav-margin-horizontal);
+    --dotnav-item-width: #{$dotnav-item-width};
+    --dotnav-item-height: #{$dotnav-item-width};
+    --dotnav-item-border-radius: #{$dotnav-item-border-radius};
+    --dotnav-item-background: #{$dotnav-item-background};
+    --dotnav-item-hover-background: #{$dotnav-item-hover-background};
+    --dotnav-item-onclick-background: #{$dotnav-item-onclick-background};
+    --dotnav-item-active-background: #{$dotnav-item-active-background};
+
+    // Inverse
+    --inverse-dotnav-item-background: #{$inverse-dotnav-item-background};
+    --inverse-dotnav-item-hover-background: #{$inverse-dotnav-item-hover-background};
+    --inverse-dotnav-item-onclick-background: #{$inverse-dotnav-item-onclick-background};
+    --inverse-dotnav-item-active-background: #{$inverse-dotnav-item-active-background};
+}

package/dist/cjs/components/Drawer/index.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import type { GetContainer } from 'rc-util/lib/PortalWrapper';
+import type { Direction } from '../../types';
+import './index.scss';
+declare type DrawerRef = {
+    push(): void;
+    pull(): void;
+};
+declare type EventType = React.KeyboardEvent | React.MouseEvent;
+declare type LevelMove = number | [number, number];
+declare const PlacementTypes: ["top", "right", "bottom", "left"];
+declare type PlacementType = typeof PlacementTypes[number];
+declare const SizeTypes: ["default", "large"];
+declare type SizeType = typeof SizeTypes[number];
+declare type TriggerArguments = {
+    collapse: () => void;
+    expand: () => void;
+    isOpen: boolean;
+};
+export interface PushState {
+    distance: string | number;
+}
+export interface DrawerProps {
+    afterVisibleChange?: (visible: boolean) => void;
+    animation?: 'push' | 'reveal';
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    closable?: boolean;
+    closeIcon?: React.ReactNode;
+    defaultOpen?: boolean;
+    destroyOnClose?: boolean;
+    direction?: Direction;
+    duration?: string;
+    ease?: string;
+    forceRender?: boolean;
+    getContainer?: GetContainer;
+    handler?: React.ReactElement | null | false;
+    height?: number | string;
+    keyboard?: boolean;
+    level?: string | string[] | null;
+    levelMove?: LevelMove | ((event: {
+        target: HTMLElement;
+        open: boolean;
+    }) => LevelMove);
+    maskClosable?: boolean;
+    maskStyle?: React.CSSProperties;
+    open?: boolean;
+    placement?: PlacementType;
+    prefixCls?: string;
+    push?: boolean | PushState;
+    showMask?: boolean;
+    size?: SizeType;
+    style?: React.CSSProperties;
+    trigger?: (args: TriggerArguments) => JSX.Element;
+    width?: number | string;
+    wrapperClassName?: string;
+    zIndex?: number;
+    onClose?: (event: EventType) => void;
+}
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<DrawerRef>>;
+export {};

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

@@ -0,0 +1,189 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = void 0;
+const React = __importStar(require("react"));
+const js_utils_1 = require("@broxus/js-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const rc_drawer_1 = __importDefault(require("rc-drawer"));
+const utils_1 = require("../../utils");
+require("./index.scss");
+const DrawerContext = React.createContext(null);
+const PlacementTypes = (0, js_utils_1.tuple)('top', 'right', 'bottom', 'left');
+const SizeTypes = (0, js_utils_1.tuple)('default', 'large');
+const defaultPushState = { distance: 180 };
+exports.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 = (0, utils_1.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(() => (0, classnames_1.default)({
+        [`${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(() => (0, classnames_1.default)(`${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) {
+            (0, utils_1.addModalMode)();
+        }
+        else {
+            (0, utils_1.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(rc_drawer_1.default, { ...{
+                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())));
+});