@zohodesk/dot 1.0.0-temp-198.3.3 → 1.0.0-temp-199

package/lib/AlphabeticList/AlphabeticList.module.css

@@ -1,57 +1,57 @@
-/* $Id$ */
-.varClass {
-  --textColor: var(--zdt_alphabeticList_text);
-  --textHoverColor: var(--zdt_alphabeticList_hover_text);
-}
-.container {
-  composes: varClass;
-  composes: h100 from '~@zohodesk/components/lib/common/common.module.css';
-  list-style: none;
-  pointer-events: initial;
-  margin: 0 ;
-  padding: 0 ;
-}
-.column .title {
-  margin-bottom: var(--zd_size3) ;
-}
-[dir=ltr] .row .title {
-  margin-right: var(--zd_size3) ;
-}
-[dir=rtl] .row .title {
-  margin-left: var(--zd_size3) ;
-}
-.row  .letter {
-  padding: 0 var(--zd_size3) ;
-}
-.column .letter {
-  padding: var(--zd_size3) 0 ;
-}
-.heading {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  max-width: 100% ;
-}
-.list {
-  font-size: var(--zd_font_size11) ;
-  flex-basis: var(--zd_size12) ;
-  color: var(--textColor);
-  text-align: center;
-  cursor: pointer;
-}
-.title {
-  flex-basis: var(--zd_size15) ;
-}
-.letter {
-  text-transform: uppercase;
-  display: inline-block;
-}
-.numbers .list {
-  max-height: var(--zd_size35) ;
-}
-.list :hover,
-.selected {
-  color: var(--textHoverColor);
-}
-.title {
-  font-size: var(--zd_font_size11) ;
-  font-family: var(--zd_semibold);
-}
+/* $Id$ */
+.varClass {
+  --textColor: var(--zdt_alphabeticList_text);
+  --textHoverColor: var(--zdt_alphabeticList_hover_text);
+}
+.container {
+  composes: varClass;
+  composes: h100 from '~@zohodesk/components/lib/common/common.module.css';
+  list-style: none;
+  pointer-events: initial;
+  margin: 0 ;
+  padding: 0 ;
+}
+.column .title {
+  margin-bottom: var(--zd_size3) ;
+}
+[dir=ltr] .row .title {
+  margin-right: var(--zd_size3) ;
+}
+[dir=rtl] .row .title {
+  margin-left: var(--zd_size3) ;
+}
+.row  .letter {
+  padding: 0 var(--zd_size3) ;
+}
+.column .letter {
+  padding: var(--zd_size3) 0 ;
+}
+.heading {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  max-width: 100% ;
+}
+.list {
+  font-size: var(--zd_font_size11) ;
+  flex-basis: var(--zd_size12) ;
+  color: var(--textColor);
+  text-align: center;
+  cursor: pointer;
+}
+.title {
+  flex-basis: var(--zd_size15) ;
+}
+.letter {
+  text-transform: uppercase;
+  display: inline-block;
+}
+.numbers .list {
+  max-height: var(--zd_size35) ;
+}
+.list :hover,
+.selected {
+  color: var(--textHoverColor);
+}
+.title {
+  font-size: var(--zd_font_size11) ;
+  font-family: var(--zd_semibold);
+}

package/lib/AttachmentViewer/AttachmentImage.js

@@ -9,10 +9,14 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _Layout = require("@zohodesk/components/es/Layout");
+
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _utils = require("./utils");
+
 var _Image = _interopRequireDefault(require("../Image/Image"));
 
 var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
@@ -54,65 +58,99 @@ var AttachmentImage = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, AttachmentImage);
 
     _this = _super.call(this, props);
-    _this.imageEle = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
-      isLoading: true
+      isLoading: true,
+      isImageValid: false
     };
-    _this.imgLoad = _this.imgLoad.bind(_assertThisInitialized(_this));
+    _this.handleImageValidation = _this.handleImageValidation.bind(_assertThisInitialized(_this));
+    _this.renderImage = _this.renderImage.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(AttachmentImage, [{
+    key: "handleImageValidation",
+    value: function handleImageValidation() {
+      var _this2 = this;
+
+      var src = this.props.src;
+      (0, _utils.checkImageValidity)(src).then(function (isValid) {
+        _this2.setState({
+          isLoading: false,
+          isImageValid: isValid
+        });
+      });
+    }
+  }, {
+    key: "renderImage",
+    value: function renderImage() {
+      var _this$props = this.props,
+          src = _this$props.src,
+          onClick = _this$props.onClick,
+          alt = _this$props.alt,
+          id = _this$props.id,
+          dataId = _this$props.dataId,
+          isCover = _this$props.isCover,
+          customClass = _this$props.customClass,
+          onLoad = _this$props.onLoad,
+          onError = _this$props.onError;
+      var isImageValid = this.state.isImageValid;
+      var _customClass$customIm = customClass.customImageClass,
+          customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm;
+      return /*#__PURE__*/_react["default"].createElement(_Image["default"], {
+        htmlId: id,
+        dataId: isImageValid ? dataId : "".concat(dataId, "_alt"),
+        src: src,
+        onClick: onClick,
+        className: customImageClass,
+        alt: alt,
+        isCover: isCover,
+        onLoad: onLoad,
+        onError: onError
+      });
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var isImage = this.props.isImage;
+      this.handleImageValidation();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var src = this.props.src;
 
-      if (isImage) {
-        var image = this.imageEle.current;
-        image.addEventListener('load', this.imgLoad);
-      } else {
+      if (prevProps.src !== src) {
         this.setState({
-          isLoading: false
+          isLoading: true
         });
+        this.handleImageValidation();
       }
     }
-  }, {
-    key: "imgLoad",
-    value: function imgLoad() {
-      this.setState({
-        isLoading: false
-      });
-      var onLoad = this.props.onLoad;
-      onLoad && onLoad();
-    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          src = _this$props.src,
-          onClick = _this$props.onClick,
-          alt = _this$props.alt,
-          dataId = _this$props.dataId,
-          id = _this$props.id,
-          className = _this$props.className,
-          isCover = _this$props.isCover;
-      var isLoading = this.state.isLoading;
+      var _this$props2 = this.props,
+          dataId = _this$props2.dataId,
+          id = _this$props2.id,
+          customClass = _this$props2.customClass,
+          children = _this$props2.children;
+      var _this$state = this.state,
+          isLoading = _this$state.isLoading,
+          isImageValid = _this$state.isImageValid;
+      var _customClass$customCh = customClass.customChildrenClass,
+          customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_AttachmentViewerModule["default"].spinLoad),
         "data-id": "".concat(dataId, "_loader"),
         "data-test-id": "".concat(dataId, "_loader")
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _AttachmentViewerModule["default"].loader
-      })) : null, /*#__PURE__*/_react["default"].createElement(_Image["default"], {
+      })) : isImageValid ? this.renderImage() : children ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        align: "both",
         htmlId: id,
-        eleRef: this.imageEle,
-        dataId: dataId,
-        src: src,
-        onClick: onClick,
-        className: "".concat(isLoading ? _AttachmentViewerModule["default"].hide : '', " ").concat(className),
-        alt: alt,
-        isCover: isCover
-      }));
+        dataId: "".concat(dataId, "_custom"),
+        className: customChildrenClass
+      }, children) : this.renderImage() //alt ui
+      );
     }
   }]);