@chayns-components/emoji-input 5.0.0-beta.66

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Tobit Laboratories AG
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,45 @@
+<div align="center">
+    <h1>
+        <img src="https://raw.githubusercontent.com/TobitSoftware/chayns-components/master/assets/logo.png" width="600px" alt="chayns-components" />
+    </h1>
+    <p>A set of beautiful React components for developing your own applications with chayns.</p>
+    <div>
+        <img src="https://img.shields.io/npm/dm/@chayns-components/typewriter.svg?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/npm/v/@chayns-components/typewriter?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/github/license/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/github/contributors/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
+    </div>
+</div>
+
+---
+
+## Installation
+
+First you need to install the typewriter part of the chayns-components.
+
+```bash
+# NPM
+npm install @chayns-components/typewriter
+
+# Yarn
+yarn add @chayns-components/typewriter
+```
+
+> **Information:** Since the components have now been implemented with the styled-components
+> library, the styles are delivered directly with the components. There is no need to load an extra
+> stylesheet anymore.
+
+## Usage
+
+You can use the components in your project as in the following example.
+
+```typescript jsx
+import { Typewriter } from '@chayns-components/typewriter';
+
+<Typewriter>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
+    sit amet.
+</Typewriter>;
+```

package/lib/components/emoji-input/EmojiInput.d.ts

@@ -0,0 +1,21 @@
+import { ChangeEventHandler, FC } from 'react';
+export type EmojiInputProps = {
+    /**
+     * Disables the input so that it cannot be changed anymore
+     */
+    isDisabled: boolean;
+    /**
+     * Function that is executed when the text of the input changes
+     */
+    onInput?: ChangeEventHandler<HTMLDivElement>;
+    /**
+     * Placeholder for the input field
+     */
+    placeholder?: string;
+    /**
+     * Value of the input field
+     */
+    value: string;
+};
+declare const EmojiInput: FC<EmojiInputProps>;
+export default EmojiInput;

package/lib/components/emoji-input/EmojiInput.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _emoji = require("../../utils/emoji");
+var _selection = require("../../utils/selection");
+var _EmojiPickerPopup = _interopRequireDefault(require("../emoji-picker-popup/EmojiPickerPopup"));
+var _EmojiInput = require("./EmojiInput.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+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; }
+const EmojiInput = _ref => {
+  let {
+    isDisabled,
+    onInput,
+    placeholder,
+    value
+  } = _ref;
+  const editorRef = (0, _react.useRef)(null);
+
+  /**
+   * This function updates the content of the 'contentEditable' element if the new text is
+   * different from the previous content. So this is only true if, for example, a text like ":-)"
+   * has been replaced to the corresponding emoji.
+   *
+   * When updating the HTML, the current cursor position is saved before replacing the content, so
+   * that it can be set again afterward.
+   */
+  const handleUpdateText = (0, _react.useCallback)(text => {
+    if (!editorRef.current) {
+      return;
+    }
+    const newHtml = (0, _emoji.convertAsciiToUnicode)(text);
+    if (newHtml !== editorRef.current.innerHTML) {
+      (0, _selection.saveSelection)(editorRef.current);
+      editorRef.current.innerHTML = newHtml;
+      (0, _selection.restoreSelection)(editorRef.current);
+    }
+  }, []);
+
+  /**
+   * This function handles the 'input' events of the 'contentEditable' element and also passes the
+   * respective event up accordingly if the 'onInput' property is a function.
+   */
+  const handleInput = (0, _react.useCallback)(event => {
+    if (!editorRef.current) {
+      return;
+    }
+    handleUpdateText(editorRef.current.innerHTML);
+    if (typeof onInput === 'function') {
+      onInput(event);
+    }
+  }, [handleUpdateText, onInput]);
+
+  /**
+   * This function processes the selection of an emoji via the popup. If the 'contentEditable'
+   * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji
+   * will be appended to the back of the input field content.
+   *
+   * In addition, this function also sets the cursor to the correct position when the input field
+   * has the focus. For this purpose, the current position of the cursor or a selection is read to
+   * calculate the cursor position after inserting the emoji.
+   *
+   * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,
+   * which in turn executes the 'onInput' function from the props. So this serves to ensure that
+   * the event is also passed through to the top when inserting via the popup.
+   */
+  const handlePopupSelect = (0, _react.useCallback)(emoji => {
+    if (!editorRef.current) {
+      return;
+    }
+    const selection = window.getSelection();
+    if (selection !== null && selection !== void 0 && selection.anchorNode && editorRef.current.contains(selection.anchorNode)) {
+      const {
+        endOffset,
+        startOffset
+      } = selection.getRangeAt(0);
+      const rangeDistance = endOffset - startOffset;
+      let offset = endOffset + emoji.length - rangeDistance;
+      const {
+        anchorNode
+      } = selection;
+      if (anchorNode.nodeValue) {
+        anchorNode.nodeValue = anchorNode.nodeValue.substring(0, startOffset) + emoji + anchorNode.nodeValue.substring(endOffset);
+      }
+      const newRange = document.createRange();
+      if (anchorNode.nodeValue) {
+        offset = Math.min(offset, anchorNode.nodeValue.length);
+      }
+      newRange.setStart(anchorNode, offset);
+      newRange.setEnd(anchorNode, offset);
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+    } else {
+      editorRef.current.innerHTML += emoji;
+    }
+    const event = new Event('input', {
+      bubbles: true
+    });
+    editorRef.current.dispatchEvent(event);
+  }, []);
+
+  /**
+   * This function ensures that the input field does not lose focus when the popup is opened or an
+   * emoji is selected in it. For this purpose the corresponding elements get the class
+   * 'prevent-lose-focus'.
+   *
+   * The class can also be set to any other elements that should also not cause the input field to
+   * lose focus.
+   */
+  const handlePreventLoseFocus = (0, _react.useCallback)(event => {
+    var _element$parentElemen;
+    const element = event.target;
+    if (element.classList.contains('prevent-lose-focus') || (_element$parentElemen = element.parentElement) !== null && _element$parentElemen !== void 0 && _element$parentElemen.classList.contains('prevent-lose-focus')) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    handleUpdateText(value);
+  }, [handleUpdateText, value]);
+  (0, _react.useEffect)(() => {
+    document.body.addEventListener('mousedown', handlePreventLoseFocus);
+    return () => {
+      document.body.removeEventListener('mousedown', handlePreventLoseFocus);
+    };
+  }, [handlePreventLoseFocus]);
+  return /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInput, {
+    isDisabled: isDisabled
+  }, /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputEditor, {
+    contentEditable: !isDisabled,
+    onInput: handleInput,
+    placeholder: placeholder,
+    ref: editorRef
+  }), /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.default, {
+    onSelect: handlePopupSelect
+  }));
+};
+EmojiInput.displayName = 'EmojiInput';
+var _default = EmojiInput;
+exports.default = _default;
+//# sourceMappingURL=EmojiInput.js.map

package/lib/components/emoji-input/EmojiInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_emoji","_selection","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiInput","_ref","isDisabled","onInput","placeholder","value","editorRef","useRef","handleUpdateText","useCallback","text","current","newHtml","convertAsciiToUnicode","innerHTML","saveSelection","restoreSelection","handleInput","event","handlePopupSelect","emoji","selection","window","getSelection","anchorNode","contains","endOffset","startOffset","getRangeAt","rangeDistance","offset","length","nodeValue","substring","newRange","document","createRange","Math","min","setStart","setEnd","removeAllRanges","addRange","Event","bubbles","dispatchEvent","handlePreventLoseFocus","_element$parentElemen","element","target","classList","parentElement","preventDefault","stopPropagation","useEffect","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputEditor","contentEditable","ref","onSelect","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, { ChangeEvent, ChangeEventHandler, FC, useCallback, useEffect, useRef } from 'react';\nimport { convertAsciiToUnicode } from '../../utils/emoji';\nimport { restoreSelection, saveSelection } from '../../utils/selection';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport { StyledEmojiInput, StyledEmojiInputEditor } from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled: boolean;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onInput?: ChangeEventHandler<HTMLDivElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Value of the input field\n     */\n    value: string;\n};\n\nconst EmojiInput: FC<EmojiInputProps> = ({ isDisabled, onInput, placeholder, value }) => {\n    const editorRef = useRef<HTMLDivElement>(null);\n\n    /**\n     * This function updates the content of the 'contentEditable' element if the new text is\n     * different from the previous content. So this is only true if, for example, a text like \":-)\"\n     * has been replaced to the corresponding emoji.\n     *\n     * When updating the HTML, the current cursor position is saved before replacing the content, so\n     * that it can be set again afterward.\n     */\n    const handleUpdateText = useCallback((text: string) => {\n        if (!editorRef.current) {\n            return;\n        }\n\n        const newHtml = convertAsciiToUnicode(text);\n\n        if (newHtml !== editorRef.current.innerHTML) {\n            saveSelection(editorRef.current);\n\n            editorRef.current.innerHTML = newHtml;\n\n            restoreSelection(editorRef.current);\n        }\n    }, []);\n\n    /**\n     * This function handles the 'input' events of the 'contentEditable' element and also passes the\n     * respective event up accordingly if the 'onInput' property is a function.\n     */\n    const handleInput = useCallback(\n        (event: ChangeEvent<HTMLDivElement>) => {\n            if (!editorRef.current) {\n                return;\n            }\n\n            handleUpdateText(editorRef.current.innerHTML);\n\n            if (typeof onInput === 'function') {\n                onInput(event);\n            }\n        },\n        [handleUpdateText, onInput]\n    );\n\n    /**\n     * This function processes the selection of an emoji via the popup. If the 'contentEditable'\n     * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji\n     * will be appended to the back of the input field content.\n     *\n     * In addition, this function also sets the cursor to the correct position when the input field\n     * has the focus. For this purpose, the current position of the cursor or a selection is read to\n     * calculate the cursor position after inserting the emoji.\n     *\n     * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,\n     * which in turn executes the 'onInput' function from the props. So this serves to ensure that\n     * the event is also passed through to the top when inserting via the popup.\n     */\n    const handlePopupSelect = useCallback((emoji: string) => {\n        if (!editorRef.current) {\n            return;\n        }\n\n        const selection = window.getSelection();\n\n        if (selection?.anchorNode && editorRef.current.contains(selection.anchorNode)) {\n            const { endOffset, startOffset } = selection.getRangeAt(0);\n\n            const rangeDistance = endOffset - startOffset;\n\n            let offset = endOffset + emoji.length - rangeDistance;\n\n            const { anchorNode } = selection;\n\n            if (anchorNode.nodeValue) {\n                anchorNode.nodeValue =\n                    anchorNode.nodeValue.substring(0, startOffset) +\n                    emoji +\n                    anchorNode.nodeValue.substring(endOffset);\n            }\n\n            const newRange = document.createRange();\n\n            if (anchorNode.nodeValue) {\n                offset = Math.min(offset, anchorNode.nodeValue.length);\n            }\n\n            newRange.setStart(anchorNode, offset);\n            newRange.setEnd(anchorNode, offset);\n\n            selection.removeAllRanges();\n            selection.addRange(newRange);\n        } else {\n            editorRef.current.innerHTML += emoji;\n        }\n\n        const event = new Event('input', { bubbles: true });\n\n        editorRef.current.dispatchEvent(event);\n    }, []);\n\n    /**\n     * This function ensures that the input field does not lose focus when the popup is opened or an\n     * emoji is selected in it. For this purpose the corresponding elements get the class\n     * 'prevent-lose-focus'.\n     *\n     * The class can also be set to any other elements that should also not cause the input field to\n     * lose focus.\n     */\n    const handlePreventLoseFocus = useCallback((event: MouseEvent) => {\n        const element = event.target as Element;\n\n        if (\n            element.classList.contains('prevent-lose-focus') ||\n            element.parentElement?.classList.contains('prevent-lose-focus')\n        ) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }, []);\n\n    useEffect(() => {\n        handleUpdateText(value);\n    }, [handleUpdateText, value]);\n\n    useEffect(() => {\n        document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n        return () => {\n            document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n        };\n    }, [handlePreventLoseFocus]);\n\n    return (\n        <StyledEmojiInput isDisabled={isDisabled}>\n            <StyledEmojiInputEditor\n                contentEditable={!isDisabled}\n                onInput={handleInput}\n                placeholder={placeholder}\n                ref={editorRef}\n            />\n            <EmojiPickerPopup onSelect={handlePopupSelect} />\n        </StyledEmojiInput>\n    );\n};\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}

package/lib/components/emoji-input/EmojiInput.styles.d.ts

@@ -0,0 +1,7 @@
+import type { EmojiInputProps } from './EmojiInput';
+export declare const StyledEmojiInput: import("styled-components").StyledComponent<"div", any, Pick<EmojiInputProps, "isDisabled"> & {
+    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledEmojiInputEditor: import("styled-components").StyledComponent<"div", any, Pick<EmojiInputProps, "placeholder"> & {
+    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

package/lib/components/emoji-input/EmojiInput.styles.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledEmojiInputEditor = exports.StyledEmojiInput = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledEmojiInput = _styledComponents.default.div`
+    align-items: center;
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['100'];
+}};
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    border-radius: 3px;
+    display: flex;
+    gap: 10px;
+    justify-content: space-between;
+    min-height: 42px;
+    opacity: ${_ref2 => {
+  let {
+    isDisabled
+  } = _ref2;
+  return isDisabled ? 0.5 : 1;
+}};
+    padding: 8px 10px;
+    position: relative;
+    transition: opacity 0.3s ease;
+`;
+exports.StyledEmojiInput = StyledEmojiInput;
+const StyledEmojiInputEditor = _styledComponents.default.div`
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.text;
+}};
+    flex: 1 1 auto;
+    font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;
+
+    &:empty:not(:focus):before {
+        content: '${_ref4 => {
+  let {
+    placeholder
+  } = _ref4;
+  return placeholder;
+}}';
+        color: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme['006'];
+}};
+    }
+`;
+exports.StyledEmojiInputEditor = StyledEmojiInputEditor;
+//# sourceMappingURL=EmojiInput.styles.js.map

package/lib/components/emoji-input/EmojiInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiInput.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledEmojiInput","styled","div","_ref","theme","_ref2","isDisabled","exports","StyledEmojiInputEditor","_ref3","text","_ref4","placeholder","_ref5"],"sources":["../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport type { EmojiInputProps } from './EmojiInput';\n\ntype StyledEmojiInputProps = WithTheme<Pick<EmojiInputProps, 'isDisabled'>>;\n\nexport const StyledEmojiInput = styled.div<StyledEmojiInputProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledEmojiInputProps) => theme['100']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-radius: 3px;\n    display: flex;\n    gap: 10px;\n    justify-content: space-between;\n    min-height: 42px;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    padding: 8px 10px;\n    position: relative;\n    transition: opacity 0.3s ease;\n`;\n\ntype StyledEmojiInputEditorProps = WithTheme<Pick<EmojiInputProps, 'placeholder'>>;\n\nexport const StyledEmojiInputEditor = styled.div<StyledEmojiInputEditorProps>`\n    color: ${({ theme }: StyledEmojiInputEditorProps) => theme.text};\n    flex: 1 1 auto;\n    font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;\n\n    &:empty:not(:focus):before {\n        content: '${({ placeholder }) => placeholder}';\n        color: ${({ theme }: StyledEmojiInputEditorProps) => theme['006']};\n    }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,gBAAgB,GAAGC,yBAAM,CAACC,GAA2B;AAClE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA6B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAP,gBAAA,GAAAA,gBAAA;AAIK,MAAMQ,sBAAsB,GAAGP,yBAAM,CAACC,GAAiC;AAC9E,aAAaO,KAAA;EAAA,IAAC;IAAEL;EAAmC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAACM,IAAI;AAAA,CAAC;AACpE;AACA;AACA;AACA;AACA,oBAAoBC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAKC,WAAW;AAAA,CAAC;AACrD,iBAAiBC,KAAA;EAAA,IAAC;IAAET;EAAmC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC1E;AACA,CAAC;AAACG,OAAA,CAAAC,sBAAA,GAAAA,sBAAA"}

package/lib/components/emoji-picker/EmojiPicker.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export type EmojiPickerProps = {
+    onSelect: (emoji: string) => void;
+};
+declare const EmojiPicker: FC<EmojiPickerProps>;
+export default EmojiPicker;

package/lib/components/emoji-picker/EmojiPicker.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@chayns-components/core");
+var _react = _interopRequireWildcard(require("react"));
+var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-group.json"));
+var _EmojiPickerCategories = _interopRequireDefault(require("./emoji-picker-categories/EmojiPickerCategories"));
+var _EmojiPickerEmojis = _interopRequireDefault(require("./emoji-picker-emojis/EmojiPickerEmojis"));
+var _EmojiPicker = require("./EmojiPicker.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+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; }
+const EmojiPicker = _ref => {
+  var _emojiCategories$;
+  let {
+    onSelect
+  } = _ref;
+  const [searchString, setSearchString] = (0, _react.useState)('');
+  const [selectedCategory, setSelectedCategory] = (0, _react.useState)((_emojiCategories$ = _dataByGroup.default[0]) === null || _emojiCategories$ === void 0 ? void 0 : _emojiCategories$.slug);
+  const handleCategorySelect = (0, _react.useCallback)(category => {
+    setSearchString('');
+    setSelectedCategory(category);
+  }, []);
+  const handleSearchChange = (0, _react.useCallback)(event => {
+    setSearchString(event.target.value);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_EmojiPicker.StyledEmojiPicker, null, /*#__PURE__*/_react.default.createElement(_core.Input, {
+    onChange: handleSearchChange,
+    placeholder: "Suchen",
+    value: searchString
+  }), /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.default, {
+    onSelect: onSelect,
+    searchString: searchString,
+    selectedCategory: selectedCategory
+  }), /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.default, {
+    onSelect: handleCategorySelect,
+    searchString: searchString,
+    selectedCategory: selectedCategory
+  }));
+};
+EmojiPicker.displayName = 'EmojiPicker';
+var _default = EmojiPicker;
+exports.default = _default;
+//# sourceMappingURL=EmojiPicker.js.map

package/lib/components/emoji-picker/EmojiPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.js","names":["_core","require","_react","_interopRequireWildcard","_dataByGroup","_interopRequireDefault","_EmojiPickerCategories","_EmojiPickerEmojis","_EmojiPicker","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPicker","_ref","_emojiCategories$","onSelect","searchString","setSearchString","useState","selectedCategory","setSelectedCategory","emojiCategories","slug","handleCategorySelect","useCallback","category","handleSearchChange","event","target","value","createElement","StyledEmojiPicker","Input","onChange","placeholder","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker/EmojiPicker.tsx"],"sourcesContent":["import { Input } from '@chayns-components/core';\nimport React, { ChangeEvent, FC, useCallback, useState } from 'react';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport type { Category } from '../../types/category';\nimport EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategories';\nimport EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';\nimport { StyledEmojiPicker } from './EmojiPicker.styles';\n\nexport type EmojiPickerProps = {\n    onSelect: (emoji: string) => void;\n};\nconst EmojiPicker: FC<EmojiPickerProps> = ({ onSelect }) => {\n    const [searchString, setSearchString] = useState('');\n    const [selectedCategory, setSelectedCategory] = useState(emojiCategories[0]?.slug as Category);\n\n    const handleCategorySelect = useCallback((category: Category) => {\n        setSearchString('');\n        setSelectedCategory(category);\n    }, []);\n\n    const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n        setSearchString(event.target.value);\n    }, []);\n\n    return (\n        <StyledEmojiPicker>\n            <Input onChange={handleSearchChange} placeholder=\"Suchen\" value={searchString} />\n            <EmojiPickerEmojis\n                onSelect={onSelect}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n            <EmojiPickerCategories\n                onSelect={handleCategorySelect}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n        </StyledEmojiPicker>\n    );\n};\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}

package/lib/components/emoji-picker/EmojiPicker.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const emojiPickerSize: {
+    height: number;
+    width: number;
+};
+export declare const StyledEmojiPicker: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/emoji-picker/EmojiPicker.styles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emojiPickerSize = exports.StyledEmojiPicker = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const emojiPickerSize = {
+  height: 285,
+  width: 350
+};
+exports.emojiPickerSize = emojiPickerSize;
+const StyledEmojiPicker = _styledComponents.default.div`
+    display: flex;
+    flex-direction: column;
+    height: ${emojiPickerSize.height}px;
+    padding: 10px 22px;
+    width: ${emojiPickerSize.width}px;
+    user-select: none;
+`;
+exports.StyledEmojiPicker = StyledEmojiPicker;
+//# sourceMappingURL=EmojiPicker.styles.js.map

package/lib/components/emoji-picker/EmojiPicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","emojiPickerSize","height","width","exports","StyledEmojiPicker","styled","div"],"sources":["../../../src/components/emoji-picker/EmojiPicker.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const emojiPickerSize = {\n    height: 285,\n    width: 350,\n};\n\nexport const StyledEmojiPicker = styled.div`\n    display: flex;\n    flex-direction: column;\n    height: ${emojiPickerSize.height}px;\n    padding: 10px 22px;\n    width: ${emojiPickerSize.width}px;\n    user-select: none;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,eAAe,GAAG;EAC3BC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE;AACX,CAAC;AAACC,OAAA,CAAAH,eAAA,GAAAA,eAAA;AAEK,MAAMI,iBAAiB,GAAGC,yBAAM,CAACC,GAAI;AAC5C;AACA;AACA,cAAcN,eAAe,CAACC,MAAO;AACrC;AACA,aAAaD,eAAe,CAACE,KAAM;AACnC;AACA,CAAC;AAACC,OAAA,CAAAC,iBAAA,GAAAA,iBAAA"}

package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import type { Category } from '../../../types/category';
+export type EmojiPickerCategoriesProps = {
+    onSelect: (category: Category) => void;
+    searchString: string;
+    selectedCategory: Category;
+};
+declare const EmojiPickerCategories: FC<EmojiPickerCategoriesProps>;
+export default EmojiPickerCategories;

package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-group.json"));
+var _EmojiPickerCategories = require("./EmojiPickerCategories.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+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; }
+const EmojiPickerCategories = _ref => {
+  let {
+    onSelect,
+    searchString,
+    selectedCategory
+  } = _ref;
+  const isSearchStringGiven = searchString.trim() !== '';
+  const categories = (0, _react.useMemo)(() => _dataByGroup.default.map(_ref2 => {
+    var _emojis$;
+    let {
+      emojis,
+      slug
+    } = _ref2;
+    const isSelected = selectedCategory === slug && !isSearchStringGiven;
+    return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledMotionEmojiPickerCategory, {
+      animate: {
+        filter: `grayscale(${isSelected ? 0 : 0.75})`,
+        opacity: isSelected ? 1 : 0.5
+      },
+      className: "prevent-lose-focus",
+      initial: false,
+      key: slug,
+      onClick: () => onSelect(slug),
+      transition: {
+        duration: 0.2
+      }
+    }, (_emojis$ = emojis[0]) === null || _emojis$ === void 0 ? void 0 : _emojis$.emoji);
+  }), [isSearchStringGiven, onSelect, selectedCategory]);
+  return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledEmojiPickerCategories, null, categories);
+};
+EmojiPickerCategories.displayName = 'EmojiPickerCategories';
+var _default = EmojiPickerCategories;
+exports.default = _default;
+//# sourceMappingURL=EmojiPickerCategories.js.map

package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerCategories.js","names":["_react","_interopRequireWildcard","require","_dataByGroup","_interopRequireDefault","_EmojiPickerCategories","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPickerCategories","_ref","onSelect","searchString","selectedCategory","isSearchStringGiven","trim","categories","useMemo","unicodeEmoji","map","_ref2","_emojis$","emojis","slug","isSelected","createElement","StyledMotionEmojiPickerCategory","animate","filter","opacity","className","initial","onClick","transition","duration","emoji","StyledEmojiPickerCategories","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport unicodeEmoji from 'unicode-emoji-json/data-by-group.json';\nimport type { Category } from '../../../types/category';\nimport {\n    StyledEmojiPickerCategories,\n    StyledMotionEmojiPickerCategory,\n} from './EmojiPickerCategories.styles';\n\nexport type EmojiPickerCategoriesProps = {\n    onSelect: (category: Category) => void;\n    searchString: string;\n    selectedCategory: Category;\n};\n\nconst EmojiPickerCategories: FC<EmojiPickerCategoriesProps> = ({\n    onSelect,\n    searchString,\n    selectedCategory,\n}) => {\n    const isSearchStringGiven = searchString.trim() !== '';\n\n    const categories = useMemo(\n        () =>\n            unicodeEmoji.map(({ emojis, slug }) => {\n                const isSelected = selectedCategory === slug && !isSearchStringGiven;\n\n                return (\n                    <StyledMotionEmojiPickerCategory\n                        animate={{\n                            filter: `grayscale(${isSelected ? 0 : 0.75})`,\n                            opacity: isSelected ? 1 : 0.5,\n                        }}\n                        className=\"prevent-lose-focus\"\n                        initial={false}\n                        key={slug}\n                        onClick={() => onSelect(slug as Category)}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {emojis[0]?.emoji}\n                    </StyledMotionEmojiPickerCategory>\n                );\n            }),\n        [isSearchStringGiven, onSelect, selectedCategory]\n    );\n\n    return <StyledEmojiPickerCategories>{categories}</StyledEmojiPickerCategories>;\n};\n\nEmojiPickerCategories.displayName = 'EmojiPickerCategories';\n\nexport default EmojiPickerCategories;\n"],"mappings":"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"}

package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledEmojiPickerCategories: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMotionEmojiPickerCategory: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;

package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionEmojiPickerCategory = exports.StyledEmojiPickerCategories = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledEmojiPickerCategories = _styledComponents.default.div`
+    align-items: center;
+    border-top: 1px solid rgba(160, 160, 160, 0.3);
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: space-between;
+    padding-top: 10px;
+`;
+exports.StyledEmojiPickerCategories = StyledEmojiPickerCategories;
+const StyledMotionEmojiPickerCategory = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    cursor: pointer;
+    font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;
+    font-size: 20px;
+`;
+exports.StyledMotionEmojiPickerCategory = StyledMotionEmojiPickerCategory;
+//# sourceMappingURL=EmojiPickerCategories.styles.js.map

package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerCategories.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledEmojiPickerCategories","styled","div","exports","StyledMotionEmojiPickerCategory","motion"],"sources":["../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledEmojiPickerCategories = styled.div`\n    align-items: center;\n    border-top: 1px solid rgba(160, 160, 160, 0.3);\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: space-between;\n    padding-top: 10px;\n`;\n\nexport const StyledMotionEmojiPickerCategory = styled(motion.div)`\n    cursor: pointer;\n    font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;\n    font-size: 20px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,2BAA2B,GAAGC,yBAAM,CAACC,GAAI;AACtD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAH,2BAAA,GAAAA,2BAAA;AAEK,MAAMI,+BAA+B,GAAG,IAAAH,yBAAM,EAACI,oBAAM,CAACH,GAAG,CAAE;AAClE;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAC,+BAAA,GAAAA,+BAAA"}

package/lib/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import type { Category } from '../../../types/category';
+export type EmojiPickerEmojisProps = {
+    onSelect: (emoji: string) => void;
+    searchString: string;
+    selectedCategory: Category;
+};
+declare const EmojiPickerEmojis: FC<EmojiPickerEmojisProps>;
+export default EmojiPickerEmojis;