react-region-picker/lib/index.js

react hooks版本 城市地区联动

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("prop-types"),require("rc-toaster")):"function"==typeof define&&define.amd?define(["react","prop-types","rc-toaster"],t):"object"==typeof exports?exports.reactRegionPicker=t(require("react"),require("prop-types"),require("rc-toaster")):e.reactRegionPicker=t(e.React,e.PropTypes,e.RcToaster)}(window,(function(e,t,n){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){e.exports=n(5)},function(e,t,n){},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n.n(r),a=n(1),i=n.n(a),c=n(2),u=n.n(c);function l(e){var t=e.showListTab,n=e.showTabIndex,r=e.tempRegionList,a=e.tempSelectRegion,i=e.onSelectRegion,c=a[n-1];return o.a.createElement("ul",{className:"picker-list"+(t===n?" show":"")},r.map((function(e){return o.a.createElement("li",{className:c&&c.id===e.id?"selected":"",onClick:function(){i(e,n)},key:e.id},e.name)})))}l.propTypes={showListTab:i.a.number,showTabIndex:i.a.number,tempRegionList:i.a.array,tempSelectRegion:i.a.array,onSelectRegion:i.a.func};var s=l,f=["城市","区县"];function d(e){var t=e.tempSelectRegion,n=e.onSubmitPicker,r=e.onChangeTab;return o.a.createElement("div",{className:"w-picker-header"},o.a.createElement("div",{className:"picker-header_tab"},t.length?t.map((function(e,t){return o.a.createElement("div",{key:e.id,className:"choose-item"+(e.selected?" selected":""),onClick:function(){r(e,t)}},o.a.createElement("span",null,e.name))})):o.a.createElement("div",{className:"no-data"},"请选择"),t.length>0&&t.length<3&&o.a.createElement("div",{className:"choose-item selected"},f[t.length-1])),o.a.createElement("div",{onClick:n,className:"picker-header_right"},"确定"))}d.propTypes={tempSelectRegion:i.a.array,onSubmitPicker:i.a.func,onChangeTab:i.a.func};var p=d;n(4);function m(e){return function(e){if(Array.isArray(e))return h(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||y(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function b(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,a=void 0;try{for(var i,c=e[Symbol.iterator]();!(r=(i=c.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw a}}return n}(e,t)||y(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e,t){if(e){if("string"==typeof e)return h(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?h(e,t):void 0}}function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function g(e){var t=this,n=e.data,a=void 0===n?[]:n,i=e.regionList,c=void 0===i?[]:i,l=e.maskCanClose,f=void 0===l||l,d=e.isShowPicker,y=void 0!==d&&d,h=e.placeholder,g=void 0===h?"请选择城市":h,v=e.onFinish,S=e.onCancel,j=b(Object(r.useState)(y),2),w=j[0],k=j[1],R=b(Object(r.useState)([]),2),E=R[0],O=R[1],T=b(Object(r.useState)([]),2),x=T[0],N=T[1],L=b(Object(r.useState)([]),2),C=L[0],I=L[1],P=b(Object(r.useState)([]),2),A=P[0],_=P[1],q=b(Object(r.useState)([]),2),M=q[0],F=q[1],J=b(Object(r.useState)(a.length),2),U=J[0],$=J[1],z=b(Object(r.useState)(!1),2),B=(z[0],z[1]),D=b(Object(r.useState)(a.length||1),2),G=D[0],H=D[1];Object(r.useEffect)((function(){var e=Q(1);if(O(e),3===a.length){var t=Q(2,a),n=Q(3,a),r=[e.find((function(e){return e.id===a[0]})),t.find((function(e){return e.id===a[1]})),n.find((function(e){return e.id===a[2]}))].reduce((function(e,t,n){return e.push({selected:2===n,id:t.id,parentId:t.parentId,name:t.name}),e}),[]);N(t),I(n),B(!0),_(r),F(r)}}),[a]);var K=function(e){return"[object Array]"===Object.prototype.toString.call(e)},Q=function(e,t){if(1===e)return V(c);if(2===e){var n=K(t)?t[0]:t.id;return c.find((function(e){return n===e.id})).childRegionList||[]}if(3===e){var r=K(t)?t[0]:t.parentId,o=K(t)?t[1]:t.id;return c.find((function(e){return r==e.id})).childRegionList.find((function(e){return o===e.id})).childRegionList||[]||[]}},V=function(e){var t=JSON.parse(JSON.stringify(e));return console.log(t),t.map((function(e){return delete e.childRegionList,e}))},W=function(e,t){B(!1),1===t?(I([]),N(Q(2,e))):2===t?I(Q(3,e)):$(3),_((function(){var n=A;return n=(n=n.map((function(e){return e.selected=!1,e}))).slice(0,t-1),n=[].concat(m(n),[{selected:3===t,id:e.id,parentId:e.parentId,name:e.name}])})),t<3&&H(t+1)},X=function(){k(!w),"function"==typeof S&&S.call(t,A)},Y=function(){_([]),B(!1)},Z=o.a.createElement("span",{className:"placeholder"},g);return 3===M.length&&(Z=o.a.createElement("span",null,M.reduce((function(e,t){return e.push(t.name),e}),[]).join(","))),o.a.createElement("div",{className:"w-picker-container"},o.a.createElement("div",{onClick:function(){_(M),X()},className:"picker-region"},Z),o.a.createElement("div",{className:"w-picker-popup"+(w?" show":" hide")},o.a.createElement("div",{onClick:function(){Y(),f&&X()},className:"w-picker-mask"}),o.a.createElement("div",{className:"w-picker-body"},o.a.createElement(p,{tempSelectRegion:A,onSubmitPicker:function(){if(3!==A.length)return u.a.text("请完善城市信息");F(A),B(!0),_([]),k(!w),"function"==typeof S&&v.call(t,A)},onChangeTab:function(e,t){var n=A;0!==U&&(n[U-1].selected=!1),n[t].selected=!0,_(n),$(t+1),H(t+1)}}),o.a.createElement("div",{className:"w-picker"},o.a.createElement(s,{showListTab:G,showTabIndex:1,tempRegionList:E,tempSelectRegion:A,onSelectRegion:W}),o.a.createElement(s,{showListTab:G,showTabIndex:2,tempRegionList:x,tempSelectRegion:A,onSelectRegion:W}),o.a.createElement(s,{showListTab:G,showTabIndex:3,tempRegionList:C,tempSelectRegion:A,onSelectRegion:W})))))}g.propTypes={data:i.a.array,regionList:i.a.array.isRequired,maskCanClose:i.a.bool,isShowPicker:i.a.bool,placeholder:i.a.string,onFinish:i.a.func,onCancel:i.a.func};t.default=g}])}));