@workday/canvas-kit-docs/dist/es6/lib/Value.js

Documentation components of Canvas Kit components

import React from 'react';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { Text } from '@workday/canvas-kit-react/text';
import { MdxJSToJSX } from './MDXElements';
import { Table } from './Table';
import { capitalize, IndentLevelContext, RenderContext, indent } from './widgetUtils';
import { DescriptionTooltip } from './DescriptionTooltip';
import { colors } from '@workday/canvas-kit-react/tokens';
const widgets = {};
export function registerWidget(key, widget) {
    widget.displayName = `${capitalize(key)}Widget`;
    widgets[key] = widget;
}
export const Value = (props) => {
    const level = React.useContext(IndentLevelContext);
    if (widgets[props.value.kind]) {
        return React.createElement(widgets[props.value.kind], props);
    }
    return (React.createElement("span", { className: "token unknown", style: { whiteSpace: 'pre-wrap' } },
        "unknown ",
        JSON.stringify(props.value, null, '  ').replace(/\n/g, '\n' + indent(level))));
};
export const PropertiesInline = ({ properties }) => {
    if (properties.length === 0) {
        return React.createElement("span", { className: "token punctuation" }, "{}");
    }
    const level = React.useContext(IndentLevelContext);
    return (React.createElement(React.Fragment, null,
        React.createElement("span", { className: "token punctuation" }, "{"),
        properties.map((p, index) => {
            return (React.createElement(React.Fragment, { key: index },
                React.createElement("br", null),
                indent(level + 1),
                p.description || p.tags.deprecated ? (React.createElement(DescriptionTooltip, { type: "describe", style: { maxWidth: '50em' }, title: React.createElement(MdxJSToJSX, null, p.description || p.tags.deprecated) },
                    React.createElement("span", { className: "token property", style: {
                            cursor: 'pointer',
                            textDecoration: p.tags.deprecated ? 'line-through' : 'underline',
                            textDecorationStyle: 'dotted',
                            color: p.tags.deprecated ? colors.cinnamon600 : colors.plum600,
                        } }, p.name))) : (React.createElement("span", { className: "token property" }, p.name)),
                React.createElement("span", { className: "token punctuation" }, ":"),
                "\u00A0",
                React.createElement(IndentLevelContext.Provider, { value: level + 1 },
                    React.createElement(Value, { value: p.type })),
                React.createElement("span", { className: "token punctuation" }, ";")));
        }),
        React.createElement("br", null),
        indent(level),
        React.createElement("span", { className: "token punctuation" }, "}")));
};
function getTableRows(properties, showDefault = true, showRequired = false, level, index) {
    return properties.flatMap((property, i) => {
        var _a, _b;
        if (!property) {
            return [];
        }
        const title = (_b = (_a = property.declarations) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.filePath;
        const propName = (React.createElement(Text, { as: "code", whiteSpace: 'nowrap !important' },
            indent(level),
            level > 0 && '\u2514\u00A0',
            property.name,
            showRequired && property.required ? React.createElement(Text, { color: "chiliMango600" }, "*") : ''));
        return [
            React.createElement(Table.Row, { key: index + i },
                React.createElement(Table.Data, { color: "plum600" }, title ? (React.createElement(Tooltip, { type: "describe", title: title }, propName)) : (propName)),
                React.createElement(Table.Data, null,
                    React.createElement("code", null, React.createElement(RenderContext.Provider, { value: "inline" },
                        React.createElement(Value, { value: property.type })))),
                React.createElement(Table.Data, null,
                    React.createElement(MdxJSToJSX, null, property.description || '')),
                showDefault ? (React.createElement(Table.Data, null, property.defaultValue ? (property.defaultValue.kind === 'primitive' &&
                    property.defaultValue.value === 'undefined' ? null : (React.createElement("code", null,
                    React.createElement(Value, { value: property.defaultValue })))) : null)) : null),
        ];
    });
}
export const PropertiesTable = ({ properties, showDefault = true, showRequired = false, }) => {
    if (properties.length === 0) {
        return React.createElement("span", { className: "token punctuation" }, "{}");
    }
    const tableBody = getTableRows(properties, showDefault, showRequired, 0, 0);
    return (React.createElement(IndentLevelContext.Provider, { value: 0 },
        React.createElement(Table, null,
            React.createElement(Table.Head, null,
                React.createElement(Table.Row, null,
                    React.createElement(Table.Header, null, "Name"),
                    React.createElement(Table.Header, null, "Type"),
                    React.createElement(Table.Header, null, "Description"),
                    showDefault ? React.createElement(Table.Header, null, "Default") : null)),
            React.createElement(Table.Body, null, tableBody))));
};