@cloudscape_innovation/react-images-viewer
Version:
Create an react-images-viewer component.
60 lines (59 loc) • 1.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _noImportant = require("aphrodite/no-important");
var _theme = _interopRequireDefault(require("../theme"));
var _util = require("../utils/util");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function Thumbnail(_ref) {
var index = _ref.index,
src = _ref.src,
thumbnail = _ref.thumbnail,
active = _ref.active,
_onClick = _ref.onClick,
theme = _ref.theme;
var url = thumbnail || src;
var classes = _noImportant.StyleSheet.create((0, _util.deepMerge)(defaultStyles, theme));
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _noImportant.css)(classes.thumbnail, active && classes.thumbnail__active),
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
_onClick(index);
},
style: {
backgroundImage: "url(\"".concat(url, "\")")
}
});
}
Thumbnail.propTypes = {
theme: _propTypes.default.object,
active: _propTypes.default.bool,
index: _propTypes.default.number,
onClick: _propTypes.default.func.isRequired,
src: _propTypes.default.string,
thumbnail: _propTypes.default.string
};
var defaultStyles = {
thumbnail: {
backgroundPosition: 'center',
backgroundSize: 'cover',
borderRadius: 2,
boxShadow: 'inset 0 0 0 1px hsla(0, 0%, 100%, .2)',
cursor: 'pointer',
display: 'inline-block',
height: _theme.default.thumbnail.size,
margin: _theme.default.thumbnail.gutter,
overflow: 'hidden',
width: _theme.default.thumbnail.size
},
thumbnail__active: {
boxShadow: "inset 0 0 0 2px ".concat(_theme.default.thumbnail.activeBorderColor)
}
};
var _default = exports.default = Thumbnail;