@fto-consult/expo-ui 1.0.4

package/src/components/Date/Time.js

@@ -0,0 +1,154 @@
+import TextField from "$ecomponents/TextField";
+import Icon from "$ecomponents/Icon";
+import TimePickerModal from "./TimePickerModal";
+import {defaultObj,isNonNullString,defaultDecimal,isNumber,isObj} from "$utils";
+import React from "$react";
+import PropTypes from "prop-types";
+import theme,{styles} from "$theme";
+import { locale } from "./utils";
+import { TouchableRipple } from "react-native-paper";
+const getDate = (hours,minutes,seconds)=>{
+    return new Date(2000, 1, 1, defaultDecimal(hours), defaultDecimal(minutes),defaultDecimal(seconds))
+}
+const compareTimeState = (a,b,ignoreVisible)=>{ 
+    if(!a || !b) return false;
+    if(ignoreVisible !== true && a.visible !== b.visible) return false;
+    return a.hours === b.hours && a.minutes === b.minutes;
+  }
+  const parseTime = (value,useSeconds)=>{
+    if(!isNonNullString(value)) return undefined;
+    let split = value.trim().split(":");
+    let ret = {
+      hours:parseInt(split[0]) || 0,
+      minutes : parseInt(split[1]) || 0,
+    };
+    if(useSeconds !== false){
+       ret.seconds = parseInt(split[2]) || 0;
+    }
+    ret.date = getDate(ret.hours,ret.minutes,ret.seconds);
+    ret.value = timeToString(ret,useSeconds);
+    return ret;
+  }
+  const timeToString = (value,useSeconds)=>{
+     if(!isObj(value)) return undefined;
+     let {hours,minutes,seconds} = value;
+     if(hours ===undefined && minutes === undefined) return undefined;
+     hours = defaultDecimal(hours);
+     minutes = defaultDecimal(minutes);
+     seconds = defaultDecimal(seconds);
+     const d = new Date(0, 0, 0, hours, minutes,seconds);
+     value = d.toSQLTime();
+     if(useSeconds !== false){
+       return value;
+     }
+     return value.substring(0,5);
+  }
+  export default function TimePickerComponent (props){
+    let {right:customRight,upper,anchorProps,dialogProps,withLabel,containerProps,mode,onChange,useSeconds,cancelLabel,confirmLabel,label,text,upperCase,defaultValue,disabled,editable,withModal,readOnly,...rest} = props;
+    rest = defaultObj(rest);
+    const isEditable = disabled !== true && readOnly !== true && editable !== false?true : false;
+    withModal = defaultBool(withModal,true);
+    if(!isEditable){
+       withModal = false;
+    }
+    useSeconds = defaultBool(useSeconds,false);
+    const prevDefaultValue = React.usePrevious(defaultValue);
+    const [state,setState] = React.useStateIfMounted({
+        visible : false,
+        ...parseTime(defaultValue,useSeconds),
+    })
+    const prevState = React.usePrevious(state,compareTimeState)
+    label = withLabel !== false ? defaultStr(label,text)+" (HH:MM"+(useSeconds !== false?":SS":"")+")":"";
+    dialogProps = defaultObj(dialogProps);
+    const onConfirm = ({ hours, minutes }) => {
+      const value = hours !== undefined && minutes !== undefined ? timeToString({seconds:state.seconds,hours,minutes},useSeconds):undefined; 
+      setState({visible:false,seconds:value ? state.seconds:undefined,hours,minutes,value,date:value ? getDate(hours,minutes,useSeconds !== false ? seconds : 0):undefined})
+    };
+    anchorProps = defaultObj(anchorProps);
+    customRight = React.isValidElement(customRight) || typeof customRight =='function'? customRight : null;
+    let right = null;
+    if(withModal){
+      right = (props)=>{
+          return <>
+              <Icon title={label}  {...anchorProps} 
+              icon="clock-outline" onPress={(e)=>{
+                  React.stopEventPropagation(e);
+                  setState({...state,visible:true});
+              }}
+              {...props}
+              />
+           {typeof customRight =='function'? customRight(props): customRight}  
+          </>
+      }
+   } else right = customRight;
+    React.useEffect(()=>{
+      if(prevDefaultValue !== defaultValue){
+        const s = {...state,...parseTime(defaultValue,useSeconds)};
+        if(!defaultValue){
+          s.hours = s.value = s.minutes = s.seconds = s.date = undefined;
+        }
+         setState(s)
+      }
+    },[defaultValue]);
+    React.useEffect(()=>{
+        if(compareTimeState(state,prevState,true)) return;
+        const value = isNumber(state.hours) && isNumber(state.minutes)? timeToString(state,useSeconds) : undefined;
+        if(onChange){
+           onChange({...state,visible:undefined,value});
+        }
+    },[state])
+    const openModal = x=>{
+      setState({...state,visible:true})
+    }
+    const closeModal = x=>{
+      setState({...state,visible:false})
+    }
+    containerProps = defaultObj(containerProps);
+    mode = theme.textFieldMode;
+    return <>
+      <TouchableRipple {...containerProps} 
+        disabled = {!isEditable}
+        style = {[containerProps.style,styles.cursorPointer]}
+        onPress = {isEditable?openModal:undefined}
+        rippleColor={containerProps.rippleColor}
+      >
+          <TextField
+          {...rest}
+          mode = {mode}
+          label = {label}
+          right = {right}
+          disabled = {disabled}
+          editable = {false}
+          contentContainerProps = {{...defaultObj(rest.contentContainerProps),pointerEvents:'auto'}}
+          defaultValue = {state.value}
+        />
+      </TouchableRipple>
+      {withModal && <TimePickerModal
+          {...dialogProps}
+            {...state}
+            label = {label}
+            onConfirm={onConfirm}
+            onTimeChange = {(date)=>{
+                return onConfirm({hours:date?.getHours(),minutes:date?.getMinutes()})
+            }}
+            onDismiss = {closeModal}
+            locale={defaultStr(rest.locale,dialogProps.locale,locale)}
+            uppercase = {(upper === true || upperCase === true) ? true : false}
+            cancelLabel= {defaultStr(cancelLabel,"Annuler")}
+            confirmLabel = {defaultStr(confirmLabel,'OK')}
+            onCancel = {closeModal}
+        />}
+      </>
+  }
+  
+  TimePickerComponent.propTypes = {
+    ...TextField.propTypes,
+    anchorProps : PropTypes.object,///les props à appliquer à l'icone de type time, permettant de sélectionner une valeur du temps
+    containerProps : PropTypes.object,
+    onChange: PropTypes.func,
+    /*** les props du composant TimePickerModal */
+    dialogProps : PropTypes.shape({
+      ...defaultObj(TimePickerModal.propTypes)
+    }),
+    useSeconds : PropTypes.bool, //si les sécondes devrons être utilisées
+  }

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

@@ -0,0 +1,3 @@
+import {TimePickerModal} from 'react-native-paper-dates'
+
+export default TimePickerModal;

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

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

package/src/components/Date/dictionary.js

@@ -0,0 +1,26 @@
+const Dictionary = {
+    fr : {
+        save: 'Enregistrer',
+        selectSingle: 'Selectionner la date',
+        selectMultiple: 'Selectionner les dates',
+        selectRange: 'Selectionner une période',
+        notAccordingToDateFormat: (inputFormat) =>`La valeur définie doit être au format ${inputFormat}`,
+        mustBeHigherThan: 'Doit être plus anciene de',
+        mustBeLowerThan: 'doit être plus récente de',
+        mustBeBetween: 'doit être entre',
+        dateIsDisabled: 'la date n\'est pas autorisée',
+    },
+    en : {
+        save: 'Save',
+        selectSingle: 'Select date',
+        selectMultiple: 'Select dates',
+        selectRange: 'Select period',
+        notAccordingToDateFormat: (inputFormat) =>`Date format must be ${inputFormat}`,
+        mustBeHigherThan: 'Must be later then',
+        mustBeLowerThan: 'Must be earlier then',
+        mustBeBetween: 'Must be between',
+        dateIsDisabled: 'Day is not allowed',
+    }
+}
+
+export default Dictionary;

package/src/components/Date/index.js

@@ -0,0 +1,11 @@
+import PickerInput from "./PickerInput";
+
+export * from "./utils";
+
+const DateComponent = PickerInput;
+DateComponent.displayName = "DateComponent";
+
+export default DateComponent;
+
+
+export {default as Time} from "./Time";

package/src/components/Date/utils.common.js

@@ -0,0 +1,3 @@
+import {registerTranslation} from 'react-native-paper-dates'
+import Dictionary from "./dictionary";
+registerTranslation("fr",Dictionary.fr);

package/src/components/Date/utils.js

@@ -0,0 +1,209 @@
+import  "./utils.common";
+import DateLib from "$lib/date";
+import i18n from "$i18n";
+import Dictionary from "./dictionary";
+import * as React from 'react'
+
+i18n.dictionary(Dictionary);
+
+export const locale = "fr";
+
+export const toDateObj = (value,format,force)=>{
+    if(!value) return undefined;
+    if(DateLib.isDateObj(value)) return value;
+    if(format !== false){
+       value = DateLib.toObj(value,format);
+    }
+    return DateLib.isDateObj(value)? value : undefined;
+}
+
+export const compareTwoDates = (a,b)=>{
+  if(!a && !b && a ===b) return true;
+  return a && b && a.getTime && b.getTime && a.getTime() === b.getTime()
+}
+
+export function showWeekDay(
+    dayIndex,
+    disableWeekDays
+  ){
+    return !(disableWeekDays && disableWeekDays.some((di) => di === dayIndex))
+  }
+  
+  export function dateToUnix(d) {
+    return Math.round(d.getTime() / 1000)
+  }
+  
+  export function addMonths(date, count) {
+    let n = date.getDate()
+    let n2 = new Date(date.getTime())
+    n2.setDate(1)
+    n2.setMonth(n2.getMonth() + count)
+    n2.setDate(
+      Math.min(
+        n,
+        getDaysInMonth({ year: n2.getFullYear(), month: n2.getMonth() })
+      )
+    )
+  
+    return n2
+  }
+  
+  // https://stackoverflow.com/a/1185068/2508481
+  // pass in any date as parameter anyDateInMonth based on dayjs
+  export function getDaysInMonth({
+    year,
+    month,
+  }){
+    return [
+      31,
+      isLeapYear({ year }) ? 29 : 28,
+      31,
+      30,
+      31,
+      30,
+      31,
+      31,
+      30,
+      31,
+      30,
+      31,
+    ][month]
+  }
+  
+  export function getFirstDayOfMonth({year,month}) {
+    return new Date(year, month, 1).getDay()
+  }
+  
+  export function areDatesOnSameDay(a, b) {
+    if (!b) {
+      return false
+    }
+  
+    return (
+      a.getFullYear() === b.getFullYear() &&
+      a.getMonth() === b.getMonth() &&
+      a.getDate() === b.getDate()
+    )
+  }
+  
+  export function isDateBetween(
+    date,
+    {
+      startDate,
+      endDate,
+    }
+  ){
+    if (!startDate || !endDate) {
+      return false
+    }
+    return date <= endDate && date >= startDate
+  }
+  
+  export function isLeapYear({ year }) {
+    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+  }
+  
+  export const daySize = 46
+  export const estimatedMonthHeight = 360
+  export const startAtIndex = 1200
+  export const totalMonths = startAtIndex * 2
+  export const beginOffset = estimatedMonthHeight * startAtIndex
+  export const gridCounts = new Array(totalMonths)
+  
+  export function getGridCount(index) {
+    const cHeight = gridCounts[index]
+    if (cHeight) {
+      return cHeight
+    }
+    const monthDate = addMonths(new Date(), getRealIndex(index))
+    const h = getGridCountForDate(monthDate)
+    gridCounts[index] = h
+    return h
+  }
+  
+  export function getGridCountForDate(date) {
+    const year = date.getFullYear()
+    const month = date.getMonth()
+    const daysInMonth = getDaysInMonth({ year, month })
+    const dayOfWeek = getFirstDayOfMonth({ year, month })
+    return Math.ceil((daysInMonth + dayOfWeek) / 7)
+  }
+  
+  export function getRealIndex(index) {
+    return index - startAtIndex
+  }
+  
+  export function getInitialIndex(date) {
+    if (!date) {
+      return startAtIndex
+    }
+  
+    const today = new Date()
+    const months = differenceInMonths(today, date)
+  
+    return startAtIndex + months
+  }
+
+  export function getStartOfDay(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0)
+  }
+  export function getEndOfDay(d){
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59)
+  }
+  
+  export function differenceInMonths(firstDate, secondDate) {
+    let diffMonths = (secondDate.getFullYear() - firstDate.getFullYear()) * 12
+    diffMonths -= firstDate.getMonth()
+    diffMonths += secondDate.getMonth()
+    return diffMonths
+  }
+  export function useInputFormat(locale) {
+    return React.useMemo(() => {
+      switch(locale){
+        case "en":
+          return "YYYY-MM-DD";
+      }
+      return "DD/MM/YYYY";
+    }, [locale])
+  }
+  export function useDateInput({locale,value,inputMode,onChange}) {
+    const [error, setError] = React.useState(null)
+    const inputFormat = useInputFormat(locale)
+    const formattedValue = DateLib.format(value,inputFormat.toLocaleLowerCase())
+    const onChangeText = (date) => {
+      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)) {
+        setError(
+          i18n.lang('notAccordingToDateFormat',undefined,locale)(inputFormat)
+        )
+        return
+      }
+  
+      const finalDate =
+        inputMode === 'end'
+          ? new Date(year, month - 1, day, 23, 59, 59)
+          : new Date(year, month - 1, day)
+      setError(null)
+      if (inputMode === 'end') {
+        onChange(finalDate)
+      } else {
+        onChange(finalDate)
+      }
+    }
+    return {
+      onChange,
+      error,
+      formattedValue,
+      onChangeText,
+      inputFormat,
+    }
+  }
+  
+  

package/src/components/Dialog/AppBarDialog.js

@@ -0,0 +1,41 @@
+import AppBar from "$ecomponents/AppBar";
+import React from "$react";
+import APP from "$capp/instance";
+import { renderActions } from "./utils";
+import {isIos,isAndroid,isWeb} from "$cplatform";
+
+const AppBarDialogComponent = React.forwardRef((props,ref)=>{
+    const {actions,responsive,isFullScreen,fullScreen,actionsProps,...rest} = props;
+    const forceRender = React.useForceRender();
+    React.useEffect(()=>{
+        const onResize = ()=>{
+            forceRender();
+         }
+        if(responsive){
+            APP.on(APP.EVENTS.RESIZE_PAGE,onResize);
+        }
+        return ()=>{
+            APP.off(APP.EVENTS.RESIZE_PAGE,onResize);
+        }
+    },[]);
+    
+    if(responsive && !isFullScreen() || (typeof fullScreen =='boolean' && !fullScreen)){
+        return null;
+    }
+    return <AppBar
+        statusBarHeight = {isIos()?undefined:0}  
+        testID = "RN_DialogComponent_AppBar"
+        {...rest}
+        bindResizeEvent = {!responsive}
+        style = {[
+            //isAndroid()?{marginTop:10}:null,
+            rest.style,
+        ]}
+        ref = {ref}
+        actions = {renderActions({...rest,...defaultObj(actionsProps),actions,isAppBarAction:true,isFullScreen,fullScreen:true})}
+    />
+});
+
+export default AppBarDialogComponent;
+
+AppBarDialogComponent.displayName = "AppBarDialogComponent"