@sanity/desk-tool
Version:
Tool for managing all sorts of content in a structured manner
248 lines (247 loc) • 13.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ExampleStory;
var _icons = require("@sanity/icons");
var _ui = require("@sanity/ui");
var _uiWorkshop = require("@sanity/ui-workshop");
var _react = _interopRequireWildcard(require("react"));
var _Pane = require("../Pane");
var _PaneContent = require("../PaneContent");
var _PaneFooter = require("../PaneFooter");
var _PaneHeader = require("../PaneHeader");
var _PaneLayout = require("../PaneLayout");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var PANE_TONE_OPTIONS = {
Default: 'default',
Primary: 'primary',
Positive: 'positive',
Caution: 'caution',
Critical: 'critical'
};
function ExampleStory() {
var layoutCollapsed = (0, _uiWorkshop.useBoolean)('Layout collapsed', false, 'Props');
var manyTabs = (0, _uiWorkshop.useBoolean)('Many tabs', false, 'Props');
var tone = (0, _uiWorkshop.useSelect)('Tone', PANE_TONE_OPTIONS, 'default', 'Props');
var actions = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ui.Button, {
icon: _icons.EllipsisVerticalIcon,
mode: "bleed"
}), []);
var tabs = (0, _react.useMemo)(() => manyTabs ? /*#__PURE__*/_react.default.createElement(_ui.TabList, {
space: 1
}, /*#__PURE__*/_react.default.createElement(_ui.Tab, {
"aria-controls": "content-panel",
fontSize: 1,
id: "content-tab",
label: "Content",
selected: true
}), /*#__PURE__*/_react.default.createElement(_ui.Tab, {
"aria-controls": "preview-panel",
fontSize: 1,
id: "preview-tab",
label: "Preview"
}), /*#__PURE__*/_react.default.createElement(_ui.Tab, {
"aria-controls": "preview-panel",
fontSize: 1,
id: "preview-tab",
label: "Preview"
}), /*#__PURE__*/_react.default.createElement(_ui.Tab, {
"aria-controls": "preview-panel",
fontSize: 1,
id: "preview-tab",
label: "Preview"
}), /*#__PURE__*/_react.default.createElement(_ui.Tab, {
"aria-controls": "preview-panel",
fontSize: 1,
id: "preview-tab",
label: "Preview"
}), /*#__PURE__*/_react.default.createElement(_ui.Tab, {
"aria-controls": "preview-panel",
fontSize: 1,
id: "preview-tab",
label: "Preview"
}), /*#__PURE__*/_react.default.createElement(_ui.Tab, {
"aria-controls": "preview-panel",
fontSize: 1,
id: "preview-tab",
label: "Preview"
}), /*#__PURE__*/_react.default.createElement(_ui.Tab, {
"aria-controls": "preview-panel",
fontSize: 1,
id: "preview-tab",
label: "Preview"
}), /*#__PURE__*/_react.default.createElement(_ui.Tab, {
"aria-controls": "preview-panel",
fontSize: 1,
id: "preview-tab",
label: "Preview"
}), /*#__PURE__*/_react.default.createElement(_ui.Tab, {
"aria-controls": "preview-panel",
fontSize: 1,
id: "preview-tab",
label: "Preview"
})) : /*#__PURE__*/_react.default.createElement(_ui.TabList, {
space: 1
}, /*#__PURE__*/_react.default.createElement(_ui.Tab, {
"aria-controls": "content-panel",
fontSize: 1,
id: "content-tab",
label: "Content",
selected: true
}), /*#__PURE__*/_react.default.createElement(_ui.Tab, {
"aria-controls": "preview-panel",
fontSize: 1,
id: "preview-tab",
label: "Preview"
})), [manyTabs]);
return /*#__PURE__*/_react.default.createElement(_PaneLayout.PaneLayout, {
height: layoutCollapsed ? undefined : 'fill',
style: {
minHeight: '100%'
}
}, /*#__PURE__*/_react.default.createElement(_Pane.Pane, {
id: "example-pane",
minWidth: 320,
tone: tone
}, /*#__PURE__*/_react.default.createElement(_PaneHeader.PaneHeader, {
actions: actions,
subActions: /*#__PURE__*/_react.default.createElement(_ui.Button, {
fontSize: 1,
iconRight: _icons.SelectIcon,
mode: "bleed",
padding: 2,
text: "Latest"
}),
tabs: tabs,
title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Header")
}), /*#__PURE__*/_react.default.createElement(_PaneContent.PaneContent, {
overflow: "auto"
}, /*#__PURE__*/_react.default.createElement(_ui.Container, {
paddingX: 4,
paddingY: [4, 4, 5],
sizing: "border",
width: 1
}, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
space: 4
}, /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis est sed mi aliquam, non tincidunt nisl suscipit. Aenean sodales scelerisque lobortis. Pellentesque vitae nunc accumsan, elementum nisl at, commodo arcu. Sed ac est in mauris venenatis lacinia. Aliquam eget metus ligula. Nunc viverra nulla erat, sed mollis lectus auctor rhoncus. Curabitur aliquet molestie lacus, nec suscipit odio eleifend sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec condimentum nulla a nunc elementum varius. Vestibulum id nibh vitae nisl vestibulum luctus non dapibus urna. Sed semper metus ac scelerisque molestie. Cras mi turpis, vestibulum vel ultrices sit amet, imperdiet vel tortor."), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Curabitur vel viverra nunc. Mauris vel tellus a ante porta aliquet. Nam in est augue. Nullam lacinia sapien sit amet placerat consequat. Vivamus aliquam in orci in semper. Integer vehicula elementum ante et gravida. Suspendisse commodo sodales quam dignissim lobortis. Praesent ultrices elit in orci vehicula, at sollicitudin nisl venenatis. Nunc porttitor risus ac leo auctor rhoncus. Proin pharetra posuere commodo. Vivamus vel elementum magna, quis iaculis justo. Donec nisl mauris, blandit a augue nec, elementum vulputate lacus. Donec sodales ipsum in ante ultricies, bibendum tincidunt massa pharetra."), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Phasellus et purus id nisl efficitur luctus eu id risus. Phasellus lacinia efficitur quam. Nulla id malesuada quam. Cras a nibh ut felis tincidunt mattis. Maecenas sit amet massa et ex tincidunt elementum. Nam vehicula eu dolor sed ornare. Vestibulum rhoncus diam non imperdiet pellentesque. Cras lacinia, diam eget efficitur ullamcorper, quam sem accumsan nibh, ac pulvinar tortor risus id neque. In gravida felis lectus, nec scelerisque ante ornare euismod. Quisque vitae nibh commodo, cursus erat vel, eleifend urna. Nullam eu commodo ante."), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Nam est magna, viverra eu justo id, pretium rutrum felis. Sed ligula diam, aliquam eget quam at, posuere luctus sem. Pellentesque tempus tincidunt sagittis. Donec ac ante placerat erat semper hendrerit vel at turpis. Etiam facilisis, neque placerat congue congue, mauris nulla sagittis massa, non blandit leo dui facilisis dolor. Suspendisse vitae volutpat felis, in interdum massa. In hac habitasse platea dictumst. Cras pellentesque semper enim. Nunc varius magna sit amet faucibus feugiat. In hac habitasse platea dictumst. Maecenas eu nisi bibendum, malesuada leo vitae, accumsan tellus. Etiam fermentum ipsum a erat eleifend, eu ultrices nibh semper."), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Phasellus facilisis, enim eu consectetur placerat, neque purus luctus diam, eget lobortis lacus tellus quis mi. Etiam ex augue, fermentum eget ligula in, tincidunt mollis erat. Ut in rhoncus tortor. Fusce faucibus ullamcorper justo, eu semper massa faucibus eu. Donec sed mauris non ligula placerat cursus. In et dui faucibus, eleifend sem nec, scelerisque urna. Nunc mollis eros vitae egestas facilisis. Duis ut metus interdum, ultrices magna non, imperdiet dui. Etiam mattis et ex varius aliquet. Ut vestibulum dolor est, ut aliquam diam ullamcorper sit amet. Cras ac urna quis augue tincidunt aliquam ut at augue. Mauris et sapien vitae lacus molestie fringilla. Vivamus eu finibus mauris. Nulla dignissim tincidunt nulla, a egestas sem dignissim id. Pellentesque sit amet magna ac dolor laoreet placerat eu a massa."), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content"), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Content")))), /*#__PURE__*/_react.default.createElement(_PaneFooter.PaneFooter, {
padding: 4
}, /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true
}, "Footer"))));
}