refactored use of Modal

coreplugins/cesiumion/public/components/BootstrapField.jsx

@@ -1,12 +1,5 @@
 import { Formik, Field, getIn } from "formik";
-
+import { Checkbox } from "../../../../app/static/app/js/components/Toggle";
-import {
-	FormGroup,
-	ControlLabel,
-	FormControl,
-	Checkbox,
-	HelpBlock
-} from "react-bootstrap";
 
 const BootstrapFieldComponent = ({
 	field,
@@ -18,28 +11,26 @@ const BootstrapFieldComponent = ({
 	...props
 }) => {
 	const isError = getIn(errors, field.name) && getIn(touched, field.name);
-	const errorMsg = getIn(errors, field.name);
+    const errorMsg = getIn(errors, field.name);
-	let ControlComponent = FormControl;
+    let ControlComponent = 'input';
 
-	const testType = type.toLowerCase();
+    const testType = type.toLowerCase();
-	if (testType === "checkbox") ControlComponent = Checkbox;
+    if (testType === "checkbox") ControlComponent = Checkbox;
-	else if (testType === "textarea" || testType === "select")
+    else if (testType === "textarea" || testType === "select")
-		props.componentClass = testType;
+        ControlComponent = testType;
-	else props.type = type;
+    else props.type = type;
 
-	return (
+    return (
-		<FormGroup
+        <div
-			controlId={field.name}
+            id={field.name}
-			validationState={isError ? "error" : null}
+            style={{ marginLeft: 0, marginRight: 0 }}
-			style={{ marginLeft: 0, marginRight: 0 }}
+        >
-		>
+            {label && <label>{label}</label>}
-			{label && <ControlLabel>{label}</ControlLabel>}
+            <ControlComponent {...field} {...props} />
-			<ControlComponent {...field} {...props} />
+            {isError && <span>{errorMsg}</span>}
-			{isError && <HelpBlock>{errorMsg}</HelpBlock>}
+            {help && !isError && <span>{help}</span>}
-			{help && !isError && <HelpBlock>{help}</HelpBlock>}
+        </div>
-			{isError && showIcon && <FormControl.Feedback />}
+    );
-		</FormGroup>
-	);
 };
 
 const BootstrapField = props => (

coreplugins/cesiumion/public/components/IonAssetButton.jsx

@@ -22,12 +22,10 @@ export default class IonAssetButton extends PureComponent {
 		} = this.props;
 	
 		const menuItems = assets
-			.sort((a, b) =>
+			.sort((a, b) => AssetStyles[a].name.localeCompare(AssetStyles[b].name))
-				AssetStyles[a].name.localeCompare(AssetStyles[b].name)
-			)
 			.map(asset => (
-				<li key={asset}>
+				<li>
-					<a style={{cursor:'pointer'}} onClick={this.handleClick(asset)}>
+					<a key={asset} style={{cursor:'pointer'}} onClick={this.handleClick(asset)}>
 						<AssetComponent asset={asset} showIcon={true} />
 					</a>
 				</li>

coreplugins/cesiumion/public/components/UploadDialog.jsx

@@ -1,9 +1,8 @@
 import React, { Component, Fragment } from "react";
 
-import FormDialog from "webodm/components/FormDialog";
+import FormDialog from "../../../../app/static/app/js/components/FormDialog";
 import { Formik } from "formik";
 import * as Yup from "yup";
-import { Row, Col, Modal, Button } from "react-bootstrap";
 
 import BootstrapField from "./BootstrapField";
 import FormikErrorFocus from "./FormikErrorFocus";
@@ -159,67 +158,109 @@ export default class UploadDialog extends Component {
 			...initialValues
 		};
 
+		// return (
+		// 	<Modal className={"ion-upload"} onHide={onHide} {...options}>
+		// 		<Modal.Header closeButton>
+		// 			<Modal.Title>
+		// 				<i className={"fa fa-cesium"} /> {title}
+		// 			</Modal.Title>
+		// 		</Modal.Header>
+		// 		<Formik
+		// 			initialValues={mergedInitialValues}
+		// 			onSubmit={this.onSubmit}
+		// 			enableReinitialize
+		// 			validationSchema={this.getValidation()}
+		// 		>
+		// 			{({ handleSubmit = () => {} }) => (
+		// 				<form>
+		// 					<Modal.Body>
+		// 						<BootstrapField
+		// 							name={"name"}
+		// 							label={"Name: "}
+		// 							type={"text"}
+		// 						/>
+		// 						<BootstrapField
+		// 							name={"description"}
+		// 							label={"Description: "}
+		// 							type={"textarea"}
+		// 							rows={"3"}
+		// 						/>
+		// 						<BootstrapField
+		// 							name={"attribution"}
+		// 							label={"Attribution: "}
+		// 							type={"text"}
+		// 						/>
+		// 						{this.getSourceFields()}
+
+		// 						<FormikErrorFocus />
+		// 					</Modal.Body>
+
+		// 					<Modal.Footer>
+		// 						<Button onClick={onHide}>Close</Button>
+		// 						{isLoading && (
+		// 							<Button bsStyle="primary" disabled>
+		// 								<i
+		// 									className={"fa fa-sync fa-spin"}
+		// 								/>
+		// 								Submitting...
+		// 							</Button>
+		// 						)}
+		// 						{!isLoading && (
+		// 							<Button
+		// 								bsStyle="primary"
+		// 								onClick={handleSubmit}
+		// 							>
+		// 								<i className={"fa fa-upload"} />
+		// 								Submit
+		// 							</Button>
+		// 						)}
+		// 					</Modal.Footer>
+		// 				</form>
+		// 			)}
+		// 		</Formik>
+		// 	</Modal>
+		// );
 		return (
-			<Modal className={"ion-upload"} onHide={onHide} {...options}>
+            <FormDialog
-				<Modal.Header closeButton>
+                title={title}
-					<Modal.Title>
+                show={this.props.show}
-						<i className={"fa fa-cesium"} /> {title}
+                onHide={onHide}
-					</Modal.Title>
+                handleSaveFunction={this.onSubmit}
-				</Modal.Header>
+                saveLabel={isLoading ? "Submitting..." : "Submit"}
-				<Formik
+                savingLabel="Submitting..."
-					initialValues={mergedInitialValues}
+                saveIcon={isLoading ? "fa fa-sync fa-spin" : "fa fa-upload"}
-					onSubmit={this.onSubmit}
+            >
-					enableReinitialize
+                <Formik
-					validationSchema={this.getValidation()}
+                    initialValues={mergedInitialValues}
-				>
+                    onSubmit={this.onSubmit}
-					{({ handleSubmit = () => {} }) => (
+                    enableReinitialize
-						<form>
+                    validationSchema={this.getValidation()}
-							<Modal.Body>
+                >
-								<BootstrapField
+                    {({ handleSubmit = () => {} }) => (
-									name={"name"}
+                        <form>
-									label={"Name: "}
+                            <BootstrapField
-									type={"text"}
+                                name={"name"}
-								/>
+                                label={"Name: "}
-								<BootstrapField
+                                type={"text"}
-									name={"description"}
+                            />
-									label={"Description: "}
+                            <BootstrapField
-									type={"textarea"}
+                                name={"description"}
-									rows={"3"}
+                                label={"Description: "}
-								/>
+                                type={"textarea"}
-								<BootstrapField
+                                rows={"3"}
-									name={"attribution"}
+                            />
-									label={"Attribution: "}
+                            <BootstrapField
-									type={"text"}
+                                name={"attribution"}
-								/>
+                                label={"Attribution: "}
-								{this.getSourceFields()}
+                                type={"text"}
+                            />
+                            {this.getSourceFields()}
 
-								<FormikErrorFocus />
+                            <FormikErrorFocus />
-							</Modal.Body>
+                        </form>
-
+                    )}
-							<Modal.Footer>
+                </Formik>
-								<Button onClick={onHide}>Close</Button>
+            </FormDialog>
-								{isLoading && (
+        );
-									<Button bsStyle="primary" disabled>
-										<i
-											className={"fa fa-sync fa-spin"}
-										/>
-										Submitting...
-									</Button>
-								)}
-								{!isLoading && (
-									<Button
-										bsStyle="primary"
-										onClick={handleSubmit}
-									>
-										<i className={"fa fa-upload"} />
-										Submit
-									</Button>
-								)}
-							</Modal.Footer>
-						</form>
-					)}
-				</Formik>
-			</Modal>
-		);
 	}
 }