body { margin: 0; } :global(.inputs) { display: flex; flex-flow: column wrap; max-height: 100vh; margin-top: 8px; & > div { margin: 0 16px; } } div:global(.dark) { background: #000; margin-left: 0; padding-left: 16px; }
import {render} from 'react-dom'; import React, {PureComponent} from 'react'; import Input, {Size, Theme} from '@jetbrains/ring-ui/components/input/input'; const container = document.getElementById('inputs'); class ClearableInput extends PureComponent { state = { text: this.props.defaultValue }; setText = e => { this.setState({ text: e.target.value }); }; clear = () => { this.setState({ text: "" }); }; render() { const {defaultValue, ...restProps} = this.props; // eslint-disable unused-vars return ( ); } } const inputs = (
) render(inputs, container);