removing some use of react-bootstrap

Author: williamstein

src/packages/frontend/antd-bootstrap.tsx

@@ -91,7 +91,7 @@ function parse_bsStyle(props: {
   let type =
     props.bsStyle == null
       ? "default"
-      : BS_STYLE_TO_TYPE[props.bsStyle] ?? "default";
+      : (BS_STYLE_TO_TYPE[props.bsStyle] ?? "default");
 
   let style: React.CSSProperties | undefined = undefined;
   // antd has no analogue of "success" & "warning", it's not clear to me what
@@ -267,14 +267,7 @@ export function Well(props: {
   );
 }
 
-export function Checkbox(props: {
-  style?: React.CSSProperties;
-  children?: any;
-  autoFocus?: boolean;
-  checked?: boolean;
-  disabled?: boolean;
-  onChange?: any;
-}) {
+export function Checkbox(props) {
   const style: React.CSSProperties = props.style != null ? props.style : {};
   if (style.fontWeight == null) {
     // Antd checkbox uses the label DOM element, and bootstrap css
@@ -288,15 +281,7 @@ export function Checkbox(props: {
   // has that margin.
   return (
     <div style={{ margin: "10px 0" }}>
-      <AntdCheckbox
-        autoFocus={props.autoFocus}
-        checked={props.checked}
-        disabled={props.disabled}
-        style={style}
-        onChange={props.onChange}
-      >
-        {props.children}
-      </AntdCheckbox>
+      <AntdCheckbox {...{ ...props, style }}>{props.children}</AntdCheckbox>
     </div>
   );
 }

src/packages/frontend/project/explorer/action-box.tsx

@@ -27,7 +27,7 @@ import {
   FormGroup,
   Alert,
   Checkbox,
-} from "react-bootstrap";
+} from "@cocalc/frontend/antd-bootstrap";
 import * as account from "@cocalc/frontend/account";
 import SelectServer from "@cocalc/frontend/compute/select-server";
 import ConfigureShare from "@cocalc/frontend/share/config";
@@ -554,15 +554,13 @@ export const ActionBox = rclass<ReactProps>(
         return (
           <div>
             <Checkbox
-              ref="delete_extra_files_checkbox"
               onChange={(e) =>
                 this.setState({ delete_extra_files: (e.target as any).checked })
               }
             >
               Delete extra files in target directory
             </Checkbox>
             <Checkbox
-              ref="overwrite_newer_checkbox"
               onChange={(e) =>
                 this.setState({ overwrite_newer: (e.target as any).checked })
               }

src/packages/frontend/project/explorer/explorer.tsx

@@ -6,7 +6,7 @@
 import { Alert } from "antd";
 import * as immutable from "immutable";
 import React from "react";
-import { Button, ButtonGroup, Col, Row } from "react-bootstrap";
+import { Button, ButtonGroup, Col, Row } from "@cocalc/frontend/antd-bootstrap";
 import * as underscore from "underscore";
 import { UsersViewing } from "@cocalc/frontend/account/avatar/users-viewing";
 import {

src/packages/frontend/project/history/log-entry.tsx

@@ -4,8 +4,7 @@
  */
 import { Space, Tooltip } from "antd";
 import React from "react";
-import { Col, Grid, Row } from "react-bootstrap";
-
+import { Col, Grid, Row } from "@cocalc/frontend/antd-bootstrap";
 import { Avatar } from "@cocalc/frontend/account/avatar/avatar";
 import {
   CSS,
@@ -205,10 +204,10 @@ export const LogEntry: React.FC<Props> = React.memo(
     ): JSX.Element {
       const envs = software_envs?.get("environments");
       const prev: string = envs
-        ? envs.get(event.previous)?.get("title") ?? event.previous
+        ? (envs.get(event.previous)?.get("title") ?? event.previous)
         : intl.formatMessage(labels.loading);
       const next: string = envs
-        ? envs.get(event.next)?.get("title") ?? event.next
+        ? (envs.get(event.next)?.get("title") ?? event.next)
         : intl.formatMessage(labels.loading);
 
       return (
@@ -906,7 +905,7 @@ export const LogEntry: React.FC<Props> = React.memo(
       case "full":
         const style = props.cursor ? selected_item : backgroundStyle;
         return (
-          <Grid fluid={true} style={{ width: "100%" }}>
+          <Grid style={{ width: "100%" }}>
             <Row style={style}>
               <Col sm={1} style={{ textAlign: "center" }}>
                 <Icon name={icon()} style={style} />