@performant-software/semantic-components 1.1.3-beta.8 → 1.1.4-beta.2

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 (8) hide show
  1. package/build/index.js +1 -1
  2. package/build/index.js.map +1 -1
  3. package/package.json +2 -2
  4. package/src/components/LazyDocument.js +30 -7
  5. package/src/components/ViewPDFButton.js +68 -0
  6. package/src/i18n/en.json +3 -2
  7. package/types/components/LazyDocument.js.flow +30 -7
  8. package/types/components/ViewPDFButton.js.flow +68 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@performant-software/semantic-components",
3
- "version": "1.1.3-beta.8",
3
+ "version": "1.1.4-beta.2",
4
4
  "description": "A package of shared components based on the Semantic UI Framework.",
5
5
  "license": "MIT",
6
6
  "main": "./build/index.js",
@@ -12,7 +12,7 @@
12
12
  "build": "webpack --mode production && flow-copy-source -v src types"
13
13
  },
14
14
  "dependencies": {
15
- "@performant-software/shared-components": "^1.1.3-beta.8",
15
+ "@performant-software/shared-components": "^1.1.4-beta.2",
16
16
  "@react-google-maps/api": "^2.8.1",
17
17
  "axios": "^0.26.1",
18
18
  "i18next": "^19.4.4",
package/src/components/LazyDocument.js CHANGED
@@ -3,6 +3,7 @@
3
3
  import React, { useCallback, useState, type Node } from 'react';
4
4
  import { pdfjs, Document, Page } from 'react-pdf';
5
5
  import {
6
+ Button,
6
7
  Dimmer,
7
8
  Icon,
8
9
  Image,
@@ -26,6 +27,8 @@ type Props = {
26
27
  image?: any,
27
28
  pdf?: boolean,
28
29
  preview?: ?string,
30
+ view?: Boolean,
31
+ view_url?: String,
29
32
  size?: string,
30
33
  src?: string
31
34
  };
@@ -87,13 +90,13 @@ const LazyDocument = (props: Props) => {
87
90
  onMouseEnter={() => setDimmer(true)}
88
91
  onMouseLeave={() => setDimmer(false)}
89
92
  >
90
- { !loaded && (
93
+ {!loaded && (
91
94
  <LazyLoader
92
95
  active
93
96
  size={props.size}
94
97
  />
95
98
  )}
96
- { !error && props.preview && (
99
+ {!error && props.preview && (
97
100
  <Image
98
101
  {...props.image}
99
102
  className={getClassNames()}
@@ -109,7 +112,7 @@ const LazyDocument = (props: Props) => {
109
112
  size={props.size}
110
113
  />
111
114
  )}
112
- { !error && loaded && !props.preview && props.src && props.pdf && (
115
+ {!error && loaded && !props.preview && props.src && props.pdf && (
113
116
  <Image
114
117
  {...props.image}
115
118
  className={getClassNames()}
@@ -125,7 +128,27 @@ const LazyDocument = (props: Props) => {
125
128
  </Document>
126
129
  </Image>
127
130
  )}
128
- { (error || (!props.preview && !(props.src && props.pdf))) && (
131
+ {!error && loaded && props.view && props.view_url && props.pdf && (
132
+ <Image
133
+ {...props.image}
134
+ className={getClassNames()}
135
+ onError={() => {
136
+ setError(true);
137
+ setLoaded(true);
138
+ }}
139
+ onLoad={() => {
140
+ setError(false);
141
+ setLoaded(true);
142
+ }}
143
+ src={props.preview}
144
+ size={props.size}
145
+ >
146
+ <Button>
147
+ View PDF
148
+ </Button>
149
+ </Image>
150
+ )}
151
+ {(error || (!props.preview && !(props.src && props.pdf))) && (
129
152
  <Image
130
153
  {...props.image}
131
154
  className={getClassNames('placeholder-image')}
@@ -137,20 +160,20 @@ const LazyDocument = (props: Props) => {
137
160
  />
138
161
  </Image>
139
162
  )}
140
- { (props.download || props.src || props.children) && props.dimmable && (
163
+ {(props.download || props.src || props.children) && props.dimmable && (
141
164
  <Dimmer
142
165
  active={dimmer}
143
166
  >
144
167
  <div
145
168
  className='buttons'
146
169
  >
147
- { props.download && (
170
+ {props.download && (
148
171
  <DownloadButton
149
172
  primary
150
173
  url={props.download || props.src}
151
174
  />
152
175
  )}
153
- { props.children }
176
+ {props.children}
154
177
  </div>
155
178
  </Dimmer>
156
179
  )}
package/src/components/ViewPDFButton.js ADDED
@@ -0,0 +1,68 @@
1
+ // @flow
2
+
3
+ import React, { useMemo } from 'react';
4
+ import { Icon, Button } from 'semantic-ui-react';
5
+ import i18n from '../i18n/i18n';
6
+
7
+ type Props = {
8
+ basic?: boolean,
9
+ className?: string,
10
+ color?: string,
11
+ compact?: boolean,
12
+ primary?: boolean,
13
+ size?: string,
14
+ secondary?: boolean,
15
+ url: string,
16
+ };
17
+
18
+ const ViewPDFButton = (props: Props) => {
19
+ /**
20
+ * Sets the appropriate class names based on the formatting props.
21
+ *
22
+ * @type {string}
23
+ */
24
+ const className = useMemo(() => {
25
+ const classNames = ['ui', 'button'];
26
+
27
+ if (props.basic) {
28
+ classNames.push('basic');
29
+ }
30
+
31
+ if (props.className) {
32
+ classNames.push(...props.className.split(' '));
33
+ }
34
+
35
+ if (props.color) {
36
+ classNames.push(props.color);
37
+ }
38
+
39
+ if (props.compact) {
40
+ classNames.push('compact');
41
+ }
42
+
43
+ if (props.primary) {
44
+ classNames.push('primary');
45
+ }
46
+
47
+ if (props.secondary) {
48
+ classNames.push('secondary');
49
+ }
50
+
51
+ if (props.size) {
52
+ classNames.push(props.size);
53
+ }
54
+
55
+ return classNames.join(' ');
56
+ }, [props.basic, props.color]);
57
+
58
+ return (
59
+ <Button className={className} onClick={() => window.open(props.url, '_blank')}>
60
+ <Icon
61
+ name='cloud download'
62
+ />
63
+ {i18n.t('Common.buttons.pdf')}
64
+ </Button>
65
+ );
66
+ };
67
+
68
+ export default ViewPDFButton;
package/src/i18n/en.json CHANGED
@@ -57,7 +57,8 @@
57
57
  "save": "Save",
58
58
  "search": "Search",
59
59
  "show": "Show",
60
- "upload": "Upload"
60
+ "upload": "Upload",
61
+ "pdf": "View PDF"
61
62
  },
62
63
  "errors": {
63
64
  "save": "There was an error saving the record.",
@@ -331,4 +332,4 @@
331
332
  },
332
333
  "title": "XML"
333
334
  }
334
- }
335
+ }
package/types/components/LazyDocument.js.flow CHANGED
@@ -3,6 +3,7 @@
3
3
  import React, { useCallback, useState, type Node } from 'react';
4
4
  import { pdfjs, Document, Page } from 'react-pdf';
5
5
  import {
6
+ Button,
6
7
  Dimmer,
7
8
  Icon,
8
9
  Image,
@@ -26,6 +27,8 @@ type Props = {
26
27
  image?: any,
27
28
  pdf?: boolean,
28
29
  preview?: ?string,
30
+ view?: Boolean,
31
+ view_url?: String,
29
32
  size?: string,
30
33
  src?: string
31
34
  };
@@ -87,13 +90,13 @@ const LazyDocument = (props: Props) => {
87
90
  onMouseEnter={() => setDimmer(true)}
88
91
  onMouseLeave={() => setDimmer(false)}
89
92
  >
90
- { !loaded && (
93
+ {!loaded && (
91
94
  <LazyLoader
92
95
  active
93
96
  size={props.size}
94
97
  />
95
98
  )}
96
- { !error && props.preview && (
99
+ {!error && props.preview && (
97
100
  <Image
98
101
  {...props.image}
99
102
  className={getClassNames()}
@@ -109,7 +112,7 @@ const LazyDocument = (props: Props) => {
109
112
  size={props.size}
110
113
  />
111
114
  )}
112
- { !error && loaded && !props.preview && props.src && props.pdf && (
115
+ {!error && loaded && !props.preview && props.src && props.pdf && (
113
116
  <Image
114
117
  {...props.image}
115
118
  className={getClassNames()}
@@ -125,7 +128,27 @@ const LazyDocument = (props: Props) => {
125
128
  </Document>
126
129
  </Image>
127
130
  )}
128
- { (error || (!props.preview && !(props.src && props.pdf))) && (
131
+ {!error && loaded && props.view && props.view_url && props.pdf && (
132
+ <Image
133
+ {...props.image}
134
+ className={getClassNames()}
135
+ onError={() => {
136
+ setError(true);
137
+ setLoaded(true);
138
+ }}
139
+ onLoad={() => {
140
+ setError(false);
141
+ setLoaded(true);
142
+ }}
143
+ src={props.preview}
144
+ size={props.size}
145
+ >
146
+ <Button>
147
+ View PDF
148
+ </Button>
149
+ </Image>
150
+ )}
151
+ {(error || (!props.preview && !(props.src && props.pdf))) && (
129
152
  <Image
130
153
  {...props.image}
131
154
  className={getClassNames('placeholder-image')}
@@ -137,20 +160,20 @@ const LazyDocument = (props: Props) => {
137
160
  />
138
161
  </Image>
139
162
  )}
140
- { (props.download || props.src || props.children) && props.dimmable && (
163
+ {(props.download || props.src || props.children) && props.dimmable && (
141
164
  <Dimmer
142
165
  active={dimmer}
143
166
  >
144
167
  <div
145
168
  className='buttons'
146
169
  >
147
- { props.download && (
170
+ {props.download && (
148
171
  <DownloadButton
149
172
  primary
150
173
  url={props.download || props.src}
151
174
  />
152
175
  )}
153
- { props.children }
176
+ {props.children}
154
177
  </div>
155
178
  </Dimmer>
156
179
  )}
package/types/components/ViewPDFButton.js.flow ADDED
@@ -0,0 +1,68 @@
1
+ // @flow
2
+
3
+ import React, { useMemo } from 'react';
4
+ import { Icon, Button } from 'semantic-ui-react';
5
+ import i18n from '../i18n/i18n';
6
+
7
+ type Props = {
8
+ basic?: boolean,
9
+ className?: string,
10
+ color?: string,
11
+ compact?: boolean,
12
+ primary?: boolean,
13
+ size?: string,
14
+ secondary?: boolean,
15
+ url: string,
16
+ };
17
+
18
+ const ViewPDFButton = (props: Props) => {
19
+ /**
20
+ * Sets the appropriate class names based on the formatting props.
21
+ *
22
+ * @type {string}
23
+ */
24
+ const className = useMemo(() => {
25
+ const classNames = ['ui', 'button'];
26
+
27
+ if (props.basic) {
28
+ classNames.push('basic');
29
+ }
30
+
31
+ if (props.className) {
32
+ classNames.push(...props.className.split(' '));
33
+ }
34
+
35
+ if (props.color) {
36
+ classNames.push(props.color);
37
+ }
38
+
39
+ if (props.compact) {
40
+ classNames.push('compact');
41
+ }
42
+
43
+ if (props.primary) {
44
+ classNames.push('primary');
45
+ }
46
+
47
+ if (props.secondary) {
48
+ classNames.push('secondary');
49
+ }
50
+
51
+ if (props.size) {
52
+ classNames.push(props.size);
53
+ }
54
+
55
+ return classNames.join(' ');
56
+ }, [props.basic, props.color]);
57
+
58
+ return (
59
+ <Button className={className} onClick={() => window.open(props.url, '_blank')}>
60
+ <Icon
61
+ name='cloud download'
62
+ />
63
+ {i18n.t('Common.buttons.pdf')}
64
+ </Button>
65
+ );
66
+ };
67
+
68
+ export default ViewPDFButton;