@pdfme/ui 1.0.7 → 1.0.10

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 (11) 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/package.json +1 -1
  5. package/src/components/CtlBar/Pager.tsx +10 -2
  6. package/src/components/CtlBar/Zoom.tsx +2 -2
  7. package/src/components/CtlBar/index.tsx +1 -2
  8. package/src/components/Designer/index.tsx +2 -9
  9. package/src/components/Paper.tsx +1 -1
  10. package/src/components/Preview.tsx +19 -21
  11. package/src/components/UnitPager.tsx +8 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pdfme/ui",
3
- "version": "1.0.7",
3
+ "version": "1.0.10",
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
@@ -18,7 +18,7 @@ const CtlBar = (props: Props) => {
18
18
  const { size, pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel } = props;
19
19
  const width = pageNum > 1 ? barWidth : barWidth / 2;
20
20
  return (
21
- <div style={{ position: 'absolute', ...size }}>
21
+ <div style={{ position: 'absolute', ...size, minHeight: size.height }}>
22
22
  <div
23
23
  style={{
24
24
  display: 'flex',
@@ -32,7 +32,6 @@ const CtlBar = (props: Props) => {
32
32
  background: '#777777e6',
33
33
  borderRadius: 2,
34
34
  padding: '0.5rem',
35
- margin: '0 auto',
36
35
  }}
37
36
  >
38
37
  {pageNum > 1 && (
package/src/components/Designer/index.tsx CHANGED
@@ -229,13 +229,7 @@ const TemplateEditor = ({
229
229
  return (
230
230
  <Root size={size} scale={scale}>
231
231
  <CtlBar
232
- size={{
233
- height: pageSizes.reduce(
234
- (acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT * scale) * scale,
235
- 0
236
- ),
237
- width: size.width,
238
- }}
232
+ size={{ ...size }}
239
233
  pageCursor={pageCursor}
240
234
  pageNum={schemasList.length}
241
235
  setPageCursor={(p) => {
@@ -247,8 +241,7 @@ const TemplateEditor = ({
247
241
  zoomLevel={zoomLevel}
248
242
  setZoomLevel={(zoom) => {
249
243
  if (mainRef.current) {
250
- const paper = paperRefs.current[pageCursor];
251
- mainRef.current.scrollLeft = paper.clientHeight / 2;
244
+ mainRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, pageCursor, scale);
252
245
  }
253
246
  setZoomLevel(zoom);
254
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,28 +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
54
- size={{
55
- height: pageSizes.reduce(
56
- (acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT * scale) * scale,
57
- 0
58
- ),
59
- width: size.width,
60
- }}
61
- unitCursor={unitCursor}
62
- unitNum={inputs.length}
63
- setUnitCursor={setUnitCursor}
64
- />
65
63
  <CtlBar
66
- size={{
67
- height: pageSizes.reduce(
68
- (acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT * scale) * scale,
69
- 0
70
- ),
71
- width: size.width,
72
- }}
64
+ size={{ height: pageSizesHeightSum, width: Math.max(size.width, pageSizesMaxWidth) }}
73
65
  pageCursor={pageCursor}
74
66
  pageNum={schemasList.length}
75
67
  setPageCursor={(p) => {
@@ -80,12 +72,18 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
80
72
  zoomLevel={zoomLevel}
81
73
  setZoomLevel={(zoom) => {
82
74
  if (rootRef.current) {
83
- const paper = paperRefs.current[pageCursor];
84
- rootRef.current.scrollLeft = Number(paper.style.width.replace('px', '')) / 2;
75
+ rootRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, pageCursor, scale);
85
76
  }
86
77
  setZoomLevel(zoom);
87
78
  }}
88
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
+
89
87
  <Paper
90
88
  paperRefs={paperRefs}
91
89
  scale={scale}
package/src/components/UnitPager.tsx CHANGED
@@ -6,9 +6,9 @@ import doubleRight from '../assets/icons/double-right.svg';
6
6
  import { I18nContext } from '../contexts';
7
7
  import { Size } from '@pdfme/common';
8
8
 
9
+ const buttonHeight = 38;
9
10
  const buttonWrapStyle: React.CSSProperties = {
10
11
  position: 'sticky',
11
- top: '45%',
12
12
  zIndex: 1,
13
13
  backgroundColor: '#777777bd',
14
14
  borderRadius: 2,
@@ -16,7 +16,9 @@ const buttonWrapStyle: React.CSSProperties = {
16
16
  display: 'flex',
17
17
  alignItems: 'center',
18
18
  justifyContent: 'space-around',
19
+ boxSizing: 'border-box',
19
20
  width: 110,
21
+ height: buttonHeight,
20
22
  };
21
23
 
22
24
  const btnStyle: React.CSSProperties = {
@@ -46,13 +48,13 @@ const UnitPager = ({ size, unitCursor, unitNum, setUnitCursor }: Props) => {
46
48
  position: 'sticky',
47
49
  width: '100%',
48
50
  zIndex: 1,
49
- top: '50%',
51
+ top: `calc(50% - ${buttonHeight / 2}px)`,
50
52
  display: 'flex',
51
53
  alignItems: 'center',
52
54
  }}
53
55
  >
54
56
  {unitCursor > 0 && (
55
- <div style={{ marginLeft: '1rem', ...buttonWrapStyle }}>
57
+ <div style={{ left: '1rem', marginLeft: '1rem', ...buttonWrapStyle }}>
56
58
  <button
57
59
  style={{ paddingLeft: '0.5rem', ...btnStyle }}
58
60
  disabled={unitCursor <= 0}
@@ -73,7 +75,9 @@ const UnitPager = ({ size, unitCursor, unitNum, setUnitCursor }: Props) => {
73
75
  </div>
74
76
  )}
75
77
  {unitCursor + 1 < unitNum && (
76
- <div style={{ marginLeft: 'auto', marginRight: '1rem', ...buttonWrapStyle }}>
78
+ <div
79
+ style={{ right: '1rem', marginLeft: 'auto', marginRight: '1rem', ...buttonWrapStyle }}
80
+ >
77
81
  <strong style={{ color: 'white', fontSize: '0.9rem' }}>
78
82
  {unitCursor + 1}/{unitNum}
79
83
  </strong>