WIP: switching TextField to Bootstrap 3

epigenesys · Jun 12, 2020 · 79ed595 · 79ed595
1 parent 388489b
commit 79ed595
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 16 deletions.
diff --git a/src/Editable.js b/src/Editable.js
@@ -1,11 +1,14 @@
 import React from "react"
 import PropTypes from "prop-types";
 import TextField from "./components/TextField";
-import TextArea from "./components/TextArea";
-import Select from "./components/Select";
-import Date from "./components/Date";
-import {Button, Form, PopoverHeader, PopoverBody, Popover, Spinner, FormText} from "react-boostrap";
-import File from "./components/File";
+// import TextArea from "./components/TextArea";
+// import Select from "./components/Select";
+// import Date from "./components/Date";
+// import Button from "react-bootstrap/Button";
+// import Form from "react-bootstrap/Form";
+// import File from "./components/File";
+
+import { Form, Button, HelpBlock } from 'react-bootstrap';
 
 const fontAwesomeStyle = {
     textAlign: "center",
@@ -43,15 +46,15 @@ export default class Editable extends React.Component{
     }
     getEditingComponent(){
         let confirmButton = (
-            <Button className="ml-auto mr-1" color="success" size="sm">
+            <Button className="ml-auto mr-1" bsStyle="primary" size="sm">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style={fontAwesomeStyle}>
                     <path color="white" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/>
                 </svg>
             </Button>
         );
         let cancelButton = (
-            <Button color="danger" size="sm" onClick={() => this.onCancel()}>
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" style={fontAwesomeStyle}>
+            <Button bsStyle="default" size="sm" onClick={() => this.onCancel()}>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" style={{ ...fontAwesomeStyle, fill: "black" }}>
                     <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/>
                 </svg>
             </Button>
@@ -99,7 +102,7 @@ export default class Editable extends React.Component{
                     <Form onSubmit={(e) => this.onFormSubmit(e)}>
                         <TextArea {...commonProps}/>
                         <div className="d-flex align-items-start">
-                            <FormText className="mt-0">{this.state.validationText}</FormText>
+                            <HelpBlock className="mt-0">{this.state.validationText}</HelpBlock>
                             {controls}
                         </div>
                     </Form>);
@@ -115,7 +118,7 @@ export default class Editable extends React.Component{
                 <div className="align-items-baseline d-flex">
                     {component}
                 </div>
-                <FormText className="mt-0">{this.state.validationText}</FormText>
+                <HelpBlock className="mt-0">{this.state.validationText}</HelpBlock>
             </Form>
         )
     }

diff --git a/src/components/Date.js b/src/components/Date.js
@@ -1,5 +1,5 @@
 import React from "react"
-import {Input} from "react-bootstrap";
+// import {Input} from "react-bootstrap";
 
 export default class Date extends React.Component {
     constructor(props) {

diff --git a/src/components/File.js b/src/components/File.js
@@ -1,5 +1,5 @@
 import React from "react"
-import {CustomInput} from "react-bootstrap";
+// import {CustomInput} from "react-bootstrap";
 
 export default class File extends React.Component {
     constructor(props) {

diff --git a/src/components/Select.js b/src/components/Select.js
@@ -1,5 +1,5 @@
 import React from "react"
-import {Input} from "react-bootstrap";
+// import {Input} from "react-bootstrap";
 
 export default class TextField extends React.Component {
     constructor(props){

diff --git a/src/components/TextArea.js b/src/components/TextArea.js
@@ -1,5 +1,5 @@
 import React from "react"
-import {Input} from "react-bootstrap";
+// import {Input} from "react-bootstrap";
 
 export default class TextArea extends React.Component {
     constructor(props){

diff --git a/src/components/TextField.js b/src/components/TextField.js
@@ -1,5 +1,5 @@
 import React from "react"
-import {Input} from "react-bootstrap";
+import { FormControl } from "react-bootstrap";
 
 export default class TextField extends React.Component {
     constructor(props){
@@ -8,7 +8,7 @@ export default class TextField extends React.Component {
     render(){
         return (
             <React.Fragment>
-                <Input invalid={!!this.props.validationText} autoFocus
+                <FormControl autoFocus
                        value={this.props.value? this.props.value : ""}
                        onChange={e => this.props.setNewValue(e.target.value)}
                        type="text" bsSize="sm" className="mr-1"/>