emoji-picker-react 4.7.13 → 4.7.15
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/dist/components/main/PickerMain.d.ts +1 -0
- package/dist/emoji-picker-react.cjs.development.js +3034 -3025
- package/dist/emoji-picker-react.cjs.development.js.map +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js.map +1 -1
- package/dist/emoji-picker-react.esm.js +3035 -3026
- package/dist/emoji-picker-react.esm.js.map +1 -1
- package/package.json +2 -2
- package/src/DomUtils/elementPositionInRow.ts +17 -0
- package/src/components/main/PickerMain.tsx +3 -1
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "4.7.
|
|
2
|
+
"version": "4.7.15",
|
|
3
3
|
"license": "MIT",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"typings": "dist/index.d.ts",
|
|
@@ -98,6 +98,6 @@
|
|
|
98
98
|
"rollup-plugin-svg": "^2.0.0"
|
|
99
99
|
},
|
|
100
100
|
"dependencies": {
|
|
101
|
-
"flairup": "0.0.
|
|
101
|
+
"flairup": "0.0.38"
|
|
102
102
|
}
|
|
103
103
|
}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import { DEFAULT_LABEL_HEIGHT } from '../components/main/PickerMain';
|
|
2
|
+
|
|
3
|
+
import { ClassNames, asSelectors } from './classNames';
|
|
1
4
|
import { NullableElement } from './selectors';
|
|
2
5
|
|
|
3
6
|
export function elementCountInRow(
|
|
@@ -149,10 +152,16 @@ export function firstVisibleElementInContainer(
|
|
|
149
152
|
const parentTop = parent.getBoundingClientRect().top;
|
|
150
153
|
const parentBottom = parent.getBoundingClientRect().bottom;
|
|
151
154
|
|
|
155
|
+
const parentTopWithLabel = parentTop + getLabelHight(parent);
|
|
156
|
+
|
|
152
157
|
const visibleElements = elements.find(element => {
|
|
153
158
|
const elementTop = element.getBoundingClientRect().top;
|
|
154
159
|
const elementBottom = element.getBoundingClientRect().bottom;
|
|
155
160
|
|
|
161
|
+
if (elementTop < parentTopWithLabel) {
|
|
162
|
+
return false;
|
|
163
|
+
}
|
|
164
|
+
|
|
156
165
|
return (
|
|
157
166
|
(elementTop >= parentTop && elementTop <= parentBottom) ||
|
|
158
167
|
(elementBottom >= parentTop && elementBottom <= parentBottom)
|
|
@@ -165,3 +174,11 @@ export function firstVisibleElementInContainer(
|
|
|
165
174
|
export function hasNextElementSibling(element: HTMLElement) {
|
|
166
175
|
return !!element.nextElementSibling;
|
|
167
176
|
}
|
|
177
|
+
|
|
178
|
+
function getLabelHight(parentNode: HTMLElement) {
|
|
179
|
+
return (
|
|
180
|
+
parentNode
|
|
181
|
+
.querySelector(asSelectors(ClassNames.label))
|
|
182
|
+
?.getBoundingClientRect().height ?? DEFAULT_LABEL_HEIGHT /* default */
|
|
183
|
+
);
|
|
184
|
+
}
|
|
@@ -22,6 +22,8 @@ type Props = Readonly<{
|
|
|
22
22
|
children: React.ReactNode;
|
|
23
23
|
}>;
|
|
24
24
|
|
|
25
|
+
export const DEFAULT_LABEL_HEIGHT = 40;
|
|
26
|
+
|
|
25
27
|
export default function PickerMain({ children }: Props) {
|
|
26
28
|
return (
|
|
27
29
|
<PickerContextProvider>
|
|
@@ -173,7 +175,7 @@ const styles = stylesheet.create({
|
|
|
173
175
|
'--epr-category-label-bg-color': '#ffffffe6',
|
|
174
176
|
'--epr-category-label-text-color': 'var(--epr-text-color)',
|
|
175
177
|
'--epr-category-label-padding': '0 var(--epr-horizontal-padding)',
|
|
176
|
-
'--epr-category-label-height':
|
|
178
|
+
'--epr-category-label-height': `${DEFAULT_LABEL_HEIGHT}px`,
|
|
177
179
|
|
|
178
180
|
/* Emoji */
|
|
179
181
|
'--epr-emoji-size': '30px',
|