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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.38.1-snapshot.6314",
+  "version": "7.38.1-snapshot.6326",
   "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. This prop isn't supported on web (will be set to false by default when using web).",
+      "description": "Adds fade in animation when Avatar image loads",
       "default": "false"
     },
     {"name": "backgroundColor", "type": "string", "description": "Background color for Avatar"},

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

@@ -162,30 +162,29 @@ 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; /**
-         * Background color for Avatar
-         */
+        supportRTL?: boolean | undefined;
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined; /**
-         * Image props object
-         */
+        overlayType?: string | undefined;
         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;
+        imageId?: string | undefined; /**
+         * Listener-callback for when an image's (uri) loading
+         * fails (equiv. to Image.onError()).
+         */
         useBackgroundContainer?: boolean | undefined;
         width?: string | number | undefined;
         height?: string | number | undefined;
-        source: import("../image").ImageSourceType;
+        source: import("../image").ImageSourceType; /**
+         * Hash the name (or label) to get a color, so each name will have a specific color.
+         * Default is false.
+         */
     } & AnimatedImageProps> | undefined;
     /**
      * Image style object used to pass additional style props
@@ -291,30 +290,29 @@ 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; /**
-         * Background color for Avatar
-         */
+        supportRTL?: boolean | undefined;
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined; /**
-         * Image props object
-         */
+        overlayType?: string | undefined;
         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;
+        imageId?: string | undefined; /**
+         * Listener-callback for when an image's (uri) loading
+         * fails (equiv. to Image.onError()).
+         */
         useBackgroundContainer?: boolean | undefined;
         width?: string | number | undefined;
         height?: string | number | undefined;
-        source: import("../image").ImageSourceType;
+        source: import("../image").ImageSourceType; /**
+         * Hash the name (or label) to get a color, so each name will have a specific color.
+         * Default is false.
+         */
     } & AnimatedImageProps> | undefined;
     /**
      * Image style object used to pass additional style props

package/src/components/avatar/index.js

@@ -16,7 +16,6 @@ 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";
@@ -150,7 +149,7 @@ const Avatar = forwardRef((props, ref) => {
   const renderImage = () => {
     if (source !== undefined) {
       // Looks like reanimated does not support SVG
-      const ImageContainer = animate && !isSvg(source) && !Constants.isWeb ? AnimatedImage : Image;
+      const ImageContainer = animate && !isSvg(source) ? 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,8 +10,6 @@ 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
@@ -39,14 +37,7 @@ class Badge extends PureComponent {
     };
   }
   get size() {
-    const {
-      size,
-      label
-    } = this.props;
-    if (size !== undefined) {
-      return size;
-    }
-    return label === undefined ? DEFAULT_PIMPLE_SIZE : DEFAULT_BADGE_SIZE;
+    return this.props.size || 20;
   }
   isSmallBadge() {
     return this.size <= 16;

package/src/components/picker/PickerItemsList.js

@@ -15,6 +15,7 @@ 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 {
@@ -35,7 +36,8 @@ const PickerItemsList = props => {
     testID,
     showLoader,
     customLoaderElement,
-    renderCustomTopElement
+    renderCustomTopElement,
+    selectionStatus
   } = props;
   const context = useContext(PickerContext);
   const [wheelPickerValue, setWheelPickerValue] = useState(context.value ?? items?.[0]?.value);
@@ -130,10 +132,18 @@ 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/PickerSelectionControlBar.d.ts

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,48 @@
+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>;
+}

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

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

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

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

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

@@ -4,6 +4,8 @@ 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"
@@ -13,6 +15,11 @@ 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;
@@ -147,6 +154,41 @@ 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
@@ -193,6 +235,10 @@ 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
      */
@@ -286,8 +332,9 @@ 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' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
+export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'selectionStatus' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
     items?: {
         value: any;
         label: any;

package/src/components/picker/types.js

@@ -10,6 +10,12 @@ 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 } from './components/picker';
+export { default as Picker, PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectAllType } 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,6 +166,7 @@ var _exportNames = {
   RenderCustomModalProps: true,
   PickerItemsListProps: true,
   PickerMethods: true,
+  PickerSelectAllType: true,
   PieChart: true,
   PieChartSegmentProps: true,
   ProgressBar: true,
@@ -1110,6 +1111,12 @@ 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 () {