react-address-picker-cc-fork
Version:
775 lines (659 loc) • 28.4 kB
JavaScript
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = _interopDefault(require('react'));
var ReactDOM = _interopDefault(require('react-dom'));
var PropTypes = _interopDefault(require('prop-types'));
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css = ".rap-address-picker {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0);\n transition: background 0.2s;\n animation: zindexdown .3s forwards;\n border-radius: 3px 3px 0 0\n}\n\n.rap-address-picker-visible {\n animation: zindexup .3s forwards;\n background: rgba(0, 0, 0, .2);\n height: 100%;\n opacity: 1;\n overflow: hidden;\n}\n\n.rap-address-picker-modal {\n transition: transform 0.3s;\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n background: #fff;\n height: 70%;\n transform: translate3d(0, 100%, 0);\n display: flex;\n flex-direction: column;\n}\n\n.rap-address-picker-visible .rap-address-picker-modal {\n transform: translate3d(0, 0, 0);\n}\n\n.rap-address-picker-title {\n position: relative;\n font-size: 17px;\n padding-top: 10px;\n padding-bottom: 12px;\n margin-bottom: 6px;\n border-bottom: 1px solid #f7f8fa;\n color: #2f3742;\n text-align: center;\n -webkit-user-select: none;\n user-select: none\n}\n\n.rap-address-picker-title-close {\n position: absolute;\n right: 16px;\n top: 16px;\n width: 16px;\n height: 16px;\n cursor: pointer;\n}\n\n.rap-address-picker-title-close:before,\n.rap-address-picker-title-close:after {\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n top: 50%;\n left: 0;\n margin-top: 0px;\n background: #999;\n}\n\n.rap-address-picker-title-close:before {\n transform: rotate(45deg);\n}\n\n.rap-address-picker-title-close:after {\n transform: rotate(-45deg);\n}\n\n.rap-address-picker-main-wrap {\n width: 100%;\n height: 100%;\n display: -webkit-box;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n flex-direction: column;\n max-width: 768px;\n margin: 0 auto\n}\n\n.rap-address-picker-nav {\n -webkit-box-flex: 0;\n flex: none;\n position: relative\n}\n\n.rap-address-picker-nav-active {\n position: absolute;\n left: 0;\n bottom: 0;\n height: 1px;\n background: #2f5aff;\n -webkit-transition: left .3s ease-in;\n transition: left .3s ease-in;\n width: 50px\n}\n\n.rap-address-picker-nav-list {\n display: -webkit-box;\n display: flex\n}\n\n.rap-address-picker-nav-list:before {\n content: \"\";\n height: 1px;\n left: 20px;\n right: 20px;\n position: absolute;\n bottom: 0;\n background-color: #f7f8fa;\n -webkit-transform: scaleY(.5);\n -ms-transform: scaleY(.5);\n transform: scaleY(.5)\n}\n\n.rap-address-picker-nav-item {\n -webkit-box-flex: 0;\n flex: none;\n padding: 7px 0;\n text-align: center;\n font-size: 14px;\n color: #2f3742;\n margin-left: 20px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 7em;\n -webkit-user-select: none;\n user-select: none;\n position: relative;\n cursor: pointer\n}\n\n.rap-address-picker-nav-item:before {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 1px;\n background: rgba(0, 0, 0, 0)\n}\n\n.rap-address-picker-nav-item+.rap-address-picker-nav-item {\n margin-left: 36px\n}\n\n@media (max-width: 374px) {\n .rap-address-picker-nav-item+.rap-address-picker-nav-item {\n margin-left: 20px\n }\n}\n\n.rap-address-picker-nav-item.active {\n color: #2f5aff\n}\n\n.rap-address-picker-nav-item.active:before {\n background: #2f5aff\n}\n\n.rap-address-picker-body {\n -webkit-box-flex: 1;\n flex: auto;\n position: relative;\n overflow: hidden\n}\n\n.rap-address-picker-body-wrap {\n display: -webkit-box;\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n -webkit-transition-property: -webkit-transform;\n transition-property: -webkit-transform;\n transition-property: transform;\n transition-property: transform, -webkit-transform;\n -webkit-transition-duration: .3s;\n transition-duration: .3s;\n -webkit-transition-timing-function: ease-in-out;\n transition-timing-function: ease-in-out;\n will-change: transform;\n}\n\n.rap-address-picker-body-wrap ::-webkit-scrollbar {\n width: 6px;\n height: 8px;\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box\n}\n\n.rap-address-picker-body-wrap ::-webkit-scrollbar-button {\n width: 0;\n height: 0\n}\n\n.rap-address-picker-body-wrap ::-webkit-scrollbar-track {\n -webkit-border-radius: 8px\n}\n\n.rap-address-picker-body-wrap ::-webkit-scrollbar-thumb {\n background-color: rgba(70, 77, 92, .4);\n -webkit-border-radius: 5px\n}\n\n.rap-address-picker-body-wrap ::-webkit-scrollbar-thumb:active,\n.rap-address-picker-body-wrap ::-webkit-scrollbar-thumb:hover {\n background-color: #999\n}\n\n.rap-address-picker-body-wrap ::-webkit-scrollbar-corner {\n background-color: #f1f1f1;\n -webkit-border-radius: 1px\n}\n\n.rap-address-picker-body-wrap ::-webkit-scrollbar-track:hover {\n background-color: rgba(0, 0, 0, 0)\n}\n\n.rap-address-picker-body-list {\n font-size: 14px;\n position: relative;\n float: left;\n overflow-y: scroll;\n height: 100%;\n overflow-scrolling: touch;\n -webkit-overflow-scrolling: touch;\n padding: 7px 0;\n -webkit-box-flex: 1;\n flex: 1;\n box-sizing: border-box\n}\n\n.rap-address-picker-body-item {\n position: relative;\n padding: 13px 20px;\n line-height: 20px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n -webkit-user-select: none;\n user-select: none;\n color: #2f3742;\n cursor: pointer\n}\n\n.rap-address-picker-body-item.active {\n color: #2f5aff;\n background: #f7f8fa\n}\n\n.rap-address-picker-body-item.active:after {\n content: '';\n position: absolute;\n border-width: 0 2px 2px 0;\n border-style: solid;\n height: 13px;\n width: 5px;\n right: 25px;\n margin-top: 3px;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg)\n}\n\n@keyframes zindexdown {\n 0% {\n z-index: 10000;\n }\n\n to {\n z-index: -1;\n }\n}\n\n@keyframes zindexup {\n 0% {\n z-index: -1;\n }\n\n to {\n z-index: 10000;\n }\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n background: transparent;\n }\n\n 80% {\n opacity: .2;\n }\n\n to {\n opacity: 1;\n background: @activeColor;\n }\n}\n";
styleInject(css);
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var bind = createCommonjsModule(function (module) {
/*!
Copyright (c) 2017 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(this && this[arg] || arg);
} else if (Array.isArray(arg)) {
classes.push(classNames.apply(this, arg));
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(this && this[key] || key);
}
}
}
}
return classes.join(' ');
}
if (module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
}());
});
var asyncToGenerator = function (fn) {
return function () {
var gen = fn.apply(this, arguments);
return new Promise(function (resolve, reject) {
function step(key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
return Promise.resolve(value).then(function (value) {
step("next", value);
}, function (err) {
step("throw", err);
});
}
}
return step("next");
});
};
};
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 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 toConsumableArray = function (arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
} else {
return Array.from(arr);
}
};
var PICKER_CLASSNAME = 'rap-address-picker';
var cx = bind.bind(css);
var setTransform = function setTransform(nodeStyle, value) {
nodeStyle.transform = value;
nodeStyle.webkitTransform = value;
};
// 获取选中的选项
var getSelectedRows = function getSelectedRows(_ref) {
var selectedIdList = _ref.selectedIdList,
dataSource = _ref.dataSource;
var selectedRows = [];
if (selectedIdList && dataSource && selectedIdList.length) {
var loop = function loop(ds, level) {
var v = selectedIdList[level];
var rows = ds.filter(function (item) {
return item.id === v;
});
if (rows.length) {
selectedRows.push(rows[0]);
if (rows[0].subArea && rows[0].subArea.length && selectedIdList.length === level + 1) {
selectedRows.push({});
} else if (rows[0].subArea && rows[0].subArea.length) {
loop(rows[0].subArea, ++level);
}
}
};
loop(dataSource, 0);
}
if (!selectedRows.length) {
return {
currentLevel: 0,
selectedRows: [{}]
};
}
return {
currentLevel: selectedRows.length - 1,
selectedRows: selectedRows
};
};
var AddressPicker = function (_React$PureComponent) {
inherits(AddressPicker, _React$PureComponent);
function AddressPicker(props) {
classCallCheck(this, AddressPicker);
var _this = possibleConstructorReturn(this, (AddressPicker.__proto__ || Object.getPrototypeOf(AddressPicker)).call(this, props));
_initialiseProps.call(_this);
_this.PICKER_CLASSNAME = _this.PREFIX + 'rap-address-picker';
// 获取选中的选项
var _getSelectedRows = getSelectedRows(props),
currentLevel = _getSelectedRows.currentLevel,
selectedRows = _getSelectedRows.selectedRows;
_this.state = {
// 异步加载二级后，从props中获取一级的省id
asyncIdOneFromProps: 0,
selectedRows: selectedRows,
currentLevel: currentLevel,
show: false
};
return _this;
}
createClass(AddressPicker, [{
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.unBindEvent();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps, prevState) {
var _state = this.state,
show = _state.show,
asyncIdOneFromProps = _state.asyncIdOneFromProps;
// TODO
if (show && (prevState.currentLevel !== this.state.currentLevel || this.state.currentLevel === 1 && asyncIdOneFromProps > 0)) {
this.doAnimation();
}
}
// 当前高亮的导航项 居中
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _state2 = this.state,
selectedRows = _state2.selectedRows,
show = _state2.show,
currentLevel = _state2.currentLevel;
var _props = this.props,
dataSource = _props.dataSource,
navTips = _props.navTips,
title = _props.title,
className = _props.className,
onClose = _props.onClose;
// 这一条是不是不太好
var wrapStyles = {
width: selectedRows.length * 100 + '%'
};
if (selectedRows.length === 1) {
wrapStyles.transform = 'translate3d(0, 0, 0)';
} else if (currentLevel > 0) {
wrapStyles.transform = 'translate3d(-' + currentLevel / selectedRows.length * 100 + '%, 0, 0)';
}
var node = React.createElement(
'div',
{
className: cx(PICKER_CLASSNAME + ' ' + className, defineProperty({}, PICKER_CLASSNAME + '-visible', show))
},
React.createElement(
'div',
{ className: PICKER_CLASSNAME + '-modal' },
React.createElement(
'div',
{
className: PICKER_CLASSNAME + '-main-wrap',
ref: function ref(w) {
return _this2.mainWrapRef = w;
}
},
React.createElement(
'div',
{ className: PICKER_CLASSNAME + '-title', onClick: onClose },
title,
React.createElement('div', { className: PICKER_CLASSNAME + '-title-close' })
),
React.createElement(
'div',
{ className: PICKER_CLASSNAME + '-nav' },
React.createElement(
'div',
{
className: PICKER_CLASSNAME + '-nav-list',
ref: function ref(nav) {
return _this2.nav = nav;
},
onTouchMove: this.onNavBarMove
},
selectedRows.map(function (item, index) {
return React.createElement(
'div',
{
key: index,
onClick: _this2.onSelectedNav(index),
id: 'nav-item-' + index,
className: PICKER_CLASSNAME + '-nav-item'
},
item.id ? item.areaName : navTips
);
})
),
React.createElement('span', {
className: PICKER_CLASSNAME + '-nav-active',
ref: function ref(navline) {
return _this2.navLineRef = navline;
}
})
),
React.createElement(
'div',
{ className: PICKER_CLASSNAME + '-body' },
React.createElement(
'div',
{
className: PICKER_CLASSNAME + '-body-wrap',
ref: function ref(wrap) {
return _this2.listWrapRef = wrap;
},
style: wrapStyles
},
selectedRows.map(function (item, index) {
return _this2.renderNextData(dataSource, index);
})
)
)
)
)
);
return ReactDOM.createPortal(node, document.body);
}
}], [{
key: 'getDerivedStateFromProps',
value: function getDerivedStateFromProps(nextProps, prevState) {
var asyncIdOne = nextProps.asyncIdOne,
selectedIdList = nextProps.selectedIdList,
dataSource = nextProps.dataSource,
isAsyncData = nextProps.isAsyncData;
var asyncIdOneFromProps = prevState.asyncIdOneFromProps,
prevSelectedRows = prevState.selectedRows;
// 初始化数据
if (selectedIdList.length >= 1 && dataSource.length && prevSelectedRows[0] && !prevSelectedRows[0].id) {
var oneId = selectedIdList[0];
var rows = dataSource.filter(function (item) {
return item.id === oneId;
});
if (rows.length && rows[0].subArea && rows[0].subArea.length) {
var _getSelectedRows2 = getSelectedRows(nextProps),
selectedRows = _getSelectedRows2.selectedRows,
currentLevel = _getSelectedRows2.currentLevel;
return {
currentLevel: currentLevel,
selectedRows: selectedRows
};
}
} else if (isAsyncData && asyncIdOne > 0 && asyncIdOneFromProps !== asyncIdOne) {
// 异步加载数据后
var _getSelectedRows3 = getSelectedRows({
selectedIdList: [asyncIdOne],
dataSource: nextProps.dataSource
}),
_selectedRows = _getSelectedRows3.selectedRows;
return {
asyncIdOneFromProps: asyncIdOne,
selectedRows: _selectedRows
};
}
return null;
}
}]);
return AddressPicker;
}(React.PureComponent);
var _initialiseProps = function _initialiseProps() {
var _this3 = this;
this.touch = {};
this.pickerStatusChange = function (show) {
if (show) {
_this3.doAnimation();
_this3.bindEvent();
}
_this3.props.pickerStatusChange(show);
};
this.show = function () {
_this3.setState({
show: true
}, function () {
return _this3.pickerStatusChange(_this3.state.show);
});
};
this.hide = function () {
_this3.setState({
// 关掉后重置数据
selectedRows: [{}],
currentLevel: 0,
show: false
}, function () {
return _this3.pickerStatusChange(_this3.state.show);
});
};
this.onTouchStart = function (e) {
_this3.touch.startX = e.touches[0].clientX;
_this3.touch.startY = e.touches[0].clientY;
_this3.touch.moved = false;
};
this.onTouchMove = function (e) {
var _state3 = _this3.state,
currentLevel = _state3.currentLevel,
selectedRows = _state3.selectedRows;
var moveX = e.touches[0].clientX;
var moveY = e.touches[0].clientY;
var deltaX = moveX - _this3.touch.startX;
var deltaY = moveY - _this3.touch.startY;
if (Math.abs(deltaY) > Math.abs(deltaX)) return;
var mainWrapRef = _this3.mainWrapRef;
if (!mainWrapRef) return;
var innerWidth = mainWrapRef.offsetWidth;
var curOffsetWidth = -(currentLevel * innerWidth);
var maxOffsetWidth = -((selectedRows.length - 1) * innerWidth);
var offsetWidth = Math.min(0, Math.max(maxOffsetWidth, curOffsetWidth + deltaX));
if (offsetWidth >= 0 || offsetWidth <= maxOffsetWidth) return;
if (!_this3.touch.moved) _this3.touch.moved = true;
e.preventDefault();
setTransform(_this3.listWrapRef.style, 'translate3d(' + offsetWidth + 'px, 0, 0)');
var percent = Math.abs(deltaX / innerWidth);
_this3.touch.targetIdx = percent >= 0.1 ? deltaX < 0 ? currentLevel + 1 : currentLevel - 1 : currentLevel;
};
this.onTouchEnd = function () {
var currentLevel = _this3.state.currentLevel;
if (!_this3.touch.moved) return;
var mainWrapRef = _this3.mainWrapRef;
if (!mainWrapRef) return;
var innerWidth = mainWrapRef.offsetWidth;
if (_this3.touch.targetIdx !== currentLevel) {
_this3.setState({
currentLevel: _this3.touch.targetIdx
});
} else {
// 没有移动到别的级别，就返回当前
setTransform(_this3.listWrapRef.style, 'translate3d(-' + currentLevel * innerWidth + 'px, 0, 0)');
}
};
this.bindEvent = function () {
var wrap = _this3.listWrapRef;
if (wrap) {
wrap.addEventListener('touchstart', _this3.onTouchStart, false);
wrap.addEventListener('touchmove', _this3.onTouchMove, false);
wrap.addEventListener('touchend', _this3.onTouchEnd, false);
}
};
this.unBindEvent = function () {
var wrap = _this3.listWrapRef;
if (wrap) {
wrap.removeEventListener('touchstart', _this3.onTouchStart, false);
wrap.removeEventListener('touchmove', _this3.onTouchMove, false);
wrap.removeEventListener('touchend', _this3.onTouchEnd, false);
}
};
this.doAnimation = function () {
var currentLevel = _this3.state.currentLevel;
_this3.setItemCenter();
var navItem = _this3.nav.children[currentLevel];
// TODO 写法
if (navItem && !navItem.classList.contains('active')) {
_this3.navLineRef.style.width = navItem.offsetWidth + 'px';
_this3.navLineRef.style.left = navItem.offsetLeft + 'px';
_this3.navLineRef.style.bottom = _this3.nav.clientHeight - (navItem.offsetTop + navItem.offsetHeight) + 'px';
// TODO 这一条可以避开？
var activeItem = document.querySelector('.' + PICKER_CLASSNAME + '-nav-item.active');
if (activeItem) {
activeItem.classList.remove('active');
}
setTimeout(function () {
var _toActiItem = document.querySelector('#nav-item-' + currentLevel);
_toActiItem && _toActiItem.classList.add('active');
}, 300);
}
};
this.setItemCenter = function () {
var listWrapRef = _this3.listWrapRef;
var listWrapChilds = listWrapRef.children;
var selectedRows = _this3.state.selectedRows;
selectedRows.forEach(function (row, rowIndex) {
// TODO 判断不需要居中的？？？
var listElm = listWrapChilds[rowIndex];
if (!listElm) return;
// 当没有下级或者下级的总高度没有超过父级高度，都pass
if (!listElm.children.length || listElm.children.length * 40 < listElm.offsetHeight) {
return;
}
if (!row.id) {
// 当未选择时，应该滚到顶部
listElm.scrollTop = 0;
return;
}
// 滚到中间
var activeItem = listElm.querySelector('.' + PICKER_CLASSNAME + '-body-item.active');
if (!activeItem) return;
var listElmHeight = listElm.offsetHeight;
var elmHeight = activeItem.offsetHeight;
var dataY = activeItem.offsetTop;
var scrollY = dataY - listElmHeight / 2 + elmHeight - 10;
listElm.scrollTop = scrollY;
});
};
this.onSelectedRow = function (item, level) {
return asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var currentLevel, selectedRows, isAsyncData, isEnd, _selectedRows2, args, _selectList;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
currentLevel = _this3.state.currentLevel;
selectedRows = _this3.state.selectedRows;
isAsyncData = _this3.props.isAsyncData;
// 大于一级才可以没有下级
isEnd = (level || !isAsyncData) && (!item.subArea || !item.subArea.length);
if (!selectedRows[level]) {
_context.next = 12;
break;
}
args = [level, 1, item];
if (!(isAsyncData && level === 0 && item.subArea)) {
_context.next = 9;
break;
}
_context.next = 9;
return _this3.props.getOneLevelData(item, level);
case 9:
if (item.subArea && item.subArea.length && currentLevel + 1 >= selectedRows.length) {
args.push({});
} else if (currentLevel + 1 < selectedRows.length) {
selectedRows = selectedRows.slice(0, currentLevel + 1);
args.push({});
}
(_selectedRows2 = selectedRows).splice.apply(_selectedRows2, args);
_this3.setState({
selectedRows: [].concat(toConsumableArray(selectedRows)),
currentLevel: isEnd ? level : level + 1
}, function () {
isEnd && _this3.hide();
});
case 12:
if (isEnd) {
_selectList = selectedRows.filter(function (_item) {
return typeof _item.id !== 'undefined';
}).map(function (_item) {
return {
id: _item.id,
areaName: _item.areaName
};
});
_this3.props.onAddressChange(_selectList);
}
case 13:
case 'end':
return _context.stop();
}
}
}, _callee, _this3);
}));
};
this.onSelectedNav = function (level) {
return function () {
_this3.setState({
currentLevel: level
});
};
};
this.onNavBarMove = function () {
_this3.navLineRef.style.width = 0;
};
this.renderNextData = function (ds) {
var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var selectedRows = _this3.state.selectedRows;
var row = selectedRows[level] || {};
var lists = level > 0 ? selectedRows[level - 1].subArea : ds;
if (!lists || !lists.length) {
return null;
}
return React.createElement(
'div',
{ key: level, className: PICKER_CLASSNAME + '-body-list' },
lists.map(function (item) {
return React.createElement(
'div',
{
key: item.id,
className: cx(PICKER_CLASSNAME + '-body-item', {
active: row.id === item.id
}),
onClick: _this3.onSelectedRow(item, level)
},
item.areaName
);
})
);
};
};
AddressPicker.propTypes = {
/**
* 数据源，多维数组
*/
dataSource: PropTypes.array.isRequired,
/**
* 自定义组件标题
*/
title: PropTypes.node,
/**
* 自定义 ClassName
*/
className: PropTypes.string,
/**
* 自定义 关闭方法
*/
onClose: PropTypes.func,
/**
* 地址导航提示文字
*/
navTips: PropTypes.string,
/**
* 初始化地址的id数组
*/
selectedIdList: PropTypes.array,
/**
* 是否异步获取数据
*/
isAsyncData: PropTypes.bool,
/**
* 异步数据返回的一级id
*/
asyncIdOne: PropTypes.number,
/**
* 初始化地址的id数组
*/
getOneLevelData: PropTypes.func,
/**
* 初始化地址的id数组
*/
onAddressChange: PropTypes.func,
/**
* pickerStatusChange
*/
pickerStatusChange: PropTypes.func
};
AddressPicker.defaultProps = {
navTips: '请选择',
title: '选择地址',
className: '',
isAsyncData: false,
asyncIdOne: 0,
selectedIdList: [],
onClose: function onClose() {},
getOneLevelData: function getOneLevelData() {},
pickerStatusChange: function pickerStatusChange() {},
onAddressChange: function onAddressChange() {}
};
module.exports = AddressPicker;
//# sourceMappingURL=index.js.map