@semcore/skeleton 4.4.21 → 4.4.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/lib/cjs/Skeleton.js +10 -8
- package/lib/cjs/Skeleton.js.map +1 -1
- package/lib/es6/Skeleton.js +10 -8
- package/lib/es6/Skeleton.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [4.4.23] - 2023-05-04
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.50.5 ~> 3.50.6], `@semcore/flex-box` [4.7.21 ~> 4.7.22]).
|
|
10
|
+
|
|
11
|
+
## [4.4.22] - 2023-05-03
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Hid skeleton for screen readers.
|
|
16
|
+
|
|
5
17
|
## [4.4.21] - 2023-05-03
|
|
6
18
|
|
|
7
19
|
### Changed
|
package/lib/cjs/Skeleton.js
CHANGED
|
@@ -20,13 +20,13 @@ var _flexBox = require("@semcore/flex-box");
|
|
|
20
20
|
var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
|
|
21
21
|
var _excluded = ["amount", "y", "x", "styles", "forwardRef"];
|
|
22
22
|
/*__reshadow-styles__:"./style/skeleton.shadow.css"*/
|
|
23
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
24
|
-
"__SSkeleton": "
|
|
25
|
-
"--durationAnim": "--
|
|
26
|
-
"@pulse": "
|
|
27
|
-
"_theme_invert": "
|
|
28
|
-
"_theme_dark": "
|
|
29
|
-
"__SText": "
|
|
23
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1c2f4{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_1c2f4_gg_{animation-name:pulse_1c2f4;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1c2f4);will-change:opacity}.___SSkeleton_1c2f4_gg_._theme_invert_1c2f4_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeleton_1c2f4_gg_._theme_dark_1c2f4_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_1c2f4_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1c2f4_gg_{animation-name:none}}" /*__inner_css_end__*/, "1c2f4_gg_") /*__reshadow_css_end__*/, {
|
|
24
|
+
"__SSkeleton": "___SSkeleton_1c2f4_gg_",
|
|
25
|
+
"--durationAnim": "--durationAnim_1c2f4",
|
|
26
|
+
"@pulse": "pulse_1c2f4",
|
|
27
|
+
"_theme_invert": "_theme_invert_1c2f4_gg_",
|
|
28
|
+
"_theme_dark": "_theme_dark_1c2f4_gg_",
|
|
29
|
+
"__SText": "___SText_1c2f4_gg_"
|
|
30
30
|
});
|
|
31
31
|
var MAP_COLOR_THEME = {
|
|
32
32
|
dark: 'rgba(255, 255, 255, 0.3)',
|
|
@@ -65,7 +65,9 @@ var Skeleton = /*#__PURE__*/function (_Component) {
|
|
|
65
65
|
"preserveAspectRatio": "none",
|
|
66
66
|
"durationAnim": "".concat(duration, "ms"),
|
|
67
67
|
"aria-busy": "true",
|
|
68
|
-
"aria-atomic": "true"
|
|
68
|
+
"aria-atomic": "true",
|
|
69
|
+
"aria-hidden": "true",
|
|
70
|
+
"alt": ""
|
|
69
71
|
}, _ref))), /*#__PURE__*/_react["default"].createElement("defs", _ref2.cn("defs", {}), /*#__PURE__*/_react["default"].createElement("mask", _ref2.cn("mask", {
|
|
70
72
|
"id": uid
|
|
71
73
|
}), /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {})))), /*#__PURE__*/_react["default"].createElement("rect", _ref2.cn("rect", {
|
package/lib/cjs/Skeleton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_uniqueID","_excluded","style","sstyled","insert","MAP_COLOR_THEME","dark","invert","Skeleton","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","setContext","theme","asProps","gradientUrl","render","_ref","_ref2","SSkeleton","Box","_this$asProps","Children","styles","duration","hidden","uid","createElement","cn","_objectSpread2","assignProps","concat","Component","_defineProperty2","width","height","uniqueIDEnhancement","Text","props","SText","amount","y","x","forwardRef","other","_objectWithoutProperties2","amountLine","Number","renderRect","_ref3","Fragment","_toConsumableArray2","Array","map","el","index","ref","defaultProps","_default","createComponent","exports"],"sources":["../../src/Skeleton.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/skeleton.shadow.css';\n\nconst MAP_COLOR_THEME = {\n dark: 'rgba(255, 255, 255, 0.3)',\n invert: 'rgba(224, 225, 233, 0.8)',\n};\n\nclass Skeleton extends Component {\n static displayName = 'Skeleton';\n static style = style;\n static defaultProps = {\n width: '100%',\n height: '100%',\n theme: 'invert',\n duration: 2000,\n };\n static enhance = [uniqueIDEnhancement()];\n\n setContext() {\n const { theme } = this.asProps;\n return {\n gradientUrl: MAP_COLOR_THEME[theme],\n };\n }\n\n render() {\n const SSkeleton = Root;\n const { Children, styles, duration, hidden, uid } = this.asProps;\n\n if (hidden) return null;\n\n return sstyled(styles)(\n <SSkeleton\n render={Box}\n tag=\"svg\"\n preserveAspectRatio=\"none\"\n durationAnim={`${duration}ms`}\n aria-busy=\"true\"\n aria-atomic=\"true\"\n >\n <defs>\n <mask id={uid}>\n <Children />\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" mask={`url(#${uid})`} />\n </SSkeleton>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Box;\n const { amount, y, x, styles, forwardRef, ...other } = props;\n const amountLine = Number(amount);\n\n const renderRect = (props) => {\n return sstyled(styles)(<SText tag=\"rect\" rx=\"4\" ry=\"4\" height=\"8\" {...props} />);\n };\n\n return (\n <React.Fragment>\n {[...Array(amountLine)].map((el, index) =>\n renderRect({\n key: index,\n y: y || 20 * index,\n x,\n ref: forwardRef,\n ...other,\n }),\n )}\n </React.Fragment>\n );\n}\n\nText.defaultProps = {\n x: 0,\n y: 0,\n amount: 1,\n width: '100%',\n};\n\nexport default createComponent(Skeleton, {\n Text,\n});\n"],"mappings":";;;;;;;;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AADA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAF,sBAAA,CAAAF,OAAA;AAA8D,IAAAK,SAAA;AAAA;AAAA,IAAAC,KAAA,+BAAAR,KAAA,CAAAS,OAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI9D,IAAMC,eAAe,GAAG;EACtBC,IAAI,EAAE,0BAA0B;EAChCC,MAAM,EAAE;AACV,CAAC;AAAC,IAEIC,QAAQ,0BAAAC,UAAA;EAAA,IAAAC,UAAA,aAAAF,QAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,OAAAC,aAAA,aAAAJ,QAAA;EAAA,SAAAA,SAAA;IAAA,IAAAK,gBAAA,mBAAAL,QAAA;IAAA,OAAAG,MAAA,CAAAG,KAAA,OAAAC,SAAA;EAAA;EAAA,IAAAC,aAAA,aAAAR,QAAA;IAAAS,GAAA;IAAAC,KAAA,EAWZ,SAAAC,WAAA,EAAa;MACX,IAAQC,KAAK,GAAK,IAAI,CAACC,OAAO,CAAtBD,KAAK;MACb,OAAO;QACLE,WAAW,EAAEjB,eAAe,CAACe,KAAK;MACpC,CAAC;IACH;EAAC;IAAAH,GAAA;IAAAC,KAAA,EAED,SAAAK,OAAA,EAAS;MAAA,IAAAC,IAAA,QAAAH,OAAA;QAAAI,KAAA;MACP,IAAMC,SAAS,GAOHC,YAAG;MANf,IAAAC,aAAA,GAAoD,IAAI,CAACP,OAAO;QAAxDQ,QAAQ,GAAAD,aAAA,CAARC,QAAQ;QAAEC,MAAM,GAAAF,aAAA,CAANE,MAAM;QAAEC,QAAQ,GAAAH,aAAA,CAARG,QAAQ;QAAEC,MAAM,GAAAJ,aAAA,CAANI,MAAM;QAAEC,GAAG,GAAAL,aAAA,CAAHK,GAAG;MAE/C,IAAID,MAAM,EAAE,OAAO,IAAI;MAEvB,OAAAP,KAAA,GAAO,IAAAtB,aAAO,EAAC2B,MAAM,CAAC,eACpBjC,MAAA,YAAAqC,aAAA,CAACR,SAAS,EAAAD,KAAA,CAAAU,EAAA,kBAAAC,cAAA,qBAAA1C,KAAA,CAAA2C,WAAA;QAAA,OAEJ,KAAK;QAAA,uBACW,MAAM;QAAA,mBAAAC,MAAA,CACTP,QAAQ;QAAA,aACf,MAAM;QAAA,eACJ;MAAM,GAAAP,IAAA,
|
|
1
|
+
{"version":3,"file":"Skeleton.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_uniqueID","_excluded","style","sstyled","insert","MAP_COLOR_THEME","dark","invert","Skeleton","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","setContext","theme","asProps","gradientUrl","render","_ref","_ref2","SSkeleton","Box","_this$asProps","Children","styles","duration","hidden","uid","createElement","cn","_objectSpread2","assignProps","concat","Component","_defineProperty2","width","height","uniqueIDEnhancement","Text","props","SText","amount","y","x","forwardRef","other","_objectWithoutProperties2","amountLine","Number","renderRect","_ref3","Fragment","_toConsumableArray2","Array","map","el","index","ref","defaultProps","_default","createComponent","exports"],"sources":["../../src/Skeleton.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/skeleton.shadow.css';\n\nconst MAP_COLOR_THEME = {\n dark: 'rgba(255, 255, 255, 0.3)',\n invert: 'rgba(224, 225, 233, 0.8)',\n};\n\nclass Skeleton extends Component {\n static displayName = 'Skeleton';\n static style = style;\n static defaultProps = {\n width: '100%',\n height: '100%',\n theme: 'invert',\n duration: 2000,\n };\n static enhance = [uniqueIDEnhancement()];\n\n setContext() {\n const { theme } = this.asProps;\n return {\n gradientUrl: MAP_COLOR_THEME[theme],\n };\n }\n\n render() {\n const SSkeleton = Root;\n const { Children, styles, duration, hidden, uid } = this.asProps;\n\n if (hidden) return null;\n\n return sstyled(styles)(\n <SSkeleton\n render={Box}\n tag=\"svg\"\n preserveAspectRatio=\"none\"\n durationAnim={`${duration}ms`}\n aria-busy=\"true\"\n aria-atomic=\"true\"\n aria-hidden=\"true\"\n alt=\"\"\n >\n <defs>\n <mask id={uid}>\n <Children />\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" mask={`url(#${uid})`} />\n </SSkeleton>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Box;\n const { amount, y, x, styles, forwardRef, ...other } = props;\n const amountLine = Number(amount);\n\n const renderRect = (props) => {\n return sstyled(styles)(<SText tag=\"rect\" rx=\"4\" ry=\"4\" height=\"8\" {...props} />);\n };\n\n return (\n <React.Fragment>\n {[...Array(amountLine)].map((el, index) =>\n renderRect({\n key: index,\n y: y || 20 * index,\n x,\n ref: forwardRef,\n ...other,\n }),\n )}\n </React.Fragment>\n );\n}\n\nText.defaultProps = {\n x: 0,\n y: 0,\n amount: 1,\n width: '100%',\n};\n\nexport default createComponent(Skeleton, {\n Text,\n});\n"],"mappings":"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"}
|
package/lib/es6/Skeleton.js
CHANGED
|
@@ -14,13 +14,13 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
|
14
14
|
import { Box } from '@semcore/flex-box';
|
|
15
15
|
import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
|
|
16
16
|
/*__reshadow-styles__:"./style/skeleton.shadow.css"*/
|
|
17
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
18
|
-
"__SSkeleton": "
|
|
19
|
-
"--durationAnim": "--
|
|
20
|
-
"@pulse": "
|
|
21
|
-
"_theme_invert": "
|
|
22
|
-
"_theme_dark": "
|
|
23
|
-
"__SText": "
|
|
17
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1c2f4{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_1c2f4_gg_{animation-name:pulse_1c2f4;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1c2f4);will-change:opacity}.___SSkeleton_1c2f4_gg_._theme_invert_1c2f4_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeleton_1c2f4_gg_._theme_dark_1c2f4_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_1c2f4_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1c2f4_gg_{animation-name:none}}" /*__inner_css_end__*/, "1c2f4_gg_") /*__reshadow_css_end__*/, {
|
|
18
|
+
"__SSkeleton": "___SSkeleton_1c2f4_gg_",
|
|
19
|
+
"--durationAnim": "--durationAnim_1c2f4",
|
|
20
|
+
"@pulse": "pulse_1c2f4",
|
|
21
|
+
"_theme_invert": "_theme_invert_1c2f4_gg_",
|
|
22
|
+
"_theme_dark": "_theme_dark_1c2f4_gg_",
|
|
23
|
+
"__SText": "___SText_1c2f4_gg_"
|
|
24
24
|
});
|
|
25
25
|
var MAP_COLOR_THEME = {
|
|
26
26
|
dark: 'rgba(255, 255, 255, 0.3)',
|
|
@@ -59,7 +59,9 @@ var Skeleton = /*#__PURE__*/function (_Component) {
|
|
|
59
59
|
"preserveAspectRatio": "none",
|
|
60
60
|
"durationAnim": "".concat(duration, "ms"),
|
|
61
61
|
"aria-busy": "true",
|
|
62
|
-
"aria-atomic": "true"
|
|
62
|
+
"aria-atomic": "true",
|
|
63
|
+
"aria-hidden": "true",
|
|
64
|
+
"alt": ""
|
|
63
65
|
}, _ref))), /*#__PURE__*/React.createElement("defs", _ref2.cn("defs", {}), /*#__PURE__*/React.createElement("mask", _ref2.cn("mask", {
|
|
64
66
|
"id": uid
|
|
65
67
|
}), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})))), /*#__PURE__*/React.createElement("rect", _ref2.cn("rect", {
|
package/lib/es6/Skeleton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.js","names":["React","createComponent","Component","sstyled","Root","Box","uniqueIDEnhancement","style","_sstyled","insert","MAP_COLOR_THEME","dark","invert","Skeleton","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","setContext","theme","asProps","gradientUrl","render","_ref","_ref2","SSkeleton","_this$asProps","Children","styles","duration","hidden","uid","createElement","cn","_objectSpread","_assignProps","concat","_defineProperty","width","height","Text","props","SText","amount","y","x","forwardRef","other","_objectWithoutProperties","_excluded","amountLine","Number","renderRect","_ref3","Fragment","_toConsumableArray","Array","map","el","index","ref","defaultProps"],"sources":["../../src/Skeleton.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/skeleton.shadow.css';\n\nconst MAP_COLOR_THEME = {\n dark: 'rgba(255, 255, 255, 0.3)',\n invert: 'rgba(224, 225, 233, 0.8)',\n};\n\nclass Skeleton extends Component {\n static displayName = 'Skeleton';\n static style = style;\n static defaultProps = {\n width: '100%',\n height: '100%',\n theme: 'invert',\n duration: 2000,\n };\n static enhance = [uniqueIDEnhancement()];\n\n setContext() {\n const { theme } = this.asProps;\n return {\n gradientUrl: MAP_COLOR_THEME[theme],\n };\n }\n\n render() {\n const SSkeleton = Root;\n const { Children, styles, duration, hidden, uid } = this.asProps;\n\n if (hidden) return null;\n\n return sstyled(styles)(\n <SSkeleton\n render={Box}\n tag=\"svg\"\n preserveAspectRatio=\"none\"\n durationAnim={`${duration}ms`}\n aria-busy=\"true\"\n aria-atomic=\"true\"\n >\n <defs>\n <mask id={uid}>\n <Children />\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" mask={`url(#${uid})`} />\n </SSkeleton>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Box;\n const { amount, y, x, styles, forwardRef, ...other } = props;\n const amountLine = Number(amount);\n\n const renderRect = (props) => {\n return sstyled(styles)(<SText tag=\"rect\" rx=\"4\" ry=\"4\" height=\"8\" {...props} />);\n };\n\n return (\n <React.Fragment>\n {[...Array(amountLine)].map((el, index) =>\n renderRect({\n key: index,\n y: y || 20 * index,\n x,\n ref: forwardRef,\n ...other,\n }),\n )}\n </React.Fragment>\n );\n}\n\nText.defaultProps = {\n x: 0,\n y: 0,\n amount: 1,\n width: '100%',\n};\n\nexport default createComponent(Skeleton, {\n Text,\n});\n"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,eAAe,IAAIC,SAAS,EAAEC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AACzE,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAOC,mBAAmB,MAAM,6BAA6B;AAAC;AAAA,IAAAC,KAAA,+BAAAC,QAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI9D,IAAMC,eAAe,GAAG;EACtBC,IAAI,EAAE,0BAA0B;EAChCC,MAAM,EAAE;AACV,CAAC;AAAC,IAEIC,QAAQ,0BAAAC,UAAA;EAAAC,SAAA,CAAAF,QAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,QAAA;EAAA,SAAAA,SAAA;IAAAK,eAAA,OAAAL,QAAA;IAAA,OAAAG,MAAA,CAAAG,KAAA,OAAAC,SAAA;EAAA;EAAAC,YAAA,CAAAR,QAAA;IAAAS,GAAA;IAAAC,KAAA,EAWZ,SAAAC,WAAA,EAAa;MACX,IAAQC,KAAK,GAAK,IAAI,CAACC,OAAO,CAAtBD,KAAK;MACb,OAAO;QACLE,WAAW,EAAEjB,eAAe,CAACe,KAAK;MACpC,CAAC;IACH;EAAC;IAAAH,GAAA;IAAAC,KAAA,EAED,SAAAK,OAAA,EAAS;MAAA,IAAAC,IAAA,QAAAH,OAAA;QAAAI,KAAA;MACP,IAAMC,SAAS,GAOH1B,GAAG;MANf,IAAA2B,aAAA,GAAoD,IAAI,CAACN,OAAO;QAAxDO,QAAQ,GAAAD,aAAA,CAARC,QAAQ;QAAEC,MAAM,GAAAF,aAAA,CAANE,MAAM;QAAEC,QAAQ,GAAAH,aAAA,CAARG,QAAQ;QAAEC,MAAM,GAAAJ,aAAA,CAANI,MAAM;QAAEC,GAAG,GAAAL,aAAA,CAAHK,GAAG;MAE/C,IAAID,MAAM,EAAE,OAAO,IAAI;MAEvB,OAAAN,KAAA,GAAO3B,OAAO,CAAC+B,MAAM,CAAC,eACpBlC,KAAA,CAAAsC,aAAA,CAACP,SAAS,EAAAD,KAAA,CAAAS,EAAA,cAAAC,aAAA,KAAAC,YAAA;QAAA,OAEJ,KAAK;QAAA,uBACW,MAAM;QAAA,mBAAAC,MAAA,CACTP,QAAQ;QAAA,aACf,MAAM;QAAA,eACJ;MAAM,GAAAN,IAAA,
|
|
1
|
+
{"version":3,"file":"Skeleton.js","names":["React","createComponent","Component","sstyled","Root","Box","uniqueIDEnhancement","style","_sstyled","insert","MAP_COLOR_THEME","dark","invert","Skeleton","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","setContext","theme","asProps","gradientUrl","render","_ref","_ref2","SSkeleton","_this$asProps","Children","styles","duration","hidden","uid","createElement","cn","_objectSpread","_assignProps","concat","_defineProperty","width","height","Text","props","SText","amount","y","x","forwardRef","other","_objectWithoutProperties","_excluded","amountLine","Number","renderRect","_ref3","Fragment","_toConsumableArray","Array","map","el","index","ref","defaultProps"],"sources":["../../src/Skeleton.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/skeleton.shadow.css';\n\nconst MAP_COLOR_THEME = {\n dark: 'rgba(255, 255, 255, 0.3)',\n invert: 'rgba(224, 225, 233, 0.8)',\n};\n\nclass Skeleton extends Component {\n static displayName = 'Skeleton';\n static style = style;\n static defaultProps = {\n width: '100%',\n height: '100%',\n theme: 'invert',\n duration: 2000,\n };\n static enhance = [uniqueIDEnhancement()];\n\n setContext() {\n const { theme } = this.asProps;\n return {\n gradientUrl: MAP_COLOR_THEME[theme],\n };\n }\n\n render() {\n const SSkeleton = Root;\n const { Children, styles, duration, hidden, uid } = this.asProps;\n\n if (hidden) return null;\n\n return sstyled(styles)(\n <SSkeleton\n render={Box}\n tag=\"svg\"\n preserveAspectRatio=\"none\"\n durationAnim={`${duration}ms`}\n aria-busy=\"true\"\n aria-atomic=\"true\"\n aria-hidden=\"true\"\n alt=\"\"\n >\n <defs>\n <mask id={uid}>\n <Children />\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" mask={`url(#${uid})`} />\n </SSkeleton>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Box;\n const { amount, y, x, styles, forwardRef, ...other } = props;\n const amountLine = Number(amount);\n\n const renderRect = (props) => {\n return sstyled(styles)(<SText tag=\"rect\" rx=\"4\" ry=\"4\" height=\"8\" {...props} />);\n };\n\n return (\n <React.Fragment>\n {[...Array(amountLine)].map((el, index) =>\n renderRect({\n key: index,\n y: y || 20 * index,\n x,\n ref: forwardRef,\n ...other,\n }),\n )}\n </React.Fragment>\n );\n}\n\nText.defaultProps = {\n x: 0,\n y: 0,\n amount: 1,\n width: '100%',\n};\n\nexport default createComponent(Skeleton, {\n Text,\n});\n"],"mappings":"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"}
|