@symbo.ls/preview 0.0.88 → 0.0.89

package/package.json

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

package/src/{pages/Spaces/buttons.js → components/SpacingButton/actionButtons.js}

@@ -1,7 +1,8 @@
 'use strict'
 
 import { Flex } from '@symbo.ls/components'
-import { SpacingPropButton, SPACING_BUTTONS } from '../../components'
+import { SpacingButton } from '..'
+import { SPACING_BUTTONS } from './props'
 
 export const setTableButtons = ({ state }) =>
   Object.keys(SPACING_BUTTONS).filter(v => {
@@ -35,7 +36,6 @@ export default {
     ':hover': { opacity: '1' }
   },
 
-  childExtend: SpacingPropButton,
-
+  childExtend: SpacingButton,
   $setStateCollection: setTableButtons
 }

package/src/components/{SpacingPropButton → SpacingButton}/dropdown.js

@@ -11,9 +11,9 @@ import {
   diffPropPosition,
   diffPropValue,
   getStateTree,
-  keysOf,
-  SPACING_BUTTONS
+  keysOf
 } from '.'
+import { SPACING_BUTTONS } from './props'
 
 const ButtonInDropdown = {
   extend: [ChoosableButton],

package/src/components/{SpacingPropButton → SpacingButton}/index.js

@@ -1,53 +1,10 @@
 'use strict'
 
-import { WiderButton, DropdownParent } from '@symbo.ls/components'
+import { WiderButton, DropdownParent, Icon } from '@symbo.ls/components'
 
+import { SPACING_BUTTONS } from './props'
 import dropdown from './dropdown'
 
-export const SPACING_BUTTONS = {
-  margin: {
-    maxValue: 3000,
-    blockStart: {},
-    inlineEnd: {},
-    blockEnd: {},
-    inlineStart: {}
-  },
-  height: {
-    minWidth: {},
-    maxWidth: {}
-  },
-  width: {
-    minWidth: {},
-    maxWidth: {}
-  },
-  borderWidth: {
-    maxValue: 1280,
-    blockStartWidth: {},
-    inlineEndWidth: {},
-    blockEndWidth: {},
-    inlineStartWidth: {}
-  },
-  padding: {
-    maxValue: 3000,
-    blockStart: {},
-    inlineEnd: {},
-    blockEnd: {},
-    inlineStart: {}
-  },
-  gap: {
-    maxValue: 3000,
-    Horizontal: {},
-    Vertical: {}
-  },
-  borderRadius: {
-    maxValue: 1280,
-    endStart: {},
-    startEnd: {},
-    endEnd: {},
-    startStart: {}
-  }
-}
-
 export const ChoosableButton = {
   props: ({ key }) => ({
     padding: 'Z',
@@ -128,7 +85,7 @@ export const DotForRowButton = {
   }
 }
 
-export const SpacingPropButton = {
+export const SpacingButton = {
   extend: [ChoosableButton, DropdownParent, WiderButton],
 
   props: (element) => {
@@ -192,6 +149,72 @@ export const SpacingPropButton = {
   dropdown
 }
 
+const DotsInButton = SpacingButton.dots
+
+export const SpacingRowButton = {
+  props: ({ state }) => {
+    const property = state
+    const row = property.parent
+    const table = row.parent
+
+    const propKey = property.value
+
+    const active = Object.keys(table.props).filter(prop => {
+      const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
+      const keyMathes = table.props[prop] === row.key
+      return hasProp && keyMathes
+    }).length
+
+    return {
+      active: !!active,
+      position: 'relative',
+      round: 'Z',
+      display: 'flex',
+
+      icon: {
+        name: propKey,
+        opacity: '0',
+        color: 'gray5',
+        margin: 'auto'
+      },
+
+      '.active': {
+        boxShadow: '0, 0, 0, 3px, gray1, inset'
+      }
+    }
+  },
+
+  icon: {
+    extend: Icon,
+    props: ({ state }) => {
+      const property = state
+      const row = property.parent
+      const table = row.parent
+
+      const propKey = property.value
+      const middleActive = table.props[propKey] === row.key
+
+      const active = Object.keys(table.props).filter(prop => {
+        const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
+        const keyMathes = table.props[prop] === row.key
+        return hasProp && keyMathes
+      }).length
+
+      return {
+        active,
+        middleActive,
+        '.active': { opacity: '1' },
+        '.middleActive': { color: 'blue' }
+      }
+    }
+  },
+
+  dots: {
+    childExtend: DotForRowButton,
+    $setStateCollection: DotsInButton.$setStateCollection
+  }
+}
+
 export const getStateTree = element => {
   const table = element.lookup('Page').state
   const row = table.sequence[table.selectedKey]

package/src/components/SpacingButton/props.js

@@ -0,0 +1,45 @@
+'use strict'
+
+export const SPACING_BUTTONS = {
+  margin: {
+    maxValue: 3000,
+    blockStart: {},
+    inlineEnd: {},
+    blockEnd: {},
+    inlineStart: {}
+  },
+  height: {
+    minWidth: {},
+    maxWidth: {}
+  },
+  width: {
+    minWidth: {},
+    maxWidth: {}
+  },
+  borderWidth: {
+    maxValue: 1280,
+    blockStartWidth: {},
+    inlineEndWidth: {},
+    blockEndWidth: {},
+    inlineStartWidth: {}
+  },
+  padding: {
+    maxValue: 3000,
+    blockStart: {},
+    inlineEnd: {},
+    blockEnd: {},
+    inlineStart: {}
+  },
+  gap: {
+    maxValue: 3000,
+    Horizontal: {},
+    Vertical: {}
+  },
+  borderRadius: {
+    maxValue: 1280,
+    endStart: {},
+    startEnd: {},
+    endEnd: {},
+    startStart: {}
+  }
+}

package/src/components/SpacingTable.js

@@ -1,17 +1,14 @@
 'use strict'
 
 import {
-  Icon,
   Grid,
   Pseudo,
   mapSequence,
   sortSequence
 } from '@symbo.ls/components'
 
-import buttons, { setRowButtons } from '../pages/Spaces/buttons'
-import { DotForRowButton, SpacingPropButton } from './SpacingPropButton'
-
-const DotsInButton = SpacingPropButton.dots
+import { SpacingRowButton } from '.'
+import actionButtons, { setRowButtons } from './SpacingButton/actionButtons'
 
 const Cell = {
   tag: 'div',
@@ -107,71 +104,7 @@ const Row = {
   px: {},
   buttons: {
     extend: Grid,
-
-    childExtend: {
-      props: ({ state }) => {
-        const property = state
-        const row = property.parent
-        const table = row.parent
-
-        const propKey = property.value
-
-        const active = Object.keys(table.props).filter(prop => {
-          const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
-          const keyMathes = table.props[prop] === row.key
-          return hasProp && keyMathes
-        }).length
-
-        return {
-          active: !!active,
-          position: 'relative',
-          round: 'Z',
-          display: 'flex',
-
-          icon: {
-            name: propKey,
-            opacity: '0',
-            color: 'gray5',
-            margin: 'auto'
-          },
-
-          '.active': {
-            boxShadow: '0, 0, 0, 3px, gray1, inset'
-          }
-        }
-      },
-
-      icon: {
-        extend: Icon,
-        props: ({ state }) => {
-          const property = state
-          const row = property.parent
-          const table = row.parent
-
-          const propKey = property.value
-          const middleActive = table.props[propKey] === row.key
-
-          const active = Object.keys(table.props).filter(prop => {
-            const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
-            const keyMathes = table.props[prop] === row.key
-            return hasProp && keyMathes
-          }).length
-
-          return {
-            active,
-            middleActive,
-            '.active': { opacity: '1' },
-            '.middleActive': { color: 'blue' }
-          }
-        }
-      },
-
-      dots: {
-        childExtend: DotForRowButton,
-        $setStateCollection: DotsInButton.$setStateCollection
-      }
-    },
-
+    childExtend: SpacingRowButton,
     $setStateCollection: setRowButtons
   },
   graph: { line: {} },
@@ -273,5 +206,5 @@ export const SpacingTable = {
     $setStateCollection: ({ state }) => mapSequence(state, sortSequence)
   },
 
-  actionButtons: buttons
+  actionButtons
 }

package/src/components/index.js

@@ -20,6 +20,6 @@ export * from './IconsGroup'
 export * from './FontText'
 export * from './DesignComponent'
 export * from './ColumnParagrphs'
-export * from './SpacingPropButton'
+export * from './SpacingButton'
 export * from './UploadImage'
 export * from './SpacingTable'

package/src/pages/MediaQuery/lists.js

@@ -55,7 +55,6 @@ const BreakpointItem = {
   select: {
     extend: Select,
     props: ({ state }) => ({
-      background: 'transparent',
       color: 'white'
     }),