@dhis2/analytics 23.11.1 → 23.12.2

package/build/cjs/components/Interpretations/InterpretationModal/useModalContentWidth.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModalContentWidth = void 0;
+
+var _react = require("react");
+
+var _utils = require("../../../modules/utils.js");
+
+const MODAL_SIDE_PADDING = 2 * 24;
+const MODAL_SIDE_MARGINS = 2 * 128;
+
+const computeModalContentWidth = windowWidth => {
+  return windowWidth - MODAL_SIDE_MARGINS - MODAL_SIDE_PADDING;
+};
+
+const useModalContentWidth = () => {
+  const [windowWidth, setWindowWidth] = (0, _react.useState)(window.innerWidth);
+  const debouncedWindowWidth = (0, _utils.useDebounce)(windowWidth, 150);
+  const [modalContentWidth, setModalContentWidth] = (0, _react.useState)(computeModalContentWidth(windowWidth));
+  (0, _react.useEffect)(() => {
+    const onResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    setModalContentWidth(computeModalContentWidth(debouncedWindowWidth));
+  }, [debouncedWindowWidth]);
+  return modalContentWidth;
+};
+
+exports.useModalContentWidth = useModalContentWidth;

package/build/cjs/components/Interpretations/InterpretationsUnit/InterpretationForm.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InterpretationForm = void 0;
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _ui = require("@dhis2/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = require("../common/index.js");
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const InterpretationForm = _ref => {
+  let {
+    type,
+    id,
+    currentUser,
+    disabled,
+    onSave
+  } = _ref;
+  const [showRichTextEditor, setShowRichTextEditor] = (0, _react.useState)(false);
+  const [interpretationText, setInterpretationText] = (0, _react.useState)('');
+  const saveMutationRef = (0, _react.useRef)({
+    resource: "interpretations/".concat(type, "/").concat(id),
+    type: 'create',
+    data: _ref2 => {
+      let {
+        interpretationText
+      } = _ref2;
+      return interpretationText;
+    }
+  });
+  const [save, {
+    loading: saveMutationInProgress
+  }] = (0, _appRuntime.useDataMutation)(saveMutationRef.current, {
+    onComplete: () => {
+      setShowRichTextEditor(false);
+      setInterpretationText('');
+      onSave();
+    }
+  });
+
+  const inputPlaceholder = _d2I18n.default.t('Write an interpretation');
+
+  return /*#__PURE__*/_react.default.createElement(_index.MessageEditorContainer, {
+    currentUser: currentUser
+  }, showRichTextEditor ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.RichTextEditor, {
+    disabled: saveMutationInProgress,
+    inputPlaceholder: inputPlaceholder,
+    onChange: setInterpretationText,
+    value: interpretationText
+  }), /*#__PURE__*/_react.default.createElement(_index.MessageButtonStrip, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    primary: true,
+    small: true,
+    disabled: saveMutationInProgress,
+    onClick: () => save({
+      interpretationText
+    })
+  }, _d2I18n.default.t('Post interpretation')), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    secondary: true,
+    small: true,
+    disabled: saveMutationInProgress,
+    onClick: () => {
+      setInterpretationText('');
+      setShowRichTextEditor(false);
+    }
+  }, _d2I18n.default.t('Cancel')))) : /*#__PURE__*/_react.default.createElement(_ui.Input, {
+    onFocus: () => setShowRichTextEditor(true),
+    placeholder: inputPlaceholder,
+    disabled: disabled
+  }));
+};
+
+exports.InterpretationForm = InterpretationForm;
+InterpretationForm.propTypes = {
+  currentUser: _propTypes.default.object,
+  disabled: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  type: _propTypes.default.string,
+  onSave: _propTypes.default.func
+};

package/build/cjs/components/Interpretations/InterpretationsUnit/InterpretationList.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InterpretationList = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _ui = require("@dhis2/ui");
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../common/index.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const sortByCreatedDateDesc = (a, b) => {
+  const dateA = a.created;
+  const dateB = b.created;
+
+  if (dateA < dateB) {
+    return 1;
+  }
+
+  if (dateA > dateB) {
+    return -1;
+  }
+
+  return 0;
+};
+
+const InterpretationList = _ref => {
+  let {
+    currentUser,
+    interpretations,
+    onInterpretationClick,
+    onReplyIconClick,
+    refresh,
+    disabled
+  } = _ref;
+  const interpretationsByDate = interpretations.reduce((groupedInterpretations, interpretation) => {
+    const date = interpretation.created.split('T')[0];
+
+    if (date in groupedInterpretations) {
+      groupedInterpretations[date].push(interpretation);
+    } else {
+      groupedInterpretations[date] = [interpretation];
+    }
+
+    return groupedInterpretations;
+  }, {});
+  return /*#__PURE__*/_react.default.createElement("ol", {
+    className: _style.default.dynamic([["4058400613", [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]]]) + " " + "interpretation-groups"
+  }, Object.keys(interpretationsByDate).sort().reverse().map(date => /*#__PURE__*/_react.default.createElement("li", {
+    key: date,
+    className: _style.default.dynamic([["4058400613", [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]]])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["4058400613", [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]]]) + " " + "date-section"
+  }, /*#__PURE__*/_react.default.createElement(_ui.IconCalendar24, {
+    color: _ui.colors.grey600
+  }), /*#__PURE__*/_react.default.createElement("time", {
+    dateTime: date,
+    className: _style.default.dynamic([["4058400613", [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]]]) + " " + "date-header"
+  }, (0, _moment.default)(date).format('ll'))), /*#__PURE__*/_react.default.createElement("ol", {
+    className: _style.default.dynamic([["4058400613", [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]]]) + " " + "interpretation-list"
+  }, interpretationsByDate[date].sort(sortByCreatedDateDesc).map(interpretation => /*#__PURE__*/_react.default.createElement(_index.Interpretation, {
+    key: interpretation.id,
+    interpretation: interpretation,
+    currentUser: currentUser,
+    onClick: onInterpretationClick,
+    onReplyIconClick: onReplyIconClick,
+    onDeleted: refresh,
+    onUpdated: refresh,
+    disabled: disabled
+  }))))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "4058400613",
+    dynamic: [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]
+  }, [".date-section.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(_ui.spacers.dp8, ";-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:").concat(_ui.spacers.dp8, ";}"), ".date-header.__jsx-style-dynamic-selector{font-size:14px;font-weight:500;line-height:".concat(_ui.spacers.dp16, ";color:").concat(_ui.colors.grey800, ";}"), ".interpretation-groups.__jsx-style-dynamic-selector{margin:0;padding:0;padding-top:".concat(_ui.spacers.dp12, ";list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:").concat(_ui.spacers.dp12, ";}"), ".interpretation-list.__jsx-style-dynamic-selector{margin:0;padding-left:".concat(_ui.spacers.dp32, ";list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:").concat(_ui.spacers.dp4, ";}")]));
+};
+
+exports.InterpretationList = InterpretationList;
+InterpretationList.propTypes = {
+  currentUser: _propTypes.default.object.isRequired,
+  interpretations: _propTypes.default.array.isRequired,
+  refresh: _propTypes.default.func.isRequired,
+  onInterpretationClick: _propTypes.default.func.isRequired,
+  onReplyIconClick: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool
+};

package/build/cjs/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InterpretationsUnit = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _ui = require("@dhis2/ui");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _InterpretationForm = require("./InterpretationForm.js");
+
+var _InterpretationList = require("./InterpretationList.js");
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const interpretationsQuery = {
+  interpretations: {
+    resource: 'interpretations',
+    params: _ref => {
+      let {
+        type,
+        id
+      } = _ref;
+      return {
+        fields: ['access', 'id', 'user[displayName]', 'created', 'text', 'comments[id]', 'likes', 'likedBy[id]'],
+        filter: "".concat(type, ".id:eq:").concat(id)
+      };
+    }
+  }
+};
+const InterpretationsUnit = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    currentUser,
+    type,
+    id,
+    onInterpretationClick,
+    onReplyIconClick,
+    disabled
+  } = _ref2;
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(true);
+  const {
+    data,
+    loading,
+    fetching,
+    refetch
+  } = (0, _appRuntime.useDataQuery)(interpretationsQuery, {
+    lazy: true
+  });
+
+  const onCompleteAction = () => {
+    refetch({
+      type,
+      id
+    });
+  };
+
+  (0, _react.useImperativeHandle)(ref, () => ({
+    refresh: onCompleteAction
+  }), []);
+  (0, _react.useEffect)(() => {
+    if (id) {
+      refetch({
+        type,
+        id
+      });
+    }
+  }, [type, id]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + ((0, _classnames.default)('container', {
+      expanded: isExpanded
+    }) || "")
+  }, fetching && !loading && /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + "fetching-loader"
+  }, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, {
+    small: true
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: () => setIsExpanded(!isExpanded),
+    className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + "header"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + "title"
+  }, _d2I18n.default.t('Interpretations')), isExpanded ? /*#__PURE__*/_react.default.createElement(_ui.IconChevronUp24, {
+    color: _ui.colors.grey700
+  }) : /*#__PURE__*/_react.default.createElement(_ui.IconChevronDown24, {
+    color: _ui.colors.grey700
+  })), isExpanded && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading && /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + "loader"
+  }, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, {
+    small: true
+  })), data && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InterpretationForm.InterpretationForm, {
+    currentUser: currentUser,
+    type: type,
+    id: id,
+    onSave: onCompleteAction,
+    disabled: disabled
+  }), /*#__PURE__*/_react.default.createElement(_InterpretationList.InterpretationList, {
+    currentUser: currentUser,
+    interpretations: data.interpretations.interpretations,
+    onInterpretationClick: onInterpretationClick,
+    onReplyIconClick: onReplyIconClick,
+    refresh: onCompleteAction,
+    disabled: disabled
+  }))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "4120713286",
+    dynamic: [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]
+  }, [".container.__jsx-style-dynamic-selector{position:relative;padding:".concat(_ui.spacers.dp16, ";border-bottom:1px solid ").concat(_ui.colors.grey400, ";background-color:").concat(_ui.colors.white, ";}"), ".fetching-loader.__jsx-style-dynamic-selector{position:absolute;inset:0px;background-color:rgba(255,255,255,0.8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;z-index:1;}", ".expanded.__jsx-style-dynamic-selector{padding-bottom:".concat(_ui.spacers.dp32, ";}"), ".loader.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;}", ".title.__jsx-style-dynamic-selector{font-size:16px;font-weight:500;line-height:21px;color:".concat(_ui.colors.grey900, ";}")]));
+});
+exports.InterpretationsUnit = InterpretationsUnit;
+InterpretationsUnit.displayName = 'InterpretationsUnit';
+InterpretationsUnit.defaultProps = {
+  onInterpretationClick: Function.prototype
+};
+InterpretationsUnit.propTypes = {
+  currentUser: _propTypes.default.object.isRequired,
+  id: _propTypes.default.string.isRequired,
+  type: _propTypes.default.string.isRequired,
+  disabled: _propTypes.default.bool,
+  onInterpretationClick: _propTypes.default.func,
+  onReplyIconClick: _propTypes.default.func
+};

package/build/cjs/components/Interpretations/InterpretationsUnit/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InterpretationsUnit", {
+  enumerable: true,
+  get: function () {
+    return _InterpretationsUnit.InterpretationsUnit;
+  }
+});
+
+var _InterpretationsUnit = require("./InterpretationsUnit.js");

package/build/cjs/components/Interpretations/common/Interpretation/Interpretation.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Interpretation = void 0;
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _ui = require("@dhis2/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = require("../index.js");
+
+var _InterpretationDeleteButton = require("./InterpretationDeleteButton.js");
+
+var _InterpretationUpdateForm = require("./InterpretationUpdateForm.js");
+
+var _useLike = require("./useLike.js");
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Interpretation = _ref => {
+  let {
+    interpretation,
+    currentUser,
+    onClick,
+    onUpdated,
+    onDeleted,
+    disabled,
+    onReplyIconClick
+  } = _ref;
+  const [isUpdateMode, setIsUpdateMode] = (0, _react.useState)(false);
+  const [showSharingDialog, setShowSharingDialog] = (0, _react.useState)(false);
+  const {
+    toggleLike,
+    isLikedByCurrentUser,
+    toggleLikeInProgress
+  } = (0, _useLike.useLike)({
+    interpretation,
+    currentUser,
+    onComplete: onUpdated
+  });
+  const shouldShowButton = !!onClick && !disabled;
+  return isUpdateMode ? /*#__PURE__*/_react.default.createElement(_InterpretationUpdateForm.InterpretationUpdateForm, {
+    close: () => setIsUpdateMode(false),
+    id: interpretation.id,
+    showSharingLink: interpretation.access.manage,
+    onComplete: onUpdated,
+    text: interpretation.text,
+    currentUser: currentUser
+  }) : /*#__PURE__*/_react.default.createElement(_index.Message, {
+    text: interpretation.text,
+    created: interpretation.created,
+    username: interpretation.user.displayName
+  }, !disabled && /*#__PURE__*/_react.default.createElement(_index.MessageStatsBar, null, /*#__PURE__*/_react.default.createElement(_index.MessageIconButton, {
+    tooltipContent: isLikedByCurrentUser ? _d2I18n.default.t('Unlike') : _d2I18n.default.t('Like'),
+    iconComponent: _ui.IconThumbUp16,
+    onClick: toggleLike,
+    selected: isLikedByCurrentUser,
+    count: interpretation.likes,
+    disabled: toggleLikeInProgress
+  }), /*#__PURE__*/_react.default.createElement(_index.MessageIconButton, {
+    tooltipContent: _d2I18n.default.t('Reply'),
+    iconComponent: _ui.IconReply16,
+    onClick: () => onReplyIconClick(interpretation.id),
+    count: interpretation.comments.length
+  }), interpretation.access.manage && /*#__PURE__*/_react.default.createElement(_index.MessageIconButton, {
+    iconComponent: _ui.IconShare16,
+    tooltipContent: _d2I18n.default.t('Share'),
+    onClick: () => setShowSharingDialog(true)
+  }), showSharingDialog && /*#__PURE__*/_react.default.createElement(_ui.SharingDialog, {
+    open: true,
+    type: 'interpretation',
+    id: interpretation.id,
+    onClose: () => setShowSharingDialog(false)
+  }), interpretation.access.update && /*#__PURE__*/_react.default.createElement(_index.MessageIconButton, {
+    iconComponent: _ui.IconEdit16,
+    tooltipContent: _d2I18n.default.t('Edit'),
+    onClick: () => setIsUpdateMode(true)
+  }), interpretation.access.delete && /*#__PURE__*/_react.default.createElement(_InterpretationDeleteButton.InterpretationDeleteButton, {
+    id: interpretation.id,
+    onComplete: onDeleted
+  })), shouldShowButton && /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    secondary: true,
+    small: true,
+    onClick: (_, event) => {
+      event.stopPropagation();
+      onClick(interpretation.id);
+    }
+  }, _d2I18n.default.t('See interpretation')));
+};
+
+exports.Interpretation = Interpretation;
+Interpretation.propTypes = {
+  currentUser: _propTypes.default.object.isRequired,
+  interpretation: _propTypes.default.object.isRequired,
+  onDeleted: _propTypes.default.func.isRequired,
+  onReplyIconClick: _propTypes.default.func.isRequired,
+  onUpdated: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool,
+  onClick: _propTypes.default.func
+};

package/build/cjs/components/Interpretations/common/Interpretation/InterpretationDeleteButton.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InterpretationDeleteButton = void 0;
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _ui = require("@dhis2/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const mutation = {
+  resource: 'interpretations',
+  id: _ref => {
+    let {
+      id
+    } = _ref;
+    return id;
+  },
+  type: 'delete'
+};
+
+const InterpretationDeleteButton = _ref2 => {
+  let {
+    id,
+    onComplete
+  } = _ref2;
+  const [remove, {
+    loading
+  }] = (0, _appRuntime.useDataMutation)(mutation, {
+    onComplete,
+    variables: {
+      id
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_index.MessageIconButton, {
+    tooltipContent: _d2I18n.default.t('Delete'),
+    iconComponent: _ui.IconDelete16,
+    onClick: remove,
+    disabled: loading
+  });
+};
+
+exports.InterpretationDeleteButton = InterpretationDeleteButton;
+InterpretationDeleteButton.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  onComplete: _propTypes.default.func.isRequired
+};

package/build/cjs/components/Interpretations/common/Interpretation/InterpretationSharingLink.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InterpretationSharingLink = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _ui = require("@dhis2/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const InterpretationSharingLink = _ref => {
+  let {
+    type,
+    id
+  } = _ref;
+  const [showSharingDialog, setShowSharingDialog] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3990725326", [_ui.spacers.dp4, _ui.spacers.dp8, _ui.colors.grey800]]]) + " " + "container"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    onClick: () => setShowSharingDialog(true),
+    className: _style.default.dynamic([["3990725326", [_ui.spacers.dp4, _ui.spacers.dp8, _ui.colors.grey800]]]) + " " + "link"
+  }, _d2I18n.default.t('Manage sharing'))), showSharingDialog && /*#__PURE__*/_react.default.createElement(_ui.SharingDialog, {
+    open: true,
+    type: type,
+    id: id,
+    onClose: () => setShowSharingDialog(false)
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3990725326",
+    dynamic: [_ui.spacers.dp4, _ui.spacers.dp8, _ui.colors.grey800]
+  }, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;gap:".concat(_ui.spacers.dp4, ";margin-top:").concat(_ui.spacers.dp8, ";font-size:13px;color:").concat(_ui.colors.grey800, ";cursor:pointer;}"), ".link.__jsx-style-dynamic-selector{-webkit-text-decoration:underline;text-decoration:underline;}"]));
+};
+
+exports.InterpretationSharingLink = InterpretationSharingLink;
+InterpretationSharingLink.propTypes = {
+  id: _propTypes.default.string,
+  type: _propTypes.default.string
+};