@oneblink/apps-react 2.0.0-beta.1 → 2.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Lists.d.ts +1 -1
- package/dist/components/pickers/V4CompatibleDatePicker.d.ts +9 -7
- package/dist/components/pickers/V4CompatibleDatePicker.js +23 -10
- package/dist/components/pickers/V4CompatibleDatePicker.js.map +1 -1
- package/dist/components/pickers/V4CompatibleDateTimePicker.d.ts +10 -7
- package/dist/components/pickers/V4CompatibleDateTimePicker.js +23 -10
- package/dist/components/pickers/V4CompatibleDateTimePicker.js.map +1 -1
- package/dist/components/pickers/V4CompatibleTimePicker.d.ts +9 -7
- package/dist/components/pickers/V4CompatibleTimePicker.js +23 -10
- package/dist/components/pickers/V4CompatibleTimePicker.js.map +1 -1
- package/dist/components/renderer/AnnotationModal.js +1 -3
- package/dist/components/renderer/AnnotationModal.js.map +1 -1
- package/dist/form-elements/FormElementABN.js +3 -1
- package/dist/form-elements/FormElementABN.js.map +1 -1
- package/dist/form-elements/FormElementBSB.js +3 -1
- package/dist/form-elements/FormElementBSB.js.map +1 -1
- package/dist/form-elements/FormElementFiles.js +27 -7
- package/dist/form-elements/FormElementFiles.js.map +1 -1
- package/dist/form-elements/FormElementSignature.js +2 -2
- package/dist/form-elements/FormElementSignature.js.map +1 -1
- package/dist/hooks/useContrastColor.d.ts +1 -1
- package/dist/hooks/useInfiniteScrollDataLoad.d.ts +1 -1
- package/dist/hooks/useLookups.d.ts +1 -1
- package/dist/services/blob-utils.js +0 -1
- package/dist/services/blob-utils.js.map +1 -1
- package/dist/services/generate-default-data.js +6 -4
- package/dist/services/generate-default-data.js.map +1 -1
- package/package.json +34 -35
- package/dist/components/renderer/attachments/Files.d.ts +0 -14
- package/dist/components/renderer/attachments/Files.js +0 -27
- package/dist/components/renderer/attachments/Files.js.map +0 -1
|
@@ -21,5 +21,5 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<Omit<im
|
|
|
21
21
|
variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
|
|
22
22
|
} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
|
|
23
23
|
ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
|
|
24
|
-
}, "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" | "
|
|
24
|
+
}, "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, {}, {}>;
|
|
25
25
|
export {};
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { MobileDatePickerProps } from '@mui/x-date-pickers';
|
|
3
3
|
import { TextField, IconButton } from '@mui/material';
|
|
4
|
-
declare type RemainingPickerProps = Omit<MobileDatePickerProps<Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
|
|
4
|
+
declare type RemainingPickerProps = Omit<MobileDatePickerProps<string | Date, Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
|
|
5
5
|
declare type TextFieldProps = React.ComponentProps<typeof TextField>;
|
|
6
6
|
declare type IconButtonProps = React.ComponentProps<typeof IconButton>;
|
|
7
7
|
declare type Props = RemainingPickerProps & {
|
|
8
|
-
name?:
|
|
9
|
-
label?:
|
|
8
|
+
name?: TextFieldProps['name'];
|
|
9
|
+
label?: TextFieldProps['label'];
|
|
10
10
|
maxDate?: string | Date;
|
|
11
11
|
maxDateMessage?: string;
|
|
12
12
|
minDate?: string | Date;
|
|
13
13
|
minDateMessage?: string;
|
|
14
14
|
margin?: TextFieldProps['margin'];
|
|
15
15
|
size?: TextFieldProps['size'];
|
|
16
|
-
placeholder?:
|
|
16
|
+
placeholder?: TextFieldProps['placeholder'];
|
|
17
17
|
InputProps?: TextFieldProps['InputProps'];
|
|
18
18
|
inputVariant?: TextFieldProps['variant'];
|
|
19
19
|
onBlur?: TextFieldProps['onBlur'];
|
|
@@ -21,9 +21,11 @@ declare type Props = RemainingPickerProps & {
|
|
|
21
21
|
endIconButton?: boolean;
|
|
22
22
|
iconButtonEdge?: IconButtonProps['edge'];
|
|
23
23
|
iconButtonSize?: IconButtonProps['size'];
|
|
24
|
-
helperText?:
|
|
25
|
-
error?:
|
|
26
|
-
required?:
|
|
24
|
+
helperText?: TextFieldProps['helperText'];
|
|
25
|
+
error?: TextFieldProps['error'];
|
|
26
|
+
required?: TextFieldProps['required'];
|
|
27
|
+
showTodayButton?: boolean;
|
|
28
|
+
clearable?: boolean;
|
|
27
29
|
'data-cypress'?: string;
|
|
28
30
|
};
|
|
29
31
|
declare const _default: React.NamedExoticComponent<Props>;
|
|
@@ -4,10 +4,8 @@ import { TextField, InputAdornment, IconButton } from '@mui/material';
|
|
|
4
4
|
import { DateRange } from '@mui/icons-material';
|
|
5
5
|
import useBooleanState from '../../hooks/useBooleanState';
|
|
6
6
|
import { localisationService } from '@oneblink/apps';
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
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 }) => {
|
|
7
|
+
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 }) => {
|
|
8
|
+
const [value, setValue] = React.useState(null);
|
|
11
9
|
const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
|
|
12
10
|
const [helperText, setHelperText] = React.useState(undefined);
|
|
13
11
|
const handleError = React.useCallback((error) => {
|
|
@@ -37,12 +35,25 @@ const V4CompatibleDatePicker = ({ name, label, maxDate, maxDateMessage, minDate,
|
|
|
37
35
|
}
|
|
38
36
|
}, [minDate]);
|
|
39
37
|
const onAccept = React.useCallback((date) => {
|
|
40
|
-
const currentValue =
|
|
38
|
+
const currentValue = valueProp instanceof Date ? valueProp.toISOString() : valueProp;
|
|
41
39
|
if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
|
|
42
40
|
onChange(date);
|
|
43
41
|
}
|
|
44
|
-
}, [onChange,
|
|
45
|
-
|
|
42
|
+
}, [onChange, valueProp]);
|
|
43
|
+
const actions = React.useMemo(() => {
|
|
44
|
+
const actions = ['cancel', 'accept'];
|
|
45
|
+
if (showTodayButton) {
|
|
46
|
+
actions.unshift('today');
|
|
47
|
+
}
|
|
48
|
+
if (clearable) {
|
|
49
|
+
actions.unshift('clear');
|
|
50
|
+
}
|
|
51
|
+
return actions;
|
|
52
|
+
}, [clearable, showTodayButton]);
|
|
53
|
+
React.useEffect(() => {
|
|
54
|
+
setValue(valueProp);
|
|
55
|
+
}, [valueProp]);
|
|
56
|
+
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: {
|
|
46
57
|
startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
|
|
47
58
|
React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
|
|
48
59
|
React.createElement(DateRange, null)))) : undefined,
|
|
@@ -50,9 +61,11 @@ const V4CompatibleDatePicker = ({ name, label, maxDate, maxDateMessage, minDate,
|
|
|
50
61
|
React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
|
|
51
62
|
React.createElement(DateRange, null)))) : undefined,
|
|
52
63
|
...(InputProps ? InputProps : {}),
|
|
53
|
-
}, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError,
|
|
54
|
-
|
|
55
|
-
|
|
64
|
+
}, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError, onChange: setValue, value: value, onAccept: onAccept, inputFormat: localisationService.getDateFnsFormats().shortDateTime, disabled: disabled, componentsProps: {
|
|
65
|
+
actionBar: {
|
|
66
|
+
actions,
|
|
67
|
+
},
|
|
68
|
+
}, ...rest }));
|
|
56
69
|
};
|
|
57
70
|
export default React.memo(V4CompatibleDatePicker);
|
|
58
71
|
//# sourceMappingURL=V4CompatibleDatePicker.js.map
|
|
@@ -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;
|
|
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 =\n valueProp instanceof Date ? valueProp.toISOString() : valueProp\n if (currentValue !== (date?.toISOString() || null)) {\n onChange(date)\n }\n },\n [onChange, valueProp],\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"]}
|
|
@@ -1,28 +1,31 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { MobileDateTimePickerProps } from '@mui/x-date-pickers';
|
|
3
3
|
import { TextField, IconButton } from '@mui/material';
|
|
4
|
-
declare type RemainingPickerProps = Omit<MobileDateTimePickerProps<Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'timeIcon' | 'dateRangeIcon' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
|
|
4
|
+
declare type RemainingPickerProps = Omit<MobileDateTimePickerProps<string | Date, Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'timeIcon' | 'dateRangeIcon' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
|
|
5
5
|
declare type TextFieldProps = React.ComponentProps<typeof TextField>;
|
|
6
6
|
declare type IconButtonProps = React.ComponentProps<typeof IconButton>;
|
|
7
7
|
declare type Props = RemainingPickerProps & {
|
|
8
|
-
name?:
|
|
9
|
-
label?:
|
|
8
|
+
name?: TextFieldProps['name'];
|
|
9
|
+
label?: TextFieldProps['label'];
|
|
10
10
|
maxDate?: string | Date;
|
|
11
11
|
maxDateMessage?: string;
|
|
12
12
|
minDate?: string | Date;
|
|
13
13
|
minDateMessage?: string;
|
|
14
14
|
margin?: TextFieldProps['margin'];
|
|
15
15
|
size?: TextFieldProps['size'];
|
|
16
|
-
placeholder?:
|
|
16
|
+
placeholder?: TextFieldProps['placeholder'];
|
|
17
17
|
InputProps?: TextFieldProps['InputProps'];
|
|
18
18
|
inputVariant?: TextFieldProps['variant'];
|
|
19
|
+
onBlur?: TextFieldProps['onBlur'];
|
|
19
20
|
startIconButton?: boolean;
|
|
20
21
|
endIconButton?: boolean;
|
|
21
22
|
iconButtonEdge?: IconButtonProps['edge'];
|
|
22
23
|
iconButtonSize?: IconButtonProps['size'];
|
|
23
|
-
helperText?:
|
|
24
|
-
error?:
|
|
25
|
-
required?:
|
|
24
|
+
helperText?: TextFieldProps['helperText'];
|
|
25
|
+
error?: TextFieldProps['error'];
|
|
26
|
+
required?: TextFieldProps['required'];
|
|
27
|
+
showTodayButton?: boolean;
|
|
28
|
+
clearable?: boolean;
|
|
26
29
|
'data-cypress'?: string;
|
|
27
30
|
};
|
|
28
31
|
declare const _default: React.NamedExoticComponent<Props>;
|
|
@@ -4,10 +4,8 @@ import { TextField, InputAdornment, IconButton } from '@mui/material';
|
|
|
4
4
|
import { AccessTime, DateRange } from '@mui/icons-material';
|
|
5
5
|
import useBooleanState from '../../hooks/useBooleanState';
|
|
6
6
|
import { localisationService } from '@oneblink/apps';
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
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 }) => {
|
|
7
|
+
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 }) => {
|
|
8
|
+
const [value, setValue] = React.useState(null);
|
|
11
9
|
const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
|
|
12
10
|
const [helperText, setHelperText] = React.useState(undefined);
|
|
13
11
|
const handleError = React.useCallback((error) => {
|
|
@@ -37,12 +35,25 @@ const V4CompatibleDateTimePicker = ({ name, label, maxDate, maxDateMessage, minD
|
|
|
37
35
|
}
|
|
38
36
|
}, [minDate]);
|
|
39
37
|
const onAccept = React.useCallback((date) => {
|
|
40
|
-
const currentValue =
|
|
38
|
+
const currentValue = valueProp instanceof Date ? valueProp.toISOString() : valueProp;
|
|
41
39
|
if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
|
|
42
40
|
onChange(date);
|
|
43
41
|
}
|
|
44
|
-
}, [onChange,
|
|
45
|
-
|
|
42
|
+
}, [onChange, valueProp]);
|
|
43
|
+
const actions = React.useMemo(() => {
|
|
44
|
+
const actions = ['cancel', 'accept'];
|
|
45
|
+
if (showTodayButton) {
|
|
46
|
+
actions.unshift('today');
|
|
47
|
+
}
|
|
48
|
+
if (clearable) {
|
|
49
|
+
actions.unshift('clear');
|
|
50
|
+
}
|
|
51
|
+
return actions;
|
|
52
|
+
}, [clearable, showTodayButton]);
|
|
53
|
+
React.useEffect(() => {
|
|
54
|
+
setValue(valueProp);
|
|
55
|
+
}, [valueProp]);
|
|
56
|
+
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: {
|
|
46
57
|
startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
|
|
47
58
|
React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
|
|
48
59
|
React.createElement(DateRange, null)))) : undefined,
|
|
@@ -50,9 +61,11 @@ const V4CompatibleDateTimePicker = ({ name, label, maxDate, maxDateMessage, minD
|
|
|
50
61
|
React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
|
|
51
62
|
React.createElement(DateRange, null)))) : undefined,
|
|
52
63
|
...(InputProps ? InputProps : {}),
|
|
53
|
-
}, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError, timeIcon: React.createElement(AccessTime, null), dateRangeIcon: React.createElement(DateRange, null),
|
|
54
|
-
|
|
55
|
-
|
|
64
|
+
}, "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: {
|
|
65
|
+
actionBar: {
|
|
66
|
+
actions,
|
|
67
|
+
},
|
|
68
|
+
}, ...rest }));
|
|
56
69
|
};
|
|
57
70
|
export default React.memo(V4CompatibleDateTimePicker);
|
|
58
71
|
//# sourceMappingURL=V4CompatibleDateTimePicker.js.map
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"V4CompatibleDateTimePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleDateTimePicker.tsx"],"names":[],"mappings":"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","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 =\n valueProp instanceof Date ? valueProp.toISOString() : valueProp\n if (currentValue !== (date?.toISOString() || null)) {\n onChange(date)\n }\n },\n [onChange, valueProp],\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"]}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { MobileTimePickerProps } from '@mui/x-date-pickers';
|
|
3
3
|
import { TextField, IconButton } from '@mui/material';
|
|
4
|
-
declare type RemainingPickerProps = Omit<MobileTimePickerProps<Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
|
|
4
|
+
declare type RemainingPickerProps = Omit<MobileTimePickerProps<string | Date, Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
|
|
5
5
|
declare type TextFieldProps = React.ComponentProps<typeof TextField>;
|
|
6
6
|
declare type IconButtonProps = React.ComponentProps<typeof IconButton>;
|
|
7
7
|
declare type Props = RemainingPickerProps & {
|
|
8
|
-
name?:
|
|
9
|
-
label?:
|
|
8
|
+
name?: TextFieldProps['name'];
|
|
9
|
+
label?: TextFieldProps['label'];
|
|
10
10
|
margin?: TextFieldProps['margin'];
|
|
11
11
|
size?: TextFieldProps['size'];
|
|
12
|
-
placeholder?:
|
|
12
|
+
placeholder?: TextFieldProps['placeholder'];
|
|
13
13
|
InputProps?: TextFieldProps['InputProps'];
|
|
14
14
|
inputVariant?: TextFieldProps['variant'];
|
|
15
15
|
onBlur?: TextFieldProps['onBlur'];
|
|
@@ -17,9 +17,11 @@ declare type Props = RemainingPickerProps & {
|
|
|
17
17
|
endIconButton?: boolean;
|
|
18
18
|
iconButtonEdge?: IconButtonProps['edge'];
|
|
19
19
|
iconButtonSize?: IconButtonProps['size'];
|
|
20
|
-
helperText?:
|
|
21
|
-
error?:
|
|
22
|
-
required?:
|
|
20
|
+
helperText?: TextFieldProps['helperText'];
|
|
21
|
+
error?: TextFieldProps['error'];
|
|
22
|
+
required?: TextFieldProps['required'];
|
|
23
|
+
showTodayButton?: boolean;
|
|
24
|
+
clearable?: boolean;
|
|
23
25
|
'data-cypress'?: string;
|
|
24
26
|
};
|
|
25
27
|
declare const _default: React.NamedExoticComponent<Props>;
|
|
@@ -3,10 +3,8 @@ import { MobileTimePicker } from '@mui/x-date-pickers';
|
|
|
3
3
|
import { TextField, InputAdornment, IconButton } from '@mui/material';
|
|
4
4
|
import { AccessTime } from '@mui/icons-material';
|
|
5
5
|
import useBooleanState from '../../hooks/useBooleanState';
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
};
|
|
9
|
-
const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, 'data-cypress': dataCypress, ...rest }) => {
|
|
6
|
+
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 }) => {
|
|
7
|
+
const [value, setValue] = React.useState(null);
|
|
10
8
|
const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
|
|
11
9
|
const [helperText, setHelperText] = React.useState(undefined);
|
|
12
10
|
const handleError = React.useCallback((error) => {
|
|
@@ -20,12 +18,25 @@ const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputP
|
|
|
20
18
|
}
|
|
21
19
|
}, []);
|
|
22
20
|
const onAccept = React.useCallback((date) => {
|
|
23
|
-
const currentValue =
|
|
21
|
+
const currentValue = valueProp instanceof Date ? valueProp.toISOString() : valueProp;
|
|
24
22
|
if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
|
|
25
23
|
onChange(date);
|
|
26
24
|
}
|
|
27
|
-
}, [onChange,
|
|
28
|
-
|
|
25
|
+
}, [onChange, valueProp]);
|
|
26
|
+
const actions = React.useMemo(() => {
|
|
27
|
+
const actions = ['cancel', 'accept'];
|
|
28
|
+
if (showTodayButton) {
|
|
29
|
+
actions.unshift('today');
|
|
30
|
+
}
|
|
31
|
+
if (clearable) {
|
|
32
|
+
actions.unshift('clear');
|
|
33
|
+
}
|
|
34
|
+
return actions;
|
|
35
|
+
}, [clearable, showTodayButton]);
|
|
36
|
+
React.useEffect(() => {
|
|
37
|
+
setValue(valueProp);
|
|
38
|
+
}, [valueProp]);
|
|
39
|
+
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: {
|
|
29
40
|
startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
|
|
30
41
|
React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
|
|
31
42
|
React.createElement(AccessTime, null)))) : undefined,
|
|
@@ -33,9 +44,11 @@ const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputP
|
|
|
33
44
|
React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
|
|
34
45
|
React.createElement(AccessTime, null)))) : undefined,
|
|
35
46
|
...(InputProps ? InputProps : {}),
|
|
36
|
-
}, "data-cypress": dataCypress })), onError: handleError,
|
|
37
|
-
|
|
38
|
-
|
|
47
|
+
}, "data-cypress": dataCypress })), onError: handleError, onChange: setValue, value: value, onAccept: onAccept, disabled: disabled, componentsProps: {
|
|
48
|
+
actionBar: {
|
|
49
|
+
actions,
|
|
50
|
+
},
|
|
51
|
+
}, ...rest }));
|
|
39
52
|
};
|
|
40
53
|
export default React.memo(V4CompatibleTimePicker);
|
|
41
54
|
//# sourceMappingURL=V4CompatibleTimePicker.js.map
|
|
@@ -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;
|
|
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 =\n valueProp instanceof Date ? valueProp.toISOString() : valueProp\n if (currentValue !== (date?.toISOString() || null)) {\n onChange(date)\n }\n },\n [onChange, valueProp],\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"]}
|
|
@@ -93,9 +93,7 @@ function AnnotationModal({ imageSrc, onClose, onSave, }) {
|
|
|
93
93
|
})),
|
|
94
94
|
React.createElement("div", { ref: annotationContentElementRef, className: "ob-annotation__content" },
|
|
95
95
|
React.createElement("div", { ref: bmSignaturePadRef, className: "ob-annotation__signature-pad cypress-annotation-signature-pad" },
|
|
96
|
-
React.createElement(SignatureCanvas, { ref: signatureCanvasRef, clearOnResize: false,
|
|
97
|
-
// @ts-expect-error ???
|
|
98
|
-
onEnd: setDirty, penColor: penColour }))),
|
|
96
|
+
React.createElement(SignatureCanvas, { ref: signatureCanvasRef, clearOnResize: false, onEnd: setDirty, penColor: penColour }))),
|
|
99
97
|
React.createElement("div", { className: "ob-annotation__buttons ob-annotation__buttons-actions" },
|
|
100
98
|
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"),
|
|
101
99
|
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")))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnnotationModal.js","sourceRoot":"","sources":["../../../src/components/renderer/AnnotationModal.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"AnnotationModal.js","sourceRoot":"","sources":["../../../src/components/renderer/AnnotationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,eAAe,MAAM,wBAAwB,CAAA;AAEpD,OAAO,eAAe,MAAM,6BAA6B,CAAA;AACzD,OAAO,gBAAgB,MAAM,kCAAkC,CAAA;AAE/D,MAAM,uBAAuB,GAAG;IAC9B,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACV,CAAA;AAED,SAAS,eAAe,CAAC,EACvB,QAAQ,EACR,OAAO,EACP,MAAM,GAKP;IACC,MAAM,2BAA2B,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IACtE,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5D,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAA;IAE9D,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAA;IAE5E,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACpD,IAAI,kBAAkB,CAAC,OAAO,EAAE;YAC9B,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAA;YACrC,kBAAkB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;SACnC;QACD,OAAO,EAAE,CAAA;IACX,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAClD,IAAI,kBAAkB,CAAC,OAAO,EAAE;YAC9B,MAAM,CAAC,kBAAkB,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,CAAA;SAC/C;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,mCAAmC;IACnC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,wBAAwB,GAAG,2BAA2B,CAAC,OAAO,CAAA;QACpE,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,OAAO,CAAA;QACvD,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAA;QAClD,IACE,CAAC,wBAAwB;YACzB,CAAC,qBAAqB;YACtB,CAAC,eAAe;YAChB,OAAO,QAAQ,KAAK,QAAQ,EAC5B;YACA,OAAM;SACP;QACD,MAAM,aAAa,GAAG,eAAe,CAAC,SAAS,EAAE,CAAA;QAEjD,gDAAgD;QAChD,gBAAgB,CAAC,gBAAgB,EAAE,CAAA;QAEnC,MAAM,QAAQ,GAAG,wBAAwB,CAAC,WAAW,CAAA;QACrD,MAAM,SAAS,GAAG,wBAAwB,CAAC,YAAY,CAAA;QAEvD,MAAM,CAAC,GAAG,IAAI,KAAK,EAAE,CAAA;QACrB,CAAC,CAAC,MAAM,GAAG;YACT,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,CAAA;YAC1B,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAA;YAC5B,IAAI,WAAW,GAAG,UAAU,CAAA;YAC5B,IAAI,YAAY,GAAG,WAAW,CAAA;YAE9B,IAAI,UAAU,GAAG,QAAQ,IAAI,WAAW,GAAG,SAAS,EAAE;gBACpD,MAAM,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAA;gBACxC,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,CAAA;gBAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,WAAW,CAAC,CAAA;gBAE/C,WAAW,GAAG,KAAK,GAAG,UAAU,CAAA;gBAChC,YAAY,GAAG,KAAK,GAAG,WAAW,CAAA;aACnC;YAED,qBAAqB,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,WAAW,IAAI,CAAA;YACtD,qBAAqB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,YAAY,IAAI,CAAA;YACxD,qBAAqB,CAAC,KAAK,CAAC,cAAc,GAAG,OAAO,CAAA;YACpD,qBAAqB,CAAC,KAAK,CAAC,eAAe,GAAG,OAAO,QAAQ,GAAG,CAAA;YAChE,aAAa,CAAC,KAAK,GAAG,WAAW,CAAA;YACjC,aAAa,CAAC,MAAM,GAAG,YAAY,CAAA;QACrC,CAAC,CAAA;QACD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA;QACjC,CAAC,CAAC,GAAG,GAAG,QAAQ,CAAA;QAEhB,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,eAAe,EAAE,CAAA;QACpC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,6BAAK,SAAS,EAAC,wBAAwB,GAAO;QAC9C,6BAAK,SAAS,EAAC,eAAe;YAC5B,6BAAK,SAAS,EAAC,uDAAuD,IACnE,uBAAuB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;gBAC7C,OAAO,CACL,gCACE,GAAG,EAAE,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,4FAA4F,EAC5F;wBACE,aAAa,EAAE,SAAS,KAAK,MAAM;qBACpC,CACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EACnC,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,GAClC,CACH,CAAA;YACH,CAAC,CAAC,CACE;YACN,6BACE,GAAG,EAAE,2BAA2B,EAChC,SAAS,EAAC,wBAAwB;gBAElC,6BACE,GAAG,EAAE,iBAAiB,EACtB,SAAS,EAAC,+DAA+D;oBAEzE,oBAAC,eAAe,IACd,GAAG,EAAE,kBAAkB,EACvB,aAAa,EAAE,KAAK,EACpB,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 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"]}
|
|
@@ -130,7 +130,9 @@ function FormElementABN({ id, element, value, onChange, validationMessage, displ
|
|
|
130
130
|
React.createElement("div", { className: clsx('control is-expanded', {
|
|
131
131
|
'is-loading': isLoading,
|
|
132
132
|
}) },
|
|
133
|
-
React.createElement(InputMask, { mask: isFocused || value ? '99 999 999 999' : '999 999 999',
|
|
133
|
+
React.createElement(InputMask, { mask: isFocused || value ? '99 999 999 999' : '999 999 999',
|
|
134
|
+
// @ts-expect-error "react-input-mask" types do not match code
|
|
135
|
+
maskChar: " ", type: "text", id: id, name: element.name, className: "input ob-input cypress-abn-control", placeholder: element.placeholderValue, value: label, onChange: (e) => {
|
|
134
136
|
setLabel(e.target.value);
|
|
135
137
|
if (value) {
|
|
136
138
|
onChange(element, undefined);
|