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

package/package.json

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

package/src/components/button/ButtonConstants.d.ts

@@ -17,4 +17,10 @@ export declare const MIN_WIDTH: {
     MEDIUM: number;
     LARGE: number;
 };
+export declare const SIZE_TO_VERTICAL_HITSLOP: {
+    readonly xSmall: 30;
+    readonly small: 25;
+    readonly medium: 20;
+    readonly large: 15;
+};
 export declare const DEFAULT_SIZE = ButtonSize.large;

package/src/components/button/ButtonConstants.js

@@ -17,4 +17,10 @@ export const MIN_WIDTH = {
   MEDIUM: 77,
   LARGE: 90
 };
+export const SIZE_TO_VERTICAL_HITSLOP = {
+  [ButtonSize.xSmall]: 30,
+  [ButtonSize.small]: 25,
+  [ButtonSize.medium]: 20,
+  [ButtonSize.large]: 15
+};
 export const DEFAULT_SIZE = ButtonSize.large;

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

@@ -11,9 +11,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
     static sizes: typeof ButtonSize;
     static animationDirection: typeof ButtonAnimationDirection;
     constructor(props: Props);
-    state: {
-        size: undefined;
-    };
+    state: Record<'size', undefined | number>;
     styles: {
         container: {
             backgroundColor: string;
@@ -370,7 +368,14 @@ declare class Button extends PureComponent<Props, ButtonState> {
     getLabelColor(): string | undefined;
     getIconColor(): string | undefined;
     getLabelSizeStyle(): TextStyle | undefined;
-    getContainerSizeStyle(): any;
+    getContainerSizeStyle(): Partial<{
+        height: number;
+        width: number;
+        padding: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        minWidth: number;
+    }>;
     getOutlineStyle(): {
         borderWidth: number;
         borderColor: string;
@@ -391,10 +396,18 @@ declare class Button extends PureComponent<Props, ButtonState> {
     })[] | undefined;
     getIconStyle(): [ImageStyle, StyleProp<ImageStyle>];
     getAnimationDirectionStyle(): {
-        alignSelf: string;
+        readonly alignSelf: "flex-start";
+    } | {
+        readonly alignSelf: "flex-end";
     } | undefined;
     renderIcon(): React.JSX.Element | null;
     renderLabel(): React.JSX.Element | null;
+    getAccessibleHitSlop(): {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
     render(): React.JSX.Element;
 }
 export { Button };

package/src/components/button/index.js

@@ -7,7 +7,7 @@ import TouchableOpacity from "../touchableOpacity";
 import Text from "../text";
 import Icon from "../icon";
 import { ButtonSize, ButtonAnimationDirection, ButtonProps, DEFAULT_PROPS } from "./types";
-import { PADDINGS, HORIZONTAL_PADDINGS, MIN_WIDTH, DEFAULT_SIZE } from "./ButtonConstants";
+import { PADDINGS, HORIZONTAL_PADDINGS, MIN_WIDTH, DEFAULT_SIZE, SIZE_TO_VERTICAL_HITSLOP } from "./ButtonConstants";
 export { ButtonSize, ButtonAnimationDirection, ButtonProps };
 class Button extends PureComponent {
   static displayName = 'Button';
@@ -351,6 +351,20 @@ class Button extends PureComponent {
     }
     return null;
   }
+  getAccessibleHitSlop() {
+    const containerStyle = this.getContainerSizeStyle();
+    const isWidthSet = containerStyle.width !== undefined || containerStyle.minWidth !== undefined;
+    const width = containerStyle.width || containerStyle.minWidth || 0;
+    const widthWithPadding = width + (containerStyle.paddingHorizontal || containerStyle.padding || 0) * 2;
+    const horizontalHitslop = isWidthSet ? Math.max(0, (48 - widthWithPadding) / 2) : 10;
+    const verticalHitslop = (containerStyle.height ? Math.max(0, 48 - containerStyle.height) : SIZE_TO_VERTICAL_HITSLOP[this.props.size || DEFAULT_SIZE]) / 2;
+    return {
+      top: verticalHitslop,
+      bottom: verticalHitslop,
+      left: horizontalHitslop,
+      right: horizontalHitslop
+    };
+  }
   render() {
     const {
       onPress,
@@ -373,7 +387,7 @@ class Button extends PureComponent {
     const borderRadiusStyle = this.getBorderRadiusStyle();
     return <TouchableOpacity row centerV style={[this.styles.container, animateLayout && this.getAnimationDirectionStyle(), containerSizeStyle, this.isLink && this.styles.innerContainerLink, shadowStyle, margins, paddings, {
       backgroundColor
-    }, borderRadiusStyle, outlineStyle, style]} activeOpacity={0.6} activeBackgroundColor={this.getActiveBackgroundColor()} onLayout={this.onLayout} onPress={onPress} disabled={disabled} testID={testID} {...others} ref={forwardedRef}>
+    }, borderRadiusStyle, outlineStyle, style]} activeOpacity={0.6} activeBackgroundColor={this.getActiveBackgroundColor()} onLayout={this.onLayout} onPress={onPress} disabled={disabled} testID={testID} {...others} ref={forwardedRef} hitSlop={this.getAccessibleHitSlop()}>
         {this.props.children}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}

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
-  }
-});