@alveole/components 1.8.1 → 1.8.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 (65) hide show
  1. package/dist/generated/version.d.ts +1 -1
  2. package/dist/generated/version.js +1 -1
  3. package/dist/ui/Autocomplete/Autocomplete.js +1 -1
  4. package/dist/ui/Autocomplete/Autocomplete.stories.d.ts +2 -10
  5. package/dist/ui/Autocomplete/Autocomplete.stories.d.ts.map +1 -1
  6. package/dist/ui/Autocomplete/Autocomplete.styles.d.ts +2 -10
  7. package/dist/ui/Autocomplete/Autocomplete.styles.d.ts.map +1 -1
  8. package/dist/ui/Autocomplete/Autocomplete.styles.js +2 -10
  9. package/dist/ui/Autocomplete/Autocomplete.web.d.ts.map +1 -1
  10. package/dist/ui/Autocomplete/Autocomplete.web.js +15 -9
  11. package/dist/ui/Checkbox/Checkbox.js +1 -1
  12. package/dist/ui/DateInput/DateInput.ios.js +1 -1
  13. package/dist/ui/DateInput/DateInput.js +1 -1
  14. package/dist/ui/DateInput/DateInput.web.js +1 -1
  15. package/dist/ui/DocumentViewer/DocumentViewer.d.ts +1 -0
  16. package/dist/ui/DocumentViewer/DocumentViewer.d.ts.map +1 -1
  17. package/dist/ui/DocumentViewer/DocumentViewer.js +2 -2
  18. package/dist/ui/DocumentViewer/DocumentViewer.stories.d.ts +11 -0
  19. package/dist/ui/DocumentViewer/DocumentViewer.stories.d.ts.map +1 -1
  20. package/dist/ui/DocumentViewer/DocumentViewer.stories.js +3 -2
  21. package/dist/ui/DocumentViewer/DocumentViewer.stories.sources.d.ts +2 -0
  22. package/dist/ui/DocumentViewer/DocumentViewer.stories.sources.d.ts.map +1 -1
  23. package/dist/ui/DocumentViewer/DocumentViewer.stories.sources.js +4 -2
  24. package/dist/ui/DocumentViewer/DocumentViewer.styles.d.ts +10 -0
  25. package/dist/ui/DocumentViewer/DocumentViewer.styles.d.ts.map +1 -1
  26. package/dist/ui/DocumentViewer/DocumentViewer.styles.js +6 -0
  27. package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts +1 -0
  28. package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts.map +1 -1
  29. package/dist/ui/DocumentViewer/DocumentViewerPDF.js +20 -13
  30. package/dist/ui/DocumentViewer/DocumentViewerPDF.native.d.ts +1 -0
  31. package/dist/ui/DocumentViewer/DocumentViewerPDF.native.d.ts.map +1 -1
  32. package/dist/ui/DocumentViewer/DocumentViewerPDF.web.d.ts +1 -0
  33. package/dist/ui/DocumentViewer/DocumentViewerPDF.web.d.ts.map +1 -1
  34. package/dist/ui/DocumentViewer/DocumentViewerPDF.web.js +43 -21
  35. package/dist/ui/DurationInput/DurationInput.js +1 -1
  36. package/dist/ui/EmailField/EmailField.js +1 -1
  37. package/dist/ui/FileField/FileField.js +1 -1
  38. package/dist/ui/FormControl/FormControlDateInput.js +1 -1
  39. package/dist/ui/FormControl/FormControlHint.js +1 -1
  40. package/dist/ui/FormControl/FormControlLabel.js +2 -2
  41. package/dist/ui/FormControl/FormControlNumberInput.js +1 -1
  42. package/dist/ui/LucideIcon/LucideIcon.props.d.ts +162 -0
  43. package/dist/ui/LucideIcon/LucideIcon.props.d.ts.map +1 -1
  44. package/dist/ui/LucideIcon/LucideIcon.stories.d.ts +81 -0
  45. package/dist/ui/LucideIcon/LucideIcon.stories.d.ts.map +1 -1
  46. package/dist/ui/NumberField/NumberField.js +1 -1
  47. package/dist/ui/NumberField/NumberField.web.js +1 -1
  48. package/dist/ui/OtpField/OtpField.js +1 -1
  49. package/dist/ui/PasswordField/PasswordField.js +1 -1
  50. package/dist/ui/PhoneField/PhoneField.js +1 -1
  51. package/dist/ui/RadioGroup/RadioGroup.js +1 -1
  52. package/dist/ui/Select/Select.js +1 -1
  53. package/dist/ui/SelectMultiple/SelectMultiple.stories.d.ts +0 -6
  54. package/dist/ui/SelectMultiple/SelectMultiple.stories.d.ts.map +1 -1
  55. package/dist/ui/SelectMultiple/SelectMultiple.styles.d.ts +0 -6
  56. package/dist/ui/SelectMultiple/SelectMultiple.styles.d.ts.map +1 -1
  57. package/dist/ui/SelectMultiple/SelectMultiple.styles.js +0 -6
  58. package/dist/ui/SelectMultiple/SelectMultiple.web.d.ts.map +1 -1
  59. package/dist/ui/SelectMultiple/SelectMultiple.web.js +13 -13
  60. package/dist/ui/Switch/Switch.js +1 -1
  61. package/dist/ui/TextField/TextField.js +1 -1
  62. package/dist/ui/TextareaField/TextareaField.js +1 -1
  63. package/dist/ui/TimeInput/TimeInput.js +1 -1
  64. package/dist/ui/TimeInput/TimeInput.web.js +1 -1
  65. package/package.json +4 -4
@@ -1,2 +1,2 @@
1
- export declare const ALVEOLE_COMPONENTS_VERSION: "1.8.1";
1
+ export declare const ALVEOLE_COMPONENTS_VERSION: "1.8.3";
2
2
  //# sourceMappingURL=version.d.ts.map
@@ -1 +1 @@
1
- export const ALVEOLE_COMPONENTS_VERSION = "1.8.1";
1
+ export const ALVEOLE_COMPONENTS_VERSION = "1.8.3";
@@ -116,7 +116,7 @@ export const Autocomplete = (props) => {
116
116
  setSyncedValueKey(currentValueKey);
117
117
  setSelected(value ?? []);
118
118
  }
119
- return (_jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(Pressable, { onPress: onPressInput, disabled: disabled, style: styles.input, children: _jsxs(Box, { style: styles.inputInner, children: [selected.length === 0 ? (_jsx(Typography, { style: styles.inputPlaceholder, children: placeholder })) : (_jsx(Box, { display: "flex", flexDirection: "row", gap: '050', flexWrap: "wrap", children: selected.map(renderChipConstrained) })), _jsx(LucideIcon, { name: "ChevronDown", size: "sm", style: styles.autocompleteIcon })] }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success }), _jsx(Modal, { visible: open, animationType: "fade", transparent: true, onRequestClose: () => setOpen(false), children: _jsx(KeyboardAvoidingView, { behavior: Platform.select({ ios: 'padding', android: undefined }), style: { ...styles.modalOverlay, flex: 1, paddingTop: top }, children: _jsxs(Box, { style: { ...styles.modalContent }, children: [_jsxs(Box, { tag: "modal-header", style: styles.modalHeader, children: [_jsx(Typography, { style: styles.nativeLabel, children: label ?? 'Sélection' }), _jsx(Box, { ml: 'auto', mr: "100", children: _jsx(ButtonIcon, { icon: "Check", variant: "primary", onPress: () => setOpen(false) }) })] }), _jsx(Divider, { mt: '050', mb: '050' }), !isMulti && (_jsx(Box, { pl: "100", pr: "100", children: selected.length > 0 && (_jsxs(Box, { mt: 'auto', children: [_jsxs(Box, { display: "flex", pl: '100', flexDirection: "row", gap: '050', children: [_jsx(LucideIcon, { name: "Check", size: "md", style: { margin: 'auto' } }), _jsx(Typography, { mr: 48, mt: 4, style: styles.nativeSimpleValue, children: selected[0]?.label })] }), allowEmpty && (_jsxs(_Fragment, { children: [_jsx(Box, { display: "flex", flexDirection: "row", justify: 'flex-end', mt: '050', children: _jsx(Button, { noPadding: true, title: "Effacer", size: "md", variant: "tertiary", endIcon: 'Trash', onPress: () => commit([]) }) }), disabledSearch && _jsx(Divider, { mt: '050' })] }))] })) })), !disabledSearch && (_jsx(Box, { pl: "100", pr: "100", pb: "100", children: _jsx(TextField, { ref: searchRef, label: "", value: query, onChangeText: handleSearchChange, placeholder: placeholder ?? 'Rechercher…', editable: !disabledFilterSearch }) })), allowCreate && query.trim().length > 0 && !hasExactLabel && (_jsx(Pressable, { onPress: handleCreateFromQuery, style: styles.nativeItem, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: '050', children: [_jsx(LucideIcon, { name: "Plus", size: "md" }), _jsx(Typography, { style: styles.nativeItemTextNew, children: createOptionLabel(query.trim()) })] }) })), filteredOptions.length === 0 ? (allowCreate && query.trim().length > 0 && !hasExactLabel ? null : (_jsx(Box, { pl: "100", pr: "100", children: _jsx(Typography, { children: "Aucun r\u00E9sultat" }) }))) : (_jsx(FlashList, { data: filteredOptions, keyExtractor: item => item.value, keyboardShouldPersistTaps: "handled", ItemSeparatorComponent: Divider, contentContainerStyle: { paddingBottom: bottom }, renderItem: ({ item, index }) => {
119
+ return (_jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [!!label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), !!hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(Pressable, { onPress: onPressInput, disabled: disabled, style: styles.input, children: _jsxs(Box, { style: styles.inputInner, children: [selected.length === 0 ? (_jsx(Typography, { style: styles.inputPlaceholder, children: placeholder })) : (_jsx(Box, { display: "flex", flexDirection: "row", gap: '050', flexWrap: "wrap", children: selected.map(renderChipConstrained) })), _jsx(LucideIcon, { name: "ChevronDown", size: "sm", style: styles.autocompleteIcon })] }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success }), _jsx(Modal, { visible: open, animationType: "fade", transparent: true, onRequestClose: () => setOpen(false), children: _jsx(KeyboardAvoidingView, { behavior: Platform.select({ ios: 'padding', android: undefined }), style: { ...styles.modalOverlay, flex: 1, paddingTop: top }, children: _jsxs(Box, { style: { ...styles.modalContent }, children: [_jsxs(Box, { tag: "modal-header", style: styles.modalHeader, children: [_jsx(Typography, { style: styles.nativeLabel, children: label ?? 'Sélection' }), _jsx(Box, { ml: 'auto', mr: "100", children: _jsx(ButtonIcon, { icon: "Check", variant: "primary", onPress: () => setOpen(false) }) })] }), _jsx(Divider, { mt: '050', mb: '050' }), !isMulti && (_jsx(Box, { pl: "100", pr: "100", children: selected.length > 0 && (_jsxs(Box, { mt: 'auto', children: [_jsxs(Box, { display: "flex", pl: '100', flexDirection: "row", gap: '050', children: [_jsx(LucideIcon, { name: "Check", size: "md", style: { margin: 'auto' } }), _jsx(Typography, { mr: 48, mt: 4, style: styles.nativeSimpleValue, children: selected[0]?.label })] }), allowEmpty && (_jsxs(_Fragment, { children: [_jsx(Box, { display: "flex", flexDirection: "row", justify: 'flex-end', mt: '050', children: _jsx(Button, { noPadding: true, title: "Effacer", size: "md", variant: "tertiary", endIcon: 'Trash', onPress: () => commit([]) }) }), disabledSearch && _jsx(Divider, { mt: '050' })] }))] })) })), !disabledSearch && (_jsx(Box, { pl: "100", pr: "100", pb: "100", children: _jsx(TextField, { ref: searchRef, label: "", value: query, onChangeText: handleSearchChange, placeholder: placeholder ?? 'Rechercher…', editable: !disabledFilterSearch }) })), allowCreate && query.trim().length > 0 && !hasExactLabel && (_jsx(Pressable, { onPress: handleCreateFromQuery, style: styles.nativeItem, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: '050', children: [_jsx(LucideIcon, { name: "Plus", size: "md" }), _jsx(Typography, { style: styles.nativeItemTextNew, children: createOptionLabel(query.trim()) })] }) })), filteredOptions.length === 0 ? (allowCreate && query.trim().length > 0 && !hasExactLabel ? null : (_jsx(Box, { pl: "100", pr: "100", children: _jsx(Typography, { children: "Aucun r\u00E9sultat" }) }))) : (_jsx(FlashList, { data: filteredOptions, keyExtractor: item => item.value, keyboardShouldPersistTaps: "handled", ItemSeparatorComponent: Divider, contentContainerStyle: { paddingBottom: bottom }, renderItem: ({ item, index }) => {
120
120
  const isSelected = selectedIndexByValue.has(item.value);
121
121
  const prevItem = filteredOptions[index - 1];
122
122
  const showGroupHeader = isAutocompleteOptionWithGroup(item) &&
@@ -77,18 +77,9 @@ declare const _default: {
77
77
  display: "none";
78
78
  };
79
79
  dropdownIndicator: {
80
- color: string;
81
80
  padding: string | number;
82
81
  };
83
- dropdownIndicatorDisabled: {
84
- display: "none";
85
- };
86
- separatorIndicator: {
87
- color: string;
88
- };
89
- indicatorSeparatorDisabled: {
90
- display: "none";
91
- };
82
+ dropdownIndicatorDisabled: {};
92
83
  clearIndicator: {
93
84
  color: string;
94
85
  padding: string | number;
@@ -165,6 +156,7 @@ declare const _default: {
165
156
  position: "absolute";
166
157
  right: string | number;
167
158
  top: string;
159
+ color: string;
168
160
  };
169
161
  modalOverlay: {
170
162
  flex: number;
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAiE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGlH,wBAOkB;AAUlB,eAAO,MAAM,OAAO,yBAanB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAevB,CAAC;AAEF,eAAO,MAAM,UAAU,yBA0BtB,CAAC;AAEF,eAAO,MAAM,UAAU,yBAmBtB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAcvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,gCAAgC,CAAC"}
1
+ {"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAiE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGlH,wBAOkB;AAUlB,eAAO,MAAM,OAAO,yBAanB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAevB,CAAC;AAEF,eAAO,MAAM,UAAU,yBA0BtB,CAAC;AAEF,eAAO,MAAM,UAAU,yBAmBtB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAcvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,gCAAgC,CAAC"}
@@ -69,18 +69,9 @@ export declare const useStyles: () => {
69
69
  display: "none";
70
70
  };
71
71
  dropdownIndicator: {
72
- color: string;
73
72
  padding: string | number;
74
73
  };
75
- dropdownIndicatorDisabled: {
76
- display: "none";
77
- };
78
- separatorIndicator: {
79
- color: string;
80
- };
81
- indicatorSeparatorDisabled: {
82
- display: "none";
83
- };
74
+ dropdownIndicatorDisabled: {};
84
75
  clearIndicator: {
85
76
  color: string;
86
77
  padding: string | number;
@@ -157,6 +148,7 @@ export declare const useStyles: () => {
157
148
  position: "absolute";
158
149
  right: string | number;
159
150
  top: string;
151
+ color: string;
160
152
  };
161
153
  modalOverlay: {
162
154
  flex: number;
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Autocomplete/Autocomplete.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2KnB,CAAC"}
1
+ {"version":3,"file":"Autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Autocomplete/Autocomplete.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoKnB,CAAC"}
@@ -67,18 +67,9 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
67
67
  display: 'none',
68
68
  },
69
69
  dropdownIndicator: {
70
- color: color.text['default-grey'],
71
70
  padding: spacing('025'),
72
71
  },
73
- dropdownIndicatorDisabled: {
74
- display: 'none',
75
- },
76
- separatorIndicator: {
77
- color: color.text['default-grey'],
78
- },
79
- indicatorSeparatorDisabled: {
80
- display: 'none',
81
- },
72
+ dropdownIndicatorDisabled: {},
82
73
  clearIndicator: {
83
74
  color: color.text['default-grey'],
84
75
  padding: spacing('025'),
@@ -131,6 +122,7 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
131
122
  position: 'absolute',
132
123
  right: spacing('100'),
133
124
  top: '50%',
125
+ color: color.light.text['default-grey'],
134
126
  },
135
127
  modalOverlay: {
136
128
  flex: 1,
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Autocomplete/Autocomplete.web.tsx"],"names":[],"mappings":"AASA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAqB,MAAM,gBAAgB,CAAC;AAGvE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;iDAmDnB,CAAF;;;;;;;;;;6BA0GF,CAAC"}
1
+ {"version":3,"file":"Autocomplete.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Autocomplete/Autocomplete.web.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAqB,MAAM,gBAAgB,CAAC;AAGvE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;iDAkDnB,CAAH;;;;;;;;;;6BAgID,CAAC"}
@@ -1,8 +1,8 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Box, FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, } from '@alveole/components';
2
+ import { Box, FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, LucideIcon, } from '@alveole/components';
3
3
  import { useTheme } from '@alveole/theme';
4
4
  import React, { useEffect, useMemo, useState } from 'react';
5
- import ReactSelect from 'react-select';
5
+ import ReactSelect, { components } from 'react-select';
6
6
  import { useStyles } from './Autocomplete.styles';
7
7
  export const Autocomplete = React.forwardRef(function Select(props, ref) {
8
8
  const { value, disabledFilterSearch, label, labelRight, hint, error, success, placeholder, disabled, isMulti, isSearchable, onChange, onSearchChange, } = props;
@@ -36,6 +36,10 @@ export const Autocomplete = React.forwardRef(function Select(props, ref) {
36
36
  ...s,
37
37
  ...styles.control,
38
38
  ...(p.isDisabled ? styles.controlDisabled : {}),
39
+ boxShadow: 'none',
40
+ outline: p.isFocused ? `2px solid ${color.light.system.focus}` : 'none',
41
+ outlineOffset: 2,
42
+ ':hover': { borderColor: styles.control.borderColor },
39
43
  }),
40
44
  multiValue: (s, p) => ({
41
45
  ...s,
@@ -56,13 +60,13 @@ export const Autocomplete = React.forwardRef(function Select(props, ref) {
56
60
  ...styles.dropdownIndicator,
57
61
  ...(p.isDisabled ? styles.dropdownIndicatorDisabled : {}),
58
62
  }),
59
- indicatorSeparator: (s, p) => ({
63
+ indicatorSeparator: () => ({ display: 'none' }),
64
+ placeholder: s => ({ ...s, color: color.light.text['mention-grey'] }),
65
+ clearIndicator: s => ({ ...s, ...styles.clearIndicator }),
66
+ valueContainer: s => ({
60
67
  ...s,
61
- ...styles.separatorIndicator,
62
- ...(p.isDisabled ? styles.indicatorSeparatorDisabled : {}),
68
+ ...(isMulti !== false ? { padding: '0 8px' } : {}),
63
69
  }),
64
- clearIndicator: s => ({ ...s, ...styles.clearIndicator }),
65
- valueContainer: s => ({ ...s }),
66
70
  group: s => ({ ...s, paddingTop: 0, paddingBottom: 0 }),
67
71
  groupHeading: () => ({
68
72
  backgroundColor: color.light.background['disabled-grey'],
@@ -75,6 +79,8 @@ export const Autocomplete = React.forwardRef(function Select(props, ref) {
75
79
  letterSpacing: 0.5,
76
80
  }),
77
81
  };
82
+ const MultiValueRemove = (props) => (_jsx(components.MultiValueRemove, { ...props, children: _jsx(LucideIcon, { name: "X", size: "xs", color: color.light.text['default-grey'] }) }));
83
+ const DropdownIndicator = (props) => (_jsx(components.DropdownIndicator, { ...props, children: _jsx(LucideIcon, { name: "ChevronDown", size: "sm", color: props.isDisabled ? color.light.text['disabled-grey'] : color.light.text['default-grey'] }) }));
78
84
  const clearValues = () => {
79
85
  setSelectedOptions([]);
80
86
  onChange?.([]);
@@ -101,12 +107,12 @@ export const Autocomplete = React.forwardRef(function Select(props, ref) {
101
107
  };
102
108
  // eslint-disable-next-line react-hooks/exhaustive-deps
103
109
  }, [searchValue]);
104
- return (_jsxs(FormControl, { style: styles.select, children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(Box, { tag: "form-control-select-input", style: styles.inputContainer, children: _jsx(Box, { style: { ...(disabled ? styles.inputDisabled : {}) }, children: _jsx(ReactSelect, { ref: ref, value: selectedOptions, styles: selectStyles, isMulti: true, placeholder: placeholder, options: options, filterOption: disabledFilterSearch ? () => true : undefined, isSearchable: isSearchable, onInputChange: inputValue => setSearchValue(inputValue), noOptionsMessage: () => 'Aucun résultat', onChange: options => {
110
+ return (_jsxs(FormControl, { style: styles.select, children: [_jsxs(InputHeading, { children: [!!label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), !!hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(Box, { tag: "form-control-select-input", style: styles.inputContainer, children: _jsx(Box, { style: { ...(disabled ? styles.inputDisabled : {}) }, children: _jsx(ReactSelect, { ref: ref, value: selectedOptions, styles: selectStyles, isMulti: true, placeholder: placeholder, options: options, filterOption: disabledFilterSearch ? () => true : undefined, isSearchable: isSearchable, onInputChange: inputValue => setSearchValue(inputValue), noOptionsMessage: () => 'Aucun résultat', onChange: options => {
105
111
  const lastOption = Array.isArray(options) ? options[options.length - 1] : undefined;
106
112
  if (isMulti === false && lastOption)
107
113
  return onSingleChange(lastOption);
108
114
  if (Array.isArray(options))
109
115
  return onMultiChange(options);
110
116
  return clearValues();
111
- }, isDisabled: disabled }) }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
117
+ }, isDisabled: disabled, components: { DropdownIndicator, MultiValueRemove } }) }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
112
118
  });
@@ -13,5 +13,5 @@ export const Checkbox = React.forwardRef(function Checkbox(props, ref) {
13
13
  const styles = useStyles();
14
14
  const uniqId = useId();
15
15
  const id = `checkbox--${variant}--${uniqId}`;
16
- return (_jsxs(Box, { tag: "check-box-container", gap: error || success ? spacingValue('050') : 0, style: styles.checkboxContainer, children: [_jsxs(Box, { tag: "check-box", style: styles.container, children: [_jsx(CheckboxContainer, { id: id, ref: ref, ...props, children: _jsx(CheckboxIndicator, { ...baseProps, indeterminate: props.checked === 'indeterminate' }) }), label && _jsx(CheckboxLabel, { htmlFor: id, ...baseProps })] }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
16
+ return (_jsxs(Box, { tag: "check-box-container", gap: error || success ? spacingValue('050') : 0, style: styles.checkboxContainer, children: [_jsxs(Box, { tag: "check-box", style: styles.container, children: [_jsx(CheckboxContainer, { id: id, ref: ref, ...props, children: _jsx(CheckboxIndicator, { ...baseProps, indeterminate: props.checked === 'indeterminate' }) }), !!label && _jsx(CheckboxLabel, { htmlFor: id, ...baseProps })] }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
17
17
  });
@@ -41,5 +41,5 @@ export const DateInput = React.forwardRef(function DateInput(props, ref) {
41
41
  }
42
42
  return '';
43
43
  }, [type]);
44
- return (_jsxs(Box, { tag: "date-input", onPress: handleOpen, children: [_jsx(FormControlModal, { open: open, onClose: () => setOpen(false), submitLabel: "Valider", onSubmit: handleValidate, children: _jsx(Box, { style: { marginTop: 'auto' }, children: _jsx(DateTimePicker, { value: toDate(date), mode: type === 'month' ? 'date' : type, locale: 'fr', maximumDate: maximumDate, minimumDate: minimumDate, is24Hour: is24Hour, minuteInterval: minuteInterval, themeVariant: "light", display: Platform.OS === 'ios' ? 'spinner' : 'default', onChange: handleChange }) }) }), _jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(TextInput, { ref: ref, placeholder: "JJ/MM/AAAA", value: displayValue(value), ...inputProps, caretHidden: true, inputMode: "none", onPress: handleOpen, readOnly: true }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] })] }));
44
+ return (_jsxs(Box, { tag: "date-input", onPress: handleOpen, children: [_jsx(FormControlModal, { open: open, onClose: () => setOpen(false), submitLabel: "Valider", onSubmit: handleValidate, children: _jsx(Box, { style: { marginTop: 'auto' }, children: _jsx(DateTimePicker, { value: toDate(date), mode: type === 'month' ? 'date' : type, locale: 'fr', maximumDate: maximumDate, minimumDate: minimumDate, is24Hour: is24Hour, minuteInterval: minuteInterval, themeVariant: "light", display: Platform.OS === 'ios' ? 'spinner' : 'default', onChange: handleChange }) }) }), _jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [!!label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), !!hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(TextInput, { ref: ref, placeholder: "JJ/MM/AAAA", value: displayValue(value), ...inputProps, caretHidden: true, inputMode: "none", onPress: handleOpen, readOnly: true }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] })] }));
45
45
  });
@@ -66,5 +66,5 @@ export const DateInput = React.forwardRef(function DateInput({ label, labelRight
66
66
  return 'JJ/MM/AAAA';
67
67
  return displayDate(selectedDate, { format: DateFormats.DateSlash });
68
68
  }, [selectedDate, type]);
69
- return (_jsx(Box, { tag: "date-input", onPress: handleOpen, children: _jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(TextInput, { ref: ref, placeholder: "JJ/MM/AAAA", value: displayValue(value), ...props, readOnly: true, onPress: handleOpen, caretHidden: true, inputMode: "none" }), showPicker && (_jsx(DateTimePicker, { value: selectedDate, mode: mode, locale: 'fr', display: display ?? 'default', maximumDate: maximumDate, minimumDate: minimumDate, onChange: handleChange, is24Hour: is24Hour, minuteInterval: minuteInterval })), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }) }));
69
+ return (_jsx(Box, { tag: "date-input", onPress: handleOpen, children: _jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [!!label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), !!hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(TextInput, { ref: ref, placeholder: "JJ/MM/AAAA", value: displayValue(value), ...props, readOnly: true, onPress: handleOpen, caretHidden: true, inputMode: "none" }), !!showPicker && (_jsx(DateTimePicker, { value: selectedDate, mode: mode, locale: 'fr', display: display ?? 'default', maximumDate: maximumDate, minimumDate: minimumDate, onChange: handleChange, is24Hour: is24Hour, minuteInterval: minuteInterval })), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }) }));
70
70
  });
@@ -5,5 +5,5 @@ import { useStyles } from './DateInput.styles';
5
5
  export const DateInput = React.forwardRef(function DateInput(props, ref) {
6
6
  const { label, hint, disabled, error, success } = props;
7
7
  const styles = useStyles();
8
- return (_jsxs(FormControl, { style: styles.dateInput, children: [_jsxs(InputHeading, { children: [label && _jsx(FormControlLabel, { label: label, disabled: disabled, error: error, success: success }), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(FormControlDateInput, { ref: ref, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
8
+ return (_jsxs(FormControl, { style: styles.dateInput, children: [_jsxs(InputHeading, { children: [!!label && _jsx(FormControlLabel, { label: label, disabled: disabled, error: error, success: success }), !!hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(FormControlDateInput, { ref: ref, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
9
9
  });
@@ -8,6 +8,7 @@ export type DocumentViewerProps = BoxProps & {
8
8
  source: string;
9
9
  height?: BoxProps['height'];
10
10
  ChildrenProps?: Omit<BoxProps, 'children'>;
11
+ pdfErrorLabel?: string;
11
12
  };
12
13
  export declare const DocumentViewer: (props: DocumentViewerProps) => React.JSX.Element;
13
14
  //# sourceMappingURL=DocumentViewer.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DocumentViewer.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AACxD,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,sBAC/B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG;IAC3C,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAmFxD,CAAC"}
1
+ {"version":3,"file":"DocumentViewer.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AACxD,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,sBAC/B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG;IAC3C,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAoFxD,CAAC"}
@@ -7,7 +7,7 @@ import { DocumentViewerPDF } from './DocumentViewerPDF';
7
7
  import { DocumentViewerToolbar } from './DocumentViewerToolbar';
8
8
  export const isDocumentViewerRotation = (value) => [0, 90, 180, 270].includes(value);
9
9
  export const DocumentViewer = (props) => {
10
- const { children, title, source, type, height = '100%', ChildrenProps, ...boxProps } = props;
10
+ const { children, title, source, type, height = '100%', ChildrenProps, pdfErrorLabel, ...boxProps } = props;
11
11
  const styles = useStyles();
12
12
  const [rotation, setRotation] = React.useState(0);
13
13
  const [page, setPage] = React.useState(1);
@@ -42,5 +42,5 @@ export const DocumentViewer = (props) => {
42
42
  return (_jsxs(Box, { tag: "document-viewer-wrapper", height: height, style: styles.viewerWrapper, children: [_jsxs(Box, { tag: "document-viewer", flex: 1, height: '100%', minW: 0, style: { flexBasis: 0 }, ...boxProps, children: [_jsx(DocumentViewerToolbar, { title: title, state: state, withChildren: children != null, onRotateLeft: () => handleRotate('left'), onRotateRight: () => handleRotate('right'), onNextPage: handleNextPage, onPreviousPage: handlePreviousPage }), _jsx(Box, { tag: "document-viewer-container", style: {
43
43
  ...styles.viewerContainer,
44
44
  ...(children ? { borderBottomRightRadius: 0 } : {}),
45
- }, children: _jsxs(Box, { flex: 1, children: [type === 'image' && _jsx(DocumentViewerImage, { source: source, rotation: rotation, height: height }), type === 'pdf' && (_jsx(DocumentViewerPDF, { source: source, page: page, rotation: rotation, height: height, onReady: handlePdfReady }))] }) })] }), children && (_jsx(Box, { tag: "document-viewer-children", ...ChildrenProps, style: [styles.children, ChildrenProps?.style], children: children }))] }));
45
+ }, children: _jsxs(Box, { flex: 1, children: [type === 'image' && _jsx(DocumentViewerImage, { source: source, rotation: rotation, height: height }), type === 'pdf' && (_jsx(DocumentViewerPDF, { source: source, page: page, rotation: rotation, height: height, onReady: handlePdfReady, errorLabel: pdfErrorLabel }))] }) })] }), children && (_jsx(Box, { tag: "document-viewer-children", ...ChildrenProps, style: [styles.children, ChildrenProps?.style], children: children }))] }));
46
46
  };
@@ -147,11 +147,22 @@ declare const _default: {
147
147
  justifyContent: "center";
148
148
  backgroundColor: string;
149
149
  };
150
+ viewerPdfErrorLabel: {
151
+ color: string;
152
+ userSelect: "none";
153
+ textAlign: "center";
154
+ fontSize: 14;
155
+ lineHeight: 20;
156
+ letterSpacing: 0;
157
+ fontFamily: string;
158
+ fontWeight?: import("react-native").TextStyle["fontWeight"];
159
+ };
150
160
  };
151
161
  };
152
162
  export default _default;
153
163
  export declare const DocumentImageEx: () => import("react").JSX.Element;
154
164
  export declare const DocumentPdf: () => import("react").JSX.Element;
165
+ export declare const DocumentPdfError: () => import("react").JSX.Element;
155
166
  export declare const WithChildren: () => import("react").JSX.Element;
156
167
  export * as Sources from './DocumentViewer.stories.sources';
157
168
  //# sourceMappingURL=DocumentViewer.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DocumentViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAQkB;AAElB,eAAO,MAAM,eAAe,mCAI3B,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAaxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}
1
+ {"version":3,"file":"DocumentViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAQkB;AAElB,eAAO,MAAM,eAAe,mCAI3B,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAaxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}
@@ -12,6 +12,7 @@ export default {
12
12
  styleFn: useStyles,
13
13
  };
14
14
  export const DocumentImageEx = () => (_jsx(Box, { maxW: 500, height: 500, children: _jsx(DocumentViewer, { title: "Document image", type: "image", source: "https://picsum.photos/1000/2000", height: "100%" }) }));
15
- export const DocumentPdf = () => (_jsx(Box, { height: 400, maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf", height: "100%" }) }));
16
- export const WithChildren = () => (_jsx(Box, { height: 600, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf", height: "100%", children: _jsx(Box, { p: '2W', minW: 600, children: _jsx(Typography, { children: "Contenu enfant" }) }) }) }));
15
+ export const DocumentPdf = () => (_jsx(Box, { height: 400, maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf", height: "100%" }) }));
16
+ export const DocumentPdfError = () => (_jsx(Box, { height: 400, maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF en erreur", type: "pdf", source: "https://example.com/document-inexistant.pdf", height: "100%" }) }));
17
+ export const WithChildren = () => (_jsx(Box, { height: 600, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf", height: "100%", children: _jsx(Box, { p: '2W', minW: 600, children: _jsx(Typography, { children: "Contenu enfant" }) }) }) }));
17
18
  export * as Sources from './DocumentViewer.stories.sources';
@@ -1,9 +1,11 @@
1
1
  export declare const DocumentImageEx: () => string;
2
2
  export declare const DocumentPdf: () => string;
3
+ export declare const DocumentPdfError: () => string;
3
4
  export declare const WithChildren: () => string;
4
5
  export declare const storySources: {
5
6
  readonly DocumentImageEx: () => string;
6
7
  readonly DocumentPdf: () => string;
8
+ readonly DocumentPdfError: () => string;
7
9
  readonly WithChildren: () => string;
8
10
  };
9
11
  export type StorySourceName = keyof typeof storySources;
@@ -1 +1 @@
1
- {"version":3,"file":"DocumentViewer.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAA2N,CAAC;AAExP,eAAO,MAAM,WAAW,cAAwR,CAAC;AAEjT,eAAO,MAAM,YAAY,cAAoY,CAAC;AAE9Z,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
1
+ {"version":3,"file":"DocumentViewer.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAA2N,CAAC;AAExP,eAAO,MAAM,WAAW,cAA2R,CAAC;AAEpT,eAAO,MAAM,gBAAgB,cAA+Q,CAAC;AAE7S,eAAO,MAAM,YAAY,cAAuY,CAAC;AAEja,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
@@ -1,10 +1,12 @@
1
1
  // This file is generated. Do not edit manually.
2
2
  // Source: src/ui/DocumentViewer/DocumentViewer.stories.tsx
3
3
  export const DocumentImageEx = () => "export const DocumentImageEx = () => (\n <Box maxW={500} height={500}>\n <DocumentViewer title=\"Document image\" type=\"image\" source=\"https://picsum.photos/1000/2000\" height=\"100%\" />\n </Box>\n);";
4
- export const DocumentPdf = () => "export const DocumentPdf = () => (\n <Box height={400} maxW={500}>\n <DocumentViewer\n title=\"Document PDF\"\n type=\"pdf\"\n source=\"https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf\"\n height=\"100%\"\n />\n </Box>\n);";
5
- export const WithChildren = () => "export const WithChildren = () => (\n <Box height={600}>\n <DocumentViewer\n title=\"Document PDF\"\n type=\"pdf\"\n source=\"https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf\"\n height=\"100%\"\n >\n <Box p={'2W'} minW={600}>\n <Typography>Contenu enfant</Typography>\n </Box>\n </DocumentViewer>\n </Box>\n);";
4
+ export const DocumentPdf = () => "export const DocumentPdf = () => (\n <Box height={400} maxW={500}>\n <DocumentViewer\n title=\"Document PDF\"\n type=\"pdf\"\n source=\"https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf\"\n height=\"100%\"\n />\n </Box>\n);";
5
+ export const DocumentPdfError = () => "export const DocumentPdfError = () => (\n <Box height={400} maxW={500}>\n <DocumentViewer\n title=\"Document PDF en erreur\"\n type=\"pdf\"\n source=\"https://example.com/document-inexistant.pdf\"\n height=\"100%\"\n />\n </Box>\n);";
6
+ export const WithChildren = () => "export const WithChildren = () => (\n <Box height={600}>\n <DocumentViewer\n title=\"Document PDF\"\n type=\"pdf\"\n source=\"https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf\"\n height=\"100%\"\n >\n <Box p={'2W'} minW={600}>\n <Typography>Contenu enfant</Typography>\n </Box>\n </DocumentViewer>\n </Box>\n);";
6
7
  export const storySources = {
7
8
  DocumentImageEx,
8
9
  DocumentPdf,
10
+ DocumentPdfError,
9
11
  WithChildren,
10
12
  };
@@ -140,5 +140,15 @@ export declare const useStyles: () => {
140
140
  justifyContent: "center";
141
141
  backgroundColor: string;
142
142
  };
143
+ viewerPdfErrorLabel: {
144
+ color: string;
145
+ userSelect: "none";
146
+ textAlign: "center";
147
+ fontSize: 14;
148
+ lineHeight: 20;
149
+ letterSpacing: 0;
150
+ fontFamily: string;
151
+ fontWeight?: import("react-native").TextStyle["fontWeight"];
152
+ };
143
153
  };
144
154
  //# sourceMappingURL=DocumentViewer.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DocumentViewer.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsInB,CAAC"}
1
+ {"version":3,"file":"DocumentViewer.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4InB,CAAC"}
@@ -133,4 +133,10 @@ export const useStyles = makeStyles(({ text, color, spacing, radius, isVariant }
133
133
  justifyContent: 'center',
134
134
  backgroundColor: color.light.background['default-grey'],
135
135
  },
136
+ viewerPdfErrorLabel: {
137
+ ...text['Corps de texte'].SM.Regular,
138
+ color: color.light.text['default-error'],
139
+ userSelect: 'none',
140
+ textAlign: 'center',
141
+ },
136
142
  }));
@@ -10,6 +10,7 @@ export type DocumentViewerPDFProps = {
10
10
  rotation: DocumentViewerRotation;
11
11
  scale?: number;
12
12
  onReady?: (state: PDFDocumentProxy) => void;
13
+ errorLabel?: string;
13
14
  };
14
15
  export declare const DocumentViewerPDF: (props: DocumentViewerPDFProps) => React.JSX.Element;
15
16
  //# sourceMappingURL=DocumentViewerPDF.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,4CAA4C,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAYF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBAyJ9D,CAAC"}
1
+ {"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,MAAM,qBAAqB,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,4CAA4C,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAYF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA6K9D,CAAC"}
@@ -1,5 +1,5 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Box } from '@alveole/components';
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Box, Typography } from '@alveole/components';
3
3
  import * as pdfjs from 'pdfjs-dist';
4
4
  import 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';
5
5
  import React from 'react';
@@ -8,14 +8,20 @@ import { useStyles } from './DocumentViewer.styles';
8
8
  const isPdfCancellationError = (error) => {
9
9
  if (!(error instanceof Error))
10
10
  return false;
11
- return (['RenderingCancelledException', 'AbortException', 'UnknownErrorException'].includes(error.name) ||
11
+ return (['RenderingCancelledException', 'AbortException'].includes(error.name) ||
12
12
  error.message.includes('Worker was terminated') ||
13
13
  error.message.includes("Cannot read properties of null (reading 'sendWithPromise')"));
14
14
  };
15
15
  export const DocumentViewerPDF = (props) => {
16
- const { source, page, rotation, height = '100%', scale = 1, onReady } = props;
16
+ const { source, page, rotation, height = '100%', scale = 1, onReady, errorLabel = 'Le PDF ne peut pas être affiché', } = props;
17
17
  const styles = useStyles();
18
18
  const [pdf, setPdf] = React.useState(null);
19
+ const [hasError, setHasError] = React.useState(false);
20
+ const [prevSource, setPrevSource] = React.useState(source);
21
+ if (prevSource !== source) {
22
+ setPrevSource(source);
23
+ setHasError(false);
24
+ }
19
25
  const [viewerSize, setViewerSize] = React.useState({ width: 0, height: 0 });
20
26
  const [isHovered, setIsHovered] = React.useState(false);
21
27
  const [transformOrigin, setTransformOrigin] = React.useState('50% 50%');
@@ -36,6 +42,7 @@ export const DocumentViewerPDF = (props) => {
36
42
  if (!active)
37
43
  return;
38
44
  setPdf(null);
45
+ setHasError(true);
39
46
  };
40
47
  const onPageLoadedSuccess = React.useCallback((pagePdf, active) => {
41
48
  if (!active || !canvasRef.current)
@@ -117,13 +124,13 @@ export const DocumentViewerPDF = (props) => {
117
124
  const y = ((event.clientY - rect.top) / rect.height) * 100;
118
125
  setTransformOrigin(`${Math.max(0, Math.min(100, x))}% ${Math.max(0, Math.min(100, y))}%`);
119
126
  }, []);
120
- return (_jsx(Box, { tag: "document-viewer-pdf", width: '100%', height: height, onLayout: handleLayout, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: styles.viewerPdfContent, children: _jsx(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: Platform.OS === 'web' && (_jsx(Box, { style: [
121
- styles.viewerPdfCanvasWrapper,
122
- {
123
- width: renderedPageSize.width,
124
- height: renderedPageSize.height,
125
- transformOrigin,
126
- transform: [{ scale: hoveredScale }],
127
- },
128
- ], children: _jsx("canvas", { ref: canvasRef, style: styles.viewerPdfCanvas }) })) }) }));
127
+ return (_jsx(Box, { tag: "document-viewer-pdf", width: '100%', height: height, onLayout: handleLayout, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: styles.viewerPdfContent, children: _jsxs(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: [Platform.OS === 'web' && (_jsx(Box, { style: [
128
+ styles.viewerPdfCanvasWrapper,
129
+ {
130
+ width: renderedPageSize.width,
131
+ height: renderedPageSize.height,
132
+ transformOrigin,
133
+ transform: [{ scale: hoveredScale }],
134
+ },
135
+ ], children: _jsx("canvas", { ref: canvasRef, style: styles.viewerPdfCanvas }) })), hasError && (_jsx(Box, { style: styles.viewerPdfOverlay, children: _jsx(Typography, { style: styles.viewerPdfErrorLabel, children: errorLabel }) }))] }) }));
129
136
  };
@@ -9,6 +9,7 @@ export type DocumentViewerPDFProps = {
9
9
  onReady?: (_state: {
10
10
  numPages: number;
11
11
  }) => void;
12
+ errorLabel?: string;
12
13
  };
13
14
  export declare const DocumentViewerPDF: (props: DocumentViewerPDFProps) => import("react").JSX.Element;
14
15
  //# sourceMappingURL=DocumentViewerPDF.native.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DocumentViewerPDF.native.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAc,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,gCAsB9D,CAAC"}
1
+ {"version":3,"file":"DocumentViewerPDF.native.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAc,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,gCAsB9D,CAAC"}
@@ -33,6 +33,7 @@ export type DocumentViewerPDFProps = {
33
33
  rotation: DocumentViewerRotation;
34
34
  scale?: number;
35
35
  onReady?: (state: PDFDocumentProxyLike) => void;
36
+ errorLabel?: string;
36
37
  };
37
38
  export declare const DocumentViewerPDF: (props: DocumentViewerPDFProps) => React.JSX.Element;
38
39
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"DocumentViewerPDF.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.web.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,KAAK,oBAAoB,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;QACjC,WAAW,EAAE,CAAC,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,sBAAsB,CAAA;SAAE,KAAK;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QACjH,MAAM,EAAE,CAAC,OAAO,EAAE;YAChB,aAAa,EAAE,wBAAwB,CAAC;YACxC,QAAQ,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,CAAA;aAAE,CAAC;YAC5C,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;SAC9D,KAAK;YAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;SAAE,GAAG,IAAI,CAAC;QAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAUF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACjD,CAAC;AA6CF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBAsK9D,CAAC"}
1
+ {"version":3,"file":"DocumentViewerPDF.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.web.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,KAAK,oBAAoB,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;QACjC,WAAW,EAAE,CAAC,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,sBAAsB,CAAA;SAAE,KAAK;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QACjH,MAAM,EAAE,CAAC,OAAO,EAAE;YAChB,aAAa,EAAE,wBAAwB,CAAC;YACxC,QAAQ,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,CAAA;aAAE,CAAC;YAC5C,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;SAC9D,KAAK;YAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;SAAE,GAAG,IAAI,CAAC;QAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAUF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA6CF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA4M9D,CAAC"}