@zohodesk/dot 1.7.22 → 1.7.24

package/es/AudioPlayer/AudioPlayer.module.css

@@ -0,0 +1,146 @@
+.container {
+    height: var(--zd_size30) ;
+    background: var(--zdt_audioplayer_default_bg);
+    border-radius: 4px;
+}
+
+.dragtag {
+    margin: 0 var(--zd_size10) ;
+}
+
+.audioHid {
+    display: none;
+}
+
+.pauseIcon {
+    font-size: var(--zd_font_size13) ;
+}
+
+.iconColor {
+    color: var(--zdt_audioplayer_line_text);
+}
+
+.downloadIcon {
+    font-size: var(--zd_font_size11) ;
+}
+
+[dir=ltr] .timerBox {
+    margin-left: var(--zd_size6) ;
+}
+
+[dir=rtl] .timerBox {
+    margin-right: var(--zd_size6) ;
+}
+
+.rightBox,
+.closeBox {
+    height: 100% ;
+    width: var(--zd_size36) ;
+}
+
+[dir=ltr] .boxLeftRadius {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+[dir=rtl] .boxLeftRadius {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+[dir=ltr] .boxRightRadius {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+[dir=rtl] .boxRightRadius {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.closeBox, .rightBox, .cursor {
+    cursor: pointer;
+}
+
+.downloadBox:hover, .downloadBox:focus, .closeBox:hover, .closeBox:focus {
+    background-color: var(--zdt_audioplayer_input_bg);
+}
+
+.downloadBox:hover .downloadIcon,
+.closeBox:hover .pauseIcon {
+    color: var(--zdt_audioplayer_pauseicon_text);
+}
+
+.line {
+    color: var(--zdt_audioplayer_line_text);
+    font-size: var(--zd_font_size13) ;
+    font-family: var(--zd_semibold);
+}
+
+.disable {
+    pointer-events: none;
+    opacity: 0.4;
+}
+
+/* Audio Range styles */
+
+input::-moz-focus-inner, input::-moz-focus-outer {
+    border: 0;
+}
+
+.audioRangeContainer {
+    position: relative;
+    background-color: var(--zdt_audioplayer_input_bg);
+}
+
+.audioRangeContainer,
+.input,
+.loading {
+    height: var(--zd_size3) ;
+}
+
+.audioRangeContainer, .input, .loading {
+    border-radius: 4px;
+}
+
+.loading {
+    width: 0% ;
+    height: 100% ;
+    position: absolute;
+    pointer-events: none;
+    background-color: var(--zdt_audioplayer_loading_bg);
+}
+
+/* CHROME */
+.input {
+    -webkit-appearance: none;
+    outline: none;
+    background-color: var(--zdt_audioplayer_input_bg);
+    margin: 0 ;
+}
+
+.input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: var(--zd_size7) ;
+    height: var(--zd_size7) ;
+    border-radius: 50%;
+    background-color: var(--zdt_audioplayer_loading_bg);
+}
+
+/* FIREFOX */
+.input::-moz-range-thumb {
+    height: var(--zd_size7) ;
+    width: var(--zd_size7) ;
+    border: none;
+    border-radius: 50%;
+    background-color: var(--zdt_audioplayer_loading_bg);
+    cursor: pointer;
+}
+
+.input::-moz-range-track {
+    height: var(--zd_size3) ;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+/* End of audio range styles */

package/es/AudioPlayer/Timer/Timer.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Timer_propTypes } from "./propTypes/propTypes";
+import { Timer_defaultProps } from "./propTypes/defaultProps";
+import { Container } from '@zohodesk/components/lib/Layout';
+import { addLeadingZeros } from "../utils/utils";
+import style from "./Timer.module.css";
+export default class Timer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.constructTimer = this.constructTimer.bind(this);
+  }
+
+  constructTimer() {
+    let {
+      hour,
+      minute,
+      second,
+      amPm,
+      separator,
+      timerFormat,
+      needCharacter
+    } = this.props;
+    const timeSeparator = separator == 'space' ? ' ' : ':';
+    let timerValue = '';
+    const format = timerFormat.toLowerCase().split(':');
+    hour = addLeadingZeros(hour);
+    minute = addLeadingZeros(minute);
+    second = addLeadingZeros(second);
+
+    if (needCharacter) {
+      hour = `${hour}h`;
+      minute = `${minute}m`;
+      second = `${second}s`;
+    }
+
+    format.map(type => {
+      if (type == 'hh') {
+        timerValue += hour;
+      } else if (type == 'mm') {
+        timerValue += minute;
+      } else if (type == 'ss') {
+        timerValue += second;
+      }
+
+      timerValue += timeSeparator;
+    });
+    timerValue = timerValue.slice(0, -1);
+    amPm && (timerValue = `${timerValue} ${amPm}`);
+    return timerValue;
+  }
+
+  render() {
+    const {
+      dataId
+    } = this.props;
+    const timerValue = this.constructTimer();
+    return /*#__PURE__*/React.createElement(Container, {
+      dataId: dataId,
+      alignBox: "row",
+      className: style.container,
+      flexible: true
+    }, timerValue);
+  }
+
+}
+Timer.defaultProps = Timer_defaultProps;
+Timer.propTypes = Timer_propTypes;

package/es/AudioPlayer/Timer/Timer.module.css

@@ -0,0 +1,5 @@
+.container {
+  font-size: var(--zd_font_size11) ;
+  color: var(--zdt_timer_default_text);
+  text-align: center;
+}

package/es/AudioPlayer/Timer/__tests__/Timer.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Timer from "../Timer";
+const defaultProps = {
+  dataId: 'CBTimer'
+};
+describe('Timer test Cases', () => {
+  // const {props,renderedDOM} = setup(Timer,Object.assign({},defaultProps))
+  // it('Should render Component',()=>{
+  //     const component = TestUtils.scryRenderedComponentsWithTestid(renderedDOM,'CBTimer');
+  //     expect(component.length).toBe(1);
+  // })
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Timer, { ...defaultProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/AudioPlayer/Timer/__tests__/__snapshots__/Timer.spec.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Timer test Cases rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container flex cover rowdir"
+    data-id="CBTimer"
+    data-selector-id="container"
+    data-test-id="CBTimer"
+  >
+    undefined:undefined
+  </div>
+</DocumentFragment>
+`;

package/es/AudioPlayer/Timer/propTypes/defaultProps.js

@@ -0,0 +1,4 @@
+export const Timer_defaultProps = {
+  separator: 'colon',
+  timerFormat: 'mm:ss'
+};

package/es/AudioPlayer/Timer/propTypes/propTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export const Timer_propTypes = {
+  dataId: PropTypes.string,
+  amPm: PropTypes.string,
+  hour: PropTypes.string,
+  minute: PropTypes.string,
+  needCharacter: PropTypes.bool,
+  second: PropTypes.string,
+  separator: PropTypes.oneOf(['space', 'colon']),
+  timerFormat: PropTypes.string
+};

package/es/AudioPlayer/__tests__/AudioPlayer.spec.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AudioPlayer from "../AudioPlayer"; // import TestUtils from 'react-dom/test-utils';
+
+const defaultProps = {
+  togglePlayer: jest.fn(),
+  downloadFile: jest.fn(),
+  minute: '02',
+  second: '03',
+  durationInSec: '203',
+  src: "https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
+};
+describe('AudioPlayer Test Cases', () => {
+  // const { props,renderedDOM } = setup(
+  //     AudioPlayer,Object.assign({},defaultProps));
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...defaultProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // it('should render component', () => {
+  //     let component = TestUtils.scryRenderedComponentsWithTestid(
+  //         renderedDOM,
+  //         'AudioPlayer');
+  //     expect(component.length).toBe(1);
+  // })
+  // it('should close player onclicking close',()=>{
+  //     let component = TestUtils.scryRenderedComponentsWithTestid(
+  //         renderedDOM,
+  //         'audioPlayerClose'
+  //     )[0];
+  //     TestUtils.Simulate.click(component);
+  //     expect(props.togglePlayer).toHaveBeenCalled();
+  // })
+  // it('should download audio onclicking download',()=>{
+  //     let component = TestUtils.scryRenderedComponentsWithTestid(
+  //         renderedDOM,
+  //         'audioDownload'
+  //     )[0];
+  //     TestUtils.Simulate.click(component);
+  //     expect(props.downloadFile).toHaveBeenCalled();
+  // })
+});

package/es/AudioPlayer/__tests__/__snapshots__/AudioPlayer.spec.js.snap

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AudioPlayer Test Cases rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex coldir"
+    data-id="AudioRange"
+    data-selector-id="container"
+    data-test-id="AudioRange"
+    tabindex="0"
+  >
+    <div
+      class="container flex rowdir vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <audio
+        class="audioHid"
+        controls=""
+        preload="auto"
+      >
+        <source
+          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
+          type="audio/mpeg"
+        />
+      </audio>
+      <div
+        class="rightBox downloadBox boxLeftRadius shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="disable flex cover coldir both"
+          data-id="AudioRange_playpause"
+          data-selector-id="container"
+          data-test-id="AudioRange_playpause"
+          data-title="Play"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+          />
+        </div>
+      </div>
+      <div
+        class="timerBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="flex cover rowdir vCenter"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="container flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            00:00:00
+          </div>
+        </div>
+      </div>
+      <div
+        class="dragtag disable grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="audioRangeContainer flex cover coldir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <span
+            class="loading"
+          />
+          <input
+            class="input"
+            data-id="AudioRange"
+            max="0"
+            min="0"
+            step="1"
+            type="range"
+            value="0"
+          />
+        </div>
+      </div>
+      <div
+        class="rightBox downloadBox  shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="disable flex cover coldir both"
+          data-id="AudioRange_download"
+          data-selector-id="container"
+          data-test-id="AudioRange_download"
+          data-title="Download"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+          />
+        </div>
+      </div>
+      <div
+        class="closeBox boxRightRadius shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="disable flex cover coldir both"
+          data-id="AudioRange_close"
+          data-selector-id="container"
+          data-test-id="AudioRange_close"
+          data-title="Close"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/AudioPlayer/propTypes/defaultProps.js

@@ -0,0 +1,14 @@
+export const AudioPlayer_defaultProps = {
+  isPlay: false,
+  timerFormat: 'mm:ss',
+  forwardStepInSec: 5,
+  backwardStepInSec: 5,
+  needClose: true,
+  needDownload: true,
+  needMuteIcon: false,
+  i18nKeys: {},
+  dataId: 'AudioPlayer',
+  customClass: '',
+  range: 0,
+  dataId: 'AudioRange'
+};

package/es/AudioPlayer/propTypes/propTypes.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+export const AudioPlayer_propTypes = {
+  backwardStepInSec: PropTypes.string,
+  forwardStepInSec: PropTypes.string,
+  getAudioDuration: PropTypes.func,
+  duration: PropTypes.string,
+  id: PropTypes.string,
+  isPlay: PropTypes.bool,
+  needClose: PropTypes.bool,
+  needDownload: PropTypes.bool,
+  needMuteIcon: PropTypes.bool,
+  onAudioLoading: PropTypes.func,
+  onAudioSeeking: PropTypes.func,
+  onClose: PropTypes.func,
+  onDownloading: PropTypes.func,
+  onError: PropTypes.func,
+  onMuteUnmute: PropTypes.func,
+  onPause: PropTypes.func,
+  onPlay: PropTypes.func,
+  src: PropTypes.string,
+  timerFormat: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    playTitle: PropTypes.string,
+    pauseTitle: PropTypes.string,
+    downloadTitle: PropTypes.string,
+    closeTitle: PropTypes.string,
+    muteTitle: PropTypes.string,
+    unmuteTitle: PropTypes.string
+  }),
+  dataId: PropTypes.string,
+  customClass: PropTypes.string,
+  range: PropTypes.number
+};

package/es/AudioPlayer/utils/utils.js

@@ -0,0 +1,24 @@
+export function openInNewTabWithNoopener(url) {
+  let targetnName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_blank';
+  const aTag = document.createElement('a');
+  aTag.rel = 'noopener noreferrer';
+  aTag.target = targetnName;
+  aTag.href = url;
+  aTag.click();
+}
+export function addLeadingZeros(number) {
+  let desiredLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '2';
+
+  if (typeof number !== 'undefined') {
+    number = `${number}`;
+    desiredLength = Number(desiredLength);
+
+    if (number.length < desiredLength) {
+      for (let i = desiredLength - number.length; i > 0; i--) {
+        number = `0${number}`;
+      }
+    }
+
+    return number;
+  }
+}