PLAT-136771: Added new DrumPicker component

CHANGELOG.md

@@ -99,6 +99,7 @@ The following is a curated list of changes in the Enact agate module, newest cha
 ### Changed
 
 - `agate/Dropdown` to use `agate/ContextualPopup`
+- `agate/Picker` and `agate/RangePicker` to use the new DrumPicker component
 - `agate/ThemeDecorator` to exclude `enact-fit` className when `disableFullscreen` is true
 - `agate/ArcPicker` and `agate/ArcSlider` to have a max-width for `slotCenter`
 

DatePicker/tests/DatePicker-specs.js

@@ -1,13 +1,12 @@
 import {mount} from 'enzyme';
 
-import DatePicker from '../DatePicker';
+import {DatePicker} from '../DatePicker';
 import css from '../DatePicker.module.less';
 
 // Note: Tests pass 'locale' because there's no I18nDecorator to provide a value via context and
 // otherwise, nothing renders in the label.
 
 describe('DatePicker', () => {
-
 	test(
 		'should emit an onChange event when changing a component picker',
 		() => {

DateTimePicker/tests/DateTimePicker-specs.js

@@ -8,7 +8,6 @@ import timeCss from '../../TimePicker/TimePicker.module.less';
 // otherwise, nothing renders in the label.
 
 describe('DateTimePicker', () => {
-
 	test(
 		'should emit an onChange event when changing a component picker',
 		() => {

Picker/Picker.js

@@ -12,14 +12,15 @@
  */
 
 import kind from '@enact/core/kind';
+import {mapAndFilterChildren} from '@enact/core/util';
 import Changeable from '@enact/ui/Changeable';
 import Pure from '@enact/ui/internal/Pure';
 import PropTypes from 'prop-types';
 import clamp from 'ramda/src/clamp';
 import compose from 'ramda/src/compose';
 import {Children} from 'react';
 
-import PickerCore, {ChangeAdapter, PickerItem} from '../internal/Picker';
+import PickerCore, {DrumPickerItem} from '../internal/DrumPicker';
 
 /**
  * The base `Picker` component.
@@ -134,9 +135,13 @@ const PickerBase = kind({
 	},
 
 	computed: {
-		children: ({children}) => Children.map(children, (child) => (
-			<PickerItem>{child}</PickerItem>
-		)),
+		children: ({children, value}) => {
+			// send to internal/DrumPicker only 5 children. Current selected +/-2
+			const childrenArray = children.filter((child, index) => index >= value - 2 && index <= value + 2);
+			return (mapAndFilterChildren(childrenArray, (child) => (
+				<DrumPickerItem key={value}>{child}</DrumPickerItem>
+			)));
+		},
 		disabled: ({children, disabled}) => Children.count(children) > 1 ? disabled : true,
 		max: ({children}) => children && children.length ? children.length - 1 : 0,
 		value: ({value, children}) => {
@@ -172,8 +177,7 @@ const PickerBase = kind({
  */
 const PickerDecorator = compose(
 	Pure,
-	Changeable,
-	ChangeAdapter
+	Changeable
 );
 
 /**

Picker/tests/Picker-specs.js

@@ -3,15 +3,15 @@ import {mount} from 'enzyme';
 import {Picker, PickerBase} from '../Picker';
 
 describe('Picker Specs', () => {
-	test('should render selected child wrapped with <PickerItem/>', () => {
+	test('should render selected child wrapped with <DrumPickerItem/>', () => {
 		const picker = mount(
 			<Picker value={1}>
 				{[1, 2, 3, 4]}
 			</Picker>
 		);
 
 		const expected = '2';
-		const actual = picker.find('PickerItem').at(1).text();
+		const actual = picker.find('DrumPickerItem').at(1).text();
 
 		expect(actual).toBe(expected);
 	});
@@ -25,7 +25,7 @@ describe('Picker Specs', () => {
 			);
 
 			const expected = 3;
-			const actual = picker.find('Picker').last().prop('max');
+			const actual = picker.find('DrumPicker').last().prop('max');
 
 			expect(actual).toBe(expected);
 		}
@@ -38,7 +38,7 @@ describe('Picker Specs', () => {
 			</PickerBase>
 		);
 
-		const actual = picker.find('Picker').last().prop('disabled');
+		const actual = picker.find('DrumPicker').last().prop('disabled');
 
 		expect(actual).toBe(true);
 	});

RangePicker/RangePicker.js

@@ -11,14 +11,14 @@
  */
 
 import kind from '@enact/core/kind';
-import {clamp} from '@enact/core/util';
+import {clamp, mapAndFilterChildren} from '@enact/core/util';
 import Changeable from '@enact/ui/Changeable';
 import Pure from '@enact/ui/internal/Pure';
 import PropTypes from 'prop-types';
 import compose from 'ramda/src/compose';
 
-import PickerCore, {ChangeAdapter} from '../internal/Picker';
-import PickerItem from '../internal/Picker/PickerItem';
+import PickerCore from '../internal/DrumPicker';
+import DrumPickerItem from '../internal/DrumPicker/DrumPickerItem';
 
 /**
  * RangePicker base component.
@@ -171,17 +171,28 @@ const RangePickerBase = kind({
 		wrap: PropTypes.bool
 	},
 
+	defaultProps: {
+		step: 1
+	},
+
 	computed: {
+		children: ({min, max, step, value}) => {
+			// send to internal/DrumPicker only 5 children. Current selected +/-2
+			const childrenArray = Array(Math.floor((max - min) / step) + 1).fill(min).map( ((x, i) => (x + i * step))).filter(child => child >= value - (step * 2) && child <= value + (step * 2));
+			return (mapAndFilterChildren(childrenArray, (child) => (
+				<DrumPickerItem key={value} marqueeDisabled>{child}</DrumPickerItem>
+			)));
+		},
 		disabled: ({disabled, max, min}) => min >= max ? true : disabled,
 		value: ({min, max, value}) => {
 			return clamp(min, max, value);
 		}
 	},
 
-	render: ({value, ...rest}) => {
+	render: ({children, value, ...rest}) => {
 		return (
-			<PickerCore {...rest} index={0} type="number" value={value}>
-				<PickerItem key={value} marqueeDisabled style={{direction: 'ltr'}}>{value}</PickerItem>
+			<PickerCore {...rest} type="number" value={value}>
+				{children}
 			</PickerCore>
 		);
 	}
@@ -197,8 +208,7 @@ const RangePickerBase = kind({
  */
 const RangePickerDecorator = compose(
 	Pure,
-	Changeable,
-	ChangeAdapter
+	Changeable
 );
 
 /**

RangePicker/tests/RangePicker-specs.js

@@ -2,45 +2,62 @@ import {mount} from 'enzyme';
 
 import {RangePicker, RangePickerBase} from '../RangePicker';
 
-import css from '../../internal/Picker/Picker.module.less';
+import css from '../../internal/DrumPicker/DrumPicker.module.less';
 
-const decrement = (picker) => picker.find(`.${css.itemDecrement}`).first().simulate('click');
-const increment = (picker) => picker.find(`.${css.itemIncrement}`).first().simulate('click');
+const keyDown = (keyCode) => (picker) => picker.find(`.${css.root}`).first().simulate('keydown', {keyCode});
+
+const upKeyDown = keyDown(38);
+const downKeyDown = keyDown(40);
 
 describe('RangePicker Specs', () => {
+	beforeEach(() => {
+		global.Element.prototype.getBoundingClientRect = jest.fn(() => {
+			return {
+				bottom: 310,
+				height: 84,
+				left: 45,
+				right: 1348,
+				top: 226,
+				width: 1303,
+				x: 45,
+				y: 226
+			};
+		});
+	});
+
 	test('should render a single child with the current value', () => {
 		const picker = mount(
 			<RangePicker min={-10} max={20} value={10} />
 		);
 
 		const expected = '10';
-		const actual = picker.find('.active').first().text();
+		const actual = picker.find('.selectedItem').first().text();
 
 		expect(actual).toBe(expected);
 	});
 
 	test('should increase by step amount on increment press', () => {
 		const picker = mount(
-			<RangePicker defaultValue={10} min={0} max={100} noAnimation step={1} />
+			<RangePicker defaultValue={10} min={0} max={20} noAnimation step={1} />
 		);
 
-		increment(picker);
+		downKeyDown(picker);
 
 		const expected = '11';
-		const actual = picker.find('.active').first().text();
+		const actual = picker.find('.selectedItem').first().text();
 
 		expect(actual).toBe(expected);
 	});
 
 	test('should decrease by step amount on decrement press', () => {
 		const picker = mount(
-			<RangePicker defaultValue={10} min={0} max={100} noAnimation step={1} />
+			<RangePicker defaultValue={10} min={0} max={20} noAnimation step={1} />
 		);
 
-		decrement(picker);
+		upKeyDown(picker);
 
 		const expected = '9';
-		const actual = picker.find('.active').first().text();
+		const actual = picker.find('.selectedItem').first().text();
 
 		expect(actual).toBe(expected);
 	});
@@ -50,7 +67,7 @@ describe('RangePicker Specs', () => {
 			<RangePickerBase min={0} max={0} value={0} />
 		);
 
-		const actual = picker.find('Picker').last().prop('disabled');
+		const actual = picker.find('DrumPicker').last().prop('disabled');
 		expect(actual).toBe(true);
 	});
 });

TimePicker/tests/TimePicker-specs.js

@@ -7,9 +7,6 @@ import css from '../TimePicker.module.less';
 // otherwise, nothing renders in the label.
 
 describe('TimePicker', () => {
-
-	// Suite-wide setup
-
 	test('should emit an onChange event when changing a component picker',
 		() => {
 			const handleChange = jest.fn();

internal/DateComponentPicker/DateComponentPicker.js

@@ -4,13 +4,13 @@ import Changeable from '@enact/ui/Changeable';
 import PropTypes from 'prop-types';
 import {Children} from 'react';
 
-import PickerCore, {PickerItem} from '../Picker';
+import PickerCore, {DrumPickerItem} from '../DrumPicker';
 
-import css from './DateComponentPicker.module.less';
+import componentCss from './DateComponentPicker.module.less';
 
 /**
  * {@link agate/internal/DataComponentPicker.DateComponentPickerBase} allows the selection of one
- * part of the date or time using a {@link agate/internal/Picker.Picker}.
+ * part of the date or time using a {@link agate/internal/DrumPicker.DrumPicker}.
  *
  * @class DateComponentPickerBase
  * @memberof agate/internal/DateComponentPicker
@@ -66,23 +66,23 @@ const DateComponentPickerBase = kind({
 	},
 
 	styles: {
-		css,
+		css: componentCss,
 		className: 'dateComponentPicker'
 	},
 
 	computed: {
 		children: ({children}) => mapAndFilterChildren(children, (child) => (
-			<PickerItem>{child}</PickerItem>
+			<DrumPickerItem>{child}</DrumPickerItem>
 		)),
 		max: ({children}) => children ? Children.count(children) - 1 : 0
 	},
 
-	render: ({accessibilityHint, 'aria-valuetext': ariaValuetext, children, max, value, wrap, ...rest}) => (
+	render: ({accessibilityHint, 'aria-valuetext': ariaValuetext, children, className, max, value, wrap, ...rest}) => (
 		<PickerCore
 			{...rest}
 			accessibilityHint={accessibilityHint}
 			aria-valuetext={(accessibilityHint == null) ? ariaValuetext : null}
-			css={css}
+			className={className}
 			index={value}
 			max={max}
 			min={0}

internal/DateComponentPicker/DateComponentRangePicker.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import {RangePickerBase} from '../../RangePicker';
 
-import css from './DateComponentPicker.module.less';
+import componentCss from './DateComponentPicker.module.less';
 
 /**
  * {@link agate/internal/DataComponentPicker.DateComponentRangePicker} allows the selection of
@@ -68,15 +68,15 @@ const DateComponentRangePickerBase = kind({
 	},
 
 	styles: {
-		css,
+		css: componentCss,
 		className: 'dateComponentPicker'
 	},
 
-	render: ({accessibilityHint, max, min, value, wrap, ...rest}) => (
+	render: ({accessibilityHint, className, max, min, value, wrap, ...rest}) => (
 		<RangePickerBase
 			{...rest}
 			accessibilityHint={(accessibilityHint == null) ? value : accessibilityHint}
-			css={css}
+			className={className}
 			max={max}
 			min={min}
 			orientation="vertical"