From ce403c196a94a198a50c39c67dec01c768ee30a4 Mon Sep 17 00:00:00 2001 From: Gregor Adams Date: Wed, 11 Sep 2019 14:25:30 +0200 Subject: [PATCH] chore: refactor button to use styled-components does not implement basic integration --- package.json | 4 +- src/Button/macOs/index.js | 84 ++++++----------------------- src/Button/macOs/styles/10.11.js | 91 +++++++++++++++----------------- 3 files changed, 64 insertions(+), 115 deletions(-) diff --git a/package.json b/package.json index c53ef18d..d0c04a6f 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,8 @@ "peerDependencies": { "prop-types": "^15.0 || ^16.0", "react": "^15.0 || ^16.0", - "react-dom": "^15.0 || ^16.0" + "react-dom": "^15.0 || ^16.0", + "styled-components": "^4.3.2" }, "devDependencies": { "babel-cli": "^6.26.0", @@ -63,6 +64,7 @@ "react-color": "^2.14.0", "react-dom": "^16.3.0", "react-hot-loader": "^4.0.1", + "styled-components": "^4.3.2", "webpack": "^4.4.1", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.1" diff --git a/src/Button/macOs/index.js b/src/Button/macOs/index.js index ec8b6ade..000d3b8b 100644 --- a/src/Button/macOs/index.js +++ b/src/Button/macOs/index.js @@ -1,76 +1,26 @@ -import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import WindowFocus from '../../windowFocus'; -import Hidden, { hiddenPropTypes } from '../../style/hidden'; -import FontSize, { fontSizePropTypes } from '../../style/fontSize'; -import Padding, { paddingPropTypes, removeDuplicatePaddingProps } from '../../style/padding'; -import Margin, { marginPropTypes } from '../../style/margin'; -import styles from './styles/10.11'; -import Radium from 'radium'; +import React from 'react'; +import styled from 'styled-components'; +import x_11 from './styles/10.11'; -@WindowFocus() -@Padding() -@Margin() -@Hidden() -@FontSize() -@Radium -class Button extends Component { - static propTypes = { - ...hiddenPropTypes, - ...fontSizePropTypes, - ...paddingPropTypes, - ...marginPropTypes, - type: PropTypes.string, - color: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - onClick: PropTypes.func, - onEnter: PropTypes.func, - disabled: PropTypes.bool - }; +const styles = { x_11 }; - componentDidMount() { - if (window && this.props.onEnter) { - window.addEventListener('keyup', this.handleKeyUp); - } - } +const StyledButton = styled.button` + ${({ version }) => styles[version]} +`; - componentWillUnmount() { - if (window && this.props.onEnter) { - window.removeEventListener('keyup', this.handleKeyUp); - } - } +const Button = (props) => { + // Add React.hooks here + return +}; - handleKeyUp = e => { - if (e.keyCode === 13) { - if (this.props.onEnter && !this.props.disabled) this.props.onEnter(e); - } - }; +Button.defaultProps = { + version: 'x_11' +}; - render() { - let { style, type, children, color, onClick, isWindowFocused, disabled, ...props } = this.props; - delete props.onEnter; - - let componentStyle = { ...styles.button }; - if (!disabled && color === 'blue' && isWindowFocused) { - componentStyle = { ...componentStyle, ...styles.blue }; - } else if (disabled) { - componentStyle = { ...componentStyle, opacity: '.5' }; - } - - componentStyle = { ...componentStyle, ...style }; - - return ( - - ); - } +Button.propTypes = { + color: PropTypes.string, + version: PropTypes.oneOf(Object.keys(styles)) } export default Button; diff --git a/src/Button/macOs/styles/10.11.js b/src/Button/macOs/styles/10.11.js index db65977c..8528ab61 100644 --- a/src/Button/macOs/styles/10.11.js +++ b/src/Button/macOs/styles/10.11.js @@ -1,51 +1,48 @@ -export default { - button: { - WebkitUserSelect: 'none', - userSelect: 'none', - cursor: 'default', - backgroundColor: '#ffffff', - outline: 'none', - borderWidth: '1px', - borderStyle: 'solid', - borderRadius: '5px', - borderTopColor: '#c8c8c8', - borderBottomColor: '#acacac', - borderLeftColor: '#c2c2c2', - borderRightColor: '#c2c2c2', - boxShadow: '0 1px rgba(0, 0, 0, .039)', - paddingTop: 0, - paddingBottom: 0, - paddingLeft: '13px', - paddingRight: '13px', - lineHeight: '19px', - fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif', - fontSize: '13px', +import { css } from 'styled-components'; - ':active': { - backgroundImage: '-webkit-linear-gradient(top, #4c98fe 0%, #0564e3 100%)', - borderTopColor: '#247fff', - borderBottomColor: '#003ddb', - borderLeftColor: '#125eed', - borderRightColor: '#125eed', - color: 'rgba(255, 255, 255, .9 )' - } - }, +export default css` + user-select: none; + cursor: default; + outline: none; + border: 1px solid; + border-radius: 5px; + box-shadow: 0 1px rgba(0, 0, 0, .039); + padding: 0 13px; + line-height: 19px; + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; + font-size: 13px; - blue: { - backgroundImage: '-webkit-linear-gradient(top, #6cb3fa 0%, #087eff 100%)', - borderTopColor: '#4ca2f9', - borderBottomColor: '#015cff', - borderLeftColor: '#267ffc', - borderRightColor: '#267ffc', - color: 'rgba(255, 255, 255, .9)', + ${props => props.color === 'blue' ? css` + background-image: linear-gradient(180deg, #6cb3fa 0%, #087eff 100%); + border-top-color: #4ca2f9; + border-bottom-color: #015cff; + border-left-color: #267ffc; + border-right-color: #267ffc; + color: rgba(255, 255, 255, .9); - ':active': { - backgroundImage: '-webkit-linear-gradient(top, #4c98fe 0%, #0564e3 100%)', - borderTopColor: '#247fff', - borderBottomColor: '#003ddb', - borderLeftColor: '#125eed', - borderRightColor: '#125eed', - color: 'rgba(255, 255, 255, .9 )' + &:active { + background-image: linear-gradient(180deg, #4c98fe 0%, #0564e3 100%); + border-top-color: #247fff; + border-bottom-color: #003ddb; + border-left-color: #125eed; + border-right-color: #125eed; + color: rgba(255, 255, 255, .9 ); } - } -}; + ` : css` + background-color: #ffffff; + border-top-color: #c8c8c8; + border-bottom-color: #acacac; + border-left-color: #c2c2c2; + border-right-color: #c2c2c2; + color: rgba(255, 255, 255, .9); + + &:active { + background-image: linear-gradient(180deg, #4c98fe 0%, #0564e3 100%); + border-top-color: #247fff; + border-bottom-color: #003ddb; + border-left-color: #125eed; + border-right-color: #125eed; + color: rgba(255, 255, 255, .9 ) ; + } + `} +`;