@app-studio/web 0.3.7 → 0.3.11

package/dist/web.esm.js

@@ -1,6 +1,5 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { View, Element, Typography, useTheme, Input } from 'app-studio';
-export { View } from 'app-studio';
+import React, { useState, useRef, useEffect, useMemo, useCallback, Fragment } from 'react';
+import { View as View$1, Element, Typography, useTheme, Input, Image } from 'app-studio';
 import { Link as Link$1 } from 'react-router-dom';
 import format from 'date-fns/format';
 import { create } from 'zustand';
@@ -52,6 +51,34 @@ var useLinkState = function useLinkState() {
   };
 };
 
+var Top = function Top(props) {
+  return React.createElement(View$1, Object.assign({
+    marginBottom: "auto"
+  }, props));
+};
+var Bottom = function Bottom(props) {
+  return React.createElement(View$1, Object.assign({
+    marginTop: "auto"
+  }, props));
+};
+var Left = function Left(props) {
+  return React.createElement(View$1, Object.assign({
+    marginRight: "auto"
+  }, props));
+};
+var Right = function Right(props) {
+  return React.createElement(View$1, Object.assign({
+    marginLeft: "auto"
+  }, props));
+};
+var Inline = function Inline(props) {
+  return React.createElement(View$1, Object.assign({
+    display: 'inline-flex',
+    wordBreak: "break-word"
+  }, props));
+};
+var View = View$1;
+
 var _excluded = ["children", "wrap", "justify", "isReversed"];
 var HorizontalView = function HorizontalView(_ref) {
   var children = _ref.children,
@@ -2306,7 +2333,7 @@ var VerticalView = function VerticalView(_ref) {
     _ref$isReversed = _ref.isReversed,
     isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-  return React.createElement(View, Object.assign({
+  return React.createElement(View$1, Object.assign({
     display: "flex",
     flexWrap: wrap,
     flexDirection: isReversed ? 'column-reverse' : 'column',
@@ -4297,31 +4324,43 @@ var Loader = LoaderComponent;
 
 var useModalStore = /*#__PURE__*/create(function (set) {
   return {
-    isOpen: false,
-    onClose: function onClose() {},
-    toggleModal: function toggleModal() {
-      return set(function (state) {
-        return {
-          isOpen: !state.isOpen
-        };
-      });
+    modal: false,
+    modalProps: {
+      isVisible: false
     },
-    setOpen: function setOpen(isOpen) {
-      return set(function () {
-        return {
-          isOpen: isOpen
-        };
+    overlayProps: {},
+    show: function show(modal, modalProps, overlayProps) {
+      if (modalProps === void 0) {
+        modalProps = {};
+      }
+      if (overlayProps === void 0) {
+        overlayProps = {};
+      }
+      if (modal) {
+        modalProps.isVisible = true;
+      }
+      set(function (state) {
+        return _extends({}, state, {
+          modal: modal,
+          modalProps: modalProps,
+          overlayProps: overlayProps
+        });
       });
     },
-    setOnClose: function setOnClose(onClose) {
-      return set(function () {
-        return {
-          onClose: onClose
-        };
+    hide: function hide() {
+      set(function (state) {
+        return _extends({}, state, {
+          modalProps: {
+            isVisible: false
+          }
+        });
       });
     }
   };
 });
+var hideModal = function hideModal() {
+  useModalStore.getState().hide();
+};
 
 var ContainerShapes = {
   sharp: {
@@ -4376,17 +4415,6 @@ var ModalOverlay = function ModalOverlay(_ref) {
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'center' : _ref$position,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
-  var setOpen = useModalStore(function (state) {
-    return state.setOpen;
-  });
-  var setOnClose = useModalStore(function (state) {
-    return state.setOnClose;
-  });
-  useEffect(function () {
-    setOnClose(onClose);
-    if (isOpen) setOpen();
-  });
-  if (!isOpen) return null;
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -4454,9 +4482,7 @@ var ModalHeader = function ModalHeader(_ref3) {
     _ref3$buttonPosition = _ref3.buttonPosition,
     buttonPosition = _ref3$buttonPosition === void 0 ? 'right' : _ref3$buttonPosition,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3$2);
-  var onClose = useModalStore(function (state) {
-    return state.onClose;
-  });
+  var onClose = props.onClose ? props.onClose : hideModal;
   var buttonIcon = React.createElement(Button, {
     onClick: onClose,
     colorScheme: "transparent",
@@ -4503,6 +4529,33 @@ var ModalFooter = function ModalFooter(_ref5) {
   }, props), children);
 };
 
+var ModalLayout = function ModalLayout(_ref) {
+  var modals = _ref.modals;
+  var modalStore = useModalStore(function (_ref2) {
+    var modal = _ref2.modal,
+      modalProps = _ref2.modalProps,
+      overlayProps = _ref2.overlayProps;
+    return {
+      modal: modal,
+      modalProps: modalProps,
+      overlayProps: overlayProps
+    };
+  });
+  if (typeof modalStore.modal === 'boolean') {
+    return null;
+  }
+  var Modal = modals[modalStore.modal];
+  if (!Modal) {
+    console.error(modalStore.modal + " modal doesn't exist");
+    return null;
+  }
+  return React.createElement(Fragment, null, React.createElement(ModalOverlay, Object.assign({
+    isOpen: modalStore.modalProps.isVisible,
+    onClose: hideModal,
+    blur: 10
+  }, modalStore.overlayProps), Modal !== undefined && React.createElement(Modal, Object.assign({}, modalStore.modalProps))));
+};
+
 /**
  * It is a custom content overlay that appears on top of the main screen.
  */
@@ -4516,6 +4569,33 @@ Modal.Container = ModalContainer;
 Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
+Modal.Layout = ModalLayout;
+
+var _excluded$t = ["src", "color"],
+  _excluded2$3 = ["path"];
+var FileSVG = function FileSVG(_ref) {
+  var src = _ref.src,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+  var _useTheme = useTheme(),
+    getColor = _useTheme.getColor;
+  var Colorprops = color ? {
+    fill: getColor(color),
+    stroke: getColor(color)
+  } : {};
+  return React.createElement(Center, Object.assign({}, props), React.createElement(Image, Object.assign({}, Colorprops, {
+    content: 'url("' + src + '")',
+    width: "100%",
+    height: "100%"
+  })));
+};
+var FileImage = function FileImage(_ref2) {
+  var path = _ref2.path,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+  return React.createElement(Image, Object.assign({
+    src: path
+  }, props));
+};
 
-export { Button, Center, Checkbox, CountryPicker, DatePicker, Horizontal, Link, Loader, Modal, Password, Select, Switch, Text, TextArea, TextField, Vertical };
+export { Bottom, Button, Center, Checkbox, CountryPicker, DatePicker, FileImage, FileSVG, Horizontal, Inline, Left, Link, Loader, Modal, Password, Right, Select, Switch, Text, TextArea, TextField, Top, Vertical, View };
 //# sourceMappingURL=web.esm.js.map