@fto-consult/expo-ui 1.0.4

package/src/components/Datagrid/getComponent.js

@@ -0,0 +1,26 @@
+import Table from "./Table";
+import Accordion,{ TableDatagrid as TableDataAccordion} from "./Accordion";
+import {get} from "./Common/session";
+import {defaultStr} from "$utils";
+let Virtual = null;
+let Datatable = Table;
+let FixedTable = null;
+export default function getComponent(props){
+    props = isObj(props) ? props : {};
+    let renderType = defaultStr(get("render-type"),APP.isDesktopMedia()? "fixed":'accordion').trim().toLowerCase()
+    let isDesktop = APP.isDesktopMedia();
+    if(isDesktop){
+        FixedTable = require("./FixedTable");
+        Virtual = require("./renderVirtual");
+        if(renderType =="fixed"){
+            return FixedTable;
+        }
+        if(renderType == 'virtual'){
+            return Virtual;
+        } 
+    }
+    if(renderType == 'accordion' && (isFunction(props.accordion) || props.accordion === true)){
+        return Accordion;
+    }
+    return Table;
+}

package/src/components/Datagrid/index.js

@@ -0,0 +1,43 @@
+import Accordion,{ TableData as TableDataAccordion} from "./Accordion";
+import Table,{TableData as DatagridTableData} from "./Table";
+import {isDesktopMedia,isMobileMedia} from "$cplatform/dimensions";
+import {isFunction} from "$utils";
+import React from "$react";
+import {getRenderType} from "./utils";
+
+export * from "./Common";
+
+
+const DatagridMainComponent = React.forwardRef((props,ref)=>{
+    const isDesk = isDesktopMedia();
+    const isMob = isMobileMedia();
+    const [isTableData] = React.useStateIfMounted(defaultStr(props.tableName,props.table) || typeof props.fetchData ==='function' || props.isTableData?true : false);
+    const TableComponent = isTableData ? DatagridTableData : Table;
+    const AccordionComponent = isTableData ? TableDataAccordion : Accordion;
+    let Component = TableComponent;
+    const canRenderAccordion = (isFunction(props.accordion) || (isObj(props.accordionProps) && isFunction(props.accordionProps.accordion)) || props.accordion === true);
+    let renderType = defaultStr(getRenderType(),isDesk? "fixed":'accordion').trim().toLowerCase()
+    if(renderType == 'accordion' && canRenderAccordion){
+        Component = AccordionComponent;
+    } else if(renderType =='table'){
+        Component = TableComponent;
+    } else if(isMob && canRenderAccordion){
+        Component = AccordionComponent;
+    }
+    return <Component
+        {...props}
+        ref = {ref}
+    />;
+});
+
+export default DatagridMainComponent;
+
+DatagridMainComponent.displayName = "DatagridMainComponent";
+
+DatagridMainComponent.propTypes = {
+    ...DatagridTableData.propTypes
+}
+
+DatagridMainComponent.getDBName = DatagridTableData.getDBName;
+
+DatagridMainComponent.LinesProgressBar = DatagridMainComponent.LineProgressBar = DatagridTableData.LineProgressBar;

package/src/components/Datagrid/utils.js

@@ -0,0 +1,185 @@
+import theme,{LINE_HEIGHT} from "$theme";
+import { StyleSheet } from "react-native";
+import {get as getSession} from "./Common/session";
+
+export const getRenderType = ()=>getSession("render-type");
+
+export const COLUMN_WIDTH = 75;
+
+export const ROW_SELECTED_BACKGROUND_COLOR = "#e2e2e2e0";
+
+export const ROW_EVEN_BACKGROUND_COLOR = undefined;
+
+export const ROW_ODD_BACKGROUND_COLOR = "rgba(0, 0, 0, 0.01)";
+
+export const ROW_ODD_BACKGROUND_DARKEN_COLOR = "rgba(245, 245, 245, 0.01)"
+
+export const PAID_COLOR = '#4caf50';
+
+export const PAID_TEXT_COLOR = "white";
+
+export const ARCHIVED_COLOR = "#ffc107";
+
+export const APPROVED_COLOR = '#ce04a3';
+
+export const IMPUTED_COLOR = "#943542";
+
+export const IMPUTED_TEXT_COLOR = "white";
+
+export const ROW_BORDER_COLOR = "#ced4da";
+
+export const ROW_BORDER_WIDTH = 1;
+
+export const SELECTABLE_COLUMN_WIDTH = 30;
+
+const MARGIN_VERTICAL = 10, MARGIN_HORIZONTAL = 1;
+
+export const getPaidBackgroundStyle = (rowData)=>{
+    let paid = 0;
+    if(isObj(rowData)){
+        if(typeof rowData.paid =='number' || typeof rowData.paid =='boolean'){
+            paid = rowData.paid
+        } else {
+            if(isObj(rowData.rowData)){
+                paid = rowData.rowData.paid;
+            } else if(isObj(rowData.row)){
+                paid = rowData.row.paid;
+            } else if(isObj(rowData.data)){
+                paid = rowData.data.paid;
+            }
+        }
+    }
+    if(paid){
+        return styles.paidBackground;
+    }
+    return null;
+}
+
+export const getImputedBackgroundStyle = (rowData)=>{
+    let paid = 0;
+    if(isObj(rowData)){
+        rowData = defaultObj(rowData.rowData,rowData.row,rowData.data);
+    }
+    return null;
+}
+
+
+export const ROW_APPROVED_STYLE = {
+    borderRightColor : APPROVED_COLOR,
+    borderRightWidth : 4,
+    marginRight : MARGIN_HORIZONTAL
+}
+
+export const ROW_ARCHIVED_STYLE = {
+    borderBottomColor : ARCHIVED_COLOR,
+    borderBottomWidth :4,
+    //marginBottom : MARGIN_VERTICAL,
+}
+
+export const ROW_PAID_STYLE = {
+    borderLeftColor : PAID_COLOR,
+    borderLeftWidth : 5,
+    marginLeft : MARGIN_HORIZONTAL
+}
+
+export const ROW_IMPUTED_STYLE = {
+    borderLeftColor : IMPUTED_COLOR,
+    borderLeftWidth : 5,
+    marginLeft : MARGIN_HORIZONTAL
+}
+
+export const ROW_ODD_STYLE = {
+    backgroundColor : ROW_ODD_BACKGROUND_COLOR,
+}
+
+export const ROW_EVEN_STYLE = {
+    backgroundColor : ROW_EVEN_BACKGROUND_COLOR
+}
+
+export const ROW_SELECTED_STYLE = {
+    backgroundColor : ROW_SELECTED_BACKGROUND_COLOR
+}
+
+export const ROW_BORDER_STYLE = {
+    marginHorizontal : 0,
+    marginVertical : 0,
+    borderLeftColor : ROW_BORDER_COLOR,
+    borderLeftWidth : 0,
+    borderBottomColor : ROW_BORDER_COLOR,
+    borderBottomWidth : ROW_BORDER_WIDTH,
+    borderRightColor : ROW_BORDER_COLOR,
+    borderRightWidth : 0,
+    borderTopColor : ROW_BORDER_COLOR,
+    borderTopWidth : 0,
+}
+
+
+export const DATE_COLUMN_WIDTH = 180;
+
+export {LINE_HEIGHT}
+
+export const styles = StyleSheet.create({
+    approved : ROW_APPROVED_STYLE,
+    archived : ROW_ARCHIVED_STYLE,
+    selected : ROW_SELECTED_STYLE,
+    paid : ROW_PAID_STYLE,
+    imputed : ROW_IMPUTED_STYLE,
+    paidBackground : {
+        backgroundColor : PAID_COLOR,
+        color : PAID_TEXT_COLOR,
+        padding : 5,
+    },
+    imputedBackground : {
+        backgroundColor : IMPUTED_COLOR,
+        color : IMPUTED_TEXT_COLOR,
+        padding : 5,
+    },
+    border : ROW_BORDER_STYLE,
+    even : ROW_EVEN_STYLE,
+    odd : ROW_ODD_STYLE,
+    oddDark : {
+        ...ROW_ODD_STYLE,
+        backgroundColor : ROW_ODD_BACKGROUND_DARKEN_COLOR,
+    },
+    lineHeight : {lineHeight:LINE_HEIGHT},
+    noHorizontalBorder: {
+        marginLeft : 0,
+        borderLeftWidth : 0,
+    },
+})
+
+
+/**
+ * 
+ * @param {*} props 
+ * @returns 
+ */
+export const getRowStyle = ({row,bordered,numColumns,rowData,isAccordion,isTable,index,paid,archived,approved,rowIndex,selected})=>{
+    rowIndex = typeof rowIndex =='number'? rowIndex : typeof index =='number'? index : undefined;
+    numColumns = typeof numColumns =="number"? numColumns : 0;
+    row = typeof row =='object'? row && row : typeof rowData =='object' && rowData ? rowData : {};
+    const borderWidth = numColumns > 1? 1 : 0;
+    const style = [bordered !== false ? [styles.border,{borderLeftWidth:borderWidth,borderTopWidth:borderWidth,borderRightWidth:borderWidth}]: undefined,theme.styles.p05,theme.styles.mv05];
+    if(rowIndex ===0){
+        style.push({borderTopWidth:ROW_BORDER_WIDTH})
+    }
+    if(rowIndex !== undefined){
+        style.push(rowIndex%2===0?styles.even : theme.isDark()?styles.oddDark : styles.odd)
+    }
+    if(selected){
+        style.push(styles.selected,{borderBottomWidth:1,borderBottomColor:theme.colors.primary})
+    }
+    if(paid || row.paid){
+        style.push(styles.paid);
+    }
+    if(approved || row.approved){
+        style.push(styles.approved)
+    }
+    if(archived || row.archived){
+        style.push(styles.archived);
+    }
+    if(!isAccordion){
+        style.push(styles.noHorizontalBorder);
+    }
+    return style;
+}

package/src/components/Date/DatePickerModal/index.js

@@ -0,0 +1,10 @@
+import  "../utils";
+import {DatePickerModal} from 'react-native-paper-dates'
+import {Provider} from 'react-native-paper';
+import theme from "$theme";
+
+export default function DatePickerModalComponent(props){
+    return <Provider theme={theme}>
+        <DatePickerModal {...props}/>
+    </Provider>
+}

package/src/components/Date/DatePickerModal/index.native.js

@@ -0,0 +1,22 @@
+import  "../utils";
+import DateTimePicker from '@react-native-community/datetimepicker';
+import DateLib from "$lib/date";
+export default function DateTimePickerComponent(props){
+    const {visible,date,onDateChange,startDate,endDate,onCancel} = props;
+    const value = DateLib.isDateObj(date)?date:new Date();
+    return visible? <DateTimePicker
+        value = {value}
+        mode = {"date"}
+        minimumDate = {startDate}
+        maximumDate = {endDate}
+        onChange = {(e,selectedDate)=>{
+            if(!selectedDate){
+                if(typeof onCancel ==='function'){
+                    onCancel((date?value:undefined))
+                }
+                return;
+            }
+            onDateChange(selectedDate);
+        }}
+    /> : null;
+}

package/src/components/Date/PickerInput/TextInputMask.js

@@ -0,0 +1,106 @@
+import * as React from 'react'
+import { TextInput } from 'react-native'
+
+const splitCharacters = ['-', '/', '.', '年', ' ']
+function detectCharacter(mask) {
+  const c = splitCharacters.find((ch) => mask.includes(ch))
+  return c || ''
+}
+
+function enhanceTextWithMask(
+  text,
+  mask,
+  previousValue
+) {
+  const isBackSpace = previousValue.length > text.length
+  const splitCharacter = detectCharacter(mask)
+
+  const maskParts = mask.split(splitCharacter)
+  const textParts = text.split(splitCharacter)
+
+  let finalString = []
+  for (let maskPartIndex = 0; maskPartIndex < mask.length; maskPartIndex++) {
+    let partString = []
+
+    const maskPart = maskParts[maskPartIndex]
+    const textPart = textParts[maskPartIndex]
+    if (!textPart) {
+      continue
+    }
+
+    for (
+      let maskDigitIndex = 0;
+      maskDigitIndex < maskPart.length;
+      maskDigitIndex++
+    ) {
+      const currentCharacter = textPart[maskDigitIndex]
+
+      if (isBackSpace && currentCharacter === undefined) {
+        continue
+      }
+
+      const character = textPart[maskDigitIndex]
+
+      if (character !== undefined) {
+        partString.push(character)
+      }
+    }
+
+    finalString.push(partString.join(''))
+  }
+
+  const lastPart = finalString[finalString.length - 1]
+  const lastMaskPart = maskParts[finalString.length - 1]
+  if (
+    // if mask is completed
+    finalString.length !== maskParts.length &&
+    // or ...
+    lastPart &&
+    lastMaskPart &&
+    lastPart.length === lastMaskPart.length
+  ) {
+    return (
+      finalString.join(splitCharacter) + (isBackSpace ? '' : splitCharacter)
+    )
+  }
+  return finalString.join(splitCharacter)
+}
+
+function TextInputWithMask({
+    onChangeText,
+    value,
+    mask,
+    ...rest
+  },
+  ref
+) {
+  const [controlledValue, setControlledValue] = React.useState(
+    value || ''
+  )
+
+  const onInnerChange = (text) => {
+    const enhancedText = enhanceTextWithMask(text, mask, controlledValue)
+    setControlledValue(enhancedText)
+
+    if (text.length === mask.length || !text) {
+      onChangeText && onChangeText(text)
+    }
+  }
+
+  React.useEffect(() => {
+    setControlledValue(value || '')
+  }, [value])
+
+  return (
+    <TextInput
+      ref={ref}
+      {...rest}
+      value={controlledValue}
+      onChangeText={onInnerChange}
+    />
+  )
+}
+
+const TextInputWithMaskComponent = React.forwardRef(TextInputWithMask);
+export default TextInputWithMaskComponent;
+TextInputWithMaskComponent.displayName = "React.forwardRef(TextInputWithMask)";

package/src/components/Date/PickerInput/index.js

@@ -0,0 +1,253 @@
+import * as React from 'react'
+
+import {useInputFormat,compareTwoDates,locale as defaultLocale,toDateObj} from "../utils";
+import TextInputWithMask from './TextInputMask'
+import {useTheme } from 'react-native-paper'
+import i18n from "$i18n";
+import {defaultStr} from "$utils";
+import DateLib from "$lib/date";
+import PropTypes from "prop-types";
+import TextField from "$ecomponents/TextField";
+import Icon from "$ecomponents/Icon";
+import {StyleSheet,View} from "react-native";
+import DatePickerModal from '../DatePickerModal'
+
+const validMinDate = (date,minDate)=>{
+   if(!minDate || !date) return true;
+   return date.withoutTime() >= minDate.withoutTime();
+}
+const validMaxDate = (date,maxDate)=>{
+  if(!maxDate || !date) return true;
+  return maxDate.withoutTime() >= date.withoutTime();
+}
+const DatePickerInput = React.forwardRef(({
+    label,
+    defaultValue,
+    onChange,
+    locale,
+    inputMode,
+    errorText,
+    minimumDate,
+    minDate,
+    maxDate,
+    maximumDate,
+    withModal = true,
+    withDateFormatInLabel = true,
+    right:customRight,
+    helperText,
+    format,
+    disabled,readOnly,editable
+    ,text,
+    withLabel,
+    style,
+    anchorProps,
+    render_filter,
+    ...rest
+  },ref)=>{
+  inputMode = defaultStr(inputMode,"start");
+  locale = defaultStr(locale,defaultLocale);
+  const theme = useTheme()
+  const [state,setState] = React.useStateIfMounted({
+    errorText : null,
+    inputDate : toDateObj(defaultValue,format),
+    visible : false
+  })
+  const inputFormat = useInputFormat(locale)
+  const prevInputDate = React.usePrevious(state.inputDate,compareTwoDates)
+  const formattedValue = !state.inputDate ? undefined : DateLib.format(state.inputDate,inputFormat.toLowerCase());
+  const onDismiss = () => {
+    setState({...state,visible:false});
+  }
+
+  minDate = defaultVal(minDate,minimumDate);
+  maxDate = defaultVal(maxDate,maximumDate);
+  if(maxDate){
+     maxDate = toDateObj(maxDate);
+     maxDate = maxDate && DateLib.isDateObj(maxDate)? maxDate : undefined;
+  }
+  if(minDate){
+     minDate = toDateObj(minDate);
+      minDate = minDate && DateLib.isDateObj(minDate)? minDate : undefined;
+  }
+  
+
+  const isEditable = disabled !== true && readOnly !== true && editable !== false?true : false;
+  withModal = defaultBool(withModal,true);
+  if(!isEditable){
+      withModal = false;
+  }
+  const validateDate = (date)=>{
+    let errorText = null,error = false;
+    let lowerInput = inputFormat.toLowerCase();
+    const dFormat = DateLib.format(date,lowerInput);
+    if(!validMinDate(date,minDate)){
+       errorText = "la date ["+dFormat+"] doit être plus récente que la date minimale ["+DateLib.format(minDate,lowerInput)+"]";
+       error = true;
+    }
+    if(!validMaxDate(date,maxDate)){
+        errorText = "la date ["+dFormat+"] doit être moins ancienne que la date maximale ["+DateLib.format(maxDate,lowerInput)+"]";
+        error = true;
+    }
+    return {error,errorText};
+  }
+  React.useEffect(()=>{
+    const inputDate = toDateObj(defaultValue);
+    if(compareTwoDates(inputDate,prevInputDate)) return;
+    setState({...state,inputDate});
+  },[defaultValue])
+  const setEmptyValue = ()=>{
+    setState({...state,inputDate:undefined});
+  }
+ 
+
+    rest = defaultObj(rest);
+  anchorProps = defaultObj(anchorProps);
+  label = defaultStr(label,text);
+  customRight = React.isValidElement(customRight) || typeof customRight =='function'? customRight : null;
+  let right = null;
+  if(withModal){
+      right = (props)=>{
+        return <>
+            <Icon
+            {...anchorProps}
+            {...props}
+            icon="calendar"
+            style = {[anchorProps.style,right?styles.noPadding:null,props.style]}
+            onPress={() => {
+              setState({...state,visible:true});
+            }}
+            hasTVPreferredFocus={undefined}
+            tvParallaxProperties={undefined}
+          />
+          {typeof customRight =='function'? customRight(props): customRight}
+        </>
+      }
+  } else right = customRight;
+  const onConfirm = (date,updateVisibility) => {
+    const vDate = validateDate(date);
+    const inputDate = !vDate.error ? date : state.inputDate;
+    let visible = state.visible;
+    if(updateVisibility !== false){
+        visible = false;
+    }
+    setState(({...state,visible,inputDate,errorText:vDate.errorText}));
+ }
+  const hasError = errorText || state.errorText ? true : false;
+  React.useEffect(()=>{
+    if(compareTwoDates(state.inputDate,prevInputDate) || state.errorText) return;
+    if(onChange){
+        const date = state.inputDate ? DateLib.toSQLDate(state.inputDate): undefined;
+        onChange({dateObject:state.inputDate,date,sqlDate:date,value:date})
+    }
+  },[state])
+  const labelText = render_filter ? label : withLabel!==false ? getLabel({ label, inputFormat, withDateFormatInLabel }):"";
+  return (
+    <>
+        <TextField
+          affix = {false}
+          {...rest}
+          style = {[styles.input,style]}
+          editable = {editable}
+          disabled = {disabled}
+          right = {right}
+          pointerEvents = {isEditable?"auto":"none"}
+          ref={ref}
+          label={labelText}
+          defaultValue={formattedValue}
+          keyboardType={'number-pad'}
+          placeholder={inputFormat}
+          mask={inputFormat}
+          keyboardAppearance={theme.dark ? 'dark' : 'default'}
+          error={hasError}
+          helperText = {state.errorText || errorText}
+          render = {(inputProps)=>{
+              return <TextInputWithMask
+                {...inputProps}
+                locale = {locale}
+                value = {formattedValue}
+                style = {[inputProps.style,styles.input,style]}
+                onChangeText={(date) => {
+                  if(!date){
+                    return setEmptyValue();
+                  }
+                  const dayIndex = inputFormat.indexOf('DD')
+                  const monthIndex = inputFormat.indexOf('MM')
+                  const yearIndex = inputFormat.indexOf('YYYY')
+              
+                  const day = Number(date.slice(dayIndex, dayIndex + 2))
+                  const year = Number(date.slice(yearIndex, yearIndex + 4))
+                  const month = Number(date.slice(monthIndex, monthIndex + 2))
+              
+                  if (Number.isNaN(day) || Number.isNaN(year) || Number.isNaN(month)) {
+                    setState({...state,errorText:i18n.lang('notAccordingToDateFormat',undefined,locale)(inputFormat)})
+                    return
+                  }
+                  const inputDate = inputMode === 'end'
+                      ? new Date(year, month - 1, day, 23, 59, 59)
+                      : new Date(year, month - 1, day)
+                    onConfirm(inputDate,false)
+                }}
+              />
+          }}
+        />
+      {withModal ? (
+        <DatePickerModal
+          date={state.inputDate}
+          visible={state.visible}
+          mode="single"
+          startDate = {minDate}
+          endDate = {maxDate}
+          validRange={{
+           startDate : minDate,  // optional
+           endDate : maxDate, // optional
+            //   disabledDates: [new Date()] // optional
+          }}
+          onDismiss={onDismiss}
+          onDateChange = {(date)=>{
+             onConfirm(date);
+          }}
+          onConfirm={({ date }) => {
+             onConfirm(date);
+          }}
+          onCancel = {onDismiss}
+          locale={locale}
+          dateMode={inputMode}
+        />
+      ) : null}
+    </>
+  )
+});
+
+function getLabel({
+  withDateFormatInLabel,inputFormat,label}) {
+  inputFormat = i18n.lang(inputFormat);
+  if (withDateFormatInLabel) {
+    return label ? `${label} (${inputFormat})` : inputFormat
+  }
+  return label || ''
+}
+
+
+export default DatePickerInput;
+
+DatePickerInput.displayName = "DatePickerInput";
+
+const styles = StyleSheet.create({
+  container : {
+    position: 'relative',
+    //flexGrow: 1,
+    //flex:1,
+  },
+  noPadding : {
+    paddingHorizontal : 0,
+    marginHorizontal:0,
+  },
+  input : {
+    paddingVertical : 0,
+    width : '100%'
+  }
+})
+DatePickerInput.propTypes = {
+  onChange : PropTypes.func,
+  anchorProps : PropTypes.object,///les props à appliquer à l'icone date permettant de sélectionner la date 
+}