@desynova-digital/components 9.2.3 → 9.2.5

package/atoms/sideBar/sidebar.jsx

@@ -1,262 +1,262 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import styled from "styled-components";
-import Button from "../button/index";
-import { Loader } from "../../components";
-import { colors } from "@desynova-digital/tokens";
-const SideBarOverlay = styled.div`
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 100;
-  visibility: ${(props) => (props.open ? "visible" : "hidden")};
-`;
-
-const SideBarBlock = styled.div`
-  height: 100%;
-  position: fixed;
-  z-index: 101;
-  top: 0;
-  right: 0px;
-  background-color: #121d29;
-  box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-  width: 0px;
-
-  transition: width 250ms ease-in-out;
-
-  .ball {
-    background-color: #151717;
-  }
-
-  .circle {
-    border: 4px solid #1d2020;
-    height: 10px;
-    width: 10px;
-  }
-
-  div.loader-holder > div {
-    height: 20px;
-    margin-left: 5px;
-  }
-
-  .parentBox {
-    width: 18px;
-    height: 18px;
-  }
-
-  &.open {
-    width: 400px;
-    .sidebar-header,
-    .bodyContainer,
-    .button-container {
-      opacity: 1;
-    }
-  }
-
-  .sidebar-header {
-    transition: opacity 50ms ease-in-out 250ms;
-    opacity: 0;
-    padding: 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-sizing: border-box;
-
-    .header-title {
-      font-family: SFUIText-Light;
-      line-height: 14px;
-      font-size: 16px;
-      line-height: 14px;
-      color: #ffffff;
-    }
-    ${Button.Element} {
-      margin: 0;
-      background: transparent;
-      border-color: transparent;
-      padding: 0;
-      &:hover {
-        background: transparent;
-        border-color: transparent;
-      }
-    }
-  }
-
-  .bodyContainer {
-    opacity: 0;
-    transition: opacity 50ms ease-in-out 250ms;
-    color: white;
-    font-family: SFUIText-Regular;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    height: calc(100% - 110px);
-    padding: 0px 10px 0px 20px;
-    overflow-x: hidden;
-  }
-
-  .bodyContainer-without-footer {
-    height: calc(100% - 70px) !important;
-  }
-`;
-
-const ButtonContainer = styled.div`
-  font-family: SFUIText-Regular;
-  display: flex;
-  justify-content: center;
-  padding: 10px 0;
-  background: #182738;
-  box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);
-  width: 100%;
-  bottom: 0;
-  position: absolute;
-  opacity: 0;
-  transition: opacity 50ms ease-in-out 250ms;
-
-  .btn {
-    border-radius: 22px;
-    color: #ffffff;
-    font-size: 12px;
-    line-height: 12px;
-    text-align: center;
-    min-width: 150px;
-    text-transform: uppercase;
-    padding: 10px 0;
-    margin: 0 10px;
-    max-width: 150px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    :hover {
-      color: ${(props) => colors[props.theme].sideBar.themeColor};
-    }
-  }
-
-  .default {
-    background: #303f51;
-
-    :hover {
-      color: ${(props) => colors[props.theme].sideBar.lightthemeColor};
-    }
-  }
-
-  .primary {
-    color: rgb(12, 20, 29);
-    background: ${(props) => colors[props.theme].sideBar.themeColor};
-
-    :hover {
-      color: rgb(12, 20, 29);
-      transition: all 0.2s ease-in-out 0s;
-      box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;
-    }
-  }
-`;
-
-/**
- * @component
- * @name SideBar
- */
-
-export default class SideBar extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      show: false,
-      renderFlag: false,
-    };
-  }
-  componentDidMount = () => {
-    this.setState({
-      renderFlag: true,
-    });
-  };
-
-  cancelClick() {
-    const { onCancelClick } = this.props;
-    onCancelClick();
-  }
-
-  buttonClick(field) {
-    const { onButtonClick } = this.props;
-    onButtonClick(field);
-    this.setState({
-      ...this.state,
-    });
-  }
-  render() {
-    const {
-      title,
-      content,
-      sideBarButtonObject,
-      showSideBar,
-      loadingBtn,
-      theme,
-    } = this.props;
-
-    return (
-      <React.Fragment>
-        <SideBarOverlay open={showSideBar} />
-        <SideBarBlock theme={theme} className={showSideBar ? "open" : "close"}>
-          <div className="sidebar-header">
-            <p className="header-title">{title}</p>
-            <Button
-              theme={theme}
-              appearance="cta"
-              iconWidth={12}
-              iconHeight={12}
-              icon="cross"
-              iconBackground={false}
-              onClick={() => {
-                this.buttonClick("cancel");
-              }}
-            />
-          </div>
-          <div
-            className={`bodyContainer ${!sideBarButtonObject.length &&
-              "bodyContainer-without-footer"}`}
-          >
-            {content}
-          </div>
-          {sideBarButtonObject && sideBarButtonObject.length ? (
-            <ButtonContainer theme={theme} className="button-container">
-              {sideBarButtonObject.map((object) => {
-                return (
-                  <div
-                    key={object.field}
-                    className={`btn ${object.type || "default"}`}
-                    onClick={() => {
-                      this.buttonClick(object.field);
-                    }}
-                  >
-                    {object.title}
-                    {object.isLoading ? (
-                      <Loader theme={theme} loaderName="SpinningLoader" />
-                    ) : null}
-                  </div>
-                );
-              })}
-            </ButtonContainer>
-          ) : null}
-        </SideBarBlock>
-      </React.Fragment>
-    );
-  }
-}
-
-SideBar.propTypes = {
-  theme: PropTypes.oneOf(["light", "dark", "nexc"]),
-  showSideBar: PropTypes.bool,
-  title: PropTypes.string,
-  content: PropTypes.object,
-  sideBarButtonObject: PropTypes.object,
-  onCancelClick: PropTypes.func,
-  onButtonClick: PropTypes.func,
-};
-
-SideBar.defaultProps = {
-  theme: "dark",
-};
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import Button from "../button/index";
+import { Loader } from "../../components";
+import { colors } from "@desynova-digital/tokens";
+const SideBarOverlay = styled.div`
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+  visibility: ${(props) => (props.open ? "visible" : "hidden")};
+`;
+
+const SideBarBlock = styled.div`
+  height: 100%;
+  position: fixed;
+  z-index: 101;
+  top: 0;
+  right: 0px;
+  background-color: #121d29;
+  box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  width: 0px;
+
+  transition: width 250ms ease-in-out;
+
+  .ball {
+    background-color: #151717;
+  }
+
+  .circle {
+    border: 4px solid #1d2020;
+    height: 10px;
+    width: 10px;
+  }
+
+  div.loader-holder > div {
+    height: 20px;
+    margin-left: 5px;
+  }
+
+  .parentBox {
+    width: 18px;
+    height: 18px;
+  }
+
+  &.open {
+    width: 400px;
+    .sidebar-header,
+    .bodyContainer,
+    .button-container {
+      opacity: 1;
+    }
+  }
+
+  .sidebar-header {
+    transition: opacity 50ms ease-in-out 250ms;
+    opacity: 0;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+
+    .header-title {
+      font-family: SFUIText-Light;
+      line-height: 14px;
+      font-size: 16px;
+      line-height: 14px;
+      color: #ffffff;
+    }
+    ${Button.Element} {
+      margin: 0;
+      background: transparent;
+      border-color: transparent;
+      padding: 0;
+      &:hover {
+        background: transparent;
+        border-color: transparent;
+      }
+    }
+  }
+
+  .bodyContainer {
+    opacity: 0;
+    transition: opacity 50ms ease-in-out 250ms;
+    color: white;
+    font-family: SFUIText-Regular;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height: calc(100% - 110px);
+    padding: 0px 10px 0px 20px;
+    overflow-x: hidden;
+  }
+
+  .bodyContainer-without-footer {
+    height: calc(100% - 70px) !important;
+  }
+`;
+
+const ButtonContainer = styled.div`
+  font-family: SFUIText-Regular;
+  display: flex;
+  justify-content: center;
+  padding: 10px 0;
+  background: #182738;
+  box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);
+  width: 100%;
+  bottom: 0;
+  position: absolute;
+  opacity: 0;
+  transition: opacity 50ms ease-in-out 250ms;
+
+  .btn {
+    border-radius: 22px;
+    color: #ffffff;
+    font-size: 12px;
+    line-height: 12px;
+    text-align: center;
+    min-width: 150px;
+    text-transform: uppercase;
+    padding: 10px 0;
+    margin: 0 10px;
+    max-width: 150px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    :hover {
+      color: ${(props) => colors[props.theme].sideBar.themeColor};
+    }
+  }
+
+  .default {
+    background: #303f51;
+
+    :hover {
+      color: ${(props) => colors[props.theme].sideBar.lightthemeColor};
+    }
+  }
+
+  .primary {
+    color: rgb(12, 20, 29);
+    background: ${(props) => colors[props.theme].sideBar.themeColor};
+
+    :hover {
+      color: rgb(12, 20, 29);
+      transition: all 0.2s ease-in-out 0s;
+      box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;
+    }
+  }
+`;
+
+/**
+ * @component
+ * @name SideBar
+ */
+
+export default class SideBar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: false,
+      renderFlag: false,
+    };
+  }
+  componentDidMount = () => {
+    this.setState({
+      renderFlag: true,
+    });
+  };
+
+  cancelClick() {
+    const { onCancelClick } = this.props;
+    onCancelClick();
+  }
+
+  buttonClick(field) {
+    const { onButtonClick } = this.props;
+    onButtonClick(field);
+    this.setState({
+      ...this.state,
+    });
+  }
+  render() {
+    const {
+      title,
+      content,
+      sideBarButtonObject,
+      showSideBar,
+      loadingBtn,
+      theme,
+    } = this.props;
+
+    return (
+      <React.Fragment>
+        <SideBarOverlay open={showSideBar} />
+        <SideBarBlock theme={theme} className={showSideBar ? "open" : "close"}>
+          <div className="sidebar-header">
+            <p className="header-title">{title}</p>
+            <Button
+              theme={theme}
+              appearance="cta"
+              iconWidth={12}
+              iconHeight={12}
+              icon="cross"
+              iconBackground={false}
+              onClick={() => {
+                this.buttonClick("cancel");
+              }}
+            />
+          </div>
+          <div
+            className={`bodyContainer ${!sideBarButtonObject.length &&
+              "bodyContainer-without-footer"}`}
+          >
+            {content}
+          </div>
+          {sideBarButtonObject && sideBarButtonObject.length ? (
+            <ButtonContainer theme={theme} className="button-container">
+              {sideBarButtonObject.map((object) => {
+                return (
+                  <div
+                    key={object.field}
+                    className={`btn ${object.type || "default"}`}
+                    onClick={() => {
+                      this.buttonClick(object.field);
+                    }}
+                  >
+                    {object.title}
+                    {object.isLoading ? (
+                      <Loader theme={theme} loaderName="SpinningLoader" />
+                    ) : null}
+                  </div>
+                );
+              })}
+            </ButtonContainer>
+          ) : null}
+        </SideBarBlock>
+      </React.Fragment>
+    );
+  }
+}
+
+SideBar.propTypes = {
+  theme: PropTypes.oneOf(["light", "dark", "nexc"]),
+  showSideBar: PropTypes.bool,
+  title: PropTypes.string,
+  content: PropTypes.object,
+  sideBarButtonObject: PropTypes.object,
+  onCancelClick: PropTypes.func,
+  onButtonClick: PropTypes.func,
+};
+
+SideBar.defaultProps = {
+  theme: "dark",
+};

package/atoms/timeCodeInput/timeCodeMainInput.js

@@ -162,13 +162,13 @@ var TimeCodeMainInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   });
   var onChangeFn = function onChangeFn(e) {
     onTimePickerChange(e.target.value, e);
-    /*
-     * checkIfTimeValid(e.target.value);
-     * if(checkIfTimeValid(e.target.value)) {
-     * if (e.target.value.length) {
-     *   updateFormDataExternally(inputFieldType, e.target.value);
-     * }
-     * }
+    /*
+     * checkIfTimeValid(e.target.value);
+     * if(checkIfTimeValid(e.target.value)) {
+     * if (e.target.value.length) {
+     *   updateFormDataExternally(inputFieldType, e.target.value);
+     * }
+     * }
      */
   };
   var onKeyDownFn = function onKeyDownFn(e) {

package/atoms/videoCard/videoCard.js

@@ -383,9 +383,9 @@ var defaultDimensions = {
     }
   },
   type4: {
-    /*
-     * //width:'280px',
-     * //height:'auto',
+    /*
+     * //width:'280px',
+     * //height:'auto',
      */
 
     large: {