wix-style-react
Version:
wix-style-react
233 lines (188 loc) • 9.46 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Delete = require('wix-ui-icons-common/Delete');
var _Delete2 = _interopRequireDefault(_Delete);
var _Replace = require('wix-ui-icons-common/Replace');
var _Replace2 = _interopRequireDefault(_Replace);
var _FormFieldError = require('wix-ui-icons-common/system/FormFieldError');
var _FormFieldError2 = _interopRequireDefault(_FormFieldError);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _ImageViewer = require('./ImageViewer.scss');
var _ImageViewer2 = _interopRequireDefault(_ImageViewer);
var _Tooltip = require('../Tooltip');
var _Tooltip2 = _interopRequireDefault(_Tooltip);
var _Button = require('../Button');
var _Button2 = _interopRequireDefault(_Button);
var _WixComponent2 = require('../BaseComponents/WixComponent');
var _WixComponent3 = _interopRequireDefault(_WixComponent2);
var _AddItem = require('../AddItem/AddItem');
var _AddItem2 = _interopRequireDefault(_AddItem);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var DEFAULT_TOOLTIP_PROPS = {
showDelay: 0,
hideDelay: 0,
align: 'center',
placement: 'top',
theme: 'dark'
};
var ImageViewer = function (_WixComponent) {
_inherits(ImageViewer, _WixComponent);
function ImageViewer() {
_classCallCheck(this, ImageViewer);
return _possibleConstructorReturn(this, (ImageViewer.__proto__ || Object.getPrototypeOf(ImageViewer)).apply(this, arguments));
}
_createClass(ImageViewer, [{
key: 'render',
value: function render() {
var _classNames;
var _props = this.props,
imageUrl = _props.imageUrl,
onAddImage = _props.onAddImage,
onUpdateImage = _props.onUpdateImage,
onRemoveImage = _props.onRemoveImage,
addImageInfo = _props.addImageInfo,
showUpdateButton = _props.showUpdateButton,
updateImageInfo = _props.updateImageInfo,
removeImageInfo = _props.removeImageInfo,
width = _props.width,
height = _props.height,
error = _props.error,
errorMessage = _props.errorMessage,
tooltipPlacement = _props.tooltipPlacement;
var classes = (0, _classnames2.default)(_ImageViewer2.default.container, (_classNames = {}, _defineProperty(_classNames, _ImageViewer2.default.hasLogo, imageUrl), _defineProperty(_classNames, _ImageViewer2.default.hasError, error), _classNames));
var tooltipProps = _extends({}, DEFAULT_TOOLTIP_PROPS, this.props.tooltipProps);
return _react2.default.createElement(
'div',
{ className: classes, style: { width: width, height: height } },
!imageUrl && _react2.default.createElement(_AddItem2.default, {
onClick: onAddImage,
theme: 'image',
dataHook: 'add-image',
tooltipProps: _extends({}, tooltipProps, { content: addImageInfo })
}),
!!imageUrl && _react2.default.createElement(
'div',
{ className: _ImageViewer2.default.changeLogoContainer },
_react2.default.createElement(
'div',
{ className: _ImageViewer2.default.imageLayout },
_react2.default.createElement('img', {
'data-hook': 'image-viewer-image',
className: _ImageViewer2.default.image,
src: imageUrl
})
),
_react2.default.createElement(
'div',
{ className: _ImageViewer2.default.imageBackground },
_react2.default.createElement(
'div',
{ className: _ImageViewer2.default.buttons },
!!showUpdateButton && _react2.default.createElement(
_Tooltip2.default,
_extends({
dataHook: 'update-image'
}, tooltipProps, {
content: updateImageInfo
}),
_react2.default.createElement(
_Button2.default,
{ onClick: onUpdateImage, theme: 'icon-whitesecondary' },
_react2.default.createElement(_Replace2.default, { size: '1.5em' })
)
),
_react2.default.createElement(
_Tooltip2.default,
_extends({
dataHook: 'remove-image'
}, tooltipProps, {
content: removeImageInfo
}),
_react2.default.createElement(
_Button2.default,
{ theme: 'icon-whitesecondary', onClick: onRemoveImage },
_react2.default.createElement(_Delete2.default, { size: '1.5em' })
)
)
)
)
),
!!error && _react2.default.createElement(
_Tooltip2.default,
_extends({
dataHook: 'error-tooltip',
disabled: !errorMessage,
content: errorMessage
}, tooltipProps, {
placement: tooltipPlacement || tooltipProps.placement
}),
_react2.default.createElement(
'div',
{ className: _ImageViewer2.default.exclamation },
_react2.default.createElement(_FormFieldError2.default, null)
)
)
);
}
}]);
return ImageViewer;
}(_WixComponent3.default);
ImageViewer.displayName = 'ImageViewer';
ImageViewer.defaultProps = {
showUpdateButton: true,
addImageInfo: 'Add Image',
updateImageInfo: 'Update',
removeImageInfo: 'Remove'
};
/* eslint-disable no-unused-vars */
var _Tooltip$propTypes = _Tooltip2.default.propTypes,
content = _Tooltip$propTypes.content,
imageViewerTooltipProps = _objectWithoutProperties(_Tooltip$propTypes, ['content']);
ImageViewer.propTypes = {
/** Image url, blank for not uploaded */
imageUrl: _propTypes2.default.string,
/** Show error icon */
error: _propTypes2.default.bool,
/** Error tooltip message */
errorMessage: _propTypes2.default.string,
/** Error tooltip placement
* @deprecated
* @see tooltipProps
*/
tooltipPlacement: _propTypes2.default.string,
/** Tooltip props, common for all tooltips */
tooltipProps: _propTypes2.default.shape(imageViewerTooltipProps),
/** Show update button */
showUpdateButton: _propTypes2.default.bool,
/** Add image click handler */
onAddImage: _propTypes2.default.func,
/** Update image click handler */
onUpdateImage: _propTypes2.default.func,
/** Remove image click handler */
onRemoveImage: _propTypes2.default.func,
/** Add image tooltip */
addImageInfo: _propTypes2.default.string,
/** Update image tooltip */
updateImageInfo: _propTypes2.default.string,
/** Remove image tooltip */
removeImageInfo: _propTypes2.default.string,
/** Element width */
width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
/** Element height */
height: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
};
exports.default = ImageViewer;