QueryLimit: A React component for adding a WordPress Range Control input for setting a query's limit clause

.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
 	],
 	'plugins': [
 		'wordpress',
+		'jest',
 	],
 	env: {
 		'jest/globals': true,
@@ -13,9 +14,9 @@ module.exports = {
 		wpApiSettings: true,
 		eejsdata: true
 	},
-	plugins: [
-		'jest',
-	],
+	rules: {
+		"linebreak-style": 0
+	},
 	overrides: [
 		{
 			files: [ 'test/e2e/**/*.js' ],

assets/src/components/index.js

@@ -1 +1,4 @@
+// query components
+export { QueryLimit } from './query/limit';
+// selection components
 export { default as EventSelect } from './selection/event-select';

assets/src/components/query/limit/index.js

@@ -0,0 +1,76 @@
+/**
+ * USAGE:
+ *
+ * A React component for adding a WordPress Range Control input
+ * for setting a query's limit clause
+ *
+ * Step 1: import the following external dependencies:
+ *
+ *        import { __ } from '@eventespresso/i18n';
+ *        import { QueryLimit } from '@eventespresso/components';
+ *        import { PanelBody } from '@wordpress/components';
+ *        import { InspectorControls } from '@wordpress/editor';
+ *
+ * Step 2: add a "limit" attribute:
+ *
+ *        attributes: {
+ * 		  	limit: {
+ * 		  		type: 'number',
+ * 		  		default: 5, (10 is already set as default)
+ * 		  	},
+ * 		},
+ *
+ * Step 3: wrap the QueryLimit component within
+ * the InspectorControls and PanelBody components
+ * (currently shown within a block's edit() function)
+ *
+ *        edit: ( ( { attributes, setAttributes } ) => {
+ * 			const { limit } = attributes;
+ * 			return (
+ * 				<InspectorControls>
+ * 		  			<PanelBody>
+ * 		  				<QueryLimit
+ * 		  					limit={ limit }
+ * 		  					onLimitChange={
+ * 		  						( value ) => setAttributes( { limit: value } )
+ * 		  					}
+ * 		  				/>
+ * 		  			</PanelBody>
+ * 		  		</InspectorControls>
+ * 		  	);
+ * 		}),
+ */
+
+/**
+ * External dependencies
+ */
+import { __ } from '@eventespresso/i18n';
+
+/**
+ * WordPress dependencies
+ **/
+import { RangeControl } from '@wordpress/components';
+
+const DEFAULT_LIMIT = 10;
+const DEFAULT_LABEL = __( 'Limit', 'event_espresso' );
+const DEFAULT_MIN = 1;
+const DEFAULT_MAX = 100;
+
+export const QueryLimit = ( {
+	onLimitChange,
+	limit = DEFAULT_LIMIT,
+	label = DEFAULT_LABEL,
+	min = DEFAULT_MIN,
+	max = DEFAULT_MAX,
+} ) => {
+	return onLimitChange && (
+		<RangeControl
+			key={ 'query-limit' }
+			value={ limit }
+			label={ label }
+			min={ min }
+			max={ max }
+			onChange={ onLimitChange }
+		/>
+	);
+};

assets/src/components/query/limit/test/index.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { mount } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { QueryLimit } from '../';
+
+describe( 'QueryLimit', () => {
+	describe( 'Component with no optional parameters passed', () => {
+		it( 'should have default values', () => {
+			const onChange = jest.fn();
+			const wrapper = mount( <QueryLimit onLimitChange={ onChange } /> );
+			// test range input
+			const limit = wrapper.find( 'input[type="range"]' );
+			expect( limit.props().value ).toBe( 10 );
+			expect( limit.props().min ).toBe( 1 );
+			expect( limit.props().max ).toBe( 100 );
+			// and label
+			const label = wrapper.find( 'label' );
+			expect( label.text() ).toEqual( 'Limit' );
+			// test onChange
+			limit.simulate( 'change', { target: { value: '5' } } );
+			expect( onChange ).toHaveBeenCalledWith( 5 );
+		} );
+	} );
+	describe( 'Component with all parameters passed', () => {
+		it( 'should not have default values', () => {
+			const onChange = jest.fn();
+			const wrapper = mount(
+				<QueryLimit
+					limit={ 25 }
+					label={ 'No Limit' }
+					min={ 10 }
+					max={ 50 }
+					onLimitChange={ onChange }
+				/>
+			);
+			// test range input
+			const limit = wrapper.find( 'input[type="range"]' );
+			expect( limit.props().value ).toBe( 25 );
+			expect( limit.props().min ).toBe( 10 );
+			expect( limit.props().max ).toBe( 50 );
+			// and label
+			const label = wrapper.find( 'label' );
+			expect( label.text() ).toEqual( 'No Limit' );
+			// test onChange
+			limit.simulate( 'change', { target: { value: '30' } } );
+			expect( onChange ).toHaveBeenCalledWith( 30 );
+		} );
+	} );
+} );

docs/P--Gutenberg Blocks and Components/README.md

@@ -0,0 +1,13 @@
+# Gutenberg Blocks and Components
+
+### Blocks
+The following is a list of Event Espresso Gutenberg Blocks that can be utilized in your site's content:
+
+ * [Event Attendees List](blocks/event-attendees.md) 
+
+### Components
+If you are building your own Gutenberg Block to use within Event Espresso, then the following is a list of additional React components can be utilized:
+
+
+ * [QueryLimit](components/query/limit.md) - A React component for adding a WordPress Range Control input for setting a query's limit clause
+

docs/P--Gutenberg Blocks and Components/components/query/limit.md

@@ -0,0 +1,47 @@
+# QueryLimit
+
+A React component for adding a WordPress Range Control input for setting a query's limit clause
+
+### Step 1
+Import the following external dependencies:
+
+```
+import { __ } from '@eventespresso/i18n';
+import { QueryLimit } from '@eventespresso/components';
+import { PanelBody } from '@wordpress/components';
+import { InspectorControls } from '@wordpress/editor';
+```
+
+### Step 2
+Add a "limit" attribute:
+
+```
+attributes: {
+    limit: {
+        type: 'number',
+        default: 5,
+        },
+},
+```
+
+### Step 3
+Wrap the QueryLimit component within the InspectorControls and PanelBody components
+ (currently shown within a block's edit() function)
+
+```
+edit: ( ( { attributes, setAttributes } ) => {
+    const { limit } = attributes;
+    return (
+        <InspectorControls>
+            <PanelBody>
+                <QueryLimit
+                    limit={ limit }
+                    onLimitChange={
+                        ( value ) => setAttributes( { limit: value } )
+                    }
+                />
+            </PanelBody>
+        </InspectorControls>
+    );
+}),
+```

webpack.common.js

@@ -97,6 +97,9 @@ const config = [
 			'data-stores': [
 				assets + 'data/index.js',
 			],
+			'eventespresso-core-blocks': [
+				assets + 'blocks/index.js',
+			],
 		},
 		externals: Object.assign( externals, {
 			'@eventespresso/components': 'eejs.components',