@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/es/notification/index.js

@@ -1,339 +1,242 @@
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { render } from "rc-util/es/React/render";
+import * as React from 'react';
+import ConfigProvider, { globalConfig } from "../config-provider";
+import PurePanel from "./PurePanel";
+import useNotification, { useInternalNotification } from "./useNotification";
+var notification = null;
 
-var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
+var act = function act(callback) {
+  return callback();
+};
 
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
+var taskQueue = [];
+var defaultGlobalConfig = {};
+
+function getGlobalContext() {
+  var _defaultGlobalConfig = defaultGlobalConfig,
+      globalPrefixCls = _defaultGlobalConfig.prefixCls,
+      globalGetContainer = _defaultGlobalConfig.getContainer,
+      rtl = _defaultGlobalConfig.rtl,
+      maxCount = _defaultGlobalConfig.maxCount,
+      top = _defaultGlobalConfig.top,
+      bottom = _defaultGlobalConfig.bottom;
+  var mergedPrefixCls = globalPrefixCls !== null && globalPrefixCls !== void 0 ? globalPrefixCls : globalConfig().getPrefixCls('notification');
+  var mergedContainer = (globalGetContainer === null || globalGetContainer === void 0 ? void 0 : globalGetContainer()) || document.body;
+  return {
+    prefixCls: mergedPrefixCls,
+    container: mergedContainer,
+    rtl: rtl,
+    maxCount: maxCount,
+    top: top,
+    bottom: bottom
+  };
+}
 
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
+var GlobalHolder = /*#__PURE__*/React.forwardRef(function (_, ref) {
+  var _React$useState = React.useState(),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      prefixCls = _React$useState2[0],
+      setPrefixCls = _React$useState2[1];
+
+  var _React$useState3 = React.useState(),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      container = _React$useState4[0],
+      setContainer = _React$useState4[1];
+
+  var _React$useState5 = React.useState(),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      maxCount = _React$useState6[0],
+      setMaxCount = _React$useState6[1];
+
+  var _React$useState7 = React.useState(),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      rtl = _React$useState8[0],
+      setRTL = _React$useState8[1];
+
+  var _React$useState9 = React.useState(),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      top = _React$useState10[0],
+      setTop = _React$useState10[1];
+
+  var _React$useState11 = React.useState(),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      bottom = _React$useState12[0],
+      setBottom = _React$useState12[1];
+
+  var _useInternalNotificat = useInternalNotification({
+    prefixCls: prefixCls,
+    getContainer: function getContainer() {
+      return container;
+    },
+    maxCount: maxCount,
+    rtl: rtl,
+    top: top,
+    bottom: bottom
+  }),
+      _useInternalNotificat2 = _slicedToArray(_useInternalNotificat, 2),
+      api = _useInternalNotificat2[0],
+      holder = _useInternalNotificat2[1];
+
+  var global = globalConfig();
+  var rootPrefixCls = global.getRootPrefixCls();
+  var rootIconPrefixCls = global.getIconPrefixCls();
+
+  var sync = function sync() {
+    var _getGlobalContext = getGlobalContext(),
+        nextGlobalPrefixCls = _getGlobalContext.prefixCls,
+        nextGlobalContainer = _getGlobalContext.container,
+        nextGlobalMaxCount = _getGlobalContext.maxCount,
+        nextGlobalRTL = _getGlobalContext.rtl,
+        nextTop = _getGlobalContext.top,
+        nextBottom = _getGlobalContext.bottom;
+
+    setPrefixCls(nextGlobalPrefixCls);
+    setContainer(nextGlobalContainer);
+    setMaxCount(nextGlobalMaxCount);
+    setRTL(nextGlobalRTL);
+    setTop(nextTop);
+    setBottom(nextBottom);
+  };
 
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  React.useEffect(sync, []);
+  React.useImperativeHandle(ref, function () {
+    var instance = _extends({}, api);
+
+    Object.keys(instance).forEach(function (method) {
+      instance[method] = function () {
+        sync();
+        return api[method].apply(api, arguments);
+      };
+    });
+    return {
+      instance: instance,
+      sync: sync
+    };
   });
-};
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    prefixCls: rootPrefixCls,
+    iconPrefixCls: rootIconPrefixCls
+  }, holder);
+});
 
-import CheckCircleOutlined from "@ant-design/icons/es/icons/CheckCircleOutlined";
-import CloseCircleOutlined from "@ant-design/icons/es/icons/CloseCircleOutlined";
-import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
-import ExclamationCircleOutlined from "@ant-design/icons/es/icons/ExclamationCircleOutlined";
-import InfoCircleOutlined from "@ant-design/icons/es/icons/InfoCircleOutlined";
-import classNames from 'classnames';
-import Notification from 'rc-notification';
-import * as React from 'react';
-import ConfigProvider, { globalConfig } from "../config-provider";
-import createUseNotification from "./hooks/useNotification";
-var notificationInstance = {};
-var defaultDuration = 4.5;
-var defaultTop = 24;
-var defaultBottom = 24;
-var defaultPrefixCls = '';
-var defaultPlacement = 'topRight';
-var defaultGetContainer;
-var defaultCloseIcon;
-var rtl = false;
-var maxCount;
-
-function setNotificationConfig(options) {
-  var duration = options.duration,
-      placement = options.placement,
-      bottom = options.bottom,
-      top = options.top,
-      getContainer = options.getContainer,
-      closeIcon = options.closeIcon,
-      prefixCls = options.prefixCls;
-
-  if (prefixCls !== undefined) {
-    defaultPrefixCls = prefixCls;
-  }
-
-  if (duration !== undefined) {
-    defaultDuration = duration;
-  }
-
-  if (placement !== undefined) {
-    defaultPlacement = placement;
-  } else if (options.rtl) {
-    defaultPlacement = 'topLeft';
-  }
-
-  if (bottom !== undefined) {
-    defaultBottom = bottom;
-  }
-
-  if (top !== undefined) {
-    defaultTop = top;
-  }
-
-  if (getContainer !== undefined) {
-    defaultGetContainer = getContainer;
-  }
-
-  if (closeIcon !== undefined) {
-    defaultCloseIcon = closeIcon;
-  }
-
-  if (options.rtl !== undefined) {
-    rtl = options.rtl;
-  }
-
-  if (options.maxCount !== undefined) {
-    maxCount = options.maxCount;
-  }
-}
+function flushNotice() {
+  if (!notification) {
+    var holderFragment = document.createDocumentFragment();
+    var newNotification = {
+      fragment: holderFragment
+    };
+    notification = newNotification; // Delay render to avoid sync issue
+
+    act(function () {
+      render( /*#__PURE__*/React.createElement(GlobalHolder, {
+        ref: function ref(node) {
+          var _ref = node || {},
+              instance = _ref.instance,
+              sync = _ref.sync;
+
+          Promise.resolve().then(function () {
+            if (!newNotification.instance && instance) {
+              newNotification.instance = instance;
+              newNotification.sync = sync;
+              flushNotice();
+            }
+          });
+        }
+      }), holderFragment);
+    });
+    return;
+  } // Notification not ready
 
-function getPlacementStyle(placement) {
-  var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTop;
-  var bottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultBottom;
-  var style;
-
-  switch (placement) {
-    case 'top':
-      style = {
-        left: '50%',
-        transform: 'translateX(-50%)',
-        right: 'auto',
-        top: top,
-        bottom: 'auto'
-      };
-      break;
 
-    case 'topLeft':
-      style = {
-        left: 0,
-        top: top,
-        bottom: 'auto'
-      };
-      break;
+  if (!notification.instance) {
+    return;
+  } // >>> Execute task
+
+
+  taskQueue.forEach(function (task) {
+    // eslint-disable-next-line default-case
+    switch (task.type) {
+      case 'open':
+        {
+          act(function () {
+            notification.instance.open(_extends(_extends({}, defaultGlobalConfig), task.config));
+          });
+          break;
+        }
 
-    case 'topRight':
-      style = {
-        right: 0,
-        top: top,
-        bottom: 'auto'
-      };
-      break;
-
-    case 'bottom':
-      style = {
-        left: '50%',
-        transform: 'translateX(-50%)',
-        right: 'auto',
-        top: 'auto',
-        bottom: bottom
-      };
-      break;
+      case 'destroy':
+        act(function () {
+          notification === null || notification === void 0 ? void 0 : notification.instance.destroy(task.key);
+        });
+        break;
+    }
+  }); // Clean up
 
-    case 'bottomLeft':
-      style = {
-        left: 0,
-        top: 'auto',
-        bottom: bottom
-      };
-      break;
+  taskQueue = [];
+} // ==============================================================================
+// ==                                  Export                                  ==
+// ==============================================================================
 
-    default:
-      style = {
-        right: 0,
-        top: 'auto',
-        bottom: bottom
-      };
-      break;
-  }
 
-  return style;
-}
+var methods = ['success', 'info', 'warning', 'error'];
 
-function getNotificationInstance(args, callback) {
-  var _args$placement = args.placement,
-      placement = _args$placement === void 0 ? defaultPlacement : _args$placement,
-      top = args.top,
-      bottom = args.bottom,
-      _args$getContainer = args.getContainer,
-      getContainer = _args$getContainer === void 0 ? defaultGetContainer : _args$getContainer,
-      customizePrefixCls = args.prefixCls;
-
-  var _globalConfig = globalConfig(),
-      getPrefixCls = _globalConfig.getPrefixCls,
-      getIconPrefixCls = _globalConfig.getIconPrefixCls;
-
-  var prefixCls = getPrefixCls('notification', customizePrefixCls || defaultPrefixCls);
-  var iconPrefixCls = getIconPrefixCls();
-  var cacheKey = "".concat(prefixCls, "-").concat(placement);
-  var cacheInstance = notificationInstance[cacheKey];
-
-  if (cacheInstance) {
-    Promise.resolve(cacheInstance).then(function (instance) {
-      callback({
-        prefixCls: "".concat(prefixCls, "-notice"),
-        iconPrefixCls: iconPrefixCls,
-        instance: instance
-      });
-    });
-    return;
-  }
-
-  var notificationClass = classNames("".concat(prefixCls, "-").concat(placement), _defineProperty({}, "".concat(prefixCls, "-rtl"), rtl === true));
-  notificationInstance[cacheKey] = new Promise(function (resolve) {
-    Notification.newInstance({
-      prefixCls: prefixCls,
-      className: notificationClass,
-      style: getPlacementStyle(placement, top, bottom),
-      getContainer: getContainer,
-      maxCount: maxCount
-    }, function (notification) {
-      resolve(notification);
-      callback({
-        prefixCls: "".concat(prefixCls, "-notice"),
-        iconPrefixCls: iconPrefixCls,
-        instance: notification
-      });
-    });
+function setNotificationGlobalConfig(config) {
+  defaultGlobalConfig = _extends(_extends({}, defaultGlobalConfig), config); // Trigger sync for it
+
+  act(function () {
+    var _a;
+
+    (_a = notification === null || notification === void 0 ? void 0 : notification.sync) === null || _a === void 0 ? void 0 : _a.call(notification);
   });
 }
 
-var typeToIcon = {
-  success: CheckCircleOutlined,
-  info: InfoCircleOutlined,
-  error: CloseCircleOutlined,
-  warning: ExclamationCircleOutlined
-};
-
-function getRCNoticeProps(args, prefixCls, iconPrefixCls) {
-  var durationArg = args.duration,
-      icon = args.icon,
-      type = args.type,
-      description = args.description,
-      message = args.message,
-      btn = args.btn,
-      onClose = args.onClose,
-      onClick = args.onClick,
-      key = args.key,
-      style = args.style,
-      className = args.className,
-      _args$closeIcon = args.closeIcon,
-      closeIcon = _args$closeIcon === void 0 ? defaultCloseIcon : _args$closeIcon,
-      props = args.props;
-  var duration = durationArg === undefined ? defaultDuration : durationArg;
-  var iconNode = null;
-
-  if (icon) {
-    iconNode = /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-icon")
-    }, args.icon);
-  } else if (type) {
-    iconNode = /*#__PURE__*/React.createElement(typeToIcon[type] || null, {
-      className: "".concat(prefixCls, "-icon ").concat(prefixCls, "-icon-").concat(type)
-    });
-  }
-
-  var closeIconToRender = /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-close-x")
-  }, closeIcon || /*#__PURE__*/React.createElement(CloseOutlined, {
-    className: "".concat(prefixCls, "-close-icon")
-  }));
-  var autoMarginTag = !description && iconNode ? /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-message-single-line-auto-margin")
-  }) : null;
-  return {
-    content: /*#__PURE__*/React.createElement(ConfigProvider, {
-      iconPrefixCls: iconPrefixCls
-    }, /*#__PURE__*/React.createElement("div", {
-      className: iconNode ? "".concat(prefixCls, "-with-icon") : '',
-      role: "alert"
-    }, iconNode, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-message")
-    }, autoMarginTag, message), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-description")
-    }, description), btn ? /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-btn")
-    }, btn) : null)),
-    duration: duration,
-    closable: true,
-    closeIcon: closeIconToRender,
-    onClose: onClose,
-    onClick: onClick,
-    key: key,
-    style: style || {},
-    className: classNames(className, _defineProperty({}, "".concat(prefixCls, "-").concat(type), !!type)),
-    props: props
-  };
+function open(config) {
+  taskQueue.push({
+    type: 'open',
+    config: config
+  });
+  flushNotice();
 }
 
-function notice(args) {
-  getNotificationInstance(args, function (_ref) {
-    var prefixCls = _ref.prefixCls,
-        iconPrefixCls = _ref.iconPrefixCls,
-        instance = _ref.instance;
-    instance.notice(getRCNoticeProps(args, prefixCls, iconPrefixCls));
+function destroy(key) {
+  taskQueue.push({
+    type: 'destroy',
+    key: key
   });
+  flushNotice();
 }
 
-var api = {
-  open: notice,
-  close: function close(key) {
-    Object.keys(notificationInstance).forEach(function (cacheKey) {
-      return Promise.resolve(notificationInstance[cacheKey]).then(function (instance) {
-        instance.removeNotice(key);
-      });
-    });
-  },
-  config: setNotificationConfig,
-  destroy: function destroy() {
-    Object.keys(notificationInstance).forEach(function (cacheKey) {
-      Promise.resolve(notificationInstance[cacheKey]).then(function (instance) {
-        instance.destroy();
-      });
-      delete notificationInstance[cacheKey]; // lgtm[js/missing-await]
-    });
-  }
+var baseStaticMethods = {
+  open: open,
+  destroy: destroy,
+  config: setNotificationGlobalConfig,
+  useNotification: useNotification,
+  _InternalPanelDoNotUseOrYouWillBeFired: PurePanel
 };
-['success', 'info', 'warning', 'error'].forEach(function (type) {
-  api[type] = function (args) {
-    return api.open(_extends(_extends({}, args), {
+var staticMethods = baseStaticMethods;
+methods.forEach(function (type) {
+  staticMethods[type] = function (config) {
+    return open(_extends(_extends({}, config), {
       type: type
     }));
   };
-});
-api.warn = api.warning;
-api.useNotification = createUseNotification(getNotificationInstance, getRCNoticeProps);
-/** @internal test Only function. Not work on production */
-
-export var getInstance = function getInstance(cacheKey) {
-  return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            return _context.abrupt("return", process.env.NODE_ENV === 'test' ? notificationInstance[cacheKey] : null);
-
-          case 1:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
-};
-export default api;
+}); // ==============================================================================
+// ==                                   Test                                   ==
+// ==============================================================================
+
+var noop = function noop() {};
+/** @private Only Work in test env */
+// eslint-disable-next-line import/no-mutable-exports
+
+
+export var actWrapper = noop;
+
+if (process.env.NODE_ENV === 'test') {
+  actWrapper = function actWrapper(wrapper) {
+    act = wrapper;
+  };
+}
+
+export default staticMethods;

package/es/notification/interface.d.ts

@@ -0,0 +1,51 @@
+import type * as React from 'react';
+interface DivProps extends React.HTMLProps<HTMLDivElement> {
+    'data-testid'?: string;
+}
+export type NotificationPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
+export type IconType = 'success' | 'info' | 'error' | 'warning';
+export interface ArgsProps {
+    message: React.ReactNode;
+    description?: React.ReactNode;
+    btn?: React.ReactNode;
+    key?: React.Key;
+    onClose?: () => void;
+    duration?: number | null;
+    icon?: React.ReactNode;
+    placement?: NotificationPlacement;
+    style?: React.CSSProperties;
+    className?: string;
+    readonly type?: IconType;
+    onClick?: () => void;
+    closeIcon?: React.ReactNode;
+    props?: DivProps;
+}
+export interface NotificationInstance {
+    success(args: ArgsProps): void;
+    error(args: ArgsProps): void;
+    info(args: ArgsProps): void;
+    warning(args: ArgsProps): void;
+    open(args: ArgsProps): void;
+    destroy(key?: React.Key): void;
+}
+export interface GlobalConfigProps {
+    top?: number;
+    bottom?: number;
+    duration?: number;
+    prefixCls?: string;
+    getContainer?: () => HTMLElement;
+    placement?: NotificationPlacement;
+    closeIcon?: React.ReactNode;
+    rtl?: boolean;
+    maxCount?: number;
+    props?: DivProps;
+}
+export interface NotificationConfig {
+    top?: number;
+    bottom?: number;
+    prefixCls?: string;
+    getContainer?: () => HTMLElement;
+    maxCount?: number;
+    rtl?: boolean;
+}
+export {};

package/es/notification/interface.js

@@ -0,0 +1 @@
+export {};

package/es/notification/style/index.d.ts

@@ -1,2 +1,19 @@
-import '../../style/default.less';
-import './index.less';
+import type { FullToken } from '../../theme/internal';
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+    zIndexPopup: number;
+    width: number;
+}
+export interface NotificationToken extends FullToken<'Notification'> {
+    notificationBg: string;
+    notificationPaddingVertical: number;
+    notificationPaddingHorizontal: number;
+    notificationPadding: string;
+    notificationMarginBottom: number;
+    notificationMarginEdge: number;
+    animationMaxHeight: number;
+    notificationIconSize: number;
+    notificationCloseButtonSize: number;
+}
+declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export default _default;