@chayns-components/emoji-input 5.0.0-beta.627 → 5.0.0-beta.630
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.
- package/lib/cjs/api/item-storage/get.js.map +1 -1
- package/lib/cjs/api/item-storage/put.js.map +1 -1
- package/lib/cjs/components/emoji-input/EmojiInput.js +1 -1
- package/lib/cjs/components/emoji-input/EmojiInput.js.map +1 -1
- package/lib/cjs/components/emoji-input/EmojiInput.styles.js.map +1 -1
- package/lib/cjs/components/emoji-input/prefix-element/PrefixElement.styles.js.map +1 -1
- package/lib/cjs/components/emoji-picker/EmojiPicker.js +1 -1
- package/lib/cjs/components/emoji-picker/EmojiPicker.js.map +1 -1
- package/lib/cjs/components/emoji-picker/EmojiPicker.styles.js +1 -1
- package/lib/cjs/components/emoji-picker/EmojiPicker.styles.js.map +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.js +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.js.map +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.js +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.js.map +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.js +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.js.map +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.js.map +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.js +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.js.map +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.styles.js +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.styles.js.map +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.js +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.js.map +1 -1
- package/lib/cjs/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.js.map +1 -1
- package/lib/cjs/components/emoji-picker-popup/EmojiPickerPopup.js +1 -1
- package/lib/cjs/components/emoji-picker-popup/EmojiPickerPopup.js.map +1 -1
- package/lib/cjs/components/emoji-picker-popup/EmojiPickerPopup.styles.js.map +1 -1
- package/lib/cjs/constants/emoji.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/utils/emoji.js +1 -1
- package/lib/cjs/utils/emoji.js.map +1 -1
- package/lib/cjs/utils/font.js.map +1 -1
- package/lib/cjs/utils/text.js.map +1 -1
- package/lib/esm/api/item-storage/get.js.map +1 -1
- package/lib/esm/api/item-storage/put.js.map +1 -1
- package/lib/esm/components/emoji-input/EmojiInput.styles.js.map +1 -1
- package/lib/esm/components/emoji-input/prefix-element/PrefixElement.styles.js.map +1 -1
- package/lib/esm/components/emoji-picker/EmojiPicker.styles.js.map +1 -1
- package/lib/esm/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.js.map +1 -1
- package/lib/esm/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.js.map +1 -1
- package/lib/esm/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.js.map +1 -1
- package/lib/esm/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.styles.js.map +1 -1
- package/lib/esm/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.js.map +1 -1
- package/lib/esm/components/emoji-picker-popup/EmojiPickerPopup.styles.js.map +1 -1
- package/lib/esm/constants/emoji.js.map +1 -1
- package/lib/esm/utils/font.js.map +1 -1
- package/lib/esm/utils/text.js.map +1 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiPickerEmojis.js","names":["_chaynsApi","require","_emojilib","_interopRequireDefault","_react","_interopRequireWildcard","_dataByEmoji","_dataByGroup","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","EmojiPickerEmojis","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","useState","focusedIndex","setFocusedIndex","emojiRef","useRef","shouldPreventEmojiControlsRef","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","browser","getDevice","addOrUpdateEmojiInHistory","historyEmojis","useEmojiHistory","handlePopupVisibilityChange","useCallback","isVisible","current","handleSelect","emoji","name","skin_tone_support","index","useEffect","container","scrollTop","handleKeyDown","event","key","_emojiRef$current","preventDefault","children","length","newIndex","ctrlKey","prevElement","tabIndex","newElement","containerRect","getBoundingClientRect","elementRect","bottom","top","_emojiRef$current2","dataset","skinToneSupport","document","addEventListener","removeEventListener","handleRightClick","emojis","useMemo","_emojiCategories$find","trim","lowerSearchString","toLowerCase","searchResults","entries","emojiList","forEach","keywords","emojiLib","germanKeywords","germanEmojiLib","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","map","emojiCategories","find","slug","shouldShowNoContentInfo","StyledEmojiPickerEmojis","$browser","$shouldPreventScroll","$shouldShowNoContentInfo","ref","StyledEmojiPickerEmojisNoContentInfo","displayName","_default","exports"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport emojiLib from 'emojilib';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport emojiList from 'unicode-emoji-json/data-by-emoji.json';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport germanEmojiLib from '../../../constants/emoji-de-DE.json';\nimport { useEmojiHistory } from '../../../hooks/emojiHistory';\nimport type { Category } from '../../../types/category';\nimport Emoji from './emoji/Emoji';\nimport {\n StyledEmojiPickerEmojis,\n StyledEmojiPickerEmojisNoContentInfo,\n} from './EmojiPickerEmojis.styles';\n\nexport type EmojiPickerEmojisProps = {\n accessToken?: string;\n onSelect: (emoji: string) => void;\n personId?: string;\n searchString: string;\n selectedCategory: Category;\n};\n\nconst EmojiPickerEmojis: FC<EmojiPickerEmojisProps> = ({\n accessToken,\n onSelect,\n personId,\n searchString,\n selectedCategory,\n}) => {\n const [shouldPreventScroll, setShouldPreventScroll] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState<number>(0);\n\n const emojiRef = useRef<HTMLDivElement>(null);\n const shouldPreventEmojiControlsRef = useRef(false);\n const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = useState(false);\n\n const { browser } = getDevice();\n\n const { addOrUpdateEmojiInHistory, historyEmojis } = useEmojiHistory({\n accessToken,\n personId,\n selectedCategory,\n });\n\n const handlePopupVisibilityChange = useCallback((isVisible: boolean) => {\n setShouldShowSkinTonePopup(isVisible);\n shouldPreventEmojiControlsRef.current = isVisible;\n setShouldPreventScroll(isVisible);\n }, []);\n\n const handleSelect = useCallback(\n ({\n emoji,\n name,\n skin_tone_support,\n index,\n }: {\n emoji: string;\n name: string;\n skin_tone_support: boolean;\n index?: number;\n }) => {\n onSelect(emoji);\n\n if (index) {\n setFocusedIndex(index);\n }\n\n void addOrUpdateEmojiInHistory({ emoji, name, skin_tone_support });\n },\n [addOrUpdateEmojiInHistory, onSelect],\n );\n\n useEffect(() => {\n if (selectedCategory) {\n setFocusedIndex(0);\n\n const container = emojiRef.current;\n\n if (!container) {\n return;\n }\n\n container.scrollTop = 0;\n }\n }, [selectedCategory]);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n !shouldPreventEmojiControlsRef.current &&\n (event.key === 'ArrowUp' ||\n event.key === 'ArrowDown' ||\n event.key === 'ArrowLeft' ||\n event.key === 'ArrowRight')\n ) {\n event.preventDefault();\n const children = emojiRef.current?.children;\n if (children && children.length > 0) {\n const container = emojiRef.current;\n let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n if (event.ctrlKey) {\n return;\n }\n\n if (event.key === 'ArrowUp') {\n newIndex = (newIndex - 6) % children.length;\n } else if (event.key === 'ArrowDown') {\n newIndex = (newIndex + 6) % children.length;\n } else if (event.key === 'ArrowLeft') {\n newIndex = (newIndex - 1) % children.length;\n } else if (event.key === 'ArrowRight') {\n newIndex = (newIndex + 1) % children.length;\n }\n\n // remove focus from the old element\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n if (newIndex < 0) {\n newIndex = children.length - 1;\n } else if (newIndex > children.length - 1) {\n newIndex = 0;\n }\n\n setFocusedIndex(newIndex);\n\n // Set focus to the element\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n\n const containerRect = container.getBoundingClientRect();\n const elementRect = newElement.getBoundingClientRect();\n\n if (elementRect.bottom > containerRect.bottom) {\n container.scrollTop += elementRect.bottom - containerRect.bottom;\n } else if (elementRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - elementRect.top;\n }\n }\n } else if (\n event.key === 'Enter' &&\n !shouldPreventEmojiControlsRef.current &&\n focusedIndex !== null\n ) {\n if (event.ctrlKey) {\n setShouldShowSkinTonePopup(true);\n\n return;\n }\n\n const { dataset } = emojiRef.current?.children[focusedIndex] as HTMLDivElement;\n\n const { emoji, name, skinToneSupport } = dataset;\n\n if (!emoji || !name || !skinToneSupport) {\n return;\n }\n\n handleSelect({ emoji, name, skin_tone_support: skinToneSupport === 'true' });\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSelect]);\n\n const handleRightClick = useCallback((index: number) => {\n setFocusedIndex(index);\n }, []);\n\n const emojis = useMemo(() => {\n if (searchString.trim() !== '') {\n const lowerSearchString = searchString.toLowerCase();\n\n const searchResults: JSX.Element[] = [];\n\n Object.entries(emojiList).forEach(([emoji, { name, skin_tone_support }], index) => {\n const keywords = (emojiLib as { [key: string]: string[] })[emoji] as\n | string[]\n | undefined;\n\n const germanKeywords = (germanEmojiLib as { [key: string]: string[] })[emoji] as\n | string[]\n | undefined;\n\n if (\n name.includes(lowerSearchString) ||\n keywords?.some((keyword) => keyword.includes(lowerSearchString)) ||\n germanKeywords?.some((keyword) => keyword.includes(lowerSearchString))\n ) {\n searchResults.push(\n <Emoji\n shouldShowSkinTonePopup={\n index === focusedIndex &&\n skin_tone_support &&\n shouldShowSkinTonePopup\n }\n isSelected={index === focusedIndex}\n emoji={emoji}\n index={index}\n onRightClick={handleRightClick}\n isSkinToneSupported={skin_tone_support}\n key={name}\n name={name}\n onPopupVisibilityChange={handlePopupVisibilityChange}\n onSelect={(e) =>\n handleSelect({ emoji: e, name, skin_tone_support, index })\n }\n />,\n );\n }\n });\n\n return searchResults;\n }\n\n if (selectedCategory === 'history') {\n return historyEmojis.map(({ emoji, name, skin_tone_support }, index) => (\n <Emoji\n isSelected={index === focusedIndex}\n shouldShowSkinTonePopup={\n index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n }\n emoji={emoji}\n name={name}\n key={name}\n index={index}\n onRightClick={handleRightClick}\n onPopupVisibilityChange={handlePopupVisibilityChange}\n onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n isSkinToneSupported={false}\n />\n ));\n }\n\n return emojiCategories\n .find(({ slug }) => slug === selectedCategory)\n ?.emojis.map(({ emoji, name, skin_tone_support }, index) => (\n <Emoji\n isSelected={index === focusedIndex}\n shouldShowSkinTonePopup={\n index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n }\n emoji={emoji}\n name={name}\n index={index}\n onRightClick={handleRightClick}\n isSkinToneSupported={skin_tone_support}\n key={name}\n onPopupVisibilityChange={handlePopupVisibilityChange}\n onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n />\n ));\n }, [\n searchString,\n selectedCategory,\n focusedIndex,\n shouldShowSkinTonePopup,\n handleRightClick,\n handlePopupVisibilityChange,\n handleSelect,\n historyEmojis,\n ]);\n\n const shouldShowNoContentInfo = !emojis || emojis.length === 0;\n\n return (\n <StyledEmojiPickerEmojis\n $browser={browser?.name}\n $shouldPreventScroll={shouldPreventScroll}\n $shouldShowNoContentInfo={shouldShowNoContentInfo}\n ref={emojiRef}\n >\n {emojis}\n {shouldShowNoContentInfo && (\n <StyledEmojiPickerEmojisNoContentInfo>\n Hier werden die zuletzt verwendeten Emojis angezeigt, die über diese Auswahl\n gewählt wurden.\n </StyledEmojiPickerEmojisNoContentInfo>\n )}\n </StyledEmojiPickerEmojis>\n );\n};\n\nEmojiPickerEmojis.displayName = 'EmojiPickerEmojis';\n\nexport default EmojiPickerEmojis;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"EmojiPickerEmojis.js","names":["_chaynsApi","require","_emojilib","_interopRequireDefault","_react","_interopRequireWildcard","_dataByEmoji","_dataByGroup","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","EmojiPickerEmojis","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","useState","focusedIndex","setFocusedIndex","emojiRef","useRef","shouldPreventEmojiControlsRef","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","browser","getDevice","addOrUpdateEmojiInHistory","historyEmojis","useEmojiHistory","handlePopupVisibilityChange","useCallback","isVisible","current","handleSelect","emoji","name","skin_tone_support","index","useEffect","container","scrollTop","handleKeyDown","event","key","_emojiRef$current","preventDefault","children","length","newIndex","ctrlKey","prevElement","tabIndex","newElement","containerRect","getBoundingClientRect","elementRect","bottom","top","_emojiRef$current2","dataset","skinToneSupport","document","addEventListener","removeEventListener","handleRightClick","emojis","useMemo","_emojiCategories$find","trim","lowerSearchString","toLowerCase","searchResults","entries","emojiList","forEach","keywords","emojiLib","germanKeywords","germanEmojiLib","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","map","emojiCategories","find","slug","shouldShowNoContentInfo","StyledEmojiPickerEmojis","$browser","$shouldPreventScroll","$shouldShowNoContentInfo","ref","StyledEmojiPickerEmojisNoContentInfo","displayName","_default","exports"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport emojiLib from 'emojilib';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport emojiList from 'unicode-emoji-json/data-by-emoji.json';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport germanEmojiLib from '../../../constants/emoji-de-DE.json';\nimport { useEmojiHistory } from '../../../hooks/emojiHistory';\nimport type { Category } from '../../../types/category';\nimport Emoji from './emoji/Emoji';\nimport {\n StyledEmojiPickerEmojis,\n StyledEmojiPickerEmojisNoContentInfo,\n} from './EmojiPickerEmojis.styles';\n\nexport type EmojiPickerEmojisProps = {\n accessToken?: string;\n onSelect: (emoji: string) => void;\n personId?: string;\n searchString: string;\n selectedCategory: Category;\n};\n\nconst EmojiPickerEmojis: FC<EmojiPickerEmojisProps> = ({\n accessToken,\n onSelect,\n personId,\n searchString,\n selectedCategory,\n}) => {\n const [shouldPreventScroll, setShouldPreventScroll] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState<number>(0);\n\n const emojiRef = useRef<HTMLDivElement>(null);\n const shouldPreventEmojiControlsRef = useRef(false);\n const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = useState(false);\n\n const { browser } = getDevice();\n\n const { addOrUpdateEmojiInHistory, historyEmojis } = useEmojiHistory({\n accessToken,\n personId,\n selectedCategory,\n });\n\n const handlePopupVisibilityChange = useCallback((isVisible: boolean) => {\n setShouldShowSkinTonePopup(isVisible);\n shouldPreventEmojiControlsRef.current = isVisible;\n setShouldPreventScroll(isVisible);\n }, []);\n\n const handleSelect = useCallback(\n ({\n emoji,\n name,\n skin_tone_support,\n index,\n }: {\n emoji: string;\n name: string;\n skin_tone_support: boolean;\n index?: number;\n }) => {\n onSelect(emoji);\n\n if (index) {\n setFocusedIndex(index);\n }\n\n void addOrUpdateEmojiInHistory({ emoji, name, skin_tone_support });\n },\n [addOrUpdateEmojiInHistory, onSelect],\n );\n\n useEffect(() => {\n if (selectedCategory) {\n setFocusedIndex(0);\n\n const container = emojiRef.current;\n\n if (!container) {\n return;\n }\n\n container.scrollTop = 0;\n }\n }, [selectedCategory]);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n !shouldPreventEmojiControlsRef.current &&\n (event.key === 'ArrowUp' ||\n event.key === 'ArrowDown' ||\n event.key === 'ArrowLeft' ||\n event.key === 'ArrowRight')\n ) {\n event.preventDefault();\n const children = emojiRef.current?.children;\n if (children && children.length > 0) {\n const container = emojiRef.current;\n let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n if (event.ctrlKey) {\n return;\n }\n\n if (event.key === 'ArrowUp') {\n newIndex = (newIndex - 6) % children.length;\n } else if (event.key === 'ArrowDown') {\n newIndex = (newIndex + 6) % children.length;\n } else if (event.key === 'ArrowLeft') {\n newIndex = (newIndex - 1) % children.length;\n } else if (event.key === 'ArrowRight') {\n newIndex = (newIndex + 1) % children.length;\n }\n\n // remove focus from the old element\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n if (newIndex < 0) {\n newIndex = children.length - 1;\n } else if (newIndex > children.length - 1) {\n newIndex = 0;\n }\n\n setFocusedIndex(newIndex);\n\n // Set focus to the element\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n\n const containerRect = container.getBoundingClientRect();\n const elementRect = newElement.getBoundingClientRect();\n\n if (elementRect.bottom > containerRect.bottom) {\n container.scrollTop += elementRect.bottom - containerRect.bottom;\n } else if (elementRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - elementRect.top;\n }\n }\n } else if (\n event.key === 'Enter' &&\n !shouldPreventEmojiControlsRef.current &&\n focusedIndex !== null\n ) {\n if (event.ctrlKey) {\n setShouldShowSkinTonePopup(true);\n\n return;\n }\n\n const { dataset } = emojiRef.current?.children[focusedIndex] as HTMLDivElement;\n\n const { emoji, name, skinToneSupport } = dataset;\n\n if (!emoji || !name || !skinToneSupport) {\n return;\n }\n\n handleSelect({ emoji, name, skin_tone_support: skinToneSupport === 'true' });\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSelect]);\n\n const handleRightClick = useCallback((index: number) => {\n setFocusedIndex(index);\n }, []);\n\n const emojis = useMemo(() => {\n if (searchString.trim() !== '') {\n const lowerSearchString = searchString.toLowerCase();\n\n const searchResults: JSX.Element[] = [];\n\n Object.entries(emojiList).forEach(([emoji, { name, skin_tone_support }], index) => {\n const keywords = (emojiLib as { [key: string]: string[] })[emoji] as\n | string[]\n | undefined;\n\n const germanKeywords = (germanEmojiLib as { [key: string]: string[] })[emoji] as\n | string[]\n | undefined;\n\n if (\n name.includes(lowerSearchString) ||\n keywords?.some((keyword) => keyword.includes(lowerSearchString)) ||\n germanKeywords?.some((keyword) => keyword.includes(lowerSearchString))\n ) {\n searchResults.push(\n <Emoji\n shouldShowSkinTonePopup={\n index === focusedIndex &&\n skin_tone_support &&\n shouldShowSkinTonePopup\n }\n isSelected={index === focusedIndex}\n emoji={emoji}\n index={index}\n onRightClick={handleRightClick}\n isSkinToneSupported={skin_tone_support}\n key={name}\n name={name}\n onPopupVisibilityChange={handlePopupVisibilityChange}\n onSelect={(e) =>\n handleSelect({ emoji: e, name, skin_tone_support, index })\n }\n />,\n );\n }\n });\n\n return searchResults;\n }\n\n if (selectedCategory === 'history') {\n return historyEmojis.map(({ emoji, name, skin_tone_support }, index) => (\n <Emoji\n isSelected={index === focusedIndex}\n shouldShowSkinTonePopup={\n index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n }\n emoji={emoji}\n name={name}\n key={name}\n index={index}\n onRightClick={handleRightClick}\n onPopupVisibilityChange={handlePopupVisibilityChange}\n onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n isSkinToneSupported={false}\n />\n ));\n }\n\n return emojiCategories\n .find(({ slug }) => slug === selectedCategory)\n ?.emojis.map(({ emoji, name, skin_tone_support }, index) => (\n <Emoji\n isSelected={index === focusedIndex}\n shouldShowSkinTonePopup={\n index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n }\n emoji={emoji}\n name={name}\n index={index}\n onRightClick={handleRightClick}\n isSkinToneSupported={skin_tone_support}\n key={name}\n onPopupVisibilityChange={handlePopupVisibilityChange}\n onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n />\n ));\n }, [\n searchString,\n selectedCategory,\n focusedIndex,\n shouldShowSkinTonePopup,\n handleRightClick,\n handlePopupVisibilityChange,\n handleSelect,\n historyEmojis,\n ]);\n\n const shouldShowNoContentInfo = !emojis || emojis.length === 0;\n\n return (\n <StyledEmojiPickerEmojis\n $browser={browser?.name}\n $shouldPreventScroll={shouldPreventScroll}\n $shouldShowNoContentInfo={shouldShowNoContentInfo}\n ref={emojiRef}\n >\n {emojis}\n {shouldShowNoContentInfo && (\n <StyledEmojiPickerEmojisNoContentInfo>\n Hier werden die zuletzt verwendeten Emojis angezeigt, die über diese Auswahl\n gewählt wurden.\n </StyledEmojiPickerEmojisNoContentInfo>\n )}\n </StyledEmojiPickerEmojis>\n );\n};\n\nEmojiPickerEmojis.displayName = 'EmojiPickerEmojis';\n\nexport default EmojiPickerEmojis;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiPickerEmojis.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledEmojiPickerEmojis","exports","styled","div","$shouldShowNoContentInfo","$shouldPreventScroll","css","$browser","theme","StyledEmojiPickerEmojisNoContentInfo"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { Browser } from 'detect-browser';\nimport styled, { css } from 'styled-components';\n\ntype StyledEmojiPickerEmojisProps = WithTheme<{\n $shouldPreventScroll: boolean;\n $shouldShowNoContentInfo: boolean;\n $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledEmojiPickerEmojis = styled.div<StyledEmojiPickerEmojisProps>`\n display: ${({ $shouldShowNoContentInfo }) => ($shouldShowNoContentInfo ? 'flex' : 'grid')};\n flex: 1 1 auto;\n grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));\n grid-template-rows: min-content;\n overflow-y: ${({ $shouldPreventScroll }) => ($shouldPreventScroll ? 'hidden' : 'scroll')};\n padding: 5px 0 5px 5px;\n position: relative;\n width: 100%;\n\n ${({ $shouldShowNoContentInfo }) =>\n $shouldShowNoContentInfo &&\n css`\n align-items: center;\n `}\n\n ${({ $shouldPreventScroll }) =>\n $shouldPreventScroll &&\n css`\n padding-right: 5px;\n `}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledEmojiPickerEmojisProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\nexport const StyledEmojiPickerEmojisNoContentInfo = styled.div`\n font-size: 85%;\n opacity: 0.85;\n padding: 0 12.5%;\n text-align: center;\n`;\n"],"mappings":";;;;;;AAEA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQzC,MAAMW,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAGE,yBAAM,CAACC,
|
|
1
|
+
{"version":3,"file":"EmojiPickerEmojis.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledEmojiPickerEmojis","exports","styled","div","$shouldShowNoContentInfo","$shouldPreventScroll","css","$browser","theme","StyledEmojiPickerEmojisNoContentInfo"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { Browser } from 'detect-browser';\nimport styled, { css } from 'styled-components';\n\ntype StyledEmojiPickerEmojisProps = WithTheme<{\n $shouldPreventScroll: boolean;\n $shouldShowNoContentInfo: boolean;\n $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledEmojiPickerEmojis = styled.div<StyledEmojiPickerEmojisProps>`\n display: ${({ $shouldShowNoContentInfo }) => ($shouldShowNoContentInfo ? 'flex' : 'grid')};\n flex: 1 1 auto;\n grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));\n grid-template-rows: min-content;\n overflow-y: ${({ $shouldPreventScroll }) => ($shouldPreventScroll ? 'hidden' : 'scroll')};\n padding: 5px 0 5px 5px;\n position: relative;\n width: 100%;\n\n ${({ $shouldShowNoContentInfo }) =>\n $shouldShowNoContentInfo &&\n css`\n align-items: center;\n `}\n\n ${({ $shouldPreventScroll }) =>\n $shouldPreventScroll &&\n css`\n padding-right: 5px;\n `}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledEmojiPickerEmojisProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\nexport const StyledEmojiPickerEmojisNoContentInfo = styled.div`\n font-size: 85%;\n opacity: 0.85;\n padding: 0 12.5%;\n text-align: center;\n`;\n"],"mappings":";;;;;;AAEA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQzC,MAAMW,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAGE,yBAAM,CAACC,GAAiC;AAC/E,eAAe,CAAC;EAAEC;AAAyB,CAAC,KAAMA,wBAAwB,GAAG,MAAM,GAAG,MAAO;AAC7F;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,QAAQ,GAAG,QAAS;AAC5F;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAED;AAAyB,CAAC,KAC3BA,wBAAwB,IACxB,IAAAE,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAED;AAAqB,CAAC,KACvBA,oBAAoB,IACpB,IAAAC,qBAAG;AACX;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC;AAAoC,CAAC,KAChDD,QAAQ,KAAK,SAAS,GAChB,IAAAD,qBAAG;AACjB,0CAA0CE,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACD,IAAAF,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CE,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC;AAEM,MAAMC,oCAAoC,GAAAR,OAAA,CAAAQ,oCAAA,GAAGP,yBAAM,CAACC,GAAG;AAC9D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -10,7 +10,7 @@ var _alignment = require("../../../../constants/alignment");
|
|
|
10
10
|
var _Emoji = require("./Emoji.styles");
|
|
11
11
|
var _SkinTonePopup = _interopRequireDefault(require("./skin-tone-popup/SkinTonePopup"));
|
|
12
12
|
var _SkinTonePopup2 = require("./skin-tone-popup/SkinTonePopup.styles");
|
|
13
|
-
function _interopRequireDefault(
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
16
|
const Emoji = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Emoji.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_alignment","_Emoji","_SkinTonePopup","_interopRequireDefault","_SkinTonePopup2","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Emoji","emoji","isSelected","name","isSkinToneSupported","onPopupVisibilityChange","onSelect","shouldShowSkinTonePopup","onRightClick","index","shouldShowPopup","setShouldShowPopup","useState","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","AnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupOverlayPosition","setSkinTonePopupOverlayPosition","top","skinTonePopupPosition","setSkinTonePopupPosition","left","emojiRef","useRef","handleClick","useCallback","calculatePopupPosition","current","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","skinTonePopupContentSize","maxLeft","minLeft","Bottom","handleContextMenu","event","preventDefault","stopPropagation","useEffect","handleHidePopup","createElement","StyledEmoji","ref","$isSelected","className","onClick","onContextMenu","AnimatePresence","initial","key","onHidePopup","overlayPosition","position","displayName","_default","exports"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { AnchorAlignment } from '../../../../constants/alignment';\nimport { StyledEmoji } from './Emoji.styles';\nimport SkinTonePopup, { SkinTonePopupProps } from './skin-tone-popup/SkinTonePopup';\nimport { skinTonePopupContentSize } from './skin-tone-popup/SkinTonePopup.styles';\n\nexport type EmojiProps = {\n emoji: string;\n isSelected: boolean;\n name: string;\n index: number;\n isSkinToneSupported: boolean;\n onPopupVisibilityChange: (isVisible: boolean) => void;\n onSelect: (emoji: string) => void;\n onRightClick: (newIndex: number) => void;\n shouldShowSkinTonePopup: boolean;\n};\n\nconst Emoji: FC<EmojiProps> = ({\n emoji,\n isSelected,\n name,\n isSkinToneSupported,\n onPopupVisibilityChange,\n onSelect,\n shouldShowSkinTonePopup,\n onRightClick,\n index,\n}) => {\n const [shouldShowPopup, setShouldShowPopup] = useState(false);\n const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(\n AnchorAlignment.Top,\n );\n const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = useState(0);\n const [skinTonePopupOverlayPosition, setSkinTonePopupOverlayPosition] = useState<\n SkinTonePopupProps['overlayPosition']\n >({ top: 0 });\n const [skinTonePopupPosition, setSkinTonePopupPosition] = useState<\n SkinTonePopupProps['position']\n >({ left: 0, top: 0 });\n\n const emojiRef = useRef<HTMLDivElement>(null);\n\n const handleClick = useCallback(() => {\n onSelect(emoji);\n }, [emoji, onSelect]);\n\n const calculatePopupPosition = useCallback(() => {\n if (!emojiRef.current) {\n return;\n }\n\n const element = emojiRef.current;\n const { parentElement } = emojiRef.current;\n\n if (parentElement) {\n const {\n height: elementHeight,\n left: elementLeft,\n top: elementTop,\n width: elementWidth,\n } = element.getBoundingClientRect();\n\n const {\n height: parentHeight,\n left: parentLeft,\n top: parentTop,\n width: parentWidth,\n } = parentElement.getBoundingClientRect();\n\n const { scrollTop } = parentElement;\n\n let anchorAlignment = AnchorAlignment.Top;\n let anchorOffset = 0;\n\n let left =\n elementLeft - parentLeft - skinTonePopupContentSize.width / 2 + elementWidth / 2;\n\n let top = elementTop - parentTop + elementHeight + scrollTop;\n\n const maxLeft = parentWidth - skinTonePopupContentSize.width - 12;\n const minLeft = 12;\n\n if (left < minLeft) {\n anchorOffset = left - minLeft;\n left = minLeft;\n } else if (left > maxLeft) {\n anchorOffset = left - maxLeft;\n left = maxLeft;\n }\n\n if (top + skinTonePopupContentSize.height > parentHeight + scrollTop) {\n anchorAlignment = AnchorAlignment.Bottom;\n top -= elementHeight + skinTonePopupContentSize.height;\n }\n\n if (isSkinToneSupported) {\n setSkinTonePopupAnchorAlignment(anchorAlignment);\n setSkinTonePopupAnchorOffset(anchorOffset);\n setSkinTonePopupPosition({ left, top });\n setSkinTonePopupOverlayPosition({ top: scrollTop });\n setShouldShowPopup(true);\n }\n }\n }, [isSkinToneSupported]);\n\n const handleContextMenu = useCallback(\n (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (isSkinToneSupported) {\n onRightClick(index);\n calculatePopupPosition();\n }\n },\n [calculatePopupPosition, index, isSkinToneSupported, onRightClick],\n );\n\n useEffect(() => {\n if (\n emojiRef.current &&\n shouldShowSkinTonePopup &&\n skinTonePopupPosition.top === 0 &&\n skinTonePopupPosition.left === 0\n ) {\n calculatePopupPosition();\n }\n }, [\n calculatePopupPosition,\n index,\n isSkinToneSupported,\n shouldShowSkinTonePopup,\n skinTonePopupPosition,\n ]);\n\n useEffect(() => {\n if (shouldShowSkinTonePopup) {\n setShouldShowPopup(shouldShowSkinTonePopup);\n }\n }, [shouldShowSkinTonePopup]);\n\n const handleHidePopup = useCallback(() => {\n setShouldShowPopup(false);\n }, []);\n\n useEffect(() => {\n onPopupVisibilityChange(shouldShowPopup);\n }, [onPopupVisibilityChange, shouldShowPopup]);\n\n return (\n <StyledEmoji\n ref={emojiRef}\n $isSelected={isSelected}\n data-emoji={emoji}\n data-name={name}\n data-skin-tone-support={isSkinToneSupported}\n className=\"prevent-lose-focus\"\n onClick={handleClick}\n onContextMenu={handleContextMenu}\n >\n {emoji}\n <AnimatePresence initial={false}>\n {shouldShowPopup && (\n <SkinTonePopup\n anchorAlignment={skinTonePopupAnchorAlignment}\n anchorOffset={skinTonePopupAnchorOffset}\n emoji={emoji}\n key={emoji}\n onHidePopup={handleHidePopup}\n onSelect={onSelect}\n overlayPosition={skinTonePopupOverlayPosition}\n position={skinTonePopupPosition}\n />\n )}\n </AnimatePresence>\n </StyledEmoji>\n );\n};\n\nEmoji.displayName = 'Emoji';\n\nexport default Emoji;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Emoji.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_alignment","_Emoji","_SkinTonePopup","_interopRequireDefault","_SkinTonePopup2","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Emoji","emoji","isSelected","name","isSkinToneSupported","onPopupVisibilityChange","onSelect","shouldShowSkinTonePopup","onRightClick","index","shouldShowPopup","setShouldShowPopup","useState","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","AnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupOverlayPosition","setSkinTonePopupOverlayPosition","top","skinTonePopupPosition","setSkinTonePopupPosition","left","emojiRef","useRef","handleClick","useCallback","calculatePopupPosition","current","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","skinTonePopupContentSize","maxLeft","minLeft","Bottom","handleContextMenu","event","preventDefault","stopPropagation","useEffect","handleHidePopup","createElement","StyledEmoji","ref","$isSelected","className","onClick","onContextMenu","AnimatePresence","initial","key","onHidePopup","overlayPosition","position","displayName","_default","exports"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { AnchorAlignment } from '../../../../constants/alignment';\nimport { StyledEmoji } from './Emoji.styles';\nimport SkinTonePopup, { SkinTonePopupProps } from './skin-tone-popup/SkinTonePopup';\nimport { skinTonePopupContentSize } from './skin-tone-popup/SkinTonePopup.styles';\n\nexport type EmojiProps = {\n emoji: string;\n isSelected: boolean;\n name: string;\n index: number;\n isSkinToneSupported: boolean;\n onPopupVisibilityChange: (isVisible: boolean) => void;\n onSelect: (emoji: string) => void;\n onRightClick: (newIndex: number) => void;\n shouldShowSkinTonePopup: boolean;\n};\n\nconst Emoji: FC<EmojiProps> = ({\n emoji,\n isSelected,\n name,\n isSkinToneSupported,\n onPopupVisibilityChange,\n onSelect,\n shouldShowSkinTonePopup,\n onRightClick,\n index,\n}) => {\n const [shouldShowPopup, setShouldShowPopup] = useState(false);\n const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(\n AnchorAlignment.Top,\n );\n const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = useState(0);\n const [skinTonePopupOverlayPosition, setSkinTonePopupOverlayPosition] = useState<\n SkinTonePopupProps['overlayPosition']\n >({ top: 0 });\n const [skinTonePopupPosition, setSkinTonePopupPosition] = useState<\n SkinTonePopupProps['position']\n >({ left: 0, top: 0 });\n\n const emojiRef = useRef<HTMLDivElement>(null);\n\n const handleClick = useCallback(() => {\n onSelect(emoji);\n }, [emoji, onSelect]);\n\n const calculatePopupPosition = useCallback(() => {\n if (!emojiRef.current) {\n return;\n }\n\n const element = emojiRef.current;\n const { parentElement } = emojiRef.current;\n\n if (parentElement) {\n const {\n height: elementHeight,\n left: elementLeft,\n top: elementTop,\n width: elementWidth,\n } = element.getBoundingClientRect();\n\n const {\n height: parentHeight,\n left: parentLeft,\n top: parentTop,\n width: parentWidth,\n } = parentElement.getBoundingClientRect();\n\n const { scrollTop } = parentElement;\n\n let anchorAlignment = AnchorAlignment.Top;\n let anchorOffset = 0;\n\n let left =\n elementLeft - parentLeft - skinTonePopupContentSize.width / 2 + elementWidth / 2;\n\n let top = elementTop - parentTop + elementHeight + scrollTop;\n\n const maxLeft = parentWidth - skinTonePopupContentSize.width - 12;\n const minLeft = 12;\n\n if (left < minLeft) {\n anchorOffset = left - minLeft;\n left = minLeft;\n } else if (left > maxLeft) {\n anchorOffset = left - maxLeft;\n left = maxLeft;\n }\n\n if (top + skinTonePopupContentSize.height > parentHeight + scrollTop) {\n anchorAlignment = AnchorAlignment.Bottom;\n top -= elementHeight + skinTonePopupContentSize.height;\n }\n\n if (isSkinToneSupported) {\n setSkinTonePopupAnchorAlignment(anchorAlignment);\n setSkinTonePopupAnchorOffset(anchorOffset);\n setSkinTonePopupPosition({ left, top });\n setSkinTonePopupOverlayPosition({ top: scrollTop });\n setShouldShowPopup(true);\n }\n }\n }, [isSkinToneSupported]);\n\n const handleContextMenu = useCallback(\n (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (isSkinToneSupported) {\n onRightClick(index);\n calculatePopupPosition();\n }\n },\n [calculatePopupPosition, index, isSkinToneSupported, onRightClick],\n );\n\n useEffect(() => {\n if (\n emojiRef.current &&\n shouldShowSkinTonePopup &&\n skinTonePopupPosition.top === 0 &&\n skinTonePopupPosition.left === 0\n ) {\n calculatePopupPosition();\n }\n }, [\n calculatePopupPosition,\n index,\n isSkinToneSupported,\n shouldShowSkinTonePopup,\n skinTonePopupPosition,\n ]);\n\n useEffect(() => {\n if (shouldShowSkinTonePopup) {\n setShouldShowPopup(shouldShowSkinTonePopup);\n }\n }, [shouldShowSkinTonePopup]);\n\n const handleHidePopup = useCallback(() => {\n setShouldShowPopup(false);\n }, []);\n\n useEffect(() => {\n onPopupVisibilityChange(shouldShowPopup);\n }, [onPopupVisibilityChange, shouldShowPopup]);\n\n return (\n <StyledEmoji\n ref={emojiRef}\n $isSelected={isSelected}\n data-emoji={emoji}\n data-name={name}\n data-skin-tone-support={isSkinToneSupported}\n className=\"prevent-lose-focus\"\n onClick={handleClick}\n onContextMenu={handleContextMenu}\n >\n {emoji}\n <AnimatePresence initial={false}>\n {shouldShowPopup && (\n <SkinTonePopup\n anchorAlignment={skinTonePopupAnchorAlignment}\n anchorOffset={skinTonePopupAnchorOffset}\n emoji={emoji}\n key={emoji}\n onHidePopup={handleHidePopup}\n onSelect={onSelect}\n overlayPosition={skinTonePopupOverlayPosition}\n position={skinTonePopupPosition}\n />\n )}\n </AnimatePresence>\n </StyledEmoji>\n );\n};\n\nEmoji.displayName = 'Emoji';\n\nexport default Emoji;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.StyledEmoji = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
var _font = require("../../../../utils/font");
|
|
9
|
-
function _interopRequireDefault(
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
10
|
const StyledEmoji = exports.StyledEmoji = _styledComponents.default.div`
|
|
11
11
|
align-items: center;
|
|
12
12
|
cursor: pointer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Emoji.styles.js","names":["_styledComponents","_interopRequireDefault","require","_font","
|
|
1
|
+
{"version":3,"file":"Emoji.styles.js","names":["_styledComponents","_interopRequireDefault","require","_font","e","__esModule","default","StyledEmoji","exports","styled","div","getFontFamily","theme","$isSelected"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { getFontFamily } from '../../../../utils/font';\n\ntype StyledEmojiProps = WithTheme<{\n $isSelected: boolean;\n}>;\n\nexport const StyledEmoji = styled.div<StyledEmojiProps>`\n align-items: center;\n cursor: pointer;\n display: flex;\n font-family: ${getFontFamily};\n font-size: 32px;\n justify-content: center;\n width: 48px;\n height: 48px;\n background-color: ${({ theme, $isSelected }: StyledEmojiProps) =>\n $isSelected ? theme['secondary-102'] : 'none'};\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAAuD,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAMhD,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAqB;AACvD;AACA;AACA;AACA,mBAAmBC,mBAAa;AAChC;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAA8B,CAAC,KACzDA,WAAW,GAAGD,KAAK,CAAC,eAAe,CAAC,GAAG,MAAM;AACrD,CAAC","ignoreList":[]}
|
package/lib/cjs/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.js
CHANGED
|
@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _dataEmojiComponents = _interopRequireDefault(require("unicode-emoji-json/data-emoji-components.json"));
|
|
9
9
|
var _emoji = require("../../../../../utils/emoji");
|
|
10
10
|
var _SkinTonePopup = require("./SkinTonePopup.styles");
|
|
11
|
-
function _interopRequireDefault(
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
14
|
const SkinTonePopup = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkinTonePopup.js","names":["_react","_interopRequireWildcard","require","_dataEmojiComponents","_interopRequireDefault","_emoji","_SkinTonePopup","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SkinTonePopup","anchorAlignment","anchorOffset","emoji","onHidePopup","onSelect","overlayPosition","position","focusedIndex","setFocusedIndex","useState","skinToneRef","useRef","handleOverlayClick","useCallback","event","preventDefault","stopPropagation","useEffect","handleKeyDown","key","_skinToneRef$current","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","_skinToneRef$current2","dataset","skinTone","shiftKey","document","addEventListener","removeEventListener","emojis","useMemo","result","entries","emojiComponents","forEach","value","index","includes","emojiWithSkinTone","addSkinToneToEmoji","handleClick","push","createElement","StyledSkinTonePopupContentEmoji","$isSelected","onClick","StyledMotionSkinTonePopup","animate","opacity","exit","initial","transition","duration","StyledSkinTonePopupContent","ref","$anchorAlignment","$anchorOffset","style","StyledSkinTonePopupOverlay","displayName","_default","exports"],"sources":["../../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport emojiComponents from 'unicode-emoji-json/data-emoji-components.json';\nimport type { AnchorAlignment } from '../../../../../constants/alignment';\nimport { addSkinToneToEmoji } from '../../../../../utils/emoji';\nimport {\n StyledMotionSkinTonePopup,\n StyledSkinTonePopupContent,\n StyledSkinTonePopupContentEmoji,\n StyledSkinTonePopupOverlay,\n} from './SkinTonePopup.styles';\n\nexport type SkinTonePopupProps = {\n anchorAlignment: AnchorAlignment;\n anchorOffset: number;\n emoji: string;\n onHidePopup: VoidFunction;\n onSelect: (emojiWithSkinTone: string) => void;\n overlayPosition: { top: number };\n position: { left: number; top: number };\n};\n\nconst SkinTonePopup: FC<SkinTonePopupProps> = ({\n anchorAlignment,\n anchorOffset,\n emoji,\n onHidePopup,\n onSelect,\n overlayPosition,\n position,\n}) => {\n const [focusedIndex, setFocusedIndex] = useState<number>(0);\n\n const skinToneRef = useRef<HTMLDivElement>(null);\n\n const handleOverlayClick = useCallback(\n (event: MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n onHidePopup();\n },\n [onHidePopup],\n );\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n event.preventDefault();\n const children = skinToneRef.current?.children;\n if (children && children.length > 0) {\n let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n if (event.key === 'ArrowLeft') {\n newIndex = (newIndex - 1) % children.length;\n } else if (event.key === 'ArrowRight') {\n newIndex = (newIndex + 1) % children.length;\n }\n\n // remove focus from the old element\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n if (newIndex < 0) {\n newIndex = children.length - 1;\n } else if (newIndex > children.length - 1) {\n newIndex = 0;\n }\n\n setFocusedIndex(newIndex);\n\n // Set focus to the element\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (event.key === 'Enter' && focusedIndex !== null) {\n const { dataset } = skinToneRef.current?.children[focusedIndex] as HTMLDivElement;\n\n const { skinTone } = dataset;\n\n if (!skinTone) {\n return;\n }\n\n onSelect(skinTone);\n\n onHidePopup();\n } else if (event.key === 'Escape' && event.shiftKey) {\n event.preventDefault();\n\n onHidePopup();\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, onHidePopup, onSelect]);\n\n const emojis = useMemo(() => {\n const result: JSX.Element[] = [];\n\n Object.entries(emojiComponents).forEach(([key, value], index) => {\n if (key.includes('skin_tone')) {\n const emojiWithSkinTone = addSkinToneToEmoji(emoji, value);\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n onSelect(emojiWithSkinTone);\n\n onHidePopup();\n };\n\n result.push(\n <StyledSkinTonePopupContentEmoji\n key={key}\n data-skin-tone={emojiWithSkinTone}\n $isSelected={index === focusedIndex}\n onClick={handleClick}\n >\n {emojiWithSkinTone}\n </StyledSkinTonePopupContentEmoji>,\n );\n }\n });\n\n return result;\n }, [emoji, focusedIndex, onHidePopup, onSelect]);\n\n return (\n <StyledMotionSkinTonePopup\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n transition={{ duration: 0.1 }}\n >\n <StyledSkinTonePopupContent\n ref={skinToneRef}\n $anchorAlignment={anchorAlignment}\n $anchorOffset={anchorOffset}\n style={position}\n >\n {emojis}\n </StyledSkinTonePopupContent>\n <StyledSkinTonePopupOverlay onClick={handleOverlayClick} style={overlayPosition} />\n </StyledMotionSkinTonePopup>\n );\n};\n\nSkinTonePopup.displayName = 'SkinTonePopup';\n\nexport default SkinTonePopup;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"SkinTonePopup.js","names":["_react","_interopRequireWildcard","require","_dataEmojiComponents","_interopRequireDefault","_emoji","_SkinTonePopup","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SkinTonePopup","anchorAlignment","anchorOffset","emoji","onHidePopup","onSelect","overlayPosition","position","focusedIndex","setFocusedIndex","useState","skinToneRef","useRef","handleOverlayClick","useCallback","event","preventDefault","stopPropagation","useEffect","handleKeyDown","key","_skinToneRef$current","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","_skinToneRef$current2","dataset","skinTone","shiftKey","document","addEventListener","removeEventListener","emojis","useMemo","result","entries","emojiComponents","forEach","value","index","includes","emojiWithSkinTone","addSkinToneToEmoji","handleClick","push","createElement","StyledSkinTonePopupContentEmoji","$isSelected","onClick","StyledMotionSkinTonePopup","animate","opacity","exit","initial","transition","duration","StyledSkinTonePopupContent","ref","$anchorAlignment","$anchorOffset","style","StyledSkinTonePopupOverlay","displayName","_default","exports"],"sources":["../../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport emojiComponents from 'unicode-emoji-json/data-emoji-components.json';\nimport type { AnchorAlignment } from '../../../../../constants/alignment';\nimport { addSkinToneToEmoji } from '../../../../../utils/emoji';\nimport {\n StyledMotionSkinTonePopup,\n StyledSkinTonePopupContent,\n StyledSkinTonePopupContentEmoji,\n StyledSkinTonePopupOverlay,\n} from './SkinTonePopup.styles';\n\nexport type SkinTonePopupProps = {\n anchorAlignment: AnchorAlignment;\n anchorOffset: number;\n emoji: string;\n onHidePopup: VoidFunction;\n onSelect: (emojiWithSkinTone: string) => void;\n overlayPosition: { top: number };\n position: { left: number; top: number };\n};\n\nconst SkinTonePopup: FC<SkinTonePopupProps> = ({\n anchorAlignment,\n anchorOffset,\n emoji,\n onHidePopup,\n onSelect,\n overlayPosition,\n position,\n}) => {\n const [focusedIndex, setFocusedIndex] = useState<number>(0);\n\n const skinToneRef = useRef<HTMLDivElement>(null);\n\n const handleOverlayClick = useCallback(\n (event: MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n onHidePopup();\n },\n [onHidePopup],\n );\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n event.preventDefault();\n const children = skinToneRef.current?.children;\n if (children && children.length > 0) {\n let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n if (event.key === 'ArrowLeft') {\n newIndex = (newIndex - 1) % children.length;\n } else if (event.key === 'ArrowRight') {\n newIndex = (newIndex + 1) % children.length;\n }\n\n // remove focus from the old element\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n if (newIndex < 0) {\n newIndex = children.length - 1;\n } else if (newIndex > children.length - 1) {\n newIndex = 0;\n }\n\n setFocusedIndex(newIndex);\n\n // Set focus to the element\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (event.key === 'Enter' && focusedIndex !== null) {\n const { dataset } = skinToneRef.current?.children[focusedIndex] as HTMLDivElement;\n\n const { skinTone } = dataset;\n\n if (!skinTone) {\n return;\n }\n\n onSelect(skinTone);\n\n onHidePopup();\n } else if (event.key === 'Escape' && event.shiftKey) {\n event.preventDefault();\n\n onHidePopup();\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, onHidePopup, onSelect]);\n\n const emojis = useMemo(() => {\n const result: JSX.Element[] = [];\n\n Object.entries(emojiComponents).forEach(([key, value], index) => {\n if (key.includes('skin_tone')) {\n const emojiWithSkinTone = addSkinToneToEmoji(emoji, value);\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n onSelect(emojiWithSkinTone);\n\n onHidePopup();\n };\n\n result.push(\n <StyledSkinTonePopupContentEmoji\n key={key}\n data-skin-tone={emojiWithSkinTone}\n $isSelected={index === focusedIndex}\n onClick={handleClick}\n >\n {emojiWithSkinTone}\n </StyledSkinTonePopupContentEmoji>,\n );\n }\n });\n\n return result;\n }, [emoji, focusedIndex, onHidePopup, onSelect]);\n\n return (\n <StyledMotionSkinTonePopup\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n transition={{ duration: 0.1 }}\n >\n <StyledSkinTonePopupContent\n ref={skinToneRef}\n $anchorAlignment={anchorAlignment}\n $anchorOffset={anchorOffset}\n style={position}\n >\n {emojis}\n </StyledSkinTonePopupContent>\n <StyledSkinTonePopupOverlay onClick={handleOverlayClick} style={overlayPosition} />\n </StyledMotionSkinTonePopup>\n );\n};\n\nSkinTonePopup.displayName = 'SkinTonePopup';\n\nexport default SkinTonePopup;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkinTonePopup.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionSkinTonePopup","exports","styled","motion","div","skinTonePopupContentSize","height","width","StyledSkinTonePopupContent","theme","$anchorAlignment","$anchorOffset","AnchorAlignment","Bottom","css","Top","undefined","StyledSkinTonePopupContentEmoji","$isSelected","StyledSkinTonePopupOverlay"],"sources":["../../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { AnchorAlignment } from '../../../../../constants/alignment';\n\nexport const StyledMotionSkinTonePopup = styled(motion.div)<FramerMotionBugFix>`\n z-index: 1;\n`;\n\nexport const skinTonePopupContentSize = {\n height: 48,\n width: 200,\n};\n\ntype StyledSkinTonePopupContentProps = WithTheme<{\n $anchorAlignment: AnchorAlignment;\n $anchorOffset: number;\n}>;\n\nexport const StyledSkinTonePopupContent = styled.div<StyledSkinTonePopupContentProps>`\n align-items: stretch;\n background-color: ${({ theme }: StyledSkinTonePopupContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n display: flex;\n height: ${skinTonePopupContentSize.height}px;\n justify-content: stretch;\n position: absolute;\n width: ${skinTonePopupContentSize.width}px;\n z-index: 2;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-bottom-right-radius: 3px;\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $anchorAlignment, $anchorOffset }) => {\n switch ($anchorAlignment) {\n case AnchorAlignment.Bottom:\n return css`\n bottom: -7px;\n left: calc(50% - 7px + ${$anchorOffset}px);\n transform: rotate(45deg);\n `;\n case AnchorAlignment.Top:\n return css`\n top: -7px;\n left: calc(50% - 7px + ${$anchorOffset}px);\n transform: rotate(225deg);\n `;\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledSkinTonePopupContentEmojiProps = WithTheme<{\n $isSelected: boolean;\n}>;\n\nexport const StyledSkinTonePopupContentEmoji = styled.div<StyledSkinTonePopupContentEmojiProps>`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n font-size: 24px;\n justify-content: center;\n background-color: ${({ theme, $isSelected }: StyledSkinTonePopupContentEmojiProps) =>\n $isSelected ? theme['secondary-102'] : 'none'};\n`;\n\nexport const StyledSkinTonePopupOverlay = styled.div`\n cursor: default;\n height: 100%;\n left: 0;\n position: absolute;\n width: 100%;\n z-index: 1;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAAqE,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAE9D,MAAMW,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,
|
|
1
|
+
{"version":3,"file":"SkinTonePopup.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionSkinTonePopup","exports","styled","motion","div","skinTonePopupContentSize","height","width","StyledSkinTonePopupContent","theme","$anchorAlignment","$anchorOffset","AnchorAlignment","Bottom","css","Top","undefined","StyledSkinTonePopupContentEmoji","$isSelected","StyledSkinTonePopupOverlay"],"sources":["../../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { AnchorAlignment } from '../../../../../constants/alignment';\n\nexport const StyledMotionSkinTonePopup = styled(motion.div)<FramerMotionBugFix>`\n z-index: 1;\n`;\n\nexport const skinTonePopupContentSize = {\n height: 48,\n width: 200,\n};\n\ntype StyledSkinTonePopupContentProps = WithTheme<{\n $anchorAlignment: AnchorAlignment;\n $anchorOffset: number;\n}>;\n\nexport const StyledSkinTonePopupContent = styled.div<StyledSkinTonePopupContentProps>`\n align-items: stretch;\n background-color: ${({ theme }: StyledSkinTonePopupContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n display: flex;\n height: ${skinTonePopupContentSize.height}px;\n justify-content: stretch;\n position: absolute;\n width: ${skinTonePopupContentSize.width}px;\n z-index: 2;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-bottom-right-radius: 3px;\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $anchorAlignment, $anchorOffset }) => {\n switch ($anchorAlignment) {\n case AnchorAlignment.Bottom:\n return css`\n bottom: -7px;\n left: calc(50% - 7px + ${$anchorOffset}px);\n transform: rotate(45deg);\n `;\n case AnchorAlignment.Top:\n return css`\n top: -7px;\n left: calc(50% - 7px + ${$anchorOffset}px);\n transform: rotate(225deg);\n `;\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledSkinTonePopupContentEmojiProps = WithTheme<{\n $isSelected: boolean;\n}>;\n\nexport const StyledSkinTonePopupContentEmoji = styled.div<StyledSkinTonePopupContentEmojiProps>`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n font-size: 24px;\n justify-content: center;\n background-color: ${({ theme, $isSelected }: StyledSkinTonePopupContentEmojiProps) =>\n $isSelected ? theme['secondary-102'] : 'none'};\n`;\n\nexport const StyledSkinTonePopupOverlay = styled.div`\n cursor: default;\n height: 100%;\n left: 0;\n position: absolute;\n width: 100%;\n z-index: 1;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,7 +11,7 @@ var _alignment = require("../../constants/alignment");
|
|
|
11
11
|
var _EmojiPicker = _interopRequireDefault(require("../emoji-picker/EmojiPicker"));
|
|
12
12
|
var _EmojiPicker2 = require("../emoji-picker/EmojiPicker.styles");
|
|
13
13
|
var _EmojiPickerPopup = require("./EmojiPickerPopup.styles");
|
|
14
|
-
function _interopRequireDefault(
|
|
14
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
16
16
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
17
17
|
const EmojiPickerPopup = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiPickerPopup.js","names":["_core","require","_framerMotion","_react","_interopRequireWildcard","_alignment","_EmojiPicker","_interopRequireDefault","_EmojiPicker2","_EmojiPickerPopup","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","EmojiPickerPopup","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","handleKeyPress","key","shiftKey","useEffect","document","addEventListener","window","removeEventListener","exitAndInitialY","createElement","StyledEmojiPickerPopup","AnimatePresence","initial","StyledMotionEmojiPickerPopupContent","$alignment","animate","opacity","y","exit","ref","style","transition","type","AreaProvider","shouldChangeColor","StyledEmojiPickerPopupIconWrapper","Icon","className","icons","onClick","size","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import { AreaProvider, Icon } from '@chayns-components/core';\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 StyledEmojiPickerPopupIconWrapper,\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 const handleKeyPress = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Escape' && !event.shiftKey) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useEffect(() => {\n if (shouldShowPopup) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n document.addEventListener('keydown', handleKeyPress);\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n document.addEventListener('keydown', handleKeyPress);\n };\n }, [handleDocumentClick, handleHide, handleKeyPress, 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 <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 <AreaProvider shouldChangeColor={false}>\n <EmojiPicker\n accessToken={accessToken}\n onSelect={onSelect}\n personId={personId}\n />\n </AreaProvider>\n </StyledMotionEmojiPickerPopupContent>\n )}\n </AnimatePresence>\n <StyledEmojiPickerPopupIconWrapper>\n <Icon\n className=\"prevent-lose-focus\"\n icons={['far fa-smile']}\n onClick={handlePopupIconClick}\n size={18}\n />\n </StyledEmojiPickerPopupIconWrapper>\n </StyledEmojiPickerPopup>\n );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"EmojiPickerPopup.js","names":["_core","require","_framerMotion","_react","_interopRequireWildcard","_alignment","_EmojiPicker","_interopRequireDefault","_EmojiPicker2","_EmojiPickerPopup","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","EmojiPickerPopup","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","handleKeyPress","key","shiftKey","useEffect","document","addEventListener","window","removeEventListener","exitAndInitialY","createElement","StyledEmojiPickerPopup","AnimatePresence","initial","StyledMotionEmojiPickerPopupContent","$alignment","animate","opacity","y","exit","ref","style","transition","type","AreaProvider","shouldChangeColor","StyledEmojiPickerPopupIconWrapper","Icon","className","icons","onClick","size","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import { AreaProvider, Icon } from '@chayns-components/core';\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 StyledEmojiPickerPopupIconWrapper,\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 const handleKeyPress = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Escape' && !event.shiftKey) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useEffect(() => {\n if (shouldShowPopup) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n document.addEventListener('keydown', handleKeyPress);\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n document.addEventListener('keydown', handleKeyPress);\n };\n }, [handleDocumentClick, handleHide, handleKeyPress, 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 <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 <AreaProvider shouldChangeColor={false}>\n <EmojiPicker\n accessToken={accessToken}\n onSelect={onSelect}\n personId={personId}\n />\n </AreaProvider>\n </StyledMotionEmojiPickerPopupContent>\n )}\n </AnimatePresence>\n <StyledEmojiPickerPopupIconWrapper>\n <Icon\n className=\"prevent-lose-focus\"\n icons={['far fa-smile']}\n onClick={handlePopupIconClick}\n size={18}\n />\n </StyledEmojiPickerPopupIconWrapper>\n </StyledEmojiPickerPopup>\n );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiPickerPopup.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledEmojiPickerPopup","exports","styled","div","getComputedStyle","document","body","getPropertyValue","StyledMotionEmojiPickerPopupContent","motion","theme","text","$alignment","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledEmojiPickerPopupIconWrapper"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../constants/alignment';\n\nexport const StyledEmojiPickerPopup = styled.div`\n align-items: center;\n display: flex;\n height: ${() => getComputedStyle(document.body).getPropertyValue('line-height')};\n position: relative;\n`;\n\ntype StyledMotionEmojiPickerPopupContentProps = WithTheme<{\n $alignment: PopupAlignment;\n}>;\n\nexport const StyledMotionEmojiPickerPopupContent = styled(\n motion.div,\n)<StyledMotionEmojiPickerPopupContentProps>`\n background-color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => theme.text};\n position: absolute;\n z-index: 2;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-bottom-right-radius: 3px;\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $alignment }) => {\n switch ($alignment) {\n case PopupAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 12px;\n transform: rotate(45deg);\n `;\n case PopupAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 12px;\n transform: rotate(225deg);\n `;\n case PopupAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 12px;\n `;\n case PopupAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 12px;\n `;\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\nexport const StyledEmojiPickerPopupIconWrapper = styled.div`\n display: flex;\n cursor: pointer;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAA2D,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAEpD,MAAMW,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAGE,yBAAM,CAACC,
|
|
1
|
+
{"version":3,"file":"EmojiPickerPopup.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledEmojiPickerPopup","exports","styled","div","getComputedStyle","document","body","getPropertyValue","StyledMotionEmojiPickerPopupContent","motion","theme","text","$alignment","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledEmojiPickerPopupIconWrapper"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../constants/alignment';\n\nexport const StyledEmojiPickerPopup = styled.div`\n align-items: center;\n display: flex;\n height: ${() => getComputedStyle(document.body).getPropertyValue('line-height')};\n position: relative;\n`;\n\ntype StyledMotionEmojiPickerPopupContentProps = WithTheme<{\n $alignment: PopupAlignment;\n}>;\n\nexport const StyledMotionEmojiPickerPopupContent = styled(\n motion.div,\n)<StyledMotionEmojiPickerPopupContentProps>`\n background-color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => theme.text};\n position: absolute;\n z-index: 2;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-bottom-right-radius: 3px;\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $alignment }) => {\n switch ($alignment) {\n case PopupAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 12px;\n transform: rotate(45deg);\n `;\n case PopupAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 12px;\n transform: rotate(225deg);\n `;\n case PopupAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 12px;\n `;\n case PopupAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 12px;\n `;\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\nexport const StyledEmojiPickerPopupIconWrapper = styled.div`\n display: flex;\n cursor: pointer;\n`;\n"],"mappings":"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","ignoreList":[]}
|