@zohodesk/dot 1.0.0-temp-49 → 1.0.0-temp-53

package/src/ToastMessage/ToastMessage.js

@@ -1,315 +1,315 @@
-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 { 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
-import style from './ToastMessage.module.css';
-
-function removeClose(e) {
-  e && e.stopPropagation && e.stopPropagation();
-  e &&
-    e.nativeEvent &&
-    e.nativeEvent.stopImmediatePropagation &&
-    e.nativeEvent.stopImmediatePropagation();
-}
-
-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;
-  function onClickSubmit(e) {
-    onSubmit && onSubmit();
-    onClose && onClose();
-  }
-
-  function onClickCancel(e) {
-    onCancel && onCancel();
-    onClose && onClose();
-  }
-
-  function changeMessageState(e) {
-    removeClose(e);
-    setMessageState(!messageState);
-  }
-
-  let animateClass = isClose ? style.rightanimate : style.leftanimate;
-  let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
-  let channelIcon = (
-    <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 (
-    <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' ? (
-        <Box className={style.alertifychild} flexible>
-          <Container alignBox='row' className={style.alertifybanner}>
-            <Box className={style.alertleft} flexible>
-              <Container align={isIconMid ? 'vertical' : ''} alignBox='row'>
-                {type != 'success' && !getLeftContainer ? (
-                  <Box className={`${style.alertico}`}>
-                    <span>{channelIcon}</span>
-                  </Box>
-                ) : getLeftContainer ? (
-                  <Box className={`${style.alertico}`}>
-                    {getLeftContainer()}
-                  </Box>
-                ) : null}
-                <Box flexible>
-                  <Container align='vertical' alignBox='row' isCover={false}>
-                    {type == 'success' ? (
-                      <Box className={style.alertTitleLeft}>{channelIcon}</Box>
-                    ) : null}
-                    <Box
-                      className={style.alertTitle}
-                      flexible
-                      data-title={subject}
-                      id={titleId}
-                    >
-                      {subject}
-                    </Box>
-                  </Container>
-                  {info ? (
-                    <p
-                      className={style.alertMessage}
-                      data-title={info}
-                      id={infoId}
-                    >
-                      {info}
-                    </p>
-                  ) : null}
-                  {getInnerBottomContainer ? (
-                    <div>{getInnerBottomContainer()}</div>
-                  ) : null}
-                </Box>
-                {type == 'information' && needClose ? (
-                  <Box
-                    className={`${a11yStyle.buttonReset} ${style.closeIconPrimary}`}
-                    onClick={onClose}
-                    dataId={`${dataId}_close`}
-                    tagName='button'
-                  >
-                    <Icon isBold name='ZD-close' size='18' />
-                  </Box>
-                ) : null}
-              </Container>
-            </Box>
-            {type != 'information' ? (
-              <Box className={style.alertright}>
-                <Container className={style.alerttab}>
-                  {needClose ? (
-                    <button
-                      className={`${a11yStyle.buttonReset} ${style.closeIcon}`}
-                      onClick={onClose}
-                      data-id={`${dataId}_closeRight`}
-                    >
-                      <Icon name='ZD-close' size='18' />
-                    </button>
-                  ) : null}
-                  {submitText ? (
-                    <Box
-                      className={`${
-                        getSubmitContainer
-                          ? style.sumbitBorder
-                          : cancelText
-                          ? style.notSolo
-                          : style.mainbutton
-                      } ${getSubmitContainer ? '' : style[submitType]} `}
-                      flexible
-                      onClick={onClickSubmit}
-                      dataId={`${dataId}_submitButton`}
-                    >
-                      <Container align='vertical' alignBox='row'>
-                        {getSubmitContainer ? (
-                          <Box flexible>{getSubmitContainer()}</Box>
-                        ) : (
-                          <Box
-                            className={`${a11yStyle.buttonReset} ${style.buttonText}`}
-                            flexible
-                            tagName='button'
-                          >
-                            {submitText}
-                          </Box>
-                        )}
-                      </Container>
-                    </Box>
-                  ) : null}
-                  {cancelText ? (
-                    <Box
-                      className={`${style.cancelButton}`}
-                      flexible
-                      onClick={onClose}
-                      dataId={`${dataId}_cancelButton`}
-                    >
-                      <Container align='vertical' alignBox='row'>
-                        <Box
-                          className={`${a11yStyle.buttonReset} ${style.buttonText}`}
-                          flexible
-                          onClick={onClickCancel}
-                          dataId={`${dataId}_cancelButtonInner`}
-                          tagName='button'
-                        >
-                          {cancelText}
-                        </Box>
-                        {isMore ? (
-                          <Box
-                            className={`${a11yStyle.buttonReset} ${style.dropdown}`}
-                            onClick={changeMessageState}
-                            dataId={`${dataId}_moreIcon`}
-                            tagName='button'
-                            aria-expanded={messageState ? true : false}
-                            aria-haspopup={true}
-                          >
-                            <Icon name='ZD-down' size='7' />
-                          </Box>
-                        ) : null}
-                      </Container>
-                    </Box>
-                  ) : null}
-                </Container>
-              </Box>
-            ) : null}
-          </Container>
-        </Box>
-      ) : null}
-      {isMore ? (
-        <Box
-          className={`${style.message} ${messageState ? '' : style.messageOff}`}
-          tagName='p'
-        >
-          {message}
-        </Box>
-      ) : null}
-
-      {getBottomContainer ? <Box>{getBottomContainer()}</Box> : null}
-    </Container>
-  );
-}
-
-export default function ToastMessage(props) {
-  return <AutoClose {...props} Element={ToastMessageUI} />;
-}
-
-ToastMessage.propTypes = {
-  autoClose: PropTypes.bool,
-  cancelText: PropTypes.string,
-  dataId: PropTypes.string,
-  getBottomContainer: PropTypes.func,
-  getInnerBottomContainer: PropTypes.func,
-  getLeftContainer: PropTypes.func,
-  getSubmitContainer: PropTypes.func,
-  hidePopNotification: PropTypes.func,
-  hideTime: PropTypes.string,
-  iconName: PropTypes.string,
-  iconPalette: PropTypes.oneOf([
-    'successFill',
-    'dangerFill',
-    'dangerShadow',
-    'successPlain',
-    'dangerPlain',
-    'primaryPlain'
-  ]),
-  iconSize: PropTypes.string,
-  id: PropTypes.string,
-  info: PropTypes.string,
-  isAnimate: PropTypes.bool,
-  isClose: PropTypes.bool,
-  isIconMid: PropTypes.bool,
-  isMore: PropTypes.bool,
-  message: PropTypes.string,
-  messageState: PropTypes.bool,
-  needClose: PropTypes.bool,
-  onCancel: PropTypes.func,
-  onSubmit: PropTypes.func,
-  subject: PropTypes.string,
-  submitText: PropTypes.string,
-  submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
-  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',
-  submitType: 'primary',
-  isIconMid: false,
-  needClose: false,
-  type: 'primary',
-  isMore: false,
-  messageState: false,
-  isAnimate: true,
-  isClose: false,
-  autoClose: false,
-  hideTime: '3000',
-  dataId: 'toastMessage',
-  needAutoZindex: true,
-  a11y: {}
-};
-
-if (__DOCS__) {
-  ToastMessage.docs = {
-    componentGroup: 'Atom'
-  };
-}
+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 { 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
+import style from './ToastMessage.module.css';
+
+function removeClose(e) {
+  e && e.stopPropagation && e.stopPropagation();
+  e &&
+    e.nativeEvent &&
+    e.nativeEvent.stopImmediatePropagation &&
+    e.nativeEvent.stopImmediatePropagation();
+}
+
+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;
+  function onClickSubmit(e) {
+    onSubmit && onSubmit();
+    onClose && onClose();
+  }
+
+  function onClickCancel(e) {
+    onCancel && onCancel();
+    onClose && onClose();
+  }
+
+  function changeMessageState(e) {
+    removeClose(e);
+    setMessageState(!messageState);
+  }
+
+  let animateClass = isClose ? style.rightanimate : style.leftanimate;
+  let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
+  let channelIcon = (
+    <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 (
+    <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' ? (
+        <Box className={style.alertifychild} flexible>
+          <Container alignBox='row' className={style.alertifybanner}>
+            <Box className={style.alertleft} flexible>
+              <Container align={isIconMid ? 'vertical' : ''} alignBox='row'>
+                {type != 'success' && !getLeftContainer ? (
+                  <Box className={`${style.alertico}`}>
+                    <span>{channelIcon}</span>
+                  </Box>
+                ) : getLeftContainer ? (
+                  <Box className={`${style.alertico}`}>
+                    {getLeftContainer()}
+                  </Box>
+                ) : null}
+                <Box flexible>
+                  <Container align='vertical' alignBox='row' isCover={false}>
+                    {type == 'success' ? (
+                      <Box className={style.alertTitleLeft}>{channelIcon}</Box>
+                    ) : null}
+                    <Box
+                      className={style.alertTitle}
+                      flexible
+                      data-title={subject}
+                      id={titleId}
+                    >
+                      {subject}
+                    </Box>
+                  </Container>
+                  {info ? (
+                    <p
+                      className={style.alertMessage}
+                      data-title={info}
+                      id={infoId}
+                    >
+                      {info}
+                    </p>
+                  ) : null}
+                  {getInnerBottomContainer ? (
+                    <div>{getInnerBottomContainer()}</div>
+                  ) : null}
+                </Box>
+                {type == 'information' && needClose ? (
+                  <Box
+                    className={`${a11yStyle.buttonReset} ${style.closeIconPrimary}`}
+                    onClick={onClose}
+                    dataId={`${dataId}_close`}
+                    tagName='button'
+                  >
+                    <Icon isBold name='ZD-close' size='18' />
+                  </Box>
+                ) : null}
+              </Container>
+            </Box>
+            {type != 'information' ? (
+              <Box className={style.alertright}>
+                <Container className={style.alerttab}>
+                  {needClose ? (
+                    <button
+                      className={`${a11yStyle.buttonReset} ${style.closeIcon}`}
+                      onClick={onClose}
+                      data-id={`${dataId}_closeRight`}
+                    >
+                      <Icon name='ZD-close' size='18' />
+                    </button>
+                  ) : null}
+                  {submitText ? (
+                    <Box
+                      className={`${
+                        getSubmitContainer
+                          ? style.sumbitBorder
+                          : cancelText
+                          ? style.notSolo
+                          : style.mainbutton
+                      } ${getSubmitContainer ? '' : style[submitType]} `}
+                      flexible
+                      onClick={onClickSubmit}
+                      dataId={`${dataId}_submitButton`}
+                    >
+                      <Container align='vertical' alignBox='row'>
+                        {getSubmitContainer ? (
+                          <Box flexible>{getSubmitContainer()}</Box>
+                        ) : (
+                          <Box
+                            className={`${a11yStyle.buttonReset} ${style.buttonText}`}
+                            flexible
+                            tagName='button'
+                          >
+                            {submitText}
+                          </Box>
+                        )}
+                      </Container>
+                    </Box>
+                  ) : null}
+                  {cancelText ? (
+                    <Box
+                      className={`${style.cancelButton}`}
+                      flexible
+                      onClick={onClose}
+                      dataId={`${dataId}_cancelButton`}
+                    >
+                      <Container align='vertical' alignBox='row'>
+                        <Box
+                          className={`${a11yStyle.buttonReset} ${style.buttonText}`}
+                          flexible
+                          onClick={onClickCancel}
+                          dataId={`${dataId}_cancelButtonInner`}
+                          tagName='button'
+                        >
+                          {cancelText}
+                        </Box>
+                        {isMore ? (
+                          <Box
+                            className={`${a11yStyle.buttonReset} ${style.dropdown}`}
+                            onClick={changeMessageState}
+                            dataId={`${dataId}_moreIcon`}
+                            tagName='button'
+                            aria-expanded={messageState ? true : false}
+                            aria-haspopup={true}
+                          >
+                            <Icon name='ZD-down' size='7' />
+                          </Box>
+                        ) : null}
+                      </Container>
+                    </Box>
+                  ) : null}
+                </Container>
+              </Box>
+            ) : null}
+          </Container>
+        </Box>
+      ) : null}
+      {isMore ? (
+        <Box
+          className={`${style.message} ${messageState ? '' : style.messageOff}`}
+          tagName='p'
+        >
+          {message}
+        </Box>
+      ) : null}
+
+      {getBottomContainer ? <Box>{getBottomContainer()}</Box> : null}
+    </Container>
+  );
+}
+
+export default function ToastMessage(props) {
+  return <AutoClose {...props} Element={ToastMessageUI} />;
+}
+
+ToastMessage.propTypes = {
+  autoClose: PropTypes.bool,
+  cancelText: PropTypes.string,
+  dataId: PropTypes.string,
+  getBottomContainer: PropTypes.func,
+  getInnerBottomContainer: PropTypes.func,
+  getLeftContainer: PropTypes.func,
+  getSubmitContainer: PropTypes.func,
+  hidePopNotification: PropTypes.func,
+  hideTime: PropTypes.string,
+  iconName: PropTypes.string,
+  iconPalette: PropTypes.oneOf([
+    'successFill',
+    'dangerFill',
+    'dangerShadow',
+    'successPlain',
+    'dangerPlain',
+    'primaryPlain'
+  ]),
+  iconSize: PropTypes.string,
+  id: PropTypes.string,
+  info: PropTypes.string,
+  isAnimate: PropTypes.bool,
+  isClose: PropTypes.bool,
+  isIconMid: PropTypes.bool,
+  isMore: PropTypes.bool,
+  message: PropTypes.string,
+  messageState: PropTypes.bool,
+  needClose: PropTypes.bool,
+  onCancel: PropTypes.func,
+  onSubmit: PropTypes.func,
+  subject: PropTypes.string,
+  submitText: PropTypes.string,
+  submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
+  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',
+  submitType: 'primary',
+  isIconMid: false,
+  needClose: false,
+  type: 'primary',
+  isMore: false,
+  messageState: false,
+  isAnimate: true,
+  isClose: false,
+  autoClose: false,
+  hideTime: '3000',
+  dataId: 'toastMessage',
+  needAutoZindex: true,
+  a11y: {}
+};
+
+if (__DOCS__) {
+  ToastMessage.docs = {
+    componentGroup: 'Atom'
+  };
+}