@adminide-stack/yantra-mobile 12.0.141-alpha.1 → 12.0.141

package/lib/features/notion/NotionPageMenu.js

@@ -0,0 +1,585 @@
+import {jsx,jsxs}from'react/jsx-runtime';import {useState,useRef,useCallback,useEffect,useMemo}from'react';import {Modal,Pressable,StyleSheet,View,Text,ScrollView,KeyboardAvoidingView,TextInput,ActivityIndicator,Platform,FlatList,Animated,Switch}from'react-native';import {Ionicons}from'@expo/vector-icons';import {useLazyQuery}from'@apollo/client/index.js';import {NATIVE_NOTION_SEARCH}from'./notionDocuments.js';import {blockIcon,pageTitle}from'./notionBlocks.js';import {PAGE_FONTS}from'./notionPageActions.js';import {ui}from'./notionUi.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function PageActionsSheet({
+  visible,
+  palette,
+  title,
+  subtitle,
+  groups,
+  pageSettings,
+  onClose
+}) {
+  const pendingAction = useRef(null);
+  const flushPending = () => {
+    const next = pendingAction.current;
+    pendingAction.current = null;
+    next == null ? void 0 : next();
+  };
+  const run = (action) => {
+    pendingAction.current = action.onPress;
+    onClose();
+    setTimeout(flushPending, Platform.OS === "ios" ? 700 : 0);
+  };
+  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, onDismiss: flushPending, children: /* @__PURE__ */ jsx(Pressable, { style: [styles.backdrop, {
+    backgroundColor: palette.backdrop
+  }], onPress: onClose, children: /* @__PURE__ */ jsxs(Pressable, { style: [styles.sheet, {
+    backgroundColor: palette.bg
+  }], children: [
+    /* @__PURE__ */ jsx(View, { style: [styles.grabber, {
+      backgroundColor: palette.hairline
+    }] }),
+    /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.sheetTitle, {
+      color: palette.text
+    }], children: title }),
+    subtitle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.sheetSubtitle, {
+      color: palette.textMuted
+    }], children: subtitle }) : null,
+    /* @__PURE__ */ jsxs(ScrollView, { style: styles.sheetScroll, contentContainerStyle: styles.sheetContent, children: [
+      pageSettings ? /* @__PURE__ */ jsx(SettingsGroup, { palette, page: pageSettings }) : null,
+      groups.filter((g) => g.length).map((group, gi) => /* @__PURE__ */ jsx(View, { style: [styles.group, {
+        backgroundColor: palette.card
+      }], children: group.map((a, i) => /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", onPress: () => run(a), style: ({
+        pressed
+      }) => [styles.actionRow, pressed && {
+        backgroundColor: palette.pressed
+      }], children: [
+        /* @__PURE__ */ jsx(Ionicons, { name: a.icon, size: 20, color: a.destructive ? palette.danger : palette.text }),
+        /* @__PURE__ */ jsxs(View, { style: [styles.actionBody, i < group.length - 1 && ui.hairline, {
+          borderBottomColor: palette.hairline
+        }], children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, {
+            color: a.destructive ? palette.danger : palette.text
+          }], children: a.label }),
+          a.detail ? /* @__PURE__ */ jsx(Text, { style: [styles.actionDetail, {
+            color: palette.textMuted
+          }], children: a.detail }) : null
+        ] })
+      ] }, a.key)) }, gi)),
+      (pageSettings == null ? void 0 : pageSettings.footer) ? /* @__PURE__ */ jsx(Text, { style: [styles.footer, {
+        color: palette.textFaint
+      }], children: pageSettings.footer }) : null
+    ] })
+  ] }) }) });
+}
+function SettingsGroup({
+  palette,
+  page
+}) {
+  const [local, setLocal] = useState(page.settings);
+  const incoming = JSON.stringify(page.settings);
+  useEffect(() => {
+    setLocal(JSON.parse(incoming));
+  }, [incoming]);
+  const toggle = (key) => {
+    setLocal((cur) => __spreadProps(__spreadValues({}, cur), {
+      [key]: !cur[key]
+    }));
+    page.onToggle(key);
+  };
+  const pickFont = (font) => {
+    setLocal((cur) => __spreadProps(__spreadValues({}, cur), {
+      font
+    }));
+    page.onFont(font);
+  };
+  const toggles = [{
+    key: "smallText",
+    label: "Small text",
+    icon: "text-outline"
+  }, {
+    key: "fullWidth",
+    label: "Full width (web)",
+    icon: "resize-outline"
+  }, {
+    key: "locked",
+    label: "Lock page",
+    icon: "lock-closed-outline"
+  }];
+  return /* @__PURE__ */ jsxs(View, { style: [styles.group, {
+    backgroundColor: palette.card
+  }], children: [
+    /* @__PURE__ */ jsx(View, { style: styles.fontRow, children: PAGE_FONTS.map((f) => {
+      const active = local.font === f.value;
+      return /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", accessibilityState: {
+        selected: active
+      }, onPress: () => pickFont(f.value), style: [styles.fontChip, {
+        backgroundColor: active ? palette.primarySoft : palette.fill,
+        borderColor: active ? palette.primary : "transparent"
+      }], children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.fontSample, {
+          color: active ? palette.primary : palette.text,
+          fontFamily: fontFamilyOf(f.value)
+        }], children: "Ag" }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.fontLabel, {
+          color: active ? palette.primary : palette.textMuted
+        }], children: f.label })
+      ] }, f.value);
+    }) }),
+    toggles.map((t, i) => /* @__PURE__ */ jsxs(View, { style: styles.actionRow, children: [
+      /* @__PURE__ */ jsx(Ionicons, { name: t.icon, size: 20, color: palette.text }),
+      /* @__PURE__ */ jsxs(View, { style: [styles.actionBody, i < toggles.length - 1 && ui.hairline, {
+        borderBottomColor: palette.hairline
+      }], children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, {
+          color: palette.text
+        }], children: t.label }),
+        /* @__PURE__ */ jsx(Switch, { value: local[t.key], onValueChange: () => toggle(t.key), trackColor: {
+          true: palette.primary,
+          false: palette.fill
+        } })
+      ] })
+    ] }, t.key))
+  ] });
+}
+function fontFamilyOf(font) {
+  if (font === "serif") return Platform.OS === "ios" ? "Georgia" : "serif";
+  if (font === "mono") return Platform.OS === "ios" ? "Menlo" : "monospace";
+  return void 0;
+}
+function TextPromptDialog({
+  visible,
+  palette,
+  title,
+  message,
+  initial = "",
+  placeholder,
+  confirmLabel,
+  multiline,
+  allowEmpty,
+  onClose,
+  onConfirm
+}) {
+  const [value, setValue] = useState(initial);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (visible) {
+      setValue(initial);
+      setError(null);
+    }
+  }, [visible, initial]);
+  const canSave = !busy && (allowEmpty || Boolean(value.trim()));
+  const submit = async () => {
+    if (!canSave) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await onConfirm(value);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsx(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : void 0, style: ui.flex, children: /* @__PURE__ */ jsx(Pressable, { style: [styles.backdrop, {
+    backgroundColor: palette.backdrop
+  }], onPress: onClose, children: /* @__PURE__ */ jsxs(Pressable, { style: [styles.sheet, {
+    backgroundColor: palette.card
+  }], children: [
+    /* @__PURE__ */ jsx(View, { style: [styles.grabber, {
+      backgroundColor: palette.hairline
+    }] }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.dialogTitle, {
+      color: palette.text
+    }], children: title }),
+    message ? /* @__PURE__ */ jsx(Text, { style: [styles.dialogText, {
+      color: palette.textMuted
+    }], children: message }) : null,
+    /* @__PURE__ */ jsx(TextInput, { value, onChangeText: setValue, placeholder, placeholderTextColor: palette.textFaint, autoFocus: true, multiline, returnKeyType: multiline ? "default" : "done", onSubmitEditing: multiline ? void 0 : submit, style: [styles.dialogInput, multiline && styles.dialogInputMultiline, {
+      color: palette.text,
+      backgroundColor: palette.fill
+    }], textAlignVertical: multiline ? "top" : "center" }),
+    error ? /* @__PURE__ */ jsx(Text, { style: [styles.dialogError, {
+      color: palette.danger
+    }], children: error }) : null,
+    /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: submit, disabled: !canSave, style: [ui.primaryButton, styles.blockButton, {
+      backgroundColor: palette.primary
+    }, !canSave && styles.disabled], children: busy ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: palette.onPrimary }) : /* @__PURE__ */ jsx(Text, { style: [ui.primaryButtonLabel, {
+      color: palette.onPrimary
+    }], children: confirmLabel }) }),
+    /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: onClose, style: styles.textButton, children: /* @__PURE__ */ jsx(Text, { style: [styles.textButtonLabel, {
+      color: palette.textMuted
+    }], children: "Cancel" }) })
+  ] }) }) }) });
+}
+function MoveToSheet({
+  visible,
+  palette,
+  pageId,
+  pages,
+  workspaceName,
+  workspaceId,
+  onClose,
+  onMove
+}) {
+  const [query, setQuery] = useState("");
+  const [busy, setBusy] = useState(null);
+  const [error, setError] = useState(null);
+  const [search, {
+    data,
+    loading
+  }] = useLazyQuery(NATIVE_NOTION_SEARCH, {
+    fetchPolicy: "network-only"
+  });
+  useEffect(() => {
+    if (visible) {
+      setQuery("");
+      setError(null);
+    }
+  }, [visible]);
+  useEffect(() => {
+    const q = query.trim();
+    if (!q) return void 0;
+    const t = setTimeout(() => search({
+      variables: {
+        input: __spreadValues({
+          query: q,
+          types: ["page"],
+          pageSize: 30
+        }, workspaceId ? {
+          workspaceId
+        } : {})
+      }
+    }), 250);
+    return () => clearTimeout(t);
+  }, [query, search, workspaceId]);
+  const destinations = useMemo(() => {
+    var _a, _b;
+    const list = query.trim() ? (_b = (_a = data == null ? void 0 : data.searchBlocks) == null ? void 0 : _a.results) != null ? _b : [] : pages;
+    const seen = /* @__PURE__ */ new Set();
+    return list.filter((p) => {
+      if (!(p == null ? void 0 : p.id) || p.id === pageId || p.inTrash || p.type !== "page" || seen.has(p.id)) return false;
+      seen.add(p.id);
+      return true;
+    });
+  }, [data, pageId, pages, query]);
+  const move = async (to) => {
+    setBusy(to != null ? to : "root");
+    setError(null);
+    try {
+      await onMove(to);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Couldn't move the page");
+    } finally {
+      setBusy(null);
+    }
+  };
+  const row = (key, label, icon, onPress, divider) => /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", onPress, disabled: Boolean(busy), style: ({
+    pressed
+  }) => [styles.actionRow, pressed && {
+    backgroundColor: palette.pressed
+  }], children: [
+    icon,
+    /* @__PURE__ */ jsxs(View, { style: [styles.actionBody, divider && ui.hairline, {
+      borderBottomColor: palette.hairline
+    }], children: [
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.actionLabel, {
+        color: palette.text
+      }], children: label }),
+      busy === key ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: palette.textMuted }) : null
+    ] })
+  ] }, key);
+  return /* @__PURE__ */ jsx(Modal, { visible, animationType: "slide", presentationStyle: "pageSheet", onRequestClose: onClose, children: /* @__PURE__ */ jsxs(View, { style: [ui.flex, {
+    backgroundColor: palette.bg
+  }], children: [
+    /* @__PURE__ */ jsxs(View, { style: [ui.sheetHeader, {
+      borderBottomColor: palette.hairline
+    }], children: [
+      /* @__PURE__ */ jsx(View, { style: [ui.sheetHeaderSide, ui.sheetHeaderLeft] }),
+      /* @__PURE__ */ jsx(Text, { style: [ui.sheetHeaderTitle, {
+        color: palette.text
+      }], children: "Move to\u2026" }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: onClose, style: ui.sheetHeaderSide, hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: [ui.sheetHeaderDone, {
+        color: palette.primary
+      }], children: "Cancel" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.moveSearch, children: [
+      /* @__PURE__ */ jsxs(View, { style: [styles.searchField, {
+        backgroundColor: palette.fill
+      }], children: [
+        /* @__PURE__ */ jsx(Ionicons, { name: "search", size: 17, color: palette.textMuted }),
+        /* @__PURE__ */ jsx(TextInput, { value: query, onChangeText: setQuery, placeholder: "Search for a page", placeholderTextColor: palette.textMuted, autoCorrect: false, clearButtonMode: "while-editing", style: [styles.searchInput, {
+          color: palette.text
+        }] }),
+        loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: palette.textMuted }) : null
+      ] }),
+      error ? /* @__PURE__ */ jsx(Text, { style: [styles.dialogError, {
+        color: palette.danger
+      }], children: error }) : null
+    ] }),
+    /* @__PURE__ */ jsx(FlatList, { data: destinations, keyExtractor: (p) => p.id, keyboardShouldPersistTaps: "handled", contentContainerStyle: styles.moveList, ListHeaderComponent: /* @__PURE__ */ jsx(View, { style: [styles.group, {
+      backgroundColor: palette.card
+    }], children: row("root", `${workspaceName} (top level)`, /* @__PURE__ */ jsx(Ionicons, { name: "albums-outline", size: 20, color: palette.primary }), () => move(null), false) }), ListEmptyComponent: /* @__PURE__ */ jsx(Text, { style: [styles.hint, {
+      color: palette.textMuted
+    }], children: query.trim() ? loading ? "" : "No matching pages" : "No other pages yet" }), renderItem: ({
+      item,
+      index
+    }) => /* @__PURE__ */ jsx(View, { style: [{
+      backgroundColor: palette.card
+    }, index === 0 && styles.groupTop, index === destinations.length - 1 && styles.groupBottom], children: row(item.id, pageTitle(item), blockIcon(item) ? /* @__PURE__ */ jsx(Text, { style: styles.emoji, children: blockIcon(item) }) : /* @__PURE__ */ jsx(Ionicons, { name: "document-text-outline", size: 20, color: palette.textMuted }), () => move(item.id), index < destinations.length - 1) }) })
+  ] }) });
+}
+function useNotionToast() {
+  const [toast, setToast] = useState(null);
+  const timer = useRef(null);
+  const show = useCallback((next) => {
+    if (timer.current) clearTimeout(timer.current);
+    setToast(next);
+    timer.current = setTimeout(() => setToast(null), 5e3);
+  }, []);
+  const hide = useCallback(() => setToast(null), []);
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  return {
+    toast,
+    show,
+    hide
+  };
+}
+function NotionToast({
+  toast,
+  palette,
+  onHide
+}) {
+  const opacity = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: toast ? 1 : 0,
+      duration: 180,
+      useNativeDriver: true
+    }).start();
+  }, [opacity, toast]);
+  if (!toast) return null;
+  return /* @__PURE__ */ jsx(Animated.View, { pointerEvents: "box-none", style: [styles.toastWrap, {
+    opacity
+  }], children: /* @__PURE__ */ jsxs(View, { style: [styles.toast, {
+    backgroundColor: palette.text
+  }], children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles.toastText, {
+      color: palette.card
+    }], numberOfLines: 2, children: toast.message }),
+    toast.actionLabel && toast.onAction ? /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: () => {
+      var _a;
+      onHide();
+      (_a = toast.onAction) == null ? void 0 : _a.call(toast);
+    }, hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: [styles.toastAction, {
+      color: palette.primary
+    }], children: toast.actionLabel }) }) : null
+  ] }) });
+}
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    justifyContent: "flex-end"
+  },
+  sheet: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 32,
+    maxHeight: "88%"
+  },
+  grabber: {
+    alignSelf: "center",
+    width: 36,
+    height: 5,
+    borderRadius: 3,
+    marginBottom: 12
+  },
+  sheetTitle: {
+    fontSize: 18,
+    fontWeight: "700",
+    marginLeft: 4
+  },
+  sheetSubtitle: {
+    fontSize: 13,
+    marginLeft: 4,
+    marginTop: 2
+  },
+  sheetScroll: {
+    marginTop: 12,
+    flexGrow: 0
+  },
+  sheetContent: {
+    gap: 12,
+    paddingBottom: 8
+  },
+  group: {
+    borderRadius: 16,
+    overflow: "hidden"
+  },
+  groupTop: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16
+  },
+  groupBottom: {
+    borderBottomLeftRadius: 16,
+    borderBottomRightRadius: 16
+  },
+  actionRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingLeft: 16,
+    gap: 14
+  },
+  actionBody: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingRight: 16,
+    minHeight: 50
+  },
+  actionLabel: {
+    flex: 1,
+    fontSize: 16
+  },
+  actionDetail: {
+    fontSize: 14
+  },
+  footer: {
+    fontSize: 12,
+    textAlign: "center",
+    marginTop: 4
+  },
+  fontRow: {
+    flexDirection: "row",
+    gap: 8,
+    padding: 12
+  },
+  fontChip: {
+    flex: 1,
+    alignItems: "center",
+    paddingVertical: 10,
+    borderRadius: 12,
+    borderWidth: 1.5
+  },
+  fontSample: {
+    fontSize: 22,
+    fontWeight: "600"
+  },
+  fontLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    marginTop: 2
+  },
+  dialogTitle: {
+    fontSize: 20,
+    fontWeight: "700",
+    marginTop: 4
+  },
+  dialogText: {
+    fontSize: 14,
+    marginTop: 6,
+    lineHeight: 20
+  },
+  dialogInput: {
+    marginTop: 16,
+    fontSize: 16,
+    minHeight: 48,
+    paddingHorizontal: 14,
+    borderRadius: 12
+  },
+  dialogInputMultiline: {
+    height: 200,
+    paddingTop: 12
+  },
+  dialogError: {
+    fontSize: 13,
+    marginTop: 8
+  },
+  blockButton: {
+    alignSelf: "stretch"
+  },
+  disabled: {
+    opacity: 0.45
+  },
+  textButton: {
+    alignItems: "center",
+    paddingVertical: 12,
+    marginTop: 4
+  },
+  textButtonLabel: {
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  moveSearch: {
+    padding: 16,
+    paddingBottom: 8
+  },
+  searchField: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    height: 40,
+    paddingHorizontal: 12,
+    borderRadius: 12
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 16,
+    paddingVertical: 0
+  },
+  moveList: {
+    paddingHorizontal: 16,
+    paddingBottom: 48,
+    gap: 0
+  },
+  hint: {
+    textAlign: "center",
+    paddingVertical: 32,
+    fontSize: 15
+  },
+  emoji: {
+    fontSize: 18,
+    width: 20,
+    textAlign: "center"
+  },
+  toastWrap: {
+    position: "absolute",
+    left: 16,
+    right: 16,
+    bottom: 32,
+    alignItems: "center"
+  },
+  toast: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 14,
+    maxWidth: 520,
+    alignSelf: "stretch"
+  },
+  toastText: {
+    flex: 1,
+    fontSize: 15,
+    fontWeight: "500"
+  },
+  toastAction: {
+    fontSize: 15,
+    fontWeight: "800"
+  }
+});export{MoveToSheet,NotionToast,PageActionsSheet,TextPromptDialog,fontFamilyOf,useNotionToast};//# sourceMappingURL=NotionPageMenu.js.map