@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
259 lines (254 loc) • 9.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.IconDecorator = exports.IconBase = exports.Icon = void 0;
var _kind = _interopRequireDefault(require("@enact/core/kind"));
var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
var _util = require("@enact/core/util");
var _propTypes2 = _interopRequireDefault(require("prop-types"));
var _compose = _interopRequireDefault(require("ramda/src/compose"));
var _resolution = _interopRequireDefault(require("../resolution"));
var _ForwardRef = _interopRequireDefault(require("../ForwardRef"));
var _IconModule = _interopRequireDefault(require("./Icon.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["componentRef", "iconProps"];
/**
* An unstyled icon component to be customized by a theme or application.
*
* @module ui/Icon
* @exports Icon
* @exports IconDecorator
*/
/**
* Merges consumer styles with the image `src` resolved through the resolution independence module.
*
* @function
* @param {Object} style Style object
* @param {String|Object} src URI to image or object of URIs
*
* @returns {Object} Original style object with backgroundImage updated
* @private
*/
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var mergeStyle = function mergeStyle(style, src) {
var updated = Object.assign({}, style);
var source = _resolution["default"].selectSrc(src);
if (src && src !== 'none' && src !== 'inherit' && src !== 'initial') {
source = "url(".concat(source, ")");
}
updated.backgroundImage = source;
return updated;
};
/**
* Tests if a string appears to be a URI/URL.
*
* @function
* @param {String} c Character to test
*
* @returns {Boolean} `true` if c looks like a URL
* @private
*/
var isUri = function isUri(c) {
return c.indexOf('/') > -1 || c.indexOf('.') > -1;
};
/**
* A basic icon component structure without any behaviors applied to it.
*
* @class IconBase
* @memberof ui/Icon
* @ui
* @public
*/
var IconBase = exports.IconBase = (0, _kind["default"])({
name: 'ui:Icon',
propTypes: /** @lends ui/Icon.IconBase.prototype */{
/**
* The icon content.
*
* May be specified as either:
*
* * A string that represents an icon from the {@link ui/Icon.IconBase.iconList|iconList},
* * An HTML entity string, Unicode reference or hex value (in the form '0x...'),
* * A URL specifying path to an icon image, or
* * An object representing a resolution independent resource (See {@link ui/resolution}).
*
* @type {String|Object}
* @public
*/
children: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]),
/**
* Called with a reference to the root component.
*
* When using {@link ui/Icon.Icon}, the `ref` prop is forwarded to this component
* as `componentRef`.
*
* @type {Object|Function}
* @public
*/
componentRef: _propTypes["default"].ref,
/**
* Customizes the component by mapping the supplied collection of CSS class names to the
* corresponding internal elements and states of this component.
*
* The following classes are supported:
*
* * `icon` - The root component class
* * `dingbat` - Applied when the value of {@link ui/Icon.IconBase.icon|icon} is not
* found in {@link ui/Icon.IconBase.iconList|iconList}
* * `large` - Applied when `size` prop is `'large'`
* * `pressed` - Applied when `pressed` prop is `true`
* * `small` - Applied when `size` prop is `'small'`
*
* @type {Object}
* @public
*/
css: _propTypes2["default"].object,
/**
* Flip the icon horizontally, vertically or both.
*
* @type {('both'|'horizontal'|'vertical')}
* @public
*/
flip: _propTypes2["default"].string,
/**
* The full list (hash) of supported icons.
*
* The keys of this hash are the unique names of each icon. The values are the unicode
* characters to insert in the icon. These will typically map to glyphs in your icon-font.
* The format of the keys can be character, glyph, or entity reference that correctly
* renders in a React + JSX string.
*
* @type {Object}
* @default {}
* @public
*/
iconList: _propTypes2["default"].object,
/**
* Applies the `pressed` CSS class.
*
* @type {Boolean}
* @default false
* @public
*/
pressed: _propTypes2["default"].bool,
/**
* The size of the button.
*
* Applies the CSS class which can be customized by
* {@link /docs/developer-guide/theming/|theming}.
*
* @type {String}
* @public
*/
size: _propTypes2["default"].string
},
defaultProps: {
iconList: {},
pressed: false
},
styles: {
css: _IconModule["default"],
className: 'icon',
publicClassNames: true
},
computed: {
className: function className(_ref) {
var icon = _ref.children,
flip = _ref.flip,
iconList = _ref.iconList,
pressed = _ref.pressed,
size = _ref.size,
styler = _ref.styler;
return styler.append({
// If the icon isn't in our known set, apply our custom font class
dingbat: !(icon in iconList),
pressed: pressed
}, flip ? "flip".concat((0, _util.cap)(flip)) : null, size);
},
iconProps: function iconProps(_ref2) {
var iconProp = _ref2.children,
iconList = _ref2.iconList,
style = _ref2.style;
var icon = iconList[iconProp];
if (!icon) {
if (typeof iconProp == 'string') {
if (iconProp.indexOf('&#x') === 0) {
// Converts a hex reference in HTML entity form: 򙦙
icon = parseInt(iconProp.slice(3, -1), 16);
} else if (iconProp.indexOf('&#') === 0) {
// Convert an HTML entity: 𘚟
icon = parseInt(iconProp.slice(2, -1));
} else if (iconProp.indexOf("\\u") === 0) {
// Convert a unicode reference: \u99999;
icon = parseInt(iconProp.slice(2), 16);
} else if (iconProp.indexOf('0x') === 0) {
// Converts a hex reference in string form
icon = String.fromCodePoint(iconProp);
} else if (!isUri(iconProp)) {
// A "simple" string is assumed to be an icon-name string
icon = iconProp;
} else {
// for a path or URI, add it to style
style = mergeStyle(style, iconProp);
}
} else if (typeof iconProp === 'object') {
style = mergeStyle(style, iconProp);
}
}
if (typeof icon == 'number') {
// Converts a hex reference in number form
icon = String.fromCodePoint(icon);
}
return {
children: icon,
style: style
};
}
},
render: function render(_ref3) {
var componentRef = _ref3.componentRef,
iconProps = _ref3.iconProps,
rest = _objectWithoutProperties(_ref3, _excluded);
delete rest.flip;
delete rest.iconList;
delete rest.pressed;
delete rest.size;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread(_objectSpread({
"aria-hidden": true
}, rest), iconProps), {}, {
ref: componentRef
}));
}
});
/**
* A higher-order component that adds behavior to {@link ui/Icon.IconBase|Icon}.
*
* @hoc
* @memberof ui/Icon
* @mixes ui/ForwardRef.ForwardRef
* @public
*/
var IconDecorator = exports.IconDecorator = (0, _compose["default"])((0, _ForwardRef["default"])({
prop: 'componentRef'
}));
/**
* An Icon component.
*
* @class Icon
* @extends ui/Icon.IconBase
* @mixes ui/Icon.IconDecorator
* @omit componentRef
* @memberof ui/Icon
* @ui
* @public
*/
var Icon = exports.Icon = IconDecorator(IconBase);
var _default = exports["default"] = Icon;