(\n sanitizeDateValue(value),\n )\n\n useEffect(() => setInternalValue(sanitizeDateValue(value)), [value])\n\n const shouldDisableWhen = props.shouldDisableSelection\n ? (date?: InputOptions) => {\n if (!date || !props.shouldDisableSelection) return false\n return props.shouldDisableSelection(new Date(date))\n }\n : undefined\n\n const onClosePicker = useCallback(() => {\n requestAnimationFrame(() => {\n closePicker()\n onClose?.()\n })\n }, [closePicker, onClose])\n\n const onToday = useCallback(() => {\n setInternalValue(new Date())\n }, [])\n\n const onAccept = useCallback(() => {\n onClosePicker()\n if (isEqual(sanitizeDateValue(value), internalValue)) return\n onChange(internalValue)\n onSubmit?.()\n }, [internalValue, onChange, onClosePicker, onSubmit, value])\n\n const onCancel = useCallback(() => {\n onClosePicker()\n setInternalValue(sanitizeDateValue(value))\n }, [onClosePicker, value])\n\n const onClear = useCallback(() => {\n onClosePicker()\n onToday()\n onChange(undefined)\n onSubmit?.()\n }, [onChange, onClosePicker, onSubmit, onToday])\n\n const actionBar = () => (\n \n \n {clearable && (\n \n )}\n {showTodayButton && (\n \n )}\n \n \n \n
\n )\n\n const field = () => (\n \n )\n\n return {\n disabled,\n isTimeType,\n ampm: false,\n disableFuture,\n ampmInClock: false,\n value: internalValue,\n open: visible ?? isOpen,\n slots: { field, actionBar },\n showDaysOutsideCurrentMonth: !isTimeType,\n openTo: openTo || (isTimeType ? \"hours\" : \"day\"),\n orientation: \"portrait\" as \"portrait\" | \"landscape\",\n shouldDisableDate: !isTimeType ? shouldDisableWhen : undefined,\n shouldDisableTime:\n isTimeType || type == \"datetime\" ? shouldDisableWhen : undefined,\n slotProps: { dialog: { sx: styleConfig, onClose: onClosePicker } },\n onOpen: showPicker,\n onClose: onClosePicker,\n onChange: (date: Date | null) => date && setInternalValue(date),\n }\n}\n\nfunction useStyleConfig() {\n const columnGap = useSpacing(\"XXXXS\")\n\n return useMemo(\n () => ({\n // Applies the correct display style to the main picker layout.\n \"& .MuiPickersLayout-root\": { display: \"block\" },\n\n // Applies the general layout styling\n // of the OUTER toolbar container.\n \"& .MuiPickersLayout-toolbar\": {\n borderTopWidth: 5,\n borderBottomWidth: 3,\n borderTopStyle: \"solid\",\n borderTopColor: \"#2B5B95\",\n borderBottomStyle: \"solid\",\n backgroundColor: \"#2B5B95\",\n minWidth: TOOLBAR_MIN_WIDTH,\n borderBottomColor: \"#B71E3F\",\n },\n\n // Applies the general layout styling\n // of the INNER toolbar container.\n \"& .MuiPickersToolbar-content\": {\n flex: 1,\n columnGap,\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n\n // Inserts spacing between the action buttons.\n \"& .MuiDialogActions-root\": {\n flexDirection: \"row-reverse\",\n justifyContent: \"space-between\",\n },\n\n // Increases the padding of the clock selection view.\n \"& .MuiTimeClock-root\": { paddingTop: 5.25 },\n\n // Applies another color to the week day display row labels.\n \"& .MuiTypography-caption\": { color: \"black\" },\n\n // Removes the date/time selection header in the toolbar.\n \"& .MuiTypography-overline\": { display: \"none\" },\n\n // Styles the selected states\n // of the day, month, year, minutes and hours\n // ripples in a DateTime-/TimePicker context.\n // Additionally, we also style the title/date of the date picker.\n \"& button > .Mui-selected,& .MuiDatePickerToolbar-title\": {\n color: \"white\",\n },\n\n // Prevents the dialog from getting too small in width.\n \"& .MuiDialogContent-root\": { minWidth: DIALOG_CONTENT_MIN_WIDTH },\n\n // Applies the default font style to date/time label\n // items in toolbar when not being selected.\n \"& .MuiPickersToolbarText-root\": { color: \"rgba(255,255,255,0.75)\" },\n }),\n [columnGap],\n )\n}\n\nfunction sanitizeDateValue(value?: T): Date {\n return typeof value == \"string\" ? parseISO(value) : value ?? new Date()\n}\n","import React, { useState } from \"react\"\nimport { LayoutChangeEvent, View } from \"react-native\"\n\nimport { useOnOff } from \"@axtesys/hooks\"\n\nimport { PressableOpacity } from \"../../button/PressableOpacity\"\nimport { KeyLabels, Menu } from \"../../container/Menu\"\nimport { useDisplayValue } from \"../../hooks/useDisplayValue\"\nimport { useReCalculationEffect } from \"../../hooks/useReCalculationEffect\"\nimport { calculatePosition } from \"../../lib\"\nimport { ScreenCoordinates } from \"../../types\"\nimport { TextInput, TextInputProps } from \"./TextInput\"\n\ntype DropdownInputProps = Omit<\n TextInputProps,\n \"iconLeft\" | \"iconRight\" | \"mode\" | \"onChange\"\n> & {\n displayKeyValuePairs: KeyLabels\n excludedValues?: (keyof KeyLabels)[]\n}\n\nexport type SingleDropdownInputProps = {\n onChange(value: keyof KeyLabels): void\n\n value?: keyof KeyLabels\n} & DropdownInputProps\n\nexport type MultiDropdownInputProps = {\n category: string\n values: (keyof KeyLabels)[]\n onChange(values: (keyof KeyLabels)[]): void\n\n defaultKey?: keyof KeyLabels\n} & DropdownInputProps\n\ntype DropdownInputInternalProps = {\n displayValue: string\n mode: \"single\" | \"multi\"\n onSelect(key: keyof KeyLabels): void\n\n values?: (keyof KeyLabels)[]\n} & DropdownInputProps\n\nexport function SingleDropdownInput(props: SingleDropdownInputProps) {\n const { value, displayKeyValuePairs, onChange } = props\n\n return (\n \n )\n}\n\nexport function MultiDropdownInput(props: MultiDropdownInputProps) {\n const { values, defaultKey = \"default\", onChange } = props\n\n const onSelectMulti = (key: keyof KeyLabels) => {\n if (!values.find(value => value == key)) {\n if (\n key == defaultKey ||\n (values.length == 1 && values[0] == defaultKey)\n ) {\n onChange([key])\n } else onChange([...values, key])\n } else if (values.length > 1) {\n onChange(values.filter(value => value != key))\n } else onChange([defaultKey])\n }\n\n return (\n \n )\n}\n\nfunction InternalDropdownInput(props: DropdownInputInternalProps) {\n const {\n mode,\n values,\n displayValue,\n excludedValues,\n displayKeyValuePairs,\n onSelect,\n ...textInputProps\n } = props\n const { disabled } = textInputProps\n\n // States whether the dropdown menu is shown or not.\n const [menuVisible, showMenu, hideMenu] = useOnOff(false)\n\n // Dimensions received from the `TextInput` component in order to:\n // Set the `minWidth` of the menu. This leads to a better fit /\n // display for a non-collapsed `Menu`.\n const [minWidth, setMinWidth] = useState()\n\n // Required to adjust positioning\n // of dropdown when window dimensions change.\n const viewRef = React.createRef()\n const [position, setPosition] = useState({ x: 0, y: 0 })\n const calculateMenuPosition = () =>\n calculatePosition({ viewRef, setPosition, viewHeightAddition: true })\n\n useReCalculationEffect({\n dependency: menuVisible,\n executeIfNotVisible: hideMenu,\n calculate: calculateMenuPosition,\n })\n\n const selectOption = (key: string) => {\n onSelect(key)\n calculateMenuPosition()\n if (mode == \"single\") hideMenu()\n }\n\n const onLayout = ({ nativeEvent: { layout } }: LayoutChangeEvent) =>\n setMinWidth(layout.width)\n\n const interceptor = (\n \n \n {}}\n />\n \n \n )\n\n const menu = (\n \n )\n\n return (\n \n {interceptor}\n {!disabled && menu}\n \n )\n}\n","import React from \"react\"\n\nimport { TextInput, TextInputProps } from \"./TextInput\"\n\nexport function EmailInput(props: TextInputProps) {\n return \n}\n","import React, { ReactNode } from \"react\"\nimport { View } from \"react-native\"\n\nimport { Column } from \"../../layout/FlexBox\"\nimport { Label } from \"../../typography/Label\"\n\nexport type ErrorFieldProps = {\n children: ReactNode\n errorMessage?: string\n}\n\nconst FONT_SIZE = 12\n\n// An element paired with an optional error message bellow.\nexport function ErrorField({ children, errorMessage }: ErrorFieldProps) {\n // In case an error message is present - display a styled label.\n const errorLabel = errorMessage ? (\n \n ) : undefined\n\n // Make sure that the view beneath the received children node\n // has always the same size in order to prevent\n // a nasty element shifting effect.\n const errorView = {errorLabel}\n\n return (\n \n {children}\n {errorView}\n \n )\n}\n","import React from \"react\"\n\nimport { Column } from \"../../layout/FlexBox\"\nimport { ResponsiveSpacing } from \"../../types\"\nimport { InputLabel, InputLabelProps } from \"../../typography/InputLabel\"\nimport { ErrorField, ErrorFieldProps } from \"./ErrorField\"\n\nexport type FormFieldProps = InputLabelProps &\n ErrorFieldProps & {\n gap?: ResponsiveSpacing\n noErrorMessage?: boolean\n onPress?: () => void\n }\n\n// A top labeled form input / field component.\nexport function FormField({\n gap,\n children,\n errorMessage,\n noErrorMessage,\n onPress,\n ...labelProps\n}: FormFieldProps) {\n const label = labelProps.label && \n\n const input =\n // showErrorMessage\n noErrorMessage != true ? (\n {children}\n ) : (\n children\n )\n\n return (\n \n {label}\n {input}\n \n )\n}\n","import React, { ReactNode } from \"react\"\nimport { StyleProp, ViewStyle } from \"react-native\"\n\nimport { Column } from \"../../layout/FlexBox\"\nimport { Gap } from \"../../layout/Gap\"\n\ntype GapContainerProps = {\n children: ReactNode\n style?: StyleProp\n}\n\nexport function GapContainer(props: GapContainerProps) {\n return (\n \n {props.children}\n \n \n )\n}\n","import React from \"react\"\n\nimport { INTEGER_REGEX } from \"../../constants\"\nimport { TextInput, TextInputProps } from \"./TextInput\"\n\nexport function IntegerTextInput({ value, ...props }: TextInputProps) {\n return (\n \n )\n}\n","import Big from \"big.js\"\nimport React, { useMemo } from \"react\"\nimport { StyleProp, TextStyle, ViewStyle } from \"react-native\"\n\nimport { MCIcon } from \"../../display/MCIcon\"\nimport { useTheme } from \"../../theme\"\nimport { NumberInput, NumberInputProps } from \"./NumberInput\"\nimport { IconConfig } from \"./TextInput\"\n\ntype CustomProps = {\n value?: Big\n mini?: boolean\n revertOnCancel?: boolean\n currencySymbol?: \"€\" | \"%\"\n onCancelBehavior?: \"submit\" | \"ignore\" | \"revert\"\n\n onChange?(value?: Big): void\n onSubmit?(value?: Big): void\n}\n\ntype MoneyInputProps = Omit<\n NumberInputProps,\n \"value\" | \"onChange\" | \"onSubmit\"\n> &\n CustomProps\n\nexport function MoneyInput(props: MoneyInputProps) {\n return (\n \n )\n}\n\nfunction useMoneyInputProps(props: MoneyInputProps) {\n const { fontFamily } = useTheme()\n\n const currencyIcon = useMemo(() => {\n if (props.mini) return undefined\n if (props.currencySymbol == \"%\") return \"percent\"\n else return \"currency-eur\"\n }, [props.currencySymbol, props.mini])\n\n const iconLeft = currencyIcon\n ? ({ size: \"XS\", name: currencyIcon } as IconConfig)\n : undefined\n\n const style: StyleProp = useMemo(() => {\n const fontFamilyType = fontFamily.sourceSansPro\n\n return [\n {\n width: \"100%\",\n marginRight: 10,\n textAlign: \"right\",\n fontFamily: fontFamilyType.bold,\n },\n props.mini && {\n padding: 0,\n marginRight: 0,\n fontFamily: fontFamilyType.regular,\n },\n props.style,\n ]\n }, [fontFamily.sourceSansPro, props.mini, props.style])\n\n return {\n ...props,\n style,\n iconLeft,\n onCancelBehavior: props.revertOnCancel\n ? \"revert\"\n : props.onCancelBehavior ?? \"submit\",\n minNumberOfDecimalPlaces: props.minNumberOfDecimalPlaces ?? 2,\n maxNumberOfDecimalPlaces: props.maxNumberOfDecimalPlaces ?? 2,\n onChange: props.onChange,\n onSubmit: props.onSubmit ?? props.onChange,\n }\n}\n","import Big from \"big.js\"\nimport React, { useRef } from \"react\"\nimport { InputAccessoryView, Keyboard, Platform } from \"react-native\"\n\nimport {\n useNumberInput,\n UseNumberInputProps,\n UseNumberInputResult,\n} from \"@axtesys/hooks\"\nimport { createId } from \"@axtesys/react-tools\"\n\nimport { Row } from \"../../layout/FlexBox\"\nimport { useKassenAppUI } from \"../../providers/KassenAppUIProvider\"\nimport { LinkLabel } from \"../../typography/LinkLabel\"\nimport { FocusBlurEvent, TextInput, TextInputProps } from \"./TextInput\"\n\nexport type NumberInputProps = Omit<\n TextInputProps,\n \"value\" | \"keyboardType\" | \"onChange\"\n> &\n UseNumberInputProps & {\n // Used to hide the iOS specific 'Done' button\n // above a number or decimal keyboard layout.\n hideIOSDoneButton?: boolean\n }\n\ntype CustomNumberInputProps = { numberInputProps: UseNumberInputResult }\ntype GeneralNumberInputProps = NumberInputProps &\n CustomNumberInputProps\ntype IOSNumberInputProps = NumberInputProps &\n CustomNumberInputProps\n\nexport function NumberInput(\n props: NumberInputProps,\n) {\n const numberInputProps = useNumberInput({\n maxValue: 999999999 as T,\n ...props,\n })\n\n return Platform.OS == \"ios\" && !Platform.isPad ? (\n \n ) : (\n \n )\n}\n\nfunction GeneralNumberInput({\n numberInputProps,\n ...props\n}: GeneralNumberInputProps) {\n const optimizedGeneralProps = {\n ...props,\n value: undefined,\n onChange: undefined,\n }\n\n const onFocus = (event?: FocusBlurEvent) => {\n numberInputProps.onFocus()\n optimizedGeneralProps.onFocus?.(event)\n }\n const onBlur = (event?: FocusBlurEvent) => {\n numberInputProps.onBlur()\n optimizedGeneralProps.onBlur?.(event)\n }\n\n return (\n \n )\n}\n\nfunction IOSAccessoryView({\n nativeId,\n returnKeyLabel,\n onSubmitEditing,\n}: {\n nativeId: string\n returnKeyLabel?: string\n onSubmitEditing?: () => void\n}) {\n const { translations } = useKassenAppUI()\n\n const onPress = () => {\n onSubmitEditing?.()\n Keyboard.dismiss()\n }\n\n return (\n \n \n \n \n \n )\n}\n\n// Show accessory view on iOS for following keyboard layouts:\nconst LAYOUTS_ACCESSORY_VIEW = [\"number-pad\", \"decimal-pad\"]\n\nfunction IOSNumberInput({\n returnKeyType,\n returnKeyLabel,\n numberInputProps,\n hideIOSDoneButton = false,\n ...props\n}: IOSNumberInputProps) {\n const accessoryViewId = useRef(createId()).current\n const showAccessoryView =\n !hideIOSDoneButton &&\n LAYOUTS_ACCESSORY_VIEW.includes(numberInputProps.keyboardType)\n\n return (\n <>\n \n {showAccessoryView && (\n \n )}\n \n )\n}\n","import React from \"react\"\nimport { Platform } from \"react-native\"\n\nimport { TextInput, TextInputProps } from \"./TextInput\"\n\nexport function NumberTextInput(props: TextInputProps) {\n return (\n \n )\n}\n","import React from \"react\"\n\nimport { useToggle } from \"@axtesys/hooks\"\n\nimport { IconConfig, TextInput, TextInputProps } from \"./TextInput\"\n\ntype PasswordInputProps = TextInputProps & { forceHidden?: boolean }\n\nexport function PasswordInput({ forceHidden, ...props }: PasswordInputProps) {\n const [passwordHidden, togglePasswordHidden] = useToggle(true)\n\n const icon = !forceHidden\n ? ({\n name: passwordHidden ? \"eye-outline\" : \"eye-off-outline\",\n onPress: togglePasswordHidden,\n } as IconConfig)\n : undefined\n\n return (\n \n )\n}\n","import React, { useMemo } from \"react\"\nimport { isIOS } from \"react-device-detect\"\nimport { Platform } from \"react-native\"\n\nimport { TextInput, TextInputProps } from \"./TextInput\"\n\nexport function PhoneInput(props: TextInputProps) {\n const keyboardType = useMemo(() => {\n if (Platform.OS == \"ios\") {\n return \"numbers-and-punctuation\"\n } else return isIOS ? \"default\" : \"phone-pad\"\n }, [])\n\n return \n}\n","import React, { useMemo } from \"react\"\nimport { Platform } from \"react-native\"\n\nimport { useSelection } from \"~shared/components/providers/SelectionProvider\"\n\nimport { KeyLabels } from \"../../container/Menu\"\nimport { useDisplayValue } from \"../../hooks/useDisplayValue\"\nimport { IconConfig, TextInput, TextInputProps } from \"./TextInput\"\n\ntype SelectionInputProps = Omit & {\n displayKeyValuePairs: KeyLabels\n\n title?: string\n tooltip?: string\n clearable?: boolean\n enableSearch?: boolean\n excludedValues?: (keyof KeyLabels)[]\n}\n\ntype SingleSelectionInputProps = {\n value?: keyof KeyLabels\n onChange?(value: keyof KeyLabels): void\n} & SelectionInputProps\n\ntype MultiSelectionInputProps = {\n category: string\n values: (keyof KeyLabels)[]\n onChange?(values: (keyof KeyLabels)[]): void\n} & SelectionInputProps\n\ntype SelectionInputInternalProps = {\n displayValue: string\n} & (SingleSelectionInputProps | MultiSelectionInputProps)\n\nexport function SingleSelectionInput(props: SingleSelectionInputProps) {\n const { value, displayKeyValuePairs } = props\n\n const displayValue = value ? displayKeyValuePairs[value] : \"\"\n\n return \n}\n\nexport function MultiSelectionInput(props: MultiSelectionInputProps) {\n return (\n \n )\n}\n\nfunction InternalSelectionInput(props: SelectionInputInternalProps) {\n const { iconRight, textInputProps, onSelect } = useTextInputProps(props)\n\n return (\n {}}\n // Required for web (does not support onPressIn)\n onPress={onSelect}\n // Required for app (does not support onPress)\n onPressIn={onSelect}\n />\n )\n}\n\nfunction useTextInputProps(props: SelectionInputInternalProps) {\n const {\n title,\n tooltip,\n clearable,\n enableSearch,\n displayValue,\n excludedValues,\n displayKeyValuePairs,\n ...textInputProps\n } = props\n\n const { selectSingle, selectMulti } = useSelection()\n\n const iconRight: IconConfig =\n !displayValue || !clearable\n ? { name: \"format-list-checkbox\" }\n : {\n name: \"close\",\n onPress: () =>\n !(\"category\" in props)\n ? props.onChange?.(\"\")\n : props.onChange?.([]),\n }\n\n const items = useMemo(\n () =>\n Object.keys(displayKeyValuePairs).filter(\n key => !excludedValues?.includes(key),\n ),\n [displayKeyValuePairs, excludedValues],\n )\n const onSelect = async () => {\n const sharedConfig = {\n title,\n items,\n tooltip,\n displayMapping: (identifier: keyof KeyLabels) =>\n displayKeyValuePairs[identifier],\n filterSelector: enableSearch\n ? (identifier: keyof KeyLabels) => [displayKeyValuePairs[identifier]]\n : undefined,\n }\n\n if (!(\"category\" in props)) {\n selectSingle({ ...sharedConfig, selection: props.value }).then(\n selection => props.onChange?.(selection),\n )\n return\n }\n\n selectMulti({\n ...sharedConfig,\n selection: props.values ? [...props.values] : [],\n }).then(selection => props.onChange?.(selection))\n }\n\n return { iconRight, textInputProps, onSelect }\n}\n","import React, { ReactElement } from \"react\"\n\nimport { Icon } from \"../../display/Icon\"\nimport { MCIcon } from \"../../display/MCIcon\"\nimport { ToolTipIcon } from \"../../display/ToolTipIcon\"\nimport { Row } from \"../../layout/FlexBox\"\nimport { Color, TextSize } from \"../../types\"\nimport { Label } from \"../../typography/Label\"\n\ntype IconConfig = {\n name?: MCIcon\n color?: Color\n size?: \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\"\n}\n\ntype SelectorInputProps = SelectorProps & {\n toolTip?: string\n icon?: IconConfig\n fontSize?: TextSize\n\n // For convenience reasons we pass a\n // possible error message to the input component\n // It has no other use than displaying an\n // error state (message is not shown in here)\n errorMessage?: string\n\n label?: ReactElement | string\n}\n\nexport { CheckBoxInput, RadioButtonInput }\n\nfunction CheckBoxInput(props: Omit) {\n return \n}\n\nfunction RadioButtonInput(props: Omit) {\n return \n}\n\nfunction SelectorInput(props: SelectorInputProps) {\n const { toolTip, disabled, fontSize, errorMessage } = props\n\n const selector = (\n \n )\n\n let icon\n if (toolTip) icon = \n else if (props.icon) icon = \n\n const label =\n typeof props.label == \"string\" ? (\n \n ) : (\n props.label\n )\n\n return (\n \n {selector}\n {label}\n {icon}\n
\n )\n}\n\ntype SelectorProps = {\n value: boolean\n type: \"checkBox\" | \"radioButton\"\n onChange: (value: boolean) => void\n\n disabled?: boolean\n errorIndicator?: boolean\n}\n\nfunction Selector(props: SelectorProps) {\n const { type, value, errorIndicator, onChange } = props\n\n let icon: MCIcon\n if (type == \"radioButton\") {\n icon = value ? \"radiobox-marked\" : \"radiobox-blank\"\n } else icon = value ? \"checkbox-marked-outline\" : \"checkbox-blank-outline\"\n\n const onPress = () => onChange(!value)\n\n return (\n \n )\n}\n","import React from \"react\"\n\nimport { Box } from \"../../layout/Box\"\nimport { Row } from \"../../layout/FlexBox\"\nimport { InputLabel } from \"../../typography/InputLabel\"\nimport { ErrorField } from \"./ErrorField\"\nimport { FormFieldProps } from \"./FormField\"\n\ntype SideFormFieldProps = Omit & {\n multiline?: boolean\n}\n\n// A right side labeled form input / field component.\nexport function SideFormField(props: SideFormFieldProps) {\n const { children, multiline, errorMessage, noErrorMessage, ...labelProps } =\n props\n\n const showErrorMessage = noErrorMessage != true\n\n const label = (\n \n \n \n )\n\n const input = (\n \n {showErrorMessage ? (\n {children}\n ) : (\n children\n )}\n \n )\n\n return (\n \n {label}\n {input}\n \n )\n}\n","import React from \"react\"\n\nimport { Column } from \"../../layout/FlexBox\"\nimport { TextInput, TextInputProps } from \"./TextInput\"\n\ntype TextAreaInputProps = TextInputProps & { height?: number }\n\nexport function TextAreaInput(props: TextAreaInputProps) {\n return (\n \n \n \n )\n}\n","import { isEqual } from \"lodash\"\nimport React, { Ref, useMemo, useRef, useState } from \"react\"\nimport {\n ColorValue,\n NativeSyntheticEvent,\n Platform,\n StyleProp,\n TextInput as RNTextInput,\n TextInputFocusEventData,\n TextInputProps as RNTextInputProps,\n TextStyle,\n ViewStyle,\n} from \"react-native\"\n\nimport { FocusChainLink } from \"@axtesys/hooks\"\nimport { mergeRefs } from \"@axtesys/react-tools\"\n\nimport { Icon } from \"../../display/Icon\"\nimport { MCIcon } from \"../../display/MCIcon\"\nimport { Row } from \"../../layout/FlexBox\"\nimport { useTheme } from \"../../theme\"\nimport { Color, TextSize } from \"../../types\"\n\n// This value regulates the height of the field container\n// (the actual RNTextInput will expand to the size of the [parent] container).\nconst HEIGHT = 40\n\nexport const SPACING_CORRECTION = 8\n\nexport type IconConfig = {\n name: MCIcon\n color?: Color\n size?: \"XS\" | \"S\" | \"M\" | \"L\"\n onPress?: () => void\n}\nexport type FocusBlurEvent = NativeSyntheticEvent\n\ntype ErrorIndicatorProps = { errorIndicator: boolean }\ntype AutoFocusHackConfig = { onFocus: () => void; autoFocus?: boolean }\n\ntype InheritedProps = Omit<\n RNTextInputProps,\n \"ref\" | \"style\" | \"onChange\" | \"onSubmitEditing\"\n>\ntype OverwrittenProps = {\n // Style property which is directly applied\n // to the standard react native 'TextInput' component.\n style?: StyleProp\n\n onChange?: (value: string) => void\n}\ntype CustomProps = {\n // States whether the input field and its icon(s) are disabled or not.\n // Setting this property to true sets the editable property to false.\n disabled?: boolean\n\n // Defines the font size of the entered input.\n // Defaults to 'default' (16pt)\n fontSize?: TextSize\n\n // Defines potentially clickable items\n // either on the left or right side of the input field.\n iconLeft?: IconConfig\n iconRight?: IconConfig\n\n // Pass in an individual focus chain link object\n // if there are multiple input fields in a form\n // and the focus should change from one field to another.\n focus?: FocusChainLink\n\n // States whether the input field\n // should have only a dynamically colored bottom line (flat) OR\n // is also encircled with a rounded corner box.\n // Defaults to 'flat'\n mode?: \"flat\" | \"outlined\"\n\n // For convenience reasons we pass a\n // possible error message to the input component.\n // It has no other use than displaying an\n // error state (color hint; message is not shown in here).\n errorMessage?: string\n\n // Changes the background color to a transparent background.\n transparent?: boolean\n\n // When this flag is set, the underline color will be displayed\n // as if there would not be a value present.\n // The color stays the same as long as the value is equal to the initial one.\n trackInitialValue?: boolean\n\n // If passed, overwrites the dynamic underline color determination process.\n underlineColor?: ColorValue\n\n // Can be used to pass a ref to the input field.\n textInputRef?: Ref\n\n // Style property which is applied to the (row) container of the InputField\n // (icons and the field itself are included in there).\n containerStyle?: StyleProp\n\n onPress?: () => void\n onSubmitEditing?: () => void\n onSubmitIfValid?: () => Promise\n onBlur?: (event?: FocusBlurEvent) => void\n onFocus?: (event?: FocusBlurEvent) => void\n}\n\nexport type TextInputProps = InheritedProps & OverwrittenProps & CustomProps\n\nexport function TextInput(props: TextInputProps) {\n const errorIndicator = props.errorMessage != undefined\n\n const iconProps = { errorIndicator, disabled: props.disabled }\n const leftIcon = props.iconLeft && (\n \n )\n const rightIcon = props.iconRight && (\n \n )\n\n const generalProps = { ...props, value: undefined, onChange: undefined }\n const textInputProps = useTextInputProps({ ...props, errorIndicator })\n const field = \n\n const containerProps = useTextInputContainerProps({\n ...props,\n underlineColor: textInputProps.underlineColor,\n })\n\n return (\n \n {leftIcon}\n {field}\n {rightIcon}\n \n )\n}\n\nfunction InputIcon(\n props: Pick &\n ErrorIndicatorProps & { icon?: IconConfig },\n) {\n const { icon, disabled, errorIndicator } = props\n\n if (!icon) return null\n\n return (\n \n )\n}\n\nfunction useTextInputProps(props: TextInputProps & ErrorIndicatorProps) {\n const initialValueRef = useRef(props.value)\n const [isFocused, setIsFocused] = useState(false)\n const { fontSize, color, fontFamily } = useTheme()\n const { multiline, blurOnSubmit, spacingCorrectionStyle } =\n useIOSSelectionHackProps(props)\n\n // Determine the value of the field's underline (and selection) color\n // (constraint sequence is specifically chosen like that).\n let interactionColor\n if (props.underlineColor) interactionColor = props.underlineColor\n else if (props.errorIndicator) interactionColor = color.error\n else if (props.disabled) interactionColor = color.disabled\n else if (isFocused && props.editable != false)\n interactionColor = color.secondary2\n else if (\n props.trackInitialValue &&\n isEqual(props.value, initialValueRef.current)\n )\n interactionColor = color.base4\n else if (props.value) interactionColor = color.primary\n else interactionColor = color.text.light\n\n // Sets the selection color of the text on any platform except Android\n // (for the latter one colorAccent defined on native side is used).\n // https://github.com/facebook/react-native/issues/22762\n const selectionColor =\n Platform.OS != \"android\"\n ? props.selectionColor ?? interactionColor\n : undefined\n\n const style = useMemo(\n () => [\n spacingCorrectionStyle,\n {\n flex: 1,\n height: HEIGHT,\n\n // 'paddingHorizontal' is required to be set to zero,\n // as older Android version (<=7.1) add an unwanted custom padding.\n paddingHorizontal: 0,\n\n fontFamily: fontFamily.sourceSansPro.regular,\n color: props.errorIndicator ? color.error : color.text.default,\n fontSize: props.fontSize ? fontSize[props.fontSize] : fontSize.default,\n },\n props.style,\n ],\n [\n color.error,\n color.text.default,\n fontFamily.sourceSansPro.regular,\n fontSize,\n props.errorIndicator,\n props.fontSize,\n props.style,\n spacingCorrectionStyle,\n ],\n )\n\n // Fired when the input field loses focus.\n const onBlur = (event?: FocusBlurEvent) => {\n setIsFocused(false)\n if (event) props.onBlur?.(event)\n else props.onBlur?.()\n }\n\n // Fired when the input field gains focus.\n const onFocus = (event?: FocusBlurEvent) => {\n setIsFocused(true)\n if (event) props.onFocus?.(event)\n else props.onFocus?.()\n }\n\n // Fired when the input of the field changes\n // (only when real changes happen).\n const onChangeText = (text: string) => {\n // It does not make sense to fire a\n // change event in case the value has not changed.\n if (props.value == text) return\n\n props.onChange?.(text)\n }\n\n // Potentially try to focus a potential next input field of a form.\n const onFocusSubmit = async () => {\n // Submit on pressing enter if the form is valid\n // (in that case no additional focus changed needs to be triggered).\n if (await props.onSubmitIfValid?.()) return\n\n // No form submission took place,\n // therefore try to move the focus to the next field.\n props.focus?.onSubmitEditing()\n }\n\n // Handle a possible custom behavior first before continuing\n // with submitting and possible focus change.\n const onSubmitEditing = () => {\n props.onSubmitEditing?.()\n onFocusSubmit()\n }\n\n // Defines an aggregated ref consisting out of a possible external ref,\n // a ref used to change focus between input fields\n // and an autofocus related ref.\n const ref = mergeRefs(\n props.textInputRef,\n props.focus?.ref,\n useAutoFocusHackRef({ autoFocus: props.autoFocus, onFocus }),\n )\n\n return {\n ref,\n style,\n multiline,\n blurOnSubmit,\n selectionColor,\n\n autoFocus: false,\n value: props.value ?? \"\",\n placeholderTextColor: color.base4,\n editable: !props.disabled && props.editable,\n keyboardType: props.keyboardType ?? \"default\",\n underlineColor: interactionColor as ColorValue,\n returnKeyType: props.returnKeyType ? props.returnKeyType : \"next\",\n\n onBlur,\n onFocus,\n onChangeText,\n onSubmitEditing,\n }\n}\n\nfunction useTextInputContainerProps(\n props: Pick<\n TextInputProps,\n \"mode\" | \"transparent\" | \"underlineColor\" | \"containerStyle\"\n >,\n) {\n const { color } = useTheme()\n\n const mode = props.mode ?? \"flat\"\n const style: StyleProp = [\n mode == \"outlined\" && {\n borderRadius: 5,\n borderColor: color.text.default,\n\n // Differentiate between the web and native usage,\n // because of cosmetic reasons.\n borderWidth: Platform.OS == \"web\" ? 2 : 1,\n },\n mode == \"flat\" && { borderBottomWidth: 2 },\n {\n // Always color the bottom borderline\n // with the evaluated underlineColor (independent of the set mode).\n borderBottomColor: props.underlineColor,\n\n backgroundColor: props.transparent ? \"transparent\" : color.background,\n },\n props.containerStyle,\n ]\n\n return { style }\n}\n\nfunction useAutoFocusHackRef({ autoFocus, onFocus }: AutoFocusHackConfig) {\n const focusedOnceRef = useRef(false)\n const focusHackInputRef = useRef(null)\n\n const focusNow = () => {\n if (!autoFocus) return\n if (focusedOnceRef.current) return\n\n const element = focusHackInputRef.current\n if (element == null) return\n\n element.focus()\n onFocus()\n\n focusedOnceRef.current = true\n }\n\n return (element: RNTextInput | null) => {\n focusHackInputRef.current = element\n\n // A timeout is required.\n // Otherwise, the selection behavior will break (in release mode)\n // and affect automatic formatting in a negative manner.\n setTimeout(focusNow, 100)\n }\n}\n\nfunction useIOSSelectionHackProps(\n props: Pick<\n TextInputProps,\n \"autoFocus\" | \"multiline\" | \"blurOnSubmit\" | \"selectTextOnFocus\"\n >,\n) {\n const { multiline, autoFocus, selectTextOnFocus } = props\n\n // Last checked on 15th of February 2023\n // iOS-only: Properties corresponding to that flag\n // are part of the autoFocus + selectTextOnFocus hack.\n //\n // autoFocus + selectTextOnFocus bugs on Android\n // and iOS are still not fixed in used RNV.\n // https://github.com/facebook/react-native/issues/30585\n // https://github.com/facebook/react-native/issues/41988\n const isIOSSelectionHackEnabled =\n Platform.OS == \"ios\" && (selectTextOnFocus || autoFocus)\n\n // Also part of our selection hack.\n // Required, as otherwise blurOnSubmit could break behavior on Android.\n let blurOnSubmit\n if (props.blurOnSubmit == true || (isIOSSelectionHackEnabled && !multiline)) {\n blurOnSubmit = true\n } else if (props.blurOnSubmit == false) {\n blurOnSubmit = false\n } else blurOnSubmit = undefined\n\n return {\n blurOnSubmit,\n multiline: multiline || isIOSSelectionHackEnabled,\n\n // In case the selection hack is being used,\n // it is required to correct the inserted space of a multiline field.\n spacingCorrectionStyle: isIOSSelectionHackEnabled && {\n paddingTop: SPACING_CORRECTION,\n },\n }\n}\n","import { addDays, differenceInDays } from \"date-fns\"\nimport React, { useEffect, useState } from \"react\"\nimport { PixelRatio } from \"react-native\"\n\nimport {\n formatDate,\n formatIsoDate,\n formatIsoDateTime,\n formatTime,\n interpolateString,\n validateDate,\n} from \"@axtesys/react-tools\"\n\nimport { AlternativePressableOpacity } from \"../../button/AlternativePressableOpacity\"\nimport { Icon } from \"../../display/Icon\"\nimport { MCIcon } from \"../../display/MCIcon\"\nimport { useDateTimePicker } from \"../../hooks/useDateTimePicker\"\nimport { useDateTimeRangeEffect } from \"../../hooks/useDateTimeRangeEffect\"\nimport { Column } from \"../../layout/FlexBox\"\nimport { useKassenAppUI } from \"../../providers/KassenAppUIProvider\"\nimport { DateTimeMode, DateTimeRange } from \"../../types\"\nimport { Label } from \"../../typography/Label\"\nimport { InputRow } from \"./InputRow\"\n\ntype DateTimeRangeRowProps = {\n mode: DateTimeMode\n value: DateTimeRange\n onChange: (dateRange: DateTimeRange) => void\n\n disableFuture?: boolean\n selectionLimit?: number\n onSelectionViolationChange?: (state: boolean) => void\n}\n\nexport function DateTimeRangeRow(props: DateTimeRangeRowProps) {\n const { mode, value, selectionLimit, onChange, onSelectionViolationChange } =\n props\n\n const { translations } = useKassenAppUI()\n const { endDate, startDate, setEndDate, setStartDate } =\n useDateTimeRangeEffect(value.range)\n const [endDateViolation, setEndDateViolation] = useState(false)\n const [startDateViolation, setStartDateViolation] = useState(false)\n const [selectionViolation, setSelectionViolation] = useState(false)\n\n // Validation: Check if the entered timespan is valid.\n // 1. Check for general date format validity.\n // 2. Verify whether a possible selectionLimit constraint passes.\n // 3. Verify that the start is before the end date.\n useEffect(() => {\n const validStartDate = validateDate(mode, startDate)\n const validEndDate = validateDate(mode, endDate)\n\n setStartDateViolation(validStartDate)\n setEndDateViolation(validEndDate)\n\n if (!validStartDate || !validEndDate) return\n\n if (\n selectionLimit &&\n differenceInDays(addDays(endDate, 1), startDate) > selectionLimit\n ) {\n setSelectionViolation(true)\n onSelectionViolationChange?.(true)\n setStartDateViolation(true)\n setEndDateViolation(true)\n return\n } else {\n setSelectionViolation(false)\n onSelectionViolationChange?.(false)\n setStartDateViolation(false)\n setEndDateViolation(false)\n }\n\n if (startDate > endDate) {\n setEndDateViolation(true)\n return\n }\n\n const range: [Date, Date] =\n mode == \"date\"\n ? [new Date(formatIsoDate(startDate)), new Date(formatIsoDate(endDate))]\n : [\n new Date(formatIsoDateTime(startDate)),\n new Date(formatIsoDateTime(endDate)),\n ]\n\n onChange({ range })\n }, [\n endDate,\n mode,\n onChange,\n onSelectionViolationChange,\n selectionLimit,\n startDate,\n ])\n\n let icon: MCIcon\n switch (mode) {\n case \"date\":\n icon = \"calendar\"\n break\n case \"datetime\":\n icon = \"calendar-clock\"\n break\n default:\n icon = \"progress-question\"\n }\n const isMedium = PixelRatio.getFontScale() > 1.1\n const iconColor = selectionViolation ? \"error\" : undefined\n\n return (\n \n \n \n \n \n )\n}\n\ntype DateLabelProps = Omit & {\n value: Date\n error: boolean\n isMedium: boolean\n onChange: (date: Date) => void\n}\n\nfunction DateLabel({\n mode,\n value,\n error,\n isMedium,\n disableFuture = true,\n onChange,\n}: DateLabelProps) {\n const { pickDateOrTime } = useDateTimePicker()\n\n const labelColor = error ? \"error\" : undefined\n\n const onPress = async () => {\n const pickedDate = await pickDateOrTime({ value, disableFuture })\n if (!pickedDate) return\n onChange(pickedDate)\n }\n\n return (\n \n \n