Skip to content

Commit ceef7b0

Browse files
CarlosNZCarlosNZ
authored
#62 1-indexed arrays (#224)
1 parent 14f6860 commit ceef7b0

File tree

7 files changed

+43
-15
lines changed

7 files changed

+43
-15
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,7 @@ This is a reference list of *all* possible props, divided into related sections.
206206
| `collapseClickZones` | `Array<"left" \| "header" \| "property">` | `["left", "header"]` | Aside from the <span style="font-size: 140%">`⌄`</span> icon, you can specify other regions of the UI to be clickable for collapsing/opening a collection. |
207207
| `rootName` | `string` | `"data"` | A name to display in the editor as the root of the data object. |
208208
| `showArrayIndices` | `boolean` | `true` | Whether or not to display the index (as a property key) for array elements. |
209+
| `arrayIndexFromOne` | `boolean` | `false` | When displaying array indices, first item will be labelled "1" (as opposed to "0"). |
209210
| `showStringQuotes` | `boolean` | `true` | Whether or not to display string values in "quotes". |
210211
| `showCollectionCount` | `boolean\|"when-closed"` | `true` | Whether or not to display the number of items in each collection (object or array). |
211212
| `stringTruncate` | `number` | `250` | String values longer than this many characters will be displayed truncated (with `...`). The full string will always be visible when editing. |
@@ -1241,6 +1242,7 @@ This component is heavily inspired by [react-json-view](https://github.com/mac-s
12411242
12421243
## Changelog
12431244
1245+
- **1.28.3**: Option to display array indexes starting at "1" ([#62](https://github.com/CarlosNZ/json-edit-react/issues/62))
12441246
- **1.28.2**: When switching data type, only keep editing if new type is primitive ([#216](https://github.com/CarlosNZ/json-edit-react/issues/216))
12451247
- **1.28.1**: Fix left padding of root node when value is primitive ([#214](https://github.com/CarlosNZ/json-edit-react/issues/214))
12461248
- **1.28.0**:

‎demo/src/App.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ interface AppState {
6767
allowCopy: boolean
6868
sortKeys: boolean
6969
showIndices: boolean
70+
arraysFromOne: boolean
7071
showStringQuotes: boolean
7172
defaultNewValue: string
7273
searchText: string
@@ -111,6 +112,7 @@ function App() {
111112
allowCopy: true,
112113
sortKeys: false,
113114
showIndices: true,
115+
arraysFromOne: false,
114116
showStringQuotes: true,
115117
defaultNewValue: 'New data!',
116118
searchText: '',
@@ -176,6 +178,7 @@ function App() {
176178
collapseTime,
177179
showCount,
178180
showIndices,
181+
arraysFromOne,
179182
sortKeys,
180183
showStringQuotes,
181184
allowCopy,
@@ -508,6 +511,7 @@ function App() {
508511
defaultValue={dataDefinition?.defaultValue ?? defaultNewValue}
509512
newKeyOptions={dataDefinition?.newKeyOptions}
510513
showArrayIndices={showIndices}
514+
arrayIndexFromOne={arraysFromOne}
511515
showStringQuotes={showStringQuotes}
512516
minWidth={'min(500px, 95vw)'}
513517
maxWidth="min(670px, 90vw)"
@@ -825,6 +829,16 @@ function App() {
825829
>
826830
Show String quotes
827831
</Checkbox>
832+
<Checkbox
833+
id="sortKeysCheckbox"
834+
isChecked={sortKeys}
835+
onChange={() => toggleState('sortKeys')}
836+
w="50%"
837+
>
838+
Sort Object keys
839+
</Checkbox>
840+
</Flex>
841+
<Flex w="100%" justify="flex-start">
828842
<Checkbox
829843
id="showIndicesCheckbox"
830844
isChecked={showIndices}
@@ -833,16 +847,16 @@ function App() {
833847
>
834848
Show Array indices
835849
</Checkbox>
836-
</Flex>
837-
<Flex w="100%" justify="flex-start">
838850
<Checkbox
839-
id="sortKeysCheckbox"
840-
isChecked={sortKeys}
841-
onChange={() => toggleState('sortKeys')}
851+
id="arraysFromOneCheckbox"
852+
isChecked={arraysFromOne}
853+
onChange={() => toggleState('arraysFromOne')}
842854
w="50%"
843855
>
844-
Sort Object keys
856+
Arrays index from 1
845857
</Checkbox>
858+
</Flex>
859+
<Flex w="100%" justify="flex-start">
846860
<HStack>
847861
<Checkbox
848862
id="customEditorCheckbox"

‎src/CollectionNode.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
5454
indent,
5555
sort,
5656
showArrayIndices,
57+
arrayIndexFromOne,
5758
defaultValue,
5859
newKeyOptions,
5960
translate,
@@ -444,7 +445,8 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
444445
isEditingKey,
445446
pathString,
446447
path,
447-
name: name as string,
448+
name,
449+
arrayIndexFromOne,
448450
handleKeyboard,
449451
handleEditKey,
450452
handleCancel,

‎src/JsonEditor.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ const Editor: React.FC<JsonEditorProps> = ({
6363
searchDebounceTime = 350,
6464
keySort = false,
6565
showArrayIndices = true,
66+
arrayIndexFromOne = false,
6667
showStringQuotes = true,
6768
showIconTooltips = false,
6869
defaultValue = null,
@@ -368,6 +369,7 @@ const Editor: React.FC<JsonEditorProps> = ({
368369
keySort,
369370
sort,
370371
showArrayIndices,
372+
arrayIndexFromOne,
371373
showStringQuotes,
372374
showIconTooltips,
373375
indent,

‎src/KeyDisplay.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ interface KeyDisplayProps {
1111
isEditingKey: boolean
1212
pathString: string
1313
path: CollectionKey[]
14-
name: string
14+
name: string | number
15+
arrayIndexFromOne: boolean
1516
handleKeyboard: (
1617
e: React.KeyboardEvent,
1718
eventMap: Partial<Record<keyof KeyboardControlsFull, () => void>>
@@ -31,6 +32,7 @@ export const KeyDisplay: React.FC<KeyDisplayProps> = ({
3132
pathString,
3233
path,
3334
name,
35+
arrayIndexFromOne,
3436
handleKeyboard,
3537
handleEditKey,
3638
handleCancel,
@@ -42,20 +44,22 @@ export const KeyDisplay: React.FC<KeyDisplayProps> = ({
4244
}) => {
4345
const { setCurrentlyEditingElement } = useTreeState()
4446

47+
const displayKey = typeof name === 'number' ? String(name + (arrayIndexFromOne ? 1 : 0)) : name
48+
4549
if (!isEditingKey)
4650
return (
4751
<span
4852
className="jer-key-text"
4953
style={{
5054
...styles,
51-
minWidth: `${Math.min(String(name).length + 1, 5)}ch`,
52-
flexShrink: name.length > 10 ? 1 : 0,
55+
minWidth: `${Math.min(displayKey.length + 1, 5)}ch`,
56+
flexShrink: displayKey.length > 10 ? 1 : 0,
5357
}}
5458
onDoubleClick={() => canEditKey && setCurrentlyEditingElement(path, 'key')}
5559
onClick={handleClick}
5660
>
57-
{emptyStringKey ? <span className="jer-empty-string">{emptyStringKey}</span> : name}
58-
{name !== '' || emptyStringKey ? <span className="jer-key-colon">:</span> : null}
61+
{emptyStringKey ? <span className="jer-empty-string">{emptyStringKey}</span> : displayKey}
62+
{displayKey !== '' || emptyStringKey ? <span className="jer-key-colon">:</span> : null}
5963
</span>
6064
)
6165

@@ -64,7 +68,7 @@ export const KeyDisplay: React.FC<KeyDisplayProps> = ({
6468
className="jer-input-text jer-key-edit"
6569
type="text"
6670
name={pathString}
67-
defaultValue={name}
71+
defaultValue={displayKey}
6872
autoFocus
6973
onFocus={(e) => e.target.select()}
7074
onKeyDown={(e: React.KeyboardEvent) =>
@@ -86,7 +90,7 @@ export const KeyDisplay: React.FC<KeyDisplayProps> = ({
8690
},
8791
})
8892
}
89-
style={{ width: `${String(name).length / 1.5 + 0.5}em` }}
93+
style={{ width: `${displayKey.length / 1.5 + 0.5}em` }}
9094
/>
9195
)
9296
}

‎src/ValueNodeWrapper.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
4040
showLabel,
4141
stringTruncate,
4242
showStringQuotes,
43+
arrayIndexFromOne,
4344
indent,
4445
translate,
4546
customNodeDefinitions,
@@ -305,7 +306,8 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
305306
isEditingKey,
306307
pathString,
307308
path,
308-
name: name as string,
309+
name,
310+
arrayIndexFromOne,
309311
handleKeyboard,
310312
handleEditKey,
311313
handleCancel,

‎src/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export interface JsonEditorProps {
3737
searchDebounceTime?: number
3838
keySort?: boolean | CompareFunction
3939
showArrayIndices?: boolean
40+
arrayIndexFromOne?: boolean
4041
showStringQuotes?: boolean
4142
showIconTooltips?: boolean
4243
defaultValue?: string | number | boolean | null | object | DefaultValueFunction
@@ -272,6 +273,7 @@ interface BaseNodeProps {
272273
restrictTypeSelection: boolean | TypeOptions | TypeFilterFunction
273274
stringTruncate: number
274275
indent: number
276+
arrayIndexFromOne: boolean
275277
sort: SortFunction
276278
translate: TranslateFunction
277279
customNodeDefinitions: CustomNodeDefinition[]

0 commit comments

Comments
 (0)