@zohoim/chat-components 1.0.9-beta.2 → 1.0.9-beta.4

package/es/EmojiPopup/props/defaultProps.js

@@ -1,11 +0,0 @@
-/** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-const emojiPopupDefaultProps = {
-  customStyle: dummyObject,
-  customProps: dummyObject,
-  popupSize: 'large',
-  defaultPopupPosition: 'topCenter',
-  tooltip: 'Add Emoji',
-  needCloseOnSelect: true
-};
-export default emojiPopupDefaultProps;

package/es/EmojiPopup/props/propTypes.js

@@ -1,21 +0,0 @@
-/** ** Libraries *** */
-import PropTypes from 'prop-types';
-/** ** Constants *** */
-
-import { popupSize, popupPosition } from "../../constants/propConstants/popupPropConstants";
-const emojiPopupPropTypes = {
-  customStyle: PropTypes.object,
-  customProps: PropTypes.shape({
-    dropBoxProps: PropTypes.object,
-    emojisProps: PropTypes.object,
-    iconProps: PropTypes.object
-  }),
-  popupSize: PropTypes.oneOf(popupSize),
-  defaultPopupPosition: PropTypes.oneOf(popupPosition),
-  tooltip: PropTypes.string,
-  onSelect: PropTypes.func,
-  needCloseOnSelect: PropTypes.bool,
-  onPopupOpen: PropTypes.func,
-  onPopupClose: PropTypes.func
-};
-export default emojiPopupPropTypes;

package/es/Emojis/Emojis.js

@@ -1,81 +0,0 @@
-/* eslint-disable max-len */
-
-/** ** Libraries *** */
-import React from 'react';
-/** ** Components *** */
-
-import EmojisList from "../EmojisList/EmojisList";
-import EmojisHeader from "../EmojisHeader/EmojisHeader";
-import EmojisFooter from "../EmojisFooter/EmojisFooter";
-/** ** Hooks *** */
-
-import useEmojis from '@zohoim/chat-components-hooks/es/Emojis/useEmojis';
-/** ** Constants *** */
-
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-import emojisList from '@zohoim/chat-components-utils/es/constants/emojisList';
-import emojisDefaultProps from "./props/defaultProps";
-import emojisPropTypes from "./props/propTypes";
-export default function Emojis(props) {
-  const {
-    searchString,
-    isShowGroupBasedList,
-    isShowSearchBox,
-    emojisRowType,
-    onSelect: propOnSelect,
-    needAutoFocus,
-    customProps,
-    isShowOnlyContent,
-    searchPlaceHolder
-  } = props;
-  const {
-    emojisListProps = dummyObject,
-    emojisHeaderProps = dummyObject,
-    emojisFooterProps = dummyObject
-  } = customProps || dummyObject;
-  const {
-    searchValue,
-    onSearch,
-    getSearchRef,
-    onChangeGroup,
-    selectedGroup,
-    getEmojisListMethods,
-    onSelect,
-    onSelectTab,
-    isRenderEmojis,
-    isRenderEmojisList
-  } = useEmojis({
-    searchString,
-    isShowSearchBox,
-    needAutoFocus,
-    onSelect: propOnSelect,
-    emojisList,
-    isShowGroupBasedList
-  });
-  return isRenderEmojis ? /*#__PURE__*/React.createElement(React.Fragment, null, isShowSearchBox ? /*#__PURE__*/React.createElement(EmojisHeader, {
-    getRef: getSearchRef,
-    onChange: onSearch,
-    searchPlaceHolder: searchPlaceHolder,
-    searchString: searchValue,
-    ...emojisHeaderProps
-  }) : null, isRenderEmojisList ? /*#__PURE__*/React.createElement(EmojisList, {
-    emojisList: emojisList,
-    getMethods: getEmojisListMethods,
-    isShowGroupBasedList: searchValue ? false : isShowGroupBasedList,
-    isShowOnlyContent: isShowOnlyContent,
-    onChangeGroup: onChangeGroup,
-    onSelect: onSelect,
-    rowType: emojisRowType,
-    searchString: searchValue,
-    selectedGroup: selectedGroup,
-    ...emojisListProps
-  }) : null, isShowGroupBasedList ? /*#__PURE__*/React.createElement(EmojisFooter, {
-    emojisList: emojisList,
-    onSelect: onSelectTab,
-    selectedTab: selectedGroup,
-    ...emojisFooterProps
-  }) : null) : null;
-}
-Emojis.propTypes = emojisPropTypes;
-Emojis.defaultProps = emojisDefaultProps;
-Emojis.displayName = 'Emojis';

package/es/Emojis/index.js

@@ -1 +0,0 @@
-export { default as Emojis } from "./Emojis";

package/es/Emojis/props/defaultProps.js

@@ -1,10 +0,0 @@
-/** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-const emojisDefaultProps = {
-  customStyle: dummyObject,
-  isShowGroupBasedList: true,
-  emojisRowType: 'multiple',
-  needAutoFocus: true,
-  isShowSearchBox: true
-};
-export default emojisDefaultProps;

package/es/Emojis/props/propTypes.js

@@ -1,19 +0,0 @@
-/** ** Libraries *** */
-import PropTypes from 'prop-types';
-const emojisPropTypes = {
-  customStyle: PropTypes.object,
-  searchString: PropTypes.string,
-  isShowGroupBasedList: PropTypes.bool,
-  isShowSearchBox: PropTypes.bool,
-  emojisRowType: PropTypes.oneOf(['single', 'multiple']),
-  onSelect: PropTypes.func,
-  needAutoFocus: PropTypes.bool,
-  customProps: PropTypes.shape({
-    emojisFooterProps: PropTypes.object,
-    emojisHeaderProps: PropTypes.object,
-    emojisListProps: PropTypes.object
-  }),
-  isShowOnlyContent: PropTypes.bool,
-  searchPlaceHolder: PropTypes.string
-};
-export default emojisPropTypes;

package/es/EmojisEmptyState/EmojisEmptyState.js

@@ -1,50 +0,0 @@
-/** ** Libraries *** */
-import React, { useMemo } from 'react';
-/** ** Components *** */
-
-import { Container, Box } from '@zohodesk/components/es/Layout';
-import Emoji from "../Emoji/Emoji";
-/** ** Hooks *** */
-
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-/** ** Constants *** */
-
-import emojisEmptyStateDefaultProps from "./props/defaultProps";
-import emojisEmptyStatePropTypes from "./props/propTypes";
-/** ** Styles *** */
-
-import style from "./css/EmojisEmptyState.module.css";
-export default function EmojisEmptyState(props) {
-  const {
-    customStyle,
-    title,
-    description
-  } = props;
-  /* External customization */
-
-  const newStyle = useMergeStyle(style, customStyle);
-  const {
-    emoji,
-    name
-  } = useMemo(() => ({
-    emoji: ['#x1f622'],
-    name: ':cry:'
-  }), []);
-  return /*#__PURE__*/React.createElement(Container, {
-    align: "both"
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Emoji, {
-    autoHover: false,
-    emoji: emoji,
-    emojiName: name,
-    needTitle: false
-  })), /*#__PURE__*/React.createElement(Box, {
-    className: newStyle.title,
-    "data-title": title
-  }, title), /*#__PURE__*/React.createElement(Box, {
-    className: newStyle.description,
-    "data-title": description
-  }, description));
-}
-EmojisEmptyState.propTypes = emojisEmptyStatePropTypes;
-EmojisEmptyState.defaultProps = emojisEmptyStateDefaultProps;
-EmojisEmptyState.displayName = 'EmojisEmptyState';

package/es/EmojisEmptyState/css/EmojisEmptyState.module.css

@@ -1,18 +0,0 @@
-.title {
-  color: var(--zd_im_primary_text);
-  font-size: var(--zd_font_size16);
-  font-family: var(--zd_semibold);
-  max-width: 100% ;
-  composes: dotted from '../../css/common.module.css';
-  margin-bottom: var(--zd_size7);
-}
-
-.description {
-  font-size: var(--zd_font_size14);
-  color: var(--zd_im_secondary_text);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-align: center;
-}

package/es/EmojisEmptyState/index.js

@@ -1 +0,0 @@
-export { default as EmojisEmptyState } from "./EmojisEmptyState";

package/es/EmojisEmptyState/props/defaultProps.js

@@ -1,9 +0,0 @@
-/** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-const emojisEmptyStateDefaultProps = {
-  customStyle: dummyObject,
-  title: 'No Emoji(s) found!',
-  // eslint-disable-next-line quotes
-  description: "Sorry, we couldn't find any emojis."
-};
-export default emojisEmptyStateDefaultProps;

package/es/EmojisEmptyState/props/propTypes.js

@@ -1,8 +0,0 @@
-/** ** Libraries *** */
-import PropTypes from 'prop-types';
-const emojisEmptyStatePropTypes = {
-  customStyle: PropTypes.object,
-  title: PropTypes.string.isRequired,
-  description: PropTypes.string
-};
-export default emojisEmptyStatePropTypes;

package/es/EmojisFooter/EmojisFooter.js

@@ -1,71 +0,0 @@
-/* eslint-disable max-len */
-
-/** ** Libraries *** */
-import React, { useMemo } from 'react';
-/** ** Components *** */
-
-import { Container, Box } from '@zohodesk/components/es/Layout';
-import Emoji from "../Emoji/Emoji";
-/** ** Hooks *** */
-
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-/** ** Constants *** */
-
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-import emojisFooterDefaultProps from "./props/defaultProps";
-import emojisFooterPropTypes from "./props/propTypes";
-/** ** Styles *** */
-
-import style from "./css/EmojisFooter.module.css";
-
-const capitalize = function () {
-  let str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-};
-
-export default function EmojisFooter(props) {
-  const {
-    customStyle,
-    customProps,
-    emojisList = dummyObject,
-    onSelect,
-    selectedTab
-  } = props;
-  const {
-    emojiProps = dummyObject
-  } = customProps || dummyObject;
-  /* External customization */
-
-  const newStyle = useMergeStyle(style, customStyle);
-  const emojiCustomStyle = useMemo(() => ({
-    emoji: newStyle.emoji
-  }), [newStyle.emoji]);
-  return /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
-    className: newStyle.footerTab,
-    isCover: false
-  }, Object.keys(emojisList).map(groupName => {
-    const emojis = emojisList[groupName];
-    const emojiName = Object.keys(emojis)[0];
-    const emoji = emojis[emojiName];
-    const id = `emoji_${emojiName}`;
-    return /*#__PURE__*/React.createElement(Box, {
-      key: id,
-      className: newStyle.tabIcon,
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Emoji, {
-      customStyle: emojiCustomStyle,
-      customTitle: capitalize(groupName),
-      emoji: emoji,
-      emojiName: emojiName,
-      id: groupName,
-      onSelect: onSelect,
-      ...emojiProps
-    }), selectedTab === groupName ? /*#__PURE__*/React.createElement("span", {
-      className: newStyle.tabLine
-    }) : null);
-  }));
-}
-EmojisFooter.propTypes = emojisFooterPropTypes;
-EmojisFooter.defaultProps = emojisFooterDefaultProps;
-EmojisFooter.displayName = 'EmojisFooter';

package/es/EmojisFooter/css/EmojisFooter.module.css

@@ -1,40 +0,0 @@
-.footerTab {
-  position: relative;
-  border-top: 1px solid var(--imlib_chat_components_emojiFooter_border_color);
-}
-
-.tabIcon {
-  /* padding: var(--zd_size10) var(--zd_size16); */
-  position: relative;
-  height: var(--zd_size35) ;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 1% ;
-}
-
-.tabLine {
-  display: inline-block;
-  position: absolute;
-  top: 0 ;
-  height: var(--zd_size2) ;
-  transition: 0.3s ease;
-  width: 100% ;
-  background-color: var(--imlib_chat_components_emojiFooter_tabLine);
-}
-
-[dir=ltr] .tabLine {
-  left: 0 ;
-}
-
-[dir=rtl] .tabLine {
-  right: 0 ;
-}
-
-.emoji {
-  width: auto ;
-  height: auto ;
-  margin: 0 ;
-  padding: 8% ;
-}

package/es/EmojisFooter/index.js

@@ -1 +0,0 @@
-export { default as EmojisFooter } from "./EmojisFooter";

package/es/EmojisFooter/props/defaultProps.js

@@ -1,7 +0,0 @@
-/** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-const emojisFooterDefaultProps = {
-  customStyle: dummyObject,
-  customProps: dummyObject
-};
-export default emojisFooterDefaultProps;

package/es/EmojisFooter/props/propTypes.js

@@ -1,12 +0,0 @@
-/** ** Libraries *** */
-import PropTypes from 'prop-types';
-const emojisFooterPropTypes = {
-  customStyle: PropTypes.object,
-  customProps: PropTypes.shape({
-    emojiProps: PropTypes.object
-  }),
-  emojisList: PropTypes.object.isRequired,
-  onSelect: PropTypes.func,
-  selectedTab: PropTypes.string
-};
-export default emojisFooterPropTypes;

package/es/EmojisHeader/EmojisHeader.js

@@ -1,65 +0,0 @@
-/** ** Libraries *** */
-import React from 'react';
-/** ** Components *** */
-
-import { Container, Box } from '@zohodesk/components/es/Layout';
-import Icon from '@zohodesk/icons/es/Icon';
-import TextBox from '@zohodesk/components/es/TextBox/TextBox';
-/** ** Hooks *** */
-
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-/** ** Constants *** */
-
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-import emojisHeaderDefaultProps from "./props/defaultProps";
-import emojisHeaderPropTypes from "./props/propTypes";
-/** ** Styles *** */
-
-import style from "./css/EmojisHeader.module.css";
-export default function EmojisHeader(props) {
-  const {
-    customStyle,
-    customProps = dummyObject,
-    searchString,
-    getRef,
-    onChange,
-    searchPlaceHolder
-  } = props;
-  const {
-    textBoxProps = dummyObject
-  } = customProps;
-  /* External customization */
-
-  const newStyle = useMergeStyle(style, customStyle);
-  return /*#__PURE__*/React.createElement(Box, {
-    className: newStyle.container
-  }, /*#__PURE__*/React.createElement(Container, {
-    align: "vertical",
-    alignBox: "row",
-    className: newStyle.emojisSearch
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: newStyle.searchIcon
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "ZD-search",
-    size: "13"
-  })), /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(TextBox, {
-    customClass: newStyle.searchInput,
-    inputRef: getRef,
-    isDisabled: false,
-    isReadOnly: false,
-    name: "emojiSearch",
-    needBorder: false,
-    onChange: onChange,
-    placeHolder: searchPlaceHolder,
-    size: "medium",
-    type: "text",
-    value: searchString,
-    variant: "default",
-    ...textBoxProps
-  }))));
-}
-EmojisHeader.propTypes = emojisHeaderPropTypes;
-EmojisHeader.defaultProps = emojisHeaderDefaultProps;
-EmojisHeader.displayName = 'EmojisHeader';

package/es/EmojisHeader/css/EmojisHeader.module.css

@@ -1,36 +0,0 @@
-.container {
-  padding: var(--zd_size10) ;
-  border-bottom: 1px solid
-    var(--imlib_chat_components_emojisHeader_border_color);
-}
-
-.emojisSearch {
-  position: relative;
-  background-color: var(--imlib_chat_components_emojisHeader_bg_color);
-}
-
-.searchInput {
-  box-sizing: border-box;
-  min-height: var(--zd_size38) ;
-  outline: 0;
-}
-
-[dir=ltr] .searchInput {
-  padding-left: var(--zd_size31) ;
-}
-
-[dir=rtl] .searchInput {
-  padding-right: var(--zd_size31) ;
-}
-
-.searchIcon {
-  position: absolute;
-}
-
-[dir=ltr] .searchIcon {
-  left: var(--zd_size10) ;
-}
-
-[dir=rtl] .searchIcon {
-  right: var(--zd_size10) ;
-}

package/es/EmojisHeader/index.js

@@ -1 +0,0 @@
-export { default as EmojisHeader } from "./EmojisHeader";

package/es/EmojisHeader/props/defaultProps.js

@@ -1,8 +0,0 @@
-/** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-const emojisHeaderDefaultProps = {
-  customStyle: dummyObject,
-  customProps: dummyObject,
-  searchPlaceHolder: 'Search...'
-};
-export default emojisHeaderDefaultProps;

package/es/EmojisHeader/props/propTypes.js

@@ -1,13 +0,0 @@
-/** ** Libraries *** */
-import PropTypes from 'prop-types';
-const emojisHeaderPropTypes = {
-  customStyle: PropTypes.object,
-  customProps: PropTypes.shape({
-    textBoxProps: PropTypes.object
-  }),
-  searchString: PropTypes.string,
-  getRef: PropTypes.func,
-  onChange: PropTypes.func,
-  searchPlaceHolder: PropTypes.string
-};
-export default emojisHeaderPropTypes;

package/es/EmojisList/EmojisList.js

@@ -1,133 +0,0 @@
-/* eslint-disable max-len */
-
-/** ** Libraries *** */
-import React, { useCallback } from 'react';
-/** ** Components *** */
-
-import Emoji from "../Emoji/Emoji";
-import EmojisEmptyState from "../EmojisEmptyState/EmojisEmptyState";
-/** ** Hooks *** */
-
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import useEmojisList from '@zohoim/chat-components-hooks/es/EmojisList/useEmojisList';
-/** ** Constants *** */
-
-import emojisListDefaultProps from "./props/defaultProps";
-import emojisListPropTypes from "./props/propTypes";
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-/** ** Methods *** */
-
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from "./css/cssJSLogic";
-/** ** Styles *** */
-
-import style from "./css/EmojisList.module.css";
-export default function EmojisList(props) {
-  const {
-    customStyle,
-    customProps,
-    searchString,
-    isShowGroupBasedList,
-    onChangeGroup,
-    getMethods,
-    onSelect,
-    selectedGroup,
-    rowType,
-    emojisList: propsEmojisList,
-    renderEmpty,
-    isShowOnlyContent
-  } = props;
-  const {
-    emojiProps = dummyObject,
-    emojisEmptyStateProps = dummyObject
-  } = customProps;
-  const {
-    emojisList,
-    setGroupRefs,
-    setContainerRef: listContainerRef,
-    emptyState,
-    isRenderEmptyState,
-    isRenderElement
-  } = useEmojisList({
-    emojisList: propsEmojisList,
-    searchString,
-    isShowGroupBasedList,
-    onChangeGroup,
-    getMethods,
-    selectedGroup,
-    isShowOnlyContent
-  });
-  const {
-    isEmpty,
-    isGroupEmpty
-  } = emptyState;
-  /* External customization */
-
-  const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-
-  const {
-    emojisListClass,
-    groupClass
-  } = cssJSLogic({
-    rowType,
-    isShowGroupBasedList,
-    isShowOnlyContent,
-    isEmpty
-  }, newStyle);
-  const renderGroup = useCallback(_ref => {
-    let {
-      groupName,
-      emojis
-    } = _ref;
-    const isEmptyGroup = isGroupEmpty[groupName];
-    return !isEmptyGroup ? /*#__PURE__*/React.createElement("div", {
-      key: groupName,
-      ref: el => {
-        setGroupRefs(el, groupName);
-      },
-      className: groupClass
-    }, isShowGroupBasedList ? /*#__PURE__*/React.createElement("div", {
-      className: newStyle.groupName
-    }, groupName) : null, Object.keys(emojis).map(emojiName => {
-      const emoji = emojis[emojiName];
-      const id = `emoji_${emojiName}`;
-      return /*#__PURE__*/React.createElement(Emoji, {
-        key: id,
-        emoji: emoji,
-        emojiName: emojiName,
-        onSelect: onSelect,
-        ...emojiProps
-      });
-    })) : null;
-  }, [emojiProps, isGroupEmpty, groupClass, isShowGroupBasedList, newStyle.groupName, onSelect, setGroupRefs]);
-  const renderDefaultEmptyState = useCallback(() => /*#__PURE__*/React.createElement(EmojisEmptyState, { ...emojisEmptyStateProps
-  }), [emojisEmptyStateProps]);
-  const renderEmptyState = useCallback(() => {
-    /* Render EmptyState */
-    if (isRenderEmptyState) {
-      const emptyState = renderHandler(renderEmpty || renderDefaultEmptyState)();
-
-      if (emptyState) {
-        return emptyState;
-      }
-
-      return null;
-    }
-
-    return null;
-  }, [renderEmpty, renderDefaultEmptyState, isRenderEmptyState]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderElement ? /*#__PURE__*/React.createElement("div", {
-    ref: listContainerRef,
-    className: emojisListClass
-  }, !isEmpty ? Object.keys(emojisList).map(groupName => {
-    const emojis = emojisList[groupName];
-    return renderGroup({
-      groupName,
-      emojis
-    });
-  }) : renderEmptyState()) : null);
-}
-EmojisList.propTypes = emojisListPropTypes;
-EmojisList.defaultProps = emojisListDefaultProps;
-EmojisList.displayName = 'EmojisList';