@zohoim/chat-components 1.0.11 → 1.1.0-beta.1

package/es/EmojiPopup/EmojiPopup.js

@@ -0,0 +1,115 @@
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Components *** */
+
+import Popup from '@zohodesk/components/es/Popup/Popup';
+import DropBox from '@zohodesk/components/es/DropBox/DropBox';
+import IconButton from '@zohodesk/dot/es/IconButton/IconButton';
+import { Container } from '@zohodesk/components/es/Layout';
+import Emojis from "../Emojis/Emojis";
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useEmojiPopup from '@zohoim/chat-components-hooks/es/EmojiPopup/useEmojiPopup';
+/** ** Constants *** */
+
+import emojiPopupDefaultProps from "./props/defaultProps";
+import emojiPopupPropTypes from "./props/propTypes";
+import { EDITOR_POPUP_PORTAL } from "../constants";
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Styles *** */
+
+import style from "./css/EmojiPopup.module.css";
+
+function EmojiPopupComp(props) {
+  const {
+    customStyle,
+    customProps,
+    popupSize,
+    defaultPopupPosition,
+    tooltip,
+    onSelect: propOnSelect,
+    needCloseOnSelect,
+    onPopupOpen,
+    onPopupClose,
+
+    /** ** Popup Props *** */
+    getTargetRef,
+    getContainerRef,
+    position,
+    togglePopup,
+    isPopupReady,
+    isPopupOpen,
+    removeClose,
+    closePopupOnly,
+    isAbsolutePositioningNeeded,
+    positionsOffset
+  } = props;
+  const {
+    iconProps = dummyObject,
+    dropBoxProps = dummyObject,
+    emojisProps = dummyObject
+  } = customProps || dummyObject;
+  const {
+    onSelect,
+    onTogglePopup
+  } = useEmojiPopup({
+    togglePopup,
+    defaultPopupPosition,
+    needCloseOnSelect,
+    closePopupOnly,
+    onSelect: propOnSelect,
+    isPopupOpen,
+    onPopupOpen,
+    onPopupClose
+  });
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const popupClass = useMemo(() => ({
+    customDropBox: newStyle.popup,
+    customMobileDropBox: newStyle.mobilePopup,
+    customDropBoxWrap: newStyle.popupWrapper,
+    customMobileDropBoxWrap: newStyle.mobilePopupWrapper
+  }), [newStyle.popup, newStyle.mobilePopup, newStyle.popupWrapper, newStyle.mobilePopupWrapper]);
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "column"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    className: newStyle.iconWrapper,
+    eleRef: getTargetRef,
+    iconClass: newStyle.icon,
+    iconName: "ZD-TT-happiness",
+    iconSize: "14",
+    isActive: isPopupOpen,
+    onClick: onTogglePopup,
+    title: tooltip,
+    ...iconProps
+  }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+    boxPosition: position,
+    customClass: popupClass,
+    customStyle: dummyObject,
+    getRef: getContainerRef,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    isActive: isPopupReady,
+    isAnimate: true,
+    isArrow: false,
+    onClick: removeClose,
+    portalId: EDITOR_POPUP_PORTAL,
+    positionsOffset: positionsOffset,
+    size: popupSize,
+    ...dropBoxProps
+  }, /*#__PURE__*/React.createElement(Emojis, {
+    onSelect: onSelect,
+    ...emojisProps
+  })) : null);
+}
+
+const EmojiPopup = Popup(EmojiPopupComp, undefined, undefined, {
+  isAbsolutePositioningNeeded: false
+});
+EmojiPopupComp.defaultProps = emojiPopupDefaultProps;
+EmojiPopupComp.propTypes = emojiPopupPropTypes;
+EmojiPopup.defaultProps = emojiPopupDefaultProps;
+EmojiPopup.propTypes = emojiPopupPropTypes;
+EmojiPopup.displayName = 'EmojiPopup';
+export default EmojiPopup;

package/es/EmojiPopup/css/EmojiPopup.module.css

@@ -0,0 +1,55 @@
+/** ** Styles *** */
+
+.emojiPopup {
+  /** ** Use this class for css customisation *** */
+}
+
+.container {
+  display: inline-block;
+}
+
+.popup {
+  /** ** Use this class for css customisation *** */
+}
+
+.popupWrapper {
+  composes: container;
+}
+
+.mobilePopup {
+  composes: container;
+}
+
+.mobilePopupWrapper {
+  composes: container;
+}
+
+.icon {
+  /* margin-right: 5px; */
+}
+
+.iconWrapper {
+  color: initial;
+}
+
+[dir=ltr] .iconWrapper {
+  margin-right: var(--zd_size5) ;
+}
+
+[dir=rtl] .iconWrapper {
+  margin-left: var(--zd_size5) ;
+}
+
+.icon :global .path1:before {
+  color: var(--imlib_chat_components_twotone_icon_bg) !important;
+  opacity: 1;
+}
+
+.icon :global .path2:before {
+  color: var(--imlib_chat_components_twotone_icon_border) !important;
+}
+
+.icon :global .path2{
+  position: relative;
+  z-index: 1;
+}

package/es/EmojiPopup/index.js

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

package/es/EmojiPopup/props/defaultProps.js

@@ -0,0 +1,11 @@
+/** ** 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

@@ -0,0 +1,21 @@
+/** ** 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

@@ -0,0 +1,81 @@
+/* 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,
+    getMethods
+  } = props;
+  const {
+    emojisListProps = dummyObject,
+    emojisHeaderProps = dummyObject,
+    emojisFooterProps = dummyObject
+  } = customProps || dummyObject;
+  const {
+    searchValue,
+    onSearch,
+    getSearchRef,
+    onChangeGroup,
+    selectedGroup,
+    getEmojisListMethods,
+    onSelect,
+    onSelectTab
+  } = useEmojis({
+    searchString,
+    isShowSearchBox,
+    needAutoFocus,
+    onSelect: propOnSelect,
+    emojisList,
+    isShowGroupBasedList,
+    getMethods
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isShowSearchBox ? /*#__PURE__*/React.createElement(EmojisHeader, {
+    getRef: getSearchRef,
+    onChange: onSearch,
+    searchPlaceHolder: searchPlaceHolder,
+    searchString: searchValue,
+    ...emojisHeaderProps
+  }) : null, /*#__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
+  }), isShowGroupBasedList ? /*#__PURE__*/React.createElement(EmojisFooter, {
+    emojisList: emojisList,
+    onSelect: onSelectTab,
+    selectedTab: selectedGroup,
+    ...emojisFooterProps
+  }) : null);
+}
+Emojis.propTypes = emojisPropTypes;
+Emojis.defaultProps = emojisDefaultProps;
+Emojis.displayName = 'Emojis';

package/es/Emojis/index.js

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

package/es/Emojis/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** 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

@@ -0,0 +1,20 @@
+/** ** 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,
+  getMethods: PropTypes.func
+};
+export default emojisPropTypes;

package/es/EmojisEmptyState/EmojisEmptyState.js

@@ -0,0 +1,50 @@
+/** ** 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

@@ -0,0 +1,18 @@
+.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

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

package/es/EmojisEmptyState/props/defaultProps.js

@@ -0,0 +1,9 @@
+/** ** 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

@@ -0,0 +1,8 @@
+/** ** 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

@@ -0,0 +1,71 @@
+/* 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

@@ -0,0 +1,40 @@
+.footerTab {
+  position: relative;
+  border-top: 1px solid var(--imlib_chat_components_common_border);
+}
+
+.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_emoji_tab_line_color);
+}
+
+[dir=ltr] .tabLine {
+  left: 0 ;
+}
+
+[dir=rtl] .tabLine {
+  right: 0 ;
+}
+
+.emoji {
+  width: auto ;
+  height: auto ;
+  margin: 0 ;
+  padding: 8% ;
+}

package/es/EmojisFooter/index.js

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

package/es/EmojisFooter/props/defaultProps.js

@@ -0,0 +1,7 @@
+/** ** 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

@@ -0,0 +1,12 @@
+/** ** 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

@@ -0,0 +1,65 @@
+/** ** 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

@@ -0,0 +1,36 @@
+.container {
+  padding: var(--zd_size10) ;
+  border-bottom: 1px solid var(--imlib_chat_components_common_border);
+}
+
+.emojisSearch {
+  position: relative;
+  background-color: var(--imlib_chat_components_emoji_popup_search_bg);
+}
+
+.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;
+  color: var(--imlib_chat_components_primary_text);
+}
+
+[dir=ltr] .searchIcon {
+  left: var(--zd_size10) ;
+}
+
+[dir=rtl] .searchIcon {
+  right: var(--zd_size10) ;
+}

package/es/EmojisHeader/index.js

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

package/es/EmojisHeader/props/defaultProps.js

@@ -0,0 +1,8 @@
+/** ** 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

@@ -0,0 +1,13 @@
+/** ** 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;