@semcore/skeleton 4.0.8 → 4.1.1

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 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.1.1] - 2022-10-04
6
+
7
+ ### Changed
8
+
9
+ - Version patch update due to children dependencies update (`@semcore/utils` [3.37.1 ~> 3.37.2], `@semcore/flex-box` [4.5.11 ~> 4.5.12]).
10
+
11
+ ## [4.1.0] - 2022-09-22
12
+
13
+ ### Changed
14
+
15
+ - All skeletons are `aria-busy` from now.
16
+
5
17
  ## [4.0.8] - 2022-08-30
6
18
 
7
19
  ### Changed
@@ -52,17 +52,17 @@ var style = (
52
52
  /*__reshadow_css_start__*/
53
53
  _core.sstyled.insert(
54
54
  /*__inner_css_start__*/
55
- ".___SSkeleton_n8uzw_gg_{-webkit-animation-name:pulse_n8uzw;animation-name:pulse_n8uzw;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:var(--durationAnim_n8uzw);animation-duration:var(--durationAnim_n8uzw);will-change:opacity}@-webkit-keyframes pulse_n8uzw{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes pulse_n8uzw{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_n8uzw_gg_._theme_invert_n8uzw_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_n8uzw_gg_._theme_dark_n8uzw_gg_{fill:hsla(0,0%,100%,.3)}.___SText_n8uzw_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_n8uzw_gg_{-webkit-animation-name:none;animation-name:none}}"
55
+ ".___SSkeleton_1ybn6_gg_{animation-name:pulse_1ybn6;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1ybn6);will-change:opacity}@keyframes pulse_1ybn6{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_1ybn6_gg_._theme_invert_1ybn6_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_1ybn6_gg_._theme_dark_1ybn6_gg_{fill:hsla(0,0%,100%,.3)}.___SText_1ybn6_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1ybn6_gg_{animation-name:none}}"
56
56
  /*__inner_css_end__*/
57
- , "n8uzw_gg_")
57
+ , "1ybn6_gg_")
58
58
  /*__reshadow_css_end__*/
59
59
  , {
60
- "__SSkeleton": "___SSkeleton_n8uzw_gg_",
61
- "--durationAnim": "--durationAnim_n8uzw",
62
- "@pulse": "pulse_n8uzw",
63
- "_theme_invert": "_theme_invert_n8uzw_gg_",
64
- "_theme_dark": "_theme_dark_n8uzw_gg_",
65
- "__SText": "___SText_n8uzw_gg_"
60
+ "__SSkeleton": "___SSkeleton_1ybn6_gg_",
61
+ "--durationAnim": "--durationAnim_1ybn6",
62
+ "@pulse": "pulse_1ybn6",
63
+ "_theme_invert": "_theme_invert_1ybn6_gg_",
64
+ "_theme_dark": "_theme_dark_1ybn6_gg_",
65
+ "__SText": "___SText_1ybn6_gg_"
66
66
  });
67
67
  var MAP_COLOR_THEME = {
68
68
  dark: 'rgba(255, 255, 255, 0.3)',
@@ -104,7 +104,9 @@ var Skeleton = /*#__PURE__*/function (_Component) {
104
104
  return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSkeleton, _ref2.cn("SSkeleton", _objectSpread({}, (0, _core.assignProps)({
105
105
  "tag": "svg",
106
106
  "preserveAspectRatio": "none",
107
- "durationAnim": "".concat(duration, "ms")
107
+ "durationAnim": "".concat(duration, "ms"),
108
+ "aria-busy": "true",
109
+ "aria-atomic": "true"
108
110
  }, _ref))), /*#__PURE__*/_react["default"].createElement("defs", _ref2.cn("defs", {}), /*#__PURE__*/_react["default"].createElement("mask", _ref2.cn("mask", {
109
111
  "id": uid
110
112
  }), /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {})))), /*#__PURE__*/_react["default"].createElement("rect", _ref2.cn("rect", {
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.js","names":["MAP_COLOR_THEME","dark","invert","Skeleton","theme","asProps","gradientUrl","SSkeleton","Box","Children","styles","duration","hidden","uid","sstyled","Component","style","width","height","uniqueIDEnhancement","Text","props","SText","amount","y","x","forwardRef","other","amountLine","Number","renderRect","Array","map","el","index","key","ref","defaultProps","createComponent"],"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 render={Box} tag=\"svg\" preserveAspectRatio=\"none\" durationAnim={`${duration}ms`}>\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;;AADA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,eAAe,GAAG;EACtBC,IAAI,EAAE,0BADgB;EAEtBC,MAAM,EAAE;AAFc,CAAxB;;IAKMC,Q;;;;;;;;;;;;WAWJ,sBAAa;MACX,IAAQC,KAAR,GAAkB,KAAKC,OAAvB,CAAQD,KAAR;MACA,OAAO;QACLE,WAAW,EAAEN,eAAe,CAACI,KAAD;MADvB,CAAP;IAGD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAMG,SAAS,GAMMC,YANrB;MACA,oBAAoD,KAAKH,OAAzD;MAAA,IAAQI,QAAR,iBAAQA,QAAR;MAAA,IAAkBC,MAAlB,iBAAkBA,MAAlB;MAAA,IAA0BC,QAA1B,iBAA0BA,QAA1B;MAAA,IAAoCC,MAApC,iBAAoCA,MAApC;MAAA,IAA4CC,GAA5C,iBAA4CA,GAA5C;MAEA,IAAID,MAAJ,EAAY,OAAO,IAAP;MAEZ,eAAO,IAAAE,aAAA,EAAQJ,MAAR,CAAP,eACE,gCAAC,SAAD;QAAA,OAA4B,KAA5B;QAAA,uBAAsD,MAAtD;QAAA,0BAA8EC,QAA9E;MAAA,yBACE,2EACE;QAAA,MAAUE;MAAV,iBACE,gCAAC,QAAD,2BADF,CADF,CADF,eAME;QAAA,KAAQ,GAAR;QAAA,KAAc,GAAd;QAAA,SAAwB,MAAxB;QAAA,UAAsC,MAAtC;QAAA,uBAA2DA,GAA3D;MAAA,GANF,CADF;IAUD;;;EAlCoBE,e;;iCAAjBZ,Q,iBACiB,U;iCADjBA,Q,WAEWa,K;iCAFXb,Q,kBAGkB;EACpBc,KAAK,EAAE,MADa;EAEpBC,MAAM,EAAE,MAFY;EAGpBd,KAAK,EAAE,QAHa;EAIpBO,QAAQ,EAAE;AAJU,C;iCAHlBR,Q,aASa,CAAC,IAAAgB,oBAAA,GAAD,C;;AA4BnB,SAASC,IAAT,CAAcC,KAAd,EAAqB;EACnB,IAAMC,KAAK,GAAGd,YAAd;EACA,IAAQe,MAAR,GAAuDF,KAAvD,CAAQE,MAAR;EAAA,IAAgBC,CAAhB,GAAuDH,KAAvD,CAAgBG,CAAhB;EAAA,IAAmBC,CAAnB,GAAuDJ,KAAvD,CAAmBI,CAAnB;EAAA,IAAsBf,MAAtB,GAAuDW,KAAvD,CAAsBX,MAAtB;EAAA,IAA8BgB,UAA9B,GAAuDL,KAAvD,CAA8BK,UAA9B;EAAA,IAA6CC,KAA7C,6CAAuDN,KAAvD;EACA,IAAMO,UAAU,GAAGC,MAAM,CAACN,MAAD,CAAzB;;EAEA,IAAMO,UAAU,GAAG,SAAbA,UAAa,CAACT,KAAD,EAAW;IAAA;;IAC5B,eAAO,IAAAP,aAAA,EAAQJ,MAAR,CAAP,eAAuB,gCAAC,KAAD;MAAA,OAAW,MAAX;MAAA,MAAqB,GAArB;MAAA,MAA4B,GAA5B;MAAA,UAAuC;IAAvC,GAA+CW,KAA/C,GAAvB;EACD,CAFD;;EAIA,oBACE,gCAAC,iBAAD,CAAO,QAAP,QACG,oCAAIU,KAAK,CAACH,UAAD,CAAT,EAAuBI,GAAvB,CAA2B,UAACC,EAAD,EAAKC,KAAL;IAAA,OAC1BJ,UAAU;MACRK,GAAG,EAAED,KADG;MAERV,CAAC,EAAEA,CAAC,IAAI,KAAKU,KAFL;MAGRT,CAAC,EAADA,CAHQ;MAIRW,GAAG,EAAEV;IAJG,GAKLC,KALK,EADgB;EAAA,CAA3B,CADH,CADF;AAaD;;AAEDP,IAAI,CAACiB,YAAL,GAAoB;EAClBZ,CAAC,EAAE,CADe;EAElBD,CAAC,EAAE,CAFe;EAGlBD,MAAM,EAAE,CAHU;EAIlBN,KAAK,EAAE;AAJW,CAApB;;eAOe,IAAAqB,gBAAA,EAAgBnC,QAAhB,EAA0B;EACvCiB,IAAI,EAAJA;AADuC,CAA1B,C"}
1
+ {"version":3,"file":"Skeleton.js","names":["MAP_COLOR_THEME","dark","invert","Skeleton","theme","asProps","gradientUrl","SSkeleton","Box","Children","styles","duration","hidden","uid","sstyled","Component","style","width","height","uniqueIDEnhancement","Text","props","SText","amount","y","x","forwardRef","other","amountLine","Number","renderRect","Array","map","el","index","key","ref","defaultProps","createComponent"],"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":"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"}
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ //# sourceMappingURL=index.d.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { IBoxProps } from '@semcore/flex-box';\nimport { IUniqueIDProps } from '@semcore/utils/lib/uniqueID';\nimport { CProps, ReturnEl } from '@semcore/core';\n\nexport interface ISkeletonProps extends IBoxProps, IUniqueIDProps {\n /**\n * Skeleton visibility control property\n */\n hidden?: boolean;\n /**\n * Animation speed in ms\n * @default 2000\n */\n duration?: string | number;\n /**\n * Skeleton theme\n * @default invert\n */\n theme?: 'dark' | 'invert';\n}\n\nexport interface ISkeletonCtx {\n gradientUrl: 'string';\n}\n\nexport interface ISkeletonTextProps extends IBoxProps {\n /**\n * Number of items to be returned\n * @default 1\n */\n amount?: string | number;\n}\n\nexport interface AreaChartSkeletonProps extends ISkeletonProps {\n type?: 'linear' | 'monotone';\n}\n\nexport interface BarChartSkeletonProps extends ISkeletonProps {\n layout?: 'horizontal' | 'vertical';\n}\n\nexport interface HistogramChartSkeletonProps extends ISkeletonProps {\n layout?: 'horizontal' | 'vertical';\n}\n\nexport interface LineChartSkeletonProps extends ISkeletonProps {\n type?: 'linear' | 'monotone';\n}\n\ndeclare const Skeleton: (<T>(props: CProps<ISkeletonProps & T, ISkeletonCtx>) => ReturnEl) & {\n Text: <T>(props: ISkeletonTextProps & T) => ReturnEl;\n};\ndeclare const AreaChartSkeleton: <T>(props: AreaChartSkeletonProps & T) => ReturnEl;\ndeclare const BarChartSkeleton: <T>(props: BarChartSkeletonProps & T) => ReturnEl;\ndeclare const HistogramChartSkeleton: <T>(props: HistogramChartSkeletonProps & T) => ReturnEl;\ndeclare const LineChartSkeleton: <T>(props: LineChartSkeletonProps & T) => ReturnEl;\ndeclare const PieChartSkeleton: typeof Skeleton;\ndeclare const VennChartSkeleton: typeof Skeleton;\ndeclare const BubbleChartSkeleton: typeof Skeleton;\ndeclare const ScatterPlotChartSkeleton: typeof Skeleton;\n\nexport default Skeleton;\nexport {\n AreaChartSkeleton,\n BarChartSkeleton,\n HistogramChartSkeleton,\n LineChartSkeleton,\n PieChartSkeleton,\n VennChartSkeleton,\n BubbleChartSkeleton,\n ScatterPlotChartSkeleton,\n};\n"],"mappings":""}
@@ -28,17 +28,17 @@ var style = (
28
28
  /*__reshadow_css_start__*/
29
29
  _sstyled.insert(
30
30
  /*__inner_css_start__*/
31
- ".___SSkeleton_n8uzw_gg_{-webkit-animation-name:pulse_n8uzw;animation-name:pulse_n8uzw;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:var(--durationAnim_n8uzw);animation-duration:var(--durationAnim_n8uzw);will-change:opacity}@-webkit-keyframes pulse_n8uzw{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes pulse_n8uzw{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_n8uzw_gg_._theme_invert_n8uzw_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_n8uzw_gg_._theme_dark_n8uzw_gg_{fill:hsla(0,0%,100%,.3)}.___SText_n8uzw_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_n8uzw_gg_{-webkit-animation-name:none;animation-name:none}}"
31
+ ".___SSkeleton_1ybn6_gg_{animation-name:pulse_1ybn6;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1ybn6);will-change:opacity}@keyframes pulse_1ybn6{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_1ybn6_gg_._theme_invert_1ybn6_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_1ybn6_gg_._theme_dark_1ybn6_gg_{fill:hsla(0,0%,100%,.3)}.___SText_1ybn6_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1ybn6_gg_{animation-name:none}}"
32
32
  /*__inner_css_end__*/
33
- , "n8uzw_gg_")
33
+ , "1ybn6_gg_")
34
34
  /*__reshadow_css_end__*/
35
35
  , {
36
- "__SSkeleton": "___SSkeleton_n8uzw_gg_",
37
- "--durationAnim": "--durationAnim_n8uzw",
38
- "@pulse": "pulse_n8uzw",
39
- "_theme_invert": "_theme_invert_n8uzw_gg_",
40
- "_theme_dark": "_theme_dark_n8uzw_gg_",
41
- "__SText": "___SText_n8uzw_gg_"
36
+ "__SSkeleton": "___SSkeleton_1ybn6_gg_",
37
+ "--durationAnim": "--durationAnim_1ybn6",
38
+ "@pulse": "pulse_1ybn6",
39
+ "_theme_invert": "_theme_invert_1ybn6_gg_",
40
+ "_theme_dark": "_theme_dark_1ybn6_gg_",
41
+ "__SText": "___SText_1ybn6_gg_"
42
42
  });
43
43
  var MAP_COLOR_THEME = {
44
44
  dark: 'rgba(255, 255, 255, 0.3)',
@@ -81,7 +81,9 @@ var Skeleton = /*#__PURE__*/function (_Component) {
81
81
  return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SSkeleton, _ref2.cn("SSkeleton", _objectSpread({}, _assignProps({
82
82
  "tag": "svg",
83
83
  "preserveAspectRatio": "none",
84
- "durationAnim": "".concat(duration, "ms")
84
+ "durationAnim": "".concat(duration, "ms"),
85
+ "aria-busy": "true",
86
+ "aria-atomic": "true"
85
87
  }, _ref))), /*#__PURE__*/React.createElement("defs", _ref2.cn("defs", {}), /*#__PURE__*/React.createElement("mask", _ref2.cn("mask", {
86
88
  "id": uid
87
89
  }), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})))), /*#__PURE__*/React.createElement("rect", _ref2.cn("rect", {
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.js","names":["React","createComponent","Component","sstyled","Root","Box","uniqueIDEnhancement","MAP_COLOR_THEME","dark","invert","Skeleton","theme","asProps","gradientUrl","SSkeleton","Children","styles","duration","hidden","uid","style","width","height","Text","props","SText","amount","y","x","forwardRef","other","amountLine","Number","renderRect","Array","map","el","index","key","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 render={Box} tag=\"svg\" preserveAspectRatio=\"none\" durationAnim={`${duration}ms`}>\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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"}
1
+ {"version":3,"file":"Skeleton.js","names":["React","createComponent","Component","sstyled","Root","Box","uniqueIDEnhancement","MAP_COLOR_THEME","dark","invert","Skeleton","theme","asProps","gradientUrl","SSkeleton","Children","styles","duration","hidden","uid","style","width","height","Text","props","SText","amount","y","x","forwardRef","other","amountLine","Number","renderRect","Array","map","el","index","key","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":"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"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=index.d.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { IBoxProps } from '@semcore/flex-box';\nimport { IUniqueIDProps } from '@semcore/utils/lib/uniqueID';\nimport { CProps, ReturnEl } from '@semcore/core';\n\nexport interface ISkeletonProps extends IBoxProps, IUniqueIDProps {\n /**\n * Skeleton visibility control property\n */\n hidden?: boolean;\n /**\n * Animation speed in ms\n * @default 2000\n */\n duration?: string | number;\n /**\n * Skeleton theme\n * @default invert\n */\n theme?: 'dark' | 'invert';\n}\n\nexport interface ISkeletonCtx {\n gradientUrl: 'string';\n}\n\nexport interface ISkeletonTextProps extends IBoxProps {\n /**\n * Number of items to be returned\n * @default 1\n */\n amount?: string | number;\n}\n\nexport interface AreaChartSkeletonProps extends ISkeletonProps {\n type?: 'linear' | 'monotone';\n}\n\nexport interface BarChartSkeletonProps extends ISkeletonProps {\n layout?: 'horizontal' | 'vertical';\n}\n\nexport interface HistogramChartSkeletonProps extends ISkeletonProps {\n layout?: 'horizontal' | 'vertical';\n}\n\nexport interface LineChartSkeletonProps extends ISkeletonProps {\n type?: 'linear' | 'monotone';\n}\n\ndeclare const Skeleton: (<T>(props: CProps<ISkeletonProps & T, ISkeletonCtx>) => ReturnEl) & {\n Text: <T>(props: ISkeletonTextProps & T) => ReturnEl;\n};\ndeclare const AreaChartSkeleton: <T>(props: AreaChartSkeletonProps & T) => ReturnEl;\ndeclare const BarChartSkeleton: <T>(props: BarChartSkeletonProps & T) => ReturnEl;\ndeclare const HistogramChartSkeleton: <T>(props: HistogramChartSkeletonProps & T) => ReturnEl;\ndeclare const LineChartSkeleton: <T>(props: LineChartSkeletonProps & T) => ReturnEl;\ndeclare const PieChartSkeleton: typeof Skeleton;\ndeclare const VennChartSkeleton: typeof Skeleton;\ndeclare const BubbleChartSkeleton: typeof Skeleton;\ndeclare const ScatterPlotChartSkeleton: typeof Skeleton;\n\nexport default Skeleton;\nexport {\n AreaChartSkeleton,\n BarChartSkeleton,\n HistogramChartSkeleton,\n LineChartSkeleton,\n PieChartSkeleton,\n VennChartSkeleton,\n BubbleChartSkeleton,\n ScatterPlotChartSkeleton,\n};\n"],"mappings":""}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/skeleton",
3
3
  "description": "Semrush Skeleton Component",
4
- "version": "4.0.8",
4
+ "version": "4.1.1",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "types": "lib/types/index.d.ts",
@@ -9,7 +9,7 @@
9
9
  "author": "UI-kit team <ui-kit-team@semrush.com>",
10
10
  "license": "MIT",
11
11
  "scripts": {
12
- "build": "build --source=js",
12
+ "build": "pnpm semcore-builder --source=js",
13
13
  "test": "jest"
14
14
  },
15
15
  "dependencies": {
@@ -29,6 +29,7 @@
29
29
  "directory": "semcore/skeleton"
30
30
  },
31
31
  "devDependencies": {
32
+ "@types/react": "16.8 - 17",
32
33
  "@semcore/jest-preset-ui": "1.0.0"
33
34
  }
34
35
  }
@@ -1,72 +0,0 @@
1
- import { IBoxProps } from '@semcore/flex-box';
2
- import { IUniqueIDProps } from '@semcore/utils/lib/uniqueID';
3
- import { CProps, ReturnEl } from '@semcore/core';
4
-
5
- export interface ISkeletonProps extends IBoxProps, IUniqueIDProps {
6
- /**
7
- * Skeleton visibility control property
8
- */
9
- hidden?: boolean;
10
- /**
11
- * Animation speed in ms
12
- * @default 2000
13
- */
14
- duration?: string | number;
15
- /**
16
- * Skeleton theme
17
- * @default invert
18
- */
19
- theme?: 'dark' | 'invert';
20
- }
21
-
22
- export interface ISkeletonCtx {
23
- gradientUrl: 'string';
24
- }
25
-
26
- export interface ISkeletonTextProps extends IBoxProps {
27
- /**
28
- * Number of items to be returned
29
- * @default 1
30
- */
31
- amount?: string | number;
32
- }
33
-
34
- export interface AreaChartSkeletonProps extends ISkeletonProps {
35
- type?: 'linear' | 'monotone';
36
- }
37
-
38
- export interface BarChartSkeletonProps extends ISkeletonProps {
39
- layout?: 'horizontal' | 'vertical';
40
- }
41
-
42
- export interface HistogramChartSkeletonProps extends ISkeletonProps {
43
- layout?: 'horizontal' | 'vertical';
44
- }
45
-
46
- export interface LineChartSkeletonProps extends ISkeletonProps {
47
- type?: 'linear' | 'monotone';
48
- }
49
-
50
- declare const Skeleton: (<T>(props: CProps<ISkeletonProps & T, ISkeletonCtx>) => ReturnEl) & {
51
- Text: <T>(props: ISkeletonTextProps & T) => ReturnEl;
52
- };
53
- declare const AreaChartSkeleton: <T>(props: AreaChartSkeletonProps & T) => ReturnEl;
54
- declare const BarChartSkeleton: <T>(props: BarChartSkeletonProps & T) => ReturnEl;
55
- declare const HistogramChartSkeleton: <T>(props: HistogramChartSkeletonProps & T) => ReturnEl;
56
- declare const LineChartSkeleton: <T>(props: LineChartSkeletonProps & T) => ReturnEl;
57
- declare const PieChartSkeleton: typeof Skeleton;
58
- declare const VennChartSkeleton: typeof Skeleton;
59
- declare const BubbleChartSkeleton: typeof Skeleton;
60
- declare const ScatterPlotChartSkeleton: typeof Skeleton;
61
-
62
- export default Skeleton;
63
- export {
64
- AreaChartSkeleton,
65
- BarChartSkeleton,
66
- HistogramChartSkeleton,
67
- LineChartSkeleton,
68
- PieChartSkeleton,
69
- VennChartSkeleton,
70
- BubbleChartSkeleton,
71
- ScatterPlotChartSkeleton,
72
- };
@@ -1,72 +0,0 @@
1
- import { IBoxProps } from '@semcore/flex-box';
2
- import { IUniqueIDProps } from '@semcore/utils/lib/uniqueID';
3
- import { CProps, ReturnEl } from '@semcore/core';
4
-
5
- export interface ISkeletonProps extends IBoxProps, IUniqueIDProps {
6
- /**
7
- * Skeleton visibility control property
8
- */
9
- hidden?: boolean;
10
- /**
11
- * Animation speed in ms
12
- * @default 2000
13
- */
14
- duration?: string | number;
15
- /**
16
- * Skeleton theme
17
- * @default invert
18
- */
19
- theme?: 'dark' | 'invert';
20
- }
21
-
22
- export interface ISkeletonCtx {
23
- gradientUrl: 'string';
24
- }
25
-
26
- export interface ISkeletonTextProps extends IBoxProps {
27
- /**
28
- * Number of items to be returned
29
- * @default 1
30
- */
31
- amount?: string | number;
32
- }
33
-
34
- export interface AreaChartSkeletonProps extends ISkeletonProps {
35
- type?: 'linear' | 'monotone';
36
- }
37
-
38
- export interface BarChartSkeletonProps extends ISkeletonProps {
39
- layout?: 'horizontal' | 'vertical';
40
- }
41
-
42
- export interface HistogramChartSkeletonProps extends ISkeletonProps {
43
- layout?: 'horizontal' | 'vertical';
44
- }
45
-
46
- export interface LineChartSkeletonProps extends ISkeletonProps {
47
- type?: 'linear' | 'monotone';
48
- }
49
-
50
- declare const Skeleton: (<T>(props: CProps<ISkeletonProps & T, ISkeletonCtx>) => ReturnEl) & {
51
- Text: <T>(props: ISkeletonTextProps & T) => ReturnEl;
52
- };
53
- declare const AreaChartSkeleton: <T>(props: AreaChartSkeletonProps & T) => ReturnEl;
54
- declare const BarChartSkeleton: <T>(props: BarChartSkeletonProps & T) => ReturnEl;
55
- declare const HistogramChartSkeleton: <T>(props: HistogramChartSkeletonProps & T) => ReturnEl;
56
- declare const LineChartSkeleton: <T>(props: LineChartSkeletonProps & T) => ReturnEl;
57
- declare const PieChartSkeleton: typeof Skeleton;
58
- declare const VennChartSkeleton: typeof Skeleton;
59
- declare const BubbleChartSkeleton: typeof Skeleton;
60
- declare const ScatterPlotChartSkeleton: typeof Skeleton;
61
-
62
- export default Skeleton;
63
- export {
64
- AreaChartSkeleton,
65
- BarChartSkeleton,
66
- HistogramChartSkeleton,
67
- LineChartSkeleton,
68
- PieChartSkeleton,
69
- VennChartSkeleton,
70
- BubbleChartSkeleton,
71
- ScatterPlotChartSkeleton,
72
- };