@broxus/react-uikit 0.1.0

package/dist/esm/components/Nav/hooks/useKeyRecords.js

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import warning from 'rc-util/lib/warning';
+import { nextSlice } from '../utils/timeUtil';
+const PATH_SPLIT = '__RC_UTIL_PATH_SPLIT__';
+const getPathStr = (keyPath) => keyPath.join(PATH_SPLIT);
+const getPathKeys = (keyPathStr) => keyPathStr.split(PATH_SPLIT);
+export const OVERFLOW_KEY = 'rc-menu-more';
+export default function useKeyRecords() {
+    const [, internalForceUpdate] = React.useState({});
+    const key2pathRef = React.useRef(new Map());
+    const path2keyRef = React.useRef(new Map());
+    const [overflowKeys, setOverflowKeys] = React.useState([]);
+    const updateRef = React.useRef(0);
+    const destroyRef = React.useRef(false);
+    const forceUpdate = () => {
+        if (!destroyRef.current) {
+            internalForceUpdate({});
+        }
+    };
+    const registerPath = React.useCallback((key, keyPath) => {
+        // Warning for invalidate or duplicated `key`
+        if (process.env.NODE_ENV !== 'production') {
+            warning(!key2pathRef.current.has(key), `Duplicated key '${key}' used in Menu by path [${keyPath.join(' > ')}]`);
+        }
+        // Fill map
+        const connectedPath = getPathStr(keyPath);
+        path2keyRef.current.set(connectedPath, key);
+        key2pathRef.current.set(key, connectedPath);
+        updateRef.current += 1;
+        const id = updateRef.current;
+        nextSlice(() => {
+            if (id === updateRef.current) {
+                forceUpdate();
+            }
+        });
+    }, []);
+    const unregisterPath = React.useCallback((key, keyPath) => {
+        const connectedPath = getPathStr(keyPath);
+        path2keyRef.current.delete(connectedPath);
+        key2pathRef.current.delete(key);
+    }, []);
+    const refreshOverflowKeys = React.useCallback((keys) => {
+        setOverflowKeys(keys);
+    }, []);
+    const getKeyPath = React.useCallback((eventKey, includeOverflow) => {
+        const fullPath = key2pathRef.current.get(eventKey) || '';
+        const keys = getPathKeys(fullPath);
+        if (includeOverflow && overflowKeys.includes(keys[0])) {
+            keys.unshift(OVERFLOW_KEY);
+        }
+        return keys;
+    }, [overflowKeys]);
+    const isSubPathKey = React.useCallback((pathKeys, eventKey) => pathKeys.some(pathKey => {
+        const pathKeyList = getKeyPath(pathKey, true);
+        return pathKeyList.includes(eventKey);
+    }), [getKeyPath]);
+    const getKeys = () => {
+        const keys = [...key2pathRef.current.keys()];
+        if (overflowKeys.length) {
+            keys.push(OVERFLOW_KEY);
+        }
+        return keys;
+    };
+    /** Find current key related child path keys */
+    const getSubPathKeys = React.useCallback((key) => {
+        const connectedPath = `${key2pathRef.current.get(key)}${PATH_SPLIT}`;
+        const pathKeys = new Set();
+        [...path2keyRef.current.keys()].forEach(pathKey => {
+            if (pathKey.startsWith(connectedPath)) {
+                pathKeys.add(path2keyRef.current.get(pathKey));
+            }
+        });
+        return pathKeys;
+    }, []);
+    React.useEffect(() => () => {
+        destroyRef.current = true;
+    }, []);
+    return {
+        getKeyPath,
+        getKeys,
+        getSubPathKeys,
+        isSubPathKey,
+        refreshOverflowKeys,
+        registerPath,
+        unregisterPath,
+    };
+}

package/dist/esm/components/Nav/hooks/useMemoCallback.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Cache callback function that always return same ref instead.
+ * This is used for context optimization.
+ */
+export default function useMemoCallback<T extends (...args: any[]) => void>(func: T): T;

package/dist/esm/components/Nav/hooks/useMemoCallback.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * Cache callback function that always return same ref instead.
+ * This is used for context optimization.
+ */
+export default function useMemoCallback(func) {
+    const funRef = React.useRef(func);
+    funRef.current = func;
+    const callback = React.useCallback(((...args) => funRef.current?.(...args)), []);
+    return typeof func === 'function' ? callback : undefined;
+}

package/dist/esm/components/Nav/hooks/useUUID.d.ts

@@ -0,0 +1 @@
+export default function useUUID(id?: string): string | undefined;

package/dist/esm/components/Nav/hooks/useUUID.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+const uniquePrefix = Math.random().toFixed(5).toString().slice(2);
+let internalId = 0;
+export default function useUUID(id) {
+    const [uuid, setUUID] = useMergedState(id, {
+        value: id,
+    });
+    React.useEffect(() => {
+        internalId += 1;
+        const newId = process.env.NODE_ENV === 'test'
+            ? 'test'
+            : `${uniquePrefix}-${internalId}`;
+        setUUID(`uk-nav-uuid-${newId}`);
+    }, []);
+    return uuid;
+}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Divider } from './Divider';
+import { Group } from './Group';
+import { Header } from './Header';
+import { Item } from './Item';
+import { Sub } from './Sub';
+import type { NavProps } from './Nav';
+import './index.scss';
+export type { NavProps };
+export interface CompoundedNav extends React.FunctionComponent<NavProps> {
+    Divider: typeof Divider;
+    Group: typeof Group;
+    Header: typeof Header;
+    Item: typeof Item;
+    Sub: typeof Sub;
+}
+export declare const Nav: CompoundedNav;

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

@@ -0,0 +1,13 @@
+import { Divider } from './Divider';
+import { Group } from './Group';
+import { Header } from './Header';
+import { Item } from './Item';
+import { Nav as InternalNav } from './Nav';
+import { Sub } from './Sub';
+import './index.scss';
+export const Nav = InternalNav;
+Nav.Divider = Divider;
+Nav.Group = Group;
+Nav.Header = Header;
+Nav.Item = Item;
+Nav.Sub = Sub;