@hero-design/rn 7.16.2 → 7.17.0

package/types/components/Select/types.d.ts

@@ -1,20 +1,39 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import { ReactElement } from 'react';
+import { ListRenderItemInfo, SectionListData, SectionListRenderItemInfo, StyleProp, ViewStyle } from 'react-native';
 import { TextInputProps } from '../TextInput';
-export declare type OptionType<T> = {
-    value: T;
+export declare type OptionType<V> = {
+    value: V;
     text: string;
     key?: string;
+    disabled?: boolean;
 };
-export interface SelectProps<T> extends Pick<TextInputProps, 'editable' | 'disabled' | 'numberOfLines' | 'error'> {
+export declare type SectionType = {
+    category: string;
+};
+export declare type SectionData<V, T extends OptionType<V>> = SectionListData<T, SectionType>;
+export declare type CombinedOptionsType<V, T extends OptionType<V>> = T[] | SectionData<V, T>[];
+export declare type ListRenderOptionInfo<V, T extends OptionType<V>> = ListRenderItemInfo<T> & {
+    selected: boolean;
+    onPress: () => void;
+};
+export declare type SectionListRenderOptionInfo<V, T extends OptionType<V>> = SectionListRenderItemInfo<T, SectionType> & {
+    selected: boolean;
+    onPress: () => void;
+};
+export interface SelectProps<V, T extends OptionType<V>> extends Pick<TextInputProps, 'editable' | 'disabled' | 'numberOfLines' | 'error'> {
     /**
      * An array of options to be selected.
      */
-    options: OptionType<T>[];
+    options: CombinedOptionsType<V, T>;
+    /**
+     * Customize option renderer.
+     */
+    renderOption?: ((info: ListRenderOptionInfo<V, T>) => ReactElement) | ((info: SectionListRenderOptionInfo<V, T>) => ReactElement);
     /**
      * Used to extract a unique key for a given option at the specified index. Key is used for caching and as the react key to track item re-ordering.
      * The default extractor checks option.key, and then falls back to using the index, like React does.
      */
-    keyExtractor?: (option: OptionType<T>, index?: number) => string;
+    keyExtractor?: (option: T, index?: number) => string;
     /**
      * Current search value.
      */
@@ -32,9 +51,15 @@ export interface SelectProps<T> extends Pick<TextInputProps, 'editable' | 'disab
      */
     onEndReached?: () => void;
     /**
-     * Show indicator at bottom of option list
+     * Show loading indicator at bottom of option list
      */
     loading?: boolean;
+    /**
+     * Props that are passed to TextInput.
+     */
+    inputProps?: {
+        loading?: boolean;
+    };
     /**
      * Field label.
      */

package/types/components/TextInput/index.d.ts

@@ -48,15 +48,17 @@ export interface TextInputProps extends NativeTextInputProps {
      * */
     editable?: boolean;
     disabled?: boolean;
+    loading?: boolean;
     maxLength?: number;
     helpText?: string;
 }
-export declare const getVariant: ({ disabled, error, editable, isFocused, isEmptyValue, }: {
+export declare const getVariant: ({ disabled, error, editable, loading, isFocused, isEmptyValue, }: {
     disabled?: boolean | undefined;
     error?: string | undefined;
     editable?: boolean | undefined;
+    loading: boolean;
     isFocused?: boolean | undefined;
     isEmptyValue?: boolean | undefined;
 }) => Variant;
-declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, maxLength, helpText, value, defaultValue, ...nativeProps }: TextInputProps) => JSX.Element;
+declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, loading, maxLength, helpText, value, defaultValue, ...nativeProps }: TextInputProps) => JSX.Element;
 export default TextInput;

package/types/theme/components/select.d.ts

@@ -2,9 +2,9 @@ import { GlobalTheme } from '../global';
 declare const getSelectTheme: (theme: GlobalTheme) => {
     space: {
         minimumOptionListHeight: number;
-        optionPadding: number;
-        optionListPadding: number;
-        optionListSpacing: number;
+        sectionSpacing: number;
+        optionSpacing: number;
+        optionHorizontalMargin: number;
         searchBarMarginTopSpacing: number;
         searchBarHorizontalSpacing: number;
         searchBarBottomSpacing: number;

package/types/types.d.ts

@@ -5,4 +5,5 @@ import { TabType } from './components/Tabs';
 import { TextInputProps } from './components/TextInput';
 import { RichTextEditorRef, RichTextEditorProps, ToolbarButtonName } from './components/RichTextEditor';
 import { Theme } from './theme';
-export type { BottomNavigationTabType, IconName, MultiSelectProps, RichTextEditorProps, RichTextEditorRef, SingleSelectProps, TabType, TextInputProps, Theme, ToolbarButtonName, };
+import { ListRenderOptionInfo, SectionListRenderOptionInfo } from './components/Select/types';
+export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, Theme, ToolbarButtonName, };

package/src/components/Select/types.tsx

@@ -1,52 +0,0 @@
-import { StyleProp, ViewStyle } from 'react-native';
-import { TextInputProps } from '../TextInput';
-
-export type OptionType<T> = { value: T; text: string; key?: string };
-
-export interface SelectProps<T>
-  extends Pick<
-    TextInputProps,
-    'editable' | 'disabled' | 'numberOfLines' | 'error'
-  > {
-  /**
-   * An array of options to be selected.
-   */
-  options: OptionType<T>[];
-  /**
-   * Used to extract a unique key for a given option at the specified index. Key is used for caching and as the react key to track item re-ordering.
-   * The default extractor checks option.key, and then falls back to using the index, like React does.
-   */
-  keyExtractor?: (option: OptionType<T>, index?: number) => string;
-  /**
-   * Current search value.
-   */
-  query?: string;
-  /**
-   * Search bar onChangeText event handler
-   */
-  onQueryChange?: (value: string) => void;
-  /**
-   * Event handler when selection dismiss
-   */
-  onDimiss?: () => void;
-  /**
-   * Event handler when end of the list reached
-   */
-  onEndReached?: () => void;
-  /**
-   * Show indicator at bottom of option list
-   */
-  loading?: boolean;
-  /**
-   * Field label.
-   */
-  label: string;
-  /**
-   * Additional style.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Testing id of the component.
-   */
-  testID?: string;
-}