@zohodesk/dot 1.0.0-temp-58 → 1.0.0-temp-61

package/src/Provider.js

@@ -1,203 +0,0 @@
-import React from 'react';
-import { I18NProvider } from '@zohodesk/i18n';
-import { Container } from '@zohodesk/components/lib/Layout';
-import AppContainer from '@zohodesk/components/lib/AppContainer/AppContainer';
-import LibraryContext from '@zohodesk/components/lib/Provider/LibraryContextInit';
-import datetime from '@zohodesk/datetimejs';
-import i18n from './i18n';
-/* component pkg - default mode & themes */
-import '@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css';
-/* component pkg - dark mode & themes */
-import '@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css';
-/* svg pkg - default mode & themes */
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/mode/defaultEmptyStates.module.css';
-/* svg pkg - dark mode & themes */
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/mode/darkEmptyStates.module.css';
-import { setGlobalIdPrefix } from '@zohodesk/components/lib/Provider/IdProvider';
-import { setInitialZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import Switch from '@zohodesk/components/lib/Switch/Switch';
-/* dot pkg - default mode & themes */
-import './Appearance/default/themes/blue/blueDefaultDotTheme.module.css';
-import './Appearance/default/themes/green/greenDefaultDotTheme.module.css';
-import './Appearance/default/themes/orange/orangeDefaultDotTheme.module.css';
-import './Appearance/default/themes/red/redDefaultDotTheme.module.css';
-import './Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css';
-import './Appearance/default/mode/dotDefaultMode.module.css';
-/* dot pkg - dark mode & themes */
-import './Appearance/dark/themes/blue/blueDarkDotTheme.module.css';
-import './Appearance/dark/themes/green/greenDarkDotTheme.module.css';
-import './Appearance/dark/themes/orange/orangeDarkDotTheme.module.css';
-import './Appearance/dark/themes/red/redDarkDotTheme.module.css';
-import './Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css';
-import './Appearance/dark/mode/dotDarkMode.module.css';
-
-datetime.tz.set({
-  timezone: 'Asia/Kolkata',
-  _packed:
-    '-5R.s -5R.k -5l.a -5u -6u|01234343|-4Fg5R.s BKo0.8 1rDcw.a 1r2LP.a 1un0 HB0 7zX0|15e6',
-  _default: 'Asia/Kolkata'
-});
-
-export default class Provider extends React.Component {
-  constructor(props) {
-    super(props);
-    setGlobalIdPrefix('ZD');
-    setInitialZIndex('10');
-    this.state = {
-      appearanceName: 'default',
-      themeName: 'blue'
-    };
-
-    this.switchMode = this.switchMode.bind(this);
-    this.setTheme = this.setTheme.bind(this);
-  }
-
-  switchMode() {
-    let appearanceName = this.state.appearanceName;
-    if (appearanceName == 'default') {
-      this.setState({
-        appearanceName: 'dark'
-      });
-    } else {
-      this.setState({
-        appearanceName: 'default'
-      });
-    }
-  }
-
-  setTheme(theme) {
-    this.setState({
-      themeName: theme
-    });
-  }
-
-  render() {
-    let { appearanceName, themeName } = this.state;
-    let themeClass = {
-      width: '20px',
-      height: '20px',
-      borderRadius: '3px',
-      display: 'flex',
-      border: '1px solid #ccc',
-      margin: '0 5px',
-      cursor: 'pointer',
-      backgroundColor: '#0a73eb'
-    };
-    let green = {
-      backgroundColor: '#26a942'
-    };
-    let red = {
-      backgroundColor: '#de3535'
-    };
-    let orange = {
-      backgroundColor: '#e57717'
-    };
-    let yellow = {
-      backgroundColor: '#e8b923'
-    };
-
-    return (
-      <I18NProvider
-        i18n={i18n}
-        timeZone='Asia/Kolkata'
-        datePattern={''}
-        dateTimeFormat={''}
-        timeFormat={''}
-        direction={'ltr'}
-      >
-             <LibraryContext.Provider value={{isReducedMotion:false,direction:'ltr'}}>
-        <AppContainer
-          customProps={{ExtraProps:{'data-mode':appearanceName,'data-theme':themeName}}}
-        >
-          <Container scroll='vertical'>{this.props.children}</Container>
-          <div
-            style={{
-              position: 'fixed',
-              bottom: '0',
-              backgroundColor: '#272727',
-              padding: '10px',
-              borderRadius: '15px 15px 0 0',
-              minWidth: '100px',
-              textAlign: 'center',
-              left: '50%',
-              transform: 'translate(-50%)',
-              boxShadow: '0 0 3px #000',
-              fontSize: '12px',
-              zIndex: '1000',
-              display: 'flex',
-              alignItems: 'center'
-            }}
-          >
-            <div>
-              <Switch
-                id='switchMode'
-                text='Light/Night Mode'
-                labelSize='small'
-                onChange={this.switchMode}
-                checked={appearanceName == 'dark'}
-              />
-            </div>
-            <div style={{display: 'flex'}}>
-              <span 
-                title='Blue Theme' 
-                style={themeClass}
-                onClick={() => this.setTheme('blue')}
-              ></span>
-              <span 
-                title='Green Theme' 
-                style={Object.assign({}, themeClass, green)}
-                onClick={() => this.setTheme('green')}
-              ></span>
-              <span 
-                title='Red Theme' 
-                style={Object.assign({}, themeClass, red)}
-                onClick={() => this.setTheme('red')}
-              ></span>
-              <span 
-                title='Orange Theme' 
-                style={Object.assign({}, themeClass, orange)}
-                onClick={() => this.setTheme('orange')}
-              ></span>
-              <span 
-                title='Yellow Theme' 
-                style={Object.assign({}, themeClass, yellow)}
-                onClick={() => this.setTheme('yellow')}
-              ></span>
-            </div>
-          </div>
-        </AppContainer>
-        </LibraryContext.Provider>
-      </I18NProvider>
-    );
-  }
-}

package/src/ToastMessage/ToastMessage.js

@@ -1,315 +0,0 @@
-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'
-  };
-}