feat: upgrade to 2.7 version

Signed-off-by: csonchen <cson_chensheng@163.com>
xsky-fe · Apr 25, 2023 · 52ce906 · 52ce906
1 parent 9e348e9
commit 52ce906
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "rc-time-picker": "^3.7.1",
     "rc-tree": "2.1.0",
     "react-addons-css-transition-group": "^15.6.2",
-    "react-bootstrap": "^1.6.6",
+    "react-bootstrap": "^2.7.4",
     "react-dev-utils": "^11.0.4",
     "react-draggable": "^4.4.5",
     "react-ios-switch": "^0.1.19",

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -8,9 +8,9 @@ const defaultProps: DropdownDefaultProps = {
 };
 
 const Dropdown = (props: DropdownProps) => {
-  const { customToggle, pullRight, className, id, title, children } = props;
+  const { customToggle, className, id, title, children } = props;
   return (
-    <BootstrapDropdown id={id} className={className} pullRight={pullRight}>
+    <BootstrapDropdown id={id} className={className}>
       {customToggle && title}
       {!customToggle && title && <BootstrapDropdown.Toggle>{title}</BootstrapDropdown.Toggle>}
       <BootstrapDropdown.Menu>{children}</BootstrapDropdown.Menu>

diff --git a/src/components/DropdownButton/index.tsx b/src/components/DropdownButton/index.tsx
@@ -110,7 +110,7 @@ const DropdownButton = (props: DropdownButtonProps) => {
     if (onToggle) onToggle(isOpen);
   };
 
-  const { bsStyle, id, onSelect, bsSize, title, menu, children, componentClass, open } = props;
+  const { bsStyle, id, onSelect, title, menu, children, componentClass, open } = props;
 
   const prevMenu = usePrevious(menu);
   const isDifferentMenu = prevMenu !== menu;
@@ -126,13 +126,13 @@ const DropdownButton = (props: DropdownButtonProps) => {
   const containerClassName = getContainerClass();
   return (
     <BootstrapDropdownButton
-      {...boolProps}
-      bsStyle={bsStyle}
+      {...(boolProps as any)}
+      variant={bsStyle}
       id={id}
       onSelect={onSelect}
       title={title}
-      bsSize={bsSize}
-      onToggle={isOpen => getOnToggle(isOpen)}
+      // bsSize={bsSize}
+      onToggle={(isOpen: boolean) => getOnToggle(isOpen)}
       componentClass={componentClass}
       className={containerClassName}
       open={props.hasOwnProperty('open') ? open : buttonOpen}

diff --git a/src/components/InputDropdown/index.tsx b/src/components/InputDropdown/index.tsx
@@ -33,7 +33,7 @@ const InputDropdown = (props: InputDropdownProps) => {
   return (
     <DropdownButton
       id={uuid()}
-      {...rest}
+      {...(rest as any)}
       componentClass={Button}
       onSelect={handleSelect}
       title={getTitle()}

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -4,7 +4,7 @@ import {
   Modal as BaseModal,
   // ModalHeader,
   // ModalTitle,
-  ModalBody,
+  // ModalBody,
   ModalFooter,
   Button,
 } from 'react-bootstrap';
@@ -75,9 +75,22 @@ const Modal: React.FC<ModalProps> = props => {
     return draggable && preventDragByTitle ? { position: 'absolute' } : {};
   }, [draggable, preventDragByTitle]);
 
+  return (
+    <BaseModal show={show}>
+      <BaseModal.Header closeButton>
+        <BaseModal.Title>Modal heading</BaseModal.Title>
+      </BaseModal.Header>
+      <BaseModal.Body>Woohoo, you're reading this text in a modal!</BaseModal.Body>
+      <BaseModal.Footer>
+        <Button variant="secondary">Close</Button>
+        <Button variant="primary">Save Changes</Button>
+      </BaseModal.Footer>
+    </BaseModal>
+  );
+
   return (
     <BaseModal
-      bsSize={bsSize}
+      // bsSize={bsSize}
       className="Modal"
       dialogClassName={dialogClassName}
       style={style}
@@ -95,7 +108,7 @@ const Modal: React.FC<ModalProps> = props => {
           {draggable && <div className="drag-handle" />}
           <div>
             {!hideHeader && (
-              <BaseModal.Header translate="" key="header" closeButton>
+              <BaseModal.Header key="header" closeButton>
                 <BaseModal.Title style={modalTitleStyle}>{title}</BaseModal.Title>
                 {draggable && preventDragByTitle ? (
                   <BaseModal.Title style={draggableHiddenTitleStyle}>{title}</BaseModal.Title>
@@ -104,7 +117,9 @@ const Modal: React.FC<ModalProps> = props => {
             )}
           </div>
 
-          <ModalBody key="body">{children}</ModalBody>
+          <BaseModal.Body key="body">
+            <div>{children}</div>
+          </BaseModal.Body>
           {!hideFooter && (
             <ModalFooter key="footer">
               <Button type="submit" disabled={loading} variant={okStyle} onClick={onOk}>

diff --git a/src/components/RangePicker/index.tsx b/src/components/RangePicker/index.tsx
@@ -156,7 +156,7 @@ export default class RangePicker extends React.PureComponent<RangePickerProps, R
       <div className="RangePicker__duration">
         {ranges.map(({ title, value }) => {
           return (
-            <Button bsStyle="link" key={value} onClick={() => this.handleRangeClick(value)}>
+            <Button key={value} onClick={() => this.handleRangeClick(value)}>
               {this.lang === 'en' ? value : title}
             </Button>
           );

diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
@@ -53,15 +53,16 @@ const Tabs: React.FC<TabsProps> = props => {
       <Tab.Container
         id="tabs-with-dropdown"
         defaultActiveKey={TabsPan[eventKeyName]}
-        {...restProps}
+        unmountOnExit={unmountOnExit}
+        {...(restProps as any)}
       >
         <div>
           <Nav variant="tabs">
             {tabsFrontList.map((tab, idx) => (
               <NavItem
                 title={typeof tab['title'] === 'string' ? tab['title'] : undefined}
                 key={eventKeyName ? tab[eventKeyName] : idx}
-                eventKey={eventKeyName ? tab[eventKeyName] : idx}
+                // eventKey={eventKeyName ? tab[eventKeyName] : idx}
               >
                 {tab.title}
               </NavItem>
@@ -82,11 +83,7 @@ const Tabs: React.FC<TabsProps> = props => {
               </NavDropdown>
             )}
           </Nav>
-          <Tab.Content
-            unmountOnExit={unmountOnExit}
-            mountOnEnter={mountOnEnter}
-            animation={animation}
-          >
+          <Tab.Content>
             {tabs.map((tab, idx) => (
               <Tab.Pane
                 key={eventKeyName ? tab[eventKeyName] : idx}

diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
@@ -79,7 +79,7 @@ const Tooltip: React.FC<TooltipProps> = props => {
           onMouseEnter={handleShow}
           onMouseLeave={handleHide}
         >
-          {children}
+          <div>{children}</div>
         </BaseTooltip>
       </Overlay>
     </div>

diff --git a/src/components/VirtualSelectBox/index.tsx b/src/components/VirtualSelectBox/index.tsx
@@ -290,7 +290,7 @@ class VirtualSelectBox<T> extends React.Component<
     return (
       <FormControl
         className="SelectBox__search"
-        bsSize="sm"
+        // bsSize="sm"
         type="text"
         value={this.state.search}
         placeholder="请输入名称搜索"

diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import { Modal, Button, DatePicker } from '../src';
+import { Button } from '../src';
+import { Modal } from 'react-bootstrap';
 
 const ModalPicker = () => {
   const [show, setShow] = React.useState(false);
@@ -11,7 +12,29 @@ const ModalPicker = () => {
       <Button variant="primary" onClick={handleClick}>
         <span>打开对话框</span>
       </Button>
+
       <Modal
+        // animation={true}
+        show={show}
+        size="lg"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+      >
+        <Modal.Header closeButton>
+          <Modal.Title id="contained-modal-title-vcenter">Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <h4>Centered Modal</h4>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </p>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={handleHide}>Close</Button>
+        </Modal.Footer>
+      </Modal>
+      {/* <Modal
         title="弹出框时间选择器"
         show={show}
         onHide={handleHide}
@@ -20,7 +43,7 @@ const ModalPicker = () => {
         preventDragByTitle
       >
         <DatePicker defaultValue="2019-08-13 12:02:53" />
-      </Modal>
+      </Modal> */}
     </div>
   );
 };