@fto-consult/expo-ui 1.0.4

package/src/components/Color/index.js

@@ -0,0 +1,158 @@
+import { StyleSheet,TouchableOpacity } from 'react-native'
+import View from "$ecomponents/View";
+import TextField,{shadowMode} from "$ecomponents/TextField";
+import ColorPicker from './ColorPicker';
+import theme,{Colors,DISABLED_OPACITY} from "$theme";
+import PropTypes from "prop-types";
+import React from "$react";
+import Dialog from "$ecomponents/Dialog";
+import {isMobileOrTabletMedia} from "$cplatform/dimensions";
+import {defaultStr,defaultObj} from "$utils";
+
+const ColorPickerComponent = React.forwardRef ((props,ref)=>{
+    let {defaultValue,label,rippleColor,onChange,text,containerProp,editable,disabled,readOnly,...rest} = props;
+    containerProp = defaultObj(containerProp);
+    disabled = defaultBool(disabled,false);
+    readOnly = defaultBool(readOnly,false);
+    const isEditable = !disabled && readOnly !== true && editable !== false ? true : false;
+    const pointerEvents = isEditable ? "auto" : "none";
+    const isMob = isMobileOrTabletMedia();
+    const _label = defaultStr(label,text);
+    const pickerRef = React.useRef(null);
+    const [state,setState] = React.useStateIfMounted({
+        color : Colors.isValid(defaultValue)? defaultValue : undefined,
+        visible : false,
+    })
+    const color = state.color;
+    const colorRef = React.useRef(state.color);
+    const prevColor = React.usePrevious(state.color);
+    
+    const onColorChange = (color)=>{
+        colorRef.current = color;
+        if(props.onColorChange){
+            props.onColorChange(color);
+        }
+    }
+    const onColorChangeComplete = (color) => {
+        colorRef.current = color;
+        if(props.onColorChangeComplete){
+            props.onColorChangeComplete(color);
+        }
+    }
+    const openPicker = ()=>{
+        if(state.visible) return;
+        setState({...state,visible:true})
+    }
+    let textStyle = {};
+    let selectionColor = undefined;
+    if(color){
+        textStyle.backgroundColor = color;
+        selectionColor = textStyle.color = Colors.getContrast(color);
+    }
+    if(disabled){
+        textStyle = {opacity:DISABLED_OPACITY};
+    }
+    const onDismiss = (e)=>{
+        setState({...state,visible:false})
+    }
+    React.useEffect(()=>{
+        if(prevColor !== color && onChange){
+            onChange({value:color,previousValue:prevColor})
+        }
+    },[color])
+    React.useEffect(()=>{
+        const nColor = Colors.isValid(defaultValue)? defaultValue : "";
+        if(nColor === color || (!nColor && !color)) return;
+        setState({...state,color:nColor})
+    },[defaultValue]);
+    const mode = defaultStr(rest.mode,theme.textFieldMode)
+    return <>
+            <TouchableOpacity
+                {...containerProp}
+                accessibilityRole="button"
+                disabled = {!isEditable}
+                pointerEvents = {pointerEvents}
+                accessibilityLabel={defaultStr(label,text)}
+                style = {[styles.container,containerProp]}
+                onPress={openPicker}
+                rippleColor={rippleColor}
+                opacityColor = {rippleColor}
+            >
+            <TextField
+                enableCopy
+                {...rest}
+                mode = {mode}
+                ref = {ref}
+                label = {defaultVal(label,_label)}
+                editable = {false}
+                disabled = {disabled}
+                selectionColor = {selectionColor}
+                color = {selectionColor}
+                defaultValue = {color}
+                labelStyle = {[mode !== shadowMode && textStyle ,styles.label]}
+                style = {[rest.style,{color:selectionColor,backgroundColor:selectionColor},styles.input]}
+                contentContainerProps = {{style:textStyle}}
+            />
+        </TouchableOpacity>
+        <Dialog
+            visible = {state.visible}
+            title = {_label+(color?("["+color+"]"):"")}
+            fullScreen = {isMob}
+            onDismiss = {onDismiss}
+            cancelButton = {false}
+            withScrollView
+            actions = {[
+                isMob ? undefined : {
+                    text : 'annuler',
+                    icon : 'close-thick',
+                    onPress : onDismiss,
+                    secondary : true,
+                },
+                {
+                    text : "Selectionner",
+                    icon : "check",
+                    primary : true,
+                    onPress : ()=>{
+                        setState({...state,visible:false,color:colorRef.current});
+                    }
+                },
+            ]}
+        >
+            <View style={[styles.content]}>
+                <ColorPicker
+                    ref={pickerRef}
+                    color={color}
+                    thumbSize={40}
+                    disabled = {disabled}
+                    editable = {isEditable}
+                    onColorChange={onColorChange}
+                    onColorChangeComplete={onColorChangeComplete}
+                />
+            </View>
+        </Dialog>
+    </>
+})
+
+ColorPickerComponent.propTypes = {
+    ...defaultObj(ColorPicker.propTypes),
+    rippleColor : PropTypes.string,
+    onChange : PropTypes.func//la fonction de rappel à appeler lorsque la couleur change
+}
+
+const styles = StyleSheet.create({
+    container : {
+      flex : 1,
+    },
+    content : {
+        paddingVertical : 15,
+        paddingHorizontal:15,
+    },
+    label : {backgroundColor:'transparent',top:0},
+    input : {
+        paddingBottom : 0,
+    }
+});
+
+export default ColorPickerComponent;
+
+ColorPickerComponent.displayName = "ColorPickerComponent";

package/src/components/ContentLoader/BarChar.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import ContentLoader from './Loader';
+import Rect from "./Rect";
+import {getNumberOfLines} from "./utils";
+
+const BarChart = props => {
+  const lines = getNumberOfLines(props);
+  return (
+    <ContentLoader width={200} height={200} viewBox="0 0 200 200" {...props}>
+      <Rect x="0" y="160" rx="0" ry="0" width="25" height="40" />
+      <Rect x="30" y="145" rx="0" ry="0" width="25" height="55" />
+      <Rect x="60" y="126" rx="0" ry="0" width="25" height="74" />
+      <Rect x="90" y="80" rx="0" ry="0" width="25" height="120" />
+      <Rect x="120" y="142" rx="0" ry="0" width="25" height="58" />
+    </ContentLoader>
+  )
+}
+
+export default BarChart

package/src/components/ContentLoader/Circle.js

@@ -0,0 +1,3 @@
+import { Circle} from 'react-content-loader/native'
+
+export default Circle;

package/src/components/ContentLoader/Circle.web.js

@@ -0,0 +1,3 @@
+export default function ContentLoaderCircle (props){
+    return <circle {...props}/>
+}

package/src/components/ContentLoader/Datagrid.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import ContentLoader from './Loader';
+import Rect from "./Rect";
+import { Dimensions} from 'react-native';
+
+export const HEIGHT = 160;
+
+const DatagridContentLoader = props => {
+  const {width:winWidth} = Dimensions.get("window");
+  const width = typeof props.width == 'number' && props.width ? props.width : winWidth - 100;
+  return (
+    <ContentLoader
+      {...props}
+      height={HEIGHT}
+      viewBox={"0 0 "+width+" "+HEIGHT}
+      //backgroundColor="#d9d9d9"
+      //foregroundColor="#ecebeb"
+      width={width}
+    >
+        <Rect x="0" y="0" rx="1" ry="1" width={width} height="15" />
+        <Rect x="0" y="30" rx="1" ry="1" width={width-80} height="15" />
+        <Rect x="0" y="60" rx="1" ry="1" width={width-100} height="15" />
+        <Rect x="0" y="90" rx="1" ry="1" width={width} height="15" />
+    </ContentLoader>
+  )
+}
+
+export default DatagridContentLoader

package/src/components/ContentLoader/Form.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import ContentLoader from './Loader';
+import Rect from "./Rect";
+import { Dimensions} from 'react-native';
+
+export const HEIGHT = 180;
+
+const FormContentLoader = props => {
+  const {width:winWidth} = Dimensions.get("window");
+  const width = typeof props.width == 'number' && props.width ? props.width : winWidth - 100;
+  const w6 = (width)/6, w3 = (width)/3, w2 = width/2;
+  return (
+    <ContentLoader
+      {...props}
+      height={HEIGHT}
+      viewBox={"0 0 "+width+" "+HEIGHT}
+      //backgroundColor="#d9d9d9"
+      //foregroundColor="#ecebeb"
+      width={width}
+    >
+      <Rect x="0" y="15" rx="4" ry="4" width={2*w6} height="15" />
+      <Rect x={2*w6+25} y="15" rx="3" ry="3" width={2*w6} height="15" />
+      <Rect x={4*w6+40} y="15" rx="3" ry="3" width={w6} height="15" />
+
+      <Rect x="0" y="50" rx="4" ry="4" width={2*w6} height="15" />
+      <Rect x={2*w6+25} y="50" rx="3" ry="3" width={w6} height="15" />
+      <Rect x={3*w6+40} y="50" rx="3" ry="3" width={2*w6} height="15" />
+
+      <Rect x="0" y="90" rx="4" ry="4" width={w3} height="15" />
+      <Rect x={w3+25} y="90" rx="3" ry="3" width={w3} height="15" />
+      <Rect x={2*w3+40} y="90" rx="3" ry="3" width={w3} height="15" />
+
+      <Rect x="0" y="130" rx="4" ry="4" width={w2} height="15" />
+      <Rect x={w2+25} y="130" rx="3" ry="3" width={w2} height="15" />
+    </ContentLoader>
+  )
+}
+
+export default FormContentLoader

package/src/components/ContentLoader/Loader/RLoader/index.js

@@ -0,0 +1,3 @@
+export * from 'react-content-loader/native';
+
+export {default} from 'react-content-loader/native';

package/src/components/ContentLoader/Loader/RLoader/index.web.js

@@ -0,0 +1,3 @@
+export * from 'react-content-loader';
+
+export {default} from 'react-content-loader';

package/src/components/ContentLoader/Loader/index.js

@@ -0,0 +1,20 @@
+
+import ContentLoader from './RLoader';
+import React from "$react";
+import theme from "$theme";
+
+export * from "./RLoader";
+
+const RContentLoader = React.forwardRef((props,ref)=>{
+    const rest = theme.isDark()? {
+        backgroundColor : theme.colors.surfaceText,
+        foregroundColor : theme.colors.text,
+    } : {};
+    return <ContentLoader
+        {...rest}
+        {...props}
+        ref = {ref}
+    />
+});
+RContentLoader.displayName = "ContentLoaderComponent";
+export default RContentLoader;

package/src/components/ContentLoader/PieChart.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import ContentLoader from './Loader';
+import Rect from "./Rect";
+
+const PieChart = props => {
+  return (
+    <ContentLoader viewBox="0 0 400 200" height={200} width={400} {...props}>
+      <Rect x="100" y="5" rx="0" ry="0" width="200" height="15" />
+      <circle cx="140" cy="110" r="70" />
+      <Rect x="230" y="50" rx="0" ry="0" width="7" height="7" />
+      <Rect x="250" y="50" rx="0" ry="0" width="30" height="7" />
+      <Rect x="230" y="64" rx="0" ry="0" width="7" height="7" />
+      <Rect x="250" y="64" rx="0" ry="0" width="30" height="7" />
+      <Rect x="230" y="78" rx="0" ry="0" width="7" height="7" />
+      <Rect x="250" y="78" rx="0" ry="0" width="30" height="7" />
+      <Rect x="230" y="92" rx="0" ry="0" width="7" height="7" />
+      <Rect x="250" y="92" rx="0" ry="0" width="30" height="7" />
+    </ContentLoader>
+  )
+}
+
+export default PieChart

package/src/components/ContentLoader/Placeholder/Placeholder.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import View from "$ecomponents/View";
+import { Raw } from "./animations/Raw";
+import { SIZES } from "./tokens";
+
+
+const Placeholder = ({
+  children,
+  style,
+  Left,
+  Right,
+  Animation,
+  ...props
+}) => {
+  const AnimationProvider = Animation || Raw;
+
+  return (
+    <AnimationProvider>
+      <View style={[styles.row, style]} {...props}>
+        {Left && <Left style={styles.left} />}
+        <View style={styles.full}>{children}</View>
+        {Right && <Right style={styles.right} />}
+      </View>
+    </AnimationProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  full: {
+    flex: 1,
+  },
+  left: {
+    marginRight: SIZES.normal,
+  },
+  right: {
+    marginLeft: SIZES.normal,
+  },
+  row: { flexDirection: "row", width: "100%" },
+});
+
+
+Placeholder.propTypes = {
+  /* An optional component that animates the placeholder */
+  //Animation?: React.ComponentType;
+  /* An optional component to display on the left */
+  //Left?: React.ComponentType<ViewProps>;
+  /* An optional component to display on the right */
+  //Right?: React.ComponentType<ViewProps>;
+}
+
+export default Placeholder;

package/src/components/ContentLoader/Placeholder/PlaceholderLine.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { Animated, StyleSheet} from "react-native";
+import View from "$ecomponents/View";
+import { useAnimation } from "./animations/context";
+import { COLORS, SIZES } from "./tokens";
+import PropTypes from "prop-types";
+import {StyleTypeProps} from "$theme";
+import { getBackgroundColor } from "../utils";
+
+const PlaceholderLine  = ({
+  height = SIZES.normal,
+  color,
+  width = 100,
+  noMargin = false,
+  style,
+}) => {
+  color = getBackgroundColor(color);
+  const backgroundColor = color;
+  const borderRadius = height / 4;
+  const marginBottom = noMargin ? 0 : height;
+
+  const computedStyle = {
+    backgroundColor,
+    borderRadius,
+    height,
+    marginBottom,
+    width: `${width}%`,
+  };
+
+  const animationStyle = useAnimation();
+
+  return (
+    <View style={[computedStyle, style, styles.line]}>
+      <Animated.View style={animationStyle} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  line: {
+    overflow: "hidden",
+  },
+});
+
+
+PlaceholderLine.propTypes = {
+  /* The line height, default is 12  */
+  height : PropTypes.number,
+  /* The line color, default is #efefef  */
+  color : PropTypes.string,
+  /* The line width in percent, default is 100(%)  */
+  width : PropTypes.number,
+  /* Defines if a line should have a margin bottom or not, default is false */
+  noMargin : PropTypes.bool,
+  /* Customize the style of the underlying View component */
+  style : StyleTypeProps
+}
+
+export default PlaceholderLine;

package/src/components/ContentLoader/Placeholder/PlaceholderMedia.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { Animated, StyleSheet} from "react-native";
+import View from "$ecomponents/View";
+import { useAnimation } from "./animations/context";
+import { COLORS, SIZES } from "./tokens";
+import PropTypes from "prop-types";
+import {StyleTypeProps} from "$theme";
+
+
+export const PlaceholderMedia = ({
+  size = SIZES.xxl,
+  isRound = false,
+  color = COLORS.primary,
+  style,
+}) => {
+  const computedStyles = {
+    backgroundColor: color,
+    borderRadius: isRound ? size / 2 : 3,
+    height: size,
+    width: size,
+  };
+
+  const animationStyle = useAnimation();
+
+  return (
+    <View style={[computedStyles, style, styles.media]}>
+      <Animated.View style={animationStyle} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  media: {
+    overflow: "hidden",
+  },
+});
+
+PlaceholderMedia.PropTypes = {
+  /* The media size (height / width), default is 40  */
+  size : PropTypes.number,
+  /* Defines if the media is rounded or not, default is false */
+  isRound:PropTypes.boolean,
+  /* The media color, default is #efefef  */
+  color:PropTypes.string,
+  /* Customize the style of the underlying View component */
+  style:StyleTypeProps
+}

package/src/components/ContentLoader/Placeholder/animations/Fade.js

@@ -0,0 +1,58 @@
+import React, { useRef } from "react";
+import { Animated, ViewProps } from "react-native";
+import { AnimationContext } from "./context";
+import { getBackgroundColor } from "../../utils";
+
+const START_VALUE = 0;
+const END_VALUE = 1;
+const useNativeDriver = true;
+const isInteraction = false;
+
+
+const Fade = ({
+  duration = 500,
+  children,
+  style,
+}) => {
+  const animation = useRef(new Animated.Value(START_VALUE));
+
+  const start = () => {
+    Animated.sequence([
+      Animated.timing(animation.current, {
+        duration,
+        isInteraction,
+        toValue: END_VALUE,
+        useNativeDriver,
+      }),
+      Animated.timing(animation.current, {
+        duration,
+        isInteraction,
+        toValue: START_VALUE,
+        useNativeDriver,
+      }),
+    ]).start((e) => {
+      if (e.finished) {
+        start();
+      }
+    });
+  };
+
+  React.useEffect(() => {
+    start();
+  }, []);
+
+  const animationStyle = {
+    backgroundColor: "#dfdfdf",
+    height: "100%",
+    opacity: animation.current,
+  };
+
+  return (
+    <AnimationContext.Provider value={[animationStyle,{backgroundColor:getBackgroundColor()}, style]}>
+      {children}
+    </AnimationContext.Provider>
+  );
+};
+
+
+export default Fade;

package/src/components/ContentLoader/Placeholder/animations/Loader.js

@@ -0,0 +1,24 @@
+import React from "react";
+import {
+  ActivityIndicator,
+  StyleSheet,
+  View
+} from "react-native";
+
+export const Loader = ({
+  children,
+  ...props
+}) => (
+    <View style={styles.loader}>
+      {children}
+      <ActivityIndicator {...props} style={[styles.indicator, props.style]} />
+    </View>
+);
+
+const styles = StyleSheet.create({
+  indicator: { position: "absolute", height: "100%" },
+  loader: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});

package/src/components/ContentLoader/Placeholder/animations/Progressive.js

@@ -0,0 +1,62 @@
+import React, { useRef } from "react";
+import { Animated, StyleSheet, ViewProps } from "react-native";
+import { AnimationContext } from "./context";
+
+const START_VALUE = 0;
+const END_VALUE = 100;
+const DURATION = 750;
+const isInteraction = false;
+
+export const Progressive = ({
+  style,
+  color = "rgba(0,0,0,0.1)",
+  children,
+}) => {
+  const animation = useRef(new Animated.Value(START_VALUE));
+
+  const start = () => {
+    Animated.sequence([
+      Animated.timing(animation.current, {
+        duration: DURATION,
+        isInteraction,
+        toValue: END_VALUE,
+        useNativeDriver: false,
+      }),
+      Animated.timing(animation.current, {
+        duration: DURATION,
+        isInteraction,
+        toValue: START_VALUE,
+        useNativeDriver: false,
+      }),
+    ]).start((e) => {
+      if (e.finished) {
+        start();
+      }
+    });
+  };
+
+  React.useEffect(() => {
+    start();
+  }, []);
+
+  const right = animation.current.interpolate({
+    inputRange: [START_VALUE, END_VALUE],
+    outputRange: ["0%", "100%"],
+  });
+
+  return (
+    <AnimationContext.Provider
+      value={[styles.animationStyle, style, { right, backgroundColor: color }]}
+    >
+      {children}
+    </AnimationContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  animationStyle: {
+    height: "100%",
+    position: "absolute",
+    width: "100%",
+  },
+});

package/src/components/ContentLoader/Placeholder/animations/Raw.js

@@ -0,0 +1,4 @@
+import React from "react";
+import { ViewProps } from "react-native";
+
+export const Raw = ({ children }) => <>{children}</>;