@fto-consult/expo-ui 1.0.4

package/src/components/Fab/Group.js

@@ -0,0 +1,143 @@
+import { FAB} from 'react-native-paper';
+import React from "$react";
+import {StyleSheet,useWindowDimensions,Modal} from "react-native";
+import {defaultStr,isNonNullString,isObj,defaultObj} from "$utils";
+import PropTypes from "prop-types";
+import {MENU_ICON} from "$ecomponents/Icon";
+import theme,{Colors} from "$theme";
+import Group from "./GroupComponent";
+import Portal from "$ecomponents/Portal";
+
+const FabGroupComponent = React.forwardRef((props,innerRef)=>{
+    let {openedIcon,screenName,display:customDisplay,primary,actionMutator,secondary,onOpen,prepareActions,fabStyle,open:customOpen,onClose,onStateChange:customOnStateChange,closedIcon,color,actions:customActions,children,...customRest} = props;
+
+    const [state, setState] = React.useStateIfMounted({ 
+        open: typeof customOpen =='boolean'? customOpen : false,
+        display : typeof customDisplay ==='boolean'? customDisplay : true,
+    });
+    const onStateChange = ({ open,...rest}) => {
+        setState({ ...state,open });
+        if(customOnStateChange){
+            customOnStateChange({open,...rest})
+        } else if(!open && onClose){
+            onClose({open,...rest})
+        }
+    };
+    const context = {
+        open:x=>setState({...state,open:true}),
+        close : x=> {setState({...state,open:false})},
+        hide : x=> {
+            setState({...state,display:false})
+        },
+        show : ()=>{
+            setState({...state,display:true})
+        },
+        isHidden : x => !state.display,
+        isShown : x => state.display,
+        isClosed : x => !state.open,
+        isOpened : x => state.open,
+    }
+    const {open,display} = state;
+    openedIcon = defaultStr(openedIcon,"close");
+    closedIcon = defaultStr(closedIcon,MENU_ICON);
+    const rest = defaultObj(customRest);
+    fabStyle = Object.assign({},StyleSheet.flatten(fabStyle));
+    let backgroundColor = Colors.isValid(fabStyle.backgroundColor)? fabStyle.backgroundColor : undefined;
+    color = Colors.isValid(color)? color : undefined;
+    if(!backgroundColor || primary){
+        backgroundColor = theme.colors.primary;
+        color = theme.colors.primaryText;
+    } else if(secondary){
+        backgroundColor = theme.colors.secondary;
+        color = theme.colors.secondaryText;
+    }
+    const actions = React.useCallback(()=>{
+        const actions =  prepareActions === false && Array.isArray(customActions)? customActions : [];
+        if((prepareActions !== false || !actions.length)){
+            Object.map(customActions,(act,i)=>{
+                if(!isObj(act) || (!act.icon && !act.label && !act.text)) return null;
+                act.label = defaultStr(act.label,act.text);
+                const a = actionMutator ? actionMutator ({action:act,key:i,isFab:true,fab:true}) : act;
+                if(!isObj(a) || !isNonNullString(a.label)) return null;
+                a.small = typeof a.small =='boolean'? a.small : false;
+                const {perm,isAllowed,primary,secondary,...restItem} = a;
+                if(typeof isAllowed =='function' && isAllowed() === false) return null;
+                if(primary){
+                    restItem.style = StyleSheet.flatten([restItem.style,{color:theme.colors.primaryText,backgroundColor:theme.colors.primary}])
+                } else if(secondary){
+                    restItem.style = StyleSheet.flatten([restItem.style,{color:theme.colors.secondaryText,backgroundColor:theme.colors.secondary}])
+                }
+                if(isAllowed === false) return null;
+                actions.push(restItem);
+            }); 
+        }
+        return actions;
+    },[customActions,prepareActions])();
+    
+    React.useEffect(()=>{
+        React.setRef(innerRef,context);
+        return ()=>{
+            React.setRef(innerRef,null);
+        }
+    },[])
+    return <Portal>
+        <Group
+          {...rest}
+          color = {color}
+          style = {[rest.style,styles.container]}
+          fabStyle = {[styles.fab,fabStyle,{backgroundColor},display?null: styles.hidden]}
+          open={open ?true : false}
+          icon={open ? openedIcon : closedIcon}
+          actions={actions}
+          onStateChange={onStateChange}
+          onPress={(e) => {
+            context.opened = open;
+            if (open && onOpen) {
+              onOpen(e);
+            }
+          }}
+        />
+    </Portal>
+});
+const actionType = PropTypes.shape({
+    icon : PropTypes.string,
+    label : PropTypes.string,
+    text : PropTypes.string,
+    primary : PropTypes.bool,
+    secondary : PropTypes.bool,
+    onPress : PropTypes.func,
+    small : PropTypes.bool,
+});
+FabGroupComponent.propTypes = {
+    ...defaultObj(FAB.Group.propTypes),
+    actionMutator : PropTypes.func,
+    prepareActions : PropTypes.bool, //si un retraitement sera effectué sur les actions du FAB
+    onOpen : PropTypes.func,
+    onClose : PropTypes.func,
+    onStateChange : PropTypes.func,
+    color : PropTypes.string,
+    openedIcon : PropTypes.string,
+    closedIcon : PropTypes.string,
+    actions : PropTypes.oneOfType([
+        PropTypes.objectOf(actionType),
+        PropTypes.arrayOf(actionType)
+    ])
+}
+
+const styles = StyleSheet.create({
+    container : {
+        marginHorizontal:0,
+        marginVertical : 0,
+    },
+    row: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    hidden : {
+        display : 'none'
+    }
+})
+
+export default FabGroupComponent;
+
+FabGroupComponent.displayName ="FabGroupComponent";

package/src/components/Fab/GroupComponent.js

@@ -0,0 +1,384 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  Animated,
+  SafeAreaView,
+  Pressable,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import View from "$ecomponents/View";
+import {FAB,Text,Card,withTheme} from "react-native-paper";
+import color from 'color';
+import PropTypes from "prop-types";
+import { StylePropTypes } from '$theme';
+import Action from "$ecomponents/Form/Action";
+import { disabledStyle,cursorNotAllowed } from '$theme';
+
+
+
+const FABGroup = ({
+  actions,
+  isFormAction,
+  icon,
+  open,
+  onPress,
+  accessibilityLabel,
+  theme,
+  label,
+  style,
+  screenName,
+  fabStyle,
+  visible,
+  testID,
+  onStateChange,
+  color: colorProp,
+  ...rest
+}) => {
+  
+  const { current: backdrop } = React.useRef(
+    new Animated.Value(0)
+  );
+  const animations = React.useRef(
+    actions.map(() => new Animated.Value(open ? 1 : 0))
+  );
+
+  const [prevActions, setPrevActions] = React.useState(null);
+
+  const { scale } = theme.animation;
+
+  React.useEffect(() => {
+    if (open) {
+      Animated.parallel([
+        Animated.timing(backdrop, {
+          toValue: 1,
+          duration: 250 * scale,
+          useNativeDriver: true,
+        }),
+        Animated.stagger(
+          50 * scale,
+          animations.current
+            .map((animation) =>
+              Animated.timing(animation, {
+                toValue: 1,
+                duration: 150 * scale,
+                useNativeDriver: true,
+              })
+            )
+            .reverse()
+        ),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(backdrop, {
+          toValue: 0,
+          duration: 200 * scale,
+          useNativeDriver: true,
+        }),
+        ...animations.current.map((animation) =>
+          Animated.timing(animation, {
+            toValue: 0,
+            duration: 150 * scale,
+            useNativeDriver: true,
+          })
+        ),
+      ]).start();
+    }
+  }, [open, actions, backdrop, scale]);
+
+  const close = () => onStateChange({ open: false });
+
+  const toggle = () => onStateChange({ open: !open });
+
+  const { colors } = theme;
+
+  const labelColor = theme.dark
+    ? colors.text
+    : color(colors.text).fade(theme.ALPHA).rgb().string();
+  const backdropOpacity = open
+    ? backdrop.interpolate({
+        inputRange: [0, 0.5, 1],
+        outputRange: [0, 1, 1],
+      })
+    : backdrop;
+
+  const opacities = animations.current;
+  const scales = opacities.map((opacity) =>
+    open
+      ? opacity.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0.8, 1],
+        })
+      : 1
+  );
+
+  if (actions.length !== prevActions?.length) {
+    animations.current = actions.map(
+      (_, i) => animations.current[i] || new Animated.Value(open ? 1 : 0)
+    );
+    setPrevActions(actions);
+  }
+  const Item = isFormAction ? Action : FabItem;
+  const itemComponentProps = isFormAction ? {Component : FabItem} : {};
+  return (
+    <View pointerEvents="box-none" style={[styles.container, style]}>
+      <TouchableWithoutFeedback onPress={close}>
+        <Animated.View
+          pointerEvents={open ? 'auto' : 'none'}
+          style={[
+            styles.backdrop,
+            {
+              opacity: backdropOpacity,
+              backgroundColor: colors.backdrop,
+            },
+          ]}
+        />
+      </TouchableWithoutFeedback>
+      <SafeAreaView pointerEvents="box-none" style={styles.safeArea}>
+        <View pointerEvents={open ? 'box-none' : 'none'}>
+          {actions.map((it, i) => {
+             const itemProps = {
+                labelColor : it.labelTextColor ??  it.labelColor ?? labelColor,
+                backgroundColor : theme.colors.surface,
+                ...it,
+                open,
+                scale:scales[i],
+                opacity : opacities[i],
+                close,
+             }
+             return (
+              <View
+                key={i} // eslint-disable-line react/no-array-index-key
+                style={[
+                  styles.item,
+                  {
+                    marginHorizontal:
+                      typeof it.small === 'undefined' || it.small ? 24 : 16,
+                  },
+                ]}
+                pointerEvents={open ? 'box-none' : 'none'}
+              >
+                <Item
+                  {...itemProps}
+                  {...itemComponentProps}
+                />
+              </View>
+            )
+          })}
+        </View>
+        <FAB
+          small = {false}
+          {...defaultObj(rest)}
+          onPress={() => {
+            onPress?.();
+            toggle();
+          }}
+          label = {label}
+          icon={icon}
+          color={colorProp}
+          accessibilityLabel={accessibilityLabel}
+          // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
+          accessibilityTraits="button"
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityState={{ expanded: open }}
+          style={[styles.fab, fabStyle]}
+          visible={visible}
+          testID={testID}
+        />
+      </SafeAreaView>
+    </View>
+  );
+};
+
+FABGroup.displayName = 'FAB.Group';
+
+export default withTheme(FABGroup);
+
+// @component-docs ignore-next-line
+const FABGroupWithTheme = withTheme(FABGroup);
+// @component-docs ignore-next-line
+export { FABGroupWithTheme as FABGroup };
+
+
+FABGroup.propTypes = {
+   isFormAction : PropTypes.bool,
+    /**
+   * Action items to display in the form of a speed dial.
+   * An action item should contain the following properties:
+   * - `icon`: icon to display (required)
+   * - `label`: optional label text
+   * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified
+   * - `color`: custom icon color of the action item
+   * - `labelTextColor`: custom label text color of the action item
+   * - `style`: pass additional styles for the fab item, for example, `backgroundColor`
+   * - `labelStyle`: pass additional styles for the fab item label, for example, `backgroundColor`
+   * - `small`: boolean describing whether small or normal sized FAB is rendered. Defaults to `true`
+   * - `onPress`: callback that is called when `FAB` is pressed (required)
+   */
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    icon:  PropTypes.any,
+    label: PropTypes.string,
+    color: PropTypes.string,
+    labelTextColor: PropTypes.string,
+    accessibilityLabel: PropTypes.string,
+    style: StylePropTypes,
+    labelStyle: StylePropTypes,
+    small: PropTypes.bool,
+    onPress: PropTypes.func,
+    testID: PropTypes.string,
+  })),
+  /**
+   * Icon to display for the `FAB`.
+   * You can toggle it based on whether the speed dial is open to display a different icon.
+   */
+  icon: PropTypes.any,
+  /**
+   * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
+   */
+  accessibilityLabel: PropTypes.string,
+  /**
+   * Custom color for the `FAB`.
+   */
+  color: PropTypes.string,
+  /**
+   * Function to execute on pressing the `FAB`.
+   */
+  onPress : PropTypes.func,
+  /**
+   * Whether the speed dial is open.
+   */
+  open: PropTypes.bool,
+  /**
+   * Callback which is called on opening and closing the speed dial.
+   * The open state needs to be updated when it's called, otherwise the change is dropped.
+   */
+  onStateChange: PropTypes.func,
+  /**
+   * Whether `FAB` is currently visible.
+   */
+  visible: PropTypes.bool,
+  /**
+   * Style for the group. You can use it to pass additional styles if you need.
+   * For example, you can set an additional padding if you have a tab bar at the bottom.
+   */
+  style: StylePropTypes,
+  /**
+   * Style for the FAB. It allows to pass the FAB button styles, such as backgroundColor.
+   */
+  fabStyle: StylePropTypes,
+  /**
+   * @optional
+   */
+  theme: PropTypes.object,
+  /**
+   * Pass down testID from Group props to FAB.
+   */
+  testID: PropTypes.string,
+}
+
+
+export const FabItem = function(props){
+  const {children,label,disabled:customDisabled,pointerEvents,open,close,testID,labelStyle,labelColor,accessibilityLabel,icon,backgroundColor,scale,opacity,color,style,small,onPress,...rest} = props;
+  const disabled = typeof customDisabled =='boolean'? customDisabled : false;
+  const _onPress = ()=>{
+    if(onPress){
+      onPress();
+    }
+    close();
+  }
+  const dStyle = disabled ? disabledStyle : null;
+  return <>
+       {label ? (
+         <View style={dStyle} pointerEvents={pointerEvents}>
+               <Card
+                 style={
+                   [
+                     styles.label,
+                     {
+                       transform: [{ scale }],
+                       opacity,
+                     },
+                     labelStyle,
+                   ] 
+                 }
+                 onPress={_onPress}
+                 accessibilityLabel={
+                   accessibilityLabel !== 'undefined'
+                     ? accessibilityLabel
+                     : label
+                 }
+                 accessibilityTraits="button"
+                 accessibilityComponentType="button"
+                 accessibilityRole="button"
+               >
+                 <Text style={{ color : labelColor }}>
+                   {label}
+                 </Text>
+               </Card>
+             </View>
+           ) : null}
+           <FAB
+             small={typeof small !== 'undefined' ? small : true}
+             icon={icon}
+             color={color}
+             disabled = {disabled}
+             pointerEvents={pointerEvents}
+             style={
+               [
+                 {
+                   transform: [{ scale}],
+                   opacity,
+                   backgroundColor,
+                 },
+                 style,
+                 dStyle,
+                 disabled? cursorNotAllowed : null,
+               ] 
+             }
+             onPress={_onPress}
+             accessibilityLabel={
+               typeof accessibilityLabel !== 'undefined'
+                 ? accessibilityLabel
+                 : label
+             }
+             // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
+             accessibilityTraits="button"
+             accessibilityComponentType="button"
+             accessibilityRole="button"
+             testID={testID}
+             visible={open}
+         />
+  </>
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    alignItems: 'flex-end',
+  },
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'flex-end',
+  },
+  fab: {
+    marginHorizontal: 16,
+    marginBottom: 16,
+    marginTop: 0,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  label: {
+    borderRadius: 5,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    elevation: 2,
+  },
+  item: {
+    marginBottom: 16,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+});

package/src/components/Fab/index.js

@@ -0,0 +1,8 @@
+import Group from "./Group";
+import Fab from "./Fab";
+
+export default Fab;
+
+export {Group};
+
+Fab.Group = Group;

package/src/components/FadeInOut/index.js

@@ -0,0 +1,70 @@
+import React, { useEffect, useRef } from "react";
+import { Animated } from "react-native";
+import PropTypes from "prop-types";
+import { StyleProp } from "$theme";
+
+const DEFAULT_DURATION = 300;
+
+
+const FadeInOutComponent = React.forwardRef(({
+  children,
+  visible,
+  duration = DEFAULT_DURATION,
+  rotate,
+  scale,
+  style,
+  onShow,
+  useNativeDriver = true,
+  ...rest
+},ref) => {
+  const fadeAnim = useRef(new Animated.Value(visible ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: visible ? 1 : 0,
+      duration: duration,
+      useNativeDriver: useNativeDriver,
+    }).start();
+    setTimeout(()=>{
+      if(visible && onShow){
+        onShow();
+      }
+    },10)
+  }, [visible]);
+
+  const transform = [{ perspective: 1000 }];
+
+  if (scale) {
+    transform.push({ scale: fadeAnim });
+  }
+
+  if (rotate) {
+    transform.push({
+      rotate: fadeAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ["0deg", "360deg"],
+      }),
+    });
+  }
+  rest = Object.assign({},rest);
+  return (
+    <Animated.View testID={'RN_FadeInOut'} {...rest} ref={ref} style={[style,{ opacity: fadeAnim, transform }]}>
+      {children}
+    </Animated.View>
+  );
+});
+
+export default FadeInOutComponent;
+
+FadeInOutComponent.propTypes = {
+  visible: PropTypes.bool,
+  children : PropTypes.any,
+  duration : PropTypes.number,
+  rotate : PropTypes.bool,
+  scale : PropTypes.bool,
+  style : StyleProp,
+  onShow : PropTypes.func,
+  useNativeDriver : PropTypes.bool,
+}
+
+FadeInOutComponent.displayName = "FadeInOutComponent";

package/src/components/Filter/filterTextTypes.js

@@ -0,0 +1 @@
+export default ['text','number','email','search','tel','url','password',"id","idfield",'piecefield','piece'];