@zohodesk/dot 1.0.0-temp-222 → 1.0.0-temp-220.1

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -7,6 +7,8 @@ import AlertClose from "../AlertClose/AlertClose";
 import style from "./GlobalNotification.module.css";
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
+import getCurrentTime from '@zohodesk/utils/es/getCurrentTime';
+import { STATUS } from "./utils/constants";
 export default class GlobalNotification extends React.Component {
   constructor(props) {
     super(props);
@@ -15,6 +17,8 @@ export default class GlobalNotification extends React.Component {
       shadowClose: true
     };
     this.onClose = this.onClose.bind(this);
+    this.getNotiifcationData = this.getNotiifcationData.bind(this);
+    this.handleStatusChange = this.handleStatusChange.bind(this);
   }
 
   componentDidMount() {
@@ -24,18 +28,44 @@ export default class GlobalNotification extends React.Component {
       id,
       needAutoClose
     } = this.props;
+    this.handleStatusChange(STATUS.MOUNTED);
 
     if (needAutoClose) {
       this.hideMessageTimer = setTimeout(() => {
         hideMessage(id);
+        this.handleStatusChange(STATUS.DISMISSING);
       }, hideTime);
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.id === this.props.id && (prevProps.message !== this.props.message || prevProps.type !== this.props.type)) {
+      this.handleStatusChange(STATUS.UPDATED);
+    }
+  }
+
   componentWillUnmount() {
     if (this.hideMessageTimer) {
       clearTimeout(this.hideMessageTimer);
     }
+
+    this.handleStatusChange(STATUS.UNMOUNTED);
+  }
+
+  handleStatusChange(status) {
+    const {
+      onStatusChange
+    } = this.props;
+
+    if (typeof onStatusChange == 'function') {
+      const notificationData = this.getNotiifcationData();
+      const currentTime = getCurrentTime();
+      onStatusChange({
+        status,
+        ...notificationData,
+        time: currentTime
+      });
+    }
   }
 
   onClose(e) {
@@ -47,20 +77,31 @@ export default class GlobalNotification extends React.Component {
     this.setState({
       shadowClose: false
     });
+    this.handleStatusChange(STATUS.DISMISSING);
     hideMessage && hideMessage(id);
     onClose && onClose(e);
   }
 
+  getNotiifcationData() {
+    const {
+      id,
+      type,
+      message
+    } = this.props;
+    return {
+      id,
+      type,
+      message
+    };
+  }
+
   render() {
     let {
-      type,
-      message,
       hideMessage,
       onClick,
       i18nKeys = {},
       customProps,
       dataSelectorId,
-      id,
       needShadow,
       shadowCount,
       eleRef
@@ -71,15 +112,13 @@ export default class GlobalNotification extends React.Component {
     let {
       closeTitle = 'Close'
     } = i18nKeys;
-    return /*#__PURE__*/React.createElement(GlobalNotificationUI, {
-      type: type,
-      message: message,
+    const notificationData = this.getNotiifcationData();
+    return /*#__PURE__*/React.createElement(GlobalNotificationUI, { ...notificationData,
       hideMessage: hideMessage,
       onClick: onClick,
       closeTitle: closeTitle,
       customProps: customProps,
       dataSelectorId: dataSelectorId,
-      id: id,
       shadowCount: shadowCount,
       onClose: this.onClose,
       needShadow: shadowClose && needShadow,

package/es/version2/GlobalNotification/__tests__/GlobalNotification.spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import GlobalNotification from "../GlobalNotification";
+import { STATUS } from "../utils/constants";
 describe('GlobalNotification', () => {
   test('rendering the defult props', () => {
     const {
@@ -8,4 +9,12 @@ describe('GlobalNotification', () => {
     } = render( /*#__PURE__*/React.createElement(GlobalNotification, null));
     expect(asFragment()).toMatchSnapshot();
   });
+});
+describe('GlobalNotification Constants', () => {
+  test('should have correct constant values', () => {
+    expect(STATUS.MOUNTED).toBe('mounted');
+    expect(STATUS.UPDATED).toBe('updated');
+    expect(STATUS.DISMISSING).toBe('dismissing');
+    expect(STATUS.UNMOUNTED).toBe('unmounted');
+  });
 });

package/es/version2/GlobalNotification/props/propTypes.js

@@ -10,12 +10,13 @@ export const propTypes = {
   customProps: PropTypes.shape({
     ExtraProps: PropTypes.object
   }),
-  id: PropTypes.number,
+  id: PropTypes.string,
   hideTime: PropTypes.number,
   needAutoClose: PropTypes.bool,
   isCollapseView: PropTypes.bool,
   shadowCount: PropTypes.number,
-  needShadow: PropTypes.bool
+  needShadow: PropTypes.bool,
+  onStatusChange: PropTypes.func
 };
 export const UI_propTypes = {
   dataSelectorId: PropTypes.string,
@@ -28,7 +29,7 @@ export const UI_propTypes = {
   }),
   needShadow: PropTypes.bool,
   shadowCount: PropTypes.number,
-  id: PropTypes.number,
+  id: PropTypes.string,
   onClose: PropTypes.func
 };
 export const new_propTypes = {

package/es/version2/GlobalNotification/utils/constants.js

@@ -0,0 +1,6 @@
+export const STATUS = {
+  MOUNTED: 'mounted',
+  UNMOUNTED: 'unmounted',
+  UPDATED: 'updated',
+  DISMISSING: 'dismissing'
+};

package/lib/form/fields/Fields.module.css

@@ -71,16 +71,11 @@
 }
 .radioBox {
   max-width: 100% ;
-  transition: border var(--zd_transition3);
-  border: 1px solid var(--zdt_radiofield_box_border);
-  border-radius: 6px;
-}
-.radioBox.primaryTextOnly {
   height: var(--zd_size36) ;
+  transition: border var(--zd_transition3);
   padding: 0 var(--zd_size10) ;
-}
-.radioBox.withSecondaryText {
-  padding: var(--zd_size18) var(--zd_size16) ;
+  border: 1px solid var(--zdt_radiofield_box_border);
+  border-radius: 6px
 }
 .hoverableRadioBox:hover, .radioBoxActive {
   border-color: var(--zdt_radiofield_box_active_border)

package/lib/form/fields/RadioField/RadioField.js

@@ -9,8 +9,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _utils = require("@zohodesk/utils");
-
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
@@ -186,30 +184,18 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? isBoxStyle ? _FieldsModule["default"].fieldMargin_large : _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
       }, options.map(function (option, index) {
-        var _compileClassNames;
-
         var text = option.text,
             value = option.value,
             _option$disabled = option.disabled,
             disabled = _option$disabled === void 0 ? false : _option$disabled,
             tooltip = option.tooltip,
-            infoTooltip = option.infoTooltip,
-            secondaryText = option.secondaryText,
-            renderRightPlaceholderNode = option.renderRightPlaceholderNode,
-            customProps = option.customProps;
+            infoTooltip = option.infoTooltip;
         var isDisabledState = disabled || isDisabled;
         var isChecked = selectedValue == value;
-        var rightPlaceholderNode = !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
-          name: "ZD-GN-info",
-          size: "16",
-          title: infoTooltip,
-          iconClass: _FieldsModule["default"].infoIcon
-        }, InfoIconProps)), renderRightPlaceholderNode) : renderRightPlaceholderNode;
-        var radioBoxClasses = isBoxStyle ? (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, _FieldsModule["default"].radioBox, true), _defineProperty(_compileClassNames, _FieldsModule["default"].withSecondaryText, !!secondaryText), _defineProperty(_compileClassNames, _FieldsModule["default"].primaryTextOnly, !secondaryText), _defineProperty(_compileClassNames, _FieldsModule["default"].hoverableRadioBox, !isDisabledState), _defineProperty(_compileClassNames, _FieldsModule["default"].radioBoxActive, isChecked), _compileClassNames)) : '';
         return /*#__PURE__*/_react["default"].createElement("span", {
           key: index,
           className: "".concat(!isBoxStyle ? _FieldsModule["default"].radio : '', " ").concat(_FieldsModule["default"].radioWrap)
-        }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], _extends({}, customProps, {
+        }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], _extends({
           id: index,
           value: value,
           name: id,
@@ -226,21 +212,20 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           checked: isChecked,
           dataId: dataId,
           isReadOnly: isReadOnly,
-          variant: variant,
-          secondaryText: secondaryText
+          variant: variant
         }, RadioProps, {
           a11y: _objectSpread({
             tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1'
           }, RadioProps.a11y),
           customClass: _objectSpread({
-            customRadioWrap: radioBoxClasses
-          }, RadioProps.customClass),
-          customProps: _objectSpread({
-            LabelProps: _objectSpread(_objectSpread({}, RadioProps.customProps ? RadioProps.customProps.LabelProps : undefined), {}, {
-              renderRightPlaceholderNode: rightPlaceholderNode
-            })
-          }, RadioProps.customProps)
-        })));
+            customRadioWrap: isBoxStyle ? "".concat(_FieldsModule["default"].radioBox, " ").concat(!isDisabledState ? _FieldsModule["default"].hoverableRadioBox : '', " ").concat(isChecked ? _FieldsModule["default"].radioBoxActive : '') : ''
+          }, RadioProps.customClass)
+        }), !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
+          name: "ZD-GN-info",
+          size: "16",
+          title: infoTooltip,
+          iconClass: _FieldsModule["default"].infoIcon
+        }, InfoIconProps)) : null));
       })), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,

package/lib/form/fields/RadioField/__tests__/RadioField.spec.js

@@ -24,22 +24,6 @@ var options = [{
   text: 'Kolkata',
   value: '4'
 }];
-var optionsWithsecondaryText = [{
-  text: 'Chennai',
-  value: '1',
-  secondaryText: 'Tamil Nadu Capital'
-}, {
-  text: 'Mumbai',
-  value: '2',
-  secondaryText: 'Maharashtra Capital',
-  tooltip: 'Disabled Option',
-  disabled: true
-}, {
-  text: 'Delhi',
-  value: '3',
-  secondaryText: 'Capital of India',
-  infoTooltip: 'Capital of India'
-}];
 describe('RadioField', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
@@ -66,21 +50,4 @@ describe('RadioField', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering with secondaryTextOptions', function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
-      options: optionsWithsecondaryText
-    })),
-        asFragment = _render4.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering with secondaryTextOptions & isBoxStyle', function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
-      options: optionsWithsecondaryText,
-      isBoxStyle: true
-    })),
-        asFragment = _render5.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });