wix-style-react
Version:
wix-style-react
188 lines (151 loc) • 7.67 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; }; }();
var _class, _temp2;
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, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { withFocusable, focusableStates } from '../common/Focusable';
import AddItemLarge from 'wix-ui-icons-common/system/AddItemLarge';
import AddItemMedium from 'wix-ui-icons-common/system/AddItemMedium';
import AddItemSmall from 'wix-ui-icons-common/system/AddItemSmall';
import Add from '../new-icons/Add';
import ActionText from './components/ActionText';
import Tooltip from '../Tooltip';
import AddMedia from 'wix-ui-icons-common/system/AddMedia';
import styles from './AddItem.scss';
var ICONS = {
large: React.createElement(AddItemLarge, { 'data-hook': 'additem-icon' }),
medium: React.createElement(AddItemMedium, { 'data-hook': 'additem-icon' }),
small: React.createElement(AddItemSmall, { 'data-hook': 'additem-icon' }),
tiny: React.createElement(Add, {
'data-hook': 'additem-icon',
width: '26',
height: '26',
style: { flexShrink: 0 }
}),
custom: React.createElement(AddMedia, { 'data-hook': 'additem-icon', width: '31', height: '31' })
};
var DEFAULT_TOOLTIP_PROPS = {
showDelay: 0,
hideDelay: 0,
theme: 'dark',
align: 'center',
placement: 'top'
};
var AddItem = (_temp2 = _class = function (_Component) {
_inherits(AddItem, _Component);
function AddItem() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, AddItem);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AddItem.__proto__ || Object.getPrototypeOf(AddItem)).call.apply(_ref, [this].concat(args))), _this), _this.renderIcon = function () {
var _this$props = _this.props,
size = _this$props.size,
theme = _this$props.theme;
var image = theme === 'image';
return ICONS[image ? 'custom' : size];
}, _this.renderText = function () {
var _this$props2 = _this.props,
children = _this$props2.children,
disabled = _this$props2.disabled,
theme = _this$props2.theme,
size = _this$props2.size;
if (!children || theme === 'image') {
return null;
}
return typeof children === 'string' ? React.createElement(
ActionText,
{ disabled: disabled, size: size },
children
) : children;
}, _this.renderContent = function () {
var _classnames;
var _this$props3 = _this.props,
tooltipContent = _this$props3.tooltipContent,
theme = _this$props3.theme,
alignItems = _this$props3.alignItems,
size = _this$props3.size,
disabled = _this$props3.disabled;
var box = classnames(styles.box, styles[alignItems], (_classnames = {}, _defineProperty(_classnames, styles.row, size === 'tiny'), _defineProperty(_classnames, styles[theme], theme === 'image'), _classnames));
var container = React.createElement(
'div',
{ className: box },
_this.renderIcon(),
_this.renderText()
);
var tooltipProps = _extends({}, DEFAULT_TOOLTIP_PROPS, {
content: tooltipContent
}, _this.props.tooltipProps);
return tooltipProps.content && !disabled ? React.createElement(
Tooltip,
_extends({ dataHook: 'additem-tooltip' }, tooltipProps),
container
) : container;
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(AddItem, [{
key: 'render',
value: function render() {
var _classnames2;
var _props = this.props,
dataHook = _props.dataHook,
onClick = _props.onClick,
disabled = _props.disabled,
theme = _props.theme,
focusableOnFocus = _props.focusableOnFocus,
focusableOnBlur = _props.focusableOnBlur;
var disable = disabled && theme !== 'image';
var image = theme === 'image';
var root = classnames(styles.root, (_classnames2 = {}, _defineProperty(_classnames2, styles[theme], !image), _defineProperty(_classnames2, styles.wrapped, image), _defineProperty(_classnames2, styles.disabled, disable), _classnames2));
return React.createElement(
'div',
_extends({
className: root,
'data-hook': dataHook,
onClick: disabled ? null : onClick,
onFocus: focusableOnFocus,
onBlur: focusableOnBlur
}, focusableStates(this.props), {
tabIndex: disabled ? null : 0
}),
this.renderContent()
);
}
}]);
return AddItem;
}(Component), _class.displayName = 'AddItem', _class.propTypes = {
/** Any component or string */
children: PropTypes.node,
/** Apply disabled styles */
disabled: PropTypes.bool,
/** The theme of component */
theme: PropTypes.oneOf(['dashes', 'plain', 'filled', 'image']),
/** Switching content alignment */
alignItems: PropTypes.oneOf(['center', 'right', 'left']),
/** Size to control icon and spacing */
size: PropTypes.oneOf(['large', 'medium', 'small', 'tiny']),
/** Click event handler */
onClick: PropTypes.func,
/** used for testing */
dataHook: PropTypes.string,
/** Tooltip props, leave undefined for no tooltip */
tooltipProps: PropTypes.shape(Tooltip.propTypes),
/** Content of the tooltip, leave undefined for no tooltip */
tooltipContent: PropTypes.string,
/** Focusable proptype */
focusableOnFocus: PropTypes.func,
/** Focusable proptype */
focusableOnBlur: PropTypes.func
}, _class.defaultProps = {
theme: 'dashes',
size: 'tiny',
alignItems: 'center'
}, _temp2);
export default withFocusable(AddItem);