@redocly/theme/lib/components/JsonViewer/helpers.js

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonValue = JsonValue;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const Button_1 = require("../../components/Button/Button");
const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
function JsonValue(props) {
    const { standalone, defaultExpandLevel, level, value, expandAllSignal } = props;
    const indent = ' '.repeat(level * 2);
    const [isExpandedState, setExpanded] = react_1.default.useState(expandAllSignal !== null && expandAllSignal !== void 0 ? expandAllSignal : level < defaultExpandLevel);
    const isExpanded = expandAllSignal !== undefined && level > 0 ? expandAllSignal : isExpandedState;
    (0, react_1.useEffect)(() => {
        if (expandAllSignal !== undefined) {
            if (expandAllSignal === false && level === 0) {
                return;
            }
            setExpanded(expandAllSignal);
        }
    }, [expandAllSignal, level]);
    const keys = (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
    const valueType = typeof value;
    const isPrimitive = (valueType !== 'object' && value !== null) || keys.length === 0;
    if (isPrimitive) {
        return (react_1.default.createElement(react_1.default.Fragment, null,
            standalone ? indent : null,
            react_1.default.createElement("span", { className: 'token ' + valueType }, JSON.stringify(value))));
    }
    const openingPunctuation = Array.isArray(value) ? '[' : '{';
    const closingPunctuation = Array.isArray(value) ? ']' : '}';
    const valueElement = Array.isArray(value)
        ? value.map((item, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
            react_1.default.createElement(JsonValue, { value: item, level: level + 1, standalone: true, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal }),
            index < value.length - 1 ? ',\n' : null)))
        : keys.map((key, index) => (react_1.default.createElement(react_1.default.Fragment, { key: key },
            react_1.default.createElement(JsonKeyValue, { name: key, value: value[key], level: level + 1, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal }),
            index < keys.length - 1 ? ',\n' : null)));
    const openingPunctuationElement = standalone ? (react_1.default.createElement(react_1.default.Fragment, null,
        indent,
        level > 0 ? (react_1.default.createElement(ExpandIcon, { onClick: () => setExpanded((v) => !v), isExpanded: isExpanded })) : null,
        openingPunctuation,
        isExpanded ? '\n' : null)) : null;
    const closingPunctuationElement = standalone ? (react_1.default.createElement(react_1.default.Fragment, null,
        isExpanded ? '\n' : '',
        isExpanded ? indent : '',
        closingPunctuation)) : null;
    return (react_1.default.createElement(react_1.default.Fragment, null,
        openingPunctuationElement,
        isExpanded || !standalone ? valueElement : ' … ',
        closingPunctuationElement));
}
function JsonKeyValue(props) {
    const { defaultExpandLevel, level, name, value, expandAllSignal } = props;
    const indent = ' '.repeat(level * 2);
    const keys = (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
    const isCollapsible = typeof value === 'object' && value !== null && keys.length > 0;
    const [isExpandedState, setExpanded] = react_1.default.useState(expandAllSignal !== null && expandAllSignal !== void 0 ? expandAllSignal : level < defaultExpandLevel);
    const isExpanded = expandAllSignal !== undefined ? expandAllSignal : isExpandedState;
    (0, react_1.useEffect)(() => {
        if (expandAllSignal !== undefined) {
            setExpanded(expandAllSignal);
        }
    }, [expandAllSignal]);
    const openingPunctuation = Array.isArray(value) ? '[' : '{';
    const closingPunctuation = Array.isArray(value) ? ']' : '}';
    const valueElement = isCollapsible ? (react_1.default.createElement(react_1.default.Fragment, null,
        openingPunctuation,
        isExpanded ? (react_1.default.createElement(react_1.default.Fragment, null,
            '\n',
            react_1.default.createElement(JsonValue, { value: value, level: level, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal }),
            '\n')) : (' … '),
        isExpanded ? indent : null,
        closingPunctuation)) : (react_1.default.createElement(JsonValue, { value: value, level: level, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal }));
    return (react_1.default.createElement(react_1.default.Fragment, null,
        indent,
        isCollapsible ? (react_1.default.createElement(ExpandIcon, { onClick: () => setExpanded((v) => !v), isExpanded: isExpanded })) : null,
        react_1.default.createElement("span", { className: "property token string" }, `"${name}"`),
        ": ",
        valueElement));
}
function ExpandIcon({ isExpanded, onClick, }) {
    return (react_1.default.createElement(ExpandButton, { "aria-label": "collapse", className: isExpanded ? 'expanded' : '', size: "small", variant: "text", onClick: onClick, icon: react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { color: "var(--text-color-helper)" }) }));
}
const ExpandButton = (0, styled_components_1.default)(Button_1.Button) `
  position: absolute;
  left: -10px;
  user-select: none;

  & > svg {
    transform: rotate(270deg);
  }

  &.expanded > svg {
    transform: none;
  }

  &&.button-size-small {
    --button-icon-size: 14px;
    --button-icon-padding: 3px;

    margin-left: 0;
  }
`;
//# sourceMappingURL=helpers.js.map