@sanity/default-layout
Version:
The default layout components for Sanity
196 lines (195 loc) • 6.71 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PortableTextContent = PortableTextContent;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@portabletext/react");
var _ui = require("@sanity/ui");
var _imageUrl = _interopRequireDefault(require("@sanity/image-url"));
var _assetUtils = require("@sanity/asset-utils");
var _PortableTextContent = require("./PortableTextContent.styles");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function Image(_ref) {
var value = _ref.value;
if (!(value !== null && value !== void 0 && value.asset)) {
return null;
}
var project = (0, _assetUtils.getProject)(value.asset);
var url = (0, _imageUrl.default)(project).image(value).fit('max').auto('format').url();
var asset = value.asset,
alt = value.alt,
caption = value.caption;
var _ref2 = (asset === null || asset === void 0 ? void 0 : asset.metadata) || {},
dimensions = _ref2.dimensions,
lqip = _ref2.lqip;
var aspectRatio = dimensions.height / dimensions.width * 100;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.SpaceBox, {
marginY: 4
}, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
space: 3,
as: "figure"
}, /*#__PURE__*/_react.default.createElement(_PortableTextContent.ImageCard, {
radius: 1,
shadow: 1,
overflow: "hidden",
$aspectRatio: aspectRatio,
$lqip: lqip
}, /*#__PURE__*/_react.default.createElement("img", {
src: url,
alt: alt || caption,
referrerPolicy: "strict-origin-when-cross-origin"
})), caption && /*#__PURE__*/_react.default.createElement(_ui.Text, {
align: "center",
as: "figcaption",
muted: true,
size: 1
}, value.caption)));
}
var components = {
types: {
image: _ref3 => {
var value = _ref3.value;
return /*#__PURE__*/_react.default.createElement(Image, {
value: value
});
},
code: _ref4 => {
var value = _ref4.value;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.SpaceBox, {
marginY: 4
}, /*#__PURE__*/_react.default.createElement(_ui.Card, {
padding: 3,
tone: "transparent",
radius: 1,
overflow: "auto"
}, /*#__PURE__*/_react.default.createElement(_ui.Code, {
size: 1,
language: value === null || value === void 0 ? void 0 : value.language
}, value === null || value === void 0 ? void 0 : value.code)));
}
},
block: {
h1: _ref5 => {
var children = _ref5.children;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.SpaceBox, {
marginBottom: 4,
marginTop: 5
}, /*#__PURE__*/_react.default.createElement(_ui.Heading, {
size: 5
}, children));
},
h2: _ref6 => {
var children = _ref6.children;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.SpaceBox, {
marginBottom: 4,
marginTop: 5
}, /*#__PURE__*/_react.default.createElement(_ui.Heading, {
size: 4
}, children));
},
h3: _ref7 => {
var children = _ref7.children;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.SpaceBox, {
marginBottom: 4,
marginTop: 5
}, /*#__PURE__*/_react.default.createElement(_ui.Heading, {
size: 3
}, children));
},
h4: _ref8 => {
var children = _ref8.children;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.SpaceBox, {
marginBottom: 4,
marginTop: 5
}, /*#__PURE__*/_react.default.createElement(_ui.Heading, {
size: 2
}, children));
},
h5: _ref9 => {
var children = _ref9.children;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.SpaceBox, {
marginBottom: 4,
marginTop: 5
}, /*#__PURE__*/_react.default.createElement(_ui.Heading, {
size: 1
}, children));
},
h6: _ref10 => {
var children = _ref10.children;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.SpaceBox, {
marginBottom: 4,
marginTop: 5
}, /*#__PURE__*/_react.default.createElement(_ui.Heading, {
size: 0
}, children));
},
normal: _ref11 => {
var children = _ref11.children;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.SpaceBox, {
marginY: 4
}, /*#__PURE__*/_react.default.createElement(_ui.Text, {
as: "p",
muted: true,
size: 1
}, children));
}
},
list: {
bullet: _ref12 => {
var children = _ref12.children;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.SpaceBox, {
"data-list-type": "bullet",
marginBottom: 4
}, /*#__PURE__*/_react.default.createElement(_ui.Box, {
as: "ul"
}, children));
},
number: _ref13 => {
var children = _ref13.children;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.SpaceBox, {
"data-list-type": "number",
marginBottom: 4
}, /*#__PURE__*/_react.default.createElement(_ui.Box, {
as: "ol"
}, children));
}
},
listItem: {
bullet: _ref14 => {
var children = _ref14.children;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.ListBoxOuter, {
marginBottom: 1,
forwardedAs: "li"
}, /*#__PURE__*/_react.default.createElement(_PortableTextContent.ListBox, null, /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true,
size: 1,
"data-list-prefix": "bullet"
}), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true,
size: 1
}, children)));
},
number: _ref15 => {
var children = _ref15.children;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.ListBoxOuter, {
marginBottom: 1,
forwardedAs: "li"
}, /*#__PURE__*/_react.default.createElement(_PortableTextContent.ListBox, null, /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true,
"data-list-prefix": "number",
size: 1
}), /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true,
size: 1
}, children)));
}
}
};
function PortableTextContent(props) {
var value = props.value;
return /*#__PURE__*/_react.default.createElement(_PortableTextContent.RootBox, null, /*#__PURE__*/_react.default.createElement(_react2.PortableText, {
value: value,
components: components
}));
}