Merge branch 'refactor/upgrade_semchen' into refactor/dropdownButton_fmw

src/components/Panel/index.scss

@@ -4,19 +4,27 @@
   .panel-primary-bg {
     background-color: $primary-normal
   }
+
   .panel-success-bg {
     background-color: $success-normal
   }
+
   .panel-info-bg {
     background-color: $updating-normal
   }
+
   .panel-warning-bg {
     background-color: $warning-normal
   }
+
   .panel-danger-bg {
     background-color: $error-normal
   }
 
 }
 
-
+.accordion {
+  .card-header>span {
+    cursor: pointer;
+  }
+}

src/components/Panel/index.tsx

@@ -1,18 +1,40 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { Card } from 'react-bootstrap';
-import { PanelProps } from '../../interface';
+import { Card, Accordion } from 'react-bootstrap';
+import { useAccordionButton } from 'react-bootstrap/AccordionButton';
+import { PanelProps, HeaderToggleProps } from '../../interface';
+import { uuid } from '../../utils';
 import classNames from 'classnames';
 import './index.scss';
 
 const Panel: React.FC<PanelProps> = props => {
-  const { bg, children, text, className, header, ...restProps } = props;
+  const { bg, children, text, className, collapsible, header, expanded = true, ...restProps } = props;
   const bgClass = bg ? `panel-${bg}-bg` : '';
   const textClass = text ? `text-${text}` : 'text-dark';
-  return (
+  const eventKey = uuid();
+
+  const HeaderToggle: React.FC<HeaderToggleProps> = ({ children, eventKey }) => {
+    const decoratedOnClick = useAccordionButton(eventKey);
+
+    return <span onClick={decoratedOnClick}>{children}</span>;
+  };
+  return collapsible ? (
+    <Accordion defaultActiveKey={eventKey}>
+      <Card {...restProps} className={classNames(bgClass, textClass, className)}>
+        {header && (
+          <Card.Header>
+            <HeaderToggle eventKey={eventKey}>{header}</HeaderToggle>
+          </Card.Header>
+        )}
+        <Accordion.Collapse eventKey={expanded ? eventKey : ''}>
+          <Card.Body>{children}</Card.Body>
+        </Accordion.Collapse>
+      </Card>
+    </Accordion>
+  ) : (
     <Card {...restProps} className={classNames(bgClass, textClass, className)}>
       {header && <Card.Header>{header}</Card.Header>}
-      {children && <Card.Body>{children}</Card.Body>}
+      <Card.Body>{children}</Card.Body>
     </Card>
   );
 };

src/components/Steps/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { Container } from 'react-bootstrap';
 import Badge from '../Badge';
 import { getBemClass } from '../../utils';
 import { StepsProps } from '../../interface';
@@ -10,7 +9,7 @@ import './style.scss';
 const Steps: React.FC<StepsProps> = props => {
   const { steps, currentStep, showIcon, iconSize, iconStatus } = props;
   return (
-    <Container className="Steps">
+    <div className="Steps">
       {steps.map((step, index) => {
         const stepLabel = typeof step === 'string' ? step : step.label;
         const stepCount = typeof step === 'string' ? false : step.count;
@@ -30,7 +29,7 @@ const Steps: React.FC<StepsProps> = props => {
           </div>
         );
       })}
-    </Container>
+    </div>
   );
 };
 

src/components/Steps/style.scss

@@ -1,5 +1,14 @@
+@import '../../style/variables.scss';
+
 .Steps {
+  color: $text-1;
   text-align: center;
+  background-color: $bg-2;
+  line-height: 20px;
+  font-size: $font-size-14;
+  padding: 8px 16px;
+  margin-bottom: 20px;
+  border-radius: $radius-middle;
 }
 .Steps__Step {
   display: inline-block;

src/components/Tabs/index.tsx

@@ -16,7 +16,7 @@ const Tabs: React.FC<TabsProps> = props => {
     direction,
     limitNum = 5,
     unmountOnExit,
-    animation,
+    transition,
     mountOnEnter,
     ...restProps
   } = props;
@@ -53,7 +53,9 @@ const Tabs: React.FC<TabsProps> = props => {
       <Tab.Container
         id="tabs-with-dropdown"
         defaultActiveKey={TabsPan[eventKeyName]}
+        mountOnEnter={mountOnEnter}
         unmountOnExit={unmountOnExit}
+        transition={transition}
         {...(restProps as any)}
       >
         <div id="Tabs">
@@ -135,15 +137,15 @@ Tabs.propTypes = {
   /**
    * 切换内容是否使用动画过度效果
    **/
-  animation: PropTypes.bool,
+  transition: PropTypes.bool,
 };
 
 Tabs.defaultProps = {
   eventKeyName: 'key',
   id: 'Tabs',
   limitNum: 5,
   unmountOnExit: true,
-  animation: false,
+  transition: false,
   mountOnEnter: false,
 };
 

src/components/Tooltip/index.tsx

@@ -3,6 +3,7 @@ import * as PropTypes from 'prop-types';
 import cn from 'classnames';
 import { Overlay, Tooltip as BaseTooltip } from 'react-bootstrap';
 import { TooltipProps } from '../../interface';
+import { Placement } from 'react-bootstrap/esm/types';
 import Icon from '../Icon';
 import './style.scss';
 
@@ -22,12 +23,12 @@ const Tooltip: React.FC<TooltipProps> = props => {
   } = props;
 
   const wrapper = React.useRef<HTMLInputElement>(null);
-  const [placement, setPlacement] = React.useState('top');
+  const [placement, setPlacement] = React.useState<Placement>('top');
   // 类似 componentDidMount。只会在 render 后执行一次
   React.useEffect(() => {
     const elem = wrapper.current;
     if (!elem) return;
-    let placement = 'top';
+    let placement: Placement = 'top';
     const docElem = document.documentElement;
     const box = elem.getBoundingClientRect();
     const elemOffsetLeft = box.left + docElem.scrollLeft;
@@ -67,9 +68,9 @@ const Tooltip: React.FC<TooltipProps> = props => {
     <div ref={wrapper} className="Tooltip" onMouseEnter={handleShow} onMouseLeave={handleHide}>
       {placeholder}
       <Overlay
-        {...(extra as any)}
-        placement={(defaultPlacement || placement) as any}
-        target={wrapper.current || {}}
+        {...extra}
+        placement={defaultPlacement || placement}
+        target={wrapper.current || null}
         show={show}
       >
         <BaseTooltip
@@ -107,7 +108,7 @@ Tooltip.propTypes = {
    * 提示框的位置，可选'top'，'right'，'bottom'，'left'。
    * 若不传入这一属性，会根据 OverlayTrigger 的位置，自适应选取提示框的位置；
    **/
-  placement: PropTypes.string,
+  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
   /**
    * 提示框的颜色；
    **/
@@ -116,6 +117,10 @@ Tooltip.propTypes = {
    * 给图标传入的其他 class；
    **/
   iconClass: PropTypes.string,
+  /**
+   * 样式
+   */
+  style: PropTypes.object,
 };
 
 Tooltip.defaultProps = {

src/interface.tsx

@@ -68,8 +68,8 @@ export interface TooltipProps {
   onClick?: any;
   label?: React.ReactNode;
   contrast?: boolean;
-  style?: string;
-  placement?: string;
+  style?: React.CSSProperties;
+  placement?: Placement;
   children: React.ReactNode;
   className?: string;
 }
@@ -129,7 +129,7 @@ export interface TabsProps {
   id?: string;
   limitNum?: number;
   unmountOnExit?: boolean;
-  animation?: boolean;
+  transition?: boolean;
   mountOnEnter?: boolean;
 }
 
@@ -452,3 +452,7 @@ export interface ButtonProps extends BaseButtonProps {
   variant?: ButtonVariant;
   size?: 'sm' | 'lg' | 'xs';
 }
+
+export interface HeaderToggleProps{
+  eventKey: string
+}

stories/Button.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Button } from '../src';
+import { Placement } from 'react-bootstrap/esm/types';
 
 storiesOf('DATA SHOW | Button', module)
   .add('default', () => {
@@ -71,11 +72,11 @@ storiesOf('DATA SHOW | Button', module)
     );
   })
   .add('toolTipButton', () => {
-    const DisabledTooltip = {
+    const DisabledTooltip: { children: React.ReactNode; placement: Placement } = {
       children: <span>don't allowed to click</span>,
       placement: 'top',
     };
-    const NormalTooltip = {
+    const NormalTooltip: { children: React.ReactNode; placement: Placement } = {
       children: <span>allowed to click</span>,
       placement: 'top',
     };

stories/Checkbox.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Col, Form, Row } from 'react-bootstrap';
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Form | Checkbox', module).add('inline', () => (
+  <Form>
+    <Form.Group as={Row}>
+      <Form.Label column xs="auto">
+        业务场景:
+      </Form.Label>
+      <Col xs="auto" style={{ padding: '7px 0'}}>
+        <Form.Check inline type="checkbox" id="default" label="块存储" value="block" />
+        <Form.Check inline type="checkbox" id="priority" label="文件存储" value="file" />
+        <Form.Check inline type="checkbox" id="priority" label="对象存储" value="object" />
+      </Col>
+    </Form.Group>
+  </Form>
+));

stories/InputGroup.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { FormControl, InputGroup, Button, DropdownButton } from '../src';
 
-storiesOf('InputGroup', module)
+storiesOf('Form | InputGroup', module)
   .add('default', () => (
     <InputGroup>
       <FormControl type="text" disabled />

stories/Panel.stories.tsx

@@ -7,4 +7,8 @@ storiesOf('Panel', module)
     <Panel header="Head">
       Content
     </Panel>
+  )).add('collapse', () => (
+    <Panel header="Head" collapsible>
+      Content
+    </Panel>
   ))

stories/Radio.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Col, Form, Row } from 'react-bootstrap';
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Form | Radio', module)
+  .add('inline', () => (
+    <Form>
+      <Form.Group as={Row}>
+        <Form.Label column xs="auto">
+          性能优先级:
+        </Form.Label>
+        <Col xs="auto" style={{ padding: '7px 0' }}>
+          <Form.Check inline name="name1" type="radio" id="default" label="默认" value="default" />
+          <Form.Check
+            inline
+            name="name1"
+            type="radio"
+            id="priority"
+            label="优先"
+            value="priority"
+          />
+        </Col>
+      </Form.Group>
+    </Form>
+  ))
+  .add('with help text', () => (
+    <Form>
+      <Form.Group as={Row}>
+        <Form.Label column xs="auto">
+          迁移速度级别:
+        </Form.Label>
+        <Col xs="auto" style={{ padding: '7px 0' }}>
+          <Form.Check name="name1" type="radio" id="low" label="低速" value="low" />
+          <Form.Text style={{ marginLeft: '1.5em' }}>
+            以较低的速度迁移数据，迁移时间可能较长，但是基本不影响业务。
+          </Form.Text>
+          <Form.Check name="name1" type="radio" id="middle" label="中速" value="middle" />
+          <Form.Text style={{ marginLeft: '1.5em' }}>
+            以中等的速度迁移数据，迁移时间适中，在大部分场景不影响业务，除非业务压力很大。
+          </Form.Text>
+          <Form.Check name="name1" type="radio" id="hight" label="高速" value="hight" />
+          <Form.Text style={{ marginLeft: '1.5em' }}>
+            以较高的速度迁移数据，迁移时间较短，可能会影响业务的 IO 时延。
+          </Form.Text>
+        </Col>
+      </Form.Group>
+    </Form>
+  ));

stories/Steps.stories.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Steps } from '../src';
+
+storiesOf('Steps', module).add('default', () => {
+  const stepTexts = ['选择资源', '设置恢复任务', '确认信息'];
+  return <Steps steps={stepTexts} currentStep={2} />;
+});

stories/Tooltip.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Tooltip } from '../src';
+
+storiesOf('Tooltip', module).add('default', () => {
+  return (
+    <div>
+      <div>
+        <h5>1. 图标提示</h5>
+        <Tooltip placement="right" style={{ maxWidth: 800 }} children="测试" />
+      </div>
+      <div style={{ marginTop: '20px' }}>
+        <h5>2. 文字提示</h5>
+        <Tooltip placement="right" label={<span>测试</span>}>
+          测试2
+        </Tooltip>
+      </div>
+    </div>
+  );
+});