ikualo-ui-kit-mobile 0.2.0 → 0.2.2

package/.env

@@ -1 +1,2 @@
-EXPO_API_DEV_URL=https://api-gw-dev.ikualo.com/api/v1/
+EXPO_PUBLIC_API_URL=https://api-gw-dev.ikualo.com/api/v1/
+EXPO_PUBLIC_API_KEY_VEXO=110bbcca-a118-494c-9b6f-ad60ec11370e

package/assets/styles/elements/buttons.ts

@@ -218,7 +218,6 @@ const stylesButtonCircle = StyleSheet.create({
     borderRadius: 19,
     backgroundColor: theme.colors.lightPurpleBorder,
     paddingHorizontal: 8,
-    paddingTop: 4,
   },
   'btn-circle__icon': {
     fontSize: 14,

package/assets/styles/elements/dialog.ts

@@ -41,6 +41,7 @@ export const stylesDialog = StyleSheet.create({
     fontFamily: 'MontserratSemiBold',
     marginBottom: 16,
   },
+  'dialog-only-title': { marginBottom: 0, marginTop: 16 },
   'dialog-select-title': {
     fontSize: 14,
     color: theme.colors.text,
@@ -48,7 +49,7 @@ export const stylesDialog = StyleSheet.create({
     fontFamily: 'MontserratSemiBold',
     marginTop: -5,
   },
-  'dialog-container-icon': { flexDirection: 'row', justifyContent: 'center', },
+  'dialog-container-icon': { flexDirection: 'row', justifyContent: 'center', marginBottom: 16 },
   'dialog-text': {
     fontSize: 14,
     color: theme.colors.text,

package/assets/styles/elements/dropdown.ts

@@ -6,7 +6,6 @@ const styleDropdown = StyleSheet.create({
     width: 'auto',
     flexDirection: 'row',
     justifyContent: 'flex-end',
-    marginTop: 28
   },
   'dropdown-menu': { flexDirection: 'row', alignItems: 'center' },
   'dropdown-content': { backgroundColor: 'white', borderRadius: 16, padding: 16 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/elements/dialogs/DialogGeneral.tsx

@@ -63,11 +63,10 @@ export const DialogGeneral = (props: IFDialogIcon) => {
                 {IconDelete}
               </View>
             )}
-            <Text style={[stylesDialog['dialog-title']]}>{title}</Text>
+            <Text style={[stylesDialog['dialog-title'], !text && !children && stylesDialog['dialog-only-title']]}>{title}</Text>
             <Text style={textStyle || stylesDialog['dialog-text']}>
               {text}
             </Text>
-
             {children}
             <View style={stylesDialog['dialog-actions']}>
               {textCancel && (

package/src/elements/headers/HeaderPage.tsx

@@ -8,13 +8,14 @@ import { theme } from '../../config/paper.config';
 
 interface IFHeaderPage {
   title: string;
+  hideBack?: boolean;
   navigateTo?: 'Back' | string;
   onPressBack?: () => void;
   onPressRight?: () => void;
   right: 'icon' | 'close' | 'help' | ''
 }
 export const HeaderPage = (props: IFHeaderPage) => {
-  const { navigateTo, title, onPressBack, onPressRight, right } = props;
+  const { navigateTo, title, onPressBack, onPressRight, right, hideBack } = props;
   const { navigate, goBack } = useNavigation();
   const navigateToScreen = () => {
     onPressBack && onPressBack();
@@ -45,11 +46,13 @@ export const HeaderPage = (props: IFHeaderPage) => {
   ]
   return (
     <View style={stylesHeader['header']}>
-      <TouchableOpacity onPress={navigateToScreen}>
-        <View style={stylesHeader['header-icon-back']}>
-          <FontAwesome6 name="chevron-left" size={16} color={theme.colors.primary} />
-        </View>
-      </TouchableOpacity>
+      {!hideBack &&
+        <TouchableOpacity onPress={navigateToScreen}>
+          <View style={stylesHeader['header-icon-back']}>
+            <FontAwesome6 name="chevron-left" size={16} color={theme.colors.primary} />
+          </View>
+        </TouchableOpacity>
+      }
       <View style={{ flex: 1, alignItems: 'center' }}>
         <Text variant="bodyMedium" style={stylesHeader['header-title']}>
           {title}

package/src/elements/select/Select.tsx

@@ -12,9 +12,10 @@ interface IFSelect {
   options: { value: string; label: ReactElement }[];
   onSelect: (value: string) => void;
   value?: string;
+  showInLabel?: "placeholder" | "label"
 }
 export const Select = (props: IFSelect) => {
-  const { placeholder, options, onSelect, label, isDisabled, value } = props;
+  const { placeholder, options, onSelect, label, isDisabled, value, showInLabel } = props;
   const [showList, setShowList] = useState(false);
   const [selected, setSelected] = useState<ReactElement | null>(
     options?.find((option) => option.value === value)?.label ?? null
@@ -38,7 +39,7 @@ export const Select = (props: IFSelect) => {
       </TouchableNativeFeedback>
       <SelectList
         children={options}
-        label={placeholder}
+        label={showInLabel === "label" ? label : placeholder}
         onDismiss={() => setShowList(false)}
         onSelect={(value) => {
           setSelected(value.label);
@@ -48,4 +49,4 @@ export const Select = (props: IFSelect) => {
       />
     </>
   );
-};
+};