@symbo.ls/preview 0.0.45 → 0.0.46

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {

package/src/pages/Spaces/SpacingScale.js

@@ -68,12 +68,16 @@ export const SpacingScale = {
           hide: Object.keys(state.props).length === 0,
           flex: '0 0 360px',
           margin: '0',
-          code: { margin: '0' },
+          code: {
+            margin: '0'
+          },
           buttons: { marginInline: 'X2' }
         }),
         title: null,
         code: {
-          text: ({ state }) => JSON.stringify(state.props, null, 2)
+          props: {
+            text: ({ state }) => 'const props = ' + JSON.stringify(state.props, null, 2)
+          }
         }
       }
     }

package/src/pages/Spaces/Table.js

@@ -21,7 +21,7 @@ const Row = {
   key: state => state.key,
 
   props: ({ state }) => ({
-    columns: '10ch 14ch 13ch 10ch 21em 1fr',
+    columns: '7ch 20em 14ch 12ch 12ch 1fr',
     alignItems: 'center',
     isBase: state.index === 0,
     active: (state.key && state.key.length) === 1,
@@ -92,10 +92,10 @@ const Row = {
   childExtend: Cell,
 
   i: {},
+  buttons,
   em: {},
   decimal: {},
   px: {},
-  buttons,
 
   graph: { line: {} }
 }
@@ -111,10 +111,10 @@ const HeaderRow = {
   },
 
   i: '#',
+  buttons: ' ',
   em: 'em',
   decimal: 'decimal',
   px: 'px',
-  buttons: null,
   graph: null
 }
 
@@ -158,6 +158,7 @@ export const Table = {
 
   cnt: {
     childExtend: Row,
+    props: { lazyLoad: true },
     $setStateCollection: (el) => mapSequence(el.state, sortSequence)
   }
 }

package/src/pages/Spaces/buttons.js

@@ -127,6 +127,7 @@ export default {
             }
           }
           return {
+            lazyLoad: true,
             columns: 'auto 32px auto',
             rows: 'auto 32px auto',
             templateAreas: `"endStart blockStart startEnd"
@@ -184,6 +185,7 @@ export default {
 
     click: {
       props: {
+        lazyLoad: true,
         position: 'absolute',
         inset: '0 0 0 0'
       },
@@ -194,17 +196,20 @@ export default {
           const tableState = rowState.parent
           const propKey = state.value
           const active = tableState.props[propKey] === rowState.key
-          if (active) {
-            delete tableState.props[propKey] && tableState.update()
-          } else {
-            const allKeys = Object.keys(tableState.props)
-            allKeys.filter(v => {
-              const splitInWords = propKey.split(/(?=[A-Z])/)
-              return v.includes(splitInWords[0]) && v.includes(splitInWords[1])
-            })
-              .forEach(v => delete tableState.props[v])
-            tableState.update({ props: { [propKey]: rowState.key } })
-          }
+          const t = setTimeout(() => {
+            if (active) {
+              delete tableState.props[propKey] && tableState.update()
+            } else {
+              const allKeys = Object.keys(tableState.props)
+              allKeys.filter(v => {
+                const splitInWords = propKey.split(/(?=[A-Z])/)
+                return v.includes(splitInWords[0]) && v.includes(splitInWords[1])
+              })
+                .forEach(v => delete tableState.props[v])
+              tableState.update({ props: { [propKey]: rowState.key } })
+            }
+            clearTimeout(t)
+          })
         }
       },