@iobroker/adapter-react
Version:
React classes to develop admin interfaces for ioBroker with react.
307 lines (268 loc) • 10.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactColor = require("react-color");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styles = require("@material-ui/core/styles");
var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var styles = function styles(theme) {
return {
color: {
width: 36,
height: 14,
borderRadius: 2
},
delButton: {
//width: 32,
//height: 32,
marginTop: 16
},
swatch: {
marginTop: 16,
padding: 5,
background: '#fff',
borderRadius: 1,
boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
display: 'inline-block',
cursor: 'pointer',
verticalAlign: 'middle'
},
swatchDisabled: {
opacity: 0.5,
cursor: 'default'
},
popover: {
position: 'absolute',
zIndex: 2
},
cover: {
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0
},
textDense: {
marginTop: 0,
marginBottom: 0
}
};
};
/**
* @typedef {object} Rgb
* @property {number} r The red component of the color (0-255).
* @property {number} g The green component of the color (0-255).
* @property {number} b The blue component of the color (0-255).
* @property {number} a The alpha component of the color (0-255).
*
* @typedef {string | Rgb | { rgb: Rgb }} Color Definition of a color.
*
* @typedef {object} ColorPickerProps
* @property {boolean} [disabled] Set to true to disable the color picker.
* @property {Color} [value] The currently selected color.
* @property {(rgba: string) => void} [onChange] The color change callback.
* @property {string} [name] The name.
* @property {React.CSSProperties} [style] Additional styling for this component.
* @property {string} [className] The CSS class name.
* @property {boolean} [openAbove] Open the color picker above the field?
*
* @extends {React.Component<ColorPickerProps>}
*/
var ColorPicker = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(ColorPicker, _React$Component);
var _super = _createSuper(ColorPicker);
/**
* @param {Readonly<ColorPickerProps>} props
*/
function ColorPicker(props) {
var _this;
(0, _classCallCheck2["default"])(this, ColorPicker);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function () {
_this.setState({
displayColorPicker: !_this.state.displayColorPicker
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClose", function () {
_this.setState({
displayColorPicker: false
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (color) {
_this.setState({
color: color
});
_this.props.onChange && _this.props.onChange(ColorPicker.getColor(color));
});
_this.state = {
displayColorPicker: false,
color: _this.props.value || _this.props.color
};
return _this;
}
/**
* Get the state derived from the given properties and state.
* @param {{ color: Color; }} props
* @param {{ color: Color; }} state
*/
(0, _createClass2["default"])(ColorPicker, [{
key: "render",
value: function render() {
var _this2 = this;
var color = ColorPicker.getColor(this.state.color);
var style = {};
if (this.state.displayColorPicker && this.props.openAbove) {
style = {
top: -241
};
}
return /*#__PURE__*/_react["default"].createElement("div", {
style: Object.assign({}, this.props.style || {}, {
position: 'relative'
}),
className: this.props.className || ''
}, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
disabled: this.props.disabled,
id: "name",
style: color ? {
width: 'calc(100% - 80px)'
} : {
width: 'calc(100% - 54px)',
marginRight: 8
},
label: this.props.name || 'color',
value: color,
margin: "dense",
classes: {
root: this.props.classes.textDense
},
onChange: function onChange(e) {
return _this2.handleChange(e.target.value);
}
}), color ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
disabled: this.props.disabled,
onClick: function onClick() {
return _this2.handleChange('');
},
size: "small",
className: this.props.classes.delButton,
style: color ? {} : {
opacity: 0,
cursor: 'default'
}
}, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)) : null, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(this.props.classes.swatch).concat(this.props.disabled ? ' ' + this.props.classes.swatchDisabled : ''),
onClick: function onClick() {
return !_this2.props.disabled && _this2.handleClick();
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: this.props.classes.color,
style: {
background: color
}
})), this.state.displayColorPicker && !this.props.disabled ? /*#__PURE__*/_react["default"].createElement("div", {
className: this.props.classes.popover,
style: style
}, /*#__PURE__*/_react["default"].createElement("div", {
className: this.props.classes.cover,
onClick: function onClick() {
return _this2.handleClose();
}
}), /*#__PURE__*/_react["default"].createElement(_reactColor.ChromePicker, {
color: this.state.color,
onChangeComplete: function onChangeComplete(color) {
return _this2.handleChange(color);
}
})) : null);
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(props, state) {
var pColor = ColorPicker.getColor(props.value || props.color);
var sColor = ColorPicker.getColor(state.color);
if (pColor !== sColor) {
return {
color: props.value || props.color
};
} else {
return null;
}
}
/**
* @private
*/
}, {
key: "getColor",
value:
/**
* Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.
* @param {Color} [color]
* @param {boolean} [isHex] The returning string should be in hex format
* @returns {string} the hex or rgba representation of the given color.
*/
function getColor(color, isHex) {
if (color && (0, _typeof2["default"])(color) === 'object') {
if (color.rgb) {
if (isHex) {
return '#' + color.rgb.r.toString(16).padStart(2, '0') + color.rgb.g.toString(16).padStart(2, '0') + color.rgb.b.toString(16).padStart(2, '0');
} else {
return 'rgba(' + color.rgb.r + ',' + color.rgb.g + ',' + color.rgb.b + ',' + color.rgb.a + ')';
}
} else {
if (isHex) {
return '#' + color.r.toString(16).padStart(2, '0') + color.g.toString(16).padStart(2, '0') + color.b.toString(16).padStart(2, '0');
} else {
return 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')';
}
}
} else {
return isHex ? ColorPicker.rgb2hex(color || '') : color || '';
}
}
/**
* Convert rgb() or rgba() format to hex format #rrggbb.
* @param {string} rgb
* @returns {string}
*/
}, {
key: "rgb2hex",
value: function rgb2hex(rgb) {
var m = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return m && m.length === 4 ? '#' + parseInt(m[1], 10).toString(16).padStart(2, '0') + parseInt(m[2], 10).toString(16).padStart(2, '0') + parseInt(m[3], 10).toString(16).padStart(2, '0') : rgb;
}
/**
* @private
*/
}]);
return ColorPicker;
}(_react["default"].Component);
ColorPicker.propTypes = {
disabled: _propTypes["default"].bool,
value: _propTypes["default"].string,
onChange: _propTypes["default"].func.isRequired,
name: _propTypes["default"].string,
style: _propTypes["default"].object,
className: _propTypes["default"].string,
openAbove: _propTypes["default"].bool
};
/** @type {typeof ColorPicker} */
var _export = (0, _styles.withStyles)(styles)(ColorPicker);
var _default = _export;
exports["default"] = _default;
//# sourceMappingURL=ColorPicker.js.map