@zohodesk/react-cli 1.1.15-exp.1 → 1.1.15-exp.2

package/templates/app/src/components/Alert/Alert.js

@@ -1,134 +1,134 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import style from "./Alert.module.css";
-import {
-  TopbandFontIcon,
-  TicketsFontIcon,
-  CommonFontIcon,
-  Button
-} from "@zohodesk/components";
-
-import FreezeLayer from "../FreezeLayer/FreezeLayer";
-
-export default class Alert extends Component {
-  constructor(props) {
-    super(props);
-    this.documentKeyupHandler = this.documentKeyupHandler.bind(this);
-  }
-
-  componentDidMount() {
-    document.addEventListener("keyup", this.documentKeyupHandler);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener("keyup", this.documentKeyupHandler);
-  }
-
-  documentKeyupHandler(e = {}) {
-    e && e.preventDefault();
-    let { onSubmitClick, onCancelClick, isActive } = this.props;
-    if (e.keyCode === 27 && isActive) {
-      onCancelClick();
-    } else if (e.keyCode === 13 && isActive) {
-      onSubmitClick();
-    }
-  }
-
-  render() {
-    let {
-      onSubmitClick,
-      onCancelClick,
-      alertData,
-      isActive,
-      palette,
-      type
-    } = this.props;
-    let {
-      iconName,
-      iconSize,
-      title,
-      message,
-      confirmationMessage,
-      submitText,
-      cancelText,
-      isBoldIcon
-    } = alertData;
-    return (
-      <FreezeLayer
-        zIndex="7"
-        isActive={isActive}
-        animationName="fadeIn"
-        childAnimationName="scaleIn"
-        align="both"
-      >
-        <div className={`${style[palette]}`}>
-          <div className={style.container}>
-            <div className={style.header}>
-              <span className={style.icon}>
-                {iconName === "splitNew" ? (
-                  <TicketsFontIcon
-                    name={iconName}
-                    size="14"
-                    isBold={isBoldIcon}
-                  />
-                ) : iconName === "taskDemo" ? (
-                  <TopbandFontIcon
-                    name={iconName}
-                    size={iconSize ? iconSize : "15"}
-                    isBold={isBoldIcon}
-                  />
-                ) : (
-                  <CommonFontIcon
-                    name={iconName || ""}
-                    size={iconSize ? iconSize : "15"}
-                    isBold={isBoldIcon}
-                  />
-                )}
-              </span>
-              <span className={style.title}>{title}</span>
-            </div>
-            <div className={style.middle}>
-              <div dangerouslySetInnerHTML={{ __html: message }} />
-              {confirmationMessage && (
-                <div className={style.text}>{confirmationMessage}</div>
-              )}
-              <div className={style.footer}>
-                <span className={`${style.button}`}>
-                  <Button
-                    text={submitText}
-                    palette={
-                      palette === "success" ? "primaryFilled" : "dangerFilled"
-                    }
-                    onClick={onSubmitClick}
-                  />
-                </span>
-                {type === "confirmation" && (
-                  <span className={`${style.button}`}>
-                    <Button
-                      text={cancelText}
-                      palette="secondary"
-                      onClick={onCancelClick}
-                    />
-                  </span>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </FreezeLayer>
-    );
-  }
-}
-
-Alert.propTypes = {
-  alertData: PropTypes.object,
-  isActive: PropTypes.bool,
-  onCancelClick: PropTypes.func,
-  onSubmitClick: PropTypes.func,
-  palette: PropTypes.oneOf(["success", "danger"]),
-  type: PropTypes.oneOf(["alert", "confirmation"])
-};
-Alert.defaultProps = {
-  isActive: false,
-  palette: "danger"
-};
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import style from "./Alert.module.css";
+import {
+  TopbandFontIcon,
+  TicketsFontIcon,
+  CommonFontIcon,
+  Button
+} from "@zohodesk/components";
+
+import FreezeLayer from "../FreezeLayer/FreezeLayer";
+
+export default class Alert extends Component {
+  constructor(props) {
+    super(props);
+    this.documentKeyupHandler = this.documentKeyupHandler.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener("keyup", this.documentKeyupHandler);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keyup", this.documentKeyupHandler);
+  }
+
+  documentKeyupHandler(e = {}) {
+    e && e.preventDefault();
+    let { onSubmitClick, onCancelClick, isActive } = this.props;
+    if (e.keyCode === 27 && isActive) {
+      onCancelClick();
+    } else if (e.keyCode === 13 && isActive) {
+      onSubmitClick();
+    }
+  }
+
+  render() {
+    let {
+      onSubmitClick,
+      onCancelClick,
+      alertData,
+      isActive,
+      palette,
+      type
+    } = this.props;
+    let {
+      iconName,
+      iconSize,
+      title,
+      message,
+      confirmationMessage,
+      submitText,
+      cancelText,
+      isBoldIcon
+    } = alertData;
+    return (
+      <FreezeLayer
+        zIndex="7"
+        isActive={isActive}
+        animationName="fadeIn"
+        childAnimationName="scaleIn"
+        align="both"
+      >
+        <div className={`${style[palette]}`}>
+          <div className={style.container}>
+            <div className={style.header}>
+              <span className={style.icon}>
+                {iconName === "splitNew" ? (
+                  <TicketsFontIcon
+                    name={iconName}
+                    size="14"
+                    isBold={isBoldIcon}
+                  />
+                ) : iconName === "taskDemo" ? (
+                  <TopbandFontIcon
+                    name={iconName}
+                    size={iconSize ? iconSize : "15"}
+                    isBold={isBoldIcon}
+                  />
+                ) : (
+                  <CommonFontIcon
+                    name={iconName || ""}
+                    size={iconSize ? iconSize : "15"}
+                    isBold={isBoldIcon}
+                  />
+                )}
+              </span>
+              <span className={style.title}>{title}</span>
+            </div>
+            <div className={style.middle}>
+              <div dangerouslySetInnerHTML={{ __html: message }} />
+              {confirmationMessage && (
+                <div className={style.text}>{confirmationMessage}</div>
+              )}
+              <div className={style.footer}>
+                <span className={`${style.button}`}>
+                  <Button
+                    text={submitText}
+                    palette={
+                      palette === "success" ? "primaryFilled" : "dangerFilled"
+                    }
+                    onClick={onSubmitClick}
+                  />
+                </span>
+                {type === "confirmation" && (
+                  <span className={`${style.button}`}>
+                    <Button
+                      text={cancelText}
+                      palette="secondary"
+                      onClick={onCancelClick}
+                    />
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </FreezeLayer>
+    );
+  }
+}
+
+Alert.propTypes = {
+  alertData: PropTypes.object,
+  isActive: PropTypes.bool,
+  onCancelClick: PropTypes.func,
+  onSubmitClick: PropTypes.func,
+  palette: PropTypes.oneOf(["success", "danger"]),
+  type: PropTypes.oneOf(["alert", "confirmation"])
+};
+Alert.defaultProps = {
+  isActive: false,
+  palette: "danger"
+};

package/templates/app/src/components/Alert/Alert.module.css

@@ -1,79 +1,79 @@
-.container {
-  background-color: var(--zd_bg_pure);
-  border-radius: var(--zd_size2);
-  width: var(--zd_size430);
-}
-.header {
-  text-transform: capitalize;
-  padding: var(--zd_size12) var(--zd_size20);
-  box-shadow: 0 0 var(--zd_size3) 0 var(--zd_shadow_smoke36);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-.danger .header {
-  background-color: var(--zd_bg_danger5);
-  color: var(--zd_text_danger4);
-}
-.success .header {
-  background-color: var(--zd_bg_primarytrans2);
-  color: var(--zd_text_prime);
-}
-.icon {
-  margin-right: var(--zd_size10);
-  font-size: 0;
-}
-.danger .icon {
-  color: var(--zd_text_danger4);
-}
-.success .icon {
-  color: var(--zd_text_prime);
-}
-.title {
-  -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-height: 0;
-  min-width: 0;
-  white-space: nowrap;
-  word-wrap: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: var(--zd_size15);
-}
-
-.middle {
-  padding: var(--zd_size30) var(--zd_size20) var(--zd_size20);
-  line-height: var(--zd_size25);
-  color: var(--zd_text_dark4);
-  font-size: var(--zd_size15);
-  word-break: break-word;
-}
-.text {
-  margin-top: var(--zd_size20);
-}
-.footer {
-  margin-top: var(--zd_size20);
-}
-
-.button {
-  margin-right: var(--zd_size20);
-  display: inline-block;
-}
-
-html[dir="rtl"] .button {
-  margin-right: 0;
-  margin-left: var(--zd_size20);
-}
-html[dir="rtl"] .icon {
-  margin-left: var(--zd_size10);
-  margin-right: 0;
-}
+.container {
+  background-color: var(--zd_bg_pure);
+  border-radius: var(--zd_size2);
+  width: var(--zd_size430);
+}
+.header {
+  text-transform: capitalize;
+  padding: var(--zd_size12) var(--zd_size20);
+  box-shadow: 0 0 var(--zd_size3) 0 var(--zd_shadow_smoke36);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.danger .header {
+  background-color: var(--zd_bg_danger5);
+  color: var(--zd_text_danger4);
+}
+.success .header {
+  background-color: var(--zd_bg_primarytrans2);
+  color: var(--zd_text_prime);
+}
+.icon {
+  margin-right: var(--zd_size10);
+  font-size: 0;
+}
+.danger .icon {
+  color: var(--zd_text_danger4);
+}
+.success .icon {
+  color: var(--zd_text_prime);
+}
+.title {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-height: 0;
+  min-width: 0;
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--zd_size15);
+}
+
+.middle {
+  padding: var(--zd_size30) var(--zd_size20) var(--zd_size20);
+  line-height: var(--zd_size25);
+  color: var(--zd_text_dark4);
+  font-size: var(--zd_size15);
+  word-break: break-word;
+}
+.text {
+  margin-top: var(--zd_size20);
+}
+.footer {
+  margin-top: var(--zd_size20);
+}
+
+.button {
+  margin-right: var(--zd_size20);
+  display: inline-block;
+}
+
+html[dir="rtl"] .button {
+  margin-right: 0;
+  margin-left: var(--zd_size20);
+}
+html[dir="rtl"] .icon {
+  margin-left: var(--zd_size10);
+  margin-right: 0;
+}

package/templates/app/src/components/FreezeLayer/FreezeLayer.css

@@ -1,37 +1,37 @@
-.container {
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  position: absolute;
-}
-.default {
-  background-color: rgba(0, 0, 0, 0.7);
-}
-.dark {
-  background-color: rgba(0, 0, 0, 0.9);
-}
-.darkLight {
-  background-color: var(--zd_bg_dark16);
-}
-.plain {
-  background-color: transparent;
-}
-.snow {
-  background-color: rgba(30, 38, 51, 0.4);
-}
-.index3 {
-  z-index: 3;
-}
-.index5 {
-  z-index: 5;
-}
-.index7 {
-  z-index: 7;
-}
-.index10 {
-  z-index: 10;
-}
-.delay {
-  transition-delay: 0.2s;
-}
+.container {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+}
+.default {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+.dark {
+  background-color: rgba(0, 0, 0, 0.9);
+}
+.darkLight {
+  background-color: var(--zd_bg_dark16);
+}
+.plain {
+  background-color: transparent;
+}
+.snow {
+  background-color: rgba(30, 38, 51, 0.4);
+}
+.index3 {
+  z-index: 3;
+}
+.index5 {
+  z-index: 5;
+}
+.index7 {
+  z-index: 7;
+}
+.index10 {
+  z-index: 10;
+}
+.delay {
+  transition-delay: 0.2s;
+}

package/templates/app/src/components/FreezeLayer/FreezeLayer.js

@@ -1,84 +1,84 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-
-import style from "./FreezeLayer.css";
-import { Container, Animation } from "@zohodesk/components";
-export default class FreezeLayer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { isActive: props.isActive, isChildActive: false };
-    this.toggleChild = this.toggleChild.bind(this);
-  }
-
-  toggleChild() {
-    this.setState({ isChildActive: !this.state.isChildActive });
-  }
-
-  render() {
-    let {
-      children,
-      align,
-      childAnimationName,
-      palette,
-      onClick,
-      animationName,
-      zIndex,
-      isActive
-    } = this.props;
-    let { isChildActive } = this.state;
-    return (
-      <Animation
-        name={animationName}
-        isActive={isActive}
-        onExit={this.toggleChild}
-        onEntered={this.toggleChild}
-        delayClassName={childAnimationName ? style.delay : ""}
-        exitDuration={childAnimationName && 500}
-      >
-        <div
-          className={`
-              ${style.container} ${style[`index${zIndex}`]}  ${style[palette]}
-            `}
-          onClick={onClick ? onClick : null}
-        >
-          {children && (
-            <Container alignBox="row" align={align}>
-              {childAnimationName ? (
-                <Animation name={childAnimationName} isActive={isChildActive}>
-                  {children}
-                </Animation>
-              ) : (
-                children
-              )}
-            </Container>
-          )}
-        </div>
-      </Animation>
-    );
-  }
-}
-FreezeLayer.propTypes = {
-  align: PropTypes.oneOf(["horizontal", "vertical", "both"]),
-  animationName: PropTypes.oneOf([
-    "zoomIn",
-    "scaleIn",
-    "fadeIn",
-    "slideLeft",
-    "slideDown",
-    "skewIn",
-    "default",
-    "none"
-  ]),
-  childAnimationName: PropTypes.string,
-  children: PropTypes.node,
-  isActive: PropTypes.bool,
-  onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  palette: PropTypes.oneOf(["dark", "default", "darkLight", "plain", "snow"]),
-  zIndex: PropTypes.oneOf(["3", "5", "7", "10"])
-};
-FreezeLayer.defaultProps = {
-  animationName: "default",
-  isActive: false,
-  palette: "default",
-  zIndex: "5"
-};
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import style from "./FreezeLayer.css";
+import { Container, Animation } from "@zohodesk/components";
+export default class FreezeLayer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { isActive: props.isActive, isChildActive: false };
+    this.toggleChild = this.toggleChild.bind(this);
+  }
+
+  toggleChild() {
+    this.setState({ isChildActive: !this.state.isChildActive });
+  }
+
+  render() {
+    let {
+      children,
+      align,
+      childAnimationName,
+      palette,
+      onClick,
+      animationName,
+      zIndex,
+      isActive
+    } = this.props;
+    let { isChildActive } = this.state;
+    return (
+      <Animation
+        name={animationName}
+        isActive={isActive}
+        onExit={this.toggleChild}
+        onEntered={this.toggleChild}
+        delayClassName={childAnimationName ? style.delay : ""}
+        exitDuration={childAnimationName && 500}
+      >
+        <div
+          className={`
+              ${style.container} ${style[`index${zIndex}`]}  ${style[palette]}
+            `}
+          onClick={onClick ? onClick : null}
+        >
+          {children && (
+            <Container alignBox="row" align={align}>
+              {childAnimationName ? (
+                <Animation name={childAnimationName} isActive={isChildActive}>
+                  {children}
+                </Animation>
+              ) : (
+                children
+              )}
+            </Container>
+          )}
+        </div>
+      </Animation>
+    );
+  }
+}
+FreezeLayer.propTypes = {
+  align: PropTypes.oneOf(["horizontal", "vertical", "both"]),
+  animationName: PropTypes.oneOf([
+    "zoomIn",
+    "scaleIn",
+    "fadeIn",
+    "slideLeft",
+    "slideDown",
+    "skewIn",
+    "default",
+    "none"
+  ]),
+  childAnimationName: PropTypes.string,
+  children: PropTypes.node,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  palette: PropTypes.oneOf(["dark", "default", "darkLight", "plain", "snow"]),
+  zIndex: PropTypes.oneOf(["3", "5", "7", "10"])
+};
+FreezeLayer.defaultProps = {
+  animationName: "default",
+  isActive: false,
+  palette: "default",
+  zIndex: "5"
+};