@fto-consult/expo-ui 1.0.4

package/src/components/Slider/index.js

@@ -0,0 +1,144 @@
+import {View } from "react-native";
+import React from "$react";
+import {defaultObj,isArray,isDecimal} from "$utils";
+import theme,{Colors,DISABLED_OPACITY} from "$theme";
+import {StyleSheet} from "react-native";
+import PropTypes from "prop-types";
+import Label from "$ecomponents/Label";
+import Slider from "./Slider";
+import {isWeb} from "$cplatform";
+import HelperText from "$ecomponents/HelperText";
+
+const prepareValue = ({value,defaultValue}) => isArray(defaultValue) && defaultValue.length? defaultValue : isArray(value) && value.length? value : defaultDecimal(defaultValue,value)
+
+const SliderComponent = React.forwardRef((props,ref)=>{
+    let {
+        value,
+        label,
+        text,
+        error,
+        style,
+        onPress,
+        onChange,
+        helperText,
+        labelProps,
+        containerProps,
+        labelStyle,
+        testID,
+        title,
+        valueProps,
+        contentProps,
+        renderValue,
+        step,
+        percentage,
+        editable,
+        disabled,
+        readOnly,
+        ...p
+    } = props;
+    p = defaultObj(p);
+    disabled = defaultBool(disabled,false);
+    readOnly = defaultBool(readOnly,false);
+    const isEditable = !disabled && !readOnly && editable !== false ? true : false;
+    const pointerEvents = isEditable ? "auto" : "none";
+    containerProps = defaultObj(containerProps);
+    valueProps = defaultObj(valueProps);
+    contentProps = defaultObj(contentProps);
+    const defVal = prepareValue({value,defaultValue});
+    const [sValue,setSValue] = React.useStateIfMounted(defVal)
+    const prevValue = React.usePrevious(isArray(sValue) && isDecimal(sValue[0])? sValue[0]:sValue);
+    React.useEffect(()=>{
+        const value = isArray(sValue) && isDecimal(sValue[0]) ? sValue[0] : isDecimal(sValue)? sValue : undefined;
+        const prevVal = isArray(prevValue) ? prevValue[0] : prevValue;
+        if(value !== prevVal){
+            if(typeof onChange =='function'){
+               onChange({value,previousValue:prevValue});
+            }
+        }
+   },[sValue])
+
+   const setValue = (nVal)=>{
+        if(nVal === sValue) return;
+        let sV = Array.isArray(sValue)? sValue[0] : sValue;
+        let nV = Array.isArray(nVal)? nVal[0] : nVal;
+        if(sV === nV) return;
+        setSValue(nVal);
+   }
+   React.useEffect(()=>{
+       const nVal = prepareValue({value,defaultValue});
+       setValue(nVal);
+   },[value,defaultValue])
+
+   const context = {setValue};
+   React.useEffect(()=>{
+       React.setRef(ref,context);
+       return ()=>{
+           React.setRef(ref,null);
+       }
+   },[])
+   const fValue = isArray(sValue) && isDecimal(sValue[0])? sValue[0] : isDecimal(sValue)? sValue : undefined;
+   const sRenderValue = isDecimal(fValue)?  defaultFunc(renderValue,(value)=>value.formatNumber()+(percentage !==false?"%":""))(fValue) : undefined
+   labelProps = defaultObj(labelProps)
+   const tinColor = Colors.isWhite(theme.colors.primary)? theme.colors.secondary : theme.colors.primary;
+   const webStyle = isWeb()? {cursor:'pointer'} : null;
+   const rDisabled = {};
+   if(disabled){
+       rDisabled.opacity = DISABLED_OPACITY;
+   }
+   return <React.Fragment>
+        <View {...containerProps} pointerEvents={pointerEvents} style={[styles.wrap,containerProps.style,styles.container]}>
+            <View {...contentProps} style={[contentProps.style,styles.content]}>
+               <Label disabled={disabled} {...labelProps} style={[styles.label,defaultObj(labelStyle,labelProps.style),{textAlign:'left'},error?{color:theme.colors.error}:undefined,rDisabled]} >{label}</Label>
+               {<Label {...valueProps} pointerEvents={'none'} disabled={disabled} style={[{color:theme.colors.primaryOnSurface,fontWeight:'bold',textAlign:'right'},valueProps.style]}>{sRenderValue}</Label>}
+            </View>
+            <View style={[{width:'100%'},webStyle]} pointerEvents={pointerEvents}>
+                <Slider
+                    {...p}
+                    disabled = {disabled}
+                    editable = {isEditable}
+                    thumbTintColor = {Colors.isValid(p.thumbTintColor)? p.thumbTintColor:tinColor}
+                    minimumTrackTintColor = {Colors.isValid(p.minimumTrackTintColor)
+                        ?p.minimumTrackTintColor:tinColor}
+                    maximumValue = {100}
+                    minimumValue = {0}
+                    step= {defaultDecimal(step,1)}
+                    style = {[styles.slider,style,rDisabled]}
+                    value = {sValue}
+                    onValueChange = {setSValue}
+                    color = {Colors.isValid(p.color)? p.color : theme.colors.primaryOnSurface}
+                />
+            </View>
+            {<HelperText error={error} disabled={!isEditable}>{helperText}</HelperText>}
+        </View>
+    </React.Fragment>
+}); 
+
+SliderComponent.propTypes = {
+    ...defaultObj(Slider.propTypes),
+    containerProps : PropTypes.object,//les props de la vue container au tooltip
+    labelProps : PropTypes.object,//les props du label
+    percentage : PropTypes.bool,//si le rendu sera en pourcentage
+}
+
+const styles = StyleSheet.create({
+    container : {
+        flexDirection: 'column',
+        paddingVertical : 0,
+    },
+    content : {
+        flexDirection:'row',
+        marginVertical:0,
+        textAlign:'left',
+        justifyContent:'space-between'
+    },
+    label: {
+      fontSize: 16,
+    },
+    slider : {
+        paddingHorizontal:0,
+        marginHorizontal:10,
+        height:40
+    }
+  });
+
+  export default SliderComponent;

package/src/components/Slider/styles.js

@@ -0,0 +1,39 @@
+const TRACK_SIZE = 4;
+const THUMB_SIZE = 20;
+const GREEN = 'green';
+const TRANSPARENT = 'transparent';
+export const defaultStyles = {
+    aboveThumbComponentsContainer: {
+        flexDirection: 'row',
+    },
+    container: {
+        height: 40,
+        justifyContent: 'center',
+    },
+    debugThumbTouchArea: {
+        backgroundColor: GREEN,
+        opacity: 0.5,
+        position: 'absolute',
+    },
+    renderThumbComponent: {
+        position: 'absolute',
+    },
+    thumb: {
+        borderRadius: THUMB_SIZE / 2,
+        height: THUMB_SIZE,
+        position: 'absolute',
+        width: THUMB_SIZE,
+    },
+    touchArea: {
+        backgroundColor: TRANSPARENT,
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+    },
+    track: {
+        borderRadius: TRACK_SIZE / 2,
+        height: TRACK_SIZE,
+    },
+};

package/src/components/SplashScreen/index.js

@@ -0,0 +1,194 @@
+/* @flow */
+/*** fork of https://www.npmjs.com/package/react-native-animated-splash-screen */
+import PropTypes from "prop-types"
+import * as React from "react"
+import {Animated, StyleSheet } from "react-native";
+import View from "$ecomponents/View";
+import {isNativeMobile} from "$cplatform";
+import {defaultDecimal} from "$utils";
+import {LogoProgress} from "$ecomponents/Logo";
+import styles, {
+  _solidBackground,
+  _staticBackground,
+  _dynamicLogoStyle,
+  _dynamicCustomComponentStyle,
+  _dynamicImageBackground,
+  _dynamicBackgroundOpacity,
+} from "./styles"
+const isNative = isNativeMobile();
+const Component = isNative? Animated.View : View;
+
+class AnimatedSplash extends React.Component {
+  static defaultProps = {
+    isLoaded: false,
+  }
+
+  state = {
+    animationDone: false,
+    loadingProgress: new Animated.Value(0)
+  }
+
+  componentDidUpdate(prevProps) {
+    const { isLoaded , duration, delay } = this.props
+    const { loadingProgress } = this.state
+
+    if (isLoaded && !prevProps.isLoaded) {
+      if(!isNativeMobile()){
+          this.setState({animationDone:true});
+      } else {
+        Animated.timing(loadingProgress, {
+            toValue: 100,
+            duration: duration || 1000,
+            delay: delay || 0,
+            useNativeDriver: true,
+        }).start(() => {
+            this.setState({
+              animationDone: true,
+            })
+        })
+      }
+    }
+  }
+
+  renderChildren() {
+    const { children, preload, isLoaded } = this.props
+    if (preload || preload == null) {
+      return children
+    } else {
+      if (isLoaded) {
+        return children
+      }
+    }
+
+    return null
+  }
+
+  render() {
+    const { loadingProgress, animationDone } = this.state
+    let {
+      logoImage,
+      logoWidth,
+      logoHeight,
+      backgroundColor,
+      imageBackgroundSource,
+      imageBackgroundResizeMode,
+      disableAppScale,
+      disableImageBackgroundAnimation,
+    } = this.props
+    logoWidth = defaultDecimal(logoWidth,150);
+    logoHeight = defaultDecimal(logoHeight,250);
+    const opacityClearToVisible = {
+      opacity: loadingProgress.interpolate({
+        inputRange: [0, 15, 30],
+        outputRange: [0, 0, 1],
+        extrapolate: "clamp",
+      }),
+    }
+
+    const imageScale = {
+      transform: [
+        {
+          scale: loadingProgress.interpolate({
+            inputRange: [0, 10, 100],
+            outputRange: [1, 1, 65],
+          }),
+        },
+      ],
+    }
+
+    const logoScale = {
+      transform: [
+        {
+          scale: loadingProgress.interpolate({
+            inputRange: [0, 10, 100],
+            outputRange: [1, 0.8, 10],
+          }),
+        },
+      ],
+    }
+
+    const logoOpacity = {
+      opacity: loadingProgress.interpolate({
+        inputRange: [0, 20, 100],
+        outputRange: [1, 0, 0],
+        extrapolate: "clamp",
+      }),
+    }
+
+    const appScale = {
+      transform: [
+        {
+          scale: loadingProgress.interpolate({
+            inputRange: [0, 7, 100],
+            outputRange: [1.1, 1.05, 1],
+          }),
+        },
+      ],
+    }
+    
+    return (
+      <View style={[styles.container]}>
+        {!animationDone && <View style={StyleSheet.absoluteFill} />}
+        <View style={styles.containerGlue}>
+          {!animationDone && (
+            <Animated.View
+              style={_staticBackground(logoOpacity, backgroundColor)}
+            />
+          )}
+          {(animationDone || isNative) && <Component style={[!disableAppScale && appScale, opacityClearToVisible, styles.flex]}>
+            {this.renderChildren()}
+          </Component>}
+          {!animationDone && (
+            <Animated.Image
+              resizeMode={imageBackgroundResizeMode || "cover"}
+              source={imageBackgroundSource}
+              style={[disableImageBackgroundAnimation && _staticBackground(
+                logoOpacity,
+                backgroundColor
+              ), disableImageBackgroundAnimation && _dynamicImageBackground(
+                imageScale,
+                logoOpacity,
+                backgroundColor
+              )]}
+            />
+          )}
+          {!animationDone && (
+            <View style={[StyleSheet.absoluteFill, styles.logoStyle]}>
+              {(
+                <Animated.View
+                  style={_dynamicCustomComponentStyle(
+                        logoScale,
+                        logoOpacity,
+                        logoWidth,
+                        logoHeight
+                    )}>
+                  {<LogoProgress/>}
+                </Animated.View>
+              )}
+            </View>
+          )}
+        </View>
+      </View>
+    )
+  }
+}
+
+AnimatedSplash.propTypes = {
+  preload: PropTypes.bool,
+  logoWidth: PropTypes.number,
+  children: PropTypes.element,
+  logoHeight: PropTypes.number,
+  backgroundColor: PropTypes.string,
+  isLoaded: PropTypes.bool.isRequired,
+  disableBackgroundImage: PropTypes.bool,
+  logoImage: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.object,
+  ]),
+  disableAppScale: PropTypes.bool,
+  duration: PropTypes.number,
+  delay: PropTypes.number,
+}
+
+export default AnimatedSplash

package/src/components/SplashScreen/styles.js

@@ -0,0 +1,74 @@
+import { StyleSheet, Dimensions } from "react-native"
+const { width, height } = Dimensions.get("screen")
+
+export const _staticBackground = (logoOpacity, backgroundColor) => [
+  logoOpacity,
+  StyleSheet.absoluteFill,
+  { backgroundColor: backgroundColor || null },
+]
+
+export const _dynamicImageBackground = (
+  imageScale,
+  logoOpacity,
+  backgroundColor
+) => [
+  imageScale,
+  logoOpacity,
+  {
+    ...StyleSheet.absoluteFill,
+    width,
+    height,
+    top: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    tintColor: backgroundColor || null,
+  },
+]
+
+export const _dynamicLogoStyle = (
+  logoScale,
+  logoOpacity,
+  logoWidth,
+  logoHeight
+) => [
+  logoScale,
+  logoOpacity,
+  {
+    //width: logoWidth || 150,
+    height: logoHeight || 150,
+  },
+]
+
+export const _dynamicCustomComponentStyle = (
+  logoScale,
+  logoOpacity,
+  logoWidth,
+  logoHeight
+) => [
+  logoScale,
+  logoOpacity,
+  {
+    //width: logoWidth || 150,
+    height: logoHeight || 150,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+]
+
+export default {
+  container: {
+    flex: 1,
+  },
+  containerGlue: {
+    flex: 1,
+    alignContent: "center",
+    justifyContent: "center",
+  },
+  flex: {
+    flex: 1,
+  },
+  logoStyle: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+}

package/src/components/StatusBar/Component/index.js

@@ -0,0 +1,5 @@
+import { StatusBar } from 'expo-status-bar';
+
+export default function StatusBarComponent(props){
+    return <StatusBar {...props}></StatusBar>
+}

package/src/components/StatusBar/Component/index.web.js

@@ -0,0 +1,88 @@
+import React from "$react";
+//import { StatusBar } from 'expo-status-bar';
+import theme,{getStatusBarStyle,Colors} from "$theme"
+import {isTouchDevice,uniqid} from "$utils";
+import {isDOMElement,removeClassName,addClassName} from "$utils/dom";
+import { StyleSheet } from "react-native";
+
+const styleId = uniqid("dynamic-css-style-id");
+
+const updateStyleSheet = (theme)=>{
+    if(typeof document !=="undefined" && document ){
+        var wrap = document.getElementById(styleId);
+        if(!wrap){
+            wrap = document.createElement("div");
+            document.body.appendChild(wrap);
+        }
+        wrap.id = styleId;
+        wrap.style = {...defaultObj(StyleSheet.flatten(wrap.style)),display:'none',width:0,height:0};
+        wrap.innerHTML = "";
+        var style = document.createElement('style');
+        style.type = 'text/css';
+        style.innerHTML = getCss(theme);
+        wrap.appendChild(style );
+    }
+}
+const getCss = (theme)=>{
+    return ``
+}
+
+export default function StatusBarComponent(props){
+    const styles = getStatusBarStyle()
+    React.useEffect(()=>{
+        updateStyleSheet(theme);
+        updateThemeName(theme);
+        return;
+        if(Colors.isValid(styles.backgroundColor)){
+            if(typeof document != 'undefined' && document && document.querySelector && isTouchDevice()){
+                let m = ["msapplication-navbutton-color","theme-color","apple-mobile-web-app-status-bar-style"]
+                let statusBarColor = styles.backgroundColor;
+                for(let i in m){    
+                    let name = m[i];
+                    let metaThemeColor = document.querySelector("meta[name="+name+"]");
+                    if(!isDOMElement(metaThemeColor)){
+                        metaThemeColor = document.createElement('meta');
+                        metaThemeColor.setAttribute('name', name);
+                        document.getElementsByTagName('head')[0].appendChild(metaThemeColor);
+                    }
+                    if(isDOMElement(metaThemeColor)){             
+                        metaThemeColor.setAttribute("content", statusBarColor);
+                    }
+                }
+            }
+        }
+    },[]);
+    return null;
+    return <StatusBar {...styles} {...props}></StatusBar>
+}
+const updateThemeName = (theme)=>{
+    if(typeof document ==="undefined" || !document || !isDOMElement(document.body)) return null;
+    let b = document.body;
+    let c = b.getAttribute("data-theme");
+    if(c){
+        removeClassName(b,'theme-'+c);
+        let s = c.split('-');
+        removeClassName(b,'theme-primary-'+s[0],'theme-secondary-'+s[1])
+    }
+    removeClassName(b,"theme-primary-text-white");
+    removeClassName(b,"theme-secondary-text-white");
+    removeClassName(b,"theme-secondary-white");
+    if(theme.colors.primaryContrast =="white"){
+        addClassName(b,"theme-primary-text-white")
+    }
+    if(theme.colors.secondaryContrast =="white"){
+        addClassName(b,"theme-secondary-text-white")
+    }
+    if(theme.colors.secondaryContrast =="white"){
+        addClassName(b,"theme-secondary-white");
+    }
+    return null;
+    if(isNonNullString(theme.colors.name)){
+        let s = theme.colors.name.split('-')
+        let primaryColorName = defaultStr(theme.colors.primaryColorName,s[0]).replaceAll("-","_")
+        let secondaryColorName = defaultStr(theme.colors.secondaryColorName,s[1]).replaceAll("-","_");
+        let themeName = primaryColorName && secondaryColorName ? (primaryColorName+"-"+secondaryColorName) : theme.colors.name;
+        addClassName(b,'theme-'+themeName,'theme-primary-'+primaryColorName,'theme-secondary-'+secondaryColorName);
+        b.setAttribute("data-theme",themeName);
+    }
+}

package/src/components/StatusBar/index.js

@@ -0,0 +1,7 @@
+import Component from "./Component";
+import React from "$react";
+import { getStatusBarStyle } from "$theme";
+
+export default function StatusBarMainComponent(props){
+    return <Component {...getStatusBarStyle()} {...props}/>
+}