@zohodesk/dot 1.0.0-temp-64 → 1.0.0-temp-65

package/src/FormAction/FormAction.js

@@ -0,0 +1,126 @@
+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 (
+      <div className={style.wrapperDiv}>
+        <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 ? (
+            <Box
+              flexible={hasRightChild ? true : false}
+              shrink={!hasRightChild && hasLeftChild ? true : false}
+            >
+              {leftbuttonGroup.length > 1
+                ? leftbuttonGroup.map(item => (
+                  <div className={style.marginRight}>{item}</div>
+                ))
+                : leftbuttonGroup[0]}
+            </Box>
+          ) : null}
+          {hasRightChild ? (
+            <Box shrink={hasRightChild && !hasLeftChild ? true : false}>
+              {rightbuttonGroup.length > 1
+                ? rightbuttonGroup.map(item => (
+                  <div className={style.marginRight}>{item}</div>
+                ))
+                : rightbuttonGroup[0]}
+            </Box>
+          ) : null}
+          {hasCenterChild ? (
+            <Box>
+              {centerbuttonGroup.length > 1
+                ? centerbuttonGroup.map((item, index) => (
+                  <div className={style.marginRight} key={index}>
+                    {item}
+                  </div>
+                ))
+                : centerbuttonGroup[0]}
+            </Box>
+          ) : null}
+        </Container>
+      </div>
+    );
+  }
+}
+
+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 (__DOCS__) {
+  FormAction.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/src/FormAction/FormAction.module.css

@@ -0,0 +1,57 @@
+.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);
+}
+
+.largePadding {
+  padding-left: var(--zd_size60);
+}
+.mediumPadding {
+  padding-left: var(--zd_size50);
+}
+.xmediumPadding {
+  padding-left: var(--zd_size30);
+}
+.smallPadding {
+  padding-left: var(--zd_size25);
+}
+.xsmallPadding {
+  padding-left: var(--zd_size20);
+}
+
+.marginRight {
+  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
+}
+.largeFooter .marginRight,
+.mediumFooter .marginRight {
+  margin-right: var(--zd_size15);
+}
+.smallFooter .marginRight {
+  margin-right: var(--zd_size12);
+}
+
+.marginRight:last-child {
+  margin-right: 0;
+}

package/src/FormAction/docs/FormAction__default.docs.js

@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import Button from '@zohodesk/components/lib/Button/Button';
+import Icon from '@zohodesk/icons/lib/Icon';
+import FormAction, { LeftSide, RightSide, Center } from '../FormAction';
+
+export default class FormAction__default extends Component {
+  render() {
+    return (
+      <div
+        style={{
+          marginTop: '20px'
+        }}
+      >
+        <FormAction>
+          <LeftSide>
+            <p>Left</p>
+          </LeftSide>
+        </FormAction>
+        <FormAction size='medium'>
+          <RightSide>
+            <p>Right</p>
+          </RightSide>
+        </FormAction>
+        <FormAction size='large'>
+          <LeftSide>
+            <p>Left</p>
+          </LeftSide>
+          <RightSide>
+            <p>Right</p>
+          </RightSide>
+        </FormAction>
+
+        <FormAction size='small'>
+          <Center>
+            <p>Center</p>
+          </Center>
+        </FormAction>
+
+        <FormAction size='large'>
+          <LeftSide>
+            <Button text='primary' palette='primary' />
+            <Button text='primaryFilled' palette='primaryFilled' />
+          </LeftSide>
+          <RightSide>
+            <p>Large</p>
+          </RightSide>
+        </FormAction>
+        <FormAction size='medium'>
+          <LeftSide>
+            <Button text='primary' palette='primary' />
+            <Button text='primaryFilled' palette='primaryFilled' />
+          </LeftSide>
+          <RightSide>
+            <p>Medium</p>
+          </RightSide>
+        </FormAction>
+        <FormAction size='medium' paddingLeftSize='xmedium'>
+          <LeftSide>
+            <Button text='primary' palette='primary' />
+            <Button text='primaryFilled' palette='primaryFilled' />
+          </LeftSide>
+          <RightSide>
+            <p>XMedium</p>
+          </RightSide>
+        </FormAction>
+        <FormAction size='small'>
+          <LeftSide>
+            <Button text='primary' palette='primary' size='small' />
+            <Button text='primaryFilled' palette='primaryFilled' size='small' />
+          </LeftSide>
+          <RightSide>
+            <p>Small</p>
+          </RightSide>
+        </FormAction>
+        <FormAction size='small' paddingLeftSize='xsmall'>
+          <LeftSide>
+            <Button text='primary' palette='primary' size='small' />
+            <Button text='primaryFilled' palette='primaryFilled' size='small' />
+          </LeftSide>
+          <RightSide>
+            <p>XSmall</p>
+          </RightSide>
+        </FormAction>
+      </div>
+    );
+  }
+}
+
+if (__DOCS__) {
+  FormAction__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/src/FreezeLayer/FreezeLayer.js

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

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

@@ -0,0 +1,52 @@
+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_text_black)',
+              fontSize: '40px',
+              padding: '100px',
+              background: 'var(--dot_bg_white)'
+            }}
+          >
+            Im children
+          </div>
+        </FreezeLayer>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  FreezeLayer__dark.docs = {
+    componentGroup: 'Atom'
+  };
+}

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

@@ -0,0 +1,51 @@
+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_text_black)',
+              fontSize: '40px',
+              padding: '100px',
+              background: 'var(--dot_bg_white)'
+            }}
+          >
+            Im children
+          </span>
+        </FreezeLayer>
+      </div>
+    );
+  }
+}
+
+if (__DOCS__) {
+  FreezeLayer__default.docs = {
+    componentGroup: 'Atom'
+  };
+}