@widergy/mobile-ui 1.8.3 → 1.10.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.10.0](https://github.com/widergy/mobile-ui/compare/v1.9.0...v1.10.0) (2024-05-20)
+
+
+### Features
+
+* autocomplete empty list component ([#287](https://github.com/widergy/mobile-ui/issues/287)) ([a90a0b2](https://github.com/widergy/mobile-ui/commit/a90a0b2fd85e4171d08fc012447b18b522bae6f8))
+
+# [1.9.0](https://github.com/widergy/mobile-ui/compare/v1.8.3...v1.9.0) (2024-05-17)
+
+
+### Features
+
+* uticon ([#284](https://github.com/widergy/mobile-ui/issues/284)) ([b71c18f](https://github.com/widergy/mobile-ui/commit/b71c18f09f8e5e5937674da4587dd5b7cd5d6de7))
+
 ## [1.8.3](https://github.com/widergy/mobile-ui/compare/v1.8.2...v1.8.3) (2024-05-15)
 
 

package/lib/components/UTAutocomplete/index.js

@@ -18,6 +18,7 @@ const UTAutocomplete = ({
   variant,
   autoCompletePlaceholder,
   MenuOptionComponent,
+  ListEmptyComponent,
   filterOptions,
   persistSelectedOption = false
 }) => {
@@ -49,6 +50,7 @@ const UTAutocomplete = ({
         autoCompletePlaceholder={autoCompletePlaceholder}
         maxHeight={WINDOW_HEIGHT * 0.25}
         MenuOptionComponent={MenuOptionComponent}
+        ListEmptyComponent={ListEmptyComponent}
         filterOptions={filterOptions}
       >
         <UTTextInput
@@ -87,6 +89,7 @@ UTAutocomplete.propTypes = {
   variant: string,
   autoCompletePlaceholder: string,
   MenuOptionComponent: element,
+  ListEmptyComponent: element,
   filterOptions: bool,
   persistSelectedOption: bool
 };

package/lib/components/UTIcon/README.md

@@ -0,0 +1,63 @@
+# UTIcon
+
+### Description
+
+Icon component using Tabler Icons library.
+
+### UX/UI Icon Lists
+- [Figma](https://www.figma.com/file/upiqGm1l10mBTbV9gn35Fh/Icons---Stylesheet?type=design&node-id=3-5&mode=design)
+- [Zeroheight](https://zeroheight.com/6d447f9f5/p/87aa21-resources)
+
+### Name
+
+Icon names must be PascalCase.
+
+Usually, icon names are a convertion from figma's or zeroheight's snake_case to PascalCase, adding `Icon` as a prefix.
+
+```
+Figma: truck-delivery
+UTIcon: IconTruckDelivery
+```
+
+Sometimes icons will be called {icon-name}-old. In these cases, usually, the icon name is made in the same way already explained, but subtracting the
+`-old` suffix.
+
+```
+Figma: chevron-right-old
+UTIcon: IconChevronRight
+```
+
+Exceptions may exists to these rules.
+
+### Color
+
+Android always requires a color value, so the prop defaults to black.
+
+### Props
+
+| Name      | Description                         |Default  |
+| --------- | ----------------------------------- | ------- |
+| color     | The icon color                      | 'black' |
+| name      | The name of the icon in TablerIcons | ------- |
+| size      | The icon size                       | ------- |
+| style     | The style to be aplied to the Icon  | ------- |
+
+### Usage
+
+```javascript
+import { UTIcon } from '@widergy/mobile-ui';
+import { View } from 'react-native';
+import React from 'react';
+
+import styles from './styles';
+
+const MyComponent = () => {
+  return (
+    <View>
+      <UTIcon color="skyBlue" name="IconTruckDelivery" size={48} style={styles.iconStyle} />
+    </View>
+  );
+};
+
+export default MyComponent;
+```

package/lib/components/UTIcon/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import * as TablerIcons from '@tabler/icons-react-native';
+import { number, string } from 'prop-types';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+const UTIcon = ({ color = 'black', name, size, style }) => {
+  const IconComponent = TablerIcons[name];
+
+  if (!IconComponent) return null;
+
+  return <IconComponent color={color} size={size} style={style} />;
+};
+
+UTIcon.propTypes = {
+  color: string,
+  name: string,
+  size: number,
+  style: ViewPropTypes.style
+};
+
+export default UTIcon;

package/lib/components/UTMenu/components/ListView/index.js

@@ -46,7 +46,7 @@ class ListView extends PureComponent {
   };
 
   render() {
-    const { filteredOptions, ItemSeparatorComponent } = this.props;
+    const { filteredOptions, ItemSeparatorComponent, ListEmptyComponent } = this.props;
     const { style } = this.state;
 
     return (
@@ -57,6 +57,7 @@ class ListView extends PureComponent {
         keyboardShouldPersistTaps="always"
         renderItem={this.renderItem}
         ItemSeparatorComponent={ItemSeparatorComponent}
+        ListEmptyComponent={ListEmptyComponent}
       />
     );
   }

package/lib/components/UTMenu/index.js

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Dimensions, Keyboard, KeyboardAvoidingView, Modal, TouchableOpacity, View } from 'react-native';
 
 import useKeyboardHeight from '../../hooks/useKeyboardHeight';
@@ -24,6 +24,7 @@ const UTMenu = ({
   styles: propStyles,
   MenuOptionComponent = MenuOption,
   ItemSeparatorComponent,
+  ListEmptyComponent,
   maxHeight,
   isMultiple,
   autoCompletePlaceholder,
@@ -102,11 +103,11 @@ const UTMenu = ({
 
   const handleQueryChange = value => {
     setQuery(value);
-    onQueryChange(value);
+    onQueryChange?.(value);
   };
 
   return (
-    <>
+    <Fragment>
       <TouchableOpacity
         disabled={disabled}
         onPress={isOpen ? closeMenu : openMenu}
@@ -153,6 +154,7 @@ const UTMenu = ({
               usableWindowHeight={usableWindowHeight}
               filteredOptions={filteredOptions}
               ItemSeparatorComponent={ItemSeparatorComponent}
+              ListEmptyComponent={ListEmptyComponent}
               MenuOptionComponent={MenuOptionComponent}
               handleOptionPress={handleOptionPress}
               onPress={onPress}
@@ -164,7 +166,7 @@ const UTMenu = ({
           </KeyboardAvoidingView>
         </View>
       </Modal>
-    </>
+    </Fragment>
   );
 };
 

package/lib/index.js

@@ -27,6 +27,7 @@ export { default as UTPasswordField } from './components/UTPasswordField';
 export { default as Icon } from './components/Icon';
 export { default as ImageIcon } from './components/ImageIcon';
 export { default as SeparatorBar } from './components/SeparatorBar';
+export { default as UTIcon } from './components/UTIcon';
 // Library Components
 export { default as AvatarImage } from './components/AvatarImage';
 export { default as Carousel } from './components/Carousel';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.8.3",
+  "version": "1.10.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -35,16 +35,17 @@
   },
   "dependencies": {
     "@react-navigation/native": "^6.1.9",
+    "@tabler/icons-react-native": "^3.3.0",
     "@widergy/web-utils": "^2.0.0",
     "core-js": "3",
     "deprecated-react-native-prop-types": "^4.2.1",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
     "pdf-lib": "^1.17.1",
+    "react-native-collapsible": "^1.6.1",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal": "^13.0.1",
-    "react-native-pager-view": "^6.2.1",
-    "react-native-collapsible": "^1.6.1"
+    "react-native-pager-view": "^6.2.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.10",