@zohodesk/components 1.0.0-alpha-238 → 1.0.0-alpha-239

package/es/Tooltip/docs/Tooltip__default.docs.js

@@ -0,0 +1,371 @@
+import React, { Component } from 'react';
+import Tooltip from '../Tooltip';
+import Button from '../../Button/Button';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class Tooltip__default extends Component {
+  constructor(props) {
+    super(props);
+    this.tooltip = this.tooltip.bind(this);
+  }
+
+  tooltip() {
+    let titleStyle = {
+      fontSize: '15px',
+      padding: '15px 0',
+      borderTop: '1px solid #e0e0e0',
+      marginTop: '20px'
+    },
+        inlineBlock = {
+      display: 'inline-block',
+      marginRight: '10px',
+      marginBottom: '5px'
+    },
+        dottedstyle = {
+      display: 'inline-flex',
+      width: '100px',
+      textOverflow: 'ellipsis',
+      whitepace: 'nowrap',
+      overflow: 'hidden',
+      marginRight: '10px',
+      whiteSpace: 'nowrap'
+    },
+        flex = {
+      display: 'inline-flex',
+      alignItems: 'center',
+      fontSize: '14px'
+    },
+        clampDotted = {
+      overflow: 'hidden',
+      display: '-webkit-box',
+      webkitLineClamp: '3',
+      webkitBoxOrient: 'vertical',
+      width: '100px',
+      fontSize: '14px',
+      background: 'var(--zdt_cta_primary_bg)',
+      padding: '3px 15px',
+      color: '#fff',
+      borderRadius: '4px',
+      marginBottom: '5px'
+    },
+        whiteSpaceNoWrap = {
+      overflow: 'hidden',
+      display: '-webkit-box',
+      webkitLineClamp: '3',
+      webkitBoxOrient: 'vertical',
+      whiteSpace: 'pre-wrap',
+      fontSize: '14px',
+      background: 'var(--zdt_cta_primary_bg)',
+      padding: '3px 15px',
+      color: '#fff',
+      borderRadius: '4px',
+      marginBottom: '5px',
+      width: '200px'
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, /*#__PURE__*/React.createElement("b", null, "Top Position Tooltip"), " - 1) Lengthy Content, 2) Default Top, 3) Show in Bottom Area if Top doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Register Account with Lengthy Content",
+      "data-title-position": "top"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "Lengthy",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "I am Top Tooltip",
+      "data-title-position": "top"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "I am Top",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "If top does not have enough space I will be shown in bottom area.If top does not have enough space I will be shown in bottom area.If top does not have enough space I will be shown in bottom area.If top does not have enough space I will be shown in bottom area.If top does not have enough space I will be shown in bottom area.",
+      "data-title-position": "top"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Space in Top ???",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: dottedstyle,
+      "data-title": "I am Top Tooltip",
+      "data-title-position": "top"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "I am Top Tooltip",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "<h2>HTML Heading</h2>",
+      "data-ishtml": true,
+      "data-title-position": "top"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "HTML in Tooltip",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Top Tooltip without Arrow",
+      "data-title-position": "top",
+      "data-tooltip-noarrow": true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Need Arrow",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: clampDotted,
+      "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
+      "data-title-position": "top"
+    }, /*#__PURE__*/React.createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/React.createElement("span", {
+      style: whiteSpaceNoWrap,
+      "data-title": `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`,
+      "data-title-position": "top",
+      "data-title-wrap": "true"
+    }, /*#__PURE__*/React.createElement("span", null, `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`))), /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, /*#__PURE__*/React.createElement("b", null, "Bottom Position Tooltip"), " - 1) Lengthy Content, 2) Default Bottom, 3) Show in Top Area if Bottom doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Register Account with Lengthy Content",
+      "data-title-position": "bottom"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "Lengthy",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "I am Bottom Tooltip",
+      "data-title-position": "bottom"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "I am Bottom",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "If bottom does not have enough space I will be shown in top area.If bottom does not have enough space I will be shown in top area.If bottom does not have enough space I will be shown in top area.If bottom does not have enough space I will be shown in top area.",
+      "data-title-position": "bottom"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Space in Bottom ???",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: dottedstyle,
+      "data-title": "I am Bottom Tooltip",
+      "data-dottedTitle": "I am Bottom Tooltip with Dotted Content",
+      "data-title-position": "bottom"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "DottedDottedDottedDotted",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "<span style=\"color:red\">HTML Heading</span>",
+      "data-ishtml": true,
+      "data-title-position": "bottom"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "HTML in Tooltip",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Bottom Tooltip without Arrow",
+      "data-title-position": "bottom",
+      "data-tooltip-noarrow": true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Need Arrow",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: clampDotted,
+      "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
+      "data-title-position": "bottom"
+    }, /*#__PURE__*/React.createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/React.createElement("span", {
+      style: whiteSpaceNoWrap,
+      "data-title": `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`,
+      "data-title-position": "bottom",
+      "data-title-wrap": "true"
+    }, /*#__PURE__*/React.createElement("span", null, `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`))), /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, /*#__PURE__*/React.createElement("b", null, "Left Position Tooltip"), " - 1) Lengthy Content, 2) Default Left, 3) Show in Right Area if Left doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.",
+      "data-title-position": "left"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "Lengthy",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Left Tooltip",
+      "data-title-position": "left"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "I am Left",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.",
+      "data-title-position": "left"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Space in Left ???",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: dottedstyle,
+      "data-title": "I am Left Tooltip",
+      "data-dottedTitle": "I am Left Tooltip with Dotted Content",
+      "data-title-position": "left"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "DottedDottedDottedDotted",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "<div style=\"width:500px;height:50px;background:#fff;color:orange;\">HTML Heading</div>",
+      "data-ishtml": true,
+      "data-title-position": "left"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "HTML in Tooltip",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Left Tooltip without Arrow",
+      "data-title-position": "left",
+      "data-tooltip-noarrow": true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Need Arrow",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: clampDotted,
+      "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
+      "data-title-position": "left"
+    }, /*#__PURE__*/React.createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/React.createElement("span", {
+      style: whiteSpaceNoWrap,
+      "data-title": `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`,
+      "data-title-position": "left",
+      "data-title-wrap": "true"
+    }, /*#__PURE__*/React.createElement("span", null, `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`))), /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, /*#__PURE__*/React.createElement("b", null, "Right Position Tooltip"), " - 1) Lengthy Content, 2) Default Right, 3) Show in Left Area if Right doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.",
+      "data-title-position": "right"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "Lengthy",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Right Tooltip",
+      "data-title-position": "right"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "I am Right",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "If right does not have enough space I will be shown in left area.If right does not have enough space I will be shown in left area.If right does not have enough space I will be shown in left area.If right does not have enough space I will be shown in left area.",
+      "data-title-position": "right"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Space in Right ???",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: dottedstyle,
+      "data-title": "I am Right Tooltip",
+      "data-dottedTitle": "I am Right Tooltip with Dotted Content",
+      "data-title-position": "right"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "DottedDottedDottedDotted",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "<i>HTML Heading</i>",
+      "data-ishtml": true,
+      "data-title-position": "right"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "HTML in Tooltip",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Right Tooltip without Arrow",
+      "data-title-position": "right",
+      "data-tooltip-noarrow": true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Need Arrow",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: clampDotted,
+      "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
+      "data-title-position": "right"
+    }, /*#__PURE__*/React.createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/React.createElement("span", {
+      style: whiteSpaceNoWrap,
+      "data-title": `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`,
+      "data-title-position": "right",
+      "data-title-wrap": "true"
+    }, /*#__PURE__*/React.createElement("span", null, `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`))), /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, /*#__PURE__*/React.createElement("b", null, "No Position Tooltip"), " - 1) Lengthy Content, 2) Default Top/Bottom, 3) Show in Top Area if Bottom doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position."
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "Lengthy",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Normal Tooltip"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "I am Normal",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "If Top/Bottom does not have enough space I will be shown in Bottom/Top position.If Top/Bottom does not have enough space I will be shown in Bottom/Top positionIf Top/Bottom does not have enough space I will be shown in Bottom/Top positionIf Top/Bottom does not have enough space I will be shown in Bottom/Top position"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Space in Top/Bottom ???",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: dottedstyle,
+      "data-title": "I am Default Tooltip",
+      "data-dottedTitle": "I am Default Tooltip with Dotted Content"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "DottedDottedDottedDotted",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "<b style=\"color:yellow;background:orange;\">HTML Heading</b>",
+      "data-ishtml": true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "HTML in Tooltip",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Tooltip without Arrow",
+      "data-tooltip-noarrow": true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Need Arrow",
+      palette: "primaryFilled"
+    }))), /*#__PURE__*/React.createElement("span", {
+      style: clampDotted,
+      "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted"
+    }, /*#__PURE__*/React.createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/React.createElement("span", {
+      style: whiteSpaceNoWrap,
+      "data-title": `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`,
+      "data-title-wrap": "true"
+    }, /*#__PURE__*/React.createElement("span", null, `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`)));
+  }
+
+  render() {
+    let parent = {
+      display: 'flex'
+    },
+        split = {
+      padding: '20px',
+      width: '50%'
+    },
+        dark = {
+      background: '#2c334d',
+      padding: '20px',
+      width: '50%',
+      color: '#fff'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      onMouseOver: e => this.tooltipRef && this.tooltipRef.handleOver(e)
+    }, /*#__PURE__*/React.createElement("div", {
+      style: parent
+    }, /*#__PURE__*/React.createElement("div", {
+      style: split
+    }, this.tooltip()), /*#__PURE__*/React.createElement("div", {
+      style: dark
+    }, this.tooltip())));
+  }
+
+}
+
+if (false) {
+  Tooltip__default.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import Proptypes from 'prop-types';
+import Select from '../../../Select/Select';
+import Button from '../../../Button/Button';
+import VelocityAnimation from '../VelocityAnimation';
+let animationList = [{
+  text: 'fade',
+  id: 'animate-1'
+}, {
+  text: 'slideDown',
+  id: 'animate-2'
+}, {
+  text: 'flyDown',
+  id: 'animate-3'
+}, {
+  text: 'slideRight',
+  id: 'animate-4'
+}, {
+  text: 'shrink',
+  id: 'animate-5'
+}, {
+  text: 'expand',
+  id: 'animate-6'
+}, {
+  text: 'slideLeft',
+  id: 'animate-7'
+}];
+export default class VelocityAnimation__demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: animationList[0],
+      isActive: false
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleView = this.handleView.bind(this);
+  }
+
+  handleChange(fieldId, value) {
+    this.setState({
+      value
+    });
+  }
+
+  handleView() {
+    this.setState({
+      isActive: !this.state.isActive
+    });
+  }
+
+  render() {
+    let {
+      value,
+      isActive
+    } = this.state;
+    let animate = {
+      width: '200px',
+      height: '100px',
+      background: 'var(--dot_black)',
+      textAlign: 'center',
+      color: 'var(--dot_white)',
+      lineHeight: '100px'
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '30%',
+        display: 'flex',
+        justifyContent: 'space-around'
+      }
+    }, /*#__PURE__*/React.createElement(Select, {
+      onChange: this.handleChange,
+      options: animationList,
+      selectedValue: value.id
+    }), /*#__PURE__*/React.createElement(Button, {
+      onClick: this.handleView
+    }, !isActive ? 'show' : 'hide')), /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement(VelocityAnimation, {
+      isActive: isActive,
+      name: value.text,
+      duration: 300
+    }, /*#__PURE__*/React.createElement("div", {
+      style: animate
+    }, "Animation"))));
+  }
+
+}
+
+if (false) {
+  VelocityAnimation__demo.docs = {
+    componentGroup: 'Animation'
+  };
+}

package/es/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js

@@ -0,0 +1,150 @@
+import React from 'react';
+import Label from '../../../Label/Label';
+import Select from '../../../Select/Select';
+import TextBox from '../../../TextBox/TextBox';
+import Button from '../../../Button/Button';
+import VelocityAnimationGroup from '../VelocityAnimationGroup';
+import { Container } from '../../../Layout';
+let animations = ['fade', 'slideDown', 'flyDown', 'shrink', 'expand', 'slideRight', 'slideLeft'];
+
+function animationList() {
+  let animationList = [];
+
+  for (let i = 0; i < animations.length; i++) {
+    animationList.push(Object.assign({
+      text: `${animations[i]}`,
+      id: `${animations[i]}-1`
+    }));
+  }
+
+  return animationList;
+}
+
+export default class VelocityAnimationGroup__demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      animationList: animationList(),
+      isActive: false,
+      entryTime: 800,
+      exitTime: 800,
+      animationName: {}
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleView = this.handleView.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  componentDidMount() {
+    this.setState({
+      animationName: this.state.animationList[0]
+    });
+  }
+
+  handleView() {
+    this.setState({
+      isActive: !this.state.isActive
+    });
+  }
+
+  handleChange(name, value) {
+    if (name == 'entryTime') {
+      this.setState({
+        entryTime: value
+      });
+    } else if (name == 'exitTime') {
+      this.setState({
+        exitTime: value
+      });
+    }
+  }
+
+  handleSelect(fieldId, selectedValue) {
+    this.setState({
+      animationName: selectedValue
+    });
+  }
+
+  render() {
+    let {
+      entryTime,
+      animationName,
+      exitTime,
+      isActive,
+      animationList
+    } = this.state;
+    let animate = {
+      width: '200px',
+      height: '100px',
+      background: 'var(--dot_black)',
+      textAlign: 'center',
+      color: 'var(--dot_white)',
+      lineHeight: '100px'
+    },
+        field = {
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '20px 0'
+    },
+        box = {
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column'
+    };
+    return /*#__PURE__*/React.createElement("span", {
+      style: box
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '50%'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: field
+    }, /*#__PURE__*/React.createElement(Label, {
+      text: "Name",
+      size: "medium",
+      palette: "default"
+    }), /*#__PURE__*/React.createElement(Select, {
+      onChange: this.handleSelect,
+      options: animationList,
+      selectedValue: animationName.id,
+      id: "entryName"
+    }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
+      text: "Enter Duration(ms)",
+      id: "entryTime",
+      size: "medium",
+      palette: "default"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      onChange: this.handleChange,
+      value: entryTime,
+      id: "entryTime"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
+      text: "Exit Duration(ms)",
+      id: "exitTime",
+      size: "medium",
+      palette: "default"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      onChange: this.handleChange,
+      value: exitTime,
+      id: "exitTime"
+    }))), /*#__PURE__*/React.createElement(Button, {
+      onClick: this.handleView
+    }, !isActive ? 'show' : 'hide')), /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      name: animationName.text,
+      enterDuration: entryTime,
+      exitDuration: exitTime,
+      isActive: isActive,
+      component: Container,
+      isCustomized: true,
+      isFlex: false
+    }, /*#__PURE__*/React.createElement("div", {
+      style: animate
+    }, "Animation")));
+  }
+
+}
+
+if (false) {
+  VelocityAnimationGroup__demo.docs = {
+    componentGroup: 'Animation'
+  };
+}