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

package/lib/message/index.js

@@ -7,271 +7,324 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.attachTypeApi = attachTypeApi;
-exports.getInstance = exports["default"] = void 0;
-exports.getKeyThenIncreaseKey = getKeyThenIncreaseKey;
-exports.typeList = void 0;
+exports["default"] = exports.actWrapper = exports.actDestroy = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _CheckCircleFilled = _interopRequireDefault(require("@ant-design/icons/CheckCircleFilled"));
-
-var _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons/CloseCircleFilled"));
-
-var _ExclamationCircleFilled = _interopRequireDefault(require("@ant-design/icons/ExclamationCircleFilled"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _InfoCircleFilled = _interopRequireDefault(require("@ant-design/icons/InfoCircleFilled"));
-
-var _LoadingOutlined = _interopRequireDefault(require("@ant-design/icons/LoadingOutlined"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _rcNotification = _interopRequireDefault(require("rc-notification"));
+var _render = require("rc-util/lib/React/render");
 
 var React = _interopRequireWildcard(require("react"));
 
 var _configProvider = _interopRequireWildcard(require("../config-provider"));
 
-var _useMessage = _interopRequireDefault(require("./hooks/useMessage"));
-
-var messageInstance;
-var defaultDuration = 3;
-var defaultTop;
-var key = 1;
-var localPrefixCls = '';
-var transitionName = 'move-up';
-var hasTransitionName = false;
-var getContainer;
-var maxCount;
-var rtl = false;
-
-function getKeyThenIncreaseKey() {
-  return key++;
-}
-
-function setMessageConfig(options) {
-  if (options.top !== undefined) {
-    defaultTop = options.top;
-    messageInstance = null; // delete messageInstance for new defaultTop
-  }
-
-  if (options.duration !== undefined) {
-    defaultDuration = options.duration;
-  }
+var _PurePanel = _interopRequireDefault(require("./PurePanel"));
 
-  if (options.prefixCls !== undefined) {
-    localPrefixCls = options.prefixCls;
-  }
+var _useMessage = _interopRequireWildcard(require("./useMessage"));
 
-  if (options.getContainer !== undefined) {
-    getContainer = options.getContainer;
-    messageInstance = null; // delete messageInstance for new getContainer
-  }
+var _util = require("./util");
 
-  if (options.transitionName !== undefined) {
-    transitionName = options.transitionName;
-    messageInstance = null; // delete messageInstance for new transitionName
+var methods = ['success', 'info', 'warning', 'error', 'loading'];
+var message = null;
 
-    hasTransitionName = true;
-  }
-
-  if (options.maxCount !== undefined) {
-    maxCount = options.maxCount;
-    messageInstance = null;
-  }
+var act = function act(callback) {
+  return callback();
+};
 
-  if (options.rtl !== undefined) {
-    rtl = options.rtl;
-  }
+var taskQueue = [];
+var defaultGlobalConfig = {};
+
+function getGlobalContext() {
+  var _defaultGlobalConfig = defaultGlobalConfig,
+      globalPrefixCls = _defaultGlobalConfig.prefixCls,
+      globalGetContainer = _defaultGlobalConfig.getContainer,
+      rtl = _defaultGlobalConfig.rtl,
+      maxCount = _defaultGlobalConfig.maxCount,
+      top = _defaultGlobalConfig.top;
+  var mergedPrefixCls = globalPrefixCls !== null && globalPrefixCls !== void 0 ? globalPrefixCls : (0, _configProvider.globalConfig)().getPrefixCls('message');
+  var mergedContainer = (globalGetContainer === null || globalGetContainer === void 0 ? void 0 : globalGetContainer()) || document.body;
+  return {
+    prefixCls: mergedPrefixCls,
+    container: mergedContainer,
+    rtl: rtl,
+    maxCount: maxCount,
+    top: top
+  };
 }
 
-function getRCNotificationInstance(args, callback) {
-  var customizePrefixCls = args.prefixCls,
-      getContextPopupContainer = args.getPopupContainer;
-
-  var _globalConfig = (0, _configProvider.globalConfig)(),
-      getPrefixCls = _globalConfig.getPrefixCls,
-      getRootPrefixCls = _globalConfig.getRootPrefixCls,
-      getIconPrefixCls = _globalConfig.getIconPrefixCls;
-
-  var prefixCls = getPrefixCls('message', customizePrefixCls || localPrefixCls);
-  var rootPrefixCls = getRootPrefixCls(args.rootPrefixCls, prefixCls);
-  var iconPrefixCls = getIconPrefixCls();
-
-  if (messageInstance) {
-    callback({
-      prefixCls: prefixCls,
-      rootPrefixCls: rootPrefixCls,
-      iconPrefixCls: iconPrefixCls,
-      instance: messageInstance
-    });
-    return;
-  }
-
-  var instanceConfig = {
+var GlobalHolder = /*#__PURE__*/React.forwardRef(function (_, ref) {
+  var _React$useState = React.useState(),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      prefixCls = _React$useState2[0],
+      setPrefixCls = _React$useState2[1];
+
+  var _React$useState3 = React.useState(),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      container = _React$useState4[0],
+      setContainer = _React$useState4[1];
+
+  var _React$useState5 = React.useState(),
+      _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+      maxCount = _React$useState6[0],
+      setMaxCount = _React$useState6[1];
+
+  var _React$useState7 = React.useState(),
+      _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+      rtl = _React$useState8[0],
+      setRTL = _React$useState8[1];
+
+  var _React$useState9 = React.useState(),
+      _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
+      top = _React$useState10[0],
+      setTop = _React$useState10[1];
+
+  var _useInternalMessage = (0, _useMessage.useInternalMessage)({
     prefixCls: prefixCls,
-    transitionName: hasTransitionName ? transitionName : "".concat(rootPrefixCls, "-").concat(transitionName),
-    style: {
-      top: defaultTop
+    getContainer: function getContainer() {
+      return container;
     },
-    getContainer: getContainer || getContextPopupContainer,
-    maxCount: maxCount
+    maxCount: maxCount,
+    rtl: rtl,
+    top: top
+  }),
+      _useInternalMessage2 = (0, _slicedToArray2["default"])(_useInternalMessage, 2),
+      api = _useInternalMessage2[0],
+      holder = _useInternalMessage2[1];
+
+  var global = (0, _configProvider.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;
+
+    setPrefixCls(nextGlobalPrefixCls);
+    setContainer(nextGlobalContainer);
+    setMaxCount(nextGlobalMaxCount);
+    setRTL(nextGlobalRTL);
+    setTop(nextTop);
   };
 
-  _rcNotification["default"].newInstance(instanceConfig, function (instance) {
-    if (messageInstance) {
-      callback({
-        prefixCls: prefixCls,
-        rootPrefixCls: rootPrefixCls,
-        iconPrefixCls: iconPrefixCls,
-        instance: messageInstance
-      });
-      return;
-    }
+  React.useEffect(sync, []);
+  React.useImperativeHandle(ref, function () {
+    var instance = (0, _extends2["default"])({}, 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["default"], {
+    prefixCls: rootPrefixCls,
+    iconPrefixCls: rootIconPrefixCls
+  }, holder);
+});
+
+function flushNotice() {
+  if (!message) {
+    var holderFragment = document.createDocumentFragment();
+    var newMessage = {
+      fragment: holderFragment
+    };
+    message = newMessage; // Delay render to avoid sync issue
+
+    act(function () {
+      (0, _render.render)( /*#__PURE__*/React.createElement(GlobalHolder, {
+        ref: function ref(node) {
+          var _ref = node || {},
+              instance = _ref.instance,
+              sync = _ref.sync; // React 18 test env will throw if call immediately in ref
+
+
+          Promise.resolve().then(function () {
+            if (!newMessage.instance && instance) {
+              newMessage.instance = instance;
+              newMessage.sync = sync;
+              flushNotice();
+            }
+          });
+        }
+      }), holderFragment);
+    });
+    return;
+  } // Notification not ready
 
-    messageInstance = instance;
 
-    if (process.env.NODE_ENV === 'test') {
-      messageInstance.config = instanceConfig;
+  if (!message.instance) {
+    return;
+  } // >>> Execute task
+
+
+  taskQueue.forEach(function (task) {
+    var type = task.type,
+        skipped = task.skipped; // Only `skipped` when user call notice but cancel it immediately
+    // and instance not ready
+
+    if (!skipped) {
+      switch (type) {
+        case 'open':
+          {
+            act(function () {
+              var closeFn = message.instance.open((0, _extends2["default"])((0, _extends2["default"])({}, defaultGlobalConfig), task.config));
+              closeFn === null || closeFn === void 0 ? void 0 : closeFn.then(task.resolve);
+              task.setCloseFn(closeFn);
+            });
+            break;
+          }
+
+        case 'destroy':
+          act(function () {
+            message === null || message === void 0 ? void 0 : message.instance.destroy(task.key);
+          });
+          break;
+        // Other type open
+
+        default:
+          {
+            act(function () {
+              var _message$instance;
+
+              var closeFn = (_message$instance = message.instance)[type].apply(_message$instance, (0, _toConsumableArray2["default"])(task.args));
+
+              closeFn === null || closeFn === void 0 ? void 0 : closeFn.then(task.resolve);
+              task.setCloseFn(closeFn);
+            });
+          }
+      }
     }
+  }); // Clean up
 
-    callback({
-      prefixCls: prefixCls,
-      rootPrefixCls: rootPrefixCls,
-      iconPrefixCls: iconPrefixCls,
-      instance: instance
-    });
-  });
+  taskQueue = [];
 }
 
-var typeToIcon = {
-  info: _InfoCircleFilled["default"],
-  success: _CheckCircleFilled["default"],
-  error: _CloseCircleFilled["default"],
-  warning: _ExclamationCircleFilled["default"],
-  loading: _LoadingOutlined["default"]
-};
-var typeList = Object.keys(typeToIcon);
-exports.typeList = typeList;
+function setMessageGlobalConfig(config) {
+  defaultGlobalConfig = (0, _extends2["default"])((0, _extends2["default"])({}, defaultGlobalConfig), config); // Trigger sync for it
 
-function getRCNoticeProps(args, prefixCls, iconPrefixCls) {
-  var _classNames;
+  act(function () {
+    var _a;
 
-  var duration = args.duration !== undefined ? args.duration : defaultDuration;
-  var IconComponent = typeToIcon[args.type];
-  var messageClass = (0, _classnames["default"])("".concat(prefixCls, "-custom-content"), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(args.type), args.type), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), rtl === true), _classNames));
-  return {
-    key: args.key,
-    duration: duration,
-    style: args.style || {},
-    className: args.className,
-    content: /*#__PURE__*/React.createElement(_configProvider["default"], {
-      iconPrefixCls: iconPrefixCls
-    }, /*#__PURE__*/React.createElement("div", {
-      className: messageClass
-    }, args.icon || IconComponent && /*#__PURE__*/React.createElement(IconComponent, null), /*#__PURE__*/React.createElement("span", null, args.content))),
-    onClose: args.onClose,
-    onClick: args.onClick
-  };
+    (_a = message === null || message === void 0 ? void 0 : message.sync) === null || _a === void 0 ? void 0 : _a.call(message);
+  });
 }
 
-function notice(args) {
-  var target = args.key || getKeyThenIncreaseKey();
-  var closePromise = new Promise(function (resolve) {
-    var callback = function callback() {
-      if (typeof args.onClose === 'function') {
-        args.onClose();
+function open(config) {
+  var result = (0, _util.wrapPromiseFn)(function (resolve) {
+    var closeFn;
+    var task = {
+      type: 'open',
+      config: config,
+      resolve: resolve,
+      setCloseFn: function setCloseFn(fn) {
+        closeFn = fn;
+      }
+    };
+    taskQueue.push(task);
+    return function () {
+      if (closeFn) {
+        act(function () {
+          closeFn();
+        });
+      } else {
+        task.skipped = true;
       }
-
-      return resolve(true);
     };
-
-    getRCNotificationInstance(args, function (_ref) {
-      var prefixCls = _ref.prefixCls,
-          iconPrefixCls = _ref.iconPrefixCls,
-          instance = _ref.instance;
-      instance.notice(getRCNoticeProps((0, _extends2["default"])((0, _extends2["default"])({}, args), {
-        key: target,
-        onClose: callback
-      }), prefixCls, iconPrefixCls));
-    });
   });
+  flushNotice();
+  return result;
+}
 
-  var result = function result() {
-    var _a;
-
-    if (messageInstance) {
-      messageInstance.removeNotice(target);
-      (_a = args.onClose) === null || _a === void 0 ? void 0 : _a.call(args);
-    }
-  };
-
-  result.then = function (filled, rejected) {
-    return closePromise.then(filled, rejected);
-  };
-
-  result.promise = closePromise;
+function typeOpen(type, args) {
+  var result = (0, _util.wrapPromiseFn)(function (resolve) {
+    var closeFn;
+    var task = {
+      type: type,
+      args: args,
+      resolve: resolve,
+      setCloseFn: function setCloseFn(fn) {
+        closeFn = fn;
+      }
+    };
+    taskQueue.push(task);
+    return function () {
+      if (closeFn) {
+        act(function () {
+          closeFn();
+        });
+      } else {
+        task.skipped = true;
+      }
+    };
+  });
+  flushNotice();
   return result;
 }
 
-function isArgsProps(content) {
-  return Object.prototype.toString.call(content) === '[object Object]' && !!content.content;
+function destroy(key) {
+  taskQueue.push({
+    type: 'destroy',
+    key: key
+  });
+  flushNotice();
 }
 
-var api = {
-  open: notice,
-  config: setMessageConfig,
-  destroy: function destroy(messageKey) {
-    if (messageInstance) {
-      if (messageKey) {
-        var _messageInstance = messageInstance,
-            removeNotice = _messageInstance.removeNotice;
-        removeNotice(messageKey);
-      } else {
-        var _messageInstance2 = messageInstance,
-            destroy = _messageInstance2.destroy;
-        destroy();
-        messageInstance = null;
-      }
-    }
-  }
+var baseStaticMethods = {
+  open: open,
+  destroy: destroy,
+  config: setMessageGlobalConfig,
+  useMessage: _useMessage["default"],
+  _InternalPanelDoNotUseOrYouWillBeFired: _PurePanel["default"]
 };
-
-function attachTypeApi(originalApi, type) {
-  originalApi[type] = function (content, duration, onClose) {
-    if (isArgsProps(content)) {
-      return originalApi.open((0, _extends2["default"])((0, _extends2["default"])({}, content), {
-        type: type
-      }));
+var staticMethods = baseStaticMethods;
+methods.forEach(function (type) {
+  staticMethods[type] = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
 
-    if (typeof duration === 'function') {
-      onClose = duration;
-      duration = undefined;
-    }
+    return typeOpen(type, args);
+  };
+}); // ==============================================================================
+// ==                                   Test                                   ==
+// ==============================================================================
 
-    return originalApi.open({
-      content: content,
-      duration: duration,
-      type: type,
-      onClose: onClose
-    });
+var noop = function noop() {};
+/** @private Only Work in test env */
+// eslint-disable-next-line import/no-mutable-exports
+
+
+var actWrapper = noop;
+exports.actWrapper = actWrapper;
+
+if (process.env.NODE_ENV === 'test') {
+  exports.actWrapper = actWrapper = function actWrapper(wrapper) {
+    act = wrapper;
   };
 }
+/** @private Only Work in test env */
+// eslint-disable-next-line import/no-mutable-exports
 
-typeList.forEach(function (type) {
-  return attachTypeApi(api, type);
-});
-api.warn = api.warning;
-api.useMessage = (0, _useMessage["default"])(getRCNotificationInstance, getRCNoticeProps);
-/** @internal test Only function. Not work on production */
 
-var getInstance = function getInstance() {
-  return process.env.NODE_ENV === 'test' ? messageInstance : null;
-};
+var actDestroy = noop;
+exports.actDestroy = actDestroy;
+
+if (process.env.NODE_ENV === 'test') {
+  exports.actDestroy = actDestroy = function actDestroy() {
+    message = null;
+  };
+}
 
-exports.getInstance = getInstance;
-var _default = api;
+var _default = staticMethods;
 exports["default"] = _default;

package/lib/message/interface.d.ts

@@ -0,0 +1,37 @@
+import type * as React from 'react';
+export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
+export interface ConfigOptions {
+    top?: number;
+    duration?: number;
+    prefixCls?: string;
+    getContainer?: () => HTMLElement;
+    transitionName?: string;
+    maxCount?: number;
+    rtl?: boolean;
+}
+export interface ArgsProps {
+    content: React.ReactNode;
+    duration?: number;
+    type?: NoticeType;
+    onClose?: () => void;
+    icon?: React.ReactNode;
+    key?: string | number;
+    style?: React.CSSProperties;
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+export type JointContent = React.ReactNode | ArgsProps;
+export interface MessageType extends PromiseLike<boolean> {
+    (): void;
+}
+export type TypeOpen = (content: JointContent, duration?: number | VoidFunction, // Also can use onClose directly
+onClose?: VoidFunction) => MessageType;
+export interface MessageInstance {
+    info: TypeOpen;
+    success: TypeOpen;
+    error: TypeOpen;
+    warning: TypeOpen;
+    loading: TypeOpen;
+    open(args: ArgsProps): MessageType;
+    destroy(key?: React.Key): void;
+}

package/lib/message/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/message/style/index.d.ts

@@ -1,2 +1,7 @@
-import '../../style/default.less';
-import './index.less';
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+    height: number;
+    zIndexPopup: number;
+}
+declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export default _default;