@fixefy/fixefy-ui-components 0.3.45 → 0.3.47
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.
package/dist/FxIcon/FxIcon.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const FxIcon: ({ icon, width, height, onClick, variant, fontSize, background, initials,
|
|
1
|
+
export declare const FxIcon: ({ icon, width, height, onClick, variant, fontSize, background, initials, }: {
|
|
2
2
|
icon: string;
|
|
3
3
|
width: number;
|
|
4
4
|
height: number;
|
|
@@ -7,5 +7,4 @@ export declare const FxIcon: ({ icon, width, height, onClick, variant, fontSize,
|
|
|
7
7
|
fontSize?: number;
|
|
8
8
|
background?: string;
|
|
9
9
|
initials?: string;
|
|
10
|
-
path?: string;
|
|
11
10
|
}) => JSX.Element;
|
package/dist/FxIcon/FxIcon.js
CHANGED
|
@@ -59,7 +59,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
|
|
|
59
59
|
}
|
|
60
60
|
return newObj;
|
|
61
61
|
}
|
|
62
|
-
const PublicIcon = ({ icon, width, height, onClick, variant, fontSize, background, initials
|
|
62
|
+
const PublicIcon = ({ icon, width, height, onClick, variant, fontSize, background, initials })=>{
|
|
63
63
|
const [isError, setError] = (0, _react.useState)(false);
|
|
64
64
|
const handleError = (isError)=>setError(isError);
|
|
65
65
|
if (isError) {
|
|
@@ -81,27 +81,17 @@ const PublicIcon = ({ icon, width, height, onClick, variant, fontSize, backgroun
|
|
|
81
81
|
alt: "",
|
|
82
82
|
width: width,
|
|
83
83
|
height: height,
|
|
84
|
-
loader: ()
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
//@ts-ignore
|
|
89
|
-
path
|
|
90
|
-
});
|
|
91
|
-
} else {
|
|
92
|
-
//@ts-ignore
|
|
93
|
-
return (0, _fixefyuiutils.imageLoader)({
|
|
94
|
-
src: icon
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
|
-
},
|
|
84
|
+
loader: ()=>//@ts-ignore
|
|
85
|
+
(0, _fixefyuiutils.imageLoader)({
|
|
86
|
+
src: icon
|
|
87
|
+
}),
|
|
98
88
|
src: icon,
|
|
99
89
|
onLoad: ()=>handleError(false),
|
|
100
90
|
onError: ()=>handleError(true),
|
|
101
91
|
onClick: onClick
|
|
102
92
|
});
|
|
103
93
|
};
|
|
104
|
-
const FxIcon = ({ icon, width, height, onClick, variant, fontSize, background, initials
|
|
94
|
+
const FxIcon = ({ icon, width, height, onClick, variant, fontSize, background, initials })=>{
|
|
105
95
|
if (!icon) throw Error('Provide a property `icon`');
|
|
106
96
|
return parseIconFromLibrary({
|
|
107
97
|
icon,
|
|
@@ -111,11 +101,10 @@ const FxIcon = ({ icon, width, height, onClick, variant, fontSize, background, i
|
|
|
111
101
|
variant,
|
|
112
102
|
fontSize,
|
|
113
103
|
background,
|
|
114
|
-
initials
|
|
115
|
-
path
|
|
104
|
+
initials
|
|
116
105
|
});
|
|
117
106
|
};
|
|
118
|
-
const parseIconFromLibrary = ({ icon, width, height, onClick, variant, fontSize, background, initials
|
|
107
|
+
const parseIconFromLibrary = ({ icon, width, height, onClick, variant, fontSize, background, initials })=>{
|
|
119
108
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(PublicIcon, {
|
|
120
109
|
icon: icon,
|
|
121
110
|
width: width,
|
|
@@ -124,7 +113,6 @@ const parseIconFromLibrary = ({ icon, width, height, onClick, variant, fontSize,
|
|
|
124
113
|
variant: variant,
|
|
125
114
|
fontSize: fontSize,
|
|
126
115
|
background: background,
|
|
127
|
-
initials: initials
|
|
128
|
-
path: path
|
|
116
|
+
initials: initials
|
|
129
117
|
});
|
|
130
118
|
};
|
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "FxUserImage", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return FxUserImage;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _jsxruntime = require("react/jsx-runtime");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
|
13
|
+
const _image = /*#__PURE__*/ _interop_require_default(require("next/image"));
|
|
14
|
+
const _nookies = require("nookies");
|
|
15
|
+
const _FxIcon = require("../FxIcon");
|
|
16
|
+
const _nexts3upload = require("@fixefy/next-s3-upload");
|
|
17
|
+
const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
|
|
18
|
+
const _fixefyhooks = require("@fixefy/fixefy-hooks");
|
|
19
|
+
const _material = require("@mui/material");
|
|
20
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
21
|
+
try {
|
|
22
|
+
var info = gen[key](arg);
|
|
23
|
+
var value = info.value;
|
|
24
|
+
} catch (error) {
|
|
25
|
+
reject(error);
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
if (info.done) {
|
|
29
|
+
resolve(value);
|
|
30
|
+
} else {
|
|
31
|
+
Promise.resolve(value).then(_next, _throw);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
function _async_to_generator(fn) {
|
|
35
|
+
return function() {
|
|
36
|
+
var self = this, args = arguments;
|
|
37
|
+
return new Promise(function(resolve, reject) {
|
|
38
|
+
var gen = fn.apply(self, args);
|
|
39
|
+
function _next(value) {
|
|
40
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
41
|
+
}
|
|
42
|
+
function _throw(err) {
|
|
43
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
44
|
+
}
|
|
45
|
+
_next(undefined);
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
function _interop_require_default(obj) {
|
|
50
|
+
return obj && obj.__esModule ? obj : {
|
|
51
|
+
default: obj
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
function _getRequireWildcardCache(nodeInterop) {
|
|
55
|
+
if (typeof WeakMap !== "function") return null;
|
|
56
|
+
var cacheBabelInterop = new WeakMap();
|
|
57
|
+
var cacheNodeInterop = new WeakMap();
|
|
58
|
+
return (_getRequireWildcardCache = function(nodeInterop) {
|
|
59
|
+
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
60
|
+
})(nodeInterop);
|
|
61
|
+
}
|
|
62
|
+
function _interop_require_wildcard(obj, nodeInterop) {
|
|
63
|
+
if (!nodeInterop && obj && obj.__esModule) {
|
|
64
|
+
return obj;
|
|
65
|
+
}
|
|
66
|
+
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
67
|
+
return {
|
|
68
|
+
default: obj
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
var cache = _getRequireWildcardCache(nodeInterop);
|
|
72
|
+
if (cache && cache.has(obj)) {
|
|
73
|
+
return cache.get(obj);
|
|
74
|
+
}
|
|
75
|
+
var newObj = {
|
|
76
|
+
__proto__: null
|
|
77
|
+
};
|
|
78
|
+
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
79
|
+
for(var key in obj){
|
|
80
|
+
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
81
|
+
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
82
|
+
if (desc && (desc.get || desc.set)) {
|
|
83
|
+
Object.defineProperty(newObj, key, desc);
|
|
84
|
+
} else {
|
|
85
|
+
newObj[key] = obj[key];
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
newObj.default = obj;
|
|
90
|
+
if (cache) {
|
|
91
|
+
cache.set(obj, newObj);
|
|
92
|
+
}
|
|
93
|
+
return newObj;
|
|
94
|
+
}
|
|
95
|
+
const FxUserImage = ({ bucketAddress, user, loading, setLoading })=>{
|
|
96
|
+
const getRandomColor = (0, _fixefyhooks.useRandomColor)();
|
|
97
|
+
const { listS3Bucket } = (0, _nexts3upload.useS3ListBucket)();
|
|
98
|
+
const { downloadFromS3 } = (0, _nexts3upload.useS3Download)('download-bytearray');
|
|
99
|
+
const { email, full_name, first_name, last_name } = user;
|
|
100
|
+
var _ref;
|
|
101
|
+
// @ts-ignore
|
|
102
|
+
const initials = (0, _fixefyuiutils.toInitials)((_ref = full_name !== null && full_name !== void 0 ? full_name : first_name && last_name) !== null && _ref !== void 0 ? _ref : 'unknown').slice(0, 2);
|
|
103
|
+
const [file, setFile] = (0, _react.useState)(null);
|
|
104
|
+
const [files, setFiles] = (0, _react.useState)([]);
|
|
105
|
+
(0, _react.useEffect)(()=>{
|
|
106
|
+
fetchFiles();
|
|
107
|
+
}, []);
|
|
108
|
+
(0, _react.useEffect)(()=>{
|
|
109
|
+
if (file) {
|
|
110
|
+
setLoading(false);
|
|
111
|
+
}
|
|
112
|
+
}, [
|
|
113
|
+
file
|
|
114
|
+
]);
|
|
115
|
+
(0, _react.useEffect)(()=>{
|
|
116
|
+
fetchFile(files);
|
|
117
|
+
}, []);
|
|
118
|
+
//// fetch single file from s3
|
|
119
|
+
const fetchFile = function() {
|
|
120
|
+
var _ref = _async_to_generator(function*(files) {
|
|
121
|
+
if (files.length) {
|
|
122
|
+
try {
|
|
123
|
+
var _files_, _files__Key, _files_1;
|
|
124
|
+
const data = yield downloadFromS3({
|
|
125
|
+
path: (_files_ = files[0]) === null || _files_ === void 0 ? void 0 : _files_.Key,
|
|
126
|
+
bucketName: `fixefy-${bucketAddress}`
|
|
127
|
+
});
|
|
128
|
+
const fileNames = (_files_1 = files[0]) === null || _files_1 === void 0 ? void 0 : (_files__Key = _files_1.Key) === null || _files__Key === void 0 ? void 0 : _files__Key.split('/').filter((part)=>part != '');
|
|
129
|
+
const fileName = fileNames[(fileNames === null || fileNames === void 0 ? void 0 : fileNames.length) - 1];
|
|
130
|
+
const fileType = fileName.split('.').pop();
|
|
131
|
+
const currentFile = {
|
|
132
|
+
data: data.content,
|
|
133
|
+
type: fileType,
|
|
134
|
+
name: fileName
|
|
135
|
+
};
|
|
136
|
+
setFile(currentFile);
|
|
137
|
+
setLoading(false);
|
|
138
|
+
} catch (err) {
|
|
139
|
+
console.error(err, err.stack, 'err');
|
|
140
|
+
setLoading(false);
|
|
141
|
+
}
|
|
142
|
+
setLoading(false);
|
|
143
|
+
}
|
|
144
|
+
});
|
|
145
|
+
return function fetchFile(files) {
|
|
146
|
+
return _ref.apply(this, arguments);
|
|
147
|
+
};
|
|
148
|
+
}();
|
|
149
|
+
/// fetch files from s3
|
|
150
|
+
const fetchFiles = function() {
|
|
151
|
+
var _ref = _async_to_generator(function*() {
|
|
152
|
+
setLoading(true);
|
|
153
|
+
const { ws, user } = (0, _nookies.parseCookies)();
|
|
154
|
+
let { workspaces } = JSON.parse(user);
|
|
155
|
+
if (typeof workspaces === 'string') {
|
|
156
|
+
workspaces = JSON.parse(workspaces);
|
|
157
|
+
}
|
|
158
|
+
const currentWorkspace = workspaces.find((workspace)=>(workspace === null || workspace === void 0 ? void 0 : workspace._id) === ws);
|
|
159
|
+
if (!currentWorkspace) {
|
|
160
|
+
console.log('Workspace not found.');
|
|
161
|
+
setLoading(false);
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
const bucket = `fixefy-${bucketAddress}`;
|
|
165
|
+
const startAfter = `${currentWorkspace.readable_id}/${email}`;
|
|
166
|
+
const data = yield listS3Bucket({
|
|
167
|
+
bucketName: bucket,
|
|
168
|
+
prefix: startAfter,
|
|
169
|
+
startAfter
|
|
170
|
+
});
|
|
171
|
+
try {
|
|
172
|
+
if (data.contents.length) {
|
|
173
|
+
setFiles(data.contents);
|
|
174
|
+
fetchFile(data.contents);
|
|
175
|
+
} else {
|
|
176
|
+
setLoading(false);
|
|
177
|
+
}
|
|
178
|
+
} catch (err) {
|
|
179
|
+
console.error(err, err.stack, 'err');
|
|
180
|
+
}
|
|
181
|
+
});
|
|
182
|
+
return function fetchFiles() {
|
|
183
|
+
return _ref.apply(this, arguments);
|
|
184
|
+
};
|
|
185
|
+
}();
|
|
186
|
+
if (loading) return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
|
|
187
|
+
size: 24
|
|
188
|
+
});
|
|
189
|
+
if (!file && !loading) return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
|
|
190
|
+
icon: 'users',
|
|
191
|
+
width: 24,
|
|
192
|
+
height: 24,
|
|
193
|
+
variant: "rounded",
|
|
194
|
+
fontSize: 12,
|
|
195
|
+
initials: initials,
|
|
196
|
+
background: getRandomColor()
|
|
197
|
+
});
|
|
198
|
+
return file && !loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(ImageView, {
|
|
199
|
+
data: file.data,
|
|
200
|
+
fileName: file.name,
|
|
201
|
+
type: file.type
|
|
202
|
+
});
|
|
203
|
+
};
|
|
204
|
+
const ImageView = ({ data, fileName, type })=>{
|
|
205
|
+
const [imageSrc, setImageSrc] = (0, _react.useState)(null);
|
|
206
|
+
(0, _react.useEffect)(()=>{
|
|
207
|
+
if (data instanceof Uint8Array) {
|
|
208
|
+
const blob = new Blob([
|
|
209
|
+
data
|
|
210
|
+
], {
|
|
211
|
+
type: `image/${type == 'svg' ? 'svg+xml' : type}`
|
|
212
|
+
});
|
|
213
|
+
const url = URL.createObjectURL(blob);
|
|
214
|
+
setImageSrc(url);
|
|
215
|
+
return ()=>{
|
|
216
|
+
URL.revokeObjectURL(url);
|
|
217
|
+
};
|
|
218
|
+
} else {
|
|
219
|
+
setImageSrc(null);
|
|
220
|
+
return;
|
|
221
|
+
}
|
|
222
|
+
}, [
|
|
223
|
+
data
|
|
224
|
+
]);
|
|
225
|
+
return imageSrc && /*#__PURE__*/ (0, _jsxruntime.jsx)(_image.default, {
|
|
226
|
+
width: 24,
|
|
227
|
+
height: 24,
|
|
228
|
+
src: imageSrc,
|
|
229
|
+
alt: fileName
|
|
230
|
+
});
|
|
231
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { FxUserImage } from './FxUserImage';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "FxUserImage", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return _FxUserImage.FxUserImage;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _FxUserImage = require("./FxUserImage");
|
package/package.json
CHANGED
|
@@ -5,8 +5,9 @@
|
|
|
5
5
|
},
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@apollo/client": "3.10.4",
|
|
8
|
-
"@fixefy/fixefy-hooks": "0.0.
|
|
9
|
-
"@fixefy/fixefy-ui-utils": "0.2.
|
|
8
|
+
"@fixefy/fixefy-hooks": "0.0.11",
|
|
9
|
+
"@fixefy/fixefy-ui-utils": "0.2.54",
|
|
10
|
+
"@fixefy/next-s3-upload": "^0.0.12",
|
|
10
11
|
"@mui/icons-material": "5.16.7",
|
|
11
12
|
"@mui/lab": "6.0.0-beta.7",
|
|
12
13
|
"@mui/material": "5.16.7",
|
|
@@ -68,5 +69,5 @@
|
|
|
68
69
|
"require": "./dist/index.js"
|
|
69
70
|
}
|
|
70
71
|
},
|
|
71
|
-
"version": "0.3.
|
|
72
|
+
"version": "0.3.47"
|
|
72
73
|
}
|