Merge branch 'master' into release

wix · Aug 30, 2023 · d01a899 · d01a899
2 parents df400bc + f1e5557
commit d01a899
Show file tree

Hide file tree

Showing 11 changed files with 207 additions and 190 deletions.
diff --git a/src/commons/asBaseComponent.tsx b/src/commons/asBaseComponent.tsx
@@ -4,7 +4,6 @@ import * as Modifiers from './modifiers';
 import {Scheme, SchemeChangeListener, ThemeManager} from '../style';
 import forwardRef from './forwardRef';
 import UIComponent from './UIComponent';
-import type {ThemeComponent} from '../typings/common';
 
 export interface BaseComponentInjectedProps {
   /**
@@ -23,7 +22,7 @@ const EMPTY_MODIFIERS = {};
 const colorScheme = Scheme.getSchemeType();
 
 function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentType<any>,
-  options: AsBaseComponentOptions = {}): React.ComponentClass<PROPS & ThemeComponent> & STATICS {
+  options: AsBaseComponentOptions = {}): React.ComponentClass<PROPS> & STATICS {
   class BaseComponent extends UIComponent {
     static displayName: string | undefined;
     static propTypes: any;

diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
@@ -73,14 +73,23 @@ const PickerItemsList = (props: PickerItemsListProps) => {
 
   const renderList = () => {
     if (items) {
-      return <FlatList data={items} renderItem={renderPropItems} keyExtractor={keyExtractor} {...listProps}/>;
+      return (
+        <FlatList
+          testID={`${testID}.list`}
+          data={items}
+          renderItem={renderPropItems}
+          keyExtractor={keyExtractor}
+          {...listProps}
+        />
+      );
     }
     return (
       <FlatList
         data={_.times(React.Children.count(children))}
         // @ts-expect-error
         renderItem={renderItem}
         keyExtractor={keyExtractor}
+        testID={`${testID}.list`}
         {...listProps}
       />
     );

diff --git a/src/components/picker/types.tsx b/src/components/picker/types.tsx
@@ -5,7 +5,6 @@ import {ModalTopBarProps} from '../modal/TopBar';
 // TODO: Replace with new TextField Props after migration to new TextField has completed
 // import {TextFieldProps} from '../../../typings/components/Inputs';
 import {TextFieldMethods, TextFieldProps as NewTextFieldProps} from '../../incubator/TextField';
-import type {ThemeComponent} from '../../typings/common';
 
 // Note: enum values are uppercase due to legacy
 export enum PickerModes {
@@ -48,144 +47,143 @@ export interface PickerSearchStyle {
   selectionColor?: string;
 }
 
-export type PickerBaseProps = Omit<NewTextFieldProps, 'value' | 'onChange'> &
-  ThemeComponent & {
-    /* ...TextField.propTypes, */
-    /**
-     * Temporary prop required for migration to Picker's new API
-     */
-    migrate?: boolean;
-    /**
-     * Temporary prop required for inner text field migration
-     */
-    migrateTextField?: boolean;
-    /**
-     * Pass for different field type UI (form, filter or settings)
-     */
-    fieldType?: PickerFieldTypes;
-    /**
-     * Picker current value in the shape of {value: ..., label: ...}, for custom shape use 'getItemValue' prop
-     */
-    value?: PickerValue;
-    /**
-     * Callback for when picker value change
-     */
-    onChange?: (value: PickerValue) => void;
-    /**
-     * SINGLE mode or MULTI mode
-     */
-    mode?: PickerModes;
-    /**
-     * Limit the number of selected items
-     */
-    selectionLimit?: number;
-    /**
-     * Adds blur effect to picker modal (iOS only)
-     */
-    enableModalBlur?: boolean;
-    /**
-     * Render custom picker - input will be value (see above)
-     * Example:
-     * renderPicker = (selectedItem) => {...}
-     */
-    renderPicker?: RenderPicker;
-    /**
-     * Render custom picker item
-     */
-    renderItem?: (
-      value: PickerValue,
-      itemProps: PickerItemProps & {isSelected: boolean; isItemDisabled: boolean},
-      label?: string
-    ) => React.ReactElement;
-    /**
-     * Render custom picker modal (e.g ({visible, children, toggleModal}) => {...})
-     */
-    renderCustomModal?: (modalProps: RenderCustomModalProps) => React.ReactElement;
-    /**
-     * Custom picker props (when using renderPicker, will apply on the button wrapper)
-     */
-    customPickerProps?: ExpandableOverlayProps;
-    /**
-     * Add onPress callback for when pressing the picker
-     */
-    onPress?: () => void;
-    /**
-     * @deprecated
-     * A function that extract the unique value out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
-     */
-    getItemValue?: (value: PickerValue) => any;
-    /**
-     * @deprecated
-     * A function that extract the label out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
-     */
-    getItemLabel?: (value: PickerValue) => string;
-    /**
-     * A function that returns the label to show for the selected Picker value
-     */
-    getLabel?: (value: PickerValue) => string;
-    /**
-     * The picker modal top bar props
-     */
-    topBarProps?: ModalTopBarProps;
-    /**
-     * Show search input to filter picker items by label
-     */
-    showSearch?: boolean;
-    /**
-     * Style object for the search input (only when passing showSearch)
-     */
-    searchStyle?: PickerSearchStyle;
-    /**
-     * Placeholder text for the search input (only when passing showSearch)
-     */
-    searchPlaceholder?: string;
-    /**
-     * callback for picker modal search input text change (only when passing showSearch)
-     */
-    onSearchChange?: (searchValue: string) => void;
-    /**
-     * Render custom search input (only when passing showSearch)
-     */
-    renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement;
-    // /**
-    //  * @deprecated pass useWheelPicker prop instead
-    //  * Allow to use the native picker solution (different style for iOS and Android)
-    //  */
-    // useNativePicker?: boolean;
-    /**
-     * Use wheel picker instead of a list picker
-     */
-    useWheelPicker?: boolean;
-    /**
-     * Pass props to the list component that wraps the picker options (allows to control FlatList behavior)
-     */
-    listProps?: Partial<FlatListProps<any>>;
-    /**
-     * Pass props to the picker modal
-     */
-    pickerModalProps?: object;
-    /**
-     * Custom container style
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Callback for modal onShow event
-     */
-    onShow?: () => void;
-    /**
-     * Add safe area in the Picker modal view
-     */
-    useSafeArea?: boolean;
-    /**
-     * Data source for Picker
-     */
-    items?: Pick<PickerItemProps, 'label' | 'value' | 'disabled'>[];
-    /**
-     * Component test id
-     */
-    testID?: string;
-    children?: ReactNode | undefined;
-  };
+export type PickerBaseProps = Omit<NewTextFieldProps, 'value' | 'onChange'> & {
+  /* ...TextField.propTypes, */
+  /**
+   * Temporary prop required for migration to Picker's new API
+   */
+  migrate?: boolean;
+  /**
+   * Temporary prop required for inner text field migration
+   */
+  migrateTextField?: boolean;
+  /**
+   * Pass for different field type UI (form, filter or settings)
+   */
+  fieldType?: PickerFieldTypes;
+  /**
+   * Picker current value in the shape of {value: ..., label: ...}, for custom shape use 'getItemValue' prop
+   */
+  value?: PickerValue;
+  /**
+   * Callback for when picker value change
+   */
+  onChange?: (value: PickerValue) => void;
+  /**
+   * SINGLE mode or MULTI mode
+   */
+  mode?: PickerModes;
+  /**
+   * Limit the number of selected items
+   */
+  selectionLimit?: number;
+  /**
+   * Adds blur effect to picker modal (iOS only)
+   */
+  enableModalBlur?: boolean;
+  /**
+   * Render custom picker - input will be value (see above)
+   * Example:
+   * renderPicker = (selectedItem) => {...}
+   */
+  renderPicker?: RenderPicker;
+  /**
+   * Render custom picker item
+   */
+  renderItem?: (
+    value: PickerValue,
+    itemProps: PickerItemProps & {isSelected: boolean; isItemDisabled: boolean},
+    label?: string
+  ) => React.ReactElement;
+  /**
+   * Render custom picker modal (e.g ({visible, children, toggleModal}) => {...})
+   */
+  renderCustomModal?: (modalProps: RenderCustomModalProps) => React.ReactElement;
+  /**
+   * Custom picker props (when using renderPicker, will apply on the button wrapper)
+   */
+  customPickerProps?: ExpandableOverlayProps;
+  /**
+   * Add onPress callback for when pressing the picker
+   */
+  onPress?: () => void;
+  /**
+   * @deprecated
+   * A function that extract the unique value out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
+   */
+  getItemValue?: (value: PickerValue) => any;
+  /**
+   * @deprecated
+   * A function that extract the label out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
+   */
+  getItemLabel?: (value: PickerValue) => string;
+  /**
+   * A function that returns the label to show for the selected Picker value
+   */
+  getLabel?: (value: PickerValue) => string;
+  /**
+   * The picker modal top bar props
+   */
+  topBarProps?: ModalTopBarProps;
+  /**
+   * Show search input to filter picker items by label
+   */
+  showSearch?: boolean;
+  /**
+   * Style object for the search input (only when passing showSearch)
+   */
+  searchStyle?: PickerSearchStyle;
+  /**
+   * Placeholder text for the search input (only when passing showSearch)
+   */
+  searchPlaceholder?: string;
+  /**
+   * callback for picker modal search input text change (only when passing showSearch)
+   */
+  onSearchChange?: (searchValue: string) => void;
+  /**
+   * Render custom search input (only when passing showSearch)
+   */
+  renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement;
+  // /**
+  //  * @deprecated pass useWheelPicker prop instead
+  //  * Allow to use the native picker solution (different style for iOS and Android)
+  //  */
+  // useNativePicker?: boolean;
+  /**
+   * Use wheel picker instead of a list picker
+   */
+  useWheelPicker?: boolean;
+  /**
+   * Pass props to the list component that wraps the picker options (allows to control FlatList behavior)
+   */
+  listProps?: Partial<FlatListProps<any>>;
+  /**
+   * Pass props to the picker modal
+   */
+  pickerModalProps?: object;
+  /**
+   * Custom container style
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Callback for modal onShow event
+   */
+  onShow?: () => void;
+  /**
+   * Add safe area in the Picker modal view
+   */
+  useSafeArea?: boolean;
+  /**
+   * Data source for Picker
+   */
+  items?: Pick<PickerItemProps, 'label' | 'value' | 'disabled'>[];
+  /**
+   * Component test id
+   */
+  testID?: string;
+  children?: ReactNode | undefined;
+};
 
 export type PickerPropsWithSingle = PickerBaseProps & {
   mode?: PickerModes.SINGLE;