newspack-components 4.3.0 → 4.4.0-alpha.1

package/dist/esm/plugin-settings/SettingsSection.js

@@ -1,3 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Ads Settings Section.
  */
@@ -16,10 +20,10 @@ import { CheckboxControl } from '@wordpress/components';
 import { ActionCard, Button, Grid, Notice, SelectControl, TextControl } from '../';
 import './style.scss';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const isSelectControl = setting => {
+var isSelectControl = function isSelectControl(setting) {
   return Array.isArray(setting.options) && setting.options.length;
 };
-const getControlComponent = setting => {
+var getControlComponent = function getControlComponent(setting) {
   if (isSelectControl(setting)) {
     return SelectControl;
   }
@@ -31,7 +35,7 @@ const getControlComponent = setting => {
       return TextControl;
   }
 };
-const getControlType = setting => {
+var getControlType = function getControlType(setting) {
   switch (setting.type) {
     case 'int':
     case 'integer':
@@ -50,42 +54,49 @@ const getControlType = setting => {
       return null;
   }
 };
-const SettingsSection = props => {
+var SettingsSection = function SettingsSection(props) {
   var _props$id;
-  const [saveDisabled, setSaveDisabled] = useState(true);
-  const {
-    error,
-    sectionKey,
-    active,
-    title,
-    description,
-    fields,
-    disabled,
-    onChange,
-    onUpdate
-  } = props;
-  const getControlProps = setting => ({
-    disabled,
-    name: `${setting.section}_${setting.key}`,
-    type: getControlType(setting),
-    label: setting.description,
-    help: setting.help || null,
-    options: setting.options?.map(option => ({
-      value: option.value,
-      label: option.name || option.label
-    })) || null,
-    value: setting.value,
-    multiple: isSelectControl(setting) && setting.multiple ? true : null,
-    checked: setting.type === 'boolean' ? !!setting.value : null,
-    onChange: value => {
-      onChange(setting.key, value);
-      setSaveDisabled(false);
-    }
-  });
-  const createFilter = (name, defaultComponent = null) => {
-    return applyFilters(`newspack.settingSection.${sectionKey}.${name}`, defaultComponent, props);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    saveDisabled = _useState2[0],
+    setSaveDisabled = _useState2[1];
+  var error = props.error,
+    sectionKey = props.sectionKey,
+    active = props.active,
+    title = props.title,
+    description = props.description,
+    fields = props.fields,
+    disabled = props.disabled,
+    _onChange = props.onChange,
+    onUpdate = props.onUpdate;
+  var getControlProps = function getControlProps(setting) {
+    var _setting$options;
+    return {
+      disabled: disabled,
+      name: "".concat(setting.section, "_").concat(setting.key),
+      type: getControlType(setting),
+      label: setting.description,
+      help: setting.help || null,
+      options: ((_setting$options = setting.options) === null || _setting$options === void 0 ? void 0 : _setting$options.map(function (option) {
+        return {
+          value: option.value,
+          label: option.name || option.label
+        };
+      })) || null,
+      value: setting.value,
+      multiple: isSelectControl(setting) && setting.multiple ? true : null,
+      checked: setting.type === 'boolean' ? !!setting.value : null,
+      onChange: function onChange(value) {
+        _onChange(setting.key, value);
+        setSaveDisabled(false);
+      }
+    };
+  };
+  var createFilter = function createFilter(name) {
+    var defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    return applyFilters("newspack.settingSection.".concat(sectionKey, ".").concat(name), defaultComponent, props);
   };
-  let columns = 2;
+  var columns = 2;
   if (fields.length % 3 === 0) {
     columns = 3;
   } else if (fields.length === 1) {
@@ -99,33 +110,33 @@ const SettingsSection = props => {
     description: description,
     toggleChecked: active,
     hasGreyHeader: active || null === active,
-    toggleOnChange: active !== null ? value => onUpdate({
-      active: value
-    }) : null,
+    toggleOnChange: active !== null ? function (value) {
+      return onUpdate({
+        active: value
+      });
+    } : null,
     actionContent: (active || null === active) && createFilter('buttons', /*#__PURE__*/_jsx(Button, {
       variant: "primary",
       disabled: disabled || saveDisabled,
-      onClick: () => {
+      onClick: function onClick() {
         onUpdate();
         setSaveDisabled(true);
       },
       children: __('Save Settings', 'newspack')
     })),
     children: (active || active === null) && /*#__PURE__*/_jsxs(Fragment, {
-      children: [error?.message && /*#__PURE__*/_jsx(Notice, {
+      children: [(error === null || error === void 0 ? void 0 : error.message) && /*#__PURE__*/_jsx(Notice, {
         noticeText: error.message,
         isError: true
       }), createFilter('beforeControls'), /*#__PURE__*/_jsx(Grid, {
         columns: columns,
         gutter: 32,
-        children: fields.map(setting => {
-          const Control = getControlComponent(setting); // eslint-disable-line @wordpress/no-unused-vars-before-return, no-unused-vars
-          return applyFilters(`newspack.settingsSection.${sectionKey}.control`, /*#__PURE__*/_jsx(Control, {
-            ...getControlProps(setting)
-          }, setting.key), {
-            sectionKey,
-            setting,
-            onChange
+        children: fields.map(function (setting) {
+          var Control = getControlComponent(setting); // eslint-disable-line @wordpress/no-unused-vars-before-return, no-unused-vars
+          return applyFilters("newspack.settingsSection.".concat(sectionKey, ".control"), /*#__PURE__*/_jsx(Control, _objectSpread({}, getControlProps(setting)), setting.key), {
+            sectionKey: sectionKey,
+            setting: setting,
+            onChange: _onChange
           });
         })
       })]

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

@@ -1,3 +1,14 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * External dependencies
  */
@@ -16,206 +27,218 @@ import { __ } from '@wordpress/i18n';
 import { SectionHeader, Notice } from '../';
 import SettingsSection from './SettingsSection';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-class PluginSettings extends Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      inFlight: false,
-      settings: {},
-      error: null
-    };
-  }
-  fetchSettings = () => {
-    const {
-      afterFetch,
-      pluginSlug,
-      isWizard
-    } = this.props;
-    this.setState({
-      inFlight: true
-    });
-    apiFetch({
-      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
+var PluginSettings = /*#__PURE__*/function (_Component) {
+  function PluginSettings() {
+    var _this;
+    _classCallCheck(this, PluginSettings);
+    _this = _callSuper(this, PluginSettings, arguments);
+    _defineProperty(_this, "fetchSettings", function () {
+      var _this$props = _this.props,
+        afterFetch = _this$props.afterFetch,
+        pluginSlug = _this$props.pluginSlug,
+        isWizard = _this$props.isWizard;
+      _this.setState({
+        inFlight: true
       });
-    }).finally(() => {
-      this.setState({
-        inFlight: false
+      apiFetch({
+        path: isWizard ? "/newspack/v1/wizard/".concat(pluginSlug, "/settings") : "/".concat(pluginSlug, "/v1/settings")
+      }).then(function (settings) {
+        _this.setState({
+          settings: settings,
+          error: null
+        });
+        if ('function' === typeof afterFetch) {
+          afterFetch(settings);
+        }
+      })["catch"](function (error) {
+        _this.setState({
+          error: error
+        });
+      })["finally"](function () {
+        _this.setState({
+          inFlight: false
+        });
       });
     });
-  };
-  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;
-      }
+    _defineProperty(_this, "getSettingsValues", function (sectionKey) {
+      var _this$state$settings$;
+      return ((_this$state$settings$ = _this.state.settings[sectionKey]) === null || _this$state$settings$ === void 0 ? void 0 : _this$state$settings$.reduce(function (map, setting) {
+        map[setting.key] = setting.value;
+        return map;
+      }, {})) || {};
     });
-    this.setState({
-      settings: {
-        ...this.state.settings,
-        [sectionKey]: sectionSettings
-      }
+    _defineProperty(_this, "handleSettingChange", function (sectionKey) {
+      return function (key, value) {
+        var sectionSettings = _toConsumableArray(_this.state.settings[sectionKey]);
+        sectionSettings.forEach(function (setting) {
+          if (setting.key === key) {
+            setting.value = value;
+          }
+        });
+        _this.setState({
+          settings: _objectSpread(_objectSpread({}, _this.state.settings), {}, _defineProperty({}, sectionKey, sectionSettings))
+        });
+      };
     });
-  };
-  handleSectionUpdate = sectionKey => data => {
-    const {
-      afterUpdate,
-      pluginSlug,
-      isWizard
-    } = this.props;
-    this.setState({
-      inFlight: true
+    _defineProperty(_this, "handleSectionUpdate", function (sectionKey) {
+      return function (data) {
+        var _this$props2 = _this.props,
+          afterUpdate = _this$props2.afterUpdate,
+          pluginSlug = _this$props2.pluginSlug,
+          isWizard = _this$props2.isWizard;
+        _this.setState({
+          inFlight: true
+        });
+        apiFetch({
+          path: isWizard ? "/newspack/v1/wizard/".concat(pluginSlug, "/settings") : "/".concat(pluginSlug, "/v1/settings"),
+          method: 'POST',
+          data: {
+            section: sectionKey,
+            settings: data ? data : _this.getSettingsValues(sectionKey)
+          }
+        }).then(function (settings) {
+          _this.setState({
+            settings: _objectSpread(_objectSpread({}, _this.state.settings), {}, _defineProperty({}, sectionKey, settings[sectionKey])),
+            error: null
+          });
+          if ('function' === typeof afterUpdate) {
+            afterUpdate(settings);
+          }
+        })["catch"](function (error) {
+          _this.setState({
+            error: error
+          });
+        })["finally"](function () {
+          _this.setState({
+            inFlight: false
+          });
+        });
+      };
     });
-    apiFetch({
-      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
+    /**
+     * Get the section setting containing section information.
+     *
+     * @param {string} sectionKey The section name.
+     * @return {Object} The section setting.
+     */
+    _defineProperty(_this, "getSectionInfo", function (sectionKey) {
+      var _this$state$settings$2;
+      return (_this$state$settings$2 = _this.state.settings[sectionKey]) === null || _this$state$settings$2 === void 0 ? void 0 : _this$state$settings$2.find(function (setting) {
+        return !setting.key || setting.key === 'active';
       });
-    }).finally(() => {
-      this.setState({
-        inFlight: false
+    });
+    /**
+     * Get the section title.
+     *
+     * @param {string} sectionKey The section name.
+     * @return {string} The section title.
+     */
+    _defineProperty(_this, "getSectionTitle", function (sectionKey) {
+      var _this$getSectionInfo;
+      return (_this$getSectionInfo = _this.getSectionInfo(sectionKey)) === null || _this$getSectionInfo === void 0 ? void 0 : _this$getSectionInfo.description;
+    });
+    /**
+     * Get the section description.
+     *
+     * @param {string} sectionKey The section name.
+     * @return {string} The section description.
+     */
+    _defineProperty(_this, "getSectionDescription", function (sectionKey) {
+      var _this$getSectionInfo2;
+      return (_this$getSectionInfo2 = _this.getSectionInfo(sectionKey)) === null || _this$getSectionInfo2 === void 0 ? void 0 : _this$getSectionInfo2.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.
+     */
+    _defineProperty(_this, "isSectionActive", function (sectionKey) {
+      var _settings$sectionKey;
+      var settings = _this.state.settings;
+      var activation = (_settings$sectionKey = settings[sectionKey]) === null || _settings$sectionKey === void 0 ? void 0 : _settings$sectionKey.find(function (setting) {
+        return setting.key === 'active';
       });
+      if (!activation) {
+        return null;
+      }
+      return activation.value;
     });
-  };
-
-  /**
-   * 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.
-   */
-  render() {
-    const {
-      title,
-      description,
-      hasGreyHeader,
-      children,
-      titleLevel = 1
-    } = this.props;
-    const {
-      settings,
-      inFlight,
-      error
-    } = this.state;
-    return /*#__PURE__*/_jsxs(Fragment, {
-      children: [title && /*#__PURE__*/_jsx(SectionHeader, {
-        title: title,
-        heading: titleLevel,
-        description: description
-      }), error && /*#__PURE__*/_jsx(Notice, {
-        isError: true,
-        noticeText: error.message
-      }), /*#__PURE__*/_jsxs("div", {
-        className: classnames('newspack-plugin-settings', {
-          'newspack-wizard-section__is-loading': inFlight && !Object.keys(settings).length
-        }),
-        children: [Object.keys(settings).map(sectionKey => /*#__PURE__*/_jsx(SettingsSection, {
-          disabled: inFlight,
-          id: `plugin-settings-${sectionKey}`,
-          sectionKey: sectionKey,
-          title: this.getSectionTitle(sectionKey),
-          description: this.getSectionDescription(sectionKey),
-          active: this.isSectionActive(sectionKey),
-          fields: this.getSectionFields(sectionKey),
-          onChange: this.handleSettingChange(sectionKey),
-          onUpdate: this.handleSectionUpdate(sectionKey),
-          hasGreyHeader: hasGreyHeader
-        }, sectionKey)), children]
-      })]
+    /**
+     * Get list of section field settings.
+     *
+     * @param {string} sectionKey The section name.
+     * @return {?Array} List of section fields.
+     */
+    _defineProperty(_this, "getSectionFields", function (sectionKey) {
+      var _this$state$settings$3;
+      return (_this$state$settings$3 = _this.state.settings[sectionKey]) === null || _this$state$settings$3 === void 0 ? void 0 : _this$state$settings$3.filter(function (setting) {
+        return setting.key && setting.key !== 'active';
+      });
     });
+    _this.state = {
+      inFlight: false,
+      settings: {},
+      error: null
+    };
+    return _this;
   }
-}
+  _inherits(PluginSettings, _Component);
+  return _createClass(PluginSettings, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.fetchSettings();
+    }
+  }, {
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this2 = this;
+      var _this$props3 = this.props,
+        title = _this$props3.title,
+        description = _this$props3.description,
+        hasGreyHeader = _this$props3.hasGreyHeader,
+        children = _this$props3.children,
+        _this$props3$titleLev = _this$props3.titleLevel,
+        titleLevel = _this$props3$titleLev === void 0 ? 1 : _this$props3$titleLev;
+      var _this$state = this.state,
+        settings = _this$state.settings,
+        inFlight = _this$state.inFlight,
+        error = _this$state.error;
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [title && /*#__PURE__*/_jsx(SectionHeader, {
+          title: title,
+          heading: titleLevel,
+          description: description
+        }), error && /*#__PURE__*/_jsx(Notice, {
+          isError: true,
+          noticeText: error.message
+        }), /*#__PURE__*/_jsxs("div", {
+          className: classnames('newspack-plugin-settings', {
+            'newspack-wizard-section__is-loading': inFlight && !Object.keys(settings).length
+          }),
+          children: [Object.keys(settings).map(function (sectionKey) {
+            return /*#__PURE__*/_jsx(SettingsSection, {
+              disabled: inFlight,
+              id: "plugin-settings-".concat(sectionKey),
+              sectionKey: sectionKey,
+              title: _this2.getSectionTitle(sectionKey),
+              description: _this2.getSectionDescription(sectionKey),
+              active: _this2.isSectionActive(sectionKey),
+              fields: _this2.getSectionFields(sectionKey),
+              onChange: _this2.handleSettingChange(sectionKey),
+              onUpdate: _this2.handleSectionUpdate(sectionKey),
+              hasGreyHeader: hasGreyHeader
+            }, sectionKey);
+          }), children]
+        })]
+      });
+    }
+  }]);
+}(Component);
 PluginSettings.defaultProps = {
   title: __('General Settings', 'newspack-plugin')
 };