@websolutespa/bom-mixer-ui 1.8.4 → 1.8.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/index.js +72 -63
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/media/media-image.js +71 -63
- package/dist/esm/components/media/media-image.js.map +1 -1
- package/dist/esm/components/media/media-video.js +3 -2
- package/dist/esm/components/media/media-video.js.map +1 -1
- package/dist/types/components/media/media-image.d.ts +1 -1
- package/dist/types/components/media/media-image.d.ts.map +1 -1
- package/dist/types/components/media/media-video.d.ts +1 -1
- package/dist/types/components/media/media-video.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/media/media-image.tsx +58 -56
- package/src/components/media/media-video.tsx +4 -2
package/CHANGELOG.md
CHANGED
package/dist/cjs/index.js
CHANGED
|
@@ -4425,55 +4425,6 @@ const StyledMediaImage = styled__default.default.img`
|
|
|
4425
4425
|
user-select: none;
|
|
4426
4426
|
color: transparent;
|
|
4427
4427
|
`;
|
|
4428
|
-
const MediaImage = _a => {
|
|
4429
|
-
var {
|
|
4430
|
-
className,
|
|
4431
|
-
type,
|
|
4432
|
-
loading = 'lazy',
|
|
4433
|
-
onLoaded,
|
|
4434
|
-
canLoad = true
|
|
4435
|
-
} = _a,
|
|
4436
|
-
props = __rest(_a, ["className", "type", "loading", "onLoaded", "canLoad"]);
|
|
4437
|
-
const theme = React.useContext(styled.ThemeContext);
|
|
4438
|
-
if (!theme) {
|
|
4439
|
-
throw new Error('MediaImage must be used within ThemeProvider');
|
|
4440
|
-
}
|
|
4441
|
-
const imageRef = React.useRef(null);
|
|
4442
|
-
const classNames = bomCore.getClassNames(className, 'image', props.src && {
|
|
4443
|
-
'image-svg': isSVG(props.src)
|
|
4444
|
-
});
|
|
4445
|
-
const imageProps = getImageProps(props, theme.mediaQuery);
|
|
4446
|
-
React.useEffect(() => {
|
|
4447
|
-
if (imageRef.current && canLoad) {
|
|
4448
|
-
const image = imageRef.current;
|
|
4449
|
-
if (image.complete) {
|
|
4450
|
-
if (typeof onLoaded === 'function') {
|
|
4451
|
-
onLoaded(imageRef);
|
|
4452
|
-
}
|
|
4453
|
-
} else {
|
|
4454
|
-
const onLoad = () => {
|
|
4455
|
-
if (typeof onLoaded === 'function') {
|
|
4456
|
-
onLoaded(imageRef);
|
|
4457
|
-
}
|
|
4458
|
-
};
|
|
4459
|
-
image.addEventListener('load', onLoad);
|
|
4460
|
-
return () => {
|
|
4461
|
-
if (image) {
|
|
4462
|
-
image.removeEventListener('load', onLoad);
|
|
4463
|
-
}
|
|
4464
|
-
};
|
|
4465
|
-
}
|
|
4466
|
-
}
|
|
4467
|
-
return () => {};
|
|
4468
|
-
}, [canLoad, onLoaded]);
|
|
4469
|
-
return jsxRuntime.jsx(StyledMediaImage, Object.assign({
|
|
4470
|
-
ref: imageRef
|
|
4471
|
-
}, canLoad ? imageProps : undefined, {
|
|
4472
|
-
className: classNames,
|
|
4473
|
-
loading: loading,
|
|
4474
|
-
draggable: false
|
|
4475
|
-
}));
|
|
4476
|
-
};
|
|
4477
4428
|
function getMediaSizes(mediaQuery, ratio, size, maxWidth, maxHeight) {
|
|
4478
4429
|
if (maxWidth === void 0) {
|
|
4479
4430
|
maxWidth = Number.POSITIVE_INFINITY;
|
|
@@ -4592,6 +4543,20 @@ const BASE_URLS = {
|
|
|
4592
4543
|
[bomCore.ImageStrategy.Oven]: bomMixerStore.getRemoteApiUrl('/_image')
|
|
4593
4544
|
};
|
|
4594
4545
|
const BASE_URL = BASE_URLS[IMAGE_STRATEGY];
|
|
4546
|
+
function parseUrl(src) {
|
|
4547
|
+
if (src.indexOf('http') === 0) {
|
|
4548
|
+
const url = new URL(src);
|
|
4549
|
+
return url;
|
|
4550
|
+
}
|
|
4551
|
+
const pathname = src.split('/').map(x => encodeURIComponent(x)).join('/');
|
|
4552
|
+
const url = {
|
|
4553
|
+
origin: '',
|
|
4554
|
+
pathname,
|
|
4555
|
+
search: '',
|
|
4556
|
+
href: pathname
|
|
4557
|
+
};
|
|
4558
|
+
return url;
|
|
4559
|
+
}
|
|
4595
4560
|
function getImageSrc(src, width, ratio, focalX, focalY, quality) {
|
|
4596
4561
|
if (focalX === void 0) {
|
|
4597
4562
|
focalX = IMAGE_FOCAL_X;
|
|
@@ -4611,23 +4576,20 @@ function getImageSrc(src, width, ratio, focalX, focalY, quality) {
|
|
|
4611
4576
|
const {
|
|
4612
4577
|
origin,
|
|
4613
4578
|
pathname,
|
|
4614
|
-
search
|
|
4615
|
-
|
|
4616
|
-
|
|
4617
|
-
pathname: src,
|
|
4618
|
-
search: ''
|
|
4619
|
-
};
|
|
4579
|
+
search,
|
|
4580
|
+
href
|
|
4581
|
+
} = parseUrl(src);
|
|
4620
4582
|
const imageResize = ratio !== 0 ? {
|
|
4621
4583
|
w: width,
|
|
4622
4584
|
h: Math.round(width / ratio),
|
|
4623
4585
|
x: focalX,
|
|
4624
4586
|
y: focalY,
|
|
4625
4587
|
q: quality,
|
|
4626
|
-
src
|
|
4588
|
+
src: href
|
|
4627
4589
|
} : {
|
|
4628
4590
|
w: width,
|
|
4629
4591
|
q: quality,
|
|
4630
|
-
src
|
|
4592
|
+
src: href
|
|
4631
4593
|
};
|
|
4632
4594
|
const token = bomCore.encryptImageToken(imageResize);
|
|
4633
4595
|
return `${BASE_URL}${pathname}?origin=${encodeURIComponent(origin)}&search=${encodeURIComponent(search)}&t=${encodeURIComponent(token)}`;
|
|
@@ -4639,11 +4601,7 @@ function getImageSrc(src, width, ratio, focalX, focalY, quality) {
|
|
|
4639
4601
|
origin,
|
|
4640
4602
|
pathname,
|
|
4641
4603
|
search
|
|
4642
|
-
} =
|
|
4643
|
-
origin: '',
|
|
4644
|
-
pathname: src,
|
|
4645
|
-
search: ''
|
|
4646
|
-
};
|
|
4604
|
+
} = parseUrl(src);
|
|
4647
4605
|
return ratio !== 0 ? `${BASE_URL}${pathname}?origin=${encodeURIComponent(origin)}&search=${encodeURIComponent(search)}&w=${width}&h=${Math.round(width / ratio)}&x=${focalX}&y=${focalY}&q=${quality}` : `${BASE_URL}${pathname}?origin=${encodeURIComponent(origin)}&search=${encodeURIComponent(search)}&w=${width}&x=${focalX}&y=${focalY}&q=${quality}`;
|
|
4648
4606
|
}
|
|
4649
4607
|
default:
|
|
@@ -4671,6 +4629,56 @@ function getImageSizes(sizes) {
|
|
|
4671
4629
|
function isSVG(src) {
|
|
4672
4630
|
return src.indexOf('.svg') !== -1;
|
|
4673
4631
|
}
|
|
4632
|
+
const MediaImage_ = _a => {
|
|
4633
|
+
var {
|
|
4634
|
+
className,
|
|
4635
|
+
type,
|
|
4636
|
+
loading = 'lazy',
|
|
4637
|
+
onLoaded,
|
|
4638
|
+
canLoad = true
|
|
4639
|
+
} = _a,
|
|
4640
|
+
props = __rest(_a, ["className", "type", "loading", "onLoaded", "canLoad"]);
|
|
4641
|
+
const theme = React.useContext(styled.ThemeContext);
|
|
4642
|
+
if (!theme) {
|
|
4643
|
+
throw new Error('MediaImage must be used within ThemeProvider');
|
|
4644
|
+
}
|
|
4645
|
+
const imageRef = React.useRef(null);
|
|
4646
|
+
const classNames = bomCore.getClassNames(className, 'image', props.src && {
|
|
4647
|
+
'image-svg': isSVG(props.src)
|
|
4648
|
+
});
|
|
4649
|
+
const imageProps = getImageProps(props, theme.mediaQuery);
|
|
4650
|
+
React.useEffect(() => {
|
|
4651
|
+
if (imageRef.current && canLoad) {
|
|
4652
|
+
const image = imageRef.current;
|
|
4653
|
+
if (image.complete) {
|
|
4654
|
+
if (typeof onLoaded === 'function') {
|
|
4655
|
+
onLoaded(imageRef);
|
|
4656
|
+
}
|
|
4657
|
+
} else {
|
|
4658
|
+
const onLoad = () => {
|
|
4659
|
+
if (typeof onLoaded === 'function') {
|
|
4660
|
+
onLoaded(imageRef);
|
|
4661
|
+
}
|
|
4662
|
+
};
|
|
4663
|
+
image.addEventListener('load', onLoad);
|
|
4664
|
+
return () => {
|
|
4665
|
+
if (image) {
|
|
4666
|
+
image.removeEventListener('load', onLoad);
|
|
4667
|
+
}
|
|
4668
|
+
};
|
|
4669
|
+
}
|
|
4670
|
+
}
|
|
4671
|
+
return () => {};
|
|
4672
|
+
}, [canLoad, onLoaded]);
|
|
4673
|
+
return jsxRuntime.jsx(StyledMediaImage, Object.assign({
|
|
4674
|
+
ref: imageRef
|
|
4675
|
+
}, canLoad ? imageProps : undefined, {
|
|
4676
|
+
className: classNames,
|
|
4677
|
+
loading: loading,
|
|
4678
|
+
draggable: false
|
|
4679
|
+
}));
|
|
4680
|
+
};
|
|
4681
|
+
const MediaImage = /*#__PURE__*/React.memo(MediaImage_);
|
|
4674
4682
|
|
|
4675
4683
|
const StyledMediaVideo = styled__default.default.video`
|
|
4676
4684
|
max-width: 100%;
|
|
@@ -4689,7 +4697,7 @@ const StyledMediaVideo = styled__default.default.video`
|
|
|
4689
4697
|
}
|
|
4690
4698
|
}
|
|
4691
4699
|
`;
|
|
4692
|
-
const
|
|
4700
|
+
const MediaVideo_ = _a => {
|
|
4693
4701
|
var {
|
|
4694
4702
|
className,
|
|
4695
4703
|
onLoaded,
|
|
@@ -4744,6 +4752,7 @@ const MediaVideo = _a => {
|
|
|
4744
4752
|
})
|
|
4745
4753
|
}));
|
|
4746
4754
|
};
|
|
4755
|
+
const MediaVideo = /*#__PURE__*/React.memo(MediaVideo_);
|
|
4747
4756
|
|
|
4748
4757
|
const MediaItem = _ref => {
|
|
4749
4758
|
let {
|