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

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 +26 -7
  5. package/src/components/ViewPDFButton.js +68 -0
  6. package/src/i18n/en.json +3 -2
  7. package/types/components/LazyDocument.js.flow +26 -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",
3
+ "version": "1.1.4-beta.3",
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",
15
+ "@performant-software/shared-components": "^1.1.4-beta.3",
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,
@@ -17,6 +18,7 @@ import LazyLoader from './LazyLoader';
17
18
  import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
18
19
  import 'react-pdf/dist/esm/Page/TextLayer.css';
19
20
  import './LazyDocument.css';
21
+ import ViewPDFButton from './ViewPDFButton';
20
22
 
21
23
  type Props = {
22
24
  children?: Node,
@@ -26,6 +28,8 @@ type Props = {
26
28
  image?: any,
27
29
  pdf?: boolean,
28
30
  preview?: ?string,
31
+ view?: Boolean,
32
+ view_url?: String,
29
33
  size?: string,
30
34
  src?: string
31
35
  };
@@ -73,6 +77,10 @@ const LazyDocument = (props: Props) => {
73
77
  );
74
78
  }
75
79
 
80
+ console.log(props);
81
+ console.log('Error: ', error);
82
+ console.log('Loaded: ', loaded);
83
+
76
84
  return (
77
85
  <>
78
86
  <Transition
@@ -87,13 +95,13 @@ const LazyDocument = (props: Props) => {
87
95
  onMouseEnter={() => setDimmer(true)}
88
96
  onMouseLeave={() => setDimmer(false)}
89
97
  >
90
- { !loaded && (
98
+ {!loaded && (
91
99
  <LazyLoader
92
100
  active
93
101
  size={props.size}
94
102
  />
95
103
  )}
96
- { !error && props.preview && (
104
+ {!error && props.preview && (
97
105
  <Image
98
106
  {...props.image}
99
107
  className={getClassNames()}
@@ -109,7 +117,7 @@ const LazyDocument = (props: Props) => {
109
117
  size={props.size}
110
118
  />
111
119
  )}
112
- { !error && loaded && !props.preview && props.src && props.pdf && (
120
+ {!error && loaded && !props.preview && props.src && props.pdf && (
113
121
  <Image
114
122
  {...props.image}
115
123
  className={getClassNames()}
@@ -125,7 +133,18 @@ const LazyDocument = (props: Props) => {
125
133
  </Document>
126
134
  </Image>
127
135
  )}
128
- { (error || (!props.preview && !(props.src && props.pdf))) && (
136
+ {!error && loaded && props.view && props.view_url && props.pdf && dimmer && (
137
+ <Dimmer
138
+ active={dimmer}
139
+ >
140
+ <div
141
+ className='buttons'
142
+ >
143
+ <ViewPDFButton url={props.view_url} primary />
144
+ </div>
145
+ </Dimmer>
146
+ )}
147
+ {(error || (!props.preview && !(props.src && props.pdf))) && (
129
148
  <Image
130
149
  {...props.image}
131
150
  className={getClassNames('placeholder-image')}
@@ -137,20 +156,20 @@ const LazyDocument = (props: Props) => {
137
156
  />
138
157
  </Image>
139
158
  )}
140
- { (props.download || props.src || props.children) && props.dimmable && (
159
+ {(props.download || props.src || props.children) && props.dimmable && (
141
160
  <Dimmer
142
161
  active={dimmer}
143
162
  >
144
163
  <div
145
164
  className='buttons'
146
165
  >
147
- { props.download && (
166
+ {props.download && (
148
167
  <DownloadButton
149
168
  primary
150
169
  url={props.download || props.src}
151
170
  />
152
171
  )}
153
- { props.children }
172
+ {props.children}
154
173
  </div>
155
174
  </Dimmer>
156
175
  )}
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,
@@ -17,6 +18,7 @@ import LazyLoader from './LazyLoader';
17
18
  import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
18
19
  import 'react-pdf/dist/esm/Page/TextLayer.css';
19
20
  import './LazyDocument.css';
21
+ import ViewPDFButton from './ViewPDFButton';
20
22
 
21
23
  type Props = {
22
24
  children?: Node,
@@ -26,6 +28,8 @@ type Props = {
26
28
  image?: any,
27
29
  pdf?: boolean,
28
30
  preview?: ?string,
31
+ view?: Boolean,
32
+ view_url?: String,
29
33
  size?: string,
30
34
  src?: string
31
35
  };
@@ -73,6 +77,10 @@ const LazyDocument = (props: Props) => {
73
77
  );
74
78
  }
75
79
 
80
+ console.log(props);
81
+ console.log('Error: ', error);
82
+ console.log('Loaded: ', loaded);
83
+
76
84
  return (
77
85
  <>
78
86
  <Transition
@@ -87,13 +95,13 @@ const LazyDocument = (props: Props) => {
87
95
  onMouseEnter={() => setDimmer(true)}
88
96
  onMouseLeave={() => setDimmer(false)}
89
97
  >
90
- { !loaded && (
98
+ {!loaded && (
91
99
  <LazyLoader
92
100
  active
93
101
  size={props.size}
94
102
  />
95
103
  )}
96
- { !error && props.preview && (
104
+ {!error && props.preview && (
97
105
  <Image
98
106
  {...props.image}
99
107
  className={getClassNames()}
@@ -109,7 +117,7 @@ const LazyDocument = (props: Props) => {
109
117
  size={props.size}
110
118
  />
111
119
  )}
112
- { !error && loaded && !props.preview && props.src && props.pdf && (
120
+ {!error && loaded && !props.preview && props.src && props.pdf && (
113
121
  <Image
114
122
  {...props.image}
115
123
  className={getClassNames()}
@@ -125,7 +133,18 @@ const LazyDocument = (props: Props) => {
125
133
  </Document>
126
134
  </Image>
127
135
  )}
128
- { (error || (!props.preview && !(props.src && props.pdf))) && (
136
+ {!error && loaded && props.view && props.view_url && props.pdf && dimmer && (
137
+ <Dimmer
138
+ active={dimmer}
139
+ >
140
+ <div
141
+ className='buttons'
142
+ >
143
+ <ViewPDFButton url={props.view_url} primary />
144
+ </div>
145
+ </Dimmer>
146
+ )}
147
+ {(error || (!props.preview && !(props.src && props.pdf))) && (
129
148
  <Image
130
149
  {...props.image}
131
150
  className={getClassNames('placeholder-image')}
@@ -137,20 +156,20 @@ const LazyDocument = (props: Props) => {
137
156
  />
138
157
  </Image>
139
158
  )}
140
- { (props.download || props.src || props.children) && props.dimmable && (
159
+ {(props.download || props.src || props.children) && props.dimmable && (
141
160
  <Dimmer
142
161
  active={dimmer}
143
162
  >
144
163
  <div
145
164
  className='buttons'
146
165
  >
147
- { props.download && (
166
+ {props.download && (
148
167
  <DownloadButton
149
168
  primary
150
169
  url={props.download || props.src}
151
170
  />
152
171
  )}
153
- { props.children }
172
+ {props.children}
154
173
  </div>
155
174
  </Dimmer>
156
175
  )}
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;