atom.io 0.33.10 → 0.33.12

package/src/react-devtools/json-editor/editors-by-type/primitive-editors.tsx

@@ -4,6 +4,8 @@ import { NumberInput, TextInput } from "../../elastic-input"
 import type { JsonEditorProps_INTERNAL } from "../json-editor-internal"
 
 export const BooleanEditor = ({
+	path = [],
+	isReadonly = () => false,
 	data,
 	set,
 	Components,
@@ -11,6 +13,7 @@ export const BooleanEditor = ({
 }: JsonEditorProps_INTERNAL<boolean>): ReactElement => (
 	<Components.BooleanWrapper>
 		<input
+			disabled={isReadonly(path)}
 			data-testid={`${testid}-boolean-input`}
 			type="checkbox"
 			checked={data}
@@ -38,6 +41,7 @@ export const NumberEditor = ({
 }: JsonEditorProps_INTERNAL<number>): ReactElement => (
 	<Components.NumberWrapper>
 		<NumberInput
+			disabled={isReadonly(path)}
 			testid={`${testid}-number-input`}
 			value={data}
 			set={
@@ -63,6 +67,7 @@ export const StringEditor = ({
 	return (
 		<Components.StringWrapper>
 			<TextInput
+				readOnly={isReadonly(path)}
 				testid={`${testid}-string-input`}
 				value={data}
 				set={isReadonly(path) ? undefined : set}

package/src/react-devtools/json-editor/editors-by-type/utilities/object-properties.ts

@@ -45,7 +45,9 @@ export const makePropertyRenamers = <T extends Json.Tree.Object>(
 		]),
 	)
 
-export const makePropertyRemovers = <T extends Json.Tree.Object>(
+export const makePropertyRemovers = <
+	T extends Json.Tree.Array | Json.Tree.Object,
+>(
 	data: T,
 	set: SetterOrUpdater<T>,
 ): { [K in keyof T]: () => void } =>
@@ -54,14 +56,24 @@ export const makePropertyRemovers = <T extends Json.Tree.Object>(
 			key,
 			() => {
 				set(() => {
-					const { [key]: _, ...rest } = data
-					return rest as T
+					let next: T
+					if (Array.isArray(data)) {
+						const copy = [...data]
+						copy.splice(key as number, 1)
+						next = copy as unknown as T
+					} else {
+						const { [key]: _, ...rest } = data
+						next = rest as T
+					}
+					return next
 				})
 			},
 		]),
 	)
 
-export const makePropertyRecasters = <T extends Json.Tree.Object>(
+export const makePropertyRecasters = <
+	T extends Json.Tree.Array | Json.Tree.Object,
+>(
 	data: T,
 	set: SetterOrUpdater<T>,
 ): { [K in keyof T]: (newType: JsonTypeName) => void } =>
@@ -69,10 +81,20 @@ export const makePropertyRecasters = <T extends Json.Tree.Object>(
 		toEntries(data).map(([key, value]) => [
 			key,
 			(newType: JsonTypeName) => {
-				set(() => ({
-					...data,
-					[key]: castToJson(value)[newType],
-				}))
+				set(() => {
+					let next: T
+					if (Array.isArray(data)) {
+						const copy = [...data]
+						copy[key as number] = castToJson(value)[newType]
+						next = copy as unknown as T
+					} else {
+						next = {
+							...data,
+							[key]: castToJson(value)[newType],
+						}
+					}
+					return next
+				})
 			},
 		]),
 	)

package/src/react-devtools/json-editor/index.ts

@@ -1,16 +1,3 @@
-import type { JsonTypes } from "atom.io/json"
-import type { FC } from "react"
-
-import { ArrayEditor } from "./editors-by-type/array-editor"
-import { ObjectEditor } from "./editors-by-type/object-editor"
-import {
-	BooleanEditor,
-	NullEditor,
-	NumberEditor,
-	StringEditor,
-} from "./editors-by-type/primitive-editors"
-import type { JsonEditorProps_INTERNAL } from "./json-editor-internal"
-
 export * from "./default-components"
 export * from "./developer-interface"
 export * from "./editors-by-type/utilities/cast-to-json"
@@ -18,15 +5,3 @@ export * from "./editors-by-type/utilities/cast-to-json"
 export type SetterOrUpdater<T> = <New extends T>(
 	next: New | ((old: T) => New),
 ) => void
-
-export const SubEditors: Record<
-	keyof JsonTypes,
-	FC<JsonEditorProps_INTERNAL<any>>
-> = {
-	array: ArrayEditor,
-	boolean: BooleanEditor,
-	null: NullEditor,
-	number: NumberEditor,
-	object: ObjectEditor,
-	string: StringEditor,
-}

package/src/react-devtools/json-editor/json-editor-internal.tsx

@@ -3,6 +3,7 @@ import type { JsonTypes } from "atom.io/json"
 import { isJson } from "atom.io/json"
 import type { CSSProperties, FC, ReactElement } from "react"
 
+import { button } from "../Button"
 import { ElasticInput } from "../elastic-input"
 import type { SetterOrUpdater } from "."
 import { SubEditors } from "."
@@ -23,6 +24,8 @@ export type JsonEditorProps_INTERNAL<T> = {
 	style?: CSSProperties | undefined
 	Header?: FC<{ data: T }> | undefined
 	Components: JsonEditorComponents
+	isOpen?: boolean
+	setIsOpen?: (newValue: boolean) => void
 	testid?: string | undefined
 }
 
@@ -38,8 +41,9 @@ export const JsonEditor_INTERNAL = <T,>({
 	isHidden = () => false,
 	className,
 	style,
-	Header: HeaderDisplay,
 	Components,
+	isOpen,
+	setIsOpen,
 	testid,
 }: JsonEditorProps_INTERNAL<T>): ReactElement | null => {
 	const dataIsJson = isJson(data)
@@ -53,6 +57,8 @@ export const JsonEditor_INTERNAL = <T,>({
 
 	const disabled = isReadonly(path)
 
+	const dataIsTree = refined.type === `array` || refined.type === `object`
+
 	return isHidden(path) ? null : (
 		<Components.ErrorBoundary>
 			<Components.EditorWrapper
@@ -60,69 +66,108 @@ export const JsonEditor_INTERNAL = <T,>({
 				style={style}
 				testid={testid}
 			>
-				{remove ? (
-					disabled ? (
-						<Components.Button disabled testid={`${testid}-delete`}>
-							<Components.DeleteIcon />
-						</Components.Button>
-					) : (
+				<header>
+					{remove ? (
 						<Components.Button
-							testid={`${testid}-delete`}
+							disabled={disabled}
 							onClick={() => {
 								remove()
 							}}
+							testid={`${testid}-delete`}
 						>
 							<Components.DeleteIcon />
 						</Components.Button>
-					)
-				) : null}
-				{HeaderDisplay && <HeaderDisplay data={data} />}
-				{rename && (
-					<Components.KeyWrapper>
-						<ElasticInput
-							value={name}
-							onChange={
-								disabled
-									? undefined
-									: (e) => {
-											rename(e.target.value)
-										}
-							}
-							disabled={disabled}
-							data-testid={`${testid}-rename`}
+					) : null}
+					{dataIsTree && isOpen !== undefined && setIsOpen ? (
+						<button.OpenClose
+							isOpen={isOpen}
+							testid={`${testid}-open-close`}
+							setIsOpen={setIsOpen}
 						/>
-					</Components.KeyWrapper>
-				)}
-				<SubEditor
-					data={refined.data as never}
-					set={set}
-					remove={remove}
-					rename={rename}
-					path={path}
-					isReadonly={isReadonly}
-					isHidden={isHidden}
-					Components={Components}
-					testid={testid}
-				/>
-				{recast && dataIsJson ? (
-					<select
-						onChange={
-							disabled
-								? undefined
-								: (e) => {
+					) : null}
+					{rename && (
+						<Components.KeyWrapper>
+							<ElasticInput
+								value={name}
+								onChange={(e) => {
+									rename(e.target.value)
+								}}
+								disabled={disabled}
+								data-testid={`${testid}-rename`}
+							/>
+						</Components.KeyWrapper>
+					)}
+					{dataIsTree ? (
+						<>
+							{recast ? (
+								<select
+									onChange={(e) => {
 										recast(e.target.value as keyof JsonTypes)
+									}}
+									value={refined.type}
+									disabled={disabled}
+									data-testid={`${testid}-recast`}
+								>
+									{Object.keys(SubEditors).map((type) => (
+										<option key={type} value={type}>
+											{type}
+										</option>
+									))}
+								</select>
+							) : null}
+							{isOpen !== undefined && setIsOpen ? (
+								<span className="json_viewer">{JSON.stringify(data)}</span>
+							) : null}
+						</>
+					) : (
+						<>
+							<SubEditor
+								data={refined.data as never}
+								set={set}
+								remove={remove}
+								rename={rename}
+								path={path}
+								isReadonly={isReadonly}
+								isHidden={isHidden}
+								Components={Components}
+								testid={testid}
+							/>
+							{recast && dataIsJson ? (
+								<select
+									onChange={
+										disabled
+											? undefined
+											: (e) => {
+													recast(e.target.value as keyof JsonTypes)
+												}
 									}
-						}
-						value={refined.type}
-						disabled={disabled}
-						data-testid={`${testid}-recast`}
-					>
-						{Object.keys(SubEditors).map((type) => (
-							<option key={type} value={type}>
-								{type}
-							</option>
-						))}
-					</select>
+									value={refined.type}
+									disabled={disabled}
+									data-testid={`${testid}-recast`}
+								>
+									{Object.keys(SubEditors).map((type) => (
+										<option key={type} value={type}>
+											{type}
+										</option>
+									))}
+								</select>
+							) : null}
+						</>
+					)}
+				</header>
+
+				{dataIsTree && isOpen !== false ? (
+					<SubEditor
+						data={refined.data as never}
+						set={set}
+						remove={remove}
+						rename={rename}
+						path={path}
+						isReadonly={isReadonly}
+						isHidden={isHidden}
+						Components={Components}
+						testid={testid}
+					/>
 				) : null}
 			</Components.EditorWrapper>
 		</Components.ErrorBoundary>