Skip to content

Commit ea50b56

Browse files
rayan1810rayan1810
authored
Merge pull request #5598 from GeekyAnts/release/3.4.26
Release/3.4.26
2 parents 85df900 + 74ebed1 commit ea50b56

File tree

20 files changed

+185
-51
lines changed

20 files changed

+185
-51
lines changed

‎package.json

+6-4
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"prettier --write"
3737
]
3838
},
39-
"version": "3.4.25",
39+
"version": "3.4.26",
4040
"license": "MIT",
4141
"private": false,
4242
"main": "lib/commonjs/index",
@@ -64,10 +64,11 @@
6464
"@types/lodash.omit": "^4.5.6",
6565
"@types/lodash.omitby": "^4.6.6",
6666
"@types/lodash.pick": "^4.4.6",
67+
"@types/lodash.uniqueid": "^4.0.7",
6768
"@types/react": "^16.9.19",
6869
"@types/react-native": "~0.63.2",
6970
"@types/tinycolor2": "^1.4.2",
70-
"@types/use-subscription": "^1.0.0",
71+
"@types/use-sync-external-store": "^0.0.3",
7172
"babel-plugin-transform-remove-console": "^6.9.4",
7273
"commitlint": "^8.3.5",
7374
"eslint": "^7.10.0",
@@ -183,7 +184,7 @@
183184
"@react-native-aria/focus": "^0.2.6",
184185
"@react-native-aria/interactions": "^0.2.2",
185186
"@react-native-aria/listbox": "^0.2.4-alpha.3",
186-
"@react-native-aria/overlays": "0.3.3-rc.0",
187+
"@react-native-aria/overlays": "^0.3.3",
187188
"@react-native-aria/radio": "^0.2.4",
188189
"@react-native-aria/slider": "^0.2.5-alpha.1",
189190
"@react-native-aria/tabs": "^0.2.7",
@@ -207,9 +208,10 @@
207208
"lodash.omit": "^4.5.0",
208209
"lodash.omitby": "^4.6.0",
209210
"lodash.pick": "^4.4.0",
211+
"lodash.uniqueid": "^4.0.1",
210212
"stable-hash": "^0.0.2",
211213
"tinycolor2": "^1.4.2",
212-
"use-subscription": "^1.8.0"
214+
"use-sync-external-store": "^1.2.0"
213215
},
214216
"directories": {
215217
"example": "example",

‎src/components/composites/AlertDialog/AlertDialog.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const AlertDialog = (
3737
_backdropFade,
3838
_fade,
3939
_slide,
40+
_overlay,
4041
useRNModal,
4142
...restThemeProps
4243
} = usePropsResolution('AlertDialog', rest);
@@ -65,14 +66,15 @@ const AlertDialog = (
6566
if (useHasResponsiveProps(rest)) {
6667
return null;
6768
}
69+
6870
return (
6971
<Overlay
7072
isOpen={visible}
7173
onRequestClose={handleClose}
7274
isKeyboardDismissable={isKeyboardDismissable}
7375
useRNModalOnAndroid
7476
useRNModal={useRNModal}
75-
unmountOnExit
77+
{..._overlay}
7678
>
7779
<AlertDialogContext.Provider
7880
value={{

‎src/components/composites/FormControl/useFormControl.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import omit from 'lodash.omit';
44
import type { IFormControlProps } from './types';
55
import { ariaAttr } from '../../../utils';
66
import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
7-
import { uniqueId } from 'lodash';
7+
import uniqueId from 'lodash.uniqueid';
88

99
export type IFormControlContext = Omit<
1010
ReturnType<typeof useFormControlProvider>,

‎src/components/composites/Menu/Menu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ const Menu = (
7777
if (useHasResponsiveProps(resolvedProps)) {
7878
return null;
7979
}
80+
8081
return (
8182
<>
8283
{updatedTrigger()}
@@ -86,7 +87,6 @@ const Menu = (
8687
useRNModalOnAndroid
8788
useRNModal={useRNModal}
8889
{..._overlay}
89-
unmountOnExit
9090
>
9191
<PresenceTransition visible={isOpen} {..._presenceTransition}>
9292
<Popper

‎src/components/composites/Menu/useMenu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useFocusManager } from '@react-native-aria/focus';
33
import { useId } from '@react-native-aria/utils';
44
import { AccessibilityRole, Platform } from 'react-native';
55
import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
6-
import { uniqueId } from 'lodash';
6+
import uniqueId from 'lodash.uniqueid';
77

88
type IMenuTriggerProps = {
99
handleOpen: () => void;

‎src/components/composites/Modal/Modal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const Modal = (
7777
if (useHasResponsiveProps(rest)) {
7878
return null;
7979
}
80-
// console.log('visible here', visible);
80+
8181
return (
8282
<Overlay
8383
isOpen={visible}

‎src/components/composites/Popover/Popover.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@ import { StyleSheet } from 'react-native';
1212
import { useId } from '@react-native-aria/utils';
1313
import { Overlay } from '../../primitives/Overlay';
1414
import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
15-
import { uniqueId } from 'lodash';
15+
import uniqueId from 'lodash.uniqueid';
1616
import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
17+
import { usePropsResolution } from '../../../hooks/useThemeProps';
1718

1819
const Popover = (
1920
{
@@ -32,6 +33,8 @@ const Popover = (
3233
}: IPopoverProps,
3334
ref: any
3435
) => {
36+
const { _overlay } = usePropsResolution('Popover', props);
37+
3538
const triggerRef = React.useRef(null);
3639
const mergedRef = mergeRefs([triggerRef]);
3740
const [isOpen, setIsOpen] = useControllableState({
@@ -92,7 +95,7 @@ const Popover = (
9295
onRequestClose={handleClose}
9396
useRNModalOnAndroid
9497
useRNModal={useRNModal}
95-
unmountOnExit
98+
{..._overlay}
9699
>
97100
<PresenceTransition
98101
initial={{ opacity: 0 }}

‎src/components/composites/Popover/types.ts

+4
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,10 @@ export interface InterfacePopoverProps {
107107
* Props applied on backdrop.
108108
*/
109109
_backdrop?: any;
110+
/**
111+
* Props applied on overlay.
112+
*/
113+
_overlay?: any;
110114
}
111115

112116
export type IPopoverContentImpl = {

‎src/components/composites/Tooltip/Tooltip.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import Box from '../../primitives/Box';
1010
import type { ITooltipProps } from './types';
1111
import { useId } from '@react-native-aria/utils';
1212
import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
13-
import { uniqueId } from 'lodash';
13+
import uniqueId from 'lodash.uniqueid';
1414
import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
1515

1616
export const Tooltip = ({

‎src/components/primitives/Hidden/HiddenSSR.tsx

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
import { useTheme } from 'native-base';
3+
import { Platform } from 'react-native';
4+
import type { IHiddenProps } from './types';
5+
import { useColorMode } from '../../../core/color-mode/hooks';
6+
7+
export const HiddenSSR = React.memo(({ children, ...props }: IHiddenProps) => {
8+
const theme = useTheme();
9+
const breakPoints = Object.keys(theme.breakpoints);
10+
const currentColorMode = useColorMode();
11+
12+
const { from, till, only, colorMode, platform } = props;
13+
14+
if (children === null) return null;
15+
if (!from && !till && !only && !colorMode && !platform) {
16+
return null;
17+
} else if (
18+
(Array.isArray(platform) && platform.includes(Platform.OS)) ||
19+
platform === Platform.OS
20+
) {
21+
return null;
22+
} else if (colorMode === currentColorMode.colorMode) {
23+
return null;
24+
}
25+
const display: any = {};
26+
27+
if (till) {
28+
let flag = false;
29+
for (const i in breakPoints) {
30+
if (breakPoints[i] === till) {
31+
display[breakPoints[i]] = 'flex';
32+
flag = true;
33+
} else {
34+
display[breakPoints[i]] = flag ? 'flex' : 'none';
35+
}
36+
}
37+
}
38+
39+
if (from) {
40+
let flag = false;
41+
for (const i in breakPoints) {
42+
if (breakPoints[i] === from || flag) {
43+
display[breakPoints[i]] = 'none';
44+
flag = true;
45+
} else {
46+
display[breakPoints[i]] = 'flex';
47+
}
48+
}
49+
}
50+
if (only) {
51+
if (Array.isArray(only)) {
52+
for (const i in breakPoints) {
53+
if (only.includes(breakPoints[i])) {
54+
display[breakPoints[i]] = 'none';
55+
} else {
56+
display[breakPoints[i]] = 'flex';
57+
}
58+
}
59+
} else {
60+
display[only] = 'none';
61+
}
62+
}
63+
64+
return React.cloneElement(children, {
65+
display: display,
66+
});
67+
});

‎src/components/primitives/Hidden/index.tsx

+14-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
1+
import React from 'react';
12
import { memo } from 'react';
23
import type { IHiddenProps } from './types';
34
import { usePropsResolution } from '../../../hooks/useThemeProps';
45
import { useBreakpointValue, useTheme, useToken } from '../../../hooks';
56
import { useColorMode } from '../../../core/color-mode/hooks';
67
import { Platform } from 'react-native';
7-
8-
export function Hidden({ children, ...props }: IHiddenProps) {
9-
const { from, till, only, platform, colorMode } = usePropsResolution(
8+
import { useNativeBaseConfig } from '../../../core/NativeBaseContext';
9+
import { HiddenSSR } from './HiddenSSR';
10+
export function Hidden({ isSSR, ...props }: IHiddenProps) {
11+
const {
12+
from,
13+
till,
14+
only,
15+
platform,
16+
colorMode,
17+
children,
18+
} = usePropsResolution(
1019
'Hidden',
1120
props,
1221
{},
@@ -28,7 +37,9 @@ export function Hidden({ children, ...props }: IHiddenProps) {
2837
const [currentBreakpointValue] = useToken('breakpoints', [breakpointValue]);
2938
const [fromBreakPointValue] = useToken('breakpoints', [from]);
3039
const [tillBreakPointValue] = useToken('breakpoints', [till]);
40+
const isSSRProvider = useNativeBaseConfig('useBreakpointResolvedProps').isSSR;
3141

42+
if (isSSR && isSSRProvider) return <HiddenSSR {...props} />;
3243
//if no prop is passed, it will hide the element wrapped with hidden
3344
if (!from && !till && !only && !colorMode && !platform) {
3445
return null;

‎src/components/primitives/Hidden/types.ts

+4
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ export interface InterfaceHiddenProps {
3030
*
3131
*/
3232
children: React.ReactElement | null;
33+
/**
34+
*
35+
*/
36+
isSSR?: boolean;
3337
}
3438

3539
export type IHiddenProps = InterfaceHiddenProps;

‎src/core/NativeBaseProvider.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const NativeBaseProvider = (props: NativeBaseProviderProps) => {
9191
colorModeManager={colorModeManager}
9292
options={theme.config}
9393
>
94-
<OverlayProvider>
94+
<OverlayProvider isSSR>
9595
<ToastProvider>
9696
<InitializeToastRef />
9797
<SSRProvider>{children}</SSRProvider>

‎src/core/color-mode/hooks.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import type {
77
import { HybridContext } from './../hybrid-overlay/Context';
88
import type { IHybridContextProps } from './../hybrid-overlay/types';
99
import { AppState, useColorScheme as _useColorScheme } from 'react-native';
10-
import { useSubscription } from 'use-subscription';
10+
import { useSyncExternalStore } from 'use-sync-external-store/shim';
11+
1112
import { useNativeBaseConfig } from '../NativeBaseContext';
1213

1314
export const useColorMode = (): IColorModeContextProps => {
@@ -56,7 +57,11 @@ export const useAppState = () => {
5657
// This if statement technically breaks the rules of hooks, but is safe
5758
// because the condition never changes after mounting.
5859
// eslint-disable-next-line react-hooks/rules-of-hooks
59-
return useSubscription(subscription);
60+
return useSyncExternalStore(
61+
subscription.subscribe,
62+
subscription.getCurrentValue,
63+
subscription.getCurrentValue
64+
);
6065
}
6166
};
6267

@@ -100,7 +105,7 @@ export function useModeManager(
100105
useEffect(() => {
101106
if (colorModeManager) {
102107
(async function getMode() {
103-
let value = await colorModeManager.get(initialColorMode);
108+
const value = await colorModeManager.get(initialColorMode);
104109
if (value && value !== colorMode) {
105110
setRawMode(value);
106111
}

‎src/theme/components/alert-dialog.ts

+3
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ export const AlertDialog = {
4848
_backdropFade: { exitDuration: 150, entryDuration: 200 },
4949
_fade: { exitDuration: 100, entryDuration: 200 },
5050
_slide: { duration: 200, overlay: false },
51+
_overlay: {
52+
unmountOnExit: true,
53+
},
5154
},
5255
sizes,
5356
defaultProps: {

‎src/theme/components/input.ts

+10
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,16 @@ const baseStyle = (props: InterfaceInputProps & { theme: any }) => {
4242
_hover: {
4343
borderColor: 'primary.600',
4444
},
45+
_invalid: {
46+
borderColor: 'error.600',
47+
_hover: { borderColor: 'error.600' },
48+
_stack: {
49+
style: {
50+
outlineWidth: '0',
51+
boxShadow: `0 0 0 1px ${error[600]}`,
52+
},
53+
},
54+
},
4555
_focus: {
4656
borderColor: 'primary.600',
4757
_hover: { borderColor: 'primary.600' },

‎src/theme/components/menu.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ const baseStyle = {
1818
exit: { opacity: 0, transition: { duration: 150 } },
1919
style: StyleSheet.absoluteFill,
2020
},
21-
_overlay: {},
21+
_overlay: {
22+
unmountOnExit: true,
23+
},
2224
_backdrop: {
2325
bg: 'transparent',
2426
},

‎src/theme/components/popover.ts

+8
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
export const Popover = {
2+
baseStyle: () => ({
3+
_overlay: {
4+
unmountOnExit: true,
5+
},
6+
}),
7+
};
8+
19
export const PopoverCloseButton = {
210
baseStyle: () => ({
311
position: 'absolute',

0 commit comments

Comments
 (0)