@zohodesk/components 1.6.0 → 1.6.2

package/es/v1/Buttongroup/props/propTypes.js

@@ -1,9 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  buttonPosition: PropTypes.oneOf(['left', 'right', 'center']),
-  children: PropTypes.node,
-  type: PropTypes.string.isRequired,
-  customClass: PropTypes.string,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string
-};

package/es/v1/Card/Card.js

@@ -1,237 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from "./props/propTypes";
-import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from "./props/defaultProps";
-import { Container, Box } from "../Layout";
-import { getLibraryConfig } from "../../Provider/Config";
-import style from "../../Card/Card.module.css";
-/* eslint-disable react/forbid-component-props */
-
-/*
-isscroll header border change use ref
-scroll logic remove from here
-scroll logic move to virtualizer list
-*/
-
-/* performance handling pending in card component moving to ref instead of setState */
-
-export function CardHeader(props) {
-  let {
-    isScroll,
-    children,
-    dataId,
-    dataSelectorId,
-    customClass
-  } = props;
-  const cardHeader = useRef(null);
-
-  function getCardHeaderDom(ele) {
-    cardHeader.current = ele;
-  }
-
-  function setScrollClassName() {
-    if (!cardHeader.current) {
-      return null;
-    }
-  }
-
-  return /*#__PURE__*/React.createElement(Box, {
-    className: `${isScroll ? style.scroll : style.notScroll} ${customClass}`,
-    eleRef: getCardHeaderDom,
-    dataId: dataId,
-    dataSelectorId: dataSelectorId
-  }, children);
-}
-CardHeader.propTypes = CardHeader_propTypes;
-CardHeader.defaultProps = CardHeader_defaultProps;
-export function CardContent(props) {
-  let {
-    onScroll,
-    eleRef,
-    children,
-    scroll,
-    isScrollAttribute,
-    dataId,
-    dataSelectorId,
-    shrink,
-    customClass,
-    preventParentScroll
-  } = props;
-  return /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    onScroll: onScroll,
-    eleRef: eleRef,
-    scroll: scroll,
-    preventParentScroll: preventParentScroll,
-    isScrollAttribute: isScrollAttribute,
-    dataId: dataId,
-    shrink: shrink,
-    className: customClass,
-    dataSelectorId: dataSelectorId
-  }, children);
-}
-CardContent.propTypes = CardContent_propTypes;
-CardContent.defaultProps = CardContent_defaultProps;
-export default function Card(props) {
-  let {
-    onClick,
-    children,
-    isScrollAttribute,
-    dataId,
-    eleRef,
-    customClass = '',
-    htmlId,
-    a11y,
-    from,
-    limit,
-    fetchData,
-    noMoreData,
-    scrollAt,
-    noNeedUpScroll,
-    isPercentageScroll,
-    onScroll
-  } = props;
-  let {
-    role
-  } = a11y;
-  const [isScroll, setScroll] = useState(false);
-  const fromRef = useRef(from);
-  const limitRef = useRef(limit);
-  const to = useRef(from + 3 * limit);
-  const lastScrollTop = useRef(0);
-  const isFetching = useRef(false);
-  const scrollDirection = useRef(null);
-  useEffectCallOnlyAfterState(() => {
-    fromRef.current = from;
-  }, [from]);
-
-  function onCardScroll(e) {
-    let scrollContainerObj = e.currentTarget;
-    let {
-      scrollHeight
-    } = scrollContainerObj;
-    let {
-      scrollTop
-    } = scrollContainerObj;
-    let {
-      offsetHeight
-    } = scrollContainerObj;
-    onScroll && onScroll(e);
-
-    if (scrollTop > lastScrollTop.current) {
-      scrollDirection.current = 'down';
-    } else {
-      scrollDirection.current = 'up';
-    }
-
-    lastScrollTop.current = scrollTop;
-
-    if (fetchData && !isFetching.current) {
-      if (scrollDirection.current === 'down' && !noMoreData) {
-        const scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
-        const prefetch = isPercentageScroll ? scrollingPercentage >= getLibraryConfig('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
-
-        if (prefetch) {
-          isFetching.current = true;
-          fetchData(fromRef.current + limitRef.current, limitRef.current + to.current, scrollDirection.current).then(() => {
-            to.current = limitRef.current + to.current;
-            isFetching.current = false;
-          }, () => {
-            isFetching.current = false;
-          });
-        }
-      } else {
-        if (0 >= scrollTop - scrollAt && fromRef.current !== 0 && !noNeedUpScroll) {
-          isFetching.current = true;
-          fetchData(fromRef.current - limitRef.current, to.current - limitRef.current, scrollDirection.current).then(() => {
-            to.current = to.current - limitRef.current;
-            isFetching.current = false;
-          }, () => {
-            isFetching.current = false;
-          });
-        }
-      }
-    }
-
-    if (fetchData && !noNeedUpScroll) {
-      if (fromRef.current !== 0 && scrollTop === 0 && !noNeedUpScroll) {
-        scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
-      } else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
-        scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
-      }
-    } // if (isScrollShadow) {
-    //   this.onSetScroll();
-    // }
-
-  } // setScroll(isScroll) {
-  //   let { isScroll: stateIsScroll } = this.state;
-  //   if (isScroll && !stateIsScroll) {
-  //     this.setState({ isScroll: true }, () => {
-  //       this.onClearScroll();
-  //     });
-  //   } else if (!isScroll && stateIsScroll) {
-  //     this.setState({ isScroll: false });
-  //   }
-  // }
-
-
-  return /*#__PURE__*/React.createElement(Container, {
-    className: `${customClass}`,
-    isScrollAttribute: isScrollAttribute,
-    onClick: onClick,
-    dataId: dataId,
-    eleRef: eleRef
-  }, React.Children.map(children, child => {
-    if (!child) {
-      return child;
-    }
-
-    if (child.type === CardHeader || props.childTypes && child.type === props.childTypes.cardHeader) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        isScroll
-      });
-    } else if (child.type === CardContent || props.childTypes && child.type === props.childTypes.cardContent) {
-      return /*#__PURE__*/React.createElement(Box, {
-        id: htmlId,
-        role: role,
-        flexible: true,
-        scroll: child.props.scroll,
-        preventParentScroll: child.props.preventParentScroll,
-        onScroll: onCardScroll,
-        eleRef: child.props.eleRef,
-        isScrollAttribute: child.props.isScrollAttribute,
-        dataId: child.props.dataId,
-        shrink: child.props.shrink,
-        className: child.props.customClass,
-        dataSelectorId: child.props.dataSelectorId
-      }, child.props.children);
-    }
-
-    return child;
-  }));
-}
-Card.propTypes = Card_propTypes;
-Card.defaultProps = Card_defaultProps; // if (__DOCS__) {
-//   Card.docs = {
-//     componentGroup: 'Template',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
-
-export function CardFooter(props) {
-  let {
-    children,
-    dataId,
-    customClass,
-    dataSelectorId
-  } = props;
-  return /*#__PURE__*/React.createElement(Box, {
-    className: `${customClass}`,
-    dataId: dataId,
-    dataSelectorId: dataSelectorId
-  }, children);
-}
-CardFooter.propTypes = CardFooter_propTypes;
-CardFooter.defaultProps = CardFooter_defaultProps;

package/es/v1/Card/index.js

@@ -1,4 +0,0 @@
-export { default as Card } from "./Card";
-export { CardHeader } from "./Card";
-export { CardContent } from "./Card";
-export { CardFooter } from "./Card";

package/es/v1/Card/props/defaultProps.js

@@ -1,25 +0,0 @@
-export const Card_defaultProps = {
-  isScrollAttribute: false,
-  // isScrollShadow: true,
-  onClick: null,
-  scrollAt: '10',
-  a11y: {},
-  isPercentageScroll: false
-};
-export const CardHeader_defaultProps = {
-  dataId: 'CardHeader',
-  customClass: '',
-  dataSelectorId: 'cardHeader'
-};
-export const CardContent_defaultProps = {
-  isScrollAttribute: false,
-  scroll: 'vertical',
-  dataId: 'CardContent',
-  customClass: '',
-  dataSelectorId: 'cardContent'
-};
-export const CardFooter_defaultProps = {
-  dataId: 'CardFooter',
-  customClass: '',
-  dataSelectorId: 'cardFooter'
-};

package/es/v1/Card/props/propTypes.js

@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-export const CardHeader_propTypes = {
-  children: PropTypes.node,
-  dataId: PropTypes.string,
-  isScroll: PropTypes.bool,
-  customClass: PropTypes.string,
-  dataSelectorId: PropTypes.string
-};
-export const CardContent_propTypes = {
-  children: PropTypes.node,
-  dataId: PropTypes.string,
-  eleRef: PropTypes.func,
-  isScrollAttribute: PropTypes.bool,
-  onScroll: PropTypes.func,
-  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
-  shrink: PropTypes.bool,
-  customClass: PropTypes.string,
-  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both']),
-  dataSelectorId: PropTypes.string
-};
-export const Card_propTypes = {
-  childTypes: PropTypes.object,
-  children: PropTypes.node,
-  dataId: PropTypes.string,
-  fetchData: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  from: PropTypes.number,
-  isScrollAttribute: PropTypes.bool,
-  // isScrollShadow: PropTypes.bool,
-  limit: PropTypes.number,
-  noMoreData: PropTypes.bool,
-  noNeedUpScroll: PropTypes.bool,
-  onClick: PropTypes.func,
-  onScroll: PropTypes.func,
-  scrollAt: PropTypes.string,
-  customClass: PropTypes.string,
-  htmlId: PropTypes.string,
-  a11y: PropTypes.shape({
-    role: PropTypes.string
-  }),
-  isPercentageScroll: PropTypes.bool,
-  eleRef: PropTypes.func
-};
-export const CardFooter_propTypes = {
-  children: PropTypes.node,
-  customClass: PropTypes.string,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string
-};

package/es/v1/CheckBox/CheckBox.js

@@ -1,161 +0,0 @@
-import React from 'react';
-import { propTypes } from "./props/propTypes";
-import { defaultProps } from "./props/defaultProps";
-import Label from "../Label/Label";
-import { Container, Box } from "../Layout";
-import CssProvider from "../../Provider/CssProvider";
-import style from "../../CheckBox/CheckBox.module.css";
-
-const CheckBox = props => {
-  let {
-    id,
-    checked,
-    disabled,
-    isReadOnly,
-    disabledTitle,
-    title,
-    palette,
-    text,
-    size,
-    labelPalette,
-    labelSize,
-    isFilled,
-    isClipped,
-    getRef,
-    getContainerRef,
-    variant,
-    active,
-    dataId,
-    name,
-    activeStyle,
-    a11y,
-    customClass,
-    customProps,
-    dataSelectorId
-  } = props;
-
-  function onChange(e) {
-    const {
-      onChange
-    } = props;
-    onChange && onChange(!checked, e);
-  }
-
-  function handleGetContainerRef(ele) {
-    getContainerRef && getContainerRef(ele, id);
-  }
-
-  let {
-    CheckBoxProps = {},
-    LabelProps = {}
-  } = customProps;
-  let {
-    customCheckBox = '',
-    customLabel = '',
-    customCBoxSize = '',
-    customTickSize = ''
-  } = customClass;
-  let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
-  let toolTip = disabled ? disabledTitle : title ? title : null;
-  let {
-    ariaLabel,
-    ariaLabelledby,
-    ariaHidden,
-    role = 'checkbox',
-    ariaChecked = checked
-  } = a11y;
-  return /*#__PURE__*/React.createElement(Container, {
-    dataId: dataId,
-    isCover: false,
-    isInline: text ? false : true,
-    alignBox: "row",
-    align: "vertical",
-    className: `${style.container} ${accessMode} ${isReadOnly || disabled ? '' : `${style[palette]}`}
-      ${checked ? `${style[`checked${palette}`]}` : ''} ${customCheckBox}`,
-    "data-title": toolTip,
-    onClick: isReadOnly || disabled ? null : onChange,
-    tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
-    "aria-checked": ariaChecked,
-    eleRef: handleGetContainerRef,
-    role: role,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    "aria-hidden": ariaHidden,
-    "data-selector-id": dataSelectorId || id,
-    ...CheckBoxProps
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "hidden",
-    id: id,
-    ref: getRef,
-    name: name
-  }), /*#__PURE__*/React.createElement("label", {
-    className: `${style.checkbox} ${accessMode} ${style[size]} ${customCBoxSize}`
-  }, activeStyle == 'tick' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 40 40"
-  }, checked ? /*#__PURE__*/React.createElement("path", {
-    xmlns: "http://www.w3.org/2000/svg",
-    d: "M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44",
-    className: `${style.cbBox}`
-  }) : /*#__PURE__*/React.createElement("rect", {
-    xmlns: "http://www.w3.org/2000/svg",
-    x: "1",
-    y: "1",
-    width: "38",
-    height: "38",
-    rx: "4",
-    className: `${style.cbBox}`
-  })), checked ? /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 44 44",
-    className: `${style.tick} ${style[`${size}tick`]} ${customTickSize} ${disabled ? CssProvider('isDisabled') : ''}`
-  }, /*#__PURE__*/React.createElement("polyline", {
-    points: "12.56 19 19.61 26.06 40.39 5.28",
-    className: `${style.tickPath} ${style.checkedtickPath}`
-  })) : null) : /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 40 40"
-  }, /*#__PURE__*/React.createElement("rect", {
-    xmlns: "http://www.w3.org/2000/svg",
-    x: "1",
-    y: "1",
-    width: "38",
-    height: "38",
-    rx: "4",
-    className: `${style.cbBox}`
-  }), checked ? /*#__PURE__*/React.createElement("line", {
-    xmlns: "http://www.w3.org/2000/svg",
-    className: `${style.linePath} ${style.cbBox}`,
-    x1: "11.47",
-    y1: "20",
-    x2: "28.53",
-    y2: "20"
-  }) : null))), text && /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    className: style.text
-  }, /*#__PURE__*/React.createElement(Label, {
-    text: text,
-    palette: disabled ? 'disable' : labelPalette,
-    id: id,
-    size: labelSize,
-    type: "title",
-    clipped: isClipped,
-    variant: variant,
-    customClass: `${active && !disabled ? `${style[`active${palette}Label`]}` : ''}
-                          ${checked && active ? `${style[`checked${palette}Label`]}` : ''}
-                          ${accessMode} ${customLabel}`,
-    title: toolTip ? toolTip : text,
-    ...LabelProps
-  })));
-};
-
-export default CheckBox;
-CheckBox.defaultProps = defaultProps;
-CheckBox.propTypes = propTypes; // if (__DOCS__) {
-//   CheckBox.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/v1/CheckBox/props/defaultProps.js

@@ -1,18 +0,0 @@
-export const defaultProps = {
-  checked: false,
-  disabled: false,
-  isReadOnly: false,
-  active: false,
-  labelPalette: 'default',
-  labelSize: 'medium',
-  palette: 'primary',
-  size: 'medium',
-  isFilled: true,
-  variant: 'default',
-  dataId: 'checkBox',
-  activeStyle: 'tick',
-  customClass: {},
-  a11y: {},
-  isClipped: true,
-  customProps: {}
-};

package/es/v1/CheckBox/props/propTypes.js

@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  active: PropTypes.bool,
-  activeStyle: PropTypes.oneOf(['tick', 'minus']),
-  checked: PropTypes.bool,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
-  disabled: PropTypes.bool,
-  disabledTitle: PropTypes.string,
-  getRef: PropTypes.func,
-  getContainerRef: PropTypes.func,
-  id: PropTypes.string,
-  isFilled: PropTypes.bool,
-  isClipped: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
-  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  palette: PropTypes.oneOf(['primary', 'danger']),
-  size: PropTypes.oneOf(['small', 'medium']),
-  text: PropTypes.string,
-  title: PropTypes.string,
-  variant: PropTypes.oneOf(['default', 'primary']),
-  customClass: PropTypes.shape({
-    customCheckBox: PropTypes.string,
-    customLabel: PropTypes.string,
-    customCBoxSize: PropTypes.string,
-    customTickSize: PropTypes.string
-  }),
-  a11y: PropTypes.shape({
-    ariaLabel: PropTypes.string,
-    ariaLabelledby: PropTypes.string,
-    ariaHidden: PropTypes.bool,
-    ariaChecked: PropTypes.bool
-  }),
-  customProps: PropTypes.shape({
-    CheckBoxProps: PropTypes.object,
-    LabelProps: PropTypes.object
-  })
-};