react-input-emoji 5.6.11 → 5.7.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +43 -26
- package/dist/index.es.js +37 -6
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +36 -5
- package/dist/index.js.map +1 -1
- package/dist/src/index.d.ts +3 -0
- package/dist/src/text-input.d.ts +9 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -943,7 +943,7 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
|
|
943
943
|
* @property {(event: React.ClipboardEvent) => void} onCopy
|
944
944
|
* @property {(event: React.ClipboardEvent) => void} onPaste
|
945
945
|
* @property {string} placeholder
|
946
|
-
* @property {
|
946
|
+
* @property {{borderRadius?: number; color?: string; borderColor?: string; fontSize?: number; fontFamily?: string; background: string; placeholderColor?: string;}} style
|
947
947
|
* @property {number} tabIndex
|
948
948
|
* @property {string} className
|
949
949
|
* @property {(html: string) => void} onChange
|
@@ -1030,6 +1030,24 @@ var TextInput = function TextInput(_ref, ref) {
|
|
1030
1030
|
};
|
1031
1031
|
});
|
1032
1032
|
|
1033
|
+
/** @type {React.CSSProperties} */
|
1034
|
+
var placeholderStyle = React.useMemo(function () {
|
1035
|
+
var placeholderStyle = {};
|
1036
|
+
if (style.placeholderColor) {
|
1037
|
+
placeholderStyle.color = style.placeholderColor;
|
1038
|
+
}
|
1039
|
+
return placeholderStyle;
|
1040
|
+
}, [style === null || style === void 0 ? void 0 : style.placeholderColor]);
|
1041
|
+
|
1042
|
+
/** @type {React.CSSProperties} */
|
1043
|
+
var inputStyle = React.useMemo(function () {
|
1044
|
+
var inputStyle = {};
|
1045
|
+
if (style.color) {
|
1046
|
+
inputStyle.color = style.color;
|
1047
|
+
}
|
1048
|
+
return inputStyle;
|
1049
|
+
}, [style === null || style === void 0 ? void 0 : style.color]);
|
1050
|
+
|
1033
1051
|
/** @type {React.MutableRefObject<HTMLDivElement | null>} */
|
1034
1052
|
var placeholderRef = React.useRef(null);
|
1035
1053
|
/** @type {React.MutableRefObject<HTMLDivElement | null>} */
|
@@ -1093,7 +1111,8 @@ var TextInput = function TextInput(_ref, ref) {
|
|
1093
1111
|
onClick: handleClick
|
1094
1112
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
1095
1113
|
ref: placeholderRef,
|
1096
|
-
className: "react-input-emoji--placeholder"
|
1114
|
+
className: "react-input-emoji--placeholder",
|
1115
|
+
style: placeholderStyle
|
1097
1116
|
}, placeholder), /*#__PURE__*/React__default["default"].createElement("div", {
|
1098
1117
|
ref: textInputRef,
|
1099
1118
|
onKeyDown: handleKeyDown,
|
@@ -1104,7 +1123,8 @@ var TextInput = function TextInput(_ref, ref) {
|
|
1104
1123
|
onBlur: props.onBlur,
|
1105
1124
|
onCopy: props.onCopy,
|
1106
1125
|
onPaste: props.onPaste,
|
1107
|
-
"data-testid": "react-input-emoji--input"
|
1126
|
+
"data-testid": "react-input-emoji--input",
|
1127
|
+
style: inputStyle
|
1108
1128
|
})));
|
1109
1129
|
};
|
1110
1130
|
var TextInputWithRef = /*#__PURE__*/React.forwardRef(TextInput);
|
@@ -4497,6 +4517,8 @@ function usePollute() {
|
|
4497
4517
|
* @property {boolean=} cleanOnEnter
|
4498
4518
|
* @property {(text: string) => void=} onEnter
|
4499
4519
|
* @property {string=} placeholder
|
4520
|
+
* @property {string=} placeholderColor
|
4521
|
+
* @property {string=} color
|
4500
4522
|
* @property {(size: {width: number, height: number}) => void=} onResize
|
4501
4523
|
* @property {() => void=} onClick
|
4502
4524
|
* @property {() => void=} onFocus
|
@@ -4513,6 +4535,7 @@ function usePollute() {
|
|
4513
4535
|
* @property {string=} borderColor
|
4514
4536
|
* @property {number=} fontSize
|
4515
4537
|
* @property {string=} fontFamily
|
4538
|
+
* @property {string=} background
|
4516
4539
|
* @property {{id: string; name: string; emojis: {id: string; name: string; keywords: string[], skins: {src: string}[]}}[]=} customEmojis
|
4517
4540
|
* @property {import('./types/types').Languages=} language
|
4518
4541
|
* @property {(text: string) => Promise<MetionUser[]>=} searchMention
|
@@ -4552,7 +4575,10 @@ function InputEmoji(props, ref) {
|
|
4552
4575
|
borderRadius = props.borderRadius,
|
4553
4576
|
borderColor = props.borderColor,
|
4554
4577
|
fontSize = props.fontSize,
|
4555
|
-
fontFamily = props.fontFamily
|
4578
|
+
fontFamily = props.fontFamily,
|
4579
|
+
background = props.background,
|
4580
|
+
placeholderColor = props.placeholderColor,
|
4581
|
+
color = props.color;
|
4556
4582
|
|
4557
4583
|
/** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
|
4558
4584
|
var textInputRef = React.useRef(null);
|
@@ -4721,7 +4747,10 @@ function InputEmoji(props, ref) {
|
|
4721
4747
|
borderRadius: borderRadius,
|
4722
4748
|
borderColor: borderColor,
|
4723
4749
|
fontSize: fontSize,
|
4724
|
-
fontFamily: fontFamily
|
4750
|
+
fontFamily: fontFamily,
|
4751
|
+
background: background,
|
4752
|
+
placeholderColor: placeholderColor,
|
4753
|
+
color: color
|
4725
4754
|
},
|
4726
4755
|
tabIndex: tabIndex,
|
4727
4756
|
className: inputClass,
|
@@ -4746,8 +4775,10 @@ InputEmojiWithRef.defaultProps = {
|
|
4746
4775
|
placeholder: "Type a message",
|
4747
4776
|
borderRadius: 21,
|
4748
4777
|
borderColor: "#EAEAEA",
|
4778
|
+
color: "black",
|
4749
4779
|
fontSize: 15,
|
4750
4780
|
fontFamily: "sans-serif",
|
4781
|
+
background: "white",
|
4751
4782
|
tabIndex: 0,
|
4752
4783
|
shouldReturn: false,
|
4753
4784
|
customEmojis: [],
|