@zohodesk/dot 1.0.0-beta.209 → 1.0.0-beta.211

package/es/FlipCard/FlipCard.js

@@ -1,183 +0,0 @@
-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, { Component } from 'react';
-import PropTypes from 'prop-types';
-import AvatarUser from '../avatar/AvatarUser/AvatarUser';
-import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
-import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
-import { Container } from '@zohodesk/components/lib/Layout';
-import ChannelIcon from '../ChannelIcon/ChannelIcon';
-import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
-import style from './FlipCard.module.css';
-import { stopBubbling } from '../utils/General';
-export default class FlipCard extends Component {
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-    this.onClick = this.onClick.bind(this);
-  }
-
-  onClick(e) {
-    let {
-      noNeedFlip
-    } = this.props;
-
-    if (!noNeedFlip) {
-      stopBubbling(e);
-    }
-  }
-
-  onChange(isChecked, e) {
-    let {
-      onChange
-    } = this.props;
-    stopBubbling(e);
-    let {
-      id
-    } = this.props;
-    onChange(id, isChecked, e);
-  }
-
-  render() {
-    let {
-      id,
-      action,
-      name,
-      initial,
-      isChecked,
-      noNeedFlip,
-      size,
-      channel,
-      isPaidUser,
-      isPortalUser,
-      src,
-      icon,
-      iconSize,
-      iconClass,
-      ticListContainer,
-      ticList,
-      dataId,
-      className,
-      palette,
-      textPalette,
-      customTextClass,
-      frontClass,
-      needTitle,
-      iconColor,
-      tourId,
-      isFilledCheckbox,
-      channelTitle,
-      customProps
-    } = this.props;
-    const {
-      CheckBoxProps = {},
-      ChannelIconProps = {},
-      AvatarIconProps = {},
-      AvatarUserProps = {}
-    } = customProps;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${AvatarSize(size)}  ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
-      onClick: this.onClick,
-      "data-id": ticListContainer,
-      "data-tour": tourId
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.container,
-      "data-id": ticList
-    }, !noNeedFlip ? /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      className: `${style.front} ${frontClass ? frontClass : ''}`
-    }, /*#__PURE__*/React.createElement(CheckBox, _extends({
-      isFilled: isFilledCheckbox,
-      checked: isChecked,
-      onChange: this.onChange,
-      id: `checkbox_${id}`,
-      dataId: `listViewCheckBox_${id}`
-    }, CheckBoxProps))) : null, /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      className: style.back
-    }, channel && action ? /*#__PURE__*/React.createElement(ChannelIcon, _extends({
-      name: channel,
-      action: action,
-      size: size,
-      iconSize: iconSize,
-      iconClass: iconClass,
-      dataId: channel,
-      className: className,
-      palette: palette,
-      textPalette: textPalette,
-      customTextClass: customTextClass,
-      iconColor: iconColor,
-      title: channelTitle,
-      iconTitle: channelTitle
-    }, ChannelIconProps)) : icon ? /*#__PURE__*/React.createElement(AvatarIcon, _extends({
-      name: icon,
-      iconSize: iconSize,
-      size: size,
-      iconClass: iconClass,
-      dataId: icon,
-      className: className,
-      iconColor: iconColor,
-      title: needTitle ? name : ''
-    }, AvatarIconProps)) : /*#__PURE__*/React.createElement(AvatarUser, _extends({
-      name: name,
-      initial: initial,
-      size: size,
-      isPaid: isPaidUser,
-      isPortal: isPortalUser,
-      src: src,
-      dataId: dataId,
-      needTitle: needTitle,
-      palette: palette,
-      textPalette: textPalette,
-      customTextClass: customTextClass
-    }, AvatarUserProps)))));
-  }
-
-}
-FlipCard.propTypes = {
-  action: PropTypes.string,
-  channel: PropTypes.string,
-  channelTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  className: PropTypes.string,
-  customTextClass: PropTypes.string,
-  dataId: PropTypes.string,
-  frontClass: PropTypes.string,
-  icon: PropTypes.string,
-  iconClass: PropTypes.string,
-  iconColor: PropTypes.string,
-  iconSize: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  initial: PropTypes.string,
-  isChecked: PropTypes.bool,
-  isFilledCheckbox: PropTypes.bool,
-  isPaidUser: PropTypes.bool,
-  isPortalUser: PropTypes.bool,
-  name: PropTypes.string,
-  needTitle: PropTypes.bool,
-  noNeedFlip: PropTypes.bool,
-  onChange: PropTypes.func,
-  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
-  size: PropTypes.string,
-  src: PropTypes.string,
-  textPalette: PropTypes.oneOf(['white', 'black']),
-  ticList: PropTypes.string,
-  ticListContainer: PropTypes.string,
-  tourId: PropTypes.string,
-  customProps: PropTypes.shape({
-    CheckBoxProps: PropTypes.object,
-    ChannelIconProps: PropTypes.object,
-    AvatarIconProps: PropTypes.object,
-    AvatarUserProps: PropTypes.object
-  })
-};
-FlipCard.defaultProps = {
-  size: 'medium',
-  needTitle: true,
-  customProps: {}
-};
-
-if (false) {
-  FlipCard.docs = {
-    componentGroup: 'Molecule'
-  };
-}

package/es/FlipCard/FlipCard.module.css

@@ -1,44 +0,0 @@
-.flip,
-.flipNone {
-  color: var(--zdt_flipcard_default_text);
-}.flip, .flipNone {
-  background-color: var(--zdt_flipcard_default_bg);
-}
-.container {
-  position: relative;
-  transition: var(--zd_transition3) all;
-  transform-style: preserve-3d;
-}
-.container,
-.front,
-.back {
-  width: inherit;
-  height: inherit;
-}
-.front,
-.back {
-  position: absolute;
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-}
-[dir=ltr] .front {
-  transform: rotateY(180deg) perspective(1px);
-}
-[dir=rtl] .front {
-  transform: rotateY(-180deg) perspective(1px);
-}
-.back {
-  transform: rotateY(0deg) perspective(1px);
-}
-[dir=ltr] .notFlip .container {
-  transform: rotateY(180deg);
-}
-[dir=rtl] .notFlip .container {
-  transform: rotateY(-180deg);
-}
-[dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
-  transform: rotateY(180deg);
-}
-[dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
-  transform: rotateY(-180deg);
-}

package/es/FormAction/FormAction.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './FormAction.module.css';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-export const LeftSide = props => {
-  props.children;
-};
-export const RightSide = props => {
-  props.children;
-};
-export const Center = props => {
-  props.children;
-};
-export default class FormAction extends React.Component {
-  render() {
-    let {
-      size,
-      children,
-      paddingLeftSize,
-      paddingRightClass
-    } = this.props;
-    let leftbuttonGroup = [],
-        rightbuttonGroup = [],
-        centerbuttonGroup = [];
-    React.Children.map(children, child => {
-      if (!child) {
-        return child;
-      } else if (child.type === LeftSide) {
-        leftbuttonGroup = leftbuttonGroup.concat(child.props.children);
-      } else if (child.type === RightSide) {
-        rightbuttonGroup = rightbuttonGroup.concat(child.props.children);
-      } else if (child.type === Center) {
-        centerbuttonGroup = centerbuttonGroup.concat(child.props.children);
-      } else {
-        leftbuttonGroup.push(child);
-      }
-    });
-    let hasLeftChild = leftbuttonGroup.length > 0;
-    let hasRightChild = rightbuttonGroup.length > 0;
-    let hasCenterChild = centerbuttonGroup.length > 0;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.wrapperDiv
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      isCover: false,
-      align: hasCenterChild ? 'around' : hasRightChild && !hasLeftChild ? 'right' : null,
-      className: ` 
-                        ${`${style.footerParent} ${hasCenterChild ? '' : style[`${paddingLeftSize ? paddingLeftSize : size}Padding`]} ${paddingRightClass}`}
-
-                        ${style[`${size}Footer`]}
-                    `
-    }, hasLeftChild ? /*#__PURE__*/React.createElement(Box, {
-      flexible: hasRightChild ? true : false,
-      shrink: !hasRightChild && hasLeftChild ? true : false
-    }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map(item => /*#__PURE__*/React.createElement("div", {
-      className: style.marginRight
-    }, item)) : leftbuttonGroup[0]) : null, hasRightChild ? /*#__PURE__*/React.createElement(Box, {
-      shrink: hasRightChild && !hasLeftChild ? true : false
-    }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map(item => /*#__PURE__*/React.createElement("div", {
-      className: style.marginRight
-    }, item)) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/React.createElement(Box, null, centerbuttonGroup.length > 1 ? centerbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
-      className: style.marginRight,
-      key: index
-    }, item)) : centerbuttonGroup[0]) : null));
-  }
-
-}
-FormAction.propTypes = {
-  children: PropTypes.node,
-  paddingLeftSize: PropTypes.oneOf(['large', 'medium', 'xmedium', 'small', 'xsmall']),
-  paddingRightClass: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'medium', 'small'])
-};
-FormAction.defaultProps = {
-  size: 'medium',
-  paddingRightClass: ''
-};
-
-if (false) {
-  FormAction.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/es/FormAction/FormAction.module.css

@@ -1,82 +0,0 @@
-.varClass {
-  --footerBg: var(--zdt_formAction_bg);
-  --footerBorder: var(--zdt_formAction_border);
-}
-.wrapperDiv {
-  position: relative;
-  z-index: 1;
-  composes: varClass;
-}
-.footerParent {
-  position: relative;
-  background-color: var(--footerBg);
-  border-top: solid 1px var(--footerBorder);
-}
-.largeFooter {
-  padding-top: var(--zd_size24);
-  padding-bottom: var(--zd_size24);
-}
-.mediumFooter {
-  padding-top: var(--zd_size20);
-  padding-bottom: var(--zd_size20);
-}
-.smallFooter {
-  padding-top: var(--zd_size10);
-  padding-bottom: var(--zd_size10);
-}
-
-[dir=ltr] .largePadding {
-  padding-left: var(--zd_size60);
-}
-
-[dir=rtl] .largePadding {
-  padding-right: var(--zd_size60);
-}
-[dir=ltr] .mediumPadding {
-  padding-left: var(--zd_size50);
-}
-[dir=rtl] .mediumPadding {
-  padding-right: var(--zd_size50);
-}
-[dir=ltr] .xmediumPadding {
-  padding-left: var(--zd_size30);
-}
-[dir=rtl] .xmediumPadding {
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .smallPadding {
-  padding-left: var(--zd_size25);
-}
-[dir=rtl] .smallPadding {
-  padding-right: var(--zd_size25);
-}
-[dir=ltr] .xsmallPadding {
-  padding-left: var(--zd_size20);
-}
-[dir=rtl] .xsmallPadding {
-  padding-right: var(--zd_size20);
-}
-
-.marginRight {
-  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
-  margin-right: var(--zd_size15);
-}
-[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: var(--zd_size15);
-}
-[dir=ltr] .smallFooter .marginRight {
-  margin-right: var(--zd_size12);
-}
-[dir=rtl] .smallFooter .marginRight {
-  margin-left: var(--zd_size12);
-}
-
-[dir=ltr] .marginRight:last-child {
-  margin-right: 0;
-}
-
-[dir=rtl] .marginRight:last-child {
-  margin-left: 0;
-}

package/es/FreezeLayer/FreezeLayer.js

@@ -1,136 +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 /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
-      name: animationName && animationName,
-      isActive: isActive,
-      runOnMount: runOnMount
-    }, /*#__PURE__*/React.createElement("div", {
-      style: isActive && needAutoZindex ? {
-        zIndex: `${this.getNextIndex()}`
-      } : {},
-      className: `
-              ${style.container} ${customClass} ${style[`index${zIndex}`]}  ${!isSvgMask ? style[palette] : ''}
-            `,
-      onClick: onClick ? onClick : null,
-      ref: forwardRef
-    }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
-      name: childAnimationName,
-      isActive: isChildActive,
-      enterDelay: palette === 'plain' ? 0 : 300,
-      component: Container,
-      alignBox: "row",
-      align: align,
-      dataId: "reactFreezeLayer"
-    }, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: align,
-      dataId: "reactFreezeLayer"
-    }, children))));
-  }
-
-}
-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 (false) {
-  FreezeLayer.docs = {
-    componentGroup: 'Atom',
-    folderName: 'General'
-  };
-}

package/es/FreezeLayer/FreezeLayer.module.css

@@ -1,42 +0,0 @@
-.container {
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  overflow: hidden;
-}[dir=ltr] .container {
-  left: 0;
-  right: 0;
-}[dir=rtl] .container {
-  right: 0;
-  left: 0;
-}
-.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);
-}