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

package/es/FlipCard/FlipCard.js

@@ -0,0 +1,183 @@
+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

@@ -0,0 +1,44 @@
+.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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,82 @@
+.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

@@ -0,0 +1,161 @@
+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';
+import { getDotLibraryConfig } from '../Provider/Config';
+export default class FreezeLayer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: props.isActive,
+      isChildActive: false
+    };
+    this.getNextIndex = getZIndex(this);
+    this.isFreezeLayerEnabled = false;
+  }
+
+  enableFreeze() {
+    if (!this.isFreezeLayerEnabled) {
+      this.isFreezeLayerEnabled = true;
+      const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
+      freezeLayerEnable && freezeLayerEnable();
+    }
+  }
+
+  disableFreeze() {
+    if (this.isFreezeLayerEnabled) {
+      this.isFreezeLayerEnabled = false;
+      const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
+      freezeLayerDisable && freezeLayerDisable();
+    }
+  }
+
+  componentDidMount() {
+    let {
+      isActive
+    } = this.props;
+
+    if (isActive) {
+      this.setState({
+        isChildActive: true
+      });
+      this.enableFreeze();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    let {
+      isActive
+    } = this.props;
+
+    if (isActive != prevProps.isActive) {
+      if (isActive) {
+        this.enableFreeze(); // Shortcut && Shortcut.setState(false);
+
+        this.setState({
+          isActive: true
+        }, () => {
+          this.setState({
+            isChildActive: true
+          });
+        });
+      } else {
+        this.disableFreeze(); // Shortcut && Shortcut.setState(true);
+
+        this.setState({
+          isChildActive: false
+        }, () => {
+          this.setState({
+            isActive: false
+          });
+        });
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.disableFreeze();
+  }
+
+  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

@@ -0,0 +1,42 @@
+.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);
+}