@fto-consult/expo-ui 1.0.4

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

@@ -0,0 +1,56 @@
+import React, { useEffect, useRef } from "react";
+import { Animated, StyleSheet, ViewProps } from "react-native";
+import { AnimationContext } from "./context";
+
+const START_VALUE = 0;
+const END_VALUE = 100;
+const isInteraction = false;
+
+
+export const Shine = ({
+  duration,
+  children,
+  style,
+  reverse,
+}) => {
+  const animation = useRef(new Animated.Value(START_VALUE));
+
+  const start = () => {
+    animation.current.setValue(START_VALUE);
+
+    Animated.timing(animation.current, {
+      duration: duration || 750,
+      isInteraction,
+      toValue: END_VALUE,
+      useNativeDriver: false,
+    }).start((e) => {
+      if (e.finished) {
+        start();
+      }
+    });
+  };
+
+  useEffect(() => {
+    start();
+  }, []);
+
+  const left = animation.current.interpolate({
+    inputRange: [START_VALUE, END_VALUE],
+    outputRange: reverse ? ["100%", "0%"] : ["0%", "100%"],
+  });
+
+  return (
+    <AnimationContext.Provider value={[styles.shine, { left }, style]}>
+      {children}
+    </AnimationContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  shine: {
+    backgroundColor: "white",
+    height: "100%",
+    opacity: 0.5,
+    width: "40%",
+  },
+});

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

@@ -0,0 +1,56 @@
+import React, { useEffect, useRef } from "react";
+import { Animated, StyleSheet} from "react-native";
+import View from "$ecomponents/View";
+
+const START_VALUE = 0;
+const END_VALUE = 100;
+const isInteraction = false;
+
+export const ShineOverlay = ({
+  duration,
+  children,
+  reverse,
+}) => {
+  const animation = useRef(new Animated.Value(START_VALUE));
+
+  const start = () => {
+    animation.current.setValue(START_VALUE);
+
+    Animated.timing(animation.current, {
+      duration: duration || 750,
+      isInteraction,
+      toValue: END_VALUE,
+      useNativeDriver: false,
+    }).start((e) => {
+      if (e.finished) {
+        start();
+      }
+    });
+  };
+
+  useEffect(() => {
+    start();
+  }, []);
+
+  const left = animation.current.interpolate({
+    inputRange: [START_VALUE, END_VALUE],
+    outputRange: reverse ? ["100%", "0%"] : ["0%", "100%"],
+  });
+
+  return (
+    <View>
+      {children}
+      <Animated.View style={[styles.shine, { left }]} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  shine: {
+    backgroundColor: "#ffffff",
+    height: "100%",
+    opacity: 0.4,
+    position: "absolute",
+    width: 30,
+  },
+});

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

@@ -0,0 +1,4 @@
+import React, { useContext } from "react";
+export const AnimationContext = React.createContext({});
+
+export const useAnimation = () => useContext(AnimationContext);

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

@@ -0,0 +1,12 @@
+
+///@see : https://github.com/mfrachet/rn-placeholder
+
+export { Placeholder } from "./Placeholder";
+export { PlaceholderLine } from "./PlaceholderLine";
+export { PlaceholderMedia } from "./PlaceholderMedia";
+export { Fade } from "./animations/Fade";
+export { Shine } from "./animations/Shine";
+export { ShineOverlay } from "./animations/ShineOverlay";
+export { Loader } from "./animations/Loader";
+export { Progressive } from "./animations/Progressive";
+export * from "./animations/context";

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

@@ -0,0 +1,9 @@
+
+export const COLORS = {
+  primary: "#efefef",
+};
+
+export const SIZES = {
+  normal: 12,
+  xxl: 40,
+};

package/src/components/ContentLoader/Profile.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import Rect from "./Rect";
+import ContentLoader from './Loader';
+
+const ProfileCard = props => {
+  return (
+    <ContentLoader
+      speed={1}
+      width={450}
+      height={400}
+      viewBox="0 0 450 400"
+      {...props}
+    >
+      <Rect x="172" y="53" rx="0" ry="0" width="2" height="300" />
+      <Rect x="386" y="55" rx="0" ry="0" width="2" height="300" />
+      <Rect x="171" y="53" rx="0" ry="0" width="216" height="2" />
+      <Rect x="171" y="353" rx="0" ry="0" width="216" height="2" />
+      <circle cx="277" cy="147" r="44" />
+      <Rect x="174" y="53" rx="0" ry="0" width="216" height="41" />
+      <Rect x="198" y="207" rx="0" ry="0" width="160" height="9" />
+      <Rect x="231" y="236" rx="0" ry="0" width="92" height="9" />
+      <Rect x="206" y="324" rx="0" ry="0" width="146" height="51" />
+    </ContentLoader>
+  )
+}
+
+export default ProfileCard

package/src/components/ContentLoader/Rect.js

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

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

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

package/src/components/ContentLoader/Skeleton.js

@@ -0,0 +1,145 @@
+import React, { useMemo, useState } from "react";
+import { Animated, StyleSheet} from "react-native";
+import View from "$ecomponents/View";
+import PropTypes from "prop-types";
+
+const Types = {
+  TEXT: "text",
+  CIRCLE: "circle",
+  RECT: "rect",
+};
+
+const Defaults = {
+  type: Types.TEXT,
+  textVerticalPadding: 2,
+  textBorderRadius: 4,
+  skeletonColor: "#9ec0c4",
+  widthVariance: 20,
+  heightVariance: 0,
+  pulseSpeed: 1000,
+  lines: 1,
+};
+
+export default function Skeleton(props) {
+  const {
+    children,
+    loading,
+    type = Defaults.type,
+    color = Defaults.skeletonColor,
+    width,
+    widthVariance = Defaults.widthVariance,
+    height,
+    heightVariance = Defaults.heightVariance,
+    pulseSpeed = Defaults.pulseSpeed,
+    lines = Defaults.lines,
+  } = props;
+
+  const [childLayout, setChildLayout] = useState({
+    height: 0,
+    width: 0,
+    x: 0,
+    y: 0,
+  });
+
+  const [fadeAnim] = useState(new Animated.Value(1));
+  React.useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(fadeAnim, {
+          toValue: 0.6,
+          duration: pulseSpeed,
+        }),
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: pulseSpeed,
+        }),
+      ])
+    ).start();
+  }, [loading, pulseSpeed]);
+
+  const styles = useStyles({
+    loading,
+    color,
+  });
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.skeletonContainer}>
+        {new Array(lines).fill(0).map((_, index) => {
+          let calculatedWidth = calculateVariance(
+            width || childLayout.width,
+            widthVariance
+          );
+          let calculatedHeight = calculateVariance(
+            height || childLayout.height,
+            heightVariance
+          );
+          calculatedHeight /= lines;
+          if (type === Types.TEXT)
+            calculatedHeight -= Defaults.textVerticalPadding * 2;
+
+          return (
+            <Animated.View
+              key={index}
+              style={[
+                styles.base,
+                type === Types.TEXT && styles.text,
+                type === Types.RECT && styles.rect,
+                type === Types.CIRCLE && styles.circle,
+                {
+                  opacity: loading ? fadeAnim : 0,
+                  width: calculatedWidth,
+                  height: calculatedHeight,
+                },
+              ]}
+            />
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+Skeleton.propTypes = {
+  type: PropTypes.oneOf(Object.values(Types)),
+  loading: PropTypes.bool.isRequired,
+  color: PropTypes.string,
+  width: PropTypes.number,
+  widthVariance: PropTypes.number,
+  height: PropTypes.number,
+  heightVariance: PropTypes.number,
+  pulseSpeed: PropTypes.number,
+  lines: PropTypes.number,
+};
+
+const calculateVariance = (size, variance) => {
+  return size - size * (Math.random() * (variance / 100.0));
+};
+
+const useStyles = (props) => {
+  const { loading, color } = props;
+
+  return StyleSheet.create({
+    container: { position: "relative" },
+    skeletonContainer: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    },
+    base: {
+      backgroundColor: color,
+      opacity: loading ? 100 : 0,
+    },
+    text: {
+      marginTop: Defaults.textVerticalPadding,
+      marginBottom: Defaults.textVerticalPadding,
+      borderRadius: Defaults.textBorderRadius,
+    },
+    rect: {},
+    circle: {
+      borderRadius: 1000,
+    },
+  });
+};

package/src/components/ContentLoader/Table.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import ContentLoader from "./Loader";
+import Rect from "./Rect";
+
+const TableLoader = props => (
+  <ContentLoader
+    width={1000}
+    height={550}
+    viewBox="0 0 1000 550"
+    backgroundColor="#eaeced"
+    foregroundColor="#ffffff"
+    {...props}
+  >
+    <Rect x="51" y="45" rx="3" ry="3" width="906" height="17" />
+    <circle cx="879" cy="123" r="11" />
+    <circle cx="914" cy="123" r="11" />
+    <Rect x="104" y="115" rx="3" ry="3" width="141" height="15" />
+    <Rect x="305" y="114" rx="3" ry="3" width="299" height="15" />
+    <Rect x="661" y="114" rx="3" ry="3" width="141" height="15" />
+    <Rect x="55" y="155" rx="3" ry="3" width="897" height="2" />
+    <circle cx="880" cy="184" r="11" />
+    <circle cx="915" cy="184" r="11" />
+    <Rect x="105" y="176" rx="3" ry="3" width="141" height="15" />
+    <Rect x="306" y="175" rx="3" ry="3" width="299" height="15" />
+    <Rect x="662" y="175" rx="3" ry="3" width="141" height="15" />
+    <Rect x="56" y="216" rx="3" ry="3" width="897" height="2" />
+    <circle cx="881" cy="242" r="11" />
+    <circle cx="916" cy="242" r="11" />
+    <Rect x="106" y="234" rx="3" ry="3" width="141" height="15" />
+    <Rect x="307" y="233" rx="3" ry="3" width="299" height="15" />
+    <Rect x="663" y="233" rx="3" ry="3" width="141" height="15" />
+    <Rect x="57" y="274" rx="3" ry="3" width="897" height="2" />
+    <circle cx="882" cy="303" r="11" />
+    <circle cx="917" cy="303" r="11" />
+    <Rect x="107" y="295" rx="3" ry="3" width="141" height="15" />
+    <Rect x="308" y="294" rx="3" ry="3" width="299" height="15" />
+    <Rect x="664" y="294" rx="3" ry="3" width="141" height="15" />
+    <Rect x="58" y="335" rx="3" ry="3" width="897" height="2" />
+    <circle cx="881" cy="363" r="11" />
+    <circle cx="916" cy="363" r="11" />
+    <Rect x="106" y="355" rx="3" ry="3" width="141" height="15" />
+    <Rect x="307" y="354" rx="3" ry="3" width="299" height="15" />
+    <Rect x="663" y="354" rx="3" ry="3" width="141" height="15" />
+    <Rect x="57" y="395" rx="3" ry="3" width="897" height="2" />
+    <circle cx="882" cy="424" r="11" />
+    <circle cx="917" cy="424" r="11" />
+    <Rect x="107" y="416" rx="3" ry="3" width="141" height="15" />
+    <Rect x="308" y="415" rx="3" ry="3" width="299" height="15" />
+    <Rect x="664" y="415" rx="3" ry="3" width="141" height="15" />
+    <Rect x="55" y="453" rx="3" ry="3" width="897" height="2" />
+    <Rect x="51" y="49" rx="3" ry="3" width="2" height="465" />
+    <Rect x="955" y="49" rx="3" ry="3" width="2" height="465" />
+    <circle cx="882" cy="484" r="11" />
+    <circle cx="917" cy="484" r="11" />
+    <Rect x="107" y="476" rx="3" ry="3" width="141" height="15" />
+    <Rect x="308" y="475" rx="3" ry="3" width="299" height="15" />
+    <Rect x="664" y="475" rx="3" ry="3" width="141" height="15" />
+    <Rect x="55" y="513" rx="3" ry="3" width="897" height="2" />
+    <Rect x="52" y="80" rx="3" ry="3" width="906" height="17" />
+    <Rect x="53" y="57" rx="3" ry="3" width="68" height="33" />
+    <Rect x="222" y="54" rx="3" ry="3" width="149" height="33" />
+    <Rect x="544" y="55" rx="3" ry="3" width="137" height="33" />
+    <Rect x="782" y="56" rx="3" ry="3" width="72" height="33" />
+    <Rect x="933" y="54" rx="3" ry="3" width="24" height="33" />
+  </ContentLoader>
+)
+
+
+export default TableLoader

package/src/components/ContentLoader/TaskList.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import ContentLoader from './Loader';
+import Rect from "./Rect";
+
+const TaskList = props => {
+  return (
+    <ContentLoader
+      speed={2}
+      width={400}
+      height={160}
+      viewBox="0 0 400 160"
+      backgroundColor="#d9d9d9"
+      foregroundColor="#ededed"
+      {...props}
+    >
+      <Rect x="50" y="6" rx="4" ry="4" width="343" height="38" />
+      <Rect x="8" y="6" rx="4" ry="4" width="35" height="38" />
+      <Rect x="50" y="55" rx="4" ry="4" width="343" height="38" />
+      <Rect x="8" y="55" rx="4" ry="4" width="35" height="38" />
+      <Rect x="50" y="104" rx="4" ry="4" width="343" height="38" />
+      <Rect x="8" y="104" rx="4" ry="4" width="35" height="38" />
+    </ContentLoader>
+  )
+}
+
+
+export default TaskList

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

@@ -0,0 +1,148 @@
+/**** 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,containerProps,mediaQueryUpdateNativeProps,instances,Component,count,...rest} = props;
+    const innerRef = React.useRef(null);
+    Component = defaultVal(Component,ContentLoaderF);
+    containerProps = defaultObj(containerProps);
+    const getChildren = ({width,height,count})=>{
+        const dimensions = Dimensions.get("window");
+        width = width || dimensions.width;
+        height = height || dimensions.height;
+        rest = {...defaultObj(rest),width,height}
+        const r = [];
+        rest = defaultObj(rest);
+        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+""} />)
+        }
+        return r;
+    }
+    const children = getChildren({count});
+    return <View ref={innerRef} onLayout = {React.mediaQueryUpdateNativePropsCallback(({target,...args})=>{
+        args.layout = args.nativeEvent.layout;
+        if(typeof mediaQueryUpdateNativeProps ==='function'){
+            const children = getChildren(defaultObj(mediaQueryUpdateNativeProps(args)));
+            console.log("will update target ",target,children);
+            target.setNativeProps({children});   
+        }
+    },innerRef)} {...containerProps}
+        style={[styles.container,styles.fullWidth,containerProps.style]}
+     >
+        {children}
+    </View>
+}   
+
+ContentLoaderWrapper.propTypes = {
+    //le nombre d'instance du content loader
+    instances : PropTypes.number,
+    instance : PropTypes.number,
+    count : PropTypes.number,
+}
+
+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
+        mediaQueryUpdateNativeProps = {({layout:{width,height}})=>{
+            width = Math.max(width-50,200);
+            return {width,count:Math.max(Math.trunc(height/formHeight),2)}
+         }}
+         {...props}
+         count = {Math.max(Math.trunc(height/formHeight),2)}
+         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"
+         mediaQueryUpdateNativeProps ={({layout:{width,height}})=>{
+            width = Math.max(props.width-50,200);
+            return {width,count:Math.max(Math.trunc((height-100)/datagridHeight),2)} 
+         }}
+         {...props} 
+         Component={DatagridContentLoader}
+         count = {Math.max(Math.trunc((height-100)/datagridHeight),2)}
+    />
+}
+
+
+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',
+    },
+})