component-shared 1.0.0

package/Components/DropZone/components/SnackbarContentWrapper.js

@@ -0,0 +1,94 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import IconButton from '@mui/material/IconButton';
+import SnackbarContent from '@mui/material/SnackbarContent';
+import { withStyles } from '@mui/styles';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CloseIcon from '@mui/icons-material/Close';
+import ErrorIcon from '@mui/icons-material/Error';
+import InfoIcon from '@mui/icons-material/Info';
+import WarningIcon from '@mui/icons-material/Warning';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { defaultTheme } from '../helpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var _excluded = ["classes", "className", "message", "onClose", "variant"];
+var variantIcon = {
+  success: CheckCircleIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+  info: InfoIcon
+};
+var styles = function styles(theme) {
+  return {
+    successAlert: {
+      backgroundColor: theme.palette.success.main
+    },
+    errorAlert: {
+      backgroundColor: theme.palette.error.main
+    },
+    infoAlert: {
+      backgroundColor: theme.palette.info.main
+    },
+    warningAlert: {
+      backgroundColor: theme.palette.warning.main
+    },
+    message: {
+      display: "flex",
+      alignItems: "center",
+      "& > svg": {
+        marginRight: theme.spacing(1)
+      }
+    },
+    icon: {
+      fontSize: 20,
+      opacity: 0.9
+    },
+    closeButton: {}
+  };
+};
+var SnackbarContentWrapper = /*#__PURE__*/React.forwardRef(function (props, refObject) {
+  var classes = props.classes,
+    className = props.className,
+    message = props.message,
+    onClose = props.onClose,
+    variant = props.variant,
+    other = _objectWithoutProperties(props, _excluded);
+  var Icon = variantIcon[variant];
+  return /*#__PURE__*/jsx(SnackbarContent, _objectSpread2({
+    ref: refObject,
+    className: clsx(classes["".concat(variant, "Alert")], className),
+    "aria-describedby": "client-snackbar",
+    message: /*#__PURE__*/jsxs("span", {
+      id: "client-snackbar",
+      className: classes.message,
+      children: [/*#__PURE__*/jsx(Icon, {
+        className: classes.icon
+      }), message]
+    }),
+    action: [/*#__PURE__*/jsx(IconButton, {
+      "aria-label": "Close",
+      color: "inherit",
+      className: classes.closeButton,
+      onClick: onClose,
+      children: /*#__PURE__*/jsx(CloseIcon, {
+        className: classes.icon
+      })
+    }, "close")]
+  }, other));
+});
+SnackbarContentWrapper.propTypes = {
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  message: PropTypes.node,
+  onClose: PropTypes.func,
+  variant: PropTypes.oneOf(["success", "warning", "error", "info"]).isRequired
+};
+var SnackbarContentWrapper$1 = withStyles(styles, {
+  name: "MuiDropzoneSnackbar",
+  defaultTheme: defaultTheme
+})(SnackbarContentWrapper);
+
+export { SnackbarContentWrapper$1 as default };
+//# sourceMappingURL=SnackbarContentWrapper.js.map

package/Components/DropZone/components/SnackbarContentWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarContentWrapper.js","sources":["../../../../src/Components/DropZone/components/SnackbarContentWrapper.jsx"],"sourcesContent":["import IconButton from \"@mui/material/IconButton\";\r\nimport SnackbarContent from \"@mui/material/SnackbarContent\";\r\nimport { withStyles } from \"@mui/styles\";\r\nimport CheckCircleIcon from \"@mui/icons-material/CheckCircle\";\r\nimport CloseIcon from \"@mui/icons-material/Close\";\r\nimport ErrorIcon from \"@mui/icons-material/Error\";\r\nimport InfoIcon from \"@mui/icons-material/Info\";\r\nimport WarningIcon from \"@mui/icons-material/Warning\";\r\nimport clsx from \"clsx\";\r\nimport PropTypes from \"prop-types\";\r\nimport * as React from \"react\";\r\nimport { defaultTheme } from \"../helpers\";\r\n\r\nconst variantIcon = {\r\n  success: CheckCircleIcon,\r\n  warning: WarningIcon,\r\n  error: ErrorIcon,\r\n  info: InfoIcon,\r\n};\r\n\r\nconst styles = (theme) => ({\r\n  successAlert: {\r\n    backgroundColor: theme.palette.success.main,\r\n  },\r\n  errorAlert: {\r\n    backgroundColor: theme.palette.error.main,\r\n  },\r\n  infoAlert: {\r\n    backgroundColor: theme.palette.info.main,\r\n  },\r\n  warningAlert: {\r\n    backgroundColor: theme.palette.warning.main,\r\n  },\r\n  message: {\r\n    display: \"flex\",\r\n    alignItems: \"center\",\r\n    \"& > svg\": {\r\n      marginRight: theme.spacing(1),\r\n    },\r\n  },\r\n  icon: {\r\n    fontSize: 20,\r\n    opacity: 0.9,\r\n  },\r\n  closeButton: {},\r\n});\r\n\r\nconst SnackbarContentWrapper = React.forwardRef((props, refObject) => {\r\n  const { classes, className, message, onClose, variant, ...other } = props;\r\n  const Icon = variantIcon[variant];\r\n  return (\r\n    <SnackbarContent\r\n      ref={refObject}\r\n      className={clsx(classes[`${variant}Alert`], className)}\r\n      aria-describedby=\"client-snackbar\"\r\n      message={\r\n        <span id=\"client-snackbar\" className={classes.message}>\r\n          <Icon className={classes.icon} />\r\n          {message}\r\n        </span>\r\n      }\r\n      action={[\r\n        <IconButton\r\n          key=\"close\"\r\n          aria-label=\"Close\"\r\n          color=\"inherit\"\r\n          className={classes.closeButton}\r\n          onClick={onClose}\r\n        >\r\n          <CloseIcon className={classes.icon} />\r\n        </IconButton>,\r\n      ]}\r\n      {...other}\r\n    />\r\n  );\r\n});\r\n\r\nSnackbarContentWrapper.propTypes = {\r\n  classes: PropTypes.object.isRequired,\r\n  className: PropTypes.string,\r\n  message: PropTypes.node,\r\n  onClose: PropTypes.func,\r\n  variant: PropTypes.oneOf([\"success\", \"warning\", \"error\", \"info\"]).isRequired,\r\n};\r\n\r\nexport default withStyles(styles, {\r\n  name: \"MuiDropzoneSnackbar\",\r\n  defaultTheme,\r\n})(SnackbarContentWrapper);\r\n"],"names":["variantIcon","success","CheckCircleIcon","warning","WarningIcon","error","ErrorIcon","info","InfoIcon","styles","theme","successAlert","backgroundColor","palette","main","errorAlert","infoAlert","warningAlert","message","display","alignItems","marginRight","spacing","icon","fontSize","opacity","closeButton","SnackbarContentWrapper","React","forwardRef","props","refObject","classes","className","onClose","variant","other","_objectWithoutProperties","_excluded","Icon","_jsx","SnackbarContent","_objectSpread","ref","clsx","concat","_jsxs","id","children","action","IconButton","color","onClick","CloseIcon","propTypes","PropTypes","object","isRequired","string","node","func","oneOf","withStyles","name","defaultTheme"],"mappings":"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"}

package/Components/DropZone/helpers.d.ts

@@ -0,0 +1,5 @@
+export function isImage(file: any): true | undefined;
+export function convertBytesToMbsOrKbs(filesize: any): string;
+export function createFileFromUrl(url: any): Promise<File>;
+export function readFile(file: any): Promise<any>;
+export const defaultTheme: import("@mui/material").Theme;

package/Components/DropZone/helpers.js

@@ -0,0 +1,64 @@
+import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { createTheme } from '@mui/material';
+
+function isImage(file) {
+  if (file.type.split("/")[0] === "image") {
+    return true;
+  }
+}
+function convertBytesToMbsOrKbs(filesize) {
+  var size = "";
+  if (filesize >= 1048576) {
+    size = filesize / 1048576 + " megabytes";
+  } else if (filesize >= 1024) {
+    size = filesize / 1024 + " kilobytes";
+  } else {
+    size = filesize + " bytes";
+  }
+  return size;
+}
+function createFileFromUrl(_x) {
+  return _createFileFromUrl.apply(this, arguments);
+}
+function _createFileFromUrl() {
+  _createFileFromUrl = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(url) {
+    var response, data, metadata, filename;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          _context.n = 1;
+          return fetch(url);
+        case 1:
+          response = _context.v;
+          _context.n = 2;
+          return response.blob();
+        case 2:
+          data = _context.v;
+          metadata = {
+            type: data.type
+          };
+          filename = url.replace(/\?.+/, "").split("/").pop();
+          return _context.a(2, new File([data], filename, metadata));
+      }
+    }, _callee);
+  }));
+  return _createFileFromUrl.apply(this, arguments);
+}
+function readFile(file) {
+  return new Promise(function (resolve, reject) {
+    var reader = new FileReader();
+    reader.onload = function (event) {
+      var _event$target;
+      resolve(event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result);
+    };
+    reader.onerror = function (event) {
+      reader.abort();
+      reject(event);
+    };
+    reader.readAsDataURL(file);
+  });
+}
+var defaultTheme = createTheme();
+
+export { convertBytesToMbsOrKbs, createFileFromUrl, defaultTheme, isImage, readFile };
+//# sourceMappingURL=helpers.js.map

package/Components/DropZone/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../src/Components/DropZone/helpers.js"],"sourcesContent":["import { createTheme } from \"@mui/material\";\r\n\r\nexport function isImage(file) {\r\n  if (file.type.split(\"/\")[0] === \"image\") {\r\n    return true;\r\n  }\r\n}\r\n\r\nexport function convertBytesToMbsOrKbs(filesize) {\r\n  let size = \"\";\r\n  if (filesize >= 1048576) {\r\n    size = filesize / 1048576 + \" megabytes\";\r\n  } else if (filesize >= 1024) {\r\n    size = filesize / 1024 + \" kilobytes\";\r\n  } else {\r\n    size = filesize + \" bytes\";\r\n  }\r\n  return size;\r\n}\r\n\r\nexport async function createFileFromUrl(url) {\r\n  const response = await fetch(url);\r\n  const data = await response.blob();\r\n  const metadata = { type: data.type };\r\n  const filename = url.replace(/\\?.+/, \"\").split(\"/\").pop();\r\n  return new File([data], filename, metadata);\r\n}\r\n\r\nexport function readFile(file) {\r\n  return new Promise((resolve, reject) => {\r\n    const reader = new FileReader();\r\n    reader.onload = (event) => {\r\n      resolve(event?.target?.result);\r\n    };\r\n    reader.onerror = (event) => {\r\n      reader.abort();\r\n      reject(event);\r\n    };\r\n    reader.readAsDataURL(file);\r\n  });\r\n}\r\n\r\nexport const defaultTheme = createTheme();\r\n"],"names":["isImage","file","type","split","convertBytesToMbsOrKbs","filesize","size","createFileFromUrl","_x","_createFileFromUrl","apply","arguments","_asyncToGenerator","_regenerator","m","_callee","url","response","data","metadata","filename","w","_context","n","fetch","v","blob","replace","pop","a","File","readFile","Promise","resolve","reject","reader","FileReader","onload","event","_event$target","target","result","onerror","abort","readAsDataURL","defaultTheme","createTheme"],"mappings":"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"}

package/Components/DropZone/index.d.ts

@@ -0,0 +1,120 @@
+import { ChipProps } from '@mui/material/Chip'
+import { DialogProps } from '@mui/material/Dialog'
+import { GridProps } from '@mui/material/Grid'
+import { SnackbarProps } from '@mui/material/Snackbar'
+import * as React from 'react'
+import { DropEvent, DropzoneProps } from 'react-dropzone'
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
+
+export interface FileObject {
+  readonly file: File
+  readonly data: string | ArrayBuffer | null
+}
+
+export interface PreviewIconProps {
+  readonly classes: string
+}
+
+export type AlertType = 'error' | 'success' | 'info'
+
+// DropzoneAreaBase
+
+export type DropzoneAreaBaseClasses = {
+  /** Material-UI class applied to the root Dropzone div */
+  root: string
+  /** Material-UI class applied to the Dropzone when 'active' */
+  active: string
+  /** Material-UI class applied to the Dropzone when 'invalid' */
+  invalid: string
+  /** Material-UI class applied to the Dropzone text container div */
+  textContainer: string
+  /** Material-UI class applied to the Dropzone text */
+  text: string
+  /** Material-UI class applied to the Dropzone icon */
+  icon: string
+}
+
+export type DropzoneAreaBaseProps = {
+  classes?: Partial<DropzoneAreaBaseClasses>
+  acceptedFiles?: { [key: string]: string[] }
+  fileObjects: FileObject[]
+  filesLimit?: number
+  Icon?: React.ComponentType
+  maxFileSize?: number
+  dropzoneText?: string
+  previewText?: string
+  showPreviews?: boolean
+  showPreviewsInDropzone?: boolean
+  showFileNamesInPreview?: boolean
+  showFileNames?: boolean
+  useChipsForPreview?: boolean
+  previewChipProps?: ChipProps
+  previewGridClasses?: {
+    container?: string
+    item?: string
+    image?: string
+  }
+  previewGridProps?: {
+    container?: GridProps
+    item?: GridProps
+  }
+  showAlerts?: boolean | AlertType[]
+  alertSnackbarProps?: SnackbarProps
+  dropzoneProps?: DropzoneProps
+  inputProps?: React.HTMLProps<HTMLInputElement>
+  clearOnUnmount?: boolean
+  dropzoneClass?: string
+  dropzoneParagraphClass?: string
+  disableRejectionFeedback?: boolean
+  onAdd?: (newFiles: FileObject[]) => void
+  onDelete?: (deletedFileObject: FileObject, index: number) => void
+  onDrop?: (files: File[], event: DropEvent) => void
+  onDropRejected?: (files: File[], event: DropEvent) => void
+  onAlert?: (message: string, variant: AlertType) => void
+  getFileLimitExceedMessage?: (filesLimit: number) => string
+  getFileAddedMessage?: (fileName: string) => string
+  getFileRemovedMessage?: (fileName: string) => string
+  getDropRejectMessage?: (rejectedFile: File, acceptedFiles: string[], maxFileSize: number) => string
+  getPreviewIcon?: (file: FileObject, classes: PreviewIconProps) => React.ReactElement
+}
+
+export const DropzoneAreaBase: React.ComponentType<DropzoneAreaBaseProps>
+
+// DropzoneArea
+
+export type DropzoneAreaProps = Omit<DropzoneAreaBaseProps, 'fileObjects' | 'onAdd' | 'onDelete'> & {
+  clearOnUnmount?: boolean
+  initialFiles?: (File | string)[]
+  onChange?: (files: File[]) => void
+  onDelete?: (file: File) => void
+}
+
+export const DropzoneArea: React.ComponentType<DropzoneAreaProps>
+
+// DropzoneDialogBase
+
+export type DropzoneDialogBaseProps = DropzoneAreaBaseProps & {
+  cancelButtonText?: string
+  dialogProps?: DialogProps
+  dialogTitle?: string | JSX.Element
+  fullWidth?: boolean
+  maxWidth?: string
+  onClose?: (event: React.SyntheticEvent) => void
+  onSave?: (event: React.SyntheticEvent) => void
+  open?: boolean
+  submitButtonText?: string
+}
+
+export const DropzoneDialogBase: React.ComponentType<DropzoneDialogBaseProps>
+
+// DropzoneDialog
+
+export type DropzoneDialogProps = Omit<DropzoneDialogBaseProps, 'fileObjects' | 'onAdd' | 'onDelete' | 'onSave'> & {
+  clearOnUnmount?: boolean
+  initialFiles?: (File | string)[]
+  onSave?: (files: File[], event: React.SyntheticEvent) => void
+  onDelete?: (file: File) => void
+}
+
+export const DropzoneDialog: React.ComponentType<DropzoneDialogProps>

package/Components/EditAvatar/index.d.ts

@@ -0,0 +1,26 @@
+import { SxProps, Theme } from '@mui/material';
+import { Component } from 'react';
+import './index.css';
+import { CSSProperties } from '@mui/styles';
+interface EditAvatarProps {
+    sx?: SxProps<Theme>;
+    onSave?: (image: string) => void;
+    extra?: any;
+}
+interface EditAvatarState {
+    preview?: string;
+    src?: string;
+    labelStyle: CSSProperties;
+}
+export default class EditAvatar extends Component<EditAvatarProps, EditAvatarState> {
+    constructor(props: EditAvatarProps);
+    onClose(): void;
+    onCrop(preview: any): void;
+    renderEditAvatar: () => JSX.Element;
+    onEditClick: () => void;
+    onChange: () => void;
+    refInput: HTMLInputElement | null;
+    onSave: () => void;
+    render(): JSX.Element;
+}
+export {};

package/Components/EditAvatar/index.js

@@ -0,0 +1,137 @@
+import { inherits as _inherits, createClass as _createClass, objectSpread2 as _objectSpread2, classCallCheck as _classCallCheck, callSuper as _callSuper, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, IconButton } from '@mui/material';
+import Modal from '@mui/material/Modal';
+import { Component } from 'react';
+import Avatar from 'react-avatar-edit';
+import { Edit } from '@mui/icons-material';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+
+var EditAvatar = /*#__PURE__*/function (_Component) {
+  function EditAvatar(props) {
+    var _this;
+    _classCallCheck(this, EditAvatar);
+    _this = _callSuper(this, EditAvatar, [props]);
+    _defineProperty(_this, "renderEditAvatar", function () {
+      return jsx(Avatar, {
+        width: 390,
+        height: 295,
+        minCropRadius: 100,
+        onCrop: _this.onCrop,
+        onClose: _this.onClose,
+        borderStyle: {
+          display: 'none'
+        },
+        src: _this.state.src,
+        labelStyle: _this.state.labelStyle
+      });
+    });
+    _defineProperty(_this, "onEditClick", function () {
+      var _this$refInput;
+      (_this$refInput = _this.refInput) === null || _this$refInput === void 0 || _this$refInput.click();
+    });
+    _defineProperty(_this, "onChange", function () {
+      if (!_this.refInput || !_this.refInput.files) return;
+      var file = _this.refInput.files[0];
+      _this.setState({
+        src: URL.createObjectURL(file)
+      });
+    });
+    _defineProperty(_this, "refInput", null);
+    _defineProperty(_this, "onSave", function () {
+      _this.onClose();
+      _this.state.preview && _this.props.onSave && _this.props.onSave(_this.state.preview);
+    });
+    _this.state = {
+      labelStyle: {
+        color: 'red',
+        fontSize: '24px'
+      }
+    };
+    _this.onCrop = _this.onCrop.bind(_this);
+    _this.onClose = _this.onClose.bind(_this);
+    return _this;
+  }
+  _inherits(EditAvatar, _Component);
+  return _createClass(EditAvatar, [{
+    key: "onClose",
+    value: function onClose() {
+      if (this.refInput) {
+        this.refInput.value = '';
+      }
+      this.setState({
+        preview: undefined,
+        src: undefined
+      });
+    }
+  }, {
+    key: "onCrop",
+    value: function onCrop(preview) {
+      this.setState({
+        preview: preview
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props$sx,
+        _this2 = this;
+      return jsxs(Fragment, {
+        children: [jsxs(Box, {
+          className: 'container-edit',
+          sx: _objectSpread2({
+            position: 'relative',
+            minWidth: '100px',
+            minHeight: '100px'
+          }, (_this$props$sx = this.props.sx) !== null && _this$props$sx !== void 0 ? _this$props$sx : {}),
+          children: [this.props.children, jsx("a", {
+            onClick: this.onEditClick,
+            className: 'overlay-edit',
+            children: jsx(Edit, {})
+          }), jsx("input", {
+            onChange: this.onChange,
+            accept: 'image/*',
+            type: 'file',
+            ref: function ref(_ref) {
+              return _this2.refInput = _ref;
+            },
+            hidden: true
+          })]
+        }), jsx(Modal, {
+          open: !!this.state.src,
+          "aria-labelledby": 'edit-avatar-title',
+          "aria-describedby": 'edit-avatar-description',
+          sx: {
+            height: '100vh',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
+          },
+          children: jsxs(Box, {
+            sx: {
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              background: '#e0e0e0',
+              position: 'relative'
+            },
+            children: [this.renderEditAvatar(), jsx(IconButton, {
+              onClick: this.onSave,
+              sx: {
+                color: 'white',
+                position: 'absolute',
+                right: 0,
+                top: 0,
+                p: '7px'
+              },
+              children: jsx(CheckCircleOutlineIcon, {})
+            })]
+          })
+        })]
+      });
+    }
+  }]);
+}(Component);
+
+export { EditAvatar as default };
+//# sourceMappingURL=index.js.map

package/Components/EditAvatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/Components/EditAvatar/index.tsx"],"sourcesContent":["import { Box, IconButton, SxProps, Theme } from '@mui/material'\r\nimport Modal from '@mui/material/Modal'\r\nimport React, { Component } from 'react'\r\nimport './index.css'\r\nimport Avatar from 'react-avatar-edit'\r\nimport { CSSProperties } from '@mui/styles'\r\nimport { Edit } from '@mui/icons-material'\r\nimport CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'\r\ninterface EditAvatarProps {\r\n  sx?: SxProps<Theme>\r\n  onSave?: (image: string) => void\r\n  extra?: any\r\n}\r\ninterface EditAvatarState {\r\n  preview?: string\r\n  src?: string\r\n  labelStyle: CSSProperties\r\n}\r\nexport default class EditAvatar extends Component<EditAvatarProps, EditAvatarState> {\r\n  constructor(props: EditAvatarProps) {\r\n    super(props)\r\n    this.state = {\r\n      labelStyle: {\r\n        color: 'red',\r\n        fontSize: '24px'\r\n      }\r\n    }\r\n    this.onCrop = this.onCrop.bind(this)\r\n    this.onClose = this.onClose.bind(this)\r\n  }\r\n  onClose() {\r\n    if (this.refInput) {\r\n      this.refInput.value = ''\r\n    }\r\n    this.setState({ preview: undefined, src: undefined })\r\n  }\r\n\r\n  onCrop(preview: any) {\r\n    this.setState({ preview })\r\n  }\r\n  renderEditAvatar = () => {\r\n    return (\r\n      <Avatar\r\n        width={390}\r\n        height={295}\r\n        minCropRadius={100}\r\n        onCrop={this.onCrop}\r\n        onClose={this.onClose}\r\n        borderStyle={{ display: 'none' }}\r\n        src={this.state.src}\r\n        labelStyle={this.state.labelStyle}\r\n      />\r\n    )\r\n  }\r\n  onEditClick = () => {\r\n    this.refInput?.click()\r\n  }\r\n  onChange = () => {\r\n    if (!this.refInput || !this.refInput.files) return\r\n    const file = this.refInput.files[0]\r\n    this.setState({ src: URL.createObjectURL(file) })\r\n  }\r\n  refInput: HTMLInputElement | null = null\r\n  onSave = () => {\r\n    this.onClose()\r\n    this.state.preview && this.props.onSave && this.props.onSave(this.state.preview)\r\n  }\r\n  render() {\r\n    return (\r\n      <>\r\n        <Box className='container-edit' sx={{ position: 'relative', minWidth: '100px', minHeight: '100px', ...(this.props.sx ?? {}) }}>\r\n          {this.props.children}\r\n          <a onClick={this.onEditClick} className='overlay-edit'>\r\n            <Edit />\r\n          </a>\r\n          <input onChange={this.onChange} accept='image/*' type='file' ref={(ref) => (this.refInput = ref)} hidden />\r\n        </Box>\r\n        <Modal\r\n          open={!!this.state.src}\r\n          aria-labelledby='edit-avatar-title'\r\n          aria-describedby='edit-avatar-description'\r\n          sx={{\r\n            height: '100vh',\r\n            display: 'flex',\r\n            justifyContent: 'center',\r\n            alignItems: 'center'\r\n          }}\r\n        >\r\n          <Box\r\n            sx={{\r\n              display: 'flex',\r\n              justifyContent: 'center',\r\n              alignItems: 'center',\r\n              background: '#e0e0e0',\r\n              position: 'relative'\r\n            }}\r\n          >\r\n            {this.renderEditAvatar()}\r\n            <IconButton onClick={this.onSave} sx={{ color: 'white', position: 'absolute', right: 0, top: 0, p: '7px' }}>\r\n              <CheckCircleOutlineIcon />\r\n            </IconButton>\r\n          </Box>\r\n        </Modal>\r\n      </>\r\n    )\r\n  }\r\n}\r\n"],"names":["EditAvatar","_Component","props","_this","_classCallCheck","_callSuper","_defineProperty","_jsx","Avatar","width","height","minCropRadius","onCrop","onClose","borderStyle","display","src","state","labelStyle","_this$refInput","refInput","click","files","file","setState","URL","createObjectURL","preview","onSave","color","fontSize","bind","_inherits","_createClass","key","value","undefined","render","_this$props$sx","_this2","_jsxs","_Fragment","children","Box","className","sx","_objectSpread","position","minWidth","minHeight","onClick","onEditClick","Edit","onChange","accept","type","ref","hidden","Modal","open","justifyContent","alignItems","background","renderEditAvatar","IconButton","right","top","p","CheckCircleOutlineIcon","Component"],"mappings":"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"}

package/Components/FlexInfiniteScroll/index.d.ts

@@ -0,0 +1,26 @@
+import { SxProps, Theme } from '@mui/material';
+import React, { Component } from 'react';
+export type TActionLoadMore = (sender: FlexInfiniteScroll) => void;
+interface FlexInfiniteScrollProps {
+    ContainerSx?: SxProps<Theme>;
+    ContentSx?: SxProps<Theme>;
+    onLoadMore?: TActionLoadMore;
+    lock?: boolean;
+    loading?: boolean;
+}
+interface FlexInfiniteScrollState {
+    lock: boolean;
+    loading: boolean;
+}
+export default class FlexInfiniteScroll extends Component<FlexInfiniteScrollProps, FlexInfiniteScrollState> {
+    constructor(props: FlexInfiniteScrollProps);
+    loadMore: () => void;
+    lock: () => void;
+    getHeightItem: () => number;
+    isLoading: () => boolean;
+    isPinShow: () => boolean;
+    onScroll: React.UIEventHandler<HTMLDivElement>;
+    refScrollView: HTMLDivElement | null;
+    render(): JSX.Element;
+}
+export {};

package/Components/FlexInfiniteScroll/index.js

@@ -0,0 +1,82 @@
+import { inherits as _inherits, createClass as _createClass, objectSpread2 as _objectSpread2, classCallCheck as _classCallCheck, callSuper as _callSuper, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box } from '@mui/material';
+import { Component } from 'react';
+import LazySpinner from '../Helper/LazySpinner.js';
+
+var FlexInfiniteScroll = /*#__PURE__*/function (_Component) {
+  function FlexInfiniteScroll(props) {
+    var _this;
+    _classCallCheck(this, FlexInfiniteScroll);
+    _this = _callSuper(this, FlexInfiniteScroll, [props]);
+    _defineProperty(_this, "loadMore", function () {
+      if (!_this.props.onLoadMore) return;
+      _this.props.onLoadMore(_this);
+    });
+    _defineProperty(_this, "lock", function () {
+      _this.setState({
+        lock: true
+      });
+    });
+    _defineProperty(_this, "getHeightItem", function () {
+      return 340;
+    });
+    _defineProperty(_this, "isLoading", function () {
+      return _this.props.loading || _this.props.lock || _this.state.loading || _this.state.lock;
+    });
+    _defineProperty(_this, "isPinShow", function () {
+      return (_this.props.loading || _this.state.loading) && (!_this.state.lock || !_this.props.lock);
+    });
+    _defineProperty(_this, "onScroll", function (event) {
+      var _this$refScrollView$s, _this$refScrollView, _this$refScrollView$o, _this$refScrollView2, _this$refScrollView$s2, _this$refScrollView3;
+      if (_this.isLoading()) return;
+      var scrollHeight = (_this$refScrollView$s = (_this$refScrollView = _this.refScrollView) === null || _this$refScrollView === void 0 ? void 0 : _this$refScrollView.scrollHeight) !== null && _this$refScrollView$s !== void 0 ? _this$refScrollView$s : 0;
+      var height = (_this$refScrollView$o = (_this$refScrollView2 = _this.refScrollView) === null || _this$refScrollView2 === void 0 ? void 0 : _this$refScrollView2.offsetHeight) !== null && _this$refScrollView$o !== void 0 ? _this$refScrollView$o : 0;
+      var position = (_this$refScrollView$s2 = (_this$refScrollView3 = _this.refScrollView) === null || _this$refScrollView3 === void 0 ? void 0 : _this$refScrollView3.scrollTop) !== null && _this$refScrollView$s2 !== void 0 ? _this$refScrollView$s2 : 0;
+      if (scrollHeight - position - height < _this.getHeightItem() * 3) {
+        _this.loadMore();
+      }
+    });
+    _defineProperty(_this, "refScrollView", null);
+    _this.state = {
+      loading: props.loading || false,
+      lock: props.lock || !props.onLoadMore
+    };
+    return _this;
+  }
+  _inherits(FlexInfiniteScroll, _Component);
+  return _createClass(FlexInfiniteScroll, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return jsx(Box, {
+        sx: _objectSpread2({
+          display: 'flex',
+          flex: 1,
+          overflowY: "auto"
+        }, this.props.ContainerSx || {}),
+        component: 'div',
+        ref: function ref(_ref) {
+          return _this2.refScrollView = _ref;
+        },
+        className: "flex-infinite-scroll",
+        onScroll: this.onScroll,
+        children: jsxs(Box, {
+          sx: _objectSpread2({
+            height: 0
+          }, this.props.ContentSx || {}),
+          children: [this.props.children, this.isPinShow() ? jsx(Box, {
+            sx: {
+              width: '100%',
+              margin: "10px 0"
+            },
+            children: jsx(LazySpinner, {})
+          }) : '']
+        })
+      });
+    }
+  }]);
+}(Component);
+
+export { FlexInfiniteScroll as default };
+//# sourceMappingURL=index.js.map

package/Components/FlexInfiniteScroll/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/Components/FlexInfiniteScroll/index.tsx"],"sourcesContent":["import { Box, SxProps, Theme } from '@mui/material'\r\nimport React, { Component } from 'react'\r\nimport LazySpinner from '../Helper/LazySpinner'\r\n\r\n\r\nexport type TActionLoadMore = (sender: FlexInfiniteScroll) => void\r\ninterface FlexInfiniteScrollProps {\r\n    ContainerSx?: SxProps<Theme>\r\n    ContentSx?: SxProps<Theme>\r\n    onLoadMore?: TActionLoadMore\r\n    lock?: boolean\r\n    loading?: boolean\r\n}\r\ninterface FlexInfiniteScrollState {\r\n    lock: boolean\r\n    loading: boolean\r\n}\r\nexport default class FlexInfiniteScroll extends Component<FlexInfiniteScrollProps, FlexInfiniteScrollState> {\r\n    constructor(props: FlexInfiniteScrollProps) {\r\n        super(props)\r\n        this.state = {\r\n            loading: props.loading || false,\r\n            lock: props.lock || !props.onLoadMore\r\n        }\r\n    }\r\n    loadMore = () => {\r\n        if (!this.props.onLoadMore) return\r\n        this.props.onLoadMore(this)\r\n    }\r\n    lock = () => {\r\n        this.setState({ lock: true })\r\n    }\r\n    getHeightItem = () => 340\r\n    isLoading = () => this.props.loading || this.props.lock || this.state.loading || this.state.lock\r\n    isPinShow = () => (this.props.loading || this.state.loading) && (!this.state.lock || !this.props.lock)\r\n    onScroll: React.UIEventHandler<HTMLDivElement> = (event) => {\r\n        if (this.isLoading()) return;\r\n        const scrollHeight = this.refScrollView?.scrollHeight ?? 0\r\n        const height = this.refScrollView?.offsetHeight ?? 0\r\n        const position = this.refScrollView?.scrollTop ?? 0\r\n        if (scrollHeight - position - height < this.getHeightItem() * 3) {\r\n            this.loadMore()\r\n        }\r\n    }\r\n    refScrollView: HTMLDivElement | null = null\r\n    render() {\r\n        return (\r\n            <Box\r\n                sx={{ display: 'flex', flex: 1, overflowY: \"auto\", ...(this.props.ContainerSx || {}) }}\r\n                component={'div'}\r\n                ref={ref => this.refScrollView = ref as HTMLDivElement}\r\n                className=\"flex-infinite-scroll\"\r\n                onScroll={this.onScroll}\r\n            >\r\n                <Box sx={{ height: 0, ...(this.props.ContentSx || {}) }}>\r\n                    {this.props.children}\r\n                    {this.isPinShow() ?\r\n                        <Box sx={{ width: '100%', margin: \"10px 0\" }}>\r\n                            <LazySpinner />\r\n                        </Box>\r\n                        : ''\r\n                    }\r\n                </Box>\r\n            </Box>\r\n        )\r\n    }\r\n}\r\n"],"names":["FlexInfiniteScroll","_Component","props","_this","_classCallCheck","_callSuper","_defineProperty","onLoadMore","setState","lock","loading","state","event","_this$refScrollView$s","_this$refScrollView","_this$refScrollView$o","_this$refScrollView2","_this$refScrollView$s2","_this$refScrollView3","isLoading","scrollHeight","refScrollView","height","offsetHeight","position","scrollTop","getHeightItem","loadMore","_inherits","_createClass","key","value","render","_this2","_jsx","Box","sx","_objectSpread","display","flex","overflowY","ContainerSx","component","ref","className","onScroll","_jsxs","ContentSx","children","isPinShow","width","margin","LazySpinner","Component"],"mappings":"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"}

package/Components/Helper/LazySpinner.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+import './LazySpinner.css';
+export default class LazySpinner extends Component {
+    render(): JSX.Element;
+}

package/Components/Helper/LazySpinner.js

@@ -0,0 +1,33 @@
+import { inherits as _inherits, createClass as _createClass, classCallCheck as _classCallCheck, callSuper as _callSuper } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { Spinner } from 'reactstrap';
+
+var LazySpinner = /*#__PURE__*/function (_Component) {
+  function LazySpinner() {
+    _classCallCheck(this, LazySpinner);
+    return _callSuper(this, LazySpinner, arguments);
+  }
+  _inherits(LazySpinner, _Component);
+  return _createClass(LazySpinner, [{
+    key: "render",
+    value: function render() {
+      return jsxs("div", {
+        className: "container-spinner",
+        children: [jsx(Spinner, {
+          type: "grow",
+          color: "primary"
+        }), jsx(Spinner, {
+          type: "grow",
+          color: "primary"
+        }), jsx(Spinner, {
+          type: "grow",
+          color: "primary"
+        })]
+      });
+    }
+  }]);
+}(Component);
+
+export { LazySpinner as default };
+//# sourceMappingURL=LazySpinner.js.map