wix-style-react
Version:
wix-style-react
194 lines (172 loc) • 8.02 kB
JavaScript
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; }; }();
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; }
import React from 'react';
import PropTypes from 'prop-types';
import Delete from 'wix-ui-icons-common/Delete';
import Replace from 'wix-ui-icons-common/Replace';
import FormFieldError from 'wix-ui-icons-common/system/FormFieldError';
import classNames from 'classnames';
import style from './ImageViewer.scss';
import Tooltip from '../Tooltip';
import Button from '../Button';
import WixComponent from '../BaseComponents/WixComponent';
import AddItem from '../AddItem/AddItem';
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 = classNames(style.container, (_classNames = {}, _defineProperty(_classNames, style.hasLogo, imageUrl), _defineProperty(_classNames, style.hasError, error), _classNames));
var tooltipProps = _extends({}, DEFAULT_TOOLTIP_PROPS, this.props.tooltipProps);
return React.createElement(
'div',
{ className: classes, style: { width: width, height: height } },
!imageUrl && React.createElement(AddItem, {
onClick: onAddImage,
theme: 'image',
dataHook: 'add-image',
tooltipProps: _extends({}, tooltipProps, { content: addImageInfo })
}),
!!imageUrl && React.createElement(
'div',
{ className: style.changeLogoContainer },
React.createElement(
'div',
{ className: style.imageLayout },
React.createElement('img', {
'data-hook': 'image-viewer-image',
className: style.image,
src: imageUrl
})
),
React.createElement(
'div',
{ className: style.imageBackground },
React.createElement(
'div',
{ className: style.buttons },
!!showUpdateButton && React.createElement(
Tooltip,
_extends({
dataHook: 'update-image'
}, tooltipProps, {
content: updateImageInfo
}),
React.createElement(
Button,
{ onClick: onUpdateImage, theme: 'icon-whitesecondary' },
React.createElement(Replace, { size: '1.5em' })
)
),
React.createElement(
Tooltip,
_extends({
dataHook: 'remove-image'
}, tooltipProps, {
content: removeImageInfo
}),
React.createElement(
Button,
{ theme: 'icon-whitesecondary', onClick: onRemoveImage },
React.createElement(Delete, { size: '1.5em' })
)
)
)
)
),
!!error && React.createElement(
Tooltip,
_extends({
dataHook: 'error-tooltip',
disabled: !errorMessage,
content: errorMessage
}, tooltipProps, {
placement: tooltipPlacement || tooltipProps.placement
}),
React.createElement(
'div',
{ className: style.exclamation },
React.createElement(FormFieldError, null)
)
)
);
}
}]);
return ImageViewer;
}(WixComponent);
ImageViewer.displayName = 'ImageViewer';
ImageViewer.defaultProps = {
showUpdateButton: true,
addImageInfo: 'Add Image',
updateImageInfo: 'Update',
removeImageInfo: 'Remove'
};
/* eslint-disable no-unused-vars */
var _Tooltip$propTypes = Tooltip.propTypes,
content = _Tooltip$propTypes.content,
imageViewerTooltipProps = _objectWithoutProperties(_Tooltip$propTypes, ['content']);
ImageViewer.propTypes = {
/** Image url, blank for not uploaded */
imageUrl: PropTypes.string,
/** Show error icon */
error: PropTypes.bool,
/** Error tooltip message */
errorMessage: PropTypes.string,
/** Error tooltip placement
* @deprecated
* @see tooltipProps
*/
tooltipPlacement: PropTypes.string,
/** Tooltip props, common for all tooltips */
tooltipProps: PropTypes.shape(imageViewerTooltipProps),
/** Show update button */
showUpdateButton: PropTypes.bool,
/** Add image click handler */
onAddImage: PropTypes.func,
/** Update image click handler */
onUpdateImage: PropTypes.func,
/** Remove image click handler */
onRemoveImage: PropTypes.func,
/** Add image tooltip */
addImageInfo: PropTypes.string,
/** Update image tooltip */
updateImageInfo: PropTypes.string,
/** Remove image tooltip */
removeImageInfo: PropTypes.string,
/** Element width */
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/** Element height */
height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
};
export default ImageViewer;