@ayseaistudio/ui-components 3.11.2 → 3.11.3
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.
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
import React, { useEffect, useReducer, useState } from "react";
|
|
4
4
|
import "./style.css";
|
|
5
|
-
import { IconLayoutDashboard, IconUser,
|
|
5
|
+
import { IconLayoutDashboard, IconUser, IconEye, IconEyeOff, IconLock } from "@tabler/icons-react";
|
|
6
6
|
export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status = "default", className = "", icon = _jsx(IconLayoutDashboard, { size: 20, color: "#B0B0B0" }), value = "", onChange, inputType = "text", version, singleChar = false, inputRef, onKeyDown, }) => {
|
|
7
7
|
let finalPlaceholder = placeholder;
|
|
8
8
|
let finalInputType = inputType;
|
|
@@ -37,7 +37,7 @@ export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status
|
|
|
37
37
|
finalIcon = _jsx(IconUser, { size: 20, color: iconColor });
|
|
38
38
|
}
|
|
39
39
|
else if (version === "password") {
|
|
40
|
-
finalIcon = _jsx(
|
|
40
|
+
finalIcon = _jsx(IconLock, { size: 20, color: iconColor });
|
|
41
41
|
}
|
|
42
42
|
else if (icon && React.isValidElement(icon) && icon.type === IconLayoutDashboard) {
|
|
43
43
|
finalIcon = _jsx(IconLayoutDashboard, { size: 20, color: iconColor });
|
|
@@ -2,15 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
import { useEffect, useRef, useState } from "react";
|
|
4
4
|
import "./style.css";
|
|
5
|
-
import { IconArrowDown, IconBold, IconHash, IconItalic, IconMoodSmile, IconPhoto, IconStrikethrough, IconUnderline, } from "@tabler/icons-react";
|
|
6
5
|
import { PrimaryButton } from "../PrimaryButton/PrimaryButton";
|
|
6
|
+
import { IconArrowDown, IconBold, IconHash, IconItalic, IconMoodSmile, IconPhoto, IconStrikethrough, IconUnderline, } from "@tabler/icons-react";
|
|
7
7
|
export const MessageInputField = ({ text = "", enter = true, richTextFormattingTools = true, className, placeholder = "Mesaj yazın...", withPicture = true, withEmoji = true, withBold = true, withItalic = true, withUnderline = true, withStrikethrough = true, withHash = true, value, onChange, onKeyDown, onValueChange, onEnter, }) => {
|
|
8
8
|
const editorRef = useRef(null);
|
|
9
9
|
const fileInputRef = useRef(null);
|
|
10
10
|
const [showEmoji, setShowEmoji] = useState(false);
|
|
11
|
+
const [emojiPanelAbove, setEmojiPanelAbove] = useState(false);
|
|
11
12
|
const emojiTriggerRef = useRef(null);
|
|
12
13
|
const emojiPanelRef = useRef(null);
|
|
13
14
|
const [isEmpty, setIsEmpty] = useState(true);
|
|
15
|
+
/** Approximate height of emoji panel (content + padding) for viewport check */
|
|
16
|
+
const EMOJI_PANEL_HEIGHT = 220;
|
|
17
|
+
const EMOJI_PANEL_GAP = 8;
|
|
14
18
|
useEffect(() => {
|
|
15
19
|
if (editorRef.current) {
|
|
16
20
|
const hasInitial = (text ?? "").length > 0;
|
|
@@ -90,7 +94,17 @@ export const MessageInputField = ({ text = "", enter = true, richTextFormattingT
|
|
|
90
94
|
handleInsertImage(file);
|
|
91
95
|
if (fileInputRef.current)
|
|
92
96
|
fileInputRef.current.value = "";
|
|
93
|
-
} })] }), _jsxs("div", { ref: emojiTriggerRef, className: "emoji-trigger", children: [withEmoji && _jsx(IconMoodSmile, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () =>
|
|
97
|
+
} })] }), _jsxs("div", { ref: emojiTriggerRef, className: "emoji-trigger", children: [withEmoji && _jsx(IconMoodSmile, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => {
|
|
98
|
+
if (!showEmoji) {
|
|
99
|
+
const trigger = emojiTriggerRef.current;
|
|
100
|
+
if (trigger) {
|
|
101
|
+
const rect = trigger.getBoundingClientRect();
|
|
102
|
+
const spaceBelow = typeof window !== "undefined" ? window.innerHeight - rect.bottom : EMOJI_PANEL_HEIGHT + EMOJI_PANEL_GAP;
|
|
103
|
+
setEmojiPanelAbove(spaceBelow < EMOJI_PANEL_HEIGHT + EMOJI_PANEL_GAP);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
setShowEmoji((s) => !s);
|
|
107
|
+
} }), withEmoji && showEmoji && (_jsx("div", { ref: emojiPanelRef, className: `emoji-panel ${emojiPanelAbove ? "emoji-panel--above" : ""}`, children: _jsx("div", { className: "emoji-grid", children: EMOJIS.map((e) => (_jsx("button", { type: "button", onMouseDown: (evt) => evt.preventDefault(), onClick: () => {
|
|
94
108
|
exec("insertText", e);
|
|
95
109
|
setShowEmoji(false);
|
|
96
110
|
}, className: "emoji-btn", children: e }, e))) }) }))] })] })] }) }))] }));
|