index.js
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = undefined;
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _list = require('./list');
var _list2 = _interopRequireDefault(_list);
var _operation = require('./operation');
var _operation2 = _interopRequireDefault(_operation);
var _search = require('./search');
var _search2 = _interopRequireDefault(_search);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function noop() {}
var defaultTitles = ['', ''];
var Transfer = function (_React$Component) {
(0, _inherits3["default"])(Transfer, _React$Component);
function Transfer(props) {
(0, _classCallCheck3["default"])(this, Transfer);
var _this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.call(this, props));
// 选中节点移到穿梭框另一侧
_this.moveTo = function (direction) {
var _this$props = _this.props,
_this$props$targetKey = _this$props.targetKeys,
targetKeys = _this$props$targetKey === undefined ? [] : _this$props$targetKey,
onChange = _this$props.onChange;
var _this$state = _this.state,
sourceSelectedKeys = _this$state.sourceSelectedKeys,// 穿梭框左侧被选中的key值
targetSelectedKeys = _this$state.targetSelectedKeys;// 穿梭框右侧被选中的key值
var moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
// 从左侧移入右侧，targetKeys增加moveKeys；反之，targetKeys滤除moveKeys
var newTargetKeys = direction === 'right' ? moveKeys.concat(targetKeys) : targetKeys.filter(function (targetKey) {
return moveKeys.indexOf(targetKey) === -1;
});
// 清空已移入穿梭框另一侧的选中节点数据，并通过handleSelectChange执行用户配置的props.onSelectChange
// oppositeDirection待移动数据节点移动前所在位置
var oppositeDirection = direction === 'right' ? 'left' : 'right';
_this.setState((0, _defineProperty3["default"])({}, _this.getSelectedKeysName(oppositeDirection), []));
_this.handleSelectChange(oppositeDirection, []);
if (onChange) {
onChange(newTargetKeys, direction, moveKeys);
}
};
_this.moveToLeft = function () {
return _this.moveTo('left');
};
_this.moveToRight = function () {
return _this.moveTo('right');
};
// 以filteredDataSource设定待选中的节点，filteredDataSource为单侧穿梭框内已展示的节点
// checkAll为全选复选框在点击前的值，若为真值，即撤销全选状态
_this.handleSelectAll = function (direction, filteredDataSource, checkAll) {
var holder = checkAll ? [] : filteredDataSource.map(function (item) {
return item.key;
});
_this.handleSelectChange(direction, holder);
if (!_this.props.selectedKeys) {
_this.setState((0, _defineProperty3["default"])({}, _this.getSelectedKeysName(direction), holder));
}
};
_this.handleLeftSelectAll = function (filteredDataSource, checkAll) {
return _this.handleSelectAll('left', filteredDataSource, checkAll);
};
_this.handleRightSelectAll = function (filteredDataSource, checkAll) {
return _this.handleSelectAll('right', filteredDataSource, checkAll);
};
// 将一侧搜索框的值存入state，模糊查询用
_this.handleFilter = function (direction, e) {
_this.setState((0, _defineProperty3["default"])({}, direction + 'Filter', e.target.value));
};
_this.handleLeftFilter = function (e) {
return _this.handleFilter('left', e);
};
_this.handleRightFilter = function (e) {
return _this.handleFilter('right', e);
};
// 置空一侧搜索框的值
_this.handleClear = function (direction) {
_this.setState((0, _defineProperty3["default"])({}, direction + 'Filter', ''));
};
_this.handleLeftClear = function () {
return _this.handleClear('left');
};
_this.handleRightClear = function () {
return _this.handleClear('right');
};
// 点击复选框时触发执行，选中或撤销选中节点
_this.handleSelect = function (direction, selectedItem, checked) {
var _this$state2 = _this.state,
sourceSelectedKeys = _this$state2.sourceSelectedKeys,
targetSelectedKeys = _this$state2.targetSelectedKeys;
var holder = direction === 'left' ? [].concat((0, _toConsumableArray3["default"])(sourceSelectedKeys)) : [].concat((0, _toConsumableArray3["default"])(targetSelectedKeys));
var index = holder.indexOf(selectedItem.key);
if (index > -1) {
holder.splice(index, 1);
}
if (checked) {
holder.push(selectedItem.key);
}
_this.handleSelectChange(direction, holder);
if (!_this.props.selectedKeys) {
_this.setState((0, _defineProperty3["default"])({}, _this.getSelectedKeysName(direction), holder));
}
};
_this.handleLeftSelect = function (selectedItem, checked) {
return _this.handleSelect('left', selectedItem, checked);
};
_this.handleRightSelect = function (selectedItem, checked) {
return _this.handleSelect('right', selectedItem, checked);
};
var _props$selectedKeys = props.selectedKeys,
selectedKeys = _props$selectedKeys === undefined ? [] : _props$selectedKeys,
_props$targetKeys = props.targetKeys,
targetKeys = _props$targetKeys === undefined ? [] : _props$targetKeys;
_this.state = {
// 左右两侧输入框的值
leftFilter: '',
rightFilter: '',
// 左右两侧选中的节点
sourceSelectedKeys: selectedKeys.filter(function (key) {
return targetKeys.indexOf(key) === -1;
}),
targetSelectedKeys: selectedKeys.filter(function (key) {
return targetKeys.indexOf(key) > -1;
})
};
return _this;
}
Transfer.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var _this2 = this;
var _state = this.state,
sourceSelectedKeys = _state.sourceSelectedKeys,
targetSelectedKeys = _state.targetSelectedKeys;
if (nextProps.targetKeys !== this.props.targetKeys || nextProps.dataSource !== this.props.dataSource) {
(function () {
var existInDateSourcekey = function existInDateSourcekey(key) {
return dataSource.some(function (item) {
return item.key === key;
});
};
// clear key nolonger existed
// clear checkedKeys according to targetKeys
// clear cached splited dataSource
_this2.splitedDataSource = null;
var dataSource = nextProps.dataSource,
_nextProps$targetKeys = nextProps.targetKeys,
targetKeys = _nextProps$targetKeys === undefined ? [] : _nextProps$targetKeys;
_this2.setState({
sourceSelectedKeys: sourceSelectedKeys.filter(existInDateSourcekey).filter(function (data) {
return targetKeys.filter(function (key) {
return key === data;
}).length === 0;
}),
targetSelectedKeys: targetSelectedKeys.filter(existInDateSourcekey).filter(function (data) {
return targetKeys.filter(function (key) {
return key === data;
}).length > 0;
})
});
})();
}
if (nextProps.selectedKeys) {
(function () {
var targetKeys = nextProps.targetKeys;
_this2.setState({
sourceSelectedKeys: nextProps.selectedKeys.filter(function (key) {
return targetKeys.indexOf(key) === -1;
}),
targetSelectedKeys: nextProps.selectedKeys.filter(function (key) {
return targetKeys.indexOf(key) > -1;
})
});
})();
}
};
// 通过props.dataSource、props.targetKeys筛分出左右两侧穿梭框有的节点数据
// 特别的，右侧穿梭框的数据需要同时在props.dataSource、props.targetKeys中
Transfer.prototype.splitDataSource = function splitDataSource(props) {
if (this.splitedDataSource) {
return this.splitedDataSource;
}
var rowKey = props.rowKey,
dataSource = props.dataSource,
_props$targetKeys2 = props.targetKeys,
targetKeys = _props$targetKeys2 === undefined ? [] : _props$targetKeys2;
if (rowKey) {
dataSource.forEach(function (record) {
record.key = rowKey(record);
});
}
var leftDataSource = dataSource.filter(function (_ref) {
var key = _ref.key;
return targetKeys.indexOf(key) === -1;
});
var rightDataSource = [];
targetKeys.forEach(function (targetKey) {
var targetItem = dataSource.filter(function (record) {
return record.key === targetKey;
})[0];
if (targetItem) {
rightDataSource.push(targetItem);
}
});
this.splitedDataSource = {
leftDataSource: leftDataSource,
rightDataSource: rightDataSource
};
return this.splitedDataSource;
};
// 穿梭框两侧选中节点改变时，调用props.onSelectChange方法，传参为左右两侧选中的节点
Transfer.prototype.handleSelectChange = function handleSelectChange(direction, holder) {
var _state2 = this.state,
sourceSelectedKeys = _state2.sourceSelectedKeys,
targetSelectedKeys = _state2.targetSelectedKeys;
var onSelectChange = this.props.onSelectChange;
if (!onSelectChange) {
return;
}
if (direction === 'left') {
onSelectChange(holder, targetSelectedKeys);
} else {
onSelectChange(sourceSelectedKeys, holder);
}
};
// 获取穿梭框左右两侧的标题
Transfer.prototype.getTitles = function getTitles() {
var props = this.props,
context = this.context;
if (props.titles) {
return props.titles;
}
var transferLocale = context && context.antLocale && context.antLocale.Transfer;
if (transferLocale) {
return transferLocale.titles || [];
}
return defaultTitles;
};
// 获取存储左右两侧选中节点的键
Transfer.prototype.getSelectedKeysName = function getSelectedKeysName(direction) {
return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys';
};
Transfer.prototype.render = function render() {
var _props = this.props,
_props$prefixCls = _props.prefixCls,
prefixCls = _props$prefixCls === undefined ? 'ant-transfer' : _props$prefixCls,
_props$operations = _props.operations,
operations = _props$operations === undefined ? [] : _props$operations,
showSearch = _props.showSearch,
notFoundContent = _props.notFoundContent,
searchPlaceholder = _props.searchPlaceholder,
body = _props.body,
footer = _props.footer,
listStyle = _props.listStyle,
_props$className = _props.className,
className = _props$className === undefined ? '' : _props$className,
filterOption = _props.filterOption,
render = _props.render,
lazy = _props.lazy;
// 两侧输入框的值和选中的节点
var _state3 = this.state,
leftFilter = _state3.leftFilter,
rightFilter = _state3.rightFilter,
sourceSelectedKeys = _state3.sourceSelectedKeys,
targetSelectedKeys = _state3.targetSelectedKeys;
// 获取左右两侧穿梭框的数据
var _splitDataSource = this.splitDataSource(this.props),
leftDataSource = _splitDataSource.leftDataSource,
rightDataSource = _splitDataSource.rightDataSource;
// 左右箭头是否激活
var leftActive = targetSelectedKeys.length > 0;
var rightActive = sourceSelectedKeys.length > 0;
var cls = (0, _classnames2["default"])(className, prefixCls);
var titles = this.getTitles();
return _react2["default"].createElement(
'div',
{ className: cls },
_react2["default"].createElement(_list2["default"], {
titleText: titles[0],// 标题
dataSource: leftDataSource,// 待展示节点数据
filter: leftFilter,// 搜索输入框的值
filterOption: filterOption,// filterOption(value,item)以搜索框的值决定数据节点的显隐
style: listStyle, // 单侧穿梭框样式
checkedKeys: sourceSelectedKeys, // 选中节点的key值
handleFilter: this.handleLeftFilter,// 输入框值改变时绑定函数
handleClear: this.handleLeftClear,// 输入框值清空时绑定函数
handleSelect: this.handleLeftSelect,// 数据节点点击时绑定函数
handleSelectAll: this.handleLeftSelectAll,// 全选框绑定函数
render: render, // 用于渲染数据节点除复选框以外的部分
showSearch: showSearch,// 是否展示输入框
searchPlaceholder: searchPlaceholder,// 输入框的placeholder
notFoundContent: notFoundContent,// 未找到节点时的文案
body: body,// 数据节点渲染函数，优先级高于默认的渲染机制
footer: footer, // 单侧穿梭框底部渲染函数，返回reactNode
prefixCls: prefixCls + '-list',// 样式前缀
lazy: lazy// 实现数据节点的懒加载
}),
_react2["default"].createElement(_operation2["default"], {
rightActive: rightActive,// 右箭头是否可点击
rightArrowText: operations[0], // 右箭头文案
moveToRight: this.moveToRight, // 右箭头绑定函数
leftActive: leftActive,
leftArrowText: operations[1],
moveToLeft: this.moveToLeft,
className: prefixCls + '-operation'
}),
_react2["default"].createElement(_list2["default"], { titleText: titles[1], dataSource: rightDataSource, filter: rightFilter, filterOption: filterOption, style: listStyle, checkedKeys: targetSelectedKeys, handleFilter: this.handleRightFilter, handleClear: this.handleRightClear, handleSelect: this.handleRightSelect, handleSelectAll: this.handleRightSelectAll, render: render, showSearch: showSearch, searchPlaceholder: searchPlaceholder, notFoundContent: notFoundContent, body: body, footer: footer, prefixCls: prefixCls + '-list', lazy: lazy })
);
};
return Transfer;
}(_react2["default"].Component);
// For high-level customized Transfer @dqaria
exports["default"] = Transfer;
Transfer.List = _list2["default"];
Transfer.Operation = _operation2["default"];
Transfer.Search = _search2["default"];
Transfer.defaultProps = {
dataSource: [],
render: noop,
showSearch: false
};
Transfer.propTypes = {
prefixCls: _react.PropTypes.string,// 样式前缀，默认为'ant-transfer'
className: _react.PropTypes.string,// 穿梭框的自定义样式类
listStyle: _react.PropTypes.object,// 左右两侧穿梭框的样式
height: _react.PropTypes.number,// 穿梭框的高度
titles: _react.PropTypes.array,// 左右两侧穿梭框的标题
showSearch: _react.PropTypes.bool,// 是否显示输入框
searchPlaceholder: _react.PropTypes.string,// 输入框的placeholder
// 设定所有节点；某条节点数据的disabled属性置为true，该条数据将不在穿梭框中展示
// 数据格式为[{label,value,disabled}]，label为显示文本，value为同搜索框比对的值，disabled是否可被选中
dataSource: _react.PropTypes.array,
// 设定已移入右侧的节点；和dataSource一同决定了穿梭框左右两侧展示的数据节点
targetKeys: _react.PropTypes.array,
// 定义每条节点数据的key；rowKey未赋值，节点的key取节点数据的key
rowKey: _react.PropTypes.func,
// 用于渲染数据节点除复选框以外的部分；当render方法返回react节点的时候，需要设置filterOption比对文案
render: _react.PropTypes.func,
// filterOption(value,item)以搜索框的值决定数据节点的显隐，返回true显示
filterOption: _react.PropTypes.func,
// 设置{height,offset,throttle,debounce}实现滚动条情境下的懒加载？？？
lazy: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.bool])
operations: _react.PropTypes.array,// 操作文案集合
// onChange(newTargetKeys,direction,moveKeys) 节点移动时执行，传参为右侧节点、移动方向、移动节点的key
onChange: _react.PropTypes.func,
// onSelectChange(sourceSelectedKeys,targetSelectedKeys) 选中节点改变时执行，传参为左右两侧选中的节点
// 未曾有节点时的提示文案，关于实现
notFoundContent: _react.PropTypes.node,
// 数据节点渲染函数，返回reactNode；以单侧穿梭框获得的props为参数
// 为真值时，优先级高于默认的渲染机制
body: _react.PropTypes.func,
// 底部渲染函数，返回reactNode；以单侧穿梭框获得的props为参数
footer: _react.PropTypes.func,
};
Transfer.contextTypes = {
antLocale: _react.PropTypes.object
};
module.exports = exports['default'];
list.js单侧穿梭框
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = undefined;
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _rcAnimate = require('rc-animate');
var _rcAnimate2 = _interopRequireDefault(_rcAnimate);
var _PureRenderMixin = require('rc-util/lib/PureRenderMixin');
var _PureRenderMixin2 = _interopRequireDefault(_PureRenderMixin);
var _objectAssign = require('object-assign');
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _search = require('./search');
var _search2 = _interopRequireDefault(_search);
var _item = require('./item');
var _item2 = _interopRequireDefault(_item);
var _checkbox = require('../checkbox');
var _checkbox2 = _interopRequireDefault(_checkbox);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function noop() {}
var TransferList = function (_React$Component) {
(0, _inherits3["default"])(TransferList, _React$Component);
function TransferList(props) {
(0, _classCallCheck3["default"])(this, TransferList);
var _this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.call(this, props));
// 点击选中或撤销选中
_this.handleSelect = function (selectedItem) {
var checkedKeys = _this.props.checkedKeys;
// selectedItem不在选中的节点checkedKeys中，点击selectedItem节点置为选中；否则置为撤销选中
var result = checkedKeys.some(function (key) {
return key === selectedItem.key;
});
_this.props.handleSelect(selectedItem, !result);
};
// 搜索框值改变时执行函数
_this.handleFilter = function (e) {
_this.props.handleFilter(e);
};
// 搜索框值清空时执行函数
_this.handleClear = function () {
_this.props.handleClear();
};
_this.state = {
mounted: false
};
return _this;
}
TransferList.prototype.componentDidMount = function componentDidMount() {
var _this2 = this;
this.timer = setTimeout(function () {
_this2.setState({
mounted: true
});
}, 0);
};
TransferList.prototype.componentWillUnmount = function componentWillUnmount() {
clearTimeout(this.timer);
};
TransferList.prototype.shouldComponentUpdate = function shouldComponentUpdate() {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _PureRenderMixin2["default"].shouldComponentUpdate.apply(this, args);
};
// 获取单侧穿梭框节点选中状态，'none'、'all'或'part'
TransferList.prototype.getCheckStatus = function getCheckStatus(filteredDataSource) {
var checkedKeys = this.props.checkedKeys;
if (checkedKeys.length === 0) {
return 'none';
} else if (filteredDataSource.every(function (item) {
return checkedKeys.indexOf(item.key) >= 0;
})) {
return 'all';
}
return 'part';
};
TransferList.prototype.render = function render() {
var _this3 = this;
var _props = this.props,
prefixCls = _props.prefixCls,
dataSource = _props.dataSource,// 待展示的节点数据；某条数据disabled置为真，不展示
titleText = _props.titleText,// 标题
filter = _props.filter,// 搜索输入框的值
checkedKeys = _props.checkedKeys,// 选中节点的key值
lazy = _props.lazy,
filterOption = _props.filterOption,// filterOption(value,item)以搜索框的值决定数据节点的显隐
_props$body = _props.body,// 数据节点渲染函数
body = _props$body === undefined ? noop : _props$body,
_props$footer = _props.footer,// 底部渲染函数
footer = _props$footer === undefined ? noop : _props$footer,
showSearch = _props.showSearch,// 是否显示搜索框
_props$render = _props.render,// 单条数据节点的渲染函数
render = _props$render === undefined ? noop : _props$render,
style = _props.style;// 单侧穿梭框样式
var _props2 = this.props,
searchPlaceholder = _props2.searchPlaceholder,// 搜索框的placeholder
notFoundContent = _props2.notFoundContent;
// Custom Layout
var footerDom = footer((0, _objectAssign2["default"])({}, this.props));
var bodyDom = body((0, _objectAssign2["default"])({}, this.props));
var listCls = (0, _classnames2["default"])(prefixCls, (0, _defineProperty3["default"])({}, prefixCls + '-with-footer', !!footerDom));
// 绘制单条数据
// 若dataSource中节点数据，其disabled属性不为真，该条数据就推入filteredDataSource
// filteredDataSource为实际待展示的节点数据
var filteredDataSource = [];
var showItems = dataSource.map(function (item) {
if (!item.disabled) {
filteredDataSource.push(item);
}
var checked = checkedKeys.indexOf(item.key) >= 0;
return _react2["default"].createElement(_item2["default"], {
key: item.key,
item: item,
lazy: lazy,
render: render,
filter: filter,
filterOption: filterOption,
checked: checked,
prefixCls: prefixCls,
onClick: _this3.handleSelect
});
});
var unit = '';
var antLocale = this.context.antLocale;
if (antLocale && antLocale.Transfer) {
var transferLocale = antLocale.Transfer;
unit = dataSource.length > 1 ? transferLocale.itemsUnit : transferLocale.itemUnit;
searchPlaceholder = searchPlaceholder || transferLocale.searchPlaceholder;
notFoundContent = notFoundContent || transferLocale.notFoundContent;
}
// 绘制输入框并绑定函数
var search = showSearch ? _react2["default"].createElement(
'div',
{ className: prefixCls + '-body-search-wrapper' },
_react2["default"].createElement(_search2["default"], { prefixCls: prefixCls + '-search', onChange: this.handleFilter, handleClear: this.handleClear, placeholder: searchPlaceholder || 'Search', value: filter })
) : null;
// 绘制穿梭框内的节点数据；props.body有值时，优先级高于默认的渲染机制
var listBody = bodyDom || _react2["default"].createElement(
'div',
{ className: showSearch ? prefixCls + '-body ' + prefixCls + '-body-with-search' : prefixCls + '-body' },
search,
_react2["default"].createElement(
_rcAnimate2["default"],
{ component: 'ul', className: prefixCls + '-content', transitionName: this.state.mounted ? prefixCls + '-content-item-highlight' : '', transitionLeave: false },
showItems
),
_react2["default"].createElement(
'div',
{ className: prefixCls + '-body-not-found' },
notFoundContent || 'Not Found'
)
);
// 绘制穿梭框底部
var listFooter = footerDom ? _react2["default"].createElement(
'div',
{ className: prefixCls + '-footer' },
footerDom
) : null;
// 构造全选复选框，并绑定点击事件
// 实际待展示的节点数据filteredDataSource都在props.checkedKeys中，checkStatus为"all"；部分，"part"；无，"none"
var checkStatus = this.getCheckStatus(filteredDataSource);
var checkedAll = checkStatus === 'all';
var checkAllCheckbox = _react2["default"].createElement(_checkbox2["default"], { ref: 'checkbox', checked: checkedAll, indeterminate: checkStatus === 'part', onChange: function onChange() {
return _this3.props.handleSelectAll(filteredDataSource, checkedAll);
} });
return _react2["default"].createElement(
'div',
{ className: listCls, style: style },
_react2["default"].createElement(
'div',
{ className: prefixCls + '-header' },
checkAllCheckbox,
_react2["default"].createElement(
'span',
{ className: prefixCls + '-header-selected' },
_react2["default"].createElement(
'span',
null,
(checkedKeys.length > 0 ? checkedKeys.length + '/' : '') + dataSource.length,
' ',
unit
),
_react2["default"].createElement(
'span',
{ className: prefixCls + '-header-title' },
titleText
)
)
),
listBody,
listFooter
);
};
return TransferList;
}(_react2["default"].Component);
exports["default"] = TransferList;
TransferList.defaultProps = {
dataSource: [],
titleText: '',
showSearch: false,
render: noop,
lazy: {}
};
TransferList.contextTypes = {
antLocale: _react2["default"].PropTypes.object
};
module.exports = exports['default'];
item.js单条数据节点
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = undefined;
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _PureRenderMixin = require('rc-util/lib/PureRenderMixin');
var _PureRenderMixin2 = _interopRequireDefault(_PureRenderMixin);
var _objectAssign = require('object-assign');
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _reactLazyLoad = require('react-lazy-load');
var _reactLazyLoad2 = _interopRequireDefault(_reactLazyLoad);
var _checkbox = require('../checkbox');
var _checkbox2 = _interopRequireDefault(_checkbox);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function isRenderResultPlainObject(result) {
return result && !_react2["default"].isValidElement(result) && Object.prototype.toString.call(result) === '[object Object]';
}
var Item = function (_React$Component) {
(0, _inherits3["default"])(Item, _React$Component);
function Item() {
(0, _classCallCheck3["default"])(this, Item);
var _this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.apply(this, arguments));
// 单条数据节点的显示隐藏状况
_this.matchFilter = function (text) {
var _this$props = _this.props,
filter = _this$props.filter,
filterOption = _this$props.filterOption,
item = _this$props.item;
if (filterOption) {
return filterOption(filter, item);
}
return text.indexOf(filter) >= 0;
};
return _this;
}
Item.prototype.shouldComponentUpdate = function shouldComponentUpdate() {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _PureRenderMixin2["default"].shouldComponentUpdate.apply(this, args);
};
Item.prototype.render = function render() {
var _classNames;
var _props = this.props,
render = _props.render,// 渲染除复选框以外的部分
filter = _props.filter,// 搜索框的值
item = _props.item,// 节点数据
lazy = _props.lazy,
checked = _props.checked,// 是否选中
prefixCls = _props.prefixCls,
onClick = _props.onClick;
var renderResult = render(item);
var renderedText = void 0;// 节点的值；props.render返回不是reactElement情况下，取节点数据的value属性
var renderedEl = void 0;// 节点的待渲染元素；props.render返回不是reactElement情况下，取节点数据的label属性
if (isRenderResultPlainObject(renderResult)) {
renderedText = renderResult.value;
renderedEl = renderResult.label;
// 返回文本节点或reactElement，通过比对文本或设置props.filterOption方法控制节点的显示隐藏
} else {
renderedText = renderResult;
renderedEl = renderResult;
}
if (filter && filter.trim() && !this.matchFilter(renderedText)) {
return null;
}
var className = (0, _classnames2["default"])((_classNames = {}, (0, _defineProperty3["default"])(_classNames, prefixCls + '-content-item', true), (0, _defineProperty3["default"])(_classNames, prefixCls + '-content-item-disabled', item.disabled), _classNames));
var listItem = _react2["default"].createElement(
'li',
{ className: className, title: renderedText, onClick: item.disabled ? undefined : function () {
return onClick(item);
} },
_react2["default"].createElement(_checkbox2["default"], { checked: checked, disabled: item.disabled }),
_react2["default"].createElement(
'span',
null,
renderedEl
)
);
var children = null;
if (lazy) {
var lazyProps = (0, _objectAssign2["default"])({
height: 32,
offset: 500,
throttle: 0,
debounce: false
}, lazy);
children = _react2["default"].createElement(
_reactLazyLoad2["default"],
lazyProps,
listItem
);
} else {
children = listItem;
}
return children;
};
return Item;
}(_react2["default"].Component);
exports["default"] = Item;
module.exports = exports['default'];
search.js搜索框
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = undefined;
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _icon = require('../icon');
var _icon2 = _interopRequireDefault(_icon);
var _input = require('../input');
var _input2 = _interopRequireDefault(_input);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Search = function (_React$Component) {
(0, _inherits3["default"])(Search, _React$Component);
function Search() {
(0, _classCallCheck3["default"])(this, Search);
var _this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.apply(this, arguments));
_this.handleChange = function (e) {
var onChange = _this.props.onChange;
if (onChange) {
onChange(e);
}
};
_this.handleClear = function (e) {
e.preventDefault();
var handleClear = _this.props.handleClear;
if (handleClear) {
handleClear(e);
}
};
return _this;
}
Search.prototype.render = function render() {
var _props = this.props,
placeholder = _props.placeholder,
value = _props.value,
prefixCls = _props.prefixCls;
var icon = value && value.length > 0 ? _react2["default"].createElement(
'a',
{ href: '#', className: prefixCls + '-action', onClick: this.handleClear },
_react2["default"].createElement(_icon2["default"], { type: 'cross-circle' })
) : _react2["default"].createElement(
'span',
{ className: prefixCls + '-action' },
_react2["default"].createElement(_icon2["default"], { type: 'search' })
);
return _react2["default"].createElement(
'div',
null,
_react2["default"].createElement(_input2["default"], { placeholder: placeholder, className: prefixCls, value: value, ref: 'input', onChange: this.handleChange }),
icon
);
};
return Search;
}(_react2["default"].Component);
exports["default"] = Search;
Search.defaultProps = {
placeholder: ''
};
module.exports = exports['default'];
operation.js左右操作箭头
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = undefined;
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _button = require('../button');
var _button2 = _interopRequireDefault(_button);
var _icon = require('../icon');
var _icon2 = _interopRequireDefault(_icon);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function noop() {}
var TransferOperation = function (_React$Component) {
(0, _inherits3["default"])(TransferOperation, _React$Component);
function TransferOperation() {
(0, _classCallCheck3["default"])(this, TransferOperation);
return (0, _possibleConstructorReturn3["default"])(this, _React$Component.apply(this, arguments));
}
TransferOperation.prototype.render = function render() {
var _props = this.props,
moveToLeft = _props.moveToLeft,
moveToRight = _props.moveToRight,
leftArrowText = _props.leftArrowText,
rightArrowText = _props.rightArrowText,
leftActive = _props.leftActive,
rightActive = _props.rightActive,
className = _props.className;
var moveToLeftButton = _react2["default"].createElement(
_button2["default"],
{ type: 'primary', size: 'small', disabled: !leftActive, onClick: moveToLeft },
_react2["default"].createElement(
'span',
null,
_react2["default"].createElement(_icon2["default"], { type: 'left' }),
leftArrowText
)
);
var moveToRightButton = _react2["default"].createElement(
_button2["default"],
{ type: 'primary', size: 'small', disabled: !rightActive, onClick: moveToRight },
_react2["default"].createElement(
'span',
null,
rightArrowText,
_react2["default"].createElement(_icon2["default"], { type: 'right' })
)
);
return _react2["default"].createElement(
'div',
{ className: className },
moveToLeftButton,
moveToRightButton
);
};
return TransferOperation;
}(_react2["default"].Component);
exports["default"] = TransferOperation;
TransferOperation.defaultProps = {
leftArrowText: '',
rightArrowText: '',
moveToLeft: noop,
moveToRight: noop
};
module.exports = exports['default'];
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
