Merge pull request #5458 from GeekyAnts/release/3.4.18

Release/3.4.18

Author: surajahmed

example/storybook/stories/hooks/useAccessibleColors/Basic.tsx

@@ -42,7 +42,7 @@ export const Example = () => {
       </Stack>
       <HStack mt="6" space="3">
         <Text>Toggle Accessible Colors</Text>
-        <Switch onToggle={toggleAccessibleColors} colorScheme="coolGray" />
+        <Switch onValueChange={toggleAccessibleColors} colorScheme="coolGray" />
       </HStack>
     </Center>
   );

example/storybook/stories/hooks/useSx/Basic.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useSx } from 'native-base';
+import type { StyledProps } from 'native-base';
+import { View, Text } from 'react-native';
+
+const textStyle: StyledProps = {
+  color: ['orange.900', 'white', 'black'],
+  textAlign: 'center',
+  size: '12',
+};
+
+export const Example = () => {
+  const sx = useSx();
+  console.log('Size', sx(textStyle));
+  return (
+    <View
+      style={[
+        sx({
+          p: 2,
+          bg: ['blue.300', 'violet.400', 'red.400'],
+          width: 48,
+          height: 48,
+        }),
+        { justifyContent: 'center', alignItems: 'center' },
+      ]}
+    >
+      <Text style={sx(textStyle)}>New Feat useSx in NativeBase</Text>
+    </View>
+  );
+};

example/storybook/stories/hooks/useSx/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+import Wrapper from '../../components/Wrapper';
+import { Example as Basic } from './Basic';
+
+storiesOf('useSx', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Basic', () => <Basic />);

example/storybook/stories/index.ts

@@ -86,7 +86,7 @@ export * from './hooks/useMediaQuery';
 export * from './hooks/useSafeArea';
 export * from './hooks/useContrastText';
 export * from './hooks/useAccessibleColors';
-
+export * from './hooks/useSx';
 // // Theme
 export * from './theme/Custom';
 export * from './theme/Mode';

package.json

@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.17",
+  "version": "3.4.18",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",

src/components/basic/ScrollView/types.ts

@@ -10,7 +10,7 @@ export interface InterfaceScrollViewProps
    * Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. */
   children?: JSX.Element | JSX.Element[] | string | any;
   /**
-   * pass props to contentContainerStyle, and this also resolved NB tokens.
+   * Pass props to contentContainerStyle, and this also resolves NB tokens.
    */
   _contentContainerStyle?: Partial<IScrollViewProps>;
 }

src/components/composites/Actionsheet/types.tsx

@@ -6,11 +6,11 @@ import type { CustomProps } from '../../../components/types';
 export interface InterfaceActionsheetProps
   extends InterfaceBoxProps<IActionsheetProps> {
   /**
-   * If true, the ActionSheet will open. Useful for controllable state behaviour
+   * If true, the ActionSheet will open. Useful for controllable state behavior.
    */
   isOpen?: boolean;
   /**
-   * Callback invoked when the modal is closed
+   * Callback invoked when the modal is closed.
    */
   onClose?: () => any;
   /**
@@ -36,15 +36,15 @@ export interface InterfaceActionsheetProps
 export interface IActionsheetContentProps
   extends InterfaceBoxProps<IActionsheetContentProps> {
   /**
-   * Props applied on area above actionsheet content
+   * Props applied on area above actionsheet content.
    */
   _dragIndicatorWrapperOffSet?: InterfaceBoxProps<IActionsheetContentProps>;
   /**
-   * Props applied on area around drag indicator
+   * Props applied on area around drag indicator.
    */
   _dragIndicatorWrapper?: InterfaceBoxProps<IActionsheetContentProps>;
   /**
-   * Props applied on drag indicator
+   * Props applied on drag indicator.
    */
   _dragIndicator?: InterfaceBoxProps<IActionsheetContentProps>;
 }

src/components/composites/Alert/types.tsx

@@ -13,7 +13,7 @@ export interface InterfaceAlertProps extends InterfaceBoxProps<IAlertProps> {
    */
   variant?: VariantType<'Alert'>;
 
-  /** The colorScheme of the Alert.
+  /** The color scheme of the Alert.
    */
   colorScheme?: ColorSchemeType;
 }

src/components/composites/Avatar/types.tsx

@@ -10,16 +10,16 @@ export interface InterfaceAvatarProps extends InterfaceBoxProps<IAvatarProps> {
    */
   source?: ImageSourcePropType;
   /**
-   * The size of the avatar
+   * The size of the avatar.
    * @default md
    */
   size?: ThemeComponentSizeType<'Avatar'>;
   /**
-   * For providing props to Image component inside Avatar
+   * For providing props to Image component inside the Avatar.
    */
   _image?: Partial<IImageProps>;
   /**
-   * ref to be attached to Avatar wrapper
+   * ref to be attached to the Avatar wrapper.
    */
   wrapperRef?: MutableRefObject<any>;
 }

src/components/composites/Fab/types.tsx

@@ -3,21 +3,21 @@ import type { InterfaceButtonProps } from '../../primitives/Button/types';
 
 export interface InterfaceFabProps extends InterfaceButtonProps {
   /**
-   * Placement of the Fab
+   * Placement of the Fab.
    * @default bottom-right
    */
   placement?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
   /**
-   * Text to be displayed in Fab
+   * Text to be displayed in Fab.
    */
   label?: JSX.Element | string;
   /**
-   * Icon to be displayed in Fab
+   * Icon to be displayed in Fab.
    */
   icon?: JSX.Element;
   /**
    * Determines whether the Fab should be rendered in a Portal.
-   * Refer this solution before using this prop
+   * Refer to this solution before using this prop-
    * https://github.com/GeekyAnts/NativeBase/issues/3817
    * @default true
    */

src/components/composites/IconButton/index.tsx

@@ -63,6 +63,7 @@ const IconButton = (
 
   return (
     <Pressable
+      disabled={isDisabled}
       accessibilityRole="button"
       ref={ref}
       onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}

src/components/composites/Menu/types.ts

@@ -10,28 +10,28 @@ import type { CustomProps } from '../../../components/types';
 
 export interface InterfaceMenuProps extends InterfaceBoxProps<IMenuProps> {
   /**
-   * Function that returns a React Element. This element will be used as a Trigger for the menu
+   * Function that returns a React Element. This element will be used as a Trigger for the menu.
    */
   trigger: (_props: any, state: { open: boolean }) => JSX.Element;
   /**
-   * This function will be invoked when menu is opened
+   * This function will be invoked when the menu is opened.
    */
   onOpen?: () => void;
   /**
-   * This function will be invoked when menu is closed. It'll also be called when user attempts to close the menu via Escape key or backdrop press.
+   * This function will be invoked when menu is closed.  It will also be called when the user attempts to close the menu via Escape key or backdrop press.
    */
   onClose?: () => void;
   /**
-   * Whether menu should be closed when a menu item is pressed
+   * Whether menu should be closed when a menu item is pressed.
    * @default true
    */
   closeOnSelect?: boolean;
   /**
-   * If true, the menu will be opened by default
+   * If true, the menu will be opened by default.
    */
   defaultIsOpen?: boolean;
   /**
-   * Whether the menu is opened. Useful for conrolling the open state
+   * Whether the menu is opened. Useful for controlling the open state.
    */
   isOpen?: boolean;
   /**
@@ -43,7 +43,7 @@ export interface InterfaceMenuProps extends InterfaceBoxProps<IMenuProps> {
    */
   offset?: number;
   /**
-   * Determines whether menu content should overlap with the trigger
+   * Determines whether menu content should overlap with the trigger.
    * @default false
    */
   shouldOverlapWithTrigger?: boolean;
@@ -85,19 +85,19 @@ export interface InterfaceMenuProps extends InterfaceBoxProps<IMenuProps> {
 
 export interface IMenuItemProps extends IPressableProps {
   /**
-   * Children of Menu Item
+   * Children of Menu Item.
    */
   children: string | JSX.Element | Array<JSX.Element>;
   /**
-   * Whether menu item is disabled
+   * Whether menu item is disabled.
    */
   isDisabled?: boolean;
   /**
-   * Props to be passed to Text
+   * Props to be passed to Text.
    */
   _text?: Partial<ITextProps>;
   /**
-   * This value will be available for the typeahead menu feature
+   * This value will be available for the typeahead menu feature.
    */
   textValue?: string;
 }
@@ -122,11 +122,11 @@ export interface IMenuItemOptionProps extends IMenuItemProps {
 }
 export interface IMenuGroupProps {
   /**
-   *  The title of the menu group
+   *  The title of the menu group.
    */
   title: string;
   /**
-   * The children of Menu group
+   * The children of the Menu group.
    */
   children: JSX.Element | Array<JSX.Element>;
   /**
@@ -141,15 +141,15 @@ export interface IMenuOptionGroupProps extends IMenuGroupProps {
    */
   type: 'radio' | 'checkbox';
   /**
-   * The initial value of the option group
+   * The initial value of the option group.
    */
   defaultValue?: string | number | string[] | number[];
   /**
-   * The value of the option group
+   * The value of the option group.
    */
   value?: string | number | Array<string> | Array<number>;
   /**
-   * Function called when selection changes
+   * Function called when selection changes.
    */
   onChange?: (val: any) => void;
 }

src/components/composites/Modal/types.ts

@@ -8,19 +8,19 @@ import type { ThemeComponentSizeType } from '../../../components/types/utils';
 import type { IOverlayProps } from '../../primitives/Overlay';
 export interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {
   /**
-   * If true, the modal will open. Useful for controllable state behaviour
+   * If true, the modal will open. Useful for controllable state behavior.
    */
   isOpen?: boolean;
   /**
-   * Callback invoked when the modal is closed
+   * Callback invoked when the modal is closed.
    */
   onClose?: any;
   /**
-   * If true, the modal will be opened by default
+   * If true, the modal will be opened by default.
    */
   defaultIsOpen?: boolean;
   /**
-   * The size of the modal
+   * The size of the modal.
    */
   size?: ThemeComponentSizeType<'Modal'>;
   /**
@@ -37,22 +37,22 @@ export interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {
    */
   avoidKeyboard?: boolean;
   /**
-   * If true, the modal will close when the overlay is clicked
+   * If true, the modal will close when the overlay is clicked.
    * @default true
    */
   closeOnOverlayClick?: boolean;
   /**
-   * If true, the modal will close when Escape key is pressed
+   * If true, the modal will close when Escape key is pressed.
    * @default true
    */
   isKeyboardDismissable?: boolean;
   /**
-   * If true, a backdrop element is visible
+   * If true, a backdrop element is visible.
    * @default true
    */
   overlayVisible?: boolean;
   /**
-   * If true, a backdrop element is visible
+   * If true, a backdrop element is visible.
    * @default true
    */
   backdropVisible?: boolean;
@@ -61,7 +61,7 @@ export interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {
    */
   _backdrop?: any;
   /**
-   * Sets the animation type
+   * Sets the animation type.
    * @default "fade"
    */
   animationPreset?: 'fade' | 'slide';

src/components/composites/Popover/types.ts

@@ -22,11 +22,11 @@ export type IArrowProps = {
 
 export interface InterfacePopoverProps {
   /**
-   * If true, the popover will be opened by default
+   * If true, the popover will be opened by default.
    */
   defaultIsOpen?: boolean;
   /**
-   * Whether the popover is opened. Useful for conrolling the open state
+   * Whether the popover is opened. Useful for controlling the open state.
    */
   isOpen?: boolean;
   /**
@@ -48,7 +48,7 @@ export interface InterfacePopoverProps {
    */
   finalFocusRef?: React.RefObject<any>;
   /**
-   * Function that returns a React Element. This element will be used as a Trigger for the popover
+   * Function that returns a React Element. This element will be used as a Trigger for the popover.
    */
   trigger: (_props: any, state: { open: boolean }) => JSX.Element;
   /**
@@ -60,16 +60,16 @@ export interface InterfacePopoverProps {
    */
   offset?: number;
   /**
-   * Determines whether menu content should overlap with the trigger
+   * Determines whether menu content should overlap with the trigger.
    * @default false
    */
   shouldOverlapWithTrigger?: boolean;
   /**
-   * Popover children
+   * Popover children.
    */
   children: React.ReactNode;
   /**
-   * If true, the modal will close when Escape key is pressed
+   * If true, the modal will close when Escape key is pressed.
    * @default true
    */
   isKeyboardDismissable?: boolean;
@@ -95,7 +95,7 @@ export interface InterfacePopoverProps {
    */
   onClose?: () => void;
   /**
-   * This function will be invoked when popover is opened
+   * This function will be invoked when popover is opened.
    */
   onOpen?: () => void;