wix-style-react
Version:
99 lines (88 loc) • 3.92 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _themeToButtonProps;
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './FloatingHelperContent.st.css';
import { floatingHelperAppearance } from '../constants';
import { dataHooks, actionButtonTheme } from './constants';
import Text from '../../Text';
import Button from '../../Button';
import { SKINS as ButtonSkin, PRIORITY as ButtonPriority } from '../../Button/constants';
var themeToButtonProps = (_themeToButtonProps = {}, _defineProperty(_themeToButtonProps, actionButtonTheme.white, {
skin: ButtonSkin.light,
priority: ButtonPriority.secondary
}), _defineProperty(_themeToButtonProps, actionButtonTheme.standard, {
skin: ButtonSkin.standard,
priority: ButtonPriority.secondary
}), _defineProperty(_themeToButtonProps, actionButtonTheme.premium, {
skin: ButtonSkin.premium,
priority: ButtonPriority.primary
}), _defineProperty(_themeToButtonProps, actionButtonTheme.standardPrimary, {
skin: ButtonSkin.standard,
priority: ButtonPriority.primary
}), _defineProperty(_themeToButtonProps, actionButtonTheme.lightPrimary, {
skin: ButtonSkin.light,
priority: ButtonPriority.primary
}), _themeToButtonProps);
/** FloatingHelperContent */
var FloatingHelperContent = function FloatingHelperContent(props) {
var title = props.title,
body = props.body,
actionText = props.actionText,
onActionClick = props.onActionClick,
actionTheme = props.actionTheme,
image = props.image,
appearance = props.appearance,
footer = props.footer;
return /*#__PURE__*/React.createElement("div", {
className: st(classes.root, {
hasBody: !!props.body
})
}, /*#__PURE__*/React.createElement("div", null, title && /*#__PURE__*/React.createElement("div", {
className: classes.title
}, /*#__PURE__*/React.createElement(Text, {
dataHook: dataHooks.title,
weight: "bold",
light: appearance === floatingHelperAppearance.dark
}, title)), body && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
dataHook: dataHooks.body,
light: appearance === floatingHelperAppearance.dark
}, body)), actionText && onActionClick && actionText.length > 0 && /*#__PURE__*/React.createElement("div", {
className: classes.action
}, /*#__PURE__*/React.createElement(Button, _extends({}, themeToButtonProps[actionTheme], {
dataHook: dataHooks.actionButton,
onClick: onActionClick,
size: "small"
}), actionText)), footer && /*#__PURE__*/React.createElement("div", {
"data-hook": dataHooks.footer,
className: classes.footer
}, footer)), image && /*#__PURE__*/React.createElement("div", {
"data-hook": dataHooks.image,
className: classes.image
}, image));
};
FloatingHelperContent.displayName = 'FloatingHelperContent';
FloatingHelperContent.propTypes = {
/** Adds text as the title */
title: PropTypes.string,
/** Adds text as the body */
body: PropTypes.string.isRequired,
/** Sets the text of the action button. Needs to be a non-empty string (and onActionClick prop has to be passed) in order for the action button to appear */
actionText: PropTypes.string,
/** Sets the theme of the action button */
actionTheme: PropTypes.oneOf(['standard', 'white', 'premium', 'lightPrimary', 'standardPrimary']),
/** Custom footer node */
footer: PropTypes.node,
/** When both onActionClick & actionText are provided, will make an action button appear and invoke onActionClick() upon click */
onActionClick: PropTypes.func,
/** Adds an image */
image: PropTypes.node,
/** Appearance : `dark` or `light`. */
appearance: PropTypes.oneOf(['dark', 'light'])
};
FloatingHelperContent.defaultProps = {
actionTheme: 'white',
appearance: 'dark'
};
export default FloatingHelperContent;