From 165525d95d2042e9d50334af0c536e80bf067c13 Mon Sep 17 00:00:00 2001
From: lpgray <px.zhangyang@gmail.com>
Date: Tue, 18 Sep 2018 09:58:17 +0800
Subject: [PATCH] `CHANGED` support js style export

---
 src/CascadeMultiSelect.jsx  |  8 +++--
 src/CascadeMultiSelect.less | 61 ++++++++++++++++---------------------
 style/index.js              |  4 +++
 webpack.custom.js           | 19 ++++++++++++
 4 files changed, 55 insertions(+), 37 deletions(-)
 create mode 100644 style/index.js
 create mode 100644 webpack.custom.js

diff --git a/src/CascadeMultiSelect.jsx b/src/CascadeMultiSelect.jsx
index 85e68b1..60fa6cd 100644
--- a/src/CascadeMultiSelect.jsx
+++ b/src/CascadeMultiSelect.jsx
@@ -16,6 +16,8 @@ import CascadeMultiModal from './CascadeMultiModal';
 import i18n from './locale';
 import { getDisabledValueLabel, getWidthStyle } from './utils';
 
+const CASCADER_SELECT_PREFIXCLS = 'kuma-cascader';
+
 const makeOptionsChecked = (value = [], options) => {
   // 没有value则需要设置check为false
   const valueStr = value.map(i => `${i}`);
@@ -238,7 +240,7 @@ class CascadeMultiSelect extends React.Component {
       <div>
         {
           !displayValue.length ?
-            <div className="kuma-cascader-placeholder">
+            <div className={`${CASCADER_SELECT_PREFIXCLS}-placeholder`}>
               {placeholder || i18n(locale).placeholder}
             </div> :
             <div className={classnames([`${prefixCls}-text-result`])}>
@@ -260,7 +262,7 @@ class CascadeMultiSelect extends React.Component {
     const { disabled } = this.props;
     if (disabled) { return null; }
     return (
-      <div className={'kuma-cascader-close-wrap'}>
+      <div className={`${CASCADER_SELECT_PREFIXCLS}-close-wrap`}>
         <i
           className="kuma-icon kuma-icon-error"
           onClick={(e) => {
@@ -276,7 +278,7 @@ class CascadeMultiSelect extends React.Component {
   renderContent() {
     const { className, prefixCls, size, allowClear, disabled } = this.props;
     const { displayValue, showSubMenu } = this.state;
-    const prefixCls2 = 'kuma-cascader';
+    
     return (
       <div
         className={classnames({
diff --git a/src/CascadeMultiSelect.less b/src/CascadeMultiSelect.less
index 12da5b9..36b0334 100644
--- a/src/CascadeMultiSelect.less
+++ b/src/CascadeMultiSelect.less
@@ -5,13 +5,13 @@
  * Copyright 2015-2017, Uxcore Team, Alinw.
  * All rights reserved.
  */
-@notificationPrefixCls: kuma-cascade-multi;
+@__cascadeMultiSelectPrefixCls: kuma-cascade-multi;
 @backgroundColor: @bg-disabled-color;
 @_border: rgba(31,56,88,0.20);
 @_border-light: #e8e8e8;
 @_text-0: #76889A;
 
-.@{notificationPrefixCls} {
+.@{__cascadeMultiSelectPrefixCls} {
   float: left;
   overflow: hidden;
 
@@ -23,7 +23,7 @@
   border: 1px solid @_border;
   background-color: #ffffff;
 
-  .@{notificationPrefixCls}-content {
+  .@{__cascadeMultiSelectPrefixCls}-content {
     float: left;
     overflow-y: auto;
 
@@ -37,7 +37,7 @@
       border-left: 0;
     }
 
-    .@{notificationPrefixCls}-list-item {
+    .@{__cascadeMultiSelectPrefixCls}-list-item {
       overflow: hidden;
 
       height: 28px;
@@ -57,13 +57,13 @@
         margin-right: 5px;
       }
 
-      .@{notificationPrefixCls}-item-label {
+      .@{__cascadeMultiSelectPrefixCls}-item-label {
         span {
           vertical-align: middle;
         }
       }
 
-      .@{notificationPrefixCls}-item-disabled {
+      .@{__cascadeMultiSelectPrefixCls}-item-disabled {
         cursor: not-allowed;
         * {
           cursor: not-allowed;
@@ -71,11 +71,11 @@
       }
     }
 
-    .@{notificationPrefixCls}-list-item-active {
+    .@{__cascadeMultiSelectPrefixCls}-list-item-active {
       background-color: @bg-disabled-color;
     }
 
-    .@{notificationPrefixCls}-list-noData {
+    .@{__cascadeMultiSelectPrefixCls}-list-noData {
       display: block;
 
       margin-top: 7px;
@@ -83,7 +83,7 @@
     }
   }
 
-  .@{notificationPrefixCls}-result {
+  .@{__cascadeMultiSelectPrefixCls}-result {
     float: left;
 
     width: 220px;
@@ -93,13 +93,13 @@
     border-left: 1px solid @_border-light;
     background-color: #fff;
 
-    .@{notificationPrefixCls}-result-title {
+    .@{__cascadeMultiSelectPrefixCls}-result-title {
       margin: 20px 15px 10px 15px;
       padding: 0;
 
       color: @_text-0;
 
-      .@{notificationPrefixCls}-result-clean {
+      .@{__cascadeMultiSelectPrefixCls}-result-clean {
         float: right;
 
         margin-right: 6px;
@@ -110,7 +110,7 @@
       }
     }
 
-    .@{notificationPrefixCls}-result-tree {
+    .@{__cascadeMultiSelectPrefixCls}-result-tree {
       overflow-x: hidden;
       overflow-y: auto;
 
@@ -196,27 +196,20 @@
   }
 }
 
-/**
- * CascadeMultiSelect Component Style for uxcore
- * @author guyunxiang
- *
- * Copyright 2015-2017, Uxcore Team, Alinw.
- * All rights reserved.
- */
-.@{notificationPrefixCls}-select-panel-content {
+.@{__cascadeMultiSelectPrefixCls}-select-panel-content {
   position: relative;
   box-shadow: @box-shadow-1;
   border-radius: @popup-border-radius;
-  .@{notificationPrefixCls} {
+  .@{__cascadeMultiSelectPrefixCls} {
     border-radius: @popup-border-radius @popup-border-radius 0 0;
     overflow: hidden;
   }
-  .@{notificationPrefixCls}-select-footer {
+  .@{__cascadeMultiSelectPrefixCls}-select-footer {
     border-radius: 0 0 @popup-border-radius @popup-border-radius;
     overflow: hidden;
     clear: both;
   }
-  .@{notificationPrefixCls}-select-panel-wrap {
+  .@{__cascadeMultiSelectPrefixCls}-select-panel-wrap {
     border-radius: @popup-border-radius;
     box-shadow: @box-shadow-1;
     zoom: 1;
@@ -224,26 +217,26 @@
   }
 }
 
-.@{notificationPrefixCls}-input {
+.@{__cascadeMultiSelectPrefixCls}-input {
   background-color: #fff;
   &::-ms-clear {
     display: none;
   }
 }
 
-.@{notificationPrefixCls}-large {
+.@{__cascadeMultiSelectPrefixCls}-large {
   height: 38px;
 }
-.@{notificationPrefixCls}-middle {
+.@{__cascadeMultiSelectPrefixCls}-middle {
   min-height: 32px;
   line-height: 32px;
 }
-.@{notificationPrefixCls}-small {
+.@{__cascadeMultiSelectPrefixCls}-small {
   min-height: 28px;
   line-height: 28px;
 }
 
-.@{notificationPrefixCls}-text-result {
+.@{__cascadeMultiSelectPrefixCls}-text-result {
   overflow-x: hidden;
 
   margin-right: 30px;
@@ -262,7 +255,7 @@
   }
 }
 
-.@{notificationPrefixCls}-select-footer {
+.@{__cascadeMultiSelectPrefixCls}-select-footer {
   float: left;
 
   height: 52px;
@@ -278,7 +271,7 @@
   line-height: 52px;
 }
 
-.@{notificationPrefixCls} {
+.@{__cascadeMultiSelectPrefixCls} {
   &.ucms-panel {
     border-radius: @popup-border-radius;
   }
@@ -292,8 +285,8 @@
  * Copyright 2015-2017, Uxcore Team, Alinw.
  * All rights reserved.
  */
-.@{notificationPrefixCls}-model {
-  .@{notificationPrefixCls} {
+.@{__cascadeMultiSelectPrefixCls}-model {
+  .@{__cascadeMultiSelectPrefixCls} {
     border-left: none;
     border-right: none;
   }
@@ -313,11 +306,11 @@
         border-radius: 2px;
         background-color: #f0f0f0;
         &:hover {
-          // .@{notificationPrefixCls}-model-result-ul-list-remove {
+          // .@{__cascadeMultiSelectPrefixCls}-model-result-ul-list-remove {
           //   -ms-transform: scale(1);
           //   transform: scale(1);
           // }
-          // .@{notificationPrefixCls}-model-result-ul-list-content {
+          // .@{__cascadeMultiSelectPrefixCls}-model-result-ul-list-content {
           //   margin-right: 10px;
           //   margin-left: -10px;
           // }
diff --git a/style/index.js b/style/index.js
new file mode 100644
index 0000000..e4bc627
--- /dev/null
+++ b/style/index.js
@@ -0,0 +1,4 @@
+import '../src/CascadeMultiSelect.less';
+import 'uxcore-button/style';
+import 'uxcore-dialog/style';
+import 'uxcore-dropdown/style';
diff --git a/webpack.custom.js b/webpack.custom.js
new file mode 100644
index 0000000..aea07bf
--- /dev/null
+++ b/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,
+          },
+        },
+      ];
+    }
+  });
+};