@factorearth/component-library 5.1.4-alpha.0 → 5.1.5-alpha.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.
|
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect, } from "react";
|
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
3
|
import { FiTrash2, FiEye, FiEyeOff, FiSettings, FiRotateCcw } from "react-icons/fi";
|
|
4
4
|
import { Button } from "../../Atoms/Buttons/Button";
|
|
5
|
+
import { ConfirmationModal } from "../../Organisms/Modal/Modal";
|
|
5
6
|
const Container = styled.div `
|
|
6
7
|
display: flex;
|
|
7
8
|
flex-direction: column;
|
|
@@ -56,6 +57,8 @@ export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showIm
|
|
|
56
57
|
const [selectedImage, setSelectedImage] = useState(null);
|
|
57
58
|
const [showSettings, setShowSettings] = useState(false);
|
|
58
59
|
const [prevImage, setPrevImage] = useState(null);
|
|
60
|
+
const [openSubmitModal, setOpenSubmitModal] = useState(false);
|
|
61
|
+
const [deletingImage, setDeletingImage] = useState(false);
|
|
59
62
|
const acceptedFileTypes = [
|
|
60
63
|
"image/jpeg",
|
|
61
64
|
"image/png",
|
|
@@ -70,11 +73,13 @@ export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showIm
|
|
|
70
73
|
if (file) {
|
|
71
74
|
const imageUrl = URL.createObjectURL(file);
|
|
72
75
|
setSelectedImage(imageUrl);
|
|
76
|
+
setDeletingImage(false);
|
|
73
77
|
setPrevImage(null);
|
|
74
78
|
}
|
|
75
79
|
}
|
|
76
80
|
else if (signedUrl && typeof signedUrl === "string") {
|
|
77
81
|
setSelectedImage(signedUrl);
|
|
82
|
+
setDeletingImage(false);
|
|
78
83
|
setPrevImage(null);
|
|
79
84
|
}
|
|
80
85
|
else {
|
|
@@ -86,6 +91,7 @@ export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showIm
|
|
|
86
91
|
if (file) {
|
|
87
92
|
const imageUrl = URL.createObjectURL(file);
|
|
88
93
|
setSelectedImage(imageUrl);
|
|
94
|
+
setDeletingImage(false);
|
|
89
95
|
handleChange(event);
|
|
90
96
|
}
|
|
91
97
|
};
|
|
@@ -95,6 +101,8 @@ export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showIm
|
|
|
95
101
|
if (file) {
|
|
96
102
|
const imageUrl = URL.createObjectURL(file);
|
|
97
103
|
setSelectedImage(imageUrl);
|
|
104
|
+
setOpenSubmitModal(true);
|
|
105
|
+
setDeletingImage(false);
|
|
98
106
|
const dropEvent = { target: { files: event.dataTransfer.files, name: "key", type: "file" } };
|
|
99
107
|
if (inputRef.current)
|
|
100
108
|
inputRef.current.files = event.dataTransfer.files;
|
|
@@ -102,6 +110,8 @@ export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showIm
|
|
|
102
110
|
}
|
|
103
111
|
};
|
|
104
112
|
const handleDragOver = (event) => {
|
|
113
|
+
setOpenSubmitModal(true);
|
|
114
|
+
setDeletingImage(false);
|
|
105
115
|
event.preventDefault();
|
|
106
116
|
};
|
|
107
117
|
const handleBrowseClick = (event) => {
|
|
@@ -123,12 +133,16 @@ export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showIm
|
|
|
123
133
|
inputRef.current.value = "";
|
|
124
134
|
}
|
|
125
135
|
if (handleRemove) {
|
|
136
|
+
setDeletingImage(true);
|
|
137
|
+
setOpenSubmitModal(false);
|
|
126
138
|
handleRemove();
|
|
127
139
|
}
|
|
128
140
|
};
|
|
129
141
|
const undoDelete = () => {
|
|
130
142
|
console.log(`in undo delete the prevImage: `, prevImage);
|
|
131
143
|
setSelectedImage(prevImage);
|
|
144
|
+
setOpenSubmitModal(false);
|
|
145
|
+
setDeletingImage(false);
|
|
132
146
|
setPrevImage(null);
|
|
133
147
|
};
|
|
134
148
|
return (React.createElement(Container, { colors: colorPalette, showImage: showImage, showSettings: showSettings, key: `thumbnail_${fieldInstance.id}` },
|
|
@@ -143,6 +157,7 @@ export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showIm
|
|
|
143
157
|
React.createElement(Button, { colorPalette: colorPalette, label: "Browse", variant: "filled", onClick: handleBrowseClick },
|
|
144
158
|
React.createElement("input", { type: "file", name: "key", accept: acceptedFileTypes.join(","), onChange: handleImageUpload, ref: inputRef, id: `upload-image-${fieldInstance.id}`, multiple: false, style: { display: "none" } })))),
|
|
145
159
|
showSettings && showImage && (React.createElement(SettingsArea, { colors: colorPalette }, settingsChildren)),
|
|
146
|
-
changed && (React.createElement(
|
|
160
|
+
changed && (React.createElement(ConfirmationModal, { colorPalette: colorPalette, setOpen: undoDelete, details: React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%" } },
|
|
161
|
+
React.createElement("img", { alt: s3Key || "Uploaded Image", src: selectedImage || "", style: { width: "150px", height: "132px" } })), confirmTitle: `Are you sure you want to ${deletingImage ? "delete this image" : "upload this image"}?`, handleSubmit: handleSubmit, open: openSubmitModal }))));
|
|
147
162
|
};
|
|
148
163
|
//# sourceMappingURL=Thumbnail.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../lib/Molecules/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACb,QAAQ,EAER,MAAM,EAGN,SAAS,GACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../lib/Molecules/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@factorearth/component-library",
|
|
3
|
-
"version": "5.1.
|
|
3
|
+
"version": "5.1.5-alpha.0",
|
|
4
4
|
"description": " A storybook component library for FactorEarth",
|
|
5
5
|
"author": "madtrx <marlin.makori@gmail.com>",
|
|
6
6
|
"homepage": "https://github.com/FactorEarth/RecordMiddleware#readme",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"access": "public",
|
|
47
47
|
"registry": "https://registry.npmjs.org/"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "4af8af0a8c10fed5962932f552d20cae3a91a292",
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@emotion/react": "^11.13.0",
|
|
52
52
|
"@emotion/styled": "^11.13.0",
|