wix-style-react
Version:
wix-style-react
177 lines • 8.5 kB
JavaScript
import React from 'react';
import CSSTransition from 'react-transition-group/CSSTransition';
import PropTypes from 'prop-types';
import { withFocusable } from '../common/Focusable';
import Content from './Content';
import DragHandle from './DragHandle';
import { Layer, Skin, Placement, Visible } from './constants';
import { st, classes } from './MediaOverlay.st.css';
const layerToVisiblePropMap = {
[Layer.Default]: Visible.Default,
[Layer.Hover]: Visible.Hover,
[Layer.Top]: Visible.Always,
};
const placementToRowAlignment = {
[Placement.TopStart]: 'top',
[Placement.TopEnd]: 'top',
[Placement.Middle]: 'middle',
[Placement.BottomStart]: 'bottom',
[Placement.BottomEnd]: 'bottom',
};
/** MediaOverlay */
class MediaOverlay extends React.PureComponent {
constructor() {
super(...arguments);
this.state = {
isHovered: false,
};
this._onMouseEnter = () => {
if (this.props.hovered === undefined) {
this.setState({ isHovered: true });
}
};
this._onMouseLeave = () => {
if (this.props.hovered === undefined) {
this.setState({ isHovered: false });
}
};
this._getFocusProps = () => {
const { onClick, focusableOnFocus, focusableOnBlur, ariaHidden } = this.props;
if (onClick) {
return {
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
tabIndex: ariaHidden ? -1 : 0,
};
}
return { tabIndex: -1 };
};
this._getHoverSkin = () => {
const { skin, hoverSkin } = this.props;
return hoverSkin || skin; // hoverSkin defaults to skin prop value if not provided
};
this._hasSingleSkin = () => this.props.skin === this._getHoverSkin();
this._filterContent = layer => {
const { children } = this.props;
const contentElements = React.Children.map(children, child => child) || [];
const filterProps = { visible: layerToVisiblePropMap[layer] };
return contentElements.filter(child => React.isValidElement(child) &&
child.type.displayName === Content.displayName &&
Object.keys(filterProps).every(prop => filterProps[prop] === child.props[prop]));
};
this._isContentEmpty = layer => !this._filterContent(layer).length;
this._renderDefaultLayer = () => {
const skin = this._hasSingleSkin() ? Skin.None : this.props.skin;
return this._renderTransitionOverlay(Layer.Default, skin, false);
};
this._renderHoverLayer = () => {
const skin = this._hasSingleSkin() ? Skin.None : this._getHoverSkin();
return this._renderTransitionOverlay(Layer.Hover, skin, true);
};
this._renderTopLayer = () => this._renderOverlay(Layer.Top, Skin.None);
// When both skins for default and hover layers are the same - we don't want to
// animate them with opacity transition as this will produce an undesired effect
// (but we still want to animate all the content inside an overlay layer). As a
// workaround we create this background layer that has no content or animations
// and will render here only the common skin background.
this._renderSingleSkinLayer = () => this._hasSingleSkin() &&
this._renderOverlay(Layer.SingleSkin, this.props.skin);
this._shouldRenderOverlay = (layer, skin) => skin !== Skin.None || !this._isContentEmpty(layer);
this._renderOverlay = (layer, skin) => {
if (!this._shouldRenderOverlay(layer, skin)) {
return;
}
return (React.createElement("div", { className: st(classes.overlay, { layer, skin }) }, this._renderContent(layer)));
};
this._renderTransitionOverlay = (layer, skin, mountOnEnter) => {
if (!this._shouldRenderOverlay(layer, skin)) {
return;
}
const { hovered } = this.props;
const transitionProps = {
in: hovered !== undefined ? hovered : this.state.isHovered,
timeout: 200,
mountOnEnter,
unmountOnExit: mountOnEnter,
classNames: {
enter: classes.hoverEnter,
enterActive: classes.hoverEnterActive,
enterDone: classes.hoverEnterDone,
exit: classes.hoverExit,
},
};
return (React.createElement(CSSTransition, { ...transitionProps }, this._renderOverlay(layer, skin)));
};
this._renderContent = layer => {
if (this._isContentEmpty(layer)) {
return;
}
const contentElements = this._filterContent(layer);
if (!contentElements.length) {
return;
}
return contentElements.map(({ props }, index) => (React.createElement("div", { key: index, className: st(classes.contentRow, {
placement: props.placement,
row: placementToRowAlignment[props.placement],
}) },
React.createElement("div", { className: st(classes.contentArea, { placement: props.placement }), "data-hook": "content-area" }, props.children))));
};
}
render() {
const { dataHook, skin, media, onClick, removeRoundedBorders, className, borderRadius, ariaHidden, } = this.props;
const isMediaImageUrl = typeof media === 'string';
const Component = onClick ? 'button' : 'div';
return (React.createElement(Component, { "aria-hidden": ariaHidden, "data-hook": dataHook, onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, onClick: onClick, ...this._getFocusProps(), className: st(classes.root, { clickable: !!onClick, removeRadius: removeRoundedBorders }, className), "data-skin": skin, "data-hoverskin": this._getHoverSkin(), style: {
backgroundImage: isMediaImageUrl && `url(${media})`,
borderRadius,
} },
!isMediaImageUrl && React.isValidElement(media) && media,
this._renderSingleSkinLayer(),
this._renderDefaultLayer(),
this._renderHoverLayer(),
this._renderTopLayer()));
}
}
MediaOverlay.displayName = 'MediaOverlay';
MediaOverlay.Content = Content;
MediaOverlay.DragHandle = DragHandle;
MediaOverlay.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element. */
className: PropTypes.string,
/** Sets a default overlay skin. */
skin: PropTypes.oneOf(['none', 'gradient', 'dark']),
/** Sets a hover overlay skin. */
hoverSkin: PropTypes.oneOf(['none', 'gradient', 'dark']),
/** Accept image URL or a custom node as a media background. */
media: PropTypes.node.isRequired,
/**
* Defines a click handler. When provided, component will be clickable and will have a pointer cursor on hover.
*/
onClick: PropTypes.func,
/**
* Accepts any component as `<MediaOverlay.Content>` content.
* Each element has the following properties:
* - `visible` - define when to display this content. Possible values are:
* - `default` (default) - content is visible only when not hovered.
* - `hover` - content is visible only when hovered.
* - `always` - content is always visible.
* - `placement` - define where to place this content. Possible values are `top-start`,
* `top-end`, `middle` (default), `bottom-end` and `bottom-start`.
*/
children: PropTypes.node,
/** Toggles hover state in a controlled mode. */
hovered: PropTypes.bool,
/** Removes a default borders radius. */
removeRoundedBorders: PropTypes.bool,
/** Control border radius of the media container. */
borderRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. */
ariaHidden: PropTypes.bool,
};
MediaOverlay.defaultProps = {
skin: 'none',
};
export default withFocusable(MediaOverlay);
//# sourceMappingURL=MediaOverlay.js.map