react-native-ui-lib 7.38.0-snapshot.6232 → 7.38.0-snapshot.6240

package/package.json

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

package/src/components/picker/PickerItemsList.js

@@ -1,3 +1,4 @@
+import _isUndefined from "lodash/isUndefined";
 import _times from "lodash/times";
 import _throttle from "lodash/throttle";
 import _isFunction from "lodash/isFunction";
@@ -33,6 +34,7 @@ const PickerItemsList = props => {
     useDialog,
     mode,
     testID,
+    selectionValidation,
     showLoader,
     customLoaderElement,
     renderCustomTopElement
@@ -116,7 +118,7 @@ const PickerItemsList = props => {
             {doneLabel ?? 'Select'}
           </Text>
         </View>;
-    } else if (!useDialog || mode === PickerModes.MULTI) {
+    } else if (_isUndefined(selectionValidation) && (!useDialog || mode === PickerModes.MULTI)) {
       return <Modal.TopBar testID={`${props.testID}.topBar`} {...topBarProps} />;
     }
   };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PickerProps } from '../types';
+type HookProps = PickerProps & {
+    shouldDisableDoneButton?: boolean;
+};
+declare const usePickerDialogProps: (props: HookProps, onDone: any) => import("../../touchableOpacity").TouchableOpacityProps & import("../../../incubator/dialog/types")._DialogPropsOld & {
+    expandableContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    useDialog?: boolean | undefined;
+    modalProps?: import("../../modal").ModalProps | undefined;
+    showTopBar?: boolean | undefined;
+    topBarProps?: import("../../modal").ModalTopBarProps | undefined;
+    renderCustomOverlay?: ((props: import("../../../incubator/expandableOverlay").RenderCustomOverlayProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined) | undefined;
+    disabled?: boolean | undefined;
+} & {
+    children?: React.ReactNode;
+};
+export default usePickerDialogProps;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { PickerModes } from "../types";
+import Button from "../../button";
+import { Colors } from "../../../style";
+const DIALOG_PROPS = {
+  bottom: true,
+  width: '100%',
+  useSafeArea: true
+};
+const usePickerDialogProps = (props, onDone) => {
+  const {
+    customPickerProps,
+    mode,
+    testID,
+    selectionOptions,
+    shouldDisableDoneButton
+  } = props;
+  const migrateDialog = customPickerProps?.migrateDialog;
+  const defaultProps = DIALOG_PROPS;
+  const {
+    validationMessage,
+    validationMessageStyle
+  } = selectionOptions || {};
+  const modifiedHeaderProps = migrateDialog && validationMessage && {
+    headerProps: {
+      trailingAccessory: validationMessage && <Button label="Save" link style={{
+        height: 30
+      }} onPress={mode === PickerModes.MULTI ? onDone : undefined} testID={`${testID}.dialog.header.save`} disabled={!shouldDisableDoneButton} />,
+      subtitle: !shouldDisableDoneButton && validationMessage,
+      subtitleStyle: [styles.validationMessage, validationMessageStyle],
+      ...customPickerProps?.dialogProps?.headerProps
+    }
+  };
+  const dialogProps = {
+    dialogProps: {
+      ...defaultProps,
+      ...customPickerProps?.dialogProps,
+      ...modifiedHeaderProps
+    }
+  };
+  return dialogProps;
+};
+export default usePickerDialogProps;
+const styles = StyleSheet.create({
+  validationMessage: {
+    color: Colors.red30
+  }
+});

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' | 'selectionValidation' | 'selectionOptions' | 'useDialog'> {
     pickerExpandableRef: RefObject<any>;
     setSearchValue: (searchValue: string) => void;
 }
@@ -9,5 +9,6 @@ declare const usePickerSelection: (props: UsePickerSelectionProps) => {
     onDoneSelecting: (item: PickerValue) => void;
     toggleItemSelection: (item: PickerSingleValue) => void;
     cancelSelect: () => void;
+    shouldDisableDoneButton: boolean | undefined;
 };
 export default usePickerSelection;

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

@@ -1,5 +1,7 @@
 import _xor from "lodash/xor";
 import _xorBy from "lodash/xorBy";
+import _isFunction from "lodash/isFunction";
+import _isUndefined from "lodash/isUndefined";
 import { useCallback, useState, useEffect } from 'react';
 import { PickerModes } from "../types";
 const usePickerSelection = props => {
@@ -11,22 +13,54 @@ const usePickerSelection = props => {
     pickerExpandableRef,
     getItemValue,
     setSearchValue,
-    mode
+    mode,
+    selectionValidation,
+    selectionOptions,
+    useDialog
   } = props;
+  const {
+    onValidationFailed,
+    validateOnStart,
+    onChangeValidity
+  } = selectionOptions || {};
   const [multiDraftValue, setMultiDraftValue] = useState(value);
   const [multiFinalValue, setMultiFinalValue] = useState(value);
+  const [isValid, setIsValid] = useState(undefined);
+  const _selectionValidation = item => {
+    if (useDialog) {
+      const isValid = selectionValidation?.(item);
+      if (!isValid) {
+        onValidationFailed?.(item);
+      }
+      setIsValid(isValid);
+    }
+  };
   useEffect(() => {
     if (mode === PickerModes.MULTI && multiFinalValue !== value) {
       setMultiDraftValue(value);
       setMultiFinalValue(value);
     }
   }, [value]);
+  useEffect(() => {
+    if (_isUndefined(selectionValidation)) {
+      setIsValid(true);
+    } else if (_isFunction(selectionValidation) && validateOnStart) {
+      _selectionValidation?.(value);
+    } else {
+      setIsValid(false);
+    }
+  }, []);
+  useEffect(() => {
+    if (isValid !== undefined) {
+      onChangeValidity?.(isValid);
+    }
+  }, [isValid]);
   const onDoneSelecting = useCallback(item => {
     setSearchValue('');
     setMultiFinalValue(item);
     pickerExpandableRef.current?.closeExpandable?.();
     onChange?.(item);
-  }, [onChange]);
+  }, [onChange, useDialog, selectionValidation]);
   const toggleItemSelection = useCallback(item => {
     let newValue;
     const itemAsArray = [item];
@@ -35,8 +69,9 @@ const usePickerSelection = props => {
     } else {
       newValue = _xor(multiDraftValue, itemAsArray);
     }
+    _selectionValidation(newValue);
     setMultiDraftValue(newValue);
-  }, [multiDraftValue, getItemValue]);
+  }, [multiDraftValue, getItemValue, useDialog, _selectionValidation]);
   const cancelSelect = useCallback(() => {
     setSearchValue('');
     setMultiDraftValue(multiFinalValue);
@@ -47,7 +82,8 @@ const usePickerSelection = props => {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    shouldDisableDoneButton: isValid
   };
 };
 export default usePickerSelection;

package/src/components/picker/index.js

@@ -10,19 +10,16 @@ import TextField from "../textField";
 import PickerItemsList from "./PickerItemsList";
 import PickerItem from "./PickerItem";
 import PickerContext from "./PickerContext";
-import usePickerSelection from "./helpers/usePickerSelection";
-import usePickerLabel from "./helpers/usePickerLabel";
-import usePickerSearch from "./helpers/usePickerSearch";
-import useImperativePickerHandle from "./helpers/useImperativePickerHandle";
+// import usePickerMigrationWarnings from './helpers/usePickerMigrationWarnings';
 import useFieldType from "./helpers/useFieldType";
+import useImperativePickerHandle from "./helpers/useImperativePickerHandle";
 import useNewPickerProps from "./helpers/useNewPickerProps";
-// import usePickerMigrationWarnings from './helpers/usePickerMigrationWarnings';
+import usePickerDialogProps from "./helpers/usePickerDialogProps";
+import usePickerLabel from "./helpers/usePickerLabel";
+import usePickerSearch from "./helpers/usePickerSearch";
+import usePickerSelection from "./helpers/usePickerSelection";
 import { extractPickerItems } from "./PickerPresenter";
 import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from "./types";
-const DEFAULT_DIALOG_PROPS = {
-  bottom: true,
-  width: '100%'
-};
 const Picker = React.forwardRef((props, ref) => {
   const themeProps = useThemeProps(props, 'Picker');
   const {
@@ -55,6 +52,8 @@ const Picker = React.forwardRef((props, ref) => {
     accessibilityLabel,
     accessibilityHint,
     items: propItems,
+    selectionValidation,
+    selectionOptions,
     showLoader,
     customLoaderElement,
     renderCustomTopElement,
@@ -101,7 +100,8 @@ const Picker = React.forwardRef((props, ref) => {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    shouldDisableDoneButton
   } = usePickerSelection({
     migrate,
     value,
@@ -110,8 +110,17 @@ const Picker = React.forwardRef((props, ref) => {
     getItemValue,
     topBarProps,
     setSearchValue,
-    mode
+    mode,
+    selectionValidation,
+    selectionOptions,
+    useDialog
   });
+  const {
+    dialogProps = {}
+  } = usePickerDialogProps({
+    ...themeProps,
+    shouldDisableDoneButton
+  }, () => onDoneSelecting(multiDraftValue));
   const {
     label,
     accessibilityInfo
@@ -201,12 +210,12 @@ 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} selectionValidation={selectionValidation} 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]);
   return <PickerContext.Provider value={contextValue}>
-      {<ExpandableOverlay ref={pickerExpandable} useDialog={useDialog || useWheelPicker} dialogProps={DEFAULT_DIALOG_PROPS} migrateDialog expandableContent={expandableModalContent} renderCustomOverlay={renderOverlay ? _renderOverlay : undefined} onPress={onPress} testID={testID} {...customPickerProps} disabled={themeProps.editable === false}>
+      {<ExpandableOverlay ref={pickerExpandable} useDialog={useDialog || useWheelPicker} migrateDialog expandableContent={expandableModalContent} renderCustomOverlay={renderOverlay ? _renderOverlay : undefined} onPress={onPress} testID={testID} {...customPickerProps} dialogProps={dialogProps} disabled={themeProps.editable === false}>
           {renderTextField()}
         </ExpandableOverlay>}
     </PickerContext.Provider>;

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

@@ -147,7 +147,23 @@ type PickerExpandableOverlayProps = {
      */
     enableModalBlur?: boolean;
 };
-export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & PickerPropsDeprecation & PickerExpandableOverlayProps & PickerListProps & {
+type PickerSelectionOptions = Pick<TextFieldProps, 'validateOnStart' | 'onChangeValidity' | 'validationMessage' | 'validationMessageStyle'> & {
+    /**
+     * Callback for when field validated and failed
+     */
+    onValidationFailed?: (value: PickerValue) => void;
+};
+type PickerSelectionValidation = {
+    /**
+     * Callback for when selection was made
+     */
+    selectionValidation?: (value: PickerValue) => boolean;
+    /**
+     * Selection validation options
+     */
+    selectionOptions?: PickerSelectionOptions;
+};
+export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & PickerPropsDeprecation & PickerExpandableOverlayProps & PickerListProps & PickerSelectionValidation & {
     /**
      * Use dialog instead of modal picker
      */
@@ -287,7 +303,7 @@ export interface PickerContextProps extends Pick<PickerProps, 'migrate' | 'value
     onSelectedLayout: (event: any) => any;
     selectionLimit: PickerProps['selectionLimit'];
 }
-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' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'selectionValidation' | 'useDialog' | 'mode' | 'testID'> & {
     items?: {
         value: any;
         label: any;