react-native-ui-lib 7.38.1-snapshot.6326 → 7.38.1-snapshot.6335

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.38.1-snapshot.6326",
+  "version": "7.38.1-snapshot.6335",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/avatar/avatar.api.json

@@ -12,7 +12,7 @@
     {
       "name": "animate",
       "type": "boolean",
-      "description": "Adds fade in animation when Avatar image loads",
+      "description": "Adds fade in animation when Avatar image loads. This prop isn't supported on web (will be set to false by default when using web).",
       "default": "false"
     },
     {"name": "backgroundColor", "type": "string", "description": "Background color for Avatar"},

package/src/components/avatar/index.d.ts

@@ -162,29 +162,30 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
      * Image props object
      */
     imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
+        /**
+         * Avatar colors to be used when useAutoColors is true
+         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined;
+        supportRTL?: boolean | undefined; /**
+         * Background color for Avatar
+         */
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined;
+        overlayType?: string | undefined; /**
+         * Image props object
+         */
         overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
         overlayColor?: string | undefined;
         customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
         errorSource?: import("../image").ImageSourceType;
-        imageId?: string | undefined; /**
-         * Listener-callback for when an image's (uri) loading
-         * fails (equiv. to Image.onError()).
-         */
+        imageId?: string | undefined;
         useBackgroundContainer?: boolean | undefined;
         width?: string | number | undefined;
         height?: string | number | undefined;
-        source: import("../image").ImageSourceType; /**
-         * Hash the name (or label) to get a color, so each name will have a specific color.
-         * Default is false.
-         */
+        source: import("../image").ImageSourceType;
     } & AnimatedImageProps> | undefined;
     /**
      * Image style object used to pass additional style props
@@ -290,29 +291,30 @@ declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps,
      * Image props object
      */
     imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
+        /**
+         * Avatar colors to be used when useAutoColors is true
+         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined;
+        supportRTL?: boolean | undefined; /**
+         * Background color for Avatar
+         */
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined;
+        overlayType?: string | undefined; /**
+         * Image props object
+         */
         overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
         overlayColor?: string | undefined;
         customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
         errorSource?: import("../image").ImageSourceType;
-        imageId?: string | undefined; /**
-         * Listener-callback for when an image's (uri) loading
-         * fails (equiv. to Image.onError()).
-         */
+        imageId?: string | undefined;
         useBackgroundContainer?: boolean | undefined;
         width?: string | number | undefined;
         height?: string | number | undefined;
-        source: import("../image").ImageSourceType; /**
-         * Hash the name (or label) to get a color, so each name will have a specific color.
-         * Default is false.
-         */
+        source: import("../image").ImageSourceType;
     } & AnimatedImageProps> | undefined;
     /**
      * Image style object used to pass additional style props

package/src/components/avatar/index.js

@@ -16,6 +16,7 @@ import AnimatedImage from "../animatedImage";
 import * as AvatarHelper from "../../helpers/AvatarHelper";
 import { useThemeProps } from "../../hooks";
 import { isSvg } from "../../utils/imageUtils";
+import Constants from "../../commons/Constants";
 export let BadgePosition = /*#__PURE__*/function (BadgePosition) {
   BadgePosition["TOP_RIGHT"] = "TOP_RIGHT";
   BadgePosition["TOP_LEFT"] = "TOP_LEFT";
@@ -149,7 +150,7 @@ const Avatar = forwardRef((props, ref) => {
   const renderImage = () => {
     if (source !== undefined) {
       // Looks like reanimated does not support SVG
-      const ImageContainer = animate && !isSvg(source) ? AnimatedImage : Image;
+      const ImageContainer = animate && !isSvg(source) && !Constants.isWeb ? AnimatedImage : Image;
       return <ImageContainer style={_imageStyle} source={source} onLoadStart={onImageLoadStart} onLoadEnd={onImageLoadEnd} onError={onImageLoadError} testID={`${testID}.image`} width={size} height={size} containerStyle={_baseContainerStyle} {...imageProps} />;
     }
   };

package/src/components/badge/index.js

@@ -10,6 +10,8 @@ import Image from "../image";
 import View from "../view";
 import Text from "../text";
 const LABEL_FORMATTER_VALUES = [1, 2, 3, 4];
+const DEFAULT_PIMPLE_SIZE = 10;
+const DEFAULT_BADGE_SIZE = 20;
 /**
  * @description: Round colored badge, typically used to show a number
  * @extends: View
@@ -37,7 +39,14 @@ class Badge extends PureComponent {
     };
   }
   get size() {
-    return this.props.size || 20;
+    const {
+      size,
+      label
+    } = this.props;
+    if (size !== undefined) {
+      return size;
+    }
+    return label === undefined ? DEFAULT_PIMPLE_SIZE : DEFAULT_BADGE_SIZE;
   }
   isSmallBadge() {
     return this.size <= 16;

package/src/components/picker/PickerItemsList.js

@@ -15,7 +15,6 @@ import { PickerModes } from "./types";
 import PickerContext from "./PickerContext";
 import PickerItem from "./PickerItem";
 import { Constants } from "../../commons/new";
-import PickerSelectionControlBar from "./PickerSelectionControlBar";
 const keyExtractor = (_item, index) => index.toString();
 const PickerItemsList = props => {
   const {
@@ -36,8 +35,7 @@ const PickerItemsList = props => {
     testID,
     showLoader,
     customLoaderElement,
-    renderCustomTopElement,
-    selectionStatus
+    renderCustomTopElement
   } = props;
   const context = useContext(PickerContext);
   const [wheelPickerValue, setWheelPickerValue] = useState(context.value ?? items?.[0]?.value);
@@ -132,18 +130,10 @@ const PickerItemsList = props => {
           <ActivityIndicator />
         </View>;
   };
-  const renderSelectionStatus = useMemo(() => {
-    const props = {
-      ...selectionStatus,
-      items
-    };
-    return <PickerSelectionControlBar {...props} value={context?.value} toggleAllItemsSelection={context?.toggleAllItemsSelection} />;
-  }, [selectionStatus, items, context?.value, context?.toggleAllItemsSelection]);
   const renderContent = () => {
     return useWheelPicker ? renderWheel() : <>
         {renderSearchInput()}
         {renderCustomTopElement?.(context.value)}
-        {mode === PickerModes.MULTI && renderSelectionStatus}
         {renderList()}
       </>;
   };

package/src/components/picker/helpers/usePickerSelection.d.ts

@@ -9,7 +9,5 @@ declare const usePickerSelection: (props: UsePickerSelectionProps) => {
     onDoneSelecting: (item: PickerValue) => void;
     toggleItemSelection: (item: PickerSingleValue) => void;
     cancelSelect: () => void;
-    setMultiFinalValue: import("react").Dispatch<import("react").SetStateAction<PickerMultiValue>>;
-    toggleAllItemsSelection: (itemsToToggle: PickerMultiValue, select: boolean) => void;
 };
 export default usePickerSelection;

package/src/components/picker/helpers/usePickerSelection.js

@@ -43,16 +43,11 @@ const usePickerSelection = props => {
     pickerExpandableRef.current?.closeExpandable?.();
     topBarProps?.onCancel?.();
   }, [multiFinalValue, topBarProps]);
-  const toggleAllItemsSelection = useCallback((itemsToToggle, select) => {
-    setMultiDraftValue(select ? itemsToToggle : []);
-  }, []);
   return {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect,
-    setMultiFinalValue,
-    toggleAllItemsSelection
+    cancelSelect
   };
 };
 export default usePickerSelection;

package/src/components/picker/index.d.ts

@@ -1,16 +1,15 @@
 import React from 'react';
 import PickerItem from './PickerItem';
 import { extractPickerItems } from './PickerPresenter';
-import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectAllType } from './types';
+import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from './types';
 type PickerStatics = {
     Item: typeof PickerItem;
     modes: typeof PickerModes;
     fieldTypes: typeof PickerFieldTypes;
     extractPickerItems: typeof extractPickerItems;
-    selectAllType: typeof PickerSelectAllType;
 };
 declare const Picker: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<unknown>>;
-export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectAllType };
+export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods };
 export { Picker };
 declare const _default: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<unknown>> & PickerStatics;
 export default _default;

package/src/components/picker/index.js

@@ -18,7 +18,7 @@ import useFieldType from "./helpers/useFieldType";
 import useNewPickerProps from "./helpers/useNewPickerProps";
 // import usePickerMigrationWarnings from './helpers/usePickerMigrationWarnings';
 import { extractPickerItems } from "./PickerPresenter";
-import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectAllType } from "./types";
+import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from "./types";
 const DEFAULT_DIALOG_PROPS = {
   bottom: true,
   width: '100%'
@@ -58,7 +58,6 @@ const Picker = React.forwardRef((props, ref) => {
     showLoader,
     customLoaderElement,
     renderCustomTopElement,
-    selectionStatus,
     ...others
   } = themeProps;
   const {
@@ -102,8 +101,7 @@ const Picker = React.forwardRef((props, ref) => {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect,
-    toggleAllItemsSelection
+    cancelSelect
   } = usePickerSelection({
     migrate,
     value,
@@ -156,10 +154,9 @@ const Picker = React.forwardRef((props, ref) => {
       getItemLabel,
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
-      selectionLimit,
-      toggleAllItemsSelection
+      selectionLimit
     };
-  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting, toggleAllItemsSelection]);
+  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting]);
   const renderPickerItem = useCallback((item, index) => {
     return <PickerItem key={`${index}-${item.value}`} {...item} />;
   }, []);
@@ -204,7 +201,7 @@ const Picker = React.forwardRef((props, ref) => {
       ...topBarProps,
       onCancel: cancelSelect,
       onDone: mode === PickerModes.MULTI ? () => onDoneSelecting(multiDraftValue) : undefined
-    }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} showLoader={showLoader} customLoaderElement={customLoaderElement} renderCustomTopElement={renderCustomTopElement} selectionStatus={selectionStatus}>
+    }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} showLoader={showLoader} customLoaderElement={customLoaderElement} renderCustomTopElement={renderCustomTopElement}>
         {filteredItems}
       </PickerItemsList>;
   }, [testID, mode, useDialog, selectedItemPosition, topBarProps, cancelSelect, onDoneSelecting, multiDraftValue, showSearch, searchStyle, searchPlaceholder, _onSearchChange, renderCustomSearch, renderHeader, listProps, filteredItems, useSafeArea, useWheelPicker, items, showLoader]);
@@ -224,8 +221,6 @@ Picker.modes = PickerModes;
 Picker.fieldTypes = PickerFieldTypes;
 // @ts-expect-error
 Picker.extractPickerItems = extractPickerItems;
-//@ts-ignore
-Picker.selectAllType = PickerSelectAllType;
-export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectAllType };
+export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods };
 export { Picker }; // For tests
 export default Picker;

package/src/components/picker/types.d.ts

@@ -4,8 +4,6 @@ import { ExpandableOverlayProps, ExpandableOverlayMethods } from '../../incubato
 import { ModalTopBarProps } from '../modal/TopBar';
 import { TextFieldMethods, TextFieldProps } from '../textField';
 import { TouchableOpacityProps } from '../touchableOpacity';
-import { ButtonProps } from '../button';
-import { CheckboxProps } from '../checkbox';
 export declare enum PickerModes {
     SINGLE = "SINGLE",
     MULTI = "MULTI"
@@ -15,11 +13,6 @@ export declare enum PickerFieldTypes {
     filter = "filter",
     settings = "settings"
 }
-export declare enum PickerSelectAllType {
-    none = "none",
-    button = "button",
-    checkbox = "checkbox"
-}
 export type PickerSingleValue = string | number;
 export type PickerMultiValue = PickerSingleValue[];
 export type PickerValue = PickerSingleValue | PickerMultiValue | undefined;
@@ -154,41 +147,6 @@ type PickerExpandableOverlayProps = {
      */
     enableModalBlur?: boolean;
 };
-interface getLabelOptions {
-    selectedCount?: number;
-    value?: PickerItemProps[];
-    isSelectedAll?: boolean;
-}
-type PickerSelectionStatusProps = {
-    /**
-     * A function that returns the label to show for the selected Picker value
-     */
-    getLabel?: (options?: getLabelOptions) => string;
-    /**
-     * Select all element type
-     */
-    selectAllType?: PickerSelectAllType | `${PickerSelectAllType}`;
-    /**
-     * Button props
-     */
-    buttonProps?: ButtonProps;
-    /**
-     * Checkbox props
-     */
-    checkboxProps?: CheckboxProps;
-    /**
-     * Custom container style
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Control weather to show the label or not
-     */
-    showLabel?: boolean;
-    /**
-     * Custom label to show next to the selection element.
-     */
-    customLabel?: string;
-};
 export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & PickerPropsDeprecation & PickerExpandableOverlayProps & PickerListProps & {
     /**
      * Use dialog instead of modal picker
@@ -235,10 +193,6 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & Picke
      * Render custom top element
      */
     renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
-    /**
-     *
-     */
-    selectionStatus?: PickerSelectionStatusProps;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -332,9 +286,8 @@ export interface PickerContextProps extends Pick<PickerProps, 'migrate' | 'value
     isMultiMode: boolean;
     onSelectedLayout: (event: any) => any;
     selectionLimit: PickerProps['selectionLimit'];
-    toggleAllItemsSelection?: (itemsToToggle: PickerMultiValue, select: boolean) => void;
 }
-export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'selectionStatus' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
+export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
     items?: {
         value: any;
         label: any;

package/src/components/picker/types.js

@@ -10,12 +10,6 @@ export let PickerFieldTypes = /*#__PURE__*/function (PickerFieldTypes) {
   PickerFieldTypes["settings"] = "settings";
   return PickerFieldTypes;
 }({});
-export let PickerSelectAllType = /*#__PURE__*/function (PickerSelectAllType) {
-  PickerSelectAllType["none"] = "none";
-  PickerSelectAllType["button"] = "button";
-  PickerSelectAllType["checkbox"] = "checkbox";
-  return PickerSelectAllType;
-}({});
 
 // TODO: Remove type
 // type PickerValueDeprecated = {value: string | number; label: string};

package/src/index.d.ts

@@ -67,7 +67,7 @@ export { default as PanningContext } from './components/panningViews/panningCont
 export { default as PanningProvider, PanningDirections, PanLocationProps, PanAmountsProps, PanDirectionsProps } from './components/panningViews/panningProvider';
 export { default as PanResponderView, PanResponderViewProps } from './components/panningViews/panResponderView';
 export { default as asPanViewConsumer } from './components/panningViews/asPanViewConsumer';
-export { default as Picker, PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectAllType } from './components/picker';
+export { default as Picker, PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from './components/picker';
 export { default as PieChart, type PieChartProps, PieChartSegmentProps } from './components/pieChart';
 export { default as ProgressBar, ProgressBarProps } from './components/progressBar';
 export { default as ProgressiveImage, ProgressiveImageProps } from './components/progressiveImage';

package/src/index.js

@@ -166,7 +166,6 @@ var _exportNames = {
   RenderCustomModalProps: true,
   PickerItemsListProps: true,
   PickerMethods: true,
-  PickerSelectAllType: true,
   PieChart: true,
   PieChartSegmentProps: true,
   ProgressBar: true,
@@ -1111,12 +1110,6 @@ Object.defineProperty(exports, "PickerSearchStyle", {
     return _picker().PickerSearchStyle;
   }
 });
-Object.defineProperty(exports, "PickerSelectAllType", {
-  enumerable: true,
-  get: function () {
-    return _picker().PickerSelectAllType;
-  }
-});
 Object.defineProperty(exports, "PickerValue", {
   enumerable: true,
   get: function () {

package/src/components/picker/PickerSelectionControlBar.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { PickerItemProps, PickerProps, PickerContextProps, PickerMultiValue } from './types';
-export type PickerSelectionControlBarProps = PickerProps['selectionStatus'] & Partial<PickerContextProps> & {
-    value?: PickerMultiValue;
-    items?: PickerItemProps[];
-};
-export default function PickerSelectionControlBar(props: PickerSelectionControlBarProps): React.JSX.Element;

package/src/components/picker/PickerSelectionControlBar.js

@@ -1,48 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import Button from "../button";
-import Checkbox from "../checkbox";
-import View from "../view";
-import Text from "../text";
-export default function PickerSelectionControlBar(props) {
-  const {
-    selectAllType = 'none',
-    buttonProps = {},
-    checkboxProps = {},
-    containerStyle,
-    value = [],
-    items = [],
-    toggleAllItemsSelection,
-    showLabel = true,
-    customLabel
-  } = props;
-  const availableItems = useMemo(() => items.filter(item => !item.disabled).map(item => item.value), [items]);
-  const isAllSelected = value.length === availableItems.length;
-  const checkboxIndeterminate = value.length > 0 && value.length < availableItems.length;
-  const defaultLabel = `${value.length} Selected ${isAllSelected ? '(All)' : ''}`;
-  const handlePress = useCallback(() => {
-    const newSelectionState = !isAllSelected;
-    toggleAllItemsSelection?.(availableItems, newSelectionState);
-    if (selectAllType === 'button') {
-      buttonProps.onPress?.(availableItems);
-    } else if (selectAllType === 'checkbox') {
-      checkboxProps.onValueChange?.(newSelectionState);
-    }
-  }, [isAllSelected, toggleAllItemsSelection, availableItems, selectAllType, buttonProps, checkboxProps]);
-  const renderSelectionStatus = () => {
-    if (selectAllType === 'button') {
-      return <Button label={isAllSelected ? 'Deselect All' : 'Select All'} link {...buttonProps} onPress={handlePress} />;
-    } else if (selectAllType === 'checkbox') {
-      return <Checkbox {...checkboxProps} value={value.length > 0} indeterminate={checkboxIndeterminate} onValueChange={handlePress} />;
-    }
-  };
-  const renderLabel = () => {
-    if (showLabel) {
-      return <Text>{customLabel || defaultLabel}</Text>;
-    }
-    return null;
-  };
-  return <View row spread centerV paddingH-page style={containerStyle}>
-      {renderLabel()}
-      {renderSelectionStatus()}
-    </View>;
-}