x-ui-design 1.0.31-gamma.1 → 1.0.31

package/lib/components/Menu/Menu.tsx

@@ -0,0 +1,261 @@
+'use client'
+
+import React, {
+  FC,
+  useMemo,
+  useState,
+  ReactNode,
+  useCallback,
+  createContext,
+  MouseEvent,
+  useRef
+} from "react";
+import { MenuMode, MenuProps } from "../../types/menu";
+import MenuItem from "./Item/Item";
+import SubMenu from "./SubMenu/SubMenu";
+import { prefixClsMenu } from "../../utils";
+import "./index.css";
+
+export const MenuContext = createContext<{
+  mode: MenuMode;
+  inlineIndent: number;
+  inlineCollapsed: boolean;
+  selectedKeys: string[];
+  openKeys: string[];
+  toggleOpen: (key: string, level?: "1" | "2") => void;
+  onItemClick: (key: string, domEvent?: MouseEvent) => void;
+  triggerSubMenuAction?: "hover" | "click";
+} | null>(null);
+
+const Menu: FC<MenuProps> & {
+  Item: typeof MenuItem;
+  SubMenu: typeof SubMenu;
+} = ({
+  prefixCls = prefixClsMenu,
+  className = "",
+  style,
+  defaultOpenKeys = [],
+  defaultSelectedKeys = [],
+  openKeys: openKeysProp,
+  selectedKeys: selectedKeysProp,
+  mode = "vertical",
+  multiple = false,
+  inlineCollapsed = false,
+  inlineIndent = 24,
+  triggerSubMenuAction = "hover",
+  onClick,
+  onSelect,
+  onDeselect,
+  onOpenChange,
+  selectable = true,
+  children,
+  items
+}) => {
+    const hasInteracted = useRef(false);
+
+    const [openKeys, setOpenKeys] = useState<string[]>(openKeysProp ?? defaultOpenKeys);
+    const [selectedKeys, setSelectedKeys] = useState<string[]>(selectedKeysProp ?? defaultSelectedKeys);
+
+    const _triggerSubMenuActionClick = useMemo(() => {
+      if (mode === 'inline') {
+        return "click";
+      }
+
+      return triggerSubMenuAction
+    }, [triggerSubMenuAction, mode]);
+
+    const toggleOpen = useCallback(
+      (key: string, level?: "1" | "2") => {
+        setOpenKeys((_openKeys) => {
+          const isOpen = _openKeys?.includes(key);
+
+          const openKeysData = level
+            ? [...(_triggerSubMenuActionClick === 'click' ? level === "2" ? [..._openKeys] : [] : _openKeys), key]
+            : [key];
+
+          const next = [...new Set(isOpen
+            ? _openKeys.filter((k) => k !== key)
+            : openKeysData)];
+
+          if (openKeysProp === undefined) {
+            _openKeys = next;
+          }
+
+          onOpenChange?.(next);
+
+          return _openKeys
+        })
+      },
+      [openKeysProp, hasInteracted, _triggerSubMenuActionClick]
+    );
+
+    const onItemClick = useCallback(
+      (key: string, domEvent?: MouseEvent) => {
+        if (!selectable) {
+          return;
+        }
+
+        let nextSelected = [...(selectedKeys || [])];
+        const already = nextSelected.includes(key);
+
+        if (multiple) {
+          nextSelected = already ? nextSelected.filter((k) => k !== key) : [...nextSelected, key];
+        } else {
+          nextSelected = [key];
+        }
+
+        if (selectedKeysProp === undefined) {
+          setSelectedKeys(nextSelected);
+        }
+
+        onSelect?.({ key, keyPath: [key], selectedKeys: nextSelected });
+        onClick?.({ key, keyPath: [key], domEvent: domEvent as MouseEvent });
+
+        if (already && multiple) {
+          onDeselect?.({ key, keyPath: [key] });
+        }
+      },
+      [multiple, onClick, onSelect, onDeselect, selectedKeys, selectable, selectedKeysProp]
+    );
+
+    const menuContext = useMemo(
+      () => ({
+        mode,
+        inlineIndent,
+        inlineCollapsed,
+        selectedKeys: selectedKeys || [],
+        openKeys: openKeys || [],
+        toggleOpen,
+        onItemClick,
+        triggerSubMenuAction: _triggerSubMenuActionClick,
+      }),
+      [
+        mode,
+        inlineIndent,
+        inlineCollapsed,
+        selectedKeys,
+        openKeys,
+        toggleOpen,
+        onItemClick,
+        _triggerSubMenuActionClick
+      ]
+    );
+
+    return (
+      <MenuContext.Provider value={menuContext}>
+        <ul
+          role="menu"
+          style={style}
+          className={`${prefixCls}-${mode} ${prefixCls || ''} ${className || ''}`}
+        >
+          {items
+            ? items.map((it, index) => {
+              if (it.type === 'divider') {
+                return (
+                  <span
+                    key={`${it.key}_${index}_divider`}
+                    className={`${prefixCls}-divider`}
+                  />
+                )
+              }
+
+              if (it.type === 'group') {
+                return (
+                  <div key={index + it.key}>
+                    <MenuItem
+                      key={`${it.key}_${index}_${it.label}_menu-item`}
+                      itemKey={it.key}
+                      label={it.label}
+                      icon={it.icon}
+                      className={`${prefixCls}-item-disabled`}
+                    />
+
+                    {(it.children || []).map((c, i) => (
+                      <MenuItem
+                        key={`${c.key}_${i}_menu-item`}
+                        itemKey={c.key}
+                        label={c.label}
+                        icon={c.icon}
+                        className={`${prefixCls}-item-group`}
+                      />
+                    ))}
+                  </div>
+                )
+              }
+
+              return it.children ? (
+                <SubMenu
+                  key={`${it.key}_${it.label}_${index}_sub_menu`}
+                  itemKey={it.key}
+                  title={it.label}
+                  icon={it.icon}
+                  level="1"
+                >
+                  {it.children.map((c, idx) => {
+                    if (c.type === 'group') {
+                      return (
+                        <div key={c.key + idx}>
+                          <MenuItem
+                            key={`${c.key}_${idx}_menu-item`}
+                            itemKey={c.key}
+                            label={c.label}
+                            icon={c.icon}
+                            className={`${prefixCls}-item-disabled`}
+                          />
+
+                          {(c.children || []).map((c, _i) => (
+                            <MenuItem
+                              key={`${c.key}_${_i}_menu-item`}
+                              itemKey={c.key}
+                              label={c.label}
+                              icon={c.icon}
+                              className={`${prefixCls}-item-group`}
+                            />
+                          ))}
+                        </div>
+                      )
+                    }
+
+                    return c.children ? <SubMenu
+                      key={`${c.key}_${c.label}_${idx}_sub_menu`}
+                      className={`${prefixCls}-sub-list-sub`}
+                      itemKey={c.key}
+                      title={c.label}
+                      icon={c.icon}
+                      level="2"
+                    >
+                      {c.children.map((c, _idx) => (
+                        <MenuItem
+                          key={`${c.key}_${_idx}_${c.label}_menu-item`}
+                          itemKey={c.key}
+                          label={c.label}
+                          icon={c.icon} 
+                        />
+                      ))}
+                    </SubMenu> :
+                      <MenuItem
+                        key={`${index}_${c.key}_${c.label}_menu-item`}
+                        itemKey={c.key}
+                        label={c.label}
+                        icon={c.icon} />
+                  })}
+                </SubMenu>
+              ) : (
+                <MenuItem
+                  key={`${index}_${it.key}_menu-item`}
+                  itemKey={it.key}
+                  label={it.label}
+                  icon={it.icon}
+                />
+              )
+            })
+            : children}
+        </ul>
+      </MenuContext.Provider>
+    );
+  };
+
+Menu.Item = MenuItem;
+Menu.SubMenu = SubMenu;
+
+export default Menu;

package/lib/components/Menu/SubMenu/SubMenu.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import React, { FC, useCallback, useContext } from "react";
+import { MenuContext } from "../Menu";
+import { SubMenuItem } from "../../../types/menu";
+import { ArrowIcon } from "../../../components/Icons";
+import { prefixClsMenu } from "../../../utils";
+
+const SubMenu: FC<SubMenuItem> = ({
+    itemKey,
+    title,
+    icon,
+    children,
+    className = '',
+    level,
+    prefixCls = prefixClsMenu
+}) => {
+    const menuContext = useContext(MenuContext);
+
+    if (!menuContext) {
+        throw new Error('MenuItem must be used within a Menu');
+    }
+
+    const { openKeys, toggleOpen, triggerSubMenuAction } = menuContext;
+
+    const isOpen = openKeys.includes(itemKey);
+
+    const handleClick = useCallback(() => {
+        if (triggerSubMenuAction === "click") {
+            toggleOpen(itemKey, level);
+        }
+    }, [itemKey, level]);
+
+    const handleHover = useCallback((_: boolean) => {
+        if (triggerSubMenuAction === "hover") {
+            toggleOpen(itemKey, level);
+        }
+    }, [itemKey, level]);
+
+    return (
+        <li
+            className={`${prefixCls}-sub ${className}`}
+            {
+                ...(triggerSubMenuAction === "hover" ? {
+                    onMouseEnter: () => handleHover(true),
+                    onMouseLeave: () => handleHover(false)
+                } : {})
+            }
+        >
+            <div className={`${prefixCls}-sub-title`} onClick={handleClick}>
+                {icon && <span className={`${prefixCls}-sub-icon`}>
+                    {icon}
+                </span>}&nbsp;
+                <span className={`${prefixCls}-sub-label`}>{title}</span>
+                <span className={`${prefixCls}-sub-arrow`}>
+                    {<ArrowIcon isOpen={isOpen} />}
+                </span>
+            </div>
+
+            {!isOpen ? null :
+                <ul className={`${prefixCls}-sub-list`}>
+                    {children}
+                </ul>}
+        </li>
+    );
+};
+
+export default SubMenu;

package/lib/components/Menu/index.css

@@ -0,0 +1,145 @@
+.xUi-menu {
+    gap: 4px;
+    margin: 0;
+    padding: 4px;
+    display: flex;
+    font-size: 14px;
+    list-style: none;
+    border-radius: 4px;
+    flex-direction: column;
+    user-select: none;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+}
+
+.xUi-menu-sub-list {
+    gap: 4px;
+    margin: 0;
+    padding: 4px;
+    display: flex;
+    list-style: none;
+    border-radius: 4px;
+    height: max-content;
+    flex-direction: column;
+    background: var(--xui-background-color);
+}
+
+.xUi-menu-item-group {
+    padding:  0 24px !important;
+}
+
+.xUi-menu-vertical .xUi-menu-sub-list {
+    top: 0;
+    z-index: 1;
+    left: 100%;
+    right: -100%;
+    width: min-content;
+    min-width: 160px;
+    position: absolute;
+    background-color: #fff;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+}
+
+.xUi-menu-horizontal {
+    display: flex;
+    flex-direction: row;
+}
+
+.xUi-menu-item {
+    display: flex;
+    height: 40px;
+    padding: 0 12px;
+    cursor: pointer;
+    border-radius: 4px;
+    align-items: center;
+    transition: background 0.3s;
+    color: var(--xui-text-color);
+}
+
+.xUi-menu-item:hover {
+    background: rgba(0, 0, 0, 0.04);
+}
+
+.xUi-menu-item-icon {
+    margin-right: 8px;
+}
+
+.xUi-menu-sub {
+    position: relative;
+    border-radius: 6px;
+}
+
+.xUi-menu-sub-title {
+    height: 40px;
+    display: flex;
+    padding: 0 12px;
+    cursor: pointer;
+    align-items: center;
+
+    &:hover {
+        border-radius: 6px;
+        background-color: var(--xui-color-hover);
+    }
+}
+
+.xUi-menu-sub-label {
+    flex: 1;
+}
+
+.xUi-menu-sub-arrow {
+    margin-left: 8px;
+    transition: transform 0.2s;
+}
+
+.xUi-menu-vertical .xUi-menu-sub-arrow {
+    transform: rotate(-90deg);
+}
+
+.xUi-menu-group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.xUi-menu-group-title {
+    font-size: 12px;
+    padding: 8px 12px;
+    color: rgba(0, 0, 0, 0.45);
+}
+
+.xUi-menu-group-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.xUi-menu-divider {
+    display: block;
+    margin: 0 auto;
+    width: calc(100% - 16px);
+    border-bottom: 1px solid var(--xui-color-disabled);
+}
+
+.xUi-menu-item.xUi-menu-item-disabled {
+    cursor: auto;
+    opacity: 0.6;
+
+    &:hover {
+        background-color: unset;
+    }
+}
+
+.xUi-menu-inline .xUi-menu-sub-list {
+    background-color: var(--xui-menu-inline-bg);
+}
+
+.xUi-menu-inline .xUi-menu-item {
+    padding: 0 24px;
+}
+
+.xUi-menu-inline .xUi-menu-sub-title {
+    padding: 0 20px;
+}
+
+.xUi-menu-inline .xUi-menu-sub-list-sub .xUi-menu-item {
+    padding: 0 30px;
+}

package/lib/components/Menu/index.ts

@@ -0,0 +1 @@
+export { default as Menu } from './Menu';

package/lib/components/Popover/Popover.tsx

@@ -0,0 +1,135 @@
+import React, { useRef, useState, cloneElement, isValidElement, Children, useEffect, useMemo, useCallback } from "react";
+import { usePosition } from "../../hooks/usePosition";
+import { clsx } from '../../helpers';
+import { PopoverProps } from "../../types/popover";
+import { ConditionalWrapper } from '../ConditionalWrapper';
+import { createPortal } from 'react-dom';
+import { prefixClsPopover } from "../../utils";
+import './style.css';
+
+const Popover = ({
+    prefixCls = prefixClsPopover,
+    content,
+    children,
+    trigger = "click",
+    placement = "bottom",
+    open,
+    visible,
+    title,
+    style = {},
+    overlayClassName = '',
+    overlayStyle = {},
+    onVisibleChange,
+    getPopupContainer
+}: PopoverProps) => {
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const popupRef = useRef<HTMLDivElement>(null);
+
+    const [innerOpen, setInnerOpen] = useState(false);
+
+    const isOpen = visible !== undefined ? visible : open !== undefined ? open : innerOpen;
+    
+    const { dropdownPosition, showPlacement } = usePosition({
+        isOpen,
+        offset: 10,
+        popupRef,
+        placement,
+        triggerRef,
+        getPopupContainer: getPopupContainer?.(triggerRef.current as HTMLElement)
+    });
+
+    useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            if (
+                popupRef.current &&
+                !popupRef.current.contains(e.target as Node) &&
+                triggerRef.current &&
+                !triggerRef.current.contains(e.target as Node)
+            ) {
+                setInnerOpen(false);
+                onVisibleChange?.(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
+    const handleOnClick = useCallback(() => {
+        const newState = !isOpen;
+
+        onVisibleChange?.(newState);
+        setInnerOpen(newState);
+    }, [isOpen, trigger]);
+
+    const handleOnMouseEnter = useCallback(() => {
+        if (trigger === "hover") {
+            onVisibleChange?.(true);
+            setInnerOpen(true);
+        }
+    }, [trigger]);
+
+    const handleOnMouseLeave = useCallback(() => {
+        if (trigger === "hover") {
+            onVisibleChange?.(false);
+            setInnerOpen(false);
+        }
+    }, [trigger]);
+
+    const childProps = useMemo(() => trigger === "click"
+        ? { onClick: handleOnClick }
+        : { onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
+        [trigger]);
+
+    return (
+        <>
+            {Children.map(children, (child, index) => {
+                if (!isValidElement(child)) {
+                    child = <div>{child}</div>
+                }
+                
+                return cloneElement(child, {
+                    key: index,
+                    ...(index === 0 ? {
+                        style,
+                        ...childProps,
+                        ref: triggerRef,
+                        className: `${prefixCls}-wrapper-content`,
+                    } : {}),
+                })
+            })}
+
+            {isOpen && (
+                <ConditionalWrapper
+                    condition={!!getPopupContainer}
+                    wrapper={(element) =>
+                        getPopupContainer
+                            ? createPortal(element, getPopupContainer(popupRef.current as HTMLElement))
+                            : <>{element}</>
+                    }
+                >
+                    <div
+                        ref={popupRef}
+                        {...childProps}
+                        className={clsx(prefixCls, `${prefixCls}-${placement}`, overlayClassName)}
+                        style={{
+                            zIndex: 1000,
+                            position: "absolute",
+                            ...overlayStyle,
+                            ...dropdownPosition
+                        }}
+                    >
+                        {title && <div className={`${prefixCls}-title`}>{title}</div>}
+                        <div className={`${prefixCls}-inner`}>{content}</div>
+                        <div className={`${prefixCls}-arrow ${showPlacement}`} />
+                    </div>
+                </ConditionalWrapper>
+            )}
+        </>
+    );
+};
+
+export default Popover;

package/lib/components/Popover/index.ts

@@ -0,0 +1 @@
+export { default as Popover } from '../Popover/Popover'

package/lib/components/Popover/style.css

@@ -0,0 +1,82 @@
+.xUi-popover {
+    &::before {
+        left: 0;
+        top: -10px;
+        content: "";
+        width: 100%;
+        height: 10px;
+        z-index: 10000;
+        position: absolute;
+    }
+}
+
+.xUi-popover-wrapper-content {
+    cursor: pointer;
+    max-width: fit-content;
+    width: -webkit-fill-available;
+}
+
+.xUi-popover {
+    width: max-content;
+    background: var(--xui-background-color);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 8px 12px;
+    z-index: 1000;
+}
+
+.xUi-popover-title {
+    padding: 4px;
+}
+
+.xUi-popover-inner {
+    font-size: 14px;
+    color: var(--xui-text-color);
+}
+
+.xUi-popover-arrow {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    top: -6px;
+    left: 12px;
+    background: var(--xui-background-color);
+    border-left: 0.5px solid var(--xui-border-color);
+    border-top: 0.5px solid var(--xui-border-color);
+    transform: rotate(45deg);
+}
+
+.xUi-popover-arrow {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    top: -6px;
+    left: 12px;
+    background: var(--xui-background-color);
+    border-left: 0.5px solid var(--xui-border-color);
+    border-top: 0.5px solid var(--xui-border-color);
+    transform: rotate(45deg);
+}
+
+.xUi-popover-right .xUi-popover-arrow,
+.xUi-popover-topRight .xUi-popover-arrow,
+.xUi-popover-bottomRight .xUi-popover-arrow {
+    left: unset;
+    right: 12px;
+}
+
+.xUi-popover-arrow.bottom {
+    top: unset;
+    bottom: -6px;
+    border-left: unset;
+    border-top: unset;
+    border-right: 0.5px solid var(--xui-border-color);
+    border-bottom: 0.5px solid var(--xui-border-color);
+}
+
+.xUi-popover-arrow.center {
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+}
+