UNPKG

@livelybone/react-query-list

Version:

A component of React for query list, includes pagination

10 lines (8 loc) 17.2 kB
/** * Bundle of @livelybone/react-query-list * Generated: 2020-07-27 * Version: 1.2.1 * License: MIT * Author: 2631541504@qq.com */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e=e||self).ReactQueryList=t(e.React)}(this,function(i){"use strict";var p="default"in i?i.default:i;function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(t,e){var n,r=Object.keys(t);return Object.getOwnPropertySymbols&&(n=Object.getOwnPropertySymbols(t),e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,n)),r}function c(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?r(Object(n),!0).forEach(function(e){a(t,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function m(e){return(m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function y(i){return function(){var e,t,n,r,o=f(i);return t=function(){if("undefined"!=typeof Reflect&&Reflect.construct&&!Reflect.construct.sham){if("function"==typeof Proxy)return 1;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),1}catch(e){return}}}()?(e=f(this).constructor,Reflect.construct(o,arguments,e)):o.apply(this,arguments),n=this,!(r=t)||"object"!==m(r)&&"function"!=typeof r?s(n):r}}function g(e,t){if(null==e)return{};var n,r=function(e,t){if(null==e)return{};for(var n,r={},o=Object.keys(e),i=0;i<o.length;i++)n=o[i],0<=t.indexOf(n)||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols)for(var o=Object.getOwnPropertySymbols(e),i=0;i<o.length;i++)n=o[i],0<=t.indexOf(n)||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n]);return r}function t(t,e){var n,r=Object.keys(t);return Object.getOwnPropertySymbols&&(n=Object.getOwnPropertySymbols(t),e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,n)),r}function b(o){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?t(Object(i),!0).forEach(function(e){var t,n,r;t=o,r=i[n=e],n in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(i)):t(Object(i)).forEach(function(e){Object.defineProperty(o,e,Object.getOwnPropertyDescriptor(i,e))})}return o}function o(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function h(e,t){return(h=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function d(e){return(d=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function v(e,t){return!t||"object"!==n(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function P(n){return function(){var e,t=d(n);return v(this,function(){if("undefined"!=typeof Reflect&&Reflect.construct&&!Reflect.construct.sham){if("function"==typeof Proxy)return 1;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),1}catch(e){return}}}()?(e=d(this).constructor,Reflect.construct(t,arguments,e)):t.apply(this,arguments))}}var O=function(){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&h(e,t)}(i,p.Component);var e,t,n,r=P(i);function i(){var o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return(o=r.call.apply(r,[this].concat(t))).isCompositionUpdate=!1,o.inputEl=void 0,o.onComposition=function(e,t){t.stopPropagation();var n,r=o.props[e];r&&r(t),o.isCompositionUpdate="onCompositionEnd"!==e,o.isCompositionUpdate||(n=b({},t),setTimeout(function(){o.onChange(n)}))},o.onChange=function(e){o.props.onChange&&o.shouldCallChange&&o.props.onChange(e)},o}return e=i,(t=[{key:"componentDidUpdate",value:function(){this.shouldCallChange&&this.inputEl&&void 0!==this.props.value&&(this.inputEl.value=this.props.value)}},{key:"componentDidMount",value:function(){this.shouldCallChange&&this.inputEl&&this.props.value&&(this.inputEl.value=this.props.value)}},{key:"render",value:function(){var e=this.$props,t=this.props.type||"text";return"textarea"!==t?p.createElement("input",Object.assign({},e,{type:t})):p.createElement("textarea",e)}},{key:"$props",get:function(){var t=this,e=this.props,n=e.value,r=e.type,o=e.autoComplete;e.shouldCompositionEventTriggerChangeEvent;return b({},g(e,["value","type","autoComplete","shouldCompositionEventTriggerChangeEvent"]),{value:void 0,autoComplete:"password"===r&&"off"===o?"new-password":o,defaultValue:n,ref:function(e){t.inputEl=e},onChange:this.onChange,onCompositionEnd:this.onComposition.bind(this,"onCompositionEnd"),onCompositionStart:this.onComposition.bind(this,"onCompositionStart"),onCompositionUpdate:this.onComposition.bind(this,"onCompositionUpdate")})}},{key:"shouldCallChange",get:function(){return this.props.shouldCompositionEventTriggerChangeEvent||!this.isCompositionUpdate}}])&&o(e.prototype,t),n&&o(e,n),i}();function C(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function x(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function j(e){return(j="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function E(e){return(E="function"==typeof Symbol&&"symbol"===j(Symbol.iterator)?function(e){return j(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":j(e)})(e)}function S(e,t){return!t||"object"!==E(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function N(e){return(N=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function w(e,t){return(w=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var k,e,_={enable:!0,text:"Go to"},T={text:"<"},D={text:">"};function R(r,o){return void 0===o?r:Object.keys(r).reduce(function(e,t){var n=o[t];return e[t]=void 0!==n?n:r[t],e},{})}(e=k=k||{})[e.HasPage=0]="HasPage",e[e.NoPage=1]="NoPage";var B=function(){function t(e){var i;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(i=S(this,N(t).call(this,e))).timer=null,i.setPageNumber=function(e){var t,n,r,o=1<arguments.length&&void 0!==arguments[1]&&arguments[1];return r=Math.min(Math.max(1,+e),i.pageCount||1/0),void(isNaN(r)||(t=r+"",i.state.$currentPageNumber!==t&&(t&&i.setState({$currentPageNumber:t}),("function"==typeof o?!o(r):!o)&&r===+e||(n=i.props.onPageChange)&&r&&(i.debounceTime?(clearTimeout(i.timer),i.timer=setTimeout(function(){return n(r)},i.debounceTime)):n(r)))))},i.toPre=function(){i.setPageNumber(i.currentPageNumber-1,!0)},i.toNext=function(){(i.renderMode!==k.NoPage||i.props.pageSize<=i.currentPageSize)&&i.setPageNumber(i.currentPageNumber+1,!0)},i.preFormatter=function(e){var t=e.replace(/[^\d]+/g,"");if(i.renderMode===k.NoPage)return t;var n=+t;return n<=0?"":n>i.pageCount?i.pageCount+"":t},i.input=function(e){e.target.value=i.preFormatter(e.target.value),i.setPageNumber(e.target.value,!0)},i.state={$currentPageNumber:(e.pageIndex||1)+""},i}var e,n,r;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&w(e,t)}(t,p.Component),e=t,(n=[{key:"render",value:function(){var n=this,e=this.inputConfig,t=this.hide,r=this.disabled,o=this.turnBtns,i=this.pagesArr;return!t&&p.createElement("div",{className:"pagination"},e.enable&&p.createElement(p.Fragment,null,p.createElement("span",{className:"label"},e.text),p.createElement(O,{className:"input",value:this.state.$currentPageNumber,onChange:this.input})),p.createElement("div",{className:"page-btn ".concat(r.pre?"disabled":""),onClick:this.toPre},o.pre.text),i.map(function(e,t){return p.createElement("div",{className:"page-btn ".concat(n.currentPageNumber===+e?"active":""," ").concat(+e?"":"disabled").replace(/\s\s+/g," "),key:t,onClick:n.setPageNumber.bind(n,+e,!0)},e)}),p.createElement("div",{className:"page-btn ".concat(r.next?"disabled":""),onClick:this.toNext},o.next.text))}},{key:"componentDidUpdate",value:function(e){e.pageIndex!==this.props.pageIndex&&Number(this.props.pageIndex||1)!==Number(this.state.$currentPageNumber)&&this.setPageNumber(this.props.pageIndex||1)}},{key:"renderMode",get:function(){return void 0!==this.props.pageCount?k.HasPage:k.NoPage}},{key:"currentPageSize",get:function(){return this.props.currentPageSize||this.props.pageSize}},{key:"pageCount",get:function(){return this.props.pageCount||0}},{key:"inputConfig",get:function(){return R(_,this.props.inputConfig)}},{key:"turnBtns",get:function(){return{pre:R(T,this.props.turnBtns&&this.props.turnBtns.pre),next:R(D,this.props.turnBtns&&this.props.turnBtns.next)}}},{key:"maxPageBtn",get:function(){return this.props.maxPageBtn&&5<=this.props.maxPageBtn?this.props.maxPageBtn:5}},{key:"currentPageNumber",get:function(){return+this.state.$currentPageNumber||this.props.pageIndex||1}},{key:"pagesArr",get:function(){var n=this.currentPageNumber,r=this.props.pageCount,o=this.maxPageBtn;return r&&0!==this.props.maxPageBtn?r<=o?C(Array(r)).map(function(e,t){return t+1}):n<=(o+1)/2?C(Array(o-1)).map(function(e,t){return t===o-2?"...":t+1}).concat([r]):r-(o-1)/2<=n?[1,"..."].concat(C(Array(o-2)).map(function(e,t){return r-t}).reverse()):[1,"..."].concat(C(Array(o-4)).map(function(e,t){return n-Math.floor((o-3)/2)+t+1})).concat(["...",r]):[]}},{key:"disabled",get:function(){return{pre:this.currentPageNumber<=1,next:this.renderMode===k.NoPage?this.props.pageSize>this.currentPageSize:this.currentPageNumber>=this.pageCount}}},{key:"hide",get:function(){return this.renderMode===k.NoPage?this.currentPageSize<=0:this.pageCount<=0}},{key:"debounceTime",get:function(){return void 0!==this.props.debounceTime?this.props.debounceTime:500}}])&&x(e.prototype,n),r&&x(e,r),t}();function $(e,t){if(null==e)return{};var n,r=function(e,t){if(null==e)return{};for(var n,r={},o=Object.keys(e),i=0;i<o.length;i++)n=o[i],0<=t.indexOf(n)||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols)for(var o=Object.getOwnPropertySymbols(e),i=0;i<o.length;i++)n=o[i],0<=t.indexOf(n)||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n]);return r}function z(e){var t,n,r=e.className,o=$(e,["className"]);return"undefined"!=typeof window&&(t="module-css-react-loading",(n=document.getElementById(t))||((n=document.createElement("style")).id=t,n.innerHTML=".react-loading .circle{animation:sk-circleFadeDelay 1s infinite ease-in-out both}.react-loading .st0{animation-delay:-0.9s}.react-loading .st1{animation-delay:-0.8s}.react-loading .st2{animation-delay:-0.7s}.react-loading .st3{animation-delay:-0.6s}.react-loading .st4{animation-delay:-0.5s}.react-loading .st5{animation-delay:-0.4s}.react-loading .st6{animation-delay:-0.3s}.react-loading .st7{animation-delay:-0.2s}.react-loading .st8{animation-delay:-0.1s}.react-loading .st9{animation-delay:0s}@keyframes sk-circleFadeDelay{10%{opacity:0.1}100%{opacity:1}}",document.head.appendChild(n))),p.createElement("svg",Object.assign({},o,{className:"react-loading "+r,viewBox:"0 0 512 512"}),p.createElement("circle",{className:"circle st0",fill:"currentColor",cx:"256",cy:"472",r:"40"}),p.createElement("circle",{transform:"matrix(0.5878 -0.809 0.809 0.5878 -295.2906 281.9548)",className:"circle st1",fill:"currentColor",cx:"129",cy:"430.7",r:"40"}),p.createElement("circle",{transform:"matrix(0.9511 -0.309 0.309 0.9511 -97.2594 31.4239)",className:"circle st2",fill:"currentColor",cx:"50.6",cy:"322.7",r:"40"}),p.createElement("circle",{transform:"matrix(0.309 -0.9511 0.9511 0.309 -145.0454 178.8668)",className:"circle st3",fill:"currentColor",cx:"50.6",cy:"189.3",r:"40"}),p.createElement("circle",{transform:"matrix(0.809 -0.5878 0.5878 0.809 -23.1148 91.3647)",className:"circle st4",fill:"currentColor",cx:"129",cy:"81.3",r:"40"}),p.createElement("circle",{className:"circle st5",fill:"currentColor",cx:"256",cy:"40",r:"40"}),p.createElement("circle",{transform:"matrix(0.5878 -0.809 0.809 0.5878 92.1279 343.3159)",className:"circle st6",fill:"currentColor",cx:"383",cy:"81.3",r:"40"}),p.createElement("circle",{transform:"matrix(0.9511 -0.309 0.309 0.9511 -35.8983 151.8518)",className:"circle st7",fill:"currentColor",cx:"461.4",cy:"189.3",r:"40"}),p.createElement("circle",{transform:"matrix(0.309 -0.9511 0.9511 0.309 11.8878 661.8575)",className:"circle st8",fill:"currentColor",cx:"461.4",cy:"322.7",r:"40"}),p.createElement("circle",{transform:"matrix(0.809 -0.5878 0.5878 0.809 -180.048 307.3647)",className:"circle st9",fill:"currentColor",cx:"383",cy:"430.7",r:"40"}))}var A={pageSize:10,pageIndex:1};return function(){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&l(e,t)}(o,i.PureComponent);var e,t,n,r=y(o);function o(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),a(s(t=r.call(this,e)),"paginationRef",void 0),t.state={$paginationProps:c(c({},A),e.paginationProps),loading:!1,error:"",list:[]},t}return e=o,(t=[{key:"query",value:function(e){var r,o=this,i=setTimeout(function(){o.setState({loading:!0}),r=new Promise(function(e){return setTimeout(e,500)})},200);return e&&this.paginationRef.setPageNumber(1,!1),Promise.resolve().then(function(){var e=o.paginationRef,t=e.state.$currentPageNumber,n=e.props.pageSize;return Promise.resolve(o.props.onQuery({pageIndex:+t,pageSize:n})).then(function(e){var t=e.pageCount,n=e.list;o.setState(function(e){return{$paginationProps:c(c({},e.$paginationProps),{},{pageCount:t,currentPageSize:n.length}),list:n,error:""}})}).catch(function(e){o.setState({error:e}),o.props.onError&&o.props.onError(e)}).then(function(){clearTimeout(i),Promise.resolve(r).then(function(){o.setState({loading:!1})})})})}},{key:"componentDidMount",value:function(){this.props.queryAtMounted&&this.query()}},{key:"componentDidUpdate",value:function(e){var t,n,r=this;t=e.paginationProps,n=this.props.paginationProps,!t&&!n||t&&n&&!["pageSize","pageIndex","pageCount","currentPageSize","maxPageBtn","debounceTime"].some(function(e){return t[e]!==n[e]})||this.setState(function(e){return{$paginationProps:c(c({},e.$paginationProps),r.props.paginationProps)}})}},{key:"componentWillUnmount",value:function(){this.setState=function(){}}},{key:"render",value:function(){var t=this,e=this.props,n=e.children,r=e.className,o=e.loadingComp,i=this.state,a=i.$paginationProps,c=i.loading,u=i.list,s=i.error,l="function"==typeof n?n(u,s):n;return p.createElement("div",{className:"react-query-list".concat(r?" ".concat(r):"")},c&&p.createElement("div",{className:"loading-wrapper"},o||p.createElement(z,null)),l,p.createElement(B,Object.assign({},a,{ref:function(e){return t.paginationRef=e},onPageChange:function(){return t.query()}})))}}])&&u(e.prototype,t),n&&u(e,n),o}()});