View

package.json

@@ -41,10 +41,12 @@
   "dependencies": {
     "blob": "0.0.4",
     "classnames": "2.2.5",
+    "emotion": "9.1.1",
     "form-data": "2.1.2",
     "moment": "2.22.0",
     "react-files": "2.4.5",
-    "react-router-dom": "4.2.2"
+    "react-router-dom": "4.2.2",
+    "throttle-debounce": "1.0.1"
   },
   "devDependencies": {
     "@babel/core": "7.0.0-beta.43",

src/components/SmartView/index.js

@@ -0,0 +1,125 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { css, cx } from 'emotion'
+import { breakpoints, setAttributeForBreakpoints } from '../../utils/size'
+
+export default class SmartView extends Component {
+   /* eslint-disable */
+   static propTypes = {
+      alignItems: PropTypes.string,
+      backgroundColor: PropTypes.string,
+      borderTop: PropTypes.string,
+      borderRight: PropTypes.string,
+      borderBottom: PropTypes.string,
+      borderLeft: PropTypes.string,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      display: PropTypes.string,
+      flex: PropTypes.string,
+      flexFlow: PropTypes.string,
+      float: PropTypes.string,
+      height: PropTypes.string,
+      justifyContent: PropTypes.string,
+      margin: PropTypes.string,
+      marginTop: PropTypes.string,
+      marginLeft: PropTypes.string,
+      marginRight: PropTypes.string,
+      marginBottom: PropTypes.string,
+      minHeight: PropTypes.string,
+      maxHeight: PropTypes.string,
+      minWidth: PropTypes.string,
+      maxWidth: PropTypes.string,
+      padding: PropTypes.string,
+      paddingTop: PropTypes.string,
+      paddingLeft: PropTypes.string,
+      paddingRight: PropTypes.string,
+      paddingBottom: PropTypes.string,
+      paddingHorizontal: PropTypes.string,
+      paddingVertical: PropTypes.string,
+      position: PropTypes.string,
+      style: PropTypes.object,
+      top: PropTypes.string,
+      left: PropTypes.string,
+      right: PropTypes.string,
+      bottom: PropTypes.string,
+      width: PropTypes.string,
+      scroll: PropTypes.string,
+      onClick: PropTypes.func,
+      onScroll: PropTypes.func
+   }
+
+   static defaultProps = {
+      display: 'flex',
+      position: 'relative',
+      flexFlow: 'row',
+      top: '0px',
+      left: '0px',
+      children: null,
+      style: {},
+      onScroll: () => {}
+   }
+   /* eslint-enable */
+
+   setScrollAttributes = (styleObj, breakpoint) => {
+      styleObj[breakpoint.key].overflow = 'auto'
+      styleObj[breakpoint.key]['-webkit-overflow-scrolling'] = 'touch'
+   }
+
+   setPaddingHorizontal = (styleObj, breakpoint, attributeValue) => {
+      styleObj[breakpoint.key].paddingLeft = attributeValue
+      styleObj[breakpoint.key].paddingRight = attributeValue
+   }
+
+   setPaddingVertical = (styleObj, breakpoint, attributeValue) => {
+      styleObj[breakpoint.key].paddingTop = attributeValue
+      styleObj[breakpoint.key].paddingBottom = attributeValue
+   }
+
+   render() {
+      const styleProps = [
+         'position', 'display', 'float',
+         'flex', 'flexFlow', 'alignItems', 'justifyContent',
+         'top', 'bottom', 'right', 'left',
+         'backgroundColor',
+         'borderTop', 'borderLeft', 'borderBottom', 'borderRight',
+         'height', 'minHeight', 'maxHeight', 'width', 'minWidth', 'maxWidth',
+         'padding', 'paddingBottom', 'paddingTop', 'paddingRight', 'paddingLeft',
+         'margin', 'marginBottom', 'marginTop', 'marginRight', 'marginLeft'
+      ]
+
+      const styleObj = {
+         [breakpoints[0].key]: {},
+         [breakpoints[1].key]: {},
+         [breakpoints[2].key]: {},
+         [breakpoints[3].key]: {},
+         [breakpoints[4].key]: {},
+         ...this.props.style
+      }
+
+      styleProps.forEach((prop) => {
+         setAttributeForBreakpoints(styleObj, prop, this.props[prop])
+      })
+
+      setAttributeForBreakpoints(styleObj, null, this.props.scroll, this.setScrollAttributes)
+      setAttributeForBreakpoints(
+         styleObj, null, this.props.paddingHorizontal, this.setPaddingHorizontal
+      )
+      setAttributeForBreakpoints(
+         styleObj, null, this.props.paddingVertical, this.setPaddingVertical
+      )
+
+      if (styleObj.width === 'auto') {
+         delete styleObj.width
+      }
+
+      return (
+         <div
+            ref={(node) => { this.node = node }}
+            onClick={this.props.onClick}
+            onScroll={this.props.onScroll}
+            className={cx(css(styleObj), this.props.className)}>
+            {this.props.children}
+         </div>
+      )
+   }
+}

src/components/View/index.js

@@ -5,6 +5,7 @@ import { getWindowSize, getAttributeForCurrentSize } from '../../utils/size'
 import styles from './styles.less'
 
 export default class View extends Component {
+   /* eslint-disable */
    static propTypes = {
       id: PropTypes.string,
       align: PropTypes.string,
@@ -33,6 +34,7 @@ export default class View extends Component {
       width: PropTypes.string,
       visible: PropTypes.string
    }
+   /* eslint-enable */
 
    static defaultProps = {
       format: 'float',
@@ -332,7 +334,7 @@ export default class View extends Component {
       return (
          <div
             id={this.props.id}
-            ref={node => (this.node = node)}
+            ref={(node) => { this.node = node }}
             style={style}
             onScroll={this.props.onScroll}
             className={classNames(viewClasses, this.props.className)}>

src/index.js

@@ -24,6 +24,7 @@ import Popover from './components/Popover'
 import Radio from './components/Form/Radio'
 import RadioGroup from './components/Form/RadioGroup'
 import Select from './components/Form/Select'
+import SmartView from './components/SmartView'
 import Spacer from './components/Spacer'
 import Switch from './components/Form/Switch'
 import Table from './components/Table'
@@ -71,5 +72,6 @@ export {
    TitleBar,
    ToolBar,
    Video,
-   View
+   View,
+   SmartView
 }

src/utils/size.js

@@ -1,3 +1,20 @@
+export const breakpoints = [{
+   name: 'a',
+   key: '@media (min-width: 0px) and (max-width: 660px)'
+}, {
+   name: 'b',
+   key: '@media (min-width: 660px) and (max-width: 1000px)'
+}, {
+   name: 'c',
+   key: '@media (min-width: 1000px) and (max-width: 1350px)'
+}, {
+   name: 'd',
+   key: '@media (min-width: 1350px) and (max-width: 1700px)'
+}, {
+   name: 'e',
+   key: '@media (min-width: 1700px)'
+}]
+
 export const getWindowSize = () => {
    const windowWidth = document.documentElement.clientWidth
 
@@ -16,6 +33,7 @@ export const getWindowSize = () => {
    return null
 }
 
+/* eslint-disable */
 export const getAttributeForCurrentSize = (currentSize, attributeValue) => {
    let fragments = attributeValue.match(/(.+?)\[([abcdef,-]+)\]/ig)
    if (fragments === null) {
@@ -38,3 +56,24 @@ export const getAttributeForCurrentSize = (currentSize, attributeValue) => {
 
    return null
 }
+/* eslint-enable */
+
+export const setAttributeForBreakpoints = (
+   styleObj, attributeName, attributeProp, attributeFunction
+) => {
+   if (!attributeProp) {
+      return null
+   }
+
+   breakpoints.forEach((breakpoint, index) => {
+      const attributeValue = getAttributeForCurrentSize(breakpoint.name, attributeProp)
+
+      if (attributeValue) {
+         if (attributeFunction) {
+            attributeFunction(styleObj, breakpoint, attributeValue)
+         } else {
+            styleObj[breakpoint.key][attributeName] = attributeValue
+         }
+      }
+   })
+}