@sanity/form-builder
Version:
Sanity form builder
74 lines (71 loc) • 8.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TooltipBox = exports.TextRoot = exports.TextFlex = exports.TextBlockFlexWrapper = exports.ListPrefixWrapper = exports.ChangeIndicatorWrapper = exports.BlockExtrasContainer = exports.BlockActionsOuter = exports.BlockActionsInner = void 0;
var _color = require("@sanity/color");
var _ui = require("@sanity/ui");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _constants = require("./constants");
var _helpers = require("./helpers");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
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; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
function textBlockStyle(props) {
var $level = props.$level,
theme = props.theme;
var _theme$sanity = theme.sanity,
color = _theme$sanity.color,
fonts = _theme$sanity.fonts,
radius = _theme$sanity.radius,
space = _theme$sanity.space;
var numberMarker = _constants.TEXT_NUMBER_FORMATS[($level - 1) % _constants.TEXT_NUMBER_FORMATS.length];
var bulletMarker = _constants.TEXT_BULLET_MARKERS[($level - 1) % _constants.TEXT_BULLET_MARKERS.length];
return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n --marker-bg-color: transparent;\n\n mix-blend-mode: ", ";\n position: relative;\n\n & > [data-ui='TextBlock_inner'] {\n position: relative;\n flex: 1;\n }\n\n & > div:before {\n content: '';\n position: absolute;\n top: -", "px;\n bottom: -", "px;\n left: -", "px;\n right: -", "px;\n border-radius: ", "px;\n background-color: var(--marker-bg-color);\n }\n\n &[data-custom-markers] {\n --marker-bg-color: ", ";\n }\n\n &[data-warning] {\n --card-border-color: ", ";\n --marker-bg-color: ", ";\n }\n\n &[data-error] {\n --card-border-color: ", ";\n --marker-bg-color: ", ";\n }\n\n &[data-read-only] {\n --card-fg-color: ", ";\n }\n\n & [data-list-prefix] {\n position: absolute;\n margin-left: -4.5rem;\n width: 3.75rem;\n text-align: right;\n box-sizing: border-box;\n }\n\n &[data-list-item='number'] [data-list-prefix] {\n font-variant-numeric: tabular-nums;\n\n & > span:before {\n content: counter(", ") '.';\n content: counter(", ", ", ") '.';\n }\n }\n\n &[data-list-item='bullet'] [data-list-prefix] {\n & > span {\n position: relative;\n top: -0.1875em;\n\n &:before {\n content: '", "';\n font-size: 0.46666em;\n }\n }\n }\n\n & [data-text] {\n overflow-wrap: anywhere;\n text-transform: none;\n white-space: pre-wrap;\n font-family: ", ";\n flex: 1;\n\n *::selection {\n background-color: ", ";\n }\n }\n "])), color.dark ? 'screen' : 'multiply', space[1], space[1], space[1], space[1], radius[2], color.dark ? _color.hues.purple[950].hex : _color.hues.purple[50].hex, color.muted.caution.enabled.border, color.muted.caution.hovered.bg, color.muted.critical.enabled.border, color.muted.critical.hovered.bg, color.input.default.readOnly.fg, (0, _helpers.createListName)($level), (0, _helpers.createListName)($level), numberMarker, bulletMarker, fonts.text.family, color.selectable.primary.pressed.bg);
}
var TextRoot = _styledComponents.default.div(textBlockStyle);
// Because of a weird bug in Google Chrome regarding the @sanity/ui Flex component and spellchecking,
// this is set to be a Box with 'display: flex'. Using the Flex component here results in Chrome
// using 20% CPU when idle when spellchecking is on for some reason.
exports.TextRoot = TextRoot;
var TextBlockFlexWrapper = (0, _styledComponents.default)(_ui.Box)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n"])));
exports.TextBlockFlexWrapper = TextBlockFlexWrapper;
var ListPrefixWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n user-select: none;\n white-space: nowrap;\n"])));
exports.ListPrefixWrapper = ListPrefixWrapper;
var BlockExtrasContainer = (0, _styledComponents.default)(_ui.Box)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n user-select: none;\n"])));
exports.BlockExtrasContainer = BlockExtrasContainer;
var BlockActionsOuter = (0, _styledComponents.default)(_ui.Box)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n line-height: 0;\n width: 25px;\n position: relative;\n"])));
exports.BlockActionsOuter = BlockActionsOuter;
var BlockActionsInner = (0, _styledComponents.default)(_ui.Flex)(_ref => {
var theme = _ref.theme;
var _theme$sanity2 = theme.sanity,
fonts = _theme$sanity2.fonts,
space = _theme$sanity2.space;
var textSize1 = fonts.text.sizes[1];
var textSize2 = fonts.text.sizes[2];
var capHeight1 = textSize1.lineHeight - textSize1.ascenderHeight - textSize1.descenderHeight;
var capHeight2 = textSize2.lineHeight - textSize2.ascenderHeight - textSize2.descenderHeight;
var buttonHeight = capHeight1 + space[2] + space[2];
// This calculates the following:
// > var buttonHeight = 25px
// > var capHeight2 = 11px
// > 0 - (buttonHeight - capHeight2) / 2 = -7px
var negativeTop = 0 - (buttonHeight - capHeight2) / 2;
return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n user-select: none;\n position: absolute;\n right: 0;\n top: ", "px;\n "])), negativeTop);
});
exports.BlockActionsInner = BlockActionsInner;
var TooltipBox = (0, _styledComponents.default)(_ui.Box)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n max-width: 250px;\n"])));
exports.TooltipBox = TooltipBox;
var TextFlex = (0, _styledComponents.default)(_ui.Flex)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: relative;\n padding-left: ", "px;\n"])), _ref2 => {
var $level = _ref2.$level;
return $level ? $level * 32 : 0;
});
exports.TextFlex = TextFlex;
var ChangeIndicatorWrapper = _styledComponents.default.div(_ref3 => {
var theme = _ref3.theme,
$hasChanges = _ref3.$hasChanges;
var space = theme.sanity.space;
return (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: absolute;\n width: ", "px;\n right: 0;\n top: -", "px;\n bottom: -", "px;\n padding-left: ", "px;\n user-select: none;\n\n ", "\n "])), space[2], space[1], space[1], space[1], !$hasChanges && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n display: none;\n "]))));
});
exports.ChangeIndicatorWrapper = ChangeIndicatorWrapper;