@mapbox/mr-ui
Version:
UI components for Mapbox projects
96 lines (95 loc) • 4.43 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Icon;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var AccessibleIcon = _interopRequireWildcard(require("@radix-ui/react-accessible-icon"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
/**
* Display an Assembly icon.
*
* Besides providing a convenient shortcut, this component does the following:
*
* - Sets some accessibility props.
* - Provides an `inline` mode that automatically sizes icons to match their
* surrounding text.
*/
function Icon(_ref) {
let {
name,
inline = false,
passthroughProps = {},
size = 18
} = _ref;
const el = (0, _react.useRef)(null);
(0, _react.useEffect)(() => {
if (inline && el.current && typeof window !== 'undefined') {
const lineHeight = window.getComputedStyle(el.current)['line-height'];
el.current.style.height = lineHeight;
}
}, [inline, size]);
let iconClasses = 'events-none icon';
if (inline) {
iconClasses += ' inline-block align-t';
}
const svgStyle = passthroughProps.style || {};
if (!svgStyle.width && size) {
svgStyle.width = size;
}
if (!svgStyle.height && size) {
svgStyle.height = size;
}
return /*#__PURE__*/_react.default.createElement(AccessibleIcon.Root, {
label: name
}, /*#__PURE__*/_react.default.createElement("svg", _extends({
ref: el,
className: iconClasses,
"data-testid": `icon-${name}`
}, passthroughProps, {
style: svgStyle
}), /*#__PURE__*/_react.default.createElement("use", {
xmlnsXlink: "http://www.w3.org/1999/xlink",
xlinkHref: `#icon-${name}`
})));
}
Icon.propTypes = {
/**
* The name of the [Assembly icon](https://labs.mapbox.com/assembly/icons/) that
* you want to display.
*/
name: _propTypes.default.string.isRequired,
/**
* The width and height of the icon. All icons fill up a square space,
* so this value will be applied to both width and height.
*
* If `inline: true`, the technical height will be controlled by the
* line-height of the container, but the appearance of the icon will still
* be in accordance with your `size` value (because it's limited by the
* width).
*/
size: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/**
* If `true`, the icon will be adjusted after mounting so that its height
* matches the line-height of its container. The result of this is that
* the icon will not displace the text's established line-height and
* will be vertically centered with the text alongside it.
*
* This is most useful when you are inserting the icon within multiline text,
* so you can't use a flexbox layout to vertically center the icon and text.
*
* Be aware that there are edge cases that can cause problems with this
* setting. For example, it won't work well if you don't have a `line-height`
* set to a pixel value, or if there are dynamic adjustments to the
* line-height.
*/
inline: _propTypes.default.bool,
/**
* Props to pass directly to the `<svg>` element.
*/
passthroughProps: _propTypes.default.object
};