react-address-picker-cc
Version:
仿京东移动端地址选择组件 mobile/pc address picker component
537 lines (511 loc) • 29 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var ReactDOM = require('react-dom');
var PropTypes = require('prop-types');
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
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 = ":root {\n --rap-dialog-bg: #fff;\n --rap-dialog-one-text:#2f3742;\n --rap-dialog-one-active:#2f5aff;\n --rap-dialog-one-bg-active: #f7f8fa;\n}\n\n\n.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 animation: zindexdown .3s forwards;\n border-radius: 3px 3px 0 0;\n -webkit-text-size-adjust: none;\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 background: var(--rap-dialog-bg);\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.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 border-bottom: 1px solid var(--rap-dialog-one-bg-active);\n color: #2f3742;\n color: var(--rap-dialog-one-text);\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.rap-address-picker-title-close:before, .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.rap-address-picker-title-close:before {\n transform: rotate(45deg);\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 background: var(--rap-dialog-one-active);\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 background-color: var(--rap-dialog-one-bg-active);\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 color: var(--rap-dialog-one-text);\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 color: var(--rap-dialog-one-active);\n}\n\n.rap-address-picker-nav-item.active:before {\n background: #2f5aff;\n background: var(--rap-dialog-one-active);\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,.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 color: var(--rap-dialog-one-text);\n cursor: pointer\n}\n\n.rap-address-picker-body-item.active {\n color: #2f5aff;\n color: var(--rap-dialog-one-active);\n background: #f7f8fa;\n background: var(--rap-dialog-one-bg-active);\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: 999;\n }\n to {\n z-index: -1;\n }\n}\n\n@keyframes zindexup {\n 0% {\n z-index: -1;\n }\n to {\n z-index: 999;\n }\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n background: transparent;\n }\n 80% {\n opacity: .2;\n }\n to {\n opacity: 1;\n background: #2f5aff;\n background: var(--rap-dialog-one-active);\n }\n}\n\n\n.rap-address-picker.theme-dark {\n --rap-dialog-bg: #0E1226;\n --rap-dialog-one-text: #ffffff;\n --rap-dialog-one-bg-active: rgba(255,255,255,.06);\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 PICKER_CLASSNAME = 'rap-address-picker';
function guid() {
return 'xxx'.replace(/[x]/g, function (c) {
var r = Math.random() * 16 | 0;
var v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
var cx = bind.bind(css);
var getSelectedRows = function (_a) {
var selectedIdList = _a.selectedIdList, dataSource = _a.dataSource;
var selectedRows = [];
if (selectedIdList && dataSource && selectedIdList.length) {
var loop_1 = function (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_1(rows[0].subArea, ++level);
}
}
};
loop_1(dataSource, 0);
}
if (!selectedRows.length) {
return {
currentLevel: 0,
selectedRows: [{}]
};
}
return {
currentLevel: selectedRows.length - 1,
selectedRows: selectedRows
};
};
var AddressPicker = /** @class */ (function (_super) {
__extends(AddressPicker, _super);
function AddressPicker(props) {
var _this = _super.call(this, props) || this;
_this.idUUid = guid();
_this.touch = {
startX: -1,
startY: -1,
moved: false,
targetIdx: -1
};
// TODO 这里要不要改一下？
_this.pickerStatusChange = function (show) {
if (show) {
_this.doAnimation();
_this.bindEvent();
}
_this.props.pickerStatusChange(show);
};
/**
* 外部调用，显示事件
*
* @memberof AddressPicker
*/
_this.show = function () {
_this.setState({
show: true
}, function () { return _this.pickerStatusChange(_this.state.show); });
};
/**
* 外部调用，显示事件
*
* @memberof AddressPicker
*/
_this.hide = function () {
_this.setState({
// 关掉后重置数据
selectedRows: [{}],
currentLevel: -1,
show: false
}, function () { return _this.pickerStatusChange(_this.state.show); });
};
// TODO 目标是使用Ref外部调用
_this.changeInnerState = function () {
var _a = _this.props, selectedIdList = _a.selectedIdList, dataSource = _a.dataSource;
var selectedRows = _this.state.selectedRows;
// TODO 这里要不要改一下？
// 显示前，看selectedRows是否为空
if (selectedIdList.length >= 1 && dataSource.length && selectedRows[0] && (!selectedRows[0].id)) {
var oneId_1 = selectedIdList[0];
var rows = dataSource.filter(function (item) { return item.id === oneId_1; });
if (rows) {
var _b = getSelectedRows({
selectedIdList: selectedIdList,
dataSource: dataSource
}), selectedRows_1 = _b.selectedRows, currentLevel = _b.currentLevel;
_this.setState({
currentLevel: currentLevel,
selectedRows: selectedRows_1
});
}
}
};
_this.onTouchStart = function (e) {
_this.touch.startX = e.touches[0].clientX;
_this.touch.startY = e.touches[0].clientY;
_this.touch.moved = false;
};
_this.onTouchMove = function (e) {
var _a = _this.state, currentLevel = _a.currentLevel, selectedRows = _a.selectedRows;
var moveX = e.touches[0].clientX;
var moveY = e.touches[0].clientY;
var deltaX = moveX - (_this.touch.startX || 0);
var deltaY = moveY - (_this.touch.startY || 0);
if (Math.abs(deltaY) > Math.abs(deltaX))
return;
var mainWrapRef = _this.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 (!_this.touch.moved)
_this.touch.moved = true;
e.preventDefault();
_this.listWrapRef.style.transform = "translate3d(" + offsetWidth + "px, 0, 0)";
var percent = Math.abs(deltaX / innerWidth);
_this.touch.targetIdx =
percent >= 0.1
? (deltaX < 0 ? currentLevel + 1 : currentLevel - 1)
: currentLevel;
};
_this.onTouchEnd = function () {
var currentLevel = _this.state.currentLevel;
if (!_this.touch.moved)
return;
var mainWrapRef = _this.mainWrapRef;
if (!mainWrapRef)
return;
var innerWidth = mainWrapRef.offsetWidth;
if (_this.touch.targetIdx !== currentLevel) {
_this.setState({
currentLevel: _this.touch.targetIdx || 0
});
}
else {
// 没有移动到别的级别，就返回当前
_this.listWrapRef.style.transform = "translate3d(-" + (currentLevel) * innerWidth + "px, 0, 0)";
}
};
_this.bindEvent = function () {
var wrap = _this.listWrapRef;
if (wrap) {
wrap.addEventListener('touchstart', _this.onTouchStart, false);
wrap.addEventListener('touchmove', _this.onTouchMove, false);
wrap.addEventListener('touchend', _this.onTouchEnd, false);
}
};
_this.unBindEvent = function () {
var wrap = _this.listWrapRef;
if (wrap) {
wrap.removeEventListener('touchstart', _this.onTouchStart, false);
wrap.removeEventListener('touchmove', _this.onTouchMove, false);
wrap.removeEventListener('touchend', _this.onTouchEnd, false);
}
};
_this.doAnimation = function () {
var currentLevel = _this.state.currentLevel;
_this.setItemCenter();
var navItem = _this.navRef.children[currentLevel];
if (navItem) {
_this.navLineRef.style.width = navItem.offsetWidth + "px";
_this.navLineRef.style.left = navItem.offsetLeft + "px";
_this.navLineRef.style.bottom = _this.navRef.clientHeight - (navItem.offsetTop + navItem.offsetHeight) + "px";
var activeItem = document.querySelector("." + PICKER_CLASSNAME + "-nav-item.active");
if (activeItem) {
activeItem.classList.remove('active');
}
setTimeout(function () {
var _toActiItem = document.querySelector("#nav-item-" + _this.idUUid + "-" + currentLevel);
_toActiItem && _toActiItem.classList.add('active');
}, 300);
}
};
// 当前高亮的导航项 居中
_this.setItemCenter = function () {
var listWrapRef = _this.listWrapRef;
var listWrapChilds = listWrapRef.children;
var selectedRows = _this.state.selectedRows;
selectedRows.forEach(function (row, rowIndex) {
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.getOneLevelData = function (item, level) {
_this.props.getOneLevelData(item, level).then(function (_a) {
var dataSource = _a.dataSource;
// 异步加载数据后
var selectedRows = getSelectedRows({
selectedIdList: item.id ? [item.id] : [],
dataSource: dataSource
}).selectedRows;
_this.setState({
selectedRows: selectedRows
}, function () {
_this.doAnimation();
});
}).catch(function (error) { return console.log('error :', error); });
};
_this.onSelectedRow = function (item, level) { return function () {
var currentLevel = _this.state.currentLevel;
var selectedRows = _this.state.selectedRows;
var isAsyncData = _this.props.isAsyncData;
// 大于一级才可以没有下级
var isEnd = (level || !isAsyncData) && (!item.subArea || !item.subArea.length);
if (selectedRows[level]) {
// 用于下方选择的数据和空项目
var tmpItem = [item];
if (isAsyncData && level === 0 && item.subArea && !item.subArea.length) {
_this.getOneLevelData(item, level);
}
if (item.subArea && item.subArea.length && currentLevel + 1 >= selectedRows.length) {
tmpItem.push({});
}
else if (currentLevel + 1 < selectedRows.length) {
selectedRows = selectedRows.slice(0, currentLevel + 1);
tmpItem.push({});
}
selectedRows.splice.apply(selectedRows, [level, 1].concat(tmpItem));
_this.setState({
selectedRows: selectedRows.slice(),
currentLevel: isEnd ? level : level + 1
}, function () {
isEnd && _this.hide();
});
}
if (isEnd) {
var _selectList = selectedRows.filter(function (_item) { return typeof _item.id !== 'undefined'; }).map(function (_item) {
return {
id: _item.id,
areaName: _item.areaName
};
});
_this.props.onAddressChange(_selectList);
}
}; };
_this.onSelectedNav = function (level) { return function () {
_this.setState({
currentLevel: level
});
}; };
_this.onNavBarMove = function () {
_this.navLineRef.style.width = 0;
};
_this.renderNextData = function (ds, level, item) {
if (level === void 0) { level = 0; }
var selectedRows = _this.state.selectedRows;
var row = selectedRows[level] || {};
var lists = item && 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: _this.onSelectedRow(item, level) }, item.areaName)); })));
};
// 获取选中的选项
var _a = getSelectedRows(props), currentLevel = _a.currentLevel, selectedRows = _a.selectedRows;
_this.state = {
selectedRows: selectedRows,
currentLevel: currentLevel,
show: false
};
return _this;
}
AddressPicker.getDerivedStateFromProps = function (nextProps, prevState) {
var selectedIdList = nextProps.selectedIdList, dataSource = nextProps.dataSource;
var prevSelectedRows = prevState.selectedRows, show = prevState.show;
// 初始化数据，需要外界获取好市级数据
// 从关闭到打开，每次都要重新获取一遍数据，为了保证准确，也为了防止外界强行更换了数据
if (!show && selectedIdList.length >= 1 && dataSource.length && prevSelectedRows[0] && (!prevSelectedRows[0].id)) {
var oneId_2 = selectedIdList[0];
var rows = dataSource.filter(function (item) { return item.id === oneId_2; });
if (rows) {
var _a = getSelectedRows(nextProps), selectedRows = _a.selectedRows, currentLevel = _a.currentLevel;
return {
currentLevel: currentLevel,
selectedRows: selectedRows
};
}
}
return null;
};
AddressPicker.prototype.componentWillUnmount = function () {
this.unBindEvent();
};
AddressPicker.prototype.componentDidUpdate = function (prevProps, prevState) {
var _this = this;
var show = this.state.show;
// 更换层级时执行
if (show && prevProps && prevState.currentLevel !== this.state.currentLevel) {
setTimeout(function () {
_this.doAnimation();
});
}
};
AddressPicker.prototype.render = function () {
var _this = this;
var _a;
var _b = this.state, selectedRows = _b.selectedRows, show = _b.show, currentLevel = _b.currentLevel;
var _c = this.props, dataSource = _c.dataSource, navTips = _c.navTips, title = _c.title, className = _c.className, theme = _c.theme, onClose = _c.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 + " " + theme, (_a = {}, _a[PICKER_CLASSNAME + "-visible"] = show, _a)) },
React.createElement("div", { className: PICKER_CLASSNAME + "-modal" },
React.createElement("div", { className: PICKER_CLASSNAME + "-main-wrap", ref: function (w) { return (_this.mainWrapRef = w); } },
React.createElement("div", { className: PICKER_CLASSNAME + "-title" },
title,
React.createElement("div", { className: PICKER_CLASSNAME + "-title-close", onClick: onClose })),
React.createElement("div", { className: PICKER_CLASSNAME + "-nav" },
React.createElement("div", { className: PICKER_CLASSNAME + "-nav-list", ref: function (nav) { return (_this.navRef = nav); }, onTouchMove: this.onNavBarMove }, selectedRows.map(function (item, index) { return (React.createElement("div", { key: index, onClick: _this.onSelectedNav(index), id: "nav-item-" + _this.idUUid + "-" + index, className: PICKER_CLASSNAME + "-nav-item" }, item.id ? item.areaName : navTips)); })),
React.createElement("span", { className: PICKER_CLASSNAME + "-nav-active", ref: function (navline) { return (_this.navLineRef = navline); } })),
React.createElement("div", { className: PICKER_CLASSNAME + "-body" },
React.createElement("div", { className: PICKER_CLASSNAME + "-body-wrap", ref: function (wrap) { return (_this.listWrapRef = wrap); }, style: wrapStyles }, selectedRows.map(function (item, index) { return _this.renderNextData(dataSource, index, item); })))))));
return ReactDOM.createPortal(node, document.body);
};
return AddressPicker;
}(React.Component));
AddressPicker.propTypes = {
/**
* 数据源，多维数组
*/
dataSource: PropTypes.array.isRequired,
/**
* 自定义组件标题
*/
title: PropTypes.node,
/**
* 自定义 ClassName
*/
className: PropTypes.string,
/**
* 主题
*/
theme: PropTypes.string,
/**
* 自定义样式
*/
customStyle: PropTypes.object,
/**
* 地址导航提示文字
*/
navTips: PropTypes.string,
/**
* 初始化地址的id数组
*/
selectedIdList: PropTypes.array,
/**
* 是否异步获取数据
*/
isAsyncData: PropTypes.bool,
/**
* 自定义 关闭方法
*/
onClose: function () { },
/**
* 初始化地址的id数组
*/
getOneLevelData: function () { },
/**
* 初始化地址的id数组
*/
onAddressChange: function () { },
/**
* pickerStatusChange
*/
pickerStatusChange: function () { }
};
AddressPicker.defaultProps = {
dataSource: [],
navTips: '请选择',
title: '选择地址',
className: '',
theme: '',
isAsyncData: false,
selectedIdList: [],
onClose: function () { },
getOneLevelData: function () { },
pickerStatusChange: function () { },
onAddressChange: function () { }
};
exports.default = AddressPicker;
//# sourceMappingURL=index.js.map