From d9f0d61297b4bc6a03f9f105ab2dc2e6f51d1187 Mon Sep 17 00:00:00 2001 From: SleepWalker Date: Mon, 30 May 2016 07:40:59 +0300 Subject: [PATCH] Constants for theme colors and skins --- src/components/ui/form/Button.jsx | 9 +++++++-- src/components/ui/form/Checkbox.jsx | 14 +++++++++++--- src/components/ui/form/Dropdown.jsx | 10 ++++++++-- src/components/ui/form/Input.jsx | 13 ++++++++++--- src/components/ui/form/TextArea.jsx | 13 ++++++++++--- src/components/ui/index.js | 22 ++++++++++++++++++++++ 6 files changed, 68 insertions(+), 13 deletions(-) create mode 100644 src/components/ui/index.js diff --git a/src/components/ui/form/Button.jsx b/src/components/ui/form/Button.jsx index 253431e..67e99f2 100644 --- a/src/components/ui/form/Button.jsx +++ b/src/components/ui/form/Button.jsx @@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'; import classNames from 'classnames'; import buttons from 'components/ui/buttons.scss'; +import { colors, COLOR_GREEN } from 'components/ui'; import FormComponent from './FormComponent'; @@ -17,11 +18,15 @@ export default class Button extends FormComponent { PropTypes.string ]).isRequired, block: PropTypes.bool, - color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet', 'orange']) + color: PropTypes.oneOf(colors) + }; + + static defaultProps = { + color: COLOR_GREEN }; render() { - const { color = 'green', block, small } = this.props; + const { color, block, small } = this.props; const props = { ...this.props diff --git a/src/components/ui/form/Checkbox.jsx b/src/components/ui/form/Checkbox.jsx index 7e70147..1d275a5 100644 --- a/src/components/ui/form/Checkbox.jsx +++ b/src/components/ui/form/Checkbox.jsx @@ -2,6 +2,8 @@ import React, { PropTypes } from 'react'; import classNames from 'classnames'; +import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui'; + import styles from './form.scss'; import FormInputComponent from './FormInputComponent'; @@ -9,8 +11,8 @@ export default class Checkbox extends FormInputComponent { static displayName = 'Checkbox'; static propTypes = { - color: PropTypes.oneOf(['green', 'blue', 'red']), - skin: PropTypes.oneOf(['dark', 'light']), + color: PropTypes.oneOf(colors), + skin: PropTypes.oneOf(skins), label: PropTypes.oneOfType([ PropTypes.shape({ id: PropTypes.string @@ -19,8 +21,14 @@ export default class Checkbox extends FormInputComponent { ]).isRequired }; + static defaultProps = { + color: COLOR_GREEN, + skin: SKIN_DARK + }; + render() { - let { label, color = 'green', skin = 'dark' } = this.props; + const { color, skin } = this.props; + let { label } = this.props; label = this.formatMessage(label); diff --git a/src/components/ui/form/Dropdown.jsx b/src/components/ui/form/Dropdown.jsx index 4cc77ee..5d34cc0 100644 --- a/src/components/ui/form/Dropdown.jsx +++ b/src/components/ui/form/Dropdown.jsx @@ -3,6 +3,8 @@ import ReactDOM from 'react-dom'; import classNames from 'classnames'; +import { colors, COLOR_GREEN } from 'components/ui'; + import styles from './dropdown.scss'; import FormComponent from './FormComponent'; @@ -18,7 +20,11 @@ export default class Dropdown extends FormComponent { ]).isRequired, items: PropTypes.arrayOf(PropTypes.string).isRequired, block: PropTypes.bool, - color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet', 'orange']) + color: PropTypes.oneOf(colors) + }; + + static defaultProps = { + color: COLOR_GREEN }; state = { @@ -35,7 +41,7 @@ export default class Dropdown extends FormComponent { } render() { - const { color = 'green', block, items } = this.props; + const { color, block, items } = this.props; const {isActive, activeItem} = this.state; const label = this.formatMessage(activeItem); diff --git a/src/components/ui/form/Input.jsx b/src/components/ui/form/Input.jsx index 28750cb..77ccd81 100644 --- a/src/components/ui/form/Input.jsx +++ b/src/components/ui/form/Input.jsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import { uniqueId } from 'functions'; import icons from 'components/ui/icons.scss'; +import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui'; import styles from './form.scss'; import FormInputComponent from './FormInputComponent'; @@ -26,12 +27,18 @@ export default class Input extends FormInputComponent { ]), error: PropTypes.string, icon: PropTypes.string, - skin: PropTypes.oneOf(['dark', 'light']), - color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet']) + skin: PropTypes.oneOf(skins), + color: PropTypes.oneOf(colors) + }; + + static defaultProps = { + color: COLOR_GREEN, + skin: SKIN_DARK }; render() { - let { icon, color = 'green', skin = 'dark', label } = this.props; + const { color, skin } = this.props; + let { icon, label } = this.props; const props = { type: 'text', diff --git a/src/components/ui/form/TextArea.jsx b/src/components/ui/form/TextArea.jsx index a724c67..3b03753 100644 --- a/src/components/ui/form/TextArea.jsx +++ b/src/components/ui/form/TextArea.jsx @@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'; import classNames from 'classnames'; import { uniqueId } from 'functions'; +import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui'; import styles from './form.scss'; import FormInputComponent from './FormInputComponent'; @@ -24,12 +25,18 @@ export default class TextArea extends FormInputComponent { PropTypes.string ]), error: PropTypes.string, - skin: PropTypes.oneOf(['dark', 'light']), - color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet']) + skin: PropTypes.oneOf(skins), + color: PropTypes.oneOf(colors) + }; + + static defaultProps = { + color: COLOR_GREEN, + skin: SKIN_DARK }; render() { - let { color = 'green', skin = 'dark', label } = this.props; + const { color, skin } = this.props; + let { label } = this.props; const props = { type: 'text', diff --git a/src/components/ui/index.js b/src/components/ui/index.js new file mode 100644 index 0000000..09a786d --- /dev/null +++ b/src/components/ui/index.js @@ -0,0 +1,22 @@ +export const SKIN_DARK = 'dark'; +export const SKIN_LIGHT = 'light'; + +export const COLOR_GREEN = 'green'; +export const COLOR_BLUE = 'blue'; +export const COLOR_DARK_BLUE = 'darkBlue'; +export const COLOR_VIOLET = 'violet'; +export const COLOR_LIGHT_VIOLET = 'lightViolet'; +export const COLOR_ORANGE = 'orange'; +export const COLOR_RED = 'red'; + +export const colors = [ + COLOR_GREEN, + COLOR_BLUE, + COLOR_DARK_BLUE, + COLOR_VIOLET, + COLOR_LIGHT_VIOLET, + COLOR_ORANGE, + COLOR_RED +]; + +export const skins = [SKIN_DARK, SKIN_LIGHT];