@desynova-digital/components 9.1.40 → 9.1.42

package/atoms/sideBar/sidebar.jsx

@@ -1,250 +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 20px 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

@@ -153,13 +153,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: {