Skip to content

Commit

Permalink
Add prop ignoreLargeArray
Browse files Browse the repository at this point in the history
  • Loading branch information
@YYsuni
YYsuni committed Feb 4, 2024
1 parent 5afc0e9 commit 7d61952
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 30 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ import 'react18-json-view/src/style.css'
| `urlRegExp` | `RegExp` | `/^(((ht\|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/` | URL RegExp pattern. |
| `displaySize` | `boolean` \| `integer` \| 'collapsed' \| 'expanded' | `false` | Whether display the size of `Object`, `Array`. |
| `collapseStringsAfterLength` | `integer` | `99` | When an integer value is assigned, strings longer than that length will be truncated and indicated by an ellipsis. To expand or collapse the string content, simply click on the string value. |
| `ignoreLargeArray`(canary) | `boolean` | `false` | Prevent collapsing large array(length > 100) behavior since v0.2.7 |
| `collapseStringMode` | `'directly'` \| `'word'` \| `'address'` | `'directly'` | If the `word` is assigned, the collapsed length will be adjusted to fully display the last word.(English only) |
| `collapsed` | `boolean` \| `integer` \| `function` | `false` | When set to true(false), all nodes will be (not) collapsed by default. When using an integer value, it will collapse at a specific depth. The collapsed also can be a function. |
| `collapseObjectsAfterLength` | `integer` | `99` | When an integer value is assigned, the object and array will initially collapse. |
Expand Down
14 changes: 11 additions & 3 deletions src/components/json-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,9 @@ export const JsonViewContext = createContext({
displaySize: undefined as DisplaySize,

matchesURL: false,
urlRegExp: defaultURLRegExp
urlRegExp: defaultURLRegExp,

ignoreLargeArray: false
})

interface Props {
Expand Down Expand Up @@ -68,6 +70,8 @@ interface Props {

matchesURL?: boolean
urlRegExp?: RegExp

ignoreLargeArray?: boolean
}

export default function JsonView({
Expand Down Expand Up @@ -99,7 +103,9 @@ export default function JsonView({
className,

matchesURL = false,
urlRegExp = defaultURLRegExp
urlRegExp = defaultURLRegExp,

ignoreLargeArray = false
}: Props) {
const [_, update] = useState(0)
const forceUpdate = useCallback(() => update(state => ++state), [])
Expand Down Expand Up @@ -131,7 +137,9 @@ export default function JsonView({
displaySize,

matchesURL,
urlRegExp
urlRegExp,

ignoreLargeArray
}}>
<code
className={'json-view' + (dark ? ' dark' : '') + (theme && theme !== 'default' ? ' json-view_' + theme : '') + (className ? ' ' + className : '')}
Expand Down
20 changes: 16 additions & 4 deletions src/components/object-node.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,25 @@ interface Props {
}

export default function ObjectNode({ node, depth, indexOrName, deleteHandle: _deleteSelf, customOptions }: Props) {
if (Array.isArray(node) && node.length > 100) {
const {
collapsed,
enableClipboard,
ignoreLargeArray,
collapseObjectsAfterLength,
editable,
onDelete,
src,
onAdd,
onEdit,
onChange,
forceUpdate,
displaySize
} = useContext(JsonViewContext)

if (!ignoreLargeArray && Array.isArray(node) && node.length > 100) {
return <LargeArray node={node} depth={depth} indexOrName={indexOrName} deleteHandle={_deleteSelf} customOptions={customOptions} />
}

const { collapsed, enableClipboard, collapseObjectsAfterLength, editable, onDelete, src, onAdd, onEdit, onChange, forceUpdate, displaySize } =
useContext(JsonViewContext)

const isPlainObject = isObject(node)

const [fold, setFold] = useState(isCollapsed(node, depth, indexOrName, collapsed, collapseObjectsAfterLength, customOptions))
Expand Down
89 changes: 66 additions & 23 deletions website/src/contents/collapsed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,11 @@ const funcString = `(params) => {

export default function Collapsed() {
const [selected, setSelected] = useState(options[1])
const [ignoreLargeArray, setIgnoreLargeArray] = useState(false)

const code = `<JsonView src={json_object} collapsed={${selected === 'function' ? funcString : selected}} />`
const code = `<JsonView src={json_object} collapsed={${selected === 'function' ? funcString : selected}} ${
ignoreLargeArray ? 'ignoreLargeArray collapseObjectsAfterLength={Infinity}' : ''
} />`

const [copied, setCopied] = useState(false)

Expand All @@ -63,6 +66,14 @@ export default function Collapsed() {
{item}
</li>
))}
<li
className={clsx(
'min-w-[32px] cursor-pointer rounded-lg border px-2 py-1 text-center',
ignoreLargeArray && 'bg-slate-200 dark:bg-slate-600'
)}
onClick={() => setIgnoreLargeArray(s => !s)}>
ignoreLargeArray
</li>
</ul>

<div className='relative'>
Expand All @@ -79,33 +90,65 @@ export default function Collapsed() {
</div>

<div className='mt-2 rounded-lg border bg-white p-4 text-sm dark:bg-[#0E0832]'>
<JsonView
collapsed={valueMap[selected]}
src={{
string: 'string',
number: 123456,
boolean: false,
null: null,
func: function () {},
Symbol: Symbol('JSON View'),
obj: {
k1: 123,
k2: '123',
k3: false
},
arr: ['string', 123456, false, null],
nest: {
{ignoreLargeArray ? (
<JsonView
collapsed={valueMap[selected]}
src={{
string: 'string',
number: 123456,
boolean: false,
null: null,
func: function () {},
Symbol: Symbol('JSON View'),
obj: {
k1: 123,
k2: '123',
k3: false
},
arr: ['string', 123456, false, null],
nest: {
nest: {
nest: {
nest: 'over'
nest: {
nest: 'over'
}
}
}
}
},
largeArr: new Array(Math.trunc(Math.random() * 1000) + 800).fill((Math.random() * 10).toFixed(2))
}}
/>
},
largeArr: new Array(699).fill('123.456')
}}
ignoreLargeArray
collapseObjectsAfterLength={Infinity}
/>
) : (
<JsonView
collapsed={valueMap[selected]}
src={{
string: 'string',
number: 123456,
boolean: false,
null: null,
func: function () {},
Symbol: Symbol('JSON View'),
obj: {
k1: 123,
k2: '123',
k3: false
},
arr: ['string', 123456, false, null],
nest: {
nest: {
nest: {
nest: {
nest: 'over'
}
}
}
},
largeArr: new Array(699).fill('123.456')
}}
/>
)}
</div>
</>
)
Expand Down

0 comments on commit 7d61952

Please sign in to comment.