@enact/limestone 1.3.0

package/Card/Card.js

@@ -0,0 +1,396 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CardDecorator = exports.CardBase = exports.Card = void 0;
+var _handle = require("@enact/core/handle");
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
+var _Card = require("@enact/ui/Card");
+var _Layout = require("@enact/ui/Layout");
+var _resolution = _interopRequireDefault(require("@enact/ui/resolution"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+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 _CardModule = _interopRequireDefault(require("./Card.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["css", "imageSize", "primaryBadgeSrc", "secondaryBadgeSrc", "style"];
+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 card components and behaviors.
+ *
+ * @example
+ * <Card
+ *   src="https://placehold.co/100x100/9037ab/ffffff/png?text=Image0"
+ *   label="A secondary caption"
+ * >
+ *  The primary caption
+ * </Card>
+ *
+ * @module limestone/Card
+ * @exports Card
+ * @exports CardBase
+ * @exports CardDecorator
+ */
+var getDefaultImageSize = function getDefaultImageSize(orientation) {
+  var sizes = {
+    vertical: {
+      width: 768,
+      height: 432
+    },
+    horizontal: {
+      width: 596,
+      height: 336
+    }
+  };
+  return sizes[orientation];
+};
+
+/**
+ * A Limestone styled base component for {@link limestone/Card.Card|Card}.
+ *
+ * @class CardBase
+ * @extends ui/Card.Card
+ * @memberof limestone/Card
+ * @ui
+ * @public
+ */
+var CardBase = exports.CardBase = (0, _kind["default"])({
+  name: 'Card',
+  propTypes: /** @lends limestone/Card.CardBase.prototype */{
+    /**
+     * The primary caption displayed with the image.
+     *
+     * @type {String}
+     * @required
+     * @public
+     */
+    children: _propTypes["default"].string.isRequired,
+    /**
+     * Source for the image.
+     * String value or Object of values used to determine which image will appear on
+     * a specific screenSize.
+     *
+     * @type {String|Object}
+     * @required
+     * @public
+     */
+    src: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]).isRequired,
+    /**
+     * Determines whether the caption will be placed over the image or not.
+     * It only applies when `orientation` is `'vertical'`.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    captionOverlay: _propTypes["default"].bool,
+    /**
+     * Determines whether the caption will be placed over the image and shown only on card focus.
+     * It only applies when `orientation` is `'vertical'`.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    captionOverlayOnFocus: _propTypes["default"].bool,
+    /**
+     * Centers the captions when `imageIconSrc` is not provided.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    centered: _propTypes["default"].bool,
+    /**
+     * Customizes the component by mapping the supplied collection of CSS class names to the
+     * corresponding internal elements and states of this component.
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes["default"].object,
+    /**
+     * Used internally to render `children` asynchronously.
+     *
+     * @type {Number}
+     * @private
+     */
+    'data-index': _propTypes["default"].number,
+    /**
+     * Disables Card and becomes non-interactive.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    disabled: _propTypes["default"].bool,
+    /**
+     * Set to `true` to display a container with background color.
+     * When `orientation` is `'horizontal'`, this prop is always `true` and provided value will be ignored.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    hasContainer: _propTypes["default"].bool,
+    /**
+     * Source for the image icon.
+     *
+     * String value or Object of values used to determine which image will appear on
+     * a specific screenSize. This prop is only used when `orientation` is `'vertical'`.
+     *
+     * @type {String|Object}
+     * @public
+     */
+    imageIconSrc: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    /**
+     * The size of the image.
+     *
+     * The following properties should be provided:
+    	 * * `height` - The height of the image
+     * * `width` - The width of the image
+     		 * @type {Object}
+     * @default {height: 432, width: 768}
+     * @public
+     */
+    imageSize: _propTypes["default"].shape({
+      height: _propTypes["default"].number,
+      width: _propTypes["default"].number
+    }),
+    /**
+     * A secondary caption displayed with the image.
+     *
+     * @type {String}
+     * @public
+     */
+    label: _propTypes["default"].string,
+    /**
+     * The layout orientation of the component.
+     *
+     * @type {('horizontal'|'vertical')}
+     * @default 'vertical'
+     * @public
+     */
+    orientation: _propTypes["default"].oneOf(['horizontal', 'vertical']),
+    /**
+     * A placeholder image to be displayed before the image is loaded.
+     *
+     * @type {String}
+     * @public
+     */
+    placeholder: _propTypes["default"].string,
+    /**
+     * The primary badge image source.
+     *
+     * @type {String|Object}
+     * @public
+     */
+    primaryBadgeSrc: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    /**
+     * Set to `true` to display the image with rounded corners.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    roundedImage: _propTypes["default"].bool,
+    /**
+     * The secondary badge image source.
+     *
+     * @type {String|Object}
+     * @public
+     */
+    secondaryBadgeSrc: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    /**
+     * A ternary caption displayed with the image.
+     *
+     * @type {String}
+     * @public
+     */
+    secondaryLabel: _propTypes["default"].string,
+    /**
+     * Applies a selected visual effect to the image.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    selected: _propTypes["default"].bool
+  },
+  defaultProps: {
+    orientation: 'vertical'
+  },
+  styles: {
+    css: _CardModule["default"],
+    publicClassNames: true
+  },
+  handlers: {
+    onClick: (0, _handle.handle)((0, _handle.not)((0, _handle.forProp)('disabled', true)), (0, _handle.forward)('onClick')),
+    onKeyUp: (0, _handle.handle)((0, _handle.not)((0, _handle.forProp)('disabled', true)), (0, _handle.forward)('onKeyUp'))
+  },
+  computed: {
+    'aria-label': function ariaLabel(_ref) {
+      var children = _ref.children,
+        label = _ref.label,
+        secondaryLabel = _ref.secondaryLabel,
+        selected = _ref.selected;
+      return "".concat(children || '').concat(label ? " ".concat(label) : '').concat(secondaryLabel ? " ".concat(secondaryLabel) : '').concat(selected ? ' selected' : '');
+    },
+    captionOverlay: function captionOverlay(_ref2) {
+      var _captionOverlay = _ref2.captionOverlay,
+        captionOverlayOnFocus = _ref2.captionOverlayOnFocus;
+      return _captionOverlay || captionOverlayOnFocus;
+    },
+    children: function children(_ref3) {
+      var centered = _ref3.centered,
+        _children = _ref3.children,
+        css = _ref3.css,
+        index = _ref3['data-index'],
+        imageIconSrc = _ref3.imageIconSrc,
+        label = _ref3.label,
+        orientation = _ref3.orientation,
+        secondaryLabel = _ref3.secondaryLabel;
+      var hasImageIcon = imageIconSrc && orientation === 'vertical';
+      var alignment = centered && !imageIconSrc ? {
+        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: _Image["default"],
+          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, typeof secondaryLabel !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
+            className: css.label,
+            marqueeOn: "hover",
+            children: secondaryLabel
+          })) : null]
+        })]
+      });
+      return typeof index !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AsyncRenderChildren["default"], {
+        fallback: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
+          className: css.captions,
+          children: [hasImageIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+            className: css.imageIcon
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: css.caption
+            }), typeof label !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: css.label
+            }) : null]
+          })]
+        }),
+        index: index,
+        children: captions
+      }) : captions;
+    },
+    className: function className(_ref4) {
+      var captionOverlay = _ref4.captionOverlay,
+        captionOverlayOnFocus = _ref4.captionOverlayOnFocus,
+        roundedImage = _ref4.roundedImage,
+        hasContainer = _ref4.hasContainer,
+        orientation = _ref4.orientation,
+        styler = _ref4.styler;
+      return styler.append({
+        captionOverlay: captionOverlay && orientation === 'vertical',
+        captionOverlayOnFocus: !captionOverlay && captionOverlayOnFocus && orientation === 'vertical',
+        roundedImage: roundedImage,
+        hasContainer: orientation === 'horizontal' || hasContainer && !captionOverlay
+      });
+    }
+  },
+  render: function render(_ref5) {
+    var _imageSize$height, _imageSize$width;
+    var css = _ref5.css,
+      imageSize = _ref5.imageSize,
+      primaryBadgeSrc = _ref5.primaryBadgeSrc,
+      secondaryBadgeSrc = _ref5.secondaryBadgeSrc,
+      style = _ref5.style,
+      rest = _objectWithoutProperties(_ref5, _excluded);
+    delete rest.captionOverlayOnFocus;
+    delete rest.centered;
+    delete rest.label;
+    delete rest.secondaryLabel;
+    delete rest.imageIconSrc;
+    delete rest.hasContainer;
+    delete rest.roundedImage;
+    var defaultImageSize = getDefaultImageSize(rest.orientation);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, _objectSpread(_objectSpread({}, rest), {}, {
+      css: css,
+      imageComponent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Image["default"], {
+        children: [primaryBadgeSrc ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
+          className: css.primaryBadge,
+          src: primaryBadgeSrc
+        }) : null, secondaryBadgeSrc ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
+          className: css.secondaryBadge,
+          src: secondaryBadgeSrc
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: css.selectionContainer,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
+            className: css.selectionIcon,
+            children: "check"
+          })
+        })]
+      }),
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        '--card-image-height': _resolution["default"].scaleToRem((_imageSize$height = imageSize === null || imageSize === void 0 ? void 0 : imageSize.height) !== null && _imageSize$height !== void 0 ? _imageSize$height : defaultImageSize.height),
+        '--card-image-width': _resolution["default"].scaleToRem((_imageSize$width = imageSize === null || imageSize === void 0 ? void 0 : imageSize.width) !== null && _imageSize$width !== void 0 ? _imageSize$width : defaultImageSize.width)
+      })
+    }));
+  }
+});
+
+/**
+ * Limestone-specific card behaviors to apply to
+ * {@link limestone/Card.Card|Card}.
+ *
+ * @hoc
+ * @memberof limestone/Card
+ * @mixes limestone/Marquee.MarqueeController
+ * @mixes spotlight/Spottable.Spottable
+ * @mixes limestone/Skinnable.Skinnable
+ * @public
+ */
+var CardDecorator = exports.CardDecorator = (0, _compose["default"])((0, _Marquee.MarqueeController)({
+  marqueeOnFocus: true
+}), _Spottable["default"], _Skinnable["default"]);
+
+/**
+ * A Limestone-styled Card.
+ *
+ * Usage:
+ * ```
+ * <Card
+ *   src="https://placehold.co/100x100/9037ab/ffffff/png?text=Image0"
+ *   label="A secondary caption"
+ * >
+ *  The primary caption
+ * </Card>
+ * ```
+ *
+ * @class Card
+ * @memberof limestone/Card
+ * @extends limestone/Card.CardBase
+ * @mixes limestone/Card.CardDecorator
+ * @see {@link limestone/Card.CardBase}
+ * @ui
+ * @public
+ */
+var Card = exports.Card = CardDecorator(CardBase);
+Card.displayName = 'Card';
+var _default = exports["default"] = Card;