@zohodesk/dot 1.0.0-beta.218 → 1.0.0-beta.220

package/README.md

@@ -2,7 +2,7 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
-# 1.0.0-beta.218
+# 1.0.0-beta.218 , # 1.0.0-beta.219, # 1.0.0-beta.220
 
 - AttachmentViewer , AttachmentImage component added
 

package/es/AttachmentViewer/AttachmentImage.js

@@ -3,10 +3,10 @@
 /** * Libraries ** */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Image from '../Image/Image';
 /** * CSS ** */
 
 import style from './AttachmentViewer.module.css';
-import Image from '../Image/Image';
 export default class AttachmentImage extends Component {
   constructor(props) {
     super(props);

package/es/AttachmentViewer/AttachmentViewer.js

@@ -10,6 +10,7 @@ import Link from "../Link/Link";
 import IconButton from "../IconButton/IconButton";
 import FreezeLayer from "../FreezeLayer/FreezeLayer";
 import { isAudioFile, getExtensionFromFileName } from "./Attachment";
+import { shallowDiff } from '../utils/General';
 import style from "./AttachmentViewer.module.css";
 export default class AttachmentViewer extends Component {
   constructor(props) {
@@ -37,6 +38,32 @@ export default class AttachmentViewer extends Component {
     this.zoomMaintain = this.zoomMaintain.bind(this);
   }
 
+  componentDidUpdate(prevProps) {
+    let {
+      previewObj
+    } = this.props;
+    let indexChanged = previewObj.selectedIndex != prevProps.previewObj.selectedIndex;
+
+    if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged) {
+      let objChanged = previewObj.previewData.some((value, index) => {
+        return shallowDiff(value, prevProps.previewObj[index]);
+      });
+
+      if (objChanged || indexChanged) {
+        this.setState({
+          selectedIndex: previewObj.selectedIndex,
+          data: previewObj ? previewObj.previewData : [],
+          dataList: this.getUpdateDataList({
+            index: previewObj.selectedIndex,
+            data: previewObj ? previewObj.previewData : [],
+            dataList: []
+          }),
+          isPViewListOpen: !!(this.props.previewObj && this.props.previewObj.previewData)
+        });
+      }
+    }
+  }
+
   togglePViewList() {
     this.setState(prevState => ({
       isPViewListOpen: !prevState.isPViewListOpen
@@ -266,7 +293,8 @@ export default class AttachmentViewer extends Component {
     const {
       responsiveId,
       needDownload,
-      i18nKeys
+      i18nKeys,
+      isActive
     } = this.props;
     const totalLen = data.length;
     const selectedAttachment = data[selectedIndex] || {};
@@ -276,7 +304,7 @@ export default class AttachmentViewer extends Component {
     let authorName;
     const {
       author
-    } = data[selectedIndex] ? data[selectedIndex] : null;
+    } = data[selectedIndex] ? data[selectedIndex] : {};
 
     if (author) {
       authorHref = author.href;
@@ -285,7 +313,9 @@ export default class AttachmentViewer extends Component {
 
     const ariaId = this.getNextId();
     return /*#__PURE__*/React.createElement(FreezeLayer, {
-      isActive: true
+      isActive: isActive && totalLen >= 1,
+      palette: "dark",
+      animationName: "expand"
     }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       responsiveId: responsiveId,
       query: this.responsiveFunc
@@ -514,13 +544,15 @@ AttachmentViewer.propTypes = {
   needDownload: PropTypes.string,
   previewObj: PropTypes.object,
   responsiveId: PropTypes.string,
-  maintainZoom: PropTypes.bool
+  maintainZoom: PropTypes.bool,
+  isActive: PropTypes.bool
 };
 AttachmentViewer.defaultProps = {
   responsiveId: "Helmet",
   needDownload: true,
   i18nKeys: {},
-  maintainZoom: false
+  maintainZoom: false,
+  isActive: false
 };
 
 if (false) {

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -268,13 +268,13 @@
     cursor: zoom-in;
 }
 
-.normalImg {
+.imgRef .normalImg {
     max-width: inherit;
     max-height: inherit;
     cursor: zoom-in;
 }
 
-.zoomedImg {
+.imgRef .zoomedImg {
     max-width: initial;
     max-height: initial;
     cursor: zoom-out;

package/lib/AttachmentViewer/AttachmentImage.js

@@ -11,10 +11,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
-
 var _Image = _interopRequireDefault(require("../Image/Image"));
 
+var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
+
 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 _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -31,6 +31,8 @@ var _FreezeLayer = _interopRequireDefault(require("../FreezeLayer/FreezeLayer"))
 
 var _Attachment = require("./Attachment");
 
+var _General = require("../utils/General");
+
 var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -107,6 +109,31 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(AttachmentViewer, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var previewObj = this.props.previewObj;
+      var indexChanged = previewObj.selectedIndex != prevProps.previewObj.selectedIndex;
+
+      if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged) {
+        var objChanged = previewObj.previewData.some(function (value, index) {
+          return (0, _General.shallowDiff)(value, prevProps.previewObj[index]);
+        });
+
+        if (objChanged || indexChanged) {
+          this.setState({
+            selectedIndex: previewObj.selectedIndex,
+            data: previewObj ? previewObj.previewData : [],
+            dataList: this.getUpdateDataList({
+              index: previewObj.selectedIndex,
+              data: previewObj ? previewObj.previewData : [],
+              dataList: []
+            }),
+            isPViewListOpen: !!(this.props.previewObj && this.props.previewObj.previewData)
+          });
+        }
+      }
+    }
+  }, {
     key: "togglePViewList",
     value: function togglePViewList() {
       var _this2 = this;
@@ -344,7 +371,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           responsiveId = _this$props.responsiveId,
           needDownload = _this$props.needDownload,
-          i18nKeys = _this$props.i18nKeys;
+          i18nKeys = _this$props.i18nKeys,
+          isActive = _this$props.isActive;
       var totalLen = data.length;
       var selectedAttachment = data[selectedIndex] || {};
       var selectedImgUrl = selectedAttachment.viewUrl;
@@ -352,7 +380,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       var authorHref;
       var authorName;
 
-      var _ref3 = data[selectedIndex] ? data[selectedIndex] : null,
+      var _ref3 = data[selectedIndex] ? data[selectedIndex] : {},
           author = _ref3.author;
 
       if (author) {
@@ -362,7 +390,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
 
       var ariaId = this.getNextId();
       return /*#__PURE__*/_react["default"].createElement(_FreezeLayer["default"], {
-        isActive: true
+        isActive: isActive && totalLen >= 1,
+        palette: "dark",
+        animationName: "expand"
       }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         responsiveId: responsiveId,
         query: this.responsiveFunc
@@ -597,13 +627,15 @@ AttachmentViewer.propTypes = {
   needDownload: _propTypes["default"].string,
   previewObj: _propTypes["default"].object,
   responsiveId: _propTypes["default"].string,
-  maintainZoom: _propTypes["default"].bool
+  maintainZoom: _propTypes["default"].bool,
+  isActive: _propTypes["default"].bool
 };
 AttachmentViewer.defaultProps = {
   responsiveId: "Helmet",
   needDownload: true,
   i18nKeys: {},
-  maintainZoom: false
+  maintainZoom: false,
+  isActive: false
 };
 
 if (false) {

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -268,13 +268,13 @@
     cursor: zoom-in;
 }
 
-.normalImg {
+.imgRef .normalImg {
     max-width: inherit;
     max-height: inherit;
     cursor: zoom-in;
 }
 
-.zoomedImg {
+.imgRef .zoomedImg {
     max-width: initial;
     max-height: initial;
     cursor: zoom-out;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-beta.218",
+  "version": "1.0.0-beta.220",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",