@zohodesk/dot 1.0.0-beta.21 → 1.0.0-beta.210

package/es/ToastMessage/ToastMessage.js

@@ -1,295 +1,204 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
-import React from 'react';
-import PropTypes from 'prop-types';
+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); }
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types'; //components
+
 import Icon from '@zohodesk/icons/lib/Icon';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import style from './ToastMessage.module.css';
-import { popNotificationAction } from '../actions';
+import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { useUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import AutoClose from '../actions/AutoClose';
+import a11yStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css'; //style
 
-var ToastMessage = function (_React$Component) {
-  _inherits(ToastMessage, _React$Component);
+import style from './ToastMessage.module.css';
 
-  function ToastMessage(props) {
-    _classCallCheck(this, ToastMessage);
+function removeClose(e) {
+  e && e.stopPropagation && e.stopPropagation();
+  e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
+}
 
-    var _this = _possibleConstructorReturn(this, (ToastMessage.__proto__ || _Object$getPrototypeOf(ToastMessage)).call(this, props));
+function ToastMessageUI(props) {
+  let [messageState, setMessageState] = useState(props.messageState);
+  let {
+    type,
+    subject,
+    info,
+    submitText,
+    cancelText,
+    iconName,
+    iconSize,
+    submitType,
+    isIconMid,
+    needClose,
+    iconPalette,
+    isMore,
+    message,
+    isAnimate,
+    getLeftContainer,
+    getInnerBottomContainer,
+    getBottomContainer,
+    getSubmitContainer,
+    onSubmit,
+    onCancel,
+    dataId,
+    isClose,
+    onClose,
+    needAutoZindex,
+    a11y
+  } = props;
 
-    _this.state = {
-      messageState: _this.props.messageState,
-      isClose: _this.props.isClose
-    };
-    _this._mount = false;
-    _this.messageOff = _this.messageOff.bind(_this);
-    _this.closePop = _this.closePop.bind(_this);
-    return _this;
+  function onClickSubmit(e) {
+    onSubmit && onSubmit();
+    onClose && onClose();
   }
 
-  _createClass(ToastMessage, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      this._mount = true;
-      var _props = this.props,
-          autoClose = _props.autoClose,
-          hideTime = _props.hideTime,
-          id = _props.id,
-          hidePopNotification = _props.hidePopNotification;
-
-      if (autoClose) {
-        setTimeout(function () {
-          var isClose = _this2.state.isClose;
-
-          if (!isClose && _this2._mount) {
-            _this2.setState({ isClose: true }, function () {
-              setTimeout(function () {
-                hidePopNotification(id);
-              }, 300);
-            });
-          }
-        }, hideTime);
-      }
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this._mount = false;
-    }
-  }, {
-    key: 'messageOff',
-    value: function messageOff(e) {
-      this.setState({ messageState: !this.state.messageState });
-      e.stopPropagation();
-    }
-  }, {
-    key: 'closePop',
-    value: function closePop(e) {
-      var _this3 = this;
-
-      this.setState({ isClose: true }, function () {
-        var _props2 = _this3.props,
-            id = _props2.id,
-            hidePopNotification = _props2.hidePopNotification;
-
-        setTimeout(function () {
-          hidePopNotification(id);
-        }, 300);
-      });
-
-      e.stopPropagation();
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props3 = this.props,
-          id = _props3.id,
-          type = _props3.type,
-          subject = _props3.subject,
-          info = _props3.info,
-          submitText = _props3.submitText,
-          cancelText = _props3.cancelText,
-          iconName = _props3.iconName,
-          iconSize = _props3.iconSize,
-          submitType = _props3.submitType,
-          isIconMid = _props3.isIconMid,
-          needClose = _props3.needClose,
-          iconPalette = _props3.iconPalette,
-          isMore = _props3.isMore,
-          message = _props3.message,
-          isAnimate = _props3.isAnimate,
-          getLeftContainer = _props3.getLeftContainer,
-          getInnerBottomContainer = _props3.getInnerBottomContainer,
-          getBottomContainer = _props3.getBottomContainer,
-          getSubmitContainer = _props3.getSubmitContainer,
-          onSubmit = _props3.onSubmit,
-          onCancel = _props3.onCancel,
-          dataId = _props3.dataId;
-
-
-      var animateClass = this.state.isClose ? style.rightanimate : style.leftanimate;
-      var animateRemoveClass = this.state.isClose ? style.rightanimate : style.leftnoanimate;
-      var channelIcon = React.createElement(Icon, { iconClass: style[iconPalette], name: iconName, size: iconSize });
-
-      return React.createElement(
-        Container,
-        {
-          className: style.container + ' ' + (isAnimate ? animateClass : animateRemoveClass) + ' ' + (style['alert' + type] ? style['alert' + type] : ''),
-          isCover: false,
-          dataId: dataId
-        },
-        React.createElement(
-          Box,
-          { className: style.alertifychild, flexible: true },
-          React.createElement(
-            Container,
-            { alignBox: 'row', className: style.alertifybanner },
-            React.createElement(
-              Box,
-              { className: style.alertleft, flexible: true },
-              React.createElement(
-                Container,
-                { align: isIconMid ? 'vertical' : '', alignBox: 'row' },
-                type != 'success' && !getLeftContainer ? React.createElement(
-                  Box,
-                  { className: '' + style.alertico },
-                  React.createElement(
-                    'span',
-                    null,
-                    channelIcon
-                  )
-                ) : getLeftContainer ? React.createElement(
-                  Box,
-                  { className: '' + style.alertico },
-                  getLeftContainer()
-                ) : null,
-                React.createElement(
-                  Box,
-                  { flexible: true },
-                  React.createElement(
-                    Container,
-                    { align: 'vertical', alignBox: 'row', isCover: false },
-                    type == 'success' ? React.createElement(
-                      Box,
-                      { className: style.alertTitleLeft },
-                      channelIcon
-                    ) : null,
-                    React.createElement(
-                      Box,
-                      { className: style.alertTitle, flexible: true },
-                      subject
-                    )
-                  ),
-                  info ? React.createElement(
-                    'p',
-                    { className: style.alertMessage },
-                    info
-                  ) : null,
-                  getInnerBottomContainer ? React.createElement(
-                    'div',
-                    null,
-                    getInnerBottomContainer()
-                  ) : null
-                ),
-                type == 'information' ? React.createElement(
-                  Box,
-                  {
-                    className: style.closeIconPrimary,
-                    onClick: this.closePop,
-                    dataId: dataId + '_close'
-                  },
-                  React.createElement(Icon, { isBold: true, name: 'ZD-close', size: '18' })
-                ) : null
-              )
-            ),
-            type != 'information' ? React.createElement(
-              Box,
-              { className: style.alertright },
-              React.createElement(
-                Container,
-                { className: style.alerttab },
-                needClose ? React.createElement(
-                  'span',
-                  {
-                    className: style.closeIcon,
-                    onClick: this.closePop,
-                    'data-id': dataId + '_closeRight'
-                  },
-                  React.createElement(Icon, { name: 'ZD-close', size: '18' })
-                ) : null,
-                submitText ? React.createElement(
-                  Box,
-                  {
-                    className: (getSubmitContainer ? style.sumbitBorder : cancelText ? style.notSolo : style.mainbutton) + ' ' + (getSubmitContainer ? '' : style[submitType]) + ' ',
-                    flexible: true,
-                    onClick: function onClick() {
-                      onSubmit && onSubmit();
-                      popNotificationAction.ob.resolve(id);
-                    },
-                    dataId: dataId + '_submitButton'
-                  },
-                  React.createElement(
-                    Container,
-                    { align: 'vertical', alignBox: 'row' },
-                    getSubmitContainer ? React.createElement(
-                      Box,
-                      { flexible: true },
-                      getSubmitContainer()
-                    ) : React.createElement(
-                      Box,
-                      { className: style.buttonText, flexible: true },
-                      submitText
-                    )
-                  )
-                ) : null,
-                cancelText ? React.createElement(
-                  Box,
-                  {
-                    className: '' + style.cancelButton,
-                    flexible: true,
-                    onClick: this.closePop,
-                    dataId: dataId + '_cancelButton'
-                  },
-                  React.createElement(
-                    Container,
-                    { align: 'vertical', alignBox: 'row' },
-                    React.createElement(
-                      Box,
-                      {
-                        className: '' + style.buttonText,
-                        flexible: true,
-                        onClick: function onClick() {
-                          onCancel && onCancel();
-                          popNotificationAction.ob.reject(id);
-                        },
-                        dataId: dataId + '_cancelButtonInner'
-                      },
-                      cancelText
-                    ),
-                    isMore ? React.createElement(
-                      Box,
-                      {
-                        className: style.dropdown,
-                        onClick: this.messageOff,
-                        dataId: dataId + '_moreIcon'
-                      },
-                      React.createElement(Icon, { name: 'ZD-down', size: '7' })
-                    ) : null
-                  )
-                ) : null
-              )
-            ) : null
-          )
-        ),
-        isMore ? React.createElement(
-          Box,
-          {
-            className: style.message + ' ' + (this.state.messageState ? '' : style.messageOff),
-            tagName: 'p'
-          },
-          message
-        ) : null,
-        getBottomContainer ? React.createElement(
-          Box,
-          null,
-          getBottomContainer()
-        ) : null
-      );
-    }
-  }]);
-
-  return ToastMessage;
-}(React.Component);
+  function onClickCancel(e) {
+    onCancel && onCancel();
+    onClose && onClose();
+  }
 
-export default ToastMessage;
+  function changeMessageState(e) {
+    removeClose(e);
+    setMessageState(!messageState);
+  }
 
+  let animateClass = isClose ? style.rightanimate : style.leftanimate;
+  let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
+  let channelIcon = /*#__PURE__*/React.createElement(Icon, {
+    iconClass: style[iconPalette],
+    name: iconName,
+    size: iconSize
+  });
+  let getNextIndex = useZIndex();
+  let Zindex = isAnimate ? getNextIndex() : null,
+      getNextId = useUniqueId(),
+      titleId = getNextId(),
+      infoId = getNextId();
+  let {
+    role = 'alert',
+    ariaLive = 'assertive',
+    ariaAtomic = true,
+    ariaDescribedby = infoId,
+    ariaLabelledby = titleId
+  } = a11y;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`alert${type}`] ? style[`alert${type}`] : ''}`,
+    isCover: false,
+    dataId: dataId,
+    style: needAutoZindex && isAnimate ? {
+      zIndex: `${Zindex}`
+    } : {},
+    role: role,
+    "aria-live": ariaLive,
+    "aria-atomic": ariaAtomic,
+    "aria-describedby": ariaDescribedby,
+    "aria-labelledby": ariaLabelledby
+  }, type !== 'custom' ? /*#__PURE__*/React.createElement(Box, {
+    className: style.alertifychild,
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: style.alertifybanner
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.alertleft,
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: isIconMid ? 'vertical' : '',
+    alignBox: "row"
+  }, type != 'success' && !getLeftContainer ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.alertico}`
+  }, /*#__PURE__*/React.createElement("span", null, channelIcon)) : getLeftContainer ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.alertico}`
+  }, getLeftContainer()) : null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    isCover: false
+  }, type == 'success' ? /*#__PURE__*/React.createElement(Box, {
+    className: style.alertTitleLeft
+  }, channelIcon) : null, /*#__PURE__*/React.createElement(Box, {
+    className: style.alertTitle,
+    flexible: true,
+    "data-title": subject,
+    id: titleId
+  }, subject)), info ? /*#__PURE__*/React.createElement("p", {
+    className: style.alertMessage,
+    "data-title": info,
+    id: infoId
+  }, info) : null, getInnerBottomContainer ? /*#__PURE__*/React.createElement("div", null, getInnerBottomContainer()) : null), type == 'information' && needClose ? /*#__PURE__*/React.createElement(Box, {
+    className: `${a11yStyle.buttonReset} ${style.closeIconPrimary}`,
+    onClick: onClose,
+    dataId: `${dataId}_close`,
+    tagName: "button"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    isBold: true,
+    name: "ZD-close",
+    size: "18"
+  })) : null)), type != 'information' ? /*#__PURE__*/React.createElement(Box, {
+    className: style.alertright
+  }, /*#__PURE__*/React.createElement(Container, {
+    className: style.alerttab
+  }, needClose ? /*#__PURE__*/React.createElement("button", {
+    className: `${a11yStyle.buttonReset} ${style.closeIcon}`,
+    onClick: onClose,
+    "data-id": `${dataId}_closeRight`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-close",
+    size: "18"
+  })) : null, submitText ? /*#__PURE__*/React.createElement(Box, {
+    className: `${getSubmitContainer ? style.sumbitBorder : cancelText ? style.notSolo : style.mainbutton} ${getSubmitContainer ? '' : style[submitType]} `,
+    flexible: true,
+    onClick: onClickSubmit,
+    dataId: `${dataId}_submitButton`
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row"
+  }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
+    className: `${a11yStyle.buttonReset} ${style.buttonText}`,
+    flexible: true,
+    tagName: "button"
+  }, submitText))) : null, cancelText ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.cancelButton}`,
+    flexible: true,
+    onClick: onClose,
+    dataId: `${dataId}_cancelButton`
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: `${a11yStyle.buttonReset} ${style.buttonText}`,
+    flexible: true,
+    onClick: onClickCancel,
+    dataId: `${dataId}_cancelButtonInner`,
+    tagName: "button"
+  }, cancelText), isMore ? /*#__PURE__*/React.createElement(Box, {
+    className: `${a11yStyle.buttonReset} ${style.dropdown}`,
+    onClick: changeMessageState,
+    dataId: `${dataId}_moreIcon`,
+    tagName: "button",
+    "aria-expanded": messageState ? true : false,
+    "aria-haspopup": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-down",
+    size: "7"
+  })) : null)) : null)) : null)) : null, isMore ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.message} ${messageState ? '' : style.messageOff}`,
+    tagName: "p"
+  }, message) : null, getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null);
+}
 
+export default function ToastMessage(props) {
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
+    Element: ToastMessageUI
+  }));
+}
 ToastMessage.propTypes = {
   autoClose: PropTypes.bool,
   cancelText: PropTypes.string,
+  dataId: PropTypes.string,
   getBottomContainer: PropTypes.func,
   getInnerBottomContainer: PropTypes.func,
   getLeftContainer: PropTypes.func,
@@ -313,10 +222,16 @@ ToastMessage.propTypes = {
   subject: PropTypes.string,
   submitText: PropTypes.string,
   submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
-  type: PropTypes.oneOf(['primary', 'information', 'secondary', 'success']),
-  dataId: PropTypes.string
+  type: PropTypes.oneOf(['primary', 'information', 'secondary', 'success', 'custom']),
+  needAutoZindex: PropTypes.bool,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaLive: PropTypes.oneOf(['polite', 'assertive', 'off']),
+    ariaAtomic: PropTypes.bool,
+    ariaDescribedby: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  })
 };
-
 ToastMessage.defaultProps = {
   iconName: 'bell',
   iconSize: '30',
@@ -330,12 +245,13 @@ ToastMessage.defaultProps = {
   isClose: false,
   autoClose: false,
   hideTime: '3000',
-  dataId: 'toastMessage'
+  dataId: 'toastMessage',
+  needAutoZindex: true,
+  a11y: {}
 };
 
 if (false) {
   ToastMessage.docs = {
-    componentGroup: 'Atom',
-    description: ' '
+    componentGroup: 'Atom'
   };
 }