UNPKG

windups

Version:

A unique typewriter effect library for React.

3 lines (2 loc) 9.45 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),r=(e=require("break-styled-lines"))&&"object"==typeof e&&"default"in e?e.default:e;function t(e){return 2===e.length}function i(e){return!!Array.isArray(e)&&3===e.length&&!(!Array.isArray(e[0])||!Array.isArray(e[1]))}function u(e,n){return[[],e.split(""),n]}function c(e,n){return[[],e,n]}function o(e){return!(e[0].length>0)&&e[1].reduce((function(n,r){return i(r)&&i(e)&&n?o(r):n}),!0)}function s(e){return 0===e[1].length}function a(e){var n=h(e);return s(n)?n:a(n)}function p(e){if(o(e))return e;var n=e[1],r=e[2],t=function(e){return i(e)?p(e):e};return[[],[].concat(e[0].map(t),n.map(t)),r]}function f(e){var n=e[0];return e[1].reduce((function(e,n){return i(n)&&!o(n)?l(n):e}),void 0)||n[n.length-1]}function l(e){var n=f(e);return i(n)?l(n):n}function d(e){var n=e[1],r=e[0].map((function(e){if(i(e)){var n=e[2];return[d(e),n]}return e})),t=n[0];if(i(t)&&!o(t)){var u=t[2];return[].concat(r,[[d(t),u]])}return r}function h(e){if(s(e))return e;var n=e[0],r=e[1],t=e[2],u=r[0],c=r.slice(1);if(i(u)){var o=h(u);return s(o)?[[].concat(n,[o]),c,t]:[n,[o].concat(c),t]}return[[].concat(n,[u]),c,t]}function m(){return(m=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}function y(e,n){switch(e){case"—":case"…":return 200;case".":case",":return 150;case"?":case"!":return"!"!==n&&"?"!==n?150:20;case"-":case" ":case"\n":return 0;default:return 20}}var v=function(e){return n.createElement(n.Fragment,null,e.children)},g=function(e){return n.createElement(n.Fragment,null,e.children)};function k(e){return{windup:e,didFinishOnce:!1}}function w(e,n){switch(n.type){case"replace":return k(n.windup);case"next":return m({},e,{windup:h(e.windup)});case"rewind":return{windup:p(e.windup),didFinishOnce:!1};case"fast-forward":return m({},e,{windup:a(e.windup)});case"finish":return m({},e,{didFinishOnce:!0});default:return e}}function E(e,r){var t=n.useReducer(w,e,k),u=t[0],c=u.windup,a=u.didFinishOnce,p=t[1],d=n.useRef(null),h=s(c),m=n.useRef(null),v=n.useRef(null),g=n.useRef(!1),E=n.useCallback((function(){h||(d.current&&clearTimeout(d.current),p({type:"fast-forward"}))}),[h]),x=n.useCallback((function(){var e;!0!==g.current&&(g.current=!0,d.current&&(clearTimeout(d.current),v.current=Math.max(0,(null!=(e=m.current)?e:0)-Date.now())))}),[]),C=n.useCallback((function(){var e;!0===g.current&&(h||setTimeout((function(){g.current=!1,p({type:"next"})}),null!=(e=v.current)?e:0))}),[h]),b=n.useCallback((function(){d.current&&clearTimeout(d.current),p({type:"rewind"})}),[]);return n.useEffect((function(){p({type:"replace",windup:e})}),[e]),n.useEffect((function(){d.current&&clearTimeout(d.current),r.skipped&&p({type:"fast-forward"}),!1===r.skipped&&p({type:"rewind"})}),[r.skipped]),n.useEffect((function(){var e=function e(n){var r=n[1],t=n[2],u=f(n),c=r[0],s=[];return u&&i(u)&&s.push.apply(s,e(u)),c&&i(c)&&!o(c)&&s.push.apply(s,e(c)),t.onChar&&s.push(t.onChar),s}(c),n=l(c);e.length>0&&n&&e.forEach((function(e){e(n)}))}),[c]),n.useEffect((function(){if(!1===a&&h){var e=setTimeout((function(){r.onFinished&&r.onFinished(),p({type:"finish"})}),0);return function(){clearTimeout(e)}}}),[a,h,r]),n.useEffect((function(){if(!h){var e=function e(n,r){if(!s(n)){var t=n[2],u=n[1][0];return u&&i(u)?e(u,t.pace||r):t.pace||r}}(c)||y,n=l(c),r=function e(n){var r=n[1][0];return i(r)?e(r):r}(c),t=n?e(n,r):0;return m.current=Date.now()+t,!0!==g.current&&(d.current=setTimeout((function(){p({type:"next"})}),t)),function(){d.current&&clearTimeout(d.current)}}}),[c,h]),{windup:c,skip:E,pause:x,resume:C,rewind:b,isFinished:h}}var x=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"],C=function(){return null},b=n.createContext({skip:function(){console.warn("Tried to use the useSkip hook outside of a WindupChildren component!!")},pause:function(){console.warn("Tried to use the usePause hook outside of a WindupChildren component!!")},resume:function(){console.warn("Tried to use the useResume hook outside of a WindupChildren component!!")},rewind:function(){console.warn("Tried to use the useRewind hook outside of a WindupChildren component!")},isFinished:!1});function F(e,r){if("string"==typeof r)return[].concat(e,r.split(""));if("number"==typeof r)return[].concat(e,r.toString().split(""));if(!n.isValidElement(r))return e;var t=r.props,o=t.children,s=function(e,n){if(null==e)return{};var r,t,i={},u=Object.keys(e);for(t=0;t<u.length;t++)n.indexOf(r=u[t])>=0||(i[r]=e[r]);return i}(t,["children"]),a=r.type===v?{pace:function(e){return"ms"in r.props?r.props.ms:r.props.getPace(e)}}:{},p=function(e){return e.type===g}(r)?{onChar:r.props.fn}:{},f=r.key?{key:r.key}:{};if(function(e){return e.type===C}(r))return[].concat(e,[u(" ",m({element:n.Fragment},f,{props:{children:void 0},pace:function(){return r.props.ms}}))]);if(void 0===o)return[].concat(e,[u(" ",m({element:r.type,props:m({},s,{children:void 0})},f,a,p))]);if("string"==typeof o)return[].concat(e,[u(o,m({element:r.type,props:s},f,a,p))]);if(o instanceof Function)return[].concat(e,[u(" ",m({element:r.type,props:m({children:o},s)},f,a,p))]);var l=n.Children.toArray(o).reduce(F,[]).map((function(e){return i(e)?[e[0],e[1],m({},a,p,e[2])]:e}));return[].concat(e,[c(l,m({element:r.type,props:s},f,a,p))])}function O(e){if(null==e)return"";var r=n.Children.map(e,(function(e){return"string"==typeof e?e:"number"==typeof e?e.toString():n.isValidElement(e)?"#"+(e.key||"")+"<"+O(e.props.children)+">":""}));return r?r.join(","):""}function T(e,r){var t=e[0],i=e[1];if("string"==typeof r||"number"==typeof r){var u=i[0],c=i.slice(1);return[[].concat(t,[u]),c]}if(!n.isValidElement(r))return[t,i];var o=n.Children.toArray(r.props.children).reduce(T,[[],i]),s=o[1];return[[].concat(t,[n.cloneElement(r,{children:o[0]})]),s]}function j(e){return e.type===S}function S(e){return n.createElement(n.Fragment,null,e.children)}exports.CharWrapper=function(e){var r=e.element;return n.createElement(n.Fragment,null,n.Children.map(e.children,(function(e){return function e(r,t){if("string"==typeof r)return r.split("").map((function(e,r){return"\n"===e?e:n.createElement(t,{key:e+"-"+r},e)}));if("number"==typeof r)return r.toString().split("").map((function(e){return n.createElement(t,null,e)}));if(!n.isValidElement(r))return n.createElement(n.Fragment,null);if(r.props.children){var i=r.type;return r.props.children instanceof Function?n.createElement(i,Object.assign({key:r.key},r.props)):n.createElement(i,Object.assign({key:r.key},r.props),n.Children.map(r.props.children,(function(n){return e(n,t)})))}return r}(e,r)})))},exports.Effect=function(e){var r=e.fn;return n.useEffect((function(){r()}),[]),null},exports.Linebreaker=function(e){var t=e.fontStyle,i=e.width,u=n.Children.toArray(e.children),c=u.reduce(function e(r){return function(t,i){return"string"==typeof i?[].concat(t,[{text:i,font:r}]):"number"==typeof i?[].concat(t,[{text:i.toString(),font:r}]):n.isValidElement(i)?j(i)&&"string"==typeof i.props.children?[].concat(t,[{text:i.props.children,font:i.props.fontStyle}]):j(i)?[].concat(t,n.Children.toArray(i.props.children).reduce(e(i.props.fontStyle),[])):[].concat(t,n.Children.toArray(i.props.children).reduce(e(r),[])):t}}(t),[]),o=r(c,i,t),s=u.reduce(T,[[],o]);return n.createElement("div",{style:{whiteSpace:"pre"}},s[0])},exports.OnChar=g,exports.Pace=v,exports.Pause=C,exports.StyledText=S,exports.WindupChildren=function(e){var r=e.children,i=e.onFinished,u=e.skipped,o=e.isPaused,s=void 0!==o&&o,a=E(function(e,r){return n.useMemo(e,[O(r)])}((function(){return c(n.Children.toArray(r).reduce(F,[]),{element:void 0})}),r),{onFinished:i,skipped:u}),p=a.windup,f=a.skip,l=a.pause,h=a.resume,m=a.rewind,y=a.isFinished;return n.useEffect((function(){!0===s?l():h()}),[s,l,h]),n.createElement(b.Provider,{value:{skip:f,pause:l,resume:h,rewind:m,isFinished:y}},function e(r){var i=t(r)?r[1]:r[2],u=t(r)?r[0]:d(r),c=i.element||n.Fragment;if(i.props&&Object.keys(i.props).includes("children"))return n.createElement(c,Object.assign({key:i.key},i.props));var o=u.reduce((function(n,r){if("string"==typeof r){var t=n.slice(0,n.length-1),i=n[n.length-1];return i&&"string"==typeof i?[].concat(t,[i+r]):[].concat(n,[r])}return[].concat(n,[e(r)])}),[]);return"string"==typeof i.element&&x.includes(i.element)?n.createElement(c,Object.assign({key:i.key},i.props)):n.createElement(c,Object.assign({key:i.key},i.props),o)}(p))},exports.defaultGetPace=y,exports.textFromChildren=function e(r){var t=n.Children.map(r,(function(r){return"string"==typeof r?r:"number"==typeof r?r.toString():n.isValidElement(r)&&r.props.children?e(r.props.children):""}));return t?t.join(""):""},exports.useIsFinished=function(){return n.useContext(b).isFinished},exports.useRewind=function(){return n.useContext(b).rewind},exports.useSkip=function(){return n.useContext(b).skip},exports.useWindupString=function(e,r){void 0===r&&(r={});var i=E(n.useMemo((function(){return u(e,r)}),[e]),r),c=i.skip,o=i.pause,s=i.resume,a=i.rewind,p=i.isFinished,f=function e(n){return(t(n)?n[0]:d(n)).reduce((function(n,r){return"string"==typeof r?n+r:n+e(r)}),"")}(i.windup);return n.useDebugValue(f),[f,{skip:c,pause:o,resume:s,rewind:a,isFinished:p}]}; //# sourceMappingURL=windups.cjs.production.min.js.map