feat: invert logic for showing dots (#122)

Author: xepozz

.editorconfig

@@ -4,7 +4,7 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
-[*.{js,json,yml}]
+[{*.js, *.jsx, *.ts, *.tsx, *.json, *.yml, *.yaml}]
 charset = utf-8
 indent_style = space
 indent_size = 2

src/components/DataTypes/createEasyType.tsx

@@ -47,7 +47,7 @@ export function createEasyType<Value> (
       store => store.colorspace[config.colorKey])
     return (
       <InputBase
-        value={`${value}`}
+        value={value}
         onChange={
           useCallback<React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>>(
             (event) => {

src/stores/typeRegistry.tsx

@@ -205,12 +205,10 @@ export function predefined (): DataType<any>[] {
         'string',
         (props) => {
           const [showRest, setShowRest] = useState(false)
-          const collapseStringsAfterLength = useJsonViewerStore(
-            store => store.collapseStringsAfterLength)
+          const collapseStringsAfterLength = useJsonViewerStore(store => store.collapseStringsAfterLength)
           const value = showRest
             ? props.value
-            : props.value.slice(0,
-              collapseStringsAfterLength)
+            : props.value.slice(0, collapseStringsAfterLength)
           const hasRest = props.value.length > collapseStringsAfterLength
           return (
             <Box
@@ -220,12 +218,14 @@ export function predefined (): DataType<any>[] {
                 cursor: hasRest ? 'pointer' : 'inherit'
               }}
               onClick={() => {
-                setShowRest(value => !value)
+                if (hasRest) {
+                  setShowRest(value => !value)
+                }
               }}
             >
               &quot;
               {value}
-              {showRest ? <span>...</span> : <></>}
+              {hasRest && !showRest && (<Box component='span'>...</Box>)}
               &quot;
             </Box>
           )
@@ -282,7 +282,7 @@ export function predefined (): DataType<any>[] {
         !isInt(value),
       ...createEasyType(
         'float',
-        ({ value }) => <>{`${value}`}</>,
+        ({ value }) => <>{value}</>,
         {
           colorKey: 'base0B',
           fromString: value => parseFloat(value)
@@ -296,7 +296,7 @@ export function predefined (): DataType<any>[] {
       is: (value) => typeof value === 'number' && isInt(value),
       ...createEasyType(
         'int',
-        ({ value }) => <>{`${value}`}</>,
+        ({ value }) => <>{value}</>,
         {
           colorKey: 'base0F',
           fromString: value => parseInt(value)

tests/index.test.tsx

@@ -444,3 +444,33 @@ describe('Expand function by click on dots', () => {
     expect(elements[0].textContent).not.eq('...')
   })
 })
+
+describe('Show three dots after string collapsing', () => {
+  it('render', () => {
+    const Component = () => <JsonViewer
+        rootName={false}
+        value={'string string string'}
+        collapseStringsAfterLength={6}
+    />
+    const { container, rerender } = render(<Component />)
+
+    let elements = container.getElementsByClassName('string-value')
+    expect(elements.length).eq(1)
+    expect(elements[0].children.length).eq(1)
+    expect(elements[0].textContent).eq('"string..."')
+    fireEvent.click(elements[0].children[0])
+
+    rerender(<Component />)
+    elements = container.getElementsByClassName('string-value')
+    expect(elements.length).eq(1)
+    expect(elements[0].children.length).eq(1)
+    expect(elements[0].textContent).eq('"string string string"')
+    fireEvent.click(elements[0].children[0])
+
+    rerender(<Component />)
+    elements = container.getElementsByClassName('string-value')
+    expect(elements.length).eq(1)
+    expect(elements[0].children.length).eq(1)
+    expect(elements[0].textContent).eq('"string..."')
+  })
+})