+ {tooltip ? (
+
+ ) : (
+
+ )}
+
+ {GFPDF.fontManagerTemplateTooltipLabel}
+
- {tooltip && (
-
', '
', ' ') }} />
- )}
+ {tooltip && (
+
',
+ '
',
+ ' '
+ ),
+ }}
+ />
+ )}
- {tooltip && (
-
- )}
-
- )
- }
+ {tooltip && (
+
+ )}
+
+ );
+ }
}
-export default TemplateTooltip
+export default TemplateTooltip;
diff --git a/src/assets/js/react/components/FontManager/UpdateFont.js b/src/assets/js/react/components/FontManager/UpdateFont.js
index fea719ff8..05a74a7f3 100644
--- a/src/assets/js/react/components/FontManager/UpdateFont.js
+++ b/src/assets/js/react/components/FontManager/UpdateFont.js
@@ -1,13 +1,13 @@
/* Dependencies */
-import React from 'react'
-import PropTypes from 'prop-types'
-import { sprintf } from 'sprintf-js'
+import React from 'react';
+import PropTypes from 'prop-types';
+import { sprintf } from 'sprintf-js';
/* Components */
-import FontVariant from './FontVariant'
-import AddUpdateFontFooter from './AddUpdateFontFooter'
+import FontVariant from './FontVariant';
+import AddUpdateFontFooter from './AddUpdateFontFooter';
/**
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 6.0
@@ -16,109 +16,133 @@ import AddUpdateFontFooter from './AddUpdateFontFooter'
/**
* Display update font panel UI
*
- * @param id
- * @param fontList
- * @param label
- * @param onHandleInputChange
- * @param onHandleUpload
- * @param onHandleDeleteFontStyle
- * @param onHandleCancelEditFont
- * @param onHandleCancelEditFontKeypress
- * @param onHandleSubmit
- * @param fontStyles
- * @param validateLabel
- * @param validateRegular
- * @param disableUpdateButton
- * @param msg
- * @param loading
- * @param tabIndexFontName
- * @param tabIndexFontFiles
- * @param tabIndexFooterButtons
+ * @param { Object } props
+ * @param { string } props.id
+ * @param { string } props.label
+ * @param { Function } props.onHandleInputChange
+ * @param { Function } props.onHandleUpload
+ * @param { Function } props.onHandleDeleteFontStyle
+ * @param { Function } props.onHandleCancelEditFont
+ * @param { Function } props.onHandleCancelEditFontKeypress
+ * @param { Function } props.onHandleSubmit
+ * @param { Object } props.fontStyles
+ * @param { boolean } props.validateLabel
+ * @param { boolean } props.validateRegular
+ * @param { boolean } props.disableUpdateButton
+ * @param { Object } props.msg
+ * @param { boolean } props.loading
+ * @param { string } props.tabIndexFontName
+ * @param { string } props.tabIndexFontFiles
+ * @param { string } props.tabIndexFooterButtons
+ *
+ * @return { JSX } UpdateFont Component
*
* @since 6.0
*/
-export const UpdateFont = (
- {
- id,
- label,
- onHandleInputChange,
- onHandleUpload,
- onHandleDeleteFontStyle,
- onHandleCancelEditFont,
- onHandleCancelEditFontKeypress,
- onHandleSubmit,
- fontStyles,
- validateLabel,
- validateRegular,
- disableUpdateButton,
- msg,
- loading,
- tabIndexFontName,
- tabIndexFontFiles,
- tabIndexFooterButtons
- }
-) => {
- const fontNameLabel = sprintf(GFPDF.fontManagerFontNameLabel, '
', ' ')
+export const UpdateFont = ({
+ id,
+ label,
+ onHandleInputChange,
+ onHandleUpload,
+ onHandleDeleteFontStyle,
+ onHandleCancelEditFont,
+ onHandleCancelEditFontKeypress,
+ onHandleSubmit,
+ fontStyles,
+ validateLabel,
+ validateRegular,
+ disableUpdateButton,
+ msg,
+ loading,
+ tabIndexFontName,
+ tabIndexFontFiles,
+ tabIndexFooterButtons,
+}) => {
+ // %s is found inside fontManagerFontNameLabel which is not detected by eslint
+ // eslint-disable-next-line @wordpress/valid-sprintf
+ const fontNameLabel = sprintf(
+ GFPDF.fontManagerFontNameLabel,
+ "
",
+ ' '
+ );
- return (
-
+ );
+};
/**
* PropTypes
@@ -126,23 +150,23 @@ export const UpdateFont = (
* @since 6.0
*/
UpdateFont.propTypes = {
- id: PropTypes.string,
- label: PropTypes.string.isRequired,
- onHandleInputChange: PropTypes.func.isRequired,
- onHandleUpload: PropTypes.func.isRequired,
- onHandleDeleteFontStyle: PropTypes.func.isRequired,
- onHandleCancelEditFont: PropTypes.func.isRequired,
- onHandleCancelEditFontKeypress: PropTypes.func.isRequired,
- onHandleSubmit: PropTypes.func.isRequired,
- validateLabel: PropTypes.bool.isRequired,
- validateRegular: PropTypes.bool.isRequired,
- disableUpdateButton: PropTypes.bool.isRequired,
- fontStyles: PropTypes.object.isRequired,
- msg: PropTypes.object.isRequired,
- loading: PropTypes.bool.isRequired,
- tabIndexFontName: PropTypes.string.isRequired,
- tabIndexFontFiles: PropTypes.string.isRequired,
- tabIndexFooterButtons: PropTypes.string.isRequired
-}
+ id: PropTypes.string,
+ label: PropTypes.string.isRequired,
+ onHandleInputChange: PropTypes.func.isRequired,
+ onHandleUpload: PropTypes.func.isRequired,
+ onHandleDeleteFontStyle: PropTypes.func.isRequired,
+ onHandleCancelEditFont: PropTypes.func.isRequired,
+ onHandleCancelEditFontKeypress: PropTypes.func.isRequired,
+ onHandleSubmit: PropTypes.func.isRequired,
+ validateLabel: PropTypes.bool.isRequired,
+ validateRegular: PropTypes.bool.isRequired,
+ disableUpdateButton: PropTypes.bool.isRequired,
+ fontStyles: PropTypes.object.isRequired,
+ msg: PropTypes.object.isRequired,
+ loading: PropTypes.bool.isRequired,
+ tabIndexFontName: PropTypes.string.isRequired,
+ tabIndexFontFiles: PropTypes.string.isRequired,
+ tabIndexFooterButtons: PropTypes.string.isRequired,
+};
-export default UpdateFont
+export default UpdateFont;
diff --git a/src/assets/js/react/components/Help/DisplayResult.js b/src/assets/js/react/components/Help/DisplayResult.js
new file mode 100644
index 000000000..23069d1c1
--- /dev/null
+++ b/src/assets/js/react/components/Help/DisplayResult.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Snippet } from 'react-instantsearch';
+
+/**
+ * @package Gravity PDF
+ * @copyright Copyright (c) 2024, Blue Liquid Designs
+ * @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
+ * @since 6.12.4
+ */
+
+/**
+ * Display individual search results
+ *
+ * @param { Object } props
+ * @param { Object } props.hit
+ *
+ * @return {JSX.Element} DisplayResult Component
+ *
+ * @since 6.12.4
+ */
+export function DisplayResult({ hit }) {
+ return (
+
+
+
+ );
+}
+
+/**
+ * PropTypes
+ *
+ * @since 6.12.4
+ */
+DisplayResult.propTypes = {
+ hit: PropTypes.shape({
+ url: PropTypes.string,
+ hierarchy: PropTypes.object,
+ type: PropTypes.string,
+ }),
+};
+
+export default DisplayResult;
diff --git a/src/assets/js/react/components/Help/DisplayResultContainer.js b/src/assets/js/react/components/Help/DisplayResultContainer.js
deleted file mode 100644
index c91d4b282..000000000
--- a/src/assets/js/react/components/Help/DisplayResultContainer.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/* Dependencies */
-import React from 'react'
-import PropTypes from 'prop-types'
-
-/**
- * @package Gravity PDF
- * @copyright Copyright (c) 2024, Blue Liquid Designs
- * @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
- * @since 5.2
- */
-
-/**
- * Displays result based on Search Input value
- *
- * @param groups (object)
- *
- * @since 5.2
- */
-const DisplayResultContainer = ({ groups }) => {
- return (
-
- {
- Object.entries(groups).map((item, index) => (
-
- {item[0]}
-
-
- {item[1].map((item, index) => {
- const url = item[1]
- /* Additional content description */
- const content = item[2]
- const hierarchyLvl2 = item[0].lvl2 ? item[0].lvl2 : ''
- const hierarchyLvl3 = item[0].lvl3 ? (' - ' + item[0].lvl3) : ''
- const combinedHierarchy = hierarchyLvl2 + hierarchyLvl3
- const additionalInfo = content ? (content.substr(0, 80) + '...') : combinedHierarchy
-
- return (
-
-
-
-
-
- )
- })}
-
-
- ))
- }
-
- )
-}
-
-/**
- *
- * @since 5.2
- */
-DisplayResultContainer.propTypes = {
- groups: PropTypes.object.isRequired
-}
-
-export default DisplayResultContainer
diff --git a/src/assets/js/react/components/Help/HelpContainer.js b/src/assets/js/react/components/Help/HelpContainer.js
index 09eaf96b0..8594a1b2a 100644
--- a/src/assets/js/react/components/Help/HelpContainer.js
+++ b/src/assets/js/react/components/Help/HelpContainer.js
@@ -1,12 +1,16 @@
-/* Dependencies */
-import React from 'react'
-import algoliasearch from 'algoliasearch/lite'
-import { Configure, InstantSearch, SearchBox, useHits, useInstantSearch } from 'react-instantsearch'
-/* Components */
-import DisplayResultContainer from './DisplayResultContainer'
+import React from 'react';
+import { liteClient } from 'algoliasearch/lite';
+import {
+ Configure,
+ InstantSearch,
+ SearchBox,
+ useHits,
+ useInstantSearch,
+} from 'react-instantsearch';
+import DisplayResult from './DisplayResult';
/**
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 5.2
@@ -15,65 +19,156 @@ import DisplayResultContainer from './DisplayResultContainer'
/**
* Handles the grunt work for our Help Page Search Input (API calls, display, state ect)
*
+ * @return { JSX.Element } HelpContainer Component
+ *
* @since 5.2
*/
export const HelpContainer = () => {
- const algoliaClient = algoliasearch('NKKEAC9I6I', '8c7d9c872c821829fac8251da2c9151c')
-
- return (
-
-
-
-
- )
-}
+ const algoliaClient = liteClient(
+ 'NKKEAC9I6I',
+ '8c7d9c872c821829fac8251da2c9151c'
+ );
+
+ return (
+
+
+
+
+
+ );
+};
+
+/**
+ * Determine if the search results are empty and output the children or fallback component
+ *
+ * @param { Object } props
+ * @param { React.ReactNode } props.children
+ * @param { React.ReactNode } props.fallback
+ *
+ * @return { JSX.Element } EmptyQueryBoundary Component
+ *
+ * @since 5.2
+ */
+function EmptyQueryBoundary({ children, fallback }) {
+ const { results, indexUiState } = useInstantSearch();
+
+ if (!indexUiState.query) {
+ return null;
+ }
-function EmptyQueryBoundary ({ children, fallback }) {
- const { indexUiState } = useInstantSearch()
+ if (!results.__isArtificial && results.nbHits === 0) {
+ return fallback;
+ }
- if (!indexUiState.query) {
- return fallback
- }
+ return children;
+}
- return children
+/**
+ * Show no results message when search could not find anything
+ *
+ * @return { JSX.Element } NoResults Component
+ *
+ * @since 6.12.4
+ */
+function NoResults() {
+ return (
+
+ {GFPDF.noResultText}
+
+ );
}
-function Hits (props) {
- const { hits } = useHits(props)
+/**
+ * Display documentation search results in groups
+ *
+ * @param { Object } props
+ *
+ * @return { JSX.Element } CustomHits Component
+ *
+ * @since 6.12.4
+ */
+function CustomHits(props) {
+ const { items } = useHits(props);
+
+ /* Group and order the data */
+ const groupedItems = {};
+ items.forEach((hit) => {
+ if (!groupedItems[hit?.hierarchy?.lvl0]) {
+ groupedItems[hit?.hierarchy?.lvl0] = [];
+ }
+
+ groupedItems[hit?.hierarchy?.lvl0].push(hit);
+ });
+
+ return Object.keys(groupedItems)
+ .sort((a, b) => {
+ /* push developer docs after the user docs */
+ if (a.startsWith('Developer') && b.startsWith('User')) {
+ return 1;
+ }
- /* Group into categories */
- const groups = hits.reduce((groups, item) => ({
- ...groups,
- [item.hierarchy.lvl0]: [...(groups[item.hierarchy.lvl0] || []), [item.hierarchy, item.url, item.content]]
- }), {})
+ return 0;
+ })
+ .map((title) => {
+ return (
+
+
{title}
- return
+
+ {groupedItems[title].map((hit) => (
+
+
+ ))}
+
+
+ );
+ });
}
-export default HelpContainer
+export default HelpContainer;
diff --git a/src/assets/js/react/components/Modal/CloseDialog.js b/src/assets/js/react/components/Modal/CloseDialog.js
index a21960078..d294b4a2a 100644
--- a/src/assets/js/react/components/Modal/CloseDialog.js
+++ b/src/assets/js/react/components/Modal/CloseDialog.js
@@ -1,16 +1,15 @@
/* Dependencies */
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
/* Redux actions */
-import { getCustomFontList, clearAddFontMsg } from '../../actions/fontManager'
+import { getCustomFontList, clearAddFontMsg } from '../../actions/fontManager';
/* Utilities */
-import { associatedFontManagerSelectBox } from '../../utilities/FontManager/associatedFontManagerSelectBox'
-import { toggleUpdateFont } from '../../utilities/FontManager/toggleUpdateFont'
+import { associatedFontManagerSelectBox } from '../../utilities/FontManager/associatedFontManagerSelectBox';
+import { toggleUpdateFont } from '../../utilities/FontManager/toggleUpdateFont';
/**
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 6.0
@@ -22,149 +21,163 @@ import { toggleUpdateFont } from '../../utilities/FontManager/toggleUpdateFont'
* @since 6.0
*/
export class CloseDialog extends Component {
- /**
- * PropTypes
- *
- * @since 6.0
- */
- static propTypes = {
- id: PropTypes.string,
- closeRoute: PropTypes.string,
- getCustomFontList: PropTypes.func.isRequired,
- clearAddFontMsg: PropTypes.func.isRequired,
- templateList: PropTypes.arrayOf(PropTypes.object).isRequired,
- fontList: PropTypes.arrayOf(PropTypes.object).isRequired,
- selectedFont: PropTypes.string.isRequired,
- msg: PropTypes.object.isRequired,
- history: PropTypes.object.isRequired
- }
-
- /**
- * Assign keydown listener to document on mount
- *
- * @since 6.0
- */
- componentDidMount () {
- document.addEventListener('keydown', this.handleKeyPress, false)
- }
-
- /**
- * Check for new added template and fetch new fontList to trigger a request of
- * updated font manager select box
- *
- * @param prevProps: object
- *
- * @since 6.0
- */
- componentDidUpdate (prevProps) {
- const { templateList, getCustomFontList } = this.props
-
- if (prevProps.templateList !== templateList) {
- getCustomFontList()
- }
- }
-
- /**
- * Remove keydown listener to document on mount
- *
- * @since 6.0
- */
- componentWillUnmount () {
- document.removeEventListener('keydown', this.handleKeyPress, false)
-
- const { fontList, selectedFont } = this.props
- const tabLocation = window.location.search.substr(window.location.search.lastIndexOf('=') + 1)
-
- /* Ensure associated font manager select box has the latest data */
- if (tabLocation !== 'tools') {
- return associatedFontManagerSelectBox(fontList, selectedFont)
- }
- }
-
- /**
- * Check if Escape key pressed and current event target isn't our search box,
- * or the search box is blank already
- *
- * @param e: object
- *
- * @since 6.0
- */
- handleKeyPress = e => {
- const { id, history, clearAddFontMsg, msg: { success, error } } = this.props
-
- /* Close font manager 'Update Font' column first */
- if (e.keyCode === 27 && id) {
- /* Remove previous msg */
- if ((success && success.addFont) || (error && error.addFont)) {
- clearAddFontMsg()
- }
-
- return toggleUpdateFont(history)
- }
-
- /* Close modal */
- if (e.keyCode === 27 && (e.target.className !== 'wp-filter-search' || e.target.value === '')) {
- this.handleCloseDialog()
- }
- }
-
- /**
- * Close the modal
- *
- * @since 6.0
- */
- handleCloseDialog = () => {
- /* trigger router */
- this.props.history.push(this.props.closeRoute || '/')
- }
-
- /**
- * Display the modal close dialog UI
- *
- * @since 6.0
- */
- render () {
- return (
-
- Close dialog
-
- )
- }
+ /**
+ * PropTypes
+ *
+ * @since 6.0
+ */
+ static propTypes = {
+ id: PropTypes.string,
+ closeRoute: PropTypes.string,
+ getCustomFontList: PropTypes.func.isRequired,
+ clearAddFontMsg: PropTypes.func.isRequired,
+ templateList: PropTypes.arrayOf(PropTypes.object).isRequired,
+ fontList: PropTypes.arrayOf(PropTypes.object).isRequired,
+ selectedFont: PropTypes.string.isRequired,
+ msg: PropTypes.object.isRequired,
+ navigate: PropTypes.func.isRequired,
+ pathname: PropTypes.string.isRequired,
+ };
+
+ /**
+ * Assign keydown listener to document on mount
+ *
+ * @since 6.0
+ */
+ componentDidMount() {
+ document.addEventListener('keydown', this.handleKeyPress, false);
+ }
+
+ /**
+ * Check for new added template and fetch new fontList to trigger a request of
+ * updated font manager select box
+ *
+ * @param { Readonly
} prevProps
+ *
+ * @since 6.0
+ */
+ componentDidUpdate(prevProps) {
+ const { templateList, getCustomFontList: getFonts } = this.props;
+
+ if (prevProps.templateList !== templateList) {
+ getFonts();
+ }
+ }
+
+ /**
+ * Remove keydown listener to document on mount
+ *
+ * @since 6.0
+ */
+ componentWillUnmount() {
+ document.removeEventListener('keydown', this.handleKeyPress, false);
+
+ const { fontList, selectedFont } = this.props;
+ const tabLocation = window.location.search.substring(
+ window.location.search.lastIndexOf('=') + 1
+ );
+
+ /* Ensure associated font manager select box has the latest data */
+ if (tabLocation !== 'tools') {
+ return associatedFontManagerSelectBox(fontList, selectedFont);
+ }
+ }
+
+ /**
+ * Check if Escape key pressed and current event target isn't our search box,
+ * or the search box is blank already
+ *
+ * @param { KeyboardEvent } e
+ *
+ * @since 6.0
+ */
+ handleKeyPress = (e) => {
+ const {
+ id,
+ navigate,
+ pathname,
+ clearAddFontMsg: clear,
+ msg: { success, error },
+ } = this.props;
+
+ /* Close font manager 'Update Font' column first */
+ if (e.keyCode === 27 && id) {
+ /* Remove previous msg */
+ if ((success && success.addFont) || (error && error.addFont)) {
+ clear();
+ }
+
+ return toggleUpdateFont(navigate, '', pathname);
+ }
+
+ /* Close modal */
+ if (
+ e.keyCode === 27 &&
+ (e.target.className !== 'wp-filter-search' || e.target.value === '')
+ ) {
+ this.handleCloseDialog();
+ }
+ };
+
+ /**
+ * Close the modal
+ *
+ * @since 6.0
+ */
+ handleCloseDialog = () => {
+ /* trigger router */
+ this.props.navigate(this.props.closeRoute || '/');
+ };
+
+ /**
+ * Display the modal close dialog UI
+ *
+ * @since 6.0
+ */
+ render() {
+ return (
+
+ {GFPDF.closeDialog}
+
+ );
+ }
}
/**
* Map redux state to props
*
- * @param state: object
+ * @param { Object } state
+ * @param { Object } state.template
+ * @param { Object } state.fontManager
*
- * @returns {{
- * templateList: array of object,
- * fontList: array of object,
+ * @return {{
+ * templateList: Array,
+ * fontList: Array,
* selectedFont: string,
- * msg: object
- * }}
+ * msg: Object
+ * }} mappedState
*
* @since 6.0
*/
-const mapStateToProps = state => ({
- templateList: state.template.list,
- fontList: state.fontManager.fontList,
- selectedFont: state.fontManager.selectedFont,
- msg: state.fontManager.msg
-})
+const mapStateToProps = (state) => ({
+ templateList: state.template.list,
+ fontList: state.fontManager.fontList,
+ selectedFont: state.fontManager.selectedFont,
+ msg: state.fontManager.msg,
+});
/**
* Connect and dispatch redux actions as props
*
* @since 6.0
*/
-export default withRouter(connect(mapStateToProps, {
- getCustomFontList,
- clearAddFontMsg
-})(CloseDialog))
+export default connect(mapStateToProps, {
+ getCustomFontList,
+ clearAddFontMsg,
+})(CloseDialog);
diff --git a/src/assets/js/react/components/ShowMessage.js b/src/assets/js/react/components/ShowMessage.js
index 550f2b2e4..dad065959 100644
--- a/src/assets/js/react/components/ShowMessage.js
+++ b/src/assets/js/react/components/ShowMessage.js
@@ -1,12 +1,12 @@
/* Dependencies */
-import $ from 'jquery'
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import $ from 'jquery';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
/**
* Renders a message or error, with the option to self-clear itself
*
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 4.1
@@ -18,147 +18,147 @@ import PropTypes from 'prop-types'
* @since 4.1
*/
export class ShowMessage extends Component {
- /**
- * Pass the "dismissable" prop to enable auto-clearing
- *
- * @returns {{delay: number, dismissable: boolean}}
- *
- * @since 4.1
- */
- static defaultProps = {
- delay: 4000,
- dismissable: false
- }
-
- /**
- * @since 4.1
- */
- static propTypes = {
- text: PropTypes.string.isRequired,
- error: PropTypes.bool,
- delay: PropTypes.number,
- dismissable: PropTypes.bool,
- dismissableCallback: PropTypes.func
- }
-
- /**
- * @returns {{visible: boolean}}
- *
- * @since 4.1
- */
- state = {
- visible: true
- }
-
- /**
- * On mount, maybe set dismissable timer
- *
- * @since 4.1
- */
- componentDidMount () {
- this.shouldSetTimer()
- }
-
- /**
- * If component did update, call reset state function
- *
- * @param prevProps
- * @param prevState
- *
- * @since 4.1
- */
- componentDidUpdate (prevProps, prevState) {
- if (!prevState.visible) {
- this.resetState()
- }
- }
-
- /**
- * Clear timeout on unmount
- *
- * @since 4.1
- */
- componentWillUnmount () {
- if (this.props.dismissable) {
- clearTimeout(this._timer)
- }
- }
-
- /**
- * Check if we should make the message auto-dismissable
- *
- * @since 4.1
- */
- shouldSetTimer = () => {
- if (this.props.dismissable) {
- this.setTimer()
- }
- }
-
- /**
- * Slide message up after "X" milliseconds (see props.delay)
- * and triggers callback if passed in (see props.dismissableCallback)
- *
- * Also clears the initial timeout if called multiple times before removal
- *
- * @since 4.1
- */
- setTimer = () => {
- // clear any existing timer
- this._timer = this._timer !== null ? clearTimeout(this._timer) : null
-
- // hide after `delay` milliseconds
- this._timer = setTimeout(() => {
- $(this._message)
- .removeClass('inline')
- .slideUp(400, () => {
- $(this._message).removeAttr('style')
- this.setState({ visible: false })
- this._timer = null
-
- if (this.props.dismissableCallback) {
- this.props.dismissableCallback()
- }
- })
- }, this.props.delay)
- }
-
- /**
- * Resets our state and timer
- *
- * @since 4.1
- */
- resetState = () => {
- this.setState({ visible: true })
- this.shouldSetTimer()
- }
-
- /**
- * Renders our message or error
- *
- * @since 4.1
- */
- render () {
- const { text, error } = this.props
-
- let classes = 'notice inline'
-
- if (error) {
- classes = classes + ' error'
- }
-
- return this.state.visible
- ? (
- (this._message = message)}
- className={classes}
- >
-
{text}
-
- }
+ /**
+ * Pass the "dismissable" prop to enable auto-clearing
+ *
+ * @return {{delay: number, dismissable: boolean}}
+ *
+ * @since 4.1
+ */
+ static defaultProps = {
+ delay: 4000,
+ dismissable: false,
+ };
+
+ /**
+ * @since 4.1
+ */
+ static propTypes = {
+ text: PropTypes.string.isRequired,
+ error: PropTypes.bool,
+ delay: PropTypes.number,
+ dismissable: PropTypes.bool,
+ dismissableCallback: PropTypes.func,
+ };
+
+ /**
+ * @return {{visible: boolean}}
+ *
+ * @since 4.1
+ */
+ state = {
+ visible: true,
+ };
+
+ /**
+ * On mount, maybe set dismissable timer
+ *
+ * @since 4.1
+ */
+ componentDidMount() {
+ this.shouldSetTimer();
+ }
+
+ /**
+ * If component did update, call reset state function
+ *
+ * @param { Readonly } prevProps
+ * @param { Readonly } prevState
+ *
+ * @since 4.1
+ */
+ componentDidUpdate(prevProps, prevState) {
+ if (!prevState.visible) {
+ this.resetState();
+ }
+ }
+
+ /**
+ * Clear timeout on unmount
+ *
+ * @since 4.1
+ */
+ componentWillUnmount() {
+ if (this.props.dismissable) {
+ clearTimeout(this._timer);
+ }
+ }
+
+ /**
+ * Check if we should make the message auto-dismissable
+ *
+ * @since 4.1
+ */
+ shouldSetTimer = () => {
+ if (this.props.dismissable) {
+ this.setTimer();
+ }
+ };
+
+ /**
+ * Slide message up after "X" milliseconds (see props.delay)
+ * and triggers callback if passed in (see props.dismissableCallback)
+ *
+ * Also clears the initial timeout if called multiple times before removal
+ *
+ * @since 4.1
+ */
+ setTimer = () => {
+ // clear any existing timer
+ this._timer = this._timer !== null ? clearTimeout(this._timer) : null;
+
+ // hide after `delay` milliseconds
+ this._timer = setTimeout(() => {
+ $(this._message)
+ .removeClass('inline')
+ .slideUp(400, () => {
+ $(this._message).removeAttr('style');
+ this.setState({ visible: false });
+ this._timer = null;
+
+ if (this.props.dismissableCallback) {
+ this.props.dismissableCallback();
+ }
+ });
+ }, this.props.delay);
+ };
+
+ /**
+ * Resets our state and timer
+ *
+ * @since 4.1
+ */
+ resetState = () => {
+ this.setState({ visible: true });
+ this.shouldSetTimer();
+ };
+
+ /**
+ * Renders our message or error
+ *
+ * @since 4.1
+ */
+ render() {
+ const { text, error } = this.props;
+
+ let classes = 'notice inline';
+
+ if (error) {
+ classes = classes + ' error';
+ }
+
+ return this.state.visible ? (
+ (this._message = message)}
+ className={classes}
+ >
+
{text}
+
+ );
+ }
}
-export default ShowMessage
+export default ShowMessage;
diff --git a/src/assets/js/react/components/Spinner.js b/src/assets/js/react/components/Spinner.js
index c47d441e0..201650cc8 100644
--- a/src/assets/js/react/components/Spinner.js
+++ b/src/assets/js/react/components/Spinner.js
@@ -1,9 +1,9 @@
/* Dependencies */
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from 'react';
+import PropTypes from 'prop-types';
/**
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 5.0
@@ -12,14 +12,23 @@ import PropTypes from 'prop-types'
/**
* Display a loading spinner
*
+ * @param { Object } props
+ * @param { string } props.style
+ *
+ * @return { JSX.Element } Spinner Component
+ *
* @since 5.0
*/
const Spinner = ({ style }) => (
-
- {this.props.buttonText}
-
- )
- }
+ /**
+ * @since 4.1
+ */
+ render() {
+ return (
+
+ {this.props.buttonText}
+
+ );
+ }
}
/**
* TemplateActivateButton
* Map actions to props
*
- * @param {func} dispatch Redux dispatcher
+ * @param { Function } dispatch Redux dispatcher
*
- * @returns {{onTemplateSelect: (function(id=string))}}
+ * @return {{ onTemplateSelect: Function }} mapped dispatch
*
* @since 4.1
*/
-export const mapDispatchToProps = dispatch => {
- return {
- onTemplateSelect: id => dispatch(selectTemplate(id))
- }
-}
+export const mapDispatchToProps = (dispatch) => {
+ return {
+ onTemplateSelect: (id) => dispatch(selectTemplate(id)),
+ };
+};
/**
* Maps our Redux store to our React component
*
* @since 4.1
*/
-export default withRouter(connect(null, mapDispatchToProps)(TemplateActivateButton))
+export default connect(null, mapDispatchToProps)(TemplateActivateButton);
diff --git a/src/assets/js/react/components/Template/TemplateButton.js b/src/assets/js/react/components/Template/TemplateButton.js
index a5fc78171..ff8446663 100644
--- a/src/assets/js/react/components/Template/TemplateButton.js
+++ b/src/assets/js/react/components/Template/TemplateButton.js
@@ -1,11 +1,11 @@
/* Dependencies */
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
/**
* Render the button used to option our Fancy PDF template selector
*
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 4.1
@@ -17,45 +17,45 @@ import PropTypes from 'prop-types'
* @since 4.1
*/
class TemplateButton extends Component {
- /**
- * @since 4.1
- */
- static propTypes = {
- history: PropTypes.object
- }
+ /**
+ * @since 4.1
+ */
+ static propTypes = {
+ navigate: PropTypes.func,
+ };
- /**
- * When the button is clicked we'll display the `/template` route
- *
- * @param {Object} e Event
- *
- * @since 4.1
- */
- handleClick = (e) => {
- e.preventDefault()
- e.stopPropagation()
+ /**
+ * When the button is clicked we'll display the `/template` route
+ *
+ * @param {Object} e Event
+ *
+ * @since 4.1
+ */
+ handleClick = (e) => {
+ e.preventDefault();
+ e.stopPropagation();
- this.props.history.push('/template')
- }
+ this.props.navigate('template');
+ };
- /**
- * @since 4.1
- */
- render () {
- return (
- (this.button = node)}
- aria-label={GFPDF.manageTemplates}
- >
- {GFPDF.manage}
-
- )
- }
+ /**
+ * @since 4.1
+ */
+ render() {
+ return (
+ (this.button = node)}
+ aria-label={GFPDF.manageTemplates}
+ >
+ {GFPDF.manage}
+
+ );
+ }
}
-export default TemplateButton
+export default TemplateButton;
diff --git a/src/assets/js/react/components/Template/TemplateContainer.js b/src/assets/js/react/components/Template/TemplateContainer.js
index 292899e3b..271484fd7 100644
--- a/src/assets/js/react/components/Template/TemplateContainer.js
+++ b/src/assets/js/react/components/Template/TemplateContainer.js
@@ -1,117 +1,121 @@
/* Dependencies */
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
/* Components */
-import CloseDialog from '../Modal/CloseDialog'
+import CloseDialog from '../Modal/CloseDialog';
+/* Helpers */
+import withRouterHooks from '../../utilities/withRouterHooks';
/**
* Renders our Advanced Template Selector container which is shared amongst the components
*
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 4.1
*/
+/* Temp fix: Create a HoC to support new react router */
+const CloseDialogWithRouter = withRouterHooks(CloseDialog);
+
/**
* React Component
*
* @since 4.1
*/
export class TemplateContainer extends Component {
- /**
- * @since 4.1
- */
- static propTypes = {
- header: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- footer: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- children: PropTypes.node.isRequired,
- closeRoute: PropTypes.string
- }
+ /**
+ * @since 4.1
+ */
+ static propTypes = {
+ header: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ footer: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ children: PropTypes.node.isRequired,
+ closeRoute: PropTypes.string,
+ };
- /**
- * @since 4.1
- */
- constructor (props) {
- super(props)
- this.handleFocus = this.handleFocus.bind(this)
- }
+ /**
+ * @param { Readonly } props
+ *
+ * @since 4.1
+ */
+ constructor(props) {
+ super(props);
+ this.handleFocus = this.handleFocus.bind(this);
+ }
- /**
- * On mount, add focus event to document option on mount
- * Also, if focus isn't currently applied to the search box we'll apply it
- * to our container to help with tabbing between elements
- *
- * @since 4.1
- */
- componentDidMount () {
- document.addEventListener('focus', this.handleFocus, true)
+ /**
+ * On mount, add focus event to document option on mount
+ * Also, if focus isn't currently applied to the search box we'll apply it
+ * to our container to help with tabbing between elements
+ *
+ * @since 4.1
+ */
+ componentDidMount() {
+ document.addEventListener('focus', this.handleFocus, true);
- /* Add focus if not currently applied to search box */
- if (document.activeElement && document.activeElement.className !== 'wp-filter-search') {
- this.container.focus()
- }
- }
+ /* Add focus if not currently applied to search box */
+ if (this.container.className !== 'wp-filter-search') {
+ this.container.focus();
+ }
+ }
- /**
- * Cleanup our document event listeners
- *
- * @since 4.1
- */
- componentWillUnmount () {
- document.removeEventListener('focus', this.handleFocus, true)
- }
+ /**
+ * Cleanup our document event listeners
+ *
+ * @since 4.1
+ */
+ componentWillUnmount() {
+ document.removeEventListener('focus', this.handleFocus, true);
+ }
- /**
- * When a focus event is fired and it's not apart of any DOM elements in our
- * container we will focus the container instead. In most cases this keeps the focus from
- * jumping outside our Template Container and allows for better keyboard navigation.
- *
- * @param e
- *
- * @since 4.1
- */
- handleFocus (e) {
- if (!this.container.contains(e.target)) {
- e.stopPropagation()
- this.container.focus()
- }
- }
+ /**
+ * When a focus event is fired and it's not apart of any DOM elements in our
+ * container we will focus the container instead. In most cases this keeps the focus from
+ * jumping outside our Template Container and allows for better keyboard navigation.
+ *
+ * @param { Event & { target: InputEvent } } e
+ *
+ * @since 4.1
+ */
+ handleFocus(e) {
+ if (!this.container.contains(e.target)) {
+ e.stopPropagation();
+ this.container.focus();
+ }
+ }
- /**
- * @since 4.1
- */
- render () {
- const header = this.props.header
- const footer = this.props.footer
- const children = this.props.children
- const closeRoute = this.props.closeRoute
+ /**
+ * @since 4.1
+ */
+ render() {
+ const { header, footer, children, closeRoute } = this.props;
- return (
- (this.container = node)}
- tabIndex='140'
- >
-
-
-
- {header}
-
+ return (
+
(this.container = node)}
+ tabIndex="0"
+ >
+
+
+
+ {header}
+
-
- {children}
-
+
+ {children}
+
- {footer}
-
-
- )
- }
+ {footer}
+
+
- {this.props.buttonText}
-
- )
- }
+ /**
+ * @since 4.1
+ */
+ static propTypes = {
+ template: PropTypes.object,
+ addTemplate: PropTypes.func,
+ onTemplateDelete: PropTypes.func,
+ callbackFunction: PropTypes.func,
+ templateProcessing: PropTypes.func,
+ clearTemplateProcessing: PropTypes.func,
+ getTemplateProcessing: PropTypes.string,
+ navigate: PropTypes.func,
+ buttonText: PropTypes.string,
+ templateConfirmDeleteText: PropTypes.string,
+ templateDeleteErrorText: PropTypes.string,
+ };
+
+ /**
+ * If component did update, fires appropriate action based on Redux store data
+ *
+ * @since 4.1
+ */
+ componentDidUpdate() {
+ const { getTemplateProcessing, navigate } = this.props;
+
+ if (getTemplateProcessing === 'success') {
+ navigate('/template');
+ }
+
+ if (getTemplateProcessing === 'failed') {
+ this.ajaxFailed();
+ }
+ }
+
+ /**
+ * Display a confirmation window asking user to verify they want template deleted.
+ *
+ * Once verified, we make an AJAX call to the server requesting template to be deleted.
+ *
+ * Before we receive the response we remove the PDF template automatically and update the
+ * URL to /template. If the AJAX call fails the PDF template gets restored to our list with
+ * an appropriate error message (it feels snapper this way).
+ *
+ * @param {Object} e Event
+ */
+ deleteTemplate = (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ if (window.confirm(this.props.templateConfirmDeleteText)) {
+ /* POST the PDF template to our endpoint for processing */
+ this.props.templateProcessing(this.props.template.id);
+
+ if (this.props.getTemplateProcessing === 'success') {
+ this.props.navigate('/template');
+ }
+
+ this.props.onTemplateDelete(this.props.template.id);
+ }
+ };
+
+ /**
+ * If the server cannot delete the template we re-add the template to our list
+ * and display an appropriate inline error message
+ *
+ * @since 4.1
+ */
+ ajaxFailed = () => {
+ const errorTemplate = {
+ ...this.props.template,
+ error: this.props.templateDeleteErrorText,
+ };
+ this.props.addTemplate(errorTemplate);
+
+ this.props.navigate('/template');
+ this.props.clearTemplateProcessing();
+ };
+
+ /**
+ * @since 4.1
+ */
+ render() {
+ const callback = this.props.callbackFunction
+ ? this.props.callbackFunction
+ : this.deleteTemplate;
+
+ return (
+
+ {this.props.buttonText}
+
+ );
+ }
}
/**
* Map Redux state to props
*
- * @param state
- * @returns {{getTemplateProcessing: String}}
+ * @param { Object } state
+ * @param { Object } state.template
+ *
+ * @return {{ getTemplateProcessing: string }} mapped state
*
* @since 5.2
*/
-const mapStateToProps = state => ({
- getTemplateProcessing: state.template.templateProcessing
-})
+const mapStateToProps = (state) => ({
+ getTemplateProcessing: state.template.templateProcessing,
+});
/**
* Map actions to props
*
- * @param {func} dispatch Redux dispatcher
+ * @param { Function } dispatch Redux dispatcher
*
- * @returns {{addTemplate: (function(template)), onTemplateDelete: (function(id=string)), templateProcessing: (function(templateId=string)), clearTemplateProcessingValue: (function())}}
+ * @return {{
+ * addTemplate: Function,
+ * onTemplateDelete: Function,
+ * templateProcessing: Function,
+ * clearTemplateProcessingValue: Function
+ * }} mapped dispatch
*
* @since 4.1
*/
-export const mapDispatchToProps = dispatch => {
- return {
- addTemplate: (template) => {
- dispatch(addTemplate(template))
- },
-
- onTemplateDelete: (id) => {
- dispatch(deleteTemplate(id))
- },
-
- templateProcessing: (templateId) => {
- dispatch(templateProcessing(templateId))
- },
-
- clearTemplateProcessing: () => {
- dispatch(clearTemplateProcessing())
- }
- }
-}
+export const mapDispatchToProps = (dispatch) => {
+ return {
+ addTemplate: (template) => {
+ dispatch(addTemplate(template));
+ },
+
+ onTemplateDelete: (id) => {
+ dispatch(deleteTemplate(id));
+ },
+
+ templateProcessing: (templateId) => {
+ dispatch(templateProcessing(templateId));
+ },
+
+ clearTemplateProcessing: () => {
+ dispatch(clearTemplateProcessing());
+ },
+ };
+};
/**
* Maps our Redux store to our React component
*
* @since 4.1
*/
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TemplateDeleteButton))
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(TemplateDeleteButton);
diff --git a/src/assets/js/react/components/Template/TemplateFooterActions.js b/src/assets/js/react/components/Template/TemplateFooterActions.js
index c9c0311b5..4d157d23d 100644
--- a/src/assets/js/react/components/Template/TemplateFooterActions.js
+++ b/src/assets/js/react/components/Template/TemplateFooterActions.js
@@ -1,15 +1,17 @@
/* Dependencies */
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
/* Components */
-import TemplateActivateButton from './TemplateActivateButton'
-import TemplateDeleteButton from './TemplateDeleteButton'
+import TemplateActivateButton from './TemplateActivateButton';
+import TemplateDeleteButton from './TemplateDeleteButton';
+/* Helpers */
+import withRouterHooks from '../../utilities/withRouterHooks';
/**
* Renders the template footer actions that get displayed on the
* /template/:id pages.
*
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 4.1
@@ -21,70 +23,76 @@ import TemplateDeleteButton from './TemplateDeleteButton'
* @since 4.1
*/
export class TemplateFooterActions extends Component {
- /**
- * @since 4.1
- */
- static propTypes = {
- template: PropTypes.object.isRequired,
- isActiveTemplate: PropTypes.bool,
- ajaxUrl: PropTypes.string,
- ajaxNonce: PropTypes.string,
- activateText: PropTypes.string,
- pdfWorkingDirPath: PropTypes.string,
- templateDeleteText: PropTypes.string,
- templateConfirmDeleteText: PropTypes.string,
- templateDeleteErrorText: PropTypes.string
- }
+ /**
+ * @since 4.1
+ */
+ static propTypes = {
+ template: PropTypes.object.isRequired,
+ isActiveTemplate: PropTypes.bool,
+ ajaxUrl: PropTypes.string,
+ ajaxNonce: PropTypes.string,
+ activateText: PropTypes.string,
+ pdfWorkingDirPath: PropTypes.string,
+ templateDeleteText: PropTypes.string,
+ templateConfirmDeleteText: PropTypes.string,
+ templateDeleteErrorText: PropTypes.string,
+ };
- /**
- * Check if the current PDF template is a core template or not (i.e is shipped with Gravity PDF)
- *
- * @param {Object} template
- *
- * @returns {boolean}
- *
- * @since 4.1
- */
- notCoreTemplate = (template) => {
- return template.path.indexOf(this.props.pdfWorkingDirPath) !== -1
- }
+ /**
+ * Check if the current PDF template is a core template or not (i.e is shipped with Gravity PDF)
+ *
+ * @param { Object } template
+ *
+ * @return { boolean } conditional value
+ *
+ * @since 4.1
+ */
+ notCoreTemplate = (template) => {
+ return template.path.indexOf(this.props.pdfWorkingDirPath) !== -1;
+ };
- /**
- * @since 4.1
- */
- render () {
- const template = this.props.template
- const isCompatible = template.compatible
+ /**
+ * @since 4.1
+ */
+ render() {
+ const template = this.props.template;
+ const isCompatible = template.compatible;
- return (
-
- {!this.props.isActiveTemplate && isCompatible
- ? (
-
- )
- : null}
+ return (
+
+ {!this.props.isActiveTemplate && isCompatible ? (
+
- )
- }
+ {!this.props.isActiveTemplate &&
+ this.notCoreTemplate(template) ? (
+
+ ) : null}
+
-
-
- {this.props.showPreviousTemplateText}
-
-
-
-
-
- {this.props.showNextTemplateText}
-
-
-
- )
- }
+ /**
+ * @since 4.1
+ */
+ static propTypes = {
+ templates: PropTypes.array.isRequired,
+ templateIndex: PropTypes.number.isRequired,
+ navigate: PropTypes.func,
+ isFirst: PropTypes.bool,
+ isLast: PropTypes.bool,
+ showPreviousTemplateText: PropTypes.string,
+ showNextTemplateText: PropTypes.string,
+ };
+
+ /**
+ * Add window event listeners
+ *
+ * @since 4.1
+ */
+ componentDidMount() {
+ window.addEventListener('keydown', this.handleKeyPress, false);
+ }
+
+ /**
+ * Cleanup window event listeners
+ *
+ * @since 4.1
+ */
+ componentWillUnmount() {
+ window.removeEventListener('keydown', this.handleKeyPress, false);
+ }
+
+ /**
+ * Attempt to get the previous template in our list and update the URL
+ *
+ * @param {Object} e Event
+ *
+ * @since 4.1
+ */
+ handlePreviousTemplate = (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const prevId = this.props.templates[this.props.templateIndex - 1].id;
+
+ if (prevId) {
+ this.props.navigate('/template/' + prevId);
+ }
+ };
+
+ /**
+ * Attempt to get the next template in our list and update the URL
+ *
+ * @param {Object} e Event
+ *
+ * @since 4.1
+ */
+ handleNextTemplate = (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const nextId = this.props.templates[this.props.templateIndex + 1].id;
+
+ if (nextId) {
+ this.props.navigate('/template/' + nextId);
+ }
+ };
+
+ /**
+ * Checks if the Left or Right arrow keys are pressed and fires appropriate functions
+ *
+ * @param {Object} e Event
+ *
+ * @since 4.1
+ */
+ handleKeyPress = (e) => {
+ /* Left Arrow */
+ if (!this.props.isFirst && e.keyCode === 37) {
+ this.handlePreviousTemplate(e);
+ }
+
+ /* Right Arrow */
+ if (!this.props.isLast && e.keyCode === 39) {
+ this.handleNextTemplate(e);
+ }
+ };
+
+ /**
+ * @since 4.1
+ */
+ render() {
+ /*
+ * Work our the correct classes and attributes for our left and right arrows
+ * based on if we are currently showing the first or last templates
+ */
+ const isFirst = this.props.isFirst;
+ const isLast = this.props.isLast;
+
+ const prevClass = isFirst
+ ? 'dashicons dashicons-no left disabled'
+ : 'dashicons dashicons-no left';
+ const nextClass = isLast
+ ? 'dashicons dashicons-no right disabled'
+ : 'dashicons dashicons-no right';
+
+ const leftDisabled = isFirst ? 'disabled' : '';
+ const rightDisabled = isLast ? 'disabled' : '';
+
+ return (
+
+
+
+ {this.props.showPreviousTemplateText}
+
+
+
+
+
+ {this.props.showNextTemplateText}
+
+
+
+ );
+ }
}
/**
* Map state to props
*
- * @param {Object} state The current Redux State
- * @param {Object} props The current React props
+ * @param { Object } state The current Redux State
+ * @param { Object } props The current React props
*
- * @returns {{isFirst: boolean, isLast: boolean}}
+ * @return {{ isFirst: boolean, isLast: boolean }} mapped state
*
* @since 4.1
*/
const MapStateToProps = (state, props) => {
- /* Check if the current template is the first or last in our templates */
- const templates = props.templates
- const currentTemplateId = props.template.id
- const lastTemplate = templates.length - 1
- const first = templates[0].id
- const last = templates[lastTemplate].id
-
- return {
- isFirst: first === currentTemplateId,
- isLast: last === currentTemplateId
- }
-}
+ /* Check if the current template is the first or last in our templates */
+ const templates = props.templates;
+ const currentTemplateId = props.template.id;
+ const lastTemplate = templates.length - 1;
+ const first = templates[0].id;
+ const last = templates[lastTemplate].id;
+
+ return {
+ isFirst: first === currentTemplateId,
+ isLast: last === currentTemplateId,
+ };
+};
/**
* Maps our Redux store to our React component
*
* @since 4.1
*/
-export default withRouter(connect(MapStateToProps)(TemplateHeaderNavigation))
+export default connect(MapStateToProps)(TemplateHeaderNavigation);
diff --git a/src/assets/js/react/components/Template/TemplateHeaderTitle.js b/src/assets/js/react/components/Template/TemplateHeaderTitle.js
index 87eb4a05e..970f88897 100644
--- a/src/assets/js/react/components/Template/TemplateHeaderTitle.js
+++ b/src/assets/js/react/components/Template/TemplateHeaderTitle.js
@@ -1,11 +1,11 @@
/* Dependencies */
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from 'react';
+import PropTypes from 'prop-types';
/**
* Renders the Template Header Title
*
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 4.1
@@ -14,17 +14,22 @@ import PropTypes from 'prop-types'
/**
* React Component
*
+ * @param { Object } props
+ * @param { string } props.header
+ *
+ * @return { JSX.Element } TemplateHeaderTitle Component
+ *
* @since 4.1
*/
const TemplateHeaderTitle = ({ header }) => (
- {header}
-)
+ {header}
+);
/**
* @since 4.1
*/
TemplateHeaderTitle.propTypes = {
- header: PropTypes.string
-}
+ header: PropTypes.string,
+};
-export default TemplateHeaderTitle
+export default TemplateHeaderTitle;
diff --git a/src/assets/js/react/components/Template/TemplateList.js b/src/assets/js/react/components/Template/TemplateList.js
index 0ce13b5bc..7b8bf3452 100644
--- a/src/assets/js/react/components/Template/TemplateList.js
+++ b/src/assets/js/react/components/Template/TemplateList.js
@@ -1,125 +1,137 @@
/* Dependencies */
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
/* Components */
-import TemplateContainer from './TemplateContainer'
-import TemplateListItem from './TemplateListItem'
-import TemplateSearch from './TemplateSearch'
-import TemplateHeaderTitle from './TemplateHeaderTitle'
-import TemplateUploader from './TemplateUploader'
+import TemplateContainer from './TemplateContainer';
+import TemplateListItem from './TemplateListItem';
+import TemplateSearch from './TemplateSearch';
+import TemplateHeaderTitle from './TemplateHeaderTitle';
+import TemplateUploader from './TemplateUploader';
/* Selectors */
-import getTemplates from '../../selectors/getTemplates'
+import getTemplates from '../../selectors/getTemplates';
+/* Helpers */
+import withRouterHooks from '../../utilities/withRouterHooks';
/**
* The master component for rendering the all PDF templates as a list
*
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 4.1
*/
+/* Temp fix: Create a HoC to support new react router */
+const TemplateListItemWithRouter = withRouterHooks(TemplateListItem);
+
/**
* React Component
*
* @since 4.1
*/
export class TemplateList extends Component {
- /**
- * @since 4.1
- */
- static propTypes = {
- templateHeaderText: PropTypes.string,
- templates: PropTypes.array,
- templateDetailsText: PropTypes.string,
- activateText: PropTypes.string,
- ajaxUrl: PropTypes.string,
- ajaxNonce: PropTypes.string,
- addTemplateText: PropTypes.string,
- genericUploadErrorText: PropTypes.string,
- filenameErrorText: PropTypes.string,
- filesizeErrorText: PropTypes.string,
- installSuccessText: PropTypes.string,
- installUpdatedText: PropTypes.string,
- templateSuccessfullyInstalledUpdated: PropTypes.string,
- templateInstallInstructions: PropTypes.string
- }
-
- /**
- * @since 4.1
- */
- render () {
- const hasUserPrivs = GFPDF.userCapabilities.administrator || GFPDF.userCapabilities.gravityforms_edit_settings || false
+ /**
+ * @since 4.1
+ */
+ static propTypes = {
+ templateHeaderText: PropTypes.string,
+ templates: PropTypes.array,
+ templateDetailsText: PropTypes.string,
+ activateText: PropTypes.string,
+ ajaxUrl: PropTypes.string,
+ ajaxNonce: PropTypes.string,
+ addTemplateText: PropTypes.string,
+ genericUploadErrorText: PropTypes.string,
+ filenameErrorText: PropTypes.string,
+ filesizeErrorText: PropTypes.string,
+ installSuccessText: PropTypes.string,
+ installUpdatedText: PropTypes.string,
+ templateSuccessfullyInstalledUpdated: PropTypes.string,
+ templateInstallInstructions: PropTypes.string,
+ };
- return (
-
- {
- this.props.templates.map((value, index) => {
- return (
-
- )
- })
- }
+ /**
+ * @since 4.1
+ */
+ render() {
+ const hasUserPrivs =
+ GFPDF.userCapabilities.administrator ||
+ GFPDF.userCapabilities.gravityforms_edit_settings ||
+ false;
- {
- hasUserPrivs &&
-
- }
+ return (
+
+ }
+ closeRoute="/"
+ >
+
+
+ {this.props.templates?.map((value, index) => {
+ return (
+
-
- )
- }
+ {hasUserPrivs && (
+
+ )}
+
} state The current Redux State
*
- * @returns {{templates}}
+ * @return {{ templates }} mapped state
*
* @since 4.1
*/
const mapStateToProps = (state) => {
- return {
- templates: getTemplates(state)
- }
-}
+ return {
+ templates: getTemplates(state),
+ };
+};
/**
* Maps our Redux store to our React component
*
* @since 4.1
*/
-export default connect(mapStateToProps)(TemplateList)
+export default connect(mapStateToProps)(TemplateList);
diff --git a/src/assets/js/react/components/Template/TemplateListItem.js b/src/assets/js/react/components/Template/TemplateListItem.js
index be0650401..093469e7e 100644
--- a/src/assets/js/react/components/Template/TemplateListItem.js
+++ b/src/assets/js/react/components/Template/TemplateListItem.js
@@ -1,21 +1,22 @@
/* Dependencies */
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
/* Components */
-import TemplateScreenshot from './TemplateScreenshot'
-import ShowMessage from '../ShowMessage'
-import { TemplateDetails, Group } from './TemplateListItemComponents'
-import { Name } from './TemplateSingleComponents'
-import TemplateActivateButton from './TemplateActivateButton'
+import TemplateScreenshot from './TemplateScreenshot';
+import ShowMessage from '../ShowMessage';
+import { TemplateDetails, Group } from './TemplateListItemComponents';
+import { Name } from './TemplateSingleComponents';
+import TemplateActivateButton from './TemplateActivateButton';
/* Redux actions */
-import { updateTemplateParam } from '../../actions/templates'
+import { updateTemplateParam } from '../../actions/templates';
+/* Helpers */
+import withRouterHooks from '../../utilities/withRouterHooks';
/**
* Display the individual template item for usage our template list
*
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 4.1
@@ -27,155 +28,155 @@ import { updateTemplateParam } from '../../actions/templates'
* @since 4.1
*/
export class TemplateListItem extends Component {
- /**
- * @since 4.1
- */
- static propTypes = {
- history: PropTypes.object,
- template: PropTypes.object,
- activeTemplate: PropTypes.string,
- updateTemplateParam: PropTypes.func,
- activateText: PropTypes.string,
- templateDetailsText: PropTypes.string
- }
+ /**
+ * @since 4.1
+ */
+ static propTypes = {
+ navigate: PropTypes.func,
+ template: PropTypes.object,
+ activeTemplate: PropTypes.string,
+ updateTemplateParam: PropTypes.func,
+ activateText: PropTypes.string,
+ templateDetailsText: PropTypes.string,
+ };
- /**
- * Check if the Enter key is pressed and not focused on a button
- * then display the template details page
- *
- * @param {Object} e Event
- *
- * @since 4.1
- */
- handleMaybeShowDetailedTemplate = (e) => {
- /* Show detailed template when the Enter key is pressed and the active element doesn't include a 'button' class */
- if (e.keyCode === 13 && (e.target.className.indexOf('button') === -1)) {
- this.handleShowDetailedTemplate()
- }
- }
+ /**
+ * Check if the Enter key is pressed and not focused on a button
+ * then display the template details page
+ *
+ * @param {Object} e Event
+ *
+ * @since 4.1
+ */
+ handleMaybeShowDetailedTemplate = (e) => {
+ /* Show detailed template when the Enter key is pressed and the active element doesn't include a 'button' class */
+ if (e.keyCode === 13 && e.target.className.indexOf('button') === -1) {
+ this.handleShowDetailedTemplate();
+ }
+ };
- /**
- * Update the URL to show the PDF template details page
- *
- * @since 4.1
- */
- handleShowDetailedTemplate = () => {
- this.props.history.push('/template/' + this.props.template.id)
- }
+ /**
+ * Update the URL to show the PDF template details page
+ *
+ * @since 4.1
+ */
+ handleShowDetailedTemplate = () => {
+ this.props.navigate('/template/' + this.props.template.id);
+ };
- /**
- * Call Redux action to remove any stored messages for this template
- *
- * @since 4.1
- */
- removeMessage = () => {
- this.props.updateTemplateParam(this.props.template.id, 'message', null)
- }
+ /**
+ * Call Redux action to remove any stored messages for this template
+ *
+ * @since 4.1
+ */
+ removeMessage = () => {
+ this.props.updateTemplateParam(this.props.template.id, 'message', null);
+ };
- /**
- * @since 4.1
- */
- render () {
- const item = this.props.template
- const isActiveTemplate = this.props.activeTemplate === item.id
- const isCompatible = item.compatible
- const activeTemplate = (isActiveTemplate) ? 'active theme' : 'theme'
+ /**
+ * @since 4.1
+ */
+ render() {
+ const item = this.props.template;
+ const isActiveTemplate = this.props.activeTemplate === item.id;
+ const isCompatible = item.compatible;
+ const activeTemplate = isActiveTemplate ? 'active theme' : 'theme';
- return (
-
+ return (
+
+
+ {item.error ? (
+
+ ) : null}
+ {item.message ? (
+
+ ) : null}
-
- {item.error
- ? (
-
- )
- : null}
- {item.message
- ? (
-
- )
- : null}
+
+
+
-
-
-
-
-
- {!isActiveTemplate && isCompatible
- ? (
-
-
- )
- }
+
+ {!isActiveTemplate && isCompatible ? (
+
+
} state The current Redux State
+ * @param { Object } state.template
*
- * @returns {{activeTemplate: string}}
+ * @return {{ activeTemplate: string }} mapped state
*
* @since 4.1
*/
const mapStateToProps = (state) => {
- return {
- activeTemplate: state.template.activeTemplate
- }
-}
+ return {
+ activeTemplate: state.template.activeTemplate,
+ };
+};
/**
* Map actions to props
*
- * @param {func} dispatch Redux dispatcher
+ * @param { Function } dispatch Redux dispatcher
*
- * @returns {{updateTemplateParam: (function(id=string, name=string, value=string))}}
+ * @return {{ updateTemplateParam: Function }} mapped dispatch
*
* @since 4.1
*/
export const mapDispatchToProps = (dispatch) => {
- return {
- updateTemplateParam: (id, name, value) => {
- dispatch(updateTemplateParam(id, name, value))
- }
- }
-}
+ return {
+ updateTemplateParam: (id, name, value) => {
+ dispatch(updateTemplateParam(id, name, value));
+ },
+ };
+};
/**
* Maps our Redux store to our React component
*
* @since 4.1
*/
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TemplateListItem))
+export default connect(mapStateToProps, mapDispatchToProps)(TemplateListItem);
diff --git a/src/assets/js/react/components/Template/TemplateListItemComponents.js b/src/assets/js/react/components/Template/TemplateListItemComponents.js
index 93bc86035..ed706b9b0 100644
--- a/src/assets/js/react/components/Template/TemplateListItemComponents.js
+++ b/src/assets/js/react/components/Template/TemplateListItemComponents.js
@@ -1,11 +1,11 @@
/* Dependencies */
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from 'react';
+import PropTypes from 'prop-types';
/**
* Contains stateless React components for our Template List Items
*
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 4.1
@@ -16,33 +16,41 @@ import PropTypes from 'prop-types'
*
* Display the Template Details hover
*
- * @param label (string)
- * @returns {*}
+ * @param { Object } props
+ * @param { string } props.label
+ *
+ * @return { JSX.Element } TemplateDetails Component
*
* @since 4.1
*/
export const TemplateDetails = ({ label }) => (
- {label}
-)
+
+ {label}
+
+);
TemplateDetails.propTypes = {
- label: PropTypes.string
-}
+ label: PropTypes.string,
+};
/**
* React Stateless Component
*
* Display the template group
*
- * @param group (string)
- * @returns {*}
+ * @param { Object } props
+ * @param { string } props.group
+ *
+ * @return { JSX.Element } GroupComponent
*
* @since 4.1
*/
export const Group = ({ group }) => (
- {group}
-)
+
+ {group}
+
+);
Group.propTypes = {
- group: PropTypes.string
-}
+ group: PropTypes.string,
+};
diff --git a/src/assets/js/react/components/Template/TemplateScreenshot.js b/src/assets/js/react/components/Template/TemplateScreenshot.js
index ba930f9ae..ef0d83448 100644
--- a/src/assets/js/react/components/Template/TemplateScreenshot.js
+++ b/src/assets/js/react/components/Template/TemplateScreenshot.js
@@ -1,11 +1,11 @@
/* Dependencies */
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from 'react';
+import PropTypes from 'prop-types';
/**
* Display the Template Screenshot for the List Items
*
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 4.1
@@ -14,20 +14,25 @@ import PropTypes from 'prop-types'
/**
* React Stateless Component
*
+ * @param { Object } props
+ * @param { string } props.image
+ *
+ * @return { JSX.Element } TemplateScreenshot Component
+ *
* @since 4.1
*/
const TemplateScreenshot = ({ image }) => {
- const className = (image) ? 'theme-screenshot' : 'theme-screenshot blank'
+ const className = image ? 'theme-screenshot' : 'theme-screenshot blank';
- return (
-
- {image ?
: null}
-
+ {image ?
: null}
+
-
- {image ?
: null}
-
-
+
+ {image ?
: null}
+
+
} props
+ *
+ * @since 4.1
+ */
+ constructor(props) {
+ super(props);
- this.runSearch = debounce(this.runSearch, 200)
- }
+ this.runSearch = debounce(this.runSearch, 200);
+ }
- /**
- * On mount, add focus to the search box
- *
- * @since 4.1
- */
- componentDidMount () {
- /* add focus to element */
- this.input.focus()
- }
+ /**
+ * On mount, add focus to the search box
+ *
+ * @since 4.1
+ */
+ componentDidMount() {
+ /* add focus to element */
+ this.input.focus();
+ }
- /**
- * Handles our search event
- *
- * Because ReactJS pools SyntheticEvent and we delay the search with debounce we need
- * to ensure the event is persisted (see https://facebook.github.io/react/docs/events.html#event-pooling)
- *
- * @param {Object} e Event
- *
- * @since 4.1
- */
- handleSearch = (e) => {
- e.persist()
- this.runSearch(e)
- }
+ /**
+ * Handles our search event
+ *
+ * Because ReactJS pools SyntheticEvent and we delay the search with debounce we need
+ * to ensure the event is persisted (see https://facebook.github.io/react/docs/events.html#event-pooling)
+ *
+ * @param {Object} e Event
+ *
+ * @since 4.1
+ */
+ handleSearch = (e) => {
+ e.persist();
+ this.runSearch(e);
+ };
- /**
- * Update our Redux store with the search value
- *
- * @param {Object} e Event
- *
- * @since 4.1
- */
- runSearch = (e) => {
- this.props.onSearch(e.target.value || '')
- }
+ /**
+ * Update our Redux store with the search value
+ *
+ * @param {Object} e Event
+ *
+ * @since 4.1
+ */
+ runSearch = (e) => {
+ this.props.onSearch(e.target.value || '');
+ };
- /**
- * @since 4.1
- */
- render () {
- return (
-
-
- )
- }
+ /**
+ * @since 4.1
+ */
+ render() {
+ return (
+
+
+ );
+ }
}
/**
* Map state to props
*
- * @param {Object} state The current Redux State
+ * @param { Object } state The current Redux State
+ * @param { Object } state.template
*
- * @returns {{search: string}}
+ * @return {{ search: string }} mapped state
*
* @since 4.1
*/
-const mapStateToProps = (state) => {
- return {
- search: state.template.search
- }
-}
+export const mapStateToProps = (state) => {
+ return {
+ search: state.template.search,
+ };
+};
/**
* Map actions to props
*
- * @param {func} dispatch Redux dispatcher
+ * @param { Function } dispatch Redux dispatcher
*
- * @returns {{onSearch: (function(text=string))}}
+ * @return {{ onSearch: Function }} mapped dispatch
*
* @since 4.1
*/
export const mapDispatchToProps = (dispatch) => {
- return {
- onSearch: (text) => {
- dispatch(searchTemplates(text))
- }
- }
-}
+ return {
+ onSearch: (text) => {
+ dispatch(searchTemplates(text));
+ },
+ };
+};
/**
* Maps our Redux store to our React component
*
* @since 4.1
*/
-export default connect(mapStateToProps, mapDispatchToProps)(TemplateSearch)
+export default connect(mapStateToProps, mapDispatchToProps)(TemplateSearch);
diff --git a/src/assets/js/react/components/Template/TemplateSingle.js b/src/assets/js/react/components/Template/TemplateSingle.js
index ec4988af8..120a1169e 100644
--- a/src/assets/js/react/components/Template/TemplateSingle.js
+++ b/src/assets/js/react/components/Template/TemplateSingle.js
@@ -1,28 +1,30 @@
/* Dependencies */
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
/* Components */
-import TemplateContainer from './TemplateContainer'
-import TemplateHeaderNavigation from './TemplateHeaderNavigation'
-import TemplateFooterActions from './TemplateFooterActions'
-import TemplateScreenshots from './TemplateScreenshots'
-import ShowMessage from '../ShowMessage'
+import TemplateContainer from './TemplateContainer';
+import TemplateHeaderNavigation from './TemplateHeaderNavigation';
+import TemplateFooterActions from './TemplateFooterActions';
+import TemplateScreenshots from './TemplateScreenshots';
+import ShowMessage from '../ShowMessage';
import {
- CurrentTemplate,
- Name,
- Author,
- Group,
- Description,
- Tags
-} from './TemplateSingleComponents'
+ CurrentTemplate,
+ Name,
+ Author,
+ Group,
+ Description,
+ Tags,
+} from './TemplateSingleComponents';
/* Selectors */
-import getTemplates from '../../selectors/getTemplates'
+import getTemplates from '../../selectors/getTemplates';
+/* Helpers */
+import withRouterHooks from '../../utilities/withRouterHooks';
/**
* Renders a single PDF template, which get displayed on the /template/:id page.
*
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 4.1
@@ -34,153 +36,157 @@ import getTemplates from '../../selectors/getTemplates'
* @since 4.1
*/
export class TemplateSingle extends Component {
- /**
- * @since 4.1
- */
- static propTypes = {
- template: PropTypes.object,
- activeTemplate: PropTypes.string,
- templateIndex: PropTypes.number,
- templates: PropTypes.array,
- showPreviousTemplateText: PropTypes.string,
- showNextTemplateText: PropTypes.string,
- ajaxUrl: PropTypes.string,
- ajaxNonce: PropTypes.string,
- activateText: PropTypes.string,
- pdfWorkingDirPath: PropTypes.string,
- templateDeleteText: PropTypes.string,
- templateConfirmDeleteText: PropTypes.string,
- templateDeleteErrorText: PropTypes.string,
- currentTemplateText: PropTypes.string,
- versionText: PropTypes.string,
- groupText: PropTypes.string,
- tagsText: PropTypes.string
- }
+ /**
+ * @since 4.1
+ */
+ static propTypes = {
+ template: PropTypes.object,
+ activeTemplate: PropTypes.string,
+ templateIndex: PropTypes.number,
+ templates: PropTypes.array,
+ showPreviousTemplateText: PropTypes.string,
+ showNextTemplateText: PropTypes.string,
+ ajaxUrl: PropTypes.string,
+ ajaxNonce: PropTypes.string,
+ activateText: PropTypes.string,
+ pdfWorkingDirPath: PropTypes.string,
+ templateDeleteText: PropTypes.string,
+ templateConfirmDeleteText: PropTypes.string,
+ templateDeleteErrorText: PropTypes.string,
+ currentTemplateText: PropTypes.string,
+ versionText: PropTypes.string,
+ groupText: PropTypes.string,
+ tagsText: PropTypes.string,
+ };
- /**
- * Ensure the component doesn't try and re-render when a template isn't found
- *
- * @param nextProps
- *
- * @Internal This problem seems to be prevelant due to a race condition when deleting a template and updating the URL
- *
- * @since 4.2
- */
- shouldComponentUpdate (nextProps) {
- if (nextProps.template == null) {
- return false
- }
+ /**
+ * Ensure the component doesn't try and re-render when a template isn't found.
+ * This problem seems to be prevelant due to a race condition when deleting a template and updating the URL
+ *
+ * @param { Readonly } nextProps
+ *
+ * @since 4.2
+ */
+ shouldComponentUpdate(nextProps) {
+ return !!nextProps.template;
+ }
- return true
- }
+ /**
+ * @since 4.1
+ */
+ render() {
+ const item = this.props.template;
+ const isCurrentTemplate = this.props.activeTemplate === item.id;
- /**
- * @since 4.1
- */
- render () {
- const item = this.props.template
- const isCurrentTemplate = this.props.activeTemplate === item.id
-
- /* Display our Single Template container */
- return (
-
-
-
-
-
-
-
- {item.long_message
- ? (
-
- )
- : null}
- {item.long_error
- ? (
-
- )
- : null}
-
-
-
-
+
+
+
+
+
+
+ {item.long_message ? (
+
+ ) : null}
+ {item.long_error ? (
+
+ ) : null}
+
+
+
+
- {label}
-
- )
- : (
-
+ {label}
+
+ ) : (
+
- {name}
+
+ {name}
-
-)
+
+);
Name.propTypes = {
- name: PropTypes.string,
- version: PropTypes.string,
- versionLabel: PropTypes.string
-}
+ name: PropTypes.string,
+ version: PropTypes.string,
+ versionLabel: PropTypes.string,
+};
/**
* React Stateless Component
*
* Display the template version number
*
+ * @param { Object } props
+ * @param { string } props.label
+ * @param { string } props.version
+ *
+ * @return { JSX.Element } Version Component
+ *
* @since 4.1
*/
export const Version = ({ label, version }) => {
- return (version)
- ? (
- {label}: {version}
- )
- : (
-
+ {label}: {version}
+
+ ) : (
+
-
- {author}
-
-
- )
- } else {
- return (
-
- {author}
-
- )
- }
-}
+ if (uri) {
+ return (
+
+ {author}
+
+ );
+ }
+ return (
+
+ {author}
+
+ );
+};
Author.propTypes = {
- author: PropTypes.string,
- uri: PropTypes.string
-}
+ author: PropTypes.string,
+ uri: PropTypes.string,
+};
/**
* React Stateless Component
*
* Display the template group
*
+ * @param { Object } props
+ * @param { string } props.label
+ * @param { string } props.group
+ *
+ * @return { JSX.Element } Group Component
+ *
* @since 4.1
*/
export const Group = ({ label, group }) => (
-
- {label}: {group}
-
-)
+
+
+ {label}: {group}
+
+
+);
Group.propTypes = {
- label: PropTypes.string,
- group: PropTypes.string
-}
+ label: PropTypes.string,
+ group: PropTypes.string,
+};
/**
* React Stateless Component
*
* Display the template description
*
+ * @param { Object } props
+ * @param { string } props.desc
+ *
+ * @return { JSX.Element } Description Component
+ *
* @since 4.1
*/
export const Description = ({ desc }) => (
-
- {desc}
-
-)
+
+ {desc}
+
+);
Description.propTypes = {
- desc: PropTypes.string
-}
+ desc: PropTypes.string,
+};
/**
* React Stateless Component
*
* Display the template tags
*
+ * @param { Object } props
+ * @param { string } props.label
+ * @param { string } props.tags
+ *
+ * @return { JSX.Element } Tags Component
+ *
* @since 4.1
*/
export const Tags = ({ label, tags }) => {
- return (tags)
- ? (
-
- {label}: {tags}
-
- )
- : (
-
+ {label}: {tags}
+
+ ) : (
+
-
- {({ getRootProps, getInputProps, isDragActive }) => {
- return (
-
- )
- }}
-
-
} acceptedFiles The array of uploaded files we should send to the server
+ *
+ * @since 4.1
+ */
+ handleOndrop = (acceptedFiles) => {
+ /* Handle file upload and pass in an nonce!!! */
+ if (acceptedFiles instanceof Array && acceptedFiles.length > 0) {
+ acceptedFiles.forEach((file) => {
+ const filename = file.name;
+
+ /* Do validation */
+ if (
+ !this.checkFilename(filename) ||
+ !this.checkFilesize(file.size)
+ ) {
+ return;
+ }
+
+ /* Add our loader */
+ this.setState({
+ ajax: true,
+ error: '',
+ message: '',
+ });
+
+ /* POST the PDF template to our endpoint for processing */
+ this.props.postTemplateUploadProcessing(file, filename);
+ });
+ }
+ };
+
+ /**
+ * Checks if the uploaded file has a .zip extension
+ * We do this instead of mime type checking as it doesn't work in all browsers
+ *
+ * @param { string } name
+ *
+ * @return { boolean } conditional value
+ *
+ * @since 4.1
+ */
+ checkFilename = (name) => {
+ if (name.substr(name.length - 4) !== '.zip') {
+ /* Tell use about incorrect file type */
+ this.setState({
+ error: this.props.filenameErrorText,
+ });
+
+ return false;
+ }
+
+ return true;
+ };
+
+ /**
+ * Checks if the file size is larger than 5MB
+ *
+ * @param { number } size File size in bytes
+ *
+ * @return { boolean } conditional value
+ *
+ * @since 4.1
+ */
+ checkFilesize = (size) => {
+ /* Check the file is no larger than 10MB (convert from bytes to KB) */
+ if (size / 1024 > 10240) {
+ /* Tell use about incorrect file type */
+ this.setState({
+ error: this.props.filesizeErrorText,
+ });
+
+ return false;
+ }
+
+ return true;
+ };
+
+ /**
+ * Update our Redux store with the new PDF template details
+ * If our upload AJAX call to the server passed this function gets fired
+ *
+ * @param { Object } response
+ *
+ * @since 4.1
+ */
+ ajaxSuccess = (response) => {
+ /* Update our Redux Store with the new template(s) */
+ response.templates.forEach((template) => {
+ /* Check if template already in the list before adding to our store */
+ const matched = this.props.templates.find((item) => {
+ return item.id === template.id;
+ });
+
+ if (matched === undefined) {
+ template.new = true; // ensure new templates go to end of list
+ template.message = this.props.installSuccessText;
+ this.props.addNewTemplate(template);
+ } else {
+ this.props.updateTemplateParam(
+ template.id,
+ 'message',
+ this.props.installUpdatedText
+ );
+ }
+ });
+
+ /* Mark as success and stop AJAX spinner */
+ this.setState({
+ ajax: false,
+ message: this.props.templateSuccessfullyInstalledUpdated,
+ });
+
+ /* Clean/Reset our Redux Store state for templateUploadProcessing */
+ this.props.clearTemplateUploadProcessing();
+ };
+
+ /**
+ * Show any errors to the user when AJAX request fails for any reason
+ *
+ * @param { string } error
+ *
+ * @since 4.1
+ */
+ ajaxFailed = (error) => {
+ /* Let the user know there was a problem with the upload */
+ this.setState({
+ error: error?.message || this.props.genericUploadErrorText,
+ ajax: false,
+ });
+
+ /* Clean/Reset our Redux Store state for templateUploadProcessing */
+ this.props.clearTemplateUploadProcessing();
+ };
+
+ /**
+ * Remove message from state once the timeout has finished
+ *
+ * @since 4.1
+ */
+ removeMessage = () => {
+ this.setState({
+ message: '',
+ });
+ };
+
+ /**
+ * @since 4.1
+ */
+ render() {
+ return (
+
+
+ {({ getRootProps, getInputProps, isDragActive }) => {
+ return (
+
+ );
+ }}
+
+
,
+ * templateUploadProcessingSuccess: Object,
+ * templateUploadProcessingError: Object
+ * }} mapped state
*
* @since 5.2
*/
const mapStateToProps = (state) => {
- return {
- templates: state.template.list,
- templateUploadProcessingSuccess: state.template.templateUploadProcessingSuccess,
- templateUploadProcessingError: state.template.templateUploadProcessingError
- }
-}
+ return {
+ templates: state.template.list,
+ templateUploadProcessingSuccess:
+ state.template.templateUploadProcessingSuccess,
+ templateUploadProcessingError:
+ state.template.templateUploadProcessingError,
+ };
+};
/**
* Map actions to props
*
- * @param {func} dispatch Redux dispatcher
+ * @param { Function } dispatch Redux dispatcher
*
- * @returns {{addNewTemplate: (function(template)), updateTemplateParam: (function(id=string, name=string, value=*)), postTemplateUploadProcessing: (function(file=object, filename=string)), clearTemplateUploadProcessing: (function())}}
+ * @return {{
+ * addNewTemplate: Function
+ * updateTemplateParam: Function
+ * postTemplateUploadProcessing: Function
+ * clearTemplateUploadProcessing: Function
+ * }} mappedDispatch
*
* @since 4.1
*/
export const mapDispatchToProps = (dispatch) => {
- return {
- addNewTemplate: (template) => {
- dispatch(addTemplate(template))
- },
-
- updateTemplateParam: (id, name, value) => {
- dispatch(updateTemplateParam(id, name, value))
- },
-
- postTemplateUploadProcessing: (file, filename) => {
- dispatch(postTemplateUploadProcessing(file, filename))
- },
-
- clearTemplateUploadProcessing: () => {
- dispatch(clearTemplateUploadProcessing())
- }
- }
-}
+ return {
+ addNewTemplate: (template) => {
+ dispatch(addTemplate(template));
+ },
+
+ updateTemplateParam: (id, name, value) => {
+ dispatch(updateTemplateParam(id, name, value));
+ },
+
+ postTemplateUploadProcessing: (file, filename) => {
+ dispatch(postTemplateUploadProcessing(file, filename));
+ },
+
+ clearTemplateUploadProcessing: () => {
+ dispatch(clearTemplateUploadProcessing());
+ },
+ };
+};
/**
* Maps our Redux store to our React component
*
* @since 4.1
*/
-export default connect(mapStateToProps, mapDispatchToProps)(TemplateUploader)
+export default connect(mapStateToProps, mapDispatchToProps)(TemplateUploader);
diff --git a/src/assets/js/react/gfpdf-main.js b/src/assets/js/react/gfpdf-main.js
index 7d2a1b283..e1c769133 100644
--- a/src/assets/js/react/gfpdf-main.js
+++ b/src/assets/js/react/gfpdf-main.js
@@ -1,20 +1,20 @@
/* Dependencies */
-import $ from 'jquery'
+import $ from 'jquery';
/* Bootstrap */
-import { templateBootstrap } from './bootstrap/templateBootstrap'
-import { fontManagerBootstrap } from './bootstrap/fontManagerBootstrap'
-import coreFontBootstrap from './bootstrap/coreFontBootstrap'
-import helpBootstrap from './bootstrap/helpBootstrap'
+import { templateBootstrap } from './bootstrap/templateBootstrap';
+import { fontManagerBootstrap } from './bootstrap/fontManagerBootstrap';
+import coreFontBootstrap from './bootstrap/coreFontBootstrap';
+import helpBootstrap from './bootstrap/helpBootstrap';
/* Utilities */
-import { addEditButton } from './utilities/PdfSettings/addEditButton'
-import shortcodeButton from './utilities/PdfList/shortcodeButton'
+import { addEditButton } from './utilities/PdfSettings/addEditButton';
+import shortcodeButton from './utilities/PdfList/shortcodeButton';
/* Sass Styling */
-import '../../scss/gfpdf-styles.scss'
+import '../../scss/gfpdf-styles.scss';
/**
* JS Entry point for WebPack
*
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 4.1
@@ -29,66 +29,75 @@ import '../../scss/gfpdf-styles.scss'
* @since 4.1
*/
$(function () {
- 'use strict'
+ 'use strict';
- __webpack_public_path__ = GFPDF.pluginUrl + 'dist/' // eslint-disable-line
+ __webpack_public_path__ = GFPDF.pluginUrl + 'build/assets/'; // eslint-disable-line
- /* Initialize the Fancy Template Picker */
- if (GFPDF.templateList !== undefined) {
- // To add to window
- if (!window.Promise) {
- window.Promise = Promise
- }
+ /* Initialize the Fancy Template Picker */
+ if (GFPDF.templateList !== undefined) {
+ // To add to window
+ if (!window.Promise) {
+ window.Promise = Promise;
+ }
- /* Check if we should show the Fancy Template Picker */
- const templateId = '#gfpdf_settings\\[template\\], #gfpdf_settings\\[default_template\\]'
- const $templateField = $(templateId)
+ /* Check if we should show the Fancy Template Picker */
+ const templateId =
+ '#gfpdf_settings\\[template\\], #gfpdf_settings\\[default_template\\]';
+ const $templateField = $(templateId);
- /* Run this code if the element exists */
- if ($templateField.length > 0) {
- templateBootstrap($templateField)
- }
- }
+ /* Run this code if the element exists */
+ if ($templateField.length > 0) {
+ templateBootstrap($templateField);
+ }
+ }
- /* Initialize the Core Font downloader */
- if ($('#gfpdf-button-wrapper-install_core_fonts').length) {
- coreFontBootstrap()
- }
+ /* Initialize the Core Font downloader */
+ if ($('#gfpdf-button-wrapper-install_core_fonts').length) {
+ coreFontBootstrap();
+ }
- /* Initialize the Search Bar for Help Tab */
- if ($('#gpdf-search').length) {
- helpBootstrap()
- }
+ /* Initialize the Search Bar for Help Tab */
+ if ($('#gpdf-search').length) {
+ helpBootstrap();
+ }
- const fmGeneralSettingsTab = document.querySelector('#gfpdf-settings-field-wrapper-default_font select')
- const fmToolsTab = document.querySelector('#gfpdf-settings-field-wrapper-manage_fonts')
- const fmPdfSettings = document.querySelector('#gfpdf-settings-field-wrapper-font select')
- const pdfSettingsForm = document.querySelector('#gfpdf_pdf_form')
- const pdfSettingFieldSets = document.querySelectorAll('fieldset.gform-settings-panel--full')
- const gfPdfListForm = document.querySelector('form#gfpdf_list_form')
+ const fmGeneralSettingsTab = document.querySelector(
+ '#gfpdf-settings-field-wrapper-default_font select'
+ );
+ const fmToolsTab = document.querySelector(
+ '#gfpdf-settings-field-wrapper-manage_fonts'
+ );
+ const fmPdfSettings = document.querySelector(
+ '#gfpdf-settings-field-wrapper-font select'
+ );
+ const pdfSettingsForm = document.querySelector('#gfpdf_pdf_form');
+ const pdfSettingFieldSets = document.querySelectorAll(
+ 'fieldset.gform-settings-panel--full'
+ );
+ const gfPdfListForm = document.querySelector('form#gfpdf_list_form');
- /* Initialize font manager under general settings tab */
- if (fmGeneralSettingsTab !== null) {
- fontManagerBootstrap(fmGeneralSettingsTab)
- }
+ /* Initialize font manager under general settings tab */
+ if (fmGeneralSettingsTab !== null) {
+ fontManagerBootstrap(fmGeneralSettingsTab);
+ }
- /* Initialize font manager under tools tab */
- if (fmToolsTab !== null) {
- fontManagerBootstrap(fmToolsTab, '-prevent-button-reset')
- }
+ /* Initialize font manager under tools tab */
+ if (fmToolsTab !== null) {
+ fontManagerBootstrap(fmToolsTab, '-prevent-button-reset');
+ }
- /* Initialize font manager under PDF settings */
- if (fmPdfSettings !== null) {
- fontManagerBootstrap(fmPdfSettings)
- }
+ /* Initialize font manager under PDF settings */
+ if (fmPdfSettings !== null) {
+ fontManagerBootstrap(fmPdfSettings);
+ }
- /* Initialize additional add/update buttons on PDF setting panels */
- if (pdfSettingsForm && pdfSettingFieldSets.length === 4) {
- addEditButton(pdfSettingFieldSets, pdfSettingsForm)
- }
+ /* Initialize additional add/update buttons on PDF setting panels */
+ if (pdfSettingsForm && pdfSettingFieldSets.length === 4) {
+ addEditButton(pdfSettingFieldSets, pdfSettingsForm);
+ }
- /* Enable shortcode field click and auto select feature */
- if (gfPdfListForm !== null) {
- shortcodeButton()
- }
-})
+ /* Enable shortcode field click and auto select feature */
+ if (gfPdfListForm !== null) {
+ shortcodeButton();
+ }
+});
diff --git a/src/assets/js/react/reducers/coreFontReducer.js b/src/assets/js/react/reducers/coreFontReducer.js
index 99a2987fe..2ca8c3899 100644
--- a/src/assets/js/react/reducers/coreFontReducer.js
+++ b/src/assets/js/react/reducers/coreFontReducer.js
@@ -1,202 +1,205 @@
/* Redux action types */
import {
- ADD_TO_CONSOLE,
- ADD_TO_RETRY_LIST,
- CLEAR_BUTTON_CLICKED_AND_RETRY_LIST,
- CLEAR_CONSOLE,
- GET_FILES_FROM_GITHUB_SUCCESS,
- GET_FILES_FROM_GITHUB_FAILED,
- REQUEST_SENT_COUNTER,
- CLEAR_REQUEST_REMAINING_DATA,
- GET_FILES_FROM_GITHUB
-} from '../actions/coreFonts'
+ ADD_TO_CONSOLE,
+ ADD_TO_RETRY_LIST,
+ CLEAR_BUTTON_CLICKED_AND_RETRY_LIST,
+ CLEAR_CONSOLE,
+ GET_FILES_FROM_GITHUB_SUCCESS,
+ GET_FILES_FROM_GITHUB_FAILED,
+ REQUEST_SENT_COUNTER,
+ CLEAR_REQUEST_REMAINING_DATA,
+ GET_FILES_FROM_GITHUB,
+} from '../actions/coreFonts';
/**
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 5.0
*/
+/**
+ * @typedef { Object } CoreFontReducerState
+ * @property { boolean } buttonClicked - checker when a button is clicked
+ * @property { Array } fontList - font list state
+ * @property { Object } console - messages
+ * @property { Array } retry - retry state
+ * @property { Object } getFilesFromGithubFailed - failed state when getting files from github
+ * @property { string } requestDownload - identifier when requesting a download
+ * @property { number } downloadCounter - counter state of number of downloads
+ */
+
/**
* Setup the initial state of the "coreFont" portion of our Redux store
*
- * @type {{
- * buttonClicked: boolean,
- * fontList: Array,
- * console: Object,
- * retry: Array,
- * getFilesFromGitHubFailed: Object,
- * requestDownload: String,
- * downloadCounter: Integer
- * }}
+ * @return { CoreFontReducerState } initialState
*
* @since 5.0
*/
export const initialState = {
- buttonClicked: false,
- fontList: [],
- console: {},
- retry: [],
- getFilesFromGitHubFailed: '',
- requestDownload: '',
- downloadCounter: 0
-}
+ buttonClicked: false,
+ fontList: [],
+ console: {},
+ retry: [],
+ getFilesFromGitHubFailed: '',
+ requestDownload: '',
+ downloadCounter: 0,
+};
/**
* The action coreFont reducer which updates our state
*
- * @param state The current state of our template store
- * @param action The Redux action details being triggered
+ * @param { CoreFontReducerState } state The current state of our template store
+ * @param { Object } action The Redux action details being triggered
+ * @param { string } action.type
+ * @param { string } action.key
+ * @param { string } action.status
+ * @param { string } action.message
+ * @param { Array } action.payload
*
- * @returns {*} State (whether updated or note)
+ * @return {*} State (whether updated or note)
*
* @since 5.0
*/
export default function (state = initialState, action) {
- switch (action.type) {
- /**
- * @since 5.0
- */
- case ADD_TO_CONSOLE:
- return {
- ...state,
- console: {
- ...state.console,
- [action.key]: {
- status: action.status,
- message: action.message
- }
- }
- }
-
- /**
- * @since 5.0
- */
- case CLEAR_CONSOLE:
- return {
- ...state,
- console: {}
- }
-
- /**
- * @since 5.0
- */
- case ADD_TO_RETRY_LIST:
- /* Do not allow the same item in the retry list */
- if (state.retry.includes(action.name)) {
- break
- }
-
- return {
- ...state,
- retry: [
- ...state.retry,
- action.name
- ]
- }
-
- /**
- * @since 5.0
- */
- case CLEAR_BUTTON_CLICKED_AND_RETRY_LIST:
- return {
- ...state,
- retry: [],
- buttonClicked: false
- }
-
- /**
- * @since 5.2
- */
- case GET_FILES_FROM_GITHUB:
- return {
- ...state,
- buttonClicked: true
- }
-
- /**
- * @since 5.2
- */
- case GET_FILES_FROM_GITHUB_SUCCESS: {
- const files = []
-
- /* Push font names into array */
- action.payload.map((item) => files.push(item.name))
-
- return {
- ...state,
- fontList: files,
- downloadCounter: files.length
- }
- }
-
- /**
- * @since 5.2
- */
- case GET_FILES_FROM_GITHUB_FAILED:
- return {
- ...state,
- getFilesFromGitHubFailed: action.payload
- }
-
- /**
- * @since 5.2
- */
- case REQUEST_SENT_COUNTER: {
- /* Show the overall status in the console once all the fonts have been downloaded (or tried to download) */
- const errors = state.retry.length
- const status = errors ? 'error' : 'success'
- const message = errors ? GFPDF.coreFontError.replace('%s', errors) : GFPDF.coreFontSuccess
-
- state.downloadCounter--
- if (state.downloadCounter === 0) {
- /* Failed */
- if (state.retry.length > 0) {
- return {
- ...state,
- console: {
- ...state.console,
- completed: {
- status,
- message
- }
- },
- downloadCounter: state.retry.length,
- requestDownload: 'finished'
- }
- } else {
- /* Success */
- if (state.retry.length === 0 && state.downloadCounter === 0) {
- return {
- ...state,
- console: {
- ...state.console,
- completed: {
- status,
- message
- }
- },
- downloadCounter: state.fontList.length,
- requestDownload: 'finished'
- }
- }
- }
- }
- }
-
- /**
- * @since 5.2
- */
- // fall through
- case CLEAR_REQUEST_REMAINING_DATA:
- return {
- ...state,
- requestDownload: ''
- }
-
- /* None of these actions fired so return state */
- default:
- return state
- }
+ switch (action.type) {
+ /**
+ * @since 5.0
+ */
+ case ADD_TO_CONSOLE:
+ return {
+ ...state,
+ console: {
+ ...state.console,
+ [action.key]: {
+ status: action.status,
+ message: action.message,
+ },
+ },
+ };
+
+ /**
+ * @since 5.0
+ */
+ case CLEAR_CONSOLE:
+ return {
+ ...state,
+ console: {},
+ };
+
+ /**
+ * @since 5.0
+ */
+ case ADD_TO_RETRY_LIST:
+ /* Do not allow the same item in the retry list */
+ if (state.retry.includes(action.name)) {
+ break;
+ }
+
+ return {
+ ...state,
+ retry: [...state.retry, action.name],
+ };
+
+ /**
+ * @since 5.0
+ */
+ case CLEAR_BUTTON_CLICKED_AND_RETRY_LIST:
+ return {
+ ...state,
+ retry: [],
+ buttonClicked: false,
+ };
+
+ /**
+ * @since 5.2
+ */
+ case GET_FILES_FROM_GITHUB:
+ return {
+ ...state,
+ buttonClicked: true,
+ };
+
+ /**
+ * @since 5.2
+ */
+ case GET_FILES_FROM_GITHUB_SUCCESS: {
+ const files = action.payload.map((item) => item.name);
+
+ return {
+ ...state,
+ fontList: files,
+ downloadCounter: files.length,
+ };
+ }
+
+ /**
+ * @since 5.2
+ */
+ case GET_FILES_FROM_GITHUB_FAILED:
+ return {
+ ...state,
+ getFilesFromGitHubFailed: action.payload,
+ };
+
+ /**
+ * @since 5.2
+ */
+ case REQUEST_SENT_COUNTER: {
+ /* Show the overall status in the console once all the fonts have been downloaded (or tried to download) */
+ const errors = state.retry.length;
+ const status = errors ? 'error' : 'success';
+ const message = errors
+ ? GFPDF.coreFontError.replace('%s', errors)
+ : GFPDF.coreFontSuccess;
+
+ state.downloadCounter--;
+ if (state.downloadCounter === 0) {
+ /* Failed */
+ if (state.retry.length > 0) {
+ return {
+ ...state,
+ console: {
+ ...state.console,
+ completed: {
+ status,
+ message,
+ },
+ },
+ downloadCounter: state.retry.length,
+ requestDownload: 'finished',
+ };
+ }
+ /* Success */
+ if (state.retry.length === 0 && state.downloadCounter === 0) {
+ return {
+ ...state,
+ console: {
+ ...state.console,
+ completed: {
+ status,
+ message,
+ },
+ },
+ downloadCounter: state.fontList.length,
+ requestDownload: 'finished',
+ };
+ }
+ }
+ }
+
+ /**
+ * @since 5.2
+ */
+ // fall through
+ case CLEAR_REQUEST_REMAINING_DATA:
+ return {
+ ...state,
+ requestDownload: '',
+ };
+
+ /* None of these actions fired so return state */
+ default:
+ return state;
+ }
}
diff --git a/src/assets/js/react/reducers/fontManagerReducer.js b/src/assets/js/react/reducers/fontManagerReducer.js
index 650218314..b3b6456d8 100644
--- a/src/assets/js/react/reducers/fontManagerReducer.js
+++ b/src/assets/js/react/reducers/fontManagerReducer.js
@@ -1,478 +1,518 @@
/* Dependencies */
-import { sprintf } from 'sprintf-js'
+import { sprintf } from 'sprintf-js';
/* Redux action types */
import {
- GET_CUSTOM_FONT_LIST,
- GET_CUSTOM_FONT_LIST_SUCCESS,
- GET_CUSTOM_FONT_LIST_ERROR,
- ADD_FONT,
- ADD_FONT_SUCCESS,
- ADD_FONT_ERROR,
- EDIT_FONT,
- EDIT_FONT_ERROR,
- EDIT_FONT_SUCCESS,
- VALIDATION_ERROR,
- DELETE_VARIANT_ERROR,
- DELETE_FONT,
- DELETE_FONT_SUCCESS,
- DELETE_FONT_ERROR,
- CLEAR_ADD_FONT_MSG,
- CLEAR_DROPZONE_ERROR,
- RESET_SEARCH_RESULT,
- SEARCH_FONT_LIST,
- SELECT_FONT,
- MOVE_SELECTED_FONT_TO_TOP
-} from '../actions/fontManager'
+ GET_CUSTOM_FONT_LIST,
+ GET_CUSTOM_FONT_LIST_SUCCESS,
+ GET_CUSTOM_FONT_LIST_ERROR,
+ ADD_FONT,
+ ADD_FONT_SUCCESS,
+ ADD_FONT_ERROR,
+ EDIT_FONT,
+ EDIT_FONT_ERROR,
+ EDIT_FONT_SUCCESS,
+ VALIDATION_ERROR,
+ DELETE_VARIANT_ERROR,
+ DELETE_FONT,
+ DELETE_FONT_SUCCESS,
+ DELETE_FONT_ERROR,
+ CLEAR_ADD_FONT_MSG,
+ CLEAR_DROPZONE_ERROR,
+ RESET_SEARCH_RESULT,
+ SEARCH_FONT_LIST,
+ SELECT_FONT,
+ MOVE_SELECTED_FONT_TO_TOP,
+} from '../actions/fontManager';
/* Utilities */
import {
- findAndUpdate,
- findAndRemove,
- reduceFontFileName,
- checkFontListIncludes,
- clearMsg
-} from '../utilities/FontManager/fontManagerReducer'
+ findAndUpdate,
+ findAndRemove,
+ reduceFontFileName,
+ checkFontListIncludes,
+ clearMsg,
+} from '../utilities/FontManager/fontManagerReducer';
/**
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 6.0
*/
+/**
+ * @typedef FontManagerReducerState
+ * @property { boolean } loading - general loading state
+ * @property { boolean } addFontLoading - loading state when adding font
+ * @property { boolean } deleteFontLoading - loading state when deleting font
+ * @property { Array } fontList - font list state
+ * @property { null } searchResult - search result state
+ * @property { string } selectedFont - state of selected font
+ * @property { Object } msg - message object
+ */
+
/**
* Initial state setup for the "fontManager" portion of our redux store
*
- * @type {{
- * loading: boolean,
- * addFontLoading: boolean,
- * deleteFontLoading: boolean,
- * fontList: array,
- * searchResult: null,
- * selectedFont: string,
- * msg: object
- * }}
+ * @return { FontManagerReducerState } initialState
*
* @since 6.0
*/
export const initialState = {
- loading: false,
- addFontLoading: false,
- deleteFontLoading: false,
- fontList: [],
- searchResult: null,
- selectedFont: '',
- msg: {}
-}
+ loading: false,
+ addFontLoading: false,
+ deleteFontLoading: false,
+ fontList: [],
+ searchResult: null,
+ selectedFont: '',
+ msg: {},
+};
/**
* The action for "fontManager" reducer which updates its state
*
- * @param state: object
- * @param action: object
+ * @param { FontManagerReducerState } state
+ * @param { Object } action
+ * @param { Object } action.payload
+ * @param { string } action.type
*
- * @returns {{ updated state }}
+ * @return { FontManagerReducerState } state
*
* @since 6.0
*/
export default function (state = initialState, action) {
- const { payload } = action
-
- switch (action.type) {
- /**
- * Process GET_CUSTOM_FONT_LIST
- *
- * @since 6.0
- */
- case GET_CUSTOM_FONT_LIST: {
- return {
- ...state,
- loading: true,
- msg: {}
- }
- }
-
- /**
- * Process GET_CUSTOM_FONT_LIST_SUCCESS
- *
- * @since 6.0
- */
- case GET_CUSTOM_FONT_LIST_SUCCESS:
- return {
- ...state,
- loading: false,
- fontList: payload
- }
-
- /**
- * Process GET_CUSTOM_FONT_LIST_ERROR
- *
- * @since 6.0
- */
- case GET_CUSTOM_FONT_LIST_ERROR:
- return {
- ...state,
- loading: false,
- msg: { error: { fontList: payload } }
- }
-
- /**
- * Process ADD_FONT
- *
- * @since 6.0
- */
- case ADD_FONT: {
- const msg = { ...state.msg }
-
- /* Clear previous fontValidation error msg */
- if (msg.error && msg.error.fontValidationError) {
- delete msg.error.fontValidationError
- }
-
- return {
- ...state,
- addFontLoading: true,
- msg: clearMsg({ ...msg })
- }
- }
-
- /**
- * Process ADD_FONT_SUCCESS
- *
- * @since 6.0
- */
- case ADD_FONT_SUCCESS: {
- if (state.msg.error && state.msg.error.fontList) {
- return {
- ...state,
- addFontLoading: false,
- msg: { ...state.msg, success: { addFont: payload.msg } }
- }
- }
-
- const updatedFontList = [...state.fontList, payload.font]
-
- return {
- ...state,
- addFontLoading: false,
- fontList: updatedFontList,
- searchResult: state.searchResult ? updatedFontList : null,
- msg: { success: { addFont: payload.msg } }
- }
- }
-
- /**
- * Process ADD_FONT_ERROR & EDIT_FONT_ERROR
- *
- * @since 6.0
- */
- case ADD_FONT_ERROR:
- case EDIT_FONT_ERROR: {
- let msg
-
- msg = { ...state.msg, error: { ...state.msg.error, addFont: payload } }
-
- if (payload.fontValidationError) {
- msg = {
- ...state.msg,
- error: {
- ...state.msg.error,
- addFont: payload.msg,
- fontValidationError: sprintf(payload.fontValidationError, '', ' ')
- }
- }
- }
-
- /* Clear deleteFont error msg */
- if (msg.error && msg.error.deleteFont) {
- delete msg.error.deleteFont
- }
-
- return {
- ...state,
- addFontLoading: false,
- msg
- }
- }
-
- /**
- * Process EDIT_FONT
- *
- * @since 6.0
- */
- case EDIT_FONT: {
- const msg = { ...state.msg }
-
- /* Clear previous success msg */
- if (msg.success) {
- delete msg.success
- }
-
- /* Clear previous addFont error msg */
- if (msg.error && msg.error.addFont) {
- delete msg.error.addFont
- }
-
- /* Clear previous fontValidation error msg */
- if (msg.error && msg.error.fontValidationError) {
- delete msg.error.fontValidationError
- }
-
- return {
- ...state,
- addFontLoading: true,
- msg
- }
- }
-
- /**
- * Process EDIT_FONT_SUCCESS
- *
- * Update fontList state with the new font details
- *
- * @since 6.0
- */
- case EDIT_FONT_SUCCESS: {
- const msg = { success: { addFont: payload.msg } }
-
- /* Update search result in case there's an ongoing search */
- if (state.searchResult) {
- return {
- ...state,
- addFontLoading: false,
- fontList: findAndUpdate([...state.fontList], payload),
- searchResult: findAndUpdate([...state.searchResult], payload),
- msg
- }
- }
-
- return {
- ...state,
- addFontLoading: false,
- fontList: findAndUpdate([...state.fontList], payload),
- msg
- }
- }
-
- /**
- * Process VALIDATION_ERROR
- *
- * @since 6.0
- */
- case VALIDATION_ERROR:
- return {
- ...state,
- msg: {
- error: {
- ...state.msg.error,
- addFont: sprintf(GFPDF.addUpdateFontError, '', ' ')
- }
- }
- }
-
- /**
- * Process DELETE_VARIANT_ERROR
- *
- * @since 6.0
- */
- case DELETE_VARIANT_ERROR: {
- const addFont = { ...state.msg.error.addFont }
- delete addFont[payload]
-
- return {
- ...state,
- msg: { error: { ...state.msg.error, addFont } }
- }
- }
-
- /**
- * Process DELETE_FONT
- *
- * @since 6.0
- */
- case DELETE_FONT: {
- const msg = { ...state.msg }
-
- /* Clear previous success msg */
- if (msg.success) {
- delete msg.success
- }
-
- /* Clear previous deleteFont error msg */
- if (msg.error && msg.error.deleteFont) {
- delete msg.error.deleteFont
- }
-
- return {
- ...state,
- deleteFontLoading: true,
- msg
- }
- }
-
- /**
- * Process DELETE_FONT_SUCCESS
- *
- * @since 6.0
- */
- case DELETE_FONT_SUCCESS: {
- /* Delete from the list during active search */
- if (state.searchResult) {
- return {
- ...state,
- deleteFontLoading: false,
- fontList: findAndRemove([...state.fontList], payload),
- searchResult: findAndRemove([...state.searchResult], payload).length === 0 ? null : findAndRemove([...state.searchResult], payload)
- }
- }
-
- return {
- ...state,
- deleteFontLoading: false,
- fontList: findAndRemove([...state.fontList], payload)
- }
- }
-
- /**
- * Process DELETE_FONT_ERROR
- *
- * @since 6.0
- */
- case DELETE_FONT_ERROR:
- return {
- ...state,
- deleteFontLoading: false,
- msg: { ...state.msg, error: { ...state.msg.error, deleteFont: payload } }
- }
-
- /**
- * Process CLEAR_ADD_FONT_MSG
- *
- * @since 6.0
- */
- case CLEAR_ADD_FONT_MSG:
- return {
- ...state,
- msg: clearMsg({ ...state.msg })
- }
-
- /**
- * Process CLEAR_DROPZONE_ERROR
- *
- * @since 6.0
- */
- case CLEAR_DROPZONE_ERROR: {
- const addFont = state.msg.error.addFont
- typeof addFont === 'object' && delete addFont[payload]
-
- return {
- ...state,
- msg: { ...state.msg, error: { ...state.msg.error, addFont } }
- }
- }
-
- /**
- * Process RESET_SEARCH_RESULT
- *
- * @since 6.0
- */
- case RESET_SEARCH_RESULT:
- return {
- ...state,
- searchResult: null
- }
-
- /**
- * Process SEARCH_FONT_LIST
- *
- * @since 6.0
- */
- case SEARCH_FONT_LIST: {
- const fontList = [...state.fontList]
-
- if (payload === '') {
- return {
- ...state,
- searchResult: fontList
- }
- }
-
- const keyword = payload.toLowerCase()
- const searchResult = []
- const modifiedFontList = fontList.map(font => {
- font.regular = reduceFontFileName(font.regular)
- font.italics = reduceFontFileName(font.italics)
- font.bold = reduceFontFileName(font.bold)
- font.bolditalics = reduceFontFileName(font.bolditalics)
-
- return { ...font }
- })
-
- modifiedFontList.map(font => {
- if (
- checkFontListIncludes(font.font_name, keyword) ||
- checkFontListIncludes(font.regular, keyword) ||
- checkFontListIncludes(font.italics, keyword) ||
- checkFontListIncludes(font.bold, keyword) ||
- checkFontListIncludes(font.bolditalics, keyword)
- ) {
- return searchResult.push(font)
- }
-
- return false
- })
-
- const relevant = []
- const related = []
-
- /* Construct 2 arrays containing the most relevant and the related results */
- searchResult.map(item => {
- if (item.font_name.toLowerCase().includes(keyword)) {
- return relevant.push(item)
- }
-
- return related.push(item)
- })
-
- /* Sort and combine mostRelevant and related array into 1 array */
- const result = [
- ...relevant.sort((a, b) => a.font_name.localeCompare(b.font_name)),
- ...related.sort((a, b) => a.font_name.localeCompare(b.font_name))
- ]
-
- return {
- ...state,
- searchResult: result
- }
- }
-
- /**
- * Process SELECT_FONT
- *
- * @since 6.0
- */
- case SELECT_FONT:
- return {
- ...state,
- selectedFont: payload
- }
-
- /**
- * Process MOVE_SELECTED_FONT_TO_TOP
- *
- * @since 6.0
- */
- case MOVE_SELECTED_FONT_TO_TOP: {
- const fontList = [...state.fontList]
- const filterFontList = fontList.filter(item => item.id !== payload)
- const getPayloadItem = fontList.filter(item => item.id === payload)
- const list = [...getPayloadItem, ...filterFontList]
-
- return {
- ...state,
- fontList: list
- }
- }
- }
-
- return state
+ const { payload } = action;
+
+ switch (action.type) {
+ /**
+ * Process GET_CUSTOM_FONT_LIST
+ *
+ * @since 6.0
+ */
+ case GET_CUSTOM_FONT_LIST: {
+ return {
+ ...state,
+ loading: true,
+ msg: {},
+ };
+ }
+
+ /**
+ * Process GET_CUSTOM_FONT_LIST_SUCCESS
+ *
+ * @since 6.0
+ */
+ case GET_CUSTOM_FONT_LIST_SUCCESS:
+ return {
+ ...state,
+ loading: false,
+ fontList: payload,
+ };
+
+ /**
+ * Process GET_CUSTOM_FONT_LIST_ERROR
+ *
+ * @since 6.0
+ */
+ case GET_CUSTOM_FONT_LIST_ERROR:
+ return {
+ ...state,
+ loading: false,
+ msg: { error: { fontList: payload } },
+ };
+
+ /**
+ * Process ADD_FONT
+ *
+ * @since 6.0
+ */
+ case ADD_FONT: {
+ const msg = { ...state.msg };
+
+ /* Clear previous fontValidation error msg */
+ if (msg.error && msg.error.fontValidationError) {
+ delete msg.error.fontValidationError;
+ }
+
+ return {
+ ...state,
+ addFontLoading: true,
+ msg: clearMsg({ ...msg }),
+ };
+ }
+
+ /**
+ * Process ADD_FONT_SUCCESS
+ *
+ * @since 6.0
+ */
+ case ADD_FONT_SUCCESS: {
+ if (state.msg.error && state.msg.error.fontList) {
+ return {
+ ...state,
+ addFontLoading: false,
+ msg: { ...state.msg, success: { addFont: payload.msg } },
+ };
+ }
+
+ const updatedFontList = [...state.fontList, payload.font];
+
+ return {
+ ...state,
+ addFontLoading: false,
+ fontList: updatedFontList,
+ searchResult: state.searchResult ? updatedFontList : null,
+ msg: { success: { addFont: payload.msg } },
+ };
+ }
+
+ /**
+ * Process ADD_FONT_ERROR & EDIT_FONT_ERROR
+ *
+ * @since 6.0
+ */
+ case ADD_FONT_ERROR:
+ case EDIT_FONT_ERROR: {
+ let msg;
+
+ msg = {
+ ...state.msg,
+ error: { ...state.msg.error, addFont: payload },
+ };
+
+ if (payload.fontValidationError) {
+ msg = {
+ ...state.msg,
+ error: {
+ ...state.msg.error,
+ addFont: payload.msg,
+ // %s is found inside fontValidationError
+ // eslint-disable-next-line @wordpress/valid-sprintf
+ fontValidationError: sprintf(
+ payload.fontValidationError,
+ '',
+ ' '
+ ),
+ },
+ };
+ }
+
+ /* Clear deleteFont error msg */
+ if (msg.error && msg.error.deleteFont) {
+ delete msg.error.deleteFont;
+ }
+
+ return {
+ ...state,
+ addFontLoading: false,
+ msg,
+ };
+ }
+
+ /**
+ * Process EDIT_FONT
+ *
+ * @since 6.0
+ */
+ case EDIT_FONT: {
+ const msg = { ...state.msg };
+
+ /* Clear previous success msg */
+ if (msg.success) {
+ delete msg.success;
+ }
+
+ /* Clear previous addFont error msg */
+ if (msg.error && msg.error.addFont) {
+ delete msg.error.addFont;
+ }
+
+ /* Clear previous fontValidation error msg */
+ if (msg.error && msg.error.fontValidationError) {
+ delete msg.error.fontValidationError;
+ }
+
+ return {
+ ...state,
+ addFontLoading: true,
+ msg,
+ };
+ }
+
+ /**
+ * Process EDIT_FONT_SUCCESS
+ *
+ * Update fontList state with the new font details
+ *
+ * @since 6.0
+ */
+ case EDIT_FONT_SUCCESS: {
+ const msg = { success: { addFont: payload.msg } };
+
+ /* Update search result in case there's an ongoing search */
+ if (state.searchResult) {
+ return {
+ ...state,
+ addFontLoading: false,
+ fontList: findAndUpdate([...state.fontList], payload),
+ searchResult: findAndUpdate(
+ [...state.searchResult],
+ payload
+ ),
+ msg,
+ };
+ }
+
+ return {
+ ...state,
+ addFontLoading: false,
+ fontList: findAndUpdate([...state.fontList], payload),
+ msg,
+ };
+ }
+
+ /**
+ * Process VALIDATION_ERROR
+ *
+ * @since 6.0
+ */
+ case VALIDATION_ERROR:
+ return {
+ ...state,
+ msg: {
+ error: {
+ ...state.msg.error,
+ // %s is found inside addUpdateFontError
+ // eslint-disable-next-line @wordpress/valid-sprintf
+ addFont: sprintf(
+ GFPDF.addUpdateFontError,
+ '',
+ ' '
+ ),
+ },
+ },
+ };
+
+ /**
+ * Process DELETE_VARIANT_ERROR
+ *
+ * @since 6.0
+ */
+ case DELETE_VARIANT_ERROR: {
+ const addFont = { ...state.msg.error.addFont };
+ delete addFont[payload];
+
+ return {
+ ...state,
+ msg: { error: { ...state.msg.error, addFont } },
+ };
+ }
+
+ /**
+ * Process DELETE_FONT
+ *
+ * @since 6.0
+ */
+ case DELETE_FONT: {
+ const msg = { ...state.msg };
+
+ /* Clear previous success msg */
+ if (msg.success) {
+ delete msg.success;
+ }
+
+ /* Clear previous deleteFont error msg */
+ if (msg.error && msg.error.deleteFont) {
+ delete msg.error.deleteFont;
+ }
+
+ return {
+ ...state,
+ deleteFontLoading: true,
+ msg,
+ };
+ }
+
+ /**
+ * Process DELETE_FONT_SUCCESS
+ *
+ * @since 6.0
+ */
+ case DELETE_FONT_SUCCESS: {
+ /* Delete from the list during active search */
+ if (state.searchResult) {
+ return {
+ ...state,
+ deleteFontLoading: false,
+ fontList: findAndRemove([...state.fontList], payload),
+ searchResult:
+ findAndRemove([...state.searchResult], payload)
+ .length === 0
+ ? null
+ : findAndRemove([...state.searchResult], payload),
+ };
+ }
+
+ return {
+ ...state,
+ deleteFontLoading: false,
+ fontList: findAndRemove([...state.fontList], payload),
+ };
+ }
+
+ /**
+ * Process DELETE_FONT_ERROR
+ *
+ * @since 6.0
+ */
+ case DELETE_FONT_ERROR:
+ return {
+ ...state,
+ deleteFontLoading: false,
+ msg: {
+ ...state.msg,
+ error: { ...state.msg.error, deleteFont: payload },
+ },
+ };
+
+ /**
+ * Process CLEAR_ADD_FONT_MSG
+ *
+ * @since 6.0
+ */
+ case CLEAR_ADD_FONT_MSG:
+ return {
+ ...state,
+ msg: clearMsg({ ...state.msg }),
+ };
+
+ /**
+ * Process CLEAR_DROPZONE_ERROR
+ *
+ * @since 6.0
+ */
+ case CLEAR_DROPZONE_ERROR: {
+ const addFont = state.msg.error.addFont;
+ if (typeof addFont === 'object') {
+ delete addFont[payload];
+ }
+
+ return {
+ ...state,
+ msg: { ...state.msg, error: { ...state.msg.error, addFont } },
+ };
+ }
+
+ /**
+ * Process RESET_SEARCH_RESULT
+ *
+ * @since 6.0
+ */
+ case RESET_SEARCH_RESULT:
+ return {
+ ...state,
+ searchResult: null,
+ };
+
+ /**
+ * Process SEARCH_FONT_LIST
+ *
+ * @since 6.0
+ */
+ case SEARCH_FONT_LIST: {
+ const fontList = [...state.fontList];
+
+ if (payload === '') {
+ return {
+ ...state,
+ searchResult: fontList,
+ };
+ }
+
+ const keyword = payload.toLowerCase();
+ const searchResult = [];
+ const modifiedFontList = fontList.map((font) => {
+ font.regular = reduceFontFileName(font.regular);
+ font.italics = reduceFontFileName(font.italics);
+ font.bold = reduceFontFileName(font.bold);
+ font.bolditalics = reduceFontFileName(font.bolditalics);
+
+ return { ...font };
+ });
+
+ modifiedFontList.map((font) => {
+ if (
+ checkFontListIncludes(font.font_name, keyword) ||
+ checkFontListIncludes(font.regular, keyword) ||
+ checkFontListIncludes(font.italics, keyword) ||
+ checkFontListIncludes(font.bold, keyword) ||
+ checkFontListIncludes(font.bolditalics, keyword)
+ ) {
+ return searchResult.push(font);
+ }
+
+ return false;
+ });
+
+ const relevant = [];
+ const related = [];
+
+ /* Construct 2 arrays containing the most relevant and the related results */
+ searchResult.map((item) => {
+ if (item.font_name.toLowerCase().includes(keyword)) {
+ return relevant.push(item);
+ }
+
+ return related.push(item);
+ });
+
+ /* Sort and combine mostRelevant and related array into 1 array */
+ const result = [
+ ...relevant.sort((a, b) =>
+ a.font_name.localeCompare(b.font_name)
+ ),
+ ...related.sort((a, b) =>
+ a.font_name.localeCompare(b.font_name)
+ ),
+ ];
+
+ return {
+ ...state,
+ searchResult: result,
+ };
+ }
+
+ /**
+ * Process SELECT_FONT
+ *
+ * @since 6.0
+ */
+ case SELECT_FONT:
+ return {
+ ...state,
+ selectedFont: payload,
+ };
+
+ /**
+ * Process MOVE_SELECTED_FONT_TO_TOP
+ *
+ * @since 6.0
+ */
+ case MOVE_SELECTED_FONT_TO_TOP: {
+ const fontList = [...state.fontList];
+ const filterFontList = fontList.filter(
+ (item) => item.id !== payload
+ );
+ const getPayloadItem = fontList.filter(
+ (item) => item.id === payload
+ );
+ const list = [...getPayloadItem, ...filterFontList];
+
+ return {
+ ...state,
+ fontList: list,
+ };
+ }
+ }
+
+ return state;
}
diff --git a/src/assets/js/react/reducers/index.js b/src/assets/js/react/reducers/index.js
index f118858dc..d70bafc98 100644
--- a/src/assets/js/react/reducers/index.js
+++ b/src/assets/js/react/reducers/index.js
@@ -1,7 +1,7 @@
-import { combineReducers } from 'redux'
-import templateReducer from './templateReducer'
-import coreFontsReducer from './coreFontReducer'
-import fontManagerReducer from './fontManagerReducer'
+import { combineReducers } from 'redux';
+import templateReducer from './templateReducer';
+import coreFontsReducer from './coreFontReducer';
+import fontManagerReducer from './fontManagerReducer';
/**
* Combine our Redux reducers for use in a single store
@@ -10,7 +10,7 @@ import fontManagerReducer from './fontManagerReducer'
* @since 4.1
*/
export default combineReducers({
- template: templateReducer,
- coreFonts: coreFontsReducer,
- fontManager: fontManagerReducer
-})
+ template: templateReducer,
+ coreFonts: coreFontsReducer,
+ fontManager: fontManagerReducer,
+});
diff --git a/src/assets/js/react/reducers/templateReducer.js b/src/assets/js/react/reducers/templateReducer.js
index f02976d39..131baa17a 100644
--- a/src/assets/js/react/reducers/templateReducer.js
+++ b/src/assets/js/react/reducers/templateReducer.js
@@ -1,201 +1,212 @@
/* Redux action types */
import {
- SEARCH_TEMPLATES,
- SELECT_TEMPLATE,
- ADD_TEMPLATE,
- UPDATE_TEMPLATE_PARAM,
- DELETE_TEMPLATE,
- UPDATE_SELECT_BOX_SUCCESS,
- TEMPLATE_PROCESSING_SUCCESS,
- TEMPLATE_PROCESSING_FAILED,
- CLEAR_TEMPLATE_PROCESSING,
- TEMPLATE_UPLOAD_PROCESSING_SUCCESS,
- TEMPLATE_UPLOAD_PROCESSING_FAILED,
- CLEAR_TEMPLATE_UPLOAD_PROCESSING
-} from '../actions/templates'
+ SEARCH_TEMPLATES,
+ SELECT_TEMPLATE,
+ ADD_TEMPLATE,
+ UPDATE_TEMPLATE_PARAM,
+ DELETE_TEMPLATE,
+ UPDATE_SELECT_BOX_SUCCESS,
+ TEMPLATE_PROCESSING_SUCCESS,
+ TEMPLATE_PROCESSING_FAILED,
+ CLEAR_TEMPLATE_PROCESSING,
+ TEMPLATE_UPLOAD_PROCESSING_SUCCESS,
+ TEMPLATE_UPLOAD_PROCESSING_FAILED,
+ CLEAR_TEMPLATE_UPLOAD_PROCESSING,
+} from '../actions/templates';
/**
* Our Redux Template Reducer that take the objects returned from our Redux Template Actions
* and updates the template portion of our store
*
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 4.1
*/
+/**
+ * @typedef { Object } TemplateReducerState
+ * @property { Array } list - list of GFPDF prebuilt templates
+ * @property { Object } activeTemplate - current template used
+ * @property { string } search - filter keyword value
+ * @property { string } updateSelectBoxText - state of select box text
+ * @property { string } templateProcessing - state of template processed
+ * @property { Object } templateUploadProcessingSuccess - state when upload is successful
+ * @property { Object } templateUploadProcessingError - state when upload is not successful
+ */
+
/**
* Setup the initial state of the "template" portion of our Redux store
*
- * @type {{list: any, activeTemplate: (any), search: string}}
+ * @return { TemplateReducerState } initialState
*
* @since 4.1
*/
export const initialState = {
- list: GFPDF.templateList,
- activeTemplate: GFPDF.activeTemplate || GFPDF.activeDefaultTemplate,
- search: '',
- updateSelectBoxText: '',
- templateProcessing: '',
- templateUploadProcessingSuccess: {},
- templateUploadProcessingError: {}
-}
+ list: GFPDF.templateList,
+ activeTemplate: GFPDF.activeTemplate || GFPDF.activeDefaultTemplate,
+ search: '',
+ updateSelectBoxText: '',
+ templateProcessing: '',
+ templateUploadProcessingSuccess: {},
+ templateUploadProcessingError: {},
+};
/**
* The action template reducer which updates our state
*
- * @param {Object} state The current state of our template store
- * @param {Object} action The Redux action details being triggered
+ * @param { TemplateReducerState } state The current state of our template store
+ * @param { Object } action The Redux action details being triggered
*
- * @returns {Object} State (whether updated or not)
+ * @return { TemplateReducerState } State (whether updated or not)
*
* @since 4.1
*/
export default function (state = initialState, action) {
- switch (action.type) {
- /**
- * Update the search key
- *
- * @since 4.1
- */
- case SEARCH_TEMPLATES:
- return {
- ...state,
- search: action.text
- }
-
- /**
- * Update the activeTemplate key
- *
- * @since 4.1
- */
- case SELECT_TEMPLATE:
- return {
- ...state,
- activeTemplate: action.id
- }
-
- /**
- * Push a new template into List
- *
- * @since 4.1
- */
- case ADD_TEMPLATE:
- return {
- ...state,
- list: [...state.list, action.template]
- }
-
- /**
- * Update single parameter in template new value
- *
- * @since 4.1
- */
- case UPDATE_TEMPLATE_PARAM: {
- const updatedList = state.list.map(item => {
- if (item.id === action.id) {
- return { ...item, [action.name]: action.value }
- }
- return item
- })
- return {
- ...state,
- list: updatedList
- }
- }
-
- /**
- * Remove template from List
- *
- * @since 4.1
- */
- case DELETE_TEMPLATE: {
- const list = state.list.filter(item => item.id !== action.id)
- return {
- ...state,
- list: [...list]
- }
- }
-
- /**
- * Update the new Select Box DOM data
- *
- * @since 5.2
- */
- case UPDATE_SELECT_BOX_SUCCESS:
- return {
- ...state,
- updateSelectBoxText: action.payload
- }
-
- /**
- * Remove the PDF template automatically
- *
- * @since 5.2
- */
- case TEMPLATE_PROCESSING_SUCCESS:
- return {
- ...state,
- templateProcessing: action.payload
- }
-
- /**
- * Fires Re-add template to our list and display an appropriate inline error message
- *
- * @since 5.2
- */
- case TEMPLATE_PROCESSING_FAILED:
- return {
- ...state,
- templateProcessing: action.payload
- }
-
- /**
- * Clear/reset the templateProcessing state
- *
- * @since 5.2
- */
- case CLEAR_TEMPLATE_PROCESSING:
- return {
- ...state,
- templateProcessing: ''
- }
-
- /**
- * Update with the new PDF template details
- *
- * @since 5.2
- */
- case TEMPLATE_UPLOAD_PROCESSING_SUCCESS:
- return {
- ...state,
- templateUploadProcessingSuccess: action.payload
- }
-
- /**
- * Update/Show error
- *
- * @since 5.2
- */
- case TEMPLATE_UPLOAD_PROCESSING_FAILED:
- return {
- ...state,
- templateUploadProcessingError: action.payload
- }
-
- /**
- * Clear/reset state of templateUploadProcessingSuccess & templateUploadProcessingError
- *
- * @since 5.2
- */
- case CLEAR_TEMPLATE_UPLOAD_PROCESSING:
- return {
- ...state,
- templateUploadProcessingSuccess: {},
- templateUploadProcessingError: {}
- }
- }
-
- /* None of these actions fired so return state */
- return state
+ switch (action.type) {
+ /**
+ * Update the search key
+ *
+ * @since 4.1
+ */
+ case SEARCH_TEMPLATES:
+ return {
+ ...state,
+ search: action.text,
+ };
+
+ /**
+ * Update the activeTemplate key
+ *
+ * @since 4.1
+ */
+ case SELECT_TEMPLATE:
+ return {
+ ...state,
+ activeTemplate: action.id,
+ };
+
+ /**
+ * Push a new template into List
+ *
+ * @since 4.1
+ */
+ case ADD_TEMPLATE:
+ return {
+ ...state,
+ list: [...state.list, action.template],
+ };
+
+ /**
+ * Update single parameter in template new value
+ *
+ * @since 4.1
+ */
+ case UPDATE_TEMPLATE_PARAM: {
+ const updatedList = state.list.map((item) => {
+ if (item.id === action.id) {
+ return { ...item, [action.name]: action.value };
+ }
+ return item;
+ });
+ return {
+ ...state,
+ list: updatedList,
+ };
+ }
+
+ /**
+ * Remove template from List
+ *
+ * @since 4.1
+ */
+ case DELETE_TEMPLATE: {
+ const list = state.list.filter((item) => item.id !== action.id);
+ return {
+ ...state,
+ list: [...list],
+ };
+ }
+
+ /**
+ * Update the new Select Box DOM data
+ *
+ * @since 5.2
+ */
+ case UPDATE_SELECT_BOX_SUCCESS:
+ return {
+ ...state,
+ updateSelectBoxText: action.payload,
+ };
+
+ /**
+ * Remove the PDF template automatically
+ *
+ * @since 5.2
+ */
+ case TEMPLATE_PROCESSING_SUCCESS:
+ return {
+ ...state,
+ templateProcessing: action.payload,
+ };
+
+ /**
+ * Fires Re-add template to our list and display an appropriate inline error message
+ *
+ * @since 5.2
+ */
+ case TEMPLATE_PROCESSING_FAILED:
+ return {
+ ...state,
+ templateProcessing: action.payload,
+ };
+
+ /**
+ * Clear/reset the templateProcessing state
+ *
+ * @since 5.2
+ */
+ case CLEAR_TEMPLATE_PROCESSING:
+ return {
+ ...state,
+ templateProcessing: '',
+ };
+
+ /**
+ * Update with the new PDF template details
+ *
+ * @since 5.2
+ */
+ case TEMPLATE_UPLOAD_PROCESSING_SUCCESS:
+ return {
+ ...state,
+ templateUploadProcessingSuccess: action.payload,
+ };
+
+ /**
+ * Update/Show error
+ *
+ * @since 5.2
+ */
+ case TEMPLATE_UPLOAD_PROCESSING_FAILED:
+ return {
+ ...state,
+ templateUploadProcessingError: action.payload,
+ };
+
+ /**
+ * Clear/reset state of templateUploadProcessingSuccess & templateUploadProcessingError
+ *
+ * @since 5.2
+ */
+ case CLEAR_TEMPLATE_UPLOAD_PROCESSING:
+ return {
+ ...state,
+ templateUploadProcessingSuccess: {},
+ templateUploadProcessingError: {},
+ };
+ }
+
+ /* None of these actions fired so return state */
+ return state;
}
diff --git a/src/assets/js/react/router/coreFontRouter.js b/src/assets/js/react/router/coreFontRouter.js
index 55716c8d3..a02463cf8 100644
--- a/src/assets/js/react/router/coreFontRouter.js
+++ b/src/assets/js/react/router/coreFontRouter.js
@@ -1,12 +1,16 @@
/* Dependencies */
-import React from 'react'
-import PropTypes from 'prop-types'
-import { HashRouter as Router, Route, Switch } from 'react-router-dom'
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Routes as Switch, Route } from 'react-router-dom';
/* Components */
-import CoreFontContainer from '../components/CoreFonts/CoreFontContainer'
+import CoreFontContainer from '../components/CoreFonts/CoreFontContainer';
+import Empty from '../components/Empty';
+/* Helpers */
+import withRouterHooks from '../utilities/withRouterHooks.js';
+import CustomHashRouter from '../components/CustomHashRouter';
/**
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 5.0
@@ -21,68 +25,70 @@ import CoreFontContainer from '../components/CoreFonts/CoreFontContainer'
* /downloadCoreFonts
* /retryDownloadCoreFonts
*
- * @param button DOM Node containing the original static markup (gets replaced by React)
+ * @param { HTMLButtonElement } button DOM Node containing the original static markup (gets replaced by React)
*
* @since 5.0
*/
-const Routes = ({ button }) => (
-
-
-
+
+
-
-)
+
-
-
-
-)
+
+
+
+
+);
-/**
- * PropTypes
- *
- * @since 6.0
- */
-Routes.propTypes = {
- match: PropTypes.object,
- history: PropTypes.object
-}
+const FontManagerWithRouter = withRouterHooks(FontManager);
/**
* Setup react router with our redux store
*
- * @param store: object
+ * @param { Object } store
*
* @since 6.0
*/
-export function fontManagerRouter (store) {
- render((
-
-
- ), document.querySelector('#font-manager-overlay'))
+export function fontManagerRouter(store) {
+ const container = document.querySelector('#font-manager-overlay');
+
+ const root = createRoot(container);
+
+ root.render(
+
+
+ );
}
diff --git a/src/assets/js/react/router/templateRouter.js b/src/assets/js/react/router/templateRouter.js
index 5c61c05e4..b03f401d4 100644
--- a/src/assets/js/react/router/templateRouter.js
+++ b/src/assets/js/react/router/templateRouter.js
@@ -1,12 +1,16 @@
/* Dependencies */
-import React, { lazy, Suspense } from 'react'
-import { render } from 'react-dom'
-import { Provider } from 'react-redux'
-import { HashRouter as Router, Route, Switch } from 'react-router-dom'
+import React, { lazy, Suspense } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { Routes as Switch, Route } from 'react-router-dom';
/* Components */
-import Empty from '../components/Empty'
-const TemplateList = lazy(() => import('../components/Template/TemplateList'))
-const TemplateSingle = lazy(() => import('../components/Template/TemplateSingle'))
+import Empty from '../components/Empty';
+import CustomHashRouter from '../components/CustomHashRouter';
+import withRouterHooks from '../utilities/withRouterHooks';
+const TemplateList = lazy(() => import('../components/Template/TemplateList'));
+const TemplateSingle = lazy(
+ () => import('../components/Template/TemplateSingle')
+);
/**
* React Router v3 Routes with our Redux store integrated
@@ -14,7 +18,7 @@ const TemplateSingle = lazy(() => import('../components/Template/TemplateSingle'
* Once React Router v4 becomes stable we'll update as required, or if we need to decouple our
* routes for another module.
*
- * @package Gravity PDF
+ * @package Gravity PDF
* @copyright Copyright (c) 2024, Blue Liquid Designs
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
* @since 4.1
@@ -33,56 +37,73 @@ const TemplateSingle = lazy(() => import('../components/Template/TemplateSingle'
* @since 4.1
*/
export const Routes = () => (
- {GFPDF.spinnerAlt} 
')
- return $spinner
+export function spinner(classname) {
+ const $spinner = $(
+ '
'
+ );
+ return $spinner;
}
diff --git a/src/assets/js/admin/settings/common/doColorPicker.js b/src/assets/js/admin/settings/common/doColorPicker.js
index 2ba00dea7..1e4dbf190 100644
--- a/src/assets/js/admin/settings/common/doColorPicker.js
+++ b/src/assets/js/admin/settings/common/doColorPicker.js
@@ -1,15 +1,18 @@
-import $ from 'jquery'
+import $ from 'jquery';
/**
* Check if a Gravity PDF color picker field is present and initialise
- * @return void
+ *
* @since 4.0
*/
-export function doColorPicker () {
- $('.gfpdf-color-picker').each(function () {
- $(this).wpColorPicker({
- width: 300
- })
- $(this).parents('.wp-picker-container').find('.wp-color-result').addClass('ed_button')
- })
+export function doColorPicker() {
+ $('.gfpdf-color-picker').each(function () {
+ $(this).wpColorPicker({
+ width: 300,
+ });
+ $(this)
+ .parents('.wp-picker-container')
+ .find('.wp-color-result')
+ .addClass('ed_button');
+ });
}
diff --git a/src/assets/js/admin/settings/common/doUploadListener.js b/src/assets/js/admin/settings/common/doUploadListener.js
index 1589c31ad..77ac0a8f5 100644
--- a/src/assets/js/admin/settings/common/doUploadListener.js
+++ b/src/assets/js/admin/settings/common/doUploadListener.js
@@ -1,47 +1,50 @@
-import $ from 'jquery'
+import $ from 'jquery';
/**
* Rich Media Uploader
* JS Pulled straight from Easy Digital Download's admin-scripts.js
- * @return void
+ *
* @since 4.0
*/
-export function doUploadListener () {
- // WP 3.5+ uploader
- let fileFrame
- window.formfield = ''
-
- $('body').off('click', '.gfpdf_settings_upload_button').on('click', '.gfpdf_settings_upload_button', function (e) {
- e.preventDefault()
-
- const $button = $(this)
- window.formfield = $(this).prev()
-
- /* If the media frame already exists, reopen it. */
- if (fileFrame) {
- fileFrame.open()
- return
- }
-
- /* Create the media frame. */
- fileFrame = wp.media.frames.file_frame = wp.media({
- title: $button.data('uploader-title'),
- button: {
- text: $button.data('uploader-button-text')
- },
- multiple: false
- })
-
- /* When a file is selected, run a callback. */
- fileFrame.on('select', function () {
- const selection = fileFrame.state().get('selection')
- selection.each(function (attachment) {
- attachment = attachment.toJSON()
- window.formfield.val(attachment.url).trigger('change')
- })
- })
-
- /* Finally, open the modal */
- fileFrame.open()
- })
+export function doUploadListener() {
+ // WP 3.5+ uploader
+ let fileFrame;
+ window.formfield = '';
+
+ $('body')
+ .off('click', '.gfpdf_settings_upload_button')
+ .on('click', '.gfpdf_settings_upload_button', function (e) {
+ e.preventDefault();
+
+ window.formfield = $(this).prev();
+
+ /* If the media frame already exists, reopen it. */
+ if (fileFrame) {
+ fileFrame.open();
+ return;
+ }
+
+ const $button = $(this);
+
+ /* Create the media frame. */
+ fileFrame = wp.media.frames.file_frame = wp.media({
+ title: $button.data('uploader-title'),
+ button: {
+ text: $button.data('uploader-button-text'),
+ },
+ multiple: false,
+ });
+
+ /* When a file is selected, run a callback. */
+ fileFrame.on('select', function () {
+ const selection = fileFrame.state().get('selection');
+ selection.each(function (attachment) {
+ attachment = attachment.toJSON();
+ window.formfield.val(attachment.url).trigger('change');
+ });
+ });
+
+ /* Finally, open the modal */
+ fileFrame.open();
+ });
}
diff --git a/src/assets/js/admin/settings/common/dynamicTemplateFields/doMergetags.js b/src/assets/js/admin/settings/common/dynamicTemplateFields/doMergetags.js
index df113644c..296d2317e 100644
--- a/src/assets/js/admin/settings/common/dynamicTemplateFields/doMergetags.js
+++ b/src/assets/js/admin/settings/common/dynamicTemplateFields/doMergetags.js
@@ -1,27 +1,40 @@
-import $ from 'jquery'
+import $ from 'jquery';
/**
* Remove any existing merge tags and reinitialise
- * @return void
+ *
* @since 4.0
*/
-export function doMergetags () {
- if (window.gfMergeTags && typeof form !== 'undefined' && $('#gfpdf-fieldset-gfpdf_form_settings_template .merge-tag-support').length >= 0) {
- /* Initialise */
- $('#gfpdf-fieldset-gfpdf_form_settings_template .merge-tag-support').each(function () {
- new gfMergeTagsObj(form, $(this)) // eslint-disable-line
- })
+export function doMergetags() {
+ if (
+ window.gfMergeTags &&
+ typeof form !== 'undefined' &&
+ $('#gfpdf-fieldset-gfpdf_form_settings_template .merge-tag-support')
+ .length >= 0
+ ) {
+ /* Initialise */
+ $(
+ '#gfpdf-fieldset-gfpdf_form_settings_template .merge-tag-support'
+ ).each(function () {
+ new gfMergeTagsObj( form, $( this ) ); // eslint-disable-line
+ });
- /* Wrap merge tag selectors with new GF2.5 markup */
- $('#gfpdf-fieldset-gfpdf_form_settings_template .gform-settings-field').each(function () {
- $(this)
- .find('.merge-tag-support, .merge-tag-support + span')
- .wrapAll('')
+ /* Wrap merge tag selectors with new GF2.5 markup */
+ $(
+ '#gfpdf-fieldset-gfpdf_form_settings_template .gform-settings-field'
+ ).each(function () {
+ $(this)
+ .find('.merge-tag-support, .merge-tag-support + span')
+ .wrapAll(
+ ''
+ );
- $(this)
- .find('.all-merge-tags.textarea')
- .parent()
- .wrapAll('')
- })
- }
+ $(this)
+ .find('.all-merge-tags.textarea')
+ .parent()
+ .wrapAll(
+ ''
+ );
+ });
+ }
}
diff --git a/src/assets/js/admin/settings/common/dynamicTemplateFields/loadTinyMCEEditor.js b/src/assets/js/admin/settings/common/dynamicTemplateFields/loadTinyMCEEditor.js
index cd3c28388..88c50afdd 100644
--- a/src/assets/js/admin/settings/common/dynamicTemplateFields/loadTinyMCEEditor.js
+++ b/src/assets/js/admin/settings/common/dynamicTemplateFields/loadTinyMCEEditor.js
@@ -1,54 +1,72 @@
-import $ from 'jquery'
+import $ from 'jquery';
/**
* Initialises AJAX-loaded wp_editor TinyMCE containers for use
- * @param Array editors The DOM element IDs to parse
- * @param Object settings The TinyMCE settings to use
- * @return void
+ * @param { Array