Skip to content

Commit 5a45130

Browse files
ansuman-ghosh-infrrdansuman-ghosh-infrrd
committed
Changed initial scale to reset scale and added minScale prop
1 parent 36b46ee commit 5a45130

7 files changed

Lines changed: 62 additions & 15 deletions

File tree

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,12 @@ React component prop. types:
8888
- Required: **false**
8989
- Description: Maximun scale factor for zoom-in
9090

91+
- `minScale`:
92+
93+
- Type: _Number_
94+
- Required: **false**
95+
- Description: Minimum scale factor for zoom-in
96+
9197
- `rotationAngle`:
9298

9399
- Type: _Number_
@@ -200,6 +206,8 @@ The `navigation` element should accept following properties:
200206
201207
- `maxScale` for maximum zoom
202208
209+
- `minScale` for minimum zoom
210+
203211
- `rotationAngle` for rotation
204212
205213
- `hideZoom` for hiding zoom

‎dist/pdf-viewer-reactjs.js‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,11 @@ ZoomIn.propTypes = {
104104

105105
var ZoomOut = function ZoomOut(_ref) {
106106
var scale = _ref.scale,
107+
minScale = _ref.minScale,
107108
css = _ref.css,
108109
handleZoomOut = _ref.handleZoomOut;
109110

110-
var zoomOutClass = '' + (css ? css : 'btn btn-sm btn-link text-white pr-2') + (scale === 1 ? ' disabled' : '');
111+
var zoomOutClass = '' + (css ? css : 'btn btn-sm btn-link text-white pr-2') + (scale === minScale ? ' disabled' : '');
111112

112113
return React.createElement(
113114
'button',
@@ -127,10 +128,11 @@ ZoomOut.propTypes = {
127128

128129
var ResetZoom = function ResetZoom(_ref) {
129130
var scale = _ref.scale,
131+
defaultScale = _ref.defaultScale,
130132
css = _ref.css,
131133
handleResetZoom = _ref.handleResetZoom;
132134

133-
var resetZoomClass = (css ? css : 'btn btn-sm btn-link text-white px-2') + '\n ' + (scale === 1 ? ' disabled' : '');
135+
var resetZoomClass = (css ? css : 'btn btn-sm btn-link text-white px-2') + '\n ' + (scale === defaultScale ? ' disabled' : '');
134136

135137
return React.createElement(
136138
'button',
@@ -234,7 +236,9 @@ var Navigation = function Navigation(_ref) {
234236
var page = _ref.page,
235237
pages = _ref.pages,
236238
scale = _ref.scale,
239+
defaultScale = _ref.defaultScale,
237240
maxScale = _ref.maxScale,
241+
minScale = _ref.minScale,
238242
rotationAngle = _ref.rotationAngle,
239243
hideZoom = _ref.hideZoom,
240244
hideRotation = _ref.hideRotation,
@@ -263,11 +267,13 @@ var Navigation = function Navigation(_ref) {
263267
{ className: 'btn-group', role: 'group' },
264268
React.createElement(ZoomOut, {
265269
scale: scale,
270+
minScale: minScale,
266271
css: css.zoomOutBtn,
267272
handleZoomOut: handleZoomOut
268273
}),
269274
React.createElement(ResetZoom, {
270275
scale: scale,
276+
defaultScale: defaultScale,
271277
css: css.resetZoomBtn,
272278
handleResetZoom: handleResetZoom
273279
}),
@@ -512,8 +518,10 @@ var PDFViewer = function (_React$Component) {
512518
pages: 0,
513519
page: 1,
514520
scale: 1,
521+
defaultScale: 1,
515522
scaleStep: 1,
516523
maxScale: 3,
524+
minScale: 1,
517525
rotationAngle: 0
518526
}, _this.onDocumentComplete = function (pages) {
519527
_this.setState({
@@ -551,14 +559,14 @@ var PDFViewer = function (_React$Component) {
551559
}
552560
}, _this.handleResetZoom = function () {
553561
_this.setState({
554-
scale: 1
562+
scale: _this.state.defaultScale
555563
});
556564

557565
if (_this.props.onZoom) {
558-
_this.props.onZoom(1);
566+
_this.props.onZoom(_this.state.defaultScale);
559567
}
560568
}, _this.handleZoomOut = function () {
561-
if (_this.state.scale > 1) {
569+
if (_this.state.scale > _this.state.minScale) {
562570
_this.setState({
563571
scale: _this.state.scale - _this.state.scaleStep
564572
});
@@ -607,8 +615,10 @@ var PDFViewer = function (_React$Component) {
607615
pages: null,
608616
page: this.props.page || this.state.page,
609617
scale: this.props.scale || this.state.scale,
618+
defaultScale: this.props.scale || this.state.scale,
610619
scaleStep: this.props.scaleStep || this.state.scaleStep,
611620
maxScale: this.props.maxScale || this.state.maxScale,
621+
minScale: this.props.minScale || this.state.minScale,
612622
rotationAngle: this.props.rotationAngle || this.state.rotationAngle
613623
});
614624
}
@@ -630,7 +640,9 @@ var PDFViewer = function (_React$Component) {
630640
page = _state.page,
631641
pages = _state.pages,
632642
scale = _state.scale,
643+
defaultScale = _state.defaultScale,
633644
maxScale = _state.maxScale,
645+
minScale = _state.minScale,
634646
rotationAngle = _state.rotationAngle;
635647

636648

@@ -654,7 +666,9 @@ var PDFViewer = function (_React$Component) {
654666
page: page,
655667
pages: pages,
656668
scale: scale,
669+
defaultScale: defaultScale,
657670
maxScale: maxScale,
671+
minScale: minScale,
658672
rotationAngle: rotationAngle,
659673
hideZoom: hideZoom,
660674
hideRotation: hideRotation,
@@ -671,7 +685,9 @@ var PDFViewer = function (_React$Component) {
671685
page: page,
672686
pages: pages,
673687
scale: scale,
688+
defaultScale: defaultScale,
674689
maxScale: maxScale,
690+
minScale: minScale,
675691
rotationAngle: rotationAngle,
676692
hideZoom: hideZoom,
677693
hideRotation: hideRotation,
@@ -747,6 +763,7 @@ PDFViewer.propTypes = {
747763
scale: PropTypes.number,
748764
scaleStep: PropTypes.number,
749765
maxScale: PropTypes.number,
766+
minScale: PropTypes.number,
750767
css: PropTypes.string,
751768
canvasCss: PropTypes.string,
752769
rotationAngle: PropTypes.number,

‎example/src/App.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,10 @@ const WithCustomScale = () => (
7272
document={{
7373
base64: sources.base64
7474
}}
75-
scale={0.5}
76-
scaleStep={0.1}
75+
scale={2}
76+
scaleStep={0.5}
7777
maxScale={5}
78+
minScale={0.5}
7879
/>
7980
</div>
8081
</div>

‎src/Navigation/ResetZoom.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33

4-
const ResetZoom = ({ scale, css, handleResetZoom }) => {
4+
const ResetZoom = ({ scale, defaultScale, css, handleResetZoom }) => {
55
const resetZoomClass = `${css ? css : 'btn btn-sm btn-link text-white px-2'}
6-
${scale === 1 ? ' disabled' : ''}`;
6+
${scale === defaultScale ? ' disabled' : ''}`;
77

88
return (
99
<button

‎src/Navigation/ZoomOut.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33

4-
const ZoomOut = ({ scale, css, handleZoomOut }) => {
4+
const ZoomOut = ({ scale, minScale, css, handleZoomOut }) => {
55
const zoomOutClass = `${css ? css : 'btn btn-sm btn-link text-white pr-2'}${
6-
scale === 1 ? ' disabled' : ''
6+
scale === minScale ? ' disabled' : ''
77
}`;
88

99
return (

‎src/Navigation/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ const Navigation = ({
1414
page,
1515
pages,
1616
scale,
17+
defaultScale,
1718
maxScale,
19+
minScale,
1820
rotationAngle,
1921
hideZoom,
2022
hideRotation,
@@ -43,11 +45,13 @@ const Navigation = ({
4345
<div className="btn-group" role="group">
4446
<ZoomOut
4547
scale={scale}
48+
minScale={minScale}
4649
css={css.zoomOutBtn}
4750
handleZoomOut={handleZoomOut}
4851
/>
4952
<ResetZoom
5053
scale={scale}
54+
defaultScale={defaultScale}
5155
css={css.resetZoomBtn}
5256
handleResetZoom={handleResetZoom}
5357
/>

‎src/index.js‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,10 @@ class PDFViewer extends React.Component {
1414
pages: 0,
1515
page: 1,
1616
scale: 1,
17+
defaultScale: 1,
1718
scaleStep: 1,
1819
maxScale: 3,
20+
minScale: 1,
1921
rotationAngle: 0
2022
};
2123

@@ -24,8 +26,10 @@ class PDFViewer extends React.Component {
2426
pages: null,
2527
page: this.props.page || this.state.page,
2628
scale: this.props.scale || this.state.scale,
29+
defaultScale: this.props.scale || this.state.scale,
2730
scaleStep: this.props.scaleStep || this.state.scaleStep,
2831
maxScale: this.props.maxScale || this.state.maxScale,
32+
minScale: this.props.minScale || this.state.minScale,
2933
rotationAngle: this.props.rotationAngle || this.state.rotationAngle
3034
});
3135
}
@@ -74,16 +78,16 @@ class PDFViewer extends React.Component {
7478

7579
handleResetZoom = () => {
7680
this.setState({
77-
scale: 1
81+
scale: this.state.defaultScale
7882
});
7983

8084
if (this.props.onZoom) {
81-
this.props.onZoom(1);
85+
this.props.onZoom(this.state.defaultScale);
8286
}
8387
};
8488

8589
handleZoomOut = () => {
86-
if (this.state.scale > 1) {
90+
if (this.state.scale > this.state.minScale) {
8791
this.setState({
8892
scale: this.state.scale - this.state.scaleStep
8993
});
@@ -147,7 +151,15 @@ class PDFViewer extends React.Component {
147151
onDocumentClick
148152
} = this.props;
149153

150-
const { page, pages, scale, maxScale, rotationAngle } = this.state;
154+
const {
155+
page,
156+
pages,
157+
scale,
158+
defaultScale,
159+
maxScale,
160+
minScale,
161+
rotationAngle
162+
} = this.state;
151163

152164
const NavigationElement = navigation;
153165

@@ -174,7 +186,9 @@ class PDFViewer extends React.Component {
174186
page={page}
175187
pages={pages}
176188
scale={scale}
189+
defaultScale={defaultScale}
177190
maxScale={maxScale}
191+
minScale={minScale}
178192
rotationAngle={rotationAngle}
179193
hideZoom={hideZoom}
180194
hideRotation={hideRotation}
@@ -193,7 +207,9 @@ class PDFViewer extends React.Component {
193207
page={page}
194208
pages={pages}
195209
scale={scale}
210+
defaultScale={defaultScale}
196211
maxScale={maxScale}
212+
minScale={minScale}
197213
rotationAngle={rotationAngle}
198214
hideZoom={hideZoom}
199215
hideRotation={hideRotation}
@@ -256,6 +272,7 @@ PDFViewer.propTypes = {
256272
scale: PropTypes.number,
257273
scaleStep: PropTypes.number,
258274
maxScale: PropTypes.number,
275+
minScale: PropTypes.number,
259276
css: PropTypes.string,
260277
canvasCss: PropTypes.string,
261278
rotationAngle: PropTypes.number,

0 commit comments

Comments
 (0)