@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
272 lines (207 loc) • 8.41 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = _interopRequireDefault(require("lodash.isstring"));
var _id = require("../../utilities/id");
var _lodash2 = _interopRequireDefault(require("lodash.isfunction"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _Radio = _interopRequireDefault(require("../Radio"));
var _RadioCard = require("./RadioCard.css");
var _jsxRuntime = require("react/jsx-runtime");
function noop() {}
var uniqueID = (0, _id.createUniqueIDFactory)('RadioCard');
var DEFAULT_ICON = 'fab-chat';
var RadioCard = /*#__PURE__*/function (_React$PureComponent) {
(0, _inheritsLoose2.default)(RadioCard, _React$PureComponent);
function RadioCard(props) {
var _this;
_this = _React$PureComponent.call(this, props) || this;
_this.handleOnChange = function (value, checked) {
if (checked) {
_this.radioCardRef.current.classList.add('is-checked');
} else {
_this.radioCardRef.current.classList.remove('is-checked');
}
_this.props.onChange(value, checked);
};
_this.handleOnBlur = function (event) {
_this.radioCardRef.current.classList.remove('is-focused');
_this.props.onBlur(event);
};
_this.handleOnFocus = function (event) {
_this.radioCardRef.current.classList.add('is-focused');
_this.props.onFocus(event);
};
_this.getContentMarkup = function () {
var content = _this.props.content;
if (!content) {
return null;
}
if ( /*#__PURE__*/_react.default.isValidElement(content)) {
return content;
}
if ((0, _lodash2.default)(content)) {
return /*#__PURE__*/_react.default.createElement(content);
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioCard.ContentUI, {
className: "c-RadioCard__content",
children: content
});
};
_this.getHeadingMarkup = function () {
var heading = _this.props.heading;
if (!heading) {
return null;
}
if ( /*#__PURE__*/_react.default.isValidElement(heading)) {
return heading;
}
if ((0, _lodash2.default)(heading)) {
return /*#__PURE__*/_react.default.createElement(heading);
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioCard.HeadingUI, {
className: "c-RadioCard__heading",
children: heading
});
};
_this.getIconMarkup = function () {
var _this$props = _this.props,
icon = _this$props.icon,
iconSize = _this$props.iconSize;
if ( /*#__PURE__*/_react.default.isValidElement(icon)) {
return icon;
}
if ((0, _lodash2.default)(icon)) {
return /*#__PURE__*/_react.default.createElement(icon);
}
var iconName = (0, _lodash.default)(icon) ? icon : DEFAULT_ICON;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
className: "c-RadioCard__icon",
name: iconName,
size: iconSize
});
};
_this.setInputNodeRef = function (node) {
_this.inputNode = node;
_this.props.inputRef(node);
};
_this.state = {
id: props.id || uniqueID()
};
_this.radioCardRef = /*#__PURE__*/_react.default.createRef();
return _this;
}
var _proto = RadioCard.prototype;
_proto.componentDidMount = function componentDidMount() {
if (this.props.isFocused && this.inputNode) {
this.radioCardRef.current.classList.add('is-focused');
this.inputNode.focus();
}
};
_proto.getClassName = function getClassName() {
var _this$props2 = this.props,
className = _this$props2.className,
checked = _this$props2.checked,
heading = _this$props2.heading;
return (0, _classnames.default)('c-RadioCard', checked && 'is-checked', heading && 'with-heading', className);
};
_proto.render = function render() {
var _this$props3 = this.props,
checked = _this$props3.checked,
className = _this$props3.className,
content = _this$props3.content,
heading = _this$props3.heading,
icon = _this$props3.icon,
isFocused = _this$props3.isFocused,
height = _this$props3.height,
maxWidth = _this$props3.maxWidth,
iconSize = _this$props3.iconSize,
title = _this$props3.title,
value = _this$props3.value,
rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["checked", "className", "content", "heading", "icon", "isFocused", "height", "maxWidth", "iconSize", "title", "value"]);
var id = this.state.id;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_RadioCard.RadioCardUI, {
htmlFor: id,
className: this.getClassName(),
title: title,
withHeading: Boolean(heading),
withContent: Boolean(content),
maxWidth: maxWidth,
height: height,
ref: this.radioCardRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioCard.IconWrapperUI, {
className: (0, _classnames.default)('c-RadioCard__iconWrapper', checked && 'is-checked'),
withHeading: Boolean(heading),
withContent: Boolean(content),
iconSize: iconSize,
children: this.getIconMarkup()
}), this.getHeadingMarkup(), this.getContentMarkup(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, (0, _extends2.default)({}, rest, {
checked: checked,
kind: "custom",
id: id,
inputRef: this.setInputNodeRef,
onChange: this.handleOnChange,
onBlur: this.handleOnBlur,
onFocus: this.handleOnFocus,
value: value
}))]
});
};
return RadioCard;
}(_react.default.PureComponent);
RadioCard.defaultProps = {
checked: false,
'data-cy': 'RadioCard',
icon: 'fab-chat',
iconSize: 52,
inputRef: noop,
isFocused: false,
onBlur: noop,
onChange: noop,
onFocus: noop
};
RadioCard.propTypes = {
/** Custom class names to be added to the component. */
className: _propTypes.default.string,
/** Determines if the `radio` is checked. */
checked: _propTypes.default.bool,
/** Optional content to render. */
content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element, _propTypes.default.func]),
/** Data attr for Cypress tests. */
'data-cy': _propTypes.default.string,
/** Optional heading to render. */
heading: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element, _propTypes.default.func]),
/** Icon to render. Can be the name of an `Icon` or a component */
icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element, _propTypes.default.func]),
/** Size to render the `Icon` */
iconSize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** ID for the input. */
id: _propTypes.default.string,
/** Callback to obtain the <input> node. */
inputRef: _propTypes.default.func,
/** Whether the radiocard should be focused */
isFocused: _propTypes.default.bool,
/** Set the height of the RadioCard. */
height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.func]),
/** Set the max width of the RadioCard. */
maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.func]),
/** Callback when the input is blurred. */
onBlur: _propTypes.default.func,
/** Callback when the input value is changed. */
onChange: _propTypes.default.func,
/** Callback when the input is focused. */
onFocus: _propTypes.default.func,
/** HTML title text for the component. */
title: _propTypes.default.string,
/** Value of the input */
value: _propTypes.default.string
};
var _default = RadioCard;
exports.default = _default;