@hero-design/rn 7.12.1 → 7.13.0

package/src/theme/index.ts

@@ -18,6 +18,7 @@ import getButtonTheme from './components/button';
 import getCardTheme from './components/card';
 import getCheckboxTheme from './components/checkbox';
 import getContentNavigatorTheme from './components/contentNavigator';
+import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
 import getFABTheme from './components/fab';
@@ -49,6 +50,7 @@ type Theme = GlobalTheme & {
     card: ReturnType<typeof getCardTheme>;
     checkbox: ReturnType<typeof getCheckboxTheme>;
     contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
+    datePicker: ReturnType<typeof getDatePickerTheme>;
     divider: ReturnType<typeof getDividerTheme>;
     drawer: ReturnType<typeof getDrawerTheme>;
     fab: ReturnType<typeof getFABTheme>;
@@ -88,6 +90,7 @@ const getTheme = (
       card: getCardTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
+      datePicker: getDatePickerTheme(),
       divider: getDividerTheme(globalTheme),
       drawer: getDrawerTheme(globalTheme),
       fab: getFABTheme(globalTheme),

package/types/components/Button/StyledButton.d.ts

@@ -1,8 +1,8 @@
-import { View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 import { Theme } from '@emotion/react';
 declare type Intent = 'primary' | 'secondary' | 'danger';
 declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
-declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -10,7 +10,7 @@ declare const StyledButtonContainer: import("@emotion/native").StyledComponent<i
     pressed?: boolean | undefined;
     themeVariant: ThemeVariant;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<TouchableHighlight> | undefined;
 }>;
 declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
     theme?: Theme | undefined;

package/types/components/DatePicker/DatePickerAndroid.d.ts

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

package/types/components/DatePicker/DatePickerIOS.d.ts

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

package/types/components/DatePicker/StyledDatePicker.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/DatePicker/__tests__/DatePicker.spec.d.ts

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

package/types/components/DatePicker/__tests__/DatePickerAndroid.spec.d.ts

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

package/types/components/DatePicker/__tests__/DatePickerIOS.spec.d.ts

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

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

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

package/types/components/DatePicker/types.d.ts

@@ -0,0 +1,48 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface DatePickerProps {
+    /**
+     * Date picker input label.
+     */
+    label: string;
+    /**
+     * Current date value. Must be in correct default format or format provided via format prop.
+     */
+    value?: Date;
+    /**
+     * Input placeholder. Date 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;
+    /**
+     * Date format. Default format is dd/MM/yyyy.
+     * Following date-fns's format (https://date-fns.org/v2.16.1/docs/format).
+     */
+    displayFormat?: string;
+    /**
+     * Whether the Date 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/components/TimePicker/types.d.ts

@@ -7,7 +7,7 @@ export interface TimePickerProps {
     /**
      * Current time value. Must be in correct default format or format provided via format prop.
      */
-    value: Date | null;
+    value?: Date;
     /**
      * Input placeholder. Time format will be used as placeholder if not specified.
      */

package/types/index.d.ts

@@ -10,6 +10,7 @@ import Card from './components/Card';
 import Collapse from './components/Collapse';
 import Checkbox from './components/Checkbox';
 import ContentNavigator from './components/ContentNavigator';
+import DatePicker from './components/DatePicker';
 import Divider from './components/Divider';
 import Drawer from './components/Drawer';
 import FAB from './components/FAB';
@@ -29,5 +30,5 @@ 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, TimePicker, Toast, Toolbar, Typography, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Card, Collapse, Checkbox, ContentNavigator, DatePicker, 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/button.d.ts

@@ -31,6 +31,18 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
         disabledBackground: string;
         invertedText: string;
         utilityBackground: string;
+        underlayColors: {
+            'filled-primary': string;
+            'filled-secondary': string;
+            'filled-danger': string;
+            'outlined-primary': string;
+            'outlined-secondary': string;
+            'outlined-danger': string;
+            'text-primary': string;
+            'text-secondary': string;
+            'text-danger': string;
+            'basic-transparent': string;
+        };
     };
     lineHeight: {
         default: number;

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

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

package/types/theme/global/colors.d.ts

@@ -5,6 +5,7 @@ declare const systemPalette: {
     primaryBackground: string;
     secondary: string;
     secondaryLight: string;
+    secondaryBackground: string;
     info: string;
     infoMediumLight: string;
     infoLight: string;

package/types/theme/global/index.d.ts

@@ -8,6 +8,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         primaryBackground: string;
         secondary: string;
         secondaryLight: string;
+        secondaryBackground: string;
         info: string;
         infoMediumLight: string;
         infoLight: string;

package/types/theme/index.d.ts

@@ -8,6 +8,7 @@ import getButtonTheme from './components/button';
 import getCardTheme from './components/card';
 import getCheckboxTheme from './components/checkbox';
 import getContentNavigatorTheme from './components/contentNavigator';
+import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
 import getFABTheme from './components/fab';
@@ -38,6 +39,7 @@ declare type Theme = GlobalTheme & {
         card: ReturnType<typeof getCardTheme>;
         checkbox: ReturnType<typeof getCheckboxTheme>;
         contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
+        datePicker: ReturnType<typeof getDatePickerTheme>;
         divider: ReturnType<typeof getDividerTheme>;
         drawer: ReturnType<typeof getDrawerTheme>;
         fab: ReturnType<typeof getFABTheme>;