Compare commits
3 Commits
| Author | SHA1 | Date |
|---|---|---|
liushaozhen
|
7f2e2ebf39 | |
|
liushaozhen
|
06863f3ede | |
|
liushaozhen
|
eead48e6d5 |
|
|
@ -254,14 +254,14 @@ input.u-button[type="submit"] {
|
|||
display: inline-block;
|
||||
padding: 0 12px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
height: 32px;
|
||||
cursor: text;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #424242;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #bdbdbd;
|
||||
border: 1px solid rgb(224,224,224);
|
||||
border-radius: 3px;
|
||||
transition: all .3s; }
|
||||
.u-form-control:focus {
|
||||
|
|
@ -271,18 +271,18 @@ input.u-button[type="submit"] {
|
|||
display: none; }
|
||||
|
||||
.u-form-control[disabled] {
|
||||
background: #eee;
|
||||
border-color: #e0e0e0;
|
||||
color: #BDBDBD;
|
||||
background: #F7F9FB;
|
||||
border-color: #DFE1E6;
|
||||
color: #909090;
|
||||
cursor: not-allowed; }
|
||||
|
||||
.u-form-control.lg {
|
||||
height: 38px;
|
||||
height: 40px;
|
||||
font-size: 14px; }
|
||||
|
||||
.u-form-control.sm {
|
||||
font-size: 12px;
|
||||
height: 24px; }
|
||||
height: 26px; }
|
||||
|
||||
.u-form-control-search-wrapper {
|
||||
position: absolute;
|
||||
|
|
@ -332,15 +332,29 @@ input.u-button[type="submit"] {
|
|||
margin: 0 5px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
font-size: 14px; }
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
vertical-align: middle; }
|
||||
.u-checkbox.disabled .u-checkbox-label {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5; }
|
||||
.u-checkbox input[type='checkbox'] {
|
||||
display: none;
|
||||
cursor: pointer; }
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.u-checkbox input[disabled] {
|
||||
cursor: not-allowed; }
|
||||
.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: #1e88e5; }
|
||||
.u-checkbox.is-checked .u-checkbox-label:before {
|
||||
-moz-box-shadow: inset 0 0 0 10px rgb(30,136,229);
|
||||
-webkit-box-shadow: inset 0 0 0 10px rgb(30,136,229);
|
||||
|
|
@ -401,30 +415,45 @@ input.u-button[type="submit"] {
|
|||
box-shadow: inset 0 0 0 10px rgb(76,175,80);
|
||||
border-color: rgb(76,175,80); }
|
||||
|
||||
.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(76,175,80); }
|
||||
|
||||
.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
|
||||
-moz-box-shadow: inset 0 0 0 10px rgb(255,152,0);
|
||||
-webkit-box-shadow: inset 0 0 0 10px rgb(255,152,0);
|
||||
box-shadow: inset 0 0 0 10px rgb(255,152,0);
|
||||
border-color: rgb(255,152,0); }
|
||||
|
||||
.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(255,152,0); }
|
||||
|
||||
.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
|
||||
-moz-box-shadow: inset 0 0 0 10px rgb(244,67,54);
|
||||
-webkit-box-shadow: inset 0 0 0 10px rgb(244,67,54);
|
||||
box-shadow: inset 0 0 0 10px rgb(244,67,54);
|
||||
border-color: rgb(244,67,54); }
|
||||
|
||||
.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(244,67,54); }
|
||||
|
||||
.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
|
||||
-moz-box-shadow: inset 0 0 0 10px rgb(97,97,97);
|
||||
-webkit-box-shadow: inset 0 0 0 10px rgb(97,97,97);
|
||||
box-shadow: inset 0 0 0 10px rgb(97,97,97);
|
||||
border-color: rgb(97,97,97); }
|
||||
|
||||
.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(97,97,97); }
|
||||
|
||||
.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
|
||||
-moz-box-shadow: inset 0 0 0 10px rgb(0,188,212);
|
||||
-webkit-box-shadow: inset 0 0 0 10px rgb(0,188,212);
|
||||
box-shadow: inset 0 0 0 10px rgb(0,188,212);
|
||||
border-color: rgb(0,188,212); }
|
||||
|
||||
.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(0,188,212); }
|
||||
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
@font-face {
|
||||
|
|
@ -1389,6 +1418,48 @@ input.u-button[type="submit"] {
|
|||
.uf-filterno:before {
|
||||
content: "\e9d1"; }
|
||||
|
||||
.uf-clean:before {
|
||||
content: "\e9d2"; }
|
||||
|
||||
.uf-save:before {
|
||||
content: "\e9d3"; }
|
||||
|
||||
.uf-export:before {
|
||||
content: "\e9d4"; }
|
||||
|
||||
.uf-import:before {
|
||||
content: "\e9d5"; }
|
||||
|
||||
.uf-stop-c:before {
|
||||
content: "\e9d6"; }
|
||||
|
||||
.uf-rubber:before {
|
||||
content: "\e9d7"; }
|
||||
|
||||
.uf-bediting:before {
|
||||
content: "\e9d8"; }
|
||||
|
||||
.uf-maxmize:before {
|
||||
content: "\e9d9"; }
|
||||
|
||||
.uf-minimize:before {
|
||||
content: "\e9da"; }
|
||||
|
||||
.uf-globe:before {
|
||||
content: "\e9db"; }
|
||||
|
||||
.uf-yybs:before {
|
||||
content: "\e9dc"; }
|
||||
|
||||
.uf-iuap5:before {
|
||||
content: "\e9dd"; }
|
||||
|
||||
.uf-iuap5c:before {
|
||||
content: "\e9ff"; }
|
||||
|
||||
.uf-qingkong:before {
|
||||
content: "\e666"; }
|
||||
|
||||
.u-transfer {
|
||||
position: relative;
|
||||
line-height: 1.5; }
|
||||
|
|
@ -1421,6 +1492,8 @@ input.u-button[type="submit"] {
|
|||
color: #ccc; }
|
||||
.u-transfer-list-search-action .uf:hover {
|
||||
color: rgba(0, 0, 0, 0.43); }
|
||||
.u-transfer-list-search-action.close {
|
||||
right: 20px; }
|
||||
.u-transfer-list-header {
|
||||
padding: 7px 15px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
|
@ -1460,6 +1533,9 @@ input.u-button[type="submit"] {
|
|||
padding: 7px 15px;
|
||||
min-height: 32px;
|
||||
transition: all 0.3s ease; }
|
||||
.u-transfer-list-content-item-filter {
|
||||
color: #e14c46;
|
||||
font-style: normal; }
|
||||
.u-transfer-list-content-item:not(.u-transfer-list-content-item-disabled):hover {
|
||||
cursor: pointer;
|
||||
background-color: #ecf6fd; }
|
||||
|
|
|
|||
|
|
@ -47,7 +47,10 @@ function noop() {}
|
|||
var defaultProps = {
|
||||
dataSource: [],
|
||||
render: noop,
|
||||
showSearch: false
|
||||
showSearch: false,
|
||||
renderOperation: function renderOperation() {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
var propTypes = {
|
||||
|
|
@ -68,7 +71,8 @@ var propTypes = {
|
|||
body: _propTypes2["default"].func,
|
||||
footer: _propTypes2["default"].func,
|
||||
rowKey: _propTypes2["default"].func,
|
||||
lazy: _propTypes2["default"].object
|
||||
lazy: _propTypes2["default"].object,
|
||||
renderOperation: _propTypes2["default"].func
|
||||
};
|
||||
|
||||
var defaultTitles = ['', ''];
|
||||
|
|
@ -224,7 +228,8 @@ var Transfer = function (_React$Component) {
|
|||
className = _props2$className === undefined ? '' : _props2$className,
|
||||
filterOption = _props2.filterOption,
|
||||
render = _props2.render,
|
||||
lazy = _props2.lazy;
|
||||
lazy = _props2.lazy,
|
||||
renderOperation = _props2.renderOperation;
|
||||
var _state3 = this.state,
|
||||
leftFilter = _state3.leftFilter,
|
||||
rightFilter = _state3.rightFilter,
|
||||
|
|
@ -245,6 +250,7 @@ var Transfer = function (_React$Component) {
|
|||
'div',
|
||||
{ className: cls },
|
||||
_react2["default"].createElement(_list2["default"], {
|
||||
position: 'left',
|
||||
titleText: titles[0],
|
||||
dataSource: leftDataSource,
|
||||
filter: leftFilter,
|
||||
|
|
@ -271,9 +277,11 @@ var Transfer = function (_React$Component) {
|
|||
leftActive: leftActive,
|
||||
leftArrowText: operations[1],
|
||||
moveToLeft: this.moveToLeft,
|
||||
className: prefixCls + '-operation'
|
||||
className: prefixCls + '-operation',
|
||||
renderOperation: renderOperation
|
||||
}),
|
||||
_react2["default"].createElement(_list2["default"], {
|
||||
position: 'right',
|
||||
titleText: titles[1],
|
||||
dataSource: rightDataSource,
|
||||
filter: rightFilter,
|
||||
|
|
|
|||
|
|
@ -66,6 +66,19 @@ var Item = function (_React$Component) {
|
|||
return filterOption(filter, item);
|
||||
}
|
||||
return text.indexOf(filter) >= 0;
|
||||
}, _this.highlightFilter = function (text, filter) {
|
||||
var prefixCls = _this.props.prefixCls;
|
||||
|
||||
if (typeof text == 'string') {
|
||||
text = text.replace(filter, '<i class="' + prefixCls + '-content-item-filter">' + filter + '</i>');
|
||||
return _react2["default"].createElement('span', { dangerouslySetInnerHTML: { __html: text } });
|
||||
} else {
|
||||
return _react2["default"].createElement(
|
||||
'span',
|
||||
null,
|
||||
text
|
||||
);
|
||||
}
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
|
|
@ -118,11 +131,7 @@ var Item = function (_React$Component) {
|
|||
_react2["default"].createElement(_beeCheckbox2["default"], { checked: checked, disabled: item.disabled, onClick: item.disabled ? undefined : function () {
|
||||
return onClick(item);
|
||||
} }),
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
null,
|
||||
renderedEl
|
||||
)
|
||||
this.highlightFilter(renderedEl, filter)
|
||||
);
|
||||
} else {
|
||||
return _react2["default"].createElement(
|
||||
|
|
@ -140,11 +149,7 @@ var Item = function (_React$Component) {
|
|||
_react2["default"].createElement(_beeCheckbox2["default"], { checked: checked, disabled: item.disabled, onClick: item.disabled ? undefined : function () {
|
||||
return onClick(item);
|
||||
} }),
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
null,
|
||||
renderedEl
|
||||
)
|
||||
this.highlightFilter(renderedEl, filter)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,10 +99,13 @@ var TransferList = function (_React$Component) {
|
|||
};
|
||||
|
||||
_this.renderItem = function (item) {
|
||||
var _this$props$render = _this.props.render,
|
||||
render = _this$props$render === undefined ? noop : _this$props$render;
|
||||
var _this$props2 = _this.props,
|
||||
_this$props2$render = _this$props2.render,
|
||||
render = _this$props2$render === undefined ? noop : _this$props2$render,
|
||||
filter = _this$props2.filter,
|
||||
position = _this$props2.position;
|
||||
|
||||
var renderResult = render(item);
|
||||
var renderResult = render(item, filter, position);
|
||||
var isRenderResultPlain = isRenderResultPlainObject(renderResult);
|
||||
return {
|
||||
renderedText: isRenderResultPlain ? renderResult.value : renderResult,
|
||||
|
|
|
|||
|
|
@ -66,7 +66,8 @@ var TransferOperation = function (_React$Component) {
|
|||
rightArrowText = _props.rightArrowText,
|
||||
leftActive = _props.leftActive,
|
||||
rightActive = _props.rightActive,
|
||||
className = _props.className;
|
||||
className = _props.className,
|
||||
renderOperation = _props.renderOperation;
|
||||
|
||||
|
||||
var moveToLeftButton = _react2["default"].createElement(
|
||||
|
|
@ -92,8 +93,13 @@ var TransferOperation = function (_React$Component) {
|
|||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: className },
|
||||
moveToLeftButton,
|
||||
moveToRightButton
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
{ className: className + '-btns' },
|
||||
moveToLeftButton,
|
||||
moveToRightButton
|
||||
),
|
||||
renderOperation()
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -75,12 +75,21 @@ var Search = function (_React$Component) {
|
|||
prefixCls = _props.prefixCls;
|
||||
|
||||
var icon = value && value.length > 0 ? _react2["default"].createElement(
|
||||
'a',
|
||||
{ href: '#', className: prefixCls + '-action', onClick: this.handleClear },
|
||||
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-close-c' })
|
||||
'span',
|
||||
null,
|
||||
_react2["default"].createElement(
|
||||
'a',
|
||||
{ href: '#', className: prefixCls + '-action close', onClick: this.handleClear },
|
||||
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-close-c' })
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
{ className: prefixCls + '-action search' },
|
||||
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-search' })
|
||||
)
|
||||
) : _react2["default"].createElement(
|
||||
'span',
|
||||
{ className: prefixCls + '-action' },
|
||||
{ className: prefixCls + '-action search' },
|
||||
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-search' })
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,11 @@ class Demo2 extends React.Component {
|
|||
filterOption={this.filterOption}
|
||||
targetKeys={this.state.targetKeys}
|
||||
onChange={this.handleChange}
|
||||
render={item => item.title}
|
||||
render={(item,position,filter) => {
|
||||
// console.log('position',position)
|
||||
// console.log('filter',filter)
|
||||
return item.title
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -2418,9 +2418,6 @@ i.uf {
|
|||
/*
|
||||
* 选择时删除文本阴影，及设置默认选中颜色
|
||||
*/
|
||||
::-moz-selection {
|
||||
background: rgb(187,222,251);
|
||||
text-shadow: none; }
|
||||
::selection {
|
||||
background: rgb(187,222,251);
|
||||
text-shadow: none; }
|
||||
|
|
@ -5458,14 +5455,14 @@ input.u-button[type="submit"] {
|
|||
display: inline-block;
|
||||
padding: 0 12px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
height: 32px;
|
||||
cursor: text;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #424242;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #bdbdbd;
|
||||
border: 1px solid rgb(224,224,224);
|
||||
border-radius: 3px;
|
||||
transition: all .3s; }
|
||||
.u-form-control:focus {
|
||||
|
|
@ -5475,18 +5472,18 @@ input.u-button[type="submit"] {
|
|||
display: none; }
|
||||
|
||||
.u-form-control[disabled] {
|
||||
background: #eee;
|
||||
border-color: #e0e0e0;
|
||||
color: #BDBDBD;
|
||||
background: #F7F9FB;
|
||||
border-color: #DFE1E6;
|
||||
color: #909090;
|
||||
cursor: not-allowed; }
|
||||
|
||||
.u-form-control.lg {
|
||||
height: 38px;
|
||||
height: 40px;
|
||||
font-size: 14px; }
|
||||
|
||||
.u-form-control.sm {
|
||||
font-size: 12px;
|
||||
height: 24px; }
|
||||
height: 26px; }
|
||||
|
||||
.u-form-control-search-wrapper {
|
||||
position: absolute;
|
||||
|
|
@ -5534,15 +5531,29 @@ input.u-button[type="submit"] {
|
|||
margin: 0 5px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
font-size: 14px; }
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
vertical-align: middle; }
|
||||
.u-checkbox.disabled .u-checkbox-label {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5; }
|
||||
.u-checkbox input[type='checkbox'] {
|
||||
display: none;
|
||||
cursor: pointer; }
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.u-checkbox input[disabled] {
|
||||
cursor: not-allowed; }
|
||||
.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: #1e88e5; }
|
||||
.u-checkbox.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(30,136,229);
|
||||
border-color: rgb(30,136,229); }
|
||||
|
|
@ -5594,22 +5605,37 @@ input.u-button[type="submit"] {
|
|||
box-shadow: inset 0 0 0 10px rgb(76,175,80);
|
||||
border-color: rgb(76,175,80); }
|
||||
|
||||
.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(76,175,80); }
|
||||
|
||||
.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(255,152,0);
|
||||
border-color: rgb(255,152,0); }
|
||||
|
||||
.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(255,152,0); }
|
||||
|
||||
.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(244,67,54);
|
||||
border-color: rgb(244,67,54); }
|
||||
|
||||
.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(244,67,54); }
|
||||
|
||||
.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(97,97,97);
|
||||
border-color: rgb(97,97,97); }
|
||||
|
||||
.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(97,97,97); }
|
||||
|
||||
.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(0,188,212);
|
||||
border-color: rgb(0,188,212); }
|
||||
|
||||
.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(0,188,212); }
|
||||
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
@font-face {
|
||||
|
|
@ -6574,6 +6600,48 @@ input.u-button[type="submit"] {
|
|||
.uf-filterno:before {
|
||||
content: "\e9d1"; }
|
||||
|
||||
.uf-clean:before {
|
||||
content: "\e9d2"; }
|
||||
|
||||
.uf-save:before {
|
||||
content: "\e9d3"; }
|
||||
|
||||
.uf-export:before {
|
||||
content: "\e9d4"; }
|
||||
|
||||
.uf-import:before {
|
||||
content: "\e9d5"; }
|
||||
|
||||
.uf-stop-c:before {
|
||||
content: "\e9d6"; }
|
||||
|
||||
.uf-rubber:before {
|
||||
content: "\e9d7"; }
|
||||
|
||||
.uf-bediting:before {
|
||||
content: "\e9d8"; }
|
||||
|
||||
.uf-maxmize:before {
|
||||
content: "\e9d9"; }
|
||||
|
||||
.uf-minimize:before {
|
||||
content: "\e9da"; }
|
||||
|
||||
.uf-globe:before {
|
||||
content: "\e9db"; }
|
||||
|
||||
.uf-yybs:before {
|
||||
content: "\e9dc"; }
|
||||
|
||||
.uf-iuap5:before {
|
||||
content: "\e9dd"; }
|
||||
|
||||
.uf-iuap5c:before {
|
||||
content: "\e9ff"; }
|
||||
|
||||
.uf-qingkong:before {
|
||||
content: "\e666"; }
|
||||
|
||||
.u-transfer {
|
||||
position: relative;
|
||||
line-height: 1.5; }
|
||||
|
|
@ -6606,6 +6674,8 @@ input.u-button[type="submit"] {
|
|||
color: #ccc; }
|
||||
.u-transfer-list-search-action .uf:hover {
|
||||
color: rgba(0, 0, 0, 0.43); }
|
||||
.u-transfer-list-search-action.close {
|
||||
right: 20px; }
|
||||
.u-transfer-list-header {
|
||||
padding: 7px 15px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
|
@ -6645,6 +6715,9 @@ input.u-button[type="submit"] {
|
|||
padding: 7px 15px;
|
||||
min-height: 32px;
|
||||
transition: all 0.3s ease; }
|
||||
.u-transfer-list-content-item-filter {
|
||||
color: #e14c46;
|
||||
font-style: normal; }
|
||||
.u-transfer-list-content-item:not(.u-transfer-list-content-item-disabled):hover {
|
||||
cursor: pointer;
|
||||
background-color: #ecf6fd; }
|
||||
|
|
@ -6761,7 +6834,7 @@ input.u-button[type="submit"] {
|
|||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
background-color: #fff;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px; }
|
||||
border-radius: 3px; }
|
||||
.u-panel .u-panel-heading {
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
|
|
@ -6792,7 +6865,7 @@ input.u-button[type="submit"] {
|
|||
.u-panel .u-panel-body {
|
||||
padding: 15px 15px;
|
||||
position: relative; }
|
||||
.u-panel .u-panel-body .uf {
|
||||
.u-panel .u-panel-body .u-panel-copy {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 30px;
|
||||
|
|
@ -6802,7 +6875,7 @@ input.u-button[type="submit"] {
|
|||
margin: 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer; }
|
||||
.u-panel .u-panel-body .uf:hover {
|
||||
.u-panel .u-panel-body .u-panel-copy:hover {
|
||||
color: #a8a7a7; }
|
||||
|
||||
.u-panel-default {
|
||||
|
|
@ -7533,7 +7606,7 @@ input.u-button[type="submit"] {
|
|||
border-color: #adadad; }
|
||||
|
||||
.u-button-primary {
|
||||
color: rgb(255,255,255);
|
||||
color: "255,255,255";
|
||||
background-color: rgb(30,136,229);
|
||||
border: 1px rgb(30,136,229) solid; }
|
||||
.u-button-primary.focus, .u-button-primary:focus, .u-button-primary:hover {
|
||||
|
|
@ -7544,7 +7617,7 @@ input.u-button[type="submit"] {
|
|||
border-color: rgb(21,101,192); }
|
||||
|
||||
.u-button-danger {
|
||||
color: rgb(255,255,255);
|
||||
color: "255,255,255";
|
||||
background-color: rgb(244,67,54);
|
||||
border: 1px rgb(244,67,54) solid; }
|
||||
.u-button-danger.focus, .u-button-danger:focus, .u-button-danger:hover {
|
||||
|
|
@ -7555,7 +7628,7 @@ input.u-button[type="submit"] {
|
|||
border-color: rgb(211,47,47); }
|
||||
|
||||
.u-button-info {
|
||||
color: rgb(255,255,255);
|
||||
color: "255,255,255";
|
||||
background-color: rgb(0,188,212);
|
||||
border: 1px rgb(0,188,212) solid; }
|
||||
.u-button-info.focus, .u-button-info:focus, .u-button-info:hover {
|
||||
|
|
@ -7566,7 +7639,7 @@ input.u-button[type="submit"] {
|
|||
border-color: rgb(0,151,167); }
|
||||
|
||||
.u-button-warning {
|
||||
color: rgb(255,255,255);
|
||||
color: "255,255,255";
|
||||
background-color: rgb(255,152,0);
|
||||
border: 1px rgb(255,152,0) solid; }
|
||||
.u-button-warning.focus, .u-button-warning:focus, .u-button-warning:hover {
|
||||
|
|
@ -7577,7 +7650,7 @@ input.u-button[type="submit"] {
|
|||
border-color: rgb(245,124,0); }
|
||||
|
||||
.u-button-success {
|
||||
color: rgb(255,255,255);
|
||||
color: "255,255,255";
|
||||
background-color: rgb(76,175,80);
|
||||
border: 1px rgb(76,175,80) solid; }
|
||||
.u-button-success.focus, .u-button-success:focus, .u-button-success:hover {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -9,7 +9,7 @@
|
|||
|参数|说明|类型|默认值|
|
||||
|:--|:---:|:--:|---:|
|
||||
|dataSource|设置数据源。当有targetKey props存在时，dataSource的数据刨去targetKey数据,剩下的都放在左边列表|[]|[]|
|
||||
|render|自定义的展示出来的item,需要展示哪些字段|Function(record)|-|
|
||||
|render|自定义的展示出来的item,需要展示哪些字段|Function(record,'left'|'right',filter)|-|
|
||||
|targetKeys|展示在右边列表的数据集|[]|[]|
|
||||
|selectedKeys|所有选中的item的keys|[]|[]|
|
||||
|onChange|当item在穿梭成功后的回调 参数(targetKeys, direction, moveKeys)|func|-|
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-transfer",
|
||||
"version": "1.0.8",
|
||||
"version": "1.0.8-ncc.2",
|
||||
"description": "Transfer ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
@ -65,4 +65,4 @@
|
|||
"react-addons-test-utils": "15.3.2",
|
||||
"react-dom": "15.3.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ function noop() {
|
|||
const defaultProps = {
|
||||
dataSource: [],
|
||||
render: noop,
|
||||
showSearch: false,
|
||||
showSearch: false,
|
||||
renderOperation:()=>''
|
||||
};
|
||||
|
||||
const propTypes = {
|
||||
|
|
@ -33,6 +34,7 @@ const propTypes = {
|
|||
footer: PropTypes.func,
|
||||
rowKey: PropTypes.func,
|
||||
lazy: PropTypes.object,
|
||||
renderOperation:PropTypes.func
|
||||
};
|
||||
|
||||
const defaultTitles = ['', ''];
|
||||
|
|
@ -224,7 +226,7 @@ class Transfer extends React.Component{
|
|||
const {
|
||||
prefixCls = 'u-transfer', operations = [], showSearch, notFoundContent,
|
||||
searchPlaceholder, body, footer, listStyle, className = '',
|
||||
filterOption, render, lazy
|
||||
filterOption, render, lazy,renderOperation
|
||||
} = this.props;
|
||||
const { leftFilter, rightFilter, sourceSelectedKeys, targetSelectedKeys } = this.state;
|
||||
|
||||
|
|
@ -238,6 +240,7 @@ class Transfer extends React.Component{
|
|||
return (
|
||||
<div className={cls}>
|
||||
<List
|
||||
position="left"
|
||||
titleText={titles[0]}
|
||||
dataSource={leftDataSource}
|
||||
filter={leftFilter}
|
||||
|
|
@ -265,8 +268,10 @@ class Transfer extends React.Component{
|
|||
leftArrowText={operations[1]}
|
||||
moveToLeft={this.moveToLeft}
|
||||
className={`${prefixCls}-operation`}
|
||||
renderOperation={renderOperation}
|
||||
/>
|
||||
<List
|
||||
position="right"
|
||||
titleText={titles[1]}
|
||||
dataSource={rightDataSource}
|
||||
filter={rightFilter}
|
||||
|
|
|
|||
|
|
@ -47,6 +47,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&-action.close{
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
|
|
@ -99,6 +102,10 @@
|
|||
min-height: 32px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
&-item-filter{
|
||||
color: #e14c46;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
&-item:not(&-item-disabled):hover {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
15
src/item.js
15
src/item.js
|
|
@ -21,6 +21,15 @@ class Item extends React.Component{
|
|||
}
|
||||
return text.indexOf(filter) >= 0;
|
||||
}
|
||||
highlightFilter = (text,filter) =>{
|
||||
let { prefixCls } = this.props;
|
||||
if(typeof text=='string'){
|
||||
text = text.replace(filter,'<i class="'+prefixCls+'-content-item-filter">'+filter+'</i>');
|
||||
return <span dangerouslySetInnerHTML={{__html:text}}></span>
|
||||
}else{
|
||||
return <span>{text}</span>
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const { render, filter, item, lazy, checked, prefixCls, onClick,renderedText,renderedEl } = this.props;
|
||||
const className = classNames({
|
||||
|
|
@ -39,7 +48,7 @@ class Item extends React.Component{
|
|||
if(lazy && lazy.container == "modal")
|
||||
{
|
||||
lazyFlag = false
|
||||
}
|
||||
}
|
||||
|
||||
if(!lazyFlag) {
|
||||
return (
|
||||
|
|
@ -49,7 +58,7 @@ class Item extends React.Component{
|
|||
onClick={item.disabled ? undefined : () => onClick(item)}
|
||||
>
|
||||
<Checkbox checked={checked} disabled={item.disabled} onClick={item.disabled ? undefined : () => onClick(item)}/>
|
||||
<span>{renderedEl}</span>
|
||||
{this.highlightFilter(renderedEl,filter)}
|
||||
</li>
|
||||
)
|
||||
}else {
|
||||
|
|
@ -61,7 +70,7 @@ class Item extends React.Component{
|
|||
onClick={item.disabled ? undefined : () => onClick(item)}
|
||||
>
|
||||
<Checkbox checked={checked} disabled={item.disabled} onClick={item.disabled ? undefined : () => onClick(item)}/>
|
||||
<span>{renderedEl}</span>
|
||||
{this.highlightFilter(renderedEl,filter)}
|
||||
</li>
|
||||
</Lazyload>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -79,8 +79,8 @@ class TransferList extends React.Component {
|
|||
this.props.handleClear();
|
||||
}
|
||||
renderItem = (item) => {
|
||||
const { render = noop } = this.props;
|
||||
const renderResult = render(item);
|
||||
const { render = noop,filter,position } = this.props;
|
||||
const renderResult = render(item,filter,position);
|
||||
const isRenderResultPlain = isRenderResultPlainObject(renderResult);
|
||||
return {
|
||||
renderedText: isRenderResultPlain ? renderResult.value : renderResult,
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ class TransferOperation extends React.Component{
|
|||
leftActive,
|
||||
rightActive,
|
||||
className,
|
||||
renderOperation
|
||||
} = this.props;
|
||||
|
||||
const moveToLeftButton = (
|
||||
|
|
@ -48,8 +49,11 @@ class TransferOperation extends React.Component{
|
|||
);
|
||||
return (
|
||||
<div className={className}>
|
||||
{moveToLeftButton}
|
||||
{moveToRightButton}
|
||||
<div className={`${className}-btns`}>
|
||||
{moveToLeftButton}
|
||||
{moveToRightButton}
|
||||
</div>
|
||||
{renderOperation()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,11 +34,14 @@ class Search extends React.Component {
|
|||
render() {
|
||||
const { placeholder, value, prefixCls } = this.props;
|
||||
const icon = (value && value.length > 0) ? (
|
||||
<a href="#" className={`${prefixCls}-action`} onClick={this.handleClear}>
|
||||
<Icon type="uf-close-c" />
|
||||
</a>
|
||||
<span>
|
||||
<a href="#" className={`${prefixCls}-action close`} onClick={this.handleClear}>
|
||||
<Icon type="uf-close-c" />
|
||||
</a>
|
||||
<span className={`${prefixCls}-action search`}><Icon type="uf-search" /></span>
|
||||
</span>
|
||||
) : (
|
||||
<span className={`${prefixCls}-action`}><Icon type="uf-search" /></span>
|
||||
<span className={`${prefixCls}-action search`}><Icon type="uf-search" /></span>
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
|
|||
Loading…
Reference in New Issue