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

package/src/FreezeLayer/FreezeLayer.js

@@ -1,159 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Container } from '@zohodesk/components/lib/Layout';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import style from './FreezeLayer.module.css';
-import { Shortcut } from '../utils/KeyboardApi';
-import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-
-export default class FreezeLayer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { isActive: props.isActive, isChildActive: false };
-    this.getNextIndex = getZIndex(this);
-  }
-
-  componentDidMount() {
-    let { isActive } = this.props;
-    if (isActive) {
-      this.setState({
-        isChildActive: true
-      });
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    let { isActive } = this.props;
-    if (isActive != prevProps.isActive) {
-      if (isActive) {
-        Shortcut && Shortcut.setState(false);
-        this.setState(
-          {
-            isActive: true
-          },
-          () => {
-            this.setState({
-              isChildActive: true
-            });
-          }
-        );
-      } else {
-        Shortcut && Shortcut.setState(true);
-        this.setState(
-          {
-            isChildActive: false
-          },
-          () => {
-            this.setState({
-              isActive: false
-            });
-          }
-        );
-      }
-    }
-  }
-
-  render() {
-    let {
-      children,
-      align,
-      childAnimationName,
-      palette,
-      onClick,
-      animationName,
-      zIndex,
-      runOnMount,
-      forwardRef,
-      isSvgMask,
-      customClass,
-      needAutoZindex
-    } = this.props;
-    let { isActive, isChildActive } = this.state;
-    return (
-      <VelocityAnimationGroup
-        name={animationName && animationName}
-        isActive={isActive}
-        runOnMount={runOnMount}
-      >
-        <div
-          style={isActive && needAutoZindex ? { zIndex: `${this.getNextIndex()}` } : {}}
-          className={`
-              ${style.container} ${customClass} ${style[`index${zIndex}`]}  ${
-        !isSvgMask ? style[palette] : ''
-      }
-            `}
-          onClick={onClick ? onClick : null}
-          ref={forwardRef}
-        >
-          {children && (
-            <React.Fragment>
-              {childAnimationName ? (
-                <VelocityAnimationGroup
-                  name={childAnimationName}
-                  isActive={isChildActive}
-                  enterDelay={palette === 'plain' ? 0 : 300}
-                  component={Container}
-                  alignBox='row'
-                  align={align}
-                  dataId='reactFreezeLayer'
-                >
-                  {children}
-                </VelocityAnimationGroup>
-              ) : isSvgMask ? (
-                <React.Fragment>{children}</React.Fragment>
-              ) : (
-                <Container
-                  alignBox='row'
-                  align={align}
-                  dataId='reactFreezeLayer'
-                >
-                  {children}
-                </Container>
-              )}
-            </React.Fragment>
-          )}
-        </div>
-      </VelocityAnimationGroup>
-    );
-  }
-}
-
-let animationValues = [
-  'fade',
-  'shrink',
-  'expand',
-  'slideRight',
-  'slideDown',
-  'flyDown'
-];
-
-FreezeLayer.propTypes = {
-  align: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
-  animationName: PropTypes.oneOf(animationValues),
-  childAnimationName: PropTypes.oneOf(animationValues),
-  children: PropTypes.node,
-  customClass: PropTypes.string,
-  forwardRef: PropTypes.object,
-  isActive: PropTypes.bool,
-  isSvgMask: PropTypes.bool,
-  needAutoZindex: PropTypes.bool,
-  onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
-  runOnMount: PropTypes.bool,
-  zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
-};
-FreezeLayer.defaultProps = {
-  isActive: false,
-  palette: 'default',
-  zIndex: '5',
-  isSvgMask: false,
-  customClass: '',
-  needAutoZindex:true
-};
-
-if (__DOCS__) {
-  FreezeLayer.docs = {
-    componentGroup: 'Atom',
-    folderName: 'General'
-  };
-}

package/src/FreezeLayer/FreezeLayer.module.css

@@ -1,38 +0,0 @@
-.container {
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  position: absolute;
-  overflow: hidden;
-}
-.default {
-  background-color: var(--zdt_freezelayer_default_bg);
-}
-.dark {
-  background-color: var(--zdt_freezelayer_dark_bg);
-}
-.darkLight {
-  background-color: var(--zdt_freezelayer_darklight_bg);
-}
-.plain {
-  background-color: var(--zdt_freezelayer_plain_bg);
-}
-.snow {
-  background-color: var(--zdt_freezelayer_snow_bg);
-}
-.index3 {
-  z-index: 3;
-}
-.index5 {
-  z-index: 5;
-}
-.index7 {
-  z-index: 7;
-}
-.index10 {
-  z-index: 10;
-}
-.delay {
-  transition-delay: var(--zd_transition2);
-}

package/src/FreezeLayer/docs/FreezeLayer__dark.docs.js

@@ -1,52 +0,0 @@
-import React, { Component } from 'react';
-import FreezeLayer from '../FreezeLayer';
-import Button from '@zohodesk/components/lib/Button/Button';
-
-export default class FreezeLayer__dark extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { view: false };
-    this.toggle = this.toggle.bind(this);
-  }
-
-  toggle() {
-    this.setState({ view: !this.state.view });
-  }
-
-  render() {
-    let { view } = this.state;
-    return (
-      <div>
-        <Button
-          text='Click to view FreezeLayer'
-          palette='secondary'
-          onClick={this.toggle}
-        />
-        <FreezeLayer
-          align='both'
-          palette='dark'
-          isActive={view}
-          onClick={this.toggle}
-          animationName='fade'
-          childAnimationName='expand' needAutoZindex
-        >
-          <div
-            style={{
-              color: 'var(--dot_black)',
-              fontSize: '40px',
-              padding: '100px',
-              background: 'var(--dot_white)'
-            }}
-          >
-            Im children
-          </div>
-        </FreezeLayer>
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  FreezeLayer__dark.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/FreezeLayer/docs/FreezeLayer__default.docs.js

@@ -1,51 +0,0 @@
-import React, { Component } from 'react';
-import FreezeLayer from '../FreezeLayer';
-import Button from '@zohodesk/components/lib/Button/Button';
-
-export default class FreezeLayer__default extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { view: false };
-    this.toggle = this.toggle.bind(this);
-  }
-
-  toggle() {
-    this.setState({ view: !this.state.view });
-  }
-
-  render() {
-    let { view } = this.state;
-    return (
-      <div>
-        <Button
-          text='Click to view FreezeLayer'
-          palette='secondary'
-          onClick={this.toggle}
-        />
-        <FreezeLayer
-          align='both'
-          isActive={view}
-          onClick={this.toggle}
-          animationName='expand'
-        >
-          <span
-            style={{
-              color: 'var(--dot_black)',
-              fontSize: '40px',
-              padding: '100px',
-              background: 'var(--dot_white)'
-            }}
-          >
-            Im children
-          </span>
-        </FreezeLayer>
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  FreezeLayer__default.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/IconButton/IconButton.js

@@ -1,186 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { Container } from '@zohodesk/components/lib/Layout';
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
-import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
-import style from './IconButton.module.css';
-
-export default class IconButton extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { isPressed: false };
-    this.handleToggle = this.handleToggle.bind(this);
-    this.triggerClick = this.triggerClick.bind(this);
-    this.triggerMouseDown = this.triggerMouseDown.bind(this);
-    this.triggerMouseOver = this.triggerMouseOver.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-  }
-
-  handleToggle(e) {
-    if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
-      e.preventDefault();
-      this.triggerClick(e);
-      this.triggerMouseDown(e);
-    }
-  }
-
-  triggerClick(e) {
-    let { onClick, isDisabled } = this.props;
-    !isDisabled
-      ? (onClick && onClick(e), this.setState({ isPressed: true }))
-      : null;
-  }
-
-  triggerMouseOver(e) {
-    let { onMouseOver, isDisabled } = this.props;
-    !isDisabled
-      ? (onMouseOver && onMouseOver(e), this.setState({ isPressed: true }))
-      : null;
-  }
-
-  triggerMouseDown(e) {
-    let { onMouseDown, isDisabled } = this.props;
-    !isDisabled
-      ? (onMouseDown && onMouseDown(e), this.setState({ isPressed: true }))
-      : null;
-  }
-
-  onBlur(e) {
-    let { isDisabled } = this.props;
-    !isDisabled ? this.setState({ isPressed: false }) : null;
-  }
-
-  render() {
-    let {
-      palette,
-      iconSize,
-      iconName,
-      className,
-      iconClass,
-      dataId,
-      eleRef,
-      isActive,
-      tourId,
-      isDisabled,
-      children,
-      hoverType,
-      title,
-      isBold,
-      isNeedEffect,
-      needButtonTag,
-      a11y,
-      dataIsHtml
-    } = this.props;
-    let { isPressed } = this.state;
-    let {
-      ariaHaspopup,
-      ariaExpanded,
-      ariaLabel,
-      ariaControls,
-      ariaLabelledby
-    } = a11y;
-    return (
-      <RippleEffect
-        palette={palette}
-        isActive={isActive}
-        hoverType={hoverType}
-        isDisabled={isDisabled}
-        isNeedEffect={isNeedEffect}
-      >
-        <Container
-          aria-label={ariaLabel}
-          aria-haspopup={ariaHaspopup}
-          aria-expanded={ariaExpanded}
-          aria-controls={ariaControls}
-          aria-labelledby={ariaLabelledby}
-          tagName={needButtonTag ? 'button' : 'div'}
-          isInline
-          tourId={tourId}
-          align='both'
-          isCover={false}
-          className={`${needButtonTag && btnStyle.buttonReset} ${
-            style.wrapper
-          } ${className ? className : ''} ${
-            isActive ? style[`${palette}_active`] : style[palette]
-          }`}
-          dataId={dataId}
-          onClick={this.triggerClick}
-          data-title={title}
-          data-ishtml={dataIsHtml}
-          eleRef={eleRef}
-          onMouseDown={this.triggerMouseDown}
-          onMouseEnter={this.triggerMouseOver}
-          aria-pressed={isPressed}
-          onKeyDown={this.handleToggle}
-          onFocus={this.triggerMouseOver}
-          onBlur={this.onBlur}
-          disabled={isDisabled}
-        >
-          {iconName ? (
-            <Icon
-              isBold={isBold}
-              size={iconSize}
-              name={iconName}
-              iconClass={iconClass}
-            />
-          ) : null}
-          {children ? children : null}
-        </Container>
-      </RippleEffect>
-    );
-  }
-}
-
-IconButton.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  eleRef: PropTypes.func,
-  hoverType: PropTypes.oneOf(['default', 'border', 'bg']),
-  iconClass: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  isActive: PropTypes.bool,
-  isBold: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isNeedEffect: PropTypes.bool,
-  onClick: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  palette: PropTypes.oneOf(['primary', 'primaryFilled', 'default']),
-  title: PropTypes.string,
-  tourId: PropTypes.string,
-  isNeedEffect: PropTypes.bool,
-  needButtonTag: PropTypes.bool,
-  a11y: PropTypes.shape({
-    ariaHaspopup: PropTypes.bool,
-    ariaExpanded: PropTypes.bool,
-    ariaLabel: PropTypes.string,
-    ariaControls: PropTypes.string,
-    ariaLabelledby: PropTypes.string
-  }),
-  dataIsHtml: PropTypes.bool
-};
-
-IconButton.defaultProps = {
-  palette: 'default',
-  iconSize: '13',
-  className: '',
-  iconClass: '',
-  dataId: 'iconContainer',
-  isActive: false,
-  isDisabled: false,
-  hoverType: 'default',
-  isBold: false,
-  isNeedEffect: true,
-  needButtonTag: true,
-  a11y: {},
-  dataIsHtml: false
-};
-
-if (__DOCS__) {
-  IconButton.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/IconButton/IconButton.module.css

@@ -1,22 +0,0 @@
-.varClass {
-  --iconColor: var(--zdt_iconButton_icon_black);
-}
-.wrapper {
-  height: var(--zd_size28);
-  cursor: pointer;
-  width: var(--zd_size28);
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
-  composes: varClass;
-  color: var(--iconColor);
-}
-.primary {
-  --iconColor: var(--zdt_iconButton_icon_primary);
-}
-.primary:hover {
-  --iconColor: var(--zdt_iconButton_icon_primaryHover);
-}
-.primary_active,
-.primaryFilled,
-.primaryFilled_active {
-  --iconColor: var(--zdt_iconButton_icon_primaryActive);
-}

package/src/IconButton/docs/IconButton__default.docs.js

@@ -1,158 +0,0 @@
-import React, { Component } from 'react';
-import IconButton from '../IconButton';
-export default class IconButton__default extends Component {
-  render() {
-    return (
-      <React.Fragment>
-        <div style={{ margin: '10px' }}>
-          <h3 style={{ margin: '30px' }}>isBold</h3>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-commentNew'
-              palette='primary'
-              isBold
-            />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              isBold
-              iconSize='12'
-              iconName='ZD-more'
-              palette='secondary'
-            />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-commentNew'
-              palette='primaryFilled'
-              isBold
-            />
-          </span>
-        </div>
-        <div style={{ margin: '10px' }}>
-          <h3 style={{ margin: '30px' }}>Palette</h3>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-commentNew'
-              palette='primary'
-              onClick={() => {
-                console.log('click');
-              }}
-              onMouseDown={() => {
-                console.log('Down');
-              }}
-              onMouseOver={() => {
-                console.log('over');
-              }}
-            />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton iconSize='12' iconName='ZD-more' />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-commentNew'
-              palette='primaryFilled'
-            />
-          </span>
-        </div>
-        <div style={{ margin: '10px' }}>
-          <h3 style={{ margin: '30px' }}>isActive</h3>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-commentNew'
-              palette='primary'
-              isActive
-            />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton iconSize='12' iconName='ZD-more' isActive />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-commentNew'
-              palette='primaryFilled'
-              isActive
-            />
-          </span>
-        </div>
-        <div style={{ margin: '10px' }}>
-          <h3 style={{ margin: '30px' }}>Border On Hover</h3>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-commentNew'
-              palette='primary'
-              hoverType='border'
-            />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton iconSize='12' iconName='ZD-more' hoverType='border' />
-          </span>
-        </div>
-        <div style={{ margin: '10px' }}>
-          <h3 style={{ margin: '30px' }}>isDisabled</h3>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-commentNew'
-              palette='primary'
-              isDisabled
-            />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton iconSize='12' iconName='ZD-more' isDisabled />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-commentNew'
-              palette='primaryFilled'
-              isDisabled
-            />
-          </span>
-        </div>
-        <div style={{ margin: '10px' }}>
-          <h3 style={{ margin: '30px' }}>Tooltip</h3>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-commentNew'
-              palette='primary'
-              isDisabled
-              title='primary'
-            />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-more'
-              isDisabled
-              title='default'
-            />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-commentNew'
-              palette='primaryFilled'
-              isDisabled
-              title='primaryFilled'
-            />
-          </span>
-        </div>
-      </React.Fragment>
-    );
-  }
-}
-if (__DOCS__) {
-  IconButton__default.docs = {
-    componentGroup: 'Atom'
-  };
-}