@fto-consult/expo-ui 1.0.4

package/src/components/ContentLoader/index.js

@@ -0,0 +1,151 @@
+/**** see : https://github.com/danilowoz/react-content-loader */
+import {defaultObj} from "$utils";
+import View from "$ecomponents/View";
+import {StyleSheet,Dimensions,useWindowDimensions} from "react-native";
+import React from "react";
+import ContentLoaderF, {Facebook as CLFacebook,Instagram as CLInstagram} from './Loader';
+import PropTypes from "prop-types";
+import BarcharComponent from "./BarChar";
+import PieChartComponent from "./PieChart";
+import FormComponent,{HEIGHT as formHeight} from "./Form";
+import DatagridContentLoader,{HEIGHT as datagridHeight} from "./Datagrid";
+import ProfileComponent from "./Profile";
+import { getBackgroundColor } from "./utils";
+import TaskListComponent from "./TaskList";
+import theme,{Colors} from "$theme"
+import Rect from "./Rect";
+import Circle from "./Circle";
+
+export * from "./utils";
+
+export {Rect};
+
+export {Circle};
+
+export {default as Table} from "./Table";
+
+
+export default function ContentLoaderWrapper (props){
+    let {instance,propsMutator,containerProps,instances,Component,count,...rest} = props;
+    const isMounted = React.useIsMounted();
+    const {width,height} = Dimensions.get("window");
+    const [state,setState] = React.useState({
+        width,height
+    })
+    Component = defaultVal(Component,ContentLoaderF);
+    containerProps = defaultObj(containerProps);
+    rest = {...defaultObj(rest),...state}
+    if(propsMutator){
+        propsMutator(rest);
+    }
+    let r = [];
+    rest = defaultObj(rest);
+    count = typeof rest.count == "number" && rest.count ? rest.count : count;
+    count = Math.ceil(defaultNumber(instances,instance,count,3))
+    rest.backgroundColor = Colors.isValid(rest.backgroundColor)? rest.backgroundColor : Colors.darken(theme.colors.background); 
+    rest.backgroundColor= getBackgroundColor(rest.backgroundColor)// '#cecece';
+
+    
+    if(count <= 1) count = 1;
+    for(let i = 1; i<= count; i++){
+        r.push(<Component {...rest} key={i+""} />)
+    }
+    const onLayout = (layout)=>{
+        if(!isMounted()) return;
+        return;
+        const {width,height} = layout.nativeEvent.layout;
+        if(Math.abs(width - state.width) > 50){
+            setState({...state,width,height})
+        }
+    }
+    
+    return <View onLayout={onLayout} {...containerProps}
+        style={[styles.container,styles.fullWidth,containerProps.style]}
+     >
+        {r}
+    </View>
+}   
+
+ContentLoaderWrapper.propTypes = {
+    //le nombre d'instance du content loader
+    instances : PropTypes.number,
+    instance : PropTypes.number,
+    count : PropTypes.number,
+    propsMutator : PropTypes.func,
+}
+
+export function Facebook (props){
+    return <ContentLoaderWrapper {...props} Component={CLFacebook}/>
+}
+export function Instagram (props){
+    return <ContentLoaderWrapper {...props} Component={CLInstagram}/>
+}
+export function ContentLoader (props){
+    return <ContentLoaderWrapper {...props} Component={ContentLoaderF}/>
+}
+
+export function BarChart (props){
+    return <ContentLoaderWrapper {...props} Component={BarcharComponent}/>
+}
+
+export function PieChart (props){
+    return <ContentLoaderWrapper {...props} Component={PieChartComponent}/>
+}
+
+export function Form (props){
+    const {height} = Dimensions.get("window");
+    return <ContentLoaderWrapper
+         propsMutator = {(props)=>{
+            props.width = Math.max(props.width-50,200);
+            props.count = Math.max(Math.trunc(height/formHeight),2);
+            return props;
+         }}
+         {...props} Component={FormComponent}
+    />
+}
+
+export function Profile (props){
+    let {containerProps,...rest} = props;
+    containerProps = Object.assign({},containerProps);
+    containerProps.style = [styles.taskListContainer,containerProps.style];
+    return <ContentLoaderWrapper count={3} {...props} Component={ProfileComponent}/>
+}
+
+export function TaskList (props){
+    return <ContentLoaderWrapper count={3} {...props} Component={TaskListComponent}/>
+}
+
+export function Datagrid (props){
+    const {height} = Dimensions.get("window");
+    return <ContentLoaderWrapper
+            name = "ddddd"
+         propsMutator={(props)=>{
+            props.width = Math.max(props.width-50,200);
+            props.count = Math.max(Math.trunc((height-100)/datagridHeight),2);
+         }}
+         {...props} Component={DatagridContentLoader}
+    />
+}
+
+
+const styles = StyleSheet.create({
+    fullWidth : {
+        width : '100%'
+    },
+    center : {
+        flex : 1,
+        justifyContent: 'center',
+        alignItems :'center',
+    },
+    container : {
+        marginHorizontal : 0,
+        paddingHorizontal : 0,
+        marginTop : 10,
+        alignItems : 'center',
+        justifyContent : 'flex-start'
+    },
+    taskListContainer : {
+        alignItems : 'flex-end',
+        alignSelf : 'flex-start',
+    },
+})

package/src/components/ContentLoader/utils.js

@@ -0,0 +1,8 @@
+import {isMobileMedia,isTabletMedia,isDesktopMedia} from "$cplatform/dimensions";
+import theme,{Colors} from "$theme";
+
+export const getBackgroundColor = (backgroundColor)=> Colors.isValid(backgroundColor)? backgroundColor : Colors.darken(theme.colors.background,1);
+
+export const NUMBER_OF_LINES = 5;
+
+export const getNumberOfLines = (props)=> isMobileMedia() ? 2 : isTabletMedia() ? 3 : isDesktopMedia()? 4 : NUMBER_OF_LINES;

package/src/components/CountUp/index.js

@@ -0,0 +1,67 @@
+import React from "$react";
+import PropTypes from "prop-types";
+import Label from "$ecomponents/Label";
+import {defaultNumber,defaultStr} from "$utils";
+
+export const getDefaultStep = (count)=>{
+    count = Math.abs(parseInt(count)||0);
+    return count <= 20 ? 1 : count <=  50 ? 3 : count <= 100 ? 10 : Math.floor(count/20);
+}
+
+const CountUpComponent = ({from,to,format,type,duration,step,formatter,interval,...props})=>{
+    from = defaultNumber(from); 
+    to = defaultNumber(to);
+    duration = defaultNumber(duration,15);
+    const isCurrency = defaultStr(format,type).toLowerCase() =="money"? true : false;
+    formatter = typeof formatter ==="function"? formatter : current => current;
+    const end = to - from;
+    const isNegative = end < 0 ? true : false;
+    const intervalRef = React.useRef(null);
+    const increment = (isNegative ? (-1):(1))* Math.abs(defaultNumber(step,getDefaultStep(to)));
+    const [current, setCurrent] = React.useState(from);
+    const isMounted = React.useIsMounted();
+    const formatValue = typeof formatter =="function"? formatter : (number)=>{
+        return isCurrency ? number.formatMoney() : number.formatNumber();
+    }
+    React.useEffect(() => {
+        clearInterval(intervalRef.current);
+        if(!isMounted()) return;
+        const finish = Math.abs(end);
+        if(finish === 0){
+            return;
+        }
+        intervalRef.current = setInterval(() => {
+            if((isNegative && current <= to) || (current >= to)) {
+                clearInterval(intervalRef.current);
+                setCurrent(to);
+                return;
+            }
+            setCurrent(current + increment);
+        }, interval);
+        return () => {
+            clearInterval(intervalRef.current);
+        };
+    },[current]);
+    return <Label 
+        textBold 
+        {...props}
+    >{
+        formatValue(current)    
+    }</Label>
+}
+
+CountUpComponent.defaultProps = {
+  from: 0,
+  interval: 100,
+  onComplete: () => {},
+};
+
+CountUpComponent.propTypes = {
+    from : PropTypes.number,
+    to : PropTypes.number.isRequired,
+    /***(:number)=> (:string || : number)*/
+    formatter : PropTypes.func,
+    interval : PropTypes.number, //l'interval de mise à jour de la valeur courante
+}
+
+export default CountUpComponent;

package/src/components/Countries/SelectCountry.js

@@ -0,0 +1,65 @@
+import React from "$react";
+import SimpleSelect from "$ecomponents/SimpleSelect";
+import { countries } from "./utils";
+import View from "$ecomponents/View";
+import {StyleSheet,Image} from "react-native";
+import {defaultObj} from "$utils";
+import PropTypes from "prop-types";
+import {isNonNullString,isNumber,defaultStr} from "$utils";
+import Label from "$ecomponents/Label";
+
+/**** retourne les props du champ de type countrie */
+export const getCountryFieldProps = (props)=>{
+    props = defaultObj(props);
+    let {imageProps,...rest} = props;
+    imageProps = defaultObj(imageProps);
+    return {
+        text : 'Pays',
+        type : 'select',
+        items : countries,
+        dialogProps : {title:'Sélectionner un pays'},
+        getItemValue : ({item})=>item.code,
+        compare : (a,b)=>{
+            return typeof a ==='string' && typeof b =='string' && a.toLowerCase() === b.toLowerCase() ? true : false; 
+        },
+        renderItem : ({item})=>{
+            return <View style={[styles.renderedImage]}>
+                {(isNonNullString(item.image) || isNumber(item.image)) && <Image  accessibilityIgnoresInvertColors {...imageProps} style={[styles.flagImage,{marginRight:10},imageProps.style]} source={isNumber(item.image)?item.image:{uri:item.image}}/>}
+                <Label>{item.label}</Label>
+            </View>
+        },
+        ...defaultObj(rest),
+    }
+}
+
+const SelectCoutryComponent = React.forwardRef((props,ref)=>{
+    return <SimpleSelect
+        {...getCountryFieldProps(props)}
+        ref = {ref}
+    />
+})
+
+SelectCoutryComponent.displayName ="SelectCoutryComponent";
+
+export default SelectCoutryComponent;
+
+SelectCoutryComponent.propTypes = {
+    ...SimpleSelect.propTypes,
+    imageProps : PropTypes.object, ///les props à appliquer aux images affichées
+}
+
+const styles = StyleSheet.create({
+    renderedImage : {
+        flexDirection : "row",
+        alignItems : 'center',
+        justifyContent : 'flex-start',
+        flex : 1,
+    },
+    flagImage : {
+        borderWidth:0,
+        width : 30,
+        height : 20,
+    },
+})
+
+

package/src/components/Countries/index.js

@@ -0,0 +1,5 @@
+export * from "./utils";
+
+export * from "./SelectCountry";
+
+export {default as SelectCountry} from "./SelectCountry";