@iobroker/adapter-react-v5 6.1.10 → 7.0.1
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/Components/404.js +13 -13
- package/Components/Loader.js +223 -223
- package/Components/Loaders/PT.css +108 -108
- package/Components/Loaders/PT.js +103 -103
- package/Components/Loaders/Vendor.css +13 -13
- package/Components/Loaders/Vendor.js +7 -7
- package/Components/ObjectBrowser.js +29 -29
- package/Components/UploadImage.js +305 -305
- package/Components/loader.css +221 -221
- package/Components/types.d.ts +82 -82
- package/GenericApp.js +49 -49
- package/LICENSE +22 -22
- package/Prompt.js +7 -7
- package/README.md +1004 -1005
- package/Theme.js +8 -7
- package/assets/devices/Alarm Systems.svg +18 -18
- package/assets/devices/Amplifier.svg +21 -21
- package/assets/devices/Awnings.svg +4 -4
- package/assets/devices/Battery Status.svg +4 -4
- package/assets/devices/Ceiling Spotlights.svg +15 -15
- package/assets/devices/Chandelier.svg +6 -6
- package/assets/devices/Climate.svg +11 -11
- package/assets/devices/Coffee Makers.svg +5 -5
- package/assets/devices/Cold Water.svg +31 -31
- package/assets/devices/Computer.svg +21 -21
- package/assets/devices/Consumption.svg +7 -7
- package/assets/devices/Curtains.svg +43 -43
- package/assets/devices/Dishwashers.svg +11 -11
- package/assets/devices/Doors.svg +5 -5
- package/assets/devices/Doorstep.svg +35 -35
- package/assets/devices/Dryer.svg +13 -13
- package/assets/devices/Fan.svg +20 -20
- package/assets/devices/Floor Lamps.svg +4 -4
- package/assets/devices/Garage Doors.svg +9 -9
- package/assets/devices/Gates.svg +32 -32
- package/assets/devices/Hairdryer.svg +23 -23
- package/assets/devices/Handle.svg +6 -6
- package/assets/devices/Hanging Lamps.svg +8 -8
- package/assets/devices/Heater.svg +44 -44
- package/assets/devices/Hoods.svg +11 -11
- package/assets/devices/Hot Water.svg +9 -9
- package/assets/devices/Humidity.svg +41 -41
- package/assets/devices/Iron.svg +4 -4
- package/assets/devices/Irrigation.svg +22 -22
- package/assets/devices/Led Strip.svg +30 -30
- package/assets/devices/Light.svg +29 -29
- package/assets/devices/Lightings.svg +46 -46
- package/assets/devices/Lock.svg +19 -19
- package/assets/devices/Louvre.svg +6 -6
- package/assets/devices/Mowing Machine.svg +8 -8
- package/assets/devices/Music.svg +12 -12
- package/assets/devices/Outdoor Blinds.svg +6 -6
- package/assets/devices/People.svg +19 -19
- package/assets/devices/Pool.svg +7 -7
- package/assets/devices/Power Consumption.svg +12 -12
- package/assets/devices/Printer.svg +9 -9
- package/assets/devices/Pump.svg +9 -9
- package/assets/devices/Receiver.svg +18 -18
- package/assets/devices/Sconces.svg +9 -9
- package/assets/devices/Security.svg +34 -34
- package/assets/devices/Shading.svg +4 -4
- package/assets/devices/Shutters.svg +10 -10
- package/assets/devices/SmokeDetector.svg +12 -12
- package/assets/devices/Sockets.svg +13 -13
- package/assets/devices/Speaker.svg +35 -35
- package/assets/devices/Stove.svg +11 -11
- package/assets/devices/Table Lamps.svg +11 -11
- package/assets/devices/Temperature Sensors.svg +28 -28
- package/assets/devices/Tv.svg +7 -7
- package/assets/devices/Vacuum Cleaner.svg +15 -15
- package/assets/devices/Ventilation.svg +12 -12
- package/assets/devices/Washing Machines.svg +15 -15
- package/assets/devices/Water Consumption.svg +5 -5
- package/assets/devices/Water Heater.svg +8 -8
- package/assets/devices/Water.svg +40 -40
- package/assets/devices/Weather.svg +28 -28
- package/assets/devices/Window.svg +7 -7
- package/assets/lamp_ceiling.svg +8 -8
- package/assets/lamp_table.svg +7 -7
- package/assets/no_icon.svg +9 -9
- package/assets/rooms/Anteroom.svg +52 -52
- package/assets/rooms/Attic.svg +21 -21
- package/assets/rooms/Balcony.svg +12 -12
- package/assets/rooms/Barn.svg +5 -5
- package/assets/rooms/Basement.svg +4 -4
- package/assets/rooms/Bathroom.svg +38 -38
- package/assets/rooms/Bedroom.svg +5 -5
- package/assets/rooms/Boiler Room.svg +12 -12
- package/assets/rooms/Carport.svg +17 -17
- package/assets/rooms/Cellar.svg +89 -89
- package/assets/rooms/Chamber.svg +9 -9
- package/assets/rooms/Corridor.svg +52 -52
- package/assets/rooms/Dining Area.svg +37 -37
- package/assets/rooms/Dining Room.svg +37 -37
- package/assets/rooms/Dining.svg +37 -37
- package/assets/rooms/Dressing Room.svg +4 -4
- package/assets/rooms/Driveway.svg +14 -14
- package/assets/rooms/Entrance.svg +44 -44
- package/assets/rooms/Equipment Room.svg +14 -14
- package/assets/rooms/Front Yard.svg +64 -64
- package/assets/rooms/Gallery.svg +13 -13
- package/assets/rooms/Garage.svg +20 -20
- package/assets/rooms/Garden.svg +12 -12
- package/assets/rooms/Ground Floor.svg +95 -95
- package/assets/rooms/Guest Bathroom.svg +32 -32
- package/assets/rooms/Guest Room.svg +5 -5
- package/assets/rooms/Gym.svg +4 -4
- package/assets/rooms/Hall.svg +19 -19
- package/assets/rooms/Home Theater.svg +7 -7
- package/assets/rooms/Kitchen.svg +17 -17
- package/assets/rooms/Laundry Room.svg +11 -11
- package/assets/rooms/Living Area.svg +10 -10
- package/assets/rooms/Living Room.svg +10 -10
- package/assets/rooms/Locker Room.svg +16 -16
- package/assets/rooms/Nursery.svg +4 -4
- package/assets/rooms/Office.svg +8 -8
- package/assets/rooms/Outdoors.svg +7 -7
- package/assets/rooms/Playroom.svg +5 -5
- package/assets/rooms/Pool.svg +7 -7
- package/assets/rooms/Rear Wall.svg +30 -30
- package/assets/rooms/Second Floor.svg +95 -95
- package/assets/rooms/Shed.svg +16 -16
- package/assets/rooms/Sleeping Area.svg +22 -22
- package/assets/rooms/Stairway.svg +4 -4
- package/assets/rooms/Stairwell.svg +15 -15
- package/assets/rooms/Storeroom.svg +4 -4
- package/assets/rooms/Summer House.svg +27 -27
- package/assets/rooms/Swimming Pool.svg +21 -21
- package/assets/rooms/Terrace.svg +6 -6
- package/assets/rooms/Toilet.svg +10 -10
- package/assets/rooms/Upstairs.svg +5 -5
- package/assets/rooms/Wardrobe.svg +60 -60
- package/assets/rooms/Washroom.svg +19 -19
- package/assets/rooms/Wc.svg +10 -10
- package/assets/rooms/Windscreen.svg +60 -60
- package/assets/rooms/Workshop.svg +22 -22
- package/assets/rooms/Workspace.svg +8 -8
- package/craco-module-federation.js +71 -71
- package/icons/IconFx.js +1 -1
- package/icons/IconLogout.js +1 -1
- package/index.css +54 -54
- package/modulefederation.admin.config.js +31 -31
- package/package.json +4 -4
- package/src/AdminConnection.tsx +3 -3
- package/src/Components/404.tsx +121 -121
- package/src/Components/ColorPicker.tsx +315 -315
- package/src/Components/ComplexCron.tsx +507 -507
- package/src/Components/CopyToClipboard.tsx +165 -165
- package/src/Components/CustomModal.tsx +163 -163
- package/src/Components/FileBrowser.tsx +2414 -2414
- package/src/Components/FileViewer.tsx +393 -393
- package/src/Components/Icon.tsx +210 -210
- package/src/Components/IconPicker.tsx +149 -149
- package/src/Components/IconSelector.tsx +2202 -2202
- package/src/Components/Image.tsx +176 -176
- package/src/Components/Loader.tsx +304 -304
- package/src/Components/Logo.tsx +166 -166
- package/src/Components/MDUtils.tsx +100 -100
- package/src/Components/ObjectBrowser.tsx +8032 -8032
- package/src/Components/Router.tsx +90 -90
- package/src/Components/SaveCloseButtons.tsx +113 -113
- package/src/Components/Schedule.tsx +1724 -1724
- package/src/Components/SelectWithIcon.tsx +197 -197
- package/src/Components/TabContainer.tsx +55 -55
- package/src/Components/TabContent.tsx +37 -37
- package/src/Components/TabHeader.tsx +19 -19
- package/src/Components/TableResize.tsx +259 -259
- package/src/Components/TextWithIcon.tsx +148 -148
- package/src/Components/ToggleThemeMenu.tsx +34 -34
- package/src/Components/TreeTable.tsx +919 -919
- package/src/Components/UploadImage.tsx +599 -599
- package/src/Components/Utils.tsx +1794 -1794
- package/src/Components/loader.css +221 -221
- package/src/Components/withWidth.tsx +21 -21
- package/src/Connection.tsx +7 -7
- package/src/Dialogs/ComplexCron.tsx +129 -129
- package/src/Dialogs/Confirm.tsx +162 -162
- package/src/Dialogs/Cron.tsx +182 -182
- package/src/Dialogs/Error.tsx +72 -72
- package/src/Dialogs/Message.tsx +71 -71
- package/src/Dialogs/SelectFile.tsx +270 -270
- package/src/Dialogs/SelectID.tsx +298 -298
- package/src/Dialogs/SimpleCron.tsx +100 -100
- package/src/Dialogs/TextInput.tsx +107 -107
- package/src/GenericApp.tsx +976 -976
- package/src/LegacyConnection.tsx +3589 -3589
- package/src/Prompt.tsx +20 -20
- package/src/Theme.tsx +479 -479
- package/src/icons/IconAdapter.tsx +20 -20
- package/src/icons/IconAlias.tsx +20 -20
- package/src/icons/IconChannel.tsx +21 -21
- package/src/icons/IconClearFilter.tsx +22 -22
- package/src/icons/IconClosed.tsx +17 -17
- package/src/icons/IconCopy.tsx +16 -16
- package/src/icons/IconDevice.tsx +27 -27
- package/src/icons/IconDocument.tsx +17 -17
- package/src/icons/IconDocumentReadOnly.tsx +18 -18
- package/src/icons/IconExpert.tsx +18 -18
- package/src/icons/IconFx.tsx +36 -36
- package/src/icons/IconInstance.tsx +20 -20
- package/src/icons/IconLogout.tsx +30 -30
- package/src/icons/IconNoIcon.tsx +19 -19
- package/src/icons/IconOpen.tsx +17 -17
- package/src/icons/IconProps.tsx +15 -15
- package/src/icons/IconState.tsx +17 -17
- package/src/index.css +54 -54
- package/types.d.ts +134 -134
|
@@ -1,129 +1,129 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
Button,
|
|
5
|
-
DialogTitle,
|
|
6
|
-
DialogContent,
|
|
7
|
-
DialogActions,
|
|
8
|
-
Dialog,
|
|
9
|
-
} from '@mui/material';
|
|
10
|
-
|
|
11
|
-
import {
|
|
12
|
-
Check as IconOk,
|
|
13
|
-
Cancel as IconCancel,
|
|
14
|
-
Delete as IconClear,
|
|
15
|
-
} from '@mui/icons-material';
|
|
16
|
-
|
|
17
|
-
import ComplexCron from '../Components/ComplexCron';
|
|
18
|
-
|
|
19
|
-
import I18n from '../i18n';
|
|
20
|
-
|
|
21
|
-
// Generate cron expression
|
|
22
|
-
const styles: Record<string, React.CSSProperties> = {
|
|
23
|
-
headerID: {
|
|
24
|
-
fontWeight: 'bold',
|
|
25
|
-
fontStyle: 'italic',
|
|
26
|
-
},
|
|
27
|
-
radio: {
|
|
28
|
-
display: 'inline-block',
|
|
29
|
-
},
|
|
30
|
-
dialogPaper: {
|
|
31
|
-
height: 'calc(100% - 96px)',
|
|
32
|
-
},
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
interface DialogCronProps {
|
|
36
|
-
onClose: () => void;
|
|
37
|
-
onOk: (cron: string | false) => void;
|
|
38
|
-
title?: string;
|
|
39
|
-
cron?: string;
|
|
40
|
-
cancel?: string;
|
|
41
|
-
ok?: string;
|
|
42
|
-
clear?: string;
|
|
43
|
-
clearButton?: boolean;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
interface DialogCronState {
|
|
47
|
-
cron: string;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
class DialogComplexCron extends React.Component<DialogCronProps, DialogCronState> {
|
|
51
|
-
constructor(props: DialogCronProps) {
|
|
52
|
-
super(props);
|
|
53
|
-
let cron;
|
|
54
|
-
if (this.props.cron && typeof this.props.cron === 'string' && this.props.cron.replace(/^["']/, '')[0] !== '{') {
|
|
55
|
-
cron = this.props.cron.replace(/['"]/g, '').trim();
|
|
56
|
-
} else {
|
|
57
|
-
cron = this.props.cron || '{}';
|
|
58
|
-
if (typeof cron === 'string') {
|
|
59
|
-
cron = cron.replace(/^["']/, '').replace(/["']\n?$/, '');
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
this.state = {
|
|
64
|
-
cron,
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
handleCancel() {
|
|
69
|
-
this.props.onClose();
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
handleOk() {
|
|
73
|
-
this.props.onOk(this.state.cron);
|
|
74
|
-
this.props.onClose();
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
handleClear() {
|
|
78
|
-
this.props.onOk(false);
|
|
79
|
-
this.props.onClose();
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
render() {
|
|
83
|
-
return <Dialog
|
|
84
|
-
onClose={() => {}}
|
|
85
|
-
maxWidth="md"
|
|
86
|
-
fullWidth
|
|
87
|
-
sx={{ '& .MuiDialog-paper': styles.dialogPaper }}
|
|
88
|
-
open={!0}
|
|
89
|
-
aria-labelledby="cron-dialog-title"
|
|
90
|
-
>
|
|
91
|
-
<DialogTitle id="cron-dialog-title">{this.props.title || I18n.t('ra_Define schedule...')}</DialogTitle>
|
|
92
|
-
<DialogContent style={{ height: '100%', overflow: 'hidden' }}>
|
|
93
|
-
<ComplexCron
|
|
94
|
-
cronExpression={this.state.cron}
|
|
95
|
-
onChange={cron => this.setState({ cron })}
|
|
96
|
-
language={I18n.getLanguage()}
|
|
97
|
-
/>
|
|
98
|
-
</DialogContent>
|
|
99
|
-
<DialogActions>
|
|
100
|
-
{!!this.props.clearButton && <Button
|
|
101
|
-
color="grey"
|
|
102
|
-
variant="contained"
|
|
103
|
-
onClick={() => this.handleClear()}
|
|
104
|
-
startIcon={<IconClear />}
|
|
105
|
-
>
|
|
106
|
-
{this.props.clear || I18n.t('ra_Clear')}
|
|
107
|
-
</Button>}
|
|
108
|
-
<Button
|
|
109
|
-
variant="contained"
|
|
110
|
-
onClick={() => this.handleOk()}
|
|
111
|
-
color="primary"
|
|
112
|
-
startIcon={<IconOk />}
|
|
113
|
-
>
|
|
114
|
-
{this.props.ok || I18n.t('ra_Ok')}
|
|
115
|
-
</Button>
|
|
116
|
-
<Button
|
|
117
|
-
color="grey"
|
|
118
|
-
variant="contained"
|
|
119
|
-
onClick={() => this.handleCancel()}
|
|
120
|
-
startIcon={<IconCancel />}
|
|
121
|
-
>
|
|
122
|
-
{this.props.cancel || I18n.t('ra_Cancel')}
|
|
123
|
-
</Button>
|
|
124
|
-
</DialogActions>
|
|
125
|
-
</Dialog>;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
export default DialogComplexCron;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
Button,
|
|
5
|
+
DialogTitle,
|
|
6
|
+
DialogContent,
|
|
7
|
+
DialogActions,
|
|
8
|
+
Dialog,
|
|
9
|
+
} from '@mui/material';
|
|
10
|
+
|
|
11
|
+
import {
|
|
12
|
+
Check as IconOk,
|
|
13
|
+
Cancel as IconCancel,
|
|
14
|
+
Delete as IconClear,
|
|
15
|
+
} from '@mui/icons-material';
|
|
16
|
+
|
|
17
|
+
import ComplexCron from '../Components/ComplexCron';
|
|
18
|
+
|
|
19
|
+
import I18n from '../i18n';
|
|
20
|
+
|
|
21
|
+
// Generate cron expression
|
|
22
|
+
const styles: Record<string, React.CSSProperties> = {
|
|
23
|
+
headerID: {
|
|
24
|
+
fontWeight: 'bold',
|
|
25
|
+
fontStyle: 'italic',
|
|
26
|
+
},
|
|
27
|
+
radio: {
|
|
28
|
+
display: 'inline-block',
|
|
29
|
+
},
|
|
30
|
+
dialogPaper: {
|
|
31
|
+
height: 'calc(100% - 96px)',
|
|
32
|
+
},
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
interface DialogCronProps {
|
|
36
|
+
onClose: () => void;
|
|
37
|
+
onOk: (cron: string | false) => void;
|
|
38
|
+
title?: string;
|
|
39
|
+
cron?: string;
|
|
40
|
+
cancel?: string;
|
|
41
|
+
ok?: string;
|
|
42
|
+
clear?: string;
|
|
43
|
+
clearButton?: boolean;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
interface DialogCronState {
|
|
47
|
+
cron: string;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
class DialogComplexCron extends React.Component<DialogCronProps, DialogCronState> {
|
|
51
|
+
constructor(props: DialogCronProps) {
|
|
52
|
+
super(props);
|
|
53
|
+
let cron;
|
|
54
|
+
if (this.props.cron && typeof this.props.cron === 'string' && this.props.cron.replace(/^["']/, '')[0] !== '{') {
|
|
55
|
+
cron = this.props.cron.replace(/['"]/g, '').trim();
|
|
56
|
+
} else {
|
|
57
|
+
cron = this.props.cron || '{}';
|
|
58
|
+
if (typeof cron === 'string') {
|
|
59
|
+
cron = cron.replace(/^["']/, '').replace(/["']\n?$/, '');
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
this.state = {
|
|
64
|
+
cron,
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
handleCancel() {
|
|
69
|
+
this.props.onClose();
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
handleOk() {
|
|
73
|
+
this.props.onOk(this.state.cron);
|
|
74
|
+
this.props.onClose();
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
handleClear() {
|
|
78
|
+
this.props.onOk(false);
|
|
79
|
+
this.props.onClose();
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
render() {
|
|
83
|
+
return <Dialog
|
|
84
|
+
onClose={() => {}}
|
|
85
|
+
maxWidth="md"
|
|
86
|
+
fullWidth
|
|
87
|
+
sx={{ '& .MuiDialog-paper': styles.dialogPaper }}
|
|
88
|
+
open={!0}
|
|
89
|
+
aria-labelledby="cron-dialog-title"
|
|
90
|
+
>
|
|
91
|
+
<DialogTitle id="cron-dialog-title">{this.props.title || I18n.t('ra_Define schedule...')}</DialogTitle>
|
|
92
|
+
<DialogContent style={{ height: '100%', overflow: 'hidden' }}>
|
|
93
|
+
<ComplexCron
|
|
94
|
+
cronExpression={this.state.cron}
|
|
95
|
+
onChange={cron => this.setState({ cron })}
|
|
96
|
+
language={I18n.getLanguage()}
|
|
97
|
+
/>
|
|
98
|
+
</DialogContent>
|
|
99
|
+
<DialogActions>
|
|
100
|
+
{!!this.props.clearButton && <Button
|
|
101
|
+
color="grey"
|
|
102
|
+
variant="contained"
|
|
103
|
+
onClick={() => this.handleClear()}
|
|
104
|
+
startIcon={<IconClear />}
|
|
105
|
+
>
|
|
106
|
+
{this.props.clear || I18n.t('ra_Clear')}
|
|
107
|
+
</Button>}
|
|
108
|
+
<Button
|
|
109
|
+
variant="contained"
|
|
110
|
+
onClick={() => this.handleOk()}
|
|
111
|
+
color="primary"
|
|
112
|
+
startIcon={<IconOk />}
|
|
113
|
+
>
|
|
114
|
+
{this.props.ok || I18n.t('ra_Ok')}
|
|
115
|
+
</Button>
|
|
116
|
+
<Button
|
|
117
|
+
color="grey"
|
|
118
|
+
variant="contained"
|
|
119
|
+
onClick={() => this.handleCancel()}
|
|
120
|
+
startIcon={<IconCancel />}
|
|
121
|
+
>
|
|
122
|
+
{this.props.cancel || I18n.t('ra_Cancel')}
|
|
123
|
+
</Button>
|
|
124
|
+
</DialogActions>
|
|
125
|
+
</Dialog>;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
export default DialogComplexCron;
|
package/src/Dialogs/Confirm.tsx
CHANGED
|
@@ -1,162 +1,162 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright 2019-2023 Denis Haev (bluefox) <dogafox@gmail.com>
|
|
3
|
-
*
|
|
4
|
-
* MIT License
|
|
5
|
-
*
|
|
6
|
-
* */
|
|
7
|
-
|
|
8
|
-
// please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
|
|
9
|
-
import React, { Component } from 'react';
|
|
10
|
-
|
|
11
|
-
import {
|
|
12
|
-
Button,
|
|
13
|
-
Dialog,
|
|
14
|
-
DialogActions,
|
|
15
|
-
DialogContent,
|
|
16
|
-
DialogContentText,
|
|
17
|
-
DialogTitle,
|
|
18
|
-
FormControlLabel,
|
|
19
|
-
Checkbox,
|
|
20
|
-
} from '@mui/material';
|
|
21
|
-
|
|
22
|
-
import {
|
|
23
|
-
Check as IconCheck,
|
|
24
|
-
Close as IconClose,
|
|
25
|
-
} from '@mui/icons-material';
|
|
26
|
-
|
|
27
|
-
import I18n from '../i18n';
|
|
28
|
-
|
|
29
|
-
const styles: Record<string, React.CSSProperties> = {
|
|
30
|
-
suppress: {
|
|
31
|
-
fontSize: 12,
|
|
32
|
-
},
|
|
33
|
-
suppressRoot: {
|
|
34
|
-
// it is sx
|
|
35
|
-
marginTop: '16px',
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
interface DialogConfirmProps {
|
|
40
|
-
/** The dialog title; default: Are you sure? (translated) */
|
|
41
|
-
title?: string;
|
|
42
|
-
/** The dialog text */
|
|
43
|
-
text?: string | React.JSX.Element;
|
|
44
|
-
/** Close handler. */
|
|
45
|
-
onClose?: (ok: boolean) => void;
|
|
46
|
-
/** if the dialog must be fill sized */
|
|
47
|
-
fullWidth?: boolean;
|
|
48
|
-
/** optional icon */
|
|
49
|
-
icon?: React.JSX.Element;
|
|
50
|
-
/** optional ok button text */
|
|
51
|
-
ok?: string;
|
|
52
|
-
/** optional cancel button text */
|
|
53
|
-
cancel?: string;
|
|
54
|
-
/** optional interval in minutes for which the confirmation dialog will be suppressed if activated. */
|
|
55
|
-
suppressQuestionMinutes?: number;
|
|
56
|
-
/** optional text for the suppression checkbox */
|
|
57
|
-
suppressText?: string;
|
|
58
|
-
/** optional name of the dialog. Used only with suppressQuestionMinutes to store the user choice */
|
|
59
|
-
dialogName?: string;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
interface DialogConfirmState {
|
|
63
|
-
suppress: number | boolean;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
class DialogConfirm extends Component<DialogConfirmProps, DialogConfirmState> {
|
|
67
|
-
constructor(props: DialogConfirmProps) {
|
|
68
|
-
super(props);
|
|
69
|
-
|
|
70
|
-
if (!this.props.dialogName && this.props.suppressQuestionMinutes) {
|
|
71
|
-
throw new Error('dialogName required if suppressQuestionMinutes used');
|
|
72
|
-
}
|
|
73
|
-
let suppress: number | boolean = false;
|
|
74
|
-
|
|
75
|
-
if (this.props.suppressQuestionMinutes) {
|
|
76
|
-
suppress = parseInt(((window as any)._localStorage || window.localStorage).getItem(this.props.dialogName), 10) || 0;
|
|
77
|
-
|
|
78
|
-
if (!suppress) {
|
|
79
|
-
suppress = false;
|
|
80
|
-
} else if (Date.now() > suppress) {
|
|
81
|
-
((window as any)._localStorage || window.localStorage).removeItem(this.props.dialogName);
|
|
82
|
-
suppress = false;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
this.state = {
|
|
87
|
-
suppress,
|
|
88
|
-
};
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
handleOk() {
|
|
92
|
-
if (this.state.suppress) {
|
|
93
|
-
((window as any)._localStorage || window.localStorage).setItem(this.props.dialogName, Date.now() + (this.props.suppressQuestionMinutes || 2) * 60000);
|
|
94
|
-
}
|
|
95
|
-
this.props.onClose && this.props.onClose(true);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
handleCancel() {
|
|
99
|
-
this.props.onClose && this.props.onClose(false);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
render() {
|
|
103
|
-
if (typeof this.state.suppress === 'number') {
|
|
104
|
-
setTimeout(() => this.props.onClose && this.props.onClose(true), 100);
|
|
105
|
-
return null;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
return <Dialog
|
|
109
|
-
open={!0}
|
|
110
|
-
maxWidth="md"
|
|
111
|
-
fullWidth={this.props.fullWidth !== undefined ? this.props.fullWidth : true}
|
|
112
|
-
onClose={(event, reason) => {
|
|
113
|
-
if (reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
|
|
114
|
-
this.handleCancel();
|
|
115
|
-
}
|
|
116
|
-
}}
|
|
117
|
-
aria-labelledby="ar_confirmation_dialog_title"
|
|
118
|
-
aria-describedby="ar_confirmation_dialog_description"
|
|
119
|
-
>
|
|
120
|
-
<DialogTitle id="ar_confirmation_dialog_title">{this.props.title || I18n.t('ra_Are you sure?')}</DialogTitle>
|
|
121
|
-
<DialogContent>
|
|
122
|
-
<DialogContentText id="ar_confirmation_dialog_description">
|
|
123
|
-
{this.props.icon || null}
|
|
124
|
-
{this.props.text}
|
|
125
|
-
{this.props.suppressQuestionMinutes ? <br /> : null}
|
|
126
|
-
{this.props.suppressQuestionMinutes ? <FormControlLabel
|
|
127
|
-
sx={{ '& .FormControlLabel-label': styles.suppress, '&.FormControlLabel-root': styles.suppressRoot }}
|
|
128
|
-
control={<Checkbox
|
|
129
|
-
id={`ar_dialog_confirm_suppress_${this.props.dialogName || ''}`}
|
|
130
|
-
checked={!!this.state.suppress}
|
|
131
|
-
onChange={() => this.setState({ suppress: !this.state.suppress })}
|
|
132
|
-
/>}
|
|
133
|
-
label={this.props.suppressText || I18n.t('ra_Suppress question for next %s minutes', (this.props.suppressQuestionMinutes || 2).toString())}
|
|
134
|
-
/> : null}
|
|
135
|
-
</DialogContentText>
|
|
136
|
-
</DialogContent>
|
|
137
|
-
<DialogActions>
|
|
138
|
-
<Button
|
|
139
|
-
id={`ar_dialog_confirm_ok_${this.props.dialogName || ''}`}
|
|
140
|
-
variant="contained"
|
|
141
|
-
onClick={() => this.handleOk()}
|
|
142
|
-
color="primary"
|
|
143
|
-
autoFocus
|
|
144
|
-
startIcon={<IconCheck />}
|
|
145
|
-
>
|
|
146
|
-
{this.props.ok || I18n.t('ra_Ok')}
|
|
147
|
-
</Button>
|
|
148
|
-
<Button
|
|
149
|
-
id={`ar_dialog_confirm_cancel_${this.props.dialogName || ''}`}
|
|
150
|
-
variant="contained"
|
|
151
|
-
onClick={() => this.handleCancel()}
|
|
152
|
-
color="grey"
|
|
153
|
-
startIcon={<IconClose />}
|
|
154
|
-
>
|
|
155
|
-
{this.props.cancel || I18n.t('ra_Cancel')}
|
|
156
|
-
</Button>
|
|
157
|
-
</DialogActions>
|
|
158
|
-
</Dialog>;
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
export default DialogConfirm;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2019-2023 Denis Haev (bluefox) <dogafox@gmail.com>
|
|
3
|
+
*
|
|
4
|
+
* MIT License
|
|
5
|
+
*
|
|
6
|
+
* */
|
|
7
|
+
|
|
8
|
+
// please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
|
|
9
|
+
import React, { Component } from 'react';
|
|
10
|
+
|
|
11
|
+
import {
|
|
12
|
+
Button,
|
|
13
|
+
Dialog,
|
|
14
|
+
DialogActions,
|
|
15
|
+
DialogContent,
|
|
16
|
+
DialogContentText,
|
|
17
|
+
DialogTitle,
|
|
18
|
+
FormControlLabel,
|
|
19
|
+
Checkbox,
|
|
20
|
+
} from '@mui/material';
|
|
21
|
+
|
|
22
|
+
import {
|
|
23
|
+
Check as IconCheck,
|
|
24
|
+
Close as IconClose,
|
|
25
|
+
} from '@mui/icons-material';
|
|
26
|
+
|
|
27
|
+
import I18n from '../i18n';
|
|
28
|
+
|
|
29
|
+
const styles: Record<string, React.CSSProperties> = {
|
|
30
|
+
suppress: {
|
|
31
|
+
fontSize: 12,
|
|
32
|
+
},
|
|
33
|
+
suppressRoot: {
|
|
34
|
+
// it is sx
|
|
35
|
+
marginTop: '16px',
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
interface DialogConfirmProps {
|
|
40
|
+
/** The dialog title; default: Are you sure? (translated) */
|
|
41
|
+
title?: string;
|
|
42
|
+
/** The dialog text */
|
|
43
|
+
text?: string | React.JSX.Element;
|
|
44
|
+
/** Close handler. */
|
|
45
|
+
onClose?: (ok: boolean) => void;
|
|
46
|
+
/** if the dialog must be fill sized */
|
|
47
|
+
fullWidth?: boolean;
|
|
48
|
+
/** optional icon */
|
|
49
|
+
icon?: React.JSX.Element;
|
|
50
|
+
/** optional ok button text */
|
|
51
|
+
ok?: string;
|
|
52
|
+
/** optional cancel button text */
|
|
53
|
+
cancel?: string;
|
|
54
|
+
/** optional interval in minutes for which the confirmation dialog will be suppressed if activated. */
|
|
55
|
+
suppressQuestionMinutes?: number;
|
|
56
|
+
/** optional text for the suppression checkbox */
|
|
57
|
+
suppressText?: string;
|
|
58
|
+
/** optional name of the dialog. Used only with suppressQuestionMinutes to store the user choice */
|
|
59
|
+
dialogName?: string;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
interface DialogConfirmState {
|
|
63
|
+
suppress: number | boolean;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
class DialogConfirm extends Component<DialogConfirmProps, DialogConfirmState> {
|
|
67
|
+
constructor(props: DialogConfirmProps) {
|
|
68
|
+
super(props);
|
|
69
|
+
|
|
70
|
+
if (!this.props.dialogName && this.props.suppressQuestionMinutes) {
|
|
71
|
+
throw new Error('dialogName required if suppressQuestionMinutes used');
|
|
72
|
+
}
|
|
73
|
+
let suppress: number | boolean = false;
|
|
74
|
+
|
|
75
|
+
if (this.props.suppressQuestionMinutes) {
|
|
76
|
+
suppress = parseInt(((window as any)._localStorage || window.localStorage).getItem(this.props.dialogName), 10) || 0;
|
|
77
|
+
|
|
78
|
+
if (!suppress) {
|
|
79
|
+
suppress = false;
|
|
80
|
+
} else if (Date.now() > suppress) {
|
|
81
|
+
((window as any)._localStorage || window.localStorage).removeItem(this.props.dialogName);
|
|
82
|
+
suppress = false;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
this.state = {
|
|
87
|
+
suppress,
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
handleOk() {
|
|
92
|
+
if (this.state.suppress) {
|
|
93
|
+
((window as any)._localStorage || window.localStorage).setItem(this.props.dialogName, Date.now() + (this.props.suppressQuestionMinutes || 2) * 60000);
|
|
94
|
+
}
|
|
95
|
+
this.props.onClose && this.props.onClose(true);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
handleCancel() {
|
|
99
|
+
this.props.onClose && this.props.onClose(false);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
render() {
|
|
103
|
+
if (typeof this.state.suppress === 'number') {
|
|
104
|
+
setTimeout(() => this.props.onClose && this.props.onClose(true), 100);
|
|
105
|
+
return null;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
return <Dialog
|
|
109
|
+
open={!0}
|
|
110
|
+
maxWidth="md"
|
|
111
|
+
fullWidth={this.props.fullWidth !== undefined ? this.props.fullWidth : true}
|
|
112
|
+
onClose={(event, reason) => {
|
|
113
|
+
if (reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
|
|
114
|
+
this.handleCancel();
|
|
115
|
+
}
|
|
116
|
+
}}
|
|
117
|
+
aria-labelledby="ar_confirmation_dialog_title"
|
|
118
|
+
aria-describedby="ar_confirmation_dialog_description"
|
|
119
|
+
>
|
|
120
|
+
<DialogTitle id="ar_confirmation_dialog_title">{this.props.title || I18n.t('ra_Are you sure?')}</DialogTitle>
|
|
121
|
+
<DialogContent>
|
|
122
|
+
<DialogContentText id="ar_confirmation_dialog_description">
|
|
123
|
+
{this.props.icon || null}
|
|
124
|
+
{this.props.text}
|
|
125
|
+
{this.props.suppressQuestionMinutes ? <br /> : null}
|
|
126
|
+
{this.props.suppressQuestionMinutes ? <FormControlLabel
|
|
127
|
+
sx={{ '& .FormControlLabel-label': styles.suppress, '&.FormControlLabel-root': styles.suppressRoot }}
|
|
128
|
+
control={<Checkbox
|
|
129
|
+
id={`ar_dialog_confirm_suppress_${this.props.dialogName || ''}`}
|
|
130
|
+
checked={!!this.state.suppress}
|
|
131
|
+
onChange={() => this.setState({ suppress: !this.state.suppress })}
|
|
132
|
+
/>}
|
|
133
|
+
label={this.props.suppressText || I18n.t('ra_Suppress question for next %s minutes', (this.props.suppressQuestionMinutes || 2).toString())}
|
|
134
|
+
/> : null}
|
|
135
|
+
</DialogContentText>
|
|
136
|
+
</DialogContent>
|
|
137
|
+
<DialogActions>
|
|
138
|
+
<Button
|
|
139
|
+
id={`ar_dialog_confirm_ok_${this.props.dialogName || ''}`}
|
|
140
|
+
variant="contained"
|
|
141
|
+
onClick={() => this.handleOk()}
|
|
142
|
+
color="primary"
|
|
143
|
+
autoFocus
|
|
144
|
+
startIcon={<IconCheck />}
|
|
145
|
+
>
|
|
146
|
+
{this.props.ok || I18n.t('ra_Ok')}
|
|
147
|
+
</Button>
|
|
148
|
+
<Button
|
|
149
|
+
id={`ar_dialog_confirm_cancel_${this.props.dialogName || ''}`}
|
|
150
|
+
variant="contained"
|
|
151
|
+
onClick={() => this.handleCancel()}
|
|
152
|
+
color="grey"
|
|
153
|
+
startIcon={<IconClose />}
|
|
154
|
+
>
|
|
155
|
+
{this.props.cancel || I18n.t('ra_Cancel')}
|
|
156
|
+
</Button>
|
|
157
|
+
</DialogActions>
|
|
158
|
+
</Dialog>;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
export default DialogConfirm;
|