weison-react-uilib/lib/index.js

个人React UI组件库-学习阶段

!function(e,t){if("object"===typeof exports&&"object"===typeof module)module.exports=t(require("react"));else if("function"===typeof define&&define.amd)define(["react"],t);else{var r="object"===typeof exports?t(require("react")):t(e.React);for(var n in r)("object"===typeof exports?exports:e)[n]=r[n]}}(self,(function(e){return function(){"use strict";var t={918:function(e,t,r){var n=r(359),o=Symbol.for("react.element"),i=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,c=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};function u(e,t,r){var n,i={},u=null,s=null;for(n in void 0!==r&&(u=""+r),void 0!==t.key&&(u=""+t.key),void 0!==t.ref&&(s=t.ref),t)a.call(t,n)&&!l.hasOwnProperty(n)&&(i[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===i[n]&&(i[n]=t[n]);return{$$typeof:o,type:e,key:u,ref:s,props:i,_owner:c.current}}t.jsx=u,t.jsxs=u},417:function(e,t,r){e.exports=r(918)},359:function(t){t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return function(){n.r(o),n.d(o,{Loading:function(){return a},SliderVertify:function(){return _}});var e=n(359),t=n.n(e),r=n(417);function i(e){var t=e.className,n=void 0===t?"":t,o=e.isCenter,i=void 0!==o&&o;return(0,r.jsx)("div",{className:"loading-wrapper".concat((n?" "+n:"")+(i?" center":"")),children:(0,r.jsx)("svg",{width:"100",height:"100",children:(0,r.jsxs)("g",{children:[(0,r.jsx)("text",{x:"50",y:"55",children:"loading\xb7\xb7\xb7"}),(0,r.jsx)("circle",{cx:"50",cy:"50",r:"40"})]})})})}var a=t().memo(i);function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function l(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!==typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i=[],a=!0,c=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);a=!0);}catch(l){c=!0,o=l}finally{try{a||null==r.return||r.return()}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"===typeof e)return c(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?c(e,t):void 0}}(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 u(e,t){return Math.round(Math.random()*(t-e)+e)}function s(e){return"function"===typeof e}var f=320,d=160,p=42,y=Math.PI,v=null,h=null,m=null,x=0,g=0,b=!1,j=0;function w(t){var n=t||{},o=n.afterSuccess,i=n.afterFail,a=n.imgUrl,c=l((0,e.useState)(0),2),p=c[0],y=c[1],w=(0,e.useRef)(),_=(0,e.useRef)(),O=function(){x=u(73,247),g=u(73,87),S(h=w.current.getContext("2d"),x,g,"fill"),h.drawImage(v,0,0,f,d),S(m=_.current.getContext("2d"),x,g,"clip"),m.drawImage(v,0,0,f,d);var e=g-18-1,t=m.getImageData(x-3,e,63,63);_.current.width=63,m.putImageData(t,0,e)},T=function(e){j=e.clientX||e.touches[0].clientX,b=!0},I=function(e){if(b){e.preventDefault();var t=(e.clientX||e.touches[0].clientX)-j;if(!(t<0||t+38>=f)){y(t);var r=260/280*t;_.current.style.left=r+"px"}}},M=function(e){if(b&&(b=!1,(e.clientX||e.changedTouches[0].clientX)!==j)){var t=parseInt(_.current.style.left);Math.abs(t-x)<10?s(o)&&o():(s(i)&&i(),y(0),_.current.width=f,_.current.style.left="0px",h.clearRect(0,0,f,d),m.clearRect(0,0,f,d),O())}};return(0,e.useEffect)((function(){(v=new Image).crossOrigin="Anonymous",v.src=a||"https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e2804b48f99443d99806b7d02dd94da~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?",v.onload=function(){O()}}),[]),(0,r.jsxs)("div",{className:"vertify-wrapper",style:{width:"320px",margin:"0 auto"},onMouseMove:I,onTouchMove:I,onMouseUp:M,onTouchEnd:M,children:[(0,r.jsxs)("div",{className:"canvas-container",children:[(0,r.jsx)("canvas",{ref:w,width:f,height:d}),(0,r.jsx)("canvas",{ref:_,className:"block",width:f,height:d})]}),(0,r.jsx)("div",{className:"slider-container",style:{width:"320px"},children:(0,r.jsx)("div",{className:"mask",style:{width:p+"px"},children:(0,r.jsx)("div",{className:"slider",style:{left:p+"px"},onMouseDown:T,onTouchStart:T,children:(0,r.jsx)("div",{className:"icon-arr",children:"\u2192"})})})})]})}function S(e,t,r,n){e.beginPath(),e.moveTo(t,r),e.arc(t+21,r-9+2,9,.72*y,2.26*y),e.lineTo(t+p,r),e.arc(t+p+9-2,r+21,9,1.21*y,2.78*y),e.lineTo(t+p,r+p),e.lineTo(t,r+p),e.arc(t+9-2,r+21,9.4,2.76*y,1.24*y,!0),e.lineTo(t,r),e.lineWidth=2,e.fillStyle="rgba(255, 255, 255, 0.7)",e.strokeStyle="rgba(255, 255, 255, 0.7)",e.stroke(),e.globalCompositeOperation="destination-over","fill"===n?e.fill():e.clip()}var _=(0,e.memo)(w)}(),o}()}));