etendo-ui-library 1.0.32 → 1.0.34

package/components/dropdown/Dropdown.stories.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {Story, Meta} from '@storybook/react';
+
+import Dropdown from './Dropdown';
+import {NavbarProps} from '../navbar/Navbar.types';
+
+export default {
+  title: 'Etendo/Dropdown',
+  component: Dropdown,
+  argTypes: {},
+} as Meta<typeof Dropdown>;
+
+const dataset = [
+  {name: 'User', route: '', key: 'user'},
+  {name: 'Vehicles', route: '', key: 'vehicles'},
+  {name: 'Skills', route: '', key: 'skills'},
+  {name: 'Mobile app', route: '', key: 'movilApp'},
+  {name: 'Staff', route: '', key: 'staff'},
+  {name: 'Routing options', route: '', key: 'routing options'},
+  {name: 'Map', route: '', key: 'map'},
+];
+
+const onCheckSelectedMock = () => dataset[0];
+
+/* Templates */
+const Template: Story<NavbarProps> = () => (
+  <Dropdown
+    data={dataset}
+    onChangeSelected={onCheckSelectedMock}
+    text="Massive load"
+    style="primary"
+    typeSizeText="small"
+  />
+);
+
+const Template2: Story<NavbarProps> = () => (
+  <Dropdown
+    data={dataset}
+    onChangeSelected={onCheckSelectedMock}
+    text="New vehicle"
+    style="primary"
+    typeSizeText="medium"
+  />
+);
+
+const Template3: Story<NavbarProps> = () => (
+  <Dropdown
+    data={dataset}
+    onChangeSelected={onCheckSelectedMock}
+    text="Assets"
+    style="primary"
+    typeSizeText="large"
+  />
+);
+
+/* Story exports */
+export const DropdownSmallText = Template.bind({});
+DropdownSmallText.args = {};
+
+export const DropdownMediumText = Template2.bind({});
+DropdownMediumText.args = {};
+
+export const DropdownLargeText = Template3.bind({});
+DropdownLargeText.args = {};

package/components/dropdown/Dropdown.styles.tsx

@@ -0,0 +1,67 @@
+/* Imports */
+import {DropdownStyleRecord} from './Dropdown.types';
+import {
+  BLUE,
+  GREY_BLUE,
+  GREY_5,
+  GREY_BLUE_50,
+  WHITE,
+} from '../../styles/colors';
+
+/* Export of different styles */
+export const DropdownStyleVariant: DropdownStyleRecord = {
+  /* Primary style */
+  primary: {
+    container: {
+      width: '17%',
+      padding: 5,
+    },
+    dropDownButton: {
+      flex: 1,
+      backgroundColor: BLUE,
+      padding: 11,
+      borderRadius: 5,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      zIndex: 10,
+    },
+    dropDownButtonText: {
+      color: WHITE,
+      fontSize: 18,
+      fontWeight: '500',
+      flex: 1,
+      textAlign: 'center',
+    },
+    iconWithOptionsDisplayed: {
+      width: 14,
+      height: 14,
+      tintColor: WHITE,
+      transform: [{rotate: '180deg'}],
+    },
+    iconWithOptionsNotDisplayed: {
+      width: 14,
+      height: 14,
+      tintColor: WHITE,
+    },
+    containerOptions: {
+      marginTop: 2,
+      borderWidth: 1,
+      borderColor: GREY_BLUE,
+      borderRadius: 3,
+      top: -6,
+    },
+    option: {
+      backgroundColor: GREY_5,
+      borderBottomWidth: 1.5,
+      borderBottomColor: GREY_BLUE_50,
+      justifyContent: 'center',
+    },
+    textOption: {
+      margin: 10,
+      //   fontSize: 18,
+      textAlign: 'left',
+      fontWeight: '500',
+    },
+  },
+};

package/components/dropdown/Dropdown.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Dropdown from './Dropdown';
+
+const dataset = [
+  {name: 'User', route: '', key: 'user'},
+  {name: 'Vehicles', route: '', key: 'vehicles'},
+  {name: 'Skills', route: '', key: 'skills'},
+  {name: 'Mobile app', route: '', key: 'movilApp'},
+  {name: 'Staff', route: '', key: 'staff'},
+  {name: 'Routing options', route: '', key: 'routing options'},
+  {name: 'Map', route: '', key: 'map'},
+];
+
+const onCheckSelectedMock = () => dataset[0];
+
+describe('Running Test for Dropdown', () => {
+  it('Check Dropdown Disabled', () => {
+    const tree = renderer
+      .create(
+        <Dropdown
+          data={dataset}
+          onChangeSelected={onCheckSelectedMock}
+          text="Massive load"
+          style="primary"
+          typeSizeText="medium"
+        />,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/components/dropdown/Dropdown.tsx

@@ -0,0 +1,70 @@
+import React, {useState} from 'react';
+import {View, Text, TouchableOpacity, Image, ScrollView} from 'react-native';
+
+import DropdownItem from './DropdownItem';
+import {DropdownStyleVariant} from './Dropdown.styles';
+import {DropdownProps, Info} from './Dropdown.types';
+
+const Dropdown = ({
+  data,
+  onChangeSelected,
+  text,
+  typeSizeText,
+}: DropdownProps) => {
+  const [showOptions, setShowOptions] = useState(false);
+  const [toggleItem, setToggleItem] = useState<number>(-1);
+
+  return (
+    <View style={DropdownStyleVariant.primary.container}>
+      <TouchableOpacity
+        style={DropdownStyleVariant.primary.dropDownButton}
+        activeOpacity={1}
+        onPress={() => setShowOptions(!showOptions)}
+      >
+        <Text style={DropdownStyleVariant.primary.dropDownButtonText}>
+          {text}
+        </Text>
+        {showOptions ? (
+          <Image
+            source={require('../../assets/images/icons/arrowPicker.png')}
+            style={DropdownStyleVariant.primary.iconWithOptionsDisplayed}
+            resizeMode="contain"
+          />
+        ) : (
+          <Image
+            source={require('../../assets/images/icons/arrowPicker.png')}
+            style={DropdownStyleVariant.primary.iconWithOptionsNotDisplayed}
+            resizeMode="contain"
+          />
+        )}
+      </TouchableOpacity>
+
+      {showOptions && (
+        <ScrollView style={DropdownStyleVariant.primary.containerOptions}>
+          {data.map((item: Info, index: number) => {
+            return (
+              <DropdownItem
+                item={item}
+                index={index}
+                onPress={() => {
+                  /* Allows to detect the selected item */
+                  setToggleItem(index);
+                  onChangeSelected({
+                    name: item.name,
+                    route: item.route,
+                    key: item.key,
+                  });
+                }}
+                key={item.key}
+                toggleItem={toggleItem}
+                sizeText={typeSizeText}
+              />
+            );
+          })}
+        </ScrollView>
+      )}
+    </View>
+  );
+};
+
+export default Dropdown;

package/components/dropdown/Dropdown.types.tsx

@@ -0,0 +1,51 @@
+/* Imports */
+import {ImageStyle, StyleProp, TextStyle, ViewStyle} from 'react-native';
+
+/* Type declaration */
+export type Info = {
+  name: string;
+  route: string;
+  key: string;
+};
+
+export interface DropdownProps {
+  data: Info[];
+  onChangeSelected: (Info: Info | undefined) => Info;
+  text: string;
+  style?: DropdownStyleType;
+  typeSizeText: DropdownStyleFontSize;
+}
+
+export interface DropdownItemProps {
+  item: Info;
+  onPress: () => void;
+  index: number;
+  toggleItem: number;
+  styleText?: DropdownStyleType;
+  sizeText: DropdownStyleFontSize;
+}
+
+/* Declaration of style types */
+export type DropdownStyleType = 'primary';
+export type DropdownStyleFontSize = 'small' | 'medium' | 'large';
+
+export type DropdownStyleRecord = Record<
+  DropdownStyleType,
+  {
+    container: ViewStyle;
+    dropDownButton?: ViewStyle;
+    dropDownButtonText: TextStyle;
+    iconWithOptionsDisplayed: StyleProp<ImageStyle>;
+    iconWithOptionsNotDisplayed: StyleProp<ImageStyle>;
+    containerOptions: ViewStyle;
+    option: ViewStyle;
+    textOption: TextStyle;
+  }
+>;
+
+export type DropdownStyleText = Record<
+  DropdownStyleFontSize,
+  {
+    fontSize: TextStyle;
+  }
+>;

package/components/dropdown/DropdownItem.styles.tsx

@@ -0,0 +1,42 @@
+import {DropdownStyleVariant} from './Dropdown.styles';
+import {DropdownStyleFontSize} from './Dropdown.types';
+import {GREY_5, YELLOW} from '../../styles/colors';
+
+/* Styles - This function allows to obtain the text styles of the TabItem component */
+export const getStyle = (toggleItem: number, index: number) => {
+  let colorActive: string = YELLOW;
+  let colorInactive: string = GREY_5;
+
+  if (index === toggleItem) {
+    return [
+      DropdownStyleVariant.primary.option,
+      {backgroundColor: colorActive},
+    ];
+  } else {
+    return [
+      DropdownStyleVariant.primary.option,
+      {backgroundColor: colorInactive},
+    ];
+  }
+};
+
+export const getSizeText = (sizeText: DropdownStyleFontSize) => {
+  let fontSize: number = 0;
+
+  /* Choice of text size based on the size chosen by the programmer */
+  switch (sizeText) {
+    case 'small':
+      fontSize = 14;
+      break;
+    case 'medium':
+      fontSize = 18;
+      break;
+    case 'large':
+      fontSize = 20;
+      break;
+    default:
+      break;
+  }
+
+  return fontSize;
+};

package/components/dropdown/DropdownItem.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import DropdownItem from './DropdownItem';
+
+const item = {name: 'User', route: '', key: 'user'};
+
+describe('Running Test for DropdownItem', () => {
+  it('Check DropdownItem Disabled', () => {
+    const tree = renderer
+      .create(
+        <DropdownItem
+          item={item}
+          onPress={() => {}}
+          index={0}
+          toggleItem={0}
+          sizeText={'medium'}
+        />,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/components/dropdown/DropdownItem.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Text, TouchableOpacity} from 'react-native';
+
+import {DropdownStyleVariant} from './Dropdown.styles';
+import {DropdownItemProps} from './Dropdown.types';
+import {getSizeText, getStyle} from './DropdownItem.styles';
+
+const DropdownItem = ({
+  item,
+  onPress,
+  index,
+  toggleItem,
+  sizeText,
+}: DropdownItemProps) => {
+  return (
+    <TouchableOpacity
+      style={getStyle(toggleItem, index)}
+      onPress={() => {
+        onPress();
+      }}
+      key={item.key}
+      activeOpacity={1}
+    >
+      <Text
+        key={item.key}
+        style={[
+          {fontSize: getSizeText(sizeText)},
+          DropdownStyleVariant.primary.textOption,
+        ]}
+      >
+        {item.name}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+export default DropdownItem;

package/components/dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Running Test for Dropdown Check Dropdown Disabled 1`] = `
+<View
+  style={
+    Object {
+      "padding": 5,
+      "width": "17%",
+    }
+  }
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#202452",
+        "borderRadius": 5,
+        "flex": 1,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "opacity": 1,
+        "padding": 11,
+        "zIndex": 10,
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "color": "#FFFFFF",
+          "flex": 1,
+          "fontSize": 18,
+          "fontWeight": "500",
+          "textAlign": "center",
+        }
+      }
+    >
+      Massive load
+    </Text>
+    <Image
+      resizeMode="contain"
+      source={
+        Object {
+          "testUri": "../../../assets/images/icons/arrowPicker.png",
+        }
+      }
+      style={
+        Object {
+          "height": 14,
+          "tintColor": "#FFFFFF",
+          "width": 14,
+        }
+      }
+    />
+  </View>
+</View>
+`;

package/components/dropdown/__snapshots__/DropdownItem.test.tsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Running Test for DropdownItem Check DropdownItem Disabled 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#FAD614",
+      "borderBottomColor": "#D3D6E1",
+      "borderBottomWidth": 1.5,
+      "justifyContent": "center",
+      "opacity": 1,
+    }
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "fontSize": 18,
+        },
+        Object {
+          "fontWeight": "500",
+          "margin": 10,
+          "textAlign": "left",
+        },
+      ]
+    }
+  >
+    User
+  </Text>
+</View>
+`;

package/components/dropdown/index.ts

@@ -0,0 +1,3 @@
+import Dropdown from './Dropdown';
+
+export {Dropdown};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etendo-ui-library",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "private": false,
   "scripts": {
     "android": "react-native run-android",