@hero-design/rn 7.11.2 → 7.12.1

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

@@ -1,10 +1,5 @@
-import { StyleProp, ViewStyle } from 'react-native';
-import { OptionType } from '../types';
-export interface MultiSelectProps<T> {
-    /**
-     * An array of options to be selected.
-     */
-    options: OptionType<T>[];
+import { SelectProps } from '../types';
+export interface MultiSelectProps<T> extends SelectProps<T> {
     /**
      * Current selected value.
      */
@@ -13,27 +8,10 @@ export interface MultiSelectProps<T> {
      * event handler for footer button.
      */
     onConfirm: (value: T[]) => void;
-    /**
-     * Field label.
-     */
-    label: string;
     /**
      * Footer label.
      */
     footerLabel: string;
-    /**
-     * 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;
-    /**
-     * Additional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
 }
-declare function MultiSelect<T>({ options, value, testID, style, label, footerLabel, onConfirm, }: MultiSelectProps<T>): JSX.Element;
+declare function MultiSelect<T>({ footerLabel, label, loading, onConfirm, onDimiss, onEndReached, onQueryChange, options, query, style, testID, value, }: MultiSelectProps<T>): JSX.Element;
 export default MultiSelect;

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

@@ -5,5 +5,5 @@ interface OptionListProps<T> extends SingleSelectProps<T> {
      */
     onPress: (value: T | null) => void;
 }
-declare const OptionList: <T>({ value, options, onPress, keyExtractor, }: Pick<OptionListProps<T>, "onPress" | "value" | "options" | "keyExtractor">) => JSX.Element;
+declare const OptionList: <T>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, options, value, }: Pick<OptionListProps<T>, "loading" | "onPress" | "value" | "options" | "keyExtractor" | "onEndReached" | "onQueryChange">) => JSX.Element;
 export default OptionList;

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

@@ -1,35 +1,13 @@
-import { StyleProp, ViewStyle } from 'react-native';
-import { OptionType } from '../types';
-export interface SingleSelectProps<T> {
-    /**
-     * An array of options to be selected.
-     */
-    options: OptionType<T>[];
+import { SelectProps } from '../types';
+export interface SingleSelectProps<T> extends SelectProps<T> {
     /**
      * Current selected value.
      */
     value: T | null;
     /**
-     * event handler for confirm button
+     * on select event handler
      */
     onConfirm: (value: T | null) => void;
-    /**
-     * Field label.
-     */
-    label: string;
-    /**
-     * 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;
-    /**
-     * Additional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
 }
-declare const SingleSelect: <T>({ options, value, testID, style, label, onConfirm, }: SingleSelectProps<T>) => JSX.Element;
+declare const SingleSelect: <T>({ label, loading, onConfirm, onDimiss, onEndReached, onQueryChange, options, query, style, testID, value, }: SingleSelectProps<T>) => JSX.Element;
 export default SingleSelect;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { OptionType, SelectProps } from './types';
+export interface RenderItemProps<T> {
+    item: OptionType<T>;
+}
+export interface OptionListProps<T> extends SelectProps<T> {
+    /**
+     * FlatList renderItem Element
+     */
+    RenderItem: React.FC<RenderItemProps<T>>;
+    /**
+     * Selected scroll index
+     */
+    scrollIndex?: number;
+}
+declare const StyledOptionList: <T>({ keyExtractor, loading, onEndReached, onQueryChange, options, RenderItem, scrollIndex, }: Pick<OptionListProps<T>, "loading" | "options" | "keyExtractor" | "scrollIndex" | "onEndReached" | "RenderItem" | "onQueryChange">) => JSX.Element;
+export default StyledOptionList;

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

@@ -7,12 +7,6 @@ declare const OptionWrapper: import("@emotion/native").StyledComponent<import("r
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
-declare const OptionListWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
 declare const Spacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -23,4 +17,10 @@ declare const FooterText: import("@emotion/native").StyledComponent<import("../T
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-export { OptionWrapper, OptionListWrapper, Spacer, FooterText };
+declare const StyledSearchBar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { OptionWrapper, Spacer, FooterText, StyledSearchBar };

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

@@ -1,5 +1,5 @@
 import MultiSelect from './MultiSelect';
-declare const _default: (<T>({ options, value, testID, style, label, onConfirm, }: import("./SingleSelect").SingleSelectProps<T>) => JSX.Element) & {
+declare const _default: (<T>({ label, loading, onConfirm, onDimiss, onEndReached, onQueryChange, options, query, style, testID, value, }: import("./SingleSelect").SingleSelectProps<T>) => JSX.Element) & {
     Multi: typeof MultiSelect;
 };
 export default _default;

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

@@ -1,5 +1,49 @@
+import { StyleProp, ViewStyle } from 'react-native';
 export declare type OptionType<T> = {
     value: T;
     text: string;
     key?: string;
 };
+export interface SelectProps<T> {
+    /**
+     * 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 dimiss
+     */
+    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;
+}

package/types/components/TimePicker/StyledTimePicker.d.ts

@@ -0,0 +1,8 @@
+import { View, ViewProps } from 'react-native';
+declare const StyledPickerWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledPickerWrapper };

package/types/components/TimePicker/TimePickerAndroid.d.ts

@@ -0,0 +1,3 @@
+import { TimePickerProps } from './types';
+declare const TimePickerAndroid: ({ value, label, placeholder, onChange, displayFormat, disabled, required, error, style, testID, }: TimePickerProps) => JSX.Element;
+export default TimePickerAndroid;

package/types/components/TimePicker/TimePickerIOS.d.ts

@@ -0,0 +1,3 @@
+import { TimePickerProps } from './types';
+declare const TimePickerIOS: ({ value, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, style, testID, }: TimePickerProps) => JSX.Element;
+export default TimePickerIOS;

package/types/components/TimePicker/__tests__/TimePicker.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/TimePicker/__tests__/TimePickerAndroid.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/TimePicker/__tests__/TimePickerIOS.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import { TimePickerProps } from './types';
+declare const TimePicker: (props: TimePickerProps) => JSX.Element;
+export default TimePicker;

package/types/components/TimePicker/types.d.ts

@@ -0,0 +1,49 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface TimePickerProps {
+    /**
+     * Time picker input label.
+     */
+    label: string;
+    /**
+     * Current time value. Must be in correct default format or format provided via format prop.
+     */
+    value: Date | null;
+    /**
+     * Input placeholder. Time format will be used as placeholder if not specified.
+     */
+    placeholder?: string;
+    /**
+     * Callback that is called when new value is selected.
+     */
+    onChange: (value: Date) => void;
+    /**
+     * Confirm label text. iOS only.
+     */
+    confirmLabel: string;
+    /**
+     * Time display format of current value presented on the input. Default format is: HH:mm aa.
+     * Following date-fns's format (https://date-fns.org/v2.16.1/docs/format).
+     * This also change how the time picker display between 24 hour and 12 hour mode.
+     */
+    displayFormat?: string;
+    /**
+     * Whether the Time picker is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Error message to display.
+     */
+    error?: string;
+    /**
+     *  Whether the value is required, if true, an asterisk will be appended to the label.
+     */
+    required?: boolean;
+    /**
+     * Addtional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component..
+     */
+    testID?: string;
+}

package/types/index.d.ts

@@ -25,8 +25,9 @@ import Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';
 import TextInput from './components/TextInput';
+import TimePicker from './components/TimePicker';
 import Toast from './components/Toast';
 import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
-export { theme, getTheme, useTheme, scale, ThemeProvider, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Card, Collapse, Checkbox, ContentNavigator, Divider, Drawer, FAB, Icon, List, PinInput, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, Toast, Toolbar, Typography, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Card, Collapse, Checkbox, ContentNavigator, Divider, Drawer, FAB, Icon, List, PinInput, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, };
 export * from './types';

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

@@ -1,9 +1,13 @@
 import { GlobalTheme } from '../global';
 declare const getSelectTheme: (theme: GlobalTheme) => {
     space: {
+        minimumOptionListHeight: number;
         optionPadding: number;
         optionListPadding: number;
         optionListSpacing: number;
+        searchBarMarginTopSpacing: number;
+        searchBarHorizontalSpacing: number;
+        searchBarBottomSpacing: number;
     };
     colors: {
         option: string;

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

@@ -0,0 +1,6 @@
+declare const getTimePickerTheme: () => {
+    sizes: {
+        height: number;
+    };
+};
+export default getTimePickerTheme;

package/types/theme/index.d.ts

@@ -23,6 +23,7 @@ import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
 import getTagTheme from './components/tag';
 import getTextInputTheme from './components/textInput';
+import getTimePickerTheme from './components/timePicker';
 import getToastTheme from './components/toast';
 import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
@@ -52,6 +53,7 @@ declare type Theme = GlobalTheme & {
         tabs: ReturnType<typeof getTabsTheme>;
         tag: ReturnType<typeof getTagTheme>;
         textInput: ReturnType<typeof getTextInputTheme>;
+        timePicker: ReturnType<typeof getTimePickerTheme>;
         toast: ReturnType<typeof getToastTheme>;
         toolbar: ReturnType<typeof getToolbarTheme>;
         typography: ReturnType<typeof getTypographyTheme>;

package/src/components/Select/types.ts

@@ -1 +0,0 @@
-export type OptionType<T> = { value: T; text: string; key?: string };