@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
283 lines (279 loc) • 11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.LabeledIconDecorator = exports.LabeledIconBase = exports.LabeledIcon = void 0;
var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
var _kind = _interopRequireDefault(require("@enact/core/kind"));
var _propTypes2 = _interopRequireDefault(require("prop-types"));
var _compose = _interopRequireDefault(require("ramda/src/compose"));
var _react = require("react");
var _ComponentOverride = _interopRequireDefault(require("../ComponentOverride"));
var _ForwardRef = _interopRequireDefault(require("../ForwardRef"));
var _Layout = require("../Layout");
var _Slottable = _interopRequireDefault(require("../Slottable"));
var _LabeledIconModule = _interopRequireDefault(require("./LabeledIcon.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["css", "children", "componentRef", "disabled", "flip", "icon", "iconComponent", "orientation", "size"];
/**
* Provides unstyled LabeledIcon components to be customized by a theme or application.
*
* @module ui/LabeledIcon
* @exports LabeledIcon
* @exports LabeledIconBase
* @exports LabeledIconDecorator
*/
/**
* An icon component with a label.
*
* @class LabeledIconBase
* @memberof ui/LabeledIcon
* @ui
* @public
*/
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 LabeledIconBase = exports.LabeledIconBase = (0, _kind["default"])({
name: 'ui:LabeledIcon',
propTypes: /** @lends ui/LabeledIcon.LabeledIconBase.prototype */{
/**
* The label.
*
* This accepts strings, DOM, and Components, if you need more elaborate features. It may be
* positioned using `labelPosition`.
*
* @type {Node}
* @public
*/
children: _propTypes2["default"].node,
/**
* Called with a reference to the root component.
*
* When using {@link ui/LabeledIcon.LabeledIcon}, 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:
*
* * `labeledIcon` - The root component class
* * `icon` - The icon component class
* * `iconCell` - Applied to the `iconComponent` directly, like `.icon`. If `icon` in a
* React component, this class is applied to the container of the icon,
* rather than the icon itself.
* * `label` - The label component class
* * `inline` - Applied when the inline prop is set
* * `above` - Applied when the labelPosition prop is set to above
* * `after` - Applied when the labelPosition prop is set to after
* * `before` - Applied when the labelPosition prop is set to before
* * `below` - Applied when the labelPosition prop is set to below
* * `left` - Applied when the labelPosition prop is set to left
* * `right` - Applied when the labelPosition prop is set to right
*
* @type {Object}
* @public
*/
css: _propTypes2["default"].object,
/**
* Disables the component and becomes non-interactive.
*
* @type {Boolean}
* @default false
* @public
*/
disabled: _propTypes2["default"].bool,
/**
* Flip the icon horizontally, vertically or both.
*
* @type {('both'|'horizontal'|'vertical')}
* @public
*/
flip: _propTypes2["default"].string,
/**
* The icon.
*
* This will be passed as `children` to the `iconComponent`, unless you supply a React
* element (like JSX) to this prop, directly or via the `<icon>` slot.
*
* @type {String|Element|Component}
* @public
*/
icon: _propTypes["default"].renderableOverride,
/**
* The component used to render the `icon`.
*
* This will receive the `icon` prop as `children` and should handle it appropriately. This
* prop is ignored in the case of a component being passed into the `icon` prop. It will
* also receive the `flip` and `size` props as set on the component.
*
* @type {Component}
*/
iconComponent: _propTypes["default"].component,
/**
* Enables this component to be used in an "inline" context.
*
* This is useful for when you have several of these components in a row and are not using a
* {@link ui/Layout|Layout} or flex-box configuration.
*
* @type {Boolean}
* @default false
* @public
*/
inline: _propTypes2["default"].bool,
/**
* The position of the label in relation to the icon element.
*
* Allowed values include:
* * 'below' (default),
* * 'above',
* * 'left',
* * 'right',
* * 'before', and
* * 'after'.
*
* The 'before' and 'after' values automatically swap sides when in an RTL locale context.
*
* @type {('above'|'after'|'before'|'below'|'left'|'right')}
* @default 'below'
* @public
*/
labelPosition: _propTypes2["default"].oneOf(['above', 'after', 'before', 'below', 'left', 'right']),
/**
* The size of the icon.
*
* Applies the CSS class which can be customized by
* {@link /docs/developer-guide/theming/|theming}.
*
* @type {String}
* @public
*/
size: _propTypes2["default"].string
},
defaultProps: {
labelPosition: 'below',
inline: false
},
styles: {
css: _LabeledIconModule["default"],
className: 'labeledIcon',
publicClassNames: true
},
computed: {
className: function className(_ref) {
var inline = _ref.inline,
labelPosition = _ref.labelPosition,
styler = _ref.styler;
return styler.append(labelPosition, {
inline: inline
});
},
orientation: function orientation(_ref2) {
var labelPosition = _ref2.labelPosition;
var vertical = labelPosition === 'above' || labelPosition === 'below';
return vertical ? 'vertical' : 'horizontal';
}
},
render: function render(_ref3) {
var css = _ref3.css,
children = _ref3.children,
componentRef = _ref3.componentRef,
disabled = _ref3.disabled,
flip = _ref3.flip,
icon = _ref3.icon,
Icon = _ref3.iconComponent,
orientation = _ref3.orientation,
size = _ref3.size,
rest = _objectWithoutProperties(_ref3, _excluded);
delete rest.inline;
var iconClassName = css.icon;
// Rearrange the props to support custom JSX components
// `icon` is normally passed to `iconComponent` as children, but if `icon` is instead a
// rendered JSX component, it should become a child of `Cell.icon` and iconComponent should
// use Cell's default value. We must also reposition the `icon` class
if (/*#__PURE__*/(0, _react.isValidElement)(icon)) {
icon = (0, _ComponentOverride["default"])({
component: icon,
className: iconClassName,
disabled: disabled,
size: size
});
// Removing size and iconComponent from CellBase
// eslint-disable-next-line no-undefined
size = Icon = undefined;
iconClassName = null;
}
delete rest.inline;
delete rest.labelPosition;
return _Layout.LayoutBase.inline(_objectSpread(_objectSpread({}, rest), {}, {
align: 'center center',
componentRef: componentRef,
disabled: disabled,
orientation: orientation,
children: [_Layout.CellBase.inline({
key: 'icon',
shrink: true,
size: '100%',
className: css.iconCell,
children: Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
className: iconClassName,
disabled: disabled,
flip: flip,
size: size,
children: icon
}) : icon
}), _Layout.CellBase.inline({
key: 'label',
shrink: true,
component: 'label',
className: css.label,
disabled: disabled,
children: children
})]
}));
}
});
/**
* A higher-order component that adds {@link ui/Slottable.Slottable|slot} support to {@link ui/LabeledIcon.LabeledIconBase|LabeledIconBase}
*
* @hoc
* @memberof ui/LabeledIcon
* @mixes ui/Slottable.Slottable
* @public
*/
var LabeledIconDecorator = exports.LabeledIconDecorator = (0, _compose["default"])((0, _ForwardRef["default"])({
prop: 'componentRef'
}), (0, _Slottable["default"])({
slots: ['icon']
}));
/**
* An icon component with a label without any behaviors applied to it.
*
* Usage:
* ```
* <LabeledIcon icon="star" labelPosition="after">
* Favorite
* </LabeledIcon>
* ```
*
* @class LabeledIcon
* @memberof ui/LabeledIcon
* @extends ui/LabeledIcon.LabeledIconBase
* @mixes ui/LabeledIcon.LabeledIconDecorator
* @omit componentRef
* @ui
* @public
*/
var LabeledIcon = exports.LabeledIcon = LabeledIconDecorator(LabeledIconBase);
var _default = exports["default"] = LabeledIcon;