Smart Text (merge #133 first)

demo/Demo.js

@@ -4,7 +4,7 @@ import { NavList, Notification, OIO, Spacer, Text, Title, View } from '../src'
 import ButtonDemo from './content/Button'
 import ButtonGroupDemo from './content/ButtonGroup'
 import FormDemo from './content/Form'
-import TextDemo from './content/Text'
+import TextDemo from './content/SmartText'
 import ModalDemo from './content/Modal'
 import ViewDemo from './content/View'
 import Welcome from './content/Welcome'

demo/content/SmartText.js

@@ -0,0 +1,153 @@
+import React, { Component } from 'react'
+import {
+   Grid,
+   GridCell,
+   Spacer,
+   SmartText,
+   TitleBar,
+   SmartView as View
+} from '../../src'
+import style from '../style.less'
+
+export default class DemoContentText extends Component {
+   constructor(props) {
+      super(props)
+
+      this.state = {
+         value: 'Flexitarian biodiesel kale chips, hoodie lumbersexual food truck keffiyeh umami single-origin coffee franzen. Celiac viral put a bird on it, farm-to-table heirloom everyday carry before they sold out locavore listicle stumptown. Cold-pressed single-origin coffee seitan, next level biodiesel vinyl synth chia pop-up sartorial ugh post-ironic. Hella bitters cardigan affogato selfies thundercats gentrify, man braid schlitz normcore banjo umami messenger bag sartorial. Humblebrag freegan offal, mumblecore tote bag mustache venmo meditation lumbersexual. Put a bird on it intelligentsia lomo gluten-free bitters marfa. Meh literally try-hard ugh everyday carry.',
+         editing: false,
+         editorState: 'ready'
+      }
+   }
+
+   handleEditCancel = (value) => {
+      this.setState({ editing: false })
+   }
+
+   handleEditDone = (value) => {
+      this.setState({ editing: true, editorState: 'pending' })
+      setTimeout(() => {
+         this.setState({
+            value,
+            editing: false,
+            editorState: 'ready'
+         })
+      }, 2000)
+   }
+
+   render() {
+      return (
+         <View
+            display="block"
+            position="fixed"
+            height="100%"
+            width="100%"
+            className={style.docs}
+            padding="0px 30px"
+            scroll="on"
+            style={{
+               backgroundColor: '#fff'
+            }}>
+            <TitleBar title="Text" flush />
+            <Spacer size="9" />
+            <Grid columns="1[a] 2[b] 4[c-e]" gutter="60px">
+               {/* <GridCell>
+                  <Title>Text Sizes</Title>
+                  <Text size="2" color="gray50">
+                     <p>
+                        The size prop can be used for both the <code>Text</code>
+                        and <code>Title</code> component. The default size for the
+                        <code>Text</code> component is 3.
+                     </p>
+                     <p>
+                        As a general guideline, when using multiple text sizes,
+                        it is best to use sizes at least 2 units apart (ie. 4,6,8)
+                     </p>
+                  </Text>
+               </GridCell> */}
+               {/* <GridCell colspan="2">
+                  <Text size="12">Size 12 Text</Text>
+                  <Text size="11">Size 11 Text</Text>
+                  <Text size="10">Size 10 Text</Text>
+                  <Text size="9">Size 9 Text</Text>
+                  <Text size="8">Size 8 Text</Text>
+                  <Text size="7">Size 7 Text</Text>
+                  <Text size="6">Size 6 Text</Text>
+                  <Text size="5">Size 5 Text</Text>
+                  <Text size="4">Size 4 Text</Text>
+                  <Text size="3">Size 3 Text</Text>
+                  <Text size="2">Size 2 Text</Text>
+                  <Text size="1">Size 1 Text</Text>
+               </GridCell> */}
+               <GridCell colspan="2">
+                  <SmartText size="12">Size 12 Text</SmartText>
+                  <SmartText size="11">Size 11 Text</SmartText>
+                  <SmartText size="10">Size 10 Text</SmartText>
+                  <SmartText size="9">Size 9 Text</SmartText>
+                  <SmartText size="8">Size 8 Text</SmartText>
+                  <SmartText size="7">Size 7 Text</SmartText>
+                  <SmartText size="6">Size 6 Text</SmartText>
+                  <SmartText size="5">Size 5 Text</SmartText>
+                  <SmartText size="4">Size 4 Text</SmartText>
+                  <SmartText size="3">Size 3 Text</SmartText>
+                  <SmartText size="2">Size 2 Text</SmartText>
+                  <SmartText size="1">Size 1 Text</SmartText>
+               </GridCell>
+               {/* <GridCell>
+                  <Title>Paragraphs</Title>
+                  <Text size="2" color="gray50">
+                     <p>
+                        Wrap paragraphs of text in the <code>p</code> tag.
+                        Paragraphs by default have a margin-bottom of 1em
+                     </p>
+                  </Text>
+               </GridCell> */}
+               <GridCell colspan="3">
+                  <SmartText size="3">
+                     <p>
+                        Offal tilde blog venmo sartorial, crucifix leggings
+                        pork belly bitters. Banh mi iPhone cardigan tote bag.
+                        Man bun narwhal pickled shoreditch kogi bespoke.
+                        Vegan photo booth ethical, trust fund asymmetrical
+                        neutra DIY banjo craft beer chia humblebrag church-key
+                        hammock. Retro actually cold-pressed next level tofu vegan.
+                        Shabby chic kogi mumblecore williamsburg. Mlkshk kale
+                        chips venmo, synth pabst vegan lomo waistcoat whatever.
+                     </p>
+
+                     <p>
+                        Narwhal selvage mixtape humblebrag messenger bag.
+                        Meditation hella thundercats kitsch intelligentsia yr.
+                        Umami ennui pug mlkshk you probably havent heard of
+                        them, butcher gochujang four dollar toast kickstarter
+                        single-origin coffee pabst brooklyn meditation waistcoat
+                        kinfolk. Hashtag four dollar toast street art wolf
+                        lumbersexual, cornhole bespoke farm-to-table 3 wolf
+                        moon scenester slow-carb pop-up pitchfork.
+                        Taxidermy pabst offal affogato, biodiesel echo park narwhal.
+                        Master cleanse food truck artisan hammock, quinoa ugh
+                        keffiyeh truffaut chia. Messenger bag knausgaard
+                        lomo yuccie roof party.
+                     </p>
+
+                     <p>
+                        Flexitarian biodiesel kale chips, hoodie lumbersexual
+                        food truck keffiyeh umami single-origin coffee franzen.
+                        Celiac viral put a bird on it, farm-to-table
+                        heirloom everyday carry before they sold out locavore
+                        listicle stumptown. Cold-pressed single-origin coffee seitan,
+                        next level biodiesel vinyl synth chia pop-up sartorial ugh
+                        post-ironic. Hella bitters cardigan affogato selfies
+                        thundercats gentrify, man braid schlitz normcore banjo
+                        umami messenger bag sartorial. Humblebrag freegan offal,
+                        mumblecore tote bag mustache venmo meditation lumbersexual.
+                        Put a bird on it intelligentsia lomo gluten-free bitters marfa.
+                        Meh literally try-hard ugh everyday carry.
+                     </p>
+                  </SmartText>
+               </GridCell>
+            </Grid>
+         </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/Grid/index.js

@@ -1,111 +1,84 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import classNames from 'classnames'
-import { getWindowSize, getAttributeForCurrentSize } from '../../utils/size'
-import style from './style.less'
+import { css, cx } from 'emotion'
+import { breakpoints, setAttributeForBreakpoints } from '../../utils/size'
 
 export default class Grid extends Component {
+   /* eslint-disable */
    static propTypes = {
       children: PropTypes.node,
       className: PropTypes.string,
       columns: PropTypes.string,
       gutter: PropTypes.string,
+      height: PropTypes.string,
+      style: PropTypes.object,
       width: PropTypes.string
    }
 
    static defaultProps = {
       columns: '12',
-      gutter: '6px'
+      gutter: '6px',
+      style: {},
+      width: '100%'
    }
+   /* eslint-enable */
 
    static childContextTypes = {
       GridCellStyle: PropTypes.object
    }
 
-   constructor(props) {
-      super(props)
-
-      this.state = {
-         size: getWindowSize(),
-         width: 'auto',
-         innerWidth: '100%',
-         cellWidth: 'auto',
-         cellGutter: 'auto'
-      }
-   }
-
    getChildContext() {
       const GridCellStyle = {
-         width: this.state.cellWidth,
-         gutter: this.state.cellGutter
+         columns: this.props.columns,
+         gutter: this.props.gutter
       }
 
       return { GridCellStyle }
    }
 
-   componentDidMount() {
-      this.updateGrid()
-      window.addEventListener('resize', this.windowSizeUpdated, false)
-   }
-
-   componentDidUpdate() {
-      this.updateGrid()
-   }
-
-   componentWillUnmount() {
-      window.removeEventListener('resize', this.windowSizeUpdated)
-   }
-
-   windowSizeUpdated = () => {
-      const windowSize = getWindowSize()
-      this.setState({ size: windowSize })
-   }
-
-   updateGrid() {
-      const columns = getAttributeForCurrentSize(this.state.size, this.props.columns)
-      const gutter = getAttributeForCurrentSize(this.state.size, this.props.gutter)
-
-      const calculatedGridWidth = this.node.clientWidth
-      const adjustedGridWidth = parseFloat(calculatedGridWidth) + parseFloat(gutter)
-      const cellWidth = (adjustedGridWidth) / columns
-
-      if (this.state.innerWidth !== adjustedGridWidth) {
-         this.setState({
-            innerWidth: adjustedGridWidth
-         })
-      }
-
-      if (this.state.cellWidth !== cellWidth) {
-         this.setState({
-            cellWidth,
-            cellGutter: gutter
-         })
-      }
+   setGridInnerGutter = (styleObj, breakpoint, attributeValue) => {
+      styleObj[breakpoint.key].width = `calc(100% + ${parseFloat(attributeValue)}px)`
    }
 
    render() {
-      const classes = classNames(style.gridContainer, this.props.className)
-      const gutter = parseFloat(getAttributeForCurrentSize(this.state.size, this.props.gutter))
-
-      // TODO: Should use setState
-      if (this.props.width) {
-         const width = getAttributeForCurrentSize(this.state.size, this.props.width)
-         const unit = width.endsWith('px') ? 'px' : '%'
-         this.state.width = parseFloat(width) + unit
+      const styleProps = ['gutter', 'width', 'height']
+
+      const gridStyleObj = {
+         display: 'block',
+         overflow: 'hidden',
+         margin: 'auto',
+         [breakpoints[0].key]: {},
+         [breakpoints[1].key]: {},
+         [breakpoints[2].key]: {},
+         [breakpoints[3].key]: {},
+         [breakpoints[4].key]: {},
+         ...this.props.style
+         // , backgroundColor: 'rgba(0,255,0, 0.1)', // XRAY
       }
 
-      const gridStyle = {
-         width: this.state.width
+      styleProps.forEach((prop) => {
+         setAttributeForBreakpoints(gridStyleObj, prop, this.props[prop])
+      })
+
+      const gridInnerStyleObj = {
+         position: 'relative',
+         top: 0,
+         left: 0,
+         [breakpoints[0].key]: {},
+         [breakpoints[1].key]: {},
+         [breakpoints[2].key]: {},
+         [breakpoints[3].key]: {},
+         [breakpoints[4].key]: {}
       }
 
-      const gridInnerStyle = {
-         width: this.state.innerWidth,
-         marginLeft: `-${gutter}px`
-      }
+      setAttributeForBreakpoints(gridInnerStyleObj, 'height', this.props.height)
+      setAttributeForBreakpoints(
+         gridInnerStyleObj, null, this.props.gutter, this.setGridInnerGutter
+      )
 
       return (
-         <div ref={node => (this.node = node)} className={classes} style={gridStyle}>
-            <div className={style.gridInnerContainer} style={gridInnerStyle}>
+         <div className={cx(css(gridStyleObj), this.props.className)}>
+            <div className={css(gridInnerStyleObj)}>
                {this.props.children}
             </div>
          </div>