@pdfme/ui 1.0.6 → 1.0.7

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 (10) 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/index.tsx +28 -24
  8. package/src/components/Designer/index.tsx +7 -0
  9. package/src/components/Preview.tsx +19 -1
  10. package/src/components/UnitPager.tsx +57 -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.7",
4
4
  "author": "hand-dot",
5
5
  "license": "MIT",
6
6
  "keywords": [
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,34 @@ 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 }}>
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
+ margin: '0 auto',
36
+ }}
37
+ >
38
+ {pageNum > 1 && (
39
+ <>
40
+ <Pager pageCursor={pageCursor} pageNum={pageNum} setPageCursor={setPageCursor} />
41
+ <strong style={{ color: 'white', fontSize: '0.9rem', padding: 0 }}>|</strong>
42
+ </>
43
+ )}
44
+ <Zoom zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
45
+ </div>
42
46
  </div>
43
47
  );
44
48
  };
package/src/components/Designer/index.tsx CHANGED
@@ -229,6 +229,13 @@ 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
239
  pageCursor={pageCursor}
233
240
  pageNum={schemasList.length}
234
241
  setPageCursor={(p) => {
package/src/components/Preview.tsx CHANGED
@@ -50,8 +50,26 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
50
50
 
51
51
  return (
52
52
  <Root ref={rootRef} size={size} scale={scale}>
53
- <UnitPager unitCursor={unitCursor} unitNum={inputs.length} setUnitCursor={setUnitCursor} />
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
+ />
54
65
  <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
+ }}
55
73
  pageCursor={pageCursor}
56
74
  pageNum={schemasList.length}
57
75
  setPageCursor={(p) => {
package/src/components/UnitPager.tsx CHANGED
@@ -4,6 +4,7 @@ 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
 
8
9
  const buttonWrapStyle: React.CSSProperties = {
9
10
  position: 'sticky',
@@ -27,69 +28,72 @@ const btnStyle: React.CSSProperties = {
27
28
  };
28
29
 
29
30
  type Props = {
31
+ size: Size;
30
32
  unitCursor: number;
31
33
  unitNum: number;
32
34
  setUnitCursor: (page: number) => void;
33
35
  };
34
36
 
35
- const UnitPager = ({ unitCursor, unitNum, setUnitCursor }: Props) => {
37
+ const UnitPager = ({ size, unitCursor, unitNum, setUnitCursor }: Props) => {
36
38
  const i18n = useContext(I18nContext);
37
39
 
38
40
  if (unitNum <= 1) return <></>;
39
41
 
40
42
  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)}
57
- >
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
- )}
43
+ <div style={{ position: 'absolute', ...size }}>
44
+ <div
45
+ style={{
46
+ position: 'sticky',
47
+ width: '100%',
48
+ zIndex: 1,
49
+ top: '50%',
50
+ display: 'flex',
51
+ alignItems: 'center',
52
+ }}
53
+ >
54
+ {unitCursor > 0 && (
55
+ <div style={{ marginLeft: '1rem', ...buttonWrapStyle }}>
56
+ <button
57
+ style={{ paddingLeft: '0.5rem', ...btnStyle }}
58
+ disabled={unitCursor <= 0}
59
+ onClick={() => setUnitCursor(0)}
60
+ >
61
+ <img src={doubleLeft} alt={i18n('goToFirst')} style={{ width: 20 }} />
62
+ </button>
63
+ <button
64
+ style={{ paddingLeft: '0.5rem', ...btnStyle }}
65
+ disabled={unitCursor <= 0}
66
+ onClick={() => setUnitCursor(unitCursor - 1)}
67
+ >
68
+ <img src={left} alt={i18n('goToPrevious')} style={{ width: 20 }} />
69
+ </button>
70
+ <strong style={{ color: 'white', fontSize: '0.9rem' }}>
71
+ {unitCursor + 1}/{unitNum}
72
+ </strong>
73
+ </div>
74
+ )}
75
+ {unitCursor + 1 < unitNum && (
76
+ <div style={{ marginLeft: 'auto', marginRight: '1rem', ...buttonWrapStyle }}>
77
+ <strong style={{ color: 'white', fontSize: '0.9rem' }}>
78
+ {unitCursor + 1}/{unitNum}
79
+ </strong>
80
+ <button
81
+ style={{ paddingRight: '0.5rem', ...btnStyle }}
82
+ disabled={unitCursor + 1 >= unitNum}
83
+ onClick={() => setUnitCursor(unitCursor + 1)}
84
+ >
85
+ <img src={right} alt={i18n('goToNext')} style={{ width: 20 }} />
86
+ </button>
87
+ <button
88
+ style={{ paddingRight: '0.5rem', ...btnStyle }}
89
+ disabled={unitCursor + 1 >= unitNum}
90
+ onClick={() => setUnitCursor(unitNum - 1)}
91
+ >
92
+ <img src={doubleRight} alt={i18n('goToFirst')} style={{ width: 20 }} />
93
+ </button>
94
+ </div>
95
+ )}
96
+ </div>
93
97
  </div>
94
98
  );
95
99
  };