@wordpress/block-library
Version:
Block library for the WordPress editor.
256 lines (222 loc) • 9.63 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _lodash = require("lodash");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
var CategoriesEdit =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(CategoriesEdit, _Component);
function CategoriesEdit() {
var _this;
(0, _classCallCheck2.default)(this, CategoriesEdit);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CategoriesEdit).apply(this, arguments));
_this.toggleDisplayAsDropdown = _this.toggleDisplayAsDropdown.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
_this.toggleShowPostCounts = _this.toggleShowPostCounts.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
_this.toggleShowHierarchy = _this.toggleShowHierarchy.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
return _this;
}
(0, _createClass2.default)(CategoriesEdit, [{
key: "toggleDisplayAsDropdown",
value: function toggleDisplayAsDropdown() {
var _this$props = this.props,
attributes = _this$props.attributes,
setAttributes = _this$props.setAttributes;
var displayAsDropdown = attributes.displayAsDropdown;
setAttributes({
displayAsDropdown: !displayAsDropdown
});
}
}, {
key: "toggleShowPostCounts",
value: function toggleShowPostCounts() {
var _this$props2 = this.props,
attributes = _this$props2.attributes,
setAttributes = _this$props2.setAttributes;
var showPostCounts = attributes.showPostCounts;
setAttributes({
showPostCounts: !showPostCounts
});
}
}, {
key: "toggleShowHierarchy",
value: function toggleShowHierarchy() {
var _this$props3 = this.props,
attributes = _this$props3.attributes,
setAttributes = _this$props3.setAttributes;
var showHierarchy = attributes.showHierarchy;
setAttributes({
showHierarchy: !showHierarchy
});
}
}, {
key: "getCategories",
value: function getCategories() {
var parentId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var categories = this.props.categories;
if (!categories || !categories.length) {
return [];
}
if (parentId === null) {
return categories;
}
return categories.filter(function (category) {
return category.parent === parentId;
});
}
}, {
key: "getCategoryListClassName",
value: function getCategoryListClassName(level) {
return "wp-block-categories__list wp-block-categories__list-level-".concat(level);
}
}, {
key: "renderCategoryName",
value: function renderCategoryName(category) {
if (!category.name) {
return (0, _i18n.__)('(Untitled)');
}
return (0, _lodash.unescape)(category.name).trim();
}
}, {
key: "renderCategoryList",
value: function renderCategoryList() {
var _this2 = this;
var showHierarchy = this.props.attributes.showHierarchy;
var parentId = showHierarchy ? 0 : null;
var categories = this.getCategories(parentId);
return (0, _element.createElement)("ul", {
className: this.getCategoryListClassName(0)
}, categories.map(function (category) {
return _this2.renderCategoryListItem(category, 0);
}));
}
}, {
key: "renderCategoryListItem",
value: function renderCategoryListItem(category, level) {
var _this3 = this;
var _this$props$attribute = this.props.attributes,
showHierarchy = _this$props$attribute.showHierarchy,
showPostCounts = _this$props$attribute.showPostCounts;
var childCategories = this.getCategories(category.id);
return (0, _element.createElement)("li", {
key: category.id
}, (0, _element.createElement)("a", {
href: category.link,
target: "_blank",
rel: "noreferrer noopener"
}, this.renderCategoryName(category)), showPostCounts && (0, _element.createElement)("span", {
className: "wp-block-categories__post-count"
}, ' ', "(", category.count, ")"), showHierarchy && !!childCategories.length && (0, _element.createElement)("ul", {
className: this.getCategoryListClassName(level + 1)
}, childCategories.map(function (childCategory) {
return _this3.renderCategoryListItem(childCategory, level + 1);
})));
}
}, {
key: "renderCategoryDropdown",
value: function renderCategoryDropdown() {
var _this4 = this;
var instanceId = this.props.instanceId;
var showHierarchy = this.props.attributes.showHierarchy;
var parentId = showHierarchy ? 0 : null;
var categories = this.getCategories(parentId);
var selectId = "blocks-category-select-".concat(instanceId);
return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("label", {
htmlFor: selectId,
className: "screen-reader-text"
}, (0, _i18n.__)('Categories')), (0, _element.createElement)("select", {
id: selectId,
className: "wp-block-categories__dropdown"
}, categories.map(function (category) {
return _this4.renderCategoryDropdownItem(category, 0);
})));
}
}, {
key: "renderCategoryDropdownItem",
value: function renderCategoryDropdownItem(category, level) {
var _this5 = this;
var _this$props$attribute2 = this.props.attributes,
showHierarchy = _this$props$attribute2.showHierarchy,
showPostCounts = _this$props$attribute2.showPostCounts;
var childCategories = this.getCategories(category.id);
return [(0, _element.createElement)("option", {
key: category.id
}, (0, _lodash.times)(level * 3, function () {
return '\xa0';
}), this.renderCategoryName(category), !!showPostCounts ? " (".concat(category.count, ")") : ''), showHierarchy && !!childCategories.length && childCategories.map(function (childCategory) {
return _this5.renderCategoryDropdownItem(childCategory, level + 1);
})];
}
}, {
key: "render",
value: function render() {
var _this$props4 = this.props,
attributes = _this$props4.attributes,
isRequesting = _this$props4.isRequesting;
var displayAsDropdown = attributes.displayAsDropdown,
showHierarchy = attributes.showHierarchy,
showPostCounts = attributes.showPostCounts;
var inspectorControls = (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
title: (0, _i18n.__)('Categories Settings')
}, (0, _element.createElement)(_components.ToggleControl, {
label: (0, _i18n.__)('Display as Dropdown'),
checked: displayAsDropdown,
onChange: this.toggleDisplayAsDropdown
}), (0, _element.createElement)(_components.ToggleControl, {
label: (0, _i18n.__)('Show Hierarchy'),
checked: showHierarchy,
onChange: this.toggleShowHierarchy
}), (0, _element.createElement)(_components.ToggleControl, {
label: (0, _i18n.__)('Show Post Counts'),
checked: showPostCounts,
onChange: this.toggleShowPostCounts
})));
if (isRequesting) {
return (0, _element.createElement)(_element.Fragment, null, inspectorControls, (0, _element.createElement)(_components.Placeholder, {
icon: "admin-post",
label: (0, _i18n.__)('Categories')
}, (0, _element.createElement)(_components.Spinner, null)));
}
return (0, _element.createElement)(_element.Fragment, null, inspectorControls, (0, _element.createElement)("div", {
className: this.props.className
}, displayAsDropdown ? this.renderCategoryDropdown() : this.renderCategoryList()));
}
}]);
return CategoriesEdit;
}(_element.Component);
var _default = (0, _compose.compose)((0, _data.withSelect)(function (select) {
var _select = select('core'),
getEntityRecords = _select.getEntityRecords;
var _select2 = select('core/data'),
isResolving = _select2.isResolving;
var query = {
per_page: -1,
hide_empty: true
};
return {
categories: getEntityRecords('taxonomy', 'category', query),
isRequesting: isResolving('core', 'getEntityRecords', ['taxonomy', 'category', query])
};
}), _compose.withInstanceId)(CategoriesEdit);
exports.default = _default;
//# sourceMappingURL=edit.js.map