@fto-consult/expo-ui 1.0.4

package/src/components/Tab/TabContent.js

@@ -0,0 +1,72 @@
+import React from '$react';
+import {StyleSheet,} from 'react-native';
+import {defaultStr} from "$utils";
+import Swiper from "$ecomponents/Swiper";
+import PropTypes from "prop-types";
+import { StylePropTypes } from '$theme';
+
+const TabContentBase = ({
+  children,
+  onChange,
+  activeIndex = 0,
+  testId,
+  ...rest
+}) => {
+  return (
+    <Swiper
+      {...rest}
+      children = {children}
+      testId = {defaultStr(testId,'RN_SwiperTabComponent')}
+      activeIndex = {activeIndex}
+      controlsEnabled = {false}
+      onIndexChanged = {(index)=>onChange?.(index)}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'stretch',
+  },
+  hw100 : {
+    width : '100%',
+    height : '100%',
+    minHeight : 200,
+  },
+  hidden : {
+      display : 'none',
+      //height : 0,
+      //width : 0,
+  }
+});
+
+TabContentBase.displayName = 'TabContent';
+
+
+TabContentBase.propTypes =  {
+    ...Swiper.propTypes,
+    /** Child position index activeIndex. */
+    activeIndex:PropTypes.number,
+  
+    /** On Index Change Callback. */
+    onChange:PropTypes.func,
+  
+    /** Choose the animation type among `spring` and `timing`. This is visible when there is tab change. */
+    animationType:PropTypes.oneOf([
+        'spring',
+        'timing',
+    ]),
+  
+    /** Define the animation configurations. */
+    animationConfig:PropTypes.object,
+  
+    /** Styling for Component container. */
+    containerProps:PropTypes.object,
+  
+    /** Styling for TabContent.Item Component container. */
+    tabItemContainerStyle:StylePropTypes
+  }
+
+  export default TabContentBase;

package/src/components/Tab/TabItem.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import { StyleSheet,View} from 'react-native';
+import theme,{ StylePropTypes,flattenStyle,Colors} from '$theme';
+import PropTypes from "prop-types";
+import {defaultStr,isNonNullString} from "$utils";
+import { TouchableRipple } from "react-native-paper";
+import Icon from "$ecomponents/Icon";
+import Label from "$ecomponents/Label";
+
+const TabItemComponentNotThemed = ({
+  active,
+  containerStyle,
+  iconContainerStyle,
+  color,
+  secondary,
+  iconPosition = 'top',
+  label,
+  testID,
+  children,
+  icon,
+  iconProps,
+  index,
+  rippleColor,
+  activeIndex,
+  labelProps,
+  ...rest
+}) => {
+  const activeStyle = React.useCallback((type) => {
+    return (typeof type === 'function' ? type(active) : type);
+  },[active]);
+  const style  = flattenStyle(rest.style);
+  const backgroundColor = Colors.isValid(style.backgroundColor) ? style.backgroundColor : Colors.isValid(color) ? color: 'transparent';
+  color = Colors.isValid(style.color)? style.color : Colors.getContrast(backgroundColor);
+  rippleColor = Colors.isValid(rippleColor) ? rippleColor : Colors.setAlpha(color,0.32);
+  testID = defaultStr(testID,"RN_TabItemComponent");
+  iconProps = Object.assign({},iconProps);
+  iconProps = {testID:testID+"_Icon",...iconProps,color,style:[iconProps.style,{color}]}
+  labelProps = defaultObj(labelProps);
+  icon = typeof icon =='function'? icon (iconProps) : 
+    icon ? <Icon icon={icon} {...iconProps} /> : null;
+  if(!React.isValidElement(icon)) {
+    icon = null;
+  }
+  const isIconTop = iconPosition =='top'? true : false;
+  
+  return (<TouchableRipple
+          accessibilityRole="tab"
+          accessibilityState={{ selected: active }}
+          accessibilityValue={
+            typeof label === 'string' ? { text: label } : undefined
+          }
+          {...rest}
+          rippleColor = {rippleColor}
+          style ={[styles.button,{backgroundColor}, activeStyle(rest.style)]}
+          testID = {testID}
+      >
+       <View testID={testID+'_ContentContainer'}>
+         {isIconTop && icon ? icon : null}
+          <Label upperCase {...labelProps} testID={testID+"_Label"} style={[[styles.label,{color,paddingVertical: !rest.icon ? 8 : 2,},activeStyle(labelProps.style)]]}>
+              {label}
+          </Label>
+          {!isIconTop && icon ? icon : null}
+       </View>
+    </TouchableRipple>)
+};
+const TabItemComponent = theme.withStyles(TabItemComponentNotThemed,{
+   mode : 'contained',
+})
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 0,
+    backgroundColor: 'transparent',
+    padding : 5,
+  },
+  label: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  indicator: {
+    display: 'flex',
+    position: 'absolute',
+    height: 2,
+    bottom: 0,
+  },
+});
+
+TabItemComponent.displayName = 'TabComponent.Item';
+TabItemComponent.propTypes = {
+  labelProps : PropTypes.shape(Label.propTypes),
+    /** Allows to define if TabItemComponent is active. */
+  active : PropTypes.bool,
+
+  primary : PropTypes.bool,
+  secondary : PropTypes.bool,
+  label : PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node
+  ]),
+  /**
+   * Additional Styling for button container.
+   * @type ViewStyle or (active: boolean) => ViewStyle
+   */
+  containerStyle : StylePropTypes,
+
+  /**
+   * Additional Styling for Icon Component container.
+   * @type ViewStyle or (active: boolean) => ViewStyle
+   */
+  iconContainerStyle : StylePropTypes
+}
+
+export default TabItemComponent;

package/src/components/Tab/TabItems.js

@@ -0,0 +1,246 @@
+import React from '$react';
+import View from "$ecomponents/View";
+import {
+  Animated,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import ScrollView  from "$ecomponents/ScrollView";
+import PropTypes from "prop-types";
+import theme,{StylePropTypes,Colors} from "$theme";
+import {isMobileNative,isMobileBrowser} from "$cplatform"
+import {defaultStr} from "$utils";
+import {Elevations} from "$ecomponents/Surface";
+
+const showScrollBarIndicator = !isMobileBrowser() && !isMobileNative();
+
+import TabItem from "./TabItem";
+
+const TabItemsComponent = ({
+  children,
+  activeIndex,
+  scrollable = true,
+  onChange = () => {},
+  indicatorProps,
+  disableIndicator,
+  removeShadow,
+  elevation = 7,
+  fixed = false,
+  testID,
+  scrollViewProps,
+  ...rest
+}) => {
+  const backgroundColor = theme.isDark()? theme.colors.surface : theme.colors.primary;
+  indicatorProps = defaultObj(indicatorProps);
+  const indicatorStyle = Object.assign({},StyleSheet.flatten(indicatorProps.style));
+  indicatorStyle.backgroundColor = Colors.isValid(indicatorStyle.backgroundColor)? indicatorStyle.backgroundColor : theme.colors.secondary;
+  const animationRef = React.useRef(new Animated.Value(0));
+  const scrollViewRef = React.useRef(null);
+  const scrollViewPosition = React.useRef(0);
+
+  const tabItemsPosition = React.useRef([]);
+  const [tabContainerWidth,setTabContainerWidth] = React.useState(0);
+
+  const scrollHandler = React.useCallback(() => {
+    if (tabItemsPosition.current.length > activeIndex) {
+      let itemStartPosition =
+        activeIndex === 0 ? 0 : tabItemsPosition.current[activeIndex - 1].position;
+      let itemEndPosition = tabItemsPosition.current[activeIndex].position;
+
+      const scrollCurrentPosition = scrollViewPosition.current;
+      const tabContainerCurrentWidth = tabContainerWidth;
+
+      let scrollX = scrollCurrentPosition;
+
+      if (itemStartPosition < scrollCurrentPosition) {
+        scrollX += itemStartPosition - scrollCurrentPosition;
+      } else if (
+        scrollCurrentPosition + tabContainerCurrentWidth <
+        itemEndPosition
+      ) {
+        scrollX +=
+          itemEndPosition - (scrollCurrentPosition + tabContainerCurrentWidth);
+      }
+      scrollViewRef.current?.scrollTo({
+        x: scrollX,
+        y: 0,
+        animated: true,
+      });
+    }
+  }, [tabContainerWidth, activeIndex]);
+
+  React.useEffect(() => {
+    Animated.timing(animationRef.current, {
+      toValue: activeIndex ,
+      useNativeDriver: true,
+      duration: 170,
+    }).start();
+    scrollable && requestAnimationFrame(scrollHandler);
+  }, [animationRef, scrollHandler, activeIndex, scrollable]);
+
+  const onScrollHandler = React.useCallback((event) => {
+    scrollViewPosition.current = event.nativeEvent.contentOffset.x;
+  }, []);
+
+  const activeIndicatorLayout = tabItemsPosition.current[activeIndex];
+  const WIDTH = activeIndicatorLayout?.width;
+  const getLeftPosition = React.useCallback(()=>{
+    let left = 0;
+    for(let i =0; i< activeIndex;i++){
+      if(isObj(tabItemsPosition.current[i]) && typeof tabItemsPosition.current[i].width =='number'){
+        left+= tabItemsPosition.current[i].width;
+        }
+    }
+    return left;
+  },[activeIndex])
+  indicatorStyle.left = getLeftPosition();
+  testID = defaultStr(testID,"RNE_TabComponent");
+  scrollViewProps = defaultObj(scrollViewProps)
+  return (<View
+      {...rest}
+      testID = {testID}
+      style={[
+        elevation && Elevations[elevation],
+        {
+          backgroundColor,
+        },
+        styles.viewStyle,
+        rest.style,
+      ]}
+      onLayout={({ nativeEvent: { layout } }) => {
+        setTabContainerWidth(layout.width);
+      }}
+  >
+    <ScrollView 
+      {...scrollViewProps}
+      showsHorizontalScrollIndicator = {showScrollBarIndicator} 
+      scrollEventThrottle = {0} 
+      horizontal 
+      ref={scrollViewRef} 
+      testID={testID+"_ScrollView"} 
+      onScroll={onScrollHandler}
+    >
+      {React.Children.map(children, (child, index) => {
+            const active = index === activeIndex?true : false;
+            return React.cloneElement(
+              child,
+              {
+                onPress: () => {
+                  onChange(index);
+                },
+                onLayout: (event) => {
+                  const { width } = event.nativeEvent.layout;
+                  const previousItemPosition =
+                    tabItemsPosition.current[index - 1]?.position || 0;
+
+                  tabItemsPosition.current[index] = {
+                    position: previousItemPosition + width,
+                    width,
+                  };
+                },
+                activeIndex,
+                index,
+                active,
+                testID : testID+'_Children_'+index
+              }
+            );
+          })}
+          {!disableIndicator && (
+              <Animated.View
+                {...indicatorProps}
+                testID={testID+'_Indicator'}
+                style={[
+                  styles.indicator,
+                  {
+                    width: WIDTH,
+                  },
+                  indicatorStyle,
+                ]}
+              />
+          )}
+    </ScrollView>
+    <Animated.View
+      testID={testID+"_Shadow"}
+      style={[
+        styles.removeTopShadow,
+        {
+          height: elevation,
+          backgroundColor,
+          top: -elevation,
+        },
+      ]}
+    />
+  </View>);
+};
+
+const styles = StyleSheet.create({
+  relative : {
+    position : 'relative'
+  },
+  buttonStyle: {
+    borderRadius: 0,
+    backgroundColor: 'transparent',
+  },
+  titleStyle: {
+    paddingHorizontal: 16,
+    paddingVertical: 0,
+    textTransform: 'uppercase',
+  },
+  viewStyle: {
+    flexDirection: 'row',
+    position: 'relative',
+    maxWidth : '100%',
+    minHeight : 50,
+  },
+  indicator: {
+    display: 'flex',
+    position: 'absolute',
+    height: 4,
+    bottom: 0,
+    width : '100%',
+    ...Platform.select({
+      web: {
+        backgroundColor: 'transparent',
+        transitionDuration: '150ms',
+        transitionProperty: 'all',
+        transformOrigin: 'left',
+        willChange: 'transform',
+      },
+      default: {},
+    }),
+  },
+  removeTopShadow: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 2,
+  },
+  fixedContentContainerStyle: {
+    flex: 1,
+  },
+});
+
+TabItemsComponent.displayName = 'TabComponent.Items';
+
+TabItemsComponent.propTypes = {
+    /** Child position index activeIndex. */
+    activeIndex : PropTypes.number,
+  
+    /** Makes Tab Scrolling */
+    scrollable : PropTypes.bool,
+  
+    /** On Index Change Callback. */
+    onChange : PropTypes.func,
+  
+    /** Disable the indicator below. */
+    disableIndicator : PropTypes.bool,
+
+    /** Additional styling for tab indicator. */
+    indicatorProps : PropTypes.object,
+  
+    fixed : PropTypes.bool, //si les tabs items seronts fixes
+  }
+
+  export default TabItemsComponent
+
+  TabItemsComponent.Item = TabItem;

package/src/components/Tab/index.js

@@ -0,0 +1,114 @@
+import React from "$react";
+import {StyleSheet} from "react-native";
+import View from "$ecomponents/View";
+import TabItems from "./TabItems";
+import TabItem from "./TabItem";
+import TabContent from "./TabContent";
+import PropTypes from "prop-types";
+import Session from "$session";
+import {isNonNullString,defaultStr,defaultObj,defaultNumber,isObj,isNumber} from "$utils";
+
+let SessionObj = {};
+
+
+export const setSessionActiveIndex  = (activeIndex,sessionName) => {
+    if(!isNonNullString(sessionName)) return;
+    SessionObj = defaultObj(Session.get("tabs"));
+    SessionObj.activeTabs = defaultObj(SessionObj.actives)
+    SessionObj.activeTabs[sessionName] = activeIndex; 
+    Session.set('tabs',SessionObj);
+}
+
+export const getSessionActiveIndex = (props)=>{
+    const {sessionName} = props;
+    if(!isNonNullString(sessionName)) return 0;
+    SessionObj = defaultObj(Session.get("tabs"));
+    SessionObj.activeTabs = defaultObj(SessionObj.activeTabs)
+    let activeIndex = defaultNumber(SessionObj.activeTabs[sessionName],0);
+    if(isNumber(props.activeIndex)){
+        activeIndex = props.activeIndex;
+    }
+    if(activeIndex > 0 && Array.isArray(props.children) && props.children.length){
+        return activeIndex <= props.children.length - 1 ? activeIndex : 0;
+    }
+    return activeIndex;
+}
+
+const TabComponent = React.forwardRef((props,ref)=>{
+    let {activeIndex:customActiveIndex,tabContentProps,withScrollView,testID,sessionName,children,onChange,tabItemProps,tabItemsProps,...rest} = props;
+    let activeIndex = getSessionActiveIndex(props);
+    rest = defaultObj(rest);
+    tabItemsProps = defaultObj(tabItemsProps);
+    tabItemProps = defaultObj(tabItemProps);
+    tabContentProps = defaultObj(tabContentProps);
+
+    const [index, setIndex] = React.useState(getSessionActiveIndex(props));
+    const setActiveIndex = (nIndex)=>{
+        setIndex(nIndex);
+        setSessionActiveIndex(nIndex,sessionName);
+        if(nIndex === index) return;
+        if(onChange){
+            onChange({activeIndex:nIndex,index:nIndex,sessionName,setActiveIndex});
+        }
+    }
+    React.useEffect(()=>{
+        activeIndex = getSessionActiveIndex(props);
+        if(activeIndex !== index){
+            setActiveIndex(activeIndex);
+        } 
+    },[children,activeIndex]);
+    testID = defaultStr(testID,"RN_TabComponentComponent");
+    const {tabs,contents,childrenProps} = React.useCallback(()=>{
+        const tabs = [],contents = [],childrenProps=[];
+        React.Children.map(children,(child,index)=>{
+            if(!isObj(child)) return null;
+            const {label,tabKey,children:childChildren,...rest} = isObj(child.props)?child.props:child;
+            if(!React.isValidElement(label,true)) return null;
+            let key = typeof tabKey =='string' && tabKey ? tabKey : typeof label =='string' && label ? label : index;
+            key = key+index;
+            tabs.push(<TabItem
+                key = {key}
+                label={label}
+                {...tabItemProps}
+                testID = {defaultStr(testID,tabItemProps.testID)+"_TabItem"}
+            />);
+            childrenProps.push(rest);
+            contents.push(<React.Fragment key={key}>
+                {childChildren}
+            </React.Fragment>)
+        })
+        return {tabs,contents,childrenProps}
+    },[children])();
+    return <View {...rest} testID={testID} style={[styles.container,tabItemsProps.style]}>
+        <TabItems testID={testID+"_TabItems"} {...tabItemsProps} activeIndex={index} style={[styles.tab,rest.style]} onChange={setActiveIndex}>
+            {tabs}
+        </TabItems>
+        <TabContent testId={testID+"_TabContent"} withScrollView={withScrollView} {...tabContentProps} childrenProps={childrenProps} activeIndex={index} onChange={setActiveIndex} style={[styles.container,tabContentProps.style]}>
+            {contents}
+        </TabContent>
+    </View>
+})
+
+
+TabComponent.propTypes = {
+    activeIndex : PropTypes.number,
+    onChange : PropTypes.func,
+    tabItemsProps : PropTypes.object,//les props du tab
+    tabItemProps : PropTypes.object,//les props des items du tab
+    tabContentProps : PropTypes.object, ///les props de la tabContent
+    sessionName : PropTypes.string,
+}
+
+
+export default TabComponent;
+
+TabComponent.Item = (props)=>null;
+
+const styles = StyleSheet.create({
+    container : {
+        minHeight : 300,
+        flex : 1,
+    },
+})
+
+TabComponent.displayName = "TabComponent";