linkmore-design 1.0.50 → 1.0.54

package/lib/message/index.js

@@ -1,24 +1,270 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
-require("antd/es/message/style");
-
-var _message2 = _interopRequireDefault(require("antd/es/message"));
-
-// const prefixCls = 'lm_message'
-// const LMMessage: React.FC<IMessageProps> = (props) => {
-//   const { children, className, ...others } = props
-//   return (
-//     <div className={classNames(className, prefixCls)} {...others}>
-//       {children}
-//     </div>
-//   )
-// }
-var _default = _message2.default;
+exports.attachTypeApi = attachTypeApi;
+exports.getInstance = exports.default = void 0;
+exports.getKeyThenIncreaseKey = getKeyThenIncreaseKey;
+exports.typeList = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _icons = require("@ant-design/icons");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _rcNotification = _interopRequireDefault(require("rc-notification"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _configProvider = _interopRequireWildcard(require("antd/es/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;
+  }
+
+  if (options.prefixCls !== undefined) {
+    localPrefixCls = options.prefixCls;
+  }
+
+  if (options.getContainer !== undefined) {
+    getContainer = options.getContainer;
+    messageInstance = null; // delete messageInstance for new getContainer
+  }
+
+  if (options.transitionName !== undefined) {
+    transitionName = options.transitionName;
+    messageInstance = null; // delete messageInstance for new transitionName
+
+    hasTransitionName = true;
+  }
+
+  if (options.maxCount !== undefined) {
+    maxCount = options.maxCount;
+    messageInstance = null;
+  }
+
+  if (options.rtl !== undefined) {
+    rtl = options.rtl;
+  }
+}
+
+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 = {
+    prefixCls: prefixCls,
+    transitionName: hasTransitionName ? transitionName : "".concat(rootPrefixCls, "-").concat(transitionName),
+    style: {
+      top: defaultTop
+    },
+    getContainer: getContainer || getContextPopupContainer,
+    maxCount: maxCount
+  };
+
+  _rcNotification.default.newInstance(instanceConfig, function (instance) {
+    if (messageInstance) {
+      callback({
+        prefixCls: prefixCls,
+        rootPrefixCls: rootPrefixCls,
+        iconPrefixCls: iconPrefixCls,
+        instance: messageInstance
+      });
+      return;
+    }
+
+    messageInstance = instance;
+
+    if (process.env.NODE_ENV === 'test') {
+      messageInstance.config = instanceConfig;
+    }
+
+    callback({
+      prefixCls: prefixCls,
+      rootPrefixCls: rootPrefixCls,
+      iconPrefixCls: iconPrefixCls,
+      instance: instance
+    });
+  });
+}
+
+var typeToIcon = {
+  info: _icons.InfoCircleFilled,
+  success: _icons.CheckCircleFilled,
+  error: _icons.CloseCircleFilled,
+  warning: _icons.ExclamationCircleFilled,
+  loading: _icons.LoadingOutlined
+};
+var typeList = Object.keys(typeToIcon);
+exports.typeList = typeList;
+
+function getRCNoticeProps(args, prefixCls, iconPrefixCls) {
+  var _classNames;
+
+  var duration = args.duration !== undefined ? args.duration : defaultDuration;
+  var progress = args.progress === false ? false : true;
+  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: (0, _classnames.default)(args.className, 'lm_message'),
+    content: /*#__PURE__*/_react.default.createElement(_configProvider.default, {
+      iconPrefixCls: iconPrefixCls
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: messageClass
+    }, args.icon || IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, null), /*#__PURE__*/_react.default.createElement("span", null, args.content), progress && duration > 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: 'message_progress',
+      style: {
+        animationDuration: "".concat(duration, "s")
+      }
+    }))),
+    onClose: args.onClose,
+    onClick: args.onClick
+  };
+}
+
+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();
+      }
+
+      return resolve(true);
+    };
+
+    getRCNotificationInstance(args, function (_ref) {
+      var prefixCls = _ref.prefixCls,
+          iconPrefixCls = _ref.iconPrefixCls,
+          instance = _ref.instance;
+      instance.notice(getRCNoticeProps(Object.assign(Object.assign({}, args), {
+        key: target,
+        onClose: callback
+      }), prefixCls, iconPrefixCls));
+    });
+  });
+
+  var result = function result() {
+    if (messageInstance) {
+      messageInstance.removeNotice(target);
+    }
+  };
+
+  result.then = function (filled, rejected) {
+    return closePromise.then(filled, rejected);
+  };
+
+  result.promise = closePromise;
+  return result;
+}
+
+function isArgsProps(content) {
+  return Object.prototype.toString.call(content) === '[object Object]' && !!content.content;
+}
+
+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;
+      }
+    }
+  }
+};
+
+function attachTypeApi(originalApi, type) {
+  originalApi[type] = function (content, duration, onClose) {
+    if (isArgsProps(content)) {
+      return originalApi.open(Object.assign(Object.assign({}, content), {
+        type: type
+      }));
+    }
+
+    if (typeof duration === 'function') {
+      onClose = duration;
+      duration = undefined;
+    }
+
+    return originalApi.open({
+      content: content,
+      duration: duration,
+      type: type,
+      onClose: onClose
+    });
+  };
+}
+
+typeList.forEach(function (type) {
+  return attachTypeApi(api, type);
+});
+api.warn = api.warning;
+api.useMessage = (0, _useMessage.default)(getRCNotificationInstance, getRCNoticeProps);
+/** @private test Only function. Not work on production */
+
+var getInstance = function getInstance() {
+  return process.env.NODE_ENV === 'test' ? messageInstance : null;
+};
+
+exports.getInstance = getInstance;
+var _default = api;
 exports.default = _default;

package/lib/message/style/index.css

@@ -503,7 +503,34 @@ html {
 .card_cell_content:hover .card_cell_body .card_cell_checkbox {
   opacity: 1;
 }
-.ant-message .ant-message-notice-content {
+.lm_message .ant-message-notice-content {
+  position: relative;
   padding: 8px 16px;
   font-size: 12px;
 }
+.lm_message .message_progress {
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background-color: #52C41A;
+  left: 0;
+  bottom: 0;
+  animation-name: Progress;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  transition: width 0.2s;
+  animation-timing-function: linear;
+}
+.lm_message:hover .message_progress {
+  width: 100%;
+  animation-name: none;
+  animation-play-state: paused;
+}
+@keyframes Progress {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0;
+  }
+}

package/lib/notification/hooks/useNotification.d.ts

@@ -0,0 +1,7 @@
+import type { NoticeContent as RCNoticeContent, NotificationInstance as RCNotificationInstance } from 'rc-notification/lib/Notification';
+import * as React from 'react';
+import type { ArgsProps, NotificationInstance } from '..';
+export default function createUseNotification(getNotificationInstance: (args: ArgsProps, callback: (info: {
+    prefixCls: string;
+    instance: RCNotificationInstance;
+}) => void) => void, getRCNoticeProps: (args: ArgsProps, prefixCls: string) => RCNoticeContent): () => [NotificationInstance, React.ReactElement];

package/lib/notification/hooks/useNotification.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createUseNotification;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _useNotification = _interopRequireDefault(require("rc-notification/lib/useNotification"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("antd/es/config-provider");
+
+function createUseNotification(getNotificationInstance, getRCNoticeProps) {
+  var useNotification = function useNotification() {
+    // We can only get content by render
+    var getPrefixCls; // We create a proxy to handle delay created instance
+
+    var innerInstance = null;
+    var proxy = {
+      add: function add(noticeProps, holderCallback) {
+        innerInstance === null || innerInstance === void 0 ? void 0 : innerInstance.component.add(noticeProps, holderCallback);
+      }
+    };
+
+    var _useRCNotification = (0, _useNotification.default)(proxy),
+        _useRCNotification2 = (0, _slicedToArray2.default)(_useRCNotification, 2),
+        hookNotify = _useRCNotification2[0],
+        holder = _useRCNotification2[1];
+
+    function notify(args) {
+      var customizePrefixCls = args.prefixCls;
+      var mergedPrefixCls = getPrefixCls('notification', customizePrefixCls);
+      getNotificationInstance(Object.assign(Object.assign({}, args), {
+        prefixCls: mergedPrefixCls
+      }), function (_ref) {
+        var prefixCls = _ref.prefixCls,
+            instance = _ref.instance;
+        innerInstance = instance;
+        hookNotify(getRCNoticeProps(args, prefixCls));
+      });
+    } // Fill functions
+
+
+    var hookApiRef = React.useRef({});
+    hookApiRef.current.open = notify;
+    ['success', 'info', 'warning', 'error'].forEach(function (type) {
+      hookApiRef.current[type] = function (args) {
+        return hookApiRef.current.open(Object.assign(Object.assign({}, args), {
+          type: type
+        }));
+      };
+    });
+    return [hookApiRef.current, /*#__PURE__*/React.createElement(_configProvider.ConfigConsumer, {
+      key: "holder"
+    }, function (context) {
+      getPrefixCls = context.getPrefixCls;
+      return holder;
+    })];
+  };
+
+  return useNotification;
+}

package/lib/notification/index.d.ts

@@ -0,0 +1,54 @@
+import type { NotificationInstance as RCNotificationInstance } from 'rc-notification/lib/Notification';
+import * as React from 'react';
+export declare type NotificationPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
+export declare type IconType = 'success' | 'info' | 'error' | 'warning';
+export interface ConfigProps {
+    top?: number;
+    bottom?: number;
+    duration?: number;
+    prefixCls?: string;
+    placement?: NotificationPlacement;
+    getContainer?: () => HTMLElement;
+    closeIcon?: React.ReactNode;
+    rtl?: boolean;
+    maxCount?: number;
+}
+export interface ArgsProps {
+    message: React.ReactNode;
+    description?: React.ReactNode;
+    btn?: React.ReactNode;
+    key?: string;
+    onClose?: () => void;
+    duration?: number | null;
+    icon?: React.ReactNode;
+    placement?: NotificationPlacement;
+    maxCount?: number;
+    style?: React.CSSProperties;
+    prefixCls?: string;
+    className?: string;
+    readonly type?: IconType;
+    onClick?: () => void;
+    top?: number;
+    bottom?: number;
+    getContainer?: () => HTMLElement;
+    closeIcon?: React.ReactNode;
+    progress?: boolean;
+}
+export interface NotificationInstance {
+    success(args: ArgsProps): void;
+    error(args: ArgsProps): void;
+    info(args: ArgsProps): void;
+    warning(args: ArgsProps): void;
+    open(args: ArgsProps): void;
+}
+export interface NotificationApi extends NotificationInstance {
+    warn(args: ArgsProps): void;
+    close(key: string): void;
+    config(options: ConfigProps): void;
+    destroy(): void;
+    useNotification: () => [NotificationInstance, React.ReactElement];
+}
+/** @private test Only function. Not work on production */
+export declare const getInstance: (cacheKey: string) => Promise<RCNotificationInstance>;
+declare const _default: NotificationApi;
+export default _default;