diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx index 65d7193b..5f5edac0 100644 --- a/src/components/fields/DocLabel.jsx +++ b/src/components/fields/DocLabel.jsx @@ -10,13 +10,36 @@ export default class DocLabel extends React.Component { doc: PropTypes.string.isRequired, } + constructor (props) { + super(props); + this.state = { + open: false, + } + } + + onToggleDoc = (open) => { + this.setState({ + open, + }, () => { + if (this.props.onToggleDoc) { + this.props.onToggleDoc(this.state.open); + } + }); + } + render() { return } diff --git a/src/components/inputs/InputBlock.jsx b/src/components/inputs/InputBlock.jsx index 117ba3ee..0645acfa 100644 --- a/src/components/inputs/InputBlock.jsx +++ b/src/components/inputs/InputBlock.jsx @@ -18,11 +18,24 @@ class InputBlock extends React.Component { onChange: PropTypes.func, } + constructor (props) { + super(props); + this.state = { + showDoc: false, + } + } + onChange(e) { const value = e.target.value return this.props.onChange(value === "" ? undefined : value) } + onToggleDoc = (val) => { + this.setState({ + showDoc: val + }); + } + render() { return
} @@ -52,6 +66,14 @@ class InputBlock extends React.Component {
{this.props.children}
+ {this.props.doc && +
+ {this.props.doc} +
+ } } } diff --git a/src/styles/_components.scss b/src/styles/_components.scss index c8b0749c..2fc3a231 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -28,6 +28,13 @@ height: 100%; } +.maputnik-input-block:hover { + .maputnik-doc-button { + opacity: 1; + pointer-events: all; + } +} + // DOC LABEL .maputnik-doc { &-target { @@ -57,6 +64,30 @@ z-index: 10; pointer-events: none; } + + &-button { + opacity: 0; + pointer-events: none; + background: #000; + color: white; + border: solid 1px #555; + border-radius: 100px; + + &--open { + background: white; + color: black; + opacity: 1; + pointer-events: all; + } + } +} + +.maputnik-doc-inline { + color: $color-lowgray; + background-color: $color-gray; + padding: $margin-2; + font-size: 12px; + margin-top: $margin-2; } .maputnik-doc-target:hover .maputnik-doc-popup {