diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index fb7ef7c93..08be6d71f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -24,7 +24,7 @@ If you are eager to start contributing code right away, you can go through [Nati
There are other ways you can contribute without writing a single line of code. Here are a few things you can do to help out:
1. **Replying and handling open issues.** We get a lot of issues every day, and some of them may lack necessary information. You can help out by guiding people through the process of filling out the issue template, asking for clarifying information, or pointing them to existing issues that match their description of the problem.
-2. **Reviewing pull requests for the docs.** Reviewing [documentation updates](https://github.com/nativebase/website/pulls) can be as simple as checking for spelling and grammar. If you encounter situations that can be explained better in the docs, click **Edit** at the bottom left of most docs pages to get started with your own contribution.
+2. **Reviewing pull requests for the docs.** Reviewing [documentation updates](https://github.com/GeekyAnts/nativebase-docs/pulls) can be as simple as checking for spelling and grammar. If you encounter situations that can be explained better in the docs, click **Edit** at the bottom left of most docs pages to get started with your own contribution.
3. **Help people write test plans.** Some pull requests sent to the main repository may lack a proper test plan. These help reviewers understand how the change was tested, and can speed up the time it takes for a contribution to be accepted.
Each of these tasks is highly impactful, and maintainers will greatly appreciate your help.
diff --git a/example/storybook/stories/components/Allcomponents.tsx b/example/storybook/stories/components/Allcomponents.tsx
new file mode 100644
index 000000000..eb2c6b6bf
--- /dev/null
+++ b/example/storybook/stories/components/Allcomponents.tsx
@@ -0,0 +1,139 @@
+//@ts-nocheck
+//uncomment above line to test typing of components
+import {
+ Badge,
+ IconButton,
+ Alert,
+ AspectRatio,
+ Avatar,
+ Breadcrumb,
+ Card,
+ Container,
+ Divider,
+ Kbd,
+ Progress,
+ Accordion,
+ FormControl,
+ Center,
+ Square,
+ Circle,
+ Fade,
+ ScaleFade,
+ PresenceTransition,
+ Slide,
+ SlideFade,
+ Popover,
+ AlertDialog,
+ Menu,
+ SimpleGrid,
+ Actionsheet,
+ Fab,
+ Modal,
+ Backdrop,
+ Tooltip,
+} from 'native-base';
+
+import {
+ Text,
+ Checkbox,
+ Radio,
+ Hidden,
+ Button,
+ Column,
+ Row,
+ Box,
+ Stack,
+ VStack,
+ HStack,
+ ZStack,
+ Slider,
+ Icon,
+ Input,
+ InputGroup,
+ InputLeftAddon,
+ InputRightAddon,
+ Image,
+ Spinner,
+ Heading,
+ Flex,
+ Switch,
+ TextArea,
+ Link,
+ Select,
+ Pressable,
+ Overlay,
+ Skeleton,
+} from 'native-base';
+
+export const Example = () => {
+ return (
+ <>
+
+
+
+ Hello
+
+
+
+ |
+
- {ToastDetails.map((item) => (
+ {ToastDetails.map((item, index) => (
toast.show({
diff --git a/package.json b/package.json
index 372e7a4f3..dcd9e2be8 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
"prettier --write"
]
},
- "version": "3.4.7",
+ "version": "3.4.8",
"license": "MIT",
"private": false,
"main": "lib/commonjs/index",
diff --git a/src/components/composites/Actionsheet/Actionsheet.tsx b/src/components/composites/Actionsheet/Actionsheet.tsx
index f8aca915a..edc06715a 100644
--- a/src/components/composites/Actionsheet/Actionsheet.tsx
+++ b/src/components/composites/Actionsheet/Actionsheet.tsx
@@ -4,6 +4,7 @@ import type { IActionsheetProps } from './types';
import { usePropsResolution } from '../../../hooks';
import { ActionSheetContext } from './ActionSheetContext';
import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { Platform } from 'react-native';
const Actionsheet = (
{ children, hideDragIndicator = false, ...props }: IActionsheetProps,
@@ -20,6 +21,9 @@ const Actionsheet = (
if (useHasResponsiveProps(props)) {
return null;
}
+ //Fixing overlay position for Web due to scrollView issue
+ let overlayStyle = Platform.OS === 'web' ? { position: 'fixed' } : {};
+
return (
{children}
diff --git a/src/components/composites/Avatar/Avatar.tsx b/src/components/composites/Avatar/Avatar.tsx
index 036de88c9..adb54ccc6 100644
--- a/src/components/composites/Avatar/Avatar.tsx
+++ b/src/components/composites/Avatar/Avatar.tsx
@@ -21,7 +21,13 @@ const Avatar = ({ children, ...props }: IAvatarProps, ref: any) => {
typeof child?.type === 'object' &&
child?.type.displayName === 'AvatarBadge'
) {
- Badge = React.cloneElement(child, { size: _badgeSize[0] });
+ Badge = React.cloneElement(child, {
+ size: child?.props?.size
+ ? child?.props?.size
+ : _badgeSize
+ ? _badgeSize[0]
+ : undefined,
+ });
} else {
remainingChildren.push(child);
}
diff --git a/src/components/composites/Modal/Modal.tsx b/src/components/composites/Modal/Modal.tsx
index c75731069..d818dc846 100644
--- a/src/components/composites/Modal/Modal.tsx
+++ b/src/components/composites/Modal/Modal.tsx
@@ -37,6 +37,7 @@ const Modal = (
_backdropFade,
_fade,
_slide,
+ _overlay,
...resolvedProps
} = usePropsResolution('Modal', rest);
@@ -83,6 +84,7 @@ const Modal = (
isKeyboardDismissable={isKeyboardDismissable}
animationPreset={animationPreset}
useRNModalOnAndroid
+ {..._overlay}
>
diff --git a/src/components/composites/Modal/types.ts b/src/components/composites/Modal/types.ts
index 7ed1d52f1..9e1411748 100644
--- a/src/components/composites/Modal/types.ts
+++ b/src/components/composites/Modal/types.ts
@@ -5,6 +5,7 @@ import type { CustomProps } from '../../../components/types';
import type { IScrollViewProps } from '../../basic/ScrollView';
import type { IFadeProps, ISlideProps } from '../Transitions';
import type { ThemeComponentSizeType } from '../../../components/types/utils';
+import type { IOverlayProps } from '../../primitives/Overlay';
export interface InterfaceModalProps extends InterfaceBoxProps {
/**
* If true, the modal will open. Useful for controllable state behaviour
@@ -76,6 +77,10 @@ export interface InterfaceModalProps extends InterfaceBoxProps {
* Props applied on Child Slide Animation.
*/
_slide?: Partial;
+ /**
+ * Props to be passed to the Overlay used inside of Modal.
+ */
+ _overlay?: IOverlayProps;
}
export type IModalComponentType = ((
diff --git a/src/components/composites/Toast/Toast.tsx b/src/components/composites/Toast/Toast.tsx
index 5e03102ec..e380de53f 100644
--- a/src/components/composites/Toast/Toast.tsx
+++ b/src/components/composites/Toast/Toast.tsx
@@ -11,7 +11,7 @@ import { AccessibilityInfo, Platform, SafeAreaView } from 'react-native';
import Box from '../../primitives/Box';
import { usePropsResolution } from '../../../hooks';
import type { IToastContext, IToastInfo, IToast, IToastProps } from './types';
-
+import { useKeyboardBottomInset } from '../../../utils';
const INSET = 50;
const POSITIONS = {
@@ -71,6 +71,7 @@ const CustomToast = ({ _overlay, _stack, _presenceTransition }: any) => {
ToastContext
);
+ const bottomInset = useKeyboardBottomInset() * 2;
const getPositions = () => {
return Object.keys(toastInfo);
};
@@ -110,7 +111,19 @@ const CustomToast = ({ _overlay, _stack, _presenceTransition }: any) => {
translateY: transitionConfig[position],
}}
>
- {toast.component}
+
+
+ {toast.component}
+
+
))
}
diff --git a/src/components/composites/Transitions/Fade.tsx b/src/components/composites/Transitions/Fade.tsx
index 8953869be..a3406fd79 100644
--- a/src/components/composites/Transitions/Fade.tsx
+++ b/src/components/composites/Transitions/Fade.tsx
@@ -5,16 +5,26 @@ import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
import { usePropsResolution } from '../../../hooks/';
const Fade = ({ children, ...props }: IFadeProps, ref?: any) => {
- const { in: animationState, ...resolvedProps } = usePropsResolution(
- 'Fade',
- props
- );
+ const {
+ in: animationState,
+ entryDuration,
+ exitDuration,
+ ...resolvedProps
+ } = usePropsResolution('Fade', props);
//TODO: refactor for responsive prop
if (useHasResponsiveProps(props)) {
return null;
}
+
+ if (entryDuration) {
+ resolvedProps.animate.transition.duration = entryDuration;
+ }
+ if (exitDuration) {
+ resolvedProps.exit.transition.duration = exitDuration;
+ }
+
return (
-
+
{children}
);
diff --git a/src/components/composites/Transitions/ScaleFade.tsx b/src/components/composites/Transitions/ScaleFade.tsx
index 47c9acfa3..b8cf03206 100644
--- a/src/components/composites/Transitions/ScaleFade.tsx
+++ b/src/components/composites/Transitions/ScaleFade.tsx
@@ -5,14 +5,24 @@ import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
import { usePropsResolution } from '../../../hooks/';
const ScaleFade = ({ children, ...props }: IScaleFadeProps, ref?: any) => {
- const { in: animationState, ...resolvedProps } = usePropsResolution(
- 'ScaleFade',
- props
- );
+ const {
+ in: animationState,
+ duration,
+ initialScale,
+ ...resolvedProps
+ } = usePropsResolution('ScaleFade', props);
//TODO: refactor for responsive prop
if (useHasResponsiveProps(props)) {
return null;
}
+ if (duration) {
+ resolvedProps.animate.transition.duration = duration;
+ resolvedProps.exit.transition.duration = duration;
+ }
+ if (initialScale) {
+ resolvedProps.animate.initial.scale = initialScale;
+ resolvedProps.exit.initial.scale = initialScale;
+ }
return (
diff --git a/src/components/composites/Transitions/types.tsx b/src/components/composites/Transitions/types.tsx
index cd108415c..d55f995ab 100644
--- a/src/components/composites/Transitions/types.tsx
+++ b/src/components/composites/Transitions/types.tsx
@@ -1,18 +1,24 @@
import type { ReactNode } from 'react';
import type { ViewProps } from 'react-native';
import type { InterfaceBoxProps } from '../../primitives/Box';
-
+import type { IOverlayProps } from '../../primitives/Overlay';
export type IFadeProps = InterfaceBoxProps & {
in?: boolean;
entryDuration?: number;
exitDuration?: number;
delay?: number;
+ initial?: ISupportedTransitions;
+ animate?: ITransitionStyleProps;
+ exit?: ITransitionStyleProps;
};
export type IScaleFadeProps = InterfaceBoxProps & {
in?: boolean;
duration?: number;
delay?: number;
initialScale?: number;
+ initial?: ISupportedTransitions;
+ animate?: ITransitionStyleProps;
+ exit?: ITransitionStyleProps;
};
export type ISlideProps = InterfaceBoxProps & {
in?: boolean;
@@ -20,6 +26,10 @@ export type ISlideProps = InterfaceBoxProps & {
delay?: number;
placement?: 'top' | 'bottom' | 'right' | 'left';
overlay?: boolean;
+ /**
+ * Props to be passed to the Overlay used inside of Slide when overlay is true.
+ */
+ _overlay?: IOverlayProps;
};
export type ISlideFadeProps = InterfaceBoxProps & {
in?: boolean;
diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts
index 444888bf1..bff3274ab 100644
--- a/src/theme/components/alert.ts
+++ b/src/theme/components/alert.ts
@@ -1,6 +1,8 @@
import { getColor, getColorScheme, transparentize } from '../tools';
-
-function getBg(props: Record) {
+import type { InterfaceAlertProps } from '../../components/composites/Alert/types';
+function getBg(
+ props: InterfaceAlertProps & { theme: any } & { colorScheme: any }
+) {
let { theme, colorScheme, status, variant } = props;
colorScheme = getColorScheme(props, !status ? colorScheme : status);
@@ -18,7 +20,9 @@ function getBg(props: Record) {
return { lightBg, darkBg };
}
-const variantSubtle = (props: Record) => {
+const variantSubtle = (
+ props: InterfaceAlertProps & { theme: any } & { colorScheme: any }
+) => {
let { colorScheme, status } = props;
const { lightBg, darkBg } = getBg(props);
@@ -36,7 +40,7 @@ const variantSubtle = (props: Record) => {
};
};
-const variantOutline = (props: Record) => {
+const variantOutline = (props: InterfaceAlertProps & { colorScheme: any }) => {
let { colorScheme, status } = props;
colorScheme = getColorScheme(props, !status ? colorScheme : status);
@@ -54,7 +58,9 @@ const variantOutline = (props: Record) => {
};
};
-const variantOutlineLight = (props: Record) => {
+const variantOutlineLight = (
+ props: InterfaceAlertProps & { theme: any } & { colorScheme: any }
+) => {
let { colorScheme, status, theme } = props;
colorScheme = getColorScheme(props, !status ? colorScheme : status);
@@ -72,7 +78,9 @@ const variantOutlineLight = (props: Record) => {
};
};
-const variantSolid = (props: Record) => {
+const variantSolid = (
+ props: InterfaceAlertProps & { theme: any } & { colorScheme: any }
+) => {
const { lightBg, darkBg } = getBg(props);
return {
_light: {
@@ -85,7 +93,9 @@ const variantSolid = (props: Record) => {
};
};
-const variantLeftAccent = (props: Record) => {
+const variantLeftAccent = (
+ props: InterfaceAlertProps & { theme: any } & { colorScheme: any }
+) => {
let { colorScheme, status } = props;
const { lightBg, darkBg } = getBg(props);
@@ -106,7 +116,9 @@ const variantLeftAccent = (props: Record) => {
};
};
-const variantTopAccent = (props: Record) => {
+const variantTopAccent = (
+ props: InterfaceAlertProps & { theme: any } & { colorScheme: any }
+) => {
let { colorScheme, status } = props;
const { lightBg, darkBg } = getBg(props);
@@ -128,12 +140,12 @@ const variantTopAccent = (props: Record) => {
};
const variants = {
- 'subtle': variantSubtle,
- 'solid': variantSolid,
- 'left-accent': variantLeftAccent,
- 'top-accent': variantTopAccent,
- 'outline': variantOutline,
- 'outline-light': variantOutlineLight,
+ 'subtle': variantSubtle as any,
+ 'solid': variantSolid as any,
+ 'left-accent': variantLeftAccent as any,
+ 'top-accent': variantTopAccent as any,
+ 'outline': variantOutline as any,
+ 'outline-light': variantOutlineLight as any,
};
export const Alert = {
diff --git a/src/theme/components/avatar-group.ts b/src/theme/components/avatar-group.ts
index 1baf31401..ce36e527c 100644
--- a/src/theme/components/avatar-group.ts
+++ b/src/theme/components/avatar-group.ts
@@ -1,4 +1,5 @@
-function baseStyle({ isVertical }: Record) {
+import type { IAvatarGroupProps } from '../../components/composites/Avatar/types';
+function baseStyle({ isVertical }: IAvatarGroupProps) {
return {
flexDirection: isVertical ? 'column-reverse' : 'row-reverse',
space: -4,
diff --git a/src/theme/components/avatar.ts b/src/theme/components/avatar.ts
index 781d74445..a1eeb3a29 100644
--- a/src/theme/components/avatar.ts
+++ b/src/theme/components/avatar.ts
@@ -1,6 +1,6 @@
import { randomColor, getRandomString } from './../tools';
-
-const baseStyle = (props: Record) => {
+import type { InterfaceAvatarProps } from '../../components/composites/Avatar/types';
+const baseStyle = (props: InterfaceAvatarProps & { name: string }) => {
const { name } = props;
const bg = name
? randomColor({ string: getRandomString(5) + name })
diff --git a/src/theme/components/badge.ts b/src/theme/components/badge.ts
index 0431b1dc3..3788064de 100644
--- a/src/theme/components/badge.ts
+++ b/src/theme/components/badge.ts
@@ -1,5 +1,5 @@
import { getColorScheme } from '../tools';
-
+import type { InterfaceBadgeProps } from '../../components/composites/Badge/types';
const baseStyle = {
flexDirection: 'row',
justifyContent: 'center',
@@ -10,7 +10,7 @@ const baseStyle = {
_text: { fontSize: 'xs', fontWeight: 'medium' },
};
-function variantSolid(props: Record) {
+function variantSolid(props: InterfaceBadgeProps & { colorScheme: any }) {
const colorScheme = getColorScheme(props);
return {
_text: {
@@ -26,7 +26,7 @@ function variantSolid(props: Record) {
};
}
-function variantSubtle(props: Record) {
+function variantSubtle(props: InterfaceBadgeProps & { colorScheme: any }) {
const colorScheme = getColorScheme(props);
return {
_text: { color: `${colorScheme}.900` },
@@ -39,7 +39,7 @@ function variantSubtle(props: Record) {
};
}
-function variantOutline(props: Record) {
+function variantOutline(props: InterfaceBadgeProps & { colorScheme: any }) {
const colorScheme = getColorScheme(props);
return {
_light: {
@@ -62,9 +62,9 @@ function variantOutline(props: Record) {
}
const variants = {
- solid: variantSolid,
- subtle: variantSubtle,
- outline: variantOutline,
+ solid: variantSolid as any,
+ subtle: variantSubtle as any,
+ outline: variantOutline as any,
};
const defaultProps = {
diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts
index b76edb60b..475526ec7 100644
--- a/src/theme/components/button.ts
+++ b/src/theme/components/button.ts
@@ -1,6 +1,7 @@
+import type { InterfaceButtonProps } from '../../components/primitives/Button/types';
import { mode } from './../tools';
-const baseStyle = (props: Record) => {
+const baseStyle = (props: InterfaceButtonProps & { theme: any }) => {
const { primary } = props.theme.colors;
const focusRing = mode(
{
@@ -50,7 +51,7 @@ const baseStyle = (props: Record) => {
};
};
-function variantGhost({ colorScheme }: Record) {
+function variantGhost({ colorScheme }: InterfaceButtonProps) {
return {
_light: {
_text: {
@@ -89,7 +90,7 @@ function variantGhost({ colorScheme }: Record) {
};
}
-function variantOutline({ colorScheme }: Record) {
+function variantOutline({ colorScheme }: InterfaceButtonProps) {
return {
borderWidth: '1px',
@@ -132,7 +133,7 @@ function variantOutline({ colorScheme }: Record) {
};
}
-function variantSolid({ colorScheme }: Record) {
+function variantSolid({ colorScheme }: InterfaceButtonProps) {
return {
_text: {
color: 'text.50',
@@ -165,7 +166,7 @@ function variantSolid({ colorScheme }: Record) {
};
}
-function variantSubtle({ colorScheme }: Record) {
+function variantSubtle({ colorScheme }: InterfaceButtonProps) {
return {
_text: {
color: `${colorScheme}.900`,
@@ -198,7 +199,7 @@ function variantSubtle({ colorScheme }: Record) {
};
}
-function variantLink({ colorScheme }: Record) {
+function variantLink({ colorScheme }: InterfaceButtonProps) {
return {
_icon: {
color: `${colorScheme}.600`,
@@ -241,12 +242,12 @@ function variantLink({ colorScheme }: Record) {
}
const variants = {
- ghost: variantGhost,
- outline: variantOutline,
- solid: variantSolid,
- subtle: variantSubtle,
- link: variantLink,
- unstyled: {},
+ ghost: variantGhost as any,
+ outline: variantOutline as any,
+ solid: variantSolid as any,
+ subtle: variantSubtle as any,
+ link: variantLink as any,
+ unstyled: {} as any,
};
const sizes = {
diff --git a/src/theme/components/input.ts b/src/theme/components/input.ts
index 91360afaf..9f5075ee7 100644
--- a/src/theme/components/input.ts
+++ b/src/theme/components/input.ts
@@ -1,5 +1,6 @@
import { transparentize } from '../tools';
-const baseStyle = (props: any) => {
+import type { InterfaceInputProps } from '../../components/primitives/Input/types';
+const baseStyle = (props: InterfaceInputProps & { theme: any }) => {
const { primary, error } = props.theme.colors;
return {
@@ -128,7 +129,7 @@ const baseStyle = (props: any) => {
};
};
-function roundedStyle(props: Record) {
+function roundedStyle(props: InterfaceInputProps & { theme: any }) {
const { theme } = props;
return {
borderRadius: 'full',
@@ -138,7 +139,7 @@ function roundedStyle(props: Record) {
},
};
}
-function outlineStyle(props: Record) {
+function outlineStyle(props: InterfaceInputProps & { theme: any }) {
const { theme } = props;
return {
borderWidth: '1',
@@ -147,7 +148,7 @@ function outlineStyle(props: Record) {
},
};
}
-function filledStyle(props: Record) {
+function filledStyle(props: InterfaceInputProps & { theme: any }) {
const { theme } = props;
return {
borderWidth: '1',
@@ -192,7 +193,7 @@ function unstyledStyle() {
},
};
}
-function underlinedStyle(props: Record) {
+function underlinedStyle(props: InterfaceInputProps & { theme: any }) {
const { primary, error } = props.theme.colors;
return {
@@ -240,11 +241,11 @@ function underlinedStyle(props: Record) {
}
const variants = {
- outline: outlineStyle,
- underlined: underlinedStyle,
- rounded: roundedStyle,
- filled: filledStyle,
- unstyled: unstyledStyle,
+ outline: outlineStyle as any,
+ underlined: underlinedStyle as any,
+ rounded: roundedStyle as any,
+ filled: filledStyle as any,
+ unstyled: unstyledStyle as any,
};
const sizes = {
diff --git a/src/theme/components/toast.ts b/src/theme/components/toast.ts
index d2130ca1b..d3325ee80 100644
--- a/src/theme/components/toast.ts
+++ b/src/theme/components/toast.ts
@@ -16,6 +16,7 @@ const baseStyle = (props: Record) => {
alignItems: 'center',
justifyContent: 'center',
pointerEvents: 'box-none',
+ _web: { position: 'fixed' },
},
_overlay: {},
_presenceTransition: {
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 6c24221f5..2fc59825c 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -31,5 +31,5 @@ export interface ITheme extends ICustomTheme, Omit {}
export { theme, tools as themeTools };
export { getColor } from './styled-system';
-export { StyledProps } from './types';
+export type { StyledProps } from './types';
export * from './v33x-theme';
diff --git a/src/theme/styled-system.ts b/src/theme/styled-system.ts
index fcb02181e..954b83087 100644
--- a/src/theme/styled-system.ts
+++ b/src/theme/styled-system.ts
@@ -531,10 +531,10 @@ export const typography = {
fontFamily: {
property: 'fontFamily',
scale: 'fonts',
- transformer: (val: any, scale: any) => {
- const value = get(scale, val);
- return value ? value.toString() : undefined;
- },
+ // transformer: (val: any, scale: any) => {
+ // const value = get(scale, val);
+ // return value ? value.toString() : undefined;
+ // },
},
fontSize: {
property: 'fontSize',
diff --git a/src/utils/getSpacedChildren.tsx b/src/utils/getSpacedChildren.tsx
index 6bfc37d40..d7eee167a 100644
--- a/src/utils/getSpacedChildren.tsx
+++ b/src/utils/getSpacedChildren.tsx
@@ -17,17 +17,34 @@ type SpaceType =
// Thanks @gregberge for code and @nandorojo for suggestion.
// Original source: https://github.com/gregberge/react-flatten-children
type ReactChildArray = ReturnType;
-function flattenChildren(children: React.ReactNode): ReactChildArray {
+function flattenChildren(
+ children: JSX.Element[] | JSX.Element,
+ keys: (string | number)[] = []
+): ReactChildArray {
const childrenArray = React.Children.toArray(children);
- return childrenArray.reduce((flatChildren: ReactChildArray, child) => {
- if ((child as React.ReactElement).type === React.Fragment) {
- return flatChildren.concat(
- flattenChildren((child as React.ReactElement).props.children)
- );
- }
- flatChildren.push(child);
- return flatChildren;
- }, []);
+ return childrenArray.reduce(
+ (flatChildren: ReactChildArray, child: any, index: number) => {
+ if ((child as React.ReactElement).type === React.Fragment) {
+ return flatChildren.concat(
+ flattenChildren(
+ (child as React.ReactElement).props.children,
+ keys.concat(child.key || index)
+ )
+ );
+ }
+ if (React.isValidElement(child)) {
+ flatChildren.push(
+ React.cloneElement(child, {
+ key: keys.concat(String(child.key || index)).join('.'),
+ })
+ );
+ } else {
+ flatChildren.push(child);
+ }
+ return flatChildren;
+ },
+ []
+ );
}
const getSpacedChildren = (