@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
165 lines • 7.65 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _svg, _svg2, _svg3, _InputBoxUploadImageT, _svg4;
/* eslint-disable react/no-array-index-key */
import React, { createElement as _createElement } from 'react';
import { Content, InputBoxUploadImage, InputBoxUploadImageClose, InputBoxUploadImageFile, InputBoxUploadImageShow, InputBoxUploadImageText, InputBoxUploadImageWrapShow } from './styled';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Item = function Item(props) {
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
read = _React$useState2[0],
setRead = _React$useState2[1];
React.useEffect(function () {
if (props.image) {
if (props.image.toString() === '[object FileList]') {
try {
var image = props.image;
var fr = new FileReader();
fr.onload = function () {
return setRead(fr.result);
};
fr.readAsDataURL(image[0]);
} catch (_error) {
// error
}
} else if (typeof props.image === 'string') {
setRead(props.image);
} else {
setRead(null);
}
} else {
setRead(null);
}
}, [props.image]);
return /*#__PURE__*/_jsxs(InputBoxUploadImage, {
selected: props.selected === props.keyUp,
onClick: function onClick() {
return props.select && props.select(props.keyUp);
},
title: props.label,
children: [/*#__PURE__*/_jsx(InputBoxUploadImageClose, {
onClick: function onClick(event) {
event.stopPropagation();
if (props["delete"]) {
props["delete"](props.keyUp);
}
},
children: _svg || (_svg = /*#__PURE__*/_jsx("svg", {
width: "8",
height: "8",
viewBox: "0 0 8 8",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/_jsx("path", {
d: "M7.22732 1.96413C7.5337 1.66388 7.53619 1.17133 7.23286 0.867999C6.92953 0.564672 6.43698 0.567159 6.13673 0.873535L4.94238 2.09226C4.55028 2.49236 3.90604 2.49236 3.51395 2.09226L2.3196 0.873535C2.01935 0.567159 1.5268 0.564672 1.22347 0.867999C0.92014 1.17133 0.922628 1.66388 1.229 1.96413L2.44773 3.15848C2.84783 3.55058 2.84783 4.19481 2.44773 4.58691L1.229 5.78126C0.922628 6.08151 0.92014 6.57406 1.22347 6.87739C1.5268 7.18072 2.01935 7.17823 2.3196 6.87185L3.51395 5.65313C3.90604 5.25303 4.55028 5.25303 4.94238 5.65313L6.13673 6.87185C6.43698 7.17823 6.92953 7.18072 7.23286 6.87739C7.53619 6.57406 7.5337 6.08151 7.22732 5.78126L6.00859 4.58691C5.6085 4.19481 5.6085 3.55058 6.0086 3.15848L7.22732 1.96413Z",
fill: "#5F4B8B"
})
}))
}), /*#__PURE__*/_jsxs(InputBoxUploadImageWrapShow, {
children: [read && /*#__PURE__*/_jsx(InputBoxUploadImageShow, {
src: read,
alt: "logo inc"
}), !read && (_svg2 || (_svg2 = /*#__PURE__*/_jsxs("svg", {
width: "80",
height: "47",
viewBox: "0 0 80 47",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [/*#__PURE__*/_jsx("rect", {
width: "80",
height: "47",
fill: "#F7F8FD"
}), /*#__PURE__*/_jsx("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M52 16.2222C52 15 50.75 14 49.2222 14H29.7778C28.25 14 27 15 27 16.2222V31.7778C27 33 28.25 34 29.7778 34H49.2222C50.75 34 52 33 52 31.7778V16.2222ZM34.6394 25.6662L38.1117 29.0106L42.9728 23.9996L49.2228 30.6662H29.7783L34.6394 25.6662V25.6662Z",
fill: "#ECECFB"
})]
})))]
}), /*#__PURE__*/_jsx(InputBoxUploadImageText, {
children: props.label
})]
});
};
var InputBoxAddItems = function InputBoxAddItems(props) {
var refFile = React.useRef(null);
var listItems = props.listItems;
if (props.search && props.search.length > 0) {
listItems = listItems.filter(function (item) {
var _props$search;
return item.label.toLowerCase().includes(((_props$search = props.search) == null ? void 0 : _props$search.toLowerCase()) || '');
});
}
return /*#__PURE__*/_jsxs(Content, {
children: [props.isUpload ? /*#__PURE__*/_jsxs(InputBoxUploadImage, {
children: [/*#__PURE__*/_jsx(InputBoxUploadImageWrapShow, {
onClick: function onClick() {
return refFile && refFile.current.click();
},
children: _svg3 || (_svg3 = /*#__PURE__*/_jsxs("svg", {
width: "80",
height: "47",
viewBox: "0 0 80 47",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [/*#__PURE__*/_jsx("path", {
d: "M75 0H5C2.23858 0 0 2.23858 0 5V42C0 44.7614 2.23858 47 5 47H75C77.7614 47 80 44.7614 80 42V5C80 2.23858 77.7614 0 75 0Z",
fill: "#F7F8FD"
}), /*#__PURE__*/_jsx("path", {
d: "M49.35 21.04C48.67 17.59 45.64 15 42 15C39.11 15 36.6 16.64 35.35 19.04C32.34 19.36 30 21.91 30 25C30 28.31 32.69 31 36 31H49C51.76 31 54 28.76 54 26C54 23.36 51.95 21.22 49.35 21.04ZM44 24V28H40V24H37L42 19L47 24H44Z",
fill: "#B2BEDA"
})]
}))
}), _InputBoxUploadImageT || (_InputBoxUploadImageT = /*#__PURE__*/_jsx(InputBoxUploadImageText, {
children: "CSV"
})), /*#__PURE__*/_jsx(InputBoxUploadImageFile, {
ref: refFile,
type: "file",
accept: ".csv",
onChange: function onChange(event) {
return props.uploadFile && props.uploadFile(event.target.files);
}
})]
}) : null, /*#__PURE__*/_jsxs(InputBoxUploadImage, {
children: [/*#__PURE__*/_jsx(InputBoxUploadImageWrapShow, {
onClick: function onClick() {
return props.addItem && props.addItem();
},
title: props.label,
children: _svg4 || (_svg4 = /*#__PURE__*/_jsxs("svg", {
width: "80",
height: "47",
viewBox: "0 0 80 47",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [/*#__PURE__*/_jsx("rect", {
width: "80",
height: "47",
rx: "5",
fill: "#F7F8FD"
}), /*#__PURE__*/_jsx("circle", {
cx: "40",
cy: "24",
r: "8",
fill: "#F7F8FD"
}), /*#__PURE__*/_jsx("path", {
d: "M40.9993 20.4024C41.0037 19.9734 40.6571 19.6234 40.2282 19.6234V19.6234C39.7992 19.6234 39.4527 19.9734 39.457 20.4024L39.4742 22.1087C39.4799 22.6689 39.0244 23.1244 38.4642 23.1187L36.7579 23.1015C36.3289 23.0972 35.9789 23.4437 35.9789 23.8727V23.8727C35.9789 24.3017 36.3289 24.6482 36.7579 24.6438L38.4642 24.6266C39.0244 24.621 39.4799 25.0765 39.4742 25.6367L39.457 27.343C39.4527 27.7719 39.7992 28.122 40.2282 28.122V28.122C40.6571 28.122 41.0037 27.7719 40.9993 27.343L40.9821 25.6367C40.9764 25.0765 41.432 24.621 41.9922 24.6266L43.6985 24.6438C44.1274 24.6482 44.4775 24.3017 44.4775 23.8727V23.8727C44.4775 23.4437 44.1274 23.0972 43.6985 23.1015L41.9922 23.1187C41.432 23.1244 40.9764 22.6689 40.9821 22.1087L40.9993 20.4024Z",
fill: "#B2BEDA"
})]
}))
}), /*#__PURE__*/_jsx(InputBoxUploadImageText, {
children: props.label
})]
}), listItems.map(function (item, i) {
return /*#__PURE__*/_createElement(Item, _extends({}, item, {
key: i,
select: props.select,
selected: props.selected,
keyUp: item.key,
"delete": props["delete"]
}));
})]
});
};
export default InputBoxAddItems;