Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Range slider component #793

Closed
wants to merge 25 commits into from
Closed
Changes from 15 commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -22,6 +22,7 @@ module.exports = {
window: true,
document: true,
wc_product_block_data: true,
wcSettings: true,
},
plugins: [
'wordpress',
@@ -0,0 +1,49 @@
/**
* External dependencies
*/
import { Component } from 'react';
import classnames from 'classnames';

/**
* Internal dependencies
*/
import PriceSlider from '../../frontend-components/price-slider';

/**
* Component displaying a price filter.
*/
class PriceFilterBlock extends Component {
constructor() {
super( ...arguments );
this.state = {
min: 0,
max: 200,
};
this.onChange = this.onChange.bind( this );
}

onChange( values ) {
// This is probably temporary - to test the values can be pulled from the PriceSlider component.
this.setState( {
min: values.min,
max: values.max,
} );
}

render() {
const classes = classnames(
'wc-block-price-slider',
);
const { min, max } = this.state;

return (
<div className={ classes }>
<p>Current Min: { min }</p>
<p>Current Max: { max }</p>
<PriceSlider min={ 0 } max={ 200 } step={ 10 } onChange={ this.onChange } />
</div>
);
}
}

export default PriceFilterBlock;
@@ -0,0 +1,17 @@
/**
* External dependencies
*/
import { Fragment } from '@wordpress/element';

/**
* Internal dependencies
*/
import Block from './block.js';

export default function( { attributes } ) {
return (
<Fragment>
<Block attributes={ attributes } isPreview />
</Fragment>
);
}
@@ -0,0 +1,21 @@
/**
* External dependencies
*/
import { render } from 'react-dom';

/**
* Internal dependencies
*/
import Block from './block.js';

const containers = document.querySelectorAll(
'.wp-block-woocommerce-price-filter'
);

if ( containers.length ) {
Array.prototype.forEach.call( containers, ( el ) => {
el.classList.remove( 'is-loading' );

render( <Block />, el );
} );
}
@@ -0,0 +1,44 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';

/**
* Internal dependencies
*/
import edit from './edit.js';
import { IconFolder } from '../../components/icons';

registerBlockType( 'woocommerce/price-filter', {
title: __( 'Filter Products by Price', 'woo-gutenberg-products-block' ),
icon: {
src: <IconFolder />,
foreground: '#96588a',
},
category: 'woocommerce',
keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
description: __(
'Display a slider to filter products in your store by price.',
'woo-gutenberg-products-block'
),
supports: {
align: [ 'wide', 'full' ],
},

attributes: {},

edit,

/**
* Save the props to post content.
*/
save() {
const data = {};
return (
<div className="is-loading" { ...data }>
<span aria-hidden className="wc-block-product-categories__placeholder" />
</div>
);
},
} );
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.