@mapbox/mr-ui
Version:
UI components for Mapbox projects
63 lines (62 loc) • 2.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = IconText;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _icon = _interopRequireDefault(require("../icon"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Put an icon next to some text.
*
* The icon and text will be vertically centered, with standard spacing between.
*/
function IconText(_ref) {
let {
children,
iconBefore,
iconAfter,
inline = false
} = _ref;
const renderIcon = icon => {
if (typeof icon === 'string') {
return /*#__PURE__*/_react.default.createElement(_icon.default, {
name: icon
});
}
return icon;
};
const before = !iconBefore ? null : /*#__PURE__*/_react.default.createElement("span", {
className: "mr6"
}, renderIcon(iconBefore));
const after = !iconAfter ? null : /*#__PURE__*/_react.default.createElement("span", {
className: "ml6"
}, renderIcon(iconAfter));
return /*#__PURE__*/_react.default.createElement("span", {
className: `${inline ? 'inline-flex' : 'flex'} flex--center-cross`
}, before, children, after);
}
IconText.propTypes = {
/**
* The text. A string is recommended, but you can put an element in here if
* you think it's right. If you do, it should be inline-level,
* using `<span>`s instead of `<div>`s.
*/
children: _propTypes.default.node.isRequired,
/**
* An icon to place before the text. If the value is a string, it should name an
* Assembly icon. If you bring your own SVG or want finer-grained control over
* how the Icon component is used, pass an element.
*/
iconBefore: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
/**
* An icon to place after the text. See details documented for `iconBefore`.
*/
iconAfter: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
/**
* A boolean indicating whether the component's wrapper element should be
* 'flex' (false) or 'inline-flex' (true).
*/
inline: _propTypes.default.bool
};