newspack-components 4.3.0 → 4.4.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (263) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/DEVELOPMENT.md +868 -0
  3. package/colors/colors.module.scss +52 -2
  4. package/copy-styles.js +3 -2
  5. package/dist/cjs/accordion/index.js +17 -12
  6. package/dist/cjs/action-card/index.js +176 -139
  7. package/dist/cjs/autocomplete-tokenfield/index.js +254 -234
  8. package/dist/cjs/autocomplete-with-latest-posts/index.js +172 -110
  9. package/dist/cjs/autocomplete-with-suggestions/index.js +229 -126
  10. package/dist/cjs/badge/index.js +7 -7
  11. package/dist/cjs/box-contrast/index.js +19 -15
  12. package/dist/cjs/button/index.js +41 -26
  13. package/dist/cjs/button-props/button-props.js +5 -5
  14. package/dist/cjs/button-props/index.js +2 -2
  15. package/dist/cjs/card/core-card.js +110 -52
  16. package/dist/cjs/card/index.js +74 -67
  17. package/dist/cjs/card/style-core.scss +93 -25
  18. package/dist/cjs/card/style.scss +2 -2
  19. package/dist/cjs/card-feature/index.js +141 -0
  20. package/dist/cjs/card-feature/style.scss +75 -0
  21. package/dist/cjs/card-form/index.js +144 -0
  22. package/dist/cjs/card-form/style.scss +20 -0
  23. package/dist/cjs/card-settings-group/index.js +36 -16
  24. package/dist/cjs/card-sortable-list/index.js +176 -140
  25. package/dist/cjs/category-autocomplete/index.js +175 -155
  26. package/dist/cjs/color-picker/index.js +41 -23
  27. package/dist/cjs/color-picker/index.test.js +82 -0
  28. package/dist/cjs/color-picker/style.scss +11 -13
  29. package/dist/cjs/confirm-dialog/index.js +86 -22
  30. package/dist/cjs/consts.js +1 -1
  31. package/dist/cjs/custom-select-control/index.js +39 -28
  32. package/dist/cjs/dataviews/index.js +38 -0
  33. package/dist/cjs/dataviews/style.scss +9 -0
  34. package/dist/cjs/divider/index.js +26 -21
  35. package/dist/cjs/footer/index.js +36 -30
  36. package/dist/cjs/form-token-field/index.js +51 -40
  37. package/dist/cjs/global-notices/index.js +5 -5
  38. package/dist/cjs/grid/index.js +25 -19
  39. package/dist/cjs/grid/style.scss +6 -1
  40. package/dist/cjs/handoff/index.js +204 -156
  41. package/dist/cjs/handoff-message/index.js +12 -7
  42. package/dist/cjs/hooks/index.js +10 -8
  43. package/dist/cjs/hooks/use-confirm-dialog.js +79 -0
  44. package/dist/cjs/hooks/use-unsaved-changes-dialog.js +144 -0
  45. package/dist/cjs/hooks/useObjectState.js +21 -12
  46. package/dist/cjs/hooks/useObjectState.test.js +55 -33
  47. package/dist/cjs/hooks/useOnClickOutside.js +6 -6
  48. package/dist/cjs/hooks/usePrompt.js +10 -13
  49. package/dist/cjs/image-upload/index.js +114 -123
  50. package/dist/cjs/image-upload/index.test.js +11 -13
  51. package/dist/cjs/image-upload/style.scss +12 -40
  52. package/dist/cjs/index.js +136 -104
  53. package/dist/cjs/info-button/index.js +43 -32
  54. package/dist/cjs/integration-icons/active-campaign.js +22 -0
  55. package/dist/cjs/integration-icons/constant-contact.js +28 -0
  56. package/dist/cjs/integration-icons/fundraise-up.js +25 -0
  57. package/dist/cjs/integration-icons/index.js +48 -0
  58. package/dist/cjs/integration-icons/mailchimp.js +19 -0
  59. package/dist/cjs/integration-icons/salesforce.js +17 -0
  60. package/dist/cjs/integration-icons/wisepops.js +20 -0
  61. package/dist/cjs/modal/index.js +22 -19
  62. package/dist/cjs/modal/style.scss +4 -0
  63. package/dist/cjs/newspack-icon/index.js +45 -38
  64. package/dist/cjs/notice/index.js +64 -55
  65. package/dist/cjs/plugin-installer/index.js +259 -253
  66. package/dist/cjs/plugin-settings/SettingsSection.js +66 -60
  67. package/dist/cjs/plugin-settings/index.js +217 -200
  68. package/dist/cjs/plugin-toggle/index.js +192 -199
  69. package/dist/cjs/popover/index.js +41 -28
  70. package/dist/cjs/position-control/index.js +24 -23
  71. package/dist/cjs/progress-bar/index.js +71 -59
  72. package/dist/cjs/progress-bar/index.test.js +62 -68
  73. package/dist/cjs/proxied-imports/router.js +3 -3
  74. package/dist/cjs/radio-control/index.js +40 -27
  75. package/dist/cjs/section-header/index.js +103 -58
  76. package/dist/cjs/section-header/style.scss +31 -11
  77. package/dist/cjs/select-control/ButtonGroupControl.js +26 -21
  78. package/dist/cjs/select-control/GroupedSelectControl.js +41 -35
  79. package/dist/cjs/select-control/index.js +52 -40
  80. package/dist/cjs/settings/MinMaxSetting.js +30 -20
  81. package/dist/cjs/settings/SettingsCard.js +20 -17
  82. package/dist/cjs/settings/SettingsSection.js +22 -21
  83. package/dist/cjs/settings/index.js +5 -5
  84. package/dist/cjs/sortable-newsletter-list-control/index.js +78 -57
  85. package/dist/cjs/steps-list/index.js +44 -34
  86. package/dist/cjs/steps-list-item/index.js +47 -39
  87. package/dist/cjs/style-card/index.js +70 -63
  88. package/dist/cjs/tabbed-navigation/index.js +38 -36
  89. package/dist/cjs/text-control/index.js +27 -25
  90. package/dist/cjs/utils/color.js +4 -4
  91. package/dist/cjs/utils/editor-toolbar-back-button.js +61 -0
  92. package/dist/cjs/utils/index.js +31 -19
  93. package/dist/cjs/utils/style.scss +8 -0
  94. package/dist/cjs/waiting/index.js +48 -37
  95. package/dist/cjs/web-preview/index.js +217 -211
  96. package/dist/cjs/with-wizard/index.js +362 -364
  97. package/dist/cjs/with-wizard/style.scss +4 -54
  98. package/dist/cjs/with-wizard-screen/index.js +54 -58
  99. package/dist/cjs/with-wizard-screen/style.scss +41 -3
  100. package/dist/cjs/wizard/components/WizardError.js +20 -18
  101. package/dist/cjs/wizard/components/WizardSnackbar.js +26 -23
  102. package/dist/cjs/wizard/index.js +176 -114
  103. package/dist/cjs/wizard/store/index.js +171 -123
  104. package/dist/cjs/wizard/store/utils.js +13 -8
  105. package/dist/esm/accordion/index.js +14 -9
  106. package/dist/esm/action-card/index.js +168 -123
  107. package/dist/esm/autocomplete-tokenfield/index.js +248 -222
  108. package/dist/esm/autocomplete-with-latest-posts/index.js +169 -103
  109. package/dist/esm/autocomplete-with-suggestions/index.js +226 -119
  110. package/dist/esm/badge/index.js +5 -5
  111. package/dist/esm/box-contrast/index.js +15 -11
  112. package/dist/esm/button/index.js +39 -21
  113. package/dist/esm/button-props/button-props.js +1 -1
  114. package/dist/esm/card/core-card.js +109 -47
  115. package/dist/esm/card/index.js +69 -54
  116. package/dist/esm/card/style-core.scss +93 -25
  117. package/dist/esm/card/style.scss +2 -2
  118. package/dist/esm/card-feature/index.js +131 -0
  119. package/dist/esm/card-feature/style.scss +75 -0
  120. package/dist/esm/card-form/index.js +134 -0
  121. package/dist/esm/card-form/style.scss +20 -0
  122. package/dist/esm/card-settings-group/index.js +33 -14
  123. package/dist/esm/card-sortable-list/index.js +170 -126
  124. package/dist/esm/category-autocomplete/index.js +168 -140
  125. package/dist/esm/color-picker/index.js +39 -21
  126. package/dist/esm/color-picker/index.test.js +78 -0
  127. package/dist/esm/color-picker/style.scss +11 -13
  128. package/dist/esm/confirm-dialog/index.js +85 -18
  129. package/dist/esm/consts.js +1 -1
  130. package/dist/esm/custom-select-control/index.js +34 -15
  131. package/dist/esm/dataviews/index.js +34 -0
  132. package/dist/esm/dataviews/style.scss +9 -0
  133. package/dist/esm/divider/index.js +24 -16
  134. package/dist/esm/footer/index.js +34 -28
  135. package/dist/esm/form-token-field/index.js +46 -27
  136. package/dist/esm/global-notices/index.js +3 -3
  137. package/dist/esm/grid/index.js +23 -14
  138. package/dist/esm/grid/style.scss +6 -1
  139. package/dist/esm/handoff/index.js +199 -143
  140. package/dist/esm/handoff-message/index.js +10 -6
  141. package/dist/esm/hooks/index.js +8 -6
  142. package/dist/esm/hooks/use-confirm-dialog.js +73 -0
  143. package/dist/esm/hooks/use-unsaved-changes-dialog.js +136 -0
  144. package/dist/esm/hooks/useObjectState.js +19 -9
  145. package/dist/esm/hooks/useObjectState.test.js +54 -32
  146. package/dist/esm/hooks/useOnClickOutside.js +4 -4
  147. package/dist/esm/hooks/usePrompt.js +9 -11
  148. package/dist/esm/image-upload/index.js +110 -111
  149. package/dist/esm/image-upload/index.test.js +11 -13
  150. package/dist/esm/image-upload/style.scss +12 -40
  151. package/dist/esm/index.js +7 -1
  152. package/dist/esm/info-button/index.js +38 -19
  153. package/dist/esm/integration-icons/active-campaign.js +16 -0
  154. package/dist/esm/integration-icons/constant-contact.js +22 -0
  155. package/dist/esm/integration-icons/fundraise-up.js +19 -0
  156. package/dist/esm/integration-icons/index.js +6 -0
  157. package/dist/esm/integration-icons/mailchimp.js +13 -0
  158. package/dist/esm/integration-icons/salesforce.js +11 -0
  159. package/dist/esm/integration-icons/wisepops.js +14 -0
  160. package/dist/esm/modal/index.js +20 -13
  161. package/dist/esm/modal/style.scss +4 -0
  162. package/dist/esm/newspack-icon/index.js +40 -25
  163. package/dist/esm/notice/index.js +59 -42
  164. package/dist/esm/plugin-installer/index.js +255 -243
  165. package/dist/esm/plugin-settings/SettingsSection.js +61 -50
  166. package/dist/esm/plugin-settings/index.js +212 -189
  167. package/dist/esm/plugin-toggle/index.js +187 -190
  168. package/dist/esm/popover/index.js +35 -16
  169. package/dist/esm/position-control/index.js +22 -18
  170. package/dist/esm/progress-bar/index.js +66 -49
  171. package/dist/esm/progress-bar/index.test.js +61 -67
  172. package/dist/esm/radio-control/index.js +34 -15
  173. package/dist/esm/section-header/index.js +102 -57
  174. package/dist/esm/section-header/style.scss +31 -11
  175. package/dist/esm/select-control/ButtonGroupControl.js +23 -18
  176. package/dist/esm/select-control/GroupedSelectControl.js +38 -30
  177. package/dist/esm/select-control/index.js +47 -27
  178. package/dist/esm/settings/MinMaxSetting.js +27 -16
  179. package/dist/esm/settings/SettingsCard.js +18 -13
  180. package/dist/esm/settings/SettingsSection.js +20 -19
  181. package/dist/esm/settings/index.js +3 -3
  182. package/dist/esm/sortable-newsletter-list-control/index.js +74 -53
  183. package/dist/esm/steps-list/index.js +39 -21
  184. package/dist/esm/steps-list-item/index.js +42 -26
  185. package/dist/esm/style-card/index.js +65 -50
  186. package/dist/esm/tabbed-navigation/index.js +35 -33
  187. package/dist/esm/text-control/index.js +25 -19
  188. package/dist/esm/utils/color.js +4 -4
  189. package/dist/esm/utils/editor-toolbar-back-button.js +53 -0
  190. package/dist/esm/utils/index.js +29 -16
  191. package/dist/esm/utils/style.scss +8 -0
  192. package/dist/esm/waiting/index.js +43 -24
  193. package/dist/esm/web-preview/index.js +213 -201
  194. package/dist/esm/with-wizard/index.js +360 -358
  195. package/dist/esm/with-wizard/style.scss +4 -54
  196. package/dist/esm/with-wizard-screen/index.js +48 -46
  197. package/dist/esm/with-wizard-screen/style.scss +41 -3
  198. package/dist/esm/wizard/components/WizardError.js +18 -16
  199. package/dist/esm/wizard/components/WizardSnackbar.js +23 -17
  200. package/dist/esm/wizard/index.js +171 -103
  201. package/dist/esm/wizard/store/index.js +169 -116
  202. package/dist/esm/wizard/store/utils.js +13 -6
  203. package/package.json +30 -16
  204. package/release.config.js +1 -0
  205. package/shared/hooks/use-coauthors.js +195 -27
  206. package/shared/hooks/use-coauthors.test.js +232 -6
  207. package/shared/scss/_mixins.scss +13 -5
  208. package/src/accordion/index.js +8 -7
  209. package/src/action-card/index.js +15 -1
  210. package/src/badge/index.tsx +3 -1
  211. package/src/card/core-card.js +95 -18
  212. package/src/card/index.js +1 -0
  213. package/src/card/style-core.scss +93 -25
  214. package/src/card/style.scss +2 -2
  215. package/src/card-feature/README.md +188 -0
  216. package/src/card-feature/index.tsx +186 -0
  217. package/src/card-feature/style.scss +75 -0
  218. package/src/card-form/README.md +113 -0
  219. package/src/card-form/index.tsx +128 -0
  220. package/src/card-form/style.scss +20 -0
  221. package/src/card-settings-group/index.tsx +28 -3
  222. package/src/card-sortable-list/index.tsx +27 -4
  223. package/src/color-picker/index.js +15 -8
  224. package/src/color-picker/index.test.js +52 -0
  225. package/src/color-picker/style.scss +11 -13
  226. package/src/confirm-dialog/README.md +128 -0
  227. package/src/confirm-dialog/index.tsx +74 -6
  228. package/src/dataviews/index.tsx +34 -0
  229. package/src/dataviews/style.scss +9 -0
  230. package/src/grid/style.scss +6 -1
  231. package/src/handoff/README.md +93 -0
  232. package/src/handoff/index.js +46 -8
  233. package/src/hooks/index.ts +2 -1
  234. package/src/hooks/use-confirm-dialog.tsx +80 -0
  235. package/src/hooks/use-unsaved-changes-dialog.tsx +140 -0
  236. package/src/image-upload/index.js +10 -15
  237. package/src/image-upload/style.scss +12 -40
  238. package/src/index.js +7 -1
  239. package/src/integration-icons/active-campaign.js +14 -0
  240. package/src/integration-icons/constant-contact.js +22 -0
  241. package/src/integration-icons/fundraise-up.js +18 -0
  242. package/src/integration-icons/index.js +6 -0
  243. package/src/integration-icons/mailchimp.js +10 -0
  244. package/src/integration-icons/salesforce.js +10 -0
  245. package/src/integration-icons/wisepops.js +14 -0
  246. package/src/modal/style.scss +4 -0
  247. package/src/plugin-installer/index.js +30 -19
  248. package/src/section-header/index.js +56 -24
  249. package/src/section-header/style.scss +31 -11
  250. package/src/select-control/index.js +4 -0
  251. package/src/utils/editor-toolbar-back-button.tsx +48 -0
  252. package/src/utils/index.js +6 -0
  253. package/src/utils/style.scss +8 -0
  254. package/src/with-wizard/style.scss +4 -54
  255. package/src/with-wizard-screen/style.scss +41 -3
  256. package/src/wizard/index.js +90 -53
  257. package/src/wizard/store/index.js +2 -2
  258. package/dist/cjs/button-card/index.js +0 -72
  259. package/dist/cjs/button-card/style.scss +0 -180
  260. package/dist/esm/button-card/index.js +0 -64
  261. package/dist/esm/button-card/style.scss +0 -180
  262. package/src/button-card/index.js +0 -52
  263. package/src/button-card/style.scss +0 -180
@@ -1,9 +1,12 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
6
- exports.default = void 0;
7
+ exports["default"] = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
7
10
  var _element = require("@wordpress/element");
8
11
  var _hooks = require("@wordpress/hooks");
9
12
  var _i18n = require("@wordpress/i18n");
@@ -11,22 +14,18 @@ var _components = require("@wordpress/components");
11
14
  var _ = require("../");
12
15
  require("./style.scss");
13
16
  var _jsxRuntime = require("react/jsx-runtime");
14
- /**
17
+ 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; }
18
+ 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) { (0, _defineProperty2["default"])(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; } /**
15
19
  * Ads Settings Section.
16
- */
17
-
18
- /**
20
+ */ /**
19
21
  * WordPress dependencies
20
- */
21
-
22
- /**
22
+ */ /**
23
23
  * Internal dependencies
24
24
  */
25
-
26
- const isSelectControl = setting => {
25
+ var isSelectControl = function isSelectControl(setting) {
27
26
  return Array.isArray(setting.options) && setting.options.length;
28
27
  };
29
- const getControlComponent = setting => {
28
+ var getControlComponent = function getControlComponent(setting) {
30
29
  if (isSelectControl(setting)) {
31
30
  return _.SelectControl;
32
31
  }
@@ -38,7 +37,7 @@ const getControlComponent = setting => {
38
37
  return _.TextControl;
39
38
  }
40
39
  };
41
- const getControlType = setting => {
40
+ var getControlType = function getControlType(setting) {
42
41
  switch (setting.type) {
43
42
  case 'int':
44
43
  case 'integer':
@@ -57,42 +56,49 @@ const getControlType = setting => {
57
56
  return null;
58
57
  }
59
58
  };
60
- const SettingsSection = props => {
59
+ var SettingsSection = function SettingsSection(props) {
61
60
  var _props$id;
62
- const [saveDisabled, setSaveDisabled] = (0, _element.useState)(true);
63
- const {
64
- error,
65
- sectionKey,
66
- active,
67
- title,
68
- description,
69
- fields,
70
- disabled,
71
- onChange,
72
- onUpdate
73
- } = props;
74
- const getControlProps = setting => ({
75
- disabled,
76
- name: `${setting.section}_${setting.key}`,
77
- type: getControlType(setting),
78
- label: setting.description,
79
- help: setting.help || null,
80
- options: setting.options?.map(option => ({
81
- value: option.value,
82
- label: option.name || option.label
83
- })) || null,
84
- value: setting.value,
85
- multiple: isSelectControl(setting) && setting.multiple ? true : null,
86
- checked: setting.type === 'boolean' ? !!setting.value : null,
87
- onChange: value => {
88
- onChange(setting.key, value);
89
- setSaveDisabled(false);
90
- }
91
- });
92
- const createFilter = (name, defaultComponent = null) => {
93
- return (0, _hooks.applyFilters)(`newspack.settingSection.${sectionKey}.${name}`, defaultComponent, props);
61
+ var _useState = (0, _element.useState)(true),
62
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
63
+ saveDisabled = _useState2[0],
64
+ setSaveDisabled = _useState2[1];
65
+ var error = props.error,
66
+ sectionKey = props.sectionKey,
67
+ active = props.active,
68
+ title = props.title,
69
+ description = props.description,
70
+ fields = props.fields,
71
+ disabled = props.disabled,
72
+ _onChange = props.onChange,
73
+ onUpdate = props.onUpdate;
74
+ var getControlProps = function getControlProps(setting) {
75
+ var _setting$options;
76
+ return {
77
+ disabled: disabled,
78
+ name: "".concat(setting.section, "_").concat(setting.key),
79
+ type: getControlType(setting),
80
+ label: setting.description,
81
+ help: setting.help || null,
82
+ options: ((_setting$options = setting.options) === null || _setting$options === void 0 ? void 0 : _setting$options.map(function (option) {
83
+ return {
84
+ value: option.value,
85
+ label: option.name || option.label
86
+ };
87
+ })) || null,
88
+ value: setting.value,
89
+ multiple: isSelectControl(setting) && setting.multiple ? true : null,
90
+ checked: setting.type === 'boolean' ? !!setting.value : null,
91
+ onChange: function onChange(value) {
92
+ _onChange(setting.key, value);
93
+ setSaveDisabled(false);
94
+ }
95
+ };
96
+ };
97
+ var createFilter = function createFilter(name) {
98
+ var defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
99
+ return (0, _hooks.applyFilters)("newspack.settingSection.".concat(sectionKey, ".").concat(name), defaultComponent, props);
94
100
  };
95
- let columns = 2;
101
+ var columns = 2;
96
102
  if (fields.length % 3 === 0) {
97
103
  columns = 3;
98
104
  } else if (fields.length === 1) {
@@ -106,37 +112,37 @@ const SettingsSection = props => {
106
112
  description: description,
107
113
  toggleChecked: active,
108
114
  hasGreyHeader: active || null === active,
109
- toggleOnChange: active !== null ? value => onUpdate({
110
- active: value
111
- }) : null,
115
+ toggleOnChange: active !== null ? function (value) {
116
+ return onUpdate({
117
+ active: value
118
+ });
119
+ } : null,
112
120
  actionContent: (active || null === active) && createFilter('buttons', /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
113
121
  variant: "primary",
114
122
  disabled: disabled || saveDisabled,
115
- onClick: () => {
123
+ onClick: function onClick() {
116
124
  onUpdate();
117
125
  setSaveDisabled(true);
118
126
  },
119
127
  children: (0, _i18n.__)('Save Settings', 'newspack')
120
128
  })),
121
129
  children: (active || active === null) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
122
- children: [error?.message && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
130
+ children: [(error === null || error === void 0 ? void 0 : error.message) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
123
131
  noticeText: error.message,
124
132
  isError: true
125
133
  }), createFilter('beforeControls'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Grid, {
126
134
  columns: columns,
127
135
  gutter: 32,
128
- children: fields.map(setting => {
129
- const Control = getControlComponent(setting); // eslint-disable-line @wordpress/no-unused-vars-before-return, no-unused-vars
130
- return (0, _hooks.applyFilters)(`newspack.settingsSection.${sectionKey}.control`, /*#__PURE__*/(0, _jsxRuntime.jsx)(Control, {
131
- ...getControlProps(setting)
132
- }, setting.key), {
133
- sectionKey,
134
- setting,
135
- onChange
136
+ children: fields.map(function (setting) {
137
+ var Control = getControlComponent(setting); // eslint-disable-line @wordpress/no-unused-vars-before-return, no-unused-vars
138
+ return (0, _hooks.applyFilters)("newspack.settingsSection.".concat(sectionKey, ".control"), /*#__PURE__*/(0, _jsxRuntime.jsx)(Control, _objectSpread({}, getControlProps(setting)), setting.key), {
139
+ sectionKey: sectionKey,
140
+ setting: setting,
141
+ onChange: _onChange
136
142
  });
137
143
  })
138
144
  })]
139
145
  })
140
146
  });
141
147
  };
142
- var _default = exports.default = SettingsSection;
148
+ var _default = exports["default"] = SettingsSection;
@@ -4,7 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.default = void 0;
7
+ exports["default"] = void 0;
8
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
+ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
10
+ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
11
+ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
12
+ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
13
+ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
14
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
8
15
  var _classnames = _interopRequireDefault(require("classnames"));
9
16
  var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
10
17
  var _element = require("@wordpress/element");
@@ -12,220 +19,230 @@ var _i18n = require("@wordpress/i18n");
12
19
  var _ = require("../");
13
20
  var _SettingsSection = _interopRequireDefault(require("./SettingsSection"));
14
21
  var _jsxRuntime = require("react/jsx-runtime");
15
- /**
22
+ 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; }
23
+ 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) { (0, _defineProperty2["default"])(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; }
24
+ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
25
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
16
26
  * External dependencies
17
- */
18
-
19
- /**
27
+ */ /**
20
28
  * WordPress dependencies.
21
- */
22
-
23
- /**
29
+ */ /**
24
30
  * Internal dependencies.
25
31
  */
26
-
27
- class PluginSettings extends _element.Component {
28
- constructor() {
29
- super(...arguments);
30
- this.state = {
31
- inFlight: false,
32
- settings: {},
33
- error: null
34
- };
35
- }
36
- fetchSettings = () => {
37
- const {
38
- afterFetch,
39
- pluginSlug,
40
- isWizard
41
- } = this.props;
42
- this.setState({
43
- inFlight: true
44
- });
45
- (0, _apiFetch.default)({
46
- path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`
47
- }).then(settings => {
48
- this.setState({
49
- settings,
50
- error: null
51
- });
52
- if ('function' === typeof afterFetch) {
53
- afterFetch(settings);
54
- }
55
- }).catch(error => {
56
- this.setState({
57
- error
32
+ var PluginSettings = /*#__PURE__*/function (_Component) {
33
+ function PluginSettings() {
34
+ var _this;
35
+ (0, _classCallCheck2["default"])(this, PluginSettings);
36
+ _this = _callSuper(this, PluginSettings, arguments);
37
+ (0, _defineProperty2["default"])(_this, "fetchSettings", function () {
38
+ var _this$props = _this.props,
39
+ afterFetch = _this$props.afterFetch,
40
+ pluginSlug = _this$props.pluginSlug,
41
+ isWizard = _this$props.isWizard;
42
+ _this.setState({
43
+ inFlight: true
58
44
  });
59
- }).finally(() => {
60
- this.setState({
61
- inFlight: false
45
+ (0, _apiFetch["default"])({
46
+ path: isWizard ? "/newspack/v1/wizard/".concat(pluginSlug, "/settings") : "/".concat(pluginSlug, "/v1/settings")
47
+ }).then(function (settings) {
48
+ _this.setState({
49
+ settings: settings,
50
+ error: null
51
+ });
52
+ if ('function' === typeof afterFetch) {
53
+ afterFetch(settings);
54
+ }
55
+ })["catch"](function (error) {
56
+ _this.setState({
57
+ error: error
58
+ });
59
+ })["finally"](function () {
60
+ _this.setState({
61
+ inFlight: false
62
+ });
62
63
  });
63
64
  });
64
- };
65
- componentDidMount() {
66
- this.fetchSettings();
67
- }
68
- getSettingsValues = sectionKey => {
69
- return this.state.settings[sectionKey]?.reduce((map, setting) => {
70
- map[setting.key] = setting.value;
71
- return map;
72
- }, {}) || {};
73
- };
74
- handleSettingChange = sectionKey => (key, value) => {
75
- const sectionSettings = [...this.state.settings[sectionKey]];
76
- sectionSettings.forEach(setting => {
77
- if (setting.key === key) {
78
- setting.value = value;
79
- }
65
+ (0, _defineProperty2["default"])(_this, "getSettingsValues", function (sectionKey) {
66
+ var _this$state$settings$;
67
+ return ((_this$state$settings$ = _this.state.settings[sectionKey]) === null || _this$state$settings$ === void 0 ? void 0 : _this$state$settings$.reduce(function (map, setting) {
68
+ map[setting.key] = setting.value;
69
+ return map;
70
+ }, {})) || {};
80
71
  });
81
- this.setState({
82
- settings: {
83
- ...this.state.settings,
84
- [sectionKey]: sectionSettings
85
- }
72
+ (0, _defineProperty2["default"])(_this, "handleSettingChange", function (sectionKey) {
73
+ return function (key, value) {
74
+ var sectionSettings = (0, _toConsumableArray2["default"])(_this.state.settings[sectionKey]);
75
+ sectionSettings.forEach(function (setting) {
76
+ if (setting.key === key) {
77
+ setting.value = value;
78
+ }
79
+ });
80
+ _this.setState({
81
+ settings: _objectSpread(_objectSpread({}, _this.state.settings), {}, (0, _defineProperty2["default"])({}, sectionKey, sectionSettings))
82
+ });
83
+ };
86
84
  });
87
- };
88
- handleSectionUpdate = sectionKey => data => {
89
- const {
90
- afterUpdate,
91
- pluginSlug,
92
- isWizard
93
- } = this.props;
94
- this.setState({
95
- inFlight: true
85
+ (0, _defineProperty2["default"])(_this, "handleSectionUpdate", function (sectionKey) {
86
+ return function (data) {
87
+ var _this$props2 = _this.props,
88
+ afterUpdate = _this$props2.afterUpdate,
89
+ pluginSlug = _this$props2.pluginSlug,
90
+ isWizard = _this$props2.isWizard;
91
+ _this.setState({
92
+ inFlight: true
93
+ });
94
+ (0, _apiFetch["default"])({
95
+ path: isWizard ? "/newspack/v1/wizard/".concat(pluginSlug, "/settings") : "/".concat(pluginSlug, "/v1/settings"),
96
+ method: 'POST',
97
+ data: {
98
+ section: sectionKey,
99
+ settings: data ? data : _this.getSettingsValues(sectionKey)
100
+ }
101
+ }).then(function (settings) {
102
+ _this.setState({
103
+ settings: _objectSpread(_objectSpread({}, _this.state.settings), {}, (0, _defineProperty2["default"])({}, sectionKey, settings[sectionKey])),
104
+ error: null
105
+ });
106
+ if ('function' === typeof afterUpdate) {
107
+ afterUpdate(settings);
108
+ }
109
+ })["catch"](function (error) {
110
+ _this.setState({
111
+ error: error
112
+ });
113
+ })["finally"](function () {
114
+ _this.setState({
115
+ inFlight: false
116
+ });
117
+ });
118
+ };
96
119
  });
97
- (0, _apiFetch.default)({
98
- path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`,
99
- method: 'POST',
100
- data: {
101
- section: sectionKey,
102
- settings: data ? data : this.getSettingsValues(sectionKey)
103
- }
104
- }).then(settings => {
105
- this.setState({
106
- settings: {
107
- ...this.state.settings,
108
- [sectionKey]: settings[sectionKey]
109
- },
110
- error: null
111
- });
112
- if ('function' === typeof afterUpdate) {
113
- afterUpdate(settings);
114
- }
115
- }).catch(error => {
116
- this.setState({
117
- error
120
+ /**
121
+ * Get the section setting containing section information.
122
+ *
123
+ * @param {string} sectionKey The section name.
124
+ * @return {Object} The section setting.
125
+ */
126
+ (0, _defineProperty2["default"])(_this, "getSectionInfo", function (sectionKey) {
127
+ var _this$state$settings$2;
128
+ 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) {
129
+ return !setting.key || setting.key === 'active';
118
130
  });
119
- }).finally(() => {
120
- this.setState({
121
- inFlight: false
131
+ });
132
+ /**
133
+ * Get the section title.
134
+ *
135
+ * @param {string} sectionKey The section name.
136
+ * @return {string} The section title.
137
+ */
138
+ (0, _defineProperty2["default"])(_this, "getSectionTitle", function (sectionKey) {
139
+ var _this$getSectionInfo;
140
+ return (_this$getSectionInfo = _this.getSectionInfo(sectionKey)) === null || _this$getSectionInfo === void 0 ? void 0 : _this$getSectionInfo.description;
141
+ });
142
+ /**
143
+ * Get the section description.
144
+ *
145
+ * @param {string} sectionKey The section name.
146
+ * @return {string} The section description.
147
+ */
148
+ (0, _defineProperty2["default"])(_this, "getSectionDescription", function (sectionKey) {
149
+ var _this$getSectionInfo2;
150
+ return (_this$getSectionInfo2 = _this.getSectionInfo(sectionKey)) === null || _this$getSectionInfo2 === void 0 ? void 0 : _this$getSectionInfo2.help;
151
+ });
152
+ /**
153
+ * Get whether a section is active.
154
+ *
155
+ * @param {string} sectionKey The section name.
156
+ * @return {?boolean} Whether the section is active or not. Null if the section is not found or does not support activation.
157
+ */
158
+ (0, _defineProperty2["default"])(_this, "isSectionActive", function (sectionKey) {
159
+ var _settings$sectionKey;
160
+ var settings = _this.state.settings;
161
+ var activation = (_settings$sectionKey = settings[sectionKey]) === null || _settings$sectionKey === void 0 ? void 0 : _settings$sectionKey.find(function (setting) {
162
+ return setting.key === 'active';
122
163
  });
164
+ if (!activation) {
165
+ return null;
166
+ }
167
+ return activation.value;
123
168
  });
124
- };
125
-
126
- /**
127
- * Get the section setting containing section information.
128
- *
129
- * @param {string} sectionKey The section name.
130
- * @return {Object} The section setting.
131
- */
132
- getSectionInfo = sectionKey => {
133
- return this.state.settings[sectionKey]?.find(setting => !setting.key || setting.key === 'active');
134
- };
135
-
136
- /**
137
- * Get the section title.
138
- *
139
- * @param {string} sectionKey The section name.
140
- * @return {string} The section title.
141
- */
142
- getSectionTitle = sectionKey => {
143
- return this.getSectionInfo(sectionKey)?.description;
144
- };
145
-
146
- /**
147
- * Get the section description.
148
- *
149
- * @param {string} sectionKey The section name.
150
- * @return {string} The section description.
151
- */
152
- getSectionDescription = sectionKey => {
153
- return this.getSectionInfo(sectionKey)?.help;
154
- };
155
-
156
- /**
157
- * Get whether a section is active.
158
- *
159
- * @param {string} sectionKey The section name.
160
- * @return {?boolean} Whether the section is active or not. Null if the section is not found or does not support activation.
161
- */
162
- isSectionActive = sectionKey => {
163
- const {
164
- settings
165
- } = this.state;
166
- const activation = settings[sectionKey]?.find(setting => setting.key === 'active');
167
- if (!activation) {
168
- return null;
169
- }
170
- return activation.value;
171
- };
172
-
173
- /**
174
- * Get list of section field settings.
175
- *
176
- * @param {string} sectionKey The section name.
177
- * @return {?Array} List of section fields.
178
- */
179
- getSectionFields = sectionKey => {
180
- return this.state.settings[sectionKey]?.filter(setting => setting.key && setting.key !== 'active');
181
- };
182
-
183
- /**
184
- * Render.
185
- */
186
- render() {
187
- const {
188
- title,
189
- description,
190
- hasGreyHeader,
191
- children,
192
- titleLevel = 1
193
- } = this.props;
194
- const {
195
- settings,
196
- inFlight,
197
- error
198
- } = this.state;
199
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
200
- children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SectionHeader, {
201
- title: title,
202
- heading: titleLevel,
203
- description: description
204
- }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
205
- isError: true,
206
- noticeText: error.message
207
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
208
- className: (0, _classnames.default)('newspack-plugin-settings', {
209
- 'newspack-wizard-section__is-loading': inFlight && !Object.keys(settings).length
210
- }),
211
- children: [Object.keys(settings).map(sectionKey => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsSection.default, {
212
- disabled: inFlight,
213
- id: `plugin-settings-${sectionKey}`,
214
- sectionKey: sectionKey,
215
- title: this.getSectionTitle(sectionKey),
216
- description: this.getSectionDescription(sectionKey),
217
- active: this.isSectionActive(sectionKey),
218
- fields: this.getSectionFields(sectionKey),
219
- onChange: this.handleSettingChange(sectionKey),
220
- onUpdate: this.handleSectionUpdate(sectionKey),
221
- hasGreyHeader: hasGreyHeader
222
- }, sectionKey)), children]
223
- })]
169
+ /**
170
+ * Get list of section field settings.
171
+ *
172
+ * @param {string} sectionKey The section name.
173
+ * @return {?Array} List of section fields.
174
+ */
175
+ (0, _defineProperty2["default"])(_this, "getSectionFields", function (sectionKey) {
176
+ var _this$state$settings$3;
177
+ 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) {
178
+ return setting.key && setting.key !== 'active';
179
+ });
224
180
  });
181
+ _this.state = {
182
+ inFlight: false,
183
+ settings: {},
184
+ error: null
185
+ };
186
+ return _this;
225
187
  }
226
- }
188
+ (0, _inherits2["default"])(PluginSettings, _Component);
189
+ return (0, _createClass2["default"])(PluginSettings, [{
190
+ key: "componentDidMount",
191
+ value: function componentDidMount() {
192
+ this.fetchSettings();
193
+ }
194
+ }, {
195
+ key: "render",
196
+ value:
197
+ /**
198
+ * Render.
199
+ */
200
+ function render() {
201
+ var _this2 = this;
202
+ var _this$props3 = this.props,
203
+ title = _this$props3.title,
204
+ description = _this$props3.description,
205
+ hasGreyHeader = _this$props3.hasGreyHeader,
206
+ children = _this$props3.children,
207
+ _this$props3$titleLev = _this$props3.titleLevel,
208
+ titleLevel = _this$props3$titleLev === void 0 ? 1 : _this$props3$titleLev;
209
+ var _this$state = this.state,
210
+ settings = _this$state.settings,
211
+ inFlight = _this$state.inFlight,
212
+ error = _this$state.error;
213
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
214
+ children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SectionHeader, {
215
+ title: title,
216
+ heading: titleLevel,
217
+ description: description
218
+ }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
219
+ isError: true,
220
+ noticeText: error.message
221
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
222
+ className: (0, _classnames["default"])('newspack-plugin-settings', {
223
+ 'newspack-wizard-section__is-loading': inFlight && !Object.keys(settings).length
224
+ }),
225
+ children: [Object.keys(settings).map(function (sectionKey) {
226
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsSection["default"], {
227
+ disabled: inFlight,
228
+ id: "plugin-settings-".concat(sectionKey),
229
+ sectionKey: sectionKey,
230
+ title: _this2.getSectionTitle(sectionKey),
231
+ description: _this2.getSectionDescription(sectionKey),
232
+ active: _this2.isSectionActive(sectionKey),
233
+ fields: _this2.getSectionFields(sectionKey),
234
+ onChange: _this2.handleSettingChange(sectionKey),
235
+ onUpdate: _this2.handleSectionUpdate(sectionKey),
236
+ hasGreyHeader: hasGreyHeader
237
+ }, sectionKey);
238
+ }), children]
239
+ })]
240
+ });
241
+ }
242
+ }]);
243
+ }(_element.Component);
227
244
  PluginSettings.defaultProps = {
228
245
  title: (0, _i18n.__)('General Settings', 'newspack-plugin')
229
246
  };
230
- PluginSettings.Section = _SettingsSection.default;
231
- var _default = exports.default = PluginSettings;
247
+ PluginSettings.Section = _SettingsSection["default"];
248
+ var _default = exports["default"] = PluginSettings;