diff options
Diffstat (limited to 'frontend/src/components/fields/extensions')
3 files changed, 141 insertions, 0 deletions
diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js new file mode 100644 index 0000000..edcb720 --- /dev/null +++ b/frontend/src/components/fields/extensions/ColorField.js @@ -0,0 +1,63 @@ +import React, {Component} from 'react'; +import {Button, ButtonGroup, Form, OverlayTrigger, Popover} from "react-bootstrap"; +import './ColorField.scss'; +import InputField from "../InputField"; + +class ColorField extends Component { + + constructor(props) { + super(props); + + this.state = { + invalid: false + }; + + this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1", + "#00897B", "#43A047", "#7CB342", "#9E9D24", "#F9A825", "#FB8C00", "#F4511E", "#6D4C41"]; + } + + render() { + const colorButtons = this.colors.map((color) => + <span key={"button" + color} className="color-input" + style={{"backgroundColor": color, "borderColor": this.state.color === color ? "#fff" : color}} + onClick={() => { + this.setState({color: color}); + if (typeof this.props.onChange === "function") { + this.props.onChange(color); + } + document.body.click(); // magic to close popup + }} />); + + const popover = ( + <Popover id="popover-basic"> + <Popover.Title as="h3">choose a color</Popover.Title> + <Popover.Content> + <div className="colors-container"> + <div className="colors-row"> + {colorButtons.slice(0, 8)} + </div> + <div className="colors-row"> + {colorButtons.slice(8, 18)} + </div> + </div> + </Popover.Content> + </Popover> + ); + + return ( + <div className="color-field"> + <InputField {...this.props} name="color" /> + + <div className="color-picker"> + <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose> + <Button variant="picker" size="sm">pick</Button> + </OverlayTrigger> + </div> + + </div> + ); + } + +} + +export default ColorField; diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss new file mode 100644 index 0000000..c8f617c --- /dev/null +++ b/frontend/src/components/fields/extensions/ColorField.scss @@ -0,0 +1,39 @@ +@import '../../../colors.scss'; + +.color-field { + display: flex; + align-items: flex-end; + + .input-field { + flex: 1; + + input { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; + } + } + + .color-picker { + margin-bottom: 5.5px; + + .btn-picker { + padding: 8.5px 15px; + border-bottom-right-radius: 5px; + border-top-right-radius: 5px; + background-color: $color-indigo; + } + } + + +} + +.colors-container { + width: 600px; + + .color-input { + display: inline-block; + width: 31px; + height: 31px; + cursor: pointer; + } +}
\ No newline at end of file diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js new file mode 100644 index 0000000..8823c42 --- /dev/null +++ b/frontend/src/components/fields/extensions/NumericField.js @@ -0,0 +1,39 @@ +import React, {Component} from 'react'; +import InputField from "../InputField"; + +class NumericField extends Component { + + constructor(props) { + super(props); + + this.state = { + invalid: false + }; + } + + render() { + const handler = (value) => { + value = value.replace(/[^\d]/gi, ''); + let intValue = 0; + if (value !== "") { + intValue = parseInt(value); + } + const valid = + (!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) && + (!this.props.min || (typeof this.props.min === "number" && intValue >= this.props.min)) && + (!this.props.max || (typeof this.props.max === "number" && intValue <= this.props.max)); + this.setState({invalid: !valid}); + if (this.props.onChange) { + this.props.onChange(intValue); + } + }; + + return ( + <InputField {...this.props} onChange={handler} initialValue={this.props.initialValue || 0} + invalid={this.state.invalid} /> + ); + } + +} + +export default NumericField; |