@iobroker/adapter-react
Version:
React classes to develop admin interfaces for ioBroker with react.
187 lines (161 loc) • 7.57 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactDropzone = require("react-dropzone");
var _styles = require("@material-ui/core/styles");
var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
var _IconSelector = _interopRequireDefault(require("./IconSelector"));
var _Icon = _interopRequireDefault(require("./Icon"));
var _i18n = _interopRequireDefault(require("../i18n"));
var _Utils = _interopRequireDefault(require("./Utils"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* @typedef {object} IconPickerProps
* @property {string} [value] The value.
* @property {string} [label] The label.
* @property {boolean} [disabled] Set to true to disable the icon picker.
* @property {(icon: string) => void} onChange The icon change callback.
* @property {import('../Connection').default} socket The socket connection.
* @property {string} [imagePrefix] The image prefix (default: './files/')
* @property {React.CSSProperties} [style] Additional styling for this component.
* @property {string} [className] The CSS class name.
*
* @extends {React.Component<IconPickerProps>}
*/
var IconPicker = function IconPicker(props) {
var _props$customClasses, _props$customClasses2;
var IconCustom = props.icon;
var useStyles = (0, _styles.makeStyles)(function (theme) {
return {
formContainer: {
display: 'flex',
justifyContent: 'left',
alignItems: 'center'
},
formControl: {
display: 'flex',
padding: 24,
flexGrow: 1000
},
divContainer: {
width: 32 + 24,
height: 32,
whiteSpace: 'nowrap',
lineHeight: '32px',
marginRight: 8
},
dragField: {
textAlign: 'center',
display: 'table',
minHeight: 90,
width: 'calc(100% - 60px)',
border: '2px dashed #777',
borderRadius: 10,
padding: 4
},
formIcon: {
margin: 10,
opacity: 0.6
},
text: {
display: 'table-cell',
verticalAlign: 'middle'
}
};
});
var classes = useStyles();
var onDrop = (0, _react.useCallback)(function (acceptedFiles) {
var reader = new FileReader();
reader.addEventListener('load', function () {
return props.onChange(reader.result);
}, false);
if (acceptedFiles[0]) {
reader.readAsDataURL(acceptedFiles[0]);
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
var _useDropzone = (0, _reactDropzone.useDropzone)({
onDrop: onDrop
}),
getRootProps = _useDropzone.getRootProps,
getInputProps = _useDropzone.getInputProps,
isDragActive = _useDropzone.isDragActive;
return /*#__PURE__*/_react["default"].createElement("div", {
className: classes.formContainer
}, IconCustom ? /*#__PURE__*/_react["default"].createElement(IconCustom, {
className: classes.formIcon
}) : null, /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
className: classes.formControl,
style: {
padding: 3
}
}, /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], {
shrink: true,
classes: {
root: (_props$customClasses = props.customClasses) === null || _props$customClasses === void 0 ? void 0 : _props$customClasses.label
}
}, props.label), /*#__PURE__*/_react["default"].createElement("div", {
className: classes.formContainer
}, props.value ? /*#__PURE__*/_react["default"].createElement("div", {
className: classes.divContainer
}, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
alt: "",
className: _Utils["default"].clsx(props.previewClassName, (_props$customClasses2 = props.customClasses) === null || _props$customClasses2 === void 0 ? void 0 : _props$customClasses2.icon),
src: props.value
}), !props.disabled && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
style: {
verticalAlign: 'top'
},
title: _i18n["default"].t('ra_Clear icon'),
size: "small",
onClick: function onClick() {
return props.onChange('');
}
}, /*#__PURE__*/_react["default"].createElement(_Clear["default"], null))) : !props.disabled && /*#__PURE__*/_react["default"].createElement(_IconSelector["default"], {
icons: props.icons,
onlyRooms: props.onlyRooms,
onlyDevices: props.onlyDevices,
onSelect: function onSelect(base64) {
return props.onChange(base64);
},
t: _i18n["default"].t,
lang: _i18n["default"].getLanguage()
}), !props.disabled && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, getRootProps(), {
className: classes.dragField,
style: isDragActive ? {
backgroundColor: 'rgba(0, 255, 0, 0.1)'
} : {
cursor: 'pointer'
}
}), /*#__PURE__*/_react["default"].createElement("input", getInputProps()), isDragActive ? /*#__PURE__*/_react["default"].createElement("span", {
className: classes.text
}, _i18n["default"].t('ra_Drop the files here...')) : /*#__PURE__*/_react["default"].createElement("span", {
className: classes.text
}, _i18n["default"].t("ra_Drag 'n' drop some files here, or click to select files"))))));
};
IconPicker.propTypes = {
previewClassName: _propTypes["default"].string,
icon: _propTypes["default"].object,
customClasses: _propTypes["default"].object,
label: _propTypes["default"].string,
value: _propTypes["default"].any,
disabled: _propTypes["default"].bool,
onChange: _propTypes["default"].func.isRequired,
icons: _propTypes["default"].array,
onlyRooms: _propTypes["default"].bool,
onlyDevices: _propTypes["default"].bool
};
/** @type {typeof IconPicker} */
var _default = IconPicker;
exports["default"] = _default;
//# sourceMappingURL=IconPicker.js.map