@difizen/libro-common 0.3.3 → 1.0.0

package/src/react/notification/pure-panel.tsx

@@ -0,0 +1,119 @@
+import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
+import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
+import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import classNames from 'classnames';
+import { Notice } from 'rc-notification';
+import type { NoticeProps } from 'rc-notification/es/Notice';
+import * as React from 'react';
+
+import type { IconType } from './protocol';
+import { NOTIFICATION_PREFIX_CLS } from './protocol';
+
+export const TypeIcon = {
+  info: <InfoCircleFilled />,
+  success: <CheckCircleFilled />,
+  error: <CloseCircleFilled />,
+  warning: <ExclamationCircleFilled />,
+  loading: <LoadingOutlined />,
+};
+
+export function getCloseIcon(
+  prefixCls: string,
+  closeIcon?: React.ReactNode,
+): React.ReactNode {
+  if (closeIcon === null || closeIcon === false) {
+    return null;
+  }
+  return closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />;
+}
+
+export interface PureContentProps {
+  prefixCls: string;
+  icon?: React.ReactNode;
+  message?: React.ReactNode;
+  description?: React.ReactNode;
+  btn?: React.ReactNode;
+  type?: IconType;
+  role?: 'alert' | 'status';
+}
+
+const typeToIcon = {
+  success: CheckCircleFilled,
+  info: InfoCircleFilled,
+  error: CloseCircleFilled,
+  warning: ExclamationCircleFilled,
+};
+
+export const PureContent: React.FC<PureContentProps> = (props) => {
+  const { prefixCls, icon, type, message, description, btn, role = 'alert' } = props;
+  let iconNode: React.ReactNode = null;
+  if (icon) {
+    iconNode = <span className={`${prefixCls}-icon`}>{icon}</span>;
+  } else if (type) {
+    iconNode = React.createElement(typeToIcon[type] || null, {
+      className: classNames(`${prefixCls}-icon`, `${prefixCls}-icon-${type}`),
+    });
+  }
+  return (
+    <div className={classNames({ [`${prefixCls}-with-icon`]: iconNode })} role={role}>
+      {iconNode}
+      <div className={`${prefixCls}-message`}>{message}</div>
+      <div className={`${prefixCls}-description`}>{description}</div>
+      {btn && <div className={`${prefixCls}-btn`}>{btn}</div>}
+    </div>
+  );
+};
+
+export interface PurePanelProps
+  extends Omit<NoticeProps, 'prefixCls' | 'eventKey'>,
+    Omit<PureContentProps, 'prefixCls' | 'children'> {
+  prefixCls?: string;
+}
+
+/** @private Internal Component. Do not use in your production. */
+const PurePanel: React.FC<PurePanelProps> = (props) => {
+  const {
+    prefixCls = NOTIFICATION_PREFIX_CLS,
+    className,
+    icon,
+    type,
+    message,
+    description,
+    btn,
+    closable = true,
+    closeIcon,
+    className: notificationClassName,
+    ...restProps
+  } = props;
+
+  return (
+    <div className={classNames(`${prefixCls}-pure-panel`, className)}>
+      <Notice
+        {...restProps}
+        prefixCls={prefixCls}
+        eventKey="pure"
+        duration={null}
+        closable={closable}
+        className={classNames({
+          notificationClassName,
+        })}
+        closeIcon={getCloseIcon(NOTIFICATION_PREFIX_CLS, closeIcon)}
+        content={
+          <PureContent
+            prefixCls={prefixCls}
+            icon={icon}
+            type={type}
+            message={message}
+            description={description}
+            btn={btn}
+          />
+        }
+      />
+    </div>
+  );
+};
+
+export default PurePanel;

package/src/react/notification/render.ts

@@ -0,0 +1,92 @@
+import type * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import type { Root } from 'react-dom/client';
+
+// Let compiler not to search module usage
+const fullClone = {
+  ...ReactDOM,
+} as typeof ReactDOM & {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: {
+    usingClientEntryPoint?: boolean;
+  };
+  createRoot?: CreateRoot;
+};
+
+type CreateRoot = (container: ContainerType) => Root;
+
+const { version, render: reactRender, unmountComponentAtNode } = fullClone;
+
+let createRoot: CreateRoot | undefined;
+try {
+  const mainVersion = Number((version || '').split('.')[0]);
+  if (mainVersion >= 18) {
+    ({ createRoot } = fullClone);
+  }
+} catch (e) {
+  // Do nothing;
+}
+
+function toggleWarning(skip: boolean) {
+  const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = fullClone;
+
+  if (
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED &&
+    typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === 'object'
+  ) {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
+  }
+}
+
+const MARK = '__rc_react_root__';
+
+// ========================== Render ==========================
+type ContainerType = (Element | DocumentFragment) & {
+  [MARK]?: Root;
+};
+
+function modernRender(node: React.ReactElement, container: ContainerType) {
+  toggleWarning(true);
+  const root = container[MARK] || createRoot!(container);
+  toggleWarning(false);
+
+  root.render(node);
+
+  container[MARK] = root;
+}
+
+function legacyRender(node: React.ReactElement, container: ContainerType) {
+  reactRender(node, container);
+}
+
+export function render(node: React.ReactElement, container: ContainerType) {
+  if (createRoot) {
+    modernRender(node, container);
+    return;
+  }
+
+  legacyRender(node, container);
+}
+
+// ========================= Unmount ==========================
+async function modernUnmount(container: ContainerType) {
+  // Delay to unmount to avoid React 18 sync warning
+  return Promise.resolve().then(() => {
+    container[MARK]?.unmount();
+
+    delete container[MARK];
+    return;
+  });
+}
+
+function legacyUnmount(container: ContainerType) {
+  unmountComponentAtNode(container);
+}
+
+export async function unmount(container: ContainerType) {
+  if (createRoot !== undefined) {
+    // Delay to unmount to avoid React 18 sync warning
+    return modernUnmount(container);
+  }
+
+  legacyUnmount(container);
+}

package/src/react/notification/style/index.less

@@ -0,0 +1,192 @@
+@import '../../styles/variables.less';
+@import './placement';
+
+@notification-prefix-cls: ~'@{mana-prefix}-notification';
+
+.@{notification-prefix-cls} {
+  position: fixed;
+  z-index: 100;
+  margin-right: 24px;
+
+  &-close-icon {
+    font-size: 14px;
+    cursor: pointer;
+  }
+
+  &-hook-holder {
+    position: relative;
+  }
+
+  &-notice {
+    position: relative;
+    width: 384px;
+    max-width: ~'calc(100vw - 24px * 2)';
+    margin-bottom: 16px;
+    margin-left: auto;
+    padding: 16px 18px 10px;
+    overflow: hidden;
+    line-height: 32px;
+    word-wrap: break-word;
+    background: var(--mana-color-bg-container);
+    border-radius: 8px;
+    box-shadow: 0 1px 6px rgba(0, 0, 0, 20%);
+
+    .@{notification-prefix-cls}-top &,
+    .@{notification-prefix-cls}-bottom & {
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    .@{notification-prefix-cls}-topLeft &,
+    .@{notification-prefix-cls}-bottomLeft & {
+      margin-right: auto;
+      margin-left: 0;
+    }
+
+    &-message {
+      margin-bottom: 8px;
+      color: var(--mana-text-color);
+      font-size: 16px;
+      line-height: 24px;
+
+      // https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
+      &-single-line-auto-margin {
+        display: block;
+        width: ~'calc(384px - 8px * 2 - 24px - 48px - 100%)';
+        max-width: 4px;
+        background-color: transparent;
+        pointer-events: none;
+
+        &::before {
+          display: block;
+          content: '';
+        }
+      }
+    }
+
+    &-description {
+      font-size: 14px;
+    }
+
+    &-closable &-message {
+      padding-right: 24px;
+    }
+
+    &-with-icon &-message {
+      margin-bottom: 4px;
+      margin-left: 48px;
+      font-size: 16px;
+    }
+
+    &-with-icon &-description {
+      margin-left: 48px;
+      font-size: 14px;
+    }
+
+    // Icon & color style in different selector level
+    // https://github.com/ant-design/ant-design/issues/16503
+    // https://github.com/ant-design/ant-design/issues/15512
+    &-icon {
+      position: absolute;
+      margin-left: 4px;
+      font-size: 24px;
+      line-height: 24px;
+    }
+
+    .@{iconfont-css-prefix}&-icon {
+      &-success {
+        color: var(--mana-success-color);
+      }
+
+      &-info {
+        color: var(--mana-info-color);
+      }
+
+      &-warning {
+        color: var(--mana-warning-color);
+      }
+
+      &-error {
+        color: var(--mana-error-color);
+      }
+    }
+
+    &-close {
+      position: absolute;
+      top: 16px;
+      right: 22px;
+      color: var(--mana-text-secondary);
+      outline: none;
+
+      &:hover {
+        color: var(--mana-text-tertiary);
+        cursor: pointer;
+      }
+    }
+
+    &-btn {
+      float: right;
+      margin-top: 16px;
+    }
+  }
+
+  .notification-fade-effect {
+    animation-duration: 0.24s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: both;
+  }
+
+  &-fade-enter,
+  &-fade-appear {
+    .notification-fade-effect();
+
+    opacity: 0;
+    animation-play-state: paused;
+  }
+
+  &-fade-leave {
+    .notification-fade-effect();
+
+    animation-duration: 0.2s;
+    animation-play-state: paused;
+  }
+
+  &-fade-enter&-fade-enter-active,
+  &-fade-appear&-fade-appear-active {
+    animation-name: notification-fade-in;
+    animation-play-state: running;
+  }
+
+  &-fade-leave&-fade-leave-active {
+    animation-name: notification-fade-out;
+    animation-play-state: running;
+  }
+}
+
+@keyframes notification-fade-in {
+  0% {
+    left: 384px;
+    opacity: 0;
+  }
+
+  100% {
+    left: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes notification-fade-out {
+  0% {
+    max-height: 150px;
+    margin-bottom: 16px;
+    opacity: 1;
+  }
+
+  100% {
+    max-height: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: 0;
+  }
+}

package/src/react/notification/style/index.tsx

@@ -0,0 +1 @@
+import './index.less';

package/src/react/notification/style/placement.less

@@ -0,0 +1,68 @@
+.@{notification-prefix-cls} {
+  &-top,
+  &-bottom {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  &-top {
+    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
+    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
+      animation-name: notification-top-fade-in;
+    }
+  }
+
+  &-bottom {
+    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
+    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
+      animation-name: notification-bottom-fade-in;
+    }
+  }
+
+  &-topLeft,
+  &-bottomLeft {
+    margin-right: 0;
+    margin-left: 16px;
+
+    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
+    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
+      animation-name: notification-left-fade-in;
+    }
+  }
+}
+
+@keyframes notification-top-fade-in {
+  0% {
+    margin-top: -100%;
+    opacity: 0;
+  }
+
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes notification-bottom-fade-in {
+  0% {
+    margin-bottom: -100%;
+    opacity: 0;
+  }
+
+  100% {
+    margin-bottom: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes notification-left-fade-in {
+  0% {
+    right: 384px;
+    opacity: 0;
+  }
+
+  100% {
+    right: 0;
+    opacity: 1;
+  }
+}

package/src/react/notification/use-notification.tsx

@@ -0,0 +1,186 @@
+import { CloseOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import type { CSSMotionProps } from 'rc-motion';
+import { useNotification as useRcNotification } from 'rc-notification';
+import type {
+  NotificationAPI,
+  NotificationConfig as RcNotificationConfig,
+} from 'rc-notification';
+import type { ReactNode } from 'react';
+import { useImperativeHandle } from 'react';
+import { forwardRef } from 'react';
+import { useMemo, useRef } from 'react';
+
+import type {
+  NotificationArgsProps,
+  NotificationConfig,
+  NotificationInstance,
+  NotificationPlacement,
+} from './protocol';
+import { DEFAULT_DURATION } from './protocol';
+import { getPlacementStyle } from './protocol';
+import { DEFAULT_OFFSET } from './protocol';
+import { NOTIFICATION_PREFIX_CLS } from './protocol';
+import { DEFAULT_PLACEMENT } from './protocol';
+import { PureContent } from './pure-panel';
+
+export function getCloseIcon(prefixCls: string, closeIcon?: ReactNode): ReactNode {
+  if (closeIcon === null || closeIcon === false) {
+    return null;
+  }
+  return closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />;
+}
+type HolderProps = NotificationConfig & {
+  onAllRemoved?: VoidFunction;
+};
+
+interface HolderRef extends NotificationAPI {
+  prefixCls: string;
+  notification?: RcNotificationConfig;
+}
+
+const Holder = forwardRef<HolderRef, HolderProps>(function Holder(props, ref) {
+  const {
+    top,
+    bottom,
+    getContainer: staticGetContainer,
+    maxCount,
+    onAllRemoved,
+    stack,
+    duration,
+    pauseOnHover = true,
+    showProgress,
+  } = props;
+
+  const prefixCls = NOTIFICATION_PREFIX_CLS;
+
+  // =============================== Style ===============================
+  const getStyle = (placement: NotificationPlacement): React.CSSProperties =>
+    getPlacementStyle(placement, top ?? DEFAULT_OFFSET, bottom ?? DEFAULT_OFFSET);
+
+  function getMotion(prefixCls: string): CSSMotionProps {
+    return {
+      motionName: `${prefixCls}-fade`,
+    };
+  }
+
+  // ============================== Motion ===============================
+  const getNotificationMotion = () => getMotion(prefixCls);
+
+  // ============================== Origin ===============================
+  const [api, holder] = useRcNotification({
+    prefixCls,
+    style: getStyle,
+    motion: getNotificationMotion,
+    closable: true,
+    closeIcon: getCloseIcon(prefixCls),
+    duration: duration ?? DEFAULT_DURATION,
+    getContainer: () => staticGetContainer?.() || document.body,
+    maxCount,
+    pauseOnHover,
+    showProgress,
+    onAllRemoved,
+  });
+
+  // ================================ Ref ================================
+  useImperativeHandle(ref, () => ({ ...api, prefixCls }));
+
+  return holder;
+});
+
+export function useInternalNotification(
+  notificationConfig?: HolderProps,
+): readonly [NotificationInstance, React.ReactElement] {
+  const holderRef = useRef<HolderRef>(null);
+
+  // ================================ API ================================
+  const wrapAPI = useMemo<NotificationInstance>(() => {
+    // Wrap with notification content
+
+    // >>> Open
+    const open = (config: NotificationArgsProps) => {
+      if (!holderRef.current) {
+        return;
+      }
+
+      const { open: originOpen, prefixCls, notification } = holderRef.current;
+
+      const noticePrefixCls = `${prefixCls}-notice`;
+
+      const {
+        message,
+        description,
+        icon,
+        type,
+        btn,
+        className,
+        style,
+        role = 'alert',
+        closeIcon,
+        closable,
+        ...restConfig
+      } = config;
+
+      const realCloseIcon = getCloseIcon(
+        noticePrefixCls,
+        typeof closeIcon !== 'undefined' ? closeIcon : notification?.closeIcon,
+      );
+
+      return originOpen({
+        // use placement from props instead of hard-coding "topRight"
+        placement: notificationConfig?.placement ?? DEFAULT_PLACEMENT,
+        ...restConfig,
+        content: (
+          <PureContent
+            prefixCls={noticePrefixCls}
+            icon={icon}
+            type={type}
+            message={message}
+            description={description}
+            btn={btn}
+            role={role}
+          />
+        ),
+        className: classNames(
+          type && `${noticePrefixCls}-${type}`,
+          className,
+          notification?.className,
+        ),
+        style: { ...notification?.style, ...style },
+        closeIcon: realCloseIcon,
+        closable: closable ?? !!realCloseIcon,
+      });
+    };
+
+    // >>> destroy
+    const destroy = (key?: React.Key) => {
+      if (key !== undefined) {
+        holderRef.current?.close(key);
+      } else {
+        holderRef.current?.destroy();
+      }
+    };
+
+    const clone = {
+      open,
+      destroy,
+    } as NotificationInstance;
+
+    const keys = ['success', 'info', 'warning', 'error'] as const;
+    keys.forEach((type) => {
+      clone[type] = (config) =>
+        open({
+          ...config,
+          type,
+        });
+    });
+
+    return clone;
+  }, [notificationConfig?.placement]);
+
+  // ============================== Return ===============================
+  return [
+    wrapAPI,
+    <Holder key="notification-holder" {...notificationConfig} ref={holderRef} />,
+  ] as const;
+}