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

package/package.json

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

package/src/components/hint/hooks/useHintLayout.js

@@ -1,29 +1,13 @@
 import _isEqual from "lodash/isEqual";
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { SafeAreaInsetsManager } from 'uilib-native';
-import { Constants } from "../../../commons/new";
+import { useState, useCallback, useRef } from 'react';
 export default function useHintLayout({
   onBackgroundPress,
   targetFrame
 }) {
   const [targetLayoutState, setTargetLayout] = useState(targetFrame);
-  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState();
+  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState(targetFrame);
   const [hintMessageWidth, setHintMessageWidth] = useState();
   const targetRef = useRef(null);
-  useEffect(() => {
-    if (targetFrame) {
-      if (!onBackgroundPress) {
-        setTargetLayoutInWindow(targetFrame);
-      } else {
-        SafeAreaInsetsManager.getSafeAreaInsets().then(insets => {
-          setTargetLayoutInWindow({
-            ...targetFrame,
-            y: targetFrame.y + (insets?.top ?? 0) + Constants.getSafeAreaInsets().top
-          });
-        });
-      }
-    }
-  }, []);
   const onTargetLayout = useCallback(({
     nativeEvent: {
       layout

package/src/components/picker/PickerItemsList.js

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

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' | 'selectionValidation' | 'selectionOptions' | 'useDialog'> {
+interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode'> {
     pickerExpandableRef: RefObject<any>;
     setSearchValue: (searchValue: string) => void;
 }
@@ -9,6 +9,5 @@ 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,7 +1,5 @@
 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 => {
@@ -13,54 +11,22 @@ const usePickerSelection = props => {
     pickerExpandableRef,
     getItemValue,
     setSearchValue,
-    mode,
-    selectionValidation,
-    selectionOptions,
-    useDialog
+    mode
   } = 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, useDialog, selectionValidation]);
+  }, [onChange]);
   const toggleItemSelection = useCallback(item => {
     let newValue;
     const itemAsArray = [item];
@@ -69,9 +35,8 @@ const usePickerSelection = props => {
     } else {
       newValue = _xor(multiDraftValue, itemAsArray);
     }
-    _selectionValidation(newValue);
     setMultiDraftValue(newValue);
-  }, [multiDraftValue, getItemValue, useDialog, _selectionValidation]);
+  }, [multiDraftValue, getItemValue]);
   const cancelSelect = useCallback(() => {
     setSearchValue('');
     setMultiDraftValue(multiFinalValue);
@@ -82,8 +47,7 @@ const usePickerSelection = props => {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect,
-    shouldDisableDoneButton: isValid
+    cancelSelect
   };
 };
 export default usePickerSelection;

package/src/components/picker/index.js

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

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

@@ -147,23 +147,7 @@ type PickerExpandableOverlayProps = {
      */
     enableModalBlur?: boolean;
 };
-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 & {
+export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & PickerPropsDeprecation & PickerExpandableOverlayProps & PickerListProps & {
     /**
      * Use dialog instead of modal picker
      */
@@ -303,7 +287,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' | 'selectionValidation' | '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/helpers/usePickerDialogProps.d.ts

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

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