@mw-kit/mw-ui 1.1.0 → 1.2.1

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

@@ -12,6 +12,7 @@ interface CommonProps extends React.HTMLAttributes<HTMLDivElement> {
     maxWidth?: string | number;
     maxHeight?: string | number;
     references?: References;
+    zIndex?: number;
 }
 export interface AbsoluteContainerProps extends CommonProps {
     position?: Position;

package/dist/components/Input/components/Select/footer.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Footer: () => JSX.Element;
+export default Footer;

package/dist/components/Input/components/Select/header.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Header: () => JSX.Element;
+export default Header;

package/dist/components/Input/components/Select/interfaces.d.ts

@@ -5,29 +5,34 @@ import { InputProps } from '../Input/interfaces';
 export interface Data {
     value: string;
 }
-interface Option extends Data {
+export interface Option extends Data {
     label: string | {
         text: string;
         element: ElementOrString;
     };
     onClick?: (index: number, data: Data) => void;
 }
+interface LoaderReturn {
+    options: Option[];
+    lastPage: boolean;
+}
+export declare type Loader = (search: string, page: number) => Promise<LoaderReturn | Option[]>;
 interface CommonProps extends Omit<InputProps, 'type' | 'mask' | 'icon' | 'setValue' | 'name' | 'value' | 'onChange'> {
     onScrollEnd?: () => Promise<void>;
     position?: Position;
     disableAutoPosition?: boolean;
-    search?: (value: string) => Promise<void>;
+    loader?: Loader;
+    options: Option[];
+    setOptions: React.Dispatch<React.SetStateAction<Option[]>>;
 }
 export interface OneSelectProps extends CommonProps {
     type: 'select';
-    options: Option[];
     name?: string;
     setValue: (value: string) => void;
     value: string;
 }
 export interface MultSelectProps extends CommonProps {
     type: 'select-multiple';
-    options: Option[];
     setValue: (value: string[]) => void;
     value: string[];
     selectAll?: boolean;
@@ -35,9 +40,11 @@ export interface MultSelectProps extends CommonProps {
 export declare type SelectProps = OneSelectProps | MultSelectProps;
 export interface ContextInterface {
     props: SelectProps;
-    open: boolean;
     setOpen: React.Dispatch<React.SetStateAction<boolean>>;
     checked: string[];
     setChecked: React.Dispatch<React.SetStateAction<string[]>>;
+    searched: string;
+    setSearched: React.Dispatch<React.SetStateAction<string>>;
+    setPage: React.Dispatch<React.SetStateAction<number>>;
 }
 export {};

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

@@ -11908,7 +11908,7 @@ var positions = {
     return styled.css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n    top: ", ";\n    left: 0;\n  "])), top || '100%');
   }
 };
-var Container$2 = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  > div {\n    box-shadow: 0px 3px 6px ", ";\n    border: 1px solid ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  position: absolute;\n\n  ", "\n\n  ", "\n"])), function (_ref9) {
+var Container$2 = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  > div {\n    box-shadow: 0px 3px 6px ", ";\n    border: 1px solid ", ";\n  }\n\n  z-index: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  position: absolute;\n\n  ", "\n\n  ", "\n"])), function (_ref9) {
   var theme = _ref9.theme;
   return theme.useTypography('p');
 }, function (_ref10) {
@@ -11918,27 +11918,30 @@ var Container$2 = styled__default.div(_templateObject9$1 || (_templateObject9$1
   var theme = _ref11.theme;
   return theme.colors.lightestGrey;
 }, function (_ref12) {
-  var width = _ref12.width;
+  var zIndex = _ref12.zIndex;
+  return zIndex || 1;
+}, function (_ref13) {
+  var width = _ref13.width;
   if (!width) return;
   return styled.css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), width);
-}, function (_ref13) {
-  var height = _ref13.height;
+}, function (_ref14) {
+  var height = _ref14.height;
   if (!height) return;
   return styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), height);
-}, function (_ref14) {
-  var maxWidth = _ref14.maxWidth;
+}, function (_ref15) {
+  var maxWidth = _ref15.maxWidth;
   if (!maxWidth) return;
   return styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      max-width: ", ";\n    "])), maxWidth);
-}, function (_ref15) {
-  var maxHeight = _ref15.maxHeight;
+}, function (_ref16) {
+  var maxHeight = _ref16.maxHeight;
   if (!maxHeight) return;
   return styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      max-height: ", ";\n    "])), maxHeight);
-}, function (_ref16) {
-  var position = _ref16.position,
-      references = _ref16.references;
-  return positions[position](references || {});
 }, function (_ref17) {
-  var firstRender = _ref17.firstRender;
+  var position = _ref17.position,
+      references = _ref17.references;
+  return positions[position](references || {});
+}, function (_ref18) {
+  var firstRender = _ref18.firstRender;
   if (!firstRender) return;
   return styled.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      visibility: hidden;\n    "])));
 });
@@ -13386,52 +13389,53 @@ var SelectAllContainer = styled__default.div(_templateObject4$b || (_templateObj
 var Header$1 = function Header() {
   var context = useContext();
 
-  if (!context.props.search && !context.props.multiple) {
+  var _useState = React.useState(''),
+      search = _useState[0],
+      setSearch = _useState[1];
+
+  if (!context.props.loader) {
     return React__default.createElement(React__default.Fragment, null);
   }
 
-  var _useState = React.useState(''),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var _context$props = context.props,
-      search = _context$props.search,
-      options = _context$props.options,
+  var options = context.props.options,
       checked = context.checked,
-      setChecked = context.setChecked;
+      setChecked = context.setChecked,
+      searched = context.searched,
+      setSearched = context.setSearched,
+      setPage = context.setPage;
 
   var onClick = function onClick() {
-    return setChecked(function (prev) {
+    setChecked(function (prev) {
       return prev.length === options.length ? [] : options.map(function (option) {
         return option.value;
       });
     });
   };
 
+  var onSearch = function onSearch() {
+    setSearched(search);
+    setPage(1);
+  };
+
   return React__default.createElement(HeaderContainer, null, context.props.type === 'select-multiple' && context.props.selectAll && React__default.createElement(SelectAllContainer, null, React__default.createElement("b", null, "Selecionados (", checked.length, ")"), React__default.createElement(Button$1, {
     type: 'button',
     content: 'Selecionar todos',
     appearance: 'link',
     onClick: onClick,
     color: 'darkBlue'
-  })), search && React__default.createElement(Input$1, {
+  })), React__default.createElement(Input$1, {
     type: 'search',
     placeholder: 'Pesquisa',
-    onChange: function onChange(event) {
-      return setValue(event.target.value);
-    },
-    value: value,
-    onPressEnter: function onPressEnter() {
-      return search(value);
-    },
+    setValue: setSearch,
+    value: search,
+    onPressEnter: onSearch,
+    clearable: search !== '' && search === searched,
     icon: {
       icon: {
         type: 'feather',
         icon: 'search'
       },
-      onClick: function onClick() {
-        return search(value);
-      }
+      onClick: onSearch
     }
   }));
 };
@@ -13517,19 +13521,34 @@ var getOptions = function getOptions(props, checked, setChecked) {
 };
 
 var Select = React__default.forwardRef(function (props, ref) {
-  var onScrollEnd = props.onScrollEnd,
-      position = props.position,
+  var position = props.position,
       disableAutoPosition = props.disableAutoPosition,
-      search = props.search,
+      loader = props.loader,
       type = props.type;
 
-  var _useState2 = React.useState(false),
-      open = _useState2[0],
-      setOpen = _useState2[1];
+  var _useState = React.useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
+
+  var _useState2 = React.useState(''),
+      searched = _useState2[0],
+      setSearched = _useState2[1];
+
+  var _useState3 = React.useState(1),
+      page = _useState3[0],
+      setPage = _useState3[1];
+
+  var _useState4 = React.useState(false),
+      lastPage = _useState4[0],
+      setLastPage = _useState4[1];
 
-  var _useState3 = React.useState(Array.isArray(props.value) ? [].concat(props.value) : []),
-      checked = _useState3[0],
-      setChecked = _useState3[1];
+  var _useState5 = React.useState(false),
+      open = _useState5[0],
+      setOpen = _useState5[1];
+
+  var _useState6 = React.useState(Array.isArray(props.value) ? [].concat(props.value) : []),
+      checked = _useState6[0],
+      setChecked = _useState6[1];
 
   var options = getOptions(props, checked, setChecked);
   var inputProps = filterObject(props, ['type', 'onScrollEnd', 'options', 'position', 'disableAutoPosition', 'value']);
@@ -13547,13 +13566,53 @@ var Select = React__default.forwardRef(function (props, ref) {
     inputProps.value = selected ? selected.label.text : '';
   }
 
+  var _onScrollEnd = props.onScrollEnd || function () {};
+
+  var onScrollEnd = function onScrollEnd() {
+    if (!lastPage) {
+      setPage(function (prev) {
+        return prev + 1;
+      });
+    }
+
+    _onScrollEnd();
+  };
+
+  var onSubmit = React.useCallback(function () {
+    try {
+      if (!props.loader) return Promise.resolve();
+      setLoading(true);
+      return Promise.resolve(props.loader(searched, page)).then(function (optionsResult) {
+        if (Array.isArray(optionsResult)) {
+          props.setOptions(page === 1 ? optionsResult : function (prev) {
+            return prev.concat(optionsResult);
+          });
+          setLastPage(true);
+        } else {
+          props.setOptions(page === 1 ? optionsResult.options : function (prev) {
+            return prev.concat(optionsResult.options);
+          });
+          setLastPage(optionsResult.lastPage);
+        }
+
+        setLoading(false);
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [searched, page]);
+  React.useEffect(function () {
+    onSubmit();
+  }, [onSubmit]);
   return React__default.createElement(Provider.Provider, {
     value: {
       props: props,
-      open: open,
       setOpen: setOpen,
       checked: checked,
-      setChecked: setChecked
+      setPage: setPage,
+      setChecked: setChecked,
+      searched: searched,
+      setSearched: setSearched
     }
   }, React__default.createElement(RelativeContainer$1, {
     ref: useOnClickOut(function () {
@@ -13567,6 +13626,7 @@ var Select = React__default.forwardRef(function (props, ref) {
         return !prev;
       });
     },
+    loading: props.loading || loading,
     icon: {
       position: 'right',
       icon: {
@@ -13593,7 +13653,7 @@ var Select = React__default.forwardRef(function (props, ref) {
     },
     before: React__default.createElement(Header$1, null),
     after: React__default.createElement(Footer$1, null),
-    scrollHeight: search ? '135px' : '165px'
+    scrollHeight: loader ? '135px' : '165px'
   })));
 });
 Select.displayName = 'Select';
@@ -15530,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
@@ -15539,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) {
@@ -15561,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) {
@@ -15633,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