@artsy/palette 37.3.4 → 37.3.5-canary.1358.30031.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/dist/elements/Image/Image.d.ts +1 -0
- package/dist/elements/Image/Image.js.map +1 -1
- package/dist/elements/Image/Image.story.d.ts +12 -0
- package/dist/elements/Image/Image.story.js +30 -1
- package/dist/elements/Image/Image.story.js.map +1 -1
- package/dist/elements/Image/LazyImage.js +44 -4
- package/dist/elements/Image/LazyImage.js.map +1 -1
- package/dist/elements/Skeleton/Skeleton.d.ts +3 -0
- package/dist/elements/Skeleton/Skeleton.js +26 -2
- package/dist/elements/Skeleton/Skeleton.js.map +1 -1
- package/package.json +5 -2
|
@@ -5,6 +5,7 @@ export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElemen
|
|
|
5
5
|
lazyLoad?: boolean;
|
|
6
6
|
/** Flag indicating that right clicks should be prevented */
|
|
7
7
|
preventRightClick?: boolean;
|
|
8
|
+
blurhash?: string;
|
|
8
9
|
}
|
|
9
10
|
export declare const BaseImage: import("styled-components").StyledComponentClass<import("../CleanTag").TagProps & React.RefAttributes<any> & ImageProps, any, {
|
|
10
11
|
ref?: React.Ref<any> | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.js","names":["_react","_interopRequireDefault","require","_styledComponents","_styledSystem","_CleanTag","_LazyImage","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","BaseImage","styled","CleanTag","as","withConfig","displayName","componentId","compose","space","width","height","maxHeight","borderRadius","exports","Image","_ref","_ref$lazyLoad","lazyLoad","_ref$preventRightClic","preventRightClick","rest","createElement","LazyImage","preload","imageComponent","onContextMenu","e","preventDefault"],"sources":["../../../src/elements/Image/Image.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport {\n borderRadius,\n BorderRadiusProps,\n compose,\n height,\n HeightProps,\n maxHeight,\n MaxHeightProps,\n space,\n SpaceProps,\n width,\n WidthProps,\n} from \"styled-system\"\nimport { CleanTag } from \"../CleanTag\"\nimport { LazyImage } from \"./LazyImage\"\n\nexport interface ImageProps\n extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"width\" | \"height\">,\n SpaceProps,\n WidthProps,\n HeightProps,\n MaxHeightProps,\n BorderRadiusProps {\n /** Flag for if image should be lazy loaded */\n lazyLoad?: boolean\n /** Flag indicating that right clicks should be prevented */\n preventRightClick?: boolean\n}\n\n// @ts-expect-error MIGRATE_STRICT_MODE\nexport const BaseImage = styled(CleanTag.as(\"img\"))<ImageProps>`\n ${compose(space, width, height, maxHeight, borderRadius)}\n`\n\n/** A web-only Image component. */\nexport const Image = ({\n lazyLoad = false,\n preventRightClick = false,\n ...rest\n}: ImageProps) => {\n return (\n <LazyImage\n preload={!lazyLoad}\n imageComponent={BaseImage}\n onContextMenu={(e) => preventRightClick && e.preventDefault()}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AAaA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AAAuC,IAAAK,SAAA;AAAA,SAAAN,uBAAAO,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAAA,SAAAQ,yBAAAN,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,GAAAY,6BAAA,CAAAR,MAAA,EAAAO,QAAA,OAAAN,GAAA,EAAAJ,CAAA,MAAAJ,MAAA,CAAAgB,qBAAA,QAAAC,gBAAA,GAAAjB,MAAA,CAAAgB,qBAAA,CAAAT,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAa,gBAAA,CAAAX,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAS,gBAAA,CAAAb,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,uBAAAR,MAAA,CAAAS,SAAA,CAAAU,oBAAA,CAAAR,IAAA,CAAAJ,MAAA,EAAAC,GAAA,aAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,cAAAL,MAAA;AAAA,SAAAY,8BAAAR,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,WAAAiB,UAAA,GAAApB,MAAA,CAAAqB,IAAA,CAAAd,MAAA,OAAAC,GAAA,EAAAJ,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAgB,UAAA,CAAAd,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAY,UAAA,CAAAhB,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,kBAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,YAAAL,MAAA;
|
|
1
|
+
{"version":3,"file":"Image.js","names":["_react","_interopRequireDefault","require","_styledComponents","_styledSystem","_CleanTag","_LazyImage","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","BaseImage","styled","CleanTag","as","withConfig","displayName","componentId","compose","space","width","height","maxHeight","borderRadius","exports","Image","_ref","_ref$lazyLoad","lazyLoad","_ref$preventRightClic","preventRightClick","rest","createElement","LazyImage","preload","imageComponent","onContextMenu","e","preventDefault"],"sources":["../../../src/elements/Image/Image.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport {\n borderRadius,\n BorderRadiusProps,\n compose,\n height,\n HeightProps,\n maxHeight,\n MaxHeightProps,\n space,\n SpaceProps,\n width,\n WidthProps,\n} from \"styled-system\"\nimport { CleanTag } from \"../CleanTag\"\nimport { LazyImage } from \"./LazyImage\"\n\nexport interface ImageProps\n extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"width\" | \"height\">,\n SpaceProps,\n WidthProps,\n HeightProps,\n MaxHeightProps,\n BorderRadiusProps {\n /** Flag for if image should be lazy loaded */\n lazyLoad?: boolean\n /** Flag indicating that right clicks should be prevented */\n preventRightClick?: boolean\n blurhash?: string\n}\n\n// @ts-expect-error MIGRATE_STRICT_MODE\nexport const BaseImage = styled(CleanTag.as(\"img\"))<ImageProps>`\n ${compose(space, width, height, maxHeight, borderRadius)}\n`\n\n/** A web-only Image component. */\nexport const Image = ({\n lazyLoad = false,\n preventRightClick = false,\n ...rest\n}: ImageProps) => {\n return (\n <LazyImage\n preload={!lazyLoad}\n imageComponent={BaseImage}\n onContextMenu={(e) => preventRightClick && e.preventDefault()}\n {...rest}\n />\n )\n}\n"],"mappings":"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"}
|
|
@@ -26,3 +26,15 @@ export declare const ImageLazyLoadSrcSet: {
|
|
|
26
26
|
name: string;
|
|
27
27
|
};
|
|
28
28
|
};
|
|
29
|
+
export declare const ImageSrcSetBlurHash: {
|
|
30
|
+
(): JSX.Element;
|
|
31
|
+
story: {
|
|
32
|
+
name: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export declare const ImageLazyLoadSrcSetBlurHash: {
|
|
36
|
+
(): JSX.Element;
|
|
37
|
+
story: {
|
|
38
|
+
name: string;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.ImageWSrcSet = exports.ImageLazyLoadSrcSet = exports.ImageLazyLoad = exports.Default = void 0;
|
|
6
|
+
exports.default = exports.ImageWSrcSet = exports.ImageSrcSetBlurHash = exports.ImageLazyLoadSrcSetBlurHash = exports.ImageLazyLoadSrcSet = exports.ImageLazyLoad = exports.Default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _Image = require("../Image");
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -69,4 +69,33 @@ exports.ImageLazyLoadSrcSet = ImageLazyLoadSrcSet;
|
|
|
69
69
|
ImageLazyLoadSrcSet.story = {
|
|
70
70
|
name: "Image + lazyLoad + srcSet"
|
|
71
71
|
};
|
|
72
|
+
var ImageSrcSetBlurHash = function ImageSrcSetBlurHash() {
|
|
73
|
+
return /*#__PURE__*/_react.default.createElement(_Image.Image, {
|
|
74
|
+
width: "300px",
|
|
75
|
+
height: "200px",
|
|
76
|
+
blurhash: "LWF$66t6IUV@?wR*NFoKb_oJaeW;",
|
|
77
|
+
src: "https://picsum.photos/seed/example/300/200",
|
|
78
|
+
srcSet: "https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x"
|
|
79
|
+
});
|
|
80
|
+
};
|
|
81
|
+
exports.ImageSrcSetBlurHash = ImageSrcSetBlurHash;
|
|
82
|
+
ImageSrcSetBlurHash.displayName = "ImageSrcSetBlurHash";
|
|
83
|
+
ImageSrcSetBlurHash.story = {
|
|
84
|
+
name: "Image + srcSet + BlurHash"
|
|
85
|
+
};
|
|
86
|
+
var ImageLazyLoadSrcSetBlurHash = function ImageLazyLoadSrcSetBlurHash() {
|
|
87
|
+
return /*#__PURE__*/_react.default.createElement(_Image.Image, {
|
|
88
|
+
lazyLoad: true,
|
|
89
|
+
width: "300px",
|
|
90
|
+
height: "200px",
|
|
91
|
+
blurhash: "LWF$66t6IUV@?wR*NFoKb_oJaeW;",
|
|
92
|
+
src: "https://picsum.photos/seed/example/300/200",
|
|
93
|
+
srcSet: "https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x"
|
|
94
|
+
});
|
|
95
|
+
};
|
|
96
|
+
exports.ImageLazyLoadSrcSetBlurHash = ImageLazyLoadSrcSetBlurHash;
|
|
97
|
+
ImageLazyLoadSrcSetBlurHash.displayName = "ImageLazyLoadSrcSetBlurHash";
|
|
98
|
+
ImageLazyLoadSrcSetBlurHash.story = {
|
|
99
|
+
name: "Image + lazyLoad + srcSet + BlurHash"
|
|
100
|
+
};
|
|
72
101
|
//# sourceMappingURL=Image.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.story.js","names":["_react","_interopRequireDefault","require","_Image","obj","__esModule","default","_default","title","exports","Default","createElement","Image","id","className","width","height","src","displayName","story","name","ImageWSrcSet","srcSet","ImageLazyLoad","Fragment","Array","from","map","_","i","key","lazyLoad","concat","ImageLazyLoadSrcSet"],"sources":["../../../src/elements/Image/Image.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image } from \"../Image\"\n\nexport default {\n title: \"Components/Image\",\n}\n\nexport const Default = () => {\n return (\n <Image\n id=\"example\"\n className=\"example\"\n width=\"300px\"\n height=\"200px\"\n src=\"https://picsum.photos/seed/example/300/200\"\n />\n )\n}\n\nDefault.story = {\n name: \"Image\",\n}\n\nexport const ImageWSrcSet = () => {\n return (\n <Image\n width=\"300px\"\n height=\"200px\"\n src=\"https://picsum.photos/seed/example/300/200\"\n srcSet=\"https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x\"\n />\n )\n}\n\nImageWSrcSet.story = {\n name: \"Image + srcSet\",\n}\n\nexport const ImageLazyLoad = () => {\n return (\n <>\n {Array.from(Array(100)).map((_, i) => (\n <Image\n key={i}\n lazyLoad\n width=\"300px\"\n height=\"200px\"\n src={`https://picsum.photos/seed/${i}/300/200`}\n />\n ))}\n </>\n )\n}\n\nImageLazyLoad.story = {\n name: \"Image + lazyLoad\",\n}\n\nexport const ImageLazyLoadSrcSet = () => {\n return (\n <>\n {Array.from(Array(100)).map((_, i) => (\n <Image\n key={i}\n lazyLoad\n width=\"300px\"\n height=\"200px\"\n src={`https://picsum.photos/seed/${i}/300/200`}\n srcSet={`https://picsum.photos/seed/${i}/300/200 1x, https://picsum.photos/seed/${i}/600/400 2x`}\n />\n ))}\n </>\n )\n}\n\nImageLazyLoadSrcSet.story = {\n name: \"Image + lazyLoad + srcSet\",\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Image.story.js","names":["_react","_interopRequireDefault","require","_Image","obj","__esModule","default","_default","title","exports","Default","createElement","Image","id","className","width","height","src","displayName","story","name","ImageWSrcSet","srcSet","ImageLazyLoad","Fragment","Array","from","map","_","i","key","lazyLoad","concat","ImageLazyLoadSrcSet","ImageSrcSetBlurHash","blurhash","ImageLazyLoadSrcSetBlurHash"],"sources":["../../../src/elements/Image/Image.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image } from \"../Image\"\n\nexport default {\n title: \"Components/Image\",\n}\n\nexport const Default = () => {\n return (\n <Image\n id=\"example\"\n className=\"example\"\n width=\"300px\"\n height=\"200px\"\n src=\"https://picsum.photos/seed/example/300/200\"\n />\n )\n}\n\nDefault.story = {\n name: \"Image\",\n}\n\nexport const ImageWSrcSet = () => {\n return (\n <Image\n width=\"300px\"\n height=\"200px\"\n src=\"https://picsum.photos/seed/example/300/200\"\n srcSet=\"https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x\"\n />\n )\n}\n\nImageWSrcSet.story = {\n name: \"Image + srcSet\",\n}\n\nexport const ImageLazyLoad = () => {\n return (\n <>\n {Array.from(Array(100)).map((_, i) => (\n <Image\n key={i}\n lazyLoad\n width=\"300px\"\n height=\"200px\"\n src={`https://picsum.photos/seed/${i}/300/200`}\n />\n ))}\n </>\n )\n}\n\nImageLazyLoad.story = {\n name: \"Image + lazyLoad\",\n}\n\nexport const ImageLazyLoadSrcSet = () => {\n return (\n <>\n {Array.from(Array(100)).map((_, i) => (\n <Image\n key={i}\n lazyLoad\n width=\"300px\"\n height=\"200px\"\n src={`https://picsum.photos/seed/${i}/300/200`}\n srcSet={`https://picsum.photos/seed/${i}/300/200 1x, https://picsum.photos/seed/${i}/600/400 2x`}\n />\n ))}\n </>\n )\n}\n\nImageLazyLoadSrcSet.story = {\n name: \"Image + lazyLoad + srcSet\",\n}\n\nexport const ImageSrcSetBlurHash = () => {\n return (\n <Image\n width=\"300px\"\n height=\"200px\"\n blurhash=\"LWF$66t6IUV@?wR*NFoKb_oJaeW;\"\n src=\"https://picsum.photos/seed/example/300/200\"\n srcSet=\"https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x\"\n />\n )\n}\n\nImageSrcSetBlurHash.story = {\n name: \"Image + srcSet + BlurHash\",\n}\n\nexport const ImageLazyLoadSrcSetBlurHash = () => {\n return (\n <Image\n lazyLoad\n width=\"300px\"\n height=\"200px\"\n blurhash=\"LWF$66t6IUV@?wR*NFoKb_oJaeW;\"\n src=\"https://picsum.photos/seed/example/300/200\"\n srcSet=\"https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x\"\n />\n )\n}\n\nImageLazyLoadSrcSetBlurHash.story = {\n name: \"Image + lazyLoad + srcSet + BlurHash\",\n}\n"],"mappings":"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"}
|
|
@@ -13,16 +13,16 @@ var _CleanTag = require("../CleanTag");
|
|
|
13
13
|
var _Skeleton = require("../Skeleton");
|
|
14
14
|
var _Image = require("./Image");
|
|
15
15
|
var _excluded = ["preload", "imageComponent"],
|
|
16
|
-
_excluded2 = ["src", "srcSet", "title", "alt", "aria-label", "width", "height", "borderRadius", "style", "onError"];
|
|
16
|
+
_excluded2 = ["src", "srcSet", "title", "alt", "aria-label", "width", "height", "borderRadius", "style", "onError", "blurhash"];
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
18
|
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); }
|
|
19
19
|
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; }
|
|
20
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
21
20
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
22
21
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
23
22
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
24
23
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
25
24
|
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
25
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
26
26
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
27
27
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
28
28
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
@@ -52,6 +52,10 @@ var LazyImage = function LazyImage(_ref) {
|
|
|
52
52
|
_useState2 = _slicedToArray(_useState, 2),
|
|
53
53
|
isImageLoaded = _useState2[0],
|
|
54
54
|
setImageLoaded = _useState2[1];
|
|
55
|
+
var _useState3 = (0, _react.useState)(false),
|
|
56
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
57
|
+
hideBlurhash = _useState4[0],
|
|
58
|
+
setHideBlurhash = _useState4[1];
|
|
55
59
|
var src = props.src,
|
|
56
60
|
srcSet = props.srcSet,
|
|
57
61
|
title = props.title,
|
|
@@ -62,13 +66,49 @@ var LazyImage = function LazyImage(_ref) {
|
|
|
62
66
|
borderRadius = props.borderRadius,
|
|
63
67
|
style = props.style,
|
|
64
68
|
onError = props.onError,
|
|
69
|
+
blurhash = props.blurhash,
|
|
65
70
|
containerProps = _objectWithoutProperties(props, _excluded2);
|
|
66
71
|
if (preload) {
|
|
67
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
72
|
+
return /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonImage, _extends({
|
|
73
|
+
width: width,
|
|
74
|
+
height: height,
|
|
75
|
+
borderRadius: borderRadius,
|
|
76
|
+
blurhash: hideBlurhash ? undefined : blurhash
|
|
77
|
+
}, containerProps), /*#__PURE__*/_react.default.createElement(ImageComponent, _extends({
|
|
78
|
+
onLoad: function onLoad() {
|
|
79
|
+
return setHideBlurhash(true);
|
|
80
|
+
}
|
|
81
|
+
}, props)));
|
|
68
82
|
}
|
|
69
83
|
var handleLoad = function handleLoad() {
|
|
70
|
-
|
|
84
|
+
setImageLoaded(true);
|
|
85
|
+
setTimeout(function () {
|
|
86
|
+
setHideBlurhash(true);
|
|
87
|
+
}, 500);
|
|
71
88
|
};
|
|
89
|
+
if (blurhash) {
|
|
90
|
+
return /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonImage, _extends({
|
|
91
|
+
width: width,
|
|
92
|
+
height: height,
|
|
93
|
+
borderRadius: borderRadius,
|
|
94
|
+
blurhash: hideBlurhash ? undefined : blurhash
|
|
95
|
+
}, containerProps), /*#__PURE__*/_react.default.createElement(InnerLazyImage, {
|
|
96
|
+
omitFromProps: imagePropsToOmit,
|
|
97
|
+
onError: onError,
|
|
98
|
+
src: src,
|
|
99
|
+
srcSet: srcSet,
|
|
100
|
+
title: title,
|
|
101
|
+
alt: alt,
|
|
102
|
+
"aria-label": ariaLabel,
|
|
103
|
+
borderRadius: borderRadius,
|
|
104
|
+
width: "100%",
|
|
105
|
+
height: "100%",
|
|
106
|
+
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
107
|
+
opacity: isImageLoaded ? "1" : "0"
|
|
108
|
+
}),
|
|
109
|
+
onLoad: handleLoad
|
|
110
|
+
}), /*#__PURE__*/_react.default.createElement("noscript", null, /*#__PURE__*/_react.default.createElement(ImageComponent, props)));
|
|
111
|
+
}
|
|
72
112
|
return /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonBox, _extends({
|
|
73
113
|
width: width,
|
|
74
114
|
height: height,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LazyImage.js","names":["_react","_interopRequireWildcard","require","_reactLazyLoadImageComponent","_styledComponents","_interopRequireDefault","_styledSystem","_CleanTag","_Skeleton","_Image","_excluded","_excluded2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","imagePropsToOmit","omitProps","prop","InnerLazyImage","styled","CleanTag","as","LazyLoadImage","withConfig","displayName","componentId","borderRadiusStyle","LazyImage","_ref","_ref$preload","preload","_ref$imageComponent","imageComponent","ImageComponent","Image","props","_useState","useState","_useState2","isImageLoaded","setImageLoaded","src","srcSet","title","alt","ariaLabel","width","height","borderRadius","style","onError","containerProps","createElement","handleLoad","SkeletonBox","omitFromProps","opacity","onLoad","exports"],"sources":["../../../src/elements/Image/LazyImage.tsx"],"sourcesContent":["import React, { CSSProperties, useState } from \"react\"\nimport { LazyLoadImage } from \"react-lazy-load-image-component\"\nimport styled from \"styled-components\"\nimport {\n borderRadius as borderRadiusStyle,\n BorderRadiusProps,\n HeightProps,\n WidthProps,\n} from \"styled-system\"\nimport { CleanTag, omitProps } from \"../CleanTag\"\nimport { SkeletonBox } from \"../Skeleton\"\nimport { ImageProps } from \"./Image\"\nimport { BaseImage as Image } from \"./Image\"\n\nconst imagePropsToOmit = omitProps.filter(\n (prop) => prop !== \"width\" && prop !== \"height\"\n)\n\n// @ts-expect-error MIGRATE_STRICT_MODE\nconst InnerLazyImage = styled(CleanTag.as(LazyLoadImage))<\n ImageProps & {\n onLoad: () => void\n onError?: (event: React.SyntheticEvent<any, Event>) => void\n }\n>`\n width: 100%;\n height: 100%;\n ${borderRadiusStyle}\n transition: opacity 0.25s;\n`\nInnerLazyImage.displayName = \"InnerLazyImage\"\n\ninterface LazyImageProps\n extends ImageProps,\n WidthProps,\n HeightProps,\n BorderRadiusProps {\n /** Eagerly load the image instead of lazy loading it */\n preload?: boolean\n style?: CSSProperties\n // TODO: Resolve type issues\n /** The image component to render when preload is true */\n imageComponent?: any // FunctionComponent<ImageProps>\n onContextMenu?: (e: any) => void\n onError?: (event: React.SyntheticEvent<any, Event>) => void\n}\n\n/** LazyImage */\nexport const LazyImage: React.FC<LazyImageProps> = ({\n preload = false,\n imageComponent: ImageComponent = Image,\n ...props\n}) => {\n const [isImageLoaded, setImageLoaded] = useState(false)\n\n const {\n src,\n srcSet,\n title,\n alt,\n [\"aria-label\"]: ariaLabel,\n width,\n height,\n borderRadius,\n style,\n onError,\n ...containerProps\n } = props\n\n if (preload) {\n return <ImageComponent {...props} />\n }\n\n const handleLoad = () => setImageLoaded(true)\n\n return (\n <SkeletonBox\n width={width}\n height={height}\n borderRadius={borderRadius}\n {...containerProps}\n >\n <InnerLazyImage\n omitFromProps={imagePropsToOmit}\n onError={onError}\n src={src}\n srcSet={srcSet}\n title={title}\n alt={alt}\n aria-label={ariaLabel}\n borderRadius={borderRadius}\n width=\"100%\"\n height=\"100%\"\n style={{\n ...style,\n opacity: isImageLoaded ? \"1\" : \"0\",\n }}\n onLoad={handleLoad}\n />\n <noscript>\n <ImageComponent {...props} />\n </noscript>\n </SkeletonBox>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LazyImage.js","names":["_react","_interopRequireWildcard","require","_reactLazyLoadImageComponent","_styledComponents","_interopRequireDefault","_styledSystem","_CleanTag","_Skeleton","_Image","_excluded","_excluded2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_extends","assign","bind","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","imagePropsToOmit","omitProps","prop","InnerLazyImage","styled","CleanTag","as","LazyLoadImage","withConfig","displayName","componentId","borderRadiusStyle","LazyImage","_ref","_ref$preload","preload","_ref$imageComponent","imageComponent","ImageComponent","Image","props","_useState","useState","_useState2","isImageLoaded","setImageLoaded","_useState3","_useState4","hideBlurhash","setHideBlurhash","src","srcSet","title","alt","ariaLabel","width","height","borderRadius","style","onError","blurhash","containerProps","createElement","SkeletonImage","onLoad","handleLoad","setTimeout","omitFromProps","opacity","SkeletonBox","exports"],"sources":["../../../src/elements/Image/LazyImage.tsx"],"sourcesContent":["import React, { CSSProperties, useState } from \"react\"\nimport { LazyLoadImage } from \"react-lazy-load-image-component\"\nimport styled from \"styled-components\"\nimport {\n borderRadius as borderRadiusStyle,\n BorderRadiusProps,\n HeightProps,\n WidthProps,\n} from \"styled-system\"\nimport { CleanTag, omitProps } from \"../CleanTag\"\nimport { SkeletonBox, SkeletonImage } from \"../Skeleton\"\nimport { ImageProps } from \"./Image\"\nimport { BaseImage as Image } from \"./Image\"\n\nconst imagePropsToOmit = omitProps.filter(\n (prop) => prop !== \"width\" && prop !== \"height\"\n)\n\n// @ts-expect-error MIGRATE_STRICT_MODE\nconst InnerLazyImage = styled(CleanTag.as(LazyLoadImage))<\n ImageProps & {\n onLoad: () => void\n onError?: (event: React.SyntheticEvent<any, Event>) => void\n }\n>`\n width: 100%;\n height: 100%;\n ${borderRadiusStyle}\n transition: opacity 0.25s;\n`\nInnerLazyImage.displayName = \"InnerLazyImage\"\n\ninterface LazyImageProps\n extends ImageProps,\n WidthProps,\n HeightProps,\n BorderRadiusProps {\n /** Eagerly load the image instead of lazy loading it */\n preload?: boolean\n style?: CSSProperties\n // TODO: Resolve type issues\n /** The image component to render when preload is true */\n imageComponent?: any // FunctionComponent<ImageProps>\n onContextMenu?: (e: any) => void\n onError?: (event: React.SyntheticEvent<any, Event>) => void\n}\n\n/** LazyImage */\nexport const LazyImage: React.FC<LazyImageProps> = ({\n preload = false,\n imageComponent: ImageComponent = Image,\n ...props\n}) => {\n const [isImageLoaded, setImageLoaded] = useState(false)\n const [hideBlurhash, setHideBlurhash] = useState(false)\n\n const {\n src,\n srcSet,\n title,\n alt,\n [\"aria-label\"]: ariaLabel,\n width,\n height,\n borderRadius,\n style,\n onError,\n blurhash,\n ...containerProps\n } = props\n\n if (preload) {\n return (\n <SkeletonImage\n width={width}\n height={height}\n borderRadius={borderRadius}\n blurhash={hideBlurhash ? undefined : blurhash}\n {...containerProps}\n >\n <ImageComponent onLoad={() => setHideBlurhash(true)} {...props} />\n </SkeletonImage>\n )\n }\n\n const handleLoad = () => {\n setImageLoaded(true)\n setTimeout(() => {\n setHideBlurhash(true)\n }, 500)\n }\n\n if (blurhash) {\n return (\n <SkeletonImage\n width={width}\n height={height}\n borderRadius={borderRadius}\n blurhash={hideBlurhash ? undefined : blurhash}\n {...containerProps}\n >\n <InnerLazyImage\n omitFromProps={imagePropsToOmit}\n onError={onError}\n src={src}\n srcSet={srcSet}\n title={title}\n alt={alt}\n aria-label={ariaLabel}\n borderRadius={borderRadius}\n width=\"100%\"\n height=\"100%\"\n style={{\n ...style,\n opacity: isImageLoaded ? \"1\" : \"0\",\n }}\n onLoad={handleLoad}\n />\n <noscript>\n <ImageComponent {...props} />\n </noscript>\n </SkeletonImage>\n )\n }\n\n return (\n <SkeletonBox\n width={width}\n height={height}\n borderRadius={borderRadius}\n {...containerProps}\n >\n <InnerLazyImage\n omitFromProps={imagePropsToOmit}\n onError={onError}\n src={src}\n srcSet={srcSet}\n title={title}\n alt={alt}\n aria-label={ariaLabel}\n borderRadius={borderRadius}\n width=\"100%\"\n height=\"100%\"\n style={{\n ...style,\n opacity: isImageLoaded ? \"1\" : \"0\",\n }}\n onLoad={handleLoad}\n />\n <noscript>\n <ImageComponent {...props} />\n </noscript>\n </SkeletonBox>\n )\n}\n"],"mappings":"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"}
|
|
@@ -4,16 +4,18 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.SkeletonText = exports.SkeletonBox = exports.Skeleton = void 0;
|
|
7
|
+
exports.SkeletonText = exports.SkeletonImage = exports.SkeletonBox = exports.Skeleton = void 0;
|
|
8
8
|
var _themeGet = require("@styled-system/theme-get");
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _reactBlurhash = require("react-blurhash");
|
|
10
11
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
11
12
|
var _styledSystem = require("styled-system");
|
|
12
13
|
var _splitProps = require("../../utils/splitProps");
|
|
13
14
|
var _Box = require("../Box");
|
|
14
15
|
var _Text = require("../Text");
|
|
15
16
|
var _excluded = ["children"],
|
|
16
|
-
_excluded2 = ["children"]
|
|
17
|
+
_excluded2 = ["children"],
|
|
18
|
+
_excluded3 = ["children", "blurhash"];
|
|
17
19
|
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); }
|
|
18
20
|
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; }
|
|
19
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -91,4 +93,26 @@ var Skeleton = function Skeleton(_ref2) {
|
|
|
91
93
|
};
|
|
92
94
|
exports.Skeleton = Skeleton;
|
|
93
95
|
Skeleton.displayName = "Skeleton";
|
|
96
|
+
var SkeletonImage = function SkeletonImage(_ref3) {
|
|
97
|
+
var children = _ref3.children,
|
|
98
|
+
blurhash = _ref3.blurhash,
|
|
99
|
+
rest = _objectWithoutProperties(_ref3, _excluded3);
|
|
100
|
+
return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
|
|
101
|
+
position: "relative"
|
|
102
|
+
}, rest), !!blurhash && /*#__PURE__*/_react.default.createElement(_reactBlurhash.BlurhashCanvas, {
|
|
103
|
+
hash: blurhash,
|
|
104
|
+
style: {
|
|
105
|
+
position: "absolute",
|
|
106
|
+
top: 0,
|
|
107
|
+
bottom: 0,
|
|
108
|
+
left: 0,
|
|
109
|
+
right: 0,
|
|
110
|
+
width: "100%",
|
|
111
|
+
height: "100%",
|
|
112
|
+
zIndex: -1
|
|
113
|
+
}
|
|
114
|
+
}), children);
|
|
115
|
+
};
|
|
116
|
+
exports.SkeletonImage = SkeletonImage;
|
|
117
|
+
SkeletonImage.displayName = "SkeletonImage";
|
|
94
118
|
//# sourceMappingURL=Skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.js","names":["_themeGet","require","_react","_interopRequireDefault","_styledComponents","_interopRequireWildcard","_styledSystem","_splitProps","_Box","_Text","_excluded","_excluded2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","SkeletonBox","styled","Box","withConfig","displayName","componentId","exports","defaultProps","bg","splitBorderProps","splitProps","border","SkeletonTextOverlay","SkeletonText","_ref","children","rest","_splitBorderProps","_splitBorderProps2","borderProps","textProps","createElement","Text","color","as","display","position","FADE_ANIMATION","keyframes","SkeletonFade","themeGet","Skeleton","_ref2","top","right","bottom","left"],"sources":["../../../src/elements/Skeleton/Skeleton.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled, { keyframes, StyledComponentClass } from \"styled-components\"\nimport { border, BorderProps } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text, TextProps } from \"../Text\"\n\n/** SkeletonProps */\nexport type SkeletonBoxProps = BoxProps\n\n/** A black10 Box */\nexport const SkeletonBox: StyledComponentClass<SkeletonBoxProps, any> = styled(\n Box\n)``\nSkeletonBox.defaultProps = { bg: \"black10\" }\nSkeletonBox.displayName = \"SkeletonBox\"\n\nconst splitBorderProps = splitProps<BorderProps>(border)\n\n/** SkeletonTextProps */\nexport type SkeletonTextProps = TextProps\n\nconst SkeletonTextOverlay = styled(SkeletonBox)`\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n height: calc(100% - 0.25em);\n transform: translateY(-50%);\n`\n\n/**\n * Allows you to create boxes the exact dimensions of a given piece of text\n */\nexport const SkeletonText: React.FC<SkeletonTextProps> = ({\n children,\n ...rest\n}) => {\n const [borderProps, textProps] = splitBorderProps(rest)\n\n return (\n <Text color=\"transparent\" {...textProps}>\n <Box as=\"span\" display=\"inline-flex\" position=\"relative\" aria-hidden>\n {children}\n\n <SkeletonTextOverlay {...borderProps} />\n </Box>\n </Text>\n )\n}\n\nconst FADE_ANIMATION = keyframes`\n 0% { opacity: 0.5; }\n 50% { opacity: 0; }\n 100% { opacity: 0.5; }\n`\n\nconst SkeletonFade = styled(Box)`\n background-color: ${themeGet(\"colors.white100\")};\n animation: ${FADE_ANIMATION} 2s ease-in-out infinite;\n`\n\nexport type SkeletonProps = BoxProps\n\n/**\n * Animated wrapper for Skeletons\n */\nexport const Skeleton: React.FC<SkeletonProps> = ({ children, ...rest }) => {\n return (\n <Box position=\"relative\" {...rest}>\n {children}\n\n <SkeletonFade position=\"absolute\" top={0} right={0} bottom={0} left={0} />\n </Box>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Skeleton.js","names":["_themeGet","require","_react","_interopRequireDefault","_reactBlurhash","_styledComponents","_interopRequireWildcard","_styledSystem","_splitProps","_Box","_Text","_excluded","_excluded2","_excluded3","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","SkeletonBox","styled","Box","withConfig","displayName","componentId","exports","defaultProps","bg","splitBorderProps","splitProps","border","SkeletonTextOverlay","SkeletonText","_ref","children","rest","_splitBorderProps","_splitBorderProps2","borderProps","textProps","createElement","Text","color","as","display","position","FADE_ANIMATION","keyframes","SkeletonFade","themeGet","Skeleton","_ref2","top","right","bottom","left","SkeletonImage","_ref3","blurhash","BlurhashCanvas","hash","style","width","height","zIndex"],"sources":["../../../src/elements/Skeleton/Skeleton.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport { BlurhashCanvas } from \"react-blurhash\"\nimport styled, { keyframes, StyledComponentClass } from \"styled-components\"\nimport { border, BorderProps } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text, TextProps } from \"../Text\"\n\n/** SkeletonProps */\nexport type SkeletonBoxProps = BoxProps\n\n/** A black10 Box */\nexport const SkeletonBox: StyledComponentClass<SkeletonBoxProps, any> = styled(\n Box\n)``\nSkeletonBox.defaultProps = { bg: \"black10\" }\nSkeletonBox.displayName = \"SkeletonBox\"\n\nconst splitBorderProps = splitProps<BorderProps>(border)\n\n/** SkeletonTextProps */\nexport type SkeletonTextProps = TextProps\n\nconst SkeletonTextOverlay = styled(SkeletonBox)`\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n height: calc(100% - 0.25em);\n transform: translateY(-50%);\n`\n\n/**\n * Allows you to create boxes the exact dimensions of a given piece of text\n */\nexport const SkeletonText: React.FC<SkeletonTextProps> = ({\n children,\n ...rest\n}) => {\n const [borderProps, textProps] = splitBorderProps(rest)\n\n return (\n <Text color=\"transparent\" {...textProps}>\n <Box as=\"span\" display=\"inline-flex\" position=\"relative\" aria-hidden>\n {children}\n\n <SkeletonTextOverlay {...borderProps} />\n </Box>\n </Text>\n )\n}\n\nconst FADE_ANIMATION = keyframes`\n 0% { opacity: 0.5; }\n 50% { opacity: 0; }\n 100% { opacity: 0.5; }\n`\n\nconst SkeletonFade = styled(Box)`\n background-color: ${themeGet(\"colors.white100\")};\n animation: ${FADE_ANIMATION} 2s ease-in-out infinite;\n`\n\nexport type SkeletonProps = BoxProps\n\n/**\n * Animated wrapper for Skeletons\n */\nexport const Skeleton: React.FC<SkeletonProps> = ({ children, ...rest }) => {\n return (\n <Box position=\"relative\" {...rest}>\n {children}\n\n <SkeletonFade position=\"absolute\" top={0} right={0} bottom={0} left={0} />\n </Box>\n )\n}\n\nexport const SkeletonImage: React.FC<SkeletonProps & { blurhash?: string }> = ({\n children,\n blurhash,\n ...rest\n}) => {\n return (\n <Box position=\"relative\" {...rest}>\n {!!blurhash && (\n <BlurhashCanvas\n hash={blurhash}\n style={{\n position: \"absolute\",\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n width: \"100%\",\n height: \"100%\",\n zIndex: -1,\n }}\n />\n )}\n\n {children}\n </Box>\n )\n}\n"],"mappings":";;;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAC,uBAAA,CAAAL,OAAA;AACA,IAAAM,aAAA,GAAAN,OAAA;AACA,IAAAO,WAAA,GAAAP,OAAA;AACA,IAAAQ,IAAA,GAAAR,OAAA;AACA,IAAAS,KAAA,GAAAT,OAAA;AAAyC,IAAAU,SAAA;EAAAC,UAAA;EAAAC,UAAA;AAAA,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAT,wBAAAa,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAE,OAAA,CAAAF,GAAA,yBAAAA,GAAA,4BAAAG,OAAA,EAAAH,GAAA,UAAAI,KAAA,GAAAT,wBAAA,CAAAC,WAAA,OAAAQ,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAL,GAAA,YAAAI,KAAA,CAAAE,GAAA,CAAAN,GAAA,SAAAO,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAZ,GAAA,QAAAY,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,GAAA,EAAAY,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,GAAA,EAAAY,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAZ,GAAA,CAAAY,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAH,GAAA,MAAAI,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAjB,GAAA,EAAAO,MAAA,YAAAA,MAAA;AAAA,SAAAvB,uBAAAgB,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAG,OAAA,EAAAH,GAAA;AAAA,SAAAkB,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AAAA,SAAAI,eAAAC,GAAA,EAAAN,CAAA,WAAAO,eAAA,CAAAD,GAAA,KAAAE,qBAAA,CAAAF,GAAA,EAAAN,CAAA,KAAAS,2BAAA,CAAAH,GAAA,EAAAN,CAAA,KAAAU,gBAAA;AAAA,SAAAA,iBAAA,cAAAC,SAAA;AAAA,SAAAF,4BAAAG,CAAA,EAAAC,MAAA,SAAAD,CAAA,qBAAAA,CAAA,sBAAAE,iBAAA,CAAAF,CAAA,EAAAC,MAAA,OAAAE,CAAA,GAAA5B,MAAA,CAAAI,SAAA,CAAAyB,QAAA,CAAAvB,IAAA,CAAAmB,CAAA,EAAAK,KAAA,aAAAF,CAAA,iBAAAH,CAAA,CAAAM,WAAA,EAAAH,CAAA,GAAAH,CAAA,CAAAM,WAAA,CAAAC,IAAA,MAAAJ,CAAA,cAAAA,CAAA,mBAAAK,KAAA,CAAAC,IAAA,CAAAT,CAAA,OAAAG,CAAA,+DAAAO,IAAA,CAAAP,CAAA,UAAAD,iBAAA,CAAAF,CAAA,EAAAC,MAAA;AAAA,SAAAC,kBAAAR,GAAA,EAAAiB,GAAA,QAAAA,GAAA,YAAAA,GAAA,GAAAjB,GAAA,CAAAJ,MAAA,EAAAqB,GAAA,GAAAjB,GAAA,CAAAJ,MAAA,WAAAF,CAAA,MAAAwB,IAAA,OAAAJ,KAAA,CAAAG,GAAA,GAAAvB,CAAA,GAAAuB,GAAA,EAAAvB,CAAA,MAAAwB,IAAA,CAAAxB,CAAA,IAAAM,GAAA,CAAAN,CAAA,YAAAwB,IAAA;AAAA,SAAAhB,sBAAAF,GAAA,EAAAN,CAAA,QAAAyB,EAAA,WAAAnB,GAAA,gCAAAoB,MAAA,IAAApB,GAAA,CAAAoB,MAAA,CAAAC,QAAA,KAAArB,GAAA,4BAAAmB,EAAA,QAAAG,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,IAAA,OAAAC,EAAA,OAAAC,EAAA,iBAAAJ,EAAA,IAAAL,EAAA,GAAAA,EAAA,CAAAhC,IAAA,CAAAa,GAAA,GAAA6B,IAAA,QAAAnC,CAAA,QAAAb,MAAA,CAAAsC,EAAA,MAAAA,EAAA,UAAAQ,EAAA,uBAAAA,EAAA,IAAAL,EAAA,GAAAE,EAAA,CAAArC,IAAA,CAAAgC,EAAA,GAAAW,IAAA,MAAAJ,IAAA,CAAAK,IAAA,CAAAT,EAAA,CAAAU,KAAA,GAAAN,IAAA,CAAA9B,MAAA,KAAAF,CAAA,GAAAiC,EAAA,sBAAAM,GAAA,IAAAL,EAAA,OAAAL,EAAA,GAAAU,GAAA,yBAAAN,EAAA,YAAAR,EAAA,CAAAe,MAAA,KAAAT,EAAA,GAAAN,EAAA,CAAAe,MAAA,IAAArD,MAAA,CAAA4C,EAAA,MAAAA,EAAA,2BAAAG,EAAA,QAAAL,EAAA,aAAAG,IAAA;AAAA,SAAAzB,gBAAAD,GAAA,QAAAc,KAAA,CAAAqB,OAAA,CAAAnC,GAAA,UAAAA,GAAA;AAAA,SAAAoC,yBAAAvC,MAAA,EAAAwC,QAAA,QAAAxC,MAAA,yBAAAJ,MAAA,GAAA6C,6BAAA,CAAAzC,MAAA,EAAAwC,QAAA,OAAArD,GAAA,EAAAU,CAAA,MAAAb,MAAA,CAAA0D,qBAAA,QAAAC,gBAAA,GAAA3D,MAAA,CAAA0D,qBAAA,CAAA1C,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAA8C,gBAAA,CAAA5C,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAwD,gBAAA,CAAA9C,CAAA,OAAA2C,QAAA,CAAAI,OAAA,CAAAzD,GAAA,uBAAAH,MAAA,CAAAI,SAAA,CAAAyD,oBAAA,CAAAvD,IAAA,CAAAU,MAAA,EAAAb,GAAA,aAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,cAAAS,MAAA;AAAA,SAAA6C,8BAAAzC,MAAA,EAAAwC,QAAA,QAAAxC,MAAA,yBAAAJ,MAAA,WAAAkD,UAAA,GAAA9D,MAAA,CAAA+D,IAAA,CAAA/C,MAAA,OAAAb,GAAA,EAAAU,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAiD,UAAA,CAAA/C,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAA2D,UAAA,CAAAjD,CAAA,OAAA2C,QAAA,CAAAI,OAAA,CAAAzD,GAAA,kBAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,YAAAS,MAAA;AAEzC;;AAGA;AACO,IAAMoD,WAAwD,GAAG,IAAAC,yBAAM,EAC5EC,QAAG,CACJ,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAAAC,OAAA,CAAAN,WAAA,GAAAA,WAAA;AACHA,WAAW,CAACO,YAAY,GAAG;EAAEC,EAAE,EAAE;AAAU,CAAC;AAC5CR,WAAW,CAACI,WAAW,GAAG,aAAa;AAEvC,IAAMK,gBAAgB,GAAG,IAAAC,sBAAU,EAAcC,oBAAM,CAAC;;AAExD;;AAGA,IAAMC,mBAAmB,GAAG,IAAAX,yBAAM,EAACD,WAAW,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0GAO9C;;AAED;AACA;AACA;AACO,IAAMQ,YAAyC,GAAG,SAA5CA,YAAyCA,CAAAC,IAAA,EAGhD;EAAA,IAFJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACLC,IAAI,GAAAzB,wBAAA,CAAAuB,IAAA,EAAA/F,SAAA;EAEP,IAAAkG,iBAAA,GAAiCR,gBAAgB,CAACO,IAAI,CAAC;IAAAE,kBAAA,GAAAhE,cAAA,CAAA+D,iBAAA;IAAhDE,WAAW,GAAAD,kBAAA;IAAEE,SAAS,GAAAF,kBAAA;EAE7B,oBACE5G,MAAA,CAAAoB,OAAA,CAAA2F,aAAA,CAACvG,KAAA,CAAAwG,IAAI,EAAA7E,QAAA;IAAC8E,KAAK,EAAC;EAAa,GAAKH,SAAS,gBACrC9G,MAAA,CAAAoB,OAAA,CAAA2F,aAAA,CAACxG,IAAA,CAAAqF,GAAG;IAACsB,EAAE,EAAC,MAAM;IAACC,OAAO,EAAC,aAAa;IAACC,QAAQ,EAAC,UAAU;IAAC;EAAW,GACjEX,QAAQ,eAETzG,MAAA,CAAAoB,OAAA,CAAA2F,aAAA,CAACT,mBAAmB,EAAKO,WAAW,CAAI,CACpC,CACD;AAEX,CAAC;AAAAb,OAAA,CAAAO,YAAA,GAAAA,YAAA;AAfYA,YAAyC,CAAAT,WAAA;AAiBtD,IAAMuB,cAAc,OAAGC,2BAAS,wDAI/B;AAED,IAAMC,YAAY,GAAG,IAAA5B,yBAAM,EAACC,QAAG,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sEACV,IAAAyB,kBAAQ,EAAC,iBAAiB,CAAC,EAClCH,cAAc,CAC5B;AAID;AACA;AACA;AACO,IAAMI,QAAiC,GAAG,SAApCA,QAAiCA,CAAAC,KAAA,EAA8B;EAAA,IAAxBjB,QAAQ,GAAAiB,KAAA,CAARjB,QAAQ;IAAKC,IAAI,GAAAzB,wBAAA,CAAAyC,KAAA,EAAAhH,UAAA;EACnE,oBACEV,MAAA,CAAAoB,OAAA,CAAA2F,aAAA,CAACxG,IAAA,CAAAqF,GAAG,EAAAzD,QAAA;IAACiF,QAAQ,EAAC;EAAU,GAAKV,IAAI,GAC9BD,QAAQ,eAETzG,MAAA,CAAAoB,OAAA,CAAA2F,aAAA,CAACQ,YAAY;IAACH,QAAQ,EAAC,UAAU;IAACO,GAAG,EAAE,CAAE;IAACC,KAAK,EAAE,CAAE;IAACC,MAAM,EAAE,CAAE;IAACC,IAAI,EAAE;EAAE,EAAG,CACtE;AAEV,CAAC;AAAA9B,OAAA,CAAAyB,QAAA,GAAAA,QAAA;AARYA,QAAiC,CAAA3B,WAAA;AAUvC,IAAMiC,aAA8D,GAAG,SAAjEA,aAA8DA,CAAAC,KAAA,EAIrE;EAAA,IAHJvB,QAAQ,GAAAuB,KAAA,CAARvB,QAAQ;IACRwB,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IACLvB,IAAI,GAAAzB,wBAAA,CAAA+C,KAAA,EAAArH,UAAA;EAEP,oBACEX,MAAA,CAAAoB,OAAA,CAAA2F,aAAA,CAACxG,IAAA,CAAAqF,GAAG,EAAAzD,QAAA;IAACiF,QAAQ,EAAC;EAAU,GAAKV,IAAI,GAC9B,CAAC,CAACuB,QAAQ,iBACTjI,MAAA,CAAAoB,OAAA,CAAA2F,aAAA,CAAC7G,cAAA,CAAAgI,cAAc;IACbC,IAAI,EAAEF,QAAS;IACfG,KAAK,EAAE;MACLhB,QAAQ,EAAE,UAAU;MACpBO,GAAG,EAAE,CAAC;MACNE,MAAM,EAAE,CAAC;MACTC,IAAI,EAAE,CAAC;MACPF,KAAK,EAAE,CAAC;MACRS,KAAK,EAAE,MAAM;MACbC,MAAM,EAAE,MAAM;MACdC,MAAM,EAAE,CAAC;IACX;EAAE,EAEL,EAEA9B,QAAQ,CACL;AAEV,CAAC;AAAAT,OAAA,CAAA+B,aAAA,GAAAA,aAAA;AA1BYA,aAA8D,CAAAjC,WAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "37.3.
|
|
3
|
+
"version": "37.3.5-canary.1358.30031.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
},
|
|
40
40
|
"homepage": "https://github.com/artsy/palette#readme",
|
|
41
41
|
"peerDependencies": {
|
|
42
|
+
"blurhash": "^2.0.5",
|
|
42
43
|
"react": "^16.2.0",
|
|
43
44
|
"react-dom": "^16.2.0",
|
|
44
45
|
"styled-components": "^4"
|
|
@@ -121,8 +122,10 @@
|
|
|
121
122
|
"@artsy/palette-tokens": "^5.1.0",
|
|
122
123
|
"@seznam/compose-react-refs": "^1.0.6",
|
|
123
124
|
"@styled-system/theme-get": "^5.1.2",
|
|
125
|
+
"blurhash": "^2.0.5",
|
|
124
126
|
"lodash": "^4.17.21",
|
|
125
127
|
"proportional-scale": "^4.0.0",
|
|
128
|
+
"react-blurhash": "^0.3.0",
|
|
126
129
|
"react-focus-on": "^3.7.0",
|
|
127
130
|
"react-lazy-load-image-component": "1.5.5",
|
|
128
131
|
"styled-system": "^5.1.5",
|
|
@@ -182,5 +185,5 @@
|
|
|
182
185
|
"url": "http://localhost"
|
|
183
186
|
}
|
|
184
187
|
},
|
|
185
|
-
"gitHead": "
|
|
188
|
+
"gitHead": "cd92dd36b9f955bcaf8ddb32ba6efe82a3ff423c"
|
|
186
189
|
}
|