ncore-ui-kit 1.1.0-alpha.7 → 1.1.0-alpha.8

package/src/components/timeSelector/index.tsx

@@ -1,39 +1,39 @@
 import {
     useEffect
-} from "react";
+} from "react";
 import {
     View
-} from "react-native";
+} from "react-native";
 import type {
     TimeInputRangeType
-} from "./components/timeInput/type";
-import type ITimeSelectorProps from "./type";
+} from "./components/timeInput/type";
+import type ITimeSelectorProps from "./type";
 import type {
     UpdateDateRangeType,
     UpdateDateType
-} from "./type";
+} from "./type";
 import stylesheet, {
     useStyles
-} from "./stylesheet";
-import TimeInput from "./components/timeInput";
+} from "./stylesheet";
+import TimeInput from "./components/timeInput";
 import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
     NCoreUIKitToast
-} from "../../core/hooks";
+} from "../../core/hooks";
 import type {
     DateTimePickerDateRange
-} from "../dateTimePicker/type";
-import moment from "moment";
+} from "../dateTimePicker/type";
 import {
     Fragment
-} from "react/jsx-runtime";
+} from "react/jsx-runtime";
+import moment from "moment";
 import Text from "../text";
 
 const TimeSelector = ({
     isTimeSelectWorksWithCenterWhenTimePicker,
-    multipleSelectMinimumRequireMS,
     isWorkWith24HoursFormat = true,
+    multipleSelectMinimumRequireMS,
     isWorkWithSeconds = false,
     multipleSelectMaximumMS,
     setIsSheetContentReady,
@@ -57,8 +57,8 @@ const TimeSelector = ({
     const {
         inputsContainer: inputsContainerDynamicStyle,
         rangeContainer: rangeContainerDynamicStyle,
-        container: containerDynamicStyle,
         colonText: colonTextDynamicStyle,
+        container: containerDynamicStyle,
         timeTitle: timeTitleDynamicStyle
     } = useStyles({
         isTimeSelectWorksWithCenterWhenTimePicker,
@@ -72,8 +72,8 @@ const TimeSelector = ({
 
     const setDateRangeValue = ({
         rangeType,
-        seconds,
         minutes,
+        seconds,
         hours
     }: UpdateDateRangeType) => {
         if(!dateRange) {
@@ -101,8 +101,8 @@ const TimeSelector = ({
     };
 
     const setDateValue = ({
-        seconds,
         minutes,
+        seconds,
         hours
     }: UpdateDateType) => {
         const newDate = date ? date : new Date();
@@ -178,11 +178,11 @@ const TimeSelector = ({
                 ]}
             >
                 <Text
-                    variant="labelMediumSize"
                     style={{
                         ...stylesheet.timeTitle,
                         ...timeTitleDynamicStyle
-                    }}
+                    }}
+                    variant="labelMediumSize"
                 >
                     {localize("start-time")}:
                 </Text>
@@ -210,11 +210,11 @@ const TimeSelector = ({
                         timeType="hours"
                     />
                     <Text
-                        variant="titleMediumSize"
                         style={{
                             ...stylesheet.colonText,
                             ...colonTextDynamicStyle
-                        }}
+                        }}
+                        variant="titleMediumSize"
                     >
                         :
                     </Text>
@@ -233,14 +233,14 @@ const TimeSelector = ({
                         rangeType="start"
                     />
                     {
-                        isWorkWithSeconds ?
+                        isWorkWithSeconds ?
                             <Fragment>
                                 <Text
-                                    variant="titleMediumSize"
                                     style={{
                                         ...stylesheet.colonText,
                                         ...colonTextDynamicStyle
-                                    }}
+                                    }}
+                                    variant="titleMediumSize"
                                 >
                                     :
                                 </Text>
@@ -258,17 +258,17 @@ const TimeSelector = ({
                                     minDate={minDate}
                                     rangeType="start"
                                 />
-                            </Fragment>
-                        :
+                            </Fragment>
+                        :
                             null
                     }
                 </View>
                 <Text
-                    variant="labelMediumSize"
                     style={{
                         ...stylesheet.timeTitle,
                         ...timeTitleDynamicStyle
-                    }}
+                    }}
+                    variant="labelMediumSize"
                 >
                     {localize("end-time")}:
                 </Text>
@@ -293,11 +293,11 @@ const TimeSelector = ({
                         rangeType="end"
                     />
                     <Text
-                        variant="titleMediumSize"
                         style={{
                             ...stylesheet.colonText,
                             ...colonTextDynamicStyle
-                        }}
+                        }}
+                        variant="titleMediumSize"
                     >
                         :
                     </Text>
@@ -316,14 +316,14 @@ const TimeSelector = ({
                         rangeType="end"
                     />
                     {
-                        isWorkWithSeconds ?
+                        isWorkWithSeconds ?
                             <Fragment>
                                 <Text
-                                    variant="titleMediumSize"
                                     style={{
                                         ...stylesheet.colonText,
                                         ...colonTextDynamicStyle
-                                    }}
+                                    }}
+                                    variant="titleMediumSize"
                                 >
                                     :
                                 </Text>
@@ -341,8 +341,8 @@ const TimeSelector = ({
                                     minDate={minDate}
                                     rangeType="end"
                                 />
-                            </Fragment>
-                        :
+                            </Fragment>
+                        :
                             null
                     }
                 </View>
@@ -351,11 +351,11 @@ const TimeSelector = ({
 
         return <View>
             <Text
-                variant="labelMediumSize"
                 style={{
                     ...stylesheet.timeTitle,
                     ...timeTitleDynamicStyle
-                }}
+                }}
+                variant="labelMediumSize"
             >
                 {localize("end-time")}:
             </Text>
@@ -378,11 +378,11 @@ const TimeSelector = ({
                     timeType="hours"
                 />
                 <Text
-                    variant="titleMediumSize"
                     style={{
                         ...stylesheet.colonText,
                         ...colonTextDynamicStyle
-                    }}
+                    }}
+                    variant="titleMediumSize"
                 >
                     :
                 </Text>
@@ -399,14 +399,14 @@ const TimeSelector = ({
                     minDate={minDate}
                 />
                 {
-                    isWorkWithSeconds ?
+                    isWorkWithSeconds ?
                         <Fragment>
                             <Text
-                                variant="titleMediumSize"
                                 style={{
                                     ...stylesheet.colonText,
                                     ...colonTextDynamicStyle
-                                }}
+                                }}
+                                variant="titleMediumSize"
                             >
                                 :
                             </Text>
@@ -422,8 +422,8 @@ const TimeSelector = ({
                                 maxDate={maxDate}
                                 minDate={minDate}
                             />
-                        </Fragment>
-                    :
+                        </Fragment>
+                    :
                         null
                 }
             </View>

package/src/components/timeSelector/stylesheet.ts

@@ -11,17 +11,17 @@ import type {
 } from "../../types";
 
 const stylesheet = StyleSheet.create({
-    container: {
-        width: "100%"
-    },
-    rangeContainer: {
-        flexDirection: "column"
-    },
     inputsContainer: {
         justifyContent: "flex-start",
         flexDirection: "row",
         alignItems: "center"
     },
+    rangeContainer: {
+        flexDirection: "column"
+    },
+    container: {
+        width: "100%"
+    },
     colonText: {
     },
     timeTitle: {
@@ -34,17 +34,17 @@ export const useStyles = ({
     spaces
 }: TimeSelectorDynamicStyle) => {
     const styles = {
+        colonText: {
+            marginHorizontal: spaces.spacingXs
+        } as Mutable<TextStyle>,
         container: {
             marginTop: spaces.spacingMd
         } as Mutable<ViewStyle>,
-        rangeContainer: {
-        } as Mutable<ViewStyle>,
         inputsContainer: {
             marginTop: spaces.spacingXs
         } as Mutable<ViewStyle>,
-        colonText: {
-            marginHorizontal: spaces.spacingXs
-        } as Mutable<TextStyle>,
+        rangeContainer: {
+        } as Mutable<ViewStyle>,
         timeTitle: {
         } as Mutable<TextStyle>
     };

package/src/components/toast/index.tsx

@@ -33,16 +33,16 @@ const Toast: FC<IToastProps> = ({
     isCloseOnPressActionButton = true,
     closeAnimationDelay = 350,
     openAnimationDelay = 200,
-    contentContainerStyle,
     autoCloseDelay = 3000,
+    contentContainerStyle,
     isCloseOnPress = true,
     icon: CustomIcon,
     type = "neutral",
     isShowAction,
     customTheme,
+    children,
     onClosed,
     subTitle,
-    children,
     action,
     style,
     title,
@@ -80,8 +80,8 @@ const Toast: FC<IToastProps> = ({
         currentType,
         radiuses,
         subTitle,
-        spaces,
         colors,
+        spaces,
         type
     });
 
@@ -89,14 +89,14 @@ const Toast: FC<IToastProps> = ({
         Animated.parallel([
             Animated.timing(opacityAnim, {
                 duration: openAnimationDelay,
-                useNativeDriver: true,
                 easing: Easing.linear,
+                useNativeDriver: true,
                 toValue: 1
             }),
             Animated.timing(transformAnim, {
                 duration: openAnimationDelay,
-                useNativeDriver: true,
                 easing: Easing.linear,
+                useNativeDriver: true,
                 toValue: 0
             })
         ]).start();
@@ -118,8 +118,8 @@ const Toast: FC<IToastProps> = ({
             }),
             Animated.timing(opacityAnim, {
                 duration: closeAnimationDelay,
-                useNativeDriver: true,
                 easing: Easing.linear,
+                useNativeDriver: true,
                 toValue: 0
             })
         ]).start(({
@@ -164,28 +164,28 @@ const Toast: FC<IToastProps> = ({
             ]}
         >
             <Text
-                color={currentType.titleColor}
-                numberOfLines={3}
+                color={currentType.titleColor}
                 style={{
                     ...stylesheet.title,
                     ...titleDynamicStyle
-                }}
+                }}
+                numberOfLines={3}
             >
                 {title}
             </Text>
             {
                 subTitle ?
                     <Text
-                        color={currentType.subTitleColor}
-                        variant="labelSmallSize"
-                        numberOfLines={2}
+                        color={currentType.subTitleColor}
                         style={{
                             ...stylesheet.subTitle,
                             ...subTitleDynamicStyle
-                        }}
+                        }}
+                        variant="labelSmallSize"
+                        numberOfLines={2}
                     >
                         {subTitle}
-                    </Text>
+                    </Text>
                 :
                     null
             }
@@ -198,18 +198,6 @@ const Toast: FC<IToastProps> = ({
         }
 
         return <Button
-            title={action && action.title ? action.title : undefined}
-            isCustomPadding={true}
-            spreadBehaviour="free"
-            onPress={() => {
-                if(isCloseOnPressActionButton) closeAnimation();
-
-                if(action && action.onPress) action.onPress({
-                    closeAnimation: ({
-                        onClosed: _onClosed
-                    }) => closeAnimation(_onClosed)
-                });
-            }}
             icon={() => {
                 if(action?.title) {
                     return null;
@@ -219,13 +207,25 @@ const Toast: FC<IToastProps> = ({
                     color={colors.content.text[currentType.actionColor]}
                     size={18}
                 />;
-            }}
+            }}
+            title={action && action.title ? action.title : undefined}
+            onPress={() => {
+                if(isCloseOnPressActionButton) closeAnimation();
+
+                if(action && action.onPress) action.onPress({
+                    closeAnimation: ({
+                        onClosed: _onClosed
+                    }) => closeAnimation(_onClosed)
+                });
+            }}
             style={{
                 ...action?.style,
                 ...actionDynamicStyle
-            }}
-            variant="ghost"
-            size="small"
+            }}
+            isCustomPadding={true}
+            spreadBehaviour="free"
+            variant="ghost"
+            size="small"
             type={type}
         />;
     };
@@ -252,12 +252,12 @@ const Toast: FC<IToastProps> = ({
                 stylesheet.container,
                 containerDynamicStyle,
                 {
-                    opacity: opacityAnim,
                     transform: [
                         {
                             translateY: transformAnim
                         }
-                    ]
+                    ],
+                    opacity: opacityAnim
                 }
             ]}
         >

package/src/components/toast/stylesheet.ts

@@ -26,20 +26,6 @@ export const TOAST_TYPE_STYLES: Record<
         iconColor: keyof NCoreUIKit.IconContentColors;
     }
 > = {
-    primary: {
-        actionColor: "onPrimary",
-        iconColor: "emphasized",
-        containerColor: "mid",
-        subTitleColor: "low",
-        titleColor: "mid"
-    },
-    danger: {
-        subTitleColor: "dangerLow",
-        containerColor: "danger",
-        actionColor: "danger",
-        titleColor: "danger",
-        iconColor: "danger"
-    },
     success: {
         subTitleColor: "successLow",
         containerColor: "success",
@@ -54,6 +40,13 @@ export const TOAST_TYPE_STYLES: Record<
         titleColor: "warning",
         iconColor: "warning"
     },
+    danger: {
+        subTitleColor: "dangerLow",
+        containerColor: "danger",
+        actionColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
     info: {
         subTitleColor: "infoLow",
         containerColor: "info",
@@ -61,6 +54,13 @@ export const TOAST_TYPE_STYLES: Record<
         titleColor: "info",
         iconColor: "info"
     },
+    primary: {
+        actionColor: "onPrimary",
+        iconColor: "emphasized",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    },
     neutral: {
         containerColor: "mid",
         subTitleColor: "low",
@@ -79,15 +79,6 @@ export const getToastType = ({
 };
 
 const stylesheet = StyleSheet.create({
-    container: {
-        position: "absolute",
-        alignSelf: "center",
-        zIndex: 99998
-    },
-    containerObject: {
-        flexDirection: "row",
-        alignItems: "center"
-    },
     contentContainer: {
         justifyContent: "center",
         alignItems: "flex-start",
@@ -98,6 +89,15 @@ const stylesheet = StyleSheet.create({
         justifyContent: "center",
         alignItems: "center"
     },
+    container: {
+        position: "absolute",
+        alignSelf: "center",
+        zIndex: 99998
+    },
+    containerObject: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
     title: {
         textAlign: "left"
     },
@@ -125,26 +125,26 @@ export const useStyles = ({
             paddingHorizontal: spaces.spacingLg,
             paddingVertical: spaces.spacingMd
         } as Mutable<ViewStyle>,
-        contentContainer: {
-
-        } as Mutable<ViewStyle>,
-        title: {
-
-        } as Mutable<TextStyle>,
-        subTitle: {
-            marginTop: spaces.spacingXs
-        } as Mutable<TextStyle>,
-        iconContainer: {
-            paddingRight: spaces.spacingSm,
-            marginRight: spaces.spacingSm
-        } as Mutable<ViewStyle>,
         action: {
             paddingBottom: spaces.spacingSm,
             paddingRight: spaces.spacingSm,
             paddingLeft: spaces.spacingMd,
             paddingTop: spaces.spacingSm,
             marginLeft: spaces.spacingMd
-        } as Mutable<ViewStyle>
+        } as Mutable<ViewStyle>,
+        iconContainer: {
+            paddingRight: spaces.spacingSm,
+            marginRight: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        subTitle: {
+            marginTop: spaces.spacingXs
+        } as Mutable<TextStyle>,
+        contentContainer: {
+
+        } as Mutable<ViewStyle>,
+        title: {
+
+        } as Mutable<TextStyle>
     };
 
     if(subTitle) {

package/src/components/toast/type.ts

@@ -35,7 +35,14 @@ export type ToastType = "primary" | "danger" | "warning" | "neutral" | "success"
 
 export type ToastInternalProps = {
     contentContainerStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
     style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    isCloseOnPressActionButton?: boolean;
     action?: {
         onPress: (props: {
             closeAnimation: (props: {
@@ -48,7 +55,6 @@ export type ToastInternalProps = {
         style?: ViewStyle;
         title?: string;
     };
-    isCloseOnPressActionButton?: boolean;
     closeAnimationDelay?: number;
     openAnimationDelay?: number;
     isCloseOnPress?: boolean;
@@ -56,19 +62,13 @@ export type ToastInternalProps = {
     isShowAction?: boolean;
     icon?: NCoreUIKitIcon;
     children?: ReactNode;
+    onClosed?: (props: {
+        id: string;
+    }) => void;
     subTitle?: string;
     type?: ToastType;
     title: string;
     id: string;
-    onClosed?: (props: {
-        id: string;
-    }) => void;
-    customTheme?: {
-        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
-        sharpness?: keyof NCoreUIKit.SharpnessKey;
-        paletteKey?: keyof NCoreUIKit.PaletteKey;
-        themeKey?: keyof NCoreUIKit.ThemeKey;
-    };
 };
 
 interface IToastProps extends ToastInternalProps {