@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 +12 -0
- package/lib/cjs/Skeleton.js +11 -9
- package/lib/cjs/Skeleton.js.map +1 -1
- package/lib/cjs/index.d.js +2 -0
- package/lib/cjs/index.d.js.map +1 -0
- package/lib/es6/Skeleton.js +11 -9
- package/lib/es6/Skeleton.js.map +1 -1
- package/lib/es6/index.d.js +2 -0
- package/lib/es6/index.d.js.map +1 -0
- package/package.json +3 -2
- package/lib/cjs/index.d.ts +0 -72
- package/lib/es6/index.d.ts +0 -72
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
|
package/lib/cjs/Skeleton.js
CHANGED
|
@@ -52,17 +52,17 @@ var style = (
|
|
|
52
52
|
/*__reshadow_css_start__*/
|
|
53
53
|
_core.sstyled.insert(
|
|
54
54
|
/*__inner_css_start__*/
|
|
55
|
-
".
|
|
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
|
-
, "
|
|
57
|
+
, "1ybn6_gg_")
|
|
58
58
|
/*__reshadow_css_end__*/
|
|
59
59
|
, {
|
|
60
|
-
"__SSkeleton": "
|
|
61
|
-
"--durationAnim": "--
|
|
62
|
-
"@pulse": "
|
|
63
|
-
"_theme_invert": "
|
|
64
|
-
"_theme_dark": "
|
|
65
|
-
"__SText": "
|
|
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", {
|
package/lib/cjs/Skeleton.js.map
CHANGED
|
@@ -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
|
|
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 @@
|
|
|
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/lib/es6/Skeleton.js
CHANGED
|
@@ -28,17 +28,17 @@ var style = (
|
|
|
28
28
|
/*__reshadow_css_start__*/
|
|
29
29
|
_sstyled.insert(
|
|
30
30
|
/*__inner_css_start__*/
|
|
31
|
-
".
|
|
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
|
-
, "
|
|
33
|
+
, "1ybn6_gg_")
|
|
34
34
|
/*__reshadow_css_end__*/
|
|
35
35
|
, {
|
|
36
|
-
"__SSkeleton": "
|
|
37
|
-
"--durationAnim": "--
|
|
38
|
-
"@pulse": "
|
|
39
|
-
"_theme_invert": "
|
|
40
|
-
"_theme_dark": "
|
|
41
|
-
"__SText": "
|
|
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", {
|
package/lib/es6/Skeleton.js.map
CHANGED
|
@@ -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
|
|
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 @@
|
|
|
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.
|
|
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": "
|
|
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
|
}
|
package/lib/cjs/index.d.ts
DELETED
|
@@ -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
|
-
};
|
package/lib/es6/index.d.ts
DELETED
|
@@ -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
|
-
};
|