Merge pull request #783 from LordSputnik/master

Phase out transitional CustomInput component
metabrainz · Feb 24, 2022 · e401e86 · e401e86
2 parents e4f06ea + 58c6ec4
commit e401e86
Show file tree

Hide file tree

Showing 29 changed files with 512 additions and 463 deletions.
diff --git a/src/client/components/forms/deletion.js b/src/client/components/forms/deletion.js
@@ -17,8 +17,7 @@
  */
 
 import * as bootstrap from 'react-bootstrap';
-import {faExclamationTriangle, faTimesCircle, faTrashAlt} from '@fortawesome/free-solid-svg-icons';
-import CustomInput from '../../input';
+import {faExclamationTriangle, faQuestionCircle, faTimesCircle, faTrashAlt} from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import LoadingSpinner from '../loading-spinner';
 import PropTypes from 'prop-types';
@@ -28,7 +27,7 @@ import {kebabCase as _kebabCase} from 'lodash';
 import request from 'superagent';
 
 
-const {Alert, Button, Col, Row, Card} = bootstrap;
+const {Alert, Button, Col, Form, Row, OverlayTrigger, Tooltip, Card} = bootstrap;
 
 class EntityDeletionForm extends React.Component {
 	constructor(props) {
@@ -124,6 +123,12 @@ class EntityDeletionForm extends React.Component {
 			</ValidationLabel>
 		);
 
+		const deletionTooltip = (
+			<Tooltip>
+				Please explain why you are deleting this entity. This is required.
+			</Tooltip>
+		);
+
 		return (
 			<div id="deletion-form">
 				<h1>Delete Entity</h1>
@@ -174,16 +179,29 @@ class EntityDeletionForm extends React.Component {
 									&nbsp;to select it to be merged instead.
 									</p>
 									<hr/>
-									<CustomInput
-										help="* A note is required"
-										label={noteLabel}
-										rows="5"
-										tooltipText="Please explain why you are deleting this entity. This is required."
-										type="textarea"
-										value={note}
-										wrapperClassName="margin-top-1"
-										onChange={this.handleNoteChange}
-									/>
+									<Form.Group>
+										<Form.Label>
+											{noteLabel}
+											<OverlayTrigger
+												delay={50}
+												overlay={deletionTooltip}
+											>
+												<FontAwesomeIcon
+													className="margin-left-0-5"
+													icon={faQuestionCircle}
+												/>
+											</OverlayTrigger>
+										</Form.Label>
+										<div className="margin-top-1">
+											<Form.Control
+												as="textarea"
+												rows="5"
+												value={note}
+												onChange={this.handleNoteChange}
+											/>
+											<Form.Text muted>* A note is required</Form.Text>
+										</div>
+									</Form.Group>
 									{errorComponent}
 								</Card.Body>
 								<Card.Footer>

diff --git a/src/client/components/forms/profile.js b/src/client/components/forms/profile.js
@@ -20,7 +20,6 @@
 import * as bootstrap from 'react-bootstrap';
 import * as utilsHelper from '../../helpers/utils';
 import * as validators from '../../helpers/react-validators';
-import CustomInput from '../../input';
 import LoadingSpinner from '../loading-spinner';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -30,7 +29,7 @@ import SelectWrapper from '../input/select-wrapper';
 import ValidationLabel from '../../entity-editor/common/validation-label';
 
 
-const {Alert, Button, Col, Card, Row} = bootstrap;
+const {Alert, Button, Col, Card, Form, Row} = bootstrap;
 const {injectDefaultAliasName} = utilsHelper;
 
 class ProfileForm extends React.Component {
@@ -162,21 +161,25 @@ class ProfileForm extends React.Component {
 									Edit your public profile
 								</Card.Header>
 								<Card.Body>
-									<CustomInput
-										defaultValue={name}
-										help="required"
-										label={nameLabel}
-										name="name"
-										type="text"
-										onChange={this.handleValueChange}
-									/>
-									<CustomInput
-										defaultValue={bio}
-										label="Bio"
-										name="bio"
-										type="textarea"
-										onChange={this.handleValueChange}
-									/>
+									<Form.Group>
+										<Form.Label>{nameLabel}</Form.Label>
+										<Form.Control
+											defaultValue={name}
+											name="name"
+											type="text"
+											onChange={this.handleValueChange}
+										/>
+										<Form.Text muted>required</Form.Text>
+									</Form.Group>
+									<Form.Group>
+										<Form.Label>Bio</Form.Label>
+										<Form.Control
+											as="textarea"
+											defaultValue={bio}
+											name="bio"
+											onChange={this.handleValueChange}
+										/>
+									</Form.Group>
 									{titleOptions.length > 0 &&
 										<SelectWrapper
 											base={ReactSelect}

diff --git a/src/client/components/forms/registration-details.js b/src/client/components/forms/registration-details.js
@@ -20,7 +20,6 @@
 
 import * as bootstrap from 'react-bootstrap';
 import * as validators from '../../helpers/react-validators';
-import CustomInput from '../../input';
 import LoadingSpinner from '../loading-spinner';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -29,7 +28,7 @@ import SelectWrapper from '../input/select-wrapper';
 import request from 'superagent';
 
 
-const {Alert, Button, Col, Row} = bootstrap;
+const {Alert, Button, Col, Form, Row} = bootstrap;
 
 class RegistrationForm extends React.Component {
 	constructor(props) {
@@ -50,7 +49,7 @@ class RegistrationForm extends React.Component {
 
 		const gender = this.gender.getValue();
 		const data = {
-			displayName: this.displayName.getValue(),
+			displayName: this.displayName.value,
 			gender: gender ? parseInt(gender, 10) : null
 		};
 
@@ -74,7 +73,7 @@ class RegistrationForm extends React.Component {
 	}
 
 	isValid() {
-		return !this.displayName || this.displayName.getValue().length > 0;
+		return !this.displayName || this.displayName.value.length > 0;
 	}
 
 	handleChange() {
@@ -117,18 +116,21 @@ class RegistrationForm extends React.Component {
 								name is correct. This is the name that
 								other editors will get to know you by.
 							</p>
-							<CustomInput
-								className="form-control"
-								defaultValue={this.props.name}
-								groupClassName="row"
-								label="Display Name"
-								labelClassName="col-lg-4 col-form-label"
-								placeholder="Display Name"
-								ref={(ref) => this.displayName = ref}
-								type="text"
-								wrapperClassName="col-lg-4"
-								onChange={this.handleChange}
-							/>
+							<Form.Group className="row">
+								<Form.Label className="col-lg-4 col-form-label">
+									Display Name
+								</Form.Label>
+								<div className="col-lg-4">
+									<Form.Control
+										defaultValue={this.props.name}
+										placeholder="Display Name"
+										/* eslint-disable-next-line react/jsx-no-bind */
+										ref={(ref) => this.displayName = ref}
+										type="text"
+										onChange={this.handleChange}
+									/>
+								</div>
+							</Form.Group>
 							<p>
 								And, optionally, set a gender
 								that will be displayed on your profile

diff --git a/src/client/components/forms/userCollection.js b/src/client/components/forms/userCollection.js
@@ -20,7 +20,6 @@
 import * as bootstrap from 'react-bootstrap';
 import {faPlus, faSave, faTimes, faTrashAlt} from '@fortawesome/free-solid-svg-icons';
 import {trim, uniqBy} from 'lodash';
-import CustomInput from '../../input';
 import DeleteOrRemoveCollaborationModal from '../pages/parts/delete-or-remove-collaboration-modal';
 import EntitySearchFieldOption from '../../entity-editor/common/entity-search-field-option';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
@@ -32,7 +31,7 @@ import classNames from 'classnames';
 import request from 'superagent';
 
 
-const {Alert, Button, Col, Row} = bootstrap;
+const {Alert, Button, Col, Form, Row} = bootstrap;
 
 class UserCollectionForm extends React.Component {
 	constructor(props) {
@@ -68,8 +67,8 @@ class UserCollectionForm extends React.Component {
 		}
 
 		const collaborators = this.getCleanedCollaborators();
-		const description = this.description.getValue();
-		const name = trim(this.name.getValue());
+		const description = this.description.value;
+		const name = trim(this.name.value);
 		const privacy = this.privacy.getValue();
 		const entityType = this.entityType.getValue();
 
@@ -100,7 +99,7 @@ class UserCollectionForm extends React.Component {
 	}
 
 	isValid() {
-		return trim(this.name.getValue()).length && this.entityType.getValue();
+		return trim(this.name.value).length && this.entityType.getValue();
 	}
 
 	getCleanedCollaborators() {
@@ -194,18 +193,22 @@ class UserCollectionForm extends React.Component {
 							className="padding-sides-0"
 							onSubmit={this.handleSubmit}
 						>
-							<CustomInput
-								defaultValue={initialName}
-								label="Name"
-								ref={(ref) => this.name = ref}
-								type="text"
-							/>
-							<CustomInput
-								defaultValue={initialDescription}
-								label="Description"
-								ref={(ref) => this.description = ref}
-								type="textarea"
-							/>
+							<Form.Group>
+								<Form.Label>Name</Form.Label>
+								<Form.Control
+									defaultValue={initialName}
+									ref={(ref) => this.name = ref}
+									type="text"
+								/>
+							</Form.Group>
+							<Form.Group>
+								<Form.Label>Description</Form.Label>
+								<Form.Control
+									as="textarea"
+									defaultValue={initialDescription}
+									ref={(ref) => this.description = ref}
+								/>
+							</Form.Group>
 							<SelectWrapper
 								base={ReactSelect}
 								defaultValue={initialType}

diff --git a/src/client/components/input/drag-and-drop.js b/src/client/components/input/drag-and-drop.js
@@ -17,12 +17,11 @@
  */
 
 import * as bootstrap from 'react-bootstrap';
-import CustomInput from '../../input';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 
-const {Card} = bootstrap;
+const {Card, Form} = bootstrap;
 
 class DragAndDrop extends React.Component {
 	constructor() {
@@ -69,10 +68,6 @@ class DragAndDrop extends React.Component {
 		this.addChild(data);
 	}
 
-	getValue() {
-		return this.target.getValue();
-	}
-
 	render() {
 		return (
 			<Card
@@ -88,11 +83,13 @@ class DragAndDrop extends React.Component {
 					variant="top"
 				/>
 				<Card.Body className="text-center">
-					<CustomInput
-						name={this.props.name}
-						type="hidden"
-						value={this.state.achievement.id}
-					/>
+					<Form.Group>
+						<Form.Control
+							name={this.props.name}
+							type="hidden"
+							value={this.state.achievement.id}
+						/>
+					</Form.Group>
 					<div className="h3">
 						{this.state.achievement.name}
 					</div>

diff --git a/src/client/components/pages/parts/add-to-collection-modal.js b/src/client/components/pages/parts/add-to-collection-modal.js
@@ -1,6 +1,5 @@
 import * as bootstrap from 'react-bootstrap';
 import {faPlus, faTimes} from '@fortawesome/free-solid-svg-icons';
-import CustomInput from '../../../input';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -10,7 +9,7 @@ import _ from 'lodash';
 import request from 'superagent';
 
 
-const {Alert, Col, Button, Modal} = bootstrap;
+const {Alert, Col, Button, Form, Modal} = bootstrap;
 
 class AddToCollectionModal extends React.Component {
 	constructor(props) {
@@ -140,8 +139,8 @@ class AddToCollectionModal extends React.Component {
 			return;
 		}
 
-		const description = this.description.getValue();
-		const name = this.name.getValue();
+		const description = this.description.value;
+		const name = this.name.value;
 		const privacy = this.privacy.getValue();
 		const {entityType} = this.props;
 
@@ -175,7 +174,7 @@ class AddToCollectionModal extends React.Component {
 	}
 
 	isValid() {
-		return _.trim(this.name.getValue()).length && this.privacy.getValue();
+		return _.trim(this.name.value).length && this.privacy.getValue();
 	}
 
 	/* eslint-disable react/jsx-no-bind */
@@ -236,16 +235,20 @@ class AddToCollectionModal extends React.Component {
 					<form
 						className="padding-sides-0 addToCollectionModal-body"
 					>
-						<CustomInput
-							label="Name"
-							ref={(ref) => this.name = ref}
-							type="text"
-						/>
-						<CustomInput
-							label="Description"
-							ref={(ref) => this.description = ref}
-							type="textarea"
-						/>
+						<Form.Group>
+							<Form.Label>Name</Form.Label>
+							<Form.Control
+								ref={(ref) => this.name = ref}
+								type="text"
+							/>
+						</Form.Group>
+						<Form.Group>
+							<Form.Label>Description</Form.Label>
+							<Form.Control
+								as="textarea"
+								ref={(ref) => this.description = ref}
+							/>
+						</Form.Group>
 						<SelectWrapper
 							base={ReactSelect}
 							idAttribute="name"