Toggle children when toggling a parent category
This commit is contained in:
parent
cdfc19ae1c
commit
4ca9df7a79
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -224,16 +224,12 @@
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
|
|
||||||
> label {
|
> label {
|
||||||
padding: 10px 15px;
|
padding: 10px 0 10px 15px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
.product-category-count {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.product-category-accordion-open {
|
&.product-category-accordion-open {
|
||||||
margin: 0 0 5px;
|
margin: -1px 0 5px;
|
||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
|
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
|
@ -251,7 +247,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #666;
|
color: #666;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0 15px 0 10px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: none;
|
background: none;
|
||||||
|
|
|
@ -1189,6 +1189,8 @@ Object.defineProperty(exports, "__esModule", {
|
||||||
|
|
||||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
|
|
||||||
|
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||||
|
|
||||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||||
|
@ -1232,21 +1234,24 @@ var ProductsCategorySelect = exports.ProductsCategorySelect = function (_React$C
|
||||||
/**
|
/**
|
||||||
* Handle checkbox toggle.
|
* Handle checkbox toggle.
|
||||||
*
|
*
|
||||||
* @param Event object evt
|
* @param Checked? boolean checked
|
||||||
|
* @param Categories array categories
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
_createClass(ProductsCategorySelect, [{
|
_createClass(ProductsCategorySelect, [{
|
||||||
key: "checkboxChange",
|
key: "checkboxChange",
|
||||||
value: function checkboxChange(evt) {
|
value: function checkboxChange(checked, categories) {
|
||||||
var selectedCategories = this.state.selectedCategories;
|
var selectedCategories = this.state.selectedCategories;
|
||||||
|
|
||||||
if (evt.target.checked && !selectedCategories.includes(parseInt(evt.target.value, 10))) {
|
|
||||||
selectedCategories.push(parseInt(evt.target.value, 10));
|
|
||||||
} else if (!evt.target.checked) {
|
|
||||||
selectedCategories = selectedCategories.filter(function (category) {
|
selectedCategories = selectedCategories.filter(function (category) {
|
||||||
return category !== parseInt(evt.target.value, 10);
|
return !categories.includes(category);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (checked) {
|
||||||
|
var _selectedCategories;
|
||||||
|
|
||||||
|
(_selectedCategories = selectedCategories).push.apply(_selectedCategories, _toConsumableArray(categories));
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -1353,20 +1358,56 @@ var ProductCategoryList = withAPIData(function (props) {
|
||||||
return __('No categories found');
|
return __('No categories found');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var handleCategoriesToCheck = function handleCategoriesToCheck(evt, parent, categories) {
|
||||||
|
var ids = getCategoryChildren(parent, categories).map(function (category) {
|
||||||
|
return category.id;
|
||||||
|
});
|
||||||
|
|
||||||
|
ids.push(parent.id);
|
||||||
|
|
||||||
|
checkboxChange(evt.target.checked, ids);
|
||||||
|
};
|
||||||
|
|
||||||
|
var getCategoryChildren = function getCategoryChildren(parent, categories) {
|
||||||
|
var children = [];
|
||||||
|
|
||||||
|
categories.filter(function (category) {
|
||||||
|
return category.parent === parent.id;
|
||||||
|
}).forEach(function (category) {
|
||||||
|
children.push(category);
|
||||||
|
children.push.apply(children, _toConsumableArray(getCategoryChildren(category, categories)));
|
||||||
|
});
|
||||||
|
|
||||||
|
return children;
|
||||||
|
};
|
||||||
|
|
||||||
|
var categoryHasChildren = function categoryHasChildren(parent, categories) {
|
||||||
|
return !!getCategoryChildren(parent, categories).length;
|
||||||
|
};
|
||||||
|
|
||||||
var AccordionButton = function AccordionButton(_ref3) {
|
var AccordionButton = function AccordionButton(_ref3) {
|
||||||
var category = _ref3.category;
|
var category = _ref3.category,
|
||||||
|
categories = _ref3.categories;
|
||||||
|
|
||||||
var icon = 'arrow-down-alt2';
|
var icon = 'arrow-down-alt2';
|
||||||
|
|
||||||
if (openAccordion === category) {
|
if (openAccordion === category.id) {
|
||||||
icon = 'arrow-up-alt2';
|
icon = 'arrow-up-alt2';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var style = null;
|
||||||
|
|
||||||
|
if (!categoryHasChildren(category, categories)) {
|
||||||
|
style = {
|
||||||
|
visibility: 'hidden'
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
return wp.element.createElement(
|
return wp.element.createElement(
|
||||||
"button",
|
"button",
|
||||||
{ onClick: function onClick() {
|
{ onClick: function onClick() {
|
||||||
return accordionToggle(category);
|
return accordionToggle(category.id);
|
||||||
}, type: "button", className: "product-category-accordion-toggle" },
|
}, style: style, type: "button", className: "product-category-accordion-toggle" },
|
||||||
wp.element.createElement(Dashicon, { icon: icon })
|
wp.element.createElement(Dashicon, { icon: icon })
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1393,7 +1434,9 @@ var ProductCategoryList = withAPIData(function (props) {
|
||||||
id: 'product-category-' + category.id,
|
id: 'product-category-' + category.id,
|
||||||
value: category.id,
|
value: category.id,
|
||||||
checked: selectedCategories.includes(category.id),
|
checked: selectedCategories.includes(category.id),
|
||||||
onChange: checkboxChange
|
onChange: function onChange(evt) {
|
||||||
|
return handleCategoriesToCheck(evt, category, categories);
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
" ",
|
" ",
|
||||||
category.name,
|
category.name,
|
||||||
|
@ -1402,7 +1445,7 @@ var ProductCategoryList = withAPIData(function (props) {
|
||||||
{ className: "product-category-count" },
|
{ className: "product-category-count" },
|
||||||
category.count
|
category.count
|
||||||
),
|
),
|
||||||
0 === category.parent && wp.element.createElement(AccordionButton, { category: category.id })
|
0 === category.parent && wp.element.createElement(AccordionButton, { category: category, categories: categories })
|
||||||
),
|
),
|
||||||
wp.element.createElement(CategoryTree, { categories: categories, parent: category.id })
|
wp.element.createElement(CategoryTree, { categories: categories, parent: category.id })
|
||||||
);
|
);
|
||||||
|
|
|
@ -26,15 +26,16 @@ export class ProductsCategorySelect extends React.Component {
|
||||||
/**
|
/**
|
||||||
* Handle checkbox toggle.
|
* Handle checkbox toggle.
|
||||||
*
|
*
|
||||||
* @param Event object evt
|
* @param Checked? boolean checked
|
||||||
|
* @param Categories array categories
|
||||||
*/
|
*/
|
||||||
checkboxChange( evt ) {
|
checkboxChange( checked, categories ) {
|
||||||
let selectedCategories = this.state.selectedCategories;
|
let selectedCategories = this.state.selectedCategories;
|
||||||
|
|
||||||
if ( evt.target.checked && ! selectedCategories.includes( parseInt( evt.target.value, 10 ) ) ) {
|
selectedCategories = selectedCategories.filter( category => ! categories.includes( category ) );
|
||||||
selectedCategories.push( parseInt( evt.target.value, 10 ) );
|
|
||||||
} else if ( ! evt.target.checked ) {
|
if ( checked ) {
|
||||||
selectedCategories = selectedCategories.filter( category => category !== parseInt( evt.target.value, 10 ) );
|
selectedCategories.push( ...categories );
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setState( {
|
this.setState( {
|
||||||
|
@ -118,15 +119,48 @@ const ProductCategoryList = withAPIData( ( props ) => {
|
||||||
return __( 'No categories found' );
|
return __( 'No categories found' );
|
||||||
}
|
}
|
||||||
|
|
||||||
const AccordionButton = ( { category } ) => {
|
const handleCategoriesToCheck = ( evt, parent, categories ) => {
|
||||||
|
let ids = getCategoryChildren( parent, categories ).map( category => {
|
||||||
|
return category.id;
|
||||||
|
} );
|
||||||
|
|
||||||
|
ids.push( parent.id );
|
||||||
|
|
||||||
|
checkboxChange( evt.target.checked, ids );
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCategoryChildren = ( parent, categories ) => {
|
||||||
|
let children = [];
|
||||||
|
|
||||||
|
categories.filter( ( category ) => category.parent === parent.id ).forEach( function( category ) {
|
||||||
|
children.push( category );
|
||||||
|
children.push( ...getCategoryChildren( category, categories ) );
|
||||||
|
} );
|
||||||
|
|
||||||
|
return children;
|
||||||
|
};
|
||||||
|
|
||||||
|
const categoryHasChildren = ( parent, categories ) => {
|
||||||
|
return !! getCategoryChildren( parent, categories ).length;
|
||||||
|
};
|
||||||
|
|
||||||
|
const AccordionButton = ( { category, categories } ) => {
|
||||||
let icon = 'arrow-down-alt2';
|
let icon = 'arrow-down-alt2';
|
||||||
|
|
||||||
if ( openAccordion === category ) {
|
if ( openAccordion === category.id ) {
|
||||||
icon = 'arrow-up-alt2';
|
icon = 'arrow-up-alt2';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let style = null;
|
||||||
|
|
||||||
|
if ( ! categoryHasChildren( category, categories ) ) {
|
||||||
|
style = {
|
||||||
|
visibility: 'hidden',
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button onClick={ () => accordionToggle( category ) } type="button" className="product-category-accordion-toggle">
|
<button onClick={ () => accordionToggle( category.id ) } style={ style } type="button" className="product-category-accordion-toggle">
|
||||||
<Dashicon icon={ icon } />
|
<Dashicon icon={ icon } />
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
@ -144,11 +178,11 @@ const ProductCategoryList = withAPIData( ( props ) => {
|
||||||
id={ 'product-category-' + category.id }
|
id={ 'product-category-' + category.id }
|
||||||
value={ category.id }
|
value={ category.id }
|
||||||
checked={ selectedCategories.includes( category.id ) }
|
checked={ selectedCategories.includes( category.id ) }
|
||||||
onChange={ checkboxChange }
|
onChange={ ( evt ) => handleCategoriesToCheck( evt, category, categories ) }
|
||||||
/> { category.name }
|
/> { category.name }
|
||||||
<span className="product-category-count">{ category.count }</span>
|
<span className="product-category-count">{ category.count }</span>
|
||||||
{ 0 === category.parent &&
|
{ 0 === category.parent &&
|
||||||
<AccordionButton category={ category.id } />
|
<AccordionButton category={ category } categories={ categories } />
|
||||||
}
|
}
|
||||||
</label>
|
</label>
|
||||||
<CategoryTree categories={ categories } parent={ category.id } />
|
<CategoryTree categories={ categories } parent={ category.id } />
|
||||||
|
|
Loading…
Reference in New Issue