@axelor/aos-mobile-ui 6.5.0 → 6.5.2

package/lib/components/organisms/AutoCompleteSearch/AutoCompleteSearch.js

@@ -20,21 +20,28 @@ import { View } from 'react-native';
 import { useClickOutside, OUTSIDE_INDICATOR, } from '../../../hooks/use-click-outside';
 import { SelectionContainer } from '../../molecules';
 import { SearchBar } from '../../organisms';
-const TIME_WITHOUT_INPUT = 1000;
+const isValidString = (string) => {
+    return typeof string === 'string' && string !== '';
+};
+const TIME_WITHOUT_INPUT = 2000;
 const TIME_BETWEEN_CALL = 1000;
-const AutoCompleteSearch = ({ objectList, value = null, onChangeValue, fetchData = () => { }, displayValue, placeholder, isFocus = false, changeScreenAfter = false, navigate = false, oneFilter = false, onSelection, onScanPress, scanIconColor = null, selectLastItem = true, style, }) => {
+const AutoCompleteSearch = ({ objectList, value = null, onChangeValue, fetchData = () => { }, displayValue, placeholder, isFocus = false, changeScreenAfter = false, navigate = false, oneFilter = false, onSelection = () => { }, onScanPress, scanIconColor = null, selectLastItem = true, style, }) => {
     const [displayList, setDisplayList] = useState(false);
+    const [previousState, setPreviousState] = useState(null);
+    const [selected, setSelected] = useState(value ? true : false);
+    const [searchText, setSearchText] = useState(value ? displayValue(value) : null);
+    let timeOutRequestCall = useRef();
+    let intervalRequestCall = useRef();
     const wrapperRef = useRef(null);
     const clickOutside = useClickOutside({
         wrapperRef,
         visible: displayList,
     });
-    const [searchText, setSearchText] = useState(value ? displayValue(value) : null);
-    const [previousState, setPreviousState] = useState(null);
-    const [newInterval, setNewInterval] = useState(0);
-    const [selected, setSelected] = useState(value ? true : false);
-    let timeOutRequestCall = useRef();
-    let intervalRequestCall = useRef();
+    useEffect(() => {
+        if (clickOutside === OUTSIDE_INDICATOR && displayList) {
+            setDisplayList(false);
+        }
+    }, [clickOutside, displayList]);
     const handleAPICall = useCallback(() => {
         if (!selected) {
             if (searchText == null && searchText === '') {
@@ -46,15 +53,8 @@ const AutoCompleteSearch = ({ objectList, value = null, onChangeValue, fetchData
         }
     }, [fetchData, searchText, selected]);
     useEffect(() => {
-        if (!selected) {
-            handleAPICall();
-        }
-    }, [selected, handleAPICall]);
-    useEffect(() => {
-        if (clickOutside === OUTSIDE_INDICATOR && displayList) {
-            setDisplayList(false);
-        }
-    }, [clickOutside, displayList]);
+        handleAPICall();
+    }, [handleAPICall]);
     const handleSelect = useCallback(item => {
         setDisplayList(false);
         setSelected(true);
@@ -62,7 +62,7 @@ const AutoCompleteSearch = ({ objectList, value = null, onChangeValue, fetchData
         onChangeValue(item);
     }, [changeScreenAfter, displayValue, onChangeValue]);
     useEffect(() => {
-        if (navigate && oneFilter) {
+        if (oneFilter && navigate != null) {
             setSearchText('');
         }
     }, [navigate, oneFilter]);
@@ -73,36 +73,27 @@ const AutoCompleteSearch = ({ objectList, value = null, onChangeValue, fetchData
         setSearchText('');
         onChangeValue(null);
     };
-    useEffect(() => {
-        if ((previousState === '' || previousState == null) &&
-            searchText != null &&
-            searchText !== '') {
-            const id = setInterval(() => setNewInterval(state => state + 1), TIME_BETWEEN_CALL);
-            intervalRequestCall.current = id;
-        }
-    }, [previousState, searchText]);
     const stopInterval = useCallback(() => {
         clearInterval(intervalRequestCall.current);
-        setNewInterval(0);
     }, []);
-    useEffect(() => {
-        if (newInterval > 0) {
-            handleAPICall();
-        }
-    }, [handleAPICall, newInterval]);
+    const handleInterval = useCallback(() => {
+        handleAPICall();
+    }, [handleAPICall]);
     const handleTimeOut = useCallback(() => {
         stopInterval();
-        if (!selected) {
-            if (searchText == null && searchText === '') {
-                fetchData(null);
-            }
-            else {
-                fetchData(searchText);
-            }
+        handleAPICall();
+    }, [handleAPICall, stopInterval]);
+    useEffect(() => {
+        if (!isValidString(previousState) && isValidString(searchText)) {
+            const id = setInterval(handleInterval, TIME_BETWEEN_CALL);
+            intervalRequestCall.current = id;
+            return () => {
+                stopInterval();
+            };
         }
-    }, [fetchData, searchText, selected, stopInterval]);
+    }, [handleInterval, previousState, searchText, stopInterval]);
     useEffect(() => {
-        if (searchText != null) {
+        if (isValidString(searchText)) {
             const id = setTimeout(handleTimeOut, TIME_WITHOUT_INPUT);
             timeOutRequestCall.current = id;
             return () => {
@@ -111,15 +102,10 @@ const AutoCompleteSearch = ({ objectList, value = null, onChangeValue, fetchData
         }
     }, [handleTimeOut, searchText]);
     const handleSearchValueChange = useCallback(input => {
-        if (objectList != null && input != null && input !== '' && !selected) {
-            if (objectList.length === 1 && selectLastItem === true) {
-                if (changeScreenAfter || oneFilter) {
-                    setSearchText('');
-                }
-                else {
-                    setSearchText(displayValue(objectList[0]));
-                    setDisplayList(false);
-                }
+        if (Array.isArray(objectList) && isValidString(input) && !selected) {
+            if (objectList.length === 1 && selectLastItem) {
+                setSearchText(changeScreenAfter || oneFilter ? '' : displayValue(objectList[0]));
+                setDisplayList(false);
                 stopInterval();
                 onChangeValue(objectList[0]);
             }
@@ -140,8 +126,23 @@ const AutoCompleteSearch = ({ objectList, value = null, onChangeValue, fetchData
         selected,
         stopInterval,
     ]);
+    const handleFocus = useCallback(() => {
+        setDisplayList(true);
+        onSelection();
+    }, [onSelection]);
+    const handleSearchPress = useCallback(() => {
+        setDisplayList(true);
+    }, []);
+    useEffect(() => {
+        if (isValidString(value)) {
+            handleSearchValueChange(value);
+        }
+        if (value != null && isValidString(displayValue(value))) {
+            handleSearchValueChange(displayValue(value));
+        }
+    }, [displayValue, handleSearchValueChange, value]);
     return (<View ref={wrapperRef}>
-      <SearchBar style={style} valueTxt={searchText} placeholder={placeholder} onClearPress={handleClear} onChangeTxt={handleSearchValueChange} onSelection={onSelection} onEndFocus={() => selected && setDisplayList(false)} isFocus={isFocus} onScanPress={onScanPress} scanIconColor={scanIconColor}/>
+      <SearchBar style={style} valueTxt={searchText} placeholder={placeholder} onClearPress={handleClear} onChangeTxt={handleSearchValueChange} onSelection={handleFocus} onSearchPress={handleSearchPress} onEndFocus={() => selected && setDisplayList(false)} isFocus={isFocus} onScanPress={onScanPress} scanIconColor={scanIconColor}/>
       {displayList && !oneFilter && (<SelectionContainer objectList={objectList} displayValue={displayValue} handleSelect={handleSelect}/>)}
     </View>);
 };

package/lib/components/organisms/AutoCompleteSearch/AutoCompleteSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoCompleteSearch.js","sourceRoot":"","sources":["../../../../src/components/organisms/AutoCompleteSearch/AutoCompleteSearch.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AutoCompleteSearch.js","sourceRoot":"","sources":["../../../../src/components/organisms/AutoCompleteSearch/AutoCompleteSearch.tsx"],"names":[],"mappings":"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"}

package/lib/components/organisms/DropdownMenuItem/DropdownMenuItem.d.ts

@@ -0,0 +1,11 @@
+interface DropdownMenuItemProps {
+    icon?: string;
+    color?: string;
+    placeholder: string;
+    FontAwesome5?: boolean;
+    indicator?: number;
+    hideIf?: boolean;
+    onPress: (any: any) => void;
+}
+declare const DropdownMenuItem: ({ icon, color, placeholder, indicator, FontAwesome5, hideIf, onPress, }: DropdownMenuItemProps) => JSX.Element;
+export default DropdownMenuItem;

package/lib/components/organisms/DropdownMenuItem/DropdownMenuItem.js

@@ -0,0 +1,68 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2023 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useThemeColor } from '../../../theme';
+import { Icon, Text } from '../../atoms';
+import { Badge } from '../../molecules';
+const BADGE_SIZE = 12;
+const DropdownMenuItem = ({ icon = 'paperclip', color, placeholder, indicator = 0, FontAwesome5 = true, hideIf = false, onPress, }) => {
+    const Colors = useThemeColor();
+    if (hideIf) {
+        return null;
+    }
+    return (<TouchableOpacity onPress={onPress} style={styles.menuItem}>
+      <View style={styles.iconContainer}>
+        <Icon name={icon} color={color || Colors.secondaryColor_dark.background} FontAwesome5={FontAwesome5} size={15}/>
+        {indicator > 0 && (<Badge style={styles.badge} txtStyle={styles.badgeText} color={{
+                background_light: Colors.backgroundColor,
+                foreground: Colors.text,
+                background: Colors.primaryColor.background,
+            }} title={indicator}/>)}
+      </View>
+      <Text style={styles.text}>{placeholder}</Text>
+    </TouchableOpacity>);
+};
+const styles = StyleSheet.create({
+    badge: {
+        width: BADGE_SIZE,
+        height: BADGE_SIZE,
+        borderRadius: Math.ceil(BADGE_SIZE / 2),
+        position: 'absolute',
+        top: -4,
+        right: -8,
+        zIndex: 10,
+    },
+    badgeText: {
+        fontSize: Math.ceil(BADGE_SIZE / 2),
+    },
+    menuItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginVertical: 5,
+        padding: 5,
+    },
+    text: {
+        fontSize: 18,
+    },
+    iconContainer: {
+        marginRight: 10,
+    },
+});
+export default DropdownMenuItem;
+//# sourceMappingURL=DropdownMenuItem.js.map

package/lib/components/organisms/DropdownMenuItem/DropdownMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuItem.js","sourceRoot":"","sources":["../../../../src/components/organisms/DropdownMenuItem/DropdownMenuItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAChE,OAAO,EAAC,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,aAAa,CAAC;AACvC,OAAO,EAAC,KAAK,EAAC,MAAM,iBAAiB,CAAC;AAYtC,MAAM,UAAU,GAAG,EAAE,CAAC;AAEtB,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,WAAW,EACX,SAAS,GAAG,CAAC,EACb,YAAY,GAAG,IAAI,EACnB,MAAM,GAAG,KAAK,EACd,OAAO,GACe,EAAE,EAAE;IAC1B,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAE/B,IAAI,MAAM,EAAE;QACV,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CACzD;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAChC;QAAA,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,mBAAmB,CAAC,UAAU,CAAC,CACtD,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,IAAI,CAAC,CAAC,EAAE,CAAC,EAEX;QAAA,CAAC,SAAS,GAAG,CAAC,IAAI,CAChB,CAAC,KAAK,CACJ,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,QAAQ,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC3B,KAAK,CAAC,CAAC;gBACL,gBAAgB,EAAE,MAAM,CAAC,eAAe;gBACxC,UAAU,EAAE,MAAM,CAAC,IAAI;gBACvB,UAAU,EAAE,MAAM,CAAC,YAAY,CAAC,UAAU;aAC3C,CAAC,CACF,KAAK,CAAC,CAAC,SAAS,CAAC,EACjB,CACH,CACH;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,CAC/C;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE;QACL,KAAK,EAAE,UAAU;QACjB,MAAM,EAAE,UAAU;QAClB,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QACvC,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC,CAAC;QACP,KAAK,EAAE,CAAC,CAAC;QACT,MAAM,EAAE,EAAE;KACX;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;KACpC;IACD,QAAQ,EAAE;QACR,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,CAAC;QACjB,OAAO,EAAE,CAAC;KACX;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,EAAE;KACb;IACD,aAAa,EAAE;QACb,WAAW,EAAE,EAAE;KAChB;CACF,CAAC,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/lib/components/organisms/MultiValuePicker/MultiValuePicker.d.ts

@@ -9,9 +9,8 @@ interface MultiValuePickerProps {
     labelField: string;
     valueField: string;
     disabled?: boolean;
-    disabledValue?: string;
-    iconName?: string;
+    disabledValue?: string[];
     required?: boolean;
 }
-declare const MultiValuePicker: ({ style, pickerStyle, styleTxt, title, onValueChange, defaultValue, listItems, labelField, valueField, disabled, disabledValue, iconName, required, }: MultiValuePickerProps) => JSX.Element;
+declare const MultiValuePicker: ({ style, pickerStyle, styleTxt, title, onValueChange, defaultValue, listItems, labelField, valueField, disabled, disabledValue, required, }: MultiValuePickerProps) => JSX.Element;
 export default MultiValuePicker;

package/lib/components/organisms/MultiValuePicker/MultiValuePicker.js

@@ -20,17 +20,19 @@ import { Dimensions, StyleSheet, View } from 'react-native';
 import { useThemeColor } from '../../../theme/ThemeContext';
 import { getCommonStyles } from '../../../utils/commons-styles';
 import { Text } from '../../atoms';
-import { LabelText, SelectionContainer, MultiValuePickerButton, } from '../../molecules';
+import { SelectionContainer, MultiValuePickerButton } from '../../molecules';
 import { getItemsFromList } from '../../../utils/list';
 import { OUTSIDE_INDICATOR, useClickOutside, } from '../../../hooks/use-click-outside';
-const MultiValuePicker = ({ style, pickerStyle, styleTxt, title, onValueChange, defaultValue = [], listItems = [], labelField, valueField, disabled = false, disabledValue = '', iconName = null, required = false, }) => {
+import MultiSelectValue from '../MultiSelectValue/MultiSelectValue';
+const MultiValuePicker = ({ style, pickerStyle, styleTxt, title, onValueChange, defaultValue = [], listItems = [], labelField, valueField, disabled = false, disabledValue = [], required = false, }) => {
+    const Colors = useThemeColor();
     const [pickerIsOpen, setPickerIsOpen] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
     const wrapperRef = useRef(null);
     const clickOutside = useClickOutside({
         wrapperRef,
         visible: pickerIsOpen,
     });
-    const Colors = useThemeColor();
     const [selectedItem, setSelectedItem] = useState(getItemsFromList(listItems, valueField, defaultValue));
     useEffect(() => {
         setSelectedItem(getItemsFromList(listItems, valueField, defaultValue));
@@ -38,10 +40,12 @@ const MultiValuePicker = ({ style, pickerStyle, styleTxt, title, onValueChange,
     useEffect(() => {
         if (clickOutside === OUTSIDE_INDICATOR && pickerIsOpen) {
             setPickerIsOpen(false);
+            setIsFocused(false);
         }
     }, [clickOutside, pickerIsOpen]);
     const togglePicker = () => {
         setPickerIsOpen(current => !current);
+        setIsFocused(current => !current);
     };
     const handleValueChange = useCallback(itemValue => {
         if (itemValue != null) {
@@ -57,7 +61,7 @@ const MultiValuePicker = ({ style, pickerStyle, styleTxt, title, onValueChange,
         }
     }, [onValueChange, selectedItem, valueField]);
     const _required = useMemo(() => required && (selectedItem == null || selectedItem?.length === 0), [required, selectedItem]);
-    const commonStyles = useMemo(() => getCommonStyles(Colors), [Colors]);
+    const commonStyles = useMemo(() => getCommonStyles(Colors, _required), [Colors, _required]);
     const styles = useMemo(() => getStyles(Colors, _required), [Colors, _required]);
     return (<View ref={wrapperRef} style={style}>
       {!disabled && (<View style={styles.titleContainer}>
@@ -70,16 +74,14 @@ const MultiValuePicker = ({ style, pickerStyle, styleTxt, title, onValueChange,
                 styles.infosCard,
                 pickerStyle,
             ]}>
-          {/* TODO : improve here */}
-          <LabelText value={disabledValue == null || disabledValue === ''
-                ? '-'
-                : disabledValue} title={`${title} :`} iconName={iconName}/>
+          <MultiSelectValue itemList={disabledValue} title={`${title} :`}/>
         </View>) : (<View>
           <MultiValuePickerButton onPress={togglePicker} listItem={selectedItem} labelField={labelField} style={[
                 commonStyles.filter,
                 commonStyles.filterSize,
                 commonStyles.filterAlign,
                 styles.rightIconButton,
+                isFocused && commonStyles.inputFocused,
                 pickerStyle,
             ]} onPressItem={handleValueChange}/>
           {pickerIsOpen ? (<SelectionContainer objectList={listItems} keyField={valueField} displayValue={item => item[labelField]} handleSelect={handleValueChange} isPicker={true} selectedItem={selectedItem}/>) : null}

package/lib/components/organisms/MultiValuePicker/MultiValuePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiValuePicker.js","sourceRoot":"","sources":["../../../../src/components/organisms/MultiValuePicker/MultiValuePicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAC,UAAU,EAAE,UAAU,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAC,eAAe,EAAC,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAC,IAAI,EAAC,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACL,iBAAiB,EACjB,eAAe,GAChB,MAAM,kCAAkC,CAAC;AAmB1C,MAAM,gBAAgB,GAAG,CAAC,EACxB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,aAAa,EACb,YAAY,GAAG,EAAE,EACjB,SAAS,GAAG,EAAE,EACd,UAAU,EACV,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,EAAE,EAClB,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,KAAK,GACM,EAAE,EAAE;IAC1B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,YAAY,GAAG,eAAe,CAAC;QACnC,UAAU;QACV,OAAO,EAAE,YAAY;KACtB,CAAC,CAAC;IACH,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAC/B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,gBAAgB,CAAC,SAAS,EAAE,UAAU,EAAE,YAAY,CAAC,CACtD,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,gBAAgB,CAAC,SAAS,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,KAAK,iBAAiB,IAAI,YAAY,EAAE;YACtD,eAAe,CAAC,KAAK,CAAC,CAAC;SACxB;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjC,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,WAAW,CACnC,SAAS,CAAC,EAAE;QACV,IAAI,SAAS,IAAI,IAAI,EAAE;YACrB,IAAI,gBAAgB,GAAG,EAAE,CAAC;YAC1B,IACE,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,SAAS,CAAC,UAAU,CAAC,CAAC,EACrE;gBACA,gBAAgB,GAAG,YAAY,CAAC,MAAM,CACpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,SAAS,CAAC,UAAU,CAAC,CAC7C,CAAC;aACH;iBAAM;gBACL,gBAAgB,GAAG,CAAC,GAAG,YAAY,EAAE,SAAS,CAAC,CAAC;aACjD;YACD,eAAe,CAAC,gBAAgB,CAAC,CAAC;YAClC,aAAa,CAAC,gBAAgB,CAAC,CAAC;SACjC;IACH,CAAC,EACD,CAAC,aAAa,EAAE,YAAY,EAAE,UAAU,CAAC,CAC1C,CAAC;IAEF,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,QAAQ,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,YAAY,EAAE,MAAM,KAAK,CAAC,CAAC,EACtE,CAAC,QAAQ,EAAE,YAAY,CAAC,CACzB,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACtE,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,EAClC,CAAC,MAAM,EAAE,SAAS,CAAC,CACpB,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAClC;MAAA,CAAC,CAAC,QAAQ,IAAI,CACZ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CACjC;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CACtC;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CACV,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;gBACL,YAAY,CAAC,MAAM;gBACnB,YAAY,CAAC,UAAU;gBACvB,YAAY,CAAC,WAAW;gBACxB,MAAM,CAAC,SAAS;gBAChB,WAAW;aACZ,CAAC,CACF;UAAA,CAAC,yBAAyB,CAC1B;UAAA,CAAC,SAAS,CACR,KAAK,CAAC,CACJ,aAAa,IAAI,IAAI,IAAI,aAAa,KAAK,EAAE;gBAC3C,CAAC,CAAC,GAAG;gBACL,CAAC,CAAC,aAAa,CAClB,CACD,KAAK,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CACpB,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAEvB;QAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,CAAC,IAAI,CACH;UAAA,CAAC,sBAAsB,CACrB,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,KAAK,CAAC,CAAC;gBACL,YAAY,CAAC,MAAM;gBACnB,YAAY,CAAC,UAAU;gBACvB,YAAY,CAAC,WAAW;gBACxB,MAAM,CAAC,eAAe;gBACtB,WAAW;aACZ,CAAC,CACF,WAAW,CAAC,CAAC,iBAAiB,CAAC,EAEjC;UAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,kBAAkB,CACjB,UAAU,CAAC,CAAC,SAAS,CAAC,CACtB,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,YAAY,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CACvC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,QAAQ,CAAC,CAAC,IAAI,CAAC,CACf,YAAY,CAAC,CAAC,YAAY,CAAC,EAC3B,CACH,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,MAAmB,EAAE,SAAkB,EAAE,EAAE,CAC5D,UAAU,CAAC,MAAM,CAAC;IAChB,cAAc,EAAE;QACd,gBAAgB,EAAE,EAAE;KACrB;IACD,eAAe,EAAE;QACf,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,GAAG;QAC3C,WAAW,EAAE,SAAS;YACpB,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,UAAU;YAC9B,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,UAAU;QACpC,WAAW,EAAE,CAAC;KACf;IACD,SAAS,EAAE;QACT,cAAc,EAAE,YAAY;QAC5B,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,GAAG;KAC5C;CACF,CAAC,CAAC;AAEL,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"MultiValuePicker.js","sourceRoot":"","sources":["../../../../src/components/organisms/MultiValuePicker/MultiValuePicker.tsx"],"names":[],"mappings":"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"}

package/lib/components/organisms/Picker/Picker.js

@@ -26,6 +26,7 @@ import { OUTSIDE_INDICATOR, useClickOutside, } from '../../../hooks/use-click-ou
 const ITEM_HEIGHT = 40;
 const Picker = ({ style, pickerStyle, styleTxt, title, onValueChange, defaultValue = '', listItems, labelField, valueField, emptyValue = true, isValueItem = false, disabled = false, disabledValue = null, iconName = null, required = false, isScrollViewContainer = false, }) => {
     const [pickerIsOpen, setPickerIsOpen] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
     const wrapperRef = useRef(null);
     const clickOutside = useClickOutside({
         wrapperRef,
@@ -39,13 +40,17 @@ const Picker = ({ style, pickerStyle, styleTxt, title, onValueChange, defaultVal
     useEffect(() => {
         if (clickOutside === OUTSIDE_INDICATOR && pickerIsOpen) {
             setPickerIsOpen(false);
+            setIsFocused(false);
         }
     }, [clickOutside, pickerIsOpen]);
+    const toggleValue = current => !current;
     const togglePicker = () => {
-        setPickerIsOpen(current => !current);
+        setPickerIsOpen(toggleValue);
+        setIsFocused(toggleValue);
     };
     const handleValueChange = itemValue => {
         setPickerIsOpen(false);
+        setIsFocused(false);
         setSelectedItem(itemValue);
         itemValue
             ? onValueChange(isValueItem
@@ -63,7 +68,7 @@ const Picker = ({ style, pickerStyle, styleTxt, title, onValueChange, defaultVal
         }
         return null;
     }, [emptyValue, isScrollViewContainer, listItems.length, pickerIsOpen]);
-    const commonStyles = useMemo(() => getCommonStyles(Colors), [Colors]);
+    const commonStyles = useMemo(() => getCommonStyles(Colors, _required), [Colors, _required]);
     const styles = useMemo(() => getStyles(Colors, _required, marginBottom), [Colors, _required, marginBottom]);
     return (<View ref={wrapperRef} style={style}>
       {!disabled && (<View style={styles.titleContainer}>
@@ -85,6 +90,7 @@ const Picker = ({ style, pickerStyle, styleTxt, title, onValueChange, defaultVal
                 commonStyles.filterSize,
                 commonStyles.filterAlign,
                 styles.rightIconButton,
+                isFocused && commonStyles.inputFocused,
                 pickerStyle,
             ]}/>
           {pickerIsOpen ? (<SelectionContainer emptyValue={emptyValue} objectList={listItems} keyField={valueField} displayValue={item => item[labelField]} handleSelect={handleValueChange} isPicker={true}/>) : null}

package/lib/components/organisms/Picker/Picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/organisms/Picker/Picker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/organisms/Picker/Picker.tsx"],"names":[],"mappings":"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"}

package/lib/components/organisms/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,18 @@
+import { Color } from '../../../theme';
+type ProgressBarProps = {
+    style?: object;
+    styleTxt?: object;
+    value?: number;
+    total?: number;
+    showPercent?: boolean;
+    centeredPercent?: boolean;
+    colorRepartition?: {
+        [key: number]: Color;
+    };
+    height?: number;
+    stripe?: boolean;
+    stripeDuration?: number;
+    stripeWidth?: number;
+};
+declare const ProgressBar: ({ style, styleTxt, value, total, showPercent, centeredPercent, colorRepartition, height, stripe, stripeDuration, stripeWidth, }: ProgressBarProps) => JSX.Element;
+export default ProgressBar;

package/lib/components/organisms/ProgressBar/ProgressBar.js

@@ -0,0 +1,164 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2023 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, { useMemo, useEffect, useRef, useCallback, useState } from 'react';
+import { StyleSheet, View, Animated } from 'react-native';
+import { useThemeColor } from '../../../theme';
+import { Text } from '../../atoms';
+const ProgressBar = ({ style, styleTxt, value = 0, total = 100, showPercent = true, centeredPercent = false, colorRepartition = {}, height = 30, stripe = true, stripeDuration = 1000, stripeWidth = 40, }) => {
+    const Colors = useThemeColor();
+    const animatedStripe = useRef(new Animated.Value(0)).current;
+    const animatedWidth = useRef(new Animated.Value(0)).current;
+    const [progressBarWidth, setProgressBarWidth] = useState(0);
+    const [textWidth, setTextWidth] = useState(0);
+    const percent = useMemo(() => (total !== 0 ? (value / total) * 100 : 0), [total, value]);
+    const progressColors = useMemo(() => {
+        if (Object.keys(colorRepartition).length === 0) {
+            return {
+                0: Colors.errorColor,
+                25: Colors.cautionColor,
+                50: Colors.progressColor,
+                75: Colors.priorityColor,
+                100: Colors.successColor,
+            };
+        }
+        return colorRepartition;
+    }, [Colors, colorRepartition]);
+    let color = Colors.cautionColor;
+    Object.keys(progressColors).forEach(key => {
+        const threshold = parseInt(key, 10);
+        if (percent >= threshold && progressColors[threshold]) {
+            color = progressColors[threshold];
+        }
+    });
+    const displayText = useMemo(() => {
+        if (showPercent) {
+            return `${percent.toFixed(2)}%`;
+        }
+        return `${value}/${total}`;
+    }, [percent, showPercent, total, value]);
+    const displayTextOutside = useMemo(() => {
+        if (centeredPercent) {
+            return true;
+        }
+        return progressBarWidth - textWidth * 1.3 < 0;
+    }, [centeredPercent, progressBarWidth, textWidth]);
+    const styles = useMemo(() => getStyles(Colors, height, color, percent, stripeWidth, progressBarWidth), [Colors, height, color, percent, stripeWidth, progressBarWidth]);
+    useEffect(() => {
+        Animated.timing(animatedWidth, {
+            toValue: percent,
+            duration: 500,
+            useNativeDriver: false,
+        }).start();
+    }, [percent, animatedWidth]);
+    useEffect(() => {
+        const stripeAnimation = Animated.loop(Animated.timing(animatedStripe, {
+            toValue: 1,
+            duration: stripeDuration,
+            useNativeDriver: true,
+        }));
+        stripeAnimation.start();
+    }, [animatedStripe, stripeDuration]);
+    const translateX = animatedStripe.interpolate({
+        inputRange: [0, 1],
+        outputRange: [-stripeWidth, progressBarWidth],
+    });
+    const renderPercent = useCallback(() => {
+        return (<Text style={[styles.text, styleTxt]} onTextLayout={event => {
+                setTextWidth(event.nativeEvent.lines?.[0]?.width);
+            }}>
+        {displayText}
+      </Text>);
+    }, [displayText, styles, styleTxt]);
+    return (<View style={[styles.container, style]}>
+      {displayTextOutside ? (<View style={centeredPercent ? styles.centeredPercent : styles.percent}>
+          {renderPercent()}
+        </View>) : null}
+      <Animated.View onLayout={event => {
+            const { width } = event.nativeEvent.layout;
+            setProgressBarWidth(width);
+        }} style={[
+            styles.progressBar,
+            {
+                width: animatedWidth.interpolate({
+                    inputRange: [0, 100],
+                    outputRange: ['0%', '100%'],
+                }),
+            },
+        ]}>
+        <Animated.View style={[
+            stripe && percent < 100 ? styles.stripe : styles.none,
+            {
+                transform: [{ translateX }],
+            },
+        ]}/>
+        {!displayTextOutside ? renderPercent() : null}
+      </Animated.View>
+    </View>);
+};
+const getStyles = (Colors, height, color, percent, stripeWidth, progressBarWidth) => StyleSheet.create({
+    container: {
+        width: '100%',
+        height: height + 2,
+        borderRadius: 8,
+        elevation: 3,
+        shadowOpacity: 0.5,
+        shadowColor: Colors.secondaryColor.background,
+        shadowOffset: { width: 0, height: 0 },
+        backgroundColor: Colors.backgroundColor,
+        borderWidth: 1,
+        borderColor: Colors.secondaryColor.background,
+        zIndex: 1,
+    },
+    progressBar: {
+        borderRadius: 7,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: color.background,
+        width: `${percent}%`,
+        maxWidth: '100%',
+        height: height,
+        overflow: 'hidden',
+    },
+    stripe: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: stripeWidth,
+        backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    },
+    text: {
+        textAlign: 'center',
+    },
+    percent: {
+        position: 'absolute',
+        left: progressBarWidth + 5,
+        top: height / 2 - 10,
+    },
+    centeredPercent: {
+        position: 'absolute',
+        left: '45%',
+        top: height / 2 - 10,
+        zIndex: 2,
+    },
+    none: {
+        display: 'none',
+    },
+});
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.js.map