Skip to content

Commit 2e5739c

Browse files
pionxzhpionxzh
committed
feat: rename displayObjectSize to displaySize
accept customization via function
1 parent 3dcad7e commit 2e5739c

File tree

6 files changed

+26
-21
lines changed

6 files changed

+26
-21
lines changed

‎docs/pages/full/index.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ const IndexPage: FC = () => {
179179
const [theme, setTheme] = useState<JsonViewerTheme>('light')
180180
const [src, setSrc] = useState(() => example)
181181
const [displayDataTypes, setDisplayDataTypes] = useState(true)
182-
const [displayObjectSize, setDisplayObjectSize] = useState(true)
182+
const [displaySize, setDisplaySize] = useState(true)
183183
const [editable, setEditable] = useState(true)
184184
const [highlightUpdates, setHighlightUpdates] = useState(true)
185185
useEffect(() => {
@@ -249,8 +249,8 @@ const IndexPage: FC = () => {
249249
<FormControlLabel
250250
control={(
251251
<Switch
252-
checked={displayObjectSize}
253-
onChange={event => setDisplayObjectSize(event.target.checked)}
252+
checked={displaySize}
253+
onChange={event => setDisplaySize(event.target.checked)}
254254
/>
255255
)}
256256
label='DisplayObjectSize'
@@ -314,7 +314,7 @@ const IndexPage: FC = () => {
314314
indentWidth={indent}
315315
theme={theme}
316316
displayDataTypes={displayDataTypes}
317-
displayObjectSize={displayObjectSize}
317+
displaySize={displaySize}
318318
groupArraysAfterLength={groupArraysAfterLength}
319319
keyRenderer={KeyRenderer}
320320
valueTypes={[

‎docs/pages/index.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -97,15 +97,15 @@ Check the [source code](https://github.com./TexteaInc/json-viewer/blob/main/docs/
9797
| `onCopy` | `(path, value, copy) => void` | - | Callback when value copied, you can use it to customize the copy behavior.<br />\*Note: you can use the third argument `copy` to copy string to clipborad. |
9898
| `onSelect` | `(path, value) => void` | - | Callback when value selected. |
9999
| `enableClipboard` | `boolean` | `true` | Whether enable clipboard feature. |
100-
| `editable` | `boolean` \|<br />`(path, currentValue) => boolean` | `false` | Whether enable edit feature. You can pass a function to customize the result. |
100+
| `editable` | `boolean` \|<br />`(path, currentValue) => boolean` | `false` | Whether enable edit feature. Provide a function to customize this behavior by returning a boolean based on the value and path. |
101101
| `defaultInspectDepth` | `number` | 5 | Default inspect depth for nested objects.<br /><br />_\* If the number is set too large, it could result in performance issues._ |
102102
| `maxDisplayLength` | `number` | 30 | Hide items after reaching the count.<br />`Array` and `Object` will be affected.<br /><br />_\* If the number is set too large, it could result in performance issues._ |
103103
| `groupArraysAfterLength` | `number` | 100 | Group arrays after reaching the count.<br />Groups are displayed with bracket notation and can be expanded and collapsed by clicking on the brackets. |
104104
| `collapseStringsAfterLength` | `number` | 50 | Cut off the string after reaching the count. Collapsed strings are followed by an ellipsis.<br /><br />String content can be expanded and collapsed by clicking on the string value. |
105105
| `objectSortKeys` | `boolean` | `false` | Whether sort keys through `String.prototype.localeCompare()` |
106106
| `quotesOnKeys` | `boolean` | `true` | Whether add quotes on keys. |
107107
| `displayDataTypes` | `boolean` | `true` | Whether display data type labels. |
108-
| `displayObjectSize` | `boolean` | `true` | Whether display the size of array and object. |
108+
| `displaySize` | `boolean` \|<br />`(path, currentValue) => boolean` | `true` | Whether display the size of `Object`, `Array`, `Map` and `Set`. Provide a function to customize this behavior by returning a boolean based on the value and path. |
109109
| `highlightUpdates` | `boolean` | `true` | Whether to highlight updates. |
110110

111111
#### Mapping from [`mac-s-g/react-json-view`](https://github.com./mac-s-g/react-json-view)

‎src/components/DataTypes/Object.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ const PreObjectType: FC<DataItemProps<object>> = (props) => {
3434
const textColor = useTextColor()
3535
const isArray = useMemo(() => Array.isArray(props.value), [props.value])
3636
const isEmptyValue = useMemo(() => getValueSize(props.value) === 0, [props.value])
37-
const sizeOfValue = useMemo(() => inspectMetadata(props.value), [props.value]
38-
)
39-
const displayObjectSize = useJsonViewerStore(store => store.displayObjectSize)
37+
const sizeOfValue = useMemo(() => inspectMetadata(props.value), [props.value])
38+
const displaySize = useJsonViewerStore(store => store.displaySize)
39+
const shouldDisplaySize = useMemo(() => typeof displaySize === 'function' ? displaySize(props.path, props.value) : displaySize, [displaySize, props.path, props.value])
4040
const isTrap = useIsCycleReference(props.path, props.value)
4141
return (
4242
<Box
@@ -47,7 +47,7 @@ const PreObjectType: FC<DataItemProps<object>> = (props) => {
4747
}}
4848
>
4949
{isArray ? arrayLb : objectLb}
50-
{displayObjectSize && props.inspect && !isEmptyValue && (
50+
{shouldDisplaySize && props.inspect && !isEmptyValue && (
5151
<Box
5252
component='span'
5353
sx={{
@@ -80,14 +80,15 @@ const PreObjectType: FC<DataItemProps<object>> = (props) => {
8080
const PostObjectType: FC<DataItemProps<object>> = (props) => {
8181
const metadataColor = useJsonViewerStore(store => store.colorspace.base04)
8282
const isArray = useMemo(() => Array.isArray(props.value), [props.value])
83-
const displayObjectSize = useJsonViewerStore(store => store.displayObjectSize)
8483
const isEmptyValue = useMemo(() => getValueSize(props.value) === 0, [props.value])
8584
const sizeOfValue = useMemo(() => inspectMetadata(props.value), [props.value])
85+
const displaySize = useJsonViewerStore(store => store.displaySize)
86+
const shouldDisplaySize = useMemo(() => typeof displaySize === 'function' ? displaySize(props.path, props.value) : displaySize, [displaySize, props.path, props.value])
8687

8788
return (
8889
<Box component='span' className='data-object-end'>
8990
{isArray ? arrayRb : objectRb}
90-
{displayObjectSize && (isEmptyValue || !props.inspect)
91+
{shouldDisplaySize && (isEmptyValue || !props.inspect)
9192
? (
9293
<Box
9394
component='span'

‎src/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const JsonViewerInner: FC<JsonViewerProps> = (props) => {
6060
useSetIfNotUndefinedEffect('highlightUpdates', props.highlightUpdates)
6161
useSetIfNotUndefinedEffect('rootName', props.rootName)
6262
useSetIfNotUndefinedEffect('displayDataTypes', props.displayDataTypes)
63-
useSetIfNotUndefinedEffect('displayObjectSize', props.displayObjectSize)
63+
useSetIfNotUndefinedEffect('displaySize', props.displaySize)
6464
useSetIfNotUndefinedEffect('onCopy', props.onCopy)
6565
useSetIfNotUndefinedEffect('onSelect', props.onSelect)
6666
useEffect(() => {

‎src/stores/JsonViewerStore.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export type JsonViewerState<T = unknown> = {
3939
onCopy: JsonViewerOnCopy | undefined
4040
onSelect: JsonViewerOnSelect | undefined
4141
keyRenderer: JsonViewerKeyRenderer
42-
displayObjectSize: boolean
42+
displaySize: boolean | ((path: Path, value: unknown) => boolean)
4343

4444
getInspectCache: (path: Path, nestedIndex?: number) => boolean
4545
setInspectCache: (
@@ -75,7 +75,7 @@ export const createJsonViewerStore = <T = unknown> (props: JsonViewerProps<T>) =
7575
colorspace: lightColorspace,
7676
value: props.value,
7777
prevValue: undefined,
78-
displayObjectSize: props.displayObjectSize ?? true,
78+
displaySize: props.displaySize ?? true,
7979

8080
getInspectCache: (path, nestedIndex) => {
8181
const target = nestedIndex !== undefined

‎src/type.ts

+10-6
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@ export type Path = (string | number)[]
1111
* @param newValue
1212
*/
1313
export type JsonViewerOnChange = <U = unknown>(
14-
path: Path, oldValue: U,
15-
newValue: U /*, type: ChangeType */) => void
14+
path: Path,
15+
oldValue: U,
16+
newValue: U
17+
/*, type: ChangeType */
18+
) => void
1619

1720
/**
1821
* @param path path to the target value
@@ -127,8 +130,7 @@ export type JsonViewerProps<T = unknown> = {
127130
/**
128131
* Whether this value can be edited.
129132
*
130-
* Pass `false` to turn off the edit feature.
131-
* Pass a function to customize the result.
133+
* Provide a function to customize this behavior by returning a boolean based on the value and path.
132134
*
133135
* @default false
134136
*/
@@ -188,11 +190,13 @@ export type JsonViewerProps<T = unknown> = {
188190
displayDataTypes?: boolean
189191

190192
/**
191-
* Whether display the size of array and object
193+
* Whether display the size of `Object`, `Array`, `Map` and `Set`.
194+
*
195+
* Provide a function to customize this behavior by returning a boolean based on the value and path.
192196
*
193197
* @default true
194198
*/
195-
displayObjectSize?: boolean
199+
displaySize?: boolean | ((path: Path, value: unknown) => boolean)
196200

197201
/**
198202
* Whether to highlight updates.

0 commit comments

Comments
 (0)