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

Documentation components of Canvas Kit components

import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
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 '@workday/canvas-kit-react';
import { capitalize, IndentLevelContext, RenderContext, indent } from './widgetUtils';
import { DescriptionTooltip } from './DescriptionTooltip';
import { colors } from '@workday/canvas-kit-react/tokens';
import { createStyles } from '@workday/canvas-kit-styling';
import { Flex } from '@workday/canvas-kit-react';
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 (_jsxs("span", { className: "token unknown", style: { whiteSpace: 'pre-wrap' }, children: ["unknown ", JSON.stringify(props.value, null, '  ').replace(/\n/g, '\n' + indent(level))] }));
};
export const PropertiesInline = ({ properties }) => {
    if (properties.length === 0) {
        return _jsx("span", { className: "token punctuation", children: "{}" });
    }
    const level = React.useContext(IndentLevelContext);
    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "token punctuation", children: "{" }), properties.map((p, index) => {
                return (_jsxs(React.Fragment, { children: [_jsx("br", {}), indent(level + 1), p.description || p.tags.deprecated ? (_jsx(DescriptionTooltip, { type: "describe", style: { maxWidth: '50em' }, title: _jsx(MdxJSToJSX, { children: p.description || p.tags.deprecated }), children: _jsx("span", { className: "token property", style: {
                                    cursor: 'pointer',
                                    textDecoration: p.tags.deprecated ? 'line-through' : 'underline',
                                    textDecorationStyle: 'dotted',
                                    color: p.tags.deprecated ? colors.cinnamon600 : colors.plum600,
                                }, children: p.name }) })) : (_jsx("span", { className: "token property", children: p.name })), _jsx("span", { className: "token punctuation", children: ":" }), "\u00A0", _jsx(IndentLevelContext.Provider, { value: level + 1, children: _jsx(Value, { value: p.type }) }), _jsx("span", { className: "token punctuation", children: ";" })] }, index));
            }), _jsx("br", {}), indent(level), _jsx("span", { className: "token punctuation", children: "}" })] }));
};
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 = (_jsxs(Text, { as: "code", whiteSpace: 'nowrap !important', children: [indent(level), level > 0 && '\u2514\u00A0', property.name, showRequired && property.required ? _jsx(Text, { color: "chiliMango600", children: "*" }) : ''] }));
        return [
            _jsxs(Table.Row, { children: [_jsx(Table.Cell, { color: "plum600", children: title ? (_jsx(Tooltip, { type: "describe", title: title, children: propName })) : (propName) }), _jsx(Table.Cell, { children: _jsx(Flex, { as: "code", cs: { flexWrap: 'wrap' }, children: _jsx(RenderContext.Provider, { value: "inline", children: _jsx(Value, { value: property.type }) }) }) }), _jsx(Table.Cell, { children: _jsx(MdxJSToJSX, { children: property.description || '' }) }), showDefault ? (_jsx(Table.Cell, { children: property.defaultValue ? (property.defaultValue.kind === 'primitive' &&
                            property.defaultValue.value === 'undefined' ? null : (_jsx("code", { children: _jsx(Value, { value: property.defaultValue }) }))) : null })) : null] }, index + i),
        ];
    });
}
const tableStyles = createStyles({
    tableLayout: 'fixed',
});
export const PropertiesTable = ({ properties, showDefault = true, showRequired = false, }) => {
    if (properties.length === 0) {
        return _jsx("span", { className: "token punctuation", children: "{}" });
    }
    const tableBody = getTableRows(properties, showDefault, showRequired, 0, 0);
    return (_jsx(IndentLevelContext.Provider, { value: 0, children: _jsxs(Table, { cs: tableStyles, children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.Header, { children: "Name" }), _jsx(Table.Header, { children: "Type" }), _jsx(Table.Header, { children: "Description" }), showDefault ? _jsx(Table.Header, { children: "Default" }) : null] }) }), _jsx(Table.Body, { children: tableBody })] }) }));
};