@iobroker/adapter-react-v5 4.13.6 → 4.13.7
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/ColorPicker.d.ts +34 -129
- package/Components/ColorPicker.js +178 -317
- package/Components/ComplexCron.d.ts +8 -7
- package/Components/ComplexCron.js +377 -462
- package/Components/ObjectBrowser.d.ts +1 -1
- package/Components/types.d.ts +1 -1
- package/README.md +3 -0
- package/package.json +1 -1
- package/Components/ColorPicker.js.map +0 -1
- package/Components/ComplexCron.js.map +0 -1
|
@@ -1,30 +1,33 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Object.
|
|
5
|
-
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
6
17
|
});
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var _iconsMaterial = require("@mui/icons-material");
|
|
21
|
-
var _i18n = _interopRequireDefault(require("../i18n"));
|
|
22
|
-
var _Utils = _interopRequireDefault(require("./Utils"));
|
|
23
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
24
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
25
|
-
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
|
|
26
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
|
|
27
|
-
* Copyright 2018-2023 Denis Haev (bluefox) <dogafox@gmail.com>
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
/**
|
|
30
|
+
* Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
|
|
28
31
|
*
|
|
29
32
|
* Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the "License");
|
|
30
33
|
* you may not use this file except in compliance with the License.
|
|
@@ -38,333 +41,191 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
38
41
|
* See the License for the specific language governing permissions and
|
|
39
42
|
* limitations under the License.
|
|
40
43
|
*/
|
|
41
|
-
|
|
42
|
-
|
|
44
|
+
const react_1 = __importStar(require("react"));
|
|
45
|
+
const react_color_1 = require("react-color");
|
|
46
|
+
const styles_1 = require("@mui/styles");
|
|
47
|
+
const material_1 = require("@mui/material");
|
|
48
|
+
const icons_material_1 = require("@mui/icons-material");
|
|
49
|
+
const i18n_1 = __importDefault(require("../i18n"));
|
|
50
|
+
const Utils_1 = __importDefault(require("./Utils"));
|
|
51
|
+
const styles = (theme) => ({
|
|
43
52
|
color: {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
53
|
+
width: 36,
|
|
54
|
+
height: 14,
|
|
55
|
+
borderRadius: 2,
|
|
47
56
|
},
|
|
48
57
|
delButton: {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
58
|
+
// width: 32,
|
|
59
|
+
// height: 32,
|
|
60
|
+
marginTop: 16,
|
|
52
61
|
},
|
|
53
62
|
swatch: {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
63
|
+
marginTop: 16,
|
|
64
|
+
padding: 5,
|
|
65
|
+
background: theme.palette.background.paper,
|
|
66
|
+
borderRadius: 1,
|
|
67
|
+
boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
|
|
68
|
+
display: 'inline-block',
|
|
69
|
+
cursor: 'pointer',
|
|
70
|
+
verticalAlign: 'middle',
|
|
62
71
|
},
|
|
63
72
|
swatchDisabled: {
|
|
64
|
-
|
|
65
|
-
|
|
73
|
+
opacity: 0.5,
|
|
74
|
+
cursor: 'default',
|
|
66
75
|
},
|
|
67
76
|
popover: {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
77
|
+
// position: 'absolute',
|
|
78
|
+
// zIndex: 2,
|
|
79
|
+
backgroundColor: '#00000000',
|
|
80
|
+
textAlign: 'right',
|
|
72
81
|
},
|
|
73
82
|
popoverList: {
|
|
74
|
-
|
|
83
|
+
padding: 0,
|
|
75
84
|
},
|
|
76
85
|
closeButton: {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
86
|
+
backgroundColor: `${theme.palette.background.paper} !important`,
|
|
87
|
+
borderRadius: '0 0 25% 25%',
|
|
88
|
+
'&:hover': {
|
|
89
|
+
backgroundColor: `${theme.palette.secondary.main} !important`,
|
|
90
|
+
},
|
|
82
91
|
},
|
|
83
92
|
cover: {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
93
|
+
position: 'fixed',
|
|
94
|
+
top: 0,
|
|
95
|
+
right: 0,
|
|
96
|
+
bottom: 0,
|
|
97
|
+
left: 0,
|
|
89
98
|
},
|
|
90
99
|
textDense: {
|
|
91
|
-
|
|
92
|
-
|
|
100
|
+
marginTop: 0,
|
|
101
|
+
marginBottom: 0,
|
|
93
102
|
},
|
|
94
103
|
picker: {
|
|
95
|
-
|
|
104
|
+
background: `${theme.palette.background.paper} !important`,
|
|
96
105
|
},
|
|
97
106
|
iconButton: {
|
|
98
|
-
|
|
99
|
-
|
|
107
|
+
width: 16,
|
|
108
|
+
height: 16,
|
|
100
109
|
},
|
|
101
110
|
button: {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
111
|
+
width: 32,
|
|
112
|
+
height: 32,
|
|
113
|
+
minWidth: 32,
|
|
114
|
+
minHeight: 32,
|
|
115
|
+
},
|
|
116
|
+
});
|
|
117
|
+
class ColorPicker extends react_1.Component {
|
|
118
|
+
constructor(props) {
|
|
119
|
+
super(props);
|
|
120
|
+
/**
|
|
121
|
+
* @private
|
|
122
|
+
*/
|
|
123
|
+
this.handleClick = (e) => {
|
|
124
|
+
this.setState({ displayColorPicker: !this.state.displayColorPicker, anchorEl: this.state.displayColorPicker ? null : e.currentTarget });
|
|
125
|
+
};
|
|
126
|
+
/**
|
|
127
|
+
* @private
|
|
128
|
+
*/
|
|
129
|
+
this.handleClose = () => {
|
|
130
|
+
this.setState({ displayColorPicker: false, anchorEl: null });
|
|
131
|
+
};
|
|
132
|
+
this.handleChange = (color) => {
|
|
133
|
+
this.setState({ color }, () => this.props.onChange && this.props.onChange(ColorPicker.getColor(color)));
|
|
134
|
+
};
|
|
135
|
+
this.state = {
|
|
136
|
+
displayColorPicker: false,
|
|
137
|
+
color: this.props.value || this.props.color || '',
|
|
138
|
+
anchorEl: null,
|
|
139
|
+
};
|
|
106
140
|
}
|
|
107
|
-
};
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* @typedef {object} Rgb
|
|
112
|
-
* @property {number} r The red component of the color (0-255).
|
|
113
|
-
* @property {number} g The green component of the color (0-255).
|
|
114
|
-
* @property {number} b The blue component of the color (0-255).
|
|
115
|
-
* @property {number} a The alpha component of the color (0-255).
|
|
116
|
-
*
|
|
117
|
-
* @typedef {string | Rgb | { rgb: Rgb }} Color Definition of a color.
|
|
118
|
-
*
|
|
119
|
-
* @typedef {object} ColorPickerProps
|
|
120
|
-
* @property {boolean} [disabled] Set to true to disable the color picker.
|
|
121
|
-
* @property {Color} [value] The currently selected color.
|
|
122
|
-
* @property {(rgba: string) => void} [onChange] The color change callback.
|
|
123
|
-
* @property {string} [name] The name.
|
|
124
|
-
* @property {React.CSSProperties} [style] Additional styling for this component.
|
|
125
|
-
* @property {string} [className] The CSS class name.
|
|
126
|
-
* @property {boolean} [openAbove] Open the color picker above the field?
|
|
127
|
-
*
|
|
128
|
-
* @extends {React.Component<ColorPickerProps>}
|
|
129
|
-
*/
|
|
130
|
-
var ColorPicker = /*#__PURE__*/function (_React$Component) {
|
|
131
|
-
/**
|
|
132
|
-
* @param {Readonly<ColorPickerProps>} props
|
|
133
|
-
*/
|
|
134
|
-
function ColorPicker(props) {
|
|
135
|
-
var _this;
|
|
136
|
-
(0, _classCallCheck2["default"])(this, ColorPicker);
|
|
137
|
-
_this = _callSuper(this, ColorPicker, [props]);
|
|
138
|
-
/**
|
|
139
|
-
* @private
|
|
140
|
-
*/
|
|
141
|
-
(0, _defineProperty2["default"])(_this, "handleClick", function (e) {
|
|
142
|
-
_this.setState({
|
|
143
|
-
displayColorPicker: !_this.state.displayColorPicker,
|
|
144
|
-
anchorEl: _this.state.displayColorPicker ? null : e.currentTarget
|
|
145
|
-
});
|
|
146
|
-
});
|
|
147
141
|
/**
|
|
148
|
-
*
|
|
142
|
+
* Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.
|
|
143
|
+
* @returns the hex or rgba representation of the given color.
|
|
149
144
|
*/
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
145
|
+
static getColor(color,
|
|
146
|
+
/** The returning string should be in hex format */
|
|
147
|
+
isHex) {
|
|
148
|
+
if (color && typeof color === 'object') {
|
|
149
|
+
const oColor = color;
|
|
150
|
+
if (oColor.rgb) {
|
|
151
|
+
if (isHex) {
|
|
152
|
+
return `#${oColor.rgb.r.toString(16).padStart(2, '0')}${oColor.rgb.g.toString(16).padStart(2, '0')}${oColor.rgb.b.toString(16).padStart(2, '0')}`;
|
|
153
|
+
}
|
|
154
|
+
return `rgba(${oColor.rgb.r},${oColor.rgb.g},${oColor.rgb.b},${oColor.rgb.a})`;
|
|
155
|
+
}
|
|
156
|
+
const rColor = color;
|
|
157
|
+
if (isHex) {
|
|
158
|
+
return `#${rColor.r.toString(16).padStart(2, '0')}${rColor.g.toString(16).padStart(2, '0')}${rColor.b.toString(16).padStart(2, '0')}`;
|
|
159
|
+
}
|
|
160
|
+
return `rgba(${rColor.r},${rColor.g},${rColor.b},${rColor.a})`;
|
|
161
|
+
}
|
|
162
|
+
return isHex ? ColorPicker.rgb2hex(color || '') : color || '';
|
|
163
|
+
}
|
|
156
164
|
/**
|
|
157
|
-
*
|
|
165
|
+
* Convert rgb() or rgba() format to hex format #rrggbb.
|
|
158
166
|
*/
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
anchorEl: null
|
|
170
|
-
};
|
|
171
|
-
return _this;
|
|
172
|
-
}
|
|
173
|
-
(0, _inherits2["default"])(ColorPicker, _React$Component);
|
|
174
|
-
return (0, _createClass2["default"])(ColorPicker, [{
|
|
175
|
-
key: "componentDidUpdate",
|
|
176
|
-
value:
|
|
167
|
+
static rgb2hex(rgb) {
|
|
168
|
+
const m = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
|
|
169
|
+
if (m) {
|
|
170
|
+
const r = parseInt(m[1], 10).toString(16).padStart(2, '0');
|
|
171
|
+
const g = parseInt(m[2], 10).toString(16).padStart(2, '0');
|
|
172
|
+
const b = parseInt(m[3], 10).toString(16).padStart(2, '0');
|
|
173
|
+
return (m === null || m === void 0 ? void 0 : m.length) === 4 ? `#${r}${g}${b}` : rgb;
|
|
174
|
+
}
|
|
175
|
+
return rgb;
|
|
176
|
+
}
|
|
177
177
|
/**
|
|
178
178
|
* IF the props are updated from outside, they should override the state
|
|
179
179
|
* @param _prevProps
|
|
180
180
|
* @param prevState
|
|
181
181
|
*/
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
color: color
|
|
187
|
-
});
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
}, {
|
|
191
|
-
key: "renderCustomPalette",
|
|
192
|
-
value: function renderCustomPalette() {
|
|
193
|
-
var _this2 = this;
|
|
194
|
-
if (!this.props.customPalette) {
|
|
195
|
-
return null;
|
|
196
|
-
}
|
|
197
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
198
|
-
style: {
|
|
199
|
-
width: '100%',
|
|
200
|
-
display: 'flex',
|
|
201
|
-
flexWrap: 'flex'
|
|
182
|
+
componentDidUpdate(_prevProps, prevState) {
|
|
183
|
+
const color = ColorPicker.getColor(this.props.color || this.props.value || '');
|
|
184
|
+
if (color !== prevState.color) {
|
|
185
|
+
this.setState({ color });
|
|
202
186
|
}
|
|
203
|
-
}, this.props.customPalette.map(function (color) {
|
|
204
|
-
return /*#__PURE__*/_react["default"].createElement(_material.Button, {
|
|
205
|
-
className: _this2.props.classes.button,
|
|
206
|
-
key: color,
|
|
207
|
-
onClick: function onClick() {
|
|
208
|
-
_this2.handleChange(color);
|
|
209
|
-
setTimeout(function () {
|
|
210
|
-
return _this2.handleClose();
|
|
211
|
-
}, 300);
|
|
212
|
-
}
|
|
213
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
214
|
-
className: _this2.props.classes.iconButton,
|
|
215
|
-
style: {
|
|
216
|
-
background: color
|
|
217
|
-
}
|
|
218
|
-
}));
|
|
219
|
-
}));
|
|
220
187
|
}
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
var _this3 = this;
|
|
225
|
-
var style = _objectSpread({}, this.props.style || {});
|
|
226
|
-
style.position = 'relative';
|
|
227
|
-
var color = this.state.color;
|
|
228
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
229
|
-
style: style,
|
|
230
|
-
className: this.props.className || ''
|
|
231
|
-
}, this.props.noInputField ? null : /*#__PURE__*/_react["default"].createElement(_material.TextField, {
|
|
232
|
-
disabled: this.props.disabled,
|
|
233
|
-
variant: "standard",
|
|
234
|
-
id: "ar_color_picker_name",
|
|
235
|
-
style: color ? {
|
|
236
|
-
width: 'calc(100% - 80px)'
|
|
237
|
-
} : {
|
|
238
|
-
width: 'calc(100% - 56px)',
|
|
239
|
-
marginRight: 8
|
|
240
|
-
},
|
|
241
|
-
label: this.props.label || this.props.name || 'color',
|
|
242
|
-
value: color || '',
|
|
243
|
-
margin: "dense",
|
|
244
|
-
classes: {
|
|
245
|
-
root: this.props.classes.textDense
|
|
246
|
-
},
|
|
247
|
-
onChange: function onChange(e) {
|
|
248
|
-
return _this3.handleChange(e.target.value);
|
|
249
|
-
}
|
|
250
|
-
}), !this.props.noInputField && color ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
|
|
251
|
-
disabled: this.props.disabled,
|
|
252
|
-
onClick: function onClick() {
|
|
253
|
-
return _this3.handleChange('');
|
|
254
|
-
},
|
|
255
|
-
size: "small",
|
|
256
|
-
className: this.props.classes.delButton,
|
|
257
|
-
style: color ? {} : {
|
|
258
|
-
opacity: 0,
|
|
259
|
-
cursor: 'default'
|
|
260
|
-
}
|
|
261
|
-
}, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, null)) : null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
262
|
-
className: _Utils["default"].clsx(this.props.classes.swatch, this.props.disabled && this.props.classes.swatchDisabled),
|
|
263
|
-
onClick: function onClick(e) {
|
|
264
|
-
return !_this3.props.disabled && _this3.handleClick(e);
|
|
265
|
-
},
|
|
266
|
-
title: _i18n["default"].t('ra_Select color'),
|
|
267
|
-
style: {
|
|
268
|
-
background: color ? undefined : 'transparent',
|
|
269
|
-
border: color ? undefined : '1px dashed #ccc',
|
|
270
|
-
boxSizing: 'border-box',
|
|
271
|
-
marginTop: this.props.noInputField ? 0 : undefined
|
|
272
|
-
}
|
|
273
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
274
|
-
className: this.props.classes.color,
|
|
275
|
-
style: {
|
|
276
|
-
background: color,
|
|
277
|
-
width: this.props.noInputField ? this.props.barWidth || 16 : this.props.barWidth || undefined
|
|
278
|
-
}
|
|
279
|
-
})), this.state.displayColorPicker && !this.props.disabled ? /*#__PURE__*/_react["default"].createElement(_material.Menu, {
|
|
280
|
-
classes: {
|
|
281
|
-
paper: this.props.classes.popover,
|
|
282
|
-
list: this.props.classes.popoverList
|
|
283
|
-
},
|
|
284
|
-
anchorEl: this.state.anchorEl,
|
|
285
|
-
open: !0,
|
|
286
|
-
onClose: function onClose() {
|
|
287
|
-
return _this3.handleClose();
|
|
288
|
-
}
|
|
289
|
-
}, /*#__PURE__*/_react["default"].createElement(_reactColor.ChromePicker, {
|
|
290
|
-
className: this.props.classes.picker,
|
|
291
|
-
color: this.state.color || '',
|
|
292
|
-
onChangeComplete: function onChangeComplete(_color) {
|
|
293
|
-
return _this3.handleChange(_color);
|
|
294
|
-
},
|
|
295
|
-
styles: {
|
|
296
|
-
picker: {
|
|
297
|
-
background: '#112233'
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
}), color && this.props.noInputField ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
|
|
301
|
-
className: this.props.classes.closeButton,
|
|
302
|
-
onClick: function onClick() {
|
|
303
|
-
return _this3.handleChange('');
|
|
188
|
+
renderCustomPalette() {
|
|
189
|
+
if (!this.props.customPalette) {
|
|
190
|
+
return null;
|
|
304
191
|
}
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
}, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null)), this.renderCustomPalette()) : null);
|
|
192
|
+
return react_1.default.createElement("div", { style: { width: '100%', display: 'flex', flexWrap: 'wrap' } }, this.props.customPalette.map(color => react_1.default.createElement(material_1.Button, { className: this.props.classes.button, key: color, onClick: () => {
|
|
193
|
+
this.handleChange(color);
|
|
194
|
+
setTimeout(() => this.handleClose(), 300);
|
|
195
|
+
} },
|
|
196
|
+
react_1.default.createElement("div", { className: this.props.classes.iconButton, style: { background: color } }))));
|
|
311
197
|
}
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
198
|
+
render() {
|
|
199
|
+
const style = Object.assign({}, (this.props.style || {}));
|
|
200
|
+
style.position = 'relative';
|
|
201
|
+
const { color } = this.state;
|
|
202
|
+
return react_1.default.createElement("div", { style: style, className: this.props.className || '' },
|
|
203
|
+
this.props.noInputField ? null : react_1.default.createElement(material_1.TextField, { disabled: this.props.disabled, variant: "standard", id: "ar_color_picker_name", style: color ? { width: 'calc(100% - 80px)' } : { width: 'calc(100% - 56px)', marginRight: 8 }, label: this.props.label || this.props.name || 'color', value: color || '', margin: "dense", classes: { root: this.props.classes.textDense }, onChange: e => this.handleChange(e.target.value) }),
|
|
204
|
+
!this.props.noInputField && color ? react_1.default.createElement(material_1.IconButton, { disabled: this.props.disabled, onClick: () => this.handleChange(''), size: "small", className: this.props.classes.delButton, style: color ? {} : { opacity: 0, cursor: 'default' } },
|
|
205
|
+
react_1.default.createElement(icons_material_1.Delete, null)) : null,
|
|
206
|
+
react_1.default.createElement("div", { className: Utils_1.default.clsx(this.props.classes.swatch, this.props.disabled && this.props.classes.swatchDisabled), onClick: e => !this.props.disabled && this.handleClick(e), title: i18n_1.default.t('ra_Select color'), style: {
|
|
207
|
+
background: color ? undefined : 'transparent',
|
|
208
|
+
border: color ? undefined : '1px dashed #ccc',
|
|
209
|
+
boxSizing: 'border-box',
|
|
210
|
+
marginTop: this.props.noInputField ? 0 : undefined,
|
|
211
|
+
} },
|
|
212
|
+
react_1.default.createElement("div", { className: this.props.classes.color, style: {
|
|
213
|
+
background: ColorPicker.getColor(color),
|
|
214
|
+
width: this.props.noInputField ? (this.props.barWidth || 16) : (this.props.barWidth || undefined),
|
|
215
|
+
} })),
|
|
216
|
+
this.state.displayColorPicker && !this.props.disabled ? react_1.default.createElement(material_1.Menu, { classes: { paper: this.props.classes.popover, list: this.props.classes.popoverList }, anchorEl: this.state.anchorEl, open: !0, onClose: () => this.handleClose() },
|
|
217
|
+
react_1.default.createElement(react_color_1.ChromePicker, { className: this.props.classes.picker, color: this.state.color || undefined, onChangeComplete: _color => this.handleChange(_color.rgb), styles: {
|
|
218
|
+
default: {
|
|
219
|
+
picker: {
|
|
220
|
+
backgroundColor: '#112233',
|
|
221
|
+
},
|
|
222
|
+
}
|
|
223
|
+
} }),
|
|
224
|
+
color && this.props.noInputField ? react_1.default.createElement(material_1.IconButton, { className: this.props.classes.closeButton, onClick: () => this.handleChange('') },
|
|
225
|
+
react_1.default.createElement(icons_material_1.Delete, null)) : null,
|
|
226
|
+
react_1.default.createElement(material_1.IconButton, { className: this.props.classes.closeButton, onClick: () => this.handleClose() },
|
|
227
|
+
react_1.default.createElement(icons_material_1.Close, null)),
|
|
228
|
+
this.renderCustomPalette()) : null);
|
|
335
229
|
}
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
* Convert rgb() or rgba() format to hex format #rrggbb.
|
|
339
|
-
* @param {string} rgb
|
|
340
|
-
* @returns {string}
|
|
341
|
-
*/
|
|
342
|
-
}, {
|
|
343
|
-
key: "rgb2hex",
|
|
344
|
-
value: function rgb2hex(rgb) {
|
|
345
|
-
var m = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
|
|
346
|
-
var r = parseInt(m[1], 10).toString(16).padStart(2, '0');
|
|
347
|
-
var g = parseInt(m[2], 10).toString(16).padStart(2, '0');
|
|
348
|
-
var b = parseInt(m[3], 10).toString(16).padStart(2, '0');
|
|
349
|
-
return m && m.length === 4 ? "#".concat(r).concat(g).concat(b) : rgb;
|
|
350
|
-
}
|
|
351
|
-
}]);
|
|
352
|
-
}(_react["default"].Component);
|
|
353
|
-
ColorPicker.propTypes = {
|
|
354
|
-
disabled: _propTypes["default"].bool,
|
|
355
|
-
value: _propTypes["default"].string,
|
|
356
|
-
onChange: _propTypes["default"].func.isRequired,
|
|
357
|
-
label: _propTypes["default"].string,
|
|
358
|
-
name: _propTypes["default"].string,
|
|
359
|
-
// same as label
|
|
360
|
-
style: _propTypes["default"].object,
|
|
361
|
-
className: _propTypes["default"].string,
|
|
362
|
-
customPalette: _propTypes["default"].array,
|
|
363
|
-
noInputField: _propTypes["default"].bool,
|
|
364
|
-
barWidth: _propTypes["default"].number
|
|
365
|
-
};
|
|
366
|
-
|
|
367
|
-
/** @type {typeof ColorPicker} */
|
|
368
|
-
var _export = (0, _styles.withStyles)(styles)(ColorPicker);
|
|
369
|
-
var _default = exports["default"] = _export;
|
|
370
|
-
//# sourceMappingURL=ColorPicker.js.map
|
|
230
|
+
}
|
|
231
|
+
exports.default = (0, styles_1.withStyles)(styles)(ColorPicker);
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
declare const _default: React.JSXElementConstructor<Omit<PropTypes.InferProps<{
|
|
2
|
-
cronExpression: PropTypes.Requireable<string>;
|
|
3
|
-
onChange: PropTypes.Validator<(...args: any[]) => any>;
|
|
4
|
-
language: PropTypes.Requireable<string>;
|
|
5
|
-
}>, "classes"> & import("@mui/styles").StyledComponentProps<"mainDiv" | "periodSelect" | "slider" | "tabContent" | "numberButton" | "numberButtonBreak" | "appBar"> & object>;
|
|
6
|
-
export default _default;
|
|
7
|
-
import PropTypes from 'prop-types';
|
|
8
1
|
import React from 'react';
|
|
2
|
+
interface ComplexCronProps {
|
|
3
|
+
cronExpression: string;
|
|
4
|
+
onChange: (cron: string) => void;
|
|
5
|
+
language: ioBroker.Languages;
|
|
6
|
+
classes: Record<string, any>;
|
|
7
|
+
}
|
|
8
|
+
declare const _default: React.JSXElementConstructor<Omit<ComplexCronProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
|
|
9
|
+
export default _default;
|