Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: passing path to Editor for better customizability #496

Merged
merged 2 commits into from
Aug 13, 2024
Merged

feat: passing path to Editor for better customizability #496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
14102ce
feat: passing `path` to `Editor` for better customizability
pionxzh Jun 22, 2024
2023c73
feat: hide colon when key is empty
pionxzh Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/pages/apis.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
| `style` | `CSSProperties` | - | Custom style. |
| `sx` | `SxProps` | - | [The `sx` prop](https://mui.com/system/getting-started/the-sx-prop/) lets you style elements inline, using values from the theme. |
| `indentWidth` | `number` | 3 | Indent width for nested objects |
| `keyRenderer` | `{when: (props) => boolean}` | - | Customize a key, if `keyRenderer.when` returns `true`. |
| `keyRenderer` | `{when: (props) => boolean}` | - | Customize the rendering of key when `keyRenderer.when` returns `true`. Render `null` in `keyRenderer` will cause the colons to be hidden. |
| `valueTypes` | `ValueTypes` | - | Customize the definition of data types. See [Defining Data Types](/how-to/data-types) |
| `enableAdd` | `boolean` \|<br />`(path, currentValue) => boolean` | `false` | Whether enable add feature. Provide a function to customize this behavior by returning a boolean based on the value and path. |
| `enableDelete` | `boolean` \|<br />`(path, currentValue) => boolean` | `false` | Whether enable delete feature. Provide a function to customize this behavior by returning a boolean based on the value and path. |
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/how-to/data-types.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ For advanced use cases, you can provide `PreComponent` and `PostComponent` to re
#### `Editor`

To enable editing for a data type, you need to provide `serialize` and `deserialize` functions to convert the value to and from a string representation. You can then use the `Editor` component to provide a custom editor for the stringified value. When the user edits the value, it will be parsed using `deserialize`, and the result will be passed to the `onChange` callback.

- `props.path` - The path to the value.
- `props.value` - The value to edit.
- `props.setValue` - A function that can be used to update the value.
- `props.abortEditing` - A function that can be used to abort editing.
Expand Down
15 changes: 13 additions & 2 deletions src/components/DataKeyPair.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,7 +359,11 @@
)
: null
}
<Box ref={highlightContainer} component='span'>
<Box
ref={highlightContainer}
className='data-key-key'
component='span'
>
{
(isRoot && depth === 0
? rootName !== false
Expand All @@ -380,7 +384,13 @@
isRoot
? (rootName !== false && <DataBox sx={{ mr: 0.5 }}>:</DataBox>)
: nestedIndex === undefined && (
<DataBox sx={{ mr: 0.5 }}>:</DataBox>
<DataBox
className='data-key-colon'
sx={{
mr: 0.5,
'.data-key-key:empty + &': { display: 'none' }
}}
>:</DataBox>
)
)
}
Expand All @@ -391,6 +401,7 @@
(editing && editable)
? (Editor && (
<Editor
path={path}

Check warning on line 404 in src/components/DataKeyPair.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/DataKeyPair.tsx#L404 

Added line #L404 was not covered by tests
value={tempValue}
setValue={setTempValue}
abortEditing={abortEditing}
Expand Down
1 change: 1 addition & 0 deletions src/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export interface DataItemProps<ValueType = unknown> {
}

export type EditorProps<ValueType = unknown> = {
path: Path
value: ValueType
setValue: Dispatch<ValueType>
abortEditing: () => void
Expand Down