support js style export

HISTORY.md

@@ -1,3 +1,5 @@
+# 0.5.11
+`CHANGED` support js style export
 # 0.5.10
 * `FIXED` to Message.clear function error and `NEW` API Message.mask_loading
 # 0.5.4

README.md

@@ -26,6 +26,7 @@ http://uxcore.github.io/
 * Message.error(content, duration, onClose)
 * Message.info(content, duration, onClose)
 * Message.loading(content, duration, onClose)
+* Message.nw_loading(content, duration, onClose) // 信息平台新 logo 的 loading
 * Message.mask_loading(content, duration, onClose) // 带遮罩全局的 loading，防止重复点击提交，duration=0代表不会消失，必须使用Message.clear()清除
 * Message.clear() // 清除所有的 message。
 

demo/MessageDemo.jsx

@@ -27,7 +27,10 @@ class Demo extends React.Component {
   }
 
   handleClick(type) {
-    Message[type](type, 300);
+    Message[type](type, 3);
+    setTimeout(() => {
+       Message.clear();
+    }, 1500);
   }
 
   render() {

package.json

@@ -1,6 +1,6 @@
 {
  "name": "uxcore-message",
- "version": "0.5.10",
+ "version": "0.5.11",
  "description": "uxcore-message component for uxcore.",
  "repository": "https://github.com/uxcore/uxcore-message.git",
  "author": "eternaslky",

src/Message.jsx

@@ -13,7 +13,7 @@ let multipleInstance = true;
 let size = 'small';
 let messageCounter = 0;
 
-function createMessageInstance() {
+function createMessageInstance(options, type) {
   if (messageInstance && messageInstance.destroy) {
     messageInstance.destroy();
   }
@@ -22,7 +22,7 @@ function createMessageInstance() {
     {
       prefixCls,
       className,
-      transitionName,
+      transitionName: type === 'mask_loading' ? '' : transitionName,
       getContainer,
       style: {
         left: '50%',
@@ -72,7 +72,9 @@ function notice(content, duration = defaultDuration, type, onClose) {
     nw_loading: 'kuma-loading',
   }[type];
 
-  const instance = multipleInstance && messageInstance ? messageInstance : createMessageInstance(options);
+  const instance = multipleInstance && messageInstance && type !== 'mask_loading'
+    ? messageInstance
+    : createMessageInstance(options, type);
 
   incrementCounter();
   let activeWrapStyle = {
@@ -85,10 +87,10 @@ function notice(content, duration = defaultDuration, type, onClose) {
       width: '100vw',
       position: 'fixed',
       maxWidth: '100vw',
-      height: ' 100vh',
-      margin: '0',
+      height: '100vh',
+      margin: 0,
       top: 0,
-      left: '0',
+      left: 0,
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',

style/index.js

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

webpack.custom.js

@@ -0,0 +1,19 @@
+const modifyVars = require('kuma-base/jsvars/orange');
+
+/* eslint-disable no-param-reassign */
+module.exports = (config) => {
+  config.module.rules.forEach((rule) => {
+    if (rule.test.toString() === /\.less$/.toString()) {
+      rule.use = [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'less-loader',
+          options: {
+            modifyVars,
+          },
+        },
+      ];
+    }
+  });
+};