@fto-consult/expo-ui 1.0.4

package/src/components/Html/AutoSizedImage.js

@@ -0,0 +1,56 @@
+import React, {PureComponent} from 'react';
+import {
+  Image,
+  Dimensions,
+} from 'react-native';
+
+const {width} = Dimensions.get('window');
+
+const baseStyle = {
+  backgroundColor: 'transparent',
+};
+
+export default class AutoSizedImage extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      // set width 1 is for preventing the warning
+      // You must specify a width and height for the image %s
+      width: this.props.style.width || 1,
+      height: this.props.style.height || 1,
+    };
+  }
+
+  componentDidMount() {
+    //avoid repaint if width/height is given
+    if (this.props.style.width || this.props.style.height) {
+      return;
+    }
+    Image.getSize(this.props.source.uri, (w, h) => {
+      this.setState({width: w, height: h});
+    });
+  }
+
+  render() {
+    const finalSize = {};
+    if (this.state.width > width) {
+      finalSize.width = width;
+      const ratio = width / this.state.width;
+      finalSize.height = this.state.height * ratio;
+    }
+    const style = Object.assign(
+      baseStyle,
+      this.props.style,
+      this.state,
+      finalSize
+    );
+    let source = {};
+    if (!finalSize.width || !finalSize.height) {
+      source = Object.assign(source, this.props.source, this.state);
+    } else {
+      source = Object.assign(source, this.props.source, finalSize);
+    }
+
+    return <Image style={style} source={source} />;
+  }
+}

package/src/components/Html/HtmlToElement.js

@@ -0,0 +1,173 @@
+import React from 'react';
+import {StyleSheet, Text} from 'react-native';
+import htmlparser from 'htmlparser2-without-node-native';
+import * as entities from "entities";
+import AutoSizedImage from './AutoSizedImage';
+
+const defaultOpts = {
+  lineBreak: '\n',
+  paragraphBreak: '\n\n',
+  bullet: '\u2022 ',
+  TextComponent: Text,
+  textComponentProps: null,
+  NodeComponent: Text,
+  nodeComponentProps: null,
+};
+
+const Img = props => {
+  const width =
+    parseInt(props.attribs['width'], 10) || parseInt(props.attribs['data-width'], 10) || 0;
+  const height =
+    parseInt(props.attribs['height'], 10) ||
+    parseInt(props.attribs['data-height'], 10) ||
+    0;
+
+  const imgStyle = {
+    width,
+    height,
+  };
+
+  const source = {
+    uri: props.attribs.src,
+    width,
+    height,
+  };
+  return <AutoSizedImage source={source} style={imgStyle} />;
+};
+
+export default function htmlToElement(rawHtml, customOpts = {}, done) {
+  const opts = {
+    ...defaultOpts,
+    ...customOpts,
+  };
+
+  function inheritedStyle(parent) {
+    if (!parent) return null;
+    const style = StyleSheet.flatten(opts.styles[parent.name]) || {};
+    const parentStyle = inheritedStyle(parent.parent) || {};
+    return {...parentStyle, ...style};
+  }
+
+  function domToElement(dom, parent) {
+    if (!dom) return null;
+
+    const renderNode = opts.customRenderer;
+    let orderedListCounter = 1;
+
+    return dom.map((node, index, list) => {
+      if (renderNode) {
+        const rendered = renderNode(
+          node,
+          index,
+          list,
+          parent,
+          domToElement
+        );
+        if (rendered || rendered === null) return rendered;
+      }
+
+      const {TextComponent} = opts;
+
+      if (node.type === 'text') {
+        const defaultStyle = opts.textComponentProps ? opts.textComponentProps.style : null;
+        const customStyle = inheritedStyle(parent);
+
+        return (
+          <TextComponent
+            {...opts.textComponentProps}
+            key={index}
+            style={[defaultStyle, customStyle]}
+          >
+            {entities.decodeHTML(node.data)}
+          </TextComponent>
+        );
+      }
+
+      if (node.type === 'tag') {
+        if (node.name === 'img') {
+          return <Img key={index} attribs={node.attribs} />;
+        }
+
+        let linkPressHandler = null;
+        let linkLongPressHandler = null;
+        if (node.name === 'a' && node.attribs && node.attribs.href) {
+          linkPressHandler = () =>
+            opts.linkHandler(entities.decodeHTML(node.attribs.href));
+          if (opts.linkLongPressHandler) {
+            linkLongPressHandler = () =>
+              opts.linkLongPressHandler(entities.decodeHTML(node.attribs.href));
+          }
+        }
+
+        let linebreakBefore = null;
+        let linebreakAfter = null;
+        if (opts.addLineBreaks) {
+          switch (node.name) {
+          case 'pre':
+            linebreakBefore = opts.lineBreak;
+            break;
+          case 'p':
+            if (index < list.length - 1) {
+              linebreakAfter = opts.paragraphBreak;
+            }
+            break;
+          case 'br':
+          case 'h1':
+          case 'h2':
+          case 'h3':
+          case 'h4':
+          case 'h5':
+            linebreakAfter = opts.lineBreak;
+            break;
+          }
+        }
+
+        let listItemPrefix = null;
+        if (node.name === 'li') {
+          const defaultStyle = opts.textComponentProps ? opts.textComponentProps.style : null;
+          const customStyle = inheritedStyle(parent);
+
+          if(!parent){
+            listItemPrefix = null;
+          } else if (parent.name === 'ol') {
+            listItemPrefix = (<TextComponent style={[defaultStyle, customStyle]}>
+              {`${orderedListCounter++}. `}
+            </TextComponent>);
+          } else if (parent.name === 'ul') {
+            listItemPrefix = (<TextComponent style={[defaultStyle, customStyle]}>
+              {opts.bullet}
+            </TextComponent>);
+          }
+          if (opts.addLineBreaks && index < list.length - 1) {
+            linebreakAfter = opts.lineBreak;
+          }
+        }
+
+        const {NodeComponent, styles} = opts;
+
+        return (
+          <NodeComponent
+            {...opts.nodeComponentProps}
+            key={index}
+            onPress={linkPressHandler}
+            style={!node.parent ? styles[node.name] : null}
+            onLongPress={linkLongPressHandler}
+          >
+            {linebreakBefore}
+            {listItemPrefix}
+            {domToElement(node.children, node)}
+            {linebreakAfter}
+          </NodeComponent>
+        );
+      }
+    });
+  }
+
+  const handler = new htmlparser.DomHandler(function(err, dom) {
+    if (err) done(err);
+    done(null, domToElement(dom));
+  });
+  const parser = new htmlparser.Parser(handler);
+  parser.write(rawHtml);
+  parser.done();
+}

package/src/components/Html/View.js

@@ -0,0 +1,166 @@
+/***@see : https://github.com/jsdf/react-native-htmlview */
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import htmlToElement from './htmlToElement';
+import {Linking, Platform, StyleSheet, View} from 'react-native';
+import {StyleProp} from "$theme";
+
+const boldStyle = {fontWeight: 'bold'};
+const italicStyle = {fontStyle: 'italic'};
+const underlineStyle = {textDecorationLine: 'underline'};
+const strikethroughStyle = {textDecorationLine: 'line-through'};
+const codeStyle = {fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace'};
+
+const baseStyles = StyleSheet.create({
+  b: boldStyle,
+  strong: boldStyle,
+  i: italicStyle,
+  em: italicStyle,
+  u: underlineStyle,
+  s: strikethroughStyle,
+  strike: strikethroughStyle,
+  pre: codeStyle,
+  code: codeStyle,
+  a: {
+    fontWeight: 'bold',
+    color: '#007AFF',
+  },
+  h1: {fontWeight: 'bold', fontSize: 36},
+  h2: {fontWeight: 'bold', fontSize: 30},
+  h3: {fontWeight: 'bold', fontSize: 24},
+  h4: {fontWeight: 'bold', fontSize: 18},
+  h5: {fontWeight: 'bold', fontSize: 14},
+  h6: {fontWeight: 'bold', fontSize: 12},
+});
+
+const htmlToElementOptKeys = [
+  'lineBreak',
+  'paragraphBreak',
+  'bullet',
+  'TextComponent',
+  'textComponentProps',
+  'NodeComponent',
+  'nodeComponentProps',
+];
+
+class HtmlView extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      element: null,
+    };
+  }
+
+  componentDidMount() {
+    this.mounted = true;
+    this.startHtmlRender(this.props.value);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.value !== prevProps.value || this.props.stylesheet !== prevProps.stylesheet || this.props.textComponentProps !== prevProps.textComponentProps || this.props.nodeComponentProps !== prevProps.nodeComponentProps) {
+      this.startHtmlRender(this.props.value, this.props.stylesheet, this.props.textComponentProps, this.props.nodeComponentProps);
+    }
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  startHtmlRender(value, style, textComponentProps, nodeComponentProps) {
+    const {
+      addLineBreaks,
+      onLinkPress,
+      onLinkLongPress,
+      stylesheet,
+      renderNode,
+      onError,
+    } = this.props;
+
+    if (!value) {
+      this.setState({element: null});
+    }
+
+    const opts = {
+      addLineBreaks,
+      linkHandler: onLinkPress,
+      linkLongPressHandler: onLinkLongPress,
+      styles: {...baseStyles, ...stylesheet, ...style},
+      customRenderer: renderNode,
+    };
+
+    htmlToElementOptKeys.forEach(key => {
+      if (typeof this.props[key] !== 'undefined') {
+        opts[key] = this.props[key];
+      }
+    });
+
+    if (textComponentProps) {
+      opts.textComponentProps = textComponentProps;
+    }
+
+    if (nodeComponentProps) {
+      opts.nodeComponentProps = nodeComponentProps;
+    }
+
+    htmlToElement(value, opts, (err, element) => {
+      if (err) {
+        onError(err);
+      }
+
+      if (this.mounted) {
+        this.setState({element});
+      }
+    });
+  }
+
+  render() {
+    const {RootComponent, style} = this.props;
+    const {element} = this.state;
+    if (element) {
+      return (
+        <RootComponent
+          {...this.props.rootComponentProps}
+          style={style}
+        >
+          {element}
+        </RootComponent>
+      );
+    }
+    return (
+      <RootComponent
+        {...this.props.rootComponentProps}
+        style={style}
+      />
+    );
+  }
+}
+
+HtmlView.propTypes = {
+  addLineBreaks: PropTypes.bool,
+  bullet: PropTypes.string,
+  lineBreak: PropTypes.string,
+  NodeComponent: PropTypes.func,
+  nodeComponentProps: PropTypes.object,
+  onError: PropTypes.func,
+  onLinkPress: PropTypes.func,
+  onLinkLongPress: PropTypes.func,
+  paragraphBreak: PropTypes.string,
+  renderNode: PropTypes.func,
+  RootComponent: PropTypes.func,
+  rootComponentProps: PropTypes.object,
+  style: StyleProp,
+  stylesheet: PropTypes.object,
+  TextComponent: PropTypes.func,
+  textComponentProps: PropTypes.object,
+  value: PropTypes.string,
+};
+
+HtmlView.defaultProps = {
+  addLineBreaks: true,
+  onLinkPress: url => Linking.openURL(url),
+  onLinkLongPress: null,
+  onError: console.error.bind(console),
+  RootComponent: element => <View {...element} />, // eslint-disable-line react/display-name
+};
+
+export default HtmlView;

package/src/components/Icon/Checkbox.js

@@ -0,0 +1,83 @@
+import {defaultObj,defaultStr} from "$utils";
+import PropTypes from "prop-types";
+import theme,{Colors} from "$theme";
+import {isIos} from "$cplatform";
+import React from "$react";
+import Icon from "./Icon";
+
+/****** icon de type checkbox variant en fonction de l'environnement ou la plateforme */
+const Checkbox = React.forwardRef((props,ref)=>{
+    const {checked:customChecked,color:customColor,primary,secondary,primaryOnCheck,secondaryOnCheck,onChange,checkedIcon:customCheckedIcon,uncheckedIcon:customUncheckedIcon,onPress,...rest} = props; 
+    const checkedIcon = defaultStr(checkedIcon,isIos()? 'check' : "checkbox-marked");
+    const uncheckedIcon = defaultStr(uncheckedIcon,"checkbox-blank-outline");
+    const [checked,setIsChecked] = React.useStateIfMounted(!!checked);
+    const isMounted = React.useIsMounted();
+    const prevChecked = React.usePrevious(checked);
+    const callOnChangeRef = React.useRef(true);
+    const callOnChange = callOnChangeRef.current;
+    callOnChangeRef.current = true;
+    React.useEffect(()=>{
+        if(customChecked === checked || !isMounted()) return;
+        setIsChecked(customChecked);
+    },[customChecked])
+    React.useEffect(()=>{
+        if(prevChecked === checked || !callOnChange) return;
+        if(onChange){
+            onChange({value:checked?1:0,checked});
+        }
+    },[checked])
+    const [context] = React.useStateIfMounted({
+        check : (callOnChange)=>{
+            if(!isMounted()) return;
+            if(typeof callOnChange =='boolean'){
+                callOnChangeRef.current = callOnChange;
+            }
+            setIsChecked(true);
+        }, uncheck : (callOnChange)=>{
+            if(!isMounted()) return;
+                        if(typeof callOnChange =='boolean'){
+                callOnChangeRef.current = callOnChange;
+            }
+            setIsChecked(false);
+        },checked,
+    });
+    context.checked = checked;
+    React.useEffect(()=>{
+        React.setRef(ref,context);
+        return ()=>{
+            React.setRef(null);
+        }
+    },[])
+    let color = Colors.isValid(customColor)? customColor : undefined;
+    if(checked){
+        color = secondaryOnCheck ? theme.colors.secondary : primaryOnCheck ? theme.colors.primary : undefined;
+    }
+    if(!color){
+        if(primary){
+            color = theme.colors.primary;
+        } else if(secondary){
+            color = theme.colors.secondary;
+        }
+    }
+    return <Icon 
+        {...defaultObj(rest)}
+        color = {color}
+        icon={checked?checkedIcon:uncheckedIcon}
+        onPress = {(e)=>{
+            if(onPress && onPress({event:e,checked}) === false) return;
+            setIsChecked(!checked)
+        }}
+    />
+});
+
+Checkbox.propTypes = {
+    ...Icon.propTypes,
+    primaryOnCheck : PropTypes.bool,
+    secondaryOnCheck : PropTypes.bool,
+    checked : PropTypes.bool, //si l'icon est checked,
+    onChange : PropTypes.func,
+}
+
+Checkbox.displayName = "Icon.CheckboxComponent";
+
+export default Checkbox;

package/src/components/Icon/CrossFadeIcon.js

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import Icon, { isValidIcon, isEqualIcon } from './Icon';
+import PropTypes from 'prop-types';
+import theme from "$theme";
+import {defaultStr,defaultObj} from "$utils";
+
+const CrossFadeIcon = ({ color,testID,containerProps,style, size, source}) => {
+  const [currentIcon, setCurrentIcon] = React.useState(
+    () => source
+  );
+  testID = defaultStr(testID,"RN_CrossFadeIconComponent");
+  const [previousIcon, setPreviousIcon] = React.useState(
+    null
+  );
+
+  const { current: fade } = React.useRef(new Animated.Value(1));
+
+  const { scale } = theme.animation;
+
+  if (currentIcon !== source) {
+    setPreviousIcon(() => currentIcon);
+    setCurrentIcon(() => source);
+  }
+
+  React.useEffect(() => {
+    if (isValidIcon(previousIcon) && !isEqualIcon(previousIcon, currentIcon)) {
+      fade.setValue(1);
+
+      Animated.timing(fade, {
+        duration: scale * 200,
+        toValue: 0,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [currentIcon, previousIcon, fade, scale]);
+
+  const opacityPrev = fade;
+  const opacityNext = previousIcon
+    ? fade.interpolate({
+        inputRange: [0, 1],
+        outputRange: [1, 0],
+      })
+    : 1;
+
+  const rotatePrev = fade.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['-90deg', '0deg'],
+  });
+  containerProps = defaultObj(containerProps);
+  const rotateNext = previousIcon
+    ? fade.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '-180deg'],
+      })
+    : '0deg';
+
+  return (
+    <View
+      testID={testID+"_Container"}
+      {...containerProps}
+      style={[
+        styles.content,
+        {
+          height: size,
+          width: size,
+        },
+        containerProps.style
+      ]}
+    >
+      {previousIcon ? (
+        <Animated.View
+          testID={testID+"_PrevIcon"}
+          style={[
+            styles.icon,
+            {
+              opacity: opacityPrev,
+              transform: [{ rotate: rotatePrev }],
+            },
+          ]}
+        >
+          <Icon testID={testID+"_Left"} source={previousIcon} size={size} color={color} />
+        </Animated.View>
+      ) : null}
+      <Animated.View
+        testID={testID+"_RightIcon"}
+        style={[
+          styles.icon,
+          {
+            opacity: opacityNext,
+            transform: [{ rotate: rotateNext }],
+          },
+        ]}
+      >
+        <Icon testID={testID+"_Right"} source={currentIcon} size={size} color={color} />
+      </Animated.View>
+    </View>
+  );
+};
+
+export default theme.withStyles(CrossFadeIcon,{displayName:"CrossFadeIconComponent",mode:'normal'});
+
+const styles = StyleSheet.create({
+  content: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
+
+CrossFadeIcon.propTypes = {
+    /**
+   * Icon to display for the `CrossFadeIcon`.
+   */
+  source: PropTypes.oneOfType([
+     PropTypes.string,
+     PropTypes.object,
+  ]),
+  /**
+   * Color of the icon.
+   */
+  color: PropTypes.string,
+  /**
+   * Size of the icon.
+   */
+  size: PropTypes.number,
+}

package/src/components/Icon/Icon.js

@@ -0,0 +1,52 @@
+//import MaterialIcon from "./MaterialCommunityIcon";
+import {defaultVal,defaultObj,defaultStr,isNonNullString} from "$utils";
+import PropTypes from "prop-types";
+import Tooltip from "$ecomponents/Tooltip";
+import theme,{flattenStyle,Colors} from "$theme";
+import React from "$react";
+import {IconButton} from "react-native-paper"
+
+const IconComponentRef = React.forwardRef((props,ref)=>{
+    let {icon,style,Component,button,color,name,...rest} = props;
+    icon = defaultVal(icon,name);
+    if(isNonNullString(icon)){
+        icon = icon.trim().ltrim("")
+    }
+    if(!icon && rest.source){
+        icon = rest.source;
+    }
+    if(icon){
+        rest.icon = icon;
+    }
+    if(!rest.icon) return null;
+    const flattenedStyle = flattenStyle(style);
+    return <Tooltip 
+        animated 
+        {...rest}  
+        color={Colors.isValid(color) ? color : Colors.isValid(flattenedStyle.color)? flattenedStyle.color : theme.colors.text} 
+        style = {[flattenedStyle,button === false ? {borderRadius:0}:null]}
+        Component={React.isComponent(Component)?Component:IconButton}
+        ref = {ref}
+    />
+});
+const IconComponent = theme.withStyles(IconComponentRef,{mode : 'normal'});
+IconComponent.propTypes = {
+    ...defaultObj(IconButton.propTypes),
+    name : defaultVal(IconButton.propTypes,PropTypes.string),
+    button : PropTypes.bool, //si c'est un icon button
+}
+
+IconComponent.displayName = "IconComponent";
+
+export default IconComponent;
+
+IconComponent.Avatar = React.forwardRef(({...props},ref)=>{
+    return <IconComponent
+        Component = {IconButton}
+        {...props}
+    />
+})
+IconComponent.Avatar.displayName = "IconComponent.Avatar";
+IconComponent.Avatar.propTypes = {
+    ...IconComponent.propTypes,
+}