react-json-formatter/dist/index.umd.cjs.map

Formatting json data to JSX of React

{"version":3,"file":"index.umd.cjs","sources":["../src/index.tsx"],"sourcesContent":["import React, { CSSProperties, useMemo, useCallback } from 'react'\n\nexport type JsonObject =\n  | { [key: string]: JsonObject }\n  | string\n  | number\n  | boolean\n  | null\n  | undefined\n\ninterface JsonStyle {\n  booleanStyle?: CSSProperties\n  braceStyle?: CSSProperties\n  bracketStyle?: CSSProperties\n  commaStyle?: CSSProperties\n  falseStyle?: CSSProperties\n  nullStyle?: CSSProperties\n  numberStyle?: CSSProperties\n  propertyStyle?: CSSProperties\n  stringStyle?: CSSProperties\n  style?: CSSProperties\n  tabSpaceStyle?: CSSProperties\n  trueStyle?: CSSProperties\n}\n\ninterface JsonClassName {\n  booleanClassName?: string\n  braceClassName?: string\n  bracketClassName?: string\n  className?: string\n  commaClassName?: string\n  falseClassName?: string\n  nullClassName?: string\n  numberClassName?: string\n  propertyClassName?: string\n  stringClassName?: string\n  tabSpaceClassName?: string\n  trueClassName?: string\n}\n\nexport interface JsonFormatterProps {\n  /**\n   * The JSON data to be formatted. The value could be a stringified string or a valid json object.\n   */\n  json: string | JsonObject\n  /**\n   * Optional class names for different elements of the JSON formatter.\n   */\n  jsonClassName?: JsonClassName\n  /**\n   * Optional inline styles for different elements of the JSON formatter.\n   */\n  jsonStyle?: JsonStyle\n  /**\n   * The width of the tab space. Default is 2.\n   */\n  tabWith?: number\n}\n\n/**\n * A React component that formats and displays JSON data in a styled manner.\n */\nexport default function JsonFormatter({\n  json,\n  jsonClassName: {\n    booleanClassName = '',\n    braceClassName = '',\n    bracketClassName = '',\n    className = '',\n    commaClassName = '',\n    falseClassName = '',\n    nullClassName = '',\n    numberClassName = '',\n    propertyClassName = '',\n    stringClassName = '',\n    tabSpaceClassName = '',\n    trueClassName = ''\n  } = {},\n  jsonStyle: {\n    booleanStyle = {},\n    braceStyle = {},\n    bracketStyle = {},\n    commaStyle = {},\n    falseStyle = {},\n    nullStyle = {},\n    numberStyle = {},\n    propertyStyle = {},\n    stringStyle = {},\n    style = {},\n    tabSpaceStyle = {},\n    trueStyle = {}\n  } = {},\n  tabWith = 2\n}: JsonFormatterProps): JSX.Element {\n  const jsonObject: JsonObject = useMemo(() => {\n    if (typeof json === 'string') {\n      try {\n        return JSON.parse(json)\n      } catch (error) {\n        return json\n      }\n    }\n    return json\n  }, [json])\n\n  const repeatTabSpace = useCallback(\n    (times: number): JSX.Element => (\n      <span className={tabSpaceClassName} style={tabSpaceStyle}>\n        {'\\xa0'.repeat(tabWith * times)}\n      </span>\n    ),\n    [tabSpaceClassName, tabSpaceStyle, tabWith]\n  )\n\n  const categorize = useCallback(\n    (\n      data: JsonObject,\n      tabSpaceRepeatTimes: number\n    ): JSX.Element | JSX.Element[] => {\n      switch (Object.prototype.toString.call(data)) {\n        case '[object Number]': {\n          return (\n            <span className={numberClassName} style={numberStyle}>\n              {data as number}\n            </span>\n          )\n        }\n\n        case '[object String]': {\n          return (\n            <span\n              className={stringClassName}\n              style={stringStyle}\n            >{`\"${data}\"`}</span>\n          )\n        }\n\n        case '[object Boolean]': {\n          const dataJSX = data ? (\n            <span\n              className={`${booleanClassName} ${trueClassName}`}\n              style={{ ...booleanStyle, ...trueStyle }}\n            >\n              true\n            </span>\n          ) : (\n            <span\n              className={`${booleanClassName} ${falseClassName}`}\n              style={{ ...booleanStyle, ...falseStyle }}\n            >\n              false\n            </span>\n          )\n          return dataJSX\n        }\n\n        case '[object Object]': {\n          return (\n            <React.Fragment>\n              <span className={braceClassName} style={braceStyle}>\n                {'{'}\n              </span>\n              <br />\n              {Object.entries(data as Record<string, JsonObject>).map(\n                ([key, value], index, list) => (\n                  <React.Fragment key={index}>\n                    {repeatTabSpace(tabSpaceRepeatTimes + 1)}\n                    <span\n                      className={propertyClassName}\n                      style={propertyStyle}\n                    >{`\"${key}\": `}</span>\n                    {categorize(value, tabSpaceRepeatTimes + 1)}\n                    {index !== list.length - 1 && (\n                      <span className={commaClassName} style={commaStyle}>\n                        ,\n                      </span>\n                    )}\n                    <br />\n                  </React.Fragment>\n                )\n              )}\n              {repeatTabSpace(tabSpaceRepeatTimes)}\n              <span className={braceClassName} style={braceStyle}>\n                {'}'}\n              </span>\n            </React.Fragment>\n          )\n        }\n\n        case '[object Array]': {\n          return (\n            <React.Fragment>\n              <span className={bracketClassName} style={bracketStyle}>\n                [\n              </span>\n              <br />\n              {(data as unknown as JsonObject[]).map((value, index, list) => (\n                <React.Fragment key={index}>\n                  {repeatTabSpace(tabSpaceRepeatTimes + 1)}\n                  {categorize(value, tabSpaceRepeatTimes + 1)}\n                  {index !== list.length - 1 && (\n                    <span className={commaClassName} style={commaStyle}>\n                      ,\n                    </span>\n                  )}\n                  <br />\n                </React.Fragment>\n              ))}\n              {repeatTabSpace(tabSpaceRepeatTimes)}\n              <span className={bracketClassName} style={bracketStyle}>\n                ]\n              </span>\n            </React.Fragment>\n          )\n        }\n\n        case '[object Null]': {\n          return (\n            <span className={nullClassName} style={nullStyle}>\n              null\n            </span>\n          )\n        }\n\n        default:\n          return <span>type error</span>\n      }\n    },\n    [\n      booleanClassName,\n      booleanStyle,\n      braceClassName,\n      braceStyle,\n      bracketClassName,\n      bracketStyle,\n      commaClassName,\n      commaStyle,\n      falseClassName,\n      falseStyle,\n      nullClassName,\n      nullStyle,\n      numberClassName,\n      numberStyle,\n      propertyClassName,\n      propertyStyle,\n      repeatTabSpace,\n      stringClassName,\n      stringStyle,\n      trueClassName,\n      trueStyle\n    ]\n  )\n\n  const result = useMemo(\n    () => categorize(jsonObject, 0),\n    [categorize, jsonObject]\n  )\n\n  return (\n    <div className={className} style={style}>\n      <div>{result}</div>\n    </div>\n  )\n}\n"],"names":["useMemo","useCallback"],"mappings":"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"}