@chayns-components/emoji-input 5.0.0-beta.87 → 5.0.0-beta.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/components/emoji-picker-popup/EmojiPickerPopup.js +12 -14
  2. package/lib/components/emoji-picker-popup/EmojiPickerPopup.js.map +1 -1
  3. package/package.json +3 -3
package/lib/components/emoji-picker-popup/EmojiPickerPopup.js CHANGED
@@ -9,12 +9,12 @@ var _Icon = _interopRequireDefault(require("@chayns-components/core/lib/componen
9
9
  var _framerMotion = require("framer-motion");
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _alignment = require("../../constants/alignment");
12
- var _EmojiPicker = require("../emoji-picker/EmojiPicker.styles");
12
+ var _EmojiPicker = _interopRequireDefault(require("../emoji-picker/EmojiPicker"));
13
+ var _EmojiPicker2 = require("../emoji-picker/EmojiPicker.styles");
13
14
  var _EmojiPickerPopup = require("./EmojiPickerPopup.styles");
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
15
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
16
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
- const EmojiPicker = /*#__PURE__*/_react.default.lazy(() => Promise.resolve().then(() => _interopRequireWildcard(require('../emoji-picker/EmojiPicker'))));
17
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
18
  const EmojiPickerPopup = _ref => {
19
19
  let {
20
20
  accessToken,
@@ -51,13 +51,13 @@ const EmojiPickerPopup = _ref => {
51
51
  } = event.currentTarget.getBoundingClientRect();
52
52
  let newInternalAlignment = alignment;
53
53
  if (typeof newInternalAlignment !== 'number') {
54
- if (top < _EmojiPicker.emojiPickerSize.height + 16) {
55
- if (left < _EmojiPicker.emojiPickerSize.width + 16) {
54
+ if (top < _EmojiPicker2.emojiPickerSize.height + 16) {
55
+ if (left < _EmojiPicker2.emojiPickerSize.width + 16) {
56
56
  newInternalAlignment = _alignment.PopupAlignment.BottomRight;
57
57
  } else {
58
58
  newInternalAlignment = _alignment.PopupAlignment.BottomLeft;
59
59
  }
60
- } else if (left < _EmojiPicker.emojiPickerSize.width + 16) {
60
+ } else if (left < _EmojiPicker2.emojiPickerSize.width + 16) {
61
61
  newInternalAlignment = _alignment.PopupAlignment.TopRight;
62
62
  } else {
63
63
  newInternalAlignment = _alignment.PopupAlignment.TopLeft;
@@ -67,7 +67,7 @@ const EmojiPickerPopup = _ref => {
67
67
  switch (newInternalAlignment) {
68
68
  case _alignment.PopupAlignment.BottomLeft:
69
69
  newPosition = {
70
- left: 8 + width - _EmojiPicker.emojiPickerSize.width,
70
+ left: 8 + width - _EmojiPicker2.emojiPickerSize.width,
71
71
  top: 12 + height
72
72
  };
73
73
  break;
@@ -79,14 +79,14 @@ const EmojiPickerPopup = _ref => {
79
79
  break;
80
80
  case _alignment.PopupAlignment.TopLeft:
81
81
  newPosition = {
82
- left: 8 + width - _EmojiPicker.emojiPickerSize.width,
83
- top: -12 - _EmojiPicker.emojiPickerSize.height
82
+ left: 8 + width - _EmojiPicker2.emojiPickerSize.width,
83
+ top: -12 - _EmojiPicker2.emojiPickerSize.height
84
84
  };
85
85
  break;
86
86
  case _alignment.PopupAlignment.TopRight:
87
87
  newPosition = {
88
88
  left: -10,
89
- top: -12 - _EmojiPicker.emojiPickerSize.height
89
+ top: -12 - _EmojiPicker2.emojiPickerSize.height
90
90
  };
91
91
  break;
92
92
  default:
@@ -134,13 +134,11 @@ const EmojiPickerPopup = _ref => {
134
134
  transition: {
135
135
  type: 'tween'
136
136
  }
137
- }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
138
- fallback: /*#__PURE__*/_react.default.createElement(_EmojiPicker.StyledEmojiPicker, null, "Emojis werden geladen...")
139
- }, /*#__PURE__*/_react.default.createElement(EmojiPicker, {
137
+ }, /*#__PURE__*/_react.default.createElement(_EmojiPicker.default, {
140
138
  accessToken: accessToken,
141
139
  onSelect: onSelect,
142
140
  personId: personId
143
- })))), /*#__PURE__*/_react.default.createElement(_Icon.default, {
141
+ }))), /*#__PURE__*/_react.default.createElement(_Icon.default, {
144
142
  className: "prevent-lose-focus",
145
143
  icons: ['far fa-smile'],
146
144
  onClick: handlePopupIconClick,
package/lib/components/emoji-picker-popup/EmojiPickerPopup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EmojiPickerPopup.js","names":["_core","require","_Icon","_interopRequireDefault","_framerMotion","_react","_interopRequireWildcard","_alignment","_EmojiPicker","_EmojiPickerPopup","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPicker","React","lazy","Promise","resolve","then","EmojiPickerPopup","_ref","accessToken","alignment","onPopupVisibilityChange","onSelect","personId","internalAlignment","setInternalAlignment","useState","PopupAlignment","TopLeft","shouldShowPopup","setShouldShowPopup","position","setPosition","contentRef","useRef","handleHide","useCallback","handleDocumentClick","event","_contentRef$current","current","contains","target","preventDefault","stopPropagation","handlePopupIconClick","height","left","top","width","currentTarget","getBoundingClientRect","newInternalAlignment","emojiPickerSize","BottomRight","BottomLeft","TopRight","newPosition","useEffect","document","addEventListener","window","removeEventListener","exitAndInitialY","createElement","LazyMotionWrapper","StyledEmojiPickerPopup","AnimatePresence","initial","StyledMotionEmojiPickerPopupContent","animate","opacity","y","exit","ref","style","transition","type","Suspense","fallback","StyledEmojiPicker","className","icons","onClick","size","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import { LazyMotionWrapper } from '@chayns-components/core';\nimport Icon from '@chayns-components/core/lib/components/icon/Icon';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, Suspense, useCallback, useEffect, useRef, useState } from 'react';\nimport { PopupAlignment } from '../../constants/alignment';\nimport { emojiPickerSize, StyledEmojiPicker } from '../emoji-picker/EmojiPicker.styles';\nimport {\n StyledEmojiPickerPopup,\n StyledMotionEmojiPickerPopupContent,\n} from './EmojiPickerPopup.styles';\n\nconst EmojiPicker = React.lazy(() => import('../emoji-picker/EmojiPicker'));\n\nexport type EmojiPickerPopupProps = {\n /**\n * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n */\n accessToken?: string;\n /**\n * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n * value.\n */\n alignment?: PopupAlignment;\n /**\n * Function that is executed when the visibility of the popup changes.\n * @param {boolean} isVisible - Whether the popup is visible or not\n */\n onPopupVisibilityChange?: (isVisible: boolean) => void;\n /**\n * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n */\n personId?: string;\n /**\n * Function executed when an emoji is selected in the popup\n * @param {string} emoji - Emoji that was selected\n */\n onSelect: (emoji: string) => void;\n};\n\nexport type PopupPosition = {\n bottom?: number;\n left?: number;\n right?: number;\n top?: number;\n};\n\nconst EmojiPickerPopup: FC<EmojiPickerPopupProps> = ({\n accessToken,\n alignment,\n onPopupVisibilityChange,\n onSelect,\n personId,\n}) => {\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft\n );\n const [shouldShowPopup, setShouldShowPopup] = useState(false);\n const [position, setPosition] = useState({} as PopupPosition);\n\n const contentRef = useRef<HTMLDivElement>(null);\n\n const handleHide = useCallback(() => {\n setShouldShowPopup(false);\n }, []);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!contentRef.current?.contains(event.target as Node)) {\n event.preventDefault();\n event.stopPropagation();\n\n handleHide();\n }\n },\n [handleHide]\n );\n\n const handlePopupIconClick = useCallback(\n (event: MouseEvent<HTMLSpanElement>) => {\n if (shouldShowPopup) {\n setShouldShowPopup(false);\n\n return;\n }\n\n const { height, left, top, width } = event.currentTarget.getBoundingClientRect();\n\n let newInternalAlignment: PopupAlignment | undefined = alignment;\n\n if (typeof newInternalAlignment !== 'number') {\n if (top < emojiPickerSize.height + 16) {\n if (left < emojiPickerSize.width + 16) {\n newInternalAlignment = PopupAlignment.BottomRight;\n } else {\n newInternalAlignment = PopupAlignment.BottomLeft;\n }\n } else if (left < emojiPickerSize.width + 16) {\n newInternalAlignment = PopupAlignment.TopRight;\n } else {\n newInternalAlignment = PopupAlignment.TopLeft;\n }\n }\n\n let newPosition: PopupPosition = {};\n\n switch (newInternalAlignment) {\n case PopupAlignment.BottomLeft:\n newPosition = { left: 8 + width - emojiPickerSize.width, top: 12 + height };\n break;\n case PopupAlignment.BottomRight:\n newPosition = { left: -10, top: 12 + height };\n break;\n case PopupAlignment.TopLeft:\n newPosition = {\n left: 8 + width - emojiPickerSize.width,\n top: -12 - emojiPickerSize.height,\n };\n break;\n case PopupAlignment.TopRight:\n newPosition = { left: -10, top: -12 - emojiPickerSize.height };\n break;\n default:\n break;\n }\n\n setInternalAlignment(newInternalAlignment);\n setPosition(newPosition);\n setShouldShowPopup(true);\n },\n [alignment, shouldShowPopup]\n );\n\n useEffect(() => {\n if (shouldShowPopup) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, shouldShowPopup]);\n\n useEffect(() => {\n if (typeof onPopupVisibilityChange === 'function') {\n onPopupVisibilityChange(shouldShowPopup);\n }\n }, [onPopupVisibilityChange, shouldShowPopup]);\n\n const exitAndInitialY =\n internalAlignment === PopupAlignment.TopLeft ||\n internalAlignment === PopupAlignment.TopRight\n ? -16\n : 16;\n\n return (\n <LazyMotionWrapper>\n <StyledEmojiPickerPopup>\n <AnimatePresence initial={false}>\n {shouldShowPopup && (\n <StyledMotionEmojiPickerPopupContent\n alignment={internalAlignment}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n key=\"emojiPickerPopupContent\"\n ref={contentRef}\n style={position}\n transition={{ type: 'tween' }}\n >\n <Suspense\n fallback={\n <StyledEmojiPicker>Emojis werden geladen...</StyledEmojiPicker>\n }\n >\n <EmojiPicker\n accessToken={accessToken}\n onSelect={onSelect}\n personId={personId}\n />\n </Suspense>\n </StyledMotionEmojiPickerPopupContent>\n )}\n </AnimatePresence>\n <Icon\n className=\"prevent-lose-focus\"\n icons={['far fa-smile']}\n onClick={handlePopupIconClick}\n size={18}\n />\n </StyledEmojiPickerPopup>\n </LazyMotionWrapper>\n );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"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"}
1
+ {"version":3,"file":"EmojiPickerPopup.js","names":["_core","require","_Icon","_interopRequireDefault","_framerMotion","_react","_interopRequireWildcard","_alignment","_EmojiPicker","_EmojiPicker2","_EmojiPickerPopup","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPickerPopup","_ref","accessToken","alignment","onPopupVisibilityChange","onSelect","personId","internalAlignment","setInternalAlignment","useState","PopupAlignment","TopLeft","shouldShowPopup","setShouldShowPopup","position","setPosition","contentRef","useRef","handleHide","useCallback","handleDocumentClick","event","_contentRef$current","current","contains","target","preventDefault","stopPropagation","handlePopupIconClick","height","left","top","width","currentTarget","getBoundingClientRect","newInternalAlignment","emojiPickerSize","BottomRight","BottomLeft","TopRight","newPosition","useEffect","document","addEventListener","window","removeEventListener","exitAndInitialY","createElement","LazyMotionWrapper","StyledEmojiPickerPopup","AnimatePresence","initial","StyledMotionEmojiPickerPopupContent","animate","opacity","y","exit","ref","style","transition","type","className","icons","onClick","size","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import { LazyMotionWrapper } from '@chayns-components/core';\nimport Icon from '@chayns-components/core/lib/components/icon/Icon';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { PopupAlignment } from '../../constants/alignment';\nimport EmojiPicker from '../emoji-picker/EmojiPicker';\nimport { emojiPickerSize } from '../emoji-picker/EmojiPicker.styles';\nimport {\n StyledEmojiPickerPopup,\n StyledMotionEmojiPickerPopupContent,\n} from './EmojiPickerPopup.styles';\n\nexport type EmojiPickerPopupProps = {\n /**\n * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n */\n accessToken?: string;\n /**\n * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n * value.\n */\n alignment?: PopupAlignment;\n /**\n * Function that is executed when the visibility of the popup changes.\n * @param {boolean} isVisible - Whether the popup is visible or not\n */\n onPopupVisibilityChange?: (isVisible: boolean) => void;\n /**\n * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n */\n personId?: string;\n /**\n * Function executed when an emoji is selected in the popup\n * @param {string} emoji - Emoji that was selected\n */\n onSelect: (emoji: string) => void;\n};\n\nexport type PopupPosition = {\n bottom?: number;\n left?: number;\n right?: number;\n top?: number;\n};\n\nconst EmojiPickerPopup: FC<EmojiPickerPopupProps> = ({\n accessToken,\n alignment,\n onPopupVisibilityChange,\n onSelect,\n personId,\n}) => {\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft\n );\n const [shouldShowPopup, setShouldShowPopup] = useState(false);\n const [position, setPosition] = useState({} as PopupPosition);\n\n const contentRef = useRef<HTMLDivElement>(null);\n\n const handleHide = useCallback(() => {\n setShouldShowPopup(false);\n }, []);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!contentRef.current?.contains(event.target as Node)) {\n event.preventDefault();\n event.stopPropagation();\n\n handleHide();\n }\n },\n [handleHide]\n );\n\n const handlePopupIconClick = useCallback(\n (event: MouseEvent<HTMLSpanElement>) => {\n if (shouldShowPopup) {\n setShouldShowPopup(false);\n\n return;\n }\n\n const { height, left, top, width } = event.currentTarget.getBoundingClientRect();\n\n let newInternalAlignment: PopupAlignment | undefined = alignment;\n\n if (typeof newInternalAlignment !== 'number') {\n if (top < emojiPickerSize.height + 16) {\n if (left < emojiPickerSize.width + 16) {\n newInternalAlignment = PopupAlignment.BottomRight;\n } else {\n newInternalAlignment = PopupAlignment.BottomLeft;\n }\n } else if (left < emojiPickerSize.width + 16) {\n newInternalAlignment = PopupAlignment.TopRight;\n } else {\n newInternalAlignment = PopupAlignment.TopLeft;\n }\n }\n\n let newPosition: PopupPosition = {};\n\n switch (newInternalAlignment) {\n case PopupAlignment.BottomLeft:\n newPosition = { left: 8 + width - emojiPickerSize.width, top: 12 + height };\n break;\n case PopupAlignment.BottomRight:\n newPosition = { left: -10, top: 12 + height };\n break;\n case PopupAlignment.TopLeft:\n newPosition = {\n left: 8 + width - emojiPickerSize.width,\n top: -12 - emojiPickerSize.height,\n };\n break;\n case PopupAlignment.TopRight:\n newPosition = { left: -10, top: -12 - emojiPickerSize.height };\n break;\n default:\n break;\n }\n\n setInternalAlignment(newInternalAlignment);\n setPosition(newPosition);\n setShouldShowPopup(true);\n },\n [alignment, shouldShowPopup]\n );\n\n useEffect(() => {\n if (shouldShowPopup) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, shouldShowPopup]);\n\n useEffect(() => {\n if (typeof onPopupVisibilityChange === 'function') {\n onPopupVisibilityChange(shouldShowPopup);\n }\n }, [onPopupVisibilityChange, shouldShowPopup]);\n\n const exitAndInitialY =\n internalAlignment === PopupAlignment.TopLeft ||\n internalAlignment === PopupAlignment.TopRight\n ? -16\n : 16;\n\n return (\n <LazyMotionWrapper>\n <StyledEmojiPickerPopup>\n <AnimatePresence initial={false}>\n {shouldShowPopup && (\n <StyledMotionEmojiPickerPopupContent\n alignment={internalAlignment}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n key=\"emojiPickerPopupContent\"\n ref={contentRef}\n style={position}\n transition={{ type: 'tween' }}\n >\n <EmojiPicker\n accessToken={accessToken}\n onSelect={onSelect}\n personId={personId}\n />\n </StyledMotionEmojiPickerPopupContent>\n )}\n </AnimatePresence>\n <Icon\n className=\"prevent-lose-focus\"\n icons={['far fa-smile']}\n onClick={handlePopupIconClick}\n size={18}\n />\n </StyledEmojiPickerPopup>\n </LazyMotionWrapper>\n );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/emoji-input",
3
- "version": "5.0.0-beta.87",
3
+ "version": "5.0.0-beta.89",
4
4
  "description": "Input field that supports HTML elements and emojis",
5
5
  "keywords": [
6
6
  "chayns",
@@ -52,7 +52,7 @@
52
52
  "typescript": "^4.9.5"
53
53
  },
54
54
  "dependencies": {
55
- "@chayns-components/core": "^5.0.0-beta.86",
55
+ "@chayns-components/core": "^5.0.0-beta.89",
56
56
  "@chayns/colors": "^2.0.0",
57
57
  "clsx": "^1.2.1",
58
58
  "emojilib": "^3.0.8",
@@ -68,5 +68,5 @@
68
68
  "publishConfig": {
69
69
  "access": "public"
70
70
  },
71
- "gitHead": "4a8c401cc875dc518dc990e2e5ac87fdf8008cda"
71
+ "gitHead": "6762ce977ccf926ce6a2e0e0ae513d5709395758"
72
72
  }