@mw-kit/mw-ui 1.1.1 → 1.2.0

package/dist/components/Zoom/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ZoomProps } from './interfaces';
+declare const Zoom: (props: ZoomProps) => JSX.Element;
+export default Zoom;

package/dist/components/Zoom/interfaces.d.ts

@@ -0,0 +1,9 @@
+import { ModalProps } from '../Modal/interfaces';
+export interface StyledZoomProps {
+    width?: number | string;
+    height?: number | string;
+}
+export interface ZoomProps extends StyledZoomProps {
+    src: string;
+    defaultClickOptions?: Partial<ModalProps>;
+}

package/dist/components/Zoom/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { StyledZoomProps } from './interfaces';
+export declare const Image: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledZoomProps, never>;
+export declare const Dimmer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Button: import("styled-components").StyledComponent<(props: import("../Button/interfaces").ButtonProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const ModalContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/index.d.ts

@@ -15,4 +15,5 @@ export { default as MwToast } from './Toast';
 export { default as MwDatePicker } from './Calendar';
 export { default as MwCalendarInterval } from './CalendarInterval';
 export { default as MwPlaceholder } from './Placeholder';
+export { default as MwZoom } from './Zoom';
 export { default as MwEllipsisContainer } from './EllipsisContainer';

package/dist/index.js

@@ -15590,6 +15590,79 @@ var Placeholder = function Placeholder(props) {
   }
 };
 
+var _templateObject$E, _templateObject2$x, _templateObject3$w, _templateObject4$t, _templateObject5$r;
+var Image = styled__default.img(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
+var Container$n = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n\n  &,\n  ", " {\n    width: ", ";\n\n    height: ", ";\n  }\n"])), Image, function (_ref) {
+  var width = _ref.width;
+
+  switch (typeof width) {
+    case 'string':
+      return width;
+
+    case 'number':
+      return width + "px";
+
+    default:
+      return 'auto';
+  }
+}, function (_ref2) {
+  var height = _ref2.height;
+
+  switch (typeof height) {
+    case 'string':
+      return height;
+
+    case 'number':
+      return height + "px";
+
+    default:
+      return 'auto';
+  }
+});
+var Dimmer = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: opacity 0.5s;\n  cursor: pointer;\n\n  :hover {\n    opacity: 1;\n  }\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.getColor('greyishBlue', 50);
+});
+var Button$4 = styled__default(Button$1)(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.getColor('white', 50);
+});
+var ModalContent = styled__default.div(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n\n  img {\n    max-height: 100%;\n    max-width: 100%;\n  }\n"])));
+
+var _excluded$3 = ["src", "defaultClickOptions"];
+
+var Zoom = function Zoom(props) {
+  var src = props.src,
+      imgProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+
+  var _useState = React.useState(false),
+      modalOpened = _useState[0],
+      setModalOpened = _useState[1];
+
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$n, Object.assign({}, imgProps, {
+    onClick: function onClick() {
+      return setModalOpened(true);
+    }
+  }), React__default.createElement(Image, {
+    src: src,
+    alt: 'zoom'
+  }), React__default.createElement(Dimmer, null, React__default.createElement(Button$4, {
+    content: 'Zoom',
+    color: 'white',
+    onClick: function onClick() {
+      return setModalOpened(true);
+    }
+  }))), React__default.createElement(Modal$1, {
+    openState: [modalOpened, setModalOpened],
+    size: 'large',
+    title: 'Zoom',
+    closeOnClickOutside: true
+  }, React__default.createElement(ModalContent, null, React__default.createElement("img", {
+    src: src,
+    alt: 'zoom'
+  }))));
+};
+
 var theme = {
   sizes: sizes,
   fontSizes: fontSizes
@@ -15599,14 +15672,14 @@ var theme$1 = {
   button: theme
 };
 
-var _templateObject$E;
-var FontStyles = styled.createGlobalStyle(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n"])));
+var _templateObject$F;
+var FontStyles = styled.createGlobalStyle(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n"])));
 
 var Globals = function Globals() {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(FontStyles, null));
 };
 
-var _templateObject$F;
+var _templateObject$G;
 
 var getColor$1 = function getColor(color, opacity) {
   if (opacity === void 0) {
@@ -15621,7 +15694,7 @@ var useTypography = function useTypography(typography) {
       fontFamily = _typographies$typogra.fontFamily,
       fontWeight = _typographies$typogra.fontWeight,
       fontSize = _typographies$typogra.fontSize;
-  return styled.css(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n  "])), fontFamily, fontWeight, fontSize);
+  return styled.css(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n  "])), fontFamily, fontWeight, fontSize);
 };
 
 var isDarkColor = function isDarkColor(color, ifDark, ifLight) {
@@ -15693,5 +15766,6 @@ exports.MwScrollContainer = ScrollContainer;
 exports.MwTabs = Tabs$1;
 exports.MwTextArea = TextArea;
 exports.MwToast = Toast;
+exports.MwZoom = Zoom;
 exports.ThemeProvider = ThemeProvider;
 //# sourceMappingURL=index.js.map