react-editable-photo-grid 2.3.7 → 3.0.0

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 (13) hide show
  1. package/README.md +42 -1
  2. package/dist/index.js +1 -1
  3. package/package.json +54 -54
  4. package/src/PhotoGrid.tsx +167 -191
  5. package/src/components/Checkbox.tsx +26 -26
  6. package/src/components/NonScrollGallery.tsx +187 -187
  7. package/src/components/PhotoControls.tsx +60 -60
  8. package/src/components/RowControls.tsx +32 -32
  9. package/src/components/ScrollGallery.tsx +212 -189
  10. package/src/{index.js → index.ts} +5 -5
  11. package/src/styles.css +416 -443
  12. package/src/types.ts +81 -77
  13. package/src/utils.tsx +461 -461
package/src/PhotoGrid.tsx CHANGED
@@ -1,192 +1,168 @@
1
- import React, { cloneElement, useState } from 'react';
2
- import { PhotoGridProps, PhotoItem, imgSrcProperty } from './types';
3
- import { sortRow, movePhotoLeft, movePhotoUp, movePhotoDown, movePhotoRight, moveRowUp, moveRowDown, getImageSrcProperty, photoHasDetails } from "./utils";
4
- import RowControls from './components/RowControls';
5
- import PhotoControls from './components/PhotoControls';
6
- import ScrollGallery from './components/ScrollGallery';
7
- import NonScrollGallery from './components/NonScrollGallery';
8
- import './styles.css';
9
-
10
- const PhotoGrid = (props: PhotoGridProps) => {
11
- const [activeGalleryKey, setActiveGalleryKey] = useState<number>(-1);
12
-
13
- const handleMovePhotoUp = (e: React.MouseEvent<HTMLButtonElement>) => {
14
- movePhotoUp(e, props);
15
- }
16
-
17
- const handleMovePhotoDown = (e: React.MouseEvent<HTMLButtonElement>) => {
18
- movePhotoDown(e, props);
19
- }
20
-
21
- const handleMovePhotoLeft = (e: React.MouseEvent<HTMLButtonElement>) => {
22
- movePhotoLeft(e, props);
23
- }
24
-
25
- const handleMovePhotoRight = (e: React.MouseEvent<HTMLButtonElement>) => {
26
- movePhotoRight(e, props);
27
- }
28
-
29
- const handleMoveRowUp = (e: React.MouseEvent<HTMLButtonElement>) => {
30
- moveRowUp(e, props);
31
- }
32
-
33
- const handleMoveRowDown = (e: React.MouseEvent<HTMLButtonElement>) => {
34
- moveRowDown(e, props);
35
- }
36
-
37
- const getSrcProperty = (photo: PhotoItem): string => {
38
- const property = props.imageSrcProperty as string;
39
- return getImageSrcProperty(photo, property);
40
- }
41
-
42
- const getGalleryKey = (id: string): number => {
43
- return props.photos.findIndex((photoItem: PhotoItem) => photoItem.id && photoItem.id == id);
44
- }
45
-
46
- const onPhotoClick = (e: React.MouseEvent<HTMLImageElement>): void => {
47
- const photoId = e.currentTarget.dataset.id;
48
- if (!photoId) {
49
- throw new TypeError('Photo id missing');
50
- }
51
-
52
- if (props.onPhotoClick) {
53
- props.onPhotoClick(e);
54
- }
55
-
56
- if (props.useGallery) {
57
- const imageKey = getGalleryKey(photoId);
58
- if (imageKey > -1) {
59
- setActiveGalleryKey(imageKey);
60
- }
61
- }
62
- }
63
-
64
- const disableRightClick = (e: React.MouseEvent<HTMLImageElement>) => {
65
- e.preventDefault();
66
- return false;
67
- }
68
-
69
- const clickNearestImage = (e: React.MouseEvent<HTMLDivElement>) => {
70
- e.preventDefault();
71
- const imgElement = e.currentTarget.previousSibling;
72
- if (imgElement instanceof HTMLImageElement) {
73
- imgElement.click();
74
- }
75
- }
76
-
77
- if (Object.keys(props.rows).length === 0) {
78
- return null;
79
- }
80
-
81
- return (
82
- <div>
83
- {props.useGallery &&
84
- props.galleryType === 'scroll' ?
85
- <ScrollGallery
86
- photos={props.photos}
87
- activeKey={activeGalleryKey}
88
- setActiveKey={setActiveGalleryKey}
89
- imageSrcPrefix={props.imageSrcPrefix}
90
- imageSrcProperty={props.gallerySrcProperty ? props.gallerySrcProperty : ('image_path' as imgSrcProperty)}
91
- buttonArrows={props.galleryButtonArrows}
92
- onGallerySwipe={props.onGallerySwipe}
93
- />
94
- : <NonScrollGallery
95
- photos={props.photos}
96
- activeKey={activeGalleryKey}
97
- setActiveKey={setActiveGalleryKey}
98
- imageSrcPrefix={props.imageSrcPrefix}
99
- imageSrcProperty={props.gallerySrcProperty ? props.gallerySrcProperty : ('image_path' as imgSrcProperty)}
100
- buttonArrows={props.galleryButtonArrows}
101
- onGallerySwipe={props.onGallerySwipe}
102
- />
103
- }
104
- <div className="photogrid">
105
- {Object.entries(props.rows).map((row, i) =>
106
- row[1].length &&
107
- <div
108
- key={'row-' + i}
109
- className={props.isEditing ? "photogrid--photo__row editing" : "photogrid--photo__row"}
110
- >
111
- <>
112
- {props.isEditing &&
113
- <RowControls
114
- rowKey={row[0]}
115
- moveRowUp={handleMoveRowUp}
116
- moveRowDown={handleMoveRowDown}
117
- rowCount={Object.keys(props.rows).length}
118
- buttonArrows={props.buttonArrows}
119
- />
120
- }
121
- {sortRow(row[1]).map((photo, i2) =>
122
- <div
123
- key={'photo-' + i + i2}
124
- className="photogrid--photo__column"
125
- >
126
- <img
127
- width={photo.width}
128
- height={photo.height}
129
- data-id={photo.id}
130
- src={`${props.imageSrcPrefix}${getSrcProperty(photo)}`}
131
- alt={photo.thumbnail_path}
132
- onClick={onPhotoClick}
133
- className={props.useGallery ? "cursor-pointer" : 'cursor-default'}
134
- onContextMenu={disableRightClick}
135
- />
136
- {!props.isEditing && photoHasDetails(photo) === true && (
137
- <div
138
- className="photogrid--photo_overlay"
139
- onClick={clickNearestImage}
140
- >
141
- {photo.name != undefined && photo.name !== '' && (
142
- <h4>{photo.name}</h4>
143
- )}
144
- {photo.description != undefined && photo.description !== '' && (
145
- <p>{photo.description}</p>
146
- )}
147
- </div>
148
- )}
149
- {props.isEditing &&
150
- <>
151
- <div className="photo__details">
152
- <p className="photo__position">R: {row[0]} | C: {photo.column}</p>
153
- {photoHasDetails(photo) === true && (
154
- <ul className="photo__details__desc">
155
- {photo.name ?
156
- <li>{photo.name ? photo.name : '-'}</li>
157
- : null}
158
- {photo.description ?
159
- <li>{photo.description ? photo.description : '-'}</li>
160
- : null}
161
- </ul>
162
- )}
163
- </div>
164
- {props.photoMenu ?
165
- cloneElement(props.photoMenu, {
166
- photo: photo
167
- })
168
- : null}
169
- <PhotoControls
170
- rowKey={row[0]}
171
- photo={photo}
172
- movePhotoDown={handleMovePhotoDown}
173
- movePhotoLeft={handleMovePhotoLeft}
174
- movePhotoUp={handleMovePhotoUp}
175
- movePhotoRight={handleMovePhotoRight}
176
- rowCount={Object.keys(props.rows).length}
177
- photoCount={row[1].length}
178
- buttonArrows={props.buttonArrows}
179
- />
180
- </>
181
- }
182
- </div>
183
- )}
184
- </>
185
- </div>
186
- )}
187
- </div>
188
- </div>
189
- );
190
- };
191
-
1
+ import React, { cloneElement, useState } from 'react';
2
+ import { PhotoGridProps, PhotoItem, imgSrcProperty } from './types';
3
+ import { sortRow, movePhotoLeft, movePhotoUp, movePhotoDown, movePhotoRight, moveRowUp, moveRowDown, getImageSrcProperty, photoHasDetails } from "./utils";
4
+ import RowControls from './components/RowControls';
5
+ import PhotoControls from './components/PhotoControls';
6
+ import ScrollGallery from './components/ScrollGallery';
7
+ import NonScrollGallery from './components/NonScrollGallery';
8
+ import './styles.css';
9
+
10
+ const PhotoGrid = (props: PhotoGridProps) => {
11
+ const [activeGalleryKey, setActiveGalleryKey] = useState<number>(-1);
12
+
13
+ const handleMovePhotoUp = (e: React.MouseEvent<HTMLButtonElement>) => {
14
+ movePhotoUp(e, props);
15
+ }
16
+
17
+ const handleMovePhotoDown = (e: React.MouseEvent<HTMLButtonElement>) => {
18
+ movePhotoDown(e, props);
19
+ }
20
+
21
+ const handleMovePhotoLeft = (e: React.MouseEvent<HTMLButtonElement>) => {
22
+ movePhotoLeft(e, props);
23
+ }
24
+
25
+ const handleMovePhotoRight = (e: React.MouseEvent<HTMLButtonElement>) => {
26
+ movePhotoRight(e, props);
27
+ }
28
+
29
+ const handleMoveRowUp = (e: React.MouseEvent<HTMLButtonElement>) => {
30
+ moveRowUp(e, props);
31
+ }
32
+
33
+ const handleMoveRowDown = (e: React.MouseEvent<HTMLButtonElement>) => {
34
+ moveRowDown(e, props);
35
+ }
36
+
37
+ const getSrcProperty = (photo: PhotoItem): string => {
38
+ const property = props.imageSrcProperty as string;
39
+ return getImageSrcProperty(photo, property);
40
+ }
41
+
42
+ const getGalleryKey = (id: string): number => {
43
+ return props.photos.findIndex((photoItem: PhotoItem) => photoItem.id && photoItem.id == id);
44
+ }
45
+
46
+ const onPhotoClick = (e: React.MouseEvent<HTMLImageElement>): void => {
47
+ const photoId = e.currentTarget.dataset.id;
48
+ if (!photoId) {
49
+ throw new TypeError('Photo id missing');
50
+ }
51
+
52
+ if (props.onPhotoClick) {
53
+ props.onPhotoClick(e);
54
+ }
55
+
56
+ if (props.useGallery) {
57
+ const imageKey = getGalleryKey(photoId);
58
+ if (imageKey > -1) {
59
+ setActiveGalleryKey(imageKey);
60
+ }
61
+ }
62
+ }
63
+
64
+ if (Object.keys(props.rows).length === 0) {
65
+ return null;
66
+ }
67
+
68
+ return (
69
+ <div>
70
+ {props.useGallery &&
71
+ props.galleryType === 'scroll' ?
72
+ <ScrollGallery
73
+ photos={props.photos}
74
+ activeKey={activeGalleryKey}
75
+ setActiveKey={setActiveGalleryKey}
76
+ imageSrcPrefix={props.imageSrcPrefix}
77
+ imageSrcProperty={props.gallerySrcProperty ? props.gallerySrcProperty : ('image_path' as imgSrcProperty)}
78
+ buttonArrows={props.galleryButtonArrows}
79
+ onGallerySwipe={props.onGallerySwipe}
80
+ />
81
+ : <NonScrollGallery
82
+ photos={props.photos}
83
+ activeKey={activeGalleryKey}
84
+ setActiveKey={setActiveGalleryKey}
85
+ imageSrcPrefix={props.imageSrcPrefix}
86
+ imageSrcProperty={props.gallerySrcProperty ? props.gallerySrcProperty : ('image_path' as imgSrcProperty)}
87
+ buttonArrows={props.galleryButtonArrows}
88
+ onGallerySwipe={props.onGallerySwipe}
89
+ />
90
+ }
91
+ <div className="photogrid">
92
+ {Object.entries(props.rows).map((row, i) =>
93
+ row[1].length &&
94
+ <div
95
+ key={'row-' + i}
96
+ className={props.isEditing ? "photogrid--photo__row editing" : "photogrid--photo__row"}
97
+ >
98
+ <>
99
+ {props.isEditing && (
100
+ <RowControls
101
+ rowKey={row[0]}
102
+ moveRowUp={handleMoveRowUp}
103
+ moveRowDown={handleMoveRowDown}
104
+ rowCount={Object.keys(props.rows).length}
105
+ buttonArrows={props.buttonArrows}
106
+ />
107
+ )}
108
+ {sortRow(row[1]).map((photo, i2) =>
109
+ <div
110
+ key={'photo-' + i + i2}
111
+ className="photogrid--photo__column"
112
+ >
113
+ <img
114
+ width={photo.width}
115
+ height={photo.height}
116
+ data-id={photo.id}
117
+ src={`${props.imageSrcPrefix}${getSrcProperty(photo)}`}
118
+ alt={photo.thumbnail_path}
119
+ onClick={onPhotoClick}
120
+ className={props.useGallery ? "cursor-pointer" : 'cursor-default'}
121
+ />
122
+
123
+ {!props.isEditing && photoHasDetails(photo) === true && (
124
+ <div className="photogrid--photo_overlay">
125
+ {photo.name != undefined && photo.name !== '' && (
126
+ <h4>{photo.name}</h4>
127
+ )}
128
+ {photo.description != undefined && photo.description !== '' && (
129
+ <p>{photo.description}</p>
130
+ )}
131
+ </div>
132
+ )}
133
+ {props.isEditing ? (
134
+ <>
135
+ <p className="photo__position">R: {row[0]} | C: {photo.column}</p>
136
+ {props.photoMenu ?
137
+ cloneElement(props.photoMenu, {
138
+ photo: photo
139
+ })
140
+ : null}
141
+ <PhotoControls
142
+ rowKey={row[0]}
143
+ photo={photo}
144
+ movePhotoDown={handleMovePhotoDown}
145
+ movePhotoLeft={handleMovePhotoLeft}
146
+ movePhotoUp={handleMovePhotoUp}
147
+ movePhotoRight={handleMovePhotoRight}
148
+ rowCount={Object.keys(props.rows).length}
149
+ photoCount={row[1].length}
150
+ buttonArrows={props.buttonArrows}
151
+ />
152
+ </>
153
+ ) : props.photoActions ? (
154
+ cloneElement(props.photoActions, {
155
+ photo: photo
156
+ })
157
+ ) : null}
158
+ </div>
159
+ )}
160
+ </>
161
+ </div>
162
+ )}
163
+ </div>
164
+ </div>
165
+ );
166
+ };
167
+
192
168
  export default PhotoGrid;
package/src/components/Checkbox.tsx CHANGED
@@ -1,27 +1,27 @@
1
- import React from 'react';
2
-
3
- type props = {
4
- value: string;
5
- onClick: (value: string, checked: boolean) => void;
6
- checked: boolean;
7
- }
8
-
9
- const Checkbox = (props: props) => {
10
- const toggleCheckbox = (e: React.MouseEvent<HTMLDivElement>): void => {
11
- e.preventDefault();
12
- if (props.checked) {
13
- props.onClick(props.value, false);
14
- } else {
15
- props.onClick(props.value, true);
16
- }
17
- }
18
-
19
- return (
20
- <div
21
- className={props.checked ? "photogrid--checkbox active" : "photogrid--checkbox"}
22
- onClick={toggleCheckbox}
23
- />
24
- );
25
- }
26
-
1
+ import React from 'react';
2
+
3
+ type props = {
4
+ value: string;
5
+ onClick: (value: string, checked: boolean) => void;
6
+ checked: boolean;
7
+ }
8
+
9
+ const Checkbox = (props: props) => {
10
+ const toggleCheckbox = (e: React.MouseEvent<HTMLDivElement>): void => {
11
+ e.preventDefault();
12
+ if (props.checked) {
13
+ props.onClick(props.value, false);
14
+ } else {
15
+ props.onClick(props.value, true);
16
+ }
17
+ }
18
+
19
+ return (
20
+ <div
21
+ className={props.checked ? "photogrid--checkbox active" : "photogrid--checkbox"}
22
+ onClick={toggleCheckbox}
23
+ />
24
+ );
25
+ }
26
+
27
27
  export default Checkbox;