UNPKG

@10up/block-components

Version:

10up Components built for the WordPress Block Editor.

666 lines (605 loc) 24.5 kB
/******/ (function() { // webpackBootstrap /******/ "use strict"; /******/ var __webpack_modules__ = ({ /***/ "./components/drag-handle/index.tsx": /*!******************************************!*\ !*** ./components/drag-handle/index.tsx ***! \******************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ DragHandle: function() { return /* binding */ DragHandle; } /* harmony export */ }); /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); var _jsxFileName = "/Users/fabiankaegy/Developer/10up/block-components/components/drag-handle/index.tsx"; function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /** * Renders an SVG drag handle. * * @param {object} props The prop object. * @returns {*} React JSX */ const DragHandle = props => (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", _extends({}, props, { style: { cursor: props.isDragging ? 'grabbing' : 'grab' }, __self: undefined, __source: { fileName: _jsxFileName, lineNumber: 14, columnNumber: 2 } }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", { style: { marginRight: '10px', cursor: 'grab', flexShrink: 0 }, width: "18", height: "18", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 18 18", role: "img", "aria-hidden": "true", focusable: "false", __self: undefined, __source: { fileName: _jsxFileName, lineNumber: 15, columnNumber: 3 } }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", { d: "M5 4h2V2H5v2zm6-2v2h2V2h-2zm-6 8h2V8H5v2zm6 0h2V8h-2v2zm-6 6h2v-2H5v2zm6 0h2v-2h-2v2z", __self: undefined, __source: { fileName: _jsxFileName, lineNumber: 25, columnNumber: 4 } }))); /***/ }), /***/ "@dnd-kit/core": /*!********************************!*\ !*** external "@dnd-kit/core" ***! \********************************/ /***/ (function(module) { module.exports = require("@dnd-kit/core"); /***/ }), /***/ "@dnd-kit/modifiers": /*!*************************************!*\ !*** external "@dnd-kit/modifiers" ***! \*************************************/ /***/ (function(module) { module.exports = require("@dnd-kit/modifiers"); /***/ }), /***/ "@dnd-kit/sortable": /*!************************************!*\ !*** external "@dnd-kit/sortable" ***! \************************************/ /***/ (function(module) { module.exports = require("@dnd-kit/sortable"); /***/ }), /***/ "@dnd-kit/utilities": /*!*************************************!*\ !*** external "@dnd-kit/utilities" ***! \*************************************/ /***/ (function(module) { module.exports = require("@dnd-kit/utilities"); /***/ }), /***/ "@wordpress/block-editor": /*!******************************************!*\ !*** external "@wordpress/block-editor" ***! \******************************************/ /***/ (function(module) { module.exports = require("@wordpress/block-editor"); /***/ }), /***/ "@wordpress/blocks": /*!************************************!*\ !*** external "@wordpress/blocks" ***! \************************************/ /***/ (function(module) { module.exports = require("@wordpress/blocks"); /***/ }), /***/ "@wordpress/components": /*!****************************************!*\ !*** external "@wordpress/components" ***! \****************************************/ /***/ (function(module) { module.exports = require("@wordpress/components"); /***/ }), /***/ "@wordpress/data": /*!**********************************!*\ !*** external "@wordpress/data" ***! \**********************************/ /***/ (function(module) { module.exports = require("@wordpress/data"); /***/ }), /***/ "@wordpress/element": /*!*************************************!*\ !*** external "@wordpress/element" ***! \*************************************/ /***/ (function(module) { module.exports = require("@wordpress/element"); /***/ }), /***/ "@wordpress/i18n": /*!**********************************!*\ !*** external "@wordpress/i18n" ***! \**********************************/ /***/ (function(module) { module.exports = require("@wordpress/i18n"); /***/ }), /***/ "uuid": /*!***********************!*\ !*** external "uuid" ***! \***********************/ /***/ (function(module) { module.exports = require("uuid"); /***/ }) /******/ }); /************************************************************************/ /******/ // The module cache /******/ var __webpack_module_cache__ = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ var cachedModule = __webpack_module_cache__[moduleId]; /******/ if (cachedModule !== undefined) { /******/ return cachedModule.exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = __webpack_module_cache__[moduleId] = { /******/ // no module.id needed /******/ // no module.loaded needed /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /************************************************************************/ /******/ /* webpack/runtime/compat get default export */ /******/ !function() { /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function() { return module['default']; } : /******/ function() { return module; }; /******/ __webpack_require__.d(getter, { a: getter }); /******/ return getter; /******/ }; /******/ }(); /******/ /******/ /* webpack/runtime/define property getters */ /******/ !function() { /******/ // define getter functions for harmony exports /******/ __webpack_require__.d = function(exports, definition) { /******/ for(var key in definition) { /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); /******/ } /******/ } /******/ }; /******/ }(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ !function() { /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } /******/ }(); /******/ /******/ /* webpack/runtime/make namespace object */ /******/ !function() { /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ }(); /******/ /************************************************************************/ var __webpack_exports__ = {}; // This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk. !function() { /*!**************************************!*\ !*** ./components/repeater/index.js ***! \**************************************/ __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ AbstractRepeater: function() { return /* binding */ AbstractRepeater; }, /* harmony export */ AttributeRepeater: function() { return /* binding */ AttributeRepeater; }, /* harmony export */ Repeater: function() { return /* binding */ Repeater; } /* harmony export */ }); /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor"); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks"); /* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data"); /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_3__); /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components"); /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__); /* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n"); /* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__); /* harmony import */ var uuid__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! uuid */ "uuid"); /* harmony import */ var uuid__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(uuid__WEBPACK_IMPORTED_MODULE_6__); /* harmony import */ var _dnd_kit_core__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @dnd-kit/core */ "@dnd-kit/core"); /* harmony import */ var _dnd_kit_core__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_dnd_kit_core__WEBPACK_IMPORTED_MODULE_7__); /* harmony import */ var _dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @dnd-kit/sortable */ "@dnd-kit/sortable"); /* harmony import */ var _dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_8__); /* harmony import */ var _dnd_kit_modifiers__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @dnd-kit/modifiers */ "@dnd-kit/modifiers"); /* harmony import */ var _dnd_kit_modifiers__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_dnd_kit_modifiers__WEBPACK_IMPORTED_MODULE_9__); /* harmony import */ var _dnd_kit_utilities__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @dnd-kit/utilities */ "@dnd-kit/utilities"); /* harmony import */ var _dnd_kit_utilities__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(_dnd_kit_utilities__WEBPACK_IMPORTED_MODULE_10__); /* harmony import */ var _drag_handle__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../drag-handle */ "./components/drag-handle/index.tsx"); var _jsxFileName = "/Users/fabiankaegy/Developer/10up/block-components/components/repeater/index.js"; function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // @ts-ignore /** * @typedef {object} IndexedItem * @property {string} id Identifier of the item */ /** * The Sortable Item Component. * * @param {object} props React props * @param {Function} props.children Render prop to render the children. * @param {object} props.item The repeater item object. * @param {Function|null} props.setItem A function to set state of a repeater item. * @param {Function|null} props.removeItem A function to delete a repeater item. * @param {string} props.id A string identifier for a repeater item. * @returns {*} React JSX */ const SortableItem = ({ children, item = {}, setItem = null, removeItem = null, id = '' }) => { const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0,_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_8__.useSortable)({ id }); const style = { transform: _dnd_kit_utilities__WEBPACK_IMPORTED_MODULE_10__.CSS.Transform.toString(transform), transition, display: 'flex', zIndex: isDragging ? 999 : 1, position: 'relative' }; const repeaterItem = children(item, id, setItem, removeItem); const clonedRepeaterChild = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(repeaterItem, { ref: setNodeRef, style, className: isDragging ? `${repeaterItem.props.className} repeater-item--is-dragging` : repeaterItem.props.className }, [(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_drag_handle__WEBPACK_IMPORTED_MODULE_11__.DragHandle, _extends({ className: "repeater-item__drag-handle" }, attributes, listeners, { isDragging: isDragging, __self: undefined, __source: { fileName: _jsxFileName, lineNumber: 69, columnNumber: 4 } })), repeaterItem.props.children]); return clonedRepeaterChild; }; /** * The Repeater Component. * * @param {object} props React props * @param {Function} props.children Render prop to render the children. * @param {Function|null} props.addButton render prop to customize the "Add item" button. * @param {boolean} props.allowReordering boolean to toggle reordering of Repeater items. * @param {Function} props.onChange callback function to update the block attribute. * @param {Array<IndexedItem>} props.value array of Repeater items. * @param {Array<IndexedItem>} props.defaultValue array of default Repeater items. * @returns {*} React JSX */ const AbstractRepeater = ({ children, addButton = null, allowReordering = false, onChange, value, defaultValue = [] }) => { const sensors = (0,_dnd_kit_core__WEBPACK_IMPORTED_MODULE_7__.useSensors)((0,_dnd_kit_core__WEBPACK_IMPORTED_MODULE_7__.useSensor)(_dnd_kit_core__WEBPACK_IMPORTED_MODULE_7__.PointerSensor), (0,_dnd_kit_core__WEBPACK_IMPORTED_MODULE_7__.useSensor)(_dnd_kit_core__WEBPACK_IMPORTED_MODULE_7__.KeyboardSensor, { coordinateGetter: _dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_8__.sortableKeyboardCoordinates })); /** * Handle drag event completion * * @param {import('@dnd-kit/core').DragEndEvent} event End of drag event */ function handleDragEnd(event) { const { active, over } = event; if (active.id !== over?.id) { /** * Set of items to move. * * @param {Array<IndexedItem>} items Set of indexed items * @returns {Array<IndexedItem>} Changed set of items */ const moveArray = items => { const oldIndex = items.findIndex(item => item.id === active.id); const newIndex = items.findIndex(item => item.id === over?.id); return (0,_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_8__.arrayMove)(items, oldIndex, newIndex); }; onChange(moveArray(value)); } } /** * Adds a new repeater item. */ function addItem() { /* * [...defaultValue] does a shallow copy. To ensure deep-copy, * we do JSON.parse(JSON.stringify()). */ const defaultValueCopy = JSON.parse(JSON.stringify(defaultValue)); if (!defaultValue.length) { defaultValueCopy.push({}); } defaultValueCopy[0].id = (0,uuid__WEBPACK_IMPORTED_MODULE_6__.v4)(); onChange([...value, ...defaultValueCopy]); } /** * Updates the item currently being edited. * * @param {object|string|number|boolean} newValue The value that should be used to updated the item. * @param {number} index The index at which the item should be updated. */ function setItem(newValue, index) { /* * [...value] does a shallow copy. To ensure deep-copy, * we do JSON.parse(JSON.stringify()). */ const valueCopy = JSON.parse(JSON.stringify(value)); if (typeof newValue === 'object' && newValue !== null) { valueCopy[index] = { ...valueCopy[index], ...newValue }; } else { valueCopy[index] = newValue; } onChange(valueCopy); } /** * Removes an item from the list. * * @param {number} index The index of the item that needs to be removed. */ function removeItem(index) { const valueCopy = JSON.parse(JSON.stringify(value)).filter( /** * Filter out the item to remove. * * @param {IndexedItem} item Item to remove * @param {number} innerIndex Current index * @returns {boolean} */ // @ts-ignore (item, innerIndex) => index !== innerIndex); onChange(valueCopy); } const itemIds = value.map(item => item.id); return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, allowReordering ? (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_dnd_kit_core__WEBPACK_IMPORTED_MODULE_7__.DndContext, { sensors: sensors, collisionDetection: _dnd_kit_core__WEBPACK_IMPORTED_MODULE_7__.closestCenter, onDragEnd: e => handleDragEnd(e), modifiers: [_dnd_kit_modifiers__WEBPACK_IMPORTED_MODULE_9__.restrictToVerticalAxis], __self: undefined, __source: { fileName: _jsxFileName, lineNumber: 196, columnNumber: 5 } }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_8__.SortableContext, { items: itemIds, strategy: _dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_8__.verticalListSortingStrategy, __self: undefined, __source: { fileName: _jsxFileName, lineNumber: 202, columnNumber: 6 } }, value.map((item, key) => { return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(SortableItem, { item: item, setItem: /** * Add/update callback * * @param {object|string|number|boolean} val Value to set * @returns {void} */ val => setItem(val, key), removeItem: () => removeItem(key), key: item.id, id: item.id, __self: undefined, __source: { fileName: _jsxFileName, lineNumber: 205, columnNumber: 9 } }, /** * Mapped set of sortable items * * @param {IndexedItem} item Current Item * @param {string} id Current Item ID * @param {Function} setItem Callback to add/update an item * @param {Function} removeItem Callback to remove an item * @returns {*} React JSX */ (item, id, setItem, removeItem) => { return children(item, id, /** * Add/update callback * * @param {object|string|number|boolean} val Value to set * @returns {void} */ val => setItem(val, key), () => removeItem(key)); }); }))) : value.map((item, key) => { return children(item, item.id, /** * Add/update callback * * @param {object|string|number|boolean} val Value to set * @returns {void} */ val => setItem(val, key), () => removeItem(key)); }), typeof addButton === 'function' ? addButton(addItem) : (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, { variant: "primary", onClick: () => addItem(), __self: undefined, __source: { fileName: _jsxFileName, lineNumber: 269, columnNumber: 5 } }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Add item'))); }; /** * Attribute Repeater Component. * * @param {object} props React props * @param {Function} props.children Render prop to render the children. * @param {Function|null} props.addButton render prop to customize the "Add item" button. * @param {boolean} props.allowReordering boolean to toggle reordering of Repeater items. * @param {string|null} props.attribute Attribute name. * @returns {*} React JSX */ const AttributeRepeater = ({ children, attribute = null, addButton = null, allowReordering = false }) => { const { clientId, name } = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockEditContext)(); const { updateBlockAttributes } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.dispatch)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.store); const attributeValue = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.useSelect)(select => { // @ts-ignore const attributes = select(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.store).getBlockAttributes(clientId); return attributes[attribute] || []; }, [attribute, clientId]); const { defaultRepeaterData } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.useSelect)(select => { return { defaultRepeaterData: // @ts-ignore select(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__.store).getBlockType(name).attributes[attribute].default }; }, [attribute]); if (defaultRepeaterData.length) { defaultRepeaterData[0].id = (0,uuid__WEBPACK_IMPORTED_MODULE_6__.v4)(); } /** * Update a blocks attributes * * @param {string} value Attribute value */ const handleOnChange = value => { if (attribute !== null) { updateBlockAttributes(clientId, { [attribute]: value }); } }; return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(AbstractRepeater, { addButton: addButton, allowReordering: allowReordering, onChange: handleOnChange, value: attributeValue, defaultValue: defaultRepeaterData, __self: undefined, __source: { fileName: _jsxFileName, lineNumber: 332, columnNumber: 3 } }, children); }; /** * Repeater Component. * * @param {object} props React props * @param {Function} props.children Render prop to render the children. * @param {Function|null} props.addButton render prop to customize the "Add item" button. * @param {boolean} props.allowReordering boolean to toggle reordering of Repeater items. * @param {Function} props.onChange callback function to update the block attribute. * @param {Array<IndexedItem>} props.value array of Repeater items. * @param {Array<IndexedItem>} props.defaultValue array of default Repeater items. * @param {string|null} props.attribute Attribute name. * @returns {*} React JSX */ const Repeater = ({ children, addButton = null, allowReordering = false, onChange, value, defaultValue = [], attribute = null }) => { if (attribute) { return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(AttributeRepeater, { attribute: attribute, addButton: addButton, allowReordering: allowReordering, __self: undefined, __source: { fileName: _jsxFileName, lineNumber: 368, columnNumber: 4 } }, children); } return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(AbstractRepeater, { addButton: addButton, allowReordering: allowReordering, onChange: onChange, value: value, defaultValue: defaultValue, __self: undefined, __source: { fileName: _jsxFileName, lineNumber: 379, columnNumber: 3 } }, children); }; }(); module.exports = __webpack_exports__; /******/ })() ; //# sourceMappingURL=index.js.map