= ({
const [isCopied, setIsCopied] = useState(false)
- const copyCode = () => {
+ const copyCode = () =>
copyToClipboard(stringifyCode(code), () => setIsCopied(true))
- }
useEffect(() => {
if (isCopied) setTimeout(() => setIsCopied(false), 1250)
diff --git a/src/components/Code/utils.ts b/src/components/Code/utils.ts
index 45dba7d0..118c6ca1 100644
--- a/src/components/Code/utils.ts
+++ b/src/components/Code/utils.ts
@@ -23,7 +23,7 @@ interface CopyToClipboard {
export const copyToClipboard: CopyToClipboard = (str, callback) =>
navigator.clipboard.writeText(str).then(callback)
-const codePalette = {
+export const codePalette = {
[dark]: {
background: blacks['darken-20']
},
@@ -70,14 +70,14 @@ const lightCommonColor = themedStyles[light].base.color
const { shade } = ColorManipulationTypes
-const prismColors = {
+export const tokenColors = {
[dark]: {
boolean: reds.base,
char: darkCommonColor,
className: darkCommonColor,
comment: darkCommonColor,
function: darkCommonColor,
- keyword: darkCommonColor,
+ keyword: reds.base,
lineHighlight: darkCommonColor,
method: darkCommonColor,
number: reds.base,
@@ -95,7 +95,7 @@ const prismColors = {
className: lightCommonColor,
comment: lightCommonColor,
function: lightCommonColor,
- keyword: lightCommonColor,
+ keyword: oranges.base,
lineHighlight: lightCommonColor,
method: lightCommonColor,
number: oranges.base,
@@ -119,7 +119,7 @@ const generateThemedPreCodeStyles = (themeType: ThemeType) => {
} = themedStyles[themeType]
return {
- ...Object.entries(prismColors[themeType]).reduce(
+ ...Object.entries(tokenColors[themeType]).reduce(
(acc, [key, val]) => ({
...acc,
[`& .token.${key}`]: {
@@ -169,6 +169,7 @@ export const useStyles = createUseStyles({
...font.label,
fontFamily: 'Fira Code, monospace',
fontWeight: fontWeight.light,
+ tabSize: 3,
textShadow: 'none'
},
...generateThemedCodeStyles(light),
diff --git a/src/components/JSONPathPicker/JSONPathPicker.stories.tsx b/src/components/JSONPathPicker/JSONPathPicker.stories.tsx
new file mode 100644
index 00000000..627928e1
--- /dev/null
+++ b/src/components/JSONPathPicker/JSONPathPicker.stories.tsx
@@ -0,0 +1,77 @@
+import { Input } from 'components/Input'
+import { JSONPathPicker, JSONPathPickerProps } from '.'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import React, { useState } from 'react'
+
+export default {
+ component: JSONPathPicker,
+ title: 'JSONPathPicker'
+} as Meta
+
+const Template: Story
= args => {
+ const [path, setPath] = useState('$.dassana')
+
+ return (
+
+
setPath(e.target.value)}
+ value={path}
+ />
+
+
{
+ setPath(path)
+ console.log(path)
+ }}
+ path={path}
+ />
+
+ {displayControls && (
+
+ )}
+
+ {recursiveRender({
+ classes: compClasses,
+ currPath: '$',
+ isLastItem: true,
+ onChange,
+ pickedPath: path,
+ remainingJSON: json
+ })}
+
+
+ {arr.map((item, i) => (
+ -
+ {recursiveRender({
+ classes,
+ currPath: `${currPath}[${i}]`,
+ isLastItem: arr.length - 1 === i,
+ onChange,
+ pickedPath,
+ remainingJSON: item
+ })}
+
+ ))}
+
+
+ {renderPunctuation(']', classes)}
+ {renderComma({ classes, isLastItem })}
+
+
+ )}
+
+ )
+}
+
+const renderObject = ({
+ classes,
+ isLastItem,
+ onChange,
+ pickedPath,
+ remainingJSON,
+ currPath
+}: RenderParams): ReactNode => {
+ const json = remainingJSON as Record
+ const remainingKeys = Object.keys(json)
+
+ const relation = getPathRelationship(currPath, pickedPath)
+
+ const pickedItemClasses = cn({
+ [classes.pickedItem]: relation === Relationship.self
+ })
+
+ return isEmpty(json) ? (
+
+ {renderPunctuation('{', classes)}
+ {renderPunctuation('}', classes)}
+ {renderComma({ classes, isLastItem })}
+
+ ) : (
+ <>
+ {renderPunctuation('{', classes)}
+
+ {remainingKeys.map((key, i) => (
+ -
+ onChange(`${currPath}.${key}`)}
+ >{`"${key}"`}
+ :
+ {recursiveRender({
+ classes,
+ currPath: `${currPath}.${key}`,
+ isLastItem: remainingKeys.length - 1 === i,
+ onChange,
+ pickedPath,
+ remainingJSON: json[key]
+ })}
+
+ ))}
+
+
+ {renderPunctuation('}', classes)}
+ {renderComma({ classes, isLastItem })}
+
+
+ )
+}
+
+interface RenderPrimitiveParams extends RenderParams {
+ type: Types.boolean | Types.number | Types.null
+}
+const renderPrimitive = ({
+ classes,
+ pickedPath,
+ remainingJSON,
+ isLastItem,
+ currPath,
+ type
+}: RenderPrimitiveParams): ReactNode => {
+ const relation = getPathRelationship(currPath, pickedPath)
+
+ const pickedItemClasses = cn({
+ [classes[type]]: true,
+ [classes.pickedItem]: relation === Relationship.self
+ })
+
+ return (
+ <>
+
+ {JSON.stringify(remainingJSON)}
+
+ {renderComma({ classes, isLastItem })}
+
+ )
+}
+
+const renderString = ({
+ classes,
+ pickedPath,
+ remainingJSON,
+ isLastItem,
+ currPath
+}: RenderParams): ReactNode => {
+ const relation = getPathRelationship(currPath, pickedPath)
+
+ const pickedItemClasses = cn({
+ [classes.string]: true,
+ [classes.pickedItem]: relation === Relationship.self
+ })
+
+ return (
+ <>
+ {`"${remainingJSON}"`}
+ {renderComma({ classes, isLastItem })}
+
+ )
+}
+
+// -------------------------------------------------
+
+const mappedTypesToRenderFns = {
+ [array]: renderArray,
+ [boolean]: (params: RenderParams) =>
+ renderPrimitive({ ...params, type: boolean }),
+ [nullType]: (params: RenderParams) =>
+ renderPrimitive({ ...params, type: nullType }),
+ [number]: (params: RenderParams) =>
+ renderPrimitive({ ...params, type: number }),
+ [object]: renderObject,
+ [string]: renderString
+}
+
+const getRemainingJSONType = (remainingJSON: RemainingJSON) => {
+ if (isNull(remainingJSON)) return nullType
+ else if (Array.isArray(remainingJSON)) return array
+ else {
+ const type = typeof remainingJSON
+
+ switch (type) {
+ case 'number':
+ case 'bigint':
+ return number
+ case 'object':
+ return object
+ case 'string':
+ return string
+ case 'boolean':
+ return boolean
+ default:
+ return nullType
+ }
+ }
+}
+
+export const recursiveRender = ({
+ classes,
+ pickedPath,
+ isLastItem,
+ currPath,
+ onChange,
+ remainingJSON
+}: RenderParams): ReactNode =>
+ mappedTypesToRenderFns[getRemainingJSONType(remainingJSON)]({
+ classes,
+ currPath,
+ isLastItem,
+ onChange,
+ pickedPath,
+ remainingJSON
+ })
+
+/* -x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x- */
diff --git a/src/components/Table/utils.tsx b/src/components/Table/utils.tsx
index 95953724..16b808ae 100644
--- a/src/components/Table/utils.tsx
+++ b/src/components/Table/utils.tsx
@@ -3,9 +3,7 @@ import bytes from 'bytes'
import { CellWithTooltip } from './CellWithTooltip'
import { ColoredDot } from 'components/ColoredDot'
import { EditableCell } from './EditableCell'
-import { getJSONPathValue } from 'components/utils'
import isUndefined from 'lodash/isUndefined'
-import { JSONPath } from 'jsonpath-plus'
import moment from 'moment'
import {
ColumnFormats,
@@ -20,6 +18,7 @@ import {
RenderPropsIcon
} from './types'
import { defaultIconHeight, MultipleIcons } from './MultipleIcons'
+import { getJSONPathArr, getJSONPathValue } from 'components/utils'
import { Icon, IconName, IconProps } from '../Icon'
import { Link, LinkProps } from '../Link'
import React, { Key, MouseEvent } from 'react'
@@ -106,10 +105,11 @@ export function processData(
partialData[dataIndex as keyof TableData] = value
}
- //@ts-ignore
- const pathArr: string[] = JSONPath.toPathArray(`$.${dataIndex}`)
+ const pathArr: string[] = getJSONPathArr(`$.${dataIndex}`)
+ // Fix for this issue https://github.com/JSONPath-Plus/JSONPath/issues/102
+ if (pathArr[0] === '$') pathArr.shift()
- if (pathArr && pathArr.length) {
+ if (pathArr.length) {
partialData[pathArr[0] as keyof TableData] = item[pathArr[0]]
}
})
diff --git a/src/components/index.ts b/src/components/index.ts
index 9ff98b54..dcb2e654 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -14,6 +14,7 @@ export * from './Form'
export * from './Input'
export * from './Icon'
export * from './IconButton'
+export * from './JSONPathPicker'
export * from './Link'
export * from './Modal'
export * from './Menu'
diff --git a/src/components/utils.ts b/src/components/utils.ts
index cc2f9c0e..ddbb0492 100644
--- a/src/components/utils.ts
+++ b/src/components/utils.ts
@@ -134,6 +134,12 @@ export const getJSONPathValue = (path: string, obj: Record) => {
if (value && Array.isArray(value)) return value[0]
}
+/**
+ * Takes a JSON path as string and converts to an array
+ */
+export const getJSONPathArr = (path: string): string[] =>
+ JSONPath.toPathArray(path)
+
export const getPopupContainerProps = (
popupContainerSelector = ''
): PopupContainerProps => {