react-native-ui-lib 7.39.0 → 7.39.1

package/package.json

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

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 PickerSelectionStatusBar from "./PickerSelectionStatusBar";
 const keyExtractor = (_item, index) => index.toString();
 const PickerItemsList = props => {
   const {
@@ -35,7 +36,8 @@ const PickerItemsList = props => {
     testID,
     showLoader,
     customLoaderElement,
-    renderCustomTopElement
+    renderCustomTopElement,
+    selectionStatus: selectionStatusProps
   } = props;
   const context = useContext(PickerContext);
   const [wheelPickerValue, setWheelPickerValue] = useState(context.value ?? items?.[0]?.value);
@@ -130,10 +132,12 @@ const PickerItemsList = props => {
           <ActivityIndicator />
         </View>;
   };
+  const selectionStatus = useMemo(() => mode === PickerModes.MULTI && selectionStatusProps && <PickerSelectionStatusBar {...selectionStatusProps} />, [selectionStatusProps, mode]);
   const renderContent = () => {
     return useWheelPicker ? renderWheel() : <>
         {renderSearchInput()}
         {renderCustomTopElement?.(context.value)}
+        {selectionStatus}
         {renderList()}
       </>;
   };

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PickerSelectionStatusProps } from './types';
+export default function PickerSelectionStatusBar(props: PickerSelectionStatusProps): React.JSX.Element;

package/src/components/picker/PickerSelectionStatusBar.js

@@ -0,0 +1,60 @@
+import React, { useCallback, useContext } from 'react';
+import { StyleSheet } from 'react-native';
+import Button from "../button";
+import Checkbox from "../checkbox";
+import View from "../view";
+import Text from "../text";
+import Dividers from "../../style/dividers";
+import PickerContext from "./PickerContext";
+export default function PickerSelectionStatusBar(props) {
+  const {
+    containerStyle,
+    getLabel,
+    showLabel = true
+  } = props;
+  const context = useContext(PickerContext);
+  const {
+    toggleAllItemsSelection,
+    selectedCount,
+    areAllItemsSelected
+  } = context;
+  const checkboxIndeterminate = selectedCount > 0 && !areAllItemsSelected;
+  const label = getLabel?.({
+    selectedCount,
+    areAllItemsSelected
+  }) ?? `${selectedCount} Selected ${areAllItemsSelected ? '(All)' : ''}`;
+  const handlePress = useCallback(() => {
+    const newSelectionState = !areAllItemsSelected;
+    toggleAllItemsSelection?.(newSelectionState);
+    if (props.selectAllType === 'button') {
+      props?.buttonProps?.onPress?.({
+        customValue: newSelectionState
+      });
+    } else if (props.selectAllType === 'checkbox') {
+      props?.checkboxProps?.onValueChange?.(newSelectionState);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [areAllItemsSelected, toggleAllItemsSelection]);
+  const renderSelectionStatus = () => {
+    return <View flexG={!showLabel} style={!showLabel && styles.componentContainer}>
+        {props.selectAllType === 'button' ? <Button label={areAllItemsSelected ? 'Deselect All' : 'Select All'} link {...props?.buttonProps} onPress={handlePress} /> : props.selectAllType === 'checkbox' && <Checkbox {...props.checkboxProps} value={selectedCount > 0} indeterminate={checkboxIndeterminate} onValueChange={handlePress} />}
+      </View>;
+  };
+  const renderLabel = () => {
+    if (showLabel) {
+      return <Text>{label}</Text>;
+    }
+  };
+  return <View>
+      <View row spread paddingH-page marginV-s4 style={containerStyle}>
+        {renderLabel()}
+        {renderSelectionStatus()}
+      </View>
+      <View style={Dividers.d20} />
+    </View>;
+}
+const styles = StyleSheet.create({
+  componentContainer: {
+    alignItems: 'flex-end'
+  }
+});

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

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { PickerProps, PickerValue, PickerSingleValue, PickerMultiValue } from '../types';
-interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode'> {
+interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode' | 'items'> {
     pickerExpandableRef: RefObject<any>;
     setSearchValue: (searchValue: string) => void;
 }
@@ -9,5 +9,8 @@ declare const usePickerSelection: (props: UsePickerSelectionProps) => {
     onDoneSelecting: (item: PickerValue) => void;
     toggleItemSelection: (item: PickerSingleValue) => void;
     cancelSelect: () => void;
+    areAllItemsSelected: boolean;
+    selectedCount: number;
+    toggleAllItemsSelection: (selectAll: boolean) => void;
 };
 export default usePickerSelection;

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

@@ -1,6 +1,6 @@
 import _xor from "lodash/xor";
 import _xorBy from "lodash/xorBy";
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect, useMemo } from 'react';
 import { PickerModes } from "../types";
 const usePickerSelection = props => {
   const {
@@ -11,7 +11,8 @@ const usePickerSelection = props => {
     pickerExpandableRef,
     getItemValue,
     setSearchValue,
-    mode
+    mode,
+    items
   } = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value);
   const [multiFinalValue, setMultiFinalValue] = useState(value);
@@ -43,11 +44,26 @@ const usePickerSelection = props => {
     pickerExpandableRef.current?.closeExpandable?.();
     topBarProps?.onCancel?.();
   }, [multiFinalValue, topBarProps]);
+  const availableItems = useMemo(() => {
+    return items?.filter(item => !item.disabled).map(item => item.value) || [];
+  }, [items]);
+  const areAllItemsSelected = useMemo(() => {
+    return multiDraftValue?.length === availableItems.length;
+  }, [multiDraftValue, availableItems]);
+  const selectedCount = useMemo(() => {
+    return multiDraftValue?.length;
+  }, [multiDraftValue]);
+  const toggleAllItemsSelection = useCallback(selectAll => {
+    setMultiDraftValue(selectAll ? availableItems : []);
+  }, [availableItems]);
   return {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    areAllItemsSelected,
+    selectedCount,
+    toggleAllItemsSelection
   };
 };
 export default usePickerSelection;

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

@@ -1,7 +1,7 @@
 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, PickerSelectionStatusProps } from './types';
 type PickerStatics = {
     Item: typeof PickerItem;
     modes: typeof PickerModes;
@@ -9,7 +9,7 @@ type PickerStatics = {
     extractPickerItems: typeof extractPickerItems;
 };
 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, PickerSelectionStatusProps };
 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, PickerSelectionStatusProps } 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,10 @@ const Picker = React.forwardRef((props, ref) => {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    areAllItemsSelected,
+    selectedCount,
+    toggleAllItemsSelection
   } = usePickerSelection({
     migrate,
     value,
@@ -110,7 +114,8 @@ const Picker = React.forwardRef((props, ref) => {
     getItemValue,
     topBarProps,
     setSearchValue,
-    mode
+    mode,
+    items
   });
   const {
     label,
@@ -154,9 +159,12 @@ const Picker = React.forwardRef((props, ref) => {
       getItemLabel,
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
-      selectionLimit
+      selectionLimit,
+      areAllItemsSelected,
+      selectedCount,
+      toggleAllItemsSelection
     };
-  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting]);
+  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting, areAllItemsSelected, selectedCount, toggleAllItemsSelection]);
   const renderPickerItem = useCallback((item, index) => {
     return <PickerItem key={`${index}-${item.value}`} {...item} />;
   }, []);
@@ -201,7 +209,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 +229,6 @@ Picker.modes = PickerModes;
 Picker.fieldTypes = PickerFieldTypes;
 // @ts-expect-error
 Picker.extractPickerItems = extractPickerItems;
-export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods };
+export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps };
 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"
@@ -147,6 +149,44 @@ type PickerExpandableOverlayProps = {
      */
     enableModalBlur?: boolean;
 };
+interface PickerSelectionStatusLabelData {
+    selectedCount: number;
+    areAllItemsSelected: boolean;
+}
+export type ButtonSelectionStatus = {
+    /**
+     * Select all element type
+     */
+    selectAllType?: 'button';
+    /**
+     * Button props
+     */
+    buttonProps?: ButtonProps;
+};
+export type CheckboxSelectionStatus = {
+    /**
+     * Select all element type
+     */
+    selectAllType?: 'checkbox';
+    /**
+     * Checkbox props
+     */
+    checkboxProps?: CheckboxProps;
+};
+export type PickerSelectionStatusProps = {
+    /**
+     * A function that generates a label based on the selected items' count and status
+     */
+    getLabel?: (data: PickerSelectionStatusLabelData) => string;
+    /**
+     * Custom container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Control weather to show the label or not
+     */
+    showLabel?: boolean;
+} & (ButtonSelectionStatus | CheckboxSelectionStatus);
 export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & PickerPropsDeprecation & PickerExpandableOverlayProps & PickerListProps & {
     /**
      * Use dialog instead of modal picker
@@ -193,6 +233,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & Picke
      * Render custom top element
      */
     renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
+    /**
+     * Selection status bar props
+     */
+    selectionStatus?: PickerSelectionStatusProps;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -286,8 +330,11 @@ export interface PickerContextProps extends Pick<PickerProps, 'migrate' | 'value
     isMultiMode: boolean;
     onSelectedLayout: (event: any) => any;
     selectionLimit: PickerProps['selectionLimit'];
+    areAllItemsSelected: boolean;
+    selectedCount: number;
+    toggleAllItemsSelection?: (selectAll: 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/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, PickerSelectionStatusProps } 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,
+  PickerSelectionStatusProps: true,
   PieChart: true,
   PieChartSegmentProps: true,
   ProgressBar: true,
@@ -1110,6 +1111,12 @@ Object.defineProperty(exports, "PickerSearchStyle", {
     return _picker().PickerSearchStyle;
   }
 });
+Object.defineProperty(exports, "PickerSelectionStatusProps", {
+  enumerable: true,
+  get: function () {
+    return _picker().PickerSelectionStatusProps;
+  }
+});
 Object.defineProperty(exports, "PickerValue", {
   enumerable: true,
   get: function () {