gabrielbull / react-desktop

React UI Components for macOS High Sierra and Windows 10
http://reactdesktop.js.org
MIT License
9.52k stars 462 forks source link

Refactor common component attributes to be more consistent (I.E. marginTop, etc) #113

Open gabrielbull opened 6 years ago

gabrielbull commented 6 years ago

Blocked by: #112

We should have one common way to add the props attributes like marginTop, horizontalAlignment, etc to the styling.

For example:

import createCss from './createCssForAllComponents';
import styled, { css } from 'react-emotion'

const viewStyle = css`
  color: rebeccapurple;
`

class View extends React.Component {
  propTypes = {
    hidden: PropTypes.boolean,
    marginTop: PropTypes.number
  }

  render() {
    const { otherProp, ...props } = this.props;

    return <div otherProp={otherProp} className={createCss(css, props)} />
  }
}
function createMarginCss(css, props) {
  for (let prop of in props) {
    if (props.hasOwnProperty(prop)) {
      switch (prop) {
        case 'marginTop': css.extend(...); break; // add margin-top: `${props[prop]}px` here
      }
    }
  }
}

function createHiddenCss(css, props) {
  if (props.hidden) {
    return css.extend(...); // add display: 'none' here
  }
}

export default createCss (css, props) {
   css = createMarginCss(css, props);
   css = createHiddenCss(css, props);
  return css;
}
alacroix commented 6 years ago

@gabrielbull something like styled-system may fit our needs? Seems pretty cool to use with styled-components. (Never used it before though)

gabrielbull commented 6 years ago

Looks like something we might try indeed. Keeping the dependency count low is also very important so if it's something simple we might want to implement our own solution. If we do not use styled-system, we should inspire ourselves from styled-system so people coming to this library who have used it will find it familiar, and vice-versa.