@zohodesk/components 1.2.4 → 1.2.6

package/es/v1/Responsive/Responsive.js

@@ -0,0 +1,194 @@
+import React, { useContext, useEffect, useState, useMemo } from 'react'; // import React, { useState, useMemo, useCallback, useContext } from 'react';
+
+import { ResponsiveSender_defaultProps, ResponsiveReceiver_defaultProps } from '../../Responsive/props/defaultProps';
+import { ResponsiveSender_propTypes, ResponsiveReceiver_propTypes } from '../../Responsive/props/propTypes';
+import ResizeObserver from './ResizeObserver';
+import DOMRefWrapper from './RefWrapper';
+import { windowResizeObserver } from '../../Responsive/windowResizeObserver';
+import { getBreakPointValue, defaultMatcher } from '../../Responsive/utils/'; // const sortedBreackPointKey = [  'MOBILE_XS',  'MOBILE_S',  'MOBILE_M',  'MOBILE',  'TABLET_S',  'TABLET_M',  'TABLET',  'LAPTOP_S',  'LAPTOP_M',  'LAPTOP',  'MONITOR_M',  'MONITOR'];
+
+export const ResponsiveContext = /*#__PURE__*/React.createContext({});
+const defaultResponsiveId = 'parentReceiver';
+export class ResponsiveSender extends React.Component {
+  constructor(props) {
+    super(props); // method binding
+
+    this.onResize = this.onResize.bind(this);
+    this.containerRef = this.containerRef.bind(this);
+    this.getWidth = this.getWidth.bind(this);
+    this.state = {
+      breakPoint: null,
+      getWidth: this.getWidth
+    }; // variables
+
+    this.observer = new ResizeObserver(this.onResize);
+    this.size = null;
+  }
+
+  getWidth() {
+    if (!this.size) {
+      return 0;
+    }
+
+    const {
+      width
+    } = this.size;
+    return width;
+  }
+
+  onResize(size) {
+    // const { matcher } = this.props;
+    const {
+      breakPoint
+    } = this.state;
+    const newBreakPoint = defaultMatcher(size);
+    this.size = size;
+
+    if (breakPoint !== newBreakPoint) {
+      this.setState({
+        breakPoint: newBreakPoint
+      });
+    }
+  }
+
+  containerRef(node) {
+    this.observer.replaceObservationElement(node);
+  }
+
+  isChanged(data, key) {
+    this.memo = this.memo || {};
+    const changed = this.memo[key] !== data;
+    this.memo[key] = data;
+    return changed;
+  }
+
+  render() {
+    const parentContext = this.context;
+    const {
+      children,
+      domRefKey,
+      responsiveId
+    } = this.props;
+    let {
+      childContext
+    } = this; // NOTE: this method called here ,Because of we must update local memo.
+
+    const isStateChanged = this.isChanged(this.state, 'state');
+
+    if (this.isChanged(this.context, 'context') || isStateChanged) {
+      childContext = Object.assign({}, parentContext);
+      childContext[responsiveId] = this.state;
+      childContext[defaultResponsiveId] = this.state; // NOTE: this for fallback of if responsive receiver id wrong
+    }
+
+    this.childContext = childContext;
+    return /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
+      value: childContext
+    }, /*#__PURE__*/React.createElement(DOMRefWrapper, {
+      domRefKey: domRefKey,
+      ref: this.containerRef
+    }, children));
+  }
+
+}
+ResponsiveSender.defaultProps = { ...ResponsiveSender_defaultProps,
+  responsiveId: defaultResponsiveId
+};
+ResponsiveSender.contextType = ResponsiveContext;
+ResponsiveSender.propTypes = ResponsiveSender_propTypes;
+export function useResponsiveReceiver() {
+  let responsiveId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultResponsiveId;
+  const [_, forceUpdate] = useState();
+  let totalContextData = useContext(ResponsiveContext);
+  let contextData = totalContextData[responsiveId] || totalContextData[defaultResponsiveId]; // NOTE: this for fallback of if responsive receiver id wrong
+
+  let data = contextData;
+  useEffect(() => {
+    !contextData && windowResizeObserver.observe(forceUpdate);
+    return () => !contextData && windowResizeObserver.unobserve(forceUpdate);
+  }, [!!contextData]);
+
+  if (!contextData) {
+    data = {
+      breakPoint: windowResizeObserver.getBreackPoint(),
+      getWidth: () => windowResizeObserver.getSize().width
+    };
+  }
+
+  const {
+    breakPoint,
+    getWidth
+  } = data;
+  const childArg = useMemo(() => {
+    const isTouchDevice = 'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
+    return {
+      breakPoint,
+      isTouchDevice,
+
+      deviceBetween(breakPoint1, breakPoint2) {
+        const width = getWidth();
+
+        if (!width) {
+          return false;
+        } // const smallBreakPointIndex = sortedBreackPointKey.indexOf(breakPoint1);
+        // const value1 = smallBreakPointIndex < 1 ?  0 : getBreakPointValue(sortedBreackPointKey[smallBreakPointIndex-1]);
+
+
+        const value1 = getBreakPointValue(breakPoint1);
+        const value2 = getBreakPointValue(breakPoint2);
+
+        if (value1 > value2) {
+          return this.deviceBetween(breakPoint2, breakPoint1);
+        }
+
+        return value1 <= width && value2 >= width || breakPoint1 === breakPoint || breakPoint2 === breakPoint;
+      },
+
+      deviceOnly() {
+        let breakPoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        return breakPoints.includes(breakPoint);
+      },
+
+      deviceUpto(breakPoint) {
+        const width = getWidth();
+
+        if (!width) {
+          return false;
+        }
+
+        return width <= getBreakPointValue(breakPoint);
+      }
+
+    };
+  }, [breakPoint, getWidth]);
+  return childArg;
+} // function ResponsiveReceiverFunc({ children, hiddenSizes }, ref) {
+//   const { breakPoint, methods } = useResponsiveReceiver();
+//   console.log(hiddenSizes);
+//   return hiddenSizes.indexOf(breakPoint) === -1 ? (
+//     <RefWrapper ref={ref}>{children(breakPoint, methods)}</RefWrapper>
+//   ) : null;
+// }
+
+export function ResponsiveReceiver(_ref) {
+  let {
+    children,
+    responsiveId,
+    hiddenSizes,
+    eleRef,
+    domRefKey
+  } = _ref;
+  const data = useResponsiveReceiver(responsiveId);
+  const {
+    breakPoint
+  } = data;
+  const child = children(data);
+  return !hiddenSizes.includes(breakPoint) ? eleRef ? /*#__PURE__*/React.createElement(DOMRefWrapper, {
+    domRefKey: domRefKey,
+    ref: eleRef
+  }, child) : child : null;
+}
+ResponsiveReceiver.defaultProps = { ...ResponsiveReceiver_defaultProps,
+  responsiveId: defaultResponsiveId
+};
+ResponsiveReceiver.propTypes = ResponsiveReceiver_propTypes;

package/es/v1/Responsive/index.js

@@ -0,0 +1,9 @@
+export { ResponsiveSender as CustomResponsiveSender, ResponsiveReceiver as CustomResponsiveReceiver, useResponsiveReceiver as useCustomResponsiveReceiver } from './CustomResponsive';
+export { ResponsiveSender, ResponsiveReceiver, useResponsiveReceiver } from './Responsive';
+export { default as ResizeComponent } from './ResizeComponent'; // let Responsive = {
+//   docs: {
+//     componentGroup: 'Layout',
+//     folderName: 'Style Guide'
+//   }
+// };
+// export { Responsive };

package/es/v1/ResponsiveDropBox/ResponsiveDropBox.js

@@ -0,0 +1,58 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useCallback } from 'react';
+import { defaultProps } from '../../ResponsiveDropBox/props/defaultProps';
+import { propTypes } from '../../ResponsiveDropBox/props/propTypes';
+import DropBox from '../DropBox/DropBox';
+import { Container } from '../Layout';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import style from '../../ResponsiveDropBox/ResponsiveDropBox.module.css';
+export default function ResponsiveDropBox(props) {
+  const {
+    children,
+    customClass = {},
+    isResponsivePadding,
+    alignBox
+  } = props;
+  const {
+    customDropBox = '',
+    customMobileDropBox = '',
+    customDropBoxWrap = '',
+    customMobileDropBoxWrap = '',
+    customResponsiveContainer = ''
+  } = customClass;
+  const dropBoxClasses = {
+    customDropBox: `${customDropBox}`,
+    customMobileDropBox: `${customMobileDropBox}`,
+    customDropBoxWrap: `${customDropBoxWrap}`,
+    customMobileDropBoxWrap: `${customMobileDropBoxWrap}`,
+    customResponsiveContainer: `${customResponsiveContainer}`
+  };
+  const responsiveFunc = useCallback(_ref => {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(DropBox, _extends({}, props, {
+    customClass: dropBoxClasses
+  }), /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: "Helmet"
+  }, _ref2 => {
+    let {
+      tabletMode
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: alignBox,
+      isCover: false,
+      className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''} ${customResponsiveContainer}`
+    }, children);
+  }));
+}
+ResponsiveDropBox.propTypes = propTypes;
+ResponsiveDropBox.defaultProps = defaultProps;

package/es/v1/Ribbon/Ribbon.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { defaultProps } from '../../Ribbon/props/defaultProps';
+import { propTypes } from '../../Ribbon/props/propTypes';
+import style from '../../Ribbon/Ribbon.module.css';
+export default function Ribbon(props) {
+  let {
+    type,
+    text,
+    children,
+    palette,
+    size,
+    dataId,
+    customClass,
+    dataSelectorId
+  } = props;
+  return /*#__PURE__*/React.createElement("span", {
+    className: `${style.basic} ${customClass} ${type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? `${style[`plain_${palette}`]} 
+                ${type === 'box' ? style[`box_${palette}`] : ''} ${type === 'stamp' ? style[`stamp_${palette}`] : ''}` : `${style[`palette_${palette}`]} ${type === 'default' ? style[`default_${palette}`] : ''}` : ''} ${style[size]} ${style[type]}`,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-selector-id": dataSelectorId
+  }, type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
+    className: style.after
+  }) : null, children ? /*#__PURE__*/React.createElement("span", {
+    className: style.children
+  }, children) : null, /*#__PURE__*/React.createElement("span", {
+    className: style.childText
+  }, text), type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
+    className: style.before
+  }) : null);
+}
+Ribbon.propTypes = propTypes;
+Ribbon.defaultProps = defaultProps;

package/es/v1/RippleEffect/RippleEffect.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { defaultProps } from '../../RippleEffect/props/defaultProps';
+import { propTypes } from '../../RippleEffect/props/propTypes';
+import CssProvider from '../../Provider/CssProvider';
+import style from '../../RippleEffect/RippleEffect.module.css';
+export default function RippleEffect(props) {
+  let {
+    children,
+    isActive,
+    isDisabled,
+    palette,
+    hoverType,
+    isNeedEffect,
+    needBorder,
+    isCopyTextEnabled
+  } = props;
+  let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isCopyTextEnabled ? style.notAllowed : isDisabled ? CssProvider('isDisabled') : ''}` : '';
+  let child = React.Children.only(children);
+  return /*#__PURE__*/React.cloneElement(child, {
+    className: `${child.props.className || ''} ${className}`
+  });
+}
+RippleEffect.defaultProps = defaultProps;
+RippleEffect.propTypes = propTypes;