@pmwcs/icon
Version:
PMWCS icon component
201 lines (155 loc) • 9.19 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Icon = Icon;
exports.getIconStrategy = void 0;
var _preact = require("preact");
var _provider = require("@pmwcs/provider");
var _base = require("@pmwcs/base");
var _excluded = ["content"],
_excluded2 = ["content"],
_excluded3 = ["content"],
_excluded4 = ["content"],
_excluded5 = ["icon", "size", "prefix", "basename", "children", "outlined", "rounded", "twoTone", "sharp"],
_excluded6 = ["ref", "icon", "strategy", "prefix", "basename", "size", "render"];
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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 _extends() { _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; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
/**
* Given content, tries to figure out an appropriate strategy for it
*/
var processAutoStrategy = function processAutoStrategy(content, prefix) {
// check for URLS
if (typeof content === 'string' && content.includes('/')) {
return 'url';
} // handle prefixed
if (typeof content === 'string' && prefix) {
return 'className';
} // handle JSX components
if ((0, _preact.isValidElement)(content)) {
return 'component';
} // we don't know what it is, default to ligature for compat with material icons
return 'ligature';
};
/**
* Get the actual icon strategy to use
*/
var getIconStrategy = function getIconStrategy(content, strategy, providerStrategy, prefix) {
strategy = strategy || providerStrategy || 'auto';
if (strategy === 'auto') {
return processAutoStrategy(content, prefix);
}
return strategy;
};
exports.getIconStrategy = getIconStrategy;
var renderLigature = function renderLigature(_ref) {
var content = _ref.content,
rest = _objectWithoutProperties(_ref, _excluded);
return (0, _preact.h)(_base.Tag, _extends({
tag: "i"
}, rest), content);
};
var renderClassName = function renderClassName(_ref2) {
var content = _ref2.content,
rest = _objectWithoutProperties(_ref2, _excluded2);
return (0, _preact.h)(_base.Tag, _extends({
tag: "i"
}, rest));
};
var renderUrl = function renderUrl(_ref3) {
var content = _ref3.content,
rest = _objectWithoutProperties(_ref3, _excluded3);
return (0, _preact.h)(_base.Tag, _extends({
tag: "i"
}, rest, {
style: _objectSpread(_objectSpread({}, rest.style), {}, {
backgroundImage: "url(".concat(content, ")")
})
}));
};
var renderComponent = function renderComponent(_ref4) {
var content = _ref4.content,
rest = _objectWithoutProperties(_ref4, _excluded4);
return (0, _preact.h)(_base.Tag, _extends({
tag: "i"
}, rest), content);
};
var iconRenderMap = {
ligature: renderLigature,
className: renderClassName,
url: renderUrl,
component: renderComponent,
auto: undefined
};
var buildIconOptions = function buildIconOptions(icon) {
return (0, _preact.isValidElement)(icon) || icon && _typeof(icon) !== 'object' ? {
icon: icon
} : icon;
};
/** An Icon component. Most of these options can be set once globally, read the documentation on Provider for more info. */
function Icon(_ref5) {
var icon = _ref5.icon,
_size = _ref5.size,
_prefix = _ref5.prefix,
_basename = _ref5.basename,
children = _ref5.children,
outlined = _ref5.outlined,
rounded = _ref5.rounded,
twoTone = _ref5.twoTone,
sharp = _ref5.sharp,
rest = _objectWithoutProperties(_ref5, _excluded5);
var providerContext = (0, _provider.useProviderContext)(); // Build icon options object
var _buildIconOptions = _objectSpread({}, buildIconOptions(icon || children)),
ref = _buildIconOptions.ref,
content = _buildIconOptions.icon,
strategy = _buildIconOptions.strategy,
_buildIconOptions$pre = _buildIconOptions.prefix,
prefix = _buildIconOptions$pre === void 0 ? _prefix : _buildIconOptions$pre,
_buildIconOptions$bas = _buildIconOptions.basename,
basename = _buildIconOptions$bas === void 0 ? _basename : _buildIconOptions$bas,
_buildIconOptions$siz = _buildIconOptions.size,
size = _buildIconOptions$siz === void 0 ? _size : _buildIconOptions$siz,
render = _buildIconOptions.render,
optionsRest = _objectWithoutProperties(_buildIconOptions, _excluded6); // Get provider options
var _ref6 = providerContext.icon || {},
_ref6$basename = _ref6.basename,
providerBasename = _ref6$basename === void 0 ? null : _ref6$basename,
_ref6$prefix = _ref6.prefix,
providerPrefix = _ref6$prefix === void 0 ? null : _ref6$prefix,
_ref6$strategy = _ref6.strategy,
providerStrategy = _ref6$strategy === void 0 ? null : _ref6$strategy,
_ref6$render = _ref6.render,
providerRender = _ref6$render === void 0 ? null : _ref6$render;
var contentToUse = content;
var strategyToUse = getIconStrategy(contentToUse, strategy || null, providerStrategy || null, prefix);
var prefixToUse = prefix || providerPrefix;
var materialVariant = outlined ? 'material-icons-outlined' : rounded ? 'material-icons-round' : sharp ? 'material-icons-sharp' : twoTone ? 'material-icons-two-tone' : providerBasename;
var basenameToUse = basename !== undefined ? basename : providerBasename === 'material-icons' ? materialVariant : providerBasename;
var iconClassName = strategyToUse === 'className' && typeof content === 'string' ? "".concat(String(prefixToUse)).concat(content) : null;
var rendererFromMap = !!strategyToUse && iconRenderMap[strategyToUse]; // For some reason TS thinks the render method will return undefined...
var renderToUse = strategyToUse === 'custom' ? render || providerRender : rendererFromMap || null;
if (!renderToUse) {
console.error("Icon: rendering not implemented for ".concat(String(strategyToUse), "."));
return null;
}
var rendered = renderToUse(_objectSpread(_objectSpread(_objectSpread({}, rest), optionsRest), {}, {
ref: ref,
content: contentToUse,
className: (0, _base.classNames)('pmwc-icon', "pmwc-icon--".concat(strategyToUse), basenameToUse, rest.className, optionsRest.className, iconClassName, _defineProperty({}, "pmwc-icon--size-".concat(size || ''), !!size))
}));
var childDisplayName = (0, _base.getDisplayName)(rendered.props.children);
if (childDisplayName.includes('Avatar') || childDisplayName.includes('Icon')) {
return (0, _preact.cloneElement)(rendered.props.children, _objectSpread(_objectSpread(_objectSpread({}, rendered.props.children.props), rendered.props), {}, {
ref: ref,
// prevents an infinite loop
children: rendered.props.children.props.children,
className: (0, _base.classNames)(rendered.props.className, rendered.props.children.props.className)
}));
}
return rendered;
}