├── .browserslistrc ├── .gitattributes ├── .gitignore ├── .npmignore ├── README.md ├── component.config.js ├── dist ├── 0.1a2e9809.iframe.bundle.js ├── 0.98d9bd9365be5748ca04.manager.bundle.js ├── 4.083f25c3.iframe.bundle.js ├── 4.083f25c3.iframe.bundle.js.LICENSE.txt ├── 4.083f25c3.iframe.bundle.js.map ├── 4.1f08efeb03c02409b42f.manager.bundle.js ├── 4.1f08efeb03c02409b42f.manager.bundle.js.LICENSE.txt ├── 5.227543b5.iframe.bundle.js ├── 5.d42ae67c724f357b6c90.manager.bundle.js ├── 6.83659688c81dc45d1f50.manager.bundle.js ├── 6.83659688c81dc45d1f50.manager.bundle.js.LICENSE.txt ├── 6.95abdf5a.iframe.bundle.js ├── 6.95abdf5a.iframe.bundle.js.LICENSE.txt ├── 6.95abdf5a.iframe.bundle.js.map ├── 7.524f3cbc.iframe.bundle.js ├── 7.8671f53238acd28d70c5.manager.bundle.js ├── 8.345d50ec3c7aacb57358.manager.bundle.js ├── ReactSliderVerify │ ├── index.d.ts │ └── useSliderVerify.d.ts ├── asset-manifest.json ├── favicon.ico ├── fe.logo.png ├── iframe.html ├── index.css ├── index.d.ts ├── index.html ├── index.js ├── index.min.css ├── index.min.js ├── main.62d7da5ecdd05ae36249.manager.bundle.js ├── main.64e3da6a.iframe.bundle.js ├── runtime~main.58ef761fc8fee29e9e96.manager.bundle.js ├── runtime~main.951587fb.iframe.bundle.js ├── static │ ├── css │ │ ├── main.7f0ff635.chunk.css │ │ ├── main.7f0ff635.chunk.css.map │ │ ├── vendors~main.d6072ea3.chunk.css │ │ └── vendors~main.d6072ea3.chunk.css.map │ └── media │ │ └── react-slider-verify.e536ddac.PNG ├── stories │ ├── AntdTemplate.d.ts │ ├── FusionTemplate.d.ts │ └── ResetTemplate.d.ts ├── vendors~main.281f2187.iframe.bundle.js ├── vendors~main.281f2187.iframe.bundle.js.LICENSE.txt ├── vendors~main.281f2187.iframe.bundle.js.map ├── vendors~main.3bd23d0897684e8062af.manager.bundle.js └── vendors~main.3bd23d0897684e8062af.manager.bundle.js.LICENSE.txt ├── example ├── .babelrc ├── dist │ ├── index.html │ ├── main.js │ └── main.js.LICENSE.txt ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ └── logo512.png ├── src │ ├── Antd.tsx │ ├── Fusion.tsx │ ├── index.css │ └── index.tsx ├── webpack.config.js └── yarn.lock ├── package.json ├── screenshot └── react-slider-verify.PNG ├── src ├── ReactSliderVerify │ ├── index.scss │ ├── index.tsx │ └── useSliderVerify.ts ├── index.tsx └── stories │ ├── AntdTemplate.tsx │ ├── FusionTemplate.tsx │ ├── Index.stories.mdx │ ├── ReactSliderVerify.stories.tsx │ ├── ResetTemplate.tsx │ └── assets │ └── react-slider-verify.PNG ├── tsconfig.json └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | last 2 versions 2 | IE 11 3 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * linguist-language=TypeScript -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | /es 14 | /lib 15 | 16 | # misc 17 | .DS_Store 18 | .env.local 19 | .env.development.local 20 | .env.test.local 21 | .env.production.local 22 | 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | example/node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-slider-verify 2 | 3 | ## React 滑动验证组件 4 | 5 | 6 | 7 | - [Github 地址](https://github.com/ShenBao/react-slider-verify)： 8 | - [https://github.com/ShenBao/react-slider-verify](https://github.com/ShenBao/react-slider-verify) 9 | - [在线示例](./example/src/index.tsx)： 10 | - [https://shenbao.github.io/react-slider-verify/dist/index.html](https://shenbao.github.io/react-slider-verify/dist/index.html) 11 | - [example](https://shenbao.github.io/react-slider-verify/example/dist/index.html) 12 | - [Antd 示例](./example/src/Antd.tsx) 13 | - [Fusion 示例](./example/src/Fusion.tsx) 14 | 15 | ## 截图 16 | 17 | ![react-slider-verify.PNG](./screenshot/react-slider-verify.PNG) 18 | 19 | ## 安装 20 | 21 | ```bash 22 | $ npm install react-slider-verify -S 23 | ``` 24 | 25 | ## 使用组件 26 | 27 | ```js 28 | import ReactSliderVerify from "react-slider-verify"; 29 | import "react-slider-verify/dist/index.css"; 30 | 31 | {}} />; 32 | ``` 33 | 34 | ## 重置状态方法 35 | 36 | ```js 37 | const ref = useRef({} as any); 38 | 39 |
40 | setState(true)} 43 | /> 44 |
当前状态：{`${state}`}
45 | 53 |
54 | ``` 55 | 56 | ## 参数说明 57 | 58 | | 字段名 | 字段类型 | 默认值 | 说明 | 59 | | ---------- | ----------- | ------------------------ | ---------------- | 60 | | width | number | 400 | 长度 | 61 | | height | number | 36 | 宽度 | 62 | | bgColor | string | #F2F3F5 | 背景颜色 | 63 | | tips | ReactChild | 请按住滑块，拖动到最右边 | 提示文案 | 64 | | barWidth | number | 80 | 滑块宽度 | 65 | | bar | ReactChild | `>>` | 滑块的内容 | 66 | | successBar | ReactChild | ✅ | 成功后滑块的内容 | 67 | | successBgColor | string | #06ad06 | 成功后背景颜色 | 68 | | successTips | ReactChild | 验证已通过 | 成功文案 | 69 | | successShowBar | boolean | true | 成功后的是否显示 Bar | 70 | 71 | ## 事件 72 | 73 | | 事件名 | 说明 | 回调参数 | 74 | | --------- | -------------------- | -------- | 75 | | onSuccess | 验证完成后的回调函数 | - | 76 | 77 | ## 方法 78 | 79 | | 事件名 | 说明 | 参数 | 80 | | ------ | ---------------------- | ---- | 81 | | reset | 使验证器重置为初始状态 | - | 82 | 83 | ## More links 84 | 85 | - [GitHub Home](https://github.com/ShenBao) 86 | - [Blog Home](https://shenbao.github.io) 87 | - [About Me](https://shenbao.github.io/about/) 88 | -------------------------------------------------------------------------------- /component.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | analysis: false, 3 | // umd: false, 4 | // 其他配置项 5 | }; 6 | -------------------------------------------------------------------------------- /dist/4.083f25c3.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * Prism: Lightweight, robust, elegant syntax highlighting 3 | * 4 | * @license MIT 5 | * @author Lea Verou 6 | * @namespace 7 | * @public 8 | */ 9 | -------------------------------------------------------------------------------- /dist/4.083f25c3.iframe.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"4.083f25c3.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""} -------------------------------------------------------------------------------- /dist/4.1f08efeb03c02409b42f.manager.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * Prism: Lightweight, robust, elegant syntax highlighting 3 | * 4 | * @license MIT 5 | * @author Lea Verou 6 | * @namespace 7 | * @public 8 | */ 9 | -------------------------------------------------------------------------------- /dist/5.227543b5.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{1028:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ColorControl",(function(){return Color_ColorControl}));__webpack_require__(34),__webpack_require__(10),__webpack_require__(16),__webpack_require__(13),__webpack_require__(28),__webpack_require__(23),__webpack_require__(19),__webpack_require__(22),__webpack_require__(38),__webpack_require__(31),__webpack_require__(24),__webpack_require__(165),__webpack_require__(134),__webpack_require__(40),__webpack_require__(36),__webpack_require__(197),__webpack_require__(76),__webpack_require__(195),__webpack_require__(105),__webpack_require__(21),__webpack_require__(77),__webpack_require__(11);var react=__webpack_require__(0),react_default=__webpack_require__.n(react);function index_module_u(){return(index_module_u=Object.assign||function(e){for(var r=1;r=0||(o[t]=e[t]);return o}function index_module_i(e){var t=Object(react.useRef)(e),n=Object(react.useRef)((function(e){t.current&&t.current(e)}));return t.current=e,n.current}var index_module_s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e0:e.buttons>0)&&h.current?m(index_module_v(h.current,e,p.current)):t(!1)},r=function(){return t(!1)};function t(t){var n=b.current,o=t?self.addEventListener:self.removeEventListener;o(n?"touchmove":"mousemove",e),o(n?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,n=h.current;if(n&&(index_module_d(r),!function(e,r){return r&&!index_module_f(e)}(r,b.current)&&n)){if(index_module_f(r)){b.current=!0;var o=r.changedTouches||[];o.length&&(p.current=o[0].identifier)}n.focus(),m(index_module_v(n,r,p.current)),t(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),g({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]}),[g,m]),x=_[0],C=_[1],E=_[2];return Object(react.useEffect)((function(){return E}),[E]),react_default.a.createElement("div",index_module_u({},s,{onTouchStart:x,onMouseDown:x,className:"react-colorful__interactive",ref:h,onKeyDown:C,tabIndex:0,role:"slider"}))})),index_module_m=function(e){return e.filter(Boolean).join(" ")},index_module_g=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=index_module_m(["react-colorful__pointer",r.className]);return react_default.a.createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},react_default.a.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},index_module_p=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},index_module_b={grad:.9,turn:360,rad:360/(2*Math.PI)},index_module_=function(e){return"#"===e[0]&&(e=e.substr(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:1}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:1}},index_module_x=function(e,r){return void 0===r&&(r="deg"),Number(e)*(index_module_b[r]||1)},index_module_C=function(e){var r=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?index_module_H({h:index_module_x(r[1],r[2]),s:Number(r[3]),l:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},index_module_H=function(e){var r=e.s,t=e.l;return{h:e.h,s:(r*=(t<50?t:100-t)/100)>0?2*r/(t+r)*100:0,v:t+r,a:e.a}},M=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return{h:index_module_p(e.h),s:index_module_p(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:index_module_p(o/2),a:index_module_p(n,2)}},N=function(e){var r=M(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},w=function(e){var r=M(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},y=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return{r:index_module_p(255*[n,u,l,l,c,n][i]),g:index_module_p(255*[c,n,n,u,l,l][i]),b:index_module_p(255*[l,l,c,n,n,u][i]),a:index_module_p(o,2)}},O=function(e){var r=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?z({r:Number(r[1])/(r[2]?100/255:1),g:Number(r[3])/(r[4]?100/255:1),b:Number(r[5])/(r[6]?100/255:1),a:void 0===r[7]?1:Number(r[7])/(r[8]?100:1)}):{h:0,s:0,v:0,a:1}},j=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},z=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return{h:index_module_p(60*(u<0?u+6:u)),s:index_module_p(a?l/a*100:0),v:index_module_p(a/255*100),a:o}},K=react_default.a.memo((function(r){var t=r.hue,n=r.onChange,o=index_module_m(["react-colorful__hue",r.className]);return react_default.a.createElement("div",{className:o},react_default.a.createElement(index_module_h,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:index_module_s(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuetext":index_module_p(t)},react_default.a.createElement(index_module_g,{className:"react-colorful__hue-pointer",left:t/360,color:N({h:t,s:100,v:100,a:1})})))})),L=react_default.a.memo((function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:N({h:t.h,s:100,v:100,a:1})};return react_default.a.createElement("div",{className:"react-colorful__saturation",style:o},react_default.a.createElement(index_module_h,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:index_module_s(t.s+100*e.left,0,100),v:index_module_s(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+index_module_p(t.s)+"%, Brightness "+index_module_p(t.v)+"%"},react_default.a.createElement(index_module_g,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:N(t)})))})),A=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},D=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")};function S(e,t,l){var u=index_module_i(l),c=Object(react.useState)((function(){return e.toHsva(t)})),s=c[0],f=c[1],v=Object(react.useRef)({color:t,hsva:s});Object(react.useEffect)((function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r)}}),[t,e]),Object(react.useEffect)((function(){var r;A(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r))}),[s,e,u]);var d=Object(react.useCallback)((function(e){f((function(r){return Object.assign({},r,e)}))}),[]);return[s,d]}var T,F,_ColorPicker,_fallbackColor,P="undefined"!=typeof window?react.useLayoutEffect:react.useEffect,R=function(){P((function(){if("undefined"!=typeof document&&!F){(F=document.createElement("style")).innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}';var e=T||__webpack_require__.nc;e&&F.setAttribute("nonce",e),document.head.appendChild(F)}}),[])},$=function(r){var t=r.className,n=r.colorModel,o=r.color,a=void 0===o?n.defaultColor:o,l=r.onChange,i=index_module_c(r,["className","colorModel","color","onChange"]);R();var s=S(n,a,l),f=s[0],v=s[1],d=index_module_m(["react-colorful",t]);return react_default.a.createElement("div",index_module_u({},i,{className:d}),react_default.a.createElement(L,{hsva:f,onChange:v}),react_default.a.createElement(K,{hue:f.h,onChange:v,className:"react-colorful__last-control"}))},G={defaultColor:"000",toHsva:function(e){return z(index_module_(e))},fromHsva:function(e){return t=(r=y(e)).g,n=r.b,"#"+j(r.r)+j(t)+j(n);var r,t,n},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||A(index_module_(e),index_module_(r))}},Q=function(r){var t=r.className,n=r.hsva,o=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+w(Object.assign({},n,{a:0}))+", "+w(Object.assign({},n,{a:1}))+")"},l=index_module_m(["react-colorful__alpha",t]);return react_default.a.createElement("div",{className:l},react_default.a.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),react_default.a.createElement(index_module_h,{onMove:function(e){o({a:e.left})},onKey:function(e){o({a:index_module_s(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":index_module_p(100*n.a)+"%"},react_default.a.createElement(index_module_g,{className:"react-colorful__alpha-pointer",left:n.a,color:w(n)})))},U=function(r){var t=r.className,n=r.colorModel,o=r.color,a=void 0===o?n.defaultColor:o,l=r.onChange,i=index_module_c(r,["className","colorModel","color","onChange"]);R();var s=S(n,a,l),f=s[0],v=s[1],d=index_module_m(["react-colorful",t]);return react_default.a.createElement("div",index_module_u({},i,{className:d}),react_default.a.createElement(L,{hsva:f,onChange:v}),react_default.a.createElement(K,{hue:f.h,onChange:v}),react_default.a.createElement(Q,{hsva:f,onChange:v,className:"react-colorful__last-control"}))},Z={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:index_module_C,fromHsva:w,equal:D},me={defaultColor:"rgba(0, 0, 0, 1)",toHsva:O,fromHsva:function(e){var r=y(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:D},color_convert=__webpack_require__(1094),color_convert_default=__webpack_require__.n(color_convert),throttle=__webpack_require__(1097),throttle_default=__webpack_require__.n(throttle),esm=__webpack_require__(2),TooltipNote=__webpack_require__(583),lazy_WithTooltip=__webpack_require__(214),esm_form=__webpack_require__(73),icon=__webpack_require__(62),helpers=__webpack_require__(61);function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){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 _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Wrapper=esm.styled.div({position:"relative",maxWidth:250}),PickerTooltip=Object(esm.styled)(lazy_WithTooltip.a)({position:"absolute",zIndex:1,top:4,left:4}),TooltipContent=esm.styled.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Note=Object(esm.styled)(TooltipNote.a)((function(_ref){return{fontFamily:_ref.theme.typography.fonts.base}})),Swatches=esm.styled.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=esm.styled.div((function(_ref2){var theme=_ref2.theme;return{width:16,height:16,boxShadow:_ref2.active?"".concat(theme.appBorderColor," 0 0 0 1px inset, ").concat(theme.color.mediumdark,"50 0 0 0 4px"):"".concat(theme.appBorderColor," 0 0 0 1px inset"),borderRadius:theme.appBorderRadius}})),Color_Swatch=function Swatch(_ref3){var value=_ref3.value,active=_ref3.active,onClick=_ref3.onClick,style=_ref3.style,props=_objectWithoutProperties(_ref3,["value","active","onClick","style"]),backgroundImage="linear-gradient(".concat(value,", ").concat(value,"), ").concat('url(\'data:image/svg+xml;charset=utf-8,\')',", linear-gradient(#fff, #fff)");return react_default.a.createElement(SwatchColor,_extends({},props,{active:active,onClick:onClick,style:Object.assign({},style,{backgroundImage:backgroundImage})}))};Color_Swatch.displayName="Swatch";var ColorSpace,Input=Object(esm.styled)(esm_form.a.Input)((function(_ref4){return{width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:_ref4.theme.typography.fonts.base}})),ToggleIcon=Object(esm.styled)(icon.a)((function(_ref5){return{position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:_ref5.theme.input.color}}));!function(ColorSpace){ColorSpace.RGB="rgb",ColorSpace.HSL="hsl",ColorSpace.HEX="hex"}(ColorSpace||(ColorSpace={}));var COLOR_SPACES=Object.values(ColorSpace),COLOR_REGEXP=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,RGB_REGEXP=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,HSL_REGEXP=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,HEX_REGEXP=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,SHORTHEX_REGEXP=/^\s*#?([0-9a-f]{3})\s*$/i,ColorPicker=(_defineProperty(_ColorPicker={},ColorSpace.HEX,(function(r){return react_default.a.createElement($,index_module_u({},r,{colorModel:G}))})),_defineProperty(_ColorPicker,ColorSpace.RGB,(function(r){return react_default.a.createElement(U,index_module_u({},r,{colorModel:me}))})),_defineProperty(_ColorPicker,ColorSpace.HSL,(function(r){return react_default.a.createElement(U,index_module_u({},r,{colorModel:Z}))})),_ColorPicker),fallbackColor=(_defineProperty(_fallbackColor={},ColorSpace.HEX,"transparent"),_defineProperty(_fallbackColor,ColorSpace.RGB,"rgba(0, 0, 0, 0)"),_defineProperty(_fallbackColor,ColorSpace.HSL,"hsla(0, 0%, 0%, 0)"),_fallbackColor),stringToArgs=function stringToArgs(value){var match=null==value?void 0:value.match(COLOR_REGEXP);if(!match)return[0,0,0,1];var _match=_slicedToArray(match,5),x=_match[1],y=_match[2],z=_match[3],_match$=_match[4];return[x,y,z,void 0===_match$?1:_match$].map(Number)},Color_parseValue=function parseValue(value){var _ref12;if(value){var valid=!0;if(RGB_REGEXP.test(value)){var _ref8,_stringToArgs2=_slicedToArray(stringToArgs(value),4),r=_stringToArgs2[0],g=_stringToArgs2[1],b=_stringToArgs2[2],a=_stringToArgs2[3],_ref7=_slicedToArray(color_convert_default.a.rgb.hsl([r,g,b])||[0,0,0],3),h=_ref7[0],s=_ref7[1],l=_ref7[2];return _defineProperty(_ref8={valid:valid,value:value,keyword:color_convert_default.a.rgb.keyword([r,g,b]),colorSpace:ColorSpace.RGB},ColorSpace.RGB,value),_defineProperty(_ref8,ColorSpace.HSL,"hsla(".concat(h,", ").concat(s,"%, ").concat(l,"%, ").concat(a,")")),_defineProperty(_ref8,ColorSpace.HEX,"#".concat(color_convert_default.a.rgb.hex([r,g,b]).toLowerCase())),_ref8}if(HSL_REGEXP.test(value)){var _ref11,_stringToArgs4=_slicedToArray(stringToArgs(value),4),_h=_stringToArgs4[0],_s2=_stringToArgs4[1],_l=_stringToArgs4[2],_a=_stringToArgs4[3],_ref10=_slicedToArray(color_convert_default.a.hsl.rgb([_h,_s2,_l])||[0,0,0],3),_r=_ref10[0],_g=_ref10[1],_b=_ref10[2];return _defineProperty(_ref11={valid:valid,value:value,keyword:color_convert_default.a.hsl.keyword([_h,_s2,_l]),colorSpace:ColorSpace.HSL},ColorSpace.RGB,"rgba(".concat(_r,", ").concat(_g,", ").concat(_b,", ").concat(_a,")")),_defineProperty(_ref11,ColorSpace.HSL,value),_defineProperty(_ref11,ColorSpace.HEX,"#".concat(color_convert_default.a.hsl.hex([_h,_s2,_l]).toLowerCase())),_ref11}var plain=value.replace("#",""),rgb=color_convert_default.a.keyword.rgb(plain)||color_convert_default.a.hex.rgb(plain),hsl=color_convert_default.a.rgb.hsl(rgb),mapped=value;if(/[^#a-f0-9]/i.test(value)?mapped=plain:HEX_REGEXP.test(value)&&(mapped="#".concat(plain)),mapped.startsWith("#"))valid=HEX_REGEXP.test(mapped);else try{color_convert_default.a.keyword.hex(mapped)}catch(e){valid=!1}return _defineProperty(_ref12={valid:valid,value:mapped,keyword:color_convert_default.a.rgb.keyword(rgb),colorSpace:ColorSpace.HEX},ColorSpace.RGB,"rgba(".concat(rgb[0],", ").concat(rgb[1],", ").concat(rgb[2],", 1)")),_defineProperty(_ref12,ColorSpace.HSL,"hsla(".concat(hsl[0],", ").concat(hsl[1],"%, ").concat(hsl[2],"%, 1)")),_defineProperty(_ref12,ColorSpace.HEX,mapped),_ref12}},Color_useColorInput=function useColorInput(initialValue,onChange){var _useState2=_slicedToArray(Object(react.useState)(initialValue||""),2),value=_useState2[0],setValue=_useState2[1],_useState4=_slicedToArray(Object(react.useState)((function(){return Color_parseValue(value)})),2),color=_useState4[0],setColor=_useState4[1],_useState6=_slicedToArray(Object(react.useState)((null==color?void 0:color.colorSpace)||ColorSpace.HEX),2),colorSpace=_useState6[0],setColorSpace=_useState6[1];Object(react.useEffect)((function(){void 0===initialValue&&(setValue(""),setColor(void 0),setColorSpace(ColorSpace.HEX))}),[initialValue]);var realValue=Object(react.useMemo)((function(){return function getRealValue(value,color,colorSpace){if(!value||null==color||!color.valid)return fallbackColor[colorSpace];if(colorSpace!==ColorSpace.HEX)return(null==color?void 0:color[colorSpace])||fallbackColor[colorSpace];if(!color.hex.startsWith("#"))try{return"#".concat(color_convert_default.a.keyword.hex(color.hex))}catch(e){return fallbackColor.hex}var short=color.hex.match(SHORTHEX_REGEXP);if(!short)return HEX_REGEXP.test(color.hex)?color.hex:fallbackColor.hex;var _short$1$split2=_slicedToArray(short[1].split(""),3),r=_short$1$split2[0],g=_short$1$split2[1],b=_short$1$split2[2];return"#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b)}(value,color,colorSpace).toLowerCase()}),[value,color,colorSpace]),updateValue=Object(react.useCallback)((function(update){var parsed=Color_parseValue(update);setValue((null==parsed?void 0:parsed.value)||update||""),parsed&&(setColor(parsed),setColorSpace(parsed.colorSpace),onChange(parsed.value))}),[onChange]),cycleColorSpace=Object(react.useCallback)((function(){var next=COLOR_SPACES.indexOf(colorSpace)+1;next>=COLOR_SPACES.length&&(next=0),setColorSpace(COLOR_SPACES[next]);var update=(null==color?void 0:color[COLOR_SPACES[next]])||"";setValue(update),onChange(update)}),[color,colorSpace,onChange]);return{value:value,realValue:realValue,updateValue:updateValue,color:color,colorSpace:colorSpace,cycleColorSpace:cycleColorSpace}},id=function id(value){return value.replace(/\s*/,"").toLowerCase()},Color_ColorControl=function ColorControl(_ref13){var name=_ref13.name,initialValue=_ref13.value,onChange=_ref13.onChange,onFocus=_ref13.onFocus,onBlur=_ref13.onBlur,presetColors=_ref13.presetColors,startOpen=_ref13.startOpen,_useColorInput=Color_useColorInput(initialValue,throttle_default()(onChange,200)),value=_useColorInput.value,realValue=_useColorInput.realValue,updateValue=_useColorInput.updateValue,color=_useColorInput.color,colorSpace=_useColorInput.colorSpace,cycleColorSpace=_useColorInput.cycleColorSpace,_usePresets=function usePresets(presetColors,currentColor,colorSpace){var _useState8=_slicedToArray(Object(react.useState)(null!=currentColor&¤tColor.valid?[currentColor]:[]),2),selectedColors=_useState8[0],setSelectedColors=_useState8[1];Object(react.useEffect)((function(){void 0===currentColor&&setSelectedColors([])}),[currentColor]);var presets=Object(react.useMemo)((function(){return(presetColors||[]).map((function(preset){return"string"==typeof preset?Color_parseValue(preset):preset.title?Object.assign({},Color_parseValue(preset.color),{keyword:preset.title}):Color_parseValue(preset.color)})).concat(selectedColors).filter(Boolean).slice(-27)}),[presetColors,selectedColors]),addPreset=Object(react.useCallback)((function(color){null!=color&&color.valid&&(presets.some((function(preset){return id(preset[colorSpace])===id(color[colorSpace])}))||setSelectedColors((function(arr){return arr.concat(color)})))}),[colorSpace,presets]);return{presets:presets,addPreset:addPreset}}(presetColors,color,colorSpace),presets=_usePresets.presets,addPreset=_usePresets.addPreset,Picker=ColorPicker[colorSpace];return react_default.a.createElement(Wrapper,null,react_default.a.createElement(PickerTooltip,{trigger:"click",startOpen:startOpen,closeOnClick:!0,onVisibilityChange:function onVisibilityChange(){return addPreset(color)},tooltip:react_default.a.createElement(TooltipContent,null,react_default.a.createElement(Picker,{color:"transparent"===realValue?"#000000":realValue,onChange:updateValue,onFocus:onFocus,onBlur:onBlur}),presets.length>0&&react_default.a.createElement(Swatches,null,presets.map((function(preset,index){return react_default.a.createElement(lazy_WithTooltip.a,{key:"".concat(preset.value,"-").concat(index),hasChrome:!1,tooltip:react_default.a.createElement(Note,{note:preset.keyword||preset.value})},react_default.a.createElement(Color_Swatch,{value:preset[colorSpace],active:color&&id(preset[colorSpace])===id(color[colorSpace]),onClick:function onClick(){return updateValue(preset.value)}}))}))))},react_default.a.createElement(Color_Swatch,{value:realValue,style:{margin:4}})),react_default.a.createElement(Input,{id:Object(helpers.a)(name),value:value,onChange:function onChange(e){return updateValue(e.target.value)},onFocus:function onFocus(e){return e.target.select()},placeholder:"Choose color..."}),react_default.a.createElement(ToggleIcon,{icon:"markup",onClick:cycleColorSpace}))};Color_ColorControl.displayName="ColorControl";__webpack_exports__.default=Color_ColorControl},1053:function(module,exports,__webpack_require__){const cssKeywords=__webpack_require__(1095),reverseKeywords={};for(const key of Object.keys(cssKeywords))reverseKeywords[cssKeywords[key]]=key;const convert={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};module.exports=convert;for(const model of Object.keys(convert)){if(!("channels"in convert[model]))throw new Error("missing channels property: "+model);if(!("labels"in convert[model]))throw new Error("missing channel labels property: "+model);if(convert[model].labels.length!==convert[model].channels)throw new Error("channel and label counts mismatch: "+model);const{channels:channels,labels:labels}=convert[model];delete convert[model].channels,delete convert[model].labels,Object.defineProperty(convert[model],"channels",{value:channels}),Object.defineProperty(convert[model],"labels",{value:labels})}convert.rgb.hsl=function(rgb){const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,min=Math.min(r,g,b),max=Math.max(r,g,b),delta=max-min;let h,s;max===min?h=0:r===max?h=(g-b)/delta:g===max?h=2+(b-r)/delta:b===max&&(h=4+(r-g)/delta),h=Math.min(60*h,360),h<0&&(h+=360);const l=(min+max)/2;return s=max===min?0:l<=.5?delta/(max+min):delta/(2-max-min),[h,100*s,100*l]},convert.rgb.hsv=function(rgb){let rdif,gdif,bdif,h,s;const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,v=Math.max(r,g,b),diff=v-Math.min(r,g,b),diffc=function(c){return(v-c)/6/diff+.5};return 0===diff?(h=0,s=0):(s=diff/v,rdif=diffc(r),gdif=diffc(g),bdif=diffc(b),r===v?h=bdif-gdif:g===v?h=1/3+rdif-bdif:b===v&&(h=2/3+gdif-rdif),h<0?h+=1:h>1&&(h-=1)),[360*h,100*s,100*v]},convert.rgb.hwb=function(rgb){const r=rgb[0],g=rgb[1];let b=rgb[2];const h=convert.rgb.hsl(rgb)[0],w=1/255*Math.min(r,Math.min(g,b));return b=1-1/255*Math.max(r,Math.max(g,b)),[h,100*w,100*b]},convert.rgb.cmyk=function(rgb){const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,k=Math.min(1-r,1-g,1-b);return[100*((1-r-k)/(1-k)||0),100*((1-g-k)/(1-k)||0),100*((1-b-k)/(1-k)||0),100*k]},convert.rgb.keyword=function(rgb){const reversed=reverseKeywords[rgb];if(reversed)return reversed;let currentClosestKeyword,currentClosestDistance=1/0;for(const keyword of Object.keys(cssKeywords)){const value=cssKeywords[keyword],distance=(y=value,((x=rgb)[0]-y[0])**2+(x[1]-y[1])**2+(x[2]-y[2])**2);distance.04045?((r+.055)/1.055)**2.4:r/12.92,g=g>.04045?((g+.055)/1.055)**2.4:g/12.92,b=b>.04045?((b+.055)/1.055)**2.4:b/12.92;return[100*(.4124*r+.3576*g+.1805*b),100*(.2126*r+.7152*g+.0722*b),100*(.0193*r+.1192*g+.9505*b)]},convert.rgb.lab=function(rgb){const xyz=convert.rgb.xyz(rgb);let x=xyz[0],y=xyz[1],z=xyz[2];x/=95.047,y/=100,z/=108.883,x=x>.008856?x**(1/3):7.787*x+16/116,y=y>.008856?y**(1/3):7.787*y+16/116,z=z>.008856?z**(1/3):7.787*z+16/116;return[116*y-16,500*(x-y),200*(y-z)]},convert.hsl.rgb=function(hsl){const h=hsl[0]/360,s=hsl[1]/100,l=hsl[2]/100;let t2,t3,val;if(0===s)return val=255*l,[val,val,val];t2=l<.5?l*(1+s):l+s-l*s;const t1=2*l-t2,rgb=[0,0,0];for(let i=0;i<3;i++)t3=h+1/3*-(i-1),t3<0&&t3++,t3>1&&t3--,val=6*t3<1?t1+6*(t2-t1)*t3:2*t3<1?t2:3*t3<2?t1+(t2-t1)*(2/3-t3)*6:t1,rgb[i]=255*val;return rgb},convert.hsl.hsv=function(hsl){const h=hsl[0];let s=hsl[1]/100,l=hsl[2]/100,smin=s;const lmin=Math.max(l,.01);l*=2,s*=l<=1?l:2-l,smin*=lmin<=1?lmin:2-lmin;return[h,100*(0===l?2*smin/(lmin+smin):2*s/(l+s)),100*((l+s)/2)]},convert.hsv.rgb=function(hsv){const h=hsv[0]/60,s=hsv[1]/100;let v=hsv[2]/100;const hi=Math.floor(h)%6,f=h-Math.floor(h),p=255*v*(1-s),q=255*v*(1-s*f),t=255*v*(1-s*(1-f));switch(v*=255,hi){case 0:return[v,t,p];case 1:return[q,v,p];case 2:return[p,v,t];case 3:return[p,q,v];case 4:return[t,p,v];case 5:return[v,p,q]}},convert.hsv.hsl=function(hsv){const h=hsv[0],s=hsv[1]/100,v=hsv[2]/100,vmin=Math.max(v,.01);let sl,l;l=(2-s)*v;const lmin=(2-s)*vmin;return sl=s*vmin,sl/=lmin<=1?lmin:2-lmin,sl=sl||0,l/=2,[h,100*sl,100*l]},convert.hwb.rgb=function(hwb){const h=hwb[0]/360;let wh=hwb[1]/100,bl=hwb[2]/100;const ratio=wh+bl;let f;ratio>1&&(wh/=ratio,bl/=ratio);const i=Math.floor(6*h),v=1-bl;f=6*h-i,0!=(1&i)&&(f=1-f);const n=wh+f*(v-wh);let r,g,b;switch(i){default:r=v,g=n,b=wh;break;case 1:r=n,g=v,b=wh;break;case 2:r=wh,g=v,b=n;break;case 3:r=wh,g=n,b=v;break;case 4:r=n,g=wh,b=v;break;case 5:r=v,g=wh,b=n}return[255*r,255*g,255*b]},convert.cmyk.rgb=function(cmyk){const c=cmyk[0]/100,m=cmyk[1]/100,y=cmyk[2]/100,k=cmyk[3]/100;return[255*(1-Math.min(1,c*(1-k)+k)),255*(1-Math.min(1,m*(1-k)+k)),255*(1-Math.min(1,y*(1-k)+k))]},convert.xyz.rgb=function(xyz){const x=xyz[0]/100,y=xyz[1]/100,z=xyz[2]/100;let r,g,b;return r=3.2406*x+-1.5372*y+-.4986*z,g=-.9689*x+1.8758*y+.0415*z,b=.0557*x+-.204*y+1.057*z,r=r>.0031308?1.055*r**(1/2.4)-.055:12.92*r,g=g>.0031308?1.055*g**(1/2.4)-.055:12.92*g,b=b>.0031308?1.055*b**(1/2.4)-.055:12.92*b,r=Math.min(Math.max(0,r),1),g=Math.min(Math.max(0,g),1),b=Math.min(Math.max(0,b),1),[255*r,255*g,255*b]},convert.xyz.lab=function(xyz){let x=xyz[0],y=xyz[1],z=xyz[2];x/=95.047,y/=100,z/=108.883,x=x>.008856?x**(1/3):7.787*x+16/116,y=y>.008856?y**(1/3):7.787*y+16/116,z=z>.008856?z**(1/3):7.787*z+16/116;return[116*y-16,500*(x-y),200*(y-z)]},convert.lab.xyz=function(lab){let x,y,z;y=(lab[0]+16)/116,x=lab[1]/500+y,z=y-lab[2]/200;const y2=y**3,x2=x**3,z2=z**3;return y=y2>.008856?y2:(y-16/116)/7.787,x=x2>.008856?x2:(x-16/116)/7.787,z=z2>.008856?z2:(z-16/116)/7.787,x*=95.047,y*=100,z*=108.883,[x,y,z]},convert.lab.lch=function(lab){const l=lab[0],a=lab[1],b=lab[2];let h;h=360*Math.atan2(b,a)/2/Math.PI,h<0&&(h+=360);return[l,Math.sqrt(a*a+b*b),h]},convert.lch.lab=function(lch){const l=lch[0],c=lch[1],hr=lch[2]/360*2*Math.PI;return[l,c*Math.cos(hr),c*Math.sin(hr)]},convert.rgb.ansi16=function(args,saturation=null){const[r,g,b]=args;let value=null===saturation?convert.rgb.hsv(args)[2]:saturation;if(value=Math.round(value/50),0===value)return 30;let ansi=30+(Math.round(b/255)<<2|Math.round(g/255)<<1|Math.round(r/255));return 2===value&&(ansi+=60),ansi},convert.hsv.ansi16=function(args){return convert.rgb.ansi16(convert.hsv.rgb(args),args[2])},convert.rgb.ansi256=function(args){const r=args[0],g=args[1],b=args[2];if(r===g&&g===b)return r<8?16:r>248?231:Math.round((r-8)/247*24)+232;return 16+36*Math.round(r/255*5)+6*Math.round(g/255*5)+Math.round(b/255*5)},convert.ansi16.rgb=function(args){let color=args%10;if(0===color||7===color)return args>50&&(color+=3.5),color=color/10.5*255,[color,color,color];const mult=.5*(1+~~(args>50));return[(1&color)*mult*255,(color>>1&1)*mult*255,(color>>2&1)*mult*255]},convert.ansi256.rgb=function(args){if(args>=232){const c=10*(args-232)+8;return[c,c,c]}let rem;args-=16;return[Math.floor(args/36)/5*255,Math.floor((rem=args%36)/6)/5*255,rem%6/5*255]},convert.rgb.hex=function(args){const string=(((255&Math.round(args[0]))<<16)+((255&Math.round(args[1]))<<8)+(255&Math.round(args[2]))).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert.hex.rgb=function(args){const match=args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!match)return[0,0,0];let colorString=match[0];3===match[0].length&&(colorString=colorString.split("").map((char=>char+char)).join(""));const integer=parseInt(colorString,16);return[integer>>16&255,integer>>8&255,255&integer]},convert.rgb.hcg=function(rgb){const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,max=Math.max(Math.max(r,g),b),min=Math.min(Math.min(r,g),b),chroma=max-min;let grayscale,hue;return grayscale=chroma<1?min/(1-chroma):0,hue=chroma<=0?0:max===r?(g-b)/chroma%6:max===g?2+(b-r)/chroma:4+(r-g)/chroma,hue/=6,hue%=1,[360*hue,100*chroma,100*grayscale]},convert.hsl.hcg=function(hsl){const s=hsl[1]/100,l=hsl[2]/100,c=l<.5?2*s*l:2*s*(1-l);let f=0;return c<1&&(f=(l-.5*c)/(1-c)),[hsl[0],100*c,100*f]},convert.hsv.hcg=function(hsv){const s=hsv[1]/100,v=hsv[2]/100,c=s*v;let f=0;return c<1&&(f=(v-c)/(1-c)),[hsv[0],100*c,100*f]},convert.hcg.rgb=function(hcg){const h=hcg[0]/360,c=hcg[1]/100,g=hcg[2]/100;if(0===c)return[255*g,255*g,255*g];const pure=[0,0,0],hi=h%1*6,v=hi%1,w=1-v;let mg=0;switch(Math.floor(hi)){case 0:pure[0]=1,pure[1]=v,pure[2]=0;break;case 1:pure[0]=w,pure[1]=1,pure[2]=0;break;case 2:pure[0]=0,pure[1]=1,pure[2]=v;break;case 3:pure[0]=0,pure[1]=w,pure[2]=1;break;case 4:pure[0]=v,pure[1]=0,pure[2]=1;break;default:pure[0]=1,pure[1]=0,pure[2]=w}return mg=(1-c)*g,[255*(c*pure[0]+mg),255*(c*pure[1]+mg),255*(c*pure[2]+mg)]},convert.hcg.hsv=function(hcg){const c=hcg[1]/100,v=c+hcg[2]/100*(1-c);let f=0;return v>0&&(f=c/v),[hcg[0],100*f,100*v]},convert.hcg.hsl=function(hcg){const c=hcg[1]/100,l=hcg[2]/100*(1-c)+.5*c;let s=0;return l>0&&l<.5?s=c/(2*l):l>=.5&&l<1&&(s=c/(2*(1-l))),[hcg[0],100*s,100*l]},convert.hcg.hwb=function(hcg){const c=hcg[1]/100,v=c+hcg[2]/100*(1-c);return[hcg[0],100*(v-c),100*(1-v)]},convert.hwb.hcg=function(hwb){const w=hwb[1]/100,v=1-hwb[2]/100,c=v-w;let g=0;return c<1&&(g=(v-c)/(1-c)),[hwb[0],100*c,100*g]},convert.apple.rgb=function(apple){return[apple[0]/65535*255,apple[1]/65535*255,apple[2]/65535*255]},convert.rgb.apple=function(rgb){return[rgb[0]/255*65535,rgb[1]/255*65535,rgb[2]/255*65535]},convert.gray.rgb=function(args){return[args[0]/100*255,args[0]/100*255,args[0]/100*255]},convert.gray.hsl=function(args){return[0,0,args[0]]},convert.gray.hsv=convert.gray.hsl,convert.gray.hwb=function(gray){return[0,100,gray[0]]},convert.gray.cmyk=function(gray){return[0,0,0,gray[0]]},convert.gray.lab=function(gray){return[gray[0],0,0]},convert.gray.hex=function(gray){const val=255&Math.round(gray[0]/100*255),string=((val<<16)+(val<<8)+val).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert.rgb.gray=function(rgb){return[(rgb[0]+rgb[1]+rgb[2])/3/255*100]}},1094:function(module,exports,__webpack_require__){const conversions=__webpack_require__(1053),route=__webpack_require__(1096),convert={};Object.keys(conversions).forEach((fromModel=>{convert[fromModel]={},Object.defineProperty(convert[fromModel],"channels",{value:conversions[fromModel].channels}),Object.defineProperty(convert[fromModel],"labels",{value:conversions[fromModel].labels});const routes=route(fromModel);Object.keys(routes).forEach((toModel=>{const fn=routes[toModel];convert[fromModel][toModel]=function wrapRounded(fn){const wrappedFn=function(...args){const arg0=args[0];if(null==arg0)return arg0;arg0.length>1&&(args=arg0);const result=fn(args);if("object"==typeof result)for(let len=result.length,i=0;i1&&(args=arg0),fn(args))};return"conversion"in fn&&(wrappedFn.conversion=fn.conversion),wrappedFn}(fn)}))})),module.exports=convert},1095:function(module,exports,__webpack_require__){"use strict";module.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}},1096:function(module,exports,__webpack_require__){const conversions=__webpack_require__(1053);function deriveBFS(fromModel){const graph=function buildGraph(){const graph={},models=Object.keys(conversions);for(let len=models.length,i=0;i=wait||timeSinceLastCall<0||maxing&&time-lastInvokeTime>=maxWait}function timerExpired(){var time=now();if(shouldInvoke(time))return trailingEdge(time);timerId=setTimeout(timerExpired,function remainingWait(time){var timeWaiting=wait-(time-lastCallTime);return maxing?nativeMin(timeWaiting,maxWait-(time-lastInvokeTime)):timeWaiting}(time))}function trailingEdge(time){return timerId=void 0,trailing&&lastArgs?invokeFunc(time):(lastArgs=lastThis=void 0,result)}function debounced(){var time=now(),isInvoking=shouldInvoke(time);if(lastArgs=arguments,lastThis=this,lastCallTime=time,isInvoking){if(void 0===timerId)return leadingEdge(lastCallTime);if(maxing)return clearTimeout(timerId),timerId=setTimeout(timerExpired,wait),invokeFunc(lastCallTime)}return void 0===timerId&&(timerId=setTimeout(timerExpired,wait)),result}return wait=toNumber(wait)||0,isObject(options)&&(leading=!!options.leading,maxWait=(maxing="maxWait"in options)?nativeMax(toNumber(options.maxWait)||0,wait):maxWait,trailing="trailing"in options?!!options.trailing:trailing),debounced.cancel=function cancel(){void 0!==timerId&&clearTimeout(timerId),lastInvokeTime=0,lastArgs=lastCallTime=lastThis=timerId=void 0},debounced.flush=function flush(){return void 0===timerId?result:trailingEdge(now())},debounced}},1099:function(module,exports,__webpack_require__){var root=__webpack_require__(117);module.exports=function(){return root.Date.now()}},1100:function(module,exports,__webpack_require__){var baseTrim=__webpack_require__(1101),isObject=__webpack_require__(147),isSymbol=__webpack_require__(305),reIsBadHex=/^[-+]0x[0-9a-f]+$/i,reIsBinary=/^0b[01]+$/i,reIsOctal=/^0o[0-7]+$/i,freeParseInt=parseInt;module.exports=function toNumber(value){if("number"==typeof value)return value;if(isSymbol(value))return NaN;if(isObject(value)){var other="function"==typeof value.valueOf?value.valueOf():value;value=isObject(other)?other+"":other}if("string"!=typeof value)return 0===value?value:+value;value=baseTrim(value);var isBinary=reIsBinary.test(value);return isBinary||reIsOctal.test(value)?freeParseInt(value.slice(2),isBinary?2:8):reIsBadHex.test(value)?NaN:+value}},1101:function(module,exports,__webpack_require__){var trimmedEndIndex=__webpack_require__(1102),reTrimStart=/^\s+/;module.exports=function baseTrim(string){return string?string.slice(0,trimmedEndIndex(string)+1).replace(reTrimStart,""):string}},1102:function(module,exports){var reWhitespace=/\s/;module.exports=function trimmedEndIndex(string){for(var index=string.length;index--&&reWhitespace.test(string.charAt(index)););return index}},583:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return TooltipNote}));__webpack_require__(166),__webpack_require__(34),__webpack_require__(10);var react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Note=__webpack_require__(2).styled.div((function(_ref){var theme=_ref.theme;return{padding:"2px 6px",lineHeight:"16px",fontSize:10,fontWeight:theme.typography.weight.bold,color:theme.color.lightest,boxShadow:"0 0 5px 0 rgba(0, 0, 0, 0.3)",borderRadius:4,whiteSpace:"nowrap",pointerEvents:"none",zIndex:-1,background:"rgba(0, 0, 0, 0.4)",margin:6}})),TooltipNote=function TooltipNote(_ref2){var note=_ref2.note,props=_objectWithoutProperties(_ref2,["note"]);return react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(Note,props,note)};TooltipNote.displayName="TooltipNote"}}]); -------------------------------------------------------------------------------- /dist/5.d42ae67c724f357b6c90.manager.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{872:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ColorControl",(function(){return Color_ColorControl}));__webpack_require__(23),__webpack_require__(4),__webpack_require__(8),__webpack_require__(5),__webpack_require__(12),__webpack_require__(7),__webpack_require__(6),__webpack_require__(9),__webpack_require__(17),__webpack_require__(18),__webpack_require__(15),__webpack_require__(70),__webpack_require__(42),__webpack_require__(26),__webpack_require__(22),__webpack_require__(123),__webpack_require__(78),__webpack_require__(171),__webpack_require__(75),__webpack_require__(16),__webpack_require__(32),__webpack_require__(14);var react=__webpack_require__(0),react_default=__webpack_require__.n(react);function index_module_u(){return(index_module_u=Object.assign||function(e){for(var r=1;r=0||(o[t]=e[t]);return o}function index_module_i(e){var t=Object(react.useRef)(e),n=Object(react.useRef)((function(e){t.current&&t.current(e)}));return t.current=e,n.current}var index_module_s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e0:e.buttons>0)&&h.current?m(index_module_v(h.current,e,p.current)):t(!1)},r=function(){return t(!1)};function t(t){var n=b.current,o=t?self.addEventListener:self.removeEventListener;o(n?"touchmove":"mousemove",e),o(n?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,n=h.current;if(n&&(index_module_d(r),!function(e,r){return r&&!index_module_f(e)}(r,b.current)&&n)){if(index_module_f(r)){b.current=!0;var o=r.changedTouches||[];o.length&&(p.current=o[0].identifier)}n.focus(),m(index_module_v(n,r,p.current)),t(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),g({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]}),[g,m]),x=_[0],C=_[1],E=_[2];return Object(react.useEffect)((function(){return E}),[E]),react_default.a.createElement("div",index_module_u({},s,{onTouchStart:x,onMouseDown:x,className:"react-colorful__interactive",ref:h,onKeyDown:C,tabIndex:0,role:"slider"}))})),index_module_m=function(e){return e.filter(Boolean).join(" ")},index_module_g=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=index_module_m(["react-colorful__pointer",r.className]);return react_default.a.createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},react_default.a.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},index_module_p=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},index_module_b={grad:.9,turn:360,rad:360/(2*Math.PI)},index_module_=function(e){return"#"===e[0]&&(e=e.substr(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:1}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:1}},index_module_x=function(e,r){return void 0===r&&(r="deg"),Number(e)*(index_module_b[r]||1)},index_module_C=function(e){var r=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?index_module_H({h:index_module_x(r[1],r[2]),s:Number(r[3]),l:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},index_module_H=function(e){var r=e.s,t=e.l;return{h:e.h,s:(r*=(t<50?t:100-t)/100)>0?2*r/(t+r)*100:0,v:t+r,a:e.a}},M=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return{h:index_module_p(e.h),s:index_module_p(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:index_module_p(o/2),a:index_module_p(n,2)}},N=function(e){var r=M(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},w=function(e){var r=M(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},y=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return{r:index_module_p(255*[n,u,l,l,c,n][i]),g:index_module_p(255*[c,n,n,u,l,l][i]),b:index_module_p(255*[l,l,c,n,n,u][i]),a:index_module_p(o,2)}},O=function(e){var r=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?z({r:Number(r[1])/(r[2]?100/255:1),g:Number(r[3])/(r[4]?100/255:1),b:Number(r[5])/(r[6]?100/255:1),a:void 0===r[7]?1:Number(r[7])/(r[8]?100:1)}):{h:0,s:0,v:0,a:1}},j=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},z=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return{h:index_module_p(60*(u<0?u+6:u)),s:index_module_p(a?l/a*100:0),v:index_module_p(a/255*100),a:o}},K=react_default.a.memo((function(r){var t=r.hue,n=r.onChange,o=index_module_m(["react-colorful__hue",r.className]);return react_default.a.createElement("div",{className:o},react_default.a.createElement(index_module_h,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:index_module_s(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuetext":index_module_p(t)},react_default.a.createElement(index_module_g,{className:"react-colorful__hue-pointer",left:t/360,color:N({h:t,s:100,v:100,a:1})})))})),L=react_default.a.memo((function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:N({h:t.h,s:100,v:100,a:1})};return react_default.a.createElement("div",{className:"react-colorful__saturation",style:o},react_default.a.createElement(index_module_h,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:index_module_s(t.s+100*e.left,0,100),v:index_module_s(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+index_module_p(t.s)+"%, Brightness "+index_module_p(t.v)+"%"},react_default.a.createElement(index_module_g,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:N(t)})))})),A=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},D=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")};function S(e,t,l){var u=index_module_i(l),c=Object(react.useState)((function(){return e.toHsva(t)})),s=c[0],f=c[1],v=Object(react.useRef)({color:t,hsva:s});Object(react.useEffect)((function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r)}}),[t,e]),Object(react.useEffect)((function(){var r;A(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r))}),[s,e,u]);var d=Object(react.useCallback)((function(e){f((function(r){return Object.assign({},r,e)}))}),[]);return[s,d]}var T,F,P="undefined"!=typeof window?react.useLayoutEffect:react.useEffect,R=function(){P((function(){if("undefined"!=typeof document&&!F){(F=document.createElement("style")).innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}';var e=T||__webpack_require__.nc;e&&F.setAttribute("nonce",e),document.head.appendChild(F)}}),[])},$=function(r){var t=r.className,n=r.colorModel,o=r.color,a=void 0===o?n.defaultColor:o,l=r.onChange,i=index_module_c(r,["className","colorModel","color","onChange"]);R();var s=S(n,a,l),f=s[0],v=s[1],d=index_module_m(["react-colorful",t]);return react_default.a.createElement("div",index_module_u({},i,{className:d}),react_default.a.createElement(L,{hsva:f,onChange:v}),react_default.a.createElement(K,{hue:f.h,onChange:v,className:"react-colorful__last-control"}))},G={defaultColor:"000",toHsva:function(e){return z(index_module_(e))},fromHsva:function(e){return t=(r=y(e)).g,n=r.b,"#"+j(r.r)+j(t)+j(n);var r,t,n},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||A(index_module_(e),index_module_(r))}},Q=function(r){var t=r.className,n=r.hsva,o=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+w(Object.assign({},n,{a:0}))+", "+w(Object.assign({},n,{a:1}))+")"},l=index_module_m(["react-colorful__alpha",t]);return react_default.a.createElement("div",{className:l},react_default.a.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),react_default.a.createElement(index_module_h,{onMove:function(e){o({a:e.left})},onKey:function(e){o({a:index_module_s(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":index_module_p(100*n.a)+"%"},react_default.a.createElement(index_module_g,{className:"react-colorful__alpha-pointer",left:n.a,color:w(n)})))},U=function(r){var t=r.className,n=r.colorModel,o=r.color,a=void 0===o?n.defaultColor:o,l=r.onChange,i=index_module_c(r,["className","colorModel","color","onChange"]);R();var s=S(n,a,l),f=s[0],v=s[1],d=index_module_m(["react-colorful",t]);return react_default.a.createElement("div",index_module_u({},i,{className:d}),react_default.a.createElement(L,{hsva:f,onChange:v}),react_default.a.createElement(K,{hue:f.h,onChange:v}),react_default.a.createElement(Q,{hsva:f,onChange:v,className:"react-colorful__last-control"}))},Z={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:index_module_C,fromHsva:w,equal:D},me={defaultColor:"rgba(0, 0, 0, 1)",toHsva:O,fromHsva:function(e){var r=y(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:D},color_convert=__webpack_require__(930),color_convert_default=__webpack_require__.n(color_convert),throttle=__webpack_require__(424),throttle_default=__webpack_require__.n(throttle),esm=__webpack_require__(1);__webpack_require__(49);function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Note=esm.styled.div((function(_ref){var theme=_ref.theme;return{padding:"2px 6px",lineHeight:"16px",fontSize:10,fontWeight:theme.typography.weight.bold,color:theme.color.lightest,boxShadow:"0 0 5px 0 rgba(0, 0, 0, 0.3)",borderRadius:4,whiteSpace:"nowrap",pointerEvents:"none",zIndex:-1,background:"rgba(0, 0, 0, 0.4)",margin:6}})),TooltipNote_TooltipNote=function TooltipNote(_ref2){var note=_ref2.note,props=_objectWithoutProperties(_ref2,["note"]);return react_default.a.createElement(Note,props,note)};TooltipNote_TooltipNote.displayName="TooltipNote";var _ColorPicker,_fallbackColor,lazy_WithTooltip=__webpack_require__(421),esm_form=__webpack_require__(59),icon=__webpack_require__(63),helpers=__webpack_require__(41);function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){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 _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Wrapper=esm.styled.div({position:"relative",maxWidth:250}),PickerTooltip=Object(esm.styled)(lazy_WithTooltip.a)({position:"absolute",zIndex:1,top:4,left:4}),TooltipContent=esm.styled.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Color_Note=Object(esm.styled)(TooltipNote_TooltipNote)((function(_ref){return{fontFamily:_ref.theme.typography.fonts.base}})),Swatches=esm.styled.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=esm.styled.div((function(_ref2){var theme=_ref2.theme;return{width:16,height:16,boxShadow:_ref2.active?"".concat(theme.appBorderColor," 0 0 0 1px inset, ").concat(theme.color.mediumdark,"50 0 0 0 4px"):"".concat(theme.appBorderColor," 0 0 0 1px inset"),borderRadius:theme.appBorderRadius}})),Color_Swatch=function Swatch(_ref3){var value=_ref3.value,active=_ref3.active,onClick=_ref3.onClick,style=_ref3.style,props=Color_objectWithoutProperties(_ref3,["value","active","onClick","style"]),backgroundImage="linear-gradient(".concat(value,", ").concat(value,"), ").concat('url(\'data:image/svg+xml;charset=utf-8,\')',", linear-gradient(#fff, #fff)");return react_default.a.createElement(SwatchColor,_extends({},props,{active:active,onClick:onClick,style:Object.assign({},style,{backgroundImage:backgroundImage})}))};Color_Swatch.displayName="Swatch";var ColorSpace,Input=Object(esm.styled)(esm_form.a.Input)((function(_ref4){return{width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:_ref4.theme.typography.fonts.base}})),ToggleIcon=Object(esm.styled)(icon.a)((function(_ref5){return{position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:_ref5.theme.input.color}}));!function(ColorSpace){ColorSpace.RGB="rgb",ColorSpace.HSL="hsl",ColorSpace.HEX="hex"}(ColorSpace||(ColorSpace={}));var COLOR_SPACES=Object.values(ColorSpace),COLOR_REGEXP=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,RGB_REGEXP=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,HSL_REGEXP=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,HEX_REGEXP=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,SHORTHEX_REGEXP=/^\s*#?([0-9a-f]{3})\s*$/i,ColorPicker=(_defineProperty(_ColorPicker={},ColorSpace.HEX,(function(r){return react_default.a.createElement($,index_module_u({},r,{colorModel:G}))})),_defineProperty(_ColorPicker,ColorSpace.RGB,(function(r){return react_default.a.createElement(U,index_module_u({},r,{colorModel:me}))})),_defineProperty(_ColorPicker,ColorSpace.HSL,(function(r){return react_default.a.createElement(U,index_module_u({},r,{colorModel:Z}))})),_ColorPicker),fallbackColor=(_defineProperty(_fallbackColor={},ColorSpace.HEX,"transparent"),_defineProperty(_fallbackColor,ColorSpace.RGB,"rgba(0, 0, 0, 0)"),_defineProperty(_fallbackColor,ColorSpace.HSL,"hsla(0, 0%, 0%, 0)"),_fallbackColor),stringToArgs=function stringToArgs(value){var match=null==value?void 0:value.match(COLOR_REGEXP);if(!match)return[0,0,0,1];var _match=_slicedToArray(match,5),x=_match[1],y=_match[2],z=_match[3],_match$=_match[4];return[x,y,z,void 0===_match$?1:_match$].map(Number)},Color_parseValue=function parseValue(value){var _ref12;if(value){var valid=!0;if(RGB_REGEXP.test(value)){var _ref8,_stringToArgs2=_slicedToArray(stringToArgs(value),4),r=_stringToArgs2[0],g=_stringToArgs2[1],b=_stringToArgs2[2],a=_stringToArgs2[3],_ref7=_slicedToArray(color_convert_default.a.rgb.hsl([r,g,b])||[0,0,0],3),h=_ref7[0],s=_ref7[1],l=_ref7[2];return _defineProperty(_ref8={valid:valid,value:value,keyword:color_convert_default.a.rgb.keyword([r,g,b]),colorSpace:ColorSpace.RGB},ColorSpace.RGB,value),_defineProperty(_ref8,ColorSpace.HSL,"hsla(".concat(h,", ").concat(s,"%, ").concat(l,"%, ").concat(a,")")),_defineProperty(_ref8,ColorSpace.HEX,"#".concat(color_convert_default.a.rgb.hex([r,g,b]).toLowerCase())),_ref8}if(HSL_REGEXP.test(value)){var _ref11,_stringToArgs4=_slicedToArray(stringToArgs(value),4),_h=_stringToArgs4[0],_s2=_stringToArgs4[1],_l=_stringToArgs4[2],_a=_stringToArgs4[3],_ref10=_slicedToArray(color_convert_default.a.hsl.rgb([_h,_s2,_l])||[0,0,0],3),_r=_ref10[0],_g=_ref10[1],_b=_ref10[2];return _defineProperty(_ref11={valid:valid,value:value,keyword:color_convert_default.a.hsl.keyword([_h,_s2,_l]),colorSpace:ColorSpace.HSL},ColorSpace.RGB,"rgba(".concat(_r,", ").concat(_g,", ").concat(_b,", ").concat(_a,")")),_defineProperty(_ref11,ColorSpace.HSL,value),_defineProperty(_ref11,ColorSpace.HEX,"#".concat(color_convert_default.a.hsl.hex([_h,_s2,_l]).toLowerCase())),_ref11}var plain=value.replace("#",""),rgb=color_convert_default.a.keyword.rgb(plain)||color_convert_default.a.hex.rgb(plain),hsl=color_convert_default.a.rgb.hsl(rgb),mapped=value;if(/[^#a-f0-9]/i.test(value)?mapped=plain:HEX_REGEXP.test(value)&&(mapped="#".concat(plain)),mapped.startsWith("#"))valid=HEX_REGEXP.test(mapped);else try{color_convert_default.a.keyword.hex(mapped)}catch(e){valid=!1}return _defineProperty(_ref12={valid:valid,value:mapped,keyword:color_convert_default.a.rgb.keyword(rgb),colorSpace:ColorSpace.HEX},ColorSpace.RGB,"rgba(".concat(rgb[0],", ").concat(rgb[1],", ").concat(rgb[2],", 1)")),_defineProperty(_ref12,ColorSpace.HSL,"hsla(".concat(hsl[0],", ").concat(hsl[1],"%, ").concat(hsl[2],"%, 1)")),_defineProperty(_ref12,ColorSpace.HEX,mapped),_ref12}},Color_useColorInput=function useColorInput(initialValue,onChange){var _useState2=_slicedToArray(Object(react.useState)(initialValue||""),2),value=_useState2[0],setValue=_useState2[1],_useState4=_slicedToArray(Object(react.useState)((function(){return Color_parseValue(value)})),2),color=_useState4[0],setColor=_useState4[1],_useState6=_slicedToArray(Object(react.useState)((null==color?void 0:color.colorSpace)||ColorSpace.HEX),2),colorSpace=_useState6[0],setColorSpace=_useState6[1];Object(react.useEffect)((function(){void 0===initialValue&&(setValue(""),setColor(void 0),setColorSpace(ColorSpace.HEX))}),[initialValue]);var realValue=Object(react.useMemo)((function(){return function getRealValue(value,color,colorSpace){if(!value||null==color||!color.valid)return fallbackColor[colorSpace];if(colorSpace!==ColorSpace.HEX)return(null==color?void 0:color[colorSpace])||fallbackColor[colorSpace];if(!color.hex.startsWith("#"))try{return"#".concat(color_convert_default.a.keyword.hex(color.hex))}catch(e){return fallbackColor.hex}var short=color.hex.match(SHORTHEX_REGEXP);if(!short)return HEX_REGEXP.test(color.hex)?color.hex:fallbackColor.hex;var _short$1$split2=_slicedToArray(short[1].split(""),3),r=_short$1$split2[0],g=_short$1$split2[1],b=_short$1$split2[2];return"#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b)}(value,color,colorSpace).toLowerCase()}),[value,color,colorSpace]),updateValue=Object(react.useCallback)((function(update){var parsed=Color_parseValue(update);setValue((null==parsed?void 0:parsed.value)||update||""),parsed&&(setColor(parsed),setColorSpace(parsed.colorSpace),onChange(parsed.value))}),[onChange]),cycleColorSpace=Object(react.useCallback)((function(){var next=COLOR_SPACES.indexOf(colorSpace)+1;next>=COLOR_SPACES.length&&(next=0),setColorSpace(COLOR_SPACES[next]);var update=(null==color?void 0:color[COLOR_SPACES[next]])||"";setValue(update),onChange(update)}),[color,colorSpace,onChange]);return{value:value,realValue:realValue,updateValue:updateValue,color:color,colorSpace:colorSpace,cycleColorSpace:cycleColorSpace}},id=function id(value){return value.replace(/\s*/,"").toLowerCase()},Color_ColorControl=function ColorControl(_ref13){var name=_ref13.name,initialValue=_ref13.value,onChange=_ref13.onChange,onFocus=_ref13.onFocus,onBlur=_ref13.onBlur,presetColors=_ref13.presetColors,startOpen=_ref13.startOpen,_useColorInput=Color_useColorInput(initialValue,throttle_default()(onChange,200)),value=_useColorInput.value,realValue=_useColorInput.realValue,updateValue=_useColorInput.updateValue,color=_useColorInput.color,colorSpace=_useColorInput.colorSpace,cycleColorSpace=_useColorInput.cycleColorSpace,_usePresets=function usePresets(presetColors,currentColor,colorSpace){var _useState8=_slicedToArray(Object(react.useState)(null!=currentColor&¤tColor.valid?[currentColor]:[]),2),selectedColors=_useState8[0],setSelectedColors=_useState8[1];Object(react.useEffect)((function(){void 0===currentColor&&setSelectedColors([])}),[currentColor]);var presets=Object(react.useMemo)((function(){return(presetColors||[]).map((function(preset){return"string"==typeof preset?Color_parseValue(preset):preset.title?Object.assign({},Color_parseValue(preset.color),{keyword:preset.title}):Color_parseValue(preset.color)})).concat(selectedColors).filter(Boolean).slice(-27)}),[presetColors,selectedColors]),addPreset=Object(react.useCallback)((function(color){null!=color&&color.valid&&(presets.some((function(preset){return id(preset[colorSpace])===id(color[colorSpace])}))||setSelectedColors((function(arr){return arr.concat(color)})))}),[colorSpace,presets]);return{presets:presets,addPreset:addPreset}}(presetColors,color,colorSpace),presets=_usePresets.presets,addPreset=_usePresets.addPreset,Picker=ColorPicker[colorSpace];return react_default.a.createElement(Wrapper,null,react_default.a.createElement(PickerTooltip,{trigger:"click",startOpen:startOpen,closeOnClick:!0,onVisibilityChange:function onVisibilityChange(){return addPreset(color)},tooltip:react_default.a.createElement(TooltipContent,null,react_default.a.createElement(Picker,{color:"transparent"===realValue?"#000000":realValue,onChange:updateValue,onFocus:onFocus,onBlur:onBlur}),presets.length>0&&react_default.a.createElement(Swatches,null,presets.map((function(preset,index){return react_default.a.createElement(lazy_WithTooltip.a,{key:"".concat(preset.value,"-").concat(index),hasChrome:!1,tooltip:react_default.a.createElement(Color_Note,{note:preset.keyword||preset.value})},react_default.a.createElement(Color_Swatch,{value:preset[colorSpace],active:color&&id(preset[colorSpace])===id(color[colorSpace]),onClick:function onClick(){return updateValue(preset.value)}}))}))))},react_default.a.createElement(Color_Swatch,{value:realValue,style:{margin:4}})),react_default.a.createElement(Input,{id:Object(helpers.a)(name),value:value,onChange:function onChange(e){return updateValue(e.target.value)},onFocus:function onFocus(e){return e.target.select()},placeholder:"Choose color..."}),react_default.a.createElement(ToggleIcon,{icon:"markup",onClick:cycleColorSpace}))};Color_ColorControl.displayName="ColorControl";__webpack_exports__.default=Color_ColorControl},890:function(module,exports,__webpack_require__){const cssKeywords=__webpack_require__(931),reverseKeywords={};for(const key of Object.keys(cssKeywords))reverseKeywords[cssKeywords[key]]=key;const convert={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};module.exports=convert;for(const model of Object.keys(convert)){if(!("channels"in convert[model]))throw new Error("missing channels property: "+model);if(!("labels"in convert[model]))throw new Error("missing channel labels property: "+model);if(convert[model].labels.length!==convert[model].channels)throw new Error("channel and label counts mismatch: "+model);const{channels:channels,labels:labels}=convert[model];delete convert[model].channels,delete convert[model].labels,Object.defineProperty(convert[model],"channels",{value:channels}),Object.defineProperty(convert[model],"labels",{value:labels})}convert.rgb.hsl=function(rgb){const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,min=Math.min(r,g,b),max=Math.max(r,g,b),delta=max-min;let h,s;max===min?h=0:r===max?h=(g-b)/delta:g===max?h=2+(b-r)/delta:b===max&&(h=4+(r-g)/delta),h=Math.min(60*h,360),h<0&&(h+=360);const l=(min+max)/2;return s=max===min?0:l<=.5?delta/(max+min):delta/(2-max-min),[h,100*s,100*l]},convert.rgb.hsv=function(rgb){let rdif,gdif,bdif,h,s;const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,v=Math.max(r,g,b),diff=v-Math.min(r,g,b),diffc=function(c){return(v-c)/6/diff+.5};return 0===diff?(h=0,s=0):(s=diff/v,rdif=diffc(r),gdif=diffc(g),bdif=diffc(b),r===v?h=bdif-gdif:g===v?h=1/3+rdif-bdif:b===v&&(h=2/3+gdif-rdif),h<0?h+=1:h>1&&(h-=1)),[360*h,100*s,100*v]},convert.rgb.hwb=function(rgb){const r=rgb[0],g=rgb[1];let b=rgb[2];const h=convert.rgb.hsl(rgb)[0],w=1/255*Math.min(r,Math.min(g,b));return b=1-1/255*Math.max(r,Math.max(g,b)),[h,100*w,100*b]},convert.rgb.cmyk=function(rgb){const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,k=Math.min(1-r,1-g,1-b);return[100*((1-r-k)/(1-k)||0),100*((1-g-k)/(1-k)||0),100*((1-b-k)/(1-k)||0),100*k]},convert.rgb.keyword=function(rgb){const reversed=reverseKeywords[rgb];if(reversed)return reversed;let currentClosestKeyword,currentClosestDistance=1/0;for(const keyword of Object.keys(cssKeywords)){const value=cssKeywords[keyword],distance=(y=value,((x=rgb)[0]-y[0])**2+(x[1]-y[1])**2+(x[2]-y[2])**2);distance.04045?((r+.055)/1.055)**2.4:r/12.92,g=g>.04045?((g+.055)/1.055)**2.4:g/12.92,b=b>.04045?((b+.055)/1.055)**2.4:b/12.92;return[100*(.4124*r+.3576*g+.1805*b),100*(.2126*r+.7152*g+.0722*b),100*(.0193*r+.1192*g+.9505*b)]},convert.rgb.lab=function(rgb){const xyz=convert.rgb.xyz(rgb);let x=xyz[0],y=xyz[1],z=xyz[2];x/=95.047,y/=100,z/=108.883,x=x>.008856?x**(1/3):7.787*x+16/116,y=y>.008856?y**(1/3):7.787*y+16/116,z=z>.008856?z**(1/3):7.787*z+16/116;return[116*y-16,500*(x-y),200*(y-z)]},convert.hsl.rgb=function(hsl){const h=hsl[0]/360,s=hsl[1]/100,l=hsl[2]/100;let t2,t3,val;if(0===s)return val=255*l,[val,val,val];t2=l<.5?l*(1+s):l+s-l*s;const t1=2*l-t2,rgb=[0,0,0];for(let i=0;i<3;i++)t3=h+1/3*-(i-1),t3<0&&t3++,t3>1&&t3--,val=6*t3<1?t1+6*(t2-t1)*t3:2*t3<1?t2:3*t3<2?t1+(t2-t1)*(2/3-t3)*6:t1,rgb[i]=255*val;return rgb},convert.hsl.hsv=function(hsl){const h=hsl[0];let s=hsl[1]/100,l=hsl[2]/100,smin=s;const lmin=Math.max(l,.01);l*=2,s*=l<=1?l:2-l,smin*=lmin<=1?lmin:2-lmin;return[h,100*(0===l?2*smin/(lmin+smin):2*s/(l+s)),100*((l+s)/2)]},convert.hsv.rgb=function(hsv){const h=hsv[0]/60,s=hsv[1]/100;let v=hsv[2]/100;const hi=Math.floor(h)%6,f=h-Math.floor(h),p=255*v*(1-s),q=255*v*(1-s*f),t=255*v*(1-s*(1-f));switch(v*=255,hi){case 0:return[v,t,p];case 1:return[q,v,p];case 2:return[p,v,t];case 3:return[p,q,v];case 4:return[t,p,v];case 5:return[v,p,q]}},convert.hsv.hsl=function(hsv){const h=hsv[0],s=hsv[1]/100,v=hsv[2]/100,vmin=Math.max(v,.01);let sl,l;l=(2-s)*v;const lmin=(2-s)*vmin;return sl=s*vmin,sl/=lmin<=1?lmin:2-lmin,sl=sl||0,l/=2,[h,100*sl,100*l]},convert.hwb.rgb=function(hwb){const h=hwb[0]/360;let wh=hwb[1]/100,bl=hwb[2]/100;const ratio=wh+bl;let f;ratio>1&&(wh/=ratio,bl/=ratio);const i=Math.floor(6*h),v=1-bl;f=6*h-i,0!=(1&i)&&(f=1-f);const n=wh+f*(v-wh);let r,g,b;switch(i){default:r=v,g=n,b=wh;break;case 1:r=n,g=v,b=wh;break;case 2:r=wh,g=v,b=n;break;case 3:r=wh,g=n,b=v;break;case 4:r=n,g=wh,b=v;break;case 5:r=v,g=wh,b=n}return[255*r,255*g,255*b]},convert.cmyk.rgb=function(cmyk){const c=cmyk[0]/100,m=cmyk[1]/100,y=cmyk[2]/100,k=cmyk[3]/100;return[255*(1-Math.min(1,c*(1-k)+k)),255*(1-Math.min(1,m*(1-k)+k)),255*(1-Math.min(1,y*(1-k)+k))]},convert.xyz.rgb=function(xyz){const x=xyz[0]/100,y=xyz[1]/100,z=xyz[2]/100;let r,g,b;return r=3.2406*x+-1.5372*y+-.4986*z,g=-.9689*x+1.8758*y+.0415*z,b=.0557*x+-.204*y+1.057*z,r=r>.0031308?1.055*r**(1/2.4)-.055:12.92*r,g=g>.0031308?1.055*g**(1/2.4)-.055:12.92*g,b=b>.0031308?1.055*b**(1/2.4)-.055:12.92*b,r=Math.min(Math.max(0,r),1),g=Math.min(Math.max(0,g),1),b=Math.min(Math.max(0,b),1),[255*r,255*g,255*b]},convert.xyz.lab=function(xyz){let x=xyz[0],y=xyz[1],z=xyz[2];x/=95.047,y/=100,z/=108.883,x=x>.008856?x**(1/3):7.787*x+16/116,y=y>.008856?y**(1/3):7.787*y+16/116,z=z>.008856?z**(1/3):7.787*z+16/116;return[116*y-16,500*(x-y),200*(y-z)]},convert.lab.xyz=function(lab){let x,y,z;y=(lab[0]+16)/116,x=lab[1]/500+y,z=y-lab[2]/200;const y2=y**3,x2=x**3,z2=z**3;return y=y2>.008856?y2:(y-16/116)/7.787,x=x2>.008856?x2:(x-16/116)/7.787,z=z2>.008856?z2:(z-16/116)/7.787,x*=95.047,y*=100,z*=108.883,[x,y,z]},convert.lab.lch=function(lab){const l=lab[0],a=lab[1],b=lab[2];let h;h=360*Math.atan2(b,a)/2/Math.PI,h<0&&(h+=360);return[l,Math.sqrt(a*a+b*b),h]},convert.lch.lab=function(lch){const l=lch[0],c=lch[1],hr=lch[2]/360*2*Math.PI;return[l,c*Math.cos(hr),c*Math.sin(hr)]},convert.rgb.ansi16=function(args,saturation=null){const[r,g,b]=args;let value=null===saturation?convert.rgb.hsv(args)[2]:saturation;if(value=Math.round(value/50),0===value)return 30;let ansi=30+(Math.round(b/255)<<2|Math.round(g/255)<<1|Math.round(r/255));return 2===value&&(ansi+=60),ansi},convert.hsv.ansi16=function(args){return convert.rgb.ansi16(convert.hsv.rgb(args),args[2])},convert.rgb.ansi256=function(args){const r=args[0],g=args[1],b=args[2];if(r===g&&g===b)return r<8?16:r>248?231:Math.round((r-8)/247*24)+232;return 16+36*Math.round(r/255*5)+6*Math.round(g/255*5)+Math.round(b/255*5)},convert.ansi16.rgb=function(args){let color=args%10;if(0===color||7===color)return args>50&&(color+=3.5),color=color/10.5*255,[color,color,color];const mult=.5*(1+~~(args>50));return[(1&color)*mult*255,(color>>1&1)*mult*255,(color>>2&1)*mult*255]},convert.ansi256.rgb=function(args){if(args>=232){const c=10*(args-232)+8;return[c,c,c]}let rem;args-=16;return[Math.floor(args/36)/5*255,Math.floor((rem=args%36)/6)/5*255,rem%6/5*255]},convert.rgb.hex=function(args){const string=(((255&Math.round(args[0]))<<16)+((255&Math.round(args[1]))<<8)+(255&Math.round(args[2]))).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert.hex.rgb=function(args){const match=args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!match)return[0,0,0];let colorString=match[0];3===match[0].length&&(colorString=colorString.split("").map((char=>char+char)).join(""));const integer=parseInt(colorString,16);return[integer>>16&255,integer>>8&255,255&integer]},convert.rgb.hcg=function(rgb){const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,max=Math.max(Math.max(r,g),b),min=Math.min(Math.min(r,g),b),chroma=max-min;let grayscale,hue;return grayscale=chroma<1?min/(1-chroma):0,hue=chroma<=0?0:max===r?(g-b)/chroma%6:max===g?2+(b-r)/chroma:4+(r-g)/chroma,hue/=6,hue%=1,[360*hue,100*chroma,100*grayscale]},convert.hsl.hcg=function(hsl){const s=hsl[1]/100,l=hsl[2]/100,c=l<.5?2*s*l:2*s*(1-l);let f=0;return c<1&&(f=(l-.5*c)/(1-c)),[hsl[0],100*c,100*f]},convert.hsv.hcg=function(hsv){const s=hsv[1]/100,v=hsv[2]/100,c=s*v;let f=0;return c<1&&(f=(v-c)/(1-c)),[hsv[0],100*c,100*f]},convert.hcg.rgb=function(hcg){const h=hcg[0]/360,c=hcg[1]/100,g=hcg[2]/100;if(0===c)return[255*g,255*g,255*g];const pure=[0,0,0],hi=h%1*6,v=hi%1,w=1-v;let mg=0;switch(Math.floor(hi)){case 0:pure[0]=1,pure[1]=v,pure[2]=0;break;case 1:pure[0]=w,pure[1]=1,pure[2]=0;break;case 2:pure[0]=0,pure[1]=1,pure[2]=v;break;case 3:pure[0]=0,pure[1]=w,pure[2]=1;break;case 4:pure[0]=v,pure[1]=0,pure[2]=1;break;default:pure[0]=1,pure[1]=0,pure[2]=w}return mg=(1-c)*g,[255*(c*pure[0]+mg),255*(c*pure[1]+mg),255*(c*pure[2]+mg)]},convert.hcg.hsv=function(hcg){const c=hcg[1]/100,v=c+hcg[2]/100*(1-c);let f=0;return v>0&&(f=c/v),[hcg[0],100*f,100*v]},convert.hcg.hsl=function(hcg){const c=hcg[1]/100,l=hcg[2]/100*(1-c)+.5*c;let s=0;return l>0&&l<.5?s=c/(2*l):l>=.5&&l<1&&(s=c/(2*(1-l))),[hcg[0],100*s,100*l]},convert.hcg.hwb=function(hcg){const c=hcg[1]/100,v=c+hcg[2]/100*(1-c);return[hcg[0],100*(v-c),100*(1-v)]},convert.hwb.hcg=function(hwb){const w=hwb[1]/100,v=1-hwb[2]/100,c=v-w;let g=0;return c<1&&(g=(v-c)/(1-c)),[hwb[0],100*c,100*g]},convert.apple.rgb=function(apple){return[apple[0]/65535*255,apple[1]/65535*255,apple[2]/65535*255]},convert.rgb.apple=function(rgb){return[rgb[0]/255*65535,rgb[1]/255*65535,rgb[2]/255*65535]},convert.gray.rgb=function(args){return[args[0]/100*255,args[0]/100*255,args[0]/100*255]},convert.gray.hsl=function(args){return[0,0,args[0]]},convert.gray.hsv=convert.gray.hsl,convert.gray.hwb=function(gray){return[0,100,gray[0]]},convert.gray.cmyk=function(gray){return[0,0,0,gray[0]]},convert.gray.lab=function(gray){return[gray[0],0,0]},convert.gray.hex=function(gray){const val=255&Math.round(gray[0]/100*255),string=((val<<16)+(val<<8)+val).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert.rgb.gray=function(rgb){return[(rgb[0]+rgb[1]+rgb[2])/3/255*100]}},930:function(module,exports,__webpack_require__){const conversions=__webpack_require__(890),route=__webpack_require__(932),convert={};Object.keys(conversions).forEach((fromModel=>{convert[fromModel]={},Object.defineProperty(convert[fromModel],"channels",{value:conversions[fromModel].channels}),Object.defineProperty(convert[fromModel],"labels",{value:conversions[fromModel].labels});const routes=route(fromModel);Object.keys(routes).forEach((toModel=>{const fn=routes[toModel];convert[fromModel][toModel]=function wrapRounded(fn){const wrappedFn=function(...args){const arg0=args[0];if(null==arg0)return arg0;arg0.length>1&&(args=arg0);const result=fn(args);if("object"==typeof result)for(let len=result.length,i=0;i1&&(args=arg0),fn(args))};return"conversion"in fn&&(wrappedFn.conversion=fn.conversion),wrappedFn}(fn)}))})),module.exports=convert},931:function(module,exports,__webpack_require__){"use strict";module.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}},932:function(module,exports,__webpack_require__){const conversions=__webpack_require__(890);function deriveBFS(fromModel){const graph=function buildGraph(){const graph={},models=Object.keys(conversions);for(let len=models.length,i=0;i.os-host":{display:"block",overflow:"hidden",boxSizing:"border-box",height:"100%!important",width:"100%!important",minWidth:"100%!important",minHeight:"100%!important",margin:"0!important",position:"absolute!important"},"html.os-html>.os-host>.os-padding":{position:"absolute"},"body.os-dragging, body.os-dragging *":{cursor:"default"},".os-host, .os-host-textarea":{position:"relative",overflow:"visible!important",flexDirection:"column",flexWrap:"nowrap",justifyContent:"flex-start",alignContent:"flex-start",alignItems:"flex-start"},".os-host-flexbox":{overflow:"hidden!important",display:"flex"},".os-host-flexbox>.os-size-auto-observer":{height:"inherit!important"},".os-host-flexbox>.os-content-glue":{flexGrow:1,flexShrink:0},".os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue":{minHeight:0,minWidth:0,flexGrow:0,flexShrink:1,flexBasis:"auto"},"#os-dummy-scrollbar-size":{position:"fixed",opacity:0,visibility:"hidden",overflow:"scroll",height:500,width:500},"#os-dummy-scrollbar-size>div":{width:"200%",height:"200%",margin:10},"#os-dummy-scrollbar-size, .os-viewport":{},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport":{scrollbarWidth:"none!important"},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner":{display:"none!important",width:"0!important",height:"0!important",visibility:"hidden!important",background:"0 0!important"},".os-content-glue":{boxSizing:"inherit",maxHeight:"100%",maxWidth:"100%",width:"100%",pointerEvents:"none"},".os-padding":{boxSizing:"inherit",direction:"inherit",position:"absolute",overflow:"visible",padding:0,margin:0,left:0,top:0,bottom:0,right:0,width:"auto!important",height:"auto!important",zIndex:1},".os-host-overflow>.os-padding":{overflow:"hidden"},".os-viewport":{direction:"inherit!important",boxSizing:"inherit!important",resize:"none!important",outline:"0!important",position:"absolute",overflow:"hidden",top:0,left:0,bottom:0,right:0,padding:0,margin:0},".os-content-arrange":{position:"absolute",zIndex:-1,minHeight:1,minWidth:1,pointerEvents:"none"},".os-content":{direction:"inherit",boxSizing:"border-box!important",position:"relative",display:"block",height:"100%",width:"100%",visibility:"visible"},".os-content:before, .os-content:after":{content:"''",display:"table",width:0,height:0,lineHeight:0,fontSize:0},".os-content>.os-textarea":{boxSizing:"border-box!important",direction:"inherit!important",background:"0 0!important",outline:"0 transparent!important",overflow:"hidden!important",position:"absolute!important",display:"block!important",top:"0!important",left:"0!important",margin:"0!important",borderRadius:"0!important",float:"none!important",filter:"none!important",border:"0!important",resize:"none!important",transform:"none!important",maxWidth:"none!important",maxHeight:"none!important",boxShadow:"none!important",perspective:"none!important",opacity:"1!important",zIndex:"1!important",clip:"auto!important",verticalAlign:"baseline!important",padding:0},".os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea":{right:"0!important"},".os-content>.os-textarea-cover":{zIndex:-1,pointerEvents:"none"},".os-content>.os-textarea[wrap=off]":{whiteSpace:"pre!important",margin:"0!important"},".os-text-inherit":{fontFamily:"inherit",fontSize:"inherit",fontWeight:"inherit",fontStyle:"inherit",fontVariant:"inherit",textTransform:"inherit",textDecoration:"inherit",textIndent:"inherit",textAlign:"inherit",textShadow:"inherit",textOverflow:"inherit",letterSpacing:"inherit",wordSpacing:"inherit",lineHeight:"inherit",unicodeBidi:"inherit",direction:"inherit",color:"inherit",cursor:"text"},".os-resize-observer, .os-resize-observer-host":{boxSizing:"inherit",display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1},".os-resize-observer-host":{padding:"inherit",border:"inherit",borderColor:"transparent",borderStyle:"solid",boxSizing:"border-box"},".os-resize-observer-host:after":{content:"''"},".os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after":{height:"200%",width:"200%",padding:"inherit",border:"inherit",margin:0,display:"block",boxSizing:"content-box"},".os-resize-observer.observed, object.os-resize-observer":{boxSizing:"border-box!important"},".os-size-auto-observer":{boxSizing:"inherit!important",height:"100%",width:"inherit",maxWidth:1,position:"relative",float:"left",maxHeight:1,overflow:"hidden",zIndex:-1,padding:0,margin:0,pointerEvents:"none",flexGrow:"inherit",flexShrink:0,flexBasis:0},".os-size-auto-observer>.os-resize-observer":{width:"1000%",height:"1000%",minHeight:1,minWidth:1},".os-resize-observer-item":{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden",zIndex:-1,opacity:0,direction:"ltr!important",flex:"none!important"},".os-resize-observer-item-final":{position:"absolute",left:0,top:0,transition:"none!important",flex:"none!important"},".os-resize-observer":{animationDuration:".001s",animationName:"".concat(hsResizeObserverDummyAnimation)},".os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner":{transition:"opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s"},"html.os-html>.os-host>.os-scrollbar":{position:"absolute",zIndex:999999},".os-scrollbar, .os-scrollbar-corner":{position:"absolute",opacity:1,zIndex:1},".os-scrollbar-corner":{bottom:0,right:0,height:10,width:10,backgroundColor:"transparent"},".os-scrollbar":{pointerEvents:"none",padding:2,boxSizing:"border-box",background:0},".os-scrollbar-track":{pointerEvents:"auto",position:"relative",height:"100%",width:"100%",padding:"0!important",border:"0!important"},".os-scrollbar-handle":{pointerEvents:"auto",position:"absolute",width:"100%",height:"100%"},".os-scrollbar-handle-off, .os-scrollbar-track-off":{pointerEvents:"none"},".os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *":{pointerEvents:"none!important"},".os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle":{opacity:"0!important"},".os-scrollbar-horizontal":{bottom:0,left:0,right:10,height:10},".os-scrollbar-vertical":{top:0,right:0,bottom:10,width:10},".os-host-rtl>.os-scrollbar-horizontal":{right:0},".os-host-rtl>.os-scrollbar-vertical":{right:"auto",left:0},".os-host-rtl>.os-scrollbar-corner":{right:"auto",left:0},".os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner":{opacity:0,visibility:"hidden",pointerEvents:"none"},".os-scrollbar-corner-resize-both":{cursor:"nwse-resize"},".os-host-rtl>.os-scrollbar-corner-resize-both":{cursor:"nesw-resize"},".os-scrollbar-corner-resize-horizontal":{cursor:"ew-resize"},".os-scrollbar-corner-resize-vertical":{cursor:"ns-resize"},".os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize":{cursor:"default"},".os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical":{top:0,bottom:0},".os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal":{right:0,left:0},".os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize":{opacity:"1!important",visibility:"visible!important"},".os-scrollbar-corner.os-scrollbar-corner-resize":{backgroundImage:"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)",backgroundRepeat:"no-repeat",backgroundPosition:"100% 100%",pointerEvents:"auto!important"},".os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize":{transform:"scale(-1,1)"},".os-host-overflow":{overflow:"hidden!important"},".os-theme-dark.os-host-rtl>.os-scrollbar-horizontal":{left:10,right:0},".os-scrollbar.os-scrollbar-unusable":{background:0},".os-scrollbar>.os-scrollbar-track":{background:0},".os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle":{minWidth:30},".os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle":{minHeight:30},".os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{transition:"background-color .3s"},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track":{borderRadius:10},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{background:theme.color.darker,opacity:.5},".os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle":{opacity:.6},".os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before":{content:"''",position:"absolute",left:0,right:0,top:0,bottom:0,display:"block"},".os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before":{display:"none"},".os-scrollbar-horizontal .os-scrollbar-handle:before":{top:-6,bottom:-2},".os-scrollbar-vertical .os-scrollbar-handle:before":{left:-6,right:-2},".os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before":{right:-6,left:-2}}},GlobalScrollAreaStyles=function GlobalScrollAreaStyles(){return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.a,{styles:getScrollAreaStyles})};GlobalScrollAreaStyles.displayName="GlobalScrollAreaStyles",__webpack_exports__.default=GlobalScrollAreaStyles}}]); -------------------------------------------------------------------------------- /dist/7.8671f53238acd28d70c5.manager.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[7],{869:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getScrollAreaStyles",(function(){return getScrollAreaStyles}));__webpack_require__(16),__webpack_require__(53);var _templateObject,react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__),_storybook_theming__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(60);var hsResizeObserverDummyAnimation=Object(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.d)(_templateObject||(_templateObject=function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}(["0%{z-index:0}to{z-index:-1}"]))),getScrollAreaStyles=function getScrollAreaStyles(theme){return{"html.os-html, html.os-html>.os-host":{display:"block",overflow:"hidden",boxSizing:"border-box",height:"100%!important",width:"100%!important",minWidth:"100%!important",minHeight:"100%!important",margin:"0!important",position:"absolute!important"},"html.os-html>.os-host>.os-padding":{position:"absolute"},"body.os-dragging, body.os-dragging *":{cursor:"default"},".os-host, .os-host-textarea":{position:"relative",overflow:"visible!important",flexDirection:"column",flexWrap:"nowrap",justifyContent:"flex-start",alignContent:"flex-start",alignItems:"flex-start"},".os-host-flexbox":{overflow:"hidden!important",display:"flex"},".os-host-flexbox>.os-size-auto-observer":{height:"inherit!important"},".os-host-flexbox>.os-content-glue":{flexGrow:1,flexShrink:0},".os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue":{minHeight:0,minWidth:0,flexGrow:0,flexShrink:1,flexBasis:"auto"},"#os-dummy-scrollbar-size":{position:"fixed",opacity:0,visibility:"hidden",overflow:"scroll",height:500,width:500},"#os-dummy-scrollbar-size>div":{width:"200%",height:"200%",margin:10},"#os-dummy-scrollbar-size, .os-viewport":{},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport":{scrollbarWidth:"none!important"},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner":{display:"none!important",width:"0!important",height:"0!important",visibility:"hidden!important",background:"0 0!important"},".os-content-glue":{boxSizing:"inherit",maxHeight:"100%",maxWidth:"100%",width:"100%",pointerEvents:"none"},".os-padding":{boxSizing:"inherit",direction:"inherit",position:"absolute",overflow:"visible",padding:0,margin:0,left:0,top:0,bottom:0,right:0,width:"auto!important",height:"auto!important",zIndex:1},".os-host-overflow>.os-padding":{overflow:"hidden"},".os-viewport":{direction:"inherit!important",boxSizing:"inherit!important",resize:"none!important",outline:"0!important",position:"absolute",overflow:"hidden",top:0,left:0,bottom:0,right:0,padding:0,margin:0},".os-content-arrange":{position:"absolute",zIndex:-1,minHeight:1,minWidth:1,pointerEvents:"none"},".os-content":{direction:"inherit",boxSizing:"border-box!important",position:"relative",display:"block",height:"100%",width:"100%",visibility:"visible"},".os-content:before, .os-content:after":{content:"''",display:"table",width:0,height:0,lineHeight:0,fontSize:0},".os-content>.os-textarea":{boxSizing:"border-box!important",direction:"inherit!important",background:"0 0!important",outline:"0 transparent!important",overflow:"hidden!important",position:"absolute!important",display:"block!important",top:"0!important",left:"0!important",margin:"0!important",borderRadius:"0!important",float:"none!important",filter:"none!important",border:"0!important",resize:"none!important",transform:"none!important",maxWidth:"none!important",maxHeight:"none!important",boxShadow:"none!important",perspective:"none!important",opacity:"1!important",zIndex:"1!important",clip:"auto!important",verticalAlign:"baseline!important",padding:0},".os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea":{right:"0!important"},".os-content>.os-textarea-cover":{zIndex:-1,pointerEvents:"none"},".os-content>.os-textarea[wrap=off]":{whiteSpace:"pre!important",margin:"0!important"},".os-text-inherit":{fontFamily:"inherit",fontSize:"inherit",fontWeight:"inherit",fontStyle:"inherit",fontVariant:"inherit",textTransform:"inherit",textDecoration:"inherit",textIndent:"inherit",textAlign:"inherit",textShadow:"inherit",textOverflow:"inherit",letterSpacing:"inherit",wordSpacing:"inherit",lineHeight:"inherit",unicodeBidi:"inherit",direction:"inherit",color:"inherit",cursor:"text"},".os-resize-observer, .os-resize-observer-host":{boxSizing:"inherit",display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1},".os-resize-observer-host":{padding:"inherit",border:"inherit",borderColor:"transparent",borderStyle:"solid",boxSizing:"border-box"},".os-resize-observer-host:after":{content:"''"},".os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after":{height:"200%",width:"200%",padding:"inherit",border:"inherit",margin:0,display:"block",boxSizing:"content-box"},".os-resize-observer.observed, object.os-resize-observer":{boxSizing:"border-box!important"},".os-size-auto-observer":{boxSizing:"inherit!important",height:"100%",width:"inherit",maxWidth:1,position:"relative",float:"left",maxHeight:1,overflow:"hidden",zIndex:-1,padding:0,margin:0,pointerEvents:"none",flexGrow:"inherit",flexShrink:0,flexBasis:0},".os-size-auto-observer>.os-resize-observer":{width:"1000%",height:"1000%",minHeight:1,minWidth:1},".os-resize-observer-item":{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden",zIndex:-1,opacity:0,direction:"ltr!important",flex:"none!important"},".os-resize-observer-item-final":{position:"absolute",left:0,top:0,transition:"none!important",flex:"none!important"},".os-resize-observer":{animationDuration:".001s",animationName:"".concat(hsResizeObserverDummyAnimation)},".os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner":{transition:"opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s"},"html.os-html>.os-host>.os-scrollbar":{position:"absolute",zIndex:999999},".os-scrollbar, .os-scrollbar-corner":{position:"absolute",opacity:1,zIndex:1},".os-scrollbar-corner":{bottom:0,right:0,height:10,width:10,backgroundColor:"transparent"},".os-scrollbar":{pointerEvents:"none",padding:2,boxSizing:"border-box",background:0},".os-scrollbar-track":{pointerEvents:"auto",position:"relative",height:"100%",width:"100%",padding:"0!important",border:"0!important"},".os-scrollbar-handle":{pointerEvents:"auto",position:"absolute",width:"100%",height:"100%"},".os-scrollbar-handle-off, .os-scrollbar-track-off":{pointerEvents:"none"},".os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *":{pointerEvents:"none!important"},".os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle":{opacity:"0!important"},".os-scrollbar-horizontal":{bottom:0,left:0,right:10,height:10},".os-scrollbar-vertical":{top:0,right:0,bottom:10,width:10},".os-host-rtl>.os-scrollbar-horizontal":{right:0},".os-host-rtl>.os-scrollbar-vertical":{right:"auto",left:0},".os-host-rtl>.os-scrollbar-corner":{right:"auto",left:0},".os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner":{opacity:0,visibility:"hidden",pointerEvents:"none"},".os-scrollbar-corner-resize-both":{cursor:"nwse-resize"},".os-host-rtl>.os-scrollbar-corner-resize-both":{cursor:"nesw-resize"},".os-scrollbar-corner-resize-horizontal":{cursor:"ew-resize"},".os-scrollbar-corner-resize-vertical":{cursor:"ns-resize"},".os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize":{cursor:"default"},".os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical":{top:0,bottom:0},".os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal":{right:0,left:0},".os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize":{opacity:"1!important",visibility:"visible!important"},".os-scrollbar-corner.os-scrollbar-corner-resize":{backgroundImage:"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)",backgroundRepeat:"no-repeat",backgroundPosition:"100% 100%",pointerEvents:"auto!important"},".os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize":{transform:"scale(-1,1)"},".os-host-overflow":{overflow:"hidden!important"},".os-theme-dark.os-host-rtl>.os-scrollbar-horizontal":{left:10,right:0},".os-scrollbar.os-scrollbar-unusable":{background:0},".os-scrollbar>.os-scrollbar-track":{background:0},".os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle":{minWidth:30},".os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle":{minHeight:30},".os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{transition:"background-color .3s"},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track":{borderRadius:10},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{background:theme.color.darker,opacity:.5},".os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle":{opacity:.6},".os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before":{content:"''",position:"absolute",left:0,right:0,top:0,bottom:0,display:"block"},".os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before":{display:"none"},".os-scrollbar-horizontal .os-scrollbar-handle:before":{top:-6,bottom:-2},".os-scrollbar-vertical .os-scrollbar-handle:before":{left:-6,right:-2},".os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before":{right:-6,left:-2}}},GlobalScrollAreaStyles=function GlobalScrollAreaStyles(){return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.a,{styles:getScrollAreaStyles})};GlobalScrollAreaStyles.displayName="GlobalScrollAreaStyles",__webpack_exports__.default=GlobalScrollAreaStyles}}]); -------------------------------------------------------------------------------- /dist/8.345d50ec3c7aacb57358.manager.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{937:function(module,exports){module.exports=function(e,n){return n=n||{},new Promise((function(t,r){var s=new XMLHttpRequest,o=[],u=[],i={},a=function(){return{ok:2==(s.status/100|0),statusText:s.statusText,status:s.status,url:s.responseURL,text:function(){return Promise.resolve(s.responseText)},json:function(){return Promise.resolve(s.responseText).then(JSON.parse)},blob:function(){return Promise.resolve(new Blob([s.response]))},clone:a,headers:{keys:function(){return o},entries:function(){return u},get:function(e){return i[e.toLowerCase()]},has:function(e){return e.toLowerCase()in i}}}};for(var l in s.open(n.method||"get",e,!0),s.onload=function(){s.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,(function(e,n,t){o.push(n=n.toLowerCase()),u.push([n,t]),i[n]=i[n]?i[n]+","+t:t})),t(a())},s.onerror=r,s.withCredentials="include"==n.credentials,n.headers)s.setRequestHeader(l,n.headers[l]);s.send(n.body||null)}))}}}]); -------------------------------------------------------------------------------- /dist/ReactSliderVerify/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./index.scss"; 3 | interface IProps { 4 | value?: boolean; 5 | onChange?: Function; 6 | onSuccess?: Function; 7 | width?: number; 8 | height?: number; 9 | bgColor?: string; 10 | tips?: React.ReactChild; 11 | barWidth?: number; 12 | bar?: React.ReactChild; 13 | successBar?: React.ReactChild; 14 | successBgColor?: string; 15 | successTips?: React.ReactChild; 16 | successShowBar?: boolean; 17 | } 18 | declare const ReactSliderVerify: React.ForwardRefExoticComponent>; 19 | export default ReactSliderVerify; 20 | -------------------------------------------------------------------------------- /dist/ReactSliderVerify/useSliderVerify.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | interface IOptions { 3 | value?: boolean; 4 | onChange?: Function; 5 | onSuccess?: Function; 6 | innerRef?: any; 7 | width?: number; 8 | barWidth?: number; 9 | } 10 | export default function useSliderVerify(options: IOptions): { 11 | success: boolean; 12 | isMove: boolean; 13 | barLeft: number; 14 | modalWidth: number; 15 | refBar: import("react").MutableRefObject; 16 | }; 17 | export {}; 18 | -------------------------------------------------------------------------------- /dist/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "0.1a2e9809.iframe.bundle.js": "./0.1a2e9809.iframe.bundle.js", 4 | "main.css": "./static/css/main.7f0ff635.chunk.css", 5 | "main.js": "./main.64e3da6a.iframe.bundle.js", 6 | "main.css.map": "./static/css/main.7f0ff635.chunk.css.map", 7 | "runtime~main.js": "./runtime~main.951587fb.iframe.bundle.js", 8 | "vendors~main.css": "./static/css/vendors~main.d6072ea3.chunk.css", 9 | "vendors~main.js": "./vendors~main.281f2187.iframe.bundle.js", 10 | "vendors~main.css.map": "./static/css/vendors~main.d6072ea3.chunk.css.map", 11 | "vendors~main.js.map": "./vendors~main.281f2187.iframe.bundle.js.map", 12 | "4.083f25c3.iframe.bundle.js": "./4.083f25c3.iframe.bundle.js", 13 | "4.083f25c3.iframe.bundle.js.map": "./4.083f25c3.iframe.bundle.js.map", 14 | "5.227543b5.iframe.bundle.js": "./5.227543b5.iframe.bundle.js", 15 | "6.95abdf5a.iframe.bundle.js": "./6.95abdf5a.iframe.bundle.js", 16 | "6.95abdf5a.iframe.bundle.js.map": "./6.95abdf5a.iframe.bundle.js.map", 17 | "7.524f3cbc.iframe.bundle.js": "./7.524f3cbc.iframe.bundle.js", 18 | "4.083f25c3.iframe.bundle.js.LICENSE.txt": "./4.083f25c3.iframe.bundle.js.LICENSE.txt", 19 | "6.95abdf5a.iframe.bundle.js.LICENSE.txt": "./6.95abdf5a.iframe.bundle.js.LICENSE.txt", 20 | "iframe.html": "./iframe.html", 21 | "static/media/react-slider-verify.e536ddac.PNG": "./static/media/react-slider-verify.e536ddac.PNG", 22 | "vendors~main.281f2187.iframe.bundle.js.LICENSE.txt": "./vendors~main.281f2187.iframe.bundle.js.LICENSE.txt" 23 | }, 24 | "entrypoints": [ 25 | "runtime~main.951587fb.iframe.bundle.js", 26 | "static/css/vendors~main.d6072ea3.chunk.css", 27 | "vendors~main.281f2187.iframe.bundle.js", 28 | "static/css/main.7f0ff635.chunk.css", 29 | "main.64e3da6a.iframe.bundle.js" 30 | ] 31 | } -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShenBao/react-slider-verify/b3feb690b44183c3fac319a30f84b5d72d29b88a/dist/favicon.ico -------------------------------------------------------------------------------- /dist/fe.logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShenBao/react-slider-verify/b3feb690b44183c3fac319a30f84b5d72d29b88a/dist/fe.logo.png -------------------------------------------------------------------------------- /dist/iframe.html: -------------------------------------------------------------------------------- 1 | Storybook

No Preview

Sorry, but you either have no stories or none are selected somehow.

  • Please check the Storybook config.
  • Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.




--------------------------------------------------------------------------------
/dist/index.css:
--------------------------------------------------------------------------------
 1 | .react-slider-verify-wrapper {
 2 |   display: inline-block;
 3 |   width: 400px;
 4 |   height: 50px;
 5 |   background-color: #ccc;
 6 |   overflow: hidden;
 7 |   position: relative;
 8 |   line-height: 50px;
 9 |   -webkit-user-select: none;
10 |      -moz-user-select: none;
11 |       -ms-user-select: none;
12 |           user-select: none; }
13 |   .react-slider-verify-wrapper .slider-verify-tips {
14 |     position: absolute;
15 |     width: 100%;
16 |     z-index: 2;
17 |     text-align: center; }
18 |   .react-slider-verify-wrapper .slider-verify-bar {
19 |     width: 20%;
20 |     height: 100%;
21 |     position: absolute;
22 |     top: 0;
23 |     left: 0;
24 |     text-align: center;
25 |     background: #fff;
26 |     -webkit-box-sizing: border-box;
27 |             box-sizing: border-box;
28 |     color: #ccc;
29 |     cursor: move;
30 |     z-index: 3;
31 |     border: 1px solid #ccc; }
32 |   .react-slider-verify-wrapper .slider-verify-modal {
33 |     width: 20%;
34 |     height: 100%;
35 |     position: absolute;
36 |     top: 0;
37 |     left: 0;
38 |     background: #06ad06;
39 |     color: #fff; }
40 |   .react-slider-verify-wrapper.react-slider-verify-success .slider-verify-tips {
41 |     color: #fff; }
42 |   .react-slider-verify-wrapper.react-slider-verify-success .slider-verify-tips::before {
43 |     display: none; }
44 |   .react-slider-verify-wrapper.react-slider-verify-success .slider-verify-bar {
45 |     cursor: inherit; }
46 | 


--------------------------------------------------------------------------------
/dist/index.d.ts:
--------------------------------------------------------------------------------
1 | import ReactSliderVerify from "./ReactSliderVerify";
2 | export { ReactSliderVerify };
3 | export default ReactSliderVerify;
4 | 


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | Storybook



--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
  1 | (function (global, factory) {
  2 |   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
  3 |   typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
  4 |   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.reactSliderVerify = {}, global.React));
  5 | })(this, (function (exports, React) { 'use strict';
  6 | 
  7 |   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
  8 | 
  9 |   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 10 | 
 11 |   function _defineProperty(obj, key, value) {
 12 |     if (key in obj) {
 13 |       Object.defineProperty(obj, key, {
 14 |         value: value,
 15 |         enumerable: true,
 16 |         configurable: true,
 17 |         writable: true
 18 |       });
 19 |     } else {
 20 |       obj[key] = value;
 21 |     }
 22 | 
 23 |     return obj;
 24 |   }
 25 | 
 26 |   function _arrayWithHoles(arr) {
 27 |     if (Array.isArray(arr)) return arr;
 28 |   }
 29 | 
 30 |   function _iterableToArrayLimit(arr, i) {
 31 |     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 32 | 
 33 |     if (_i == null) return;
 34 |     var _arr = [];
 35 |     var _n = true;
 36 |     var _d = false;
 37 | 
 38 |     var _s, _e;
 39 | 
 40 |     try {
 41 |       for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
 42 |         _arr.push(_s.value);
 43 | 
 44 |         if (i && _arr.length === i) break;
 45 |       }
 46 |     } catch (err) {
 47 |       _d = true;
 48 |       _e = err;
 49 |     } finally {
 50 |       try {
 51 |         if (!_n && _i["return"] != null) _i["return"]();
 52 |       } finally {
 53 |         if (_d) throw _e;
 54 |       }
 55 |     }
 56 | 
 57 |     return _arr;
 58 |   }
 59 | 
 60 |   function _arrayLikeToArray(arr, len) {
 61 |     if (len == null || len > arr.length) len = arr.length;
 62 | 
 63 |     for (var i = 0, arr2 = new Array(len); i < len; i++) {
 64 |       arr2[i] = arr[i];
 65 |     }
 66 | 
 67 |     return arr2;
 68 |   }
 69 | 
 70 |   function _unsupportedIterableToArray(o, minLen) {
 71 |     if (!o) return;
 72 |     if (typeof o === "string") return _arrayLikeToArray(o, minLen);
 73 |     var n = Object.prototype.toString.call(o).slice(8, -1);
 74 |     if (n === "Object" && o.constructor) n = o.constructor.name;
 75 |     if (n === "Map" || n === "Set") return Array.from(o);
 76 |     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 77 |   }
 78 | 
 79 |   function _nonIterableRest() {
 80 |     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 81 |   }
 82 | 
 83 |   function _slicedToArray(arr, i) {
 84 |     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 85 |   }
 86 | 
 87 |   function useSliderVerify(options) {
 88 |     var value = options.value,
 89 |         onChange = options.onChange,
 90 |         onSuccess = options.onSuccess,
 91 |         innerRef = options.innerRef,
 92 |         _options$width = options.width,
 93 |         width = _options$width === void 0 ? 320 : _options$width,
 94 |         _options$barWidth = options.barWidth,
 95 |         barWidth = _options$barWidth === void 0 ? 80 : _options$barWidth;
 96 |     var refBar = React.useRef();
 97 |     var refTmpData = React.useRef({
 98 |       max: width - barWidth,
 99 |       offX: 0,
100 |       diff: 0,
101 |       isMove: false
102 |     });
103 | 
104 |     var _useState = React.useState(0),
105 |         _useState2 = _slicedToArray(_useState, 2),
106 |         barLeft = _useState2[0],
107 |         setBarLeft = _useState2[1];
108 | 
109 |     var _useState3 = React.useState(0),
110 |         _useState4 = _slicedToArray(_useState3, 2),
111 |         modalWidth = _useState4[0],
112 |         setModalWidth = _useState4[1];
113 | 
114 |     var _useState5 = React.useState(false),
115 |         _useState6 = _slicedToArray(_useState5, 2),
116 |         success = _useState6[0],
117 |         setSuccess = _useState6[1];
118 | 
119 |     var onMouseDown = function onMouseDown(e) {
120 |       // if (success) return;
121 |       refTmpData.current.offX = e.pageX;
122 |       document.addEventListener("mousemove", onMove);
123 |     };
124 | 
125 |     var onMove = function onMove(e) {
126 |       // if (success) return;
127 |       var diff = e.pageX - refTmpData.current.offX;
128 |       var barLeft = diff;
129 |       var modalWidth = diff;
130 |       refTmpData.current.diff = diff;
131 |       refTmpData.current.isMove = true; // 边界判断 最大值
132 | 
133 |       if (barLeft >= refTmpData.current.max) {
134 |         barLeft = refTmpData.current.max; // 是最大 max 的值
135 | 
136 |         modalWidth = width; // 最大宽度 是 外面容器的宽度
137 | 
138 |         refTmpData.current.isMove = false;
139 |         setSuccess(true);
140 |         onChange && onChange(true);
141 |         onSuccess && onSuccess(); // 移除事件
142 | 
143 |         document.removeEventListener("mousemove", onMove);
144 |         refBar.current.removeEventListener("mousedown", onMouseDown);
145 |       } // 边界判断 小于 0
146 | 
147 | 
148 |       if (diff <= 0) {
149 |         barLeft = 0;
150 |         modalWidth = 0;
151 |       }
152 | 
153 |       setBarLeft(barLeft);
154 |       setModalWidth(modalWidth);
155 |     };
156 | 
157 |     var onMouseUp = function onMouseUp() {
158 |       // 回到最初位置
159 |       if (refTmpData.current.diff < refTmpData.current.max) {
160 |         refTmpData.current.isMove = false;
161 |         setBarLeft(0);
162 |         setModalWidth(0);
163 |       }
164 | 
165 |       document.removeEventListener("mousemove", onMove);
166 |     };
167 | 
168 |     React.useEffect(function () {
169 |       var left = refBar.current.getBoundingClientRect().left;
170 |       refTmpData.current.offX = value ? left + width : left;
171 |       refTmpData.current.diff = value ? width : 0;
172 |       setBarLeft(value ? width - barWidth : 0);
173 |       setModalWidth(value ? width : 0);
174 |       setSuccess(!!value);
175 |       if (value) return;
176 |       refBar.current.addEventListener("mousedown", onMouseDown);
177 |       document.addEventListener("mouseup", onMouseUp);
178 |       return function () {
179 |         document.removeEventListener("mousemove", onMove);
180 |         document.removeEventListener("mouseup", onMouseUp);
181 |       };
182 |     }, [value]);
183 | 
184 |     var reset = function reset() {
185 |       setSuccess(false);
186 |       setBarLeft(0);
187 |       setModalWidth(0);
188 |       refBar.current.addEventListener("mousedown", onMouseDown);
189 |       document.removeEventListener("mousemove", onMove);
190 |       document.addEventListener("mouseup", onMouseUp);
191 |     };
192 | 
193 |     React.useImperativeHandle(innerRef, function () {
194 |       return {
195 |         reset: reset
196 |       };
197 |     });
198 |     return {
199 |       success: success,
200 |       isMove: refTmpData.current.isMove,
201 |       barLeft: barLeft,
202 |       modalWidth: modalWidth,
203 |       refBar: refBar
204 |     };
205 |   }
206 | 
207 |   function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
208 | 
209 |   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
210 |   var defaultProps = {
211 |     value: false,
212 |     width: 400,
213 |     height: 36,
214 |     bgColor: "#F2F3F5",
215 |     tips: "请按住滑块，拖动到最右边",
216 |     barWidth: 80,
217 |     bar: /*#__PURE__*/React__default["default"].createElement("span", null, " >>"),
218 |     successBar: "✅",
219 |     successBgColor: "#06ad06",
220 |     successTips: "验证已通过",
221 |     successShowBar: true
222 |   };
223 | 
224 |   function SliderVerify(props) {
225 |     var value = props.value,
226 |         onChange = props.onChange,
227 |         onSuccess = props.onSuccess,
228 |         innerRef = props.innerRef,
229 |         width = props.width,
230 |         height = props.height,
231 |         bgColor = props.bgColor,
232 |         tips = props.tips,
233 |         successBgColor = props.successBgColor,
234 |         successTips = props.successTips,
235 |         barWidth = props.barWidth,
236 |         bar = props.bar,
237 |         successBar = props.successBar,
238 |         successShowBar = props.successShowBar;
239 | 
240 |     var _useSliderVerify = useSliderVerify({
241 |       value: value,
242 |       onChange: onChange,
243 |       onSuccess: onSuccess,
244 |       innerRef: innerRef,
245 |       width: width,
246 |       barWidth: barWidth
247 |     }),
248 |         success = _useSliderVerify.success,
249 |         isMove = _useSliderVerify.isMove,
250 |         barLeft = _useSliderVerify.barLeft,
251 |         modalWidth = _useSliderVerify.modalWidth,
252 |         refBar = _useSliderVerify.refBar;
253 | 
254 |     var sliderVerifyStyle = {
255 |       backgroundColor: bgColor,
256 |       width: "".concat(width, "px"),
257 |       height: "".concat(height, "px"),
258 |       lineHeight: "".concat(height, "px")
259 |     };
260 |     var barStyle = {
261 |       width: "".concat(barWidth, "px"),
262 |       // left: `${barLeft}px`,
263 |       transitionDuration: !isMove ? ".4s" : "0s",
264 |       transform: "translateX(".concat(success && !successShowBar ? modalWidth : barLeft, "px)")
265 |     };
266 |     var modalStyle = {
267 |       backgroundColor: successBgColor,
268 |       width: "".concat(width, "px"),
269 |       left: "-".concat(width, "px"),
270 |       transitionDuration: !isMove ? ".4s" : "0s",
271 |       transform: "translateX(".concat(modalWidth, "px)")
272 |     };
273 |     var verifyTipsStyle = {
274 |       transform: "translateX(".concat(success ? 0 : barWidth, "px)"),
275 |       width: "".concat(success && !successShowBar ? width : width - barWidth, "px")
276 |     };
277 |     return /*#__PURE__*/React__default["default"].createElement("div", {
278 |       className: "react-slider-verify-wrapper ".concat(success ? "react-slider-verify-success" : ""),
279 |       style: sliderVerifyStyle
280 |     }, /*#__PURE__*/React__default["default"].createElement("span", {
281 |       className: "slider-verify-tips",
282 |       style: verifyTipsStyle
283 |     }, success ? successTips : tips), /*#__PURE__*/React__default["default"].createElement("div", {
284 |       className: "slider-verify-bar",
285 |       ref: refBar,
286 |       style: barStyle
287 |     }, success ? successBar : bar), /*#__PURE__*/React__default["default"].createElement("div", {
288 |       className: "slider-verify-modal",
289 |       style: modalStyle
290 |     }));
291 |   }
292 | 
293 |   SliderVerify.defaultProps = defaultProps;
294 |   var ReactSliderVerify = /*#__PURE__*/React.forwardRef(function (props, ref) {
295 |     return /*#__PURE__*/React__default["default"].createElement(SliderVerify, _objectSpread(_objectSpread({}, props), {}, {
296 |       innerRef: ref
297 |     }));
298 |   });
299 |   ReactSliderVerify.displayName = "ReactSliderVerify";
300 | 
301 |   exports.ReactSliderVerify = ReactSliderVerify;
302 |   exports["default"] = ReactSliderVerify;
303 | 
304 |   Object.defineProperty(exports, '__esModule', { value: true });
305 | 
306 | }));
307 | 


--------------------------------------------------------------------------------
/dist/index.min.css:
--------------------------------------------------------------------------------
1 | .react-slider-verify-wrapper{background-color:#ccc;display:inline-block;height:50px;line-height:50px;overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:400px}.react-slider-verify-wrapper .slider-verify-tips{position:absolute;text-align:center;width:100%;z-index:2}.react-slider-verify-wrapper .slider-verify-bar{background:#fff;border:1px solid #ccc;-webkit-box-sizing:border-box;box-sizing:border-box;color:#ccc;cursor:move;height:100%;left:0;position:absolute;text-align:center;top:0;width:20%;z-index:3}.react-slider-verify-wrapper .slider-verify-modal{background:#06ad06;color:#fff;height:100%;left:0;position:absolute;top:0;width:20%}.react-slider-verify-wrapper.react-slider-verify-success .slider-verify-tips{color:#fff}.react-slider-verify-wrapper.react-slider-verify-success .slider-verify-tips:before{display:none}.react-slider-verify-wrapper.react-slider-verify-success .slider-verify-bar{cursor:inherit}


--------------------------------------------------------------------------------
/dist/index.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).reactSliderVerify={},e.React)}(this,(function(e,t){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(t);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);t>r;r++)n[r]=e[r];return n}function a(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,c=[],a=!0,i=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(c.push(n.value),!t||c.length!==t);a=!0);}catch(e){i=!0,o=e}finally{try{a||null==r.return||r.return()}finally{if(i)throw o}}return c}}(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 i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function u(e){for(var t=1;arguments.length>t;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e){var r=e.width,o=e.height,c=e.bgColor,i=e.tips,u=e.successBgColor,s=e.successTips,f=e.barWidth,l=e.bar,d=e.successBar,m=e.successShowBar,v=function(e){var r=e.value,n=e.onChange,o=e.onSuccess,c=e.innerRef,i=e.width,u=void 0===i?320:i,s=e.barWidth,f=void 0===s?80:s,l=t.useRef(),d=t.useRef({max:u-f,offX:0,diff:0,isMove:!1}),m=a(t.useState(0),2),v=m[0],p=m[1],y=a(t.useState(0),2),b=y[0],h=y[1],g=a(t.useState(!1),2),w=g[0],E=g[1],O=function(e){d.current.offX=e.pageX,document.addEventListener("mousemove",j)},j=function e(t){var r=t.pageX-d.current.offX,c=r,a=r;d.current.diff=r,d.current.isMove=!0,d.current.max>c||(c=d.current.max,a=u,d.current.isMove=!1,E(!0),n&&n(!0),o&&o(),document.removeEventListener("mousemove",e),l.current.removeEventListener("mousedown",O)),r>0||(c=0,a=0),p(c),h(a)},x=function(){d.current.max>d.current.diff&&(d.current.isMove=!1,p(0),h(0)),document.removeEventListener("mousemove",j)};t.useEffect((function(){var e=l.current.getBoundingClientRect().left;if(d.current.offX=r?e+u:e,d.current.diff=r?u:0,p(r?u-f:0),h(r?u:0),E(!!r),!r)return l.current.addEventListener("mousedown",O),document.addEventListener("mouseup",x),function(){document.removeEventListener("mousemove",j),document.removeEventListener("mouseup",x)}}),[r]);var S=function(){E(!1),p(0),h(0),l.current.addEventListener("mousedown",O),document.removeEventListener("mousemove",j),document.addEventListener("mouseup",x)};return t.useImperativeHandle(c,(function(){return{reset:S}})),{success:w,isMove:d.current.isMove,barLeft:v,modalWidth:b,refBar:l}}({value:e.value,onChange:e.onChange,onSuccess:e.onSuccess,innerRef:e.innerRef,width:r,barWidth:f}),p=v.success,y=v.isMove,b=v.barLeft,h=v.modalWidth,g=v.refBar,w={backgroundColor:c,width:"".concat(r,"px"),height:"".concat(o,"px"),lineHeight:"".concat(o,"px")},E={width:"".concat(f,"px"),transitionDuration:y?"0s":".4s",transform:"translateX(".concat(p&&!m?h:b,"px)")},O={backgroundColor:u,width:"".concat(r,"px"),left:"-".concat(r,"px"),transitionDuration:y?"0s":".4s",transform:"translateX(".concat(h,"px)")},j={transform:"translateX(".concat(p?0:f,"px)"),width:"".concat(p&&!m?r:r-f,"px")};return n.default.createElement("div",{className:"react-slider-verify-wrapper ".concat(p?"react-slider-verify-success":""),style:w},n.default.createElement("span",{className:"slider-verify-tips",style:j},p?s:i),n.default.createElement("div",{className:"slider-verify-bar",ref:g,style:E},p?d:l),n.default.createElement("div",{className:"slider-verify-modal",style:O}))}s.defaultProps={value:!1,width:400,height:36,bgColor:"#F2F3F5",tips:"请按住滑块，拖动到最右边",barWidth:80,bar:n.default.createElement("span",null," >>"),successBar:"✅",successBgColor:"#06ad06",successTips:"验证已通过",successShowBar:!0};var f=t.forwardRef((function(e,t){return n.default.createElement(s,u(u({},e),{},{innerRef:t}))}));f.displayName="ReactSliderVerify",e.ReactSliderVerify=f,e.default=f,Object.defineProperty(e,"__esModule",{value:!0})}));
2 | 


--------------------------------------------------------------------------------
/dist/main.62d7da5ecdd05ae36249.manager.bundle.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[1],{475:function(module,exports,__webpack_require__){__webpack_require__(476),__webpack_require__(630),__webpack_require__(856),__webpack_require__(864),__webpack_require__(865),__webpack_require__(857),__webpack_require__(860),__webpack_require__(859),__webpack_require__(861),__webpack_require__(858),__webpack_require__(862),__webpack_require__(863),module.exports=__webpack_require__(866)},542:function(module,exports){}},[[475,2,3]]]);


--------------------------------------------------------------------------------
/dist/main.64e3da6a.iframe.bundle.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[1],{1017:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Default",(function(){return Default})),__webpack_require__.d(__webpack_exports__,"Reset",(function(){return Reset})),__webpack_require__.d(__webpack_exports__,"Fusion",(function(){return Fusion})),__webpack_require__.d(__webpack_exports__,"Antd",(function(){return Antd}));var objectSpread2=__webpack_require__(83),react=__webpack_require__(0),slicedToArray=(__webpack_require__(954),__webpack_require__(955),__webpack_require__(127));__webpack_require__(956);var jsx_runtime=__webpack_require__(20),defaultProps={value:!1,width:400,height:36,bgColor:"#F2F3F5",tips:"请按住滑块，拖动到最右边",barWidth:80,bar:Object(jsx_runtime.jsx)("span",{children:" >>"}),successBar:"✅",successBgColor:"#06ad06",successTips:"验证已通过",successShowBar:!0};function SliderVerify(props){var value=props.value,onChange=props.onChange,onSuccess=props.onSuccess,innerRef=props.innerRef,width=props.width,height=props.height,bgColor=props.bgColor,tips=props.tips,successBgColor=props.successBgColor,successTips=props.successTips,barWidth=props.barWidth,bar=props.bar,successBar=props.successBar,successShowBar=props.successShowBar,_useSliderVerify=function useSliderVerify(options){var value=options.value,onChange=options.onChange,onSuccess=options.onSuccess,innerRef=options.innerRef,_options$width=options.width,width=void 0===_options$width?320:_options$width,_options$barWidth=options.barWidth,barWidth=void 0===_options$barWidth?80:_options$barWidth,refBar=Object(react.useRef)(),refTmpData=Object(react.useRef)({max:width-barWidth,offX:0,diff:0,isMove:!1}),_useState=Object(react.useState)(0),_useState2=Object(slicedToArray.a)(_useState,2),barLeft=_useState2[0],setBarLeft=_useState2[1],_useState3=Object(react.useState)(0),_useState4=Object(slicedToArray.a)(_useState3,2),modalWidth=_useState4[0],setModalWidth=_useState4[1],_useState5=Object(react.useState)(!1),_useState6=Object(slicedToArray.a)(_useState5,2),success=_useState6[0],setSuccess=_useState6[1],onMouseDown=function onMouseDown(e){refTmpData.current.offX=e.pageX,document.addEventListener("mousemove",onMove)},onMove=function onMove(e){var diff=e.pageX-refTmpData.current.offX,barLeft=diff,modalWidth=diff;refTmpData.current.diff=diff,refTmpData.current.isMove=!0,barLeft>=refTmpData.current.max&&(barLeft=refTmpData.current.max,modalWidth=width,refTmpData.current.isMove=!1,setSuccess(!0),onChange&&onChange(!0),onSuccess&&onSuccess(),document.removeEventListener("mousemove",onMove),refBar.current.removeEventListener("mousedown",onMouseDown)),diff<=0&&(barLeft=0,modalWidth=0),setBarLeft(barLeft),setModalWidth(modalWidth)},onMouseUp=function onMouseUp(){refTmpData.current.diff >>"},description:"",name:"bar",required:!1,type:{name:"ReactChild"}},successBar:{defaultValue:{value:"✅"},description:"",name:"successBar",required:!1,type:{name:"ReactChild"}},successBgColor:{defaultValue:{value:"#06ad06"},description:"",name:"successBgColor",required:!1,type:{name:"string"}},successTips:{defaultValue:{value:"验证已通过"},description:"",name:"successTips",required:!1,type:{name:"ReactChild"}},successShowBar:{defaultValue:{value:"true"},description:"",name:"successShowBar",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/ReactSliderVerify/index.tsx#ReactSliderVerify"]={docgenInfo:ReactSliderVerify_ReactSliderVerify.__docgenInfo,name:"ReactSliderVerify",path:"src/ReactSliderVerify/index.tsx#ReactSliderVerify"})}catch(__react_docgen_typescript_loader_error){}var es_form=__webpack_require__(1035),es_field=__webpack_require__(582),input=__webpack_require__(1037),es_button=__webpack_require__(301),FormItem=es_form.a.Item,formItemLayout={labelCol:{fixedSpan:6},wrapperCol:{span:12}};var antd_es_form=__webpack_require__(1034),es_input=__webpack_require__(1036),antd_es_button=__webpack_require__(578);__webpack_exports__.default={parameters:{storySource:{source:'import React from "react";\nimport { ComponentStory, ComponentMeta } from "@storybook/react";\n\nimport "@alifd/next/dist/next.css";\nimport "antd/dist/antd.css";\n\nimport ReactSliderVerify from "../ReactSliderVerify";\nimport ResetTemplate from "./ResetTemplate";\nimport FusionTemplate from "./FusionTemplate";\nimport AntdTemplate from "./AntdTemplate";\n\nexport default {\n  title: "ReactSliderVerify",\n  component: ReactSliderVerify,\n// };\n} as ComponentMeta;\n\nconst DefaultTemplate: ComponentStory = (args) => (\n  \n);\n\nexport const Default = DefaultTemplate.bind({});\n\nexport const Reset = ResetTemplate.bind({});\n\nexport const Fusion = FusionTemplate.bind({});\nexport const Antd = AntdTemplate.bind({});\n',locationsMap:{default:{startLoc:{col:66,line:18},endLoc:{col:1,line:20},startBody:{col:66,line:18},endBody:{col:1,line:20}},reset:{startLoc:{col:21,line:24},endLoc:{col:43,line:24},startBody:{col:21,line:24},endBody:{col:43,line:24}},fusion:{startLoc:{col:22,line:26},endLoc:{col:45,line:26},startBody:{col:22,line:26},endBody:{col:45,line:26}},antd:{startLoc:{col:20,line:27},endLoc:{col:41,line:27},startBody:{col:20,line:27},endBody:{col:41,line:27}}}}},title:"ReactSliderVerify",component:src_ReactSliderVerify};var Default=function DefaultTemplate(args){return Object(jsx_runtime.jsx)(src_ReactSliderVerify,Object(objectSpread2.a)({},args))}.bind({}),Reset=function ResetTemplate(){var ref=Object(react.useRef)({}),ref2=Object(react.useRef)({}),ref3=Object(react.useRef)({}),_useState=Object(react.useState)(!1),_useState2=Object(slicedToArray.a)(_useState,2),state=_useState2[0],setState=_useState2[1],_useState3=Object(react.useState)(!1),_useState4=Object(slicedToArray.a)(_useState3,2),state2=_useState4[0],setState2=_useState4[1],_useState5=Object(react.useState)(!1),_useState6=Object(slicedToArray.a)(_useState5,2),state3=_useState6[0],setState3=_useState6[1];return Object(jsx_runtime.jsx)("div",{className:"App",children:Object(jsx_runtime.jsxs)("div",{style:{padding:"20px",width:"500px",margin:"auto"},children:[Object(jsx_runtime.jsx)("h1",{children:"React Slider Verify"}),Object(jsx_runtime.jsxs)("div",{children:[Object(jsx_runtime.jsx)(src_ReactSliderVerify,{ref:ref,tips:"将滑块拖动到最右边",onSuccess:function onSuccess(){return setState(!0)}}),Object(jsx_runtime.jsxs)("div",{children:["当前状态：","".concat(state)]}),Object(jsx_runtime.jsx)("button",{onClick:function onClick(){ref.current.reset(),setState(!1)},children:"重置"})]}),Object(jsx_runtime.jsxs)("div",{style:{marginTop:20},children:[Object(jsx_runtime.jsx)(src_ReactSliderVerify,{width:440,height:38,barWidth:80,onSuccess:function onSuccess(){return setState2(!0)},ref:ref2,successShowBar:!1}),Object(jsx_runtime.jsxs)("div",{children:["当前状态：","".concat(state2)]}),Object(jsx_runtime.jsx)("button",{onClick:function onClick(){ref2.current.reset(),setState2(!1)},children:"重置"})]}),Object(jsx_runtime.jsxs)("div",{style:{marginTop:20},children:[Object(jsx_runtime.jsx)(src_ReactSliderVerify,{width:450,height:42,bgColor:"#dee2de",tips:"使劲儿按住滑块，拖动到最右边",barWidth:50,bar:Object(jsx_runtime.jsx)("span",{children:"->"}),successBgColor:"#ff6a00",successTips:"验证成功",successBar:Object(jsx_runtime.jsx)("span",{style:{color:"#ff6a00",fontWeight:"bolder"},children:"√"}),onSuccess:function onSuccess(){return setState3(!0)},ref:ref3}),Object(jsx_runtime.jsxs)("div",{children:["当前状态：","".concat(state3)]}),Object(jsx_runtime.jsx)("button",{onClick:function onClick(){ref3.current.reset(),setState3(!1)},children:"重置"})]})]})})}.bind({}),Fusion=function FusionTemplate(){var refSliderVerify=Object(react.useRef)(),field=es_field.a.useField(),init=field.init;return Object(jsx_runtime.jsxs)("div",{style:{padding:"20px",width:"500px",margin:"auto"},children:[Object(jsx_runtime.jsx)("h5",{children:"Fusion Form："}),Object(jsx_runtime.jsxs)(es_form.a,Object(objectSpread2.a)(Object(objectSpread2.a)({style:{width:"520px"}},formItemLayout),{},{field:field,colon:!0,children:[Object(jsx_runtime.jsx)(FormItem,{label:"Username",children:Object(jsx_runtime.jsx)(input.a,Object(objectSpread2.a)({name:"username"},init("username",{rules:[{required:!0,message:"Please input your username!"}]})))}),Object(jsx_runtime.jsx)(FormItem,{label:"Password",children:Object(jsx_runtime.jsx)(input.a.Password,Object(objectSpread2.a)({name:"password",placeholder:"Please Enter Password"},init("password",{rules:[{required:!0,message:"Please input your password!"}]})))}),Object(jsx_runtime.jsx)(FormItem,{label:"Slider Verify",children:Object(jsx_runtime.jsx)(src_ReactSliderVerify,Object(objectSpread2.a)(Object(objectSpread2.a)({},init("sliderVerify",{rules:[{validator:function validator(rule,value,callback){return value?callback():callback("Please complete the slide verification!")}}]})),{},{width:260,height:28,barWidth:50,ref:refSliderVerify}))}),Object(jsx_runtime.jsxs)(FormItem,{label:" ",colon:!1,children:[Object(jsx_runtime.jsx)(es_form.a.Submit,{type:"primary",validate:!0,onClick:function handleSubmit(){var values=field.getValues(),errors=field.getErrors();console.log("values:"),console.log(JSON.stringify(values,null,4)),console.log("errors:"),console.log(JSON.stringify(errors,null,4))},style:{marginRight:8},size:"large",children:"Submit"}),Object(jsx_runtime.jsx)(es_button.a,{style:{marginLeft:15},onClick:function handleReset(){field.reset()},children:"Reset"})]})]}))]})}.bind({}),Antd=function AntdTemplate(){var _Form$useForm=antd_es_form.a.useForm(),form=Object(slicedToArray.a)(_Form$useForm,1)[0];return Object(jsx_runtime.jsxs)("div",{style:{padding:"20px",width:"500px",margin:"auto"},children:[Object(jsx_runtime.jsx)("h5",{children:"Antd Form："}),Object(jsx_runtime.jsxs)(antd_es_form.a,{name:"basic",labelCol:{span:6},wrapperCol:{span:14},onFinish:function onFinish(values){console.log("onFinish:"),console.log(JSON.stringify(values,null,4))},onFinishFailed:function onFinishFailed(errorInfo){console.log("onFinishFailed:"),console.log(JSON.stringify(errorInfo,null,4))},form:form,children:[Object(jsx_runtime.jsx)(antd_es_form.a.Item,{label:"Username",name:"username",rules:[{required:!0,message:"Please input your username!"}],children:Object(jsx_runtime.jsx)(es_input.a,{})}),Object(jsx_runtime.jsx)(antd_es_form.a.Item,{label:"Password",name:"password",rules:[{required:!0,message:"Please input your password!"}],children:Object(jsx_runtime.jsx)(es_input.a.Password,{})}),Object(jsx_runtime.jsx)(antd_es_form.a.Item,{label:"Slider Verify",name:"sliderVerify",rules:[{required:!0,message:"Please complete the slide verification!"}],children:Object(jsx_runtime.jsx)(src_ReactSliderVerify,{width:268,height:32,barWidth:60})}),Object(jsx_runtime.jsxs)(antd_es_form.a.Item,{label:" ",colon:!1,children:[Object(jsx_runtime.jsx)(antd_es_button.a,{type:"primary",htmlType:"submit",children:"Submit"}),Object(jsx_runtime.jsx)(antd_es_button.a,{style:{marginLeft:15},htmlType:"button",onClick:function handleReset(){form.resetFields()},children:"Reset"})]})]})]})}.bind({});Default.parameters=Object(objectSpread2.a)({storySource:{source:"(args) => (\n  \n)"}},Default.parameters),Reset.parameters=Object(objectSpread2.a)({storySource:{source:"ResetTemplate.bind({})"}},Reset.parameters),Fusion.parameters=Object(objectSpread2.a)({storySource:{source:"FusionTemplate.bind({})"}},Fusion.parameters),Antd.parameters=Object(objectSpread2.a)({storySource:{source:"AntdTemplate.bind({})"}},Antd.parameters)},1024:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(0);var esm=__webpack_require__(44),dist_esm=__webpack_require__(103),react_slider_verify=__webpack_require__.p+"static/media/react-slider-verify.e536ddac.PNG";function _extends(){return _extends=Object.assign||function(target){for(var i=1;i{throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};const componentMeta={title:"Introduction",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(esm.b)(MDXContent,null))};__webpack_exports__.default=componentMeta},601:function(module,exports,__webpack_require__){__webpack_require__(602),__webpack_require__(758),__webpack_require__(759),__webpack_require__(1018),__webpack_require__(1013),__webpack_require__(1021),__webpack_require__(1022),__webpack_require__(1020),__webpack_require__(1014),__webpack_require__(1023),__webpack_require__(1015),__webpack_require__(1016),__webpack_require__(1019),module.exports=__webpack_require__(951)},668:function(module,exports){},952:function(module,exports,__webpack_require__){var map={"./stories/Index.stories.mdx":1024};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=952},953:function(module,exports,__webpack_require__){var map={"./stories/ReactSliderVerify.stories.tsx":1017};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=953},956:function(module,exports,__webpack_require__){}},[[601,2,3]]]);


--------------------------------------------------------------------------------
/dist/runtime~main.58ef761fc8fee29e9e96.manager.bundle.js:
--------------------------------------------------------------------------------
1 | !function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i
2 | export default function AntdTemplate(): JSX.Element;
3 | 


--------------------------------------------------------------------------------
/dist/stories/FusionTemplate.d.ts:
--------------------------------------------------------------------------------
1 | /// 
2 | export default function FusionTemplate(): JSX.Element;
3 | 


--------------------------------------------------------------------------------
/dist/stories/ResetTemplate.d.ts:
--------------------------------------------------------------------------------
1 | /// 
2 | export default function ResetTemplate(): JSX.Element;
3 | 


--------------------------------------------------------------------------------
/dist/vendors~main.281f2187.iframe.bundle.js.LICENSE.txt:
--------------------------------------------------------------------------------
  1 | /*
  2 | object-assign
  3 | (c) Sindre Sorhus
  4 | @license MIT
  5 | */
  6 | 
  7 | /*!
  8 |   Copyright (c) 2018 Jed Watson.
  9 |   Licensed under the MIT License (MIT), see
 10 |   http://jedwatson.github.io/classnames
 11 | */
 12 | 
 13 | /*!
 14 |  * The buffer module from node.js, for the browser.
 15 |  *
 16 |  * @author   Feross Aboukhadijeh  
 17 |  * @license  MIT
 18 |  */
 19 | 
 20 | /*!
 21 |  * https://github.com/es-shims/es5-shim
 22 |  * @license es5-shim Copyright 2009-2020 by contributors, MIT License
 23 |  * see https://github.com/es-shims/es5-shim/blob/master/LICENSE
 24 |  */
 25 | 
 26 | /*!
 27 |  * https://github.com/paulmillr/es6-shim
 28 |  * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com)
 29 |  *   and contributors,  MIT License
 30 |  * es6-shim: v0.35.4
 31 |  * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE
 32 |  * Details and documentation:
 33 |  * https://github.com/paulmillr/es6-shim/
 34 |  */
 35 | 
 36 | /*!
 37 |  * is-plain-object 
 38 |  *
 39 |  * Copyright (c) 2014-2017, Jon Schlinkert.
 40 |  * Released under the MIT License.
 41 |  */
 42 | 
 43 | /*!
 44 |  * isobject 
 45 |  *
 46 |  * Copyright (c) 2014-2017, Jon Schlinkert.
 47 |  * Released under the MIT License.
 48 |  */
 49 | 
 50 | /** @license React v0.20.2
 51 |  * scheduler.production.min.js
 52 |  *
 53 |  * Copyright (c) Facebook, Inc. and its affiliates.
 54 |  *
 55 |  * This source code is licensed under the MIT license found in the
 56 |  * LICENSE file in the root directory of this source tree.
 57 |  */
 58 | 
 59 | /** @license React v16.13.1
 60 |  * react-is.production.min.js
 61 |  *
 62 |  * Copyright (c) Facebook, Inc. and its affiliates.
 63 |  *
 64 |  * This source code is licensed under the MIT license found in the
 65 |  * LICENSE file in the root directory of this source tree.
 66 |  */
 67 | 
 68 | /** @license React v17.0.2
 69 |  * react-dom.production.min.js
 70 |  *
 71 |  * Copyright (c) Facebook, Inc. and its affiliates.
 72 |  *
 73 |  * This source code is licensed under the MIT license found in the
 74 |  * LICENSE file in the root directory of this source tree.
 75 |  */
 76 | 
 77 | /** @license React v17.0.2
 78 |  * react-jsx-runtime.production.min.js
 79 |  *
 80 |  * Copyright (c) Facebook, Inc. and its affiliates.
 81 |  *
 82 |  * This source code is licensed under the MIT license found in the
 83 |  * LICENSE file in the root directory of this source tree.
 84 |  */
 85 | 
 86 | /** @license React v17.0.2
 87 |  * react.production.min.js
 88 |  *
 89 |  * Copyright (c) Facebook, Inc. and its affiliates.
 90 |  *
 91 |  * This source code is licensed under the MIT license found in the
 92 |  * LICENSE file in the root directory of this source tree.
 93 |  */
 94 | 
 95 | //! moment.js
 96 | 
 97 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable
 98 | 
 99 | //! © 2018 Angry Bytes and contributors. MIT licensed.
100 | 


--------------------------------------------------------------------------------
/dist/vendors~main.281f2187.iframe.bundle.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"vendors~main.281f2187.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}


--------------------------------------------------------------------------------
/dist/vendors~main.3bd23d0897684e8062af.manager.bundle.js.LICENSE.txt:
--------------------------------------------------------------------------------
 1 | /*
 2 | object-assign
 3 | (c) Sindre Sorhus
 4 | @license MIT
 5 | */
 6 | 
 7 | /*!
 8 |  * Fuse.js v3.6.1 - Lightweight fuzzy-search (http://fusejs.io)
 9 |  * 
10 |  * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me)
11 |  * All Rights Reserved. Apache Software License 2.0
12 |  * 
13 |  * http://www.apache.org/licenses/LICENSE-2.0
14 |  */
15 | 
16 | /*!
17 |  * https://github.com/es-shims/es5-shim
18 |  * @license es5-shim Copyright 2009-2020 by contributors, MIT License
19 |  * see https://github.com/es-shims/es5-shim/blob/master/LICENSE
20 |  */
21 | 
22 | /*!
23 |  * https://github.com/paulmillr/es6-shim
24 |  * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com)
25 |  *   and contributors,  MIT License
26 |  * es6-shim: v0.35.4
27 |  * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE
28 |  * Details and documentation:
29 |  * https://github.com/paulmillr/es6-shim/
30 |  */
31 | 
32 | /*!
33 |  * isobject 
34 |  *
35 |  * Copyright (c) 2014-2017, Jon Schlinkert.
36 |  * Released under the MIT License.
37 |  */
38 | 
39 | /** @license React v0.20.2
40 |  * scheduler.production.min.js
41 |  *
42 |  * Copyright (c) Facebook, Inc. and its affiliates.
43 |  *
44 |  * This source code is licensed under the MIT license found in the
45 |  * LICENSE file in the root directory of this source tree.
46 |  */
47 | 
48 | /** @license React v16.13.1
49 |  * react-is.production.min.js
50 |  *
51 |  * Copyright (c) Facebook, Inc. and its affiliates.
52 |  *
53 |  * This source code is licensed under the MIT license found in the
54 |  * LICENSE file in the root directory of this source tree.
55 |  */
56 | 
57 | /** @license React v17.0.2
58 |  * react-dom.production.min.js
59 |  *
60 |  * Copyright (c) Facebook, Inc. and its affiliates.
61 |  *
62 |  * This source code is licensed under the MIT license found in the
63 |  * LICENSE file in the root directory of this source tree.
64 |  */
65 | 
66 | /** @license React v17.0.2
67 |  * react-is.production.min.js
68 |  *
69 |  * Copyright (c) Facebook, Inc. and its affiliates.
70 |  *
71 |  * This source code is licensed under the MIT license found in the
72 |  * LICENSE file in the root directory of this source tree.
73 |  */
74 | 
75 | /** @license React v17.0.2
76 |  * react.production.min.js
77 |  *
78 |  * Copyright (c) Facebook, Inc. and its affiliates.
79 |  *
80 |  * This source code is licensed under the MIT license found in the
81 |  * LICENSE file in the root directory of this source tree.
82 |  */
83 | 


--------------------------------------------------------------------------------
/example/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "babel-preset-haiyan",
 5 |       {
 6 |         "typescript": true,
 7 |         "react": {
 8 |           "development": true
 9 |         }
10 |       }
11 |     ]
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/example/dist/index.html:
--------------------------------------------------------------------------------
1 | React Slider Verify



--------------------------------------------------------------------------------
/example/dist/main.js.LICENSE.txt:
--------------------------------------------------------------------------------
 1 | /*
 2 | object-assign
 3 | (c) Sindre Sorhus
 4 | @license MIT
 5 | */
 6 | 
 7 | /*!
 8 |   Copyright (c) 2018 Jed Watson.
 9 |   Licensed under the MIT License (MIT), see
10 |   http://jedwatson.github.io/classnames
11 | */
12 | 
13 | /** @license React v0.20.2
14 |  * scheduler.production.min.js
15 |  *
16 |  * Copyright (c) Facebook, Inc. and its affiliates.
17 |  *
18 |  * This source code is licensed under the MIT license found in the
19 |  * LICENSE file in the root directory of this source tree.
20 |  */
21 | 
22 | /** @license React v16.13.1
23 |  * react-is.production.min.js
24 |  *
25 |  * Copyright (c) Facebook, Inc. and its affiliates.
26 |  *
27 |  * This source code is licensed under the MIT license found in the
28 |  * LICENSE file in the root directory of this source tree.
29 |  */
30 | 
31 | /** @license React v17.0.2
32 |  * react-dom.production.min.js
33 |  *
34 |  * Copyright (c) Facebook, Inc. and its affiliates.
35 |  *
36 |  * This source code is licensed under the MIT license found in the
37 |  * LICENSE file in the root directory of this source tree.
38 |  */
39 | 
40 | /** @license React v17.0.2
41 |  * react.production.min.js
42 |  *
43 |  * Copyright (c) Facebook, Inc. and its affiliates.
44 |  *
45 |  * This source code is licensed under the MIT license found in the
46 |  * LICENSE file in the root directory of this source tree.
47 |  */
48 | 
49 | //! moment.js
50 | 
51 | //! moment.js locale configuration
52 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "clean": "rm -rf dist",
 8 |     "predev": "npm run clean",
 9 |     "dev": "webpack serve --mode development --config webpack.config.js",
10 |     "prebuild": "npm run clean",
11 |     "build": "webpack --mode production --config webpack.config.js"
12 |   },
13 |   "keywords": [],
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "@alifd/next": "^1.23.25",
18 |     "antd": "^4.16.13",
19 |     "react": "^17.0.2",
20 |     "react-dom": "^17.0.2",
21 |     "react-slider-verify": "^0.1.2"
22 |   },
23 |   "devDependencies": {
24 |     "@babel/core": "^7.15.8",
25 |     "@types/node": "^16.11.1",
26 |     "@types/react": "^17.0.30",
27 |     "@types/react-dom": "^17.0.9",
28 |     "babel-loader": "^8.2.2",
29 |     "babel-preset-haiyan": "*",
30 |     "css-loader": "^6.4.0",
31 |     "glob": "^7.2.0",
32 |     "html-webpack-plugin": "^5.4.0",
33 |     "style-loader": "^3.3.0",
34 |     "typescript": "^4.4.4",
35 |     "webpack": "^5.58.2",
36 |     "webpack-cli": "^4.9.0",
37 |     "webpack-dev-server": "^4.3.1"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShenBao/react-slider-verify/b3feb690b44183c3fac319a30f84b5d72d29b88a/example/public/favicon.ico


--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     
 8 |     React Slider Verify
 9 |   
10 |   
11 |     
12 |     

13 |   
14 | 
15 | 


--------------------------------------------------------------------------------
/example/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShenBao/react-slider-verify/b3feb690b44183c3fac319a30f84b5d72d29b88a/example/public/logo192.png


--------------------------------------------------------------------------------
/example/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShenBao/react-slider-verify/b3feb690b44183c3fac319a30f84b5d72d29b88a/example/public/logo512.png


--------------------------------------------------------------------------------
/example/src/Antd.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Form, Input, Button } from "antd";
 3 | import ReactSliderVerify from "react-slider-verify";
 4 | 
 5 | export default function AntdDemo() {
 6 |   const [form] = Form.useForm();
 7 | 
 8 |   const onFinish = (values: any) => {
 9 |     console.log("onFinish:");
10 |     console.log(JSON.stringify(values, null, 4));
11 |   };
12 | 
13 |   const onFinishFailed = (errorInfo: any) => {
14 |     console.log("onFinishFailed:");
15 |     console.log(JSON.stringify(errorInfo, null, 4));
16 |   };
17 | 
18 |   const handleReset = () => {
19 |     form.resetFields();
20 |   };
21 | 
22 |   return (
23 |     

24 |       
Antd Form：

25 |       

33 |         
38 |           
39 |         
40 | 
41 |         
46 |           
47 |         
48 |         
58 |           
59 |         
60 | 
61 |         
62 |           
65 |           
72 |         
73 |       

74 |     

75 |   );
76 | }
77 | 


--------------------------------------------------------------------------------
/example/src/Fusion.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useRef } from "react";
  2 | import { Form, Input, Field, Button } from "@alifd/next";
  3 | 
  4 | import ReactSliderVerify from "react-slider-verify";
  5 | 
  6 | const FormItem = Form.Item;
  7 | 
  8 | const formItemLayout = {
  9 |   labelCol: {
 10 |     fixedSpan: 6,
 11 |   },
 12 |   wrapperCol: {
 13 |     span: 12,
 14 |   },
 15 | };
 16 | 
 17 | export default function FusionDemo() {
 18 |   const refSliderVerify = useRef();
 19 |   const field = Field.useField();
 20 |   const { init } = field;
 21 | 
 22 |   const handleSubmit = () => {
 23 |     const values = field.getValues();
 24 |     const errors = field.getErrors();
 25 |     console.log("values:");
 26 |     console.log(JSON.stringify(values, null, 4));
 27 |     console.log("errors:");
 28 |     console.log(JSON.stringify(errors, null, 4));
 29 |   };
 30 | 
 31 |   const handleReset = () => {
 32 |     field.reset();
 33 |   };
 34 | 
 35 |   return (
 36 |     

 37 |       
Fusion Form：

 38 |       

 39 |         
 40 |           
 51 |         
 52 |         
 53 |           
 65 |         
 66 |         
 67 |            {
 72 |                     if (!value) {
 73 |                       return callback(
 74 |                         "Please complete the slide verification!"
 75 |                       );
 76 |                     } else {
 77 |                       return callback();
 78 |                     }
 79 |                   },
 80 |                 },
 81 |               ],
 82 |             })}
 83 |             width={260}
 84 |             height={28}
 85 |             barWidth={50}
 86 |             ref={refSliderVerify}
 87 |           />
 88 |         
 89 |         
 90 |           
 97 |             Submit
 98 |           
 99 |           
102 |         
103 |       

104 |     

105 |   );
106 | }
107 | 


--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
1 | * {
2 |   margin: 0;
3 |   padding: 0;
4 |   box-sizing: border-box;
5 | }
6 | 


--------------------------------------------------------------------------------
/example/src/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useRef, useState } from "react";
  2 | import ReactDOM from "react-dom";
  3 | 
  4 | import "./index.css";
  5 | import "@alifd/next/dist/next.css";
  6 | import "antd/dist/antd.css";
  7 | import "react-slider-verify/dist/index.css";
  8 | 
  9 | import Fusion from "./Fusion";
 10 | import Antd from "./Antd";
 11 | 
 12 | import ReactSliderVerify from "react-slider-verify";
 13 | 
 14 | function App() {
 15 |   const ref = useRef({} as any);
 16 |   const ref2 = useRef({} as any);
 17 |   const ref3 = useRef({} as any);
 18 |   const [state, setState] = useState(false);
 19 |   const [state2, setState2] = useState(false);
 20 |   const [state3, setState3] = useState(false);
 21 | 
 22 |   return (
 23 |     

 24 |       

 25 |         
React Slider Verify

 26 |         
 36 |         

 37 |            setState(true)}
 41 |           />
 42 |           
当前状态：{`${state}`}

 43 |           
 51 |         

 52 |         

 53 |            setState2(true)}
 58 |             ref={ref2}
 59 |             successShowBar={false}
 60 |           />
 61 |           
当前状态：{`${state2}`}

 62 |           
 70 |         

 71 | 
 72 |         

 73 |           ->}
 80 |             successBgColor={"#ff6a00"}
 81 |             successTips={"验证成功"}
 82 |             successBar={
 83 |               √
 84 |             }
 85 |             ref={ref3}
 86 |           />
 87 |           
当前状态：{`${state3}`}

 88 |           
 96 |         

 97 |         
在 UI 组件库中使用：

 98 |         
 99 |         
100 |       

101 |     

102 |   );
103 | }
104 | 
105 | ReactDOM.render(, document.getElementById("root"));
106 | 


--------------------------------------------------------------------------------
/example/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require ('path');
 4 | const HtmlWebpackPlugin = require ('html-webpack-plugin');
 5 | 
 6 | module.exports = {
 7 |   devServer: {
 8 |     compress: true,
 9 |     port: 8848,
10 |     open: true,
11 |   },
12 |   entry: './src/index.tsx',
13 |   output: {
14 |     path: path.join (__dirname, './dist'),
15 |     filename: '[name].js',
16 |   },
17 |   module: {
18 |     rules: [
19 |       {
20 |         test: /\.(woff|woff2|eot|ttf|otf)$/,
21 |         type: 'asset',
22 |         parser: {
23 |           dataUrlCondition: {
24 |             maxSize: 4 * 1024,
25 |           },
26 |         },
27 |       },
28 |       {
29 |         test: /\.css$/,
30 |         use: ['style-loader', 'css-loader'],
31 |       },
32 |       {
33 |         test: /\.js$/,
34 |         use: ['babel-loader?cacheDirectory'],
35 |         include: path.resolve (__dirname, 'src'),
36 |       },
37 |       {
38 |         test: /\.tsx?$/,
39 |         use: [
40 |           {
41 |             loader: 'babel-loader',
42 |           },
43 |         ],
44 |       },
45 |     ],
46 |   },
47 |   resolve: {
48 |     extensions: ['.js', '.jsx', '.ts', '.tsx'],
49 |     alias: {
50 |       '@': path.resolve (__dirname, './src'),
51 |     },
52 |   },
53 |   plugins: [
54 |     new HtmlWebpackPlugin ({
55 |       template: './public/index.html',
56 |     }),
57 |   ],
58 |   cache: {
59 |     type: 'filesystem',
60 |     buildDependencies: {
61 |       config: [__filename],
62 |     },
63 |   },
64 | };
65 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-slider-verify",
 3 |   "version": "0.2.1",
 4 |   "description": "React 滑动验证组件",
 5 |   "scripts": {
 6 |     "clean": "rm -rf dist es lib",
 7 |     "predev": "npm run clean",
 8 |     "dev": "haiyan-storybook dev",
 9 |     "prebuild": "npm run clean && haiyan-storybook build",
10 |     "build": "component-scripts build",
11 |     "prepublishOnly": "npm run build"
12 |   },
13 |   "main": "lib/index.js",
14 |   "module": "es/index.js",
15 |   "unpkg": "dist/index.js",
16 |   "typings": "lib/index.d.ts",
17 |   "files": [
18 |     "dist",
19 |     "lib",
20 |     "es",
21 |     "screenshot"
22 |   ],
23 |   "keywords": [
24 |     "react",
25 |     "component",
26 |     "components",
27 |     "react-component",
28 |     "ant",
29 |     "antd",
30 |     "@alifd/next",
31 |     "fusion",
32 |     "react-slider-verify"
33 |   ],
34 |   "repository": {
35 |     "type": "git",
36 |     "url": "git+https://github.com/ShenBao/react-slider-verify.git"
37 |   },
38 |   "author": "ShenBao",
39 |   "license": "MIT",
40 |   "bugs": {
41 |     "url": "https://github.com/ShenBao/react-slider-verify/issues"
42 |   },
43 |   "homepage": "https://github.com/ShenBao/react-slider-verify#readme",
44 |   "devDependencies": {
45 |     "@alifd/next": "^1.23.25",
46 |     "@types/react": "^17.0.30",
47 |     "@types/react-dom": "^17.0.9",
48 |     "antd": "^4.16.13",
49 |     "component-scripts": "*",
50 |     "haiyan-storybook": "*",
51 |     "typescript": "^4.4.4"
52 |   },
53 |   "peerDependencies": {
54 |     "react": "^17.0.2"
55 |   },
56 |   "dependencies": {
57 |     "react": "^17.0.2",
58 |     "react-dom": "^17.0.2"
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/screenshot/react-slider-verify.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShenBao/react-slider-verify/b3feb690b44183c3fac319a30f84b5d72d29b88a/screenshot/react-slider-verify.PNG


--------------------------------------------------------------------------------
/src/ReactSliderVerify/index.scss:
--------------------------------------------------------------------------------
 1 | .react-slider-verify-wrapper {
 2 |   display: inline-block;
 3 |   width: 400px;
 4 |   height: 50px;
 5 |   background-color: #ccc;
 6 |   overflow: hidden;
 7 |   position: relative;
 8 |   line-height: 50px;
 9 |   user-select: none;
10 | 
11 |   .slider-verify-tips {
12 |     position: absolute;
13 |     width: 100%;
14 |     z-index: 2;
15 |     text-align: center;
16 |   }
17 | 
18 |   .slider-verify-bar {
19 |     width: 20%;
20 |     height: 100%;
21 |     position: absolute;
22 |     top: 0;
23 |     left: 0;
24 |     text-align: center;
25 |     background: #fff;
26 |     box-sizing: border-box;
27 |     color: #ccc;
28 |     cursor: move;
29 |     z-index: 3;
30 |     border: 1px solid #ccc;
31 |   }
32 | 
33 |   .slider-verify-modal {
34 |     width: 20%;
35 |     height: 100%;
36 |     position: absolute;
37 |     top: 0;
38 |     left: 0;
39 |     background: #06ad06;
40 |     color: #fff;
41 |   }
42 | 
43 |   &.react-slider-verify-success {
44 |     .slider-verify-tips {
45 |       color: #fff;
46 |     }
47 | 
48 |     .slider-verify-tips::before {
49 |       display: none;
50 |     }
51 | 
52 |     .slider-verify-bar {
53 |       cursor: inherit;
54 |     }
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/ReactSliderVerify/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { forwardRef, Ref } from "react";
  2 | import useSliderVerify from "./useSliderVerify";
  3 | import "./index.scss";
  4 | 
  5 | interface IProps {
  6 |   value?: boolean;
  7 |   onChange?: Function;
  8 |   onSuccess?: Function;
  9 |   width?: number;
 10 |   height?: number;
 11 |   bgColor?: string;
 12 |   tips?: React.ReactChild;
 13 |   barWidth?: number;
 14 |   bar?: React.ReactChild;
 15 |   successBar?: React.ReactChild;
 16 |   successBgColor?: string;
 17 |   successTips?: React.ReactChild;
 18 |   successShowBar?: boolean;
 19 | }
 20 | 
 21 | interface IInnerProps extends IProps {
 22 |   innerRef?: any;
 23 | }
 24 | 
 25 | const defaultProps = {
 26 |   value: false,
 27 |   width: 400,
 28 |   height: 36,
 29 |   bgColor: "#F2F3F5",
 30 |   tips: "请按住滑块，拖动到最右边",
 31 |   barWidth: 80,
 32 |   bar:  >>,
 33 |   successBar: "✅",
 34 |   successBgColor: "#06ad06",
 35 |   successTips: "验证已通过",
 36 |   successShowBar: true,
 37 | };
 38 | 
 39 | function SliderVerify(props: IInnerProps) {
 40 |   const {
 41 |     value,
 42 |     onChange,
 43 |     onSuccess,
 44 |     innerRef,
 45 |     width,
 46 |     height,
 47 |     bgColor,
 48 |     tips,
 49 |     successBgColor,
 50 |     successTips,
 51 |     barWidth,
 52 |     bar,
 53 |     successBar,
 54 |     successShowBar,
 55 |   } = props;
 56 | 
 57 |   const { success, isMove, barLeft, modalWidth, refBar } = useSliderVerify({
 58 |     value,
 59 |     onChange,
 60 |     onSuccess,
 61 |     innerRef,
 62 |     width,
 63 |     barWidth,
 64 |   });
 65 | 
 66 |   const sliderVerifyStyle = {
 67 |     backgroundColor: bgColor,
 68 |     width: `${width}px`,
 69 |     height: `${height}px`,
 70 |     lineHeight: `${height}px`,
 71 |   };
 72 | 
 73 |   const barStyle = {
 74 |     width: `${barWidth}px`,
 75 |     // left: `${barLeft}px`,
 76 |     transitionDuration: !isMove ? ".4s" : "0s",
 77 |     transform: `translateX(${
 78 |       success && !successShowBar ? modalWidth : barLeft
 79 |     }px)`,
 80 |   };
 81 | 
 82 |   const modalStyle = {
 83 |     backgroundColor: successBgColor,
 84 |     width: `${width}px`,
 85 |     left: `-${width}px`,
 86 |     transitionDuration: !isMove ? ".4s" : "0s",
 87 |     transform: `translateX(${modalWidth}px)`,
 88 |   };
 89 | 
 90 |   const verifyTipsStyle = {
 91 |     transform: `translateX(${success ? 0 : barWidth}px)`,
 92 |     width: `${
 93 |       success && !successShowBar
 94 |         ? width
 95 |         : (width as number) - (barWidth as number)
 96 |     }px`,
 97 |   };
 98 | 
 99 |   return (
100 |     

106 |       
107 |         {success ? successTips : tips}
108 |       
109 |       

110 |         {success ? successBar : bar}
111 |       

112 |       

113 |     

114 |   );
115 | }
116 | 
117 | SliderVerify.defaultProps = defaultProps;
118 | 
119 | const ReactSliderVerify = forwardRef((props: IProps, ref: Ref) => (
120 |   
121 | ));
122 | 
123 | ReactSliderVerify.displayName = "ReactSliderVerify";
124 | 
125 | export default ReactSliderVerify;
126 | 


--------------------------------------------------------------------------------
/src/ReactSliderVerify/useSliderVerify.ts:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect, useRef, useImperativeHandle } from "react";
  2 | 
  3 | interface IOptions {
  4 |   value?: boolean;
  5 |   onChange?: Function;
  6 |   onSuccess?: Function;
  7 |   innerRef?: any;
  8 |   width?: number;
  9 |   barWidth?: number;
 10 | }
 11 | 
 12 | interface ITmpData {
 13 |   offX: number;
 14 |   max: number;
 15 |   diff: number;
 16 |   isMove: boolean;
 17 | }
 18 | 
 19 | export default function useSliderVerify(options: IOptions) {
 20 |   const {
 21 |     value,
 22 |     onChange,
 23 |     onSuccess,
 24 |     innerRef,
 25 |     width = 320,
 26 |     barWidth = 80,
 27 |   } = options;
 28 | 
 29 |   const refBar = useRef();
 30 |   const refTmpData = useRef({
 31 |     max: width - barWidth,
 32 |     offX: 0,
 33 |     diff: 0,
 34 |     isMove: false,
 35 |   });
 36 |   const [barLeft, setBarLeft] = useState(0);
 37 |   const [modalWidth, setModalWidth] = useState(0);
 38 |   const [success, setSuccess] = useState(false);
 39 | 
 40 |   const onMouseDown = (e: any) => {
 41 |     // if (success) return;
 42 |     refTmpData.current.offX = e.pageX;
 43 |     document.addEventListener("mousemove", onMove);
 44 |   };
 45 | 
 46 |   const onMove = (e: any) => {
 47 |     // if (success) return;
 48 |     const diff = e.pageX - refTmpData.current.offX;
 49 |     let barLeft = diff;
 50 |     let modalWidth = diff;
 51 |     refTmpData.current.diff = diff;
 52 |     refTmpData.current.isMove = true;
 53 | 
 54 |     // 边界判断 最大值
 55 |     if (barLeft >= refTmpData.current.max) {
 56 |       barLeft = refTmpData.current.max; // 是最大 max 的值
 57 |       modalWidth = width; // 最大宽度 是 外面容器的宽度
 58 |       refTmpData.current.isMove = false;
 59 | 
 60 |       setSuccess(true);
 61 |       onChange && onChange(true);
 62 |       onSuccess && onSuccess();
 63 | 
 64 |       // 移除事件
 65 |       document.removeEventListener("mousemove", onMove);
 66 |       refBar.current.removeEventListener("mousedown", onMouseDown);
 67 |     }
 68 |     // 边界判断 小于 0
 69 |     if (diff <= 0) {
 70 |       barLeft = 0;
 71 |       modalWidth = 0;
 72 |     }
 73 | 
 74 |     setBarLeft(barLeft);
 75 |     setModalWidth(modalWidth);
 76 |   };
 77 | 
 78 |   const onMouseUp = () => {
 79 |     // 回到最初位置
 80 |     if (refTmpData.current.diff < refTmpData.current.max) {
 81 |       refTmpData.current.isMove = false;
 82 |       setBarLeft(0);
 83 |       setModalWidth(0);
 84 |     }
 85 |     document.removeEventListener("mousemove", onMove);
 86 |   };
 87 | 
 88 |   useEffect(() => {
 89 |     const left = refBar.current.getBoundingClientRect().left;
 90 |     refTmpData.current.offX = value ? left + width : left;
 91 |     refTmpData.current.diff = value ? width : 0;
 92 |     setBarLeft(value ? width - barWidth : 0);
 93 |     setModalWidth(value ? width : 0);
 94 |     setSuccess(!!value);
 95 | 
 96 |     if (value) return;
 97 | 
 98 |     refBar.current.addEventListener("mousedown", onMouseDown);
 99 |     document.addEventListener("mouseup", onMouseUp);
100 |     return () => {
101 |       document.removeEventListener("mousemove", onMove);
102 |       document.removeEventListener("mouseup", onMouseUp);
103 |     };
104 |   }, [value]);
105 | 
106 |   const reset = () => {
107 |     setSuccess(false);
108 |     setBarLeft(0);
109 |     setModalWidth(0);
110 |     refBar.current.addEventListener("mousedown", onMouseDown);
111 |     document.removeEventListener("mousemove", onMove);
112 |     document.addEventListener("mouseup", onMouseUp);
113 |   };
114 | 
115 |   useImperativeHandle(innerRef, () => ({
116 |     reset,
117 |   }));
118 | 
119 |   return {
120 |     success,
121 |     isMove: refTmpData.current.isMove,
122 |     barLeft,
123 |     modalWidth,
124 |     refBar,
125 |   };
126 | }
127 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import ReactSliderVerify from "./ReactSliderVerify";
2 | 
3 | export { ReactSliderVerify };
4 | 
5 | export default ReactSliderVerify;
6 | 


--------------------------------------------------------------------------------
/src/stories/AntdTemplate.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Form, Input, Button } from "antd";
 3 | 
 4 | import ReactSliderVerify from "../ReactSliderVerify";
 5 | 
 6 | export default function AntdTemplate() {
 7 |   const [form] = Form.useForm();
 8 | 
 9 |   const onFinish = (values: any) => {
10 |     console.log("onFinish:");
11 |     console.log(JSON.stringify(values, null, 4));
12 |   };
13 | 
14 |   const onFinishFailed = (errorInfo: any) => {
15 |     console.log("onFinishFailed:");
16 |     console.log(JSON.stringify(errorInfo, null, 4));
17 |   };
18 | 
19 |   const handleReset = () => {
20 |     form.resetFields();
21 |   };
22 | 
23 |   return (
24 |     

25 |       
Antd Form：

26 |       

34 |         
39 |           
40 |         
41 | 
42 |         
47 |           
48 |         
49 |         
59 |           
60 |         
61 | 
62 |         
63 |           
66 |           
73 |         
74 |       

75 |     

76 |   );
77 | }
78 | 


--------------------------------------------------------------------------------
/src/stories/FusionTemplate.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useRef } from "react";
  2 | import { Form, Input, Field, Button } from "@alifd/next";
  3 | 
  4 | import ReactSliderVerify from "../ReactSliderVerify";
  5 | 
  6 | const FormItem = Form.Item;
  7 | 
  8 | const formItemLayout = {
  9 |   labelCol: {
 10 |     fixedSpan: 6,
 11 |   },
 12 |   wrapperCol: {
 13 |     span: 12,
 14 |   },
 15 | };
 16 | 
 17 | export default function FusionTemplate() {
 18 |   const refSliderVerify = useRef();
 19 |   const field = Field.useField();
 20 |   const { init } = field;
 21 | 
 22 |   const handleSubmit = () => {
 23 |     const values = field.getValues();
 24 |     const errors = field.getErrors();
 25 |     console.log("values:");
 26 |     console.log(JSON.stringify(values, null, 4));
 27 |     console.log("errors:");
 28 |     console.log(JSON.stringify(errors, null, 4));
 29 |   };
 30 | 
 31 |   const handleReset = () => {
 32 |     field.reset();
 33 |   };
 34 | 
 35 |   return (
 36 |     

 37 |       
Fusion Form：

 38 |       

 39 |         
 40 |           
 51 |         
 52 |         
 53 |           
 65 |         
 66 |         
 67 |            {
 72 |                     if (!value) {
 73 |                       return callback(
 74 |                         "Please complete the slide verification!"
 75 |                       );
 76 |                     } else {
 77 |                       return callback();
 78 |                     }
 79 |                   },
 80 |                 },
 81 |               ],
 82 |             })}
 83 |             width={260}
 84 |             height={28}
 85 |             barWidth={50}
 86 |             ref={refSliderVerify}
 87 |           />
 88 |         
 89 |         
 90 |           
 97 |             Submit
 98 |           
 99 |           
102 |         
103 |       

104 |     

105 |   );
106 | }
107 | 


--------------------------------------------------------------------------------
/src/stories/Index.stories.mdx:
--------------------------------------------------------------------------------
 1 | import { Meta, Canvas, Story } from "@storybook/addon-docs";
 2 | import reactSliderVerify from "./assets/react-slider-verify.PNG";
 3 | 
 4 | 
 5 | 
 6 | ## React 滑动验证组件
 7 | 
 8 | React 滑动验证组件
 9 | 
10 | 
20 | 
21 | reactSliderVerify
22 | 
23 | ### 安装
24 | 
25 | ```bash
26 | yarn add react-slider-verify
27 | ```
28 | 
29 | ### 使用
30 | 
31 | #### Default
32 | 
33 | 
34 |   
35 | 
36 | 
37 | #### 重置状态
38 | 
39 | 
40 |   
41 | 
42 | 
43 | 
44 | #### 在 Fusion 中使用
45 | 
46 | 
47 |   
48 | 
49 | 
50 | #### 在 Antd 中使用
51 | 
52 | 
53 |   
54 | 
55 | 


--------------------------------------------------------------------------------
/src/stories/ReactSliderVerify.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { ComponentStory, ComponentMeta } from "@storybook/react";
 3 | 
 4 | import "@alifd/next/dist/next.css";
 5 | import "antd/dist/antd.css";
 6 | 
 7 | import ReactSliderVerify from "../ReactSliderVerify";
 8 | import ResetTemplate from "./ResetTemplate";
 9 | import FusionTemplate from "./FusionTemplate";
10 | import AntdTemplate from "./AntdTemplate";
11 | 
12 | export default {
13 |   title: "ReactSliderVerify",
14 |   component: ReactSliderVerify,
15 | // };
16 | } as ComponentMeta;
17 | 
18 | const DefaultTemplate: ComponentStory = (args) => (
19 |   
20 | );
21 | 
22 | export const Default = DefaultTemplate.bind({});
23 | 
24 | export const Reset = ResetTemplate.bind({});
25 | 
26 | export const Fusion = FusionTemplate.bind({});
27 | export const Antd = AntdTemplate.bind({});
28 | 


--------------------------------------------------------------------------------
/src/stories/ResetTemplate.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useRef, useState } from "react";
 2 | 
 3 | import ReactSliderVerify from "../ReactSliderVerify";
 4 | 
 5 | export default function ResetTemplate() {
 6 |   const ref = useRef({} as any);
 7 |   const ref2 = useRef({} as any);
 8 |   const ref3 = useRef({} as any);
 9 |   const [state, setState] = useState(false);
10 |   const [state2, setState2] = useState(false);
11 |   const [state3, setState3] = useState(false);
12 | 
13 |   return (
14 |     

15 |       

16 |         
React Slider Verify

17 |         

18 |            setState(true)}
22 |           />
23 |           
当前状态：{`${state}`}

24 |           
32 |         

33 |         

34 |            setState2(true)}
39 |             ref={ref2}
40 |             successShowBar={false}
41 |           />
42 |           
当前状态：{`${state2}`}

43 |           
51 |         

52 | 
53 |         

54 |           ->}
61 |             successBgColor={"#ff6a00"}
62 |             successTips={"验证成功"}
63 |             successBar={
64 |               √
65 |             }
66 |             onSuccess={() => setState3(true)}
67 |             ref={ref3}
68 |           />
69 |           
当前状态：{`${state3}`}

70 |           
78 |         

79 |       

80 |     

81 |   );
82 | }
83 | 


--------------------------------------------------------------------------------
/src/stories/assets/react-slider-verify.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShenBao/react-slider-verify/b3feb690b44183c3fac319a30f84b5d72d29b88a/src/stories/assets/react-slider-verify.PNG


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react",
22 |     "typeRoots": ["types", "@node-modules/types"]
23 |   },
24 |   "include": [
25 |     "src"
26 |   ]
27 | }
28 | 


--------------------------------------------------------------------------------