@fto-consult/expo-ui 1.0.4

package/src/components/Radio/index.js

@@ -0,0 +1,164 @@
+import { RadioButton } from 'react-native-paper';
+import View from "$ecomponents/View";
+import React from "$react";
+import {isUndefined,defaultObj,defaultVal,defaultStr} from "$utils";
+import {isIos,isAndroid} from "$cplatform";
+import theme,{Colors,DISABLED_OPACITY,ALPHA_OPACITY} from "$theme";
+import { StyleSheet } from 'react-native';
+export const checkedStatus = 'checked';
+export const uncheckedStatus = 'unchecked';
+import PropTypes from "prop-types";
+import Tooltip from "$ecomponents/Tooltip";
+import HelperText from "$ecomponents/HelperText";
+export const leftPosition = 'leading';
+export const rightPosition = "trailing";
+
+export const CHECKED_ICON_NAME = isIos()? 'check':'check';
+
+export const UNCHECKED_ICON_NAME = isIos() ?'' : '' 
+
+const RadioComponent = React.forwardRef((props,ref)=>{
+    let {
+        checkedValue,
+        uncheckedValue,
+        defaultValue,
+        value,
+        label,
+        text,
+        checkedLabel,
+        error,
+        style,
+        onPress,
+        checkedTooltip,
+        onChange,
+        uncheckedTooltip,
+        containerProps,
+        uncheckedLabel,
+        labelStyle,
+        helperText,
+        position,
+        editable,
+        disabled,
+        readOnly,
+        primaryOnCheck,
+        secondaryOnCheck,
+        ...p
+    } = props;
+    disabled = defaultBool(disabled,false);
+    const isEditable = !disabled && readOnly !== true && editable !== false ? true : false;
+    const pointerEvents = isEditable ? "auto" : "none";
+    p = defaultObj(p);
+    checkedValue = defaultVal(checkedValue,1);
+    uncheckedValue = defaultVal(uncheckedValue,0);
+    if(!isUndefined(p.checked)){
+        defaultValue = p.checked?checkedValue : uncheckedValue;
+    } 
+    delete p.checked;
+    defaultValue = defaultVal(defaultValue,value,0);
+    const [status,setStatus] = React.useStateIfMounted(defaultValue == checkedValue ? checkedStatus : uncheckedStatus)
+    const previousStatus = React.usePrevious(status);
+    const checked = status===checkedStatus?true:false;
+    if(checked){
+        p.label = defaultStr(checkedLabel,label,text)
+        p.tooltip = defaultStr(checkedTooltip,p.tooltip,p.title);
+    } else {
+        p.label = defaultStr(uncheckedLabel,label,text)
+        p.tooltip = defaultStr(uncheckedTooltip,p.tooltip,p.title);
+    }
+   if(isIos()){
+       p.mode = "ios";
+   } else if(isAndroid()){
+       p.mode = "android";
+   } else delete p.mode;
+   React.useEffect(()=>{
+        if(previousStatus !== status){
+            if(typeof onChange =='function'){
+               onChange({checked,value:checked?checkedValue:uncheckedValue,label:checked?checkedLabel:uncheckedLabel});
+            }
+        }
+   },[status])
+   const setValue = (defaultValue)=>{
+        const nCheckedStatus = defaultValue === checkedValue ? checkedStatus : defaultValue === uncheckedValue ? uncheckedStatus : undefined;
+        if(nCheckedStatus === status || typeof nCheckedStatus !== 'string') return;
+        setStatus(nCheckedStatus);
+   }
+   React.useEffect(()=>{
+       setValue(defaultValue);
+   },[defaultValue])
+   const context = {
+       setValue,
+   }
+   React.useEffect(()=>{
+        React.setRef(ref,context);
+        return ()=>{
+            React.setRef(ref,null);
+        }
+   },[])
+   position = defaultStr(position).toLowerCase();
+   if(position =="left") position = leftPosition;
+   else if(position =="right") position = rightPosition;
+   if(position !== leftPosition && position !== rightPosition){
+       position = rightPosition;
+   }
+   containerProps = defaultObj(containerProps);
+   const lStyle = {};
+   if(disabled){
+       lStyle.color = Colors.setAlpha(theme.colors.text,ALPHA_OPACITY);
+   }
+   let cColor = Colors.isValid(p.color)? p.color : theme.colors.primaryOnSurface;
+   if(primaryOnCheck ===true && status ==checkedStatus){
+       cColor = theme.colors.primaryOnSurface;
+   } else if(secondaryOnCheck ===true && status === checkedStatus){
+       cColor = theme.colors.secondaryOnSurface;
+   }
+   const disabledStyle = disabled ? {opacity : DISABLED_OPACITY} : undefined;
+   return <View {...containerProps} style={[containerProps.style,disabledStyle]} pointerEvents={pointerEvents}>
+        <Tooltip
+            Component = {RadioButton.Item}
+            {...p}
+            disabled = {disabled}
+            editable = {isEditable}
+            pointerEvents = {pointerEvents}
+            style = {[styles.checkbox,style]}
+            position = {position}
+            status = {status}
+            color = {cColor}
+            labelStyle = {[styles.label,labelStyle,lStyle,disabledStyle]}
+            onPress={(e)=>{
+                if(typeof onPress =="function" && onPress({event:e,checked,value:checked?checkedValue:uncheckedValue,label:checked?checkedLabel:uncheckedLabel}) ===false){
+                    return;
+                }
+                setStatus(status === checkedStatus ? uncheckedStatus : checkedStatus);
+            }}
+        />
+        {<HelperText error={error} disabled={!isEditable}>{helperText}</HelperText>}
+    </View>
+});
+RadioComponent.propTypes = {
+    ...defaultObj(RadioButton.Item.propTypes),
+    primaryOnCheck : PropTypes.bool,//la couleur sera primaire si l'oncheck
+    secondaryOnCheck : PropTypes.bool, ///la couleur sera secondaire si la checkbox est active
+    checkedValue : PropTypes.any,
+    uncheckedValue : PropTypes.any,
+    checkedLabel : PropTypes.string,
+    containerProps : PropTypes.object, //les props de la vue container
+    uncheckedLabel : PropTypes.string,
+    checkedTooltip : PropTypes.string,
+    uncheckedTooltip : PropTypes.string,
+}
+
+const styles = StyleSheet.create({
+    container : {
+
+    },
+    checkbox : {
+        paddingVertical : 10,
+        paddingHorizontal:0,
+        justifyContent:'flex-start'
+    },
+    label : {flexGrow:0,flexShrink:0,paddingVertical:10}
+})
+
+export default RadioComponent;
+
+RadioComponent.displayName = "RadioComponent";

package/src/components/ReadMoreText/index.js

@@ -0,0 +1,120 @@
+/***@see : https://github.com/expo/react-native-read-more-text */
+import React from "react";
+import { StyleSheet, Text} from "react-native";
+import View from "$ecomponents/View";
+
+export default class ReadMore extends React.Component {
+  state = {
+    measured: false,
+    shouldShowReadMore: false,
+    showAllText: false
+  };
+
+  async componentDidMount() {
+    this._isMounted = true;
+    await nextFrameAsync();
+
+    if (!this._isMounted) {
+      return;
+    }
+
+    // Get the height of the text with no restriction on number of lines
+    const fullHeight = await measureHeightAsync(this._text);
+    this.setState({ measured: true });
+    await nextFrameAsync();
+
+    if (!this._isMounted) {
+      return;
+    }
+
+    // Get the height of the text now that number of lines has been set
+    const limitedHeight = await measureHeightAsync(this._text);
+
+    if (fullHeight > limitedHeight) {
+      this.setState({ shouldShowReadMore: true }, () => {
+        this.props.onReady && this.props.onReady();
+      });
+    } else {
+      this.props.onReady && this.props.onReady();
+    }
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  render() {
+    let { measured, showAllText } = this.state;
+
+    let { numberOfLines } = this.props;
+
+    return (
+      <View>
+        <Text
+          numberOfLines={measured && !showAllText ? numberOfLines : 0}
+          style={this.props.textStyle}
+          ref={text => {
+            this._text = text;
+          }}
+        >
+          {this.props.children}
+        </Text>
+
+        {this._maybeRenderReadMore()}
+      </View>
+    );
+  }
+
+  _handlePressReadMore = () => {
+    this.setState({ showAllText: true });
+  };
+
+  _handlePressReadLess = () => {
+    this.setState({ showAllText: false });
+  };
+
+  _maybeRenderReadMore() {
+    let { shouldShowReadMore, showAllText } = this.state;
+
+    if (shouldShowReadMore && !showAllText) {
+      if (this.props.renderTruncatedFooter) {
+        return this.props.renderTruncatedFooter(this._handlePressReadMore);
+      }
+
+      return (
+        <Text style={styles.button} onPress={this._handlePressReadMore}>
+          Read more
+        </Text>
+      );
+    } else if (shouldShowReadMore && showAllText) {
+      if (this.props.renderRevealedFooter) {
+        return this.props.renderRevealedFooter(this._handlePressReadLess);
+      }
+
+      return (
+        <Text style={styles.button} onPress={this._handlePressReadLess}>
+          Hide
+        </Text>
+      );
+    }
+  }
+}
+
+function measureHeightAsync(component) {
+  return new Promise(resolve => {
+    component.measure((x, y, w, h) => {
+      resolve(h);
+    });
+  });
+}
+
+function nextFrameAsync() {
+  return new Promise(resolve => requestAnimationFrame(() => resolve()));
+}
+
+const styles = StyleSheet.create({
+  button: {
+    color: "#888",
+    marginTop: 5
+  }
+});

package/src/components/ScrollView/index.js

@@ -0,0 +1,34 @@
+import React from '$react';
+import { FlatList } from 'react-native';
+import { ScrollView,Dimensions } from 'react-native';
+import PropTypes from "prop-types";
+import View from "$ecomponents/View";
+import {isMobileNative} from "$cplatform";
+import {defaultStr,defaultObj} from "$utils";
+const isNative = isMobileNative();
+
+const ScrollViewComponent = React.forwardRef((props,ref) => {
+  const {virtualized,contentProps,mediaQueryUpdateNativeProps,testID:customTestID,children,screenIndent:sIndent,...rest} = props;
+  const testID = defaultStr(customTestID,'RN_ScrollViewComponent');
+  const cProps = defaultObj(contentProps);
+  return  virtualized ? <FlatList
+    {...rest}
+    ref = {ref}
+    testID = {testID}
+    data={[]}
+    keyExtractor={(_e, i) => 'dom' + i.toString()}
+    ListEmptyComponent={null}
+    renderItem={null}
+    contentContainerStyle = {[!isNative && {flex:1,flexGrow: 1,maxHeight:'100vh'},rest.contentContainerStyle]}
+    ListHeaderComponent={() => <View testID={testID+'_FlatListContent'} {...cProps} mediaQueryUpdateNativeProps = {mediaQueryUpdateNativeProps}
+    >{children}</View>}
+    /> : <ScrollView ref={ref} {...rest} testID={testID} children={children}/>
+});
+
+ScrollViewComponent.displayName = "ScrollViewComponent";
+export default ScrollViewComponent;
+
+ScrollViewComponent.propTypes = {
+    virtualized : PropTypes.bool,
+    contentProps : PropTypes.object,
+}

package/src/components/Signature/Panel.js

@@ -0,0 +1,246 @@
+import * as React from 'react';
+import View from "$ecomponents/View";
+import {
+	PanResponder,
+	StyleSheet,
+	PixelRatio,
+	GestureResponderEvent,
+	LayoutChangeEvent,
+} from 'react-native';
+import Svg, { G, Path } from 'react-native-svg';
+import { captureRef as takeSnapshotAsync } from 'react-native-view-shot';
+import PropTypes from "prop-types";
+
+class SignaturePanel extends React.Component {
+
+	static timer = null;
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			paths: [],
+			points: [],
+			posX: 0,
+			posY: 0,
+		};
+		this.signatureContainer = React.createRef();
+		this.panResponder = PanResponder.create({
+			onMoveShouldSetPanResponder: () => true,
+			onPanResponderGrant: e => this.onTouch(e),
+			onPanResponderMove: e => this.onTouch(e),
+			onPanResponderRelease: e => this.onTouchEnd(),
+			onStartShouldSetPanResponder: () => true,
+		});
+	}
+	render() {
+		const { containerStyle, width, height } = this.props;
+		const { paths, points } = this.state;
+		return (
+			<View
+				{...this.panResponder.panHandlers}
+				ref={this.signatureContainer}
+				onLayout={this.onLayoutContainer}
+				style={[containerStyle, { width, height }]}
+			>
+				{this.renderSvg(paths, points)}
+			</View>
+		);
+	}
+
+	/**
+	 * Resets the signature pad container
+	 * @param {GestureResponderEvent} e Event
+	 * @public
+	 */
+    reset() {
+		this.setState({
+			paths: [],
+			points: [],
+			posX: 0,
+			posY: 0,
+		});
+	}
+
+	/**
+	 * Detect the touch start and move events on the signature pad
+	 * @param {GestureResponderEvent} e Event
+	 * @private
+	 */
+
+	onTouch(e) {
+		const { locationX, locationY } = e.nativeEvent;
+		const { points } = this.state;
+		if (SignaturePanel.timer) {
+			clearTimeout(SignaturePanel.timer);
+		}
+		this.setState({
+			paths: this.state.paths,
+			points: [...points, { locationX, locationY }],
+		});
+
+		this.props.onTouch(e);
+	}
+
+	/**
+	 * Detect when the user has finished the gesture
+	 * @private
+	 */
+
+	onTouchEnd() {
+		const { paths, points } = this.state;
+		const { strokeColor, strokeWidth } = this.props;
+		const newPath = <Path d={this.plotToSvg(points)} stroke={strokeColor} strokeWidth={strokeWidth} fill="none" />;
+		this.setState(
+			{
+				paths: [...paths, newPath],
+				points: [],
+			},
+			this.returnImageData({ paths, points })
+		);
+
+		this.props.onTouchEnd();
+	}
+
+	/**
+	 * Plots the captured points to an array
+	 * @param {Array} points Points
+	 * @return {any}
+	 * @private
+	 */
+
+	plotToSvg(points) {
+		const { posX, posY } = this.state;
+		if (points.length > 0) {
+			let path = `M ${points[0].locationX - posX},${points[0].locationY - posY}`;
+			points.forEach(point => {
+				path += ` L ${point.locationX - posX},${point.locationY - posY}`;
+			});
+			return path;
+		} else {
+			return '';
+		}
+	}
+
+	/**
+	 * Takes the points and forms an SVG from them
+	 * @param {Array} paths
+	 * @param {Array} points
+	 * @return {Element}*
+	 * @private
+	 */
+
+	renderSvg = (paths, points) => {
+		const { width, height, strokeColor, strokeWidth } = this.props;
+		this.svgRef = this.svgRef || React.createRef();
+		return (
+			<Svg style={styles.pad} width={width} height={height} ref={this.svgRef}>
+				<G>
+					{paths.map((path, i) => {
+						return <React.Fragment key={`path-${i}`}>{path}</React.Fragment>;
+					})}
+					<Path d={this.plotToSvg(points)} stroke={strokeColor} strokeWidth={strokeWidth} fill="none" />
+				</G>
+			</Svg>
+		);
+	};
+
+	/**
+	 * Sets the layout view
+	 * @param {LayoutChangeEvent} e Event
+	 * @private
+	 */
+
+	onLayoutContainer = (e) => {
+		const { x, y } = e.nativeEvent.layout;
+		const { offsetX, offsetY } = this.props;
+		this.setState({
+			posX: x + offsetX,
+			posY: y + offsetY,
+		});
+	};
+
+	/**
+	 * Creates a snapshot image from the view container
+	 * @param {Array} paths
+	 * @param {Array} points
+	 * @return {SignaturePanelProps['onFingerUp']}*
+	 * @private
+	 */
+
+	returnImageData({ paths, points }) {
+		const { onFingerUp, onFingerUpTimeout, imageFormat, outputType, imageOutputSize, imageQuality } = this.props;
+		return () => {
+			if (!['jpg', 'png', 'webm', 'raw'].includes(imageFormat)) {
+				onFingerUp(this.renderSvg(paths, points));
+			} else {
+				const pixelRatio = PixelRatio.get();
+				const pixels = imageOutputSize / pixelRatio;
+				console.log(this.svgRef," is svg ref");
+				return;
+				SignaturePanel.timer = setTimeout(async () => {
+					const file = await takeSnapshotAsync(this.signatureContainer, {
+						format: imageFormat,
+						height: pixels,
+						quality: imageQuality,
+						result: outputType,
+						width: pixels,
+					});
+					onFingerUp(file);
+					SignaturePanel.timer = null;
+				}, onFingerUpTimeout);
+			}
+		};
+	}
+}
+
+const styles = StyleSheet.create({
+	pad: {
+		backgroundColor: 'transparent',
+	},
+});
+export default SignaturePanel;
+
+SignaturePanel.propTypes = {
+	containerStyle : PropTypes.object,
+	width: PropTypes.oneOfType([
+        PropTypes.string, 
+        PropTypes.number
+    ]),
+	height: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]),
+	offsetX: PropTypes.number,
+	offsetY: PropTypes.number,
+	strokeColor: PropTypes.string,
+	strokeWidth: PropTypes.number,
+	onFingerUp: PropTypes.any,
+	onFingerUpTimeout: PropTypes.number,
+	onTouch: PropTypes.any,
+	onTouchEnd: PropTypes.any,
+	imageOutputSize:PropTypes.number,
+	imageQuality:PropTypes.number,
+	imageFormat: PropTypes.oneOf([
+        'jpg' , 'png' , 'webm' , 'raw'
+    ]),
+	outputType: PropTypes.oneOf([
+        'tmpfile' , 'base64' , 'data-uri' , 'zip-base64'
+    ])
+}
+
+SignaturePanel.defaultProps = {
+    height: 300,
+    imageFormat: 'png',
+    imageOutputSize: 480,
+    imageQuality: 1,
+    offsetX: 0,
+    offsetY: 0,
+    onFingerUp: () => {},
+    onFingerUpTimeout: 1000,
+    onTouch: () => {},
+    onTouchEnd: () => {},
+    outputType: 'tmpfile',
+    strokeColor: '#000',
+    strokeWidth: 3,
+    width: '100%',
+}

package/src/components/Signature/index.js

@@ -0,0 +1,69 @@
+import Panel from './Panel';
+import {defaultBool} from "$utils";
+import Dialog from "$ecomponents/Dialog";
+import React from '$react';
+import PropTypes from "prop-types";
+import {defaultObj} from "$utils";
+export default function PanelComponent(props){
+    let  {autoClear,trim,dialogProps,visible,descriptionText,description,text,onComplete,...rest} = props;
+    dialogProps = defaultObj(dialogProps);
+    rest = defaultObj(rest);
+    const ref = React.useRef();
+    // Called after ref.current.readPanel() reads a non-empty base64 string
+    const handleOK = (signature) => {
+      console.log(signature);
+      //onOK(signature); // Callback from Component props
+    };
+    return (
+      <Dialog.Controlled 
+        {...dialogProps}
+        visible={visible}
+        fullScreen
+        title = {defaultStr(dialogProps.title,"Désigner une image")}
+        actions ={[
+            {
+                text : "Sauvegarder",
+                icon : "done",
+                onPress : ()=>{
+                    console.log("will save hein")
+                }
+            },
+            {
+                text : "Réinitialiser",
+                icon : "notification-clear-all",
+                onPress : ()=>{
+                    console.log("will refresh hein")
+                }
+            },
+            {
+                text : "Options du crayon",
+                icon : "settings-outline",
+                onPress : ()=>{
+                    console.log("will change settings")
+                }
+            },
+            trim ? undefined : {
+                text : "Couleur arrière plan",
+                icon : "format-color-fill",
+                onPress : ()=>{
+                    console.log("will change bg color")
+                },
+            },
+        ]}
+      >
+          <Panel
+            {...rest}
+            ref={ref}
+            onOK={handleOK}
+            autoClear={defaultBool(autoClear,true)}
+            descriptionText={defaultStr(descriptionText,description,text)}
+          />
+      </Dialog.Controlled>
+    );
+}
+
+PanelComponent.propTypes = {
+    ...defaultObj(Panel.propTypes),
+    dialogProps : PropTypes.object,
+    visible : PropTypes.bool, //si le dialog sera visible ou pas
+}