@airplane/views
Version:
A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.
112 lines (111 loc) • 4.37 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { Text as Text$1 } from "@mantine/core";
import { forwardRef } from "react";
import ReactMarkdown from "react-markdown";
import { Code } from "../code/Code.js";
import { ComponentErrorBoundary } from "../errorBoundary/ComponentErrorBoundary.js";
import { Heading } from "../heading/Heading.js";
import { useCommonLayoutStyle } from "../layout/useCommonLayoutStyle.js";
import { useParagraphStyles, useTextWeight, useRawTextStyles } from "./Text.styles.js";
import { fontWeight } from "../theme/typography.js";
const Text = /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ jsx(ComponentErrorBoundary, { componentName: DISPLAY_NAME, children: /* @__PURE__ */ jsx(TextWithoutRef, { ...props, innerRef: ref }) }));
const DISPLAY_NAME = "Text";
Text.displayName = DISPLAY_NAME;
const TextWithoutRef = ({
disableMarkdown,
children,
size = "md",
innerRef,
...props
}) => {
const {
classes
} = useParagraphStyles({
size
});
const rawTextProps = {
size,
className: classes.paragraph,
...props
};
if (disableMarkdown || typeof children !== "string") {
return (
// Note that we only apply the ref to a label because the ref crashes
// when used with markdown.
/* @__PURE__ */ jsx(Label, { ...rawTextProps, ref: innerRef, children })
);
}
const markdownHeadingProps = {
color: props.color,
weight: props.weight,
transform: props.transform,
align: props.align,
italic: props.italic,
underline: props.underline,
strikethrough: props.strikethrough,
sx: props.sx,
className: props.className,
style: props.style,
width: props.width
};
return /* @__PURE__ */ jsx(ReactMarkdown, { components: {
h1: (componentProps) => /* @__PURE__ */ jsx(Heading, { ...markdownHeadingProps, level: 1, children: componentProps.children }),
h2: (componentProps) => /* @__PURE__ */ jsx(Heading, { ...markdownHeadingProps, level: 2, children: componentProps.children }),
h3: (componentProps) => /* @__PURE__ */ jsx(Heading, { ...markdownHeadingProps, level: 3, children: componentProps.children }),
h4: (componentProps) => /* @__PURE__ */ jsx(Heading, { ...markdownHeadingProps, level: 4, children: componentProps.children }),
h5: (componentProps) => /* @__PURE__ */ jsx(Heading, { ...markdownHeadingProps, level: 5, children: componentProps.children }),
h6: (componentProps) => /* @__PURE__ */ jsx(Heading, { ...markdownHeadingProps, level: 6, children: componentProps.children }),
p: (componentProps) => /* @__PURE__ */ jsx(Label, { ...rawTextProps, children: componentProps.children }),
ul: (componentProps) => /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(Label, { ...rawTextProps, children: componentProps.children }) }),
ol: (componentProps) => /* @__PURE__ */ jsx("ol", { children: /* @__PURE__ */ jsx(Label, { ...rawTextProps, children: componentProps.children }) }),
li: (componentProps) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Label, { ...rawTextProps, children: componentProps.children }) }),
code({
node,
inline,
className,
children: children2,
...componentProps
}) {
const match = /language-(\w+)/.exec(className || "");
return !inline && match ? /* @__PURE__ */ jsx(Code, { language: match[1], ...componentProps, children: String(children2) }) : /* @__PURE__ */ jsx("code", { className, ...componentProps, children: children2 });
}
}, children });
};
const Label = /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ jsx(LabelWithoutRef, { ...props, innerRef: ref }));
Label.displayName = "Label";
const LabelWithoutRef = ({
className,
style,
size = "md",
innerRef,
children,
color = "gray.7",
weight,
width,
height,
grow,
...props
}) => {
const textWeight = useTextWeight(size);
const {
classes,
cx
} = useRawTextStyles({
size
});
const {
classes: layoutClasses
} = useCommonLayoutStyle({
width,
height,
grow
});
return /* @__PURE__ */ jsx(Text$1, { className: cx(classes.root, layoutClasses.style, className), style, color, weight: weight ? fontWeight[weight] : textWeight, ref: innerRef, ...props, children });
};
export {
Label,
LabelWithoutRef,
Text,
TextWithoutRef
};
//# sourceMappingURL=Text.js.map