npm - @oneblink/apps-react - Versions diffs - 1.2.5 → 2.0.0-beta.3 - Mend

@oneblink/apps-react 1.2.5 → 2.0.0-beta.3

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 (66) hide show

package/dist/components/Lists.d.ts CHANGED Viewed

@@ -21,5 +21,5 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<Omit<im
     variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | ("p" | "color" | "top" | "right" | "bottom" | "left" | "height" | "width" | "fontStyle" | "marginBottom" | "position" | "my" | "pl" | "pt" | "zIndex" | "typography" | "fontFamily" | "fontSize" | "flex" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "pr" | "pb" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping">, "ref"> & import("@mui/system").MUIStyledCommonProps<Theme> & ListProps, {}, {}>;
+}, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | ("p" | "color" | "top" | "right" | "bottom" | "left" | "height" | "width" | "fontStyle" | "marginBottom" | "position" | "my" | "pl" | "pt" | "minWidth" | "maxWidth" | "zIndex" | "typography" | "fontFamily" | "fontSize" | "flex" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "boxShadow" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "pr" | "pb" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping">, "ref"> & import("@mui/system").MUIStyledCommonProps<Theme> & ListProps, {}, {}>;
 export {};

package/dist/components/pickers/V4CompatibleDatePicker.d.ts CHANGED Viewed

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import { MobileDatePickerProps } from '@mui/x-date-pickers';
 import { TextField, IconButton } from '@mui/material';
-declare type RemainingPickerProps = Omit<MobileDatePickerProps<Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
+declare type RemainingPickerProps = Omit<MobileDatePickerProps<string | Date, Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
 declare type TextFieldProps = React.ComponentProps<typeof TextField>;
 declare type IconButtonProps = React.ComponentProps<typeof IconButton>;
 declare type Props = RemainingPickerProps & {
-    name?: string;
-    label?: string;
+    name?: TextFieldProps['name'];
+    label?: TextFieldProps['label'];
     maxDate?: string | Date;
     maxDateMessage?: string;
     minDate?: string | Date;
     minDateMessage?: string;
     margin?: TextFieldProps['margin'];
     size?: TextFieldProps['size'];
-    placeholder?: string;
+    placeholder?: TextFieldProps['placeholder'];
     InputProps?: TextFieldProps['InputProps'];
     inputVariant?: TextFieldProps['variant'];
     onBlur?: TextFieldProps['onBlur'];
@@ -21,9 +21,11 @@ declare type Props = RemainingPickerProps & {
     endIconButton?: boolean;
     iconButtonEdge?: IconButtonProps['edge'];
     iconButtonSize?: IconButtonProps['size'];
-    helperText?: string | React.ReactNode;
-    error?: boolean;
-    required?: boolean;
+    helperText?: TextFieldProps['helperText'];
+    error?: TextFieldProps['error'];
+    required?: TextFieldProps['required'];
+    showTodayButton?: boolean;
+    clearable?: boolean;
     'data-cypress'?: string;
 };
 declare const _default: React.NamedExoticComponent<Props>;

package/dist/components/pickers/V4CompatibleDatePicker.js CHANGED Viewed

@@ -4,10 +4,8 @@ import { TextField, InputAdornment, IconButton } from '@mui/material';
 import { DateRange } from '@mui/icons-material';
 import useBooleanState from '../../hooks/useBooleanState';
 import { localisationService } from '@oneblink/apps';
-const emptyFn = () => {
-    //
-};
-const V4CompatibleDatePicker = ({ name, label, maxDate, maxDateMessage, minDate, minDateMessage, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, 'data-cypress': dataCypress, ...rest }) => {
+const V4CompatibleDatePicker = ({ name, label, maxDate, maxDateMessage, minDate, minDateMessage, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, showTodayButton, clearable, value: valueProp, 'data-cypress': dataCypress, ...rest }) => {
+    const [value, setValue] = React.useState(null);
     const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
     const [helperText, setHelperText] = React.useState(undefined);
     const handleError = React.useCallback((error) => {
@@ -37,12 +35,25 @@ const V4CompatibleDatePicker = ({ name, label, maxDate, maxDateMessage, minDate,
         }
     }, [minDate]);
     const onAccept = React.useCallback((date) => {
-        const currentValue = rest.value instanceof Date ? rest.value.toISOString() : rest.value;
+        const currentValue = value instanceof Date ? value.toISOString() : value;
         if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
             onChange(date);
         }
-    }, [onChange, rest.value]);
-    return (React.createElement(MobileDatePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, ...(error ? { error } : {}), fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, onBlur: onBlur, InputProps: {
+    }, [onChange, value]);
+    const actions = React.useMemo(() => {
+        const actions = ['cancel', 'accept'];
+        if (showTodayButton) {
+            actions.unshift('today');
+        }
+        if (clearable) {
+            actions.unshift('clear');
+        }
+        return actions;
+    }, [clearable, showTodayButton]);
+    React.useEffect(() => {
+        setValue(valueProp);
+    }, [valueProp]);
+    return (React.createElement(MobileDatePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, error: error, fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, onBlur: onBlur, InputProps: {
                 startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
                     React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
                         React.createElement(DateRange, null)))) : undefined,
@@ -50,9 +61,11 @@ const V4CompatibleDatePicker = ({ name, label, maxDate, maxDateMessage, minDate,
                     React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
                         React.createElement(DateRange, null)))) : undefined,
                 ...(InputProps ? InputProps : {}),
-            }, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError,
-        // This triggers everytime a component of the while date changes within the picker
-        onChange: emptyFn, onAccept: onAccept, inputFormat: localisationService.getDateFnsFormats().shortDateTime, disabled: disabled, ...rest }));
+            }, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError, onChange: setValue, value: value, onAccept: onAccept, inputFormat: localisationService.getDateFnsFormats().shortDateTime, disabled: disabled, componentsProps: {
+            actionBar: {
+                actions,
+            },
+        }, ...rest }));
 };
 export default React.memo(V4CompatibleDatePicker);
 //# sourceMappingURL=V4CompatibleDatePicker.js.map

package/dist/components/pickers/V4CompatibleDatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"V4CompatibleDatePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,gBAAgB,EAAyB,MAAM,qBAAqB,CAAA;AAC7E,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,eAAe,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;~~AAwCpD~~,MAAM,~~OAAO,GAAG,GAAG,EAAE;IACnB,EAAE;AACJ,CAAC,CAAA;AACD,MAAM,~~sBAAsB,GAAG,CAAC,EAC9B,IAAI,EACJ,KAAK,EACL,OAAO,EACP,cAAc,EACd,OAAO,EACP,cAAc,EACd,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,eAAe,EACf,aAAa,EACb,cAAc,EACd,cAAc,EACd,UAAU,EAAE,cAAc,EAC1B,KAAK,EACL,QAAQ,EACR,cAAc,EAAE,WAAW,EAC3B,GAAG,IAAI,EACD,EAAE,EAAE;IACV,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAChD,SAAS,CACV,CAAA;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,~~CAAC~~,~~KAAgE~~,~~EAAE~~,EAAE;~~QACnE~~,QAAQ,KAAK,EAAE;YACb,KAAK,aAAa,CAAC,CAAC;gBAClB,OAAO,aAAa,CAAC,mBAAmB,CAAC,CAAA;aAC1C;YACD,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO,aAAa,CAAC,cAAc,CAAC,CAAA;aACrC;YACD,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO,aAAa,CAAC,cAAc,CAAC,CAAA;aACrC;YACD,OAAO,CAAC,CAAC;gBACP,OAAO,aAAa,CAAC,SAAS,CAAC,CAAA;aAChC;SACF;IACH,CAAC,EACD,CAAC,cAAc,EAAE,cAAc,CAAC,CACjC,CAAA;IAED,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAA;SACzB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACb,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAA;SACzB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAChC,CAAC,IAAiB,EAAE,EAAE;QACpB,MAAM,YAAY,~~GAChB~~,~~IAAI,CAAC,~~KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,~~IAAI,CAAC,~~KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,~~IAAI,CAAC,~~KAAK,CAAA;~~QAEpE~~,IAAI,YAAY,KAAK,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,KAAI,IAAI,CAAC,EAAE;YAClD,QAAQ,CAAC,IAAI,CAAC,CAAA;SACf;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,~~CACvB~~,CAAA;~~IAED~~,OAAO,CACL,oBAAC,gBAAgB,IACf,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,cAAc,IAAI,UAAU,~~KACpC~~,~~CAAC,~~KAAK,~~CAAC,CAAC,CAAC,~~EAAE,KAAK,~~EAAE~~,~~CAAC,CAAC,CAAC,EAAE,CAAC,EAC5B,~~SAAS,QACT,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE;gBACV,cAAc,EAAE,eAAe,CAAC,CAAC,CAAC,CAChC,oBAAC,cAAc,IAAC,QAAQ,EAAC,OAAO;oBAC9B,oBAAC,UAAU,IACT,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;wBAElB,oBAAC,SAAS,OAAG,CACF,CACE,CAClB,CAAC,CAAC,CAAC,SAAS;gBACb,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAC5B,oBAAC,cAAc,IAAC,QAAQ,EAAC,KAAK;oBAC5B,oBAAC,UAAU,IACT,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;wBAElB,oBAAC,SAAS,OAAG,CACF,CACE,CAClB,CAAC,CAAC,CAAC,SAAS;gBACb,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;aAClC,kBACa,WAAW,GACzB,CACH,EACD,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,WAAW~~;QACpB~~,~~kFAAkF;QAClF~~,QAAQ,EAAE,~~OAAO~~,~~EACjB~~,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,mBAAmB,CAAC,iBAAiB,EAAE,CAAC,aAAa,EAClE,QAAQ,EAAE,QAAQ,~~KACd~~,IAAI,GACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,sBAAsB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { MobileDatePicker, MobileDatePickerProps } from '@mui/x-date-pickers'\nimport { TextField, InputAdornment, IconButton } from '@mui/material'\nimport { DateRange } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { localisationService } from '@oneblink/apps'\n\ntype RemainingPickerProps = Omit<\n MobileDatePickerProps<Date>,\n \| 'onError'\n \| 'renderInput'\n \| 'toolbarFormat'\n \| 'rightArrowIcon'\n \| 'leftArrowIcon'\n \| 'maxDate'\n \| 'minDate'\n \| 'inputFormat'\n>\n\ntype TextFieldProps = React.ComponentProps<typeof TextField>\ntype IconButtonProps = React.ComponentProps<typeof IconButton>\n\ntype Props = RemainingPickerProps & {\n name?: ~~string~~\n label?: ~~string~~\n maxDate?: string \| Date\n maxDateMessage?: string\n minDate?: string \| Date\n minDateMessage?: string\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: ~~string~~\n InputProps?: TextFieldProps['InputProps']\n inputVariant?: TextFieldProps['variant']\n onBlur?: TextFieldProps['onBlur']\n startIconButton?: boolean\n endIconButton?: boolean\n iconButtonEdge?: IconButtonProps['edge']\n iconButtonSize?: IconButtonProps['size']\n helperText?: ~~string~~ \| ~~React.ReactNode~~\n ~~error~~?: boolean\n ~~required~~?: boolean\n 'data-cypress'?: string\n}\n\nconst ~~emptyFn = () => {\n //\n}\nconst~~ V4CompatibleDatePicker = ({\n name,\n label,\n maxDate,\n maxDateMessage,\n minDate,\n minDateMessage,\n margin,\n size,\n placeholder,\n InputProps,\n onChange,\n inputVariant,\n onBlur,\n disabled,\n startIconButton,\n endIconButton,\n iconButtonEdge,\n iconButtonSize,\n helperText: helperTextProp,\n error,\n required,\n 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\n const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n const [helperText, setHelperText] = React.useState<string \| undefined>(\n undefined,\n )\n const handleError = React.useCallback(\n (error: Parameters<Required<MobileDatePickerProps>['onError']>[0]) => {\n switch (error) {\n case 'invalidDate': {\n return setHelperText('Invalid Date Time')\n }\n case 'maxDate': {\n return setHelperText(maxDateMessage)\n }\n case 'minDate': {\n return setHelperText(minDateMessage)\n }\n default: {\n return setHelperText(undefined)\n }\n }\n },\n [maxDateMessage, minDateMessage],\n )\n\n const convertedMaxDate = React.useMemo(() => {\n if (typeof maxDate === 'string') {\n return new Date(maxDate)\n }\n }, [maxDate])\n const convertedMinDate = React.useMemo(() => {\n if (typeof minDate === 'string') {\n return new Date(minDate)\n }\n }, [minDate])\n\n const onAccept = React.useCallback(\n (date: Date \| null) => {\n const currentValue ~~=\n rest.~~value instanceof Date ? ~~rest.~~value.toISOString() : ~~rest.~~value\n\n if (currentValue !== (date?.toISOString() \|\| null)) {\n onChange(date)\n }\n },\n [onChange, ~~rest.~~value],\n )\n\n return (\n <MobileDatePicker\n open={isOpen}\n onOpen={setIsOpen}\n onClose={setIsClosed}\n renderInput={(props) => (\n <TextField\n {...props}\n name={name}\n label={label}\n required={required}\n helperText={helperTextProp \|\| helperText}\n ~~{...(~~error ? { error } ~~: {})}~~\n fullWidth\n margin={margin}\n size={size}\n placeholder={placeholder}\n variant={inputVariant}\n onBlur={onBlur}\n InputProps={{\n startAdornment: startIconButton ? (\n <InputAdornment position=\"start\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n endAdornment: endIconButton ? (\n <InputAdornment position=\"end\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n ...(InputProps ? InputProps : {}),\n }}\n data-cypress={dataCypress}\n />\n )}\n maxDate={convertedMaxDate}\n minDate={convertedMinDate}\n onError={handleError}\n ~~// This triggers everytime a component of the while date changes within the picker~~\n ~~onChange~~={~~emptyFn~~}\n onAccept={onAccept}\n inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n disabled={disabled}\n {...rest}\n />\n )\n}\n\nexport default React.memo<Props>(V4CompatibleDatePicker)\n"]}
1	+ {"version":3,"file":"V4CompatibleDatePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { MobileDatePicker, MobileDatePickerProps } from '@mui/x-date-pickers'\nimport { TextField, InputAdornment, IconButton } from '@mui/material'\nimport { DateRange } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { localisationService } from '@oneblink/apps'\nimport { PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar/PickersActionBar'\n\ntype RemainingPickerProps = Omit<\n MobileDatePickerProps<string \| Date, Date>,\n \| 'onError'\n \| 'renderInput'\n \| 'toolbarFormat'\n \| 'rightArrowIcon'\n \| 'leftArrowIcon'\n \| 'maxDate'\n \| 'minDate'\n \| 'inputFormat'\n>\n\ntype TextFieldProps = React.ComponentProps<typeof TextField>\ntype IconButtonProps = React.ComponentProps<typeof IconButton>\n\ntype Props = RemainingPickerProps & {\n name?: TextFieldProps['name']\n label?: TextFieldProps['label']\n maxDate?: string \| Date\n maxDateMessage?: string\n minDate?: string \| Date\n minDateMessage?: string\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: TextFieldProps['placeholder']\n InputProps?: TextFieldProps['InputProps']\n inputVariant?: TextFieldProps['variant']\n onBlur?: TextFieldProps['onBlur']\n startIconButton?: boolean\n endIconButton?: boolean\n iconButtonEdge?: IconButtonProps['edge']\n iconButtonSize?: IconButtonProps['size']\n helperText?: TextFieldProps['helperText']\n error?: TextFieldProps['error']\n required?: TextFieldProps['required']\n showTodayButton?: boolean\n clearable?: boolean\n 'data-cypress'?: string\n}\n\nconst V4CompatibleDatePicker = ({\n name,\n label,\n maxDate,\n maxDateMessage,\n minDate,\n minDateMessage,\n margin,\n size,\n placeholder,\n InputProps,\n onChange,\n inputVariant,\n onBlur,\n disabled,\n startIconButton,\n endIconButton,\n iconButtonEdge,\n iconButtonSize,\n helperText: helperTextProp,\n error,\n required,\n showTodayButton,\n clearable,\n value: valueProp,\n 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\n const [value, setValue] = React.useState<typeof valueProp>(null)\n const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n const [helperText, setHelperText] = React.useState<string \| undefined>(\n undefined,\n )\n const handleError = React.useCallback(\n (\n error: Parameters<\n Required<MobileDatePickerProps<string \| Date, Date>>['onError']\n >[0],\n ) => {\n switch (error) {\n case 'invalidDate': {\n return setHelperText('Invalid Date Time')\n }\n case 'maxDate': {\n return setHelperText(maxDateMessage)\n }\n case 'minDate': {\n return setHelperText(minDateMessage)\n }\n default: {\n return setHelperText(undefined)\n }\n }\n },\n [maxDateMessage, minDateMessage],\n )\n\n const convertedMaxDate = React.useMemo(() => {\n if (typeof maxDate === 'string') {\n return new Date(maxDate)\n }\n }, [maxDate])\n const convertedMinDate = React.useMemo(() => {\n if (typeof minDate === 'string') {\n return new Date(minDate)\n }\n }, [minDate])\n\n const onAccept = React.useCallback(\n (date: Date \| null) => {\n const currentValue = value instanceof Date ? value.toISOString() : value\n if (currentValue !== (date?.toISOString() \|\| null)) {\n onChange(date)\n }\n },\n [onChange, value],\n )\n\n const actions = React.useMemo(() => {\n const actions: PickersActionBarAction[] = ['cancel', 'accept']\n if (showTodayButton) {\n actions.unshift('today')\n }\n if (clearable) {\n actions.unshift('clear')\n }\n return actions\n }, [clearable, showTodayButton])\n\n React.useEffect(() => {\n setValue(valueProp)\n }, [valueProp])\n\n return (\n <MobileDatePicker\n open={isOpen}\n onOpen={setIsOpen}\n onClose={setIsClosed}\n renderInput={(props) => (\n <TextField\n {...props}\n name={name}\n label={label}\n required={required}\n helperText={helperTextProp \|\| helperText}\n error={error}\n fullWidth\n margin={margin}\n size={size}\n placeholder={placeholder}\n variant={inputVariant}\n onBlur={onBlur}\n InputProps={{\n startAdornment: startIconButton ? (\n <InputAdornment position=\"start\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n endAdornment: endIconButton ? (\n <InputAdornment position=\"end\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n ...(InputProps ? InputProps : {}),\n }}\n data-cypress={dataCypress}\n />\n )}\n maxDate={convertedMaxDate}\n minDate={convertedMinDate}\n onError={handleError}\n onChange={setValue}\n value={value}\n onAccept={onAccept}\n inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n disabled={disabled}\n componentsProps={{\n actionBar: {\n actions,\n },\n }}\n {...rest}\n />\n )\n}\n\nexport default React.memo<Props>(V4CompatibleDatePicker)\n"]}

package/dist/components/pickers/V4CompatibleDateTimePicker.d.ts CHANGED Viewed

@@ -1,28 +1,31 @@
 import * as React from 'react';
 import { MobileDateTimePickerProps } from '@mui/x-date-pickers';
 import { TextField, IconButton } from '@mui/material';
-declare type RemainingPickerProps = Omit<MobileDateTimePickerProps<Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'timeIcon' | 'dateRangeIcon' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
+declare type RemainingPickerProps = Omit<MobileDateTimePickerProps<string | Date, Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'timeIcon' | 'dateRangeIcon' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
 declare type TextFieldProps = React.ComponentProps<typeof TextField>;
 declare type IconButtonProps = React.ComponentProps<typeof IconButton>;
 declare type Props = RemainingPickerProps & {
-    name?: string;
-    label?: string;
+    name?: TextFieldProps['name'];
+    label?: TextFieldProps['label'];
     maxDate?: string | Date;
     maxDateMessage?: string;
     minDate?: string | Date;
     minDateMessage?: string;
     margin?: TextFieldProps['margin'];
     size?: TextFieldProps['size'];
-    placeholder?: string;
+    placeholder?: TextFieldProps['placeholder'];
     InputProps?: TextFieldProps['InputProps'];
     inputVariant?: TextFieldProps['variant'];
+    onBlur?: TextFieldProps['onBlur'];
     startIconButton?: boolean;
     endIconButton?: boolean;
     iconButtonEdge?: IconButtonProps['edge'];
     iconButtonSize?: IconButtonProps['size'];
-    helperText?: string;
-    error?: boolean;
-    required?: boolean;
+    helperText?: TextFieldProps['helperText'];
+    error?: TextFieldProps['error'];
+    required?: TextFieldProps['required'];
+    showTodayButton?: boolean;
+    clearable?: boolean;
     'data-cypress'?: string;
 };
 declare const _default: React.NamedExoticComponent<Props>;

package/dist/components/pickers/V4CompatibleDateTimePicker.js CHANGED Viewed

@@ -4,10 +4,8 @@ import { TextField, InputAdornment, IconButton } from '@mui/material';
 import { AccessTime, DateRange } from '@mui/icons-material';
 import useBooleanState from '../../hooks/useBooleanState';
 import { localisationService } from '@oneblink/apps';
-const emptyFn = () => {
-    //
-};
-const V4CompatibleDateTimePicker = ({ name, label, maxDate, maxDateMessage, minDate, minDateMessage, margin, size, placeholder, InputProps, onChange, inputVariant, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, 'data-cypress': dataCypress, ...rest }) => {
+const V4CompatibleDateTimePicker = ({ name, label, maxDate, maxDateMessage, minDate, minDateMessage, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, showTodayButton, clearable, value: valueProp, 'data-cypress': dataCypress, ...rest }) => {
+    const [value, setValue] = React.useState(null);
     const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
     const [helperText, setHelperText] = React.useState(undefined);
     const handleError = React.useCallback((error) => {
@@ -37,12 +35,25 @@ const V4CompatibleDateTimePicker = ({ name, label, maxDate, maxDateMessage, minD
         }
     }, [minDate]);
     const onAccept = React.useCallback((date) => {
-        const currentValue = rest.value instanceof Date ? rest.value.toISOString() : rest.value;
+        const currentValue = value instanceof Date ? value.toISOString() : value;
         if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
             onChange(date);
         }
-    }, [onChange, rest.value]);
-    return (React.createElement(MobileDateTimePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, ...(error ? { error } : {}), fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, InputProps: {
+    }, [onChange, value]);
+    const actions = React.useMemo(() => {
+        const actions = ['cancel', 'accept'];
+        if (showTodayButton) {
+            actions.unshift('today');
+        }
+        if (clearable) {
+            actions.unshift('clear');
+        }
+        return actions;
+    }, [clearable, showTodayButton]);
+    React.useEffect(() => {
+        setValue(valueProp);
+    }, [valueProp]);
+    return (React.createElement(MobileDateTimePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, error: error, fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, onBlur: onBlur, InputProps: {
                 startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
                     React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
                         React.createElement(DateRange, null)))) : undefined,
@@ -50,9 +61,11 @@ const V4CompatibleDateTimePicker = ({ name, label, maxDate, maxDateMessage, minD
                     React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
                         React.createElement(DateRange, null)))) : undefined,
                 ...(InputProps ? InputProps : {}),
-            }, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError, timeIcon: React.createElement(AccessTime, null), dateRangeIcon: React.createElement(DateRange, null),
-        // This triggers everytime a component of the while date changes within the picker
-        onChange: emptyFn, onAccept: onAccept, inputFormat: localisationService.getDateFnsFormats().shortDateTime, disabled: disabled, ...rest }));
+            }, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError, timeIcon: React.createElement(AccessTime, null), dateRangeIcon: React.createElement(DateRange, null), onChange: setValue, value: value, onAccept: onAccept, inputFormat: localisationService.getDateFnsFormats().shortDateTime, disabled: disabled, componentsProps: {
+            actionBar: {
+                actions,
+            },
+        }, ...rest }));
 };
 export default React.memo(V4CompatibleDateTimePicker);
 //# sourceMappingURL=V4CompatibleDateTimePicker.js.map

package/dist/components/pickers/V4CompatibleDateTimePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"V4CompatibleDateTimePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleDateTimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,oBAAoB,GAErB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACrE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,eAAe,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;~~AAyCpD~~,MAAM,~~OAAO,GAAG,GAAG,EAAE;IACnB,EAAE;AACJ,CAAC,CAAA;AACD,MAAM,~~0BAA0B,GAAG,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,OAAO,EACP,cAAc,EACd,OAAO,EACP,cAAc,EACd,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,eAAe,EACf,aAAa,EACb,cAAc,EACd,cAAc,EACd,UAAU,EAAE,cAAc,EAC1B,KAAK,EACL,QAAQ,EACR,cAAc,EAAE,WAAW,EAC3B,GAAG,IAAI,EACD,EAAE,EAAE;IACV,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAChD,SAAS,CACV,CAAA;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,~~CAAC~~,~~KAAoE~~,~~EAAE~~,EAAE;~~QACvE~~,QAAQ,KAAK,EAAE;YACb,KAAK,aAAa,CAAC,CAAC;gBAClB,OAAO,aAAa,CAAC,mBAAmB,CAAC,CAAA;aAC1C;YACD,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO,aAAa,CAAC,cAAc,CAAC,CAAA;aACrC;YACD,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO,aAAa,CAAC,cAAc,CAAC,CAAA;aACrC;YACD,OAAO,CAAC,CAAC;gBACP,OAAO,aAAa,CAAC,SAAS,CAAC,CAAA;aAChC;SACF;IACH,CAAC,EACD,CAAC,cAAc,EAAE,cAAc,CAAC,CACjC,CAAA;IAED,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAA;SACzB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACb,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAA;SACzB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAChC,CAAC,IAAiB,EAAE,EAAE;QACpB,MAAM,YAAY,~~GAChB~~,~~IAAI,CAAC,~~KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,~~IAAI,CAAC,~~KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,~~IAAI,CAAC,~~KAAK,CAAA;~~QACpE~~,IAAI,YAAY,KAAK,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,KAAI,IAAI,CAAC,EAAE;YAClD,QAAQ,CAAC,IAAI,CAAC,CAAA;SACf;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,~~CACvB~~,CAAA;~~IAED~~,OAAO,CACL,oBAAC,oBAAoB,IACnB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,cAAc,IAAI,UAAU,~~KACpC~~,~~CAAC,~~KAAK,~~CAAC,CAAC,CAAC,~~EAAE,KAAK,~~EAAE~~,~~CAAC,CAAC,CAAC,EAAE,CAAC,EAC5B,~~SAAS,QACT,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,EACrB,UAAU,EAAE;gBACV,cAAc,EAAE,eAAe,CAAC,CAAC,CAAC,CAChC,oBAAC,cAAc,IAAC,QAAQ,EAAC,OAAO;oBAC9B,oBAAC,UAAU,IACT,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;wBAElB,oBAAC,SAAS,OAAG,CACF,CACE,CAClB,CAAC,CAAC,CAAC,SAAS;gBACb,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAC5B,oBAAC,cAAc,IAAC,QAAQ,EAAC,KAAK;oBAC5B,oBAAC,UAAU,IACT,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;wBAElB,oBAAC,SAAS,OAAG,CACF,CACE,CAClB,CAAC,CAAC,CAAC,SAAS;gBACb,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;aAClC,kBACa,WAAW,GACzB,CACH,EACD,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,oBAAC,UAAU,OAAG,EACxB,aAAa,EAAE,oBAAC,SAAS,OAAG~~;QAC5B~~,~~kFAAkF;QAClF~~,QAAQ,EAAE,~~OAAO~~,~~EACjB~~,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,mBAAmB,CAAC,iBAAiB,EAAE,CAAC,aAAa,EAClE,QAAQ,EAAE,QAAQ,~~KACd~~,IAAI,GACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,0BAA0B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport {\n MobileDateTimePicker,\n MobileDateTimePickerProps,\n} from '@mui/x-date-pickers'\nimport { TextField, InputAdornment, IconButton } from '@mui/material'\nimport { AccessTime, DateRange } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { localisationService } from '@oneblink/apps'\n\ntype RemainingPickerProps = Omit<\n MobileDateTimePickerProps<Date>,\n \| 'onError'\n \| 'renderInput'\n \| 'toolbarFormat'\n \| 'timeIcon'\n \| 'dateRangeIcon'\n \| 'rightArrowIcon'\n \| 'leftArrowIcon'\n \| 'maxDate'\n \| 'minDate'\n \| 'inputFormat'\n>\n\ntype TextFieldProps = React.ComponentProps<typeof TextField>\ntype IconButtonProps = React.ComponentProps<typeof IconButton>\n\ntype Props = RemainingPickerProps & {\n name?: ~~string~~\n label?: ~~string~~\n maxDate?: string \| Date\n maxDateMessage?: string\n minDate?: string \| Date\n minDateMessage?: string\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: ~~string~~\n InputProps?: TextFieldProps['InputProps']\n inputVariant?: TextFieldProps['variant']\n startIconButton?: boolean\n endIconButton?: boolean\n iconButtonEdge?: IconButtonProps['edge']\n iconButtonSize?: IconButtonProps['size']\n helperText?: ~~string~~\n error?: ~~boolean~~\n required?: boolean\n 'data-cypress'?: string\n}\n\nconst ~~emptyFn = () => {\n //\n}\nconst~~ V4CompatibleDateTimePicker = ({\n name,\n label,\n maxDate,\n maxDateMessage,\n minDate,\n minDateMessage,\n margin,\n size,\n placeholder,\n InputProps,\n onChange,\n inputVariant,\n disabled,\n startIconButton,\n endIconButton,\n iconButtonEdge,\n iconButtonSize,\n helperText: helperTextProp,\n error,\n required,\n 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\n const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n const [helperText, setHelperText] = React.useState<string \| undefined>(\n undefined,\n )\n const handleError = React.useCallback(\n (error: Parameters<Required<MobileDateTimePickerProps>['onError']>[0]) => {\n switch (error) {\n case 'invalidDate': {\n return setHelperText('Invalid Date Time')\n }\n case 'maxDate': {\n return setHelperText(maxDateMessage)\n }\n case 'minDate': {\n return setHelperText(minDateMessage)\n }\n default: {\n return setHelperText(undefined)\n }\n }\n },\n [maxDateMessage, minDateMessage],\n )\n\n const convertedMaxDate = React.useMemo(() => {\n if (typeof maxDate === 'string') {\n return new Date(maxDate)\n }\n }, [maxDate])\n const convertedMinDate = React.useMemo(() => {\n if (typeof minDate === 'string') {\n return new Date(minDate)\n }\n }, [minDate])\n\n const onAccept = React.useCallback(\n (date: Date \| null) => {\n const currentValue ~~=\n rest.~~value instanceof Date ? ~~rest.~~value.toISOString() : ~~rest.~~value\n if (currentValue !== (date?.toISOString() \|\| null)) {\n onChange(date)\n }\n },\n [onChange, ~~rest.~~value],\n )\n\n return (\n <MobileDateTimePicker\n open={isOpen}\n onOpen={setIsOpen}\n onClose={setIsClosed}\n renderInput={(props) => (\n <TextField\n {...props}\n name={name}\n label={label}\n required={required}\n helperText={helperTextProp \|\| helperText}\n ~~{...(~~error ? { error } ~~: {})}~~\n fullWidth\n margin={margin}\n size={size}\n placeholder={placeholder}\n variant={inputVariant}\n InputProps={{\n startAdornment: startIconButton ? (\n <InputAdornment position=\"start\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n endAdornment: endIconButton ? (\n <InputAdornment position=\"end\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n ...(InputProps ? InputProps : {}),\n }}\n data-cypress={dataCypress}\n />\n )}\n maxDate={convertedMaxDate}\n minDate={convertedMinDate}\n onError={handleError}\n timeIcon={<AccessTime />}\n dateRangeIcon={<DateRange />}\n ~~// This triggers everytime a component of the while date changes within the picker~~\n ~~onChange~~={~~emptyFn~~}\n onAccept={onAccept}\n inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n disabled={disabled}\n {...rest}\n />\n )\n}\n\nexport default React.memo<Props>(V4CompatibleDateTimePicker)\n"]}
1	+ {"version":3,"file":"V4CompatibleDateTimePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleDateTimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,oBAAoB,GAErB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACrE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,eAAe,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AA6CpD,MAAM,0BAA0B,GAAG,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,OAAO,EACP,cAAc,EACd,OAAO,EACP,cAAc,EACd,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,eAAe,EACf,aAAa,EACb,cAAc,EACd,cAAc,EACd,UAAU,EAAE,cAAc,EAC1B,KAAK,EACL,QAAQ,EACR,eAAe,EACf,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,cAAc,EAAE,WAAW,EAC3B,GAAG,IAAI,EACD,EAAE,EAAE;IACV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAmB,IAAI,CAAC,CAAA;IAChE,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAChD,SAAS,CACV,CAAA;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CACE,KAEI,EACJ,EAAE;QACF,QAAQ,KAAK,EAAE;YACb,KAAK,aAAa,CAAC,CAAC;gBAClB,OAAO,aAAa,CAAC,mBAAmB,CAAC,CAAA;aAC1C;YACD,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO,aAAa,CAAC,cAAc,CAAC,CAAA;aACrC;YACD,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO,aAAa,CAAC,cAAc,CAAC,CAAA;aACrC;YACD,OAAO,CAAC,CAAC;gBACP,OAAO,aAAa,CAAC,SAAS,CAAC,CAAA;aAChC;SACF;IACH,CAAC,EACD,CAAC,cAAc,EAAE,cAAc,CAAC,CACjC,CAAA;IAED,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAA;SACzB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACb,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAA;SACzB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAChC,CAAC,IAAiB,EAAE,EAAE;QACpB,MAAM,YAAY,GAAG,KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;QACxE,IAAI,YAAY,KAAK,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,KAAI,IAAI,CAAC,EAAE;YAClD,QAAQ,CAAC,IAAI,CAAC,CAAA;SACf;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB,CAAA;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,OAAO,GAA6B,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAC9D,IAAI,eAAe,EAAE;YACnB,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;SACzB;QACD,IAAI,SAAS,EAAE;YACb,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;SACzB;QACD,OAAO,OAAO,CAAA;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAA;IAEhC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,SAAS,CAAC,CAAA;IACrB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CACL,oBAAC,oBAAoB,IACnB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,cAAc,IAAI,UAAU,EACxC,KAAK,EAAE,KAAK,EACZ,SAAS,QACT,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE;gBACV,cAAc,EAAE,eAAe,CAAC,CAAC,CAAC,CAChC,oBAAC,cAAc,IAAC,QAAQ,EAAC,OAAO;oBAC9B,oBAAC,UAAU,IACT,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;wBAElB,oBAAC,SAAS,OAAG,CACF,CACE,CAClB,CAAC,CAAC,CAAC,SAAS;gBACb,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAC5B,oBAAC,cAAc,IAAC,QAAQ,EAAC,KAAK;oBAC5B,oBAAC,UAAU,IACT,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;wBAElB,oBAAC,SAAS,OAAG,CACF,CACE,CAClB,CAAC,CAAC,CAAC,SAAS;gBACb,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;aAClC,kBACa,WAAW,GACzB,CACH,EACD,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,oBAAC,UAAU,OAAG,EACxB,aAAa,EAAE,oBAAC,SAAS,OAAG,EAC5B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,mBAAmB,CAAC,iBAAiB,EAAE,CAAC,aAAa,EAClE,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE;YACf,SAAS,EAAE;gBACT,OAAO;aACR;SACF,KACG,IAAI,GACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,0BAA0B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport {\n MobileDateTimePicker,\n MobileDateTimePickerProps,\n} from '@mui/x-date-pickers'\nimport { TextField, InputAdornment, IconButton } from '@mui/material'\nimport { AccessTime, DateRange } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { localisationService } from '@oneblink/apps'\nimport { PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar/PickersActionBar'\n\ntype RemainingPickerProps = Omit<\n MobileDateTimePickerProps<string \| Date, Date>,\n \| 'onError'\n \| 'renderInput'\n \| 'toolbarFormat'\n \| 'timeIcon'\n \| 'dateRangeIcon'\n \| 'rightArrowIcon'\n \| 'leftArrowIcon'\n \| 'maxDate'\n \| 'minDate'\n \| 'inputFormat'\n>\n\ntype TextFieldProps = React.ComponentProps<typeof TextField>\ntype IconButtonProps = React.ComponentProps<typeof IconButton>\n\ntype Props = RemainingPickerProps & {\n name?: TextFieldProps['name']\n label?: TextFieldProps['label']\n maxDate?: string \| Date\n maxDateMessage?: string\n minDate?: string \| Date\n minDateMessage?: string\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: TextFieldProps['placeholder']\n InputProps?: TextFieldProps['InputProps']\n inputVariant?: TextFieldProps['variant']\n onBlur?: TextFieldProps['onBlur']\n startIconButton?: boolean\n endIconButton?: boolean\n iconButtonEdge?: IconButtonProps['edge']\n iconButtonSize?: IconButtonProps['size']\n helperText?: TextFieldProps['helperText']\n error?: TextFieldProps['error']\n required?: TextFieldProps['required']\n showTodayButton?: boolean\n clearable?: boolean\n 'data-cypress'?: string\n}\n\nconst V4CompatibleDateTimePicker = ({\n name,\n label,\n maxDate,\n maxDateMessage,\n minDate,\n minDateMessage,\n margin,\n size,\n placeholder,\n InputProps,\n onChange,\n inputVariant,\n onBlur,\n disabled,\n startIconButton,\n endIconButton,\n iconButtonEdge,\n iconButtonSize,\n helperText: helperTextProp,\n error,\n required,\n showTodayButton,\n clearable,\n value: valueProp,\n 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\n const [value, setValue] = React.useState<typeof valueProp>(null)\n const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n const [helperText, setHelperText] = React.useState<string \| undefined>(\n undefined,\n )\n const handleError = React.useCallback(\n (\n error: Parameters<\n Required<MobileDateTimePickerProps<string \| Date, Date>>['onError']\n >[0],\n ) => {\n switch (error) {\n case 'invalidDate': {\n return setHelperText('Invalid Date Time')\n }\n case 'maxDate': {\n return setHelperText(maxDateMessage)\n }\n case 'minDate': {\n return setHelperText(minDateMessage)\n }\n default: {\n return setHelperText(undefined)\n }\n }\n },\n [maxDateMessage, minDateMessage],\n )\n\n const convertedMaxDate = React.useMemo(() => {\n if (typeof maxDate === 'string') {\n return new Date(maxDate)\n }\n }, [maxDate])\n const convertedMinDate = React.useMemo(() => {\n if (typeof minDate === 'string') {\n return new Date(minDate)\n }\n }, [minDate])\n\n const onAccept = React.useCallback(\n (date: Date \| null) => {\n const currentValue = value instanceof Date ? value.toISOString() : value\n if (currentValue !== (date?.toISOString() \|\| null)) {\n onChange(date)\n }\n },\n [onChange, value],\n )\n\n const actions = React.useMemo(() => {\n const actions: PickersActionBarAction[] = ['cancel', 'accept']\n if (showTodayButton) {\n actions.unshift('today')\n }\n if (clearable) {\n actions.unshift('clear')\n }\n return actions\n }, [clearable, showTodayButton])\n\n React.useEffect(() => {\n setValue(valueProp)\n }, [valueProp])\n\n return (\n <MobileDateTimePicker\n open={isOpen}\n onOpen={setIsOpen}\n onClose={setIsClosed}\n renderInput={(props) => (\n <TextField\n {...props}\n name={name}\n label={label}\n required={required}\n helperText={helperTextProp \|\| helperText}\n error={error}\n fullWidth\n margin={margin}\n size={size}\n placeholder={placeholder}\n variant={inputVariant}\n onBlur={onBlur}\n InputProps={{\n startAdornment: startIconButton ? (\n <InputAdornment position=\"start\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n endAdornment: endIconButton ? (\n <InputAdornment position=\"end\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n ...(InputProps ? InputProps : {}),\n }}\n data-cypress={dataCypress}\n />\n )}\n maxDate={convertedMaxDate}\n minDate={convertedMinDate}\n onError={handleError}\n timeIcon={<AccessTime />}\n dateRangeIcon={<DateRange />}\n onChange={setValue}\n value={value}\n onAccept={onAccept}\n inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n disabled={disabled}\n componentsProps={{\n actionBar: {\n actions,\n },\n }}\n {...rest}\n />\n )\n}\n\nexport default React.memo<Props>(V4CompatibleDateTimePicker)\n"]}

package/dist/components/pickers/V4CompatibleTimePicker.d.ts CHANGED Viewed

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { MobileTimePickerProps } from '@mui/x-date-pickers';
 import { TextField, IconButton } from '@mui/material';
-declare type RemainingPickerProps = Omit<MobileTimePickerProps<Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
+declare type RemainingPickerProps = Omit<MobileTimePickerProps<string | Date, Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
 declare type TextFieldProps = React.ComponentProps<typeof TextField>;
 declare type IconButtonProps = React.ComponentProps<typeof IconButton>;
 declare type Props = RemainingPickerProps & {
-    name?: string;
-    label?: string;
+    name?: TextFieldProps['name'];
+    label?: TextFieldProps['label'];
     margin?: TextFieldProps['margin'];
     size?: TextFieldProps['size'];
-    placeholder?: string;
+    placeholder?: TextFieldProps['placeholder'];
     InputProps?: TextFieldProps['InputProps'];
     inputVariant?: TextFieldProps['variant'];
     onBlur?: TextFieldProps['onBlur'];
@@ -17,9 +17,11 @@ declare type Props = RemainingPickerProps & {
     endIconButton?: boolean;
     iconButtonEdge?: IconButtonProps['edge'];
     iconButtonSize?: IconButtonProps['size'];
-    helperText?: string | React.ReactNode;
-    error?: boolean;
-    required?: boolean;
+    helperText?: TextFieldProps['helperText'];
+    error?: TextFieldProps['error'];
+    required?: TextFieldProps['required'];
+    showTodayButton?: boolean;
+    clearable?: boolean;
     'data-cypress'?: string;
 };
 declare const _default: React.NamedExoticComponent<Props>;

package/dist/components/pickers/V4CompatibleTimePicker.js CHANGED Viewed

@@ -3,10 +3,8 @@ import { MobileTimePicker } from '@mui/x-date-pickers';
 import { TextField, InputAdornment, IconButton } from '@mui/material';
 import { AccessTime } from '@mui/icons-material';
 import useBooleanState from '../../hooks/useBooleanState';
-const emptyFn = () => {
-    //
-};
-const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, 'data-cypress': dataCypress, ...rest }) => {
+const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, showTodayButton, clearable, value: valueProp, 'data-cypress': dataCypress, ...rest }) => {
+    const [value, setValue] = React.useState(null);
     const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
     const [helperText, setHelperText] = React.useState(undefined);
     const handleError = React.useCallback((error) => {
@@ -20,12 +18,25 @@ const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputP
         }
     }, []);
     const onAccept = React.useCallback((date) => {
-        const currentValue = rest.value instanceof Date ? rest.value.toISOString() : rest.value;
+        const currentValue = value instanceof Date ? value.toISOString() : value;
         if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
             onChange(date);
         }
-    }, [onChange, rest.value]);
-    return (React.createElement(MobileTimePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, ...(error ? { error } : {}), fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, onBlur: onBlur, InputProps: {
+    }, [onChange, value]);
+    const actions = React.useMemo(() => {
+        const actions = ['cancel', 'accept'];
+        if (showTodayButton) {
+            actions.unshift('today');
+        }
+        if (clearable) {
+            actions.unshift('clear');
+        }
+        return actions;
+    }, [clearable, showTodayButton]);
+    React.useEffect(() => {
+        setValue(valueProp);
+    }, [valueProp]);
+    return (React.createElement(MobileTimePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, error: error, fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, onBlur: onBlur, InputProps: {
                 startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
                     React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
                         React.createElement(AccessTime, null)))) : undefined,
@@ -33,9 +44,11 @@ const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputP
                     React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
                         React.createElement(AccessTime, null)))) : undefined,
                 ...(InputProps ? InputProps : {}),
-            }, "data-cypress": dataCypress })), onError: handleError,
-        // This triggers everytime a component of the while date changes within the picker
-        onChange: emptyFn, onAccept: onAccept, disabled: disabled, ...rest }));
+            }, "data-cypress": dataCypress })), onError: handleError, onChange: setValue, value: value, onAccept: onAccept, disabled: disabled, componentsProps: {
+            actionBar: {
+                actions,
+            },
+        }, ...rest }));
 };
 export default React.memo(V4CompatibleTimePicker);
 //# sourceMappingURL=V4CompatibleTimePicker.js.map

package/dist/components/pickers/V4CompatibleTimePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"V4CompatibleTimePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleTimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,gBAAgB,EAAyB,MAAM,qBAAqB,CAAA;AAC7E,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,eAAe,MAAM,6BAA6B,CAAA;~~AAoCzD~~,MAAM,~~OAAO,GAAG,GAAG,EAAE;IACnB,EAAE;AACJ,CAAC,CAAA;AACD,MAAM,~~sBAAsB,GAAG,CAAC,EAC9B,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,eAAe,EACf,aAAa,EACb,cAAc,EACd,cAAc,EACd,UAAU,EAAE,cAAc,EAC1B,KAAK,EACL,QAAQ,EACR,cAAc,EAAE,WAAW,EAC3B,GAAG,IAAI,EACD,EAAE,EAAE;IACV,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAChD,SAAS,CACV,CAAA;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,~~CAAC~~,~~KAAgE~~,~~EAAE~~,EAAE;~~QACnE~~,QAAQ,KAAK,EAAE;YACb,KAAK,aAAa,CAAC,CAAC;gBAClB,OAAO,aAAa,CAAC,mBAAmB,CAAC,CAAA;aAC1C;YACD,OAAO,CAAC,CAAC;gBACP,OAAO,aAAa,CAAC,SAAS,CAAC,CAAA;aAChC;SACF;IACH,CAAC,EACD,EAAE,CACH,CAAA;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAChC,CAAC,IAAiB,EAAE,EAAE;QACpB,MAAM,YAAY,~~GAChB~~,~~IAAI,CAAC,~~KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,~~IAAI,CAAC,~~KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,~~IAAI,CAAC,~~KAAK,CAAA;~~QAEpE~~,IAAI,YAAY,KAAK,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,KAAI,IAAI,CAAC,EAAE;YAClD,QAAQ,CAAC,IAAI,CAAC,CAAA;SACf;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,~~CACvB~~,CAAA;~~IAED~~,OAAO,CACL,oBAAC,gBAAgB,IACf,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,cAAc,IAAI,UAAU,~~KACpC~~,~~CAAC,~~KAAK,~~CAAC,CAAC,CAAC,~~EAAE,KAAK,~~EAAE~~,~~CAAC,CAAC,CAAC,EAAE,CAAC,EAC5B,~~SAAS,QACT,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE;gBACV,cAAc,EAAE,eAAe,CAAC,CAAC,CAAC,CAChC,oBAAC,cAAc,IAAC,QAAQ,EAAC,OAAO;oBAC9B,oBAAC,UAAU,IACT,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;wBAElB,oBAAC,UAAU,OAAG,CACH,CACE,CAClB,CAAC,CAAC,CAAC,SAAS;gBACb,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAC5B,oBAAC,cAAc,IAAC,QAAQ,EAAC,KAAK;oBAC5B,oBAAC,UAAU,IACT,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;wBAElB,oBAAC,UAAU,OAAG,CACH,CACE,CAClB,CAAC,CAAC,CAAC,SAAS;gBACb,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;aAClC,kBACa,WAAW,GACzB,CACH,EACD,OAAO,EAAE,WAAW~~;QACpB~~,~~kFAAkF;QAClF~~,QAAQ,EAAE,~~OAAO~~,~~EACjB~~,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,~~KACd~~,IAAI,GACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,sBAAsB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { MobileTimePicker, MobileTimePickerProps } from '@mui/x-date-pickers'\nimport { TextField, InputAdornment, IconButton } from '@mui/material'\nimport { AccessTime } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\n\ntype RemainingPickerProps = Omit<\n MobileTimePickerProps<Date>,\n \| 'onError'\n \| 'renderInput'\n \| 'toolbarFormat'\n \| 'rightArrowIcon'\n \| 'leftArrowIcon'\n \| 'maxDate'\n \| 'minDate'\n \| 'inputFormat'\n>\n\ntype TextFieldProps = React.ComponentProps<typeof TextField>\ntype IconButtonProps = React.ComponentProps<typeof IconButton>\n\ntype Props = RemainingPickerProps & {\n name?: ~~string~~\n label?: ~~string~~\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: ~~string~~\n InputProps?: TextFieldProps['InputProps']\n inputVariant?: TextFieldProps['variant']\n onBlur?: TextFieldProps['onBlur']\n startIconButton?: boolean\n endIconButton?: boolean\n iconButtonEdge?: IconButtonProps['edge']\n iconButtonSize?: IconButtonProps['size']\n helperText?: ~~string~~ \| ~~React.ReactNode~~\n ~~error~~?: boolean\n ~~required~~?: boolean\n 'data-cypress'?: string\n}\n\nconst ~~emptyFn = () => {\n //\n}\nconst~~ V4CompatibleTimePicker = ({\n name,\n label,\n margin,\n size,\n placeholder,\n InputProps,\n onChange,\n inputVariant,\n onBlur,\n disabled,\n startIconButton,\n endIconButton,\n iconButtonEdge,\n iconButtonSize,\n helperText: helperTextProp,\n error,\n required,\n 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\n const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n const [helperText, setHelperText] = React.useState<string \| undefined>(\n undefined,\n )\n const handleError = React.useCallback(\n (error: Parameters<Required<MobileTimePickerProps>['onError']>[0]) => {\n switch (error) {\n case 'invalidDate': {\n return setHelperText('Invalid Date Time')\n }\n default: {\n return setHelperText(undefined)\n }\n }\n },\n [],\n )\n\n const onAccept = React.useCallback(\n (date: Date \| null) => {\n const currentValue ~~=\n rest.~~value instanceof Date ? ~~rest.~~value.toISOString() : ~~rest.~~value\n\n if (currentValue !== (date?.toISOString() \|\| null)) {\n onChange(date)\n }\n },\n [onChange, ~~rest.~~value],\n )\n\n return (\n <MobileTimePicker\n open={isOpen}\n onOpen={setIsOpen}\n onClose={setIsClosed}\n renderInput={(props) => (\n <TextField\n {...props}\n name={name}\n label={label}\n required={required}\n helperText={helperTextProp \|\| helperText}\n ~~{...(~~error ? { error } ~~: {})}~~\n fullWidth\n margin={margin}\n size={size}\n placeholder={placeholder}\n variant={inputVariant}\n onBlur={onBlur}\n InputProps={{\n startAdornment: startIconButton ? (\n <InputAdornment position=\"start\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <AccessTime />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n endAdornment: endIconButton ? (\n <InputAdornment position=\"end\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <AccessTime />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n ...(InputProps ? InputProps : {}),\n }}\n data-cypress={dataCypress}\n />\n )}\n onError={handleError}\n ~~// This triggers everytime a component of the while date changes within the picker~~\n ~~onChange~~={~~emptyFn~~}\n onAccept={onAccept}\n disabled={disabled}\n {...rest}\n />\n )\n}\n\nexport default React.memo<Props>(V4CompatibleTimePicker)\n"]}
1	+ {"version":3,"file":"V4CompatibleTimePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleTimePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { MobileTimePicker, MobileTimePickerProps } from '@mui/x-date-pickers'\nimport { TextField, InputAdornment, IconButton } from '@mui/material'\nimport { AccessTime } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar/PickersActionBar'\n\ntype RemainingPickerProps = Omit<\n MobileTimePickerProps<string \| Date, Date>,\n \| 'onError'\n \| 'renderInput'\n \| 'toolbarFormat'\n \| 'rightArrowIcon'\n \| 'leftArrowIcon'\n \| 'maxDate'\n \| 'minDate'\n \| 'inputFormat'\n>\n\ntype TextFieldProps = React.ComponentProps<typeof TextField>\ntype IconButtonProps = React.ComponentProps<typeof IconButton>\n\ntype Props = RemainingPickerProps & {\n name?: TextFieldProps['name']\n label?: TextFieldProps['label']\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: TextFieldProps['placeholder']\n InputProps?: TextFieldProps['InputProps']\n inputVariant?: TextFieldProps['variant']\n onBlur?: TextFieldProps['onBlur']\n startIconButton?: boolean\n endIconButton?: boolean\n iconButtonEdge?: IconButtonProps['edge']\n iconButtonSize?: IconButtonProps['size']\n helperText?: TextFieldProps['helperText']\n error?: TextFieldProps['error']\n required?: TextFieldProps['required']\n showTodayButton?: boolean\n clearable?: boolean\n 'data-cypress'?: string\n}\n\nconst V4CompatibleTimePicker = ({\n name,\n label,\n margin,\n size,\n placeholder,\n InputProps,\n onChange,\n inputVariant,\n onBlur,\n disabled,\n startIconButton,\n endIconButton,\n iconButtonEdge,\n iconButtonSize,\n helperText: helperTextProp,\n error,\n required,\n showTodayButton,\n clearable,\n value: valueProp,\n 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\n const [value, setValue] = React.useState<typeof valueProp>(null)\n const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n const [helperText, setHelperText] = React.useState<string \| undefined>(\n undefined,\n )\n const handleError = React.useCallback(\n (\n error: Parameters<\n Required<MobileTimePickerProps<string \| Date, Date>>['onError']\n >[0],\n ) => {\n switch (error) {\n case 'invalidDate': {\n return setHelperText('Invalid Date Time')\n }\n default: {\n return setHelperText(undefined)\n }\n }\n },\n [],\n )\n\n const onAccept = React.useCallback(\n (date: Date \| null) => {\n const currentValue = value instanceof Date ? value.toISOString() : value\n if (currentValue !== (date?.toISOString() \|\| null)) {\n onChange(date)\n }\n },\n [onChange, value],\n )\n\n const actions = React.useMemo(() => {\n const actions: PickersActionBarAction[] = ['cancel', 'accept']\n if (showTodayButton) {\n actions.unshift('today')\n }\n if (clearable) {\n actions.unshift('clear')\n }\n return actions\n }, [clearable, showTodayButton])\n\n React.useEffect(() => {\n setValue(valueProp)\n }, [valueProp])\n\n return (\n <MobileTimePicker\n open={isOpen}\n onOpen={setIsOpen}\n onClose={setIsClosed}\n renderInput={(props) => (\n <TextField\n {...props}\n name={name}\n label={label}\n required={required}\n helperText={helperTextProp \|\| helperText}\n error={error}\n fullWidth\n margin={margin}\n size={size}\n placeholder={placeholder}\n variant={inputVariant}\n onBlur={onBlur}\n InputProps={{\n startAdornment: startIconButton ? (\n <InputAdornment position=\"start\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <AccessTime />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n endAdornment: endIconButton ? (\n <InputAdornment position=\"end\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <AccessTime />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n ...(InputProps ? InputProps : {}),\n }}\n data-cypress={dataCypress}\n />\n )}\n onError={handleError}\n onChange={setValue}\n value={value}\n onAccept={onAccept}\n disabled={disabled}\n componentsProps={{\n actionBar: {\n actions,\n },\n }}\n {...rest}\n />\n )\n}\n\nexport default React.memo<Props>(V4CompatibleTimePicker)\n"]}

package/dist/components/renderer/AnnotationModal.js CHANGED Viewed

@@ -93,9 +93,7 @@ function AnnotationModal({ imageSrc, onClose, onSave, }) {
             })),
             React.createElement("div", { ref: annotationContentElementRef, className: "ob-annotation__content" },
                 React.createElement("div", { ref: bmSignaturePadRef, className: "ob-annotation__signature-pad cypress-annotation-signature-pad" },
-                    React.createElement(SignatureCanvas, { ref: signatureCanvasRef, clearOnResize: false,
-                        // @ts-expect-error ???
-                        onEnd: setDirty, penColor: penColour }))),
+                    React.createElement(SignatureCanvas, { ref: signatureCanvasRef, clearOnResize: false, onEnd: setDirty, penColor: penColour }))),
             React.createElement("div", { className: "ob-annotation__buttons ob-annotation__buttons-actions" },
                 React.createElement("button", { type: "button", className: "button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-cancel-button", onClick: handleCancelAnnotation }, "Cancel"),
                 React.createElement("button", { type: "button", className: "button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-save-button", disabled: !isDirty, onClick: handleSaveAnnotation }, "Save")))));

package/dist/components/renderer/AnnotationModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnnotationModal.js","sourceRoot":"","sources":["../../../src/components/renderer/AnnotationModal.tsx"],"names":[],"mappings":"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~~;wBACpB~~,~~uBAAuB;wBACvB~~,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,SAAS,GACnB,CACE,CACF;YACN,6BAAK,SAAS,EAAC,uDAAuD;gBACpE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,+GAA+G,EACzH,OAAO,EAAE,sBAAsB,aAGxB;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,+GAA+G,EACzH,QAAQ,EAAE,CAAC,OAAO,EAClB,OAAO,EAAE,oBAAoB,WAGtB,CACL,CACF,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport SignatureCanvas from 'react-signature-canvas'\n\nimport useBooleanState from '../../hooks/useBooleanState'\nimport scrollingService from '../../services/scrolling-service'\n\nconst annotationButtonColours = [\n '#000000',\n '#ffffff',\n '#f44336',\n '#e91e63',\n '#9c27b0',\n '#673ab7',\n '#3f51b5',\n '#2196f3',\n '#03a9f4',\n '#00bcd4',\n '#009688',\n '#4caf50',\n '#8bc34a',\n '#cddc39',\n '#ffee58',\n '#ffca28',\n '#ffa726',\n '#ff5722',\n]\n\nfunction AnnotationModal({\n imageSrc,\n onClose,\n onSave,\n}: {\n imageSrc: string\n onClose: () => void\n onSave: (newValue: string) => void\n}) {\n const annotationContentElementRef = React.useRef<HTMLDivElement>(null)\n const bmSignaturePadRef = React.useRef<HTMLDivElement>(null)\n const signatureCanvasRef = React.useRef<SignatureCanvas>(null)\n\n const [isDirty, setDirty] = useBooleanState(false)\n const [penColour, setPenColour] = React.useState(annotationButtonColours[0])\n\n const handleCancelAnnotation = React.useCallback(() => {\n if (signatureCanvasRef.current) {\n console.log('Clearing annotation...')\n signatureCanvasRef.current.clear()\n }\n onClose()\n }, [onClose])\n\n const handleSaveAnnotation = React.useCallback(() => {\n if (signatureCanvasRef.current) {\n onSave(signatureCanvasRef.current.toDataURL())\n }\n }, [onSave])\n\n // SETTING CANVAS FROM PASSED VALUE\n React.useEffect(() => {\n const annotationContentElement = annotationContentElementRef.current\n const bmSignaturePadElement = bmSignaturePadRef.current\n const signatureCanvas = signatureCanvasRef.current\n if (\n !annotationContentElement \|\|\n !bmSignaturePadElement \|\|\n !signatureCanvas \|\|\n typeof imageSrc !== 'string'\n ) {\n return\n }\n const canvasElement = signatureCanvas.getCanvas()\n\n // Disable scrolling to allow for smooth drawing\n scrollingService.disableScrolling()\n\n const maxWidth = annotationContentElement.clientWidth\n const maxHeight = annotationContentElement.clientHeight\n\n const i = new Image()\n i.onload = function () {\n const imageWidth = i.width\n const imageHeight = i.height\n let canvasWidth = imageWidth\n let canvasHeight = imageHeight\n\n if (imageWidth > maxWidth \|\| imageHeight > maxHeight) {\n const widthRatio = maxWidth / imageWidth\n const heightRatio = maxHeight / imageHeight\n const ratio = Math.min(widthRatio, heightRatio)\n\n canvasWidth = ratio * imageWidth\n canvasHeight = ratio * imageHeight\n }\n\n bmSignaturePadElement.style.width = `${canvasWidth}px`\n bmSignaturePadElement.style.height = `${canvasHeight}px`\n bmSignaturePadElement.style.backgroundSize = 'cover'\n bmSignaturePadElement.style.backgroundImage = `url(${imageSrc})`\n canvasElement.width = canvasWidth\n canvasElement.height = canvasHeight\n }\n console.log('imageSrc', imageSrc)\n i.src = imageSrc\n\n return () => {\n scrollingService.enableScrolling()\n }\n }, [imageSrc])\n\n return (\n <div className=\"modal is-active\">\n <div className=\"modal-background-faded\"></div>\n <div className=\"ob-annotation\">\n <div className=\"ob-annotation__buttons ob-annotation__buttons-colours\">\n {annotationButtonColours.map((colour, index) => {\n return (\n <button\n key={index}\n type=\"button\"\n className={clsx(\n 'button ob-annotation__button ob-annotation__button-colour cypress-annotation-colour-button',\n {\n 'is-selected': penColour === colour,\n },\n )}\n onClick={() => setPenColour(colour)}\n style={{ backgroundColor: colour }}\n />\n )\n })}\n </div>\n <div\n ref={annotationContentElementRef}\n className=\"ob-annotation__content\"\n >\n <div\n ref={bmSignaturePadRef}\n className=\"ob-annotation__signature-pad cypress-annotation-signature-pad\"\n >\n <SignatureCanvas\n ref={signatureCanvasRef}\n clearOnResize={false}\n ~~// @ts-expect-error ???\n~~ onEnd={setDirty}\n penColor={penColour}\n />\n </div>\n </div>\n <div className=\"ob-annotation__buttons ob-annotation__buttons-actions\">\n <button\n type=\"button\"\n className=\"button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-cancel-button\"\n onClick={handleCancelAnnotation}\n >\n Cancel\n </button>\n <button\n type=\"button\"\n className=\"button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-save-button\"\n disabled={!isDirty}\n onClick={handleSaveAnnotation}\n >\n Save\n </button>\n </div>\n </div>\n </div>\n )\n}\n\nexport default React.memo(AnnotationModal)\n"]}
1	+ {"version":3,"file":"AnnotationModal.js","sourceRoot":"","sources":["../../../src/components/renderer/AnnotationModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport SignatureCanvas from 'react-signature-canvas'\n\nimport useBooleanState from '../../hooks/useBooleanState'\nimport scrollingService from '../../services/scrolling-service'\n\nconst annotationButtonColours = [\n '#000000',\n '#ffffff',\n '#f44336',\n '#e91e63',\n '#9c27b0',\n '#673ab7',\n '#3f51b5',\n '#2196f3',\n '#03a9f4',\n '#00bcd4',\n '#009688',\n '#4caf50',\n '#8bc34a',\n '#cddc39',\n '#ffee58',\n '#ffca28',\n '#ffa726',\n '#ff5722',\n]\n\nfunction AnnotationModal({\n imageSrc,\n onClose,\n onSave,\n}: {\n imageSrc: string\n onClose: () => void\n onSave: (newValue: string) => void\n}) {\n const annotationContentElementRef = React.useRef<HTMLDivElement>(null)\n const bmSignaturePadRef = React.useRef<HTMLDivElement>(null)\n const signatureCanvasRef = React.useRef<SignatureCanvas>(null)\n\n const [isDirty, setDirty] = useBooleanState(false)\n const [penColour, setPenColour] = React.useState(annotationButtonColours[0])\n\n const handleCancelAnnotation = React.useCallback(() => {\n if (signatureCanvasRef.current) {\n console.log('Clearing annotation...')\n signatureCanvasRef.current.clear()\n }\n onClose()\n }, [onClose])\n\n const handleSaveAnnotation = React.useCallback(() => {\n if (signatureCanvasRef.current) {\n onSave(signatureCanvasRef.current.toDataURL())\n }\n }, [onSave])\n\n // SETTING CANVAS FROM PASSED VALUE\n React.useEffect(() => {\n const annotationContentElement = annotationContentElementRef.current\n const bmSignaturePadElement = bmSignaturePadRef.current\n const signatureCanvas = signatureCanvasRef.current\n if (\n !annotationContentElement \|\|\n !bmSignaturePadElement \|\|\n !signatureCanvas \|\|\n typeof imageSrc !== 'string'\n ) {\n return\n }\n const canvasElement = signatureCanvas.getCanvas()\n\n // Disable scrolling to allow for smooth drawing\n scrollingService.disableScrolling()\n\n const maxWidth = annotationContentElement.clientWidth\n const maxHeight = annotationContentElement.clientHeight\n\n const i = new Image()\n i.onload = function () {\n const imageWidth = i.width\n const imageHeight = i.height\n let canvasWidth = imageWidth\n let canvasHeight = imageHeight\n\n if (imageWidth > maxWidth \|\| imageHeight > maxHeight) {\n const widthRatio = maxWidth / imageWidth\n const heightRatio = maxHeight / imageHeight\n const ratio = Math.min(widthRatio, heightRatio)\n\n canvasWidth = ratio * imageWidth\n canvasHeight = ratio * imageHeight\n }\n\n bmSignaturePadElement.style.width = `${canvasWidth}px`\n bmSignaturePadElement.style.height = `${canvasHeight}px`\n bmSignaturePadElement.style.backgroundSize = 'cover'\n bmSignaturePadElement.style.backgroundImage = `url(${imageSrc})`\n canvasElement.width = canvasWidth\n canvasElement.height = canvasHeight\n }\n console.log('imageSrc', imageSrc)\n i.src = imageSrc\n\n return () => {\n scrollingService.enableScrolling()\n }\n }, [imageSrc])\n\n return (\n <div className=\"modal is-active\">\n <div className=\"modal-background-faded\"></div>\n <div className=\"ob-annotation\">\n <div className=\"ob-annotation__buttons ob-annotation__buttons-colours\">\n {annotationButtonColours.map((colour, index) => {\n return (\n <button\n key={index}\n type=\"button\"\n className={clsx(\n 'button ob-annotation__button ob-annotation__button-colour cypress-annotation-colour-button',\n {\n 'is-selected': penColour === colour,\n },\n )}\n onClick={() => setPenColour(colour)}\n style={{ backgroundColor: colour }}\n />\n )\n })}\n </div>\n <div\n ref={annotationContentElementRef}\n className=\"ob-annotation__content\"\n >\n <div\n ref={bmSignaturePadRef}\n className=\"ob-annotation__signature-pad cypress-annotation-signature-pad\"\n >\n <SignatureCanvas\n ref={signatureCanvasRef}\n clearOnResize={false}\n onEnd={setDirty}\n penColor={penColour}\n />\n </div>\n </div>\n <div className=\"ob-annotation__buttons ob-annotation__buttons-actions\">\n <button\n type=\"button\"\n className=\"button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-cancel-button\"\n onClick={handleCancelAnnotation}\n >\n Cancel\n </button>\n <button\n type=\"button\"\n className=\"button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-save-button\"\n disabled={!isDirty}\n onClick={handleSaveAnnotation}\n >\n Save\n </button>\n </div>\n </div>\n </div>\n )\n}\n\nexport default React.memo(AnnotationModal)\n"]}