ur-ui-kit-tm
Version:
unlimited robotics ui kit
122 lines (121 loc) • 8.3 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useState } from "react";
import { isTablet } from "react-device-detect";
import "react-image-crop/dist/ReactCrop.css";
import { Field, Form, Formik } from "formik";
import ReactCrop from "react-image-crop";
import Modal from "react-modal";
import moment from "moment";
import { AddPlaceSchema } from "./addPlaceModal.schema";
import { LocationIcon } from "../../assets";
import { Button } from "..";
import { AreModalTitle, DateUpdated, ErrorContainer, InputInput, InputTitle, ModalFooter, PlacesContainer, ProcessingButtonContainer, SubmitButtonContainer, WholeWrapper, ModalBody, } from "./addPlaceModal.styled";
var customStyles = {
overlay: {
backgroundColor: "#08183f21",
zIndex: 3333,
},
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
boxShadow: "0px 4px 10px rgba(0, 147, 198, 0.18)",
borderRadius: "2rem",
border: " 2px solid #0096C6",
padding: 0,
maxWidth: "Calc(100vw - 3.2rem)",
maxHeight: "Calc(100vh - 3.2rem)",
},
};
export var AddPlaceModal = function (_a) {
var isOpen = _a.isOpen, _b = _a.onSubmit, onSubmit = _b === void 0 ? function () { } : _b, _c = _a.onRequestClose, onRequestClose = _c === void 0 ? function () { } : _c, initialCoordinates = _a.initialCoordinates, initialLocation = _a.initialLocation, loading = _a.loading, title = _a.title, validate = _a.validate, _d = _a.mapUrl, mapUrl = _d === void 0 ? "" : _d;
var _e = useState(0), imgOrigW = _e[0], setImgOrigW = _e[1];
var _f = useState(0), imgW = _f[0], setImgW = _f[1];
var _g = useState(0), imgH = _g[0], setImgH = _g[1];
var tabletView = useMemo(function () {
var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
return isTablet || (innerWidth / innerHeight > 1 && innerHeight < 720);
}, [isTablet, window]);
useEffect(function () {
var img = new Image();
img.onload = function () {
var width = img.width, height = img.height;
setImgOrigW(width);
var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
var _a = tabletView ? [528, 128] : [128, 564], widthDiff = _a[0], heightDiff = _a[1];
var imgMax = width / height >= (innerWidth - widthDiff) / (innerHeight - heightDiff);
if (imgMax) {
setImgW(innerWidth - widthDiff);
setImgH(((innerWidth - widthDiff) * height) / width);
}
else {
setImgW(((innerHeight - heightDiff) * width) / height);
setImgH(innerHeight - heightDiff);
}
};
img.src = mapUrl;
}, [mapUrl]);
var scale = useMemo(function () { return imgW / imgOrigW; }, [imgOrigW, imgW]);
return (_jsx(Modal, __assign({ ariaHideApp: false, isOpen: isOpen, style: customStyles, onRequestClose: onRequestClose }, { children: _jsx(Formik, __assign({ initialValues: {
crop: initialCoordinates
? {
unit: "px",
x: initialCoordinates.x1,
y: initialCoordinates.y1,
width: initialCoordinates.x2 - initialCoordinates.x1,
height: initialCoordinates.y2 - initialCoordinates.y1,
}
: {},
location: initialLocation,
}, onSubmit: function (v) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
if (!(typeof ((_a = v.crop) === null || _a === void 0 ? void 0 : _a.x) === "number" &&
typeof ((_b = v.crop) === null || _b === void 0 ? void 0 : _b.y) === "number" &&
((_c = v.crop) === null || _c === void 0 ? void 0 : _c.width) &&
((_d = v.crop) === null || _d === void 0 ? void 0 : _d.height))) {
return;
}
onSubmit({
location: v.location,
crop: {
x1: (_e = v.crop) === null || _e === void 0 ? void 0 : _e.x,
y1: (_f = v.crop) === null || _f === void 0 ? void 0 : _f.y,
x2: ((_g = v.crop) === null || _g === void 0 ? void 0 : _g.x) + ((_h = v.crop) === null || _h === void 0 ? void 0 : _h.width),
y2: ((_j = v.crop) === null || _j === void 0 ? void 0 : _j.y) + ((_k = v.crop) === null || _k === void 0 ? void 0 : _k.height),
},
});
onRequestClose();
}, validationSchema: validate ? AddPlaceSchema : undefined }, { children: function (_a) {
var setFieldValue = _a.setFieldValue, errors = _a.errors, touched = _a.touched;
return (_jsx(Form, { children: _jsxs(WholeWrapper, __assign({ style: {
flexDirection: tabletView ? "row" : "column",
width: tabletView ? "Calc(" + imgW + "px + 64px + 400px)" : "auto",
} }, { children: [_jsxs(PlacesContainer, __assign({ style: { minWidth: imgW + 64 + "px" } }, { children: [!tabletView && _jsx(AreModalTitle, { children: title }, void 0), _jsx(Field, __assign({ id: "crop", name: "crop" }, { children: function (_a) {
var field = _a.field;
return (_jsx(ReactCrop, { src: mapUrl, crop: field.value, imageStyle: { minWidth: imgW + "px" }, onChange: function (crop) {
setFieldValue(field.name, __assign({}, crop));
} }, void 0));
} }), void 0)] }), void 0), _jsxs(ModalBody, __assign({ style: tabletView
? { minHeight: imgH + 64 + "px", minWidth: "400px" }
: { width: "100%" } }, { children: [_jsx(Field, __assign({ id: "location", name: "location" }, { children: function (_a) {
var field = _a.field;
return (_jsxs("div", __assign({ style: { width: "100%" } }, { children: [tabletView && (_jsx(AreModalTitle, __assign({ style: { paddingBottom: "4.8rem" } }, { children: title }), void 0)), _jsxs(InputTitle, { children: [_jsx(LocationIcon, { height: "2rem", color: location ? undefined : "#7e9586", style: { marginRight: "0.6rem" } }, void 0), "Location"] }, void 0), _jsx(InputInput, { value: field.value, onChange: function (e) { return setFieldValue(field.name, e.target.value); } }, void 0), _jsx(DateUpdated, { children: "Date: " + moment().format("MMM, D, YYYY") }, void 0), validate && touched.location && !!Object.keys(errors).length && (_jsx(ErrorContainer, { children: (errors === null || errors === void 0 ? void 0 : errors.crop) ||
(errors === null || errors === void 0 ? void 0 : errors.location) ||
"Please provide valid location and name" }, void 0))] }), void 0));
} }), void 0), _jsx(ModalFooter, { children: loading ? (_jsx(ProcessingButtonContainer, { children: _jsx(Button, { color: "light_blue", label: "Processing..." }, void 0) }, void 0)) : (_jsx(SubmitButtonContainer, { children: _jsx(Button, { color: "light_blue", label: "Add Place" }, void 0) }, void 0)) }, void 0)] }), void 0)] }), void 0) }, void 0));
} }), void 0) }), void 0));
};