@pdfme/ui 1.0.6 → 1.0.9

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.
Files changed (13) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.LICENSE.txt +1 -1
  3. package/dist/index.js.map +1 -1
  4. package/dist/types/components/CtlBar/index.d.ts +2 -0
  5. package/dist/types/components/UnitPager.d.ts +3 -1
  6. package/package.json +1 -1
  7. package/src/components/CtlBar/Pager.tsx +10 -2
  8. package/src/components/CtlBar/Zoom.tsx +2 -2
  9. package/src/components/CtlBar/index.tsx +27 -24
  10. package/src/components/Designer/index.tsx +2 -2
  11. package/src/components/Paper.tsx +1 -1
  12. package/src/components/Preview.tsx +19 -3
  13. package/src/components/UnitPager.tsx +61 -53
package/dist/types/components/CtlBar/index.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { Size } from '@pdfme/common';
1
2
  declare type Props = {
3
+ size: Size;
2
4
  pageCursor: number;
3
5
  pageNum: number;
4
6
  setPageCursor: (page: number) => void;
package/dist/types/components/UnitPager.d.ts CHANGED
@@ -1,7 +1,9 @@
1
+ import { Size } from '@pdfme/common';
1
2
  declare type Props = {
3
+ size: Size;
2
4
  unitCursor: number;
3
5
  unitNum: number;
4
6
  setUnitCursor: (page: number) => void;
5
7
  };
6
- declare const UnitPager: ({ unitCursor, unitNum, setUnitCursor }: Props) => JSX.Element;
8
+ declare const UnitPager: ({ size, unitCursor, unitNum, setUnitCursor }: Props) => JSX.Element;
7
9
  export default UnitPager;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pdfme/ui",
3
- "version": "1.0.6",
3
+ "version": "1.0.9",
4
4
  "author": "hand-dot",
5
5
  "license": "MIT",
6
6
  "keywords": [
package/src/components/CtlBar/Pager.tsx CHANGED
@@ -29,7 +29,11 @@ const Pager = ({ pageCursor, pageNum, setPageCursor }: Props) => {
29
29
  }}
30
30
  >
31
31
  <button
32
- style={{ paddingLeft: '0.5rem', ...btnStyle }}
32
+ style={{
33
+ paddingLeft: '0.5rem',
34
+ ...btnStyle,
35
+ cursor: pageCursor <= 0 ? 'not-allowed' : 'pointer',
36
+ }}
33
37
  disabled={pageCursor <= 0}
34
38
  onClick={() => setPageCursor(pageCursor - 1)}
35
39
  >
@@ -39,7 +43,11 @@ const Pager = ({ pageCursor, pageNum, setPageCursor }: Props) => {
39
43
  {pageCursor + 1}/{pageNum}
40
44
  </strong>
41
45
  <button
42
- style={{ paddingRight: '0.5rem', ...btnStyle }}
46
+ style={{
47
+ paddingRight: '0.5rem',
48
+ ...btnStyle,
49
+ cursor: pageCursor + 1 >= pageNum ? 'not-allowed' : 'pointer',
50
+ }}
43
51
  disabled={pageCursor + 1 >= pageNum}
44
52
  onClick={() => setPageCursor(pageCursor + 1)}
45
53
  >
package/src/components/CtlBar/Zoom.tsx CHANGED
@@ -12,8 +12,8 @@ const btnStyle: React.CSSProperties = {
12
12
  };
13
13
 
14
14
  const zoomStep = 0.25;
15
- const maxZoom = 3;
16
- const minZoom = 0;
15
+ const maxZoom = 2;
16
+ const minZoom = 0.25;
17
17
 
18
18
  type Props = {
19
19
  zoomLevel: number;
package/src/components/CtlBar/index.tsx CHANGED
@@ -1,8 +1,10 @@
1
1
  import React from 'react';
2
2
  import Pager from './Pager';
3
3
  import Zoom from './Zoom';
4
+ import { Size } from '@pdfme/common';
4
5
 
5
6
  type Props = {
7
+ size: Size;
6
8
  pageCursor: number;
7
9
  pageNum: number;
8
10
  setPageCursor: (page: number) => void;
@@ -13,32 +15,33 @@ type Props = {
13
15
  const barWidth = 220;
14
16
 
15
17
  const CtlBar = (props: Props) => {
16
- const { pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel } = props;
18
+ const { size, pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel } = props;
17
19
  const width = pageNum > 1 ? barWidth : barWidth / 2;
18
20
  return (
19
- <div
20
- style={{
21
- display: 'flex',
22
- alignItems: 'center',
23
- justifyContent: 'center',
24
- position: 'fixed',
25
- zIndex: 1,
26
- top: '90%',
27
- left: `calc(50% - ${width / 2}px)`,
28
- width,
29
- background: '#777777e6',
30
- borderRadius: 2,
31
- padding: '0.5rem',
32
- margin: '0 auto',
33
- }}
34
- >
35
- {pageNum > 1 && (
36
- <>
37
- <Pager pageCursor={pageCursor} pageNum={pageNum} setPageCursor={setPageCursor} />
38
- <strong style={{ color: 'white', fontSize: '0.9rem', padding: 0 }}>|</strong>
39
- </>
40
- )}
41
- <Zoom zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
21
+ <div style={{ position: 'absolute', ...size, minHeight: size.width }}>
22
+ <div
23
+ style={{
24
+ display: 'flex',
25
+ alignItems: 'center',
26
+ justifyContent: 'center',
27
+ position: 'sticky',
28
+ zIndex: 1,
29
+ top: '90%',
30
+ left: `calc(50% - ${width / 2}px)`,
31
+ width,
32
+ background: '#777777e6',
33
+ borderRadius: 2,
34
+ padding: '0.5rem',
35
+ }}
36
+ >
37
+ {pageNum > 1 && (
38
+ <>
39
+ <Pager pageCursor={pageCursor} pageNum={pageNum} setPageCursor={setPageCursor} />
40
+ <strong style={{ color: 'white', fontSize: '0.9rem', padding: 0 }}>|</strong>
41
+ </>
42
+ )}
43
+ <Zoom zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
44
+ </div>
42
45
  </div>
43
46
  );
44
47
  };
package/src/components/Designer/index.tsx CHANGED
@@ -229,6 +229,7 @@ const TemplateEditor = ({
229
229
  return (
230
230
  <Root size={size} scale={scale}>
231
231
  <CtlBar
232
+ size={{ ...size }}
232
233
  pageCursor={pageCursor}
233
234
  pageNum={schemasList.length}
234
235
  setPageCursor={(p) => {
@@ -240,8 +241,7 @@ const TemplateEditor = ({
240
241
  zoomLevel={zoomLevel}
241
242
  setZoomLevel={(zoom) => {
242
243
  if (mainRef.current) {
243
- const paper = paperRefs.current[pageCursor];
244
- mainRef.current.scrollLeft = paper.clientHeight / 2;
244
+ mainRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, pageCursor, scale);
245
245
  }
246
246
  setZoomLevel(zoom);
247
247
  }}
package/src/components/Paper.tsx CHANGED
@@ -28,7 +28,7 @@ const Paper = (porps: {
28
28
  style={{
29
29
  transform: `scale(${scale})`,
30
30
  transformOrigin: size.width <= topPageWidth * ZOOM * scale ? `left top` : `center top`,
31
- height: size.height,
31
+ ...size,
32
32
  }}
33
33
  >
34
34
  {backgrounds.map((background, paperIndex) => {
package/src/components/Preview.tsx CHANGED
@@ -48,10 +48,20 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
48
48
  return <Error size={size} error={error} />;
49
49
  }
50
50
 
51
+ const pageSizesHeightSum = pageSizes.reduce(
52
+ (acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT * scale) * scale,
53
+ 0
54
+ );
55
+
56
+ const pageSizesMaxWidth = pageSizes.reduce(
57
+ (acc, cur) => Math.max(acc, cur.height * ZOOM * scale),
58
+ 0
59
+ );
60
+
51
61
  return (
52
62
  <Root ref={rootRef} size={size} scale={scale}>
53
- <UnitPager unitCursor={unitCursor} unitNum={inputs.length} setUnitCursor={setUnitCursor} />
54
63
  <CtlBar
64
+ size={{ height: pageSizesHeightSum, width: Math.max(size.width, pageSizesMaxWidth) }}
55
65
  pageCursor={pageCursor}
56
66
  pageNum={schemasList.length}
57
67
  setPageCursor={(p) => {
@@ -62,12 +72,18 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
62
72
  zoomLevel={zoomLevel}
63
73
  setZoomLevel={(zoom) => {
64
74
  if (rootRef.current) {
65
- const paper = paperRefs.current[pageCursor];
66
- rootRef.current.scrollLeft = Number(paper.style.width.replace('px', '')) / 2;
75
+ rootRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, pageCursor, scale);
67
76
  }
68
77
  setZoomLevel(zoom);
69
78
  }}
70
79
  />
80
+ <UnitPager
81
+ size={{ height: pageSizesHeightSum, width: Math.max(size.width, pageSizesMaxWidth) }}
82
+ unitCursor={unitCursor}
83
+ unitNum={inputs.length}
84
+ setUnitCursor={setUnitCursor}
85
+ />
86
+
71
87
  <Paper
72
88
  paperRefs={paperRefs}
73
89
  scale={scale}
package/src/components/UnitPager.tsx CHANGED
@@ -4,10 +4,11 @@ import right from '../assets/icons/right.svg';
4
4
  import doubleLeft from '../assets/icons/double-left.svg';
5
5
  import doubleRight from '../assets/icons/double-right.svg';
6
6
  import { I18nContext } from '../contexts';
7
+ import { Size } from '@pdfme/common';
7
8
 
9
+ const buttonHeight = 38;
8
10
  const buttonWrapStyle: React.CSSProperties = {
9
11
  position: 'sticky',
10
- top: '45%',
11
12
  zIndex: 1,
12
13
  backgroundColor: '#777777bd',
13
14
  borderRadius: 2,
@@ -15,7 +16,9 @@ const buttonWrapStyle: React.CSSProperties = {
15
16
  display: 'flex',
16
17
  alignItems: 'center',
17
18
  justifyContent: 'space-around',
19
+ boxSizing: 'border-box',
18
20
  width: 110,
21
+ height: buttonHeight,
19
22
  };
20
23
 
21
24
  const btnStyle: React.CSSProperties = {
@@ -27,69 +30,74 @@ const btnStyle: React.CSSProperties = {
27
30
  };
28
31
 
29
32
  type Props = {
33
+ size: Size;
30
34
  unitCursor: number;
31
35
  unitNum: number;
32
36
  setUnitCursor: (page: number) => void;
33
37
  };
34
38
 
35
- const UnitPager = ({ unitCursor, unitNum, setUnitCursor }: Props) => {
39
+ const UnitPager = ({ size, unitCursor, unitNum, setUnitCursor }: Props) => {
36
40
  const i18n = useContext(I18nContext);
37
41
 
38
42
  if (unitNum <= 1) return <></>;
39
43
 
40
44
  return (
41
- <div
42
- style={{
43
- position: 'fixed',
44
- width: '100%',
45
- zIndex: 1,
46
- top: '50%',
47
- display: 'flex',
48
- alignItems: 'center',
49
- }}
50
- >
51
- {unitCursor > 0 && (
52
- <div style={{ marginLeft: '1rem', ...buttonWrapStyle }}>
53
- <button
54
- style={{ paddingLeft: '0.5rem', ...btnStyle }}
55
- disabled={unitCursor <= 0}
56
- onClick={() => setUnitCursor(0)}
45
+ <div style={{ position: 'absolute', ...size }}>
46
+ <div
47
+ style={{
48
+ position: 'sticky',
49
+ width: '100%',
50
+ zIndex: 1,
51
+ top: `calc(50% - ${buttonHeight / 2}px)`,
52
+ display: 'flex',
53
+ alignItems: 'center',
54
+ }}
55
+ >
56
+ {unitCursor > 0 && (
57
+ <div style={{ left: '1rem', marginLeft: '1rem', ...buttonWrapStyle }}>
58
+ <button
59
+ style={{ paddingLeft: '0.5rem', ...btnStyle }}
60
+ disabled={unitCursor <= 0}
61
+ onClick={() => setUnitCursor(0)}
62
+ >
63
+ <img src={doubleLeft} alt={i18n('goToFirst')} style={{ width: 20 }} />
64
+ </button>
65
+ <button
66
+ style={{ paddingLeft: '0.5rem', ...btnStyle }}
67
+ disabled={unitCursor <= 0}
68
+ onClick={() => setUnitCursor(unitCursor - 1)}
69
+ >
70
+ <img src={left} alt={i18n('goToPrevious')} style={{ width: 20 }} />
71
+ </button>
72
+ <strong style={{ color: 'white', fontSize: '0.9rem' }}>
73
+ {unitCursor + 1}/{unitNum}
74
+ </strong>
75
+ </div>
76
+ )}
77
+ {unitCursor + 1 < unitNum && (
78
+ <div
79
+ style={{ right: '1rem', marginLeft: 'auto', marginRight: '1rem', ...buttonWrapStyle }}
57
80
  >
58
- <img src={doubleLeft} alt={i18n('goToFirst')} style={{ width: 20 }} />
59
- </button>
60
- <button
61
- style={{ paddingLeft: '0.5rem', ...btnStyle }}
62
- disabled={unitCursor <= 0}
63
- onClick={() => setUnitCursor(unitCursor - 1)}
64
- >
65
- <img src={left} alt={i18n('goToPrevious')} style={{ width: 20 }} />
66
- </button>
67
- <strong style={{ color: 'white', fontSize: '0.9rem' }}>
68
- {unitCursor + 1}/{unitNum}
69
- </strong>
70
- </div>
71
- )}
72
- {unitCursor + 1 < unitNum && (
73
- <div style={{ marginLeft: 'auto', marginRight: '1rem', ...buttonWrapStyle }}>
74
- <strong style={{ color: 'white', fontSize: '0.9rem' }}>
75
- {unitCursor + 1}/{unitNum}
76
- </strong>
77
- <button
78
- style={{ paddingRight: '0.5rem', ...btnStyle }}
79
- disabled={unitCursor + 1 >= unitNum}
80
- onClick={() => setUnitCursor(unitCursor + 1)}
81
- >
82
- <img src={right} alt={i18n('goToNext')} style={{ width: 20 }} />
83
- </button>
84
- <button
85
- style={{ paddingRight: '0.5rem', ...btnStyle }}
86
- disabled={unitCursor + 1 >= unitNum}
87
- onClick={() => setUnitCursor(unitNum - 1)}
88
- >
89
- <img src={doubleRight} alt={i18n('goToFirst')} style={{ width: 20 }} />
90
- </button>
91
- </div>
92
- )}
81
+ <strong style={{ color: 'white', fontSize: '0.9rem' }}>
82
+ {unitCursor + 1}/{unitNum}
83
+ </strong>
84
+ <button
85
+ style={{ paddingRight: '0.5rem', ...btnStyle }}
86
+ disabled={unitCursor + 1 >= unitNum}
87
+ onClick={() => setUnitCursor(unitCursor + 1)}
88
+ >
89
+ <img src={right} alt={i18n('goToNext')} style={{ width: 20 }} />
90
+ </button>
91
+ <button
92
+ style={{ paddingRight: '0.5rem', ...btnStyle }}
93
+ disabled={unitCursor + 1 >= unitNum}
94
+ onClick={() => setUnitCursor(unitNum - 1)}
95
+ >
96
+ <img src={doubleRight} alt={i18n('goToFirst')} style={{ width: 20 }} />
97
+ </button>
98
+ </div>
99
+ )}
100
+ </div>
93
101
  </div>
94
102
  );
95
103
  };