tiny-ui 0.0.94 → 1.0.0

package/components/popover/demo/placement.md

@@ -1,112 +0,0 @@
-<demo>
-
-### Placement
-
-There are 12 placement options available.
-
-```jsx live
-() => {
-  const btnStyle = {
-    width: 80,
-  };
-
-  const content = (
-    <div>
-      <div>This is the content</div>
-      <div>This is the content</div>
-    </div>
-  );
-
-  return (
-    <table>
-      <tbody>
-        <tr>
-          <td></td>
-          <td>
-            <Popover title="Title" content={content} placement="top-start">
-              <Button style={btnStyle}>TS</Button>
-            </Popover>
-          </td>
-          <td>
-            <Popover title="Title" content={content} placement="top">
-              <Button style={btnStyle}>Top</Button>
-            </Popover>
-          </td>
-          <td>
-            <Popover title="Title" content={content} placement="top-end">
-              <Button style={btnStyle}>TE</Button>
-            </Popover>
-          </td>
-          <td></td>
-        </tr>
-        <tr>
-          <td>
-            <Popover title="Title" content={content} placement="left-start">
-              <Button style={btnStyle}>LS</Button>
-            </Popover>
-          </td>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td>
-            <Popover title="Title" content={content} placement="right-start">
-              <Button style={btnStyle}>RS</Button>
-            </Popover>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <Popover title="Title" content={content} placement="left">
-              <Button style={btnStyle}>Left</Button>
-            </Popover>
-          </td>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td>
-            <Popover title="Title" content={content} placement="right">
-              <Button style={btnStyle}>Right</Button>
-            </Popover>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <Popover title="Title" content={content} placement="left-end">
-              <Button style={btnStyle}>LE</Button>
-            </Popover>
-          </td>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td>
-            <Popover title="Title" content={content} placement="right-end">
-              <Button style={btnStyle}>RE</Button>
-            </Popover>
-          </td>
-        </tr>
-        <tr>
-          <td></td>
-          <td>
-            <Popover title="Title" content={content} placement="bottom-start">
-              <Button style={btnStyle}>BS</Button>
-            </Popover>
-          </td>
-          <td>
-            <Popover title="Title" content={content} placement="bottom">
-              <Button style={btnStyle}>Bottom</Button>
-            </Popover>
-          </td>
-          <td>
-            <Popover title="Title" content={content} placement="bottom-end">
-              <Button style={btnStyle}>BE</Button>
-            </Popover>
-          </td>
-          <td></td>
-        </tr>
-      </tbody>
-    </table>
-  );
-}
-```
-
-</demo>

package/components/popover/demo/trigger.md

@@ -1,37 +0,0 @@
-<demo>
-
-### Four ways to trigger
-
-Mouse to click, right click, focus and move in.
-
-```jsx live
-() => {
-  const content = (
-    <div>
-      <div>This is the content</div>
-      <div>This is the content</div>
-    </div>
-  );
-
-  return (
-    <>
-      <Popover content={content} title="Title" trigger="hover">
-        <Button>Hover me</Button>
-      </Popover>
-      <Popover content={content} title="Title" trigger="focus">
-        <Button>Focus me</Button>
-      </Popover>
-      <br />
-      <br />
-      <Popover content={content} title="Title" trigger="click">
-        <Button>Click me</Button>
-      </Popover>
-      <Popover content={content} title="Title" trigger="contextmenu">
-        <Button>Right Click me</Button>
-      </Popover>
-    </>
-  );
-}
-```
-
-</demo>

package/components/popover/index.md

@@ -1,37 +0,0 @@
-import Basic from './demo/basic.md'
-import Placement from './demo/placement.md'
-import Trigger from './demo/trigger.md'
-import Controlled from './demo/controlled.md'
-
-# Popover
-
-The floating card popped by clicking or hovering.
-
-## Scenario
-
-A simple popup menu to provide extra information or operations.
-
-Comparing with `Tooltip`, besides information `Popover` can also provide action elements like links and buttons.
-
-## Usage
-
-```jsx
-import { Popover } from 'tiny-ui';
-```
-
-## Examples
-
-<layout>
-  <column>
-    <Basic/>
-    <Placement/>
-  </column>
-  <column>
-    <Trigger/>
-    <Controlled/>
-  </column>
-</layout>
-
-## API
-
-

package/components/popover/index.tsx

@@ -1,37 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import Popup from '../popup';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { PopoverProps } from './types';
-
-const Popover = (props: PopoverProps): JSX.Element => {
-  const {
-    theme = 'light',
-    role = 'tooltip',
-    prefixCls: customisedCls,
-    title,
-    content,
-    className,
-    children,
-    ...otherProps
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('popover', configContext.prefixCls, customisedCls);
-  const cls = classNames(className, prefixCls, `${prefixCls}_${theme}`);
-
-  const renderContent = (): React.ReactElement => (
-    <div role={role} className={`${prefixCls}__inner`}>
-      {title && <div className={`${prefixCls}__title`}>{title}</div>}
-      {content && <div className={`${prefixCls}__content`}>{content}</div>}
-    </div>
-  );
-
-  return (
-    <Popup {...otherProps} className={cls} theme={theme} content={renderContent()}>
-      {children}
-    </Popup>
-  );
-};
-
-export default Popover;

package/components/popover/style/_index.scss

@@ -1,43 +0,0 @@
-@import '../../style/variables';
-
-.#{$prefix}-popover {
-
-  &__title {
-    margin: 0;
-    padding: 9px 16px 7px;
-    font-weight: 500;
-    min-width: 177px;
-    min-height: 32px;
-  }
-
-  &__content {
-    padding: 12px 15px;
-  }
-
-  &_light {
-    .#{$prefix}-popover {
-      &__title {
-        color: rgba(0, 0, 0, 0.85);
-        border-bottom: 1px solid #e8e8e8;
-      }
-
-      &__content {
-        color: rgba(0, 0, 0, 0.65);
-      }
-    }
-  }
-
-  &_dark {
-    .#{$prefix}-popover {
-      &__title {
-        color: #fff;
-        border-bottom: 1px solid #4a4a4a;
-      }
-
-      &__content {
-        color: #fff;
-      }
-    }
-  }
-}
-

package/components/popover/style/index.tsx

@@ -1,4 +0,0 @@
-import './index.scss';
-
-// style dependency
-import '../../popup/style/index.scss';

package/components/popover/types.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { PopupProps, Placement } from '../popup/types';
-
-export type PopupPlacement = Placement;
-
-export interface PopoverProps extends Omit<PopupProps, 'title'> {
-  role?: string;
-  placement?: PopupPlacement;
-  title?: React.ReactNode;
-  children: React.ReactElement;
-}

package/components/popup/index.tsx

@@ -1,270 +0,0 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import { createPopper, Instance } from '@popperjs/core';
-import Transition, { AnimationName } from '../transition';
-import Portal from '../portal';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { Placement, PopupProps } from './types';
-
-const Popup = (props: PopupProps): JSX.Element => {
-  const {
-    disabled = false,
-    trigger = 'click',
-    placement = 'top',
-    defaultVisible = false,
-    arrow = true,
-    flip = true,
-    offset = 0,
-    theme = 'light',
-    usePortal = true,
-    mouseEnterDelay = 100,
-    mouseLeaveDelay = 100,
-    biZoom = true,
-    prefixCls: customisedCls,
-    content,
-    visible,
-    onVisibleChange,
-    className,
-    children,
-    ...otherProps
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('popup', configContext.prefixCls, customisedCls);
-  const cls = classNames(
-    className,
-    prefixCls,
-    `${prefixCls}_${placement}`,
-    `${prefixCls}_${theme}`
-  );
-  const [popupVisible, setPopupVisible] = useState('visible' in props ? visible : defaultVisible);
-  const targetRef = useRef<HTMLElement | null>(null);
-  const popupRef = useRef<HTMLDivElement | null>(null);
-  const delayDisplayPopupTimer = useRef<number | undefined>(undefined);
-  const delayHidePopupTimer = useRef<number | undefined>(undefined);
-  const popperRef = useRef<Instance | undefined>(undefined);
-
-  const displayPopup = useCallback(() => {
-    setPopupVisible(true);
-    onVisibleChange && onVisibleChange(true);
-  }, [onVisibleChange]);
-
-  const hidePopup = useCallback(() => {
-    setPopupVisible(false);
-    onVisibleChange && onVisibleChange(false);
-  }, [onVisibleChange]);
-
-  const delayDisplayPopup = useCallback((): void => {
-    delayDisplayPopupTimer.current = window.setTimeout(() => {
-      displayPopup();
-    }, mouseEnterDelay);
-  }, [mouseEnterDelay, displayPopup]);
-
-  const delayHidePopup = useCallback((): void => {
-    delayHidePopupTimer.current = window.setTimeout(() => {
-      hidePopup();
-    }, mouseLeaveDelay);
-  }, [mouseLeaveDelay, hidePopup]);
-
-  const handlePopupOnMouseEnter = (): void => {
-    if (trigger === 'hover') {
-      displayPopup();
-      window.clearTimeout(delayHidePopupTimer.current);
-    }
-  };
-
-  const handlePopupOnMouseLeave = (): void => {
-    if (trigger === 'hover') {
-      delayHidePopup();
-      window.clearTimeout(delayDisplayPopupTimer.current);
-    }
-  };
-
-  const handleTargetOnMouseEnter = useCallback((): void => {
-    delayDisplayPopup();
-    window.clearTimeout(delayHidePopupTimer.current);
-  }, [delayDisplayPopup]);
-
-  const handleTargetOnMouseLeave = useCallback((): void => {
-    delayHidePopup();
-    window.clearTimeout(delayDisplayPopupTimer.current);
-  }, [delayHidePopup]);
-
-  const documentOnClick = useCallback(
-    (e: Event): void => {
-      const target = targetRef.current;
-      const popup = popupRef.current;
-      if (
-        !target ||
-        target.contains(e.target as HTMLElement) ||
-        !popup ||
-        popup.contains(e.target as HTMLElement)
-      )
-        return;
-
-      hidePopup();
-    },
-    [targetRef, hidePopup]
-  );
-
-  const handleTargetOnMouseClick = useCallback(
-    (e: MouseEvent): void => {
-      e.preventDefault();
-      if (popupVisible) {
-        hidePopup();
-      } else {
-        displayPopup();
-        document.addEventListener('click', documentOnClick, true);
-      }
-    },
-    [popupVisible, hidePopup, displayPopup, documentOnClick]
-  );
-
-  const transitionOnEnter = (): void => {
-    const instance = createPopper(
-      targetRef.current as HTMLElement,
-      popupRef.current as HTMLElement,
-      {
-        placement: placement as Placement,
-        modifiers: [
-          {
-            name: 'flip',
-            enabled: flip,
-          },
-          {
-            name: 'offset',
-            options: {
-              offset: [0, arrow ? 10 + offset : 3 + offset],
-            },
-          },
-          {
-            name: 'computeStyles',
-            options: {
-              gpuAcceleration: false,
-              adaptive: false,
-            },
-          },
-        ],
-      }
-    );
-    if (trigger === 'hover') {
-      instance.state.elements.popper.addEventListener('mouseenter', handlePopupOnMouseEnter);
-      instance.state.elements.popper.addEventListener('mouseleave', handlePopupOnMouseLeave);
-    }
-    popperRef.current = instance;
-  };
-
-  const transitionOnExited = (): void => {
-    const popperInstance = popperRef.current;
-    if (popperInstance) {
-      if (trigger === 'hover') {
-        popperInstance.state.elements.popper.removeEventListener(
-          'mouseenter',
-          handlePopupOnMouseEnter
-        );
-        popperInstance.state.elements.popper.removeEventListener(
-          'mouseleave',
-          handlePopupOnMouseLeave
-        );
-      }
-      popperInstance.destroy();
-    }
-  };
-
-  const getAnimationName = () => {
-    const mapping = {
-      'top-start': biZoom ? 'top-start' : 'center-top',
-      top: biZoom ? 'top' : 'center-top',
-      'top-end': biZoom ? 'top-end' : 'center-top',
-      'bottom-start': biZoom ? 'bottom-start' : 'center-bottom',
-      bottom: biZoom ? 'bottom' : 'center-bottom',
-      'bottom-end': biZoom ? 'bottom-end' : 'center-bottom',
-      'left-start': biZoom ? 'bottom-end' : 'center-left',
-      left: biZoom ? 'left' : 'center-left',
-      'left-end': biZoom ? 'top-end' : 'center-left',
-      'right-start': biZoom ? 'bottom-start' : 'center-right',
-      right: biZoom ? 'right' : 'center-right',
-      'right-end': biZoom ? 'top-start' : 'center-right',
-    };
-    return `zoom-${mapping[placement]}` as AnimationName;
-  };
-
-  useEffect(() => {
-    if (disabled) return;
-
-    const target = targetRef.current;
-    if (!target) return;
-
-    if (trigger === 'hover') {
-      target.addEventListener('mouseenter', handleTargetOnMouseEnter);
-      target.addEventListener('mouseleave', handleTargetOnMouseLeave);
-    } else if (trigger === 'click') {
-      target.addEventListener('click', handleTargetOnMouseClick);
-    } else if (trigger === 'focus') {
-      if (target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA') {
-        target.addEventListener('focus', displayPopup);
-        target.addEventListener('blur', hidePopup);
-      } else {
-        target.addEventListener('mousedown', displayPopup);
-        target.addEventListener('mouseup', hidePopup);
-      }
-    } else if (trigger === 'contextmenu') {
-      target.addEventListener('contextmenu', handleTargetOnMouseClick);
-    } else if (trigger === 'manual') {
-      setPopupVisible(props.visible);
-    }
-
-    return (): void => {
-      target.removeEventListener('mouseenter', handleTargetOnMouseEnter);
-      target.removeEventListener('mouseleave', handleTargetOnMouseLeave);
-      target.removeEventListener('click', handleTargetOnMouseClick);
-      target.removeEventListener('focus', displayPopup);
-      target.removeEventListener('blur', hidePopup);
-      target.removeEventListener('mousedown', displayPopup);
-      target.removeEventListener('mouseup', hidePopup);
-      target.removeEventListener('contextmenu', handleTargetOnMouseClick);
-    };
-  }, [
-    props.visible,
-    disabled,
-    targetRef,
-    trigger,
-    handleTargetOnMouseClick,
-    handleTargetOnMouseEnter,
-    handleTargetOnMouseLeave,
-    displayPopup,
-    hidePopup,
-  ]);
-
-  useEffect(() => {
-    if ('visible' in props) {
-      props.visible ? displayPopup() : hidePopup();
-    }
-  }, [props, displayPopup, hidePopup]);
-
-  const renderContent = () => (
-    <Transition
-      in={popupVisible}
-      onEnter={transitionOnEnter}
-      onExited={transitionOnExited}
-      animation={getAnimationName()}>
-      <div {...otherProps} className={cls} ref={popupRef}>
-        {content && arrow && <div data-popper-arrow className={`${prefixCls}__arrow`} />}
-        {content}
-      </div>
-    </Transition>
-  );
-
-  const elementProps = {
-    ref: (ref: HTMLElement | null) => (targetRef.current = ref),
-  };
-
-  return (
-    <>
-      {React.cloneElement(children, elementProps)}
-      {usePortal ? <Portal>{renderContent()}</Portal> : renderContent()}
-    </>
-  );
-};
-
-export default Popup;

package/components/popup/style/_index.scss

@@ -1,84 +0,0 @@
-@import '../../style/variables';
-
-.#{$prefix}-popup {
-  box-sizing: border-box;
-  border-radius: $popover-border-radius;
-  white-space: nowrap;
-  font-size: $font-size-base;
-  text-align: left;
-  box-shadow: $popover-box-shadow;
-  z-index: 999;
-
-  &__arrow, &__arrow:before {
-    width: $popover-arrow-size;
-    height: $popover-arrow-size;
-    box-sizing: border-box;
-    position: absolute;
-  }
-
-  &__arrow:before {
-    content: '';
-    transform: rotate(45deg);
-  }
-
-  &_light {
-    background-color: #fff;
-    color: rgba(0, 0, 0, 0.65);
-    .#{$prefix}-popup {
-      &__arrow:before {
-        background: #fff;
-      }
-    }
-  }
-
-  &_dark {
-    background-color: #262626;
-    color: #fff;
-    .#{$prefix}-popup {
-      &__arrow:before {
-        background: #262626;
-      }
-    }
-  }
-
-  &[data-popper-placement^='top'] {
-    & > .#{$prefix}-popup__arrow {
-      bottom: -$popover-arrow-size / 2;
-
-      &:before {
-        box-shadow: 3px 3px 7px rgba(0, 0, 0, .07);
-      }
-    }
-  }
-
-  &[data-popper-placement^='bottom'] {
-    > .#{$prefix}-popup__arrow {
-      top: -$popover-arrow-size / 2;
-
-      &:before {
-        box-shadow: -2px -2px 5px rgba(0, 0, 0, .06);
-      }
-    }
-  }
-
-  &[data-popper-placement^='left'] {
-    > .#{$prefix}-popup__arrow {
-      right: -$popover-arrow-size / 2;
-
-      &:before {
-        box-shadow: 3px -3px 7px rgba(0, 0, 0, .07);
-      }
-    }
-  }
-
-  &[data-popper-placement^='right'] {
-    > .#{$prefix}-popup__arrow {
-      left: -$popover-arrow-size / 2;
-
-      &:before {
-        box-shadow: -3px 3px 7px rgba(0, 0, 0, .07);
-      }
-    }
-  }
-}
-

package/components/popup/style/index.tsx

@@ -1,4 +0,0 @@
-import './index.scss';
-
-// style dependency
-import '../../popup/style/index.scss';

package/components/popup/types.ts

@@ -1,55 +0,0 @@
-import React from 'react';
-import { BaseProps } from '../_utils/props';
-
-export type TriggerType = 'hover' | 'focus' | 'click' | 'contextmenu' | 'manual';
-export type PopoverTheme = 'light' | 'dark';
-export type Placement =
-  | 'top-start'
-  | 'top'
-  | 'top-end'
-  | 'bottom-start'
-  | 'bottom'
-  | 'bottom-end'
-  | 'left-start'
-  | 'left'
-  | 'left-end'
-  | 'right-start'
-  | 'right'
-  | 'right-end';
-
-export interface PopupProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
-  disabled?: boolean;
-  content?: React.ReactNode;
-  placement?: Placement;
-  visible?: boolean;
-  defaultVisible?: boolean;
-  onVisibleChange?: (visible: boolean) => void;
-
-  /** Determine whether using a portal to wrap the content */
-  usePortal?: boolean;
-
-  /** Provide white and black backgrounds */
-  theme?: PopoverTheme;
-
-  flip?: boolean;
-
-  /** Determine whether display an arrow */
-  arrow?: boolean;
-
-  /** The distance between popup window and trigger target */
-  offset?: number;
-
-  /** Delay in seconds, before tooltip is shown on mouse enter */
-  mouseEnterDelay?: number;
-
-  /** Delay in seconds, before tooltip is hidden on mouse leave */
-  mouseLeaveDelay?: number;
-
-  /** Trigger mode */
-  trigger?: TriggerType;
-
-  /** Determine using a bidirectional effect of the zoom animation */
-  biZoom?: boolean;
-
-  children: React.ReactElement;
-}