@selfcommunity/react-ui 0.1.2-alpha.0

package/lib/esm/shared/Media/Image/PreviewComponent.js

@@ -0,0 +1,360 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _PreviewImage = _interopRequireDefault(require("./PreviewImage"));
+
+var _material = require("@mui/material");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
+
+var _CentralProgress = _interopRequireDefault(require("../../CentralProgress"));
+
+var _reactLazyload = _interopRequireDefault(require("react-lazyload"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const PREFIX = 'SCPreviewMediaImage';
+const classes = {
+  background: `${PREFIX}-background`,
+  heightOne: `${PREFIX}-heightOne`,
+  heightHalfOne: `${PREFIX}-heightHalfOne`,
+  heightTwo: `${PREFIX}-heightTwo`,
+  heightThree: `${PREFIX}-heightThree`,
+  cover: `${PREFIX}-cover`,
+  coverText: `${PREFIX}-coverText`,
+  slide: `${PREFIX}-slide`,
+  border: `${PREFIX}-border`,
+  gallery: `${PREFIX}-gallery`,
+  title: `${PREFIX}-title`,
+  iconFile: `${PREFIX}-iconFile`
+};
+const Root = (0, _styles.styled)(_material.Box, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  textAlign: 'center',
+  margin: 'auto',
+  width: '100%',
+  position: 'relative',
+  [`& .${classes.background}`]: {
+    backgroundSize: 'cover !important',
+    backgroundPosition: 'center !important',
+    backgroundRepeat: 'no-repeat !important',
+    backgroundImage: 'url(/static/frontend_v2/images/image.svg)'
+  },
+  [`& .${classes.heightOne}`]: {
+    width: '100%',
+    paddingTop: '100%'
+  },
+  [`& .${classes.heightHalfOne}`]: {
+    paddingTop: '50%'
+  },
+  [`& .${classes.heightTwo}`]: {
+    width: '50%',
+    paddingTop: '50%'
+  },
+  [`& .${classes.heightThree}`]: {
+    width: '33.3333%',
+    paddingTop: '33.3333%'
+  },
+  [`& .${classes.cover}`]: {
+    backgroundColor: 'rgba(102,102,102,0.2)',
+    opacity: 0.8,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    borderRadius: 6
+  },
+  [`& .${classes.coverText}`]: {
+    right: 0,
+    left: 0,
+    bottom: 0,
+    color: '#FFF',
+    fontSize: '7%',
+    position: 'absolute',
+    top: '50%',
+    transform: 'translate(0%, -50%)',
+    textAlign: 'center',
+    '& > p': {
+      margin: 0,
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  },
+  [`& .${classes.slide}`]: {
+    height: 0,
+    bottom: '100%',
+    transition: '.5s ease',
+    overflow: 'hidden',
+    fontSize: '3%',
+    color: '#FFF'
+  },
+  [`& .${classes.border}`]: {
+    position: 'relative',
+    border: '2px solid white',
+    borderRadius: 6,
+    '&:hover > div': {
+      bottom: 0,
+      height: 'auto'
+    },
+    '&:hover > div.animate-text': {
+      top: '62%'
+    }
+  },
+  [`& .${classes.gallery}`]: {
+    cursor: 'pointer'
+  },
+  [`& .${classes.title} .MuiTypography-root`]: {
+    color: '#FFF',
+    backgroundColor: theme.palette.getContrastText('#FFF')
+  },
+  [`& .${classes.iconFile}`]: {
+    fontSize: 14,
+    position: 'relative',
+    top: 2
+  }
+}));
+
+var _default = props => {
+  // PROPS
+  const {
+    medias = [],
+    gallery = true,
+    adornment = null,
+    onClick = null,
+    onMediaClick = null
+  } = props; // STATE
+
+  const [preview, setPreview] = (0, _react.useState)(-1);
+  const [from, setFrom] = (0, _react.useState)(0); // HANDLERS
+
+  const handleClose = () => {
+    setPreview(-1);
+  }; // UTILS
+
+
+  const getImageUrl = image => {
+    if (typeof image === 'object') {
+      return image.image ? image.image : '/static/frontend_v2/images/image.svg';
+    }
+
+    return image;
+  };
+
+  const openPreviewImage = index => {
+    if (onClick) {
+      return onClick({
+        src: medias[index],
+        index
+      });
+    }
+
+    if (gallery === false) {
+      // Prevent gallery
+      return;
+    }
+
+    setPreview(index);
+    onMediaClick(medias[index]);
+  }; // RENDERING
+
+
+  const renderTitle = o => {
+    if (!o) {
+      return null;
+    }
+
+    let startAdornment = null;
+
+    if (o.type) {
+      switch (o.type) {
+        case 'doc':
+          startAdornment = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+            className: classes.iconFile
+          }, "picture_as_pdf");
+          break;
+
+        default:
+          startAdornment = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+            className: classes.iconFile
+          }, "insert_drive_file");
+          break;
+      }
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, o.title && /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.title
+    }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+      variant: "subtitle2"
+    }, startAdornment, " ", o.title)));
+  };
+
+  const renderOne = () => {
+    const overlay = medias.length > from && from == 1 ? renderCountOverlay(true) : renderOverlay(0);
+    return /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      container: true
+    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      xs: 12,
+      classes: {
+        root: (0, _classnames.default)(classes.border, classes.heightOne, classes.background, {
+          [classes.gallery]: gallery,
+          [classes.heightHalfOne]: medias.length > 1
+        })
+      },
+      onClick: () => openPreviewImage(0),
+      style: {
+        background: `url(${getImageUrl(medias[0])})`
+      }
+    }, overlay, renderTitle(medias[0])));
+  };
+
+  const renderTwo = () => {
+    const overlay = medias.length > from && [2, 3].includes(+from) ? renderCountOverlay(true) : renderOverlay(1);
+    const conditionalRender = [3, 4].includes(medias.length) || medias.length > +from && [3, 4].includes(+from);
+    return /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      container: true
+    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      xs: 6,
+      classes: {
+        root: (0, _classnames.default)(classes.border, classes.heightTwo, classes.background, {
+          [classes.gallery]: gallery
+        })
+      },
+      onClick: () => openPreviewImage(conditionalRender ? 1 : 0),
+      style: {
+        background: `url(${getImageUrl(conditionalRender ? medias[1] : medias[0])})`
+      }
+    }, renderOverlay(conditionalRender ? 1 : 0), renderTitle(medias[0])), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      xs: 6,
+      classes: {
+        root: (0, _classnames.default)(classes.border, classes.heightTwo, classes.background, {
+          [classes.gallery]: gallery
+        })
+      },
+      onClick: () => openPreviewImage(conditionalRender ? 2 : 1),
+      style: {
+        background: `url(${getImageUrl(conditionalRender ? medias[2] : medias[1])})`
+      }
+    }, overlay, renderTitle(medias[1])));
+  };
+
+  const renderThree = () => {
+    const conditionalRender = medias.length == 4 || medias.length > +from && +from == 4;
+    const overlay = !from || from > 5 || medias.length > from && [4, 5].includes(+from) ? renderCountOverlay(true) : renderOverlay(conditionalRender ? 3 : 4);
+    return /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      container: true
+    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      xs: 6,
+      md: 4,
+      classes: {
+        root: (0, _classnames.default)(classes.border, classes.heightThree, classes.background, {
+          [classes.gallery]: gallery
+        })
+      },
+      onClick: () => openPreviewImage(conditionalRender ? 1 : 2),
+      style: {
+        background: `url(${getImageUrl(conditionalRender ? medias[1] : medias[2])})`
+      }
+    }, renderOverlay(conditionalRender ? 1 : 2), renderTitle(medias[1])), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      xs: 6,
+      md: 4,
+      classes: {
+        root: (0, _classnames.default)(classes.border, classes.heightThree, classes.background, {
+          [classes.gallery]: gallery
+        })
+      },
+      onClick: () => openPreviewImage(conditionalRender ? 2 : 3),
+      style: {
+        background: `url(${getImageUrl(conditionalRender ? medias[2] : medias[3])})`
+      }
+    }, renderOverlay(conditionalRender ? 2 : 3), renderTitle(medias[2])), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      xs: 6,
+      md: 4,
+      classes: {
+        root: (0, _classnames.default)(classes.border, classes.heightThree, classes.background, {
+          [classes.gallery]: gallery
+        })
+      },
+      onClick: () => openPreviewImage(conditionalRender ? 3 : 4),
+      style: {
+        background: `url(${getImageUrl(conditionalRender ? medias[3] : medias[4])})`
+      }
+    }, overlay, renderTitle(medias[3])));
+  };
+
+  const renderOverlay = id => {
+    if (!gallery) {
+      return null;
+    }
+
+    return [/*#__PURE__*/_react.default.createElement("div", {
+      key: `cover-${id}`,
+      className: (0, _classnames.default)(classes.cover, classes.slide)
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      key: `cover-text-${id}`,
+      className: (0, _classnames.default)(classes.coverText, classes.slide, 'animate-text'),
+      style: {
+        fontSize: '100%'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, null, "zoom_out_map"))];
+  };
+
+  const renderCountOverlay = more => {
+    const extra = medias.length - (from && from > 5 ? 5 : from);
+    return [more && /*#__PURE__*/_react.default.createElement("div", {
+      key: "count",
+      className: classes.cover
+    }), more && /*#__PURE__*/_react.default.createElement("div", {
+      key: "count-sub",
+      className: classes.coverText,
+      style: {
+        fontSize: '200%'
+      }
+    }, /*#__PURE__*/_react.default.createElement("p", null, "+", extra))];
+  };
+
+  const imagesToShow = [...medias];
+
+  if (from && medias.length > from) {
+    imagesToShow.length = from;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, medias.length > 0 && /*#__PURE__*/_react.default.createElement(_reactLazyload.default, {
+    height: 360,
+    placeholder: /*#__PURE__*/_react.default.createElement(_CentralProgress.default, {
+      size: 20
+    }),
+    once: true
+  }, /*#__PURE__*/_react.default.createElement(Root, null, adornment, [1, 3, 4].includes(imagesToShow.length) && renderOne(), imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(), imagesToShow.length >= 4 && renderThree(), preview !== -1 && /*#__PURE__*/_react.default.createElement(_PreviewImage.default, {
+    onClose: handleClose,
+    index: preview,
+    images: medias
+  }))));
+};
+
+exports.default = _default;

package/lib/esm/shared/Media/Image/PreviewImage/index.js

@@ -0,0 +1,84 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = PreviewImage;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Lightbox = _interopRequireDefault(require("../../../Lightbox"));
+
+var _styles = require("@mui/material/styles");
+
+const _excluded = ["images", "index", "onClose"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const PREFIX = 'SCPreviewImage';
+const Root = (0, _styles.styled)(_Lightbox.default, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+
+function PreviewImage(props) {
+  // PROPS
+  const {
+    images = [],
+    index = null,
+    onClose = null
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, _excluded); // STATE
+
+
+  const [currentImages, setCurrentImages] = (0, _react.useState)(images || []);
+  const [currentImageIndex, setCurrentImageIndex] = (0, _react.useState)(index);
+  /**
+   * Handles Prev image
+   */
+
+  function onMovePrevRequest() {
+    setCurrentImageIndex((currentImageIndex + currentImages.length - 1) % currentImages.length);
+  }
+  /**
+   * Handles next image
+   */
+
+
+  function onMoveNextRequest() {
+    setCurrentImageIndex((currentImageIndex + 1) % currentImages.length);
+  }
+  /**
+   * Gets image url
+   * @param image
+   */
+
+
+  function getImageUrl(image) {
+    if (typeof image === 'object') {
+      return image.image ? image.image : '/static/frontend_v2/images/image.svg';
+    }
+
+    return image;
+  }
+  /**
+   * Renders root object
+   */
+
+
+  return /*#__PURE__*/_react.default.createElement(Root, _extends({}, rest, {
+    mainSrc: getImageUrl(images[currentImageIndex]),
+    nextSrc: getImageUrl(images[(currentImageIndex + 1) % currentImages.length]),
+    prevSrc: getImageUrl(images[(currentImageIndex + currentImages.length - 1) % currentImages.length]),
+    onCloseRequest: onClose,
+    onMovePrevRequest: onMovePrevRequest,
+    onMoveNextRequest: onMoveNextRequest
+  }));
+}

package/lib/esm/shared/Media/Image/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PreviewComponent = _interopRequireDefault(require("./PreviewComponent"));
+
+var _EditButton = _interopRequireDefault(require("./EditButton"));
+
+var _EditComponent = _interopRequireDefault(require("./EditComponent"));
+
+var _Media = require("../../../constants/Media");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Image = {
+  name: 'image',
+  previewComponent: props => /*#__PURE__*/_react.default.createElement(_PreviewComponent.default, props),
+  editButton: props => /*#__PURE__*/_react.default.createElement(_EditButton.default, props),
+  editComponent: props => /*#__PURE__*/_react.default.createElement(_EditComponent.default, props),
+  filter: media => media.type === _Media.MEDIA_TYPE_IMAGE
+};
+var _default = Image;
+exports.default = _default;

package/lib/esm/shared/Media/Link/EditButton.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _material = require("@mui/material");
+
+var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _default = props => {
+  return /*#__PURE__*/_react.default.createElement(_material.IconButton, _extends({}, props, {
+    "aria-label": "add link"
+  }), /*#__PURE__*/_react.default.createElement(_Icon.default, null, "link"));
+};
+
+exports.default = _default;

package/lib/esm/shared/Media/Link/EditComponent.js

@@ -0,0 +1,88 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _material = require("@mui/material");
+
+var _reactIntl = require("react-intl");
+
+var _reactSortablejs = require("react-sortablejs");
+
+var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
+
+var _styles = require("@mui/material/styles");
+
+var _PreviewComponent = _interopRequireDefault(require("./PreviewComponent"));
+
+var _UrlTextField = _interopRequireDefault(require("./UrlTextField"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const PREFIX = 'SCMediaActionLink';
+const classes = {
+  link: `${PREFIX}-link`,
+  close: `${PREFIX}-close`
+};
+const Root = (0, _styles.styled)(_material.Box, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  padding: theme.spacing(),
+  [`& .${classes.link}`]: {
+    position: 'relative'
+  },
+  [`& .${classes.close}`]: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    margin: theme.spacing()
+  }
+}));
+
+var _default = props => {
+  // PROPS
+  const {
+    medias = [],
+    onSuccess,
+    onSort,
+    onDelete
+  } = props;
+  /**
+   * Renders root object
+   */
+
+  return /*#__PURE__*/_react.default.createElement(Root, null, /*#__PURE__*/_react.default.createElement(_UrlTextField.default, {
+    id: "page",
+    name: "page",
+    label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "ui.composer.media.link.add.label",
+      defaultMessage: "ui.composer.media.link.add.label"
+    }),
+    fullWidth: true,
+    variant: "outlined",
+    placeholder: "https://",
+    onSuccess: onSuccess
+  }), medias.length > 0 && /*#__PURE__*/_react.default.createElement(_reactSortablejs.ReactSortable, {
+    list: medias,
+    setList: onSort
+  }, medias.map(media => /*#__PURE__*/_react.default.createElement(_material.Box, {
+    key: media.id,
+    m: 1,
+    className: classes.link
+  }, /*#__PURE__*/_react.default.createElement(_PreviewComponent.default, {
+    medias: [media]
+  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: classes.close
+  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    onClick: onDelete(media.id),
+    size: "small"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, null, "delete")))))));
+};
+
+exports.default = _default;