/**
* The Manage right-pane detail/preview for the current selection: what was selected (path, kind,
* attributes) and a read-only, length-capped content preview. The full editors are separate.
* @module gui/components/manage/ManageDetail
*/
import { useIntl, defineMessages } from "react-intl";
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
const msgs = defineMessages({
detailEmpty: {
id: "manage.detailEmpty",
defaultMessage: "Select a block, list, or folder on the left to inspect it. Editing arrives next."
},
rootParen: {
id: "manage.rootParen",
defaultMessage: "(root)"
},
mPath: {
id: "manage.mPath",
defaultMessage: "Path"
},
mType: {
id: "manage.mType",
defaultMessage: "Type"
},
mAttributes: {
id: "manage.mAttributes",
defaultMessage: "Attributes"
},
mEntries: {
id: "manage.mEntries",
defaultMessage: "Entries"
},
typeCategory: {
id: "manage.typeCategory",
defaultMessage: "Category (top-level)"
},
typeSubfolder: {
id: "manage.typeSubfolder",
defaultMessage: "Subfolder"
},
attrNone: {
id: "manage.attrNone",
defaultMessage: "none"
},
folderSoon: {
id: "manage.folderSoon",
defaultMessage: "The folder settings editor (rename, priority, markers) arrives next."
},
mGating: {
id: "manage.mGating",
defaultMessage: "Gating"
},
mNsfwVal: {
id: "manage.mNsfwVal",
defaultMessage: "NSFW"
},
mSidecar: {
id: "manage.mSidecar",
defaultMessage: "Sidecar"
},
mSidecarVal: {
id: "manage.mSidecarVal",
defaultMessage: "has a JS sidecar"
},
loading: {
id: "manage.loading",
defaultMessage: "Loading…"
},
entrySoon: {
id: "manage.entrySoon",
defaultMessage: "A full editor (with save + hot-apply) arrives next."
},
moreLines: {
id: "manage.moreLines",
defaultMessage: "… {count} more lines (full editor coming)."
}
});
// Cap the read-only preview so an enormous list stays snappy here; the real editor handles full size.
function previewText(intl, text) {
if (text == null) return "";
const lines = text.split("\n");
if (lines.length <= 500) return text;
return `${lines.slice(0, 500).join("\n")}\n\n${intl.formatMessage(msgs.moreLines, {
count: lines.length - 500
})}`;
}
/**
* The right-pane detail/preview for the current selection.
* @param {object} props
* @param {object|null} props.selected The selected entry or folder.
* @returns {JSX.Element}
*/
export default function ManageDetail({
selected
}) {
const intl = useIntl();
if (!selected) {
return /*#__PURE__*/_jsxDEV("section", {
className: "card mg-detail mg-detail-empty",
children: /*#__PURE__*/_jsxDEV("p", {
children: intl.formatMessage(msgs.detailEmpty)
}, void 0, false)
}, void 0, false);
}
if (selected.kind === "folder") {
return /*#__PURE__*/_jsxDEV("section", {
className: "card mg-detail",
children: [/*#__PURE__*/_jsxDEV("h2", {
className: "mg-detail-title",
children: selected.name || intl.formatMessage(msgs.rootParen)
}, void 0, false), /*#__PURE__*/_jsxDEV("dl", {
className: "mg-meta",
children: [/*#__PURE__*/_jsxDEV("dt", {
children: intl.formatMessage(msgs.mPath)
}, void 0, false), /*#__PURE__*/_jsxDEV("dd", {
children: /*#__PURE__*/_jsxDEV("code", {
children: [selected.root, "/", selected.path]
}, void 0, true)
}, void 0, false), /*#__PURE__*/_jsxDEV("dt", {
children: intl.formatMessage(msgs.mType)
}, void 0, false), /*#__PURE__*/_jsxDEV("dd", {
children: intl.formatMessage(selected.isCategory ? msgs.typeCategory : msgs.typeSubfolder)
}, void 0, false), /*#__PURE__*/_jsxDEV("dt", {
children: intl.formatMessage(msgs.mAttributes)
}, void 0, false), /*#__PURE__*/_jsxDEV("dd", {
children: selected.markers.length ? selected.markers.join(", ") : intl.formatMessage(msgs.attrNone)
}, void 0, false), /*#__PURE__*/_jsxDEV("dt", {
children: intl.formatMessage(msgs.mEntries)
}, void 0, false), /*#__PURE__*/_jsxDEV("dd", {
children: selected.entryCount
}, void 0, false)]
}, void 0, true), /*#__PURE__*/_jsxDEV("p", {
className: "mg-soon",
children: intl.formatMessage(msgs.folderSoon)
}, void 0, false)]
}, void 0, true);
}
return /*#__PURE__*/_jsxDEV("section", {
className: "card mg-detail",
children: [/*#__PURE__*/_jsxDEV("h2", {
className: "mg-detail-title",
children: [selected.label, " ", /*#__PURE__*/_jsxDEV("span", {
className: `mg-kind kind-${selected.kind}`,
children: selected.kind
}, void 0, false)]
}, void 0, true), /*#__PURE__*/_jsxDEV("dl", {
className: "mg-meta",
children: [/*#__PURE__*/_jsxDEV("dt", {
children: intl.formatMessage(msgs.mPath)
}, void 0, false), /*#__PURE__*/_jsxDEV("dd", {
children: /*#__PURE__*/_jsxDEV("code", {
children: [selected.root, "/", selected.path, ".", selected.ext]
}, void 0, true)
}, void 0, false), selected.nsfw && /*#__PURE__*/_jsxDEV(_Fragment, {
children: [/*#__PURE__*/_jsxDEV("dt", {
children: intl.formatMessage(msgs.mGating)
}, void 0, false), /*#__PURE__*/_jsxDEV("dd", {
children: intl.formatMessage(msgs.mNsfwVal)
}, void 0, false)]
}, void 0, true), selected.hasJsSidecar && /*#__PURE__*/_jsxDEV(_Fragment, {
children: [/*#__PURE__*/_jsxDEV("dt", {
children: intl.formatMessage(msgs.mSidecar)
}, void 0, false), /*#__PURE__*/_jsxDEV("dd", {
children: intl.formatMessage(msgs.mSidecarVal)
}, void 0, false)]
}, void 0, true)]
}, void 0, true), /*#__PURE__*/_jsxDEV("div", {
className: "mg-preview",
children: selected.loading ? /*#__PURE__*/_jsxDEV("p", {
className: "empty",
children: intl.formatMessage(msgs.loading)
}, void 0, false) : selected.error ? /*#__PURE__*/_jsxDEV("p", {
className: "error",
children: selected.error
}, void 0, false) : /*#__PURE__*/_jsxDEV("pre", {
className: "mg-preview-pre",
children: previewText(intl, selected.text)
}, void 0, false)
}, void 0, false), /*#__PURE__*/_jsxDEV("p", {
className: "mg-soon",
children: intl.formatMessage(msgs.entrySoon)
}, void 0, false)]
}, void 0, true);
}