@stamprally/admin-ui 0.12.0 → 0.13.0

package/README.md

@@ -25,9 +25,13 @@ const editor = useAdminRallyEditor(config, { onChange: saveDraft });
 editor.addSpot({ name: { en: "Museum" }, conditions: [{ type: "qr", secretToken: "" }] });
 editor.duplicateReward("reward-1");
 editor.reorderSpots(2, 0);
+editor.reorderRewards(1, 0);
 editor.undo();
 ```
 
 Use `canUndo`/`canRedo` to control history buttons. `resetConfig(newConfig)` replaces
 the current draft when an external CMS update arrives. `updateLocalizedField` accepts
 paths such as `title`, `description`, `spots.0.name`, or `spots.spot-1.name`.
+Updates use functional React state transitions, so consecutive updates are not
+lost. External configuration changes replace a clean draft automatically; call
+`resetConfig(newConfig)` to explicitly accept a conflicting external draft.

package/dist/index.cjs

@@ -26,12 +26,22 @@ function localizedValue(value, locale, nextValue) {
 }
 function useAdminRallyEditor(initialConfig, options = {}) {
   const initialRef = react.useRef(initialConfig);
+  const previousInitialRef = react.useRef(initialConfig);
   const [history, setHistory] = react.useState({
     past: [],
     present: initialConfig,
     future: []
   });
   const config = history.present;
+  react.useEffect(() => {
+    if (previousInitialRef.current === initialConfig) return;
+    previousInitialRef.current = initialConfig;
+    const isDirty = JSON.stringify(history.present) !== JSON.stringify(initialRef.current);
+    if (!isDirty) {
+      initialRef.current = initialConfig;
+      setHistory({ past: [], present: initialConfig, future: [] });
+    }
+  }, [history.present, initialConfig]);
   const commit = react.useCallback(
     (value) => {
       setHistory((current) => {
@@ -68,6 +78,7 @@ function useAdminRallyEditor(initialConfig, options = {}) {
     spots: current.spots.filter((spot) => spot.id !== spotId).map((spot, index) => ({ ...spot, orderIndex: index }))
   }));
   const reorderSpots = (fromIndex, toIndex) => commit((current) => ({ ...current, spots: moveTo(current.spots, fromIndex, toIndex) }));
+  const reorderRewards = (fromIndex, toIndex) => commit((current) => ({ ...current, rewards: moveTo(current.rewards, fromIndex, toIndex) }));
   const duplicateSpot = (spotId) => commit((current) => {
     const source = current.spots.find((spot) => spot.id === spotId);
     if (source === void 0) return current;
@@ -166,6 +177,7 @@ function useAdminRallyEditor(initialConfig, options = {}) {
   });
   const resetConfig = (newConfig) => {
     initialRef.current = newConfig;
+    previousInitialRef.current = newConfig;
     setHistory({ past: [], present: newConfig, future: [] });
     options.onChange?.(newConfig);
   };
@@ -178,6 +190,7 @@ function useAdminRallyEditor(initialConfig, options = {}) {
     addSpot,
     removeSpot,
     reorderSpots: (fromIndex, toIndex) => reorderSpots(fromIndex, toIndex),
+    reorderRewards,
     duplicateSpot,
     addReward,
     removeReward,
@@ -198,9 +211,13 @@ function useSpotEditor(spotId, options = {}) {
   const [config, setConfig] = react.useState(
     options.config ?? options.initialConfig
   );
-  const commit = (next) => {
-    setConfig(next);
-    options.onChange?.(next);
+  const commit = (updateConfig) => {
+    setConfig((current) => {
+      if (current === void 0) return current;
+      const next = updateConfig(current);
+      options.onChange?.(next);
+      return next;
+    });
   };
   const spot = config?.spots.find((item) => item.id === spotId);
   return {
@@ -209,14 +226,17 @@ function useSpotEditor(spotId, options = {}) {
     setConfig,
     update: (patch) => {
       if (config === void 0 || spot === void 0) return;
-      commit({
-        ...config,
-        spots: config.spots.map((item) => item.id === spotId ? { ...item, ...patch } : item)
-      });
+      commit((current) => ({
+        ...current,
+        spots: current.spots.map((item) => item.id === spotId ? { ...item, ...patch } : item)
+      }));
     },
     remove: () => {
       if (config === void 0 || spot === void 0) return;
-      commit({ ...config, spots: config.spots.filter((item) => item.id !== spotId) });
+      commit((current) => ({
+        ...current,
+        spots: current.spots.filter((item) => item.id !== spotId)
+      }));
     }
   };
 }
@@ -225,9 +245,13 @@ function useRewardEditor(rewardId, options = {}) {
     options.config ?? options.initialConfig
   );
   const reward = config?.rewards.find((item) => item.id === rewardId);
-  const commit = (next) => {
-    setConfig(next);
-    options.onChange?.(next);
+  const commit = (updateConfig) => {
+    setConfig((current) => {
+      if (current === void 0) return current;
+      const next = updateConfig(current);
+      options.onChange?.(next);
+      return next;
+    });
   };
   return {
     config,
@@ -235,16 +259,19 @@ function useRewardEditor(rewardId, options = {}) {
     setConfig,
     update: (patch) => {
       if (config === void 0 || reward === void 0) return;
-      commit({
-        ...config,
-        rewards: config.rewards.map(
+      commit((current) => ({
+        ...current,
+        rewards: current.rewards.map(
           (item) => item.id === rewardId ? { ...item, ...patch } : item
         )
-      });
+      }));
     },
     remove: () => {
       if (config === void 0 || reward === void 0) return;
-      commit({ ...config, rewards: config.rewards.filter((item) => item.id !== rewardId) });
+      commit((current) => ({
+        ...current,
+        rewards: current.rewards.filter((item) => item.id !== rewardId)
+      }));
     }
   };
 }
@@ -1114,21 +1141,40 @@ function AdminRallyEditor({ config, onChange, locale, dictionary }) {
         children: field("addReward", "Add reward")
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: config.rewards.map((reward) => /* @__PURE__ */ jsxRuntime.jsx(
-      RewardItemForm,
-      {
-        reward,
-        locale: activeLocale,
-        ...dictionary === void 0 ? {} : { dictionary },
-        onChange: (next) => update({
-          rewards: config.rewards.map(
-            (current) => current.id === reward.id ? next : current
-          )
-        }),
-        onRemove: () => update({ rewards: config.rewards.filter((current) => current.id !== reward.id) })
-      },
-      reward.id
-    )) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: config.rewards.map((reward, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RewardItemForm,
+        {
+          reward,
+          locale: activeLocale,
+          ...dictionary === void 0 ? {} : { dictionary },
+          onChange: (next) => update({
+            rewards: config.rewards.map(
+              (current) => current.id === reward.id ? next : current
+            )
+          }),
+          onRemove: () => update({ rewards: config.rewards.filter((current) => current.id !== reward.id) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          disabled: index === 0,
+          onClick: () => update({ rewards: move(config.rewards, index, -1) }),
+          children: field("moveUp", "Move up")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          disabled: index === config.rewards.length - 1,
+          onClick: () => update({ rewards: move(config.rewards, index, 1) }),
+          children: field("moveDown", "Move down")
+        }
+      )
+    ] }, reward.id)) })
   ] });
 }
 var RallyEditor = AdminRallyEditor;