diff --git a/example/src/components/Footer/footer.js b/example/src/components/Footer/footer.js index f599a9b..8f17a13 100644 --- a/example/src/components/Footer/footer.js +++ b/example/src/components/Footer/footer.js @@ -12,15 +12,13 @@ const Footer = () => { Made with ❤ @@ -28,15 +26,13 @@ const Footer = () => { {itsaMe.map((letter, index) => ( { setInitialAnimationFinished(true)} + className="playground_form" animationname="fadeInFromLeft" duration="1000ms" delay="0ms" diff --git a/index.html b/index.html index 019df98..87d23ad 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,11 @@ React-Style-Text - - - + + + +
- \ No newline at end of file + diff --git a/index_bundle.js b/index_bundle.js index 6b923d2..8b52011 100644 --- a/index_bundle.js +++ b/index_bundle.js @@ -543,7 +543,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var react_style_text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-style-text */ \"./node_modules/react-style-text/dist/index.js\");\n/* harmony import */ var react_style_text__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_style_text__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _atoms_externalLink__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../atoms/externalLink */ \"./src/components/atoms/externalLink.js\");\nvar _templateObject;\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\n\nvar Footer = function Footer() {\n var me = \"andrew87e\";\n var itsaMe = me.split(\"\");\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(FooterContainer, null, \"Made with\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n style: {\n margin: \"0px 10px\",\n color: \"red\"\n },\n animationProps: {\n animationname: \"spin\",\n duration: \"2000ms\",\n delay: \"0ms\",\n direction: \"normal\",\n timing: \"linear\",\n iteration: \"infinite\",\n fillmode: \"none\"\n }\n }, \"\\u2764\"), \"by\\xA0\", itsaMe.map(function (letter, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n key: index,\n animationProps: {\n animationname: \"flipIn\",\n duration: \"2000ms\",\n delay: \" \".concat(index * 100, \"ms\"),\n direction: \"normal\",\n timing: \"ease-in-out\",\n iteration: \"1\",\n fillmode: \"none\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_externalLink__WEBPACK_IMPORTED_MODULE_2__[\"default\"]\n // href=\"https://github.com/andrew87e\"\n , {\n target: \"_blank\",\n color: \"#5cbd6b\"\n }, letter));\n }), \"\\xA0 using React and styled-components \\uD83D\\uDC85\\uD83C\\uDFFD\");\n};\nvar FooterContainer = styled_components__WEBPACK_IMPORTED_MODULE_3__[\"default\"].div(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n position: absolute;\\n bottom: 0;\\n width: 100vw;\\n height: 40px;\\n font-size: 0.8rem;\\n color: \", \";\\n // background-color: \", \";\\n background: radial-gradient(at left top, #000, #01030d);\\n\"])), function (props) {\n return props.theme.colors.middle;\n}, function (props) {\n return props.theme.colors.secondary;\n});\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Footer);\n\n//# sourceURL=webpack://react-style-text-demo/./src/components/Footer/footer.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var react_style_text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-style-text */ \"./node_modules/react-style-text/dist/index.js\");\n/* harmony import */ var react_style_text__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_style_text__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _atoms_externalLink__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../atoms/externalLink */ \"./src/components/atoms/externalLink.js\");\nvar _templateObject;\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\n\nvar Footer = function Footer() {\n var me = \"andrew87e\";\n var itsaMe = me.split(\"\");\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(FooterContainer, null, \"Made with\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n style: {\n margin: \"0px 10px\",\n color: \"red\"\n },\n animationname: \"shakeMix\",\n duration: \"2000ms\",\n delay: \"0ms\",\n direction: \"normal\",\n timing: \"linear\",\n iteration: \"infinite\",\n fillmode: \"none\"\n }, \"\\u2764\"), \"by\\xA0\", itsaMe.map(function (letter, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n key: index,\n animationname: \"flipIn\",\n duration: \"2000ms\",\n delay: \" \".concat(index * 100, \"ms\"),\n direction: \"normal\",\n timing: \"ease-in-out\",\n iteration: \"1\",\n fillmode: \"none\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_externalLink__WEBPACK_IMPORTED_MODULE_2__[\"default\"]\n // href=\"https://github.com/andrew87e\"\n , {\n target: \"_blank\",\n color: \"#5cbd6b\"\n }, letter));\n }), \"\\xA0 using React and styled-components \\uD83D\\uDC85\\uD83C\\uDFFD\");\n};\nvar FooterContainer = styled_components__WEBPACK_IMPORTED_MODULE_3__[\"default\"].div(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n position: absolute;\\n bottom: 0;\\n width: 100vw;\\n height: 40px;\\n font-size: 0.8rem;\\n color: \", \";\\n // background-color: \", \";\\n background: radial-gradient(at left top, #000, #01030d);\\n\"])), function (props) {\n return props.theme.colors.middle;\n}, function (props) {\n return props.theme.colors.secondary;\n});\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Footer);\n\n//# sourceURL=webpack://react-style-text-demo/./src/components/Footer/footer.js?"); /***/ }), @@ -565,7 +565,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_style_text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-style-text */ \"./node_modules/react-style-text/dist/index.js\");\n/* harmony import */ var react_style_text__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_style_text__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ \"./node_modules/@fortawesome/react-fontawesome/index.es.js\");\n/* harmony import */ var _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ \"./node_modules/@fortawesome/free-solid-svg-icons/index.mjs\");\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _atoms_selectMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../atoms/selectMenu */ \"./src/components/atoms/selectMenu.js\");\n/* harmony import */ var _atoms_roundButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../atoms/roundButton */ \"./src/components/atoms/roundButton.js\");\n/* harmony import */ var _atoms_rangeController__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../atoms/rangeController */ \"./src/components/atoms/rangeController.js\");\n/* harmony import */ var _atoms_checkbox__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../atoms/checkbox */ \"./src/components/atoms/checkbox.js\");\n/* harmony import */ var _atoms_codeContainer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../atoms/codeContainer */ \"./src/components/atoms/codeContainer.js\");\n/* harmony import */ var _static__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./static */ \"./src/components/Playground/static.js\");\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\n\n\n\n\n\n\nvar Text = \"react-style-text\";\nvar Letters = Text.split(\"\");\nvar borderColor = \"#000\";\nvar Playground = function Playground() {\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(0),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n counter = _React$useState2[0],\n setCounter = _React$useState2[1];\n var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(\"object\"),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n animationObject = _React$useState4[0],\n setAnimationObject = _React$useState4[1];\n var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(\"slideInFromRight\"),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n animationType = _React$useState6[0],\n setAnimationType = _React$useState6[1];\n var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(false),\n _React$useState8 = _slicedToArray(_React$useState7, 2),\n isIterationDisabled = _React$useState8[0],\n setIsIterationDisabled = _React$useState8[1];\n var _React$useState9 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(1000),\n _React$useState10 = _slicedToArray(_React$useState9, 2),\n duration = _React$useState10[0],\n setDuration = _React$useState10[1];\n var _React$useState11 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(0),\n _React$useState12 = _slicedToArray(_React$useState11, 2),\n delay = _React$useState12[0],\n setDelay = _React$useState12[1];\n var _React$useState13 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(100),\n _React$useState14 = _slicedToArray(_React$useState13, 2),\n interval = _React$useState14[0],\n setInterval = _React$useState14[1];\n var _React$useState15 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(1),\n _React$useState16 = _slicedToArray(_React$useState15, 2),\n iterationCount = _React$useState16[0],\n setIterationCount = _React$useState16[1];\n var _React$useState17 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(\"ease\"),\n _React$useState18 = _slicedToArray(_React$useState17, 2),\n timingFunction = _React$useState18[0],\n setTimingFunction = _React$useState18[1];\n var _React$useState19 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(\"normal\"),\n _React$useState20 = _slicedToArray(_React$useState19, 2),\n direction = _React$useState20[0],\n setDirection = _React$useState20[1];\n var _React$useState21 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(\"none\"),\n _React$useState22 = _slicedToArray(_React$useState21, 2),\n fillmode = _React$useState22[0],\n setFillMode = _React$useState22[1];\n var _React$useState23 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(false),\n _React$useState24 = _slicedToArray(_React$useState23, 2),\n initialAnimationFinished = _React$useState24[0],\n setInitilaAnimation = _React$useState24[1];\n var _React$useState25 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(false),\n _React$useState26 = _slicedToArray(_React$useState25, 2),\n secondaryAnimationFinished = _React$useState26[0],\n setSecondaryAnimationFinished = _React$useState26[1];\n var handleIterationDisable = function handleIterationDisable() {\n setIsIterationDisabled(!isIterationDisabled);\n if (isIterationDisabled) {\n setIterationCount(5);\n } else {\n setIterationCount(\"infinite\");\n }\n };\n var setInitialAnimationFinished = function setInitialAnimationFinished(value) {\n setAnimationType(\"blur\");\n setInitilaAnimation(value);\n };\n var handleSelectType = function handleSelectType(event) {\n setAnimationType(event.target.value);\n };\n var handleReplay = function handleReplay() {\n setCounter(counter + 1);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PlaygroundContainer, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(FormContainer, {\n className: \"playground_form\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n onAnimationEnd: function onAnimationEnd() {\n return setInitialAnimationFinished(true);\n },\n animationname: \"fadeInFromLeft\",\n duration: \"1000ms\",\n delay: \"0ms\",\n direction: \"normal\",\n timing: \"ease-in-out\",\n iteration: \"1\",\n fillmode: \"none\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledForm, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_selectMenu__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n items: [\"object\", \"letters\", \"multiline\"],\n label: \"presences\",\n handleSelect: function handleSelect(event) {\n return setAnimationObject(event.target.value);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_rangeController__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n label: \"duration\",\n initialValue: duration,\n min: 500,\n max: 2000,\n step: 100,\n unit: \"ms\",\n onChange: function onChange(event) {\n return setDuration(event.target.value);\n }\n }), animationObject === \"object\" && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_rangeController__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n label: \"delay\",\n initialValue: 0,\n min: 0,\n max: 20,\n step: 1,\n unit: \"s\",\n onChange: function onChange(event) {\n return setDelay(event.target.value);\n }\n }), animationObject === \"letters\" && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_rangeController__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n label: \"delay of each letter\",\n initialValue: 100,\n min: 100,\n max: 2000,\n step: 100,\n unit: \"ms\",\n onChange: function onChange(event) {\n return setInterval(event.target.value);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(RowContainer, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_rangeController__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n label: \"iteration\",\n disabled: isIterationDisabled,\n min: 1,\n max: 20,\n step: 1,\n unit: \"\",\n initialValue: iterationCount,\n optionalValue: isIterationDisabled ? \"infinite\" : undefined,\n onChange: function onChange(event) {\n return setIterationCount(event.target.value);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_checkbox__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n label: \"infinite\",\n onClick: handleIterationDisable\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_selectMenu__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n items: _static__WEBPACK_IMPORTED_MODULE_8__.TimingFunctionItems,\n label: \"timing-function\",\n handleSelect: function handleSelect(event) {\n return setTimingFunction(event.target.value);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_selectMenu__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n items: _static__WEBPACK_IMPORTED_MODULE_8__.DirectionItems,\n label: \"direction\",\n handleSelect: function handleSelect(event) {\n return setDirection(event.target.value);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_selectMenu__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n items: _static__WEBPACK_IMPORTED_MODULE_8__.FillModeItems,\n label: \"fill-mode\",\n handleSelect: function handleSelect(event) {\n return setFillMode(event.target.value);\n }\n })), initialAnimationFinished && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n onAnimationEnd: function onAnimationEnd() {\n return setSecondaryAnimationFinished(true);\n },\n animationname: \"unfold\",\n duration: \"1000ms\",\n delay: \"0ms\",\n direction: \"normal\",\n timing: \"ease-in-out\",\n iteration: \"1\",\n fillmode: \"none\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: {\n display: \"flex\"\n }\n }, secondaryAnimationFinished && \"Click to copy code\".split(\"\").map(function (letter, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n key: index,\n style: {\n cursor: \"pointer\",\n color: \"#fff\"\n },\n animationname: \"fadeIn\",\n duration: \"1000ms\",\n delay: \"\".concat(index * 10, \"ms\"),\n direction: \"normal\",\n timing: \"linear\",\n iteration: 1,\n fillmode: \"forwards\"\n }, letter);\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_codeContainer__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n animationObject: animationObject,\n animationType: animationType,\n duration: duration,\n delay: delay,\n direction: direction,\n timingFunction: timingFunction,\n iterationCount: iterationCount,\n fillmode: fillmode,\n interval: interval\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ResultContainer, {\n className: \"resultContainer\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ResultField, null, animationObject === \"object\" && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n key: counter,\n animationname: animationType,\n duration: \"\".concat(duration, \"ms\"),\n delay: \"\".concat(interval, \"ms\"),\n direction: direction,\n timing: timingFunction,\n iteration: iterationCount,\n fillmode: fillmode\n }, Text), animationObject === \"letters\" && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(LettersContainer, {\n key: counter\n }, Letters.map(function (item, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n key: index,\n animationname: animationType,\n duration: \"\".concat(duration, \"ms\"),\n delay: \"\".concat(index * interval, \"ms\"),\n direction: direction,\n timing: timingFunction,\n iteration: iterationCount,\n fillmode: fillmode\n }, item);\n })), animationObject === \"multiline\" && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.Typewriter, {\n key: counter,\n datatext: [\"Sushi\", \"Pizza\", \"Brötchen\", \"Salat\"],\n cursorcolor: \"green\"\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(EffectController, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n animationname: \"slideInFromTop\",\n duration: \"3000ms\",\n delay: \"0ms\",\n direction: \"normal\",\n timing: \"ease-in-out\",\n iteration: \"1\",\n fillmode: \"none\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_selectMenu__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n hasOptGroup: animationObject !== \"multiline\",\n items: animationObject === \"multiline\" ? [\"Typewriter\"] : _static__WEBPACK_IMPORTED_MODULE_8__.AnimationTypes,\n width: \"400px\",\n height: \"45px\",\n fontSize: \"1.25rem\",\n handleSelect: handleSelectType\n })), secondaryAnimationFinished ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n animationname: \"rotateSlowDown\",\n duration: \"3000ms\",\n delay: \"0ms\",\n direction: \"normal\",\n timing: \"ease-in-out\",\n iteration: \"1\",\n fillmode: \"none\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_roundButton__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n title: \"replay animation\",\n onClick: handleReplay\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__.FontAwesomeIcon, {\n icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_9__.faRedo\n }))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: {\n width: \"95px\"\n }\n }))));\n};\nvar PlaygroundContainer = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n flex-direction=column;\\n justify-content: space-between;\\n align-items: flex-start;\\n width: 100%;\\n padding: 0 5rem;\\n height: calc(100vh - 230px);\\n background: radial-gradient(at center top, #323234, #01030d);\\n\"])));\nvar FormContainer = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n flex-direction=column;\\n width: 400px;\\n min-width: 300px;\\n height: calc(80vh);\\n z-index: 10;\\n align-self: flex-start;\\n\\n @media (min-width: 1080px) {\\n margin-left: 150px;\\n }\\n\"])));\nvar StyledForm = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].form(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 25vw;\\n border-radius: 3px;\\n margin-bottom: 5rem;\\n\"])));\nvar RowContainer = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n display: flex;\\n justify-content: space-between;\\n align-items: flex-end;\\n\"])));\nvar ResultContainer = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n display: flex;\\n\\n height: 100%;\\n width: calc(100vw - 400px);\\n min-width: 600px;\\n flex-direction: column;\\n justify-content: space-evenly;\\n align-items: center;\\n\"])));\nvar ResultField = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n width: 80%;\\n height: 500px;\\n margin-left: 15rem;\\n margin-right 15rem;\\n background-color: initial;\\n font-size: calc(0.6rem + 4vmax);\\n font-weight: 100;\\n letter-spacing: -2;\\n color: \", \";\\n text-border: 1px solid \", \";\\n text-shadow: 1px 1px 0 \", \", -1px 1px 0 \", \",\\n 1px -1px 0 \", \", -1px -1px 0 \", \",\\n 0px 1px 0 \", \", 0px -1px 0 \", \",\\n -1px 0px 0 \", \", 1px 0px 0 \", \",\\n 2px 2px 0 \", \", -2px 2px 0 \", \",\\n 2px -2px 0 \", \", -2px -2px 0 \", \",\\n 0px 2px 0 \", \", 0px -2px 0 \", \",\\n -2px 0px 0 \", \", 2px 0px 0 \", \",\\n 1px 2px 0 \", \", -1px 2px 0 \", \",\\n 1px -2px 0 \", \", -1px -2px 0 \", \",\\n 2px 1px 0 \", \", -2px 1px 0 \", \",\\n 2px -1px 0 \", \", -2px -1px 0 \", \";\\n\"])), function (props) {\n return props.theme.colors.primary;\n}, function (props) {\n return props.theme.colors.primary;\n}, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor);\nvar LettersContainer = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n width: 100%;\\n height: 100%;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n\"])));\nvar EffectController = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n width: 100%;\\n\"])));\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Playground);\n\n//# sourceURL=webpack://react-style-text-demo/./src/components/Playground/playground.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_style_text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-style-text */ \"./node_modules/react-style-text/dist/index.js\");\n/* harmony import */ var react_style_text__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_style_text__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ \"./node_modules/@fortawesome/react-fontawesome/index.es.js\");\n/* harmony import */ var _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ \"./node_modules/@fortawesome/free-solid-svg-icons/index.mjs\");\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _atoms_selectMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../atoms/selectMenu */ \"./src/components/atoms/selectMenu.js\");\n/* harmony import */ var _atoms_roundButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../atoms/roundButton */ \"./src/components/atoms/roundButton.js\");\n/* harmony import */ var _atoms_rangeController__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../atoms/rangeController */ \"./src/components/atoms/rangeController.js\");\n/* harmony import */ var _atoms_checkbox__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../atoms/checkbox */ \"./src/components/atoms/checkbox.js\");\n/* harmony import */ var _atoms_codeContainer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../atoms/codeContainer */ \"./src/components/atoms/codeContainer.js\");\n/* harmony import */ var _static__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./static */ \"./src/components/Playground/static.js\");\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\n\n\n\n\n\n\nvar Text = \"react-style-text\";\nvar Letters = Text.split(\"\");\nvar borderColor = \"#000\";\nvar Playground = function Playground() {\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(0),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n counter = _React$useState2[0],\n setCounter = _React$useState2[1];\n var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(\"object\"),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n animationObject = _React$useState4[0],\n setAnimationObject = _React$useState4[1];\n var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(\"slideInFromRight\"),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n animationType = _React$useState6[0],\n setAnimationType = _React$useState6[1];\n var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(false),\n _React$useState8 = _slicedToArray(_React$useState7, 2),\n isIterationDisabled = _React$useState8[0],\n setIsIterationDisabled = _React$useState8[1];\n var _React$useState9 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(1000),\n _React$useState10 = _slicedToArray(_React$useState9, 2),\n duration = _React$useState10[0],\n setDuration = _React$useState10[1];\n var _React$useState11 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(0),\n _React$useState12 = _slicedToArray(_React$useState11, 2),\n delay = _React$useState12[0],\n setDelay = _React$useState12[1];\n var _React$useState13 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(100),\n _React$useState14 = _slicedToArray(_React$useState13, 2),\n interval = _React$useState14[0],\n setInterval = _React$useState14[1];\n var _React$useState15 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(1),\n _React$useState16 = _slicedToArray(_React$useState15, 2),\n iterationCount = _React$useState16[0],\n setIterationCount = _React$useState16[1];\n var _React$useState17 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(\"ease\"),\n _React$useState18 = _slicedToArray(_React$useState17, 2),\n timingFunction = _React$useState18[0],\n setTimingFunction = _React$useState18[1];\n var _React$useState19 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(\"normal\"),\n _React$useState20 = _slicedToArray(_React$useState19, 2),\n direction = _React$useState20[0],\n setDirection = _React$useState20[1];\n var _React$useState21 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(\"none\"),\n _React$useState22 = _slicedToArray(_React$useState21, 2),\n fillmode = _React$useState22[0],\n setFillMode = _React$useState22[1];\n var _React$useState23 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(false),\n _React$useState24 = _slicedToArray(_React$useState23, 2),\n initialAnimationFinished = _React$useState24[0],\n setInitilaAnimation = _React$useState24[1];\n var _React$useState25 = react__WEBPACK_IMPORTED_MODULE_0___default().useState(false),\n _React$useState26 = _slicedToArray(_React$useState25, 2),\n secondaryAnimationFinished = _React$useState26[0],\n setSecondaryAnimationFinished = _React$useState26[1];\n var handleIterationDisable = function handleIterationDisable() {\n setIsIterationDisabled(!isIterationDisabled);\n if (isIterationDisabled) {\n setIterationCount(5);\n } else {\n setIterationCount(\"infinite\");\n }\n };\n var setInitialAnimationFinished = function setInitialAnimationFinished(value) {\n setAnimationType(\"blur\");\n setInitilaAnimation(value);\n };\n var handleSelectType = function handleSelectType(event) {\n setAnimationType(event.target.value);\n };\n var handleReplay = function handleReplay() {\n setCounter(counter + 1);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PlaygroundContainer, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(FormContainer, {\n className: \"playground_form\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n onAnimationEnd: function onAnimationEnd() {\n return setInitialAnimationFinished(true);\n },\n className: \"playground_form\",\n animationname: \"fadeInFromLeft\",\n duration: \"1000ms\",\n delay: \"0ms\",\n direction: \"normal\",\n timing: \"ease-in-out\",\n iteration: \"1\",\n fillmode: \"none\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledForm, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_selectMenu__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n items: [\"object\", \"letters\", \"multiline\"],\n label: \"presences\",\n handleSelect: function handleSelect(event) {\n return setAnimationObject(event.target.value);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_rangeController__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n label: \"duration\",\n initialValue: duration,\n min: 500,\n max: 2000,\n step: 100,\n unit: \"ms\",\n onChange: function onChange(event) {\n return setDuration(event.target.value);\n }\n }), animationObject === \"object\" && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_rangeController__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n label: \"delay\",\n initialValue: 0,\n min: 0,\n max: 20,\n step: 1,\n unit: \"s\",\n onChange: function onChange(event) {\n return setDelay(event.target.value);\n }\n }), animationObject === \"letters\" && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_rangeController__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n label: \"delay of each letter\",\n initialValue: 100,\n min: 100,\n max: 2000,\n step: 100,\n unit: \"ms\",\n onChange: function onChange(event) {\n return setInterval(event.target.value);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(RowContainer, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_rangeController__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n label: \"iteration\",\n disabled: isIterationDisabled,\n min: 1,\n max: 20,\n step: 1,\n unit: \"\",\n initialValue: iterationCount,\n optionalValue: isIterationDisabled ? \"infinite\" : undefined,\n onChange: function onChange(event) {\n return setIterationCount(event.target.value);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_checkbox__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n label: \"infinite\",\n onClick: handleIterationDisable\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_selectMenu__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n items: _static__WEBPACK_IMPORTED_MODULE_8__.TimingFunctionItems,\n label: \"timing-function\",\n handleSelect: function handleSelect(event) {\n return setTimingFunction(event.target.value);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_selectMenu__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n items: _static__WEBPACK_IMPORTED_MODULE_8__.DirectionItems,\n label: \"direction\",\n handleSelect: function handleSelect(event) {\n return setDirection(event.target.value);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_selectMenu__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n items: _static__WEBPACK_IMPORTED_MODULE_8__.FillModeItems,\n label: \"fill-mode\",\n handleSelect: function handleSelect(event) {\n return setFillMode(event.target.value);\n }\n })), initialAnimationFinished && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n onAnimationEnd: function onAnimationEnd() {\n return setSecondaryAnimationFinished(true);\n },\n animationname: \"unfold\",\n duration: \"1000ms\",\n delay: \"0ms\",\n direction: \"normal\",\n timing: \"ease-in-out\",\n iteration: \"1\",\n fillmode: \"none\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: {\n display: \"flex\"\n }\n }, secondaryAnimationFinished && \"Click to copy code\".split(\"\").map(function (letter, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n key: index,\n style: {\n cursor: \"pointer\",\n color: \"#fff\"\n },\n animationname: \"fadeIn\",\n duration: \"1000ms\",\n delay: \"\".concat(index * 10, \"ms\"),\n direction: \"normal\",\n timing: \"linear\",\n iteration: 1,\n fillmode: \"forwards\"\n }, letter);\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_codeContainer__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n animationObject: animationObject,\n animationType: animationType,\n duration: duration,\n delay: delay,\n direction: direction,\n timingFunction: timingFunction,\n iterationCount: iterationCount,\n fillmode: fillmode,\n interval: interval\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ResultContainer, {\n className: \"resultContainer\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ResultField, null, animationObject === \"object\" && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n key: counter,\n animationname: animationType,\n duration: \"\".concat(duration, \"ms\"),\n delay: \"\".concat(interval, \"ms\"),\n direction: direction,\n timing: timingFunction,\n iteration: iterationCount,\n fillmode: fillmode\n }, Text), animationObject === \"letters\" && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(LettersContainer, {\n key: counter\n }, Letters.map(function (item, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n key: index,\n animationname: animationType,\n duration: \"\".concat(duration, \"ms\"),\n delay: \"\".concat(index * interval, \"ms\"),\n direction: direction,\n timing: timingFunction,\n iteration: iterationCount,\n fillmode: fillmode\n }, item);\n })), animationObject === \"multiline\" && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.Typewriter, {\n key: counter,\n datatext: [\"Sushi\", \"Pizza\", \"Brötchen\", \"Salat\"],\n cursorcolor: \"green\"\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(EffectController, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n animationname: \"slideInFromTop\",\n duration: \"3000ms\",\n delay: \"0ms\",\n direction: \"normal\",\n timing: \"ease-in-out\",\n iteration: \"1\",\n fillmode: \"none\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_selectMenu__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n hasOptGroup: animationObject !== \"multiline\",\n items: animationObject === \"multiline\" ? [\"Typewriter\"] : _static__WEBPACK_IMPORTED_MODULE_8__.AnimationTypes,\n width: \"400px\",\n height: \"45px\",\n fontSize: \"1.25rem\",\n handleSelect: handleSelectType\n })), secondaryAnimationFinished ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_style_text__WEBPACK_IMPORTED_MODULE_1__.AnimatedComponent, {\n animationname: \"rotateSlowDown\",\n duration: \"3000ms\",\n delay: \"0ms\",\n direction: \"normal\",\n timing: \"ease-in-out\",\n iteration: \"1\",\n fillmode: \"none\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_atoms_roundButton__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n title: \"replay animation\",\n onClick: handleReplay\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__.FontAwesomeIcon, {\n icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_9__.faRedo\n }))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: {\n width: \"95px\"\n }\n }))));\n};\nvar PlaygroundContainer = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n flex-direction=column;\\n justify-content: space-between;\\n align-items: flex-start;\\n width: 100%;\\n padding: 0 5rem;\\n height: calc(100vh - 230px);\\n background: radial-gradient(at center top, #323234, #01030d);\\n\"])));\nvar FormContainer = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n flex-direction=column;\\n width: 400px;\\n min-width: 300px;\\n height: calc(80vh);\\n z-index: 10;\\n align-self: flex-start;\\n\\n @media (min-width: 1080px) {\\n margin-left: 150px;\\n }\\n\"])));\nvar StyledForm = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].form(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 25vw;\\n border-radius: 3px;\\n margin-bottom: 5rem;\\n\"])));\nvar RowContainer = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n display: flex;\\n justify-content: space-between;\\n align-items: flex-end;\\n\"])));\nvar ResultContainer = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n display: flex;\\n\\n height: 100%;\\n width: calc(100vw - 400px);\\n min-width: 600px;\\n flex-direction: column;\\n justify-content: space-evenly;\\n align-items: center;\\n\"])));\nvar ResultField = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n width: 80%;\\n height: 500px;\\n margin-left: 15rem;\\n margin-right 15rem;\\n background-color: initial;\\n font-size: calc(0.6rem + 4vmax);\\n font-weight: 100;\\n letter-spacing: -2;\\n color: \", \";\\n text-border: 1px solid \", \";\\n text-shadow: 1px 1px 0 \", \", -1px 1px 0 \", \",\\n 1px -1px 0 \", \", -1px -1px 0 \", \",\\n 0px 1px 0 \", \", 0px -1px 0 \", \",\\n -1px 0px 0 \", \", 1px 0px 0 \", \",\\n 2px 2px 0 \", \", -2px 2px 0 \", \",\\n 2px -2px 0 \", \", -2px -2px 0 \", \",\\n 0px 2px 0 \", \", 0px -2px 0 \", \",\\n -2px 0px 0 \", \", 2px 0px 0 \", \",\\n 1px 2px 0 \", \", -1px 2px 0 \", \",\\n 1px -2px 0 \", \", -1px -2px 0 \", \",\\n 2px 1px 0 \", \", -2px 1px 0 \", \",\\n 2px -1px 0 \", \", -2px -1px 0 \", \";\\n\"])), function (props) {\n return props.theme.colors.primary;\n}, function (props) {\n return props.theme.colors.primary;\n}, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor, borderColor);\nvar LettersContainer = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n width: 100%;\\n height: 100%;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n\"])));\nvar EffectController = styled_components__WEBPACK_IMPORTED_MODULE_10__[\"default\"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n width: 100%;\\n\"])));\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Playground);\n\n//# sourceURL=webpack://react-style-text-demo/./src/components/Playground/playground.js?"); /***/ }), @@ -598,7 +598,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var sweetalert__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! sweetalert */ \"./node_modules/sweetalert/dist/sweetalert.min.js\");\n/* harmony import */ var sweetalert__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(sweetalert__WEBPACK_IMPORTED_MODULE_1__);\nvar _templateObject, _templateObject2;\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\nvar CodeContainer = function CodeContainer(_ref) {\n var animationObject = _ref.animationObject,\n animationType = _ref.animationType,\n duration = _ref.duration,\n delay = _ref.delay,\n direction = _ref.direction,\n timingFunction = _ref.timingFunction,\n iterationCount = _ref.iterationCount,\n fillmode = _ref.fillmode,\n interval = _ref.interval;\n var textAreaRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var objectCode = \"\\n \\n React-Style-Text\\n \\n \").trim();\n var lettersCode = \"\\n const Letters = \\\"React-Style-Text\\\".split(\\\"\\\")\\n \\n Letters.map((item, index) =>\\n \\n {item}\\n )\\n \").trim();\n var typewriterCode = \"\".trim();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Container, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledCode, {\n onClick: function onClick() {\n navigator.clipboard.writeText(textAreaRef.current.innerText);\n sweetalert__WEBPACK_IMPORTED_MODULE_1___default()(\"Copied!\", \"Code copied to clipboard!\", \"success\", {\n button: \"Aww yiss!\"\n });\n },\n ref: textAreaRef\n }, animationObject === \"object\" && objectCode, animationObject === \"letters\" && lettersCode, animationObject === \"multiline\" && typewriterCode));\n};\nvar Container = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].pre(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n margin: 0;\\n display: block;\\n position: relative;\\n padding: 1rem 2rem;\\n width: 25vw;\\n font-size: 1.1rem;\\n line-height: 1.5;\\n color: \", \";\\n text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);\\n word-break: break-all;\\n overflow-wrap: break-word;\\n background-color: \", \";\\n border: 2px solid \", \";\\n border-radius: 8px;\\n overflow: scroll;\\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);\\n cursor: pointer;\\n\\n ::selection {\\n background-color: \", \";\\n }\\n\"])), function (props) {\n return props.theme.colors.white;\n}, function (props) {\n return props.theme.colors.middle;\n}, function (props) {\n return props.theme.colors.primary;\n}, function (props) {\n return props.theme.colors.primary;\n});\nvar StyledCode = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].code(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n ::selection {\\n background-color: \", \";\\n }\\n\"])), function (props) {\n return props.theme.colors.primary;\n});\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CodeContainer);\n\n//# sourceURL=webpack://react-style-text-demo/./src/components/atoms/codeContainer.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var sweetalert__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! sweetalert */ \"./node_modules/sweetalert/dist/sweetalert.min.js\");\n/* harmony import */ var sweetalert__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(sweetalert__WEBPACK_IMPORTED_MODULE_1__);\nvar _templateObject, _templateObject2;\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\n\n\nvar CodeContainer = function CodeContainer(_ref) {\n var animationObject = _ref.animationObject,\n animationType = _ref.animationType,\n duration = _ref.duration,\n delay = _ref.delay,\n direction = _ref.direction,\n timingFunction = _ref.timingFunction,\n iterationCount = _ref.iterationCount,\n fillmode = _ref.fillmode,\n interval = _ref.interval;\n var textAreaRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var objectCode = \"\\n \\n React-Style-Text\\n \\n \").trim();\n var lettersCode = \"\\n const Letters = \\\"React-Style-Text\\\".split(\\\"\\\")\\n \\n Letters.map((item, index) =>\\n \\n {item}\\n )\\n \").trim();\n var typewriterCode = \"\".trim();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Container, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledCode, {\n onClick: function onClick() {\n navigator.clipboard.writeText(textAreaRef.current.innerText);\n sweetalert__WEBPACK_IMPORTED_MODULE_1___default()(\"Copied!\", \"Code copied to clipboard!\", \"success\", {\n button: \"Aww yiss!\"\n });\n },\n ref: textAreaRef\n }, animationObject === \"object\" && objectCode, animationObject === \"letters\" && lettersCode, animationObject === \"multiline\" && typewriterCode));\n};\nvar Container = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].pre(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n margin: 0;\\n display: block;\\n position: relative;\\n padding: 1rem 2rem;\\n width: 25vw;\\n font-size: 1.1rem;\\n line-height: 1.5;\\n color: \", \";\\n text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);\\n word-break: break-all;\\n overflow-wrap: break-word;\\n background-color: \", \";\\n border: 2px solid \", \";\\n border-radius: 8px;\\n overflow: scroll;\\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);\\n cursor: pointer;\\n\\n ::selection {\\n background-color: \", \";\\n }\\n\"])), function (props) {\n return props.theme.colors.white;\n}, function (props) {\n return props.theme.colors.middle;\n}, function (props) {\n return props.theme.colors.primary;\n}, function (props) {\n return props.theme.colors.primary;\n});\nvar StyledCode = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].code(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n ::selection {\\n background-color: \", \";\\n }\\n\"])), function (props) {\n return props.theme.colors.primary;\n});\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CodeContainer);\n\n//# sourceURL=webpack://react-style-text-demo/./src/components/atoms/codeContainer.js?"); /***/ }), diff --git a/package-lock.json b/package-lock.json index 4801ed4..7ae072d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-style-text", - "version": "0.2.4", + "version": "0.2.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "react-style-text", - "version": "0.2.4", + "version": "0.2.6", "license": "ISC", "devDependencies": { "@babel/core": "^7.23.6", diff --git a/package.json b/package.json index 92e509b..e1f4430 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "react-style-text", "homepage": "https://andrew87e.github.io/react-style-text", - "version": "0.2.4", + "version": "0.2.6", "description": "revival of react-moving-text with typescript", "repository": { "type": "git", diff --git a/src/component.tsx b/src/component.tsx index c150e9b..caf4dad 100644 --- a/src/component.tsx +++ b/src/component.tsx @@ -17,7 +17,9 @@ type fillmode = "none" | "forwards" | "backwards" | "both"; type iteration = "infinite" | number; type timing = "ease" | "linear" | "ease-in" | "ease-out" | "ease-in-out"; -interface AnimatedComponentProps extends AnimationProps { +interface AnimatedComponentProps + extends AnimationProps, + React.HTMLAttributes { children: | JSX.Element | JSX.Element[] @@ -26,7 +28,6 @@ interface AnimatedComponentProps extends AnimationProps { | string[] | number | number[]; - animationProps?: AnimationProps; } // animation-name: ${props => props.animationName ? Animations[props.animationName] : Animations["spin"]};