npm - @fto-consult/expo-ui - Versions diffs - 1.0.4 - Mend

@fto-consult/expo-ui 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (629) hide show

package/src/components/Chart/index.js ADDED Viewed

@@ -0,0 +1,22 @@
+import FileSystem from "$file-system";
+import ApexCharts from 'apexcharts'
+import ReactApexChart from 'react-apexcharts';
+import React from "$react";
+import {defaultStr,uniqid,defaultObj} from "$utils";
+import View from "$ecomponents/View";
+export const ChartComponent = React.forwardRef(({options,data,containerProps,containerId,...props},ref)=>{
+    const elementIdRef = React.useRef(defaultStr(containerId,uniqid("chart-container-id")))
+    const elementId = elementIdRef.current;
+    const containerRef = React.useRef(null);
+    const cId = elementId+"-container";
+    containerProps = defaultObj(containerProps);
+    return <View autoHeight  ref={containerRef} testID="RNComponentCharContainerTestID" {...containerProps} style={[{flex:1,paddingBottom:10},containerProps.style]} >
+        <ReactApexChart height={300} data={data} {...props} {...options} options={options}/>
+    </View>
+});
+ChartComponent.displayName = "ChartComponent";
+export default ChartComponent;

package/src/components/Chart/index.native.js ADDED Viewed

@@ -0,0 +1,61 @@
+import FileSystem from "$file-system";
+import appexChartCode from "./appexchart.3.5.js.text";
+import React from "$react";
+import WebView from "$ecomponents/WebView";
+import HTMLView from '$ecomponents/Html/View';
+import {defaultStr,uniqid} from "$utils";
+import View from "$ecomponents/View";
+let appexchartJSString = null;
+export const ChartComponent = React.forwardRef(({options,containerId,...props},ref)=>{
+    const containerIdRef = React.useRef(defaultStr(containerId,uniqid("chart-container-id")))
+    const appexChartJS = appexchartJSString? (appexchartJSString+"\n"):"";
+    const optsJSON = JSON.stringify(options);
+    const elementId = containerIdRef.current;
+    const htmlContent = `
+        <!DOCTYPE html>
+        <html>
+        <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <script type='text/javascript'>
+            ${appexChartJS}
+        </script>
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, maximum-scale=1"
+        />
+            <body>
+                <div id="${elementId}"/>
+                <script type='text/javascript'>
+                    const options = ${optsJSON};
+                    var element = document.getElementById("#${elementId}");
+                    if(!element){
+                        element = document.createElement("div");
+                        document.body.appendChild(element);
+                    }
+                    element.id = "${elementId}";
+                    const chart = new ApexCharts(element, options);
+                    chart.render();
+                </script>
+            </body>
+        </html>
+    `;
+    return <View style={{flex:1}}>
+        <WebView.Html
+            html = {htmlContent}
+        >
+        </WebView.Html>
+    </View>
+});
+ChartComponent.displayName = "ChartComponent";
+FileSystem.readFile(appexChartCode).then(code=>{
+    appexchartJSString = code;
+});
+export default ChartComponent;

package/src/components/Chart/utils.js ADDED Viewed

File without changes

package/src/components/Checkbox/index.js ADDED Viewed

@@ -0,0 +1,178 @@
+import { Checkbox } 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 CheckboxComponent = 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,
+        stopEventPropagation,
+        testID,
+        uncheckedColor,
+        ...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;
+   const changeEventRef = React.useRef(null);
+   React.useEffect(()=>{
+        if(previousStatus !== status){
+            if(typeof onChange =='function'){
+               onChange({event:changeEventRef.current,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)? (theme.isDark()?theme.colors.text : p.color) : theme.colors.primaryOnSurface;
+   if(primaryOnCheck ===true && status ==checkedStatus){
+       cColor = theme.colors.primaryOnSurface;
+   } else if(secondaryOnCheck ===true && status === checkedStatus){
+       cColor = theme.colors.secondaryOnSurface;
+   }
+   uncheckedColor = Colors.isValid(uncheckedColor)? uncheckedColor : theme.colors.text;
+   const disabledStyle = disabled ? {opacity : DISABLED_OPACITY} : undefined;
+   testID = defaultStr(testID,"RN_CheckboxComponent");
+   return <View testID={testID+"_Container"} {...containerProps} style={[containerProps.style,disabledStyle]} pointerEvents={pointerEvents}>
+        <Tooltip
+            Component = {Checkbox.Item}
+            {...p}
+            testID = {testID}
+            disabled = {disabled}
+            editable = {isEditable}
+            pointerEvents = {pointerEvents}
+            style = {[styles.checkbox,style]}
+            position = {position}
+            status = {status}
+            color = {cColor}
+            theme = {theme}
+            uncheckedColor = {uncheckedColor}
+            labelStyle = {[styles.label,{color:theme.colors.text},labelStyle,lStyle,disabledStyle]}
+            onPress={!isEditable ? undefined : (e)=>{
+                changeEventRef.current = e;
+                changeEventRef.current.pressed = true;
+                if(stopEventPropagation !== false){
+                    React.stopEventPropagation(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 testID = {testID+"_HelperText" }error={error} disabled={!isEditable}>{helperText}</HelperText>}
+    </View>
+});
+CheckboxComponent.propTypes = {
+    ...defaultObj(Checkbox.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 CheckboxComponent;
+CheckboxComponent.displayName = "CheckboxComponent";

package/src/components/Chip/index.js ADDED Viewed

@@ -0,0 +1,350 @@
+import React from '$react';
+import View from "$ecomponents/View";
+import {
+  Animated,
+  Platform,
+  StyleSheet,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import Icon from "$ecomponents/Icon";
+import {Text,TouchableRipple } from 'react-native-paper';
+import theme,{ black,Colors, white,StyleProps} from '$theme';
+import PropTypes from "prop-types";
+import {flatMode } from '$ecomponents/TextField/utils';
+import {defaultStr} from "$utils";
+import Surface from "$ecomponents/Surface";
+const ChipComponent = React.forwardRef(({
+  mode = flatMode,
+  children,
+  icon,
+  avatar,
+  selected = false,
+  disabled = false,
+  accessibilityLabel,
+  closeIconAccessibilityLabel = 'Close',
+  onPress,
+  onLongPress,
+  onClose,
+  closeIcon,
+  textStyle,
+  style,
+  testID,
+  selectedColor,
+  ellipsizeMode,
+  ...rest
+},ref) => {
+  testID =defaultStr(testID,"RN_ChipComponent");
+  const { current: elevation } = React.useRef(
+    new Animated.Value(0)
+  );
+  const handlePressIn = () => {
+    const { scale } = theme.animation;
+    Animated.timing(elevation, {
+      toValue: 4,
+      duration: 200 * scale,
+      useNativeDriver: true,
+    }).start();
+  };
+  const handlePressOut = () => {
+    const { scale } = theme.animation;
+    Animated.timing(elevation, {
+      toValue: 0,
+      duration: 150 * scale,
+      useNativeDriver: true,
+    }).start();
+  };
+  const dark = theme.isDark();
+  const defaultBackgroundColor =
+    mode === 'outlined' ? theme.colors.surface : dark ? '#383838' : '#ebebeb';
+  style = Object.assign({},StyleSheet.flatten(style));
+  const { backgroundColor = defaultBackgroundColor, borderRadius = 16,color:customColor} = style;
+  const borderColor =
+    mode === 'outlined'? (selectedColor !== undefined ? selectedColor : Colors.setAlpha(dark ? white : black,0.29)) : backgroundColor;
+  const textColor = Colors.isValid(customColor)?customColor
+    : Colors.setAlpha(selectedColor !== undefined ? selectedColor : colors.text,0.87);
+  const iconColor =  Colors.setAlpha(textColor,theme.ALPHA);
+  const backgroundColorString = typeof backgroundColor === 'string' ? backgroundColor : defaultBackgroundColor;
+  const selectedBackgroundColor = ( dark ? Colors.lighten(backgroundColorString,mode === 'outlined' ? 0.2 : 0.4)
+      : Colors.darken(backgroundColorString,mode === 'outlined' ? 0.08 : 0.2)
+  )
+  const underlayColor = selectedColor ? Colors.setAlpha(selectedColor,theme.ALPHA) : selectedBackgroundColor;
+  const accessibilityTraits = ['button'];
+  const accessibilityState = {
+    selected,
+    disabled,
+  };
+  if (selected) {
+    accessibilityTraits.push('selected');
+  }
+  if (disabled) {
+    accessibilityTraits.push('disabled');
+  }
+  const onChipClose = (e)=>{
+    React.stopEventPropagation(e);
+    if(onClose){
+      onClose(e);
+    }
+  }
+  return (
+    <Surface
+      ref = {ref}
+      elevation= {typeof elevation =='number'? elevation : 0}
+      style={
+        [
+          styles.container,
+          {
+            backgroundColor: selected
+              ? selectedBackgroundColor
+              : backgroundColor,
+            borderColor,
+            borderRadius,
+          },
+          style,
+        ]
+      }
+      {...rest}
+      testID = {testID}
+    >
+      <TouchableRipple
+        borderless
+        delayPressIn={0}
+        style={[{ borderRadius }, styles.touchable]}
+        onPress={onPress}
+        onLongPress={onLongPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        underlayColor={underlayColor}
+        disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
+        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
+        accessibilityTraits={accessibilityTraits}
+        accessibilityComponentType="button"
+        accessibilityRole="button"
+        accessibilityState={accessibilityState}
+        testID={testID+"_Container"}
+      >
+        <View testID={testID+"_ContentContainer"} style={[styles.content, { paddingRight: onClose ? 32 : 4 }]}>
+          {avatar && !icon ? (
+            <View testID={testID+"_AvatarContainer"} style={[styles.avatarWrapper, disabled && { opacity: 0.26 }]}>
+              {React.isValidElement(avatar)
+                ? React.cloneElement(avatar, {
+                    style: [styles.avatar, avatar.props.style],
+                  })
+                : avatar}
+            </View>
+          ) : null}
+          {icon || selected ? (
+            <View
+              style={[
+                styles.icon,
+                avatar ? [styles.avatar, styles.avatarSelected] : null,
+              ]}
+              testID={testID+"_IconContainer"}
+            >
+              {icon ? (
+                <Icon
+                  source={icon}
+                  color={avatar ? white : iconColor}
+                  size={18}
+                  testID={testID+"_CloseIcon"}
+                />
+              ) : (
+                <Icon
+                  name="check"
+                  color={avatar ? white : iconColor}
+                  size={18}
+                  testID={testID+"_Icon"}
+                  direction="ltr"
+                />
+              )}
+            </View>
+          ) : null}
+          <Text
+            selectable={false}
+            numberOfLines={1}
+            testID={testID+"_Text"}
+            style={[
+              styles.text,
+              {
+                ...theme.fonts.regular,
+                color: textColor,
+                marginHorizontal : 4,
+                marginLeft: avatar || icon || selected ? 4 : 8,
+              },
+              textStyle,
+            ]}
+            ellipsizeMode={ellipsizeMode}
+          >
+            {children}
+          </Text>
+        </View>
+      </TouchableRipple>
+      {onClose ? (
+        <View style={styles.closeButtonStyle} testID={testID+"_CloseButtonContainer"}>
+          <TouchableWithoutFeedback
+            onPress={onPress}
+            // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
+            accessibilityTraits="button"
+            accessibilityComponentType="button"
+            accessibilityRole="button"
+            accessibilityLabel={closeIconAccessibilityLabel}
+            testID={testID+"_CloseButtonRipple"}
+          >
+            <View testID={testID+"_ContentContainer"} style={[styles.icon, styles.closeIcon]}>
+              {closeIcon ? (
+                <Icon testID={testID+"_CloseButtonCloseIcon"} source={closeIcon} onPress = {onChipClose} color={iconColor} size={16} />
+              ) : (
+                <Icon
+                  name="close-circle"
+                  size={16}
+                  color={iconColor}
+                  onPress = {onChipClose}
+                  testID={testID+"_CloseButtonChip"}
+                />
+              )}
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
+      ) : null}
+    </Surface>
+  );
+});
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderStyle: 'solid',
+    flexDirection: Platform.select({ default: 'column', web: 'row' }),
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 4,
+    position: 'relative',
+    flexGrow: 1,
+  },
+  icon: {
+    padding: 4,
+    alignSelf: 'center',
+  },
+  closeIcon: {
+    marginRight: 4,
+  },
+  text: {
+    minHeight: 24,
+    lineHeight: 24,
+    textAlignVertical: 'center',
+    marginVertical: 4,
+  },
+  avatar: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+  },
+  avatarWrapper: {
+    marginRight: 4,
+  },
+  avatarSelected: {
+    position: 'absolute',
+    top: 4,
+    left: 4,
+    backgroundColor: 'rgba(0, 0, 0, .29)',
+  },
+  closeButtonStyle: {
+    position: 'absolute',
+    right: 0,
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  touchable: {
+    flexGrow: 1,
+  },
+});
+export default ChipComponent;
+ChipComponent.propTypes = {
+    /**
+     * Mode of the chip.
+     * - `flat` - flat chip without outline.
+     * - `outlined` - chip with an outline.
+     */
+    mode : PropTypes.oneOf(['flat','outlined']),
+    /**
+     * Text content of the `Chip`.
+     */
+    children: PropTypes.node,
+    /**
+     * Icon to display for the `Chip`. Both icon and avatar cannot be specified.
+     */
+    icon: PropTypes.shape({...Icon.propTypes}),
+    /**
+     * Avatar to display for the `Chip`. Both icon and avatar cannot be specified.
+     */
+    avatar: PropTypes.node,
+    /**
+     * Icon to display as the close button for the `Chip`. The icon appears only when the onClose prop is specified.
+     */
+    closeIcon: PropTypes.shape({...Icon.propTypes}),
+    /**
+     * Whether chip is selected.
+     */
+    selected: PropTypes.bool,
+    /**
+     * Whether to style the chip color as selected.
+     */
+    selectedColor: PropTypes.string,
+    /**
+     * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Accessibility label for the chip. This is read by the screen reader when the user taps the chip.
+     */
+    accessibilityLabel: PropTypes.string,
+    /**
+     * Accessibility label for the close icon. This is read by the screen reader when the user taps the close icon.
+     */
+    closeIconAccessibilityLabel: PropTypes.string,
+    /**
+     * Function to execute on press.
+     */
+    onPress: PropTypes.func,
+    /**
+     * Function to execute on long press.
+     */
+    onLongPress: PropTypes.func,
+    /**
+     * Function to execute on close button press. The close button appears only when this prop is specified.
+     */
+    onClose: PropTypes.func,
+    /**
+     * Style of chip's text
+     */
+    textStyle: StyleProps,
+    style: StyleProps,
+    /**
+     * @optional
+     */
+    theme: PropTypes.object,
+    /**
+     * Pass down testID from chip props to touchable for Detox tests.
+     */
+    testID: PropTypes.string,
+    /**
+     * Ellipsize Mode for the children text
+     */
+    ellipsizeMode: PropTypes.object,
+  };