@difizen/libro-common 0.3.4 → 1.0.0

package/src/react/menubar/context.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export const MenubarContext = React.createContext<MenubarContext.Contexts>({} as any);
+
+export namespace MenubarContext {
+  export interface Contexts {
+    prefixCls: string;
+    activeMenubar: () => void;
+    menubarActived: boolean;
+    inContent: (element: HTMLElement) => boolean;
+    activeItem?: string | undefined;
+    activeElementRef?: React.MutableRefObject<HTMLDivElement | null> | undefined;
+    setActiveElementRef: (
+      element?: React.MutableRefObject<HTMLDivElement | null>,
+    ) => void;
+  }
+}

package/src/react/menubar/index.ts

@@ -0,0 +1 @@
+export * from './menubar';

package/src/react/menubar/item.tsx

@@ -0,0 +1,103 @@
+import classnames from 'classnames';
+import * as React from 'react';
+import { useEffect } from 'react';
+import * as ReactDom from 'react-dom';
+
+import { MenubarContext } from './context';
+
+function stopPropagation(e: MouseEvent) {
+  e.stopPropagation();
+}
+
+export const MenubarItem = (props: MenubarItemProps) => {
+  const context = React.useContext(MenubarContext);
+  const menubarItemRef = React.useRef<HTMLDivElement | null>(null);
+  const { text, children, hidden } = props;
+  const { prefixCls, menubarActived } = context;
+  const active =
+    context.activeElementRef &&
+    context.activeElementRef.current &&
+    context.activeElementRef.current === menubarItemRef.current;
+  const currentMenuActived = menubarActived && active;
+  const baseCls = `${prefixCls}-item`;
+  const popupClassName = `${context.prefixCls}-item-dropdown`;
+
+  useEffect(() => {
+    const element = menubarItemRef.current;
+    if (element) {
+      element.addEventListener('mousedown', stopPropagation);
+    }
+    return () => {
+      if (element) {
+        element.removeEventListener('mousedown', stopPropagation);
+      }
+    };
+  }, []);
+
+  const doActive = () => {
+    context.setActiveElementRef(menubarItemRef);
+  };
+
+  const doDeactive = () => {
+    context.setActiveElementRef();
+  };
+
+  const onToggleActive = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    if (!currentMenuActived) {
+      context.activeMenubar();
+      doActive();
+    }
+  };
+
+  const locatable = !!menubarItemRef.current;
+  const getPortalItemStyle = () => {
+    const node = menubarItemRef.current;
+    if (!node) {
+      return {};
+    }
+    const { offsetHeight } = node;
+    const { top, left } = node.getBoundingClientRect();
+    return { top: top + offsetHeight, left: left };
+  };
+  return (
+    <div
+      ref={menubarItemRef}
+      className={classnames(baseCls, {
+        [`${baseCls}-hidden`]: hidden,
+        [`${baseCls}-hover`]: menubarActived,
+        [`${baseCls}-active`]: currentMenuActived,
+      })}
+      onMouseEnter={doActive}
+      onClick={onToggleActive}
+    >
+      <div
+        className={classnames(`${baseCls}-text`, {
+          [`${baseCls}-text-active`]: currentMenuActived,
+        })}
+        // onClick={onClick}
+      >
+        {text}
+      </div>
+      {currentMenuActived &&
+        locatable &&
+        ReactDom.createPortal(
+          <div style={{ position: 'absolute', top: 0, left: 0, width: '100%' }}>
+            <div>
+              <div style={getPortalItemStyle()} className={popupClassName}>
+                {children}
+              </div>
+            </div>
+          </div>,
+          document.body,
+        )}
+    </div>
+  );
+};
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export interface MenubarItemProps {
+  text: string | React.ReactNode;
+  hidden?: boolean;
+  children?: React.ReactNode | React.ReactNode[];
+}

package/src/react/menubar/menubar.tsx

@@ -0,0 +1,123 @@
+import classnames from 'classnames';
+import addEventListener from 'rc-util/lib/Dom/addEventListener';
+import * as React from 'react';
+import './styles/index.less';
+import '../menu/styles/index.less';
+
+import { MenubarContext } from './context';
+import { MenubarItem } from './item';
+
+export interface MenubarProps {
+  prefixCls?: string;
+  className?: string;
+  extra?: React.ReactNode;
+  children?: React.ReactNode | React.ReactNode[];
+}
+export const defaultMenubarProps: MenubarProps = {
+  prefixCls: 'mana',
+};
+
+export const Menubar = (props: MenubarProps) => {
+  const removeDocEventRef = React.useRef<(() => void) | undefined>(undefined);
+  const menubarContentRef = React.useRef<HTMLDivElement | null>(null);
+  const [active, setActive] = React.useState(false);
+  const [activeElementRef, setActiveElementRef] = React.useState<
+    React.MutableRefObject<HTMLDivElement | null> | undefined
+  >(undefined);
+
+  const unbindDocEvent = () => {
+    if (removeDocEventRef.current) {
+      removeDocEventRef.current();
+      removeDocEventRef.current = undefined;
+    }
+  };
+
+  React.useEffect(() => {
+    return () => {
+      unbindDocEvent();
+    };
+  }, []);
+
+  const activeMenubar = () => {
+    setActive(true);
+    if (!removeDocEventRef.current) {
+      const onDocumentMouseDown = (e: any) => {
+        if (e.defaultPrevented) {
+          return;
+        }
+        const nativeEvent = e.nativeEvent as MouseEvent;
+        if (activeElementRef?.current?.contains(nativeEvent.target as HTMLElement)) {
+          return;
+        }
+        setActive(false);
+        setActiveElementRef(undefined);
+        unbindDocEvent();
+      };
+      const onDocumentClick = (e: any) => {
+        if (e.defaultPrevented) {
+          return;
+        }
+        const nativeEvent = e.nativeEvent as MouseEvent;
+        if (activeElementRef?.current?.contains(nativeEvent.target as HTMLElement)) {
+          return;
+        }
+        setActive(false);
+        setActiveElementRef(undefined);
+        unbindDocEvent();
+      };
+      const { remove: removeMouseDown } = addEventListener(
+        document.documentElement,
+        'mousedown',
+        onDocumentMouseDown,
+      );
+      const { remove: removeClick } = addEventListener(
+        document.documentElement,
+        'click',
+        onDocumentClick,
+      );
+      const remove = () => {
+        removeMouseDown();
+        removeClick();
+      };
+      removeDocEventRef.current = remove;
+    }
+  };
+
+  const inContent = (element: HTMLElement) => {
+    if (menubarContentRef && menubarContentRef.current) {
+      return menubarContentRef.current.contains(element);
+    }
+    return false;
+  };
+
+  const {
+    prefixCls = defaultMenubarProps.prefixCls,
+    className,
+    children,
+    extra,
+  } = props;
+  const baseCls = `${prefixCls}-menubar`;
+  const contextValue: MenubarContext.Contexts = {
+    prefixCls: baseCls,
+    activeMenubar,
+    menubarActived: active === true,
+    inContent,
+    activeElementRef,
+    setActiveElementRef,
+  };
+
+  return (
+    <div className={classnames(baseCls, className)}>
+      <div className={`${baseCls}-content`}>
+        <div className={`${baseCls}-content-inner`} ref={menubarContentRef}>
+          <MenubarContext.Provider value={contextValue}>
+            {children}
+          </MenubarContext.Provider>
+        </div>
+        {extra && <div className={`${baseCls}-content-extras`}>{extra}</div>}
+      </div>
+    </div>
+  );
+};
+
+Menubar.Item = MenubarItem;

package/src/react/menubar/styles/index.less

@@ -0,0 +1,113 @@
+@import '../../styles/variables.less';
+
+@menu-prefix-cls: ~'@{mana-prefix}-menu';
+@menubar-prefix-cls: ~'@{mana-prefix}-menubar';
+
+@menubar-menu-item-color: var(--mana-menu-item-color);
+@menubar-menu-item-hover-color: var(--mana-menu-item-hover-color);
+@menubar-menu-item-hover-bg: var(--mana-menu-item-hover-bg);
+@menubar-menu-item-active-color: var(--mana-menu-item-active-color);
+@menubar-menu-item-active-bg: var(--mana-menu-item-active-bg);
+
+@menubar-item-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
+
+.@{menubar-prefix-cls} {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  margin: 0;
+  padding: 2px;
+
+  &-content {
+    display: flex;
+    flex: 1 1;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  &-content-inner,
+  &-content-extras,
+  &-item,
+  &-item-text {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+  }
+
+  &-content-extras {
+    align-content: center;
+    align-items: center;
+  }
+
+  &-item {
+    position: relative;
+  }
+
+  &-item-hidden {
+    display: none;
+  }
+
+  &-item-text {
+    position: relative;
+    align-content: center;
+    align-items: center;
+    padding: 5px 10px;
+    color: @menubar-menu-item-color;
+    font-size: 13px;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      color: @menubar-menu-item-hover-color;
+      background: @menubar-menu-item-hover-bg;
+    }
+  }
+
+  &-item-text-active,
+  &-item-text-active:hover {
+    color: @menubar-menu-item-active-color;
+    background: @menubar-menu-item-active-bg;
+    box-shadow: @menubar-item-shadow;
+
+    &::after {
+      position: absolute;
+      bottom: 2px;
+      left: 0;
+      z-index: 1000;
+      width: 100%;
+      height: 6px;
+      background: @menubar-menu-item-active-bg;
+      content: ' ';
+    }
+  }
+
+  &-item-dropdown {
+    position: absolute;
+    top: 28px;
+    left: 0;
+    z-index: 9999;
+    min-height: 34px;
+    // transform: translateY(-10px);
+    // visibility: hidden;
+    // opacity: 0;
+    transition: all 0.25s cubic-bezier(0.3, 1.2, 0.2, 1);
+
+    .@{menu-prefix-cls} {
+      min-width: 240px;
+    }
+
+    & > .@{menu-prefix-cls} {
+      border-radius: 0 4px 4px;
+    }
+
+    .@{menu-prefix-cls}-submenu-menu {
+      border-radius: 4px;
+    }
+  }
+
+  &-item-active > &-item-dropdown {
+    transform: translateY(0);
+    visibility: visible;
+    opacity: 1;
+  }
+}

package/src/react/notification/index.tsx

@@ -0,0 +1,208 @@
+import React, { forwardRef, useEffect } from 'react';
+
+import { defaultPrefixCls } from '../constant';
+
+import type {
+  NotificationArgsProps,
+  GlobalConfigProps,
+  NotificationInstance,
+} from './protocol';
+import PurePanel from './pure-panel';
+import { render } from './render';
+import { useInternalNotification } from './use-notification';
+import './style';
+
+export type { NotificationArgsProps } from './protocol';
+
+let globalNotification: GlobalNotification | null = null;
+
+const act: (callback: VoidFunction) => Promise<void> | void = (
+  callback: VoidFunction,
+) => callback();
+
+interface GlobalNotification {
+  fragment: DocumentFragment;
+  instance?: NotificationInstance | null;
+  sync?: VoidFunction;
+}
+
+type Task =
+  | {
+      type: 'open';
+      config: NotificationArgsProps;
+    }
+  | {
+      type: 'destroy';
+      key?: React.Key;
+    };
+
+let taskQueue: Task[] = [];
+
+interface GlobalHolderRef {
+  instance: NotificationInstance;
+  sync: () => void;
+}
+
+const prefixCls = `${defaultPrefixCls}-notification`;
+
+const GlobalHolder = React.forwardRef<
+  GlobalHolderRef,
+  { notificationConfig: GlobalConfigProps; sync: () => void }
+>(function GlobalHolder(props, ref) {
+  const { notificationConfig, sync } = props;
+
+  const [api, holder] = useInternalNotification({
+    ...notificationConfig,
+    prefixCls,
+  });
+
+  useEffect(sync, [sync]);
+
+  React.useImperativeHandle(ref, () => {
+    const instance: NotificationInstance = { ...api };
+
+    Object.keys(instance).forEach((method) => {
+      instance[method as keyof NotificationInstance] = (...args: any[]) => {
+        sync();
+        return (api as any)[method](...args);
+      };
+    });
+
+    return {
+      instance,
+      sync,
+    };
+  });
+
+  return holder;
+});
+
+const GlobalHolderWrapper = forwardRef<GlobalHolderRef, unknown>(
+  function GlobalHolderWrapper(_, ref) {
+    const sync = () => {
+      //
+    };
+
+    React.useEffect(sync, []);
+
+    const dom = <GlobalHolder ref={ref} sync={sync} notificationConfig={{}} />;
+    return dom;
+  },
+);
+
+function flushNotice() {
+  if (!globalNotification) {
+    const holderFragment = document.createDocumentFragment();
+
+    const newNotification: GlobalNotification = {
+      fragment: holderFragment,
+    };
+
+    globalNotification = newNotification;
+
+    // Delay render to avoid sync issue
+    act(() => {
+      render(
+        <GlobalHolderWrapper
+          ref={(node) => {
+            const { instance, sync } = node || {};
+            Promise.resolve()
+              .then(() => {
+                if (!newNotification.instance && instance) {
+                  newNotification.instance = instance;
+                  newNotification.sync = sync;
+                  flushNotice();
+                }
+                return;
+              })
+              .catch(console.error);
+          }}
+        />,
+        holderFragment,
+      );
+    });
+
+    return;
+  }
+
+  // Notification not ready
+  if (!globalNotification.instance) {
+    return;
+  }
+
+  // >>> Execute task
+  taskQueue.forEach((task) => {
+    // eslint-disable-next-line default-case
+    switch (task.type) {
+      case 'open': {
+        act(() => {
+          globalNotification!.instance!.open({
+            ...task.config,
+          });
+        });
+        break;
+      }
+
+      case 'destroy':
+        act(() => {
+          globalNotification?.instance!.destroy(task.key);
+        });
+        break;
+    }
+  });
+
+  // Clean up
+  taskQueue = [];
+}
+
+// ==============================================================================
+// ==                                  Export                                  ==
+// ==============================================================================
+
+function open(config: NotificationArgsProps) {
+  taskQueue.push({
+    type: 'open',
+    config,
+  });
+  flushNotice();
+}
+
+const destroy: BaseMethods['destroy'] = (key) => {
+  taskQueue.push({
+    type: 'destroy',
+    key,
+  });
+  flushNotice();
+};
+
+interface BaseMethods {
+  open: (config: NotificationArgsProps) => void;
+  destroy: (key?: React.Key) => void;
+  /** @private Internal Component. Do not use in your production. */
+  _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
+}
+
+type StaticFn = (config: NotificationArgsProps) => void;
+
+interface NoticeMethods {
+  success: StaticFn;
+  info: StaticFn;
+  warning: StaticFn;
+  error: StaticFn;
+}
+
+const methods: (keyof NoticeMethods)[] = ['success', 'info', 'warning', 'error'];
+
+const baseStaticMethods: BaseMethods = {
+  open,
+  destroy,
+  _InternalPanelDoNotUseOrYouWillBeFired: PurePanel,
+};
+
+const staticMethods = baseStaticMethods as NoticeMethods & BaseMethods;
+
+methods.forEach((type: keyof NoticeMethods) => {
+  staticMethods[type] = (config) => open({ ...config, type });
+});
+
+export const notification = staticMethods;

package/src/react/notification/protocol.ts

@@ -0,0 +1,138 @@
+import { defaultPrefixCls } from '../constant';
+
+export type NotificationPlacement =
+  | 'top'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottom'
+  | 'bottomLeft'
+  | 'bottomRight';
+
+export type IconType = 'success' | 'info' | 'error' | 'warning';
+export type BaseClosableType = { closeIcon?: React.ReactNode } & React.AriaAttributes;
+export type ClosableType = boolean | BaseClosableType;
+
+export interface NotificationArgsProps {
+  message: React.ReactNode;
+  description?: React.ReactNode;
+  btn?: React.ReactNode;
+  key?: React.Key;
+  onClose?: () => void;
+  duration?: number | null;
+  showProgress?: boolean;
+  pauseOnHover?: boolean;
+  icon?: React.ReactNode;
+  placement?: NotificationPlacement;
+  style?: React.CSSProperties;
+  className?: string;
+  readonly type?: IconType;
+  onClick?: () => void;
+  closeIcon?: React.ReactNode;
+  closable?: ClosableType;
+  props?: React.HTMLProps<HTMLDivElement>;
+  role?: 'alert' | 'status';
+}
+
+type StaticFn = (args: NotificationArgsProps) => void;
+
+export interface NotificationInstance {
+  success: StaticFn;
+  error: StaticFn;
+  info: StaticFn;
+  warning: StaticFn;
+  open: StaticFn;
+  destroy(key?: React.Key): void;
+}
+
+export interface GlobalConfigProps {
+  top?: number;
+  bottom?: number;
+  duration?: number;
+  showProgress?: boolean;
+  pauseOnHover?: boolean;
+  prefixCls?: string;
+  getContainer?: () => HTMLElement | ShadowRoot;
+  placement?: NotificationPlacement;
+  closeIcon?: React.ReactNode;
+  closable?: ClosableType;
+  rtl?: boolean;
+  maxCount?: number;
+  props?: React.HTMLProps<HTMLDivElement>;
+}
+export interface NotificationConfig {
+  top?: number;
+  bottom?: number;
+  prefixCls?: string;
+  getContainer?: () => HTMLElement | ShadowRoot;
+  placement?: NotificationPlacement;
+  maxCount?: number;
+  rtl?: boolean;
+  stack?: boolean | { threshold?: number };
+  duration?: number;
+  showProgress?: boolean;
+  pauseOnHover?: boolean;
+}
+
+export const DEFAULT_TOP = 24;
+export const DEFAULT_BOTTOM = 24;
+export const DEFAULT_OFFSET = 24;
+export const DEFAULT_DURATION = 4.5;
+export const DEFAULT_PLACEMENT: NotificationPlacement = 'bottomRight';
+export const NOTIFICATION_PREFIX_CLS = `${defaultPrefixCls}-notification`;
+
+export function getPlacementStyle(
+  placement: NotificationPlacement,
+  top: number = DEFAULT_TOP,
+  bottom: number = DEFAULT_BOTTOM,
+) {
+  let style;
+  switch (placement) {
+    case 'top':
+      style = {
+        left: '50%',
+        transform: 'translateX(-50%)',
+        right: 'auto',
+        top,
+        bottom: 'auto',
+      };
+      break;
+    case 'topLeft':
+      style = {
+        left: 0,
+        top,
+        bottom: 'auto',
+      };
+      break;
+    case 'topRight':
+      style = {
+        right: 0,
+        top,
+        bottom: 'auto',
+      };
+      break;
+    case 'bottom':
+      style = {
+        left: '50%',
+        transform: 'translateX(-50%)',
+        right: 'auto',
+        top: 'auto',
+        bottom,
+      };
+      break;
+    case 'bottomLeft':
+      style = {
+        left: 0,
+        top: 'auto',
+        bottom,
+      };
+      break;
+    default:
+      style = {
+        right: 0,
+        top: 'auto',
+        bottom,
+      };
+      break;
+  }
+  return style;
+}