@difizen/libro-common 0.3.3 → 1.0.0

package/src/react/dropdown/index.tsx

@@ -0,0 +1,86 @@
+import classNames from 'classnames';
+import RcDropdown from 'rc-dropdown';
+import type { DropdownProps as RcDropdownProps } from 'rc-dropdown/lib/Dropdown';
+import React from 'react';
+import { forwardRef } from 'react';
+import './styles/index.less';
+
+export type Trigger = 'click' | 'hover' | 'contextMenu';
+export type Placement =
+  | 'topLeft'
+  | 'topCenter'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomCenter'
+  | 'bottomRight';
+
+export interface DropdownProps extends RcDropdownProps {
+  prefixCls?: string;
+  className?: string;
+  overlayStyle?: React.CSSProperties;
+  overlayClassName?: string;
+  visible?: boolean;
+  disabled?: boolean;
+  trigger?: Trigger | Trigger[];
+  transitionName?: string;
+  placement?: Placement;
+  forceRender?: boolean;
+  mouseEnterDelay?: number;
+  mouseLeaveDelay?: number;
+  onVisibleChange?: (visible?: boolean) => void;
+  getPopupContainer?: (triggerNode: Element) => HTMLElement;
+}
+
+const defaultProps: Partial<DropdownProps> = {
+  trigger: 'hover',
+  prefixCls: 'mana',
+  mouseEnterDelay: 0.15,
+  mouseLeaveDelay: 0.1,
+  placement: 'bottomLeft',
+};
+
+export const Dropdown = forwardRef(function Dropdown(props: DropdownProps, ref) {
+  const {
+    children,
+    trigger = defaultProps.trigger,
+    prefixCls = defaultProps.prefixCls,
+    disabled,
+    overlay,
+  } = props;
+
+  const dropdownPrefixCls = `${prefixCls}-dropdown`;
+  const child = React.Children.only(children) as React.ReactElement<any>;
+  const dropdownTrigger = React.cloneElement(child, {
+    className: classNames(
+      (children as any).props.className,
+      `${dropdownPrefixCls}-trigger`,
+    ),
+    disabled,
+  });
+
+  const currentTriggers = Array.isArray(trigger) ? trigger : [trigger];
+  const triggers = disabled ? [] : currentTriggers;
+
+  let alignPoint = false;
+  if (triggers && triggers.indexOf('contextMenu') !== -1) {
+    alignPoint = true;
+  }
+
+  const dropdownOverlay = React.Children.only(overlay) as any;
+  const fixedOverlay = (
+    <div className={classNames(`${dropdownPrefixCls}-overlay`)}>{dropdownOverlay}</div>
+  );
+
+  return (
+    <RcDropdown
+      {...props}
+      prefixCls={dropdownPrefixCls}
+      overlay={fixedOverlay}
+      alignPoint={alignPoint}
+      trigger={triggers as string[]}
+      ref={ref}
+    >
+      {dropdownTrigger}
+    </RcDropdown>
+  );
+});

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

@@ -0,0 +1,121 @@
+/* stylelint-disable keyframes-name-pattern */
+
+@import '../../styles/variables.less';
+
+@dropdown-prefix-cls: ~'@{mana-prefix}-dropdown';
+
+.@{dropdown-prefix-cls} {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  z-index: 9999;
+  display: block;
+  max-height: 320px;
+  border-radius: 3px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 20%);
+
+  // &::before {
+  //   position: absolute;
+  //   top: -7px;
+  //   right: 0;
+  //   bottom: -7px;
+  //   left: -7px;
+  //   z-index: -9999;
+  //   opacity: 0.0001;
+  //   content: ' ';
+  // }
+
+  &-hidden {
+    display: none;
+  }
+
+  &-overlay {
+    display: inline-block;
+  }
+
+  &.slide-down-enter.slide-down-enter-active&-placement-bottomLeft,
+  &.slide-down-appear.slide-down-appear-active&-placement-bottomLeft,
+  &.slide-down-enter.slide-down-enter-active&-placement-bottomCenter,
+  &.slide-down-appear.slide-down-appear-active&-placement-bottomCenter,
+  &.slide-down-enter.slide-down-enter-active&-placement-bottomRight,
+  &.slide-down-appear.slide-down-appear-active&-placement-bottomRight {
+    animation-name: x6SlideUpIn;
+  }
+
+  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
+  &.slide-up-enter.slide-up-enter-active&-placement-topCenter,
+  &.slide-up-appear.slide-up-appear-active&-placement-topCenter,
+  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
+  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
+    animation-name: x6SlideDownIn;
+  }
+
+  &.slide-down-leave.slide-down-leave-active&-placement-bottomLeft,
+  &.slide-down-leave.slide-down-leave-active&-placement-bottomCenter,
+  &.slide-down-leave.slide-down-leave-active&-placement-bottomRight {
+    animation-name: x6SlideUpOut;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
+  &.slide-up-leave.slide-up-leave-active&-placement-topCenter,
+  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
+    animation-name: x6SlideDownOut;
+  }
+}
+
+@keyframes x6SlideUpIn {
+  0% {
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+}
+
+@keyframes x6SlideUpOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+}
+
+@keyframes x6SlideDownIn {
+  0% {
+    transform: scaleY(0.8);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+}
+
+@keyframes x6SlideDownOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleY(0.8);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+}

package/src/react/index.spec.ts

@@ -0,0 +1,13 @@
+import 'react';
+import assert from 'assert';
+
+import { Tabs, Dropdown, Menu, Menubar } from './index';
+
+describe('react', () => {
+  it('#react import', () => {
+    assert(Tabs);
+    assert(Dropdown);
+    assert(Menu);
+    assert(Menubar);
+  });
+});

package/src/react/index.ts

@@ -0,0 +1,8 @@
+export * from './menu';
+export * from './menubar';
+
+export * from './layout/boxpanel';
+export * from './layout/splitpanel';
+export * from './tabs';
+export * from './dropdown';
+export * from './notification';

package/src/react/layout/boxpanel/Pane.tsx

@@ -0,0 +1,51 @@
+import clsx from 'classnames';
+import * as React from 'react';
+
+import { Layout } from '../layout';
+
+import { BoxPanelContext } from './context';
+import './styles/index.less';
+
+export interface PaneProps {
+  flex?: number;
+  defaultSize?: number;
+  overflow?: string;
+  //   id: string;
+  zIndex?: number;
+  style?: React.CSSProperties;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Pane: React.FC<PaneProps> = ({
+  children,
+  flex,
+  overflow,
+  defaultSize,
+  //   id,
+  zIndex,
+  style,
+  className,
+}) => {
+  return (
+    <BoxPanelContext.Consumer>
+      {({ prefixCls, direction }) => {
+        const baseCls = `${prefixCls}-boxpanel`;
+        return (
+          <div
+            className={clsx(`${baseCls}-wrapper`, className)}
+            style={{
+              ...style,
+              flex,
+              overflow,
+              zIndex,
+              [Layout.getMinSizeProperty(direction)]: defaultSize,
+            }}
+          >
+            {children}
+          </div>
+        );
+      }}
+    </BoxPanelContext.Consumer>
+  );
+};

package/src/react/layout/boxpanel/context.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { Layout } from '../layout';
+
+export interface BoxPanelContextProps {
+  direction: Layout.direction;
+  prefixCls?: string;
+}
+
+export const BoxPanelContext = React.createContext<BoxPanelContextProps>({
+  direction: 'left-to-right',
+});

package/src/react/layout/boxpanel/index.tsx

@@ -0,0 +1,65 @@
+import clsx from 'classnames';
+import * as React from 'react';
+
+import { defaultPrefixCls } from '../../constant';
+import { Layout } from '../layout';
+
+import { BoxPanelContext } from './context';
+import { Pane } from './Pane';
+import './styles/index.less';
+
+export interface BoxPanelProps {
+  prefixCls?: string | undefined;
+  className?: string | undefined;
+  direction?: Layout.direction;
+  defaultSize?: number | string;
+  flex?: number;
+  zIndex?: number;
+  style?: React.CSSProperties;
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+export type BoxPanel = React.ForwardRefExoticComponent<
+  BoxPanelProps & React.RefAttributes<HTMLDivElement>
+> & { Pane: typeof Pane };
+
+export const BoxPanel: BoxPanel = React.forwardRef<HTMLDivElement, BoxPanelProps>(
+  function BoxPanel(
+    {
+      prefixCls = defaultPrefixCls,
+      className,
+      children = [],
+      direction = 'left-to-right',
+      defaultSize,
+      zIndex,
+      style,
+    },
+    containerRef: React.ForwardedRef<HTMLDivElement>,
+  ) {
+    const baseCls = `${prefixCls}-boxpanel`;
+    const arrayChildren = React.Children.toArray(children);
+
+    return (
+      <div
+        ref={containerRef}
+        className={clsx(baseCls, className)}
+        style={{
+          ...style,
+          flexDirection: Layout.getFlexDirection(direction),
+          zIndex,
+          [Layout.getMinSizeProperty(direction)]: defaultSize,
+        }}
+      >
+        {arrayChildren.map((child, index) => {
+          return (
+            <BoxPanelContext.Provider value={{ prefixCls, direction }} key={index}>
+              {child}
+            </BoxPanelContext.Provider>
+          );
+        })}
+      </div>
+    );
+  },
+) as BoxPanel;
+
+BoxPanel.Pane = Pane;

package/src/react/layout/boxpanel/styles/index.less

@@ -0,0 +1,14 @@
+@import '../../../styles/variables.less';
+
+@boxpanel-prefix-cls: ~'@{mana-prefix}-boxpanel';
+
+.@{boxpanel-prefix-cls} {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  &-wrapper {
+    position: relative;
+    z-index: 1;
+  }
+}

package/src/react/layout/layout.ts

@@ -0,0 +1,85 @@
+import { ResizeHandleVertical, ResizeHandleHorizontal } from '../resize/index';
+
+const flexDirectionMap: Record<
+  string,
+  {
+    direction: any;
+    size: 'width' | 'height';
+    domSize: 'clientWidth' | 'clientHeight';
+    minSize: 'minWidth' | 'minHeight';
+    maxSize: 'maxWidth' | 'maxHeight';
+  }
+> = {
+  'left-to-right': {
+    direction: 'row',
+    size: 'width',
+    domSize: 'clientHeight',
+    minSize: 'minWidth',
+    maxSize: 'maxWidth',
+  },
+  'right-to-left': {
+    direction: 'row-reverse',
+    size: 'width',
+    domSize: 'clientHeight',
+    minSize: 'minWidth',
+    maxSize: 'maxWidth',
+  },
+  'top-to-bottom': {
+    direction: 'column',
+    size: 'height',
+    domSize: 'clientWidth',
+    minSize: 'minHeight',
+    maxSize: 'maxHeight',
+  },
+  'bottom-to-top': {
+    direction: 'column-reverse',
+    size: 'height',
+    domSize: 'clientWidth',
+    minSize: 'minHeight',
+    maxSize: 'maxHeight',
+  },
+};
+
+export namespace Layout {
+  export type direction =
+    | 'left-to-right'
+    | 'right-to-left'
+    | 'top-to-bottom'
+    | 'bottom-to-top';
+
+  export type alignment = 'horizontal' | 'vertical';
+
+  export function getFlexDirection(direction: Layout.direction) {
+    return flexDirectionMap[direction].direction;
+  }
+
+  export function getSizeProperty(direction: Layout.direction) {
+    return flexDirectionMap[direction].size;
+  }
+
+  export function getDomSizeProperty(direction: Layout.direction) {
+    return flexDirectionMap[direction].domSize;
+  }
+
+  export function getMinSizeProperty(direction: Layout.direction) {
+    return flexDirectionMap[direction].minSize;
+  }
+
+  export function getMaxSizeProperty(direction: Layout.direction) {
+    return flexDirectionMap[direction].maxSize;
+  }
+
+  export function getResizeHandle(direction: Layout.direction) {
+    if (direction === 'bottom-to-top' || direction === 'top-to-bottom') {
+      return ResizeHandleVertical;
+    }
+    return ResizeHandleHorizontal;
+  }
+
+  export function getTabbarDirection(direction: Layout.direction) {
+    if (direction === 'bottom-to-top' || direction === 'top-to-bottom') {
+      return 'row';
+    }
+    return 'column';
+  }
+}

package/src/react/layout/splitpanel/context.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+export interface ResizeHandle {
+  setSize: (targetSize?: number, isLatter?: boolean) => void;
+  setRelativeSize: (prev: number, next: number, isLatter: boolean) => void;
+  getSize: (isLatter: boolean) => number;
+  getRelativeSize: (isLatter: boolean) => number[];
+  lockSize: (lock: boolean | undefined, isLatter: boolean) => void;
+  setMaxSize: (lock: boolean | undefined, isLatter: boolean) => void;
+  hidePanel: (show?: boolean) => void;
+}
+
+export interface SplitPanelContextProps extends ResizeHandle {
+  prefixCls?: string;
+}
+
+export const SplitPanelContext = React.createContext<SplitPanelContextProps>({
+  setSize: () => {
+    //
+  },
+  setRelativeSize: () => {
+    //
+  },
+  getSize: () => 0,
+  getRelativeSize: () => [0, 0],
+  lockSize: () => {
+    //
+  },
+  setMaxSize: () => {
+    //
+  },
+  hidePanel: () => {
+    //
+  },
+});