react-input-emoji 5.6.11 → 5.7.0

Sign up to get free protection for your applications and to get access to all the features.
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 {React.CSSProperties} style
946
+ * @property {{borderRadius?: number; 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,15 @@ 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.placeholderColor]);
1041
+
1033
1042
  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
1034
1043
  var placeholderRef = React.useRef(null);
1035
1044
  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
@@ -1093,7 +1102,8 @@ var TextInput = function TextInput(_ref, ref) {
1093
1102
  onClick: handleClick
1094
1103
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1095
1104
  ref: placeholderRef,
1096
- className: "react-input-emoji--placeholder"
1105
+ className: "react-input-emoji--placeholder",
1106
+ style: placeholderStyle
1097
1107
  }, placeholder), /*#__PURE__*/React__default["default"].createElement("div", {
1098
1108
  ref: textInputRef,
1099
1109
  onKeyDown: handleKeyDown,
@@ -4497,6 +4507,7 @@ function usePollute() {
4497
4507
  * @property {boolean=} cleanOnEnter
4498
4508
  * @property {(text: string) => void=} onEnter
4499
4509
  * @property {string=} placeholder
4510
+ * @property {string=} placeholderColor
4500
4511
  * @property {(size: {width: number, height: number}) => void=} onResize
4501
4512
  * @property {() => void=} onClick
4502
4513
  * @property {() => void=} onFocus
@@ -4513,6 +4524,7 @@ function usePollute() {
4513
4524
  * @property {string=} borderColor
4514
4525
  * @property {number=} fontSize
4515
4526
  * @property {string=} fontFamily
4527
+ * @property {string=} background
4516
4528
  * @property {{id: string; name: string; emojis: {id: string; name: string; keywords: string[], skins: {src: string}[]}}[]=} customEmojis
4517
4529
  * @property {import('./types/types').Languages=} language
4518
4530
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
@@ -4552,7 +4564,9 @@ function InputEmoji(props, ref) {
4552
4564
  borderRadius = props.borderRadius,
4553
4565
  borderColor = props.borderColor,
4554
4566
  fontSize = props.fontSize,
4555
- fontFamily = props.fontFamily;
4567
+ fontFamily = props.fontFamily,
4568
+ background = props.background,
4569
+ placeholderColor = props.placeholderColor;
4556
4570
 
4557
4571
  /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
4558
4572
  var textInputRef = React.useRef(null);
@@ -4721,7 +4735,9 @@ function InputEmoji(props, ref) {
4721
4735
  borderRadius: borderRadius,
4722
4736
  borderColor: borderColor,
4723
4737
  fontSize: fontSize,
4724
- fontFamily: fontFamily
4738
+ fontFamily: fontFamily,
4739
+ background: background,
4740
+ placeholderColor: placeholderColor
4725
4741
  },
4726
4742
  tabIndex: tabIndex,
4727
4743
  className: inputClass,
@@ -4748,6 +4764,7 @@ InputEmojiWithRef.defaultProps = {
4748
4764
  borderColor: "#EAEAEA",
4749
4765
  fontSize: 15,
4750
4766
  fontFamily: "sans-serif",
4767
+ background: "white",
4751
4768
  tabIndex: 0,
4752
4769
  shouldReturn: false,
4753
4770
  customEmojis: [],