diff --git a/build/Table.js b/build/Table.js
index 5252c43..f2d331e 100644
--- a/build/Table.js
+++ b/build/Table.js
@@ -367,6 +367,10 @@ var Table = function (_Component) {
if (nextProps.resetScroll) {
this.resetScrollX();
}
+ // fix:模态框中使用table,计算的滚动条宽度为0的bug
+ if (this.scrollbarWidth <= 0 && this.props.scroll.y) {
+ this.scrollbarWidth = (0, _utils.measureScrollbar)();
+ }
// console.log('this.scrollTop**********',this.scrollTop);
};
diff --git a/build/lib/sum.js b/build/lib/sum.js
index d4c452f..5987695 100644
--- a/build/lib/sum.js
+++ b/build/lib/sum.js
@@ -106,9 +106,9 @@ function sum(Table) {
return _this;
}
- /**
- * 获取当前的表格类型。
- *
+ /**
+ * 获取当前的表格类型。
+ *
*/
diff --git a/build/lib/util.js b/build/lib/util.js
index 8d6a331..9ea2e19 100644
--- a/build/lib/util.js
+++ b/build/lib/util.js
@@ -1,7 +1,7 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
- value: true
+ 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; };
@@ -9,71 +9,71 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
exports.sortBy = sortBy;
exports.compare = compare;
exports.ObjectAssign = ObjectAssign;
-/*
-* 快速排序,按某个属性,或按“获取排序依据的函数”,来排序.
-* @method soryBy
-* @static
-* @param {array} arr 待处理数组
-* @param {string|function} prop 排序依据属性,获取
-* @param {boolean} desc 降序
-* @return {array} 返回排序后的新数组
+/*
+* 快速排序,按某个属性,或按“获取排序依据的函数”,来排序.
+* @method soryBy
+* @static
+* @param {array} arr 待处理数组
+* @param {string|function} prop 排序依据属性,获取
+* @param {boolean} desc 降序
+* @return {array} 返回排序后的新数组
*/
function sortBy(arr, prop, desc) {
- var props = [],
- ret = [],
- i = 0,
- len = arr.length;
- if (typeof prop == 'string') {
- for (; i < len; i++) {
- var oI = arr[i];
- (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+ var props = [],
+ ret = [],
+ i = 0,
+ len = arr.length;
+ if (typeof prop == 'string') {
+ for (; i < len; i++) {
+ var oI = arr[i];
+ (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+ }
+ } else if (typeof prop == 'function') {
+ for (; i < len; i++) {
+ var _oI = arr[i];
+ (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
+ }
+ } else {
+ throw '参数类型错误';
}
- } else if (typeof prop == 'function') {
- for (; i < len; i++) {
- var _oI = arr[i];
- (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
+ props.sort();
+ for (i = 0; i < len; i++) {
+ ret[i] = props[i]._obj;
}
- } else {
- throw '参数类型错误';
- }
- props.sort();
- for (i = 0; i < len; i++) {
- ret[i] = props[i]._obj;
- }
- if (desc) ret.reverse();
- return ret;
+ if (desc) ret.reverse();
+ return ret;
};
-/**
- * 数组对象排序
- * console.log(arr.sort(compare('age')))
- * @param {} property
+/**
+ * 数组对象排序
+ * console.log(arr.sort(compare('age')))
+ * @param {} property
*/
function compare(property) {
- return function (a, b) {
- var value1 = a[property];
- var value2 = b[property];
- return value1 - value2;
- };
+ return function (a, b) {
+ var value1 = a[property];
+ var value2 = b[property];
+ return value1 - value2;
+ };
}
-/**
- * 简单数组数据对象拷贝
- * @param {*} obj 要拷贝的对象
+/**
+ * 简单数组数据对象拷贝
+ * @param {*} obj 要拷贝的对象
*/
function ObjectAssign(obj) {
- var b = obj instanceof Array;
- var tagObj = b ? [] : {};
- if (b) {
- //数组
- obj.forEach(function (da) {
- var _da = {};
- _extends(_da, da);
- tagObj.push(_da);
- });
- } else {
- _extends(tagObj, obj);
- }
- return tagObj;
+ var b = obj instanceof Array;
+ var tagObj = b ? [] : {};
+ if (b) {
+ //数组
+ obj.forEach(function (da) {
+ var _da = {};
+ _extends(_da, da);
+ tagObj.push(_da);
+ });
+ } else {
+ _extends(tagObj, obj);
+ }
+ return tagObj;
}
\ No newline at end of file
diff --git a/build/render/CheckboxRender.js b/build/render/CheckboxRender.js
index 1e4ba25..8473356 100644
--- a/build/render/CheckboxRender.js
+++ b/build/render/CheckboxRender.js
@@ -19,11 +19,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
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); }
-/**
- * 渲染checkbox
- * @param Checkbox
- * @param Icon
- * @returns {CheckboxRender}
+/**
+ * 渲染checkbox
+ * @param Checkbox
+ * @param Icon
+ * @returns {CheckboxRender}
*/
function renderCheckbox(Checkbox, Icon) {
return function (_Component) {
diff --git a/build/render/InputRender.js b/build/render/InputRender.js
index 68f898d..04c7002 100644
--- a/build/render/InputRender.js
+++ b/build/render/InputRender.js
@@ -28,12 +28,12 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
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); }
-/**
- * 渲染输入框
- * @param Form
- * @param Input
- * @param Icon
- * @returns {InputRender}
+/**
+ * 渲染输入框
+ * @param Form
+ * @param Input
+ * @param Icon
+ * @returns {InputRender}
*/
function renderInput(Form, Input, Icon) {
var _class, _temp2;
diff --git a/build/render/SelectRender.js b/build/render/SelectRender.js
index d72159b..a1d55db 100644
--- a/build/render/SelectRender.js
+++ b/build/render/SelectRender.js
@@ -26,11 +26,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
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); }
-/**
- * 渲染下拉框
- * @param Select
- * @param Icon
- * @returns {SelectRender}
+/**
+ * 渲染下拉框
+ * @param Select
+ * @param Icon
+ * @returns {SelectRender}
*/
function renderSelect(Select, Icon) {
var _class, _temp2;
diff --git a/demo/demolist/Demo1108.js b/demo/demolist/Demo1108.js
index 82e7e41..f4d1f49 100644
--- a/demo/demolist/Demo1108.js
+++ b/demo/demolist/Demo1108.js
@@ -74,6 +74,45 @@ const columns = [{
render: renderContent,
}];
+
+const columns1 = [{
+ title: '姓名',
+ key: "name",
+ dataIndex: 'name',
+ render: (text, row, index) => {
+ if (index < 4) {
+ return {text};
+ }
+ return {
+ children: {text},
+ props: {
+ colSpan: 5,
+ },
+ };
+ },
+}, {
+ title: '年龄',
+ key: "age",
+ dataIndex: 'age',
+ render: renderContent,
+}, {
+ title: '联系方式',
+ colSpan: 2,
+ key: "tel",
+ dataIndex: 'tel',
+ render: renderContent
+}, {
+ title: '手机号',
+ colSpan: 0,
+ key: "phone",
+ dataIndex: 'phone',
+ render: renderContent,
+}, {
+ title: '家庭住址',
+ key: "address",
+ dataIndex: 'address',
+ render: renderContent,
+}];
const data = [{
key: '1',
name: '小红',
@@ -112,9 +151,26 @@ const data = [{
}];
class Demo15 extends Component {
+ constructor(props){
+ super(props);
+ this.state={
+ colFlag:false
+ }
+ }
+ onChange=()=>{
+ const colFlag = this.state.colFlag;
+ this.setState({
+ colFlag:!colFlag
+ })
+ }
render() {
+ let cols = this.state.colFlag?columns:columns1;
return (
-
+
+
);
}
}
diff --git a/demo/index.js b/demo/index.js
index 72a2d0d..cbf266b 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -8,7 +8,7 @@ import Button from '../src';
-var Demo0101 = require("./demolist/Demo0101");var Demo0102 = require("./demolist/Demo0102");var Demo0103 = require("./demolist/Demo0103");var Demo0104 = require("./demolist/Demo0104");var Demo0105 = require("./demolist/Demo0105");var Demo0106 = require("./demolist/Demo0106");var Demo0107 = require("./demolist/Demo0107");var Demo0201 = require("./demolist/Demo0201");var Demo0202 = require("./demolist/Demo0202");var Demo0301 = require("./demolist/Demo0301");var Demo0302 = require("./demolist/Demo0302");var Demo0402 = require("./demolist/Demo0402");var Demo0404 = require("./demolist/Demo0404");var Demo0405 = require("./demolist/Demo0405");var Demo0501 = require("./demolist/Demo0501");var Demo0502 = require("./demolist/Demo0502");var Demo0503 = require("./demolist/Demo0503");var Demo0505 = require("./demolist/Demo0505");var Demo0601 = require("./demolist/Demo0601");var Demo0602 = require("./demolist/Demo0602");var Demo0603 = require("./demolist/Demo0603");var Demo0701 = require("./demolist/Demo0701");var Demo0702 = require("./demolist/Demo0702");var Demo0802 = require("./demolist/Demo0802");var Demo0901 = require("./demolist/Demo0901");var Demo0902 = require("./demolist/Demo0902");var Demo0903 = require("./demolist/Demo0903");var Demo1001 = require("./demolist/Demo1001");var Demo1002 = require("./demolist/Demo1002");var Demo1101 = require("./demolist/Demo1101");var Demo1102 = require("./demolist/Demo1102");var Demo1103 = require("./demolist/Demo1103");var Demo1105 = require("./demolist/Demo1105");var Demo1106 = require("./demolist/Demo1106");var Demo1107 = require("./demolist/Demo1107");var Demo1108 = require("./demolist/Demo1108");var Demo1201 = require("./demolist/Demo1201");var Demo1301 = require("./demolist/Demo1301");var Demo1302 = require("./demolist/Demo1302");var Demo1401 = require("./demolist/Demo1401");var Demo1402 = require("./demolist/Demo1402");var Demo1403 = require("./demolist/Demo1403");var Demo1404 = require("./demolist/Demo1404");var Demo1601 = require("./demolist/Demo1601");var DemoArray = [{"example":,"title":" 基本表格","code":"/**\n*\n* @title 基本表格\n* @parent 基础 Basic\n* @description 单元格数据过长时,可结合Tooltip组件使用。\n* demo0101\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo0101 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 单元格数据过长时,可结合Tooltip组件使用。"},{"example":,"title":" 默认无数据展示","code":"/**\r\n*\r\n* @title 默认无数据展示\r\n* @parent 基础 Basic\r\n* @description 无数据时默认展示图标,可在`emptyText`方法中自定义展示内容。\r\n* demo0102\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns = [\r\n {\r\n title: \"员工编号\",\r\n dataIndex: \"num\",\r\n key: \"num\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"员工姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"部门\",\r\n dataIndex: \"department\",\r\n key: \"department\"\r\n }\r\n];\r\n \r\nconst data = [];\r\n\r\n// 在此自定义无数据时的展示内容\r\nconst emptyFunc = () => 'No Data';\r\n \r\nclass Demo02 extends Component {\r\n render() {\r\n return (\r\n \r\n )\r\n }\r\n}\r\n\r\n","desc":" 无数据时默认展示图标,可在`emptyText`方法中自定义展示内容。"},{"example":,"title":" 固定表头","code":"/**\r\n*\r\n* @title 固定表头\r\n* @parent 基础 Basic\r\n* @description 设置`scroll.y`指定滚动区域的高度,达到固定表头效果。\r\n* demo0103\r\n*/\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns03 = [\r\n {\r\n title: \"序号\",\r\n dataIndex: \"index\",\r\n key: \"index\",\r\n width: 80, \r\n render(text, record, index) {\r\n return index + 1;\r\n }\r\n },\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"orderCode\",\r\n key: \"orderCode\",\r\n width: 200, \r\n },\r\n {\r\n title: \"供应商名称\",\r\n dataIndex: \"supplierName\",\r\n key: \"supplierName\",\r\n width: 200\r\n },\r\n {\r\n title: \"类型\",\r\n dataIndex: \"type_name\",\r\n key: \"type_name\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组织\",\r\n dataIndex: \"purchasing\",\r\n key: \"purchasing\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组\",\r\n dataIndex: \"purchasingGroup\",\r\n key: \"purchasingGroup\",\r\n width: 200\r\n },\r\n {\r\n title: \"凭证日期\",\r\n dataIndex: \"voucherDate\",\r\n key: \"voucherDate\",\r\n width: 200,\r\n }\r\n];\r\n\r\nconst data03 = [\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n key: \"1\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n key: \"2\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n key: \"3\"\r\n },\r\n { \r\n orderCode:\"NU0391028\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"4\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"cc\",\r\n voucherDate:\"2019年03月01日\",\r\n key: \"4\"\r\n },\r\n { \r\n orderCode:\"NU0391029\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"5\",\r\n purchasing:'组织d', \r\n purchasingGroup:\"ss\",\r\n voucherDate:\"2019年02月14日\",\r\n key: \"5\"\r\n },\r\n { \r\n orderCode:\"NU0391030\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织e', \r\n purchasingGroup:\"zz\",\r\n voucherDate:\"2019年02月18日\",\r\n key: \"6\"\r\n },\r\n { \r\n orderCode:\"NU0391031\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织f', \r\n purchasingGroup:\"qq\",\r\n voucherDate:\"2019年01月01日\",\r\n key: \"7\"\r\n },\r\n { \r\n orderCode:\"NU0391032\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织g', \r\n purchasingGroup:\"pp\",\r\n voucherDate:\"2019年01月31日\",\r\n key: \"8\"\r\n },\r\n];\r\n\r\nclass Demo03 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n","desc":" 设置`scroll.y`指定滚动区域的高度,达到固定表头效果。"},{"example":,"title":" 隔行换色","code":"/**\n*\n* @title 隔行换色\n* @parent 基础 Basic\n* @description 可自定义斑马线颜色\n* demo0104\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns04 = [\n {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \n render(text, record, index) {\n return index + 1;\n }\n },\n {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\n {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\n {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\n {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\n {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\n {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\n];\n\nconst data04 = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391030\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织e', \n purchasingGroup:\"zz\",\n voucherDate:\"2019年02月18日\",\n key: \"6\"\n },\n { \n orderCode:\"NU0391031\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织f', \n purchasingGroup:\"qq\",\n voucherDate:\"2019年01月01日\",\n key: \"7\"\n },\n { \n orderCode:\"NU0391032\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织g', \n purchasingGroup:\"pp\",\n voucherDate:\"2019年01月31日\",\n key: \"8\"\n },\n];\n\nclass Demo04 extends Component {\n render() {\n return \n }\n}\n\n","desc":" 可自定义斑马线颜色","scss_code":".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}"},{"example":,"title":" 表格 Loading 加载","code":"/**\r\n*\r\n* @title 表格 Loading 加载\r\n* @parent 基础 Basic\r\n* @description loading可以传boolean或者object对象,object为bee-loading组件的参数类型\r\n* demo0105\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button,Tooltip} from \"tinper-bee\";\r\n\r\nconst columns05 = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",fixed:'left'},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst data05 = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo05 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n loading : true\r\n }\r\n }\r\n changeLoading = () => {\r\n this.setState({\r\n loading : !this.state.loading\r\n })\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" loading可以传boolean或者object对象,object为bee-loading组件的参数类型"},{"example":,"title":" 单元格内容居中","code":"/**\n*\n* @title 单元格内容居中\n* @parent 基础 Basic\n* @description 在columns数据中设置`textAlign:'center'`,可实现单元格内容居中展示的效果。默认是居左显示。\n* demo0106\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: 120, className: \"rowClassName\",\n fixed:'left',\n textAlign:'center',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100,textAlign:'center'},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100,textAlign:'center'},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100,textAlign:'center' },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100,textAlign:'center' }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo06 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 在columns数据中设置`textAlign:'center'`,可实现单元格内容居中展示的效果。默认是居左显示。"},{"example":,"title":" 带边框","code":"/**\n*\n* @title 带边框\n* @parent 基础 Basic\n* @description 设置 `bordered` 属性可添加表格边框线。\n* demo0107\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo06 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 设置 `bordered` 属性可添加表格边框线。"},{"example":,"title":" 横向滚动条","code":"/**\n*\n* @title 横向滚动条\n* @parent 滚动 Scroll View\n* @description `scroll.x`的值代表表体内容的实际宽度,默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`,可以手动添加横向滚动条,也可以设置`scroll={{ x:\"110%\" }}`。\n* demo0201\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 100, \n render(text, record, index) {\n return index + 1;\n }\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 300, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 200\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 200\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 200\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 200\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 300,\n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 200\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 200\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 100\n }\n];\n \nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n approvalState_name:\"未审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n approvalState_name:\"未审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"5\"\n }\n];\n\nclass Demo11 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" `scroll.x`的值代表表体内容的实际宽度,默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`,可以手动添加横向滚动条,也可以设置`scroll={{ x:\"110%\" }}`。"},{"example":,"title":" 纵向滚动条","code":"/**\n*\n* @title 纵向滚动条\n* @parent 滚动 Scroll View\n* @description 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。\n* demo0202\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \n render(text, record, index) {\n return index + 1;\n }\n },\n {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\n {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\n {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\n {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\n {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\n {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\n];\n \nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391030\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织e', \n purchasingGroup:\"zz\",\n voucherDate:\"2019年02月18日\",\n key: \"6\"\n },\n { \n orderCode:\"NU0391031\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织f', \n purchasingGroup:\"qq\",\n voucherDate:\"2019年01月01日\",\n key: \"7\"\n },\n { \n orderCode:\"NU0391032\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织g', \n purchasingGroup:\"pp\",\n voucherDate:\"2019年01月31日\",\n key: \"8\"\n },\n];\nclass Demo12 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。"},{"example":,"title":" 渲染本地数据","code":"/**\n*\n* @title 渲染本地数据\n* @parent 数据操作 Data Opetation\n* @description 可自定义页头和页脚。\n* demo0301\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 { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\n];\nclass Demo21 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n\n render() {\n return (\n 员工信息统计表
}\n footer={currentData => 合计: 共{data.length}条数据
}\n />\n );\n }\n}\n\n\n","desc":" 可自定义页头和页脚。"},{"example":,"title":" 渲染远程数据","code":"/**\n*\n* @title 渲染远程数据\n* @parent 数据操作 Data Opetation\n* @description 可通过 ajax 请求方式,从服务端读取并展现数据。也可自行接入其他数据处理方式。\n* demo0302\n*/\n\nimport React, { Component } from \"react\";\nimport {Button} from \"tinper-bee\";\nimport reqwest from 'reqwest';\nimport { Table } from 'tinper-bee';\n\nconst columns = [{\n title: 'Name',\n dataIndex: 'name',\n sorter: true,\n render: name => `${name.first} ${name.last}`,\n width: '20%',\n}, {\n title: 'Gender',\n dataIndex: 'gender',\n filters: [\n { text: 'Male', value: 'male' },\n { text: 'Female', value: 'female' },\n ],\n width: '20%',\n}, {\n title: 'Email',\n dataIndex: 'email',\n}];\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: [],\n loading: false,\n }\n }\n\n fetch = (params = {}) => {\n console.log('params:', params);\n this.setState({ loading: true });\n reqwest({\n url: 'https://randomuser.me/api',\n method: 'get',\n data: {\n results: 10,\n ...params,\n },\n type: 'json',\n }).then((data) => {\n this.setState({\n loading: false,\n data: data.results,\n });\n });\n }\n\n render() {\n return (\n \n
\n
\n
\n );\n }\n}\n\n\n","desc":" 可通过 ajax 请求方式,从服务端读取并展现数据。也可自行接入其他数据处理方式。","scss_code":".demo22{\n .opt-btns{\n margin-bottom: 8px;\n }\n}"},{"example":,"title":" 多列表头","code":"/**\r\n *\r\n * @title 多列表头\r\n * @parent 列渲染 Custom Render\r\n * @description columns[n] 可以内嵌 children,以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight,注:修改th的padding top和bottom置为0,否则会有影响\r\n * demo0402\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button} from \"tinper-bee\";\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst columns = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"Other\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"Address\",\r\n children: [\r\n {\r\n title: \"Street\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"Block\",\r\n children: [\r\n {\r\n title: \"Building\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"Door No.\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: 100\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Company\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"Company Address\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"Company Name\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Gender\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 60,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\",\r\n age: i + 1,\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 2035,\r\n companyAddress: \"Lake Street 42\",\r\n companyName: \"SoftLake Co\",\r\n gender: \"M\"\r\n });\r\n}\r\n\r\nclass Demo32 extends Component {\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" columns[n] 可以内嵌 children,以渲染分组表头。","scss_code":".demo32{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}"},{"example":,"title":" 数据关联","code":"/**\n*\n* @title 数据关联\n* @parent 列渲染 Custom Render\n* @description 数据行关联自定义菜单显示\n* demo0404\n*/\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/newMultiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst { Item } = Menu;\n\nconst data = [\n { \n num:\"NU0391025\", \n name: \"aa\",\n sex: \"男\",\n dept:'财务二科', \n rank:\"T1\",\n year:\"1\",\n seniority:\"1\",\n key: \"1\"\n }, \n { \n num:\"NU0391026\", \n name: \"bb\",\n sex: \"女\",\n dept:'财务一科', \n rank:\"M1\",\n year:\"1\",\n seniority:\"1\",\n key: \"2\"\n },\n { \n num:\"NU0391027\", \n name: \"dd\",\n sex: \"女\",\n dept:'财务一科', \n rank:\"T2\",\n year:\"2\",\n seniority:\"2\",\n key: \"3\"\n }\n];\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\n\nclass Demo33 extends Component {\n constructor(props) {\n super(props);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onSelect = (item) => {\n console.log(item);\n }\n render() {\n const menu1 = (\n );\n let columns = [\n { title: \"关联\",dataIndex: \"link\",key: \"link\",width: 80, \n render: (text, record, index) => {\n return (\n \n \n \n )\n }\n },\n { title: \"员工编号\",dataIndex: \"num\",key: \"num\",width: 200 },\n { title: \"员工姓名\",dataIndex: \"name\",key: \"name\", width: 200},\n { title: \"员工性别\",dataIndex: \"sex\",key: \"sex\",width: 200 },\n { title: \"部门\",dataIndex: \"dept\",key: \"dept\",width: 200},\n { title: \"职级\",dataIndex: \"rank\",key: \"rank\",width: 200},\n { title: \"工龄\",dataIndex: \"year\",key: \"year\",width: 200},\n { title: \"司龄\",dataIndex: \"seniority\",key: \"seniority\",width: 200}\n ];\n return \n }\n}\n\n","desc":" 数据行关联自定义菜单显示"},{"example":,"title":" 列合计(总计)","code":"/**\n *\n * @title 列合计(总计)\n * @parent 列渲染 Custom Render\n * @description 给需要计算合计的列(columns),设置sumCol值为true即可,支持动态设置数据源。\n * demo0405\n */\n\nimport React, { Component } from \"react\";\nimport {Checkbox} from \"tinper-bee\";\nimport { Table } from 'tinper-bee'; \nimport sum from \"tinper-bee/lib/sum.js\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\n \nlet ComplexTable = multiSelect(sum(Table), Checkbox);\nlet _sum = 0;\nconst columns = [\n {\n title: \"单据编号\",\n dataIndex: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"业务类型\",\n dataIndex: \"type\",\n key: \"type\",\n width: 200\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"仓库\",\n dataIndex: \"warehouse\",\n key: \"warehouse\",\n width: 80,\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 100,\n sumCol: true\n },\n {\n title: \"金额\",\n dataIndex: \"money\",\n key: \"money\",\n width: 100,\n sumCol: true\n }\n];\n\nfunction getData(){\n const data = [];\n for (let i = 0; i < 5; i++) {\n data.push({\n key: i,\n num: \"NU039100\"+i,\n date: \"2019-03-01\",\n type: \"普通采购\",\n supplier: \"gys\"+i,\n contact: \"Tom\",\n warehouse: \"普通仓\",\n total: i + Math.floor(Math.random()*10),\n money: 20 * Math.floor(Math.random()*10)\n });\n _sum += data[i].total;\n _sum += data[i].money;\n }\n return data;\n}\n\nclass Demo35 extends Component {\n \n constructor(props) {\n super(props);\n this.state = {\n data: getData(),\n sum:_sum\n };\n }\n\n render() {\n const {data} = this.state;\n return (\n \n );\n }\n}\n\n","desc":" 给需要计算合计的列(columns),设置sumCol值为true即可,支持动态设置数据源。"},{"example":,"title":" 行内编辑","code":"/**\n *\n * @title 行内编辑\n * @parent 编辑 Editor\n * @description 可以对行进行编辑的表格\n * demo0501\n */\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport { Select, Form, FormControl, Button, Icon, Tooltip } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleChange = value => {\n const { onChange, throwError } = this.props;\n if (value === \"\") {\n throwError && throwError(true);\n } else {\n throwError && throwError(false);\n }\n this.setState({ value });\n onChange && onChange(value);\n };\n\n render() {\n const { editable, required, colName } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (value === \"\") cls += \" verify-cell\";\n return editable ? (\n \n
\n \n \n {value === \"\" ? (\n {\"请输入\" + colName}
}\n >\n
\n \n ) : null}\n \n
\n \n ) : (\n value || \" \"\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = value => {\n this.setState({ value });\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n const { editable } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n return editable ? (\n \n
\n \n
\n
\n ) : (\n value || \" \"\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n this.props.onChange && this.props.onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { editable, required } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n return editable ? (\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n ),\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n {getFieldError(\"refValue\")}\n \n ) : (\n value.name || \" \"\n );\n }\n }\n);\n\nlet dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0501 extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n dataSource: dataSource,\n editingRowsMap: {},\n currentIndex: null,\n errorEditFlag: false\n };\n\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100,\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"部门\",\n dataIndex: \"d\",\n key: \"d\",\n width: 215,\n render: (text, record, index) => (\n \n )\n },\n // 只是用来占位占宽度的\n {\n key: \"placeholder\"\n }\n ];\n\n this.state = {\n dataSource: dataSource,\n editingRowsMap: {},\n currentIndex: null,\n errorEditFlag: false\n };\n\n this.dataBuffer = {};\n }\n\n edit = index => () => {\n if (index === null) return;\n let editingRowsMap = { ...this.state.editingRowsMap };\n editingRowsMap[index] = index.toString();\n // 最好使用深复制\n this.dataBuffer[index] = { ...this.state.dataSource[index] };\n this.setState({ editingRowsMap });\n };\n\n abortEdit = index => () => {\n let editingRowsMap = { ...this.state.editingRowsMap };\n delete editingRowsMap[index];\n delete this.dataBuffer[index];\n this.setState({ editingRowsMap });\n };\n\n delete = index => () => {\n if (index === null) return;\n let { dataSource } = this.state;\n dataSource.splice(index,1);\n this.setState({\n dataSource:dataSource\n });\n }\n\n commitChange = index => () => {\n if (this.state.errorEditFlag) return;\n let editingRowsMap = { ...this.state.editingRowsMap };\n delete editingRowsMap[index];\n let dataSource = [...this.state.dataSource];\n dataSource[index] = { ...this.dataBuffer[index] };\n this.setState({ editingRowsMap, dataSource });\n };\n\n onCellChange = (index, key) => value => {\n this.dataBuffer[index][key] = value;\n };\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n handleRowHover = (index, record) => {\n this.currentRecord = record;\n this.setState({ currentIndex: index });\n };\n\n renderRowHover = () => {\n const { currentIndex } = this.state;\n return this.state.editingRowsMap[currentIndex] ? (\n \n \n \n
\n ) : (\n \n \n \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":" 可以对行进行编辑的表格","scss_code":".demo0501 .u-table {\n .u-row-hover {\n .opt-btns,.cancel-btns {\n button {\n margin: 0;\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n }\n\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}"},{"example":,"title":" 单元格编辑","code":"/**\n *\n * @title 单元格编辑\n * @parent 编辑 Editor\n * @description 可以对单元格进行编辑的表格,示例中给出输入框、下拉框、参照的编辑模式,以及两类校验。(通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格)\n * demo0502\n */\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport { Icon, Select, Tooltip, Form } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: this.props.value,\n editable: false\n };\n this.editWarp = React.createRef();\n }\n\n commitChange = () => {\n if (this.state.value === \"\") return;\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n edit = () => {\n this.setState({ editable: true });\n };\n\n handleKeydown = event => {\n if (event.keyCode == 13) {\n this.commitChange();\n }\n };\n\n handleChange = e => {\n if (e.target.value === \"\") this.editWarp.className += \" verify-cell\";\n this.setState({ value: e.target.value });\n };\n\n render() {\n const { value, editable } = this.state;\n return (\n \n {editable ? (\n
this.editWarp = el} className=\"editable-cell-input-wrapper\">\n \n {value === \"\" ? (\n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n
\n \n ) : null}\n
\n ) : (\n \n {value || \" \"}\n
\n )}\n \n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: this.props.value,\n editable: false\n };\n }\n\n handleSelect = value => {\n this.setState({ value });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n edit = () => {\n this.setState({ editable: true });\n };\n\n render() {\n const { value, editable } = this.state;\n return (\n \n {editable ? (\n
\n \n
\n ) : (\n
\n {value || \" \"}\n
\n )}\n
\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n value: this.props.value.d,\n editable: false\n };\n this.refWarp = React.createRef();\n }\n\n edit = () => {\n this.setState({ editable: true }, () => this.refWarp.focus());\n };\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n onRefBlur = e => {\n // 消除点击子组件,父组件先失焦再聚焦的事件触发过程带来的副作用\n const __REF_CONTENT__ = document.querySelector(\"div.ref-core-modal\");\n if (!__REF_CONTENT__ && e.target === this.refWarp) {\n this.commitChange();\n }\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, editable } = this.state;\n return editable ? (\n (this.refWarp = el)}\n className=\"editable-cell-input-wrapper\"\n tabIndex={-1}\n onBlur={this.onRefBlur}\n >\n \n \n {getFieldError(\"code1\")}\n \n
\n ) : (\n \n {value.name || \" \"}\n
\n );\n }\n }\n);\n\nconst dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0502 extends Component {\n constructor(props, context) {\n super(props);\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100,\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"部门\",\n dataIndex: \"d\",\n key: \"d\",\n width: 215,\n render: (text, record, index) => (\n \n )\n },\n {\n key: \"placeholder\"\n }\n ];\n\n this.state = {\n dataSource: dataSource\n };\n }\n\n onCellChange = (index, key) => {\n return value => {\n const { dataSource } = this.state;\n dataSource[index][key] = value;\n this.setState({ dataSource }, () => console.dir(this.state.dataSource));\n };\n };\n\n render() {\n return (\n \n
\n \n );\n }\n}\n\n\n","desc":" 可以对单元格进行编辑的表格,示例中给出输入框、下拉框、参照的编辑模式,以及两类校验。(通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格)","scss_code":".u-editable-table .u-table {\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n padding-left: 5px;\n font-size: 12px;\n\n &.error {\n border-color: #F44336;\n }\n }\n }\n\n .editable-cell {\n height: 30px;\n }\n\n &-hover {\n .editable-cell-text-wrapper {\n line-height: 19px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .editable-cell-input-wrapper {\n padding-right: 0;\n .ref-input-wrap {\n width: auto !important;\n height: 30px;\n .u-input-group{\n display: inline-block;\n }\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .require {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}"},{"example":,"title":" 弹框(表单)编辑","code":"/**\n *\n * @title 弹框(表单)编辑\n * @parent 编辑 Editor\n * @description 以弹框形式以对行进行编辑的表格\n * demo0503\n */\n\nimport React, { Component, PureComponent } from \"react\";\nimport { Table } from 'tinper-bee';\nimport {\n Select, Form, FormControl, Button, Icon,\n Tooltip, Modal, FormGroup, Label, Row, Col\n} from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nfunction handleFormValueChange(WarpCompProps, field, allFields) {\n const { onChange, throwError } = WarpCompProps;\n if (field.value === \"\") return throwError && throwError(true);\n throwError && throwError(false);\n onChange && onChange(field.value);\n}\n\nconst StringEditCell = Form.createForm({\n onValuesChange: handleFormValueChange\n})(PureStringEditCell);\n\nfunction PureStringEditCell(props) {\n const { getFieldProps, getFieldError } = props.form;\n const { value, required } = props;\n let cls = \"editable-cell\";\n if (required) cls += \" required\";\n return (\n \n \n {\"请输入\" + props.colName}\n
\n }\n >\n \n \n )\n }\n ]\n })}\n />\n {getFieldError(\"value\")}\n \n );\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends PureComponent {\n constructor(props, context) {\n super(props);\n }\n\n handleSelect = value => {\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n return (\n \n \n
\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends PureComponent {\n constructor(props, context) {\n super(props);\n }\n\n handleSelect = values => {\n const { form, throwError, onChange } = this.props\n if (form.getFieldError(\"refValue\")) return throwError && throwError(true);\n throwError && throwError(false);\n onChange && onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, required } = this.props;\n let cls = \"editable-cell\";\n if (required) cls += \" required\";\n return (\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n ),\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n {getFieldError(\"refValue\")}\n \n );\n }\n }\n);\n\nclass EditModal extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n data: this.props.data,\n errorEditFlag: false\n };\n\n // 属性名对应 columns 属性中的 key 值\n this.renderElm = {\n b: (record, index) => (\n \n ),\n\n c: (record, index) => (\n \n ),\n d: (record, index) => (\n \n )\n }\n }\n\n onFieldChange = field => value => {\n let data = { ...this.state.data };\n data[field] = value;\n this.setState({ data });\n }\n\n submitChange = () => {\n if (this.state.errorEditFlag) return;\n const { onSubmit, onHide, currentIndex } = this.props;\n onSubmit && onSubmit(this.state.data, currentIndex);\n onHide && onHide();\n }\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n render() {\n const { show, onHide, columns, currentIndex } = this.props;\n const { data } = this.state;\n return (\n \n \n 编辑行\n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nlet dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0503 extends Component {\n constructor(props, context) {\n super(props);\n // 编辑态下每个单元格对应的编辑模式组件写在 EditModal 组件中,以 key 值对应\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\"\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: 215,\n render: (text, record, index) => record.d.name\n }\n ];\n\n this.state = {\n dataSource: dataSource,\n isEditing: false,\n currentIndex: null\n };\n }\n\n edit = () => {\n if (this.state.currentIndex === null) return;\n this.setState({ isEditing: true });\n };\n\n abortEdit = () => {\n this.setState({ isEditing: false });\n };\n\n commitChange = (editedRowData, rowIndex) => {\n console.log(editedRowData)\n console.log(rowIndex)\n let dataSource = [...this.state.dataSource];\n dataSource[rowIndex] = editedRowData;\n this.setState({ dataSource });\n };\n\n handleRowHover = (index, record) => {\n this.setState({ currentIndex: index });\n };\n\n hideEditModal = () => {\n this.setState({ isEditing: false });\n }\n\n renderRowHover = () => {\n return (\n \n \n
\n );\n };\n\n\n render() {\n const { dataSource, isEditing, currentIndex } = this.state;\n const columns = this.columns;\n return (\n \n
\n {\n isEditing ? (\n
\n ) : null\n }\n
\n );\n }\n}\n\n\n","desc":" 以弹框形式以对行进行编辑的表格","scss_code":".demo0503-m-b {\n\n &.u-modal .u-modal-body {\n padding: 16px 0;\n background: #f7f9fb;\n }\n\n .u-form-group {\n overflow: hidden;\n }\n\n .u-form-control {\n font-size: 12px;\n }\n\n .editable-cell {\n display: block;\n float: left;\n width: 265px;\n padding-right: 25px;\n }\n\n .ref-input-wrap {\n width: 240px !important;\n }\n\n .u-label {\n display: block;\n float: left;\n text-align: right;\n width: 110px;\n box-sizing: border-box;\n padding-right: 10px;\n font-size: 12px;\n height: 32px;\n line-height: 32px;\n .mast {\n padding: 0;\n color: red;\n }\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n z-index: 9999 !important;\n\n .tp-content {\n color: #F44336;\n }\n}\n.ref-core-button .u-button:first-child{\n margin-right: 8px;\n}"},{"example":,"title":" 全表格编辑","code":"/**\n *\n * @title 全表格编辑\n * @parent 编辑 Editor\n * @description 以行内编辑形式对全表数据进行编辑\n * demo0505\n */\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport { Select, Form, FormControl, Button, Icon, Tooltip } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleChange = value => {\n const { onChange, throwError } = this.props;\n if (value === \"\") {\n throwError && throwError(true);\n } else {\n throwError && throwError(false);\n }\n this.setState({ value });\n onChange && onChange(value);\n };\n\n render() {\n const { editable, required, colName, isEdited } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (value === \"\") cls += \" verify-cell\";\n if (isEdited) cls += \" edited\";\n return editable ? (\n \n
\n \n \n {value === \"\" ? (\n {\"请输入\" + colName}
}\n >\n
\n \n ) : null}\n \n
\n \n ) : (\n value || \" \"\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = value => {\n this.setState({ value });\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n const { editable, isEdited } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (isEdited) cls += \" edited\";\n return editable ? (\n \n
\n \n
\n
\n ) : (\n value || \" \"\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n this.props.onChange && this.props.onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { editable, required, isEdited } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n if (isEdited) cls += \" edited\";\n return editable ? (\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n ),\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n {getFieldError(\"refValue\")}\n \n ) : (\n value.name || \" \"\n );\n }\n }\n);\n\nlet dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0505 extends Component {\n constructor(props, context) {\n super(props);\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100,\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"部门\",\n dataIndex: \"d\",\n key: \"d\",\n width: 215,\n render: (text, record, index) => (\n \n )\n },\n // 只是用来占位占宽度的\n {\n key: \"placeholder\"\n }\n ];\n\n // 用于记录数据是否被修改\n dataSource.forEach(item => (item.isEdited = {}));\n this.state = {\n dataSource: dataSource,\n isEditingAll: false,\n currentIndex: null,\n errorEditFlag: false\n };\n\n // 用于记录编辑前数据\n this.dataBuffer = [];\n }\n\n edit = () => {\n this.dataBuffer = [];\n // 最好使用深复制\n this.state.dataSource.forEach((item, index) => {\n this.dataBuffer.push({ ...item });\n });\n this.setState({ isEditingAll: true });\n };\n\n abortEdit = () => {\n let originData = [...this.state.dataSource];\n originData.forEach(item => (item.isEdited = {}));\n this.setState({\n isEditingAll: false,\n dataSource: originData\n });\n };\n\n commitChange = () => {\n if (this.state.errorEditFlag) return;\n const newData = this.dataBuffer.map(item => {\n return Object.assign({}, item, { isEdited: {} });\n });\n this.setState({ isEditingAll: false, dataSource: newData });\n };\n\n onCellChange = (index, key) => value => {\n this.dataBuffer[index][key] = value;\n this.dataBuffer[index].isEdited[key] = true;\n };\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n render() {\n const { dataSource, isEditingAll } = this.state;\n const columns = this.columns;\n return (\n \n
\n {isEditingAll ? (\n \n \n \n \n ) : (\n \n )}\n
\n
\n
\n );\n }\n}\n\n\n","desc":" 以行内编辑形式对全表数据进行编辑","scss_code":".demo0505 {\n\n .toolbar-btns {\n margin-bottom: 8px;\n\n .u-button {\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n\n .u-table {\n .u-row-select {\n background-color: #FFF7E7;\n }\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .edited::after {\n content: \" \";\n position: absolute;\n z-index: 999;\n top: 0;\n left: 0;\n border-width: 5px;\n border-style: solid;\n border-color: #f44336 transparent transparent #f44336;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}"},{"example":,"title":" 左侧固定列","code":"/**\n*\n* @title 左侧固定列\n* @parent 列操作-锁定 Fixed\n* @description 固定列到表格的左侧\n* demo0601\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\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: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\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\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\n];\n\nclass Demo51 extends Component {\n render() {\n return ;\n }\n}\n\n","desc":" 固定列到表格的左侧"},{"example":,"title":" 右侧固定列","code":"/**\n*\n* @title 右侧固定列\n* @parent 列操作-锁定 Fixed\n* @description 固定列到表格的右侧\n* demo0602\n*/\n\n\n\nimport React, { Component } from 'react';\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n render(text, record, index){return index + 1}\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: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\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\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\n];\n\nclass Demo52 extends Component {\n render() {\n return ;\n }\n}\n\n","desc":" 固定列到表格的右侧"},{"example":,"title":" 动态设置列锁定、解除锁定","code":"/**\n*\n* @title 动态设置列锁定、解除锁定\n* @parent 列操作-锁定 Fixed\n* @description 动态设置columns中数据的fixed属性值【fixed: \"left\",fixed: \"right\"】。\n* demo0603\n*/\nimport React, { Component } from 'react';\nimport {Icon,Menu,Dropdown} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst { Item } = Menu;\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 150\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: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\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\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\n];\n \nclass Demo24 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n columns:columns\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}\n\n","desc":" 动态设置columns中数据的fixed属性值【fixed: \"left\",fixed: \"right\"】。","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":,"title":" 按条件、值过滤","code":"/**\n*\n* @title 按条件、值过滤\n* @parent 列操作-过滤 Filter\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。\n* demo0701\n*/\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\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":,"title":" 复杂表格中行过滤","code":"/**\n*\n* @title 复杂表格中行过滤\n* @parent 列操作-过滤 Filter\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n* demo0702\n*/\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox} 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 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 onSelect = (item) => {\n console.log(item);\n }\n\n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n let columns27 = [\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":,"title":" 列过滤面板","code":"/**\n*\n* @title 列过滤面板\n* @parent 列操作-隐藏 Hide\n* @description 点击表头右侧按钮,设置显示或隐藏表格列。可以自定义设置显示某列,通过ifshow属性控制,默认值为true(显示表格所有列)。afterFilter方法为列过滤后触发的回调函数。\n* demo0802\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon,Popover} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\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 columns: [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 150\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 }\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 return ;\n }\n}\n\nDemo21.defaultProps = defaultProps21;\n","desc":" 点击表头右侧按钮,设置显示或隐藏表格列。可以自定义设置显示某列,通过ifshow属性控制,默认值为true(显示表格所有列)。afterFilter方法为列过滤后触发的回调函数。"},{"example":,"title":" 列排序","code":"/**\n* @title 列排序\n* @parent 列操作-排序 Sort\n* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称\n* demo0901\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: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 150,\n sorter: (a, b) => a.total - b.total\n }\n];\n\nconst data11 = [\n { num: \"NU0391001\", date: \"2019-03-01\", supplier: 'xx供应商',contact:'Tom', total:30 ,key: \"1\" },\n { num: \"NU0391002\", date: \"2018-11-02\", supplier: 'yy供应商',contact:'Jack', total:41 ,key: \"2\" },\n { num: \"NU0391003\", date: \"2019-05-03\", supplier: 'zz供应商',contact:'Jane', total:25 ,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":,"title":" 后端列排序","code":"/**\n* @title 后端列排序\n* @parent 列操作-排序 Sort\n* @description 可在控制台中查看序列化后的参数字符串,将参数传递给后端即可进行列排序\n* demo0902\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\n// const 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\n// const 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// ];\nconst columns11 = [\n {\n title: \"单据编号\",\n dataIndex: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 150,\n sorter: (a, b) => a.total - b.total\n },\n {\n title: \"金额\",\n dataIndex: \"money\",\n key: \"money\",\n width: 100,\n sorter: (a, b) => a.money - b.money\n }\n];\n\nconst data11 = [\n { num: \"NU0391001\", date: \"2019-03-01\", supplier: 'xx供应商',contact:'Tom', total:30 ,money: 100,key: \"1\" },\n { num: \"NU0391002\", date: \"2018-11-02\", supplier: 'yy供应商',contact:'Jack', total:41 ,money: 50,key: \"2\" },\n { num: \"NU0391003\", date: \"2019-05-03\", supplier: 'zz供应商',contact:'Jane', total:25 ,money: 200,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":,"title":" 多列排序","code":"/**\n *\n * @title 多列排序\n * @parent 列操作-排序 Sort\n * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。\n * demo0903\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: \"NU0391001\", b: 675, c: 30, d: \"xx供应商\",e:100, key: \"2\" },\n { a: \"NU0391002\", b: 43, c: 41, d: \"yy供应商\",e:90, key: \"1\" },\n { a: \"NU0391003\", b: 43, c: 81, d: \"zz供应商\", e:120,key: \"4\" },\n { a: \"NU0391004\", b: 43, c: 81, d: \"aa供应商\", e:130,key: \"5\" },\n { a: \"NU0391005\", b: 153, c: 25, d: \"bb供应商\",e:90, key: \"3\" }\n];\n\n\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\nlet ComplexTable = multiSelect(sort(sum(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":,"title":" 拖拽改变列顺序","code":"/**\n*\n* @title 拖拽改变列顺序\n* @parent 列操作-拖拽 Drag\n* @description 点击选择表头并左右拖拽,可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意:固定列不可以交换。\n* demo1001\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 columns = [\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 data = [\n { a: \"NU0391001\", b: \"2019-03-01\", c: 'xx供应商',d:'Tom', key: \"2\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: 'yy供应商',d:'Jack', key: \"1\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: 'zz供应商',d:'Jane', 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 console.log(\"--拖拽交换列后触发事件\");\n console.log(\"event.target:\",event.target);\n console.log(\"data:\",data);\n console.log(\"拖拽完成后的columns:\",columns);\n }}\n />;\n }\n}\n\nDemo22.defaultProps = defaultProps22;\n","desc":" 点击选择表头并左右拖拽,可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意:固定列不可以交换。"},{"example":,"title":" 拖拽改变列宽度","code":"/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description onDropBorder方法为调整列宽后触发的回调函数。注:不支持tree结构的表头、合并表头的table。\n* demo1002\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 }, \n {\n title: \"联系人\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"NU0391001\", b: \"2019-03-01\", c: \"xx供应商\",d:'Tom', key: \"2\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: \"yy供应商\",d:'Jack', key: \"1\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: \"zz供应商\",d:'Jane', 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":" onDropBorder方法为调整列宽后触发的回调函数。注:不支持tree结构的表头、合并表头的table。"},{"example":,"title":" 嵌套子表格","code":"/**\n*\n* @title 嵌套子表格\n* @parent 扩展行 Expanded Row\n* @description 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。\n* demo1101\n*/\n\nimport React, { Component } from \"react\";\nimport { Popconfirm,Icon } from 'tinper-bee';\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 \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 \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: \"NU0391001\", b: \"2019-03-01\", c: \"xx供应商\", d: \"操作\", key: \"1\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: \"yy供应商\", d: \"操作\", key: \"2\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: \"zz供应商\", 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: \"NU0391056\", b: \"2019-03-01\", c: \"gys1\", d: \"操作\", key: \"1\" },\n { a: \"NU0391057\", b: \"2018-11-02\", c: \"gys2\", d: \"操作\", key: \"2\" },\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"NU0391079\", b: \"2019-04-17\", c: \"gys5\", d: \"操作\", key: \"3\" },\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 expandedIcon={}\n />\n );\n }\n}\n\n\n","desc":" 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。"},{"example":,"title":" 树型表格数据展示","code":"/**\n*\n* @title 树型表格数据展示\n* @parent 扩展行 Expanded Row\n* @description 通过在data中配置children数据,来自动生成树形表格\n* demo1102\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns4 = [\n {\n title: \"订单编号\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"供应商\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"NU0391001\",\n age: \"2019-03-01\",\n address: \"供应商1\",\n children: [\n {\n key: 11,\n name: \"NU0391002\",\n age: \"2019-03-02\",\n address: \"供应商2\"\n },\n {\n key: 12,\n name: \"NU0391003\",\n age: \"2019-03-03\",\n address: \"供应商3\",\n children: [\n {\n key: 121,\n name: \"NU0391004\",\n age: \"2019-03-04\",\n address: \"供应商4\"\n }\n ]\n },\n {\n key: 13,\n name: \"NU0391005\",\n age: \"2019-03-05\",\n address: \"供应商5\",\n children: [\n {\n key: 131,\n name: \"NU0391006\",\n age: \"2019-03-06\",\n address: \"供应商6\",\n children: [\n {\n key: 1311,\n name: \"NU0391007\",\n age: \"2019-03-07\",\n address: \"供应商7\"\n },\n {\n key: 1312,\n name: \"NU0391008\",\n age: \"2019-03-08\",\n address: \"供应商8\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"NU0391009\",\n age: \"2019-03-09\",\n address: \"供应商9\"\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":,"title":" 自定义表格标题、表尾、选中行颜色","code":"/**\r\n*\r\n* @title 自定义表格标题、表尾、选中行颜色\r\n* @parent 扩展行 Expanded Row\r\n* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。\r\n* demo1103\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport {Button,Tooltip,} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150, className: \"rowClassName\"},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo26 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n {\r\n if (this.state.selectedRowIndex == index) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n onRowClick={(record,index,indent)=>{\r\n this.setState({ \r\n selectedRowIndex: index\r\n });\r\n }}\r\n title={currentData => 员工信息统计表
}\r\n footer={currentData => 合计: 共{data.length}条数据
}\r\n /> \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。"},{"example":,"title":" 紧凑型、宽松型","code":"/**\n*\n* @title 紧凑型、宽松型\n* @parent 扩展行 Expanded Row\n* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。\n* demo1105\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip,Tag} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"订单编号\", dataIndex: \"orderNum\", key: \"orderNum\", width: 100 },\n { title: \"采购组织\", dataIndex: \"org\", key: \"org\", width: 200 },\n { title: \"供应商\", dataIndex: \"supplier\", key: \"supplier\", width: 100 },\n { title: \"订单日期\", dataIndex: \"orderDate\", key: \"orderDate\", width: 150 },\n { title: \"总数量\", dataIndex: \"quantity\", key: \"quantity\", width: 100 },\n { title: \"单据状态\", dataIndex: \"status\", key: \"status\", width: 100, \n render: (text, record, index) => {\n return (\n {text.desc}\n );\n }},\n { title: \"提交人\", dataIndex: \"submitter\", key: \"submitter\", width: 100 },\n { title: \"单位\", dataIndex: \"unit\", key: \"unit\", width: 100 },\n { title: \"总税价合计\", dataIndex: \"sum\", key: \"sum\", width: 100 },\n];\n\nconst data = [\n { \n orderNum: \"NU0391025\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年03月18日', \n quantity: '100.00', \n status: {type:'success' ,desc:'正常'}, \n submitter: '小张', \n unit: 'pc', \n sum:'8,487.00', \n key: \"1\" \n },\n { \n orderNum: \"NU0391026\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年02月05日', \n quantity: '91.00', \n status: {type:'danger' ,desc:'异常'}, \n submitter: '小红', \n unit: 'pc', \n sum:'675.00', \n key: \"2\" \n },\n { \n orderNum: \"NU0391027\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年07月01日', \n quantity: '98.00', \n status: {type:'success' ,desc:'正常'}, \n submitter: '小李', \n unit: 'pc', \n sum:'1,531.00', \n key: \"3\" \n }\n];\n\nclass Demo1 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。"},{"example":,"title":" 自定义行高","code":"/**\n*\n* @title 自定义行高\n* @parent 扩展行 Expanded Row\n* @description 设置`height`属性自定义表体行高,设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。\n* demo1106\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150, className: \"rowClassName\"},\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", 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 handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=()=>{\n return
\n }\n\n render() {\n return (\n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n","desc":" 设置`height`属性自定义表体行高,设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。"},{"example":,"title":" 图片在表格中的展示","code":"/**\n*\n* @title 图片在表格中的展示\n* @parent 扩展行 Expanded Row\n* @description 根据图片高度自动撑开行高,可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注:如果图片在固定列中,可以使用heightConsistent属性,当此属性为true,就不会出现错行问题\n* demo1107\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80,\n render(text, record, index) {\n return index + 1;\n }\n },\n {\n title: \"图样\",\n dataIndex: \"picture\",\n key: \"picture\",\n render(text, record, index) {\n return \n }\n },\n {\n title: \"组织部门\",\n dataIndex: \"orgDept\",\n key: \"orgDept\",\n width: 100,\n },\n {\n title: \"设施管理部门\",\n dataIndex: \"facilityManageUnit\",\n key: \"facilityManageUnit\",\n width: 150,\n },\n {\n title: \"案卷编号\",\n dataIndex: \"docketnum\",\n key: \"docketnum\",\n width: 100,\n },\n {\n title: \"数量\",\n dataIndex: \"num\",\n key: \"num\",\n width: 100,\n },\n {\n title: \"首次发现时间\",\n dataIndex: \"discoveryTime\",\n key: \"discoveryTime\",\n width: 150,\n },\n {\n title: \"实际修复时间\",\n dataIndex: \"repairTime\",\n key: \"repairTime\",\n width: 150,\n }\n];\n\nconst data = [\n { key: \"1\", orgDept: \"组织1\", facilityManageUnit: \"部门1\", docketnum: 41, num: \"1\", discoveryTime: \"2018-10-17\", repairTime: \"2018-10-30\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg\"},\n { key: \"2\", orgDept: \"组织2\", facilityManageUnit: \"部门2\", docketnum: 30, num: \"2\", discoveryTime: \"2019-01-15\", repairTime: \"2019-01-20\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg\"},\n { key: \"3\", orgDept: \"组织3\", facilityManageUnit: \"部门3\", docketnum: 35, num: \"3\", discoveryTime: \"2019-04-10\", repairTime: \"2019-04-17\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg\"}\n];\n\nclass Demo1107 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 根据图片高度自动撑开行高,可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注:如果图片在固定列中,可以使用heightConsistent属性,当此属性为true,就不会出现错行问题"},{"example":,"title":" 自定义行、列合并","code":"/**\n*\n* @title 自定义行、列合并\n* @parent 扩展行 Expanded Row\n* @description 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。\n* demo1108\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: '姓名',\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: '年龄',\n key: \"age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: '联系方式',\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: '手机号',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: '家庭住址',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\n\nconst data = [{\n key: '1',\n name: '小红',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: '北京海淀',\n}, {\n key: '2',\n name: '小明',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: '河北张家口',\n}, {\n key: '3',\n name: '张三',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '浙江杭州',\n}, {\n key: '4',\n name: '李四',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '广州深圳',\n}, {\n key: '5',\n name: '王五',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '北京昌平',\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":,"title":" 拖拽改变行顺序","code":"/**\n*\n* @title 拖拽改变行顺序\n* @parent 行操作-拖拽\n* @description `rowDraggAble`参数设置是否使用行交换顺序功能,`onDropRow` 是拖拽行后的回调函数。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* Demo1201\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:200 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1001\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"1002\" },\n { a: \"ASVAL_201903120001\", b: \"小红\", c: \"女\", d: \"财务四科\", e: \"T3\", key: \"1003\" },\n { a: \"ASVAL_201903120002\", b: \"小姚\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"1004\" },\n { a: \"ASVAL_201903120003\", b: \"小岳\", c: \"男\", d: \"财务五科\", e: \"T2\", key: \"1005\" },\n { a: \"ASVAL_201903120004\", b: \"小王\", c: \"男\", d: \"财务一科\", e: \"T5\", key: \"1006\" },\n { a: \"ASVAL_201903120005\", b: \"小绍\", c: \"男\", d: \"财务七科\", e: \"T2\", key: \"1007\" },\n { a: \"ASVAL_201903120006\", b: \"小郭\", c: \"男\", d: \"财务一科\", e: \"T3\", key: \"1008\" },\n { a: \"ASVAL_201903120007\", b: \"小杨\", c: \"女\", d: \"财务四科\", e: \"T2\", key: \"1009\" }\n];\n\nclass Demo1201 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n /**\n * 行拖拽结束时触发\n * @param data 拖拽改变顺序后的新data数组\n * @param record 拖拽行的数据\n */\n onDropRow = (data, record) => {\n console.log('重排序后的data: ', data);\n console.log('拖拽的行数据: ', record);\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" `rowDraggAble`参数设置是否使用行交换顺序功能,`onDropRow` 是拖拽行后的回调函数。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。"},{"example":,"title":" 多选功能","code":"/**\r\n*\r\n* @title 多选功能\r\n* @parent 行操作-选择\r\n* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数,返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中,添加_disabled参数可禁止选择当前数据。\r\n* demo1301\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport {Checkbox} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\",_checked:true },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\",_checked:false },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\",_checked:false },\r\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\",_disabled:true },\r\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\",_checked:false}\r\n];\r\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\r\nlet MultiSelectTable = multiSelect(Table, Checkbox);\r\n\r\nclass Demo12 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data\r\n };\r\n }\r\n /**\r\n *@param selectedList:当前选中的行数据\r\n *@param record 当前操作行数据\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (selectedList,record,index) => {\r\n console.log(\"selectedList\", selectedList,\"index\",index);\r\n // 如果在回调中增加setState逻辑,需要同步data中的_checked属性。即下面的代码\r\n // const allChecked = selectedList.length == 0?false:true;\r\n // record为undefind则为全选或者全不选\r\n // if(!record){\r\n // data12.forEach(item=>{\r\n // item._checked = allChecked;\r\n // })\r\n // }else{\r\n // data12[index]['_checked'] = record._checked;\r\n // } \r\n\r\n \r\n };\r\n \r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n return (\r\n {\r\n if (record._checked) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n );\r\n }\r\n}\r\n\r\n","desc":" 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数,返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中,添加_disabled参数可禁止选择当前数据。"},{"example":,"title":" 单选功能","code":"/**\r\n*\r\n* @title 单选功能\r\n* @parent 行操作-选择\r\n* @description 表格支持单选行操作,可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。\r\n* Demo1302\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Radio } from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport singleSelect from \"tinper-bee/lib/singleSelect.js\";;\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300 },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n ];\r\n \r\n const data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" },\r\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\r\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" }\r\n ];\r\n\r\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\r\nlet SingleSelectTable = singleSelect(Table, Radio);\r\n\r\nclass Demo1302 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0,\r\n }\r\n }\r\n\r\n /**\r\n *@param selected 当前选中的行数据(当前操作行数据)\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (record,index) => {\r\n console.log(\"record\", record, \"index\",index);\r\n\r\n this.setState({\r\n selectedRowIndex:index\r\n })\r\n };\r\n\r\n render() {\r\n let {selectedRowIndex} = this.state;\r\n\r\n return (\r\n {\r\n if (index === selectedRowIndex) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}\r\n /> \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 表格支持单选行操作,可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。"},{"example":,"title":" 万行以上数据渲染","code":"/**\n*\n* @title 万行以上数据渲染\n* @parent 无限滚动 Infinite-scroll\n* @description 万行数据渲染\n* demo1401\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:'60',\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":,"title":" 嵌套子表格滚动加载","code":"/**\n*\n* @title 嵌套子表格滚动加载\n* @parent 无限滚动 Infinite-scroll\n* @description 通过expandedRowRender参数来实现子表格。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* demo1402\n*/\n\nimport React, { Component } from \"react\";\nimport {Popconfirm} from 'tinper-bee';\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 \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 \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 = [ ...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 );\n }\n}\n\n\n","desc":" 通过expandedRowRender参数来实现子表格。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。"},{"example":,"title":" 多功能表格滚动加载","code":"/**\n*\n* @title 多功能表格滚动加载\n* @parent 无限滚动 Infinite-scroll\n* @description\n* demo1403\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:'80',\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":,"title":" 层级树大数据场景","code":"/**\n* @title 层级树大数据场景\n* @parent 无限滚动 Infinite-scroll\n* @description\n* demo1404\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 = (expandedRowKeys)=>{\n console.log('expandedRowKeys',expandedRowKeys);\n }\n onExpand = (expandKeys)=>{\n console.log('expand---'+expandKeys);\n }\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n onExpandedRowsChange={this.onExpandedRowsChange}\n />\n\n \n );\n }\n}\n\n","desc":""},{"example":,"title":" 表格+分页","code":"/**\n * @title 表格+分页\n * @parent 分页 Pagination\n * @description 点击分页联动表格\n * demo1601\n */\n\nimport React, { Component } from \"react\";\nimport {Pagination} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\n];\n\nconst pageData = {\n 1: [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\n ],\n 2: [\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" },\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}"}]
+var Demo0101 = require("./demolist/Demo0101");var Demo0102 = require("./demolist/Demo0102");var Demo0103 = require("./demolist/Demo0103");var Demo0104 = require("./demolist/Demo0104");var Demo0105 = require("./demolist/Demo0105");var Demo0106 = require("./demolist/Demo0106");var Demo0107 = require("./demolist/Demo0107");var Demo0201 = require("./demolist/Demo0201");var Demo0202 = require("./demolist/Demo0202");var Demo0301 = require("./demolist/Demo0301");var Demo0302 = require("./demolist/Demo0302");var Demo0402 = require("./demolist/Demo0402");var Demo0404 = require("./demolist/Demo0404");var Demo0405 = require("./demolist/Demo0405");var Demo0501 = require("./demolist/Demo0501");var Demo0502 = require("./demolist/Demo0502");var Demo0503 = require("./demolist/Demo0503");var Demo0505 = require("./demolist/Demo0505");var Demo0601 = require("./demolist/Demo0601");var Demo0602 = require("./demolist/Demo0602");var Demo0603 = require("./demolist/Demo0603");var Demo0701 = require("./demolist/Demo0701");var Demo0702 = require("./demolist/Demo0702");var Demo0802 = require("./demolist/Demo0802");var Demo0901 = require("./demolist/Demo0901");var Demo0902 = require("./demolist/Demo0902");var Demo0903 = require("./demolist/Demo0903");var Demo1001 = require("./demolist/Demo1001");var Demo1002 = require("./demolist/Demo1002");var Demo1101 = require("./demolist/Demo1101");var Demo1102 = require("./demolist/Demo1102");var Demo1103 = require("./demolist/Demo1103");var Demo1105 = require("./demolist/Demo1105");var Demo1106 = require("./demolist/Demo1106");var Demo1107 = require("./demolist/Demo1107");var Demo1108 = require("./demolist/Demo1108");var Demo1201 = require("./demolist/Demo1201");var Demo1301 = require("./demolist/Demo1301");var Demo1302 = require("./demolist/Demo1302");var Demo1401 = require("./demolist/Demo1401");var Demo1402 = require("./demolist/Demo1402");var Demo1403 = require("./demolist/Demo1403");var Demo1404 = require("./demolist/Demo1404");var Demo1601 = require("./demolist/Demo1601");var DemoArray = [{"example":,"title":" 基本表格","code":"/**\n*\n* @title 基本表格\n* @parent 基础 Basic\n* @description 单元格数据过长时,可结合Tooltip组件使用。\n* demo0101\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo0101 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 单元格数据过长时,可结合Tooltip组件使用。"},{"example":,"title":" 默认无数据展示","code":"/**\r\n*\r\n* @title 默认无数据展示\r\n* @parent 基础 Basic\r\n* @description 无数据时默认展示图标,可在`emptyText`方法中自定义展示内容。\r\n* demo0102\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns = [\r\n {\r\n title: \"员工编号\",\r\n dataIndex: \"num\",\r\n key: \"num\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"员工姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"部门\",\r\n dataIndex: \"department\",\r\n key: \"department\"\r\n }\r\n];\r\n \r\nconst data = [];\r\n\r\n// 在此自定义无数据时的展示内容\r\nconst emptyFunc = () => 'No Data';\r\n \r\nclass Demo02 extends Component {\r\n render() {\r\n return (\r\n \r\n )\r\n }\r\n}\r\n\r\n","desc":" 无数据时默认展示图标,可在`emptyText`方法中自定义展示内容。"},{"example":,"title":" 固定表头","code":"/**\r\n*\r\n* @title 固定表头\r\n* @parent 基础 Basic\r\n* @description 设置`scroll.y`指定滚动区域的高度,达到固定表头效果。\r\n* demo0103\r\n*/\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns03 = [\r\n {\r\n title: \"序号\",\r\n dataIndex: \"index\",\r\n key: \"index\",\r\n width: 80, \r\n render(text, record, index) {\r\n return index + 1;\r\n }\r\n },\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"orderCode\",\r\n key: \"orderCode\",\r\n width: 200, \r\n },\r\n {\r\n title: \"供应商名称\",\r\n dataIndex: \"supplierName\",\r\n key: \"supplierName\",\r\n width: 200\r\n },\r\n {\r\n title: \"类型\",\r\n dataIndex: \"type_name\",\r\n key: \"type_name\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组织\",\r\n dataIndex: \"purchasing\",\r\n key: \"purchasing\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组\",\r\n dataIndex: \"purchasingGroup\",\r\n key: \"purchasingGroup\",\r\n width: 200\r\n },\r\n {\r\n title: \"凭证日期\",\r\n dataIndex: \"voucherDate\",\r\n key: \"voucherDate\",\r\n width: 200,\r\n }\r\n];\r\n\r\nconst data03 = [\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n key: \"1\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n key: \"2\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n key: \"3\"\r\n },\r\n { \r\n orderCode:\"NU0391028\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"4\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"cc\",\r\n voucherDate:\"2019年03月01日\",\r\n key: \"4\"\r\n },\r\n { \r\n orderCode:\"NU0391029\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"5\",\r\n purchasing:'组织d', \r\n purchasingGroup:\"ss\",\r\n voucherDate:\"2019年02月14日\",\r\n key: \"5\"\r\n },\r\n { \r\n orderCode:\"NU0391030\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织e', \r\n purchasingGroup:\"zz\",\r\n voucherDate:\"2019年02月18日\",\r\n key: \"6\"\r\n },\r\n { \r\n orderCode:\"NU0391031\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织f', \r\n purchasingGroup:\"qq\",\r\n voucherDate:\"2019年01月01日\",\r\n key: \"7\"\r\n },\r\n { \r\n orderCode:\"NU0391032\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织g', \r\n purchasingGroup:\"pp\",\r\n voucherDate:\"2019年01月31日\",\r\n key: \"8\"\r\n },\r\n];\r\n\r\nclass Demo03 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n","desc":" 设置`scroll.y`指定滚动区域的高度,达到固定表头效果。"},{"example":,"title":" 隔行换色","code":"/**\n*\n* @title 隔行换色\n* @parent 基础 Basic\n* @description 可自定义斑马线颜色\n* demo0104\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns04 = [\n {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \n render(text, record, index) {\n return index + 1;\n }\n },\n {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\n {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\n {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\n {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\n {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\n {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\n];\n\nconst data04 = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391030\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织e', \n purchasingGroup:\"zz\",\n voucherDate:\"2019年02月18日\",\n key: \"6\"\n },\n { \n orderCode:\"NU0391031\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织f', \n purchasingGroup:\"qq\",\n voucherDate:\"2019年01月01日\",\n key: \"7\"\n },\n { \n orderCode:\"NU0391032\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织g', \n purchasingGroup:\"pp\",\n voucherDate:\"2019年01月31日\",\n key: \"8\"\n },\n];\n\nclass Demo04 extends Component {\n render() {\n return \n }\n}\n\n","desc":" 可自定义斑马线颜色","scss_code":".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}"},{"example":,"title":" 表格 Loading 加载","code":"/**\r\n*\r\n* @title 表格 Loading 加载\r\n* @parent 基础 Basic\r\n* @description loading可以传boolean或者object对象,object为bee-loading组件的参数类型\r\n* demo0105\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button,Tooltip} from \"tinper-bee\";\r\n\r\nconst columns05 = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",fixed:'left'},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst data05 = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo05 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n loading : true\r\n }\r\n }\r\n changeLoading = () => {\r\n this.setState({\r\n loading : !this.state.loading\r\n })\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" loading可以传boolean或者object对象,object为bee-loading组件的参数类型"},{"example":,"title":" 单元格内容居中","code":"/**\n*\n* @title 单元格内容居中\n* @parent 基础 Basic\n* @description 在columns数据中设置`textAlign:'center'`,可实现单元格内容居中展示的效果。默认是居左显示。\n* demo0106\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: 120, className: \"rowClassName\",\n fixed:'left',\n textAlign:'center',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100,textAlign:'center'},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100,textAlign:'center'},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100,textAlign:'center' },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100,textAlign:'center' }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo06 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 在columns数据中设置`textAlign:'center'`,可实现单元格内容居中展示的效果。默认是居左显示。"},{"example":,"title":" 带边框","code":"/**\n*\n* @title 带边框\n* @parent 基础 Basic\n* @description 设置 `bordered` 属性可添加表格边框线。\n* demo0107\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo06 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 设置 `bordered` 属性可添加表格边框线。"},{"example":,"title":" 横向滚动条","code":"/**\n*\n* @title 横向滚动条\n* @parent 滚动 Scroll View\n* @description `scroll.x`的值代表表体内容的实际宽度,默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`,可以手动添加横向滚动条,也可以设置`scroll={{ x:\"110%\" }}`。\n* demo0201\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 100, \n render(text, record, index) {\n return index + 1;\n }\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 300, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 200\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 200\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 200\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 200\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 300,\n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 200\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 200\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 100\n }\n];\n \nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n approvalState_name:\"未审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n approvalState_name:\"未审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"5\"\n }\n];\n\nclass Demo11 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" `scroll.x`的值代表表体内容的实际宽度,默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`,可以手动添加横向滚动条,也可以设置`scroll={{ x:\"110%\" }}`。"},{"example":,"title":" 纵向滚动条","code":"/**\n*\n* @title 纵向滚动条\n* @parent 滚动 Scroll View\n* @description 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。\n* demo0202\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \n render(text, record, index) {\n return index + 1;\n }\n },\n {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\n {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\n {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\n {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\n {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\n {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\n];\n \nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391030\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织e', \n purchasingGroup:\"zz\",\n voucherDate:\"2019年02月18日\",\n key: \"6\"\n },\n { \n orderCode:\"NU0391031\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织f', \n purchasingGroup:\"qq\",\n voucherDate:\"2019年01月01日\",\n key: \"7\"\n },\n { \n orderCode:\"NU0391032\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织g', \n purchasingGroup:\"pp\",\n voucherDate:\"2019年01月31日\",\n key: \"8\"\n },\n];\nclass Demo12 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。"},{"example":,"title":" 渲染本地数据","code":"/**\n*\n* @title 渲染本地数据\n* @parent 数据操作 Data Opetation\n* @description 可自定义页头和页脚。\n* demo0301\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 { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\n];\nclass Demo21 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n\n render() {\n return (\n 员工信息统计表
}\n footer={currentData => 合计: 共{data.length}条数据
}\n />\n );\n }\n}\n\n\n","desc":" 可自定义页头和页脚。"},{"example":,"title":" 渲染远程数据","code":"/**\n*\n* @title 渲染远程数据\n* @parent 数据操作 Data Opetation\n* @description 可通过 ajax 请求方式,从服务端读取并展现数据。也可自行接入其他数据处理方式。\n* demo0302\n*/\n\nimport React, { Component } from \"react\";\nimport {Button} from \"tinper-bee\";\nimport reqwest from 'reqwest';\nimport { Table } from 'tinper-bee';\n\nconst columns = [{\n title: 'Name',\n dataIndex: 'name',\n sorter: true,\n render: name => `${name.first} ${name.last}`,\n width: '20%',\n}, {\n title: 'Gender',\n dataIndex: 'gender',\n filters: [\n { text: 'Male', value: 'male' },\n { text: 'Female', value: 'female' },\n ],\n width: '20%',\n}, {\n title: 'Email',\n dataIndex: 'email',\n}];\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: [],\n loading: false,\n }\n }\n\n fetch = (params = {}) => {\n console.log('params:', params);\n this.setState({ loading: true });\n reqwest({\n url: 'https://randomuser.me/api',\n method: 'get',\n data: {\n results: 10,\n ...params,\n },\n type: 'json',\n }).then((data) => {\n this.setState({\n loading: false,\n data: data.results,\n });\n });\n }\n\n render() {\n return (\n \n
\n
\n
\n );\n }\n}\n\n\n","desc":" 可通过 ajax 请求方式,从服务端读取并展现数据。也可自行接入其他数据处理方式。","scss_code":".demo22{\n .opt-btns{\n margin-bottom: 8px;\n }\n}"},{"example":,"title":" 多列表头","code":"/**\r\n *\r\n * @title 多列表头\r\n * @parent 列渲染 Custom Render\r\n * @description columns[n] 可以内嵌 children,以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight,注:修改th的padding top和bottom置为0,否则会有影响\r\n * demo0402\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button} from \"tinper-bee\";\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst columns = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"Other\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"Address\",\r\n children: [\r\n {\r\n title: \"Street\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"Block\",\r\n children: [\r\n {\r\n title: \"Building\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"Door No.\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: 100\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Company\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"Company Address\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"Company Name\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Gender\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 60,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\",\r\n age: i + 1,\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 2035,\r\n companyAddress: \"Lake Street 42\",\r\n companyName: \"SoftLake Co\",\r\n gender: \"M\"\r\n });\r\n}\r\n\r\nclass Demo32 extends Component {\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" columns[n] 可以内嵌 children,以渲染分组表头。","scss_code":".demo32{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}"},{"example":,"title":" 数据关联","code":"/**\n*\n* @title 数据关联\n* @parent 列渲染 Custom Render\n* @description 数据行关联自定义菜单显示\n* demo0404\n*/\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/newMultiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst { Item } = Menu;\n\nconst data = [\n { \n num:\"NU0391025\", \n name: \"aa\",\n sex: \"男\",\n dept:'财务二科', \n rank:\"T1\",\n year:\"1\",\n seniority:\"1\",\n key: \"1\"\n }, \n { \n num:\"NU0391026\", \n name: \"bb\",\n sex: \"女\",\n dept:'财务一科', \n rank:\"M1\",\n year:\"1\",\n seniority:\"1\",\n key: \"2\"\n },\n { \n num:\"NU0391027\", \n name: \"dd\",\n sex: \"女\",\n dept:'财务一科', \n rank:\"T2\",\n year:\"2\",\n seniority:\"2\",\n key: \"3\"\n }\n];\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\n\nclass Demo33 extends Component {\n constructor(props) {\n super(props);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onSelect = (item) => {\n console.log(item);\n }\n render() {\n const menu1 = (\n );\n let columns = [\n { title: \"关联\",dataIndex: \"link\",key: \"link\",width: 80, \n render: (text, record, index) => {\n return (\n \n \n \n )\n }\n },\n { title: \"员工编号\",dataIndex: \"num\",key: \"num\",width: 200 },\n { title: \"员工姓名\",dataIndex: \"name\",key: \"name\", width: 200},\n { title: \"员工性别\",dataIndex: \"sex\",key: \"sex\",width: 200 },\n { title: \"部门\",dataIndex: \"dept\",key: \"dept\",width: 200},\n { title: \"职级\",dataIndex: \"rank\",key: \"rank\",width: 200},\n { title: \"工龄\",dataIndex: \"year\",key: \"year\",width: 200},\n { title: \"司龄\",dataIndex: \"seniority\",key: \"seniority\",width: 200}\n ];\n return \n }\n}\n\n","desc":" 数据行关联自定义菜单显示"},{"example":,"title":" 列合计(总计)","code":"/**\n *\n * @title 列合计(总计)\n * @parent 列渲染 Custom Render\n * @description 给需要计算合计的列(columns),设置sumCol值为true即可,支持动态设置数据源。\n * demo0405\n */\n\nimport React, { Component } from \"react\";\nimport {Checkbox} from \"tinper-bee\";\nimport { Table } from 'tinper-bee'; \nimport sum from \"tinper-bee/lib/sum.js\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\n \nlet ComplexTable = multiSelect(sum(Table), Checkbox);\nlet _sum = 0;\nconst columns = [\n {\n title: \"单据编号\",\n dataIndex: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"业务类型\",\n dataIndex: \"type\",\n key: \"type\",\n width: 200\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"仓库\",\n dataIndex: \"warehouse\",\n key: \"warehouse\",\n width: 80,\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 100,\n sumCol: true\n },\n {\n title: \"金额\",\n dataIndex: \"money\",\n key: \"money\",\n width: 100,\n sumCol: true\n }\n];\n\nfunction getData(){\n const data = [];\n for (let i = 0; i < 5; i++) {\n data.push({\n key: i,\n num: \"NU039100\"+i,\n date: \"2019-03-01\",\n type: \"普通采购\",\n supplier: \"gys\"+i,\n contact: \"Tom\",\n warehouse: \"普通仓\",\n total: i + Math.floor(Math.random()*10),\n money: 20 * Math.floor(Math.random()*10)\n });\n _sum += data[i].total;\n _sum += data[i].money;\n }\n return data;\n}\n\nclass Demo35 extends Component {\n \n constructor(props) {\n super(props);\n this.state = {\n data: getData(),\n sum:_sum\n };\n }\n\n render() {\n const {data} = this.state;\n return (\n \n );\n }\n}\n\n","desc":" 给需要计算合计的列(columns),设置sumCol值为true即可,支持动态设置数据源。"},{"example":,"title":" 行内编辑","code":"/**\n *\n * @title 行内编辑\n * @parent 编辑 Editor\n * @description 可以对行进行编辑的表格\n * demo0501\n */\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport { Select, Form, FormControl, Button, Icon, Tooltip } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleChange = value => {\n const { onChange, throwError } = this.props;\n if (value === \"\") {\n throwError && throwError(true);\n } else {\n throwError && throwError(false);\n }\n this.setState({ value });\n onChange && onChange(value);\n };\n\n render() {\n const { editable, required, colName } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (value === \"\") cls += \" verify-cell\";\n return editable ? (\n \n
\n \n \n {value === \"\" ? (\n {\"请输入\" + colName}
}\n >\n
\n \n ) : null}\n \n
\n \n ) : (\n value || \" \"\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = value => {\n this.setState({ value });\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n const { editable } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n return editable ? (\n \n
\n \n
\n
\n ) : (\n value || \" \"\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n this.props.onChange && this.props.onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { editable, required } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n return editable ? (\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n ),\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n {getFieldError(\"refValue\")}\n \n ) : (\n value.name || \" \"\n );\n }\n }\n);\n\nlet dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0501 extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n dataSource: dataSource,\n editingRowsMap: {},\n currentIndex: null,\n errorEditFlag: false\n };\n\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100,\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"部门\",\n dataIndex: \"d\",\n key: \"d\",\n width: 215,\n render: (text, record, index) => (\n \n )\n },\n // 只是用来占位占宽度的\n {\n key: \"placeholder\"\n }\n ];\n\n this.state = {\n dataSource: dataSource,\n editingRowsMap: {},\n currentIndex: null,\n errorEditFlag: false\n };\n\n this.dataBuffer = {};\n }\n\n edit = index => () => {\n if (index === null) return;\n let editingRowsMap = { ...this.state.editingRowsMap };\n editingRowsMap[index] = index.toString();\n // 最好使用深复制\n this.dataBuffer[index] = { ...this.state.dataSource[index] };\n this.setState({ editingRowsMap });\n };\n\n abortEdit = index => () => {\n let editingRowsMap = { ...this.state.editingRowsMap };\n delete editingRowsMap[index];\n delete this.dataBuffer[index];\n this.setState({ editingRowsMap });\n };\n\n delete = index => () => {\n if (index === null) return;\n let { dataSource } = this.state;\n dataSource.splice(index,1);\n this.setState({\n dataSource:dataSource\n });\n }\n\n commitChange = index => () => {\n if (this.state.errorEditFlag) return;\n let editingRowsMap = { ...this.state.editingRowsMap };\n delete editingRowsMap[index];\n let dataSource = [...this.state.dataSource];\n dataSource[index] = { ...this.dataBuffer[index] };\n this.setState({ editingRowsMap, dataSource });\n };\n\n onCellChange = (index, key) => value => {\n this.dataBuffer[index][key] = value;\n };\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n handleRowHover = (index, record) => {\n this.currentRecord = record;\n this.setState({ currentIndex: index });\n };\n\n renderRowHover = () => {\n const { currentIndex } = this.state;\n return this.state.editingRowsMap[currentIndex] ? (\n \n \n \n
\n ) : (\n \n \n \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":" 可以对行进行编辑的表格","scss_code":".demo0501 .u-table {\n .u-row-hover {\n .opt-btns,.cancel-btns {\n button {\n margin: 0;\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n }\n\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}"},{"example":,"title":" 单元格编辑","code":"/**\n *\n * @title 单元格编辑\n * @parent 编辑 Editor\n * @description 可以对单元格进行编辑的表格,示例中给出输入框、下拉框、参照的编辑模式,以及两类校验。(通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格)\n * demo0502\n */\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport { Icon, Select, Tooltip, Form } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: this.props.value,\n editable: false\n };\n this.editWarp = React.createRef();\n }\n\n commitChange = () => {\n if (this.state.value === \"\") return;\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n edit = () => {\n this.setState({ editable: true });\n };\n\n handleKeydown = event => {\n if (event.keyCode == 13) {\n this.commitChange();\n }\n };\n\n handleChange = e => {\n if (e.target.value === \"\") this.editWarp.className += \" verify-cell\";\n this.setState({ value: e.target.value });\n };\n\n render() {\n const { value, editable } = this.state;\n return (\n \n {editable ? (\n
this.editWarp = el} className=\"editable-cell-input-wrapper\">\n \n {value === \"\" ? (\n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n
\n \n ) : null}\n
\n ) : (\n \n {value || \" \"}\n
\n )}\n \n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: this.props.value,\n editable: false\n };\n }\n\n handleSelect = value => {\n this.setState({ value });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n edit = () => {\n this.setState({ editable: true });\n };\n\n render() {\n const { value, editable } = this.state;\n return (\n \n {editable ? (\n
\n \n
\n ) : (\n
\n {value || \" \"}\n
\n )}\n
\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n value: this.props.value.d,\n editable: false\n };\n this.refWarp = React.createRef();\n }\n\n edit = () => {\n this.setState({ editable: true }, () => this.refWarp.focus());\n };\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n onRefBlur = e => {\n // 消除点击子组件,父组件先失焦再聚焦的事件触发过程带来的副作用\n const __REF_CONTENT__ = document.querySelector(\"div.ref-core-modal\");\n if (!__REF_CONTENT__ && e.target === this.refWarp) {\n this.commitChange();\n }\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, editable } = this.state;\n return editable ? (\n (this.refWarp = el)}\n className=\"editable-cell-input-wrapper\"\n tabIndex={-1}\n onBlur={this.onRefBlur}\n >\n \n \n {getFieldError(\"code1\")}\n \n
\n ) : (\n \n {value.name || \" \"}\n
\n );\n }\n }\n);\n\nconst dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0502 extends Component {\n constructor(props, context) {\n super(props);\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100,\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"部门\",\n dataIndex: \"d\",\n key: \"d\",\n width: 215,\n render: (text, record, index) => (\n \n )\n },\n {\n key: \"placeholder\"\n }\n ];\n\n this.state = {\n dataSource: dataSource\n };\n }\n\n onCellChange = (index, key) => {\n return value => {\n const { dataSource } = this.state;\n dataSource[index][key] = value;\n this.setState({ dataSource }, () => console.dir(this.state.dataSource));\n };\n };\n\n render() {\n return (\n \n
\n \n );\n }\n}\n\n\n","desc":" 可以对单元格进行编辑的表格,示例中给出输入框、下拉框、参照的编辑模式,以及两类校验。(通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格)","scss_code":".u-editable-table .u-table {\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n padding-left: 5px;\n font-size: 12px;\n\n &.error {\n border-color: #F44336;\n }\n }\n }\n\n .editable-cell {\n height: 30px;\n }\n\n &-hover {\n .editable-cell-text-wrapper {\n line-height: 19px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .editable-cell-input-wrapper {\n padding-right: 0;\n .ref-input-wrap {\n width: auto !important;\n height: 30px;\n .u-input-group{\n display: inline-block;\n }\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .require {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}"},{"example":,"title":" 弹框(表单)编辑","code":"/**\n *\n * @title 弹框(表单)编辑\n * @parent 编辑 Editor\n * @description 以弹框形式以对行进行编辑的表格\n * demo0503\n */\n\nimport React, { Component, PureComponent } from \"react\";\nimport { Table } from 'tinper-bee';\nimport {\n Select, Form, FormControl, Button, Icon,\n Tooltip, Modal, FormGroup, Label, Row, Col\n} from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nfunction handleFormValueChange(WarpCompProps, field, allFields) {\n const { onChange, throwError } = WarpCompProps;\n if (field.value === \"\") return throwError && throwError(true);\n throwError && throwError(false);\n onChange && onChange(field.value);\n}\n\nconst StringEditCell = Form.createForm({\n onValuesChange: handleFormValueChange\n})(PureStringEditCell);\n\nfunction PureStringEditCell(props) {\n const { getFieldProps, getFieldError } = props.form;\n const { value, required } = props;\n let cls = \"editable-cell\";\n if (required) cls += \" required\";\n return (\n \n \n {\"请输入\" + props.colName}\n
\n }\n >\n \n \n )\n }\n ]\n })}\n />\n {getFieldError(\"value\")}\n \n );\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends PureComponent {\n constructor(props, context) {\n super(props);\n }\n\n handleSelect = value => {\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n return (\n \n \n
\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends PureComponent {\n constructor(props, context) {\n super(props);\n }\n\n handleSelect = values => {\n const { form, throwError, onChange } = this.props\n if (form.getFieldError(\"refValue\")) return throwError && throwError(true);\n throwError && throwError(false);\n onChange && onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, required } = this.props;\n let cls = \"editable-cell\";\n if (required) cls += \" required\";\n return (\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n ),\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n {getFieldError(\"refValue\")}\n \n );\n }\n }\n);\n\nclass EditModal extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n data: this.props.data,\n errorEditFlag: false\n };\n\n // 属性名对应 columns 属性中的 key 值\n this.renderElm = {\n b: (record, index) => (\n \n ),\n\n c: (record, index) => (\n \n ),\n d: (record, index) => (\n \n )\n }\n }\n\n onFieldChange = field => value => {\n let data = { ...this.state.data };\n data[field] = value;\n this.setState({ data });\n }\n\n submitChange = () => {\n if (this.state.errorEditFlag) return;\n const { onSubmit, onHide, currentIndex } = this.props;\n onSubmit && onSubmit(this.state.data, currentIndex);\n onHide && onHide();\n }\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n render() {\n const { show, onHide, columns, currentIndex } = this.props;\n const { data } = this.state;\n return (\n \n \n 编辑行\n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nlet dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0503 extends Component {\n constructor(props, context) {\n super(props);\n // 编辑态下每个单元格对应的编辑模式组件写在 EditModal 组件中,以 key 值对应\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\"\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: 215,\n render: (text, record, index) => record.d.name\n }\n ];\n\n this.state = {\n dataSource: dataSource,\n isEditing: false,\n currentIndex: null\n };\n }\n\n edit = () => {\n if (this.state.currentIndex === null) return;\n this.setState({ isEditing: true });\n };\n\n abortEdit = () => {\n this.setState({ isEditing: false });\n };\n\n commitChange = (editedRowData, rowIndex) => {\n console.log(editedRowData)\n console.log(rowIndex)\n let dataSource = [...this.state.dataSource];\n dataSource[rowIndex] = editedRowData;\n this.setState({ dataSource });\n };\n\n handleRowHover = (index, record) => {\n this.setState({ currentIndex: index });\n };\n\n hideEditModal = () => {\n this.setState({ isEditing: false });\n }\n\n renderRowHover = () => {\n return (\n \n \n
\n );\n };\n\n\n render() {\n const { dataSource, isEditing, currentIndex } = this.state;\n const columns = this.columns;\n return (\n \n
\n {\n isEditing ? (\n
\n ) : null\n }\n
\n );\n }\n}\n\n\n","desc":" 以弹框形式以对行进行编辑的表格","scss_code":".demo0503-m-b {\n\n &.u-modal .u-modal-body {\n padding: 16px 0;\n background: #f7f9fb;\n }\n\n .u-form-group {\n overflow: hidden;\n }\n\n .u-form-control {\n font-size: 12px;\n }\n\n .editable-cell {\n display: block;\n float: left;\n width: 265px;\n padding-right: 25px;\n }\n\n .ref-input-wrap {\n width: 240px !important;\n }\n\n .u-label {\n display: block;\n float: left;\n text-align: right;\n width: 110px;\n box-sizing: border-box;\n padding-right: 10px;\n font-size: 12px;\n height: 32px;\n line-height: 32px;\n .mast {\n padding: 0;\n color: red;\n }\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n z-index: 9999 !important;\n\n .tp-content {\n color: #F44336;\n }\n}\n.ref-core-button .u-button:first-child{\n margin-right: 8px;\n}"},{"example":,"title":" 全表格编辑","code":"/**\n *\n * @title 全表格编辑\n * @parent 编辑 Editor\n * @description 以行内编辑形式对全表数据进行编辑\n * demo0505\n */\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport { Select, Form, FormControl, Button, Icon, Tooltip } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleChange = value => {\n const { onChange, throwError } = this.props;\n if (value === \"\") {\n throwError && throwError(true);\n } else {\n throwError && throwError(false);\n }\n this.setState({ value });\n onChange && onChange(value);\n };\n\n render() {\n const { editable, required, colName, isEdited } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (value === \"\") cls += \" verify-cell\";\n if (isEdited) cls += \" edited\";\n return editable ? (\n \n
\n \n \n {value === \"\" ? (\n {\"请输入\" + colName}
}\n >\n
\n \n ) : null}\n \n
\n \n ) : (\n value || \" \"\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = value => {\n this.setState({ value });\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n const { editable, isEdited } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (isEdited) cls += \" edited\";\n return editable ? (\n \n
\n \n
\n
\n ) : (\n value || \" \"\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n this.props.onChange && this.props.onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { editable, required, isEdited } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n if (isEdited) cls += \" edited\";\n return editable ? (\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n ),\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n {getFieldError(\"refValue\")}\n \n ) : (\n value.name || \" \"\n );\n }\n }\n);\n\nlet dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0505 extends Component {\n constructor(props, context) {\n super(props);\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100,\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"部门\",\n dataIndex: \"d\",\n key: \"d\",\n width: 215,\n render: (text, record, index) => (\n \n )\n },\n // 只是用来占位占宽度的\n {\n key: \"placeholder\"\n }\n ];\n\n // 用于记录数据是否被修改\n dataSource.forEach(item => (item.isEdited = {}));\n this.state = {\n dataSource: dataSource,\n isEditingAll: false,\n currentIndex: null,\n errorEditFlag: false\n };\n\n // 用于记录编辑前数据\n this.dataBuffer = [];\n }\n\n edit = () => {\n this.dataBuffer = [];\n // 最好使用深复制\n this.state.dataSource.forEach((item, index) => {\n this.dataBuffer.push({ ...item });\n });\n this.setState({ isEditingAll: true });\n };\n\n abortEdit = () => {\n let originData = [...this.state.dataSource];\n originData.forEach(item => (item.isEdited = {}));\n this.setState({\n isEditingAll: false,\n dataSource: originData\n });\n };\n\n commitChange = () => {\n if (this.state.errorEditFlag) return;\n const newData = this.dataBuffer.map(item => {\n return Object.assign({}, item, { isEdited: {} });\n });\n this.setState({ isEditingAll: false, dataSource: newData });\n };\n\n onCellChange = (index, key) => value => {\n this.dataBuffer[index][key] = value;\n this.dataBuffer[index].isEdited[key] = true;\n };\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n render() {\n const { dataSource, isEditingAll } = this.state;\n const columns = this.columns;\n return (\n \n
\n {isEditingAll ? (\n \n \n \n \n ) : (\n \n )}\n
\n
\n
\n );\n }\n}\n\n\n","desc":" 以行内编辑形式对全表数据进行编辑","scss_code":".demo0505 {\n\n .toolbar-btns {\n margin-bottom: 8px;\n\n .u-button {\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n\n .u-table {\n .u-row-select {\n background-color: #FFF7E7;\n }\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .edited::after {\n content: \" \";\n position: absolute;\n z-index: 999;\n top: 0;\n left: 0;\n border-width: 5px;\n border-style: solid;\n border-color: #f44336 transparent transparent #f44336;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}"},{"example":,"title":" 左侧固定列","code":"/**\n*\n* @title 左侧固定列\n* @parent 列操作-锁定 Fixed\n* @description 固定列到表格的左侧\n* demo0601\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\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: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\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\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\n];\n\nclass Demo51 extends Component {\n render() {\n return ;\n }\n}\n\n","desc":" 固定列到表格的左侧"},{"example":,"title":" 右侧固定列","code":"/**\n*\n* @title 右侧固定列\n* @parent 列操作-锁定 Fixed\n* @description 固定列到表格的右侧\n* demo0602\n*/\n\n\n\nimport React, { Component } from 'react';\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n render(text, record, index){return index + 1}\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: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\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\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\n];\n\nclass Demo52 extends Component {\n render() {\n return ;\n }\n}\n\n","desc":" 固定列到表格的右侧"},{"example":,"title":" 动态设置列锁定、解除锁定","code":"/**\n*\n* @title 动态设置列锁定、解除锁定\n* @parent 列操作-锁定 Fixed\n* @description 动态设置columns中数据的fixed属性值【fixed: \"left\",fixed: \"right\"】。\n* demo0603\n*/\nimport React, { Component } from 'react';\nimport {Icon,Menu,Dropdown} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst { Item } = Menu;\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 150\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: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\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\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\n];\n \nclass Demo24 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n columns:columns\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}\n\n","desc":" 动态设置columns中数据的fixed属性值【fixed: \"left\",fixed: \"right\"】。","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":,"title":" 按条件、值过滤","code":"/**\n*\n* @title 按条件、值过滤\n* @parent 列操作-过滤 Filter\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。\n* demo0701\n*/\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\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":,"title":" 复杂表格中行过滤","code":"/**\n*\n* @title 复杂表格中行过滤\n* @parent 列操作-过滤 Filter\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n* demo0702\n*/\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox} 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 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 onSelect = (item) => {\n console.log(item);\n }\n\n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n let columns27 = [\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":,"title":" 列过滤面板","code":"/**\n*\n* @title 列过滤面板\n* @parent 列操作-隐藏 Hide\n* @description 点击表头右侧按钮,设置显示或隐藏表格列。可以自定义设置显示某列,通过ifshow属性控制,默认值为true(显示表格所有列)。afterFilter方法为列过滤后触发的回调函数。\n* demo0802\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon,Popover} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\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 columns: [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 150\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 }\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 return ;\n }\n}\n\nDemo21.defaultProps = defaultProps21;\n","desc":" 点击表头右侧按钮,设置显示或隐藏表格列。可以自定义设置显示某列,通过ifshow属性控制,默认值为true(显示表格所有列)。afterFilter方法为列过滤后触发的回调函数。"},{"example":,"title":" 列排序","code":"/**\n* @title 列排序\n* @parent 列操作-排序 Sort\n* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称\n* demo0901\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: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 150,\n sorter: (a, b) => a.total - b.total\n }\n];\n\nconst data11 = [\n { num: \"NU0391001\", date: \"2019-03-01\", supplier: 'xx供应商',contact:'Tom', total:30 ,key: \"1\" },\n { num: \"NU0391002\", date: \"2018-11-02\", supplier: 'yy供应商',contact:'Jack', total:41 ,key: \"2\" },\n { num: \"NU0391003\", date: \"2019-05-03\", supplier: 'zz供应商',contact:'Jane', total:25 ,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":,"title":" 后端列排序","code":"/**\n* @title 后端列排序\n* @parent 列操作-排序 Sort\n* @description 可在控制台中查看序列化后的参数字符串,将参数传递给后端即可进行列排序\n* demo0902\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\n// const 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\n// const 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// ];\nconst columns11 = [\n {\n title: \"单据编号\",\n dataIndex: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 150,\n sorter: (a, b) => a.total - b.total\n },\n {\n title: \"金额\",\n dataIndex: \"money\",\n key: \"money\",\n width: 100,\n sorter: (a, b) => a.money - b.money\n }\n];\n\nconst data11 = [\n { num: \"NU0391001\", date: \"2019-03-01\", supplier: 'xx供应商',contact:'Tom', total:30 ,money: 100,key: \"1\" },\n { num: \"NU0391002\", date: \"2018-11-02\", supplier: 'yy供应商',contact:'Jack', total:41 ,money: 50,key: \"2\" },\n { num: \"NU0391003\", date: \"2019-05-03\", supplier: 'zz供应商',contact:'Jane', total:25 ,money: 200,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":,"title":" 多列排序","code":"/**\n *\n * @title 多列排序\n * @parent 列操作-排序 Sort\n * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。\n * demo0903\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: \"NU0391001\", b: 675, c: 30, d: \"xx供应商\",e:100, key: \"2\" },\n { a: \"NU0391002\", b: 43, c: 41, d: \"yy供应商\",e:90, key: \"1\" },\n { a: \"NU0391003\", b: 43, c: 81, d: \"zz供应商\", e:120,key: \"4\" },\n { a: \"NU0391004\", b: 43, c: 81, d: \"aa供应商\", e:130,key: \"5\" },\n { a: \"NU0391005\", b: 153, c: 25, d: \"bb供应商\",e:90, key: \"3\" }\n];\n\n\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\nlet ComplexTable = multiSelect(sort(sum(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":,"title":" 拖拽改变列顺序","code":"/**\n*\n* @title 拖拽改变列顺序\n* @parent 列操作-拖拽 Drag\n* @description 点击选择表头并左右拖拽,可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意:固定列不可以交换。\n* demo1001\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 columns = [\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 data = [\n { a: \"NU0391001\", b: \"2019-03-01\", c: 'xx供应商',d:'Tom', key: \"2\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: 'yy供应商',d:'Jack', key: \"1\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: 'zz供应商',d:'Jane', 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 console.log(\"--拖拽交换列后触发事件\");\n console.log(\"event.target:\",event.target);\n console.log(\"data:\",data);\n console.log(\"拖拽完成后的columns:\",columns);\n }}\n />;\n }\n}\n\nDemo22.defaultProps = defaultProps22;\n","desc":" 点击选择表头并左右拖拽,可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意:固定列不可以交换。"},{"example":,"title":" 拖拽改变列宽度","code":"/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description onDropBorder方法为调整列宽后触发的回调函数。注:不支持tree结构的表头、合并表头的table。\n* demo1002\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 }, \n {\n title: \"联系人\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"NU0391001\", b: \"2019-03-01\", c: \"xx供应商\",d:'Tom', key: \"2\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: \"yy供应商\",d:'Jack', key: \"1\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: \"zz供应商\",d:'Jane', 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":" onDropBorder方法为调整列宽后触发的回调函数。注:不支持tree结构的表头、合并表头的table。"},{"example":,"title":" 嵌套子表格","code":"/**\n*\n* @title 嵌套子表格\n* @parent 扩展行 Expanded Row\n* @description 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。\n* demo1101\n*/\n\nimport React, { Component } from \"react\";\nimport { Popconfirm,Icon } from 'tinper-bee';\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 \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 \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: \"NU0391001\", b: \"2019-03-01\", c: \"xx供应商\", d: \"操作\", key: \"1\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: \"yy供应商\", d: \"操作\", key: \"2\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: \"zz供应商\", 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: \"NU0391056\", b: \"2019-03-01\", c: \"gys1\", d: \"操作\", key: \"1\" },\n { a: \"NU0391057\", b: \"2018-11-02\", c: \"gys2\", d: \"操作\", key: \"2\" },\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"NU0391079\", b: \"2019-04-17\", c: \"gys5\", d: \"操作\", key: \"3\" },\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 expandedIcon={}\n />\n );\n }\n}\n\n\n","desc":" 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。"},{"example":,"title":" 树型表格数据展示","code":"/**\n*\n* @title 树型表格数据展示\n* @parent 扩展行 Expanded Row\n* @description 通过在data中配置children数据,来自动生成树形表格\n* demo1102\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns4 = [\n {\n title: \"订单编号\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"供应商\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"NU0391001\",\n age: \"2019-03-01\",\n address: \"供应商1\",\n children: [\n {\n key: 11,\n name: \"NU0391002\",\n age: \"2019-03-02\",\n address: \"供应商2\"\n },\n {\n key: 12,\n name: \"NU0391003\",\n age: \"2019-03-03\",\n address: \"供应商3\",\n children: [\n {\n key: 121,\n name: \"NU0391004\",\n age: \"2019-03-04\",\n address: \"供应商4\"\n }\n ]\n },\n {\n key: 13,\n name: \"NU0391005\",\n age: \"2019-03-05\",\n address: \"供应商5\",\n children: [\n {\n key: 131,\n name: \"NU0391006\",\n age: \"2019-03-06\",\n address: \"供应商6\",\n children: [\n {\n key: 1311,\n name: \"NU0391007\",\n age: \"2019-03-07\",\n address: \"供应商7\"\n },\n {\n key: 1312,\n name: \"NU0391008\",\n age: \"2019-03-08\",\n address: \"供应商8\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"NU0391009\",\n age: \"2019-03-09\",\n address: \"供应商9\"\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":,"title":" 自定义表格标题、表尾、选中行颜色","code":"/**\r\n*\r\n* @title 自定义表格标题、表尾、选中行颜色\r\n* @parent 扩展行 Expanded Row\r\n* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。\r\n* demo1103\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport {Button,Tooltip,} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150, className: \"rowClassName\"},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo26 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n {\r\n if (this.state.selectedRowIndex == index) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n onRowClick={(record,index,indent)=>{\r\n this.setState({ \r\n selectedRowIndex: index\r\n });\r\n }}\r\n title={currentData => 员工信息统计表
}\r\n footer={currentData => 合计: 共{data.length}条数据
}\r\n /> \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。"},{"example":,"title":" 紧凑型、宽松型","code":"/**\n*\n* @title 紧凑型、宽松型\n* @parent 扩展行 Expanded Row\n* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。\n* demo1105\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip,Tag} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"订单编号\", dataIndex: \"orderNum\", key: \"orderNum\", width: 100 },\n { title: \"采购组织\", dataIndex: \"org\", key: \"org\", width: 200 },\n { title: \"供应商\", dataIndex: \"supplier\", key: \"supplier\", width: 100 },\n { title: \"订单日期\", dataIndex: \"orderDate\", key: \"orderDate\", width: 150 },\n { title: \"总数量\", dataIndex: \"quantity\", key: \"quantity\", width: 100 },\n { title: \"单据状态\", dataIndex: \"status\", key: \"status\", width: 100, \n render: (text, record, index) => {\n return (\n {text.desc}\n );\n }},\n { title: \"提交人\", dataIndex: \"submitter\", key: \"submitter\", width: 100 },\n { title: \"单位\", dataIndex: \"unit\", key: \"unit\", width: 100 },\n { title: \"总税价合计\", dataIndex: \"sum\", key: \"sum\", width: 100 },\n];\n\nconst data = [\n { \n orderNum: \"NU0391025\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年03月18日', \n quantity: '100.00', \n status: {type:'success' ,desc:'正常'}, \n submitter: '小张', \n unit: 'pc', \n sum:'8,487.00', \n key: \"1\" \n },\n { \n orderNum: \"NU0391026\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年02月05日', \n quantity: '91.00', \n status: {type:'danger' ,desc:'异常'}, \n submitter: '小红', \n unit: 'pc', \n sum:'675.00', \n key: \"2\" \n },\n { \n orderNum: \"NU0391027\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年07月01日', \n quantity: '98.00', \n status: {type:'success' ,desc:'正常'}, \n submitter: '小李', \n unit: 'pc', \n sum:'1,531.00', \n key: \"3\" \n }\n];\n\nclass Demo1 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。"},{"example":,"title":" 自定义行高","code":"/**\n*\n* @title 自定义行高\n* @parent 扩展行 Expanded Row\n* @description 设置`height`属性自定义表体行高,设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。\n* demo1106\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150, className: \"rowClassName\"},\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", 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 handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=()=>{\n return
\n }\n\n render() {\n return (\n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n","desc":" 设置`height`属性自定义表体行高,设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。"},{"example":,"title":" 图片在表格中的展示","code":"/**\n*\n* @title 图片在表格中的展示\n* @parent 扩展行 Expanded Row\n* @description 根据图片高度自动撑开行高,可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注:如果图片在固定列中,可以使用heightConsistent属性,当此属性为true,就不会出现错行问题\n* demo1107\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80,\n render(text, record, index) {\n return index + 1;\n }\n },\n {\n title: \"图样\",\n dataIndex: \"picture\",\n key: \"picture\",\n render(text, record, index) {\n return \n }\n },\n {\n title: \"组织部门\",\n dataIndex: \"orgDept\",\n key: \"orgDept\",\n width: 100,\n },\n {\n title: \"设施管理部门\",\n dataIndex: \"facilityManageUnit\",\n key: \"facilityManageUnit\",\n width: 150,\n },\n {\n title: \"案卷编号\",\n dataIndex: \"docketnum\",\n key: \"docketnum\",\n width: 100,\n },\n {\n title: \"数量\",\n dataIndex: \"num\",\n key: \"num\",\n width: 100,\n },\n {\n title: \"首次发现时间\",\n dataIndex: \"discoveryTime\",\n key: \"discoveryTime\",\n width: 150,\n },\n {\n title: \"实际修复时间\",\n dataIndex: \"repairTime\",\n key: \"repairTime\",\n width: 150,\n }\n];\n\nconst data = [\n { key: \"1\", orgDept: \"组织1\", facilityManageUnit: \"部门1\", docketnum: 41, num: \"1\", discoveryTime: \"2018-10-17\", repairTime: \"2018-10-30\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg\"},\n { key: \"2\", orgDept: \"组织2\", facilityManageUnit: \"部门2\", docketnum: 30, num: \"2\", discoveryTime: \"2019-01-15\", repairTime: \"2019-01-20\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg\"},\n { key: \"3\", orgDept: \"组织3\", facilityManageUnit: \"部门3\", docketnum: 35, num: \"3\", discoveryTime: \"2019-04-10\", repairTime: \"2019-04-17\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg\"}\n];\n\nclass Demo1107 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 根据图片高度自动撑开行高,可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注:如果图片在固定列中,可以使用heightConsistent属性,当此属性为true,就不会出现错行问题"},{"example":,"title":" 自定义行、列合并","code":"/**\n*\n* @title 自定义行、列合并\n* @parent 扩展行 Expanded Row\n* @description 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。\n* demo1108\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: '姓名',\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: '年龄',\n key: \"age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: '联系方式',\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: '手机号',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: '家庭住址',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\n\n\nconst columns1 = [{\n title: '姓名',\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: '年龄',\n key: \"age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: '联系方式',\n colSpan: 2,\n key: \"tel\",\n dataIndex: 'tel',\n render: renderContent\n}, {\n title: '手机号',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: '家庭住址',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\nconst data = [{\n key: '1',\n name: '小红',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: '北京海淀',\n}, {\n key: '2',\n name: '小明',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: '河北张家口',\n}, {\n key: '3',\n name: '张三',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '浙江杭州',\n}, {\n key: '4',\n name: '李四',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '广州深圳',\n}, {\n key: '5',\n name: '王五',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '北京昌平',\n}];\n\nclass Demo15 extends Component {\n constructor(props){\n super(props);\n this.state={\n colFlag:false\n }\n }\n onChange=()=>{\n const colFlag = this.state.colFlag;\n this.setState({\n colFlag:!colFlag\n })\n }\n render() {\n let cols = this.state.colFlag?columns:columns1;\n return (\n \n \n );\n }\n}\n\n\n\n","desc":" 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。"},{"example":,"title":" 拖拽改变行顺序","code":"/**\n*\n* @title 拖拽改变行顺序\n* @parent 行操作-拖拽\n* @description `rowDraggAble`参数设置是否使用行交换顺序功能,`onDropRow` 是拖拽行后的回调函数。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* Demo1201\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:200 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1001\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"1002\" },\n { a: \"ASVAL_201903120001\", b: \"小红\", c: \"女\", d: \"财务四科\", e: \"T3\", key: \"1003\" },\n { a: \"ASVAL_201903120002\", b: \"小姚\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"1004\" },\n { a: \"ASVAL_201903120003\", b: \"小岳\", c: \"男\", d: \"财务五科\", e: \"T2\", key: \"1005\" },\n { a: \"ASVAL_201903120004\", b: \"小王\", c: \"男\", d: \"财务一科\", e: \"T5\", key: \"1006\" },\n { a: \"ASVAL_201903120005\", b: \"小绍\", c: \"男\", d: \"财务七科\", e: \"T2\", key: \"1007\" },\n { a: \"ASVAL_201903120006\", b: \"小郭\", c: \"男\", d: \"财务一科\", e: \"T3\", key: \"1008\" },\n { a: \"ASVAL_201903120007\", b: \"小杨\", c: \"女\", d: \"财务四科\", e: \"T2\", key: \"1009\" }\n];\n\nclass Demo1201 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n /**\n * 行拖拽结束时触发\n * @param data 拖拽改变顺序后的新data数组\n * @param record 拖拽行的数据\n */\n onDropRow = (data, record) => {\n console.log('重排序后的data: ', data);\n console.log('拖拽的行数据: ', record);\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" `rowDraggAble`参数设置是否使用行交换顺序功能,`onDropRow` 是拖拽行后的回调函数。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。"},{"example":,"title":" 多选功能","code":"/**\r\n*\r\n* @title 多选功能\r\n* @parent 行操作-选择\r\n* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数,返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中,添加_disabled参数可禁止选择当前数据。\r\n* demo1301\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport {Checkbox} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\",_checked:true },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\",_checked:false },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\",_checked:false },\r\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\",_disabled:true },\r\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\",_checked:false}\r\n];\r\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\r\nlet MultiSelectTable = multiSelect(Table, Checkbox);\r\n\r\nclass Demo12 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data\r\n };\r\n }\r\n /**\r\n *@param selectedList:当前选中的行数据\r\n *@param record 当前操作行数据\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (selectedList,record,index) => {\r\n console.log(\"selectedList\", selectedList,\"index\",index);\r\n // 如果在回调中增加setState逻辑,需要同步data中的_checked属性。即下面的代码\r\n // const allChecked = selectedList.length == 0?false:true;\r\n // record为undefind则为全选或者全不选\r\n // if(!record){\r\n // data12.forEach(item=>{\r\n // item._checked = allChecked;\r\n // })\r\n // }else{\r\n // data12[index]['_checked'] = record._checked;\r\n // } \r\n\r\n \r\n };\r\n \r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n return (\r\n {\r\n if (record._checked) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n );\r\n }\r\n}\r\n\r\n","desc":" 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数,返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中,添加_disabled参数可禁止选择当前数据。"},{"example":,"title":" 单选功能","code":"/**\r\n*\r\n* @title 单选功能\r\n* @parent 行操作-选择\r\n* @description 表格支持单选行操作,可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。\r\n* Demo1302\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Radio } from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport singleSelect from \"tinper-bee/lib/singleSelect.js\";;\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300 },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n ];\r\n \r\n const data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" },\r\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\r\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" }\r\n ];\r\n\r\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\r\nlet SingleSelectTable = singleSelect(Table, Radio);\r\n\r\nclass Demo1302 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0,\r\n }\r\n }\r\n\r\n /**\r\n *@param selected 当前选中的行数据(当前操作行数据)\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (record,index) => {\r\n console.log(\"record\", record, \"index\",index);\r\n\r\n this.setState({\r\n selectedRowIndex:index\r\n })\r\n };\r\n\r\n render() {\r\n let {selectedRowIndex} = this.state;\r\n\r\n return (\r\n {\r\n if (index === selectedRowIndex) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}\r\n /> \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 表格支持单选行操作,可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。"},{"example":,"title":" 万行以上数据渲染","code":"/**\n*\n* @title 万行以上数据渲染\n* @parent 无限滚动 Infinite-scroll\n* @description 万行数据渲染\n* demo1401\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:'60',\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":,"title":" 嵌套子表格滚动加载","code":"/**\n*\n* @title 嵌套子表格滚动加载\n* @parent 无限滚动 Infinite-scroll\n* @description 通过expandedRowRender参数来实现子表格。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* demo1402\n*/\n\nimport React, { Component } from \"react\";\nimport {Popconfirm} from 'tinper-bee';\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 \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 \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 = [ ...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 );\n }\n}\n\n\n","desc":" 通过expandedRowRender参数来实现子表格。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。"},{"example":,"title":" 多功能表格滚动加载","code":"/**\n*\n* @title 多功能表格滚动加载\n* @parent 无限滚动 Infinite-scroll\n* @description\n* demo1403\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:'80',\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":,"title":" 层级树大数据场景","code":"/**\n* @title 层级树大数据场景\n* @parent 无限滚动 Infinite-scroll\n* @description\n* demo1404\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 = (expandedRowKeys)=>{\n console.log('expandedRowKeys',expandedRowKeys);\n }\n onExpand = (expandKeys)=>{\n console.log('expand---'+expandKeys);\n }\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n onExpandedRowsChange={this.onExpandedRowsChange}\n />\n\n \n );\n }\n}\n\n","desc":""},{"example":,"title":" 表格+分页","code":"/**\n * @title 表格+分页\n * @parent 分页 Pagination\n * @description 点击分页联动表格\n * demo1601\n */\n\nimport React, { Component } from \"react\";\nimport {Pagination} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\n];\n\nconst pageData = {\n 1: [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\n ],\n 2: [\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" },\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}"}]
class Demo extends Component {
diff --git a/dist/demo.css.map b/dist/demo.css.map
index dcb063a..4d66d31 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","../node_modules/tinper-bee-core/scss/minxin-themeColors.scss","../src/Table.scss","TableDemo.scss","demolist/Demo0104.scss","demolist/Demo0302.scss","demolist/Demo0402.scss","demolist/Demo0501.scss","demolist/Demo0502.scss","demolist/Demo0503.scss","demolist/Demo0505.scss","demolist/Demo0603.scss","demolist/Demo1601.scss"],"names":[],"mappings":"AAAA,iBAAiB;ACsXjB,eAAe;AAWf,iBAAiB;AAXjB,eAAe;AAWf,iBAAiB;AC3XjB;;IAEI;AAcJ;;IAEI;AACJ;EACE,mBAAkB;EAClB,UAAS;EACT,QAAO;EACP,SAAQ;EACR,gBCfmB;EDgBnB,eDYuB;ECXvB,mBAAkB,EACnB;;AAGD;;IAEI;AAEJ;EAGM,mBAAkB;EAClB,oBAAmB;EACnB,YAAW;EAEX,0BAAyB;EAGzB,YDiwCmB;EChwCnB,aDgwCmB;EC/vCnB,SD0wCiB;ECzwCjB,UD0wCkB;ECzwClB,mBD4wCsB;EC3wCtB,kBD2wCsB;EC1wCtB,mCAAkC;EAClC,sBAAqB;EAErB,wCAAuC;EACvC,mBAAkB;EAClB,kBDsvCmB,EC7uCpB;EA9BL;IAuBQ,YDovCiB,ECnvClB;EAxBP;IA0BQ,eA9DoB;IA+DpB,gBAAe;IACf,WAAU,EACX;;AA7BP;EAiCQ,mBD0vCuB;ECzvCvB,kBDyvCuB;ECxvCvB,YDyuCoB;ECxuCpB,aDwuCoB;ECvuCpB,kBDuuCoB,EChuCrB;EA5CP;IAuCU,YDquCkB,ECpuCnB;EAxCT;IA0CU,gBAAe,EAChB;;AA3CT;EAgDQ,mBDyuCwB;ECxuCxB,kBDwuCwB;ECvuCxB,YDwtCqB;ECvtCrB,aDutCqB;ECttCrB,kBDstCqB,EC/sCtB;EA3DP;IAsDU,YDotCmB,ECntCpB;EAvDT;IAyDU,gBAAe,EAChB;;AA1DT;EA+DQ,eDmrC8B,EChrC/B;;AAlEP;EAsEQ,eD6qCqB,EC1qCtB;;AAzEP;EA6EQ,eDuqC2B,ECpqC5B;;AAMP;EACE,mBAAkB;EAClB,OAAM;EACN,SAAQ;EACR,UAAS;EACT,QAAO;EACP,cAAa;EAGb,2CAAsC,EAIvC;EAbD;IAWI,gBAAe,EAChB;;AAGH;EACE;IAEE,iCAAgC,EAAA;EAGlC;IAEE,mCAAkC,EAAA;EAGpC;IAEE,mCAAkC,EAAA,EAAA;;AAItC;EAEI,mBAAkB;EAClB,SD6pCmB;EC5pCnB,UD6pCoB;EC5pCpB,kBDoqC0B;ECnqC1B,mBDoqC2B,EClnC5B;EAxDH;IAQM,0BAAyB;IACzB,WDipCiB;IChpCjB,aDipCmB;IChpCnB,mBAAkB;IAClB,YAAW;IAEX,0BAAyB;IACzB,sBAAqB,EACtB;EAhBL;IAkBM,kBDypC2B;ICxpC3B,mBDypC4B,ECppC7B;IAxBL;MAqBQ,WDuoCkB;MCtoClB,aDuoCoB,ECtoCrB;EAvBP;IA0BM,kBD6oC4B;IC5oC5B,mBD6oC4B,ECxoC7B;IAhCL;MA6BQ,WD2nCmB;MC1nCnB,aD2nCoB,EC1nCrB;EA/BP;IAoCQ,2ED4lC8D;IC3lC9D,0BDkmCU,ECjmCX;EAtCP;IAoCQ,2ED6lC8D;IC5lC9D,0BDmmCU,EClmCX;EAtCP;IAoCQ,2ED8lC8D;IC7lC9D,0BDomCU,ECnmCX;EAtCP;IAoCQ,2ED+lC8D;IC9lC9D,0BDqmCU,ECpmCX;EAtCP;IAoCQ,2EDgmC8D;IC/lC9D,0BDsmCU,ECrmCX;EAtCP;IA2CQ,0BDilC8B,EChlC/B;EA5CP;IAgDQ,0BD6kCqB,EC5kCtB;EAjDP;IAqDQ,0BDykC2B,ECxkC5B;;AAIP;EACE;IAEE,qBAAoB,EAAA;EAGtB;IAEE,uBAAsB,EAAA;EAGxB;IAEE,qBAAoB,EAAA,EAAA;;AE7MxB;EACE,gBApBmB;EAqBnB,eHiBuB;EGfvB,mBAAkB;EAClB,kBAvBgB;EAwBhB,iBAAgB,EAsoBjB;EAroBC;IAEE,mBAAkB,EACnB;EACD;IACE,mBAAkB,EAOnB;IANC;MACE,mBAAkB;MAClB,SAAQ;MACR,UAAS,EAEV;EAlBL;IAqBI,YAAW;IACX,0BAAyB;IACzB,iBAAgB,EACjB;EAxBH;IA4BI,kBA9ByB;IA+BzB,iBAAgB;IAEhB,kBAAiB,EAOlB;IAtCH;MAiCM,mBAAkB,EACnB;IAlCL;MAoCM,iBAAgB,EACjB;EArCL;IAyCI,4CAzD4D;IA0D5D,kBA5Dc,EAsEf;IApDH;MA4CM,eAAc,EAOf;MAnDL;QA8CQ,eAAc,EACf;MA/CP;QAiDQ,eAAc,EACf;EAlDP;IAuDM,iCA5DyB,EA6D1B;EAxDL;IA0DM,mBAAkB,EACnB;EA3DL;IAmEU,+BAA8B,EAC/B;EApET;IAwEM,eAAc,EAOf;IA/EL;MA0EQ,eAAc,EACf;IA3EP;MA6EQ,eAAc,EACf;EA9EP;IAkFI,+BH0G8D,EGzG/D;EAnFH;;IAuFI,kBAnGoB;IAoGpB,sBAAqB,EAUtB;IAlGH;;MA0FM,mBAAkB,EACnB;IA3FL;;MA6FM,kBAAiB,EAClB;IA9FL;;MAgGM,gBAAe,EAChB;EAEF;IAEG,iBAjHkB,EAkHnB;EAEF;IAEG,kBAtHkB,EAuHnB;EA3GL;IAiHQ,4BAA2B;IAC3B,+BAA8B,EAO/B;IAzHP;MAoHU,aAAY,EACb;IArHT;MAuHU,aAAY,EACb;EAIP;IACE,+BAAuD,EACxD;EAED;IACE,eAAc,EACf;EACA;IAEG,qCArJ0D;IAsJ1D,uBAAsB;IACtB,oBAAmB,EAEpB;EANF;IASK,iBAAgB,EACnB;EAVF;IAaK,gBAAgB,EACjB;EAdJ;IAkBG,4CArK0D;IAsK1D,uBAAsB,EACvB;EApBF;;IAuBG,2CA1K0D;IA2K1D,uBAAsB,EACvB;EAEF;IAGK,iBAAgB,EACjB;EAGL;IACE,iBAAgB;IAChB,+BHwxC2E;IGvxC3E,uBHwxC+D,EGvxChE;EAzKH;IA4KI,iBAxLoB,EAyLrB;EAED;IACE,iBAAgB;IAChB,mBAAkB,EACnB;EACD;IACE,oBAAmB;IACnB,oBAAmB,EACpB;EAEA;IACC,mBAAkB,EACnB;EAED;IACE,aAAY;IACZ,iBAAgB,EACjB;EAGD;IACE,mBAAkB;IAClB,qBAAoB;IACpB,qBAAoB;IACpB,mBAAkB;IAClB,uBAAsB,EACvB;EAED;IACE,kBAvNoB;IAwNpB,yCA5N4D,EA6N7D;EAED;IACE,mBAAkB,EACnB;EAED;IACE,kBAhOoB;IAiOpB,4CArO4D,EAyO7D;IANA;MAIG,mBAAkB,EACnB;EAEH;IACE,mBAvOoB,EAwOrB;EAED;IACE,kBAA8B;IAC9B,iBAAgB;IAChB,4CAjP4D;IAkP5D,mBAAkB;IAClB,mBAAkB,EAUnB;IAfA;MAOG,gBAAe;MACf,kBAAiB,EAMlB;MAdF;QAUK,gBAAe;QACf,kBAAiB;QACjB,eAAc,EACf;EAIL;IACE,YAAW,EACZ;EACA;IAIK,iBAAgB,EACjB;EALJ;IAOK,+BAAuD,EACxD;EAEH;IACE,gBAAe;IACf,sBAAqB;IACrB,kBAAiB;IACjB,YAAW;IACX,aAAY;IACZ,mBAAkB;IAClB,kBAAiB;IACjB,0BAAiB;IAAjB,uBAAiB;IAAjB,sBAAiB;IAAjB,kBAAiB;IACjB,mBAAkB,EAKnB;IAdA;MAWG,gBAAe;MACf,WAAU,EACX;EAEH;IACE,mBAAkB,EACnB;EACD;IACE,aAAY,EACb;EACA;IAEG,iBAAgB;IAChB,6BAA4B,EAC7B;EAEF;IAEG,iBAAgB;IAChB,6BAA4B,EAC7B;EAGJ;IAEG,oBAAmB,EACpB;EAjSL;IAoSI,oBAAmB,EAQpB;IA5SH;MAsSM,oBAAmB,EACpB;IAvSL;MA0SM,WAAU,EACX;EAEH;IACE,cAAa,EACd;EACD;IAEE,gBAAe;IACf,YAAW;IACX,WAAU,EAWX;IAfA;MAMG,eAAc,EACf;IACD;MACE,oBAAmB;MACnB,YAAW,EAIZ;MANA;QAIG,YAAW,EACZ;EAGL;IACE,kBAAiB,EAIlB;IALA;MAGG,aAAY,EACb;EAEH;IACE,aAAY,EAIb;IALA;MAGG,aAAY,EACb;EAGH;IAEE,mBAAkB;IAClB,OAAM;IACN,iBAAgB;IAChB,WAAU,EAKX;IAVA;MAOG,YAAW;MACX,iBAAgB,EACjB;EAGH;IACE,QAAO;IACP,+CAA8C,EAQ/C;IAPC;MACE,oBAAmB;MACnB,oBAAmB,EACpB;IACD;MACE,iBAAgB,EACjB;EAGH;IACE,SAAQ;IACR,gDAA+C,EAShD;IALC;MACE,mBAAkB;MAClB,qBAAoB,EACrB;EAIH;IACE,iBAAgB,EACjB;EAED;IACE,iBAAgB,EACjB;EAEA;IAEG,oBAAmB,EACpB;EAHF;IAKG,qBAAa;IAAb,cAAa;IACb,sBAAuB;IAAvB,wBAAuB;IACvB,uBAAmB;IAAnB,oBAAmB,EAIpB;IAXF;MASK,gBAAe,EAChB;EAVJ;IAaG,+BHwjCyE;IGvjCzE,uBHwjC6D;IGvjC7D,6BAA2B;IAE3B,4BAA2B;IAE3B,0BAAyB;IACzB;;QAEE;IACA,sBAAqB;IACrB,kBAAiB,EA+DpB;IAvFF;MA8BK,mBAAkB;MAClB,iBAAgB;MAChB,aAAY;MACZ,uBAAsB;MACtB,mBAAkB;MAClB,sBAAqB;MACrB,iBAAgB,EAejB;MAnDJ;QAsCO,aAAY;QACZ,iBAAgB;QAChB,eAnaS,EAoaV;MAzCN;;QA6CO,kBAAiB;QACjB,eAAc;QACd,YAAW;QACX,gBAAe,EAChB;IAjDN;;;;MAyDK,eAAc,EACf;IA1DJ;;MA8DK,aAAY;MACZ,gBAAe,EAChB;IAhEJ;;MAmEK,sBAAqB;MACrB,WAAU;MACV,gBAAe;MACf,iBAAgB;MAGhB,uCAAyC;MACzC,+GAA8G;MAC9G,QAAO;MACP,iBAAgB;MAChB,YAAW;MACX,YAAW,EAGZ;IAjFJ;MAoFS,sBAAqB,EACxB;EArFN;IAyFG,aAAY,EACb;EA1FF;IA4FG,+BH1R4D,EG4R7D;EA9FF;IAoGG,iBAAgB,EACjB;EACD;IACE,mBAAkB,EAgCnB;IA9BC;MACE,aAAY;MACZ,mBAAkB;MAClB,aAAY;MACZ,OAAM;MAIN,YAAW;MAEX,uBAAsB;MACtB,WAAU,EAYX;MAvBA;QAcG,aAAY;QACZ,WAAU;QACV,wBAAsB;QACtB,eAAc,EACf;MAlBF;QAoBG,oBAAkB,EACnB;IAGH;MACE,mBAAkB,EAInB;MALA;QAGG,oBACF,EAAC;EAGJ;IAEG,aAAY,EACb;EAOH;IACE,YAAW;IACX,kBAAiB;IACjB,iBAAgB;IAChB,eAAa,EACd;EACD;IAEE,gBAAe;IACf,mBAAkB,EACnB;EACD;IACE,mBAAkB,EACnB;EACD;IACE,mBAAkB;IAClB,YAAW;IACX,aAAa;IACb,kBAAiB;IACjB,WAAW;IACX,SAAQ;IACR,WAAU;IACV,+BH65ByE;IG55BzE,mBAAkB;IAClB,gBAAe,EAKhB;IAfA;MAYG,aAAY;MACZ,eAxiBW,EAyiBZ;EAEH;IACE,gBAAe;IACf,gBAAe;IAEf,gBAAe,EAKhB;IATA;MAMG,YAAW,EAEZ;EAEH;IACE,kBAAiB;IACjB,iBAAgB;IAChB,uBAAsB;IACtB,gBAAe;IACf,iBAAgB;IAChB,wBAAuB;IACvB,oBAAmB;IACnB,sBAAqB;IACrB,uBAAsB,EACvB;EACD;IACE,uBAAsB;IACtB,iBAAgB,EACjB;EAGH;IAEE,cAAY;IACZ,qBAAoB,EACrB;EAzkBH;IA4kBI,aAllBiB;IAmlBjB,kBAnlBiB;IAolBjB,YAAU;IACV,eAAc;IACd,iBAAgB,EASjB;IAzlBH;MAklBM,kBAxlBe;MAylBf,mBAAkB,EAKnB;MAxlBL;QAqlBQ,YA3lBa;QA4lBb,aA5lBa,EA6lBd;EAvlBP;IA6lBQ,mBAxmBuB,EAymBxB;EA9lBP;IAqmBU,kBAjnBc,EAknBf;EAtmBT;IA4mBI,WAAU;IACV,YAAW,EACZ;EA9mBH;IAgnBI,cAAa,EACd;EAjnBH;IAmnBI,+BAA8B;IAC9B,mBAAkB,EACnB;EArnBH;IAunBI,mBAAkB;IAClB,0BAAyB;IACzB,mBAAkB,EACnB;EA1nBH;IA6nBI,cAAa,EACd;EA9nBH;IAioBI,cAAa,EACd;EAloBH;IAqoBI,aAAW,EACZ;EAtoBH;IAwoBI,aAAY;IACZ,aAAY,EACb;;AAIH;EACE,cAAa;EAGb,kBAAiB,EAClB;;AAEC;EAEI,oBAAkB,EACnB;;AAEL;EAEI,0BAAyB,EAC1B;;AAHH;;EAMI,qCAhrB4D,EAirB7D;;AAGH;;EAEE,WAAU;EACV,+DAA8D;EAC9D,yBAAwB;EACxB,0BAAyB;EACzB,6BAA4B,EAC7B;;AAED;EACE,kEAAiE;EACjE,yBAAwB;EACxB,0BAAyB;EACzB,6BAA4B,EAC7B;;AAED;;EAEE,2BAA0B;EAC1B,8BAA6B,EAC9B;;AAED;EACE,6BAA4B;EAC5B,8BAA6B,EAC9B;;AAED;EACE;IACE,sBAAqB;IACrB,4BAA2B;IAC3B,WAAU;IACV,6BH9pB+C,EAAA;EGgqBjD;IACE,sBAAqB;IACrB,yBAAwB;IACxB,WAAU,EAAA;EAEZ;IACE,6BHtqB+C,EAAA;EGwqBjD;IACE,wBAAuB;IACvB,WAAU,EAAA,EAAA;;AAId;EACE;IACE,sBAAqB;IACrB,yBAAwB;IACxB,WAAU,EAAA;EAEZ;IACE,sBAAqB;IACrB,6BAA4B;IAC5B,WAAU,EAAA,EAAA;;AAId;EACE,cAAa;EACb,kBAAiB;EACjB,WAAU,EACX;;AACD;EACE,cAAa;EACb,aAAY;EACZ,sBAAsB;EACtB,yBAAyB;EACzB,wBAAuB;EACvB,eAAc;EACd,yBAAyB;EACzB,0BAA0B;EAC1B,UAAS;EACT,mBAAkB;EAClB,WAAU;EACV,SAAQ;EACR,SAAQ,EACT;;AAED;EACE,mBAAkB,EACnB;;AAED;;EAEE,oBAAmB,EACpB;;AACD;EAEI,cAAa,EACd;;AAHH;EAKI,aAAY;EACZ,gBAAe,EAChB;;AAGH;EACE,0BAAyB;EACzB,aAAY,EACb;;AAED;;EAEE,mBAAkB;EAClB,OAAM;EACN,SAAQ;EACR,YAAW;EACX,gBAAe,EAChB;;AAED;EACE,kBAAiB;EACjB,cAAa,EACd;;AAED;EACE,kBAAiB,EAClB;;AAED;EACE,sBAAqB,EACtB;;AAED;;EAEE,eAAc,EACf;;AAED;EACE,mBAAkB,EACnB;;AAED;EACE,oBAAmB,EAuBpB;EAxBD;IAGI,mBAAkB;IAClB,YAAW;IACX,YAAW;IACX,SAAQ;IACR,eAAc;IACd,gBAAe,EAChB;EATH;IAWI,aAAY,EACb;EAZH;IAcI,aAAY;IACZ,oBAAmB;IACnB,sBAAqB;IACrB,oBAAmB,EACpB;EAlBH;IAoBI,SAAQ;IACR,YAAW;IACX,mBAAkB,EACnB;;AAIH;EACE,YAAW;EACX,mBAAkB,EAyDnB;EA3DD;IAKI,oBAAmB,EACpB;EANH;IASI,oBAAmB,EACpB;EAVH;IAaI,cAAa,EACd;EAdH;IAiBI,kBAAiB;IACjB,mBAAkB;IAClB,WAAU;IACV,YAAW;IACX,mBAAkB,EAqCnB;IA1DH;MAwBM,eAAc;MACd,UAAS;MACT,mBAAkB;MAClB,mBAAkB,EAQnB;MAnCL;QA8BQ,WACF,EAAC;MA/BP;QAiCQ,UACF,EAAC;IAlCP;MAuCQ,oBAAmB,EACpB;IAxCP;MA0CQ,kBAAiB,EAClB;IA3CP;MA+CM,gBAAe;MACf,cAAa,EACd;IAjDL;MAoDM,mBAAkB;MAClB,WAAU;MACV,aAAY;MACZ,SAAQ;MACR,UAAS,EACV;;AAIL;EACI,cAAa,EAShB;EAVD;IAIY,kBA34BoB;IA44BpB,aA54BoB;IA64BpB,yBAAwB;IACxB,gBAAe,EAClB;;AAGT;EAEI,aAp5B4B,EAq5B7B;;AAHH;EAKI,aAv5B4B,EAw5B7B;;AANH;EASM,kBAAiB,EAClB;;AAVL;EAaI,kBAAiB,EAClB;;AAEH;EACE,mBAAkB;EAClB,YAAW;EACX,cAAa;EACb,uBAAmB;EAAnB,oBAAmB;EACnB,sBAAuB;EAAvB,wBAAuB;EACvB,wBAAuB,EACxB;;AAED;EACE,mBAAkB;EAClB,UAAS,EACV;;AAKD;EAGM,oBAAmB,EACpB;;AAJL;EAOI,wBAAuB;EACvB,oBAAmB;EACnB,uBAAsB;EACtB,iBAAgB,EACjB;;AAEH;EAGM,oBAAmB,EACpB;;AAJL;EAQI,wBAAuB;EACvB,oBAAmB;EACnB,uBAAsB;EACtB,iBAAgB,EACjB;;AAEH;EACE,mBAAkB;EAClB,aAAW,EACZ;;AAED;EAGM,kBAAiB;EACjB,0BAAyB,EAC1B;;AALL;EAUM,kBAAiB;EACjB,0BAAyB,EAC1B;;AAZL;EAiBM,cAAa,EACd;;AAIL;EAEI,oBAAmB;EACnB,wCAAuC,EACxC;;AAJH;EAOI,iCAAgC,EACjC;;ACh/BH;EACE,oBAAmB,EACpB;;AAED;EACE,aAAY,EAMb;EAPD;IAII,YAAW,EACZ;;AAGH;EACE,cAAa;EACb,YAAW;EACX,oBAAmB;EACnB,sBAAqB,EAKtB;EATD;IAMI,oBAAmB;IACnB,sBAAqB,EACtB;;AC1CH;EAEQ,oBAAmB,EACtB;;AAHL;EAKQ,oBAAmB,EACtB;;ACNL;EAEQ,mBAAkB,EACrB;;ACHL;EAEQ,iBAAgB;EAChB,oBAAmB,EACtB;;ACJL;EAIQ,UAAS,EAIV;EARP;IAMU,kBAAiB,EAClB;;AAPT;EAcM,iBAAgB,EAMjB;EApBL;IAiBQ,gBAAe;IACf,kBAAiB,EAClB;;AAnBP;;EAwBM,aAAY,EACb;;AAzBL;EA6BI,uBAAsB;EACtB,kBAAiB;EACjB,mBAAkB,EACnB;;AAhCH;EAmCI,kBAAiB;EACjB,mBAAkB,EAenB;EAnDH;IAuCM,aAAY;IACZ,0BAAyB;IACzB,SAAQ;IACR,aAAY;IACZ,mBAAkB;IAClB,SAAQ;IACR,WAAU,EACX;EA9CL;IAiDM,eACF,EAAC;;AAlDL;EAqDI,+BAA8B,EAC/B;;AAtDH;EAyDI,mBAAkB;EAClB,SAAQ;EACR,eAAc;EACd,gBAAe,EAChB;;AA7DH;EAgEI,wBAAuB,EACxB;;AAGH;EAEI,eAAc,EACf;;ACvEH;EAGM,iBAAgB,EAUjB;EAbL;IAMQ,kBAAiB;IACjB,gBAAe,EAKhB;IAZP;MAUU,sBAAqB,EACtB;;AAXT;EAgBM,aAAY,EACb;;AAjBL;EAqBQ,kBAAiB,EAClB;;AAtBP;;EA2BM,aAAY,EACb;;AA5BL;EAgCI,uBAAsB;EACtB,kBAAiB;EACjB,mBAAkB,EACnB;;AAnCH;EAsCI,iBAAgB,EAQjB;EA9CH;IAwCM,uBAAsB;IACtB,aAAY,EAIb;IA7CL;MA2CQ,sBAAqB,EACtB;;AA5CP;EAiDI,+BAA8B,EAC/B;;AAlDH;EAqDI,mBAAkB;EAClB,SAAQ;EACR,eAAc;EACd,gBAAe,EAChB;;AAGH;EAEI,eAAc,EACf;;AC/DH;EAGI,gBAAe;EACf,oBAAmB,EACpB;;AALH;EAQI,iBAAgB,EACjB;;AATH;EAYI,gBAAe,EAChB;;AAbH;EAgBI,eAAc;EACd,YAAW;EACX,aAAY;EACZ,oBAAmB,EACpB;;AApBH;EAuBI,wBAAuB,EACxB;;AAxBH;EA2BI,eAAc;EACd,YAAW;EACX,kBAAiB;EACjB,aAAY;EACZ,uBAAsB;EACtB,oBAAmB;EACnB,gBAAe;EACf,aAAY;EACZ,kBAAiB,EAKlB;EAxCH;IAqCM,WAAU;IACV,WAAU,EACX;;AAvCL;EA2CI,mBAAkB;EAClB,SAAQ;EACR,eAAc;EACd,gBAAe,EAChB;;AAGH;EACE,yBAAwB,EAKzB;EAND;IAII,eAAc,EACf;;AAEH;EACE,kBAAiB,EAClB;;AC3DD;EAGI,mBAAkB,EAOnB;EAVH;IAOQ,kBAAiB,EAClB;;AARP;EAcM,0BAAyB,EAC1B;;AAfL;EAkBQ,iBAAgB,EAMjB;EAxBP;IAqBU,gBAAe;IACf,kBAAiB,EAClB;;AAvBT;;EA4BQ,aAAY,EACb;;AA7BP;EAiCM,uBAAsB;EACtB,kBAAiB;EACjB,mBAAkB,EACnB;;AApCL;EAuCM,kBAAiB;EACjB,mBAAkB,EAenB;EAvDL;IA2CQ,aAAY;IACZ,0BAAyB;IACzB,SAAQ;IACR,aAAY;IACZ,mBAAkB;IAClB,SAAQ;IACR,WAAU,EACX;EAlDP;IAqDQ,eACF,EAAC;;AAtDP;EA0DM,+BAA8B,EAC/B;;AA3DL;EA8DM,aAAY;EACZ,mBAAkB;EAClB,aAAY;EACZ,OAAM;EACN,QAAO;EACP,kBAAiB;EACjB,oBAAmB;EACnB,sDAAqD,EACtD;;AAtEL;EAyEM,mBAAkB;EAClB,SAAQ;EACR,eAAc;EACd,gBAAe,EAChB;;AA7EL;EAgFM,wBAAuB,EACxB;;AAIL;EAEI,eAAc,EACf;;ACxFH;EAGY,gBAAe;EACf,mBAAkB;EAClB,kBAAiB,EACpB;;AANT;EAYgB,oBAAmB,EAC1B;;;ACbT;EAEQ,oBAAmB,EACtB;;AAHL;EAKQ,qBAAa;EAAb,cAAa;EACb,uBAAmB;EAAnB,oBAAmB;EACnB,sBAAuB;EAAvB,wBAAuB,EAC1B","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: 14px;\n color: #212121;\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 1s 0s linear infinite;\n animation: rotate 1s 0s linear infinite;\n text-align: center;\n line-height: 40px; }\n .u-loading.u-loading-rotate > div > img {\n width: 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 > img {\n width: 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 > img {\n width: 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 background-color: rgba(255, 255, 255, 0.4); }\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: #212121;\n position: relative;\n line-height: 1.33;\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 line-height: 16px; }\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 line-height: 1.33; }\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 thead tr:last-child {\n border-bottom: 1px solid #C1C7D0; }\n .u-table thead tr > th:last-child {\n border-right: none; }\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 th.text-center,\n .u-table td.text-center {\n text-align: center; }\n .u-table th.text-right,\n .u-table td.text-right {\n text-align: right; }\n .u-table th .expand-icon-con,\n .u-table td .expand-icon-con {\n cursor: pointer; }\n .u-table-sm td {\n padding: 8px 8px; }\n .u-table-lg td {\n padding: 16px 8px; }\n .u-table tr.filterable th {\n padding-top: 5px !important;\n padding-bottom: 5px !important; }\n .u-table tr.filterable th .filterContext {\n height: 35px; }\n .u-table tr.filterable th .u-select-selection--single {\n height: 26px; }\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 .u-table-header > table {\n border-bottom: 0; }\n .u-table-bordered .u-table-header ~ .u-table-body table, .u-table-bordered .u-table-header ~ .u-table-body-outer table {\n border-top: 0px; }\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(241, 242, 245);\n color: rgb(33, 33, 33); }\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-placeholder .table-nodata {\n font-size: 40px;\n line-height: 44px; }\n .u-table-placeholder .table-nodata + span {\n font-size: 12px;\n line-height: 12px;\n display: block; }\n .u-table-expand-icon-col {\n width: 10px; }\n .u-table-row .u-table tr, .u-table-expanded-row .u-table tr {\n background: #fff; }\n .u-table-row .u-table tr.u-table-row-hover, .u-table-expanded-row .u-table tr.u-table-row-hover {\n background: rgb(235, 236, 240); }\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: 14px;\n height: 14px;\n text-align: center;\n line-height: 14px;\n user-select: none;\n margin-right: 10px; }\n .u-table-row-expand-icon.uf, .u-table-expanded-row-expand-icon.uf {\n font-size: 12px;\n padding: 0; }\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: \"\\e639\";\n font-family: \"uf\" !important; }\n .u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {\n content: \"\\e61c\";\n font-family: \"uf\" !important; }\n .u-table-row.selected {\n background: #FFF7E7; }\n .u-table tr.u-table-expanded-row {\n background: #DFE1E6; }\n .u-table tr.u-table-expanded-row:hover {\n background: #DFE1E6; }\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(241, 242, 245);\n color: rgb(33, 33, 33);\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: 16px;\n vertical-align: middle;\n text-align: center;\n display: inline-block;\n margin-top: -3px; }\n .u-table-thead th .bee-table-column-sorter i {\n padding: 0px;\n font-weight: 600;\n color: #505F79; }\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: 16px;\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: auto;\n color: #212121; }\n .u-table-filter-column-clear-setting {\n cursor: pointer;\n margin-bottom: 4px; }\n .u-table-filter-column-cont {\n position: relative; }\n .u-table-filter-column-filter-icon {\n position: absolute;\n width: 30px;\n height: 39px;\n line-height: 39px;\n right: 0px;\n top: 1px;\n z-index: 2;\n background: rgb(241, 242, 245);\n text-align: center;\n cursor: pointer; }\n .u-table-filter-column-filter-icon i.uf {\n padding: 0px;\n color: #505F79; }\n .u-table-filter-column-pop-cont-item {\n margin-top: 8px;\n font-size: 12px;\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.drop-menu-title {\n margin-left: -3px;\n max-width: 132px;\n width: auto !important;\n min-width: 56px;\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: 14px;\n line-height: 14px;\n margin: 0px;\n display: block;\n margin-left: 5px; }\n .u-table .u-checkbox .u-checkbox-label {\n line-height: 14px;\n padding-left: 16px; }\n .u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {\n width: 14px;\n height: 14px; }\n .u-table .u-table-scroll tr td:first-child, .u-table .u-table-scroll tr th:first-child, .u-table .u-table-fixed-left tr td:first-child, .u-table .u-table-fixed-left tr th:first-child {\n padding-left: 12px; }\n .u-table.has-fixed-left .u-table-scroll tr td:first-child, .u-table.has-fixed-left .u-table-scroll tr th:first-child {\n padding-left: 8px; }\n .u-table ::-webkit-scrollbar {\n width: 8px;\n height: 8px; }\n .u-table ::-webkit-scrollbar-button {\n display: none; }\n .u-table ::-webkit-scrollbar-thumb {\n background: #d5d5d5 !important;\n border-radius: 5px; }\n .u-table ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: #d5d5d5;\n position: absolute; }\n .u-table ::-webkit-scrollbar-track {\n display: none; }\n .u-table ::-webkit-scrollbar-track-piece {\n display: none; }\n .u-table .row-dragg-able {\n cursor: move; }\n .u-table .u-table-drag-hidden-cont {\n width: 100px;\n height: 40px; }\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: 26px;\n height: 26px;\n padding: 0px 16px 0 16px;\n cursor: pointer; }\n\n.filter-wrap .u-form-control {\n height: 26px; }\n\n.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {\n height: 26px; }\n\n.filter-wrap .calendar-picker .u-input-group-btn {\n line-height: 20px; }\n\n.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group .uf {\n line-height: 12px; }\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.header-dispaly-in-row.u-table table {\n table-layout: fixed; }\n\n.header-dispaly-in-row th {\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle;\n overflow: hidden; }\n\n.body-dispaly-in-row.u-table table {\n table-layout: fixed; }\n\n.body-dispaly-in-row td {\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle;\n overflow: hidden; }\n\n.u-table-drag-hidden-cont {\n position: absolute;\n top: -1000px; }\n\n.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {\n padding-left: 4px;\n border: 1px solid #c1c7d0; }\n\n.u-editable-table .u-table .editable-cell-text-wrapper:hover {\n padding-left: 4px;\n border: 1px solid #a5adba; }\n\n.u-editable-table .u-table .editable-cell-input-wrapper:focus {\n outline: none; }\n\n.u-editable-table-tp .tooltip-arrow {\n top: 1px !important;\n border-bottom-color: #F44336 !important; }\n\n.u-editable-table-tp .tooltip-inner {\n border-color: #F44336 !important; }\n\n.selected {\n background: #FFF7E7; }\n\n.demo25 {\n height: 100%; }\n .demo25 .u-table-filter-column-filter-icon {\n right: 15px; }\n\n.opt-btns .u-button {\n margin: 0 4px;\n color: #fff;\n background: #505F79;\n border-color: #505F79; }\n .opt-btns .u-button:hover, .opt-btns .u-button:active {\n background: #344563;\n border-color: #505F79; }\n\n.demo04.u-table tr:nth-child(2n) {\n background: #f7f9fb; }\n\n.demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {\n background: #ebecf0; }\n\n.demo22 .opt-btns {\n margin-bottom: 8px; }\n\n.demo32 .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px; }\n\n.demo0501 .u-table .u-row-hover .opt-btns button, .demo0501 .u-table .u-row-hover .cancel-btns button {\n margin: 0; }\n .demo0501 .u-table .u-row-hover .opt-btns button:first-child, .demo0501 .u-table .u-row-hover .cancel-btns button:first-child {\n margin-right: 8px; }\n\n.demo0501 .u-table .u-table-row td {\n padding: 5px 8px; }\n .demo0501 .u-table .u-table-row td input {\n font-size: 12px;\n padding-left: 5px; }\n\n.demo0501 .u-table .u-table-row .u-form-control,\n.demo0501 .u-table .u-table-row .u-select-selection {\n height: 30px; }\n\n.demo0501 .u-table .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px; }\n\n.demo0501 .u-table .required {\n margin-left: 10px;\n position: relative; }\n .demo0501 .u-table .required::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px; }\n .demo0501 .u-table .required span.u-input-group {\n display: block; }\n\n.demo0501 .u-table .verify-cell {\n padding-right: 25px !important; }\n\n.demo0501 .u-table .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px; }\n\n.demo0501 .u-table .ref-input-wrap {\n width: 160px !important; }\n\n.u-editable-table-tp .tp-content {\n color: #F44336; }\n\n.u-editable-table .u-table .u-table-row td {\n padding: 5px 8px; }\n .u-editable-table .u-table .u-table-row td input {\n padding-left: 5px;\n font-size: 12px; }\n .u-editable-table .u-table .u-table-row td input.error {\n border-color: #F44336; }\n\n.u-editable-table .u-table .u-table-row .editable-cell {\n height: 30px; }\n\n.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {\n line-height: 19px; }\n\n.u-editable-table .u-table .u-table-row .u-form-control,\n.u-editable-table .u-table .u-table-row .u-select-selection {\n height: 30px; }\n\n.u-editable-table .u-table .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px; }\n\n.u-editable-table .u-table .editable-cell-input-wrapper {\n padding-right: 0; }\n .u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap {\n width: auto !important;\n height: 30px; }\n .u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap .u-input-group {\n display: inline-block; }\n\n.u-editable-table .u-table .verify-cell {\n padding-right: 25px !important; }\n\n.u-editable-table .u-table .require {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px; }\n\n.u-editable-table-tp .tp-content {\n color: #F44336; }\n\n.demo0503-m-b.u-modal .u-modal-body {\n padding: 16px 0;\n background: #f7f9fb; }\n\n.demo0503-m-b .u-form-group {\n overflow: hidden; }\n\n.demo0503-m-b .u-form-control {\n font-size: 12px; }\n\n.demo0503-m-b .editable-cell {\n display: block;\n float: left;\n width: 265px;\n padding-right: 25px; }\n\n.demo0503-m-b .ref-input-wrap {\n width: 240px !important; }\n\n.demo0503-m-b .u-label {\n display: block;\n float: left;\n text-align: right;\n width: 110px;\n box-sizing: border-box;\n padding-right: 10px;\n font-size: 12px;\n height: 32px;\n line-height: 32px; }\n .demo0503-m-b .u-label .mast {\n padding: 0;\n color: red; }\n\n.demo0503-m-b .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px; }\n\n.u-editable-table-tp {\n z-index: 9999 !important; }\n .u-editable-table-tp .tp-content {\n color: #F44336; }\n\n.ref-core-button .u-button:first-child {\n margin-right: 8px; }\n\n.demo0505 .toolbar-btns {\n margin-bottom: 8px; }\n .demo0505 .toolbar-btns .u-button:first-child {\n margin-right: 8px; }\n\n.demo0505 .u-table .u-row-select {\n background-color: #FFF7E7; }\n\n.demo0505 .u-table .u-table-row td {\n padding: 5px 8px; }\n .demo0505 .u-table .u-table-row td input {\n font-size: 12px;\n padding-left: 5px; }\n\n.demo0505 .u-table .u-table-row .u-form-control,\n.demo0505 .u-table .u-table-row .u-select-selection {\n height: 30px; }\n\n.demo0505 .u-table .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px; }\n\n.demo0505 .u-table .required {\n margin-left: 10px;\n position: relative; }\n .demo0505 .u-table .required::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px; }\n .demo0505 .u-table .required span.u-input-group {\n display: block; }\n\n.demo0505 .u-table .verify-cell {\n padding-right: 25px !important; }\n\n.demo0505 .u-table .edited::after {\n content: \" \";\n position: absolute;\n z-index: 999;\n top: 0;\n left: 0;\n border-width: 5px;\n border-style: solid;\n border-color: #f44336 transparent transparent #f44336; }\n\n.demo0505 .u-table .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px; }\n\n.demo0505 .u-table .ref-input-wrap {\n width: 160px !important; }\n\n.u-editable-table-tp .tp-content {\n color: #F44336; }\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\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// $performance_font: 'Helvetica', 'Arial', sans-serif !default;\n\n@import \"minxin-colors\";\n\n\n\n@function strip-units($number) {\n @return $number / ($number * 0 + 1);\n}\n$unit: 10px !default;\n// IMAGES\n$image_path: '/images' !default;\n\n\n\n//默认颜色\n$trim-color-classes: false !default;\n\n@import \"minxin-themeColors\";\n\n//对比色\n$color-primary-contrast: $color-dark-contrast !default;\n$color-accent-contrast: $color-dark-contrast !default;\n//字体颜色\n$color-text: $palette-grey-900 !default;\n\n//不明所以 $primary-color: unquote(\"rgba(#{$palette-grey-500}, 0.20)\") !default;\n\n// -- Fonts 字体大小权重预定义\n$preferred-font: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei',sans-serif !default;\n$font-size: 1.6 * $unit !default;\n$font-size-tiny: 1.2 * $unit !default;\n$font-size-small: 1.4 * $unit !default;\n$font-size-normal: $font-size !default;\n$font-size-big: 1.8 * $unit !default;\n$font-weight-thin: 300 !default;\n$font-weight-normal: 400 !default;\n$font-weight-semi-bold: 500 !default;\n$font-weight-bold: 700 !default;\n$font-color:unquote(\"rgb(#{$palette-u-gray-800})\") !default;\n// 白色背景下的文字颜色\n$font-color-base: #212121 !default;\n\n$font-weight-override: false;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-bold: 700;\n$font-weight-base: $font-weight-normal;\n\n\n\n\n$gray-base: unquote(\"rgb(#{$palette-grey-900})\") !default;\n$gray-darkest: unquote(\"rgb(#{$palette-grey-800})\") !default;\n$gray-darker: unquote(\"rgb(#{$palette-grey-700})\") !default;\n$gray-dark: unquote(\"rgb(#{$palette-grey-600})\") !default;\n$gray: unquote(\"rgb(#{$palette-grey-500})\") !default;\n$gray-light: unquote(\"rgb(#{$palette-grey-400})\") !default;\n$gray-lighter: unquote(\"rgb(#{$palette-grey-300})\") !default;\n$gray-lightest:unquote(\"rgb(#{$palette-grey-200})\") !default;\n$inverse: unquote(\"rgb(#{$color-white})\") !default;\n// $border-color-base: $gray-lighter;\n$border-color-base: unquote(\"rgb(#{$border-color})\") !default;\n$line-height-base: 1.57142857;\n\n// 边框圆角\n$border-radius-base: $border-radius;\n\n// 阴影\n\n$shadow-key-umbra-opacity: 0.2 !default;\n$shadow-key-penumbra-opacity: 0.14 !default;\n$shadow-ambient-shadow-opacity: 0.12 !default;\n\n$shadow-base: 0 1px 5px $gray-lighter;\n\n\n\n//-- Indexes\n$z-index-highest: 300;\n$z-index-higher: 200;\n$z-index-high: 100;\n$z-index-normal: 1;\n$z-index-low: -100;\n$z-index-lower: -200;\n\n$zindex-modal: 1700;\n$zindex-modal-background: 1600;\n$zIndex-notification: 1560;\n$zIndex-message: 1550;\n$zIndex-popconfirm: 1540;\n$zIndex-popover: 1540;\n$zIndex-tooltip: 1530;\n$zIndex-alert: 1510;\n$zindex-navbar-fixed: 1500;\n$zindex-menubar: 1400;\n$zindex-overlay: 1300;\n$zindex-dropdown: 1200;\n$zindex-navbar: 1200;\n$zindex-header: 1100;\n$zindex-footer: 1000;\n$zindex-backtop:2000;\n\n// 文本字体\n\n//todo\n$text-color-primary: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\n$text-link-color: unquote(\"rgb(#{$color-accent})\") !default;\n\n$target-elements-directly: true !default;\n\n\n$global-selected-color: unquote(\"rgb(#{$palette-blue-100})\") !default;\n\n\n// 控件\n$cursor-disabled: not-allowed;\n\n\n$title-color: $gray-darkest;\n//todo\n$subtitle-color: $gray-darker;\n$text-color: $gray-dark;\n\n$prompt-color: $gray;\n//全局不同状态颜色\n//todo\n$active-color-base: unquote(\"rgb(#{$palette-blue-800})\") !default;\n$normal-color-base: unquote(\"rgb(#{$palette-blue-600})\") !default;\n$hover-color-base: unquote(\"rgb(#{$palette-blue-400})\") !default;\n\n$bg-color-base: $gray-lightest;\n\n//disable颜色\n$disabled-color-base: #909090;\n$disabled-border-color: $gray-lighter;\n$disabled-bg-color: $gray-lightest;\n\n// 全局链接颜色\n$link-color: $normal-color-base;\n$link-hover-color: $hover-color-base;\n$link-active-color: $active-color-base;\n\n// 品牌色\n$brand-default: $gray-lighter;\n$brand-default-hover: $gray-lightest;\n$brand-default-active: $gray-light;\n// $brand-default: unquote(\"rgb(#{$color-primary})\");\n// $brand-default-hover: unquote(\"rgb(#{$color-primary-light})\");\n// $brand-default-active: unquote(\"rgb(#{$color-primary-dark})\");\n\n$brand-primary : unquote(\"rgb(#{$primary-color})\") !default;\n$brand-primary-hover: unquote(\"rgb(#{$primary-color-light})\") !default;\n$brand-primary-active: unquote(\"rgb(#{$primary-color-dark})\") !default;\n\n$brand-secondary : unquote(\"rgb(#{$secondary-color})\") !default;\n$brand-secondary-hover: unquote(\"rgb(#{$secondary-color-light})\") !default;\n$brand-secondary-active: unquote(\"rgb(#{$secondary-color-dark})\") !default;\n\n$brand-success: unquote(\"rgb(#{$palette-green-500})\") !default;\n$brand-success-hover: unquote(\"rgb(#{$palette-green-300})\") !default;\n$brand-success-active: unquote(\"rgb(#{$palette-green-700})\") !default;\n\n$brand-info: unquote(\"rgb(#{$palette-cyan-500})\") !default;\n$brand-info-hover: unquote(\"rgb(#{$palette-cyan-300})\") !default;\n$brand-info-active: unquote(\"rgb(#{$palette-cyan-700})\") !default;\n\n$brand-warning: unquote(\"rgb(#{$palette-orange-500})\") !default;\n$brand-warning-hover: unquote(\"rgb(#{$palette-orange-300})\") !default;\n$brand-warning-active: unquote(\"rgb(#{$palette-orange-700})\") !default;\n\n\n$brand-news: unquote(\"rgb(#{$palette-blue-500})\") !default;\n$brand-news-hover: unquote(\"rgb(#{$palette-blue-300})\") !default;\n$brand-news-active: unquote(\"rgb(#{$palette-blue-700})\") !default;\n\n$brand-danger: unquote(\"rgb(#{$palette-red-500})\") !default;\n$brand-danger-hover: unquote(\"rgb(#{$palette-red-300})\") !default;\n$brand-danger-active: unquote(\"rgb(#{$palette-red-700})\") !default;\n\n$brand-dark: $gray-darker;\n$brand-dark-hover: $gray-dark;\n$brand-dark-active: $gray-darkest;\n\n$brand-light : unquote(\"rgb(#{$color-dark-contrast})\") !default;\n$brand-light-hover: unquote(\"rgb(#{$palette-grey-200})\") !default;\n$brand-light-active: unquote(\"rgb(#{$palette-grey-400})\") !default;\n\n$brand-light-primary : unquote(\"rgb(#{$palette-blue-50})\") !default;\n$brand-light-success: unquote(\"rgb(#{$palette-green-50})\") !default;\n$brand-light-info: unquote(\"rgb(#{$palette-cyan-50})\") !default;\n$brand-light-warning: unquote(\"rgb(#{$palette-orange-50})\") !default;\n$brand-light-news: unquote(\"rgb(#{$palette-blue-50})\") !default;\n$brand-light-danger: unquote(\"rgb(#{$palette-red-50})\") !default;\n\n//不同背景下对应的文字颜色\n\n$color-news: unquote(\"rgb(#{$palette-blue-500})\") !default;\n$color-success: unquote(\"rgb(#{$palette-green-500})\") !default;\n$color-info: unquote(\"rgb(#{$palette-cyan-500})\") !default;\n$color-warning: unquote(\"rgb(#{$palette-orange-500})\") !default;\n$color-danger: unquote(\"rgb(#{$palette-red-500})\") !default;\n$color-light: $gray-darker !default;\n\n//redius\n\n$default-border-radius: $border-radius;\n\n// hover时的背景色,包括select、dropdown、table、datepicker、tree、menu等组件\n$hover-bg-color-base: unquote(\"rgb(#{$item-hover-bg-color-base})\") !default;\n// // selected背景色,包括:select、menu等\n$selected-bg-color-base: unquote(\"rgb(#{$item-selected-bg-color-base})\") !default;\n\n// UButton\n\n// Button 基础背景色.\n// 默认按钮()\n$button-default-color: unquote(\"rgb(#{$default-color})\");\n$button-default-color-IE8: unquote(\"rgb(#{$default-color})\");\n\n// 边框按钮(shape:'border')\n$button-border-bg-color: unquote(\"rgb(#{$color-dark-contrast})\");\n\n// Button 不同状态下的背景色 :hover、active、focus状态.\n$button-hover-color: unquote(\"rgb(#{$default-color-light})\");\n$button-active-color: unquote(\"rgb(#{$default-color-dark})\");\n$button-focus-color: unquote(\"rgb(#{$default-color-light})\");\n\n// Button 配置不同colors属性时的背景色.\n$button-primary-color: $brand-primary;\n$button-primary-active-color: $brand-primary-active;\n$button-primary-hover-color: $brand-primary-hover;\n$button-secondary-color: $brand-secondary;\n$button-secondary-active-color: $brand-secondary-active;\n$button-secondary-hover-color: $brand-secondary-hover;\n$button-success-color: $brand-success;\n$button-success-active-color: $brand-success-active;\n$button-success-hover-color: $brand-success-hover;\n$button-info-color: $brand-info;\n$button-info-active-color: $brand-info-active;\n$button-info-hover-color: $brand-info-hover;\n$button-warning-color: $brand-warning;\n$button-warning-active-color: $brand-warning-active;\n$button-warning-hover-color: $brand-warning-hover;\n$button-danger-color: $brand-danger;\n$button-danger-active-color: $brand-danger-active;\n$button-danger-hover-color: $brand-danger-hover;\n$button-dark-color: $brand-dark;\n$button-dark-active-color: $brand-dark-active;\n$button-dark-hover-color: $brand-dark-hover;\n$button-light-color: $brand-light;\n$button-light-active-color: $brand-light-active;\n$button-light-hover-color: $brand-light-hover;\n\n// Button 文字颜色.\n// 主按钮(colors:'primary')\n$button-primary-text-color: unquote(\"rgb(#{$text-color-base})\") !default;\n$button-text-color: $button-primary-text-color;\n// 次按钮(colors:'secondary')\n$button-second-text-color: unquote(\"rgb(#{$button-secondary-text-color})\") !default;\n// 默认按钮()\n$button-default-text-color: unquote(\"rgb(#{$palette-grey-900})\") !default;\n// 边框按钮(shape:'border')\n// $button-border-text-color: unquote(\"rgb(#{$primary-color})\") !default;\n\n// Button 边框样式及颜色.\n$button-border-style: unquote(\"solid\") !default;\n$button-border-color: $border-color-base;\n$button-default-border-color: $button-default-color !default;\n\n// Button 不同状态下的边框颜色 :hover、active、focus状态.\n$button-hover-border-color: $brand-default-hover;\n$button-active-border-color: $brand-default-active;\n$button-focus-border-color: $brand-default-active;\n\n// FAB colors and sizes.\n$button-fab-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\n$button-fab-hover-color-alt: unquote(\"rgb(#{$color-accent-light})\") !default;\n$button-fab-active-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\n$button-fab-text-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n$button-fab-ripple-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n\n// Icon button colors and sizes.\n$button-icon-color: unquote(\"rgb(#{$palette-grey-700})\") !default;\n$button-icon-focus-color: $button-focus-color !default;\n\n// Button 最小宽度、高度、内边距、外边距、行高、边框粗细、圆角.\n$button-min-width: 72/10 * $unit !default;\n$button-height: 36/10 * $unit !default;\n$button-padding: 4/10* $unit 13/10 * $unit !default;\n$button-padding-IE8: 4px 13px !default;\n$button-top-padding: 1310 * $unit !default;\n$button-left-padding: 6/10* $unit !default;\n$button-line-height:1.57142857;\n$button-margin: 4/10 * $unit !default;\n$button-border-radius: 3/10 * $unit !default;\n$button-border-width: 1/10 * $unit !default;\n\n$button-fab-size: 38/10 * $unit !default;\n$button-fab-size-mini: 30/10 * $unit !default;\n$button-fab-font-size: 14/10 * $unit !default;\n\n$button-icon-size: 32/10 * $unit !default;\n$button-icon-size-mini: 13/10 * $unit !default;\n\n$button-raised-font-size: 14/10 * $unit !default;\n\n// Button 大按钮\n$button-padding-y-lg:8px;\n$button-padding-x-lg:15px;\n$font-size-lg:1.4 * $unit;\n\n\n// Button 特大型按钮\n$button-padding-y-xg:10.5px;\n$button-padding-x-xg:18px;\n$font-size-xg:1.6 * $unit;\n\n\n// Button 小型按钮\n$button-padding-y-sm:3px;\n$button-padding-x-sm:5px;\n$font-size-sm:1.2 * $unit;\n\n\n\n// UText\n\n\n$form-control-border-radius: $border-radius-base;\n$form-control-default-font-size: 14px;\n$form-control-lg-font-size: 14px;\n$form-control-sm-font-size: 12px;\n$form-control-default-height: 32px;\n$form-control-lg-height: 40px;\n$form-control-sm-height: 26px;\n$form-control-color: #424242;\n$form-control-bg-color: #fff;\n$form-control-border-color: $border-color-base;\n$form-control-disable-bg-color: #F7F9FB;\n$form-control-disable-color: $disabled-color-base;\n$form-control-disable-border-color: #DFE1E6;\n\n$input-text-background-color: transparent !default;\n$input-text-label-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n$input-text-bottom-border-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n$input-text-bottom-border-color-IE8: unquote(\"rgb(#{$color-black})\") !default;\n$input-text-highlight-color: unquote(\"rgb(#{$primary-color})\") !default;\n$input-text-disabled-color: $input-text-bottom-border-color !default;\n$input-text-disabled-text-color: $input-text-label-color !default;\n$input-text-error-color: unquote(\"rgb(222, 50, 38)\") !default;\n$input-text-must-color:unquote(\"rgb(#{$palette-red-A700})\") !default;\n\n\n$input-text-font-size: 14px !default;\n$input-text-width: 100% !default;\n$input-text-padding: 4px !default;\n$input-text-vertical-spacing: 20px !default;\n\n$input-text-button-size: 32px !default;\n$input-text-floating-label-fontsize: 12px !default;\n$input-text-expandable-icon-top: 16px !default;\n$input-text-height:36px !default;\n$input-text-normal-width:360px !default;\n$input-text-short-width:180px !default;\n$input-text-normal-border-color:unquote(\"rgb(#{$palette-u-gray-400})\") !default;\n$input-text-color:unquote(\"rgb(#{$palette-u-gray-A200})\") !default;\n$input-text-focus-border-color:unquote(\"rgb(#{$palette-u-blue-400})\") !default;\n$input-lable-color:unquote(\"rgb(#{$palette-u-gray-900})\") !default;\n\n\n/* FormGroup */\n\n$error-input-border:$brand-danger;\n$warning-input-border:$brand-warning;\n$success-input-border:$brand-success;\n$success-addon-bg: $brand-light-success;\n$warning-addon-bg: $brand-light-warning;\n$error-addon-bg: $brand-light-danger;\n$form-group-margin-top: 15px;\n$form-group-margin-bottom: 15px;\n\n/* Navlayout */\n\n$layout-nav-color: unquote(\"rgb(#{$palette-grey-100})\") !default;\n\n// Drawer\n$layout-drawer-bg-color: unquote(\"rgb(#{$palette-grey-50})\") !default;\n$layout-drawer-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n$layout-text-color: unquote(\"rgb(#{$palette-grey-800})\") !default;\n$layout-drawer-navigation-color: #757575 !default;\n$layout-drawer-navigation-link-active-background: unquote(\"rgb(#{$palette-grey-200})\") !default;\n$layout-drawer-navigation-link-active-color: $layout-text-color !default;\n\n// Header\n$layout-header-bg-color: unquote(\"rgb(#{$primary-color})\") !default;\n$layout-header-text-color: unquote(\"rgb(#{$color-primary-contrast})\") !default;\n$layout-header-nav-hover-color: unquote(\"rgba(#{$palette-grey-700}, 0.6)\") !default;\n$layout-header-tab-text-color: unquote(\"rgba(#{$color-primary-contrast}, 0.6)\") !default;\n\n// Tabs\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\n\n$layout-nav-link-font-size: 13px !default;\n\n$layout-drawer-narrow: 240px !default;\n$layout-drawer-wide: 456px !default;\n$layout-drawer-width: $layout-drawer-narrow !default;\n\n$layout-header-icon-size: 32px !default;\n$layout-screen-size-threshold: 1024px !default;\n$layout-header-icon-margin: 24px !default;\n$layout-drawer-button-mobile-size: 44px !default;\n$layout-drawer-button-desktop-size: 34px !default;\n$layout-drawer-button-desktop-margin-top: 5px !default;\n$layout-drawer-button-mobile-margin-top: 10px !default;\n\n$layout-header-mobile-row-height: 56px !default;\n$layout-mobile-header-height: $layout-header-mobile-row-height;\n$layout-header-desktop-row-height: 44px !default;\n$layout-desktop-header-height: $layout-header-desktop-row-height;\n\n$layout-header-desktop-baseline: 80px !default;\n$layout-header-mobile-baseline: 72px !default;\n$layout-header-mobile-indent: 16px !default;\n$layout-header-desktop-indent: 40px !default;\n\n$layout-tab-font-size: 14px !default;\n$layout-tab-bar-height: 48px !default;\n$layout-tab-mobile-padding: 12px !default;\n$layout-tab-desktop-padding: 24px !default;\n$layout-tab-highlight-thickness: 2px !default;\n\n// gridlayout\n\n// Extra small screen / phone\n//$screen-xs: 480px;\n\n$screen-xs-min: 480px;\n// Deprecated `@screen-phone` as of v3.0.1\n//@screen-phone: @screen-xs-min;\n\n// Small screen / tablet\n// Deprecated `@screen-sm` as of v3.0.1\n//@screen-sm: 768px;\n$screen-sm-min: 768px;\n// Deprecated `@screen-tablet` as of v3.0.1\n//@screen-tablet: @screen-sm-min;\n\n// Medium screen / desktop\n// Deprecated `@screen-md` as of v3.0.1\n//@screen-md: 992px;\n$screen-md-min: 992px;\n// Deprecated `@screen-desktop` as of v3.0.1\n//@screen-desktop: @screen-md-min;\n\n// Large screen / wide desktop\n// Deprecated `@screen-lg` as of v3.0.1\n//@screen-lg: 1200px;\n$screen-lg-min: 1200px;\n// Deprecated `@screen-lg-desktop` as of v3.0.1\n//@screen-lg-desktop: @screen-lg-min;\n$screen-xs-max: ($screen-sm-min - 1 );\n\n$screen-sm-max: ($screen-sm-min - 1 );\n\n$screen-md-max: ($screen-lg-min - 1 );\n\n\n\n\n// Number of columns in the grid.\n$grid-columns: 12;\n// Padding between columns. Gets divided in half for the left and right.\n$grid-gutter-width: 30px;\n// Navbar collapse\n// Point at which the navbar becomes uncollapsed.\n$grid-float-breakpoint: 768px;\n// Point at which the navbar begins collapsing.\n$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);\n\n\n// Small screen / tablet\n$container-tablet: (720px + $grid-gutter-width);\n// For `@screen-sm-min` and up.\n$container-sm: $container-tablet;\n\n// Medium screen / desktop\n$container-desktop: (940px + $grid-gutter-width);\n// For `@screen-md-min` and up.\n$container-md: $container-desktop;\n\n// Large screen / wide desktop\n$container-large-desktop: (1140px + $grid-gutter-width);\n// For `@screen-lg-min` and up.\n$container-lg: $container-large-desktop;\n\n\n\n// menu\n\n$default-dropdown-bg-color: unquote(\"rgb(#{$color-white})\") !default;\n$menu-expand-duration: 0.3s !default;\n$menu-fade-duration: 0.2s !default;\n\n// Default Item Colors\n$default-item-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\n$default-item-text-color-IE8: unquote(\"rgb(#{$color-black})\") !default;\n$default-item-outline-color: unquote(\"rgb(#{$palette-u-blue-400})\") !default;\n$default-item-hover-bg-color: unquote(\"rgb(#{$palette-u-blue-100})\") !default;\n$default-item-focus-bg-color: unquote(\"rgb(#{$palette-u-blue-200})\") !default;\n$default-item-active-bg-color: unquote(\"rgb(#{$palette-u-blue-200})\") !default;\n$default-item-divider-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n\n// Disabled Button Colors\n$disabled-item-text-color: unquote(\"rgb(#{$palette-grey-400})\") !default;\n\n// Tile\n$tile-width: 100%;\n\n$tile-default-border-color: #e9e9e9;\n$tile-default-hover-shadow-color: rgba(0, 0, 0, 0.2);\n\n$tile-primary-border-color: $button-primary-color;\n$tile-primary-hover-shadow-color: $button-primary-hover-color;\n\n$tile-danger-border-color: $button-danger-color;\n$tile-danger-hover-shadow-color: $button-danger-hover-color;\n\n$tile-warning-border-color: $button-warning-color;\n$tile-warning-hover-shadow-color: $button-warning-hover-color;\n\n$tile-success-border-color: $button-success-color;\n$tile-success-hover-shadow-color: $button-success-hover-color;\n\n$tile-info-border-color: $button-info-color;\n$tile-info-hover-shadow-color: $button-info-hover-color;\n\n// Alert\n$alert-news-bg: $brand-light-news;\n$alert-success-bg: $brand-light-success;\n$alert-info-bg: $brand-light-info;\n$alert-warning-bg: $brand-light-warning;\n$alert-danger-bg: $brand-light-danger;\n\n\n$alert-dark-news-bg: $brand-news;\n$alert-dark-success-bg: $brand-success;\n$alert-dark-info-bg: $brand-info;\n$alert-dark-warning-bg: $brand-warning;\n$alert-dark-danger-bg: $brand-danger;\n\n$alert-news-color: $color-news;\n$alert-success-color: $color-success;\n$alert-info-color: $color-info;\n$alert-warning-color: $color-warning;\n$alert-danger-color: $color-danger;\n\n$timeline-primary-color: $brand-primary;\n$timeline-news-color: $color-news;\n$timeline-success-color: $color-success;\n$timeline-info-color: $color-info;\n$timeline-warning-color: $color-warning;\n$timeline-danger-color: $color-danger;\n\n$alert-padding:10px;\n$alert-font-size:12px;\n$alert-border-radius: $border-radius;\n$alert-text-padding-left: 15px;\n$alert-text-padding-right: 15px;\n$alert-close-font-size: 21px;\n$alert-close-opacity: .2;\n$alert-close-font-weight: 700;\n\n//Checkbox\n\n$checkbox-color: unquote(\"rgb(#{$primary-color})\") !default;\n$checkbox-off-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n$checkbox-off-color-IE8: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n$checkbox-disabled-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n$checkbox-focus-color: unquote(\"rgba(#{$palette-u-blue-500}, 0.26)\") !default;\n$checkbox-image-path: $image_path;\n\n$checkbox-label-font-size: 13px !default;\n$checkbox-label-height: 24px !default;\n$checkbox-button-size: 16px !default;\n$checkbox-inner-margin: 2px !default;\n$checkbox-padding: 8px !default;\n$checkbox-top-offset:\n ($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;\n$checkbox-ripple-size: $checkbox-label-height * 1.5;\n\n$checkbox-primary-bg: $brand-primary;\n$checkbox-success-bg: $brand-success;\n$checkbox-info-bg: $brand-info;\n$checkbox-warning-bg: $brand-warning;\n$checkbox-danger-bg: $brand-danger;\n$checkbox-dark-bg: $brand-dark;\n\n$progress-primary-bg: $brand-primary;\n$progress-success-bg: $brand-success;\n$progress-info-bg: $brand-info;\n$progress-warning-bg: $brand-warning;\n$progress-danger-bg: $brand-danger;\n$progress-dark-bg: $brand-dark;\n\n$primary-color-opacity:unquote(\"rgba(#{$primary-color}, 0.7)\") !default;\n$color-success-opacity:unquote(\"rgba(#{$palette-green-500}, 0.7)\") !default;\n$color-info-opacity:unquote(\"rgba(#{$palette-cyan-500}, 0.7)\") !default;\n$color-warning-opacity:unquote(\"rgba(#{$palette-orange-500}, 0.7)\") !default;\n$color-danger-opacity:unquote(\"rgba(#{$palette-red-500}, 0.7)\") !default;\n$color-dark-opacity:unquote(\"rgba(#{$palette-grey-700}, 0.7)\") !default;\n\n\n$progress-sm-height: 10px;\n$progress-xs-height: 5px;\n$progress-xs-width: 170px;\n$progress-default-height: 20px;\n$progress-sm-lable-font-size: 10px;\n$progress-sm-lable-line-height: 10px;\n$progress-xs-lable-line-height: 8px;\n$progress-xs-lable-margin-left: 140px;\n$progress-xs-lable-font-size: 10px;\n$progress-xs-lable-color: #000;\n\n// Radio\n\n$radio-color: unquote(\"rgb(#{$primary-color})\") !default;\n$radio-off-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n$radio-off-color-IE8: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n$radio-disabled-color: $disabled-color-base !default;\n\n$radio-label-font-size: 13px !default;\n$radio-label-height: 32px !default;\n$radio-button-size: 16px !default;\n$radio-inner-margin: $radio-button-size / 4;\n$radio-padding: 8px !default;\n$radio-top-offset: ($radio-label-height - $radio-button-size) / 2;\n$radio-ripple-size: 42px !default;\n\n$radio-primary-bg: $brand-primary;\n$radio-success-bg: $brand-success;\n$radio-info-bg: $brand-info;\n$radio-warning-bg: $brand-warning;\n$radio-danger-bg: $brand-danger;\n$radio-dark-bg: $brand-dark;\n\n$radio-disabled-bg: #f7f7f7;\n$radio-diabled-border-color: #d9d9d9;\n\n$radio-border-color: #d9d9d9;\n$radio-bg-color: #fff;\n$radio-color:#212121;\n\n$radio-checked-bg-color: #fff;\n$radio-checked-color: $brand-primary;\n$radio-checked-border-color: $radio-checked-color;\n\n$radio-icon-height: 18px;\n$radio-icon-width: 18px;\n$radio-icon-checked-height: 8px;\n$radio-icon-checked-width: 8px;\n\n$radio-button-lg-height:42px;\n$radio-button-lg-line-height:26px;\n\n$radio-button-sm-height:22px;\n$radio-button-sm-line-height:20px;\n\n$radio-button-height: 28px;\n$radio-button-line-height: 26px;\n\n\n\n\n\n//loading\n\n$loading-color-1: unquote(\"rgb(#{$palette-blue-400})\") !default;\n$loading-color-2: unquote(\"rgb(#{$palette-red-500})\") !default;\n$loading-color-3: unquote(\"rgb(#{$palette-yellow-600})\") !default;\n$loading-color-4: unquote(\"rgb(#{$palette-green-500})\") !default;\n\n$loading-single-color: unquote(\"rgb(#{$primary-color})\") !default;\n\n$loading-size: 28px !default;\n$loading-stroke-width: 3px !default;\n\n// Amount of circle the arc takes up.\n$loading-arc-size: 270deg !default;\n// Time it takes to expand and contract arc.\n$loading-arc-time: 1333ms !default;\n// How much the start location of the arc should rotate each time.\n$loading-arc-start-rot: 216deg !default;\n\n$loading-duration: 360 * $loading-arc-time / (\n strip-units($loading-arc-start-rot + (360deg - $loading-arc-size)));\n\n// datetimepicker\n$timepicker-border-gap-color:#ccc;\n$timepicker-font-size:14px;\n\n$date-bg-color: unquote(\"rgb(#{$primary-color})\") !default;\n\n// message\n$snackbar-color: unquote(\"rgb(#{$color-white})\") !default;\n$snackbar-background-color: unquote(\"rgb(#{$primary-color})\") !default;\n$snackbar-color-cancel: unquote(\"rgb(#{$palette-red-500})\") !default;\n$snackbar-color-accept: unquote(\"rgb(#{$palette-green-500})\") !default;\n$snackbar-color-warning: unquote(\"rgb(#{$palette-lime-200})\") !default;\n\n// DATA TABLE\n\n$data-table-font-size: 13px !default;\n$data-table-header-font-size: 12px !default;\n$data-table-header-sort-icon-size: 16px !default;\n\n$data-table-header-color: rgba(#000, 0.54) !default;\n$data-table-header-sorted-color: rgba(#000, 0.87) !default;\n$data-table-divider-color: rgba(#000, 0.12) !default;\n$data-table-divider-color-IE8: rgb(0,0,0) !default;\n\n//$data-table-hover-color: #eeeeee !default;\n$data-table-hover-color: #E9F7FC !default;\n$data-table-selection-color: #C4EAF6 !default;\n\n$data-table-dividers: 1px solid $data-table-divider-color !default;\n$data-table-dividers-IE8: 1px solid $data-table-divider-color-IE8 !default;\n\n$data-table-row-height: 48px !default;\n$data-table-last-row-height: 56px !default;\n$data-table-header-height: 56px !default;\n\n$data-table-column-spacing: 36px !default;\n$data-table-column-padding: $data-table-column-spacing / 2;\n\n$data-table-card-header-height: 64px !default;\n$data-table-card-title-top: 20px !default;\n$data-table-card-padding: 24px !default;\n$data-table-button-padding-right: 16px !default;\n$data-table-cell-top: $data-table-card-padding / 2;\n\n// $line-height-computed: round(($font-size-small * $line-height-base));\n$line-height-computed: round((14px * $line-height-base));\n$table-bg: transparent;\n$table-cell-padding: 8px;\n$table-border-color: $border-color-base;\n$table-bg-hover: $bg-color-base;\n$table-bg-active: $table-bg-hover;\n$table-bg-accent: unquote(\"rgba(#{$palette-grey-200},.3)\") !default;\n\n\n\n\n// tooltip\n$tooltip-max-width: 200px;\n$tooltip-color: #fff;\n$tooltip-bg: #42526E;\n$tooltip-inverse-border-color: #d9d9d9;\n$tooltip-inverse-color: rgb(51,51,51);\n$tooltip-arrow-color: $tooltip-bg;\n$tooltip-opacity: 1;\n\n\n// 进度条\n$bar-height: 4px !default;\n$progress-main-color: unquote(\"rgb(#{$primary-color})\") !default;\n$progress-secondary-color: unquote(\"rgba(#{$color-primary-contrast}, 0.7)\") !default;\n$progress-fallback-buffer-color: unquote(\"rgba(#{$color-primary-contrast}, 0.9)\") !default;\n$progress-image-path: $image_path;\n$progress-buffer-bar-border:unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n\n// Tabs\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\n\n\n\n$tab-highlight-color: unquote(\"rgb(#{$primary-color})\") !default;\n$tab-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n$tab-active-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\n$tab-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n\n\n\n//CARD\n\n$card-width: 330px !default;\n$card-height: 200px !default;\n$card-font-size: 13px !default;\n$card-title-font-size: 24px !default;\n$card-subtitle-font-size: 10px !default;\n$card-horizontal-padding: 16px !default;\n$card-vertical-padding: 16px !default;\n\n$card-title-perspective-origin-x: 165px !default;\n$card-title-perspective-origin-y: 56px !default;\n\n$card-title-transform-origin-x: 165px !default;\n$card-title-transform-origin-y: 56px !default;\n\n$card-title-text-transform-origin-x: 149px !default;\n$card-title-text-transform-origin-y: 48px !default;\n\n$card-supporting-text-font-size: 1.4 * $unit !default;\n$card-supporting-text-line-height: 18px !default;\n\n$card-actions-font-size: 13px !default;\n\n$card-title-text-font-weight: 300 !default;\n$card-z-index: 1 !default;\n\n// Cover image\n$card-cover-image-height: 186px !default;\n$card-background-image-url: '' !default;\n\n\n\n$card-background-color: unquote(\"rgb(#{$color-white})\") !default;\n$card-text-color: unquote(\"rgb(#{$color-black})\") !default;\n$card-image-placeholder-color: unquote(\"rgb(#{$color-accent})\") !default;\n$card-supporting-text-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n$card-border-color: rgba(0,0,0,0.1) !default;\n$card-subtitle-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n\n\n$input-border:unquote(\"rgb(#{$palette-u-gray-500})\");\n$input-border-focus:unquote(\"rgb(#{$primary-color})\");\n$input-border-disabled:unquote(\"rgb(#{$palette-u-gray-100})\");\n$input-bg-disabled:unquote(\"rgb(#{$palette-u-gray-100})\");\n$input-color:unquote(\"rgb(#{$palette-u-gray-A100})\");\n$form-input-height:36px;\n$form-input-height-sm:28px;\n$form-input-padding-left:12px;\n$form-label-color:unquote(\"rgb(#{$palette-u-gray-900})\");\n$form-control-feedback-color:unquote(\"rgb(#{$palette-u-gray-700})\");\n$form-validate-error-color:unquote(\"rgb(#{$palette-u-red-600})\");\n\n\n// BADGE\n$badge-font-size: 12px !default;\n$badge-color: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n$badge-color-inverse: unquote(\"rgb(#{$color-accent})\") !default;\n$badge-background: unquote(\"rgb(#{$color-accent})\") !default;\n$badge-background-inverse: unquote(\"rgba(#{$color-accent-contrast},0.2)\") !default;\n$badge-size : 22px !default;\n$badge-padding: 2px !default;\n$badge-overlap: 12px !default;\n\n$badge-primary-color:#FFFFFF;\n$badge-primary-bg:$brand-primary;\n\n$badge-success-color:#FFFFFF;\n$badge-success-bg: $brand-success;\n\n$badge-info-color:#FFFFFF;\n$badge-info-bg:$brand-info;\n\n$badge-warning-color:#FFFFFF;\n$badge-warning-bg:$brand-warning;\n\n$badge-danger-color:#FFFFFF;\n$badge-danger-bg:$brand-danger;\n\n$badge-dark-color:#FFFFFF;\n$badge-dark-bg:$brand-dark;\n\n$badge-font-size: 12px;\n$badge-font-dataicon-size: 10px;\n$badge-default-dataicon-fontcolor: #757575;\n$badge-default-dataicon-bgcolor: #fff;\n$badge-default-dataicon-bordercolor: $border-color-base;\n\n// labels\n$tag-padding: .25em .6em .25em;\n$tag-border-radius: 0.3em;\n$tag-bg: #eeeeee;\n$tag-round-border-radius: 1em;\n$tag-default-color: #757575;\n$tag-default-bg:#e0e0e0;\n$tag-lg-font-size: 16px;\n$tag-sm-font-size: 10px;\n$tag-sm-padding: .1em .5em .1em;\n$tag-default-hover-bg: $brand-default-hover;\n$tag-primary-hover-bg: $brand-primary-hover;\n$tag-success-hover-bg: $brand-success-hover;\n$tag-info-hover-bg: $brand-info-hover;\n$tag-warning-hover-bg: $brand-warning-hover;\n$tag-danger-hover-bg: $brand-danger-hover;\n$tag-dark-hover-bg: $brand-dark-hover;\n$tag-default-bg: $brand-default;\n$tag-primary-bg: $brand-primary;\n$tag-success-bg: $brand-success;\n$tag-info-bg: $brand-info;\n$tag-warning-bg: $brand-warning;\n$tag-danger-bg: $brand-danger;\n$tag-dark-bg: $brand-dark;\n$tag-default-hover-color:unquote(\"rgb(#{$palette-u-gray-500})\");\n\n\n// pagination\n$pagination-gap-hover-border:#7A869A;\n\n$pagination-link-padding: 7px 13px;\n$pagination-lg-font-size: 16px;\n$pagination-lg-padding-vertical: 9.5px;\n$pagination-lg-padding-horizontal: 15.5px;\n\n$pagination-small-font-size: 12px;\n$pagination-small-padding-vertical: 4px;\n$pagination-small-padding-horizontal: 9.5px;\n\n$pag-color: #666666;\n$pag-bg-color: #fff;\n$pag-border-color:#d7d7d7;\n$pag-hover-color: #666;\n$pag-hover-bg-color:$hover-bg-color-base;\n$pag-hover-border-color:#d7d7d7;\n$pag-active-color: #fff;\n$pag-active-bg-color:#7A869A;\n$pag-active-border-color:#7A869A;\n$pag-disabled-color: #777;\n$pag-disabled-bg-color:#fff;\n$pag-disabled-border-color:#ddd;\n\n$border-radius-base: $border-radius;\n$border-radius-large: 4px;\n$border-radius-small: 2px;\n\n$line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome\n$line-height-small: 1.5;\n// widget\n\n$widget-padding-left:30px;\n$widget-padding-top:10px;\n\n//tooltips\n\n$tooltip-default-bg: $brand-default;\n$tooltip-primary-bg: $brand-primary;\n$tooltip-success-bg: $brand-success;\n$tooltip-info-bg: $brand-info;\n$tooltip-warning-bg: $brand-warning;\n$tooltip-danger-bg: $brand-danger;\n$tooltip-dark-bg: $brand-dark;\n\n//menu Button\n\n$menu-default-bg: $brand-default;\n$menu-primary-bg: $brand-primary;\n$menu-success-bg: $brand-success;\n$menu-info-bg: $brand-info;\n$menu-warning-bg: $brand-warning;\n$menu-danger-bg: $brand-danger;\n$menu-dark-bg: $brand-dark;\n$menu-default-bg-hover: $brand-default-hover;\n$menu-primary-bg-hover: $brand-primary-hover;\n$menu-success-bg-hover: $brand-success-hover;\n$menu-info-bg-hover: $brand-info-hover;\n$menu-warning-bg-hover: $brand-warning-hover;\n$menu-danger-bg-hover: $brand-danger-hover;\n$menu-dark-bg-hover: $brand-dark-hover;\n\n\n// breadcrumbs\n\n$breadcrumb-padding-vertical: 8px;\n$breadcrumb-padding-horizontal: 10px;\n$breadcrumb-separator: \"/\\00a0\";\n$breadcrumb-bg: transparent;\n$breadcrumb-margin-bottom: 10px;\n\n$breadcrumb-color: $brand-primary;\n$breadcrumb-active-color: $text-color;\n\n$breadcrumb-icon-margin-right: 10px;\n$breadcrumb-arrow-separator: \"\\00bb\\00a0\";\n\n$breadcrumb-bg-color: #f5f5f5;\n$breadcrumb-active-color: #777;\n$breadcrumb-separate-color: #ccc;\n\n// list-group\n$list-group-media-heading-font-size : $font-size-small;//14px\n$list-group-link-disabled-color : $disabled-color-base;\n\n$list-group-link-disabled-bg : $gray-lightest;\n\n$list-group-active-color : $brand-primary;\n$list-group-link-active-color : unquote(\"rgb(#{$color-white})\") !default;\n$list-group-link-active-bg : $brand-primary;\n\n\n$list-group-item-icon-margin-right : 10px;\n\n$list-group-bg-inherit-item-border : rgba(0, 0, 0, 0.075);\n$list-group-bg-inherit-item-hover-bg : rgba(0, 0, 0, 0.075);\n\n\n$list-group-border-radius: $border-radius-base;\n\n\n\n$list-group-link-color: $text-color;\n$list-group-link-hover-color: $text-color;\n$list-group-link-heading-color: $title-color;\n\n$list-group-hover-bg: $bg-color-base;\n\n$list-group-disabled-bg: transparent;\n\n$list-group-disabled-color: $disabled-color-base;\n\n\n$list-group-disabled-text-color: $list-group-disabled-color;\n$list-group-active-bg: transparent;\n$list-group-active-border: $list-group-active-bg;\n// $list-group-active-text-color: lighten($list-group-active-color, 40%);\n$list-group-active-text-color: $list-group-active-color;\n\n$list-group-bg: #fff;\n$list-group-border: transparent;\n// $list-group-bordered-border : $border-color-base;\n// $list-group-bordered-active-color : $component-active-color;\n// $list-group-bordered-active-bg : $component-active-bg;\n// $list-group-bordered-active-border : $list-group-bordered-active-bg;\n\n// $list-group-gap-item-margin-bottom : 2px;\n\n//step\n$steps-margin-bottom: $line-height-computed;\n$step-padding-horizontal:20px;\n$step-padding-vertical: 12px;\n\n$step-vertical-padding-horizontal: 20px;\n$step-vertical-padding-vertical:18px;\n\n$step-color: $gray;\n$step-bg: $bg-color-base;\n$step-number-bg: $gray-lighter;\n$step-number-color: $inverse;\n\n$step-current-color: $inverse;\n$step-current-bg: $brand-primary;\n\n$step-done-color: $inverse;\n$step-done-bg:$brand-success;\n\n$step-error-color: $inverse;\n$step-error-bg: $brand-danger;\n\n$step-disabled-color:$gray-light;\n\n$step-font-size: inherit;\n$step-title-font-size: 20px;\n$step-icon-font-size:27px;\n$step-number-font-size:24px;\n$step-number-size: 40px;\n\n$step-lg-padding-horizontal:20px;\n$step-lg-padding-vertical:20px;\n$step-lg-font-size: 16px;\n$step-lg-title-font-size:22px;\n$step-lg-icon-font-size: 32px;\n$step-lg-number-font-size:28px;\n$step-lg-number-size:46px;\n\n$step-sm-font-size: 12px;\n$step-sm-title-font-size: 18px;\n$step-sm-icon-font-size: 24px;\n$step-sm-number-font-size: 24px;\n$step-sm-number-size: 30px;\n\n$step-xs-font-size: 10px;\n$step-xs-title-font-size: 16px;\n$step-xs-icon-font-size: 22px;\n$step-xs-number-font-size: 20px;\n$step-xs-number-size: 24px;\n\n// blog nav\n$blognav-active-color:unquote(\"rgb(#{$primary-color})\");\n// widget\n$widget-padding-left:30px;\n$widget-padding-top:10px;\n\n\n// couter 数据统计\n\n$counter-number-color: $gray-darkest;\n$counter-number-font-size: 20px;\n$counter-icon-font-size: $counter-number-font-size;\n\n$counter-lg-number-font-size: 40px;\n$counter-md-number-font-size: 30px;\n$counter-sm-number-font-size: 14px;\n\n$counter-lg-icon-font-size: $counter-lg-number-font-size;\n$counter-md-icon-font-size: $counter-md-number-font-size;\n$counter-sm-icon-font-size: $counter-sm-number-font-size;\n\n$counter-inverse-color: $inverse;\n\n\n// navbar\n\n\n$menu-active-color: #108ee9;\n$menu-border-active-color: #108ee9;\n$menu-selected-bg-color: #eaf8fe;\n$menu-group-titil-color: #999;\n$menu-group-title-padding-left: 32px;\n$menu-color: #666;\n$menu-border-color: #d9d9d9;\n\n$navbar-default-bg-color: #f8f8f8;\n$navbar-default-border-color: #e7e7e7;\n$navbar-default-color: #777;\n$navbar-default-hover-color: #333;\n$navbar-inverse-hover-color: #fff;\n$navbar-inverse-color: #9d9d9d;\n$navbar-inverse-bg-color: #222;\n$navbar-inverse-border-color: #080808;\n$navbar-border-radius: 4px;\n\n$navbar-side-container-border-color: #d9d9d9;\n$navbar-side-container-width: 242px;\n$navbar-side-container-border-shadow: #d9d9d9;\n\n// Basics of a navbar\n$navbar-height: 50px;\n$navbar-margin-bottom: $line-height-computed;\n$navbar-border-radius: $border-radius-base;\n$navbar-padding-horizontal: floor(($grid-gutter-width / 2));\n$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2);\n$navbar-collapse-max-height: 340px;\n\n$navbar-avatar-margin-horizontal: (($navbar-height - 32px) / 2);\n\n$navbar-brand-padding-horizontal: 20px;\n$navbar-brand-logo-height: 32px;\n\n$navbar-default-color: $text-color;\n$navbar-default-bg: $inverse;\n$navbar-default-border: $border-color-base;\n\n// Navbar links\n$navbar-default-link-color: $text-color;\n$navbar-default-link-hover-color: $gray-darker;\n$navbar-default-link-hover-bg: rgba(238,238,238, 30%);\n$navbar-default-link-active-color: $navbar-default-link-hover-color;\n$navbar-default-link-active-bg: rgba(238,238,238, 60%);\n$navbar-default-link-disabled-color: $disabled-color-base;\n$navbar-default-link-disabled-bg: transparent;\n\n// Navbar brand label\n$navbar-default-brand-color: $title-color;\n$navbar-default-brand-hover-color: $navbar-default-brand-color;\n$navbar-default-brand-hover-bg: none;\n\n// Navbar toggle\n$navbar-default-toggle-hover-bg: $navbar-default-link-hover-bg;\n$navbar-default-toggle-icon-bar-bg: $navbar-default-color;\n$navbar-default-toggle-border-color: transparent;\n\n\n// Inverted navbar\n// Reset inverted navbar basics\n$navbar-inverse-bg: $brand-primary;\n$navbar-inverse-border: rgba(0, 0, 0, .1);\n\n// Inverted navbar links\n$navbar-inverse-link-color: $inverse;\n$navbar-inverse-link-hover-color: $inverse;\n$navbar-inverse-link-hover-bg: rgba(0, 0, 0, .1);\n$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color;\n$navbar-inverse-link-active-bg: $navbar-inverse-link-hover-bg;\n$navbar-inverse-link-disabled-color: $inverse;\n$navbar-inverse-link-disabled-bg: transparent;\n\n// Inverted navbar brand label\n$navbar-inverse-brand-color: $navbar-inverse-link-color;\n$navbar-inverse-brand-hover-color: $inverse;\n$navbar-inverse-brand-hover-bg: none;\n\n// Inverted navbar toggle\n$navbar-inverse-toggle-hover-bg: $navbar-inverse-link-hover-bg;\n$navbar-inverse-toggle-icon-bar-bg: $inverse;\n$navbar-inverse-toggle-border-color: transparent;\n\n//hamburger\n$hamburger-size: 17px;\n\n\n//panel\n$panel-header-padding : 10px 15px;\n$panel-footer-padding : 10px 15px;\n$panel-body-padding : 15px 15px;\n$panel-header-bg-color : #f5f5f5;\n$panel-footer-bg-color : #f5f5f5;\n$panel-bg-color : #fff;\n$panel-default-color : #757575;\n$panel-inner-border-color: #ddd;\n\n\n//modal\n$modal-header-padding : 15px;\n$modal-body-padding : 15px;\n$modal-footer-padding : 15px;\n$modal-content-bg-color: #fff;\n$modal-backdrop-bg: #000;\n$modal-backdrop-opacity: .6;\n$modal-header-border-color: transparent;\n$modal-footer-border-color: transparent;\n$modal-xlg: 976px;\n$modal-lg: 800px;\n$modal-sm: 400px;\n$modal-default: 600px;\n$modal-border-radius: $border-radius-base;\n\n//notification\n\n$zIndex-notification: $zIndex-notification;\n$notification-top: 30px;\n$notification-bottom: 30px;\n$notification-right: 30px;\n$notification-width: 300px;\n$notification-text-margin-right: 15px;\n$notice-padding: 15px;\n$notice-background: $gray-darkest;\n$notice-bottom: 15px;\n\n//message\n\n$message-font-size: 12px;\n\n$message-right: 30px;\n$message-width: 300px;\n$message-text-margin-right: 15px;\n$message-padding: 0;\n$message-content-padding: 15px;\n$message-background: $gray-darkest;\n\n//popconfirm\n\n$popconfirm-max-width: 300px;\n\n$popconfirm-dark-bg: $gray-darkest;\n$popconfirm-fallback-dark-border-color: $gray-darkest;\n$popconfirm-margin: 10px;\n$popconfirm-title-bg: #fff;\n$popconfirm-border-color:$border-color-base;\n$popconfirm-arrow-width: 10px;\n$popconfirm-arrow-color: $border-color-base;\n$popconfirm-arrow-outer-width: 0;\n$popconfirm-arrow-outer-color: $border-color-base;\n$popconfirm-border-right-color: $border-color-base;\n$popconfirm-fallback-border-color: #fff;\n\n//select\n\n$select-bg-color: #fff;\n$select-border-color: $border-color-base;\n$select-border-radius: $border-radius-base;\n$select-color: $font-color-base;\n$select-font-size: 12px;\n$select-dropdown-color: #666;\n$select-dropdown-bg-color: #fff;\n$select-dropdown-hover-bg: $hover-bg-color-base;\n$select-dropdown-selected-bg: $selected-bg-color-base;\n$select-dropdown-selected-color: rgb(134, 119, 119);\n$select-dropwdown-item-padding: 7px 16px;\n$select-disabled-color: $disabled-color-base;\n$select-disabled-bg: #f7f7f7;\n$select-disabled-border-color: #d9d9d9;\n//dropdown\n\n$dropdown-item-hover-bg-color: unquote(\"rgb(#{$palette-grey-100})\");\n$dropdown-item-divier-bg-color: $gray-lighter;\n$dropdown-border-color: $border-color-base;\n$dropdown-border-radius:3px;\n$dropdown-shadow: 0 1px 5px $dropdown-border-color;\n$dropdown-margin: 5px 0 0 0;\n$dropdown-menu-item-padding: 0px 16px 0 28px;\n$dropdown-menu-font-size: 12px;\n$dropdown-menu-item-height: 42px;\n$dropdown-menu-item-light-height: 42px;\n$dropdown-menu-title-font-size: 12px;\n$dropdown-menu-title-color: $disabled-color-base;\n$dropdown-menu-title-padding:8px 16px;\n$dropdown-menu-title-line-height: 1.5;\n\n//upload\n\n$upload-list-color: #108ee9;\n$upload-list-bg : #fff;\n$upload-list-hover-bg: #e7f4fd;\n$upload-list-error-color: #f50;\n$upload-thumbnail-height: 48px;\n$upload-thumbnail-width: 48px;\n$upload-thumbnail-img-height: 48px;\n$upload-thumbnail-img-width: 48px;\n\n//loading\n\n$loading-loadprimary: rgb(63, 81, 181);\n$loading-loadsuccess: #4caf50;\n$loading-loadwarn: rgb(255, 152, 0);\n$loading-lineanimating: (\n 1:line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08),\n 2:line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08),\n 3:line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08),\n 4:line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08),\n 5:line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08)\n);\n$loading-linebackcolor: (\n 1: #F44336,\n 2: #7ED321,\n 3: #0084FF,\n 4: #FF9800,\n 5: #D0021B\n);\n$loading-back-width: 120px;\n$loading-back-height:110px;\n$loading-desc-font-size: 16px;\n$loading-desc-color: #cecece;\n$loading-rotate-bor:#c2c3c5;\n\n//两种加载的尺寸 width height\n$loading-rotate-sm-size: 25px;\n$loading-rotate-size:40px;\n$loading-rotate-lg-size:60px;\n\n$loading-line-sm-width: 4px;\n$loading-line-sm-height:35px;\n$loading-line-width:6px;\n$loading-line-height:50px;\n$loading-line-lg-width:8px;\n$loading-line-lg-height:90px ;\n\n//居中位置top left\n$loading-center-top:50%;\n$loading-center-left:50%;\n\n$loading-rotate-center-sm: -15px ;\n$loading-rotate-center:-22px;\n$loading-rotate-center-lg:-35px ;\n\n$loading-line-center-sm-top: -22px;\n$loading-line-center-sm-left:-20px;\n$loading-line-center-top:-30px;\n$loading-line-center-left:-25px;\n$loading-line-center-lg-top:-50px;\n$loading-line-center-lg-left:-30px;\n\n\n//switch\n\n\n//color\n$switch-border-color: $gray-lighter;\n$switch-back-color: $gray-lighter;\n$switch-checked-borColor: $brand-primary;\n$switch-checked-backColor: $brand-primary;\n\n// border-radius of different state switch\n$switch-border-radius: 20px;\n$switch-border-radius-after: 18px;\n\n// width height line-height of the three switches\n$switch-width: (default:44px, small:32px, large:60px);\n$switch-height: (default:22px, small:16px, large:30px);\n$switch-lineHeight: (default:20px, small:12px, large:12px);\n\n// style of u-switch-inner\n$switch-inner-fontSize: (default:12px, small:10px, large:18px);\n$switch-inner-left: (default:22px, small:16px, large:30px);\n$switch-inner-largeTop: 8px;\n\n// style of u-switch:active:after\n$switch-active-width: (default:24px, small:16px, large:32px);\n\n// style of u-switch:after\n$switch-after-widthHeight: 18px;\n$switch-after-widthHeight-sm: 14px;\n$switch-after-widthHeight-lg: 26px;\n$switch-after-top: 1px;\n$switch-after-top-sm: 0;\n$switch-after-top-lg: 1px;\n$switch-after-left: 0;\n$switch-after-left-sm: 0;\n$switch-after-left-lg: 0;\n\n// style of u-switch.is-checked\n$switch-checked-innerLeft: (default:8px, small:4px, large:8px);\n$switch-checked-afterLeft: (default:24px, small:16px, large:32px);\n$switch-checked-activeLeft: (default:16px, small:10px, large:26px);\n\n$switch-primary-bg: $brand-primary;\n$switch-dark-bg: $brand-dark;\n$switch-success-bg: $brand-success;\n$switch-warning-bg: $brand-warning;\n$switch-danger-bg: $brand-danger;\n$switch-info-bg: $brand-info;\n\n//tabs\n\n$tabs-basic-back: #f5f5f5;\n$tabs-cls-color: #666;\n$tabs-cls-width: 900px;\n$tabs-simple-conHeight: 120px;\n$tabs-simple-conPad: 16px;\n$tabs-simple-conWidth: 100%;\n\n$tabs-fontSize: (simple:14px, fill:14px, turn:14px, slide:14px, fade:14px, fadeup:14px);\n$tabs-lineHeight: (simple:2.3, fill:2.3, turn:2.3, slide:2.3, fade:2.3, fadeup:2.3);\n$tabs-marginBottom: -1px;\n\n$tabs-simple-tab: (padding:0 16px, margin:5px 0 5px 5px, radius:0 0 0 0, back:#fff);\n$tabs-simple-tabBorder: 1px solid #fff;\n$tabs-simple-activeBorder: 1px solid $brand-primary;\n$tabs-simple-activeColor: #fff;\n$tabs-simple-activeBorBottom: 1px solid $brand-primary;\n$tabs-simple-activeTopRadius: 5px;\n$tabs-simple-fontWeight: bold;\n\n$tabs-fill-tab: (padding: 0 16px, color:#666, back:#fff, afterBack:#d2d8d6, activeBack:$brand-primary);\n$tabs-fill-tab-maright: 5px;\n$tabs-fill-after-top: 0;\n$tabs-fill-after-left: 0;\n$tabs-fill-after-width: 100%;\n$tabs-fill-after-height: 100%;\n$tabs-fill-fontWeight: bold;\n\n$tabs-turn-tab: (padding: 0 16px, color:#fff, back:#f5f5f5, afterBack:$brand-primary, activeBack:$brand-primary);\n$tabs-turn-after-top: 0;\n$tabs-turn-after-left: 0;\n$tabs-turn-after-width: 100%;\n$tabs-turn-after-height: 100%;\n$tabs-turn-beforeBot: 32px;\n$tabs-turn-beforeRight: 15px;\n$tabs-turn-fontWeight: bold;\n$tabs-moveleft-conHeight: 120px;\n$tabs-moveleft-conPad: 16px;\n\n$tabs-slide-tabs: (width:25%, padding: 0 16px, back:#f5f5f5);\n$tabs-slide-child-bottom: 0;\n$tabs-slide-child-left: 0;\n$tabs-slide-child-height: 4px;\n$tabs-slide-child-back: $brand-primary;\n$tabs-slide-fontWeight: bold;\n\n$tabs-fade-tab: (marLeft:5px, marTop:5px, color:#666, padding:0 16px, radius:0 0 0 0);\n$tabs-fade-conPad: 16px;\n$tabs-fade-conBor: 5px;\n\n$tabs-fadeup-tab: (marTop:5px, color:#666, padding:0 16px, radius:0 0 0 0);\n$tabs-fadeup-top: -5px;\n$tabs-fadeup-left: 0;\n$tabs-fadeup-width: 100%;\n$tabs-fadeup-height: 100%;\n$tabs-fadeup-color: #666;\n$tabs-fadeup-conHeight: 120px;\n$tabs-fadeup-conPad: 16px;\n\n\n//rate\n$rate-star-default-color:$gray-lightest;\n$rate-star-active-color:$brand-primary;\n$rate-star-marginRight:8px;\n//backtop\n$back-top-padding:5px;\n$backtop-background:unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n$backtop-color:unquote(\"rgb(#{$color-white})\") !default;\n$backtop-right:10px;\n$backtop-bottom:10px;\n$backtop-dom-right:40px;\n\n\n//dnd\n$dnd-list-background:unquote(\"rgb(#{$palette-grey-400})\")!default;\n$dnd-list-padding:8px;\n$dnd-list-dragging-background:unquote(\"rgb(#{$palette-light-blue-A200})\")!default;\n$dnd-item-color:unquote(\"rgb(#{$color-black})\")!default;\n$dnd-item-padding:16px;\n$dnd-item-margin:4px;\n$dnd-item-background:unquote(\"rgb(#{$palette-grey-500})\")!default;\n$dnd-item-dragging-background:unquote(\"rgb(#{$palette-blue-300})\")!default;\n\n// bee-tree\n$tree-checkbox-color: unquote(\"rgb(#{$primary-color})\") !default;\n$tree-node-bg-color: $hover-bg-color-base !default;\n\n// bee-table\n$table-head-background-color: unquote(\"rgb(#{$table-header-background-color})\") !default;\n$table-head-text-color: unquote(\"rgb(#{$table-header-text-color})\") !default;\n\n// bee-transfer\n$transfer-border-gap-color:#d9d9d9;\n\n// bee-transfer\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: $font-size-base;\r\n color: $font-color-base;\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 1s 0s linear infinite;\r\n animation: rotate 1s 0s linear infinite;\r\n text-align: center;\r\n line-height: $loading-rotate-size;\r\n & > img{\r\n width: $loading-rotate-size;\r\n }\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 & > img{\r\n width: $loading-rotate-lg-size;\r\n }\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 & > img{\r\n width: $loading-rotate-sm-size;\r\n }\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: .4;\r\n // filter: blur(.5px);\r\n background-color:rgba(255,255,255,0.4);\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 \"minxin-colors\";\n\n// 默认色\n$default-color: $palette-blue-grey-50;\n$default-color-dark: \"223,225,230\";\n$default-color-light: \"223,225,230\";\n\n// 主题色\n$primary-color: \"245, 60, 50\" !default;\n$primary-color-dark: \"230, 0, 18\" !default;\n$primary-color-light: \"230, 0, 18\" !default;\n\n// 字体\n$font-family-primary: \"Open Sans\", \"Helvetica Neue\", Arial, \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif !default;\n// 主字号\n$font-size-base: 14px !default;\n// 主按钮文本色\n$text-color-base: $color-dark-contrast !default; \n\n// 圆角,包括:button、select等\n$border-radius: 3px !default;\n// 边框色,包括按钮、输入框、分页\n$border-color: \"165, 173, 186\" !default;\n// 条目hover背景色,包括:select、dropdown、table、datepicker、tree、menu、calendar\n$item-hover-bg-color-base: \"235, 236, 240\" !default;\n// 条目selected背景色,包括:select、menu等\n$item-selected-bg-color-base: \"255, 247, 231\" !default;\n\n// Button 细化样式变量:\n// 次按钮背景色\n$secondary-color: $palette-blue-grey-50 !default;\n$secondary-color-dark: \"223,225,230\" !default;\n$secondary-color-light: \"223,225,230\" !default;\n// 次按钮文本色\n$button-secondary-text-color: $palette-grey-900 !default;\n\n// Table 细化样式变量:\n// 表头背景色\n$table-header-background-color: \"241, 242, 245\";\n// 表头文字颜色\n$table-header-text-color: \"33, 33, 33\";\n// 表格分割线颜色\n$table-border-color-base: \"193, 199, 208\";\n// 表格行hover背景色\n$table-row-hover-bg-color: \"235, 236, 240\";\n\n// 向下兼容\n$color-primary: $palette-blue-600 !default;\n$color-primary-dark: $palette-blue-800 !default;\n$color-primary-light: $palette-blue-400 !default;\n\n// 辅色\n$color-accent: $palette-green-600 !default;\n$color-accent-dark: $palette-green-800 !default;\n$color-accent-light: $palette-green-400 !default;\n\n\n// cyan主题\n//$color-primary: $palette-cyan-500 !default;\n//$color-primary-dark: $palette-cyan-700 !default;\n//$color-accent: $palette-light-blue-500 !default;\n\n// orange主题\n//$color-primary: $palette-orange-500 !default;\n//$color-primary-dark: $palette-orange-700 !default;\n//$color-accent: $palette-deep-orange-500 !default;\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: $font-color-base;\n$font-size-base: 12px;\n$line-height: 1.33;\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$first-horizontal-padding: 12px;\n// $table-border-color: #e9e9e9;\n\n$table-hover-color: #E7F2FC;\n$table-move-in-color: $bg-color-base;\n$checkbox-height:14px;\n$table-th-bottom-border:#C1C7D0;\n\n$filter-form-control-height:26px;\n$table-head-font-weight: bold;\n$icon-color:#505F79;\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: $table-head-font-weight;\n text-align: left;\n // transition: background 0.3s ease;\n line-height: 16px;\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 line-height: $line-height;\n a{\n color: #2196F3;\n &:hover{\n color: #1565c0;\n }\n &:active{\n color: #1565c0;\n }\n }\n }\n thead{\n tr:last-child{\n border-bottom: 1px solid $table-th-bottom-border;\n }\n tr>th:last-child{\n border-right: none; \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 &.text-center{\n text-align: center;\n }\n &.text-right{\n text-align: right;\n }\n .expand-icon-con{\n cursor: pointer;\n }\n }\n &-sm {\n td {\n padding: 8px $horizontal-padding;\n }\n }\n &-lg {\n td {\n padding: 16px $horizontal-padding;\n }\n }\n tr {\n \n &.filterable{\n th{\n padding-top: 5px !important;\n padding-bottom: 5px !important;\n .filterContext{\n height: 35px;\n }\n .u-select-selection--single{\n height: 26px;\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 \n .u-table-header>table {\n border-bottom: 0;\n }\n .u-table-header~.u-table-body,.u-table-header~.u-table-body-outer{\n table{\n border-top: 0px ;\n }\n }\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 $horizontal-padding;\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 .table-nodata{ \n font-size: 40px; \n line-height: 44px;\n + span{\n font-size: 12px;\n line-height: 12px;\n display: block;\n }\n }\n }\n\n &-expand-icon-col {\n width: 10px;\n }\n &-row,\n &-expanded-row {\n .u-table{\n tr{\n background: #fff;\n }\n tr.u-table-row-hover{\n background:unquote(\"rgb(#{$table-row-hover-bg-color})\");\n }\n }\n &-expand-icon {\n cursor: pointer;\n display: inline-block;\n margin-right: 0px;\n width: 14px;\n height: 14px;\n text-align: center;\n line-height: 14px;\n user-select: none;\n margin-right: 10px;\n &.uf{\n font-size: 12px;\n padding: 0;\n }\n }\n &-spaced {\n visibility: hidden;\n }\n &-spaced:after {\n content: \".\";\n }\n &-expanded {\n &:after {\n content: \"\\e639\";\n font-family: \"uf\" !important;\n }\n }\n &-collapsed {\n &:after {\n content: \"\\e61c\";\n font-family: \"uf\" !important;\n }\n }\n }\n &-row{\n &.selected{\n background: #FFF7E7;\n }\n }\n tr.u-table-expanded-row {\n background: #DFE1E6;\n &:hover {\n background: #DFE1E6;\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: 16px;\n vertical-align: middle;\n text-align: center;\n display: inline-block;\n margin-top: -3px;\n i{\n padding: 0px;\n font-weight: 600;\n color: $icon-color;\n }\n \n & > .bee-table-column-sorter-down,\n & > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat {\n line-height: 16px;\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 //为了区分是拖拽宽度还是交换列,先注释上面了\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: auto;\n color:#212121;\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 width: 30px;\n height: 39px ;\n line-height: 39px;\n right: 0px ;\n top:1px ;\n z-index: 2;\n background: $table-head-background-color;\n text-align: center;\n cursor: pointer;\n i.uf{\n padding: 0px;\n color: $icon-color;\n }\n }\n &-pop-cont-item{\n margin-top: 8px;\n font-size: 12px;\n // line-height: 30px;\n cursor: pointer;\n .u-checkbox {\n margin: 0px;\n\n }\n }\n &-pop-cont-item span.drop-menu-title{\n margin-left: -3px;\n max-width: 132px;\n width: auto !important;\n min-width: 56px;\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 display: block;\n margin-left: 5px;\n .u-checkbox-label{\n line-height: $checkbox-height;\n padding-left: 16px;\n &:before,&:after {\n width: $checkbox-height;\n height: $checkbox-height;\n }\n }\n }\n .u-table-scroll,.u-table-fixed-left{\n tr{\n td:first-child, th:first-child{\n padding-left: $first-horizontal-padding\n }\n }\n }\n &.has-fixed-left{\n .u-table-scroll{\n tr{\n td:first-child, th:first-child{\n padding-left: $horizontal-padding\n }\n }\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 }\n\n .row-dragg-able{\n cursor:move;\n }\n .u-table-drag-hidden-cont{\n width: 100px;\n height: 40px;\n }\n\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: $filter-form-control-height;\n height: $filter-form-control-height;\n padding: 0px 16px 0 16px;\n cursor: pointer;\n }\n }\n}\n.filter-wrap {\n .u-form-control{\n height: $filter-form-control-height;\n }\n .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {\n height: $filter-form-control-height;\n }\n .calendar-picker {\n .u-input-group-btn{\n line-height: 20px;\n }\n }\n .u-input-number.u-input-group.simple .u-input-group-btn .icon-group .uf{\n line-height: 12px;\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\n// 表格显示里面的内容显示在一行\n.header-dispaly-in-row{\n &.u-table{\n table{\n table-layout: fixed;\n }\n }\n th{\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle;\n overflow: hidden;\n }\n}\n.body-dispaly-in-row{\n &.u-table{\n table{\n table-layout: fixed;\n }\n \n }\n td{\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle;\n overflow: hidden;\n }\n}\n.u-table-drag-hidden-cont{\n position: absolute;\n top:-1000px;\n}\n\n.u-editable-table .u-table {\n .u-table-row-hover {\n .editable-cell-text-wrapper {\n padding-left: 4px;\n border: 1px solid #c1c7d0;\n }\n }\n\n .editable-cell-text-wrapper {\n &:hover {\n padding-left: 4px;\n border: 1px solid #a5adba;\n }\n }\n\n .editable-cell-input-wrapper {\n &:focus {\n outline: none;\n }\n }\n}\n\n.u-editable-table-tp {\n .tooltip-arrow {\n top: 1px !important;\n border-bottom-color: #F44336 !important;\n }\n\n .tooltip-inner {\n border-color: #F44336 !important;\n }\n}\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-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: #FFF7E7;\n}\n\n.demo25{\n height: 100%;\n\n .u-table-filter-column-filter-icon{\n right: 15px;\n }\n\n}\n.opt-btns .u-button{\n margin: 0 4px;\n color: #fff;\n background: #505F79;\n border-color: #505F79;\n &:hover, &:active{\n background: #344563;\n border-color: #505F79;\n }\n}",".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}",".demo22{\n .opt-btns{\n margin-bottom: 8px;\n }\n}",".demo32{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}",".demo0501 .u-table {\n .u-row-hover {\n .opt-btns,.cancel-btns {\n button {\n margin: 0;\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n }\n\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}",".u-editable-table .u-table {\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n padding-left: 5px;\n font-size: 12px;\n\n &.error {\n border-color: #F44336;\n }\n }\n }\n\n .editable-cell {\n height: 30px;\n }\n\n &-hover {\n .editable-cell-text-wrapper {\n line-height: 19px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .editable-cell-input-wrapper {\n padding-right: 0;\n .ref-input-wrap {\n width: auto !important;\n height: 30px;\n .u-input-group{\n display: inline-block;\n }\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .require {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}",".demo0503-m-b {\n\n &.u-modal .u-modal-body {\n padding: 16px 0;\n background: #f7f9fb;\n }\n\n .u-form-group {\n overflow: hidden;\n }\n\n .u-form-control {\n font-size: 12px;\n }\n\n .editable-cell {\n display: block;\n float: left;\n width: 265px;\n padding-right: 25px;\n }\n\n .ref-input-wrap {\n width: 240px !important;\n }\n\n .u-label {\n display: block;\n float: left;\n text-align: right;\n width: 110px;\n box-sizing: border-box;\n padding-right: 10px;\n font-size: 12px;\n height: 32px;\n line-height: 32px;\n .mast {\n padding: 0;\n color: red;\n }\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n z-index: 9999 !important;\n\n .tp-content {\n color: #F44336;\n }\n}\n.ref-core-button .u-button:first-child{\n margin-right: 8px;\n}",".demo0505 {\n\n .toolbar-btns {\n margin-bottom: 8px;\n\n .u-button {\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n\n .u-table {\n .u-row-select {\n background-color: #FFF7E7;\n }\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .edited::after {\n content: \" \";\n position: absolute;\n z-index: 999;\n top: 0;\n left: 0;\n border-width: 5px;\n border-style: solid;\n border-color: #f44336 transparent transparent #f44336;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\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",".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}"],"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","../node_modules/tinper-bee-core/scss/minxin-themeColors.scss","../src/Table.scss","TableDemo.scss","demolist/Demo0104.scss","demolist/Demo0302.scss","demolist/Demo0402.scss","demolist/Demo0501.scss","demolist/Demo0502.scss","demolist/Demo0503.scss","demolist/Demo0505.scss","demolist/Demo0603.scss","demolist/Demo1601.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,gBCfmB;EDgBnB,eDYuB;ECXvB,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,wCAAwC;EACxC,mBAAmB;EACnB,kBDsvCmB,EC7uCpB;EA9BL;IAuBQ,YDovCiB,ECnvClB;EAxBP;IA0BQ,eA9DoB;IA+DpB,gBAAgB;IAChB,WAAW,EACZ;;AA7BP;EAiCQ,mBD0vCuB;ECzvCvB,kBDyvCuB;ECxvCvB,YDyuCoB;ECxuCpB,aDwuCoB;ECvuCpB,kBDuuCoB,EChuCrB;EA5CP;IAuCU,YDquCkB,ECpuCnB;EAxCT;IA0CU,gBAAgB,EACjB;;AA3CT;EAgDQ,mBDyuCwB;ECxuCxB,kBDwuCwB;ECvuCxB,YDwtCqB;ECvtCrB,aDutCqB;ECttCrB,kBDstCqB,EC/sCtB;EA3DP;IAsDU,YDotCmB,ECntCpB;EAvDT;IAyDU,gBAAgB,EACjB;;AA1DT;EA+DQ,eDmrCiB,EChrClB;;AAlEP;EAsEQ,eD6qCqB,EC1qCtB;;AAzEP;EA6EQ,eDuqCc,ECpqCf;;AAMP;EACE,mBAAmB;EACnB,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,cAAc;EAGd,2CAAqB,EAItB;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,SD6pCmB;EC5pCnB,UD6pCoB;EC5pCpB,kBDoqC0B;ECnqC1B,mBDoqC2B,EClnC5B;EAxDH;IAQM,0BAA0B;IAC1B,WDipCiB;IChpCjB,aDipCmB;IChpCnB,mBAAmB;IACnB,YAAY;IAEZ,0BAA0B;IAC1B,sBAAsB,EACvB;EAhBL;IAkBM,kBDypC2B;ICxpC3B,mBDypC4B,ECppC7B;IAxBL;MAqBQ,WDuoCkB;MCtoClB,aDuoCoB,ECtoCrB;EAvBP;IA0BM,kBD6oC4B;IC5oC5B,mBD6oC4B,ECxoC7B;IAhCL;MA6BQ,WD2nCmB;MC1nCnB,aD2nCoB,EC1nCrB;EA/BP;IAoCQ,2ED4lC0C;IC3lC1C,0BDkmCU,ECjmCX;EAtCP;IAoCQ,2ED6lC0C;IC5lC1C,0BDmmCU,EClmCX;EAtCP;IAoCQ,2ED8lC0C;IC7lC1C,0BDomCU,ECnmCX;EAtCP;IAoCQ,2ED+lC0C;IC9lC1C,0BDqmCU,ECpmCX;EAtCP;IAoCQ,2EDgmC0C;IC/lC1C,0BDsmCU,ECrmCX;EAtCP;IA2CQ,0BDilCiB,EChlClB;EA5CP;IAgDQ,0BD6kCqB,EC5kCtB;EAjDP;IAqDQ,0BDykCc,ECxkCf;;AAIP;EACE;IAEE,qBAAiB,EAAA;EAGnB;IAEE,uBAAiB,EAAA;EAGnB;IAEE,qBAAiB,EAAA,EAAA;;AE7MrB;EACE,gBApBmB;EAqBnB,eHiBuB;EGfvB,mBAAmB;EACnB,kBAvBgB;EAwBhB,iBAAiB,EAsoBlB;EA5oBD;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,kBA9ByB;IA+BzB,iBAAiB;IAEjB,kBAAkB,EAOnB;IAtCH;MAiCM,mBAAmB,EACpB;IAlCL;MAoCM,iBAAiB,EAClB;EArCL;IAyCI,4CAzDwB;IA0DxB,kBA5Dc,EAsEf;IApDH;MA4CM,eAAe,EAOhB;MAnDL;QA8CQ,eAAe,EAChB;MA/CP;QAiDQ,eAAe,EAChB;EAlDP;IAuDM,iCA5DyB,EA6D1B;EAxDL;IA0DM,mBAAmB,EACpB;EA3DL;IAmEU,+BAA+B,EAChC;EApET;IAwEM,eAAe,EAOhB;IA/EL;MA0EQ,eAAe,EAChB;IA3EP;MA6EQ,eAAe,EAChB;EA9EP;IAkFI,+BH0GyB,EGzG1B;EAnFH;;IAuFI,kBAnGoB;IAoGpB,sBAAsB,EAUvB;IAlGH;;MA0FM,mBAAmB,EACpB;IA3FL;;MA6FM,kBAAkB,EACnB;IA9FL;;MAgGM,gBAAgB,EACjB;EAjGL;IAqGM,iBAjHkB,EAkHnB;EAtGL;IA0GM,kBAtHkB,EAuHnB;EA3GL;IAiHQ,4BAA4B;IAC5B,+BAA+B,EAOhC;IAzHP;MAoHU,aAAa,EACd;IArHT;MAuHU,aAAa,EACd;EAxHT;IA6HI,+BAAkB,EACnB;EA9HH;IAiII,eAAe,EAChB;EAlIH;IAqIM,qCArJsB;IAsJtB,uBAAuB;IACvB,oBAAoB,EAErB;EAzIL;IA4IQ,iBAAiB,EACpB;EA7IL;IAgJQ,gBAAiB,EAClB;EAjJP;IAqJM,4CArKsB;IAsKtB,uBAAuB,EACxB;EAvJL;;IA0JM,2CA1KsB;IA2KtB,uBAAuB,EACxB;EA5JL;IAiKQ,iBAAiB,EAClB;EAlKP;IAsKI,iBAAiB;IACjB,+BHwxCiC;IGvxCjC,uBHwxC2B,EGvxC5B;EAzKH;IA4KI,iBAxLoB,EAyLrB;EA7KH;IAgLI,iBAAiB;IACjB,mBAAmB,EACpB;EAlLH;IAoLI,oBAAoB;IACpB,oBAAoB,EACrB;EAtLH;IAyLI,mBAAmB,EACpB;EA1LH;IA6LI,aAAa;IACb,iBAAiB,EAClB;EA/LH;IAmMI,mBAAmB;IACnB,qBAAqB;IACrB,qBAAqB;IACrB,mBAAmB;IACnB,uBAAuB,EACxB;EAxMH;IA2MI,kBAvNoB;IAwNpB,yCA5NwB,EA6NzB;EA7MH;IAgNI,mBAAmB,EACpB;EAjNH;IAoNI,kBAhOoB;IAiOpB,4CArOwB,EAyOzB;IAzNH;MAuNM,mBAAmB,EACpB;EAxNL;IA2NI,mBAvOoB,EAwOrB;EA5NH;IA+NI,kBAA8B;IAC9B,iBAAiB;IACjB,4CAjPwB;IAkPxB,mBAAmB;IACnB,mBAAmB,EAUpB;IA7OH;MAqOM,gBAAgB;MAChB,kBAAkB,EAMnB;MA5OL;QAwOQ,gBAAgB;QAChB,kBAAkB;QAClB,eAAe,EAChB;EA3OP;IAgPI,YAAY,EACb;EAjPH;IAsPQ,iBAAiB,EAClB;EAvPP;IAyPQ,+BAAkB,EACnB;EA1PP;IA6PM,gBAAgB;IAChB,sBAAsB;IACtB,kBAAkB;IAClB,YAAY;IACZ,aAAa;IACb,mBAAmB;IACnB,kBAAkB;IAClB,0BAAkB;IAAlB,uBAAkB;IAAlB,sBAAkB;IAAlB,kBAAkB;IAClB,mBAAmB,EAKpB;IA1QL;MAuQQ,gBAAgB;MAChB,WAAW,EACZ;EAzQP;IA4QM,mBAAmB,EACpB;EA7QL;IA+QM,aAAa,EACd;EAhRL;IAmRQ,iBAAiB;IACjB,6BAA6B,EAC9B;EArRP;IAyRQ,iBAAiB;IACjB,6BAA6B,EAC9B;EA3RP;IAgSM,oBAAoB,EACrB;EAjSL;IAoSI,oBAAoB,EAQrB;IA5SH;MAsSM,oBAAoB,EACrB;IAvSL;MA0SM,WAAW,EACZ;EA3SL;IA8SI,cAAc,EACf;EA/SH;IAkTI,gBAAgB;IAChB,YAAY;IACZ,WAAW,EAWZ;IA/TH;MAsTM,eAAe,EAChB;IAvTL;MAyTM,oBAAoB;MACpB,YAAY,EAIb;MA9TL;QA4TQ,YAAY,EACb;EA7TP;IAiUI,kBAAkB,EAInB;IArUH;MAmUM,aAAa,EACd;EApUL;IAuUI,aAAa,EAId;IA3UH;MAyUM,aAAa,EACd;EA1UL;IA+UI,mBAAmB;IACnB,OAAO;IACP,iBAAiB;IACjB,WAAW,EAKZ;IAvVH;MAoVM,YAAY;MACZ,iBAAiB,EAClB;EAtVL;IA0VI,QAAQ;IACR,+CAA0B,EAQ3B;IAnWH;MA6VM,oBAAoB;MACpB,oBAAoB,EACrB;IA/VL;MAiWM,iBAAiB,EAClB;EAlWL;IAsWI,SAAS;IACT,gDAA2B,EAS5B;IAhXH;MA4WM,mBAAmB;MACnB,qBAAqB,EACtB;EA9WL;IAmXI,iBAAiB,EAClB;EApXH;IAuXI,iBAAiB,EAClB;EAxXH;IA4XM,oBAAoB,EACrB;EA7XL;IA+XM,qBAAc;IAAd,cAAc;IACd,sBAAwB;IAAxB,wBAAwB;IACxB,uBAAoB;IAApB,oBAAoB,EAIrB;IArYL;MAmYQ,gBAAgB,EACjB;EApYP;IAuYM,+BHwjC+B;IGvjC/B,uBHwjCyB;IGvjCzB,6BAA4B;IAE5B,4BAA4B;IAE5B,0BAA0B;IAC1B;;QAEE;IACA,sBAAsB;IACtB,kBAAkB,EA+DrB;IAjdL;MAwZQ,mBAAmB;MACnB,iBAAiB;MACjB,aAAa;MACb,uBAAuB;MACvB,mBAAmB;MACnB,sBAAsB;MACtB,iBAAiB,EAelB;MA7aP;QAgaU,aAAa;QACb,iBAAiB;QACjB,eAnaS,EAoaV;MAnaT;;QAuaU,kBAAkB;QAClB,eAAe;QACf,YAAY;QACZ,gBAAgB,EACjB;IA3aT;;;;MAmbQ,eAAe,EAChB;IApbP;;MAwbQ,aAAa;MACb,gBAAgB,EACjB;IA1bP;;MA6bQ,sBAAsB;MACtB,WAAW;MACX,gBAAgB;MAChB,iBAAiB;MAGjB,uCAAmC;MACnC,+GAA+G;MAC/G,QAAQ;MACR,iBAAiB;MACjB,YAAY;MACZ,YAAY,EAGb;IA3cP;MA8cY,sBAAsB,EACzB;EA/cT;IAmdM,aAAa,EACd;EApdL;IAsdM,+BH1RuB,EG4RxB;EAxdL;IA8dM,iBAAiB,EAClB;EA/dL;IAieM,mBAAmB,EAgCpB;IAjgBL;MAoeQ,aAAa;MACb,mBAAmB;MACnB,aAAa;MACb,OAAO;MAIP,YAAY;MAEZ,uBAAuB;MACvB,WAAW,EAYZ;MA1fP;QAifU,aAAa;QACb,WAAW;QACX,wBAAuB;QACvB,eAAe,EAChB;MArfT;QAufU,oBAAmB,EACpB;IAxfT;MA4fQ,mBAAmB,EAIpB;MAhgBP;QA8fU,oBACD,EAAC;EA/fV;IAogBQ,aAAa,EACd;EArgBP;IA6gBM,YAAY;IACZ,kBAAkB;IAClB,iBAAiB;IACjB,eAAc,EACf;EAjhBL;IAohBM,gBAAgB;IAChB,mBAAmB,EACpB;EAthBL;IAwhBM,mBAAmB,EACpB;EAzhBL;IA2hBM,mBAAmB;IACnB,YAAY;IACZ,aAAc;IACd,kBAAkB;IAClB,WAAY;IACZ,SAAS;IACT,WAAW;IACX,+BH65B+B;IG55B/B,mBAAmB;IACnB,gBAAgB,EAKjB;IAziBL;MAsiBQ,aAAa;MACb,eAxiBW,EAyiBZ;EAxiBP;IA2iBM,gBAAgB;IAChB,gBAAgB;IAEhB,gBAAgB,EAKjB;IAnjBL;MAgjBQ,YAAY,EAEb;EAljBP;IAqjBM,kBAAkB;IAClB,iBAAiB;IACjB,uBAAuB;IACvB,gBAAgB;IAChB,iBAAiB;IACjB,wBAAwB;IACxB,oBAAoB;IACpB,sBAAsB;IACtB,uBAAuB,EACxB;EA9jBL;IAgkBM,uBAAuB;IACvB,iBAAiB,EAClB;EAlkBL;IAukBI,cAAa;IACb,qBAAqB,EACtB;EAzkBH;IA4kBI,aAllBiB;IAmlBjB,kBAnlBiB;IAolBjB,YAAW;IACX,eAAe;IACf,iBAAiB,EASlB;IAzlBH;MAklBM,kBAxlBe;MAylBf,mBAAmB,EAKpB;MAxlBL;QAqlBQ,YA3lBa;QA4lBb,aA5lBa,EA6lBd;EAvlBP;IA6lBQ,mBAxmBuB,EAymBxB;EA9lBP;IAqmBU,kBAjnBc,EAknBf;EAtmBT;IA4mBI,WAAW;IACX,YAAY,EACb;EA9mBH;IAgnBI,cAAc,EACf;EAjnBH;IAmnBI,+BAA+B;IAC/B,mBAAmB,EACpB;EArnBH;IAunBI,mBAAmB;IACnB,0BAA0B;IAC1B,mBAAmB,EACpB;EA1nBH;IA6nBI,cAAc,EACf;EA9nBH;IAioBI,cAAc,EACf;EAloBH;IAqoBI,aAAY,EACb;EAtoBH;IAwoBI,aAAa;IACb,aAAa,EACd;;AAIH;EACE,cAAc;EAGd,kBAAkB,EACnB;;AAEC;EAEI,oBAAmB,EACpB;;AAEL;EAEI,0BAA0B,EAC3B;;AAHH;;EAMI,qCAhrBwB,EAirBzB;;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,6BH9pBkB,EAAA;EGgqBpB;IACE,sBAAsB;IACtB,yBAAqB;IACrB,WAAW,EAAA;EAEb;IACE,6BHtqBkB,EAAA;EGwqBpB;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,kBA34BoB;IA44BpB,aA54BoB;IA64BpB,yBAAyB;IACzB,gBAAgB,EACnB;;AAGT;EAEI,aAp5B4B,EAq5B7B;;AAHH;EAKI,aAv5B4B,EAw5B7B;;AANH;EASM,kBAAkB,EACnB;;AAVL;EAaI,kBAAkB,EACnB;;AAEH;EACE,mBAAmB;EACnB,YAAY;EACZ,cAAc;EACd,uBAAoB;EAApB,oBAAoB;EACpB,sBAAwB;EAAxB,wBAAwB;EACxB,wBAAwB,EACzB;;AAED;EACE,mBAAmB;EACnB,UAAU,EACX;;AAKD;EAGM,oBAAoB,EACrB;;AAJL;EAOI,wBAAwB;EACxB,oBAAoB;EACpB,uBAAuB;EACvB,iBAAiB,EAClB;;AAEH;EAGM,oBAAoB,EACrB;;AAJL;EAQI,wBAAwB;EACxB,oBAAoB;EACpB,uBAAuB;EACvB,iBAAiB,EAClB;;AAEH;EACE,mBAAmB;EACnB,aAAY,EACb;;AAED;EAGM,kBAAkB;EAClB,0BAA0B,EAC3B;;AALL;EAUM,kBAAkB;EAClB,0BAA0B,EAC3B;;AAZL;EAiBM,cAAc,EACf;;AAIL;EAEI,oBAAoB;EACpB,wCAAwC,EACzC;;AAJH;EAOI,iCAAiC,EAClC;;ACh/BH;EACE,oBAAoB,EACrB;;AAED;EACE,aAAa,EAMd;EAPD;IAII,YAAY,EACb;;AAGH;EACE,cAAc;EACd,YAAY;EACZ,oBAAoB;EACpB,sBAAsB,EAKvB;EATD;IAMI,oBAAoB;IACpB,sBAAsB,EACvB;;AC1CH;EAEQ,oBAAoB,EACvB;;AAHL;EAKQ,oBAAoB,EACvB;;ACNL;EAEQ,mBAAmB,EACtB;;ACHL;EAEQ,iBAAiB;EACjB,oBAAoB,EACvB;;ACJL;EAIQ,UAAU,EAIX;EARP;IAMU,kBAAkB,EACnB;;AAPT;EAcM,iBAAiB,EAMlB;EApBL;IAiBQ,gBAAgB;IAChB,kBAAkB,EACnB;;AAnBP;;EAwBM,aAAa,EACd;;AAzBL;EA6BI,uBAAuB;EACvB,kBAAkB;EAClB,mBAAmB,EACpB;;AAhCH;EAmCI,kBAAkB;EAClB,mBAAmB,EAepB;EAnDH;IAuCM,aAAa;IACb,0BAA0B;IAC1B,SAAS;IACT,aAAa;IACb,mBAAmB;IACnB,SAAS;IACT,WAAW,EACZ;EA9CL;IAiDM,eACD,EAAC;;AAlDN;EAqDI,+BAA+B,EAChC;;AAtDH;EAyDI,mBAAmB;EACnB,SAAS;EACT,eAAe;EACf,gBAAgB,EACjB;;AA7DH;EAgEI,wBAAwB,EACzB;;AAGH;EAEI,eAAe,EAChB;;ACvEH;EAGM,iBAAiB,EAUlB;EAbL;IAMQ,kBAAkB;IAClB,gBAAgB,EAKjB;IAZP;MAUU,sBAAsB,EACvB;;AAXT;EAgBM,aAAa,EACd;;AAjBL;EAqBQ,kBAAkB,EACnB;;AAtBP;;EA2BM,aAAa,EACd;;AA5BL;EAgCI,uBAAuB;EACvB,kBAAkB;EAClB,mBAAmB,EACpB;;AAnCH;EAsCI,iBAAiB,EAQlB;EA9CH;IAwCM,uBAAuB;IACvB,aAAa,EAId;IA7CL;MA2CQ,sBAAsB,EACvB;;AA5CP;EAiDI,+BAA+B,EAChC;;AAlDH;EAqDI,mBAAmB;EACnB,SAAS;EACT,eAAe;EACf,gBAAgB,EACjB;;AAGH;EAEI,eAAe,EAChB;;AC/DH;EAGI,gBAAgB;EAChB,oBAAoB,EACrB;;AALH;EAQI,iBAAiB,EAClB;;AATH;EAYI,gBAAgB,EACjB;;AAbH;EAgBI,eAAe;EACf,YAAY;EACZ,aAAa;EACb,oBAAoB,EACrB;;AApBH;EAuBI,wBAAwB,EACzB;;AAxBH;EA2BI,eAAe;EACf,YAAY;EACZ,kBAAkB;EAClB,aAAa;EACb,uBAAuB;EACvB,oBAAoB;EACpB,gBAAgB;EAChB,aAAa;EACb,kBAAkB,EAKnB;EAxCH;IAqCM,WAAW;IACX,WAAW,EACZ;;AAvCL;EA2CI,mBAAmB;EACnB,SAAS;EACT,eAAe;EACf,gBAAgB,EACjB;;AAGH;EACE,yBAAyB,EAK1B;EAND;IAII,eAAe,EAChB;;AAEH;EACE,kBAAkB,EACnB;;AC3DD;EAGI,mBAAmB,EAOpB;EAVH;IAOQ,kBAAkB,EACnB;;AARP;EAcM,0BAA0B,EAC3B;;AAfL;EAkBQ,iBAAiB,EAMlB;EAxBP;IAqBU,gBAAgB;IAChB,kBAAkB,EACnB;;AAvBT;;EA4BQ,aAAa,EACd;;AA7BP;EAiCM,uBAAuB;EACvB,kBAAkB;EAClB,mBAAmB,EACpB;;AApCL;EAuCM,kBAAkB;EAClB,mBAAmB,EAepB;EAvDL;IA2CQ,aAAa;IACb,0BAA0B;IAC1B,SAAS;IACT,aAAa;IACb,mBAAmB;IACnB,SAAS;IACT,WAAW,EACZ;EAlDP;IAqDQ,eACD,EAAC;;AAtDR;EA0DM,+BAA+B,EAChC;;AA3DL;EA8DM,aAAa;EACb,mBAAmB;EACnB,aAAa;EACb,OAAO;EACP,QAAQ;EACR,kBAAkB;EAClB,oBAAoB;EACpB,sDAAsD,EACvD;;AAtEL;EAyEM,mBAAmB;EACnB,SAAS;EACT,eAAe;EACf,gBAAgB,EACjB;;AA7EL;EAgFM,wBAAwB,EACzB;;AAIL;EAEI,eAAe,EAChB;;ACxFH;EAGY,gBAAgB;EAChB,mBAAmB;EACnB,kBAAkB,EACrB;;AANT;EAYgB,oBAAoB,EAC3B;;;ACbT;EAEQ,oBAAoB,EACvB;;AAHL;EAKQ,qBAAc;EAAd,cAAc;EACd,uBAAoB;EAApB,oBAAoB;EACpB,sBAAwB;EAAxB,wBAAwB,EAC3B","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: 14px;\n color: #212121;\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 1s 0s linear infinite;\n animation: rotate 1s 0s linear infinite;\n text-align: center;\n line-height: 40px; }\n .u-loading.u-loading-rotate > div > img {\n width: 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 > img {\n width: 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 > img {\n width: 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 background-color: rgba(255, 255, 255, 0.4); }\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: #212121;\n position: relative;\n line-height: 1.33;\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 line-height: 16px; }\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 line-height: 1.33; }\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 thead tr:last-child {\n border-bottom: 1px solid #C1C7D0; }\n .u-table thead tr > th:last-child {\n border-right: none; }\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 th.text-center,\n .u-table td.text-center {\n text-align: center; }\n .u-table th.text-right,\n .u-table td.text-right {\n text-align: right; }\n .u-table th .expand-icon-con,\n .u-table td .expand-icon-con {\n cursor: pointer; }\n .u-table-sm td {\n padding: 8px 8px; }\n .u-table-lg td {\n padding: 16px 8px; }\n .u-table tr.filterable th {\n padding-top: 5px !important;\n padding-bottom: 5px !important; }\n .u-table tr.filterable th .filterContext {\n height: 35px; }\n .u-table tr.filterable th .u-select-selection--single {\n height: 26px; }\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 .u-table-header > table {\n border-bottom: 0; }\n .u-table-bordered .u-table-header ~ .u-table-body table, .u-table-bordered .u-table-header ~ .u-table-body-outer table {\n border-top: 0px; }\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(241, 242, 245);\n color: rgb(33, 33, 33); }\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-placeholder .table-nodata {\n font-size: 40px;\n line-height: 44px; }\n .u-table-placeholder .table-nodata + span {\n font-size: 12px;\n line-height: 12px;\n display: block; }\n .u-table-expand-icon-col {\n width: 10px; }\n .u-table-row .u-table tr, .u-table-expanded-row .u-table tr {\n background: #fff; }\n .u-table-row .u-table tr.u-table-row-hover, .u-table-expanded-row .u-table tr.u-table-row-hover {\n background: rgb(235, 236, 240); }\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: 14px;\n height: 14px;\n text-align: center;\n line-height: 14px;\n user-select: none;\n margin-right: 10px; }\n .u-table-row-expand-icon.uf, .u-table-expanded-row-expand-icon.uf {\n font-size: 12px;\n padding: 0; }\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: \"\\e639\";\n font-family: \"uf\" !important; }\n .u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {\n content: \"\\e61c\";\n font-family: \"uf\" !important; }\n .u-table-row.selected {\n background: #FFF7E7; }\n .u-table tr.u-table-expanded-row {\n background: #DFE1E6; }\n .u-table tr.u-table-expanded-row:hover {\n background: #DFE1E6; }\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(241, 242, 245);\n color: rgb(33, 33, 33);\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: 16px;\n vertical-align: middle;\n text-align: center;\n display: inline-block;\n margin-top: -3px; }\n .u-table-thead th .bee-table-column-sorter i {\n padding: 0px;\n font-weight: 600;\n color: #505F79; }\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: 16px;\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: auto;\n color: #212121; }\n .u-table-filter-column-clear-setting {\n cursor: pointer;\n margin-bottom: 4px; }\n .u-table-filter-column-cont {\n position: relative; }\n .u-table-filter-column-filter-icon {\n position: absolute;\n width: 30px;\n height: 39px;\n line-height: 39px;\n right: 0px;\n top: 1px;\n z-index: 2;\n background: rgb(241, 242, 245);\n text-align: center;\n cursor: pointer; }\n .u-table-filter-column-filter-icon i.uf {\n padding: 0px;\n color: #505F79; }\n .u-table-filter-column-pop-cont-item {\n margin-top: 8px;\n font-size: 12px;\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.drop-menu-title {\n margin-left: -3px;\n max-width: 132px;\n width: auto !important;\n min-width: 56px;\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: 14px;\n line-height: 14px;\n margin: 0px;\n display: block;\n margin-left: 5px; }\n .u-table .u-checkbox .u-checkbox-label {\n line-height: 14px;\n padding-left: 16px; }\n .u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {\n width: 14px;\n height: 14px; }\n .u-table .u-table-scroll tr td:first-child, .u-table .u-table-scroll tr th:first-child, .u-table .u-table-fixed-left tr td:first-child, .u-table .u-table-fixed-left tr th:first-child {\n padding-left: 12px; }\n .u-table.has-fixed-left .u-table-scroll tr td:first-child, .u-table.has-fixed-left .u-table-scroll tr th:first-child {\n padding-left: 8px; }\n .u-table ::-webkit-scrollbar {\n width: 8px;\n height: 8px; }\n .u-table ::-webkit-scrollbar-button {\n display: none; }\n .u-table ::-webkit-scrollbar-thumb {\n background: #d5d5d5 !important;\n border-radius: 5px; }\n .u-table ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: #d5d5d5;\n position: absolute; }\n .u-table ::-webkit-scrollbar-track {\n display: none; }\n .u-table ::-webkit-scrollbar-track-piece {\n display: none; }\n .u-table .row-dragg-able {\n cursor: move; }\n .u-table .u-table-drag-hidden-cont {\n width: 100px;\n height: 40px; }\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: 26px;\n height: 26px;\n padding: 0px 16px 0 16px;\n cursor: pointer; }\n\n.filter-wrap .u-form-control {\n height: 26px; }\n\n.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {\n height: 26px; }\n\n.filter-wrap .calendar-picker .u-input-group-btn {\n line-height: 20px; }\n\n.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group .uf {\n line-height: 12px; }\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.header-dispaly-in-row.u-table table {\n table-layout: fixed; }\n\n.header-dispaly-in-row th {\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle;\n overflow: hidden; }\n\n.body-dispaly-in-row.u-table table {\n table-layout: fixed; }\n\n.body-dispaly-in-row td {\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle;\n overflow: hidden; }\n\n.u-table-drag-hidden-cont {\n position: absolute;\n top: -1000px; }\n\n.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {\n padding-left: 4px;\n border: 1px solid #c1c7d0; }\n\n.u-editable-table .u-table .editable-cell-text-wrapper:hover {\n padding-left: 4px;\n border: 1px solid #a5adba; }\n\n.u-editable-table .u-table .editable-cell-input-wrapper:focus {\n outline: none; }\n\n.u-editable-table-tp .tooltip-arrow {\n top: 1px !important;\n border-bottom-color: #F44336 !important; }\n\n.u-editable-table-tp .tooltip-inner {\n border-color: #F44336 !important; }\n\n.selected {\n background: #FFF7E7; }\n\n.demo25 {\n height: 100%; }\n .demo25 .u-table-filter-column-filter-icon {\n right: 15px; }\n\n.opt-btns .u-button {\n margin: 0 4px;\n color: #fff;\n background: #505F79;\n border-color: #505F79; }\n .opt-btns .u-button:hover, .opt-btns .u-button:active {\n background: #344563;\n border-color: #505F79; }\n\n.demo04.u-table tr:nth-child(2n) {\n background: #f7f9fb; }\n\n.demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {\n background: #ebecf0; }\n\n.demo22 .opt-btns {\n margin-bottom: 8px; }\n\n.demo32 .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px; }\n\n.demo0501 .u-table .u-row-hover .opt-btns button, .demo0501 .u-table .u-row-hover .cancel-btns button {\n margin: 0; }\n .demo0501 .u-table .u-row-hover .opt-btns button:first-child, .demo0501 .u-table .u-row-hover .cancel-btns button:first-child {\n margin-right: 8px; }\n\n.demo0501 .u-table .u-table-row td {\n padding: 5px 8px; }\n .demo0501 .u-table .u-table-row td input {\n font-size: 12px;\n padding-left: 5px; }\n\n.demo0501 .u-table .u-table-row .u-form-control,\n.demo0501 .u-table .u-table-row .u-select-selection {\n height: 30px; }\n\n.demo0501 .u-table .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px; }\n\n.demo0501 .u-table .required {\n margin-left: 10px;\n position: relative; }\n .demo0501 .u-table .required::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px; }\n .demo0501 .u-table .required span.u-input-group {\n display: block; }\n\n.demo0501 .u-table .verify-cell {\n padding-right: 25px !important; }\n\n.demo0501 .u-table .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px; }\n\n.demo0501 .u-table .ref-input-wrap {\n width: 160px !important; }\n\n.u-editable-table-tp .tp-content {\n color: #F44336; }\n\n.u-editable-table .u-table .u-table-row td {\n padding: 5px 8px; }\n .u-editable-table .u-table .u-table-row td input {\n padding-left: 5px;\n font-size: 12px; }\n .u-editable-table .u-table .u-table-row td input.error {\n border-color: #F44336; }\n\n.u-editable-table .u-table .u-table-row .editable-cell {\n height: 30px; }\n\n.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {\n line-height: 19px; }\n\n.u-editable-table .u-table .u-table-row .u-form-control,\n.u-editable-table .u-table .u-table-row .u-select-selection {\n height: 30px; }\n\n.u-editable-table .u-table .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px; }\n\n.u-editable-table .u-table .editable-cell-input-wrapper {\n padding-right: 0; }\n .u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap {\n width: auto !important;\n height: 30px; }\n .u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap .u-input-group {\n display: inline-block; }\n\n.u-editable-table .u-table .verify-cell {\n padding-right: 25px !important; }\n\n.u-editable-table .u-table .require {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px; }\n\n.u-editable-table-tp .tp-content {\n color: #F44336; }\n\n.demo0503-m-b.u-modal .u-modal-body {\n padding: 16px 0;\n background: #f7f9fb; }\n\n.demo0503-m-b .u-form-group {\n overflow: hidden; }\n\n.demo0503-m-b .u-form-control {\n font-size: 12px; }\n\n.demo0503-m-b .editable-cell {\n display: block;\n float: left;\n width: 265px;\n padding-right: 25px; }\n\n.demo0503-m-b .ref-input-wrap {\n width: 240px !important; }\n\n.demo0503-m-b .u-label {\n display: block;\n float: left;\n text-align: right;\n width: 110px;\n box-sizing: border-box;\n padding-right: 10px;\n font-size: 12px;\n height: 32px;\n line-height: 32px; }\n .demo0503-m-b .u-label .mast {\n padding: 0;\n color: red; }\n\n.demo0503-m-b .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px; }\n\n.u-editable-table-tp {\n z-index: 9999 !important; }\n .u-editable-table-tp .tp-content {\n color: #F44336; }\n\n.ref-core-button .u-button:first-child {\n margin-right: 8px; }\n\n.demo0505 .toolbar-btns {\n margin-bottom: 8px; }\n .demo0505 .toolbar-btns .u-button:first-child {\n margin-right: 8px; }\n\n.demo0505 .u-table .u-row-select {\n background-color: #FFF7E7; }\n\n.demo0505 .u-table .u-table-row td {\n padding: 5px 8px; }\n .demo0505 .u-table .u-table-row td input {\n font-size: 12px;\n padding-left: 5px; }\n\n.demo0505 .u-table .u-table-row .u-form-control,\n.demo0505 .u-table .u-table-row .u-select-selection {\n height: 30px; }\n\n.demo0505 .u-table .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px; }\n\n.demo0505 .u-table .required {\n margin-left: 10px;\n position: relative; }\n .demo0505 .u-table .required::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px; }\n .demo0505 .u-table .required span.u-input-group {\n display: block; }\n\n.demo0505 .u-table .verify-cell {\n padding-right: 25px !important; }\n\n.demo0505 .u-table .edited::after {\n content: \" \";\n position: absolute;\n z-index: 999;\n top: 0;\n left: 0;\n border-width: 5px;\n border-style: solid;\n border-color: #f44336 transparent transparent #f44336; }\n\n.demo0505 .u-table .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px; }\n\n.demo0505 .u-table .ref-input-wrap {\n width: 160px !important; }\n\n.u-editable-table-tp .tp-content {\n color: #F44336; }\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\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// $performance_font: 'Helvetica', 'Arial', sans-serif !default;\n\n@import \"minxin-colors\";\n\n\n\n@function strip-units($number) {\n @return $number / ($number * 0 + 1);\n}\n$unit: 10px !default;\n// IMAGES\n$image_path: '/images' !default;\n\n\n\n//默认颜色\n$trim-color-classes: false !default;\n\n@import \"minxin-themeColors\";\n\n//对比色\n$color-primary-contrast: $color-dark-contrast !default;\n$color-accent-contrast: $color-dark-contrast !default;\n//字体颜色\n$color-text: $palette-grey-900 !default;\n\n//不明所以 $primary-color: unquote(\"rgba(#{$palette-grey-500}, 0.20)\") !default;\n\n// -- Fonts 字体大小权重预定义\n$preferred-font: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei',sans-serif !default;\n$font-size: 1.6 * $unit !default;\n$font-size-tiny: 1.2 * $unit !default;\n$font-size-small: 1.4 * $unit !default;\n$font-size-normal: $font-size !default;\n$font-size-big: 1.8 * $unit !default;\n$font-weight-thin: 300 !default;\n$font-weight-normal: 400 !default;\n$font-weight-semi-bold: 500 !default;\n$font-weight-bold: 700 !default;\n$font-color:unquote(\"rgb(#{$palette-u-gray-800})\") !default;\n// 白色背景下的文字颜色\n$font-color-base: #212121 !default;\n\n$font-weight-override: false;\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-bold: 700;\n$font-weight-base: $font-weight-normal;\n\n\n\n\n$gray-base: unquote(\"rgb(#{$palette-grey-900})\") !default;\n$gray-darkest: unquote(\"rgb(#{$palette-grey-800})\") !default;\n$gray-darker: unquote(\"rgb(#{$palette-grey-700})\") !default;\n$gray-dark: unquote(\"rgb(#{$palette-grey-600})\") !default;\n$gray: unquote(\"rgb(#{$palette-grey-500})\") !default;\n$gray-light: unquote(\"rgb(#{$palette-grey-400})\") !default;\n$gray-lighter: unquote(\"rgb(#{$palette-grey-300})\") !default;\n$gray-lightest:unquote(\"rgb(#{$palette-grey-200})\") !default;\n$inverse: unquote(\"rgb(#{$color-white})\") !default;\n// $border-color-base: $gray-lighter;\n$border-color-base: unquote(\"rgb(#{$border-color})\") !default;\n$line-height-base: 1.57142857;\n\n// 边框圆角\n$border-radius-base: $border-radius;\n\n// 阴影\n\n$shadow-key-umbra-opacity: 0.2 !default;\n$shadow-key-penumbra-opacity: 0.14 !default;\n$shadow-ambient-shadow-opacity: 0.12 !default;\n\n$shadow-base: 0 1px 5px $gray-lighter;\n\n\n\n//-- Indexes\n$z-index-highest: 300;\n$z-index-higher: 200;\n$z-index-high: 100;\n$z-index-normal: 1;\n$z-index-low: -100;\n$z-index-lower: -200;\n\n$zindex-modal: 1700;\n$zindex-modal-background: 1600;\n$zIndex-notification: 1560;\n$zIndex-message: 1550;\n$zIndex-popconfirm: 1540;\n$zIndex-popover: 1540;\n$zIndex-tooltip: 1530;\n$zIndex-alert: 1510;\n$zindex-navbar-fixed: 1500;\n$zindex-menubar: 1400;\n$zindex-overlay: 1300;\n$zindex-dropdown: 1200;\n$zindex-navbar: 1200;\n$zindex-header: 1100;\n$zindex-footer: 1000;\n$zindex-backtop:2000;\n\n// 文本字体\n\n//todo\n$text-color-primary: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\n$text-link-color: unquote(\"rgb(#{$color-accent})\") !default;\n\n$target-elements-directly: true !default;\n\n\n$global-selected-color: unquote(\"rgb(#{$palette-blue-100})\") !default;\n\n\n// 控件\n$cursor-disabled: not-allowed;\n\n\n$title-color: $gray-darkest;\n//todo\n$subtitle-color: $gray-darker;\n$text-color: $gray-dark;\n\n$prompt-color: $gray;\n//全局不同状态颜色\n//todo\n$active-color-base: unquote(\"rgb(#{$palette-blue-800})\") !default;\n$normal-color-base: unquote(\"rgb(#{$palette-blue-600})\") !default;\n$hover-color-base: unquote(\"rgb(#{$palette-blue-400})\") !default;\n\n$bg-color-base: $gray-lightest;\n\n//disable颜色\n$disabled-color-base: #909090;\n$disabled-border-color: $gray-lighter;\n$disabled-bg-color: $gray-lightest;\n\n// 全局链接颜色\n$link-color: $normal-color-base;\n$link-hover-color: $hover-color-base;\n$link-active-color: $active-color-base;\n\n// 品牌色\n$brand-default: $gray-lighter;\n$brand-default-hover: $gray-lightest;\n$brand-default-active: $gray-light;\n// $brand-default: unquote(\"rgb(#{$color-primary})\");\n// $brand-default-hover: unquote(\"rgb(#{$color-primary-light})\");\n// $brand-default-active: unquote(\"rgb(#{$color-primary-dark})\");\n\n$brand-primary : unquote(\"rgb(#{$primary-color})\") !default;\n$brand-primary-hover: unquote(\"rgb(#{$primary-color-light})\") !default;\n$brand-primary-active: unquote(\"rgb(#{$primary-color-dark})\") !default;\n\n$brand-secondary : unquote(\"rgb(#{$secondary-color})\") !default;\n$brand-secondary-hover: unquote(\"rgb(#{$secondary-color-light})\") !default;\n$brand-secondary-active: unquote(\"rgb(#{$secondary-color-dark})\") !default;\n\n$brand-success: unquote(\"rgb(#{$palette-green-500})\") !default;\n$brand-success-hover: unquote(\"rgb(#{$palette-green-300})\") !default;\n$brand-success-active: unquote(\"rgb(#{$palette-green-700})\") !default;\n\n$brand-info: unquote(\"rgb(#{$palette-cyan-500})\") !default;\n$brand-info-hover: unquote(\"rgb(#{$palette-cyan-300})\") !default;\n$brand-info-active: unquote(\"rgb(#{$palette-cyan-700})\") !default;\n\n$brand-warning: unquote(\"rgb(#{$palette-orange-500})\") !default;\n$brand-warning-hover: unquote(\"rgb(#{$palette-orange-300})\") !default;\n$brand-warning-active: unquote(\"rgb(#{$palette-orange-700})\") !default;\n\n\n$brand-news: unquote(\"rgb(#{$palette-blue-500})\") !default;\n$brand-news-hover: unquote(\"rgb(#{$palette-blue-300})\") !default;\n$brand-news-active: unquote(\"rgb(#{$palette-blue-700})\") !default;\n\n$brand-danger: unquote(\"rgb(#{$palette-red-500})\") !default;\n$brand-danger-hover: unquote(\"rgb(#{$palette-red-300})\") !default;\n$brand-danger-active: unquote(\"rgb(#{$palette-red-700})\") !default;\n\n$brand-dark: $gray-darker;\n$brand-dark-hover: $gray-dark;\n$brand-dark-active: $gray-darkest;\n\n$brand-light : unquote(\"rgb(#{$color-dark-contrast})\") !default;\n$brand-light-hover: unquote(\"rgb(#{$palette-grey-200})\") !default;\n$brand-light-active: unquote(\"rgb(#{$palette-grey-400})\") !default;\n\n$brand-light-primary : unquote(\"rgb(#{$palette-blue-50})\") !default;\n$brand-light-success: unquote(\"rgb(#{$palette-green-50})\") !default;\n$brand-light-info: unquote(\"rgb(#{$palette-cyan-50})\") !default;\n$brand-light-warning: unquote(\"rgb(#{$palette-orange-50})\") !default;\n$brand-light-news: unquote(\"rgb(#{$palette-blue-50})\") !default;\n$brand-light-danger: unquote(\"rgb(#{$palette-red-50})\") !default;\n\n//不同背景下对应的文字颜色\n\n$color-news: unquote(\"rgb(#{$palette-blue-500})\") !default;\n$color-success: unquote(\"rgb(#{$palette-green-500})\") !default;\n$color-info: unquote(\"rgb(#{$palette-cyan-500})\") !default;\n$color-warning: unquote(\"rgb(#{$palette-orange-500})\") !default;\n$color-danger: unquote(\"rgb(#{$palette-red-500})\") !default;\n$color-light: $gray-darker !default;\n\n//redius\n\n$default-border-radius: $border-radius;\n\n// hover时的背景色,包括select、dropdown、table、datepicker、tree、menu等组件\n$hover-bg-color-base: unquote(\"rgb(#{$item-hover-bg-color-base})\") !default;\n// // selected背景色,包括:select、menu等\n$selected-bg-color-base: unquote(\"rgb(#{$item-selected-bg-color-base})\") !default;\n\n// UButton\n\n// Button 基础背景色.\n// 默认按钮()\n$button-default-color: unquote(\"rgb(#{$default-color})\");\n$button-default-color-IE8: unquote(\"rgb(#{$default-color})\");\n\n// 边框按钮(shape:'border')\n$button-border-bg-color: unquote(\"rgb(#{$color-dark-contrast})\");\n\n// Button 不同状态下的背景色 :hover、active、focus状态.\n$button-hover-color: unquote(\"rgb(#{$default-color-light})\");\n$button-active-color: unquote(\"rgb(#{$default-color-dark})\");\n$button-focus-color: unquote(\"rgb(#{$default-color-light})\");\n\n// Button 配置不同colors属性时的背景色.\n$button-primary-color: $brand-primary;\n$button-primary-active-color: $brand-primary-active;\n$button-primary-hover-color: $brand-primary-hover;\n$button-secondary-color: $brand-secondary;\n$button-secondary-active-color: $brand-secondary-active;\n$button-secondary-hover-color: $brand-secondary-hover;\n$button-success-color: $brand-success;\n$button-success-active-color: $brand-success-active;\n$button-success-hover-color: $brand-success-hover;\n$button-info-color: $brand-info;\n$button-info-active-color: $brand-info-active;\n$button-info-hover-color: $brand-info-hover;\n$button-warning-color: $brand-warning;\n$button-warning-active-color: $brand-warning-active;\n$button-warning-hover-color: $brand-warning-hover;\n$button-danger-color: $brand-danger;\n$button-danger-active-color: $brand-danger-active;\n$button-danger-hover-color: $brand-danger-hover;\n$button-dark-color: $brand-dark;\n$button-dark-active-color: $brand-dark-active;\n$button-dark-hover-color: $brand-dark-hover;\n$button-light-color: $brand-light;\n$button-light-active-color: $brand-light-active;\n$button-light-hover-color: $brand-light-hover;\n\n// Button 文字颜色.\n// 主按钮(colors:'primary')\n$button-primary-text-color: unquote(\"rgb(#{$text-color-base})\") !default;\n$button-text-color: $button-primary-text-color;\n// 次按钮(colors:'secondary')\n$button-second-text-color: unquote(\"rgb(#{$button-secondary-text-color})\") !default;\n// 默认按钮()\n$button-default-text-color: unquote(\"rgb(#{$palette-grey-900})\") !default;\n// 边框按钮(shape:'border')\n// $button-border-text-color: unquote(\"rgb(#{$primary-color})\") !default;\n\n// Button 边框样式及颜色.\n$button-border-style: unquote(\"solid\") !default;\n$button-border-color: $border-color-base;\n$button-default-border-color: $button-default-color !default;\n\n// Button 不同状态下的边框颜色 :hover、active、focus状态.\n$button-hover-border-color: $brand-default-hover;\n$button-active-border-color: $brand-default-active;\n$button-focus-border-color: $brand-default-active;\n\n// FAB colors and sizes.\n$button-fab-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\n$button-fab-hover-color-alt: unquote(\"rgb(#{$color-accent-light})\") !default;\n$button-fab-active-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\n$button-fab-text-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n$button-fab-ripple-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n\n// Icon button colors and sizes.\n$button-icon-color: unquote(\"rgb(#{$palette-grey-700})\") !default;\n$button-icon-focus-color: $button-focus-color !default;\n\n// Button 最小宽度、高度、内边距、外边距、行高、边框粗细、圆角.\n$button-min-width: 72/10 * $unit !default;\n$button-height: 36/10 * $unit !default;\n$button-padding: 4/10* $unit 13/10 * $unit !default;\n$button-padding-IE8: 4px 13px !default;\n$button-top-padding: 1310 * $unit !default;\n$button-left-padding: 6/10* $unit !default;\n$button-line-height:1.57142857;\n$button-margin: 4/10 * $unit !default;\n$button-border-radius: 3/10 * $unit !default;\n$button-border-width: 1/10 * $unit !default;\n\n$button-fab-size: 38/10 * $unit !default;\n$button-fab-size-mini: 30/10 * $unit !default;\n$button-fab-font-size: 14/10 * $unit !default;\n\n$button-icon-size: 32/10 * $unit !default;\n$button-icon-size-mini: 13/10 * $unit !default;\n\n$button-raised-font-size: 14/10 * $unit !default;\n\n// Button 大按钮\n$button-padding-y-lg:8px;\n$button-padding-x-lg:15px;\n$font-size-lg:1.4 * $unit;\n\n\n// Button 特大型按钮\n$button-padding-y-xg:10.5px;\n$button-padding-x-xg:18px;\n$font-size-xg:1.6 * $unit;\n\n\n// Button 小型按钮\n$button-padding-y-sm:3px;\n$button-padding-x-sm:5px;\n$font-size-sm:1.2 * $unit;\n\n\n\n// UText\n\n\n$form-control-border-radius: $border-radius-base;\n$form-control-default-font-size: 14px;\n$form-control-lg-font-size: 14px;\n$form-control-sm-font-size: 12px;\n$form-control-default-height: 32px;\n$form-control-lg-height: 40px;\n$form-control-sm-height: 26px;\n$form-control-color: #424242;\n$form-control-bg-color: #fff;\n$form-control-border-color: $border-color-base;\n$form-control-disable-bg-color: #F7F9FB;\n$form-control-disable-color: $disabled-color-base;\n$form-control-disable-border-color: #DFE1E6;\n\n$input-text-background-color: transparent !default;\n$input-text-label-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\n$input-text-bottom-border-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n$input-text-bottom-border-color-IE8: unquote(\"rgb(#{$color-black})\") !default;\n$input-text-highlight-color: unquote(\"rgb(#{$primary-color})\") !default;\n$input-text-disabled-color: $input-text-bottom-border-color !default;\n$input-text-disabled-text-color: $input-text-label-color !default;\n$input-text-error-color: unquote(\"rgb(222, 50, 38)\") !default;\n$input-text-must-color:unquote(\"rgb(#{$palette-red-A700})\") !default;\n\n\n$input-text-font-size: 14px !default;\n$input-text-width: 100% !default;\n$input-text-padding: 4px !default;\n$input-text-vertical-spacing: 20px !default;\n\n$input-text-button-size: 32px !default;\n$input-text-floating-label-fontsize: 12px !default;\n$input-text-expandable-icon-top: 16px !default;\n$input-text-height:36px !default;\n$input-text-normal-width:360px !default;\n$input-text-short-width:180px !default;\n$input-text-normal-border-color:unquote(\"rgb(#{$palette-u-gray-400})\") !default;\n$input-text-color:unquote(\"rgb(#{$palette-u-gray-A200})\") !default;\n$input-text-focus-border-color:unquote(\"rgb(#{$palette-u-blue-400})\") !default;\n$input-lable-color:unquote(\"rgb(#{$palette-u-gray-900})\") !default;\n\n\n/* FormGroup */\n\n$error-input-border:$brand-danger;\n$warning-input-border:$brand-warning;\n$success-input-border:$brand-success;\n$success-addon-bg: $brand-light-success;\n$warning-addon-bg: $brand-light-warning;\n$error-addon-bg: $brand-light-danger;\n$form-group-margin-top: 15px;\n$form-group-margin-bottom: 15px;\n\n/* Navlayout */\n\n$layout-nav-color: unquote(\"rgb(#{$palette-grey-100})\") !default;\n\n// Drawer\n$layout-drawer-bg-color: unquote(\"rgb(#{$palette-grey-50})\") !default;\n$layout-drawer-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n$layout-text-color: unquote(\"rgb(#{$palette-grey-800})\") !default;\n$layout-drawer-navigation-color: #757575 !default;\n$layout-drawer-navigation-link-active-background: unquote(\"rgb(#{$palette-grey-200})\") !default;\n$layout-drawer-navigation-link-active-color: $layout-text-color !default;\n\n// Header\n$layout-header-bg-color: unquote(\"rgb(#{$primary-color})\") !default;\n$layout-header-text-color: unquote(\"rgb(#{$color-primary-contrast})\") !default;\n$layout-header-nav-hover-color: unquote(\"rgba(#{$palette-grey-700}, 0.6)\") !default;\n$layout-header-tab-text-color: unquote(\"rgba(#{$color-primary-contrast}, 0.6)\") !default;\n\n// Tabs\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\n\n$layout-nav-link-font-size: 13px !default;\n\n$layout-drawer-narrow: 240px !default;\n$layout-drawer-wide: 456px !default;\n$layout-drawer-width: $layout-drawer-narrow !default;\n\n$layout-header-icon-size: 32px !default;\n$layout-screen-size-threshold: 1024px !default;\n$layout-header-icon-margin: 24px !default;\n$layout-drawer-button-mobile-size: 44px !default;\n$layout-drawer-button-desktop-size: 34px !default;\n$layout-drawer-button-desktop-margin-top: 5px !default;\n$layout-drawer-button-mobile-margin-top: 10px !default;\n\n$layout-header-mobile-row-height: 56px !default;\n$layout-mobile-header-height: $layout-header-mobile-row-height;\n$layout-header-desktop-row-height: 44px !default;\n$layout-desktop-header-height: $layout-header-desktop-row-height;\n\n$layout-header-desktop-baseline: 80px !default;\n$layout-header-mobile-baseline: 72px !default;\n$layout-header-mobile-indent: 16px !default;\n$layout-header-desktop-indent: 40px !default;\n\n$layout-tab-font-size: 14px !default;\n$layout-tab-bar-height: 48px !default;\n$layout-tab-mobile-padding: 12px !default;\n$layout-tab-desktop-padding: 24px !default;\n$layout-tab-highlight-thickness: 2px !default;\n\n// gridlayout\n\n// Extra small screen / phone\n//$screen-xs: 480px;\n\n$screen-xs-min: 480px;\n// Deprecated `@screen-phone` as of v3.0.1\n//@screen-phone: @screen-xs-min;\n\n// Small screen / tablet\n// Deprecated `@screen-sm` as of v3.0.1\n//@screen-sm: 768px;\n$screen-sm-min: 768px;\n// Deprecated `@screen-tablet` as of v3.0.1\n//@screen-tablet: @screen-sm-min;\n\n// Medium screen / desktop\n// Deprecated `@screen-md` as of v3.0.1\n//@screen-md: 992px;\n$screen-md-min: 992px;\n// Deprecated `@screen-desktop` as of v3.0.1\n//@screen-desktop: @screen-md-min;\n\n// Large screen / wide desktop\n// Deprecated `@screen-lg` as of v3.0.1\n//@screen-lg: 1200px;\n$screen-lg-min: 1200px;\n// Deprecated `@screen-lg-desktop` as of v3.0.1\n//@screen-lg-desktop: @screen-lg-min;\n$screen-xs-max: ($screen-sm-min - 1 );\n\n$screen-sm-max: ($screen-sm-min - 1 );\n\n$screen-md-max: ($screen-lg-min - 1 );\n\n\n\n\n// Number of columns in the grid.\n$grid-columns: 12;\n// Padding between columns. Gets divided in half for the left and right.\n$grid-gutter-width: 30px;\n// Navbar collapse\n// Point at which the navbar becomes uncollapsed.\n$grid-float-breakpoint: 768px;\n// Point at which the navbar begins collapsing.\n$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);\n\n\n// Small screen / tablet\n$container-tablet: (720px + $grid-gutter-width);\n// For `@screen-sm-min` and up.\n$container-sm: $container-tablet;\n\n// Medium screen / desktop\n$container-desktop: (940px + $grid-gutter-width);\n// For `@screen-md-min` and up.\n$container-md: $container-desktop;\n\n// Large screen / wide desktop\n$container-large-desktop: (1140px + $grid-gutter-width);\n// For `@screen-lg-min` and up.\n$container-lg: $container-large-desktop;\n\n\n\n// menu\n\n$default-dropdown-bg-color: unquote(\"rgb(#{$color-white})\") !default;\n$menu-expand-duration: 0.3s !default;\n$menu-fade-duration: 0.2s !default;\n\n// Default Item Colors\n$default-item-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\n$default-item-text-color-IE8: unquote(\"rgb(#{$color-black})\") !default;\n$default-item-outline-color: unquote(\"rgb(#{$palette-u-blue-400})\") !default;\n$default-item-hover-bg-color: unquote(\"rgb(#{$palette-u-blue-100})\") !default;\n$default-item-focus-bg-color: unquote(\"rgb(#{$palette-u-blue-200})\") !default;\n$default-item-active-bg-color: unquote(\"rgb(#{$palette-u-blue-200})\") !default;\n$default-item-divider-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\n\n// Disabled Button Colors\n$disabled-item-text-color: unquote(\"rgb(#{$palette-grey-400})\") !default;\n\n// Tile\n$tile-width: 100%;\n\n$tile-default-border-color: #e9e9e9;\n$tile-default-hover-shadow-color: rgba(0, 0, 0, 0.2);\n\n$tile-primary-border-color: $button-primary-color;\n$tile-primary-hover-shadow-color: $button-primary-hover-color;\n\n$tile-danger-border-color: $button-danger-color;\n$tile-danger-hover-shadow-color: $button-danger-hover-color;\n\n$tile-warning-border-color: $button-warning-color;\n$tile-warning-hover-shadow-color: $button-warning-hover-color;\n\n$tile-success-border-color: $button-success-color;\n$tile-success-hover-shadow-color: $button-success-hover-color;\n\n$tile-info-border-color: $button-info-color;\n$tile-info-hover-shadow-color: $button-info-hover-color;\n\n// Alert\n$alert-news-bg: $brand-light-news;\n$alert-success-bg: $brand-light-success;\n$alert-info-bg: $brand-light-info;\n$alert-warning-bg: $brand-light-warning;\n$alert-danger-bg: $brand-light-danger;\n\n\n$alert-dark-news-bg: $brand-news;\n$alert-dark-success-bg: $brand-success;\n$alert-dark-info-bg: $brand-info;\n$alert-dark-warning-bg: $brand-warning;\n$alert-dark-danger-bg: $brand-danger;\n\n$alert-news-color: $color-news;\n$alert-success-color: $color-success;\n$alert-info-color: $color-info;\n$alert-warning-color: $color-warning;\n$alert-danger-color: $color-danger;\n\n$timeline-primary-color: $brand-primary;\n$timeline-news-color: $color-news;\n$timeline-success-color: $color-success;\n$timeline-info-color: $color-info;\n$timeline-warning-color: $color-warning;\n$timeline-danger-color: $color-danger;\n\n$alert-padding:10px;\n$alert-font-size:12px;\n$alert-border-radius: $border-radius;\n$alert-text-padding-left: 15px;\n$alert-text-padding-right: 15px;\n$alert-close-font-size: 21px;\n$alert-close-opacity: .2;\n$alert-close-font-weight: 700;\n\n//Checkbox\n\n$checkbox-color: unquote(\"rgb(#{$primary-color})\") !default;\n$checkbox-off-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n$checkbox-off-color-IE8: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n$checkbox-disabled-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n$checkbox-focus-color: unquote(\"rgba(#{$palette-u-blue-500}, 0.26)\") !default;\n$checkbox-image-path: $image_path;\n\n$checkbox-label-font-size: 13px !default;\n$checkbox-label-height: 24px !default;\n$checkbox-button-size: 16px !default;\n$checkbox-inner-margin: 2px !default;\n$checkbox-padding: 8px !default;\n$checkbox-top-offset:\n ($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;\n$checkbox-ripple-size: $checkbox-label-height * 1.5;\n\n$checkbox-primary-bg: $brand-primary;\n$checkbox-success-bg: $brand-success;\n$checkbox-info-bg: $brand-info;\n$checkbox-warning-bg: $brand-warning;\n$checkbox-danger-bg: $brand-danger;\n$checkbox-dark-bg: $brand-dark;\n\n$progress-primary-bg: $brand-primary;\n$progress-success-bg: $brand-success;\n$progress-info-bg: $brand-info;\n$progress-warning-bg: $brand-warning;\n$progress-danger-bg: $brand-danger;\n$progress-dark-bg: $brand-dark;\n\n$primary-color-opacity:unquote(\"rgba(#{$primary-color}, 0.7)\") !default;\n$color-success-opacity:unquote(\"rgba(#{$palette-green-500}, 0.7)\") !default;\n$color-info-opacity:unquote(\"rgba(#{$palette-cyan-500}, 0.7)\") !default;\n$color-warning-opacity:unquote(\"rgba(#{$palette-orange-500}, 0.7)\") !default;\n$color-danger-opacity:unquote(\"rgba(#{$palette-red-500}, 0.7)\") !default;\n$color-dark-opacity:unquote(\"rgba(#{$palette-grey-700}, 0.7)\") !default;\n\n\n$progress-sm-height: 10px;\n$progress-xs-height: 5px;\n$progress-xs-width: 170px;\n$progress-default-height: 20px;\n$progress-sm-lable-font-size: 10px;\n$progress-sm-lable-line-height: 10px;\n$progress-xs-lable-line-height: 8px;\n$progress-xs-lable-margin-left: 140px;\n$progress-xs-lable-font-size: 10px;\n$progress-xs-lable-color: #000;\n\n// Radio\n\n$radio-color: unquote(\"rgb(#{$primary-color})\") !default;\n$radio-off-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n$radio-off-color-IE8: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n$radio-disabled-color: $disabled-color-base !default;\n\n$radio-label-font-size: 13px !default;\n$radio-label-height: 32px !default;\n$radio-button-size: 16px !default;\n$radio-inner-margin: $radio-button-size / 4;\n$radio-padding: 8px !default;\n$radio-top-offset: ($radio-label-height - $radio-button-size) / 2;\n$radio-ripple-size: 42px !default;\n\n$radio-primary-bg: $brand-primary;\n$radio-success-bg: $brand-success;\n$radio-info-bg: $brand-info;\n$radio-warning-bg: $brand-warning;\n$radio-danger-bg: $brand-danger;\n$radio-dark-bg: $brand-dark;\n\n$radio-disabled-bg: #f7f7f7;\n$radio-diabled-border-color: #d9d9d9;\n\n$radio-border-color: #d9d9d9;\n$radio-bg-color: #fff;\n$radio-color:#212121;\n\n$radio-checked-bg-color: #fff;\n$radio-checked-color: $brand-primary;\n$radio-checked-border-color: $radio-checked-color;\n\n$radio-icon-height: 18px;\n$radio-icon-width: 18px;\n$radio-icon-checked-height: 8px;\n$radio-icon-checked-width: 8px;\n\n$radio-button-lg-height:42px;\n$radio-button-lg-line-height:26px;\n\n$radio-button-sm-height:22px;\n$radio-button-sm-line-height:20px;\n\n$radio-button-height: 28px;\n$radio-button-line-height: 26px;\n\n\n\n\n\n//loading\n\n$loading-color-1: unquote(\"rgb(#{$palette-blue-400})\") !default;\n$loading-color-2: unquote(\"rgb(#{$palette-red-500})\") !default;\n$loading-color-3: unquote(\"rgb(#{$palette-yellow-600})\") !default;\n$loading-color-4: unquote(\"rgb(#{$palette-green-500})\") !default;\n\n$loading-single-color: unquote(\"rgb(#{$primary-color})\") !default;\n\n$loading-size: 28px !default;\n$loading-stroke-width: 3px !default;\n\n// Amount of circle the arc takes up.\n$loading-arc-size: 270deg !default;\n// Time it takes to expand and contract arc.\n$loading-arc-time: 1333ms !default;\n// How much the start location of the arc should rotate each time.\n$loading-arc-start-rot: 216deg !default;\n\n$loading-duration: 360 * $loading-arc-time / (\n strip-units($loading-arc-start-rot + (360deg - $loading-arc-size)));\n\n// datetimepicker\n$timepicker-border-gap-color:#ccc;\n$timepicker-font-size:14px;\n\n$date-bg-color: unquote(\"rgb(#{$primary-color})\") !default;\n\n// message\n$snackbar-color: unquote(\"rgb(#{$color-white})\") !default;\n$snackbar-background-color: unquote(\"rgb(#{$primary-color})\") !default;\n$snackbar-color-cancel: unquote(\"rgb(#{$palette-red-500})\") !default;\n$snackbar-color-accept: unquote(\"rgb(#{$palette-green-500})\") !default;\n$snackbar-color-warning: unquote(\"rgb(#{$palette-lime-200})\") !default;\n\n// DATA TABLE\n\n$data-table-font-size: 13px !default;\n$data-table-header-font-size: 12px !default;\n$data-table-header-sort-icon-size: 16px !default;\n\n$data-table-header-color: rgba(#000, 0.54) !default;\n$data-table-header-sorted-color: rgba(#000, 0.87) !default;\n$data-table-divider-color: rgba(#000, 0.12) !default;\n$data-table-divider-color-IE8: rgb(0,0,0) !default;\n\n//$data-table-hover-color: #eeeeee !default;\n$data-table-hover-color: #E9F7FC !default;\n$data-table-selection-color: #C4EAF6 !default;\n\n$data-table-dividers: 1px solid $data-table-divider-color !default;\n$data-table-dividers-IE8: 1px solid $data-table-divider-color-IE8 !default;\n\n$data-table-row-height: 48px !default;\n$data-table-last-row-height: 56px !default;\n$data-table-header-height: 56px !default;\n\n$data-table-column-spacing: 36px !default;\n$data-table-column-padding: $data-table-column-spacing / 2;\n\n$data-table-card-header-height: 64px !default;\n$data-table-card-title-top: 20px !default;\n$data-table-card-padding: 24px !default;\n$data-table-button-padding-right: 16px !default;\n$data-table-cell-top: $data-table-card-padding / 2;\n\n// $line-height-computed: round(($font-size-small * $line-height-base));\n$line-height-computed: round((14px * $line-height-base));\n$table-bg: transparent;\n$table-cell-padding: 8px;\n$table-border-color: $border-color-base;\n$table-bg-hover: $bg-color-base;\n$table-bg-active: $table-bg-hover;\n$table-bg-accent: unquote(\"rgba(#{$palette-grey-200},.3)\") !default;\n\n\n\n\n// tooltip\n$tooltip-max-width: 200px;\n$tooltip-color: #fff;\n$tooltip-bg: #42526E;\n$tooltip-inverse-border-color: #d9d9d9;\n$tooltip-inverse-color: rgb(51,51,51);\n$tooltip-arrow-color: $tooltip-bg;\n$tooltip-opacity: 1;\n\n\n// 进度条\n$bar-height: 4px !default;\n$progress-main-color: unquote(\"rgb(#{$primary-color})\") !default;\n$progress-secondary-color: unquote(\"rgba(#{$color-primary-contrast}, 0.7)\") !default;\n$progress-fallback-buffer-color: unquote(\"rgba(#{$color-primary-contrast}, 0.9)\") !default;\n$progress-image-path: $image_path;\n$progress-buffer-bar-border:unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n\n// Tabs\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\n\n\n\n$tab-highlight-color: unquote(\"rgb(#{$primary-color})\") !default;\n$tab-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n$tab-active-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\n$tab-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\n\n\n\n//CARD\n\n$card-width: 330px !default;\n$card-height: 200px !default;\n$card-font-size: 13px !default;\n$card-title-font-size: 24px !default;\n$card-subtitle-font-size: 10px !default;\n$card-horizontal-padding: 16px !default;\n$card-vertical-padding: 16px !default;\n\n$card-title-perspective-origin-x: 165px !default;\n$card-title-perspective-origin-y: 56px !default;\n\n$card-title-transform-origin-x: 165px !default;\n$card-title-transform-origin-y: 56px !default;\n\n$card-title-text-transform-origin-x: 149px !default;\n$card-title-text-transform-origin-y: 48px !default;\n\n$card-supporting-text-font-size: 1.4 * $unit !default;\n$card-supporting-text-line-height: 18px !default;\n\n$card-actions-font-size: 13px !default;\n\n$card-title-text-font-weight: 300 !default;\n$card-z-index: 1 !default;\n\n// Cover image\n$card-cover-image-height: 186px !default;\n$card-background-image-url: '' !default;\n\n\n\n$card-background-color: unquote(\"rgb(#{$color-white})\") !default;\n$card-text-color: unquote(\"rgb(#{$color-black})\") !default;\n$card-image-placeholder-color: unquote(\"rgb(#{$color-accent})\") !default;\n$card-supporting-text-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n$card-border-color: rgba(0,0,0,0.1) !default;\n$card-subtitle-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\n\n\n$input-border:unquote(\"rgb(#{$palette-u-gray-500})\");\n$input-border-focus:unquote(\"rgb(#{$primary-color})\");\n$input-border-disabled:unquote(\"rgb(#{$palette-u-gray-100})\");\n$input-bg-disabled:unquote(\"rgb(#{$palette-u-gray-100})\");\n$input-color:unquote(\"rgb(#{$palette-u-gray-A100})\");\n$form-input-height:36px;\n$form-input-height-sm:28px;\n$form-input-padding-left:12px;\n$form-label-color:unquote(\"rgb(#{$palette-u-gray-900})\");\n$form-control-feedback-color:unquote(\"rgb(#{$palette-u-gray-700})\");\n$form-validate-error-color:unquote(\"rgb(#{$palette-u-red-600})\");\n\n\n// BADGE\n$badge-font-size: 12px !default;\n$badge-color: unquote(\"rgb(#{$color-accent-contrast})\") !default;\n$badge-color-inverse: unquote(\"rgb(#{$color-accent})\") !default;\n$badge-background: unquote(\"rgb(#{$color-accent})\") !default;\n$badge-background-inverse: unquote(\"rgba(#{$color-accent-contrast},0.2)\") !default;\n$badge-size : 22px !default;\n$badge-padding: 2px !default;\n$badge-overlap: 12px !default;\n\n$badge-primary-color:#FFFFFF;\n$badge-primary-bg:$brand-primary;\n\n$badge-success-color:#FFFFFF;\n$badge-success-bg: $brand-success;\n\n$badge-info-color:#FFFFFF;\n$badge-info-bg:$brand-info;\n\n$badge-warning-color:#FFFFFF;\n$badge-warning-bg:$brand-warning;\n\n$badge-danger-color:#FFFFFF;\n$badge-danger-bg:$brand-danger;\n\n$badge-dark-color:#FFFFFF;\n$badge-dark-bg:$brand-dark;\n\n$badge-font-size: 12px;\n$badge-font-dataicon-size: 10px;\n$badge-default-dataicon-fontcolor: #757575;\n$badge-default-dataicon-bgcolor: #fff;\n$badge-default-dataicon-bordercolor: $border-color-base;\n\n// labels\n$tag-padding: .25em .6em .25em;\n$tag-border-radius: 0.3em;\n$tag-bg: #eeeeee;\n$tag-round-border-radius: 1em;\n$tag-default-color: #757575;\n$tag-default-bg:#e0e0e0;\n$tag-lg-font-size: 16px;\n$tag-sm-font-size: 10px;\n$tag-sm-padding: .1em .5em .1em;\n$tag-default-hover-bg: $brand-default-hover;\n$tag-primary-hover-bg: $brand-primary-hover;\n$tag-success-hover-bg: $brand-success-hover;\n$tag-info-hover-bg: $brand-info-hover;\n$tag-warning-hover-bg: $brand-warning-hover;\n$tag-danger-hover-bg: $brand-danger-hover;\n$tag-dark-hover-bg: $brand-dark-hover;\n$tag-default-bg: $brand-default;\n$tag-primary-bg: $brand-primary;\n$tag-success-bg: $brand-success;\n$tag-info-bg: $brand-info;\n$tag-warning-bg: $brand-warning;\n$tag-danger-bg: $brand-danger;\n$tag-dark-bg: $brand-dark;\n$tag-default-hover-color:unquote(\"rgb(#{$palette-u-gray-500})\");\n\n\n// pagination\n$pagination-gap-hover-border:#7A869A;\n\n$pagination-link-padding: 7px 13px;\n$pagination-lg-font-size: 16px;\n$pagination-lg-padding-vertical: 9.5px;\n$pagination-lg-padding-horizontal: 15.5px;\n\n$pagination-small-font-size: 12px;\n$pagination-small-padding-vertical: 4px;\n$pagination-small-padding-horizontal: 9.5px;\n\n$pag-color: #666666;\n$pag-bg-color: #fff;\n$pag-border-color:#d7d7d7;\n$pag-hover-color: #666;\n$pag-hover-bg-color:$hover-bg-color-base;\n$pag-hover-border-color:#d7d7d7;\n$pag-active-color: #fff;\n$pag-active-bg-color:#7A869A;\n$pag-active-border-color:#7A869A;\n$pag-disabled-color: #777;\n$pag-disabled-bg-color:#fff;\n$pag-disabled-border-color:#ddd;\n\n$border-radius-base: $border-radius;\n$border-radius-large: 4px;\n$border-radius-small: 2px;\n\n$line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome\n$line-height-small: 1.5;\n// widget\n\n$widget-padding-left:30px;\n$widget-padding-top:10px;\n\n//tooltips\n\n$tooltip-default-bg: $brand-default;\n$tooltip-primary-bg: $brand-primary;\n$tooltip-success-bg: $brand-success;\n$tooltip-info-bg: $brand-info;\n$tooltip-warning-bg: $brand-warning;\n$tooltip-danger-bg: $brand-danger;\n$tooltip-dark-bg: $brand-dark;\n\n//menu Button\n\n$menu-default-bg: $brand-default;\n$menu-primary-bg: $brand-primary;\n$menu-success-bg: $brand-success;\n$menu-info-bg: $brand-info;\n$menu-warning-bg: $brand-warning;\n$menu-danger-bg: $brand-danger;\n$menu-dark-bg: $brand-dark;\n$menu-default-bg-hover: $brand-default-hover;\n$menu-primary-bg-hover: $brand-primary-hover;\n$menu-success-bg-hover: $brand-success-hover;\n$menu-info-bg-hover: $brand-info-hover;\n$menu-warning-bg-hover: $brand-warning-hover;\n$menu-danger-bg-hover: $brand-danger-hover;\n$menu-dark-bg-hover: $brand-dark-hover;\n\n\n// breadcrumbs\n\n$breadcrumb-padding-vertical: 8px;\n$breadcrumb-padding-horizontal: 10px;\n$breadcrumb-separator: \"/\\00a0\";\n$breadcrumb-bg: transparent;\n$breadcrumb-margin-bottom: 10px;\n\n$breadcrumb-color: $brand-primary;\n$breadcrumb-active-color: $text-color;\n\n$breadcrumb-icon-margin-right: 10px;\n$breadcrumb-arrow-separator: \"\\00bb\\00a0\";\n\n$breadcrumb-bg-color: #f5f5f5;\n$breadcrumb-active-color: #777;\n$breadcrumb-separate-color: #ccc;\n\n// list-group\n$list-group-media-heading-font-size : $font-size-small;//14px\n$list-group-link-disabled-color : $disabled-color-base;\n\n$list-group-link-disabled-bg : $gray-lightest;\n\n$list-group-active-color : $brand-primary;\n$list-group-link-active-color : unquote(\"rgb(#{$color-white})\") !default;\n$list-group-link-active-bg : $brand-primary;\n\n\n$list-group-item-icon-margin-right : 10px;\n\n$list-group-bg-inherit-item-border : rgba(0, 0, 0, 0.075);\n$list-group-bg-inherit-item-hover-bg : rgba(0, 0, 0, 0.075);\n\n\n$list-group-border-radius: $border-radius-base;\n\n\n\n$list-group-link-color: $text-color;\n$list-group-link-hover-color: $text-color;\n$list-group-link-heading-color: $title-color;\n\n$list-group-hover-bg: $bg-color-base;\n\n$list-group-disabled-bg: transparent;\n\n$list-group-disabled-color: $disabled-color-base;\n\n\n$list-group-disabled-text-color: $list-group-disabled-color;\n$list-group-active-bg: transparent;\n$list-group-active-border: $list-group-active-bg;\n// $list-group-active-text-color: lighten($list-group-active-color, 40%);\n$list-group-active-text-color: $list-group-active-color;\n\n$list-group-bg: #fff;\n$list-group-border: transparent;\n// $list-group-bordered-border : $border-color-base;\n// $list-group-bordered-active-color : $component-active-color;\n// $list-group-bordered-active-bg : $component-active-bg;\n// $list-group-bordered-active-border : $list-group-bordered-active-bg;\n\n// $list-group-gap-item-margin-bottom : 2px;\n\n//step\n$steps-margin-bottom: $line-height-computed;\n$step-padding-horizontal:20px;\n$step-padding-vertical: 12px;\n\n$step-vertical-padding-horizontal: 20px;\n$step-vertical-padding-vertical:18px;\n\n$step-color: $gray;\n$step-bg: $bg-color-base;\n$step-number-bg: $gray-lighter;\n$step-number-color: $inverse;\n\n$step-current-color: $inverse;\n$step-current-bg: $brand-primary;\n\n$step-done-color: $inverse;\n$step-done-bg:$brand-success;\n\n$step-error-color: $inverse;\n$step-error-bg: $brand-danger;\n\n$step-disabled-color:$gray-light;\n\n$step-font-size: inherit;\n$step-title-font-size: 20px;\n$step-icon-font-size:27px;\n$step-number-font-size:24px;\n$step-number-size: 40px;\n\n$step-lg-padding-horizontal:20px;\n$step-lg-padding-vertical:20px;\n$step-lg-font-size: 16px;\n$step-lg-title-font-size:22px;\n$step-lg-icon-font-size: 32px;\n$step-lg-number-font-size:28px;\n$step-lg-number-size:46px;\n\n$step-sm-font-size: 12px;\n$step-sm-title-font-size: 18px;\n$step-sm-icon-font-size: 24px;\n$step-sm-number-font-size: 24px;\n$step-sm-number-size: 30px;\n\n$step-xs-font-size: 10px;\n$step-xs-title-font-size: 16px;\n$step-xs-icon-font-size: 22px;\n$step-xs-number-font-size: 20px;\n$step-xs-number-size: 24px;\n\n// blog nav\n$blognav-active-color:unquote(\"rgb(#{$primary-color})\");\n// widget\n$widget-padding-left:30px;\n$widget-padding-top:10px;\n\n\n// couter 数据统计\n\n$counter-number-color: $gray-darkest;\n$counter-number-font-size: 20px;\n$counter-icon-font-size: $counter-number-font-size;\n\n$counter-lg-number-font-size: 40px;\n$counter-md-number-font-size: 30px;\n$counter-sm-number-font-size: 14px;\n\n$counter-lg-icon-font-size: $counter-lg-number-font-size;\n$counter-md-icon-font-size: $counter-md-number-font-size;\n$counter-sm-icon-font-size: $counter-sm-number-font-size;\n\n$counter-inverse-color: $inverse;\n\n\n// navbar\n\n\n$menu-active-color: #108ee9;\n$menu-border-active-color: #108ee9;\n$menu-selected-bg-color: #eaf8fe;\n$menu-group-titil-color: #999;\n$menu-group-title-padding-left: 32px;\n$menu-color: #666;\n$menu-border-color: #d9d9d9;\n\n$navbar-default-bg-color: #f8f8f8;\n$navbar-default-border-color: #e7e7e7;\n$navbar-default-color: #777;\n$navbar-default-hover-color: #333;\n$navbar-inverse-hover-color: #fff;\n$navbar-inverse-color: #9d9d9d;\n$navbar-inverse-bg-color: #222;\n$navbar-inverse-border-color: #080808;\n$navbar-border-radius: 4px;\n\n$navbar-side-container-border-color: #d9d9d9;\n$navbar-side-container-width: 242px;\n$navbar-side-container-border-shadow: #d9d9d9;\n\n// Basics of a navbar\n$navbar-height: 50px;\n$navbar-margin-bottom: $line-height-computed;\n$navbar-border-radius: $border-radius-base;\n$navbar-padding-horizontal: floor(($grid-gutter-width / 2));\n$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2);\n$navbar-collapse-max-height: 340px;\n\n$navbar-avatar-margin-horizontal: (($navbar-height - 32px) / 2);\n\n$navbar-brand-padding-horizontal: 20px;\n$navbar-brand-logo-height: 32px;\n\n$navbar-default-color: $text-color;\n$navbar-default-bg: $inverse;\n$navbar-default-border: $border-color-base;\n\n// Navbar links\n$navbar-default-link-color: $text-color;\n$navbar-default-link-hover-color: $gray-darker;\n$navbar-default-link-hover-bg: rgba(238,238,238, 30%);\n$navbar-default-link-active-color: $navbar-default-link-hover-color;\n$navbar-default-link-active-bg: rgba(238,238,238, 60%);\n$navbar-default-link-disabled-color: $disabled-color-base;\n$navbar-default-link-disabled-bg: transparent;\n\n// Navbar brand label\n$navbar-default-brand-color: $title-color;\n$navbar-default-brand-hover-color: $navbar-default-brand-color;\n$navbar-default-brand-hover-bg: none;\n\n// Navbar toggle\n$navbar-default-toggle-hover-bg: $navbar-default-link-hover-bg;\n$navbar-default-toggle-icon-bar-bg: $navbar-default-color;\n$navbar-default-toggle-border-color: transparent;\n\n\n// Inverted navbar\n// Reset inverted navbar basics\n$navbar-inverse-bg: $brand-primary;\n$navbar-inverse-border: rgba(0, 0, 0, .1);\n\n// Inverted navbar links\n$navbar-inverse-link-color: $inverse;\n$navbar-inverse-link-hover-color: $inverse;\n$navbar-inverse-link-hover-bg: rgba(0, 0, 0, .1);\n$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color;\n$navbar-inverse-link-active-bg: $navbar-inverse-link-hover-bg;\n$navbar-inverse-link-disabled-color: $inverse;\n$navbar-inverse-link-disabled-bg: transparent;\n\n// Inverted navbar brand label\n$navbar-inverse-brand-color: $navbar-inverse-link-color;\n$navbar-inverse-brand-hover-color: $inverse;\n$navbar-inverse-brand-hover-bg: none;\n\n// Inverted navbar toggle\n$navbar-inverse-toggle-hover-bg: $navbar-inverse-link-hover-bg;\n$navbar-inverse-toggle-icon-bar-bg: $inverse;\n$navbar-inverse-toggle-border-color: transparent;\n\n//hamburger\n$hamburger-size: 17px;\n\n\n//panel\n$panel-header-padding : 10px 15px;\n$panel-footer-padding : 10px 15px;\n$panel-body-padding : 15px 15px;\n$panel-header-bg-color : #f5f5f5;\n$panel-footer-bg-color : #f5f5f5;\n$panel-bg-color : #fff;\n$panel-default-color : #757575;\n$panel-inner-border-color: #ddd;\n\n\n//modal\n$modal-header-padding : 15px;\n$modal-body-padding : 15px;\n$modal-footer-padding : 15px;\n$modal-content-bg-color: #fff;\n$modal-backdrop-bg: #000;\n$modal-backdrop-opacity: .6;\n$modal-header-border-color: transparent;\n$modal-footer-border-color: transparent;\n$modal-xlg: 976px;\n$modal-lg: 800px;\n$modal-sm: 400px;\n$modal-default: 600px;\n$modal-border-radius: $border-radius-base;\n\n//notification\n\n$zIndex-notification: $zIndex-notification;\n$notification-top: 30px;\n$notification-bottom: 30px;\n$notification-right: 30px;\n$notification-width: 300px;\n$notification-text-margin-right: 15px;\n$notice-padding: 15px;\n$notice-background: $gray-darkest;\n$notice-bottom: 15px;\n\n//message\n\n$message-font-size: 12px;\n\n$message-right: 30px;\n$message-width: 300px;\n$message-text-margin-right: 15px;\n$message-padding: 0;\n$message-content-padding: 15px;\n$message-background: $gray-darkest;\n\n//popconfirm\n\n$popconfirm-max-width: 300px;\n\n$popconfirm-dark-bg: $gray-darkest;\n$popconfirm-fallback-dark-border-color: $gray-darkest;\n$popconfirm-margin: 10px;\n$popconfirm-title-bg: #fff;\n$popconfirm-border-color:$border-color-base;\n$popconfirm-arrow-width: 10px;\n$popconfirm-arrow-color: $border-color-base;\n$popconfirm-arrow-outer-width: 0;\n$popconfirm-arrow-outer-color: $border-color-base;\n$popconfirm-border-right-color: $border-color-base;\n$popconfirm-fallback-border-color: #fff;\n\n//select\n\n$select-bg-color: #fff;\n$select-border-color: $border-color-base;\n$select-border-radius: $border-radius-base;\n$select-color: $font-color-base;\n$select-font-size: 12px;\n$select-dropdown-color: #666;\n$select-dropdown-bg-color: #fff;\n$select-dropdown-hover-bg: $hover-bg-color-base;\n$select-dropdown-selected-bg: $selected-bg-color-base;\n$select-dropdown-selected-color: rgb(134, 119, 119);\n$select-dropwdown-item-padding: 7px 16px;\n$select-disabled-color: $disabled-color-base;\n$select-disabled-bg: #f7f7f7;\n$select-disabled-border-color: #d9d9d9;\n//dropdown\n\n$dropdown-item-hover-bg-color: unquote(\"rgb(#{$palette-grey-100})\");\n$dropdown-item-divier-bg-color: $gray-lighter;\n$dropdown-border-color: $border-color-base;\n$dropdown-border-radius:3px;\n$dropdown-shadow: 0 1px 5px $dropdown-border-color;\n$dropdown-margin: 5px 0 0 0;\n$dropdown-menu-item-padding: 0px 16px 0 28px;\n$dropdown-menu-font-size: 12px;\n$dropdown-menu-item-height: 42px;\n$dropdown-menu-item-light-height: 42px;\n$dropdown-menu-title-font-size: 12px;\n$dropdown-menu-title-color: $disabled-color-base;\n$dropdown-menu-title-padding:8px 16px;\n$dropdown-menu-title-line-height: 1.5;\n\n//upload\n\n$upload-list-color: #108ee9;\n$upload-list-bg : #fff;\n$upload-list-hover-bg: #e7f4fd;\n$upload-list-error-color: #f50;\n$upload-thumbnail-height: 48px;\n$upload-thumbnail-width: 48px;\n$upload-thumbnail-img-height: 48px;\n$upload-thumbnail-img-width: 48px;\n\n//loading\n\n$loading-loadprimary: rgb(63, 81, 181);\n$loading-loadsuccess: #4caf50;\n$loading-loadwarn: rgb(255, 152, 0);\n$loading-lineanimating: (\n 1:line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08),\n 2:line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08),\n 3:line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08),\n 4:line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08),\n 5:line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08)\n);\n$loading-linebackcolor: (\n 1: #F44336,\n 2: #7ED321,\n 3: #0084FF,\n 4: #FF9800,\n 5: #D0021B\n);\n$loading-back-width: 120px;\n$loading-back-height:110px;\n$loading-desc-font-size: 16px;\n$loading-desc-color: #cecece;\n$loading-rotate-bor:#c2c3c5;\n\n//两种加载的尺寸 width height\n$loading-rotate-sm-size: 25px;\n$loading-rotate-size:40px;\n$loading-rotate-lg-size:60px;\n\n$loading-line-sm-width: 4px;\n$loading-line-sm-height:35px;\n$loading-line-width:6px;\n$loading-line-height:50px;\n$loading-line-lg-width:8px;\n$loading-line-lg-height:90px ;\n\n//居中位置top left\n$loading-center-top:50%;\n$loading-center-left:50%;\n\n$loading-rotate-center-sm: -15px ;\n$loading-rotate-center:-22px;\n$loading-rotate-center-lg:-35px ;\n\n$loading-line-center-sm-top: -22px;\n$loading-line-center-sm-left:-20px;\n$loading-line-center-top:-30px;\n$loading-line-center-left:-25px;\n$loading-line-center-lg-top:-50px;\n$loading-line-center-lg-left:-30px;\n\n\n//switch\n\n\n//color\n$switch-border-color: $gray-lighter;\n$switch-back-color: $gray-lighter;\n$switch-checked-borColor: $brand-primary;\n$switch-checked-backColor: $brand-primary;\n\n// border-radius of different state switch\n$switch-border-radius: 20px;\n$switch-border-radius-after: 18px;\n\n// width height line-height of the three switches\n$switch-width: (default:44px, small:32px, large:60px);\n$switch-height: (default:22px, small:16px, large:30px);\n$switch-lineHeight: (default:20px, small:12px, large:12px);\n\n// style of u-switch-inner\n$switch-inner-fontSize: (default:12px, small:10px, large:18px);\n$switch-inner-left: (default:22px, small:16px, large:30px);\n$switch-inner-largeTop: 8px;\n\n// style of u-switch:active:after\n$switch-active-width: (default:24px, small:16px, large:32px);\n\n// style of u-switch:after\n$switch-after-widthHeight: 18px;\n$switch-after-widthHeight-sm: 14px;\n$switch-after-widthHeight-lg: 26px;\n$switch-after-top: 1px;\n$switch-after-top-sm: 0;\n$switch-after-top-lg: 1px;\n$switch-after-left: 0;\n$switch-after-left-sm: 0;\n$switch-after-left-lg: 0;\n\n// style of u-switch.is-checked\n$switch-checked-innerLeft: (default:8px, small:4px, large:8px);\n$switch-checked-afterLeft: (default:24px, small:16px, large:32px);\n$switch-checked-activeLeft: (default:16px, small:10px, large:26px);\n\n$switch-primary-bg: $brand-primary;\n$switch-dark-bg: $brand-dark;\n$switch-success-bg: $brand-success;\n$switch-warning-bg: $brand-warning;\n$switch-danger-bg: $brand-danger;\n$switch-info-bg: $brand-info;\n\n//tabs\n\n$tabs-basic-back: #f5f5f5;\n$tabs-cls-color: #666;\n$tabs-cls-width: 900px;\n$tabs-simple-conHeight: 120px;\n$tabs-simple-conPad: 16px;\n$tabs-simple-conWidth: 100%;\n\n$tabs-fontSize: (simple:14px, fill:14px, turn:14px, slide:14px, fade:14px, fadeup:14px);\n$tabs-lineHeight: (simple:2.3, fill:2.3, turn:2.3, slide:2.3, fade:2.3, fadeup:2.3);\n$tabs-marginBottom: -1px;\n\n$tabs-simple-tab: (padding:0 16px, margin:5px 0 5px 5px, radius:0 0 0 0, back:#fff);\n$tabs-simple-tabBorder: 1px solid #fff;\n$tabs-simple-activeBorder: 1px solid $brand-primary;\n$tabs-simple-activeColor: #fff;\n$tabs-simple-activeBorBottom: 1px solid $brand-primary;\n$tabs-simple-activeTopRadius: 5px;\n$tabs-simple-fontWeight: bold;\n\n$tabs-fill-tab: (padding: 0 16px, color:#666, back:#fff, afterBack:#d2d8d6, activeBack:$brand-primary);\n$tabs-fill-tab-maright: 5px;\n$tabs-fill-after-top: 0;\n$tabs-fill-after-left: 0;\n$tabs-fill-after-width: 100%;\n$tabs-fill-after-height: 100%;\n$tabs-fill-fontWeight: bold;\n\n$tabs-turn-tab: (padding: 0 16px, color:#fff, back:#f5f5f5, afterBack:$brand-primary, activeBack:$brand-primary);\n$tabs-turn-after-top: 0;\n$tabs-turn-after-left: 0;\n$tabs-turn-after-width: 100%;\n$tabs-turn-after-height: 100%;\n$tabs-turn-beforeBot: 32px;\n$tabs-turn-beforeRight: 15px;\n$tabs-turn-fontWeight: bold;\n$tabs-moveleft-conHeight: 120px;\n$tabs-moveleft-conPad: 16px;\n\n$tabs-slide-tabs: (width:25%, padding: 0 16px, back:#f5f5f5);\n$tabs-slide-child-bottom: 0;\n$tabs-slide-child-left: 0;\n$tabs-slide-child-height: 4px;\n$tabs-slide-child-back: $brand-primary;\n$tabs-slide-fontWeight: bold;\n\n$tabs-fade-tab: (marLeft:5px, marTop:5px, color:#666, padding:0 16px, radius:0 0 0 0);\n$tabs-fade-conPad: 16px;\n$tabs-fade-conBor: 5px;\n\n$tabs-fadeup-tab: (marTop:5px, color:#666, padding:0 16px, radius:0 0 0 0);\n$tabs-fadeup-top: -5px;\n$tabs-fadeup-left: 0;\n$tabs-fadeup-width: 100%;\n$tabs-fadeup-height: 100%;\n$tabs-fadeup-color: #666;\n$tabs-fadeup-conHeight: 120px;\n$tabs-fadeup-conPad: 16px;\n\n\n//rate\n$rate-star-default-color:$gray-lightest;\n$rate-star-active-color:$brand-primary;\n$rate-star-marginRight:8px;\n//backtop\n$back-top-padding:5px;\n$backtop-background:unquote(\"rgb(#{$palette-u-gray-600})\") !default;\n$backtop-color:unquote(\"rgb(#{$color-white})\") !default;\n$backtop-right:10px;\n$backtop-bottom:10px;\n$backtop-dom-right:40px;\n\n\n//dnd\n$dnd-list-background:unquote(\"rgb(#{$palette-grey-400})\")!default;\n$dnd-list-padding:8px;\n$dnd-list-dragging-background:unquote(\"rgb(#{$palette-light-blue-A200})\")!default;\n$dnd-item-color:unquote(\"rgb(#{$color-black})\")!default;\n$dnd-item-padding:16px;\n$dnd-item-margin:4px;\n$dnd-item-background:unquote(\"rgb(#{$palette-grey-500})\")!default;\n$dnd-item-dragging-background:unquote(\"rgb(#{$palette-blue-300})\")!default;\n\n// bee-tree\n$tree-checkbox-color: unquote(\"rgb(#{$primary-color})\") !default;\n$tree-node-bg-color: $hover-bg-color-base !default;\n\n// bee-table\n$table-head-background-color: unquote(\"rgb(#{$table-header-background-color})\") !default;\n$table-head-text-color: unquote(\"rgb(#{$table-header-text-color})\") !default;\n\n// bee-transfer\n$transfer-border-gap-color:#d9d9d9;\n\n// bee-transfer\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: $font-size-base;\r\n color: $font-color-base;\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 1s 0s linear infinite;\r\n animation: rotate 1s 0s linear infinite;\r\n text-align: center;\r\n line-height: $loading-rotate-size;\r\n & > img{\r\n width: $loading-rotate-size;\r\n }\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 & > img{\r\n width: $loading-rotate-lg-size;\r\n }\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 & > img{\r\n width: $loading-rotate-sm-size;\r\n }\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: .4;\r\n // filter: blur(.5px);\r\n background-color:rgba(255,255,255,0.4);\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 \"minxin-colors\";\n\n// 默认色\n$default-color: $palette-blue-grey-50;\n$default-color-dark: \"223,225,230\";\n$default-color-light: \"223,225,230\";\n\n// 主题色\n$primary-color: \"245, 60, 50\" !default;\n$primary-color-dark: \"230, 0, 18\" !default;\n$primary-color-light: \"230, 0, 18\" !default;\n\n// 字体\n$font-family-primary: \"Open Sans\", \"Helvetica Neue\", Arial, \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif !default;\n// 主字号\n$font-size-base: 14px !default;\n// 主按钮文本色\n$text-color-base: $color-dark-contrast !default; \n\n// 圆角,包括:button、select等\n$border-radius: 3px !default;\n// 边框色,包括按钮、输入框、分页\n$border-color: \"165, 173, 186\" !default;\n// 条目hover背景色,包括:select、dropdown、table、datepicker、tree、menu、calendar\n$item-hover-bg-color-base: \"235, 236, 240\" !default;\n// 条目selected背景色,包括:select、menu等\n$item-selected-bg-color-base: \"255, 247, 231\" !default;\n\n// Button 细化样式变量:\n// 次按钮背景色\n$secondary-color: $palette-blue-grey-50 !default;\n$secondary-color-dark: \"223,225,230\" !default;\n$secondary-color-light: \"223,225,230\" !default;\n// 次按钮文本色\n$button-secondary-text-color: $palette-grey-900 !default;\n\n// Table 细化样式变量:\n// 表头背景色\n$table-header-background-color: \"241, 242, 245\";\n// 表头文字颜色\n$table-header-text-color: \"33, 33, 33\";\n// 表格分割线颜色\n$table-border-color-base: \"193, 199, 208\";\n// 表格行hover背景色\n$table-row-hover-bg-color: \"235, 236, 240\";\n\n// 向下兼容\n$color-primary: $palette-blue-600 !default;\n$color-primary-dark: $palette-blue-800 !default;\n$color-primary-light: $palette-blue-400 !default;\n\n// 辅色\n$color-accent: $palette-green-600 !default;\n$color-accent-dark: $palette-green-800 !default;\n$color-accent-light: $palette-green-400 !default;\n\n\n// cyan主题\n//$color-primary: $palette-cyan-500 !default;\n//$color-primary-dark: $palette-cyan-700 !default;\n//$color-accent: $palette-light-blue-500 !default;\n\n// orange主题\n//$color-primary: $palette-orange-500 !default;\n//$color-primary-dark: $palette-orange-700 !default;\n//$color-accent: $palette-deep-orange-500 !default;\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: $font-color-base;\n$font-size-base: 12px;\n$line-height: 1.33;\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$first-horizontal-padding: 12px;\n// $table-border-color: #e9e9e9;\n\n$table-hover-color: #E7F2FC;\n$table-move-in-color: $bg-color-base;\n$checkbox-height:14px;\n$table-th-bottom-border:#C1C7D0;\n\n$filter-form-control-height:26px;\n$table-head-font-weight: bold;\n$icon-color:#505F79;\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: $table-head-font-weight;\n text-align: left;\n // transition: background 0.3s ease;\n line-height: 16px;\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 line-height: $line-height;\n a{\n color: #2196F3;\n &:hover{\n color: #1565c0;\n }\n &:active{\n color: #1565c0;\n }\n }\n }\n thead{\n tr:last-child{\n border-bottom: 1px solid $table-th-bottom-border;\n }\n tr>th:last-child{\n border-right: none; \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 &.text-center{\n text-align: center;\n }\n &.text-right{\n text-align: right;\n }\n .expand-icon-con{\n cursor: pointer;\n }\n }\n &-sm {\n td {\n padding: 8px $horizontal-padding;\n }\n }\n &-lg {\n td {\n padding: 16px $horizontal-padding;\n }\n }\n tr {\n \n &.filterable{\n th{\n padding-top: 5px !important;\n padding-bottom: 5px !important;\n .filterContext{\n height: 35px;\n }\n .u-select-selection--single{\n height: 26px;\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 \n .u-table-header>table {\n border-bottom: 0;\n }\n .u-table-header~.u-table-body,.u-table-header~.u-table-body-outer{\n table{\n border-top: 0px ;\n }\n }\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 $horizontal-padding;\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 .table-nodata{ \n font-size: 40px; \n line-height: 44px;\n + span{\n font-size: 12px;\n line-height: 12px;\n display: block;\n }\n }\n }\n\n &-expand-icon-col {\n width: 10px;\n }\n &-row,\n &-expanded-row {\n .u-table{\n tr{\n background: #fff;\n }\n tr.u-table-row-hover{\n background:unquote(\"rgb(#{$table-row-hover-bg-color})\");\n }\n }\n &-expand-icon {\n cursor: pointer;\n display: inline-block;\n margin-right: 0px;\n width: 14px;\n height: 14px;\n text-align: center;\n line-height: 14px;\n user-select: none;\n margin-right: 10px;\n &.uf{\n font-size: 12px;\n padding: 0;\n }\n }\n &-spaced {\n visibility: hidden;\n }\n &-spaced:after {\n content: \".\";\n }\n &-expanded {\n &:after {\n content: \"\\e639\";\n font-family: \"uf\" !important;\n }\n }\n &-collapsed {\n &:after {\n content: \"\\e61c\";\n font-family: \"uf\" !important;\n }\n }\n }\n &-row{\n &.selected{\n background: #FFF7E7;\n }\n }\n tr.u-table-expanded-row {\n background: #DFE1E6;\n &:hover {\n background: #DFE1E6;\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: 16px;\n vertical-align: middle;\n text-align: center;\n display: inline-block;\n margin-top: -3px;\n i{\n padding: 0px;\n font-weight: 600;\n color: $icon-color;\n }\n \n & > .bee-table-column-sorter-down,\n & > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat {\n line-height: 16px;\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 //为了区分是拖拽宽度还是交换列,先注释上面了\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: auto;\n color:#212121;\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 width: 30px;\n height: 39px ;\n line-height: 39px;\n right: 0px ;\n top:1px ;\n z-index: 2;\n background: $table-head-background-color;\n text-align: center;\n cursor: pointer;\n i.uf{\n padding: 0px;\n color: $icon-color;\n }\n }\n &-pop-cont-item{\n margin-top: 8px;\n font-size: 12px;\n // line-height: 30px;\n cursor: pointer;\n .u-checkbox {\n margin: 0px;\n\n }\n }\n &-pop-cont-item span.drop-menu-title{\n margin-left: -3px;\n max-width: 132px;\n width: auto !important;\n min-width: 56px;\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 display: block;\n margin-left: 5px;\n .u-checkbox-label{\n line-height: $checkbox-height;\n padding-left: 16px;\n &:before,&:after {\n width: $checkbox-height;\n height: $checkbox-height;\n }\n }\n }\n .u-table-scroll,.u-table-fixed-left{\n tr{\n td:first-child, th:first-child{\n padding-left: $first-horizontal-padding\n }\n }\n }\n &.has-fixed-left{\n .u-table-scroll{\n tr{\n td:first-child, th:first-child{\n padding-left: $horizontal-padding\n }\n }\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 }\n\n .row-dragg-able{\n cursor:move;\n }\n .u-table-drag-hidden-cont{\n width: 100px;\n height: 40px;\n }\n\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: $filter-form-control-height;\n height: $filter-form-control-height;\n padding: 0px 16px 0 16px;\n cursor: pointer;\n }\n }\n}\n.filter-wrap {\n .u-form-control{\n height: $filter-form-control-height;\n }\n .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {\n height: $filter-form-control-height;\n }\n .calendar-picker {\n .u-input-group-btn{\n line-height: 20px;\n }\n }\n .u-input-number.u-input-group.simple .u-input-group-btn .icon-group .uf{\n line-height: 12px;\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\n// 表格显示里面的内容显示在一行\n.header-dispaly-in-row{\n &.u-table{\n table{\n table-layout: fixed;\n }\n }\n th{\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle;\n overflow: hidden;\n }\n}\n.body-dispaly-in-row{\n &.u-table{\n table{\n table-layout: fixed;\n }\n \n }\n td{\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: middle;\n overflow: hidden;\n }\n}\n.u-table-drag-hidden-cont{\n position: absolute;\n top:-1000px;\n}\n\n.u-editable-table .u-table {\n .u-table-row-hover {\n .editable-cell-text-wrapper {\n padding-left: 4px;\n border: 1px solid #c1c7d0;\n }\n }\n\n .editable-cell-text-wrapper {\n &:hover {\n padding-left: 4px;\n border: 1px solid #a5adba;\n }\n }\n\n .editable-cell-input-wrapper {\n &:focus {\n outline: none;\n }\n }\n}\n\n.u-editable-table-tp {\n .tooltip-arrow {\n top: 1px !important;\n border-bottom-color: #F44336 !important;\n }\n\n .tooltip-inner {\n border-color: #F44336 !important;\n }\n}\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-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: #FFF7E7;\n}\n\n.demo25{\n height: 100%;\n\n .u-table-filter-column-filter-icon{\n right: 15px;\n }\n\n}\n.opt-btns .u-button{\n margin: 0 4px;\n color: #fff;\n background: #505F79;\n border-color: #505F79;\n &:hover, &:active{\n background: #344563;\n border-color: #505F79;\n }\n}",".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}",".demo22{\n .opt-btns{\n margin-bottom: 8px;\n }\n}",".demo32{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}",".demo0501 .u-table {\n .u-row-hover {\n .opt-btns,.cancel-btns {\n button {\n margin: 0;\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n }\n\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}",".u-editable-table .u-table {\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n padding-left: 5px;\n font-size: 12px;\n\n &.error {\n border-color: #F44336;\n }\n }\n }\n\n .editable-cell {\n height: 30px;\n }\n\n &-hover {\n .editable-cell-text-wrapper {\n line-height: 19px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .editable-cell-input-wrapper {\n padding-right: 0;\n .ref-input-wrap {\n width: auto !important;\n height: 30px;\n .u-input-group{\n display: inline-block;\n }\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .require {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}",".demo0503-m-b {\n\n &.u-modal .u-modal-body {\n padding: 16px 0;\n background: #f7f9fb;\n }\n\n .u-form-group {\n overflow: hidden;\n }\n\n .u-form-control {\n font-size: 12px;\n }\n\n .editable-cell {\n display: block;\n float: left;\n width: 265px;\n padding-right: 25px;\n }\n\n .ref-input-wrap {\n width: 240px !important;\n }\n\n .u-label {\n display: block;\n float: left;\n text-align: right;\n width: 110px;\n box-sizing: border-box;\n padding-right: 10px;\n font-size: 12px;\n height: 32px;\n line-height: 32px;\n .mast {\n padding: 0;\n color: red;\n }\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n z-index: 9999 !important;\n\n .tp-content {\n color: #F44336;\n }\n}\n.ref-core-button .u-button:first-child{\n margin-right: 8px;\n}",".demo0505 {\n\n .toolbar-btns {\n margin-bottom: 8px;\n\n .u-button {\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n\n .u-table {\n .u-row-select {\n background-color: #FFF7E7;\n }\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .edited::after {\n content: \" \";\n position: absolute;\n z-index: 999;\n top: 0;\n left: 0;\n border-width: 5px;\n border-style: solid;\n border-color: #f44336 transparent transparent #f44336;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\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",".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}"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/dist/demo.js b/dist/demo.js
index 2d3416b..bf244f4 100644
--- a/dist/demo.js
+++ b/dist/demo.js
@@ -58,15 +58,15 @@
var _beePanel = __webpack_require__(9);
- var _beeDrawer = __webpack_require__(82);
+ var _beeDrawer = __webpack_require__(84);
var _beeDrawer2 = _interopRequireDefault(_beeDrawer);
- var _beeClipboard = __webpack_require__(96);
+ var _beeClipboard = __webpack_require__(98);
var _beeClipboard2 = _interopRequireDefault(_beeClipboard);
- var _src = __webpack_require__(264);
+ 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 Demo0101 = __webpack_require__(591);var Demo0102 = __webpack_require__(594);var Demo0103 = __webpack_require__(595);var Demo0104 = __webpack_require__(596);var Demo0105 = __webpack_require__(597);var Demo0106 = __webpack_require__(598);var Demo0107 = __webpack_require__(599);var Demo0201 = __webpack_require__(600);var Demo0202 = __webpack_require__(601);var Demo0301 = __webpack_require__(602);var Demo0302 = __webpack_require__(603);var Demo0402 = __webpack_require__(606);var Demo0404 = __webpack_require__(607);var Demo0405 = __webpack_require__(612);var Demo0501 = __webpack_require__(614);var Demo0502 = __webpack_require__(616);var Demo0503 = __webpack_require__(617);var Demo0505 = __webpack_require__(618);var Demo0601 = __webpack_require__(619);var Demo0602 = __webpack_require__(620);var Demo0603 = __webpack_require__(621);var Demo0701 = __webpack_require__(622);var Demo0702 = __webpack_require__(623);var Demo0802 = __webpack_require__(624);var Demo0901 = __webpack_require__(629);var Demo0902 = __webpack_require__(630);var Demo0903 = __webpack_require__(631);var Demo1001 = __webpack_require__(632);var Demo1002 = __webpack_require__(634);var Demo1101 = __webpack_require__(635);var Demo1102 = __webpack_require__(636);var Demo1103 = __webpack_require__(637);var Demo1105 = __webpack_require__(638);var Demo1106 = __webpack_require__(639);var Demo1107 = __webpack_require__(640);var Demo1108 = __webpack_require__(641);var Demo1201 = __webpack_require__(642);var Demo1301 = __webpack_require__(643);var Demo1302 = __webpack_require__(644);var Demo1401 = __webpack_require__(646);var Demo1402 = __webpack_require__(648);var Demo1403 = __webpack_require__(649);var Demo1404 = __webpack_require__(650);var Demo1601 = __webpack_require__(651);var DemoArray = [{ "example": _react2['default'].createElement(Demo0101, null), "title": " 基本表格", "code": "/**\n*\n* @title 基本表格\n* @parent 基础 Basic\n* @description 单元格数据过长时,可结合Tooltip组件使用。\n* demo0101\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo0101 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 单元格数据过长时,可结合Tooltip组件使用。" }, { "example": _react2['default'].createElement(Demo0102, null), "title": " 默认无数据展示", "code": "/**\r\n*\r\n* @title 默认无数据展示\r\n* @parent 基础 Basic\r\n* @description 无数据时默认展示图标,可在`emptyText`方法中自定义展示内容。\r\n* demo0102\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns = [\r\n {\r\n title: \"员工编号\",\r\n dataIndex: \"num\",\r\n key: \"num\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"员工姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"部门\",\r\n dataIndex: \"department\",\r\n key: \"department\"\r\n }\r\n];\r\n \r\nconst data = [];\r\n\r\n// 在此自定义无数据时的展示内容\r\nconst emptyFunc = () => 'No Data';\r\n \r\nclass Demo02 extends Component {\r\n render() {\r\n return (\r\n \r\n )\r\n }\r\n}\r\n\r\n", "desc": " 无数据时默认展示图标,可在`emptyText`方法中自定义展示内容。" }, { "example": _react2['default'].createElement(Demo0103, null), "title": " 固定表头", "code": "/**\r\n*\r\n* @title 固定表头\r\n* @parent 基础 Basic\r\n* @description 设置`scroll.y`指定滚动区域的高度,达到固定表头效果。\r\n* demo0103\r\n*/\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns03 = [\r\n {\r\n title: \"序号\",\r\n dataIndex: \"index\",\r\n key: \"index\",\r\n width: 80, \r\n render(text, record, index) {\r\n return index + 1;\r\n }\r\n },\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"orderCode\",\r\n key: \"orderCode\",\r\n width: 200, \r\n },\r\n {\r\n title: \"供应商名称\",\r\n dataIndex: \"supplierName\",\r\n key: \"supplierName\",\r\n width: 200\r\n },\r\n {\r\n title: \"类型\",\r\n dataIndex: \"type_name\",\r\n key: \"type_name\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组织\",\r\n dataIndex: \"purchasing\",\r\n key: \"purchasing\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组\",\r\n dataIndex: \"purchasingGroup\",\r\n key: \"purchasingGroup\",\r\n width: 200\r\n },\r\n {\r\n title: \"凭证日期\",\r\n dataIndex: \"voucherDate\",\r\n key: \"voucherDate\",\r\n width: 200,\r\n }\r\n];\r\n\r\nconst data03 = [\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n key: \"1\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n key: \"2\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n key: \"3\"\r\n },\r\n { \r\n orderCode:\"NU0391028\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"4\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"cc\",\r\n voucherDate:\"2019年03月01日\",\r\n key: \"4\"\r\n },\r\n { \r\n orderCode:\"NU0391029\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"5\",\r\n purchasing:'组织d', \r\n purchasingGroup:\"ss\",\r\n voucherDate:\"2019年02月14日\",\r\n key: \"5\"\r\n },\r\n { \r\n orderCode:\"NU0391030\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织e', \r\n purchasingGroup:\"zz\",\r\n voucherDate:\"2019年02月18日\",\r\n key: \"6\"\r\n },\r\n { \r\n orderCode:\"NU0391031\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织f', \r\n purchasingGroup:\"qq\",\r\n voucherDate:\"2019年01月01日\",\r\n key: \"7\"\r\n },\r\n { \r\n orderCode:\"NU0391032\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织g', \r\n purchasingGroup:\"pp\",\r\n voucherDate:\"2019年01月31日\",\r\n key: \"8\"\r\n },\r\n];\r\n\r\nclass Demo03 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n", "desc": " 设置`scroll.y`指定滚动区域的高度,达到固定表头效果。" }, { "example": _react2['default'].createElement(Demo0104, null), "title": " 隔行换色", "code": "/**\n*\n* @title 隔行换色\n* @parent 基础 Basic\n* @description 可自定义斑马线颜色\n* demo0104\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns04 = [\n {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \n render(text, record, index) {\n return index + 1;\n }\n },\n {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\n {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\n {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\n {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\n {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\n {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\n];\n\nconst data04 = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391030\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织e', \n purchasingGroup:\"zz\",\n voucherDate:\"2019年02月18日\",\n key: \"6\"\n },\n { \n orderCode:\"NU0391031\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织f', \n purchasingGroup:\"qq\",\n voucherDate:\"2019年01月01日\",\n key: \"7\"\n },\n { \n orderCode:\"NU0391032\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织g', \n purchasingGroup:\"pp\",\n voucherDate:\"2019年01月31日\",\n key: \"8\"\n },\n];\n\nclass Demo04 extends Component {\n render() {\n return \n }\n}\n\n", "desc": " 可自定义斑马线颜色", "scss_code": ".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}" }, { "example": _react2['default'].createElement(Demo0105, null), "title": " 表格 Loading 加载", "code": "/**\r\n*\r\n* @title 表格 Loading 加载\r\n* @parent 基础 Basic\r\n* @description loading可以传boolean或者object对象,object为bee-loading组件的参数类型\r\n* demo0105\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button,Tooltip} from \"tinper-bee\";\r\n\r\nconst columns05 = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",fixed:'left'},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst data05 = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo05 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n loading : true\r\n }\r\n }\r\n changeLoading = () => {\r\n this.setState({\r\n loading : !this.state.loading\r\n })\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": " loading可以传boolean或者object对象,object为bee-loading组件的参数类型" }, { "example": _react2['default'].createElement(Demo0106, null), "title": " 单元格内容居中", "code": "/**\n*\n* @title 单元格内容居中\n* @parent 基础 Basic\n* @description 在columns数据中设置`textAlign:'center'`,可实现单元格内容居中展示的效果。默认是居左显示。\n* demo0106\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: 120, className: \"rowClassName\",\n fixed:'left',\n textAlign:'center',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100,textAlign:'center'},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100,textAlign:'center'},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100,textAlign:'center' },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100,textAlign:'center' }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo06 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 在columns数据中设置`textAlign:'center'`,可实现单元格内容居中展示的效果。默认是居左显示。" }, { "example": _react2['default'].createElement(Demo0107, null), "title": " 带边框", "code": "/**\n*\n* @title 带边框\n* @parent 基础 Basic\n* @description 设置 `bordered` 属性可添加表格边框线。\n* demo0107\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo06 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 设置 `bordered` 属性可添加表格边框线。" }, { "example": _react2['default'].createElement(Demo0201, null), "title": " 横向滚动条", "code": "/**\n*\n* @title 横向滚动条\n* @parent 滚动 Scroll View\n* @description `scroll.x`的值代表表体内容的实际宽度,默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`,可以手动添加横向滚动条,也可以设置`scroll={{ x:\"110%\" }}`。\n* demo0201\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 100, \n render(text, record, index) {\n return index + 1;\n }\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 300, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 200\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 200\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 200\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 200\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 300,\n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 200\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 200\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 100\n }\n];\n \nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n approvalState_name:\"未审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n approvalState_name:\"未审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"5\"\n }\n];\n\nclass Demo11 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " `scroll.x`的值代表表体内容的实际宽度,默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`,可以手动添加横向滚动条,也可以设置`scroll={{ x:\"110%\" }}`。" }, { "example": _react2['default'].createElement(Demo0202, null), "title": " 纵向滚动条", "code": "/**\n*\n* @title 纵向滚动条\n* @parent 滚动 Scroll View\n* @description 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。\n* demo0202\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \n render(text, record, index) {\n return index + 1;\n }\n },\n {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\n {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\n {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\n {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\n {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\n {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\n];\n \nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391030\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织e', \n purchasingGroup:\"zz\",\n voucherDate:\"2019年02月18日\",\n key: \"6\"\n },\n { \n orderCode:\"NU0391031\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织f', \n purchasingGroup:\"qq\",\n voucherDate:\"2019年01月01日\",\n key: \"7\"\n },\n { \n orderCode:\"NU0391032\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织g', \n purchasingGroup:\"pp\",\n voucherDate:\"2019年01月31日\",\n key: \"8\"\n },\n];\nclass Demo12 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。" }, { "example": _react2['default'].createElement(Demo0301, null), "title": " 渲染本地数据", "code": "/**\n*\n* @title 渲染本地数据\n* @parent 数据操作 Data Opetation\n* @description 可自定义页头和页脚。\n* demo0301\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 { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\n];\nclass Demo21 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n\n render() {\n return (\n 员工信息统计表
}\n footer={currentData => 合计: 共{data.length}条数据
}\n />\n );\n }\n}\n\n\n", "desc": " 可自定义页头和页脚。" }, { "example": _react2['default'].createElement(Demo0302, null), "title": " 渲染远程数据", "code": "/**\n*\n* @title 渲染远程数据\n* @parent 数据操作 Data Opetation\n* @description 可通过 ajax 请求方式,从服务端读取并展现数据。也可自行接入其他数据处理方式。\n* demo0302\n*/\n\nimport React, { Component } from \"react\";\nimport {Button} from \"tinper-bee\";\nimport reqwest from 'reqwest';\nimport { Table } from 'tinper-bee';\n\nconst columns = [{\n title: 'Name',\n dataIndex: 'name',\n sorter: true,\n render: name => `${name.first} ${name.last}`,\n width: '20%',\n}, {\n title: 'Gender',\n dataIndex: 'gender',\n filters: [\n { text: 'Male', value: 'male' },\n { text: 'Female', value: 'female' },\n ],\n width: '20%',\n}, {\n title: 'Email',\n dataIndex: 'email',\n}];\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: [],\n loading: false,\n }\n }\n\n fetch = (params = {}) => {\n console.log('params:', params);\n this.setState({ loading: true });\n reqwest({\n url: 'https://randomuser.me/api',\n method: 'get',\n data: {\n results: 10,\n ...params,\n },\n type: 'json',\n }).then((data) => {\n this.setState({\n loading: false,\n data: data.results,\n });\n });\n }\n\n render() {\n return (\n \n
\n
\n
\n );\n }\n}\n\n\n", "desc": " 可通过 ajax 请求方式,从服务端读取并展现数据。也可自行接入其他数据处理方式。", "scss_code": ".demo22{\n .opt-btns{\n margin-bottom: 8px;\n }\n}" }, { "example": _react2['default'].createElement(Demo0402, null), "title": " 多列表头", "code": "/**\r\n *\r\n * @title 多列表头\r\n * @parent 列渲染 Custom Render\r\n * @description columns[n] 可以内嵌 children,以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight,注:修改th的padding top和bottom置为0,否则会有影响\r\n * demo0402\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button} from \"tinper-bee\";\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst columns = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"Other\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"Address\",\r\n children: [\r\n {\r\n title: \"Street\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"Block\",\r\n children: [\r\n {\r\n title: \"Building\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"Door No.\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: 100\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Company\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"Company Address\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"Company Name\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Gender\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 60,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\",\r\n age: i + 1,\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 2035,\r\n companyAddress: \"Lake Street 42\",\r\n companyName: \"SoftLake Co\",\r\n gender: \"M\"\r\n });\r\n}\r\n\r\nclass Demo32 extends Component {\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": " columns[n] 可以内嵌 children,以渲染分组表头。", "scss_code": ".demo32{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}" }, { "example": _react2['default'].createElement(Demo0404, null), "title": " 数据关联", "code": "/**\n*\n* @title 数据关联\n* @parent 列渲染 Custom Render\n* @description 数据行关联自定义菜单显示\n* demo0404\n*/\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/newMultiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst { Item } = Menu;\n\nconst data = [\n { \n num:\"NU0391025\", \n name: \"aa\",\n sex: \"男\",\n dept:'财务二科', \n rank:\"T1\",\n year:\"1\",\n seniority:\"1\",\n key: \"1\"\n }, \n { \n num:\"NU0391026\", \n name: \"bb\",\n sex: \"女\",\n dept:'财务一科', \n rank:\"M1\",\n year:\"1\",\n seniority:\"1\",\n key: \"2\"\n },\n { \n num:\"NU0391027\", \n name: \"dd\",\n sex: \"女\",\n dept:'财务一科', \n rank:\"T2\",\n year:\"2\",\n seniority:\"2\",\n key: \"3\"\n }\n];\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\n\nclass Demo33 extends Component {\n constructor(props) {\n super(props);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onSelect = (item) => {\n console.log(item);\n }\n render() {\n const menu1 = (\n );\n let columns = [\n { title: \"关联\",dataIndex: \"link\",key: \"link\",width: 80, \n render: (text, record, index) => {\n return (\n \n \n \n )\n }\n },\n { title: \"员工编号\",dataIndex: \"num\",key: \"num\",width: 200 },\n { title: \"员工姓名\",dataIndex: \"name\",key: \"name\", width: 200},\n { title: \"员工性别\",dataIndex: \"sex\",key: \"sex\",width: 200 },\n { title: \"部门\",dataIndex: \"dept\",key: \"dept\",width: 200},\n { title: \"职级\",dataIndex: \"rank\",key: \"rank\",width: 200},\n { title: \"工龄\",dataIndex: \"year\",key: \"year\",width: 200},\n { title: \"司龄\",dataIndex: \"seniority\",key: \"seniority\",width: 200}\n ];\n return \n }\n}\n\n", "desc": " 数据行关联自定义菜单显示" }, { "example": _react2['default'].createElement(Demo0405, null), "title": " 列合计(总计)", "code": "/**\n *\n * @title 列合计(总计)\n * @parent 列渲染 Custom Render\n * @description 给需要计算合计的列(columns),设置sumCol值为true即可,支持动态设置数据源。\n * demo0405\n */\n\nimport React, { Component } from \"react\";\nimport {Checkbox} from \"tinper-bee\";\nimport { Table } from 'tinper-bee'; \nimport sum from \"tinper-bee/lib/sum.js\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\n \nlet ComplexTable = multiSelect(sum(Table), Checkbox);\nlet _sum = 0;\nconst columns = [\n {\n title: \"单据编号\",\n dataIndex: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"业务类型\",\n dataIndex: \"type\",\n key: \"type\",\n width: 200\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"仓库\",\n dataIndex: \"warehouse\",\n key: \"warehouse\",\n width: 80,\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 100,\n sumCol: true\n },\n {\n title: \"金额\",\n dataIndex: \"money\",\n key: \"money\",\n width: 100,\n sumCol: true\n }\n];\n\nfunction getData(){\n const data = [];\n for (let i = 0; i < 5; i++) {\n data.push({\n key: i,\n num: \"NU039100\"+i,\n date: \"2019-03-01\",\n type: \"普通采购\",\n supplier: \"gys\"+i,\n contact: \"Tom\",\n warehouse: \"普通仓\",\n total: i + Math.floor(Math.random()*10),\n money: 20 * Math.floor(Math.random()*10)\n });\n _sum += data[i].total;\n _sum += data[i].money;\n }\n return data;\n}\n\nclass Demo35 extends Component {\n \n constructor(props) {\n super(props);\n this.state = {\n data: getData(),\n sum:_sum\n };\n }\n\n render() {\n const {data} = this.state;\n return (\n \n );\n }\n}\n\n", "desc": " 给需要计算合计的列(columns),设置sumCol值为true即可,支持动态设置数据源。" }, { "example": _react2['default'].createElement(Demo0501, null), "title": " 行内编辑", "code": "/**\n *\n * @title 行内编辑\n * @parent 编辑 Editor\n * @description 可以对行进行编辑的表格\n * demo0501\n */\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport { Select, Form, FormControl, Button, Icon, Tooltip } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleChange = value => {\n const { onChange, throwError } = this.props;\n if (value === \"\") {\n throwError && throwError(true);\n } else {\n throwError && throwError(false);\n }\n this.setState({ value });\n onChange && onChange(value);\n };\n\n render() {\n const { editable, required, colName } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (value === \"\") cls += \" verify-cell\";\n return editable ? (\n \n
\n \n \n {value === \"\" ? (\n {\"请输入\" + colName}
}\n >\n
\n \n ) : null}\n \n
\n \n ) : (\n value || \" \"\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = value => {\n this.setState({ value });\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n const { editable } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n return editable ? (\n \n
\n \n
\n
\n ) : (\n value || \" \"\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n this.props.onChange && this.props.onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { editable, required } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n return editable ? (\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n ),\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n {getFieldError(\"refValue\")}\n \n ) : (\n value.name || \" \"\n );\n }\n }\n);\n\nlet dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0501 extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n dataSource: dataSource,\n editingRowsMap: {},\n currentIndex: null,\n errorEditFlag: false\n };\n\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100,\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"部门\",\n dataIndex: \"d\",\n key: \"d\",\n width: 215,\n render: (text, record, index) => (\n \n )\n },\n // 只是用来占位占宽度的\n {\n key: \"placeholder\"\n }\n ];\n\n this.state = {\n dataSource: dataSource,\n editingRowsMap: {},\n currentIndex: null,\n errorEditFlag: false\n };\n\n this.dataBuffer = {};\n }\n\n edit = index => () => {\n if (index === null) return;\n let editingRowsMap = { ...this.state.editingRowsMap };\n editingRowsMap[index] = index.toString();\n // 最好使用深复制\n this.dataBuffer[index] = { ...this.state.dataSource[index] };\n this.setState({ editingRowsMap });\n };\n\n abortEdit = index => () => {\n let editingRowsMap = { ...this.state.editingRowsMap };\n delete editingRowsMap[index];\n delete this.dataBuffer[index];\n this.setState({ editingRowsMap });\n };\n\n delete = index => () => {\n if (index === null) return;\n let { dataSource } = this.state;\n dataSource.splice(index,1);\n this.setState({\n dataSource:dataSource\n });\n }\n\n commitChange = index => () => {\n if (this.state.errorEditFlag) return;\n let editingRowsMap = { ...this.state.editingRowsMap };\n delete editingRowsMap[index];\n let dataSource = [...this.state.dataSource];\n dataSource[index] = { ...this.dataBuffer[index] };\n this.setState({ editingRowsMap, dataSource });\n };\n\n onCellChange = (index, key) => value => {\n this.dataBuffer[index][key] = value;\n };\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n handleRowHover = (index, record) => {\n this.currentRecord = record;\n this.setState({ currentIndex: index });\n };\n\n renderRowHover = () => {\n const { currentIndex } = this.state;\n return this.state.editingRowsMap[currentIndex] ? (\n \n \n \n
\n ) : (\n \n \n \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": " 可以对行进行编辑的表格", "scss_code": ".demo0501 .u-table {\n .u-row-hover {\n .opt-btns,.cancel-btns {\n button {\n margin: 0;\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n }\n\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}" }, { "example": _react2['default'].createElement(Demo0502, null), "title": " 单元格编辑", "code": "/**\n *\n * @title 单元格编辑\n * @parent 编辑 Editor\n * @description 可以对单元格进行编辑的表格,示例中给出输入框、下拉框、参照的编辑模式,以及两类校验。(通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格)\n * demo0502\n */\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport { Icon, Select, Tooltip, Form } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: this.props.value,\n editable: false\n };\n this.editWarp = React.createRef();\n }\n\n commitChange = () => {\n if (this.state.value === \"\") return;\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n edit = () => {\n this.setState({ editable: true });\n };\n\n handleKeydown = event => {\n if (event.keyCode == 13) {\n this.commitChange();\n }\n };\n\n handleChange = e => {\n if (e.target.value === \"\") this.editWarp.className += \" verify-cell\";\n this.setState({ value: e.target.value });\n };\n\n render() {\n const { value, editable } = this.state;\n return (\n \n {editable ? (\n
this.editWarp = el} className=\"editable-cell-input-wrapper\">\n \n {value === \"\" ? (\n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n
\n \n ) : null}\n
\n ) : (\n \n {value || \" \"}\n
\n )}\n \n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: this.props.value,\n editable: false\n };\n }\n\n handleSelect = value => {\n this.setState({ value });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n edit = () => {\n this.setState({ editable: true });\n };\n\n render() {\n const { value, editable } = this.state;\n return (\n \n {editable ? (\n
\n \n
\n ) : (\n
\n {value || \" \"}\n
\n )}\n
\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n value: this.props.value.d,\n editable: false\n };\n this.refWarp = React.createRef();\n }\n\n edit = () => {\n this.setState({ editable: true }, () => this.refWarp.focus());\n };\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n onRefBlur = e => {\n // 消除点击子组件,父组件先失焦再聚焦的事件触发过程带来的副作用\n const __REF_CONTENT__ = document.querySelector(\"div.ref-core-modal\");\n if (!__REF_CONTENT__ && e.target === this.refWarp) {\n this.commitChange();\n }\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, editable } = this.state;\n return editable ? (\n (this.refWarp = el)}\n className=\"editable-cell-input-wrapper\"\n tabIndex={-1}\n onBlur={this.onRefBlur}\n >\n \n \n {getFieldError(\"code1\")}\n \n
\n ) : (\n \n {value.name || \" \"}\n
\n );\n }\n }\n);\n\nconst dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0502 extends Component {\n constructor(props, context) {\n super(props);\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100,\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"部门\",\n dataIndex: \"d\",\n key: \"d\",\n width: 215,\n render: (text, record, index) => (\n \n )\n },\n {\n key: \"placeholder\"\n }\n ];\n\n this.state = {\n dataSource: dataSource\n };\n }\n\n onCellChange = (index, key) => {\n return value => {\n const { dataSource } = this.state;\n dataSource[index][key] = value;\n this.setState({ dataSource }, () => console.dir(this.state.dataSource));\n };\n };\n\n render() {\n return (\n \n
\n \n );\n }\n}\n\n\n", "desc": " 可以对单元格进行编辑的表格,示例中给出输入框、下拉框、参照的编辑模式,以及两类校验。(通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格)", "scss_code": ".u-editable-table .u-table {\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n padding-left: 5px;\n font-size: 12px;\n\n &.error {\n border-color: #F44336;\n }\n }\n }\n\n .editable-cell {\n height: 30px;\n }\n\n &-hover {\n .editable-cell-text-wrapper {\n line-height: 19px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .editable-cell-input-wrapper {\n padding-right: 0;\n .ref-input-wrap {\n width: auto !important;\n height: 30px;\n .u-input-group{\n display: inline-block;\n }\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .require {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}" }, { "example": _react2['default'].createElement(Demo0503, null), "title": " 弹框(表单)编辑", "code": "/**\n *\n * @title 弹框(表单)编辑\n * @parent 编辑 Editor\n * @description 以弹框形式以对行进行编辑的表格\n * demo0503\n */\n\nimport React, { Component, PureComponent } from \"react\";\nimport { Table } from 'tinper-bee';\nimport {\n Select, Form, FormControl, Button, Icon,\n Tooltip, Modal, FormGroup, Label, Row, Col\n} from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nfunction handleFormValueChange(WarpCompProps, field, allFields) {\n const { onChange, throwError } = WarpCompProps;\n if (field.value === \"\") return throwError && throwError(true);\n throwError && throwError(false);\n onChange && onChange(field.value);\n}\n\nconst StringEditCell = Form.createForm({\n onValuesChange: handleFormValueChange\n})(PureStringEditCell);\n\nfunction PureStringEditCell(props) {\n const { getFieldProps, getFieldError } = props.form;\n const { value, required } = props;\n let cls = \"editable-cell\";\n if (required) cls += \" required\";\n return (\n \n \n {\"请输入\" + props.colName}\n
\n }\n >\n \n \n )\n }\n ]\n })}\n />\n {getFieldError(\"value\")}\n \n );\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends PureComponent {\n constructor(props, context) {\n super(props);\n }\n\n handleSelect = value => {\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n return (\n \n \n
\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends PureComponent {\n constructor(props, context) {\n super(props);\n }\n\n handleSelect = values => {\n const { form, throwError, onChange } = this.props\n if (form.getFieldError(\"refValue\")) return throwError && throwError(true);\n throwError && throwError(false);\n onChange && onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, required } = this.props;\n let cls = \"editable-cell\";\n if (required) cls += \" required\";\n return (\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n ),\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n {getFieldError(\"refValue\")}\n \n );\n }\n }\n);\n\nclass EditModal extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n data: this.props.data,\n errorEditFlag: false\n };\n\n // 属性名对应 columns 属性中的 key 值\n this.renderElm = {\n b: (record, index) => (\n \n ),\n\n c: (record, index) => (\n \n ),\n d: (record, index) => (\n \n )\n }\n }\n\n onFieldChange = field => value => {\n let data = { ...this.state.data };\n data[field] = value;\n this.setState({ data });\n }\n\n submitChange = () => {\n if (this.state.errorEditFlag) return;\n const { onSubmit, onHide, currentIndex } = this.props;\n onSubmit && onSubmit(this.state.data, currentIndex);\n onHide && onHide();\n }\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n render() {\n const { show, onHide, columns, currentIndex } = this.props;\n const { data } = this.state;\n return (\n \n \n 编辑行\n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nlet dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0503 extends Component {\n constructor(props, context) {\n super(props);\n // 编辑态下每个单元格对应的编辑模式组件写在 EditModal 组件中,以 key 值对应\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\"\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: 215,\n render: (text, record, index) => record.d.name\n }\n ];\n\n this.state = {\n dataSource: dataSource,\n isEditing: false,\n currentIndex: null\n };\n }\n\n edit = () => {\n if (this.state.currentIndex === null) return;\n this.setState({ isEditing: true });\n };\n\n abortEdit = () => {\n this.setState({ isEditing: false });\n };\n\n commitChange = (editedRowData, rowIndex) => {\n console.log(editedRowData)\n console.log(rowIndex)\n let dataSource = [...this.state.dataSource];\n dataSource[rowIndex] = editedRowData;\n this.setState({ dataSource });\n };\n\n handleRowHover = (index, record) => {\n this.setState({ currentIndex: index });\n };\n\n hideEditModal = () => {\n this.setState({ isEditing: false });\n }\n\n renderRowHover = () => {\n return (\n \n \n
\n );\n };\n\n\n render() {\n const { dataSource, isEditing, currentIndex } = this.state;\n const columns = this.columns;\n return (\n \n
\n {\n isEditing ? (\n
\n ) : null\n }\n
\n );\n }\n}\n\n\n", "desc": " 以弹框形式以对行进行编辑的表格", "scss_code": ".demo0503-m-b {\n\n &.u-modal .u-modal-body {\n padding: 16px 0;\n background: #f7f9fb;\n }\n\n .u-form-group {\n overflow: hidden;\n }\n\n .u-form-control {\n font-size: 12px;\n }\n\n .editable-cell {\n display: block;\n float: left;\n width: 265px;\n padding-right: 25px;\n }\n\n .ref-input-wrap {\n width: 240px !important;\n }\n\n .u-label {\n display: block;\n float: left;\n text-align: right;\n width: 110px;\n box-sizing: border-box;\n padding-right: 10px;\n font-size: 12px;\n height: 32px;\n line-height: 32px;\n .mast {\n padding: 0;\n color: red;\n }\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n z-index: 9999 !important;\n\n .tp-content {\n color: #F44336;\n }\n}\n.ref-core-button .u-button:first-child{\n margin-right: 8px;\n}" }, { "example": _react2['default'].createElement(Demo0505, null), "title": " 全表格编辑", "code": "/**\n *\n * @title 全表格编辑\n * @parent 编辑 Editor\n * @description 以行内编辑形式对全表数据进行编辑\n * demo0505\n */\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport { Select, Form, FormControl, Button, Icon, Tooltip } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleChange = value => {\n const { onChange, throwError } = this.props;\n if (value === \"\") {\n throwError && throwError(true);\n } else {\n throwError && throwError(false);\n }\n this.setState({ value });\n onChange && onChange(value);\n };\n\n render() {\n const { editable, required, colName, isEdited } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (value === \"\") cls += \" verify-cell\";\n if (isEdited) cls += \" edited\";\n return editable ? (\n \n
\n \n \n {value === \"\" ? (\n {\"请输入\" + colName}
}\n >\n
\n \n ) : null}\n \n
\n \n ) : (\n value || \" \"\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = value => {\n this.setState({ value });\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n const { editable, isEdited } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (isEdited) cls += \" edited\";\n return editable ? (\n \n
\n \n
\n
\n ) : (\n value || \" \"\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n this.props.onChange && this.props.onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { editable, required, isEdited } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n if (isEdited) cls += \" edited\";\n return editable ? (\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n ),\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n {getFieldError(\"refValue\")}\n \n ) : (\n value.name || \" \"\n );\n }\n }\n);\n\nlet dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0505 extends Component {\n constructor(props, context) {\n super(props);\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100,\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"部门\",\n dataIndex: \"d\",\n key: \"d\",\n width: 215,\n render: (text, record, index) => (\n \n )\n },\n // 只是用来占位占宽度的\n {\n key: \"placeholder\"\n }\n ];\n\n // 用于记录数据是否被修改\n dataSource.forEach(item => (item.isEdited = {}));\n this.state = {\n dataSource: dataSource,\n isEditingAll: false,\n currentIndex: null,\n errorEditFlag: false\n };\n\n // 用于记录编辑前数据\n this.dataBuffer = [];\n }\n\n edit = () => {\n this.dataBuffer = [];\n // 最好使用深复制\n this.state.dataSource.forEach((item, index) => {\n this.dataBuffer.push({ ...item });\n });\n this.setState({ isEditingAll: true });\n };\n\n abortEdit = () => {\n let originData = [...this.state.dataSource];\n originData.forEach(item => (item.isEdited = {}));\n this.setState({\n isEditingAll: false,\n dataSource: originData\n });\n };\n\n commitChange = () => {\n if (this.state.errorEditFlag) return;\n const newData = this.dataBuffer.map(item => {\n return Object.assign({}, item, { isEdited: {} });\n });\n this.setState({ isEditingAll: false, dataSource: newData });\n };\n\n onCellChange = (index, key) => value => {\n this.dataBuffer[index][key] = value;\n this.dataBuffer[index].isEdited[key] = true;\n };\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n render() {\n const { dataSource, isEditingAll } = this.state;\n const columns = this.columns;\n return (\n \n
\n {isEditingAll ? (\n \n \n \n \n ) : (\n \n )}\n
\n
\n
\n );\n }\n}\n\n\n", "desc": " 以行内编辑形式对全表数据进行编辑", "scss_code": ".demo0505 {\n\n .toolbar-btns {\n margin-bottom: 8px;\n\n .u-button {\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n\n .u-table {\n .u-row-select {\n background-color: #FFF7E7;\n }\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .edited::after {\n content: \" \";\n position: absolute;\n z-index: 999;\n top: 0;\n left: 0;\n border-width: 5px;\n border-style: solid;\n border-color: #f44336 transparent transparent #f44336;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}" }, { "example": _react2['default'].createElement(Demo0601, null), "title": " 左侧固定列", "code": "/**\n*\n* @title 左侧固定列\n* @parent 列操作-锁定 Fixed\n* @description 固定列到表格的左侧\n* demo0601\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\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: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\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\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\n];\n\nclass Demo51 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 固定列到表格的左侧" }, { "example": _react2['default'].createElement(Demo0602, null), "title": " 右侧固定列", "code": "/**\n*\n* @title 右侧固定列\n* @parent 列操作-锁定 Fixed\n* @description 固定列到表格的右侧\n* demo0602\n*/\n\n\n\nimport React, { Component } from 'react';\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n render(text, record, index){return index + 1}\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: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\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\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\n];\n\nclass Demo52 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 固定列到表格的右侧" }, { "example": _react2['default'].createElement(Demo0603, null), "title": " 动态设置列锁定、解除锁定", "code": "/**\n*\n* @title 动态设置列锁定、解除锁定\n* @parent 列操作-锁定 Fixed\n* @description 动态设置columns中数据的fixed属性值【fixed: \"left\",fixed: \"right\"】。\n* demo0603\n*/\nimport React, { Component } from 'react';\nimport {Icon,Menu,Dropdown} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst { Item } = Menu;\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 150\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: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\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\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\n];\n \nclass Demo24 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n columns:columns\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}\n\n", "desc": " 动态设置columns中数据的fixed属性值【fixed: \"left\",fixed: \"right\"】。", "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(Demo0701, null), "title": " 按条件、值过滤", "code": "/**\n*\n* @title 按条件、值过滤\n* @parent 列操作-过滤 Filter\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。\n* demo0701\n*/\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\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(Demo0702, null), "title": " 复杂表格中行过滤", "code": "/**\n*\n* @title 复杂表格中行过滤\n* @parent 列操作-过滤 Filter\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n* demo0702\n*/\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox} 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 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 onSelect = (item) => {\n console.log(item);\n }\n\n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n let columns27 = [\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(Demo0802, null), "title": " 列过滤面板", "code": "/**\n*\n* @title 列过滤面板\n* @parent 列操作-隐藏 Hide\n* @description 点击表头右侧按钮,设置显示或隐藏表格列。可以自定义设置显示某列,通过ifshow属性控制,默认值为true(显示表格所有列)。afterFilter方法为列过滤后触发的回调函数。\n* demo0802\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon,Popover} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\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 columns: [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 150\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 }\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 return ;\n }\n}\n\nDemo21.defaultProps = defaultProps21;\n", "desc": " 点击表头右侧按钮,设置显示或隐藏表格列。可以自定义设置显示某列,通过ifshow属性控制,默认值为true(显示表格所有列)。afterFilter方法为列过滤后触发的回调函数。" }, { "example": _react2['default'].createElement(Demo0901, null), "title": " 列排序", "code": "/**\n* @title 列排序\n* @parent 列操作-排序 Sort\n* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称\n* demo0901\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: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 150,\n sorter: (a, b) => a.total - b.total\n }\n];\n\nconst data11 = [\n { num: \"NU0391001\", date: \"2019-03-01\", supplier: 'xx供应商',contact:'Tom', total:30 ,key: \"1\" },\n { num: \"NU0391002\", date: \"2018-11-02\", supplier: 'yy供应商',contact:'Jack', total:41 ,key: \"2\" },\n { num: \"NU0391003\", date: \"2019-05-03\", supplier: 'zz供应商',contact:'Jane', total:25 ,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(Demo0902, null), "title": " 后端列排序", "code": "/**\n* @title 后端列排序\n* @parent 列操作-排序 Sort\n* @description 可在控制台中查看序列化后的参数字符串,将参数传递给后端即可进行列排序\n* demo0902\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\n// const 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\n// const 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// ];\nconst columns11 = [\n {\n title: \"单据编号\",\n dataIndex: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 150,\n sorter: (a, b) => a.total - b.total\n },\n {\n title: \"金额\",\n dataIndex: \"money\",\n key: \"money\",\n width: 100,\n sorter: (a, b) => a.money - b.money\n }\n];\n\nconst data11 = [\n { num: \"NU0391001\", date: \"2019-03-01\", supplier: 'xx供应商',contact:'Tom', total:30 ,money: 100,key: \"1\" },\n { num: \"NU0391002\", date: \"2018-11-02\", supplier: 'yy供应商',contact:'Jack', total:41 ,money: 50,key: \"2\" },\n { num: \"NU0391003\", date: \"2019-05-03\", supplier: 'zz供应商',contact:'Jane', total:25 ,money: 200,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(Demo0903, null), "title": " 多列排序", "code": "/**\n *\n * @title 多列排序\n * @parent 列操作-排序 Sort\n * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。\n * demo0903\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: \"NU0391001\", b: 675, c: 30, d: \"xx供应商\",e:100, key: \"2\" },\n { a: \"NU0391002\", b: 43, c: 41, d: \"yy供应商\",e:90, key: \"1\" },\n { a: \"NU0391003\", b: 43, c: 81, d: \"zz供应商\", e:120,key: \"4\" },\n { a: \"NU0391004\", b: 43, c: 81, d: \"aa供应商\", e:130,key: \"5\" },\n { a: \"NU0391005\", b: 153, c: 25, d: \"bb供应商\",e:90, key: \"3\" }\n];\n\n\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\nlet ComplexTable = multiSelect(sort(sum(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(Demo1001, null), "title": " 拖拽改变列顺序", "code": "/**\n*\n* @title 拖拽改变列顺序\n* @parent 列操作-拖拽 Drag\n* @description 点击选择表头并左右拖拽,可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意:固定列不可以交换。\n* demo1001\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 columns = [\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 data = [\n { a: \"NU0391001\", b: \"2019-03-01\", c: 'xx供应商',d:'Tom', key: \"2\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: 'yy供应商',d:'Jack', key: \"1\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: 'zz供应商',d:'Jane', 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 console.log(\"--拖拽交换列后触发事件\");\n console.log(\"event.target:\",event.target);\n console.log(\"data:\",data);\n console.log(\"拖拽完成后的columns:\",columns);\n }}\n />;\n }\n}\n\nDemo22.defaultProps = defaultProps22;\n", "desc": " 点击选择表头并左右拖拽,可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意:固定列不可以交换。" }, { "example": _react2['default'].createElement(Demo1002, null), "title": " 拖拽改变列宽度", "code": "/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description onDropBorder方法为调整列宽后触发的回调函数。注:不支持tree结构的表头、合并表头的table。\n* demo1002\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 }, \n {\n title: \"联系人\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"NU0391001\", b: \"2019-03-01\", c: \"xx供应商\",d:'Tom', key: \"2\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: \"yy供应商\",d:'Jack', key: \"1\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: \"zz供应商\",d:'Jane', 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": " onDropBorder方法为调整列宽后触发的回调函数。注:不支持tree结构的表头、合并表头的table。" }, { "example": _react2['default'].createElement(Demo1101, null), "title": " 嵌套子表格", "code": "/**\n*\n* @title 嵌套子表格\n* @parent 扩展行 Expanded Row\n* @description 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。\n* demo1101\n*/\n\nimport React, { Component } from \"react\";\nimport { Popconfirm,Icon } from 'tinper-bee';\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 \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 \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: \"NU0391001\", b: \"2019-03-01\", c: \"xx供应商\", d: \"操作\", key: \"1\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: \"yy供应商\", d: \"操作\", key: \"2\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: \"zz供应商\", 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: \"NU0391056\", b: \"2019-03-01\", c: \"gys1\", d: \"操作\", key: \"1\" },\n { a: \"NU0391057\", b: \"2018-11-02\", c: \"gys2\", d: \"操作\", key: \"2\" },\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"NU0391079\", b: \"2019-04-17\", c: \"gys5\", d: \"操作\", key: \"3\" },\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 expandedIcon={}\n />\n );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。" }, { "example": _react2['default'].createElement(Demo1102, null), "title": " 树型表格数据展示", "code": "/**\n*\n* @title 树型表格数据展示\n* @parent 扩展行 Expanded Row\n* @description 通过在data中配置children数据,来自动生成树形表格\n* demo1102\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns4 = [\n {\n title: \"订单编号\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"供应商\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"NU0391001\",\n age: \"2019-03-01\",\n address: \"供应商1\",\n children: [\n {\n key: 11,\n name: \"NU0391002\",\n age: \"2019-03-02\",\n address: \"供应商2\"\n },\n {\n key: 12,\n name: \"NU0391003\",\n age: \"2019-03-03\",\n address: \"供应商3\",\n children: [\n {\n key: 121,\n name: \"NU0391004\",\n age: \"2019-03-04\",\n address: \"供应商4\"\n }\n ]\n },\n {\n key: 13,\n name: \"NU0391005\",\n age: \"2019-03-05\",\n address: \"供应商5\",\n children: [\n {\n key: 131,\n name: \"NU0391006\",\n age: \"2019-03-06\",\n address: \"供应商6\",\n children: [\n {\n key: 1311,\n name: \"NU0391007\",\n age: \"2019-03-07\",\n address: \"供应商7\"\n },\n {\n key: 1312,\n name: \"NU0391008\",\n age: \"2019-03-08\",\n address: \"供应商8\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"NU0391009\",\n age: \"2019-03-09\",\n address: \"供应商9\"\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(Demo1103, null), "title": " 自定义表格标题、表尾、选中行颜色", "code": "/**\r\n*\r\n* @title 自定义表格标题、表尾、选中行颜色\r\n* @parent 扩展行 Expanded Row\r\n* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。\r\n* demo1103\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport {Button,Tooltip,} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150, className: \"rowClassName\"},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo26 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n {\r\n if (this.state.selectedRowIndex == index) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n onRowClick={(record,index,indent)=>{\r\n this.setState({ \r\n selectedRowIndex: index\r\n });\r\n }}\r\n title={currentData => 员工信息统计表
}\r\n footer={currentData => 合计: 共{data.length}条数据
}\r\n /> \r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": " 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。" }, { "example": _react2['default'].createElement(Demo1105, null), "title": " 紧凑型、宽松型", "code": "/**\n*\n* @title 紧凑型、宽松型\n* @parent 扩展行 Expanded Row\n* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。\n* demo1105\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip,Tag} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"订单编号\", dataIndex: \"orderNum\", key: \"orderNum\", width: 100 },\n { title: \"采购组织\", dataIndex: \"org\", key: \"org\", width: 200 },\n { title: \"供应商\", dataIndex: \"supplier\", key: \"supplier\", width: 100 },\n { title: \"订单日期\", dataIndex: \"orderDate\", key: \"orderDate\", width: 150 },\n { title: \"总数量\", dataIndex: \"quantity\", key: \"quantity\", width: 100 },\n { title: \"单据状态\", dataIndex: \"status\", key: \"status\", width: 100, \n render: (text, record, index) => {\n return (\n {text.desc}\n );\n }},\n { title: \"提交人\", dataIndex: \"submitter\", key: \"submitter\", width: 100 },\n { title: \"单位\", dataIndex: \"unit\", key: \"unit\", width: 100 },\n { title: \"总税价合计\", dataIndex: \"sum\", key: \"sum\", width: 100 },\n];\n\nconst data = [\n { \n orderNum: \"NU0391025\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年03月18日', \n quantity: '100.00', \n status: {type:'success' ,desc:'正常'}, \n submitter: '小张', \n unit: 'pc', \n sum:'8,487.00', \n key: \"1\" \n },\n { \n orderNum: \"NU0391026\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年02月05日', \n quantity: '91.00', \n status: {type:'danger' ,desc:'异常'}, \n submitter: '小红', \n unit: 'pc', \n sum:'675.00', \n key: \"2\" \n },\n { \n orderNum: \"NU0391027\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年07月01日', \n quantity: '98.00', \n status: {type:'success' ,desc:'正常'}, \n submitter: '小李', \n unit: 'pc', \n sum:'1,531.00', \n key: \"3\" \n }\n];\n\nclass Demo1 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。" }, { "example": _react2['default'].createElement(Demo1106, null), "title": " 自定义行高", "code": "/**\n*\n* @title 自定义行高\n* @parent 扩展行 Expanded Row\n* @description 设置`height`属性自定义表体行高,设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。\n* demo1106\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150, className: \"rowClassName\"},\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", 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 handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=()=>{\n return
\n }\n\n render() {\n return (\n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n", "desc": " 设置`height`属性自定义表体行高,设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。" }, { "example": _react2['default'].createElement(Demo1107, null), "title": " 图片在表格中的展示", "code": "/**\n*\n* @title 图片在表格中的展示\n* @parent 扩展行 Expanded Row\n* @description 根据图片高度自动撑开行高,可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注:如果图片在固定列中,可以使用heightConsistent属性,当此属性为true,就不会出现错行问题\n* demo1107\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80,\n render(text, record, index) {\n return index + 1;\n }\n },\n {\n title: \"图样\",\n dataIndex: \"picture\",\n key: \"picture\",\n render(text, record, index) {\n return \n }\n },\n {\n title: \"组织部门\",\n dataIndex: \"orgDept\",\n key: \"orgDept\",\n width: 100,\n },\n {\n title: \"设施管理部门\",\n dataIndex: \"facilityManageUnit\",\n key: \"facilityManageUnit\",\n width: 150,\n },\n {\n title: \"案卷编号\",\n dataIndex: \"docketnum\",\n key: \"docketnum\",\n width: 100,\n },\n {\n title: \"数量\",\n dataIndex: \"num\",\n key: \"num\",\n width: 100,\n },\n {\n title: \"首次发现时间\",\n dataIndex: \"discoveryTime\",\n key: \"discoveryTime\",\n width: 150,\n },\n {\n title: \"实际修复时间\",\n dataIndex: \"repairTime\",\n key: \"repairTime\",\n width: 150,\n }\n];\n\nconst data = [\n { key: \"1\", orgDept: \"组织1\", facilityManageUnit: \"部门1\", docketnum: 41, num: \"1\", discoveryTime: \"2018-10-17\", repairTime: \"2018-10-30\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg\"},\n { key: \"2\", orgDept: \"组织2\", facilityManageUnit: \"部门2\", docketnum: 30, num: \"2\", discoveryTime: \"2019-01-15\", repairTime: \"2019-01-20\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg\"},\n { key: \"3\", orgDept: \"组织3\", facilityManageUnit: \"部门3\", docketnum: 35, num: \"3\", discoveryTime: \"2019-04-10\", repairTime: \"2019-04-17\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg\"}\n];\n\nclass Demo1107 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 根据图片高度自动撑开行高,可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注:如果图片在固定列中,可以使用heightConsistent属性,当此属性为true,就不会出现错行问题" }, { "example": _react2['default'].createElement(Demo1108, null), "title": " 自定义行、列合并", "code": "/**\n*\n* @title 自定义行、列合并\n* @parent 扩展行 Expanded Row\n* @description 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。\n* demo1108\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: '姓名',\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: '年龄',\n key: \"age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: '联系方式',\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: '手机号',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: '家庭住址',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\n\nconst data = [{\n key: '1',\n name: '小红',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: '北京海淀',\n}, {\n key: '2',\n name: '小明',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: '河北张家口',\n}, {\n key: '3',\n name: '张三',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '浙江杭州',\n}, {\n key: '4',\n name: '李四',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '广州深圳',\n}, {\n key: '5',\n name: '王五',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '北京昌平',\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(Demo1201, null), "title": " 拖拽改变行顺序", "code": "/**\n*\n* @title 拖拽改变行顺序\n* @parent 行操作-拖拽\n* @description `rowDraggAble`参数设置是否使用行交换顺序功能,`onDropRow` 是拖拽行后的回调函数。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* Demo1201\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:200 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1001\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"1002\" },\n { a: \"ASVAL_201903120001\", b: \"小红\", c: \"女\", d: \"财务四科\", e: \"T3\", key: \"1003\" },\n { a: \"ASVAL_201903120002\", b: \"小姚\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"1004\" },\n { a: \"ASVAL_201903120003\", b: \"小岳\", c: \"男\", d: \"财务五科\", e: \"T2\", key: \"1005\" },\n { a: \"ASVAL_201903120004\", b: \"小王\", c: \"男\", d: \"财务一科\", e: \"T5\", key: \"1006\" },\n { a: \"ASVAL_201903120005\", b: \"小绍\", c: \"男\", d: \"财务七科\", e: \"T2\", key: \"1007\" },\n { a: \"ASVAL_201903120006\", b: \"小郭\", c: \"男\", d: \"财务一科\", e: \"T3\", key: \"1008\" },\n { a: \"ASVAL_201903120007\", b: \"小杨\", c: \"女\", d: \"财务四科\", e: \"T2\", key: \"1009\" }\n];\n\nclass Demo1201 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n /**\n * 行拖拽结束时触发\n * @param data 拖拽改变顺序后的新data数组\n * @param record 拖拽行的数据\n */\n onDropRow = (data, record) => {\n console.log('重排序后的data: ', data);\n console.log('拖拽的行数据: ', record);\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " `rowDraggAble`参数设置是否使用行交换顺序功能,`onDropRow` 是拖拽行后的回调函数。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。" }, { "example": _react2['default'].createElement(Demo1301, null), "title": " 多选功能", "code": "/**\r\n*\r\n* @title 多选功能\r\n* @parent 行操作-选择\r\n* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数,返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中,添加_disabled参数可禁止选择当前数据。\r\n* demo1301\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport {Checkbox} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\",_checked:true },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\",_checked:false },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\",_checked:false },\r\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\",_disabled:true },\r\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\",_checked:false}\r\n];\r\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\r\nlet MultiSelectTable = multiSelect(Table, Checkbox);\r\n\r\nclass Demo12 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data\r\n };\r\n }\r\n /**\r\n *@param selectedList:当前选中的行数据\r\n *@param record 当前操作行数据\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (selectedList,record,index) => {\r\n console.log(\"selectedList\", selectedList,\"index\",index);\r\n // 如果在回调中增加setState逻辑,需要同步data中的_checked属性。即下面的代码\r\n // const allChecked = selectedList.length == 0?false:true;\r\n // record为undefind则为全选或者全不选\r\n // if(!record){\r\n // data12.forEach(item=>{\r\n // item._checked = allChecked;\r\n // })\r\n // }else{\r\n // data12[index]['_checked'] = record._checked;\r\n // } \r\n\r\n \r\n };\r\n \r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n return (\r\n {\r\n if (record._checked) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n );\r\n }\r\n}\r\n\r\n", "desc": " 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数,返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中,添加_disabled参数可禁止选择当前数据。" }, { "example": _react2['default'].createElement(Demo1302, null), "title": " 单选功能", "code": "/**\r\n*\r\n* @title 单选功能\r\n* @parent 行操作-选择\r\n* @description 表格支持单选行操作,可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。\r\n* Demo1302\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Radio } from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport singleSelect from \"tinper-bee/lib/singleSelect.js\";;\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300 },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n ];\r\n \r\n const data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" },\r\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\r\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" }\r\n ];\r\n\r\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\r\nlet SingleSelectTable = singleSelect(Table, Radio);\r\n\r\nclass Demo1302 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0,\r\n }\r\n }\r\n\r\n /**\r\n *@param selected 当前选中的行数据(当前操作行数据)\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (record,index) => {\r\n console.log(\"record\", record, \"index\",index);\r\n\r\n this.setState({\r\n selectedRowIndex:index\r\n })\r\n };\r\n\r\n render() {\r\n let {selectedRowIndex} = this.state;\r\n\r\n return (\r\n {\r\n if (index === selectedRowIndex) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}\r\n /> \r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": " 表格支持单选行操作,可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。" }, { "example": _react2['default'].createElement(Demo1401, null), "title": " 万行以上数据渲染", "code": "/**\n*\n* @title 万行以上数据渲染\n* @parent 无限滚动 Infinite-scroll\n* @description 万行数据渲染\n* demo1401\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:'60',\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(Demo1402, null), "title": " 嵌套子表格滚动加载", "code": "/**\n*\n* @title 嵌套子表格滚动加载\n* @parent 无限滚动 Infinite-scroll\n* @description 通过expandedRowRender参数来实现子表格。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* demo1402\n*/\n\nimport React, { Component } from \"react\";\nimport {Popconfirm} from 'tinper-bee';\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 \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 \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 = [ ...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 );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。" }, { "example": _react2['default'].createElement(Demo1403, null), "title": " 多功能表格滚动加载", "code": "/**\n*\n* @title 多功能表格滚动加载\n* @parent 无限滚动 Infinite-scroll\n* @description\n* demo1403\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:'80',\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(Demo1404, null), "title": " 层级树大数据场景", "code": "/**\n* @title 层级树大数据场景\n* @parent 无限滚动 Infinite-scroll\n* @description\n* demo1404\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 = (expandedRowKeys)=>{\n console.log('expandedRowKeys',expandedRowKeys);\n }\n onExpand = (expandKeys)=>{\n console.log('expand---'+expandKeys);\n }\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n onExpandedRowsChange={this.onExpandedRowsChange}\n />\n\n \n );\n }\n}\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo1601, null), "title": " 表格+分页", "code": "/**\n * @title 表格+分页\n * @parent 分页 Pagination\n * @description 点击分页联动表格\n * demo1601\n */\n\nimport React, { Component } from \"react\";\nimport {Pagination} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\n];\n\nconst pageData = {\n 1: [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\n ],\n 2: [\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" },\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}" }];
+ var Demo0101 = __webpack_require__(530);var Demo0102 = __webpack_require__(533);var Demo0103 = __webpack_require__(534);var Demo0104 = __webpack_require__(535);var Demo0105 = __webpack_require__(536);var Demo0106 = __webpack_require__(537);var Demo0107 = __webpack_require__(538);var Demo0201 = __webpack_require__(539);var Demo0202 = __webpack_require__(540);var Demo0301 = __webpack_require__(541);var Demo0302 = __webpack_require__(542);var Demo0402 = __webpack_require__(545);var Demo0404 = __webpack_require__(546);var Demo0405 = __webpack_require__(551);var Demo0501 = __webpack_require__(553);var Demo0502 = __webpack_require__(555);var Demo0503 = __webpack_require__(556);var Demo0505 = __webpack_require__(557);var Demo0601 = __webpack_require__(558);var Demo0602 = __webpack_require__(559);var Demo0603 = __webpack_require__(560);var Demo0701 = __webpack_require__(561);var Demo0702 = __webpack_require__(562);var Demo0802 = __webpack_require__(563);var Demo0901 = __webpack_require__(569);var Demo0902 = __webpack_require__(570);var Demo0903 = __webpack_require__(571);var Demo1001 = __webpack_require__(572);var Demo1002 = __webpack_require__(574);var Demo1101 = __webpack_require__(575);var Demo1102 = __webpack_require__(576);var Demo1103 = __webpack_require__(577);var Demo1105 = __webpack_require__(578);var Demo1106 = __webpack_require__(579);var Demo1107 = __webpack_require__(580);var Demo1108 = __webpack_require__(581);var Demo1201 = __webpack_require__(582);var Demo1301 = __webpack_require__(583);var Demo1302 = __webpack_require__(584);var Demo1401 = __webpack_require__(586);var Demo1402 = __webpack_require__(588);var Demo1403 = __webpack_require__(589);var Demo1404 = __webpack_require__(590);var Demo1601 = __webpack_require__(591);var DemoArray = [{ "example": _react2['default'].createElement(Demo0101, null), "title": " 基本表格", "code": "/**\n*\n* @title 基本表格\n* @parent 基础 Basic\n* @description 单元格数据过长时,可结合Tooltip组件使用。\n* demo0101\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo0101 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 单元格数据过长时,可结合Tooltip组件使用。" }, { "example": _react2['default'].createElement(Demo0102, null), "title": " 默认无数据展示", "code": "/**\r\n*\r\n* @title 默认无数据展示\r\n* @parent 基础 Basic\r\n* @description 无数据时默认展示图标,可在`emptyText`方法中自定义展示内容。\r\n* demo0102\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns = [\r\n {\r\n title: \"员工编号\",\r\n dataIndex: \"num\",\r\n key: \"num\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"员工姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"部门\",\r\n dataIndex: \"department\",\r\n key: \"department\"\r\n }\r\n];\r\n \r\nconst data = [];\r\n\r\n// 在此自定义无数据时的展示内容\r\nconst emptyFunc = () => 'No Data';\r\n \r\nclass Demo02 extends Component {\r\n render() {\r\n return (\r\n \r\n )\r\n }\r\n}\r\n\r\n", "desc": " 无数据时默认展示图标,可在`emptyText`方法中自定义展示内容。" }, { "example": _react2['default'].createElement(Demo0103, null), "title": " 固定表头", "code": "/**\r\n*\r\n* @title 固定表头\r\n* @parent 基础 Basic\r\n* @description 设置`scroll.y`指定滚动区域的高度,达到固定表头效果。\r\n* demo0103\r\n*/\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns03 = [\r\n {\r\n title: \"序号\",\r\n dataIndex: \"index\",\r\n key: \"index\",\r\n width: 80, \r\n render(text, record, index) {\r\n return index + 1;\r\n }\r\n },\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"orderCode\",\r\n key: \"orderCode\",\r\n width: 200, \r\n },\r\n {\r\n title: \"供应商名称\",\r\n dataIndex: \"supplierName\",\r\n key: \"supplierName\",\r\n width: 200\r\n },\r\n {\r\n title: \"类型\",\r\n dataIndex: \"type_name\",\r\n key: \"type_name\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组织\",\r\n dataIndex: \"purchasing\",\r\n key: \"purchasing\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组\",\r\n dataIndex: \"purchasingGroup\",\r\n key: \"purchasingGroup\",\r\n width: 200\r\n },\r\n {\r\n title: \"凭证日期\",\r\n dataIndex: \"voucherDate\",\r\n key: \"voucherDate\",\r\n width: 200,\r\n }\r\n];\r\n\r\nconst data03 = [\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n key: \"1\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n key: \"2\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n key: \"3\"\r\n },\r\n { \r\n orderCode:\"NU0391028\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"4\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"cc\",\r\n voucherDate:\"2019年03月01日\",\r\n key: \"4\"\r\n },\r\n { \r\n orderCode:\"NU0391029\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"5\",\r\n purchasing:'组织d', \r\n purchasingGroup:\"ss\",\r\n voucherDate:\"2019年02月14日\",\r\n key: \"5\"\r\n },\r\n { \r\n orderCode:\"NU0391030\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织e', \r\n purchasingGroup:\"zz\",\r\n voucherDate:\"2019年02月18日\",\r\n key: \"6\"\r\n },\r\n { \r\n orderCode:\"NU0391031\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织f', \r\n purchasingGroup:\"qq\",\r\n voucherDate:\"2019年01月01日\",\r\n key: \"7\"\r\n },\r\n { \r\n orderCode:\"NU0391032\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织g', \r\n purchasingGroup:\"pp\",\r\n voucherDate:\"2019年01月31日\",\r\n key: \"8\"\r\n },\r\n];\r\n\r\nclass Demo03 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n", "desc": " 设置`scroll.y`指定滚动区域的高度,达到固定表头效果。" }, { "example": _react2['default'].createElement(Demo0104, null), "title": " 隔行换色", "code": "/**\n*\n* @title 隔行换色\n* @parent 基础 Basic\n* @description 可自定义斑马线颜色\n* demo0104\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns04 = [\n {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \n render(text, record, index) {\n return index + 1;\n }\n },\n {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\n {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\n {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\n {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\n {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\n {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\n];\n\nconst data04 = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391030\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织e', \n purchasingGroup:\"zz\",\n voucherDate:\"2019年02月18日\",\n key: \"6\"\n },\n { \n orderCode:\"NU0391031\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织f', \n purchasingGroup:\"qq\",\n voucherDate:\"2019年01月01日\",\n key: \"7\"\n },\n { \n orderCode:\"NU0391032\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织g', \n purchasingGroup:\"pp\",\n voucherDate:\"2019年01月31日\",\n key: \"8\"\n },\n];\n\nclass Demo04 extends Component {\n render() {\n return \n }\n}\n\n", "desc": " 可自定义斑马线颜色", "scss_code": ".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}" }, { "example": _react2['default'].createElement(Demo0105, null), "title": " 表格 Loading 加载", "code": "/**\r\n*\r\n* @title 表格 Loading 加载\r\n* @parent 基础 Basic\r\n* @description loading可以传boolean或者object对象,object为bee-loading组件的参数类型\r\n* demo0105\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button,Tooltip} from \"tinper-bee\";\r\n\r\nconst columns05 = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",fixed:'left'},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst data05 = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo05 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n loading : true\r\n }\r\n }\r\n changeLoading = () => {\r\n this.setState({\r\n loading : !this.state.loading\r\n })\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": " loading可以传boolean或者object对象,object为bee-loading组件的参数类型" }, { "example": _react2['default'].createElement(Demo0106, null), "title": " 单元格内容居中", "code": "/**\n*\n* @title 单元格内容居中\n* @parent 基础 Basic\n* @description 在columns数据中设置`textAlign:'center'`,可实现单元格内容居中展示的效果。默认是居左显示。\n* demo0106\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: 120, className: \"rowClassName\",\n fixed:'left',\n textAlign:'center',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100,textAlign:'center'},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100,textAlign:'center'},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100,textAlign:'center' },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100,textAlign:'center' }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo06 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 在columns数据中设置`textAlign:'center'`,可实现单元格内容居中展示的效果。默认是居左显示。" }, { "example": _react2['default'].createElement(Demo0107, null), "title": " 带边框", "code": "/**\n*\n* @title 带边框\n* @parent 基础 Basic\n* @description 设置 `bordered` 属性可添加表格边框线。\n* demo0107\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo06 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 设置 `bordered` 属性可添加表格边框线。" }, { "example": _react2['default'].createElement(Demo0201, null), "title": " 横向滚动条", "code": "/**\n*\n* @title 横向滚动条\n* @parent 滚动 Scroll View\n* @description `scroll.x`的值代表表体内容的实际宽度,默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`,可以手动添加横向滚动条,也可以设置`scroll={{ x:\"110%\" }}`。\n* demo0201\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 100, \n render(text, record, index) {\n return index + 1;\n }\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 300, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 200\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 200\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 200\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 200\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 300,\n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 200\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 200\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 100\n }\n];\n \nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n approvalState_name:\"未审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n approvalState_name:\"未审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"5\"\n }\n];\n\nclass Demo11 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " `scroll.x`的值代表表体内容的实际宽度,默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`,可以手动添加横向滚动条,也可以设置`scroll={{ x:\"110%\" }}`。" }, { "example": _react2['default'].createElement(Demo0202, null), "title": " 纵向滚动条", "code": "/**\n*\n* @title 纵向滚动条\n* @parent 滚动 Scroll View\n* @description 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。\n* demo0202\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \n render(text, record, index) {\n return index + 1;\n }\n },\n {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\n {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\n {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\n {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\n {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\n {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\n];\n \nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391030\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织e', \n purchasingGroup:\"zz\",\n voucherDate:\"2019年02月18日\",\n key: \"6\"\n },\n { \n orderCode:\"NU0391031\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织f', \n purchasingGroup:\"qq\",\n voucherDate:\"2019年01月01日\",\n key: \"7\"\n },\n { \n orderCode:\"NU0391032\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织g', \n purchasingGroup:\"pp\",\n voucherDate:\"2019年01月31日\",\n key: \"8\"\n },\n];\nclass Demo12 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。" }, { "example": _react2['default'].createElement(Demo0301, null), "title": " 渲染本地数据", "code": "/**\n*\n* @title 渲染本地数据\n* @parent 数据操作 Data Opetation\n* @description 可自定义页头和页脚。\n* demo0301\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 { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\n];\nclass Demo21 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n\n render() {\n return (\n 员工信息统计表
}\n footer={currentData => 合计: 共{data.length}条数据
}\n />\n );\n }\n}\n\n\n", "desc": " 可自定义页头和页脚。" }, { "example": _react2['default'].createElement(Demo0302, null), "title": " 渲染远程数据", "code": "/**\n*\n* @title 渲染远程数据\n* @parent 数据操作 Data Opetation\n* @description 可通过 ajax 请求方式,从服务端读取并展现数据。也可自行接入其他数据处理方式。\n* demo0302\n*/\n\nimport React, { Component } from \"react\";\nimport {Button} from \"tinper-bee\";\nimport reqwest from 'reqwest';\nimport { Table } from 'tinper-bee';\n\nconst columns = [{\n title: 'Name',\n dataIndex: 'name',\n sorter: true,\n render: name => `${name.first} ${name.last}`,\n width: '20%',\n}, {\n title: 'Gender',\n dataIndex: 'gender',\n filters: [\n { text: 'Male', value: 'male' },\n { text: 'Female', value: 'female' },\n ],\n width: '20%',\n}, {\n title: 'Email',\n dataIndex: 'email',\n}];\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: [],\n loading: false,\n }\n }\n\n fetch = (params = {}) => {\n console.log('params:', params);\n this.setState({ loading: true });\n reqwest({\n url: 'https://randomuser.me/api',\n method: 'get',\n data: {\n results: 10,\n ...params,\n },\n type: 'json',\n }).then((data) => {\n this.setState({\n loading: false,\n data: data.results,\n });\n });\n }\n\n render() {\n return (\n \n
\n
\n
\n );\n }\n}\n\n\n", "desc": " 可通过 ajax 请求方式,从服务端读取并展现数据。也可自行接入其他数据处理方式。", "scss_code": ".demo22{\n .opt-btns{\n margin-bottom: 8px;\n }\n}" }, { "example": _react2['default'].createElement(Demo0402, null), "title": " 多列表头", "code": "/**\r\n *\r\n * @title 多列表头\r\n * @parent 列渲染 Custom Render\r\n * @description columns[n] 可以内嵌 children,以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight,注:修改th的padding top和bottom置为0,否则会有影响\r\n * demo0402\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button} from \"tinper-bee\";\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst columns = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"Other\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"Address\",\r\n children: [\r\n {\r\n title: \"Street\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"Block\",\r\n children: [\r\n {\r\n title: \"Building\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"Door No.\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: 100\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Company\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"Company Address\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"Company Name\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Gender\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 60,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\",\r\n age: i + 1,\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 2035,\r\n companyAddress: \"Lake Street 42\",\r\n companyName: \"SoftLake Co\",\r\n gender: \"M\"\r\n });\r\n}\r\n\r\nclass Demo32 extends Component {\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": " columns[n] 可以内嵌 children,以渲染分组表头。", "scss_code": ".demo32{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}" }, { "example": _react2['default'].createElement(Demo0404, null), "title": " 数据关联", "code": "/**\n*\n* @title 数据关联\n* @parent 列渲染 Custom Render\n* @description 数据行关联自定义菜单显示\n* demo0404\n*/\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/newMultiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst { Item } = Menu;\n\nconst data = [\n { \n num:\"NU0391025\", \n name: \"aa\",\n sex: \"男\",\n dept:'财务二科', \n rank:\"T1\",\n year:\"1\",\n seniority:\"1\",\n key: \"1\"\n }, \n { \n num:\"NU0391026\", \n name: \"bb\",\n sex: \"女\",\n dept:'财务一科', \n rank:\"M1\",\n year:\"1\",\n seniority:\"1\",\n key: \"2\"\n },\n { \n num:\"NU0391027\", \n name: \"dd\",\n sex: \"女\",\n dept:'财务一科', \n rank:\"T2\",\n year:\"2\",\n seniority:\"2\",\n key: \"3\"\n }\n];\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\n\nclass Demo33 extends Component {\n constructor(props) {\n super(props);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onSelect = (item) => {\n console.log(item);\n }\n render() {\n const menu1 = (\n );\n let columns = [\n { title: \"关联\",dataIndex: \"link\",key: \"link\",width: 80, \n render: (text, record, index) => {\n return (\n \n \n \n )\n }\n },\n { title: \"员工编号\",dataIndex: \"num\",key: \"num\",width: 200 },\n { title: \"员工姓名\",dataIndex: \"name\",key: \"name\", width: 200},\n { title: \"员工性别\",dataIndex: \"sex\",key: \"sex\",width: 200 },\n { title: \"部门\",dataIndex: \"dept\",key: \"dept\",width: 200},\n { title: \"职级\",dataIndex: \"rank\",key: \"rank\",width: 200},\n { title: \"工龄\",dataIndex: \"year\",key: \"year\",width: 200},\n { title: \"司龄\",dataIndex: \"seniority\",key: \"seniority\",width: 200}\n ];\n return \n }\n}\n\n", "desc": " 数据行关联自定义菜单显示" }, { "example": _react2['default'].createElement(Demo0405, null), "title": " 列合计(总计)", "code": "/**\n *\n * @title 列合计(总计)\n * @parent 列渲染 Custom Render\n * @description 给需要计算合计的列(columns),设置sumCol值为true即可,支持动态设置数据源。\n * demo0405\n */\n\nimport React, { Component } from \"react\";\nimport {Checkbox} from \"tinper-bee\";\nimport { Table } from 'tinper-bee'; \nimport sum from \"tinper-bee/lib/sum.js\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\n \nlet ComplexTable = multiSelect(sum(Table), Checkbox);\nlet _sum = 0;\nconst columns = [\n {\n title: \"单据编号\",\n dataIndex: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"业务类型\",\n dataIndex: \"type\",\n key: \"type\",\n width: 200\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"仓库\",\n dataIndex: \"warehouse\",\n key: \"warehouse\",\n width: 80,\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 100,\n sumCol: true\n },\n {\n title: \"金额\",\n dataIndex: \"money\",\n key: \"money\",\n width: 100,\n sumCol: true\n }\n];\n\nfunction getData(){\n const data = [];\n for (let i = 0; i < 5; i++) {\n data.push({\n key: i,\n num: \"NU039100\"+i,\n date: \"2019-03-01\",\n type: \"普通采购\",\n supplier: \"gys\"+i,\n contact: \"Tom\",\n warehouse: \"普通仓\",\n total: i + Math.floor(Math.random()*10),\n money: 20 * Math.floor(Math.random()*10)\n });\n _sum += data[i].total;\n _sum += data[i].money;\n }\n return data;\n}\n\nclass Demo35 extends Component {\n \n constructor(props) {\n super(props);\n this.state = {\n data: getData(),\n sum:_sum\n };\n }\n\n render() {\n const {data} = this.state;\n return (\n \n );\n }\n}\n\n", "desc": " 给需要计算合计的列(columns),设置sumCol值为true即可,支持动态设置数据源。" }, { "example": _react2['default'].createElement(Demo0501, null), "title": " 行内编辑", "code": "/**\n *\n * @title 行内编辑\n * @parent 编辑 Editor\n * @description 可以对行进行编辑的表格\n * demo0501\n */\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport { Select, Form, FormControl, Button, Icon, Tooltip } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleChange = value => {\n const { onChange, throwError } = this.props;\n if (value === \"\") {\n throwError && throwError(true);\n } else {\n throwError && throwError(false);\n }\n this.setState({ value });\n onChange && onChange(value);\n };\n\n render() {\n const { editable, required, colName } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (value === \"\") cls += \" verify-cell\";\n return editable ? (\n \n
\n \n \n {value === \"\" ? (\n {\"请输入\" + colName}
}\n >\n
\n \n ) : null}\n \n
\n \n ) : (\n value || \" \"\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = value => {\n this.setState({ value });\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n const { editable } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n return editable ? (\n \n
\n \n
\n
\n ) : (\n value || \" \"\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n this.props.onChange && this.props.onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { editable, required } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n return editable ? (\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n ),\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n {getFieldError(\"refValue\")}\n \n ) : (\n value.name || \" \"\n );\n }\n }\n);\n\nlet dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0501 extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n dataSource: dataSource,\n editingRowsMap: {},\n currentIndex: null,\n errorEditFlag: false\n };\n\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100,\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"部门\",\n dataIndex: \"d\",\n key: \"d\",\n width: 215,\n render: (text, record, index) => (\n \n )\n },\n // 只是用来占位占宽度的\n {\n key: \"placeholder\"\n }\n ];\n\n this.state = {\n dataSource: dataSource,\n editingRowsMap: {},\n currentIndex: null,\n errorEditFlag: false\n };\n\n this.dataBuffer = {};\n }\n\n edit = index => () => {\n if (index === null) return;\n let editingRowsMap = { ...this.state.editingRowsMap };\n editingRowsMap[index] = index.toString();\n // 最好使用深复制\n this.dataBuffer[index] = { ...this.state.dataSource[index] };\n this.setState({ editingRowsMap });\n };\n\n abortEdit = index => () => {\n let editingRowsMap = { ...this.state.editingRowsMap };\n delete editingRowsMap[index];\n delete this.dataBuffer[index];\n this.setState({ editingRowsMap });\n };\n\n delete = index => () => {\n if (index === null) return;\n let { dataSource } = this.state;\n dataSource.splice(index,1);\n this.setState({\n dataSource:dataSource\n });\n }\n\n commitChange = index => () => {\n if (this.state.errorEditFlag) return;\n let editingRowsMap = { ...this.state.editingRowsMap };\n delete editingRowsMap[index];\n let dataSource = [...this.state.dataSource];\n dataSource[index] = { ...this.dataBuffer[index] };\n this.setState({ editingRowsMap, dataSource });\n };\n\n onCellChange = (index, key) => value => {\n this.dataBuffer[index][key] = value;\n };\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n handleRowHover = (index, record) => {\n this.currentRecord = record;\n this.setState({ currentIndex: index });\n };\n\n renderRowHover = () => {\n const { currentIndex } = this.state;\n return this.state.editingRowsMap[currentIndex] ? (\n \n \n \n
\n ) : (\n \n \n \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": " 可以对行进行编辑的表格", "scss_code": ".demo0501 .u-table {\n .u-row-hover {\n .opt-btns,.cancel-btns {\n button {\n margin: 0;\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n }\n\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}" }, { "example": _react2['default'].createElement(Demo0502, null), "title": " 单元格编辑", "code": "/**\n *\n * @title 单元格编辑\n * @parent 编辑 Editor\n * @description 可以对单元格进行编辑的表格,示例中给出输入框、下拉框、参照的编辑模式,以及两类校验。(通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格)\n * demo0502\n */\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport { Icon, Select, Tooltip, Form } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: this.props.value,\n editable: false\n };\n this.editWarp = React.createRef();\n }\n\n commitChange = () => {\n if (this.state.value === \"\") return;\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n edit = () => {\n this.setState({ editable: true });\n };\n\n handleKeydown = event => {\n if (event.keyCode == 13) {\n this.commitChange();\n }\n };\n\n handleChange = e => {\n if (e.target.value === \"\") this.editWarp.className += \" verify-cell\";\n this.setState({ value: e.target.value });\n };\n\n render() {\n const { value, editable } = this.state;\n return (\n \n {editable ? (\n
this.editWarp = el} className=\"editable-cell-input-wrapper\">\n \n {value === \"\" ? (\n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n
\n \n ) : null}\n
\n ) : (\n \n {value || \" \"}\n
\n )}\n \n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: this.props.value,\n editable: false\n };\n }\n\n handleSelect = value => {\n this.setState({ value });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n edit = () => {\n this.setState({ editable: true });\n };\n\n render() {\n const { value, editable } = this.state;\n return (\n \n {editable ? (\n
\n \n
\n ) : (\n
\n {value || \" \"}\n
\n )}\n
\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n value: this.props.value.d,\n editable: false\n };\n this.refWarp = React.createRef();\n }\n\n edit = () => {\n this.setState({ editable: true }, () => this.refWarp.focus());\n };\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n };\n\n commitChange = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n\n onRefBlur = e => {\n // 消除点击子组件,父组件先失焦再聚焦的事件触发过程带来的副作用\n const __REF_CONTENT__ = document.querySelector(\"div.ref-core-modal\");\n if (!__REF_CONTENT__ && e.target === this.refWarp) {\n this.commitChange();\n }\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, editable } = this.state;\n return editable ? (\n (this.refWarp = el)}\n className=\"editable-cell-input-wrapper\"\n tabIndex={-1}\n onBlur={this.onRefBlur}\n >\n \n \n {getFieldError(\"code1\")}\n \n
\n ) : (\n \n {value.name || \" \"}\n
\n );\n }\n }\n);\n\nconst dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0502 extends Component {\n constructor(props, context) {\n super(props);\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100,\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"部门\",\n dataIndex: \"d\",\n key: \"d\",\n width: 215,\n render: (text, record, index) => (\n \n )\n },\n {\n key: \"placeholder\"\n }\n ];\n\n this.state = {\n dataSource: dataSource\n };\n }\n\n onCellChange = (index, key) => {\n return value => {\n const { dataSource } = this.state;\n dataSource[index][key] = value;\n this.setState({ dataSource }, () => console.dir(this.state.dataSource));\n };\n };\n\n render() {\n return (\n \n
\n \n );\n }\n}\n\n\n", "desc": " 可以对单元格进行编辑的表格,示例中给出输入框、下拉框、参照的编辑模式,以及两类校验。(通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格)", "scss_code": ".u-editable-table .u-table {\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n padding-left: 5px;\n font-size: 12px;\n\n &.error {\n border-color: #F44336;\n }\n }\n }\n\n .editable-cell {\n height: 30px;\n }\n\n &-hover {\n .editable-cell-text-wrapper {\n line-height: 19px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .editable-cell-input-wrapper {\n padding-right: 0;\n .ref-input-wrap {\n width: auto !important;\n height: 30px;\n .u-input-group{\n display: inline-block;\n }\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .require {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}" }, { "example": _react2['default'].createElement(Demo0503, null), "title": " 弹框(表单)编辑", "code": "/**\n *\n * @title 弹框(表单)编辑\n * @parent 编辑 Editor\n * @description 以弹框形式以对行进行编辑的表格\n * demo0503\n */\n\nimport React, { Component, PureComponent } from \"react\";\nimport { Table } from 'tinper-bee';\nimport {\n Select, Form, FormControl, Button, Icon,\n Tooltip, Modal, FormGroup, Label, Row, Col\n} from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nfunction handleFormValueChange(WarpCompProps, field, allFields) {\n const { onChange, throwError } = WarpCompProps;\n if (field.value === \"\") return throwError && throwError(true);\n throwError && throwError(false);\n onChange && onChange(field.value);\n}\n\nconst StringEditCell = Form.createForm({\n onValuesChange: handleFormValueChange\n})(PureStringEditCell);\n\nfunction PureStringEditCell(props) {\n const { getFieldProps, getFieldError } = props.form;\n const { value, required } = props;\n let cls = \"editable-cell\";\n if (required) cls += \" required\";\n return (\n \n \n {\"请输入\" + props.colName}\n
\n }\n >\n \n \n )\n }\n ]\n })}\n />\n {getFieldError(\"value\")}\n \n );\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends PureComponent {\n constructor(props, context) {\n super(props);\n }\n\n handleSelect = value => {\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n return (\n \n \n
\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends PureComponent {\n constructor(props, context) {\n super(props);\n }\n\n handleSelect = values => {\n const { form, throwError, onChange } = this.props\n if (form.getFieldError(\"refValue\")) return throwError && throwError(true);\n throwError && throwError(false);\n onChange && onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { value, required } = this.props;\n let cls = \"editable-cell\";\n if (required) cls += \" required\";\n return (\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n ),\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n {getFieldError(\"refValue\")}\n \n );\n }\n }\n);\n\nclass EditModal extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n data: this.props.data,\n errorEditFlag: false\n };\n\n // 属性名对应 columns 属性中的 key 值\n this.renderElm = {\n b: (record, index) => (\n \n ),\n\n c: (record, index) => (\n \n ),\n d: (record, index) => (\n \n )\n }\n }\n\n onFieldChange = field => value => {\n let data = { ...this.state.data };\n data[field] = value;\n this.setState({ data });\n }\n\n submitChange = () => {\n if (this.state.errorEditFlag) return;\n const { onSubmit, onHide, currentIndex } = this.props;\n onSubmit && onSubmit(this.state.data, currentIndex);\n onHide && onHide();\n }\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n render() {\n const { show, onHide, columns, currentIndex } = this.props;\n const { data } = this.state;\n return (\n \n \n 编辑行\n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nlet dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0503 extends Component {\n constructor(props, context) {\n super(props);\n // 编辑态下每个单元格对应的编辑模式组件写在 EditModal 组件中,以 key 值对应\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\"\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: 215,\n render: (text, record, index) => record.d.name\n }\n ];\n\n this.state = {\n dataSource: dataSource,\n isEditing: false,\n currentIndex: null\n };\n }\n\n edit = () => {\n if (this.state.currentIndex === null) return;\n this.setState({ isEditing: true });\n };\n\n abortEdit = () => {\n this.setState({ isEditing: false });\n };\n\n commitChange = (editedRowData, rowIndex) => {\n console.log(editedRowData)\n console.log(rowIndex)\n let dataSource = [...this.state.dataSource];\n dataSource[rowIndex] = editedRowData;\n this.setState({ dataSource });\n };\n\n handleRowHover = (index, record) => {\n this.setState({ currentIndex: index });\n };\n\n hideEditModal = () => {\n this.setState({ isEditing: false });\n }\n\n renderRowHover = () => {\n return (\n \n \n
\n );\n };\n\n\n render() {\n const { dataSource, isEditing, currentIndex } = this.state;\n const columns = this.columns;\n return (\n \n
\n {\n isEditing ? (\n
\n ) : null\n }\n
\n );\n }\n}\n\n\n", "desc": " 以弹框形式以对行进行编辑的表格", "scss_code": ".demo0503-m-b {\n\n &.u-modal .u-modal-body {\n padding: 16px 0;\n background: #f7f9fb;\n }\n\n .u-form-group {\n overflow: hidden;\n }\n\n .u-form-control {\n font-size: 12px;\n }\n\n .editable-cell {\n display: block;\n float: left;\n width: 265px;\n padding-right: 25px;\n }\n\n .ref-input-wrap {\n width: 240px !important;\n }\n\n .u-label {\n display: block;\n float: left;\n text-align: right;\n width: 110px;\n box-sizing: border-box;\n padding-right: 10px;\n font-size: 12px;\n height: 32px;\n line-height: 32px;\n .mast {\n padding: 0;\n color: red;\n }\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n}\n\n.u-editable-table-tp {\n z-index: 9999 !important;\n\n .tp-content {\n color: #F44336;\n }\n}\n.ref-core-button .u-button:first-child{\n margin-right: 8px;\n}" }, { "example": _react2['default'].createElement(Demo0505, null), "title": " 全表格编辑", "code": "/**\n *\n * @title 全表格编辑\n * @parent 编辑 Editor\n * @description 以行内编辑形式对全表数据进行编辑\n * demo0505\n */\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\nimport { Select, Form, FormControl, Button, Icon, Tooltip } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleChange = value => {\n const { onChange, throwError } = this.props;\n if (value === \"\") {\n throwError && throwError(true);\n } else {\n throwError && throwError(false);\n }\n this.setState({ value });\n onChange && onChange(value);\n };\n\n render() {\n const { editable, required, colName, isEdited } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (value === \"\") cls += \" verify-cell\";\n if (isEdited) cls += \" edited\";\n return editable ? (\n \n
\n \n \n {value === \"\" ? (\n {\"请输入\" + colName}
}\n >\n
\n \n ) : null}\n \n
\n \n ) : (\n value || \" \"\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = value => {\n this.setState({ value });\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n const { editable, isEdited } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (isEdited) cls += \" edited\";\n return editable ? (\n \n
\n \n
\n
\n ) : (\n value || \" \"\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n this.props.onChange && this.props.onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { editable, required, isEdited } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n if (isEdited) cls += \" edited\";\n return editable ? (\n \n \n {\"请输入\" + this.props.colName}\n
\n }\n >\n \n \n ),\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n {getFieldError(\"refValue\")}\n \n ) : (\n value.name || \" \"\n );\n }\n }\n);\n\nlet dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n },\n key: \"3\"\n }\n];\n\nclass Demo0505 extends Component {\n constructor(props, context) {\n super(props);\n this.columns = [\n {\n title: \"员工编号\",\n dataIndex: \"a\",\n key: \"a\"\n },\n {\n title: \"名字\",\n dataIndex: \"b\",\n key: \"b\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"性别\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100,\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"部门\",\n dataIndex: \"d\",\n key: \"d\",\n width: 215,\n render: (text, record, index) => (\n \n )\n },\n // 只是用来占位占宽度的\n {\n key: \"placeholder\"\n }\n ];\n\n // 用于记录数据是否被修改\n dataSource.forEach(item => (item.isEdited = {}));\n this.state = {\n dataSource: dataSource,\n isEditingAll: false,\n currentIndex: null,\n errorEditFlag: false\n };\n\n // 用于记录编辑前数据\n this.dataBuffer = [];\n }\n\n edit = () => {\n this.dataBuffer = [];\n // 最好使用深复制\n this.state.dataSource.forEach((item, index) => {\n this.dataBuffer.push({ ...item });\n });\n this.setState({ isEditingAll: true });\n };\n\n abortEdit = () => {\n let originData = [...this.state.dataSource];\n originData.forEach(item => (item.isEdited = {}));\n this.setState({\n isEditingAll: false,\n dataSource: originData\n });\n };\n\n commitChange = () => {\n if (this.state.errorEditFlag) return;\n const newData = this.dataBuffer.map(item => {\n return Object.assign({}, item, { isEdited: {} });\n });\n this.setState({ isEditingAll: false, dataSource: newData });\n };\n\n onCellChange = (index, key) => value => {\n this.dataBuffer[index][key] = value;\n this.dataBuffer[index].isEdited[key] = true;\n };\n\n throwError = isError => {\n if (isError !== this.state.errorEditFlag)\n this.setState({ errorEditFlag: isError });\n };\n\n render() {\n const { dataSource, isEditingAll } = this.state;\n const columns = this.columns;\n return (\n \n
\n {isEditingAll ? (\n \n \n \n \n ) : (\n \n )}\n
\n
\n
\n );\n }\n}\n\n\n", "desc": " 以行内编辑形式对全表数据进行编辑", "scss_code": ".demo0505 {\n\n .toolbar-btns {\n margin-bottom: 8px;\n\n .u-button {\n &:first-child {\n margin-right: 8px;\n }\n }\n }\n\n .u-table {\n .u-row-select {\n background-color: #FFF7E7;\n }\n .u-table-row {\n td {\n padding: 5px 8px;\n\n input {\n font-size: 12px;\n padding-left: 5px;\n }\n }\n\n .u-form-control,\n .u-select-selection {\n height: 30px;\n }\n }\n\n .editable-cell-text-wrapper {\n box-sizing: border-box;\n line-height: 20px;\n border-radius: 3px;\n }\n\n .required {\n margin-left: 10px;\n position: relative;\n\n &::before {\n content: \" \";\n border: 1px solid #F44336;\n width: 0;\n height: 12px;\n position: absolute;\n top: 9px;\n left: -8px;\n }\n\n span.u-input-group {\n display: block\n }\n }\n\n .verify-cell {\n padding-right: 25px !important;\n }\n\n .edited::after {\n content: \" \";\n position: absolute;\n z-index: 999;\n top: 0;\n left: 0;\n border-width: 5px;\n border-style: solid;\n border-color: #f44336 transparent transparent #f44336;\n }\n\n .required-icon {\n position: absolute;\n top: 2px;\n color: #F44336;\n font-size: 20px;\n }\n\n .ref-input-wrap {\n width: 160px !important;\n }\n }\n}\n\n.u-editable-table-tp {\n .tp-content {\n color: #F44336;\n }\n}" }, { "example": _react2['default'].createElement(Demo0601, null), "title": " 左侧固定列", "code": "/**\n*\n* @title 左侧固定列\n* @parent 列操作-锁定 Fixed\n* @description 固定列到表格的左侧\n* demo0601\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\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: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\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\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\n];\n\nclass Demo51 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 固定列到表格的左侧" }, { "example": _react2['default'].createElement(Demo0602, null), "title": " 右侧固定列", "code": "/**\n*\n* @title 右侧固定列\n* @parent 列操作-锁定 Fixed\n* @description 固定列到表格的右侧\n* demo0602\n*/\n\n\n\nimport React, { Component } from 'react';\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n render(text, record, index){return index + 1}\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: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\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\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\n];\n\nclass Demo52 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 固定列到表格的右侧" }, { "example": _react2['default'].createElement(Demo0603, null), "title": " 动态设置列锁定、解除锁定", "code": "/**\n*\n* @title 动态设置列锁定、解除锁定\n* @parent 列操作-锁定 Fixed\n* @description 动态设置columns中数据的fixed属性值【fixed: \"left\",fixed: \"right\"】。\n* demo0603\n*/\nimport React, { Component } from 'react';\nimport {Icon,Menu,Dropdown} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst { Item } = Menu;\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 150\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: 100\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\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\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\n];\n \nclass Demo24 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n columns:columns\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}\n\n", "desc": " 动态设置columns中数据的fixed属性值【fixed: \"left\",fixed: \"right\"】。", "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(Demo0701, null), "title": " 按条件、值过滤", "code": "/**\n*\n* @title 按条件、值过滤\n* @parent 列操作-过滤 Filter\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。\n* demo0701\n*/\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\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(Demo0702, null), "title": " 复杂表格中行过滤", "code": "/**\n*\n* @title 复杂表格中行过滤\n* @parent 列操作-过滤 Filter\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n* demo0702\n*/\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox} 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 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 onSelect = (item) => {\n console.log(item);\n }\n\n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n let columns27 = [\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(Demo0802, null), "title": " 列过滤面板", "code": "/**\n*\n* @title 列过滤面板\n* @parent 列操作-隐藏 Hide\n* @description 点击表头右侧按钮,设置显示或隐藏表格列。可以自定义设置显示某列,通过ifshow属性控制,默认值为true(显示表格所有列)。afterFilter方法为列过滤后触发的回调函数。\n* demo0802\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon,Popover} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n }\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 columns: [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80, \n fixed: 'left',\n render(text, record, index){return index + 1}\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n fixed: 'left',\n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 150\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 }\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 return ;\n }\n}\n\nDemo21.defaultProps = defaultProps21;\n", "desc": " 点击表头右侧按钮,设置显示或隐藏表格列。可以自定义设置显示某列,通过ifshow属性控制,默认值为true(显示表格所有列)。afterFilter方法为列过滤后触发的回调函数。" }, { "example": _react2['default'].createElement(Demo0901, null), "title": " 列排序", "code": "/**\n* @title 列排序\n* @parent 列操作-排序 Sort\n* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称\n* demo0901\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: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 150,\n sorter: (a, b) => a.total - b.total\n }\n];\n\nconst data11 = [\n { num: \"NU0391001\", date: \"2019-03-01\", supplier: 'xx供应商',contact:'Tom', total:30 ,key: \"1\" },\n { num: \"NU0391002\", date: \"2018-11-02\", supplier: 'yy供应商',contact:'Jack', total:41 ,key: \"2\" },\n { num: \"NU0391003\", date: \"2019-05-03\", supplier: 'zz供应商',contact:'Jane', total:25 ,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(Demo0902, null), "title": " 后端列排序", "code": "/**\n* @title 后端列排序\n* @parent 列操作-排序 Sort\n* @description 可在控制台中查看序列化后的参数字符串,将参数传递给后端即可进行列排序\n* demo0902\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\n// const 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\n// const 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// ];\nconst columns11 = [\n {\n title: \"单据编号\",\n dataIndex: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 150,\n sorter: (a, b) => a.total - b.total\n },\n {\n title: \"金额\",\n dataIndex: \"money\",\n key: \"money\",\n width: 100,\n sorter: (a, b) => a.money - b.money\n }\n];\n\nconst data11 = [\n { num: \"NU0391001\", date: \"2019-03-01\", supplier: 'xx供应商',contact:'Tom', total:30 ,money: 100,key: \"1\" },\n { num: \"NU0391002\", date: \"2018-11-02\", supplier: 'yy供应商',contact:'Jack', total:41 ,money: 50,key: \"2\" },\n { num: \"NU0391003\", date: \"2019-05-03\", supplier: 'zz供应商',contact:'Jane', total:25 ,money: 200,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(Demo0903, null), "title": " 多列排序", "code": "/**\n *\n * @title 多列排序\n * @parent 列操作-排序 Sort\n * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。\n * demo0903\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: \"NU0391001\", b: 675, c: 30, d: \"xx供应商\",e:100, key: \"2\" },\n { a: \"NU0391002\", b: 43, c: 41, d: \"yy供应商\",e:90, key: \"1\" },\n { a: \"NU0391003\", b: 43, c: 81, d: \"zz供应商\", e:120,key: \"4\" },\n { a: \"NU0391004\", b: 43, c: 81, d: \"aa供应商\", e:130,key: \"5\" },\n { a: \"NU0391005\", b: 153, c: 25, d: \"bb供应商\",e:90, key: \"3\" }\n];\n\n\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\nlet ComplexTable = multiSelect(sort(sum(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(Demo1001, null), "title": " 拖拽改变列顺序", "code": "/**\n*\n* @title 拖拽改变列顺序\n* @parent 列操作-拖拽 Drag\n* @description 点击选择表头并左右拖拽,可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意:固定列不可以交换。\n* demo1001\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 columns = [\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 data = [\n { a: \"NU0391001\", b: \"2019-03-01\", c: 'xx供应商',d:'Tom', key: \"2\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: 'yy供应商',d:'Jack', key: \"1\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: 'zz供应商',d:'Jane', 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 console.log(\"--拖拽交换列后触发事件\");\n console.log(\"event.target:\",event.target);\n console.log(\"data:\",data);\n console.log(\"拖拽完成后的columns:\",columns);\n }}\n />;\n }\n}\n\nDemo22.defaultProps = defaultProps22;\n", "desc": " 点击选择表头并左右拖拽,可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意:固定列不可以交换。" }, { "example": _react2['default'].createElement(Demo1002, null), "title": " 拖拽改变列宽度", "code": "/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description onDropBorder方法为调整列宽后触发的回调函数。注:不支持tree结构的表头、合并表头的table。\n* demo1002\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 }, \n {\n title: \"联系人\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"NU0391001\", b: \"2019-03-01\", c: \"xx供应商\",d:'Tom', key: \"2\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: \"yy供应商\",d:'Jack', key: \"1\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: \"zz供应商\",d:'Jane', 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": " onDropBorder方法为调整列宽后触发的回调函数。注:不支持tree结构的表头、合并表头的table。" }, { "example": _react2['default'].createElement(Demo1101, null), "title": " 嵌套子表格", "code": "/**\n*\n* @title 嵌套子表格\n* @parent 扩展行 Expanded Row\n* @description 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。\n* demo1101\n*/\n\nimport React, { Component } from \"react\";\nimport { Popconfirm,Icon } from 'tinper-bee';\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 \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 \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: \"NU0391001\", b: \"2019-03-01\", c: \"xx供应商\", d: \"操作\", key: \"1\" },\n { a: \"NU0391002\", b: \"2018-11-02\", c: \"yy供应商\", d: \"操作\", key: \"2\" },\n { a: \"NU0391003\", b: \"2019-05-03\", c: \"zz供应商\", 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: \"NU0391056\", b: \"2019-03-01\", c: \"gys1\", d: \"操作\", key: \"1\" },\n { a: \"NU0391057\", b: \"2018-11-02\", c: \"gys2\", d: \"操作\", key: \"2\" },\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"NU0391079\", b: \"2019-04-17\", c: \"gys5\", d: \"操作\", key: \"3\" },\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 expandedIcon={}\n />\n );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。" }, { "example": _react2['default'].createElement(Demo1102, null), "title": " 树型表格数据展示", "code": "/**\n*\n* @title 树型表格数据展示\n* @parent 扩展行 Expanded Row\n* @description 通过在data中配置children数据,来自动生成树形表格\n* demo1102\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns4 = [\n {\n title: \"订单编号\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"供应商\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"NU0391001\",\n age: \"2019-03-01\",\n address: \"供应商1\",\n children: [\n {\n key: 11,\n name: \"NU0391002\",\n age: \"2019-03-02\",\n address: \"供应商2\"\n },\n {\n key: 12,\n name: \"NU0391003\",\n age: \"2019-03-03\",\n address: \"供应商3\",\n children: [\n {\n key: 121,\n name: \"NU0391004\",\n age: \"2019-03-04\",\n address: \"供应商4\"\n }\n ]\n },\n {\n key: 13,\n name: \"NU0391005\",\n age: \"2019-03-05\",\n address: \"供应商5\",\n children: [\n {\n key: 131,\n name: \"NU0391006\",\n age: \"2019-03-06\",\n address: \"供应商6\",\n children: [\n {\n key: 1311,\n name: \"NU0391007\",\n age: \"2019-03-07\",\n address: \"供应商7\"\n },\n {\n key: 1312,\n name: \"NU0391008\",\n age: \"2019-03-08\",\n address: \"供应商8\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"NU0391009\",\n age: \"2019-03-09\",\n address: \"供应商9\"\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(Demo1103, null), "title": " 自定义表格标题、表尾、选中行颜色", "code": "/**\r\n*\r\n* @title 自定义表格标题、表尾、选中行颜色\r\n* @parent 扩展行 Expanded Row\r\n* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。\r\n* demo1103\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport {Button,Tooltip,} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150, className: \"rowClassName\"},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo26 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n {\r\n if (this.state.selectedRowIndex == index) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n onRowClick={(record,index,indent)=>{\r\n this.setState({ \r\n selectedRowIndex: index\r\n });\r\n }}\r\n title={currentData => 员工信息统计表
}\r\n footer={currentData => 合计: 共{data.length}条数据
}\r\n /> \r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": " 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。" }, { "example": _react2['default'].createElement(Demo1105, null), "title": " 紧凑型、宽松型", "code": "/**\n*\n* @title 紧凑型、宽松型\n* @parent 扩展行 Expanded Row\n* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。\n* demo1105\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip,Tag} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"订单编号\", dataIndex: \"orderNum\", key: \"orderNum\", width: 100 },\n { title: \"采购组织\", dataIndex: \"org\", key: \"org\", width: 200 },\n { title: \"供应商\", dataIndex: \"supplier\", key: \"supplier\", width: 100 },\n { title: \"订单日期\", dataIndex: \"orderDate\", key: \"orderDate\", width: 150 },\n { title: \"总数量\", dataIndex: \"quantity\", key: \"quantity\", width: 100 },\n { title: \"单据状态\", dataIndex: \"status\", key: \"status\", width: 100, \n render: (text, record, index) => {\n return (\n {text.desc}\n );\n }},\n { title: \"提交人\", dataIndex: \"submitter\", key: \"submitter\", width: 100 },\n { title: \"单位\", dataIndex: \"unit\", key: \"unit\", width: 100 },\n { title: \"总税价合计\", dataIndex: \"sum\", key: \"sum\", width: 100 },\n];\n\nconst data = [\n { \n orderNum: \"NU0391025\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年03月18日', \n quantity: '100.00', \n status: {type:'success' ,desc:'正常'}, \n submitter: '小张', \n unit: 'pc', \n sum:'8,487.00', \n key: \"1\" \n },\n { \n orderNum: \"NU0391026\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年02月05日', \n quantity: '91.00', \n status: {type:'danger' ,desc:'异常'}, \n submitter: '小红', \n unit: 'pc', \n sum:'675.00', \n key: \"2\" \n },\n { \n orderNum: \"NU0391027\", \n org: \"用友网络科技股份有限公司\", \n supplier: \"xx供应商\", \n orderDate: '2018年07月01日', \n quantity: '98.00', \n status: {type:'success' ,desc:'正常'}, \n submitter: '小李', \n unit: 'pc', \n sum:'1,531.00', \n key: \"3\" \n }\n];\n\nclass Demo1 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。" }, { "example": _react2['default'].createElement(Demo1106, null), "title": " 自定义行高", "code": "/**\n*\n* @title 自定义行高\n* @parent 扩展行 Expanded Row\n* @description 设置`height`属性自定义表体行高,设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。\n* demo1106\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150, className: \"rowClassName\"},\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", 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 handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=()=>{\n return
\n }\n\n render() {\n return (\n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n", "desc": " 设置`height`属性自定义表体行高,设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。" }, { "example": _react2['default'].createElement(Demo1107, null), "title": " 图片在表格中的展示", "code": "/**\n*\n* @title 图片在表格中的展示\n* @parent 扩展行 Expanded Row\n* @description 根据图片高度自动撑开行高,可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注:如果图片在固定列中,可以使用heightConsistent属性,当此属性为true,就不会出现错行问题\n* demo1107\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 80,\n render(text, record, index) {\n return index + 1;\n }\n },\n {\n title: \"图样\",\n dataIndex: \"picture\",\n key: \"picture\",\n render(text, record, index) {\n return \n }\n },\n {\n title: \"组织部门\",\n dataIndex: \"orgDept\",\n key: \"orgDept\",\n width: 100,\n },\n {\n title: \"设施管理部门\",\n dataIndex: \"facilityManageUnit\",\n key: \"facilityManageUnit\",\n width: 150,\n },\n {\n title: \"案卷编号\",\n dataIndex: \"docketnum\",\n key: \"docketnum\",\n width: 100,\n },\n {\n title: \"数量\",\n dataIndex: \"num\",\n key: \"num\",\n width: 100,\n },\n {\n title: \"首次发现时间\",\n dataIndex: \"discoveryTime\",\n key: \"discoveryTime\",\n width: 150,\n },\n {\n title: \"实际修复时间\",\n dataIndex: \"repairTime\",\n key: \"repairTime\",\n width: 150,\n }\n];\n\nconst data = [\n { key: \"1\", orgDept: \"组织1\", facilityManageUnit: \"部门1\", docketnum: 41, num: \"1\", discoveryTime: \"2018-10-17\", repairTime: \"2018-10-30\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg\"},\n { key: \"2\", orgDept: \"组织2\", facilityManageUnit: \"部门2\", docketnum: 30, num: \"2\", discoveryTime: \"2019-01-15\", repairTime: \"2019-01-20\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg\"},\n { key: \"3\", orgDept: \"组织3\", facilityManageUnit: \"部门3\", docketnum: 35, num: \"3\", discoveryTime: \"2019-04-10\", repairTime: \"2019-04-17\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg\"}\n];\n\nclass Demo1107 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 根据图片高度自动撑开行高,可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注:如果图片在固定列中,可以使用heightConsistent属性,当此属性为true,就不会出现错行问题" }, { "example": _react2['default'].createElement(Demo1108, null), "title": " 自定义行、列合并", "code": "/**\n*\n* @title 自定义行、列合并\n* @parent 扩展行 Expanded Row\n* @description 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。\n* demo1108\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: '姓名',\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: '年龄',\n key: \"age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: '联系方式',\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: '手机号',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: '家庭住址',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\n\n\nconst columns1 = [{\n title: '姓名',\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: '年龄',\n key: \"age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: '联系方式',\n colSpan: 2,\n key: \"tel\",\n dataIndex: 'tel',\n render: renderContent\n}, {\n title: '手机号',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: '家庭住址',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\nconst data = [{\n key: '1',\n name: '小红',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: '北京海淀',\n}, {\n key: '2',\n name: '小明',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: '河北张家口',\n}, {\n key: '3',\n name: '张三',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '浙江杭州',\n}, {\n key: '4',\n name: '李四',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '广州深圳',\n}, {\n key: '5',\n name: '王五',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: '北京昌平',\n}];\n\nclass Demo15 extends Component {\n constructor(props){\n super(props);\n this.state={\n colFlag:false\n }\n }\n onChange=()=>{\n const colFlag = this.state.colFlag;\n this.setState({\n colFlag:!colFlag\n })\n }\n render() {\n let cols = this.state.colFlag?columns:columns1;\n return (\n \n \n );\n }\n}\n\n\n\n", "desc": " 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。" }, { "example": _react2['default'].createElement(Demo1201, null), "title": " 拖拽改变行顺序", "code": "/**\n*\n* @title 拖拽改变行顺序\n* @parent 行操作-拖拽\n* @description `rowDraggAble`参数设置是否使用行交换顺序功能,`onDropRow` 是拖拽行后的回调函数。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* Demo1201\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:200 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1001\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"1002\" },\n { a: \"ASVAL_201903120001\", b: \"小红\", c: \"女\", d: \"财务四科\", e: \"T3\", key: \"1003\" },\n { a: \"ASVAL_201903120002\", b: \"小姚\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"1004\" },\n { a: \"ASVAL_201903120003\", b: \"小岳\", c: \"男\", d: \"财务五科\", e: \"T2\", key: \"1005\" },\n { a: \"ASVAL_201903120004\", b: \"小王\", c: \"男\", d: \"财务一科\", e: \"T5\", key: \"1006\" },\n { a: \"ASVAL_201903120005\", b: \"小绍\", c: \"男\", d: \"财务七科\", e: \"T2\", key: \"1007\" },\n { a: \"ASVAL_201903120006\", b: \"小郭\", c: \"男\", d: \"财务一科\", e: \"T3\", key: \"1008\" },\n { a: \"ASVAL_201903120007\", b: \"小杨\", c: \"女\", d: \"财务四科\", e: \"T2\", key: \"1009\" }\n];\n\nclass Demo1201 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n /**\n * 行拖拽结束时触发\n * @param data 拖拽改变顺序后的新data数组\n * @param record 拖拽行的数据\n */\n onDropRow = (data, record) => {\n console.log('重排序后的data: ', data);\n console.log('拖拽的行数据: ', record);\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " `rowDraggAble`参数设置是否使用行交换顺序功能,`onDropRow` 是拖拽行后的回调函数。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。" }, { "example": _react2['default'].createElement(Demo1301, null), "title": " 多选功能", "code": "/**\r\n*\r\n* @title 多选功能\r\n* @parent 行操作-选择\r\n* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数,返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中,添加_disabled参数可禁止选择当前数据。\r\n* demo1301\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport {Checkbox} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\",_checked:true },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\",_checked:false },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\",_checked:false },\r\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\",_disabled:true },\r\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\",_checked:false}\r\n];\r\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\r\nlet MultiSelectTable = multiSelect(Table, Checkbox);\r\n\r\nclass Demo12 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data\r\n };\r\n }\r\n /**\r\n *@param selectedList:当前选中的行数据\r\n *@param record 当前操作行数据\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (selectedList,record,index) => {\r\n console.log(\"selectedList\", selectedList,\"index\",index);\r\n // 如果在回调中增加setState逻辑,需要同步data中的_checked属性。即下面的代码\r\n // const allChecked = selectedList.length == 0?false:true;\r\n // record为undefind则为全选或者全不选\r\n // if(!record){\r\n // data12.forEach(item=>{\r\n // item._checked = allChecked;\r\n // })\r\n // }else{\r\n // data12[index]['_checked'] = record._checked;\r\n // } \r\n\r\n \r\n };\r\n \r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n return (\r\n {\r\n if (record._checked) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n );\r\n }\r\n}\r\n\r\n", "desc": " 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数,返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中,添加_disabled参数可禁止选择当前数据。" }, { "example": _react2['default'].createElement(Demo1302, null), "title": " 单选功能", "code": "/**\r\n*\r\n* @title 单选功能\r\n* @parent 行操作-选择\r\n* @description 表格支持单选行操作,可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。\r\n* Demo1302\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Radio } from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport singleSelect from \"tinper-bee/lib/singleSelect.js\";;\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300 },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n ];\r\n \r\n const data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" },\r\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\r\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" }\r\n ];\r\n\r\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\r\nlet SingleSelectTable = singleSelect(Table, Radio);\r\n\r\nclass Demo1302 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0,\r\n }\r\n }\r\n\r\n /**\r\n *@param selected 当前选中的行数据(当前操作行数据)\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (record,index) => {\r\n console.log(\"record\", record, \"index\",index);\r\n\r\n this.setState({\r\n selectedRowIndex:index\r\n })\r\n };\r\n\r\n render() {\r\n let {selectedRowIndex} = this.state;\r\n\r\n return (\r\n {\r\n if (index === selectedRowIndex) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}\r\n /> \r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": " 表格支持单选行操作,可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。" }, { "example": _react2['default'].createElement(Demo1401, null), "title": " 万行以上数据渲染", "code": "/**\n*\n* @title 万行以上数据渲染\n* @parent 无限滚动 Infinite-scroll\n* @description 万行数据渲染\n* demo1401\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:'60',\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(Demo1402, null), "title": " 嵌套子表格滚动加载", "code": "/**\n*\n* @title 嵌套子表格滚动加载\n* @parent 无限滚动 Infinite-scroll\n* @description 通过expandedRowRender参数来实现子表格。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。\n* demo1402\n*/\n\nimport React, { Component } from \"react\";\nimport {Popconfirm} from 'tinper-bee';\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 \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 \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 = [ ...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 );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。" }, { "example": _react2['default'].createElement(Demo1403, null), "title": " 多功能表格滚动加载", "code": "/**\n*\n* @title 多功能表格滚动加载\n* @parent 无限滚动 Infinite-scroll\n* @description\n* demo1403\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:'80',\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(Demo1404, null), "title": " 层级树大数据场景", "code": "/**\n* @title 层级树大数据场景\n* @parent 无限滚动 Infinite-scroll\n* @description\n* demo1404\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 = (expandedRowKeys)=>{\n console.log('expandedRowKeys',expandedRowKeys);\n }\n onExpand = (expandKeys)=>{\n console.log('expand---'+expandKeys);\n }\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n onExpandedRowsChange={this.onExpandedRowsChange}\n />\n\n \n );\n }\n}\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo1601, null), "title": " 表格+分页", "code": "/**\n * @title 表格+分页\n * @parent 分页 Pagination\n * @description 点击分页联动表格\n * demo1601\n */\n\nimport React, { Component } from \"react\";\nimport {Pagination} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\n];\n\nconst pageData = {\n 1: [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\n ],\n 2: [\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" },\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}" }];
var Demo = function (_Component) {
_inherits(Demo, _Component);
@@ -673,7 +673,7 @@
var _Panel3 = _interopRequireDefault(_Panel2);
- var _PanelGroup2 = __webpack_require__(81);
+ var _PanelGroup2 = __webpack_require__(83);
var _PanelGroup3 = _interopRequireDefault(_PanelGroup2);
@@ -712,7 +712,7 @@
var _propTypes2 = _interopRequireDefault(_propTypes);
- var _copyToClipboard = __webpack_require__(79);
+ var _copyToClipboard = __webpack_require__(81);
var _copyToClipboard2 = _interopRequireDefault(_copyToClipboard);
@@ -6147,11 +6147,11 @@
var defaultDuration = 1.5;
var newDuration = void 0;
- var defaultTop = 0;
+ var defaultTop = 24;
var defaultBottom = 48;
var bottom = 90;
var padding = 30;
- var width = 200;
+ var width = 240;
var messageInstance = void 0;
var key = 1;
var clsPrefix = 'u-message';
@@ -6160,21 +6160,21 @@
var positionObj = {
"top": {
messageStyle: {
- width: "100%"
+ transform: 'translateX( -50%)'
},
notificationStyle: {
top: defaultTop,
- width: "100%"
+ left: '50%'
},
transitionName: 'top'
},
"bottom": {
messageStyle: {
- width: "100%"
+ transform: 'translateX( -50%)'
},
notificationStyle: {
bottom: defaultBottom,
- width: "100%"
+ left: '50%'
},
transitionName: 'bottom'
},
@@ -6258,7 +6258,7 @@
clsPrefix: clsPrefix,
transitionName: clsPrefix + '-' + positionObj[position].transitionName,
style: style, // 覆盖原来的样式
- position: ''
+ position: position
};
if (typeof keyboard === 'boolean') {
instanceObj.keyboard = keyboard;
@@ -6276,14 +6276,14 @@
var iconType = {
info: 'uf uf-i-c-2',
success: 'uf uf-correct',
- danger: 'uf uf-close-c',
+ danger: 'uf uf-exc-c',
warning: 'uf uf-exc-t',
light: 'uf uf-notification',
- dark: 'uf uf-bubble',
+ dark: 'uf uf-notification',
news: 'uf uf-bell',
infolight: 'uf uf-i-c-2',
successlight: 'uf uf-correct',
- dangerlight: 'uf uf-close-c',
+ dangerlight: 'uf uf-exc-c',
warninglight: 'uf uf-exc-t'
}[type];
@@ -6329,11 +6329,11 @@
}
var content = obj.content || '';
var duration = typeof obj.duration == 'undefined' ? defaultDuration : obj.duration;
- var color = obj.color || 'dark';
+ var color = obj.color || 'light';
var onClose = obj.onClose || noop;
var position = obj.position || "top";
var style = obj.style || {};
- var showIcon = obj.showIcon || false;
+ var showIcon = obj.showIcon || true;
return notice(content, duration, color, onClose, position, style, obj.keyboard, obj.onEscapeKeyUp, showIcon);
},
config: function config(options) {
@@ -6544,8 +6544,8 @@
});
};
- /**
- * 处理绑定在document上的keyup事件
+ /**
+ * 处理绑定在document上的keyup事件
*/
@@ -7451,6 +7451,10 @@
var _propTypes2 = _interopRequireDefault(_propTypes);
+ var _beeIcon = __webpack_require__(79);
+
+ var _beeIcon2 = _interopRequireDefault(_beeIcon);
+
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; }
@@ -7556,7 +7560,11 @@
closable ? _react2["default"].createElement(
'a',
{ tabIndex: '0', onClick: this.close, className: componentClass + '-close' },
- _react2["default"].createElement('span', { className: componentClass + '-close-x' })
+ _react2["default"].createElement(
+ 'span',
+ { className: componentClass + '-close-x' },
+ _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-close' })
+ )
) : null
);
};
@@ -7574,11 +7582,109 @@
/***/ }),
/* 79 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _Icon = __webpack_require__(80);
+
+ var _Icon2 = _interopRequireDefault(_Icon);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+ exports["default"] = _Icon2["default"];
+ module.exports = exports['default'];
+
+/***/ }),
+/* 80 */
+/***/ (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'];
+
+/***/ }),
+/* 81 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
- var deselectCurrent = __webpack_require__(80);
+ var deselectCurrent = __webpack_require__(82);
var defaultMessage = "Copy to clipboard: #{key}, Enter";
@@ -7673,7 +7779,7 @@
/***/ }),
-/* 80 */
+/* 82 */
/***/ (function(module, exports) {
@@ -7718,7 +7824,7 @@
/***/ }),
-/* 81 */
+/* 83 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
@@ -7865,7 +7971,7 @@
module.exports = exports['default'];
/***/ }),
-/* 82 */
+/* 84 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
@@ -7874,7 +7980,7 @@
value: true
});
- var _Drawer = __webpack_require__(83);
+ var _Drawer = __webpack_require__(85);
var _Drawer2 = _interopRequireDefault(_Drawer);
@@ -7884,7 +7990,7 @@
module.exports = exports['default'];
/***/ }),
-/* 83 */
+/* 85 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
@@ -7909,9 +8015,9 @@
var _classnames2 = _interopRequireDefault(_classnames);
- var _common = __webpack_require__(84);
+ var _common = __webpack_require__(86);
- var _reactTransitionGroup = __webpack_require__(85);
+ var _reactTransitionGroup = __webpack_require__(87);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -8187,7 +8293,7 @@
module.exports = exports['default'];
/***/ }),
-/* 84 */
+/* 86 */
/***/ (function(module, exports) {
'use strict';
@@ -8214,30 +8320,34 @@
}
/***/ }),
-/* 85 */
+/* 87 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
- var _CSSTransition = _interopRequireDefault(__webpack_require__(86));
+ exports.__esModule = true;
+ exports.Transition = exports.TransitionGroup = exports.ReplaceTransition = exports.CSSTransition = void 0;
- var _ReplaceTransition = _interopRequireDefault(__webpack_require__(93));
+ var _CSSTransition = _interopRequireDefault(__webpack_require__(88));
- var _TransitionGroup = _interopRequireDefault(__webpack_require__(94));
+ exports.CSSTransition = _CSSTransition.default;
- var _Transition = _interopRequireDefault(__webpack_require__(90));
+ var _ReplaceTransition = _interopRequireDefault(__webpack_require__(95));
+
+ exports.ReplaceTransition = _ReplaceTransition.default;
+
+ var _TransitionGroup = _interopRequireDefault(__webpack_require__(96));
+
+ exports.TransitionGroup = _TransitionGroup.default;
+
+ var _Transition = _interopRequireDefault(__webpack_require__(92));
+
+ exports.Transition = _Transition.default;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
- module.exports = {
- Transition: _Transition.default,
- TransitionGroup: _TransitionGroup.default,
- ReplaceTransition: _ReplaceTransition.default,
- CSSTransition: _CSSTransition.default
- };
/***/ }),
-/* 86 */
+/* 88 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {"use strict";
@@ -8247,15 +8357,15 @@
var PropTypes = _interopRequireWildcard(__webpack_require__(6));
- var _addClass = _interopRequireDefault(__webpack_require__(87));
+ var _addClass = _interopRequireDefault(__webpack_require__(89));
- var _removeClass = _interopRequireDefault(__webpack_require__(89));
+ var _removeClass = _interopRequireDefault(__webpack_require__(91));
var _react = _interopRequireDefault(__webpack_require__(1));
- var _Transition = _interopRequireDefault(__webpack_require__(90));
+ var _Transition = _interopRequireDefault(__webpack_require__(92));
- var _PropTypes = __webpack_require__(92);
+ var _PropTypes = __webpack_require__(94);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -8289,24 +8399,6 @@
* transition, matching `*-done` class names are applied to persist the
* transition state.
*
- * ```jsx
- * function App() {
- * const [inProp, setInProp] = useState(false);
- * return (
- *
- *
- *
- * {"I'll receive my-node-* classes"}
- *
- *
- *
- *
- * );
- * }
- * ```
- *
* 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
@@ -8316,25 +8408,6 @@
* `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_.
- *
- * ```css
- * .my-node-enter {
- * opacity: 0;
- * }
- * .my-node-enter-active {
- * opacity: 1;
- * transition: opacity 200ms;
- * }
- * .my-node-exit {
- * opacity: 1;
- * }
- * .my-node-exit-active {
- * opacity: 0;
- * transition: opacity: 200ms;
- * }
- * ```
- *
- * `*-active` classes represent which styles you want to animate **to**.
*/
@@ -8377,11 +8450,8 @@
};
_this.onEntered = function (node, appearing) {
- var appearClassName = _this.getClassNames('appear').doneClassName;
-
- var enterClassName = _this.getClassNames('enter').doneClassName;
-
- var doneClassName = appearing ? appearClassName + " " + enterClassName : enterClassName;
+ var _this$getClassNames3 = _this.getClassNames('enter'),
+ doneClassName = _this$getClassNames3.doneClassName;
_this.removeClasses(node, appearing ? 'appear' : 'enter');
@@ -8393,8 +8463,8 @@
};
_this.onExit = function (node) {
- var _this$getClassNames3 = _this.getClassNames('exit'),
- className = _this$getClassNames3.className;
+ var _this$getClassNames4 = _this.getClassNames('exit'),
+ className = _this$getClassNames4.className;
_this.removeClasses(node, 'appear');
@@ -8408,8 +8478,8 @@
};
_this.onExiting = function (node) {
- var _this$getClassNames4 = _this.getClassNames('exit'),
- activeClassName = _this$getClassNames4.activeClassName;
+ var _this$getClassNames5 = _this.getClassNames('exit'),
+ activeClassName = _this$getClassNames5.activeClassName;
_this.reflowAndAddClass(node, activeClassName);
@@ -8419,8 +8489,8 @@
};
_this.onExited = function (node) {
- var _this$getClassNames5 = _this.getClassNames('exit'),
- doneClassName = _this$getClassNames5.doneClassName;
+ var _this$getClassNames6 = _this.getClassNames('exit'),
+ doneClassName = _this$getClassNames6.doneClassName;
_this.removeClasses(node, 'exit');
@@ -8433,11 +8503,9 @@
_this.getClassNames = function (type) {
var classNames = _this.props.classNames;
- var isStringClassNames = typeof classNames === 'string';
- var prefix = isStringClassNames && classNames ? classNames + '-' : '';
- var className = isStringClassNames ? prefix + type : classNames[type];
- var activeClassName = isStringClassNames ? className + '-active' : classNames[type + 'Active'];
- var doneClassName = isStringClassNames ? className + '-done' : classNames[type + 'Done'];
+ 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,
@@ -8451,10 +8519,10 @@
var _proto = CSSTransition.prototype;
_proto.removeClasses = function removeClasses(node, type) {
- var _this$getClassNames6 = this.getClassNames(type),
- className = _this$getClassNames6.className,
- activeClassName = _this$getClassNames6.activeClassName,
- doneClassName = _this$getClassNames6.doneClassName;
+ 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);
@@ -8490,34 +8558,19 @@
return CSSTransition;
}(_react.default.Component);
- CSSTransition.defaultProps = {
- classNames: ''
- };
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`, `fade-appear-active`, and `fade-appear-done`.
- *
- * **Note**: `fade-appear-done` and `fade-enter-done` will _both_ be applied.
- * This allows you to define different behavior for when appearing is done and
- * when regular entering is done, using selectors like
- * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply an
- * epic entrance animation when element first appears in the DOM using
- * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can
- * simply use `fade-enter-done` for defining both cases.
+ * 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',
- * appearDone: 'my-done-appear',
* enter: 'my-enter',
* enterActive: 'my-active-enter',
* enterDone: 'my-done-enter',
@@ -8533,8 +8586,8 @@
* 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:
+ * 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 }}
@@ -8543,7 +8596,6 @@
* @type {string | {
* appear?: string,
* appearActive?: string,
- * appearDone?: string,
* enter?: string,
* enterActive?: string,
* enterDone?: string,
@@ -8607,7 +8659,7 @@
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
/***/ }),
-/* 87 */
+/* 89 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -8617,7 +8669,7 @@
exports.__esModule = true;
exports.default = addClass;
- var _hasClass = _interopRequireDefault(__webpack_require__(88));
+ var _hasClass = _interopRequireDefault(__webpack_require__(90));
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);
@@ -8626,7 +8678,7 @@
module.exports = exports["default"];
/***/ }),
-/* 88 */
+/* 90 */
/***/ (function(module, exports) {
"use strict";
@@ -8641,7 +8693,7 @@
module.exports = exports["default"];
/***/ }),
-/* 89 */
+/* 91 */
/***/ (function(module, exports) {
'use strict';
@@ -8655,7 +8707,7 @@
};
/***/ }),
-/* 90 */
+/* 92 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {"use strict";
@@ -8669,9 +8721,9 @@
var _reactDom = _interopRequireDefault(__webpack_require__(2));
- var _reactLifecyclesCompat = __webpack_require__(91);
+ var _reactLifecyclesCompat = __webpack_require__(93);
- var _PropTypes = __webpack_require__(92);
+ var _PropTypes = __webpack_require__(94);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -8751,23 +8803,25 @@
* 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 (we'll use the
- * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
+ * the following example:
*
* ```jsx
- * function App() {
- * const [inProp, setInProp] = useState(false);
+ * state = { in: false };
+ *
+ * toggleEnterState = () => {
+ * this.setState({ in: true });
+ * }
+ *
+ * render() {
* return (
- *
- *
+ * <>
+ *
* {state => (
* // ...
* )}
*
- *
- *
+ *
+ * >
* );
* }
* ```
@@ -9171,7 +9225,7 @@
* @type {number | { enter?: number, exit?: number, appear?: number }}
*/
timeout: function timeout(props) {
- var pt = _PropTypes.timeoutsShape;
+ 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++) {
@@ -9270,7 +9324,7 @@
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
/***/ }),
-/* 91 */
+/* 93 */
/***/ (function(module, exports) {
'use strict';
@@ -9438,7 +9492,7 @@
/***/ }),
-/* 92 */
+/* 94 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {"use strict";
@@ -9472,7 +9526,7 @@
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
/***/ }),
-/* 93 */
+/* 95 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {"use strict";
@@ -9486,7 +9540,7 @@
var _reactDom = __webpack_require__(2);
- var _TransitionGroup = _interopRequireDefault(__webpack_require__(94));
+ var _TransitionGroup = _interopRequireDefault(__webpack_require__(96));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -9628,7 +9682,7 @@
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
/***/ }),
-/* 94 */
+/* 96 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {"use strict";
@@ -9640,9 +9694,9 @@
var _react = _interopRequireDefault(__webpack_require__(1));
- var _reactLifecyclesCompat = __webpack_require__(91);
+ var _reactLifecyclesCompat = __webpack_require__(93);
- var _ChildMapping = __webpack_require__(95);
+ var _ChildMapping = __webpack_require__(97);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -9842,7 +9896,7 @@
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
/***/ }),
-/* 95 */
+/* 97 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -9997,7 +10051,7 @@
}
/***/ }),
-/* 96 */
+/* 98 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
@@ -10006,7 +10060,7 @@
value: true
});
- var _Clipboard = __webpack_require__(97);
+ var _Clipboard = __webpack_require__(99);
var _Clipboard2 = _interopRequireDefault(_Clipboard);
@@ -10016,7 +10070,7 @@
module.exports = exports['default'];
/***/ }),
-/* 97 */
+/* 99 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
@@ -10029,7 +10083,7 @@
var _react2 = _interopRequireDefault(_react);
- var _clipboard = __webpack_require__(98);
+ var _clipboard = __webpack_require__(100);
var _clipboard2 = _interopRequireDefault(_clipboard);
@@ -10037,7 +10091,7 @@
var _classnames2 = _interopRequireDefault(_classnames);
- var _beeIcon = __webpack_require__(106);
+ var _beeIcon = __webpack_require__(79);
var _beeIcon2 = _interopRequireDefault(_beeIcon);
@@ -10063,11 +10117,11 @@
var _beeModal2 = _interopRequireDefault(_beeModal);
- var _beeFormControl = __webpack_require__(262);
+ var _beeFormControl = __webpack_require__(153);
var _beeFormControl2 = _interopRequireDefault(_beeFormControl);
- var _beeButton = __webpack_require__(260);
+ var _beeButton = __webpack_require__(155);
var _beeButton2 = _interopRequireDefault(_beeButton);
@@ -10239,12 +10293,12 @@
module.exports = exports['default'];
/***/ }),
-/* 98 */
+/* 100 */
/***/ (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__));
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [module, __webpack_require__(101), __webpack_require__(103), __webpack_require__(104)], __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 {
@@ -10451,12 +10505,12 @@
});
/***/ }),
-/* 99 */
+/* 101 */
/***/ (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__));
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [module, __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('select'));
} else {
@@ -10685,7 +10739,7 @@
});
/***/ }),
-/* 100 */
+/* 102 */
/***/ (function(module, exports) {
function select(element) {
@@ -10734,7 +10788,7 @@
/***/ }),
-/* 101 */
+/* 103 */
/***/ (function(module, exports) {
function E () {
@@ -10807,11 +10861,11 @@
/***/ }),
-/* 102 */
+/* 104 */
/***/ (function(module, exports, __webpack_require__) {
- var is = __webpack_require__(103);
- var delegate = __webpack_require__(104);
+ var is = __webpack_require__(105);
+ var delegate = __webpack_require__(106);
/**
* Validates all params and calls the right
@@ -10908,7 +10962,7 @@
/***/ }),
-/* 103 */
+/* 105 */
/***/ (function(module, exports) {
/**
@@ -10963,10 +11017,10 @@
/***/ }),
-/* 104 */
+/* 106 */
/***/ (function(module, exports, __webpack_require__) {
- var closest = __webpack_require__(105);
+ var closest = __webpack_require__(107);
/**
* Delegates event to a selector.
@@ -11047,7 +11101,7 @@
/***/ }),
-/* 105 */
+/* 107 */
/***/ (function(module, exports) {
var DOCUMENT_NODE_TYPE = 9;
@@ -11085,104 +11139,6 @@
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__) {
@@ -11245,33 +11201,33 @@
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
+ /**
+ * @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的距离
+ /**
+ * 与目标Top的距离
*/
arrowOffsetTop: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
- /**
- * 与目标Left的距离
+ /**
+ * 与目标Left的距离
*/
arrowOffsetLeft: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string])
};
@@ -11353,13 +11309,13 @@
}
};
- /**
- * @desc 鼠标划入时候的事件
+ /**
+ * @desc 鼠标划入时候的事件
*/
- /**
- * @desc 鼠标划出时候的事件
+ /**
+ * @desc 鼠标划出时候的事件
*/
@@ -11898,16 +11854,16 @@
var createPortal = isReact16 ? _reactDom2["default"].createPortal : _reactDom2["default"].unstable_renderSubtreeIntoContainer;
var propTypes = {
- /**
- * 存放子组件的容器
+ /**
+ * 存放子组件的容器
*/
container: _propTypes2["default"].oneOfType([_tinperBeeCore.componentOrElement, _propTypes2["default"].func])
};
var defaultProps = {};
- /**
- * Portal组件是将子组件渲染
+ /**
+ * Portal组件是将子组件渲染
*/
var Portal = function (_Component) {
@@ -11985,8 +11941,8 @@
return null;
};
- /**
- * 如果要添加的子组件不存在,就将div添加到要添加容器的DOM中;
+ /**
+ * 如果要添加的子组件不存在,就将div添加到要添加容器的DOM中;
*/
Portal.prototype.mountOverlayTarget = function mountOverlayTarget() {
@@ -11996,8 +11952,8 @@
this.portalContainerNode.appendChild(this.overlayTarget);
}
};
- /**
- * 将要添加的子元素从容器中移除,并把变量置为null
+ /**
+ * 将要添加的子元素从容器中移除,并把变量置为null
*/
@@ -12008,8 +11964,8 @@
}
this.portalContainerNode = null;
};
- /**
- * 手动渲染_overlayTarget
+ /**
+ * 手动渲染_overlayTarget
*/
@@ -12027,8 +11983,8 @@
this.unmountOverlayTarget();
}
};
- /**
- * 销毁_overlayTarget组件。并把_overlayInstance置为null
+ /**
+ * 销毁_overlayTarget组件。并把_overlayInstance置为null
*/
@@ -12077,11 +12033,11 @@
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
- /**
- * 获取容器组件
- * @param {[type]} container [description]
- * @param {[type]} defaultContainer [description]
- * @return {[type]} [description]
+ /**
+ * 获取容器组件
+ * @param {[type]} container [description]
+ * @param {[type]} defaultContainer [description]
+ * @return {[type]} [description]
*/
function getContainer(container, defaultContainer) {
container = typeof container === 'function' ? container() : container;
@@ -12188,7 +12144,7 @@
/**
* Sets the direction of the Overlay.
*/
- placement: _propTypes2["default"].oneOf(["top", "right", "bottom", "left", "topLeft", "rightTop", "bottomLeft", "leftTop", "topRight", "rightBottom", "bottomRight", "leftBottom"]),
+ placement: _propTypes2["default"].oneOf(['top', 'right', 'bottom', 'left']),
/**
* 当Overlay在placement方向放不下时的第二优先级方向
@@ -12589,7 +12545,7 @@
/**
* 位置设置
*/
- placement: _propTypes2["default"].oneOf(["top", "right", "bottom", "left", "topLeft", "rightTop", "bottomLeft", "leftTop", "topRight", "rightBottom", "bottomRight", "leftBottom"]),
+ placement: _propTypes2["default"].oneOf(['top', 'right', 'bottom', 'left']),
/**
* 第二优先级位置设置
@@ -12599,15 +12555,7 @@
/**
* 是否需要更新位置
*/
- shouldUpdatePosition: _propTypes2["default"].bool,
- /**
- * 弹出框向上偏移量
- */
- positionTop: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
- /**
- * 弹出框向左偏移量
- */
- positionLeft: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string])
+ shouldUpdatePosition: _propTypes2["default"].bool
};
var defaultProps = {
@@ -12718,9 +12666,7 @@
Position.prototype.updatePosition = function updatePosition(target) {
var _props = this.props,
placement = _props.placement,
- secondPlacement = _props.secondPlacement,
- positionLeft = _props.positionLeft,
- positionTop = _props.positionTop;
+ secondPlacement = _props.secondPlacement;
if (!this._isMounted) {
@@ -12742,9 +12688,9 @@
var overlay = _reactDom2["default"].findDOMNode(this);
var container = (0, _getContainer2["default"])(this.props.container, (0, _ownerDocument2["default"])(this).body);
- var initPosition = (0, _calculatePosition2["default"])(placement, overlay, target, container, this.props.containerPadding);
// 若设置了第二渲染位置,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);
@@ -12762,21 +12708,6 @@
renderPlacement: placement
}));
}
- } else if ("positionLeft" in this.props && positionLeft) {
- if ("positionTop" in this.props && positionTop) {
- this.setState(_extends({}, initPosition, {
- positionLeft: positionLeft,
- positionTop: positionTop
- }));
- } else {
- this.setState(_extends({}, initPosition, {
- positionLeft: positionLeft
- }));
- }
- } else if ("positionTop" in this.props && positionTop) {
- this.setState(_extends({}, initPosition, {
- positionTop: positionTop
- }));
} else {
this.setState((0, _calculatePosition2["default"])(placement, overlay, target, container, this.props.containerPadding));
}
@@ -13362,12 +13293,12 @@
var propTypes = {
onRootClose: _propTypes2["default"].func,
children: _propTypes2["default"].element,
- /**
- * 是否禁用
+ /**
+ * 是否禁用
*/
disabled: _propTypes2["default"].bool,
- /**
- * 触发事件选择
+ /**
+ * 触发事件选择
*/
event: _propTypes2["default"].oneOf(['click', 'mousedown'])
};
@@ -13516,51 +13447,51 @@
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
+ /**
+ * 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
+ /**
+ * 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
+ /**
+ * 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
+ /**
+ * 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
+ /**
+ * Callback fired before the component fades in
*/
onEnter: _propTypes2["default"].func,
- /**
- * Callback fired after the component starts to fade in
+ /**
+ * Callback fired after the component starts to fade in
*/
onEntering: _propTypes2["default"].func,
- /**
- * Callback fired after the has component faded in
+ /**
+ * Callback fired after the has component faded in
*/
onEntered: _propTypes2["default"].func,
- /**
- * Callback fired before the component fades out
+ /**
+ * Callback fired before the component fades out
*/
onExit: _propTypes2["default"].func,
- /**
- * Callback fired after the component starts to fade out
+ /**
+ * Callback fired after the component starts to fade out
*/
onExiting: _propTypes2["default"].func,
- /**
- * Callback fired after the component has faded out
+ /**
+ * Callback fired after the component has faded out
*/
onExited: _propTypes2["default"].func
};
@@ -13657,65 +13588,65 @@
var EXITING = exports.EXITING = 4;
var propTypes = {
- /**
- * 是否触发动画
+ /**
+ * 是否触发动画
*/
"in": _propTypes2["default"].bool,
- /**
- * 不显示的时候是否移除组件
+ /**
+ * 不显示的时候是否移除组件
*/
unmountOnExit: _propTypes2["default"].bool,
- /**
- * 如果设置为默认显示,挂载时显示动画
+ /**
+ * 如果设置为默认显示,挂载时显示动画
*/
transitionAppear: _propTypes2["default"].bool,
- /**
- * 设置超时时间,防止出现问题,可设置为>=动画时间
+ /**
+ * 设置超时时间,防止出现问题,可设置为>=动画时间
*/
timeout: _propTypes2["default"].number,
- /**
- * 退出组件时添加的class
+ /**
+ * 退出组件时添加的class
*/
exitedClassName: _propTypes2["default"].string,
- /**
- * 退出组件中添加的class
+ /**
+ * 退出组件中添加的class
*/
exitingClassName: _propTypes2["default"].string,
- /**
- * 进入动画后添加的class
+ /**
+ * 进入动画后添加的class
*/
enteredClassName: _propTypes2["default"].string,
- /**
- * 进入动画时添加的class
+ /**
+ * 进入动画时添加的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
};
@@ -13735,8 +13666,8 @@
onExited: noop
};
- /**
- * 动画组件
+ /**
+ * 动画组件
*/
var Transition = function (_Component) {
@@ -13956,14 +13887,14 @@
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}
+ /**
+ * 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++) {
@@ -14078,81 +14009,15 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
- value: true
+ 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 _Modal = __webpack_require__(135);
var _Modal2 = _interopRequireDefault(_Modal);
- var _confirm = __webpack_require__(259);
-
- var _confirm2 = _interopRequireDefault(_confirm);
-
- var _beeIcon = __webpack_require__(106);
-
- var _beeIcon2 = _interopRequireDefault(_beeIcon);
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
- _Modal2["default"].info = function (props) {
- var config = _extends({
- type: 'info',
- icon: _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-i-c-2' }),
- okCancel: false
- }, props);
- return (0, _confirm2["default"])(config);
- };
-
- _Modal2["default"].success = function (props) {
- var config = _extends({
- type: 'success',
- icon: _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-correct' }),
- okCancel: false
- }, props);
- return (0, _confirm2["default"])(config);
- };
-
- _Modal2["default"].error = function (props) {
- var config = _extends({
- type: 'error',
- icon: _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-close-bold' }),
- okCancel: false
- }, props);
- return (0, _confirm2["default"])(config);
- };
-
- _Modal2["default"].warning = function (props) {
- var config = _extends({
- type: 'warning',
- icon: _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-exc-t' }),
- okCancel: false
- }, props);
- return (0, _confirm2["default"])(config);
- };
-
- _Modal2["default"].confirm = function (props) {
- var config = _extends({
- type: 'confirm',
- okCancel: true
- }, props);
- return (0, _confirm2["default"])(config);
- };
-
- _Modal2["default"].destroyAll = function () {
- while (_Modal.destroyFns.length) {
- var close = _Modal.destroyFns.pop();
- if (close) {
- close();
- }
- }
- };
exports["default"] = _Modal2["default"];
module.exports = exports['default'];
@@ -14165,12 +14030,9 @@
Object.defineProperty(exports, "__esModule", {
value: true
});
- exports.destroyFns = undefined;
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 _extends2;
-
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);
@@ -14221,15 +14083,15 @@
var _ModalDialog2 = _interopRequireDefault(_ModalDialog);
- var _ModalFooter = __webpack_require__(256);
+ var _ModalFooter = __webpack_require__(150);
var _ModalFooter2 = _interopRequireDefault(_ModalFooter);
- var _ModalHeader = __webpack_require__(257);
+ var _ModalHeader = __webpack_require__(151);
var _ModalHeader2 = _interopRequireDefault(_ModalHeader);
- var _ModalTitle = __webpack_require__(258);
+ var _ModalTitle = __webpack_require__(152);
var _ModalTitle2 = _interopRequireDefault(_ModalTitle);
@@ -14241,6 +14103,8 @@
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"); } }
@@ -14249,9 +14113,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); }
- 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; }
-
- var propTypes = _extends({}, _Modal2["default"].propTypes, _ModalDialog2["default"].propTypes, (_extends2 = {
+ var propTypes = _extends({}, _Modal2["default"].propTypes, _ModalDialog2["default"].propTypes, {
/**
* 是否弹出遮罩层/遮罩层点击是否触发关闭
@@ -14309,41 +14171,28 @@
onExited: _propTypes2["default"].func,
- containerClassName: _propTypes2["default"].string
- }, _defineProperty(_extends2, 'containerClassName', _propTypes2["default"].string), _defineProperty(_extends2, 'container', _Modal2["default"].propTypes.container), _defineProperty(_extends2, 'size', _propTypes2["default"].oneOf(["sm", "lg", "xlg", ""])), _defineProperty(_extends2, 'width', _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string])), _defineProperty(_extends2, 'draggable', _propTypes2["default"].bool), _defineProperty(_extends2, 'resizable', _propTypes2["default"].bool), _defineProperty(_extends2, 'onResizeStart', _propTypes2["default"].func), _defineProperty(_extends2, 'onResize', _propTypes2["default"].func), _defineProperty(_extends2, 'onResizeStop', _propTypes2["default"].func), _defineProperty(_extends2, 'minWidth', _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string])), _defineProperty(_extends2, 'minHeight', _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string])), _defineProperty(_extends2, 'maxWidth', _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string])), _defineProperty(_extends2, 'maxHeight', _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string])), _extends2));
+ /**
+ * 要添加到的元素
+ */
+ 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"],
- draggable: false,
- resizable: false,
clsPrefix: 'u-modal'
});
- var ModalFuncProps = {
- prefixCls: _propTypes2["default"].string,
- className: _propTypes2["default"].string,
- show: _propTypes2["default"].bool,
- title: _react2["default"].ReactNode,
- content: _react2["default"].ReactNode,
- onOk: _propTypes2["default"].func,
- onCancel: _propTypes2["default"].func,
- width: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
- okText: _propTypes2["default"].string,
- okType: _propTypes2["default"].string,
- cancelText: _propTypes2["default"].string,
- icon: _react2["default"].ReactNode,
- backdrop: _propTypes2["default"].oneOf(['static', true, false])
- };
-
- var ModalFunc = function ModalFunc(props) {
- destroy = function destroy() {};
- update = function update(newConfig) {};
- };
-
- var destroyFns = exports.destroyFns = [];
-
var childContextTypes = {
$u_modal: _propTypes2["default"].shape({
onHide: _propTypes2["default"].func
@@ -14443,10 +14292,7 @@
children = _props.children,
onEntering = _props.onEntering,
onExited = _props.onExited,
- backdropClassName = _props.backdropClassName,
- containerClassName = _props.containerClassName,
- draggable = _props.draggable,
- props = _objectWithoutProperties(_props, ['backdrop', 'backdropClosable', 'animation', 'show', 'dialogComponentClass', 'className', 'clsPrefix', 'style', 'size', 'width', 'children', 'onEntering', 'onExited', 'backdropClassName', 'containerClassName', 'draggable']);
+ 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),
@@ -14474,7 +14320,7 @@
onExited: (0, _tinperBeeCore.createChainedFunction)(onExited, this.handleExited),
backdrop: backdrop,
backdropClassName: (0, _classnames2["default"])(backdropClasses, inClassName),
- containerClassName: (0, _classnames2["default"])(containerClasses, containerClassName),
+ containerClassName: (0, _classnames2["default"])(containerClasses),
transition: animation ? _beeTransition.Fade : undefined,
dialogTransitionTimeout: Modal.TRANSITION_DURATION,
backdropTransitionTimeout: Modal.BACKDROP_TRANSITION_DURATION
@@ -14483,10 +14329,9 @@
Dialog,
_extends({}, dialogProps, {
style: styleRes,
- className: (0, _classnames2["default"])(className, inClassName, backdropClassName),
+ className: (0, _classnames2["default"])(className, inClassName),
onClick: backdrop === true && !!backdropClosable ? this.handleDialogClick : null,
- size: size,
- draggable: draggable
+ size: size
}),
children
)
@@ -14496,17 +14341,6 @@
return Modal;
}(_react2["default"].Component);
- Modal.info = ModalFunc;
- Modal.success = ModalFunc;
- Modal.error = ModalFunc;
- Modal.warn = ModalFunc;
- Modal.warning = ModalFunc;
- Modal.confirm = ModalFunc;
-
- Modal.destroyAll = function () {
- return;
- };
-
Modal.propTypes = propTypes;
Modal.defaultProps = defaultProps;
Modal.childContextTypes = childContextTypes;
@@ -14522,6 +14356,7 @@
Modal.BACKDROP_TRANSITION_DURATION = 10000;
exports["default"] = Modal;
+ module.exports = exports['default'];
/***/ }),
/* 136 */
@@ -14763,129 +14598,129 @@
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时触发的模态框关闭时的钩子函数
+ /**
+ * 当show参数为false时触发的模态框关闭时的钩子函数
*/
onHide: _propTypes2["default"].func,
- /**
- * 是否包含背景
+ /**
+ * 是否包含背景
*/
backdrop: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].oneOf(['static'])]),
- /**
- *返回背景组件的函数
+ /**
+ *返回背景组件的函数
*/
renderBackdrop: _propTypes2["default"].func,
- /**
- * 设置esc键特殊钩子函数
+ /**
+ * 设置esc键特殊钩子函数
*/
onEscapeKeyUp: _propTypes2["default"].func,
- /**
- * 当点击背景时触发的函数
+ /**
+ * 当点击背景时触发的函数
*/
onBackdropClick: _propTypes2["default"].func,
- /**
- * 背景的style
+ /**
+ * 背景的style
*/
backdropStyle: _propTypes2["default"].object,
- /**
- * 背景的class
+ /**
+ * 背景的class
*/
backdropClassName: _propTypes2["default"].string,
- /**
- *容器的class
+ /**
+ *容器的class
*/
containerClassName: _propTypes2["default"].string,
- /**
- * 按esc键是否关闭模态框
+ /**
+ * 按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状态的实例
+ /**
+ *管理model状态的实例
*/
manager: _propTypes2["default"].object.isRequired
});
@@ -15307,8 +15142,8 @@
return container.style[key] = style[key];
});
}
- /**
- * 容器的正确状态管理和那些容器中的模态。
+ /**
+ * 容器的正确状态管理和那些容器中的模态。
*/
var ModalManager = function () {
@@ -15424,15 +15259,15 @@
exports.__esModule = true;
exports.default = void 0;
- var _addClass = _interopRequireDefault(__webpack_require__(87));
+ var _addClass = _interopRequireDefault(__webpack_require__(89));
exports.addClass = _addClass.default;
- var _removeClass = _interopRequireDefault(__webpack_require__(89));
+ var _removeClass = _interopRequireDefault(__webpack_require__(91));
exports.removeClass = _removeClass.default;
- var _hasClass = _interopRequireDefault(__webpack_require__(88));
+ var _hasClass = _interopRequireDefault(__webpack_require__(90));
exports.hasClass = _hasClass.default;
var _default = {
@@ -15552,11 +15387,11 @@
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
+ /**
+ * 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;
@@ -15701,22 +15536,10 @@
var _react2 = _interopRequireDefault(_react);
- var _reactDom = __webpack_require__(2);
-
- var _reactDom2 = _interopRequireDefault(_reactDom);
-
var _propTypes = __webpack_require__(6);
var _propTypes2 = _interopRequireDefault(_propTypes);
- var _beeDnd = __webpack_require__(150);
-
- var _beeDnd2 = _interopRequireDefault(_beeDnd);
-
- var _reResizable = __webpack_require__(255);
-
- var _reResizable2 = _interopRequireDefault(_reResizable);
-
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; }
@@ -15741,8 +15564,6 @@
};
var defaultProps = {
- minHeight: 150,
- minWidth: 200,
clsPrefix: 'u-modal'
};
@@ -15750,156 +15571,13 @@
_inherits(ModalDialog, _React$Component);
function ModalDialog() {
- var _temp, _this, _ret;
-
_classCallCheck(this, ModalDialog);
- for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
-
- return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
- original: {
- x: 0,
- y: 0
- },
- maxWidth: Number.MAX_SAFE_INTEGER,
- maxHeight: Number.MAX_SAFE_INTEGER
- }, _this.onStart = function () {
- var draggable = _this.props.draggable;
-
- return draggable;
- }, _this.onStop = function (e, delta) {
- _this.setState({
- original: {
- x: delta.x,
- y: delta.y
- }
- });
- }, _this.onResizeStart = function (e, dir, elementRef) {
- var onResizeStart = _this.props.onResizeStart;
-
- typeof onResizeStart === "function" && onResizeStart(e, dir, elementRef);
- }, _this.onResize = function (e, direction, elementRef, delta) {
- var onResize = _this.props.onResize;
- var original = _this.state.original;
- /* resize 之前的值 */
-
- var originX = original.x;
- var originY = original.y;
-
- /* 移动的位移 */
- var moveW = delta.width;
- var moveH = delta.height;
-
- /* 移动的位移 */
- var x = null,
- y = null;
-
- /* 处理上边缘 */
- if (/left/i.test(direction)) {
- x = originX - moveW;
- y = originY;
- _this.position = { x: x, y: y
-
- /* 处理左边缘 */
- };
- } else if (/top/i.test(direction)) {
- x = originX;
- y = originY - moveH;
- _this.position = { x: x, y: y };
- } else {
- _this.position = null;
- }
-
- if (x || y) {
- elementRef.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
- }
- if (delta.height) {
- _this.updateBodyH();
- }
-
- typeof onResize === "function" && onResize(e, direction, elementRef, delta);
- }, _this.onResizeStop = function (e, direction, elementRef, delta) {
- var onResizeStop = _this.props.onResizeStop;
-
-
- if (_this.position) {
- _this.setState({
- original: _this.position
- });
- }
-
- typeof onResizeStop === "function" && onResizeStop(e, direction, elementRef, delta);
- }, _this.updateBodyH = function () {
- var $resizable = _reactDom2["default"].findDOMNode(_this.resizable);
- var $header = $resizable.querySelector(".u-modal-header");
- var $body = $resizable.querySelector(".u-modal-body");
- var $footer = $resizable.querySelector(".u-modal-footer");
-
- var totalH = $resizable.style.height;
- totalH = Number(totalH.replace("px", ""));
- if ($header) {
- totalH -= $header.offsetHeight;
- }
- if ($footer) {
- totalH -= $footer.offsetHeight;
- }
-
- $body.style.height = totalH + 'px';
- }, _this.getMaxSizesFromProps = function () {
- var backDropW = _this.backdrop && _this.backdrop.offsetWidth ? _this.backdrop.offsetWidth : Number.MAX_SAFE_INTEGER;
- var backDropH = _this.backdrop && _this.backdrop.offsetHeight ? _this.backdrop.offsetHeight : Number.MAX_SAFE_INTEGER;
-
- var maxWidth = typeof _this.props.maxWidth === "undefined" ? backDropW : _this.props.maxWidth;
- var maxHeight = typeof _this.props.maxHeight === "undefined" ? backDropH : _this.props.maxHeight;
- return { maxWidth: maxWidth, maxHeight: maxHeight };
- }, _this.handleWH = function (value) {
- var size = value;
- if (typeof value === "string" && value.endsWith("px")) {
- size = Number(value.replace("px", ""));
- } else if (typeof Number(value) === "number" && !Number.isNaN(Number(value))) {
- size = Number(value);
- }
- return size;
- }, _temp), _possibleConstructorReturn(_this, _ret);
+ return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}
- ModalDialog.prototype.componentDidUpdate = function componentDidUpdate() {
- var _getMaxSizesFromProps = this.getMaxSizesFromProps(),
- maxWidth = _getMaxSizesFromProps.maxWidth,
- maxHeight = _getMaxSizesFromProps.maxHeight;
-
- if (maxWidth != this.state.maxWidth) {
- this.setState({
- maxWidth: maxWidth,
- maxHeight: maxHeight
- });
- }
- };
-
- /* 开始resize */
-
-
- /* resizing */
-
-
- /* resize 结束 */
-
-
- /**
- * 更新Modal.Body的高度
- */
-
-
- /**
- * 获取最大宽度和高度
- */
-
-
ModalDialog.prototype.render = function render() {
- var _dialogClasses,
- _this2 = this;
+ var _dialogClasses;
var _props = this.props,
dialogClassName = _props.dialogClassName,
@@ -15909,16 +15587,9 @@
style = _props.style,
contentStyle = _props.contentStyle,
children = _props.children,
- draggable = _props.draggable,
- resizable = _props.resizable,
- minHeight = _props.minHeight,
- minWidth = _props.minWidth,
- props = _objectWithoutProperties(_props, ['dialogClassName', 'className', 'clsPrefix', 'size', 'style', 'contentStyle', 'children', 'draggable', 'resizable', 'minHeight', 'minWidth']);
-
- var _state = this.state,
- original = _state.original,
- maxWidth = _state.maxWidth,
- maxHeight = _state.maxHeight;
+ props = _objectWithoutProperties(_props, ['dialogClassName', 'className', 'clsPrefix', 'size', 'style', 'contentStyle', 'children']);
+ // const [bsProps, elementProps] = splitBsProps(props);
+ //
var uClassName = _defineProperty({}, '' + clsPrefix, true);
@@ -15929,9 +15600,6 @@
if (size) {
dialogClasses[clsPrefix + '-' + size] = true;
}
- if (draggable) {
- dialogClasses[clsPrefix + '-draggable'] = true;
- }
return _react2["default"].createElement(
'div',
@@ -15939,54 +15607,15 @@
tabIndex: '-1',
role: 'dialog',
style: modalStyle,
- ref: function ref(_ref3) {
- return _this2.backdrop = _ref3;
- },
className: (0, _classnames2["default"])(className, uClassName)
}),
_react2["default"].createElement(
'div',
{ className: (0, _classnames2["default"])(dialogClassName, dialogClasses), style: style },
_react2["default"].createElement(
- _beeDnd2["default"],
- {
- handle: '.dnd-handle',
- cancel: '.dnd-cancel',
- onStart: this.onStart,
- onStop: this.onStop,
- position: original,
- list: []
- },
- resizable ? _react2["default"].createElement(
- _reResizable2["default"],
- {
- ref: function ref(c) {
- if (c) {
- _this2.resizable = c;
- }
- },
- onResizeStart: this.onResizeStart,
- onResize: this.onResize,
- onResizeStop: this.onResizeStop,
- minWidth: this.handleWH(minWidth),
- minHeight: this.handleWH(minHeight),
- maxWidth: this.handleWH(maxWidth),
- maxHeight: this.handleWH(maxHeight)
- },
- _react2["default"].createElement(
- 'div',
- { style: _extends({}, contentStyle, { height: "100%" }), className: (0, _classnames2["default"])([clsPrefix + '-content']), role: 'document', ref: function ref(_ref) {
- return _this2.resize = _ref;
- } },
- children
- )
- ) : _react2["default"].createElement(
- 'div',
- { style: contentStyle, className: (0, _classnames2["default"])([clsPrefix + '-content']), role: 'document', ref: function ref(_ref2) {
- return _this2.resize = _ref2;
- } },
- children
- )
+ 'div',
+ { style: contentStyle, className: (0, _classnames2["default"])([clsPrefix + '-content']), role: 'document' },
+ children
)
)
);
@@ -16011,16854 +15640,6 @@
value: true
});
- var _Dnd = __webpack_require__(151);
-
- var _Dnd2 = _interopRequireDefault(_Dnd);
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
- exports["default"] = _Dnd2["default"];
- 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 _react = __webpack_require__(1);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _reactBeautifulDnd = __webpack_require__(152);
-
- var _reactDraggable = __webpack_require__(250);
-
- var _reactDraggable2 = _interopRequireDefault(_reactDraggable);
-
- var _propTypes = __webpack_require__(6);
-
- var _propTypes2 = _interopRequireDefault(_propTypes);
-
- var _lodash = __webpack_require__(251);
-
- var _lodash2 = _interopRequireDefault(_lodash);
-
- var _SortList = __webpack_require__(252);
-
- var _SortList2 = _interopRequireDefault(_SortList);
-
- var _Between = __webpack_require__(254);
-
- var _Between2 = _interopRequireDefault(_Between);
-
- 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 = {
- onStart: _propTypes2["default"].func,
- onDrag: _propTypes2["default"].func,
- onStop: _propTypes2["default"].func,
- onDragUpdate: _propTypes2["default"].func,
- dropClass: _propTypes2["default"].string,
- dropOverClass: _propTypes2["default"].string,
- dragClass: _propTypes2["default"].string,
- dragingClass: _propTypes2["default"].string,
- draggedClass: _propTypes2["default"].string,
- className: _propTypes2["default"].string,
- style: _propTypes2["default"].object,
- list: _propTypes2["default"].array,
- otherList: _propTypes2["default"].array,
- type: _propTypes2["default"].oneOf(['vertical', 'horizontal', 'betweenVertical', 'betweenHorizontal']),
- showKey: _propTypes2["default"].string
-
- };
- var defaultProps = {
- onStart: function onStart() {},
- onDrag: function onDrag() {},
- onStop: function onStop() {},
- onDragUpdate: function onDragUpdate() {},
- list: false,
- otherList: [],
- dropClass: '',
- dropOverClass: '',
- dragClass: '',
- dragingClass: '',
- draggedClass: '',
- type: 'vertical'
- };
-
- var Dnd = function (_Component) {
- _inherits(Dnd, _Component);
-
- function Dnd(props) {
- _classCallCheck(this, Dnd);
-
- var _this = _possibleConstructorReturn(this, _Component.call(this, props));
-
- _this.state = {
- items: _this.props.list || []
- };
- return _this;
- }
-
- Dnd.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
- if (!(0, _lodash2["default"])(this.state.items, nextProps.list)) {
- this.setState({
- items: nextProps.list
- });
- }
- };
-
- Dnd.prototype.render = function render() {
- var _this2 = this;
-
- var self = this;
- var DndType = function DndType() {
- switch (_this2.props.type) {
- case 'vertical':
- return _react2["default"].createElement(_SortList2["default"], _this2.props);
- break;
- case 'horizontal':
- return _react2["default"].createElement(_SortList2["default"], _this2.props);
- break;
- case 'betweenVertical':
- return _react2["default"].createElement(_Between2["default"], _this2.props);
- break;
- case 'betweenHorizontal':
- return _react2["default"].createElement(_Between2["default"], _this2.props);
- break;
- default:
- return _react2["default"].createElement(_SortList2["default"], _this2.props);
- break;
- }
- };
- return _react2["default"].createElement(
- 'div',
- null,
- self.state.items.length ? DndType() : _react2["default"].createElement(
- _reactDraggable2["default"],
- _extends({ defaultClassName: this.props.dragClass,
- defaultClassNameDragging: this.props.dragingClass,
- defaultClassNameDragged: this.props.draggedClass
- }, this.props),
- self.props.children
- )
- );
- };
-
- return Dnd;
- }(_react.Component);
-
- Dnd.propTypes = propTypes;
- Dnd.defaultProps = defaultProps;
- Dnd.Drag = _reactDraggable2["default"];
- Dnd.DragDropContext = _reactBeautifulDnd.DragDropContext;
- Dnd.Droppable = _reactBeautifulDnd.Droppable;
- Dnd.Draggable = _reactBeautifulDnd.Draggable;
- exports["default"] = Dnd;
- module.exports = exports['default'];
-
-/***/ }),
-/* 152 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {'use strict';
-
- Object.defineProperty(exports, '__esModule', { value: true });
-
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
- var _extends = _interopDefault(__webpack_require__(153));
- var invariant = _interopDefault(__webpack_require__(192));
- var cssBoxModel = __webpack_require__(193);
- var _Object$keys = _interopDefault(__webpack_require__(194));
- var memoizeOne = _interopDefault(__webpack_require__(198));
- var redux = __webpack_require__(199);
- var _Object$assign = _interopDefault(__webpack_require__(154));
- var rafSchd = _interopDefault(__webpack_require__(203));
- var _inheritsLoose = _interopDefault(__webpack_require__(204));
- var React = __webpack_require__(1);
- var React__default = _interopDefault(React);
- var PropTypes = _interopDefault(__webpack_require__(6));
- var reactRedux = __webpack_require__(211);
- var reactMotion = __webpack_require__(236);
-
- var vertical = {
- direction: 'vertical',
- line: 'y',
- crossAxisLine: 'x',
- start: 'top',
- end: 'bottom',
- size: 'height',
- crossAxisStart: 'left',
- crossAxisEnd: 'right',
- crossAxisSize: 'width'
- };
- var horizontal = {
- direction: 'horizontal',
- line: 'x',
- crossAxisLine: 'y',
- start: 'left',
- end: 'right',
- size: 'width',
- crossAxisStart: 'top',
- crossAxisEnd: 'bottom',
- crossAxisSize: 'height'
- };
-
- var origin = {
- x: 0,
- y: 0
- };
- var add = function add(point1, point2) {
- return {
- x: point1.x + point2.x,
- y: point1.y + point2.y
- };
- };
- var subtract = function subtract(point1, point2) {
- return {
- x: point1.x - point2.x,
- y: point1.y - point2.y
- };
- };
- var isEqual = function isEqual(point1, point2) {
- return point1.x === point2.x && point1.y === point2.y;
- };
- var negate = function negate(point) {
- return {
- x: point.x !== 0 ? -point.x : 0,
- y: point.y !== 0 ? -point.y : 0
- };
- };
- var absolute = function absolute(point) {
- return {
- x: Math.abs(point.x),
- y: Math.abs(point.y)
- };
- };
- var patch = function patch(line, value, otherValue) {
- var _ref;
-
- if (otherValue === void 0) {
- otherValue = 0;
- }
-
- return _ref = {}, _ref[line] = value, _ref[line === 'x' ? 'y' : 'x'] = otherValue, _ref;
- };
- var distance = function distance(point1, point2) {
- return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
- };
- var closest = function closest(target, points) {
- return Math.min.apply(Math, points.map(function (point) {
- return distance(target, point);
- }));
- };
- var apply = function apply(fn) {
- return function (point) {
- return {
- x: fn(point.x),
- y: fn(point.y)
- };
- };
- };
-
- var offsetByPosition = function offsetByPosition(spacing, point) {
- return {
- top: spacing.top + point.y,
- left: spacing.left + point.x,
- bottom: spacing.bottom + point.y,
- right: spacing.right + point.x
- };
- };
- var expandByPosition = function expandByPosition(spacing, position) {
- return {
- top: spacing.top - position.y,
- left: spacing.left - position.x,
- right: spacing.right + position.x,
- bottom: spacing.bottom + position.y
- };
- };
- var getCorners = function getCorners(spacing) {
- return [{
- x: spacing.left,
- y: spacing.top
- }, {
- x: spacing.right,
- y: spacing.top
- }, {
- x: spacing.left,
- y: spacing.bottom
- }, {
- x: spacing.right,
- y: spacing.bottom
- }];
- };
-
- var getMaxScroll = (function (_ref) {
- var scrollHeight = _ref.scrollHeight,
- scrollWidth = _ref.scrollWidth,
- height = _ref.height,
- width = _ref.width;
- var maxScroll = subtract({
- x: scrollWidth,
- y: scrollHeight
- }, {
- x: width,
- y: height
- });
- var adjustedMaxScroll = {
- x: Math.max(0, maxScroll.x),
- y: Math.max(0, maxScroll.y)
- };
- return adjustedMaxScroll;
- });
-
- var clip = function clip(frame, subject) {
- var result = cssBoxModel.getRect({
- top: Math.max(subject.top, frame.top),
- right: Math.min(subject.right, frame.right),
- bottom: Math.min(subject.bottom, frame.bottom),
- left: Math.max(subject.left, frame.left)
- });
-
- if (result.width <= 0 || result.height <= 0) {
- return null;
- }
-
- return result;
- };
- var getDroppableDimension = function getDroppableDimension(_ref) {
- var descriptor = _ref.descriptor,
- isEnabled = _ref.isEnabled,
- direction = _ref.direction,
- client = _ref.client,
- page = _ref.page,
- closest$$1 = _ref.closest;
-
- var scrollable = function () {
- if (!closest$$1) {
- return null;
- }
-
- var maxScroll = getMaxScroll({
- scrollHeight: closest$$1.scrollHeight,
- scrollWidth: closest$$1.scrollWidth,
- height: closest$$1.client.paddingBox.height,
- width: closest$$1.client.paddingBox.width
- });
- return {
- framePageMarginBox: closest$$1.page.marginBox,
- shouldClipSubject: closest$$1.shouldClipSubject,
- scroll: {
- initial: closest$$1.scroll,
- current: closest$$1.scroll,
- max: maxScroll,
- diff: {
- value: origin,
- displacement: origin
- }
- }
- };
- }();
-
- var subjectPageMarginBox = page.marginBox;
- var clippedPageMarginBox = scrollable && scrollable.shouldClipSubject ? clip(scrollable.framePageMarginBox, subjectPageMarginBox) : subjectPageMarginBox;
- var viewport = {
- closestScrollable: scrollable,
- subjectPageMarginBox: subjectPageMarginBox,
- clippedPageMarginBox: clippedPageMarginBox
- };
- var dimension = {
- descriptor: descriptor,
- axis: direction === 'vertical' ? vertical : horizontal,
- isEnabled: isEnabled,
- client: client,
- page: page,
- viewport: viewport
- };
- return dimension;
- };
- var scrollDroppable = function scrollDroppable(droppable, newScroll) {
- !droppable.viewport.closestScrollable ? process.env.NODE_ENV !== "production" ? invariant(false) : invariant(false) : void 0;
- var scrollable = droppable.viewport.closestScrollable;
- var framePageMarginBox = scrollable.framePageMarginBox;
- var scrollDiff = subtract(newScroll, scrollable.scroll.initial);
- var scrollDisplacement = negate(scrollDiff);
- var closestScrollable = {
- framePageMarginBox: scrollable.framePageMarginBox,
- shouldClipSubject: scrollable.shouldClipSubject,
- scroll: {
- initial: scrollable.scroll.initial,
- current: newScroll,
- diff: {
- value: scrollDiff,
- displacement: scrollDisplacement
- },
- max: scrollable.scroll.max
- }
- };
- var displacedSubject = offsetByPosition(droppable.viewport.subjectPageMarginBox, scrollDisplacement);
- var clippedPageMarginBox = closestScrollable.shouldClipSubject ? clip(framePageMarginBox, displacedSubject) : cssBoxModel.getRect(displacedSubject);
- var viewport = {
- closestScrollable: closestScrollable,
- subjectPageMarginBox: droppable.viewport.subjectPageMarginBox,
- clippedPageMarginBox: clippedPageMarginBox
- };
-
- var result = _extends({}, droppable, {
- viewport: viewport
- });
-
- return result;
- };
-
- var toDroppableMap = memoizeOne(function (droppables) {
- return droppables.reduce(function (previous, current) {
- previous[current.descriptor.id] = current;
- return previous;
- }, {});
- });
- var toDraggableMap = memoizeOne(function (draggables) {
- return draggables.reduce(function (previous, current) {
- previous[current.descriptor.id] = current;
- return previous;
- }, {});
- });
- var toDroppableList = memoizeOne(function (droppables) {
- return _Object$keys(droppables).map(function (id) {
- return droppables[id];
- });
- });
- var toDraggableList = memoizeOne(function (draggables) {
- return _Object$keys(draggables).map(function (id) {
- return draggables[id];
- });
- });
-
- var getDraggablesInsideDroppable = memoizeOne(function (droppable, draggables) {
- return toDraggableList(draggables).filter(function (draggable) {
- return droppable.descriptor.id === draggable.descriptor.droppableId;
- }).sort(function (a, b) {
- return a.descriptor.index - b.descriptor.index;
- });
- });
-
- var isWithin = (function (lowerBound, upperBound) {
- return function (value) {
- return value <= upperBound && value >= lowerBound;
- };
- });
-
- var isPositionInFrame = (function (frame) {
- var isWithinVertical = isWithin(frame.top, frame.bottom);
- var isWithinHorizontal = isWithin(frame.left, frame.right);
- return function (point) {
- return isWithinVertical(point.y) && isWithinVertical(point.y) && isWithinHorizontal(point.x) && isWithinHorizontal(point.x);
- };
- });
-
- var getRequiredGrowth = memoizeOne(function (draggable, draggables, droppable) {
- var getResult = function getResult(existingSpace) {
- var requiredSpace = draggable.page.marginBox[droppable.axis.size];
-
- if (requiredSpace <= existingSpace) {
- return null;
- }
-
- var requiredGrowth = patch(droppable.axis.line, requiredSpace - existingSpace);
- return requiredGrowth;
- };
-
- var dimensions = getDraggablesInsideDroppable(droppable, draggables);
-
- if (!dimensions.length) {
- var _existingSpace = droppable.page.marginBox[droppable.axis.size];
- return getResult(_existingSpace);
- }
-
- var endOfDraggables = dimensions[dimensions.length - 1].page.marginBox[droppable.axis.end];
- var endOfDroppable = droppable.page.marginBox[droppable.axis.end];
- var existingSpace = endOfDroppable - endOfDraggables;
- return getResult(existingSpace);
- });
- var getWithGrowth = memoizeOne(function (area, growth) {
- return cssBoxModel.getRect(expandByPosition(area, growth));
- });
-
- var getClippedRectWithPlaceholder = function getClippedRectWithPlaceholder(_ref) {
- var draggable = _ref.draggable,
- draggables = _ref.draggables,
- droppable = _ref.droppable,
- previousDroppableOverId = _ref.previousDroppableOverId;
- var isHome = draggable.descriptor.droppableId === droppable.descriptor.id;
- var wasOver = Boolean(previousDroppableOverId && previousDroppableOverId === droppable.descriptor.id);
- var clippedPageMarginBox = droppable.viewport.clippedPageMarginBox;
-
- if (!clippedPageMarginBox) {
- return clippedPageMarginBox;
- }
-
- if (isHome || !wasOver) {
- return clippedPageMarginBox;
- }
-
- var requiredGrowth = getRequiredGrowth(draggable, draggables, droppable);
-
- if (!requiredGrowth) {
- return clippedPageMarginBox;
- }
-
- var subjectWithGrowth = getWithGrowth(clippedPageMarginBox, requiredGrowth);
- var closestScrollable = droppable.viewport.closestScrollable;
-
- if (!closestScrollable) {
- return subjectWithGrowth;
- }
-
- if (!closestScrollable.shouldClipSubject) {
- return subjectWithGrowth;
- }
-
- return clip(closestScrollable.framePageMarginBox, subjectWithGrowth);
- };
-
- var getDroppableOver = (function (_ref2) {
- var target = _ref2.target,
- draggable = _ref2.draggable,
- draggables = _ref2.draggables,
- droppables = _ref2.droppables,
- previousDroppableOverId = _ref2.previousDroppableOverId;
- var maybe = toDroppableList(droppables).filter(function (droppable) {
- return droppable.isEnabled;
- }).find(function (droppable) {
- var withPlaceholder = getClippedRectWithPlaceholder({
- draggable: draggable,
- draggables: draggables,
- droppable: droppable,
- previousDroppableOverId: previousDroppableOverId
- });
-
- if (!withPlaceholder) {
- return false;
- }
-
- return isPositionInFrame(withPlaceholder)(target);
- });
- return maybe ? maybe.descriptor.id : null;
- });
-
- var noMovement = {
- displaced: [],
- amount: origin,
- isBeyondStartPosition: false
- };
- var noImpact = {
- movement: noMovement,
- direction: null,
- destination: null
- };
-
- var getDisplacementMap = memoizeOne(function (displaced) {
- return displaced.reduce(function (map, displacement) {
- map[displacement.draggableId] = displacement;
- return map;
- }, {});
- });
-
- var isPartiallyVisibleThroughFrame = (function (frame) {
- var isWithinVertical = isWithin(frame.top, frame.bottom);
- var isWithinHorizontal = isWithin(frame.left, frame.right);
- return function (subject) {
- var isContained = isWithinVertical(subject.top) && isWithinVertical(subject.bottom) && isWithinHorizontal(subject.left) && isWithinHorizontal(subject.right);
-
- if (isContained) {
- return true;
- }
-
- var isPartiallyVisibleVertically = isWithinVertical(subject.top) || isWithinVertical(subject.bottom);
- var isPartiallyVisibleHorizontally = isWithinHorizontal(subject.left) || isWithinHorizontal(subject.right);
- var isPartiallyContained = isPartiallyVisibleVertically && isPartiallyVisibleHorizontally;
-
- if (isPartiallyContained) {
- return true;
- }
-
- var isBiggerVertically = subject.top < frame.top && subject.bottom > frame.bottom;
- var isBiggerHorizontally = subject.left < frame.left && subject.right > frame.right;
- var isTargetBiggerThanFrame = isBiggerVertically && isBiggerHorizontally;
-
- if (isTargetBiggerThanFrame) {
- return true;
- }
-
- var isTargetBiggerOnOneAxis = isBiggerVertically && isPartiallyVisibleHorizontally || isBiggerHorizontally && isPartiallyVisibleVertically;
- return isTargetBiggerOnOneAxis;
- };
- });
-
- var isTotallyVisibleThroughFrame = (function (frame) {
- var isWithinVertical = isWithin(frame.top, frame.bottom);
- var isWithinHorizontal = isWithin(frame.left, frame.right);
- return function (subject) {
- var isContained = isWithinVertical(subject.top) && isWithinVertical(subject.bottom) && isWithinHorizontal(subject.left) && isWithinHorizontal(subject.right);
- return isContained;
- };
- });
-
- var isVisible = function isVisible(_ref) {
- var target = _ref.target,
- destination = _ref.destination,
- viewport = _ref.viewport,
- isVisibleThroughFrameFn = _ref.isVisibleThroughFrameFn;
- var displacement = destination.viewport.closestScrollable ? destination.viewport.closestScrollable.scroll.diff.displacement : origin;
- var withDisplacement = offsetByPosition(target, displacement);
-
- if (!destination.viewport.clippedPageMarginBox) {
- return false;
- }
-
- var isVisibleInDroppable = isVisibleThroughFrameFn(destination.viewport.clippedPageMarginBox)(withDisplacement);
- var isVisibleInViewport = isVisibleThroughFrameFn(viewport)(withDisplacement);
- return isVisibleInDroppable && isVisibleInViewport;
- };
-
- var isPartiallyVisible = function isPartiallyVisible(_ref2) {
- var target = _ref2.target,
- destination = _ref2.destination,
- viewport = _ref2.viewport;
- return isVisible({
- target: target,
- destination: destination,
- viewport: viewport,
- isVisibleThroughFrameFn: isPartiallyVisibleThroughFrame
- });
- };
- var isTotallyVisible = function isTotallyVisible(_ref3) {
- var target = _ref3.target,
- destination = _ref3.destination,
- viewport = _ref3.viewport;
- return isVisible({
- target: target,
- destination: destination,
- viewport: viewport,
- isVisibleThroughFrameFn: isTotallyVisibleThroughFrame
- });
- };
-
- var getDisplacement = (function (_ref) {
- var draggable = _ref.draggable,
- destination = _ref.destination,
- previousImpact = _ref.previousImpact,
- viewport = _ref.viewport;
- var id = draggable.descriptor.id;
- var map = getDisplacementMap(previousImpact.movement.displaced);
- var isVisible = isPartiallyVisible({
- target: draggable.page.marginBox,
- destination: destination,
- viewport: viewport
- });
-
- var shouldAnimate = function () {
- if (!isVisible) {
- return false;
- }
-
- var previous = map[id];
-
- if (!previous) {
- return true;
- }
-
- return previous.shouldAnimate;
- }();
-
- var displacement = {
- draggableId: id,
- isVisible: isVisible,
- shouldAnimate: shouldAnimate
- };
- return displacement;
- });
-
- var withDroppableScroll = (function (droppable, point) {
- var closestScrollable = droppable.viewport.closestScrollable;
-
- if (!closestScrollable) {
- return point;
- }
-
- return add(point, closestScrollable.scroll.diff.value);
- });
-
- var inHomeList = (function (_ref) {
- var pageBorderBoxCenter = _ref.pageBorderBoxCenter,
- draggable = _ref.draggable,
- home = _ref.home,
- insideHome = _ref.insideHome,
- previousImpact = _ref.previousImpact,
- viewport = _ref.viewport;
- var axis = home.axis;
- var originalCenter = draggable.page.borderBox.center;
- var currentCenter = withDroppableScroll(home, pageBorderBoxCenter);
- var isBeyondStartPosition = currentCenter[axis.line] - originalCenter[axis.line] > 0;
- var amount = patch(axis.line, draggable.client.marginBox[axis.size]);
- var displaced = insideHome.filter(function (child) {
- if (child === draggable) {
- return false;
- }
-
- var borderBox = child.page.borderBox;
-
- if (isBeyondStartPosition) {
- if (borderBox.center[axis.line] < originalCenter[axis.line]) {
- return false;
- }
-
- return currentCenter[axis.line] > borderBox[axis.start];
- }
-
- if (originalCenter[axis.line] < borderBox.center[axis.line]) {
- return false;
- }
-
- return currentCenter[axis.line] < borderBox[axis.end];
- }).map(function (dimension) {
- return getDisplacement({
- draggable: dimension,
- destination: home,
- previousImpact: previousImpact,
- viewport: viewport.frame
- });
- });
- var ordered = isBeyondStartPosition ? displaced.reverse() : displaced;
-
- var index = function () {
- var startIndex = draggable.descriptor.index;
- var length = ordered.length;
-
- if (!length) {
- return startIndex;
- }
-
- if (isBeyondStartPosition) {
- return startIndex + length;
- }
-
- return startIndex - length;
- }();
-
- var movement = {
- amount: amount,
- displaced: ordered,
- isBeyondStartPosition: isBeyondStartPosition
- };
- var impact = {
- movement: movement,
- direction: axis.direction,
- destination: {
- droppableId: home.descriptor.id,
- index: index
- }
- };
- return impact;
- });
-
- var inForeignList = (function (_ref) {
- var pageBorderBoxCenter = _ref.pageBorderBoxCenter,
- draggable = _ref.draggable,
- destination = _ref.destination,
- insideDestination = _ref.insideDestination,
- previousImpact = _ref.previousImpact,
- viewport = _ref.viewport;
- var axis = destination.axis;
- var currentCenter = withDroppableScroll(destination, pageBorderBoxCenter);
- var displaced = insideDestination.filter(function (child) {
- var threshold = child.page.borderBox[axis.end];
- return threshold > currentCenter[axis.line];
- }).map(function (dimension) {
- return getDisplacement({
- draggable: dimension,
- destination: destination,
- previousImpact: previousImpact,
- viewport: viewport.frame
- });
- });
- var newIndex = insideDestination.length - displaced.length;
- var movement = {
- amount: patch(axis.line, draggable.page.marginBox[axis.size]),
- displaced: displaced,
- isBeyondStartPosition: false
- };
- var impact = {
- movement: movement,
- direction: axis.direction,
- destination: {
- droppableId: destination.descriptor.id,
- index: newIndex
- }
- };
- return impact;
- });
-
- var getDragImpact = (function (_ref) {
- var pageBorderBoxCenter = _ref.pageBorderBoxCenter,
- draggable = _ref.draggable,
- draggables = _ref.draggables,
- droppables = _ref.droppables,
- previousImpact = _ref.previousImpact,
- viewport = _ref.viewport;
- var previousDroppableOverId = previousImpact.destination && previousImpact.destination.droppableId;
- var destinationId = getDroppableOver({
- target: pageBorderBoxCenter,
- draggable: draggable,
- draggables: draggables,
- droppables: droppables,
- previousDroppableOverId: previousDroppableOverId
- });
-
- if (!destinationId) {
- return noImpact;
- }
-
- var destination = droppables[destinationId];
-
- if (!destination.isEnabled) {
- return noImpact;
- }
-
- var home = droppables[draggable.descriptor.droppableId];
- var isWithinHomeDroppable = home.descriptor.id === destinationId;
- var insideDestination = getDraggablesInsideDroppable(destination, draggables);
-
- if (isWithinHomeDroppable) {
- return inHomeList({
- pageBorderBoxCenter: pageBorderBoxCenter,
- draggable: draggable,
- home: home,
- insideHome: insideDestination,
- previousImpact: previousImpact || noImpact,
- viewport: viewport
- });
- }
-
- return inForeignList({
- pageBorderBoxCenter: pageBorderBoxCenter,
- draggable: draggable,
- destination: destination,
- insideDestination: insideDestination,
- previousImpact: previousImpact || noImpact,
- viewport: viewport
- });
- });
-
- var getHomeLocation = (function (critical) {
- return {
- index: critical.draggable.index,
- droppableId: critical.droppable.id
- };
- });
-
- var getSafeClipped = function getSafeClipped(droppable) {
- var rect = droppable.viewport.clippedPageMarginBox;
- !rect ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot get clipped area from droppable') : invariant(false) : void 0;
- return rect;
- };
-
- var getBestCrossAxisDroppable = (function (_ref) {
- var isMovingForward = _ref.isMovingForward,
- pageBorderBoxCenter = _ref.pageBorderBoxCenter,
- source = _ref.source,
- droppables = _ref.droppables,
- viewport = _ref.viewport;
- var sourceClipped = source.viewport.clippedPageMarginBox;
-
- if (!sourceClipped) {
- return null;
- }
-
- var axis = source.axis;
- var isBetweenSourceClipped = isWithin(sourceClipped[axis.start], sourceClipped[axis.end]);
- var candidates = toDroppableList(droppables).filter(function (droppable) {
- return droppable !== source;
- }).filter(function (droppable) {
- return droppable.isEnabled;
- }).filter(function (droppable) {
- var clippedPageMarginBox = droppable.viewport.clippedPageMarginBox;
-
- if (!clippedPageMarginBox) {
- return false;
- }
-
- return isPartiallyVisibleThroughFrame(viewport.frame)(clippedPageMarginBox);
- }).filter(function (droppable) {
- var targetClipped = getSafeClipped(droppable);
-
- if (isMovingForward) {
- return sourceClipped[axis.crossAxisEnd] < targetClipped[axis.crossAxisEnd];
- }
-
- return targetClipped[axis.crossAxisStart] < sourceClipped[axis.crossAxisStart];
- }).filter(function (droppable) {
- var targetClipped = getSafeClipped(droppable);
- var isBetweenDestinationClipped = isWithin(targetClipped[axis.start], targetClipped[axis.end]);
- return isBetweenSourceClipped(targetClipped[axis.start]) || isBetweenSourceClipped(targetClipped[axis.end]) || isBetweenDestinationClipped(sourceClipped[axis.start]) || isBetweenDestinationClipped(sourceClipped[axis.end]);
- }).sort(function (a, b) {
- var first = getSafeClipped(a)[axis.crossAxisStart];
- var second = getSafeClipped(b)[axis.crossAxisStart];
-
- if (isMovingForward) {
- return first - second;
- }
-
- return second - first;
- }).filter(function (droppable, index, array) {
- return getSafeClipped(droppable)[axis.crossAxisStart] === getSafeClipped(array[0])[axis.crossAxisStart];
- });
-
- if (!candidates.length) {
- return null;
- }
-
- if (candidates.length === 1) {
- return candidates[0];
- }
-
- var contains = candidates.filter(function (droppable) {
- var isWithinDroppable = isWithin(getSafeClipped(droppable)[axis.start], getSafeClipped(droppable)[axis.end]);
- return isWithinDroppable(pageBorderBoxCenter[axis.line]);
- });
-
- if (contains.length === 1) {
- return contains[0];
- }
-
- if (contains.length > 1) {
- return contains.sort(function (a, b) {
- return getSafeClipped(a)[axis.start] - getSafeClipped(b)[axis.start];
- })[0];
- }
-
- return candidates.sort(function (a, b) {
- var first = closest(pageBorderBoxCenter, getCorners(getSafeClipped(a)));
- var second = closest(pageBorderBoxCenter, getCorners(getSafeClipped(b)));
-
- if (first !== second) {
- return first - second;
- }
-
- return getSafeClipped(a)[axis.start] - getSafeClipped(b)[axis.start];
- })[0];
- });
-
- var withDroppableDisplacement = (function (droppable, point) {
- var closestScrollable = droppable.viewport.closestScrollable;
-
- if (!closestScrollable) {
- return point;
- }
-
- return add(point, closestScrollable.scroll.diff.displacement);
- });
-
- var getClosestDraggable = (function (_ref) {
- var axis = _ref.axis,
- viewport = _ref.viewport,
- pageBorderBoxCenter = _ref.pageBorderBoxCenter,
- destination = _ref.destination,
- insideDestination = _ref.insideDestination;
-
- if (!insideDestination.length) {
- return null;
- }
-
- var result = insideDestination.filter(function (draggable) {
- return isTotallyVisible({
- target: draggable.page.borderBox,
- destination: destination,
- viewport: viewport.frame
- });
- }).sort(function (a, b) {
- var distanceToA = distance(pageBorderBoxCenter, withDroppableDisplacement(destination, a.page.borderBox.center));
- var distanceToB = distance(pageBorderBoxCenter, withDroppableDisplacement(destination, b.page.borderBox.center));
-
- if (distanceToA < distanceToB) {
- return -1;
- }
-
- if (distanceToB < distanceToA) {
- return 1;
- }
-
- return a.page.borderBox[axis.start] - b.page.borderBox[axis.start];
- });
- return result.length ? result[0] : null;
- });
-
- var moveToEdge = (function (_ref) {
- var source = _ref.source,
- sourceEdge = _ref.sourceEdge,
- destination = _ref.destination,
- destinationEdge = _ref.destinationEdge,
- destinationAxis = _ref.destinationAxis;
-
- var getCorner = function getCorner(area) {
- return patch(destinationAxis.line, area[destinationAxis[destinationEdge]], area[destinationAxis.crossAxisStart]);
- };
-
- var corner = getCorner(destination);
- var centerDiff = absolute(subtract(source.center, getCorner(source)));
- var signed = patch(destinationAxis.line, (sourceEdge === 'end' ? -1 : 1) * centerDiff[destinationAxis.line], centerDiff[destinationAxis.crossAxisLine]);
- return add(corner, signed);
- });
-
- var toHomeList = (function (_ref) {
- var amount = _ref.amount,
- homeIndex = _ref.homeIndex,
- movingRelativeTo = _ref.movingRelativeTo,
- insideDestination = _ref.insideDestination,
- draggable = _ref.draggable,
- destination = _ref.destination,
- previousImpact = _ref.previousImpact,
- viewport = _ref.viewport;
- var axis = destination.axis;
- var targetIndex = insideDestination.indexOf(movingRelativeTo);
- !(targetIndex !== -1) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Unable to find target in destination droppable') : invariant(false) : void 0;
-
- if (targetIndex === homeIndex) {
- var _newCenter = draggable.page.borderBox.center;
- var _newImpact = {
- movement: {
- displaced: [],
- amount: amount,
- isBeyondStartPosition: false
- },
- direction: destination.axis.direction,
- destination: {
- droppableId: destination.descriptor.id,
- index: homeIndex
- }
- };
- return {
- pageBorderBoxCenter: withDroppableDisplacement(destination, _newCenter),
- impact: _newImpact
- };
- }
-
- var isMovingPastOriginalIndex = targetIndex > homeIndex;
- var edge = isMovingPastOriginalIndex ? 'end' : 'start';
- var newCenter = moveToEdge({
- source: draggable.page.borderBox,
- sourceEdge: edge,
- destination: isMovingPastOriginalIndex ? movingRelativeTo.page.borderBox : movingRelativeTo.page.marginBox,
- destinationEdge: edge,
- destinationAxis: axis
- });
-
- var modified = function () {
- if (!isMovingPastOriginalIndex) {
- return insideDestination.slice(targetIndex, homeIndex);
- }
-
- var from = homeIndex + 1;
- var to = targetIndex + 1;
- return insideDestination.slice(from, to).reverse();
- }();
-
- var displaced = modified.map(function (dimension) {
- return getDisplacement({
- draggable: dimension,
- destination: destination,
- previousImpact: previousImpact,
- viewport: viewport.frame
- });
- });
- var newImpact = {
- movement: {
- displaced: displaced,
- amount: amount,
- isBeyondStartPosition: isMovingPastOriginalIndex
- },
- direction: axis.direction,
- destination: {
- droppableId: destination.descriptor.id,
- index: targetIndex
- }
- };
- return {
- pageBorderBoxCenter: withDroppableDisplacement(destination, newCenter),
- impact: newImpact
- };
- });
-
- var toForeignList = (function (_ref) {
- var amount = _ref.amount,
- pageBorderBoxCenter = _ref.pageBorderBoxCenter,
- movingRelativeTo = _ref.movingRelativeTo,
- insideDestination = _ref.insideDestination,
- draggable = _ref.draggable,
- destination = _ref.destination,
- previousImpact = _ref.previousImpact,
- viewport = _ref.viewport;
- var axis = destination.axis;
- var isGoingBeforeTarget = Boolean(movingRelativeTo && pageBorderBoxCenter[destination.axis.line] < movingRelativeTo.page.borderBox.center[destination.axis.line]);
-
- if (!movingRelativeTo) {
- var _newCenter = moveToEdge({
- source: draggable.page.borderBox,
- sourceEdge: 'start',
- destination: destination.page.contentBox,
- destinationEdge: 'start',
- destinationAxis: axis
- });
-
- var _newImpact = {
- movement: {
- displaced: [],
- amount: amount,
- isBeyondStartPosition: false
- },
- direction: axis.direction,
- destination: {
- droppableId: destination.descriptor.id,
- index: 0
- }
- };
- return {
- pageBorderBoxCenter: withDroppableDisplacement(destination, _newCenter),
- impact: _newImpact
- };
- }
-
- var targetIndex = insideDestination.indexOf(movingRelativeTo);
- !(targetIndex !== -1) ? process.env.NODE_ENV !== "production" ? invariant(false, 'The target was not found within its droppable') : invariant(false) : void 0;
- var proposedIndex = isGoingBeforeTarget ? targetIndex : targetIndex + 1;
- var newCenter = moveToEdge({
- source: draggable.page.borderBox,
- sourceEdge: 'start',
- destination: movingRelativeTo.page.marginBox,
- destinationEdge: isGoingBeforeTarget ? 'start' : 'end',
- destinationAxis: axis
- });
- var displaced = insideDestination.slice(proposedIndex, insideDestination.length).map(function (dimension) {
- return getDisplacement({
- draggable: dimension,
- destination: destination,
- viewport: viewport.frame,
- previousImpact: previousImpact
- });
- });
- var newImpact = {
- movement: {
- displaced: displaced,
- amount: amount,
- isBeyondStartPosition: false
- },
- direction: axis.direction,
- destination: {
- droppableId: destination.descriptor.id,
- index: proposedIndex
- }
- };
- return {
- pageBorderBoxCenter: withDroppableDisplacement(destination, newCenter),
- impact: newImpact
- };
- });
-
- var moveToNewDroppable = (function (_ref) {
- var pageBorderBoxCenter = _ref.pageBorderBoxCenter,
- destination = _ref.destination,
- insideDestination = _ref.insideDestination,
- draggable = _ref.draggable,
- movingRelativeTo = _ref.movingRelativeTo,
- home = _ref.home,
- previousImpact = _ref.previousImpact,
- viewport = _ref.viewport;
- var amount = patch(destination.axis.line, draggable.client.marginBox[destination.axis.size]);
-
- if (destination.descriptor.id === draggable.descriptor.droppableId) {
- !movingRelativeTo ? process.env.NODE_ENV !== "production" ? invariant(false, 'There will always be a target in the original list') : invariant(false) : void 0;
- return toHomeList({
- amount: amount,
- homeIndex: home.index,
- movingRelativeTo: movingRelativeTo,
- insideDestination: insideDestination,
- draggable: draggable,
- destination: destination,
- previousImpact: previousImpact,
- viewport: viewport
- });
- }
-
- return toForeignList({
- amount: amount,
- pageBorderBoxCenter: pageBorderBoxCenter,
- movingRelativeTo: movingRelativeTo,
- insideDestination: insideDestination,
- draggable: draggable,
- destination: destination,
- previousImpact: previousImpact,
- viewport: viewport
- });
- });
-
- var moveCrossAxis = (function (_ref) {
- var isMovingForward = _ref.isMovingForward,
- pageBorderBoxCenter = _ref.pageBorderBoxCenter,
- draggableId = _ref.draggableId,
- droppableId = _ref.droppableId,
- home = _ref.home,
- draggables = _ref.draggables,
- droppables = _ref.droppables,
- previousImpact = _ref.previousImpact,
- viewport = _ref.viewport;
- var draggable = draggables[draggableId];
- var source = droppables[droppableId];
- var destination = getBestCrossAxisDroppable({
- isMovingForward: isMovingForward,
- pageBorderBoxCenter: pageBorderBoxCenter,
- source: source,
- droppables: droppables,
- viewport: viewport
- });
-
- if (!destination) {
- return null;
- }
-
- var insideDestination = getDraggablesInsideDroppable(destination, draggables);
- var movingRelativeTo = getClosestDraggable({
- axis: destination.axis,
- pageBorderBoxCenter: pageBorderBoxCenter,
- destination: destination,
- insideDestination: insideDestination,
- viewport: viewport
- });
-
- if (insideDestination.length && !movingRelativeTo) {
- return null;
- }
-
- return moveToNewDroppable({
- pageBorderBoxCenter: pageBorderBoxCenter,
- destination: destination,
- draggable: draggable,
- movingRelativeTo: movingRelativeTo,
- insideDestination: insideDestination,
- home: home,
- previousImpact: previousImpact || noImpact,
- viewport: viewport
- });
- });
-
- var isTotallyVisibleInNewLocation = (function (_ref) {
- var draggable = _ref.draggable,
- destination = _ref.destination,
- newPageBorderBoxCenter = _ref.newPageBorderBoxCenter,
- viewport = _ref.viewport;
- var diff = subtract(newPageBorderBoxCenter, draggable.page.borderBox.center);
- var shifted = offsetByPosition(draggable.page.borderBox, diff);
- return isTotallyVisible({
- target: shifted,
- destination: destination,
- viewport: viewport
- });
- });
-
- var withFirstAdded = function withFirstAdded(_ref) {
- var add = _ref.add,
- previousImpact = _ref.previousImpact,
- droppable = _ref.droppable,
- draggables = _ref.draggables,
- viewport = _ref.viewport;
- var newDisplacement = {
- draggableId: add,
- isVisible: true,
- shouldAnimate: true
- };
- var added = [newDisplacement].concat(previousImpact.movement.displaced);
- var withUpdatedVisibility = added.map(function (current) {
- if (current === newDisplacement) {
- return current;
- }
-
- var updated = getDisplacement({
- draggable: draggables[current.draggableId],
- destination: droppable,
- previousImpact: previousImpact,
- viewport: viewport.frame
- });
- return updated;
- });
- return withUpdatedVisibility;
- };
-
- var forceVisibleDisplacement = function forceVisibleDisplacement(current) {
- if (current.isVisible) {
- return current;
- }
-
- return {
- draggableId: current.draggableId,
- isVisible: true,
- shouldAnimate: false
- };
- };
-
- var withFirstRemoved = function withFirstRemoved(_ref2) {
- var dragging = _ref2.dragging,
- isVisibleInNewLocation = _ref2.isVisibleInNewLocation,
- previousImpact = _ref2.previousImpact,
- droppable = _ref2.droppable,
- draggables = _ref2.draggables;
- var last = previousImpact.movement.displaced;
- !last.length ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot remove displacement from empty list') : invariant(false) : void 0;
- var withFirstRestored = last.slice(1, last.length);
-
- if (!withFirstRestored.length) {
- return withFirstRestored;
- }
-
- if (isVisibleInNewLocation) {
- return withFirstRestored;
- }
-
- var axis = droppable.axis;
- var sizeOfRestored = draggables[last[0].draggableId].page.marginBox[axis.size];
- var sizeOfDragging = draggables[dragging].page.marginBox[axis.size];
- var buffer = sizeOfRestored + sizeOfDragging;
- var withUpdatedVisibility = withFirstRestored.map(function (displacement, index) {
- if (index === 0) {
- return forceVisibleDisplacement(displacement);
- }
-
- if (buffer > 0) {
- var current = draggables[displacement.draggableId];
- var size = current.page.marginBox[axis.size];
- buffer -= size;
- return forceVisibleDisplacement(displacement);
- }
-
- return {
- draggableId: displacement.draggableId,
- isVisible: false,
- shouldAnimate: false
- };
- });
- return withUpdatedVisibility;
- };
-
- var inHomeList$1 = (function (_ref) {
- var isMovingForward = _ref.isMovingForward,
- draggableId = _ref.draggableId,
- previousPageBorderBoxCenter = _ref.previousPageBorderBoxCenter,
- previousImpact = _ref.previousImpact,
- droppable = _ref.droppable,
- draggables = _ref.draggables,
- viewport = _ref.viewport;
- var location = previousImpact.destination;
- !location ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot move to next index in home list when there is no previous destination') : invariant(false) : void 0;
- var draggable = draggables[draggableId];
- var axis = droppable.axis;
- var insideDroppable = getDraggablesInsideDroppable(droppable, draggables);
- var startIndex = draggable.descriptor.index;
- var currentIndex = location.index;
- var proposedIndex = isMovingForward ? currentIndex + 1 : currentIndex - 1;
-
- if (proposedIndex > insideDroppable.length - 1) {
- return null;
- }
-
- if (proposedIndex < 0) {
- return null;
- }
-
- var destination = insideDroppable[proposedIndex];
- var isMovingTowardStart = isMovingForward && proposedIndex <= startIndex || !isMovingForward && proposedIndex >= startIndex;
-
- var edge = function () {
- if (!isMovingTowardStart) {
- return isMovingForward ? 'end' : 'start';
- }
-
- return isMovingForward ? 'start' : 'end';
- }();
-
- var newPageBorderBoxCenter = moveToEdge({
- source: draggable.page.borderBox,
- sourceEdge: edge,
- destination: destination.page.borderBox,
- destinationEdge: edge,
- destinationAxis: droppable.axis
- });
- var isVisibleInNewLocation = isTotallyVisibleInNewLocation({
- draggable: draggable,
- destination: droppable,
- newPageBorderBoxCenter: newPageBorderBoxCenter,
- viewport: viewport.frame
- });
- var displaced = isMovingTowardStart ? withFirstRemoved({
- dragging: draggableId,
- isVisibleInNewLocation: isVisibleInNewLocation,
- previousImpact: previousImpact,
- droppable: droppable,
- draggables: draggables
- }) : withFirstAdded({
- add: destination.descriptor.id,
- previousImpact: previousImpact,
- droppable: droppable,
- draggables: draggables,
- viewport: viewport
- });
- var newImpact = {
- movement: {
- displaced: displaced,
- amount: patch(axis.line, draggable.page.marginBox[axis.size]),
- isBeyondStartPosition: proposedIndex > startIndex
- },
- destination: {
- droppableId: droppable.descriptor.id,
- index: proposedIndex
- },
- direction: droppable.axis.direction
- };
-
- if (isVisibleInNewLocation) {
- return {
- pageBorderBoxCenter: withDroppableDisplacement(droppable, newPageBorderBoxCenter),
- impact: newImpact,
- scrollJumpRequest: null
- };
- }
-
- var distance$$1 = subtract(newPageBorderBoxCenter, previousPageBorderBoxCenter);
- var distanceWithScroll = withDroppableDisplacement(droppable, distance$$1);
- return {
- pageBorderBoxCenter: previousPageBorderBoxCenter,
- impact: newImpact,
- scrollJumpRequest: distanceWithScroll
- };
- });
-
- var inForeignList$1 = (function (_ref) {
- var isMovingForward = _ref.isMovingForward,
- draggableId = _ref.draggableId,
- previousImpact = _ref.previousImpact,
- previousPageBorderBoxCenter = _ref.previousPageBorderBoxCenter,
- droppable = _ref.droppable,
- draggables = _ref.draggables,
- viewport = _ref.viewport;
- !previousImpact.destination ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot move to next index where there is no previous destination') : invariant(false) : void 0;
- var location = previousImpact.destination;
- var draggable = draggables[draggableId];
- var axis = droppable.axis;
- var insideForeignDroppable = getDraggablesInsideDroppable(droppable, draggables);
- var currentIndex = location.index;
- var proposedIndex = isMovingForward ? currentIndex + 1 : currentIndex - 1;
- var lastIndex = insideForeignDroppable.length - 1;
-
- if (proposedIndex > insideForeignDroppable.length) {
- return null;
- }
-
- if (proposedIndex < 0) {
- return null;
- }
-
- var movingRelativeTo = insideForeignDroppable[Math.min(proposedIndex, lastIndex)];
- var isMovingPastLastIndex = proposedIndex > lastIndex;
- var sourceEdge = 'start';
-
- var destinationEdge = function () {
- if (isMovingPastLastIndex) {
- return 'end';
- }
-
- return 'start';
- }();
-
- var newPageBorderBoxCenter = moveToEdge({
- source: draggable.page.borderBox,
- sourceEdge: sourceEdge,
- destination: movingRelativeTo.page.marginBox,
- destinationEdge: destinationEdge,
- destinationAxis: droppable.axis
- });
- var isVisibleInNewLocation = isTotallyVisibleInNewLocation({
- draggable: draggable,
- destination: droppable,
- newPageBorderBoxCenter: newPageBorderBoxCenter,
- viewport: viewport.frame
- });
-
- var displaced = function () {
- if (isMovingForward) {
- return withFirstRemoved({
- dragging: draggableId,
- isVisibleInNewLocation: isVisibleInNewLocation,
- previousImpact: previousImpact,
- droppable: droppable,
- draggables: draggables
- });
- }
-
- return withFirstAdded({
- add: movingRelativeTo.descriptor.id,
- previousImpact: previousImpact,
- droppable: droppable,
- draggables: draggables,
- viewport: viewport
- });
- }();
-
- var newImpact = {
- movement: {
- displaced: displaced,
- amount: patch(axis.line, draggable.page.marginBox[axis.size]),
- isBeyondStartPosition: false
- },
- destination: {
- droppableId: droppable.descriptor.id,
- index: proposedIndex
- },
- direction: droppable.axis.direction
- };
-
- if (isVisibleInNewLocation) {
- return {
- pageBorderBoxCenter: withDroppableDisplacement(droppable, newPageBorderBoxCenter),
- impact: newImpact,
- scrollJumpRequest: null
- };
- }
-
- var distanceMoving = subtract(newPageBorderBoxCenter, previousPageBorderBoxCenter);
- var distanceWithScroll = withDroppableDisplacement(droppable, distanceMoving);
- return {
- pageBorderBoxCenter: previousPageBorderBoxCenter,
- impact: newImpact,
- scrollJumpRequest: distanceWithScroll
- };
- });
-
- var moveToNextIndex = (function (args) {
- var draggableId = args.draggableId,
- draggables = args.draggables,
- droppable = args.droppable;
- var draggable = draggables[draggableId];
- var isInHomeList = draggable.descriptor.droppableId === droppable.descriptor.id;
-
- if (!droppable.isEnabled) {
- return null;
- }
-
- if (isInHomeList) {
- return inHomeList$1(args);
- }
-
- return inForeignList$1(args);
- });
-
- var getClientSelection = function getClientSelection(pageBorderBoxCenter, currentScroll) {
- return subtract(pageBorderBoxCenter, currentScroll);
- };
-
- var moveInDirection = (function (_ref) {
- var state = _ref.state,
- type = _ref.type;
-
- var _ref2 = function () {
- if (state.impact.destination) {
- return {
- droppable: state.dimensions.droppables[state.impact.destination.droppableId],
- isMainAxisMovementAllowed: true
- };
- }
-
- return {
- droppable: state.dimensions.droppables[state.critical.droppable.id],
- isMainAxisMovementAllowed: false
- };
- }(),
- droppable = _ref2.droppable,
- isMainAxisMovementAllowed = _ref2.isMainAxisMovementAllowed;
-
- var direction = droppable.axis.direction;
- var isMovingOnMainAxis = direction === 'vertical' && (type === 'MOVE_UP' || type === 'MOVE_DOWN') || direction === 'horizontal' && (type === 'MOVE_LEFT' || type === 'MOVE_RIGHT');
-
- if (isMovingOnMainAxis && !isMainAxisMovementAllowed) {
- return null;
- }
-
- var isMovingForward = type === 'MOVE_DOWN' || type === 'MOVE_RIGHT';
-
- if (isMovingOnMainAxis) {
- var _result = moveToNextIndex({
- isMovingForward: isMovingForward,
- draggableId: state.critical.draggable.id,
- droppable: droppable,
- draggables: state.dimensions.draggables,
- previousPageBorderBoxCenter: state.current.page.borderBoxCenter,
- previousImpact: state.impact,
- viewport: state.viewport
- });
-
- if (!_result) {
- return null;
- }
-
- return {
- impact: _result.impact,
- clientSelection: getClientSelection(_result.pageBorderBoxCenter, state.viewport.scroll.current),
- scrollJumpRequest: _result.scrollJumpRequest
- };
- }
-
- var home = getHomeLocation(state.critical);
- var result = moveCrossAxis({
- isMovingForward: isMovingForward,
- pageBorderBoxCenter: state.current.page.borderBoxCenter,
- draggableId: state.critical.draggable.id,
- droppableId: droppable.descriptor.id,
- home: home,
- draggables: state.dimensions.draggables,
- droppables: state.dimensions.droppables,
- previousImpact: state.impact,
- viewport: state.viewport
- });
-
- if (!result) {
- return null;
- }
-
- return {
- clientSelection: getClientSelection(result.pageBorderBoxCenter, state.viewport.scroll.current),
- impact: result.impact,
- scrollJumpRequest: null
- };
- });
-
- var scrollViewport = (function (viewport, newScroll) {
- var diff = subtract(newScroll, viewport.scroll.initial);
- var displacement = negate(diff);
- var frame = cssBoxModel.getRect({
- top: newScroll.y,
- bottom: newScroll.y + viewport.frame.height,
- left: newScroll.x,
- right: newScroll.x + viewport.frame.width
- });
- var updated = {
- frame: frame,
- scroll: {
- initial: viewport.scroll.initial,
- max: viewport.scroll.max,
- current: newScroll,
- diff: {
- value: diff,
- displacement: displacement
- }
- }
- };
- return updated;
- });
-
- var getHomeImpact = (function (critical, dimensions) {
- var home = dimensions.droppables[critical.droppable.id];
- var axis = home.axis;
- var draggable = dimensions.draggables[critical.draggable.id];
- return {
- movement: {
- displaced: [],
- isBeyondStartPosition: false,
- amount: patch(axis.line, draggable.client.marginBox[axis.size])
- },
- direction: axis.direction,
- destination: getHomeLocation(critical)
- };
- });
-
- var getPageItemPositions = (function (client, windowScroll) {
- return {
- selection: add(client.selection, windowScroll),
- borderBoxCenter: add(client.borderBoxCenter, windowScroll),
- offset: add(client.offset, windowScroll)
- };
- });
-
- function isMovementAllowed(state) {
- return state.phase === 'DRAGGING' || state.phase === 'COLLECTING';
- }
-
- var idle = {
- phase: 'IDLE'
- };
- var preparing = {
- phase: 'PREPARING'
- };
-
- var moveWithPositionUpdates = function moveWithPositionUpdates(_ref) {
- var state = _ref.state,
- clientSelection = _ref.clientSelection,
- shouldAnimate = _ref.shouldAnimate,
- viewport = _ref.viewport,
- impact = _ref.impact,
- scrollJumpRequest = _ref.scrollJumpRequest;
- var newViewport = viewport || state.viewport;
- var currentWindowScroll = newViewport.scroll.current;
-
- var client = function () {
- var offset = subtract(clientSelection, state.initial.client.selection);
- return {
- offset: offset,
- selection: clientSelection,
- borderBoxCenter: add(state.initial.client.borderBoxCenter, offset)
- };
- }();
-
- var page = getPageItemPositions(client, currentWindowScroll);
- var current = {
- client: client,
- page: page
- };
-
- if (state.phase === 'COLLECTING') {
- return _extends({
- phase: 'COLLECTING'
- }, state, {
- current: current
- });
- }
-
- var newImpact = impact || getDragImpact({
- pageBorderBoxCenter: page.borderBoxCenter,
- draggable: state.dimensions.draggables[state.critical.draggable.id],
- draggables: state.dimensions.draggables,
- droppables: state.dimensions.droppables,
- previousImpact: state.impact,
- viewport: newViewport
- });
-
- var result = _extends({}, state, {
- current: current,
- shouldAnimate: shouldAnimate,
- impact: newImpact,
- scrollJumpRequest: scrollJumpRequest || null,
- viewport: newViewport
- });
-
- return result;
- };
-
- var reducer = (function (state, action) {
- if (state === void 0) {
- state = idle;
- }
-
- if (action.type === 'CLEAN') {
- return idle;
- }
-
- if (action.type === 'PREPARE') {
- return preparing;
- }
-
- if (action.type === 'INITIAL_PUBLISH') {
- !(state.phase === 'PREPARING') ? process.env.NODE_ENV !== "production" ? invariant(false, 'INITIAL_PUBLISH must come after a PREPARING phase') : invariant(false) : void 0;
- var _action$payload = action.payload,
- critical = _action$payload.critical,
- client = _action$payload.client,
- viewport = _action$payload.viewport,
- dimensions = _action$payload.dimensions,
- autoScrollMode = _action$payload.autoScrollMode;
- var initial = {
- client: client,
- page: {
- selection: add(client.selection, viewport.scroll.initial),
- borderBoxCenter: add(client.selection, viewport.scroll.initial),
- offset: origin
- }
- };
- var result = {
- phase: 'DRAGGING',
- isDragging: true,
- critical: critical,
- autoScrollMode: autoScrollMode,
- dimensions: dimensions,
- initial: initial,
- current: initial,
- impact: getHomeImpact(critical, dimensions),
- viewport: viewport,
- scrollJumpRequest: null,
- shouldAnimate: false
- };
- return result;
- }
-
- if (action.type === 'COLLECTION_STARTING') {
- var _extends2;
-
- if (state.phase === 'COLLECTING' || state.phase === 'DROP_PENDING') {
- return state;
- }
-
- !(state.phase === 'DRAGGING') ? process.env.NODE_ENV !== "production" ? invariant(false, "Collection cannot start from phase " + state.phase) : invariant(false) : void 0;
-
- var _result = _extends({
- phase: 'COLLECTING'
- }, state, (_extends2 = {}, _extends2["phase"] = 'COLLECTING', _extends2));
-
- return _result;
- }
-
- if (action.type === 'PUBLISH') {
- !(state.phase === 'COLLECTING' || state.phase === 'DROP_PENDING') ? process.env.NODE_ENV !== "production" ? invariant(false, "Unexpected " + action.type + " received in phase " + state.phase) : invariant(false) : void 0;
- process.env.NODE_ENV !== "production" ? invariant(false, "Dynamic additions and removals of Draggable and Droppable components\n is currently not supported. But will be soon!") : invariant(false);
- }
-
- if (action.type === 'MOVE') {
- if (state.phase === 'PREPARING') {
- return state;
- }
-
- if (state.phase === 'DROP_PENDING') {
- return state;
- }
-
- !isMovementAllowed(state) ? process.env.NODE_ENV !== "production" ? invariant(false, action.type + " not permitted in phase " + state.phase) : invariant(false) : void 0;
- var _action$payload2 = action.payload,
- _client = _action$payload2.client,
- shouldAnimate = _action$payload2.shouldAnimate;
-
- if (state.shouldAnimate === shouldAnimate && isEqual(_client, state.current.client.selection)) {
- return state;
- }
-
- var impact = state.autoScrollMode === 'JUMP' ? state.impact : null;
- return moveWithPositionUpdates({
- state: state,
- clientSelection: _client,
- impact: impact,
- shouldAnimate: shouldAnimate
- });
- }
-
- if (action.type === 'UPDATE_DROPPABLE_SCROLL') {
- var _extends3, _extends4;
-
- if (state.phase === 'PREPARING') {
- return state;
- }
-
- if (state.phase === 'DROP_PENDING') {
- return state;
- }
-
- !isMovementAllowed(state) ? process.env.NODE_ENV !== "production" ? invariant(false, action.type + " not permitted in phase " + state.phase) : invariant(false) : void 0;
- var _action$payload3 = action.payload,
- id = _action$payload3.id,
- offset = _action$payload3.offset;
- var target = state.dimensions.droppables[id];
-
- if (!target) {
- return state;
- }
-
- var updated = scrollDroppable(target, offset);
-
- var _dimensions = _extends({}, state.dimensions, {
- droppables: _extends({}, state.dimensions.droppables, (_extends3 = {}, _extends3[id] = updated, _extends3))
- });
-
- var _impact = function () {
- !isMovementAllowed(state) ? process.env.NODE_ENV !== "production" ? invariant(false) : invariant(false) : void 0;
-
- if (state.autoScrollMode === 'JUMP') {
- return state.impact;
- }
-
- return getDragImpact({
- pageBorderBoxCenter: state.current.page.borderBoxCenter,
- draggable: _dimensions.draggables[state.critical.draggable.id],
- draggables: _dimensions.draggables,
- droppables: _dimensions.droppables,
- previousImpact: state.impact,
- viewport: state.viewport
- });
- }();
-
- return _extends({
- phase: 'DRAGGING'
- }, state, (_extends4 = {}, _extends4["phase"] = state.phase, _extends4.impact = _impact, _extends4.dimensions = _dimensions, _extends4.scrollJumpRequest = null, _extends4));
- }
-
- if (action.type === 'UPDATE_DROPPABLE_IS_ENABLED') {
- var _extends5, _extends6;
-
- if (state.phase === 'DROP_PENDING') {
- return state;
- }
-
- !isMovementAllowed(state) ? process.env.NODE_ENV !== "production" ? invariant(false, "Attempting to move in an unsupported phase " + state.phase) : invariant(false) : void 0;
- var _action$payload4 = action.payload,
- _id = _action$payload4.id,
- isEnabled = _action$payload4.isEnabled;
- var _target = state.dimensions.droppables[_id];
- !_target ? process.env.NODE_ENV !== "production" ? invariant(false, "Cannot find Droppable[id: " + _id + "] to toggle its enabled state") : invariant(false) : void 0;
- !(_target.isEnabled !== isEnabled) ? process.env.NODE_ENV !== "production" ? invariant(false, "Trying to set droppable isEnabled to " + String(isEnabled) + "\n but it is already " + String(_target.isEnabled)) : invariant(false) : void 0;
-
- var _updated = _extends({}, _target, {
- isEnabled: isEnabled
- });
-
- var _dimensions2 = _extends({}, state.dimensions, {
- droppables: _extends({}, state.dimensions.droppables, (_extends5 = {}, _extends5[_id] = _updated, _extends5))
- });
-
- var _impact2 = getDragImpact({
- pageBorderBoxCenter: state.current.page.borderBoxCenter,
- draggable: _dimensions2.draggables[state.critical.draggable.id],
- draggables: _dimensions2.draggables,
- droppables: _dimensions2.droppables,
- previousImpact: state.impact,
- viewport: state.viewport
- });
-
- return _extends({
- phase: 'DRAGGING'
- }, state, (_extends6 = {}, _extends6["phase"] = state.phase, _extends6.impact = _impact2, _extends6.dimensions = _dimensions2, _extends6));
- }
-
- if (action.type === 'MOVE_BY_WINDOW_SCROLL') {
- if (state.phase === 'PREPARING') {
- return state;
- }
-
- if (state.phase === 'DROP_PENDING' || state.phase === 'DROP_ANIMATING') {
- return state;
- }
-
- !isMovementAllowed(state) ? process.env.NODE_ENV !== "production" ? invariant(false, "Cannot move by window in phase " + state.phase) : invariant(false) : void 0;
- var newScroll = action.payload.scroll;
-
- if (isEqual(state.viewport.scroll.current, newScroll)) {
- return state;
- }
-
- var isJumpScrolling = state.autoScrollMode === 'JUMP';
-
- var _impact3 = isJumpScrolling ? state.impact : null;
-
- var _viewport = scrollViewport(state.viewport, newScroll);
-
- return moveWithPositionUpdates({
- state: state,
- clientSelection: state.current.client.selection,
- viewport: _viewport,
- shouldAnimate: false,
- impact: _impact3
- });
- }
-
- if (action.type === 'UPDATE_VIEWPORT_MAX_SCROLL') {
- var _extends7;
-
- !state.isDragging ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot update the max viewport scroll if not dragging') : invariant(false) : void 0;
- var existing = state.viewport;
-
- var _viewport2 = _extends({}, existing, {
- scroll: _extends({}, existing.scroll, {
- max: action.payload
- })
- });
-
- return _extends({
- phase: 'DRAGGING'
- }, state, (_extends7 = {}, _extends7["phase"] = state.phase, _extends7.viewport = _viewport2, _extends7));
- }
-
- if (action.type === 'MOVE_UP' || action.type === 'MOVE_DOWN' || action.type === 'MOVE_LEFT' || action.type === 'MOVE_RIGHT') {
- if (state.phase === 'PREPARING') {
- return state;
- }
-
- if (state.phase === 'COLLECTING' || state.phase === 'DROP_PENDING') {
- return state;
- }
-
- !(state.phase === 'DRAGGING') ? process.env.NODE_ENV !== "production" ? invariant(false, action.type + " received while not in DRAGGING phase") : invariant(false) : void 0;
-
- var _result2 = moveInDirection({
- state: state,
- type: action.type
- });
-
- if (!_result2) {
- return state;
- }
-
- return moveWithPositionUpdates({
- state: state,
- impact: _result2.impact,
- clientSelection: _result2.clientSelection,
- shouldAnimate: true,
- scrollJumpRequest: _result2.scrollJumpRequest
- });
- }
-
- if (action.type === 'DROP_PENDING') {
- var _extends8;
-
- var reason = action.payload.reason;
- !(state.phase === 'COLLECTING') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Can only move into the DROP_PENDING phase from the COLLECTING phase') : invariant(false) : void 0;
-
- var newState = _extends({
- phase: 'DROP_PENDING'
- }, state, (_extends8 = {}, _extends8["phase"] = 'DROP_PENDING', _extends8.isWaiting = true, _extends8.reason = reason, _extends8));
-
- return newState;
- }
-
- if (action.type === 'DROP_ANIMATE') {
- var pending = action.payload;
- !(state.phase === 'DRAGGING' || state.phase === 'DROP_PENDING') ? process.env.NODE_ENV !== "production" ? invariant(false, "Cannot animate drop from phase " + state.phase) : invariant(false) : void 0;
- var _result3 = {
- phase: 'DROP_ANIMATING',
- pending: pending,
- dimensions: state.dimensions
- };
- return _result3;
- }
-
- if (action.type === 'DROP_COMPLETE') {
- return idle;
- }
-
- return state;
- });
-
- var lift = function lift(args) {
- return {
- type: 'LIFT',
- payload: args
- };
- };
- var initialPublish = function initialPublish(args) {
- return {
- type: 'INITIAL_PUBLISH',
- payload: args
- };
- };
- var publish = function publish(args) {
- return {
- type: 'PUBLISH',
- payload: args
- };
- };
- var collectionStarting = function collectionStarting() {
- return {
- type: 'COLLECTION_STARTING',
- payload: null
- };
- };
- var updateDroppableScroll = function updateDroppableScroll(args) {
- return {
- type: 'UPDATE_DROPPABLE_SCROLL',
- payload: args
- };
- };
- var updateDroppableIsEnabled = function updateDroppableIsEnabled(args) {
- return {
- type: 'UPDATE_DROPPABLE_IS_ENABLED',
- payload: args
- };
- };
- var move = function move(args) {
- return {
- type: 'MOVE',
- payload: args
- };
- };
- var moveByWindowScroll = function moveByWindowScroll(args) {
- return {
- type: 'MOVE_BY_WINDOW_SCROLL',
- payload: args
- };
- };
- var updateViewportMaxScroll = function updateViewportMaxScroll(max) {
- return {
- type: 'UPDATE_VIEWPORT_MAX_SCROLL',
- payload: max
- };
- };
- var moveUp = function moveUp() {
- return {
- type: 'MOVE_UP',
- payload: null
- };
- };
- var moveDown = function moveDown() {
- return {
- type: 'MOVE_DOWN',
- payload: null
- };
- };
- var moveRight = function moveRight() {
- return {
- type: 'MOVE_RIGHT',
- payload: null
- };
- };
- var moveLeft = function moveLeft() {
- return {
- type: 'MOVE_LEFT',
- payload: null
- };
- };
- var clean = function clean() {
- return {
- type: 'CLEAN',
- payload: null
- };
- };
- var prepare = function prepare() {
- return {
- type: 'PREPARE',
- payload: null
- };
- };
- var animateDrop = function animateDrop(pending) {
- return {
- type: 'DROP_ANIMATE',
- payload: pending
- };
- };
- var completeDrop = function completeDrop(result) {
- return {
- type: 'DROP_COMPLETE',
- payload: result
- };
- };
- var drop = function drop(args) {
- return {
- type: 'DROP',
- payload: args
- };
- };
- var dropPending = function dropPending(args) {
- return {
- type: 'DROP_PENDING',
- payload: args
- };
- };
- var dropAnimationFinished = function dropAnimationFinished() {
- return {
- type: 'DROP_ANIMATION_FINISHED',
- payload: null
- };
- };
-
- var lift$1 = (function (getMarshal) {
- var timeoutId = null;
-
- var tryAbortCriticalCollection = function tryAbortCriticalCollection() {
- if (timeoutId == null) {
- return;
- }
-
- clearTimeout(timeoutId);
- timeoutId = null;
- };
-
- return function (_ref) {
- var getState = _ref.getState,
- dispatch = _ref.dispatch;
- return function (next) {
- return function (action) {
- if (action.type === 'CLEAN') {
- tryAbortCriticalCollection();
- next(action);
- return;
- }
-
- if (action.type !== 'LIFT') {
- next(action);
- return;
- }
-
- !!timeoutId ? process.env.NODE_ENV !== "production" ? invariant(false, 'There should not be a pending complete lift phase when a lift action is fired') : invariant(false) : void 0;
- var marshal = getMarshal();
- var _action$payload = action.payload,
- id = _action$payload.id,
- client = _action$payload.client,
- autoScrollMode = _action$payload.autoScrollMode,
- viewport = _action$payload.viewport;
- var initial = getState();
-
- if (initial.phase === 'DROP_ANIMATING') {
- dispatch(completeDrop(initial.pending.result));
- }
-
- var postFlushState = getState();
- !(postFlushState.phase === 'IDLE') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Incorrect phase to start a drag') : invariant(false) : void 0;
- dispatch(prepare());
- timeoutId = setTimeout(function () {
- timeoutId = null;
- var state = getState();
- !(state.phase === 'PREPARING') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Invalid phase for completing lift') : invariant(false) : void 0;
- var scrollOptions = {
- shouldPublishImmediately: autoScrollMode === 'JUMP'
- };
- var request = {
- draggableId: id,
- scrollOptions: scrollOptions
- };
-
- var _marshal$startPublish = marshal.startPublishing(request, viewport.scroll.current),
- critical = _marshal$startPublish.critical,
- dimensions = _marshal$startPublish.dimensions;
-
- dispatch(initialPublish({
- critical: critical,
- dimensions: dimensions,
- client: client,
- autoScrollMode: autoScrollMode,
- viewport: viewport
- }));
- });
- };
- };
- };
- });
-
- var style = (function (marshal) {
- return function () {
- return function (next) {
- return function (action) {
- if (action.type === 'INITIAL_PUBLISH') {
- marshal.dragging();
- }
-
- if (action.type === 'COLLECTION_STARTING') {
- marshal.collecting();
- }
-
- if (action.type === 'PUBLISH') {
- marshal.dragging();
- }
-
- if (action.type === 'DROP_ANIMATE') {
- marshal.dropping(action.payload.result.reason);
- }
-
- if (action.type === 'CLEAN' || action.type === 'DROP_COMPLETE') {
- marshal.resting();
- }
-
- next(action);
- };
- };
- };
- });
-
- var getNewHomeClientBorderBoxCenter = (function (_ref) {
- var movement = _ref.movement,
- draggable = _ref.draggable,
- draggables = _ref.draggables,
- destination = _ref.destination;
- var originalCenter = draggable.client.borderBox.center;
-
- if (destination == null) {
- return originalCenter;
- }
-
- var displaced = movement.displaced,
- isBeyondStartPosition = movement.isBeyondStartPosition;
- var axis = destination.axis;
- var isWithinHomeDroppable = destination.descriptor.id === draggable.descriptor.droppableId;
-
- if (isWithinHomeDroppable && !displaced.length) {
- return originalCenter;
- }
-
- var draggablesInDestination = getDraggablesInsideDroppable(destination, draggables);
-
- var movingRelativeTo = function () {
- if (isWithinHomeDroppable) {
- return draggables[displaced[0].draggableId].client.borderBox;
- }
-
- if (displaced.length) {
- return draggables[displaced[0].draggableId].client.borderBox;
- }
-
- if (draggablesInDestination.length) {
- return draggablesInDestination[draggablesInDestination.length - 1].client.marginBox;
- }
-
- return destination.client.contentBox;
- }();
-
- var _ref2 = function () {
- if (isWithinHomeDroppable) {
- if (isBeyondStartPosition) {
- return {
- sourceEdge: 'end',
- destinationEdge: 'end'
- };
- }
-
- return {
- sourceEdge: 'start',
- destinationEdge: 'start'
- };
- }
-
- if (!displaced.length && draggablesInDestination.length) {
- return {
- sourceEdge: 'start',
- destinationEdge: 'end'
- };
- }
-
- return {
- sourceEdge: 'start',
- destinationEdge: 'start'
- };
- }(),
- sourceEdge = _ref2.sourceEdge,
- destinationEdge = _ref2.destinationEdge;
-
- var source = draggable.client.borderBox;
- var targetCenter = moveToEdge({
- source: source,
- sourceEdge: sourceEdge,
- destination: movingRelativeTo,
- destinationEdge: destinationEdge,
- destinationAxis: axis
- });
- return targetCenter;
- });
-
- var getScrollDisplacement = function getScrollDisplacement(droppable, viewport) {
- return withDroppableDisplacement(droppable, viewport.scroll.diff.displacement);
- };
-
- var drop$1 = (function (_ref) {
- var getState = _ref.getState,
- dispatch = _ref.dispatch;
- return function (next) {
- return function (action) {
- if (action.type !== 'DROP') {
- next(action);
- return;
- }
-
- var state = getState();
- var reason = action.payload.reason;
-
- if (state.phase === 'COLLECTING') {
- dispatch(dropPending({
- reason: reason
- }));
- return;
- }
-
- if (state.phase === 'PREPARING') {
- dispatch(clean());
- return;
- }
-
- if (state.phase === 'IDLE') {
- return;
- }
-
- var isWaitingForDrop = state.phase === 'DROP_PENDING' && state.isWaiting;
- !!isWaitingForDrop ? process.env.NODE_ENV !== "production" ? invariant(false, 'A DROP action occurred while DROP_PENDING and still waiting') : invariant(false) : void 0;
- !(state.phase === 'DRAGGING' || state.phase === 'DROP_PENDING') ? process.env.NODE_ENV !== "production" ? invariant(false, "Cannot drop in phase: " + state.phase) : invariant(false) : void 0;
- var critical = state.critical;
- var dimensions = state.dimensions;
- var impact = reason === 'DROP' ? state.impact : noImpact;
- var home = dimensions.droppables[state.critical.droppable.id];
- var draggable = dimensions.draggables[state.critical.draggable.id];
- var droppable = impact && impact.destination ? dimensions.droppables[impact.destination.droppableId] : null;
- var source = {
- index: critical.draggable.index,
- droppableId: critical.droppable.id
- };
- var destination = reason === 'DROP' ? impact.destination : null;
- var result = {
- draggableId: draggable.descriptor.id,
- type: home.descriptor.type,
- source: source,
- destination: destination,
- reason: reason
- };
-
- var clientOffset = function () {
- if (reason === 'CANCEL') {
- return origin;
- }
-
- var newBorderBoxClientCenter = getNewHomeClientBorderBoxCenter({
- movement: impact.movement,
- draggable: draggable,
- draggables: dimensions.draggables,
- destination: droppable
- });
- return subtract(newBorderBoxClientCenter, draggable.client.borderBox.center);
- }();
-
- var newHomeOffset = add(clientOffset, getScrollDisplacement(droppable || home, state.viewport));
- var isAnimationRequired = !isEqual(state.current.client.offset, newHomeOffset);
- var pending = {
- newHomeOffset: newHomeOffset,
- result: result,
- impact: impact
- };
-
- if (isAnimationRequired) {
- dispatch(animateDrop(pending));
- return;
- }
-
- dispatch(completeDrop(result));
- };
- };
- });
-
- var onDragStart = function onDragStart(start) {
- return "\n You have lifted an item in position " + (start.source.index + 1) + ".\n Use the arrow keys to move, space bar to drop, and escape to cancel.\n";
- };
-
- var onDragUpdate = function onDragUpdate(update) {
- if (!update.destination) {
- return 'You are currently not dragging over a droppable area';
- }
-
- if (update.source.droppableId === update.destination.droppableId) {
- return "You have moved the item to position " + (update.destination.index + 1);
- }
-
- return "\n You have moved the item from list " + update.source.droppableId + " in position " + (update.source.index + 1) + "\n to list " + update.destination.droppableId + " in position " + (update.destination.index + 1) + "\n ";
- };
-
- var onDragEnd = function onDragEnd(result) {
- if (result.reason === 'CANCEL') {
- return "\n Movement cancelled.\n The item has returned to its starting position of " + (result.source.index + 1) + "\n ";
- }
-
- if (!result.destination) {
- return "\n The item has been dropped while not over a droppable location.\n The item has returned to its starting position of " + (result.source.index + 1) + "\n ";
- }
-
- if (result.source.droppableId === result.destination.droppableId) {
- if (result.source.index === result.destination.index) {
- return "\n You have dropped the item.\n It has been dropped on its starting position of " + (result.source.index + 1) + "\n ";
- }
-
- return "\n You have dropped the item.\n It has moved from position " + (result.source.index + 1) + " to " + (result.destination.index + 1) + "\n ";
- }
-
- return "\n You have dropped the item.\n It has moved from position " + (result.source.index + 1) + " in list " + result.source.droppableId + "\n to position " + (result.destination.index + 1) + " in list " + result.destination.droppableId + "\n ";
- };
-
- var preset = {
- onDragStart: onDragStart,
- onDragUpdate: onDragUpdate,
- onDragEnd: onDragEnd
- };
-
- var records = {};
- var flag = '__react-beautiful-dnd-debug-timings-hook__';
-
- var isTimingsEnabled = function isTimingsEnabled() {
- return Boolean(window[flag]);
- };
-
- var start = function start(key) {
- if (process.env.NODE_ENV !== 'production') {
- if (!isTimingsEnabled()) {
- return;
- }
-
- var now = performance.now();
- records[key] = now;
- }
- };
- var finish = function finish(key) {
- if (process.env.NODE_ENV !== 'production') {
- if (!isTimingsEnabled()) {
- return;
- }
-
- var now = performance.now();
- var previous = records[key];
- !previous ? process.env.NODE_ENV !== "production" ? invariant(false, 'cannot finish timing as no previous time found') : invariant(false) : void 0;
- var result = now - previous;
- var rounded = result.toFixed(2);
-
- var style = function () {
- if (result < 12) {
- return {
- textColor: 'green',
- symbol: '✅'
- };
- }
-
- if (result < 40) {
- return {
- textColor: 'orange',
- symbol: '⚠️'
- };
- }
-
- return {
- textColor: 'red',
- symbol: '❌'
- };
- }();
-
- console.log(style.symbol + " %cTiming %c" + rounded + " %cms %c" + key, 'color: blue; font-weight: bold; ', "color: " + style.textColor + "; font-size: 1.1em;", 'color: grey;', 'color: purple; font-weight: bold;');
- }
- };
-
- var withTimings = function withTimings(key, fn) {
- start(key);
- fn();
- finish(key);
- };
-
- var areLocationsEqual = function areLocationsEqual(first, second) {
- if (first == null && second == null) {
- return true;
- }
-
- if (first == null || second == null) {
- return false;
- }
-
- return first.droppableId === second.droppableId && first.index === second.index;
- };
-
- var isCriticalEqual = function isCriticalEqual(first, second) {
- if (first === second) {
- return true;
- }
-
- var isDraggableEqual = first.draggable.id === second.draggable.id && first.draggable.droppableId === second.draggable.droppableId && first.draggable.type === second.draggable.type && first.draggable.index === second.draggable.index;
- var isDroppableEqual = first.droppable.id === second.droppable.id && first.droppable.type === second.droppable.type;
- return isDraggableEqual && isDroppableEqual;
- };
-
- var getExpiringAnnounce = function getExpiringAnnounce(announce) {
- var wasCalled = false;
- var isExpired = false;
- setTimeout(function () {
- isExpired = true;
- });
-
- var result = function result(message) {
- if (wasCalled) {
- if (process.env.NODE_ENV !== 'production') {
- console.warn('Announcement already made. Not making a second announcement');
- }
-
- return;
- }
-
- if (isExpired) {
- if (process.env.NODE_ENV !== 'production') {
- console.warn("\n Announcements cannot be made asynchronously.\n Default message has already been announced.\n ");
- }
-
- return;
- }
-
- wasCalled = true;
- announce(message);
- };
-
- result.wasCalled = function () {
- return wasCalled;
- };
-
- return result;
- };
-
- var getDragStart = function getDragStart(critical) {
- return {
- draggableId: critical.draggable.id,
- type: critical.droppable.type,
- source: {
- droppableId: critical.droppable.id,
- index: critical.draggable.index
- }
- };
- };
-
- var hooks = (function (getHooks, announce) {
- var execute = function execute(hook, data, getDefaultMessage) {
- if (!hook) {
- announce(getDefaultMessage(data));
- return;
- }
-
- var willExpire = getExpiringAnnounce(announce);
- var provided = {
- announce: willExpire
- };
- hook(data, provided);
-
- if (!willExpire.wasCalled()) {
- announce(getDefaultMessage(data));
- }
- };
-
- var publisher = function () {
- var lastLocation = null;
- var lastCritical = null;
- var _isDragStartPublished = false;
-
- var beforeStart = function beforeStart(critical) {
- !!_isDragStartPublished ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot fire onBeforeDragStart as a drag start has already been published') : invariant(false) : void 0;
- withTimings('onBeforeDragStart', function () {
- var fn = getHooks().onBeforeDragStart;
-
- if (fn) {
- fn(getDragStart(critical));
- }
- });
- };
-
- var start$$1 = function start$$1(critical) {
- !!_isDragStartPublished ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot fire onBeforeDragStart as a drag start has already been published') : invariant(false) : void 0;
- var data = getDragStart(critical);
- lastCritical = critical;
- lastLocation = data.source;
- _isDragStartPublished = true;
- withTimings('onDragStart', function () {
- return execute(getHooks().onDragStart, data, preset.onDragStart);
- });
- };
-
- var move = function move(critical, location) {
- !(_isDragStartPublished && lastCritical) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot fire onDragMove when onDragStart has not been called') : invariant(false) : void 0;
- var hasCriticalChanged = !isCriticalEqual(critical, lastCritical);
-
- if (hasCriticalChanged) {
- lastCritical = critical;
- }
-
- var hasLocationChanged = !areLocationsEqual(lastLocation, location);
-
- if (hasLocationChanged) {
- lastLocation = location;
- }
-
- if (!hasCriticalChanged && !hasLocationChanged) {
- return;
- }
-
- var data = _extends({}, getDragStart(critical), {
- destination: location
- });
-
- withTimings('onDragUpdate', function () {
- return execute(getHooks().onDragUpdate, data, preset.onDragUpdate);
- });
- };
-
- var drop = function drop(result) {
- !_isDragStartPublished ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot fire onDragEnd when there is no matching onDragStart') : invariant(false) : void 0;
- _isDragStartPublished = false;
- lastLocation = null;
- lastCritical = null;
- withTimings('onDragEnd', function () {
- return execute(getHooks().onDragEnd, result, preset.onDragEnd);
- });
- };
-
- var abort = function abort() {
- !(_isDragStartPublished && lastCritical) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot cancel when onDragStart not fired') : invariant(false) : void 0;
-
- var result = _extends({}, getDragStart(lastCritical), {
- destination: null,
- reason: 'CANCEL'
- });
-
- drop(result);
- };
-
- return {
- beforeStart: beforeStart,
- start: start$$1,
- move: move,
- drop: drop,
- abort: abort,
- isDragStartPublished: function isDragStartPublished() {
- return _isDragStartPublished;
- }
- };
- }();
-
- return function (store) {
- return function (next) {
- return function (action) {
- if (action.type === 'INITIAL_PUBLISH') {
- var critical = action.payload.critical;
- publisher.beforeStart(critical);
- next(action);
- publisher.start(critical);
- return;
- }
-
- next(action);
-
- if (action.type === 'DROP_COMPLETE') {
- var result = action.payload;
- publisher.drop(result);
- return;
- }
-
- if (action.type === 'CLEAN') {
- if (publisher.isDragStartPublished()) {
- publisher.abort();
- }
-
- return;
- }
-
- if (!publisher.isDragStartPublished()) {
- return;
- }
-
- var state = store.getState();
-
- if (state.phase === 'DRAGGING') {
- publisher.move(state.critical, state.impact.destination);
- }
- };
- };
- };
- });
-
- var dropAnimationFinish = (function (store) {
- return function (next) {
- return function (action) {
- if (action.type !== 'DROP_ANIMATION_FINISHED') {
- next(action);
- return;
- }
-
- var state = store.getState();
- !(state.phase === 'DROP_ANIMATING') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot finish a drop animating when no drop is occurring') : invariant(false) : void 0;
- store.dispatch(completeDrop(state.pending.result));
- };
- };
- });
-
- var dimensionMarshalStopper = (function (getMarshal) {
- return function () {
- return function (next) {
- return function (action) {
- if (action.type === 'DROP_COMPLETE' || action.type === 'CLEAN' || action.type === 'DROP_ANIMATE') {
- var marshal = getMarshal();
- marshal.stopPublishing();
- }
-
- next(action);
- };
- };
- };
- });
-
- var shouldCancel = function shouldCancel(action) {
- return action.type === 'CANCEL' || action.type === 'DROP_ANIMATE' || action.type === 'DROP' || action.type === 'DROP_COMPLETE' || action.type === 'COLLECTION_STARTING';
- };
-
- var autoScroll = (function (getScroller) {
- return function (store) {
- return function (next) {
- return function (action) {
- if (shouldCancel(action)) {
- getScroller().cancel();
- next(action);
- return;
- }
-
- next(action);
- var state = store.getState();
-
- if (state.phase !== 'DRAGGING') {
- return;
- }
-
- if (state.autoScrollMode === 'FLUID') {
- getScroller().fluidScroll(state);
- return;
- }
-
- if (!state.scrollJumpRequest) {
- return;
- }
-
- getScroller().jumpScroll(state);
- };
- };
- };
- });
-
- var shouldCheckOnAction = function shouldCheckOnAction(action) {
- return action.type === 'MOVE' || action.type === 'MOVE_UP' || action.type === 'MOVE_RIGHT' || action.type === 'MOVE_DOWN' || action.type === 'MOVE_LEFT' || action.type === 'MOVE_BY_WINDOW_SCROLL';
- };
-
- var hasDroppableOverChanged = function hasDroppableOverChanged(previous, current) {
- if (!previous) {
- return Boolean(current);
- }
-
- if (!current) {
- return Boolean(previous);
- }
-
- return previous.droppableId !== current.droppableId;
- };
-
- var getNewMaxScroll = function getNewMaxScroll(previous, current, action) {
- if (!shouldCheckOnAction(action)) {
- return null;
- }
-
- if (!isMovementAllowed(previous) || !isMovementAllowed(current)) {
- return null;
- }
-
- if (!hasDroppableOverChanged(previous.impact.destination, current.impact.destination)) {
- return null;
- }
-
- var viewport = current.viewport;
- var doc = document.documentElement;
- !doc ? process.env.NODE_ENV !== "production" ? invariant(false, 'Could not find document.documentElement') : invariant(false) : void 0;
- var maxScroll = getMaxScroll({
- scrollHeight: doc.scrollHeight,
- scrollWidth: doc.scrollWidth,
- width: viewport.frame.width,
- height: viewport.frame.height
- });
-
- if (isEqual(maxScroll, viewport.scroll.max)) {
- return null;
- }
-
- return maxScroll;
- };
-
- var maxScrollUpdater = (function (store) {
- return function (next) {
- return function (action) {
- var previous = store.getState();
- next(action);
- var current = store.getState();
- var maxScroll = getNewMaxScroll(previous, current, action);
-
- if (maxScroll) {
- next(updateViewportMaxScroll(maxScroll));
- }
- };
- };
- });
-
- var composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : redux.compose;
- var createStore = (function (_ref) {
- var getDimensionMarshal = _ref.getDimensionMarshal,
- styleMarshal = _ref.styleMarshal,
- getHooks = _ref.getHooks,
- announce = _ref.announce,
- getScroller = _ref.getScroller;
- return redux.createStore(reducer, composeEnhancers(redux.applyMiddleware(style(styleMarshal), dimensionMarshalStopper(getDimensionMarshal), lift$1(getDimensionMarshal), drop$1, dropAnimationFinish, maxScrollUpdater, autoScroll(getScroller), hooks(getHooks, announce))));
- });
-
- var getEmptyMap = function getEmptyMap() {
- return {
- draggables: {},
- droppables: {}
- };
- };
-
- var timingKey = 'Publish collection from DOM';
- var createPublisher = (function (_ref) {
- var getProvided = _ref.getProvided,
- callbacks = _ref.callbacks;
-
- var advancedUsageWarning = function () {
- if (process.env.NODE_ENV === 'production') {
- return function () {};
- }
-
- var hasAnnounced = false;
- return function () {
- if (hasAnnounced) {
- return;
- }
-
- hasAnnounced = true;
-
- if (process.env.NODE_ENV === 'production') {
- return;
- }
-
- console.warn("\n Advanced usage warning: you are adding or removing a dimension during a drag\n This an advanced feature used to support dynamic interactions such as lazy loading lists.\n\n Keep in mind the following restrictions:\n\n - Draggable's can only be added to Droppable's that are scroll containers\n - Adding a Droppable cannot impact the placement of other Droppables\n (it cannot push a Droppable on the page)\n\n (This warning will be stripped in production builds)\n ".trim());
- };
- }();
-
- var additions = getEmptyMap();
- var removals = getEmptyMap();
- var frameId = null;
-
- var reset = function reset() {
- additions = getEmptyMap();
- removals = getEmptyMap();
- };
-
- var collect = function collect() {
- advancedUsageWarning();
-
- if (frameId) {
- return;
- }
-
- frameId = requestAnimationFrame(function () {
- frameId = null;
- callbacks.collectionStarting();
- start(timingKey);
-
- var _getProvided = getProvided(),
- entries = _getProvided.entries,
- collection = _getProvided.collection;
-
- var windowScroll = collection.initialWindowScroll;
-
- var draggables = _Object$keys(additions.draggables).map(function (id) {
- return entries.draggables[id].getDimension(windowScroll);
- });
-
- var droppables = _Object$keys(additions.droppables).map(function (id) {
- return entries.droppables[id].callbacks.getDimensionAndWatchScroll(windowScroll, collection.scrollOptions);
- });
-
- var result = {
- additions: {
- draggables: draggables,
- droppables: droppables
- },
- removals: {
- draggables: _Object$keys(removals.draggables),
- droppables: _Object$keys(removals.droppables)
- }
- };
- reset();
- finish(timingKey);
- callbacks.publish(result);
- });
- };
-
- var addDraggable = function addDraggable(id) {
- additions.draggables[id] = true;
-
- if (removals.draggables[id]) {
- delete removals.draggables[id];
- }
-
- collect();
- };
-
- var removeDraggable = function removeDraggable(id) {
- removals.draggables[id] = true;
-
- if (additions.draggables[id]) {
- delete additions.draggables[id];
- }
-
- collect();
- };
-
- var addDroppable = function addDroppable(id) {
- additions.droppables[id] = true;
-
- if (removals.droppables[id]) {
- delete removals.droppables[id];
- }
-
- collect();
- };
-
- var removeDroppable = function removeDroppable(id) {
- removals.droppables[id] = true;
-
- if (additions.droppables[id]) {
- delete additions.droppables[id];
- }
-
- collect();
- };
-
- var stop = function stop() {
- if (!frameId) {
- return;
- }
-
- cancelAnimationFrame(frameId);
- frameId = null;
- reset();
- };
-
- return {
- addDraggable: addDraggable,
- removeDraggable: removeDraggable,
- addDroppable: addDroppable,
- removeDroppable: removeDroppable,
- stop: stop
- };
- });
-
- var createDimensionMarshal = (function (callbacks) {
- var entries = {
- droppables: {},
- draggables: {}
- };
- var collection = null;
- var publisher = createPublisher({
- callbacks: {
- publish: callbacks.publish,
- collectionStarting: callbacks.collectionStarting
- },
- getProvided: function getProvided() {
- !collection ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot get scroll options when there is no collection') : invariant(false) : void 0;
- return {
- entries: entries,
- collection: collection
- };
- }
- });
-
- var registerDraggable = function registerDraggable(descriptor, getDimension) {
- var entry = {
- descriptor: descriptor,
- getDimension: getDimension
- };
- entries.draggables[descriptor.id] = entry;
-
- if (!collection) {
- return;
- }
-
- if (collection.critical.draggable.type !== descriptor.type) {
- return;
- }
-
- publisher.addDraggable(descriptor.id);
- };
-
- var updateDraggable = function updateDraggable(previous, descriptor, getDimension) {
- !entries.draggables[previous.id] ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot update draggable registration as no previous registration was found') : invariant(false) : void 0;
- delete entries.draggables[previous.id];
- var entry = {
- descriptor: descriptor,
- getDimension: getDimension
- };
- entries.draggables[descriptor.id] = entry;
- };
-
- var unregisterDraggable = function unregisterDraggable(descriptor) {
- var entry = entries.draggables[descriptor.id];
- !entry ? process.env.NODE_ENV !== "production" ? invariant(false, "Cannot unregister Draggable with id " + descriptor.id + " as it is not registered") : invariant(false) : void 0;
-
- if (entry.descriptor !== descriptor) {
- return;
- }
-
- delete entries.draggables[descriptor.id];
-
- if (!collection) {
- return;
- }
-
- !(collection.critical.draggable.id !== descriptor.id) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot remove the dragging item during a drag') : invariant(false) : void 0;
-
- if (descriptor.type !== collection.critical.draggable.type) {
- return;
- }
-
- publisher.removeDraggable(descriptor.id);
- };
-
- var registerDroppable = function registerDroppable(descriptor, droppableCallbacks) {
- var id = descriptor.id;
- entries.droppables[id] = {
- descriptor: descriptor,
- callbacks: droppableCallbacks
- };
-
- if (!collection) {
- return;
- }
-
- if (descriptor.type !== collection.critical.droppable.type) {
- return;
- }
-
- publisher.addDroppable(id);
- };
-
- var updateDroppable = function updateDroppable(previous, descriptor, droppableCallbacks) {
- !entries.droppables[previous.id] ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot update droppable registration as no previous registration was found') : invariant(false) : void 0;
- delete entries.droppables[previous.id];
- var entry = {
- descriptor: descriptor,
- callbacks: droppableCallbacks
- };
- entries.droppables[descriptor.id] = entry;
-
- if (collection) {
- process.env.NODE_ENV !== "production" ? invariant(false, 'You are not able to update the id or type of a droppable during a drag') : invariant(false);
- }
- };
-
- var unregisterDroppable = function unregisterDroppable(descriptor) {
- var entry = entries.droppables[descriptor.id];
- !entry ? process.env.NODE_ENV !== "production" ? invariant(false, "Cannot unregister Droppable with id " + descriptor.id + " as as it is not registered") : invariant(false) : void 0;
-
- if (entry.descriptor !== descriptor) {
- return;
- }
-
- delete entries.droppables[descriptor.id];
-
- if (!collection) {
- return;
- }
-
- !(collection.critical.droppable.id !== descriptor.id) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot remove the home Droppable during a drag') : invariant(false) : void 0;
-
- if (collection.critical.droppable.type !== descriptor.type) {
- return;
- }
-
- publisher.removeDroppable(descriptor.id);
- };
-
- var updateDroppableIsEnabled = function updateDroppableIsEnabled(id, isEnabled) {
- !entries.droppables[id] ? process.env.NODE_ENV !== "production" ? invariant(false, "Cannot update the scroll on Droppable " + id + " as it is not registered") : invariant(false) : void 0;
-
- if (!collection) {
- return;
- }
-
- callbacks.updateDroppableIsEnabled({
- id: id,
- isEnabled: isEnabled
- });
- };
-
- var updateDroppableScroll = function updateDroppableScroll(id, newScroll) {
- !entries.droppables[id] ? process.env.NODE_ENV !== "production" ? invariant(false, "Cannot update the scroll on Droppable " + id + " as it is not registered") : invariant(false) : void 0;
-
- if (!collection) {
- return;
- }
-
- callbacks.updateDroppableScroll({
- id: id,
- offset: newScroll
- });
- };
-
- var scrollDroppable = function scrollDroppable(id, change) {
- var entry = entries.droppables[id];
- !entry ? process.env.NODE_ENV !== "production" ? invariant(false, "Cannot scroll Droppable " + id + " as it is not registered") : invariant(false) : void 0;
-
- if (!collection) {
- return;
- }
-
- entry.callbacks.scroll(change);
- };
-
- var getInitialPublish = function getInitialPublish(args) {
- var critical = args.critical,
- scrollOptions = args.scrollOptions,
- windowScroll = args.initialWindowScroll;
- var timingKey = 'Initial collection from DOM';
- start(timingKey);
- var home = critical.droppable;
-
- var droppables = _Object$keys(entries.droppables).map(function (id) {
- return entries.droppables[id];
- }).filter(function (entry) {
- return entry.descriptor.type === home.type;
- }).map(function (entry) {
- return entry.callbacks.getDimensionAndWatchScroll(windowScroll, scrollOptions);
- }).reduce(function (previous, dimension) {
- previous[dimension.descriptor.id] = dimension;
- return previous;
- }, {});
-
- var draggables = _Object$keys(entries.draggables).map(function (id) {
- return entries.draggables[id];
- }).filter(function (entry) {
- return entry.descriptor.type === critical.draggable.type;
- }).map(function (entry) {
- return entry.getDimension(windowScroll);
- }).reduce(function (previous, dimension) {
- previous[dimension.descriptor.id] = dimension;
- return previous;
- }, {});
-
- finish(timingKey);
- var dimensions = {
- draggables: draggables,
- droppables: droppables
- };
- var result = {
- dimensions: dimensions,
- critical: critical
- };
- return result;
- };
-
- var stopPublishing = function stopPublishing() {
- if (!collection) {
- return;
- }
-
- publisher.stop();
- var home = collection.critical.droppable;
-
- _Object$keys(entries.droppables).filter(function (id) {
- return entries.droppables[id].descriptor.type === home.type;
- }).forEach(function (id) {
- return entries.droppables[id].callbacks.unwatchScroll();
- });
-
- collection = null;
- };
-
- var startPublishing = function startPublishing(request, windowScroll) {
- !!collection ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot start capturing critical dimensions as there is already a collection') : invariant(false) : void 0;
- var entry = entries.draggables[request.draggableId];
- !entry ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot find critical draggable entry') : invariant(false) : void 0;
- var home = entries.droppables[entry.descriptor.droppableId];
- !home ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot find critical droppable entry') : invariant(false) : void 0;
- var critical = {
- draggable: entry.descriptor,
- droppable: home.descriptor
- };
- collection = {
- scrollOptions: request.scrollOptions,
- critical: critical,
- initialWindowScroll: windowScroll
- };
- return getInitialPublish(collection);
- };
-
- var marshal = {
- registerDraggable: registerDraggable,
- updateDraggable: updateDraggable,
- unregisterDraggable: unregisterDraggable,
- registerDroppable: registerDroppable,
- updateDroppable: updateDroppable,
- unregisterDroppable: unregisterDroppable,
- updateDroppableIsEnabled: updateDroppableIsEnabled,
- scrollDroppable: scrollDroppable,
- updateDroppableScroll: updateDroppableScroll,
- startPublishing: startPublishing,
- stopPublishing: stopPublishing
- };
- return marshal;
- });
-
- var physics = function () {
- var base = {
- stiffness: 1000,
- damping: 60,
- precision: 0.99
- };
-
- var standard = _extends({}, base);
-
- var fast = _extends({}, base, {
- stiffness: base.stiffness * 2
- });
-
- return {
- standard: standard,
- fast: fast
- };
- }();
- var css = {
- outOfTheWay: 'transform 0.2s cubic-bezier(0.2, 0, 0, 1)'
- };
-
- var prefix = 'data-react-beautiful-dnd';
- var dragHandle = prefix + "-drag-handle";
- var draggable = prefix + "-draggable";
- var droppable = prefix + "-droppable";
-
- var getStyles = (function (styleContext) {
- var dragHandleSelector = "[" + dragHandle + "=\"" + styleContext + "\"]";
- var draggableSelector = "[" + draggable + "=\"" + styleContext + "\"]";
- var droppableSelector = "[" + droppable + "=\"" + styleContext + "\"]";
- var dragHandleStyles = {
- base: "\n " + dragHandleSelector + " {\n -webkit-touch-callout: none;\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n touch-action: manipulation;\n }\n ",
- grabCursor: "\n " + dragHandleSelector + " {\n cursor: -webkit-grab;\n cursor: grab;\n }\n ",
- blockPointerEvents: "\n " + dragHandleSelector + " {\n pointer-events: none;\n }\n "
- };
- var draggableStyles = {
- animateMovement: "\n " + draggableSelector + " {\n transition: " + css.outOfTheWay + ";\n }\n "
- };
- var droppableStyles = {
- base: "\n " + droppableSelector + " {\n overflow-anchor: none;\n }\n "
- };
- var bodyStyles = {
- whileActiveDragging: "\n body {\n cursor: grabbing;\n cursor: -webkit-grabbing;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n }\n "
- };
- var base = [dragHandleStyles.base, droppableStyles.base];
- var resting = base.concat([dragHandleStyles.grabCursor]);
- var collecting = base.concat([dragHandleStyles.blockPointerEvents, bodyStyles.whileActiveDragging]);
- var dragging = collecting.concat([draggableStyles.animateMovement]);
- var dropAnimating = base.concat([dragHandleStyles.grabCursor, draggableStyles.animateMovement]);
- var userCancel = base.concat([draggableStyles.animateMovement]);
- return {
- resting: resting.join(''),
- dragging: dragging.join(''),
- dropAnimating: dropAnimating.join(''),
- collecting: collecting.join(''),
- userCancel: userCancel.join('')
- };
- });
-
- var count = 0;
- var resetStyleContext = function resetStyleContext() {
- count = 0;
- };
-
- var getHead = function getHead() {
- var head = document.querySelector('head');
- !head ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot find the head to append a style to') : invariant(false) : void 0;
- return head;
- };
-
- var createStyleMarshal = (function () {
- var context = "" + count++;
- var styles = getStyles(context);
- var el = null;
- var setStyle = memoizeOne(function (proposed) {
- !el ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot set style of style tag if not mounted') : invariant(false) : void 0;
- el.innerHTML = proposed;
- });
-
- var mount = function mount() {
- !!el ? process.env.NODE_ENV !== "production" ? invariant(false, 'Style marshal already mounted') : invariant(false) : void 0;
- el = document.createElement('style');
- el.type = 'text/css';
- el.setAttribute(prefix, context);
- getHead().appendChild(el);
- setStyle(styles.resting);
- };
-
- var collecting = function collecting() {
- return setStyle(styles.collecting);
- };
-
- var dragging = function dragging() {
- return setStyle(styles.dragging);
- };
-
- var dropping = function dropping(reason) {
- if (reason === 'DROP') {
- setStyle(styles.dropAnimating);
- return;
- }
-
- setStyle(styles.userCancel);
- };
-
- var resting = function resting() {
- return setStyle(styles.resting);
- };
-
- var unmount = function unmount() {
- !el ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot unmount style marshal as it is already unmounted') : invariant(false) : void 0;
- getHead().removeChild(el);
- el = null;
- };
-
- var marshal = {
- collecting: collecting,
- dragging: dragging,
- dropping: dropping,
- resting: resting,
- styleContext: context,
- mount: mount,
- unmount: unmount
- };
- return marshal;
- });
-
- var canStartDrag = (function (state, id) {
- if (state.phase === 'IDLE') {
- return true;
- }
-
- if (state.phase !== 'DROP_ANIMATING') {
- return false;
- }
-
- if (state.pending.result.draggableId === id) {
- return false;
- }
-
- return state.pending.result.reason === 'DROP';
- });
-
- var scrollWindow = (function (change) {
- window.scrollBy(change.x, change.y);
- });
-
- var count$1 = 0;
- var visuallyHidden = {
- position: 'absolute',
- width: '1px',
- height: '1px',
- margin: '-1px',
- border: '0',
- padding: '0',
- overflow: 'hidden',
- clip: 'rect(0 0 0 0)',
- 'clip-path': 'inset(100%)'
- };
-
- var getBody = function getBody() {
- !document.body ? process.env.NODE_ENV !== "production" ? invariant(false, 'Announcer cannot find document.body') : invariant(false) : void 0;
- return document.body;
- };
-
- var createAnnouncer = (function () {
- var id = "react-beautiful-dnd-announcement-" + count$1++;
- var el = null;
-
- var announce = function announce(message) {
- !el ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot announce to unmounted node') : invariant(false) : void 0;
- el.textContent = message;
- };
-
- var mount = function mount() {
- !!el ? process.env.NODE_ENV !== "production" ? invariant(false, 'Announcer already mounted') : invariant(false) : void 0;
- el = document.createElement('div');
- el.id = id;
- el.setAttribute('aria-live', 'assertive');
- el.setAttribute('role', 'log');
- el.setAttribute('aria-atomic', 'true');
-
- _Object$assign(el.style, visuallyHidden);
-
- getBody().appendChild(el);
- };
-
- var unmount = function unmount() {
- !el ? process.env.NODE_ENV !== "production" ? invariant(false, 'Will not unmount annoucer as it is already unmounted') : invariant(false) : void 0;
- getBody().removeChild(el);
- el = null;
- };
-
- var announcer = {
- announce: announce,
- id: id,
- mount: mount,
- unmount: unmount
- };
- return announcer;
- });
-
- var getScrollableDroppables = memoizeOne(function (droppables) {
- return toDroppableList(droppables).filter(function (droppable) {
- if (!droppable.isEnabled) {
- return false;
- }
-
- if (!droppable.viewport.closestScrollable) {
- return false;
- }
-
- return true;
- });
- });
-
- var getScrollableDroppableOver = function getScrollableDroppableOver(target, droppables) {
- var maybe = getScrollableDroppables(droppables).find(function (droppable) {
- !droppable.viewport.closestScrollable ? process.env.NODE_ENV !== "production" ? invariant(false, 'Invalid result') : invariant(false) : void 0;
- return isPositionInFrame(droppable.viewport.closestScrollable.framePageMarginBox)(target);
- });
- return maybe;
- };
-
- var getBestScrollableDroppable = (function (_ref) {
- var center = _ref.center,
- destination = _ref.destination,
- droppables = _ref.droppables;
-
- if (destination) {
- var _dimension = droppables[destination.droppableId];
-
- if (!_dimension.viewport.closestScrollable) {
- return null;
- }
-
- return _dimension;
- }
-
- var dimension = getScrollableDroppableOver(center, droppables);
- return dimension;
- });
-
- var smallestSigned = apply(function (value) {
- if (value === 0) {
- return 0;
- }
-
- return value > 0 ? 1 : -1;
- });
- var getOverlap = function () {
- var getRemainder = function getRemainder(target, max) {
- if (target < 0) {
- return target;
- }
-
- if (target > max) {
- return target - max;
- }
-
- return 0;
- };
-
- return function (_ref) {
- var current = _ref.current,
- max = _ref.max,
- change = _ref.change;
- var targetScroll = add(current, change);
- var overlap = {
- x: getRemainder(targetScroll.x, max.x),
- y: getRemainder(targetScroll.y, max.y)
- };
-
- if (isEqual(overlap, origin)) {
- return null;
- }
-
- return overlap;
- };
- }();
- var canPartiallyScroll = function canPartiallyScroll(_ref2) {
- var rawMax = _ref2.max,
- current = _ref2.current,
- change = _ref2.change;
- var max = {
- x: Math.max(current.x, rawMax.x),
- y: Math.max(current.y, rawMax.y)
- };
- var smallestChange = smallestSigned(change);
- var overlap = getOverlap({
- max: max,
- current: current,
- change: smallestChange
- });
-
- if (!overlap) {
- return true;
- }
-
- if (smallestChange.x !== 0 && overlap.x === 0) {
- return true;
- }
-
- if (smallestChange.y !== 0 && overlap.y === 0) {
- return true;
- }
-
- return false;
- };
- var canScrollWindow = function canScrollWindow(viewport, change) {
- return canPartiallyScroll({
- current: viewport.scroll.current,
- max: viewport.scroll.max,
- change: change
- });
- };
- var getWindowOverlap = function getWindowOverlap(viewport, change) {
- if (!canScrollWindow(viewport, change)) {
- return null;
- }
-
- var max = viewport.scroll.max;
- var current = viewport.scroll.current;
- return getOverlap({
- current: current,
- max: max,
- change: change
- });
- };
- var canScrollDroppable = function canScrollDroppable(droppable, change) {
- var closest$$1 = droppable.viewport.closestScrollable;
-
- if (!closest$$1) {
- return false;
- }
-
- return canPartiallyScroll({
- current: closest$$1.scroll.current,
- max: closest$$1.scroll.max,
- change: change
- });
- };
- var getDroppableOverlap = function getDroppableOverlap(droppable, change) {
- var closest$$1 = droppable.viewport.closestScrollable;
-
- if (!closest$$1) {
- return null;
- }
-
- if (!canScrollDroppable(droppable, change)) {
- return null;
- }
-
- return getOverlap({
- current: closest$$1.scroll.current,
- max: closest$$1.scroll.max,
- change: change
- });
- };
-
- var config = {
- startFrom: 0.25,
- maxSpeedAt: 0.05,
- maxScrollSpeed: 28,
- ease: function ease(percentage) {
- return Math.pow(percentage, 2);
- }
- };
- var clean$1 = apply(function (value) {
- return value === 0 ? 0 : value;
- });
- var getPixelThresholds = function getPixelThresholds(container, axis) {
- var startFrom = container[axis.size] * config.startFrom;
- var maxSpeedAt = container[axis.size] * config.maxSpeedAt;
- var accelerationPlane = startFrom - maxSpeedAt;
- var thresholds = {
- startFrom: startFrom,
- maxSpeedAt: maxSpeedAt,
- accelerationPlane: accelerationPlane
- };
- return thresholds;
- };
-
- var getSpeed = function getSpeed(distance$$1, thresholds) {
- if (distance$$1 >= thresholds.startFrom) {
- return 0;
- }
-
- if (distance$$1 <= thresholds.maxSpeedAt) {
- return config.maxScrollSpeed;
- }
-
- var distancePastStart = thresholds.startFrom - distance$$1;
- var percentage = distancePastStart / thresholds.accelerationPlane;
- var transformed = config.ease(percentage);
- var speed = config.maxScrollSpeed * transformed;
- return speed;
- };
-
- var adjustForSizeLimits = function adjustForSizeLimits(_ref) {
- var container = _ref.container,
- subject = _ref.subject,
- proposedScroll = _ref.proposedScroll;
- var isTooBigVertically = subject.height > container.height;
- var isTooBigHorizontally = subject.width > container.width;
-
- if (!isTooBigHorizontally && !isTooBigVertically) {
- return proposedScroll;
- }
-
- if (isTooBigHorizontally && isTooBigVertically) {
- return null;
- }
-
- return {
- x: isTooBigHorizontally ? 0 : proposedScroll.x,
- y: isTooBigVertically ? 0 : proposedScroll.y
- };
- };
-
- var getRequiredScroll = function getRequiredScroll(_ref2) {
- var container = _ref2.container,
- subject = _ref2.subject,
- center = _ref2.center;
- var distance$$1 = {
- top: center.y - container.top,
- right: container.right - center.x,
- bottom: container.bottom - center.y,
- left: center.x - container.left
- };
-
- var y = function () {
- var thresholds = getPixelThresholds(container, vertical);
- var isCloserToBottom = distance$$1.bottom < distance$$1.top;
-
- if (isCloserToBottom) {
- return getSpeed(distance$$1.bottom, thresholds);
- }
-
- return -1 * getSpeed(distance$$1.top, thresholds);
- }();
-
- var x = function () {
- var thresholds = getPixelThresholds(container, horizontal);
- var isCloserToRight = distance$$1.right < distance$$1.left;
-
- if (isCloserToRight) {
- return getSpeed(distance$$1.right, thresholds);
- }
-
- return -1 * getSpeed(distance$$1.left, thresholds);
- }();
-
- var required = clean$1({
- x: x,
- y: y
- });
-
- if (isEqual(required, origin)) {
- return null;
- }
-
- var limited = adjustForSizeLimits({
- container: container,
- subject: subject,
- proposedScroll: required
- });
-
- if (!limited) {
- return null;
- }
-
- return isEqual(limited, origin) ? null : limited;
- };
-
- var withPlaceholder = function withPlaceholder(droppable, draggable) {
- var closest$$1 = droppable.viewport.closestScrollable;
-
- if (!closest$$1) {
- return null;
- }
-
- var isOverHome = droppable.descriptor.id === draggable.descriptor.droppableId;
- var max = closest$$1.scroll.max;
- var current = closest$$1.scroll.current;
-
- if (isOverHome) {
- return {
- max: max,
- current: current
- };
- }
-
- var spaceForPlaceholder = patch(droppable.axis.line, draggable.placeholder.client.borderBox[droppable.axis.size]);
- var newMax = add(max, spaceForPlaceholder);
- var newCurrent = {
- x: Math.min(current.x, newMax.x),
- y: Math.min(current.y, newMax.y)
- };
- return {
- max: newMax,
- current: newCurrent
- };
- };
-
- var createFluidScroller = (function (_ref3) {
- var scrollWindow = _ref3.scrollWindow,
- scrollDroppable = _ref3.scrollDroppable;
- var scheduleWindowScroll = rafSchd(scrollWindow);
- var scheduleDroppableScroll = rafSchd(scrollDroppable);
-
- var scroller = function scroller(state) {
- var center = state.current.page.borderBoxCenter;
- var draggable = state.dimensions.draggables[state.critical.draggable.id];
- var subject = draggable.page.marginBox;
- var viewport = state.viewport;
- var requiredWindowScroll = getRequiredScroll({
- container: viewport.frame,
- subject: subject,
- center: center
- });
-
- if (requiredWindowScroll && canScrollWindow(viewport, requiredWindowScroll)) {
- scheduleWindowScroll(requiredWindowScroll);
- return;
- }
-
- var droppable = getBestScrollableDroppable({
- center: center,
- destination: state.impact.destination,
- droppables: state.dimensions.droppables
- });
-
- if (!droppable) {
- return;
- }
-
- var closestScrollable = droppable.viewport.closestScrollable;
-
- if (!closestScrollable) {
- return;
- }
-
- var requiredFrameScroll = getRequiredScroll({
- container: closestScrollable.framePageMarginBox,
- subject: subject,
- center: center
- });
-
- if (!requiredFrameScroll) {
- return;
- }
-
- var result = withPlaceholder(droppable, draggable);
-
- if (!result) {
- return;
- }
-
- var closest$$1 = droppable.viewport.closestScrollable;
-
- if (!closest$$1) {
- return;
- }
-
- var canScrollDroppable$$1 = canPartiallyScroll({
- current: result.current,
- max: result.max,
- change: requiredFrameScroll
- });
-
- if (canScrollDroppable$$1) {
- scheduleDroppableScroll(droppable.descriptor.id, requiredFrameScroll);
- }
- };
-
- scroller.cancel = function () {
- scheduleWindowScroll.cancel();
- scheduleDroppableScroll.cancel();
- };
-
- return scroller;
- });
-
- var createJumpScroller = (function (_ref) {
- var move = _ref.move,
- scrollDroppable = _ref.scrollDroppable,
- scrollWindow = _ref.scrollWindow;
-
- var moveByOffset = function moveByOffset(state, offset) {
- var client = add(state.current.client.selection, offset);
- move({
- client: client,
- shouldAnimate: true
- });
- };
-
- var scrollDroppableAsMuchAsItCan = function scrollDroppableAsMuchAsItCan(droppable, change) {
- if (!canScrollDroppable(droppable, change)) {
- return change;
- }
-
- var overlap = getDroppableOverlap(droppable, change);
-
- if (!overlap) {
- scrollDroppable(droppable.descriptor.id, change);
- return null;
- }
-
- var whatTheDroppableCanScroll = subtract(change, overlap);
- scrollDroppable(droppable.descriptor.id, whatTheDroppableCanScroll);
- var remainder = subtract(change, whatTheDroppableCanScroll);
- return remainder;
- };
-
- var scrollWindowAsMuchAsItCan = function scrollWindowAsMuchAsItCan(viewport, change) {
- if (!canScrollWindow(viewport, change)) {
- return change;
- }
-
- var overlap = getWindowOverlap(viewport, change);
-
- if (!overlap) {
- scrollWindow(change);
- return null;
- }
-
- var whatTheWindowCanScroll = subtract(change, overlap);
- scrollWindow(whatTheWindowCanScroll);
- var remainder = subtract(change, whatTheWindowCanScroll);
- return remainder;
- };
-
- var jumpScroller = function jumpScroller(state) {
- var request = state.scrollJumpRequest;
-
- if (!request) {
- return;
- }
-
- var destination = state.impact.destination;
- !destination ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot perform a jump scroll when there is no destination') : invariant(false) : void 0;
- var droppableRemainder = scrollDroppableAsMuchAsItCan(state.dimensions.droppables[destination.droppableId], request);
-
- if (!droppableRemainder) {
- return;
- }
-
- var viewport = state.viewport;
- var windowRemainder = scrollWindowAsMuchAsItCan(viewport, droppableRemainder);
-
- if (!windowRemainder) {
- return;
- }
-
- moveByOffset(state, windowRemainder);
- };
-
- return jumpScroller;
- });
-
- var createAutoScroller = (function (_ref) {
- var scrollDroppable = _ref.scrollDroppable,
- scrollWindow = _ref.scrollWindow,
- move = _ref.move;
- var fluidScroll = createFluidScroller({
- scrollWindow: scrollWindow,
- scrollDroppable: scrollDroppable
- });
- var jumpScroll = createJumpScroller({
- move: move,
- scrollWindow: scrollWindow,
- scrollDroppable: scrollDroppable
- });
- var marshal = {
- cancel: fluidScroll.cancel,
- fluidScroll: fluidScroll,
- jumpScroll: jumpScroll
- };
- return marshal;
- });
-
- var prefix$1 = function prefix(key) {
- return "private-react-beautiful-dnd-key-do-not-use-" + key;
- };
-
- var storeKey = prefix$1('store');
- var droppableIdKey = prefix$1('droppable-id');
- var droppableTypeKey = prefix$1('droppable-type');
- var dimensionMarshalKey = prefix$1('dimension-marshal');
- var styleContextKey = prefix$1('style-context');
- var canLiftContextKey = prefix$1('can-lift');
-
- var _DragDropContext$chil;
- var resetServerContext = function resetServerContext() {
- resetStyleContext();
- };
-
- var printFatalDevError = function printFatalDevError(error) {
- if (process.env.NODE_ENV === 'production') {
- return;
- }
-
- console.warn("\n An error has occurred while a drag is occurring.\n Any existing drag will be cancelled.\n\n Raw error:\n ");
- console.error(error);
- };
-
- var DragDropContext = function (_React$Component) {
- _inheritsLoose(DragDropContext, _React$Component);
-
- function DragDropContext(props, context) {
- var _this;
-
- _this = _React$Component.call(this, props, context) || this;
- _this.store = void 0;
- _this.dimensionMarshal = void 0;
- _this.styleMarshal = void 0;
- _this.autoScroller = void 0;
- _this.announcer = void 0;
- _this.unsubscribe = void 0;
-
- _this.canLift = function (id) {
- return canStartDrag(_this.store.getState(), id);
- };
-
- _this.onFatalError = function (error) {
- printFatalDevError(error);
-
- var state = _this.store.getState();
-
- if (state.phase !== 'IDLE') {
- _this.store.dispatch(clean());
- }
- };
-
- _this.onWindowError = function (error) {
- return _this.onFatalError(error);
- };
-
- _this.announcer = createAnnouncer();
- _this.styleMarshal = createStyleMarshal();
- _this.store = createStore({
- getDimensionMarshal: function getDimensionMarshal() {
- return _this.dimensionMarshal;
- },
- styleMarshal: _this.styleMarshal,
- getHooks: function getHooks() {
- return {
- onBeforeDragStart: _this.props.onBeforeDragStart,
- onDragStart: _this.props.onDragStart,
- onDragEnd: _this.props.onDragEnd,
- onDragUpdate: _this.props.onDragUpdate
- };
- },
- announce: _this.announcer.announce,
- getScroller: function getScroller() {
- return _this.autoScroller;
- }
- });
- var callbacks = redux.bindActionCreators({
- collectionStarting: collectionStarting,
- publish: publish,
- updateDroppableScroll: updateDroppableScroll,
- updateDroppableIsEnabled: updateDroppableIsEnabled
- }, _this.store.dispatch);
- _this.dimensionMarshal = createDimensionMarshal(callbacks);
- _this.autoScroller = createAutoScroller(_extends({
- scrollWindow: scrollWindow,
- scrollDroppable: _this.dimensionMarshal.scrollDroppable
- }, redux.bindActionCreators({
- move: move
- }, _this.store.dispatch)));
- return _this;
- }
-
- var _proto = DragDropContext.prototype;
-
- _proto.getChildContext = function getChildContext() {
- var _ref;
-
- return _ref = {}, _ref[storeKey] = this.store, _ref[dimensionMarshalKey] = this.dimensionMarshal, _ref[styleContextKey] = this.styleMarshal.styleContext, _ref[canLiftContextKey] = this.canLift, _ref;
- };
-
- _proto.componentDidMount = function componentDidMount() {
- window.addEventListener('error', this.onWindowError);
- this.styleMarshal.mount();
- this.announcer.mount();
- };
-
- _proto.componentDidCatch = function componentDidCatch(error) {
- this.onFatalError(error);
-
- if (error.message.indexOf('Invariant failed') !== -1) {
- this.setState({});
- return;
- }
-
- throw error;
- };
-
- _proto.componentWillUnmount = function componentWillUnmount() {
- window.removeEventListener('error', this.onWindowError);
- var state = this.store.getState();
-
- if (state.phase !== 'IDLE') {
- this.store.dispatch(clean());
- }
-
- this.styleMarshal.unmount();
- this.announcer.unmount();
- };
-
- _proto.render = function render() {
- return this.props.children;
- };
-
- return DragDropContext;
- }(React__default.Component);
-
- DragDropContext.childContextTypes = (_DragDropContext$chil = {}, _DragDropContext$chil[storeKey] = PropTypes.shape({
- dispatch: PropTypes.func.isRequired,
- subscribe: PropTypes.func.isRequired,
- getState: PropTypes.func.isRequired
- }).isRequired, _DragDropContext$chil[dimensionMarshalKey] = PropTypes.object.isRequired, _DragDropContext$chil[styleContextKey] = PropTypes.string.isRequired, _DragDropContext$chil[canLiftContextKey] = PropTypes.func.isRequired, _DragDropContext$chil);
-
- var isScrollable = function isScrollable() {
- for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
- values[_key] = arguments[_key];
- }
-
- return values.some(function (value) {
- return value === 'auto' || value === 'scroll';
- });
- };
-
- var isElementScrollable = function isElementScrollable(el) {
- var style = window.getComputedStyle(el);
- return isScrollable(style.overflow, style.overflowY, style.overflowX);
- };
-
- var getClosestScrollable = function getClosestScrollable(el) {
- if (el == null) {
- return null;
- }
-
- if (!isElementScrollable(el)) {
- return getClosestScrollable(el.parentElement);
- }
-
- return el;
- };
-
- var _DroppableDimensionPu;
-
- var getScroll = function getScroll(el) {
- return {
- x: el.scrollLeft,
- y: el.scrollTop
- };
- };
-
- var checkForNestedScrollContainers = function checkForNestedScrollContainers(scrollable) {
- if (process.env.NODE_ENV === 'production') {
- return;
- }
-
- if (!scrollable) {
- return;
- }
-
- var anotherScrollParent = getClosestScrollable(scrollable.parentElement);
-
- if (!anotherScrollParent) {
- return;
- }
-
- console.warn("\n Droppable: unsupported nested scroll container detected.\n A Droppable can only have one scroll parent (which can be itself)\n Nested scroll containers are currently not supported.\n\n We hope to support nested scroll containers soon: https://github.com/atlassian/react-beautiful-dnd/issues/131\n ");
- };
-
- var listenerOptions = {
- passive: true
- };
-
- var DroppableDimensionPublisher = function (_React$Component) {
- _inheritsLoose(DroppableDimensionPublisher, _React$Component);
-
- function DroppableDimensionPublisher(props, context) {
- var _this;
-
- _this = _React$Component.call(this, props, context) || this;
- _this.watchingScroll = null;
- _this.callbacks = void 0;
- _this.publishedDescriptor = null;
-
- _this.getClosestScroll = function () {
- if (!_this.watchingScroll) {
- return origin;
- }
-
- return getScroll(_this.watchingScroll.closestScrollable);
- };
-
- _this.memoizedUpdateScroll = memoizeOne(function (x, y) {
- !_this.publishedDescriptor ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot update scroll on unpublished droppable') : invariant(false) : void 0;
- var newScroll = {
- x: x,
- y: y
- };
- var marshal = _this.context[dimensionMarshalKey];
- marshal.updateDroppableScroll(_this.publishedDescriptor.id, newScroll);
- });
-
- _this.updateScroll = function () {
- var offset = _this.getClosestScroll();
-
- _this.memoizedUpdateScroll(offset.x, offset.y);
- };
-
- _this.scheduleScrollUpdate = rafSchd(_this.updateScroll);
-
- _this.onClosestScroll = function () {
- !_this.watchingScroll ? process.env.NODE_ENV !== "production" ? invariant(false, 'Could not find scroll options while scrolling') : invariant(false) : void 0;
- var options = _this.watchingScroll.options;
-
- if (options.shouldPublishImmediately) {
- _this.updateScroll();
-
- return;
- }
-
- _this.scheduleScrollUpdate();
- };
-
- _this.scroll = function (change) {
- !_this.watchingScroll ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot scroll a droppable with no closest scrollable') : invariant(false) : void 0;
- var closestScrollable = _this.watchingScroll.closestScrollable;
- closestScrollable.scrollTop += change.y;
- closestScrollable.scrollLeft += change.x;
- };
-
- _this.watchScroll = function (closestScrollable, options) {
- !!_this.watchingScroll ? process.env.NODE_ENV !== "production" ? invariant(false, 'Droppable cannot watch scroll as it is already watching scroll') : invariant(false) : void 0;
-
- if (!closestScrollable) {
- return;
- }
-
- _this.watchingScroll = {
- options: options,
- closestScrollable: closestScrollable
- };
- closestScrollable.addEventListener('scroll', _this.onClosestScroll, listenerOptions);
- };
-
- _this.unwatchScroll = function () {
- var watching = _this.watchingScroll;
-
- if (!watching) {
- return;
- }
-
- _this.scheduleScrollUpdate.cancel();
-
- watching.closestScrollable.removeEventListener('scroll', _this.onClosestScroll, listenerOptions);
- _this.watchingScroll = null;
- };
-
- _this.getMemoizedDescriptor = memoizeOne(function (id, type) {
- return {
- id: id,
- type: type
- };
- });
-
- _this.publish = function () {
- var marshal = _this.context[dimensionMarshalKey];
-
- var descriptor = _this.getMemoizedDescriptor(_this.props.droppableId, _this.props.type);
-
- if (!_this.publishedDescriptor) {
- marshal.registerDroppable(descriptor, _this.callbacks);
- _this.publishedDescriptor = descriptor;
- return;
- }
-
- if (_this.publishedDescriptor === descriptor) {
- return;
- }
-
- marshal.updateDroppable(_this.publishedDescriptor, descriptor, _this.callbacks);
- _this.publishedDescriptor = descriptor;
- };
-
- _this.unpublish = function () {
- !_this.publishedDescriptor ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot unpublish descriptor when none is published') : invariant(false) : void 0;
- var marshal = _this.context[dimensionMarshalKey];
- marshal.unregisterDroppable(_this.publishedDescriptor);
- _this.publishedDescriptor = null;
- };
-
- _this.getDimensionAndWatchScroll = function (windowScroll, options) {
- var _this$props = _this.props,
- direction = _this$props.direction,
- ignoreContainerClipping = _this$props.ignoreContainerClipping,
- isDropDisabled = _this$props.isDropDisabled,
- getDroppableRef = _this$props.getDroppableRef;
- var targetRef = getDroppableRef();
- var descriptor = _this.publishedDescriptor;
- !targetRef ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot calculate a dimension when not attached to the DOM') : invariant(false) : void 0;
- !descriptor ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot get dimension for unpublished droppable') : invariant(false) : void 0;
- var scrollableRef = getClosestScrollable(targetRef);
- checkForNestedScrollContainers(scrollableRef);
-
- _this.watchScroll(scrollableRef, options);
-
- var client = function () {
- var base = cssBoxModel.getBox(targetRef);
-
- if (!scrollableRef) {
- return base;
- }
-
- if (targetRef !== scrollableRef) {
- return base;
- }
-
- var top = base.paddingBox.top - scrollableRef.scrollTop;
- var left = base.paddingBox.left - scrollableRef.scrollLeft;
- var bottom = top + scrollableRef.scrollHeight;
- var right = left + scrollableRef.scrollWidth;
- var paddingBox = {
- top: top,
- right: right,
- bottom: bottom,
- left: left
- };
- var borderBox = {
- top: paddingBox.top - base.border.top,
- right: paddingBox.right + base.border.right,
- bottom: paddingBox.bottom + base.border.bottom,
- left: paddingBox.left - base.border.left
- };
- return cssBoxModel.createBox({
- borderBox: borderBox,
- margin: base.margin,
- border: base.border,
- padding: base.padding
- });
- }();
-
- var page = cssBoxModel.withScroll(client, windowScroll);
-
- var closest$$1 = function () {
- if (!scrollableRef) {
- return null;
- }
-
- var frameClient = cssBoxModel.getBox(scrollableRef);
- return {
- client: frameClient,
- page: cssBoxModel.withScroll(frameClient),
- scrollHeight: scrollableRef.scrollHeight,
- scrollWidth: scrollableRef.scrollWidth,
- scroll: getScroll(scrollableRef),
- shouldClipSubject: !ignoreContainerClipping
- };
- }();
-
- return getDroppableDimension({
- descriptor: descriptor,
- isEnabled: !isDropDisabled,
- direction: direction,
- client: client,
- page: page,
- closest: closest$$1
- });
- };
-
- var callbacks = {
- getDimensionAndWatchScroll: _this.getDimensionAndWatchScroll,
- unwatchScroll: _this.unwatchScroll,
- scroll: _this.scroll
- };
- _this.callbacks = callbacks;
- return _this;
- }
-
- var _proto = DroppableDimensionPublisher.prototype;
-
- _proto.componentDidMount = function componentDidMount() {
- this.publish();
- };
-
- _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
- this.publish();
-
- if (this.props.isDropDisabled === prevProps.isDropDisabled) {
- return;
- }
-
- var marshal = this.context[dimensionMarshalKey];
- marshal.updateDroppableIsEnabled(this.props.droppableId, !this.props.isDropDisabled);
- };
-
- _proto.componentWillUnmount = function componentWillUnmount() {
- if (this.watchingScroll) {
- if (process.env.NODE_ENV !== 'production') {
- console.warn('Unmounting droppable while it was watching scroll');
- }
-
- this.unwatchScroll();
- }
-
- this.unpublish();
- };
-
- _proto.render = function render() {
- return this.props.children;
- };
-
- return DroppableDimensionPublisher;
- }(React__default.Component);
-
- DroppableDimensionPublisher.contextTypes = (_DroppableDimensionPu = {}, _DroppableDimensionPu[dimensionMarshalKey] = PropTypes.object.isRequired, _DroppableDimensionPu);
-
- var Placeholder = function (_PureComponent) {
- _inheritsLoose(Placeholder, _PureComponent);
-
- function Placeholder() {
- return _PureComponent.apply(this, arguments) || this;
- }
-
- var _proto = Placeholder.prototype;
-
- _proto.componentDidMount = function componentDidMount() {
- if (this.props.onMount) {
- this.props.onMount();
- }
- };
-
- _proto.componentWillUnmount = function componentWillUnmount() {
- if (this.props.onUnmount) {
- this.props.onUnmount();
- }
- };
-
- _proto.render = function render() {
- var placeholder = this.props.placeholder;
- var client = placeholder.client,
- display = placeholder.display,
- tagName = placeholder.tagName;
- var style = {
- display: display,
- boxSizing: 'border-box',
- width: client.borderBox.width,
- height: client.borderBox.height,
- marginTop: client.margin.top,
- marginRight: client.margin.right,
- marginBottom: client.margin.bottom,
- marginLeft: client.margin.left,
- flexShrink: '0',
- flexGrow: '0',
- pointerEvents: 'none'
- };
- return React__default.createElement(tagName, {
- style: style
- });
- };
-
- return Placeholder;
- }(React.PureComponent);
-
- var throwIfRefIsInvalid = (function (ref) {
- !(ref && ref instanceof HTMLElement) ? process.env.NODE_ENV !== "production" ? invariant(false, "\n provided.innerRef has not been provided with a HTMLElement.\n\n You can find a guide on using the innerRef callback functions at:\n https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md\n ") : invariant(false) : void 0;
- });
-
- var _Droppable$contextTyp, _Droppable$childConte;
-
- var Droppable = function (_Component) {
- _inheritsLoose(Droppable, _Component);
-
- function Droppable(props, context) {
- var _this;
-
- _this = _Component.call(this, props, context) || this;
- _this.styleContext = void 0;
- _this.ref = null;
- _this.isPlaceholderMounted = false;
-
- _this.onPlaceholderMount = function () {
- _this.isPlaceholderMounted = true;
- };
-
- _this.onPlaceholderUnmount = function () {
- _this.isPlaceholderMounted = false;
- };
-
- _this.setRef = function (ref) {
- if (ref === null) {
- return;
- }
-
- if (ref === _this.ref) {
- return;
- }
-
- _this.ref = ref;
- throwIfRefIsInvalid(ref);
- };
-
- _this.getDroppableRef = function () {
- return _this.ref;
- };
-
- _this.styleContext = context[styleContextKey];
- return _this;
- }
-
- var _proto = Droppable.prototype;
-
- _proto.getChildContext = function getChildContext() {
- var _value;
-
- var value = (_value = {}, _value[droppableIdKey] = this.props.droppableId, _value[droppableTypeKey] = this.props.type, _value);
- return value;
- };
-
- _proto.componentDidMount = function componentDidMount() {
- throwIfRefIsInvalid(this.ref);
- this.warnIfPlaceholderNotMounted();
- };
-
- _proto.componentDidUpdate = function componentDidUpdate() {
- this.warnIfPlaceholderNotMounted();
- };
-
- _proto.warnIfPlaceholderNotMounted = function warnIfPlaceholderNotMounted() {
- if (process.env.NODE_ENV === 'production') {
- return;
- }
-
- if (!this.props.placeholder) {
- return;
- }
-
- if (this.isPlaceholderMounted) {
- return;
- }
-
- console.warn("\n Droppable setup issue: DroppableProvided > placeholder could not be found.\n Please be sure to add the {provided.placeholder} Node as a child of your Droppable\n\n More information: https://github.com/atlassian/react-beautiful-dnd#1-provided-droppableprovided\n ");
- };
-
- _proto.getPlaceholder = function getPlaceholder() {
- if (!this.props.placeholder) {
- return null;
- }
-
- return React__default.createElement(Placeholder, {
- placeholder: this.props.placeholder,
- onMount: this.onPlaceholderMount,
- onUnmount: this.onPlaceholderUnmount
- });
- };
-
- _proto.render = function render() {
- var _this$props = this.props,
- children = _this$props.children,
- direction = _this$props.direction,
- droppableId = _this$props.droppableId,
- ignoreContainerClipping = _this$props.ignoreContainerClipping,
- isDraggingOver = _this$props.isDraggingOver,
- isDropDisabled = _this$props.isDropDisabled,
- draggingOverWith = _this$props.draggingOverWith,
- type = _this$props.type;
- var provided = {
- innerRef: this.setRef,
- placeholder: this.getPlaceholder(),
- droppableProps: {
- 'data-react-beautiful-dnd-droppable': this.styleContext
- }
- };
- var snapshot = {
- isDraggingOver: isDraggingOver,
- draggingOverWith: draggingOverWith
- };
- return React__default.createElement(DroppableDimensionPublisher, {
- droppableId: droppableId,
- type: type,
- direction: direction,
- ignoreContainerClipping: ignoreContainerClipping,
- isDropDisabled: isDropDisabled,
- getDroppableRef: this.getDroppableRef
- }, children(provided, snapshot));
- };
-
- return Droppable;
- }(React.Component);
-
- Droppable.contextTypes = (_Droppable$contextTyp = {}, _Droppable$contextTyp[styleContextKey] = PropTypes.string.isRequired, _Droppable$contextTyp);
- Droppable.childContextTypes = (_Droppable$childConte = {}, _Droppable$childConte[droppableIdKey] = PropTypes.string.isRequired, _Droppable$childConte[droppableTypeKey] = PropTypes.string.isRequired, _Droppable$childConte);
-
- var isStrictEqual = (function (a, b) {
- return a === b;
- });
-
- var makeMapStateToProps = function makeMapStateToProps() {
- var getIsDraggingOver = function getIsDraggingOver(id, destination) {
- if (!destination) {
- return false;
- }
-
- return destination.droppableId === id;
- };
-
- var shouldUsePlaceholder = function shouldUsePlaceholder(id, descriptor, destination) {
- if (!destination) {
- return false;
- }
-
- if (id === descriptor.droppableId) {
- return false;
- }
-
- return id === destination.droppableId;
- };
-
- var getMapProps = memoizeOne(function (isDraggingOver, draggingOverWith, placeholder) {
- return {
- isDraggingOver: isDraggingOver,
- draggingOverWith: draggingOverWith,
- placeholder: placeholder
- };
- });
-
- var getDefault = function getDefault() {
- return getMapProps(false, null, null);
- };
-
- var selector = function selector(state, ownProps) {
- if (ownProps.isDropDisabled) {
- return getDefault();
- }
-
- var id = ownProps.droppableId;
-
- if (state.isDragging) {
- var destination = state.impact.destination;
- var isDraggingOver = getIsDraggingOver(id, destination);
- var draggableId = state.critical.draggable.id;
- var draggingOverWith = isDraggingOver ? draggableId : null;
- var draggable = state.dimensions.draggables[draggableId];
- var placeholder = shouldUsePlaceholder(id, draggable.descriptor, destination) ? draggable.placeholder : null;
- return getMapProps(isDraggingOver, draggingOverWith, placeholder);
- }
-
- if (state.phase === 'DROP_ANIMATING') {
- var _destination = state.pending.impact.destination;
-
- var _isDraggingOver = getIsDraggingOver(id, _destination);
-
- var _draggableId = state.pending.result.draggableId;
-
- var _draggingOverWith = _isDraggingOver ? _draggableId : null;
-
- var _draggable = state.dimensions.draggables[_draggableId];
-
- var _placeholder = shouldUsePlaceholder(id, _draggable.descriptor, _destination) ? _draggable.placeholder : null;
-
- return getMapProps(_isDraggingOver, _draggingOverWith, _placeholder);
- }
-
- return getDefault();
- };
-
- return selector;
- };
- var connectedDroppable = reactRedux.connect(makeMapStateToProps, null, null, {
- storeKey: storeKey,
- pure: true,
- areStatePropsEqual: isStrictEqual
- })(Droppable);
- connectedDroppable.defaultProps = {
- type: 'DEFAULT',
- isDropDisabled: false,
- direction: 'vertical',
- ignoreContainerClipping: false
- };
-
- var _DraggableDimensionPu;
-
- var DraggableDimensionPublisher = function (_Component) {
- _inheritsLoose(DraggableDimensionPublisher, _Component);
-
- function DraggableDimensionPublisher() {
- var _this;
-
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
-
- _this = _Component.call.apply(_Component, [this].concat(args)) || this;
- _this.publishedDescriptor = null;
- _this.getMemoizedDescriptor = memoizeOne(function (id, index, droppableId, type) {
- return {
- id: id,
- index: index,
- droppableId: droppableId,
- type: type
- };
- });
-
- _this.publish = function () {
- var marshal = _this.context[dimensionMarshalKey];
-
- var descriptor = _this.getMemoizedDescriptor(_this.props.draggableId, _this.props.index, _this.props.droppableId, _this.props.type);
-
- if (!_this.publishedDescriptor) {
- marshal.registerDraggable(descriptor, _this.getDimension);
- _this.publishedDescriptor = descriptor;
- return;
- }
-
- if (descriptor === _this.publishedDescriptor) {
- return;
- }
-
- marshal.updateDraggable(_this.publishedDescriptor, descriptor, _this.getDimension);
- _this.publishedDescriptor = descriptor;
- };
-
- _this.unpublish = function () {
- !_this.publishedDescriptor ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot unpublish descriptor when none is published') : invariant(false) : void 0;
- var marshal = _this.context[dimensionMarshalKey];
- marshal.unregisterDraggable(_this.publishedDescriptor);
- _this.publishedDescriptor = null;
- };
-
- _this.getDimension = function (windowScroll) {
- var targetRef = _this.props.getDraggableRef();
-
- var descriptor = _this.publishedDescriptor;
- !targetRef ? process.env.NODE_ENV !== "production" ? invariant(false, 'DraggableDimensionPublisher cannot calculate a dimension when not attached to the DOM') : invariant(false) : void 0;
- !descriptor ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot get dimension for unpublished draggable') : invariant(false) : void 0;
- var computedStyles = window.getComputedStyle(targetRef);
- var borderBox = targetRef.getBoundingClientRect();
- var client = cssBoxModel.calculateBox(borderBox, computedStyles);
- var page = cssBoxModel.withScroll(client, windowScroll);
- var placeholder = {
- client: client,
- tagName: targetRef.tagName.toLowerCase(),
- display: computedStyles.display
- };
- var dimension = {
- descriptor: descriptor,
- placeholder: placeholder,
- client: client,
- page: page
- };
- return dimension;
- };
-
- return _this;
- }
-
- var _proto = DraggableDimensionPublisher.prototype;
-
- _proto.componentDidMount = function componentDidMount() {
- this.publish();
- };
-
- _proto.componentDidUpdate = function componentDidUpdate() {
- this.publish();
- };
-
- _proto.componentWillUnmount = function componentWillUnmount() {
- this.unpublish();
- };
-
- _proto.render = function render() {
- return this.props.children;
- };
-
- return DraggableDimensionPublisher;
- }(React.Component);
-
- DraggableDimensionPublisher.contextTypes = (_DraggableDimensionPu = {}, _DraggableDimensionPu[dimensionMarshalKey] = PropTypes.object.isRequired, _DraggableDimensionPu);
-
- var DoubleRenderBlocker = function (_React$Component) {
- _inheritsLoose(DoubleRenderBlocker, _React$Component);
-
- function DoubleRenderBlocker() {
- return _React$Component.apply(this, arguments) || this;
- }
-
- var _proto = DoubleRenderBlocker.prototype;
-
- _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
- if (isEqual(origin, nextProps.change)) {
- return true;
- }
-
- if (isEqual(this.props.change, nextProps.change)) {
- return false;
- }
-
- return true;
- };
-
- _proto.render = function render() {
- return this.props.children(this.props.change);
- };
-
- return DoubleRenderBlocker;
- }(React__default.Component);
-
- var Moveable = function (_Component) {
- _inheritsLoose(Moveable, _Component);
-
- function Moveable() {
- return _Component.apply(this, arguments) || this;
- }
-
- var _proto2 = Moveable.prototype;
-
- _proto2.getFinal = function getFinal() {
- var destination = this.props.destination;
- var speed = this.props.speed;
-
- if (speed === 'INSTANT') {
- return destination;
- }
-
- var config = speed === 'FAST' ? physics.fast : physics.standard;
- return {
- x: reactMotion.spring(destination.x, config),
- y: reactMotion.spring(destination.y, config)
- };
- };
-
- _proto2.render = function render() {
- var _this = this;
-
- var final = this.getFinal();
- return React__default.createElement(reactMotion.Motion, {
- defaultStyle: origin,
- style: final,
- onRest: this.props.onMoveEnd
- }, function (current) {
- var _this$props = _this.props,
- speed = _this$props.speed,
- destination = _this$props.destination,
- children = _this$props.children;
- var target = speed === 'INSTANT' ? destination : current;
- return React__default.createElement(DoubleRenderBlocker, {
- change: target
- }, children);
- });
- };
-
- return Moveable;
- }(React.Component);
-
- Moveable.defaultProps = {
- destination: origin
- };
-
- var getWindowFromRef = (function (ref) {
- return ref ? ref.ownerDocument.defaultView : window;
- });
-
- var selector = "[" + dragHandle + "]";
-
- var isSVG = function isSVG(el) {
- if (typeof SVGElement === 'undefined') {
- return false;
- }
-
- return el instanceof SVGElement;
- };
-
- var throwIfSVG = function throwIfSVG(el) {
- !!isSVG(el) ? process.env.NODE_ENV !== "production" ? invariant(false, "A drag handle cannot be an SVGElement: it has inconsistent focus support.\n\n More information: https://github.com/atlassian/react-beautiful-dnd/tree/master/docs/guides/dragging-svgs.md") : invariant(false) : void 0;
- };
-
- var getDragHandleRef = function getDragHandleRef(draggableRef) {
- if (draggableRef.hasAttribute(dragHandle)) {
- throwIfSVG(draggableRef);
- return draggableRef;
- }
-
- var el = draggableRef.querySelector(selector);
- throwIfSVG(draggableRef);
- !el ? process.env.NODE_ENV !== "production" ? invariant(false, "\n Cannot find drag handle element inside of Draggable.\n Please be sure to apply the {...provided.dragHandleProps} to your Draggable\n\n More information: https://github.com/atlassian/react-beautiful-dnd#draggable\n ") : invariant(false) : void 0;
- !(el instanceof HTMLElement) ? process.env.NODE_ENV !== "production" ? invariant(false, 'A drag handle must be a HTMLElement') : invariant(false) : void 0;
- return el;
- };
-
- var retainingFocusFor = null;
- var listenerOptions$1 = {
- capture: true
- };
-
- var clearRetentionOnFocusChange = function () {
- var isBound = false;
-
- var bind = function bind() {
- if (isBound) {
- return;
- }
-
- isBound = true;
- window.addEventListener('focus', onWindowFocusChange, listenerOptions$1);
- };
-
- var unbind = function unbind() {
- if (!isBound) {
- return;
- }
-
- isBound = false;
- window.removeEventListener('focus', onWindowFocusChange, listenerOptions$1);
- };
-
- var onWindowFocusChange = function onWindowFocusChange() {
- unbind();
- retainingFocusFor = null;
- };
-
- var result = function result() {
- return bind();
- };
-
- result.cancel = function () {
- return unbind();
- };
-
- return result;
- }();
-
- var retain = function retain(id) {
- retainingFocusFor = id;
- clearRetentionOnFocusChange();
- };
-
- var tryRestoreFocus = function tryRestoreFocus(id, draggableRef) {
- if (!retainingFocusFor) {
- return;
- }
-
- if (id !== retainingFocusFor) {
- return;
- }
-
- retainingFocusFor = null;
- clearRetentionOnFocusChange.cancel();
- var dragHandleRef = getDragHandleRef(draggableRef);
-
- if (!dragHandleRef) {
- console.warn('Could not find drag handle in the DOM to focus on it');
- return;
- }
-
- dragHandleRef.focus();
- };
-
- var retainer = {
- retain: retain,
- tryRestoreFocus: tryRestoreFocus
- };
-
- var interactiveTagNames = {
- input: true,
- button: true,
- textarea: true,
- select: true,
- option: true,
- optgroup: true,
- video: true,
- audio: true
- };
-
- var isAnInteractiveElement = function isAnInteractiveElement(parent, current) {
- if (current == null) {
- return false;
- }
-
- var hasAnInteractiveTag = Boolean(interactiveTagNames[current.tagName.toLowerCase()]);
-
- if (hasAnInteractiveTag) {
- return true;
- }
-
- var attribute = current.getAttribute('contenteditable');
-
- if (attribute === 'true' || attribute === '') {
- return true;
- }
-
- if (current === parent) {
- return false;
- }
-
- return isAnInteractiveElement(parent, current.parentElement);
- };
-
- var shouldAllowDraggingFromTarget = (function (event, props) {
- if (props.canDragInteractiveElements) {
- return true;
- }
-
- var target = event.target,
- currentTarget = event.currentTarget;
-
- if (!(target instanceof Element) || !(currentTarget instanceof Element)) {
- return true;
- }
-
- return !isAnInteractiveElement(currentTarget, target);
- });
-
- var createScheduler = (function (callbacks) {
- var memoizedMove = memoizeOne(function (x, y) {
- var point = {
- x: x,
- y: y
- };
- callbacks.onMove(point);
- });
- var move = rafSchd(function (point) {
- return memoizedMove(point.x, point.y);
- });
- var moveUp = rafSchd(callbacks.onMoveUp);
- var moveDown = rafSchd(callbacks.onMoveDown);
- var moveRight = rafSchd(callbacks.onMoveRight);
- var moveLeft = rafSchd(callbacks.onMoveLeft);
- var windowScrollMove = rafSchd(callbacks.onWindowScroll);
-
- var cancel = function cancel() {
- move.cancel();
- moveUp.cancel();
- moveDown.cancel();
- moveRight.cancel();
- moveLeft.cancel();
- windowScrollMove.cancel();
- };
-
- return {
- move: move,
- moveUp: moveUp,
- moveDown: moveDown,
- moveRight: moveRight,
- moveLeft: moveLeft,
- windowScrollMove: windowScrollMove,
- cancel: cancel
- };
- });
-
- var sloppyClickThreshold = 5;
- var isSloppyClickThresholdExceeded = (function (original, current) {
- return Math.abs(current.x - original.x) >= sloppyClickThreshold || Math.abs(current.y - original.y) >= sloppyClickThreshold;
- });
-
- var tab = 9;
- var enter = 13;
- var escape = 27;
- var space = 32;
- var pageUp = 33;
- var pageDown = 34;
- var end = 35;
- var home = 36;
- var arrowLeft = 37;
- var arrowUp = 38;
- var arrowRight = 39;
- var arrowDown = 40;
-
- var _preventedKeys;
- var preventedKeys = (_preventedKeys = {}, _preventedKeys[enter] = true, _preventedKeys[tab] = true, _preventedKeys);
- var preventStandardKeyEvents = (function (event) {
- if (preventedKeys[event.keyCode]) {
- event.preventDefault();
- }
- });
-
- var getOptions = function getOptions(shared, fromBinding) {
- return _extends({}, shared, fromBinding);
- };
-
- var bindEvents = function bindEvents(el, bindings, sharedOptions) {
- bindings.forEach(function (binding) {
- var options = getOptions(sharedOptions, binding.options);
- el.addEventListener(binding.eventName, binding.fn, options);
- });
- };
- var unbindEvents = function unbindEvents(el, bindings, sharedOptions) {
- bindings.forEach(function (binding) {
- var options = getOptions(sharedOptions, binding.options);
- el.removeEventListener(binding.eventName, binding.fn, options);
- });
- };
-
- var sharedOptions = {
- capture: true
- };
- var createPostDragEventPreventer = (function (getWindow) {
- var isBound = false;
-
- var bind = function bind() {
- if (isBound) {
- return;
- }
-
- isBound = true;
- bindEvents(getWindow(), pointerEvents, sharedOptions);
- };
-
- var unbind = function unbind() {
- if (!isBound) {
- return;
- }
-
- isBound = false;
- unbindEvents(getWindow(), pointerEvents, sharedOptions);
- };
-
- var pointerEvents = [{
- eventName: 'click',
- fn: function fn(event) {
- event.preventDefault();
- unbind();
- }
- }, {
- eventName: 'mousedown',
- fn: unbind
- }, {
- eventName: 'touchstart',
- fn: unbind
- }];
-
- var preventNext = function preventNext() {
- if (isBound) {
- unbind();
- }
-
- bind();
- };
-
- var preventer = {
- preventNext: preventNext,
- abort: unbind
- };
- return preventer;
- });
-
- var createEventMarshal = (function () {
- var isMouseDownHandled = false;
-
- var handle = function handle() {
- !!isMouseDownHandled ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot handle mouse down as it is already handled') : invariant(false) : void 0;
- isMouseDownHandled = true;
- };
-
- var isHandled = function isHandled() {
- return isMouseDownHandled;
- };
-
- var reset = function reset() {
- isMouseDownHandled = false;
- };
-
- return {
- handle: handle,
- isHandled: isHandled,
- reset: reset
- };
- });
-
- var supportedEventName = function () {
- var base = 'visibilitychange';
-
- if (typeof document === 'undefined') {
- return base;
- }
-
- var candidates = [base, "ms" + base, "webkit" + base, "moz" + base, "o" + base];
- var supported = candidates.find(function (eventName) {
- return "on" + eventName in document;
- });
- return supported || base;
- }();
-
- var primaryButton = 0;
-
- var noop = function noop() {};
-
- var mouseDownMarshal = createEventMarshal();
- var createMouseSensor = (function (_ref) {
- var callbacks = _ref.callbacks,
- getWindow = _ref.getWindow,
- canStartCapturing = _ref.canStartCapturing;
- var state = {
- isDragging: false,
- pending: null
- };
-
- var setState = function setState(newState) {
- state = newState;
- };
-
- var isDragging = function isDragging() {
- return state.isDragging;
- };
-
- var isCapturing = function isCapturing() {
- return Boolean(state.pending || state.isDragging);
- };
-
- var schedule = createScheduler(callbacks);
- var postDragEventPreventer = createPostDragEventPreventer(getWindow);
-
- var startDragging = function startDragging(fn) {
- if (fn === void 0) {
- fn = noop;
- }
-
- setState({
- pending: null,
- isDragging: true
- });
- fn();
- };
-
- var stopDragging = function stopDragging(fn, shouldBlockClick) {
- if (fn === void 0) {
- fn = noop;
- }
-
- if (shouldBlockClick === void 0) {
- shouldBlockClick = true;
- }
-
- schedule.cancel();
- unbindWindowEvents();
- mouseDownMarshal.reset();
-
- if (shouldBlockClick) {
- postDragEventPreventer.preventNext();
- }
-
- setState({
- isDragging: false,
- pending: null
- });
- fn();
- };
-
- var startPendingDrag = function startPendingDrag(point) {
- setState({
- pending: point,
- isDragging: false
- });
- bindWindowEvents();
- };
-
- var stopPendingDrag = function stopPendingDrag() {
- stopDragging(noop, false);
- };
-
- var kill = function kill(fn) {
- if (fn === void 0) {
- fn = noop;
- }
-
- if (state.pending) {
- stopPendingDrag();
- return;
- }
-
- stopDragging(fn);
- };
-
- var unmount = function unmount() {
- kill();
- postDragEventPreventer.abort();
- };
-
- var cancel = function cancel() {
- kill(callbacks.onCancel);
- };
-
- var windowBindings = [{
- eventName: 'mousemove',
- fn: function fn(event) {
- var button = event.button,
- clientX = event.clientX,
- clientY = event.clientY;
-
- if (button !== primaryButton) {
- return;
- }
-
- var point = {
- x: clientX,
- y: clientY
- };
-
- if (state.isDragging) {
- event.preventDefault();
- schedule.move(point);
- return;
- }
-
- if (!state.pending) {
- kill();
- process.env.NODE_ENV !== "production" ? invariant(false, 'Expected there to be a pending drag') : invariant(false);
- }
-
- if (!isSloppyClickThresholdExceeded(state.pending, point)) {
- return;
- }
-
- event.preventDefault();
- startDragging(function () {
- return callbacks.onLift({
- clientSelection: point,
- autoScrollMode: 'FLUID'
- });
- });
- }
- }, {
- eventName: 'mouseup',
- fn: function fn(event) {
- if (state.pending) {
- stopPendingDrag();
- return;
- }
-
- event.preventDefault();
- stopDragging(callbacks.onDrop);
- }
- }, {
- eventName: 'mousedown',
- fn: function fn(event) {
- if (state.isDragging) {
- event.preventDefault();
- }
-
- stopDragging(callbacks.onCancel);
- }
- }, {
- eventName: 'keydown',
- fn: function fn(event) {
- if (!state.isDragging) {
- cancel();
- return;
- }
-
- if (event.keyCode === escape) {
- event.preventDefault();
- cancel();
- return;
- }
-
- preventStandardKeyEvents(event);
- }
- }, {
- eventName: 'resize',
- fn: cancel
- }, {
- eventName: 'scroll',
- options: {
- passive: true,
- capture: false
- },
- fn: function fn() {
- if (state.pending) {
- stopPendingDrag();
- return;
- }
-
- schedule.windowScrollMove();
- }
- }, {
- eventName: 'webkitmouseforcechanged',
- fn: function fn(event) {
- if (event.webkitForce == null || MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN == null) {
- if (process.env.NODE_ENV !== 'production') {
- console.warn('handling a mouse force changed event when it is not supported');
- }
-
- return;
- }
-
- var forcePressThreshold = MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN;
- var isForcePressing = event.webkitForce >= forcePressThreshold;
-
- if (isForcePressing) {
- cancel();
- }
- }
- }, {
- eventName: supportedEventName,
- fn: cancel
- }];
-
- var bindWindowEvents = function bindWindowEvents() {
- var win = getWindow();
- bindEvents(win, windowBindings, {
- capture: true
- });
- };
-
- var unbindWindowEvents = function unbindWindowEvents() {
- var win = getWindow();
- unbindEvents(win, windowBindings, {
- capture: true
- });
- };
-
- var onMouseDown = function onMouseDown(event) {
- if (mouseDownMarshal.isHandled()) {
- return;
- }
-
- !!isCapturing() ? process.env.NODE_ENV !== "production" ? invariant(false, 'Should not be able to perform a mouse down while a drag or pending drag is occurring') : invariant(false) : void 0;
-
- if (!canStartCapturing(event)) {
- return;
- }
-
- if (event.button !== primaryButton) {
- return;
- }
-
- if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
- return;
- }
-
- mouseDownMarshal.handle();
- event.preventDefault();
- var point = {
- x: event.clientX,
- y: event.clientY
- };
- startPendingDrag(point);
- };
-
- var sensor = {
- onMouseDown: onMouseDown,
- kill: kill,
- isCapturing: isCapturing,
- isDragging: isDragging,
- unmount: unmount
- };
- return sensor;
- });
-
- var getBorderBoxCenterPosition = (function (el) {
- return cssBoxModel.getRect(el.getBoundingClientRect()).center;
- });
-
- var _scrollJumpKeys;
- var scrollJumpKeys = (_scrollJumpKeys = {}, _scrollJumpKeys[pageDown] = true, _scrollJumpKeys[pageUp] = true, _scrollJumpKeys[home] = true, _scrollJumpKeys[end] = true, _scrollJumpKeys);
-
- var noop$1 = function noop() {};
-
- var createKeyboardSensor = (function (_ref) {
- var callbacks = _ref.callbacks,
- getWindow = _ref.getWindow,
- getDraggableRef = _ref.getDraggableRef,
- canStartCapturing = _ref.canStartCapturing;
- var state = {
- isDragging: false
- };
-
- var setState = function setState(newState) {
- state = newState;
- };
-
- var startDragging = function startDragging(fn) {
- if (fn === void 0) {
- fn = noop$1;
- }
-
- setState({
- isDragging: true
- });
- bindWindowEvents();
- fn();
- };
-
- var stopDragging = function stopDragging(fn) {
- if (fn === void 0) {
- fn = noop$1;
- }
-
- schedule.cancel();
- unbindWindowEvents();
- setState({
- isDragging: false
- });
- fn();
- };
-
- var kill = function kill() {
- return stopDragging();
- };
-
- var cancel = function cancel() {
- stopDragging(callbacks.onCancel);
- };
-
- var isDragging = function isDragging() {
- return state.isDragging;
- };
-
- var schedule = createScheduler(callbacks);
-
- var onKeyDown = function onKeyDown(event) {
- if (!isDragging()) {
- if (event.defaultPrevented) {
- return;
- }
-
- if (!canStartCapturing(event)) {
- return;
- }
-
- if (event.keyCode !== space) {
- return;
- }
-
- var ref = getDraggableRef();
- !ref ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot start a keyboard drag without a draggable ref') : invariant(false) : void 0;
- var center = getBorderBoxCenterPosition(ref);
- event.preventDefault();
- startDragging(function () {
- return callbacks.onLift({
- clientSelection: center,
- autoScrollMode: 'JUMP'
- });
- });
- return;
- }
-
- if (event.keyCode === escape) {
- event.preventDefault();
- cancel();
- return;
- }
-
- if (event.keyCode === space) {
- event.preventDefault();
- stopDragging(callbacks.onDrop);
- return;
- }
-
- if (event.keyCode === arrowDown) {
- event.preventDefault();
- schedule.moveDown();
- return;
- }
-
- if (event.keyCode === arrowUp) {
- event.preventDefault();
- schedule.moveUp();
- return;
- }
-
- if (event.keyCode === arrowRight) {
- event.preventDefault();
- schedule.moveRight();
- return;
- }
-
- if (event.keyCode === arrowLeft) {
- event.preventDefault();
- schedule.moveLeft();
- return;
- }
-
- if (scrollJumpKeys[event.keyCode]) {
- event.preventDefault();
- return;
- }
-
- preventStandardKeyEvents(event);
- };
-
- var windowBindings = [{
- eventName: 'mousedown',
- fn: cancel
- }, {
- eventName: 'mouseup',
- fn: cancel
- }, {
- eventName: 'click',
- fn: cancel
- }, {
- eventName: 'touchstart',
- fn: cancel
- }, {
- eventName: 'resize',
- fn: cancel
- }, {
- eventName: 'wheel',
- fn: cancel
- }, {
- eventName: 'scroll',
- options: {
- capture: false
- },
- fn: callbacks.onWindowScroll
- }, {
- eventName: supportedEventName,
- fn: cancel
- }];
-
- var bindWindowEvents = function bindWindowEvents() {
- bindEvents(getWindow(), windowBindings, {
- capture: true
- });
- };
-
- var unbindWindowEvents = function unbindWindowEvents() {
- unbindEvents(getWindow(), windowBindings, {
- capture: true
- });
- };
-
- var sensor = {
- onKeyDown: onKeyDown,
- kill: kill,
- isDragging: isDragging,
- isCapturing: isDragging,
- unmount: kill
- };
- return sensor;
- });
-
- var timeForLongPress = 150;
- var forcePressThreshold = 0.15;
- var touchStartMarshal = createEventMarshal();
-
- var noop$2 = function noop() {};
-
- var webkitHack = function () {
- var stub = {
- preventTouchMove: noop$2,
- releaseTouchMove: noop$2
- };
-
- if (typeof window === 'undefined') {
- return stub;
- }
-
- if (!('ontouchstart' in window)) {
- return stub;
- }
-
- var isBlocking = false;
- window.addEventListener('touchmove', function (event) {
- if (!isBlocking) {
- return;
- }
-
- if (event.defaultPrevented) {
- return;
- }
-
- event.preventDefault();
- }, {
- passive: false,
- capture: false
- });
-
- var preventTouchMove = function preventTouchMove() {
- isBlocking = true;
- };
-
- var releaseTouchMove = function releaseTouchMove() {
- isBlocking = false;
- };
-
- return {
- preventTouchMove: preventTouchMove,
- releaseTouchMove: releaseTouchMove
- };
- }();
-
- var initial = {
- isDragging: false,
- pending: null,
- hasMoved: false,
- longPressTimerId: null
- };
- var createTouchSensor = (function (_ref) {
- var callbacks = _ref.callbacks,
- getWindow = _ref.getWindow,
- canStartCapturing = _ref.canStartCapturing;
- var state = initial;
-
- var setState = function setState(partial) {
- state = _extends({}, state, partial);
- };
-
- var isDragging = function isDragging() {
- return state.isDragging;
- };
-
- var isCapturing = function isCapturing() {
- return Boolean(state.pending || state.isDragging || state.longPressTimerId);
- };
-
- var schedule = createScheduler(callbacks);
- var postDragEventPreventer = createPostDragEventPreventer(getWindow);
-
- var startDragging = function startDragging() {
- var pending = state.pending;
-
- if (!pending) {
- kill();
- process.env.NODE_ENV !== "production" ? invariant(false, 'cannot start a touch drag without a pending position') : invariant(false);
- }
-
- setState({
- isDragging: true,
- hasMoved: false,
- pending: null,
- longPressTimerId: null
- });
- callbacks.onLift({
- clientSelection: pending,
- autoScrollMode: 'FLUID'
- });
- };
-
- var stopDragging = function stopDragging(fn) {
- if (fn === void 0) {
- fn = noop$2;
- }
-
- schedule.cancel();
- touchStartMarshal.reset();
- webkitHack.releaseTouchMove();
- unbindWindowEvents();
- postDragEventPreventer.preventNext();
- setState(initial);
- fn();
- };
-
- var startPendingDrag = function startPendingDrag(event) {
- var touch = event.touches[0];
- var clientX = touch.clientX,
- clientY = touch.clientY;
- var point = {
- x: clientX,
- y: clientY
- };
- var longPressTimerId = setTimeout(startDragging, timeForLongPress);
- setState({
- longPressTimerId: longPressTimerId,
- pending: point,
- isDragging: false,
- hasMoved: false
- });
- bindWindowEvents();
- };
-
- var stopPendingDrag = function stopPendingDrag() {
- if (state.longPressTimerId) {
- clearTimeout(state.longPressTimerId);
- }
-
- schedule.cancel();
- touchStartMarshal.reset();
- webkitHack.releaseTouchMove();
- unbindWindowEvents();
- setState(initial);
- };
-
- var kill = function kill(fn) {
- if (fn === void 0) {
- fn = noop$2;
- }
-
- if (state.pending) {
- stopPendingDrag();
- return;
- }
-
- stopDragging(fn);
- };
-
- var unmount = function unmount() {
- kill();
- postDragEventPreventer.abort();
- };
-
- var cancel = function cancel() {
- kill(callbacks.onCancel);
- };
-
- var windowBindings = [{
- eventName: 'touchmove',
- options: {
- passive: false
- },
- fn: function fn(event) {
- if (!state.isDragging) {
- stopPendingDrag();
- return;
- }
-
- if (!state.hasMoved) {
- setState({
- hasMoved: true
- });
- }
-
- var _event$touches$ = event.touches[0],
- clientX = _event$touches$.clientX,
- clientY = _event$touches$.clientY;
- var point = {
- x: clientX,
- y: clientY
- };
- event.preventDefault();
- schedule.move(point);
- }
- }, {
- eventName: 'touchend',
- fn: function fn(event) {
- if (!state.isDragging) {
- stopPendingDrag();
- return;
- }
-
- event.preventDefault();
- stopDragging(callbacks.onDrop);
- }
- }, {
- eventName: 'touchcancel',
- fn: function fn(event) {
- if (!state.isDragging) {
- stopPendingDrag();
- return;
- }
-
- event.preventDefault();
- stopDragging(callbacks.onCancel);
- }
- }, {
- eventName: 'touchstart',
- fn: cancel
- }, {
- eventName: 'orientationchange',
- fn: cancel
- }, {
- eventName: 'resize',
- fn: cancel
- }, {
- eventName: 'scroll',
- options: {
- passive: true,
- capture: false
- },
- fn: function fn() {
- if (state.pending) {
- stopPendingDrag();
- return;
- }
-
- schedule.windowScrollMove();
- }
- }, {
- eventName: 'contextmenu',
- fn: function fn(event) {
- event.preventDefault();
- }
- }, {
- eventName: 'keydown',
- fn: function fn(event) {
- if (!state.isDragging) {
- cancel();
- return;
- }
-
- if (event.keyCode === escape) {
- event.preventDefault();
- }
-
- cancel();
- }
- }, {
- eventName: 'touchforcechange',
- fn: function fn(event) {
- if (state.hasMoved) {
- event.preventDefault();
- return;
- }
-
- var touch = event.touches[0];
-
- if (touch.force >= forcePressThreshold) {
- cancel();
- }
- }
- }, {
- eventName: supportedEventName,
- fn: cancel
- }];
-
- var bindWindowEvents = function bindWindowEvents() {
- bindEvents(getWindow(), windowBindings, {
- capture: true
- });
- };
-
- var unbindWindowEvents = function unbindWindowEvents() {
- unbindEvents(getWindow(), windowBindings, {
- capture: true
- });
- };
-
- var onTouchStart = function onTouchStart(event) {
- if (touchStartMarshal.isHandled()) {
- return;
- }
-
- !!isCapturing() ? process.env.NODE_ENV !== "production" ? invariant(false, 'Should not be able to perform a touch start while a drag or pending drag is occurring') : invariant(false) : void 0;
-
- if (!canStartCapturing(event)) {
- return;
- }
-
- touchStartMarshal.handle();
- webkitHack.preventTouchMove();
- startPendingDrag(event);
- };
-
- var sensor = {
- onTouchStart: onTouchStart,
- kill: kill,
- isCapturing: isCapturing,
- isDragging: isDragging,
- unmount: unmount
- };
- return sensor;
- });
-
- var _DragHandle$contextTy;
-
- var preventHtml5Dnd = function preventHtml5Dnd(event) {
- event.preventDefault();
- };
-
- var DragHandle = function (_Component) {
- _inheritsLoose(DragHandle, _Component);
-
- function DragHandle(props, context) {
- var _this;
-
- _this = _Component.call(this, props, context) || this;
- _this.mouseSensor = void 0;
- _this.keyboardSensor = void 0;
- _this.touchSensor = void 0;
- _this.sensors = void 0;
- _this.styleContext = void 0;
- _this.canLift = void 0;
- _this.isFocused = false;
- _this.lastDraggableRef = void 0;
-
- _this.onFocus = function () {
- _this.isFocused = true;
- };
-
- _this.onBlur = function () {
- _this.isFocused = false;
- };
-
- _this.onKeyDown = function (event) {
- if (_this.mouseSensor.isCapturing() || _this.touchSensor.isCapturing()) {
- return;
- }
-
- _this.keyboardSensor.onKeyDown(event);
- };
-
- _this.onMouseDown = function (event) {
- if (_this.keyboardSensor.isCapturing() || _this.mouseSensor.isCapturing()) {
- return;
- }
-
- _this.mouseSensor.onMouseDown(event);
- };
-
- _this.onTouchStart = function (event) {
- if (_this.mouseSensor.isCapturing() || _this.keyboardSensor.isCapturing()) {
- return;
- }
-
- _this.touchSensor.onTouchStart(event);
- };
-
- _this.canStartCapturing = function (event) {
- if (_this.isAnySensorCapturing()) {
- return false;
- }
-
- if (!_this.canLift(_this.props.draggableId)) {
- return false;
- }
-
- return shouldAllowDraggingFromTarget(event, _this.props);
- };
-
- _this.isAnySensorCapturing = function () {
- return _this.sensors.some(function (sensor) {
- return sensor.isCapturing();
- });
- };
-
- _this.getProvided = memoizeOne(function (isEnabled) {
- if (!isEnabled) {
- return null;
- }
-
- var provided = {
- onMouseDown: _this.onMouseDown,
- onKeyDown: _this.onKeyDown,
- onTouchStart: _this.onTouchStart,
- onFocus: _this.onFocus,
- onBlur: _this.onBlur,
- tabIndex: 0,
- 'data-react-beautiful-dnd-drag-handle': _this.styleContext,
- 'aria-roledescription': 'Draggable item. Press space bar to lift',
- draggable: false,
- onDragStart: preventHtml5Dnd
- };
- return provided;
- });
-
- var getWindow = function getWindow() {
- return getWindowFromRef(_this.props.getDraggableRef());
- };
-
- var args = {
- callbacks: _this.props.callbacks,
- getDraggableRef: _this.props.getDraggableRef,
- getWindow: getWindow,
- canStartCapturing: _this.canStartCapturing
- };
- _this.mouseSensor = createMouseSensor(args);
- _this.keyboardSensor = createKeyboardSensor(args);
- _this.touchSensor = createTouchSensor(args);
- _this.sensors = [_this.mouseSensor, _this.keyboardSensor, _this.touchSensor];
- _this.styleContext = context[styleContextKey];
- _this.canLift = context[canLiftContextKey];
- return _this;
- }
-
- var _proto = DragHandle.prototype;
-
- _proto.componentDidMount = function componentDidMount() {
- var draggableRef = this.props.getDraggableRef();
- this.lastDraggableRef = draggableRef;
- !draggableRef ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot get draggable ref from drag handle') : invariant(false) : void 0;
-
- if (!this.props.isEnabled) {
- return;
- }
-
- var dragHandleRef = getDragHandleRef(draggableRef);
- retainer.tryRestoreFocus(this.props.draggableId, dragHandleRef);
- };
-
- _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
- var _this2 = this;
-
- var ref = this.props.getDraggableRef();
-
- if (ref !== this.lastDraggableRef) {
- this.lastDraggableRef = ref;
-
- if (!ref || !this.isFocused) {
- return;
- }
-
- if (!this.props.isEnabled) {
- return;
- }
-
- getDragHandleRef(ref).focus();
- }
-
- var isCapturing = this.isAnySensorCapturing();
-
- if (!isCapturing) {
- return;
- }
-
- var isDragStopping = prevProps.isDragging && !this.props.isDragging;
-
- if (isDragStopping) {
- this.sensors.forEach(function (sensor) {
- if (sensor.isCapturing()) {
- sensor.kill();
- }
- });
- }
-
- if (this.props.isEnabled) {
- return;
- }
-
- this.sensors.forEach(function (sensor) {
- if (!sensor.isCapturing()) {
- return;
- }
-
- var wasDragging = sensor.isDragging();
- sensor.kill();
-
- if (wasDragging) {
- if (process.env.NODE_ENV !== 'production') {
- console.warn('You have disabled dragging on a Draggable while it was dragging. The drag has been cancelled');
- }
-
- _this2.props.callbacks.onCancel();
- }
- });
- };
-
- _proto.componentWillUnmount = function componentWillUnmount() {
- var _this3 = this;
-
- this.sensors.forEach(function (sensor) {
- var wasDragging = sensor.isDragging();
- sensor.unmount();
-
- if (wasDragging) {
- _this3.props.callbacks.onCancel();
- }
- });
-
- var shouldRetainFocus = function () {
- if (!_this3.props.isEnabled) {
- return false;
- }
-
- if (!_this3.isFocused) {
- return false;
- }
-
- return _this3.props.isDragging || _this3.props.isDropAnimating;
- }();
-
- if (shouldRetainFocus) {
- retainer.retain(this.props.draggableId);
- }
- };
-
- _proto.render = function render() {
- var _this$props = this.props,
- children = _this$props.children,
- isEnabled = _this$props.isEnabled;
- return children(this.getProvided(isEnabled));
- };
-
- return DragHandle;
- }(React.Component);
-
- DragHandle.contextTypes = (_DragHandle$contextTy = {}, _DragHandle$contextTy[styleContextKey] = PropTypes.string.isRequired, _DragHandle$contextTy[canLiftContextKey] = PropTypes.func.isRequired, _DragHandle$contextTy);
-
- var getWindowScroll = (function () {
- return {
- x: window.pageXOffset,
- y: window.pageYOffset
- };
- });
-
- var getViewport = (function () {
- var scroll = getWindowScroll();
- var top = scroll.y;
- var left = scroll.x;
- var doc = document.documentElement;
- !doc ? process.env.NODE_ENV !== "production" ? invariant(false, 'Could not find document.documentElement') : invariant(false) : void 0;
- var width = doc.clientWidth;
- var height = doc.clientHeight;
- var right = left + width;
- var bottom = top + height;
- var frame = cssBoxModel.getRect({
- top: top,
- left: left,
- right: right,
- bottom: bottom
- });
- var maxScroll = getMaxScroll({
- scrollHeight: doc.scrollHeight,
- scrollWidth: doc.scrollWidth,
- width: frame.width,
- height: frame.height
- });
- var viewport = {
- frame: frame,
- scroll: {
- initial: scroll,
- current: scroll,
- max: maxScroll,
- diff: {
- value: origin,
- displacement: origin
- }
- }
- };
- return viewport;
- });
-
- var _Draggable$contextTyp;
- var zIndexOptions = {
- dragging: 5000,
- dropAnimating: 4500
- };
-
- var getTranslate = function getTranslate(offset) {
- if (isEqual(offset, origin)) {
- return null;
- }
-
- return "translate(" + offset.x + "px, " + offset.y + "px)";
- };
-
- var getSpeed$1 = function getSpeed(isDragging, shouldAnimateDragMovement, isDropAnimating) {
- if (isDropAnimating) {
- return 'STANDARD';
- }
-
- if (isDragging && shouldAnimateDragMovement) {
- return 'FAST';
- }
-
- return 'INSTANT';
- };
-
- var Draggable = function (_Component) {
- _inheritsLoose(Draggable, _Component);
-
- function Draggable(props, context) {
- var _this;
-
- _this = _Component.call(this, props, context) || this;
- _this.callbacks = void 0;
- _this.styleContext = void 0;
- _this.ref = null;
-
- _this.onMoveEnd = function () {
- if (_this.props.isDropAnimating) {
- _this.props.dropAnimationFinished();
- }
- };
-
- _this.onLift = function (options) {
- start('LIFT');
- var ref = _this.ref;
- !ref ? process.env.NODE_ENV !== "production" ? invariant(false) : invariant(false) : void 0;
- !!_this.props.isDragDisabled ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot lift a Draggable when it is disabled') : invariant(false) : void 0;
- var clientSelection = options.clientSelection,
- autoScrollMode = options.autoScrollMode;
- var _this$props = _this.props,
- lift = _this$props.lift,
- draggableId = _this$props.draggableId;
- var client = {
- selection: clientSelection,
- borderBoxCenter: getBorderBoxCenterPosition(ref),
- offset: origin
- };
- lift({
- id: draggableId,
- client: client,
- autoScrollMode: autoScrollMode,
- viewport: getViewport()
- });
- finish('LIFT');
- };
-
- _this.setRef = function (ref) {
- if (ref === null) {
- return;
- }
-
- if (ref === _this.ref) {
- return;
- }
-
- _this.ref = ref;
- throwIfRefIsInvalid(ref);
- };
-
- _this.getDraggableRef = function () {
- return _this.ref;
- };
-
- _this.getDraggingStyle = memoizeOne(function (change, dimension, isDropAnimating) {
- var box = dimension.client;
- var style = {
- position: 'fixed',
- top: box.marginBox.top,
- left: box.marginBox.left,
- boxSizing: 'border-box',
- width: box.borderBox.width,
- height: box.borderBox.height,
- transition: 'none',
- zIndex: isDropAnimating ? zIndexOptions.dropAnimating : zIndexOptions.dragging,
- transform: getTranslate(change),
- pointerEvents: 'none'
- };
- return style;
- });
- _this.getNotDraggingStyle = memoizeOne(function (current, shouldAnimateDisplacement) {
- var style = {
- transform: getTranslate(current),
- transition: shouldAnimateDisplacement ? null : 'none'
- };
- return style;
- });
- _this.getProvided = memoizeOne(function (change, isDragging, isDropAnimating, shouldAnimateDisplacement, dimension, dragHandleProps) {
- var useDraggingStyle = isDragging || isDropAnimating;
-
- var draggableStyle = function () {
- if (!useDraggingStyle) {
- return _this.getNotDraggingStyle(change, shouldAnimateDisplacement);
- }
-
- !dimension ? process.env.NODE_ENV !== "production" ? invariant(false, 'draggable dimension required for dragging') : invariant(false) : void 0;
- return _this.getDraggingStyle(change, dimension, isDropAnimating);
- }();
-
- var provided = {
- innerRef: _this.setRef,
- draggableProps: {
- 'data-react-beautiful-dnd-draggable': _this.styleContext,
- style: draggableStyle
- },
- dragHandleProps: dragHandleProps
- };
- return provided;
- });
- _this.getSnapshot = memoizeOne(function (isDragging, isDropAnimating, draggingOver) {
- return {
- isDragging: isDragging || isDropAnimating,
- isDropAnimating: isDropAnimating,
- draggingOver: draggingOver
- };
- });
-
- _this.renderChildren = function (change, dragHandleProps) {
- var _this$props2 = _this.props,
- isDragging = _this$props2.isDragging,
- isDropAnimating = _this$props2.isDropAnimating,
- dimension = _this$props2.dimension,
- draggingOver = _this$props2.draggingOver,
- shouldAnimateDisplacement = _this$props2.shouldAnimateDisplacement,
- children = _this$props2.children;
- var child = children(_this.getProvided(change, isDragging, isDropAnimating, shouldAnimateDisplacement, dimension, dragHandleProps), _this.getSnapshot(isDragging, isDropAnimating, draggingOver));
- var isDraggingOrDropping = isDragging || isDropAnimating;
-
- var placeholder = function () {
- if (!isDraggingOrDropping) {
- return null;
- }
-
- !dimension ? process.env.NODE_ENV !== "production" ? invariant(false, 'Draggable: Dimension is required for dragging') : invariant(false) : void 0;
- return React__default.createElement(Placeholder, {
- placeholder: dimension.placeholder
- });
- }();
-
- return React__default.createElement(React.Fragment, null, child, placeholder);
- };
-
- var callbacks = {
- onLift: _this.onLift,
- onMove: function onMove(clientSelection) {
- return props.move({
- client: clientSelection,
- shouldAnimate: false
- });
- },
- onDrop: function onDrop() {
- return props.drop({
- reason: 'DROP'
- });
- },
- onCancel: function onCancel() {
- return props.drop({
- reason: 'CANCEL'
- });
- },
- onMoveUp: props.moveUp,
- onMoveDown: props.moveDown,
- onMoveRight: props.moveRight,
- onMoveLeft: props.moveLeft,
- onWindowScroll: function onWindowScroll() {
- return props.moveByWindowScroll({
- scroll: getWindowScroll()
- });
- }
- };
- _this.callbacks = callbacks;
- _this.styleContext = context[styleContextKey];
- return _this;
- }
-
- var _proto = Draggable.prototype;
-
- _proto.componentWillUnmount = function componentWillUnmount() {
- this.ref = null;
- };
-
- _proto.render = function render() {
- var _this2 = this;
-
- var _this$props3 = this.props,
- draggableId = _this$props3.draggableId,
- index = _this$props3.index,
- offset = _this$props3.offset,
- isDragging = _this$props3.isDragging,
- isDropAnimating = _this$props3.isDropAnimating,
- isDragDisabled = _this$props3.isDragDisabled,
- shouldAnimateDragMovement = _this$props3.shouldAnimateDragMovement,
- disableInteractiveElementBlocking = _this$props3.disableInteractiveElementBlocking;
- var droppableId = this.context[droppableIdKey];
- var type = this.context[droppableTypeKey];
- var speed = getSpeed$1(isDragging, shouldAnimateDragMovement, isDropAnimating);
- return React__default.createElement(DraggableDimensionPublisher, {
- key: draggableId,
- draggableId: draggableId,
- droppableId: droppableId,
- type: type,
- index: index,
- getDraggableRef: this.getDraggableRef
- }, React__default.createElement(Moveable, {
- speed: speed,
- destination: offset,
- onMoveEnd: this.onMoveEnd
- }, function (change) {
- return React__default.createElement(DragHandle, {
- draggableId: draggableId,
- isDragging: isDragging,
- isDropAnimating: isDropAnimating,
- isEnabled: !isDragDisabled,
- callbacks: _this2.callbacks,
- getDraggableRef: _this2.getDraggableRef,
- canDragInteractiveElements: disableInteractiveElementBlocking
- }, function (dragHandleProps) {
- return _this2.renderChildren(change, dragHandleProps);
- });
- }));
- };
-
- return Draggable;
- }(React.Component);
-
- Draggable.contextTypes = (_Draggable$contextTyp = {}, _Draggable$contextTyp[droppableIdKey] = PropTypes.string.isRequired, _Draggable$contextTyp[droppableTypeKey] = PropTypes.string.isRequired, _Draggable$contextTyp[styleContextKey] = PropTypes.string.isRequired, _Draggable$contextTyp);
-
- var defaultMapProps = {
- isDropAnimating: false,
- isDragging: false,
- offset: origin,
- shouldAnimateDragMovement: false,
- shouldAnimateDisplacement: true,
- dimension: null,
- draggingOver: null
- };
- var makeMapStateToProps$1 = function makeMapStateToProps() {
- var memoizedOffset = memoizeOne(function (x, y) {
- return {
- x: x,
- y: y
- };
- });
- var getNotDraggingProps = memoizeOne(function (offset, shouldAnimateDisplacement) {
- return {
- isDropAnimating: false,
- isDragging: false,
- offset: offset,
- shouldAnimateDisplacement: shouldAnimateDisplacement,
- shouldAnimateDragMovement: false,
- dimension: null,
- draggingOver: null
- };
- });
- var getDraggingProps = memoizeOne(function (offset, shouldAnimateDragMovement, dimension, draggingOver) {
- return {
- isDragging: true,
- isDropAnimating: false,
- shouldAnimateDisplacement: false,
- offset: offset,
- shouldAnimateDragMovement: shouldAnimateDragMovement,
- dimension: dimension,
- draggingOver: draggingOver
- };
- });
-
- var getOutOfTheWayMovement = function getOutOfTheWayMovement(id, movement) {
- var map = getDisplacementMap(movement.displaced);
- var displacement = map[id];
-
- if (!displacement) {
- return null;
- }
-
- if (!displacement.isVisible) {
- return null;
- }
-
- var amount = movement.isBeyondStartPosition ? negate(movement.amount) : movement.amount;
- return getNotDraggingProps(memoizedOffset(amount.x, amount.y), displacement.shouldAnimate);
- };
-
- var draggingSelector = function draggingSelector(state, ownProps) {
- if (state.isDragging) {
- if (state.critical.draggable.id !== ownProps.draggableId) {
- return null;
- }
-
- var offset = state.current.client.offset;
- var dimension = state.dimensions.draggables[ownProps.draggableId];
- var shouldAnimateDragMovement = state.shouldAnimate;
- var draggingOver = state.impact.destination ? state.impact.destination.droppableId : null;
- return getDraggingProps(memoizedOffset(offset.x, offset.y), shouldAnimateDragMovement, dimension, draggingOver);
- }
-
- if (state.phase === 'DROP_ANIMATING') {
- var pending = state.pending;
-
- if (pending.result.draggableId !== ownProps.draggableId) {
- return null;
- }
-
- var _draggingOver = pending.result.destination ? pending.result.destination.droppableId : null;
-
- return {
- isDragging: false,
- isDropAnimating: true,
- offset: pending.newHomeOffset,
- dimension: state.dimensions.draggables[ownProps.draggableId],
- draggingOver: _draggingOver,
- shouldAnimateDragMovement: false,
- shouldAnimateDisplacement: false
- };
- }
-
- return null;
- };
-
- var movingOutOfTheWaySelector = function movingOutOfTheWaySelector(state, ownProps) {
- if (state.isDragging) {
- if (state.critical.draggable.id === ownProps.draggableId) {
- return null;
- }
-
- return getOutOfTheWayMovement(ownProps.draggableId, state.impact.movement);
- }
-
- if (state.phase === 'DROP_ANIMATING') {
- if (state.pending.result.draggableId === ownProps.draggableId) {
- return null;
- }
-
- return getOutOfTheWayMovement(ownProps.draggableId, state.pending.impact.movement);
- }
-
- return null;
- };
-
- var selector = function selector(state, ownProps) {
- var dragging = draggingSelector(state, ownProps);
-
- if (dragging) {
- return dragging;
- }
-
- var movingOutOfTheWay = movingOutOfTheWaySelector(state, ownProps);
-
- if (movingOutOfTheWay) {
- return movingOutOfTheWay;
- }
-
- return defaultMapProps;
- };
-
- return selector;
- };
- var mapDispatchToProps = {
- lift: lift,
- move: move,
- moveUp: moveUp,
- moveDown: moveDown,
- moveLeft: moveLeft,
- moveRight: moveRight,
- moveByWindowScroll: moveByWindowScroll,
- drop: drop,
- dropAnimationFinished: dropAnimationFinished
- };
- var ConnectedDraggable = reactRedux.connect(makeMapStateToProps$1, mapDispatchToProps, null, {
- storeKey: storeKey,
- pure: true,
- areStatePropsEqual: isStrictEqual
- })(Draggable);
- ConnectedDraggable.defaultProps = {
- isDragDisabled: false,
- disableInteractiveElementBlocking: false
- };
-
- exports.DragDropContext = DragDropContext;
- exports.Droppable = connectedDroppable;
- exports.Draggable = ConnectedDraggable;
- exports.resetServerContext = resetServerContext;
-
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 153 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var _Object$assign = __webpack_require__(154);
-
- 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;
-
-/***/ }),
-/* 154 */
-/***/ (function(module, exports, __webpack_require__) {
-
- module.exports = __webpack_require__(155);
-
-/***/ }),
-/* 155 */
-/***/ (function(module, exports, __webpack_require__) {
-
- __webpack_require__(156);
- module.exports = __webpack_require__(159).Object.assign;
-
-
-/***/ }),
-/* 156 */
-/***/ (function(module, exports, __webpack_require__) {
-
- // 19.1.3.1 Object.assign(target, source)
- var $export = __webpack_require__(157);
-
- $export($export.S + $export.F, 'Object', { assign: __webpack_require__(173) });
-
-
-/***/ }),
-/* 157 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var global = __webpack_require__(158);
- var core = __webpack_require__(159);
- var ctx = __webpack_require__(160);
- var hide = __webpack_require__(162);
- var has = __webpack_require__(172);
- var PROTOTYPE = 'prototype';
-
- var $export = function (type, name, source) {
- var IS_FORCED = type & $export.F;
- var IS_GLOBAL = type & $export.G;
- var IS_STATIC = type & $export.S;
- var IS_PROTO = type & $export.P;
- var IS_BIND = type & $export.B;
- var IS_WRAP = type & $export.W;
- var exports = IS_GLOBAL ? core : core[name] || (core[name] = {});
- var expProto = exports[PROTOTYPE];
- var target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE];
- var key, own, out;
- if (IS_GLOBAL) source = name;
- for (key in source) {
- // contains in native
- own = !IS_FORCED && target && target[key] !== undefined;
- if (own && has(exports, key)) continue;
- // export native or passed
- out = own ? target[key] : source[key];
- // prevent global pollution for namespaces
- exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key]
- // bind timers to global for call from export context
- : IS_BIND && own ? ctx(out, global)
- // wrap global constructors for prevent change them in library
- : IS_WRAP && target[key] == out ? (function (C) {
- var F = function (a, b, c) {
- if (this instanceof C) {
- switch (arguments.length) {
- case 0: return new C();
- case 1: return new C(a);
- case 2: return new C(a, b);
- } return new C(a, b, c);
- } return C.apply(this, arguments);
- };
- F[PROTOTYPE] = C[PROTOTYPE];
- return F;
- // make static versions for prototype methods
- })(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out;
- // export proto methods to core.%CONSTRUCTOR%.methods.%NAME%
- if (IS_PROTO) {
- (exports.virtual || (exports.virtual = {}))[key] = out;
- // export proto methods to core.%CONSTRUCTOR%.prototype.%NAME%
- if (type & $export.R && expProto && !expProto[key]) hide(expProto, key, out);
- }
- }
- };
- // type bitmap
- $export.F = 1; // forced
- $export.G = 2; // global
- $export.S = 4; // static
- $export.P = 8; // proto
- $export.B = 16; // bind
- $export.W = 32; // wrap
- $export.U = 64; // safe
- $export.R = 128; // real proto method for `library`
- module.exports = $export;
-
-
-/***/ }),
-/* 158 */
-/***/ (function(module, exports) {
-
- // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
- var global = module.exports = typeof window != 'undefined' && window.Math == Math
- ? window : typeof self != 'undefined' && self.Math == Math ? self
- // eslint-disable-next-line no-new-func
- : Function('return this')();
- if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef
-
-
-/***/ }),
-/* 159 */
-/***/ (function(module, exports) {
-
- var core = module.exports = { version: '2.6.5' };
- if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef
-
-
-/***/ }),
-/* 160 */
-/***/ (function(module, exports, __webpack_require__) {
-
- // optional / simple context binding
- var aFunction = __webpack_require__(161);
- module.exports = function (fn, that, length) {
- aFunction(fn);
- if (that === undefined) return fn;
- switch (length) {
- case 1: return function (a) {
- return fn.call(that, a);
- };
- case 2: return function (a, b) {
- return fn.call(that, a, b);
- };
- case 3: return function (a, b, c) {
- return fn.call(that, a, b, c);
- };
- }
- return function (/* ...args */) {
- return fn.apply(that, arguments);
- };
- };
-
-
-/***/ }),
-/* 161 */
-/***/ (function(module, exports) {
-
- module.exports = function (it) {
- if (typeof it != 'function') throw TypeError(it + ' is not a function!');
- return it;
- };
-
-
-/***/ }),
-/* 162 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var dP = __webpack_require__(163);
- var createDesc = __webpack_require__(171);
- module.exports = __webpack_require__(167) ? function (object, key, value) {
- return dP.f(object, key, createDesc(1, value));
- } : function (object, key, value) {
- object[key] = value;
- return object;
- };
-
-
-/***/ }),
-/* 163 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var anObject = __webpack_require__(164);
- var IE8_DOM_DEFINE = __webpack_require__(166);
- var toPrimitive = __webpack_require__(170);
- var dP = Object.defineProperty;
-
- exports.f = __webpack_require__(167) ? Object.defineProperty : function defineProperty(O, P, Attributes) {
- anObject(O);
- P = toPrimitive(P, true);
- anObject(Attributes);
- if (IE8_DOM_DEFINE) try {
- return dP(O, P, Attributes);
- } catch (e) { /* empty */ }
- if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!');
- if ('value' in Attributes) O[P] = Attributes.value;
- return O;
- };
-
-
-/***/ }),
-/* 164 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var isObject = __webpack_require__(165);
- module.exports = function (it) {
- if (!isObject(it)) throw TypeError(it + ' is not an object!');
- return it;
- };
-
-
-/***/ }),
-/* 165 */
-/***/ (function(module, exports) {
-
- module.exports = function (it) {
- return typeof it === 'object' ? it !== null : typeof it === 'function';
- };
-
-
-/***/ }),
-/* 166 */
-/***/ (function(module, exports, __webpack_require__) {
-
- module.exports = !__webpack_require__(167) && !__webpack_require__(168)(function () {
- return Object.defineProperty(__webpack_require__(169)('div'), 'a', { get: function () { return 7; } }).a != 7;
- });
-
-
-/***/ }),
-/* 167 */
-/***/ (function(module, exports, __webpack_require__) {
-
- // Thank's IE8 for his funny defineProperty
- module.exports = !__webpack_require__(168)(function () {
- return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7;
- });
-
-
-/***/ }),
-/* 168 */
-/***/ (function(module, exports) {
-
- module.exports = function (exec) {
- try {
- return !!exec();
- } catch (e) {
- return true;
- }
- };
-
-
-/***/ }),
-/* 169 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var isObject = __webpack_require__(165);
- var document = __webpack_require__(158).document;
- // typeof document.createElement is 'object' in old IE
- var is = isObject(document) && isObject(document.createElement);
- module.exports = function (it) {
- return is ? document.createElement(it) : {};
- };
-
-
-/***/ }),
-/* 170 */
-/***/ (function(module, exports, __webpack_require__) {
-
- // 7.1.1 ToPrimitive(input [, PreferredType])
- var isObject = __webpack_require__(165);
- // instead of the ES6 spec version, we didn't implement @@toPrimitive case
- // and the second argument - flag - preferred type is a string
- module.exports = function (it, S) {
- if (!isObject(it)) return it;
- var fn, val;
- if (S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val;
- if (typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it))) return val;
- if (!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val;
- throw TypeError("Can't convert object to primitive value");
- };
-
-
-/***/ }),
-/* 171 */
-/***/ (function(module, exports) {
-
- module.exports = function (bitmap, value) {
- return {
- enumerable: !(bitmap & 1),
- configurable: !(bitmap & 2),
- writable: !(bitmap & 4),
- value: value
- };
- };
-
-
-/***/ }),
-/* 172 */
-/***/ (function(module, exports) {
-
- var hasOwnProperty = {}.hasOwnProperty;
- module.exports = function (it, key) {
- return hasOwnProperty.call(it, key);
- };
-
-
-/***/ }),
-/* 173 */
-/***/ (function(module, exports, __webpack_require__) {
-
- 'use strict';
- // 19.1.2.1 Object.assign(target, source, ...)
- var getKeys = __webpack_require__(174);
- var gOPS = __webpack_require__(189);
- var pIE = __webpack_require__(190);
- var toObject = __webpack_require__(191);
- var IObject = __webpack_require__(177);
- var $assign = Object.assign;
-
- // should work with symbols and should have deterministic property order (V8 bug)
- module.exports = !$assign || __webpack_require__(168)(function () {
- var A = {};
- var B = {};
- // eslint-disable-next-line no-undef
- var S = Symbol();
- var K = 'abcdefghijklmnopqrst';
- A[S] = 7;
- K.split('').forEach(function (k) { B[k] = k; });
- return $assign({}, A)[S] != 7 || Object.keys($assign({}, B)).join('') != K;
- }) ? function assign(target, source) { // eslint-disable-line no-unused-vars
- var T = toObject(target);
- var aLen = arguments.length;
- var index = 1;
- var getSymbols = gOPS.f;
- var isEnum = pIE.f;
- while (aLen > index) {
- var S = IObject(arguments[index++]);
- var keys = getSymbols ? getKeys(S).concat(getSymbols(S)) : getKeys(S);
- var length = keys.length;
- var j = 0;
- var key;
- while (length > j) if (isEnum.call(S, key = keys[j++])) T[key] = S[key];
- } return T;
- } : $assign;
-
-
-/***/ }),
-/* 174 */
-/***/ (function(module, exports, __webpack_require__) {
-
- // 19.1.2.14 / 15.2.3.14 Object.keys(O)
- var $keys = __webpack_require__(175);
- var enumBugKeys = __webpack_require__(188);
-
- module.exports = Object.keys || function keys(O) {
- return $keys(O, enumBugKeys);
- };
-
-
-/***/ }),
-/* 175 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var has = __webpack_require__(172);
- var toIObject = __webpack_require__(176);
- var arrayIndexOf = __webpack_require__(180)(false);
- var IE_PROTO = __webpack_require__(184)('IE_PROTO');
-
- module.exports = function (object, names) {
- var O = toIObject(object);
- var i = 0;
- var result = [];
- var key;
- for (key in O) if (key != IE_PROTO) has(O, key) && result.push(key);
- // Don't enum bug & hidden keys
- while (names.length > i) if (has(O, key = names[i++])) {
- ~arrayIndexOf(result, key) || result.push(key);
- }
- return result;
- };
-
-
-/***/ }),
-/* 176 */
-/***/ (function(module, exports, __webpack_require__) {
-
- // to indexed object, toObject with fallback for non-array-like ES3 strings
- var IObject = __webpack_require__(177);
- var defined = __webpack_require__(179);
- module.exports = function (it) {
- return IObject(defined(it));
- };
-
-
-/***/ }),
-/* 177 */
-/***/ (function(module, exports, __webpack_require__) {
-
- // fallback for non-array-like ES3 and non-enumerable old V8 strings
- var cof = __webpack_require__(178);
- // eslint-disable-next-line no-prototype-builtins
- module.exports = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
- return cof(it) == 'String' ? it.split('') : Object(it);
- };
-
-
-/***/ }),
-/* 178 */
-/***/ (function(module, exports) {
-
- var toString = {}.toString;
-
- module.exports = function (it) {
- return toString.call(it).slice(8, -1);
- };
-
-
-/***/ }),
-/* 179 */
-/***/ (function(module, exports) {
-
- // 7.2.1 RequireObjectCoercible(argument)
- module.exports = function (it) {
- if (it == undefined) throw TypeError("Can't call method on " + it);
- return it;
- };
-
-
-/***/ }),
-/* 180 */
-/***/ (function(module, exports, __webpack_require__) {
-
- // false -> Array#indexOf
- // true -> Array#includes
- var toIObject = __webpack_require__(176);
- var toLength = __webpack_require__(181);
- var toAbsoluteIndex = __webpack_require__(183);
- module.exports = function (IS_INCLUDES) {
- return function ($this, el, fromIndex) {
- var O = toIObject($this);
- var length = toLength(O.length);
- var index = toAbsoluteIndex(fromIndex, length);
- var value;
- // Array#includes uses SameValueZero equality algorithm
- // eslint-disable-next-line no-self-compare
- if (IS_INCLUDES && el != el) while (length > index) {
- value = O[index++];
- // eslint-disable-next-line no-self-compare
- if (value != value) return true;
- // Array#indexOf ignores holes, Array#includes - not
- } else for (;length > index; index++) if (IS_INCLUDES || index in O) {
- if (O[index] === el) return IS_INCLUDES || index || 0;
- } return !IS_INCLUDES && -1;
- };
- };
-
-
-/***/ }),
-/* 181 */
-/***/ (function(module, exports, __webpack_require__) {
-
- // 7.1.15 ToLength
- var toInteger = __webpack_require__(182);
- var min = Math.min;
- module.exports = function (it) {
- return it > 0 ? min(toInteger(it), 0x1fffffffffffff) : 0; // pow(2, 53) - 1 == 9007199254740991
- };
-
-
-/***/ }),
-/* 182 */
-/***/ (function(module, exports) {
-
- // 7.1.4 ToInteger
- var ceil = Math.ceil;
- var floor = Math.floor;
- module.exports = function (it) {
- return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it);
- };
-
-
-/***/ }),
-/* 183 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var toInteger = __webpack_require__(182);
- var max = Math.max;
- var min = Math.min;
- module.exports = function (index, length) {
- index = toInteger(index);
- return index < 0 ? max(index + length, 0) : min(index, length);
- };
-
-
-/***/ }),
-/* 184 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var shared = __webpack_require__(185)('keys');
- var uid = __webpack_require__(187);
- module.exports = function (key) {
- return shared[key] || (shared[key] = uid(key));
- };
-
-
-/***/ }),
-/* 185 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var core = __webpack_require__(159);
- var global = __webpack_require__(158);
- var SHARED = '__core-js_shared__';
- var store = global[SHARED] || (global[SHARED] = {});
-
- (module.exports = function (key, value) {
- return store[key] || (store[key] = value !== undefined ? value : {});
- })('versions', []).push({
- version: core.version,
- mode: __webpack_require__(186) ? 'pure' : 'global',
- copyright: '© 2019 Denis Pushkarev (zloirock.ru)'
- });
-
-
-/***/ }),
-/* 186 */
-/***/ (function(module, exports) {
-
- module.exports = true;
-
-
-/***/ }),
-/* 187 */
-/***/ (function(module, exports) {
-
- var id = 0;
- var px = Math.random();
- module.exports = function (key) {
- return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36));
- };
-
-
-/***/ }),
-/* 188 */
-/***/ (function(module, exports) {
-
- // IE 8- don't enum bug keys
- module.exports = (
- 'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf'
- ).split(',');
-
-
-/***/ }),
-/* 189 */
-/***/ (function(module, exports) {
-
- exports.f = Object.getOwnPropertySymbols;
-
-
-/***/ }),
-/* 190 */
-/***/ (function(module, exports) {
-
- exports.f = {}.propertyIsEnumerable;
-
-
-/***/ }),
-/* 191 */
-/***/ (function(module, exports, __webpack_require__) {
-
- // 7.1.13 ToObject(argument)
- var defined = __webpack_require__(179);
- module.exports = function (it) {
- return Object(defined(it));
- };
-
-
-/***/ }),
-/* 192 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {'use strict';
-
- var isProduction = process.env.NODE_ENV === 'production';
- var prefix = 'Invariant failed';
- function invariant(condition, message) {
- if (condition) {
- return;
- }
-
- if (isProduction) {
- throw new Error(prefix);
- } else {
- throw new Error(prefix + ": " + (message || ''));
- }
- }
-
- module.exports = invariant;
-
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 193 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {'use strict';
-
- Object.defineProperty(exports, '__esModule', { value: true });
-
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
- var invariant = _interopDefault(__webpack_require__(192));
-
- var getRect = function getRect(_ref) {
- var top = _ref.top,
- right = _ref.right,
- bottom = _ref.bottom,
- left = _ref.left;
- var width = right - left;
- var height = bottom - top;
- var rect = {
- top: top,
- right: right,
- bottom: bottom,
- left: left,
- width: width,
- height: height,
- x: left,
- y: top,
- center: {
- x: (right + left) / 2,
- y: (bottom + top) / 2
- }
- };
- return rect;
- };
- var expand = function expand(target, expandBy) {
- return {
- top: target.top - expandBy.top,
- left: target.left - expandBy.left,
- bottom: target.bottom + expandBy.bottom,
- right: target.right + expandBy.right
- };
- };
- var shrink = function shrink(target, shrinkBy) {
- return {
- top: target.top + shrinkBy.top,
- left: target.left + shrinkBy.left,
- bottom: target.bottom - shrinkBy.bottom,
- right: target.right - shrinkBy.right
- };
- };
-
- var shift = function shift(target, shiftBy) {
- return {
- top: target.top + shiftBy.y,
- left: target.left + shiftBy.x,
- bottom: target.bottom + shiftBy.y,
- right: target.right + shiftBy.x
- };
- };
-
- var noSpacing = {
- top: 0,
- right: 0,
- bottom: 0,
- left: 0
- };
- var createBox = function createBox(_ref2) {
- var borderBox = _ref2.borderBox,
- _ref2$margin = _ref2.margin,
- margin = _ref2$margin === void 0 ? noSpacing : _ref2$margin,
- _ref2$border = _ref2.border,
- border = _ref2$border === void 0 ? noSpacing : _ref2$border,
- _ref2$padding = _ref2.padding,
- padding = _ref2$padding === void 0 ? noSpacing : _ref2$padding;
- var marginBox = getRect(expand(borderBox, margin));
- var paddingBox = getRect(shrink(borderBox, border));
- var contentBox = getRect(shrink(paddingBox, padding));
- return {
- marginBox: marginBox,
- borderBox: getRect(borderBox),
- paddingBox: paddingBox,
- contentBox: contentBox,
- margin: margin,
- border: border,
- padding: padding
- };
- };
-
- var parse = function parse(raw) {
- var value = raw.slice(0, -2);
- var suffix = raw.slice(-2);
- !(suffix === 'px') ? process.env.NODE_ENV !== "production" ? invariant(false, "Expected value to be a pixel value.\n Expected form: 10px\n Actual value: " + raw + "\n ") : invariant(false) : void 0;
- var result = Number(value);
- !!isNaN(result) ? process.env.NODE_ENV !== "production" ? invariant(false, "Could not parse value [raw: " + raw + ", without suffix: " + value + "]") : invariant(false) : void 0;
- return result;
- };
-
- var getWindowScroll = function getWindowScroll() {
- return {
- x: window.pageXOffset,
- y: window.pageYOffset
- };
- };
-
- var offset = function offset(original, change) {
- var borderBox = original.borderBox,
- border = original.border,
- margin = original.margin,
- padding = original.padding;
- var shifted = shift(borderBox, change);
- return createBox({
- borderBox: shifted,
- border: border,
- margin: margin,
- padding: padding
- });
- };
- var withScroll = function withScroll(original, scroll) {
- if (scroll === void 0) {
- scroll = getWindowScroll();
- }
-
- return offset(original, scroll);
- };
- var calculateBox = function calculateBox(borderBox, styles) {
- var margin = {
- top: parse(styles.marginTop),
- right: parse(styles.marginRight),
- bottom: parse(styles.marginBottom),
- left: parse(styles.marginLeft)
- };
- var padding = {
- top: parse(styles.paddingTop),
- right: parse(styles.paddingRight),
- bottom: parse(styles.paddingBottom),
- left: parse(styles.paddingLeft)
- };
- var border = {
- top: parse(styles.borderTopWidth),
- right: parse(styles.borderRightWidth),
- bottom: parse(styles.borderBottomWidth),
- left: parse(styles.borderLeftWidth)
- };
- return createBox({
- borderBox: borderBox,
- margin: margin,
- padding: padding,
- border: border
- });
- };
- var getBox = function getBox(el) {
- var borderBox = el.getBoundingClientRect();
- var styles = window.getComputedStyle(el);
- return calculateBox(borderBox, styles);
- };
-
- exports.getRect = getRect;
- exports.expand = expand;
- exports.shrink = shrink;
- exports.createBox = createBox;
- exports.offset = offset;
- exports.withScroll = withScroll;
- exports.calculateBox = calculateBox;
- exports.getBox = getBox;
-
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 194 */
-/***/ (function(module, exports, __webpack_require__) {
-
- module.exports = __webpack_require__(195);
-
-/***/ }),
-/* 195 */
-/***/ (function(module, exports, __webpack_require__) {
-
- __webpack_require__(196);
- module.exports = __webpack_require__(159).Object.keys;
-
-
-/***/ }),
-/* 196 */
-/***/ (function(module, exports, __webpack_require__) {
-
- // 19.1.2.14 Object.keys(O)
- var toObject = __webpack_require__(191);
- var $keys = __webpack_require__(174);
-
- __webpack_require__(197)('keys', function () {
- return function keys(it) {
- return $keys(toObject(it));
- };
- });
-
-
-/***/ }),
-/* 197 */
-/***/ (function(module, exports, __webpack_require__) {
-
- // most Object methods by ES6 should accept primitives
- var $export = __webpack_require__(157);
- var core = __webpack_require__(159);
- var fails = __webpack_require__(168);
- module.exports = function (KEY, exec) {
- var fn = (core.Object || {})[KEY] || Object[KEY];
- var exp = {};
- exp[KEY] = exec(fn);
- $export($export.S + $export.F * fails(function () { fn(1); }), 'Object', exp);
- };
-
-
-/***/ }),
-/* 198 */
-/***/ (function(module, exports) {
-
- 'use strict';
-
- var simpleIsEqual = function simpleIsEqual(a, b) {
- return a === b;
- };
-
- function index (resultFn, isEqual) {
- if (isEqual === void 0) {
- isEqual = simpleIsEqual;
- }
-
- var lastThis;
- var lastArgs = [];
- var lastResult;
- var calledOnce = false;
-
- var isNewArgEqualToLast = function isNewArgEqualToLast(newArg, index) {
- return isEqual(newArg, lastArgs[index]);
- };
-
- var result = function result() {
- for (var _len = arguments.length, newArgs = new Array(_len), _key = 0; _key < _len; _key++) {
- newArgs[_key] = arguments[_key];
- }
-
- if (calledOnce && lastThis === this && newArgs.length === lastArgs.length && newArgs.every(isNewArgEqualToLast)) {
- return lastResult;
- }
-
- lastResult = resultFn.apply(this, newArgs);
- calledOnce = true;
- lastThis = this;
- lastArgs = newArgs;
- return lastResult;
- };
-
- return result;
- }
-
- module.exports = index;
-
-
-/***/ }),
-/* 199 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {'use strict';
-
- Object.defineProperty(exports, '__esModule', { value: true });
-
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
- var $$observable = _interopDefault(__webpack_require__(200));
-
- /**
- * These are private action types reserved by Redux.
- * For any unknown actions, you must return the current state.
- * If the current state is undefined, you must return the initial state.
- * Do not reference these action types directly in your code.
- */
- var randomString = function randomString() {
- return Math.random().toString(36).substring(7).split('').join('.');
- };
-
- var ActionTypes = {
- INIT: "@@redux/INIT" + randomString(),
- REPLACE: "@@redux/REPLACE" + randomString(),
- PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
- return "@@redux/PROBE_UNKNOWN_ACTION" + randomString();
- }
- };
-
- /**
- * @param {any} obj The object to inspect.
- * @returns {boolean} True if the argument appears to be a plain object.
- */
- function isPlainObject(obj) {
- if (typeof obj !== 'object' || obj === null) return false;
- var proto = obj;
-
- while (Object.getPrototypeOf(proto) !== null) {
- proto = Object.getPrototypeOf(proto);
- }
-
- return Object.getPrototypeOf(obj) === proto;
- }
-
- /**
- * Creates a Redux store that holds the state tree.
- * The only way to change the data in the store is to call `dispatch()` on it.
- *
- * There should only be a single store in your app. To specify how different
- * parts of the state tree respond to actions, you may combine several reducers
- * into a single reducer function by using `combineReducers`.
- *
- * @param {Function} reducer A function that returns the next state tree, given
- * the current state tree and the action to handle.
- *
- * @param {any} [preloadedState] The initial state. You may optionally specify it
- * to hydrate the state from the server in universal apps, or to restore a
- * previously serialized user session.
- * If you use `combineReducers` to produce the root reducer function, this must be
- * an object with the same shape as `combineReducers` keys.
- *
- * @param {Function} [enhancer] The store enhancer. You may optionally specify it
- * to enhance the store with third-party capabilities such as middleware,
- * time travel, persistence, etc. The only store enhancer that ships with Redux
- * is `applyMiddleware()`.
- *
- * @returns {Store} A Redux store that lets you read the state, dispatch actions
- * and subscribe to changes.
- */
-
- function createStore(reducer, preloadedState, enhancer) {
- var _ref2;
-
- if (typeof preloadedState === 'function' && typeof enhancer === 'function' || typeof enhancer === 'function' && typeof arguments[3] === 'function') {
- throw new Error('It looks like you are passing several store enhancers to ' + 'createStore(). This is not supported. Instead, compose them ' + 'together to a single function');
- }
-
- if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
- enhancer = preloadedState;
- preloadedState = undefined;
- }
-
- if (typeof enhancer !== 'undefined') {
- if (typeof enhancer !== 'function') {
- throw new Error('Expected the enhancer to be a function.');
- }
-
- return enhancer(createStore)(reducer, preloadedState);
- }
-
- if (typeof reducer !== 'function') {
- throw new Error('Expected the reducer to be a function.');
- }
-
- var currentReducer = reducer;
- var currentState = preloadedState;
- var currentListeners = [];
- var nextListeners = currentListeners;
- var isDispatching = false;
-
- function ensureCanMutateNextListeners() {
- if (nextListeners === currentListeners) {
- nextListeners = currentListeners.slice();
- }
- }
- /**
- * Reads the state tree managed by the store.
- *
- * @returns {any} The current state tree of your application.
- */
-
-
- function getState() {
- if (isDispatching) {
- throw new Error('You may not call store.getState() while the reducer is executing. ' + 'The reducer has already received the state as an argument. ' + 'Pass it down from the top reducer instead of reading it from the store.');
- }
-
- return currentState;
- }
- /**
- * Adds a change listener. It will be called any time an action is dispatched,
- * and some part of the state tree may potentially have changed. You may then
- * call `getState()` to read the current state tree inside the callback.
- *
- * You may call `dispatch()` from a change listener, with the following
- * caveats:
- *
- * 1. The subscriptions are snapshotted just before every `dispatch()` call.
- * If you subscribe or unsubscribe while the listeners are being invoked, this
- * will not have any effect on the `dispatch()` that is currently in progress.
- * However, the next `dispatch()` call, whether nested or not, will use a more
- * recent snapshot of the subscription list.
- *
- * 2. The listener should not expect to see all state changes, as the state
- * might have been updated multiple times during a nested `dispatch()` before
- * the listener is called. It is, however, guaranteed that all subscribers
- * registered before the `dispatch()` started will be called with the latest
- * state by the time it exits.
- *
- * @param {Function} listener A callback to be invoked on every dispatch.
- * @returns {Function} A function to remove this change listener.
- */
-
-
- function subscribe(listener) {
- if (typeof listener !== 'function') {
- throw new Error('Expected the listener to be a function.');
- }
-
- if (isDispatching) {
- throw new Error('You may not call store.subscribe() while the reducer is executing. ' + 'If you would like to be notified after the store has been updated, subscribe from a ' + 'component and invoke store.getState() in the callback to access the latest state. ' + 'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.');
- }
-
- var isSubscribed = true;
- ensureCanMutateNextListeners();
- nextListeners.push(listener);
- return function unsubscribe() {
- if (!isSubscribed) {
- return;
- }
-
- if (isDispatching) {
- throw new Error('You may not unsubscribe from a store listener while the reducer is executing. ' + 'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.');
- }
-
- isSubscribed = false;
- ensureCanMutateNextListeners();
- var index = nextListeners.indexOf(listener);
- nextListeners.splice(index, 1);
- };
- }
- /**
- * Dispatches an action. It is the only way to trigger a state change.
- *
- * The `reducer` function, used to create the store, will be called with the
- * current state tree and the given `action`. Its return value will
- * be considered the **next** state of the tree, and the change listeners
- * will be notified.
- *
- * The base implementation only supports plain object actions. If you want to
- * dispatch a Promise, an Observable, a thunk, or something else, you need to
- * wrap your store creating function into the corresponding middleware. For
- * example, see the documentation for the `redux-thunk` package. Even the
- * middleware will eventually dispatch plain object actions using this method.
- *
- * @param {Object} action A plain object representing “what changed”. It is
- * a good idea to keep actions serializable so you can record and replay user
- * sessions, or use the time travelling `redux-devtools`. An action must have
- * a `type` property which may not be `undefined`. It is a good idea to use
- * string constants for action types.
- *
- * @returns {Object} For convenience, the same action object you dispatched.
- *
- * Note that, if you use a custom middleware, it may wrap `dispatch()` to
- * return something else (for example, a Promise you can await).
- */
-
-
- function dispatch(action) {
- if (!isPlainObject(action)) {
- throw new Error('Actions must be plain objects. ' + 'Use custom middleware for async actions.');
- }
-
- if (typeof action.type === 'undefined') {
- throw new Error('Actions may not have an undefined "type" property. ' + 'Have you misspelled a constant?');
- }
-
- if (isDispatching) {
- throw new Error('Reducers may not dispatch actions.');
- }
-
- try {
- isDispatching = true;
- currentState = currentReducer(currentState, action);
- } finally {
- isDispatching = false;
- }
-
- var listeners = currentListeners = nextListeners;
-
- for (var i = 0; i < listeners.length; i++) {
- var listener = listeners[i];
- listener();
- }
-
- return action;
- }
- /**
- * Replaces the reducer currently used by the store to calculate the state.
- *
- * You might need this if your app implements code splitting and you want to
- * load some of the reducers dynamically. You might also need this if you
- * implement a hot reloading mechanism for Redux.
- *
- * @param {Function} nextReducer The reducer for the store to use instead.
- * @returns {void}
- */
-
-
- function replaceReducer(nextReducer) {
- if (typeof nextReducer !== 'function') {
- throw new Error('Expected the nextReducer to be a function.');
- }
-
- currentReducer = nextReducer;
- dispatch({
- type: ActionTypes.REPLACE
- });
- }
- /**
- * Interoperability point for observable/reactive libraries.
- * @returns {observable} A minimal observable of state changes.
- * For more information, see the observable proposal:
- * https://github.com/tc39/proposal-observable
- */
-
-
- function observable() {
- var _ref;
-
- var outerSubscribe = subscribe;
- return _ref = {
- /**
- * The minimal observable subscription method.
- * @param {Object} observer Any object that can be used as an observer.
- * The observer object should have a `next` method.
- * @returns {subscription} An object with an `unsubscribe` method that can
- * be used to unsubscribe the observable from the store, and prevent further
- * emission of values from the observable.
- */
- subscribe: function subscribe(observer) {
- if (typeof observer !== 'object' || observer === null) {
- throw new TypeError('Expected the observer to be an object.');
- }
-
- function observeState() {
- if (observer.next) {
- observer.next(getState());
- }
- }
-
- observeState();
- var unsubscribe = outerSubscribe(observeState);
- return {
- unsubscribe: unsubscribe
- };
- }
- }, _ref[$$observable] = function () {
- return this;
- }, _ref;
- } // When a store is created, an "INIT" action is dispatched so that every
- // reducer returns their initial state. This effectively populates
- // the initial state tree.
-
-
- dispatch({
- type: ActionTypes.INIT
- });
- return _ref2 = {
- dispatch: dispatch,
- subscribe: subscribe,
- getState: getState,
- replaceReducer: replaceReducer
- }, _ref2[$$observable] = observable, _ref2;
- }
-
- /**
- * Prints a warning in the console if it exists.
- *
- * @param {String} message The warning message.
- * @returns {void}
- */
- function warning(message) {
- /* eslint-disable no-console */
- if (typeof console !== 'undefined' && typeof console.error === 'function') {
- console.error(message);
- }
- /* eslint-enable no-console */
-
-
- try {
- // This error was thrown as a convenience so that if you enable
- // "break on all exceptions" in your console,
- // it would pause the execution at this line.
- throw new Error(message);
- } catch (e) {} // eslint-disable-line no-empty
-
- }
-
- function getUndefinedStateErrorMessage(key, action) {
- var actionType = action && action.type;
- var actionDescription = actionType && "action \"" + String(actionType) + "\"" || 'an action';
- return "Given " + actionDescription + ", reducer \"" + key + "\" returned undefined. " + "To ignore an action, you must explicitly return the previous state. " + "If you want this reducer to hold no value, you can return null instead of undefined.";
- }
-
- function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {
- var reducerKeys = Object.keys(reducers);
- var argumentName = action && action.type === ActionTypes.INIT ? 'preloadedState argument passed to createStore' : 'previous state received by the reducer';
-
- if (reducerKeys.length === 0) {
- return 'Store does not have a valid reducer. Make sure the argument passed ' + 'to combineReducers is an object whose values are reducers.';
- }
-
- if (!isPlainObject(inputState)) {
- return "The " + argumentName + " has unexpected type of \"" + {}.toString.call(inputState).match(/\s([a-z|A-Z]+)/)[1] + "\". Expected argument to be an object with the following " + ("keys: \"" + reducerKeys.join('", "') + "\"");
- }
-
- var unexpectedKeys = Object.keys(inputState).filter(function (key) {
- return !reducers.hasOwnProperty(key) && !unexpectedKeyCache[key];
- });
- unexpectedKeys.forEach(function (key) {
- unexpectedKeyCache[key] = true;
- });
- if (action && action.type === ActionTypes.REPLACE) return;
-
- if (unexpectedKeys.length > 0) {
- return "Unexpected " + (unexpectedKeys.length > 1 ? 'keys' : 'key') + " " + ("\"" + unexpectedKeys.join('", "') + "\" found in " + argumentName + ". ") + "Expected to find one of the known reducer keys instead: " + ("\"" + reducerKeys.join('", "') + "\". Unexpected keys will be ignored.");
- }
- }
-
- function assertReducerShape(reducers) {
- Object.keys(reducers).forEach(function (key) {
- var reducer = reducers[key];
- var initialState = reducer(undefined, {
- type: ActionTypes.INIT
- });
-
- if (typeof initialState === 'undefined') {
- throw new Error("Reducer \"" + key + "\" returned undefined during initialization. " + "If the state passed to the reducer is undefined, you must " + "explicitly return the initial state. The initial state may " + "not be undefined. If you don't want to set a value for this reducer, " + "you can use null instead of undefined.");
- }
-
- if (typeof reducer(undefined, {
- type: ActionTypes.PROBE_UNKNOWN_ACTION()
- }) === 'undefined') {
- throw new Error("Reducer \"" + key + "\" returned undefined when probed with a random type. " + ("Don't try to handle " + ActionTypes.INIT + " or other actions in \"redux/*\" ") + "namespace. They are considered private. Instead, you must return the " + "current state for any unknown actions, unless it is undefined, " + "in which case you must return the initial state, regardless of the " + "action type. The initial state may not be undefined, but can be null.");
- }
- });
- }
- /**
- * Turns an object whose values are different reducer functions, into a single
- * reducer function. It will call every child reducer, and gather their results
- * into a single state object, whose keys correspond to the keys of the passed
- * reducer functions.
- *
- * @param {Object} reducers An object whose values correspond to different
- * reducer functions that need to be combined into one. One handy way to obtain
- * it is to use ES6 `import * as reducers` syntax. The reducers may never return
- * undefined for any action. Instead, they should return their initial state
- * if the state passed to them was undefined, and the current state for any
- * unrecognized action.
- *
- * @returns {Function} A reducer function that invokes every reducer inside the
- * passed object, and builds a state object with the same shape.
- */
-
-
- function combineReducers(reducers) {
- var reducerKeys = Object.keys(reducers);
- var finalReducers = {};
-
- for (var i = 0; i < reducerKeys.length; i++) {
- var key = reducerKeys[i];
-
- if (process.env.NODE_ENV !== 'production') {
- if (typeof reducers[key] === 'undefined') {
- warning("No reducer provided for key \"" + key + "\"");
- }
- }
-
- if (typeof reducers[key] === 'function') {
- finalReducers[key] = reducers[key];
- }
- }
-
- var finalReducerKeys = Object.keys(finalReducers);
- var unexpectedKeyCache;
-
- if (process.env.NODE_ENV !== 'production') {
- unexpectedKeyCache = {};
- }
-
- var shapeAssertionError;
-
- try {
- assertReducerShape(finalReducers);
- } catch (e) {
- shapeAssertionError = e;
- }
-
- return function combination(state, action) {
- if (state === void 0) {
- state = {};
- }
-
- if (shapeAssertionError) {
- throw shapeAssertionError;
- }
-
- if (process.env.NODE_ENV !== 'production') {
- var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache);
-
- if (warningMessage) {
- warning(warningMessage);
- }
- }
-
- var hasChanged = false;
- var nextState = {};
-
- for (var _i = 0; _i < finalReducerKeys.length; _i++) {
- var _key = finalReducerKeys[_i];
- var reducer = finalReducers[_key];
- var previousStateForKey = state[_key];
- var nextStateForKey = reducer(previousStateForKey, action);
-
- if (typeof nextStateForKey === 'undefined') {
- var errorMessage = getUndefinedStateErrorMessage(_key, action);
- throw new Error(errorMessage);
- }
-
- nextState[_key] = nextStateForKey;
- hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
- }
-
- return hasChanged ? nextState : state;
- };
- }
-
- function bindActionCreator(actionCreator, dispatch) {
- return function () {
- return dispatch(actionCreator.apply(this, arguments));
- };
- }
- /**
- * Turns an object whose values are action creators, into an object with the
- * same keys, but with every function wrapped into a `dispatch` call so they
- * may be invoked directly. This is just a convenience method, as you can call
- * `store.dispatch(MyActionCreators.doSomething())` yourself just fine.
- *
- * For convenience, you can also pass a single function as the first argument,
- * and get a function in return.
- *
- * @param {Function|Object} actionCreators An object whose values are action
- * creator functions. One handy way to obtain it is to use ES6 `import * as`
- * syntax. You may also pass a single function.
- *
- * @param {Function} dispatch The `dispatch` function available on your Redux
- * store.
- *
- * @returns {Function|Object} The object mimicking the original object, but with
- * every action creator wrapped into the `dispatch` call. If you passed a
- * function as `actionCreators`, the return value will also be a single
- * function.
- */
-
-
- function bindActionCreators(actionCreators, dispatch) {
- if (typeof actionCreators === 'function') {
- return bindActionCreator(actionCreators, dispatch);
- }
-
- if (typeof actionCreators !== 'object' || actionCreators === null) {
- throw new Error("bindActionCreators expected an object or a function, instead received " + (actionCreators === null ? 'null' : typeof actionCreators) + ". " + "Did you write \"import ActionCreators from\" instead of \"import * as ActionCreators from\"?");
- }
-
- var keys = Object.keys(actionCreators);
- var boundActionCreators = {};
-
- for (var i = 0; i < keys.length; i++) {
- var key = keys[i];
- var actionCreator = actionCreators[key];
-
- if (typeof actionCreator === 'function') {
- boundActionCreators[key] = bindActionCreator(actionCreator, dispatch);
- }
- }
-
- return boundActionCreators;
- }
-
- 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 _objectSpread(target) {
- for (var i = 1; i < arguments.length; i++) {
- var source = arguments[i] != null ? arguments[i] : {};
- var ownKeys = Object.keys(source);
-
- if (typeof Object.getOwnPropertySymbols === 'function') {
- ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
- return Object.getOwnPropertyDescriptor(source, sym).enumerable;
- }));
- }
-
- ownKeys.forEach(function (key) {
- _defineProperty(target, key, source[key]);
- });
- }
-
- return target;
- }
-
- /**
- * Composes single-argument functions from right to left. The rightmost
- * function can take multiple arguments as it provides the signature for
- * the resulting composite function.
- *
- * @param {...Function} funcs The functions to compose.
- * @returns {Function} A function obtained by composing the argument functions
- * from right to left. For example, compose(f, g, h) is identical to doing
- * (...args) => f(g(h(...args))).
- */
- function compose() {
- for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
- funcs[_key] = arguments[_key];
- }
-
- if (funcs.length === 0) {
- return function (arg) {
- return arg;
- };
- }
-
- if (funcs.length === 1) {
- return funcs[0];
- }
-
- return funcs.reduce(function (a, b) {
- return function () {
- return a(b.apply(void 0, arguments));
- };
- });
- }
-
- /**
- * Creates a store enhancer that applies middleware to the dispatch method
- * of the Redux store. This is handy for a variety of tasks, such as expressing
- * asynchronous actions in a concise manner, or logging every action payload.
- *
- * See `redux-thunk` package as an example of the Redux middleware.
- *
- * Because middleware is potentially asynchronous, this should be the first
- * store enhancer in the composition chain.
- *
- * Note that each middleware will be given the `dispatch` and `getState` functions
- * as named arguments.
- *
- * @param {...Function} middlewares The middleware chain to be applied.
- * @returns {Function} A store enhancer applying the middleware.
- */
-
- function applyMiddleware() {
- for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) {
- middlewares[_key] = arguments[_key];
- }
-
- return function (createStore) {
- return function () {
- var store = createStore.apply(void 0, arguments);
-
- var _dispatch = function dispatch() {
- throw new Error("Dispatching while constructing your middleware is not allowed. " + "Other middleware would not be applied to this dispatch.");
- };
-
- var middlewareAPI = {
- getState: store.getState,
- dispatch: function dispatch() {
- return _dispatch.apply(void 0, arguments);
- }
- };
- var chain = middlewares.map(function (middleware) {
- return middleware(middlewareAPI);
- });
- _dispatch = compose.apply(void 0, chain)(store.dispatch);
- return _objectSpread({}, store, {
- dispatch: _dispatch
- });
- };
- };
- }
-
- /*
- * This is a dummy function to check if the function name has been altered by minification.
- * If the function has been minified and NODE_ENV !== 'production', warn the user.
- */
-
- function isCrushed() {}
-
- if (process.env.NODE_ENV !== 'production' && typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed') {
- warning('You are currently using minified code outside of NODE_ENV === "production". ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' + 'to ensure you have the correct code for your production build.');
- }
-
- exports.createStore = createStore;
- exports.combineReducers = combineReducers;
- exports.bindActionCreators = bindActionCreators;
- exports.applyMiddleware = applyMiddleware;
- exports.compose = compose;
- exports.__DO_NOT_USE__ActionTypes = ActionTypes;
-
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 200 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(global, module) {'use strict';
-
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
-
- var _ponyfill = __webpack_require__(202);
-
- var _ponyfill2 = _interopRequireDefault(_ponyfill);
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var root; /* global window */
-
-
- if (typeof self !== 'undefined') {
- root = self;
- } else if (typeof window !== 'undefined') {
- root = window;
- } else if (typeof global !== 'undefined') {
- root = global;
- } else if (true) {
- root = module;
- } else {
- root = Function('return this')();
- }
-
- var result = (0, _ponyfill2['default'])(root);
- exports['default'] = result;
- /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(201)(module)))
-
-/***/ }),
-/* 201 */
-/***/ (function(module, exports) {
-
- module.exports = function(module) {
- if(!module.webpackPolyfill) {
- module.deprecate = function() {};
- module.paths = [];
- // module.parent = undefined by default
- module.children = [];
- module.webpackPolyfill = 1;
- }
- return module;
- }
-
-
-/***/ }),
-/* 202 */
-/***/ (function(module, exports) {
-
- 'use strict';
-
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports['default'] = symbolObservablePonyfill;
- function symbolObservablePonyfill(root) {
- var result;
- var _Symbol = root.Symbol;
-
- if (typeof _Symbol === 'function') {
- if (_Symbol.observable) {
- result = _Symbol.observable;
- } else {
- result = _Symbol('observable');
- _Symbol.observable = result;
- }
- } else {
- result = '@@observable';
- }
-
- return result;
- };
-
-/***/ }),
-/* 203 */
-/***/ (function(module, exports) {
-
- 'use strict';
-
- var index = (function (fn) {
- var lastArgs = [];
- var frameId = null;
-
- var wrapperFn = function wrapperFn() {
- for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
-
- lastArgs = args;
-
- if (frameId) {
- return;
- }
-
- frameId = requestAnimationFrame(function () {
- frameId = null;
- fn.apply(undefined, lastArgs);
- });
- };
-
- wrapperFn.cancel = function () {
- if (!frameId) {
- return;
- }
-
- cancelAnimationFrame(frameId);
- frameId = null;
- };
-
- var resultFn = wrapperFn;
-
- return resultFn;
- });
-
- module.exports = index;
-
-
-/***/ }),
-/* 204 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var _Object$create = __webpack_require__(205);
-
- function _inheritsLoose(subClass, superClass) {
- subClass.prototype = _Object$create(superClass.prototype);
- subClass.prototype.constructor = subClass;
- subClass.__proto__ = superClass;
- }
-
- module.exports = _inheritsLoose;
-
-/***/ }),
-/* 205 */
-/***/ (function(module, exports, __webpack_require__) {
-
- module.exports = __webpack_require__(206);
-
-/***/ }),
-/* 206 */
-/***/ (function(module, exports, __webpack_require__) {
-
- __webpack_require__(207);
- var $Object = __webpack_require__(159).Object;
- module.exports = function create(P, D) {
- return $Object.create(P, D);
- };
-
-
-/***/ }),
-/* 207 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var $export = __webpack_require__(157);
- // 19.1.2.2 / 15.2.3.5 Object.create(O [, Properties])
- $export($export.S, 'Object', { create: __webpack_require__(208) });
-
-
-/***/ }),
-/* 208 */
-/***/ (function(module, exports, __webpack_require__) {
-
- // 19.1.2.2 / 15.2.3.5 Object.create(O [, Properties])
- var anObject = __webpack_require__(164);
- var dPs = __webpack_require__(209);
- var enumBugKeys = __webpack_require__(188);
- var IE_PROTO = __webpack_require__(184)('IE_PROTO');
- var Empty = function () { /* empty */ };
- var PROTOTYPE = 'prototype';
-
- // Create object with fake `null` prototype: use iframe Object with cleared prototype
- var createDict = function () {
- // Thrash, waste and sodomy: IE GC bug
- var iframe = __webpack_require__(169)('iframe');
- var i = enumBugKeys.length;
- var lt = '<';
- var gt = '>';
- var iframeDocument;
- iframe.style.display = 'none';
- __webpack_require__(210).appendChild(iframe);
- iframe.src = 'javascript:'; // eslint-disable-line no-script-url
- // createDict = iframe.contentWindow.Object;
- // html.removeChild(iframe);
- iframeDocument = iframe.contentWindow.document;
- iframeDocument.open();
- iframeDocument.write(lt + 'script' + gt + 'document.F=Object' + lt + '/script' + gt);
- iframeDocument.close();
- createDict = iframeDocument.F;
- while (i--) delete createDict[PROTOTYPE][enumBugKeys[i]];
- return createDict();
- };
-
- module.exports = Object.create || function create(O, Properties) {
- var result;
- if (O !== null) {
- Empty[PROTOTYPE] = anObject(O);
- result = new Empty();
- Empty[PROTOTYPE] = null;
- // add "__proto__" for Object.getPrototypeOf polyfill
- result[IE_PROTO] = O;
- } else result = createDict();
- return Properties === undefined ? result : dPs(result, Properties);
- };
-
-
-/***/ }),
-/* 209 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var dP = __webpack_require__(163);
- var anObject = __webpack_require__(164);
- var getKeys = __webpack_require__(174);
-
- module.exports = __webpack_require__(167) ? Object.defineProperties : function defineProperties(O, Properties) {
- anObject(O);
- var keys = getKeys(Properties);
- var length = keys.length;
- var i = 0;
- var P;
- while (length > i) dP.f(O, P = keys[i++], Properties[P]);
- return O;
- };
-
-
-/***/ }),
-/* 210 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var document = __webpack_require__(158).document;
- module.exports = document && document.documentElement;
-
-
-/***/ }),
-/* 211 */
-/***/ (function(module, exports, __webpack_require__) {
-
- "use strict";
-
- var _interopRequireDefault = __webpack_require__(14);
-
- var _interopRequireWildcard = __webpack_require__(212);
-
- exports.__esModule = true;
-
- var _Provider = _interopRequireWildcard(__webpack_require__(213));
-
- exports.Provider = _Provider.default;
- exports.createProvider = _Provider.createProvider;
-
- var _connectAdvanced = _interopRequireDefault(__webpack_require__(217));
-
- exports.connectAdvanced = _connectAdvanced.default;
-
- var _connect = _interopRequireDefault(__webpack_require__(226));
-
- exports.connect = _connect.default;
-
-/***/ }),
-/* 212 */
-/***/ (function(module, exports) {
-
- 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;
- }
- }
-
- module.exports = _interopRequireWildcard;
-
-/***/ }),
-/* 213 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {"use strict";
-
- var _interopRequireDefault = __webpack_require__(14);
-
- exports.__esModule = true;
- exports.createProvider = createProvider;
- exports.default = void 0;
-
- var _inheritsLoose2 = _interopRequireDefault(__webpack_require__(214));
-
- var _react = __webpack_require__(1);
-
- var _propTypes = _interopRequireDefault(__webpack_require__(6));
-
- var _PropTypes = __webpack_require__(215);
-
- var _warning = _interopRequireDefault(__webpack_require__(216));
-
- var didWarnAboutReceivingStore = false;
-
- function warnAboutReceivingStore() {
- if (didWarnAboutReceivingStore) {
- return;
- }
-
- didWarnAboutReceivingStore = true;
- (0, _warning.default)(' does not support changing `store` on the fly. ' + 'It is most likely that you see this error because you updated to ' + 'Redux 2.x and React Redux 2.x which no longer hot reload reducers ' + 'automatically. See https://github.com/reduxjs/react-redux/releases/' + 'tag/v2.0.0 for the migration instructions.');
- }
-
- function createProvider(storeKey) {
- var _Provider$childContex;
-
- if (storeKey === void 0) {
- storeKey = 'store';
- }
-
- var subscriptionKey = storeKey + "Subscription";
-
- var Provider =
- /*#__PURE__*/
- function (_Component) {
- (0, _inheritsLoose2.default)(Provider, _Component);
- var _proto = Provider.prototype;
-
- _proto.getChildContext = function getChildContext() {
- var _ref;
-
- return _ref = {}, _ref[storeKey] = this[storeKey], _ref[subscriptionKey] = null, _ref;
- };
-
- function Provider(props, context) {
- var _this;
-
- _this = _Component.call(this, props, context) || this;
- _this[storeKey] = props.store;
- return _this;
- }
-
- _proto.render = function render() {
- return _react.Children.only(this.props.children);
- };
-
- return Provider;
- }(_react.Component);
-
- if (process.env.NODE_ENV !== 'production') {
- Provider.prototype.componentWillReceiveProps = function (nextProps) {
- if (this[storeKey] !== nextProps.store) {
- warnAboutReceivingStore();
- }
- };
- }
-
- Provider.propTypes = {
- store: _PropTypes.storeShape.isRequired,
- children: _propTypes.default.element.isRequired
- };
- Provider.childContextTypes = (_Provider$childContex = {}, _Provider$childContex[storeKey] = _PropTypes.storeShape.isRequired, _Provider$childContex[subscriptionKey] = _PropTypes.subscriptionShape, _Provider$childContex);
- return Provider;
- }
-
- var _default = createProvider();
-
- exports.default = _default;
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 214 */
-/***/ (function(module, exports) {
-
- function _inheritsLoose(subClass, superClass) {
- subClass.prototype = Object.create(superClass.prototype);
- subClass.prototype.constructor = subClass;
- subClass.__proto__ = superClass;
- }
-
- module.exports = _inheritsLoose;
-
-/***/ }),
-/* 215 */
-/***/ (function(module, exports, __webpack_require__) {
-
- "use strict";
-
- var _interopRequireDefault = __webpack_require__(14);
-
- exports.__esModule = true;
- exports.storeShape = exports.subscriptionShape = void 0;
-
- var _propTypes = _interopRequireDefault(__webpack_require__(6));
-
- var subscriptionShape = _propTypes.default.shape({
- trySubscribe: _propTypes.default.func.isRequired,
- tryUnsubscribe: _propTypes.default.func.isRequired,
- notifyNestedSubs: _propTypes.default.func.isRequired,
- isSubscribed: _propTypes.default.func.isRequired
- });
-
- exports.subscriptionShape = subscriptionShape;
-
- var storeShape = _propTypes.default.shape({
- subscribe: _propTypes.default.func.isRequired,
- dispatch: _propTypes.default.func.isRequired,
- getState: _propTypes.default.func.isRequired
- });
-
- exports.storeShape = storeShape;
-
-/***/ }),
-/* 216 */
-/***/ (function(module, exports) {
-
- "use strict";
-
- exports.__esModule = true;
- exports.default = warning;
-
- /**
- * Prints a warning in the console if it exists.
- *
- * @param {String} message The warning message.
- * @returns {void}
- */
- function warning(message) {
- /* eslint-disable no-console */
- if (typeof console !== 'undefined' && typeof console.error === 'function') {
- console.error(message);
- }
- /* eslint-enable no-console */
-
-
- try {
- // This error was thrown as a convenience so that if you enable
- // "break on all exceptions" in your console,
- // it would pause the execution at this line.
- throw new Error(message);
- /* eslint-disable no-empty */
- } catch (e) {}
- /* eslint-enable no-empty */
-
- }
-
-/***/ }),
-/* 217 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {"use strict";
-
- var _interopRequireDefault = __webpack_require__(14);
-
- exports.__esModule = true;
- exports.default = connectAdvanced;
-
- var _inheritsLoose2 = _interopRequireDefault(__webpack_require__(214));
-
- var _assertThisInitialized2 = _interopRequireDefault(__webpack_require__(218));
-
- var _extends2 = _interopRequireDefault(__webpack_require__(122));
-
- var _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(219));
-
- var _hoistNonReactStatics = _interopRequireDefault(__webpack_require__(220));
-
- var _invariant = _interopRequireDefault(__webpack_require__(221));
-
- var _react = __webpack_require__(1);
-
- var _reactIs = __webpack_require__(222);
-
- var _Subscription = _interopRequireDefault(__webpack_require__(225));
-
- var _PropTypes = __webpack_require__(215);
-
- var hotReloadingVersion = 0;
- var dummyState = {};
-
- function noop() {}
-
- function makeSelectorStateful(sourceSelector, store) {
- // wrap the selector in an object that tracks its results between runs.
- var selector = {
- run: function runComponentSelector(props) {
- try {
- var nextProps = sourceSelector(store.getState(), props);
-
- if (nextProps !== selector.props || selector.error) {
- selector.shouldComponentUpdate = true;
- selector.props = nextProps;
- selector.error = null;
- }
- } catch (error) {
- selector.shouldComponentUpdate = true;
- selector.error = error;
- }
- }
- };
- return selector;
- }
-
- function connectAdvanced(
- /*
- selectorFactory is a func that is responsible for returning the selector function used to
- compute new props from state, props, and dispatch. For example:
- export default connectAdvanced((dispatch, options) => (state, props) => ({
- thing: state.things[props.thingId],
- saveThing: fields => dispatch(actionCreators.saveThing(props.thingId, fields)),
- }))(YourComponent)
- Access to dispatch is provided to the factory so selectorFactories can bind actionCreators
- outside of their selector as an optimization. Options passed to connectAdvanced are passed to
- the selectorFactory, along with displayName and WrappedComponent, as the second argument.
- Note that selectorFactory is responsible for all caching/memoization of inbound and outbound
- props. Do not use connectAdvanced directly without memoizing results between calls to your
- selector, otherwise the Connect component will re-render on every state or props change.
- */
- selectorFactory, // options object:
- _ref) {
- var _contextTypes, _childContextTypes;
-
- if (_ref === void 0) {
- _ref = {};
- }
-
- var _ref2 = _ref,
- _ref2$getDisplayName = _ref2.getDisplayName,
- getDisplayName = _ref2$getDisplayName === void 0 ? function (name) {
- return "ConnectAdvanced(" + name + ")";
- } : _ref2$getDisplayName,
- _ref2$methodName = _ref2.methodName,
- methodName = _ref2$methodName === void 0 ? 'connectAdvanced' : _ref2$methodName,
- _ref2$renderCountProp = _ref2.renderCountProp,
- renderCountProp = _ref2$renderCountProp === void 0 ? undefined : _ref2$renderCountProp,
- _ref2$shouldHandleSta = _ref2.shouldHandleStateChanges,
- shouldHandleStateChanges = _ref2$shouldHandleSta === void 0 ? true : _ref2$shouldHandleSta,
- _ref2$storeKey = _ref2.storeKey,
- storeKey = _ref2$storeKey === void 0 ? 'store' : _ref2$storeKey,
- _ref2$withRef = _ref2.withRef,
- withRef = _ref2$withRef === void 0 ? false : _ref2$withRef,
- connectOptions = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["getDisplayName", "methodName", "renderCountProp", "shouldHandleStateChanges", "storeKey", "withRef"]);
- var subscriptionKey = storeKey + 'Subscription';
- var version = hotReloadingVersion++;
- var contextTypes = (_contextTypes = {}, _contextTypes[storeKey] = _PropTypes.storeShape, _contextTypes[subscriptionKey] = _PropTypes.subscriptionShape, _contextTypes);
- var childContextTypes = (_childContextTypes = {}, _childContextTypes[subscriptionKey] = _PropTypes.subscriptionShape, _childContextTypes);
- return function wrapWithConnect(WrappedComponent) {
- (0, _invariant.default)((0, _reactIs.isValidElementType)(WrappedComponent), "You must pass a component to the function returned by " + (methodName + ". Instead received " + JSON.stringify(WrappedComponent)));
- var wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
- var displayName = getDisplayName(wrappedComponentName);
- var selectorFactoryOptions = (0, _extends2.default)({}, connectOptions, {
- getDisplayName: getDisplayName,
- methodName: methodName,
- renderCountProp: renderCountProp,
- shouldHandleStateChanges: shouldHandleStateChanges,
- storeKey: storeKey,
- withRef: withRef,
- displayName: displayName,
- wrappedComponentName: wrappedComponentName,
- WrappedComponent: WrappedComponent // TODO Actually fix our use of componentWillReceiveProps
-
- /* eslint-disable react/no-deprecated */
-
- });
-
- var Connect =
- /*#__PURE__*/
- function (_Component) {
- (0, _inheritsLoose2.default)(Connect, _Component);
-
- function Connect(props, context) {
- var _this;
-
- _this = _Component.call(this, props, context) || this;
- _this.version = version;
- _this.state = {};
- _this.renderCount = 0;
- _this.store = props[storeKey] || context[storeKey];
- _this.propsMode = Boolean(props[storeKey]);
- _this.setWrappedInstance = _this.setWrappedInstance.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
- (0, _invariant.default)(_this.store, "Could not find \"" + storeKey + "\" in either the context or props of " + ("\"" + displayName + "\". Either wrap the root component in a , ") + ("or explicitly pass \"" + storeKey + "\" as a prop to \"" + displayName + "\"."));
-
- _this.initSelector();
-
- _this.initSubscription();
-
- return _this;
- }
-
- var _proto = Connect.prototype;
-
- _proto.getChildContext = function getChildContext() {
- var _ref3;
-
- // If this component received store from props, its subscription should be transparent
- // to any descendants receiving store+subscription from context; it passes along
- // subscription passed to it. Otherwise, it shadows the parent subscription, which allows
- // Connect to control ordering of notifications to flow top-down.
- var subscription = this.propsMode ? null : this.subscription;
- return _ref3 = {}, _ref3[subscriptionKey] = subscription || this.context[subscriptionKey], _ref3;
- };
-
- _proto.componentDidMount = function componentDidMount() {
- if (!shouldHandleStateChanges) return; // componentWillMount fires during server side rendering, but componentDidMount and
- // componentWillUnmount do not. Because of this, trySubscribe happens during ...didMount.
- // Otherwise, unsubscription would never take place during SSR, causing a memory leak.
- // To handle the case where a child component may have triggered a state change by
- // dispatching an action in its componentWillMount, we have to re-run the select and maybe
- // re-render.
-
- this.subscription.trySubscribe();
- this.selector.run(this.props);
- if (this.selector.shouldComponentUpdate) this.forceUpdate();
- };
-
- _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
- this.selector.run(nextProps);
- };
-
- _proto.shouldComponentUpdate = function shouldComponentUpdate() {
- return this.selector.shouldComponentUpdate;
- };
-
- _proto.componentWillUnmount = function componentWillUnmount() {
- if (this.subscription) this.subscription.tryUnsubscribe();
- this.subscription = null;
- this.notifyNestedSubs = noop;
- this.store = null;
- this.selector.run = noop;
- this.selector.shouldComponentUpdate = false;
- };
-
- _proto.getWrappedInstance = function getWrappedInstance() {
- (0, _invariant.default)(withRef, "To access the wrapped instance, you need to specify " + ("{ withRef: true } in the options argument of the " + methodName + "() call."));
- return this.wrappedInstance;
- };
-
- _proto.setWrappedInstance = function setWrappedInstance(ref) {
- this.wrappedInstance = ref;
- };
-
- _proto.initSelector = function initSelector() {
- var sourceSelector = selectorFactory(this.store.dispatch, selectorFactoryOptions);
- this.selector = makeSelectorStateful(sourceSelector, this.store);
- this.selector.run(this.props);
- };
-
- _proto.initSubscription = function initSubscription() {
- if (!shouldHandleStateChanges) return; // parentSub's source should match where store came from: props vs. context. A component
- // connected to the store via props shouldn't use subscription from context, or vice versa.
-
- var parentSub = (this.propsMode ? this.props : this.context)[subscriptionKey];
- this.subscription = new _Subscription.default(this.store, parentSub, this.onStateChange.bind(this)); // `notifyNestedSubs` is duplicated to handle the case where the component is unmounted in
- // the middle of the notification loop, where `this.subscription` will then be null. An
- // extra null check every change can be avoided by copying the method onto `this` and then
- // replacing it with a no-op on unmount. This can probably be avoided if Subscription's
- // listeners logic is changed to not call listeners that have been unsubscribed in the
- // middle of the notification loop.
-
- this.notifyNestedSubs = this.subscription.notifyNestedSubs.bind(this.subscription);
- };
-
- _proto.onStateChange = function onStateChange() {
- this.selector.run(this.props);
-
- if (!this.selector.shouldComponentUpdate) {
- this.notifyNestedSubs();
- } else {
- this.componentDidUpdate = this.notifyNestedSubsOnComponentDidUpdate;
- this.setState(dummyState);
- }
- };
-
- _proto.notifyNestedSubsOnComponentDidUpdate = function notifyNestedSubsOnComponentDidUpdate() {
- // `componentDidUpdate` is conditionally implemented when `onStateChange` determines it
- // needs to notify nested subs. Once called, it unimplements itself until further state
- // changes occur. Doing it this way vs having a permanent `componentDidUpdate` that does
- // a boolean check every time avoids an extra method call most of the time, resulting
- // in some perf boost.
- this.componentDidUpdate = undefined;
- this.notifyNestedSubs();
- };
-
- _proto.isSubscribed = function isSubscribed() {
- return Boolean(this.subscription) && this.subscription.isSubscribed();
- };
-
- _proto.addExtraProps = function addExtraProps(props) {
- if (!withRef && !renderCountProp && !(this.propsMode && this.subscription)) return props; // make a shallow copy so that fields added don't leak to the original selector.
- // this is especially important for 'ref' since that's a reference back to the component
- // instance. a singleton memoized selector would then be holding a reference to the
- // instance, preventing the instance from being garbage collected, and that would be bad
-
- var withExtras = (0, _extends2.default)({}, props);
- if (withRef) withExtras.ref = this.setWrappedInstance;
- if (renderCountProp) withExtras[renderCountProp] = this.renderCount++;
- if (this.propsMode && this.subscription) withExtras[subscriptionKey] = this.subscription;
- return withExtras;
- };
-
- _proto.render = function render() {
- var selector = this.selector;
- selector.shouldComponentUpdate = false;
-
- if (selector.error) {
- throw selector.error;
- } else {
- return (0, _react.createElement)(WrappedComponent, this.addExtraProps(selector.props));
- }
- };
-
- return Connect;
- }(_react.Component);
- /* eslint-enable react/no-deprecated */
-
-
- Connect.WrappedComponent = WrappedComponent;
- Connect.displayName = displayName;
- Connect.childContextTypes = childContextTypes;
- Connect.contextTypes = contextTypes;
- Connect.propTypes = contextTypes;
-
- if (process.env.NODE_ENV !== 'production') {
- Connect.prototype.componentWillUpdate = function componentWillUpdate() {
- var _this2 = this;
-
- // We are hot reloading!
- if (this.version !== version) {
- this.version = version;
- this.initSelector(); // If any connected descendants don't hot reload (and resubscribe in the process), their
- // listeners will be lost when we unsubscribe. Unfortunately, by copying over all
- // listeners, this does mean that the old versions of connected descendants will still be
- // notified of state changes; however, their onStateChange function is a no-op so this
- // isn't a huge deal.
-
- var oldListeners = [];
-
- if (this.subscription) {
- oldListeners = this.subscription.listeners.get();
- this.subscription.tryUnsubscribe();
- }
-
- this.initSubscription();
-
- if (shouldHandleStateChanges) {
- this.subscription.trySubscribe();
- oldListeners.forEach(function (listener) {
- return _this2.subscription.listeners.subscribe(listener);
- });
- }
- }
- };
- }
-
- return (0, _hoistNonReactStatics.default)(Connect, WrappedComponent);
- };
- }
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 218 */
-/***/ (function(module, exports) {
-
- function _assertThisInitialized(self) {
- if (self === void 0) {
- throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
- }
-
- return self;
- }
-
- module.exports = _assertThisInitialized;
-
-/***/ }),
-/* 219 */
-/***/ (function(module, exports) {
-
- 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;
- }
-
- module.exports = _objectWithoutPropertiesLoose;
-
-/***/ }),
-/* 220 */
-/***/ (function(module, exports) {
-
- 'use strict';
-
- /**
- * Copyright 2015, Yahoo! Inc.
- * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
- */
- var REACT_STATICS = {
- childContextTypes: true,
- contextTypes: true,
- defaultProps: true,
- displayName: true,
- getDefaultProps: true,
- getDerivedStateFromProps: true,
- mixins: true,
- propTypes: true,
- type: true
- };
-
- var KNOWN_STATICS = {
- name: true,
- length: true,
- prototype: true,
- caller: true,
- callee: true,
- arguments: true,
- arity: true
- };
-
- var defineProperty = Object.defineProperty;
- var getOwnPropertyNames = Object.getOwnPropertyNames;
- var getOwnPropertySymbols = Object.getOwnPropertySymbols;
- var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
- var getPrototypeOf = Object.getPrototypeOf;
- var objectPrototype = getPrototypeOf && getPrototypeOf(Object);
-
- function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
- if (typeof sourceComponent !== 'string') { // don't hoist over string (html) components
-
- if (objectPrototype) {
- var inheritedComponent = getPrototypeOf(sourceComponent);
- if (inheritedComponent && inheritedComponent !== objectPrototype) {
- hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
- }
- }
-
- var keys = getOwnPropertyNames(sourceComponent);
-
- if (getOwnPropertySymbols) {
- keys = keys.concat(getOwnPropertySymbols(sourceComponent));
- }
-
- for (var i = 0; i < keys.length; ++i) {
- var key = keys[i];
- if (!REACT_STATICS[key] && !KNOWN_STATICS[key] && (!blacklist || !blacklist[key])) {
- var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
- try { // Avoid failures from read-only properties
- defineProperty(targetComponent, key, descriptor);
- } catch (e) {}
- }
- }
-
- return targetComponent;
- }
-
- return targetComponent;
- }
-
- module.exports = hoistNonReactStatics;
-
-
-/***/ }),
-/* 221 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {/**
- * 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.
- */
-
- 'use strict';
-
- /**
- * Use invariant() to assert state which your program assumes to be true.
- *
- * Provide sprintf-style format (only %s is supported) and arguments
- * to provide information about what broke and what you were
- * expecting.
- *
- * The invariant message will be stripped in production, but the invariant
- * will remain to ensure logic does not differ in production.
- */
-
- var invariant = function(condition, format, a, b, c, d, e, f) {
- if (process.env.NODE_ENV !== 'production') {
- if (format === undefined) {
- throw new Error('invariant requires an error message argument');
- }
- }
-
- if (!condition) {
- var error;
- if (format === undefined) {
- error = new Error(
- 'Minified exception occurred; use the non-minified dev environment ' +
- 'for the full error message and additional helpful warnings.'
- );
- } else {
- var args = [a, b, c, d, e, f];
- var argIndex = 0;
- error = new Error(
- format.replace(/%s/g, function() { return args[argIndex++]; })
- );
- error.name = 'Invariant Violation';
- }
-
- error.framesToPop = 1; // we don't care about invariant's own frame
- throw error;
- }
- };
-
- module.exports = invariant;
-
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 222 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {'use strict';
-
- if (process.env.NODE_ENV === 'production') {
- module.exports = __webpack_require__(223);
- } else {
- module.exports = __webpack_require__(224);
- }
-
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 223 */
-/***/ (function(module, exports) {
-
- /** @license React v16.8.6
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
- 'use strict';Object.defineProperty(exports,"__esModule",{value:!0});
- var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?Symbol.for("react.memo"):
- 60115,r=b?Symbol.for("react.lazy"):60116;function t(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case h:return a;default:return u}}case r:case q:case d:return u}}}function v(a){return t(a)===m}exports.typeOf=t;exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;
- exports.Fragment=e;exports.Lazy=r;exports.Memo=q;exports.Portal=d;exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;exports.isValidElementType=function(a){return"string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||"object"===typeof a&&null!==a&&(a.$$typeof===r||a.$$typeof===q||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n)};exports.isAsyncMode=function(a){return v(a)||t(a)===l};exports.isConcurrentMode=v;exports.isContextConsumer=function(a){return t(a)===k};
- exports.isContextProvider=function(a){return t(a)===h};exports.isElement=function(a){return"object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return t(a)===n};exports.isFragment=function(a){return t(a)===e};exports.isLazy=function(a){return t(a)===r};exports.isMemo=function(a){return t(a)===q};exports.isPortal=function(a){return t(a)===d};exports.isProfiler=function(a){return t(a)===g};exports.isStrictMode=function(a){return t(a)===f};
- exports.isSuspense=function(a){return t(a)===p};
-
-
-/***/ }),
-/* 224 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {/** @license React v16.8.6
- * react-is.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
- 'use strict';
-
-
-
- if (process.env.NODE_ENV !== "production") {
- (function() {
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', { value: true });
-
- // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
- // nor polyfill, then a plain number is used for performance.
- var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-
- var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
- var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
- var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
- var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
- var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
- var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
- var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace;
- var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
- var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
- var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
- var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
- var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
- var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-
- function isValidElementType(type) {
- return typeof type === 'string' || typeof type === 'function' ||
- // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
- type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE);
- }
-
- /**
- * Forked from fbjs/warning:
- * https://github.com/facebook/fbjs/blob/e66ba20ad5be433eb54423f2b097d829324d9de6/packages/fbjs/src/__forks__/warning.js
- *
- * Only change is we use console.warn instead of console.error,
- * and do nothing when 'console' is not supported.
- * This really simplifies the code.
- * ---
- * Similar to invariant but only logs a warning if the condition is not met.
- * This can be used to log issues in development environments in critical
- * paths. Removing the logging code for production environments will keep the
- * same logic and follow the same code paths.
- */
-
- var lowPriorityWarning = function () {};
-
- {
- var printWarning = function (format) {
- for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- args[_key - 1] = arguments[_key];
- }
-
- var argIndex = 0;
- var message = 'Warning: ' + format.replace(/%s/g, function () {
- return args[argIndex++];
- });
- if (typeof console !== 'undefined') {
- console.warn(message);
- }
- try {
- // --- Welcome to debugging React ---
- // This error was thrown as a convenience so that you can use this stack
- // to find the callsite that caused this warning to fire.
- throw new Error(message);
- } catch (x) {}
- };
-
- lowPriorityWarning = function (condition, format) {
- if (format === undefined) {
- throw new Error('`lowPriorityWarning(condition, format, ...args)` requires a warning ' + 'message argument');
- }
- if (!condition) {
- for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
- args[_key2 - 2] = arguments[_key2];
- }
-
- printWarning.apply(undefined, [format].concat(args));
- }
- };
- }
-
- var lowPriorityWarning$1 = lowPriorityWarning;
-
- function typeOf(object) {
- if (typeof object === 'object' && object !== null) {
- var $$typeof = object.$$typeof;
- switch ($$typeof) {
- case REACT_ELEMENT_TYPE:
- var type = object.type;
-
- switch (type) {
- case REACT_ASYNC_MODE_TYPE:
- case REACT_CONCURRENT_MODE_TYPE:
- case REACT_FRAGMENT_TYPE:
- case REACT_PROFILER_TYPE:
- case REACT_STRICT_MODE_TYPE:
- case REACT_SUSPENSE_TYPE:
- return type;
- default:
- var $$typeofType = type && type.$$typeof;
-
- switch ($$typeofType) {
- case REACT_CONTEXT_TYPE:
- case REACT_FORWARD_REF_TYPE:
- case REACT_PROVIDER_TYPE:
- return $$typeofType;
- default:
- return $$typeof;
- }
- }
- case REACT_LAZY_TYPE:
- case REACT_MEMO_TYPE:
- case REACT_PORTAL_TYPE:
- return $$typeof;
- }
- }
-
- return undefined;
- }
-
- // AsyncMode is deprecated along with isAsyncMode
- var AsyncMode = REACT_ASYNC_MODE_TYPE;
- var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
- var ContextConsumer = REACT_CONTEXT_TYPE;
- var ContextProvider = REACT_PROVIDER_TYPE;
- var Element = REACT_ELEMENT_TYPE;
- var ForwardRef = REACT_FORWARD_REF_TYPE;
- var Fragment = REACT_FRAGMENT_TYPE;
- var Lazy = REACT_LAZY_TYPE;
- var Memo = REACT_MEMO_TYPE;
- var Portal = REACT_PORTAL_TYPE;
- var Profiler = REACT_PROFILER_TYPE;
- var StrictMode = REACT_STRICT_MODE_TYPE;
- var Suspense = REACT_SUSPENSE_TYPE;
-
- var hasWarnedAboutDeprecatedIsAsyncMode = false;
-
- // AsyncMode should be deprecated
- function isAsyncMode(object) {
- {
- if (!hasWarnedAboutDeprecatedIsAsyncMode) {
- hasWarnedAboutDeprecatedIsAsyncMode = true;
- lowPriorityWarning$1(false, 'The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
- }
- }
- return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
- }
- function isConcurrentMode(object) {
- return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
- }
- function isContextConsumer(object) {
- return typeOf(object) === REACT_CONTEXT_TYPE;
- }
- function isContextProvider(object) {
- return typeOf(object) === REACT_PROVIDER_TYPE;
- }
- function isElement(object) {
- return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
- }
- function isForwardRef(object) {
- return typeOf(object) === REACT_FORWARD_REF_TYPE;
- }
- function isFragment(object) {
- return typeOf(object) === REACT_FRAGMENT_TYPE;
- }
- function isLazy(object) {
- return typeOf(object) === REACT_LAZY_TYPE;
- }
- function isMemo(object) {
- return typeOf(object) === REACT_MEMO_TYPE;
- }
- function isPortal(object) {
- return typeOf(object) === REACT_PORTAL_TYPE;
- }
- function isProfiler(object) {
- return typeOf(object) === REACT_PROFILER_TYPE;
- }
- function isStrictMode(object) {
- return typeOf(object) === REACT_STRICT_MODE_TYPE;
- }
- function isSuspense(object) {
- return typeOf(object) === REACT_SUSPENSE_TYPE;
- }
-
- exports.typeOf = typeOf;
- exports.AsyncMode = AsyncMode;
- exports.ConcurrentMode = ConcurrentMode;
- exports.ContextConsumer = ContextConsumer;
- exports.ContextProvider = ContextProvider;
- exports.Element = Element;
- exports.ForwardRef = ForwardRef;
- exports.Fragment = Fragment;
- exports.Lazy = Lazy;
- exports.Memo = Memo;
- exports.Portal = Portal;
- exports.Profiler = Profiler;
- exports.StrictMode = StrictMode;
- exports.Suspense = Suspense;
- exports.isValidElementType = isValidElementType;
- exports.isAsyncMode = isAsyncMode;
- exports.isConcurrentMode = isConcurrentMode;
- exports.isContextConsumer = isContextConsumer;
- exports.isContextProvider = isContextProvider;
- exports.isElement = isElement;
- exports.isForwardRef = isForwardRef;
- exports.isFragment = isFragment;
- exports.isLazy = isLazy;
- exports.isMemo = isMemo;
- exports.isPortal = isPortal;
- exports.isProfiler = isProfiler;
- exports.isStrictMode = isStrictMode;
- exports.isSuspense = isSuspense;
- })();
- }
-
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 225 */
-/***/ (function(module, exports) {
-
- "use strict";
-
- exports.__esModule = true;
- exports.default = void 0;
- // encapsulates the subscription logic for connecting a component to the redux store, as
- // well as nesting subscriptions of descendant components, so that we can ensure the
- // ancestor components re-render before descendants
- var CLEARED = null;
- var nullListeners = {
- notify: function notify() {}
- };
-
- function createListenerCollection() {
- // the current/next pattern is copied from redux's createStore code.
- // TODO: refactor+expose that code to be reusable here?
- var current = [];
- var next = [];
- return {
- clear: function clear() {
- next = CLEARED;
- current = CLEARED;
- },
- notify: function notify() {
- var listeners = current = next;
-
- for (var i = 0; i < listeners.length; i++) {
- listeners[i]();
- }
- },
- get: function get() {
- return next;
- },
- subscribe: function subscribe(listener) {
- var isSubscribed = true;
- if (next === current) next = current.slice();
- next.push(listener);
- return function unsubscribe() {
- if (!isSubscribed || current === CLEARED) return;
- isSubscribed = false;
- if (next === current) next = current.slice();
- next.splice(next.indexOf(listener), 1);
- };
- }
- };
- }
-
- var Subscription =
- /*#__PURE__*/
- function () {
- function Subscription(store, parentSub, onStateChange) {
- this.store = store;
- this.parentSub = parentSub;
- this.onStateChange = onStateChange;
- this.unsubscribe = null;
- this.listeners = nullListeners;
- }
-
- var _proto = Subscription.prototype;
-
- _proto.addNestedSub = function addNestedSub(listener) {
- this.trySubscribe();
- return this.listeners.subscribe(listener);
- };
-
- _proto.notifyNestedSubs = function notifyNestedSubs() {
- this.listeners.notify();
- };
-
- _proto.isSubscribed = function isSubscribed() {
- return Boolean(this.unsubscribe);
- };
-
- _proto.trySubscribe = function trySubscribe() {
- if (!this.unsubscribe) {
- this.unsubscribe = this.parentSub ? this.parentSub.addNestedSub(this.onStateChange) : this.store.subscribe(this.onStateChange);
- this.listeners = createListenerCollection();
- }
- };
-
- _proto.tryUnsubscribe = function tryUnsubscribe() {
- if (this.unsubscribe) {
- this.unsubscribe();
- this.unsubscribe = null;
- this.listeners.clear();
- this.listeners = nullListeners;
- }
- };
-
- return Subscription;
- }();
-
- exports.default = Subscription;
-
-/***/ }),
-/* 226 */
-/***/ (function(module, exports, __webpack_require__) {
-
- "use strict";
-
- var _interopRequireDefault = __webpack_require__(14);
-
- exports.__esModule = true;
- exports.createConnect = createConnect;
- exports.default = void 0;
-
- var _extends2 = _interopRequireDefault(__webpack_require__(122));
-
- var _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(219));
-
- var _connectAdvanced = _interopRequireDefault(__webpack_require__(217));
-
- var _shallowEqual = _interopRequireDefault(__webpack_require__(227));
-
- var _mapDispatchToProps = _interopRequireDefault(__webpack_require__(228));
-
- var _mapStateToProps = _interopRequireDefault(__webpack_require__(232));
-
- var _mergeProps = _interopRequireDefault(__webpack_require__(233));
-
- var _selectorFactory = _interopRequireDefault(__webpack_require__(234));
-
- /*
- connect is a facade over connectAdvanced. It turns its args into a compatible
- selectorFactory, which has the signature:
-
- (dispatch, options) => (nextState, nextOwnProps) => nextFinalProps
-
- connect passes its args to connectAdvanced as options, which will in turn pass them to
- selectorFactory each time a Connect component instance is instantiated or hot reloaded.
-
- selectorFactory returns a final props selector from its mapStateToProps,
- mapStateToPropsFactories, mapDispatchToProps, mapDispatchToPropsFactories, mergeProps,
- mergePropsFactories, and pure args.
-
- The resulting final props selector is called by the Connect component instance whenever
- it receives new props or store state.
- */
- function match(arg, factories, name) {
- for (var i = factories.length - 1; i >= 0; i--) {
- var result = factories[i](arg);
- if (result) return result;
- }
-
- return function (dispatch, options) {
- throw new Error("Invalid value of type " + typeof arg + " for " + name + " argument when connecting component " + options.wrappedComponentName + ".");
- };
- }
-
- function strictEqual(a, b) {
- return a === b;
- } // createConnect with default args builds the 'official' connect behavior. Calling it with
- // different options opens up some testing and extensibility scenarios
-
-
- function createConnect(_temp) {
- var _ref = _temp === void 0 ? {} : _temp,
- _ref$connectHOC = _ref.connectHOC,
- connectHOC = _ref$connectHOC === void 0 ? _connectAdvanced.default : _ref$connectHOC,
- _ref$mapStateToPropsF = _ref.mapStateToPropsFactories,
- mapStateToPropsFactories = _ref$mapStateToPropsF === void 0 ? _mapStateToProps.default : _ref$mapStateToPropsF,
- _ref$mapDispatchToPro = _ref.mapDispatchToPropsFactories,
- mapDispatchToPropsFactories = _ref$mapDispatchToPro === void 0 ? _mapDispatchToProps.default : _ref$mapDispatchToPro,
- _ref$mergePropsFactor = _ref.mergePropsFactories,
- mergePropsFactories = _ref$mergePropsFactor === void 0 ? _mergeProps.default : _ref$mergePropsFactor,
- _ref$selectorFactory = _ref.selectorFactory,
- selectorFactory = _ref$selectorFactory === void 0 ? _selectorFactory.default : _ref$selectorFactory;
-
- return function connect(mapStateToProps, mapDispatchToProps, mergeProps, _ref2) {
- if (_ref2 === void 0) {
- _ref2 = {};
- }
-
- var _ref3 = _ref2,
- _ref3$pure = _ref3.pure,
- pure = _ref3$pure === void 0 ? true : _ref3$pure,
- _ref3$areStatesEqual = _ref3.areStatesEqual,
- areStatesEqual = _ref3$areStatesEqual === void 0 ? strictEqual : _ref3$areStatesEqual,
- _ref3$areOwnPropsEqua = _ref3.areOwnPropsEqual,
- areOwnPropsEqual = _ref3$areOwnPropsEqua === void 0 ? _shallowEqual.default : _ref3$areOwnPropsEqua,
- _ref3$areStatePropsEq = _ref3.areStatePropsEqual,
- areStatePropsEqual = _ref3$areStatePropsEq === void 0 ? _shallowEqual.default : _ref3$areStatePropsEq,
- _ref3$areMergedPropsE = _ref3.areMergedPropsEqual,
- areMergedPropsEqual = _ref3$areMergedPropsE === void 0 ? _shallowEqual.default : _ref3$areMergedPropsE,
- extraOptions = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["pure", "areStatesEqual", "areOwnPropsEqual", "areStatePropsEqual", "areMergedPropsEqual"]);
- var initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps');
- var initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories, 'mapDispatchToProps');
- var initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps');
- return connectHOC(selectorFactory, (0, _extends2.default)({
- // used in error messages
- methodName: 'connect',
- // used to compute Connect's displayName from the wrapped component's displayName.
- getDisplayName: function getDisplayName(name) {
- return "Connect(" + name + ")";
- },
- // if mapStateToProps is falsy, the Connect component doesn't subscribe to store state changes
- shouldHandleStateChanges: Boolean(mapStateToProps),
- // passed through to selectorFactory
- initMapStateToProps: initMapStateToProps,
- initMapDispatchToProps: initMapDispatchToProps,
- initMergeProps: initMergeProps,
- pure: pure,
- areStatesEqual: areStatesEqual,
- areOwnPropsEqual: areOwnPropsEqual,
- areStatePropsEqual: areStatePropsEqual,
- areMergedPropsEqual: areMergedPropsEqual
- }, extraOptions));
- };
- }
-
- var _default = createConnect();
-
- exports.default = _default;
-
-/***/ }),
-/* 227 */
-/***/ (function(module, exports) {
-
- "use strict";
-
- exports.__esModule = true;
- exports.default = shallowEqual;
- var hasOwn = Object.prototype.hasOwnProperty;
-
- function is(x, y) {
- if (x === y) {
- return x !== 0 || y !== 0 || 1 / x === 1 / y;
- } else {
- return x !== x && y !== y;
- }
- }
-
- function shallowEqual(objA, objB) {
- if (is(objA, objB)) return true;
-
- if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
- return false;
- }
-
- var keysA = Object.keys(objA);
- var keysB = Object.keys(objB);
- if (keysA.length !== keysB.length) return false;
-
- for (var i = 0; i < keysA.length; i++) {
- if (!hasOwn.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
- return false;
- }
- }
-
- return true;
- }
-
-/***/ }),
-/* 228 */
-/***/ (function(module, exports, __webpack_require__) {
-
- "use strict";
-
- exports.__esModule = true;
- exports.whenMapDispatchToPropsIsFunction = whenMapDispatchToPropsIsFunction;
- exports.whenMapDispatchToPropsIsMissing = whenMapDispatchToPropsIsMissing;
- exports.whenMapDispatchToPropsIsObject = whenMapDispatchToPropsIsObject;
- exports.default = void 0;
-
- var _redux = __webpack_require__(199);
-
- var _wrapMapToProps = __webpack_require__(229);
-
- function whenMapDispatchToPropsIsFunction(mapDispatchToProps) {
- return typeof mapDispatchToProps === 'function' ? (0, _wrapMapToProps.wrapMapToPropsFunc)(mapDispatchToProps, 'mapDispatchToProps') : undefined;
- }
-
- function whenMapDispatchToPropsIsMissing(mapDispatchToProps) {
- return !mapDispatchToProps ? (0, _wrapMapToProps.wrapMapToPropsConstant)(function (dispatch) {
- return {
- dispatch: dispatch
- };
- }) : undefined;
- }
-
- function whenMapDispatchToPropsIsObject(mapDispatchToProps) {
- return mapDispatchToProps && typeof mapDispatchToProps === 'object' ? (0, _wrapMapToProps.wrapMapToPropsConstant)(function (dispatch) {
- return (0, _redux.bindActionCreators)(mapDispatchToProps, dispatch);
- }) : undefined;
- }
-
- var _default = [whenMapDispatchToPropsIsFunction, whenMapDispatchToPropsIsMissing, whenMapDispatchToPropsIsObject];
- exports.default = _default;
-
-/***/ }),
-/* 229 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {"use strict";
-
- var _interopRequireDefault = __webpack_require__(14);
-
- exports.__esModule = true;
- exports.wrapMapToPropsConstant = wrapMapToPropsConstant;
- exports.getDependsOnOwnProps = getDependsOnOwnProps;
- exports.wrapMapToPropsFunc = wrapMapToPropsFunc;
-
- var _verifyPlainObject = _interopRequireDefault(__webpack_require__(230));
-
- function wrapMapToPropsConstant(getConstant) {
- return function initConstantSelector(dispatch, options) {
- var constant = getConstant(dispatch, options);
-
- function constantSelector() {
- return constant;
- }
-
- constantSelector.dependsOnOwnProps = false;
- return constantSelector;
- };
- } // dependsOnOwnProps is used by createMapToPropsProxy to determine whether to pass props as args
- // to the mapToProps function being wrapped. It is also used by makePurePropsSelector to determine
- // whether mapToProps needs to be invoked when props have changed.
- //
- // A length of one signals that mapToProps does not depend on props from the parent component.
- // A length of zero is assumed to mean mapToProps is getting args via arguments or ...args and
- // therefore not reporting its length accurately..
-
-
- function getDependsOnOwnProps(mapToProps) {
- return mapToProps.dependsOnOwnProps !== null && mapToProps.dependsOnOwnProps !== undefined ? Boolean(mapToProps.dependsOnOwnProps) : mapToProps.length !== 1;
- } // Used by whenMapStateToPropsIsFunction and whenMapDispatchToPropsIsFunction,
- // this function wraps mapToProps in a proxy function which does several things:
- //
- // * Detects whether the mapToProps function being called depends on props, which
- // is used by selectorFactory to decide if it should reinvoke on props changes.
- //
- // * On first call, handles mapToProps if returns another function, and treats that
- // new function as the true mapToProps for subsequent calls.
- //
- // * On first call, verifies the first result is a plain object, in order to warn
- // the developer that their mapToProps function is not returning a valid result.
- //
-
-
- function wrapMapToPropsFunc(mapToProps, methodName) {
- return function initProxySelector(dispatch, _ref) {
- var displayName = _ref.displayName;
-
- var proxy = function mapToPropsProxy(stateOrDispatch, ownProps) {
- return proxy.dependsOnOwnProps ? proxy.mapToProps(stateOrDispatch, ownProps) : proxy.mapToProps(stateOrDispatch);
- }; // allow detectFactoryAndVerify to get ownProps
-
-
- proxy.dependsOnOwnProps = true;
-
- proxy.mapToProps = function detectFactoryAndVerify(stateOrDispatch, ownProps) {
- proxy.mapToProps = mapToProps;
- proxy.dependsOnOwnProps = getDependsOnOwnProps(mapToProps);
- var props = proxy(stateOrDispatch, ownProps);
-
- if (typeof props === 'function') {
- proxy.mapToProps = props;
- proxy.dependsOnOwnProps = getDependsOnOwnProps(props);
- props = proxy(stateOrDispatch, ownProps);
- }
-
- if (process.env.NODE_ENV !== 'production') (0, _verifyPlainObject.default)(props, displayName, methodName);
- return props;
- };
-
- return proxy;
- };
- }
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 230 */
-/***/ (function(module, exports, __webpack_require__) {
-
- "use strict";
-
- var _interopRequireDefault = __webpack_require__(14);
-
- exports.__esModule = true;
- exports.default = verifyPlainObject;
-
- var _isPlainObject = _interopRequireDefault(__webpack_require__(231));
-
- var _warning = _interopRequireDefault(__webpack_require__(216));
-
- function verifyPlainObject(value, displayName, methodName) {
- if (!(0, _isPlainObject.default)(value)) {
- (0, _warning.default)(methodName + "() in " + displayName + " must return a plain object. Instead received " + value + ".");
- }
- }
-
-/***/ }),
-/* 231 */
-/***/ (function(module, exports) {
-
- "use strict";
-
- exports.__esModule = true;
- exports.default = isPlainObject;
-
- /**
- * @param {any} obj The object to inspect.
- * @returns {boolean} True if the argument appears to be a plain object.
- */
- function isPlainObject(obj) {
- if (typeof obj !== 'object' || obj === null) return false;
- var proto = Object.getPrototypeOf(obj);
- if (proto === null) return true;
- var baseProto = proto;
-
- while (Object.getPrototypeOf(baseProto) !== null) {
- baseProto = Object.getPrototypeOf(baseProto);
- }
-
- return proto === baseProto;
- }
-
-/***/ }),
-/* 232 */
-/***/ (function(module, exports, __webpack_require__) {
-
- "use strict";
-
- exports.__esModule = true;
- exports.whenMapStateToPropsIsFunction = whenMapStateToPropsIsFunction;
- exports.whenMapStateToPropsIsMissing = whenMapStateToPropsIsMissing;
- exports.default = void 0;
-
- var _wrapMapToProps = __webpack_require__(229);
-
- function whenMapStateToPropsIsFunction(mapStateToProps) {
- return typeof mapStateToProps === 'function' ? (0, _wrapMapToProps.wrapMapToPropsFunc)(mapStateToProps, 'mapStateToProps') : undefined;
- }
-
- function whenMapStateToPropsIsMissing(mapStateToProps) {
- return !mapStateToProps ? (0, _wrapMapToProps.wrapMapToPropsConstant)(function () {
- return {};
- }) : undefined;
- }
-
- var _default = [whenMapStateToPropsIsFunction, whenMapStateToPropsIsMissing];
- exports.default = _default;
-
-/***/ }),
-/* 233 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {"use strict";
-
- var _interopRequireDefault = __webpack_require__(14);
-
- exports.__esModule = true;
- exports.defaultMergeProps = defaultMergeProps;
- exports.wrapMergePropsFunc = wrapMergePropsFunc;
- exports.whenMergePropsIsFunction = whenMergePropsIsFunction;
- exports.whenMergePropsIsOmitted = whenMergePropsIsOmitted;
- exports.default = void 0;
-
- var _extends2 = _interopRequireDefault(__webpack_require__(122));
-
- var _verifyPlainObject = _interopRequireDefault(__webpack_require__(230));
-
- function defaultMergeProps(stateProps, dispatchProps, ownProps) {
- return (0, _extends2.default)({}, ownProps, stateProps, dispatchProps);
- }
-
- function wrapMergePropsFunc(mergeProps) {
- return function initMergePropsProxy(dispatch, _ref) {
- var displayName = _ref.displayName,
- pure = _ref.pure,
- areMergedPropsEqual = _ref.areMergedPropsEqual;
- var hasRunOnce = false;
- var mergedProps;
- return function mergePropsProxy(stateProps, dispatchProps, ownProps) {
- var nextMergedProps = mergeProps(stateProps, dispatchProps, ownProps);
-
- if (hasRunOnce) {
- if (!pure || !areMergedPropsEqual(nextMergedProps, mergedProps)) mergedProps = nextMergedProps;
- } else {
- hasRunOnce = true;
- mergedProps = nextMergedProps;
- if (process.env.NODE_ENV !== 'production') (0, _verifyPlainObject.default)(mergedProps, displayName, 'mergeProps');
- }
-
- return mergedProps;
- };
- };
- }
-
- function whenMergePropsIsFunction(mergeProps) {
- return typeof mergeProps === 'function' ? wrapMergePropsFunc(mergeProps) : undefined;
- }
-
- function whenMergePropsIsOmitted(mergeProps) {
- return !mergeProps ? function () {
- return defaultMergeProps;
- } : undefined;
- }
-
- var _default = [whenMergePropsIsFunction, whenMergePropsIsOmitted];
- exports.default = _default;
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 234 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {"use strict";
-
- var _interopRequireDefault = __webpack_require__(14);
-
- exports.__esModule = true;
- exports.impureFinalPropsSelectorFactory = impureFinalPropsSelectorFactory;
- exports.pureFinalPropsSelectorFactory = pureFinalPropsSelectorFactory;
- exports.default = finalPropsSelectorFactory;
-
- var _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(219));
-
- var _verifySubselectors = _interopRequireDefault(__webpack_require__(235));
-
- function impureFinalPropsSelectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch) {
- return function impureFinalPropsSelector(state, ownProps) {
- return mergeProps(mapStateToProps(state, ownProps), mapDispatchToProps(dispatch, ownProps), ownProps);
- };
- }
-
- function pureFinalPropsSelectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch, _ref) {
- var areStatesEqual = _ref.areStatesEqual,
- areOwnPropsEqual = _ref.areOwnPropsEqual,
- areStatePropsEqual = _ref.areStatePropsEqual;
- var hasRunAtLeastOnce = false;
- var state;
- var ownProps;
- var stateProps;
- var dispatchProps;
- var mergedProps;
-
- function handleFirstCall(firstState, firstOwnProps) {
- state = firstState;
- ownProps = firstOwnProps;
- stateProps = mapStateToProps(state, ownProps);
- dispatchProps = mapDispatchToProps(dispatch, ownProps);
- mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
- hasRunAtLeastOnce = true;
- return mergedProps;
- }
-
- function handleNewPropsAndNewState() {
- stateProps = mapStateToProps(state, ownProps);
- if (mapDispatchToProps.dependsOnOwnProps) dispatchProps = mapDispatchToProps(dispatch, ownProps);
- mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
- return mergedProps;
- }
-
- function handleNewProps() {
- if (mapStateToProps.dependsOnOwnProps) stateProps = mapStateToProps(state, ownProps);
- if (mapDispatchToProps.dependsOnOwnProps) dispatchProps = mapDispatchToProps(dispatch, ownProps);
- mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
- return mergedProps;
- }
-
- function handleNewState() {
- var nextStateProps = mapStateToProps(state, ownProps);
- var statePropsChanged = !areStatePropsEqual(nextStateProps, stateProps);
- stateProps = nextStateProps;
- if (statePropsChanged) mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
- return mergedProps;
- }
-
- function handleSubsequentCalls(nextState, nextOwnProps) {
- var propsChanged = !areOwnPropsEqual(nextOwnProps, ownProps);
- var stateChanged = !areStatesEqual(nextState, state);
- state = nextState;
- ownProps = nextOwnProps;
- if (propsChanged && stateChanged) return handleNewPropsAndNewState();
- if (propsChanged) return handleNewProps();
- if (stateChanged) return handleNewState();
- return mergedProps;
- }
-
- return function pureFinalPropsSelector(nextState, nextOwnProps) {
- return hasRunAtLeastOnce ? handleSubsequentCalls(nextState, nextOwnProps) : handleFirstCall(nextState, nextOwnProps);
- };
- } // TODO: Add more comments
- // If pure is true, the selector returned by selectorFactory will memoize its results,
- // allowing connectAdvanced's shouldComponentUpdate to return false if final
- // props have not changed. If false, the selector will always return a new
- // object and shouldComponentUpdate will always return true.
-
-
- function finalPropsSelectorFactory(dispatch, _ref2) {
- var initMapStateToProps = _ref2.initMapStateToProps,
- initMapDispatchToProps = _ref2.initMapDispatchToProps,
- initMergeProps = _ref2.initMergeProps,
- options = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["initMapStateToProps", "initMapDispatchToProps", "initMergeProps"]);
- var mapStateToProps = initMapStateToProps(dispatch, options);
- var mapDispatchToProps = initMapDispatchToProps(dispatch, options);
- var mergeProps = initMergeProps(dispatch, options);
-
- if (process.env.NODE_ENV !== 'production') {
- (0, _verifySubselectors.default)(mapStateToProps, mapDispatchToProps, mergeProps, options.displayName);
- }
-
- var selectorFactory = options.pure ? pureFinalPropsSelectorFactory : impureFinalPropsSelectorFactory;
- return selectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch, options);
- }
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 235 */
-/***/ (function(module, exports, __webpack_require__) {
-
- "use strict";
-
- var _interopRequireDefault = __webpack_require__(14);
-
- exports.__esModule = true;
- exports.default = verifySubselectors;
-
- var _warning = _interopRequireDefault(__webpack_require__(216));
-
- function verify(selector, methodName, displayName) {
- if (!selector) {
- throw new Error("Unexpected value for " + methodName + " in " + displayName + ".");
- } else if (methodName === 'mapStateToProps' || methodName === 'mapDispatchToProps') {
- if (!selector.hasOwnProperty('dependsOnOwnProps')) {
- (0, _warning.default)("The selector for " + methodName + " of " + displayName + " did not specify a value for dependsOnOwnProps.");
- }
- }
- }
-
- function verifySubselectors(mapStateToProps, mapDispatchToProps, mergeProps, displayName) {
- verify(mapStateToProps, 'mapStateToProps', displayName);
- verify(mapDispatchToProps, 'mapDispatchToProps', displayName);
- verify(mergeProps, 'mergeProps', displayName);
- }
-
-/***/ }),
-/* 236 */
-/***/ (function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- exports.__esModule = true;
-
- function _interopRequire(obj) { return obj && obj.__esModule ? obj['default'] : obj; }
-
- var _Motion = __webpack_require__(237);
-
- exports.Motion = _interopRequire(_Motion);
-
- var _StaggeredMotion = __webpack_require__(244);
-
- exports.StaggeredMotion = _interopRequire(_StaggeredMotion);
-
- var _TransitionMotion = __webpack_require__(245);
-
- exports.TransitionMotion = _interopRequire(_TransitionMotion);
-
- var _spring = __webpack_require__(247);
-
- exports.spring = _interopRequire(_spring);
-
- var _presets = __webpack_require__(248);
-
- exports.presets = _interopRequire(_presets);
-
- var _stripStyle = __webpack_require__(239);
-
- exports.stripStyle = _interopRequire(_stripStyle);
-
- // deprecated, dummy warning function
-
- var _reorderKeys = __webpack_require__(249);
-
- exports.reorderKeys = _interopRequire(_reorderKeys);
-
-/***/ }),
-/* 237 */
-/***/ (function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- exports.__esModule = 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 _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 _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 _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 _mapToZero = __webpack_require__(238);
-
- var _mapToZero2 = _interopRequireDefault(_mapToZero);
-
- var _stripStyle = __webpack_require__(239);
-
- var _stripStyle2 = _interopRequireDefault(_stripStyle);
-
- var _stepper3 = __webpack_require__(240);
-
- var _stepper4 = _interopRequireDefault(_stepper3);
-
- var _performanceNow = __webpack_require__(241);
-
- var _performanceNow2 = _interopRequireDefault(_performanceNow);
-
- var _raf = __webpack_require__(242);
-
- var _raf2 = _interopRequireDefault(_raf);
-
- var _shouldStopAnimation = __webpack_require__(243);
-
- var _shouldStopAnimation2 = _interopRequireDefault(_shouldStopAnimation);
-
- var _react = __webpack_require__(1);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _propTypes = __webpack_require__(6);
-
- var _propTypes2 = _interopRequireDefault(_propTypes);
-
- var msPerFrame = 1000 / 60;
-
- var Motion = (function (_React$Component) {
- _inherits(Motion, _React$Component);
-
- _createClass(Motion, null, [{
- key: 'propTypes',
- value: {
- // TOOD: warn against putting a config in here
- defaultStyle: _propTypes2['default'].objectOf(_propTypes2['default'].number),
- style: _propTypes2['default'].objectOf(_propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].object])).isRequired,
- children: _propTypes2['default'].func.isRequired,
- onRest: _propTypes2['default'].func
- },
- enumerable: true
- }]);
-
- function Motion(props) {
- var _this = this;
-
- _classCallCheck(this, Motion);
-
- _React$Component.call(this, props);
- this.wasAnimating = false;
- this.animationID = null;
- this.prevTime = 0;
- this.accumulatedTime = 0;
- this.unreadPropStyle = null;
-
- this.clearUnreadPropStyle = function (destStyle) {
- var dirty = false;
- var _state = _this.state;
- var currentStyle = _state.currentStyle;
- var currentVelocity = _state.currentVelocity;
- var lastIdealStyle = _state.lastIdealStyle;
- var lastIdealVelocity = _state.lastIdealVelocity;
-
- for (var key in destStyle) {
- if (!Object.prototype.hasOwnProperty.call(destStyle, key)) {
- continue;
- }
-
- var styleValue = destStyle[key];
- if (typeof styleValue === 'number') {
- if (!dirty) {
- dirty = true;
- currentStyle = _extends({}, currentStyle);
- currentVelocity = _extends({}, currentVelocity);
- lastIdealStyle = _extends({}, lastIdealStyle);
- lastIdealVelocity = _extends({}, lastIdealVelocity);
- }
-
- currentStyle[key] = styleValue;
- currentVelocity[key] = 0;
- lastIdealStyle[key] = styleValue;
- lastIdealVelocity[key] = 0;
- }
- }
-
- if (dirty) {
- _this.setState({ currentStyle: currentStyle, currentVelocity: currentVelocity, lastIdealStyle: lastIdealStyle, lastIdealVelocity: lastIdealVelocity });
- }
- };
-
- this.startAnimationIfNecessary = function () {
- // TODO: when config is {a: 10} and dest is {a: 10} do we raf once and
- // call cb? No, otherwise accidental parent rerender causes cb trigger
- _this.animationID = _raf2['default'](function (timestamp) {
- // check if we need to animate in the first place
- var propsStyle = _this.props.style;
- if (_shouldStopAnimation2['default'](_this.state.currentStyle, propsStyle, _this.state.currentVelocity)) {
- if (_this.wasAnimating && _this.props.onRest) {
- _this.props.onRest();
- }
-
- // no need to cancel animationID here; shouldn't have any in flight
- _this.animationID = null;
- _this.wasAnimating = false;
- _this.accumulatedTime = 0;
- return;
- }
-
- _this.wasAnimating = true;
-
- var currentTime = timestamp || _performanceNow2['default']();
- var timeDelta = currentTime - _this.prevTime;
- _this.prevTime = currentTime;
- _this.accumulatedTime = _this.accumulatedTime + timeDelta;
- // more than 10 frames? prolly switched browser tab. Restart
- if (_this.accumulatedTime > msPerFrame * 10) {
- _this.accumulatedTime = 0;
- }
-
- if (_this.accumulatedTime === 0) {
- // no need to cancel animationID here; shouldn't have any in flight
- _this.animationID = null;
- _this.startAnimationIfNecessary();
- return;
- }
-
- var currentFrameCompletion = (_this.accumulatedTime - Math.floor(_this.accumulatedTime / msPerFrame) * msPerFrame) / msPerFrame;
- var framesToCatchUp = Math.floor(_this.accumulatedTime / msPerFrame);
-
- var newLastIdealStyle = {};
- var newLastIdealVelocity = {};
- var newCurrentStyle = {};
- var newCurrentVelocity = {};
-
- for (var key in propsStyle) {
- if (!Object.prototype.hasOwnProperty.call(propsStyle, key)) {
- continue;
- }
-
- var styleValue = propsStyle[key];
- if (typeof styleValue === 'number') {
- newCurrentStyle[key] = styleValue;
- newCurrentVelocity[key] = 0;
- newLastIdealStyle[key] = styleValue;
- newLastIdealVelocity[key] = 0;
- } else {
- var newLastIdealStyleValue = _this.state.lastIdealStyle[key];
- var newLastIdealVelocityValue = _this.state.lastIdealVelocity[key];
- for (var i = 0; i < framesToCatchUp; i++) {
- var _stepper = _stepper4['default'](msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.stiffness, styleValue.damping, styleValue.precision);
-
- newLastIdealStyleValue = _stepper[0];
- newLastIdealVelocityValue = _stepper[1];
- }
-
- var _stepper2 = _stepper4['default'](msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.stiffness, styleValue.damping, styleValue.precision);
-
- var nextIdealX = _stepper2[0];
- var nextIdealV = _stepper2[1];
-
- newCurrentStyle[key] = newLastIdealStyleValue + (nextIdealX - newLastIdealStyleValue) * currentFrameCompletion;
- newCurrentVelocity[key] = newLastIdealVelocityValue + (nextIdealV - newLastIdealVelocityValue) * currentFrameCompletion;
- newLastIdealStyle[key] = newLastIdealStyleValue;
- newLastIdealVelocity[key] = newLastIdealVelocityValue;
- }
- }
-
- _this.animationID = null;
- // the amount we're looped over above
- _this.accumulatedTime -= framesToCatchUp * msPerFrame;
-
- _this.setState({
- currentStyle: newCurrentStyle,
- currentVelocity: newCurrentVelocity,
- lastIdealStyle: newLastIdealStyle,
- lastIdealVelocity: newLastIdealVelocity
- });
-
- _this.unreadPropStyle = null;
-
- _this.startAnimationIfNecessary();
- });
- };
-
- this.state = this.defaultState();
- }
-
- Motion.prototype.defaultState = function defaultState() {
- var _props = this.props;
- var defaultStyle = _props.defaultStyle;
- var style = _props.style;
-
- var currentStyle = defaultStyle || _stripStyle2['default'](style);
- var currentVelocity = _mapToZero2['default'](currentStyle);
- return {
- currentStyle: currentStyle,
- currentVelocity: currentVelocity,
- lastIdealStyle: currentStyle,
- lastIdealVelocity: currentVelocity
- };
- };
-
- // it's possible that currentStyle's value is stale: if props is immediately
- // changed from 0 to 400 to spring(0) again, the async currentStyle is still
- // at 0 (didn't have time to tick and interpolate even once). If we naively
- // compare currentStyle with destVal it'll be 0 === 0 (no animation, stop).
- // In reality currentStyle should be 400
-
- Motion.prototype.componentDidMount = function componentDidMount() {
- this.prevTime = _performanceNow2['default']();
- this.startAnimationIfNecessary();
- };
-
- Motion.prototype.componentWillReceiveProps = function componentWillReceiveProps(props) {
- if (this.unreadPropStyle != null) {
- // previous props haven't had the chance to be set yet; set them here
- this.clearUnreadPropStyle(this.unreadPropStyle);
- }
-
- this.unreadPropStyle = props.style;
- if (this.animationID == null) {
- this.prevTime = _performanceNow2['default']();
- this.startAnimationIfNecessary();
- }
- };
-
- Motion.prototype.componentWillUnmount = function componentWillUnmount() {
- if (this.animationID != null) {
- _raf2['default'].cancel(this.animationID);
- this.animationID = null;
- }
- };
-
- Motion.prototype.render = function render() {
- var renderedChildren = this.props.children(this.state.currentStyle);
- return renderedChildren && _react2['default'].Children.only(renderedChildren);
- };
-
- return Motion;
- })(_react2['default'].Component);
-
- exports['default'] = Motion;
- module.exports = exports['default'];
-
- // after checking for unreadPropStyle != null, we manually go set the
- // non-interpolating values (those that are a number, without a spring
- // config)
-
-/***/ }),
-/* 238 */
-/***/ (function(module, exports) {
-
-
-
- // currently used to initiate the velocity style object to 0
- 'use strict';
-
- exports.__esModule = true;
- exports['default'] = mapToZero;
-
- function mapToZero(obj) {
- var ret = {};
- for (var key in obj) {
- if (Object.prototype.hasOwnProperty.call(obj, key)) {
- ret[key] = 0;
- }
- }
- return ret;
- }
-
- module.exports = exports['default'];
-
-/***/ }),
-/* 239 */
-/***/ (function(module, exports) {
-
-
- // turn {x: {val: 1, stiffness: 1, damping: 2}, y: 2} generated by
- // `{x: spring(1, {stiffness: 1, damping: 2}), y: 2}` into {x: 1, y: 2}
-
- 'use strict';
-
- exports.__esModule = true;
- exports['default'] = stripStyle;
-
- function stripStyle(style) {
- var ret = {};
- for (var key in style) {
- if (!Object.prototype.hasOwnProperty.call(style, key)) {
- continue;
- }
- ret[key] = typeof style[key] === 'number' ? style[key] : style[key].val;
- }
- return ret;
- }
-
- module.exports = exports['default'];
-
-/***/ }),
-/* 240 */
-/***/ (function(module, exports) {
-
-
-
- // stepper is used a lot. Saves allocation to return the same array wrapper.
- // This is fine and danger-free against mutations because the callsite
- // immediately destructures it and gets the numbers inside without passing the
- "use strict";
-
- exports.__esModule = true;
- exports["default"] = stepper;
-
- var reusedTuple = [0, 0];
-
- function stepper(secondPerFrame, x, v, destX, k, b, precision) {
- // Spring stiffness, in kg / s^2
-
- // for animations, destX is really spring length (spring at rest). initial
- // position is considered as the stretched/compressed position of a spring
- var Fspring = -k * (x - destX);
-
- // Damping, in kg / s
- var Fdamper = -b * v;
-
- // usually we put mass here, but for animation purposes, specifying mass is a
- // bit redundant. you could simply adjust k and b accordingly
- // let a = (Fspring + Fdamper) / mass;
- var a = Fspring + Fdamper;
-
- var newV = v + a * secondPerFrame;
- var newX = x + newV * secondPerFrame;
-
- if (Math.abs(newV) < precision && Math.abs(newX - destX) < precision) {
- reusedTuple[0] = destX;
- reusedTuple[1] = 0;
- return reusedTuple;
- }
-
- reusedTuple[0] = newX;
- reusedTuple[1] = newV;
- return reusedTuple;
- }
-
- module.exports = exports["default"];
- // array reference around.
-
-/***/ }),
-/* 241 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {// Generated by CoffeeScript 1.12.2
- (function() {
- var getNanoSeconds, hrtime, loadTime, moduleLoadTime, nodeLoadTime, upTime;
-
- if ((typeof performance !== "undefined" && performance !== null) && performance.now) {
- module.exports = function() {
- return performance.now();
- };
- } else if ((typeof process !== "undefined" && process !== null) && process.hrtime) {
- module.exports = function() {
- return (getNanoSeconds() - nodeLoadTime) / 1e6;
- };
- hrtime = process.hrtime;
- getNanoSeconds = function() {
- var hr;
- hr = hrtime();
- return hr[0] * 1e9 + hr[1];
- };
- moduleLoadTime = getNanoSeconds();
- upTime = process.uptime() * 1e9;
- nodeLoadTime = moduleLoadTime - upTime;
- } else if (Date.now) {
- module.exports = function() {
- return Date.now() - loadTime;
- };
- loadTime = Date.now();
- } else {
- module.exports = function() {
- return new Date().getTime() - loadTime;
- };
- loadTime = new Date().getTime();
- }
-
- }).call(this);
-
- //# sourceMappingURL=performance-now.js.map
-
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 242 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(global) {var now = __webpack_require__(241)
- , root = typeof window === 'undefined' ? global : window
- , vendors = ['moz', 'webkit']
- , suffix = 'AnimationFrame'
- , raf = root['request' + suffix]
- , caf = root['cancel' + suffix] || root['cancelRequest' + suffix]
-
- for(var i = 0; !raf && i < vendors.length; i++) {
- raf = root[vendors[i] + 'Request' + suffix]
- caf = root[vendors[i] + 'Cancel' + suffix]
- || root[vendors[i] + 'CancelRequest' + suffix]
- }
-
- // Some versions of FF have rAF but not cAF
- if(!raf || !caf) {
- var last = 0
- , id = 0
- , queue = []
- , frameDuration = 1000 / 60
-
- raf = function(callback) {
- if(queue.length === 0) {
- var _now = now()
- , next = Math.max(0, frameDuration - (_now - last))
- last = next + _now
- setTimeout(function() {
- var cp = queue.slice(0)
- // Clear queue here to prevent
- // callbacks from appending listeners
- // to the current frame's queue
- queue.length = 0
- for(var i = 0; i < cp.length; i++) {
- if(!cp[i].cancelled) {
- try{
- cp[i].callback(last)
- } catch(e) {
- setTimeout(function() { throw e }, 0)
- }
- }
- }
- }, Math.round(next))
- }
- queue.push({
- handle: ++id,
- callback: callback,
- cancelled: false
- })
- return id
- }
-
- caf = function(handle) {
- for(var i = 0; i < queue.length; i++) {
- if(queue[i].handle === handle) {
- queue[i].cancelled = true
- }
- }
- }
- }
-
- module.exports = function(fn) {
- // Wrap in a new function to prevent
- // `cancel` potentially being assigned
- // to the native rAF function
- return raf.call(root, fn)
- }
- module.exports.cancel = function() {
- caf.apply(root, arguments)
- }
- module.exports.polyfill = function(object) {
- if (!object) {
- object = root;
- }
- object.requestAnimationFrame = raf
- object.cancelAnimationFrame = caf
- }
-
- /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
-
-/***/ }),
-/* 243 */
-/***/ (function(module, exports) {
-
-
-
- // usage assumption: currentStyle values have already been rendered but it says
- // nothing of whether currentStyle is stale (see unreadPropStyle)
- 'use strict';
-
- exports.__esModule = true;
- exports['default'] = shouldStopAnimation;
-
- function shouldStopAnimation(currentStyle, style, currentVelocity) {
- for (var key in style) {
- if (!Object.prototype.hasOwnProperty.call(style, key)) {
- continue;
- }
-
- if (currentVelocity[key] !== 0) {
- return false;
- }
-
- var styleValue = typeof style[key] === 'number' ? style[key] : style[key].val;
- // stepper will have already taken care of rounding precision errors, so
- // won't have such thing as 0.9999 !=== 1
- if (currentStyle[key] !== styleValue) {
- return false;
- }
- }
-
- return true;
- }
-
- module.exports = exports['default'];
-
-/***/ }),
-/* 244 */
-/***/ (function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- exports.__esModule = 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 _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 _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 _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 _mapToZero = __webpack_require__(238);
-
- var _mapToZero2 = _interopRequireDefault(_mapToZero);
-
- var _stripStyle = __webpack_require__(239);
-
- var _stripStyle2 = _interopRequireDefault(_stripStyle);
-
- var _stepper3 = __webpack_require__(240);
-
- var _stepper4 = _interopRequireDefault(_stepper3);
-
- var _performanceNow = __webpack_require__(241);
-
- var _performanceNow2 = _interopRequireDefault(_performanceNow);
-
- var _raf = __webpack_require__(242);
-
- var _raf2 = _interopRequireDefault(_raf);
-
- var _shouldStopAnimation = __webpack_require__(243);
-
- var _shouldStopAnimation2 = _interopRequireDefault(_shouldStopAnimation);
-
- var _react = __webpack_require__(1);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _propTypes = __webpack_require__(6);
-
- var _propTypes2 = _interopRequireDefault(_propTypes);
-
- var msPerFrame = 1000 / 60;
-
- function shouldStopAnimationAll(currentStyles, styles, currentVelocities) {
- for (var i = 0; i < currentStyles.length; i++) {
- if (!_shouldStopAnimation2['default'](currentStyles[i], styles[i], currentVelocities[i])) {
- return false;
- }
- }
- return true;
- }
-
- var StaggeredMotion = (function (_React$Component) {
- _inherits(StaggeredMotion, _React$Component);
-
- _createClass(StaggeredMotion, null, [{
- key: 'propTypes',
- value: {
- // TOOD: warn against putting a config in here
- defaultStyles: _propTypes2['default'].arrayOf(_propTypes2['default'].objectOf(_propTypes2['default'].number)),
- styles: _propTypes2['default'].func.isRequired,
- children: _propTypes2['default'].func.isRequired
- },
- enumerable: true
- }]);
-
- function StaggeredMotion(props) {
- var _this = this;
-
- _classCallCheck(this, StaggeredMotion);
-
- _React$Component.call(this, props);
- this.animationID = null;
- this.prevTime = 0;
- this.accumulatedTime = 0;
- this.unreadPropStyles = null;
-
- this.clearUnreadPropStyle = function (unreadPropStyles) {
- var _state = _this.state;
- var currentStyles = _state.currentStyles;
- var currentVelocities = _state.currentVelocities;
- var lastIdealStyles = _state.lastIdealStyles;
- var lastIdealVelocities = _state.lastIdealVelocities;
-
- var someDirty = false;
- for (var i = 0; i < unreadPropStyles.length; i++) {
- var unreadPropStyle = unreadPropStyles[i];
- var dirty = false;
-
- for (var key in unreadPropStyle) {
- if (!Object.prototype.hasOwnProperty.call(unreadPropStyle, key)) {
- continue;
- }
-
- var styleValue = unreadPropStyle[key];
- if (typeof styleValue === 'number') {
- if (!dirty) {
- dirty = true;
- someDirty = true;
- currentStyles[i] = _extends({}, currentStyles[i]);
- currentVelocities[i] = _extends({}, currentVelocities[i]);
- lastIdealStyles[i] = _extends({}, lastIdealStyles[i]);
- lastIdealVelocities[i] = _extends({}, lastIdealVelocities[i]);
- }
- currentStyles[i][key] = styleValue;
- currentVelocities[i][key] = 0;
- lastIdealStyles[i][key] = styleValue;
- lastIdealVelocities[i][key] = 0;
- }
- }
- }
-
- if (someDirty) {
- _this.setState({ currentStyles: currentStyles, currentVelocities: currentVelocities, lastIdealStyles: lastIdealStyles, lastIdealVelocities: lastIdealVelocities });
- }
- };
-
- this.startAnimationIfNecessary = function () {
- // TODO: when config is {a: 10} and dest is {a: 10} do we raf once and
- // call cb? No, otherwise accidental parent rerender causes cb trigger
- _this.animationID = _raf2['default'](function (timestamp) {
- var destStyles = _this.props.styles(_this.state.lastIdealStyles);
-
- // check if we need to animate in the first place
- if (shouldStopAnimationAll(_this.state.currentStyles, destStyles, _this.state.currentVelocities)) {
- // no need to cancel animationID here; shouldn't have any in flight
- _this.animationID = null;
- _this.accumulatedTime = 0;
- return;
- }
-
- var currentTime = timestamp || _performanceNow2['default']();
- var timeDelta = currentTime - _this.prevTime;
- _this.prevTime = currentTime;
- _this.accumulatedTime = _this.accumulatedTime + timeDelta;
- // more than 10 frames? prolly switched browser tab. Restart
- if (_this.accumulatedTime > msPerFrame * 10) {
- _this.accumulatedTime = 0;
- }
-
- if (_this.accumulatedTime === 0) {
- // no need to cancel animationID here; shouldn't have any in flight
- _this.animationID = null;
- _this.startAnimationIfNecessary();
- return;
- }
-
- var currentFrameCompletion = (_this.accumulatedTime - Math.floor(_this.accumulatedTime / msPerFrame) * msPerFrame) / msPerFrame;
- var framesToCatchUp = Math.floor(_this.accumulatedTime / msPerFrame);
-
- var newLastIdealStyles = [];
- var newLastIdealVelocities = [];
- var newCurrentStyles = [];
- var newCurrentVelocities = [];
-
- for (var i = 0; i < destStyles.length; i++) {
- var destStyle = destStyles[i];
- var newCurrentStyle = {};
- var newCurrentVelocity = {};
- var newLastIdealStyle = {};
- var newLastIdealVelocity = {};
-
- for (var key in destStyle) {
- if (!Object.prototype.hasOwnProperty.call(destStyle, key)) {
- continue;
- }
-
- var styleValue = destStyle[key];
- if (typeof styleValue === 'number') {
- newCurrentStyle[key] = styleValue;
- newCurrentVelocity[key] = 0;
- newLastIdealStyle[key] = styleValue;
- newLastIdealVelocity[key] = 0;
- } else {
- var newLastIdealStyleValue = _this.state.lastIdealStyles[i][key];
- var newLastIdealVelocityValue = _this.state.lastIdealVelocities[i][key];
- for (var j = 0; j < framesToCatchUp; j++) {
- var _stepper = _stepper4['default'](msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.stiffness, styleValue.damping, styleValue.precision);
-
- newLastIdealStyleValue = _stepper[0];
- newLastIdealVelocityValue = _stepper[1];
- }
-
- var _stepper2 = _stepper4['default'](msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.stiffness, styleValue.damping, styleValue.precision);
-
- var nextIdealX = _stepper2[0];
- var nextIdealV = _stepper2[1];
-
- newCurrentStyle[key] = newLastIdealStyleValue + (nextIdealX - newLastIdealStyleValue) * currentFrameCompletion;
- newCurrentVelocity[key] = newLastIdealVelocityValue + (nextIdealV - newLastIdealVelocityValue) * currentFrameCompletion;
- newLastIdealStyle[key] = newLastIdealStyleValue;
- newLastIdealVelocity[key] = newLastIdealVelocityValue;
- }
- }
-
- newCurrentStyles[i] = newCurrentStyle;
- newCurrentVelocities[i] = newCurrentVelocity;
- newLastIdealStyles[i] = newLastIdealStyle;
- newLastIdealVelocities[i] = newLastIdealVelocity;
- }
-
- _this.animationID = null;
- // the amount we're looped over above
- _this.accumulatedTime -= framesToCatchUp * msPerFrame;
-
- _this.setState({
- currentStyles: newCurrentStyles,
- currentVelocities: newCurrentVelocities,
- lastIdealStyles: newLastIdealStyles,
- lastIdealVelocities: newLastIdealVelocities
- });
-
- _this.unreadPropStyles = null;
-
- _this.startAnimationIfNecessary();
- });
- };
-
- this.state = this.defaultState();
- }
-
- StaggeredMotion.prototype.defaultState = function defaultState() {
- var _props = this.props;
- var defaultStyles = _props.defaultStyles;
- var styles = _props.styles;
-
- var currentStyles = defaultStyles || styles().map(_stripStyle2['default']);
- var currentVelocities = currentStyles.map(function (currentStyle) {
- return _mapToZero2['default'](currentStyle);
- });
- return {
- currentStyles: currentStyles,
- currentVelocities: currentVelocities,
- lastIdealStyles: currentStyles,
- lastIdealVelocities: currentVelocities
- };
- };
-
- StaggeredMotion.prototype.componentDidMount = function componentDidMount() {
- this.prevTime = _performanceNow2['default']();
- this.startAnimationIfNecessary();
- };
-
- StaggeredMotion.prototype.componentWillReceiveProps = function componentWillReceiveProps(props) {
- if (this.unreadPropStyles != null) {
- // previous props haven't had the chance to be set yet; set them here
- this.clearUnreadPropStyle(this.unreadPropStyles);
- }
-
- this.unreadPropStyles = props.styles(this.state.lastIdealStyles);
- if (this.animationID == null) {
- this.prevTime = _performanceNow2['default']();
- this.startAnimationIfNecessary();
- }
- };
-
- StaggeredMotion.prototype.componentWillUnmount = function componentWillUnmount() {
- if (this.animationID != null) {
- _raf2['default'].cancel(this.animationID);
- this.animationID = null;
- }
- };
-
- StaggeredMotion.prototype.render = function render() {
- var renderedChildren = this.props.children(this.state.currentStyles);
- return renderedChildren && _react2['default'].Children.only(renderedChildren);
- };
-
- return StaggeredMotion;
- })(_react2['default'].Component);
-
- exports['default'] = StaggeredMotion;
- module.exports = exports['default'];
-
- // it's possible that currentStyle's value is stale: if props is immediately
- // changed from 0 to 400 to spring(0) again, the async currentStyle is still
- // at 0 (didn't have time to tick and interpolate even once). If we naively
- // compare currentStyle with destVal it'll be 0 === 0 (no animation, stop).
- // In reality currentStyle should be 400
-
- // after checking for unreadPropStyles != null, we manually go set the
- // non-interpolating values (those that are a number, without a spring
- // config)
-
-/***/ }),
-/* 245 */
-/***/ (function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- exports.__esModule = 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 _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 _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 _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 _mapToZero = __webpack_require__(238);
-
- var _mapToZero2 = _interopRequireDefault(_mapToZero);
-
- var _stripStyle = __webpack_require__(239);
-
- var _stripStyle2 = _interopRequireDefault(_stripStyle);
-
- var _stepper3 = __webpack_require__(240);
-
- var _stepper4 = _interopRequireDefault(_stepper3);
-
- var _mergeDiff = __webpack_require__(246);
-
- var _mergeDiff2 = _interopRequireDefault(_mergeDiff);
-
- var _performanceNow = __webpack_require__(241);
-
- var _performanceNow2 = _interopRequireDefault(_performanceNow);
-
- var _raf = __webpack_require__(242);
-
- var _raf2 = _interopRequireDefault(_raf);
-
- var _shouldStopAnimation = __webpack_require__(243);
-
- var _shouldStopAnimation2 = _interopRequireDefault(_shouldStopAnimation);
-
- var _react = __webpack_require__(1);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _propTypes = __webpack_require__(6);
-
- var _propTypes2 = _interopRequireDefault(_propTypes);
-
- var msPerFrame = 1000 / 60;
-
- // the children function & (potential) styles function asks as param an
- // Array, where each TransitionPlainStyle is of the format
- // {key: string, data?: any, style: PlainStyle}. However, the way we keep
- // internal states doesn't contain such a data structure (check the state and
- // TransitionMotionState). So when children function and others ask for such
- // data we need to generate them on the fly by combining mergedPropsStyles and
- // currentStyles/lastIdealStyles
- function rehydrateStyles(mergedPropsStyles, unreadPropStyles, plainStyles) {
- // Copy the value to a `const` so that Flow understands that the const won't
- // change and will be non-nullable in the callback below.
- var cUnreadPropStyles = unreadPropStyles;
- if (cUnreadPropStyles == null) {
- return mergedPropsStyles.map(function (mergedPropsStyle, i) {
- return {
- key: mergedPropsStyle.key,
- data: mergedPropsStyle.data,
- style: plainStyles[i]
- };
- });
- }
- return mergedPropsStyles.map(function (mergedPropsStyle, i) {
- for (var j = 0; j < cUnreadPropStyles.length; j++) {
- if (cUnreadPropStyles[j].key === mergedPropsStyle.key) {
- return {
- key: cUnreadPropStyles[j].key,
- data: cUnreadPropStyles[j].data,
- style: plainStyles[i]
- };
- }
- }
- return { key: mergedPropsStyle.key, data: mergedPropsStyle.data, style: plainStyles[i] };
- });
- }
-
- function shouldStopAnimationAll(currentStyles, destStyles, currentVelocities, mergedPropsStyles) {
- if (mergedPropsStyles.length !== destStyles.length) {
- return false;
- }
-
- for (var i = 0; i < mergedPropsStyles.length; i++) {
- if (mergedPropsStyles[i].key !== destStyles[i].key) {
- return false;
- }
- }
-
- // we have the invariant that mergedPropsStyles and
- // currentStyles/currentVelocities/last* are synced in terms of cells, see
- // mergeAndSync comment for more info
- for (var i = 0; i < mergedPropsStyles.length; i++) {
- if (!_shouldStopAnimation2['default'](currentStyles[i], destStyles[i].style, currentVelocities[i])) {
- return false;
- }
- }
-
- return true;
- }
-
- // core key merging logic
-
- // things to do: say previously merged style is {a, b}, dest style (prop) is {b,
- // c}, previous current (interpolating) style is {a, b}
- // **invariant**: current[i] corresponds to merged[i] in terms of key
-
- // steps:
- // turn merged style into {a?, b, c}
- // add c, value of c is destStyles.c
- // maybe remove a, aka call willLeave(a), then merged is either {b, c} or {a, b, c}
- // turn current (interpolating) style from {a, b} into {a?, b, c}
- // maybe remove a
- // certainly add c, value of c is willEnter(c)
- // loop over merged and construct new current
- // dest doesn't change, that's owner's
- function mergeAndSync(willEnter, willLeave, didLeave, oldMergedPropsStyles, destStyles, oldCurrentStyles, oldCurrentVelocities, oldLastIdealStyles, oldLastIdealVelocities) {
- var newMergedPropsStyles = _mergeDiff2['default'](oldMergedPropsStyles, destStyles, function (oldIndex, oldMergedPropsStyle) {
- var leavingStyle = willLeave(oldMergedPropsStyle);
- if (leavingStyle == null) {
- didLeave({ key: oldMergedPropsStyle.key, data: oldMergedPropsStyle.data });
- return null;
- }
- if (_shouldStopAnimation2['default'](oldCurrentStyles[oldIndex], leavingStyle, oldCurrentVelocities[oldIndex])) {
- didLeave({ key: oldMergedPropsStyle.key, data: oldMergedPropsStyle.data });
- return null;
- }
- return { key: oldMergedPropsStyle.key, data: oldMergedPropsStyle.data, style: leavingStyle };
- });
-
- var newCurrentStyles = [];
- var newCurrentVelocities = [];
- var newLastIdealStyles = [];
- var newLastIdealVelocities = [];
- for (var i = 0; i < newMergedPropsStyles.length; i++) {
- var newMergedPropsStyleCell = newMergedPropsStyles[i];
- var foundOldIndex = null;
- for (var j = 0; j < oldMergedPropsStyles.length; j++) {
- if (oldMergedPropsStyles[j].key === newMergedPropsStyleCell.key) {
- foundOldIndex = j;
- break;
- }
- }
- // TODO: key search code
- if (foundOldIndex == null) {
- var plainStyle = willEnter(newMergedPropsStyleCell);
- newCurrentStyles[i] = plainStyle;
- newLastIdealStyles[i] = plainStyle;
-
- var velocity = _mapToZero2['default'](newMergedPropsStyleCell.style);
- newCurrentVelocities[i] = velocity;
- newLastIdealVelocities[i] = velocity;
- } else {
- newCurrentStyles[i] = oldCurrentStyles[foundOldIndex];
- newLastIdealStyles[i] = oldLastIdealStyles[foundOldIndex];
- newCurrentVelocities[i] = oldCurrentVelocities[foundOldIndex];
- newLastIdealVelocities[i] = oldLastIdealVelocities[foundOldIndex];
- }
- }
-
- return [newMergedPropsStyles, newCurrentStyles, newCurrentVelocities, newLastIdealStyles, newLastIdealVelocities];
- }
-
- var TransitionMotion = (function (_React$Component) {
- _inherits(TransitionMotion, _React$Component);
-
- _createClass(TransitionMotion, null, [{
- key: 'propTypes',
- value: {
- defaultStyles: _propTypes2['default'].arrayOf(_propTypes2['default'].shape({
- key: _propTypes2['default'].string.isRequired,
- data: _propTypes2['default'].any,
- style: _propTypes2['default'].objectOf(_propTypes2['default'].number).isRequired
- })),
- styles: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].arrayOf(_propTypes2['default'].shape({
- key: _propTypes2['default'].string.isRequired,
- data: _propTypes2['default'].any,
- style: _propTypes2['default'].objectOf(_propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].object])).isRequired
- }))]).isRequired,
- children: _propTypes2['default'].func.isRequired,
- willEnter: _propTypes2['default'].func,
- willLeave: _propTypes2['default'].func,
- didLeave: _propTypes2['default'].func
- },
- enumerable: true
- }, {
- key: 'defaultProps',
- value: {
- willEnter: function willEnter(styleThatEntered) {
- return _stripStyle2['default'](styleThatEntered.style);
- },
- // recall: returning null makes the current unmounting TransitionStyle
- // disappear immediately
- willLeave: function willLeave() {
- return null;
- },
- didLeave: function didLeave() {}
- },
- enumerable: true
- }]);
-
- function TransitionMotion(props) {
- var _this = this;
-
- _classCallCheck(this, TransitionMotion);
-
- _React$Component.call(this, props);
- this.unmounting = false;
- this.animationID = null;
- this.prevTime = 0;
- this.accumulatedTime = 0;
- this.unreadPropStyles = null;
-
- this.clearUnreadPropStyle = function (unreadPropStyles) {
- var _mergeAndSync = mergeAndSync(_this.props.willEnter, _this.props.willLeave, _this.props.didLeave, _this.state.mergedPropsStyles, unreadPropStyles, _this.state.currentStyles, _this.state.currentVelocities, _this.state.lastIdealStyles, _this.state.lastIdealVelocities);
-
- var mergedPropsStyles = _mergeAndSync[0];
- var currentStyles = _mergeAndSync[1];
- var currentVelocities = _mergeAndSync[2];
- var lastIdealStyles = _mergeAndSync[3];
- var lastIdealVelocities = _mergeAndSync[4];
-
- for (var i = 0; i < unreadPropStyles.length; i++) {
- var unreadPropStyle = unreadPropStyles[i].style;
- var dirty = false;
-
- for (var key in unreadPropStyle) {
- if (!Object.prototype.hasOwnProperty.call(unreadPropStyle, key)) {
- continue;
- }
-
- var styleValue = unreadPropStyle[key];
- if (typeof styleValue === 'number') {
- if (!dirty) {
- dirty = true;
- currentStyles[i] = _extends({}, currentStyles[i]);
- currentVelocities[i] = _extends({}, currentVelocities[i]);
- lastIdealStyles[i] = _extends({}, lastIdealStyles[i]);
- lastIdealVelocities[i] = _extends({}, lastIdealVelocities[i]);
- mergedPropsStyles[i] = {
- key: mergedPropsStyles[i].key,
- data: mergedPropsStyles[i].data,
- style: _extends({}, mergedPropsStyles[i].style)
- };
- }
- currentStyles[i][key] = styleValue;
- currentVelocities[i][key] = 0;
- lastIdealStyles[i][key] = styleValue;
- lastIdealVelocities[i][key] = 0;
- mergedPropsStyles[i].style[key] = styleValue;
- }
- }
- }
-
- // unlike the other 2 components, we can't detect staleness and optionally
- // opt out of setState here. each style object's data might contain new
- // stuff we're not/cannot compare
- _this.setState({
- currentStyles: currentStyles,
- currentVelocities: currentVelocities,
- mergedPropsStyles: mergedPropsStyles,
- lastIdealStyles: lastIdealStyles,
- lastIdealVelocities: lastIdealVelocities
- });
- };
-
- this.startAnimationIfNecessary = function () {
- if (_this.unmounting) {
- return;
- }
-
- // TODO: when config is {a: 10} and dest is {a: 10} do we raf once and
- // call cb? No, otherwise accidental parent rerender causes cb trigger
- _this.animationID = _raf2['default'](function (timestamp) {
- // https://github.com/chenglou/react-motion/pull/420
- // > if execution passes the conditional if (this.unmounting), then
- // executes async defaultRaf and after that component unmounts and after
- // that the callback of defaultRaf is called, then setState will be called
- // on unmounted component.
- if (_this.unmounting) {
- return;
- }
-
- var propStyles = _this.props.styles;
- var destStyles = typeof propStyles === 'function' ? propStyles(rehydrateStyles(_this.state.mergedPropsStyles, _this.unreadPropStyles, _this.state.lastIdealStyles)) : propStyles;
-
- // check if we need to animate in the first place
- if (shouldStopAnimationAll(_this.state.currentStyles, destStyles, _this.state.currentVelocities, _this.state.mergedPropsStyles)) {
- // no need to cancel animationID here; shouldn't have any in flight
- _this.animationID = null;
- _this.accumulatedTime = 0;
- return;
- }
-
- var currentTime = timestamp || _performanceNow2['default']();
- var timeDelta = currentTime - _this.prevTime;
- _this.prevTime = currentTime;
- _this.accumulatedTime = _this.accumulatedTime + timeDelta;
- // more than 10 frames? prolly switched browser tab. Restart
- if (_this.accumulatedTime > msPerFrame * 10) {
- _this.accumulatedTime = 0;
- }
-
- if (_this.accumulatedTime === 0) {
- // no need to cancel animationID here; shouldn't have any in flight
- _this.animationID = null;
- _this.startAnimationIfNecessary();
- return;
- }
-
- var currentFrameCompletion = (_this.accumulatedTime - Math.floor(_this.accumulatedTime / msPerFrame) * msPerFrame) / msPerFrame;
- var framesToCatchUp = Math.floor(_this.accumulatedTime / msPerFrame);
-
- var _mergeAndSync2 = mergeAndSync(_this.props.willEnter, _this.props.willLeave, _this.props.didLeave, _this.state.mergedPropsStyles, destStyles, _this.state.currentStyles, _this.state.currentVelocities, _this.state.lastIdealStyles, _this.state.lastIdealVelocities);
-
- var newMergedPropsStyles = _mergeAndSync2[0];
- var newCurrentStyles = _mergeAndSync2[1];
- var newCurrentVelocities = _mergeAndSync2[2];
- var newLastIdealStyles = _mergeAndSync2[3];
- var newLastIdealVelocities = _mergeAndSync2[4];
-
- for (var i = 0; i < newMergedPropsStyles.length; i++) {
- var newMergedPropsStyle = newMergedPropsStyles[i].style;
- var newCurrentStyle = {};
- var newCurrentVelocity = {};
- var newLastIdealStyle = {};
- var newLastIdealVelocity = {};
-
- for (var key in newMergedPropsStyle) {
- if (!Object.prototype.hasOwnProperty.call(newMergedPropsStyle, key)) {
- continue;
- }
-
- var styleValue = newMergedPropsStyle[key];
- if (typeof styleValue === 'number') {
- newCurrentStyle[key] = styleValue;
- newCurrentVelocity[key] = 0;
- newLastIdealStyle[key] = styleValue;
- newLastIdealVelocity[key] = 0;
- } else {
- var newLastIdealStyleValue = newLastIdealStyles[i][key];
- var newLastIdealVelocityValue = newLastIdealVelocities[i][key];
- for (var j = 0; j < framesToCatchUp; j++) {
- var _stepper = _stepper4['default'](msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.stiffness, styleValue.damping, styleValue.precision);
-
- newLastIdealStyleValue = _stepper[0];
- newLastIdealVelocityValue = _stepper[1];
- }
-
- var _stepper2 = _stepper4['default'](msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.stiffness, styleValue.damping, styleValue.precision);
-
- var nextIdealX = _stepper2[0];
- var nextIdealV = _stepper2[1];
-
- newCurrentStyle[key] = newLastIdealStyleValue + (nextIdealX - newLastIdealStyleValue) * currentFrameCompletion;
- newCurrentVelocity[key] = newLastIdealVelocityValue + (nextIdealV - newLastIdealVelocityValue) * currentFrameCompletion;
- newLastIdealStyle[key] = newLastIdealStyleValue;
- newLastIdealVelocity[key] = newLastIdealVelocityValue;
- }
- }
-
- newLastIdealStyles[i] = newLastIdealStyle;
- newLastIdealVelocities[i] = newLastIdealVelocity;
- newCurrentStyles[i] = newCurrentStyle;
- newCurrentVelocities[i] = newCurrentVelocity;
- }
-
- _this.animationID = null;
- // the amount we're looped over above
- _this.accumulatedTime -= framesToCatchUp * msPerFrame;
-
- _this.setState({
- currentStyles: newCurrentStyles,
- currentVelocities: newCurrentVelocities,
- lastIdealStyles: newLastIdealStyles,
- lastIdealVelocities: newLastIdealVelocities,
- mergedPropsStyles: newMergedPropsStyles
- });
-
- _this.unreadPropStyles = null;
-
- _this.startAnimationIfNecessary();
- });
- };
-
- this.state = this.defaultState();
- }
-
- TransitionMotion.prototype.defaultState = function defaultState() {
- var _props = this.props;
- var defaultStyles = _props.defaultStyles;
- var styles = _props.styles;
- var willEnter = _props.willEnter;
- var willLeave = _props.willLeave;
- var didLeave = _props.didLeave;
-
- var destStyles = typeof styles === 'function' ? styles(defaultStyles) : styles;
-
- // this is special. for the first time around, we don't have a comparison
- // between last (no last) and current merged props. we'll compute last so:
- // say default is {a, b} and styles (dest style) is {b, c}, we'll
- // fabricate last as {a, b}
- var oldMergedPropsStyles = undefined;
- if (defaultStyles == null) {
- oldMergedPropsStyles = destStyles;
- } else {
- oldMergedPropsStyles = defaultStyles.map(function (defaultStyleCell) {
- // TODO: key search code
- for (var i = 0; i < destStyles.length; i++) {
- if (destStyles[i].key === defaultStyleCell.key) {
- return destStyles[i];
- }
- }
- return defaultStyleCell;
- });
- }
- var oldCurrentStyles = defaultStyles == null ? destStyles.map(function (s) {
- return _stripStyle2['default'](s.style);
- }) : defaultStyles.map(function (s) {
- return _stripStyle2['default'](s.style);
- });
- var oldCurrentVelocities = defaultStyles == null ? destStyles.map(function (s) {
- return _mapToZero2['default'](s.style);
- }) : defaultStyles.map(function (s) {
- return _mapToZero2['default'](s.style);
- });
-
- var _mergeAndSync3 = mergeAndSync(
- // Because this is an old-style createReactClass component, Flow doesn't
- // understand that the willEnter and willLeave props have default values
- // and will always be present.
- willEnter, willLeave, didLeave, oldMergedPropsStyles, destStyles, oldCurrentStyles, oldCurrentVelocities, oldCurrentStyles, // oldLastIdealStyles really
- oldCurrentVelocities);
-
- var mergedPropsStyles = _mergeAndSync3[0];
- var currentStyles = _mergeAndSync3[1];
- var currentVelocities = _mergeAndSync3[2];
- var lastIdealStyles = _mergeAndSync3[3];
- var lastIdealVelocities = _mergeAndSync3[4];
- // oldLastIdealVelocities really
-
- return {
- currentStyles: currentStyles,
- currentVelocities: currentVelocities,
- lastIdealStyles: lastIdealStyles,
- lastIdealVelocities: lastIdealVelocities,
- mergedPropsStyles: mergedPropsStyles
- };
- };
-
- // after checking for unreadPropStyles != null, we manually go set the
- // non-interpolating values (those that are a number, without a spring
- // config)
-
- TransitionMotion.prototype.componentDidMount = function componentDidMount() {
- this.prevTime = _performanceNow2['default']();
- this.startAnimationIfNecessary();
- };
-
- TransitionMotion.prototype.componentWillReceiveProps = function componentWillReceiveProps(props) {
- if (this.unreadPropStyles) {
- // previous props haven't had the chance to be set yet; set them here
- this.clearUnreadPropStyle(this.unreadPropStyles);
- }
-
- var styles = props.styles;
- if (typeof styles === 'function') {
- this.unreadPropStyles = styles(rehydrateStyles(this.state.mergedPropsStyles, this.unreadPropStyles, this.state.lastIdealStyles));
- } else {
- this.unreadPropStyles = styles;
- }
-
- if (this.animationID == null) {
- this.prevTime = _performanceNow2['default']();
- this.startAnimationIfNecessary();
- }
- };
-
- TransitionMotion.prototype.componentWillUnmount = function componentWillUnmount() {
- this.unmounting = true;
- if (this.animationID != null) {
- _raf2['default'].cancel(this.animationID);
- this.animationID = null;
- }
- };
-
- TransitionMotion.prototype.render = function render() {
- var hydratedStyles = rehydrateStyles(this.state.mergedPropsStyles, this.unreadPropStyles, this.state.currentStyles);
- var renderedChildren = this.props.children(hydratedStyles);
- return renderedChildren && _react2['default'].Children.only(renderedChildren);
- };
-
- return TransitionMotion;
- })(_react2['default'].Component);
-
- exports['default'] = TransitionMotion;
- module.exports = exports['default'];
-
- // list of styles, each containing interpolating values. Part of what's passed
- // to children function. Notice that this is
- // Array, without the wrapper that is {key: ...,
- // data: ... style: ActualInterpolatingStyleObject}. Only mergedPropsStyles
- // contains the key & data info (so that we only have a single source of truth
- // for these, and to save space). Check the comment for `rehydrateStyles` to
- // see how we regenerate the entirety of what's passed to children function
-
- // the array that keeps track of currently rendered stuff! Including stuff
- // that you've unmounted but that's still animating. This is where it lives
-
- // it's possible that currentStyle's value is stale: if props is immediately
- // changed from 0 to 400 to spring(0) again, the async currentStyle is still
- // at 0 (didn't have time to tick and interpolate even once). If we naively
- // compare currentStyle with destVal it'll be 0 === 0 (no animation, stop).
- // In reality currentStyle should be 400
-
-/***/ }),
-/* 246 */
-/***/ (function(module, exports) {
-
-
-
- // core keys merging algorithm. If previous render's keys are [a, b], and the
- // next render's [c, b, d], what's the final merged keys and ordering?
-
- // - c and a must both be before b
- // - b before d
- // - ordering between a and c ambiguous
-
- // this reduces to merging two partially ordered lists (e.g. lists where not
- // every item has a definite ordering, like comparing a and c above). For the
- // ambiguous ordering we deterministically choose to place the next render's
- // item after the previous'; so c after a
-
- // this is called a topological sorting. Except the existing algorithms don't
- // work well with js bc of the amount of allocation, and isn't optimized for our
- // current use-case bc the runtime is linear in terms of edges (see wiki for
- // meaning), which is huge when two lists have many common elements
- 'use strict';
-
- exports.__esModule = true;
- exports['default'] = mergeDiff;
-
- function mergeDiff(prev, next, onRemove) {
- // bookkeeping for easier access of a key's index below. This is 2 allocations +
- // potentially triggering chrome hash map mode for objs (so it might be faster
-
- var prevKeyIndex = {};
- for (var i = 0; i < prev.length; i++) {
- prevKeyIndex[prev[i].key] = i;
- }
- var nextKeyIndex = {};
- for (var i = 0; i < next.length; i++) {
- nextKeyIndex[next[i].key] = i;
- }
-
- // first, an overly elaborate way of merging prev and next, eliminating
- // duplicates (in terms of keys). If there's dupe, keep the item in next).
- // This way of writing it saves allocations
- var ret = [];
- for (var i = 0; i < next.length; i++) {
- ret[i] = next[i];
- }
- for (var i = 0; i < prev.length; i++) {
- if (!Object.prototype.hasOwnProperty.call(nextKeyIndex, prev[i].key)) {
- // this is called my TM's `mergeAndSync`, which calls willLeave. We don't
- // merge in keys that the user desires to kill
- var fill = onRemove(i, prev[i]);
- if (fill != null) {
- ret.push(fill);
- }
- }
- }
-
- // now all the items all present. Core sorting logic to have the right order
- return ret.sort(function (a, b) {
- var nextOrderA = nextKeyIndex[a.key];
- var nextOrderB = nextKeyIndex[b.key];
- var prevOrderA = prevKeyIndex[a.key];
- var prevOrderB = prevKeyIndex[b.key];
-
- if (nextOrderA != null && nextOrderB != null) {
- // both keys in next
- return nextKeyIndex[a.key] - nextKeyIndex[b.key];
- } else if (prevOrderA != null && prevOrderB != null) {
- // both keys in prev
- return prevKeyIndex[a.key] - prevKeyIndex[b.key];
- } else if (nextOrderA != null) {
- // key a in next, key b in prev
-
- // how to determine the order between a and b? We find a "pivot" (term
- // abuse), a key present in both prev and next, that is sandwiched between
- // a and b. In the context of our above example, if we're comparing a and
- // d, b's (the only) pivot
- for (var i = 0; i < next.length; i++) {
- var pivot = next[i].key;
- if (!Object.prototype.hasOwnProperty.call(prevKeyIndex, pivot)) {
- continue;
- }
-
- if (nextOrderA < nextKeyIndex[pivot] && prevOrderB > prevKeyIndex[pivot]) {
- return -1;
- } else if (nextOrderA > nextKeyIndex[pivot] && prevOrderB < prevKeyIndex[pivot]) {
- return 1;
- }
- }
- // pluggable. default to: next bigger than prev
- return 1;
- }
- // prevOrderA, nextOrderB
- for (var i = 0; i < next.length; i++) {
- var pivot = next[i].key;
- if (!Object.prototype.hasOwnProperty.call(prevKeyIndex, pivot)) {
- continue;
- }
- if (nextOrderB < nextKeyIndex[pivot] && prevOrderA > prevKeyIndex[pivot]) {
- return 1;
- } else if (nextOrderB > nextKeyIndex[pivot] && prevOrderA < prevKeyIndex[pivot]) {
- return -1;
- }
- }
- // pluggable. default to: next bigger than prev
- return -1;
- });
- }
-
- module.exports = exports['default'];
- // to loop through and find a key's index each time), but I no longer care
-
-/***/ }),
-/* 247 */
-/***/ (function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- exports.__esModule = 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['default'] = spring;
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var _presets = __webpack_require__(248);
-
- var _presets2 = _interopRequireDefault(_presets);
-
- var defaultConfig = _extends({}, _presets2['default'].noWobble, {
- precision: 0.01
- });
-
- function spring(val, config) {
- return _extends({}, defaultConfig, config, { val: val });
- }
-
- module.exports = exports['default'];
-
-/***/ }),
-/* 248 */
-/***/ (function(module, exports) {
-
- "use strict";
-
- exports.__esModule = true;
- exports["default"] = {
- noWobble: { stiffness: 170, damping: 26 }, // the default, if nothing provided
- gentle: { stiffness: 120, damping: 14 },
- wobbly: { stiffness: 180, damping: 12 },
- stiff: { stiffness: 210, damping: 20 }
- };
- module.exports = exports["default"];
-
-/***/ }),
-/* 249 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(process) {'use strict';
-
- exports.__esModule = true;
- exports['default'] = reorderKeys;
-
- var hasWarned = false;
-
- function reorderKeys() {
- if (process.env.NODE_ENV === 'development') {
- if (!hasWarned) {
- hasWarned = true;
- console.error('`reorderKeys` has been removed, since it is no longer needed for TransitionMotion\'s new styles array API.');
- }
- }
- }
-
- module.exports = exports['default'];
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
-
-/***/ }),
-/* 250 */
-/***/ (function(module, exports, __webpack_require__) {
-
- (function (global, factory) {
- true ? module.exports = factory(__webpack_require__(2), __webpack_require__(1)) :
- typeof define === 'function' && define.amd ? define(['react-dom', 'react'], factory) :
- (global.ReactDraggable = factory(global.ReactDOM,global.React));
- }(this, (function (ReactDOM,React) { 'use strict';
-
- ReactDOM = ReactDOM && ReactDOM.hasOwnProperty('default') ? ReactDOM['default'] : ReactDOM;
- React = React && React.hasOwnProperty('default') ? React['default'] : React;
-
- function createCommonjsModule(fn, module) {
- return module = { exports: {} }, fn(module, module.exports), module.exports;
- }
-
- /**
- * 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 makeEmptyFunction(arg) {
- return function () {
- return arg;
- };
- }
-
- /**
- * This function accepts and discards inputs; it has no side effects. This is
- * primarily useful idiomatically for overridable function endpoints which
- * always need to be callable, since JS lacks a null-call idiom ala Cocoa.
- */
- var emptyFunction = function emptyFunction() {};
-
- emptyFunction.thatReturns = makeEmptyFunction;
- emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
- emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
- emptyFunction.thatReturnsNull = makeEmptyFunction(null);
- emptyFunction.thatReturnsThis = function () {
- return this;
- };
- emptyFunction.thatReturnsArgument = function (arg) {
- return arg;
- };
-
- var emptyFunction_1 = emptyFunction;
-
- /**
- * 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.
- *
- */
-
- /**
- * Use invariant() to assert state which your program assumes to be true.
- *
- * Provide sprintf-style format (only %s is supported) and arguments
- * to provide information about what broke and what you were
- * expecting.
- *
- * The invariant message will be stripped in production, but the invariant
- * will remain to ensure logic does not differ in production.
- */
-
- var validateFormat = function validateFormat(format) {};
-
- {
- validateFormat = function validateFormat(format) {
- if (format === undefined) {
- throw new Error('invariant requires an error message argument');
- }
- };
- }
-
- function invariant(condition, format, a, b, c, d, e, f) {
- validateFormat(format);
-
- if (!condition) {
- var error;
- if (format === undefined) {
- error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
- } else {
- var args = [a, b, c, d, e, f];
- var argIndex = 0;
- error = new Error(format.replace(/%s/g, function () {
- return args[argIndex++];
- }));
- error.name = 'Invariant Violation';
- }
-
- error.framesToPop = 1; // we don't care about invariant's own frame
- throw error;
- }
- }
-
- var invariant_1 = invariant;
-
- /**
- * Similar to invariant but only logs a warning if the condition is not met.
- * This can be used to log issues in development environments in critical
- * paths. Removing the logging code for production environments will keep the
- * same logic and follow the same code paths.
- */
-
- var warning = emptyFunction_1;
-
- {
- var printWarning = function printWarning(format) {
- for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- args[_key - 1] = arguments[_key];
- }
-
- var argIndex = 0;
- var message = 'Warning: ' + format.replace(/%s/g, function () {
- return args[argIndex++];
- });
- if (typeof console !== 'undefined') {
- console.error(message);
- }
- try {
- // --- Welcome to debugging React ---
- // This error was thrown as a convenience so that you can use this stack
- // to find the callsite that caused this warning to fire.
- throw new Error(message);
- } catch (x) {}
- };
-
- warning = function warning(condition, format) {
- if (format === undefined) {
- throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
- }
-
- if (format.indexOf('Failed Composite propType: ') === 0) {
- return; // Ignore CompositeComponent proptype check.
- }
-
- if (!condition) {
- for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
- args[_key2 - 2] = arguments[_key2];
- }
-
- printWarning.apply(undefined, [format].concat(args));
- }
- };
- }
-
- var warning_1 = warning;
-
- /*
- object-assign
- (c) Sindre Sorhus
- @license MIT
- */
- /* eslint-disable no-unused-vars */
- var getOwnPropertySymbols = Object.getOwnPropertySymbols;
- var hasOwnProperty = Object.prototype.hasOwnProperty;
- var propIsEnumerable = Object.prototype.propertyIsEnumerable;
-
- function toObject(val) {
- if (val === null || val === undefined) {
- throw new TypeError('Object.assign cannot be called with null or undefined');
- }
-
- return Object(val);
- }
-
- function shouldUseNative() {
- try {
- if (!Object.assign) {
- return false;
- }
-
- // Detect buggy property enumeration order in older V8 versions.
-
- // https://bugs.chromium.org/p/v8/issues/detail?id=4118
- var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
- test1[5] = 'de';
- if (Object.getOwnPropertyNames(test1)[0] === '5') {
- return false;
- }
-
- // https://bugs.chromium.org/p/v8/issues/detail?id=3056
- var test2 = {};
- for (var i = 0; i < 10; i++) {
- test2['_' + String.fromCharCode(i)] = i;
- }
- var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
- return test2[n];
- });
- if (order2.join('') !== '0123456789') {
- return false;
- }
-
- // https://bugs.chromium.org/p/v8/issues/detail?id=3056
- var test3 = {};
- 'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
- test3[letter] = letter;
- });
- if (Object.keys(Object.assign({}, test3)).join('') !==
- 'abcdefghijklmnopqrst') {
- return false;
- }
-
- return true;
- } catch (err) {
- // We don't expect any of the above to throw, but better to be safe.
- return false;
- }
- }
-
- var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
- var from;
- var to = toObject(target);
- var symbols;
-
- for (var s = 1; s < arguments.length; s++) {
- from = Object(arguments[s]);
-
- for (var key in from) {
- if (hasOwnProperty.call(from, key)) {
- to[key] = from[key];
- }
- }
-
- if (getOwnPropertySymbols) {
- symbols = getOwnPropertySymbols(from);
- for (var i = 0; i < symbols.length; i++) {
- if (propIsEnumerable.call(from, symbols[i])) {
- to[symbols[i]] = from[symbols[i]];
- }
- }
- }
- }
-
- return to;
- };
-
- /**
- * 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.
- */
-
- var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
-
- var ReactPropTypesSecret_1 = ReactPropTypesSecret;
-
- {
- var invariant$1 = invariant_1;
- var warning$1 = warning_1;
- var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
- var loggedTypeFailures = {};
- }
-
- /**
- * Assert that the values match with the type specs.
- * Error messages are memorized and will only be shown once.
- *
- * @param {object} typeSpecs Map of name to a ReactPropType
- * @param {object} values Runtime values that need to be type-checked
- * @param {string} location e.g. "prop", "context", "child context"
- * @param {string} componentName Name of the component for error messages.
- * @param {?Function} getStack Returns the component stack.
- * @private
- */
- function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
- {
- for (var typeSpecName in typeSpecs) {
- if (typeSpecs.hasOwnProperty(typeSpecName)) {
- var error;
- // Prop type validation may throw. In case they do, we don't want to
- // fail the render phase where it didn't fail before. So we log it.
- // After these have been cleaned up, we'll let them throw.
- try {
- // This is intentionally an invariant that gets caught. It's the same
- // behavior as without this statement except with a better message.
- invariant$1(typeof typeSpecs[typeSpecName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'the `prop-types` package, but received `%s`.', componentName || 'React class', location, typeSpecName, typeof typeSpecs[typeSpecName]);
- error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
- } catch (ex) {
- error = ex;
- }
- warning$1(!error || error instanceof Error, '%s: type specification of %s `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error);
- if (error instanceof Error && !(error.message in loggedTypeFailures)) {
- // Only monitor this failure once because there tends to be a lot of the
- // same error.
- loggedTypeFailures[error.message] = true;
-
- var stack = getStack ? getStack() : '';
-
- warning$1(false, 'Failed %s type: %s%s', location, error.message, stack != null ? stack : '');
- }
- }
- }
- }
- }
-
- var checkPropTypes_1 = checkPropTypes;
-
- var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
- /* global Symbol */
- var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
- var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
-
- /**
- * Returns the iterator method function contained on the iterable object.
- *
- * Be sure to invoke the function with the iterable as context:
- *
- * var iteratorFn = getIteratorFn(myIterable);
- * if (iteratorFn) {
- * var iterator = iteratorFn.call(myIterable);
- * ...
- * }
- *
- * @param {?object} maybeIterable
- * @return {?function}
- */
- function getIteratorFn(maybeIterable) {
- var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
- if (typeof iteratorFn === 'function') {
- return iteratorFn;
- }
- }
-
- /**
- * Collection of methods that allow declaration and validation of props that are
- * supplied to React components. Example usage:
- *
- * var Props = require('ReactPropTypes');
- * var MyArticle = React.createClass({
- * propTypes: {
- * // An optional string prop named "description".
- * description: Props.string,
- *
- * // A required enum prop named "category".
- * category: Props.oneOf(['News','Photos']).isRequired,
- *
- * // A prop named "dialog" that requires an instance of Dialog.
- * dialog: Props.instanceOf(Dialog).isRequired
- * },
- * render: function() { ... }
- * });
- *
- * A more formal specification of how these methods are used:
- *
- * type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
- * decl := ReactPropTypes.{type}(.isRequired)?
- *
- * Each and every declaration produces a function with the same signature. This
- * allows the creation of custom validation functions. For example:
- *
- * var MyLink = React.createClass({
- * propTypes: {
- * // An optional string or URI prop named "href".
- * href: function(props, propName, componentName) {
- * var propValue = props[propName];
- * if (propValue != null && typeof propValue !== 'string' &&
- * !(propValue instanceof URI)) {
- * return new Error(
- * 'Expected a string or an URI for ' + propName + ' in ' +
- * componentName
- * );
- * }
- * }
- * },
- * render: function() {...}
- * });
- *
- * @internal
- */
-
- var ANONYMOUS = '<>';
-
- // Important!
- // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
- var ReactPropTypes = {
- array: createPrimitiveTypeChecker('array'),
- bool: createPrimitiveTypeChecker('boolean'),
- func: createPrimitiveTypeChecker('function'),
- number: createPrimitiveTypeChecker('number'),
- object: createPrimitiveTypeChecker('object'),
- string: createPrimitiveTypeChecker('string'),
- symbol: createPrimitiveTypeChecker('symbol'),
-
- any: createAnyTypeChecker(),
- arrayOf: createArrayOfTypeChecker,
- element: createElementTypeChecker(),
- instanceOf: createInstanceTypeChecker,
- node: createNodeChecker(),
- objectOf: createObjectOfTypeChecker,
- oneOf: createEnumTypeChecker,
- oneOfType: createUnionTypeChecker,
- shape: createShapeTypeChecker,
- exact: createStrictShapeTypeChecker,
- };
-
- /**
- * inlined Object.is polyfill to avoid requiring consumers ship their own
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
- */
- /*eslint-disable no-self-compare*/
- function is(x, y) {
- // SameValue algorithm
- if (x === y) {
- // Steps 1-5, 7-10
- // Steps 6.b-6.e: +0 != -0
- return x !== 0 || 1 / x === 1 / y;
- } else {
- // Step 6.a: NaN == NaN
- return x !== x && y !== y;
- }
- }
- /*eslint-enable no-self-compare*/
-
- /**
- * We use an Error-like object for backward compatibility as people may call
- * PropTypes directly and inspect their output. However, we don't use real
- * Errors anymore. We don't inspect their stack anyway, and creating them
- * is prohibitively expensive if they are created too often, such as what
- * happens in oneOfType() for any type before the one that matched.
- */
- function PropTypeError(message) {
- this.message = message;
- this.stack = '';
- }
- // Make `instanceof Error` still work for returned errors.
- PropTypeError.prototype = Error.prototype;
-
- function createChainableTypeChecker(validate) {
- {
- var manualPropTypeCallCache = {};
- var manualPropTypeWarningCount = 0;
- }
- function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
- componentName = componentName || ANONYMOUS;
- propFullName = propFullName || propName;
-
- if (secret !== ReactPropTypesSecret_1) {
- if (throwOnDirectAccess) {
- // New behavior only for users of `prop-types` package
- invariant_1(
- false,
- 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
- 'Use `PropTypes.checkPropTypes()` to call them. ' +
- 'Read more at http://fb.me/use-check-prop-types'
- );
- } else if ("development" !== 'production' && typeof console !== 'undefined') {
- // Old behavior for people using React.PropTypes
- var cacheKey = componentName + ':' + propName;
- if (
- !manualPropTypeCallCache[cacheKey] &&
- // Avoid spamming the console because they are often not actionable except for lib authors
- manualPropTypeWarningCount < 3
- ) {
- warning_1(
- false,
- 'You are manually calling a React.PropTypes validation ' +
- 'function for the `%s` prop on `%s`. This is deprecated ' +
- 'and will throw in the standalone `prop-types` package. ' +
- 'You may be seeing this warning due to a third-party PropTypes ' +
- 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.',
- propFullName,
- componentName
- );
- manualPropTypeCallCache[cacheKey] = true;
- manualPropTypeWarningCount++;
- }
- }
- }
- if (props[propName] == null) {
- if (isRequired) {
- if (props[propName] === null) {
- return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
- }
- return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
- }
- return null;
- } else {
- return validate(props, propName, componentName, location, propFullName);
- }
- }
-
- var chainedCheckType = checkType.bind(null, false);
- chainedCheckType.isRequired = checkType.bind(null, true);
-
- return chainedCheckType;
- }
-
- function createPrimitiveTypeChecker(expectedType) {
- function validate(props, propName, componentName, location, propFullName, secret) {
- var propValue = props[propName];
- var propType = getPropType(propValue);
- if (propType !== expectedType) {
- // `propValue` being instance of, say, date/regexp, pass the 'object'
- // check, but we can offer a more precise error message here rather than
- // 'of type `object`'.
- var preciseType = getPreciseType(propValue);
-
- return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
- }
- return null;
- }
- return createChainableTypeChecker(validate);
- }
-
- function createAnyTypeChecker() {
- return createChainableTypeChecker(emptyFunction_1.thatReturnsNull);
- }
-
- function createArrayOfTypeChecker(typeChecker) {
- function validate(props, propName, componentName, location, propFullName) {
- if (typeof typeChecker !== 'function') {
- return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
- }
- var propValue = props[propName];
- if (!Array.isArray(propValue)) {
- var propType = getPropType(propValue);
- return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
- }
- for (var i = 0; i < propValue.length; i++) {
- var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret_1);
- if (error instanceof Error) {
- return error;
- }
- }
- return null;
- }
- return createChainableTypeChecker(validate);
- }
-
- function createElementTypeChecker() {
- function validate(props, propName, componentName, location, propFullName) {
- var propValue = props[propName];
- if (!isValidElement(propValue)) {
- var propType = getPropType(propValue);
- return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
- }
- return null;
- }
- return createChainableTypeChecker(validate);
- }
-
- function createInstanceTypeChecker(expectedClass) {
- function validate(props, propName, componentName, location, propFullName) {
- if (!(props[propName] instanceof expectedClass)) {
- var expectedClassName = expectedClass.name || ANONYMOUS;
- var actualClassName = getClassName(props[propName]);
- return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
- }
- return null;
- }
- return createChainableTypeChecker(validate);
- }
-
- function createEnumTypeChecker(expectedValues) {
- if (!Array.isArray(expectedValues)) {
- warning_1(false, 'Invalid argument supplied to oneOf, expected an instance of array.');
- return emptyFunction_1.thatReturnsNull;
- }
-
- function validate(props, propName, componentName, location, propFullName) {
- var propValue = props[propName];
- for (var i = 0; i < expectedValues.length; i++) {
- if (is(propValue, expectedValues[i])) {
- return null;
- }
- }
-
- var valuesString = JSON.stringify(expectedValues);
- return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
- }
- return createChainableTypeChecker(validate);
- }
-
- function createObjectOfTypeChecker(typeChecker) {
- function validate(props, propName, componentName, location, propFullName) {
- if (typeof typeChecker !== 'function') {
- return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
- }
- var propValue = props[propName];
- var propType = getPropType(propValue);
- if (propType !== 'object') {
- return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
- }
- for (var key in propValue) {
- if (propValue.hasOwnProperty(key)) {
- var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
- if (error instanceof Error) {
- return error;
- }
- }
- }
- return null;
- }
- return createChainableTypeChecker(validate);
- }
-
- function createUnionTypeChecker(arrayOfTypeCheckers) {
- if (!Array.isArray(arrayOfTypeCheckers)) {
- warning_1(false, 'Invalid argument supplied to oneOfType, expected an instance of array.');
- return emptyFunction_1.thatReturnsNull;
- }
-
- for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
- var checker = arrayOfTypeCheckers[i];
- if (typeof checker !== 'function') {
- warning_1(
- false,
- 'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
- 'received %s at index %s.',
- getPostfixForTypeWarning(checker),
- i
- );
- return emptyFunction_1.thatReturnsNull;
- }
- }
-
- function validate(props, propName, componentName, location, propFullName) {
- for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
- var checker = arrayOfTypeCheckers[i];
- if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1) == null) {
- return null;
- }
- }
-
- return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
- }
- return createChainableTypeChecker(validate);
- }
-
- function createNodeChecker() {
- function validate(props, propName, componentName, location, propFullName) {
- if (!isNode(props[propName])) {
- return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
- }
- return null;
- }
- return createChainableTypeChecker(validate);
- }
-
- function createShapeTypeChecker(shapeTypes) {
- function validate(props, propName, componentName, location, propFullName) {
- var propValue = props[propName];
- var propType = getPropType(propValue);
- if (propType !== 'object') {
- return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
- }
- for (var key in shapeTypes) {
- var checker = shapeTypes[key];
- if (!checker) {
- continue;
- }
- var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
- if (error) {
- return error;
- }
- }
- return null;
- }
- return createChainableTypeChecker(validate);
- }
-
- function createStrictShapeTypeChecker(shapeTypes) {
- function validate(props, propName, componentName, location, propFullName) {
- var propValue = props[propName];
- var propType = getPropType(propValue);
- if (propType !== 'object') {
- return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
- }
- // We need to check all keys in case some are required but missing from
- // props.
- var allKeys = objectAssign({}, props[propName], shapeTypes);
- for (var key in allKeys) {
- var checker = shapeTypes[key];
- if (!checker) {
- return new PropTypeError(
- 'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
- '\nBad object: ' + JSON.stringify(props[propName], null, ' ') +
- '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, ' ')
- );
- }
- var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
- if (error) {
- return error;
- }
- }
- return null;
- }
-
- return createChainableTypeChecker(validate);
- }
-
- function isNode(propValue) {
- switch (typeof propValue) {
- case 'number':
- case 'string':
- case 'undefined':
- return true;
- case 'boolean':
- return !propValue;
- case 'object':
- if (Array.isArray(propValue)) {
- return propValue.every(isNode);
- }
- if (propValue === null || isValidElement(propValue)) {
- return true;
- }
-
- var iteratorFn = getIteratorFn(propValue);
- if (iteratorFn) {
- var iterator = iteratorFn.call(propValue);
- var step;
- if (iteratorFn !== propValue.entries) {
- while (!(step = iterator.next()).done) {
- if (!isNode(step.value)) {
- return false;
- }
- }
- } else {
- // Iterator will provide entry [k,v] tuples rather than values.
- while (!(step = iterator.next()).done) {
- var entry = step.value;
- if (entry) {
- if (!isNode(entry[1])) {
- return false;
- }
- }
- }
- }
- } else {
- return false;
- }
-
- return true;
- default:
- return false;
- }
- }
-
- function isSymbol(propType, propValue) {
- // Native Symbol.
- if (propType === 'symbol') {
- return true;
- }
-
- // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
- if (propValue['@@toStringTag'] === 'Symbol') {
- return true;
- }
-
- // Fallback for non-spec compliant Symbols which are polyfilled.
- if (typeof Symbol === 'function' && propValue instanceof Symbol) {
- return true;
- }
-
- return false;
- }
-
- // Equivalent of `typeof` but with special handling for array and regexp.
- function getPropType(propValue) {
- var propType = typeof propValue;
- if (Array.isArray(propValue)) {
- return 'array';
- }
- if (propValue instanceof RegExp) {
- // Old webkits (at least until Android 4.0) return 'function' rather than
- // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
- // passes PropTypes.object.
- return 'object';
- }
- if (isSymbol(propType, propValue)) {
- return 'symbol';
- }
- return propType;
- }
-
- // This handles more types than `getPropType`. Only used for error messages.
- // See `createPrimitiveTypeChecker`.
- function getPreciseType(propValue) {
- if (typeof propValue === 'undefined' || propValue === null) {
- return '' + propValue;
- }
- var propType = getPropType(propValue);
- if (propType === 'object') {
- if (propValue instanceof Date) {
- return 'date';
- } else if (propValue instanceof RegExp) {
- return 'regexp';
- }
- }
- return propType;
- }
-
- // Returns a string that is postfixed to a warning about an invalid type.
- // For example, "undefined" or "of type array"
- function getPostfixForTypeWarning(value) {
- var type = getPreciseType(value);
- switch (type) {
- case 'array':
- case 'object':
- return 'an ' + type;
- case 'boolean':
- case 'date':
- case 'regexp':
- return 'a ' + type;
- default:
- return type;
- }
- }
-
- // Returns class name of the object, if any.
- function getClassName(propValue) {
- if (!propValue.constructor || !propValue.constructor.name) {
- return ANONYMOUS;
- }
- return propValue.constructor.name;
- }
-
- ReactPropTypes.checkPropTypes = checkPropTypes_1;
- ReactPropTypes.PropTypes = ReactPropTypes;
-
- return ReactPropTypes;
- };
-
- var propTypes = createCommonjsModule(function (module) {
- /**
- * 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.
- */
-
- {
- var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
- Symbol.for &&
- Symbol.for('react.element')) ||
- 0xeac7;
-
- var isValidElement = function(object) {
- return typeof object === 'object' &&
- object !== null &&
- object.$$typeof === REACT_ELEMENT_TYPE;
- };
-
- // By explicitly using `prop-types` you are opting into new development behavior.
- // http://fb.me/prop-types-in-prod
- var throwOnDirectAccess = true;
- module.exports = factoryWithTypeCheckers(isValidElement, throwOnDirectAccess);
- }
- });
-
- var classnames = createCommonjsModule(function (module) {
- /*!
- Copyright (c) 2016 Jed Watson.
- Licensed under the MIT License (MIT), see
- http://jedwatson.github.io/classnames
- */
- /* global define */
-
- (function () {
-
- var hasOwn = {}.hasOwnProperty;
-
- function classNames () {
- var classes = [];
-
- for (var i = 0; i < arguments.length; i++) {
- var arg = arguments[i];
- if (!arg) continue;
-
- var argType = typeof arg;
-
- if (argType === 'string' || argType === 'number') {
- classes.push(arg);
- } else if (Array.isArray(arg)) {
- classes.push(classNames.apply(null, arg));
- } else if (argType === 'object') {
- for (var key in arg) {
- if (hasOwn.call(arg, key) && arg[key]) {
- classes.push(key);
- }
- }
- }
- }
-
- return classes.join(' ');
- }
-
- if ('object' !== 'undefined' && module.exports) {
- module.exports = classNames;
- } else if (false) {
- // register as 'classnames', consistent with npm package name
- undefined('classnames', [], function () {
- return classNames;
- });
- } else {
- window.classNames = classNames;
- }
- }());
- });
-
- // @credits https://gist.github.com/rogozhnikoff/a43cfed27c41e4e68cdc
- function findInArray(array /*: Array | TouchList*/, callback /*: Function*/) /*: any*/ {
- for (var i = 0, length = array.length; i < length; i++) {
- if (callback.apply(callback, [array[i], i, array])) return array[i];
- }
- }
-
- function isFunction(func /*: any*/) /*: boolean*/ {
- return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]';
- }
-
- function isNum(num /*: any*/) /*: boolean*/ {
- return typeof num === 'number' && !isNaN(num);
- }
-
- function int(a /*: string*/) /*: number*/ {
- return parseInt(a, 10);
- }
-
- function dontSetMe(props /*: Object*/, propName /*: string*/, componentName /*: string*/) {
- if (props[propName]) {
- return new Error('Invalid prop ' + propName + ' passed to ' + componentName + ' - do not set this, set it on the child.');
- }
- }
-
- var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
- function getPrefix() /*: string*/ {
- var prop /*: string*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transform';
-
- // Checking specifically for 'window.document' is for pseudo-browser server-side
- // environments that define 'window' as the global context.
- // E.g. React-rails (see https://github.com/reactjs/react-rails/pull/84)
- if (typeof window === 'undefined' || typeof window.document === 'undefined') return '';
-
- var style = window.document.documentElement.style;
-
- if (prop in style) return '';
-
- for (var i = 0; i < prefixes.length; i++) {
- if (browserPrefixToKey(prop, prefixes[i]) in style) return prefixes[i];
- }
-
- return '';
- }
-
- function browserPrefixToKey(prop /*: string*/, prefix /*: string*/) /*: string*/ {
- return prefix ? '' + prefix + kebabToTitleCase(prop) : prop;
- }
-
- function kebabToTitleCase(str /*: string*/) /*: string*/ {
- var out = '';
- var shouldCapitalize = true;
- for (var i = 0; i < str.length; i++) {
- if (shouldCapitalize) {
- out += str[i].toUpperCase();
- shouldCapitalize = false;
- } else if (str[i] === '-') {
- shouldCapitalize = true;
- } else {
- out += str[i];
- }
- }
- return out;
- }
-
- // Default export is the prefix itself, like 'Moz', 'Webkit', etc
- // Note that you may have to re-test for certain things; for instance, Chrome 50
- // can handle unprefixed `transform`, but not unprefixed `user-select`
- var browserPrefix = getPrefix();
-
- var classCallCheck = function (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 defineProperty = function (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;
- };
-
- 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 inherits = function (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 possibleConstructorReturn = function (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;
- };
-
- 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");
- }
- };
- }();
-
- /*:: import type {ControlPosition, PositionOffsetControlPosition, MouseTouchEvent} from './types';*/
-
-
- var matchesSelectorFunc = '';
- function matchesSelector(el /*: Node*/, selector /*: string*/) /*: boolean*/ {
- if (!matchesSelectorFunc) {
- matchesSelectorFunc = findInArray(['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'], function (method) {
- // $FlowIgnore: Doesn't think elements are indexable
- return isFunction(el[method]);
- });
- }
-
- // Might not be found entirely (not an Element?) - in that case, bail
- // $FlowIgnore: Doesn't think elements are indexable
- if (!isFunction(el[matchesSelectorFunc])) return false;
-
- // $FlowIgnore: Doesn't think elements are indexable
- return el[matchesSelectorFunc](selector);
- }
-
- // Works up the tree to the draggable itself attempting to match selector.
- function matchesSelectorAndParentsTo(el /*: Node*/, selector /*: string*/, baseNode /*: Node*/) /*: boolean*/ {
- var node = el;
- do {
- if (matchesSelector(node, selector)) return true;
- if (node === baseNode) return false;
- node = node.parentNode;
- } while (node);
-
- return false;
- }
-
- function addEvent(el /*: ?Node*/, event /*: string*/, handler /*: Function*/) /*: void*/ {
- if (!el) {
- return;
- }
- if (el.attachEvent) {
- el.attachEvent('on' + event, handler);
- } else if (el.addEventListener) {
- el.addEventListener(event, handler, true);
- } else {
- // $FlowIgnore: Doesn't think elements are indexable
- el['on' + event] = handler;
- }
- }
-
- function removeEvent(el /*: ?Node*/, event /*: string*/, handler /*: Function*/) /*: void*/ {
- if (!el) {
- return;
- }
- if (el.detachEvent) {
- el.detachEvent('on' + event, handler);
- } else if (el.removeEventListener) {
- el.removeEventListener(event, handler, true);
- } else {
- // $FlowIgnore: Doesn't think elements are indexable
- el['on' + event] = null;
- }
- }
-
- function outerHeight(node /*: HTMLElement*/) /*: number*/ {
- // This is deliberately excluding margin for our calculations, since we are using
- // offsetTop which is including margin. See getBoundPosition
- var height = node.clientHeight;
- var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
- height += int(computedStyle.borderTopWidth);
- height += int(computedStyle.borderBottomWidth);
- return height;
- }
-
- function outerWidth(node /*: HTMLElement*/) /*: number*/ {
- // This is deliberately excluding margin for our calculations, since we are using
- // offsetLeft which is including margin. See getBoundPosition
- var width = node.clientWidth;
- var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
- width += int(computedStyle.borderLeftWidth);
- width += int(computedStyle.borderRightWidth);
- return width;
- }
- function innerHeight(node /*: HTMLElement*/) /*: number*/ {
- var height = node.clientHeight;
- var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
- height -= int(computedStyle.paddingTop);
- height -= int(computedStyle.paddingBottom);
- return height;
- }
-
- function innerWidth(node /*: HTMLElement*/) /*: number*/ {
- var width = node.clientWidth;
- var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
- width -= int(computedStyle.paddingLeft);
- width -= int(computedStyle.paddingRight);
- return width;
- }
-
- // Get from offsetParent
- function offsetXYFromParent(evt /*: {clientX: number, clientY: number}*/, offsetParent /*: HTMLElement*/) /*: ControlPosition*/ {
- var isBody = offsetParent === offsetParent.ownerDocument.body;
- var offsetParentRect = isBody ? { left: 0, top: 0 } : offsetParent.getBoundingClientRect();
-
- var x = evt.clientX + offsetParent.scrollLeft - offsetParentRect.left;
- var y = evt.clientY + offsetParent.scrollTop - offsetParentRect.top;
-
- return { x: x, y: y };
- }
-
- function createCSSTransform(controlPos /*: ControlPosition*/, positionOffset /*: PositionOffsetControlPosition*/) /*: Object*/ {
- var translation = getTranslation(controlPos, positionOffset, 'px');
- return defineProperty({}, browserPrefixToKey('transform', browserPrefix), translation);
- }
-
- function createSVGTransform(controlPos /*: ControlPosition*/, positionOffset /*: PositionOffsetControlPosition*/) /*: string*/ {
- var translation = getTranslation(controlPos, positionOffset, '');
- return translation;
- }
- function getTranslation(_ref2, positionOffset /*: PositionOffsetControlPosition*/, unitSuffix /*: string*/) /*: string*/ {
- var x = _ref2.x,
- y = _ref2.y;
-
- var translation = 'translate(' + x + unitSuffix + ',' + y + unitSuffix + ')';
- if (positionOffset) {
- var defaultX = '' + (typeof positionOffset.x === 'string' ? positionOffset.x : positionOffset.x + unitSuffix);
- var defaultY = '' + (typeof positionOffset.y === 'string' ? positionOffset.y : positionOffset.y + unitSuffix);
- translation = 'translate(' + defaultX + ', ' + defaultY + ')' + translation;
- }
- return translation;
- }
-
- function getTouch(e /*: MouseTouchEvent*/, identifier /*: number*/) /*: ?{clientX: number, clientY: number}*/ {
- return e.targetTouches && findInArray(e.targetTouches, function (t) {
- return identifier === t.identifier;
- }) || e.changedTouches && findInArray(e.changedTouches, function (t) {
- return identifier === t.identifier;
- });
- }
-
- function getTouchIdentifier(e /*: MouseTouchEvent*/) /*: ?number*/ {
- if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier;
- if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;
- }
-
- // User-select Hacks:
- //
- // Useful for preventing blue highlights all over everything when dragging.
-
- // Note we're passing `document` b/c we could be iframed
- function addUserSelectStyles(doc /*: ?Document*/) {
- if (!doc) return;
- var styleEl = doc.getElementById('react-draggable-style-el');
- if (!styleEl) {
- styleEl = doc.createElement('style');
- styleEl.type = 'text/css';
- styleEl.id = 'react-draggable-style-el';
- styleEl.innerHTML = '.react-draggable-transparent-selection *::-moz-selection {background: transparent;}\n';
- styleEl.innerHTML += '.react-draggable-transparent-selection *::selection {background: transparent;}\n';
- doc.getElementsByTagName('head')[0].appendChild(styleEl);
- }
- if (doc.body) addClassName(doc.body, 'react-draggable-transparent-selection');
- }
-
- function removeUserSelectStyles(doc /*: ?Document*/) {
- try {
- if (doc && doc.body) removeClassName(doc.body, 'react-draggable-transparent-selection');
- // $FlowIgnore: IE
- if (doc.selection) {
- // $FlowIgnore: IE
- doc.selection.empty();
- } else {
- window.getSelection().removeAllRanges(); // remove selection caused by scroll
- }
- } catch (e) {
- // probably IE
- }
- }
-
- function styleHacks() /*: Object*/ {
- var childStyle /*: Object*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
- // Workaround IE pointer events; see #51
- // https://github.com/mzabriskie/react-draggable/issues/51#issuecomment-103488278
- return _extends({
- touchAction: 'none'
- }, childStyle);
- }
-
- function addClassName(el /*: HTMLElement*/, className /*: string*/) {
- if (el.classList) {
- el.classList.add(className);
- } else {
- if (!el.className.match(new RegExp('(?:^|\\s)' + className + '(?!\\S)'))) {
- el.className += ' ' + className;
- }
- }
- }
-
- function removeClassName(el /*: HTMLElement*/, className /*: string*/) {
- if (el.classList) {
- el.classList.remove(className);
- } else {
- el.className = el.className.replace(new RegExp('(?:^|\\s)' + className + '(?!\\S)', 'g'), '');
- }
- }
-
- /*:: import type Draggable from '../Draggable';*/
- /*:: import type {Bounds, ControlPosition, DraggableData, MouseTouchEvent} from './types';*/
- /*:: import type DraggableCore from '../DraggableCore';*/
-
-
- function getBoundPosition(draggable /*: Draggable*/, x /*: number*/, y /*: number*/) /*: [number, number]*/ {
- // If no bounds, short-circuit and move on
- if (!draggable.props.bounds) return [x, y];
-
- // Clone new bounds
- var bounds = draggable.props.bounds;
-
- bounds = typeof bounds === 'string' ? bounds : cloneBounds(bounds);
- var node = findDOMNode(draggable);
-
- if (typeof bounds === 'string') {
- var ownerDocument = node.ownerDocument;
-
- var ownerWindow = ownerDocument.defaultView;
- var boundNode = void 0;
- if (bounds === 'parent') {
- boundNode = node.parentNode;
- } else {
- boundNode = ownerDocument.querySelector(bounds);
- }
- if (!(boundNode instanceof ownerWindow.HTMLElement)) {
- throw new Error('Bounds selector "' + bounds + '" could not find an element.');
- }
- var nodeStyle = ownerWindow.getComputedStyle(node);
- var boundNodeStyle = ownerWindow.getComputedStyle(boundNode);
- // Compute bounds. This is a pain with padding and offsets but this gets it exactly right.
- bounds = {
- left: -node.offsetLeft + int(boundNodeStyle.paddingLeft) + int(nodeStyle.marginLeft),
- top: -node.offsetTop + int(boundNodeStyle.paddingTop) + int(nodeStyle.marginTop),
- right: innerWidth(boundNode) - outerWidth(node) - node.offsetLeft + int(boundNodeStyle.paddingRight) - int(nodeStyle.marginRight),
- bottom: innerHeight(boundNode) - outerHeight(node) - node.offsetTop + int(boundNodeStyle.paddingBottom) - int(nodeStyle.marginBottom)
- };
- }
-
- // Keep x and y below right and bottom limits...
- if (isNum(bounds.right)) x = Math.min(x, bounds.right);
- if (isNum(bounds.bottom)) y = Math.min(y, bounds.bottom);
-
- // But above left and top limits.
- if (isNum(bounds.left)) x = Math.max(x, bounds.left);
- if (isNum(bounds.top)) y = Math.max(y, bounds.top);
-
- return [x, y];
- }
-
- function snapToGrid(grid /*: [number, number]*/, pendingX /*: number*/, pendingY /*: number*/) /*: [number, number]*/ {
- var x = Math.round(pendingX / grid[0]) * grid[0];
- var y = Math.round(pendingY / grid[1]) * grid[1];
- return [x, y];
- }
-
- function canDragX(draggable /*: Draggable*/) /*: boolean*/ {
- return draggable.props.axis === 'both' || draggable.props.axis === 'x';
- }
-
- function canDragY(draggable /*: Draggable*/) /*: boolean*/ {
- return draggable.props.axis === 'both' || draggable.props.axis === 'y';
- }
-
- // Get {x, y} positions from event.
- function getControlPosition(e /*: MouseTouchEvent*/, touchIdentifier /*: ?number*/, draggableCore /*: DraggableCore*/) /*: ?ControlPosition*/ {
- var touchObj = typeof touchIdentifier === 'number' ? getTouch(e, touchIdentifier) : null;
- if (typeof touchIdentifier === 'number' && !touchObj) return null; // not the right touch
- var node = findDOMNode(draggableCore);
- // User can provide an offsetParent if desired.
- var offsetParent = draggableCore.props.offsetParent || node.offsetParent || node.ownerDocument.body;
- return offsetXYFromParent(touchObj || e, offsetParent);
- }
-
- // Create an data object exposed by 's events
- function createCoreData(draggable /*: DraggableCore*/, x /*: number*/, y /*: number*/) /*: DraggableData*/ {
- var state = draggable.state;
- var isStart = !isNum(state.lastX);
- var node = findDOMNode(draggable);
-
- if (isStart) {
- // If this is our first move, use the x and y as last coords.
- return {
- node: node,
- deltaX: 0, deltaY: 0,
- lastX: x, lastY: y,
- x: x, y: y
- };
- } else {
- // Otherwise calculate proper values.
- return {
- node: node,
- deltaX: x - state.lastX, deltaY: y - state.lastY,
- lastX: state.lastX, lastY: state.lastY,
- x: x, y: y
- };
- }
- }
-
- // Create an data exposed by 's events
- function createDraggableData(draggable /*: Draggable*/, coreData /*: DraggableData*/) /*: DraggableData*/ {
- var scale = draggable.props.scale;
- return {
- node: coreData.node,
- x: draggable.state.x + coreData.deltaX / scale,
- y: draggable.state.y + coreData.deltaY / scale,
- deltaX: coreData.deltaX / scale,
- deltaY: coreData.deltaY / scale,
- lastX: draggable.state.x,
- lastY: draggable.state.y
- };
- }
-
- // A lot faster than stringify/parse
- function cloneBounds(bounds /*: Bounds*/) /*: Bounds*/ {
- return {
- left: bounds.left,
- top: bounds.top,
- right: bounds.right,
- bottom: bounds.bottom
- };
- }
-
- function findDOMNode(draggable /*: Draggable | DraggableCore*/) /*: HTMLElement*/ {
- var node = ReactDOM.findDOMNode(draggable);
- if (!node) {
- throw new Error(': Unmounted during event!');
- }
- // $FlowIgnore we can't assert on HTMLElement due to tests... FIXME
- return node;
- }
-
- /*eslint no-console:0*/
- function log() {
- }
-
- /*:: import type {EventHandler, MouseTouchEvent} from './utils/types';*/
-
-
- // Simple abstraction for dragging events names.
- /*:: import type {Element as ReactElement} from 'react';*/
- var eventsFor = {
- touch: {
- start: 'touchstart',
- move: 'touchmove',
- stop: 'touchend'
- },
- mouse: {
- start: 'mousedown',
- move: 'mousemove',
- stop: 'mouseup'
- }
- };
-
- // Default to mouse events.
- var dragEventFor = eventsFor.mouse;
-
- /*:: type DraggableCoreState = {
- dragging: boolean,
- lastX: number,
- lastY: number,
- touchIdentifier: ?number
- };*/
- /*:: export type DraggableBounds = {
- left: number,
- right: number,
- top: number,
- bottom: number,
- };*/
- /*:: export type DraggableData = {
- node: HTMLElement,
- x: number, y: number,
- deltaX: number, deltaY: number,
- lastX: number, lastY: number,
- };*/
- /*:: export type DraggableEventHandler = (e: MouseEvent, data: DraggableData) => void;*/
- /*:: export type ControlPosition = {x: number, y: number};*/
- /*:: export type PositionOffsetControlPosition = {x: number|string, y: number|string};*/
-
-
- //
- // Define .
- //
- // is for advanced usage of . It maintains minimal internal state so it can
- // work well with libraries that require more control over the element.
- //
-
- /*:: export type DraggableCoreProps = {
- allowAnyClick: boolean,
- cancel: string,
- children: ReactElement,
- disabled: boolean,
- enableUserSelectHack: boolean,
- offsetParent: HTMLElement,
- grid: [number, number],
- handle: string,
- onStart: DraggableEventHandler,
- onDrag: DraggableEventHandler,
- onStop: DraggableEventHandler,
- onMouseDown: (e: MouseEvent) => void,
- };*/
-
- var DraggableCore = function (_React$Component) {
- inherits(DraggableCore, _React$Component);
-
- function DraggableCore() {
- var _ref;
-
- var _temp, _this, _ret;
-
- classCallCheck(this, DraggableCore);
-
- for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
-
- return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = DraggableCore.__proto__ || Object.getPrototypeOf(DraggableCore)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
- dragging: false,
- // Used while dragging to determine deltas.
- lastX: NaN, lastY: NaN,
- touchIdentifier: null
- }, _this.handleDragStart = function (e) {
- // Make it possible to attach event handlers on top of this one.
- _this.props.onMouseDown(e);
-
- // Only accept left-clicks.
- if (!_this.props.allowAnyClick && typeof e.button === 'number' && e.button !== 0) return false;
-
- // Get nodes. Be sure to grab relative document (could be iframed)
- var thisNode = ReactDOM.findDOMNode(_this);
- if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
- throw new Error(' not mounted on DragStart!');
- }
- var ownerDocument = thisNode.ownerDocument;
-
- // Short circuit if handle or cancel prop was provided and selector doesn't match.
-
- if (_this.props.disabled || !(e.target instanceof ownerDocument.defaultView.Node) || _this.props.handle && !matchesSelectorAndParentsTo(e.target, _this.props.handle, thisNode) || _this.props.cancel && matchesSelectorAndParentsTo(e.target, _this.props.cancel, thisNode)) {
- return;
- }
-
- // Set touch identifier in component state if this is a touch event. This allows us to
- // distinguish between individual touches on multitouch screens by identifying which
- // touchpoint was set to this element.
- var touchIdentifier = getTouchIdentifier(e);
- _this.setState({ touchIdentifier: touchIdentifier });
-
- // Get the current drag point from the event. This is used as the offset.
- var position = getControlPosition(e, touchIdentifier, _this);
- if (position == null) return; // not possible but satisfies flow
- var x = position.x,
- y = position.y;
-
- // Create an event object with all the data parents need to make a decision here.
-
- var coreEvent = createCoreData(_this, x, y);
-
- // Call event handler. If it returns explicit false, cancel.
- log('calling', _this.props.onStart);
- var shouldUpdate = _this.props.onStart(e, coreEvent);
- if (shouldUpdate === false) return;
-
- // Add a style to the body to disable user-select. This prevents text from
- // being selected all over the page.
- if (_this.props.enableUserSelectHack) addUserSelectStyles(ownerDocument);
-
- // Initiate dragging. Set the current x and y as offsets
- // so we know how much we've moved during the drag. This allows us
- // to drag elements around even if they have been moved, without issue.
- _this.setState({
- dragging: true,
-
- lastX: x,
- lastY: y
- });
-
- // Add events to the document directly so we catch when the user's mouse/touch moves outside of
- // this element. We use different events depending on whether or not we have detected that this
- // is a touch-capable device.
- addEvent(ownerDocument, dragEventFor.move, _this.handleDrag);
- addEvent(ownerDocument, dragEventFor.stop, _this.handleDragStop);
- }, _this.handleDrag = function (e) {
-
- // Prevent scrolling on mobile devices, like ipad/iphone.
- if (e.type === 'touchmove') e.preventDefault();
-
- // Get the current drag point from the event. This is used as the offset.
- var position = getControlPosition(e, _this.state.touchIdentifier, _this);
- if (position == null) return;
- var x = position.x,
- y = position.y;
-
- // Snap to grid if prop has been provided
-
- if (Array.isArray(_this.props.grid)) {
- var _deltaX = x - _this.state.lastX,
- _deltaY = y - _this.state.lastY;
-
- var _snapToGrid = snapToGrid(_this.props.grid, _deltaX, _deltaY);
-
- var _snapToGrid2 = slicedToArray(_snapToGrid, 2);
-
- _deltaX = _snapToGrid2[0];
- _deltaY = _snapToGrid2[1];
-
- if (!_deltaX && !_deltaY) return; // skip useless drag
- x = _this.state.lastX + _deltaX, y = _this.state.lastY + _deltaY;
- }
-
- var coreEvent = createCoreData(_this, x, y);
-
- // Call event handler. If it returns explicit false, trigger end.
- var shouldUpdate = _this.props.onDrag(e, coreEvent);
- if (shouldUpdate === false) {
- try {
- // $FlowIgnore
- _this.handleDragStop(new MouseEvent('mouseup'));
- } catch (err) {
- // Old browsers
- var event = ((document.createEvent('MouseEvents') /*: any*/) /*: MouseTouchEvent*/);
- // I see why this insanity was deprecated
- // $FlowIgnore
- event.initMouseEvent('mouseup', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
- _this.handleDragStop(event);
- }
- return;
- }
-
- _this.setState({
- lastX: x,
- lastY: y
- });
- }, _this.handleDragStop = function (e) {
- if (!_this.state.dragging) return;
-
- var position = getControlPosition(e, _this.state.touchIdentifier, _this);
- if (position == null) return;
- var x = position.x,
- y = position.y;
-
- var coreEvent = createCoreData(_this, x, y);
-
- var thisNode = ReactDOM.findDOMNode(_this);
- if (thisNode) {
- // Remove user-select hack
- if (_this.props.enableUserSelectHack) removeUserSelectStyles(thisNode.ownerDocument);
- }
-
- // Reset the el.
- _this.setState({
- dragging: false,
- lastX: NaN,
- lastY: NaN
- });
-
- // Call event handler
- _this.props.onStop(e, coreEvent);
-
- if (thisNode) {
- removeEvent(thisNode.ownerDocument, dragEventFor.move, _this.handleDrag);
- removeEvent(thisNode.ownerDocument, dragEventFor.stop, _this.handleDragStop);
- }
- }, _this.onMouseDown = function (e) {
- dragEventFor = eventsFor.mouse; // on touchscreen laptops we could switch back to mouse
-
- return _this.handleDragStart(e);
- }, _this.onMouseUp = function (e) {
- dragEventFor = eventsFor.mouse;
-
- return _this.handleDragStop(e);
- }, _this.onTouchStart = function (e) {
- // We're on a touch device now, so change the event handlers
- dragEventFor = eventsFor.touch;
-
- return _this.handleDragStart(e);
- }, _this.onTouchEnd = function (e) {
- // We're on a touch device now, so change the event handlers
- dragEventFor = eventsFor.touch;
-
- return _this.handleDragStop(e);
- }, _temp), possibleConstructorReturn(_this, _ret);
- }
-
- createClass(DraggableCore, [{
- key: 'componentWillUnmount',
- value: function componentWillUnmount() {
- // Remove any leftover event handlers. Remove both touch and mouse handlers in case
- // some browser quirk caused a touch event to fire during a mouse move, or vice versa.
- var thisNode = ReactDOM.findDOMNode(this);
- if (thisNode) {
- var ownerDocument = thisNode.ownerDocument;
-
- removeEvent(ownerDocument, eventsFor.mouse.move, this.handleDrag);
- removeEvent(ownerDocument, eventsFor.touch.move, this.handleDrag);
- removeEvent(ownerDocument, eventsFor.mouse.stop, this.handleDragStop);
- removeEvent(ownerDocument, eventsFor.touch.stop, this.handleDragStop);
- if (this.props.enableUserSelectHack) removeUserSelectStyles(ownerDocument);
- }
- }
-
- // Same as onMouseDown (start drag), but now consider this a touch device.
-
- }, {
- key: 'render',
- value: function render() {
- // Reuse the child provided
- // This makes it flexible to use whatever element is wanted (div, ul, etc)
- return React.cloneElement(React.Children.only(this.props.children), {
- style: styleHacks(this.props.children.props.style),
-
- // Note: mouseMove handler is attached to document so it will still function
- // when the user drags quickly and leaves the bounds of the element.
- onMouseDown: this.onMouseDown,
- onTouchStart: this.onTouchStart,
- onMouseUp: this.onMouseUp,
- onTouchEnd: this.onTouchEnd
- });
- }
- }]);
- return DraggableCore;
- }(React.Component);
-
- DraggableCore.displayName = 'DraggableCore';
- DraggableCore.propTypes = {
- /**
- * `allowAnyClick` allows dragging using any mouse button.
- * By default, we only accept the left button.
- *
- * Defaults to `false`.
- */
- allowAnyClick: propTypes.bool,
-
- /**
- * `disabled`, if true, stops the from dragging. All handlers,
- * with the exception of `onMouseDown`, will not fire.
- */
- disabled: propTypes.bool,
-
- /**
- * By default, we add 'user-select:none' attributes to the document body
- * to prevent ugly text selection during drag. If this is causing problems
- * for your app, set this to `false`.
- */
- enableUserSelectHack: propTypes.bool,
-
- /**
- * `offsetParent`, if set, uses the passed DOM node to compute drag offsets
- * instead of using the parent node.
- */
- offsetParent: function offsetParent(props /*: DraggableCoreProps*/, propName /*: $Keys*/) {
- if (props[propName] && props[propName].nodeType !== 1) {
- throw new Error('Draggable\'s offsetParent must be a DOM Node.');
- }
- },
-
- /**
- * `grid` specifies the x and y that dragging should snap to.
- */
- grid: propTypes.arrayOf(propTypes.number),
-
- /**
- * `scale` specifies the scale of the area you are dragging inside of. It allows
- * the drag deltas to scale correctly with how far zoomed in/out you are.
- */
- scale: propTypes.number,
-
- /**
- * `handle` specifies a selector to be used as the handle that initiates drag.
- *
- * Example:
- *
- * ```jsx
- * let App = React.createClass({
- * render: function () {
- * return (
- *
- *
- *
Click me to drag
- *
This is some other content
- *
- *
- * );
- * }
- * });
- * ```
- */
- handle: propTypes.string,
-
- /**
- * `cancel` specifies a selector to be used to prevent drag initialization.
- *
- * Example:
- *
- * ```jsx
- * let App = React.createClass({
- * render: function () {
- * return(
- *
- *
- *
You can't drag from here
- *
Dragging here works fine
- *
- *
- * );
- * }
- * });
- * ```
- */
- cancel: propTypes.string,
-
- /**
- * Called when dragging starts.
- * If this function returns the boolean false, dragging will be canceled.
- */
- onStart: propTypes.func,
-
- /**
- * Called while dragging.
- * If this function returns the boolean false, dragging will be canceled.
- */
- onDrag: propTypes.func,
-
- /**
- * Called when dragging stops.
- * If this function returns the boolean false, the drag will remain active.
- */
- onStop: propTypes.func,
-
- /**
- * A workaround option which can be passed if onMouseDown needs to be accessed,
- * since it'll always be blocked (as there is internal use of onMouseDown)
- */
- onMouseDown: propTypes.func,
-
- /**
- * These properties should be defined on the child, not here.
- */
- className: dontSetMe,
- style: dontSetMe,
- transform: dontSetMe
- };
- DraggableCore.defaultProps = {
- allowAnyClick: false, // by default only accept left click
- cancel: null,
- disabled: false,
- enableUserSelectHack: true,
- offsetParent: null,
- handle: null,
- grid: null,
- transform: null,
- onStart: function onStart() {},
- onDrag: function onDrag() {},
- onStop: function onStop() {},
- onMouseDown: function onMouseDown() {}
- };
-
- /*:: import type {DraggableEventHandler} from './utils/types';*/
- /*:: import type {Element as ReactElement} from 'react';*/
- /*:: type DraggableState = {
- dragging: boolean,
- dragged: boolean,
- x: number, y: number,
- slackX: number, slackY: number,
- isElementSVG: boolean
- };*/
-
-
- //
- // Define
- //
-
- /*:: export type DraggableProps = {
- ...$Exact,
- axis: 'both' | 'x' | 'y' | 'none',
- bounds: DraggableBounds | string | false,
- defaultClassName: string,
- defaultClassNameDragging: string,
- defaultClassNameDragged: string,
- defaultPosition: ControlPosition,
- positionOffset: PositionOffsetControlPosition,
- position: ControlPosition,
- scale: number
- };*/
-
- var Draggable = function (_React$Component) {
- inherits(Draggable, _React$Component);
-
- function Draggable(props /*: DraggableProps*/) {
- classCallCheck(this, Draggable);
-
- var _this = possibleConstructorReturn(this, (Draggable.__proto__ || Object.getPrototypeOf(Draggable)).call(this, props));
-
- _this.onDragStart = function (e, coreData) {
-
- // Short-circuit if user's callback killed it.
- var shouldStart = _this.props.onStart(e, createDraggableData(_this, coreData));
- // Kills start event on core as well, so move handlers are never bound.
- if (shouldStart === false) return false;
-
- _this.setState({ dragging: true, dragged: true });
- };
-
- _this.onDrag = function (e, coreData) {
- if (!_this.state.dragging) return false;
-
- var uiData = createDraggableData(_this, coreData);
-
- var newState /*: $Shape*/ = {
- x: uiData.x,
- y: uiData.y
- };
-
- // Keep within bounds.
- if (_this.props.bounds) {
- // Save original x and y.
- var _x = newState.x,
- _y = newState.y;
-
- // Add slack to the values used to calculate bound position. This will ensure that if
- // we start removing slack, the element won't react to it right away until it's been
- // completely removed.
-
- newState.x += _this.state.slackX;
- newState.y += _this.state.slackY;
-
- // Get bound position. This will ceil/floor the x and y within the boundaries.
-
- var _getBoundPosition = getBoundPosition(_this, newState.x, newState.y),
- _getBoundPosition2 = slicedToArray(_getBoundPosition, 2),
- newStateX = _getBoundPosition2[0],
- newStateY = _getBoundPosition2[1];
-
- newState.x = newStateX;
- newState.y = newStateY;
-
- // Recalculate slack by noting how much was shaved by the boundPosition handler.
- newState.slackX = _this.state.slackX + (_x - newState.x);
- newState.slackY = _this.state.slackY + (_y - newState.y);
-
- // Update the event we fire to reflect what really happened after bounds took effect.
- uiData.x = newState.x;
- uiData.y = newState.y;
- uiData.deltaX = newState.x - _this.state.x;
- uiData.deltaY = newState.y - _this.state.y;
- }
-
- // Short-circuit if user's callback killed it.
- var shouldUpdate = _this.props.onDrag(e, uiData);
- if (shouldUpdate === false) return false;
-
- _this.setState(newState);
- };
-
- _this.onDragStop = function (e, coreData) {
- if (!_this.state.dragging) return false;
-
- // Short-circuit if user's callback killed it.
- var shouldStop = _this.props.onStop(e, createDraggableData(_this, coreData));
- if (shouldStop === false) return false;
-
- var newState /*: $Shape*/ = {
- dragging: false,
- slackX: 0,
- slackY: 0
- };
-
- // If this is a controlled component, the result of this operation will be to
- // revert back to the old position. We expect a handler on `onDragStop`, at the least.
- var controlled = Boolean(_this.props.position);
- if (controlled) {
- var _this$props$position = _this.props.position,
- _x2 = _this$props$position.x,
- _y2 = _this$props$position.y;
-
- newState.x = _x2;
- newState.y = _y2;
- }
-
- _this.setState(newState);
- };
-
- _this.state = {
- // Whether or not we are currently dragging.
- dragging: false,
-
- // Whether or not we have been dragged before.
- dragged: false,
-
- // Current transform x and y.
- x: props.position ? props.position.x : props.defaultPosition.x,
- y: props.position ? props.position.y : props.defaultPosition.y,
-
- // Used for compensating for out-of-bounds drags
- slackX: 0, slackY: 0,
-
- // Can only determine if SVG after mounting
- isElementSVG: false
- };
- return _this;
- }
-
- createClass(Draggable, [{
- key: 'componentWillMount',
- value: function componentWillMount() {
- if (this.props.position && !(this.props.onDrag || this.props.onStop)) {
- // eslint-disable-next-line
- console.warn('A `position` was applied to this , without drag handlers. This will make this ' + 'component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the ' + '`position` of this element.');
- }
- }
- }, {
- key: 'componentDidMount',
- value: function componentDidMount() {
- // Check to see if the element passed is an instanceof SVGElement
- if (typeof window.SVGElement !== 'undefined' && ReactDOM.findDOMNode(this) instanceof window.SVGElement) {
- this.setState({ isElementSVG: true });
- }
- }
- }, {
- key: 'componentWillReceiveProps',
- value: function componentWillReceiveProps(nextProps /*: Object*/) {
- // Set x/y if position has changed
- if (nextProps.position && (!this.props.position || nextProps.position.x !== this.props.position.x || nextProps.position.y !== this.props.position.y)) {
- this.setState({ x: nextProps.position.x, y: nextProps.position.y });
- }
- }
- }, {
- key: 'componentWillUnmount',
- value: function componentWillUnmount() {
- this.setState({ dragging: false }); // prevents invariant if unmounted while dragging
- }
- }, {
- key: 'render',
- value: function render() /*: ReactElement*/ {
- var _classNames;
-
- var style = {},
- svgTransform = null;
-
- // If this is controlled, we don't want to move it - unless it's dragging.
- var controlled = Boolean(this.props.position);
- var draggable = !controlled || this.state.dragging;
-
- var position = this.props.position || this.props.defaultPosition;
- var transformOpts = {
- // Set left if horizontal drag is enabled
- x: canDragX(this) && draggable ? this.state.x : position.x,
-
- // Set top if vertical drag is enabled
- y: canDragY(this) && draggable ? this.state.y : position.y
- };
-
- // If this element was SVG, we use the `transform` attribute.
- if (this.state.isElementSVG) {
- svgTransform = createSVGTransform(transformOpts, this.props.positionOffset);
- } else {
- // Add a CSS transform to move the element around. This allows us to move the element around
- // without worrying about whether or not it is relatively or absolutely positioned.
- // If the item you are dragging already has a transform set, wrap it in a so
- // has a clean slate.
- style = createCSSTransform(transformOpts, this.props.positionOffset);
- }
-
- var _props = this.props,
- defaultClassName = _props.defaultClassName,
- defaultClassNameDragging = _props.defaultClassNameDragging,
- defaultClassNameDragged = _props.defaultClassNameDragged;
-
-
- var children = React.Children.only(this.props.children);
-
- // Mark with class while dragging
- var className = classnames(children.props.className || '', defaultClassName, (_classNames = {}, defineProperty(_classNames, defaultClassNameDragging, this.state.dragging), defineProperty(_classNames, defaultClassNameDragged, this.state.dragged), _classNames));
-
- // Reuse the child provided
- // This makes it flexible to use whatever element is wanted (div, ul, etc)
- return React.createElement(
- DraggableCore,
- _extends({}, this.props, { onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop }),
- React.cloneElement(children, {
- className: className,
- style: _extends({}, children.props.style, style),
- transform: svgTransform
- })
- );
- }
- }]);
- return Draggable;
- }(React.Component);
-
- Draggable.displayName = 'Draggable';
- Draggable.propTypes = _extends({}, DraggableCore.propTypes, {
-
- /**
- * `axis` determines which axis the draggable can move.
- *
- * Note that all callbacks will still return data as normal. This only
- * controls flushing to the DOM.
- *
- * 'both' allows movement horizontally and vertically.
- * 'x' limits movement to horizontal axis.
- * 'y' limits movement to vertical axis.
- * 'none' limits all movement.
- *
- * Defaults to 'both'.
- */
- axis: propTypes.oneOf(['both', 'x', 'y', 'none']),
-
- /**
- * `bounds` determines the range of movement available to the element.
- * Available values are:
- *
- * 'parent' restricts movement within the Draggable's parent node.
- *
- * Alternatively, pass an object with the following properties, all of which are optional:
- *
- * {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND}
- *
- * All values are in px.
- *
- * Example:
- *
- * ```jsx
- * let App = React.createClass({
- * render: function () {
- * return (
- *
- * Content
- *
- * );
- * }
- * });
- * ```
- */
- bounds: propTypes.oneOfType([propTypes.shape({
- left: propTypes.number,
- right: propTypes.number,
- top: propTypes.number,
- bottom: propTypes.number
- }), propTypes.string, propTypes.oneOf([false])]),
-
- defaultClassName: propTypes.string,
- defaultClassNameDragging: propTypes.string,
- defaultClassNameDragged: propTypes.string,
-
- /**
- * `defaultPosition` specifies the x and y that the dragged item should start at
- *
- * Example:
- *
- * ```jsx
- * let App = React.createClass({
- * render: function () {
- * return (
- *
- * I start with transformX: 25px and transformY: 25px;
- *
- * );
- * }
- * });
- * ```
- */
- defaultPosition: propTypes.shape({
- x: propTypes.number,
- y: propTypes.number
- }),
- positionOffset: propTypes.shape({
- x: propTypes.oneOfType([propTypes.number, propTypes.string]),
- y: propTypes.oneOfType([propTypes.number, propTypes.string])
- }),
-
- /**
- * `position`, if present, defines the current position of the element.
- *
- * This is similar to how form elements in React work - if no `position` is supplied, the component
- * is uncontrolled.
- *
- * Example:
- *
- * ```jsx
- * let App = React.createClass({
- * render: function () {
- * return (
- *
- * I start with transformX: 25px and transformY: 25px;
- *
- * );
- * }
- * });
- * ```
- */
- position: propTypes.shape({
- x: propTypes.number,
- y: propTypes.number
- }),
-
- /**
- * These properties should be defined on the child, not here.
- */
- className: dontSetMe,
- style: dontSetMe,
- transform: dontSetMe
- });
- Draggable.defaultProps = _extends({}, DraggableCore.defaultProps, {
- axis: 'both',
- bounds: false,
- defaultClassName: 'react-draggable',
- defaultClassNameDragging: 'react-draggable-dragging',
- defaultClassNameDragged: 'react-draggable-dragged',
- defaultPosition: { x: 0, y: 0 },
- position: null,
- scale: 1
- });
-
- // Previous versions of this lib exported as the root export. As to not break
- // them, or TypeScript, we export *both* as the root and as 'default'.
- // See https://github.com/mzabriskie/react-draggable/pull/254
- // and https://github.com/mzabriskie/react-draggable/issues/266
- Draggable.default = Draggable;
- Draggable.DraggableCore = DraggableCore;
-
- return Draggable;
-
- })));
- //# sourceMappingURL=react-draggable.js.map
-
-
-/***/ }),
-/* 251 */
-/***/ (function(module, exports, __webpack_require__) {
-
- /* WEBPACK VAR INJECTION */(function(global, module) {/**
- * Lodash (Custom Build)
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright JS Foundation and other contributors
- * Released under MIT license
- * Based on Underscore.js 1.8.3
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-
- /** Used as the size to enable large array optimizations. */
- var LARGE_ARRAY_SIZE = 200;
-
- /** Used to stand-in for `undefined` hash values. */
- var HASH_UNDEFINED = '__lodash_hash_undefined__';
-
- /** Used to compose bitmasks for value comparisons. */
- var COMPARE_PARTIAL_FLAG = 1,
- COMPARE_UNORDERED_FLAG = 2;
-
- /** Used as references for various `Number` constants. */
- var MAX_SAFE_INTEGER = 9007199254740991;
-
- /** `Object#toString` result references. */
- var argsTag = '[object Arguments]',
- arrayTag = '[object Array]',
- asyncTag = '[object AsyncFunction]',
- boolTag = '[object Boolean]',
- dateTag = '[object Date]',
- errorTag = '[object Error]',
- funcTag = '[object Function]',
- genTag = '[object GeneratorFunction]',
- mapTag = '[object Map]',
- numberTag = '[object Number]',
- nullTag = '[object Null]',
- objectTag = '[object Object]',
- promiseTag = '[object Promise]',
- proxyTag = '[object Proxy]',
- regexpTag = '[object RegExp]',
- setTag = '[object Set]',
- stringTag = '[object String]',
- symbolTag = '[object Symbol]',
- undefinedTag = '[object Undefined]',
- weakMapTag = '[object WeakMap]';
-
- var arrayBufferTag = '[object ArrayBuffer]',
- dataViewTag = '[object DataView]',
- float32Tag = '[object Float32Array]',
- float64Tag = '[object Float64Array]',
- int8Tag = '[object Int8Array]',
- int16Tag = '[object Int16Array]',
- int32Tag = '[object Int32Array]',
- uint8Tag = '[object Uint8Array]',
- uint8ClampedTag = '[object Uint8ClampedArray]',
- uint16Tag = '[object Uint16Array]',
- uint32Tag = '[object Uint32Array]';
-
- /**
- * Used to match `RegExp`
- * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
- */
- var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
-
- /** Used to detect host constructors (Safari). */
- var reIsHostCtor = /^\[object .+?Constructor\]$/;
-
- /** Used to detect unsigned integer values. */
- var reIsUint = /^(?:0|[1-9]\d*)$/;
-
- /** Used to identify `toStringTag` values of typed arrays. */
- var typedArrayTags = {};
- typedArrayTags[float32Tag] = typedArrayTags[float64Tag] =
- typedArrayTags[int8Tag] = typedArrayTags[int16Tag] =
- typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] =
- typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] =
- typedArrayTags[uint32Tag] = true;
- typedArrayTags[argsTag] = typedArrayTags[arrayTag] =
- typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] =
- typedArrayTags[dataViewTag] = typedArrayTags[dateTag] =
- typedArrayTags[errorTag] = typedArrayTags[funcTag] =
- typedArrayTags[mapTag] = typedArrayTags[numberTag] =
- typedArrayTags[objectTag] = typedArrayTags[regexpTag] =
- typedArrayTags[setTag] = typedArrayTags[stringTag] =
- typedArrayTags[weakMapTag] = false;
-
- /** Detect free variable `global` from Node.js. */
- var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
-
- /** Detect free variable `self`. */
- var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
- /** Used as a reference to the global object. */
- var root = freeGlobal || freeSelf || Function('return this')();
-
- /** Detect free variable `exports`. */
- var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;
-
- /** Detect free variable `module`. */
- var freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;
-
- /** Detect the popular CommonJS extension `module.exports`. */
- var moduleExports = freeModule && freeModule.exports === freeExports;
-
- /** Detect free variable `process` from Node.js. */
- var freeProcess = moduleExports && freeGlobal.process;
-
- /** Used to access faster Node.js helpers. */
- var nodeUtil = (function() {
- try {
- return freeProcess && freeProcess.binding && freeProcess.binding('util');
- } catch (e) {}
- }());
-
- /* Node.js helper references. */
- var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
-
- /**
- * A specialized version of `_.filter` for arrays without support for
- * iteratee shorthands.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} predicate The function invoked per iteration.
- * @returns {Array} Returns the new filtered array.
- */
- function arrayFilter(array, predicate) {
- var index = -1,
- length = array == null ? 0 : array.length,
- resIndex = 0,
- result = [];
-
- while (++index < length) {
- var value = array[index];
- if (predicate(value, index, array)) {
- result[resIndex++] = value;
- }
- }
- return result;
- }
-
- /**
- * Appends the elements of `values` to `array`.
- *
- * @private
- * @param {Array} array The array to modify.
- * @param {Array} values The values to append.
- * @returns {Array} Returns `array`.
- */
- function arrayPush(array, values) {
- var index = -1,
- length = values.length,
- offset = array.length;
-
- while (++index < length) {
- array[offset + index] = values[index];
- }
- return array;
- }
-
- /**
- * A specialized version of `_.some` for arrays without support for iteratee
- * shorthands.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} predicate The function invoked per iteration.
- * @returns {boolean} Returns `true` if any element passes the predicate check,
- * else `false`.
- */
- function arraySome(array, predicate) {
- var index = -1,
- length = array == null ? 0 : array.length;
-
- while (++index < length) {
- if (predicate(array[index], index, array)) {
- return true;
- }
- }
- return false;
- }
-
- /**
- * The base implementation of `_.times` without support for iteratee shorthands
- * or max array length checks.
- *
- * @private
- * @param {number} n The number of times to invoke `iteratee`.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns the array of results.
- */
- function baseTimes(n, iteratee) {
- var index = -1,
- result = Array(n);
-
- while (++index < n) {
- result[index] = iteratee(index);
- }
- return result;
- }
-
- /**
- * The base implementation of `_.unary` without support for storing metadata.
- *
- * @private
- * @param {Function} func The function to cap arguments for.
- * @returns {Function} Returns the new capped function.
- */
- function baseUnary(func) {
- return function(value) {
- return func(value);
- };
- }
-
- /**
- * Checks if a `cache` value for `key` exists.
- *
- * @private
- * @param {Object} cache The cache to query.
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
- function cacheHas(cache, key) {
- return cache.has(key);
- }
-
- /**
- * Gets the value at `key` of `object`.
- *
- * @private
- * @param {Object} [object] The object to query.
- * @param {string} key The key of the property to get.
- * @returns {*} Returns the property value.
- */
- function getValue(object, key) {
- return object == null ? undefined : object[key];
- }
-
- /**
- * Converts `map` to its key-value pairs.
- *
- * @private
- * @param {Object} map The map to convert.
- * @returns {Array} Returns the key-value pairs.
- */
- function mapToArray(map) {
- var index = -1,
- result = Array(map.size);
-
- map.forEach(function(value, key) {
- result[++index] = [key, value];
- });
- return result;
- }
-
- /**
- * Creates a unary function that invokes `func` with its argument transformed.
- *
- * @private
- * @param {Function} func The function to wrap.
- * @param {Function} transform The argument transform.
- * @returns {Function} Returns the new function.
- */
- function overArg(func, transform) {
- return function(arg) {
- return func(transform(arg));
- };
- }
-
- /**
- * Converts `set` to an array of its values.
- *
- * @private
- * @param {Object} set The set to convert.
- * @returns {Array} Returns the values.
- */
- function setToArray(set) {
- var index = -1,
- result = Array(set.size);
-
- set.forEach(function(value) {
- result[++index] = value;
- });
- return result;
- }
-
- /** Used for built-in method references. */
- var arrayProto = Array.prototype,
- funcProto = Function.prototype,
- objectProto = Object.prototype;
-
- /** Used to detect overreaching core-js shims. */
- var coreJsData = root['__core-js_shared__'];
-
- /** Used to resolve the decompiled source of functions. */
- var funcToString = funcProto.toString;
-
- /** Used to check objects for own properties. */
- var hasOwnProperty = objectProto.hasOwnProperty;
-
- /** Used to detect methods masquerading as native. */
- var maskSrcKey = (function() {
- var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
- return uid ? ('Symbol(src)_1.' + uid) : '';
- }());
-
- /**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
- var nativeObjectToString = objectProto.toString;
-
- /** Used to detect if a method is native. */
- var reIsNative = RegExp('^' +
- funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&')
- .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
- );
-
- /** Built-in value references. */
- var Buffer = moduleExports ? root.Buffer : undefined,
- Symbol = root.Symbol,
- Uint8Array = root.Uint8Array,
- propertyIsEnumerable = objectProto.propertyIsEnumerable,
- splice = arrayProto.splice,
- symToStringTag = Symbol ? Symbol.toStringTag : undefined;
-
- /* Built-in method references for those with the same name as other `lodash` methods. */
- var nativeGetSymbols = Object.getOwnPropertySymbols,
- nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined,
- nativeKeys = overArg(Object.keys, Object);
-
- /* Built-in method references that are verified to be native. */
- var DataView = getNative(root, 'DataView'),
- Map = getNative(root, 'Map'),
- Promise = getNative(root, 'Promise'),
- Set = getNative(root, 'Set'),
- WeakMap = getNative(root, 'WeakMap'),
- nativeCreate = getNative(Object, 'create');
-
- /** Used to detect maps, sets, and weakmaps. */
- var dataViewCtorString = toSource(DataView),
- mapCtorString = toSource(Map),
- promiseCtorString = toSource(Promise),
- setCtorString = toSource(Set),
- weakMapCtorString = toSource(WeakMap);
-
- /** Used to convert symbols to primitives and strings. */
- var symbolProto = Symbol ? Symbol.prototype : undefined,
- symbolValueOf = symbolProto ? symbolProto.valueOf : undefined;
-
- /**
- * Creates a hash object.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
- function Hash(entries) {
- var index = -1,
- length = entries == null ? 0 : entries.length;
-
- this.clear();
- while (++index < length) {
- var entry = entries[index];
- this.set(entry[0], entry[1]);
- }
- }
-
- /**
- * Removes all key-value entries from the hash.
- *
- * @private
- * @name clear
- * @memberOf Hash
- */
- function hashClear() {
- this.__data__ = nativeCreate ? nativeCreate(null) : {};
- this.size = 0;
- }
-
- /**
- * Removes `key` and its value from the hash.
- *
- * @private
- * @name delete
- * @memberOf Hash
- * @param {Object} hash The hash to modify.
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
- function hashDelete(key) {
- var result = this.has(key) && delete this.__data__[key];
- this.size -= result ? 1 : 0;
- return result;
- }
-
- /**
- * Gets the hash value for `key`.
- *
- * @private
- * @name get
- * @memberOf Hash
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
- function hashGet(key) {
- var data = this.__data__;
- if (nativeCreate) {
- var result = data[key];
- return result === HASH_UNDEFINED ? undefined : result;
- }
- return hasOwnProperty.call(data, key) ? data[key] : undefined;
- }
-
- /**
- * Checks if a hash value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf Hash
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
- function hashHas(key) {
- var data = this.__data__;
- return nativeCreate ? (data[key] !== undefined) : hasOwnProperty.call(data, key);
- }
-
- /**
- * Sets the hash `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf Hash
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the hash instance.
- */
- function hashSet(key, value) {
- var data = this.__data__;
- this.size += this.has(key) ? 0 : 1;
- data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value;
- return this;
- }
-
- // Add methods to `Hash`.
- Hash.prototype.clear = hashClear;
- Hash.prototype['delete'] = hashDelete;
- Hash.prototype.get = hashGet;
- Hash.prototype.has = hashHas;
- Hash.prototype.set = hashSet;
-
- /**
- * Creates an list cache object.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
- function ListCache(entries) {
- var index = -1,
- length = entries == null ? 0 : entries.length;
-
- this.clear();
- while (++index < length) {
- var entry = entries[index];
- this.set(entry[0], entry[1]);
- }
- }
-
- /**
- * Removes all key-value entries from the list cache.
- *
- * @private
- * @name clear
- * @memberOf ListCache
- */
- function listCacheClear() {
- this.__data__ = [];
- this.size = 0;
- }
-
- /**
- * Removes `key` and its value from the list cache.
- *
- * @private
- * @name delete
- * @memberOf ListCache
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
- function listCacheDelete(key) {
- var data = this.__data__,
- index = assocIndexOf(data, key);
-
- if (index < 0) {
- return false;
- }
- var lastIndex = data.length - 1;
- if (index == lastIndex) {
- data.pop();
- } else {
- splice.call(data, index, 1);
- }
- --this.size;
- return true;
- }
-
- /**
- * Gets the list cache value for `key`.
- *
- * @private
- * @name get
- * @memberOf ListCache
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
- function listCacheGet(key) {
- var data = this.__data__,
- index = assocIndexOf(data, key);
-
- return index < 0 ? undefined : data[index][1];
- }
-
- /**
- * Checks if a list cache value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf ListCache
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
- function listCacheHas(key) {
- return assocIndexOf(this.__data__, key) > -1;
- }
-
- /**
- * Sets the list cache `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf ListCache
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the list cache instance.
- */
- function listCacheSet(key, value) {
- var data = this.__data__,
- index = assocIndexOf(data, key);
-
- if (index < 0) {
- ++this.size;
- data.push([key, value]);
- } else {
- data[index][1] = value;
- }
- return this;
- }
-
- // Add methods to `ListCache`.
- ListCache.prototype.clear = listCacheClear;
- ListCache.prototype['delete'] = listCacheDelete;
- ListCache.prototype.get = listCacheGet;
- ListCache.prototype.has = listCacheHas;
- ListCache.prototype.set = listCacheSet;
-
- /**
- * Creates a map cache object to store key-value pairs.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
- function MapCache(entries) {
- var index = -1,
- length = entries == null ? 0 : entries.length;
-
- this.clear();
- while (++index < length) {
- var entry = entries[index];
- this.set(entry[0], entry[1]);
- }
- }
-
- /**
- * Removes all key-value entries from the map.
- *
- * @private
- * @name clear
- * @memberOf MapCache
- */
- function mapCacheClear() {
- this.size = 0;
- this.__data__ = {
- 'hash': new Hash,
- 'map': new (Map || ListCache),
- 'string': new Hash
- };
- }
-
- /**
- * Removes `key` and its value from the map.
- *
- * @private
- * @name delete
- * @memberOf MapCache
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
- function mapCacheDelete(key) {
- var result = getMapData(this, key)['delete'](key);
- this.size -= result ? 1 : 0;
- return result;
- }
-
- /**
- * Gets the map value for `key`.
- *
- * @private
- * @name get
- * @memberOf MapCache
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
- function mapCacheGet(key) {
- return getMapData(this, key).get(key);
- }
-
- /**
- * Checks if a map value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf MapCache
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
- function mapCacheHas(key) {
- return getMapData(this, key).has(key);
- }
-
- /**
- * Sets the map `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf MapCache
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the map cache instance.
- */
- function mapCacheSet(key, value) {
- var data = getMapData(this, key),
- size = data.size;
-
- data.set(key, value);
- this.size += data.size == size ? 0 : 1;
- return this;
- }
-
- // Add methods to `MapCache`.
- MapCache.prototype.clear = mapCacheClear;
- MapCache.prototype['delete'] = mapCacheDelete;
- MapCache.prototype.get = mapCacheGet;
- MapCache.prototype.has = mapCacheHas;
- MapCache.prototype.set = mapCacheSet;
-
- /**
- *
- * Creates an array cache object to store unique values.
- *
- * @private
- * @constructor
- * @param {Array} [values] The values to cache.
- */
- function SetCache(values) {
- var index = -1,
- length = values == null ? 0 : values.length;
-
- this.__data__ = new MapCache;
- while (++index < length) {
- this.add(values[index]);
- }
- }
-
- /**
- * Adds `value` to the array cache.
- *
- * @private
- * @name add
- * @memberOf SetCache
- * @alias push
- * @param {*} value The value to cache.
- * @returns {Object} Returns the cache instance.
- */
- function setCacheAdd(value) {
- this.__data__.set(value, HASH_UNDEFINED);
- return this;
- }
-
- /**
- * Checks if `value` is in the array cache.
- *
- * @private
- * @name has
- * @memberOf SetCache
- * @param {*} value The value to search for.
- * @returns {number} Returns `true` if `value` is found, else `false`.
- */
- function setCacheHas(value) {
- return this.__data__.has(value);
- }
-
- // Add methods to `SetCache`.
- SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;
- SetCache.prototype.has = setCacheHas;
-
- /**
- * Creates a stack cache object to store key-value pairs.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
- function Stack(entries) {
- var data = this.__data__ = new ListCache(entries);
- this.size = data.size;
- }
-
- /**
- * Removes all key-value entries from the stack.
- *
- * @private
- * @name clear
- * @memberOf Stack
- */
- function stackClear() {
- this.__data__ = new ListCache;
- this.size = 0;
- }
-
- /**
- * Removes `key` and its value from the stack.
- *
- * @private
- * @name delete
- * @memberOf Stack
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
- function stackDelete(key) {
- var data = this.__data__,
- result = data['delete'](key);
-
- this.size = data.size;
- return result;
- }
-
- /**
- * Gets the stack value for `key`.
- *
- * @private
- * @name get
- * @memberOf Stack
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
- function stackGet(key) {
- return this.__data__.get(key);
- }
-
- /**
- * Checks if a stack value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf Stack
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
- function stackHas(key) {
- return this.__data__.has(key);
- }
-
- /**
- * Sets the stack `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf Stack
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the stack cache instance.
- */
- function stackSet(key, value) {
- var data = this.__data__;
- if (data instanceof ListCache) {
- var pairs = data.__data__;
- if (!Map || (pairs.length < LARGE_ARRAY_SIZE - 1)) {
- pairs.push([key, value]);
- this.size = ++data.size;
- return this;
- }
- data = this.__data__ = new MapCache(pairs);
- }
- data.set(key, value);
- this.size = data.size;
- return this;
- }
-
- // Add methods to `Stack`.
- Stack.prototype.clear = stackClear;
- Stack.prototype['delete'] = stackDelete;
- Stack.prototype.get = stackGet;
- Stack.prototype.has = stackHas;
- Stack.prototype.set = stackSet;
-
- /**
- * Creates an array of the enumerable property names of the array-like `value`.
- *
- * @private
- * @param {*} value The value to query.
- * @param {boolean} inherited Specify returning inherited property names.
- * @returns {Array} Returns the array of property names.
- */
- function arrayLikeKeys(value, inherited) {
- var isArr = isArray(value),
- isArg = !isArr && isArguments(value),
- isBuff = !isArr && !isArg && isBuffer(value),
- isType = !isArr && !isArg && !isBuff && isTypedArray(value),
- skipIndexes = isArr || isArg || isBuff || isType,
- result = skipIndexes ? baseTimes(value.length, String) : [],
- length = result.length;
-
- for (var key in value) {
- if ((inherited || hasOwnProperty.call(value, key)) &&
- !(skipIndexes && (
- // Safari 9 has enumerable `arguments.length` in strict mode.
- key == 'length' ||
- // Node.js 0.10 has enumerable non-index properties on buffers.
- (isBuff && (key == 'offset' || key == 'parent')) ||
- // PhantomJS 2 has enumerable non-index properties on typed arrays.
- (isType && (key == 'buffer' || key == 'byteLength' || key == 'byteOffset')) ||
- // Skip index properties.
- isIndex(key, length)
- ))) {
- result.push(key);
- }
- }
- return result;
- }
-
- /**
- * Gets the index at which the `key` is found in `array` of key-value pairs.
- *
- * @private
- * @param {Array} array The array to inspect.
- * @param {*} key The key to search for.
- * @returns {number} Returns the index of the matched value, else `-1`.
- */
- function assocIndexOf(array, key) {
- var length = array.length;
- while (length--) {
- if (eq(array[length][0], key)) {
- return length;
- }
- }
- return -1;
- }
-
- /**
- * The base implementation of `getAllKeys` and `getAllKeysIn` which uses
- * `keysFunc` and `symbolsFunc` to get the enumerable property names and
- * symbols of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {Function} keysFunc The function to get the keys of `object`.
- * @param {Function} symbolsFunc The function to get the symbols of `object`.
- * @returns {Array} Returns the array of property names and symbols.
- */
- function baseGetAllKeys(object, keysFunc, symbolsFunc) {
- var result = keysFunc(object);
- return isArray(object) ? result : arrayPush(result, symbolsFunc(object));
- }
-
- /**
- * The base implementation of `getTag` without fallbacks for buggy environments.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
- function baseGetTag(value) {
- if (value == null) {
- return value === undefined ? undefinedTag : nullTag;
- }
- return (symToStringTag && symToStringTag in Object(value))
- ? getRawTag(value)
- : objectToString(value);
- }
-
- /**
- * The base implementation of `_.isArguments`.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an `arguments` object,
- */
- function baseIsArguments(value) {
- return isObjectLike(value) && baseGetTag(value) == argsTag;
- }
-
- /**
- * The base implementation of `_.isEqual` which supports partial comparisons
- * and tracks traversed objects.
- *
- * @private
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @param {boolean} bitmask The bitmask flags.
- * 1 - Unordered comparison
- * 2 - Partial comparison
- * @param {Function} [customizer] The function to customize comparisons.
- * @param {Object} [stack] Tracks traversed `value` and `other` objects.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- */
- function baseIsEqual(value, other, bitmask, customizer, stack) {
- if (value === other) {
- return true;
- }
- if (value == null || other == null || (!isObjectLike(value) && !isObjectLike(other))) {
- return value !== value && other !== other;
- }
- return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual, stack);
- }
-
- /**
- * A specialized version of `baseIsEqual` for arrays and objects which performs
- * deep comparisons and tracks traversed objects enabling objects with circular
- * references to be compared.
- *
- * @private
- * @param {Object} object The object to compare.
- * @param {Object} other The other object to compare.
- * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
- * @param {Function} customizer The function to customize comparisons.
- * @param {Function} equalFunc The function to determine equivalents of values.
- * @param {Object} [stack] Tracks traversed `object` and `other` objects.
- * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
- */
- function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) {
- var objIsArr = isArray(object),
- othIsArr = isArray(other),
- objTag = objIsArr ? arrayTag : getTag(object),
- othTag = othIsArr ? arrayTag : getTag(other);
-
- objTag = objTag == argsTag ? objectTag : objTag;
- othTag = othTag == argsTag ? objectTag : othTag;
-
- var objIsObj = objTag == objectTag,
- othIsObj = othTag == objectTag,
- isSameTag = objTag == othTag;
-
- if (isSameTag && isBuffer(object)) {
- if (!isBuffer(other)) {
- return false;
- }
- objIsArr = true;
- objIsObj = false;
- }
- if (isSameTag && !objIsObj) {
- stack || (stack = new Stack);
- return (objIsArr || isTypedArray(object))
- ? equalArrays(object, other, bitmask, customizer, equalFunc, stack)
- : equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack);
- }
- if (!(bitmask & COMPARE_PARTIAL_FLAG)) {
- var objIsWrapped = objIsObj && hasOwnProperty.call(object, '__wrapped__'),
- othIsWrapped = othIsObj && hasOwnProperty.call(other, '__wrapped__');
-
- if (objIsWrapped || othIsWrapped) {
- var objUnwrapped = objIsWrapped ? object.value() : object,
- othUnwrapped = othIsWrapped ? other.value() : other;
-
- stack || (stack = new Stack);
- return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack);
- }
- }
- if (!isSameTag) {
- return false;
- }
- stack || (stack = new Stack);
- return equalObjects(object, other, bitmask, customizer, equalFunc, stack);
- }
-
- /**
- * The base implementation of `_.isNative` without bad shim checks.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a native function,
- * else `false`.
- */
- function baseIsNative(value) {
- if (!isObject(value) || isMasked(value)) {
- return false;
- }
- var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
- return pattern.test(toSource(value));
- }
-
- /**
- * The base implementation of `_.isTypedArray` without Node.js optimizations.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
- */
- function baseIsTypedArray(value) {
- return isObjectLike(value) &&
- isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
- }
-
- /**
- * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- */
- function baseKeys(object) {
- if (!isPrototype(object)) {
- return nativeKeys(object);
- }
- var result = [];
- for (var key in Object(object)) {
- if (hasOwnProperty.call(object, key) && key != 'constructor') {
- result.push(key);
- }
- }
- return result;
- }
-
- /**
- * A specialized version of `baseIsEqualDeep` for arrays with support for
- * partial deep comparisons.
- *
- * @private
- * @param {Array} array The array to compare.
- * @param {Array} other The other array to compare.
- * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
- * @param {Function} customizer The function to customize comparisons.
- * @param {Function} equalFunc The function to determine equivalents of values.
- * @param {Object} stack Tracks traversed `array` and `other` objects.
- * @returns {boolean} Returns `true` if the arrays are equivalent, else `false`.
- */
- function equalArrays(array, other, bitmask, customizer, equalFunc, stack) {
- var isPartial = bitmask & COMPARE_PARTIAL_FLAG,
- arrLength = array.length,
- othLength = other.length;
-
- if (arrLength != othLength && !(isPartial && othLength > arrLength)) {
- return false;
- }
- // Assume cyclic values are equal.
- var stacked = stack.get(array);
- if (stacked && stack.get(other)) {
- return stacked == other;
- }
- var index = -1,
- result = true,
- seen = (bitmask & COMPARE_UNORDERED_FLAG) ? new SetCache : undefined;
-
- stack.set(array, other);
- stack.set(other, array);
-
- // Ignore non-index properties.
- while (++index < arrLength) {
- var arrValue = array[index],
- othValue = other[index];
-
- if (customizer) {
- var compared = isPartial
- ? customizer(othValue, arrValue, index, other, array, stack)
- : customizer(arrValue, othValue, index, array, other, stack);
- }
- if (compared !== undefined) {
- if (compared) {
- continue;
- }
- result = false;
- break;
- }
- // Recursively compare arrays (susceptible to call stack limits).
- if (seen) {
- if (!arraySome(other, function(othValue, othIndex) {
- if (!cacheHas(seen, othIndex) &&
- (arrValue === othValue || equalFunc(arrValue, othValue, bitmask, customizer, stack))) {
- return seen.push(othIndex);
- }
- })) {
- result = false;
- break;
- }
- } else if (!(
- arrValue === othValue ||
- equalFunc(arrValue, othValue, bitmask, customizer, stack)
- )) {
- result = false;
- break;
- }
- }
- stack['delete'](array);
- stack['delete'](other);
- return result;
- }
-
- /**
- * A specialized version of `baseIsEqualDeep` for comparing objects of
- * the same `toStringTag`.
- *
- * **Note:** This function only supports comparing values with tags of
- * `Boolean`, `Date`, `Error`, `Number`, `RegExp`, or `String`.
- *
- * @private
- * @param {Object} object The object to compare.
- * @param {Object} other The other object to compare.
- * @param {string} tag The `toStringTag` of the objects to compare.
- * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
- * @param {Function} customizer The function to customize comparisons.
- * @param {Function} equalFunc The function to determine equivalents of values.
- * @param {Object} stack Tracks traversed `object` and `other` objects.
- * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
- */
- function equalByTag(object, other, tag, bitmask, customizer, equalFunc, stack) {
- switch (tag) {
- case dataViewTag:
- if ((object.byteLength != other.byteLength) ||
- (object.byteOffset != other.byteOffset)) {
- return false;
- }
- object = object.buffer;
- other = other.buffer;
-
- case arrayBufferTag:
- if ((object.byteLength != other.byteLength) ||
- !equalFunc(new Uint8Array(object), new Uint8Array(other))) {
- return false;
- }
- return true;
-
- case boolTag:
- case dateTag:
- case numberTag:
- // Coerce booleans to `1` or `0` and dates to milliseconds.
- // Invalid dates are coerced to `NaN`.
- return eq(+object, +other);
-
- case errorTag:
- return object.name == other.name && object.message == other.message;
-
- case regexpTag:
- case stringTag:
- // Coerce regexes to strings and treat strings, primitives and objects,
- // as equal. See http://www.ecma-international.org/ecma-262/7.0/#sec-regexp.prototype.tostring
- // for more details.
- return object == (other + '');
-
- case mapTag:
- var convert = mapToArray;
-
- case setTag:
- var isPartial = bitmask & COMPARE_PARTIAL_FLAG;
- convert || (convert = setToArray);
-
- if (object.size != other.size && !isPartial) {
- return false;
- }
- // Assume cyclic values are equal.
- var stacked = stack.get(object);
- if (stacked) {
- return stacked == other;
- }
- bitmask |= COMPARE_UNORDERED_FLAG;
-
- // Recursively compare objects (susceptible to call stack limits).
- stack.set(object, other);
- var result = equalArrays(convert(object), convert(other), bitmask, customizer, equalFunc, stack);
- stack['delete'](object);
- return result;
-
- case symbolTag:
- if (symbolValueOf) {
- return symbolValueOf.call(object) == symbolValueOf.call(other);
- }
- }
- return false;
- }
-
- /**
- * A specialized version of `baseIsEqualDeep` for objects with support for
- * partial deep comparisons.
- *
- * @private
- * @param {Object} object The object to compare.
- * @param {Object} other The other object to compare.
- * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
- * @param {Function} customizer The function to customize comparisons.
- * @param {Function} equalFunc The function to determine equivalents of values.
- * @param {Object} stack Tracks traversed `object` and `other` objects.
- * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
- */
- function equalObjects(object, other, bitmask, customizer, equalFunc, stack) {
- var isPartial = bitmask & COMPARE_PARTIAL_FLAG,
- objProps = getAllKeys(object),
- objLength = objProps.length,
- othProps = getAllKeys(other),
- othLength = othProps.length;
-
- if (objLength != othLength && !isPartial) {
- return false;
- }
- var index = objLength;
- while (index--) {
- var key = objProps[index];
- if (!(isPartial ? key in other : hasOwnProperty.call(other, key))) {
- return false;
- }
- }
- // Assume cyclic values are equal.
- var stacked = stack.get(object);
- if (stacked && stack.get(other)) {
- return stacked == other;
- }
- var result = true;
- stack.set(object, other);
- stack.set(other, object);
-
- var skipCtor = isPartial;
- while (++index < objLength) {
- key = objProps[index];
- var objValue = object[key],
- othValue = other[key];
-
- if (customizer) {
- var compared = isPartial
- ? customizer(othValue, objValue, key, other, object, stack)
- : customizer(objValue, othValue, key, object, other, stack);
- }
- // Recursively compare objects (susceptible to call stack limits).
- if (!(compared === undefined
- ? (objValue === othValue || equalFunc(objValue, othValue, bitmask, customizer, stack))
- : compared
- )) {
- result = false;
- break;
- }
- skipCtor || (skipCtor = key == 'constructor');
- }
- if (result && !skipCtor) {
- var objCtor = object.constructor,
- othCtor = other.constructor;
-
- // Non `Object` object instances with different constructors are not equal.
- if (objCtor != othCtor &&
- ('constructor' in object && 'constructor' in other) &&
- !(typeof objCtor == 'function' && objCtor instanceof objCtor &&
- typeof othCtor == 'function' && othCtor instanceof othCtor)) {
- result = false;
- }
- }
- stack['delete'](object);
- stack['delete'](other);
- return result;
- }
-
- /**
- * Creates an array of own enumerable property names and symbols of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names and symbols.
- */
- function getAllKeys(object) {
- return baseGetAllKeys(object, keys, getSymbols);
- }
-
- /**
- * Gets the data for `map`.
- *
- * @private
- * @param {Object} map The map to query.
- * @param {string} key The reference key.
- * @returns {*} Returns the map data.
- */
- function getMapData(map, key) {
- var data = map.__data__;
- return isKeyable(key)
- ? data[typeof key == 'string' ? 'string' : 'hash']
- : data.map;
- }
-
- /**
- * Gets the native function at `key` of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {string} key The key of the method to get.
- * @returns {*} Returns the function if it's native, else `undefined`.
- */
- function getNative(object, key) {
- var value = getValue(object, key);
- return baseIsNative(value) ? value : undefined;
- }
-
- /**
- * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the raw `toStringTag`.
- */
- function getRawTag(value) {
- var isOwn = hasOwnProperty.call(value, symToStringTag),
- tag = value[symToStringTag];
-
- try {
- value[symToStringTag] = undefined;
- var unmasked = true;
- } catch (e) {}
-
- var result = nativeObjectToString.call(value);
- if (unmasked) {
- if (isOwn) {
- value[symToStringTag] = tag;
- } else {
- delete value[symToStringTag];
- }
- }
- return result;
- }
-
- /**
- * Creates an array of the own enumerable symbols of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of symbols.
- */
- var getSymbols = !nativeGetSymbols ? stubArray : function(object) {
- if (object == null) {
- return [];
- }
- object = Object(object);
- return arrayFilter(nativeGetSymbols(object), function(symbol) {
- return propertyIsEnumerable.call(object, symbol);
- });
- };
-
- /**
- * Gets the `toStringTag` of `value`.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
- var getTag = baseGetTag;
-
- // Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.
- if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) ||
- (Map && getTag(new Map) != mapTag) ||
- (Promise && getTag(Promise.resolve()) != promiseTag) ||
- (Set && getTag(new Set) != setTag) ||
- (WeakMap && getTag(new WeakMap) != weakMapTag)) {
- getTag = function(value) {
- var result = baseGetTag(value),
- Ctor = result == objectTag ? value.constructor : undefined,
- ctorString = Ctor ? toSource(Ctor) : '';
-
- if (ctorString) {
- switch (ctorString) {
- case dataViewCtorString: return dataViewTag;
- case mapCtorString: return mapTag;
- case promiseCtorString: return promiseTag;
- case setCtorString: return setTag;
- case weakMapCtorString: return weakMapTag;
- }
- }
- return result;
- };
- }
-
- /**
- * Checks if `value` is a valid array-like index.
- *
- * @private
- * @param {*} value The value to check.
- * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
- * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
- */
- function isIndex(value, length) {
- length = length == null ? MAX_SAFE_INTEGER : length;
- return !!length &&
- (typeof value == 'number' || reIsUint.test(value)) &&
- (value > -1 && value % 1 == 0 && value < length);
- }
-
- /**
- * Checks if `value` is suitable for use as unique object key.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is suitable, else `false`.
- */
- function isKeyable(value) {
- var type = typeof value;
- return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
- ? (value !== '__proto__')
- : (value === null);
- }
-
- /**
- * Checks if `func` has its source masked.
- *
- * @private
- * @param {Function} func The function to check.
- * @returns {boolean} Returns `true` if `func` is masked, else `false`.
- */
- function isMasked(func) {
- return !!maskSrcKey && (maskSrcKey in func);
- }
-
- /**
- * Checks if `value` is likely a prototype object.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
- */
- function isPrototype(value) {
- var Ctor = value && value.constructor,
- proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto;
-
- return value === proto;
- }
-
- /**
- * Converts `value` to a string using `Object.prototype.toString`.
- *
- * @private
- * @param {*} value The value to convert.
- * @returns {string} Returns the converted string.
- */
- function objectToString(value) {
- return nativeObjectToString.call(value);
- }
-
- /**
- * Converts `func` to its source code.
- *
- * @private
- * @param {Function} func The function to convert.
- * @returns {string} Returns the source code.
- */
- function toSource(func) {
- if (func != null) {
- try {
- return funcToString.call(func);
- } catch (e) {}
- try {
- return (func + '');
- } catch (e) {}
- }
- return '';
- }
-
- /**
- * Performs a
- * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
- * comparison between two values to determine if they are equivalent.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- * @example
- *
- * var object = { 'a': 1 };
- * var other = { 'a': 1 };
- *
- * _.eq(object, object);
- * // => true
- *
- * _.eq(object, other);
- * // => false
- *
- * _.eq('a', 'a');
- * // => true
- *
- * _.eq('a', Object('a'));
- * // => false
- *
- * _.eq(NaN, NaN);
- * // => true
- */
- function eq(value, other) {
- return value === other || (value !== value && other !== other);
- }
-
- /**
- * Checks if `value` is likely an `arguments` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an `arguments` object,
- * else `false`.
- * @example
- *
- * _.isArguments(function() { return arguments; }());
- * // => true
- *
- * _.isArguments([1, 2, 3]);
- * // => false
- */
- var isArguments = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) {
- return isObjectLike(value) && hasOwnProperty.call(value, 'callee') &&
- !propertyIsEnumerable.call(value, 'callee');
- };
-
- /**
- * Checks if `value` is classified as an `Array` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array, else `false`.
- * @example
- *
- * _.isArray([1, 2, 3]);
- * // => true
- *
- * _.isArray(document.body.children);
- * // => false
- *
- * _.isArray('abc');
- * // => false
- *
- * _.isArray(_.noop);
- * // => false
- */
- var isArray = Array.isArray;
-
- /**
- * Checks if `value` is array-like. A value is considered array-like if it's
- * not a function and has a `value.length` that's an integer greater than or
- * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
- * @example
- *
- * _.isArrayLike([1, 2, 3]);
- * // => true
- *
- * _.isArrayLike(document.body.children);
- * // => true
- *
- * _.isArrayLike('abc');
- * // => true
- *
- * _.isArrayLike(_.noop);
- * // => false
- */
- function isArrayLike(value) {
- return value != null && isLength(value.length) && !isFunction(value);
- }
-
- /**
- * Checks if `value` is a buffer.
- *
- * @static
- * @memberOf _
- * @since 4.3.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
- * @example
- *
- * _.isBuffer(new Buffer(2));
- * // => true
- *
- * _.isBuffer(new Uint8Array(2));
- * // => false
- */
- var isBuffer = nativeIsBuffer || stubFalse;
-
- /**
- * Performs a deep comparison between two values to determine if they are
- * equivalent.
- *
- * **Note:** This method supports comparing arrays, array buffers, booleans,
- * date objects, error objects, maps, numbers, `Object` objects, regexes,
- * sets, strings, symbols, and typed arrays. `Object` objects are compared
- * by their own, not inherited, enumerable properties. Functions and DOM
- * nodes are compared by strict equality, i.e. `===`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- * @example
- *
- * var object = { 'a': 1 };
- * var other = { 'a': 1 };
- *
- * _.isEqual(object, other);
- * // => true
- *
- * object === other;
- * // => false
- */
- function isEqual(value, other) {
- return baseIsEqual(value, other);
- }
-
- /**
- * Checks if `value` is classified as a `Function` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a function, else `false`.
- * @example
- *
- * _.isFunction(_);
- * // => true
- *
- * _.isFunction(/abc/);
- * // => false
- */
- function isFunction(value) {
- if (!isObject(value)) {
- return false;
- }
- // The use of `Object#toString` avoids issues with the `typeof` operator
- // in Safari 9 which returns 'object' for typed arrays and other constructors.
- var tag = baseGetTag(value);
- return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
- }
-
- /**
- * Checks if `value` is a valid array-like length.
- *
- * **Note:** This method is loosely based on
- * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
- * @example
- *
- * _.isLength(3);
- * // => true
- *
- * _.isLength(Number.MIN_VALUE);
- * // => false
- *
- * _.isLength(Infinity);
- * // => false
- *
- * _.isLength('3');
- * // => false
- */
- function isLength(value) {
- return typeof value == 'number' &&
- value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
- }
-
- /**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
- function isObject(value) {
- var type = typeof value;
- return value != null && (type == 'object' || type == 'function');
- }
-
- /**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
- function isObjectLike(value) {
- return value != null && typeof value == 'object';
- }
-
- /**
- * Checks if `value` is classified as a typed array.
- *
- * @static
- * @memberOf _
- * @since 3.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
- * @example
- *
- * _.isTypedArray(new Uint8Array);
- * // => true
- *
- * _.isTypedArray([]);
- * // => false
- */
- var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
-
- /**
- * Creates an array of the own enumerable property names of `object`.
- *
- * **Note:** Non-object values are coerced to objects. See the
- * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
- * for more details.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Object
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- * @example
- *
- * function Foo() {
- * this.a = 1;
- * this.b = 2;
- * }
- *
- * Foo.prototype.c = 3;
- *
- * _.keys(new Foo);
- * // => ['a', 'b'] (iteration order is not guaranteed)
- *
- * _.keys('hi');
- * // => ['0', '1']
- */
- function keys(object) {
- return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
- }
-
- /**
- * This method returns a new empty array.
- *
- * @static
- * @memberOf _
- * @since 4.13.0
- * @category Util
- * @returns {Array} Returns the new empty array.
- * @example
- *
- * var arrays = _.times(2, _.stubArray);
- *
- * console.log(arrays);
- * // => [[], []]
- *
- * console.log(arrays[0] === arrays[1]);
- * // => false
- */
- function stubArray() {
- return [];
- }
-
- /**
- * This method returns `false`.
- *
- * @static
- * @memberOf _
- * @since 4.13.0
- * @category Util
- * @returns {boolean} Returns `false`.
- * @example
- *
- * _.times(2, _.stubFalse);
- * // => [false, false]
- */
- function stubFalse() {
- return false;
- }
-
- module.exports = isEqual;
-
- /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(201)(module)))
-
-/***/ }),
-/* 252 */
-/***/ (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 _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 _react = __webpack_require__(1);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _reactDom = __webpack_require__(2);
-
- var _reactDom2 = _interopRequireDefault(_reactDom);
-
- var _reactBeautifulDnd = __webpack_require__(152);
-
- var _util = __webpack_require__(253);
-
- var _classnames = __webpack_require__(5);
-
- var _classnames2 = _interopRequireDefault(_classnames);
-
- var _lodash = __webpack_require__(251);
-
- var _lodash2 = _interopRequireDefault(_lodash);
-
- 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 reorder = function reorder(list, startIndex, endIndex) {
- var result = Array.from(list);
-
- var _result$splice = result.splice(startIndex, 1),
- _result$splice2 = _slicedToArray(_result$splice, 1),
- removed = _result$splice2[0];
-
- result.splice(endIndex, 0, removed);
-
- return result;
- };
-
- var Vertical = function (_Component) {
- _inherits(Vertical, _Component);
-
- function Vertical(props) {
- _classCallCheck(this, Vertical);
-
- var _this = _possibleConstructorReturn(this, _Component.call(this, props));
-
- _this.onDragEnd = function (result) {
- if (!result.destination) {
- return;
- }
- var items = reorder(_this.state.items, result.source.index, result.destination.index);
-
- _this.setState({
- items: items
- });
- _this.props.onStop(result, items);
- };
-
- _this.onDragStart = function (result) {
- _this.props.onStart(result, _this.state.items);
- };
-
- _this.state = {
- items: _this.props.list || []
- };
- return _this;
- }
-
- Vertical.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
- if (!(0, _lodash2["default"])(this.state.items, nextProps.list)) {
- this.setState({
- items: nextProps.list
- });
- }
- };
-
- Vertical.prototype.render = function render() {
- var _this2 = this;
-
- var _props = this.props,
- onStart = _props.onStart,
- onDrag = _props.onDrag,
- onStop = _props.onStop,
- onDragUpdate = _props.onDragUpdate,
- dropClass = _props.dropClass,
- dropOverClass = _props.dropOverClass,
- dragClass = _props.dragClass,
- dragingClass = _props.dragingClass,
- showKey = _props.showKey,
- type = _props.type;
-
-
- return _react2["default"].createElement(
- _reactBeautifulDnd.DragDropContext,
- { onDragEnd: this.onDragEnd, onDragStart: this.onDragStart, onDragUpdate: onDragUpdate },
- _react2["default"].createElement(
- _reactBeautifulDnd.Droppable,
- { droppableId: 'droppable', direction: type },
- function (provided, snapshot) {
- return _react2["default"].createElement(
- 'div',
- {
- ref: provided.innerRef,
- className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDraggingOver).drop))
- },
- _this2.state.items.map(function (item, index) {
- return _react2["default"].createElement(
- _reactBeautifulDnd.Draggable,
- { key: index, draggableId: index, index: index },
- function (provided, snapshot) {
- return _react2["default"].createElement(
- 'div',
- _extends({
- ref: provided.innerRef
- }, provided.draggableProps, provided.dragHandleProps, {
- className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDragging).drag)),
- style: _extends({}, provided.draggableProps.style)
- }),
- showKey ? item[showKey] : item
- );
- }
- );
- }),
- provided.placeholder
- );
- }
- )
- );
- };
-
- return Vertical;
- }(_react.Component);
-
- exports["default"] = Vertical;
- module.exports = exports['default'];
-
-/***/ }),
-/* 253 */
-/***/ (function(module, exports) {
-
- 'use strict';
-
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- var getClass = exports.getClass = function getClass(props, doing) {
- var dropClass = props.dropClass,
- dropOverClass = props.dropOverClass,
- dragClass = props.dragClass,
- dragingClass = props.dragingClass,
- type = props.type;
-
-
- var verticalObj = {
- drop: {}, drag: {}
- };
- verticalObj.drop['u-drop ' + dropClass] = true;
- verticalObj.drop['u-droping ' + dropOverClass] = doing;
- verticalObj.drag['u-drag ' + dragClass] = true;
- verticalObj.drag['u-draging ' + dragingClass] = doing;
-
- var horizontalObj = {
- drop: {}, drag: {}
- };
- horizontalObj.drop['u-drop u-drop-horizontal ' + dropClass] = true;
- horizontalObj.drop['u-droping u-droping-horizontal ' + dropOverClass] = doing;
- horizontalObj.drag['u-drag u-drag-horizontal ' + dragClass] = true;
- horizontalObj.drag['u-draging u-draging-horizontal ' + dragingClass] = doing;
-
- switch (type) {
- case 'vertical':
- return verticalObj;
- break;
- case 'horizontal':
- return horizontalObj;
- break;
- case 'betweenVertical':
- return verticalObj;
- break;
- case 'betweenHorizontal':
- return horizontalObj;
- break;
- }
- };
-
-/***/ }),
-/* 254 */
-/***/ (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 _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 _react = __webpack_require__(1);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _reactDom = __webpack_require__(2);
-
- var _reactDom2 = _interopRequireDefault(_reactDom);
-
- var _reactBeautifulDnd = __webpack_require__(152);
-
- var _util = __webpack_require__(253);
-
- var _classnames = __webpack_require__(5);
-
- var _classnames2 = _interopRequireDefault(_classnames);
-
- var _lodash = __webpack_require__(251);
-
- var _lodash2 = _interopRequireDefault(_lodash);
-
- 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 reorder = function reorder(list, startIndex, endIndex) {
- var result = Array.from(list);
-
- var _result$splice = result.splice(startIndex, 1),
- _result$splice2 = _slicedToArray(_result$splice, 1),
- removed = _result$splice2[0];
-
- result.splice(endIndex, 0, removed);
-
- return result;
- };
-
- /**
- * Moves an item from one list to another list.
- */
- var move = function move(source, destination, droppableSource, droppableDestination) {
- var sourceClone = Array.from(source);
- var destClone = Array.from(destination);
-
- var _sourceClone$splice = sourceClone.splice(droppableSource.index, 1),
- _sourceClone$splice2 = _slicedToArray(_sourceClone$splice, 1),
- removed = _sourceClone$splice2[0];
-
- destClone.splice(droppableDestination.index, 0, removed);
-
- var result = {};
- result[droppableSource.droppableId] = sourceClone;
- result[droppableDestination.droppableId] = destClone;
-
- return result;
- };
-
- var Between = function (_Component) {
- _inherits(Between, _Component);
-
- function Between(props) {
- _classCallCheck(this, Between);
-
- var _this = _possibleConstructorReturn(this, _Component.call(this, props));
-
- _this.id2List = {
- droppable: 'items',
- droppable2: 'selected'
- };
-
- _this.getList = function (id) {
- return _this.state[_this.id2List[id]];
- };
-
- _this.onDragEnd = function (result) {
- console.log(result);
- var source = result.source,
- destination = result.destination;
-
- // dropped outside the list
-
- if (!destination) {
- return;
- }
- var list = _this.state.items;
- var otherList = _this.state.selected;
-
- if (source.droppableId === destination.droppableId) {
- var items = reorder(_this.getList(source.droppableId), source.index, destination.index);
-
- var state = { items: items };
- list = items;
-
- if (source.droppableId === 'droppable2') {
- state = { selected: items };
- otherList = items;
- list = _this.state.items;
- }
- _this.setState(state);
- } else {
- var _result = move(_this.getList(source.droppableId), _this.getList(destination.droppableId), source, destination);
-
- _this.setState({
- items: _result.droppable,
- selected: _result.droppable2
- });
- list = _result.droppable;
- otherList = _result.droppable2;
- }
- _this.props.onStop(result, {
- list: list,
- otherList: otherList
- });
- };
-
- _this.onDragStart = function (result) {
- _this.props.onStart(result, {
- list: _this.state.list,
- otherList: _this.state.selected
- });
- };
-
- _this.state = {
- items: _this.props.list,
- selected: _this.props.otherList
- };
- return _this;
- }
-
- Between.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
- if (!(0, _lodash2["default"])(this.state.items, nextProps.list)) {
- this.setState({
- items: nextProps.list
- });
- }
- if (!(0, _lodash2["default"])(this.state.selected, nextProps.otherList)) {
- this.setState({
- selected: nextProps.otherList
- });
- }
- };
-
- Between.prototype.render = function render() {
- var _this2 = this;
-
- var _props = this.props,
- onStart = _props.onStart,
- onDrag = _props.onDrag,
- onStop = _props.onStop,
- onDragUpdate = _props.onDragUpdate,
- dropClass = _props.dropClass,
- dropOverClass = _props.dropOverClass,
- dragClass = _props.dragClass,
- dragingClass = _props.dragingClass,
- showKey = _props.showKey,
- type = _props.type;
-
-
- return _react2["default"].createElement(
- 'div',
- { className: (0, _classnames2["default"])({
- 'u-drag-between': type == 'betweenVertical',
- 'u-drag-between u-drag-between-horizontal': type == 'betweenHorizontal'
-
- }) },
- _react2["default"].createElement(
- _reactBeautifulDnd.DragDropContext,
- { onDragEnd: this.onDragEnd, onDragStart: this.onDragStart, onDragUpdate: onDragUpdate },
- _react2["default"].createElement(
- _reactBeautifulDnd.Droppable,
- { droppableId: 'droppable', direction: type == 'betweenVertical' ? 'vertical' : 'horizontal' },
- function (provided, snapshot) {
- return _react2["default"].createElement(
- 'div',
- {
- ref: provided.innerRef,
- className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDraggingOver).drop)) },
- _this2.state.items.map(function (item, index) {
- return _react2["default"].createElement(
- _reactBeautifulDnd.Draggable,
- {
- key: '1' + index,
- draggableId: '1' + index,
- index: index },
- function (provided, snapshot) {
- return _react2["default"].createElement(
- 'div',
- _extends({
- ref: provided.innerRef
- }, provided.draggableProps, provided.dragHandleProps, {
- className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDragging).drag)),
- style: _extends({}, provided.draggableProps.style) }),
- showKey ? item[showKey] : item
- );
- }
- );
- }),
- provided.placeholder
- );
- }
- ),
- _react2["default"].createElement(
- _reactBeautifulDnd.Droppable,
- { droppableId: 'droppable2', direction: type == 'betweenVertical' ? 'vertical' : 'horizontal' },
- function (provided, snapshot) {
- return _react2["default"].createElement(
- 'div',
- {
- ref: provided.innerRef,
- className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDraggingOver).drop)) },
- _this2.state.selected.map(function (item, index) {
- return _react2["default"].createElement(
- _reactBeautifulDnd.Draggable,
- {
- key: '2' + index,
- draggableId: '2' + index,
- index: index },
- function (provided, snapshot) {
- return _react2["default"].createElement(
- 'div',
- _extends({
- ref: provided.innerRef
- }, provided.draggableProps, provided.dragHandleProps, {
- className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDragging).drag)),
- style: _extends({}, provided.draggableProps.style) }),
- showKey ? item[showKey] : item
- );
- }
- );
- }),
- provided.placeholder
- );
- }
- )
- )
- );
- };
-
- return Between;
- }(_react.Component);
-
- exports["default"] = Between;
- module.exports = exports['default'];
-
-/***/ }),
-/* 255 */
-/***/ (function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- var React = __webpack_require__(1);
-
- var classCallCheck = function (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 _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 inherits = function (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 possibleConstructorReturn = function (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;
- };
-
- var styles = {
- base: {
- position: 'absolute',
- userSelect: 'none',
- MsUserSelect: 'none'
- },
- top: {
- width: '100%',
- height: '10px',
- top: '-5px',
- left: '0px',
- cursor: 'row-resize'
- },
- right: {
- width: '10px',
- height: '100%',
- top: '0px',
- right: '-5px',
- cursor: 'col-resize'
- },
- bottom: {
- width: '100%',
- height: '10px',
- bottom: '-5px',
- left: '0px',
- cursor: 'row-resize'
- },
- left: {
- width: '10px',
- height: '100%',
- top: '0px',
- left: '-5px',
- cursor: 'col-resize'
- },
- topRight: {
- width: '20px',
- height: '20px',
- position: 'absolute',
- right: '-10px',
- top: '-10px',
- cursor: 'ne-resize'
- },
- bottomRight: {
- width: '20px',
- height: '20px',
- position: 'absolute',
- right: '-10px',
- bottom: '-10px',
- cursor: 'se-resize'
- },
- bottomLeft: {
- width: '20px',
- height: '20px',
- position: 'absolute',
- left: '-10px',
- bottom: '-10px',
- cursor: 'sw-resize'
- },
- topLeft: {
- width: '20px',
- height: '20px',
- position: 'absolute',
- left: '-10px',
- top: '-10px',
- cursor: 'nw-resize'
- }
- };
-
- var Resizer = (function (props) {
- return React.createElement(
- 'div',
- {
- className: props.className,
- style: _extends({}, styles.base, styles[props.direction], props.replaceStyles || {}),
- onMouseDown: function onMouseDown(e) {
- props.onResizeStart(e, props.direction);
- },
- onTouchStart: function onTouchStart(e) {
- props.onResizeStart(e, props.direction);
- }
- },
- props.children
- );
- });
-
- var userSelectNone = {
- userSelect: 'none',
- MozUserSelect: 'none',
- WebkitUserSelect: 'none',
- MsUserSelect: 'none'
- };
-
- var userSelectAuto = {
- userSelect: 'auto',
- MozUserSelect: 'auto',
- WebkitUserSelect: 'auto',
- MsUserSelect: 'auto'
- };
-
- var clamp = function clamp(n, min, max) {
- return Math.max(Math.min(n, max), min);
- };
- var snap = function snap(n, size) {
- return Math.round(n / size) * size;
- };
-
- var findClosestSnap = function findClosestSnap(n, snapArray) {
- return snapArray.reduce(function (prev, curr) {
- return Math.abs(curr - n) < Math.abs(prev - n) ? curr : prev;
- });
- };
-
- var endsWith = function endsWith(str, searchStr) {
- return str.substr(str.length - searchStr.length, searchStr.length) === searchStr;
- };
-
- var getStringSize = function getStringSize(n) {
- if (n.toString() === 'auto') return n.toString();
- if (endsWith(n.toString(), 'px')) return n.toString();
- if (endsWith(n.toString(), '%')) return n.toString();
- if (endsWith(n.toString(), 'vh')) return n.toString();
- if (endsWith(n.toString(), 'vw')) return n.toString();
- if (endsWith(n.toString(), 'vmax')) return n.toString();
- if (endsWith(n.toString(), 'vmin')) return n.toString();
- return n + 'px';
- };
-
- var definedProps = ['style', 'className', 'grid', 'snap', 'bounds', 'size', 'defaultSize', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'lockAspectRatio', 'lockAspectRatioExtraWidth', 'lockAspectRatioExtraHeight', 'enable', 'handleStyles', 'handleClasses', 'handleWrapperStyle', 'handleWrapperClass', 'children', 'onResizeStart', 'onResize', 'onResizeStop', 'handleComponent', 'scale', 'resizeRatio'];
-
- var baseClassName = '__resizable_base__';
-
- var Resizable = function (_React$Component) {
- inherits(Resizable, _React$Component);
-
- function Resizable(props) {
- classCallCheck(this, Resizable);
-
- var _this = possibleConstructorReturn(this, (Resizable.__proto__ || Object.getPrototypeOf(Resizable)).call(this, props));
-
- _this.state = {
- isResizing: false,
- resizeCursor: 'auto',
- width: typeof (_this.propsSize && _this.propsSize.width) === 'undefined' ? 'auto' : _this.propsSize && _this.propsSize.width,
- height: typeof (_this.propsSize && _this.propsSize.height) === 'undefined' ? 'auto' : _this.propsSize && _this.propsSize.height,
- direction: 'right',
- original: {
- x: 0,
- y: 0,
- width: 0,
- height: 0
- }
- };
-
- _this.updateExtendsProps(props);
- _this.onResizeStart = _this.onResizeStart.bind(_this);
- _this.onMouseMove = _this.onMouseMove.bind(_this);
- _this.onMouseUp = _this.onMouseUp.bind(_this);
-
- if (typeof window !== 'undefined') {
- window.addEventListener('mouseup', _this.onMouseUp);
- window.addEventListener('mousemove', _this.onMouseMove);
- window.addEventListener('mouseleave', _this.onMouseUp);
- window.addEventListener('touchmove', _this.onMouseMove);
- window.addEventListener('touchend', _this.onMouseUp);
- }
- return _this;
- }
-
- createClass(Resizable, [{
- key: 'updateExtendsProps',
- value: function updateExtendsProps(props) {
- this.extendsProps = Object.keys(props).reduce(function (acc, key) {
- if (definedProps.indexOf(key) !== -1) return acc;
- acc[key] = props[key];
- return acc;
- }, {});
- }
- }, {
- key: 'getParentSize',
- value: function getParentSize() {
- var base = this.base;
-
- if (!base) return { width: window.innerWidth, height: window.innerHeight };
- // INFO: To calculate parent width with flex layout
- var wrapChanged = false;
- var wrap = this.parentNode.style.flexWrap;
- var minWidth = base.style.minWidth;
- if (wrap !== 'wrap') {
- wrapChanged = true;
- this.parentNode.style.flexWrap = 'wrap';
- // HACK: Use relative to get parent padding size
- }
- base.style.position = 'relative';
- base.style.minWidth = '100%';
- var size = {
- width: base.offsetWidth,
- height: base.offsetHeight
- };
- base.style.position = 'absolute';
- if (wrapChanged) this.parentNode.style.flexWrap = wrap;
- base.style.minWidth = minWidth;
- return size;
- }
- }, {
- key: 'componentDidMount',
- value: function componentDidMount() {
- var size = this.size;
-
- this.setState({
- width: this.state.width || size.width,
- height: this.state.height || size.height
- });
- var parent = this.parentNode;
- if (!(parent instanceof HTMLElement)) return;
- if (this.base) return;
- var element = document.createElement('div');
- element.style.width = '100%';
- element.style.height = '100%';
- element.style.position = 'absolute';
- element.style.transform = 'scale(0, 0)';
- element.style.left = '0';
- element.style.flex = '0';
- if (element.classList) {
- element.classList.add(baseClassName);
- } else {
- element.className += baseClassName;
- }
- parent.appendChild(element);
- }
- }, {
- key: 'componentWillReceiveProps',
- value: function componentWillReceiveProps(next) {
- this.updateExtendsProps(next);
- }
- }, {
- key: 'componentWillUnmount',
- value: function componentWillUnmount() {
- if (typeof window !== 'undefined') {
- window.removeEventListener('mouseup', this.onMouseUp);
- window.removeEventListener('mousemove', this.onMouseMove);
- window.removeEventListener('mouseleave', this.onMouseUp);
- window.removeEventListener('touchmove', this.onMouseMove);
- window.removeEventListener('touchend', this.onMouseUp);
- var parent = this.parentNode;
- var base = this.base;
-
- if (!base || !parent) return;
- if (!(parent instanceof HTMLElement) || !(base instanceof Node)) return;
- parent.removeChild(base);
- }
- }
- }, {
- key: 'calculateNewSize',
- value: function calculateNewSize(newSize, kind) {
- var propsSize = this.propsSize && this.propsSize[kind];
- return this.state[kind] === 'auto' && this.state.original[kind] === newSize && (typeof propsSize === 'undefined' || propsSize === 'auto') ? 'auto' : newSize;
- }
- }, {
- key: 'onResizeStart',
- value: function onResizeStart(event, direction) {
- var clientX = 0;
- var clientY = 0;
- if (event.nativeEvent instanceof MouseEvent) {
- clientX = event.nativeEvent.clientX;
- clientY = event.nativeEvent.clientY;
-
- // When user click with right button the resize is stuck in resizing mode
- // until users clicks again, dont continue if right click is used.
- // HACK: MouseEvent does not have `which` from flow-bin v0.68.
- if (event.nativeEvent.which === 3) {
- return;
- }
- } else if (event.nativeEvent instanceof TouchEvent) {
- clientX = event.nativeEvent.touches[0].clientX;
- clientY = event.nativeEvent.touches[0].clientY;
- }
- if (this.props.onResizeStart) {
- this.props.onResizeStart(event, direction, this.resizable);
- }
-
- // Fix #168
- if (this.props.size) {
- if (typeof this.props.size.height !== 'undefined' && this.props.size.height !== this.state.height) {
- this.setState({ height: this.props.size.height });
- }
- if (typeof this.props.size.width !== 'undefined' && this.props.size.width !== this.state.width) {
- this.setState({ width: this.props.size.width });
- }
- }
-
- this.setState({
- original: {
- x: clientX,
- y: clientY,
- width: this.size.width,
- height: this.size.height
- },
- isResizing: true,
- resizeCursor: window.getComputedStyle(event.target).cursor,
- direction: direction
- });
- }
- }, {
- key: 'onMouseMove',
- value: function onMouseMove(event) {
- if (!this.state.isResizing) return;
- var clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
- var clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
- var _state = this.state,
- direction = _state.direction,
- original = _state.original,
- width = _state.width,
- height = _state.height;
- var _props = this.props,
- lockAspectRatio = _props.lockAspectRatio,
- lockAspectRatioExtraHeight = _props.lockAspectRatioExtraHeight,
- lockAspectRatioExtraWidth = _props.lockAspectRatioExtraWidth;
-
- var scale = this.props.scale || 1;
- var _props2 = this.props,
- maxWidth = _props2.maxWidth,
- maxHeight = _props2.maxHeight,
- minWidth = _props2.minWidth,
- minHeight = _props2.minHeight;
-
- var resizeRatio = this.props.resizeRatio || 1;
-
- // TODO: refactor
- var parentSize = this.getParentSize();
- if (maxWidth && typeof maxWidth === 'string' && endsWith(maxWidth, '%')) {
- var _ratio = Number(maxWidth.replace('%', '')) / 100;
- maxWidth = parentSize.width * _ratio;
- }
- if (maxHeight && typeof maxHeight === 'string' && endsWith(maxHeight, '%')) {
- var _ratio2 = Number(maxHeight.replace('%', '')) / 100;
- maxHeight = parentSize.height * _ratio2;
- }
- if (minWidth && typeof minWidth === 'string' && endsWith(minWidth, '%')) {
- var _ratio3 = Number(minWidth.replace('%', '')) / 100;
- minWidth = parentSize.width * _ratio3;
- }
- if (minHeight && typeof minHeight === 'string' && endsWith(minHeight, '%')) {
- var _ratio4 = Number(minHeight.replace('%', '')) / 100;
- minHeight = parentSize.height * _ratio4;
- }
- maxWidth = typeof maxWidth === 'undefined' ? undefined : Number(maxWidth);
- maxHeight = typeof maxHeight === 'undefined' ? undefined : Number(maxHeight);
- minWidth = typeof minWidth === 'undefined' ? undefined : Number(minWidth);
- minHeight = typeof minHeight === 'undefined' ? undefined : Number(minHeight);
-
- var ratio = typeof lockAspectRatio === 'number' ? lockAspectRatio : original.width / original.height;
- var newWidth = original.width;
- var newHeight = original.height;
- if (/right/i.test(direction)) {
- newWidth = original.width + (clientX - original.x) * resizeRatio / scale;
- if (lockAspectRatio) newHeight = (newWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
- }
- if (/left/i.test(direction)) {
- newWidth = original.width - (clientX - original.x) * resizeRatio / scale;
- if (lockAspectRatio) newHeight = (newWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
- }
- if (/bottom/i.test(direction)) {
- newHeight = original.height + (clientY - original.y) * resizeRatio / scale;
- if (lockAspectRatio) newWidth = (newHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
- }
- if (/top/i.test(direction)) {
- newHeight = original.height - (clientY - original.y) * resizeRatio / scale;
- if (lockAspectRatio) newWidth = (newHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
- }
-
- if (this.props.bounds === 'parent') {
- var parent = this.parentNode;
- if (parent instanceof HTMLElement) {
- var parentRect = parent.getBoundingClientRect();
- var parentLeft = parentRect.left;
- var parentTop = parentRect.top;
-
- var _resizable$getBoundin = this.resizable.getBoundingClientRect(),
- _left = _resizable$getBoundin.left,
- _top = _resizable$getBoundin.top;
-
- var boundWidth = parent.offsetWidth + (parentLeft - _left);
- var boundHeight = parent.offsetHeight + (parentTop - _top);
- maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
- maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
- }
- } else if (this.props.bounds === 'window') {
- if (typeof window !== 'undefined') {
- var _resizable$getBoundin2 = this.resizable.getBoundingClientRect(),
- _left2 = _resizable$getBoundin2.left,
- _top2 = _resizable$getBoundin2.top;
-
- var _boundWidth = window.innerWidth - _left2;
- var _boundHeight = window.innerHeight - _top2;
- maxWidth = maxWidth && maxWidth < _boundWidth ? maxWidth : _boundWidth;
- maxHeight = maxHeight && maxHeight < _boundHeight ? maxHeight : _boundHeight;
- }
- } else if (this.props.bounds instanceof HTMLElement) {
- var targetRect = this.props.bounds.getBoundingClientRect();
- var targetLeft = targetRect.left;
- var targetTop = targetRect.top;
-
- var _resizable$getBoundin3 = this.resizable.getBoundingClientRect(),
- _left3 = _resizable$getBoundin3.left,
- _top3 = _resizable$getBoundin3.top;
-
- if (!(this.props.bounds instanceof HTMLElement)) return;
- var _boundWidth2 = this.props.bounds.offsetWidth + (targetLeft - _left3);
- var _boundHeight2 = this.props.bounds.offsetHeight + (targetTop - _top3);
- maxWidth = maxWidth && maxWidth < _boundWidth2 ? maxWidth : _boundWidth2;
- maxHeight = maxHeight && maxHeight < _boundHeight2 ? maxHeight : _boundHeight2;
- }
-
- var computedMinWidth = typeof minWidth === 'undefined' ? 10 : minWidth;
- var computedMaxWidth = typeof maxWidth === 'undefined' || maxWidth < 0 ? newWidth : maxWidth;
- var computedMinHeight = typeof minHeight === 'undefined' ? 10 : minHeight;
- var computedMaxHeight = typeof maxHeight === 'undefined' || maxHeight < 0 ? newHeight : maxHeight;
-
- if (lockAspectRatio) {
- var extraMinWidth = (computedMinHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
- var extraMaxWidth = (computedMaxHeight - lockAspectRatioExtraHeight) * ratio + lockAspectRatioExtraWidth;
- var extraMinHeight = (computedMinWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
- var extraMaxHeight = (computedMaxWidth - lockAspectRatioExtraWidth) / ratio + lockAspectRatioExtraHeight;
- var lockedMinWidth = Math.max(computedMinWidth, extraMinWidth);
- var lockedMaxWidth = Math.min(computedMaxWidth, extraMaxWidth);
- var lockedMinHeight = Math.max(computedMinHeight, extraMinHeight);
- var lockedMaxHeight = Math.min(computedMaxHeight, extraMaxHeight);
- newWidth = clamp(newWidth, lockedMinWidth, lockedMaxWidth);
- newHeight = clamp(newHeight, lockedMinHeight, lockedMaxHeight);
- } else {
- newWidth = clamp(newWidth, computedMinWidth, computedMaxWidth);
- newHeight = clamp(newHeight, computedMinHeight, computedMaxHeight);
- }
- if (this.props.grid) {
- newWidth = snap(newWidth, this.props.grid[0]);
- }
- if (this.props.grid) {
- newHeight = snap(newHeight, this.props.grid[1]);
- }
-
- if (this.props.snap && this.props.snap.x) {
- newWidth = findClosestSnap(newWidth, this.props.snap.x);
- }
- if (this.props.snap && this.props.snap.y) {
- newHeight = findClosestSnap(newHeight, this.props.snap.y);
- }
-
- var delta = {
- width: newWidth - original.width,
- height: newHeight - original.height
- };
-
- if (width && typeof width === 'string' && endsWith(width, '%')) {
- var percent = newWidth / parentSize.width * 100;
- newWidth = percent + '%';
- }
-
- if (height && typeof height === 'string' && endsWith(height, '%')) {
- var _percent = newHeight / parentSize.height * 100;
- newHeight = _percent + '%';
- }
-
- this.setState({
- width: this.calculateNewSize(newWidth, 'width'),
- height: this.calculateNewSize(newHeight, 'height')
- });
-
- if (this.props.onResize) {
- this.props.onResize(event, direction, this.resizable, delta);
- }
- }
- }, {
- key: 'onMouseUp',
- value: function onMouseUp(event) {
- var _state2 = this.state,
- isResizing = _state2.isResizing,
- direction = _state2.direction,
- original = _state2.original;
-
- if (!isResizing) return;
- var delta = {
- width: this.size.width - original.width,
- height: this.size.height - original.height
- };
- if (this.props.onResizeStop) {
- this.props.onResizeStop(event, direction, this.resizable, delta);
- }
- if (this.props.size) {
- this.setState(this.props.size);
- }
- this.setState({ isResizing: false, resizeCursor: 'auto' });
- }
- }, {
- key: 'updateSize',
- value: function updateSize(size) {
- this.setState({ width: size.width, height: size.height });
- }
- }, {
- key: 'renderResizer',
- value: function renderResizer() {
- var _this2 = this;
-
- var _props3 = this.props,
- enable = _props3.enable,
- handleStyles = _props3.handleStyles,
- handleClasses = _props3.handleClasses,
- handleWrapperStyle = _props3.handleWrapperStyle,
- handleWrapperClass = _props3.handleWrapperClass,
- handleComponent = _props3.handleComponent;
-
- if (!enable) return null;
- var resizers = Object.keys(enable).map(function (dir) {
- if (enable[dir] !== false) {
- return React.createElement(
- Resizer,
- {
- key: dir,
- direction: dir,
- onResizeStart: _this2.onResizeStart,
- replaceStyles: handleStyles && handleStyles[dir],
- className: handleClasses && handleClasses[dir]
- },
- handleComponent && handleComponent[dir] ? React.createElement(handleComponent[dir]) : null
- );
- }
- return null;
- });
- // #93 Wrap the resize box in span (will not break 100% width/height)
- return React.createElement(
- 'span',
- { className: handleWrapperClass, style: handleWrapperStyle },
- resizers
- );
- }
- }, {
- key: 'render',
- value: function render() {
- var _this3 = this;
-
- var userSelect = this.state.isResizing ? userSelectNone : userSelectAuto;
- return React.createElement(
- 'div',
- _extends({
- ref: function ref(c) {
- if (c) {
- _this3.resizable = c;
- }
- },
- style: _extends({
- position: 'relative'
- }, userSelect, this.props.style, this.sizeStyle, {
- maxWidth: this.props.maxWidth,
- maxHeight: this.props.maxHeight,
- minWidth: this.props.minWidth,
- minHeight: this.props.minHeight,
- boxSizing: 'border-box'
- }),
- className: this.props.className
- }, this.extendsProps),
- this.state.isResizing && React.createElement('div', {
- style: {
- height: '100%',
- width: '100%',
- backgroundColor: 'rgba(0,0,0,0)',
- cursor: '' + (this.state.resizeCursor || 'auto'),
- opacity: '0',
- position: 'fixed',
- zIndex: '9999',
- top: '0',
- left: '0',
- bottom: '0',
- right: '0'
- }
- }),
- this.props.children,
- this.renderResizer()
- );
- }
- }, {
- key: 'parentNode',
- get: function get$$1() {
- return this.resizable.parentNode;
- }
- }, {
- key: 'propsSize',
- get: function get$$1() {
- return this.props.size || this.props.defaultSize;
- }
- }, {
- key: 'base',
- get: function get$$1() {
- var parent = this.parentNode;
- if (!parent) return undefined;
- var children = [].slice.call(parent.children);
- for (var i = 0; i < children.length; i += 1) {
- var n = children[i];
- if (n instanceof HTMLElement) {
- if (n.classList.contains(baseClassName)) {
- return n;
- }
- }
- }
- return undefined;
- }
- }, {
- key: 'size',
- get: function get$$1() {
- var width = 0;
- var height = 0;
- if (typeof window !== 'undefined') {
- var orgWidth = this.resizable.offsetWidth;
- var orgHeight = this.resizable.offsetHeight;
- // HACK: Set position `relative` to get parent size.
- // This is because when re-resizable set `absolute`, I can not get base width correctly.
- var orgPosition = this.resizable.style.position;
- if (orgPosition !== 'relative') {
- this.resizable.style.position = 'relative';
- }
- // INFO: Use original width or height if set auto.
- width = this.resizable.style.width !== 'auto' ? this.resizable.offsetWidth : orgWidth;
- height = this.resizable.style.height !== 'auto' ? this.resizable.offsetHeight : orgHeight;
- // Restore original position
- this.resizable.style.position = orgPosition;
- }
- return { width: width, height: height };
- }
- }, {
- key: 'sizeStyle',
- get: function get$$1() {
- var _this4 = this;
-
- var size = this.props.size;
-
- var getSize = function getSize(key) {
- if (typeof _this4.state[key] === 'undefined' || _this4.state[key] === 'auto') return 'auto';
- if (_this4.propsSize && _this4.propsSize[key] && endsWith(_this4.propsSize[key].toString(), '%')) {
- if (endsWith(_this4.state[key].toString(), '%')) return _this4.state[key].toString();
- var parentSize = _this4.getParentSize();
- var value = Number(_this4.state[key].toString().replace('px', ''));
- var percent = value / parentSize[key] * 100;
- return percent + '%';
- }
- return getStringSize(_this4.state[key]);
- };
- var width = size && typeof size.width !== 'undefined' && !this.state.isResizing ? getStringSize(size.width) : getSize('width');
- var height = size && typeof size.height !== 'undefined' && !this.state.isResizing ? getStringSize(size.height) : getSize('height');
- return { width: width, height: height };
- }
- }]);
- return Resizable;
- }(React.Component);
-
- Resizable.defaultProps = {
- onResizeStart: function onResizeStart() {},
- onResize: function onResize() {},
- onResizeStop: function onResizeStop() {},
- enable: {
- top: true,
- right: true,
- bottom: true,
- left: true,
- topRight: true,
- bottomRight: true,
- bottomLeft: true,
- topLeft: true
- },
- style: {},
- grid: [1, 1],
- lockAspectRatio: false,
- lockAspectRatioExtraWidth: 0,
- lockAspectRatioExtraHeight: 0,
- scale: 1,
- resizeRatio: 1
- };
-
- module.exports = Resizable;
-
-
-/***/ }),
-/* 256 */
-/***/ (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);
@@ -32926,7 +15707,7 @@
module.exports = exports['default'];
/***/ }),
-/* 257 */
+/* 151 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
@@ -33011,7 +15792,7 @@
var classes = {};
classes['' + clsPrefix] = true;
- classes['dnd-handle'] = true;
+
return _react2["default"].createElement(
'div',
_extends({}, props, {
@@ -33021,7 +15802,7 @@
'button',
{
type: 'button',
- className: 'u-close dnd-cancel',
+ className: 'u-close',
'aria-label': label,
onClick: (0, _tinperBeeCore.createChainedFunction)(modal.onHide, onHide)
},
@@ -33046,7 +15827,7 @@
module.exports = exports['default'];
/***/ }),
-/* 258 */
+/* 152 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
@@ -33106,7 +15887,6 @@
var classes = {};
classes['' + clsPrefix] = true;
- classes['clearfix'] = true;
return _react2["default"].createElement(Component, _extends({}, props, {
className: (0, _classnames2["default"])(className, classes)
@@ -33123,7 +15903,7 @@
module.exports = exports['default'];
/***/ }),
-/* 259 */
+/* 153 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
@@ -33132,412 +15912,7 @@
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["default"] = confirm;
-
- var _react = __webpack_require__(1);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _reactDom = __webpack_require__(2);
-
- var _reactDom2 = _interopRequireDefault(_reactDom);
-
- var _classnames = __webpack_require__(5);
-
- var _classnames2 = _interopRequireDefault(_classnames);
-
- var _Modal = __webpack_require__(135);
-
- var _Modal2 = _interopRequireDefault(_Modal);
-
- var _beeButton = __webpack_require__(260);
-
- var _beeButton2 = _interopRequireDefault(_beeButton);
-
- var _beeIcon = __webpack_require__(106);
-
- var _beeIcon2 = _interopRequireDefault(_beeIcon);
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
- var IS_REACT_16 = !!_reactDom2["default"].createPortal;
-
- var ConfirmDialog = function ConfirmDialog(props) {
- var onCancel = props.onCancel,
- onOk = props.onOk,
- close = props.close,
- onHide = props.onHide,
- show = props.show,
- keyboard = props.keyboard,
- centered = props.centered,
- getContainer = props.getContainer,
- maskStyle = props.maskStyle,
- okButtonProps = props.okButtonProps,
- cancelButtonProps = props.cancelButtonProps,
- _props$iconType = props.iconType,
- iconType = _props$iconType === undefined ? 'uf-qm-c' : _props$iconType;
-
- // 支持传入{ icon: null }来隐藏`Modal.confirm`默认的Icon
-
- var icon = props.icon === undefined ? iconType : props.icon;
- var okType = props.okType || 'primary';
- var prefixCls = props.prefixCls || 'u-modal';
- var contentPrefixCls = prefixCls + '-confirm';
- // 默认为 true,保持向下兼容
- var okCancel = 'okCancel' in props ? props.okCancel : true;
- var width = props.width || 400;
- var style = props.style || {};
- var backdrop = props.backdrop === undefined ? true : props.backdrop;
- // 默认为 false,保持旧版默认行为
- var maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
- // const runtimeLocale = getConfirmLocale();
- var okText = props.okText || (okCancel ? "确定" : "知道了");
- var cancelText = props.cancelText || "取消";
- var autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
- var transitionName = props.transitionName || 'zoom';
- var maskTransitionName = props.maskTransitionName || 'fade';
-
- var classString = (0, _classnames2["default"])(contentPrefixCls, contentPrefixCls + '-' + props.type, props.className);
-
- var cancelButton = okCancel && _react2["default"].createElement(
- _beeButton2["default"],
- {
- onClick: function onClick() {
- close();onCancel ? onCancel() : function () {
- return;
- };
- },
- colors: 'secondary',
- style: { marginRight: 8 }
- },
- cancelText
- );
- var iconNode = typeof icon === 'string' ? _react2["default"].createElement(_beeIcon2["default"], { type: icon }) : icon;
-
- return _react2["default"].createElement(
- _Modal2["default"],
- {
- width: width,
- className: classString,
- show: show,
- onHide: onHide,
- backdrop: backdrop },
- _react2["default"].createElement(
- _Modal2["default"].Header,
- null,
- _react2["default"].createElement(
- _Modal2["default"].Title,
- null,
- iconNode,
- _react2["default"].createElement(
- 'span',
- { className: contentPrefixCls + '-title' },
- props.title
- )
- )
- ),
- _react2["default"].createElement(
- _Modal2["default"].Body,
- null,
- _react2["default"].createElement(
- 'div',
- { className: contentPrefixCls + '-content' },
- props.content
- )
- ),
- _react2["default"].createElement(
- _Modal2["default"].Footer,
- null,
- cancelButton,
- _react2["default"].createElement(
- _beeButton2["default"],
- {
- onClick: function onClick() {
- close();onOk ? onOk() : function () {
- return;
- };
- },
- colors: okType
- },
- okText
- )
- )
- );
- };
-
- function confirm(config) {
- var div = document.createElement('div');
- document.body.appendChild(div);
- var currentConfig = _extends({}, config, { close: close, show: true });
-
- function close() {
- for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
-
- currentConfig = _extends({}, currentConfig, {
- show: false,
- onHide: destroy.bind.apply(destroy, [this].concat(args))
- });
- if (IS_REACT_16) {
- render(currentConfig);
- } else {
- destroy.apply(undefined, args);
- }
- }
-
- function update(newConfig) {
- currentConfig = _extends({}, currentConfig, newConfig);
- render(currentConfig);
- }
-
- function destroy() {
- var unmountResult = _reactDom2["default"].unmountComponentAtNode(div);
- if (unmountResult && div.parentNode) {
- div.parentNode.removeChild(div);
- }
-
- for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
- args[_key2] = arguments[_key2];
- }
-
- var triggerCancel = args.some(function (param) {
- return param && param.triggerCancel;
- });
- if (config.onCancel && triggerCancel) {
- config.onCancel.apply(config, args);
- }
- for (var i = 0; i < _Modal.destroyFns.length; i++) {
- var fn = _Modal.destroyFns[i];
- if (fn === close) {
- _Modal.destroyFns.splice(i, 1);
- break;
- }
- }
- }
-
- function render(props) {
- _reactDom2["default"].render(_react2["default"].createElement(ConfirmDialog, props), div);
- }
-
- render(currentConfig);
-
- _Modal.destroyFns.push(close);
-
- return {
- destroy: close,
- update: update
- };
- }
- module.exports = exports['default'];
-
-/***/ }),
-/* 260 */
-/***/ (function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
-
- var _Button = __webpack_require__(261);
-
- var _Button2 = _interopRequireDefault(_Button);
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
- exports["default"] = _Button2["default"];
- module.exports = exports['default'];
-
-/***/ }),
-/* 261 */
-/***/ (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