UNPKG

spring-button-test

Version:

2 lines (1 loc) • 16.5 kB
1
2
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-spring"),require("styled-components")):"function"==typeof define&&define.amd?define(["exports","react","react-spring","styled-components"],t):t((n=n||self)["spring-button-test"]={},n.React,n.reactSpring,n.styled)}(this,(function(n,t,e,r){"use strict";var i="default"in t?t.default:t,a="default"in r?r.default:r;function o(n,t,e){return t in n?Object.defineProperty(n,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[t]=e,n}function c(){return(c=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r])}return n}).apply(this,arguments)}function l(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),e.push.apply(e,r)}return e}function p(n){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?l(Object(e),!0).forEach((function(t){o(n,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):l(Object(e)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(e,t))}))}return n}function u(n,t){if(null==n)return{};var e,r,i=function(n,t){if(null==n)return{};var e,r,i={},a=Object.keys(n);for(r=0;r<a.length;r++)e=a[r],t.indexOf(e)>=0||(i[e]=n[e]);return i}(n,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(n);for(r=0;r<a.length;r++)e=a[r],t.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(i[e]=n[e])}return i}function s(n,t){return t||(t=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(t)}}))}function d(n,t){return function(n){if(Array.isArray(n))return n}(n)||function(n,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(n)))return;var e=[],r=!0,i=!1,a=void 0;try{for(var o,c=n[Symbol.iterator]();!(r=(o=c.next()).done)&&(e.push(o.value),!t||e.length!==t);r=!0);}catch(n){i=!0,a=n}finally{try{r||null==c.return||c.return()}finally{if(i)throw a}}return e}(n,t)||function(n,t){if(!n)return;if("string"==typeof n)return g(n,t);var e=Object.prototype.toString.call(n).slice(8,-1);"Object"===e&&n.constructor&&(e=n.constructor.name);if("Map"===e||"Set"===e)return Array.from(n);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return g(n,t)}(n,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 g(n,t){(null==t||t>n.length)&&(t=n.length);for(var e=0,r=new Array(t);e<t;e++)r[e]=n[e];return r}var x=function(n,t,e,r){var i,a,o,c,l,p,u,s=parseInt,g=Math.round,x="string"==typeof e;if("number"!=typeof n||n<-1||n>1||"string"!=typeof t||"r"!=t[0]&&"#"!=t[0]||e&&!x)return null;var f=function(n){var t=n.length,e={};if(t>9){var r;if(r=d(n=n.split(","),4),i=r[0],a=r[1],o=r[2],x=r[3],(t=n.length)<3||t>4)return null;e.r=s("a"==i[3]?i.slice(5):i.slice(4)),e.g=s(a),e.b=s(o),e.a=x?parseFloat(x):-1}else{if(8==t||6==t||t<4)return null;t<6&&(n="#"+n[1]+n[1]+n[2]+n[2]+n[3]+n[3]+(t>4?n[4]+n[4]:"")),n=s(n.slice(1),16),9==t||5==t?(e.r=n>>24&255,e.g=n>>16&255,e.b=n>>8&255,e.a=g((255&n)/.255)/1e3):(e.r=n>>16,e.g=n>>8&255,e.b=255&n,e.a=-1)}return e};return u=t.length>9,u=x?e.length>9||"c"==e&&!u:u,l=f(t),c=n<0,p=e&&"c"!=e?f(e):c?{r:0,g:0,b:0,a:-1}:{r:255,g:255,b:255,a:-1},c=1-(n=c?-1*n:n),l&&p?(r?(i=g(c*l.r+n*p.r),a=g(c*l.g+n*p.g),o=g(c*l.b+n*p.b)):(i=g(Math.pow(c*Math.pow(l.r,2)+n*Math.pow(p.r,2),.5)),a=g(Math.pow(c*Math.pow(l.g,2)+n*Math.pow(p.g,2),.5)),o=g(Math.pow(c*Math.pow(l.b,2)+n*Math.pow(p.b,2),.5))),x=l.a,p=p.a,x=(l=x>=0||p>=0)?x<0?p:p<0?x:x*c+p*n:0,u?"rgb"+(l?"a(":"(")+i+","+a+","+o+(l?","+g(1e3*x)/1e3:"")+")":"#"+(4294967296+16777216*i+65536*a+256*o+(l?g(255*x):0)).toString(16).slice(1,l?void 0:-2)):null};console.log(x(-.25,"#E5EEFC"));var f={main:"#EBECF0",secondary:"",contrast:"#636363"},h={light:p({},f),inset0:"inset 0px 0px 0px rgba(0,0,0,0), inset -0px -0px 0px rgba(255,255,255,0)",flatToPushed:"inset 0px 0px 0px rgba(0,0,0,0.18), inset -0px -0px 0px rgba(255,255,255,0.95)",pulled:" ".concat(x(.3,f.main)," 1px 1px 1px 0px inset, ").concat(x(-.15,f.main)," -1px -1px 1px 0px inset, ").concat(x(.8,f.main)," -2px -2px 5px 1px, ").concat(x(-.3,f.main)," 2px 4px 6px 1px"),pressed:" ".concat(x(.1,f.main)," 1px 1px 1px 0px inset, ").concat(x(-.3,f.main)," -1px -1px 1px 0px inset, ").concat(x(.2,f.main)," -2px -2px 2px 1px, ").concat(x(-.3,f.main)," 2px 2px 2px 1px"),pushed:"".concat(x(-.4,f.main)," 3px 3px 3px 0px inset,").concat(x(.9,f.main)," -1px -1px 2px 0px inset, ").concat(x(-.05,f.main)," -1px -1px 2px 0px , ").concat(x(.3,f.main)," 1px 1px 3px 0px "),flat:" ".concat(x(-.3,f.main)," 1px 1px 1px 1px inset ,").concat(x(.2,f.main)," -1px -1px 1px 1px inset ,").concat(x(.2,f.main)," -1px -1px 0.4px 1px ,").concat(x(-.3,f.main)," -1px -1px 0.4px 1px "),backgroundImage:"linear-gradient(\n\t\t150deg,\n\t\t".concat(x(.03,f.main),",\n\t\t").concat(x(-.03,f.main),"\n\t );"),flatDown:"".concat(x(-.3,f.main)," 0px 0px 0px 0px inset,").concat(x(.1,f.main)," -0px -0px 0px 0px inset,").concat(x(.2,f.main)," -0px -0px 0px 0px , ").concat(x(-.3,f.main)," -0px -0px 0px 0px "),checkboxUp:"".concat(x(.2,f.main)," 1px 1px 2px 0px inset, ").concat(x(-.3,f.main)," -3px -4px 4px 2px inset, ").concat(x(.2,f.main)," -2px -2px 3px 1px, ").concat(x(-.3,f.main)," 2px 1px 4px 2px")};function m(){var n=s(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n align-content: center;\n"]);return m=function(){return n},n}function b(){var n=s(["\n /* padding: 5px 0 5px 5px; */\n width: 425px;\n height: auto;\n border: 0;\n border-radius: 15px;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 5px;\n justify-content: center;\n align-items: center;\n align-content: center;\n outline: none;\n box-shadow: ",";\n background-color: ",";\n label {\n margin: 10px 0;\n }\n color: ",";\n"]);return b=function(){return n},n}function y(){var n=s(["\n margin: 5px;\n width: 200px;\n height: 3rem;\n left: 42px;\n top: 48px;\n border-radius: 13px;\n outline: none;\n\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n align-content: center;\n\n cursor: pointer;\n overflow: hidden;\n -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n color: ",";\n"]);return y=function(){return n},n}var w=a(e.animated.button)(y(),h.light.contrast),v=a(e.animated.div)(b(),h.pulled,h.light.main,h.light.contrast),k=a.div(m()),E=function(n){var t=n.handleClick,e=n.springA,r=(n.setA,n.springB),a=(n.setB,n.options),o=n.title;return i.createElement(v,null,i.createElement("label",{htmlFor:"title"},i.createElement("span",null,o)),i.createElement(k,null,i.createElement(w,{role:"button",onClick:function(){return t(a[0])},style:e},a[0]),i.createElement(w,{role:"button",onClick:function(){return t(a[1])},style:r},a[1])))};function O(){var n=s(["\n min-width: 150px;\n height: 50px;\n left: 42px;\n top: 48px;\n border-radius: 25px;\n margin: 5px;\n box-sizing: border-box;\n outline: none;\n border: 0;\n color: ",";\n"]);return O=function(){return n},n}var j=a(e.animated.button)(O(),h.light.contrast),S=function(n){var t=n.children,e=n.handleClick,r=n.styles,a=n.color,o=n.handleMouseDown,c=n.handleMouseUp;return i.createElement(j,{color:a,style:r,onClick:e,onMouseDown:o,onMouseUp:c,onTouchStart:o,onTouchEnd:function(){c()},onTouchCancel:c},t)},C={boxShadow:h.pulled,backgroundImage:"linear-gradient(\n 150deg,\n ".concat(x(.1,h.light.main),",\n ").concat(x(-.05,h.light.main),"\n )")},M={boxShadow:h.pushed,backgroundImage:"linear-gradient(\n 150deg,\n ".concat(x(-.15,h.light.main),",\n ").concat(x(.1,h.light.main),"\n )")},I={boxShadow:h.flat,backgroundImage:"linear-gradient(\n 150deg,\n ".concat(x(-.1,h.light.main),",\n ").concat(x(.1,h.light.main),"\n )")};function P(){var n=s(["\n width: 30px;\n height: 30px;\n border-radius: 15%;\n margin: 5px;\n\n ",":checked + & {\n }\n"]);return P=function(){return n},n}function A(){var n=s(["\n border: 0;\n clip: rect(0 0 0 0);\n clippath: inset(50%);\n height: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n"]);return A=function(){return n},n}function B(){var n=s(["\n fill: none;\n stroke: ",";\n stroke-width: 2px;\n"]);return B=function(){return n},n}function D(){var n=s(["\n margin: 5px;\n display: -ms-flexbox;\n display: -webkit-flex;\n display: inline-flex;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n -webkit-flex-wrap: nowrap;\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-align-content: center;\n -ms-flex-line-pack: center;\n align-content: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n span {\n display: table-cell;\n vertical-align: center;\n }\n color: ",";\n"]);return D=function(){return n},n}var T=a.label(D(),h.light.contrast),N=a(e.animated.svg)(B(),(function(n){return x(.8,h.light.main)})),U=a.input.attrs({type:"checkbox"})(A()),z=a(e.animated.div)(P(),U);function F(){var n=s(["\n background: ",";\n width: ","px;\n height: ","px;\n padding: 1rem;\n border-radius: 40px;\n box-shadow: ",";\n"]);return F=function(){return n},n}var q=a(e.animated.div)(F(),(function(n){return x(0,h.light.main)}),(function(n){return n.width}),(function(n){return n.height}),h.pulled);function R(){var n=s(["\n min-width: 150px;\n border: none;\n outline: none;\n padding: 20px 20px 20px 20px;\n margin: 5px;\n border: 1px solid ",";\n box-sizing: border-box;\n box-shadow: ",";\n border: 0;\n background-image: linear-gradient(\n 150deg,\n ",",\n ","\n );\n color: ",";\n\n ::placeholder {\n color: ",";\n }\n"]);return R=function(){return n},n}var L=a(e.animated.input)(R(),(function(n){return x(h.light.main)}),h.pushed,x(-.1,h.light.main),x(.15,h.light.main),h.light.contrast,x(.4,h.light.contrast)),_=function(n){var t=n.theme,r=(n.name,n.value),a=n.handleChange,o=n.placeholderText,c={borderRadius:"25px"},l=d(e.useSpring((function(){return{from:c,config:e.config.wobbly,precision:.1}})),1)[0];return i.createElement(L,{style:l,placeholder:o,type:"text",value:r,onChange:a,name:"text",theme:t})};function $(){var n=s(["\n width: 30px;\n height: 30px;\n max-width: 30px;\n max-height: 30px;\n border-radius: 50%;\n margin: 5px;\n"]);return $=function(){return n},n}function G(){var n=s(["\n border: 0;\n clip: rect(0 0 0 0);\n clippath: inset(50%);\n height: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n"]);return G=function(){return n},n}function H(){var n=s(["\n fill: none;\n stroke: ",";\n stroke-width: 2px;\n"]);return H=function(){return n},n}function J(){var n=s(["\n margin: 5px;\n display: -ms-flexbox;\n display: -webkit-flex;\n display: inline-flex;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-flex-wrap: nowrap;\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-align-content: center;\n -ms-flex-line-pack: center;\n align-content: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n span {\n display: table-cell;\n vertical-align: center;\n }\n color: ",";\n"]);return J=function(){return n},n}var K=a.label(J(),h.light.contrast),Q=a(e.animated.svg)(H(),(function(n){return x(.8,h.light.main)})),V=a.input.attrs({type:"radio"})(G()),W=a(e.animated.div)($());n.Binary=function(n){var r=n.options,a=n.handleClick,o=n.title,c=d(t.useState(void 0),2),l=c[0],u=c[1],s=["",""],g={boxShadow:h.flatDown,border:"1px solid ".concat(x(-.3,h.light.main)),backgroundImage:"linear-gradient(\n\t\t\t150deg,\n\t\t\t".concat(h.light.main,",\n\t\t\t").concat(h.light.main,"\n\t\t )")},f={boxShadow:h.pushed,border:"0px solid ".concat(x(-.2,h.light.main)),backgroundImage:"linear-gradient(\n 150deg,\n ".concat(x(-.1,h.light.main),",\n ").concat(x(.15,h.light.main),"\n )")},m=d(e.useSpring((function(n){return{from:g,config:p(p({},e.config.stiff),{},{precision:.1})}})),2),b=m[0],y=m[1],w=d(e.useSpring((function(n){return{from:g,config:p(p({},e.config.stiff),{},{precision:.1})}})),2),v=w[0],k=w[1];return Array.isArray(r)&&2===r.length&&s.map((function(n,t){if("string"==typeof r[t]||r[t]instanceof String)return r[t]})),l===(s=r)[0]?(y(f),k(g)):l===s[1]?(y(g),k(f)):(y(g),k(g)),i.createElement(E,{handleClick:function(n){u(l===n?void 0:n),n||a(null)},springA:b,setA:y,springB:v,setB:k,options:s,title:o})},n.Button=function(n){var t=n.active,r=n.handleClick,a=n.children,o=n.color,c=d(e.useSpring((function(){return{from:t?M:C,config:{tension:170,friction:15,precision:.1}}})),2),l=c[0],p=c[1];return i.createElement(S,{handleClick:r,handleMouseDown:function(){t||p(I)},handleMouseUp:function(){t||p(C)},styles:l,color:o,active:t},a)},n.Checkbox=function(n){var t=n.className,r=n.checked,a=n.label,o=n.handleChange,l=u(n,["className","checked","label","handleChange"]),s={boxShadow:h.pushed,backgroundImage:"linear-gradient(\n\t\t\t150deg,\n ".concat(x(-.15,h.light.main),",\n\t\t\t").concat(x(.1,h.light.main),"\n\t\t )"),opacity:0,border:"0px solid ".concat(x(-.4,h.light.main))},g={boxShadow:h.pulled,backgroundImage:"linear-gradient(\n\t\t\t150deg,\n\t\t\t".concat(x(.1,h.light.main),",\n\t\t\t").concat(x(-.05,h.light.main),"\n\t\t )"),opacity:1,border:"0px solid ".concat(x(-.2,h.light.main))},f=d(e.useSpring((function(n){return{from:r?g:s,config:p(p({},e.config.wobbly),{},{precision:.1})}})),2),m=f[0],b=f[1],y=d(e.useSpring((function(n){return{from:{opacity:0},config:p(p({},e.config.wobbly),{},{precision:.1,clamp:!0})}})),2),w=y[0],v=y[1];return r?(b(g),v({opacity:1})):(b(s),v({opacity:0})),i.createElement(T,{className:t},i.createElement(U,c({onChange:o,checked:r},l)),i.createElement(z,{style:p(p({},m),{},{opacity:null}),onMouseEnter:function(n){v({opacity:1})},onMouseLeave:function(n){r||v({opacity:0})},className:"hello"},i.createElement(N,{style:w,viewBox:"0 0 24 24"},i.createElement("polyline",{points:"20 6 9 17 4 12",stroke:h.light.contrast}))),i.createElement("span",null,a))},n.Radio=function(n){var t=n.className,r=n.checked,a=n.value,o=n.handleChange,l=u(n,["className","checked","value","handleChange"]),s={boxShadow:h.pushed,backgroundImage:"linear-gradient(\n\t\t\t150deg,\n ".concat(x(-.15,h.light.main),",\n\t\t\t").concat(x(.1,h.light.main),"\n\t\t )"),opacity:0,border:"0px solid ".concat(x(-.4,h.light.main))},g=("linear-gradient(\n\t\t\t150deg,\n\t\t\t".concat(h.light.main,",\n\t\t\t").concat(h.light.main,"\n\t\t )"),"1px solid ".concat(x(-.4,h.light.main)),{boxShadow:h.pulled,backgroundImage:"linear-gradient(\n\t\t\t150deg,\n\t\t\t".concat(x(.1,h.light.main),",\n\t\t\t").concat(x(-.05,h.light.main),"\n\t\t )"),opacity:1,border:"0px solid ".concat(x(-.2,h.light.main))}),f=d(e.useSpring((function(n){return{from:r?g:s,config:p(p({},e.config.wobbly),{},{precision:.1})}})),2),m=f[0],b=f[1],y=d(e.useSpring((function(n){return{from:{opacity:0},config:p(p({},e.config.wobbly),{},{precision:.1,clamp:!0})}})),2),w=y[0],v=y[1];return r?(b(g),v({opacity:1})):(b(s),v({opacity:0})),i.createElement(K,{className:t},i.createElement(V,c({value:a,onChange:function(n){return o(n)},name:name,checked:r},l)),i.createElement(W,{checked:r,style:p(p({},m),{},{opacity:null}),onMouseEnter:function(){v({opacity:1})},onMouseLeave:function(){r||v({opacity:0})},className:"hello",value:a,name:a},i.createElement(Q,{theme:h,style:w,viewBox:"0 0 24 24"},i.createElement("circle",{cx:"12",cy:"12",r:"3",stroke:x(0,h.light.contrast),fill:x(0,h.light.contrast)}))),i.createElement("span",null,a))},n.Surface=function(n){var t=n.children,e=n.width,r=n.height;return i.createElement(q,{width:e,height:r},t)},n.Textinput=function(n){var t=n.value,e=n.handleChange,r=n.placeholderText;return i.createElement(_,{handleChange:e,value:t,placeholderText:r})},Object.defineProperty(n,"__esModule",{value:!0})}));