@gympass/yoga 7.46.0 → 7.47.0
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/cjs/Skeleton/Skeleton.theme.js +11 -0
- package/cjs/Skeleton/index.js +11 -0
- package/cjs/Skeleton/index.native.js +1 -0
- package/cjs/Skeleton/native/Skeleton.js +1 -0
- package/cjs/Skeleton/native/Skeleton.test.js +1 -0
- package/cjs/Skeleton/native/index.js +1 -0
- package/cjs/Skeleton/web/Skeleton.js +106 -0
- package/cjs/Skeleton/web/Skeleton.test.js +42 -0
- package/cjs/Skeleton/web/index.js +11 -0
- package/cjs/Theme/theme/theme.js +3 -0
- package/cjs/index.js +4 -0
- package/cjs/index.native.js +1 -1
- package/esm/Skeleton/Skeleton.theme.js +5 -0
- package/esm/Skeleton/index.js +2 -0
- package/esm/Skeleton/index.native.js +2 -0
- package/esm/Skeleton/native/Skeleton.js +117 -0
- package/esm/Skeleton/native/Skeleton.test.js +35 -0
- package/esm/Skeleton/native/index.js +2 -0
- package/esm/Skeleton/web/Skeleton.js +90 -0
- package/esm/Skeleton/web/Skeleton.test.js +35 -0
- package/esm/Skeleton/web/index.js +2 -0
- package/esm/Theme/theme/theme.js +2 -0
- package/esm/index.js +2 -1
- package/esm/index.native.js +2 -1
- package/package.json +2 -2
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports["default"] = void 0;
|
|
5
|
+
|
|
6
|
+
var _web = _interopRequireDefault(require("./web"));
|
|
7
|
+
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
9
|
+
|
|
10
|
+
var _default = _web["default"];
|
|
11
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _native=_interopRequireDefault(require("./native"));var _default=_native["default"];exports["default"]=_default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _propTypes=require("prop-types");var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styledComponents=_interopRequireWildcard(require("styled-components"));var _excluded=["animation"];var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12,_templateObject13,_templateObject14;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var textVariantsModifier={h1:function h1(theme){return(0,_styledComponents.css)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n height: ","px;\n "])),theme.spacing.xxxlarge);},h2:function h2(theme){return(0,_styledComponents.css)(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n height: ","px;\n "])),theme.fontSizes.huge);},h3:function h3(theme){return(0,_styledComponents.css)(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2["default"])(["\n height: ","px;\n "])),theme.fontSizes.xxxlarge);},h4:function h4(theme){return(0,_styledComponents.css)(_templateObject4||(_templateObject4=(0,_taggedTemplateLiteralLoose2["default"])(["\n height: ","px;\n "])),theme.fontSizes.xxlarge);},h5:function h5(){return(0,_styledComponents.css)(_templateObject5||(_templateObject5=(0,_taggedTemplateLiteralLoose2["default"])(["\n height: 28px;\n "])));},body1:function body1(theme){return(0,_styledComponents.css)(_templateObject6||(_templateObject6=(0,_taggedTemplateLiteralLoose2["default"])(["\n height: ","px;\n "])),theme.fontSizes.xlarge);},body2:function body2(theme){return(0,_styledComponents.css)(_templateObject7||(_templateObject7=(0,_taggedTemplateLiteralLoose2["default"])(["\n height: ","px;\n "])),theme.fontSizes.large);},overline:function overline(theme){return(0,_styledComponents.css)(_templateObject8||(_templateObject8=(0,_taggedTemplateLiteralLoose2["default"])(["\n height: ","px;\n "])),theme.fontSizes.medium);},exception:function exception(theme){return(0,_styledComponents.css)(_templateObject9||(_templateObject9=(0,_taggedTemplateLiteralLoose2["default"])(["\n height: ","px;\n "])),theme.fontSizes.xsmall);}};var skeletonTypesModifier={circular:function circular(){return(0,_styledComponents.css)(_templateObject10||(_templateObject10=(0,_taggedTemplateLiteralLoose2["default"])(["\n border-radius: 1000;\n "])));},rectangular:function rectangular(){return(0,_styledComponents.css)(_templateObject11||(_templateObject11=(0,_taggedTemplateLiteralLoose2["default"])([""])));},text:function text(theme,variant){return(0,_styledComponents.css)(_templateObject12||(_templateObject12=(0,_taggedTemplateLiteralLoose2["default"])(["\n ",";\n "])),textVariantsModifier[variant](theme));}};var StyledSkeleton=_styledComponents["default"].View(_templateObject13||(_templateObject13=(0,_taggedTemplateLiteralLoose2["default"])(["\n ","\n"])),function(_ref){var yoga=_ref.theme.yoga,type=_ref.type,width=_ref.width,height=_ref.height,variant=_ref.variant;return(0,_styledComponents.css)(_templateObject14||(_templateObject14=(0,_taggedTemplateLiteralLoose2["default"])(["\n display: flex;\n align-items: center;\n\n width: ","px;\n height: ","px;\n\n background: ",";\n\n ",";\n "])),width,height,yoga.colors.light,skeletonTypesModifier[type](yoga,variant));});function Skeleton(_ref2){var _ref2$animation=_ref2.animation,animation=_ref2$animation===void 0?'pulse':_ref2$animation,props=(0,_objectWithoutProperties2["default"])(_ref2,_excluded);var _useState=(0,_react.useState)(new _reactNative.Animated.Value(0.1)),_useState2=(0,_slicedToArray2["default"])(_useState,1),opacity=_useState2[0];(0,_react.useEffect)(function(){if(animation){_reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(opacity,{toValue:0.3,duration:1000,useNativeDriver:true}),_reactNative.Animated.timing(opacity,{toValue:0.1,duration:1000,useNativeDriver:true})])).start();}},[opacity]);return _react["default"].createElement(_reactNative.Animated.View,{style:{opacity:opacity}},_react["default"].createElement(StyledSkeleton,props));}Skeleton.propTypes={type:(0,_propTypes.oneOf)(['circular','rectangular','text']).isRequired,width:_propTypes.number.isRequired,height:_propTypes.number.isRequired,animation:(0,_propTypes.oneOf)(['pulse',false])};Skeleton.defaultProps={animation:'pulse'};var _default=Skeleton;exports["default"]=_default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _react=_interopRequireDefault(require("react"));var _reactNative=require("@testing-library/react-native");var _=require("../..");describe('<Skeleton />',function(){it('should render the circular skeleton',function(){var _render=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"circular",width:64,height:64}))),toJSON=_render.toJSON;expect(toJSON()).toMatchSnapshot();});it('should render the rectangular skeleton',function(){var _render2=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"rectangular",width:400,height:200}))),toJSON=_render2.toJSON;expect(toJSON()).toMatchSnapshot();});it('should render the text skeleton',function(){var _render3=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"text",variant:"body1",width:61}))),toJSON=_render3.toJSON;expect(toJSON()).toMatchSnapshot();});});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _Skeleton=_interopRequireDefault(require("./Skeleton"));var _default=_Skeleton["default"];exports["default"]=_default;
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports["default"] = void 0;
|
|
5
|
+
|
|
6
|
+
var _propTypes = require("prop-types");
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
11
|
+
|
|
12
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
13
|
+
|
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
+
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
|
+
|
|
20
|
+
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
21
|
+
|
|
22
|
+
var textVariantsModifier = {
|
|
23
|
+
h1: function h1(theme) {
|
|
24
|
+
return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.spacing.xxxlarge);
|
|
25
|
+
},
|
|
26
|
+
h2: function h2(theme) {
|
|
27
|
+
return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.huge);
|
|
28
|
+
},
|
|
29
|
+
h3: function h3(theme) {
|
|
30
|
+
return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.xxxlarge);
|
|
31
|
+
},
|
|
32
|
+
h4: function h4(theme) {
|
|
33
|
+
return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.xxlarge);
|
|
34
|
+
},
|
|
35
|
+
h5: function h5() {
|
|
36
|
+
return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n height: 28px;\n "])));
|
|
37
|
+
},
|
|
38
|
+
body1: function body1(theme) {
|
|
39
|
+
return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.xlarge);
|
|
40
|
+
},
|
|
41
|
+
body2: function body2(theme) {
|
|
42
|
+
return (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.large);
|
|
43
|
+
},
|
|
44
|
+
overline: function overline(theme) {
|
|
45
|
+
return (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.medium);
|
|
46
|
+
},
|
|
47
|
+
exception: function exception(theme) {
|
|
48
|
+
return (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.xsmall);
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
var skeletonTypesModifier = {
|
|
52
|
+
circular: function circular() {
|
|
53
|
+
return (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n border-radius: 50%;\n "])));
|
|
54
|
+
},
|
|
55
|
+
rectangular: function rectangular() {
|
|
56
|
+
return (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose([""])));
|
|
57
|
+
},
|
|
58
|
+
text: function text(theme, variant) {
|
|
59
|
+
return (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), textVariantsModifier[variant](theme));
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
var StyledSkeleton = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
64
|
+
var yoga = _ref.theme.yoga,
|
|
65
|
+
type = _ref.type,
|
|
66
|
+
width = _ref.width,
|
|
67
|
+
height = _ref.height,
|
|
68
|
+
variant = _ref.variant,
|
|
69
|
+
_ref$animation = _ref.animation,
|
|
70
|
+
animation = _ref$animation === void 0 ? 'pulse' : _ref$animation;
|
|
71
|
+
return (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n width: ", "px;\n height: ", "px;\n\n background: ", ";\n\n ", "\n\n @keyframes placeholderShimmer {\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n\n ", ";\n "])), width, height, yoga.colors.clear, animation && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n animation: placeholderShimmer 1s linear infinite;\n "]))), skeletonTypesModifier[type](yoga, variant));
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
function Skeleton(props) {
|
|
75
|
+
return /*#__PURE__*/_react["default"].createElement(StyledSkeleton, props);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
Skeleton.propTypes = {
|
|
79
|
+
/**
|
|
80
|
+
* Determines which type will be rendered. It can be
|
|
81
|
+
* 'circular', 'rectangular' or 'text'.
|
|
82
|
+
*/
|
|
83
|
+
type: (0, _propTypes.oneOf)(['circular', 'rectangular', 'text']).isRequired,
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Determine the width of the skeleton.
|
|
87
|
+
* Applicable to all variants.
|
|
88
|
+
*/
|
|
89
|
+
width: _propTypes.number.isRequired,
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Determine the height of the skeleton.
|
|
93
|
+
* Applicable only to circular and rectangular variants.
|
|
94
|
+
*/
|
|
95
|
+
height: _propTypes.number.isRequired,
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* Determine if the animation will 'pulse' or false;
|
|
99
|
+
*/
|
|
100
|
+
animation: (0, _propTypes.oneOf)(['pulse', false])
|
|
101
|
+
};
|
|
102
|
+
Skeleton.defaultProps = {
|
|
103
|
+
animation: 'pulse'
|
|
104
|
+
};
|
|
105
|
+
var _default = Skeleton;
|
|
106
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _react = _interopRequireDefault(require("react"));
|
|
4
|
+
|
|
5
|
+
var _react2 = require("@testing-library/react");
|
|
6
|
+
|
|
7
|
+
var _ = require("../..");
|
|
8
|
+
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
10
|
+
|
|
11
|
+
describe('<Skeleton />', function () {
|
|
12
|
+
it('should render the circular skeleton', function () {
|
|
13
|
+
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
|
|
14
|
+
type: "circular",
|
|
15
|
+
width: 64,
|
|
16
|
+
height: 64
|
|
17
|
+
}))),
|
|
18
|
+
container = _render.container;
|
|
19
|
+
|
|
20
|
+
expect(container).toMatchSnapshot();
|
|
21
|
+
});
|
|
22
|
+
it('should render the rectangular skeleton', function () {
|
|
23
|
+
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
|
|
24
|
+
type: "rectangular",
|
|
25
|
+
width: 400,
|
|
26
|
+
height: 200
|
|
27
|
+
}))),
|
|
28
|
+
container = _render2.container;
|
|
29
|
+
|
|
30
|
+
expect(container).toMatchSnapshot();
|
|
31
|
+
});
|
|
32
|
+
it('should render the text skeleton', function () {
|
|
33
|
+
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
|
|
34
|
+
type: "text",
|
|
35
|
+
variant: "body1",
|
|
36
|
+
width: 61
|
|
37
|
+
}))),
|
|
38
|
+
container = _render3.container;
|
|
39
|
+
|
|
40
|
+
expect(container).toMatchSnapshot();
|
|
41
|
+
});
|
|
42
|
+
});
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports["default"] = void 0;
|
|
5
|
+
|
|
6
|
+
var _Skeleton = _interopRequireDefault(require("./Skeleton"));
|
|
7
|
+
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
9
|
+
|
|
10
|
+
var _default = _Skeleton["default"];
|
|
11
|
+
exports["default"] = _default;
|
package/cjs/Theme/theme/theme.js
CHANGED
|
@@ -55,6 +55,8 @@ var _RatingTheme = _interopRequireDefault(require("./../../Rating/Rating.theme.j
|
|
|
55
55
|
|
|
56
56
|
var _ResultTheme = _interopRequireDefault(require("./../../Result/Result.theme.js"));
|
|
57
57
|
|
|
58
|
+
var _SkeletonTheme = _interopRequireDefault(require("./../../Skeleton/Skeleton.theme.js"));
|
|
59
|
+
|
|
58
60
|
var _SliderTheme = _interopRequireDefault(require("./../../Slider/Slider.theme.js"));
|
|
59
61
|
|
|
60
62
|
var _SnackbarTheme = _interopRequireDefault(require("./../../Snackbar/Snackbar.theme.js"));
|
|
@@ -97,6 +99,7 @@ var componentThemes = {
|
|
|
97
99
|
RadioGroup$RadioGroup: _RadioGroupTheme["default"],
|
|
98
100
|
Rating$Rating: _RatingTheme["default"],
|
|
99
101
|
Result$Result: _ResultTheme["default"],
|
|
102
|
+
Skeleton$Skeleton: _SkeletonTheme["default"],
|
|
100
103
|
Slider$Slider: _SliderTheme["default"],
|
|
101
104
|
Snackbar$Snackbar: _SnackbarTheme["default"],
|
|
102
105
|
Stepper$Stepper: _StepperTheme["default"],
|
package/cjs/index.js
CHANGED
|
@@ -131,6 +131,10 @@ var _Feedback = _interopRequireDefault(require("./Feedback"));
|
|
|
131
131
|
|
|
132
132
|
exports.Feedback = _Feedback["default"];
|
|
133
133
|
|
|
134
|
+
var _Skeleton = _interopRequireDefault(require("./Skeleton"));
|
|
135
|
+
|
|
136
|
+
exports.Skeleton = _Skeleton["default"];
|
|
137
|
+
|
|
134
138
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
135
139
|
|
|
136
140
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
package/cjs/index.native.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar["default"];}});Object.defineProperty(exports,"Banner",{enumerable:true,get:function get(){return _Banner["default"];}});Object.defineProperty(exports,"Box",{enumerable:true,get:function get(){return _Box["default"];}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button["default"];}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _native.Card;}});Object.defineProperty(exports,"Checkbox",{enumerable:true,get:function get(){return _Checkbox["default"];}});Object.defineProperty(exports,"Chips",{enumerable:true,get:function get(){return _Chips["default"];}});Object.defineProperty(exports,"Divider",{enumerable:true,get:function get(){return _Divider["default"];}});Object.defineProperty(exports,"Dropdown",{enumerable:true,get:function get(){return _Dropdown["default"];}});Object.defineProperty(exports,"EventCard",{enumerable:true,get:function get(){return _native.EventCard;}});Object.defineProperty(exports,"GymCard",{enumerable:true,get:function get(){return _native.GymCard;}});Object.defineProperty(exports,"Icon",{enumerable:true,get:function get(){return _Icon["default"];}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input["default"];}});Object.defineProperty(exports,"List",{enumerable:true,get:function get(){return _List["default"];}});Object.defineProperty(exports,"PlanCard",{enumerable:true,get:function get(){return _native.PlanCard;}});Object.defineProperty(exports,"Progress",{enumerable:true,get:function get(){return _Progress["default"];}});Object.defineProperty(exports,"RadioGroup",{enumerable:true,get:function get(){return _RadioGroup["default"];}});Object.defineProperty(exports,"Rating",{enumerable:true,get:function get(){return _Rating["default"];}});Object.defineProperty(exports,"Result",{enumerable:true,get:function get(){return _Result["default"];}});Object.defineProperty(exports,"Slider",{enumerable:true,get:function get(){return _Slider["default"];}});Object.defineProperty(exports,"Snackbar",{enumerable:true,get:function get(){return _Snackbar["default"];}});Object.defineProperty(exports,"Stepper",{enumerable:true,get:function get(){return _Stepper["default"];}});Object.defineProperty(exports,"Tag",{enumerable:true,get:function get(){return _Tag["default"];}});Object.defineProperty(exports,"Text",{enumerable:true,get:function get(){return _Text["default"];}});Object.defineProperty(exports,"TextArea",{enumerable:true,get:function get(){return _TextArea["default"];}});Object.defineProperty(exports,"ThemeProvider",{enumerable:true,get:function get(){return _Theme["default"];}});Object.defineProperty(exports,"createTheme",{enumerable:true,get:function get(){return _Theme.createTheme;}});Object.defineProperty(exports,"theme",{enumerable:true,get:function get(){return _Theme.theme;}});Object.defineProperty(exports,"yogaTheme",{enumerable:true,get:function get(){return _Theme.yogaTheme;}});var _Theme=_interopRequireWildcard(require("./Theme"));var _Button=_interopRequireDefault(require("./Button"));var _List=_interopRequireDefault(require("./List"));var _Checkbox=_interopRequireDefault(require("./Checkbox"));var _Slider=_interopRequireDefault(require("./Slider"));var _RadioGroup=_interopRequireDefault(require("./RadioGroup"));var _native=require("./Card/native");var _Stepper=_interopRequireDefault(require("./Stepper"));var _Text=_interopRequireDefault(require("./Text"));var _Rating=_interopRequireDefault(require("./Rating"));var _Tag=_interopRequireDefault(require("./Tag"));var _Input=_interopRequireDefault(require("./Input"));var _Progress=_interopRequireDefault(require("./Progress"));var _Dropdown=_interopRequireDefault(require("./Dropdown"));var _TextArea=_interopRequireDefault(require("./TextArea"));var _Icon=_interopRequireDefault(require("./Icon"));var _Chips=_interopRequireDefault(require("./Chips"));var _Box=_interopRequireDefault(require("./Box"));var _Avatar=_interopRequireDefault(require("./Avatar"));var _Result=_interopRequireDefault(require("./Result"));var _Divider=_interopRequireDefault(require("./Divider"));var _Snackbar=_interopRequireDefault(require("./Snackbar"));var _Banner=_interopRequireDefault(require("./Banner"));function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar["default"];}});Object.defineProperty(exports,"Banner",{enumerable:true,get:function get(){return _Banner["default"];}});Object.defineProperty(exports,"Box",{enumerable:true,get:function get(){return _Box["default"];}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button["default"];}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _native.Card;}});Object.defineProperty(exports,"Checkbox",{enumerable:true,get:function get(){return _Checkbox["default"];}});Object.defineProperty(exports,"Chips",{enumerable:true,get:function get(){return _Chips["default"];}});Object.defineProperty(exports,"Divider",{enumerable:true,get:function get(){return _Divider["default"];}});Object.defineProperty(exports,"Dropdown",{enumerable:true,get:function get(){return _Dropdown["default"];}});Object.defineProperty(exports,"EventCard",{enumerable:true,get:function get(){return _native.EventCard;}});Object.defineProperty(exports,"GymCard",{enumerable:true,get:function get(){return _native.GymCard;}});Object.defineProperty(exports,"Icon",{enumerable:true,get:function get(){return _Icon["default"];}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input["default"];}});Object.defineProperty(exports,"List",{enumerable:true,get:function get(){return _List["default"];}});Object.defineProperty(exports,"PlanCard",{enumerable:true,get:function get(){return _native.PlanCard;}});Object.defineProperty(exports,"Progress",{enumerable:true,get:function get(){return _Progress["default"];}});Object.defineProperty(exports,"RadioGroup",{enumerable:true,get:function get(){return _RadioGroup["default"];}});Object.defineProperty(exports,"Rating",{enumerable:true,get:function get(){return _Rating["default"];}});Object.defineProperty(exports,"Result",{enumerable:true,get:function get(){return _Result["default"];}});Object.defineProperty(exports,"Skeleton",{enumerable:true,get:function get(){return _Skeleton["default"];}});Object.defineProperty(exports,"Slider",{enumerable:true,get:function get(){return _Slider["default"];}});Object.defineProperty(exports,"Snackbar",{enumerable:true,get:function get(){return _Snackbar["default"];}});Object.defineProperty(exports,"Stepper",{enumerable:true,get:function get(){return _Stepper["default"];}});Object.defineProperty(exports,"Tag",{enumerable:true,get:function get(){return _Tag["default"];}});Object.defineProperty(exports,"Text",{enumerable:true,get:function get(){return _Text["default"];}});Object.defineProperty(exports,"TextArea",{enumerable:true,get:function get(){return _TextArea["default"];}});Object.defineProperty(exports,"ThemeProvider",{enumerable:true,get:function get(){return _Theme["default"];}});Object.defineProperty(exports,"createTheme",{enumerable:true,get:function get(){return _Theme.createTheme;}});Object.defineProperty(exports,"theme",{enumerable:true,get:function get(){return _Theme.theme;}});Object.defineProperty(exports,"yogaTheme",{enumerable:true,get:function get(){return _Theme.yogaTheme;}});var _Theme=_interopRequireWildcard(require("./Theme"));var _Button=_interopRequireDefault(require("./Button"));var _List=_interopRequireDefault(require("./List"));var _Checkbox=_interopRequireDefault(require("./Checkbox"));var _Slider=_interopRequireDefault(require("./Slider"));var _RadioGroup=_interopRequireDefault(require("./RadioGroup"));var _native=require("./Card/native");var _Stepper=_interopRequireDefault(require("./Stepper"));var _Text=_interopRequireDefault(require("./Text"));var _Rating=_interopRequireDefault(require("./Rating"));var _Tag=_interopRequireDefault(require("./Tag"));var _Input=_interopRequireDefault(require("./Input"));var _Progress=_interopRequireDefault(require("./Progress"));var _Dropdown=_interopRequireDefault(require("./Dropdown"));var _TextArea=_interopRequireDefault(require("./TextArea"));var _Icon=_interopRequireDefault(require("./Icon"));var _Chips=_interopRequireDefault(require("./Chips"));var _Box=_interopRequireDefault(require("./Box"));var _Avatar=_interopRequireDefault(require("./Avatar"));var _Result=_interopRequireDefault(require("./Result"));var _Divider=_interopRequireDefault(require("./Divider"));var _Snackbar=_interopRequireDefault(require("./Snackbar"));var _Banner=_interopRequireDefault(require("./Banner"));var _Skeleton=_interopRequireDefault(require("./Skeleton"));function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
var _excluded = ["animation"];
|
|
2
|
+
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
4
|
+
|
|
5
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
6
|
+
|
|
7
|
+
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
8
|
+
|
|
9
|
+
import { number, oneOf } from 'prop-types';
|
|
10
|
+
import React, { useEffect, useState } from 'react';
|
|
11
|
+
import { Animated } from 'react-native';
|
|
12
|
+
import styled, { css } from 'styled-components';
|
|
13
|
+
var textVariantsModifier = {
|
|
14
|
+
h1: function h1(theme) {
|
|
15
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.spacing.xxxlarge);
|
|
16
|
+
},
|
|
17
|
+
h2: function h2(theme) {
|
|
18
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.huge);
|
|
19
|
+
},
|
|
20
|
+
h3: function h3(theme) {
|
|
21
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.xxxlarge);
|
|
22
|
+
},
|
|
23
|
+
h4: function h4(theme) {
|
|
24
|
+
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.xxlarge);
|
|
25
|
+
},
|
|
26
|
+
h5: function h5() {
|
|
27
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n height: 28px;\n "])));
|
|
28
|
+
},
|
|
29
|
+
body1: function body1(theme) {
|
|
30
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.xlarge);
|
|
31
|
+
},
|
|
32
|
+
body2: function body2(theme) {
|
|
33
|
+
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.large);
|
|
34
|
+
},
|
|
35
|
+
overline: function overline(theme) {
|
|
36
|
+
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.medium);
|
|
37
|
+
},
|
|
38
|
+
exception: function exception(theme) {
|
|
39
|
+
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.xsmall);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
var skeletonTypesModifier = {
|
|
43
|
+
circular: function circular() {
|
|
44
|
+
return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n border-radius: 1000;\n "])));
|
|
45
|
+
},
|
|
46
|
+
rectangular: function rectangular() {
|
|
47
|
+
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose([""])));
|
|
48
|
+
},
|
|
49
|
+
text: function text(theme, variant) {
|
|
50
|
+
return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), textVariantsModifier[variant](theme));
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
var StyledSkeleton = styled.View(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
54
|
+
var yoga = _ref.theme.yoga,
|
|
55
|
+
type = _ref.type,
|
|
56
|
+
width = _ref.width,
|
|
57
|
+
height = _ref.height,
|
|
58
|
+
variant = _ref.variant;
|
|
59
|
+
return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n width: ", "px;\n height: ", "px;\n\n background: ", ";\n\n ", ";\n "])), width, height, yoga.colors.light, skeletonTypesModifier[type](yoga, variant));
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
function Skeleton(_ref2) {
|
|
63
|
+
var _ref2$animation = _ref2.animation,
|
|
64
|
+
animation = _ref2$animation === void 0 ? 'pulse' : _ref2$animation,
|
|
65
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded);
|
|
66
|
+
|
|
67
|
+
var _useState = useState(new Animated.Value(0.1)),
|
|
68
|
+
opacity = _useState[0];
|
|
69
|
+
|
|
70
|
+
useEffect(function () {
|
|
71
|
+
if (animation) {
|
|
72
|
+
Animated.loop(Animated.sequence([Animated.timing(opacity, {
|
|
73
|
+
toValue: 0.3,
|
|
74
|
+
duration: 1000,
|
|
75
|
+
useNativeDriver: true
|
|
76
|
+
}), Animated.timing(opacity, {
|
|
77
|
+
toValue: 0.1,
|
|
78
|
+
duration: 1000,
|
|
79
|
+
useNativeDriver: true
|
|
80
|
+
})])).start();
|
|
81
|
+
}
|
|
82
|
+
}, [opacity]);
|
|
83
|
+
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
84
|
+
style: {
|
|
85
|
+
opacity: opacity
|
|
86
|
+
}
|
|
87
|
+
}, /*#__PURE__*/React.createElement(StyledSkeleton, props));
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
Skeleton.propTypes = {
|
|
91
|
+
/**
|
|
92
|
+
* Determines which type will be rendered. It can be
|
|
93
|
+
* 'circular', 'rectangular' or 'text'.
|
|
94
|
+
*/
|
|
95
|
+
type: oneOf(['circular', 'rectangular', 'text']).isRequired,
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* Determine the width of the skeleton.
|
|
99
|
+
* Applicable to all variants.
|
|
100
|
+
*/
|
|
101
|
+
width: number.isRequired,
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Determine the height of the skeleton.
|
|
105
|
+
* Applicable only to circular and rectangular variants.
|
|
106
|
+
*/
|
|
107
|
+
height: number.isRequired,
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Determine if the animation will 'pulse' or false;
|
|
111
|
+
*/
|
|
112
|
+
animation: oneOf(['pulse', false])
|
|
113
|
+
};
|
|
114
|
+
Skeleton.defaultProps = {
|
|
115
|
+
animation: 'pulse'
|
|
116
|
+
};
|
|
117
|
+
export default Skeleton;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render } from '@testing-library/react-native';
|
|
3
|
+
import { ThemeProvider, Skeleton } from '../..';
|
|
4
|
+
describe('<Skeleton />', function () {
|
|
5
|
+
it('should render the circular skeleton', function () {
|
|
6
|
+
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
|
|
7
|
+
type: "circular",
|
|
8
|
+
width: 64,
|
|
9
|
+
height: 64
|
|
10
|
+
}))),
|
|
11
|
+
toJSON = _render.toJSON;
|
|
12
|
+
|
|
13
|
+
expect(toJSON()).toMatchSnapshot();
|
|
14
|
+
});
|
|
15
|
+
it('should render the rectangular skeleton', function () {
|
|
16
|
+
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
|
|
17
|
+
type: "rectangular",
|
|
18
|
+
width: 400,
|
|
19
|
+
height: 200
|
|
20
|
+
}))),
|
|
21
|
+
toJSON = _render2.toJSON;
|
|
22
|
+
|
|
23
|
+
expect(toJSON()).toMatchSnapshot();
|
|
24
|
+
});
|
|
25
|
+
it('should render the text skeleton', function () {
|
|
26
|
+
var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
|
|
27
|
+
type: "text",
|
|
28
|
+
variant: "body1",
|
|
29
|
+
width: 61
|
|
30
|
+
}))),
|
|
31
|
+
toJSON = _render3.toJSON;
|
|
32
|
+
|
|
33
|
+
expect(toJSON()).toMatchSnapshot();
|
|
34
|
+
});
|
|
35
|
+
});
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
2
|
+
|
|
3
|
+
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
4
|
+
|
|
5
|
+
import { number, oneOf } from 'prop-types';
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
var textVariantsModifier = {
|
|
9
|
+
h1: function h1(theme) {
|
|
10
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.spacing.xxxlarge);
|
|
11
|
+
},
|
|
12
|
+
h2: function h2(theme) {
|
|
13
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.huge);
|
|
14
|
+
},
|
|
15
|
+
h3: function h3(theme) {
|
|
16
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.xxxlarge);
|
|
17
|
+
},
|
|
18
|
+
h4: function h4(theme) {
|
|
19
|
+
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.xxlarge);
|
|
20
|
+
},
|
|
21
|
+
h5: function h5() {
|
|
22
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n height: 28px;\n "])));
|
|
23
|
+
},
|
|
24
|
+
body1: function body1(theme) {
|
|
25
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.xlarge);
|
|
26
|
+
},
|
|
27
|
+
body2: function body2(theme) {
|
|
28
|
+
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.large);
|
|
29
|
+
},
|
|
30
|
+
overline: function overline(theme) {
|
|
31
|
+
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.medium);
|
|
32
|
+
},
|
|
33
|
+
exception: function exception(theme) {
|
|
34
|
+
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n "])), theme.fontSizes.xsmall);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
var skeletonTypesModifier = {
|
|
38
|
+
circular: function circular() {
|
|
39
|
+
return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n border-radius: 50%;\n "])));
|
|
40
|
+
},
|
|
41
|
+
rectangular: function rectangular() {
|
|
42
|
+
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose([""])));
|
|
43
|
+
},
|
|
44
|
+
text: function text(theme, variant) {
|
|
45
|
+
return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), textVariantsModifier[variant](theme));
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
var StyledSkeleton = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
49
|
+
var yoga = _ref.theme.yoga,
|
|
50
|
+
type = _ref.type,
|
|
51
|
+
width = _ref.width,
|
|
52
|
+
height = _ref.height,
|
|
53
|
+
variant = _ref.variant,
|
|
54
|
+
_ref$animation = _ref.animation,
|
|
55
|
+
animation = _ref$animation === void 0 ? 'pulse' : _ref$animation;
|
|
56
|
+
return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n width: ", "px;\n height: ", "px;\n\n background: ", ";\n\n ", "\n\n @keyframes placeholderShimmer {\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n\n ", ";\n "])), width, height, yoga.colors.clear, animation && css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n animation: placeholderShimmer 1s linear infinite;\n "]))), skeletonTypesModifier[type](yoga, variant));
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
function Skeleton(props) {
|
|
60
|
+
return /*#__PURE__*/React.createElement(StyledSkeleton, props);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
Skeleton.propTypes = {
|
|
64
|
+
/**
|
|
65
|
+
* Determines which type will be rendered. It can be
|
|
66
|
+
* 'circular', 'rectangular' or 'text'.
|
|
67
|
+
*/
|
|
68
|
+
type: oneOf(['circular', 'rectangular', 'text']).isRequired,
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Determine the width of the skeleton.
|
|
72
|
+
* Applicable to all variants.
|
|
73
|
+
*/
|
|
74
|
+
width: number.isRequired,
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Determine the height of the skeleton.
|
|
78
|
+
* Applicable only to circular and rectangular variants.
|
|
79
|
+
*/
|
|
80
|
+
height: number.isRequired,
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Determine if the animation will 'pulse' or false;
|
|
84
|
+
*/
|
|
85
|
+
animation: oneOf(['pulse', false])
|
|
86
|
+
};
|
|
87
|
+
Skeleton.defaultProps = {
|
|
88
|
+
animation: 'pulse'
|
|
89
|
+
};
|
|
90
|
+
export default Skeleton;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render } from '@testing-library/react';
|
|
3
|
+
import { ThemeProvider, Skeleton } from '../..';
|
|
4
|
+
describe('<Skeleton />', function () {
|
|
5
|
+
it('should render the circular skeleton', function () {
|
|
6
|
+
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
|
|
7
|
+
type: "circular",
|
|
8
|
+
width: 64,
|
|
9
|
+
height: 64
|
|
10
|
+
}))),
|
|
11
|
+
container = _render.container;
|
|
12
|
+
|
|
13
|
+
expect(container).toMatchSnapshot();
|
|
14
|
+
});
|
|
15
|
+
it('should render the rectangular skeleton', function () {
|
|
16
|
+
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
|
|
17
|
+
type: "rectangular",
|
|
18
|
+
width: 400,
|
|
19
|
+
height: 200
|
|
20
|
+
}))),
|
|
21
|
+
container = _render2.container;
|
|
22
|
+
|
|
23
|
+
expect(container).toMatchSnapshot();
|
|
24
|
+
});
|
|
25
|
+
it('should render the text skeleton', function () {
|
|
26
|
+
var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
|
|
27
|
+
type: "text",
|
|
28
|
+
variant: "body1",
|
|
29
|
+
width: 61
|
|
30
|
+
}))),
|
|
31
|
+
container = _render3.container;
|
|
32
|
+
|
|
33
|
+
expect(container).toMatchSnapshot();
|
|
34
|
+
});
|
|
35
|
+
});
|
package/esm/Theme/theme/theme.js
CHANGED
|
@@ -27,6 +27,7 @@ import _componentThemes_Progress$Progress from "./../../Progress/Progress.theme.
|
|
|
27
27
|
import _componentThemes_RadioGroup$RadioGroup from "./../../RadioGroup/RadioGroup.theme.js";
|
|
28
28
|
import _componentThemes_Rating$Rating from "./../../Rating/Rating.theme.js";
|
|
29
29
|
import _componentThemes_Result$Result from "./../../Result/Result.theme.js";
|
|
30
|
+
import _componentThemes_Skeleton$Skeleton from "./../../Skeleton/Skeleton.theme.js";
|
|
30
31
|
import _componentThemes_Slider$Slider from "./../../Slider/Slider.theme.js";
|
|
31
32
|
import _componentThemes_Snackbar$Snackbar from "./../../Snackbar/Snackbar.theme.js";
|
|
32
33
|
import _componentThemes_Stepper$Stepper from "./../../Stepper/Stepper.theme.js";
|
|
@@ -59,6 +60,7 @@ var componentThemes = {
|
|
|
59
60
|
RadioGroup$RadioGroup: _componentThemes_RadioGroup$RadioGroup,
|
|
60
61
|
Rating$Rating: _componentThemes_Rating$Rating,
|
|
61
62
|
Result$Result: _componentThemes_Result$Result,
|
|
63
|
+
Skeleton$Skeleton: _componentThemes_Skeleton$Skeleton,
|
|
62
64
|
Slider$Slider: _componentThemes_Slider$Slider,
|
|
63
65
|
Snackbar$Snackbar: _componentThemes_Snackbar$Snackbar,
|
|
64
66
|
Stepper$Stepper: _componentThemes_Stepper$Stepper,
|
package/esm/index.js
CHANGED
|
@@ -28,4 +28,5 @@ import Menu from './Menu';
|
|
|
28
28
|
import Banner from './Banner';
|
|
29
29
|
import Heading from './Heading';
|
|
30
30
|
import Feedback from './Feedback';
|
|
31
|
-
|
|
31
|
+
import Skeleton from './Skeleton';
|
|
32
|
+
export { ThemeProvider, FontLoader, createTheme, yogaTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, Stepper, Container, Row, Col, Hide, Text, Rating, EventCard, Tag, Input, Progress, Dropdown, TextArea, AutoComplete, Icon, Chips, Box, Snackbar, Avatar, BottomSheet, Dialog, Divider, Header, Menu, Banner, Heading, Feedback, Skeleton };
|
package/esm/index.native.js
CHANGED
|
@@ -21,4 +21,5 @@ import Result from './Result';
|
|
|
21
21
|
import Divider from './Divider';
|
|
22
22
|
import Snackbar from './Snackbar';
|
|
23
23
|
import Banner from './Banner';
|
|
24
|
-
|
|
24
|
+
import Skeleton from './Skeleton';
|
|
25
|
+
export { ThemeProvider, yogaTheme, createTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, EventCard, GymCard, Stepper, Text, Rating, Tag, Input, Progress, Dropdown, TextArea, Icon, Chips, Box, Avatar, Result, Divider, Snackbar, Banner, Skeleton };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gympass/yoga",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.47.0",
|
|
4
4
|
"description": "Gympass component library",
|
|
5
5
|
"main": "./cjs",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"react": ">=16",
|
|
52
52
|
"styled-components": "^4.4.0"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "9c58e2b894600bb70deab02ded7614310df1d9a1",
|
|
55
55
|
"module": "./esm",
|
|
56
56
|
"private": false,
|
|
57
57
|
"react-native": "./cjs/index.native.js"
|