newspack-components 3.0.0-alpha.1 → 3.0.0-alpha.3

package/dist/cjs/plugin-settings/index.js

@@ -1,178 +1,185 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _ = require("../");
 var _SettingsSection = _interopRequireDefault(require("./SettingsSection"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
+
 /**
  * WordPress dependencies.
  */
+
 /**
  * Internal dependencies.
  */
-const __ = _i18n.__;
+
 class PluginSettings extends _element.Component {
   constructor() {
     super(...arguments);
-    (0, _defineProperty2.default)(this, "fetchSettings", () => {
-      const {
-        afterFetch,
-        pluginSlug,
-        isWizard
-      } = this.props;
+    this.state = {
+      inFlight: false,
+      settings: {},
+      error: null
+    };
+  }
+  fetchSettings = () => {
+    const {
+      afterFetch,
+      pluginSlug,
+      isWizard
+    } = this.props;
+    this.setState({
+      inFlight: true
+    });
+    (0, _apiFetch.default)({
+      path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`
+    }).then(settings => {
       this.setState({
-        inFlight: true
+        settings,
+        error: null
       });
-      (0, _apiFetch.default)({
-        path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`
-      }).then(settings => {
-        this.setState({
-          settings,
-          error: null
-        });
-        if ('function' === typeof afterFetch) {
-          afterFetch(settings);
-        }
-      }).catch(error => {
-        this.setState({
-          error
-        });
-      }).finally(() => {
-        this.setState({
-          inFlight: false
-        });
+      if ('function' === typeof afterFetch) {
+        afterFetch(settings);
+      }
+    }).catch(error => {
+      this.setState({
+        error
+      });
+    }).finally(() => {
+      this.setState({
+        inFlight: false
       });
     });
-    (0, _defineProperty2.default)(this, "getSettingsValues", sectionKey => {
-      return this.state.settings[sectionKey]?.reduce((map, setting) => {
-        map[setting.key] = setting.value;
-        return map;
-      }, {}) || {};
+  };
+  componentDidMount() {
+    this.fetchSettings();
+  }
+  getSettingsValues = sectionKey => {
+    return this.state.settings[sectionKey]?.reduce((map, setting) => {
+      map[setting.key] = setting.value;
+      return map;
+    }, {}) || {};
+  };
+  handleSettingChange = sectionKey => (key, value) => {
+    const sectionSettings = [...this.state.settings[sectionKey]];
+    sectionSettings.forEach(setting => {
+      if (setting.key === key) {
+        setting.value = value;
+      }
     });
-    (0, _defineProperty2.default)(this, "handleSettingChange", sectionKey => (key, value) => {
-      const sectionSettings = [...this.state.settings[sectionKey]];
-      sectionSettings.forEach(setting => {
-        if (setting.key === key) {
-          setting.value = value;
-        }
-      });
+    this.setState({
+      settings: {
+        ...this.state.settings,
+        [sectionKey]: sectionSettings
+      }
+    });
+  };
+  handleSectionUpdate = sectionKey => data => {
+    const {
+      afterUpdate,
+      pluginSlug,
+      isWizard
+    } = this.props;
+    this.setState({
+      inFlight: true
+    });
+    (0, _apiFetch.default)({
+      path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`,
+      method: 'POST',
+      data: {
+        section: sectionKey,
+        settings: data ? data : this.getSettingsValues(sectionKey)
+      }
+    }).then(settings => {
       this.setState({
         settings: {
           ...this.state.settings,
-          [sectionKey]: sectionSettings
-        }
+          [sectionKey]: settings[sectionKey]
+        },
+        error: null
       });
-    });
-    (0, _defineProperty2.default)(this, "handleSectionUpdate", sectionKey => data => {
-      const {
-        afterUpdate,
-        pluginSlug,
-        isWizard
-      } = this.props;
+      if ('function' === typeof afterUpdate) {
+        afterUpdate(settings);
+      }
+    }).catch(error => {
       this.setState({
-        inFlight: true
+        error
       });
-      (0, _apiFetch.default)({
-        path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`,
-        method: 'POST',
-        data: {
-          section: sectionKey,
-          settings: data ? data : this.getSettingsValues(sectionKey)
-        }
-      }).then(settings => {
-        this.setState({
-          settings: {
-            ...this.state.settings,
-            [sectionKey]: settings[sectionKey]
-          },
-          error: null
-        });
-        if ('function' === typeof afterUpdate) {
-          afterUpdate(settings);
-        }
-      }).catch(error => {
-        this.setState({
-          error
-        });
-      }).finally(() => {
-        this.setState({
-          inFlight: false
-        });
+    }).finally(() => {
+      this.setState({
+        inFlight: false
       });
     });
-    /**
-     * Get the section setting containing section information.
-     *
-     * @param {string} sectionKey The section name.
-     * @return {Object} The section setting.
-     */
-    (0, _defineProperty2.default)(this, "getSectionInfo", sectionKey => {
-      return this.state.settings[sectionKey]?.find(setting => !setting.key || setting.key === 'active');
-    });
-    /**
-     * Get the section title.
-     *
-     * @param {string} sectionKey The section name.
-     * @return {string} The section title.
-     */
-    (0, _defineProperty2.default)(this, "getSectionTitle", sectionKey => {
-      return this.getSectionInfo(sectionKey)?.description;
-    });
-    /**
-     * Get the section description.
-     *
-     * @param {string} sectionKey The section name.
-     * @return {string} The section description.
-     */
-    (0, _defineProperty2.default)(this, "getSectionDescription", sectionKey => {
-      return this.getSectionInfo(sectionKey)?.help;
-    });
-    /**
-     * Get whether a section is active.
-     *
-     * @param {string} sectionKey The section name.
-     * @return {?boolean} Whether the section is active or not. Null if the section is not found or does not support activation.
-     */
-    (0, _defineProperty2.default)(this, "isSectionActive", sectionKey => {
-      const {
-        settings
-      } = this.state;
-      const activation = settings[sectionKey]?.find(setting => setting.key === 'active');
-      if (!activation) {
-        return null;
-      }
-      return activation.value;
-    });
-    /**
-     * Get list of section field settings.
-     *
-     * @param {string} sectionKey The section name.
-     * @return {?Array} List of section fields.
-     */
-    (0, _defineProperty2.default)(this, "getSectionFields", sectionKey => {
-      return this.state.settings[sectionKey]?.filter(setting => setting.key && setting.key !== 'active');
-    });
-    this.state = {
-      inFlight: false,
-      settings: {},
-      error: null
-    };
-  }
-  componentDidMount() {
-    this.fetchSettings();
-  }
+  };
+
+  /**
+   * Get the section setting containing section information.
+   *
+   * @param {string} sectionKey The section name.
+   * @return {Object} The section setting.
+   */
+  getSectionInfo = sectionKey => {
+    return this.state.settings[sectionKey]?.find(setting => !setting.key || setting.key === 'active');
+  };
+
+  /**
+   * Get the section title.
+   *
+   * @param {string} sectionKey The section name.
+   * @return {string} The section title.
+   */
+  getSectionTitle = sectionKey => {
+    return this.getSectionInfo(sectionKey)?.description;
+  };
+
+  /**
+   * Get the section description.
+   *
+   * @param {string} sectionKey The section name.
+   * @return {string} The section description.
+   */
+  getSectionDescription = sectionKey => {
+    return this.getSectionInfo(sectionKey)?.help;
+  };
+
+  /**
+   * Get whether a section is active.
+   *
+   * @param {string} sectionKey The section name.
+   * @return {?boolean} Whether the section is active or not. Null if the section is not found or does not support activation.
+   */
+  isSectionActive = sectionKey => {
+    const {
+      settings
+    } = this.state;
+    const activation = settings[sectionKey]?.find(setting => setting.key === 'active');
+    if (!activation) {
+      return null;
+    }
+    return activation.value;
+  };
+
+  /**
+   * Get list of section field settings.
+   *
+   * @param {string} sectionKey The section name.
+   * @return {?Array} List of section fields.
+   */
+  getSectionFields = sectionKey => {
+    return this.state.settings[sectionKey]?.filter(setting => setting.key && setting.key !== 'active');
+  };
+
   /**
    * Render.
    */
@@ -188,18 +195,18 @@ class PluginSettings extends _element.Component {
       inFlight,
       error
     } = this.state;
-    return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-      children: [title && (0, _jsxRuntime.jsx)(_.SectionHeader, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SectionHeader, {
         title: title,
         description: description
-      }), error && (0, _jsxRuntime.jsx)(_.Notice, {
+      }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
         isError: true,
         noticeText: error.message
-      }), (0, _jsxRuntime.jsxs)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _classnames.default)('newspack-plugin-settings', {
           'newspack-wizard-section__is-loading': inFlight && !Object.keys(settings).length
         }),
-        children: [Object.keys(settings).map(sectionKey => (0, _jsxRuntime.jsx)(_SettingsSection.default, {
+        children: [Object.keys(settings).map(sectionKey => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsSection.default, {
           disabled: inFlight,
           sectionKey: sectionKey,
           title: this.getSectionTitle(sectionKey),
@@ -215,7 +222,7 @@ class PluginSettings extends _element.Component {
   }
 }
 PluginSettings.defaultProps = {
-  title: __('General Settings', 'newspack-plugin')
+  title: (0, _i18n.__)('General Settings', 'newspack-plugin')
 };
 PluginSettings.Section = _SettingsSection.default;
 var _default = exports.default = PluginSettings;

package/dist/cjs/plugin-settings/style.scss

@@ -1,4 +1,4 @@
-.newspack-card:not( .newspack-settings__no-border ) {
+.newspack-card:not(.newspack-settings__no-border) {
 	.newspack-action-card__region-children {
 		> .newspack-grid {
 			margin: 32px 0 0 !important;