From ddaa5cb63f12949aba8f0ef5e4f46fb629ccd63d Mon Sep 17 00:00:00 2001
From: izbz wh <731215820@qq.com>
Date: Wed, 27 Mar 2019 16:53:26 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=20=E8=BF=87=E6=BB=A4=E5=88=97?=
=?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
build/Table.css | 22 +-
build/lib/multiSelect.js | 2 +-
dist/demo.css | 51 +-
dist/demo.css.map | 2 +-
dist/demo.js | 20798 ++++++++++++++++++++++++++-----------
dist/demo.js.map | 2 +-
index.html | 4 +-
package.json | 8 +-
src/Table.scss | 32 +-
src/lib/multiSelect.js | 2 +-
10 files changed, 14685 insertions(+), 6238 deletions(-)
diff --git a/build/Table.css b/build/Table.css
index 29aa2c6..77f359d 100644
--- a/build/Table.css
+++ b/build/Table.css
@@ -186,7 +186,7 @@
.u-table th ::last-child {
overflow: hidden; }
.u-table td {
- border-bottom: 1px solid rgb(233,233,233); }
+ border-bottom: 1px solid rgb(193, 199, 208); }
.u-table td a {
color: #2196F3; }
.u-table td a:hover {
@@ -217,21 +217,21 @@
.u-table-scroll {
overflow: auto; }
.u-table-bordered table {
- border: 1px solid rgb(233,233,233);
+ border: 1px solid rgb(193, 199, 208);
box-sizing: border-box;
table-layout: fixed; }
.u-table-bordered th {
- border-bottom: 1px solid rgb(233,233,233);
+ border-bottom: 1px solid rgb(193, 199, 208);
box-sizing: border-box; }
.u-table-bordered th,
.u-table-bordered td {
- border-right: 1px solid rgb(233,233,233);
+ border-right: 1px solid rgb(193, 199, 208);
box-sizing: border-box; }
.u-table-drag-border tr th.th-can-not-drag {
overflow: hidden; }
.u-table-header {
overflow: hidden;
- background: rgb(247,247,247);
+ background: rgb(223, 225, 230);
color: rgb(102, 102, 102); }
.u-table.fixed-height td {
padding: 0px 8px; }
@@ -254,12 +254,12 @@
box-sizing: border-box; }
.u-table-title {
padding: 12px 8px;
- border-top: 1px solid rgb(233,233,233); }
+ border-top: 1px solid rgb(193, 199, 208); }
.u-table-content {
position: relative; }
.u-table-footer {
padding: 12px 8px;
- border-bottom: 1px solid rgb(233,233,233); }
+ border-bottom: 1px solid rgb(193, 199, 208); }
.u-table-footer .u-table-scroll {
overflow-x: hidden; }
.u-table-footer .u-table {
@@ -267,7 +267,7 @@
.u-table-placeholder {
padding: 12px 8px;
background: #fff;
- border-bottom: 1px solid rgb(233,233,233);
+ border-bottom: 1px solid rgb(193, 199, 208);
text-align: center;
position: relative; }
.u-table-expand-icon-col {
@@ -280,7 +280,7 @@
height: 16px;
text-align: center;
line-height: 16px;
- border: 1px solid rgb(233,233,233);
+ border: 1px solid rgb(193, 199, 208);
user-select: none;
background: #fff;
margin-right: 10px; }
@@ -356,7 +356,7 @@
.u-table-thead .filter-wrap .filter-btns {
min-width: 58px; }
.u-table-thead th {
- background: rgb(247,247,247);
+ background: rgb(223, 225, 230);
color: rgb(102, 102, 102);
background-clip: padding-box;
-moz-user-select: -moz-none;
@@ -489,7 +489,7 @@
.u-table.bordered th,
.u-table.bordered td {
- border: 1px solid rgb(233,233,233); }
+ border: 1px solid rgb(193, 199, 208); }
.move-enter,
.move-appear {
diff --git a/build/lib/multiSelect.js b/build/lib/multiSelect.js
index d0bc0b7..f4915d1 100644
--- a/build/lib/multiSelect.js
+++ b/build/lib/multiSelect.js
@@ -53,7 +53,7 @@ function multiSelect(Table, Checkbox) {
}
MultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
- if (this.props.data != nextProps.data) {
+ if ('data' in nextProps) {
var obj = this.getCheckedOrIndeter(nextProps.data);
this.setState(_extends({}, obj, {
data: (0, _util.ObjectAssign)(nextProps.data)
diff --git a/dist/demo.css b/dist/demo.css
index ac5e7ca..92e23a0 100644
--- a/dist/demo.css
+++ b/dist/demo.css
@@ -172,7 +172,7 @@
.u-table th ::last-child {
overflow: hidden; }
.u-table td {
- border-bottom: 1px solid rgb(233,233,233); }
+ border-bottom: 1px solid rgb(193, 199, 208); }
.u-table td a {
color: #2196F3; }
.u-table td a:hover {
@@ -203,21 +203,21 @@
.u-table-scroll {
overflow: auto; }
.u-table-bordered table {
- border: 1px solid rgb(233,233,233);
+ border: 1px solid rgb(193, 199, 208);
box-sizing: border-box;
table-layout: fixed; }
.u-table-bordered th {
- border-bottom: 1px solid rgb(233,233,233);
+ border-bottom: 1px solid rgb(193, 199, 208);
box-sizing: border-box; }
.u-table-bordered th,
.u-table-bordered td {
- border-right: 1px solid rgb(233,233,233);
+ border-right: 1px solid rgb(193, 199, 208);
box-sizing: border-box; }
.u-table-drag-border tr th.th-can-not-drag {
overflow: hidden; }
.u-table-header {
overflow: hidden;
- background: rgb(247,247,247);
+ background: rgb(223, 225, 230);
color: rgb(102, 102, 102); }
.u-table.fixed-height td {
padding: 0px 8px; }
@@ -240,12 +240,12 @@
box-sizing: border-box; }
.u-table-title {
padding: 12px 8px;
- border-top: 1px solid rgb(233,233,233); }
+ border-top: 1px solid rgb(193, 199, 208); }
.u-table-content {
position: relative; }
.u-table-footer {
padding: 12px 8px;
- border-bottom: 1px solid rgb(233,233,233); }
+ border-bottom: 1px solid rgb(193, 199, 208); }
.u-table-footer .u-table-scroll {
overflow-x: hidden; }
.u-table-footer .u-table {
@@ -253,7 +253,7 @@
.u-table-placeholder {
padding: 12px 8px;
background: #fff;
- border-bottom: 1px solid rgb(233,233,233);
+ border-bottom: 1px solid rgb(193, 199, 208);
text-align: center;
position: relative; }
.u-table-expand-icon-col {
@@ -266,7 +266,7 @@
height: 16px;
text-align: center;
line-height: 16px;
- border: 1px solid rgb(233,233,233);
+ border: 1px solid rgb(193, 199, 208);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@@ -348,7 +348,7 @@
.u-table-thead .filter-wrap .filter-btns {
min-width: 58px; }
.u-table-thead th {
- background: rgb(247,247,247);
+ background: rgb(223, 225, 230);
color: rgb(102, 102, 102);
background-clip: padding-box;
-moz-user-select: -moz-none;
@@ -424,36 +424,39 @@
.u-table-thead-th:last-child-drag-gap {
border: none; }
.u-table-filter-column-pop-cont {
- margin: 10px;
- margin-top: 0px;
- height: 300px;
+ margin: 0px;
+ max-height: 300px;
overflow-y: scroll; }
.u-table-filter-column-clear-setting {
- border-bottom: 1px solid #ccc;
- cursor: pointer; }
+ margin-bottom: 4px; }
.u-table-filter-column-cont {
position: relative; }
.u-table-filter-column-filter-icon {
position: absolute;
- top: 3px;
+ top: 8px;
right: 18px;
width: 22px;
height: 25px;
line-height: 25px;
z-index: 2;
- background: #f7f7f7; }
- .u-table-filter-column-filter-iconi.uf {
+ background: rgb(223, 225, 230);
+ text-align: center;
+ cursor: pointer; }
+ .u-table-filter-column-filter-icon i.uf {
padding: 0px; }
.u-table-filter-column-pop-cont-item {
- margin-top: 10px;
- line-height: 30px;
+ margin-top: 8px;
cursor: pointer; }
+ .u-table-filter-column-pop-cont-item .u-checkbox {
+ margin: 0px; }
.u-table-filter-column-pop-cont-item > span {
- margin-left: 5px;
- width: 100px;
+ margin-left: -3px;
+ width: 132px;
overflow: hidden;
text-overflow: ellipsis;
- white-space: nowrap; }
+ white-space: nowrap;
+ display: inline-block;
+ vertical-align: middle; }
.u-table-filter-column-pop .u-modal-dialog {
border: 1px solid #ccc;
background: #fff; }
@@ -477,7 +480,7 @@
.u-table.bordered th,
.u-table.bordered td {
- border: 1px solid rgb(233,233,233); }
+ border: 1px solid rgb(193, 199, 208); }
.move-enter,
.move-appear {
diff --git a/dist/demo.css.map b/dist/demo.css.map
index 5dfd787..24389f1 100644
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
@@ -1 +1 @@
-{"version":3,"sources":["demo.css","../node_modules/tinper-bee-core/scss/minxin-variables.scss","../node_modules/bee-loading/src/Loading.scss","../src/Table.scss","TableDemo.scss","demolist/Demo12.scss","demolist/Demo18.scss","demolist/Demo24.scss","demolist/Demo31.scss"],"names":[],"mappings":"AAAA,iBAAiB;ACqXjB,eAAe;AAWf,iBAAiB;AAXjB,eAAe;AAWf,iBAAiB;AC1XjB;;IAEI;AAcJ;;IAEI;AACJ;EACE,mBAAmB;EACnB,UAAU;EACV,QAAQ;EACR,SAAS;EACT,gBD8wC2B;EC7wC3B,YAAY;EACZ,mBAAmB,EACpB;;AAGD;;IAEI;AAEJ;EAGM,mBAAmB;EACnB,oBAAoB;EACpB,YAAY;EAEZ,0BAA0B;EAG1B,YDgwCmB;EC/vCnB,aD+vCmB;EC9vCnB,SDywCiB;ECxwCjB,UDywCkB;ECxwClB,mBD2wCsB;EC1wCtB,kBD0wCsB;ECzwCtB,mCAAmC;EACnC,sBAAsB;EAEtB,0CAA0C;EAC1C,mBAAmB;EACnB,kBDqvCmB,EC/uCpB;EA3BL;IAuBQ,eA3DoB;IA4DpB,gBAAgB;IAChB,WAAW,EACZ;;AA1BP;EA8BQ,mBD4vCuB;EC3vCvB,kBD2vCuB;EC1vCvB,YD2uCoB;EC1uCpB,aD0uCoB;ECzuCpB,kBDyuCoB,ECruCrB;EAtCP;IAoCU,gBAAgB,EACjB;;AArCT;EA0CQ,mBD8uCwB;EC7uCxB,kBD6uCwB;EC5uCxB,YD6tCqB;EC5tCrB,aD4tCqB;EC3tCrB,kBD2tCqB,ECvtCtB;EAlDP;IAgDU,gBAAgB,EACjB;;AAjDT;EAsDQ,eD2rCiB,ECxrClB;;AAzDP;EA6DQ,eDqrCqB,EClrCtB;;AAhEP;EAoEQ,eD+qCc,EC5qCf;;AAMP;EACE,mBAAmB;EACnB,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,cAAc;EACd,YAAY;EACZ,oBAAY;EACZ,uBAAuB,EAIxB;EAbD;IAWI,gBAAgB,EACjB;;AAGH;EACE;IAEE,iCAA6B,EAAA;EAG/B;IAEE,mCAA+B,EAAA;EAGjC;IAEE,mCAA+B,EAAA,EAAA;;AAInC;EAEI,mBAAmB;EACnB,SDqqCmB;ECpqCnB,UDqqCoB;ECpqCpB,kBD4qC0B;EC3qC1B,mBD4qC2B,EC1nC5B;EAxDH;IAQM,0BAA0B;IAC1B,WDypCiB;ICxpCjB,aDypCmB;ICxpCnB,mBAAmB;IACnB,YAAY;IAEZ,0BAA0B;IAC1B,sBAAsB,EACvB;EAhBL;IAkBM,kBDiqC2B;IChqC3B,mBDiqC4B,EC5pC7B;IAxBL;MAqBQ,WD+oCkB;MC9oClB,aD+oCoB,EC9oCrB;EAvBP;IA0BM,kBDqpC4B;ICppC5B,mBDqpC4B,EChpC7B;IAhCL;MA6BQ,WDmoCmB;MCloCnB,aDmoCoB,ECloCrB;EA/BP;IAoCQ,2EDomC0C;ICnmC1C,0BD0mCU,ECzmCX;EAtCP;IAoCQ,2EDqmC0C;ICpmC1C,0BD2mCU,EC1mCX;EAtCP;IAoCQ,2EDsmC0C;ICrmC1C,0BD4mCU,EC3mCX;EAtCP;IAoCQ,2EDumC0C;ICtmC1C,0BD6mCU,EC5mCX;EAtCP;IAoCQ,2EDwmC0C;ICvmC1C,0BD8mCU,EC7mCX;EAtCP;IA2CQ,0BDylCiB,ECxlClB;EA5CP;IAgDQ,0BDqlCqB,ECplCtB;EAjDP;IAqDQ,0BDilCc,EChlCf;;AAIP;EACE;IAEE,qBAAiB,EAAA;EAGnB;IAEE,uBAAiB,EAAA;EAGnB;IAEE,qBAAiB,EAAA,EAAA;;AC1MrB;EACE,gBAdmB;EAenB,YAhBe;EAkBf,mBAAmB;EACnB,iBAjBe;EAkBf,iBAAiB,EAsflB;EA5fD;IASI,mBAAmB,EACpB;EAVH;IAYI,mBAAmB,EAOpB;IAnBH;MAcM,mBAAmB;MACnB,SAAS;MACT,UAAU,EAEX;EAlBL;IAqBI,YAAY;IACZ,0BAA0B;IAC1B,iBAAiB,EAClB;EAxBH;IA4BI,kBAAkB;IAClB,iBAAiB,EAQlB;IArCH;MAgCM,mBAAmB,EACpB;IAjCL;MAmCM,iBAAiB,EAClB;EApCL;IAwCI,0CAlDwB,EA4DzB;IAlDH;MA0CM,eAAe,EAOhB;MAjDL;QA4CQ,eAAe,EAChB;MA7CP;QA+CQ,eAAe,EAChB;EAhDP;IA0DU,+BAA+B,EAChC;EA3DT;IA+DM,eAAe,EAOhB;IAtEL;MAiEQ,eAAe,EAChB;IAlEP;MAoEQ,eAAe,EAChB;EArEP;IAyEI,+BFwHyB,EEvH1B;EA1EH;;IA8EI,kBApFoB;IAqFpB,sBAAsB,EACvB;EAhFH;IAqFQ,iBAAiB;IACjB,oBAAoB,EAIrB;IA1FP;MAwFU,aAAa,EACd;EAzFT;IA8FI,+BAAkB,EACnB;EA/FH;IAkGI,eAAe,EAChB;EAnGH;IAsGM,mCAhHsB;IAiHtB,uBAAuB;IACvB,oBAAoB,EAErB;EA1GL;IA4GM,0CAtHsB;IAuHtB,uBAAuB,EACxB;EA9GL;;IAiHM,yCA3HsB;IA4HtB,uBAAuB,EACxB;EAnHL;IAwHQ,iBAAiB,EAClB;EAzHP;IA6HI,iBAAiB;IACjB,6BFs0CiC;IEr0CjC,0BFs0C2B,EEr0C5B;EAhIH;IAmII,iBAAiB,EAClB;EApIH;IAuII,iBAAiB;IACjB,mBAAmB,EACpB;EAzIH;IA2II,oBAAoB;IACpB,oBAAoB,EACrB;EA7IH;IAgJI,mBAAmB,EACpB;EAjJH;IAoJI,aAAa;IACb,iBAAiB,EAClB;EAtJH;IA0JI,mBAAmB;IACnB,qBAAqB;IACrB,qBAAqB;IACrB,mBAAmB;IACnB,uBAAuB,EACxB;EA/JH;IAkKI,kBAxKoB;IAyKpB,uCA7KwB,EA8KzB;EApKH;IAuKI,mBAAmB,EACpB;EAxKH;IA2KI,kBAjLoB;IAkLpB,0CAtLwB,EA0LzB;IAhLH;MA8KM,mBAAmB,EACpB;EA/KL;IAkLI,mBAxLoB,EAyLrB;EAnLH;IAsLI,kBAA8B;IAC9B,iBAAiB;IACjB,0CAlMwB;IAmMxB,mBAAmB;IACnB,mBAAmB,EACpB;EA3LH;IA8LI,YAAY,EACb;EA/LH;IAmMM,gBAAgB;IAChB,sBAAsB;IACtB,kBAAkB;IAClB,YAAY;IACZ,aAAa;IACb,mBAAmB;IACnB,kBAAkB;IAClB,mCApNsB;IAqNtB,0BAAkB;IAAlB,uBAAkB;IAAlB,sBAAkB;IAAlB,kBAAkB;IAClB,iBAAiB;IACjB,mBAAmB,EACpB;EA9ML;IAgNM,mBAAmB,EACpB;EAjNL;IAmNM,aAAa,EACd;EApNL;IAuNM,aAAa,EACd;EAxNL;IA2NM,aAAa,EACd;EA5NL;IAgOM,+BF/BuB,EEgCxB;EAjOL;IAoOI,oBAAoB,EAQrB;IA5OH;MAsOM,oBAAoB,EACrB;IAvOL;MA0OM,WAAW,EACZ;EA3OL;IA8OI,cAAc,EACf;EA/OH;IAkPI,gBAAgB;IAChB,YAAY;IACZ,WAAW,EAWZ;IA/PH;MAsPM,eAAe,EAChB;IAvPL;MAyPM,oBAAoB;MACpB,YAAY,EAIb;MA9PL;QA4PQ,YAAY,EACb;EA7PP;IAiQI,kBAAkB,EAInB;IArQH;MAmQM,aAAa,EACd;EApQL;IAuQI,aAAa,EAId;IA3QH;MAyQM,aAAa,EACd;EA1QL;IA+QI,mBAAmB;IACnB,OAAO;IACP,iBAAiB;IACjB,WAAW,EAKZ;IAvRH;MAoRM,YAAY;MACZ,iBAAiB,EAClB;EAtRL;IA0RI,QAAQ;IACR,+CAA0B,EAQ3B;IAnSH;MA6RM,oBAAoB;MACpB,oBAAoB,EACrB;IA/RL;MAiSM,iBAAiB,EAClB;EAlSL;IAsSI,SAAS;IACT,gDAA2B,EAS5B;IAhTH;MA4SM,mBAAmB;MACnB,qBAAqB,EACtB;EA9SL;IAmTI,iBAAiB,EAClB;EApTH;IAuTI,iBAAiB,EAClB;EAxTH;IA4TM,oBAAoB,EACrB;EA7TL;IA+TM,qBAAc;IAAd,cAAc;IACd,sBAAwB;IAAxB,wBAAwB;IACxB,uBAAoB;IAApB,oBAAoB,EAIrB;IArUL;MAmUQ,gBAAgB,EACjB;EApUP;IAuUM,6BF6nC+B;IE5nC/B,0BF6nCyB;IE5nCzB,6BAA4B;IAE5B,4BAA4B;IAE5B,0BAA0B;IAC1B;;QAEE;IACA,sBAAsB;IACtB,kBAAkB,EAyDrB;IA3YL;MAwVQ,mBAAmB;MACnB,iBAAiB;MACjB,YAAY;MACZ,uBAAuB;MACvB,mBAAmB;MACnB,sBAAsB,EAUvB;MAvWP;;QAiWU,iBAAiB;QACjB,eAAe;QACf,YAAY;QACZ,gBAAgB,EACjB;IArWT;;;;MA6WQ,eAAe,EAChB;IA9WP;;MAkXQ,aAAa;MACb,gBAAgB,EACjB;IApXP;;MAuXQ,sBAAsB;MACtB,WAAW;MACX,gBAAgB;MAChB,iBAAiB;MAGjB,uCAAmC;MACnC,+GAA+G;MAC/G,QAAQ;MACR,iBAAiB;MACjB,YAAY;MACZ,YAAY,EAGb;IArYP;MAwYY,sBAAsB,EACzB;EAzYT;IA6YM,aAAa,EACd;EA9YL;IAgZM,+BF/MuB,EEgNxB;EAjZL;IAuZM,iBAAiB,EAClB;EAxZL;IA0ZM,mBAAmB,EAgCpB;IA1bL;MA6ZQ,aAAa;MACb,mBAAmB;MACnB,aAAa;MACb,OAAO;MAIP,YAAY;MAEZ,uBAAuB;MACvB,WAAW,EAYZ;MAnbP;QA0aU,aAAa;QACb,WAAW;QACX,wBAAuB;QACvB,eAAe,EAChB;MA9aT;QAgbU,oBAAmB,EACpB;IAjbT;MAqbQ,mBAAmB,EAIpB;MAzbP;QAubU,oBACD,EAAC;EAxbV;IA6bQ,aAAa,EACd;EA9bP;IAscM,aAAa;IACb,gBAAgB;IAChB,cAAc;IACd,mBAAmB,EACpB;EA1cL;IA4cM,8BAA8B;IAC9B,gBAAgB,EACjB;EA9cL;IAgdM,mBAAmB,EACpB;EAjdL;IAmdM,mBAAmB;IACnB,SAAS;IACT,YAAY;IACZ,YAAY;IACZ,aAAa;IACb,kBAAkB;IAClB,WAAW;IACX,oBAAoB,EAIrB;IA9dL;MA4dQ,aAAa,EACd;EA7dP;IAgeM,iBAAiB;IACjB,kBAAkB;IAClB,gBAAgB,EACjB;EAneL;IAqeM,iBAAiB;IACjB,aAAa;IACb,iBAAiB;IACjB,wBAAwB;IACxB,oBAAoB,EACrB;EA1eL;IA4eM,uBAAuB;IACvB,iBAAiB,EAClB;EA9eL;IAmfI,cAAa;IACb,qBAAqB,EACtB;EArfH;IAwfI,aAzfiB;IA0fjB,kBA1fiB;IA2fjB,YAAW,EACZ;;AAEH;EACE,cAAc;EAGd,kBAAkB,EACnB;;AAEC;EAEI,oBAAmB,EACpB;;AAEL;EAEI,0BAA0B,EAC3B;;AAHH;;EAMI,mCAzhBwB,EA0hBzB;;AAGH;;EAEE,WAAW;EACX,+DAAuC;EACvC,yBAAyB;EACzB,0BAA0B;EAC1B,6BAA6B,EAC9B;;AAED;EACE,kEAAuC;EACvC,yBAAyB;EACzB,0BAA0B;EAC1B,6BAA6B,EAC9B;;AAED;;EAEE,2BAA2B;EAC3B,8BAA8B,EAC/B;;AAED;EACE,6BAA6B;EAC7B,8BAA8B,EAC/B;;AAED;EACE;IACE,sBAAsB;IACtB,4BAAqB;IACrB,WAAW;IACX,6BFxgBkB,EAAA;EE0gBpB;IACE,sBAAsB;IACtB,yBAAqB;IACrB,WAAW,EAAA;EAEb;IACE,6BFhhBkB,EAAA;EEkhBpB;IACE,wBAAwB;IACxB,WAAW,EAAA,EAAA;;AAIf;EACE;IACE,sBAAsB;IACtB,yBAAqB;IACrB,WAAW,EAAA;EAEb;IACE,sBAAsB;IACtB,6BAAqB;IACrB,WAAW,EAAA,EAAA;;AAIf;EACE,cAAc;EACd,kBAAkB;EAClB,WAAW,EACZ;;AACD;EACE,cAAc;EACd,aAAa;EACb,sBAAsB;EACtB,yBAAyB;EACzB,wBAAwB;EACxB,eAAe;EACf,yBAAyB;EACzB,0BAA0B;EAC1B,UAAU;EACV,mBAAmB;EACnB,WAAW;EACX,SAAS;EACT,SAAS,EACV;;AAED;EACE,mBAAmB,EACpB;;AAED;;EAEE,oBAAoB,EACrB;;AACD;EAEI,cAAc,EACf;;AAHH;EAKI,aAAa;EACb,gBAAgB,EACjB;;AAGH;EACE,0BAA0B;EAC1B,aAAa,EACd;;AAED;;EAEE,mBAAmB;EACnB,OAAO;EACP,SAAS;EACT,YAAY;EACZ,gBAAgB,EACjB;;AAED;EACE,kBAAkB;EAClB,cAAc,EACf;;AAED;EACE,kBAAkB,EACnB;;AAED;EACE,sBAAsB,EACvB;;AAED;;EAEE,eAAe,EAChB;;AAED;EACE,mBAAmB,EACpB;;AAED;EACE,oBAAoB,EAuBrB;EAxBD;IAGI,mBAAmB;IACnB,YAAY;IACZ,YAAY;IACZ,SAAS;IACT,eAAe;IACf,gBAAgB,EACjB;EATH;IAWI,aAAa,EACd;EAZH;IAcI,aAAa;IACb,oBAAoB;IACpB,sBAAsB;IACtB,oBAAoB,EACrB;EAlBH;IAoBI,SAAS;IACT,YAAY;IACZ,mBAAmB,EACpB;;AAIH;EACE,YAAY;EACZ,mBAAmB,EAyDpB;EA3DD;IAKI,oBAAoB,EACrB;EANH;IASI,oBAAoB,EACrB;EAVH;IAaI,cAAc,EACf;EAdH;IAiBI,kBAAkB;IAClB,mBAAmB;IACnB,WAAW;IACX,YAAY;IACZ,mBAAmB,EAqCpB;IA1DH;MAwBM,eAAe;MACf,UAAU;MACV,mBAAmB;MACnB,mBAAmB,EAQpB;MAnCL;QA8BQ,WACD,EAAC;MA/BR;QAiCQ,UACD,EAAC;IAlCR;MAuCQ,oBAAoB,EACrB;IAxCP;MA0CQ,kBAAkB,EACnB;IA3CP;MA+CM,gBAAgB;MAChB,cAAc,EACf;IAjDL;MAoDM,mBAAmB;MACnB,WAAW;MACX,aAAa;MACb,SAAS;MACT,UAAU,EACX;;AAIL;EACI,cAAc,EASjB;EAVD;IAIY,kBAAkB;IAClB,aAAa;IACb,yBAAyB;IACzB,gBAAgB,EACnB;;AAIT;EACE,mBAAmB;EACnB,YAAY;EACZ,cAAc;EACd,uBAAoB;EAApB,oBAAoB;EACpB,sBAAwB;EAAxB,wBAAwB;EACxB,wBAAwB,EACzB;;AAED;EACE,mBAAmB;EACnB,UAAU,EACX;;AAGD;EACE,WAAW;EACX,YAAY,EACb;;AACD;EACE,cAAc,EACf;;AACD;EACE,+BAA+B;EAC/B,mBAAmB,EACpB;;AACD;EACE,mBAAmB;EACnB,0BAA0B;EAC1B,mBAAmB,EACpB;;AAED;EACE,cAAc,EACf;;AAED;EACE,cAAc,EACf;;AChyBD;EACE,oBAAe,EAChB;;AAED;EACE,aAAa,EAMd;EAPD;IAII,YAAY,EACb;;AChCH;EAGY,gBAAgB;EAChB,mBAAmB;EACnB,kBAAkB,EACrB;;AANT;EAYgB,oBAAoB,EAC3B;;ACbT;EAEQ,iBAAiB;EACjB,oBAAoB,EACvB;;ACJL;EAEQ,oBAAoB,EACvB;;AAHL;EAKQ,qBAAc;EAAd,cAAc;EACd,uBAAoB;EAApB,oBAAoB;EACpB,sBAAwB;EAAxB,wBAAwB,EAC3B;;;ACRL;EAEQ,0BAA0B;EAC1B,sBAAsB;EACtB,YAAY,EAKf;EATL;IAMY,0BAA0B;IAC1B,sBAAsB,EACzB","file":"demo.css","sourcesContent":["@charset \"UTF-8\";\n/* FormGroup */\n/* Navlayout */\n/* FormGroup */\n/* Navlayout */\n/**\r\n * 加载背景\r\n */\n/**\r\n * 文字\r\n */\n.u-loading-desc {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n font-size: 16px;\n color: #000;\n text-align: center; }\n\n/**\r\n * default样式 单个圆圈加载\r\n */\n.u-loading.u-loading-rotate > div {\n position: absolute;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n width: 40px;\n height: 40px;\n top: 50%;\n left: 50%;\n margin-left: -22px;\n margin-top: -22px;\n background: transparent !important;\n display: inline-block;\n -webkit-animation: rotate 1.5s 0s linear infinite;\n animation: rotate 1.5s 0s linear infinite;\n text-align: center;\n line-height: 40px; }\n .u-loading.u-loading-rotate > div > .uf {\n color: #0084ff;\n font-size: 40px;\n padding: 0; }\n\n.u-loading.u-loading-rotate.u-loading-rotate-lg > div {\n margin-left: -35px;\n margin-top: -35px;\n width: 60px;\n height: 60px;\n line-height: 60px; }\n .u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {\n font-size: 60px; }\n\n.u-loading.u-loading-rotate.u-loading-rotate-sm > div {\n margin-left: -15px;\n margin-top: -15px;\n width: 25px;\n height: 25px;\n line-height: 25px; }\n .u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {\n font-size: 25px; }\n\n.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {\n color: #3f51b5; }\n\n.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {\n color: #4caf50; }\n\n.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {\n color: #ff9800; }\n\n.u-loading-backdrop {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1900;\n opacity: .7;\n filter: blur(0.5px);\n background-color: #fff; }\n .u-loading-backdrop.full-screen {\n position: fixed; }\n\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate(0deg) scale(1);\n transform: rotate(0deg) scale(1); }\n 50% {\n -webkit-transform: rotate(180deg) scale(1);\n transform: rotate(180deg) scale(1); }\n 100% {\n -webkit-transform: rotate(360deg) scale(1);\n transform: rotate(360deg) scale(1); } }\n\n.u-loading.u-loading-line {\n position: absolute;\n top: 50%;\n left: 50%;\n margin-top: -30px;\n margin-left: -25px; }\n .u-loading.u-loading-line > div {\n background-color: #C2C3C5;\n width: 6px;\n height: 50px;\n border-radius: 2px;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block; }\n .u-loading.u-loading-line.u-loading-line-lg {\n margin-top: -50px;\n margin-left: -30px; }\n .u-loading.u-loading-line.u-loading-line-lg > div {\n width: 8px;\n height: 90px; }\n .u-loading.u-loading-line.u-loading-line-sm {\n margin-top: -22px;\n margin-left: -20px; }\n .u-loading.u-loading-line.u-loading-line-sm > div {\n width: 4px;\n height: 35px; }\n .u-loading.u-loading-line div:nth-child(1) {\n -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n background-color: #F44336; }\n .u-loading.u-loading-line div:nth-child(2) {\n -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n background-color: #7ED321; }\n .u-loading.u-loading-line div:nth-child(3) {\n -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n background-color: #0084FF; }\n .u-loading.u-loading-line div:nth-child(4) {\n -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n background-color: #FF9800; }\n .u-loading.u-loading-line div:nth-child(5) {\n -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n background-color: #D0021B; }\n .u-loading.u-loading-line.u-loading-line-primary > div {\n background-color: #3f51b5; }\n .u-loading.u-loading-line.u-loading-line-success > div {\n background-color: #4caf50; }\n .u-loading.u-loading-line.u-loading-line-warning > div {\n background-color: #ff9800; }\n\n@keyframes line-scale {\n 0% {\n -webkit-transform: scaley(1);\n transform: scaley(1); }\n 50% {\n -webkit-transform: scaley(0.4);\n transform: scaley(0.4); }\n 100% {\n -webkit-transform: scaley(1);\n transform: scaley(1); } }\n\n.u-table {\n font-size: 12px;\n color: #666;\n position: relative;\n line-height: 1.5;\n overflow: hidden; }\n .u-table-body {\n position: relative; }\n .u-table-hiden-drag {\n position: relative; }\n .u-table-hiden-drag-li {\n position: absolute;\n top: 0px;\n left: 0px; }\n .u-table table {\n width: 100%;\n border-collapse: collapse;\n text-align: left; }\n .u-table th {\n font-weight: bold;\n text-align: left; }\n .u-table th[colspan] {\n text-align: center; }\n .u-table th ::last-child {\n overflow: hidden; }\n .u-table td {\n border-bottom: 1px solid rgb(233,233,233); }\n .u-table td a {\n color: #2196F3; }\n .u-table td a:hover {\n color: #1565c0; }\n .u-table td a:active {\n color: #1565c0; }\n .u-table tr:hover td .uf-eye {\n visibility: visible !important; }\n .u-table tr tr a {\n color: #2196F3; }\n .u-table tr tr a:hover {\n color: #1565c0; }\n .u-table tr tr a:active {\n color: #1565c0; }\n .u-table tr.tr-row-hover {\n background: rgb(235, 236, 240); }\n .u-table th,\n .u-table td {\n padding: 12px 8px;\n word-break: break-all; }\n .u-table tr.filterable th {\n padding-top: 4px;\n padding-bottom: 4px; }\n .u-table tr.filterable th .filterContext {\n height: 35px; }\n .u-table-row-hover {\n background: rgb(235, 236, 240); }\n .u-table-scroll {\n overflow: auto; }\n .u-table-bordered table {\n border: 1px solid rgb(233,233,233);\n box-sizing: border-box;\n table-layout: fixed; }\n .u-table-bordered th {\n border-bottom: 1px solid rgb(233,233,233);\n box-sizing: border-box; }\n .u-table-bordered th,\n .u-table-bordered td {\n border-right: 1px solid rgb(233,233,233);\n box-sizing: border-box; }\n .u-table-drag-border tr th.th-can-not-drag {\n overflow: hidden; }\n .u-table-header {\n overflow: hidden;\n background: rgb(247,247,247);\n color: rgb(102, 102, 102); }\n .u-table.fixed-height td {\n padding: 0px 8px; }\n .u-table-fixed-header .u-table-body {\n background: #fff;\n position: relative; }\n .u-table-fixed-left .u-table-body-inner {\n margin-right: -20px;\n padding-right: 20px; }\n .u-table-fixed-header .u-table-fixed-left .u-table-body-inner {\n padding-right: 0px; }\n .u-table-fixed-header .u-table-body-inner {\n height: 100%;\n overflow: scroll; }\n .u-table-fixed-header .u-table-scroll .u-table-header {\n overflow-x: scroll;\n padding-bottom: 20px;\n margin-bottom: -20px;\n overflow-y: scroll;\n box-sizing: border-box; }\n .u-table-title {\n padding: 12px 8px;\n border-top: 1px solid rgb(233,233,233); }\n .u-table-content {\n position: relative; }\n .u-table-footer {\n padding: 12px 8px;\n border-bottom: 1px solid rgb(233,233,233); }\n .u-table-footer .u-table-scroll {\n overflow-x: hidden; }\n .u-table-footer .u-table {\n margin: -12px -8px; }\n .u-table-placeholder {\n padding: 12px 8px;\n background: #fff;\n border-bottom: 1px solid rgb(233,233,233);\n text-align: center;\n position: relative; }\n .u-table-expand-icon-col {\n width: 10px; }\n .u-table-row-expand-icon, .u-table-expanded-row-expand-icon {\n cursor: pointer;\n display: inline-block;\n margin-right: 0px;\n width: 16px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n border: 1px solid rgb(233,233,233);\n user-select: none;\n background: #fff;\n margin-right: 10px; }\n .u-table-row-spaced, .u-table-expanded-row-spaced {\n visibility: hidden; }\n .u-table-row-spaced:after, .u-table-expanded-row-spaced:after {\n content: \".\"; }\n .u-table-row-expanded:after, .u-table-expanded-row-expanded:after {\n content: \"-\"; }\n .u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {\n content: \"+\"; }\n .u-table-row.selected {\n background: rgb(235, 236, 240); }\n .u-table tr.u-table-expanded-row {\n background: #f7f7f7; }\n .u-table tr.u-table-expanded-row:hover {\n background: #f7f7f7; }\n .u-table tr.u-table-expanded-row .u-table {\n z-index: 1; }\n .u-table-column-hidden {\n display: none; }\n .u-table-prev-columns-page, .u-table-next-columns-page {\n cursor: pointer;\n color: #666;\n z-index: 1; }\n .u-table-prev-columns-page:hover, .u-table-next-columns-page:hover {\n color: #2db7f5; }\n .u-table-prev-columns-page-disabled, .u-table-next-columns-page-disabled {\n cursor: not-allowed;\n color: #999; }\n .u-table-prev-columns-page-disabled:hover, .u-table-next-columns-page-disabled:hover {\n color: #999; }\n .u-table-prev-columns-page {\n margin-right: 8px; }\n .u-table-prev-columns-page:before {\n content: \"<\"; }\n .u-table-next-columns-page {\n float: right; }\n .u-table-next-columns-page:before {\n content: \">\"; }\n .u-table-fixed-left, .u-table-fixed-right {\n position: absolute;\n top: 0;\n overflow: hidden;\n z-index: 1; }\n .u-table-fixed-left table, .u-table-fixed-right table {\n width: auto;\n background: #fff; }\n .u-table-fixed-left {\n left: 0;\n box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1); }\n .u-table-fixed-left-body-inner {\n margin-right: -20px;\n padding-right: 20px; }\n .u-table-fixed-left-fixed-header .u-table-fixed-left .u-table-fixed-left-body-inner {\n padding-right: 0; }\n .u-table-fixed-right {\n right: 0;\n box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1); }\n .u-table-fixed-right-expanded-row {\n color: transparent;\n pointer-events: none; }\n .u-table-scroll-position-left .u-table-fixed-left {\n box-shadow: none; }\n .u-table-scroll-position-right .u-table-fixed-right {\n box-shadow: none; }\n .u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {\n font-weight: normal; }\n .u-table-thead .filter-wrap {\n display: flex;\n justify-content: center;\n align-items: center; }\n .u-table-thead .filter-wrap .filter-btns {\n min-width: 58px; }\n .u-table-thead th {\n background: rgb(247,247,247);\n color: rgb(102, 102, 102);\n background-clip: padding-box;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n /*\n Introduced in IE 10. \n */\n -ms-user-select: none;\n user-select: none; }\n .u-table-thead th .bee-table-column-sorter {\n position: relative;\n margin-left: 4px;\n height: 1em;\n vertical-align: middle;\n text-align: center;\n display: inline-block; }\n .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down,\n .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {\n line-height: 6px;\n display: block;\n width: 34px;\n cursor: pointer; }\n .u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-down,\n .u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-up,\n .u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-down,\n .u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-up {\n color: #108ee9; }\n .u-table-thead th .bee-table-column-sorter .uf-triangle-down,\n .u-table-thead th .bee-table-column-sorter .uf-triangle-up {\n -webkit-filter: none;\n filter: none;\n font-size: 12px; }\n .u-table-thead th .bee-table-column-sorter .uf-triangle-down,\n .u-table-thead th .bee-table-column-sorter .uf-triangle-up {\n display: inline-block;\n padding: 0;\n font-size: 12px;\n font-size: 8px\\9;\n -webkit-transform: scale(0.66667) rotate(0deg);\n -ms-transform: scale(0.66667) rotate(0deg);\n transform: scale(0.66667) rotate(0deg);\n -ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)\";\n zoom: 1;\n line-height: 4px;\n height: 4px;\n color: #999; }\n .u-table-thead th:hover .bee-table-column-sorter {\n display: inline-block; }\n .u-table-thead .th-drag {\n cursor: move; }\n .u-table-thead .th-drag:hover {\n background: rgb(235, 236, 240); }\n .u-table-thead .th-drag-hover {\n background: #ccc; }\n .u-table-thead-th {\n position: relative; }\n .u-table-thead-th-drag-gap {\n height: 100%;\n position: absolute;\n right: -10px;\n top: 0;\n width: 20px;\n box-sizing: border-box;\n z-index: 1; }\n .u-table-thead-th-drag-gap .online {\n height: 100%;\n width: 1px;\n background: transparent;\n margin: 0 auto; }\n .u-table-thead-th-drag-gap .online-hover {\n background: #000000; }\n .u-table-thead-th-drag-gap:hover {\n cursor: col-resize; }\n .u-table-thead-th-drag-gap:hover .online {\n background: #000000; }\n .u-table-thead-th:last-child-drag-gap {\n border: none; }\n .u-table-filter-column-pop-cont {\n margin: 10px;\n margin-top: 0px;\n height: 300px;\n overflow-y: scroll; }\n .u-table-filter-column-clear-setting {\n border-bottom: 1px solid #ccc;\n cursor: pointer; }\n .u-table-filter-column-cont {\n position: relative; }\n .u-table-filter-column-filter-icon {\n position: absolute;\n top: 3px;\n right: 18px;\n width: 22px;\n height: 25px;\n line-height: 25px;\n z-index: 2;\n background: #f7f7f7; }\n .u-table-filter-column-filter-iconi.uf {\n padding: 0px; }\n .u-table-filter-column-pop-cont-item {\n margin-top: 10px;\n line-height: 30px;\n cursor: pointer; }\n .u-table-filter-column-pop-cont-item > span {\n margin-left: 5px;\n width: 100px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap; }\n .u-table-filter-column-pop .u-modal-dialog {\n border: 1px solid #ccc;\n background: #fff; }\n .u-table-row-fixed-columns-in-body {\n display: none;\n pointer-events: none; }\n .u-table .u-checkbox {\n height: 16px;\n line-height: 16px;\n margin: 0px; }\n\n.u-table:focus {\n outline: none;\n box-shadow: 0 0 0; }\n\n.u-table-bordered .u-table-drag-gap {\n background: #e9e9e9; }\n\n.u-table.bordered table {\n border-collapse: collapse; }\n\n.u-table.bordered th,\n.u-table.bordered td {\n border: 1px solid rgb(233,233,233); }\n\n.move-enter,\n.move-appear {\n opacity: 0;\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-duration: 2.5s;\n animation-fill-mode: both;\n animation-play-state: paused; }\n\n.move-leave {\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-duration: 0.5s;\n animation-fill-mode: both;\n animation-play-state: paused; }\n\n.move-enter.move-enter-active,\n.move-appear.move-enter-active {\n animation-name: moveLeftIn;\n animation-play-state: running; }\n\n.move-leave.move-leave-active {\n animation-name: moveRightOut;\n animation-play-state: running; }\n\n@keyframes moveLeftIn {\n 0% {\n transform-origin: 0 0;\n transform: translateX(30px);\n opacity: 0;\n background: rgb(238,238,238); }\n 20% {\n transform-origin: 0 0;\n transform: translateX(0);\n opacity: 1; }\n 80% {\n background: rgb(238,238,238); }\n 100% {\n background: transparent;\n opacity: 1; } }\n\n@keyframes moveRightOut {\n 0% {\n transform-origin: 0 0;\n transform: translateX(0);\n opacity: 1; }\n 100% {\n transform-origin: 0 0;\n transform: translateX(-30px);\n opacity: 0; } }\n\n.formItem-style {\n height: unset;\n min-height: unset;\n padding: 0; }\n\n.errMessage-style {\n display: none;\n border: none;\n /* margin-top: 5px; */\n /* margin-bottom: 5px; */\n background: transparent;\n color: #f22c1d;\n /* padding-left: 12px; */\n /* padding-right: 12px; */\n margin: 0;\n position: absolute;\n padding: 0;\n top: 3px;\n right: 0; }\n\n.editable-cell {\n position: relative; }\n\n.editable-cell-input-wrapper,\n.editable-cell-text-wrapper {\n padding-right: 24px; }\n\n.editable-cell-input-wrapper .u-form-item.formItem-style .u-label {\n display: none; }\n\n.editable-cell-input-wrapper .u-input-group .u-form-control {\n height: 26px;\n font-size: 12px; }\n\n.editable-cell-text-wrapper {\n padding: 5px 24px 5px 5px;\n height: 30px; }\n\n.editable-cell-icon,\n.editable-cell-icon-check {\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n cursor: pointer; }\n\n.editable-cell-icon {\n line-height: 28px;\n display: none; }\n\n.editable-cell-icon-check {\n line-height: 28px; }\n\n.editable-cell:hover .editable-cell-icon {\n display: inline-block; }\n\n.editable-cell-icon:hover,\n.editable-cell-icon-check:hover {\n color: #2db7f5; }\n\n.editable-add-btn {\n margin-bottom: 8px; }\n\n.search-component {\n margin-bottom: 20px; }\n .search-component .empty-search {\n position: absolute;\n right: 45px;\n z-index: 20;\n top: 5px;\n color: #524e4e;\n cursor: pointer; }\n .search-component.u-input-group.simple {\n float: right; }\n .search-component.u-input-group.simple .u-form-control {\n width: 251px;\n background: #f5f5f5;\n border-color: #f5f5f5;\n border-radius: 20px; }\n .search-component.u-input-group.simple .u-input-group-btn {\n top: 3px;\n right: 20px;\n position: absolute; }\n\n.col-resize-container {\n height: 0px;\n position: relative; }\n .col-resize-container + .table-col-resizer:first-of-type {\n table-layout: fixed; }\n .col-resize-container .active-drag .icon {\n visibility: visible; }\n .col-resize-container .last-handle {\n display: none; }\n .col-resize-container .drag-handle {\n margin-left: -5px;\n position: absolute;\n z-index: 5;\n width: 10px;\n cursor: col-resize; }\n .col-resize-container .drag-handle .icon {\n color: #40b0dc;\n top: -1px;\n position: absolute;\n visibility: hidden; }\n .col-resize-container .drag-handle .icon:first-child {\n left: -2px; }\n .col-resize-container .drag-handle .icon:last-child {\n left: 6px; }\n .col-resize-container .drag-handle:hover .icon {\n visibility: visible; }\n .col-resize-container .drag-handle:hover .col-resizer {\n border: 1px solid; }\n .col-resize-container .drag-handle.disabled-drag {\n cursor: default;\n display: none; }\n .col-resize-container .drag-handle .col-resizer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0px;\n left: 3px; }\n\n.u-filter-dropdown-menu-wrap {\n z-index: 1800; }\n .u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {\n line-height: 32px;\n height: 32px;\n padding: 0px 16px 0 16px;\n cursor: pointer; }\n\n.u-row-hover {\n position: absolute;\n right: 24px;\n display: none;\n align-items: center;\n justify-content: center;\n background: transparent; }\n\n.u-row-hover2 {\n position: absolute;\n left: 100; }\n\n::-webkit-scrollbar {\n width: 8px;\n height: 8px; }\n\n::-webkit-scrollbar-button {\n display: none; }\n\n::-webkit-scrollbar-thumb {\n background: #d5d5d5 !important;\n border-radius: 5px; }\n\n::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: #d5d5d5;\n position: absolute; }\n\n::-webkit-scrollbar-track {\n display: none; }\n\n::-webkit-scrollbar-track-piece {\n display: none; }\n\n.selected {\n background: #e3f2fd; }\n\n.demo25 {\n height: 100%; }\n .demo25 .u-table-filter-column-filter-icon {\n right: 15px; }\n\nth .drop-menu .uf {\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px; }\n\nth:hover .uf {\n visibility: visible; }\n\n.demo3 .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px; }\n\n.demo8 .u-table {\n margin-bottom: 11px; }\n\n.demo8 .u-pagination {\n display: flex;\n align-items: center;\n justify-content: center; }\n\n\n.opt-btns .u-button {\n background-color: #505F79;\n border-color: #505F79;\n color: #fff; }\n .opt-btns .u-button:hover, .opt-btns .u-button:active {\n background-color: #344563;\n border-color: #344563; }\n","\r\n\r\n// $performance_font: 'Helvetica', 'Arial', sans-serif !default;\r\n\r\n@import \"minxin-colors\";\r\n\r\n\r\n\r\n@function strip-units($number) {\r\n @return $number / ($number * 0 + 1);\r\n}\r\n$unit: 10px !default;\r\n// IMAGES\r\n$image_path: '/images' !default;\r\n\r\n\r\n\r\n//默认颜色\r\n$trim-color-classes: false !default;\r\n\r\n@import \"minxin-themeColors\";\r\n\r\n//对比色\r\n$color-primary-contrast: $color-dark-contrast !default;\r\n$color-accent-contrast: $color-dark-contrast !default;\r\n//字体颜色\r\n$color-text: $palette-grey-900 !default;\r\n\r\n//不明所以 $primary-color: unquote(\"rgba(#{$palette-grey-500}, 0.20)\") !default;\r\n\r\n// -- Fonts 字体大小权重预定义\r\n$preferred-font: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei',sans-serif !default;\r\n$font-size: 1.6 * $unit !default;\r\n$font-size-tiny: 1.2 * $unit !default;\r\n$font-size-small: 1.4 * $unit !default;\r\n$font-size-normal: $font-size !default;\r\n$font-size-big: 1.8 * $unit !default;\r\n$font-weight-thin: 300 !default;\r\n$font-weight-normal: 400 !default;\r\n$font-weight-semi-bold: 500 !default;\r\n$font-weight-bold: 700 !default;\r\n$font-color:unquote(\"rgb(#{$palette-u-gray-800})\") !default;\r\n\r\n\r\n$font-weight-override: false;\r\n$font-weight-light: 300;\r\n$font-weight-normal: 400;\r\n$font-weight-medium: 500;\r\n$font-weight-bold: 700;\r\n$font-weight-base: $font-weight-normal;\r\n\r\n\r\n\r\n\r\n$gray-base: unquote(\"rgb(#{$palette-grey-900})\") !default;\r\n$gray-darkest: unquote(\"rgb(#{$palette-grey-800})\") !default;\r\n$gray-darker: unquote(\"rgb(#{$palette-grey-700})\") !default;\r\n$gray-dark: unquote(\"rgb(#{$palette-grey-600})\") !default;\r\n$gray: unquote(\"rgb(#{$palette-grey-500})\") !default;\r\n$gray-light: unquote(\"rgb(#{$palette-grey-400})\") !default;\r\n$gray-lighter: unquote(\"rgb(#{$palette-grey-300})\") !default;\r\n$gray-lightest:unquote(\"rgb(#{$palette-grey-200})\") !default;\r\n$inverse: unquote(\"rgb(#{$color-white})\") !default;\r\n// $border-color-base: $gray-lighter;\r\n$border-color-base: unquote(\"rgb(#{$border-color})\") !default;\r\n$line-height-base: 1.57142857;\r\n\r\n// 边框圆角\r\n$border-radius-base: $border-radius;\r\n\r\n// 阴影\r\n\r\n$shadow-key-umbra-opacity: 0.2 !default;\r\n$shadow-key-penumbra-opacity: 0.14 !default;\r\n$shadow-ambient-shadow-opacity: 0.12 !default;\r\n\r\n$shadow-base: 0 1px 5px $gray-lighter;\r\n\r\n\r\n\r\n//-- Indexes\r\n$z-index-highest: 300;\r\n$z-index-higher: 200;\r\n$z-index-high: 100;\r\n$z-index-normal: 1;\r\n$z-index-low: -100;\r\n$z-index-lower: -200;\r\n\r\n$zindex-modal: 1700;\r\n$zindex-modal-background: 1600;\r\n$zIndex-notification: 1560;\r\n$zIndex-message: 1550;\r\n$zIndex-popconfirm: 1540;\r\n$zIndex-popover: 1540;\r\n$zIndex-tooltip: 1530;\r\n$zIndex-alert: 1510;\r\n$zindex-navbar-fixed: 1500;\r\n$zindex-menubar: 1400;\r\n$zindex-overlay: 1300;\r\n$zindex-dropdown: 1200;\r\n$zindex-navbar: 1200;\r\n$zindex-header: 1100;\r\n$zindex-footer: 1000;\r\n$zindex-backtop:2000;\r\n\r\n// 文本字体\r\n\r\n//todo\r\n$text-color-primary: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\r\n$text-link-color: unquote(\"rgb(#{$color-accent})\") !default;\r\n\r\n$target-elements-directly: true !default;\r\n\r\n\r\n$global-selected-color: unquote(\"rgb(#{$palette-blue-100})\") !default;\r\n\r\n\r\n// 控件\r\n$cursor-disabled: not-allowed;\r\n\r\n\r\n$title-color: $gray-darkest;\r\n//todo\r\n$subtitle-color: $gray-darker;\r\n$text-color: $gray-dark;\r\n\r\n$prompt-color: $gray;\r\n//全局不同状态颜色\r\n//todo\r\n$active-color-base: unquote(\"rgb(#{$palette-blue-800})\") !default;\r\n$normal-color-base: unquote(\"rgb(#{$palette-blue-600})\") !default;\r\n$hover-color-base: unquote(\"rgb(#{$palette-blue-400})\") !default;\r\n\r\n$bg-color-base: $gray-lightest;\r\n\r\n//disable颜色\r\n$disabled-color-base: $gray-light;\r\n$disabled-border-color: $gray-lighter;\r\n$disabled-bg-color: $gray-lightest;\r\n\r\n// 全局链接颜色\r\n$link-color: $normal-color-base;\r\n$link-hover-color: $hover-color-base;\r\n$link-active-color: $active-color-base;\r\n\r\n// 品牌色\r\n$brand-default: $gray-lighter;\r\n$brand-default-hover: $gray-lightest;\r\n$brand-default-active: $gray-light;\r\n// $brand-default: unquote(\"rgb(#{$color-primary})\");\r\n// $brand-default-hover: unquote(\"rgb(#{$color-primary-light})\");\r\n// $brand-default-active: unquote(\"rgb(#{$color-primary-dark})\");\r\n\r\n$brand-primary : unquote(\"rgb(#{$primary-color})\") !default;\r\n$brand-primary-hover: unquote(\"rgb(#{$primary-color-light})\") !default;\r\n$brand-primary-active: unquote(\"rgb(#{$primary-color-dark})\") !default;\r\n\r\n$brand-secondary : unquote(\"rgb(#{$secondary-color})\") !default;\r\n$brand-secondary-hover: unquote(\"rgb(#{$secondary-color-light})\") !default;\r\n$brand-secondary-active: unquote(\"rgb(#{$secondary-color-dark})\") !default;\r\n\r\n$brand-success: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n$brand-success-hover: unquote(\"rgb(#{$palette-green-300})\") !default;\r\n$brand-success-active: unquote(\"rgb(#{$palette-green-700})\") !default;\r\n\r\n$brand-info: unquote(\"rgb(#{$palette-cyan-500})\") !default;\r\n$brand-info-hover: unquote(\"rgb(#{$palette-cyan-300})\") !default;\r\n$brand-info-active: unquote(\"rgb(#{$palette-cyan-700})\") !default;\r\n\r\n$brand-warning: unquote(\"rgb(#{$palette-orange-500})\") !default;\r\n$brand-warning-hover: unquote(\"rgb(#{$palette-orange-300})\") !default;\r\n$brand-warning-active: unquote(\"rgb(#{$palette-orange-700})\") !default;\r\n\r\n\r\n$brand-news: unquote(\"rgb(#{$palette-blue-500})\") !default;\r\n$brand-news-hover: unquote(\"rgb(#{$palette-blue-300})\") !default;\r\n$brand-news-active: unquote(\"rgb(#{$palette-blue-700})\") !default;\r\n\r\n$brand-danger: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$brand-danger-hover: unquote(\"rgb(#{$palette-red-300})\") !default;\r\n$brand-danger-active: unquote(\"rgb(#{$palette-red-700})\") !default;\r\n\r\n$brand-dark: $gray-darker;\r\n$brand-dark-hover: $gray-dark;\r\n$brand-dark-active: $gray-darkest;\r\n\r\n$brand-light : unquote(\"rgb(#{$color-dark-contrast})\") !default;\r\n$brand-light-hover: unquote(\"rgb(#{$palette-grey-200})\") !default;\r\n$brand-light-active: unquote(\"rgb(#{$palette-grey-400})\") !default;\r\n\r\n$brand-light-primary : unquote(\"rgb(#{$palette-blue-100})\") !default;\r\n$brand-light-success: unquote(\"rgb(#{$palette-green-100})\") !default;\r\n$brand-light-info: unquote(\"rgb(#{$palette-cyan-100})\") !default;\r\n$brand-light-warning: unquote(\"rgb(#{$palette-orange-100})\") !default;\r\n$brand-light-news: unquote(\"rgb(#{$palette-blue-100})\") !default;\r\n$brand-light-danger: unquote(\"rgb(#{$palette-red-100})\") !default;\r\n\r\n//不同背景下对应的文字颜色\r\n\r\n$color-news: unquote(\"rgb(#{$palette-blue-500})\") !default;\r\n$color-success: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n$color-info: unquote(\"rgb(#{$palette-cyan-500})\") !default;\r\n$color-warning: unquote(\"rgb(#{$palette-orange-500})\") !default;\r\n$color-danger: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$color-light: $gray-darker !default;\r\n\r\n//redius\r\n\r\n$default-border-radius: $border-radius;\r\n\r\n// hover时的背景色,包括select、dropdown、table、datepicker、tree、menu等组件\r\n$hover-bg-color-base: unquote(\"rgb(#{$item-hover-bg-color-base})\") !default;\r\n// // selected背景色,包括:select、menu等\r\n$selected-bg-color-base: unquote(\"rgb(#{$item-selected-bg-color-base})\") !default;\r\n\r\n// UButton\r\n\r\n// Button 基础背景色.\r\n// 默认按钮()\r\n$button-default-color: unquote(\"rgb(#{$default-color})\");\r\n$button-default-color-IE8: unquote(\"rgb(#{$default-color})\");\r\n\r\n// 边框按钮(shape:'border')\r\n$button-border-bg-color: unquote(\"rgb(#{$color-dark-contrast})\");\r\n\r\n// Button 不同状态下的背景色 :hover、active、focus状态.\r\n$button-hover-color: unquote(\"rgb(#{$default-color-light})\");\r\n$button-active-color: unquote(\"rgb(#{$default-color-dark})\");\r\n$button-focus-color: unquote(\"rgb(#{$default-color-light})\");\r\n\r\n// Button 配置不同colors属性时的背景色.\r\n$button-primary-color: $brand-primary;\r\n$button-primary-active-color: $brand-primary-active;\r\n$button-primary-hover-color: $brand-primary-hover;\r\n$button-secondary-color: $brand-secondary;\r\n$button-secondary-active-color: $brand-secondary-active;\r\n$button-secondary-hover-color: $brand-secondary-hover;\r\n$button-success-color: $brand-success;\r\n$button-success-active-color: $brand-success-active;\r\n$button-success-hover-color: $brand-success-hover;\r\n$button-info-color: $brand-info;\r\n$button-info-active-color: $brand-info-active;\r\n$button-info-hover-color: $brand-info-hover;\r\n$button-warning-color: $brand-warning;\r\n$button-warning-active-color: $brand-warning-active;\r\n$button-warning-hover-color: $brand-warning-hover;\r\n$button-danger-color: $brand-danger;\r\n$button-danger-active-color: $brand-danger-active;\r\n$button-danger-hover-color: $brand-danger-hover;\r\n$button-dark-color: $brand-dark;\r\n$button-dark-active-color: $brand-dark-active;\r\n$button-dark-hover-color: $brand-dark-hover;\r\n$button-light-color: $brand-light;\r\n$button-light-active-color: $brand-light-active;\r\n$button-light-hover-color: $brand-light-hover;\r\n\r\n// Button 文字颜色.\r\n// 主按钮(colors:'primary')\r\n$button-primary-text-color: unquote(\"rgb(#{$text-color-base})\") !default;\r\n$button-text-color: $button-primary-text-color;\r\n// 次按钮(colors:'secondary')\r\n$button-second-text-color: unquote(\"rgb(#{$button-secondary-text-color})\") !default;\r\n// 默认按钮()\r\n$button-default-text-color: unquote(\"rgb(#{$palette-grey-900})\") !default;\r\n// 边框按钮(shape:'border')\r\n// $button-border-text-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n\r\n// Button 边框样式及颜色.\r\n$button-border-style: unquote(\"solid\") !default;\r\n$button-border-color: $border-color-base;\r\n$button-default-border-color: $button-default-color !default;\r\n\r\n// Button 不同状态下的边框颜色 :hover、active、focus状态.\r\n$button-hover-border-color: $brand-default-hover;\r\n$button-active-border-color: $brand-default-active;\r\n$button-focus-border-color: $brand-default-active;\r\n\r\n// FAB colors and sizes.\r\n$button-fab-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\r\n$button-fab-hover-color-alt: unquote(\"rgb(#{$color-accent-light})\") !default;\r\n$button-fab-active-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\r\n$button-fab-text-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\r\n$button-fab-ripple-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\r\n\r\n// Icon button colors and sizes.\r\n$button-icon-color: unquote(\"rgb(#{$palette-grey-700})\") !default;\r\n$button-icon-focus-color: $button-focus-color !default;\r\n\r\n// Button 最小宽度、高度、内边距、外边距、行高、边框粗细、圆角.\r\n$button-min-width: 72/10 * $unit !default;\r\n$button-height: 36/10 * $unit !default;\r\n$button-padding: 4/10* $unit 13/10 * $unit !default;\r\n$button-padding-IE8: 4px 13px !default;\r\n$button-top-padding: 1310 * $unit !default;\r\n$button-left-padding: 6/10* $unit !default;\r\n$button-line-height:1.57142857;\r\n$button-margin: 4/10 * $unit !default;\r\n$button-border-radius: 3/10 * $unit !default;\r\n$button-border-width: 1/10 * $unit !default;\r\n\r\n$button-fab-size: 38/10 * $unit !default;\r\n$button-fab-size-mini: 30/10 * $unit !default;\r\n$button-fab-font-size: 14/10 * $unit !default;\r\n\r\n$button-icon-size: 32/10 * $unit !default;\r\n$button-icon-size-mini: 13/10 * $unit !default;\r\n\r\n$button-raised-font-size: 14/10 * $unit !default;\r\n\r\n// Button 大按钮\r\n$button-padding-y-lg:8px;\r\n$button-padding-x-lg:15px;\r\n$font-size-lg:1.4 * $unit;\r\n\r\n\r\n// Button 特大型按钮\r\n$button-padding-y-xg:10.5px;\r\n$button-padding-x-xg:18px;\r\n$font-size-xg:1.6 * $unit;\r\n\r\n\r\n// Button 小型按钮\r\n$button-padding-y-sm:3px;\r\n$button-padding-x-sm:5px;\r\n$font-size-sm:1.2 * $unit;\r\n\r\n\r\n\r\n// UText\r\n\r\n\r\n$form-control-border-radius: $border-radius-base;\r\n$form-control-default-font-size: 14px;\r\n$form-control-lg-font-size: 14px;\r\n$form-control-sm-font-size: 12px;\r\n$form-control-default-height: 32px;\r\n$form-control-lg-height: 40px;\r\n$form-control-sm-height: 26px;\r\n$form-control-color: #424242;\r\n$form-control-bg-color: #fff;\r\n$form-control-border-color: $border-color-base;\r\n$form-control-disable-bg-color: #F7F9FB;\r\n$form-control-disable-color: #909090;\r\n$form-control-disable-border-color: #DFE1E6;\r\n\r\n$input-text-background-color: transparent !default;\r\n$input-text-label-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\r\n$input-text-bottom-border-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\r\n$input-text-bottom-border-color-IE8: unquote(\"rgb(#{$color-black})\") !default;\r\n$input-text-highlight-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$input-text-disabled-color: $input-text-bottom-border-color !default;\r\n$input-text-disabled-text-color: $input-text-label-color !default;\r\n$input-text-error-color: unquote(\"rgb(222, 50, 38)\") !default;\r\n$input-text-must-color:unquote(\"rgb(#{$palette-red-A700})\") !default;\r\n\r\n\r\n$input-text-font-size: 14px !default;\r\n$input-text-width: 100% !default;\r\n$input-text-padding: 4px !default;\r\n$input-text-vertical-spacing: 20px !default;\r\n\r\n$input-text-button-size: 32px !default;\r\n$input-text-floating-label-fontsize: 12px !default;\r\n$input-text-expandable-icon-top: 16px !default;\r\n$input-text-height:36px !default;\r\n$input-text-normal-width:360px !default;\r\n$input-text-short-width:180px !default;\r\n$input-text-normal-border-color:unquote(\"rgb(#{$palette-u-gray-400})\") !default;\r\n$input-text-color:unquote(\"rgb(#{$palette-u-gray-A200})\") !default;\r\n$input-text-focus-border-color:unquote(\"rgb(#{$palette-u-blue-400})\") !default;\r\n$input-lable-color:unquote(\"rgb(#{$palette-u-gray-900})\") !default;\r\n\r\n\r\n/* FormGroup */\r\n\r\n$error-input-border:$brand-danger;\r\n$warning-input-border:$brand-warning;\r\n$success-input-border:$brand-success;\r\n$success-addon-bg: $brand-light-success;\r\n$warning-addon-bg: $brand-light-warning;\r\n$error-addon-bg: $brand-light-danger;\r\n$form-group-margin-top: 15px;\r\n$form-group-margin-bottom: 15px;\r\n\r\n/* Navlayout */\r\n\r\n$layout-nav-color: unquote(\"rgb(#{$palette-grey-100})\") !default;\r\n\r\n// Drawer\r\n$layout-drawer-bg-color: unquote(\"rgb(#{$palette-grey-50})\") !default;\r\n$layout-drawer-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\r\n$layout-text-color: unquote(\"rgb(#{$palette-grey-800})\") !default;\r\n$layout-drawer-navigation-color: #757575 !default;\r\n$layout-drawer-navigation-link-active-background: unquote(\"rgb(#{$palette-grey-200})\") !default;\r\n$layout-drawer-navigation-link-active-color: $layout-text-color !default;\r\n\r\n// Header\r\n$layout-header-bg-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$layout-header-text-color: unquote(\"rgb(#{$color-primary-contrast})\") !default;\r\n$layout-header-nav-hover-color: unquote(\"rgba(#{$palette-grey-700}, 0.6)\") !default;\r\n$layout-header-tab-text-color: unquote(\"rgba(#{$color-primary-contrast}, 0.6)\") !default;\r\n\r\n// Tabs\r\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\r\n\r\n$layout-nav-link-font-size: 13px !default;\r\n\r\n$layout-drawer-narrow: 240px !default;\r\n$layout-drawer-wide: 456px !default;\r\n$layout-drawer-width: $layout-drawer-narrow !default;\r\n\r\n$layout-header-icon-size: 32px !default;\r\n$layout-screen-size-threshold: 1024px !default;\r\n$layout-header-icon-margin: 24px !default;\r\n$layout-drawer-button-mobile-size: 44px !default;\r\n$layout-drawer-button-desktop-size: 34px !default;\r\n$layout-drawer-button-desktop-margin-top: 5px !default;\r\n$layout-drawer-button-mobile-margin-top: 10px !default;\r\n\r\n$layout-header-mobile-row-height: 56px !default;\r\n$layout-mobile-header-height: $layout-header-mobile-row-height;\r\n$layout-header-desktop-row-height: 44px !default;\r\n$layout-desktop-header-height: $layout-header-desktop-row-height;\r\n\r\n$layout-header-desktop-baseline: 80px !default;\r\n$layout-header-mobile-baseline: 72px !default;\r\n$layout-header-mobile-indent: 16px !default;\r\n$layout-header-desktop-indent: 40px !default;\r\n\r\n$layout-tab-font-size: 14px !default;\r\n$layout-tab-bar-height: 48px !default;\r\n$layout-tab-mobile-padding: 12px !default;\r\n$layout-tab-desktop-padding: 24px !default;\r\n$layout-tab-highlight-thickness: 2px !default;\r\n\r\n// gridlayout\r\n\r\n// Extra small screen / phone\r\n//$screen-xs: 480px;\r\n\r\n$screen-xs-min: 480px;\r\n// Deprecated `@screen-phone` as of v3.0.1\r\n//@screen-phone: @screen-xs-min;\r\n\r\n// Small screen / tablet\r\n// Deprecated `@screen-sm` as of v3.0.1\r\n//@screen-sm: 768px;\r\n$screen-sm-min: 768px;\r\n// Deprecated `@screen-tablet` as of v3.0.1\r\n//@screen-tablet: @screen-sm-min;\r\n\r\n// Medium screen / desktop\r\n// Deprecated `@screen-md` as of v3.0.1\r\n//@screen-md: 992px;\r\n$screen-md-min: 992px;\r\n// Deprecated `@screen-desktop` as of v3.0.1\r\n//@screen-desktop: @screen-md-min;\r\n\r\n// Large screen / wide desktop\r\n// Deprecated `@screen-lg` as of v3.0.1\r\n//@screen-lg: 1200px;\r\n$screen-lg-min: 1200px;\r\n// Deprecated `@screen-lg-desktop` as of v3.0.1\r\n//@screen-lg-desktop: @screen-lg-min;\r\n$screen-xs-max: ($screen-sm-min - 1 );\r\n\r\n$screen-sm-max: ($screen-sm-min - 1 );\r\n\r\n$screen-md-max: ($screen-lg-min - 1 );\r\n\r\n\r\n\r\n\r\n// Number of columns in the grid.\r\n$grid-columns: 12;\r\n// Padding between columns. Gets divided in half for the left and right.\r\n$grid-gutter-width: 30px;\r\n// Navbar collapse\r\n// Point at which the navbar becomes uncollapsed.\r\n$grid-float-breakpoint: 768px;\r\n// Point at which the navbar begins collapsing.\r\n$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);\r\n\r\n\r\n// Small screen / tablet\r\n$container-tablet: (720px + $grid-gutter-width);\r\n// For `@screen-sm-min` and up.\r\n$container-sm: $container-tablet;\r\n\r\n// Medium screen / desktop\r\n$container-desktop: (940px + $grid-gutter-width);\r\n// For `@screen-md-min` and up.\r\n$container-md: $container-desktop;\r\n\r\n// Large screen / wide desktop\r\n$container-large-desktop: (1140px + $grid-gutter-width);\r\n// For `@screen-lg-min` and up.\r\n$container-lg: $container-large-desktop;\r\n\r\n\r\n\r\n// menu\r\n\r\n$default-dropdown-bg-color: unquote(\"rgb(#{$color-white})\") !default;\r\n$menu-expand-duration: 0.3s !default;\r\n$menu-fade-duration: 0.2s !default;\r\n\r\n// Default Item Colors\r\n$default-item-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\r\n$default-item-text-color-IE8: unquote(\"rgb(#{$color-black})\") !default;\r\n$default-item-outline-color: unquote(\"rgb(#{$palette-u-blue-400})\") !default;\r\n$default-item-hover-bg-color: unquote(\"rgb(#{$palette-u-blue-100})\") !default;\r\n$default-item-focus-bg-color: unquote(\"rgb(#{$palette-u-blue-200})\") !default;\r\n$default-item-active-bg-color: unquote(\"rgb(#{$palette-u-blue-200})\") !default;\r\n$default-item-divider-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\r\n\r\n// Disabled Button Colors\r\n$disabled-item-text-color: unquote(\"rgb(#{$palette-grey-400})\") !default;\r\n\r\n// Tile\r\n$tile-width: 100%;\r\n\r\n$tile-default-border-color: #e9e9e9;\r\n$tile-default-hover-shadow-color: rgba(0, 0, 0, 0.2);\r\n\r\n$tile-primary-border-color: $button-primary-color;\r\n$tile-primary-hover-shadow-color: $button-primary-hover-color;\r\n\r\n$tile-danger-border-color: $button-danger-color;\r\n$tile-danger-hover-shadow-color: $button-danger-hover-color;\r\n\r\n$tile-warning-border-color: $button-warning-color;\r\n$tile-warning-hover-shadow-color: $button-warning-hover-color;\r\n\r\n$tile-success-border-color: $button-success-color;\r\n$tile-success-hover-shadow-color: $button-success-hover-color;\r\n\r\n$tile-info-border-color: $button-info-color;\r\n$tile-info-hover-shadow-color: $button-info-hover-color;\r\n\r\n// Alert\r\n$alert-news-bg: $brand-light-news;\r\n$alert-success-bg: $brand-light-success;\r\n$alert-info-bg: $brand-light-info;\r\n$alert-warning-bg: $brand-light-warning;\r\n$alert-danger-bg: $brand-light-danger;\r\n\r\n\r\n$alert-dark-news-bg: $brand-news;\r\n$alert-dark-success-bg: $brand-success;\r\n$alert-dark-info-bg: $brand-info;\r\n$alert-dark-warning-bg: $brand-warning;\r\n$alert-dark-danger-bg: $brand-danger;\r\n\r\n$alert-news-color: $color-news;\r\n$alert-success-color: $color-success;\r\n$alert-info-color: $color-info;\r\n$alert-warning-color: $color-warning;\r\n$alert-danger-color: $color-danger;\r\n\r\n$timeline-primary-color: $brand-primary;\r\n$timeline-news-color: $color-news;\r\n$timeline-success-color: $color-success;\r\n$timeline-info-color: $color-info;\r\n$timeline-warning-color: $color-warning;\r\n$timeline-danger-color: $color-danger;\r\n\r\n$alert-padding:10px;\r\n$alert-font-size:12px;\r\n$alert-border-radius: $border-radius;\r\n$alert-text-padding-left: 15px;\r\n$alert-text-padding-right: 15px;\r\n$alert-close-font-size: 21px;\r\n$alert-close-opacity: .2;\r\n$alert-close-font-weight: 700;\r\n\r\n//Checkbox\r\n\r\n$checkbox-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$checkbox-off-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$checkbox-off-color-IE8: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$checkbox-disabled-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$checkbox-focus-color: unquote(\"rgba(#{$palette-u-blue-500}, 0.26)\") !default;\r\n$checkbox-image-path: $image_path;\r\n\r\n$checkbox-label-font-size: 13px !default;\r\n$checkbox-label-height: 24px !default;\r\n$checkbox-button-size: 16px !default;\r\n$checkbox-inner-margin: 2px !default;\r\n$checkbox-padding: 8px !default;\r\n$checkbox-top-offset:\r\n ($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;\r\n$checkbox-ripple-size: $checkbox-label-height * 1.5;\r\n\r\n$checkbox-primary-bg: $brand-primary;\r\n$checkbox-success-bg: $brand-success;\r\n$checkbox-info-bg: $brand-info;\r\n$checkbox-warning-bg: $brand-warning;\r\n$checkbox-danger-bg: $brand-danger;\r\n$checkbox-dark-bg: $brand-dark;\r\n\r\n$progress-primary-bg: $brand-primary;\r\n$progress-success-bg: $brand-success;\r\n$progress-info-bg: $brand-info;\r\n$progress-warning-bg: $brand-warning;\r\n$progress-danger-bg: $brand-danger;\r\n$progress-dark-bg: $brand-dark;\r\n\r\n$primary-color-opacity:unquote(\"rgba(#{$primary-color}, 0.7)\") !default;\r\n$color-success-opacity:unquote(\"rgba(#{$palette-green-500}, 0.7)\") !default;\r\n$color-info-opacity:unquote(\"rgba(#{$palette-cyan-500}, 0.7)\") !default;\r\n$color-warning-opacity:unquote(\"rgba(#{$palette-orange-500}, 0.7)\") !default;\r\n$color-danger-opacity:unquote(\"rgba(#{$palette-red-500}, 0.7)\") !default;\r\n$color-dark-opacity:unquote(\"rgba(#{$palette-grey-700}, 0.7)\") !default;\r\n\r\n\r\n$progress-sm-height: 10px;\r\n$progress-xs-height: 5px;\r\n$progress-xs-width: 170px;\r\n$progress-default-height: 20px;\r\n$progress-sm-lable-font-size: 10px;\r\n$progress-sm-lable-line-height: 10px;\r\n$progress-xs-lable-line-height: 8px;\r\n$progress-xs-lable-margin-left: 140px;\r\n$progress-xs-lable-font-size: 10px;\r\n$progress-xs-lable-color: #000;\r\n\r\n// Radio\r\n\r\n$radio-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$radio-off-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$radio-off-color-IE8: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$radio-disabled-color: #909090 !default;\r\n\r\n$radio-label-font-size: 13px !default;\r\n$radio-label-height: 32px !default;\r\n$radio-button-size: 16px !default;\r\n$radio-inner-margin: $radio-button-size / 4;\r\n$radio-padding: 8px !default;\r\n$radio-top-offset: ($radio-label-height - $radio-button-size) / 2;\r\n$radio-ripple-size: 42px !default;\r\n\r\n$radio-primary-bg: $brand-primary;\r\n$radio-success-bg: $brand-success;\r\n$radio-info-bg: $brand-info;\r\n$radio-warning-bg: $brand-warning;\r\n$radio-danger-bg: $brand-danger;\r\n$radio-dark-bg: $brand-dark;\r\n\r\n$radio-disabled-bg: #f7f7f7;\r\n$radio-diabled-border-color: #d9d9d9;\r\n\r\n$radio-border-color: #d9d9d9;\r\n$radio-bg-color: #fff;\r\n$radio-color:#212121;\r\n\r\n$radio-checked-bg-color: #fff;\r\n$radio-checked-color: $brand-primary;\r\n$radio-checked-border-color: $radio-checked-color;\r\n\r\n$radio-icon-height: 18px;\r\n$radio-icon-width: 18px;\r\n$radio-icon-checked-height: 8px;\r\n$radio-icon-checked-width: 8px;\r\n\r\n$radio-button-lg-height:42px;\r\n$radio-button-lg-line-height:26px;\r\n\r\n$radio-button-sm-height:22px;\r\n$radio-button-sm-line-height:20px;\r\n\r\n$radio-button-height: 28px;\r\n$radio-button-line-height: 26px;\r\n\r\n\r\n\r\n\r\n\r\n//loading\r\n\r\n$loading-color-1: unquote(\"rgb(#{$palette-blue-400})\") !default;\r\n$loading-color-2: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$loading-color-3: unquote(\"rgb(#{$palette-yellow-600})\") !default;\r\n$loading-color-4: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n\r\n$loading-single-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n\r\n$loading-size: 28px !default;\r\n$loading-stroke-width: 3px !default;\r\n\r\n// Amount of circle the arc takes up.\r\n$loading-arc-size: 270deg !default;\r\n// Time it takes to expand and contract arc.\r\n$loading-arc-time: 1333ms !default;\r\n// How much the start location of the arc should rotate each time.\r\n$loading-arc-start-rot: 216deg !default;\r\n\r\n$loading-duration: 360 * $loading-arc-time / (\r\n strip-units($loading-arc-start-rot + (360deg - $loading-arc-size)));\r\n\r\n// datetimepicker\r\n$timepicker-border-gap-color:#ccc;\r\n$timepicker-font-size:14px;\r\n\r\n$date-bg-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n\r\n// message\r\n$snackbar-color: unquote(\"rgb(#{$color-white})\") !default;\r\n$snackbar-background-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$snackbar-color-cancel: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$snackbar-color-accept: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n$snackbar-color-warning: unquote(\"rgb(#{$palette-lime-200})\") !default;\r\n\r\n// DATA TABLE\r\n\r\n$data-table-font-size: 13px !default;\r\n$data-table-header-font-size: 12px !default;\r\n$data-table-header-sort-icon-size: 16px !default;\r\n\r\n$data-table-header-color: rgba(#000, 0.54) !default;\r\n$data-table-header-sorted-color: rgba(#000, 0.87) !default;\r\n$data-table-divider-color: rgba(#000, 0.12) !default;\r\n$data-table-divider-color-IE8: rgb(0,0,0) !default;\r\n\r\n//$data-table-hover-color: #eeeeee !default;\r\n$data-table-hover-color: #E9F7FC !default;\r\n$data-table-selection-color: #C4EAF6 !default;\r\n\r\n$data-table-dividers: 1px solid $data-table-divider-color !default;\r\n$data-table-dividers-IE8: 1px solid $data-table-divider-color-IE8 !default;\r\n\r\n$data-table-row-height: 48px !default;\r\n$data-table-last-row-height: 56px !default;\r\n$data-table-header-height: 56px !default;\r\n\r\n$data-table-column-spacing: 36px !default;\r\n$data-table-column-padding: $data-table-column-spacing / 2;\r\n\r\n$data-table-card-header-height: 64px !default;\r\n$data-table-card-title-top: 20px !default;\r\n$data-table-card-padding: 24px !default;\r\n$data-table-button-padding-right: 16px !default;\r\n$data-table-cell-top: $data-table-card-padding / 2;\r\n\r\n// $line-height-computed: round(($font-size-small * $line-height-base));\r\n$line-height-computed: round((14px * $line-height-base));\r\n$table-bg: transparent;\r\n$table-cell-padding: 8px;\r\n$table-border-color: $border-color-base;\r\n$table-bg-hover: $bg-color-base;\r\n$table-bg-active: $table-bg-hover;\r\n$table-bg-accent: unquote(\"rgba(#{$palette-grey-200},.3)\") !default;\r\n\r\n\r\n\r\n\r\n// tooltip\r\n$tooltip-max-width: 200px;\r\n$tooltip-color: #fff;\r\n$tooltip-bg: #42526E;\r\n$tooltip-inverse-border-color: #d9d9d9;\r\n$tooltip-inverse-color: rgb(51,51,51);\r\n$tooltip-arrow-color: $tooltip-bg;\r\n$tooltip-opacity: .9;\r\n\r\n\r\n// 进度条\r\n$bar-height: 4px !default;\r\n$progress-main-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$progress-secondary-color: unquote(\"rgba(#{$color-primary-contrast}, 0.7)\") !default;\r\n$progress-fallback-buffer-color: unquote(\"rgba(#{$color-primary-contrast}, 0.9)\") !default;\r\n$progress-image-path: $image_path;\r\n$progress-buffer-bar-border:unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n\r\n// Tabs\r\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\r\n\r\n\r\n\r\n$tab-highlight-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$tab-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\r\n$tab-active-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\r\n$tab-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\r\n\r\n\r\n\r\n//CARD\r\n\r\n$card-width: 330px !default;\r\n$card-height: 200px !default;\r\n$card-font-size: 13px !default;\r\n$card-title-font-size: 24px !default;\r\n$card-subtitle-font-size: 10px !default;\r\n$card-horizontal-padding: 16px !default;\r\n$card-vertical-padding: 16px !default;\r\n\r\n$card-title-perspective-origin-x: 165px !default;\r\n$card-title-perspective-origin-y: 56px !default;\r\n\r\n$card-title-transform-origin-x: 165px !default;\r\n$card-title-transform-origin-y: 56px !default;\r\n\r\n$card-title-text-transform-origin-x: 149px !default;\r\n$card-title-text-transform-origin-y: 48px !default;\r\n\r\n$card-supporting-text-font-size: 1.4 * $unit !default;\r\n$card-supporting-text-line-height: 18px !default;\r\n\r\n$card-actions-font-size: 13px !default;\r\n\r\n$card-title-text-font-weight: 300 !default;\r\n$card-z-index: 1 !default;\r\n\r\n// Cover image\r\n$card-cover-image-height: 186px !default;\r\n$card-background-image-url: '' !default;\r\n\r\n\r\n\r\n$card-background-color: unquote(\"rgb(#{$color-white})\") !default;\r\n$card-text-color: unquote(\"rgb(#{$color-black})\") !default;\r\n$card-image-placeholder-color: unquote(\"rgb(#{$color-accent})\") !default;\r\n$card-supporting-text-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\r\n$card-border-color: rgba(0,0,0,0.1) !default;\r\n$card-subtitle-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\r\n\r\n\r\n$input-border:unquote(\"rgb(#{$palette-u-gray-500})\");\r\n$input-border-focus:unquote(\"rgb(#{$primary-color})\");\r\n$input-border-disabled:unquote(\"rgb(#{$palette-u-gray-100})\");\r\n$input-bg-disabled:unquote(\"rgb(#{$palette-u-gray-100})\");\r\n$input-color:unquote(\"rgb(#{$palette-u-gray-A100})\");\r\n$form-input-height:36px;\r\n$form-input-height-sm:28px;\r\n$form-input-padding-left:12px;\r\n$form-label-color:unquote(\"rgb(#{$palette-u-gray-900})\");\r\n$form-control-feedback-color:unquote(\"rgb(#{$palette-u-gray-700})\");\r\n$form-validate-error-color:unquote(\"rgb(#{$palette-u-red-600})\");\r\n\r\n\r\n// BADGE\r\n$badge-font-size: 12px !default;\r\n$badge-color: unquote(\"rgb(#{$color-accent-contrast})\") !default;\r\n$badge-color-inverse: unquote(\"rgb(#{$color-accent})\") !default;\r\n$badge-background: unquote(\"rgb(#{$color-accent})\") !default;\r\n$badge-background-inverse: unquote(\"rgba(#{$color-accent-contrast},0.2)\") !default;\r\n$badge-size : 22px !default;\r\n$badge-padding: 2px !default;\r\n$badge-overlap: 12px !default;\r\n\r\n$badge-primary-color:#FFFFFF;\r\n$badge-primary-bg:$brand-primary;\r\n\r\n$badge-success-color:#FFFFFF;\r\n$badge-success-bg: $brand-success;\r\n\r\n$badge-info-color:#FFFFFF;\r\n$badge-info-bg:$brand-info;\r\n\r\n$badge-warning-color:#FFFFFF;\r\n$badge-warning-bg:$brand-warning;\r\n\r\n$badge-danger-color:#FFFFFF;\r\n$badge-danger-bg:$brand-danger;\r\n\r\n$badge-dark-color:#FFFFFF;\r\n$badge-dark-bg:$brand-dark;\r\n\r\n$badge-font-size: 12px;\r\n$badge-font-dataicon-size: 10px;\r\n$badge-default-dataicon-fontcolor: #757575;\r\n$badge-default-dataicon-bgcolor: #fff;\r\n$badge-default-dataicon-bordercolor: $border-color-base;\r\n\r\n// labels\r\n$tag-padding: .25em .6em .25em;\r\n$tag-border-radius: 0.3em;\r\n$tag-bg: #eeeeee;\r\n$tag-round-border-radius: 1em;\r\n$tag-default-color: #757575;\r\n$tag-default-bg:#e0e0e0;\r\n$tag-lg-font-size: 16px;\r\n$tag-sm-font-size: 10px;\r\n$tag-sm-padding: .1em .5em .1em;\r\n$tag-default-hover-bg: $brand-default-hover;\r\n$tag-primary-hover-bg: $brand-primary-hover;\r\n$tag-success-hover-bg: $brand-success-hover;\r\n$tag-info-hover-bg: $brand-info-hover;\r\n$tag-warning-hover-bg: $brand-warning-hover;\r\n$tag-danger-hover-bg: $brand-danger-hover;\r\n$tag-dark-hover-bg: $brand-dark-hover;\r\n$tag-default-bg: $brand-default;\r\n$tag-primary-bg: $brand-primary;\r\n$tag-success-bg: $brand-success;\r\n$tag-info-bg: $brand-info;\r\n$tag-warning-bg: $brand-warning;\r\n$tag-danger-bg: $brand-danger;\r\n$tag-dark-bg: $brand-dark;\r\n$tag-default-hover-color:unquote(\"rgb(#{$palette-u-gray-500})\");\r\n\r\n\r\n// pagination\r\n$pagination-gap-hover-border:#7A869A;\r\n\r\n$pagination-link-padding: 7px 13px;\r\n$pagination-lg-font-size: 16px;\r\n$pagination-lg-padding-vertical: 9.5px;\r\n$pagination-lg-padding-horizontal: 15.5px;\r\n\r\n$pagination-small-font-size: 12px;\r\n$pagination-small-padding-vertical: 4px;\r\n$pagination-small-padding-horizontal: 9.5px;\r\n\r\n$pag-color: #666666;\r\n$pag-bg-color: #fff;\r\n$pag-border-color:#d7d7d7;\r\n$pag-hover-color: #666;\r\n$pag-hover-bg-color:$hover-bg-color-base;\r\n$pag-hover-border-color:#d7d7d7;\r\n$pag-active-color: #fff;\r\n$pag-active-bg-color:#7A869A;\r\n$pag-active-border-color:#7A869A;\r\n$pag-disabled-color: #777;\r\n$pag-disabled-bg-color:#fff;\r\n$pag-disabled-border-color:#ddd;\r\n\r\n$border-radius-base: $border-radius;\r\n$border-radius-large: 4px;\r\n$border-radius-small: 2px;\r\n\r\n$line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome\r\n$line-height-small: 1.5;\r\n// widget\r\n\r\n$widget-padding-left:30px;\r\n$widget-padding-top:10px;\r\n\r\n//tooltips\r\n\r\n$tooltip-default-bg: $brand-default;\r\n$tooltip-primary-bg: $brand-primary;\r\n$tooltip-success-bg: $brand-success;\r\n$tooltip-info-bg: $brand-info;\r\n$tooltip-warning-bg: $brand-warning;\r\n$tooltip-danger-bg: $brand-danger;\r\n$tooltip-dark-bg: $brand-dark;\r\n\r\n//menu Button\r\n\r\n$menu-default-bg: $brand-default;\r\n$menu-primary-bg: $brand-primary;\r\n$menu-success-bg: $brand-success;\r\n$menu-info-bg: $brand-info;\r\n$menu-warning-bg: $brand-warning;\r\n$menu-danger-bg: $brand-danger;\r\n$menu-dark-bg: $brand-dark;\r\n$menu-default-bg-hover: $brand-default-hover;\r\n$menu-primary-bg-hover: $brand-primary-hover;\r\n$menu-success-bg-hover: $brand-success-hover;\r\n$menu-info-bg-hover: $brand-info-hover;\r\n$menu-warning-bg-hover: $brand-warning-hover;\r\n$menu-danger-bg-hover: $brand-danger-hover;\r\n$menu-dark-bg-hover: $brand-dark-hover;\r\n\r\n\r\n// breadcrumbs\r\n\r\n$breadcrumb-padding-vertical: 8px;\r\n$breadcrumb-padding-horizontal: 10px;\r\n$breadcrumb-separator: \"/\\00a0\";\r\n$breadcrumb-bg: transparent;\r\n$breadcrumb-margin-bottom: 10px;\r\n\r\n$breadcrumb-color: $brand-primary;\r\n$breadcrumb-active-color: $text-color;\r\n\r\n$breadcrumb-icon-margin-right: 10px;\r\n$breadcrumb-arrow-separator: \"\\00bb\\00a0\";\r\n\r\n$breadcrumb-bg-color: #f5f5f5;\r\n$breadcrumb-active-color: #777;\r\n$breadcrumb-separate-color: #ccc;\r\n\r\n// list-group\r\n$list-group-media-heading-font-size : $font-size-small;//14px\r\n$list-group-link-disabled-color : $disabled-color-base;\r\n\r\n$list-group-link-disabled-bg : $gray-lightest;\r\n\r\n$list-group-active-color : $brand-primary;\r\n$list-group-link-active-color : unquote(\"rgb(#{$color-white})\") !default;\r\n$list-group-link-active-bg : $brand-primary;\r\n\r\n\r\n$list-group-item-icon-margin-right : 10px;\r\n\r\n$list-group-bg-inherit-item-border : rgba(0, 0, 0, 0.075);\r\n$list-group-bg-inherit-item-hover-bg : rgba(0, 0, 0, 0.075);\r\n\r\n\r\n$list-group-border-radius: $border-radius-base;\r\n\r\n\r\n\r\n$list-group-link-color: $text-color;\r\n$list-group-link-hover-color: $text-color;\r\n$list-group-link-heading-color: $title-color;\r\n\r\n$list-group-hover-bg: $bg-color-base;\r\n\r\n$list-group-disabled-bg: transparent;\r\n\r\n$list-group-disabled-color: $disabled-color-base;\r\n\r\n\r\n$list-group-disabled-text-color: $list-group-disabled-color;\r\n$list-group-active-bg: transparent;\r\n$list-group-active-border: $list-group-active-bg;\r\n// $list-group-active-text-color: lighten($list-group-active-color, 40%);\r\n$list-group-active-text-color: $list-group-active-color;\r\n\r\n$list-group-bg: #fff;\r\n$list-group-border: transparent;\r\n// $list-group-bordered-border : $border-color-base;\r\n// $list-group-bordered-active-color : $component-active-color;\r\n// $list-group-bordered-active-bg : $component-active-bg;\r\n// $list-group-bordered-active-border : $list-group-bordered-active-bg;\r\n\r\n// $list-group-gap-item-margin-bottom : 2px;\r\n\r\n//step\r\n$steps-margin-bottom: $line-height-computed;\r\n$step-padding-horizontal:20px;\r\n$step-padding-vertical: 12px;\r\n\r\n$step-vertical-padding-horizontal: 20px;\r\n$step-vertical-padding-vertical:18px;\r\n\r\n$step-color: $gray;\r\n$step-bg: $bg-color-base;\r\n$step-number-bg: $gray-lighter;\r\n$step-number-color: $inverse;\r\n\r\n$step-current-color: $inverse;\r\n$step-current-bg: $brand-primary;\r\n\r\n$step-done-color: $inverse;\r\n$step-done-bg:$brand-success;\r\n\r\n$step-error-color: $inverse;\r\n$step-error-bg: $brand-danger;\r\n\r\n$step-disabled-color:$gray-light;\r\n\r\n$step-font-size: inherit;\r\n$step-title-font-size: 20px;\r\n$step-icon-font-size:27px;\r\n$step-number-font-size:24px;\r\n$step-number-size: 40px;\r\n\r\n$step-lg-padding-horizontal:20px;\r\n$step-lg-padding-vertical:20px;\r\n$step-lg-font-size: 16px;\r\n$step-lg-title-font-size:22px;\r\n$step-lg-icon-font-size: 32px;\r\n$step-lg-number-font-size:28px;\r\n$step-lg-number-size:46px;\r\n\r\n$step-sm-font-size: 12px;\r\n$step-sm-title-font-size: 18px;\r\n$step-sm-icon-font-size: 24px;\r\n$step-sm-number-font-size: 24px;\r\n$step-sm-number-size: 30px;\r\n\r\n$step-xs-font-size: 10px;\r\n$step-xs-title-font-size: 16px;\r\n$step-xs-icon-font-size: 22px;\r\n$step-xs-number-font-size: 20px;\r\n$step-xs-number-size: 24px;\r\n\r\n// blog nav\r\n$blognav-active-color:unquote(\"rgb(#{$primary-color})\");\r\n// widget\r\n$widget-padding-left:30px;\r\n$widget-padding-top:10px;\r\n\r\n\r\n// couter 数据统计\r\n\r\n$counter-number-color: $gray-darkest;\r\n$counter-number-font-size: 20px;\r\n$counter-icon-font-size: $counter-number-font-size;\r\n\r\n$counter-lg-number-font-size: 40px;\r\n$counter-md-number-font-size: 30px;\r\n$counter-sm-number-font-size: 14px;\r\n\r\n$counter-lg-icon-font-size: $counter-lg-number-font-size;\r\n$counter-md-icon-font-size: $counter-md-number-font-size;\r\n$counter-sm-icon-font-size: $counter-sm-number-font-size;\r\n\r\n$counter-inverse-color: $inverse;\r\n\r\n\r\n// navbar\r\n\r\n\r\n$menu-active-color: #108ee9;\r\n$menu-border-active-color: #108ee9;\r\n$menu-selected-bg-color: #eaf8fe;\r\n$menu-group-titil-color: #999;\r\n$menu-group-title-padding-left: 32px;\r\n$menu-color: #666;\r\n$menu-border-color: #d9d9d9;\r\n\r\n$navbar-default-bg-color: #f8f8f8;\r\n$navbar-default-border-color: #e7e7e7;\r\n$navbar-default-color: #777;\r\n$navbar-default-hover-color: #333;\r\n$navbar-inverse-hover-color: #fff;\r\n$navbar-inverse-color: #9d9d9d;\r\n$navbar-inverse-bg-color: #222;\r\n$navbar-inverse-border-color: #080808;\r\n$navbar-border-radius: 4px;\r\n\r\n$navbar-side-container-border-color: #d9d9d9;\r\n$navbar-side-container-width: 242px;\r\n$navbar-side-container-border-shadow: #d9d9d9;\r\n\r\n// Basics of a navbar\r\n$navbar-height: 50px;\r\n$navbar-margin-bottom: $line-height-computed;\r\n$navbar-border-radius: $border-radius-base;\r\n$navbar-padding-horizontal: floor(($grid-gutter-width / 2));\r\n$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2);\r\n$navbar-collapse-max-height: 340px;\r\n\r\n$navbar-avatar-margin-horizontal: (($navbar-height - 32px) / 2);\r\n\r\n$navbar-brand-padding-horizontal: 20px;\r\n$navbar-brand-logo-height: 32px;\r\n\r\n$navbar-default-color: $text-color;\r\n$navbar-default-bg: $inverse;\r\n$navbar-default-border: $border-color-base;\r\n\r\n// Navbar links\r\n$navbar-default-link-color: $text-color;\r\n$navbar-default-link-hover-color: $gray-darker;\r\n$navbar-default-link-hover-bg: rgba(238,238,238, 30%);\r\n$navbar-default-link-active-color: $navbar-default-link-hover-color;\r\n$navbar-default-link-active-bg: rgba(238,238,238, 60%);\r\n$navbar-default-link-disabled-color: $disabled-color-base;\r\n$navbar-default-link-disabled-bg: transparent;\r\n\r\n// Navbar brand label\r\n$navbar-default-brand-color: $title-color;\r\n$navbar-default-brand-hover-color: $navbar-default-brand-color;\r\n$navbar-default-brand-hover-bg: none;\r\n\r\n// Navbar toggle\r\n$navbar-default-toggle-hover-bg: $navbar-default-link-hover-bg;\r\n$navbar-default-toggle-icon-bar-bg: $navbar-default-color;\r\n$navbar-default-toggle-border-color: transparent;\r\n\r\n\r\n// Inverted navbar\r\n// Reset inverted navbar basics\r\n$navbar-inverse-bg: $brand-primary;\r\n$navbar-inverse-border: rgba(0, 0, 0, .1);\r\n\r\n// Inverted navbar links\r\n$navbar-inverse-link-color: $inverse;\r\n$navbar-inverse-link-hover-color: $inverse;\r\n$navbar-inverse-link-hover-bg: rgba(0, 0, 0, .1);\r\n$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color;\r\n$navbar-inverse-link-active-bg: $navbar-inverse-link-hover-bg;\r\n$navbar-inverse-link-disabled-color: $inverse;\r\n$navbar-inverse-link-disabled-bg: transparent;\r\n\r\n// Inverted navbar brand label\r\n$navbar-inverse-brand-color: $navbar-inverse-link-color;\r\n$navbar-inverse-brand-hover-color: $inverse;\r\n$navbar-inverse-brand-hover-bg: none;\r\n\r\n// Inverted navbar toggle\r\n$navbar-inverse-toggle-hover-bg: $navbar-inverse-link-hover-bg;\r\n$navbar-inverse-toggle-icon-bar-bg: $inverse;\r\n$navbar-inverse-toggle-border-color: transparent;\r\n\r\n//hamburger\r\n$hamburger-size: 17px;\r\n\r\n\r\n//panel\r\n$panel-header-padding : 10px 15px;\r\n$panel-footer-padding : 10px 15px;\r\n$panel-body-padding : 15px 15px;\r\n$panel-header-bg-color : #f5f5f5;\r\n$panel-footer-bg-color : #f5f5f5;\r\n$panel-bg-color : #fff;\r\n$panel-default-color : #757575;\r\n$panel-inner-border-color: #ddd;\r\n\r\n\r\n//modal\r\n$modal-header-padding : 15px;\r\n$modal-body-padding : 15px;\r\n$modal-footer-padding : 15px;\r\n$modal-content-bg-color: #fff;\r\n$modal-backdrop-bg: #000;\r\n$modal-backdrop-opacity: .6;\r\n$modal-header-border-color: transparent;\r\n$modal-footer-border-color: transparent;\r\n$modal-xlg: 1200px;\r\n$modal-lg: 900px;\r\n$modal-sm: 300px;\r\n$modal-default: 600px;\r\n$modal-border-radius: $border-radius-base;\r\n\r\n//notification\r\n\r\n$zIndex-notification: $zIndex-notification;\r\n$notification-top: 30px;\r\n$notification-bottom: 30px;\r\n$notification-right: 30px;\r\n$notification-width: 300px;\r\n$notification-text-margin-right: 15px;\r\n$notice-padding: 15px;\r\n$notice-background: $gray-darkest;\r\n$notice-bottom: 15px;\r\n\r\n//message\r\n\r\n$message-font-size: 12px;\r\n\r\n$message-right: 30px;\r\n$message-width: 300px;\r\n$message-text-margin-right: 15px;\r\n$message-padding: 0;\r\n$message-content-padding: 15px;\r\n$message-background: $gray-darkest;\r\n\r\n//popconfirm\r\n\r\n$popconfirm-max-width: 300px;\r\n\r\n$popconfirm-dark-bg: $gray-darkest;\r\n$popconfirm-fallback-dark-border-color: $gray-darkest;\r\n$popconfirm-margin: 10px;\r\n$popconfirm-title-bg: #fff;\r\n$popconfirm-border-color:$border-color-base;\r\n$popconfirm-arrow-width: 10px;\r\n$popconfirm-arrow-color: $border-color-base;\r\n$popconfirm-arrow-outer-width: 0;\r\n$popconfirm-arrow-outer-color: $border-color-base;\r\n$popconfirm-border-right-color: $border-color-base;\r\n$popconfirm-fallback-border-color: #fff;\r\n\r\n//select\r\n\r\n$select-bg-color: #fff;\r\n$select-border-color: $border-color-base;\r\n$select-border-radius: $border-radius-base;\r\n$select-color: #666;\r\n$select-font-size: 12px;\r\n$select-dropdown-color: #666;\r\n$select-dropdown-bg-color: #fff;\r\n$select-dropdown-hover-bg: $hover-bg-color-base;\r\n$select-dropdown-selected-bg: $selected-bg-color-base;\r\n$select-dropdown-selected-color: rgb(134, 119, 119);\r\n$select-dropwdown-item-padding: 7px 16px;\r\n$select-disabled-color: #ccc;\r\n$select-disabled-bg: #f7f7f7;\r\n$select-disabled-border-color: #d9d9d9;\r\n//dropdown\r\n\r\n$dropdown-item-hover-bg-color: unquote(\"rgb(#{$palette-grey-100})\");\r\n$dropdown-item-divier-bg-color: $gray-lighter;\r\n$dropdown-border-color: $border-color-base;\r\n$dropdown-border-radius:3px;\r\n$dropdown-shadow: 0 1px 5px $dropdown-border-color;\r\n$dropdown-margin: 5px 0 0 0;\r\n$dropdown-menu-item-padding: 0px 16px 0 28px;\r\n$dropdown-menu-font-size: 12px;\r\n$dropdown-menu-item-height: 42px;\r\n$dropdown-menu-item-light-height: 42px;\r\n$dropdown-menu-title-font-size: 12px;\r\n$dropdown-menu-title-color: #999;\r\n$dropdown-menu-title-padding:8px 16px;\r\n$dropdown-menu-title-line-height: 1.5;\r\n\r\n//upload\r\n\r\n$upload-list-color: #108ee9;\r\n$upload-list-bg : #fff;\r\n$upload-list-hover-bg: #e7f4fd;\r\n$upload-list-error-color: #f50;\r\n$upload-thumbnail-height: 48px;\r\n$upload-thumbnail-width: 48px;\r\n$upload-thumbnail-img-height: 48px;\r\n$upload-thumbnail-img-width: 48px;\r\n\r\n//loading\r\n\r\n$loading-loadprimary: rgb(63, 81, 181);\r\n$loading-loadsuccess: #4caf50;\r\n$loading-loadwarn: rgb(255, 152, 0);\r\n$loading-lineanimating: (\r\n 1:line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 2:line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 3:line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 4:line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 5:line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08)\r\n);\r\n$loading-linebackcolor: (\r\n 1: #F44336,\r\n 2: #7ED321,\r\n 3: #0084FF,\r\n 4: #FF9800,\r\n 5: #D0021B\r\n);\r\n$loading-back-width: 120px;\r\n$loading-back-height:110px;\r\n$loading-desc-font-size: 16px;\r\n$loading-desc-color: #cecece;\r\n$loading-rotate-bor:#c2c3c5;\r\n\r\n//两种加载的尺寸 width height\r\n$loading-rotate-sm-size: 25px;\r\n$loading-rotate-size:40px;\r\n$loading-rotate-lg-size:60px;\r\n\r\n$loading-line-sm-width: 4px;\r\n$loading-line-sm-height:35px;\r\n$loading-line-width:6px;\r\n$loading-line-height:50px;\r\n$loading-line-lg-width:8px;\r\n$loading-line-lg-height:90px ;\r\n\r\n//居中位置top left\r\n$loading-center-top:50%;\r\n$loading-center-left:50%;\r\n\r\n$loading-rotate-center-sm: -15px ;\r\n$loading-rotate-center:-22px;\r\n$loading-rotate-center-lg:-35px ;\r\n\r\n$loading-line-center-sm-top: -22px;\r\n$loading-line-center-sm-left:-20px;\r\n$loading-line-center-top:-30px;\r\n$loading-line-center-left:-25px;\r\n$loading-line-center-lg-top:-50px;\r\n$loading-line-center-lg-left:-30px;\r\n\r\n\r\n//switch\r\n\r\n\r\n//color\r\n$switch-border-color: $gray-lighter;\r\n$switch-back-color: $gray-lighter;\r\n$switch-checked-borColor: $brand-primary;\r\n$switch-checked-backColor: $brand-primary;\r\n\r\n// border-radius of different state switch\r\n$switch-border-radius: 20px;\r\n$switch-border-radius-after: 18px;\r\n\r\n// width height line-height of the three switches\r\n$switch-width: (default:44px, small:32px, large:60px);\r\n$switch-height: (default:22px, small:16px, large:30px);\r\n$switch-lineHeight: (default:20px, small:12px, large:12px);\r\n\r\n// style of u-switch-inner\r\n$switch-inner-fontSize: (default:12px, small:10px, large:18px);\r\n$switch-inner-left: (default:22px, small:16px, large:30px);\r\n$switch-inner-largeTop: 8px;\r\n\r\n// style of u-switch:active:after\r\n$switch-active-width: (default:24px, small:16px, large:32px);\r\n\r\n// style of u-switch:after\r\n$switch-after-widthHeight: 18px;\r\n$switch-after-widthHeight-sm: 14px;\r\n$switch-after-widthHeight-lg: 26px;\r\n$switch-after-top: 1px;\r\n$switch-after-top-sm: 0;\r\n$switch-after-top-lg: 1px;\r\n$switch-after-left: 0;\r\n$switch-after-left-sm: 0;\r\n$switch-after-left-lg: 0;\r\n\r\n// style of u-switch.is-checked\r\n$switch-checked-innerLeft: (default:8px, small:4px, large:8px);\r\n$switch-checked-afterLeft: (default:24px, small:16px, large:32px);\r\n$switch-checked-activeLeft: (default:16px, small:10px, large:26px);\r\n\r\n$switch-primary-bg: $brand-primary;\r\n$switch-dark-bg: $brand-dark;\r\n$switch-success-bg: $brand-success;\r\n$switch-warning-bg: $brand-warning;\r\n$switch-danger-bg: $brand-danger;\r\n$switch-info-bg: $brand-info;\r\n\r\n//tabs\r\n\r\n$tabs-basic-back: #f5f5f5;\r\n$tabs-cls-color: #666;\r\n$tabs-cls-width: 900px;\r\n$tabs-simple-conHeight: 120px;\r\n$tabs-simple-conPad: 16px;\r\n$tabs-simple-conWidth: 100%;\r\n\r\n$tabs-fontSize: (simple:14px, fill:14px, turn:14px, slide:14px, fade:14px, fadeup:14px);\r\n$tabs-lineHeight: (simple:2.3, fill:2.3, turn:2.3, slide:2.3, fade:2.3, fadeup:2.3);\r\n$tabs-marginBottom: -1px;\r\n\r\n$tabs-simple-tab: (padding:0 16px, margin:5px 0 5px 5px, radius:0 0 0 0, back:#fff);\r\n$tabs-simple-tabBorder: 1px solid #fff;\r\n$tabs-simple-activeBorder: 1px solid $brand-primary;\r\n$tabs-simple-activeColor: #fff;\r\n$tabs-simple-activeBorBottom: 1px solid $brand-primary;\r\n$tabs-simple-activeTopRadius: 5px;\r\n$tabs-simple-fontWeight: bold;\r\n\r\n$tabs-fill-tab: (padding: 0 16px, color:#666, back:#fff, afterBack:#d2d8d6, activeBack:$brand-primary);\r\n$tabs-fill-tab-maright: 5px;\r\n$tabs-fill-after-top: 0;\r\n$tabs-fill-after-left: 0;\r\n$tabs-fill-after-width: 100%;\r\n$tabs-fill-after-height: 100%;\r\n$tabs-fill-fontWeight: bold;\r\n\r\n$tabs-turn-tab: (padding: 0 16px, color:#fff, back:#f5f5f5, afterBack:$brand-primary, activeBack:$brand-primary);\r\n$tabs-turn-after-top: 0;\r\n$tabs-turn-after-left: 0;\r\n$tabs-turn-after-width: 100%;\r\n$tabs-turn-after-height: 100%;\r\n$tabs-turn-beforeBot: 32px;\r\n$tabs-turn-beforeRight: 15px;\r\n$tabs-turn-fontWeight: bold;\r\n$tabs-moveleft-conHeight: 120px;\r\n$tabs-moveleft-conPad: 16px;\r\n\r\n$tabs-slide-tabs: (width:25%, padding: 0 16px, back:#f5f5f5);\r\n$tabs-slide-child-bottom: 0;\r\n$tabs-slide-child-left: 0;\r\n$tabs-slide-child-height: 4px;\r\n$tabs-slide-child-back: $brand-primary;\r\n$tabs-slide-fontWeight: bold;\r\n\r\n$tabs-fade-tab: (marLeft:5px, marTop:5px, color:#666, padding:0 16px, radius:0 0 0 0);\r\n$tabs-fade-conPad: 16px;\r\n$tabs-fade-conBor: 5px;\r\n\r\n$tabs-fadeup-tab: (marTop:5px, color:#666, padding:0 16px, radius:0 0 0 0);\r\n$tabs-fadeup-top: -5px;\r\n$tabs-fadeup-left: 0;\r\n$tabs-fadeup-width: 100%;\r\n$tabs-fadeup-height: 100%;\r\n$tabs-fadeup-color: #666;\r\n$tabs-fadeup-conHeight: 120px;\r\n$tabs-fadeup-conPad: 16px;\r\n\r\n\r\n//rate\r\n$rate-star-default-color:$gray-lightest;\r\n$rate-star-active-color:$brand-primary;\r\n$rate-star-marginRight:8px;\r\n//backtop\r\n$back-top-padding:5px;\r\n$backtop-background:unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$backtop-color:unquote(\"rgb(#{$color-white})\") !default;\r\n$backtop-right:10px;\r\n$backtop-bottom:10px;\r\n$backtop-dom-right:40px;\r\n\r\n\r\n//dnd\r\n$dnd-list-background:unquote(\"rgb(#{$palette-grey-400})\")!default;\r\n$dnd-list-padding:8px;\r\n$dnd-list-dragging-background:unquote(\"rgb(#{$palette-light-blue-A200})\")!default;\r\n$dnd-item-color:unquote(\"rgb(#{$color-black})\")!default;\r\n$dnd-item-padding:16px;\r\n$dnd-item-margin:4px;\r\n$dnd-item-background:unquote(\"rgb(#{$palette-grey-500})\")!default;\r\n$dnd-item-dragging-background:unquote(\"rgb(#{$palette-blue-300})\")!default;\r\n\r\n// bee-tree\r\n$tree-checkbox-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$tree-node-bg-color: $hover-bg-color-base !default;\r\n\r\n// bee-table\r\n$table-head-background-color: unquote(\"rgb(#{$table-header-background-color})\") !default;\r\n$table-head-text-color: unquote(\"rgb(#{$table-header-text-color})\") !default;\r\n\r\n// bee-transfer\r\n$transfer-border-gap-color:#d9d9d9;\r\n\r\n// bee-transfer\r\n$cascader-border-gap-color:#ccc;","@import \"../node_modules/tinper-bee-core/scss/minxin-variables\";\r\n@import \"../node_modules/tinper-bee-core/scss/minxin-mixins\";\r\n\r\n\r\n$loading-icon-color: #0084ff;\r\n\r\n/**\r\n * 加载背景\r\n */\r\n//.u-loading-back{\r\n// position:relative;\r\n// text-align: center;\r\n// width:$loading-back-width;\r\n// height:$loading-back-height;\r\n// margin:0 auto;\r\n// &.light{\r\n// background: #fff;\r\n// }\r\n// &.dark{\r\n// background: #000;\r\n// }\r\n//}\r\n/**\r\n * 文字\r\n */\r\n.u-loading-desc {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n font-size: $loading-desc-font-size;\r\n color: #000;\r\n text-align: center;\r\n}\r\n\r\n\r\n/**\r\n * default样式 单个圆圈加载\r\n */\r\n\r\n.u-loading {\r\n &.u-loading-rotate {\r\n & > div {\r\n position: absolute;\r\n border-radius: 100%;\r\n margin: 2px;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n // border: 2px solid #0084ff;\r\n // border-bottom-color: transparent;\r\n width: $loading-rotate-size;\r\n height: $loading-rotate-size;\r\n top: $loading-center-top;\r\n left: $loading-center-left;\r\n margin-left: $loading-rotate-center;\r\n margin-top: $loading-rotate-center;\r\n background: transparent !important;\r\n display: inline-block;\r\n -webkit-animation: rotate 1.5s 0s linear infinite;\r\n animation: rotate 1.5s 0s linear infinite;\r\n text-align: center;\r\n line-height: $loading-rotate-size;\r\n & > .uf{\r\n color: $loading-icon-color;\r\n font-size: 40px;\r\n padding: 0;\r\n }\r\n }\r\n &.u-loading-rotate-lg {\r\n & > div {\r\n margin-left: $loading-rotate-center-lg;\r\n margin-top: $loading-rotate-center-lg;\r\n width: $loading-rotate-lg-size;\r\n height: $loading-rotate-lg-size;\r\n line-height: $loading-rotate-lg-size;\r\n & > .uf{\r\n font-size: 60px;\r\n }\r\n }\r\n }\r\n &.u-loading-rotate-sm {\r\n & > div {\r\n margin-left:$loading-rotate-center-sm;\r\n margin-top: $loading-rotate-center-sm;\r\n width: $loading-rotate-sm-size;\r\n height:$loading-rotate-sm-size;\r\n line-height: $loading-rotate-sm-size;\r\n & > .uf{\r\n font-size: 25px;\r\n }\r\n }\r\n }\r\n &.u-loading-rotate-primary {\r\n & > div > .uf{\r\n color: $loading-loadprimary;\r\n // border: 2px solid $loading-loadprimary;\r\n // border-bottom-color: transparent;\r\n }\r\n }\r\n &.u-loading-rotate-success {\r\n & > div > .uf{\r\n color: $loading-loadsuccess;\r\n // border: 2px solid $loading-loadsuccess;\r\n // border-bottom-color: transparent;\r\n }\r\n }\r\n &.u-loading-rotate-warning {\r\n & > div > .uf{\r\n color: $loading-loadwarn;\r\n // border: 2px solid $loading-loadwarn;\r\n // border-bottom-color: transparent;\r\n }\r\n }\r\n }\r\n\r\n}\r\n\r\n.u-loading-backdrop{\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n z-index: 1900;\r\n opacity: .7;\r\n filter: blur(.5px);\r\n background-color: #fff;\r\n &.full-screen{\r\n position: fixed;\r\n }\r\n}\r\n\r\n@keyframes rotate {\r\n 0% {\r\n -webkit-transform: rotate(0deg) scale(1);\r\n transform: rotate(0deg) scale(1);\r\n }\r\n\r\n 50% {\r\n -webkit-transform: rotate(180deg) scale(1);\r\n transform: rotate(180deg) scale(1);\r\n }\r\n\r\n 100% {\r\n -webkit-transform: rotate(360deg) scale(1);\r\n transform: rotate(360deg) scale(1);\r\n }\r\n}\r\n\r\n.u-loading {\r\n &.u-loading-line {\r\n position: absolute;\r\n top:$loading-center-top;\r\n left: $loading-center-left;\r\n margin-top: $loading-line-center-top;\r\n margin-left: $loading-line-center-left;\r\n & > div {\r\n background-color: #C2C3C5;\r\n width: $loading-line-width;\r\n height: $loading-line-height;\r\n border-radius: 2px;\r\n margin: 2px;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n display: inline-block;\r\n }\r\n &.u-loading-line-lg {\r\n margin-top: $loading-line-center-lg-top;\r\n margin-left: $loading-line-center-lg-left;\r\n & > div {\r\n width: $loading-line-lg-width;\r\n height: $loading-line-lg-height;\r\n }\r\n }\r\n &.u-loading-line-sm {\r\n margin-top: $loading-line-center-sm-top;\r\n margin-left: $loading-line-center-sm-left;\r\n & > div {\r\n width:$loading-line-sm-width;\r\n height: $loading-line-sm-height;\r\n }\r\n }\r\n @each $index, $anima in $loading-lineanimating {\r\n div:nth-child( #{$index} ) {\r\n -webkit-animation: $anima;\r\n animation: $anima;\r\n background-color: map_get($loading-linebackcolor, $index);\r\n }\r\n }\r\n\r\n &.u-loading-line-primary {\r\n & > div {\r\n background-color: $loading-loadprimary;\r\n }\r\n }\r\n &.u-loading-line-success {\r\n & > div {\r\n background-color: $loading-loadsuccess;\r\n }\r\n }\r\n &.u-loading-line-warning {\r\n & > div {\r\n background-color: $loading-loadwarn;\r\n }\r\n }\r\n }\r\n}\r\n@keyframes line-scale {\r\n 0% {\r\n -webkit-transform: scaley(1);\r\n transform: scaley(1);\r\n }\r\n\r\n 50% {\r\n -webkit-transform: scaley(0.4);\r\n transform: scaley(0.4);\r\n }\r\n\r\n 100% {\r\n -webkit-transform: scaley(1);\r\n transform: scaley(1);\r\n\r\n }\r\n}\r\n","@import \"../node_modules/tinper-bee-core/scss/minxin-variables\";\n@import \"../node_modules/tinper-bee-core/scss/minxin-mixins\";\n@import \"../node_modules/bee-loading/src/Loading\";\n\n$text-color: #666;\n$font-size-base: 12px;\n$line-height: 1.5;\n// 主题定制border:\n$table-border-color: unquote(\"rgb(#{$table-border-color-base})\");\n// $table-head-background-color: #f7f7f7;\n// $table-head-text-color: #666;\n$vertical-padding: 12px;\n$horizontal-padding: 8px;\n// $table-border-color: #e9e9e9;\n\n$table-hover-color: #E7F2FC;\n$table-move-in-color: $bg-color-base;\n$checkbox-height:16px;\n.u-table {\n font-size: $font-size-base;\n color: $text-color;\n // transition: opacity 0.3s ease;\n position: relative;\n line-height: $line-height;\n overflow: hidden;\n &-body{\n // overflow: hidden!important;\n position: relative;\n }\n &-hiden-drag{\n position: relative;\n &-li{\n position: absolute;\n top: 0px;\n left: 0px;\n // height: 10px;//这个高度先注释掉了,加上后,在火狐浏览器上会站位置。滚动条拉到最右边有错行\n }\n }\n table {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n }\n\n th {\n // background: $table-head-background-color;\n font-weight: bold;\n text-align: left;\n // transition: background 0.3s ease;\n &[colspan] {\n text-align: center;\n }\n ::last-child{\n overflow: hidden;\n }\n }\n\n td {\n border-bottom: 1px solid $table-border-color;\n a{\n color: #2196F3;\n &:hover{\n color: #1565c0;\n }\n &:active{\n color: #1565c0;\n }\n }\n }\n\n tr {\n // transition: all 0.3s ease;\n &:hover {\n // background: $hover-bg-color-base;\n td {\n .uf-eye{\n visibility: visible !important;\n }\n }\n }\n tr a{\n color: #2196F3;\n &:hover{\n color: #1565c0;\n }\n &:active{\n color: #1565c0;\n }\n }\n }\n tr.tr-row-hover {\n background: $hover-bg-color-base;\n }\n\n th,\n td {\n padding: $vertical-padding $horizontal-padding;\n word-break: break-all;\n }\n tr {\n \n &.filterable{\n th{\n padding-top: 4px;\n padding-bottom: 4px;\n .filterContext{\n height: 35px;\n }\n }\n }\n }\n &-row-hover {\n background:unquote(\"rgb(#{$table-row-hover-bg-color})\");\n }\n \n &-scroll {\n overflow: auto;\n }\n &-bordered {\n table {\n border: 1px solid $table-border-color;\n box-sizing: border-box;\n table-layout: fixed;\n // width:auto;\n }\n th {\n border-bottom: 1px solid $table-border-color;\n box-sizing: border-box;\n }\n th,\n td {\n border-right: 1px solid $table-border-color;\n box-sizing: border-box;\n }\n }\n &-drag-border{\n tr {\n th.th-can-not-drag{ //拖拽tag影响了表格整体宽度\n overflow: hidden;\n }\n }\n }\n &-header {\n overflow: hidden;\n background: $table-head-background-color;\n color: $table-head-text-color;\n }\n\n &.fixed-height td {\n padding: 0px 8px;\n }\n\n &-fixed-header &-body {\n background: #fff;\n position: relative;\n }\n &-fixed-left &-body-inner {\n margin-right: -20px;\n padding-right: 20px;\n }\n\n &-fixed-header &-fixed-left &-body-inner {\n padding-right: 0px;\n }\n\n &-fixed-header &-body-inner {\n height: 100%;\n overflow: scroll;\n }\n\n\n &-fixed-header &-scroll &-header {\n overflow-x: scroll;\n padding-bottom: 20px;\n margin-bottom: -20px;\n overflow-y: scroll;\n box-sizing: border-box;\n }\n\n &-title {\n padding: $vertical-padding $horizontal-padding;\n border-top: 1px solid $table-border-color;\n }\n\n &-content {\n position: relative;\n }\n\n &-footer {\n padding: $vertical-padding $horizontal-padding;\n border-bottom: 1px solid $table-border-color;\n .u-table-scroll{\n overflow-x: hidden;\n }\n }\n &-footer & {\n margin: (-$vertical-padding) (-$horizontal-padding);\n }\n\n &-placeholder {\n padding: $vertical-padding 8px;\n background: #fff;\n border-bottom: 1px solid $table-border-color;\n text-align: center;\n position: relative;\n }\n\n &-expand-icon-col {\n width: 10px;\n }\n &-row,\n &-expanded-row {\n &-expand-icon {\n cursor: pointer;\n display: inline-block;\n margin-right: 0px;\n width: 16px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n border: 1px solid $table-border-color;\n user-select: none;\n background: #fff;\n margin-right: 10px;\n }\n &-spaced {\n visibility: hidden;\n }\n &-spaced:after {\n content: \".\";\n }\n\n &-expanded:after {\n content: \"-\";\n }\n\n &-collapsed:after {\n content: \"+\";\n }\n }\n &-row{\n &.selected{\n background: $hover-bg-color-base;\n }\n }\n tr.u-table-expanded-row {\n background: #f7f7f7;\n &:hover {\n background: #f7f7f7;\n }\n .u-table {\n // padding: 0 40px 0 20px;\n z-index: 1;\n }\n }\n &-column-hidden {\n display: none;\n }\n &-prev-columns-page,\n &-next-columns-page {\n cursor: pointer;\n color: #666;\n z-index: 1;\n &:hover {\n color: #2db7f5;\n }\n &-disabled {\n cursor: not-allowed;\n color: #999;\n &:hover {\n color: #999;\n }\n }\n }\n &-prev-columns-page {\n margin-right: 8px;\n &:before {\n content: \"<\";\n }\n }\n &-next-columns-page {\n float: right;\n &:before {\n content: \">\";\n }\n }\n\n &-fixed-left,\n &-fixed-right {\n position: absolute;\n top: 0;\n overflow: hidden;\n z-index: 1;\n table {\n width: auto;\n background: #fff;\n }\n }\n\n &-fixed-left {\n left: 0;\n box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);\n &-body-inner {\n margin-right: -20px;\n padding-right: 20px;\n }\n &-fixed-header & &-body-inner {\n padding-right: 0;\n }\n }\n\n &-fixed-right {\n right: 0;\n box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1);\n\n // hide expand row content in right fixed Table\n // https://github.com/ant-design/ant-design/issues/1898\n &-expanded-row {\n color: transparent;\n pointer-events: none;\n }\n \n }\n \n &-scroll-position-left &-fixed-left {\n box-shadow: none;\n }\n\n &-scroll-position-right &-fixed-right {\n box-shadow: none;\n }\n\n &-thead{\n .filter-text,.filter-dropdown,.filter-date {\n font-weight: normal;\n }\n .filter-wrap{\n display: flex;\n justify-content: center;\n align-items: center;\n .filter-btns{\n min-width: 58px;\n }\n }\n th{\n background: $table-head-background-color;\n color: $table-head-text-color;\n background-clip:padding-box;\n //禁止选中文字\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none; \n /*\n Introduced in IE 10. \n */\n -ms-user-select: none;\n user-select: none;\n\n // overflow: hidden;\n // white-space: nowrap;\n // text-overflow: ellipsis;\n .bee-table-column-sorter {\n position: relative;\n margin-left: 4px;\n height: 1em;\n vertical-align: middle;\n text-align: center;\n display: inline-block;\n \n & > .bee-table-column-sorter-down,\n & > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat {\n line-height: 6px;\n display: block;\n width: 34px;\n cursor: pointer;\n }\n \n }\n\n .bee-table-column-sorter-down.on .uf-triangle-down,\n .bee-table-column-sorter-down.on .uf-triangle-up,\n .bee-table-column-sorter-up.on .uf-triangle-down,\n .bee-table-column-sorter-up.on .uf-triangle-up {\n color: #108ee9;\n }\n .bee-table-column-sorter .uf-triangle-down,\n .bee-table-column-sorter .uf-triangle-up {\n -webkit-filter: none;\n filter: none;\n font-size: 12px;\n }\n .bee-table-column-sorter .uf-triangle-down,\n .bee-table-column-sorter .uf-triangle-up {\n display: inline-block;\n padding: 0;\n font-size: 12px;\n font-size: 8px\\9;\n -webkit-transform: scale(0.66666667) rotate(0deg);\n -ms-transform: scale(0.66666667) rotate(0deg);\n transform: scale(0.66666667) rotate(0deg);\n -ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)\";\n zoom: 1;\n line-height: 4px;\n height: 4px;\n color: #999;\n // -webkit-transition: all 0.3s;\n // transition: all 0.3s;\n }\n &:hover{\n .bee-table-column-sorter {\n display: inline-block;\n }\n }\n }\n .th-drag{\n cursor: move;\n }\n .th-drag:hover{\n background: $hover-bg-color-base;\n }\n //为了区分是拖拽宽度还是交换列,先注释上面了\n // .th-drag:hover{\n // background:#ccc;\n // }\n .th-drag-hover{ \n background: #ccc;\n }\n &-th{\n position: relative;\n\n &-drag-gap{\n height: 100%;\n position: absolute;\n right: -10px;\n top: 0;\n // background:transparent;\n // width: 1px;\n // background:#ccc;\n width: 20px;\n \n box-sizing: border-box;\n z-index: 1;\n\n .online{\n height: 100%;\n width: 1px;\n background:transparent;//兼容火狐浏览器,如果table设置border,\n margin: 0 auto;\n }\n .online-hover{\n background:#000000;\n }\n \n }\n &-drag-gap:hover{\n cursor: col-resize;\n .online{\n background: #000000\n }\n }\n }\n &-th:last-child {\n &-drag-gap{\n border: none;\n }\n }\n }\n\n\n &-filter-column{\n \n &-pop-cont{\n margin: 10px;\n margin-top: 0px;\n height: 300px;\n overflow-y: scroll;\n }\n &-clear-setting{ \n border-bottom: 1px solid #ccc;\n cursor: pointer;\n }\n &-cont{\n position: relative;\n }\n &-filter-icon{\n position: absolute;\n top: 3px;\n right: 18px;\n width: 22px;\n height: 25px;\n line-height: 25px;\n z-index: 2;\n background: #f7f7f7;\n &i.uf{\n padding: 0px;\n }\n }\n &-pop-cont-item{\n margin-top: 10px;\n line-height: 30px;\n cursor: pointer;\n }\n &-pop-cont-item>span{\n margin-left: 5px;\n width: 100px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n &-pop .u-modal-dialog{\n border: 1px solid #ccc;\n background: #fff;\n }\n }\n //拖拽宽度代码\n &-row-fixed-columns-in-body{\n // visibility: hidden;\n display:none;\n pointer-events: none;\n }\n //固定列含有checkbox 样式复写\n .u-checkbox {\n height: $checkbox-height;\n line-height: $checkbox-height;\n margin:0px;\n }\n}\n.u-table:focus{\n outline: none;\n // border-color: #9ecaed;\n // box-shadow: 0 0 10px #9ecaed;\n box-shadow: 0 0 0;\n}\n\n .u-table-bordered {\n .u-table-drag-gap{\n background:#e9e9e9;\n }\n }\n.u-table.bordered {\n table {\n border-collapse: collapse;\n }\n th,\n td {\n border: 1px solid $table-border-color;\n }\n}\n\n.move-enter,\n.move-appear {\n opacity: 0;\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-duration: 2.5s;\n animation-fill-mode: both;\n animation-play-state: paused;\n}\n\n.move-leave {\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-duration: 0.5s;\n animation-fill-mode: both;\n animation-play-state: paused;\n}\n\n.move-enter.move-enter-active,\n.move-appear.move-enter-active {\n animation-name: moveLeftIn;\n animation-play-state: running;\n}\n\n.move-leave.move-leave-active {\n animation-name: moveRightOut;\n animation-play-state: running;\n}\n\n@keyframes moveLeftIn {\n 0% {\n transform-origin: 0 0;\n transform: translateX(30px);\n opacity: 0;\n background: $table-move-in-color;\n }\n 20% {\n transform-origin: 0 0;\n transform: translateX(0);\n opacity: 1;\n }\n 80% {\n background: $table-move-in-color;\n }\n 100% {\n background: transparent;\n opacity: 1;\n }\n}\n\n@keyframes moveRightOut {\n 0% {\n transform-origin: 0 0;\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform-origin: 0 0;\n transform: translateX(-30px);\n opacity: 0;\n }\n}\n\n.formItem-style {\n height: unset;\n min-height: unset;\n padding: 0;\n}\n.errMessage-style {\n display: none;\n border: none;\n /* margin-top: 5px; */\n /* margin-bottom: 5px; */\n background: transparent;\n color: #f22c1d;\n /* padding-left: 12px; */\n /* padding-right: 12px; */\n margin: 0;\n position: absolute;\n padding: 0;\n top: 3px;\n right: 0;\n}\n\n.editable-cell {\n position: relative;\n}\n\n.editable-cell-input-wrapper,\n.editable-cell-text-wrapper {\n padding-right: 24px;\n}\n.editable-cell-input-wrapper {\n .u-form-item.formItem-style .u-label{\n display: none;\n }\n .u-input-group .u-form-control{\n height: 26px;\n font-size: 12px;\n }\n}\n\n.editable-cell-text-wrapper {\n padding: 5px 24px 5px 5px;\n height: 30px;\n}\n\n.editable-cell-icon,\n.editable-cell-icon-check {\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n cursor: pointer;\n}\n\n.editable-cell-icon {\n line-height: 28px;\n display: none;\n}\n\n.editable-cell-icon-check {\n line-height: 28px;\n}\n\n.editable-cell:hover .editable-cell-icon {\n display: inline-block;\n}\n\n.editable-cell-icon:hover,\n.editable-cell-icon-check:hover {\n color: #2db7f5;\n}\n\n.editable-add-btn {\n margin-bottom: 8px;\n}\n\n.search-component {\n margin-bottom: 20px;\n .empty-search {\n position: absolute;\n right: 45px;\n z-index: 20;\n top: 5px;\n color: #524e4e;\n cursor: pointer;\n }\n &.u-input-group.simple {\n float: right;\n }\n &.u-input-group.simple .u-form-control {\n width: 251px;\n background: #f5f5f5;\n border-color: #f5f5f5;\n border-radius: 20px;\n }\n &.u-input-group.simple .u-input-group-btn {\n top: 3px;\n right: 20px;\n position: absolute;\n }\n}\n\n\n.col-resize-container {\n height: 0px;\n position: relative;\n\n & + .table-col-resizer:first-of-type {\n table-layout: fixed;\n }\n\n .active-drag .icon{\n visibility: visible;\n }\n\n .last-handle {\n display: none;\n }\n\n .drag-handle {\n margin-left: -5px;\n position: absolute;\n z-index: 5;\n width: 10px;\n cursor: col-resize;\n\n .icon {\n color: #40b0dc;\n top: -1px;\n position: absolute;\n visibility: hidden;\n\n &:first-child {\n left: -2px\n }\n &:last-child {\n left: 6px\n }\n }\n\n &:hover{\n .icon{\n visibility: visible;\n }\n .col-resizer {\n border: 1px solid;\n }\n }\n\n &.disabled-drag {\n cursor: default;\n display: none;\n }\n\n .col-resizer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0px;\n left: 3px;\n }\n }\n}\n\n.u-filter-dropdown-menu-wrap {\n z-index: 1800;\n .u-dropdown-menu {\n li.u-dropdown-menu-item {\n line-height: 32px;\n height: 32px;\n padding: 0px 16px 0 16px;\n cursor: pointer;\n }\n }\n}\n\n.u-row-hover{\n position: absolute;\n right: 24px;\n display: none;\n align-items: center;\n justify-content: center;\n background: transparent;\n}\n\n.u-row-hover2{\n position: absolute;\n left: 100;\n}\n\n// 滚动条样式复写\n::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n::-webkit-scrollbar-button {\n display: none;\n}\n::-webkit-scrollbar-thumb {\n background: #d5d5d5 !important;\n border-radius: 5px;\n}\n::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: #d5d5d5;\n position: absolute;\n}\n\n::-webkit-scrollbar-track {\n display: none;\n}\n\n::-webkit-scrollbar-track-piece {\n display: none;\n}","// @import \"../node_modules/tinper-bee-core/scss/index.scss\";\n// @import \"../node_modules/bee-panel/src/Panel.scss\";\n// @import \"../node_modules/bee-layout/src/Layout.scss\";\n// @import \"../node_modules/bee-button/src/Button.scss\";\n// @import \"../node_modules/bee-transition/src/Transition.scss\";\n// @import \"../node_modules/bee-popconfirm/src/Popconfirm.scss\";\n// @import \"../node_modules/bee-form-control/src/FormControl.scss\";\n// @import \"../node_modules/bee-pagination/src/Pagination.scss\";\n// @import \"../node_modules/bee-checkbox/src/Checkbox.scss\";\n// @import \"../node_modules/bee-select/src/Select.scss\";\n// @import \"../node_modules/bee-form/src/Form.scss\";\n// @import \"../node_modules/bee-popover/src/Popover.scss\";\n// @import \"../node_modules/bee-tooltip/src/Tooltip.scss\";\n// @import \"../node_modules/bee-message/build/Message.css\";\n// @import \"../node_modules/bee-dropdown/build/Dropdown.css\";\n// @import \"../node_modules/bee-input-number/build/InputNumber.css\";\n// @import \"../node_modules/bee-modal/build/Modal.css\";\n@import \"../src/Table.scss\";\n\n\n//引入日期控件样式文件\n// @import \"../node_modules/bee-datepicker/src/datepicker.scss\";\n\n.selected{\n background: rgb(227,242,253);\n}\n\n.demo25{\n height: 100%;\n\n .u-table-filter-column-filter-icon{\n right: 15px;\n }\n\n}\n","th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n",".demo3{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}",".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}",".opt-btns{\n .u-button{\n background-color: #505F79;\n border-color: #505F79;\n color: #fff;\n &:hover, &:active{\n background-color: #344563;\n border-color: #344563;\n }\n }\n}"],"sourceRoot":"/source/"}
\ No newline at end of file
+{"version":3,"sources":["demo.css","../node_modules/tinper-bee-core/scss/minxin-variables.scss","../node_modules/bee-loading/src/Loading.scss","../src/Table.scss","TableDemo.scss","demolist/Demo12.scss","demolist/Demo18.scss","demolist/Demo24.scss","demolist/Demo31.scss"],"names":[],"mappings":"AAAA,iBAAiB;ACsXjB,eAAe;AAWf,iBAAiB;AAXjB,eAAe;AAWf,iBAAiB;AC3XjB;;IAEI;AAcJ;;IAEI;AACJ;EACE,mBAAmB;EACnB,UAAU;EACV,QAAQ;EACR,SAAS;EACT,gBD+wC2B;EC9wC3B,YAAY;EACZ,mBAAmB,EACpB;;AAGD;;IAEI;AAEJ;EAGM,mBAAmB;EACnB,oBAAoB;EACpB,YAAY;EAEZ,0BAA0B;EAG1B,YDiwCmB;EChwCnB,aDgwCmB;EC/vCnB,SD0wCiB;ECzwCjB,UD0wCkB;ECzwClB,mBD4wCsB;EC3wCtB,kBD2wCsB;EC1wCtB,mCAAmC;EACnC,sBAAsB;EAEtB,0CAA0C;EAC1C,mBAAmB;EACnB,kBDsvCmB,EChvCpB;EA3BL;IAuBQ,eA3DoB;IA4DpB,gBAAgB;IAChB,WAAW,EACZ;;AA1BP;EA8BQ,mBD6vCuB;EC5vCvB,kBD4vCuB;EC3vCvB,YD4uCoB;EC3uCpB,aD2uCoB;EC1uCpB,kBD0uCoB,ECtuCrB;EAtCP;IAoCU,gBAAgB,EACjB;;AArCT;EA0CQ,mBD+uCwB;EC9uCxB,kBD8uCwB;EC7uCxB,YD8tCqB;EC7tCrB,aD6tCqB;EC5tCrB,kBD4tCqB,ECxtCtB;EAlDP;IAgDU,gBAAgB,EACjB;;AAjDT;EAsDQ,eD4rCiB,ECzrClB;;AAzDP;EA6DQ,eDsrCqB,ECnrCtB;;AAhEP;EAoEQ,eDgrCc,EC7qCf;;AAMP;EACE,mBAAmB;EACnB,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,cAAc;EACd,YAAY;EACZ,oBAAY;EACZ,uBAAuB,EAIxB;EAbD;IAWI,gBAAgB,EACjB;;AAGH;EACE;IAEE,iCAA6B,EAAA;EAG/B;IAEE,mCAA+B,EAAA;EAGjC;IAEE,mCAA+B,EAAA,EAAA;;AAInC;EAEI,mBAAmB;EACnB,SDsqCmB;ECrqCnB,UDsqCoB;ECrqCpB,kBD6qC0B;EC5qC1B,mBD6qC2B,EC3nC5B;EAxDH;IAQM,0BAA0B;IAC1B,WD0pCiB;ICzpCjB,aD0pCmB;ICzpCnB,mBAAmB;IACnB,YAAY;IAEZ,0BAA0B;IAC1B,sBAAsB,EACvB;EAhBL;IAkBM,kBDkqC2B;ICjqC3B,mBDkqC4B,EC7pC7B;IAxBL;MAqBQ,WDgpCkB;MC/oClB,aDgpCoB,EC/oCrB;EAvBP;IA0BM,kBDspC4B;ICrpC5B,mBDspC4B,ECjpC7B;IAhCL;MA6BQ,WDooCmB;MCnoCnB,aDooCoB,ECnoCrB;EA/BP;IAoCQ,2EDqmC0C;ICpmC1C,0BD2mCU,EC1mCX;EAtCP;IAoCQ,2EDsmC0C;ICrmC1C,0BD4mCU,EC3mCX;EAtCP;IAoCQ,2EDumC0C;ICtmC1C,0BD6mCU,EC5mCX;EAtCP;IAoCQ,2EDwmC0C;ICvmC1C,0BD8mCU,EC7mCX;EAtCP;IAoCQ,2EDymC0C;ICxmC1C,0BD+mCU,EC9mCX;EAtCP;IA2CQ,0BD0lCiB,ECzlClB;EA5CP;IAgDQ,0BDslCqB,ECrlCtB;EAjDP;IAqDQ,0BDklCc,ECjlCf;;AAIP;EACE;IAEE,qBAAiB,EAAA;EAGnB;IAEE,uBAAiB,EAAA;EAGnB;IAEE,qBAAiB,EAAA,EAAA;;AC1MrB;EACE,gBAdmB;EAenB,YAhBe;EAkBf,mBAAmB;EACnB,iBAjBe;EAkBf,iBAAiB,EA8flB;EApgBD;IASI,mBAAmB,EACpB;EAVH;IAYI,mBAAmB,EAOpB;IAnBH;MAcM,mBAAmB;MACnB,SAAS;MACT,UAAU,EAEX;EAlBL;IAqBI,YAAY;IACZ,0BAA0B;IAC1B,iBAAiB,EAClB;EAxBH;IA4BI,kBAAkB;IAClB,iBAAiB,EAQlB;IArCH;MAgCM,mBAAmB,EACpB;IAjCL;MAmCM,iBAAiB,EAClB;EApCL;IAwCI,4CAlDwB,EA4DzB;IAlDH;MA0CM,eAAe,EAOhB;MAjDL;QA4CQ,eAAe,EAChB;MA7CP;QA+CQ,eAAe,EAChB;EAhDP;IA0DU,+BAA+B,EAChC;EA3DT;IA+DM,eAAe,EAOhB;IAtEL;MAiEQ,eAAe,EAChB;IAlEP;MAoEQ,eAAe,EAChB;EArEP;IAyEI,+BFyHyB,EExH1B;EA1EH;;IA8EI,kBApFoB;IAqFpB,sBAAsB,EACvB;EAhFH;IAqFQ,iBAAiB;IACjB,oBAAoB,EAIrB;IA1FP;MAwFU,aAAa,EACd;EAzFT;IA8FI,+BAAkB,EACnB;EA/FH;IAkGI,eAAe,EAChB;EAnGH;IAsGM,qCAhHsB;IAiHtB,uBAAuB;IACvB,oBAAoB,EAErB;EA1GL;IA4GM,4CAtHsB;IAuHtB,uBAAuB,EACxB;EA9GL;;IAiHM,2CA3HsB;IA4HtB,uBAAuB,EACxB;EAnHL;IAwHQ,iBAAiB,EAClB;EAzHP;IA6HI,iBAAiB;IACjB,+BFu0CiC;IEt0CjC,0BFu0C2B,EEt0C5B;EAhIH;IAmII,iBAAiB,EAClB;EApIH;IAuII,iBAAiB;IACjB,mBAAmB,EACpB;EAzIH;IA2II,oBAAoB;IACpB,oBAAoB,EACrB;EA7IH;IAgJI,mBAAmB,EACpB;EAjJH;IAoJI,aAAa;IACb,iBAAiB,EAClB;EAtJH;IA0JI,mBAAmB;IACnB,qBAAqB;IACrB,qBAAqB;IACrB,mBAAmB;IACnB,uBAAuB,EACxB;EA/JH;IAkKI,kBAxKoB;IAyKpB,yCA7KwB,EA8KzB;EApKH;IAuKI,mBAAmB,EACpB;EAxKH;IA2KI,kBAjLoB;IAkLpB,4CAtLwB,EA0LzB;IAhLH;MA8KM,mBAAmB,EACpB;EA/KL;IAkLI,mBAxLoB,EAyLrB;EAnLH;IAsLI,kBAA8B;IAC9B,iBAAiB;IACjB,4CAlMwB;IAmMxB,mBAAmB;IACnB,mBAAmB,EACpB;EA3LH;IA8LI,YAAY,EACb;EA/LH;IAmMM,gBAAgB;IAChB,sBAAsB;IACtB,kBAAkB;IAClB,YAAY;IACZ,aAAa;IACb,mBAAmB;IACnB,kBAAkB;IAClB,qCApNsB;IAqNtB,0BAAkB;IAAlB,uBAAkB;IAAlB,sBAAkB;IAAlB,kBAAkB;IAClB,iBAAiB;IACjB,mBAAmB,EACpB;EA9ML;IAgNM,mBAAmB,EACpB;EAjNL;IAmNM,aAAa,EACd;EApNL;IAuNM,aAAa,EACd;EAxNL;IA2NM,aAAa,EACd;EA5NL;IAgOM,+BF9BuB,EE+BxB;EAjOL;IAoOI,oBAAoB,EAQrB;IA5OH;MAsOM,oBAAoB,EACrB;IAvOL;MA0OM,WAAW,EACZ;EA3OL;IA8OI,cAAc,EACf;EA/OH;IAkPI,gBAAgB;IAChB,YAAY;IACZ,WAAW,EAWZ;IA/PH;MAsPM,eAAe,EAChB;IAvPL;MAyPM,oBAAoB;MACpB,YAAY,EAIb;MA9PL;QA4PQ,YAAY,EACb;EA7PP;IAiQI,kBAAkB,EAInB;IArQH;MAmQM,aAAa,EACd;EApQL;IAuQI,aAAa,EAId;IA3QH;MAyQM,aAAa,EACd;EA1QL;IA+QI,mBAAmB;IACnB,OAAO;IACP,iBAAiB;IACjB,WAAW,EAKZ;IAvRH;MAoRM,YAAY;MACZ,iBAAiB,EAClB;EAtRL;IA0RI,QAAQ;IACR,+CAA0B,EAQ3B;IAnSH;MA6RM,oBAAoB;MACpB,oBAAoB,EACrB;IA/RL;MAiSM,iBAAiB,EAClB;EAlSL;IAsSI,SAAS;IACT,gDAA2B,EAS5B;IAhTH;MA4SM,mBAAmB;MACnB,qBAAqB,EACtB;EA9SL;IAmTI,iBAAiB,EAClB;EApTH;IAuTI,iBAAiB,EAClB;EAxTH;IA4TM,oBAAoB,EACrB;EA7TL;IA+TM,qBAAc;IAAd,cAAc;IACd,sBAAwB;IAAxB,wBAAwB;IACxB,uBAAoB;IAApB,oBAAoB,EAIrB;IArUL;MAmUQ,gBAAgB,EACjB;EApUP;IAuUM,+BF8nC+B;IE7nC/B,0BF8nCyB;IE7nCzB,6BAA4B;IAE5B,4BAA4B;IAE5B,0BAA0B;IAC1B;;QAEE;IACA,sBAAsB;IACtB,kBAAkB,EAyDrB;IA3YL;MAwVQ,mBAAmB;MACnB,iBAAiB;MACjB,YAAY;MACZ,uBAAuB;MACvB,mBAAmB;MACnB,sBAAsB,EAUvB;MAvWP;;QAiWU,iBAAiB;QACjB,eAAe;QACf,YAAY;QACZ,gBAAgB,EACjB;IArWT;;;;MA6WQ,eAAe,EAChB;IA9WP;;MAkXQ,aAAa;MACb,gBAAgB,EACjB;IApXP;;MAuXQ,sBAAsB;MACtB,WAAW;MACX,gBAAgB;MAChB,iBAAiB;MAGjB,uCAAmC;MACnC,+GAA+G;MAC/G,QAAQ;MACR,iBAAiB;MACjB,YAAY;MACZ,YAAY,EAGb;IArYP;MAwYY,sBAAsB,EACzB;EAzYT;IA6YM,aAAa,EACd;EA9YL;IAgZM,+BF9MuB,EE+MxB;EAjZL;IAuZM,iBAAiB,EAClB;EAxZL;IA0ZM,mBAAmB,EAgCpB;IA1bL;MA6ZQ,aAAa;MACb,mBAAmB;MACnB,aAAa;MACb,OAAO;MAIP,YAAY;MAEZ,uBAAuB;MACvB,WAAW,EAYZ;MAnbP;QA0aU,aAAa;QACb,WAAW;QACX,wBAAuB;QACvB,eAAe,EAChB;MA9aT;QAgbU,oBAAmB,EACpB;IAjbT;MAqbQ,mBAAmB,EAIpB;MAzbP;QAubU,oBACD,EAAC;EAxbV;IA6bQ,aAAa,EACd;EA9bP;IAscM,YAAY;IACZ,kBAAkB;IAClB,mBAAmB,EACpB;EAzcL;IA6cM,mBAAmB,EACpB;EA9cL;IAgdM,mBAAmB,EACpB;EAjdL;IAmdM,mBAAmB;IACnB,SAAS;IACT,YAAY;IACZ,YAAY;IACZ,aAAa;IACb,kBAAkB;IAClB,WAAW;IACX,+BF2+B+B;IE1+B/B,mBAAmB;IACnB,gBAAgB,EAIjB;IAheL;MA8dQ,aAAa,EACd;EA/dP;IAkeM,gBAAgB;IAEhB,gBAAgB,EAKjB;IAzeL;MAseQ,YAAY,EAEb;EAxeP;IA2eM,kBAAkB;IAClB,aAAa;IACb,iBAAiB;IACjB,wBAAwB;IACxB,oBAAoB;IACpB,sBAAsB;IACtB,uBAAuB,EACxB;EAlfL;IAofM,uBAAuB;IACvB,iBAAiB,EAClB;EAtfL;IA2fI,cAAa;IACb,qBAAqB,EACtB;EA7fH;IAggBI,aAjgBiB;IAkgBjB,kBAlgBiB;IAmgBjB,YAAW,EACZ;;AAEH;EACE,cAAc;EAGd,kBAAkB,EACnB;;AAEC;EAEI,oBAAmB,EACpB;;AAEL;EAEI,0BAA0B,EAC3B;;AAHH;;EAMI,qCAjiBwB,EAkiBzB;;AAGH;;EAEE,WAAW;EACX,+DAAuC;EACvC,yBAAyB;EACzB,0BAA0B;EAC1B,6BAA6B,EAC9B;;AAED;EACE,kEAAuC;EACvC,yBAAyB;EACzB,0BAA0B;EAC1B,6BAA6B,EAC9B;;AAED;;EAEE,2BAA2B;EAC3B,8BAA8B,EAC/B;;AAED;EACE,6BAA6B;EAC7B,8BAA8B,EAC/B;;AAED;EACE;IACE,sBAAsB;IACtB,4BAAqB;IACrB,WAAW;IACX,6BF/gBkB,EAAA;EEihBpB;IACE,sBAAsB;IACtB,yBAAqB;IACrB,WAAW,EAAA;EAEb;IACE,6BFvhBkB,EAAA;EEyhBpB;IACE,wBAAwB;IACxB,WAAW,EAAA,EAAA;;AAIf;EACE;IACE,sBAAsB;IACtB,yBAAqB;IACrB,WAAW,EAAA;EAEb;IACE,sBAAsB;IACtB,6BAAqB;IACrB,WAAW,EAAA,EAAA;;AAIf;EACE,cAAc;EACd,kBAAkB;EAClB,WAAW,EACZ;;AACD;EACE,cAAc;EACd,aAAa;EACb,sBAAsB;EACtB,yBAAyB;EACzB,wBAAwB;EACxB,eAAe;EACf,yBAAyB;EACzB,0BAA0B;EAC1B,UAAU;EACV,mBAAmB;EACnB,WAAW;EACX,SAAS;EACT,SAAS,EACV;;AAED;EACE,mBAAmB,EACpB;;AAED;;EAEE,oBAAoB,EACrB;;AACD;EAEI,cAAc,EACf;;AAHH;EAKI,aAAa;EACb,gBAAgB,EACjB;;AAGH;EACE,0BAA0B;EAC1B,aAAa,EACd;;AAED;;EAEE,mBAAmB;EACnB,OAAO;EACP,SAAS;EACT,YAAY;EACZ,gBAAgB,EACjB;;AAED;EACE,kBAAkB;EAClB,cAAc,EACf;;AAED;EACE,kBAAkB,EACnB;;AAED;EACE,sBAAsB,EACvB;;AAED;;EAEE,eAAe,EAChB;;AAED;EACE,mBAAmB,EACpB;;AAED;EACE,oBAAoB,EAuBrB;EAxBD;IAGI,mBAAmB;IACnB,YAAY;IACZ,YAAY;IACZ,SAAS;IACT,eAAe;IACf,gBAAgB,EACjB;EATH;IAWI,aAAa,EACd;EAZH;IAcI,aAAa;IACb,oBAAoB;IACpB,sBAAsB;IACtB,oBAAoB,EACrB;EAlBH;IAoBI,SAAS;IACT,YAAY;IACZ,mBAAmB,EACpB;;AAIH;EACE,YAAY;EACZ,mBAAmB,EAyDpB;EA3DD;IAKI,oBAAoB,EACrB;EANH;IASI,oBAAoB,EACrB;EAVH;IAaI,cAAc,EACf;EAdH;IAiBI,kBAAkB;IAClB,mBAAmB;IACnB,WAAW;IACX,YAAY;IACZ,mBAAmB,EAqCpB;IA1DH;MAwBM,eAAe;MACf,UAAU;MACV,mBAAmB;MACnB,mBAAmB,EAQpB;MAnCL;QA8BQ,WACD,EAAC;MA/BR;QAiCQ,UACD,EAAC;IAlCR;MAuCQ,oBAAoB,EACrB;IAxCP;MA0CQ,kBAAkB,EACnB;IA3CP;MA+CM,gBAAgB;MAChB,cAAc,EACf;IAjDL;MAoDM,mBAAmB;MACnB,WAAW;MACX,aAAa;MACb,SAAS;MACT,UAAU,EACX;;AAIL;EACI,cAAc,EASjB;EAVD;IAIY,kBAAkB;IAClB,aAAa;IACb,yBAAyB;IACzB,gBAAgB,EACnB;;AAIT;EACE,mBAAmB;EACnB,YAAY;EACZ,cAAc;EACd,uBAAoB;EAApB,oBAAoB;EACpB,sBAAwB;EAAxB,wBAAwB;EACxB,wBAAwB,EACzB;;AAED;EACE,mBAAmB;EACnB,UAAU,EACX;;AAGD;EACE,WAAW;EACX,YAAY,EACb;;AACD;EACE,cAAc,EACf;;AACD;EACE,+BAA+B;EAC/B,mBAAmB,EACpB;;AACD;EACE,mBAAmB;EACnB,0BAA0B;EAC1B,mBAAmB,EACpB;;AAED;EACE,cAAc,EACf;;AAED;EACE,cAAc,EACf;;ACxyBD;EACE,oBAAe,EAChB;;AAED;EACE,aAAa,EAMd;EAPD;IAII,YAAY,EACb;;AChCH;EAGY,gBAAgB;EAChB,mBAAmB;EACnB,kBAAkB,EACrB;;AANT;EAYgB,oBAAoB,EAC3B;;ACbT;EAEQ,iBAAiB;EACjB,oBAAoB,EACvB;;ACJL;EAEQ,oBAAoB,EACvB;;AAHL;EAKQ,qBAAc;EAAd,cAAc;EACd,uBAAoB;EAApB,oBAAoB;EACpB,sBAAwB;EAAxB,wBAAwB,EAC3B;;;ACRL;EAEQ,0BAA0B;EAC1B,sBAAsB;EACtB,YAAY,EAKf;EATL;IAMY,0BAA0B;IAC1B,sBAAsB,EACzB","file":"demo.css","sourcesContent":["@charset \"UTF-8\";\n/* FormGroup */\n/* Navlayout */\n/* FormGroup */\n/* Navlayout */\n/**\r\n * 加载背景\r\n */\n/**\r\n * 文字\r\n */\n.u-loading-desc {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n font-size: 16px;\n color: #000;\n text-align: center; }\n\n/**\r\n * default样式 单个圆圈加载\r\n */\n.u-loading.u-loading-rotate > div {\n position: absolute;\n border-radius: 100%;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n width: 40px;\n height: 40px;\n top: 50%;\n left: 50%;\n margin-left: -22px;\n margin-top: -22px;\n background: transparent !important;\n display: inline-block;\n -webkit-animation: rotate 1.5s 0s linear infinite;\n animation: rotate 1.5s 0s linear infinite;\n text-align: center;\n line-height: 40px; }\n .u-loading.u-loading-rotate > div > .uf {\n color: #0084ff;\n font-size: 40px;\n padding: 0; }\n\n.u-loading.u-loading-rotate.u-loading-rotate-lg > div {\n margin-left: -35px;\n margin-top: -35px;\n width: 60px;\n height: 60px;\n line-height: 60px; }\n .u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {\n font-size: 60px; }\n\n.u-loading.u-loading-rotate.u-loading-rotate-sm > div {\n margin-left: -15px;\n margin-top: -15px;\n width: 25px;\n height: 25px;\n line-height: 25px; }\n .u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {\n font-size: 25px; }\n\n.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {\n color: #3f51b5; }\n\n.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {\n color: #4caf50; }\n\n.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {\n color: #ff9800; }\n\n.u-loading-backdrop {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1900;\n opacity: .7;\n filter: blur(0.5px);\n background-color: #fff; }\n .u-loading-backdrop.full-screen {\n position: fixed; }\n\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate(0deg) scale(1);\n transform: rotate(0deg) scale(1); }\n 50% {\n -webkit-transform: rotate(180deg) scale(1);\n transform: rotate(180deg) scale(1); }\n 100% {\n -webkit-transform: rotate(360deg) scale(1);\n transform: rotate(360deg) scale(1); } }\n\n.u-loading.u-loading-line {\n position: absolute;\n top: 50%;\n left: 50%;\n margin-top: -30px;\n margin-left: -25px; }\n .u-loading.u-loading-line > div {\n background-color: #C2C3C5;\n width: 6px;\n height: 50px;\n border-radius: 2px;\n margin: 2px;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n display: inline-block; }\n .u-loading.u-loading-line.u-loading-line-lg {\n margin-top: -50px;\n margin-left: -30px; }\n .u-loading.u-loading-line.u-loading-line-lg > div {\n width: 8px;\n height: 90px; }\n .u-loading.u-loading-line.u-loading-line-sm {\n margin-top: -22px;\n margin-left: -20px; }\n .u-loading.u-loading-line.u-loading-line-sm > div {\n width: 4px;\n height: 35px; }\n .u-loading.u-loading-line div:nth-child(1) {\n -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n background-color: #F44336; }\n .u-loading.u-loading-line div:nth-child(2) {\n -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n background-color: #7ED321; }\n .u-loading.u-loading-line div:nth-child(3) {\n -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n background-color: #0084FF; }\n .u-loading.u-loading-line div:nth-child(4) {\n -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n background-color: #FF9800; }\n .u-loading.u-loading-line div:nth-child(5) {\n -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n background-color: #D0021B; }\n .u-loading.u-loading-line.u-loading-line-primary > div {\n background-color: #3f51b5; }\n .u-loading.u-loading-line.u-loading-line-success > div {\n background-color: #4caf50; }\n .u-loading.u-loading-line.u-loading-line-warning > div {\n background-color: #ff9800; }\n\n@keyframes line-scale {\n 0% {\n -webkit-transform: scaley(1);\n transform: scaley(1); }\n 50% {\n -webkit-transform: scaley(0.4);\n transform: scaley(0.4); }\n 100% {\n -webkit-transform: scaley(1);\n transform: scaley(1); } }\n\n.u-table {\n font-size: 12px;\n color: #666;\n position: relative;\n line-height: 1.5;\n overflow: hidden; }\n .u-table-body {\n position: relative; }\n .u-table-hiden-drag {\n position: relative; }\n .u-table-hiden-drag-li {\n position: absolute;\n top: 0px;\n left: 0px; }\n .u-table table {\n width: 100%;\n border-collapse: collapse;\n text-align: left; }\n .u-table th {\n font-weight: bold;\n text-align: left; }\n .u-table th[colspan] {\n text-align: center; }\n .u-table th ::last-child {\n overflow: hidden; }\n .u-table td {\n border-bottom: 1px solid rgb(193, 199, 208); }\n .u-table td a {\n color: #2196F3; }\n .u-table td a:hover {\n color: #1565c0; }\n .u-table td a:active {\n color: #1565c0; }\n .u-table tr:hover td .uf-eye {\n visibility: visible !important; }\n .u-table tr tr a {\n color: #2196F3; }\n .u-table tr tr a:hover {\n color: #1565c0; }\n .u-table tr tr a:active {\n color: #1565c0; }\n .u-table tr.tr-row-hover {\n background: rgb(235, 236, 240); }\n .u-table th,\n .u-table td {\n padding: 12px 8px;\n word-break: break-all; }\n .u-table tr.filterable th {\n padding-top: 4px;\n padding-bottom: 4px; }\n .u-table tr.filterable th .filterContext {\n height: 35px; }\n .u-table-row-hover {\n background: rgb(235, 236, 240); }\n .u-table-scroll {\n overflow: auto; }\n .u-table-bordered table {\n border: 1px solid rgb(193, 199, 208);\n box-sizing: border-box;\n table-layout: fixed; }\n .u-table-bordered th {\n border-bottom: 1px solid rgb(193, 199, 208);\n box-sizing: border-box; }\n .u-table-bordered th,\n .u-table-bordered td {\n border-right: 1px solid rgb(193, 199, 208);\n box-sizing: border-box; }\n .u-table-drag-border tr th.th-can-not-drag {\n overflow: hidden; }\n .u-table-header {\n overflow: hidden;\n background: rgb(223, 225, 230);\n color: rgb(102, 102, 102); }\n .u-table.fixed-height td {\n padding: 0px 8px; }\n .u-table-fixed-header .u-table-body {\n background: #fff;\n position: relative; }\n .u-table-fixed-left .u-table-body-inner {\n margin-right: -20px;\n padding-right: 20px; }\n .u-table-fixed-header .u-table-fixed-left .u-table-body-inner {\n padding-right: 0px; }\n .u-table-fixed-header .u-table-body-inner {\n height: 100%;\n overflow: scroll; }\n .u-table-fixed-header .u-table-scroll .u-table-header {\n overflow-x: scroll;\n padding-bottom: 20px;\n margin-bottom: -20px;\n overflow-y: scroll;\n box-sizing: border-box; }\n .u-table-title {\n padding: 12px 8px;\n border-top: 1px solid rgb(193, 199, 208); }\n .u-table-content {\n position: relative; }\n .u-table-footer {\n padding: 12px 8px;\n border-bottom: 1px solid rgb(193, 199, 208); }\n .u-table-footer .u-table-scroll {\n overflow-x: hidden; }\n .u-table-footer .u-table {\n margin: -12px -8px; }\n .u-table-placeholder {\n padding: 12px 8px;\n background: #fff;\n border-bottom: 1px solid rgb(193, 199, 208);\n text-align: center;\n position: relative; }\n .u-table-expand-icon-col {\n width: 10px; }\n .u-table-row-expand-icon, .u-table-expanded-row-expand-icon {\n cursor: pointer;\n display: inline-block;\n margin-right: 0px;\n width: 16px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n border: 1px solid rgb(193, 199, 208);\n user-select: none;\n background: #fff;\n margin-right: 10px; }\n .u-table-row-spaced, .u-table-expanded-row-spaced {\n visibility: hidden; }\n .u-table-row-spaced:after, .u-table-expanded-row-spaced:after {\n content: \".\"; }\n .u-table-row-expanded:after, .u-table-expanded-row-expanded:after {\n content: \"-\"; }\n .u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {\n content: \"+\"; }\n .u-table-row.selected {\n background: rgb(235, 236, 240); }\n .u-table tr.u-table-expanded-row {\n background: #f7f7f7; }\n .u-table tr.u-table-expanded-row:hover {\n background: #f7f7f7; }\n .u-table tr.u-table-expanded-row .u-table {\n z-index: 1; }\n .u-table-column-hidden {\n display: none; }\n .u-table-prev-columns-page, .u-table-next-columns-page {\n cursor: pointer;\n color: #666;\n z-index: 1; }\n .u-table-prev-columns-page:hover, .u-table-next-columns-page:hover {\n color: #2db7f5; }\n .u-table-prev-columns-page-disabled, .u-table-next-columns-page-disabled {\n cursor: not-allowed;\n color: #999; }\n .u-table-prev-columns-page-disabled:hover, .u-table-next-columns-page-disabled:hover {\n color: #999; }\n .u-table-prev-columns-page {\n margin-right: 8px; }\n .u-table-prev-columns-page:before {\n content: \"<\"; }\n .u-table-next-columns-page {\n float: right; }\n .u-table-next-columns-page:before {\n content: \">\"; }\n .u-table-fixed-left, .u-table-fixed-right {\n position: absolute;\n top: 0;\n overflow: hidden;\n z-index: 1; }\n .u-table-fixed-left table, .u-table-fixed-right table {\n width: auto;\n background: #fff; }\n .u-table-fixed-left {\n left: 0;\n box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1); }\n .u-table-fixed-left-body-inner {\n margin-right: -20px;\n padding-right: 20px; }\n .u-table-fixed-left-fixed-header .u-table-fixed-left .u-table-fixed-left-body-inner {\n padding-right: 0; }\n .u-table-fixed-right {\n right: 0;\n box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1); }\n .u-table-fixed-right-expanded-row {\n color: transparent;\n pointer-events: none; }\n .u-table-scroll-position-left .u-table-fixed-left {\n box-shadow: none; }\n .u-table-scroll-position-right .u-table-fixed-right {\n box-shadow: none; }\n .u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {\n font-weight: normal; }\n .u-table-thead .filter-wrap {\n display: flex;\n justify-content: center;\n align-items: center; }\n .u-table-thead .filter-wrap .filter-btns {\n min-width: 58px; }\n .u-table-thead th {\n background: rgb(223, 225, 230);\n color: rgb(102, 102, 102);\n background-clip: padding-box;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n /*\n Introduced in IE 10. \n */\n -ms-user-select: none;\n user-select: none; }\n .u-table-thead th .bee-table-column-sorter {\n position: relative;\n margin-left: 4px;\n height: 1em;\n vertical-align: middle;\n text-align: center;\n display: inline-block; }\n .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down,\n .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {\n line-height: 6px;\n display: block;\n width: 34px;\n cursor: pointer; }\n .u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-down,\n .u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-up,\n .u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-down,\n .u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-up {\n color: #108ee9; }\n .u-table-thead th .bee-table-column-sorter .uf-triangle-down,\n .u-table-thead th .bee-table-column-sorter .uf-triangle-up {\n -webkit-filter: none;\n filter: none;\n font-size: 12px; }\n .u-table-thead th .bee-table-column-sorter .uf-triangle-down,\n .u-table-thead th .bee-table-column-sorter .uf-triangle-up {\n display: inline-block;\n padding: 0;\n font-size: 12px;\n font-size: 8px\\9;\n -webkit-transform: scale(0.66667) rotate(0deg);\n -ms-transform: scale(0.66667) rotate(0deg);\n transform: scale(0.66667) rotate(0deg);\n -ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)\";\n zoom: 1;\n line-height: 4px;\n height: 4px;\n color: #999; }\n .u-table-thead th:hover .bee-table-column-sorter {\n display: inline-block; }\n .u-table-thead .th-drag {\n cursor: move; }\n .u-table-thead .th-drag:hover {\n background: rgb(235, 236, 240); }\n .u-table-thead .th-drag-hover {\n background: #ccc; }\n .u-table-thead-th {\n position: relative; }\n .u-table-thead-th-drag-gap {\n height: 100%;\n position: absolute;\n right: -10px;\n top: 0;\n width: 20px;\n box-sizing: border-box;\n z-index: 1; }\n .u-table-thead-th-drag-gap .online {\n height: 100%;\n width: 1px;\n background: transparent;\n margin: 0 auto; }\n .u-table-thead-th-drag-gap .online-hover {\n background: #000000; }\n .u-table-thead-th-drag-gap:hover {\n cursor: col-resize; }\n .u-table-thead-th-drag-gap:hover .online {\n background: #000000; }\n .u-table-thead-th:last-child-drag-gap {\n border: none; }\n .u-table-filter-column-pop-cont {\n margin: 0px;\n max-height: 300px;\n overflow-y: scroll; }\n .u-table-filter-column-clear-setting {\n margin-bottom: 4px; }\n .u-table-filter-column-cont {\n position: relative; }\n .u-table-filter-column-filter-icon {\n position: absolute;\n top: 8px;\n right: 18px;\n width: 22px;\n height: 25px;\n line-height: 25px;\n z-index: 2;\n background: rgb(223, 225, 230);\n text-align: center;\n cursor: pointer; }\n .u-table-filter-column-filter-icon i.uf {\n padding: 0px; }\n .u-table-filter-column-pop-cont-item {\n margin-top: 8px;\n cursor: pointer; }\n .u-table-filter-column-pop-cont-item .u-checkbox {\n margin: 0px; }\n .u-table-filter-column-pop-cont-item > span {\n margin-left: -3px;\n width: 132px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n vertical-align: middle; }\n .u-table-filter-column-pop .u-modal-dialog {\n border: 1px solid #ccc;\n background: #fff; }\n .u-table-row-fixed-columns-in-body {\n display: none;\n pointer-events: none; }\n .u-table .u-checkbox {\n height: 16px;\n line-height: 16px;\n margin: 0px; }\n\n.u-table:focus {\n outline: none;\n box-shadow: 0 0 0; }\n\n.u-table-bordered .u-table-drag-gap {\n background: #e9e9e9; }\n\n.u-table.bordered table {\n border-collapse: collapse; }\n\n.u-table.bordered th,\n.u-table.bordered td {\n border: 1px solid rgb(193, 199, 208); }\n\n.move-enter,\n.move-appear {\n opacity: 0;\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-duration: 2.5s;\n animation-fill-mode: both;\n animation-play-state: paused; }\n\n.move-leave {\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-duration: 0.5s;\n animation-fill-mode: both;\n animation-play-state: paused; }\n\n.move-enter.move-enter-active,\n.move-appear.move-enter-active {\n animation-name: moveLeftIn;\n animation-play-state: running; }\n\n.move-leave.move-leave-active {\n animation-name: moveRightOut;\n animation-play-state: running; }\n\n@keyframes moveLeftIn {\n 0% {\n transform-origin: 0 0;\n transform: translateX(30px);\n opacity: 0;\n background: rgb(238,238,238); }\n 20% {\n transform-origin: 0 0;\n transform: translateX(0);\n opacity: 1; }\n 80% {\n background: rgb(238,238,238); }\n 100% {\n background: transparent;\n opacity: 1; } }\n\n@keyframes moveRightOut {\n 0% {\n transform-origin: 0 0;\n transform: translateX(0);\n opacity: 1; }\n 100% {\n transform-origin: 0 0;\n transform: translateX(-30px);\n opacity: 0; } }\n\n.formItem-style {\n height: unset;\n min-height: unset;\n padding: 0; }\n\n.errMessage-style {\n display: none;\n border: none;\n /* margin-top: 5px; */\n /* margin-bottom: 5px; */\n background: transparent;\n color: #f22c1d;\n /* padding-left: 12px; */\n /* padding-right: 12px; */\n margin: 0;\n position: absolute;\n padding: 0;\n top: 3px;\n right: 0; }\n\n.editable-cell {\n position: relative; }\n\n.editable-cell-input-wrapper,\n.editable-cell-text-wrapper {\n padding-right: 24px; }\n\n.editable-cell-input-wrapper .u-form-item.formItem-style .u-label {\n display: none; }\n\n.editable-cell-input-wrapper .u-input-group .u-form-control {\n height: 26px;\n font-size: 12px; }\n\n.editable-cell-text-wrapper {\n padding: 5px 24px 5px 5px;\n height: 30px; }\n\n.editable-cell-icon,\n.editable-cell-icon-check {\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n cursor: pointer; }\n\n.editable-cell-icon {\n line-height: 28px;\n display: none; }\n\n.editable-cell-icon-check {\n line-height: 28px; }\n\n.editable-cell:hover .editable-cell-icon {\n display: inline-block; }\n\n.editable-cell-icon:hover,\n.editable-cell-icon-check:hover {\n color: #2db7f5; }\n\n.editable-add-btn {\n margin-bottom: 8px; }\n\n.search-component {\n margin-bottom: 20px; }\n .search-component .empty-search {\n position: absolute;\n right: 45px;\n z-index: 20;\n top: 5px;\n color: #524e4e;\n cursor: pointer; }\n .search-component.u-input-group.simple {\n float: right; }\n .search-component.u-input-group.simple .u-form-control {\n width: 251px;\n background: #f5f5f5;\n border-color: #f5f5f5;\n border-radius: 20px; }\n .search-component.u-input-group.simple .u-input-group-btn {\n top: 3px;\n right: 20px;\n position: absolute; }\n\n.col-resize-container {\n height: 0px;\n position: relative; }\n .col-resize-container + .table-col-resizer:first-of-type {\n table-layout: fixed; }\n .col-resize-container .active-drag .icon {\n visibility: visible; }\n .col-resize-container .last-handle {\n display: none; }\n .col-resize-container .drag-handle {\n margin-left: -5px;\n position: absolute;\n z-index: 5;\n width: 10px;\n cursor: col-resize; }\n .col-resize-container .drag-handle .icon {\n color: #40b0dc;\n top: -1px;\n position: absolute;\n visibility: hidden; }\n .col-resize-container .drag-handle .icon:first-child {\n left: -2px; }\n .col-resize-container .drag-handle .icon:last-child {\n left: 6px; }\n .col-resize-container .drag-handle:hover .icon {\n visibility: visible; }\n .col-resize-container .drag-handle:hover .col-resizer {\n border: 1px solid; }\n .col-resize-container .drag-handle.disabled-drag {\n cursor: default;\n display: none; }\n .col-resize-container .drag-handle .col-resizer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0px;\n left: 3px; }\n\n.u-filter-dropdown-menu-wrap {\n z-index: 1800; }\n .u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {\n line-height: 32px;\n height: 32px;\n padding: 0px 16px 0 16px;\n cursor: pointer; }\n\n.u-row-hover {\n position: absolute;\n right: 24px;\n display: none;\n align-items: center;\n justify-content: center;\n background: transparent; }\n\n.u-row-hover2 {\n position: absolute;\n left: 100; }\n\n::-webkit-scrollbar {\n width: 8px;\n height: 8px; }\n\n::-webkit-scrollbar-button {\n display: none; }\n\n::-webkit-scrollbar-thumb {\n background: #d5d5d5 !important;\n border-radius: 5px; }\n\n::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: #d5d5d5;\n position: absolute; }\n\n::-webkit-scrollbar-track {\n display: none; }\n\n::-webkit-scrollbar-track-piece {\n display: none; }\n\n.selected {\n background: #e3f2fd; }\n\n.demo25 {\n height: 100%; }\n .demo25 .u-table-filter-column-filter-icon {\n right: 15px; }\n\nth .drop-menu .uf {\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px; }\n\nth:hover .uf {\n visibility: visible; }\n\n.demo3 .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px; }\n\n.demo8 .u-table {\n margin-bottom: 11px; }\n\n.demo8 .u-pagination {\n display: flex;\n align-items: center;\n justify-content: center; }\n\n\n.opt-btns .u-button {\n background-color: #505F79;\n border-color: #505F79;\n color: #fff; }\n .opt-btns .u-button:hover, .opt-btns .u-button:active {\n background-color: #344563;\n border-color: #344563; }\n","\r\n\r\n// $performance_font: 'Helvetica', 'Arial', sans-serif !default;\r\n\r\n@import \"minxin-colors\";\r\n\r\n\r\n\r\n@function strip-units($number) {\r\n @return $number / ($number * 0 + 1);\r\n}\r\n$unit: 10px !default;\r\n// IMAGES\r\n$image_path: '/images' !default;\r\n\r\n\r\n\r\n//默认颜色\r\n$trim-color-classes: false !default;\r\n\r\n@import \"minxin-themeColors\";\r\n\r\n//对比色\r\n$color-primary-contrast: $color-dark-contrast !default;\r\n$color-accent-contrast: $color-dark-contrast !default;\r\n//字体颜色\r\n$color-text: $palette-grey-900 !default;\r\n\r\n//不明所以 $primary-color: unquote(\"rgba(#{$palette-grey-500}, 0.20)\") !default;\r\n\r\n// -- Fonts 字体大小权重预定义\r\n$preferred-font: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei',sans-serif !default;\r\n$font-size: 1.6 * $unit !default;\r\n$font-size-tiny: 1.2 * $unit !default;\r\n$font-size-small: 1.4 * $unit !default;\r\n$font-size-normal: $font-size !default;\r\n$font-size-big: 1.8 * $unit !default;\r\n$font-weight-thin: 300 !default;\r\n$font-weight-normal: 400 !default;\r\n$font-weight-semi-bold: 500 !default;\r\n$font-weight-bold: 700 !default;\r\n$font-color:unquote(\"rgb(#{$palette-u-gray-800})\") !default;\r\n// 白色背景下的文字颜色\r\n$font-color-base: #212121 !default;\r\n\r\n$font-weight-override: false;\r\n$font-weight-light: 300;\r\n$font-weight-normal: 400;\r\n$font-weight-medium: 500;\r\n$font-weight-bold: 700;\r\n$font-weight-base: $font-weight-normal;\r\n\r\n\r\n\r\n\r\n$gray-base: unquote(\"rgb(#{$palette-grey-900})\") !default;\r\n$gray-darkest: unquote(\"rgb(#{$palette-grey-800})\") !default;\r\n$gray-darker: unquote(\"rgb(#{$palette-grey-700})\") !default;\r\n$gray-dark: unquote(\"rgb(#{$palette-grey-600})\") !default;\r\n$gray: unquote(\"rgb(#{$palette-grey-500})\") !default;\r\n$gray-light: unquote(\"rgb(#{$palette-grey-400})\") !default;\r\n$gray-lighter: unquote(\"rgb(#{$palette-grey-300})\") !default;\r\n$gray-lightest:unquote(\"rgb(#{$palette-grey-200})\") !default;\r\n$inverse: unquote(\"rgb(#{$color-white})\") !default;\r\n// $border-color-base: $gray-lighter;\r\n$border-color-base: unquote(\"rgb(#{$border-color})\") !default;\r\n$line-height-base: 1.57142857;\r\n\r\n// 边框圆角\r\n$border-radius-base: $border-radius;\r\n\r\n// 阴影\r\n\r\n$shadow-key-umbra-opacity: 0.2 !default;\r\n$shadow-key-penumbra-opacity: 0.14 !default;\r\n$shadow-ambient-shadow-opacity: 0.12 !default;\r\n\r\n$shadow-base: 0 1px 5px $gray-lighter;\r\n\r\n\r\n\r\n//-- Indexes\r\n$z-index-highest: 300;\r\n$z-index-higher: 200;\r\n$z-index-high: 100;\r\n$z-index-normal: 1;\r\n$z-index-low: -100;\r\n$z-index-lower: -200;\r\n\r\n$zindex-modal: 1700;\r\n$zindex-modal-background: 1600;\r\n$zIndex-notification: 1560;\r\n$zIndex-message: 1550;\r\n$zIndex-popconfirm: 1540;\r\n$zIndex-popover: 1540;\r\n$zIndex-tooltip: 1530;\r\n$zIndex-alert: 1510;\r\n$zindex-navbar-fixed: 1500;\r\n$zindex-menubar: 1400;\r\n$zindex-overlay: 1300;\r\n$zindex-dropdown: 1200;\r\n$zindex-navbar: 1200;\r\n$zindex-header: 1100;\r\n$zindex-footer: 1000;\r\n$zindex-backtop:2000;\r\n\r\n// 文本字体\r\n\r\n//todo\r\n$text-color-primary: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\r\n$text-link-color: unquote(\"rgb(#{$color-accent})\") !default;\r\n\r\n$target-elements-directly: true !default;\r\n\r\n\r\n$global-selected-color: unquote(\"rgb(#{$palette-blue-100})\") !default;\r\n\r\n\r\n// 控件\r\n$cursor-disabled: not-allowed;\r\n\r\n\r\n$title-color: $gray-darkest;\r\n//todo\r\n$subtitle-color: $gray-darker;\r\n$text-color: $gray-dark;\r\n\r\n$prompt-color: $gray;\r\n//全局不同状态颜色\r\n//todo\r\n$active-color-base: unquote(\"rgb(#{$palette-blue-800})\") !default;\r\n$normal-color-base: unquote(\"rgb(#{$palette-blue-600})\") !default;\r\n$hover-color-base: unquote(\"rgb(#{$palette-blue-400})\") !default;\r\n\r\n$bg-color-base: $gray-lightest;\r\n\r\n//disable颜色\r\n$disabled-color-base: #909090;\r\n$disabled-border-color: $gray-lighter;\r\n$disabled-bg-color: $gray-lightest;\r\n\r\n// 全局链接颜色\r\n$link-color: $normal-color-base;\r\n$link-hover-color: $hover-color-base;\r\n$link-active-color: $active-color-base;\r\n\r\n// 品牌色\r\n$brand-default: $gray-lighter;\r\n$brand-default-hover: $gray-lightest;\r\n$brand-default-active: $gray-light;\r\n// $brand-default: unquote(\"rgb(#{$color-primary})\");\r\n// $brand-default-hover: unquote(\"rgb(#{$color-primary-light})\");\r\n// $brand-default-active: unquote(\"rgb(#{$color-primary-dark})\");\r\n\r\n$brand-primary : unquote(\"rgb(#{$primary-color})\") !default;\r\n$brand-primary-hover: unquote(\"rgb(#{$primary-color-light})\") !default;\r\n$brand-primary-active: unquote(\"rgb(#{$primary-color-dark})\") !default;\r\n\r\n$brand-secondary : unquote(\"rgb(#{$secondary-color})\") !default;\r\n$brand-secondary-hover: unquote(\"rgb(#{$secondary-color-light})\") !default;\r\n$brand-secondary-active: unquote(\"rgb(#{$secondary-color-dark})\") !default;\r\n\r\n$brand-success: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n$brand-success-hover: unquote(\"rgb(#{$palette-green-300})\") !default;\r\n$brand-success-active: unquote(\"rgb(#{$palette-green-700})\") !default;\r\n\r\n$brand-info: unquote(\"rgb(#{$palette-cyan-500})\") !default;\r\n$brand-info-hover: unquote(\"rgb(#{$palette-cyan-300})\") !default;\r\n$brand-info-active: unquote(\"rgb(#{$palette-cyan-700})\") !default;\r\n\r\n$brand-warning: unquote(\"rgb(#{$palette-orange-500})\") !default;\r\n$brand-warning-hover: unquote(\"rgb(#{$palette-orange-300})\") !default;\r\n$brand-warning-active: unquote(\"rgb(#{$palette-orange-700})\") !default;\r\n\r\n\r\n$brand-news: unquote(\"rgb(#{$palette-blue-500})\") !default;\r\n$brand-news-hover: unquote(\"rgb(#{$palette-blue-300})\") !default;\r\n$brand-news-active: unquote(\"rgb(#{$palette-blue-700})\") !default;\r\n\r\n$brand-danger: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$brand-danger-hover: unquote(\"rgb(#{$palette-red-300})\") !default;\r\n$brand-danger-active: unquote(\"rgb(#{$palette-red-700})\") !default;\r\n\r\n$brand-dark: $gray-darker;\r\n$brand-dark-hover: $gray-dark;\r\n$brand-dark-active: $gray-darkest;\r\n\r\n$brand-light : unquote(\"rgb(#{$color-dark-contrast})\") !default;\r\n$brand-light-hover: unquote(\"rgb(#{$palette-grey-200})\") !default;\r\n$brand-light-active: unquote(\"rgb(#{$palette-grey-400})\") !default;\r\n\r\n$brand-light-primary : unquote(\"rgb(#{$palette-blue-100})\") !default;\r\n$brand-light-success: unquote(\"rgb(#{$palette-green-100})\") !default;\r\n$brand-light-info: unquote(\"rgb(#{$palette-cyan-100})\") !default;\r\n$brand-light-warning: unquote(\"rgb(#{$palette-orange-100})\") !default;\r\n$brand-light-news: unquote(\"rgb(#{$palette-blue-100})\") !default;\r\n$brand-light-danger: unquote(\"rgb(#{$palette-red-100})\") !default;\r\n\r\n//不同背景下对应的文字颜色\r\n\r\n$color-news: unquote(\"rgb(#{$palette-blue-500})\") !default;\r\n$color-success: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n$color-info: unquote(\"rgb(#{$palette-cyan-500})\") !default;\r\n$color-warning: unquote(\"rgb(#{$palette-orange-500})\") !default;\r\n$color-danger: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$color-light: $gray-darker !default;\r\n\r\n//redius\r\n\r\n$default-border-radius: $border-radius;\r\n\r\n// hover时的背景色,包括select、dropdown、table、datepicker、tree、menu等组件\r\n$hover-bg-color-base: unquote(\"rgb(#{$item-hover-bg-color-base})\") !default;\r\n// // selected背景色,包括:select、menu等\r\n$selected-bg-color-base: unquote(\"rgb(#{$item-selected-bg-color-base})\") !default;\r\n\r\n// UButton\r\n\r\n// Button 基础背景色.\r\n// 默认按钮()\r\n$button-default-color: unquote(\"rgb(#{$default-color})\");\r\n$button-default-color-IE8: unquote(\"rgb(#{$default-color})\");\r\n\r\n// 边框按钮(shape:'border')\r\n$button-border-bg-color: unquote(\"rgb(#{$color-dark-contrast})\");\r\n\r\n// Button 不同状态下的背景色 :hover、active、focus状态.\r\n$button-hover-color: unquote(\"rgb(#{$default-color-light})\");\r\n$button-active-color: unquote(\"rgb(#{$default-color-dark})\");\r\n$button-focus-color: unquote(\"rgb(#{$default-color-light})\");\r\n\r\n// Button 配置不同colors属性时的背景色.\r\n$button-primary-color: $brand-primary;\r\n$button-primary-active-color: $brand-primary-active;\r\n$button-primary-hover-color: $brand-primary-hover;\r\n$button-secondary-color: $brand-secondary;\r\n$button-secondary-active-color: $brand-secondary-active;\r\n$button-secondary-hover-color: $brand-secondary-hover;\r\n$button-success-color: $brand-success;\r\n$button-success-active-color: $brand-success-active;\r\n$button-success-hover-color: $brand-success-hover;\r\n$button-info-color: $brand-info;\r\n$button-info-active-color: $brand-info-active;\r\n$button-info-hover-color: $brand-info-hover;\r\n$button-warning-color: $brand-warning;\r\n$button-warning-active-color: $brand-warning-active;\r\n$button-warning-hover-color: $brand-warning-hover;\r\n$button-danger-color: $brand-danger;\r\n$button-danger-active-color: $brand-danger-active;\r\n$button-danger-hover-color: $brand-danger-hover;\r\n$button-dark-color: $brand-dark;\r\n$button-dark-active-color: $brand-dark-active;\r\n$button-dark-hover-color: $brand-dark-hover;\r\n$button-light-color: $brand-light;\r\n$button-light-active-color: $brand-light-active;\r\n$button-light-hover-color: $brand-light-hover;\r\n\r\n// Button 文字颜色.\r\n// 主按钮(colors:'primary')\r\n$button-primary-text-color: unquote(\"rgb(#{$text-color-base})\") !default;\r\n$button-text-color: $button-primary-text-color;\r\n// 次按钮(colors:'secondary')\r\n$button-second-text-color: unquote(\"rgb(#{$button-secondary-text-color})\") !default;\r\n// 默认按钮()\r\n$button-default-text-color: unquote(\"rgb(#{$palette-grey-900})\") !default;\r\n// 边框按钮(shape:'border')\r\n// $button-border-text-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n\r\n// Button 边框样式及颜色.\r\n$button-border-style: unquote(\"solid\") !default;\r\n$button-border-color: $border-color-base;\r\n$button-default-border-color: $button-default-color !default;\r\n\r\n// Button 不同状态下的边框颜色 :hover、active、focus状态.\r\n$button-hover-border-color: $brand-default-hover;\r\n$button-active-border-color: $brand-default-active;\r\n$button-focus-border-color: $brand-default-active;\r\n\r\n// FAB colors and sizes.\r\n$button-fab-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\r\n$button-fab-hover-color-alt: unquote(\"rgb(#{$color-accent-light})\") !default;\r\n$button-fab-active-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\r\n$button-fab-text-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\r\n$button-fab-ripple-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\r\n\r\n// Icon button colors and sizes.\r\n$button-icon-color: unquote(\"rgb(#{$palette-grey-700})\") !default;\r\n$button-icon-focus-color: $button-focus-color !default;\r\n\r\n// Button 最小宽度、高度、内边距、外边距、行高、边框粗细、圆角.\r\n$button-min-width: 72/10 * $unit !default;\r\n$button-height: 36/10 * $unit !default;\r\n$button-padding: 4/10* $unit 13/10 * $unit !default;\r\n$button-padding-IE8: 4px 13px !default;\r\n$button-top-padding: 1310 * $unit !default;\r\n$button-left-padding: 6/10* $unit !default;\r\n$button-line-height:1.57142857;\r\n$button-margin: 4/10 * $unit !default;\r\n$button-border-radius: 3/10 * $unit !default;\r\n$button-border-width: 1/10 * $unit !default;\r\n\r\n$button-fab-size: 38/10 * $unit !default;\r\n$button-fab-size-mini: 30/10 * $unit !default;\r\n$button-fab-font-size: 14/10 * $unit !default;\r\n\r\n$button-icon-size: 32/10 * $unit !default;\r\n$button-icon-size-mini: 13/10 * $unit !default;\r\n\r\n$button-raised-font-size: 14/10 * $unit !default;\r\n\r\n// Button 大按钮\r\n$button-padding-y-lg:8px;\r\n$button-padding-x-lg:15px;\r\n$font-size-lg:1.4 * $unit;\r\n\r\n\r\n// Button 特大型按钮\r\n$button-padding-y-xg:10.5px;\r\n$button-padding-x-xg:18px;\r\n$font-size-xg:1.6 * $unit;\r\n\r\n\r\n// Button 小型按钮\r\n$button-padding-y-sm:3px;\r\n$button-padding-x-sm:5px;\r\n$font-size-sm:1.2 * $unit;\r\n\r\n\r\n\r\n// UText\r\n\r\n\r\n$form-control-border-radius: $border-radius-base;\r\n$form-control-default-font-size: 14px;\r\n$form-control-lg-font-size: 14px;\r\n$form-control-sm-font-size: 12px;\r\n$form-control-default-height: 32px;\r\n$form-control-lg-height: 40px;\r\n$form-control-sm-height: 26px;\r\n$form-control-color: #424242;\r\n$form-control-bg-color: #fff;\r\n$form-control-border-color: $border-color-base;\r\n$form-control-disable-bg-color: #F7F9FB;\r\n$form-control-disable-color: $disabled-color-base;\r\n$form-control-disable-border-color: #DFE1E6;\r\n\r\n$input-text-background-color: transparent !default;\r\n$input-text-label-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\r\n$input-text-bottom-border-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\r\n$input-text-bottom-border-color-IE8: unquote(\"rgb(#{$color-black})\") !default;\r\n$input-text-highlight-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$input-text-disabled-color: $input-text-bottom-border-color !default;\r\n$input-text-disabled-text-color: $input-text-label-color !default;\r\n$input-text-error-color: unquote(\"rgb(222, 50, 38)\") !default;\r\n$input-text-must-color:unquote(\"rgb(#{$palette-red-A700})\") !default;\r\n\r\n\r\n$input-text-font-size: 14px !default;\r\n$input-text-width: 100% !default;\r\n$input-text-padding: 4px !default;\r\n$input-text-vertical-spacing: 20px !default;\r\n\r\n$input-text-button-size: 32px !default;\r\n$input-text-floating-label-fontsize: 12px !default;\r\n$input-text-expandable-icon-top: 16px !default;\r\n$input-text-height:36px !default;\r\n$input-text-normal-width:360px !default;\r\n$input-text-short-width:180px !default;\r\n$input-text-normal-border-color:unquote(\"rgb(#{$palette-u-gray-400})\") !default;\r\n$input-text-color:unquote(\"rgb(#{$palette-u-gray-A200})\") !default;\r\n$input-text-focus-border-color:unquote(\"rgb(#{$palette-u-blue-400})\") !default;\r\n$input-lable-color:unquote(\"rgb(#{$palette-u-gray-900})\") !default;\r\n\r\n\r\n/* FormGroup */\r\n\r\n$error-input-border:$brand-danger;\r\n$warning-input-border:$brand-warning;\r\n$success-input-border:$brand-success;\r\n$success-addon-bg: $brand-light-success;\r\n$warning-addon-bg: $brand-light-warning;\r\n$error-addon-bg: $brand-light-danger;\r\n$form-group-margin-top: 15px;\r\n$form-group-margin-bottom: 15px;\r\n\r\n/* Navlayout */\r\n\r\n$layout-nav-color: unquote(\"rgb(#{$palette-grey-100})\") !default;\r\n\r\n// Drawer\r\n$layout-drawer-bg-color: unquote(\"rgb(#{$palette-grey-50})\") !default;\r\n$layout-drawer-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\r\n$layout-text-color: unquote(\"rgb(#{$palette-grey-800})\") !default;\r\n$layout-drawer-navigation-color: #757575 !default;\r\n$layout-drawer-navigation-link-active-background: unquote(\"rgb(#{$palette-grey-200})\") !default;\r\n$layout-drawer-navigation-link-active-color: $layout-text-color !default;\r\n\r\n// Header\r\n$layout-header-bg-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$layout-header-text-color: unquote(\"rgb(#{$color-primary-contrast})\") !default;\r\n$layout-header-nav-hover-color: unquote(\"rgba(#{$palette-grey-700}, 0.6)\") !default;\r\n$layout-header-tab-text-color: unquote(\"rgba(#{$color-primary-contrast}, 0.6)\") !default;\r\n\r\n// Tabs\r\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\r\n\r\n$layout-nav-link-font-size: 13px !default;\r\n\r\n$layout-drawer-narrow: 240px !default;\r\n$layout-drawer-wide: 456px !default;\r\n$layout-drawer-width: $layout-drawer-narrow !default;\r\n\r\n$layout-header-icon-size: 32px !default;\r\n$layout-screen-size-threshold: 1024px !default;\r\n$layout-header-icon-margin: 24px !default;\r\n$layout-drawer-button-mobile-size: 44px !default;\r\n$layout-drawer-button-desktop-size: 34px !default;\r\n$layout-drawer-button-desktop-margin-top: 5px !default;\r\n$layout-drawer-button-mobile-margin-top: 10px !default;\r\n\r\n$layout-header-mobile-row-height: 56px !default;\r\n$layout-mobile-header-height: $layout-header-mobile-row-height;\r\n$layout-header-desktop-row-height: 44px !default;\r\n$layout-desktop-header-height: $layout-header-desktop-row-height;\r\n\r\n$layout-header-desktop-baseline: 80px !default;\r\n$layout-header-mobile-baseline: 72px !default;\r\n$layout-header-mobile-indent: 16px !default;\r\n$layout-header-desktop-indent: 40px !default;\r\n\r\n$layout-tab-font-size: 14px !default;\r\n$layout-tab-bar-height: 48px !default;\r\n$layout-tab-mobile-padding: 12px !default;\r\n$layout-tab-desktop-padding: 24px !default;\r\n$layout-tab-highlight-thickness: 2px !default;\r\n\r\n// gridlayout\r\n\r\n// Extra small screen / phone\r\n//$screen-xs: 480px;\r\n\r\n$screen-xs-min: 480px;\r\n// Deprecated `@screen-phone` as of v3.0.1\r\n//@screen-phone: @screen-xs-min;\r\n\r\n// Small screen / tablet\r\n// Deprecated `@screen-sm` as of v3.0.1\r\n//@screen-sm: 768px;\r\n$screen-sm-min: 768px;\r\n// Deprecated `@screen-tablet` as of v3.0.1\r\n//@screen-tablet: @screen-sm-min;\r\n\r\n// Medium screen / desktop\r\n// Deprecated `@screen-md` as of v3.0.1\r\n//@screen-md: 992px;\r\n$screen-md-min: 992px;\r\n// Deprecated `@screen-desktop` as of v3.0.1\r\n//@screen-desktop: @screen-md-min;\r\n\r\n// Large screen / wide desktop\r\n// Deprecated `@screen-lg` as of v3.0.1\r\n//@screen-lg: 1200px;\r\n$screen-lg-min: 1200px;\r\n// Deprecated `@screen-lg-desktop` as of v3.0.1\r\n//@screen-lg-desktop: @screen-lg-min;\r\n$screen-xs-max: ($screen-sm-min - 1 );\r\n\r\n$screen-sm-max: ($screen-sm-min - 1 );\r\n\r\n$screen-md-max: ($screen-lg-min - 1 );\r\n\r\n\r\n\r\n\r\n// Number of columns in the grid.\r\n$grid-columns: 12;\r\n// Padding between columns. Gets divided in half for the left and right.\r\n$grid-gutter-width: 30px;\r\n// Navbar collapse\r\n// Point at which the navbar becomes uncollapsed.\r\n$grid-float-breakpoint: 768px;\r\n// Point at which the navbar begins collapsing.\r\n$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);\r\n\r\n\r\n// Small screen / tablet\r\n$container-tablet: (720px + $grid-gutter-width);\r\n// For `@screen-sm-min` and up.\r\n$container-sm: $container-tablet;\r\n\r\n// Medium screen / desktop\r\n$container-desktop: (940px + $grid-gutter-width);\r\n// For `@screen-md-min` and up.\r\n$container-md: $container-desktop;\r\n\r\n// Large screen / wide desktop\r\n$container-large-desktop: (1140px + $grid-gutter-width);\r\n// For `@screen-lg-min` and up.\r\n$container-lg: $container-large-desktop;\r\n\r\n\r\n\r\n// menu\r\n\r\n$default-dropdown-bg-color: unquote(\"rgb(#{$color-white})\") !default;\r\n$menu-expand-duration: 0.3s !default;\r\n$menu-fade-duration: 0.2s !default;\r\n\r\n// Default Item Colors\r\n$default-item-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\r\n$default-item-text-color-IE8: unquote(\"rgb(#{$color-black})\") !default;\r\n$default-item-outline-color: unquote(\"rgb(#{$palette-u-blue-400})\") !default;\r\n$default-item-hover-bg-color: unquote(\"rgb(#{$palette-u-blue-100})\") !default;\r\n$default-item-focus-bg-color: unquote(\"rgb(#{$palette-u-blue-200})\") !default;\r\n$default-item-active-bg-color: unquote(\"rgb(#{$palette-u-blue-200})\") !default;\r\n$default-item-divider-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\r\n\r\n// Disabled Button Colors\r\n$disabled-item-text-color: unquote(\"rgb(#{$palette-grey-400})\") !default;\r\n\r\n// Tile\r\n$tile-width: 100%;\r\n\r\n$tile-default-border-color: #e9e9e9;\r\n$tile-default-hover-shadow-color: rgba(0, 0, 0, 0.2);\r\n\r\n$tile-primary-border-color: $button-primary-color;\r\n$tile-primary-hover-shadow-color: $button-primary-hover-color;\r\n\r\n$tile-danger-border-color: $button-danger-color;\r\n$tile-danger-hover-shadow-color: $button-danger-hover-color;\r\n\r\n$tile-warning-border-color: $button-warning-color;\r\n$tile-warning-hover-shadow-color: $button-warning-hover-color;\r\n\r\n$tile-success-border-color: $button-success-color;\r\n$tile-success-hover-shadow-color: $button-success-hover-color;\r\n\r\n$tile-info-border-color: $button-info-color;\r\n$tile-info-hover-shadow-color: $button-info-hover-color;\r\n\r\n// Alert\r\n$alert-news-bg: $brand-light-news;\r\n$alert-success-bg: $brand-light-success;\r\n$alert-info-bg: $brand-light-info;\r\n$alert-warning-bg: $brand-light-warning;\r\n$alert-danger-bg: $brand-light-danger;\r\n\r\n\r\n$alert-dark-news-bg: $brand-news;\r\n$alert-dark-success-bg: $brand-success;\r\n$alert-dark-info-bg: $brand-info;\r\n$alert-dark-warning-bg: $brand-warning;\r\n$alert-dark-danger-bg: $brand-danger;\r\n\r\n$alert-news-color: $color-news;\r\n$alert-success-color: $color-success;\r\n$alert-info-color: $color-info;\r\n$alert-warning-color: $color-warning;\r\n$alert-danger-color: $color-danger;\r\n\r\n$timeline-primary-color: $brand-primary;\r\n$timeline-news-color: $color-news;\r\n$timeline-success-color: $color-success;\r\n$timeline-info-color: $color-info;\r\n$timeline-warning-color: $color-warning;\r\n$timeline-danger-color: $color-danger;\r\n\r\n$alert-padding:10px;\r\n$alert-font-size:12px;\r\n$alert-border-radius: $border-radius;\r\n$alert-text-padding-left: 15px;\r\n$alert-text-padding-right: 15px;\r\n$alert-close-font-size: 21px;\r\n$alert-close-opacity: .2;\r\n$alert-close-font-weight: 700;\r\n\r\n//Checkbox\r\n\r\n$checkbox-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$checkbox-off-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$checkbox-off-color-IE8: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$checkbox-disabled-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$checkbox-focus-color: unquote(\"rgba(#{$palette-u-blue-500}, 0.26)\") !default;\r\n$checkbox-image-path: $image_path;\r\n\r\n$checkbox-label-font-size: 13px !default;\r\n$checkbox-label-height: 24px !default;\r\n$checkbox-button-size: 16px !default;\r\n$checkbox-inner-margin: 2px !default;\r\n$checkbox-padding: 8px !default;\r\n$checkbox-top-offset:\r\n ($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;\r\n$checkbox-ripple-size: $checkbox-label-height * 1.5;\r\n\r\n$checkbox-primary-bg: $brand-primary;\r\n$checkbox-success-bg: $brand-success;\r\n$checkbox-info-bg: $brand-info;\r\n$checkbox-warning-bg: $brand-warning;\r\n$checkbox-danger-bg: $brand-danger;\r\n$checkbox-dark-bg: $brand-dark;\r\n\r\n$progress-primary-bg: $brand-primary;\r\n$progress-success-bg: $brand-success;\r\n$progress-info-bg: $brand-info;\r\n$progress-warning-bg: $brand-warning;\r\n$progress-danger-bg: $brand-danger;\r\n$progress-dark-bg: $brand-dark;\r\n\r\n$primary-color-opacity:unquote(\"rgba(#{$primary-color}, 0.7)\") !default;\r\n$color-success-opacity:unquote(\"rgba(#{$palette-green-500}, 0.7)\") !default;\r\n$color-info-opacity:unquote(\"rgba(#{$palette-cyan-500}, 0.7)\") !default;\r\n$color-warning-opacity:unquote(\"rgba(#{$palette-orange-500}, 0.7)\") !default;\r\n$color-danger-opacity:unquote(\"rgba(#{$palette-red-500}, 0.7)\") !default;\r\n$color-dark-opacity:unquote(\"rgba(#{$palette-grey-700}, 0.7)\") !default;\r\n\r\n\r\n$progress-sm-height: 10px;\r\n$progress-xs-height: 5px;\r\n$progress-xs-width: 170px;\r\n$progress-default-height: 20px;\r\n$progress-sm-lable-font-size: 10px;\r\n$progress-sm-lable-line-height: 10px;\r\n$progress-xs-lable-line-height: 8px;\r\n$progress-xs-lable-margin-left: 140px;\r\n$progress-xs-lable-font-size: 10px;\r\n$progress-xs-lable-color: #000;\r\n\r\n// Radio\r\n\r\n$radio-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$radio-off-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$radio-off-color-IE8: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$radio-disabled-color: $disabled-color-base !default;\r\n\r\n$radio-label-font-size: 13px !default;\r\n$radio-label-height: 32px !default;\r\n$radio-button-size: 16px !default;\r\n$radio-inner-margin: $radio-button-size / 4;\r\n$radio-padding: 8px !default;\r\n$radio-top-offset: ($radio-label-height - $radio-button-size) / 2;\r\n$radio-ripple-size: 42px !default;\r\n\r\n$radio-primary-bg: $brand-primary;\r\n$radio-success-bg: $brand-success;\r\n$radio-info-bg: $brand-info;\r\n$radio-warning-bg: $brand-warning;\r\n$radio-danger-bg: $brand-danger;\r\n$radio-dark-bg: $brand-dark;\r\n\r\n$radio-disabled-bg: #f7f7f7;\r\n$radio-diabled-border-color: #d9d9d9;\r\n\r\n$radio-border-color: #d9d9d9;\r\n$radio-bg-color: #fff;\r\n$radio-color:#212121;\r\n\r\n$radio-checked-bg-color: #fff;\r\n$radio-checked-color: $brand-primary;\r\n$radio-checked-border-color: $radio-checked-color;\r\n\r\n$radio-icon-height: 18px;\r\n$radio-icon-width: 18px;\r\n$radio-icon-checked-height: 8px;\r\n$radio-icon-checked-width: 8px;\r\n\r\n$radio-button-lg-height:42px;\r\n$radio-button-lg-line-height:26px;\r\n\r\n$radio-button-sm-height:22px;\r\n$radio-button-sm-line-height:20px;\r\n\r\n$radio-button-height: 28px;\r\n$radio-button-line-height: 26px;\r\n\r\n\r\n\r\n\r\n\r\n//loading\r\n\r\n$loading-color-1: unquote(\"rgb(#{$palette-blue-400})\") !default;\r\n$loading-color-2: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$loading-color-3: unquote(\"rgb(#{$palette-yellow-600})\") !default;\r\n$loading-color-4: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n\r\n$loading-single-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n\r\n$loading-size: 28px !default;\r\n$loading-stroke-width: 3px !default;\r\n\r\n// Amount of circle the arc takes up.\r\n$loading-arc-size: 270deg !default;\r\n// Time it takes to expand and contract arc.\r\n$loading-arc-time: 1333ms !default;\r\n// How much the start location of the arc should rotate each time.\r\n$loading-arc-start-rot: 216deg !default;\r\n\r\n$loading-duration: 360 * $loading-arc-time / (\r\n strip-units($loading-arc-start-rot + (360deg - $loading-arc-size)));\r\n\r\n// datetimepicker\r\n$timepicker-border-gap-color:#ccc;\r\n$timepicker-font-size:14px;\r\n\r\n$date-bg-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n\r\n// message\r\n$snackbar-color: unquote(\"rgb(#{$color-white})\") !default;\r\n$snackbar-background-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$snackbar-color-cancel: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$snackbar-color-accept: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n$snackbar-color-warning: unquote(\"rgb(#{$palette-lime-200})\") !default;\r\n\r\n// DATA TABLE\r\n\r\n$data-table-font-size: 13px !default;\r\n$data-table-header-font-size: 12px !default;\r\n$data-table-header-sort-icon-size: 16px !default;\r\n\r\n$data-table-header-color: rgba(#000, 0.54) !default;\r\n$data-table-header-sorted-color: rgba(#000, 0.87) !default;\r\n$data-table-divider-color: rgba(#000, 0.12) !default;\r\n$data-table-divider-color-IE8: rgb(0,0,0) !default;\r\n\r\n//$data-table-hover-color: #eeeeee !default;\r\n$data-table-hover-color: #E9F7FC !default;\r\n$data-table-selection-color: #C4EAF6 !default;\r\n\r\n$data-table-dividers: 1px solid $data-table-divider-color !default;\r\n$data-table-dividers-IE8: 1px solid $data-table-divider-color-IE8 !default;\r\n\r\n$data-table-row-height: 48px !default;\r\n$data-table-last-row-height: 56px !default;\r\n$data-table-header-height: 56px !default;\r\n\r\n$data-table-column-spacing: 36px !default;\r\n$data-table-column-padding: $data-table-column-spacing / 2;\r\n\r\n$data-table-card-header-height: 64px !default;\r\n$data-table-card-title-top: 20px !default;\r\n$data-table-card-padding: 24px !default;\r\n$data-table-button-padding-right: 16px !default;\r\n$data-table-cell-top: $data-table-card-padding / 2;\r\n\r\n// $line-height-computed: round(($font-size-small * $line-height-base));\r\n$line-height-computed: round((14px * $line-height-base));\r\n$table-bg: transparent;\r\n$table-cell-padding: 8px;\r\n$table-border-color: $border-color-base;\r\n$table-bg-hover: $bg-color-base;\r\n$table-bg-active: $table-bg-hover;\r\n$table-bg-accent: unquote(\"rgba(#{$palette-grey-200},.3)\") !default;\r\n\r\n\r\n\r\n\r\n// tooltip\r\n$tooltip-max-width: 200px;\r\n$tooltip-color: #fff;\r\n$tooltip-bg: #42526E;\r\n$tooltip-inverse-border-color: #d9d9d9;\r\n$tooltip-inverse-color: rgb(51,51,51);\r\n$tooltip-arrow-color: $tooltip-bg;\r\n$tooltip-opacity: .9;\r\n\r\n\r\n// 进度条\r\n$bar-height: 4px !default;\r\n$progress-main-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$progress-secondary-color: unquote(\"rgba(#{$color-primary-contrast}, 0.7)\") !default;\r\n$progress-fallback-buffer-color: unquote(\"rgba(#{$color-primary-contrast}, 0.9)\") !default;\r\n$progress-image-path: $image_path;\r\n$progress-buffer-bar-border:unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n\r\n// Tabs\r\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\r\n\r\n\r\n\r\n$tab-highlight-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$tab-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\r\n$tab-active-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\r\n$tab-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\r\n\r\n\r\n\r\n//CARD\r\n\r\n$card-width: 330px !default;\r\n$card-height: 200px !default;\r\n$card-font-size: 13px !default;\r\n$card-title-font-size: 24px !default;\r\n$card-subtitle-font-size: 10px !default;\r\n$card-horizontal-padding: 16px !default;\r\n$card-vertical-padding: 16px !default;\r\n\r\n$card-title-perspective-origin-x: 165px !default;\r\n$card-title-perspective-origin-y: 56px !default;\r\n\r\n$card-title-transform-origin-x: 165px !default;\r\n$card-title-transform-origin-y: 56px !default;\r\n\r\n$card-title-text-transform-origin-x: 149px !default;\r\n$card-title-text-transform-origin-y: 48px !default;\r\n\r\n$card-supporting-text-font-size: 1.4 * $unit !default;\r\n$card-supporting-text-line-height: 18px !default;\r\n\r\n$card-actions-font-size: 13px !default;\r\n\r\n$card-title-text-font-weight: 300 !default;\r\n$card-z-index: 1 !default;\r\n\r\n// Cover image\r\n$card-cover-image-height: 186px !default;\r\n$card-background-image-url: '' !default;\r\n\r\n\r\n\r\n$card-background-color: unquote(\"rgb(#{$color-white})\") !default;\r\n$card-text-color: unquote(\"rgb(#{$color-black})\") !default;\r\n$card-image-placeholder-color: unquote(\"rgb(#{$color-accent})\") !default;\r\n$card-supporting-text-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\r\n$card-border-color: rgba(0,0,0,0.1) !default;\r\n$card-subtitle-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\r\n\r\n\r\n$input-border:unquote(\"rgb(#{$palette-u-gray-500})\");\r\n$input-border-focus:unquote(\"rgb(#{$primary-color})\");\r\n$input-border-disabled:unquote(\"rgb(#{$palette-u-gray-100})\");\r\n$input-bg-disabled:unquote(\"rgb(#{$palette-u-gray-100})\");\r\n$input-color:unquote(\"rgb(#{$palette-u-gray-A100})\");\r\n$form-input-height:36px;\r\n$form-input-height-sm:28px;\r\n$form-input-padding-left:12px;\r\n$form-label-color:unquote(\"rgb(#{$palette-u-gray-900})\");\r\n$form-control-feedback-color:unquote(\"rgb(#{$palette-u-gray-700})\");\r\n$form-validate-error-color:unquote(\"rgb(#{$palette-u-red-600})\");\r\n\r\n\r\n// BADGE\r\n$badge-font-size: 12px !default;\r\n$badge-color: unquote(\"rgb(#{$color-accent-contrast})\") !default;\r\n$badge-color-inverse: unquote(\"rgb(#{$color-accent})\") !default;\r\n$badge-background: unquote(\"rgb(#{$color-accent})\") !default;\r\n$badge-background-inverse: unquote(\"rgba(#{$color-accent-contrast},0.2)\") !default;\r\n$badge-size : 22px !default;\r\n$badge-padding: 2px !default;\r\n$badge-overlap: 12px !default;\r\n\r\n$badge-primary-color:#FFFFFF;\r\n$badge-primary-bg:$brand-primary;\r\n\r\n$badge-success-color:#FFFFFF;\r\n$badge-success-bg: $brand-success;\r\n\r\n$badge-info-color:#FFFFFF;\r\n$badge-info-bg:$brand-info;\r\n\r\n$badge-warning-color:#FFFFFF;\r\n$badge-warning-bg:$brand-warning;\r\n\r\n$badge-danger-color:#FFFFFF;\r\n$badge-danger-bg:$brand-danger;\r\n\r\n$badge-dark-color:#FFFFFF;\r\n$badge-dark-bg:$brand-dark;\r\n\r\n$badge-font-size: 12px;\r\n$badge-font-dataicon-size: 10px;\r\n$badge-default-dataicon-fontcolor: #757575;\r\n$badge-default-dataicon-bgcolor: #fff;\r\n$badge-default-dataicon-bordercolor: $border-color-base;\r\n\r\n// labels\r\n$tag-padding: .25em .6em .25em;\r\n$tag-border-radius: 0.3em;\r\n$tag-bg: #eeeeee;\r\n$tag-round-border-radius: 1em;\r\n$tag-default-color: #757575;\r\n$tag-default-bg:#e0e0e0;\r\n$tag-lg-font-size: 16px;\r\n$tag-sm-font-size: 10px;\r\n$tag-sm-padding: .1em .5em .1em;\r\n$tag-default-hover-bg: $brand-default-hover;\r\n$tag-primary-hover-bg: $brand-primary-hover;\r\n$tag-success-hover-bg: $brand-success-hover;\r\n$tag-info-hover-bg: $brand-info-hover;\r\n$tag-warning-hover-bg: $brand-warning-hover;\r\n$tag-danger-hover-bg: $brand-danger-hover;\r\n$tag-dark-hover-bg: $brand-dark-hover;\r\n$tag-default-bg: $brand-default;\r\n$tag-primary-bg: $brand-primary;\r\n$tag-success-bg: $brand-success;\r\n$tag-info-bg: $brand-info;\r\n$tag-warning-bg: $brand-warning;\r\n$tag-danger-bg: $brand-danger;\r\n$tag-dark-bg: $brand-dark;\r\n$tag-default-hover-color:unquote(\"rgb(#{$palette-u-gray-500})\");\r\n\r\n\r\n// pagination\r\n$pagination-gap-hover-border:#7A869A;\r\n\r\n$pagination-link-padding: 7px 13px;\r\n$pagination-lg-font-size: 16px;\r\n$pagination-lg-padding-vertical: 9.5px;\r\n$pagination-lg-padding-horizontal: 15.5px;\r\n\r\n$pagination-small-font-size: 12px;\r\n$pagination-small-padding-vertical: 4px;\r\n$pagination-small-padding-horizontal: 9.5px;\r\n\r\n$pag-color: #666666;\r\n$pag-bg-color: #fff;\r\n$pag-border-color:#d7d7d7;\r\n$pag-hover-color: #666;\r\n$pag-hover-bg-color:$hover-bg-color-base;\r\n$pag-hover-border-color:#d7d7d7;\r\n$pag-active-color: #fff;\r\n$pag-active-bg-color:#7A869A;\r\n$pag-active-border-color:#7A869A;\r\n$pag-disabled-color: #777;\r\n$pag-disabled-bg-color:#fff;\r\n$pag-disabled-border-color:#ddd;\r\n\r\n$border-radius-base: $border-radius;\r\n$border-radius-large: 4px;\r\n$border-radius-small: 2px;\r\n\r\n$line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome\r\n$line-height-small: 1.5;\r\n// widget\r\n\r\n$widget-padding-left:30px;\r\n$widget-padding-top:10px;\r\n\r\n//tooltips\r\n\r\n$tooltip-default-bg: $brand-default;\r\n$tooltip-primary-bg: $brand-primary;\r\n$tooltip-success-bg: $brand-success;\r\n$tooltip-info-bg: $brand-info;\r\n$tooltip-warning-bg: $brand-warning;\r\n$tooltip-danger-bg: $brand-danger;\r\n$tooltip-dark-bg: $brand-dark;\r\n\r\n//menu Button\r\n\r\n$menu-default-bg: $brand-default;\r\n$menu-primary-bg: $brand-primary;\r\n$menu-success-bg: $brand-success;\r\n$menu-info-bg: $brand-info;\r\n$menu-warning-bg: $brand-warning;\r\n$menu-danger-bg: $brand-danger;\r\n$menu-dark-bg: $brand-dark;\r\n$menu-default-bg-hover: $brand-default-hover;\r\n$menu-primary-bg-hover: $brand-primary-hover;\r\n$menu-success-bg-hover: $brand-success-hover;\r\n$menu-info-bg-hover: $brand-info-hover;\r\n$menu-warning-bg-hover: $brand-warning-hover;\r\n$menu-danger-bg-hover: $brand-danger-hover;\r\n$menu-dark-bg-hover: $brand-dark-hover;\r\n\r\n\r\n// breadcrumbs\r\n\r\n$breadcrumb-padding-vertical: 8px;\r\n$breadcrumb-padding-horizontal: 10px;\r\n$breadcrumb-separator: \"/\\00a0\";\r\n$breadcrumb-bg: transparent;\r\n$breadcrumb-margin-bottom: 10px;\r\n\r\n$breadcrumb-color: $brand-primary;\r\n$breadcrumb-active-color: $text-color;\r\n\r\n$breadcrumb-icon-margin-right: 10px;\r\n$breadcrumb-arrow-separator: \"\\00bb\\00a0\";\r\n\r\n$breadcrumb-bg-color: #f5f5f5;\r\n$breadcrumb-active-color: #777;\r\n$breadcrumb-separate-color: #ccc;\r\n\r\n// list-group\r\n$list-group-media-heading-font-size : $font-size-small;//14px\r\n$list-group-link-disabled-color : $disabled-color-base;\r\n\r\n$list-group-link-disabled-bg : $gray-lightest;\r\n\r\n$list-group-active-color : $brand-primary;\r\n$list-group-link-active-color : unquote(\"rgb(#{$color-white})\") !default;\r\n$list-group-link-active-bg : $brand-primary;\r\n\r\n\r\n$list-group-item-icon-margin-right : 10px;\r\n\r\n$list-group-bg-inherit-item-border : rgba(0, 0, 0, 0.075);\r\n$list-group-bg-inherit-item-hover-bg : rgba(0, 0, 0, 0.075);\r\n\r\n\r\n$list-group-border-radius: $border-radius-base;\r\n\r\n\r\n\r\n$list-group-link-color: $text-color;\r\n$list-group-link-hover-color: $text-color;\r\n$list-group-link-heading-color: $title-color;\r\n\r\n$list-group-hover-bg: $bg-color-base;\r\n\r\n$list-group-disabled-bg: transparent;\r\n\r\n$list-group-disabled-color: $disabled-color-base;\r\n\r\n\r\n$list-group-disabled-text-color: $list-group-disabled-color;\r\n$list-group-active-bg: transparent;\r\n$list-group-active-border: $list-group-active-bg;\r\n// $list-group-active-text-color: lighten($list-group-active-color, 40%);\r\n$list-group-active-text-color: $list-group-active-color;\r\n\r\n$list-group-bg: #fff;\r\n$list-group-border: transparent;\r\n// $list-group-bordered-border : $border-color-base;\r\n// $list-group-bordered-active-color : $component-active-color;\r\n// $list-group-bordered-active-bg : $component-active-bg;\r\n// $list-group-bordered-active-border : $list-group-bordered-active-bg;\r\n\r\n// $list-group-gap-item-margin-bottom : 2px;\r\n\r\n//step\r\n$steps-margin-bottom: $line-height-computed;\r\n$step-padding-horizontal:20px;\r\n$step-padding-vertical: 12px;\r\n\r\n$step-vertical-padding-horizontal: 20px;\r\n$step-vertical-padding-vertical:18px;\r\n\r\n$step-color: $gray;\r\n$step-bg: $bg-color-base;\r\n$step-number-bg: $gray-lighter;\r\n$step-number-color: $inverse;\r\n\r\n$step-current-color: $inverse;\r\n$step-current-bg: $brand-primary;\r\n\r\n$step-done-color: $inverse;\r\n$step-done-bg:$brand-success;\r\n\r\n$step-error-color: $inverse;\r\n$step-error-bg: $brand-danger;\r\n\r\n$step-disabled-color:$gray-light;\r\n\r\n$step-font-size: inherit;\r\n$step-title-font-size: 20px;\r\n$step-icon-font-size:27px;\r\n$step-number-font-size:24px;\r\n$step-number-size: 40px;\r\n\r\n$step-lg-padding-horizontal:20px;\r\n$step-lg-padding-vertical:20px;\r\n$step-lg-font-size: 16px;\r\n$step-lg-title-font-size:22px;\r\n$step-lg-icon-font-size: 32px;\r\n$step-lg-number-font-size:28px;\r\n$step-lg-number-size:46px;\r\n\r\n$step-sm-font-size: 12px;\r\n$step-sm-title-font-size: 18px;\r\n$step-sm-icon-font-size: 24px;\r\n$step-sm-number-font-size: 24px;\r\n$step-sm-number-size: 30px;\r\n\r\n$step-xs-font-size: 10px;\r\n$step-xs-title-font-size: 16px;\r\n$step-xs-icon-font-size: 22px;\r\n$step-xs-number-font-size: 20px;\r\n$step-xs-number-size: 24px;\r\n\r\n// blog nav\r\n$blognav-active-color:unquote(\"rgb(#{$primary-color})\");\r\n// widget\r\n$widget-padding-left:30px;\r\n$widget-padding-top:10px;\r\n\r\n\r\n// couter 数据统计\r\n\r\n$counter-number-color: $gray-darkest;\r\n$counter-number-font-size: 20px;\r\n$counter-icon-font-size: $counter-number-font-size;\r\n\r\n$counter-lg-number-font-size: 40px;\r\n$counter-md-number-font-size: 30px;\r\n$counter-sm-number-font-size: 14px;\r\n\r\n$counter-lg-icon-font-size: $counter-lg-number-font-size;\r\n$counter-md-icon-font-size: $counter-md-number-font-size;\r\n$counter-sm-icon-font-size: $counter-sm-number-font-size;\r\n\r\n$counter-inverse-color: $inverse;\r\n\r\n\r\n// navbar\r\n\r\n\r\n$menu-active-color: #108ee9;\r\n$menu-border-active-color: #108ee9;\r\n$menu-selected-bg-color: #eaf8fe;\r\n$menu-group-titil-color: #999;\r\n$menu-group-title-padding-left: 32px;\r\n$menu-color: #666;\r\n$menu-border-color: #d9d9d9;\r\n\r\n$navbar-default-bg-color: #f8f8f8;\r\n$navbar-default-border-color: #e7e7e7;\r\n$navbar-default-color: #777;\r\n$navbar-default-hover-color: #333;\r\n$navbar-inverse-hover-color: #fff;\r\n$navbar-inverse-color: #9d9d9d;\r\n$navbar-inverse-bg-color: #222;\r\n$navbar-inverse-border-color: #080808;\r\n$navbar-border-radius: 4px;\r\n\r\n$navbar-side-container-border-color: #d9d9d9;\r\n$navbar-side-container-width: 242px;\r\n$navbar-side-container-border-shadow: #d9d9d9;\r\n\r\n// Basics of a navbar\r\n$navbar-height: 50px;\r\n$navbar-margin-bottom: $line-height-computed;\r\n$navbar-border-radius: $border-radius-base;\r\n$navbar-padding-horizontal: floor(($grid-gutter-width / 2));\r\n$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2);\r\n$navbar-collapse-max-height: 340px;\r\n\r\n$navbar-avatar-margin-horizontal: (($navbar-height - 32px) / 2);\r\n\r\n$navbar-brand-padding-horizontal: 20px;\r\n$navbar-brand-logo-height: 32px;\r\n\r\n$navbar-default-color: $text-color;\r\n$navbar-default-bg: $inverse;\r\n$navbar-default-border: $border-color-base;\r\n\r\n// Navbar links\r\n$navbar-default-link-color: $text-color;\r\n$navbar-default-link-hover-color: $gray-darker;\r\n$navbar-default-link-hover-bg: rgba(238,238,238, 30%);\r\n$navbar-default-link-active-color: $navbar-default-link-hover-color;\r\n$navbar-default-link-active-bg: rgba(238,238,238, 60%);\r\n$navbar-default-link-disabled-color: $disabled-color-base;\r\n$navbar-default-link-disabled-bg: transparent;\r\n\r\n// Navbar brand label\r\n$navbar-default-brand-color: $title-color;\r\n$navbar-default-brand-hover-color: $navbar-default-brand-color;\r\n$navbar-default-brand-hover-bg: none;\r\n\r\n// Navbar toggle\r\n$navbar-default-toggle-hover-bg: $navbar-default-link-hover-bg;\r\n$navbar-default-toggle-icon-bar-bg: $navbar-default-color;\r\n$navbar-default-toggle-border-color: transparent;\r\n\r\n\r\n// Inverted navbar\r\n// Reset inverted navbar basics\r\n$navbar-inverse-bg: $brand-primary;\r\n$navbar-inverse-border: rgba(0, 0, 0, .1);\r\n\r\n// Inverted navbar links\r\n$navbar-inverse-link-color: $inverse;\r\n$navbar-inverse-link-hover-color: $inverse;\r\n$navbar-inverse-link-hover-bg: rgba(0, 0, 0, .1);\r\n$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color;\r\n$navbar-inverse-link-active-bg: $navbar-inverse-link-hover-bg;\r\n$navbar-inverse-link-disabled-color: $inverse;\r\n$navbar-inverse-link-disabled-bg: transparent;\r\n\r\n// Inverted navbar brand label\r\n$navbar-inverse-brand-color: $navbar-inverse-link-color;\r\n$navbar-inverse-brand-hover-color: $inverse;\r\n$navbar-inverse-brand-hover-bg: none;\r\n\r\n// Inverted navbar toggle\r\n$navbar-inverse-toggle-hover-bg: $navbar-inverse-link-hover-bg;\r\n$navbar-inverse-toggle-icon-bar-bg: $inverse;\r\n$navbar-inverse-toggle-border-color: transparent;\r\n\r\n//hamburger\r\n$hamburger-size: 17px;\r\n\r\n\r\n//panel\r\n$panel-header-padding : 10px 15px;\r\n$panel-footer-padding : 10px 15px;\r\n$panel-body-padding : 15px 15px;\r\n$panel-header-bg-color : #f5f5f5;\r\n$panel-footer-bg-color : #f5f5f5;\r\n$panel-bg-color : #fff;\r\n$panel-default-color : #757575;\r\n$panel-inner-border-color: #ddd;\r\n\r\n\r\n//modal\r\n$modal-header-padding : 15px;\r\n$modal-body-padding : 15px;\r\n$modal-footer-padding : 15px;\r\n$modal-content-bg-color: #fff;\r\n$modal-backdrop-bg: #000;\r\n$modal-backdrop-opacity: .6;\r\n$modal-header-border-color: transparent;\r\n$modal-footer-border-color: transparent;\r\n$modal-xlg: 976px;\r\n$modal-lg: 800px;\r\n$modal-sm: 400px;\r\n$modal-default: 600px;\r\n$modal-border-radius: $border-radius-base;\r\n\r\n//notification\r\n\r\n$zIndex-notification: $zIndex-notification;\r\n$notification-top: 30px;\r\n$notification-bottom: 30px;\r\n$notification-right: 30px;\r\n$notification-width: 300px;\r\n$notification-text-margin-right: 15px;\r\n$notice-padding: 15px;\r\n$notice-background: $gray-darkest;\r\n$notice-bottom: 15px;\r\n\r\n//message\r\n\r\n$message-font-size: 12px;\r\n\r\n$message-right: 30px;\r\n$message-width: 300px;\r\n$message-text-margin-right: 15px;\r\n$message-padding: 0;\r\n$message-content-padding: 15px;\r\n$message-background: $gray-darkest;\r\n\r\n//popconfirm\r\n\r\n$popconfirm-max-width: 300px;\r\n\r\n$popconfirm-dark-bg: $gray-darkest;\r\n$popconfirm-fallback-dark-border-color: $gray-darkest;\r\n$popconfirm-margin: 10px;\r\n$popconfirm-title-bg: #fff;\r\n$popconfirm-border-color:$border-color-base;\r\n$popconfirm-arrow-width: 10px;\r\n$popconfirm-arrow-color: $border-color-base;\r\n$popconfirm-arrow-outer-width: 0;\r\n$popconfirm-arrow-outer-color: $border-color-base;\r\n$popconfirm-border-right-color: $border-color-base;\r\n$popconfirm-fallback-border-color: #fff;\r\n\r\n//select\r\n\r\n$select-bg-color: #fff;\r\n$select-border-color: $border-color-base;\r\n$select-border-radius: $border-radius-base;\r\n$select-color: $font-color-base;\r\n$select-font-size: 12px;\r\n$select-dropdown-color: #666;\r\n$select-dropdown-bg-color: #fff;\r\n$select-dropdown-hover-bg: $hover-bg-color-base;\r\n$select-dropdown-selected-bg: $selected-bg-color-base;\r\n$select-dropdown-selected-color: rgb(134, 119, 119);\r\n$select-dropwdown-item-padding: 7px 16px;\r\n$select-disabled-color: $disabled-color-base;\r\n$select-disabled-bg: #f7f7f7;\r\n$select-disabled-border-color: #d9d9d9;\r\n//dropdown\r\n\r\n$dropdown-item-hover-bg-color: unquote(\"rgb(#{$palette-grey-100})\");\r\n$dropdown-item-divier-bg-color: $gray-lighter;\r\n$dropdown-border-color: $border-color-base;\r\n$dropdown-border-radius:3px;\r\n$dropdown-shadow: 0 1px 5px $dropdown-border-color;\r\n$dropdown-margin: 5px 0 0 0;\r\n$dropdown-menu-item-padding: 0px 16px 0 28px;\r\n$dropdown-menu-font-size: 12px;\r\n$dropdown-menu-item-height: 42px;\r\n$dropdown-menu-item-light-height: 42px;\r\n$dropdown-menu-title-font-size: 12px;\r\n$dropdown-menu-title-color: $disabled-color-base;\r\n$dropdown-menu-title-padding:8px 16px;\r\n$dropdown-menu-title-line-height: 1.5;\r\n\r\n//upload\r\n\r\n$upload-list-color: #108ee9;\r\n$upload-list-bg : #fff;\r\n$upload-list-hover-bg: #e7f4fd;\r\n$upload-list-error-color: #f50;\r\n$upload-thumbnail-height: 48px;\r\n$upload-thumbnail-width: 48px;\r\n$upload-thumbnail-img-height: 48px;\r\n$upload-thumbnail-img-width: 48px;\r\n\r\n//loading\r\n\r\n$loading-loadprimary: rgb(63, 81, 181);\r\n$loading-loadsuccess: #4caf50;\r\n$loading-loadwarn: rgb(255, 152, 0);\r\n$loading-lineanimating: (\r\n 1:line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 2:line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 3:line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 4:line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 5:line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08)\r\n);\r\n$loading-linebackcolor: (\r\n 1: #F44336,\r\n 2: #7ED321,\r\n 3: #0084FF,\r\n 4: #FF9800,\r\n 5: #D0021B\r\n);\r\n$loading-back-width: 120px;\r\n$loading-back-height:110px;\r\n$loading-desc-font-size: 16px;\r\n$loading-desc-color: #cecece;\r\n$loading-rotate-bor:#c2c3c5;\r\n\r\n//两种加载的尺寸 width height\r\n$loading-rotate-sm-size: 25px;\r\n$loading-rotate-size:40px;\r\n$loading-rotate-lg-size:60px;\r\n\r\n$loading-line-sm-width: 4px;\r\n$loading-line-sm-height:35px;\r\n$loading-line-width:6px;\r\n$loading-line-height:50px;\r\n$loading-line-lg-width:8px;\r\n$loading-line-lg-height:90px ;\r\n\r\n//居中位置top left\r\n$loading-center-top:50%;\r\n$loading-center-left:50%;\r\n\r\n$loading-rotate-center-sm: -15px ;\r\n$loading-rotate-center:-22px;\r\n$loading-rotate-center-lg:-35px ;\r\n\r\n$loading-line-center-sm-top: -22px;\r\n$loading-line-center-sm-left:-20px;\r\n$loading-line-center-top:-30px;\r\n$loading-line-center-left:-25px;\r\n$loading-line-center-lg-top:-50px;\r\n$loading-line-center-lg-left:-30px;\r\n\r\n\r\n//switch\r\n\r\n\r\n//color\r\n$switch-border-color: $gray-lighter;\r\n$switch-back-color: $gray-lighter;\r\n$switch-checked-borColor: $brand-primary;\r\n$switch-checked-backColor: $brand-primary;\r\n\r\n// border-radius of different state switch\r\n$switch-border-radius: 20px;\r\n$switch-border-radius-after: 18px;\r\n\r\n// width height line-height of the three switches\r\n$switch-width: (default:44px, small:32px, large:60px);\r\n$switch-height: (default:22px, small:16px, large:30px);\r\n$switch-lineHeight: (default:20px, small:12px, large:12px);\r\n\r\n// style of u-switch-inner\r\n$switch-inner-fontSize: (default:12px, small:10px, large:18px);\r\n$switch-inner-left: (default:22px, small:16px, large:30px);\r\n$switch-inner-largeTop: 8px;\r\n\r\n// style of u-switch:active:after\r\n$switch-active-width: (default:24px, small:16px, large:32px);\r\n\r\n// style of u-switch:after\r\n$switch-after-widthHeight: 18px;\r\n$switch-after-widthHeight-sm: 14px;\r\n$switch-after-widthHeight-lg: 26px;\r\n$switch-after-top: 1px;\r\n$switch-after-top-sm: 0;\r\n$switch-after-top-lg: 1px;\r\n$switch-after-left: 0;\r\n$switch-after-left-sm: 0;\r\n$switch-after-left-lg: 0;\r\n\r\n// style of u-switch.is-checked\r\n$switch-checked-innerLeft: (default:8px, small:4px, large:8px);\r\n$switch-checked-afterLeft: (default:24px, small:16px, large:32px);\r\n$switch-checked-activeLeft: (default:16px, small:10px, large:26px);\r\n\r\n$switch-primary-bg: $brand-primary;\r\n$switch-dark-bg: $brand-dark;\r\n$switch-success-bg: $brand-success;\r\n$switch-warning-bg: $brand-warning;\r\n$switch-danger-bg: $brand-danger;\r\n$switch-info-bg: $brand-info;\r\n\r\n//tabs\r\n\r\n$tabs-basic-back: #f5f5f5;\r\n$tabs-cls-color: #666;\r\n$tabs-cls-width: 900px;\r\n$tabs-simple-conHeight: 120px;\r\n$tabs-simple-conPad: 16px;\r\n$tabs-simple-conWidth: 100%;\r\n\r\n$tabs-fontSize: (simple:14px, fill:14px, turn:14px, slide:14px, fade:14px, fadeup:14px);\r\n$tabs-lineHeight: (simple:2.3, fill:2.3, turn:2.3, slide:2.3, fade:2.3, fadeup:2.3);\r\n$tabs-marginBottom: -1px;\r\n\r\n$tabs-simple-tab: (padding:0 16px, margin:5px 0 5px 5px, radius:0 0 0 0, back:#fff);\r\n$tabs-simple-tabBorder: 1px solid #fff;\r\n$tabs-simple-activeBorder: 1px solid $brand-primary;\r\n$tabs-simple-activeColor: #fff;\r\n$tabs-simple-activeBorBottom: 1px solid $brand-primary;\r\n$tabs-simple-activeTopRadius: 5px;\r\n$tabs-simple-fontWeight: bold;\r\n\r\n$tabs-fill-tab: (padding: 0 16px, color:#666, back:#fff, afterBack:#d2d8d6, activeBack:$brand-primary);\r\n$tabs-fill-tab-maright: 5px;\r\n$tabs-fill-after-top: 0;\r\n$tabs-fill-after-left: 0;\r\n$tabs-fill-after-width: 100%;\r\n$tabs-fill-after-height: 100%;\r\n$tabs-fill-fontWeight: bold;\r\n\r\n$tabs-turn-tab: (padding: 0 16px, color:#fff, back:#f5f5f5, afterBack:$brand-primary, activeBack:$brand-primary);\r\n$tabs-turn-after-top: 0;\r\n$tabs-turn-after-left: 0;\r\n$tabs-turn-after-width: 100%;\r\n$tabs-turn-after-height: 100%;\r\n$tabs-turn-beforeBot: 32px;\r\n$tabs-turn-beforeRight: 15px;\r\n$tabs-turn-fontWeight: bold;\r\n$tabs-moveleft-conHeight: 120px;\r\n$tabs-moveleft-conPad: 16px;\r\n\r\n$tabs-slide-tabs: (width:25%, padding: 0 16px, back:#f5f5f5);\r\n$tabs-slide-child-bottom: 0;\r\n$tabs-slide-child-left: 0;\r\n$tabs-slide-child-height: 4px;\r\n$tabs-slide-child-back: $brand-primary;\r\n$tabs-slide-fontWeight: bold;\r\n\r\n$tabs-fade-tab: (marLeft:5px, marTop:5px, color:#666, padding:0 16px, radius:0 0 0 0);\r\n$tabs-fade-conPad: 16px;\r\n$tabs-fade-conBor: 5px;\r\n\r\n$tabs-fadeup-tab: (marTop:5px, color:#666, padding:0 16px, radius:0 0 0 0);\r\n$tabs-fadeup-top: -5px;\r\n$tabs-fadeup-left: 0;\r\n$tabs-fadeup-width: 100%;\r\n$tabs-fadeup-height: 100%;\r\n$tabs-fadeup-color: #666;\r\n$tabs-fadeup-conHeight: 120px;\r\n$tabs-fadeup-conPad: 16px;\r\n\r\n\r\n//rate\r\n$rate-star-default-color:$gray-lightest;\r\n$rate-star-active-color:$brand-primary;\r\n$rate-star-marginRight:8px;\r\n//backtop\r\n$back-top-padding:5px;\r\n$backtop-background:unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$backtop-color:unquote(\"rgb(#{$color-white})\") !default;\r\n$backtop-right:10px;\r\n$backtop-bottom:10px;\r\n$backtop-dom-right:40px;\r\n\r\n\r\n//dnd\r\n$dnd-list-background:unquote(\"rgb(#{$palette-grey-400})\")!default;\r\n$dnd-list-padding:8px;\r\n$dnd-list-dragging-background:unquote(\"rgb(#{$palette-light-blue-A200})\")!default;\r\n$dnd-item-color:unquote(\"rgb(#{$color-black})\")!default;\r\n$dnd-item-padding:16px;\r\n$dnd-item-margin:4px;\r\n$dnd-item-background:unquote(\"rgb(#{$palette-grey-500})\")!default;\r\n$dnd-item-dragging-background:unquote(\"rgb(#{$palette-blue-300})\")!default;\r\n\r\n// bee-tree\r\n$tree-checkbox-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$tree-node-bg-color: $hover-bg-color-base !default;\r\n\r\n// bee-table\r\n$table-head-background-color: unquote(\"rgb(#{$table-header-background-color})\") !default;\r\n$table-head-text-color: unquote(\"rgb(#{$table-header-text-color})\") !default;\r\n\r\n// bee-transfer\r\n$transfer-border-gap-color:#d9d9d9;\r\n\r\n// bee-transfer\r\n$cascader-border-gap-color:#ccc;","@import \"../node_modules/tinper-bee-core/scss/minxin-variables\";\r\n@import \"../node_modules/tinper-bee-core/scss/minxin-mixins\";\r\n\r\n\r\n$loading-icon-color: #0084ff;\r\n\r\n/**\r\n * 加载背景\r\n */\r\n//.u-loading-back{\r\n// position:relative;\r\n// text-align: center;\r\n// width:$loading-back-width;\r\n// height:$loading-back-height;\r\n// margin:0 auto;\r\n// &.light{\r\n// background: #fff;\r\n// }\r\n// &.dark{\r\n// background: #000;\r\n// }\r\n//}\r\n/**\r\n * 文字\r\n */\r\n.u-loading-desc {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n font-size: $loading-desc-font-size;\r\n color: #000;\r\n text-align: center;\r\n}\r\n\r\n\r\n/**\r\n * default样式 单个圆圈加载\r\n */\r\n\r\n.u-loading {\r\n &.u-loading-rotate {\r\n & > div {\r\n position: absolute;\r\n border-radius: 100%;\r\n margin: 2px;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n // border: 2px solid #0084ff;\r\n // border-bottom-color: transparent;\r\n width: $loading-rotate-size;\r\n height: $loading-rotate-size;\r\n top: $loading-center-top;\r\n left: $loading-center-left;\r\n margin-left: $loading-rotate-center;\r\n margin-top: $loading-rotate-center;\r\n background: transparent !important;\r\n display: inline-block;\r\n -webkit-animation: rotate 1.5s 0s linear infinite;\r\n animation: rotate 1.5s 0s linear infinite;\r\n text-align: center;\r\n line-height: $loading-rotate-size;\r\n & > .uf{\r\n color: $loading-icon-color;\r\n font-size: 40px;\r\n padding: 0;\r\n }\r\n }\r\n &.u-loading-rotate-lg {\r\n & > div {\r\n margin-left: $loading-rotate-center-lg;\r\n margin-top: $loading-rotate-center-lg;\r\n width: $loading-rotate-lg-size;\r\n height: $loading-rotate-lg-size;\r\n line-height: $loading-rotate-lg-size;\r\n & > .uf{\r\n font-size: 60px;\r\n }\r\n }\r\n }\r\n &.u-loading-rotate-sm {\r\n & > div {\r\n margin-left:$loading-rotate-center-sm;\r\n margin-top: $loading-rotate-center-sm;\r\n width: $loading-rotate-sm-size;\r\n height:$loading-rotate-sm-size;\r\n line-height: $loading-rotate-sm-size;\r\n & > .uf{\r\n font-size: 25px;\r\n }\r\n }\r\n }\r\n &.u-loading-rotate-primary {\r\n & > div > .uf{\r\n color: $loading-loadprimary;\r\n // border: 2px solid $loading-loadprimary;\r\n // border-bottom-color: transparent;\r\n }\r\n }\r\n &.u-loading-rotate-success {\r\n & > div > .uf{\r\n color: $loading-loadsuccess;\r\n // border: 2px solid $loading-loadsuccess;\r\n // border-bottom-color: transparent;\r\n }\r\n }\r\n &.u-loading-rotate-warning {\r\n & > div > .uf{\r\n color: $loading-loadwarn;\r\n // border: 2px solid $loading-loadwarn;\r\n // border-bottom-color: transparent;\r\n }\r\n }\r\n }\r\n\r\n}\r\n\r\n.u-loading-backdrop{\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n z-index: 1900;\r\n opacity: .7;\r\n filter: blur(.5px);\r\n background-color: #fff;\r\n &.full-screen{\r\n position: fixed;\r\n }\r\n}\r\n\r\n@keyframes rotate {\r\n 0% {\r\n -webkit-transform: rotate(0deg) scale(1);\r\n transform: rotate(0deg) scale(1);\r\n }\r\n\r\n 50% {\r\n -webkit-transform: rotate(180deg) scale(1);\r\n transform: rotate(180deg) scale(1);\r\n }\r\n\r\n 100% {\r\n -webkit-transform: rotate(360deg) scale(1);\r\n transform: rotate(360deg) scale(1);\r\n }\r\n}\r\n\r\n.u-loading {\r\n &.u-loading-line {\r\n position: absolute;\r\n top:$loading-center-top;\r\n left: $loading-center-left;\r\n margin-top: $loading-line-center-top;\r\n margin-left: $loading-line-center-left;\r\n & > div {\r\n background-color: #C2C3C5;\r\n width: $loading-line-width;\r\n height: $loading-line-height;\r\n border-radius: 2px;\r\n margin: 2px;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n display: inline-block;\r\n }\r\n &.u-loading-line-lg {\r\n margin-top: $loading-line-center-lg-top;\r\n margin-left: $loading-line-center-lg-left;\r\n & > div {\r\n width: $loading-line-lg-width;\r\n height: $loading-line-lg-height;\r\n }\r\n }\r\n &.u-loading-line-sm {\r\n margin-top: $loading-line-center-sm-top;\r\n margin-left: $loading-line-center-sm-left;\r\n & > div {\r\n width:$loading-line-sm-width;\r\n height: $loading-line-sm-height;\r\n }\r\n }\r\n @each $index, $anima in $loading-lineanimating {\r\n div:nth-child( #{$index} ) {\r\n -webkit-animation: $anima;\r\n animation: $anima;\r\n background-color: map_get($loading-linebackcolor, $index);\r\n }\r\n }\r\n\r\n &.u-loading-line-primary {\r\n & > div {\r\n background-color: $loading-loadprimary;\r\n }\r\n }\r\n &.u-loading-line-success {\r\n & > div {\r\n background-color: $loading-loadsuccess;\r\n }\r\n }\r\n &.u-loading-line-warning {\r\n & > div {\r\n background-color: $loading-loadwarn;\r\n }\r\n }\r\n }\r\n}\r\n@keyframes line-scale {\r\n 0% {\r\n -webkit-transform: scaley(1);\r\n transform: scaley(1);\r\n }\r\n\r\n 50% {\r\n -webkit-transform: scaley(0.4);\r\n transform: scaley(0.4);\r\n }\r\n\r\n 100% {\r\n -webkit-transform: scaley(1);\r\n transform: scaley(1);\r\n\r\n }\r\n}\r\n","@import \"../node_modules/tinper-bee-core/scss/minxin-variables\";\n@import \"../node_modules/tinper-bee-core/scss/minxin-mixins\";\n@import \"../node_modules/bee-loading/src/Loading\";\n\n$text-color: #666;\n$font-size-base: 12px;\n$line-height: 1.5;\n// 主题定制border:\n$table-border-color: unquote(\"rgb(#{$table-border-color-base})\");\n// $table-head-background-color: #f7f7f7;\n// $table-head-text-color: #666;\n$vertical-padding: 12px;\n$horizontal-padding: 8px;\n// $table-border-color: #e9e9e9;\n\n$table-hover-color: #E7F2FC;\n$table-move-in-color: $bg-color-base;\n$checkbox-height:16px;\n.u-table {\n font-size: $font-size-base;\n color: $text-color;\n // transition: opacity 0.3s ease;\n position: relative;\n line-height: $line-height;\n overflow: hidden;\n &-body{\n // overflow: hidden!important;\n position: relative;\n }\n &-hiden-drag{\n position: relative;\n &-li{\n position: absolute;\n top: 0px;\n left: 0px;\n // height: 10px;//这个高度先注释掉了,加上后,在火狐浏览器上会站位置。滚动条拉到最右边有错行\n }\n }\n table {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n }\n\n th {\n // background: $table-head-background-color;\n font-weight: bold;\n text-align: left;\n // transition: background 0.3s ease;\n &[colspan] {\n text-align: center;\n }\n ::last-child{\n overflow: hidden;\n }\n }\n\n td {\n border-bottom: 1px solid $table-border-color;\n a{\n color: #2196F3;\n &:hover{\n color: #1565c0;\n }\n &:active{\n color: #1565c0;\n }\n }\n }\n\n tr {\n // transition: all 0.3s ease;\n &:hover {\n // background: $hover-bg-color-base;\n td {\n .uf-eye{\n visibility: visible !important;\n }\n }\n }\n tr a{\n color: #2196F3;\n &:hover{\n color: #1565c0;\n }\n &:active{\n color: #1565c0;\n }\n }\n }\n tr.tr-row-hover {\n background: $hover-bg-color-base;\n }\n\n th,\n td {\n padding: $vertical-padding $horizontal-padding;\n word-break: break-all;\n }\n tr {\n \n &.filterable{\n th{\n padding-top: 4px;\n padding-bottom: 4px;\n .filterContext{\n height: 35px;\n }\n }\n }\n }\n &-row-hover {\n background:unquote(\"rgb(#{$table-row-hover-bg-color})\");\n }\n \n &-scroll {\n overflow: auto;\n }\n &-bordered {\n table {\n border: 1px solid $table-border-color;\n box-sizing: border-box;\n table-layout: fixed;\n // width:auto;\n }\n th {\n border-bottom: 1px solid $table-border-color;\n box-sizing: border-box;\n }\n th,\n td {\n border-right: 1px solid $table-border-color;\n box-sizing: border-box;\n }\n }\n &-drag-border{\n tr {\n th.th-can-not-drag{ //拖拽tag影响了表格整体宽度\n overflow: hidden;\n }\n }\n }\n &-header {\n overflow: hidden;\n background: $table-head-background-color;\n color: $table-head-text-color;\n }\n\n &.fixed-height td {\n padding: 0px 8px;\n }\n\n &-fixed-header &-body {\n background: #fff;\n position: relative;\n }\n &-fixed-left &-body-inner {\n margin-right: -20px;\n padding-right: 20px;\n }\n\n &-fixed-header &-fixed-left &-body-inner {\n padding-right: 0px;\n }\n\n &-fixed-header &-body-inner {\n height: 100%;\n overflow: scroll;\n }\n\n\n &-fixed-header &-scroll &-header {\n overflow-x: scroll;\n padding-bottom: 20px;\n margin-bottom: -20px;\n overflow-y: scroll;\n box-sizing: border-box;\n }\n\n &-title {\n padding: $vertical-padding $horizontal-padding;\n border-top: 1px solid $table-border-color;\n }\n\n &-content {\n position: relative;\n }\n\n &-footer {\n padding: $vertical-padding $horizontal-padding;\n border-bottom: 1px solid $table-border-color;\n .u-table-scroll{\n overflow-x: hidden;\n }\n }\n &-footer & {\n margin: (-$vertical-padding) (-$horizontal-padding);\n }\n\n &-placeholder {\n padding: $vertical-padding 8px;\n background: #fff;\n border-bottom: 1px solid $table-border-color;\n text-align: center;\n position: relative;\n }\n\n &-expand-icon-col {\n width: 10px;\n }\n &-row,\n &-expanded-row {\n &-expand-icon {\n cursor: pointer;\n display: inline-block;\n margin-right: 0px;\n width: 16px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n border: 1px solid $table-border-color;\n user-select: none;\n background: #fff;\n margin-right: 10px;\n }\n &-spaced {\n visibility: hidden;\n }\n &-spaced:after {\n content: \".\";\n }\n\n &-expanded:after {\n content: \"-\";\n }\n\n &-collapsed:after {\n content: \"+\";\n }\n }\n &-row{\n &.selected{\n background: $hover-bg-color-base;\n }\n }\n tr.u-table-expanded-row {\n background: #f7f7f7;\n &:hover {\n background: #f7f7f7;\n }\n .u-table {\n // padding: 0 40px 0 20px;\n z-index: 1;\n }\n }\n &-column-hidden {\n display: none;\n }\n &-prev-columns-page,\n &-next-columns-page {\n cursor: pointer;\n color: #666;\n z-index: 1;\n &:hover {\n color: #2db7f5;\n }\n &-disabled {\n cursor: not-allowed;\n color: #999;\n &:hover {\n color: #999;\n }\n }\n }\n &-prev-columns-page {\n margin-right: 8px;\n &:before {\n content: \"<\";\n }\n }\n &-next-columns-page {\n float: right;\n &:before {\n content: \">\";\n }\n }\n\n &-fixed-left,\n &-fixed-right {\n position: absolute;\n top: 0;\n overflow: hidden;\n z-index: 1;\n table {\n width: auto;\n background: #fff;\n }\n }\n\n &-fixed-left {\n left: 0;\n box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);\n &-body-inner {\n margin-right: -20px;\n padding-right: 20px;\n }\n &-fixed-header & &-body-inner {\n padding-right: 0;\n }\n }\n\n &-fixed-right {\n right: 0;\n box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1);\n\n // hide expand row content in right fixed Table\n // https://github.com/ant-design/ant-design/issues/1898\n &-expanded-row {\n color: transparent;\n pointer-events: none;\n }\n \n }\n \n &-scroll-position-left &-fixed-left {\n box-shadow: none;\n }\n\n &-scroll-position-right &-fixed-right {\n box-shadow: none;\n }\n\n &-thead{\n .filter-text,.filter-dropdown,.filter-date {\n font-weight: normal;\n }\n .filter-wrap{\n display: flex;\n justify-content: center;\n align-items: center;\n .filter-btns{\n min-width: 58px;\n }\n }\n th{\n background: $table-head-background-color;\n color: $table-head-text-color;\n background-clip:padding-box;\n //禁止选中文字\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none; \n /*\n Introduced in IE 10. \n */\n -ms-user-select: none;\n user-select: none;\n\n // overflow: hidden;\n // white-space: nowrap;\n // text-overflow: ellipsis;\n .bee-table-column-sorter {\n position: relative;\n margin-left: 4px;\n height: 1em;\n vertical-align: middle;\n text-align: center;\n display: inline-block;\n \n & > .bee-table-column-sorter-down,\n & > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat {\n line-height: 6px;\n display: block;\n width: 34px;\n cursor: pointer;\n }\n \n }\n\n .bee-table-column-sorter-down.on .uf-triangle-down,\n .bee-table-column-sorter-down.on .uf-triangle-up,\n .bee-table-column-sorter-up.on .uf-triangle-down,\n .bee-table-column-sorter-up.on .uf-triangle-up {\n color: #108ee9;\n }\n .bee-table-column-sorter .uf-triangle-down,\n .bee-table-column-sorter .uf-triangle-up {\n -webkit-filter: none;\n filter: none;\n font-size: 12px;\n }\n .bee-table-column-sorter .uf-triangle-down,\n .bee-table-column-sorter .uf-triangle-up {\n display: inline-block;\n padding: 0;\n font-size: 12px;\n font-size: 8px\\9;\n -webkit-transform: scale(0.66666667) rotate(0deg);\n -ms-transform: scale(0.66666667) rotate(0deg);\n transform: scale(0.66666667) rotate(0deg);\n -ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)\";\n zoom: 1;\n line-height: 4px;\n height: 4px;\n color: #999;\n // -webkit-transition: all 0.3s;\n // transition: all 0.3s;\n }\n &:hover{\n .bee-table-column-sorter {\n display: inline-block;\n }\n }\n }\n .th-drag{\n cursor: move;\n }\n .th-drag:hover{\n background: $hover-bg-color-base;\n }\n //为了区分是拖拽宽度还是交换列,先注释上面了\n // .th-drag:hover{\n // background:#ccc;\n // }\n .th-drag-hover{ \n background: #ccc;\n }\n &-th{\n position: relative;\n\n &-drag-gap{\n height: 100%;\n position: absolute;\n right: -10px;\n top: 0;\n // background:transparent;\n // width: 1px;\n // background:#ccc;\n width: 20px;\n \n box-sizing: border-box;\n z-index: 1;\n\n .online{\n height: 100%;\n width: 1px;\n background:transparent;//兼容火狐浏览器,如果table设置border,\n margin: 0 auto;\n }\n .online-hover{\n background:#000000;\n }\n \n }\n &-drag-gap:hover{\n cursor: col-resize;\n .online{\n background: #000000\n }\n }\n }\n &-th:last-child {\n &-drag-gap{\n border: none;\n }\n }\n }\n\n\n &-filter-column{\n \n &-pop-cont{\n margin: 0px;\n max-height: 300px;\n overflow-y: scroll;\n }\n &-clear-setting{ \n // border-bottom: 1px solid #ccc;\n // cursor: pointer;\n margin-bottom: 4px;\n }\n &-cont{\n position: relative;\n }\n &-filter-icon{\n position: absolute;\n top: 8px;\n right: 18px;\n width: 22px;\n height: 25px;\n line-height: 25px;\n z-index: 2;\n background: $table-head-background-color;\n text-align: center;\n cursor: pointer;\n i.uf{\n padding: 0px;\n }\n }\n &-pop-cont-item{\n margin-top: 8px;\n // line-height: 30px;\n cursor: pointer;\n .u-checkbox {\n margin: 0px;\n\n }\n }\n &-pop-cont-item>span{\n margin-left: -3px;\n width: 132px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n vertical-align: middle;\n }\n &-pop .u-modal-dialog{\n border: 1px solid #ccc;\n background: #fff;\n }\n }\n //拖拽宽度代码\n &-row-fixed-columns-in-body{\n // visibility: hidden;\n display:none;\n pointer-events: none;\n }\n //固定列含有checkbox 样式复写\n .u-checkbox {\n height: $checkbox-height;\n line-height: $checkbox-height;\n margin:0px;\n }\n}\n.u-table:focus{\n outline: none;\n // border-color: #9ecaed;\n // box-shadow: 0 0 10px #9ecaed;\n box-shadow: 0 0 0;\n}\n\n .u-table-bordered {\n .u-table-drag-gap{\n background:#e9e9e9;\n }\n }\n.u-table.bordered {\n table {\n border-collapse: collapse;\n }\n th,\n td {\n border: 1px solid $table-border-color;\n }\n}\n\n.move-enter,\n.move-appear {\n opacity: 0;\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-duration: 2.5s;\n animation-fill-mode: both;\n animation-play-state: paused;\n}\n\n.move-leave {\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-duration: 0.5s;\n animation-fill-mode: both;\n animation-play-state: paused;\n}\n\n.move-enter.move-enter-active,\n.move-appear.move-enter-active {\n animation-name: moveLeftIn;\n animation-play-state: running;\n}\n\n.move-leave.move-leave-active {\n animation-name: moveRightOut;\n animation-play-state: running;\n}\n\n@keyframes moveLeftIn {\n 0% {\n transform-origin: 0 0;\n transform: translateX(30px);\n opacity: 0;\n background: $table-move-in-color;\n }\n 20% {\n transform-origin: 0 0;\n transform: translateX(0);\n opacity: 1;\n }\n 80% {\n background: $table-move-in-color;\n }\n 100% {\n background: transparent;\n opacity: 1;\n }\n}\n\n@keyframes moveRightOut {\n 0% {\n transform-origin: 0 0;\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform-origin: 0 0;\n transform: translateX(-30px);\n opacity: 0;\n }\n}\n\n.formItem-style {\n height: unset;\n min-height: unset;\n padding: 0;\n}\n.errMessage-style {\n display: none;\n border: none;\n /* margin-top: 5px; */\n /* margin-bottom: 5px; */\n background: transparent;\n color: #f22c1d;\n /* padding-left: 12px; */\n /* padding-right: 12px; */\n margin: 0;\n position: absolute;\n padding: 0;\n top: 3px;\n right: 0;\n}\n\n.editable-cell {\n position: relative;\n}\n\n.editable-cell-input-wrapper,\n.editable-cell-text-wrapper {\n padding-right: 24px;\n}\n.editable-cell-input-wrapper {\n .u-form-item.formItem-style .u-label{\n display: none;\n }\n .u-input-group .u-form-control{\n height: 26px;\n font-size: 12px;\n }\n}\n\n.editable-cell-text-wrapper {\n padding: 5px 24px 5px 5px;\n height: 30px;\n}\n\n.editable-cell-icon,\n.editable-cell-icon-check {\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n cursor: pointer;\n}\n\n.editable-cell-icon {\n line-height: 28px;\n display: none;\n}\n\n.editable-cell-icon-check {\n line-height: 28px;\n}\n\n.editable-cell:hover .editable-cell-icon {\n display: inline-block;\n}\n\n.editable-cell-icon:hover,\n.editable-cell-icon-check:hover {\n color: #2db7f5;\n}\n\n.editable-add-btn {\n margin-bottom: 8px;\n}\n\n.search-component {\n margin-bottom: 20px;\n .empty-search {\n position: absolute;\n right: 45px;\n z-index: 20;\n top: 5px;\n color: #524e4e;\n cursor: pointer;\n }\n &.u-input-group.simple {\n float: right;\n }\n &.u-input-group.simple .u-form-control {\n width: 251px;\n background: #f5f5f5;\n border-color: #f5f5f5;\n border-radius: 20px;\n }\n &.u-input-group.simple .u-input-group-btn {\n top: 3px;\n right: 20px;\n position: absolute;\n }\n}\n\n\n.col-resize-container {\n height: 0px;\n position: relative;\n\n & + .table-col-resizer:first-of-type {\n table-layout: fixed;\n }\n\n .active-drag .icon{\n visibility: visible;\n }\n\n .last-handle {\n display: none;\n }\n\n .drag-handle {\n margin-left: -5px;\n position: absolute;\n z-index: 5;\n width: 10px;\n cursor: col-resize;\n\n .icon {\n color: #40b0dc;\n top: -1px;\n position: absolute;\n visibility: hidden;\n\n &:first-child {\n left: -2px\n }\n &:last-child {\n left: 6px\n }\n }\n\n &:hover{\n .icon{\n visibility: visible;\n }\n .col-resizer {\n border: 1px solid;\n }\n }\n\n &.disabled-drag {\n cursor: default;\n display: none;\n }\n\n .col-resizer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0px;\n left: 3px;\n }\n }\n}\n\n.u-filter-dropdown-menu-wrap {\n z-index: 1800;\n .u-dropdown-menu {\n li.u-dropdown-menu-item {\n line-height: 32px;\n height: 32px;\n padding: 0px 16px 0 16px;\n cursor: pointer;\n }\n }\n}\n\n.u-row-hover{\n position: absolute;\n right: 24px;\n display: none;\n align-items: center;\n justify-content: center;\n background: transparent;\n}\n\n.u-row-hover2{\n position: absolute;\n left: 100;\n}\n\n// 滚动条样式复写\n::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n::-webkit-scrollbar-button {\n display: none;\n}\n::-webkit-scrollbar-thumb {\n background: #d5d5d5 !important;\n border-radius: 5px;\n}\n::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: #d5d5d5;\n position: absolute;\n}\n\n::-webkit-scrollbar-track {\n display: none;\n}\n\n::-webkit-scrollbar-track-piece {\n display: none;\n}","// @import \"../node_modules/tinper-bee-core/scss/index.scss\";\n// @import \"../node_modules/bee-panel/src/Panel.scss\";\n// @import \"../node_modules/bee-layout/src/Layout.scss\";\n// @import \"../node_modules/bee-button/src/Button.scss\";\n// @import \"../node_modules/bee-transition/src/Transition.scss\";\n// @import \"../node_modules/bee-popconfirm/src/Popconfirm.scss\";\n// @import \"../node_modules/bee-form-control/src/FormControl.scss\";\n// @import \"../node_modules/bee-pagination/src/Pagination.scss\";\n// @import \"../node_modules/bee-checkbox/src/Checkbox.scss\";\n// @import \"../node_modules/bee-select/src/Select.scss\";\n// @import \"../node_modules/bee-form/src/Form.scss\";\n// @import \"../node_modules/bee-popover/src/Popover.scss\";\n// @import \"../node_modules/bee-tooltip/src/Tooltip.scss\";\n// @import \"../node_modules/bee-message/build/Message.css\";\n// @import \"../node_modules/bee-dropdown/build/Dropdown.css\";\n// @import \"../node_modules/bee-input-number/build/InputNumber.css\";\n// @import \"../node_modules/bee-modal/build/Modal.css\";\n@import \"../src/Table.scss\";\n\n\n//引入日期控件样式文件\n// @import \"../node_modules/bee-datepicker/src/datepicker.scss\";\n\n.selected{\n background: rgb(227,242,253);\n}\n\n.demo25{\n height: 100%;\n\n .u-table-filter-column-filter-icon{\n right: 15px;\n }\n\n}\n","th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n",".demo3{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}",".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}",".opt-btns{\n .u-button{\n background-color: #505F79;\n border-color: #505F79;\n color: #fff;\n &:hover, &:active{\n background-color: #344563;\n border-color: #344563;\n }\n }\n}"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/dist/demo.js b/dist/demo.js
index 67f7aab..de97959 100644
--- a/dist/demo.js
+++ b/dist/demo.js
@@ -58,15 +58,15 @@
var _beePanel = __webpack_require__(9);
- var _beeDrawer = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"bee-drawer\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
+ var _beeDrawer = __webpack_require__(82);
var _beeDrawer2 = _interopRequireDefault(_beeDrawer);
- var _beeClipboard = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"bee-clipboard\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
+ var _beeClipboard = __webpack_require__(96);
var _beeClipboard2 = _interopRequireDefault(_beeClipboard);
- var _src = __webpack_require__(82);
+ var _src = __webpack_require__(157);
var _src2 = _interopRequireDefault(_src);
@@ -80,7 +80,7 @@
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
- var Demo1 = __webpack_require__(466);var Demo2 = __webpack_require__(468);var Demo3 = __webpack_require__(471);var Demo4 = __webpack_require__(478);var Demo5 = __webpack_require__(481);var Demo6 = __webpack_require__(482);var Demo7 = __webpack_require__(484);var Demo8 = __webpack_require__(485);var Demo9 = __webpack_require__(486);var Demo10 = __webpack_require__(487);var Demo11 = __webpack_require__(488);var Demo12 = __webpack_require__(489);var Demo13 = __webpack_require__(490);var Demo14 = __webpack_require__(491);var Demo15 = __webpack_require__(492);var Demo16 = __webpack_require__(493);var Demo17 = __webpack_require__(494);var Demo18 = __webpack_require__(495);var Demo19 = __webpack_require__(496);var Demo20 = __webpack_require__(497);var Demo21 = __webpack_require__(498);var Demo22 = __webpack_require__(499);var Demo23 = __webpack_require__(500);var Demo24 = __webpack_require__(501);var Demo25 = __webpack_require__(502);var Demo26 = __webpack_require__(503);var Demo27 = __webpack_require__(507);var Demo28 = __webpack_require__(509);var Demo29 = __webpack_require__(510);var Demo30 = __webpack_require__(511);var Demo31 = __webpack_require__(512);var Demo32 = __webpack_require__(513);var Demo33 = __webpack_require__(514);var DemoArray = [{ "example": _react2['default'].createElement(Demo1, null), "title": " 基本用法", "code": "/**\n*\n* @title 基本用法\n* 【Tooltip】\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n render(text, record, index) {\n return (\n
\n );\n }\n }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\nclass Demo1 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n \n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo2, null), "title": " 多选表格", "code": "/**\n*\n* @title 多选表格\n* @description 点击表格左列按钮即可选中,并且在选中的回调函数中能获取到选中的数据\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Checkbox} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\n\nconst columns12 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data12 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\",_checked:true },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" ,_checked:true},\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" ,_checked:true}\n];\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\nlet MultiSelectTable = multiSelect(Table, Checkbox);\n\nclass Demo12 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: data12\n };\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n \n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n return (\n \n );\n }\n}\n\n", "desc": " 点击表格左列按钮即可选中,并且在选中的回调函数中能获取到选中的数据" }, { "example": _react2['default'].createElement(Demo3, null), "title": " 列过滤", "code": "/**\n*\n* @title 列过滤\n* @description 点击表格右侧按钮,进行表格列的数据过滤。可以自定义设置显示某列,通过ifshow属性控制,默认为true都显示。afterFilter为过滤之后的回调函数\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Popover} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\nconst data21 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e: \"操作\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠',e: \"操作\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e: \"操作\", key: \"3\" }\n];\n\nconst FilterColumnTable = filterColumn(Table, Popover, Icon);\n\nconst defaultProps21 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo21 extends Component {\n constructor(props) {\n super(props);\n this.state ={\n columns21: [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\"\n // width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n // width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n ifshow:false,\n // width: 200,\n // sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"操作\",\n dataIndex: \"e\",\n key: \"e\",\n render(text, record, index){\n return (\n \n );\n }\n }\n ]};\n }\n afterFilter = (optData,columns)=>{\n if(optData.key == 'b'){\n if(optData.ifshow){\n columns[2].ifshow = false;\n }else{\n columns[2].ifshow = true;\n }\n this.setState({\n columns21 :columns,\n showFilterPopover:true\n });\n }\n \n }\n \n render() {\n \n return ;\n }\n}\nDemo21.defaultProps = defaultProps21;\n\n\n", "desc": " 点击表格右侧按钮,进行表格列的数据过滤。可以自定义设置显示某列,通过ifshow属性控制,默认为true都显示。afterFilter为过滤之后的回调函数" }, { "example": _react2['default'].createElement(Demo4, null), "title": " 固定表头", "code": "/**\n*\n* @title 固定表头\n* @description 当滚动纵向滚动条时,表头固定。还可以设置scroll来支持横向或纵向滚动\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;;\nconst DragColumnTable = dragColumn(Table);\n\nconst columns6 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\n];\n\nconst data6 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo6 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 当滚动纵向滚动条时,表头固定。还可以设置scroll来支持横向或纵向滚动" }, { "example": _react2['default'].createElement(Demo5, null), "title": " 固定列", "code": "/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\n\nconst columns5 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\",\n fixed: \"left\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n { title: \"address\", dataIndex: \"address\", key: \"address\" }\n];\n\nconst data5 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo5 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 固定列到表格的某侧" }, { "example": _react2['default'].createElement(Demo6, null), "title": " 列排序", "code": "/**\n* @title 列排序\n* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\n\nlet ComplexTable = sort(Table, Icon);\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst defaultProps11 = {\n prefixCls: \"bee-table\"\n};\nclass Demo11 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n render() {\n\n return ;\n }\n}\nDemo11.defaultProps = defaultProps11;\n\n\n", "desc": " column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称" }, { "example": _react2['default'].createElement(Demo7, null), "title": " 后端列排序", "code": "/**\n* @title 后端列排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\nlet ComplexTable = sort(Table, Icon);\n\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"分数\",\n dataIndex: \"e\",\n key: \"e\",\n sorter: (a, b) => a.c - b.c\n },\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', e:139,key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', e:109, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', e:159, key: \"3\" }\n];\n\nconst defaultProps = {\n prefixCls: \"bee-table\"\n};\nclass Demo28 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n /**\n * 后端获取数据\n */\n sortFun = (sortParam)=>{\n console.info(sortParam);\n //将参数传递给后端排序\n }\n render() {\n let sortObj = {\n mode:'multiple',\n backSource:true,\n sortFun:this.sortFun\n }\n return ;\n }\n}\nDemo28.defaultProps = defaultProps;\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo8, null), "title": " 嵌套子表格", "code": "/**\n*\n* @title 嵌套子表格\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\nconst DragColumnTable = dragColumn(Table);\nconst columns16 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n {\n alert(\"这是第\" + index + \"列,内容为:\" + text);\n }}\n >\n 一些操作\n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst columns17 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n {\n alert(\"这是第\" + index + \"列,内容为:\" + text);\n }}\n >\n 一些操作\n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\n\nclass Demo16 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{}\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 42 * (this.state.data_obj[record.key].length+ 2);\n \n return (\n \n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon,该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格" }, { "example": _react2['default'].createElement(Demo9, null), "title": " 树形表格", "code": "/**\n*\n* @title 树形表格\n* @description 通过在data中配置children数据,来自动生成树形表格\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns4 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"John Brown sr.\",\n age: 60,\n address: \"New York No. 1 Lake Park\",\n children: [\n {\n key: 11,\n name: \"John Brown\",\n age: 42,\n address: \"New York No. 2 Lake Park\"\n },\n {\n key: 12,\n name: \"John Brown jr.\",\n age: 30,\n address: \"New York No. 3 Lake Park\",\n children: [\n {\n key: 121,\n name: \"Jimmy Brown\",\n age: 16,\n address: \"New York No. 3 Lake Park\"\n }\n ]\n },\n {\n key: 13,\n name: \"Jim Green sr.\",\n age: 72,\n address: \"London No. 1 Lake Park\",\n children: [\n {\n key: 131,\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 2 Lake Park\",\n children: [\n {\n key: 1311,\n name: \"Jim Green jr.\",\n age: 25,\n address: \"London No. 3 Lake Park\"\n },\n {\n key: 1312,\n name: \"Jimmy Green sr.\",\n age: 18,\n address: \"London No. 4 Lake Park\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\"\n }\n];\nclass Demo4 extends Component {\n\n constructor(props){\n super(props);\n this.state = {\n data: data4,\n factoryValue: 0,\n selectedRow: new Array(data4.length)//状态同步\n }\n }\n\n render() {\n return {\n if (this.state.selectedRow[index]) {\n return 'selected';\n } else {\n return '';\n }\n }}\n onRowClick={(record,index,indent)=>{\n let selectedRow = new Array(this.state.data.length);\n selectedRow[index] = true;\n this.setState({\n factoryValue: record,\n selectedRow: selectedRow\n });\n }}\n \n columns={columns4} data={data4} />;\n }\n}\n\n\n", "desc": " 通过在data中配置children数据,来自动生成树形表格" }, { "example": _react2['default'].createElement(Demo10, null), "title": " 列交换", "code": "/**\n*\n* @title 列交换\n* @description 点击列的表头,进行左右拖拽,注意:固定列不可以交换\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns22 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200,\n }\n];\n\nconst data22 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps22 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props); \n }\n \n render() {\n return ;\n }\n}\nDemo22.defaultProps = defaultProps22;\n\n\n", "desc": " 点击列的表头,进行左右拖拽,注意:固定列不可以交换" }, { "example": _react2['default'].createElement(Demo11, null), "title": " 拖拽列宽度", "code": "/**\n*\n* @title 拖拽列宽度\n* @description 注:不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: '200',\n fixed:'left'\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: '600'\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: '200',\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n }, \n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n constructor(props) {\n super(props); \n }\n\n render() {\n return {\n console.log(width+\"--调整列宽后触发事件\",e.target);\n }}\n />;\n }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n", "desc": " 注:不支持tree结构的表头、合并表头的table" }, { "example": _react2['default'].createElement(Demo12, null), "title": " 动态设置固定列", "code": "/**\n*\n* @title 动态设置固定列\n* @description 动态设置固、取消固定列\n* @description 动态固定列设置 一个table动态设置一个方向【fixed: \"left\",fixed: \"right\"】。\n*\n*/\nimport React, { Component } from 'react';\nimport {Icon,Menu,Dropdown} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst { Item } = Menu;\n// const columns24 = [\n// {\n// title: \"Full Name\",\n// width: 100,\n// dataIndex: \"name\",\n// key: \"name\",\n// fixed: \"left\",\n// },\n// { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n// { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n// { title: \"Column 2\", dataIndex: \"address2\", key: \"2\" },\n// { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n// { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n// { title: \"Column 24\", dataIndex: \"address\", key: \"24\" },\n// { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n// { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n// { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n// ];\n\n\nconst columns24 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100, \n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 150 \n },\n {\n title: \"对手\",\n dataIndex: \"e\",\n key: \"e\",\n width: 100 \n },\n {\n title: \"帮派\",\n dataIndex: \"f\",\n key: \"f\",\n width: 100 \n },\n {\n title: \"武功类型\",\n dataIndex: \"g\",\n key: \"g\",\n width: 100 \n },\n {\n title: \"师傅\",\n dataIndex: \"k\",\n key: \"k\",\n // width: 100 \n },\n {\n title: \"攻击系数\",\n dataIndex: \"h\",\n key: \"h\",\n width: 100 \n }\n];\n\n\nconst data24 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: \"1\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: \"3\" }\n]; \n \nclass Demo24 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n columns:columns24\n }\n }\n\n \n onSelect = ({key,item})=>{ \n console.log(`${key} selected`); //获取key\n let currentObject = item.props.data; //获取选中对象的数据\n let {columns} = this.state;\n let fixedCols = [];\n let nonColums = [];\n columns.find(da=>{\n if(da.key == key){\n da.fixed?delete da.fixed:da.fixed = 'left';\n }\n da.fixed?fixedCols.push(da):nonColums.push(da);\n });\n \n columns = [...fixedCols,...nonColums]\n\n this.setState({\n columns\n });\n }\n //表头增加下拉菜单\n renderColumnsDropdown(columns) {\n const icon ='uf-arrow-down';\n \n return columns.map((originColumn,index) => {\n let column = Object.assign({}, originColumn);\n let menuInfo = [], title='锁定';\n if(originColumn.fixed){\n title = '解锁'\n }\n menuInfo.push({\n info:title,\n key:originColumn.key,\n index:index\n });\n const menu = (\n )\n column.title = (\n \n {column.title}\n \n \n \n \n \n );\n return column;\n });\n \n }\n\n render() {\n let {columns} = this.state;\n columns = this.renderColumnsDropdown(columns);\n return ;\n }\n}\n\n", "desc": " 动态设置固、取消固定列", "scss_code": "th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n" }, { "example": _react2['default'].createElement(Demo13, null), "title": " 按条件、值过滤", "code": "/**\n*\n* @title 按条件、值过滤\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns26 = [\n { title: \"姓名\", width: 180, dataIndex: \"name\", key: \"name\", filterType: \"text\", filterDropdown: \"show\" },\n { title: \"年龄\", width: 150, dataIndex: \"age\", key: \"age\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"日期\", width: 200, dataIndex: \"date\", key: \"date\", filterType: \"date\", filterDropdown: \"show\", format: \"YYYY-MM-DD\" },\n { title: \"居住地址\", width: 150, dataIndex: \"address\", key: \"address\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"备注\", dataIndex: \"mark\", key: \"mark\" }\n];\n\nconst data26 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\nclass Demo26 extends Component {\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n render() {\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认300ms\n filterable={true}//是否开启过滤数据功能\n bordered\n columns={columns26}\n data={data26} />;\n }\n}\n\n", "desc": " 可以根据输入项目以及判断条件对表格内的数据进行过滤" }, { "example": _react2['default'].createElement(Demo14, null), "title": " 复杂表格中行过滤", "code": "/**\n*\n* @title 复杂表格中行过滤\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n*\n*/\n\n/**\n * @description \n */\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Dropdown,Menu} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\nconst data27 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\nclass Demo27 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n dropdownvalue: []\n }\n }\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onClick = (item) => {\n console.log(item);\n }\n\n render() {\n const menu1 = (\n )\n let multiObj = {\n type: \"checkbox\"\n };\n let columns27 = [\n {\n title: \"\", width: 40, dataIndex: \"key\", key: \"key\", render: (text, record, index) => {\n return \n \n \n }\n },\n {\n title: \"姓名\",\n width: 180,\n dataIndex: \"name\",\n key: \"name\",\n filterType: \"text\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"年龄\",\n width: 180,\n dataIndex: \"age\",\n key: \"age\",\n filterType: \"number\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"日期\",\n width: 190,\n dataIndex: \"date\",\n key: \"date\",\n filterType: \"date\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"时间范围\",\n width: 290,\n dataIndex: \"mark\",\n key: \"mark\",\n filterType: \"daterange\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"地址\",\n width: 100,\n dataIndex: \"address\",\n key: \"address\",\n filterType: \"dropdown\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n }\n ];\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认500ms\n filterable={true}//是否开启过滤数据功能\n getSelectedDataFunc={this.getSelectedDataFunc}\n bordered\n multiSelect={multiObj}\n columns={columns27}\n data={data27} />;\n }\n}\n\n", "desc": " 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等" }, { "example": _react2['default'].createElement(Demo15, null), "title": " 模态框中行过滤", "code": "/**\n*\n* @title 模态框中行过滤\n* @description 通过Modal组件来展示表格的过滤相关能力,并且通过filterDropdownIncludeKeys设置可选条件\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Modal,Button} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns29 = [\n {\n title: \"姓名\",\n width: 180,\n dataIndex: \"name\",\n key: \"name\",\n filterType: \"text\",\n filterDropdown: \"show\",\n filterDropdownIncludeKeys: ['LIKE', 'EQ']\n },\n {\n title: \"年龄\",\n width: 170,\n dataIndex: \"age\",\n key: \"age\",\n filterType: \"number\",\n filterDropdown: \"show\",\n filterDropdownType: \"number\",\n filterDropdownIncludeKeys: ['EQ'],\n filterInputNumberOptions: {\n max: 200,\n min: 0,\n step: 1,\n precision: 0\n }\n },\n {\n title: \"日期\",\n width: 200,\n dataIndex: \"date\",\n key: \"date\",\n filterType: \"date\",\n filterDropdown: \"show\",\n format: \"YYYY-MM-DD\"\n }\n];\n\nconst data29 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\nclass Demo29 extends Component {\n constructor() {\n super();\n this.state = {\n show: false\n }\n this.close = this.close.bind(this);\n this.open = this.open.bind(this);\n }\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n close() {\n this.setState({\n show: false\n });\n }\n open() {\n this.setState({\n show: true\n });\n }\n render() {\n return (\n \n 过滤行\n \n \n ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认300ms\n filterable={true}//是否开启过滤数据功能\n bordered\n columns={columns29}\n data={data29} />\n \n \n \n )\n }\n}\n\n", "desc": " 通过Modal组件来展示表格的过滤相关能力,并且通过filterDropdownIncludeKeys设置可选条件" }, { "example": _react2['default'].createElement(Demo16, null), "title": " 无数据时显示", "code": "/**\n*\n* @title 无数据时显示\n* @description 无数据时显示效果展示(可自定义)\n *\n* import {Table} from 'tinper-bee';\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns10 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n ];\n \n const data10 = [\n \n ];\n\n const emptyFunc = () => 这里没有数据!\n \n class Demo10 extends Component {\n render() {\n return ;\n }\n }\n\n", "desc": " 无数据时显示效果展示(可自定义)" }, { "example": _react2['default'].createElement(Demo17, null), "title": " loading表格", "code": "/**\n*\n* @title loading表格\n* @description loading可以传boolean或者obj对象,obj为bee-loading组件的参数类型\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport {Button} from \"tinper-bee\";\n\nconst columns17 = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n render(text, record, index) {\n return (\n {\n alert('这是第'+index+'列,内容为:'+text);\n }}\n >\n 一些操作\n \n );\n }\n }\n];\n\nconst data17 = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\nclass Demo17 extends Component {\n constructor(props){\n super(props);\n this.state = {\n loading : true\n }\n }\n changeLoading = () => {\n this.setState({\n loading : !this.state.loading\n })\n }\n render() {\n return (\n \n
\n
标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n // loading={this.state.loading}或者是boolean\n loading={{show:this.state.loading,loadingType:\"line\"}}\n />\n \n );\n }\n}\n\n\n", "desc": " loading可以传boolean或者obj对象,obj为bee-loading组件的参数类型" }, { "example": _react2['default'].createElement(Demo18, null), "title": " 多表头", "code": "/**\n *\n * @title 多表头\n * @description columns[n] 可以内嵌 children,以渲染分组表头。\n * 自定义表头高度需要传headerHeight,注:修改th的padding top和bottom置为0,否则会有影响\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport {Button} from \"tinper-bee\";\n\nconst { ColumnGroup, Column } = Table;\n\nconst columns = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: 100,\n fixed: \"left\"\n },\n {\n title: \"Other\",\n width:600,\n children: [\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: 200\n },\n {\n title: \"Address\",\n children: [\n {\n title: \"Street\",\n dataIndex: \"street\",\n key: \"street\",\n width: 200\n },\n {\n title: \"Block\",\n children: [\n {\n title: \"Building\",\n dataIndex: \"building\",\n key: \"building\",\n width: 100\n },\n {\n title: \"Door No.\",\n dataIndex: \"number\",\n key: \"number\",\n width: 100\n }\n ]\n }\n ]\n }\n ]\n },\n {\n title: \"Company\",\n width:400,\n children: [\n {\n title: \"Company Address\",\n dataIndex: \"companyAddress\",\n key: \"companyAddress\",\n width:200,\n },\n {\n title: \"Company Name\",\n dataIndex: \"companyName\",\n key: \"companyName\",\n width:200,\n }\n ]\n },\n {\n title: \"Gender\",\n dataIndex: \"gender\",\n key: \"gender\",\n width: 60,\n fixed: \"right\"\n }\n];\n\nconst data = [];\nfor (let i = 0; i < 20; i++) {\n data.push({\n key: i,\n name: \"John Brown\",\n age: i + 1,\n street: \"Lake Park\",\n building: \"C\",\n number: 2035,\n companyAddress: \"Lake Street 42\",\n companyName: \"SoftLake Co\",\n gender: \"M\"\n });\n}\n\nclass Demo3 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " columns[n] 可以内嵌 children,以渲染分组表头。", "scss_code": ".demo3{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}" }, { "example": _react2['default'].createElement(Demo19, null), "title": " 表格行、列合并", "code": "/**\n*\n* @title 表格行、列合并\n* @description 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst renderContent = (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n};\n\nconst columns = [{\n title: 'Name',\n key: \"name\",\n dataIndex: 'name',\n render: (text, row, index) => {\n if (index < 4) {\n return {text};\n }\n return {\n children: {text},\n props: {\n colSpan: 5,\n },\n };\n },\n}, {\n title: 'Age',\n key: \"Age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: 'Home phone',\n colSpan: 2,\n key: \"tel\",\n dataIndex: 'tel',\n render: (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 2) {\n obj.props.rowSpan = 2;\n }\n if (index === 3) {\n obj.props.rowSpan = 0;\n }\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n },\n}, {\n title: 'Phone',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: 'Address',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\n\nconst data = [{\n key: '1',\n name: 'John Brown',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: 'New York No. 1 Lake Park',\n}, {\n key: '2',\n name: 'Jim Green',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: 'London No. 1 Lake Park',\n}, {\n key: '3',\n name: 'Joe Black',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Sidney No. 1 Lake Park',\n}, {\n key: '4',\n name: 'Jim Red',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'London No. 2 Lake Park',\n}, {\n key: '5',\n name: 'Jake White',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Dublin No. 2 Lake Park',\n}];\n\nclass Demo15 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n\n", "desc": " 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。" }, { "example": _react2['default'].createElement(Demo20, null), "title": " 多功能表格", "code": "/**\n *\n * @title 多功能表格\n * @description 多列排序、全选功能、合计(通过使用的封装好的功能方法实现复杂功能,简单易用!)新增回调函数(sorterClick)\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Checkbox,Button,Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\nimport sort from \"tinper-bee/lib/sort.js\";;\nimport sum from \"tinper-bee/lib/sum.js\";;\n\nconst columns13 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n className:'dfasd',\n width: 200\n },\n {\n title: \"功力指数\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"成绩\",\n dataIndex: \"e\",\n key: \"e\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200\n }\n];\n\nconst data13 = [\n { a: \"杨过\", b: 675, c: 30, d: \"内行\",e:100, key: \"2\" },\n { a: \"令狐冲\", b: 43, c: 41, d: \"大侠\",e:90, key: \"1\" },\n { a: \"令狐冲1\", b: 43, c: 81, d: \"大侠\", e:120,key: \"4\" },\n { a: \"令狐冲2\", b: 43, c: 81, d: \"大侠\", e:130,key: \"5\" },\n { a: \"郭靖\", b: 153, c: 25, d: \"大侠\",e:90, key: \"3\" }\n];\n\n\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\nlet ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);\n\nclass Demo13 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data13: data13,\n selectedRow: this.selectedRow,\n selectDisabled: this.selectDisabled\n };\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n selectDisabled = (record, index) => {\n // console.log(record);\n if (index === 1) {\n return true;\n }\n return false;\n };\n selectedRow = (record, index) => {\n // console.log(record);\n if (index === 0) {\n return true;\n }\n return false;\n };\n onClick = () => {\n this.setState({\n selectedRow: function() {}\n });\n };\n\n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n let sortObj = {\n mode:'multiple'\n }\n \n return (\n \n \n \n
\n );\n }\n}\n", "desc": " 多列排序、全选功能、合计(通过使用的封装好的功能方法实现复杂功能,简单易用!)新增回调函数(sorterClick)" }, { "example": _react2['default'].createElement(Demo21, null), "title": " 合并列后合计", "code": "/**\n *\n * @title 合并列后合计\n * @description 合并标题后的合计,且支持多字段统计(通过使用的封装好的功能方法实现复杂功能,简单易用!)\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Button} from \"tinper-bee\";\nimport { Table } from 'tinper-bee'; \nimport sum from \"tinper-bee/lib/sum.js\";;\n \nlet ComplexTable = sum(Table);\n\nconst columns = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: 100,\n fixed: \"left\"\n },\n {\n title: \"Other\",\n children: [\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: 200,\n sumCol: true,\n },\n {\n title: \"Address\",\n children: [\n {\n title: \"Street\",\n dataIndex: \"street\",\n key: \"street\",\n width: 200\n },\n {\n title: \"Block\",\n children: [\n {\n title: \"Building\",\n dataIndex: \"building\",\n key: \"building\",\n width: 100\n },\n {\n title: \"Door No.\",\n dataIndex: \"number\",\n key: \"number\",\n // width: 100,\n sumCol: true,\n }\n ]\n }\n ]\n }\n ]\n },\n // {\n // title: \"Company\",\n // children: [\n // {\n // title: \"Company Address\",\n // dataIndex: \"companyAddress\",\n // key: \"companyAddress\",\n // width: 100,\n // },\n // {\n // title: \"Company Name\",\n // dataIndex: \"companyName\",\n // key: \"companyName\",\n // width: 100,\n // }\n // ]\n // },\n {\n title: \"Gender\",\n dataIndex: \"gender\",\n key: \"gender\",\n width: 80,\n fixed: \"right\"\n }\n];\n\nfunction getData(){\n const data = [];\n for (let i = 0; i < 5; i++) {\n data.push({\n key: i,\n name: \"John Brown\"+i,\n age: i + Math.floor(Math.random()*10),\n street: \"Lake Park\",\n building: \"C\",\n number: 20 * Math.floor(Math.random()*10),\n companyAddress: \"Lake Street 42\",\n companyName: \"SoftLake Co\",\n gender: \"M\"\n });\n }\n return data;\n}\n\nclass Demo18 extends Component {\n \n constructor(props) {\n super(props);\n this.state = {\n data: getData()\n };\n }\n\n changeData = ()=>{\n this.setState({\n data: getData()\n });\n }\n\n render() {\n const {data} = this.state;\n return (\n \n \n\n \n
\n );\n }\n}\n\n", "desc": " 合并标题后的合计,且支持多字段统计(通过使用的封装好的功能方法实现复杂功能,简单易用!)" }, { "example": _react2['default'].createElement(Demo22, null), "title": " 选中行颜色、表头表体", "code": "/**\n*\n* @title 选中行颜色、表头表体\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip,} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width:80 , className:\"rowClassName\"},\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo26 extends Component {\n\n constructor(props){\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n {\n if (this.state.selectedRowIndex == index) {\n return 'selected';\n } else {\n return '';\n }\n }}\n onRowClick={(record,index,indent)=>{\n this.setState({ \n selectedRowIndex: index\n });\n }}\n title={currentData => 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n /> \n );\n }\n}\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo23, null), "title": " 主子表", "code": "/**\n *\n * @title 主子表\n * @description 主表点击子表联动\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns7 = [\n { title: \"班级\", dataIndex: \"a\", key: \"a\" },\n { title: \"人数\", dataIndex: \"b\", key: \"b\" },\n { title: \"班主任\", dataIndex: \"c\", key: \"c\" },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data7 = [\n { a: \"02级一班\", b: \"2\", c: \"欧阳锋\", d: \"大侠\", key: \"1\" },\n { a: \"03级二班\", b: \"3\", c: \"归海一刀\", d: \"大侠\", key: \"2\" },\n { a: \"05级三班\", b: \"1\", c: \"一拳超人\", d: \"愣头青\", key: \"3\" }\n];\n\nconst columns7_1 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\" },\n { title: \"班级\", dataIndex: \"b\", key: \"b\" },\n { title: \"系别\", dataIndex: \"c\", key: \"c\" }\n];\n\nclass Demo7 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n children_data: []\n };\n }\n\n rowclick = (record, index) => {\n if (record.a === \"02级一班\") {\n this.setState({\n children_data: [\n { a: \"郭靖\", b: \"02级一班\", c: \"文学系\", key: \"1\" },\n { a: \"黄蓉\", b: \"02级一班\", c: \"文学系\", key: \"2\" }\n ]\n });\n } else if (record.a === \"03级二班\") {\n this.setState({\n children_data: [\n { a: \"杨过\", b: \"03级二班\", c: \"外语系\", key: \"1\" },\n { a: \"小龙女\", b: \"03级二班\", c: \"外语系\", key: \"2\" },\n { a: \"傻姑\", b: \"03级二班\", c: \"外语系\", key: \"3\" }\n ]\n });\n } else if (record.a === \"05级三班\") {\n this.setState({\n children_data: [{ a: \"金圣叹\", b: \"05级三班\", c: \"美术系\", key: \"1\" }]\n });\n }\n };\n\n render() {\n return (\n \n
标题: 我是主表
}\n />\n 标题: 我是子表
}\n />\n \n );\n }\n}\n\n\n", "desc": " 主表点击子表联动" }, { "example": _react2['default'].createElement(Demo24, null), "title": " 表格+分页", "code": "/**\n *\n * @title 表格+分页\n * @description 点击分页联动表格\n */\n\nimport React, { Component } from \"react\";\nimport {Pagination} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst columns8 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst pageData = {\n 1: [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n ],\n 2: [\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, d: \"大侠\", key: \"1\" },\n { a: \"芙蓉妹妹\", b: \"女\", c: 23, d: \"内行\", key: \"2\" }\n ]\n};\n\nclass Demo8 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: pageData[1],\n activePage: 1\n };\n }\n\n handleSelect(eventKey) {\n this.setState({\n data: pageData[eventKey],\n activePage: eventKey\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\n", "desc": " 点击分页联动表格", "scss_code": ".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}" }, { "example": _react2['default'].createElement(Demo25, null), "title": " 表格+搜索", "code": "/**\n *\n * @title 表格+搜索\n * @description 搜索刷新表格数据\n *\n *\n * import {Table} from 'tinper-bee';\n */\n\nimport React, { Component } from \"react\";\nimport {Icon,FormControl,InputGroup} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nclass Search extends Component {\n state = {\n searchValue: \"\",\n empty: false\n };\n\n /**\n * 搜索\n */\n handleSearch = () => {\n let { onSearch } = this.props;\n this.setState({\n empty: true\n });\n onSearch && onSearch(this.state.searchValue);\n };\n\n /**\n * 捕获回车\n * @param e\n */\n handleKeyDown = e => {\n if (e.keyCode === 13) {\n this.handleSearch();\n }\n };\n\n /**\n * 输入框改变\n * @param e\n */\n handleChange = (e) => {\n this.setState({\n searchValue: e\n });\n };\n\n /**\n * 清空输入框\n */\n emptySearch = () => {\n let { onEmpty } = this.props;\n this.setState({\n searchValue: \"\",\n empty: false\n });\n onEmpty && onEmpty();\n };\n\n render() {\n return (\n \n \n {this.state.empty ? (\n \n ) : null}\n\n \n \n \n \n );\n }\n}\n\nconst columns9 = [\n {\n title: \"姓名\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst userData = [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n];\n\nclass Demo9 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: userData\n };\n }\n\n handleSearch = value => {\n if (value === \"\") {\n return this.setState({\n data: userData\n });\n }\n let regExp = new RegExp(value, \"ig\");\n let data = userData.filter(item => regExp.test(item.a));\n this.setState({\n data\n });\n };\n\n handleEmpty = () => {\n this.setState({\n data: userData\n });\n };\n\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 搜索刷新表格数据" }, { "example": _react2['default'].createElement(Demo26, null), "title": " 编辑态表格", "code": "/**\n*\n* @title 编辑态表格\n* @description 这是带有多种不同格式的编辑态表格(编辑态是通过使用不同的render来达到不同编辑格式)\n*\n*/\n\nimport React from \"react\";\nimport {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from \"tinper-bee\";\nimport { Table, Datepicker } from 'tinper-bee';\nimport renderInput from \"tinper-bee/lib/InputRender.js\";;\nimport renderDate from \"tinper-bee/lib/DateRender.js\";;\nimport renderSelect from \"tinper-bee/lib/SelectRender.js\";;\n\nconst InputRender = renderInput(Form, FormControl, Icon);\nconst DateRender = renderDate(Datepicker, Icon);\nconst SelectRender = renderSelect(Select, Icon);\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\nconst dataSource = [\n {\n key: \"boyuzhou\",\n value: \"jack\"\n },\n {\n key: \"renhualiu\",\n value: \"lucy\"\n },\n {\n key: \"yuzhao\",\n value: \"yiminghe\"\n }\n];\nclass Demo14 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n number: \"10\",\n age: \"y\",\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n number: \"100\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n number: \"1000\",\n age: \"n\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n number: \"9999\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n }\n ],\n count: 4\n };\n this.columns = [\n {\n title: \"普通输入\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n />\n )\n },\n {\n title: \"货币输入\",\n dataIndex: \"number\",\n key: \"number\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n reg={/^[0-9]+$/}\n />\n )\n },\n {\n title: \"复选\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"下拉框\",\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n \n \n \n \n \n );\n }\n },\n {\n title: \"年月日\",\n dataIndex: \"datepicker\",\n key: \"datepicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"年月\",\n dataIndex: \"MonthPicker\",\n key: \"MonthPicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n }\n check = (flag, obj) => {\n console.log(flag);\n console.log(obj);\n };\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onCheckChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onSelectChange = (index, key) => {\n return value => {\n console.log(`selected ${value}`);\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDateChange = d => {\n console.log(d);\n };\n onDateSelect = d => {\n console.log(d);\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n getData = () => {\n console.log(this.state.dataSource);\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n
\n
\n
\n
\n );\n }\n}\n\n\n", "desc": " 这是带有多种不同格式的编辑态表格(编辑态是通过使用不同的render来达到不同编辑格式)" }, { "example": _react2['default'].createElement(Demo27, null), "title": " 滚动加载", "code": "/**\n*\n* @title 滚动加载\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'50',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo30 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n", "desc": "", "scss_code": ".big-data tr td {\n // height: 48px;\n}" }, { "example": _react2['default'].createElement(Demo28, null), "title": " 嵌套子表格滚动加载", "code": "/**\n*\n* @title 嵌套子表格滚动加载\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst outColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n {\n alert(\"这是第\" + index + \"列,内容为:\" + text);\n }}\n >\n 一些操作\n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst innerColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n {\n alert(\"这是第\" + index + \"列,内容为:\" + text);\n }}\n >\n {'一些操作'+index}\n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [ ...new Array(10000) ].map((e, i) => {\n return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n })\n\n\n\n\n\nclass Demo31 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{\n 0:[\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ],\n 1: [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ],\n }\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 200;\n let innderData = [ ...new Array(100) ].map((e, i) => {\n return { a: index+\"-\"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: index+\"-\"+ i };\n })\n return (\n \n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon,该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格" }, { "example": _react2['default'].createElement(Demo29, null), "title": " 多功能表格滚动加载", "code": "/**\n*\n* @title 多功能表格滚动加载\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip,Checkbox,Icon,Popover} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\n\nlet ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);\n\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'50',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo32 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n\n render() {\n return (\n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n getSelectedDataFunc={this.getSelectedDataFunc}/>\n\n );\n }\n}\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo30, null), "title": " 树状表滚动加载", "code": "/**\n*\n* @title 树状表滚动加载\n* 【Tooltip】\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'150',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [ ...new Array(1000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n rs.children = [];\n for(let subi=0;subi<3;subi++){\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\n }\n }else{\n rs.children = [];\n for(let subi=0;subi<3;subi++){\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\n }\n }\n return rs;\n })\n\n\nclass Demo34 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n onExpandedRowsChange = (params)=>{\n console.log(params);\n }\n onExpand = (expandKeys)=>{\n console.log('expand---'+expandKeys);\n }\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo31, null), "title": " hover呼出操作栏", "code": "/**\n*\n* @title hover呼出操作栏\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip,Button} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 80, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 300 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n render(text, record, index) {\n return (\n \n );\n }\n }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\nclass Demo35 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n delFun=()=>{\n // console.log('click'+this.currentIndex);\n let {data} = this.state;\n data.splice(this.currentIndex,1);\n this.setState({\n data\n });\n }\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n getHoverContent=()=>{\n return
\n }\n render() {\n return (\n \n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n", "desc": "", "scss_code": ".opt-btns{\n .u-button{\n background-color: #505F79;\n border-color: #505F79;\n color: #fff;\n &:hover, &:active{\n background-color: #344563;\n border-color: #344563;\n }\n }\n}" }, { "example": _react2['default'].createElement(Demo32, null), "title": " 多功能表格", "code": "/**\n* @title 多功能表格\n* @description 根据列进行过滤、拖拽交换列综合使用案例\n*/\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Popover} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\n //Cloumns1\nfunction getCloumns(){\n const column = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 100, \n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 100\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 100\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 100\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 300\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 100,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 100\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 100\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 100\n },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:100,\n fixed: \"right\",\n render(text, record, index) {\n return (\n \n )\n }\n }\n ];\n return column;\n}\n\nconst dataList = [ \n { \n index: 1, \n orderCode:\"2343\", \n supplierName: \"xxx\",\n type_name: \"123\",\n purchasing:'内行', \n purchasingGroup:\"323\",\n voucherDate:\"kkkk\",\n approvalState_name:\"vvvv\",\n confirmState_name:\"aaaa\",\n closeState_name:\"vnnnnn\",\n d:\"操作\",\n key: \"1\"\n }, \n { \n index: 2, \n _checked:true,\n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"2操作\",\n key: \"2\"\n },\n { \n index: 3, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n _disabled:true,\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"3操作\",\n key: \"3\"\n },\n { \n index: 4, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"4操作\",\n key: \"4\"\n },\n]\n\nconst DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);\n\nconst defaultProps25 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo25 extends Component {\n constructor(props) {\n super(props);\n }\n\n getSelectedDataFunc=(data)=>{\n console.log(\"data\",data);\n }\n \n getCloumnsScroll=(columns)=>{\n let sum = 0;\n columns.forEach((da)=>{\n sum += da.width;\n })\n console.log(\"sum\",sum);\n return (sum);\n }\n\n selectedRow=(record, index)=>{\n\n }\n\n render() {\n let columns = getCloumns();\n \n return \n \n
\n }\n}\nDemo25.defaultProps = defaultProps25;\n\n\n", "desc": " 根据列进行过滤、拖拽交换列综合使用案例" }, { "example": _react2['default'].createElement(Demo33, null), "title": " 增删改表格", "code": "/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格(此编辑功能未使用render组件)\n*\n*/\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport {Button,Icon,FormControl as Input,Popconfirm} from \"tinper-bee\";\nclass EditableCell extends React.Component {\n state = {\n value: this.props.value,\n editable: false\n };\n handleChange = e => {\n const value = e;\n this.setState({ value });\n };\n check = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n edit = () => {\n this.setState({ editable: true });\n };\n handleKeydown = event => {\n if (event.keyCode == 13) {\n this.check();\n }\n };\n render() {\n const { value, editable } = this.state;\n return (\n \n {editable ? (\n
\n \n \n
\n ) : (\n
\n {value || \" \"}\n \n
\n )}\n
\n );\n }\n}\n\nclass Demo2 extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [\n {\n title: \"姓名\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"30%\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"年龄\",\n dataIndex: \"age\",\n key: \"age\"\n },\n {\n title: \"你懂的\",\n dataIndex: \"address\",\n key: \"address\"\n },\n {\n title: \"操作\",\n dataIndex: \"operation\",\n key: \"operation\",\n render: (text, record, index) => {\n return this.state.dataSource.length > 1 ? (\n \n \n \n ) : null;\n }\n }\n ];\n\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n age: \"18\",\n address: \"96, 77, 89\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n age: \"16\",\n address: \"90, 70, 80\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n age: \"17\",\n address: \"80, 60, 80\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n age: \"20\",\n address: \"120, 60, 90\"\n }\n ],\n count: 4\n };\n }\n onCellChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDelete = (index) => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n }\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: `100 100 100`\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n );\n }\n}\n\n\n", "desc": " 这是带有增删改功能的表格(此编辑功能未使用render组件)" }];
+ var Demo1 = __webpack_require__(530);var Demo2 = __webpack_require__(532);var Demo3 = __webpack_require__(535);var Demo4 = __webpack_require__(542);var Demo5 = __webpack_require__(545);var Demo6 = __webpack_require__(546);var Demo7 = __webpack_require__(548);var Demo8 = __webpack_require__(549);var Demo9 = __webpack_require__(550);var Demo10 = __webpack_require__(551);var Demo11 = __webpack_require__(552);var Demo12 = __webpack_require__(553);var Demo13 = __webpack_require__(554);var Demo14 = __webpack_require__(555);var Demo15 = __webpack_require__(556);var Demo16 = __webpack_require__(557);var Demo17 = __webpack_require__(558);var Demo18 = __webpack_require__(559);var Demo19 = __webpack_require__(560);var Demo20 = __webpack_require__(561);var Demo21 = __webpack_require__(562);var Demo22 = __webpack_require__(563);var Demo23 = __webpack_require__(564);var Demo24 = __webpack_require__(565);var Demo25 = __webpack_require__(566);var Demo26 = __webpack_require__(567);var Demo27 = __webpack_require__(571);var Demo28 = __webpack_require__(573);var Demo29 = __webpack_require__(574);var Demo30 = __webpack_require__(575);var Demo31 = __webpack_require__(576);var Demo32 = __webpack_require__(577);var Demo33 = __webpack_require__(578);var DemoArray = [{ "example": _react2['default'].createElement(Demo1, null), "title": " 基本用法", "code": "/**\n*\n* @title 基本用法\n* 【Tooltip】\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n render(text, record, index) {\n return (\n \n );\n }\n }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\nclass Demo1 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n \n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo2, null), "title": " 多选表格", "code": "/**\n*\n* @title 多选表格\n* @description 点击表格左列按钮即可选中,并且在选中的回调函数中能获取到选中的数据\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Checkbox} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\n\nconst columns12 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data12 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\",_checked:true },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" ,_checked:true},\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" ,_checked:true}\n];\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\nlet MultiSelectTable = multiSelect(Table, Checkbox);\n\nclass Demo12 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: data12\n };\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n \n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n return (\n \n );\n }\n}\n\n", "desc": " 点击表格左列按钮即可选中,并且在选中的回调函数中能获取到选中的数据" }, { "example": _react2['default'].createElement(Demo3, null), "title": " 列过滤", "code": "/**\n*\n* @title 列过滤\n* @description 点击表格右侧按钮,进行表格列的数据过滤。可以自定义设置显示某列,通过ifshow属性控制,默认为true都显示。afterFilter为过滤之后的回调函数\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Popover} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\nconst data21 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e: \"操作\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠',e: \"操作\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e: \"操作\", key: \"3\" }\n];\n\nconst FilterColumnTable = filterColumn(Table, Popover, Icon);\n\nconst defaultProps21 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo21 extends Component {\n constructor(props) {\n super(props);\n this.state ={\n columns21: [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\"\n // width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n // width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n ifshow:false,\n // width: 200,\n // sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"操作\",\n dataIndex: \"e\",\n key: \"e\",\n render(text, record, index){\n return (\n \n );\n }\n }\n ]};\n }\n afterFilter = (optData,columns)=>{\n if(optData.key == 'b'){\n if(optData.ifshow){\n columns[2].ifshow = false;\n }else{\n columns[2].ifshow = true;\n }\n this.setState({\n columns21 :columns,\n showFilterPopover:true\n });\n }\n \n }\n \n render() {\n \n return ;\n }\n}\nDemo21.defaultProps = defaultProps21;\n\n\n", "desc": " 点击表格右侧按钮,进行表格列的数据过滤。可以自定义设置显示某列,通过ifshow属性控制,默认为true都显示。afterFilter为过滤之后的回调函数" }, { "example": _react2['default'].createElement(Demo4, null), "title": " 固定表头", "code": "/**\n*\n* @title 固定表头\n* @description 当滚动纵向滚动条时,表头固定。还可以设置scroll来支持横向或纵向滚动\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;;\nconst DragColumnTable = dragColumn(Table);\n\nconst columns6 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\n];\n\nconst data6 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo6 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 当滚动纵向滚动条时,表头固定。还可以设置scroll来支持横向或纵向滚动" }, { "example": _react2['default'].createElement(Demo5, null), "title": " 固定列", "code": "/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\n\nconst columns5 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\",\n fixed: \"left\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n { title: \"address\", dataIndex: \"address\", key: \"address\" }\n];\n\nconst data5 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo5 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 固定列到表格的某侧" }, { "example": _react2['default'].createElement(Demo6, null), "title": " 列排序", "code": "/**\n* @title 列排序\n* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\n\nlet ComplexTable = sort(Table, Icon);\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst defaultProps11 = {\n prefixCls: \"bee-table\"\n};\nclass Demo11 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n render() {\n\n return ;\n }\n}\nDemo11.defaultProps = defaultProps11;\n\n\n", "desc": " column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称" }, { "example": _react2['default'].createElement(Demo7, null), "title": " 后端列排序", "code": "/**\n* @title 后端列排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\nlet ComplexTable = sort(Table, Icon);\n\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"分数\",\n dataIndex: \"e\",\n key: \"e\",\n sorter: (a, b) => a.c - b.c\n },\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', e:139,key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', e:109, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', e:159, key: \"3\" }\n];\n\nconst defaultProps = {\n prefixCls: \"bee-table\"\n};\nclass Demo28 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n /**\n * 后端获取数据\n */\n sortFun = (sortParam)=>{\n console.info(sortParam);\n //将参数传递给后端排序\n }\n render() {\n let sortObj = {\n mode:'multiple',\n backSource:true,\n sortFun:this.sortFun\n }\n return ;\n }\n}\nDemo28.defaultProps = defaultProps;\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo8, null), "title": " 嵌套子表格", "code": "/**\n*\n* @title 嵌套子表格\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\nconst DragColumnTable = dragColumn(Table);\nconst columns16 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n {\n alert(\"这是第\" + index + \"列,内容为:\" + text);\n }}\n >\n 一些操作\n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst columns17 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n {\n alert(\"这是第\" + index + \"列,内容为:\" + text);\n }}\n >\n 一些操作\n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\n\nclass Demo16 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{}\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 42 * (this.state.data_obj[record.key].length+ 2);\n \n return (\n \n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon,该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格" }, { "example": _react2['default'].createElement(Demo9, null), "title": " 树形表格", "code": "/**\n*\n* @title 树形表格\n* @description 通过在data中配置children数据,来自动生成树形表格\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns4 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"John Brown sr.\",\n age: 60,\n address: \"New York No. 1 Lake Park\",\n children: [\n {\n key: 11,\n name: \"John Brown\",\n age: 42,\n address: \"New York No. 2 Lake Park\"\n },\n {\n key: 12,\n name: \"John Brown jr.\",\n age: 30,\n address: \"New York No. 3 Lake Park\",\n children: [\n {\n key: 121,\n name: \"Jimmy Brown\",\n age: 16,\n address: \"New York No. 3 Lake Park\"\n }\n ]\n },\n {\n key: 13,\n name: \"Jim Green sr.\",\n age: 72,\n address: \"London No. 1 Lake Park\",\n children: [\n {\n key: 131,\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 2 Lake Park\",\n children: [\n {\n key: 1311,\n name: \"Jim Green jr.\",\n age: 25,\n address: \"London No. 3 Lake Park\"\n },\n {\n key: 1312,\n name: \"Jimmy Green sr.\",\n age: 18,\n address: \"London No. 4 Lake Park\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\"\n }\n];\nclass Demo4 extends Component {\n\n constructor(props){\n super(props);\n this.state = {\n data: data4,\n factoryValue: 0,\n selectedRow: new Array(data4.length)//状态同步\n }\n }\n\n render() {\n return {\n if (this.state.selectedRow[index]) {\n return 'selected';\n } else {\n return '';\n }\n }}\n onRowClick={(record,index,indent)=>{\n let selectedRow = new Array(this.state.data.length);\n selectedRow[index] = true;\n this.setState({\n factoryValue: record,\n selectedRow: selectedRow\n });\n }}\n \n columns={columns4} data={data4} />;\n }\n}\n\n\n", "desc": " 通过在data中配置children数据,来自动生成树形表格" }, { "example": _react2['default'].createElement(Demo10, null), "title": " 列交换", "code": "/**\n*\n* @title 列交换\n* @description 点击列的表头,进行左右拖拽,注意:固定列不可以交换\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns22 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200,\n }\n];\n\nconst data22 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps22 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props); \n }\n \n render() {\n return ;\n }\n}\nDemo22.defaultProps = defaultProps22;\n\n\n", "desc": " 点击列的表头,进行左右拖拽,注意:固定列不可以交换" }, { "example": _react2['default'].createElement(Demo11, null), "title": " 拖拽列宽度", "code": "/**\n*\n* @title 拖拽列宽度\n* @description 注:不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: '200',\n fixed:'left'\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: '600'\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: '200',\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n }, \n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n constructor(props) {\n super(props); \n }\n\n render() {\n return {\n console.log(width+\"--调整列宽后触发事件\",e.target);\n }}\n />;\n }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n", "desc": " 注:不支持tree结构的表头、合并表头的table" }, { "example": _react2['default'].createElement(Demo12, null), "title": " 动态设置固定列", "code": "/**\n*\n* @title 动态设置固定列\n* @description 动态设置固、取消固定列\n* @description 动态固定列设置 一个table动态设置一个方向【fixed: \"left\",fixed: \"right\"】。\n*\n*/\nimport React, { Component } from 'react';\nimport {Icon,Menu,Dropdown} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst { Item } = Menu;\n// const columns24 = [\n// {\n// title: \"Full Name\",\n// width: 100,\n// dataIndex: \"name\",\n// key: \"name\",\n// fixed: \"left\",\n// },\n// { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n// { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n// { title: \"Column 2\", dataIndex: \"address2\", key: \"2\" },\n// { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n// { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n// { title: \"Column 24\", dataIndex: \"address\", key: \"24\" },\n// { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n// { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n// { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n// ];\n\n\nconst columns24 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100, \n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 150 \n },\n {\n title: \"对手\",\n dataIndex: \"e\",\n key: \"e\",\n width: 100 \n },\n {\n title: \"帮派\",\n dataIndex: \"f\",\n key: \"f\",\n width: 100 \n },\n {\n title: \"武功类型\",\n dataIndex: \"g\",\n key: \"g\",\n width: 100 \n },\n {\n title: \"师傅\",\n dataIndex: \"k\",\n key: \"k\",\n // width: 100 \n },\n {\n title: \"攻击系数\",\n dataIndex: \"h\",\n key: \"h\",\n width: 100 \n }\n];\n\n\nconst data24 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: \"1\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: \"3\" }\n]; \n \nclass Demo24 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n columns:columns24\n }\n }\n\n \n onSelect = ({key,item})=>{ \n console.log(`${key} selected`); //获取key\n let currentObject = item.props.data; //获取选中对象的数据\n let {columns} = this.state;\n let fixedCols = [];\n let nonColums = [];\n columns.find(da=>{\n if(da.key == key){\n da.fixed?delete da.fixed:da.fixed = 'left';\n }\n da.fixed?fixedCols.push(da):nonColums.push(da);\n });\n \n columns = [...fixedCols,...nonColums]\n\n this.setState({\n columns\n });\n }\n //表头增加下拉菜单\n renderColumnsDropdown(columns) {\n const icon ='uf-arrow-down';\n \n return columns.map((originColumn,index) => {\n let column = Object.assign({}, originColumn);\n let menuInfo = [], title='锁定';\n if(originColumn.fixed){\n title = '解锁'\n }\n menuInfo.push({\n info:title,\n key:originColumn.key,\n index:index\n });\n const menu = (\n )\n column.title = (\n \n {column.title}\n \n \n \n \n \n );\n return column;\n });\n \n }\n\n render() {\n let {columns} = this.state;\n columns = this.renderColumnsDropdown(columns);\n return ;\n }\n}\n\n", "desc": " 动态设置固、取消固定列", "scss_code": "th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n" }, { "example": _react2['default'].createElement(Demo13, null), "title": " 按条件、值过滤", "code": "/**\n*\n* @title 按条件、值过滤\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns26 = [\n { title: \"姓名\", width: 180, dataIndex: \"name\", key: \"name\", filterType: \"text\", filterDropdown: \"show\" },\n { title: \"年龄\", width: 150, dataIndex: \"age\", key: \"age\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"日期\", width: 200, dataIndex: \"date\", key: \"date\", filterType: \"date\", filterDropdown: \"show\", format: \"YYYY-MM-DD\" },\n { title: \"居住地址\", width: 150, dataIndex: \"address\", key: \"address\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"备注\", dataIndex: \"mark\", key: \"mark\" }\n];\n\nconst data26 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\nclass Demo26 extends Component {\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n render() {\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认300ms\n filterable={true}//是否开启过滤数据功能\n bordered\n columns={columns26}\n data={data26} />;\n }\n}\n\n", "desc": " 可以根据输入项目以及判断条件对表格内的数据进行过滤" }, { "example": _react2['default'].createElement(Demo14, null), "title": " 复杂表格中行过滤", "code": "/**\n*\n* @title 复杂表格中行过滤\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n*\n*/\n\n/**\n * @description \n */\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Dropdown,Menu} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\nconst data27 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\nclass Demo27 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n dropdownvalue: []\n }\n }\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onClick = (item) => {\n console.log(item);\n }\n\n render() {\n const menu1 = (\n )\n let multiObj = {\n type: \"checkbox\"\n };\n let columns27 = [\n {\n title: \"\", width: 40, dataIndex: \"key\", key: \"key\", render: (text, record, index) => {\n return \n \n \n }\n },\n {\n title: \"姓名\",\n width: 180,\n dataIndex: \"name\",\n key: \"name\",\n filterType: \"text\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"年龄\",\n width: 180,\n dataIndex: \"age\",\n key: \"age\",\n filterType: \"number\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"日期\",\n width: 190,\n dataIndex: \"date\",\n key: \"date\",\n filterType: \"date\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"时间范围\",\n width: 290,\n dataIndex: \"mark\",\n key: \"mark\",\n filterType: \"daterange\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"地址\",\n width: 100,\n dataIndex: \"address\",\n key: \"address\",\n filterType: \"dropdown\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n }\n ];\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认500ms\n filterable={true}//是否开启过滤数据功能\n getSelectedDataFunc={this.getSelectedDataFunc}\n bordered\n multiSelect={multiObj}\n columns={columns27}\n data={data27} />;\n }\n}\n\n", "desc": " 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等" }, { "example": _react2['default'].createElement(Demo15, null), "title": " 模态框中行过滤", "code": "/**\n*\n* @title 模态框中行过滤\n* @description 通过Modal组件来展示表格的过滤相关能力,并且通过filterDropdownIncludeKeys设置可选条件\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Modal,Button} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns29 = [\n {\n title: \"姓名\",\n width: 180,\n dataIndex: \"name\",\n key: \"name\",\n filterType: \"text\",\n filterDropdown: \"show\",\n filterDropdownIncludeKeys: ['LIKE', 'EQ']\n },\n {\n title: \"年龄\",\n width: 170,\n dataIndex: \"age\",\n key: \"age\",\n filterType: \"number\",\n filterDropdown: \"show\",\n filterDropdownType: \"number\",\n filterDropdownIncludeKeys: ['EQ'],\n filterInputNumberOptions: {\n max: 200,\n min: 0,\n step: 1,\n precision: 0\n }\n },\n {\n title: \"日期\",\n width: 200,\n dataIndex: \"date\",\n key: \"date\",\n filterType: \"date\",\n filterDropdown: \"show\",\n format: \"YYYY-MM-DD\"\n }\n];\n\nconst data29 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\nclass Demo29 extends Component {\n constructor() {\n super();\n this.state = {\n show: false\n }\n this.close = this.close.bind(this);\n this.open = this.open.bind(this);\n }\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n close() {\n this.setState({\n show: false\n });\n }\n open() {\n this.setState({\n show: true\n });\n }\n render() {\n return (\n \n 过滤行\n \n \n ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认300ms\n filterable={true}//是否开启过滤数据功能\n bordered\n columns={columns29}\n data={data29} />\n \n \n \n )\n }\n}\n\n", "desc": " 通过Modal组件来展示表格的过滤相关能力,并且通过filterDropdownIncludeKeys设置可选条件" }, { "example": _react2['default'].createElement(Demo16, null), "title": " 无数据时显示", "code": "/**\n*\n* @title 无数据时显示\n* @description 无数据时显示效果展示(可自定义)\n *\n* import {Table} from 'tinper-bee';\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns10 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n ];\n \n const data10 = [\n \n ];\n\n const emptyFunc = () => 这里没有数据!\n \n class Demo10 extends Component {\n render() {\n return ;\n }\n }\n\n", "desc": " 无数据时显示效果展示(可自定义)" }, { "example": _react2['default'].createElement(Demo17, null), "title": " loading表格", "code": "/**\n*\n* @title loading表格\n* @description loading可以传boolean或者obj对象,obj为bee-loading组件的参数类型\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport {Button} from \"tinper-bee\";\n\nconst columns17 = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n render(text, record, index) {\n return (\n {\n alert('这是第'+index+'列,内容为:'+text);\n }}\n >\n 一些操作\n \n );\n }\n }\n];\n\nconst data17 = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\nclass Demo17 extends Component {\n constructor(props){\n super(props);\n this.state = {\n loading : true\n }\n }\n changeLoading = () => {\n this.setState({\n loading : !this.state.loading\n })\n }\n render() {\n return (\n \n
\n
标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n // loading={this.state.loading}或者是boolean\n loading={{show:this.state.loading,loadingType:\"line\"}}\n />\n \n );\n }\n}\n\n\n", "desc": " loading可以传boolean或者obj对象,obj为bee-loading组件的参数类型" }, { "example": _react2['default'].createElement(Demo18, null), "title": " 多表头", "code": "/**\n *\n * @title 多表头\n * @description columns[n] 可以内嵌 children,以渲染分组表头。\n * 自定义表头高度需要传headerHeight,注:修改th的padding top和bottom置为0,否则会有影响\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport {Button} from \"tinper-bee\";\n\nconst { ColumnGroup, Column } = Table;\n\nconst columns = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: 100,\n fixed: \"left\"\n },\n {\n title: \"Other\",\n width:600,\n children: [\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: 200\n },\n {\n title: \"Address\",\n children: [\n {\n title: \"Street\",\n dataIndex: \"street\",\n key: \"street\",\n width: 200\n },\n {\n title: \"Block\",\n children: [\n {\n title: \"Building\",\n dataIndex: \"building\",\n key: \"building\",\n width: 100\n },\n {\n title: \"Door No.\",\n dataIndex: \"number\",\n key: \"number\",\n width: 100\n }\n ]\n }\n ]\n }\n ]\n },\n {\n title: \"Company\",\n width:400,\n children: [\n {\n title: \"Company Address\",\n dataIndex: \"companyAddress\",\n key: \"companyAddress\",\n width:200,\n },\n {\n title: \"Company Name\",\n dataIndex: \"companyName\",\n key: \"companyName\",\n width:200,\n }\n ]\n },\n {\n title: \"Gender\",\n dataIndex: \"gender\",\n key: \"gender\",\n width: 60,\n fixed: \"right\"\n }\n];\n\nconst data = [];\nfor (let i = 0; i < 20; i++) {\n data.push({\n key: i,\n name: \"John Brown\",\n age: i + 1,\n street: \"Lake Park\",\n building: \"C\",\n number: 2035,\n companyAddress: \"Lake Street 42\",\n companyName: \"SoftLake Co\",\n gender: \"M\"\n });\n}\n\nclass Demo3 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " columns[n] 可以内嵌 children,以渲染分组表头。", "scss_code": ".demo3{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}" }, { "example": _react2['default'].createElement(Demo19, null), "title": " 表格行、列合并", "code": "/**\n*\n* @title 表格行、列合并\n* @description 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst renderContent = (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n};\n\nconst columns = [{\n title: 'Name',\n key: \"name\",\n dataIndex: 'name',\n render: (text, row, index) => {\n if (index < 4) {\n return {text};\n }\n return {\n children: {text},\n props: {\n colSpan: 5,\n },\n };\n },\n}, {\n title: 'Age',\n key: \"Age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: 'Home phone',\n colSpan: 2,\n key: \"tel\",\n dataIndex: 'tel',\n render: (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 2) {\n obj.props.rowSpan = 2;\n }\n if (index === 3) {\n obj.props.rowSpan = 0;\n }\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n },\n}, {\n title: 'Phone',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: 'Address',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\n\nconst data = [{\n key: '1',\n name: 'John Brown',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: 'New York No. 1 Lake Park',\n}, {\n key: '2',\n name: 'Jim Green',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: 'London No. 1 Lake Park',\n}, {\n key: '3',\n name: 'Joe Black',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Sidney No. 1 Lake Park',\n}, {\n key: '4',\n name: 'Jim Red',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'London No. 2 Lake Park',\n}, {\n key: '5',\n name: 'Jake White',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Dublin No. 2 Lake Park',\n}];\n\nclass Demo15 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n\n", "desc": " 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。" }, { "example": _react2['default'].createElement(Demo20, null), "title": " 多功能表格", "code": "/**\n *\n * @title 多功能表格\n * @description 多列排序、全选功能、合计(通过使用的封装好的功能方法实现复杂功能,简单易用!)新增回调函数(sorterClick)\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Checkbox,Button,Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\nimport sort from \"tinper-bee/lib/sort.js\";;\nimport sum from \"tinper-bee/lib/sum.js\";;\n\nconst columns13 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n className:'dfasd',\n width: 200\n },\n {\n title: \"功力指数\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"成绩\",\n dataIndex: \"e\",\n key: \"e\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200\n }\n];\n\nconst data13 = [\n { a: \"杨过\", b: 675, c: 30, d: \"内行\",e:100, key: \"2\" },\n { a: \"令狐冲\", b: 43, c: 41, d: \"大侠\",e:90, key: \"1\" },\n { a: \"令狐冲1\", b: 43, c: 81, d: \"大侠\", e:120,key: \"4\" },\n { a: \"令狐冲2\", b: 43, c: 81, d: \"大侠\", e:130,key: \"5\" },\n { a: \"郭靖\", b: 153, c: 25, d: \"大侠\",e:90, key: \"3\" }\n];\n\n\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\nlet ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);\n\nclass Demo13 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data13: data13,\n selectedRow: this.selectedRow,\n selectDisabled: this.selectDisabled\n };\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n selectDisabled = (record, index) => {\n // console.log(record);\n if (index === 1) {\n return true;\n }\n return false;\n };\n selectedRow = (record, index) => {\n // console.log(record);\n if (index === 0) {\n return true;\n }\n return false;\n };\n onClick = () => {\n this.setState({\n selectedRow: function() {}\n });\n };\n\n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n let sortObj = {\n mode:'multiple'\n }\n \n return (\n \n \n \n
\n );\n }\n}\n", "desc": " 多列排序、全选功能、合计(通过使用的封装好的功能方法实现复杂功能,简单易用!)新增回调函数(sorterClick)" }, { "example": _react2['default'].createElement(Demo21, null), "title": " 合并列后合计", "code": "/**\n *\n * @title 合并列后合计\n * @description 合并标题后的合计,且支持多字段统计(通过使用的封装好的功能方法实现复杂功能,简单易用!)\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Button} from \"tinper-bee\";\nimport { Table } from 'tinper-bee'; \nimport sum from \"tinper-bee/lib/sum.js\";;\n \nlet ComplexTable = sum(Table);\n\nconst columns = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: 100,\n fixed: \"left\"\n },\n {\n title: \"Other\",\n children: [\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: 200,\n sumCol: true,\n },\n {\n title: \"Address\",\n children: [\n {\n title: \"Street\",\n dataIndex: \"street\",\n key: \"street\",\n width: 200\n },\n {\n title: \"Block\",\n children: [\n {\n title: \"Building\",\n dataIndex: \"building\",\n key: \"building\",\n width: 100\n },\n {\n title: \"Door No.\",\n dataIndex: \"number\",\n key: \"number\",\n // width: 100,\n sumCol: true,\n }\n ]\n }\n ]\n }\n ]\n },\n // {\n // title: \"Company\",\n // children: [\n // {\n // title: \"Company Address\",\n // dataIndex: \"companyAddress\",\n // key: \"companyAddress\",\n // width: 100,\n // },\n // {\n // title: \"Company Name\",\n // dataIndex: \"companyName\",\n // key: \"companyName\",\n // width: 100,\n // }\n // ]\n // },\n {\n title: \"Gender\",\n dataIndex: \"gender\",\n key: \"gender\",\n width: 80,\n fixed: \"right\"\n }\n];\n\nfunction getData(){\n const data = [];\n for (let i = 0; i < 5; i++) {\n data.push({\n key: i,\n name: \"John Brown\"+i,\n age: i + Math.floor(Math.random()*10),\n street: \"Lake Park\",\n building: \"C\",\n number: 20 * Math.floor(Math.random()*10),\n companyAddress: \"Lake Street 42\",\n companyName: \"SoftLake Co\",\n gender: \"M\"\n });\n }\n return data;\n}\n\nclass Demo18 extends Component {\n \n constructor(props) {\n super(props);\n this.state = {\n data: getData()\n };\n }\n\n changeData = ()=>{\n this.setState({\n data: getData()\n });\n }\n\n render() {\n const {data} = this.state;\n return (\n \n \n\n \n
\n );\n }\n}\n\n", "desc": " 合并标题后的合计,且支持多字段统计(通过使用的封装好的功能方法实现复杂功能,简单易用!)" }, { "example": _react2['default'].createElement(Demo22, null), "title": " 选中行颜色、表头表体", "code": "/**\n*\n* @title 选中行颜色、表头表体\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip,} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width:80 , className:\"rowClassName\"},\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo26 extends Component {\n\n constructor(props){\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n {\n if (this.state.selectedRowIndex == index) {\n return 'selected';\n } else {\n return '';\n }\n }}\n onRowClick={(record,index,indent)=>{\n this.setState({ \n selectedRowIndex: index\n });\n }}\n title={currentData => 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n /> \n );\n }\n}\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo23, null), "title": " 主子表", "code": "/**\n *\n * @title 主子表\n * @description 主表点击子表联动\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns7 = [\n { title: \"班级\", dataIndex: \"a\", key: \"a\" },\n { title: \"人数\", dataIndex: \"b\", key: \"b\" },\n { title: \"班主任\", dataIndex: \"c\", key: \"c\" },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data7 = [\n { a: \"02级一班\", b: \"2\", c: \"欧阳锋\", d: \"大侠\", key: \"1\" },\n { a: \"03级二班\", b: \"3\", c: \"归海一刀\", d: \"大侠\", key: \"2\" },\n { a: \"05级三班\", b: \"1\", c: \"一拳超人\", d: \"愣头青\", key: \"3\" }\n];\n\nconst columns7_1 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\" },\n { title: \"班级\", dataIndex: \"b\", key: \"b\" },\n { title: \"系别\", dataIndex: \"c\", key: \"c\" }\n];\n\nclass Demo7 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n children_data: []\n };\n }\n\n rowclick = (record, index) => {\n if (record.a === \"02级一班\") {\n this.setState({\n children_data: [\n { a: \"郭靖\", b: \"02级一班\", c: \"文学系\", key: \"1\" },\n { a: \"黄蓉\", b: \"02级一班\", c: \"文学系\", key: \"2\" }\n ]\n });\n } else if (record.a === \"03级二班\") {\n this.setState({\n children_data: [\n { a: \"杨过\", b: \"03级二班\", c: \"外语系\", key: \"1\" },\n { a: \"小龙女\", b: \"03级二班\", c: \"外语系\", key: \"2\" },\n { a: \"傻姑\", b: \"03级二班\", c: \"外语系\", key: \"3\" }\n ]\n });\n } else if (record.a === \"05级三班\") {\n this.setState({\n children_data: [{ a: \"金圣叹\", b: \"05级三班\", c: \"美术系\", key: \"1\" }]\n });\n }\n };\n\n render() {\n return (\n \n
标题: 我是主表
}\n />\n 标题: 我是子表
}\n />\n \n );\n }\n}\n\n\n", "desc": " 主表点击子表联动" }, { "example": _react2['default'].createElement(Demo24, null), "title": " 表格+分页", "code": "/**\n *\n * @title 表格+分页\n * @description 点击分页联动表格\n */\n\nimport React, { Component } from \"react\";\nimport {Pagination} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst columns8 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst pageData = {\n 1: [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n ],\n 2: [\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, d: \"大侠\", key: \"1\" },\n { a: \"芙蓉妹妹\", b: \"女\", c: 23, d: \"内行\", key: \"2\" }\n ]\n};\n\nclass Demo8 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: pageData[1],\n activePage: 1\n };\n }\n\n handleSelect(eventKey) {\n this.setState({\n data: pageData[eventKey],\n activePage: eventKey\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\n", "desc": " 点击分页联动表格", "scss_code": ".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}" }, { "example": _react2['default'].createElement(Demo25, null), "title": " 表格+搜索", "code": "/**\n *\n * @title 表格+搜索\n * @description 搜索刷新表格数据\n *\n *\n * import {Table} from 'tinper-bee';\n */\n\nimport React, { Component } from \"react\";\nimport {Icon,FormControl,InputGroup} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nclass Search extends Component {\n state = {\n searchValue: \"\",\n empty: false\n };\n\n /**\n * 搜索\n */\n handleSearch = () => {\n let { onSearch } = this.props;\n this.setState({\n empty: true\n });\n onSearch && onSearch(this.state.searchValue);\n };\n\n /**\n * 捕获回车\n * @param e\n */\n handleKeyDown = e => {\n if (e.keyCode === 13) {\n this.handleSearch();\n }\n };\n\n /**\n * 输入框改变\n * @param e\n */\n handleChange = (e) => {\n this.setState({\n searchValue: e\n });\n };\n\n /**\n * 清空输入框\n */\n emptySearch = () => {\n let { onEmpty } = this.props;\n this.setState({\n searchValue: \"\",\n empty: false\n });\n onEmpty && onEmpty();\n };\n\n render() {\n return (\n \n \n {this.state.empty ? (\n \n ) : null}\n\n \n \n \n \n );\n }\n}\n\nconst columns9 = [\n {\n title: \"姓名\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst userData = [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n];\n\nclass Demo9 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: userData\n };\n }\n\n handleSearch = value => {\n if (value === \"\") {\n return this.setState({\n data: userData\n });\n }\n let regExp = new RegExp(value, \"ig\");\n let data = userData.filter(item => regExp.test(item.a));\n this.setState({\n data\n });\n };\n\n handleEmpty = () => {\n this.setState({\n data: userData\n });\n };\n\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 搜索刷新表格数据" }, { "example": _react2['default'].createElement(Demo26, null), "title": " 编辑态表格", "code": "/**\n*\n* @title 编辑态表格\n* @description 这是带有多种不同格式的编辑态表格(编辑态是通过使用不同的render来达到不同编辑格式)\n*\n*/\n\nimport React from \"react\";\nimport {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from \"tinper-bee\";\nimport { Table, Datepicker } from 'tinper-bee';\nimport renderInput from \"tinper-bee/lib/InputRender.js\";;\nimport renderDate from \"tinper-bee/lib/DateRender.js\";;\nimport renderSelect from \"tinper-bee/lib/SelectRender.js\";;\n\nconst InputRender = renderInput(Form, FormControl, Icon);\nconst DateRender = renderDate(Datepicker, Icon);\nconst SelectRender = renderSelect(Select, Icon);\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\nconst dataSource = [\n {\n key: \"boyuzhou\",\n value: \"jack\"\n },\n {\n key: \"renhualiu\",\n value: \"lucy\"\n },\n {\n key: \"yuzhao\",\n value: \"yiminghe\"\n }\n];\nclass Demo14 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n number: \"10\",\n age: \"y\",\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n number: \"100\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n number: \"1000\",\n age: \"n\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n number: \"9999\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n }\n ],\n count: 4\n };\n this.columns = [\n {\n title: \"普通输入\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n />\n )\n },\n {\n title: \"货币输入\",\n dataIndex: \"number\",\n key: \"number\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n reg={/^[0-9]+$/}\n />\n )\n },\n {\n title: \"复选\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"下拉框\",\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n \n \n \n \n \n );\n }\n },\n {\n title: \"年月日\",\n dataIndex: \"datepicker\",\n key: \"datepicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"年月\",\n dataIndex: \"MonthPicker\",\n key: \"MonthPicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n }\n check = (flag, obj) => {\n console.log(flag);\n console.log(obj);\n };\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onCheckChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onSelectChange = (index, key) => {\n return value => {\n console.log(`selected ${value}`);\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDateChange = d => {\n console.log(d);\n };\n onDateSelect = d => {\n console.log(d);\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n getData = () => {\n console.log(this.state.dataSource);\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n
\n
\n
\n
\n );\n }\n}\n\n\n", "desc": " 这是带有多种不同格式的编辑态表格(编辑态是通过使用不同的render来达到不同编辑格式)" }, { "example": _react2['default'].createElement(Demo27, null), "title": " 滚动加载", "code": "/**\n*\n* @title 滚动加载\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'50',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo30 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n", "desc": "", "scss_code": ".big-data tr td {\n // height: 48px;\n}" }, { "example": _react2['default'].createElement(Demo28, null), "title": " 嵌套子表格滚动加载", "code": "/**\n*\n* @title 嵌套子表格滚动加载\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst outColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n {\n alert(\"这是第\" + index + \"列,内容为:\" + text);\n }}\n >\n 一些操作\n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst innerColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n {\n alert(\"这是第\" + index + \"列,内容为:\" + text);\n }}\n >\n {'一些操作'+index}\n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [ ...new Array(10000) ].map((e, i) => {\n return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n })\n\n\n\n\n\nclass Demo31 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{\n 0:[\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ],\n 1: [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ],\n }\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 200;\n let innderData = [ ...new Array(100) ].map((e, i) => {\n return { a: index+\"-\"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: index+\"-\"+ i };\n })\n return (\n \n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon,该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格" }, { "example": _react2['default'].createElement(Demo29, null), "title": " 多功能表格滚动加载", "code": "/**\n*\n* @title 多功能表格滚动加载\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip,Checkbox,Icon,Popover} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\n\nlet ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);\n\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'50',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo32 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n\n render() {\n return (\n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n getSelectedDataFunc={this.getSelectedDataFunc}/>\n\n );\n }\n}\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo30, null), "title": " 树状表滚动加载", "code": "/**\n*\n* @title 树状表滚动加载\n* 【Tooltip】\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'150',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [ ...new Array(1000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n rs.children = [];\n for(let subi=0;subi<3;subi++){\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\n }\n }else{\n rs.children = [];\n for(let subi=0;subi<3;subi++){\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\n }\n }\n return rs;\n })\n\n\nclass Demo34 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n onExpandedRowsChange = (params)=>{\n console.log(params);\n }\n onExpand = (expandKeys)=>{\n console.log('expand---'+expandKeys);\n }\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo31, null), "title": " hover呼出操作栏", "code": "/**\n*\n* @title hover呼出操作栏\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip,Button} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 80, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 300 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n render(text, record, index) {\n return (\n \n );\n }\n }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\nclass Demo35 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n delFun=()=>{\n // console.log('click'+this.currentIndex);\n let {data} = this.state;\n data.splice(this.currentIndex,1);\n this.setState({\n data\n });\n }\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n getHoverContent=()=>{\n return
\n }\n render() {\n return (\n \n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n", "desc": "", "scss_code": ".opt-btns{\n .u-button{\n background-color: #505F79;\n border-color: #505F79;\n color: #fff;\n &:hover, &:active{\n background-color: #344563;\n border-color: #344563;\n }\n }\n}" }, { "example": _react2['default'].createElement(Demo32, null), "title": " 多功能表格", "code": "/**\n* @title 多功能表格\n* @description 根据列进行过滤、拖拽交换列综合使用案例\n*/\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Popover} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\n //Cloumns1\nfunction getCloumns(){\n const column = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 100, \n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 100\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 100\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 100\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 300\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 100,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 100\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 100\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 100\n },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:100,\n fixed: \"right\",\n render(text, record, index) {\n return (\n \n )\n }\n }\n ];\n return column;\n}\n\nconst dataList = [ \n { \n index: 1, \n orderCode:\"2343\", \n supplierName: \"xxx\",\n type_name: \"123\",\n purchasing:'内行', \n purchasingGroup:\"323\",\n voucherDate:\"kkkk\",\n approvalState_name:\"vvvv\",\n confirmState_name:\"aaaa\",\n closeState_name:\"vnnnnn\",\n d:\"操作\",\n key: \"1\"\n }, \n { \n index: 2, \n _checked:true,\n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"2操作\",\n key: \"2\"\n },\n { \n index: 3, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n _disabled:true,\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"3操作\",\n key: \"3\"\n },\n { \n index: 4, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"4操作\",\n key: \"4\"\n },\n]\n\nconst DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);\n\nconst defaultProps25 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo25 extends Component {\n constructor(props) {\n super(props);\n }\n\n getSelectedDataFunc=(data)=>{\n console.log(\"data\",data);\n }\n \n getCloumnsScroll=(columns)=>{\n let sum = 0;\n columns.forEach((da)=>{\n sum += da.width;\n })\n console.log(\"sum\",sum);\n return (sum);\n }\n\n selectedRow=(record, index)=>{\n\n }\n\n render() {\n let columns = getCloumns();\n \n return \n \n
\n }\n}\nDemo25.defaultProps = defaultProps25;\n\n\n", "desc": " 根据列进行过滤、拖拽交换列综合使用案例" }, { "example": _react2['default'].createElement(Demo33, null), "title": " 增删改表格", "code": "/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格(此编辑功能未使用render组件)\n*\n*/\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport {Button,Icon,FormControl as Input,Popconfirm} from \"tinper-bee\";\nclass EditableCell extends React.Component {\n state = {\n value: this.props.value,\n editable: false\n };\n handleChange = e => {\n const value = e;\n this.setState({ value });\n };\n check = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n edit = () => {\n this.setState({ editable: true });\n };\n handleKeydown = event => {\n if (event.keyCode == 13) {\n this.check();\n }\n };\n render() {\n const { value, editable } = this.state;\n return (\n \n {editable ? (\n
\n \n \n
\n ) : (\n
\n {value || \" \"}\n \n
\n )}\n
\n );\n }\n}\n\nclass Demo2 extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [\n {\n title: \"姓名\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"30%\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"年龄\",\n dataIndex: \"age\",\n key: \"age\"\n },\n {\n title: \"你懂的\",\n dataIndex: \"address\",\n key: \"address\"\n },\n {\n title: \"操作\",\n dataIndex: \"operation\",\n key: \"operation\",\n render: (text, record, index) => {\n return this.state.dataSource.length > 1 ? (\n \n \n \n ) : null;\n }\n }\n ];\n\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n age: \"18\",\n address: \"96, 77, 89\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n age: \"16\",\n address: \"90, 70, 80\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n age: \"17\",\n address: \"80, 60, 80\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n age: \"20\",\n address: \"120, 60, 90\"\n }\n ],\n count: 4\n };\n }\n onCellChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDelete = (index) => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n }\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: `100 100 100`\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n );\n }\n}\n\n\n", "desc": " 这是带有增删改功能的表格(此编辑功能未使用render组件)" }];
var Demo = function (_Component) {
_inherits(Demo, _Component);
@@ -1473,7 +1473,7 @@
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
- default: obj
+ "default": obj
};
}
@@ -7832,9 +7832,8535 @@
'use strict';
- var Table = __webpack_require__(83);
- var Column = __webpack_require__(459);
- var ColumnGroup = __webpack_require__(460);
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _Drawer = __webpack_require__(83);
+
+ var _Drawer2 = _interopRequireDefault(_Drawer);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ exports["default"] = _Drawer2["default"];
+ module.exports = exports['default'];
+
+/***/ }),
+/* 83 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _reactDom = __webpack_require__(2);
+
+ var _reactDom2 = _interopRequireDefault(_reactDom);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _common = __webpack_require__(84);
+
+ var _reactTransitionGroup = __webpack_require__(85);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = {
+ placement: _propTypes2["default"].oneOf(['left', 'right', 'top', 'bottom']),
+ hasHeader: _propTypes2["default"].bool,
+ show: _propTypes2["default"].bool,
+ title: _propTypes2["default"].string,
+ className: _propTypes2["default"].string,
+ showMask: _propTypes2["default"].bool,
+ maskClosable: _propTypes2["default"].bool,
+ zIndex: _propTypes2["default"].number,
+ showClose: _propTypes2["default"].bool,
+ width: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number]),
+ height: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number]),
+ destroyOnClose: _propTypes2["default"].bool,
+ container: _propTypes2["default"].string
+ };
+
+ var defaultProps = {
+ placement: 'left',
+ hasHeader: true,
+ show: false,
+ showMask: true,
+ maskClosable: true,
+ zIndex: 100000,
+ showClose: false,
+ width: 'auto',
+ height: 'auto',
+ destroyOnClose: false,
+ container: 'body'
+ };
+
+ var DrawerContext = _react2["default"].createContext(null);
+
+ var Drawer = function (_Component) {
+ _inherits(Drawer, _Component);
+
+ function Drawer(props) {
+ _classCallCheck(this, Drawer);
+
+ var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+ _this.state = {
+ showDrawer: true,
+ width: '0',
+ push: false
+ };
+ _this.drawer = null;
+ _this.parentDrawer = null;
+ (0, _common.bindAll)(_this, ['fMaskClick', 'fDrawerTransitionEnd', 'renderMask', 'renderClose', 'fCloseClick', 'renderBody', 'renderAll']);
+ return _this;
+ }
+
+ Drawer.prototype.componentDidUpdate = function componentDidUpdate(preProps) {
+ //在有父级抽屉时候,子级触发父级向外移动一段距离
+ if (preProps.show != this.props.show && this.parentDrawer) {
+ if (this.props.show) {
+ this.parentDrawer.push();
+ } else {
+ this.parentDrawer.pull();
+ }
+ }
+ };
+
+ Drawer.prototype.push = function push() {
+ this.setState({
+ push: true
+ });
+ };
+
+ Drawer.prototype.pull = function pull() {
+ this.setState({
+ push: false
+ });
+ };
+
+ Drawer.prototype.fMaskClick = function fMaskClick() {
+ var maskClosable = this.props.maskClosable;
+
+ if (maskClosable) {
+ var onClose = this.props.onClose;
+
+ onClose && onClose();
+ }
+ };
+
+ Drawer.prototype.fCloseClick = function fCloseClick() {
+ var onClose = this.props.onClose;
+
+ onClose && onClose();
+ };
+
+ Drawer.prototype.fDrawerTransitionEnd = function fDrawerTransitionEnd(e) {};
+
+ Drawer.prototype.renderMask = function renderMask() {
+ var _props = this.props,
+ show = _props.show,
+ showMask = _props.showMask,
+ fMaskClick = _props.fMaskClick;
+ //mask样式
+
+ var maskStyle = void 0;
+ if (show) {
+ maskStyle = {
+ opacity: 1,
+ width: '100%'
+ };
+ } else {
+ maskStyle = {
+ opacity: 0,
+ width: 0
+ };
+ }
+ return showMask ? _react2["default"].createElement('div', { className: 'drawer-mask', style: maskStyle, onClick: this.fMaskClick }) : null;
+ };
+
+ Drawer.prototype.renderClose = function renderClose() {
+ var showClose = this.props.showClose;
+
+ return showClose ? _react2["default"].createElement(
+ 'i',
+ { className: 'drawer-close', onClick: this.fCloseClick },
+ '\xD7'
+ ) : null;
+ };
+
+ Drawer.prototype.renderBody = function renderBody() {
+ var _this2 = this;
+
+ var _props2 = this.props,
+ destroyOnClose = _props2.destroyOnClose,
+ show = _props2.show;
+
+ if (destroyOnClose && !show) {
+ return null;
+ }
+ var _props3 = this.props,
+ hasHeader = _props3.hasHeader,
+ title = _props3.title,
+ children = _props3.children,
+ width = _props3.width,
+ height = _props3.height,
+ placement = _props3.placement;
+ var push = this.state.push;
+ //抽屉类
+
+ var drawerClass = (0, _classnames2["default"])('drawer', 'drawer-' + placement);
+ //根据位置获取抽屉样式
+ var translateHideMap = {
+ left: 'translateX(-100%)',
+ right: 'translateX(100%)',
+ top: 'translateY(-100%)',
+ bottom: 'translateY(100%)'
+ };
+ var translateShow = 'translate(0,0)';
+ if (push) {
+ var pushNum = 50;
+ var translateShowMap = {
+ left: 'translate(' + pushNum + 'px,0)',
+ right: 'translate(-' + pushNum + 'px,0)',
+ top: 'translate(0,' + pushNum + 'px)',
+ bottom: 'translate(0,-' + pushNum + 'px)'
+ };
+ translateShow = translateShowMap[placement];
+ }
+ var translate = show ? translateShow : translateHideMap[placement];
+ //抽屉面板样式
+ if ((0, _common.isNumber)(width)) {
+ width = width + 'px';
+ }
+ if ((0, _common.isNumber)(height)) {
+ height = height + 'px';
+ }
+ if (placement == 'top' || placement == 'bottom') {
+ if (width == 'auto') {
+ width = '100%';
+ }
+ }
+ if (placement == 'left' || placement == 'right') {
+ if (height == 'auto') {
+ height = '100%';
+ }
+ }
+ var drawerStyle = {
+ transform: translate,
+ WebkitTransform: translate,
+ width: width,
+ height: height
+ };
+ var closer = this.renderClose();
+ var header = hasHeader ? _react2["default"].createElement(
+ 'div',
+ { className: 'drawer-header' },
+ _react2["default"].createElement(
+ 'div',
+ { className: 'drawer-header-title' },
+ title
+ )
+ ) : '';
+ return _react2["default"].createElement(
+ DrawerContext.Provider,
+ { value: this },
+ _react2["default"].createElement(
+ 'div',
+ { ref: function ref(drawer) {
+ _this2.drawer = drawer;
+ }, onTransitionEnd: this.fDrawerTransitionEnd, className: drawerClass, style: drawerStyle },
+ closer,
+ header,
+ _react2["default"].createElement(
+ 'div',
+ { className: 'drawer-body' },
+ children
+ )
+ )
+ );
+ };
+
+ Drawer.prototype.renderAll = function renderAll(value) {
+ var _props4 = this.props,
+ show = _props4.show,
+ className = _props4.className,
+ zIndex = _props4.zIndex;
+ //容器类
+
+ var drawercClass = (0, _classnames2["default"])('drawerc', className);
+ //容器样式
+ var drawercStyle = { zIndex: zIndex };
+ if (show) {
+ drawercStyle.width = '100%';
+ } else {
+ drawercStyle.width = 0;
+ }
+ //获取父级抽屉
+ this.parentDrawer = value;
+
+ return _react2["default"].createElement(
+ 'div',
+ { className: drawercClass, style: drawercStyle },
+ this.renderMask(),
+ this.renderBody()
+ );
+ };
+
+ Drawer.prototype.render = function render() {
+ var container = this.props.container;
+
+ var conDom = document.querySelector(container);
+
+ return _reactDom2["default"].createPortal(_react2["default"].createElement(
+ DrawerContext.Consumer,
+ null,
+ this.renderAll
+ ), conDom);
+ };
+
+ return Drawer;
+ }(_react.Component);
+
+ Drawer.propTypes = propTypes;
+ Drawer.defaultProps = defaultProps;
+
+ exports["default"] = Drawer;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 84 */
+/***/ (function(module, exports) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+ exports.bindAll = bindAll;
+ exports.type = type;
+ exports.isNumber = isNumber;
+ function bindAll(context, arrFunc) {
+ arrFunc.forEach(function (item) {
+ context[item] = context[item].bind(context);
+ });
+ }
+
+ function type(obj) {
+ var toString = Object.prototype.toString;
+ return toString.call(obj);
+ }
+
+ function isNumber(obj) {
+ return type(obj) == '[object Number]';
+ }
+
+/***/ }),
+/* 85 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ exports.__esModule = true;
+ exports.Transition = exports.TransitionGroup = exports.ReplaceTransition = exports.CSSTransition = void 0;
+
+ var _CSSTransition = _interopRequireDefault(__webpack_require__(86));
+
+ exports.CSSTransition = _CSSTransition.default;
+
+ var _ReplaceTransition = _interopRequireDefault(__webpack_require__(93));
+
+ exports.ReplaceTransition = _ReplaceTransition.default;
+
+ var _TransitionGroup = _interopRequireDefault(__webpack_require__(94));
+
+ exports.TransitionGroup = _TransitionGroup.default;
+
+ var _Transition = _interopRequireDefault(__webpack_require__(90));
+
+ exports.Transition = _Transition.default;
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 86 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {"use strict";
+
+ exports.__esModule = true;
+ exports.default = void 0;
+
+ var PropTypes = _interopRequireWildcard(__webpack_require__(6));
+
+ var _addClass = _interopRequireDefault(__webpack_require__(87));
+
+ var _removeClass = _interopRequireDefault(__webpack_require__(89));
+
+ var _react = _interopRequireDefault(__webpack_require__(1));
+
+ var _Transition = _interopRequireDefault(__webpack_require__(90));
+
+ var _PropTypes = __webpack_require__(92);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+
+ var addClass = function addClass(node, classes) {
+ return node && classes && classes.split(' ').forEach(function (c) {
+ return (0, _addClass.default)(node, c);
+ });
+ };
+
+ var removeClass = function removeClass(node, classes) {
+ return node && classes && classes.split(' ').forEach(function (c) {
+ return (0, _removeClass.default)(node, c);
+ });
+ };
+ /**
+ * A transition component inspired by the excellent
+ * [ng-animate](http://www.nganimate.org/) library, you should use it if you're
+ * using CSS transitions or animations. It's built upon the
+ * [`Transition`](https://reactcommunity.org/react-transition-group/transition)
+ * component, so it inherits all of its props.
+ *
+ * `CSSTransition` applies a pair of class names during the `appear`, `enter`,
+ * and `exit` states of the transition. The first class is applied and then a
+ * second `*-active` class in order to activate the CSSS transition. After the
+ * transition, matching `*-done` class names are applied to persist the
+ * transition state.
+ *
+ * When the `in` prop is set to `true`, the child component will first receive
+ * the class `example-enter`, then the `example-enter-active` will be added in
+ * the next tick. `CSSTransition` [forces a
+ * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
+ * between before adding the `example-enter-active`. This is an important trick
+ * because it allows us to transition between `example-enter` and
+ * `example-enter-active` even though they were added immediately one after
+ * another. Most notably, this is what makes it possible for us to animate
+ * _appearance_.
+ */
+
+
+ var CSSTransition =
+ /*#__PURE__*/
+ function (_React$Component) {
+ _inheritsLoose(CSSTransition, _React$Component);
+
+ function CSSTransition() {
+ var _this;
+
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+
+ _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+
+ _this.onEnter = function (node, appearing) {
+ var _this$getClassNames = _this.getClassNames(appearing ? 'appear' : 'enter'),
+ className = _this$getClassNames.className;
+
+ _this.removeClasses(node, 'exit');
+
+ addClass(node, className);
+
+ if (_this.props.onEnter) {
+ _this.props.onEnter(node, appearing);
+ }
+ };
+
+ _this.onEntering = function (node, appearing) {
+ var _this$getClassNames2 = _this.getClassNames(appearing ? 'appear' : 'enter'),
+ activeClassName = _this$getClassNames2.activeClassName;
+
+ _this.reflowAndAddClass(node, activeClassName);
+
+ if (_this.props.onEntering) {
+ _this.props.onEntering(node, appearing);
+ }
+ };
+
+ _this.onEntered = function (node, appearing) {
+ var _this$getClassNames3 = _this.getClassNames('enter'),
+ doneClassName = _this$getClassNames3.doneClassName;
+
+ _this.removeClasses(node, appearing ? 'appear' : 'enter');
+
+ addClass(node, doneClassName);
+
+ if (_this.props.onEntered) {
+ _this.props.onEntered(node, appearing);
+ }
+ };
+
+ _this.onExit = function (node) {
+ var _this$getClassNames4 = _this.getClassNames('exit'),
+ className = _this$getClassNames4.className;
+
+ _this.removeClasses(node, 'appear');
+
+ _this.removeClasses(node, 'enter');
+
+ addClass(node, className);
+
+ if (_this.props.onExit) {
+ _this.props.onExit(node);
+ }
+ };
+
+ _this.onExiting = function (node) {
+ var _this$getClassNames5 = _this.getClassNames('exit'),
+ activeClassName = _this$getClassNames5.activeClassName;
+
+ _this.reflowAndAddClass(node, activeClassName);
+
+ if (_this.props.onExiting) {
+ _this.props.onExiting(node);
+ }
+ };
+
+ _this.onExited = function (node) {
+ var _this$getClassNames6 = _this.getClassNames('exit'),
+ doneClassName = _this$getClassNames6.doneClassName;
+
+ _this.removeClasses(node, 'exit');
+
+ addClass(node, doneClassName);
+
+ if (_this.props.onExited) {
+ _this.props.onExited(node);
+ }
+ };
+
+ _this.getClassNames = function (type) {
+ var classNames = _this.props.classNames;
+ var className = typeof classNames !== 'string' ? classNames[type] : classNames + '-' + type;
+ var activeClassName = typeof classNames !== 'string' ? classNames[type + 'Active'] : className + '-active';
+ var doneClassName = typeof classNames !== 'string' ? classNames[type + 'Done'] : className + '-done';
+ return {
+ className: className,
+ activeClassName: activeClassName,
+ doneClassName: doneClassName
+ };
+ };
+
+ return _this;
+ }
+
+ var _proto = CSSTransition.prototype;
+
+ _proto.removeClasses = function removeClasses(node, type) {
+ var _this$getClassNames7 = this.getClassNames(type),
+ className = _this$getClassNames7.className,
+ activeClassName = _this$getClassNames7.activeClassName,
+ doneClassName = _this$getClassNames7.doneClassName;
+
+ className && removeClass(node, className);
+ activeClassName && removeClass(node, activeClassName);
+ doneClassName && removeClass(node, doneClassName);
+ };
+
+ _proto.reflowAndAddClass = function reflowAndAddClass(node, className) {
+ // This is for to force a repaint,
+ // which is necessary in order to transition styles when adding a class name.
+ if (className) {
+ /* eslint-disable no-unused-expressions */
+ node && node.scrollTop;
+ /* eslint-enable no-unused-expressions */
+
+ addClass(node, className);
+ }
+ };
+
+ _proto.render = function render() {
+ var props = _extends({}, this.props);
+
+ delete props.classNames;
+ return _react.default.createElement(_Transition.default, _extends({}, props, {
+ onEnter: this.onEnter,
+ onEntered: this.onEntered,
+ onEntering: this.onEntering,
+ onExit: this.onExit,
+ onExiting: this.onExiting,
+ onExited: this.onExited
+ }));
+ };
+
+ return CSSTransition;
+ }(_react.default.Component);
+
+ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, _Transition.default.propTypes, {
+ /**
+ * The animation classNames applied to the component as it enters, exits or has finished the transition.
+ * A single name can be provided and it will be suffixed for each stage: e.g.
+ *
+ * `classNames="fade"` applies `fade-enter`, `fade-enter-active`, `fade-enter-done`,
+ * `fade-exit`, `fade-exit-active`, `fade-exit-done`, `fade-appear`, and `fade-appear-active`.
+ * Each individual classNames can also be specified independently like:
+ *
+ * ```js
+ * classNames={{
+ * appear: 'my-appear',
+ * appearActive: 'my-active-appear',
+ * enter: 'my-enter',
+ * enterActive: 'my-active-enter',
+ * enterDone: 'my-done-enter',
+ * exit: 'my-exit',
+ * exitActive: 'my-active-exit',
+ * exitDone: 'my-done-exit',
+ * }}
+ * ```
+ *
+ * If you want to set these classes using CSS Modules:
+ *
+ * ```js
+ * import styles from './styles.css';
+ * ```
+ *
+ * you might want to use camelCase in your CSS file, that way could simply spread
+ * them instead of listing them one by one:
+ *
+ * ```js
+ * classNames={{ ...styles }}
+ * ```
+ *
+ * @type {string | {
+ * appear?: string,
+ * appearActive?: string,
+ * enter?: string,
+ * enterActive?: string,
+ * enterDone?: string,
+ * exit?: string,
+ * exitActive?: string,
+ * exitDone?: string,
+ * }}
+ */
+ classNames: _PropTypes.classNamesShape,
+
+ /**
+ * A `` callback fired immediately after the 'enter' or 'appear' class is
+ * applied.
+ *
+ * @type Function(node: HtmlElement, isAppearing: bool)
+ */
+ onEnter: PropTypes.func,
+
+ /**
+ * A `` callback fired immediately after the 'enter-active' or
+ * 'appear-active' class is applied.
+ *
+ * @type Function(node: HtmlElement, isAppearing: bool)
+ */
+ onEntering: PropTypes.func,
+
+ /**
+ * A `` callback fired immediately after the 'enter' or
+ * 'appear' classes are **removed** and the `done` class is added to the DOM node.
+ *
+ * @type Function(node: HtmlElement, isAppearing: bool)
+ */
+ onEntered: PropTypes.func,
+
+ /**
+ * A `` callback fired immediately after the 'exit' class is
+ * applied.
+ *
+ * @type Function(node: HtmlElement)
+ */
+ onExit: PropTypes.func,
+
+ /**
+ * A `` callback fired immediately after the 'exit-active' is applied.
+ *
+ * @type Function(node: HtmlElement)
+ */
+ onExiting: PropTypes.func,
+
+ /**
+ * A `` callback fired immediately after the 'exit' classes
+ * are **removed** and the `exit-done` class is added to the DOM node.
+ *
+ * @type Function(node: HtmlElement)
+ */
+ onExited: PropTypes.func
+ }) : {};
+ var _default = CSSTransition;
+ exports.default = _default;
+ module.exports = exports["default"];
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
+
+/***/ }),
+/* 87 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = addClass;
+
+ var _hasClass = _interopRequireDefault(__webpack_require__(88));
+
+ function addClass(element, className) {
+ if (element.classList) element.classList.add(className);else if (!(0, _hasClass.default)(element, className)) if (typeof element.className === 'string') element.className = element.className + ' ' + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + ' ' + className);
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 88 */
+/***/ (function(module, exports) {
+
+ "use strict";
+
+ exports.__esModule = true;
+ exports.default = hasClass;
+
+ function hasClass(element, className) {
+ if (element.classList) return !!className && element.classList.contains(className);else return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1;
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 89 */
+/***/ (function(module, exports) {
+
+ 'use strict';
+
+ function replaceClassName(origClass, classToRemove) {
+ return origClass.replace(new RegExp('(^|\\s)' + classToRemove + '(?:\\s|$)', 'g'), '$1').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, '');
+ }
+
+ module.exports = function removeClass(element, className) {
+ if (element.classList) element.classList.remove(className);else if (typeof element.className === 'string') element.className = replaceClassName(element.className, className);else element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));
+ };
+
+/***/ }),
+/* 90 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {"use strict";
+
+ exports.__esModule = true;
+ exports.default = exports.EXITING = exports.ENTERED = exports.ENTERING = exports.EXITED = exports.UNMOUNTED = void 0;
+
+ var PropTypes = _interopRequireWildcard(__webpack_require__(6));
+
+ var _react = _interopRequireDefault(__webpack_require__(1));
+
+ var _reactDom = _interopRequireDefault(__webpack_require__(2));
+
+ var _reactLifecyclesCompat = __webpack_require__(91);
+
+ var _PropTypes = __webpack_require__(92);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+
+ var UNMOUNTED = 'unmounted';
+ exports.UNMOUNTED = UNMOUNTED;
+ var EXITED = 'exited';
+ exports.EXITED = EXITED;
+ var ENTERING = 'entering';
+ exports.ENTERING = ENTERING;
+ var ENTERED = 'entered';
+ exports.ENTERED = ENTERED;
+ var EXITING = 'exiting';
+ /**
+ * The Transition component lets you describe a transition from one component
+ * state to another _over time_ with a simple declarative API. Most commonly
+ * it's used to animate the mounting and unmounting of a component, but can also
+ * be used to describe in-place transition states as well.
+ *
+ * ---
+ *
+ * **Note**: `Transition` is a platform-agnostic base component. If you're using
+ * transitions in CSS, you'll probably want to use
+ * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
+ * instead. It inherits all the features of `Transition`, but contains
+ * additional features necessary to play nice with CSS transitions (hence the
+ * name of the component).
+ *
+ * ---
+ *
+ * By default the `Transition` component does not alter the behavior of the
+ * component it renders, it only tracks "enter" and "exit" states for the
+ * components. It's up to you to give meaning and effect to those states. For
+ * example we can add styles to a component when it enters or exits:
+ *
+ * ```jsx
+ * import { Transition } from 'react-transition-group';
+ *
+ * const duration = 300;
+ *
+ * const defaultStyle = {
+ * transition: `opacity ${duration}ms ease-in-out`,
+ * opacity: 0,
+ * }
+ *
+ * const transitionStyles = {
+ * entering: { opacity: 0 },
+ * entered: { opacity: 1 },
+ * };
+ *
+ * const Fade = ({ in: inProp }) => (
+ *
+ * {state => (
+ *
+ * I'm a fade Transition!
+ *
+ * )}
+ *
+ * );
+ * ```
+ *
+ * There are 4 main states a Transition can be in:
+ * - `'entering'`
+ * - `'entered'`
+ * - `'exiting'`
+ * - `'exited'`
+ *
+ * Transition state is toggled via the `in` prop. When `true` the component
+ * begins the "Enter" stage. During this stage, the component will shift from
+ * its current transition state, to `'entering'` for the duration of the
+ * transition and then to the `'entered'` stage once it's complete. Let's take
+ * the following example:
+ *
+ * ```jsx
+ * state = { in: false };
+ *
+ * toggleEnterState = () => {
+ * this.setState({ in: true });
+ * }
+ *
+ * render() {
+ * return (
+ * <>
+ *
+ * {state => (
+ * // ...
+ * )}
+ *
+ *
+ * >
+ * );
+ * }
+ * ```
+ *
+ * When the button is clicked the component will shift to the `'entering'` state
+ * and stay there for 500ms (the value of `timeout`) before it finally switches
+ * to `'entered'`.
+ *
+ * When `in` is `false` the same thing happens except the state moves from
+ * `'exiting'` to `'exited'`.
+ */
+
+ exports.EXITING = EXITING;
+
+ var Transition =
+ /*#__PURE__*/
+ function (_React$Component) {
+ _inheritsLoose(Transition, _React$Component);
+
+ function Transition(props, context) {
+ var _this;
+
+ _this = _React$Component.call(this, props, context) || this;
+ var parentGroup = context.transitionGroup; // In the context of a TransitionGroup all enters are really appears
+
+ var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
+ var initialStatus;
+ _this.appearStatus = null;
+
+ if (props.in) {
+ if (appear) {
+ initialStatus = EXITED;
+ _this.appearStatus = ENTERING;
+ } else {
+ initialStatus = ENTERED;
+ }
+ } else {
+ if (props.unmountOnExit || props.mountOnEnter) {
+ initialStatus = UNMOUNTED;
+ } else {
+ initialStatus = EXITED;
+ }
+ }
+
+ _this.state = {
+ status: initialStatus
+ };
+ _this.nextCallback = null;
+ return _this;
+ }
+
+ var _proto = Transition.prototype;
+
+ _proto.getChildContext = function getChildContext() {
+ return {
+ transitionGroup: null // allows for nested Transitions
+
+ };
+ };
+
+ Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
+ var nextIn = _ref.in;
+
+ if (nextIn && prevState.status === UNMOUNTED) {
+ return {
+ status: EXITED
+ };
+ }
+
+ return null;
+ }; // getSnapshotBeforeUpdate(prevProps) {
+ // let nextStatus = null
+ // if (prevProps !== this.props) {
+ // const { status } = this.state
+ // if (this.props.in) {
+ // if (status !== ENTERING && status !== ENTERED) {
+ // nextStatus = ENTERING
+ // }
+ // } else {
+ // if (status === ENTERING || status === ENTERED) {
+ // nextStatus = EXITING
+ // }
+ // }
+ // }
+ // return { nextStatus }
+ // }
+
+
+ _proto.componentDidMount = function componentDidMount() {
+ this.updateStatus(true, this.appearStatus);
+ };
+
+ _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+ var nextStatus = null;
+
+ if (prevProps !== this.props) {
+ var status = this.state.status;
+
+ if (this.props.in) {
+ if (status !== ENTERING && status !== ENTERED) {
+ nextStatus = ENTERING;
+ }
+ } else {
+ if (status === ENTERING || status === ENTERED) {
+ nextStatus = EXITING;
+ }
+ }
+ }
+
+ this.updateStatus(false, nextStatus);
+ };
+
+ _proto.componentWillUnmount = function componentWillUnmount() {
+ this.cancelNextCallback();
+ };
+
+ _proto.getTimeouts = function getTimeouts() {
+ var timeout = this.props.timeout;
+ var exit, enter, appear;
+ exit = enter = appear = timeout;
+
+ if (timeout != null && typeof timeout !== 'number') {
+ exit = timeout.exit;
+ enter = timeout.enter; // TODO: remove fallback for next major
+
+ appear = timeout.appear !== undefined ? timeout.appear : enter;
+ }
+
+ return {
+ exit: exit,
+ enter: enter,
+ appear: appear
+ };
+ };
+
+ _proto.updateStatus = function updateStatus(mounting, nextStatus) {
+ if (mounting === void 0) {
+ mounting = false;
+ }
+
+ if (nextStatus !== null) {
+ // nextStatus will always be ENTERING or EXITING.
+ this.cancelNextCallback();
+
+ var node = _reactDom.default.findDOMNode(this);
+
+ if (nextStatus === ENTERING) {
+ this.performEnter(node, mounting);
+ } else {
+ this.performExit(node);
+ }
+ } else if (this.props.unmountOnExit && this.state.status === EXITED) {
+ this.setState({
+ status: UNMOUNTED
+ });
+ }
+ };
+
+ _proto.performEnter = function performEnter(node, mounting) {
+ var _this2 = this;
+
+ var enter = this.props.enter;
+ var appearing = this.context.transitionGroup ? this.context.transitionGroup.isMounting : mounting;
+ var timeouts = this.getTimeouts();
+ var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
+ // if we are mounting and running this it means appear _must_ be set
+
+ if (!mounting && !enter) {
+ this.safeSetState({
+ status: ENTERED
+ }, function () {
+ _this2.props.onEntered(node);
+ });
+ return;
+ }
+
+ this.props.onEnter(node, appearing);
+ this.safeSetState({
+ status: ENTERING
+ }, function () {
+ _this2.props.onEntering(node, appearing);
+
+ _this2.onTransitionEnd(node, enterTimeout, function () {
+ _this2.safeSetState({
+ status: ENTERED
+ }, function () {
+ _this2.props.onEntered(node, appearing);
+ });
+ });
+ });
+ };
+
+ _proto.performExit = function performExit(node) {
+ var _this3 = this;
+
+ var exit = this.props.exit;
+ var timeouts = this.getTimeouts(); // no exit animation skip right to EXITED
+
+ if (!exit) {
+ this.safeSetState({
+ status: EXITED
+ }, function () {
+ _this3.props.onExited(node);
+ });
+ return;
+ }
+
+ this.props.onExit(node);
+ this.safeSetState({
+ status: EXITING
+ }, function () {
+ _this3.props.onExiting(node);
+
+ _this3.onTransitionEnd(node, timeouts.exit, function () {
+ _this3.safeSetState({
+ status: EXITED
+ }, function () {
+ _this3.props.onExited(node);
+ });
+ });
+ });
+ };
+
+ _proto.cancelNextCallback = function cancelNextCallback() {
+ if (this.nextCallback !== null) {
+ this.nextCallback.cancel();
+ this.nextCallback = null;
+ }
+ };
+
+ _proto.safeSetState = function safeSetState(nextState, callback) {
+ // This shouldn't be necessary, but there are weird race conditions with
+ // setState callbacks and unmounting in testing, so always make sure that
+ // we can cancel any pending setState callbacks after we unmount.
+ callback = this.setNextCallback(callback);
+ this.setState(nextState, callback);
+ };
+
+ _proto.setNextCallback = function setNextCallback(callback) {
+ var _this4 = this;
+
+ var active = true;
+
+ this.nextCallback = function (event) {
+ if (active) {
+ active = false;
+ _this4.nextCallback = null;
+ callback(event);
+ }
+ };
+
+ this.nextCallback.cancel = function () {
+ active = false;
+ };
+
+ return this.nextCallback;
+ };
+
+ _proto.onTransitionEnd = function onTransitionEnd(node, timeout, handler) {
+ this.setNextCallback(handler);
+ var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
+
+ if (!node || doesNotHaveTimeoutOrListener) {
+ setTimeout(this.nextCallback, 0);
+ return;
+ }
+
+ if (this.props.addEndListener) {
+ this.props.addEndListener(node, this.nextCallback);
+ }
+
+ if (timeout != null) {
+ setTimeout(this.nextCallback, timeout);
+ }
+ };
+
+ _proto.render = function render() {
+ var status = this.state.status;
+
+ if (status === UNMOUNTED) {
+ return null;
+ }
+
+ var _this$props = this.props,
+ children = _this$props.children,
+ childProps = _objectWithoutPropertiesLoose(_this$props, ["children"]); // filter props for Transtition
+
+
+ delete childProps.in;
+ delete childProps.mountOnEnter;
+ delete childProps.unmountOnExit;
+ delete childProps.appear;
+ delete childProps.enter;
+ delete childProps.exit;
+ delete childProps.timeout;
+ delete childProps.addEndListener;
+ delete childProps.onEnter;
+ delete childProps.onEntering;
+ delete childProps.onEntered;
+ delete childProps.onExit;
+ delete childProps.onExiting;
+ delete childProps.onExited;
+
+ if (typeof children === 'function') {
+ return children(status, childProps);
+ }
+
+ var child = _react.default.Children.only(children);
+
+ return _react.default.cloneElement(child, childProps);
+ };
+
+ return Transition;
+ }(_react.default.Component);
+
+ Transition.contextTypes = {
+ transitionGroup: PropTypes.object
+ };
+ Transition.childContextTypes = {
+ transitionGroup: function transitionGroup() {}
+ };
+ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
+ /**
+ * A `function` child can be used instead of a React element. This function is
+ * called with the current transition status (`'entering'`, `'entered'`,
+ * `'exiting'`, `'exited'`, `'unmounted'`), which can be used to apply context
+ * specific props to a component.
+ *
+ * ```jsx
+ *
+ * {state => (
+ *
+ * )}
+ *
+ * ```
+ */
+ children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,
+
+ /**
+ * Show the component; triggers the enter or exit states
+ */
+ in: PropTypes.bool,
+
+ /**
+ * By default the child component is mounted immediately along with
+ * the parent `Transition` component. If you want to "lazy mount" the component on the
+ * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
+ * mounted, even on "exited", unless you also specify `unmountOnExit`.
+ */
+ mountOnEnter: PropTypes.bool,
+
+ /**
+ * By default the child component stays mounted after it reaches the `'exited'` state.
+ * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
+ */
+ unmountOnExit: PropTypes.bool,
+
+ /**
+ * Normally a component is not transitioned if it is shown when the `` component mounts.
+ * If you want to transition on the first mount set `appear` to `true`, and the
+ * component will transition in as soon as the `` mounts.
+ *
+ * > Note: there are no specific "appear" states. `appear` only adds an additional `enter` transition.
+ */
+ appear: PropTypes.bool,
+
+ /**
+ * Enable or disable enter transitions.
+ */
+ enter: PropTypes.bool,
+
+ /**
+ * Enable or disable exit transitions.
+ */
+ exit: PropTypes.bool,
+
+ /**
+ * The duration of the transition, in milliseconds.
+ * Required unless `addEndListener` is provided.
+ *
+ * You may specify a single timeout for all transitions:
+ *
+ * ```jsx
+ * timeout={500}
+ * ```
+ *
+ * or individually:
+ *
+ * ```jsx
+ * timeout={{
+ * appear: 500,
+ * enter: 300,
+ * exit: 500,
+ * }}
+ * ```
+ *
+ * - `appear` defaults to the value of `enter`
+ * - `enter` defaults to `0`
+ * - `exit` defaults to `0`
+ *
+ * @type {number | { enter?: number, exit?: number, appear?: number }}
+ */
+ timeout: function timeout(props) {
+ var pt = process.env.NODE_ENV !== "production" ? _PropTypes.timeoutsShape : {};;
+ if (!props.addEndListener) pt = pt.isRequired;
+
+ for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+ args[_key - 1] = arguments[_key];
+ }
+
+ return pt.apply(void 0, [props].concat(args));
+ },
+
+ /**
+ * Add a custom transition end trigger. Called with the transitioning
+ * DOM node and a `done` callback. Allows for more fine grained transition end
+ * logic. **Note:** Timeouts are still used as a fallback if provided.
+ *
+ * ```jsx
+ * addEndListener={(node, done) => {
+ * // use the css transitionend event to mark the finish of a transition
+ * node.addEventListener('transitionend', done, false);
+ * }}
+ * ```
+ */
+ addEndListener: PropTypes.func,
+
+ /**
+ * Callback fired before the "entering" status is applied. An extra parameter
+ * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
+ *
+ * @type Function(node: HtmlElement, isAppearing: bool) -> void
+ */
+ onEnter: PropTypes.func,
+
+ /**
+ * Callback fired after the "entering" status is applied. An extra parameter
+ * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
+ *
+ * @type Function(node: HtmlElement, isAppearing: bool)
+ */
+ onEntering: PropTypes.func,
+
+ /**
+ * Callback fired after the "entered" status is applied. An extra parameter
+ * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
+ *
+ * @type Function(node: HtmlElement, isAppearing: bool) -> void
+ */
+ onEntered: PropTypes.func,
+
+ /**
+ * Callback fired before the "exiting" status is applied.
+ *
+ * @type Function(node: HtmlElement) -> void
+ */
+ onExit: PropTypes.func,
+
+ /**
+ * Callback fired after the "exiting" status is applied.
+ *
+ * @type Function(node: HtmlElement) -> void
+ */
+ onExiting: PropTypes.func,
+
+ /**
+ * Callback fired after the "exited" status is applied.
+ *
+ * @type Function(node: HtmlElement) -> void
+ */
+ onExited: PropTypes.func // Name the function so it is clearer in the documentation
+
+ } : {};
+
+ function noop() {}
+
+ Transition.defaultProps = {
+ in: false,
+ mountOnEnter: false,
+ unmountOnExit: false,
+ appear: false,
+ enter: true,
+ exit: true,
+ onEnter: noop,
+ onEntering: noop,
+ onEntered: noop,
+ onExit: noop,
+ onExiting: noop,
+ onExited: noop
+ };
+ Transition.UNMOUNTED = 0;
+ Transition.EXITED = 1;
+ Transition.ENTERING = 2;
+ Transition.ENTERED = 3;
+ Transition.EXITING = 4;
+
+ var _default = (0, _reactLifecyclesCompat.polyfill)(Transition);
+
+ exports.default = _default;
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
+
+/***/ }),
+/* 91 */
+/***/ (function(module, exports) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', { value: true });
+
+ /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ function componentWillMount() {
+ // Call this.constructor.gDSFP to support sub-classes.
+ var state = this.constructor.getDerivedStateFromProps(this.props, this.state);
+ if (state !== null && state !== undefined) {
+ this.setState(state);
+ }
+ }
+
+ function componentWillReceiveProps(nextProps) {
+ // Call this.constructor.gDSFP to support sub-classes.
+ // Use the setState() updater to ensure state isn't stale in certain edge cases.
+ function updater(prevState) {
+ var state = this.constructor.getDerivedStateFromProps(nextProps, prevState);
+ return state !== null && state !== undefined ? state : null;
+ }
+ // Binding "this" is important for shallow renderer support.
+ this.setState(updater.bind(this));
+ }
+
+ function componentWillUpdate(nextProps, nextState) {
+ try {
+ var prevProps = this.props;
+ var prevState = this.state;
+ this.props = nextProps;
+ this.state = nextState;
+ this.__reactInternalSnapshotFlag = true;
+ this.__reactInternalSnapshot = this.getSnapshotBeforeUpdate(
+ prevProps,
+ prevState
+ );
+ } finally {
+ this.props = prevProps;
+ this.state = prevState;
+ }
+ }
+
+ // React may warn about cWM/cWRP/cWU methods being deprecated.
+ // Add a flag to suppress these warnings for this special case.
+ componentWillMount.__suppressDeprecationWarning = true;
+ componentWillReceiveProps.__suppressDeprecationWarning = true;
+ componentWillUpdate.__suppressDeprecationWarning = true;
+
+ function polyfill(Component) {
+ var prototype = Component.prototype;
+
+ if (!prototype || !prototype.isReactComponent) {
+ throw new Error('Can only polyfill class components');
+ }
+
+ if (
+ typeof Component.getDerivedStateFromProps !== 'function' &&
+ typeof prototype.getSnapshotBeforeUpdate !== 'function'
+ ) {
+ return Component;
+ }
+
+ // If new component APIs are defined, "unsafe" lifecycles won't be called.
+ // Error if any of these lifecycles are present,
+ // Because they would work differently between older and newer (16.3+) versions of React.
+ var foundWillMountName = null;
+ var foundWillReceivePropsName = null;
+ var foundWillUpdateName = null;
+ if (typeof prototype.componentWillMount === 'function') {
+ foundWillMountName = 'componentWillMount';
+ } else if (typeof prototype.UNSAFE_componentWillMount === 'function') {
+ foundWillMountName = 'UNSAFE_componentWillMount';
+ }
+ if (typeof prototype.componentWillReceiveProps === 'function') {
+ foundWillReceivePropsName = 'componentWillReceiveProps';
+ } else if (typeof prototype.UNSAFE_componentWillReceiveProps === 'function') {
+ foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
+ }
+ if (typeof prototype.componentWillUpdate === 'function') {
+ foundWillUpdateName = 'componentWillUpdate';
+ } else if (typeof prototype.UNSAFE_componentWillUpdate === 'function') {
+ foundWillUpdateName = 'UNSAFE_componentWillUpdate';
+ }
+ if (
+ foundWillMountName !== null ||
+ foundWillReceivePropsName !== null ||
+ foundWillUpdateName !== null
+ ) {
+ var componentName = Component.displayName || Component.name;
+ var newApiName =
+ typeof Component.getDerivedStateFromProps === 'function'
+ ? 'getDerivedStateFromProps()'
+ : 'getSnapshotBeforeUpdate()';
+
+ throw Error(
+ 'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
+ componentName +
+ ' uses ' +
+ newApiName +
+ ' but also contains the following legacy lifecycles:' +
+ (foundWillMountName !== null ? '\n ' + foundWillMountName : '') +
+ (foundWillReceivePropsName !== null
+ ? '\n ' + foundWillReceivePropsName
+ : '') +
+ (foundWillUpdateName !== null ? '\n ' + foundWillUpdateName : '') +
+ '\n\nThe above lifecycles should be removed. Learn more about this warning here:\n' +
+ 'https://fb.me/react-async-component-lifecycle-hooks'
+ );
+ }
+
+ // React <= 16.2 does not support static getDerivedStateFromProps.
+ // As a workaround, use cWM and cWRP to invoke the new static lifecycle.
+ // Newer versions of React will ignore these lifecycles if gDSFP exists.
+ if (typeof Component.getDerivedStateFromProps === 'function') {
+ prototype.componentWillMount = componentWillMount;
+ prototype.componentWillReceiveProps = componentWillReceiveProps;
+ }
+
+ // React <= 16.2 does not support getSnapshotBeforeUpdate.
+ // As a workaround, use cWU to invoke the new lifecycle.
+ // Newer versions of React will ignore that lifecycle if gSBU exists.
+ if (typeof prototype.getSnapshotBeforeUpdate === 'function') {
+ if (typeof prototype.componentDidUpdate !== 'function') {
+ throw new Error(
+ 'Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype'
+ );
+ }
+
+ prototype.componentWillUpdate = componentWillUpdate;
+
+ var componentDidUpdate = prototype.componentDidUpdate;
+
+ prototype.componentDidUpdate = function componentDidUpdatePolyfill(
+ prevProps,
+ prevState,
+ maybeSnapshot
+ ) {
+ // 16.3+ will not execute our will-update method;
+ // It will pass a snapshot value to did-update though.
+ // Older versions will require our polyfilled will-update value.
+ // We need to handle both cases, but can't just check for the presence of "maybeSnapshot",
+ // Because for <= 15.x versions this might be a "prevContext" object.
+ // We also can't just check "__reactInternalSnapshot",
+ // Because get-snapshot might return a falsy value.
+ // So check for the explicit __reactInternalSnapshotFlag flag to determine behavior.
+ var snapshot = this.__reactInternalSnapshotFlag
+ ? this.__reactInternalSnapshot
+ : maybeSnapshot;
+
+ componentDidUpdate.call(this, prevProps, prevState, snapshot);
+ };
+ }
+
+ return Component;
+ }
+
+ exports.polyfill = polyfill;
+
+
+/***/ }),
+/* 92 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {"use strict";
+
+ exports.__esModule = true;
+ exports.classNamesShape = exports.timeoutsShape = void 0;
+
+ var _propTypes = _interopRequireDefault(__webpack_require__(6));
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ var timeoutsShape = process.env.NODE_ENV !== 'production' ? _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+ enter: _propTypes.default.number,
+ exit: _propTypes.default.number,
+ appear: _propTypes.default.number
+ }).isRequired]) : null;
+ exports.timeoutsShape = timeoutsShape;
+ var classNamesShape = process.env.NODE_ENV !== 'production' ? _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
+ enter: _propTypes.default.string,
+ exit: _propTypes.default.string,
+ active: _propTypes.default.string
+ }), _propTypes.default.shape({
+ enter: _propTypes.default.string,
+ enterDone: _propTypes.default.string,
+ enterActive: _propTypes.default.string,
+ exit: _propTypes.default.string,
+ exitDone: _propTypes.default.string,
+ exitActive: _propTypes.default.string
+ })]) : null;
+ exports.classNamesShape = classNamesShape;
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
+
+/***/ }),
+/* 93 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {"use strict";
+
+ exports.__esModule = true;
+ exports.default = void 0;
+
+ var _propTypes = _interopRequireDefault(__webpack_require__(6));
+
+ var _react = _interopRequireDefault(__webpack_require__(1));
+
+ var _reactDom = __webpack_require__(2);
+
+ var _TransitionGroup = _interopRequireDefault(__webpack_require__(94));
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+
+ /**
+ * The `` component is a specialized `Transition` component
+ * that animates between two children.
+ *
+ * ```jsx
+ *
+ * I appear first
+ * I replace the above
+ *
+ * ```
+ */
+ var ReplaceTransition =
+ /*#__PURE__*/
+ function (_React$Component) {
+ _inheritsLoose(ReplaceTransition, _React$Component);
+
+ function ReplaceTransition() {
+ var _this;
+
+ for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+ _args[_key] = arguments[_key];
+ }
+
+ _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
+
+ _this.handleEnter = function () {
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+
+ return _this.handleLifecycle('onEnter', 0, args);
+ };
+
+ _this.handleEntering = function () {
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ args[_key3] = arguments[_key3];
+ }
+
+ return _this.handleLifecycle('onEntering', 0, args);
+ };
+
+ _this.handleEntered = function () {
+ for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+ args[_key4] = arguments[_key4];
+ }
+
+ return _this.handleLifecycle('onEntered', 0, args);
+ };
+
+ _this.handleExit = function () {
+ for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+ args[_key5] = arguments[_key5];
+ }
+
+ return _this.handleLifecycle('onExit', 1, args);
+ };
+
+ _this.handleExiting = function () {
+ for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+ args[_key6] = arguments[_key6];
+ }
+
+ return _this.handleLifecycle('onExiting', 1, args);
+ };
+
+ _this.handleExited = function () {
+ for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+ args[_key7] = arguments[_key7];
+ }
+
+ return _this.handleLifecycle('onExited', 1, args);
+ };
+
+ return _this;
+ }
+
+ var _proto = ReplaceTransition.prototype;
+
+ _proto.handleLifecycle = function handleLifecycle(handler, idx, originalArgs) {
+ var _child$props;
+
+ var children = this.props.children;
+
+ var child = _react.default.Children.toArray(children)[idx];
+
+ if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);
+ if (this.props[handler]) this.props[handler]((0, _reactDom.findDOMNode)(this));
+ };
+
+ _proto.render = function render() {
+ var _this$props = this.props,
+ children = _this$props.children,
+ inProp = _this$props.in,
+ props = _objectWithoutPropertiesLoose(_this$props, ["children", "in"]);
+
+ var _React$Children$toArr = _react.default.Children.toArray(children),
+ first = _React$Children$toArr[0],
+ second = _React$Children$toArr[1];
+
+ delete props.onEnter;
+ delete props.onEntering;
+ delete props.onEntered;
+ delete props.onExit;
+ delete props.onExiting;
+ delete props.onExited;
+ return _react.default.createElement(_TransitionGroup.default, props, inProp ? _react.default.cloneElement(first, {
+ key: 'first',
+ onEnter: this.handleEnter,
+ onEntering: this.handleEntering,
+ onEntered: this.handleEntered
+ }) : _react.default.cloneElement(second, {
+ key: 'second',
+ onEnter: this.handleExit,
+ onEntering: this.handleExiting,
+ onEntered: this.handleExited
+ }));
+ };
+
+ return ReplaceTransition;
+ }(_react.default.Component);
+
+ ReplaceTransition.propTypes = process.env.NODE_ENV !== "production" ? {
+ in: _propTypes.default.bool.isRequired,
+ children: function children(props, propName) {
+ if (_react.default.Children.count(props[propName]) !== 2) return new Error("\"" + propName + "\" must be exactly two transition components.");
+ return null;
+ }
+ } : {};
+ var _default = ReplaceTransition;
+ exports.default = _default;
+ module.exports = exports["default"];
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
+
+/***/ }),
+/* 94 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {"use strict";
+
+ exports.__esModule = true;
+ exports.default = void 0;
+
+ var _propTypes = _interopRequireDefault(__webpack_require__(6));
+
+ var _react = _interopRequireDefault(__webpack_require__(1));
+
+ var _reactLifecyclesCompat = __webpack_require__(91);
+
+ var _ChildMapping = __webpack_require__(95);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+
+ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+ var values = Object.values || function (obj) {
+ return Object.keys(obj).map(function (k) {
+ return obj[k];
+ });
+ };
+
+ var defaultProps = {
+ component: 'div',
+ childFactory: function childFactory(child) {
+ return child;
+ }
+ /**
+ * The `` component manages a set of transition components
+ * (`` and ``) in a list. Like with the transition
+ * components, `` is a state machine for managing the mounting
+ * and unmounting of components over time.
+ *
+ * Consider the example below. As items are removed or added to the TodoList the
+ * `in` prop is toggled automatically by the ``.
+ *
+ * Note that `` does not define any animation behavior!
+ * Exactly _how_ a list item animates is up to the individual transition
+ * component. This means you can mix and match animations across different list
+ * items.
+ */
+
+ };
+
+ var TransitionGroup =
+ /*#__PURE__*/
+ function (_React$Component) {
+ _inheritsLoose(TransitionGroup, _React$Component);
+
+ function TransitionGroup(props, context) {
+ var _this;
+
+ _this = _React$Component.call(this, props, context) || this;
+
+ var handleExited = _this.handleExited.bind(_assertThisInitialized(_assertThisInitialized(_this))); // Initial children should all be entering, dependent on appear
+
+
+ _this.state = {
+ handleExited: handleExited,
+ firstRender: true
+ };
+ return _this;
+ }
+
+ var _proto = TransitionGroup.prototype;
+
+ _proto.getChildContext = function getChildContext() {
+ return {
+ transitionGroup: {
+ isMounting: !this.appeared
+ }
+ };
+ };
+
+ _proto.componentDidMount = function componentDidMount() {
+ this.appeared = true;
+ this.mounted = true;
+ };
+
+ _proto.componentWillUnmount = function componentWillUnmount() {
+ this.mounted = false;
+ };
+
+ TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
+ var prevChildMapping = _ref.children,
+ handleExited = _ref.handleExited,
+ firstRender = _ref.firstRender;
+ return {
+ children: firstRender ? (0, _ChildMapping.getInitialChildMapping)(nextProps, handleExited) : (0, _ChildMapping.getNextChildMapping)(nextProps, prevChildMapping, handleExited),
+ firstRender: false
+ };
+ };
+
+ _proto.handleExited = function handleExited(child, node) {
+ var currentChildMapping = (0, _ChildMapping.getChildMapping)(this.props.children);
+ if (child.key in currentChildMapping) return;
+
+ if (child.props.onExited) {
+ child.props.onExited(node);
+ }
+
+ if (this.mounted) {
+ this.setState(function (state) {
+ var children = _extends({}, state.children);
+
+ delete children[child.key];
+ return {
+ children: children
+ };
+ });
+ }
+ };
+
+ _proto.render = function render() {
+ var _this$props = this.props,
+ Component = _this$props.component,
+ childFactory = _this$props.childFactory,
+ props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
+
+ var children = values(this.state.children).map(childFactory);
+ delete props.appear;
+ delete props.enter;
+ delete props.exit;
+
+ if (Component === null) {
+ return children;
+ }
+
+ return _react.default.createElement(Component, props, children);
+ };
+
+ return TransitionGroup;
+ }(_react.default.Component);
+
+ TransitionGroup.childContextTypes = {
+ transitionGroup: _propTypes.default.object.isRequired
+ };
+ TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+ /**
+ * `` renders a `` by default. You can change this
+ * behavior by providing a `component` prop.
+ * If you use React v16+ and would like to avoid a wrapping `
` element
+ * you can pass in `component={null}`. This is useful if the wrapping div
+ * borks your css styles.
+ */
+ component: _propTypes.default.any,
+
+ /**
+ * A set of `
` components, that are toggled `in` and out as they
+ * leave. the `` will inject specific transition props, so
+ * remember to spread them through if you are wrapping the `` as
+ * with our `` example.
+ *
+ * While this component is meant for multiple `Transition` or `CSSTransition`
+ * children, sometimes you may want to have a single transition child with
+ * content that you want to be transitioned out and in when you change it
+ * (e.g. routes, images etc.) In that case you can change the `key` prop of
+ * the transition child as you change its content, this will cause
+ * `TransitionGroup` to transition the child out and back in.
+ */
+ children: _propTypes.default.node,
+
+ /**
+ * A convenience prop that enables or disables appear animations
+ * for all children. Note that specifying this will override any defaults set
+ * on individual children Transitions.
+ */
+ appear: _propTypes.default.bool,
+
+ /**
+ * A convenience prop that enables or disables enter animations
+ * for all children. Note that specifying this will override any defaults set
+ * on individual children Transitions.
+ */
+ enter: _propTypes.default.bool,
+
+ /**
+ * A convenience prop that enables or disables exit animations
+ * for all children. Note that specifying this will override any defaults set
+ * on individual children Transitions.
+ */
+ exit: _propTypes.default.bool,
+
+ /**
+ * You may need to apply reactive updates to a child as it is exiting.
+ * This is generally done by using `cloneElement` however in the case of an exiting
+ * child the element has already been removed and not accessible to the consumer.
+ *
+ * If you do need to update a child as it leaves you can provide a `childFactory`
+ * to wrap every child, even the ones that are leaving.
+ *
+ * @type Function(child: ReactElement) -> ReactElement
+ */
+ childFactory: _propTypes.default.func
+ } : {};
+ TransitionGroup.defaultProps = defaultProps;
+
+ var _default = (0, _reactLifecyclesCompat.polyfill)(TransitionGroup);
+
+ exports.default = _default;
+ module.exports = exports["default"];
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
+
+/***/ }),
+/* 95 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ exports.__esModule = true;
+ exports.getChildMapping = getChildMapping;
+ exports.mergeChildMappings = mergeChildMappings;
+ exports.getInitialChildMapping = getInitialChildMapping;
+ exports.getNextChildMapping = getNextChildMapping;
+
+ var _react = __webpack_require__(1);
+
+ /**
+ * Given `this.props.children`, return an object mapping key to child.
+ *
+ * @param {*} children `this.props.children`
+ * @return {object} Mapping of key to child
+ */
+ function getChildMapping(children, mapFn) {
+ var mapper = function mapper(child) {
+ return mapFn && (0, _react.isValidElement)(child) ? mapFn(child) : child;
+ };
+
+ var result = Object.create(null);
+ if (children) _react.Children.map(children, function (c) {
+ return c;
+ }).forEach(function (child) {
+ // run the map function here instead so that the key is the computed one
+ result[child.key] = mapper(child);
+ });
+ return result;
+ }
+ /**
+ * When you're adding or removing children some may be added or removed in the
+ * same render pass. We want to show *both* since we want to simultaneously
+ * animate elements in and out. This function takes a previous set of keys
+ * and a new set of keys and merges them with its best guess of the correct
+ * ordering. In the future we may expose some of the utilities in
+ * ReactMultiChild to make this easy, but for now React itself does not
+ * directly have this concept of the union of prevChildren and nextChildren
+ * so we implement it here.
+ *
+ * @param {object} prev prev children as returned from
+ * `ReactTransitionChildMapping.getChildMapping()`.
+ * @param {object} next next children as returned from
+ * `ReactTransitionChildMapping.getChildMapping()`.
+ * @return {object} a key set that contains all keys in `prev` and all keys
+ * in `next` in a reasonable order.
+ */
+
+
+ function mergeChildMappings(prev, next) {
+ prev = prev || {};
+ next = next || {};
+
+ function getValueForKey(key) {
+ return key in next ? next[key] : prev[key];
+ } // For each key of `next`, the list of keys to insert before that key in
+ // the combined list
+
+
+ var nextKeysPending = Object.create(null);
+ var pendingKeys = [];
+
+ for (var prevKey in prev) {
+ if (prevKey in next) {
+ if (pendingKeys.length) {
+ nextKeysPending[prevKey] = pendingKeys;
+ pendingKeys = [];
+ }
+ } else {
+ pendingKeys.push(prevKey);
+ }
+ }
+
+ var i;
+ var childMapping = {};
+
+ for (var nextKey in next) {
+ if (nextKeysPending[nextKey]) {
+ for (i = 0; i < nextKeysPending[nextKey].length; i++) {
+ var pendingNextKey = nextKeysPending[nextKey][i];
+ childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
+ }
+ }
+
+ childMapping[nextKey] = getValueForKey(nextKey);
+ } // Finally, add the keys which didn't appear before any key in `next`
+
+
+ for (i = 0; i < pendingKeys.length; i++) {
+ childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
+ }
+
+ return childMapping;
+ }
+
+ function getProp(child, prop, props) {
+ return props[prop] != null ? props[prop] : child.props[prop];
+ }
+
+ function getInitialChildMapping(props, onExited) {
+ return getChildMapping(props.children, function (child) {
+ return (0, _react.cloneElement)(child, {
+ onExited: onExited.bind(null, child),
+ in: true,
+ appear: getProp(child, 'appear', props),
+ enter: getProp(child, 'enter', props),
+ exit: getProp(child, 'exit', props)
+ });
+ });
+ }
+
+ function getNextChildMapping(nextProps, prevChildMapping, onExited) {
+ var nextChildMapping = getChildMapping(nextProps.children);
+ var children = mergeChildMappings(prevChildMapping, nextChildMapping);
+ Object.keys(children).forEach(function (key) {
+ var child = children[key];
+ if (!(0, _react.isValidElement)(child)) return;
+ var hasPrev = key in prevChildMapping;
+ var hasNext = key in nextChildMapping;
+ var prevChild = prevChildMapping[key];
+ var isLeaving = (0, _react.isValidElement)(prevChild) && !prevChild.props.in; // item is new (entering)
+
+ if (hasNext && (!hasPrev || isLeaving)) {
+ // console.log('entering', key)
+ children[key] = (0, _react.cloneElement)(child, {
+ onExited: onExited.bind(null, child),
+ in: true,
+ exit: getProp(child, 'exit', nextProps),
+ enter: getProp(child, 'enter', nextProps)
+ });
+ } else if (!hasNext && hasPrev && !isLeaving) {
+ // item is old (exiting)
+ // console.log('leaving', key)
+ children[key] = (0, _react.cloneElement)(child, {
+ in: false
+ });
+ } else if (hasNext && hasPrev && (0, _react.isValidElement)(prevChild)) {
+ // item hasn't changed transition states
+ // copy over the last transition props;
+ // console.log('unchanged', key)
+ children[key] = (0, _react.cloneElement)(child, {
+ onExited: onExited.bind(null, child),
+ in: prevChild.props.in,
+ exit: getProp(child, 'exit', nextProps),
+ enter: getProp(child, 'enter', nextProps)
+ });
+ }
+ });
+ return children;
+ }
+
+/***/ }),
+/* 96 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _Clipboard = __webpack_require__(97);
+
+ var _Clipboard2 = _interopRequireDefault(_Clipboard);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ exports["default"] = _Clipboard2["default"];
+ module.exports = exports['default'];
+
+/***/ }),
+/* 97 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _clipboard = __webpack_require__(98);
+
+ var _clipboard2 = _interopRequireDefault(_clipboard);
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _beeIcon = __webpack_require__(106);
+
+ var _beeIcon2 = _interopRequireDefault(_beeIcon);
+
+ var _reactDom = __webpack_require__(2);
+
+ var _reactDom2 = _interopRequireDefault(_reactDom);
+
+ var _beeTooltip = __webpack_require__(108);
+
+ var _beeTooltip2 = _interopRequireDefault(_beeTooltip);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _tool = __webpack_require__(132);
+
+ var _i18n = __webpack_require__(133);
+
+ var _i18n2 = _interopRequireDefault(_i18n);
+
+ var _beeModal = __webpack_require__(134);
+
+ var _beeModal2 = _interopRequireDefault(_beeModal);
+
+ var _beeFormControl = __webpack_require__(153);
+
+ var _beeFormControl2 = _interopRequireDefault(_beeFormControl);
+
+ var _beeButton = __webpack_require__(155);
+
+ var _beeButton2 = _interopRequireDefault(_beeButton);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ //text和target都写的时候,target无效。 text的cut改为copy。
+ // target可以传css3选择器
+ var propTypes = {
+ action: _propTypes2["default"].oneOf(['copy', 'cut', null]),
+ text: _propTypes2["default"].string,
+ success: _propTypes2["default"].func,
+ error: _propTypes2["default"].func,
+ locale: _propTypes2["default"].object
+ };
+ var defaultProps = {
+ action: 'copy',
+ text: '',
+ target: '',
+ success: function success() {},
+ error: function error() {},
+ locale: {}
+ };
+
+ var Clipboard = function (_Component) {
+ _inherits(Clipboard, _Component);
+
+ function Clipboard(props, context) {
+ _classCallCheck(this, Clipboard);
+
+ var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));
+
+ _this.blur = function () {
+ _this.setState({
+ currect: false,
+ ready: false
+ });
+ };
+
+ _this.close = function () {
+ _this.setState({
+ modalShow: false
+ });
+ };
+
+ _this.state = {
+ currect: false,
+ html: '',
+ ready: false,
+ id: 'id' + Math.round(Math.random() * 1000 + 1) + new Date().getTime(),
+ modalShow: false
+ };
+ return _this;
+ }
+
+ Clipboard.prototype.componentWillMount = function componentWillMount() {
+ var self = this;
+ var _props = this.props,
+ success = _props.success,
+ error = _props.error;
+
+
+ var id = this.state.id;
+ var cb = new _clipboard2["default"]('#' + id);
+ cb.on('success', function (e) {
+ self.setState({
+ currect: true,
+ ready: true
+ });
+ e.clearSelection();
+ if (success instanceof Function) success();
+ });
+ cb.on('error', function (e) {
+ self.setState({
+ modalShow: true,
+ html: e.text
+ });
+ _reactDom2["default"].findDOMNode(self.refs.text).select();
+ if (error instanceof Function) error();
+ });
+ };
+
+ Clipboard.prototype.render = function render() {
+ var _props2 = this.props,
+ action = _props2.action,
+ text = _props2.text,
+ target = _props2.target;
+
+ if (text) action = 'copy';
+
+ var locale = (0, _tool.getComponentLocale)(this.props, this.context, 'Clipboard', function () {
+ return _i18n2["default"];
+ });
+ var tootipContent = locale[action];
+ if (this.state.ready) {
+ tootipContent = locale[action + 'Ready'];
+ }
+
+ return _react2["default"].createElement(
+ _beeTooltip2["default"],
+ {
+ positionTop: '20px',
+ overlay: tootipContent,
+ placement: 'top' },
+ _react2["default"].createElement(
+ 'span',
+ {
+ onMouseOut: this.blur,
+ className: 'u-clipboard',
+ id: this.state.id,
+ 'data-clipboard-action': action,
+ 'data-clipboard-target': target,
+ 'data-clipboard-text': text },
+ this.props.children ? this.props.children : _react2["default"].createElement(_beeIcon2["default"], {
+ className: (0, _classnames2["default"])({
+ 'uf-correct': this.state.currect,
+ 'uf-copy': !this.state.currect
+ })
+ }),
+ _react2["default"].createElement(
+ _beeModal2["default"],
+ { show: this.state.modalShow, onHide: this.close },
+ _react2["default"].createElement(
+ _beeModal2["default"].Header,
+ { closeButton: true },
+ _react2["default"].createElement(
+ _beeModal2["default"].Title,
+ null,
+ ' Ctrl+C ',
+ locale['copyToClipboard'],
+ ' '
+ )
+ ),
+ _react2["default"].createElement(
+ _beeModal2["default"].Body,
+ null,
+ _react2["default"].createElement(_beeFormControl2["default"], { ref: 'text', type: 'text', readOnly: true, value: this.state.html })
+ ),
+ _react2["default"].createElement(
+ _beeModal2["default"].Footer,
+ null,
+ _react2["default"].createElement(
+ _beeButton2["default"],
+ { onClick: this.close },
+ ' ',
+ locale['close'],
+ ' '
+ )
+ )
+ )
+ )
+ );
+ };
+
+ return Clipboard;
+ }(_react.Component);
+
+ ;
+ Clipboard.propTypes = propTypes;
+ Clipboard.defaultProps = defaultProps;
+ exports["default"] = Clipboard;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 98 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;(function (global, factory) {
+ if (true) {
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [module, __webpack_require__(99), __webpack_require__(101), __webpack_require__(102)], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+ } else if (typeof exports !== "undefined") {
+ factory(module, require('./clipboard-action'), require('tiny-emitter'), require('good-listener'));
+ } else {
+ var mod = {
+ exports: {}
+ };
+ factory(mod, global.clipboardAction, global.tinyEmitter, global.goodListener);
+ global.clipboard = mod.exports;
+ }
+ })(this, function (module, _clipboardAction, _tinyEmitter, _goodListener) {
+ 'use strict';
+
+ var _clipboardAction2 = _interopRequireDefault(_clipboardAction);
+
+ var _tinyEmitter2 = _interopRequireDefault(_tinyEmitter);
+
+ var _goodListener2 = _interopRequireDefault(_goodListener);
+
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default: obj
+ };
+ }
+
+ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+ return typeof obj;
+ } : function (obj) {
+ return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+ };
+
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError("Cannot call a class as a function");
+ }
+ }
+
+ var _createClass = function () {
+ function defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ("value" in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+
+ return function (Constructor, protoProps, staticProps) {
+ if (protoProps) defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) defineProperties(Constructor, staticProps);
+ return Constructor;
+ };
+ }();
+
+ function _possibleConstructorReturn(self, call) {
+ if (!self) {
+ throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+ }
+
+ return call && (typeof call === "object" || typeof call === "function") ? call : self;
+ }
+
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== "function" && superClass !== null) {
+ throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+ }
+
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ enumerable: false,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+ }
+
+ var Clipboard = function (_Emitter) {
+ _inherits(Clipboard, _Emitter);
+
+ /**
+ * @param {String|HTMLElement|HTMLCollection|NodeList} trigger
+ * @param {Object} options
+ */
+ function Clipboard(trigger, options) {
+ _classCallCheck(this, Clipboard);
+
+ var _this = _possibleConstructorReturn(this, (Clipboard.__proto__ || Object.getPrototypeOf(Clipboard)).call(this));
+
+ _this.resolveOptions(options);
+ _this.listenClick(trigger);
+ return _this;
+ }
+
+ /**
+ * Defines if attributes would be resolved using internal setter functions
+ * or custom functions that were passed in the constructor.
+ * @param {Object} options
+ */
+
+
+ _createClass(Clipboard, [{
+ key: 'resolveOptions',
+ value: function resolveOptions() {
+ var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+ this.action = typeof options.action === 'function' ? options.action : this.defaultAction;
+ this.target = typeof options.target === 'function' ? options.target : this.defaultTarget;
+ this.text = typeof options.text === 'function' ? options.text : this.defaultText;
+ this.container = _typeof(options.container) === 'object' ? options.container : document.body;
+ }
+ }, {
+ key: 'listenClick',
+ value: function listenClick(trigger) {
+ var _this2 = this;
+
+ this.listener = (0, _goodListener2.default)(trigger, 'click', function (e) {
+ return _this2.onClick(e);
+ });
+ }
+ }, {
+ key: 'onClick',
+ value: function onClick(e) {
+ var trigger = e.delegateTarget || e.currentTarget;
+
+ if (this.clipboardAction) {
+ this.clipboardAction = null;
+ }
+
+ this.clipboardAction = new _clipboardAction2.default({
+ action: this.action(trigger),
+ target: this.target(trigger),
+ text: this.text(trigger),
+ container: this.container,
+ trigger: trigger,
+ emitter: this
+ });
+ }
+ }, {
+ key: 'defaultAction',
+ value: function defaultAction(trigger) {
+ return getAttributeValue('action', trigger);
+ }
+ }, {
+ key: 'defaultTarget',
+ value: function defaultTarget(trigger) {
+ var selector = getAttributeValue('target', trigger);
+
+ if (selector) {
+ return document.querySelector(selector);
+ }
+ }
+ }, {
+ key: 'defaultText',
+ value: function defaultText(trigger) {
+ return getAttributeValue('text', trigger);
+ }
+ }, {
+ key: 'destroy',
+ value: function destroy() {
+ this.listener.destroy();
+
+ if (this.clipboardAction) {
+ this.clipboardAction.destroy();
+ this.clipboardAction = null;
+ }
+ }
+ }], [{
+ key: 'isSupported',
+ value: function isSupported() {
+ var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['copy', 'cut'];
+
+ var actions = typeof action === 'string' ? [action] : action;
+ var support = !!document.queryCommandSupported;
+
+ actions.forEach(function (action) {
+ support = support && !!document.queryCommandSupported(action);
+ });
+
+ return support;
+ }
+ }]);
+
+ return Clipboard;
+ }(_tinyEmitter2.default);
+
+ /**
+ * Helper function to retrieve attribute value.
+ * @param {String} suffix
+ * @param {Element} element
+ */
+ function getAttributeValue(suffix, element) {
+ var attribute = 'data-clipboard-' + suffix;
+
+ if (!element.hasAttribute(attribute)) {
+ return;
+ }
+
+ return element.getAttribute(attribute);
+ }
+
+ module.exports = Clipboard;
+ });
+
+/***/ }),
+/* 99 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;(function (global, factory) {
+ if (true) {
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [module, __webpack_require__(100)], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+ } else if (typeof exports !== "undefined") {
+ factory(module, require('select'));
+ } else {
+ var mod = {
+ exports: {}
+ };
+ factory(mod, global.select);
+ global.clipboardAction = mod.exports;
+ }
+ })(this, function (module, _select) {
+ 'use strict';
+
+ var _select2 = _interopRequireDefault(_select);
+
+ function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : {
+ default: obj
+ };
+ }
+
+ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+ return typeof obj;
+ } : function (obj) {
+ return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+ };
+
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError("Cannot call a class as a function");
+ }
+ }
+
+ var _createClass = function () {
+ function defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ("value" in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+
+ return function (Constructor, protoProps, staticProps) {
+ if (protoProps) defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) defineProperties(Constructor, staticProps);
+ return Constructor;
+ };
+ }();
+
+ var ClipboardAction = function () {
+ /**
+ * @param {Object} options
+ */
+ function ClipboardAction(options) {
+ _classCallCheck(this, ClipboardAction);
+
+ this.resolveOptions(options);
+ this.initSelection();
+ }
+
+ /**
+ * Defines base properties passed from constructor.
+ * @param {Object} options
+ */
+
+
+ _createClass(ClipboardAction, [{
+ key: 'resolveOptions',
+ value: function resolveOptions() {
+ var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+ this.action = options.action;
+ this.container = options.container;
+ this.emitter = options.emitter;
+ this.target = options.target;
+ this.text = options.text;
+ this.trigger = options.trigger;
+
+ this.selectedText = '';
+ }
+ }, {
+ key: 'initSelection',
+ value: function initSelection() {
+ if (this.text) {
+ this.selectFake();
+ } else if (this.target) {
+ this.selectTarget();
+ }
+ }
+ }, {
+ key: 'selectFake',
+ value: function selectFake() {
+ var _this = this;
+
+ var isRTL = document.documentElement.getAttribute('dir') == 'rtl';
+
+ this.removeFake();
+
+ this.fakeHandlerCallback = function () {
+ return _this.removeFake();
+ };
+ this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || true;
+
+ this.fakeElem = document.createElement('textarea');
+ // Prevent zooming on iOS
+ this.fakeElem.style.fontSize = '12pt';
+ // Reset box model
+ this.fakeElem.style.border = '0';
+ this.fakeElem.style.padding = '0';
+ this.fakeElem.style.margin = '0';
+ // Move element out of screen horizontally
+ this.fakeElem.style.position = 'absolute';
+ this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px';
+ // Move element to the same position vertically
+ var yPosition = window.pageYOffset || document.documentElement.scrollTop;
+ this.fakeElem.style.top = yPosition + 'px';
+
+ this.fakeElem.setAttribute('readonly', '');
+ this.fakeElem.value = this.text;
+
+ this.container.appendChild(this.fakeElem);
+
+ this.selectedText = (0, _select2.default)(this.fakeElem);
+ this.copyText();
+ }
+ }, {
+ key: 'removeFake',
+ value: function removeFake() {
+ if (this.fakeHandler) {
+ this.container.removeEventListener('click', this.fakeHandlerCallback);
+ this.fakeHandler = null;
+ this.fakeHandlerCallback = null;
+ }
+
+ if (this.fakeElem) {
+ this.container.removeChild(this.fakeElem);
+ this.fakeElem = null;
+ }
+ }
+ }, {
+ key: 'selectTarget',
+ value: function selectTarget() {
+ this.selectedText = (0, _select2.default)(this.target);
+ this.copyText();
+ }
+ }, {
+ key: 'copyText',
+ value: function copyText() {
+ var succeeded = void 0;
+
+ try {
+ succeeded = document.execCommand(this.action);
+ } catch (err) {
+ succeeded = false;
+ }
+
+ this.handleResult(succeeded);
+ }
+ }, {
+ key: 'handleResult',
+ value: function handleResult(succeeded) {
+ this.emitter.emit(succeeded ? 'success' : 'error', {
+ action: this.action,
+ text: this.selectedText,
+ trigger: this.trigger,
+ clearSelection: this.clearSelection.bind(this)
+ });
+ }
+ }, {
+ key: 'clearSelection',
+ value: function clearSelection() {
+ if (this.trigger) {
+ this.trigger.focus();
+ }
+
+ window.getSelection().removeAllRanges();
+ }
+ }, {
+ key: 'destroy',
+ value: function destroy() {
+ this.removeFake();
+ }
+ }, {
+ key: 'action',
+ set: function set() {
+ var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'copy';
+
+ this._action = action;
+
+ if (this._action !== 'copy' && this._action !== 'cut') {
+ throw new Error('Invalid "action" value, use either "copy" or "cut"');
+ }
+ },
+ get: function get() {
+ return this._action;
+ }
+ }, {
+ key: 'target',
+ set: function set(target) {
+ if (target !== undefined) {
+ if (target && (typeof target === 'undefined' ? 'undefined' : _typeof(target)) === 'object' && target.nodeType === 1) {
+ if (this.action === 'copy' && target.hasAttribute('disabled')) {
+ throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
+ }
+
+ if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {
+ throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
+ }
+
+ this._target = target;
+ } else {
+ throw new Error('Invalid "target" value, use a valid Element');
+ }
+ }
+ },
+ get: function get() {
+ return this._target;
+ }
+ }]);
+
+ return ClipboardAction;
+ }();
+
+ module.exports = ClipboardAction;
+ });
+
+/***/ }),
+/* 100 */
+/***/ (function(module, exports) {
+
+ function select(element) {
+ var selectedText;
+
+ if (element.nodeName === 'SELECT') {
+ element.focus();
+
+ selectedText = element.value;
+ }
+ else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
+ var isReadOnly = element.hasAttribute('readonly');
+
+ if (!isReadOnly) {
+ element.setAttribute('readonly', '');
+ }
+
+ element.select();
+ element.setSelectionRange(0, element.value.length);
+
+ if (!isReadOnly) {
+ element.removeAttribute('readonly');
+ }
+
+ selectedText = element.value;
+ }
+ else {
+ if (element.hasAttribute('contenteditable')) {
+ element.focus();
+ }
+
+ var selection = window.getSelection();
+ var range = document.createRange();
+
+ range.selectNodeContents(element);
+ selection.removeAllRanges();
+ selection.addRange(range);
+
+ selectedText = selection.toString();
+ }
+
+ return selectedText;
+ }
+
+ module.exports = select;
+
+
+/***/ }),
+/* 101 */
+/***/ (function(module, exports) {
+
+ function E () {
+ // Keep this empty so it's easier to inherit from
+ // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
+ }
+
+ E.prototype = {
+ on: function (name, callback, ctx) {
+ var e = this.e || (this.e = {});
+
+ (e[name] || (e[name] = [])).push({
+ fn: callback,
+ ctx: ctx
+ });
+
+ return this;
+ },
+
+ once: function (name, callback, ctx) {
+ var self = this;
+ function listener () {
+ self.off(name, listener);
+ callback.apply(ctx, arguments);
+ };
+
+ listener._ = callback
+ return this.on(name, listener, ctx);
+ },
+
+ emit: function (name) {
+ var data = [].slice.call(arguments, 1);
+ var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
+ var i = 0;
+ var len = evtArr.length;
+
+ for (i; i < len; i++) {
+ evtArr[i].fn.apply(evtArr[i].ctx, data);
+ }
+
+ return this;
+ },
+
+ off: function (name, callback) {
+ var e = this.e || (this.e = {});
+ var evts = e[name];
+ var liveEvents = [];
+
+ if (evts && callback) {
+ for (var i = 0, len = evts.length; i < len; i++) {
+ if (evts[i].fn !== callback && evts[i].fn._ !== callback)
+ liveEvents.push(evts[i]);
+ }
+ }
+
+ // Remove event from queue to prevent memory leak
+ // Suggested by https://github.com/lazd
+ // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
+
+ (liveEvents.length)
+ ? e[name] = liveEvents
+ : delete e[name];
+
+ return this;
+ }
+ };
+
+ module.exports = E;
+ module.exports.TinyEmitter = E;
+
+
+/***/ }),
+/* 102 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ var is = __webpack_require__(103);
+ var delegate = __webpack_require__(104);
+
+ /**
+ * Validates all params and calls the right
+ * listener function based on its target type.
+ *
+ * @param {String|HTMLElement|HTMLCollection|NodeList} target
+ * @param {String} type
+ * @param {Function} callback
+ * @return {Object}
+ */
+ function listen(target, type, callback) {
+ if (!target && !type && !callback) {
+ throw new Error('Missing required arguments');
+ }
+
+ if (!is.string(type)) {
+ throw new TypeError('Second argument must be a String');
+ }
+
+ if (!is.fn(callback)) {
+ throw new TypeError('Third argument must be a Function');
+ }
+
+ if (is.node(target)) {
+ return listenNode(target, type, callback);
+ }
+ else if (is.nodeList(target)) {
+ return listenNodeList(target, type, callback);
+ }
+ else if (is.string(target)) {
+ return listenSelector(target, type, callback);
+ }
+ else {
+ throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');
+ }
+ }
+
+ /**
+ * Adds an event listener to a HTML element
+ * and returns a remove listener function.
+ *
+ * @param {HTMLElement} node
+ * @param {String} type
+ * @param {Function} callback
+ * @return {Object}
+ */
+ function listenNode(node, type, callback) {
+ node.addEventListener(type, callback);
+
+ return {
+ destroy: function() {
+ node.removeEventListener(type, callback);
+ }
+ }
+ }
+
+ /**
+ * Add an event listener to a list of HTML elements
+ * and returns a remove listener function.
+ *
+ * @param {NodeList|HTMLCollection} nodeList
+ * @param {String} type
+ * @param {Function} callback
+ * @return {Object}
+ */
+ function listenNodeList(nodeList, type, callback) {
+ Array.prototype.forEach.call(nodeList, function(node) {
+ node.addEventListener(type, callback);
+ });
+
+ return {
+ destroy: function() {
+ Array.prototype.forEach.call(nodeList, function(node) {
+ node.removeEventListener(type, callback);
+ });
+ }
+ }
+ }
+
+ /**
+ * Add an event listener to a selector
+ * and returns a remove listener function.
+ *
+ * @param {String} selector
+ * @param {String} type
+ * @param {Function} callback
+ * @return {Object}
+ */
+ function listenSelector(selector, type, callback) {
+ return delegate(document.body, selector, type, callback);
+ }
+
+ module.exports = listen;
+
+
+/***/ }),
+/* 103 */
+/***/ (function(module, exports) {
+
+ /**
+ * Check if argument is a HTML element.
+ *
+ * @param {Object} value
+ * @return {Boolean}
+ */
+ exports.node = function(value) {
+ return value !== undefined
+ && value instanceof HTMLElement
+ && value.nodeType === 1;
+ };
+
+ /**
+ * Check if argument is a list of HTML elements.
+ *
+ * @param {Object} value
+ * @return {Boolean}
+ */
+ exports.nodeList = function(value) {
+ var type = Object.prototype.toString.call(value);
+
+ return value !== undefined
+ && (type === '[object NodeList]' || type === '[object HTMLCollection]')
+ && ('length' in value)
+ && (value.length === 0 || exports.node(value[0]));
+ };
+
+ /**
+ * Check if argument is a string.
+ *
+ * @param {Object} value
+ * @return {Boolean}
+ */
+ exports.string = function(value) {
+ return typeof value === 'string'
+ || value instanceof String;
+ };
+
+ /**
+ * Check if argument is a function.
+ *
+ * @param {Object} value
+ * @return {Boolean}
+ */
+ exports.fn = function(value) {
+ var type = Object.prototype.toString.call(value);
+
+ return type === '[object Function]';
+ };
+
+
+/***/ }),
+/* 104 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ var closest = __webpack_require__(105);
+
+ /**
+ * Delegates event to a selector.
+ *
+ * @param {Element} element
+ * @param {String} selector
+ * @param {String} type
+ * @param {Function} callback
+ * @param {Boolean} useCapture
+ * @return {Object}
+ */
+ function _delegate(element, selector, type, callback, useCapture) {
+ var listenerFn = listener.apply(this, arguments);
+
+ element.addEventListener(type, listenerFn, useCapture);
+
+ return {
+ destroy: function() {
+ element.removeEventListener(type, listenerFn, useCapture);
+ }
+ }
+ }
+
+ /**
+ * Delegates event to a selector.
+ *
+ * @param {Element|String|Array} [elements]
+ * @param {String} selector
+ * @param {String} type
+ * @param {Function} callback
+ * @param {Boolean} useCapture
+ * @return {Object}
+ */
+ function delegate(elements, selector, type, callback, useCapture) {
+ // Handle the regular Element usage
+ if (typeof elements.addEventListener === 'function') {
+ return _delegate.apply(null, arguments);
+ }
+
+ // Handle Element-less usage, it defaults to global delegation
+ if (typeof type === 'function') {
+ // Use `document` as the first parameter, then apply arguments
+ // This is a short way to .unshift `arguments` without running into deoptimizations
+ return _delegate.bind(null, document).apply(null, arguments);
+ }
+
+ // Handle Selector-based usage
+ if (typeof elements === 'string') {
+ elements = document.querySelectorAll(elements);
+ }
+
+ // Handle Array-like based usage
+ return Array.prototype.map.call(elements, function (element) {
+ return _delegate(element, selector, type, callback, useCapture);
+ });
+ }
+
+ /**
+ * Finds closest match and invokes callback.
+ *
+ * @param {Element} element
+ * @param {String} selector
+ * @param {String} type
+ * @param {Function} callback
+ * @return {Function}
+ */
+ function listener(element, selector, type, callback) {
+ return function(e) {
+ e.delegateTarget = closest(e.target, selector);
+
+ if (e.delegateTarget) {
+ callback.call(element, e);
+ }
+ }
+ }
+
+ module.exports = delegate;
+
+
+/***/ }),
+/* 105 */
+/***/ (function(module, exports) {
+
+ var DOCUMENT_NODE_TYPE = 9;
+
+ /**
+ * A polyfill for Element.matches()
+ */
+ if (typeof Element !== 'undefined' && !Element.prototype.matches) {
+ var proto = Element.prototype;
+
+ proto.matches = proto.matchesSelector ||
+ proto.mozMatchesSelector ||
+ proto.msMatchesSelector ||
+ proto.oMatchesSelector ||
+ proto.webkitMatchesSelector;
+ }
+
+ /**
+ * Finds the closest parent that matches a selector.
+ *
+ * @param {Element} element
+ * @param {String} selector
+ * @return {Function}
+ */
+ function closest (element, selector) {
+ while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {
+ if (typeof element.matches === 'function' &&
+ element.matches(selector)) {
+ return element;
+ }
+ element = element.parentNode;
+ }
+ }
+
+ module.exports = closest;
+
+
+/***/ }),
+/* 106 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _Icon = __webpack_require__(107);
+
+ var _Icon2 = _interopRequireDefault(_Icon);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ exports["default"] = _Icon2["default"];
+ module.exports = exports['default'];
+
+/***/ }),
+/* 107 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = {
+ type: _propTypes2["default"].string
+
+ };
+ /**
+ * badge 默认显示内容1
+ */
+ var defaultProps = {
+ clsPrefix: 'uf'
+ };
+
+ var Icon = function (_Component) {
+ _inherits(Icon, _Component);
+
+ function Icon(props) {
+ _classCallCheck(this, Icon);
+
+ return _possibleConstructorReturn(this, _Component.call(this, props));
+ }
+
+ Icon.prototype.render = function render() {
+ var _props = this.props,
+ type = _props.type,
+ className = _props.className,
+ clsPrefix = _props.clsPrefix,
+ others = _objectWithoutProperties(_props, ['type', 'className', 'clsPrefix']);
+
+ var clsObj = {};
+
+ var classNames = (0, _classnames2["default"])(clsPrefix, type);
+
+ return _react2["default"].createElement('i', _extends({}, others, { className: (0, _classnames2["default"])(classNames, className) }));
+ };
+
+ return Icon;
+ }(_react.Component);
+
+ Icon.defaultProps = defaultProps;
+ Icon.propTypes = propTypes;
+
+ exports["default"] = Icon;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 108 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _Tooltip = __webpack_require__(109);
+
+ var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ exports["default"] = _Tooltip2["default"];
+ module.exports = exports['default'];
+
+/***/ }),
+/* 109 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _OverlayTrigger = __webpack_require__(110);
+
+ var _OverlayTrigger2 = _interopRequireDefault(_OverlayTrigger);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = {
+ /**
+ * @required
+ */
+ id: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number]),
+ inverse: _propTypes2["default"].bool,
+ visible: _propTypes2["default"].bool,
+ onVisibleChange: _propTypes2["default"].func,
+ /**
+ * 相对目标元素显示上下左右的位置
+ */
+ placement: _propTypes2["default"].oneOf(['top', 'right', 'bottom', 'left']),
+
+ /**
+ * 绝对定位上边距.
+ */
+ positionTop: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
+ /**
+ * 绝对定位左边距
+ */
+ positionLeft: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
+
+ /**
+ * 与目标Top的距离
+ */
+ arrowOffsetTop: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
+ /**
+ * 与目标Left的距离
+ */
+ arrowOffsetLeft: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string])
+ };
+
+ var defaultProps = {
+ placement: 'right',
+ clsPrefix: 'u-tooltip'
+ };
+ function OverlayNode(props) {
+ var className = props.className,
+ classNames = props.classNames,
+ style = props.style,
+ overlay = props.overlay,
+ arrowOffsetTop = props.arrowOffsetTop,
+ arrowOffsetLeft = props.arrowOffsetLeft;
+
+ return _react2["default"].createElement(
+ 'div',
+ {
+ className: (0, _classnames2["default"])(className, classNames),
+ onMouseEnter: props.onMouseEnter,
+ onMouseLeave: props.onMouseLeave,
+ style: style
+ },
+ overlay ? _react2["default"].createElement('div', { className: 'tooltip-arrow', style: {
+ top: arrowOffsetTop,
+ left: arrowOffsetLeft
+ } }) : '',
+ overlay ? _react2["default"].createElement(
+ 'div',
+ { className: 'tooltip-inner' },
+ overlay
+ ) : ''
+ );
+ }
+
+ var Tooltip = function (_React$Component) {
+ _inherits(Tooltip, _React$Component);
+
+ function Tooltip(props) {
+ _classCallCheck(this, Tooltip);
+
+ var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+
+ _this.onMouseEnter = function () {
+ _this.setState({
+ isHoverShow: true
+ });
+ };
+
+ _this.onMouseLeave = function () {
+ _this.setState({
+ isHoverShow: false
+ });
+ };
+
+ var initState = {
+ isHoverShow: false
+ };
+ if ('visible' in props) {
+ _extends(initState, {
+ visible: props.visible
+ });
+ }
+ _this.state = initState;
+ return _this;
+ }
+
+ Tooltip.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
+ var _props = this.props,
+ visible = _props.visible,
+ onVisibleChange = _props.onVisibleChange;
+
+ if ('visible' in this.props && prevProps.visible !== visible) {
+ this.setState({
+ visible: visible
+ });
+ onVisibleChange && onVisibleChange(visible);
+ }
+ };
+
+ /**
+ * @desc 鼠标划入时候的事件
+ */
+
+
+ /**
+ * @desc 鼠标划出时候的事件
+ */
+
+
+ Tooltip.prototype.render = function render() {
+ var _classes,
+ _this2 = this;
+
+ var _props2 = this.props,
+ placement = _props2.placement,
+ positionTop = _props2.positionTop,
+ positionLeft = _props2.positionLeft,
+ arrowOffsetTop = _props2.arrowOffsetTop,
+ arrowOffsetLeft = _props2.arrowOffsetLeft,
+ className = _props2.className,
+ style = _props2.style,
+ children = _props2.children,
+ clsPrefix = _props2.clsPrefix,
+ overlay = _props2.overlay,
+ inverse = _props2.inverse,
+ others = _objectWithoutProperties(_props2, ['placement', 'positionTop', 'positionLeft', 'arrowOffsetTop', 'arrowOffsetLeft', 'className', 'style', 'children', 'clsPrefix', 'overlay', 'inverse']);
+
+ var classes = (_classes = {}, _defineProperty(_classes, placement, true), _defineProperty(_classes, 'inverse', inverse), _classes);
+
+ var outerStyle = _extends({
+ top: positionTop,
+ left: positionLeft
+ }, style);
+
+ var arrowStyle = {
+ top: arrowOffsetTop,
+ left: arrowOffsetLeft
+ };
+
+ var classNames = (0, _classnames2["default"])(clsPrefix, classes);
+
+ var overlayNode = _react2["default"].createElement(OverlayNode, {
+ className: className,
+ classNames: classNames,
+ overlay: overlay,
+ onMouseEnter: this.onMouseEnter,
+ onMouseLeave: this.onMouseLeave,
+ style: true,
+ arrowOffsetTop: true,
+ arrowOffsetLeft: true
+ });
+ return 'visible' in this.props ? _react2["default"].createElement(
+ _OverlayTrigger2["default"],
+ _extends({ visible: this.state.visible, ref: function ref(_ref) {
+ return _this2.trigger = _ref;
+ }, shouldUpdatePosition: true, placement: placement }, others, { overlay: overlayNode }),
+ children
+ ) : _react2["default"].createElement(
+ _OverlayTrigger2["default"],
+ _extends({ isHoverShow: this.state.isHoverShow, ref: function ref(_ref2) {
+ return _this2.trigger = _ref2;
+ }, shouldUpdatePosition: true, placement: placement }, others, { overlay: overlayNode }),
+ children
+ );
+ };
+
+ return Tooltip;
+ }(_react2["default"].Component);
+
+ Tooltip.propTypes = propTypes;
+ Tooltip.defaultProps = defaultProps;
+
+ exports["default"] = Tooltip;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 110 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _contains = __webpack_require__(111);
+
+ var _contains2 = _interopRequireDefault(_contains);
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _reactDom = __webpack_require__(2);
+
+ var _reactDom2 = _interopRequireDefault(_reactDom);
+
+ var _warning = __webpack_require__(32);
+
+ var _warning2 = _interopRequireDefault(_warning);
+
+ var _Portal = __webpack_require__(112);
+
+ var _Portal2 = _interopRequireDefault(_Portal);
+
+ var _Overlay = __webpack_require__(114);
+
+ var _Overlay2 = _interopRequireDefault(_Overlay);
+
+ var _createChainedFunction = __webpack_require__(131);
+
+ var _createChainedFunction2 = _interopRequireDefault(_createChainedFunction);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var isReact16 = _reactDom2["default"].createPortal !== undefined;
+ var createPortal = isReact16 ? _reactDom2["default"].createPortal : _reactDom2["default"].unstable_renderSubtreeIntoContainer;
+
+ /**
+ * 检查值是属于这个值,还是等于这个值
+ *
+ * @param {string} one
+ * @param {string|array} of
+ * @returns {boolean}
+ */
+ function isOneOf(one, of) {
+ if (Array.isArray(of)) {
+ return of.indexOf(one) >= 0;
+ }
+ return one === of;
+ }
+
+ var triggerType = _propTypes2["default"].oneOf(['click', 'hover', 'focus']);
+
+ var propTypes = _extends({}, _Portal2["default"].propTypes, _Overlay2["default"].propTypes, {
+
+ /**
+ * 指定哪些操作或操作触发叠加层可见性
+ */
+ trigger: _propTypes2["default"].oneOfType([triggerType, _propTypes2["default"].arrayOf(triggerType)]),
+
+ /**
+ * 显示和隐藏覆盖一旦触发的毫秒延迟量
+ */
+ delay: _propTypes2["default"].number,
+ /**
+ * 触发后显示叠加层之前的延迟毫秒
+ */
+ delayShow: _propTypes2["default"].number,
+ /**
+ * 触发后隐藏叠加层的延迟毫秒
+ */
+ delayHide: _propTypes2["default"].number,
+
+ // FIXME: This should be `defaultShow`.
+ /**
+ * 覆盖的初始可见性状态。对于更细微的可见性控制,请考虑直接使用覆盖组件。
+ */
+ defaultOverlayShown: _propTypes2["default"].bool,
+ visible: _propTypes2["default"].bool,
+
+ /**
+ * 要覆盖在目标旁边的元素或文本。
+ */
+ overlay: _propTypes2["default"].node.isRequired,
+
+ /**
+ * @private
+ */
+ onBlur: _propTypes2["default"].func,
+ /**
+ * @private
+ */
+ onClick: _propTypes2["default"].func,
+ /**
+ * @private
+ */
+ onFocus: _propTypes2["default"].func,
+ /**
+ * @private
+ */
+ onMouseOut: _propTypes2["default"].func,
+ /**
+ * @private
+ */
+ onMouseOver: _propTypes2["default"].func,
+
+ // Overridden props from ``.
+ /**
+ * @private
+ */
+ target: _propTypes2["default"].oneOf([null]),
+ /**
+ * @private
+ */
+ onHide: _propTypes2["default"].oneOf([null]),
+ /**
+ * @private
+ */
+ show: _propTypes2["default"].oneOf([null])
+ });
+
+ var defaultProps = {
+ defaultOverlayShown: false,
+ trigger: ['hover', 'focus']
+ };
+
+ var OverlayTrigger = function (_Component) {
+ _inherits(OverlayTrigger, _Component);
+
+ function OverlayTrigger(props, context) {
+ _classCallCheck(this, OverlayTrigger);
+
+ var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));
+
+ _this.handleToggle = _this.handleToggle.bind(_this);
+ _this.handleDelayedShow = _this.handleDelayedShow.bind(_this);
+ _this.handleDelayedHide = _this.handleDelayedHide.bind(_this);
+ _this.handleHide = _this.handleHide.bind(_this);
+ _this.makeOverlay = _this.makeOverlay.bind(_this);
+
+ _this.handleMouseOver = function (e) {
+ return _this.handleMouseOverOut(_this.handleDelayedShow, e);
+ };
+ _this.handleMouseOut = function (e) {
+ return _this.handleMouseOverOut(_this.handleDelayedHide, e);
+ };
+
+ _this._mountNode = null;
+
+ var visible = void 0;
+ if ('visible' in props) {
+ visible = !!props.visible;
+ } else {
+ visible = !!props.defaultOverlayShown;
+ }
+
+ _this.state = {
+ show: visible
+ };
+ return _this;
+ }
+
+ OverlayTrigger.prototype.componentDidMount = function componentDidMount() {
+ this._mountNode = document.createElement('div');
+ !isReact16 && this.renderOverlay();
+ };
+
+ OverlayTrigger.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
+ !isReact16 && this.renderOverlay();
+ if ('visible' in this.props && prevProps.visible !== this.props.visible) {
+ this.setState({
+ show: this.props.visible
+ });
+ }
+ if ('isHoverShow' in this.props && prevProps.isHoverShow !== this.props.isHoverShow) {
+ this.setState({
+ show: this.props.isHoverShow
+ });
+ }
+ };
+
+ OverlayTrigger.prototype.componentWillUnmount = function componentWillUnmount() {
+ !isReact16 && _reactDom2["default"].unmountComponentAtNode(this._mountNode);
+ this._mountNode = null;
+ // 加判断去掉 clearTimeout
+ this._hoverShowDelay && clearTimeout(this._hoverShowDelay);
+ this._hoverShowDelay && clearTimeout(this._hoverHideDelay);
+ };
+
+ OverlayTrigger.prototype.handleToggle = function handleToggle() {
+ if (this.state.show) {
+ this.hide();
+ } else {
+ this.show();
+ }
+ };
+
+ OverlayTrigger.prototype.handleDelayedShow = function handleDelayedShow() {
+ var _this2 = this;
+
+ if (this._hoverHideDelay != null) {
+ clearTimeout(this._hoverHideDelay);
+ this._hoverHideDelay = null;
+ return;
+ }
+
+ if (this.state.show || this._hoverShowDelay != null) {
+ return;
+ }
+
+ var delay = this.props.delayShow != null ? this.props.delayShow : this.props.delay;
+
+ if (!delay) {
+ this.show();
+ return;
+ }
+
+ this._hoverShowDelay = setTimeout(function () {
+ _this2._hoverShowDelay = null;
+ _this2.show();
+ }, delay);
+ };
+
+ OverlayTrigger.prototype.handleDelayedHide = function handleDelayedHide() {
+ var _this3 = this;
+
+ if (this._hoverShowDelay != null) {
+ clearTimeout(this._hoverShowDelay);
+ this._hoverShowDelay = null;
+ return;
+ }
+
+ if (!this.state.show || this._hoverHideDelay != null) {
+ return;
+ }
+
+ var delay = this.props.delayHide != null ? this.props.delayHide : this.props.delay;
+
+ if (!delay) {
+ this.hide();
+ return;
+ }
+
+ this._hoverHideDelay = setTimeout(function () {
+ _this3._hoverHideDelay = null;
+ _this3.hide();
+ }, delay);
+ };
+
+ // 简单实现mouseEnter和mouseLeave。
+ // React的内置版本是有问题的:https://github.com/facebook/react/issues/4251
+ //在触发器被禁用的情况下,mouseOut / Over可能导致闪烁
+ //从一个子元素移动到另一个子元素。
+
+
+ OverlayTrigger.prototype.handleMouseOverOut = function handleMouseOverOut(handler, e) {
+ var target = e.currentTarget;
+ var related = e.relatedTarget || e.nativeEvent.toElement;
+
+ if (!related || related !== target && !(0, _contains2["default"])(target, related)) {
+ handler(e);
+ }
+ };
+
+ OverlayTrigger.prototype.handleHide = function handleHide() {
+ this.hide();
+ };
+
+ OverlayTrigger.prototype.show = function show() {
+ this.setState({ show: true });
+ };
+
+ OverlayTrigger.prototype.hide = function hide() {
+ this.setState({ show: false });
+ };
+
+ OverlayTrigger.prototype.makeOverlay = function makeOverlay(overlay, props) {
+ return _react2["default"].createElement(
+ _Overlay2["default"],
+ _extends({}, props, {
+ show: this.state.show,
+ onHide: this.handleHide,
+ target: this
+ }),
+ overlay
+ );
+ };
+
+ OverlayTrigger.prototype.renderOverlay = function renderOverlay() {
+ _reactDom2["default"].unstable_renderSubtreeIntoContainer(this, this._overlay, this._mountNode);
+ };
+
+ OverlayTrigger.prototype.render = function render() {
+ var _props = this.props,
+ trigger = _props.trigger,
+ overlay = _props.overlay,
+ children = _props.children,
+ onBlur = _props.onBlur,
+ onClick = _props.onClick,
+ onFocus = _props.onFocus,
+ onMouseOut = _props.onMouseOut,
+ onMouseOver = _props.onMouseOver,
+ props = _objectWithoutProperties(_props, ['trigger', 'overlay', 'children', 'onBlur', 'onClick', 'onFocus', 'onMouseOut', 'onMouseOver']);
+
+ delete props.delay;
+ delete props.delayShow;
+ delete props.delayHide;
+ delete props.defaultOverlayShown;
+
+ var child = _react2["default"].Children.only(children);
+ var childProps = child.props;
+
+ var triggerProps = {
+ 'aria-describedby': overlay.props.id
+ };
+
+ // FIXME: 这里用于传递这个组件上的处理程序的逻辑是不一致的。我们不应该通过任何这些道具。
+
+ triggerProps.onClick = (0, _createChainedFunction2["default"])(childProps.onClick, onClick);
+
+ if (isOneOf('click', trigger) && !('visible' in this.props)) {
+ triggerProps.onClick = (0, _createChainedFunction2["default"])(triggerProps.onClick, this.handleToggle);
+ }
+
+ if (isOneOf('hover', trigger) && !('visible' in this.props)) {
+ (0, _warning2["default"])(!(trigger === 'hover'), '[react-bootstrap] Specifying only the `"hover"` trigger limits the ' + 'visibility of the overlay to just mouse users. Consider also ' + 'including the `"focus"` trigger so that touch and keyboard only ' + 'users can see the overlay as well.');
+
+ triggerProps.onMouseOver = (0, _createChainedFunction2["default"])(childProps.onMouseOver, onMouseOver, this.handleMouseOver);
+ triggerProps.onMouseOut = (0, _createChainedFunction2["default"])(childProps.onMouseOut, onMouseOut, this.handleMouseOut);
+ }
+
+ if (isOneOf('focus', trigger) && !('visible' in this.props)) {
+ triggerProps.onFocus = (0, _createChainedFunction2["default"])(childProps.onFocus, onFocus, this.handleDelayedShow);
+ triggerProps.onBlur = (0, _createChainedFunction2["default"])(childProps.onBlur, onBlur, this.handleDelayedHide);
+ }
+
+ this._overlay = this.makeOverlay(overlay, props);
+
+ if (!isReact16) {
+ return (0, _react.cloneElement)(child, triggerProps);
+ }
+ triggerProps.key = 'overlay';
+
+ var portal = _react2["default"].createElement(
+ _Portal2["default"],
+ {
+ key: 'portal',
+ container: props.container },
+ this._overlay
+ );
+
+ return [(0, _react.cloneElement)(child, triggerProps), portal];
+ };
+
+ return OverlayTrigger;
+ }(_react.Component);
+
+ OverlayTrigger.propTypes = propTypes;
+ OverlayTrigger.defaultProps = defaultProps;
+
+ exports["default"] = OverlayTrigger;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 111 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = void 0;
+
+ var _inDOM = _interopRequireDefault(__webpack_require__(15));
+
+ var _default = function () {
+ // HTML DOM and SVG DOM may have different support levels,
+ // so we need to check on context instead of a document root element.
+ return _inDOM.default ? function (context, node) {
+ if (context.contains) {
+ return context.contains(node);
+ } else if (context.compareDocumentPosition) {
+ return context === node || !!(context.compareDocumentPosition(node) & 16);
+ } else {
+ return fallback(context, node);
+ }
+ } : fallback;
+ }();
+
+ exports.default = _default;
+
+ function fallback(context, node) {
+ if (node) do {
+ if (node === context) return true;
+ } while (node = node.parentNode);
+ return false;
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 112 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _reactDom = __webpack_require__(2);
+
+ var _reactDom2 = _interopRequireDefault(_reactDom);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _ownerDocument = __webpack_require__(74);
+
+ var _ownerDocument2 = _interopRequireDefault(_ownerDocument);
+
+ var _getContainer = __webpack_require__(113);
+
+ var _getContainer2 = _interopRequireDefault(_getContainer);
+
+ var _tinperBeeCore = __webpack_require__(27);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var isReact16 = _reactDom2["default"].createPortal !== undefined;
+ var createPortal = isReact16 ? _reactDom2["default"].createPortal : _reactDom2["default"].unstable_renderSubtreeIntoContainer;
+
+ var propTypes = {
+ /**
+ * 存放子组件的容器
+ */
+ container: _propTypes2["default"].oneOfType([_tinperBeeCore.componentOrElement, _propTypes2["default"].func])
+ };
+
+ var defaultProps = {};
+
+ /**
+ * Portal组件是将子组件渲染
+ */
+
+ var Portal = function (_Component) {
+ _inherits(Portal, _Component);
+
+ function Portal(props) {
+ _classCallCheck(this, Portal);
+
+ var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+ _this.getMountNode = _this.getMountNode.bind(_this);
+ _this.getOverlayDOMNode = _this.getOverlayDOMNode.bind(_this);
+ _this.mountOverlayTarget = _this.mountOverlayTarget.bind(_this);
+ _this.unmountOverlayTarget = _this.unmountOverlayTarget.bind(_this);
+ _this.renderOverlay = _this.renderOverlay.bind(_this);
+ _this.unrenderOverlay = _this.unrenderOverlay.bind(_this);
+
+ _this.overlayTarget = isReact16 ? document.createElement('div') : null;
+ return _this;
+ }
+
+ Portal.prototype.componentDidMount = function componentDidMount() {
+ if (isReact16) {
+ this.portalContainerNode = (0, _getContainer2["default"])(this.props.container, (0, _ownerDocument2["default"])(this).body);
+ this.portalContainerNode.appendChild(this.overlayTarget);
+ } else {
+ this.renderOverlay();
+ }
+
+ this.mounted = true;
+ };
+
+ Portal.prototype.componentDidUpdate = function componentDidUpdate() {
+ if (isReact16) {
+ var overlay = !this.props.children ? null : _react2["default"].Children.only(this.props.children);
+ if (overlay === null) {
+ this.unrenderOverlay();
+ this.unmountOverlayTarget();
+ } else {}
+ } else {
+ this.renderOverlay();
+ }
+ };
+ //this._overlayTarget为当前的要添加的子组件, this._portalContainerNode要添加组件的容器元素
+
+
+ Portal.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+ if (this.overlayTarget && nextProps.container !== this.props.container) {
+ this.portalContainerNode.removeChild(this.overlayTarget);
+ this.portalContainerNode = (0, _getContainer2["default"])(nextProps.container, (0, _ownerDocument2["default"])(this).body);
+ this.portalContainerNode.appendChild(this.overlayTarget);
+ }
+ };
+
+ Portal.prototype.componentWillUnmount = function componentWillUnmount() {
+ this.unrenderOverlay();
+ this.unmountOverlayTarget();
+
+ this.mounted = false;
+ };
+
+ Portal.prototype.getMountNode = function getMountNode() {
+ return this.overlayTarget;
+ };
+
+ Portal.prototype.getOverlayDOMNode = function getOverlayDOMNode() {
+ if (!this.mounted) {
+ throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
+ }
+
+ if (this.overlayInstance) {
+ return _reactDom2["default"].findDOMNode(this.overlayInstance);
+ }
+
+ return null;
+ };
+
+ /**
+ * 如果要添加的子组件不存在,就将div添加到要添加容器的DOM中;
+ */
+
+ Portal.prototype.mountOverlayTarget = function mountOverlayTarget() {
+ if (!this.overlayTarget) {
+ this.overlayTarget = document.createElement('div');
+ this.portalContainerNode = (0, _getContainer2["default"])(this.props.container, (0, _ownerDocument2["default"])(this).body);
+ this.portalContainerNode.appendChild(this.overlayTarget);
+ }
+ };
+ /**
+ * 将要添加的子元素从容器中移除,并把变量置为null
+ */
+
+
+ Portal.prototype.unmountOverlayTarget = function unmountOverlayTarget() {
+ if (this.overlayTarget) {
+ this.portalContainerNode.removeChild(this.overlayTarget);
+ this.overlayTarget = null;
+ }
+ this.portalContainerNode = null;
+ };
+ /**
+ * 手动渲染_overlayTarget
+ */
+
+
+ Portal.prototype.renderOverlay = function renderOverlay() {
+
+ var overlay = !this.props.children ? null : _react2["default"].Children.only(this.props.children);
+
+ // Save reference for future access.
+ if (overlay !== null) {
+ this.mountOverlayTarget();
+ this.overlayInstance = _reactDom2["default"].unstable_renderSubtreeIntoContainer(this, overlay, this.overlayTarget);
+ } else {
+ // Unrender if the component is null for transitions to null
+ this.unrenderOverlay();
+ this.unmountOverlayTarget();
+ }
+ };
+ /**
+ * 销毁_overlayTarget组件。并把_overlayInstance置为null
+ */
+
+
+ Portal.prototype.unrenderOverlay = function unrenderOverlay() {
+ if (this.overlayTarget) {
+ !isReact16 && _reactDom2["default"].unmountComponentAtNode(this.overlayTarget);
+ this.overlayInstance = null;
+ }
+ };
+
+ Portal.prototype.render = function render() {
+ if (!isReact16) {
+ return null;
+ }
+
+ var overlay = !this.props.children ? null : _react2["default"].Children.only(this.props.children);
+
+ return _reactDom2["default"].createPortal(overlay, this.overlayTarget);
+ };
+
+ return Portal;
+ }(_react.Component);
+
+ ;
+
+ Portal.propTypes = propTypes;
+ Portal.defaultProps = defaultProps;
+
+ exports["default"] = Portal;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 113 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+ exports["default"] = getContainer;
+
+ var _reactDom = __webpack_require__(2);
+
+ var _reactDom2 = _interopRequireDefault(_reactDom);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ /**
+ * 获取容器组件
+ * @param {[type]} container [description]
+ * @param {[type]} defaultContainer [description]
+ * @return {[type]} [description]
+ */
+ function getContainer(container, defaultContainer) {
+ container = typeof container === 'function' ? container() : container;
+ return _reactDom2["default"].findDOMNode(container) || defaultContainer;
+ }
+ module.exports = exports['default'];
+
+/***/ }),
+/* 114 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _BaseOverlay = __webpack_require__(115);
+
+ var _BaseOverlay2 = _interopRequireDefault(_BaseOverlay);
+
+ var _tinperBeeCore = __webpack_require__(27);
+
+ var _Fade = __webpack_require__(129);
+
+ var _Fade2 = _interopRequireDefault(_Fade);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = _extends({}, _BaseOverlay2["default"].propTypes, {
+
+ /**
+ * 是否显示
+ */
+ show: _propTypes2["default"].bool,
+ /**
+ * 是
+ */
+ rootClose: _propTypes2["default"].bool,
+ /**
+ * 当点击rootClose触发close时的回调函数
+ */
+ onHide: _propTypes2["default"].func,
+
+ /**
+ * 使用动画
+ */
+ animation: _propTypes2["default"].oneOfType([_tinperBeeCore.elementType, _propTypes2["default"].func]),
+
+ /**
+ * Callback fired before the Overlay transitions in
+ */
+ onEnter: _propTypes2["default"].func,
+
+ /**
+ * Callback fired as the Overlay begins to transition in
+ */
+ onEntering: _propTypes2["default"].func,
+
+ /**
+ * Callback fired after the Overlay finishes transitioning in
+ */
+ onEntered: _propTypes2["default"].func,
+
+ /**
+ * Callback fired right before the Overlay transitions out
+ */
+ onExit: _propTypes2["default"].func,
+
+ /**
+ * Callback fired as the Overlay begins to transition out
+ */
+ onExiting: _propTypes2["default"].func,
+
+ /**
+ * Callback fired after the Overlay finishes transitioning out
+ */
+ onExited: _propTypes2["default"].func,
+
+ /**
+ * Sets the direction of the Overlay.
+ */
+ placement: _propTypes2["default"].oneOf(['top', 'right', 'bottom', 'left']),
+
+ /**
+ * 当Overlay在placement方向放不下时的第二优先级方向
+ */
+ secondPlacement: _propTypes2["default"].oneOf(['top', 'right', 'bottom', 'left'])
+ });
+
+ var defaultProps = {
+ animation: _Fade2["default"],
+ rootClose: false,
+ show: false,
+ placement: 'right'
+ };
+
+ var Overlay = function (_Component) {
+ _inherits(Overlay, _Component);
+
+ function Overlay() {
+ _classCallCheck(this, Overlay);
+
+ return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+ }
+
+ Overlay.prototype.render = function render() {
+ var _props = this.props,
+ animation = _props.animation,
+ children = _props.children,
+ props = _objectWithoutProperties(_props, ['animation', 'children']);
+
+ var transition = animation === true ? _Fade2["default"] : animation || null;
+
+ var child = void 0;
+
+ if (!transition) {
+ child = (0, _react.cloneElement)(children, {
+ className: (0, _classnames2["default"])(children.props.className, 'in')
+ });
+ } else {
+ child = children;
+ }
+
+ return _react2["default"].createElement(
+ _BaseOverlay2["default"],
+ _extends({}, props, {
+ transition: transition
+ }),
+ child
+ );
+ };
+
+ return Overlay;
+ }(_react.Component);
+
+ Overlay.propTypes = propTypes;
+ Overlay.defaultProps = defaultProps;
+
+ exports["default"] = Overlay;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 115 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _reactDom = __webpack_require__(2);
+
+ var _reactDom2 = _interopRequireDefault(_reactDom);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _Portal = __webpack_require__(112);
+
+ var _Portal2 = _interopRequireDefault(_Portal);
+
+ var _Position = __webpack_require__(116);
+
+ var _Position2 = _interopRequireDefault(_Position);
+
+ var _RootCloseWrapper = __webpack_require__(128);
+
+ var _RootCloseWrapper2 = _interopRequireDefault(_RootCloseWrapper);
+
+ var _tinperBeeCore = __webpack_require__(27);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var isReact16 = _reactDom2["default"].createPortal !== undefined;
+
+ var propTypes = _extends({}, _Position2["default"].propTypes, {
+
+ /**
+ * 是否显示
+ */
+ show: _propTypes2["default"].bool,
+
+ /**
+ * 点击其他地方,是否隐藏overlay
+ */
+ rootClose: _propTypes2["default"].bool,
+
+ /**
+ * 当rootClose为true的时候,触发的隐藏方法
+ * @type func
+ */
+ onHide: function onHide(props) {
+ var propType = _propTypes2["default"].func;
+ if (props.rootClose) {
+ propType = propType.isRequired;
+ }
+
+ for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+ args[_key - 1] = arguments[_key];
+ }
+
+ return propType.apply(undefined, [props].concat(args));
+ },
+
+
+ /**
+ * 过渡动画组件
+ */
+ transition: _propTypes2["default"].oneOfType([_tinperBeeCore.elementType, _propTypes2["default"].func]),
+
+ /**
+ * overlay添加动画前的钩子函数
+ */
+ onEnter: _propTypes2["default"].func,
+
+ /**
+ * 开始动画的钩子函数
+ */
+ onEntering: _propTypes2["default"].func,
+
+ /**
+ * 渲染之后的钩子函数
+ */
+ onEntered: _propTypes2["default"].func,
+
+ /**
+ * 关闭开始时的钩子函数
+ */
+ onExit: _propTypes2["default"].func,
+
+ /**
+ * 关闭时的钩子函数
+ */
+ onExiting: _propTypes2["default"].func,
+
+ /**
+ * 关闭后的钩子函数
+ */
+ onExited: _propTypes2["default"].func
+ });
+
+ function noop() {}
+
+ var defaultProps = {
+ show: false,
+ rootClose: true
+ };
+
+ /**
+ * 悬浮组件
+ */
+
+ var BaseOverlay = function (_Component) {
+ _inherits(BaseOverlay, _Component);
+
+ function BaseOverlay(props, context) {
+ _classCallCheck(this, BaseOverlay);
+
+ var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));
+
+ _this.state = { exited: !props.show };
+ _this.onHiddenListener = _this.handleHidden.bind(_this);
+ return _this;
+ }
+
+ BaseOverlay.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+ if (nextProps.show) {
+ this.setState({ exited: false });
+ } else if (!nextProps.transition) {
+ // Otherwise let handleHidden take care of marking exited.
+ this.setState({ exited: true });
+ }
+ };
+
+ BaseOverlay.prototype.handleHidden = function handleHidden() {
+ this.setState({ exited: true });
+
+ if (this.props.onExited) {
+ var _props;
+
+ (_props = this.props).onExited.apply(_props, arguments);
+ }
+ };
+
+ BaseOverlay.prototype.render = function render() {
+ var _props2 = this.props,
+ container = _props2.container,
+ containerPadding = _props2.containerPadding,
+ target = _props2.target,
+ placement = _props2.placement,
+ secondPlacement = _props2.secondPlacement,
+ shouldUpdatePosition = _props2.shouldUpdatePosition,
+ rootClose = _props2.rootClose,
+ positionLeft = _props2.positionLeft,
+ positionTop = _props2.positionTop,
+ children = _props2.children,
+ Transition = _props2.transition,
+ props = _objectWithoutProperties(_props2, ['container', 'containerPadding', 'target', 'placement', 'secondPlacement', 'shouldUpdatePosition', 'rootClose', 'positionLeft', 'positionTop', 'children', 'transition']);
+
+ // Don't un-render the overlay while it's transitioning out.
+
+
+ var mountOverlay = props.show || Transition && !this.state.exited;
+ if (!mountOverlay) {
+ // Don't bother showing anything if we don't have to.
+ return null;
+ }
+
+ var child = children;
+
+ // Position is be inner-most because it adds inline styles into the child,
+ // which the other wrappers don't forward correctly.
+ child = _react2["default"].createElement(
+ _Position2["default"],
+ {
+ container: container,
+ containerPadding: containerPadding,
+ target: target,
+ positionLeft: positionLeft,
+ positionTop: positionTop,
+ placement: placement,
+ secondPlacement: secondPlacement,
+ shouldUpdatePosition: shouldUpdatePosition },
+ child
+ );
+
+ if (Transition) {
+ var onExit = props.onExit,
+ onExiting = props.onExiting,
+ onEnter = props.onEnter,
+ onEntering = props.onEntering,
+ onEntered = props.onEntered;
+
+ // This animates the child node by injecting props, so it must precede
+ // anything that adds a wrapping div.
+
+ child = _react2["default"].createElement(
+ Transition,
+ {
+ 'in': props.show,
+ transitionAppear: true,
+ onExit: onExit,
+ onExiting: onExiting,
+ onExited: this.onHiddenListener,
+ onEnter: onEnter,
+ onEntering: onEntering,
+ onEntered: onEntered
+ },
+ child
+ );
+ }
+
+ // This goes after everything else because it adds a wrapping div.
+ if (rootClose) {
+ child = _react2["default"].createElement(
+ _RootCloseWrapper2["default"],
+ { onRootClose: props.onHide },
+ child
+ );
+ }
+
+ if (isReact16) {
+ return child;
+ } else {
+ return _react2["default"].createElement(
+ _Portal2["default"],
+ { container: container },
+ child
+ );
+ }
+ };
+
+ return BaseOverlay;
+ }(_react.Component);
+
+ BaseOverlay.propTypes = propTypes;
+ BaseOverlay.defaultProps = defaultProps;
+
+ exports["default"] = BaseOverlay;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 116 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _reactDom = __webpack_require__(2);
+
+ var _reactDom2 = _interopRequireDefault(_reactDom);
+
+ var _tinperBeeCore = __webpack_require__(27);
+
+ var _requestAnimationFrame = __webpack_require__(117);
+
+ var _requestAnimationFrame2 = _interopRequireDefault(_requestAnimationFrame);
+
+ var _calculatePosition = __webpack_require__(118);
+
+ var _calculatePosition2 = _interopRequireDefault(_calculatePosition);
+
+ var _getContainer = __webpack_require__(113);
+
+ var _getContainer2 = _interopRequireDefault(_getContainer);
+
+ var _ownerDocument = __webpack_require__(74);
+
+ var _ownerDocument2 = _interopRequireDefault(_ownerDocument);
+
+ var _ownerWindow = __webpack_require__(126);
+
+ var _ownerWindow2 = _interopRequireDefault(_ownerWindow);
+
+ var _addEventListener = __webpack_require__(76);
+
+ var _addEventListener2 = _interopRequireDefault(_addEventListener);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = {
+ /**
+ * 要设置定位的元素
+ */
+ target: _propTypes2["default"].oneOfType([_tinperBeeCore.componentOrElement, _propTypes2["default"].func]),
+
+ /**
+ * 存放的容器元素
+ */
+ container: _propTypes2["default"].oneOfType([_tinperBeeCore.componentOrElement, _propTypes2["default"].func]),
+ /**
+ * 容器padding值
+ */
+ containerPadding: _propTypes2["default"].number,
+ /**
+ * 位置设置
+ */
+ placement: _propTypes2["default"].oneOf(['top', 'right', 'bottom', 'left']),
+
+ /**
+ * 第二优先级位置设置
+ */
+ secondPlacement: _propTypes2["default"].oneOf(['top', 'right', 'bottom', 'left']),
+
+ /**
+ * 是否需要更新位置
+ */
+ shouldUpdatePosition: _propTypes2["default"].bool
+ };
+
+ var defaultProps = {
+ containerPadding: 0,
+ placement: 'right',
+ shouldUpdatePosition: false
+ };
+
+ /**
+ * 计算子组件的位置的组件
+ */
+
+ var Position = function (_Component) {
+ _inherits(Position, _Component);
+
+ function Position(props, context) {
+ _classCallCheck(this, Position);
+
+ var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));
+
+ _this.state = {
+ positionLeft: 0,
+ positionTop: 0,
+ arrowOffsetLeft: null,
+ arrowOffsetTop: null
+ };
+
+ _this.needsFlush = false;
+ _this.lastTarget = null;
+
+ _this.getTarget = _this.getTarget.bind(_this);
+ _this.maybeUpdatePosition = _this.maybeUpdatePosition.bind(_this);
+ _this.updatePosition = _this.updatePosition.bind(_this);
+ _this.onWindowResize = _this.onWindowResize.bind(_this);
+ return _this;
+ }
+
+ Position.prototype.componentDidMount = function componentDidMount() {
+ var _this2 = this;
+
+ this._isMounted = true;
+
+ this._windowResizeListener = (0, _addEventListener2["default"])((0, _ownerWindow2["default"])(this), 'resize', function () {
+ return _this2.onWindowResize();
+ });
+
+ this.updatePosition(this.getTarget());
+ };
+
+ Position.prototype.componentWillReceiveProps = function componentWillReceiveProps() {
+ this.needsFlush = true;
+ };
+
+ Position.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
+ if (this.needsFlush) {
+ this.needsFlush = false;
+
+ this.maybeUpdatePosition();
+ }
+ };
+
+ Position.prototype.componentWillUnmount = function componentWillUnmount() {
+ this._isMounted = false;
+
+ if (this._windowResizeListener) {
+ this._windowResizeListener.remove();
+ }
+ };
+
+ /**
+ * 获取要设置位置的子元素
+ */
+
+
+ Position.prototype.getTarget = function getTarget() {
+ var target = this.props.target;
+
+ var targetElement = typeof target === 'function' ? target() : target;
+ return targetElement && _reactDom2["default"].findDOMNode(targetElement) || null;
+ };
+
+ /**
+ * 验证是否需要更新位置
+ */
+
+
+ Position.prototype.maybeUpdatePosition = function maybeUpdatePosition(placementChanged) {
+ var target = this.getTarget();
+ if (!this.props.shouldUpdatePosition && target === this.lastTarget && !placementChanged) {
+ return;
+ }
+
+ this.updatePosition(target);
+ };
+
+ Position.prototype.onWindowResize = function onWindowResize() {
+ var _this3 = this;
+
+ (0, _requestAnimationFrame2["default"])(function () {
+ return _this3.updatePosition(_this3.getTarget());
+ });
+ };
+
+ /**
+ * 更新位置
+ */
+
+ Position.prototype.updatePosition = function updatePosition(target) {
+ var _props = this.props,
+ placement = _props.placement,
+ secondPlacement = _props.secondPlacement;
+
+
+ if (!this._isMounted) {
+ return;
+ }
+ this.lastTarget = target;
+
+ if (!target) {
+ this.setState({
+ positionLeft: 0,
+ positionTop: 0,
+ arrowOffsetLeft: null,
+ arrowOffsetTop: null
+ });
+
+ return;
+ }
+
+ var overlay = _reactDom2["default"].findDOMNode(this);
+ var container = (0, _getContainer2["default"])(this.props.container, (0, _ownerDocument2["default"])(this).body);
+
+ // 若设置了第二渲染位置,placement的优先级是: placement > secondPlacement > placement的反方向
+ if ("secondPlacement" in this.props && secondPlacement) {
+ var initPosition = (0, _calculatePosition2["default"])(placement, overlay, target, container, this.props.containerPadding);
+ if (initPosition.inverseArrow) {
+ var secondPosition = (0, _calculatePosition2["default"])(secondPlacement, overlay, target, container, this.props.containerPadding);
+
+ if (secondPosition.inverseArrow) {
+ this.setState(_extends({}, initPosition, {
+ renderPlacement: placement
+ }));
+ } else {
+ this.setState(_extends({}, secondPosition, {
+ renderPlacement: secondPlacement
+ }));
+ }
+ } else {
+ this.setState(_extends({}, initPosition, {
+ renderPlacement: placement
+ }));
+ }
+ } else {
+ this.setState((0, _calculatePosition2["default"])(placement, overlay, target, container, this.props.containerPadding));
+ }
+ };
+
+ Position.prototype.render = function render() {
+ var _props2 = this.props,
+ children = _props2.children,
+ className = _props2.className,
+ props = _objectWithoutProperties(_props2, ['children', 'className']);
+
+ var _state = this.state,
+ positionLeft = _state.positionLeft,
+ positionTop = _state.positionTop,
+ inverseArrow = _state.inverseArrow,
+ width = _state.width,
+ arrowPosition = _objectWithoutProperties(_state, ['positionLeft', 'positionTop', 'inverseArrow', 'width']);
+
+ // These should not be forwarded to the child.
+
+
+ delete props.target;
+ delete props.container;
+ delete props.containerPadding;
+ delete props.shouldUpdatePosition;
+
+ var child = _react2["default"].Children.only(children);
+ return (0, _react.cloneElement)(child, _extends({
+ className: (0, _classnames2["default"])(className, child.props.className, { 'inverse-arrow': inverseArrow })
+ }, arrowPosition, {
+ style: _extends({}, child.props.style, {
+ width: width,
+ left: positionLeft,
+ top: positionTop
+ })
+ }));
+ };
+
+ return Position;
+ }(_react.Component);
+
+ Position.propTypes = propTypes;
+ Position.defaultProps = defaultProps;
+
+ exports["default"] = Position;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 117 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = void 0;
+
+ var _inDOM = _interopRequireDefault(__webpack_require__(15));
+
+ var vendors = ['', 'webkit', 'moz', 'o', 'ms'];
+ var cancel = 'clearTimeout';
+ var raf = fallback;
+ var compatRaf;
+
+ var getKey = function getKey(vendor, k) {
+ return vendor + (!vendor ? k : k[0].toUpperCase() + k.substr(1)) + 'AnimationFrame';
+ };
+
+ if (_inDOM.default) {
+ vendors.some(function (vendor) {
+ var rafKey = getKey(vendor, 'request');
+
+ if (rafKey in window) {
+ cancel = getKey(vendor, 'cancel');
+ return raf = function raf(cb) {
+ return window[rafKey](cb);
+ };
+ }
+ });
+ }
+ /* https://github.com/component/raf */
+
+
+ var prev = new Date().getTime();
+
+ function fallback(fn) {
+ var curr = new Date().getTime(),
+ ms = Math.max(0, 16 - (curr - prev)),
+ req = setTimeout(fn, ms);
+ prev = curr;
+ return req;
+ }
+
+ compatRaf = function compatRaf(cb) {
+ return raf(cb);
+ };
+
+ compatRaf.cancel = function (id) {
+ window[cancel] && typeof window[cancel] === 'function' && window[cancel](id);
+ };
+
+ var _default = compatRaf;
+ exports.default = _default;
+ module.exports = exports["default"];
+
+/***/ }),
+/* 118 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+ exports["default"] = calculatePosition;
+
+ var _offset = __webpack_require__(119);
+
+ var _offset2 = _interopRequireDefault(_offset);
+
+ var _position = __webpack_require__(121);
+
+ var _position2 = _interopRequireDefault(_position);
+
+ var _scrollTop = __webpack_require__(124);
+
+ var _scrollTop2 = _interopRequireDefault(_scrollTop);
+
+ var _ownerDocument = __webpack_require__(74);
+
+ var _ownerDocument2 = _interopRequireDefault(_ownerDocument);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function getContainerDimensions(containerNode) {
+ var width = void 0,
+ height = void 0,
+ scroll = void 0;
+
+ if (containerNode.tagName === 'BODY') {
+ width = document.body.scrollWidth;
+ height = document.body.scrollHeight;
+
+ scroll = (0, _scrollTop2["default"])((0, _ownerDocument2["default"])(containerNode).documentElement) || (0, _scrollTop2["default"])(containerNode);
+ } else {
+ var _getOffset = (0, _offset2["default"])(containerNode);
+
+ width = _getOffset.width;
+ height = _getOffset.height;
+
+ scroll = (0, _scrollTop2["default"])(containerNode);
+ }
+
+ return { width: width, height: height, scroll: scroll };
+ }
+
+ function getTopDelta(top, overlayHeight, container, padding) {
+ var containerDimensions = getContainerDimensions(container);
+ var containerScroll = containerDimensions.scroll;
+ var containerHeight = containerDimensions.height;
+
+ var topEdgeOffset = top - padding - containerScroll;
+ var bottomEdgeOffset = top + padding - containerScroll + overlayHeight;
+
+ if (topEdgeOffset < 0) {
+ return -topEdgeOffset;
+ } else if (bottomEdgeOffset > containerHeight) {
+ return containerHeight - bottomEdgeOffset;
+ } else {
+ return 0;
+ }
+ }
+
+ function getLeftDelta(left, overlayWidth, container, padding) {
+ var containerDimensions = getContainerDimensions(container);
+ var containerWidth = containerDimensions.width;
+
+ var leftEdgeOffset = left - padding;
+ var rightEdgeOffset = left + padding + overlayWidth;
+
+ if (leftEdgeOffset < 0) {
+ return -leftEdgeOffset;
+ } else if (rightEdgeOffset > containerWidth) {
+ return containerWidth - rightEdgeOffset;
+ }
+
+ return 0;
+ }
+
+ function calculatePosition(placement, overlayNode, target, container, padding) {
+ var childOffset = container.tagName === 'BODY' ? (0, _offset2["default"])(target) : (0, _position2["default"])(target, container);
+
+ var _getOffset2 = (0, _offset2["default"])(overlayNode),
+ overlayHeight = _getOffset2.height,
+ overlayWidth = _getOffset2.width;
+
+ var positionLeft = void 0,
+ positionTop = void 0,
+ arrowOffsetLeft = void 0,
+ arrowOffsetTop = void 0,
+ inverseArrow = void 0;
+
+ if (/^left|^right/.test(placement)) {
+ positionTop = childOffset.top + (childOffset.height - overlayHeight) / 2;
+
+ if (/left/.test(placement)) {
+ positionLeft = childOffset.left - overlayWidth;
+ } else {
+ positionLeft = childOffset.left + childOffset.width;
+ }
+
+ if (/Top/.test(placement)) {
+ positionTop = childOffset.top;
+ } else if (/Bottom/.test(placement)) {
+ positionTop = childOffset.top + childOffset.height - overlayHeight;
+ }
+
+ var topDelta = getTopDelta(positionTop, overlayHeight, container, padding);
+ var leftDelta = getLeftDelta(positionLeft, overlayWidth, container, padding);
+ //内容超出
+ if (leftDelta > 0) {
+ inverseArrow = true;
+ positionLeft = childOffset.left + childOffset.width + 6;
+ } else if (leftDelta < 0) {
+ inverseArrow = true;
+ positionLeft = childOffset.left - overlayWidth - 6;
+ } else {
+ positionLeft += leftDelta;
+ }
+ positionTop += topDelta;
+ arrowOffsetTop = 50 * (1 - 2 * topDelta / overlayHeight) + '%';
+ arrowOffsetLeft = void 0;
+ } else if (/^top|^bottom/.test(placement)) {
+ positionLeft = childOffset.left + (childOffset.width - overlayWidth) / 2;
+
+ if (/top/.test(placement)) {
+ positionTop = childOffset.top - overlayHeight;
+ } else {
+ positionTop = childOffset.top + childOffset.height;
+ }
+
+ if (/Left/.test(placement)) {
+ positionLeft = childOffset.left;
+ } else if (/Right/.test(placement)) {
+ positionLeft = childOffset.left + (childOffset.width - overlayWidth);
+ }
+
+ var _leftDelta = getLeftDelta(positionLeft, overlayWidth, container, padding);
+ var _topDelta = getTopDelta(positionTop, overlayHeight, container, padding);
+ positionLeft += _leftDelta;
+ arrowOffsetLeft = 50 * (1 - 2 * _leftDelta / overlayWidth) + '%';
+ arrowOffsetTop = void 0;
+ if (_topDelta > 0) {
+ inverseArrow = true;
+ positionTop = childOffset.top + childOffset.height + 6;
+ } else if (_topDelta < 0) {
+ inverseArrow = true;
+ positionTop = childOffset.top - overlayHeight - 6;
+ } else {
+ positionTop += _topDelta;
+ }
+
+ // if((positionLeft + panelWidth) > docWidth)
+ // left = docWidth - panelWidth - 10;
+ // if(left < 0)
+ // left = 0;
+
+ // if((top + panelHeight) > docHeight) {
+ // top = docHeight - panelHeight - 10;
+ // }
+
+ // if(top < 0)
+ // top = 0;
+ } else {
+ throw new Error('calcOverlayPosition(): No such placement of "' + placement + '" found.');
+ }
+
+ return { positionLeft: positionLeft, positionTop: positionTop, arrowOffsetLeft: arrowOffsetLeft, arrowOffsetTop: arrowOffsetTop, inverseArrow: inverseArrow, width: overlayWidth };
+ }
+ module.exports = exports['default'];
+
+/***/ }),
+/* 119 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = offset;
+
+ var _contains = _interopRequireDefault(__webpack_require__(111));
+
+ var _isWindow = _interopRequireDefault(__webpack_require__(120));
+
+ var _ownerDocument = _interopRequireDefault(__webpack_require__(75));
+
+ function offset(node) {
+ var doc = (0, _ownerDocument.default)(node),
+ win = (0, _isWindow.default)(doc),
+ docElem = doc && doc.documentElement,
+ box = {
+ top: 0,
+ left: 0,
+ height: 0,
+ width: 0
+ };
+ if (!doc) return; // Make sure it's not a disconnected DOM node
+
+ if (!(0, _contains.default)(docElem, node)) return box;
+ if (node.getBoundingClientRect !== undefined) box = node.getBoundingClientRect(); // IE8 getBoundingClientRect doesn't support width & height
+
+ box = {
+ top: box.top + (win.pageYOffset || docElem.scrollTop) - (docElem.clientTop || 0),
+ left: box.left + (win.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || 0),
+ width: (box.width == null ? node.offsetWidth : box.width) || 0,
+ height: (box.height == null ? node.offsetHeight : box.height) || 0
+ };
+ return box;
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 120 */
+/***/ (function(module, exports) {
+
+ "use strict";
+
+ exports.__esModule = true;
+ exports.default = getWindow;
+
+ function getWindow(node) {
+ return node === node.window ? node : node.nodeType === 9 ? node.defaultView || node.parentWindow : false;
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 121 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = position;
+
+ var _extends2 = _interopRequireDefault(__webpack_require__(122));
+
+ var _offset = _interopRequireDefault(__webpack_require__(119));
+
+ var _offsetParent = _interopRequireDefault(__webpack_require__(123));
+
+ var _scrollTop = _interopRequireDefault(__webpack_require__(124));
+
+ var _scrollLeft = _interopRequireDefault(__webpack_require__(125));
+
+ var _style = _interopRequireDefault(__webpack_require__(18));
+
+ function nodeName(node) {
+ return node.nodeName && node.nodeName.toLowerCase();
+ }
+
+ function position(node, offsetParent) {
+ var parentOffset = {
+ top: 0,
+ left: 0
+ },
+ offset; // Fixed elements are offset from window (parentOffset = {top:0, left: 0},
+ // because it is its only offset parent
+
+ if ((0, _style.default)(node, 'position') === 'fixed') {
+ offset = node.getBoundingClientRect();
+ } else {
+ offsetParent = offsetParent || (0, _offsetParent.default)(node);
+ offset = (0, _offset.default)(node);
+ if (nodeName(offsetParent) !== 'html') parentOffset = (0, _offset.default)(offsetParent);
+ parentOffset.top += parseInt((0, _style.default)(offsetParent, 'borderTopWidth'), 10) - (0, _scrollTop.default)(offsetParent) || 0;
+ parentOffset.left += parseInt((0, _style.default)(offsetParent, 'borderLeftWidth'), 10) - (0, _scrollLeft.default)(offsetParent) || 0;
+ } // Subtract parent offsets and node margins
+
+
+ return (0, _extends2.default)({}, offset, {
+ top: offset.top - parentOffset.top - (parseInt((0, _style.default)(node, 'marginTop'), 10) || 0),
+ left: offset.left - parentOffset.left - (parseInt((0, _style.default)(node, 'marginLeft'), 10) || 0)
+ });
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 122 */
+/***/ (function(module, exports) {
+
+ function _extends() {
+ module.exports = _extends = Object.assign || function (target) {
+ for (var i = 1; i < arguments.length; i++) {
+ var source = arguments[i];
+
+ for (var key in source) {
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
+ target[key] = source[key];
+ }
+ }
+ }
+
+ return target;
+ };
+
+ return _extends.apply(this, arguments);
+ }
+
+ module.exports = _extends;
+
+/***/ }),
+/* 123 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = offsetParent;
+
+ var _ownerDocument = _interopRequireDefault(__webpack_require__(75));
+
+ var _style = _interopRequireDefault(__webpack_require__(18));
+
+ function nodeName(node) {
+ return node.nodeName && node.nodeName.toLowerCase();
+ }
+
+ function offsetParent(node) {
+ var doc = (0, _ownerDocument.default)(node),
+ offsetParent = node && node.offsetParent;
+
+ while (offsetParent && nodeName(node) !== 'html' && (0, _style.default)(offsetParent, 'position') === 'static') {
+ offsetParent = offsetParent.offsetParent;
+ }
+
+ return offsetParent || doc.documentElement;
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 124 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = scrollTop;
+
+ var _isWindow = _interopRequireDefault(__webpack_require__(120));
+
+ function scrollTop(node, val) {
+ var win = (0, _isWindow.default)(node);
+ if (val === undefined) return win ? 'pageYOffset' in win ? win.pageYOffset : win.document.documentElement.scrollTop : node.scrollTop;
+ if (win) win.scrollTo('pageXOffset' in win ? win.pageXOffset : win.document.documentElement.scrollLeft, val);else node.scrollTop = val;
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 125 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = scrollTop;
+
+ var _isWindow = _interopRequireDefault(__webpack_require__(120));
+
+ function scrollTop(node, val) {
+ var win = (0, _isWindow.default)(node);
+ if (val === undefined) return win ? 'pageXOffset' in win ? win.pageXOffset : win.document.documentElement.scrollLeft : node.scrollLeft;
+ if (win) win.scrollTo(val, 'pageYOffset' in win ? win.pageYOffset : win.document.documentElement.scrollTop);else node.scrollLeft = val;
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 126 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ exports["default"] = function (componentOrElement) {
+ return (0, _ownerWindow2["default"])(_reactDom2["default"].findDOMNode(componentOrElement));
+ };
+
+ var _reactDom = __webpack_require__(2);
+
+ var _reactDom2 = _interopRequireDefault(_reactDom);
+
+ var _ownerWindow = __webpack_require__(127);
+
+ var _ownerWindow2 = _interopRequireDefault(_ownerWindow);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ module.exports = exports['default'];
+
+/***/ }),
+/* 127 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = ownerWindow;
+
+ var _ownerDocument = _interopRequireDefault(__webpack_require__(75));
+
+ function ownerWindow(node) {
+ var doc = (0, _ownerDocument.default)(node);
+ return doc && doc.defaultView || doc.parentWindow;
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 128 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _contains = __webpack_require__(111);
+
+ var _contains2 = _interopRequireDefault(_contains);
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _reactDom = __webpack_require__(2);
+
+ var _reactDom2 = _interopRequireDefault(_reactDom);
+
+ var _addEventListener = __webpack_require__(76);
+
+ var _addEventListener2 = _interopRequireDefault(_addEventListener);
+
+ var _ownerDocument = __webpack_require__(74);
+
+ var _ownerDocument2 = _interopRequireDefault(_ownerDocument);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = {
+ onRootClose: _propTypes2["default"].func,
+ children: _propTypes2["default"].element,
+ /**
+ * 是否禁用
+ */
+ disabled: _propTypes2["default"].bool,
+ /**
+ * 触发事件选择
+ */
+ event: _propTypes2["default"].oneOf(['click', 'mousedown'])
+ };
+
+ var defaultProps = {
+ event: 'click'
+ };
+
+ function isLeftClickEvent(event) {
+ return event.button === 0;
+ }
+
+ function isModifiedEvent(event) {
+ return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+ }
+
+ var RootCloseWrapper = function (_Component) {
+ _inherits(RootCloseWrapper, _Component);
+
+ function RootCloseWrapper(props, context) {
+ _classCallCheck(this, RootCloseWrapper);
+
+ var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));
+
+ _this.handleMouseCapture = function (e) {
+ _this.preventMouseRootClose = isModifiedEvent(e) || !isLeftClickEvent(e) || (0, _contains2["default"])(_reactDom2["default"].findDOMNode(_this), e.target);
+ };
+
+ _this.handleMouse = function () {
+ if (!_this.preventMouseRootClose && _this.props.onRootClose) {
+ _this.props.onRootClose();
+ }
+ };
+
+ _this.handleKeyUp = function (e) {
+ if (e.keyCode === 27 && _this.props.onRootClose) {
+ _this.props.onRootClose();
+ }
+ };
+
+ _this.preventMouseRootClose = false;
+
+ _this.addEventListeners = _this.addEventListeners.bind(_this);
+ _this.removeEventListeners = _this.removeEventListeners.bind(_this);
+
+ return _this;
+ }
+
+ RootCloseWrapper.prototype.componentDidMount = function componentDidMount() {
+ if (!this.props.disabled) {
+ this.addEventListeners();
+ }
+ };
+
+ RootCloseWrapper.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
+ if (!this.props.disabled && prevProps.disabled) {
+ this.addEventListeners();
+ } else if (this.props.disabled && !prevProps.disabled) {
+ this.removeEventListeners();
+ }
+ };
+
+ RootCloseWrapper.prototype.componentWillUnmount = function componentWillUnmount() {
+ if (!this.props.disabled) {
+ this.removeEventListeners();
+ }
+ };
+
+ RootCloseWrapper.prototype.addEventListeners = function addEventListeners() {
+ var event = this.props.event;
+
+ var doc = (0, _ownerDocument2["default"])(this);
+
+ // 避免react的监听事件触发引起判断的不准确
+ this.documentMouseCaptureListener = (0, _addEventListener2["default"])(doc, event, this.handleMouseCapture, true);
+
+ this.documentMouseListener = (0, _addEventListener2["default"])(doc, event, this.handleMouse);
+
+ this.documentKeyupListener = (0, _addEventListener2["default"])(doc, 'keyup', this.handleKeyUp);
+ };
+
+ RootCloseWrapper.prototype.removeEventListeners = function removeEventListeners() {
+ if (this.documentMouseCaptureListener) {
+ this.documentMouseCaptureListener.remove();
+ }
+
+ if (this.documentMouseListener) {
+ this.documentMouseListener.remove();
+ }
+
+ if (this.documentKeyupListener) {
+ this.documentKeyupListener.remove();
+ }
+ };
+
+ RootCloseWrapper.prototype.render = function render() {
+ return this.props.children;
+ };
+
+ return RootCloseWrapper;
+ }(_react.Component);
+
+ RootCloseWrapper.propTypes = propTypes;
+
+ RootCloseWrapper.defaultProps = defaultProps;
+
+ exports["default"] = RootCloseWrapper;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 129 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _Transition = __webpack_require__(130);
+
+ var _Transition2 = _interopRequireDefault(_Transition);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = {
+ /**
+ * Show the component; triggers the fade in or fade out animation
+ */
+ "in": _propTypes2["default"].bool,
+
+ /**
+ * Unmount the component (remove it from the DOM) when it is faded out
+ */
+ unmountOnExit: _propTypes2["default"].bool,
+
+ /**
+ * Run the fade in animation when the component mounts, if it is initially
+ * shown
+ */
+ transitionAppear: _propTypes2["default"].bool,
+
+ /**
+ * Duration of the fade animation in milliseconds, to ensure that finishing
+ * callbacks are fired even if the original browser transition end events are
+ * canceled
+ */
+ timeout: _propTypes2["default"].number,
+
+ /**
+ * Callback fired before the component fades in
+ */
+ onEnter: _propTypes2["default"].func,
+ /**
+ * Callback fired after the component starts to fade in
+ */
+ onEntering: _propTypes2["default"].func,
+ /**
+ * Callback fired after the has component faded in
+ */
+ onEntered: _propTypes2["default"].func,
+ /**
+ * Callback fired before the component fades out
+ */
+ onExit: _propTypes2["default"].func,
+ /**
+ * Callback fired after the component starts to fade out
+ */
+ onExiting: _propTypes2["default"].func,
+ /**
+ * Callback fired after the component has faded out
+ */
+ onExited: _propTypes2["default"].func
+ };
+
+ var defaultProps = {
+ "in": false,
+ timeout: 300,
+ unmountOnExit: false,
+ transitionAppear: false
+ };
+
+ var Fade = function (_React$Component) {
+ _inherits(Fade, _React$Component);
+
+ function Fade() {
+ _classCallCheck(this, Fade);
+
+ return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+ }
+
+ Fade.prototype.render = function render() {
+ return _react2["default"].createElement(_Transition2["default"], _extends({}, this.props, {
+ className: (0, _classnames2["default"])(this.props.className, 'fade'),
+ enteredClassName: 'in',
+ enteringClassName: 'in'
+ }));
+ };
+
+ return Fade;
+ }(_react2["default"].Component);
+
+ Fade.propTypes = propTypes;
+ Fade.defaultProps = defaultProps;
+
+ exports["default"] = Fade;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 130 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+ exports.EXITING = exports.ENTERED = exports.ENTERING = exports.EXITED = exports.UNMOUNTED = undefined;
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _reactDom = __webpack_require__(2);
+
+ var _reactDom2 = _interopRequireDefault(_reactDom);
+
+ var _properties = __webpack_require__(13);
+
+ var _properties2 = _interopRequireDefault(_properties);
+
+ var _on = __webpack_require__(16);
+
+ var _on2 = _interopRequireDefault(_on);
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var transitionEndEvent = _properties2["default"].end;
+
+ //设置状态码
+ var UNMOUNTED = exports.UNMOUNTED = 0;
+ var EXITED = exports.EXITED = 1;
+ var ENTERING = exports.ENTERING = 2;
+ var ENTERED = exports.ENTERED = 3;
+ var EXITING = exports.EXITING = 4;
+
+ var propTypes = {
+ /**
+ * 是否触发动画
+ */
+ "in": _propTypes2["default"].bool,
+
+ /**
+ * 不显示的时候是否移除组件
+ */
+ unmountOnExit: _propTypes2["default"].bool,
+
+ /**
+ * 如果设置为默认显示,挂载时显示动画
+ */
+ transitionAppear: _propTypes2["default"].bool,
+
+ /**
+ * 设置超时时间,防止出现问题,可设置为>=动画时间
+ */
+ timeout: _propTypes2["default"].number,
+
+ /**
+ * 退出组件时添加的class
+ */
+ exitedClassName: _propTypes2["default"].string,
+ /**
+ * 退出组件中添加的class
+ */
+ exitingClassName: _propTypes2["default"].string,
+ /**
+ * 进入动画后添加的class
+ */
+ enteredClassName: _propTypes2["default"].string,
+ /**
+ * 进入动画时添加的class
+ */
+ enteringClassName: _propTypes2["default"].string,
+
+ /**
+ * 进入动画开始时的钩子函数
+ */
+ onEnter: _propTypes2["default"].func,
+ /**
+ * 进入动画中的钩子函数
+ */
+ onEntering: _propTypes2["default"].func,
+ /**
+ * 进入动画后的钩子函数
+ */
+ onEntered: _propTypes2["default"].func,
+ /**
+ * 退出动画开始时的钩子函数
+ */
+ onExit: _propTypes2["default"].func,
+ /**
+ * 退出动画中的钩子函数
+ */
+ onExiting: _propTypes2["default"].func,
+ /**
+ * 退出动画后的钩子函数
+ */
+ onExited: _propTypes2["default"].func
+ };
+
+ function noop() {}
+
+ var defaultProps = {
+ "in": false,
+ unmountOnExit: false,
+ transitionAppear: false,
+ timeout: 5000,
+ onEnter: noop,
+ onEntering: noop,
+ onEntered: noop,
+ onExit: noop,
+ onExiting: noop,
+ onExited: noop
+ };
+
+ /**
+ * 动画组件
+ */
+
+ var Transition = function (_Component) {
+ _inherits(Transition, _Component);
+
+ function Transition(props, context) {
+ _classCallCheck(this, Transition);
+
+ var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));
+
+ var initialStatus = void 0;
+ if (props["in"]) {
+ // 在componentdidmount时开始执行动画
+ initialStatus = props.transitionAppear ? EXITED : ENTERED;
+ } else {
+ initialStatus = props.unmountOnExit ? UNMOUNTED : EXITED;
+ }
+ _this.state = { status: initialStatus };
+
+ _this.nextCallback = null;
+
+ _this.performEnter = _this.performEnter.bind(_this);
+ _this.performExit = _this.performExit.bind(_this);
+ _this.cancelNextCallback = _this.cancelNextCallback.bind(_this);
+ _this.onTransitionEnd = _this.onTransitionEnd.bind(_this);
+ _this.safeSetState = _this.safeSetState.bind(_this);
+ _this.setNextCallback = _this.setNextCallback.bind(_this);
+
+ return _this;
+ }
+
+ Transition.prototype.componentDidMount = function componentDidMount() {
+ if (this.props.transitionAppear && this.props["in"]) {
+ this.performEnter(this.props);
+ }
+ };
+
+ Transition.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+ if (nextProps["in"] && this.props.unmountOnExit) {
+ if (this.state.status === UNMOUNTED) {
+ // 在componentDidUpdate执行动画.
+ this.setState({ status: EXITED });
+ }
+ } else {
+ this._needsUpdate = true;
+ }
+ };
+
+ Transition.prototype.componentDidUpdate = function componentDidUpdate() {
+ var status = this.state.status;
+
+ if (this.props.unmountOnExit && status === EXITED) {
+ // 当使用unmountOnExit时,exited为exiting和unmont的过渡状态
+ if (this.props["in"]) {
+ this.performEnter(this.props);
+ } else {
+ this.setState({ status: UNMOUNTED });
+ }
+
+ return;
+ }
+
+ // 确保只响应prop变化
+ if (this._needsUpdate) {
+ this._needsUpdate = false;
+
+ if (this.props["in"]) {
+ if (status === EXITING) {
+ this.performEnter(this.props);
+ } else if (status === EXITED) {
+ this.performEnter(this.props);
+ }
+ // 其他,当我们已经输入或输出
+ } else {
+ if (status === ENTERING || status === ENTERED) {
+ this.performExit(this.props);
+ }
+ // 我们已经输入或输出完成
+ }
+ }
+ };
+
+ Transition.prototype.componentWillUnmount = function componentWillUnmount() {
+ this.cancelNextCallback();
+ };
+
+ Transition.prototype.performEnter = function performEnter(props) {
+ var _this2 = this;
+
+ this.cancelNextCallback();
+ var node = _reactDom2["default"].findDOMNode(this);
+
+ // 这里接收新props
+ props.onEnter(node);
+
+ this.safeSetState({ status: ENTERING }, function () {
+ _this2.props.onEntering(node);
+
+ _this2.onTransitionEnd(node, function () {
+ _this2.safeSetState({ status: ENTERED }, function () {
+ _this2.props.onEntered(node);
+ });
+ });
+ });
+ };
+
+ Transition.prototype.performExit = function performExit(props) {
+ var _this3 = this;
+
+ this.cancelNextCallback();
+ var node = _reactDom2["default"].findDOMNode(this);
+
+ props.onExit(node);
+
+ this.safeSetState({ status: EXITING }, function () {
+ _this3.props.onExiting(node);
+
+ _this3.onTransitionEnd(node, function () {
+ _this3.safeSetState({ status: EXITED }, function () {
+ _this3.props.onExited(node);
+ });
+ });
+ });
+ };
+
+ Transition.prototype.cancelNextCallback = function cancelNextCallback() {
+ if (this.nextCallback !== null) {
+ this.nextCallback.cancel();
+ this.nextCallback = null;
+ }
+ };
+
+ Transition.prototype.safeSetState = function safeSetState(nextState, callback) {
+ // 确保在组件销毁后挂起的setState被消除
+ this.setState(nextState, this.setNextCallback(callback));
+ };
+
+ Transition.prototype.setNextCallback = function setNextCallback(callback) {
+ var _this4 = this;
+
+ var active = true;
+
+ this.nextCallback = function (event) {
+ if (active) {
+ active = false;
+ _this4.nextCallback = null;
+
+ callback(event);
+ }
+ };
+
+ this.nextCallback.cancel = function () {
+ active = false;
+ };
+
+ return this.nextCallback;
+ };
+
+ Transition.prototype.onTransitionEnd = function onTransitionEnd(node, handler) {
+ this.setNextCallback(handler);
+
+ if (node) {
+ (0, _on2["default"])(node, transitionEndEvent, this.nextCallback);
+ setTimeout(this.nextCallback, this.props.timeout);
+ } else {
+ setTimeout(this.nextCallback, 0);
+ }
+ };
+
+ Transition.prototype.render = function render() {
+ var status = this.state.status;
+ if (status === UNMOUNTED) {
+ return null;
+ }
+
+ var _props = this.props,
+ children = _props.children,
+ className = _props.className,
+ childProps = _objectWithoutProperties(_props, ['children', 'className']);
+
+ Object.keys(Transition.propTypes).forEach(function (key) {
+ return delete childProps[key];
+ });
+
+ var transitionClassName = void 0;
+ if (status === EXITED) {
+ transitionClassName = this.props.exitedClassName;
+ } else if (status === ENTERING) {
+ transitionClassName = this.props.enteringClassName;
+ } else if (status === ENTERED) {
+ transitionClassName = this.props.enteredClassName;
+ } else if (status === EXITING) {
+ transitionClassName = this.props.exitingClassName;
+ }
+
+ var child = _react2["default"].Children.only(children);
+ return _react2["default"].cloneElement(child, _extends({}, childProps, {
+ className: (0, _classnames2["default"])(child.props.className, className, transitionClassName)
+ }));
+ };
+
+ return Transition;
+ }(_react.Component);
+
+ Transition.propTypes = propTypes;
+
+ Transition.defaultProps = defaultProps;
+
+ exports["default"] = Transition;
+
+/***/ }),
+/* 131 */
+/***/ (function(module, exports) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+ /**
+ * Safe chained function
+ *
+ * Will only create a new function if needed,
+ * otherwise will pass back existing functions or null.
+ *
+ * @param {function} functions to chain
+ * @returns {function|null}
+ */
+ function createChainedFunction() {
+ for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) {
+ funcs[_key] = arguments[_key];
+ }
+
+ return funcs.filter(function (f) {
+ return f != null;
+ }).reduce(function (acc, f) {
+ if (typeof f !== 'function') {
+ throw new Error('Invalid Argument Type, must only provide functions, undefined, or null.');
+ }
+
+ if (acc === null) {
+ return f;
+ }
+
+ return function chainedFunction() {
+ for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ args[_key2] = arguments[_key2];
+ }
+
+ acc.apply(this, args);
+ f.apply(this, args);
+ };
+ }, null);
+ }
+
+ exports["default"] = createChainedFunction;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 132 */
+/***/ (function(module, exports) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ exports.getComponentLocale = getComponentLocale;
+ exports.getLocaleCode = getLocaleCode;
+ function getComponentLocale(props, context, componentName, getDefaultLocale) {
+ var locale = {};
+ if (context && context.beeLocale && context.beeLocale[componentName]) {
+ locale = context.beeLocale[componentName];
+ } else {
+ var defaultLocale = getDefaultLocale();
+
+ locale = defaultLocale["default"] || defaultLocale;
+ }
+
+ var result = _extends({}, locale, props.locale);
+ if (props.locale) {
+ result.lang = _extends({}, locale.lang, props.locale.lang);
+ } else {
+ result.lang = _extends({}, locale.lang);
+ }
+
+ return result;
+ }
+
+ function getLocaleCode(context) {
+ var localeCode = context.beeLocale && context.beeLocale.lang;
+ // Had use LocaleProvide but didn't set locale
+ if (context.beeLocale && context.beeLocale.exist && !localeCode) {
+ return 'zh-cn';
+ }
+ return localeCode;
+ }
+
+/***/ }),
+/* 133 */
+/***/ (function(module, exports) {
+
+ 'use strict';
+
+ module.exports = {
+ 'lang': 'zh-cn',
+ 'copy': '复制',
+ 'cut': '剪切',
+ 'copyReady': '已复制',
+ 'cutReady': '已剪切',
+ 'copyToClipboard': '复制到剪切板',
+ 'close': '关闭',
+
+ 'en-us': {
+ 'copy': 'copy',
+ 'cut': 'cut',
+ 'copyReady': 'copied',
+ 'cutReady': 'cut',
+ 'copyToClipboard': 'copy to clipboard',
+ 'close': 'close'
+ },
+ 'zh-tw': {
+ 'copy': '複製',
+ 'cut': '剪切',
+ 'copyReady': '已複製',
+ 'cutReady': '已剪切',
+ 'copyToClipboard': '複製到剪切板',
+ 'close': '關閉'
+ }
+ };
+
+/***/ }),
+/* 134 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _Modal = __webpack_require__(135);
+
+ var _Modal2 = _interopRequireDefault(_Modal);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ exports["default"] = _Modal2["default"];
+ module.exports = exports['default'];
+
+/***/ }),
+/* 135 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _events = __webpack_require__(136);
+
+ var _events2 = _interopRequireDefault(_events);
+
+ var _ownerDocument = __webpack_require__(75);
+
+ var _ownerDocument2 = _interopRequireDefault(_ownerDocument);
+
+ var _inDOM = __webpack_require__(15);
+
+ var _inDOM2 = _interopRequireDefault(_inDOM);
+
+ var _scrollbarSize = __webpack_require__(140);
+
+ var _scrollbarSize2 = _interopRequireDefault(_scrollbarSize);
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _reactDom = __webpack_require__(2);
+
+ var _reactDom2 = _interopRequireDefault(_reactDom);
+
+ var _Modal = __webpack_require__(141);
+
+ var _Modal2 = _interopRequireDefault(_Modal);
+
+ var _isOverflowing = __webpack_require__(144);
+
+ var _isOverflowing2 = _interopRequireDefault(_isOverflowing);
+
+ var _tinperBeeCore = __webpack_require__(27);
+
+ var _beeTransition = __webpack_require__(11);
+
+ var _ModalBody = __webpack_require__(148);
+
+ var _ModalBody2 = _interopRequireDefault(_ModalBody);
+
+ var _ModalDialog = __webpack_require__(149);
+
+ var _ModalDialog2 = _interopRequireDefault(_ModalDialog);
+
+ var _ModalFooter = __webpack_require__(150);
+
+ var _ModalFooter2 = _interopRequireDefault(_ModalFooter);
+
+ var _ModalHeader = __webpack_require__(151);
+
+ var _ModalHeader2 = _interopRequireDefault(_ModalHeader);
+
+ var _ModalTitle = __webpack_require__(152);
+
+ var _ModalTitle2 = _interopRequireDefault(_ModalTitle);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = _extends({}, _Modal2["default"].propTypes, _ModalDialog2["default"].propTypes, {
+
+ /**
+ * 是否弹出遮罩层/遮罩层点击是否触发关闭
+ */
+ backdrop: _propTypes2["default"].oneOf(['static', true, false]),
+
+ /**
+ * 点击遮罩层是否允许关闭
+ */
+ backdropClosable: _propTypes2["default"].bool,
+ /**
+ * esc触发关闭
+ */
+ keyboard: _propTypes2["default"].bool,
+
+ /**
+ * 显隐时是否使用动画
+ */
+ animation: _propTypes2["default"].bool,
+
+ /**
+ * 传递给模态框的样式
+ */
+ dialogComponentClass: _tinperBeeCore.elementType,
+
+ /**
+ * 自动设置焦点
+ */
+ autoFocus: _propTypes2["default"].bool,
+
+ /**
+ * 防止打开时焦点离开模态框
+ */
+ enforceFocus: _propTypes2["default"].bool,
+
+ /**
+ * 是否打开模态框
+ */
+ show: _propTypes2["default"].bool,
+
+ /**
+ * 关闭时的钩子函数
+ */
+ onHide: _propTypes2["default"].func,
+
+ onEnter: _propTypes2["default"].func,
+
+ onEntering: _propTypes2["default"].func,
+
+ onEntered: _propTypes2["default"].func,
+
+ onExit: _propTypes2["default"].func,
+
+ onExiting: _propTypes2["default"].func,
+
+ onExited: _propTypes2["default"].func,
+
+ /**
+ * 要添加到的元素
+ */
+ container: _Modal2["default"].propTypes.container,
+
+ /**
+ * 尺寸
+ */
+ size: _propTypes2["default"].oneOf(["sm", "lg", "xlg", ""]),
+ /**
+ * 自定义宽度
+ */
+ width: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string])
+ });
+
+ var defaultProps = _extends({}, _Modal2["default"].defaultProps, {
+ backdropClosable: true,
+ animation: true,
+ dialogComponentClass: _ModalDialog2["default"],
+ clsPrefix: 'u-modal'
+ });
+
+ var childContextTypes = {
+ $u_modal: _propTypes2["default"].shape({
+ onHide: _propTypes2["default"].func
+ })
+ };
+
+ var Modal = function (_React$Component) {
+ _inherits(Modal, _React$Component);
+
+ function Modal(props, context) {
+ _classCallCheck(this, Modal);
+
+ var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
+
+ _this.handleEntering = _this.handleEntering.bind(_this);
+ _this.handleExited = _this.handleExited.bind(_this);
+ _this.handleWindowResize = _this.handleWindowResize.bind(_this);
+ _this.handleDialogClick = _this.handleDialogClick.bind(_this);
+
+ _this.state = {
+ style: {}
+ };
+ return _this;
+ }
+
+ Modal.prototype.getChildContext = function getChildContext() {
+ return {
+ $u_modal: {
+ onHide: this.props.onHide
+ }
+ };
+ };
+
+ Modal.prototype.componentWillUnmount = function componentWillUnmount() {
+ // Clean up the listener if we need to.
+ this.handleExited();
+ };
+
+ Modal.prototype.handleEntering = function handleEntering() {
+ // FIXME: This should work even when animation is disabled.
+ _events2["default"].on(window, 'resize', this.handleWindowResize);
+ this.updateStyle();
+ };
+
+ Modal.prototype.handleExited = function handleExited() {
+ // FIXME: This should work even when animation is disabled.
+ _events2["default"].off(window, 'resize', this.handleWindowResize);
+ };
+
+ Modal.prototype.handleWindowResize = function handleWindowResize() {
+ this.updateStyle();
+ };
+
+ Modal.prototype.handleDialogClick = function handleDialogClick(e) {
+ if (e.target !== e.currentTarget) {
+ return;
+ }
+
+ this.props.onHide();
+ };
+
+ Modal.prototype.updateStyle = function updateStyle() {
+ if (!_inDOM2["default"] || !this._modal) {
+ return;
+ }
+
+ var dialogNode = this._modal.getDialogElement();
+ var dialogHeight = dialogNode.scrollHeight;
+
+ var document = (0, _ownerDocument2["default"])(dialogNode);
+ var bodyIsOverflowing = (0, _isOverflowing2["default"])(_reactDom2["default"].findDOMNode(this.props.container || document.body));
+ var modalIsOverflowing = dialogHeight > document.documentElement.clientHeight;
+
+ this.setState({
+ style: {
+ paddingRight: bodyIsOverflowing && !modalIsOverflowing ? (0, _scrollbarSize2["default"])() : undefined,
+ paddingLeft: !bodyIsOverflowing && modalIsOverflowing ? (0, _scrollbarSize2["default"])() : undefined
+ }
+ });
+ };
+
+ Modal.prototype.render = function render() {
+ var _this2 = this;
+
+ var _props = this.props,
+ backdrop = _props.backdrop,
+ backdropClosable = _props.backdropClosable,
+ animation = _props.animation,
+ show = _props.show,
+ Dialog = _props.dialogComponentClass,
+ className = _props.className,
+ clsPrefix = _props.clsPrefix,
+ _props$style = _props.style,
+ style = _props$style === undefined ? {} : _props$style,
+ size = _props.size,
+ width = _props.width,
+ children = _props.children,
+ onEntering = _props.onEntering,
+ onExited = _props.onExited,
+ props = _objectWithoutProperties(_props, ['backdrop', 'backdropClosable', 'animation', 'show', 'dialogComponentClass', 'className', 'clsPrefix', 'style', 'size', 'width', 'children', 'onEntering', 'onExited']);
+
+ var _splitComponent = (0, _tinperBeeCore.splitComponent)(props, _Modal2["default"]),
+ _splitComponent2 = _slicedToArray(_splitComponent, 2),
+ baseModalProps = _splitComponent2[0],
+ dialogProps = _splitComponent2[1];
+
+ var inClassName = show && !animation && 'in';
+
+ var backdropClasses = _defineProperty({}, clsPrefix + '-backdrop', true);
+ var containerClasses = _defineProperty({}, clsPrefix + '-open', true);
+ if (Number(width)) width += 'px';
+
+ var styleRes = _extends({}, this.state.style, style);
+ if (width) {
+ _extends(styleRes, { width: width });
+ }
+ return _react2["default"].createElement(
+ _Modal2["default"],
+ _extends({}, baseModalProps, {
+ ref: function ref(c) {
+ _this2._modal = c;
+ },
+ show: show,
+ onEntering: (0, _tinperBeeCore.createChainedFunction)(onEntering, this.handleEntering),
+ onExited: (0, _tinperBeeCore.createChainedFunction)(onExited, this.handleExited),
+ backdrop: backdrop,
+ backdropClassName: (0, _classnames2["default"])(backdropClasses, inClassName),
+ containerClassName: (0, _classnames2["default"])(containerClasses),
+ transition: animation ? _beeTransition.Fade : undefined,
+ dialogTransitionTimeout: Modal.TRANSITION_DURATION,
+ backdropTransitionTimeout: Modal.BACKDROP_TRANSITION_DURATION
+ }),
+ _react2["default"].createElement(
+ Dialog,
+ _extends({}, dialogProps, {
+ style: styleRes,
+ className: (0, _classnames2["default"])(className, inClassName),
+ onClick: backdrop === true && !!backdropClosable ? this.handleDialogClick : null,
+ size: size
+ }),
+ children
+ )
+ );
+ };
+
+ return Modal;
+ }(_react2["default"].Component);
+
+ Modal.propTypes = propTypes;
+ Modal.defaultProps = defaultProps;
+ Modal.childContextTypes = childContextTypes;
+
+ Modal.Body = _ModalBody2["default"];
+ Modal.Header = _ModalHeader2["default"];
+ Modal.Title = _ModalTitle2["default"];
+ Modal.Footer = _ModalFooter2["default"];
+
+ Modal.Dialog = _ModalDialog2["default"];
+
+ Modal.TRANSITION_DURATION = 200000;
+ Modal.BACKDROP_TRANSITION_DURATION = 10000;
+
+ exports["default"] = Modal;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 136 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = void 0;
+
+ var _on = _interopRequireDefault(__webpack_require__(16));
+
+ exports.on = _on.default;
+
+ var _off = _interopRequireDefault(__webpack_require__(77));
+
+ exports.off = _off.default;
+
+ var _filter = _interopRequireDefault(__webpack_require__(137));
+
+ exports.filter = _filter.default;
+
+ var _listen = _interopRequireDefault(__webpack_require__(139));
+
+ exports.listen = _listen.default;
+ var _default = {
+ on: _on.default,
+ off: _off.default,
+ filter: _filter.default,
+ listen: _listen.default
+ };
+ exports.default = _default;
+
+/***/ }),
+/* 137 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = filterEvents;
+
+ var _contains = _interopRequireDefault(__webpack_require__(111));
+
+ var _querySelectorAll = _interopRequireDefault(__webpack_require__(138));
+
+ function filterEvents(selector, handler) {
+ return function filterHandler(e) {
+ var top = e.currentTarget,
+ target = e.target,
+ matches = (0, _querySelectorAll.default)(top, selector);
+ if (matches.some(function (match) {
+ return (0, _contains.default)(match, target);
+ })) handler.call(this, e);
+ };
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 138 */
+/***/ (function(module, exports) {
+
+ "use strict";
+
+ exports.__esModule = true;
+ exports.default = qsa;
+ // Zepto.js
+ // (c) 2010-2015 Thomas Fuchs
+ // Zepto.js may be freely distributed under the MIT license.
+ var simpleSelectorRE = /^[\w-]*$/;
+ var toArray = Function.prototype.bind.call(Function.prototype.call, [].slice);
+
+ function qsa(element, selector) {
+ var maybeID = selector[0] === '#',
+ maybeClass = selector[0] === '.',
+ nameOnly = maybeID || maybeClass ? selector.slice(1) : selector,
+ isSimple = simpleSelectorRE.test(nameOnly),
+ found;
+
+ if (isSimple) {
+ if (maybeID) {
+ element = element.getElementById ? element : document;
+ return (found = element.getElementById(nameOnly)) ? [found] : [];
+ }
+
+ if (element.getElementsByClassName && maybeClass) return toArray(element.getElementsByClassName(nameOnly));
+ return toArray(element.getElementsByTagName(selector));
+ }
+
+ return toArray(element.querySelectorAll(selector));
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 139 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = void 0;
+
+ var _inDOM = _interopRequireDefault(__webpack_require__(15));
+
+ var _on = _interopRequireDefault(__webpack_require__(16));
+
+ var _off = _interopRequireDefault(__webpack_require__(77));
+
+ var listen = function listen() {};
+
+ if (_inDOM.default) {
+ listen = function listen(node, eventName, handler, capture) {
+ (0, _on.default)(node, eventName, handler, capture);
+ return function () {
+ (0, _off.default)(node, eventName, handler, capture);
+ };
+ };
+ }
+
+ var _default = listen;
+ exports.default = _default;
+ module.exports = exports["default"];
+
+/***/ }),
+/* 140 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = scrollbarSize;
+
+ var _inDOM = _interopRequireDefault(__webpack_require__(15));
+
+ var size;
+
+ function scrollbarSize(recalc) {
+ if (!size && size !== 0 || recalc) {
+ if (_inDOM.default) {
+ var scrollDiv = document.createElement('div');
+ scrollDiv.style.position = 'absolute';
+ scrollDiv.style.top = '-9999px';
+ scrollDiv.style.width = '50px';
+ scrollDiv.style.height = '50px';
+ scrollDiv.style.overflow = 'scroll';
+ document.body.appendChild(scrollDiv);
+ size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+ document.body.removeChild(scrollDiv);
+ }
+ }
+
+ return size;
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 141 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /*eslint-disable react/prop-types */
+
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _warning = __webpack_require__(32);
+
+ var _warning2 = _interopRequireDefault(_warning);
+
+ var _tinperBeeCore = __webpack_require__(27);
+
+ var _Portal = __webpack_require__(112);
+
+ var _Portal2 = _interopRequireDefault(_Portal);
+
+ var _ModalManager = __webpack_require__(142);
+
+ var _ModalManager2 = _interopRequireDefault(_ModalManager);
+
+ var _ownerDocument = __webpack_require__(74);
+
+ var _ownerDocument2 = _interopRequireDefault(_ownerDocument);
+
+ var _addEventListener = __webpack_require__(76);
+
+ var _addEventListener2 = _interopRequireDefault(_addEventListener);
+
+ var _addFocusListener = __webpack_require__(146);
+
+ var _addFocusListener2 = _interopRequireDefault(_addFocusListener);
+
+ var _inDOM = __webpack_require__(15);
+
+ var _inDOM2 = _interopRequireDefault(_inDOM);
+
+ var _activeElement = __webpack_require__(147);
+
+ var _activeElement2 = _interopRequireDefault(_activeElement);
+
+ var _contains = __webpack_require__(111);
+
+ var _contains2 = _interopRequireDefault(_contains);
+
+ var _getContainer = __webpack_require__(113);
+
+ var _getContainer2 = _interopRequireDefault(_getContainer);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var modalManager = new _ModalManager2["default"]();
+
+ /**
+ * 模态框
+ */
+
+ var propTypes = _extends({}, _Portal2["default"].propTypes, {
+
+ /**
+ * 是否显示
+ */
+ show: _propTypes2["default"].bool,
+
+ /**
+ * 容器
+ */
+ container: _propTypes2["default"].oneOfType([_tinperBeeCore.componentOrElement, _propTypes2["default"].func]),
+
+ /**
+ * 当模态框打开时的钩子函数
+ */
+ onShow: _propTypes2["default"].func,
+
+ /**
+ * 当show参数为false时触发的模态框关闭时的钩子函数
+ */
+ onHide: _propTypes2["default"].func,
+
+ /**
+ * 是否包含背景
+ */
+ backdrop: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].oneOf(['static'])]),
+
+ /**
+ *返回背景组件的函数
+ */
+ renderBackdrop: _propTypes2["default"].func,
+
+ /**
+ * 设置esc键特殊钩子函数
+ */
+ onEscapeKeyUp: _propTypes2["default"].func,
+
+ /**
+ * 当点击背景时触发的函数
+ */
+ onBackdropClick: _propTypes2["default"].func,
+
+ /**
+ * 背景的style
+ */
+ backdropStyle: _propTypes2["default"].object,
+
+ /**
+ * 背景的class
+ */
+ backdropClassName: _propTypes2["default"].string,
+
+ /**
+ *容器的class
+ */
+ containerClassName: _propTypes2["default"].string,
+
+ /**
+ * 按esc键是否关闭模态框
+ */
+ keyboard: _propTypes2["default"].bool,
+
+ /**
+ * 动画组件
+ */
+ transition: _tinperBeeCore.elementType,
+
+ /**
+ * 设置动画超时时间
+ */
+ dialogTransitionTimeout: _propTypes2["default"].number,
+
+ /**
+ * 设置背景动画超时时间
+ */
+ backdropTransitionTimeout: _propTypes2["default"].number,
+
+ /**
+ * 是否自动设置焦点
+ */
+ autoFocus: _propTypes2["default"].bool,
+
+ /**
+ * 防止焦点离开模态框
+ */
+ enforceFocus: _propTypes2["default"].bool,
+
+ /**
+ * 模态框进入时的钩子函数
+ */
+ onEnter: _propTypes2["default"].func,
+
+ /**
+ * 模态框开始进入时的钩子函数
+ */
+ onEntering: _propTypes2["default"].func,
+
+ /**
+ * 模态框进入后的钩子函数
+ */
+ onEntered: _propTypes2["default"].func,
+
+ /**
+ * 模态框退出时的钩子函数
+ */
+ onExit: _propTypes2["default"].func,
+
+ /**
+ * 模态框开始退出时的钩子函数
+ */
+ onExiting: _propTypes2["default"].func,
+
+ /**
+ * 模态框推出后的钩子函数
+ */
+ onExited: _propTypes2["default"].func,
+
+ /**
+ *管理model状态的实例
+ */
+ manager: _propTypes2["default"].object.isRequired
+ });
+
+ var defaultProps = {
+ show: false,
+ backdrop: true,
+ keyboard: true,
+ autoFocus: true,
+ enforceFocus: true,
+ onHide: function onHide() {},
+ manager: modalManager,
+ renderBackdrop: function renderBackdrop(props) {
+ return _react2["default"].createElement('div', props);
+ }
+ };
+
+ var BaseModal = function (_Component) {
+ _inherits(BaseModal, _Component);
+
+ function BaseModal(props, content) {
+ _classCallCheck(this, BaseModal);
+
+ var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+ _this.state = {
+ exited: !_this.props.show
+ };
+
+ _this.onShow = _this.onShow.bind(_this);
+ _this.onHide = _this.onHide.bind(_this);
+ _this.setMountNode = _this.setMountNode.bind(_this);
+ _this.handleHidden = _this.handleHidden.bind(_this);
+ _this.handleBackdropClick = _this.handleBackdropClick.bind(_this);
+ _this.handleDocumentKeyUp = _this.handleDocumentKeyUp.bind(_this);
+ _this.checkForFocus = _this.checkForFocus.bind(_this);
+ _this.focus = _this.focus.bind(_this);
+ _this.restoreLastFocus = _this.restoreLastFocus.bind(_this);
+ _this.enforceFocus = _this.enforceFocus.bind(_this);
+ _this.getDialogElement = _this.getDialogElement.bind(_this);
+ _this.isTopModal = _this.isTopModal.bind(_this);
+ _this.renderBackdrop = _this.renderBackdrop.bind(_this);
+ return _this;
+ }
+
+ BaseModal.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+ if (nextProps.show) {
+ this.setState({ exited: false });
+ } else if (!nextProps.transition) {
+ // Otherwise let handleHidden take care of marking exited.
+ this.setState({ exited: true });
+ }
+ };
+
+ BaseModal.prototype.componentWillUpdate = function componentWillUpdate(nextProps) {
+ if (!this.props.show && nextProps.show) {
+ this.checkForFocus();
+ }
+ };
+
+ BaseModal.prototype.componentDidMount = function componentDidMount() {
+ if (this.props.show) {
+ this.onShow();
+ }
+ this.mounted = true;
+ };
+
+ BaseModal.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
+ var transition = this.props.transition;
+
+
+ if (prevProps.show && !this.props.show && !transition) {
+ // Otherwise handleHidden will call this.
+ this.onHide();
+ } else if (!prevProps.show && this.props.show) {
+ this.onShow();
+ }
+ };
+
+ BaseModal.prototype.componentWillUnmount = function componentWillUnmount() {
+ var _props = this.props,
+ show = _props.show,
+ transition = _props.transition;
+
+
+ if (show || transition && !this.state.exited) {
+ this.onHide();
+ }
+
+ this.mounted = false;
+ };
+
+ BaseModal.prototype.onShow = function onShow() {
+ var doc = (0, _ownerDocument2["default"])(this);
+ var container = (0, _getContainer2["default"])(this.props.container, doc.body);
+
+ this.props.manager.add(this, container, this.props.containerClassName);
+
+ this._onDocumentKeyupListener = (0, _addEventListener2["default"])(doc, 'keyup', this.handleDocumentKeyUp);
+
+ this._onFocusinListener = (0, _addFocusListener2["default"])(this.enforceFocus);
+
+ this.focus();
+
+ if (this.props.onShow) {
+ this.props.onShow();
+ }
+ };
+
+ BaseModal.prototype.onHide = function onHide() {
+ this.props.manager.remove(this);
+
+ this._onDocumentKeyupListener.remove();
+
+ this._onFocusinListener.remove();
+
+ this.restoreLastFocus();
+ };
+
+ BaseModal.prototype.setMountNode = function setMountNode(ref) {
+ this.mountNode = ref ? ref.getMountNode() : ref;
+ };
+
+ BaseModal.prototype.handleHidden = function handleHidden() {
+ this.setState({ exited: true });
+ this.onHide();
+
+ if (this.props.onExited) {
+ var _props2;
+
+ (_props2 = this.props).onExited.apply(_props2, arguments);
+ }
+ };
+
+ BaseModal.prototype.handleBackdropClick = function handleBackdropClick(e) {
+ if (e.target !== e.currentTarget) {
+ return;
+ }
+
+ if (this.props.onBackdropClick) {
+ this.props.onBackdropClick(e);
+ }
+
+ if (this.props.backdrop === true) {
+ this.props.onHide();
+ }
+ };
+
+ BaseModal.prototype.handleDocumentKeyUp = function handleDocumentKeyUp(e) {
+ if (this.props.keyboard && e.keyCode === 27 && this.isTopModal()) {
+ if (this.props.onEscapeKeyUp) {
+ this.props.onEscapeKeyUp(e);
+ }
+ this.props.onHide();
+ }
+ };
+
+ BaseModal.prototype.checkForFocus = function checkForFocus() {
+ if (_inDOM2["default"]) {
+ this.lastFocus = (0, _activeElement2["default"])();
+ }
+ };
+
+ BaseModal.prototype.focus = function focus() {
+ var autoFocus = this.props.autoFocus;
+ var modalContent = this.getDialogElement();
+ var current = (0, _activeElement2["default"])((0, _ownerDocument2["default"])(this));
+ var focusInModal = current && (0, _contains2["default"])(modalContent, current);
+
+ if (modalContent && autoFocus && !focusInModal) {
+ this.lastFocus = current;
+
+ if (!modalContent.hasAttribute('tabIndex')) {
+ modalContent.setAttribute('tabIndex', -1);
+ (0, _warning2["default"])(false, 'The modal content node does not accept focus. ' + 'For the benefit of assistive technologies, the tabIndex of the node is being set to "-1".');
+ }
+
+ modalContent.focus();
+ }
+ };
+
+ BaseModal.prototype.restoreLastFocus = function restoreLastFocus() {
+ // Support: <=IE11 doesn't support `focus()` on svg elements (RB: #917)
+ if (this.lastFocus && this.lastFocus.focus) {
+ this.lastFocus.focus();
+ this.lastFocus = null;
+ }
+ };
+
+ BaseModal.prototype.enforceFocus = function enforceFocus() {
+ var enforceFocus = this.props.enforceFocus;
+
+
+ if (!enforceFocus || !this.mounted || !this.isTopModal()) {
+ return;
+ }
+
+ var active = (0, _activeElement2["default"])((0, _ownerDocument2["default"])(this));
+ var modal = this.getDialogElement();
+
+ if (modal && modal !== active && !(0, _contains2["default"])(modal, active)) {
+ modal.focus();
+ }
+ };
+
+ //instead of a ref, which might conflict with one the parent applied.
+
+
+ BaseModal.prototype.getDialogElement = function getDialogElement() {
+ var node = this.refs.modal;
+ return node && node.lastChild;
+ };
+
+ BaseModal.prototype.isTopModal = function isTopModal() {
+ return this.props.manager.isTopModal(this);
+ };
+
+ BaseModal.prototype.renderBackdrop = function renderBackdrop() {
+ var _this2 = this;
+
+ var _props3 = this.props,
+ backdropStyle = _props3.backdropStyle,
+ backdropClassName = _props3.backdropClassName,
+ renderBackdrop = _props3.renderBackdrop,
+ Transition = _props3.transition,
+ backdropTransitionTimeout = _props3.backdropTransitionTimeout;
+
+
+ var backdropRef = function backdropRef(ref) {
+ return _this2.backdrop = ref;
+ };
+
+ var backdrop = _react2["default"].createElement('div', {
+ ref: backdropRef,
+ style: this.props.backdropStyle,
+ className: this.props.backdropClassName,
+ onClick: this.handleBackdropClick
+ });
+
+ if (Transition) {
+ backdrop = _react2["default"].createElement(
+ Transition,
+ { transitionAppear: true,
+ 'in': this.props.show,
+ timeout: backdropTransitionTimeout
+ },
+ renderBackdrop({
+ ref: backdropRef,
+ style: backdropStyle,
+ className: backdropClassName,
+ onClick: this.handleBackdropClick
+ })
+ );
+ }
+
+ return backdrop;
+ };
+
+ BaseModal.prototype.render = function render() {
+ var _props4 = this.props,
+ show = _props4.show,
+ container = _props4.container,
+ children = _props4.children,
+ Transition = _props4.transition,
+ backdrop = _props4.backdrop,
+ dialogTransitionTimeout = _props4.dialogTransitionTimeout,
+ className = _props4.className,
+ style = _props4.style,
+ onExit = _props4.onExit,
+ onExiting = _props4.onExiting,
+ onEnter = _props4.onEnter,
+ onEntering = _props4.onEntering,
+ onEntered = _props4.onEntered;
+
+
+ var dialog = _react2["default"].Children.only(children);
+
+ var mountModal = show || Transition && !this.state.exited;
+ if (!mountModal) {
+ return null;
+ }
+
+ var _dialog$props = dialog.props,
+ role = _dialog$props.role,
+ tabIndex = _dialog$props.tabIndex;
+
+
+ if (role === undefined || tabIndex === undefined) {
+ dialog = (0, _react.cloneElement)(dialog, {
+ role: role === undefined ? 'document' : role,
+ tabIndex: tabIndex == null ? '-1' : tabIndex
+ });
+ }
+
+ if (Transition) {
+ dialog = _react2["default"].createElement(
+ Transition,
+ {
+ transitionAppear: true,
+ unmountOnExit: true,
+ 'in': show,
+ timeout: dialogTransitionTimeout,
+ onExit: onExit,
+ onExiting: onExiting,
+ onExited: this.handleHidden,
+ onEnter: onEnter,
+ onEntering: onEntering,
+ onEntered: onEntered
+ },
+ dialog
+ );
+ }
+
+ return _react2["default"].createElement(
+ _Portal2["default"],
+ {
+ ref: this.setMountNode,
+ container: container
+ },
+ _react2["default"].createElement(
+ 'div',
+ {
+ ref: 'modal',
+ role: role || 'dialog',
+ style: style,
+ className: className
+ },
+ backdrop && this.renderBackdrop(),
+ dialog
+ )
+ );
+ };
+
+ return BaseModal;
+ }(_react.Component);
+
+ ;
+
+ BaseModal.Manager = _ModalManager2["default"];
+
+ BaseModal.propTypes = propTypes;
+ BaseModal.defaultProps = defaultProps;
+
+ exports["default"] = BaseModal;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 142 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _style = __webpack_require__(18);
+
+ var _style2 = _interopRequireDefault(_style);
+
+ var _class = __webpack_require__(143);
+
+ var _class2 = _interopRequireDefault(_class);
+
+ var _scrollbarSize = __webpack_require__(140);
+
+ var _scrollbarSize2 = _interopRequireDefault(_scrollbarSize);
+
+ var _isOverflowing = __webpack_require__(144);
+
+ var _isOverflowing2 = _interopRequireDefault(_isOverflowing);
+
+ var _manageAriaHidden = __webpack_require__(145);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function findIndexOf(arr, cb) {
+ var idx = -1;
+ arr.some(function (d, i) {
+ if (cb(d, i)) {
+ idx = i;
+ return true;
+ }
+ });
+ return idx;
+ }
+
+ //查找容器
+ function findContainer(data, modal) {
+ return findIndexOf(data, function (d) {
+ return d.modals.indexOf(modal) !== -1;
+ });
+ }
+
+ //设置容器style
+ function setContainerStyle(state, container) {
+ var style = { overflow: 'hidden' };
+
+ state.style = {
+ overflow: container.style.overflow,
+ paddingRight: container.style.paddingRight
+ };
+
+ if (state.overflowing) {
+ //设置内边距,和添加滚动条宽度
+ style.paddingRight = parseInt((0, _style2["default"])(container, 'paddingRight') || 0, 10) + (0, _scrollbarSize2["default"])() + 'px';
+ }
+
+ (0, _style2["default"])(container, style);
+ }
+ //移除容器style
+ function removeContainerStyle(_ref, container) {
+ var style = _ref.style;
+
+
+ Object.keys(style).forEach(function (key) {
+ return container.style[key] = style[key];
+ });
+ }
+ /**
+ * 容器的正确状态管理和那些容器中的模态。
+ */
+
+ var ModalManager = function () {
+ function ModalManager() {
+ var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+ _ref2$hideSiblingNode = _ref2.hideSiblingNodes,
+ hideSiblingNodes = _ref2$hideSiblingNode === undefined ? true : _ref2$hideSiblingNode,
+ _ref2$handleContainer = _ref2.handleContainerOverflow,
+ handleContainerOverflow = _ref2$handleContainer === undefined ? true : _ref2$handleContainer;
+
+ _classCallCheck(this, ModalManager);
+
+ this.hideSiblingNodes = hideSiblingNodes;
+ this.handleContainerOverflow = handleContainerOverflow;
+ this.modals = [];
+ this.containers = [];
+ this.data = [];
+ }
+
+ ModalManager.prototype.add = function add(modal, container, className) {
+ var modalIdx = this.modals.indexOf(modal);
+ var containerIdx = this.containers.indexOf(container);
+
+ if (modalIdx !== -1) {
+ return modalIdx;
+ }
+
+ modalIdx = this.modals.length;
+ this.modals.push(modal);
+
+ if (this.hideSiblingNodes) {
+ (0, _manageAriaHidden.hideSiblings)(container, modal.mountNode);
+ }
+
+ if (containerIdx !== -1) {
+ this.data[containerIdx].modals.push(modal);
+ return modalIdx;
+ }
+
+ var data = {
+ modals: [modal],
+ //right now only the first modal of a container will have its classes applied
+ classes: className ? className.split(/\s+/) : [],
+
+ overflowing: (0, _isOverflowing2["default"])(container)
+ };
+
+ if (this.handleContainerOverflow) {
+ setContainerStyle(data, container);
+ }
+
+ data.classes.forEach(_class2["default"].addClass.bind(null, container));
+
+ this.containers.push(container);
+ this.data.push(data);
+
+ return modalIdx;
+ };
+
+ ModalManager.prototype.remove = function remove(modal) {
+ var modalIdx = this.modals.indexOf(modal);
+
+ if (modalIdx === -1) {
+ return;
+ }
+
+ var containerIdx = findContainer(this.data, modal);
+ var data = this.data[containerIdx];
+ var container = this.containers[containerIdx];
+
+ data.modals.splice(data.modals.indexOf(modal), 1);
+
+ this.modals.splice(modalIdx, 1);
+
+ // if that was the last modal in a container,
+ // clean up the container
+ if (data.modals.length === 0) {
+ data.classes.forEach(_class2["default"].removeClass.bind(null, container));
+
+ if (this.handleContainerOverflow) {
+ removeContainerStyle(data, container);
+ }
+
+ if (this.hideSiblingNodes) {
+ (0, _manageAriaHidden.showSiblings)(container, modal.mountNode);
+ }
+ this.containers.splice(containerIdx, 1);
+ this.data.splice(containerIdx, 1);
+ } else if (this.hideSiblingNodes) {
+ //otherwise make sure the next top modal is visible to a SR
+ (0, _manageAriaHidden.ariaHidden)(false, data.modals[data.modals.length - 1].mountNode);
+ }
+ };
+
+ ModalManager.prototype.isTopModal = function isTopModal(modal) {
+ return !!this.modals.length && this.modals[this.modals.length - 1] === modal;
+ };
+
+ return ModalManager;
+ }();
+
+ exports["default"] = ModalManager;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 143 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = void 0;
+
+ var _addClass = _interopRequireDefault(__webpack_require__(87));
+
+ exports.addClass = _addClass.default;
+
+ var _removeClass = _interopRequireDefault(__webpack_require__(89));
+
+ exports.removeClass = _removeClass.default;
+
+ var _hasClass = _interopRequireDefault(__webpack_require__(88));
+
+ exports.hasClass = _hasClass.default;
+ var _default = {
+ addClass: _addClass.default,
+ removeClass: _removeClass.default,
+ hasClass: _hasClass.default
+ };
+ exports.default = _default;
+
+/***/ }),
+/* 144 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+ exports["default"] = isOverflowing;
+
+ var _isWindow = __webpack_require__(120);
+
+ var _isWindow2 = _interopRequireDefault(_isWindow);
+
+ var _ownerDocument = __webpack_require__(75);
+
+ var _ownerDocument2 = _interopRequireDefault(_ownerDocument);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function isBody(node) {
+ return node && node.tagName.toLowerCase() === 'body';
+ }
+
+ function bodyIsOverflowing(node) {
+ var doc = (0, _ownerDocument2["default"])(node);
+ var win = (0, _isWindow2["default"])(doc);
+ var fullWidth = win.innerWidth;
+
+ // Support: ie8, no innerWidth
+ if (!fullWidth) {
+ var documentElementRect = doc.documentElement.getBoundingClientRect();
+ fullWidth = documentElementRect.right - Math.abs(documentElementRect.left);
+ }
+
+ return doc.body.clientWidth < fullWidth;
+ }
+
+ function isOverflowing(container) {
+ var win = (0, _isWindow2["default"])(container);
+
+ return win || isBody(container) ? bodyIsOverflowing(container) : container.scrollHeight > container.clientHeight;
+ }
+ module.exports = exports['default'];
+
+/***/ }),
+/* 145 */
+/***/ (function(module, exports) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+ exports.ariaHidden = ariaHidden;
+ exports.hideSiblings = hideSiblings;
+ exports.showSiblings = showSiblings;
+
+ var BLACKLIST = ['template', 'script', 'style'];
+
+ var isHidable = function isHidable(_ref) {
+ var nodeType = _ref.nodeType,
+ tagName = _ref.tagName;
+ return nodeType === 1 && BLACKLIST.indexOf(tagName.toLowerCase()) === -1;
+ };
+
+ var siblings = function siblings(container, mount, cb) {
+ mount = [].concat(mount);
+
+ [].forEach.call(container.children, function (node) {
+ if (mount.indexOf(node) === -1 && isHidable(node)) {
+ cb(node);
+ }
+ });
+ };
+
+ function ariaHidden(show, node) {
+ if (!node) {
+ return;
+ }
+ if (show) {
+ node.setAttribute('aria-hidden', 'true');
+ } else {
+ node.removeAttribute('aria-hidden');
+ }
+ }
+
+ function hideSiblings(container, mountNode) {
+ siblings(container, mountNode, function (node) {
+ return ariaHidden(true, node);
+ });
+ }
+
+ function showSiblings(container, mountNode) {
+ siblings(container, mountNode, function (node) {
+ return ariaHidden(false, node);
+ });
+ }
+
+/***/ }),
+/* 146 */
+/***/ (function(module, exports) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+ exports["default"] = addFocusListener;
+ /**
+ * Firefox doesn't have a focusin event so using capture is easiest way to get bubbling
+ * IE8 can't do addEventListener, but does have onfocusin, so we use that in ie8
+ *
+ * We only allow one Listener at a time to avoid stack overflows
+ */
+ function addFocusListener(handler) {
+ var useFocusin = !document.addEventListener;
+ var remove = void 0;
+
+ if (useFocusin) {
+ document.attachEvent('onfocusin', handler);
+ remove = function remove() {
+ return document.detachEvent('onfocusin', handler);
+ };
+ } else {
+ document.addEventListener('focus', handler, true);
+ remove = function remove() {
+ return document.removeEventListener('focus', handler, true);
+ };
+ }
+
+ return { remove: remove };
+ }
+ module.exports = exports['default'];
+
+/***/ }),
+/* 147 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _interopRequireDefault = __webpack_require__(14);
+
+ exports.__esModule = true;
+ exports.default = activeElement;
+
+ var _ownerDocument = _interopRequireDefault(__webpack_require__(75));
+
+ function activeElement(doc) {
+ if (doc === void 0) {
+ doc = (0, _ownerDocument.default)();
+ }
+
+ try {
+ return doc.activeElement;
+ } catch (e) {
+ /* ie throws if no active element */
+ }
+ }
+
+ module.exports = exports["default"];
+
+/***/ }),
+/* 148 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _tinperBeeCore = __webpack_require__(27);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = {
+ componentClass: _tinperBeeCore.elementType
+ };
+
+ var defaultProps = {
+ componentClass: 'div',
+ clsPrefix: 'u-modal-body'
+ };
+
+ var ModalBody = function (_React$Component) {
+ _inherits(ModalBody, _React$Component);
+
+ function ModalBody() {
+ _classCallCheck(this, ModalBody);
+
+ return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+ }
+
+ ModalBody.prototype.render = function render() {
+ var _props = this.props,
+ Component = _props.componentClass,
+ clsPrefix = _props.clsPrefix,
+ className = _props.className,
+ props = _objectWithoutProperties(_props, ['componentClass', 'clsPrefix', 'className']);
+
+ var classes = {};
+ classes['' + clsPrefix] = true;
+
+ return _react2["default"].createElement(Component, _extends({}, props, {
+ className: (0, _classnames2["default"])(className, classes)
+ }));
+ };
+
+ return ModalBody;
+ }(_react2["default"].Component);
+
+ ModalBody.propTypes = propTypes;
+ ModalBody.defaultProps = defaultProps;
+
+ exports["default"] = ModalBody;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 149 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = {
+ /**
+ * 传给dialog的classname
+ */
+ dialogClassName: _propTypes2["default"].string,
+ contentStyle: _propTypes2["default"].object
+
+ };
+
+ var defaultProps = {
+ clsPrefix: 'u-modal'
+ };
+
+ var ModalDialog = function (_React$Component) {
+ _inherits(ModalDialog, _React$Component);
+
+ function ModalDialog() {
+ _classCallCheck(this, ModalDialog);
+
+ return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+ }
+
+ ModalDialog.prototype.render = function render() {
+ var _dialogClasses;
+
+ var _props = this.props,
+ dialogClassName = _props.dialogClassName,
+ className = _props.className,
+ clsPrefix = _props.clsPrefix,
+ size = _props.size,
+ style = _props.style,
+ contentStyle = _props.contentStyle,
+ children = _props.children,
+ props = _objectWithoutProperties(_props, ['dialogClassName', 'className', 'clsPrefix', 'size', 'style', 'contentStyle', 'children']);
+ // const [bsProps, elementProps] = splitBsProps(props);
+ //
+
+
+ var uClassName = _defineProperty({}, '' + clsPrefix, true);
+
+ var modalStyle = { display: 'block' };
+
+ var dialogClasses = (_dialogClasses = {}, _defineProperty(_dialogClasses, uClassName, false), _defineProperty(_dialogClasses, clsPrefix + '-dialog', true), _dialogClasses);
+ if (size) {
+ dialogClasses[clsPrefix + '-' + size] = true;
+ }
+
+ return _react2["default"].createElement(
+ 'div',
+ _extends({}, props, {
+ tabIndex: '-1',
+ role: 'dialog',
+ style: modalStyle,
+ className: (0, _classnames2["default"])(className, uClassName)
+ }),
+ _react2["default"].createElement(
+ 'div',
+ { className: (0, _classnames2["default"])(dialogClassName, dialogClasses), style: style },
+ _react2["default"].createElement(
+ 'div',
+ { style: contentStyle, className: (0, _classnames2["default"])([clsPrefix + '-content']), role: 'document' },
+ children
+ )
+ )
+ );
+ };
+
+ return ModalDialog;
+ }(_react2["default"].Component);
+
+ ModalDialog.propTypes = propTypes;
+ ModalDialog.defaultProps = defaultProps;
+
+ exports["default"] = ModalDialog;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 150 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _tinperBeeCore = __webpack_require__(27);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = {
+ componentClass: _tinperBeeCore.elementType
+ };
+
+ var defaultProps = {
+ componentClass: 'div',
+ clsPrefix: 'u-modal-footer'
+ };
+
+ var ModalFooter = function (_React$Component) {
+ _inherits(ModalFooter, _React$Component);
+
+ function ModalFooter() {
+ _classCallCheck(this, ModalFooter);
+
+ return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+ }
+
+ ModalFooter.prototype.render = function render() {
+ var _props = this.props,
+ Component = _props.componentClass,
+ clsPrefix = _props.clsPrefix,
+ className = _props.className,
+ props = _objectWithoutProperties(_props, ['componentClass', 'clsPrefix', 'className']);
+
+ var classes = {};
+ classes['' + clsPrefix] = true;
+
+ return _react2["default"].createElement(Component, _extends({}, props, {
+ className: (0, _classnames2["default"])(className, classes)
+ }));
+ };
+
+ return ModalFooter;
+ }(_react2["default"].Component);
+
+ ModalFooter.propTypes = propTypes;
+ ModalFooter.defaultProps = defaultProps;
+
+ exports["default"] = ModalFooter;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 151 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _tinperBeeCore = __webpack_require__(27);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = {
+
+ /**
+ * 是否显示关闭按钮
+ */
+ closeButton: _propTypes2["default"].bool,
+
+ /**
+ * 关闭时的钩子函数
+ */
+ onHide: _propTypes2["default"].func
+ };
+
+ var defaultProps = {
+ 'aria-label': 'Close',
+ closeButton: false,
+ clsPrefix: 'u-modal-header'
+ };
+
+ var contextTypes = {
+ $u_modal: _propTypes2["default"].shape({
+ onHide: _propTypes2["default"].func
+ })
+ };
+
+ var ModalHeader = function (_React$Component) {
+ _inherits(ModalHeader, _React$Component);
+
+ function ModalHeader() {
+ _classCallCheck(this, ModalHeader);
+
+ return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+ }
+
+ ModalHeader.prototype.render = function render() {
+ var _props = this.props,
+ label = _props['aria-label'],
+ closeButton = _props.closeButton,
+ onHide = _props.onHide,
+ className = _props.className,
+ clsPrefix = _props.clsPrefix,
+ children = _props.children,
+ props = _objectWithoutProperties(_props, ['aria-label', 'closeButton', 'onHide', 'className', 'clsPrefix', 'children']);
+
+ var modal = this.context.$u_modal;
+
+ var classes = {};
+ classes['' + clsPrefix] = true;
+
+ return _react2["default"].createElement(
+ 'div',
+ _extends({}, props, {
+ className: (0, _classnames2["default"])(className, classes)
+ }),
+ closeButton && _react2["default"].createElement(
+ 'button',
+ {
+ type: 'button',
+ className: 'u-close',
+ 'aria-label': label,
+ onClick: (0, _tinperBeeCore.createChainedFunction)(modal.onHide, onHide)
+ },
+ _react2["default"].createElement(
+ 'span',
+ { 'aria-hidden': 'true' },
+ _react2["default"].createElement('i', { className: 'uf uf-close' })
+ )
+ ),
+ children
+ );
+ };
+
+ return ModalHeader;
+ }(_react2["default"].Component);
+
+ ModalHeader.propTypes = propTypes;
+ ModalHeader.defaultProps = defaultProps;
+ ModalHeader.contextTypes = contextTypes;
+
+ exports["default"] = ModalHeader;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 152 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _tinperBeeCore = __webpack_require__(27);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = {
+ componentClass: _tinperBeeCore.elementType
+ };
+
+ var defaultProps = {
+ componentClass: 'h4',
+ clsPrefix: 'u-modal-title'
+ };
+
+ var ModalTitle = function (_React$Component) {
+ _inherits(ModalTitle, _React$Component);
+
+ function ModalTitle() {
+ _classCallCheck(this, ModalTitle);
+
+ return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+ }
+
+ ModalTitle.prototype.render = function render() {
+ var _props = this.props,
+ Component = _props.componentClass,
+ className = _props.className,
+ clsPrefix = _props.clsPrefix,
+ props = _objectWithoutProperties(_props, ['componentClass', 'className', 'clsPrefix']);
+
+ var classes = {};
+ classes['' + clsPrefix] = true;
+
+ return _react2["default"].createElement(Component, _extends({}, props, {
+ className: (0, _classnames2["default"])(className, classes)
+ }));
+ };
+
+ return ModalTitle;
+ }(_react2["default"].Component);
+
+ ModalTitle.propTypes = propTypes;
+ ModalTitle.defaultProps = defaultProps;
+
+ exports["default"] = ModalTitle;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 153 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _FormControl = __webpack_require__(154);
+
+ var _FormControl2 = _interopRequireDefault(_FormControl);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ exports["default"] = _FormControl2["default"];
+ module.exports = exports['default'];
+
+/***/ }),
+/* 154 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _beeIcon = __webpack_require__(106);
+
+ var _beeIcon2 = _interopRequireDefault(_beeIcon);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = {
+ componentClass: _propTypes2["default"].oneOfType([_propTypes2["default"].element, _propTypes2["default"].string]),
+ type: _propTypes2["default"].string,
+ size: _propTypes2["default"].oneOf(['sm', 'md', 'lg']),
+ onSearch: _propTypes2["default"].func,
+ onChange: _propTypes2["default"].func,
+ onBlur: _propTypes2["default"].func,
+ showClose: _propTypes2["default"].bool,
+ focusSelect: _propTypes2["default"].bool
+ };
+
+ var defaultProps = {
+ componentClass: 'input',
+ clsPrefix: 'u-form-control',
+ type: 'text',
+ size: 'md'
+ };
+
+ var FormControl = function (_React$Component) {
+ _inherits(FormControl, _React$Component);
+
+ function FormControl(props) {
+ _classCallCheck(this, FormControl);
+
+ var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+
+ _this.handleSearchChange = function (e) {
+ var onChange = _this.props.onChange;
+
+ var value = _this.input.value;
+ _this.setState({
+ value: value,
+ showSearch: value == null || value === ""
+ });
+ if (onChange) {
+ onChange(value, e);
+ }
+ };
+
+ _this.handleChange = function (e) {
+ var onChange = _this.props.onChange;
+
+ var value = _this.input.value;
+ _this.setState({
+ showClose: true
+ });
+ if (onChange) {
+ onChange(value, e);
+ }
+ };
+
+ _this.clearValue = function () {
+ var onChange = _this.props.onChange;
+
+ _this.setState({
+ showSearch: true,
+ value: "",
+ showClose: false
+ });
+ if (onChange) {
+ onChange("");
+ }
+ _this.input.focus();
+ };
+
+ _this.handleKeyDown = function (e) {
+ var _this$props = _this.props,
+ onSearch = _this$props.onSearch,
+ type = _this$props.type;
+
+ if (e.keyCode === 13 && type === "search") {
+ if (onSearch) {
+ onSearch(_this.input.value);
+ }
+ }
+ };
+
+ _this.handleSearch = function (e) {
+ var onSearch = _this.props.onSearch;
+
+ if (onSearch) onSearch(_this.input.value);
+ };
+
+ _this.handleBlur = function (e) {
+ var value = _this.state.value;
+ var onBlur = _this.props.onBlur;
+
+
+ if (onBlur) {
+ onBlur(value, e);
+ }
+ };
+
+ _this.handleFocus = function (e) {
+ var value = _this.state.value;
+ var onFocus = _this.props.onFocus;
+
+ if (_this.props.focusSelect) {
+ _this.input.select();
+ }
+ if (onFocus) {
+ onFocus(value, e);
+ }
+ };
+
+ _this.renderInput = function () {
+ var _this$props2 = _this.props,
+ Component = _this$props2.componentClass,
+ type = _this$props2.type,
+ className = _this$props2.className,
+ size = _this$props2.size,
+ clsPrefix = _this$props2.clsPrefix,
+ value = _this$props2.value,
+ onChange = _this$props2.onChange,
+ onSearch = _this$props2.onSearch,
+ onBlur = _this$props2.onBlur,
+ showClose = _this$props2.showClose,
+ focusSelect = _this$props2.focusSelect,
+ others = _objectWithoutProperties(_this$props2, ['componentClass', 'type', 'className', 'size', 'clsPrefix', 'value', 'onChange', 'onSearch', 'onBlur', 'showClose', 'focusSelect']);
+ // input[type="file"] 不应该有类名 .form-control.
+
+
+ var classes = {};
+ if (size) {
+ classes['' + size] = true;
+ }
+
+ var classNames = void 0;
+ if (type !== 'file') {
+ classNames = (0, _classnames2["default"])(clsPrefix, classes);
+ }
+
+ return showClose ? _react2["default"].createElement(
+ 'div',
+ { className: (0, _classnames2["default"])(clsPrefix + '-close', clsPrefix + '-affix-wrapper', className) },
+ _react2["default"].createElement(Component, _extends({}, others, {
+ type: type,
+ ref: function ref(el) {
+ return _this.input = el;
+ },
+ value: value,
+ onChange: _this.handleChange,
+ onBlur: _this.handleBlur,
+ onFocus: _this.handleFocus,
+ className: (0, _classnames2["default"])(className, classNames)
+ })),
+ _react2["default"].createElement(
+ 'div',
+ { className: clsPrefix + '-suffix' },
+ _this.state.showClose ? _react2["default"].createElement(_beeIcon2["default"], { onClick: _this.clearValue, type: 'uf-close-c' }) : ''
+ )
+ ) : _react2["default"].createElement(Component, _extends({}, others, {
+ type: type,
+ ref: function ref(el) {
+ return _this.input = el;
+ },
+ value: value,
+ onChange: _this.handleChange,
+ onBlur: _this.handleBlur,
+ onFocus: _this.handleFocus,
+ className: (0, _classnames2["default"])(className, classNames)
+ }));
+ };
+
+ _this.renderSearch = function () {
+ var _this$props3 = _this.props,
+ Component = _this$props3.componentClass,
+ type = _this$props3.type,
+ className = _this$props3.className,
+ size = _this$props3.size,
+ clsPrefix = _this$props3.clsPrefix,
+ value = _this$props3.value,
+ onChange = _this$props3.onChange,
+ onSearch = _this$props3.onSearch,
+ onBlur = _this$props3.onBlur,
+ others = _objectWithoutProperties(_this$props3, ['componentClass', 'type', 'className', 'size', 'clsPrefix', 'value', 'onChange', 'onSearch', 'onBlur']);
+ // input[type="file"] 不应该有类名 .form-control.
+
+
+ var classes = {};
+ if (size) {
+ classes['' + size] = true;
+ }
+ classes[clsPrefix + '-search'] = true;
+
+ if (type === "search") {
+ return _react2["default"].createElement(
+ 'div',
+ { className: (0, _classnames2["default"])(clsPrefix + '-search', clsPrefix + '-affix-wrapper', className) },
+ _react2["default"].createElement(Component, _extends({}, others, {
+ type: type,
+ ref: function ref(el) {
+ return _this.input = el;
+ },
+ onChange: _this.handleSearchChange,
+ value: value,
+ onKeyDown: _this.handleKeyDown,
+ onBlur: _this.handleBlur,
+ onFocus: _this.handleFocus,
+ className: (0, _classnames2["default"])(className, clsPrefix, classes)
+ })),
+ _react2["default"].createElement(
+ 'div',
+ { className: clsPrefix + '-suffix' },
+ _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-search', onClick: _this.handleSearch })
+ )
+ );
+ }
+ };
+
+ _this.state = {
+ showSearch: !props.value,
+ value: props.value == null ? "" : props.value,
+ showClose: false
+ };
+ _this.input = {};
+ return _this;
+ }
+
+ FormControl.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProp) {
+ if (nextProp.value !== this.state.value) {
+ this.setState({ value: nextProp.value });
+ }
+ };
+
+ FormControl.prototype.render = function render() {
+
+ if (this.props.type === "search") {
+ return this.renderSearch();
+ }
+
+ return this.renderInput();
+ };
+
+ return FormControl;
+ }(_react2["default"].Component);
+
+ FormControl.propTypes = propTypes;
+ FormControl.defaultProps = defaultProps;
+
+ exports["default"] = FormControl;
+ module.exports = exports['default'];
+
+/***/ }),
+/* 155 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _Button = __webpack_require__(156);
+
+ var _Button2 = _interopRequireDefault(_Button);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ exports["default"] = _Button2["default"];
+ module.exports = exports['default'];
+
+/***/ }),
+/* 156 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+ var _react = __webpack_require__(1);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ var _reactDom = __webpack_require__(2);
+
+ var _reactDom2 = _interopRequireDefault(_reactDom);
+
+ var _propTypes = __webpack_require__(6);
+
+ var _propTypes2 = _interopRequireDefault(_propTypes);
+
+ var _classnames = __webpack_require__(5);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+ var propTypes = {
+ /**
+ * @title 尺寸
+ */
+ size: _propTypes2["default"].oneOf(['sm', 'md', 'xg', 'lg']),
+ /**
+ * @title 样式
+ */
+ style: _propTypes2["default"].object,
+ /**
+ * @title 形状
+ */
+ shape: _propTypes2["default"].oneOf(['block', 'round', 'border', 'squared', 'floating', 'pillRight', 'pillLeft', 'icon']),
+
+ bordered: _propTypes2["default"].bool,
+ /**
+ * @title 类型
+ */
+ colors: _propTypes2["default"].oneOf(['primary', 'secondary', 'accent', 'success', 'info', 'warning', 'danger', 'dark', 'light', 'default']),
+ /**
+ * @title 是否禁用
+ * @veIgnore
+ */
+ disabled: _propTypes2["default"].bool,
+ /**
+ * @title 类名
+ * @veIgnore
+ */
+ className: _propTypes2["default"].string,
+
+ /**
+ * @title