@enact/limestone 1.3.0

package/ImageItem/ImageItem.js

@@ -0,0 +1,377 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ImageItemDecorator = exports.ImageItemBase = exports.ImageItem = void 0;
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
+var _ImageItem = require("@enact/ui/ImageItem");
+var _Layout = require("@enact/ui/Layout");
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Checkbox = require("../Checkbox");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Image = _interopRequireDefault(require("../Image"));
+var _AsyncRenderChildren = _interopRequireDefault(require("../internal/AsyncRenderChildren"));
+var _Marquee = require("../Marquee");
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _ImageItemModule = _interopRequireDefault(require("./ImageItem.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["css", "disabled", "orientation", "selectionComponent", "showSelection"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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; }
+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); } /**
+ * Provides Limestone styled image item components and behaviors.
+ *
+ * @example
+ * <ImageItem
+ *   src="https://placehold.co/100x100/9037ab/ffffff/png?text=Image0"
+ *   label="A secondary caption"
+ * >
+ * 	The primary caption for the image
+ * </ImageItem>
+ *
+ * @module limestone/ImageItem
+ * @exports ImageItem
+ * @exports ImageItemBase
+ * @exports ImageItemDecorator
+ */
+var Checkbox = (0, _Skinnable["default"])(_Checkbox.CheckboxBase);
+Checkbox.displayName = 'Checkbox';
+var defaultPlaceholder = 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC' + '9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0cm9rZT0iIzU1NSIgZmlsbD0iI2FhYSIg' + 'ZmlsbC1vcGFjaXR5PSIwLjIiIHN0cm9rZS1vcGFjaXR5PSIwLjgiIHN0cm9rZS13aWR0aD0iNiIgLz48L3N2Zz' + '4NCg==';
+
+/**
+ * A Limestone styled base component for {@link limestone/ImageItem.ImageItem|ImageItem}.
+ *
+ * @class ImageItemBase
+ * @extends ui/ImageItem.ImageItem
+ * @memberof limestone/ImageItem
+ * @ui
+ * @public
+ */
+var ImageItemBase = exports.ImageItemBase = (0, _kind["default"])({
+  name: 'ImageItem',
+  propTypes: /** @lends limestone/ImageItem.ImageItemBase.prototype */{
+    /**
+     * Centers the primary caption and label in vertical orientation.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    centered: _propTypes2["default"].bool,
+    /**
+     * The primary caption displayed with the image.
+     *
+     * @type {String|Node}
+     * @public
+     */
+    children: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].node]),
+    /**
+     * 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:
+     *
+     * * `caption` - The caption component class
+     * * `fullImage` - Applied when `orientation` prop is `vertical` without `label` and `children`
+     * * `horizontal` - Applied when `orientation` prop is `horizontal`
+     * * `image` - The image component class
+     * * `imageIcon` - The image icon component class
+     * * `imageItem` - The image item component class
+     * * `label` - The secondary caption component class
+     * * `selected` - Applied when `selected` prop is `true`
+     * * `selectionIcon` - The icon component class for default selection component
+     * * `vertical` - Applied when `orientation` prop is `vertical`
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes2["default"].object,
+    /**
+     * Used internally to render `children` asynchronously.
+     *
+     * @type {Number}
+     * @private
+     */
+    'data-index': _propTypes2["default"].number,
+    /**
+     * The voice control intent.
+     *
+     * @type {String}
+     * @default 'Select'
+     * @memberof limestone/ImageItem.ImageItemBase.prototype
+     * @public
+     */
+    'data-webos-voice-intent': _propTypes2["default"].string,
+    /**
+     * Disable ImageItem and becomes non-interactive.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    disabled: _propTypes2["default"].bool,
+    /**
+     * The component used to render the image icon component.
+     *
+     * @type {Component}
+     * @default limestone/Image.Image
+     * @private
+     */
+    imageIconComponent: _propTypes["default"].component,
+    /**
+     * Source for the image icon.
+     *
+     * String value or Object of values used to determine which image will appear on
+     * a specific screenSize. This feature is only valid when `orientation` is `'vertical'`.
+     *
+     * @type {String|Object}
+     * @private
+     */
+    imageIconSrc: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]),
+    /**
+     * A secondary caption displayed with the image.
+     *
+     * @type {String|Node}
+     * @public
+     */
+    label: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].node]),
+    /**
+     * The layout orientation of the component.
+     *
+     * @type {('horizontal'|'vertical')}
+     * @default 'vertical'
+     * @public
+     */
+    orientation: _propTypes2["default"].oneOf(['horizontal', 'vertical']),
+    /**
+     * Placeholder image used while {@link limestone/ImageItem.ImageItemBase.src|src}
+     * is loaded.
+     *
+     * @type {String}
+     * @default 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC' +
+     * '9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0cm9rZT0iIzU1NSIgZmlsbD0iI2FhYSIg' +
+     * 'ZmlsbC1vcGFjaXR5PSIwLjIiIHN0cm9rZS1vcGFjaXR5PSIwLjgiIHN0cm9rZS13aWR0aD0iNiIgLz48L3N2Zz' +
+     * '4NCg=='
+     * @public
+     */
+    placeholder: _propTypes2["default"].string,
+    /**
+     * Applies a selected visual effect to the image, but only if `showSelection`
+     * is also `true`.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    selected: _propTypes2["default"].bool,
+    /**
+     * The custom selection component to render. A component can be a stateless functional
+     * component, `kind()` or React component. The following is an example with custom selection
+     * kind.
+     *
+     * Usage:
+     * ```
+     * const SelectionComponent = kind({
+     * 	render: () => <div>custom selection component</div>
+     * });
+     *
+     * <ImageItem selectionComponent={SelectionComponent} />
+     * ```
+     *
+     * @type {Function}
+     * @public
+     */
+    selectionComponent: _propTypes2["default"].func,
+    /**
+     * Shows a selection component with a centered icon. When `selected` is true, a check mark is shown.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    showSelection: _propTypes2["default"].bool,
+    /**
+     * Source for the image.
+     * String value or Object of values used to determine which image will appear on
+     * a specific screenSize.
+     *
+     * @type {String|Object}
+     * @public
+     */
+    src: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]),
+    /**
+     * Changes the image from a scale `1:1` to `16:9` in horizontal orientation.
+     *
+     * @type {Boolean}
+     * @default 'false'
+     * @public
+     */
+    wideImage: _propTypes2["default"].bool
+  },
+  defaultProps: {
+    'data-webos-voice-intent': 'Select',
+    imageIconComponent: _Image["default"],
+    orientation: 'vertical',
+    placeholder: defaultPlaceholder
+  },
+  styles: {
+    css: _ImageItemModule["default"],
+    publicClassNames: ['imageItem', 'caption', 'fullImage', 'horizontal', 'image', 'imageIcon', 'label', 'selected', 'selectionIcon', 'vertical']
+  },
+  computed: {
+    children: function children(_ref) {
+      var centered = _ref.centered,
+        _children = _ref.children,
+        css = _ref.css,
+        index = _ref['data-index'],
+        imageIconComponent = _ref.imageIconComponent,
+        imageIconSrc = _ref.imageIconSrc,
+        label = _ref.label,
+        orientation = _ref.orientation;
+      var hasImageIcon = imageIconSrc && orientation === 'vertical';
+      if (!hasImageIcon && !_children && !label) return;
+      var alignment = orientation === 'vertical' && centered ? {
+        alignment: 'center'
+      } : null;
+      var captions = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
+        className: css.captions,
+        children: [hasImageIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+          className: css.imageIcon,
+          component: imageIconComponent,
+          shrink: true,
+          src: imageIconSrc
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
+            className: css.caption,
+            marqueeOn: "hover",
+            children: _children
+          })), typeof label !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
+            className: css.label,
+            marqueeOn: "hover",
+            children: label
+          })) : null]
+        })]
+      });
+      return typeof index !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AsyncRenderChildren["default"], {
+        fallback: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: css.placeholderCaption
+          }), typeof label !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: css.placeholderLabel
+          }) : null]
+        }),
+        index: index,
+        children: captions
+      }) : captions;
+    },
+    className: function className(_ref2) {
+      var children = _ref2.children,
+        imageIconSrc = _ref2.imageIconSrc,
+        label = _ref2.label,
+        orientation = _ref2.orientation,
+        styler = _ref2.styler,
+        wideImage = _ref2.wideImage;
+      return styler.append({
+        fullImage: orientation === 'vertical' && !children && !label && !imageIconSrc,
+        wideImage: orientation === 'horizontal' && wideImage
+      });
+    },
+    selectionComponent: function selectionComponent(_ref3) {
+      var css = _ref3.css,
+        orientation = _ref3.orientation,
+        selected = _ref3.selected,
+        SelectionComponent = _ref3.selectionComponent;
+      if (SelectionComponent) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectionComponent, {});
+      } else if (orientation === 'vertical') {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
+          className: css.selectionIcon,
+          children: "checkmark"
+        });
+      } else {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, {
+          className: css.selectionIcon,
+          selected: selected,
+          size: "tiny"
+        });
+      }
+    }
+  },
+  render: function render(_ref4) {
+    var css = _ref4.css,
+      disabled = _ref4.disabled,
+      orientation = _ref4.orientation,
+      SelectionComponent = _ref4.selectionComponent,
+      showSelection = _ref4.showSelection,
+      rest = _objectWithoutProperties(_ref4, _excluded);
+    var isSlotBefore = orientation === 'horizontal' && showSelection;
+    delete rest.centered;
+    delete rest.imageIconComponent;
+    delete rest.imageIconSrc;
+    delete rest.label;
+    delete rest.wideImage;
+    if (showSelection) {
+      rest['role'] = 'checkbox';
+      rest['aria-checked'] = rest.selected;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageItem.ImageItem, _objectSpread(_objectSpread({}, rest), {}, {
+      "aria-disabled": disabled,
+      css: css,
+      disabled: disabled,
+      orientation: orientation,
+      imageComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
+        children: orientation === 'vertical' && showSelection ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: css.selectionContainer,
+          children: SelectionComponent
+        }) : null
+      }),
+      slotBefore: isSlotBefore && SelectionComponent
+    }));
+  }
+});
+
+/**
+ * Limestone-specific ImageItem behaviors to apply to
+ * {@link limestone/ImageItem.ImageItem|ImageItem}.
+ *
+ * @hoc
+ * @memberof limestone/ImageItem
+ * @mixes limestone/Marquee.MarqueeController
+ * @mixes spotlight/Spottable.Spottable
+ * @mixes limestone/Skinnable.Skinnable
+ * @public
+ */
+var ImageItemDecorator = exports.ImageItemDecorator = (0, _compose["default"])((0, _Marquee.MarqueeController)({
+  marqueeOnFocus: true
+}), _Spottable["default"], _Skinnable["default"]);
+
+/**
+ * A limestone-styled image item, Marquee and Spottable applied.
+ *
+ * Usage:
+ * ```
+ * <ImageItem
+ *   src="https://placehold.co/100x100/9037ab/ffffff/png?text=Image0"
+ *   label="A secondary caption"
+ * >
+ * 	The primary caption for the image
+ * </ImageItem>
+ * ```
+ *
+ * @class ImageItem
+ * @memberof limestone/ImageItem
+ * @extends limestone/ImageItem.ImageItemBase
+ * @mixes limestone/ImageItem.ImageItemDecorator
+ * @see {@link limestone/ImageItem.ImageItemBase}
+ * @ui
+ * @public
+ */
+var ImageItem = exports.ImageItem = ImageItemDecorator(ImageItemBase);
+ImageItem.displayName = 'ImageItem';
+var _default = exports["default"] = ImageItem;