@fto-consult/expo-ui 1.0.4

package/src/components/Badge/index.js

@@ -0,0 +1,141 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Pressable,
+} from 'react-native';
+import View from "$ecomponents/View";
+import theme,{ StyleProps,Colors} from '$theme';
+import PropTypes from "prop-types";
+import {defaultVal,defaultNumber,defaultObj} from "$utils";
+import Label from "$ecomponents/Label";
+
+const defaultSize = 18;
+const miniSize = 8;
+
+
+export const BadgeComponent = ({
+  containerStyle,
+  labelStyle,
+  labelProps,
+  badgeStyle,
+  onPress,
+  onLongPress,
+  onPressOut,
+  onPressIn,
+  containerProps,
+  style,
+  suffix,
+  useSuffix,
+  color,
+  Component = onPress || onLongPress || onPressIn || onPressOut
+    ? Pressable
+    : View,
+  size,
+  children,
+  status = 'primary',
+  pressableProps,
+  ...rest
+}) => {
+  size = defaultNumber(size,defaultSize);
+  labelProps = Object.assign({},labelProps);
+  labelProps.style = [styles.text,labelStyle,labelProps.style];
+  containerProps = defaultObj(containerProps);
+  style = StyleSheet.flatten([
+    {
+      alignSelf: 'center',
+      minWidth: size,
+      height: size,
+      suffix,
+      color,
+      useSuffix,
+      borderRadius: size / 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors[status],
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: '#fff',
+    },
+    badgeStyle && badgeStyle,
+    style,
+  ])
+  const hasColor = Colors.isValid(color);
+  color = hasColor? color : Colors.isValid(style.color) ? style.color : undefined;
+  if((!color || useSuffix) && isNumber(suffix)){
+      style = [style,{...cProps,...Colors.getAvatarStyleFromSuffix(suffix)}];
+      labelProps.style = [labelStyle.style,{color:style.color}];
+  } else if(hasColor){
+      style.backgroundColor = color;
+      style.color = Colors.getContrast(color);
+      labelProps.style = [labelProps.style,{color:style.color}]
+  }
+  return (
+    <View
+      testID="RN__BadgeComponent__Container"
+      {...containerProps}
+      style={([containerProps.style,containerStyle])}
+    >
+      <Component
+        {...{
+          onPress,
+          onLongPress,
+          onPressOut,
+          onPressIn,
+          ...pressableProps,
+          ...rest,
+        }}
+        testID="RN__BadgeComponent"
+        style={style}
+      >
+        <Label {...labelProps}>{children}</Label>
+      </Component>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  miniBadgeComponent: {
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    minWidth: miniSize,
+    height: miniSize,
+    borderRadius: miniSize / 2,
+  },
+  text: {
+    fontSize: 12,
+    color: 'white',
+    paddingHorizontal: 4,
+  },
+});
+
+BadgeComponent.displayName = 'BadgeComponent';
+
+BadgeComponent.propTypes = {
+    /** Style for the container. */
+  containerStyle: StyleProps,
+
+  /** Additional styling for badge (background) view component. */
+  badgeStyle: StyleProps,
+
+  /** Extra props for text component. */
+  labelProps : PropTypes.object,
+
+  /** Extra styling for icon component. */
+  labelStyle : StyleProps,
+  children : PropTypes.oneOfType([
+      PropTypes.node,
+      PropTypes.string,
+      PropTypes.number,
+  ]),
+
+  /** Custom component to replace the badge outer component.
+   *  @default `Press handlers present then Pressable else View`
+   */
+  Component : PropTypes.element,
+
+  /** Determines color of the indicator. */
+  status : PropTypes.string,
+  color : PropTypes.string,
+  useSuffix : PropTypes.bool,
+}
+
+  export default BadgeComponent;

package/src/components/Badge/index1.js

@@ -0,0 +1,34 @@
+import {Badge} from "react-native-paper";
+import {StyleSheet} from "react-native";
+const defaultSize = 20;
+import {isNativeMobile} from "$cplatform";
+
+export default function BadgeComponent(props){
+    let {size,style,...rest} = props;
+    size = defaultDecimal(size,defaultSize);
+    return <Badge
+        {...rest}
+        size = {size}
+        style = {[
+            styles.badge,
+            style,
+            styles.center,
+            {width:size,height:size}
+        ]}
+    />
+}
+
+const styles = StyleSheet.create({
+    badge : {
+        paddingVertical : 0,
+        marginVertical : 0,
+        fontSize : isNativeMobile ? 12 : 11,
+    },
+    center : {
+        justifyContent : 'center',
+        paddingHorizontal:0,
+        paddingVertical : 0,
+        alignItems : 'center',
+        alignSelf:'center'
+    },
+})

package/src/components/BottomSheet/Content.js

@@ -0,0 +1,19 @@
+import Menu  from "./Menu";
+import React from "$react";
+
+const BottomSheetContent = React.forwardRef((props,ref)=>{
+    return <Menu
+        testID = {"RN_BottomSheetContentComponent"}
+        {...props}
+        ref = {ref}
+        renderMenuContent = {false}
+    />
+})
+
+BottomSheetContent.propTypes = {
+    ...Menu.propTypes,
+}
+
+export default BottomSheetContent;
+
+BottomSheetContent.displayName = "BottomSheetContent";

package/src/components/BottomSheet/Menu.js

@@ -0,0 +1,126 @@
+import BottomSheet from "./Sheet";
+import {isMobileMedia} from "$cplatform/dimensions";
+import Menu,{renderItems} from "$ecomponents/Menu";
+import React from "$react";
+import {defaultObj,defaultDecimal,defaultStr,isDecimal,defaultBool} from "$utils";
+import View from "$ecomponents/View";
+import PropTypes from "prop-types";
+import {getContentHeight} from "./utils";
+
+const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
+    let {anchor,screenIndent,height:customHeight,bindResizeEvent,onDismiss,testID,visible:customVisible,controlled,mobile,animateOnClose,renderMenuContent,sheet,children,...rest} = props;
+    rest = defaultObj(rest);
+    const isControlled = controlled ? true : false;
+    const visibleRef = React.useRef(null);
+    const [state,setState] = React.useStateIfMounted({
+        visible : false,
+        height : undefined,
+    });
+    const visible = typeof visibleRef.current =='boolean'? visibleRef.current : isControlled ? customVisible : state.visible;
+    visibleRef.current = null;
+    let height = state.height;
+    const isMounted = React.useIsMounted();
+    const anchorRef = React.useRef(null);
+    const isMobile = x=> mobile || sheet === true || renderMenuContent === false || isMobileMedia() ? true : false;
+    let isMob = isMobile();
+    testID = defaultStr(testID,'RN_BottomSheetMenuComponent');
+    const innerRef = React.useRef(null);
+    const open = (event)=>{
+        if(!isMobile()) return;
+        React.stopEventPropagation(event);
+        if(!isMounted() || visible) return;
+        getContentHeight(anchorRef,({height})=>{
+            setState({...state,visible:true,height});
+        },screenIndent);
+    }, close = ()=>{
+        if(!isMobile()) return;
+        if(!isMounted() || !visible) return;
+        if(isControlled){
+            if(onDismiss){
+                onDismiss({});
+            }
+            return;
+        }
+        setState({...state,visible:false})
+    }
+    const Component = isMob ? BottomSheet : Menu;
+    if(isMob){
+        if(typeof anchor ==='function'){
+            anchor = anchor(!isControlled?{onPress:open}:{});
+        }
+        if(React.isValidElement(anchor)){
+            anchor = <View testID={testID+"_Anchor"} ref={anchorRef} collapsable={false}>{anchor}</View>
+        }
+        if(renderMenuContent !== false){
+            children = renderItems({testID:testID+".Items",...props,closeMenu:close,openMenu:open,isBottomSheetItem:true});
+        }
+        rest.visible = visible;
+        rest.onDismiss = close;
+        if(!isDecimal(height)){
+            height = undefined;
+        }
+        rest.animateOnClose = defaultBool(rest.animateOnClose,false);
+        
+    } else {
+        children = undefined;
+        delete rest.visible;
+        height = undefined;
+    }
+    if(!isControlled){
+        rest.onAnchorPress = ()=>{
+            open();
+            return false;
+        }
+        if(typeof children ==='function'){
+            if(!visible) children = null;
+            else {
+                children = children({open,close});
+            }
+        }
+    }
+    React.useEffect(()=>{
+        const closeModal = ()=>{
+            if(!isMounted()) return;
+            visibleRef.current = false;
+            setState({...state});
+        }
+        if(bindResizeEvent !== false){
+            APP.on(APP.EVENTS.RESIZE_PAGE,closeModal);
+        }
+        return ()=>{
+            APP.off(APP.EVENTS.RESIZE_PAGE,closeModal);
+        }
+    },[]);
+    
+    return <>
+        {isMob && React.isValidElement(anchor)? anchor : null}
+        <Component
+            {...rest}
+            bindResizeEvent = {false}
+            testID = {testID}
+            height = {controlled?customHeight:height}
+            ref = {React.useMergeRefs(innerRef,ref)}
+            anchor = {anchor}
+            children = {visible && (React.isValidElement(children) || Array.isArray(children))?children:undefined}
+        />
+    </>
+
+})
+
+BottomSheetMenuComponent.propTypes = {
+    ...defaultObj(Menu.propTypes),
+    ...defaultObj(BottomSheet.propTypes),
+    screenIndent : PropTypes.number,
+    controlled : PropTypes.bool,//si le composant est controllé
+    sheet : PropTypes.bool, //si l'on veut que le bottom sheet soit rendu quel qu'en soit la taille de l'écran, passer ce paramètre à true
+    renderMenuContent : PropTypes.bool, ///si le contenu est de type menu dont les items seront rendu
+    children : PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.node
+    ]),
+    mobile : PropTypes.bool, //si uniquement le bottom sheet sera rendu, quel qu'en soit la dimension de l'écran
+}
+
+export default BottomSheetMenuComponent;
+
+BottomSheetMenuComponent.displayName = "BottomSheetMenuComponent";

package/src/components/BottomSheet/Provider.js

@@ -0,0 +1,58 @@
+import {Menu} from "$ecomponents/BottomSheet";
+import React from "$react";
+import {defaultObj} from "$utils";
+
+let bottomSheetRef = null;
+
+export const createProviderRef = ()=>{
+    const ref = React.useRef(null);
+    React.useEffect(()=>{
+        bottomSheetRef = ref.current;
+    },[ref.current])
+    return ref;
+};
+
+export const getProviderRef = ()=> bottomSheetRef;
+
+export const open = (props)=>{
+    const ref = getProviderRef();
+    if(ref && typeof ref.open =='function') return ref.open(props);
+    return false;
+}
+
+export const close = (props)=>{
+    const ref = getProviderRef();
+    if(ref && typeof ref.close =='function') return ref.close(props);
+    return false;
+}
+
+const Provider = React.forwardRef((props,innerRef)=>{
+    const {onDismiss} = props;
+    const ref = innerRef || createProviderRef();
+    const [state,setState] = React.useState({
+        visible : false,
+    });
+    const context = {
+        open : (props)=>{
+            return setState({onDismiss:undefined,...defaultObj(props),visible:true})
+        },
+        close : (props)=>{
+            return setState({...state,...defaultObj(props),visible:false})
+        }
+    };
+    React.setRef(ref,context);        
+    return <Menu {...props} {...state} sheet controlled onDismiss = {(e)=>{
+        setState({...state,visible:false});
+        if(typeof state.onDismiss =='function'){
+            state.onDismiss({context,state})
+        } else if(onDismiss){
+            onDismiss({context,state});
+        }
+
+    }}/>
+});
+
+Provider.getProviderRef = getProviderRef;
+Provider.displayName = "BottomSheetProviderComponent";
+
+export default Provider;