@gympass/yoga 7.54.2 → 7.56.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 +21 -2
- package/cjs/Skeleton/native/Skeleton.js +1 -1
- package/cjs/Skeleton/native/Skeleton.test.js +1 -1
- package/cjs/Skeleton/web/Skeleton.js +33 -59
- package/cjs/Skeleton/web/Skeleton.test.js +42 -0
- package/esm/Skeleton/Skeleton.theme.js +21 -2
- package/esm/Skeleton/native/Skeleton.js +40 -63
- package/esm/Skeleton/native/Skeleton.test.js +42 -0
- package/esm/Skeleton/web/Skeleton.js +31 -57
- package/esm/Skeleton/web/Skeleton.test.js +42 -0
- package/package.json +2 -2
|
@@ -3,8 +3,27 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports["default"] = void 0;
|
|
5
5
|
|
|
6
|
-
var Skeleton = function Skeleton() {
|
|
7
|
-
|
|
6
|
+
var Skeleton = function Skeleton(_ref) {
|
|
7
|
+
var lineHeights = _ref.lineHeights,
|
|
8
|
+
radii = _ref.radii;
|
|
9
|
+
return {
|
|
10
|
+
border: {
|
|
11
|
+
circular: radii.circle
|
|
12
|
+
},
|
|
13
|
+
height: {
|
|
14
|
+
text: {
|
|
15
|
+
h1: lineHeights.huge,
|
|
16
|
+
h2: lineHeights.xxxlarge,
|
|
17
|
+
h3: lineHeights.xxlarge,
|
|
18
|
+
h4: lineHeights.xlarge,
|
|
19
|
+
h5: lineHeights.large,
|
|
20
|
+
body1: lineHeights.medium,
|
|
21
|
+
body2: lineHeights.small,
|
|
22
|
+
overline: lineHeights.xsmall,
|
|
23
|
+
exception: lineHeights.xxsmall
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
};
|
|
8
27
|
};
|
|
9
28
|
|
|
10
29
|
var _default = Skeleton;
|
|
@@ -1 +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=
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));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=_interopRequireDefault(require("styled-components"));var _yogaSystem=require("@gympass/yoga-system");var _excluded=["animation"];var _templateObject;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 StyledSkeleton=_styledComponents["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n display: flex;\n align-items: center;\n\n ","\n\n ","\n\n ","\n\n ","\n"])),_yogaSystem.margins,_yogaSystem.widths,_yogaSystem.heights,function(_ref){var type=_ref.type,variant=_ref.variant,_ref$theme$yoga=_ref.theme.yoga,colors=_ref$theme$yoga.colors,_ref$theme$yoga$compo=_ref$theme$yoga.components.skeleton,borderRadius=_ref$theme$yoga$compo.border[type],_ref$theme$yoga$compo2=_ref$theme$yoga$compo.height[type];_ref$theme$yoga$compo2=_ref$theme$yoga$compo2===void 0?{}:_ref$theme$yoga$compo2;var height=_ref$theme$yoga$compo2[variant];return"\n background-color: "+colors.elements.backgroundAndDisabled+";\n "+(borderRadius?"border-radius: "+borderRadius+"px;":'')+"\n "+(height?"height: "+height+"px;":'')+"\n ";});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.4)),_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:1,delay:500,duration:1000,easing:_reactNative.Easing.inOut(_reactNative.Easing.linear),useNativeDriver:true}),_reactNative.Animated.timing(opacity,{toValue:0.4,duration:500,easing:_reactNative.Easing.inOut(_reactNative.Easing.linear),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,variant:function variant(props,propName,componentName){var type=props.type;if(type!=='text'&&!!props[propName]){return new Error("The "+propName+" prop must only be used when the type is equal to \"text\".");}if(type==='text'){return(0,_propTypes.checkPropTypes)((0,_defineProperty2["default"])({},propName,(0,_propTypes.oneOf)(['h1','h2','h3','h4','h5','body1','body2','overline','exception']).isRequired),props,'prop',componentName);}return null;},animation:(0,_propTypes.oneOf)(['pulse',false])};Skeleton.defaultProps={variant:undefined,animation:'pulse'};var _default=Skeleton;exports["default"]=_default;
|
|
@@ -1 +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,height:32}))),toJSON=_render3.toJSON;expect(toJSON()).toMatchSnapshot();});});
|
|
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,height:32}))),toJSON=_render3.toJSON;expect(toJSON()).toMatchSnapshot();});it('should render all text skeleton variants correctly',function(){var _render4=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"text",variant:"h1",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"h2",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"h3",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"h4",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"h5",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"body1",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"body2",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"overline",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"exception",width:"100"}))),toJSON=_render4.toJSON;expect(toJSON()).toMatchSnapshot();});});
|
|
@@ -3,13 +3,15 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports["default"] = void 0;
|
|
5
5
|
|
|
6
|
-
var _propTypes = require("prop-types");
|
|
7
|
-
|
|
8
6
|
var _react = _interopRequireDefault(require("react"));
|
|
9
7
|
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
|
|
10
10
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _yogaSystem = require("@gympass/yoga-system");
|
|
13
|
+
|
|
14
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
13
15
|
|
|
14
16
|
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
17
|
|
|
@@ -19,56 +21,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
|
19
21
|
|
|
20
22
|
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
21
23
|
|
|
22
|
-
var
|
|
23
|
-
|
|
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,
|
|
24
|
+
var StyledSkeleton = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), _yogaSystem.margins, _yogaSystem.widths, _yogaSystem.heights, function (_ref) {
|
|
25
|
+
var type = _ref.type,
|
|
68
26
|
variant = _ref.variant,
|
|
69
27
|
_ref$animation = _ref.animation,
|
|
70
|
-
animation = _ref$animation === void 0 ? 'pulse' : _ref$animation
|
|
71
|
-
|
|
28
|
+
animation = _ref$animation === void 0 ? 'pulse' : _ref$animation,
|
|
29
|
+
_ref$theme$yoga = _ref.theme.yoga,
|
|
30
|
+
colors = _ref$theme$yoga.colors,
|
|
31
|
+
_ref$theme$yoga$compo = _ref$theme$yoga.components.skeleton,
|
|
32
|
+
borderRadius = _ref$theme$yoga$compo.border[type],
|
|
33
|
+
_ref$theme$yoga$compo2 = _ref$theme$yoga$compo.height[type];
|
|
34
|
+
_ref$theme$yoga$compo2 = _ref$theme$yoga$compo2 === void 0 ? {} : _ref$theme$yoga$compo2;
|
|
35
|
+
var height = _ref$theme$yoga$compo2[variant];
|
|
36
|
+
return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n ", "\n ", "\n\n ", "\n\n @keyframes placeholderShimmer {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4;\n }\n }\n "])), colors.elements.backgroundAndDisabled, borderRadius ? "border-radius: " + borderRadius + "px;" : '', height ? "height: " + height + "px;" : '', animation && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n animation: placeholderShimmer 1.5s ease-in-out 0.5s infinite;\n "]))));
|
|
72
37
|
});
|
|
73
38
|
|
|
74
39
|
function Skeleton(props) {
|
|
@@ -83,16 +48,24 @@ Skeleton.propTypes = {
|
|
|
83
48
|
type: (0, _propTypes.oneOf)(['circular', 'rectangular', 'text']).isRequired,
|
|
84
49
|
|
|
85
50
|
/**
|
|
86
|
-
*
|
|
87
|
-
*
|
|
51
|
+
* style the skeleton following the theme (the variant prop can only be used assemble to type "text").
|
|
52
|
+
* It can be 'h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', or 'exception'
|
|
88
53
|
*/
|
|
89
|
-
|
|
54
|
+
variant: function variant(props, propName, componentName) {
|
|
55
|
+
var type = props.type;
|
|
90
56
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
57
|
+
if (type !== 'text' && !!props[propName]) {
|
|
58
|
+
return new Error("The " + propName + " prop must only be used when the type is equal to \"text\".");
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
if (type === 'text') {
|
|
62
|
+
var _checkPropTypes;
|
|
63
|
+
|
|
64
|
+
return (0, _propTypes.checkPropTypes)((_checkPropTypes = {}, _checkPropTypes[propName] = (0, _propTypes.oneOf)(['h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', 'exception']).isRequired, _checkPropTypes), props, 'prop', componentName);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
return null;
|
|
68
|
+
},
|
|
96
69
|
|
|
97
70
|
/**
|
|
98
71
|
* Determine if the animation will 'pulse' or false;
|
|
@@ -100,6 +73,7 @@ Skeleton.propTypes = {
|
|
|
100
73
|
animation: (0, _propTypes.oneOf)(['pulse', false])
|
|
101
74
|
};
|
|
102
75
|
Skeleton.defaultProps = {
|
|
76
|
+
variant: undefined,
|
|
103
77
|
animation: 'pulse'
|
|
104
78
|
};
|
|
105
79
|
var _default = Skeleton;
|
|
@@ -39,4 +39,46 @@ describe('<Skeleton />', function () {
|
|
|
39
39
|
|
|
40
40
|
expect(container).toMatchSnapshot();
|
|
41
41
|
});
|
|
42
|
+
it('should render all text skeleton variants correctly', function () {
|
|
43
|
+
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
|
|
44
|
+
type: "text",
|
|
45
|
+
variant: "h1",
|
|
46
|
+
width: "100"
|
|
47
|
+
}), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
|
|
48
|
+
type: "text",
|
|
49
|
+
variant: "h2",
|
|
50
|
+
width: "100"
|
|
51
|
+
}), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
|
|
52
|
+
type: "text",
|
|
53
|
+
variant: "h3",
|
|
54
|
+
width: "100"
|
|
55
|
+
}), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
|
|
56
|
+
type: "text",
|
|
57
|
+
variant: "h4",
|
|
58
|
+
width: "100"
|
|
59
|
+
}), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
|
|
60
|
+
type: "text",
|
|
61
|
+
variant: "h5",
|
|
62
|
+
width: "100"
|
|
63
|
+
}), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
|
|
64
|
+
type: "text",
|
|
65
|
+
variant: "body1",
|
|
66
|
+
width: "100"
|
|
67
|
+
}), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
|
|
68
|
+
type: "text",
|
|
69
|
+
variant: "body2",
|
|
70
|
+
width: "100"
|
|
71
|
+
}), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
|
|
72
|
+
type: "text",
|
|
73
|
+
variant: "overline",
|
|
74
|
+
width: "100"
|
|
75
|
+
}), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
|
|
76
|
+
type: "text",
|
|
77
|
+
variant: "exception",
|
|
78
|
+
width: "100"
|
|
79
|
+
}))),
|
|
80
|
+
container = _render4.container;
|
|
81
|
+
|
|
82
|
+
expect(container).toMatchSnapshot();
|
|
83
|
+
});
|
|
42
84
|
});
|
|
@@ -1,5 +1,24 @@
|
|
|
1
|
-
var Skeleton = function Skeleton() {
|
|
2
|
-
|
|
1
|
+
var Skeleton = function Skeleton(_ref) {
|
|
2
|
+
var lineHeights = _ref.lineHeights,
|
|
3
|
+
radii = _ref.radii;
|
|
4
|
+
return {
|
|
5
|
+
border: {
|
|
6
|
+
circular: radii.circle
|
|
7
|
+
},
|
|
8
|
+
height: {
|
|
9
|
+
text: {
|
|
10
|
+
h1: lineHeights.huge,
|
|
11
|
+
h2: lineHeights.xxxlarge,
|
|
12
|
+
h3: lineHeights.xxlarge,
|
|
13
|
+
h4: lineHeights.xlarge,
|
|
14
|
+
h5: lineHeights.large,
|
|
15
|
+
body1: lineHeights.medium,
|
|
16
|
+
body2: lineHeights.small,
|
|
17
|
+
overline: lineHeights.xsmall,
|
|
18
|
+
exception: lineHeights.xxsmall
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
};
|
|
3
22
|
};
|
|
4
23
|
|
|
5
24
|
export default Skeleton;
|
|
@@ -1,62 +1,27 @@
|
|
|
1
1
|
var _excluded = ["animation"];
|
|
2
2
|
|
|
3
|
-
var _templateObject
|
|
3
|
+
var _templateObject;
|
|
4
4
|
|
|
5
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
6
|
|
|
7
7
|
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
8
8
|
|
|
9
|
-
import {
|
|
9
|
+
import { checkPropTypes, oneOf } from 'prop-types';
|
|
10
10
|
import React, { useEffect, useState } from 'react';
|
|
11
|
-
import { Animated } from 'react-native';
|
|
12
|
-
import styled
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
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));
|
|
11
|
+
import { Animated, Easing } from 'react-native';
|
|
12
|
+
import styled from 'styled-components';
|
|
13
|
+
import { margins, widths, heights } from '@gympass/yoga-system';
|
|
14
|
+
var StyledSkeleton = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), margins, widths, heights, function (_ref) {
|
|
15
|
+
var type = _ref.type,
|
|
16
|
+
variant = _ref.variant,
|
|
17
|
+
_ref$theme$yoga = _ref.theme.yoga,
|
|
18
|
+
colors = _ref$theme$yoga.colors,
|
|
19
|
+
_ref$theme$yoga$compo = _ref$theme$yoga.components.skeleton,
|
|
20
|
+
borderRadius = _ref$theme$yoga$compo.border[type],
|
|
21
|
+
_ref$theme$yoga$compo2 = _ref$theme$yoga$compo.height[type];
|
|
22
|
+
_ref$theme$yoga$compo2 = _ref$theme$yoga$compo2 === void 0 ? {} : _ref$theme$yoga$compo2;
|
|
23
|
+
var height = _ref$theme$yoga$compo2[variant];
|
|
24
|
+
return "\n background-color: " + colors.elements.backgroundAndDisabled + ";\n " + (borderRadius ? "border-radius: " + borderRadius + "px;" : '') + "\n " + (height ? "height: " + height + "px;" : '') + "\n ";
|
|
60
25
|
});
|
|
61
26
|
|
|
62
27
|
function Skeleton(_ref2) {
|
|
@@ -64,18 +29,21 @@ function Skeleton(_ref2) {
|
|
|
64
29
|
animation = _ref2$animation === void 0 ? 'pulse' : _ref2$animation,
|
|
65
30
|
props = _objectWithoutPropertiesLoose(_ref2, _excluded);
|
|
66
31
|
|
|
67
|
-
var _useState = useState(new Animated.Value(0.
|
|
32
|
+
var _useState = useState(new Animated.Value(0.4)),
|
|
68
33
|
opacity = _useState[0];
|
|
69
34
|
|
|
70
35
|
useEffect(function () {
|
|
71
36
|
if (animation) {
|
|
72
37
|
Animated.loop(Animated.sequence([Animated.timing(opacity, {
|
|
73
|
-
toValue:
|
|
38
|
+
toValue: 1,
|
|
39
|
+
delay: 500,
|
|
74
40
|
duration: 1000,
|
|
41
|
+
easing: Easing.inOut(Easing.linear),
|
|
75
42
|
useNativeDriver: true
|
|
76
43
|
}), Animated.timing(opacity, {
|
|
77
|
-
toValue: 0.
|
|
78
|
-
duration:
|
|
44
|
+
toValue: 0.4,
|
|
45
|
+
duration: 500,
|
|
46
|
+
easing: Easing.inOut(Easing.linear),
|
|
79
47
|
useNativeDriver: true
|
|
80
48
|
})])).start();
|
|
81
49
|
}
|
|
@@ -95,16 +63,24 @@ Skeleton.propTypes = {
|
|
|
95
63
|
type: oneOf(['circular', 'rectangular', 'text']).isRequired,
|
|
96
64
|
|
|
97
65
|
/**
|
|
98
|
-
*
|
|
99
|
-
*
|
|
66
|
+
* style the skeleton following the theme (the variant prop can only be used assemble to type "text").
|
|
67
|
+
* It can be 'h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', or 'exception'
|
|
100
68
|
*/
|
|
101
|
-
|
|
69
|
+
variant: function variant(props, propName, componentName) {
|
|
70
|
+
var type = props.type;
|
|
102
71
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
72
|
+
if (type !== 'text' && !!props[propName]) {
|
|
73
|
+
return new Error("The " + propName + " prop must only be used when the type is equal to \"text\".");
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
if (type === 'text') {
|
|
77
|
+
var _checkPropTypes;
|
|
78
|
+
|
|
79
|
+
return checkPropTypes((_checkPropTypes = {}, _checkPropTypes[propName] = oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', 'exception']).isRequired, _checkPropTypes), props, 'prop', componentName);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
return null;
|
|
83
|
+
},
|
|
108
84
|
|
|
109
85
|
/**
|
|
110
86
|
* Determine if the animation will 'pulse' or false;
|
|
@@ -112,6 +88,7 @@ Skeleton.propTypes = {
|
|
|
112
88
|
animation: oneOf(['pulse', false])
|
|
113
89
|
};
|
|
114
90
|
Skeleton.defaultProps = {
|
|
91
|
+
variant: undefined,
|
|
115
92
|
animation: 'pulse'
|
|
116
93
|
};
|
|
117
94
|
export default Skeleton;
|
|
@@ -33,4 +33,46 @@ describe('<Skeleton />', function () {
|
|
|
33
33
|
|
|
34
34
|
expect(toJSON()).toMatchSnapshot();
|
|
35
35
|
});
|
|
36
|
+
it('should render all text skeleton variants correctly', function () {
|
|
37
|
+
var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
|
|
38
|
+
type: "text",
|
|
39
|
+
variant: "h1",
|
|
40
|
+
width: "100"
|
|
41
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
42
|
+
type: "text",
|
|
43
|
+
variant: "h2",
|
|
44
|
+
width: "100"
|
|
45
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
46
|
+
type: "text",
|
|
47
|
+
variant: "h3",
|
|
48
|
+
width: "100"
|
|
49
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
50
|
+
type: "text",
|
|
51
|
+
variant: "h4",
|
|
52
|
+
width: "100"
|
|
53
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
54
|
+
type: "text",
|
|
55
|
+
variant: "h5",
|
|
56
|
+
width: "100"
|
|
57
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
58
|
+
type: "text",
|
|
59
|
+
variant: "body1",
|
|
60
|
+
width: "100"
|
|
61
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
62
|
+
type: "text",
|
|
63
|
+
variant: "body2",
|
|
64
|
+
width: "100"
|
|
65
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
66
|
+
type: "text",
|
|
67
|
+
variant: "overline",
|
|
68
|
+
width: "100"
|
|
69
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
70
|
+
type: "text",
|
|
71
|
+
variant: "exception",
|
|
72
|
+
width: "100"
|
|
73
|
+
}))),
|
|
74
|
+
toJSON = _render4.toJSON;
|
|
75
|
+
|
|
76
|
+
expect(toJSON()).toMatchSnapshot();
|
|
77
|
+
});
|
|
36
78
|
});
|
|
@@ -1,59 +1,24 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
2
2
|
|
|
3
3
|
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
4
4
|
|
|
5
|
-
import { number, oneOf } from 'prop-types';
|
|
6
5
|
import React from 'react';
|
|
6
|
+
import { checkPropTypes, oneOf } from 'prop-types';
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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,
|
|
8
|
+
import { margins, widths, heights } from '@gympass/yoga-system';
|
|
9
|
+
var StyledSkeleton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), margins, widths, heights, function (_ref) {
|
|
10
|
+
var type = _ref.type,
|
|
53
11
|
variant = _ref.variant,
|
|
54
12
|
_ref$animation = _ref.animation,
|
|
55
|
-
animation = _ref$animation === void 0 ? 'pulse' : _ref$animation
|
|
56
|
-
|
|
13
|
+
animation = _ref$animation === void 0 ? 'pulse' : _ref$animation,
|
|
14
|
+
_ref$theme$yoga = _ref.theme.yoga,
|
|
15
|
+
colors = _ref$theme$yoga.colors,
|
|
16
|
+
_ref$theme$yoga$compo = _ref$theme$yoga.components.skeleton,
|
|
17
|
+
borderRadius = _ref$theme$yoga$compo.border[type],
|
|
18
|
+
_ref$theme$yoga$compo2 = _ref$theme$yoga$compo.height[type];
|
|
19
|
+
_ref$theme$yoga$compo2 = _ref$theme$yoga$compo2 === void 0 ? {} : _ref$theme$yoga$compo2;
|
|
20
|
+
var height = _ref$theme$yoga$compo2[variant];
|
|
21
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n ", "\n ", "\n\n ", "\n\n @keyframes placeholderShimmer {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4;\n }\n }\n "])), colors.elements.backgroundAndDisabled, borderRadius ? "border-radius: " + borderRadius + "px;" : '', height ? "height: " + height + "px;" : '', animation && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n animation: placeholderShimmer 1.5s ease-in-out 0.5s infinite;\n "]))));
|
|
57
22
|
});
|
|
58
23
|
|
|
59
24
|
function Skeleton(props) {
|
|
@@ -68,16 +33,24 @@ Skeleton.propTypes = {
|
|
|
68
33
|
type: oneOf(['circular', 'rectangular', 'text']).isRequired,
|
|
69
34
|
|
|
70
35
|
/**
|
|
71
|
-
*
|
|
72
|
-
*
|
|
36
|
+
* style the skeleton following the theme (the variant prop can only be used assemble to type "text").
|
|
37
|
+
* It can be 'h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', or 'exception'
|
|
73
38
|
*/
|
|
74
|
-
|
|
39
|
+
variant: function variant(props, propName, componentName) {
|
|
40
|
+
var type = props.type;
|
|
75
41
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
42
|
+
if (type !== 'text' && !!props[propName]) {
|
|
43
|
+
return new Error("The " + propName + " prop must only be used when the type is equal to \"text\".");
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
if (type === 'text') {
|
|
47
|
+
var _checkPropTypes;
|
|
48
|
+
|
|
49
|
+
return checkPropTypes((_checkPropTypes = {}, _checkPropTypes[propName] = oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', 'exception']).isRequired, _checkPropTypes), props, 'prop', componentName);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
return null;
|
|
53
|
+
},
|
|
81
54
|
|
|
82
55
|
/**
|
|
83
56
|
* Determine if the animation will 'pulse' or false;
|
|
@@ -85,6 +58,7 @@ Skeleton.propTypes = {
|
|
|
85
58
|
animation: oneOf(['pulse', false])
|
|
86
59
|
};
|
|
87
60
|
Skeleton.defaultProps = {
|
|
61
|
+
variant: undefined,
|
|
88
62
|
animation: 'pulse'
|
|
89
63
|
};
|
|
90
64
|
export default Skeleton;
|
|
@@ -32,4 +32,46 @@ describe('<Skeleton />', function () {
|
|
|
32
32
|
|
|
33
33
|
expect(container).toMatchSnapshot();
|
|
34
34
|
});
|
|
35
|
+
it('should render all text skeleton variants correctly', function () {
|
|
36
|
+
var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
|
|
37
|
+
type: "text",
|
|
38
|
+
variant: "h1",
|
|
39
|
+
width: "100"
|
|
40
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
41
|
+
type: "text",
|
|
42
|
+
variant: "h2",
|
|
43
|
+
width: "100"
|
|
44
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
45
|
+
type: "text",
|
|
46
|
+
variant: "h3",
|
|
47
|
+
width: "100"
|
|
48
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
49
|
+
type: "text",
|
|
50
|
+
variant: "h4",
|
|
51
|
+
width: "100"
|
|
52
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
53
|
+
type: "text",
|
|
54
|
+
variant: "h5",
|
|
55
|
+
width: "100"
|
|
56
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
57
|
+
type: "text",
|
|
58
|
+
variant: "body1",
|
|
59
|
+
width: "100"
|
|
60
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
61
|
+
type: "text",
|
|
62
|
+
variant: "body2",
|
|
63
|
+
width: "100"
|
|
64
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
65
|
+
type: "text",
|
|
66
|
+
variant: "overline",
|
|
67
|
+
width: "100"
|
|
68
|
+
}), /*#__PURE__*/React.createElement(Skeleton, {
|
|
69
|
+
type: "text",
|
|
70
|
+
variant: "exception",
|
|
71
|
+
width: "100"
|
|
72
|
+
}))),
|
|
73
|
+
container = _render4.container;
|
|
74
|
+
|
|
75
|
+
expect(container).toMatchSnapshot();
|
|
76
|
+
});
|
|
35
77
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gympass/yoga",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.56.0",
|
|
4
4
|
"description": "Gympass component library",
|
|
5
5
|
"main": "./cjs",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"react": ">=16",
|
|
53
53
|
"styled-components": "^4.4.0"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "b3230f487807d99b32fbdad8b437587a8eadea06",
|
|
56
56
|
"module": "./esm",
|
|
57
57
|
"private": false,
|
|
58
58
|
"react-native": "./cjs/index.native.js"
|