1.15.0 release

CHANGELOG.md

@@ -2,7 +2,20 @@
 
 The following is a curated list of changes in the Enact project, newest changes on the top.
 
-## [1.14.0] - 2017-02-23
+## [1.15.0] - 2018-02-28
+
+### Deprecated
+
+- `core/util/childrenEquals`, to be removed in 2.0.0
+- `moonstone/Marquee.Marquee`, to be moved to `moonstone/Marquee.MarqueeBase` in 2.0.0
+- `moonstone/Marquee.MarqueeText`, to be moved to `moonstone/Marquee.Marquee` in 2.0.0
+
+### Fixed
+
+- `moonstone/GridListImageItem` to display correctly
+- Internal method used by many components that sometimes prevented re-renders when they were needed
+
+## [1.14.0] - 2018-02-23
 
 ### Deprecated
 
@@ -21,7 +34,7 @@ The following is a curated list of changes in the Enact project, newest changes
 - `moonstone/EditableIntegerPicker` component
 - `moonstone/GridListImageItem` component
 
-## [1.13.3] - 2017-01-16
+## [1.13.3] - 2018-01-16
 
 ### Fixed
 

lerna.json

@@ -1,4 +1,4 @@
 {
   "lerna": "2.0.0-beta.30",
-  "version": "1.14.0"
+  "version": "1.15.0"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "enact",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Monorepo for all Enact front end libraries.",
   "private": true,
   "scripts": {
@@ -14,4 +14,4 @@
   "devDependencies": {
     "lerna": "2.0.0-beta.30"
   }
-}
+}

packages/core/CHANGELOG.md

@@ -2,13 +2,19 @@
 
 The following is a curated list of changes in the Enact core module, newest changes on the top.
 
-## [1.14.0] - 2017-02-23
+## [1.15.0] - 2018-02-28
+
+### Deprecated
+
+- `core/util/childrenEquals`, to be removed in 2.0.0
+
+## [1.14.0] - 2018-02-23
 
 ### Deprecated
 
 - `core/factory`, to be removed in 2.0.0
 
-## [1.13.3] - 2017-01-16
+## [1.13.3] - 2018-01-16
 
 ### Fixed
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/core",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Enact is an open source JavaScript framework containing everything you need to create a fast, scalable mobile or web application.",
   "main": "index.js",
   "scripts": {

packages/core/util/util.js

@@ -15,6 +15,8 @@ import unless from 'ramda/src/unless';
 import useWith from 'ramda/src/useWith';
 import when from 'ramda/src/when';
 
+import deprecate from '../internal/deprecate';
+
 import Job from './Job';
 
 const orderedKeys = map(when(React.isValidElement, prop('key')));
@@ -32,6 +34,7 @@ const orderedEquals = useWith(equals, [orderedKeys, orderedKeys]);
  * @param  {Boolean}	[ordered]	`true` to require the same order
  *
  * @returns {Boolean}				`true` if the children are the same
+ * @deprecated since 1.15.0. Will be removed in 2.0.0
  */
 const childrenEquals = (prev, next, ordered = false) => {
 	const prevChildren = React.Children.toArray(prev);
@@ -147,9 +150,12 @@ const perfNow = function () {
 	}
 };
 
+const deprecatedChildrenEquals = deprecate(childrenEquals, {name: 'core/util.childrenEquals', since: '1.15.0', until: '2.0.0'});
+
 export {
 	cap,
-	childrenEquals,
+	deprecatedChildrenEquals as childrenEquals,
+	childrenEquals as privateChildrenEquals,
 	coerceFunction,
 	coerceArray,
 	Job,

packages/i18n/CHANGELOG.md

@@ -2,11 +2,15 @@
 
 The following is a curated list of changes in the Enact i18n module, newest changes on the top.
 
-## [1.14.0] - 2017-02-23
+## [1.15.0] - 2018-02-28
 
 No significant changes.
 
-## [1.13.3] - 2017-01-16
+## [1.14.0] - 2018-02-23
+
+No significant changes.
+
+## [1.13.3] - 2018-01-16
 
 No significant changes.
 

packages/i18n/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@enact/i18n",
   "main": "./src/index.js",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Internationalization support for Enact using iLib",
   "scripts": {
     "clean": "enact clean",
@@ -34,7 +34,7 @@
     "extends": "enact/strict"
   },
   "dependencies": {
-    "@enact/core": "^1.14.0",
+    "@enact/core": "^1.15.0",
     "prop-types": "~15.6.0",
     "ramda": "~0.24.1",
     "react": "~15.6.1",

packages/moonstone/CHANGELOG.md

@@ -2,7 +2,18 @@
 
 The following is a curated list of changes in the Enact moonstone module, newest changes on the top.
 
-## [1.14.0] - 2017-02-23
+## [1.15.0] - 2018-02-28
+
+### Deprecated
+
+- `moonstone/Marquee.Marquee`, to be moved to `moonstone/Marquee.MarqueeBase` in 2.0.0
+- `moonstone/Marquee.MarqueeText`, to be moved to `moonstone/Marquee.Marquee` in 2.0.0
+
+### Fixed
+
+- `moonstone/GridListImageItem` to display correctly
+
+## [1.14.0] - 2018-02-23
 
 ### Deprecated
 
@@ -19,7 +30,7 @@ The following is a curated list of changes in the Enact moonstone module, newest
 - `moonstone/EditableIntegerPicker` component
 - `moonstone/GridListImageItem` component
 
-## [1.13.3] - 2017-01-16
+## [1.13.3] - 2018-01-16
 
 ### Fixed
 

packages/moonstone/GridListImageItem/GridListImageItem.js

@@ -1,32 +1,32 @@
 /**
  * Exports the {@link moonstone/GridListImageItem.GridListImageItem} and
  * {@link moonstone/GridListImageItem.GridListImageItemBase} components. The default export is
- * {@link moonstone/GridListImageItem}.
+ * {@link moonstone/GridListImageItem.GridListImageItem}.
  *
  * @module moonstone/GridListImageItem
  */
 
 import kind from '@enact/core/kind';
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Spottable from '@enact/spotlight/Spottable';
 
 import Icon from '../Icon';
 import {Image} from '../Image';
 import {MarqueeController, MarqueeText} from '../Marquee';
+import Skinnable from '../Skinnable';
 
 import css from './GridListImageItem.less';
 
 const defaultPlaceholder =
 	'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC' +
-	'9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cmVjdCB3aWR0aD0iMTAw' +
-	'JSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0ic3Ryb2tlOiAjNDQ0OyBzdHJva2Utd2lkdGg6IDE7IGZpbGw6ICNhYW' +
-	'E7IiAvPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHlsZT0ic3Ryb2tlOiAjNDQ0' +
-	'OyBzdHJva2Utd2lkdGg6IDE7IiAvPjxsaW5lIHgxPSIxMDAlIiB5MT0iMCIgeDI9IjAiIHkyPSIxMDAlIiBzdH' +
-	'lsZT0ic3Ryb2tlOiAjNDQ0OyBzdHJva2Utd2lkdGg6IDE7IiAvPjwvc3ZnPg==';
+	'9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0cm9rZT0iIzU1NSIgZmlsbD0iI2FhYSIg' +
+	'ZmlsbC1vcGFjaXR5PSIwLjIiIHN0cm9rZS1vcGFjaXR5PSIwLjgiIHN0cm9rZS13aWR0aD0iNiIgLz48L3N2Zz' +
+	'4NCg==';
 
 /**
- * {@link moonstone/GridListImageItem.GridListImageItemBase} is a stateless
- * GridListImageItem with Moonstone styling applied.
+ * {@link moonstone/GridListImageItem.GridListImageItemBase} is a stateless GridListImageItem with
+ * Moonstone styling applied.
  *
  * @class GridListImageItemBase
  * @memberof moonstone/GridListImageItem
@@ -37,6 +37,15 @@ const GridListImageItemBase = kind({
 	name: 'GridListImageItem',
 
 	propTypes: /** @lends moonstone/GridListImageItem.GridListImageItemBase.prototype */ {
+		/**
+		 * The absolute URL path to the image.
+		 *
+		 * @type {String}
+		 * @required
+		 * @public
+		 */
+		source: PropTypes.string.isRequired,
+
 		/**
 		 * The primary caption to be displayed with the image.
 		 *
@@ -45,6 +54,19 @@ const GridListImageItemBase = kind({
 		 */
 		caption: PropTypes.string,
 
+		/**
+		 * Placeholder image used while [source]{@link moonstone/GridListImageItem.GridListImageItemBase#source}
+		 * is loaded.
+		 *
+		 * @type {String}
+		 * @default 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC' +
+		 * '9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0cm9rZT0iIzU1NSIgZmlsbD0iI2FhYSIg' +
+		 * 'ZmlsbC1vcGFjaXR5PSIwLjIiIHN0cm9rZS1vcGFjaXR5PSIwLjgiIHN0cm9rZS13aWR0aD0iNiIgLz48L3N2Zz' +
+		 * '4NCg==';
+		 * @public
+		 */
+		placeholder: PropTypes.string,
+
 		/**
 		 * When `true`, applies a selected visual effect to the image, but only if `selectionOverlayShowing`
 		 * is also `true`.
@@ -56,22 +78,33 @@ const GridListImageItemBase = kind({
 		selected: PropTypes.bool,
 
 		/**
-		 * When `true`, a selection overlay with a centered icon is shown. When `selected` is true,
-		 * a check mark is shown.
+		 * The custom selection overlay component to render. A component can be a stateless functional
+		 * component, `kind()` or React component. The following is an example with custom selection
+		 * overlay kind.
 		 *
-		 * @type {Boolean}
-		 * @default false
+		 * Example Usage:
+		 * ```
+		 * const SelectionOverlay = kind({
+		 * 	render: () => <div>custom overlay</div>
+		 * });
+		 *
+		 * <GridListImageItemBase selectionOverlay={SelectionOverlay} />
+		 * ```
+		 *
+		 * @type {Function}
 		 * @public
 		 */
-		selectionOverlayShowing: PropTypes.bool,
+		selectionOverlay: PropTypes.func,
 
 		/**
-		 * The absolute URL path to the image.
+		 * When `true`, a selection overlay with a centered icon is shown. When `selected` is true,
+		 * a check mark is shown.
 		 *
-		 * @type {String}
+		 * @type {Boolean}
+		 * @default false
 		 * @public
 		 */
-		source: PropTypes.string,
+		selectionOverlayShowing: PropTypes.bool,
 
 		/**
 		 * The second caption line to be displayed with the image.
@@ -83,6 +116,7 @@ const GridListImageItemBase = kind({
 	},
 
 	defaultProps: {
+		placeholder: defaultPlaceholder,
 		selected: false,
 		selectionOverlayShowing: false
 	},
@@ -97,39 +131,48 @@ const GridListImageItemBase = kind({
 			{selected},
 			caption ? 'useCaption' : null,
 			subCaption ? 'useSubCaption' : null
-		)
+		),
+		selectionOverlay: ({selectionOverlay: SelectionOverlay, selectionOverlayShowing}) => {
+			if (selectionOverlayShowing) {
+				return (
+					<div className={css.overlayContainer}>
+						{
+							SelectionOverlay ?
+								<SelectionOverlay /> :
+								<div className={css.overlayComponent}>
+									<Icon className={css.icon}>check</Icon>
+								</div>
+						}
+					</div>
+				);
+			}
+		}
 	},
 
-	render: ({caption, source, subCaption, selectionOverlayShowing, ...rest}) => {
-		if (selectionOverlayShowing) {
+	render: ({caption, placeholder, source, subCaption, selectionOverlay, ...rest}) => {
+		if (selectionOverlay) {
 			rest['role'] = 'checkbox';
 			rest['aria-checked'] = rest.selected;
 		}
 
 		delete rest.selected;
+		delete rest.selectionOverlayShowing;
 
 		return (
 			<div {...rest}>
-				<Image className={css.image} placeholder={defaultPlaceholder} src={source} />
-				{
-					selectionOverlayShowing ? (
-						<div className={css.overlayContainer}>
-							<div className={css.overlayComponent}>
-								<Icon className={css.icon}>check</Icon>
-							</div>
-						</div>
-					) : null
-				}
-				{caption ? (<MarqueeText className={css.caption} marqueeOn="hover">{caption}</MarqueeText>) : null}
-				{subCaption ? (<MarqueeText className={css.subCaption} marqueeOn="hover">{subCaption}</MarqueeText>) : null}
+				<Image className={css.image} placeholder={placeholder} src={source}>
+					{selectionOverlay}
+				</Image>
+				{caption ? (<MarqueeText alignment="center" className={css.caption} marqueeOn="hover">{caption}</MarqueeText>) : null}
+				{subCaption ? (<MarqueeText alignment="center" className={css.subCaption} marqueeOn="hover">{subCaption}</MarqueeText>) : null}
 			</div>
 		);
 	}
 });
 
 /**
- * {@link moonstone/GridListImageItem} is a GridListImageItem with
- * Moonstone styling, Spottable applied.
+ * {@link moonstone/GridListImageItem.GridListImageItem} is a GridListImageItem with
+ * Moonstone styling, Marquee and Spottable applied.
  *
  * Usage:
  * ```
@@ -138,15 +181,18 @@ const GridListImageItemBase = kind({
  *
  * @class GridListImageItem
  * @memberof moonstone/GridListImageItem
- * @mixes spotlight/Spottable
- * @see moonstone/GridListImageItem.GridListImageItemBase
+ * @mixes moonstone/Marquee.MarqueeController
+ * @mixes moonstone/Skinnable.Skinnable
+ * @mixes spotlight/Spottable.Spottable
  * @ui
  * @public
  */
 const GridListImageItem = MarqueeController(
 	{marqueeOnFocus: true},
 	Spottable(
-		GridListImageItemBase
+		Skinnable(
+			GridListImageItemBase,
+		)
 	)
 );