@jotforminc/dnd-builder 3.6.3 → 3.6.4
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 +7 -0
- package/lib/cjs/components/Panels/SlidesNavigator/SlideItem.js +7 -1
- package/lib/cjs/components/Panels/SlidesNavigator/SlideItem.js.map +1 -1
- package/lib/cjs/components/Panels/SlidesNavigator/SlideItemDragOverlay.js +7 -1
- package/lib/cjs/components/Panels/SlidesNavigator/SlideItemDragOverlay.js.map +1 -1
- package/lib/cjs/components/Panels/SlidesNavigator/StaticSlideItem.js +2 -2
- package/lib/cjs/components/Panels/SlidesNavigator/StaticSlideItem.js.map +1 -1
- package/lib/esm/components/Panels/SlidesNavigator/SlideItem.js +7 -1
- package/lib/esm/components/Panels/SlidesNavigator/SlideItem.js.map +1 -1
- package/lib/esm/components/Panels/SlidesNavigator/SlideItemDragOverlay.js +7 -1
- package/lib/esm/components/Panels/SlidesNavigator/SlideItemDragOverlay.js.map +1 -1
- package/lib/esm/components/Panels/SlidesNavigator/StaticSlideItem.js +2 -2
- package/lib/esm/components/Panels/SlidesNavigator/StaticSlideItem.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [3.6.4](https://github.com/jotform/dnd-builder/compare/v3.6.3...v3.6.4) (2026-04-13)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **dnd-builder:** enhance slide item background color handling and adjust thumbnail dimensions ([e74b759](https://github.com/jotform/dnd-builder/commit/e74b7591fd29278ced3b5640e4d5a2f5ffdb72c5))
|
|
11
|
+
|
|
5
12
|
## [3.6.3](https://github.com/jotform/dnd-builder/compare/v3.6.2...v3.6.3) (2026-04-09)
|
|
6
13
|
|
|
7
14
|
|
|
@@ -11,6 +11,7 @@ var StaticSlideItem = require('./StaticSlideItem.js');
|
|
|
11
11
|
var SlideItemMoreMenu = require('./MoreMenu/SlideItemMoreMenu.js');
|
|
12
12
|
var functions = require('../../../utils/functions.js');
|
|
13
13
|
var BuilderContext = require('../../../contexts/BuilderContext.js');
|
|
14
|
+
var PropContext = require('../../../contexts/PropContext.js');
|
|
14
15
|
var jsxRuntime = require('react/jsx-runtime');
|
|
15
16
|
|
|
16
17
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -42,6 +43,11 @@ var SlideItem = function SlideItem(_ref) {
|
|
|
42
43
|
var visiblePageOrder = BuilderContext.useBuilderStore(function (state) {
|
|
43
44
|
return state.visiblePageOrder;
|
|
44
45
|
});
|
|
46
|
+
var reportBackgroundColor = PropContext.usePropStore(function (state) {
|
|
47
|
+
var _state$settings;
|
|
48
|
+
|
|
49
|
+
return (_state$settings = state.settings) === null || _state$settings === void 0 ? void 0 : _state$settings.reportBackgroundColor;
|
|
50
|
+
});
|
|
45
51
|
var selected = visiblePageOrder === order;
|
|
46
52
|
|
|
47
53
|
var _useSortable = sortable.useSortable({
|
|
@@ -103,7 +109,7 @@ var SlideItem = function SlideItem(_ref) {
|
|
|
103
109
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
104
110
|
className: "slides-navigator-item-content",
|
|
105
111
|
children: /*#__PURE__*/jsxRuntime.jsx(StaticSlideItem, {
|
|
106
|
-
backgroundColor: page.backgroundColor,
|
|
112
|
+
backgroundColor: page.backgroundColor || reportBackgroundColor || '#fff',
|
|
107
113
|
items: page.items,
|
|
108
114
|
reportHeight: reportHeight,
|
|
109
115
|
reportWidth: reportWidth
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlideItem.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlideItem.js"],"sourcesContent":["import {\n memo, useCallback, useMemo, useRef,\n} from 'react';\nimport { motion } from 'framer-motion';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport PropTypes from 'prop-types';\nimport StaticSlideItem from './StaticSlideItem';\nimport SlideItemMoreMenu from './MoreMenu/SlideItemMoreMenu';\nimport { emptyFunction } from '../../../utils/functions';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\n\nconst slideRevealTransition = {\n duration: 0.25,\n ease: [0.2, 0, 0.2, 1],\n};\n\nconst SlideItem = ({\n id,\n onPageClick,\n order,\n page,\n reportHeight,\n reportWidth,\n style,\n}) => {\n const moreMenuRef = useRef(null);\n const setVisiblePageOrder = useBuilderStore(state => state.setVisiblePageOrder);\n const visiblePageOrder = useBuilderStore(state => state.visiblePageOrder);\n const selected = visiblePageOrder === order;\n\n const {\n attributes,\n isDragging,\n listeners,\n setNodeRef,\n transform,\n transition,\n } = useSortable({ id });\n\n const itemClickHandler = useCallback(e => {\n setVisiblePageOrder(order);\n onPageClick?.(e);\n }, [onPageClick, setVisiblePageOrder, order]);\n\n const handleContextMenu = useCallback(e => {\n e.preventDefault();\n moreMenuRef.current?.handleOpenMenu(e);\n }, []);\n\n const dragStyle = useMemo(() => {\n const baseStyle = {\n opacity: isDragging ? 0.5 : 1,\n transform: CSS.Transform.toString(transform),\n transition: transition,\n };\n\n return { ...baseStyle, ...style };\n }, [transform, transition, isDragging, style]);\n\n return (\n <div\n ref={setNodeRef}\n className={`slides-navigator-item${selected ? ' selected' : ''}`}\n data-id={page.id}\n data-order={order}\n onClick={itemClickHandler}\n onContextMenu={handleContextMenu}\n onKeyDown={emptyFunction}\n style={dragStyle}\n {...attributes}\n {...listeners}\n >\n <motion.div\n className=\"slides-navigator-item-motion\"\n initial={{ opacity: 0.25, scale: 0.95 }}\n transition={slideRevealTransition}\n viewport={{ amount: 0.2, once: true }}\n whileInView={{ opacity: 1, scale: 1 }}\n >\n <div className=\"slides-navigator-item-order\">{order}</div>\n <div\n className=\"slides-navigator-item-content\"\n >\n <StaticSlideItem\n backgroundColor={page.backgroundColor}\n items={page.items}\n reportHeight={reportHeight}\n reportWidth={reportWidth}\n />\n </div>\n <SlideItemMoreMenu\n ref={moreMenuRef}\n order={order}\n page={page}\n selected={selected}\n />\n </motion.div>\n </div>\n );\n};\n\nSlideItem.propTypes = {\n id: PropTypes.string.isRequired,\n onPageClick: PropTypes.func,\n order: PropTypes.number,\n page: PropTypes.shape({\n backgroundColor: PropTypes.string,\n id: PropTypes.string.isRequired,\n items: PropTypes.arrayOf(PropTypes.shape({})),\n }),\n reportHeight: PropTypes.number.isRequired,\n reportWidth: PropTypes.number.isRequired,\n style: PropTypes.shape({\n opacity: PropTypes.number,\n transform: PropTypes.string,\n transition: PropTypes.string,\n }),\n};\n\nfunction slideItemPropsAreEqual(prevProps, nextProps) {\n return prevProps.id === nextProps.id\n && prevProps.order === nextProps.order\n && prevProps.page === nextProps.page\n && prevProps.reportHeight === nextProps.reportHeight\n && prevProps.reportWidth === nextProps.reportWidth\n && prevProps.style === nextProps.style\n && prevProps.onPageClick === nextProps.onPageClick;\n}\n\nexport default memo(SlideItem, slideItemPropsAreEqual);\n"],"names":["slideRevealTransition","duration","ease","SlideItem","id","onPageClick","order","page","reportHeight","reportWidth","style","moreMenuRef","useRef","setVisiblePageOrder","useBuilderStore","state","visiblePageOrder","selected","useSortable","attributes","isDragging","listeners","setNodeRef","transform","transition","itemClickHandler","useCallback","e","handleContextMenu","preventDefault","current","handleOpenMenu","dragStyle","useMemo","baseStyle","opacity","CSS","Transform","toString","_jsx","emptyFunction","_jsxs","motion","scale","amount","once","backgroundColor","items","propTypes","PropTypes","string","isRequired","func","number","shape","arrayOf","slideItemPropsAreEqual","prevProps","nextProps","memo"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SlideItem.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlideItem.js"],"sourcesContent":["import {\n memo, useCallback, useMemo, useRef,\n} from 'react';\nimport { motion } from 'framer-motion';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport PropTypes from 'prop-types';\nimport StaticSlideItem from './StaticSlideItem';\nimport SlideItemMoreMenu from './MoreMenu/SlideItemMoreMenu';\nimport { emptyFunction } from '../../../utils/functions';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst slideRevealTransition = {\n duration: 0.25,\n ease: [0.2, 0, 0.2, 1],\n};\n\nconst SlideItem = ({\n id,\n onPageClick,\n order,\n page,\n reportHeight,\n reportWidth,\n style,\n}) => {\n const moreMenuRef = useRef(null);\n const setVisiblePageOrder = useBuilderStore(state => state.setVisiblePageOrder);\n const visiblePageOrder = useBuilderStore(state => state.visiblePageOrder);\n const reportBackgroundColor = usePropStore(state => state.settings?.reportBackgroundColor);\n const selected = visiblePageOrder === order;\n\n const {\n attributes,\n isDragging,\n listeners,\n setNodeRef,\n transform,\n transition,\n } = useSortable({ id });\n\n const itemClickHandler = useCallback(e => {\n setVisiblePageOrder(order);\n onPageClick?.(e);\n }, [onPageClick, setVisiblePageOrder, order]);\n\n const handleContextMenu = useCallback(e => {\n e.preventDefault();\n moreMenuRef.current?.handleOpenMenu(e);\n }, []);\n\n const dragStyle = useMemo(() => {\n const baseStyle = {\n opacity: isDragging ? 0.5 : 1,\n transform: CSS.Transform.toString(transform),\n transition: transition,\n };\n\n return { ...baseStyle, ...style };\n }, [transform, transition, isDragging, style]);\n\n return (\n <div\n ref={setNodeRef}\n className={`slides-navigator-item${selected ? ' selected' : ''}`}\n data-id={page.id}\n data-order={order}\n onClick={itemClickHandler}\n onContextMenu={handleContextMenu}\n onKeyDown={emptyFunction}\n style={dragStyle}\n {...attributes}\n {...listeners}\n >\n <motion.div\n className=\"slides-navigator-item-motion\"\n initial={{ opacity: 0.25, scale: 0.95 }}\n transition={slideRevealTransition}\n viewport={{ amount: 0.2, once: true }}\n whileInView={{ opacity: 1, scale: 1 }}\n >\n <div className=\"slides-navigator-item-order\">{order}</div>\n <div\n className=\"slides-navigator-item-content\"\n >\n <StaticSlideItem\n backgroundColor={page.backgroundColor || reportBackgroundColor || '#fff'}\n items={page.items}\n reportHeight={reportHeight}\n reportWidth={reportWidth}\n />\n </div>\n <SlideItemMoreMenu\n ref={moreMenuRef}\n order={order}\n page={page}\n selected={selected}\n />\n </motion.div>\n </div>\n );\n};\n\nSlideItem.propTypes = {\n id: PropTypes.string.isRequired,\n onPageClick: PropTypes.func,\n order: PropTypes.number,\n page: PropTypes.shape({\n backgroundColor: PropTypes.string,\n id: PropTypes.string.isRequired,\n items: PropTypes.arrayOf(PropTypes.shape({})),\n }),\n reportHeight: PropTypes.number.isRequired,\n reportWidth: PropTypes.number.isRequired,\n style: PropTypes.shape({\n opacity: PropTypes.number,\n transform: PropTypes.string,\n transition: PropTypes.string,\n }),\n};\n\nfunction slideItemPropsAreEqual(prevProps, nextProps) {\n return prevProps.id === nextProps.id\n && prevProps.order === nextProps.order\n && prevProps.page === nextProps.page\n && prevProps.reportHeight === nextProps.reportHeight\n && prevProps.reportWidth === nextProps.reportWidth\n && prevProps.style === nextProps.style\n && prevProps.onPageClick === nextProps.onPageClick;\n}\n\nexport default memo(SlideItem, slideItemPropsAreEqual);\n"],"names":["slideRevealTransition","duration","ease","SlideItem","id","onPageClick","order","page","reportHeight","reportWidth","style","moreMenuRef","useRef","setVisiblePageOrder","useBuilderStore","state","visiblePageOrder","reportBackgroundColor","usePropStore","settings","selected","useSortable","attributes","isDragging","listeners","setNodeRef","transform","transition","itemClickHandler","useCallback","e","handleContextMenu","preventDefault","current","handleOpenMenu","dragStyle","useMemo","baseStyle","opacity","CSS","Transform","toString","_jsx","emptyFunction","_jsxs","motion","scale","amount","once","backgroundColor","items","propTypes","PropTypes","string","isRequired","func","number","shape","arrayOf","slideItemPropsAreEqual","prevProps","nextProps","memo"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var core = require('@dnd-kit/core');
|
|
4
4
|
var PropTypes = require('prop-types');
|
|
5
5
|
var StaticSlideItem = require('./StaticSlideItem.js');
|
|
6
|
+
var PropContext = require('../../../contexts/PropContext.js');
|
|
6
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
8
|
|
|
8
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -24,6 +25,11 @@ var dropAnimation = {
|
|
|
24
25
|
|
|
25
26
|
var SlideItemDragOverlay = function SlideItemDragOverlay(_ref) {
|
|
26
27
|
var activePageData = _ref.activePageData;
|
|
28
|
+
var reportBackgroundColor = PropContext.usePropStore(function (state) {
|
|
29
|
+
var _state$settings;
|
|
30
|
+
|
|
31
|
+
return (_state$settings = state.settings) === null || _state$settings === void 0 ? void 0 : _state$settings.reportBackgroundColor;
|
|
32
|
+
});
|
|
27
33
|
return /*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
|
|
28
34
|
adjustScale: false,
|
|
29
35
|
dropAnimation: dropAnimation,
|
|
@@ -41,7 +47,7 @@ var SlideItemDragOverlay = function SlideItemDragOverlay(_ref) {
|
|
|
41
47
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
42
48
|
className: "slides-navigator-item-content",
|
|
43
49
|
children: /*#__PURE__*/jsxRuntime.jsx(StaticSlideItem, {
|
|
44
|
-
backgroundColor: activePageData.page.backgroundColor,
|
|
50
|
+
backgroundColor: activePageData.page.backgroundColor || reportBackgroundColor || '#fff',
|
|
45
51
|
items: activePageData.page.items,
|
|
46
52
|
reportHeight: activePageData.reportHeight,
|
|
47
53
|
reportWidth: activePageData.reportWidth
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlideItemDragOverlay.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlideItemDragOverlay.js"],"sourcesContent":["import { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport StaticSlideItem from './StaticSlideItem';\n\nconst dropAnimation = {\n duration: 150,\n easing: 'ease-out',\n sideEffects: defaultDropAnimationSideEffects({\n styles: { dragOverlay: { opacity: '0', transform: 'rotate(10deg) scale(1.2)' } },\n }),\n};\n\nconst SlideItemDragOverlay = ({ activePageData }) => {\n return (\n <DragOverlay\n adjustScale={false}\n dropAnimation={dropAnimation}\n style={{ cursor: 'grabbing' }}\n >\n {activePageData ? (\n <div\n className=\"slides-navigator-item\"\n style={{ opacity: 0.5 }}\n >\n <div className=\"slides-navigator-item-order\">{activePageData.page.order}</div>\n <div className=\"slides-navigator-item-content\">\n <StaticSlideItem\n backgroundColor={activePageData.page.backgroundColor}\n items={activePageData.page.items}\n reportHeight={activePageData.reportHeight}\n reportWidth={activePageData.reportWidth}\n />\n </div>\n </div>\n ) : null}\n </DragOverlay>\n );\n};\n\nSlideItemDragOverlay.propTypes = {\n activePageData: PropTypes.shape({\n page: PropTypes.shape({\n backgroundColor: PropTypes.string,\n items: PropTypes.arrayOf(PropTypes.shape({})),\n order: PropTypes.number,\n }),\n reportHeight: PropTypes.number,\n reportWidth: PropTypes.number,\n }),\n};\n\nexport default SlideItemDragOverlay;\n"],"names":["dropAnimation","duration","easing","sideEffects","defaultDropAnimationSideEffects","styles","dragOverlay","opacity","transform","SlideItemDragOverlay","activePageData","_jsx","DragOverlay","cursor","_jsxs","page","order","backgroundColor","items","reportHeight","reportWidth","propTypes","PropTypes","shape","string","arrayOf","number"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SlideItemDragOverlay.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlideItemDragOverlay.js"],"sourcesContent":["import { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport StaticSlideItem from './StaticSlideItem';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst dropAnimation = {\n duration: 150,\n easing: 'ease-out',\n sideEffects: defaultDropAnimationSideEffects({\n styles: { dragOverlay: { opacity: '0', transform: 'rotate(10deg) scale(1.2)' } },\n }),\n};\n\nconst SlideItemDragOverlay = ({ activePageData }) => {\n const reportBackgroundColor = usePropStore(state => state.settings?.reportBackgroundColor);\n\n return (\n <DragOverlay\n adjustScale={false}\n dropAnimation={dropAnimation}\n style={{ cursor: 'grabbing' }}\n >\n {activePageData ? (\n <div\n className=\"slides-navigator-item\"\n style={{ opacity: 0.5 }}\n >\n <div className=\"slides-navigator-item-order\">{activePageData.page.order}</div>\n <div className=\"slides-navigator-item-content\">\n <StaticSlideItem\n backgroundColor={activePageData.page.backgroundColor || reportBackgroundColor || '#fff'}\n items={activePageData.page.items}\n reportHeight={activePageData.reportHeight}\n reportWidth={activePageData.reportWidth}\n />\n </div>\n </div>\n ) : null}\n </DragOverlay>\n );\n};\n\nSlideItemDragOverlay.propTypes = {\n activePageData: PropTypes.shape({\n page: PropTypes.shape({\n backgroundColor: PropTypes.string,\n items: PropTypes.arrayOf(PropTypes.shape({})),\n order: PropTypes.number,\n }),\n reportHeight: PropTypes.number,\n reportWidth: PropTypes.number,\n }),\n};\n\nexport default SlideItemDragOverlay;\n"],"names":["dropAnimation","duration","easing","sideEffects","defaultDropAnimationSideEffects","styles","dragOverlay","opacity","transform","SlideItemDragOverlay","activePageData","reportBackgroundColor","usePropStore","state","settings","_jsx","DragOverlay","cursor","_jsxs","page","order","backgroundColor","items","reportHeight","reportWidth","propTypes","PropTypes","shape","string","arrayOf","number"],"mappings":";;;;;;;;;;;;AAKA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,QAAQ,EAAE,GADU;AAEpBC,EAAAA,MAAM,EAAE,UAFY;AAGpBC,EAAAA,WAAW,EAAEC,oCAA+B,CAAC;AAC3CC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,WAAW,EAAE;AAAEC,QAAAA,OAAO,EAAE,GAAX;AAAgBC,QAAAA,SAAS,EAAE;AAA3B;AAAf;AADmC,GAAD;AAHxB,CAAtB;;IAQMC,oBAAoB,GAAG,SAAvBA,oBAAuB,OAAwB;AAAA,MAArBC,cAAqB,QAArBA,cAAqB;AACnD,MAAMC,qBAAqB,GAAGC,wBAAY,CAAC,UAAAC,KAAK;AAAA;;AAAA,8BAAIA,KAAK,CAACC,QAAV,oDAAI,gBAAgBH,qBAApB;AAAA,GAAN,CAA1C;AAEA,sBACEI,eAACC,gBAAD;AACE,IAAA,WAAW,EAAE,KADf;AAEE,IAAA,aAAa,EAAEhB,aAFjB;AAGE,IAAA,KAAK,EAAE;AAAEiB,MAAAA,MAAM,EAAE;AAAV,KAHT;AAAA,cAKGP,cAAc,gBACbQ;AACE,MAAA,SAAS,EAAC,uBADZ;AAEE,MAAA,KAAK,EAAE;AAAEX,QAAAA,OAAO,EAAE;AAAX,OAFT;AAAA,8BAIEQ;AAAK,QAAA,SAAS,EAAC,6BAAf;AAAA,kBAA8CL,cAAc,CAACS,IAAf,CAAoBC;AAAlE,QAJF,eAKEL;AAAK,QAAA,SAAS,EAAC,+BAAf;AAAA,+BACEA,eAAC,eAAD;AACE,UAAA,eAAe,EAAEL,cAAc,CAACS,IAAf,CAAoBE,eAApB,IAAuCV,qBAAvC,IAAgE,MADnF;AAEE,UAAA,KAAK,EAAED,cAAc,CAACS,IAAf,CAAoBG,KAF7B;AAGE,UAAA,YAAY,EAAEZ,cAAc,CAACa,YAH/B;AAIE,UAAA,WAAW,EAAEb,cAAc,CAACc;AAJ9B;AADF,QALF;AAAA,MADa,GAeX;AApBN,IADF;AAwBD;;AAEDf,oBAAoB,CAACgB,SAArB,GAAiC;AAC/Bf,EAAAA,cAAc,EAAEgB,6BAAS,CAACC,KAAV,CAAgB;AAC9BR,IAAAA,IAAI,EAAEO,6BAAS,CAACC,KAAV,CAAgB;AACpBN,MAAAA,eAAe,EAAEK,6BAAS,CAACE,MADP;AAEpBN,MAAAA,KAAK,EAAEI,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CAAlB,CAFa;AAGpBP,MAAAA,KAAK,EAAEM,6BAAS,CAACI;AAHG,KAAhB,CADwB;AAM9BP,IAAAA,YAAY,EAAEG,6BAAS,CAACI,MANM;AAO9BN,IAAAA,WAAW,EAAEE,6BAAS,CAACI;AAPO,GAAhB;AADe,CAAjC;;;;"}
|
|
@@ -15,8 +15,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
15
|
|
|
16
16
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
17
17
|
|
|
18
|
-
var THUMBNAIL_MAX_WIDTH =
|
|
19
|
-
var THUMBNAIL_MAX_HEIGHT =
|
|
18
|
+
var THUMBNAIL_MAX_WIDTH = 124;
|
|
19
|
+
var THUMBNAIL_MAX_HEIGHT = 88.5;
|
|
20
20
|
var wrapperStyle = {
|
|
21
21
|
height: '100%',
|
|
22
22
|
overflow: 'hidden',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StaticSlideItem.js","sources":["../../../../../src/components/Panels/SlidesNavigator/StaticSlideItem.js"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as classNames from '../../../constants/classNames';\nimport ReportItemRenderer from '../../Builder/ReportItemRenderer';\nimport StaticItem from '../../Preview/StaticItem';\nimport ErrorBoundary from '../../ErrorBoundary/ErrorBoundary';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst THUMBNAIL_MAX_WIDTH =
|
|
1
|
+
{"version":3,"file":"StaticSlideItem.js","sources":["../../../../../src/components/Panels/SlidesNavigator/StaticSlideItem.js"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as classNames from '../../../constants/classNames';\nimport ReportItemRenderer from '../../Builder/ReportItemRenderer';\nimport StaticItem from '../../Preview/StaticItem';\nimport ErrorBoundary from '../../ErrorBoundary/ErrorBoundary';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst THUMBNAIL_MAX_WIDTH = 124;\nconst THUMBNAIL_MAX_HEIGHT = 88.5;\n\nconst wrapperStyle = {\n height: '100%',\n overflow: 'hidden',\n position: 'relative',\n width: '100%',\n};\n\nconst StaticSlideItem = ({\n backgroundColor,\n items = [],\n reportHeight,\n reportWidth,\n}) => {\n const itemAccessor = usePropStore(state => state.itemAccessor);\n const additionalPageItems = usePropStore(state => state.additionalPageItems);\n\n const containerStyle = useMemo(() => {\n const scale = Math.min(\n THUMBNAIL_MAX_WIDTH / reportWidth,\n THUMBNAIL_MAX_HEIGHT / reportHeight,\n );\n\n const scaledWidth = reportWidth * scale;\n const scaledHeight = reportHeight * scale;\n\n return {\n backgroundColor: backgroundColor || '#fff',\n borderRadius: '4px',\n height: reportHeight,\n left: (THUMBNAIL_MAX_WIDTH - scaledWidth) / 2,\n position: 'absolute',\n top: (THUMBNAIL_MAX_HEIGHT - scaledHeight) / 2,\n transform: `scale(${scale})`,\n transformOrigin: '0 0',\n width: reportWidth,\n };\n }, [reportWidth, reportHeight, backgroundColor]);\n\n return (\n <div style={wrapperStyle}>\n <ErrorBoundary\n isStatic={true}\n level=\"page\"\n >\n <div\n className={classNames.pageContainer}\n style={containerStyle}\n >\n <div className=\"jfReport-hider o-hidden f-all p-relative\">\n {items.filter(item => (\n item.isVisible !== undefined\n ? item.isVisible\n : true\n )).map(item => {\n return (\n <StaticItem\n key={item.id}\n item={item}\n >\n <ReportItemRenderer\n item={item}\n >\n {(ReportItem, mergedItem) => (\n <ReportItem\n isThumbnail\n item={mergedItem}\n itemAccessor={itemAccessor}\n />\n )}\n </ReportItemRenderer>\n </StaticItem>\n );\n })}\n {additionalPageItems}\n </div>\n </div>\n </ErrorBoundary>\n </div>\n );\n};\n\nStaticSlideItem.propTypes = {\n backgroundColor: PropTypes.string,\n items: PropTypes.arrayOf(PropTypes.shape({})),\n reportHeight: PropTypes.number.isRequired,\n reportWidth: PropTypes.number.isRequired,\n};\n\nexport default memo(StaticSlideItem);\n"],"names":["THUMBNAIL_MAX_WIDTH","THUMBNAIL_MAX_HEIGHT","wrapperStyle","height","overflow","position","width","StaticSlideItem","backgroundColor","items","reportHeight","reportWidth","itemAccessor","usePropStore","state","additionalPageItems","containerStyle","useMemo","scale","Math","min","scaledWidth","scaledHeight","borderRadius","left","top","transform","transformOrigin","_jsx","classNames","_jsxs","filter","item","isVisible","undefined","map","ReportItem","mergedItem","id","propTypes","PropTypes","string","arrayOf","shape","number","isRequired","memo"],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ import StaticSlideItem from './StaticSlideItem.js';
|
|
|
9
9
|
import SlideItemMoreMenu from './MoreMenu/SlideItemMoreMenu.js';
|
|
10
10
|
import { emptyFunction } from '../../../utils/functions.js';
|
|
11
11
|
import { useBuilderStore } from '../../../contexts/BuilderContext.js';
|
|
12
|
+
import { usePropStore } from '../../../contexts/PropContext.js';
|
|
12
13
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
13
14
|
|
|
14
15
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
@@ -36,6 +37,11 @@ var SlideItem = function SlideItem(_ref) {
|
|
|
36
37
|
var visiblePageOrder = useBuilderStore(function (state) {
|
|
37
38
|
return state.visiblePageOrder;
|
|
38
39
|
});
|
|
40
|
+
var reportBackgroundColor = usePropStore(function (state) {
|
|
41
|
+
var _state$settings;
|
|
42
|
+
|
|
43
|
+
return (_state$settings = state.settings) === null || _state$settings === void 0 ? void 0 : _state$settings.reportBackgroundColor;
|
|
44
|
+
});
|
|
39
45
|
var selected = visiblePageOrder === order;
|
|
40
46
|
|
|
41
47
|
var _useSortable = useSortable({
|
|
@@ -97,7 +103,7 @@ var SlideItem = function SlideItem(_ref) {
|
|
|
97
103
|
}), /*#__PURE__*/jsx("div", {
|
|
98
104
|
className: "slides-navigator-item-content",
|
|
99
105
|
children: /*#__PURE__*/jsx(StaticSlideItem, {
|
|
100
|
-
backgroundColor: page.backgroundColor,
|
|
106
|
+
backgroundColor: page.backgroundColor || reportBackgroundColor || '#fff',
|
|
101
107
|
items: page.items,
|
|
102
108
|
reportHeight: reportHeight,
|
|
103
109
|
reportWidth: reportWidth
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlideItem.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlideItem.js"],"sourcesContent":["import {\n memo, useCallback, useMemo, useRef,\n} from 'react';\nimport { motion } from 'framer-motion';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport PropTypes from 'prop-types';\nimport StaticSlideItem from './StaticSlideItem';\nimport SlideItemMoreMenu from './MoreMenu/SlideItemMoreMenu';\nimport { emptyFunction } from '../../../utils/functions';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\n\nconst slideRevealTransition = {\n duration: 0.25,\n ease: [0.2, 0, 0.2, 1],\n};\n\nconst SlideItem = ({\n id,\n onPageClick,\n order,\n page,\n reportHeight,\n reportWidth,\n style,\n}) => {\n const moreMenuRef = useRef(null);\n const setVisiblePageOrder = useBuilderStore(state => state.setVisiblePageOrder);\n const visiblePageOrder = useBuilderStore(state => state.visiblePageOrder);\n const selected = visiblePageOrder === order;\n\n const {\n attributes,\n isDragging,\n listeners,\n setNodeRef,\n transform,\n transition,\n } = useSortable({ id });\n\n const itemClickHandler = useCallback(e => {\n setVisiblePageOrder(order);\n onPageClick?.(e);\n }, [onPageClick, setVisiblePageOrder, order]);\n\n const handleContextMenu = useCallback(e => {\n e.preventDefault();\n moreMenuRef.current?.handleOpenMenu(e);\n }, []);\n\n const dragStyle = useMemo(() => {\n const baseStyle = {\n opacity: isDragging ? 0.5 : 1,\n transform: CSS.Transform.toString(transform),\n transition: transition,\n };\n\n return { ...baseStyle, ...style };\n }, [transform, transition, isDragging, style]);\n\n return (\n <div\n ref={setNodeRef}\n className={`slides-navigator-item${selected ? ' selected' : ''}`}\n data-id={page.id}\n data-order={order}\n onClick={itemClickHandler}\n onContextMenu={handleContextMenu}\n onKeyDown={emptyFunction}\n style={dragStyle}\n {...attributes}\n {...listeners}\n >\n <motion.div\n className=\"slides-navigator-item-motion\"\n initial={{ opacity: 0.25, scale: 0.95 }}\n transition={slideRevealTransition}\n viewport={{ amount: 0.2, once: true }}\n whileInView={{ opacity: 1, scale: 1 }}\n >\n <div className=\"slides-navigator-item-order\">{order}</div>\n <div\n className=\"slides-navigator-item-content\"\n >\n <StaticSlideItem\n backgroundColor={page.backgroundColor}\n items={page.items}\n reportHeight={reportHeight}\n reportWidth={reportWidth}\n />\n </div>\n <SlideItemMoreMenu\n ref={moreMenuRef}\n order={order}\n page={page}\n selected={selected}\n />\n </motion.div>\n </div>\n );\n};\n\nSlideItem.propTypes = {\n id: PropTypes.string.isRequired,\n onPageClick: PropTypes.func,\n order: PropTypes.number,\n page: PropTypes.shape({\n backgroundColor: PropTypes.string,\n id: PropTypes.string.isRequired,\n items: PropTypes.arrayOf(PropTypes.shape({})),\n }),\n reportHeight: PropTypes.number.isRequired,\n reportWidth: PropTypes.number.isRequired,\n style: PropTypes.shape({\n opacity: PropTypes.number,\n transform: PropTypes.string,\n transition: PropTypes.string,\n }),\n};\n\nfunction slideItemPropsAreEqual(prevProps, nextProps) {\n return prevProps.id === nextProps.id\n && prevProps.order === nextProps.order\n && prevProps.page === nextProps.page\n && prevProps.reportHeight === nextProps.reportHeight\n && prevProps.reportWidth === nextProps.reportWidth\n && prevProps.style === nextProps.style\n && prevProps.onPageClick === nextProps.onPageClick;\n}\n\nexport default memo(SlideItem, slideItemPropsAreEqual);\n"],"names":["slideRevealTransition","duration","ease","SlideItem","id","onPageClick","order","page","reportHeight","reportWidth","style","moreMenuRef","useRef","setVisiblePageOrder","useBuilderStore","state","visiblePageOrder","selected","useSortable","attributes","isDragging","listeners","setNodeRef","transform","transition","itemClickHandler","useCallback","e","handleContextMenu","preventDefault","current","handleOpenMenu","dragStyle","useMemo","baseStyle","opacity","CSS","Transform","toString","_jsx","emptyFunction","_jsxs","scale","amount","once","backgroundColor","items","propTypes","PropTypes","string","isRequired","func","number","shape","arrayOf","slideItemPropsAreEqual","prevProps","nextProps","memo"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SlideItem.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlideItem.js"],"sourcesContent":["import {\n memo, useCallback, useMemo, useRef,\n} from 'react';\nimport { motion } from 'framer-motion';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport PropTypes from 'prop-types';\nimport StaticSlideItem from './StaticSlideItem';\nimport SlideItemMoreMenu from './MoreMenu/SlideItemMoreMenu';\nimport { emptyFunction } from '../../../utils/functions';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst slideRevealTransition = {\n duration: 0.25,\n ease: [0.2, 0, 0.2, 1],\n};\n\nconst SlideItem = ({\n id,\n onPageClick,\n order,\n page,\n reportHeight,\n reportWidth,\n style,\n}) => {\n const moreMenuRef = useRef(null);\n const setVisiblePageOrder = useBuilderStore(state => state.setVisiblePageOrder);\n const visiblePageOrder = useBuilderStore(state => state.visiblePageOrder);\n const reportBackgroundColor = usePropStore(state => state.settings?.reportBackgroundColor);\n const selected = visiblePageOrder === order;\n\n const {\n attributes,\n isDragging,\n listeners,\n setNodeRef,\n transform,\n transition,\n } = useSortable({ id });\n\n const itemClickHandler = useCallback(e => {\n setVisiblePageOrder(order);\n onPageClick?.(e);\n }, [onPageClick, setVisiblePageOrder, order]);\n\n const handleContextMenu = useCallback(e => {\n e.preventDefault();\n moreMenuRef.current?.handleOpenMenu(e);\n }, []);\n\n const dragStyle = useMemo(() => {\n const baseStyle = {\n opacity: isDragging ? 0.5 : 1,\n transform: CSS.Transform.toString(transform),\n transition: transition,\n };\n\n return { ...baseStyle, ...style };\n }, [transform, transition, isDragging, style]);\n\n return (\n <div\n ref={setNodeRef}\n className={`slides-navigator-item${selected ? ' selected' : ''}`}\n data-id={page.id}\n data-order={order}\n onClick={itemClickHandler}\n onContextMenu={handleContextMenu}\n onKeyDown={emptyFunction}\n style={dragStyle}\n {...attributes}\n {...listeners}\n >\n <motion.div\n className=\"slides-navigator-item-motion\"\n initial={{ opacity: 0.25, scale: 0.95 }}\n transition={slideRevealTransition}\n viewport={{ amount: 0.2, once: true }}\n whileInView={{ opacity: 1, scale: 1 }}\n >\n <div className=\"slides-navigator-item-order\">{order}</div>\n <div\n className=\"slides-navigator-item-content\"\n >\n <StaticSlideItem\n backgroundColor={page.backgroundColor || reportBackgroundColor || '#fff'}\n items={page.items}\n reportHeight={reportHeight}\n reportWidth={reportWidth}\n />\n </div>\n <SlideItemMoreMenu\n ref={moreMenuRef}\n order={order}\n page={page}\n selected={selected}\n />\n </motion.div>\n </div>\n );\n};\n\nSlideItem.propTypes = {\n id: PropTypes.string.isRequired,\n onPageClick: PropTypes.func,\n order: PropTypes.number,\n page: PropTypes.shape({\n backgroundColor: PropTypes.string,\n id: PropTypes.string.isRequired,\n items: PropTypes.arrayOf(PropTypes.shape({})),\n }),\n reportHeight: PropTypes.number.isRequired,\n reportWidth: PropTypes.number.isRequired,\n style: PropTypes.shape({\n opacity: PropTypes.number,\n transform: PropTypes.string,\n transition: PropTypes.string,\n }),\n};\n\nfunction slideItemPropsAreEqual(prevProps, nextProps) {\n return prevProps.id === nextProps.id\n && prevProps.order === nextProps.order\n && prevProps.page === nextProps.page\n && prevProps.reportHeight === nextProps.reportHeight\n && prevProps.reportWidth === nextProps.reportWidth\n && prevProps.style === nextProps.style\n && prevProps.onPageClick === nextProps.onPageClick;\n}\n\nexport default memo(SlideItem, slideItemPropsAreEqual);\n"],"names":["slideRevealTransition","duration","ease","SlideItem","id","onPageClick","order","page","reportHeight","reportWidth","style","moreMenuRef","useRef","setVisiblePageOrder","useBuilderStore","state","visiblePageOrder","reportBackgroundColor","usePropStore","settings","selected","useSortable","attributes","isDragging","listeners","setNodeRef","transform","transition","itemClickHandler","useCallback","e","handleContextMenu","preventDefault","current","handleOpenMenu","dragStyle","useMemo","baseStyle","opacity","CSS","Transform","toString","_jsx","emptyFunction","_jsxs","scale","amount","once","backgroundColor","items","propTypes","PropTypes","string","isRequired","func","number","shape","arrayOf","slideItemPropsAreEqual","prevProps","nextProps","memo"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { defaultDropAnimationSideEffects, DragOverlay } from '@dnd-kit/core';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import StaticSlideItem from './StaticSlideItem.js';
|
|
4
|
+
import { usePropStore } from '../../../contexts/PropContext.js';
|
|
4
5
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
6
|
|
|
6
7
|
var dropAnimation = {
|
|
@@ -18,6 +19,11 @@ var dropAnimation = {
|
|
|
18
19
|
|
|
19
20
|
var SlideItemDragOverlay = function SlideItemDragOverlay(_ref) {
|
|
20
21
|
var activePageData = _ref.activePageData;
|
|
22
|
+
var reportBackgroundColor = usePropStore(function (state) {
|
|
23
|
+
var _state$settings;
|
|
24
|
+
|
|
25
|
+
return (_state$settings = state.settings) === null || _state$settings === void 0 ? void 0 : _state$settings.reportBackgroundColor;
|
|
26
|
+
});
|
|
21
27
|
return /*#__PURE__*/jsx(DragOverlay, {
|
|
22
28
|
adjustScale: false,
|
|
23
29
|
dropAnimation: dropAnimation,
|
|
@@ -35,7 +41,7 @@ var SlideItemDragOverlay = function SlideItemDragOverlay(_ref) {
|
|
|
35
41
|
}), /*#__PURE__*/jsx("div", {
|
|
36
42
|
className: "slides-navigator-item-content",
|
|
37
43
|
children: /*#__PURE__*/jsx(StaticSlideItem, {
|
|
38
|
-
backgroundColor: activePageData.page.backgroundColor,
|
|
44
|
+
backgroundColor: activePageData.page.backgroundColor || reportBackgroundColor || '#fff',
|
|
39
45
|
items: activePageData.page.items,
|
|
40
46
|
reportHeight: activePageData.reportHeight,
|
|
41
47
|
reportWidth: activePageData.reportWidth
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlideItemDragOverlay.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlideItemDragOverlay.js"],"sourcesContent":["import { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport StaticSlideItem from './StaticSlideItem';\n\nconst dropAnimation = {\n duration: 150,\n easing: 'ease-out',\n sideEffects: defaultDropAnimationSideEffects({\n styles: { dragOverlay: { opacity: '0', transform: 'rotate(10deg) scale(1.2)' } },\n }),\n};\n\nconst SlideItemDragOverlay = ({ activePageData }) => {\n return (\n <DragOverlay\n adjustScale={false}\n dropAnimation={dropAnimation}\n style={{ cursor: 'grabbing' }}\n >\n {activePageData ? (\n <div\n className=\"slides-navigator-item\"\n style={{ opacity: 0.5 }}\n >\n <div className=\"slides-navigator-item-order\">{activePageData.page.order}</div>\n <div className=\"slides-navigator-item-content\">\n <StaticSlideItem\n backgroundColor={activePageData.page.backgroundColor}\n items={activePageData.page.items}\n reportHeight={activePageData.reportHeight}\n reportWidth={activePageData.reportWidth}\n />\n </div>\n </div>\n ) : null}\n </DragOverlay>\n );\n};\n\nSlideItemDragOverlay.propTypes = {\n activePageData: PropTypes.shape({\n page: PropTypes.shape({\n backgroundColor: PropTypes.string,\n items: PropTypes.arrayOf(PropTypes.shape({})),\n order: PropTypes.number,\n }),\n reportHeight: PropTypes.number,\n reportWidth: PropTypes.number,\n }),\n};\n\nexport default SlideItemDragOverlay;\n"],"names":["dropAnimation","duration","easing","sideEffects","defaultDropAnimationSideEffects","styles","dragOverlay","opacity","transform","SlideItemDragOverlay","activePageData","_jsx","cursor","_jsxs","page","order","backgroundColor","items","reportHeight","reportWidth","propTypes","PropTypes","shape","string","arrayOf","number"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SlideItemDragOverlay.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlideItemDragOverlay.js"],"sourcesContent":["import { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport StaticSlideItem from './StaticSlideItem';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst dropAnimation = {\n duration: 150,\n easing: 'ease-out',\n sideEffects: defaultDropAnimationSideEffects({\n styles: { dragOverlay: { opacity: '0', transform: 'rotate(10deg) scale(1.2)' } },\n }),\n};\n\nconst SlideItemDragOverlay = ({ activePageData }) => {\n const reportBackgroundColor = usePropStore(state => state.settings?.reportBackgroundColor);\n\n return (\n <DragOverlay\n adjustScale={false}\n dropAnimation={dropAnimation}\n style={{ cursor: 'grabbing' }}\n >\n {activePageData ? (\n <div\n className=\"slides-navigator-item\"\n style={{ opacity: 0.5 }}\n >\n <div className=\"slides-navigator-item-order\">{activePageData.page.order}</div>\n <div className=\"slides-navigator-item-content\">\n <StaticSlideItem\n backgroundColor={activePageData.page.backgroundColor || reportBackgroundColor || '#fff'}\n items={activePageData.page.items}\n reportHeight={activePageData.reportHeight}\n reportWidth={activePageData.reportWidth}\n />\n </div>\n </div>\n ) : null}\n </DragOverlay>\n );\n};\n\nSlideItemDragOverlay.propTypes = {\n activePageData: PropTypes.shape({\n page: PropTypes.shape({\n backgroundColor: PropTypes.string,\n items: PropTypes.arrayOf(PropTypes.shape({})),\n order: PropTypes.number,\n }),\n reportHeight: PropTypes.number,\n reportWidth: PropTypes.number,\n }),\n};\n\nexport default SlideItemDragOverlay;\n"],"names":["dropAnimation","duration","easing","sideEffects","defaultDropAnimationSideEffects","styles","dragOverlay","opacity","transform","SlideItemDragOverlay","activePageData","reportBackgroundColor","usePropStore","state","settings","_jsx","cursor","_jsxs","page","order","backgroundColor","items","reportHeight","reportWidth","propTypes","PropTypes","shape","string","arrayOf","number"],"mappings":";;;;;;AAKA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,QAAQ,EAAE,GADU;AAEpBC,EAAAA,MAAM,EAAE,UAFY;AAGpBC,EAAAA,WAAW,EAAEC,+BAA+B,CAAC;AAC3CC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,WAAW,EAAE;AAAEC,QAAAA,OAAO,EAAE,GAAX;AAAgBC,QAAAA,SAAS,EAAE;AAA3B;AAAf;AADmC,GAAD;AAHxB,CAAtB;;IAQMC,oBAAoB,GAAG,SAAvBA,oBAAuB,OAAwB;AAAA,MAArBC,cAAqB,QAArBA,cAAqB;AACnD,MAAMC,qBAAqB,GAAGC,YAAY,CAAC,UAAAC,KAAK;AAAA;;AAAA,8BAAIA,KAAK,CAACC,QAAV,oDAAI,gBAAgBH,qBAApB;AAAA,GAAN,CAA1C;AAEA,sBACEI,IAAC,WAAD;AACE,IAAA,WAAW,EAAE,KADf;AAEE,IAAA,aAAa,EAAEf,aAFjB;AAGE,IAAA,KAAK,EAAE;AAAEgB,MAAAA,MAAM,EAAE;AAAV,KAHT;AAAA,cAKGN,cAAc,gBACbO;AACE,MAAA,SAAS,EAAC,uBADZ;AAEE,MAAA,KAAK,EAAE;AAAEV,QAAAA,OAAO,EAAE;AAAX,OAFT;AAAA,8BAIEQ;AAAK,QAAA,SAAS,EAAC,6BAAf;AAAA,kBAA8CL,cAAc,CAACQ,IAAf,CAAoBC;AAAlE,QAJF,eAKEJ;AAAK,QAAA,SAAS,EAAC,+BAAf;AAAA,+BACEA,IAAC,eAAD;AACE,UAAA,eAAe,EAAEL,cAAc,CAACQ,IAAf,CAAoBE,eAApB,IAAuCT,qBAAvC,IAAgE,MADnF;AAEE,UAAA,KAAK,EAAED,cAAc,CAACQ,IAAf,CAAoBG,KAF7B;AAGE,UAAA,YAAY,EAAEX,cAAc,CAACY,YAH/B;AAIE,UAAA,WAAW,EAAEZ,cAAc,CAACa;AAJ9B;AADF,QALF;AAAA,MADa,GAeX;AApBN,IADF;AAwBD;;AAEDd,oBAAoB,CAACe,SAArB,GAAiC;AAC/Bd,EAAAA,cAAc,EAAEe,SAAS,CAACC,KAAV,CAAgB;AAC9BR,IAAAA,IAAI,EAAEO,SAAS,CAACC,KAAV,CAAgB;AACpBN,MAAAA,eAAe,EAAEK,SAAS,CAACE,MADP;AAEpBN,MAAAA,KAAK,EAAEI,SAAS,CAACG,OAAV,CAAkBH,SAAS,CAACC,KAAV,CAAgB,EAAhB,CAAlB,CAFa;AAGpBP,MAAAA,KAAK,EAAEM,SAAS,CAACI;AAHG,KAAhB,CADwB;AAM9BP,IAAAA,YAAY,EAAEG,SAAS,CAACI,MANM;AAO9BN,IAAAA,WAAW,EAAEE,SAAS,CAACI;AAPO,GAAhB;AADe,CAAjC;;;;"}
|
|
@@ -9,8 +9,8 @@ import ErrorBoundary from '../../ErrorBoundary/ErrorBoundary.js';
|
|
|
9
9
|
import { usePropStore } from '../../../contexts/PropContext.js';
|
|
10
10
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
11
11
|
|
|
12
|
-
var THUMBNAIL_MAX_WIDTH =
|
|
13
|
-
var THUMBNAIL_MAX_HEIGHT =
|
|
12
|
+
var THUMBNAIL_MAX_WIDTH = 124;
|
|
13
|
+
var THUMBNAIL_MAX_HEIGHT = 88.5;
|
|
14
14
|
var wrapperStyle = {
|
|
15
15
|
height: '100%',
|
|
16
16
|
overflow: 'hidden',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StaticSlideItem.js","sources":["../../../../../src/components/Panels/SlidesNavigator/StaticSlideItem.js"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as classNames from '../../../constants/classNames';\nimport ReportItemRenderer from '../../Builder/ReportItemRenderer';\nimport StaticItem from '../../Preview/StaticItem';\nimport ErrorBoundary from '../../ErrorBoundary/ErrorBoundary';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst THUMBNAIL_MAX_WIDTH =
|
|
1
|
+
{"version":3,"file":"StaticSlideItem.js","sources":["../../../../../src/components/Panels/SlidesNavigator/StaticSlideItem.js"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as classNames from '../../../constants/classNames';\nimport ReportItemRenderer from '../../Builder/ReportItemRenderer';\nimport StaticItem from '../../Preview/StaticItem';\nimport ErrorBoundary from '../../ErrorBoundary/ErrorBoundary';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst THUMBNAIL_MAX_WIDTH = 124;\nconst THUMBNAIL_MAX_HEIGHT = 88.5;\n\nconst wrapperStyle = {\n height: '100%',\n overflow: 'hidden',\n position: 'relative',\n width: '100%',\n};\n\nconst StaticSlideItem = ({\n backgroundColor,\n items = [],\n reportHeight,\n reportWidth,\n}) => {\n const itemAccessor = usePropStore(state => state.itemAccessor);\n const additionalPageItems = usePropStore(state => state.additionalPageItems);\n\n const containerStyle = useMemo(() => {\n const scale = Math.min(\n THUMBNAIL_MAX_WIDTH / reportWidth,\n THUMBNAIL_MAX_HEIGHT / reportHeight,\n );\n\n const scaledWidth = reportWidth * scale;\n const scaledHeight = reportHeight * scale;\n\n return {\n backgroundColor: backgroundColor || '#fff',\n borderRadius: '4px',\n height: reportHeight,\n left: (THUMBNAIL_MAX_WIDTH - scaledWidth) / 2,\n position: 'absolute',\n top: (THUMBNAIL_MAX_HEIGHT - scaledHeight) / 2,\n transform: `scale(${scale})`,\n transformOrigin: '0 0',\n width: reportWidth,\n };\n }, [reportWidth, reportHeight, backgroundColor]);\n\n return (\n <div style={wrapperStyle}>\n <ErrorBoundary\n isStatic={true}\n level=\"page\"\n >\n <div\n className={classNames.pageContainer}\n style={containerStyle}\n >\n <div className=\"jfReport-hider o-hidden f-all p-relative\">\n {items.filter(item => (\n item.isVisible !== undefined\n ? item.isVisible\n : true\n )).map(item => {\n return (\n <StaticItem\n key={item.id}\n item={item}\n >\n <ReportItemRenderer\n item={item}\n >\n {(ReportItem, mergedItem) => (\n <ReportItem\n isThumbnail\n item={mergedItem}\n itemAccessor={itemAccessor}\n />\n )}\n </ReportItemRenderer>\n </StaticItem>\n );\n })}\n {additionalPageItems}\n </div>\n </div>\n </ErrorBoundary>\n </div>\n );\n};\n\nStaticSlideItem.propTypes = {\n backgroundColor: PropTypes.string,\n items: PropTypes.arrayOf(PropTypes.shape({})),\n reportHeight: PropTypes.number.isRequired,\n reportWidth: PropTypes.number.isRequired,\n};\n\nexport default memo(StaticSlideItem);\n"],"names":["THUMBNAIL_MAX_WIDTH","THUMBNAIL_MAX_HEIGHT","wrapperStyle","height","overflow","position","width","StaticSlideItem","backgroundColor","items","reportHeight","reportWidth","itemAccessor","usePropStore","state","additionalPageItems","containerStyle","useMemo","scale","Math","min","scaledWidth","scaledHeight","borderRadius","left","top","transform","transformOrigin","_jsx","classNames","_jsxs","filter","item","isVisible","undefined","map","ReportItem","mergedItem","id","propTypes","PropTypes","string","arrayOf","shape","number","isRequired","memo"],"mappings":"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"}
|