@fto-consult/expo-ui 1.0.4

package/src/components/List/FlashList.js

@@ -0,0 +1,29 @@
+import React from "$react";
+import { FlashList } from "@shopify/flash-list";
+//import FlashList from "react-native-big-list";
+import CommonListComponent from "./Common";
+import View from "$ecomponents/View";
+
+const FlashListComponent = React.forwardRef((props,ref)=>{
+    const {testID} = props
+    return (<CommonListComponent
+                testID = {'RN_FlashListComponent'}
+                estimatedItemSize = {50}
+                ListHeaderComponent={() => (
+                    <View testID={(testID||'RN_FlashListComponent')+"_Header"}>{props.children}</View>
+                )}
+                {...props}
+                contentContainerStyle = {undefined}
+                style = {undefined}
+                Component = {FlashList}
+                ref={ref}
+            />)
+})
+
+FlashListComponent.propTypes = {
+    ...CommonListComponent.propTypes,
+}
+
+export default FlashListComponent;
+
+FlashListComponent.displayName = "FlashListComponent";

package/src/components/List/FlatList.js

@@ -0,0 +1,34 @@
+import React from "$react";
+import {FlatList,LogBox} from 'react-native'
+import CommonListComponent from "./Common";
+
+const FlatListComponent = React.forwardRef((props,ref)=>{
+    React.useEffect(() => {
+        LogBox.ignoreLogs(["VirtualizedLists should never be nested"])
+    }, []);
+    return (
+            <CommonListComponent
+                testID = {'RN_FlatListComponent'}
+                removeClippedSubviews={true} // Unmount components when outside of window 
+                initialNumToRender={2} // Reduce initial render amount
+                maxToRenderPerBatch={1} // Reduce number in each render batch
+                updateCellsBatchingPeriod={100} // Increase time between renders
+                windowSize={7} // Reduce the window size
+                {...props}
+                itemHeight = {undefined}
+                Component = {FlatList}
+                ListHeaderComponent={() => (
+                    <React.Fragment>{props.children}</React.Fragment>
+                )}
+                ref={ref}
+            />
+      )
+})
+
+FlatListComponent.propTypes = {
+    ...CommonListComponent.propTypes,
+}
+
+export default FlatListComponent;
+
+FlatListComponent.displayName = "FlatListComponent";

package/src/components/List/RecyclerView.js

@@ -0,0 +1,83 @@
+import { RecyclerListView, DataProvider, LayoutProvider } from "recyclerlistview";
+//import PropTypes from "prop-types";
+import CommonListComponent from "./Common";
+import {defaultObj,defaultDecimal} from "$utils";
+import React from "$react";
+import Label from "$ecomponents/Label";
+import {ActivityIndicator} from "react-native-paper";
+import PropTypes from "prop-types";
+
+export const ViewTypes = {
+    FULL: 0,
+    HALF_LEFT: 1,
+    HALF_RIGHT: 2
+};
+
+const ListComponent =  React.forwardRef((props,ref)=>{
+    let {getItemLayout,items,itemHeight,renderItem,rowRenderer,...rest} = props;
+    rest = defaultObj(rest);
+    const listRef = React.useRef(null);
+    const [state,setState] = React.useState({
+        dataProvider : new DataProvider((r1, r2) => {
+            return r1 !== r2;
+        }),
+        layoutProvider : new LayoutProvider(
+            index => {
+                if (index % 3 === 0) {
+                    return ViewTypes.FULL;
+                } else if (index % 3 === 1) {
+                    return ViewTypes.HALF_LEFT;
+                } else {
+                    return ViewTypes.HALF_RIGHT;
+                }
+            },
+            (type, dim) => {
+                if(typeof itemHeight =='number' && itemHeight) {
+                    dim.height = itemHeight;
+                }
+            }
+        ),
+    });
+    React.useEffect(()=>{
+        setState({
+            ...state,
+            dataProvider : dataProvider.cloneWithRows(items)
+        });
+        console.log(dataProvider," is d provider hein",items)
+    },[items])
+    const {dataProvider,layoutProvider}  = state;
+    return <>
+        <CommonListComponent
+            {...rest}
+            items = {items}
+            ref = {(el)=>{
+                if(el){
+
+                }
+                React.setRef(listRef,el);
+                React.setRef(ref,el);
+            }}
+            layoutProvider={layoutProvider} 
+            dataProvider={dataProvider} 
+            rowRenderer = {function(type,data,index){
+                let ret = renderItem({item:data,type,index,isScrolling:listRef?.isScrolling?true:false,items:defaultArray(items)});
+                console.log(ret," is result for ",data,index)
+                return (React.isValidElement(ret,true)) ? <Label children={ret}/> : null; 
+            }}
+            Component = {RecyclerListView}
+        />
+    </>
+})
+ListComponent.prototypes = {
+    ...defaultObj(RecyclerListView.propTypes),
+    renderItem : PropTypes.func.isRequired,
+    
+}   
+
+export default ListComponent;
+
+ListComponent.propTypes = {
+    ...CommonListComponent.propTypes
+}
+
+ListComponent.displayName = "RecyclerListViewComponent";

package/src/components/List/index.js

@@ -0,0 +1,12 @@
+import FlashList from "./FlashList";
+
+export * from "./utils";
+
+export default FlashList;
+
+export {default as FlatList} from "./FlatList";
+
+export {default as FlashList} from "./FlashList";
+
+export {default as BigList} from "./BigList";
+

package/src/components/List/utils.js

@@ -0,0 +1,23 @@
+import {defaultStr} from "$utils";
+
+export const MIN_HEIGHT = 50;
+
+const defaultFilter = x=>true;
+export const prepareItems = (items,filter)=>{
+    if(typeof filter !=='function'){
+        if(Array.isArray(items)) return items;
+        filter = defaultFilter;
+    }
+    const _items = [];
+    Object.map(items,(item,index,_index)=>{
+        if(filter({item,index,_index}) ===false) return null;
+        _items.push(item);
+    })
+    return _items;
+};
+export const getBToTopRef = (bToTop)=>{
+    if(!isObj(bToTop)) return null;
+    return typeof bToTop.toggleVisibility === 'function'? bToTop : 
+        bToTop.current && typeof bToTop.current =='object' && typeof bToTop.current.toggleVisibility  =='function' ? bToTop.current : 
+        null;
+}

package/src/components/Logo/Logo.js

@@ -0,0 +1,98 @@
+import {IconButton } from "react-native-paper";
+import { Component } from "react";
+import {isNativeMobile} from "$cplatform";
+import {Image} from "react-native";
+import View from "$ecomponents/View";
+import Label from "$ecomponents/Label";
+import theme,{remToPixel,Colors,flattenStyle} from '$theme';
+import {StyleSheet} from "react-native";
+import source from "$assets/logo.png";
+import {defaultStr} from "$utils";
+
+export const height = 150;
+export const width = undefined;//300;
+export default class Logo extends Component {
+    render(props){
+        let {icon,color,style,testID,text} = this.props;
+        testID = defaultStr(testID,"RN_LogoComponent");
+        const styles = getStyle(style,color);
+        return <View testID={testID} style={styles.container}> 
+            {icon !== false ? <View testID={testID+"_ContentContainer"} style={styles.logoImage}>
+                {<IconButton testID={testID+"_IconButton"} style={styles.logoImageContent} 
+                    size={50}
+                    icon={() => (
+                        <Image
+                          source={source}
+                          style={{ width: 50, height: 50}}
+                        />
+                    )}
+                />}
+            </View> : null}
+            {text !== false ? <View testID={testID+"_Content"} style={styles.logoContent}>
+                <Label style={styles.firstText}>XPose</Label>
+                <Label style={styles.secondText}>F</Label>
+                <Label style={styles.thirdText}>T</Label>
+                <Label style={styles.fourthText}>C</Label>
+            </View> : null}
+        </View>
+    }
+    
+}
+
+const getStyle = (style,color)=>{
+    const cColor = flattenStyle([{color:Colors.isValid(color)? color : theme.colors.primary}]);
+    return  {
+        ...styles,
+        container : flattenStyle([styles.container,cColor,style]),
+        firstText : flattenStyle([styles.text,cColor]),
+        secondText : flattenStyle([styles.text,styles.secondText,cColor]),
+        thirdText : flattenStyle([styles.text,cColor,styles.thirdText]),
+        fourthText : flattenStyle([styles.text,cColor])
+    };
+}
+
+
+const styles = StyleSheet.create({
+    container : {
+        flex : 1,
+        justifyContent : "center",
+        alignItems : "center",
+        flexDirection : "row",
+        height,
+        width,
+    },
+    logoImage : {
+        marginTop : 0,
+        marginRight:0,
+        justifyContent : 'center',
+        alignItems : 'flex-end'
+    },
+    logoImageContent : {
+        alignItems:"flex-end",
+        justifyContent : "center"
+    },  
+    logoContent : {
+        position:"relative",
+        //width : 160,
+        //flex : 2,
+        flexDirection : "row",
+        alignItems : "center",
+        justifyContent : "flex-start"
+    },
+    secondText : {
+        fontSize : remToPixel(5),
+        alignItems : "flex-start",
+        justifyContent : "center",
+        marginTop: 0//isNativeMobile() ? -5 : 0
+    },
+    thirdText : {
+        fontSize:remToPixel(2.5),
+        marginLeft:isNativeMobile()? -25 : -20
+    },
+    text : {
+        fontSize:remToPixel(3),
+    },
+})
+
+Logo.height = height;
+Logo.width = width;

package/src/components/Logo/Progress.js

@@ -0,0 +1,21 @@
+import Logo from "./Logo";
+import View from "$ecomponents/View";
+import Label from "$ecomponents/Label";
+import { ActivityIndicator, Colors } from 'react-native-paper';
+import theme,{defaultDarkTheme} from "$theme";
+import {isIos} from "$cplatform";
+import appConfig from "$capp/config";
+
+export default function LogoProgress (props){
+    let containerStyle = {width:(Logo.width?Logo.width:undefined),height:(Logo.height?(Logo.height+100):undefined),flex:1,alignItems:"center",justifyContent:"center"};
+    const isLight = theme.isLight();
+    let primaryColor = isLight?theme.colors.primaryOnSurface : defaultDarkTheme.colors.primary, 
+    secondaryColor = isLight ? theme.colors.secondaryOnSurface : defaultDarkTheme.colors.secondary;
+    return <View style={[containerStyle]}>
+            <Logo key='logo' style={{marginBottom:0}} color={primaryColor}/>
+            <ActivityIndicator size = {isIos()?'large':40} animating={true} color={secondaryColor} />
+            <View key={'app-version'} style={{flex:1}}>
+                <Label style={[{marginTop:10, fontWeight:'bold',color:secondaryColor}]}>version {appConfig.version}</Label>
+            </View>
+    </View>
+}

package/src/components/Logo/index.js

@@ -0,0 +1,3 @@
+export {default} from "./Logo";
+
+export {default as LogoProgress} from "./Progress";

package/src/components/Menu/Item.js

@@ -0,0 +1,203 @@
+import color from 'color';
+import * as React from 'react';
+import {
+  StyleSheet,
+} from 'react-native';
+import {TouchableRipple} from "react-native-paper";
+import Icon from "$ecomponents/Icon";
+import theme,{black,white,Colors,StylePropTypes,DISABLED_OPACITY} from "$theme";
+import PropTypes from "prop-types";
+import { Dimensions } from 'react-native';
+import View from "$ecomponents/View";
+import {defaultVal} from "$utils";
+import Tooltip from "$ecomponents/Tooltip";
+import Label from "$ecomponents/Label";
+
+const minWidth = 112;
+const maxWidth = 280;
+const iconWidth = 40;
+
+const MenuItemComponent = React.forwardRef(({
+  icon,
+  title,
+  label,
+  text,
+  disabled,
+  onPress,
+  style,
+  contentStyle,
+  testID,
+  titleStyle,
+  primary,
+  secondary,
+  iconProps,
+  isBottomSheetItem,
+  accessibilityLabel,
+  ...rest
+},ref) => {
+  title = defaultVal(title,label,text);
+  const disabledColor = color(theme.dark ? white : black)
+    .alpha(0.32)
+    .rgb()
+    .string();
+
+  let titleColor = primary === true ? theme.colors.primaryOnSurface: secondary === true ? theme.colors.secondaryOnSurface : disabled
+    ? disabledColor
+    : color(theme.colors.text).alpha(0.87).rgb().string();
+
+  let iconColor = primary === true ? theme.colors.primaryOnSurface : secondary === true ? theme.colors.secondaryOnSurface : disabled
+    ? disabledColor
+    : color(theme.colors.text).alpha(theme.ALPHA).rgb().string();
+  iconProps = defaultObj(iconProps);
+  titleStyle = Object.assign({},StyleSheet.flatten(titleStyle));
+  style = Object.assign({},StyleSheet.flatten(style));
+
+  if(Colors.isValid(titleStyle.color)){
+     iconColor = titleStyle.color;
+  } else if(Colors.isValid(style.color)){
+    titleColor = iconColor = style.color;
+  }
+
+  const pointerEvents = disabled ? 'none' : 'auto';
+  const disabledStyle = disabled ? {opacity:DISABLED_OPACITY} : null;
+  const winW = Dimensions.get("window").width-30;
+  const maxWidthStyle = isBottomSheetItem ? {width:winW,maxWidth:null} : undefined;
+  const maxWidthTextStyle = isBottomSheetItem ? {width:winW-50} : null;
+  return (
+    <Tooltip
+      {...defaultObj(rest)}
+      Component = {TouchableRipple}
+      style={[styles.container, style,maxWidthStyle,disabledStyle]}
+      onPress={onPress}
+      disabled={disabled}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="menuitem"
+      accessibilityState={{ disabled }}
+      pointerEvents = {pointerEvents}
+    >
+      <View style={[styles.row]} ref={ref}>
+        {icon ? (
+          <View style={[styles.item, styles.icon]} pointerEvents="box-none">
+            <Icon source={icon} size={24} {...iconProps} style={[iconProps.style,styles.iconT]} color={iconColor} />
+          </View>
+        ) : null}
+        <View
+          style={[
+            styles.item,
+            styles.content,
+            !maxWidthStyle && icon ? styles.widthWithIcon : null,
+            contentStyle,
+            !icon?styles.titleNoIcon:null,
+            maxWidthStyle
+          ]}
+          pointerEvents="none"
+        >
+          <Label
+            selectable={false}
+            numberOfLines={1}
+            ellipsizeMode = {"tail"}
+            style={[styles.title, { color: titleColor }, titleStyle,styles.noMargin,maxWidthTextStyle]}
+          >
+            {title}
+          </Label>
+        </View>
+      </View>
+    </Tooltip>
+  );
+});
+
+MenuItemComponent.displayName = 'Menu.Item';
+
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 8,
+    minWidth,
+    maxWidth,
+    height: 48,
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent : 'flex-start',
+    alignItems : 'center'
+  },
+  icon: {
+    width: iconWidth,
+    marginHorizontal : 0,
+    paddingHorizontal : 0,
+    marginLeft:0,
+    alignSelf : 'flex-start'
+  },
+  noMargin : {
+    marginLeft:0,
+    marginHorizontal:0,
+    paddingHorizontal:0,
+  },
+  title: {
+    fontSize: 16,
+  },
+  iconT : {
+    alignSelf : 'flex-end'
+  },
+  item: {
+    marginHorizontal: 0,
+  },
+  content: {
+    justifyContent: 'center',
+    minWidth: minWidth - 16,
+    maxWidth: maxWidth - 16,
+  },
+  widthWithIcon: {
+    maxWidth: maxWidth - iconWidth /*+ 48*/,
+  },
+  titleNoIcon : {
+    marginHorizontal : 8
+  }
+});
+
+MenuItemComponent.propTypes = {
+    primary : PropTypes.bool,
+    secondary : PropTypes.bool,
+    /**
+     * Title text for the `MenuItemComponent`.
+     */
+    title: PropTypes.oneOfType([
+      PropTypes.node,
+      PropTypes.string,
+    ]),
+    /**
+     * Icon to display for the `MenuItemComponent`.
+     */
+    icon : PropTypes.any,
+    /**
+     * Whether the 'item' is disabled. A disabled 'item' is greyed out and `onPress` is not called on touch.
+     */
+    disabled : PropTypes.bool,
+    /**
+     * Function to execute on press.
+     */
+    onPress : PropTypes.func,
+    /**
+     * @optional
+     */
+    style: StylePropTypes,
+    contentStyle: StylePropTypes,
+    titleStyle : StylePropTypes,
+    /**
+     * @optional
+     */
+    theme: PropTypes.object,
+    /**
+     * TestID used for testing purposes
+     */
+    testID : PropTypes.string,
+    /**
+     * Accessibility label for the Touchable. This is read by the screen reader when the user taps the component.
+     */
+    accessibilityLabel : PropTypes.string,
+  };
+
+
+export default MenuItemComponent;