Merge pull request edp963#34 from edp963/dev-0.3

merge from edp963/davinci dev-0.3

webapp/app/assets/less/variable.less

@@ -42,17 +42,17 @@
   }
 }
 
-.antFormItemLabelSmall {
+.antFormItemLabelCustom(@fontSize, @lineHeight, @marginBottom) {
   :global {
     .ant-form-item {
-      margin-bottom: 4px;
+      margin-bottom: @marginBottom;
     }
     .ant-form-item-label {
-      line-height: 1em;
+      line-height: @lineHeight;
 
       label {
         color: @disabled-text-color;
-        font-size: 12px;
+        font-size: @fontSize;
         font-weight: bold;
       }
     }

webapp/app/components/Container/Body.tsx

@@ -18,33 +18,25 @@
  * >>
  */
 
-import * as React from 'react'
-import * as classnames from 'classnames'
+import React, { FC, forwardRef } from 'react'
+import classnames from 'classnames'
+import styles from './Container.less'
 
-const styles = require('./Container.less')
-
-interface IContainerProps {
+interface IContainerBodyProps {
   grid?: boolean
-  card?: boolean
-  report?: boolean
   children: React.ReactNode
 }
 
-export class Body extends React.Component<IContainerProps, {}> {
-  public render () {
-    const { grid, card, children, report} = this.props
-    const bodyClass = classnames({
-      [styles.body]: true,
-      [styles.grid]: grid,
-      [styles.card]: card,
-      [styles.report]: report
-    })
-    return (
-      <div className={bodyClass}>
-        {children}
-      </div>
-    )
-  }
+const Body: FC<IContainerBodyProps> = ({ grid, children }, ref) => {
+  const bodyClass = classnames({
+    [styles.body]: true,
+    [styles.grid]: grid
+  })
+  return (
+    <div className={bodyClass} ref={ref}>
+      {children}
+    </div>
+  )
 }
 
-export default Body
+export default forwardRef(Body)

webapp/app/components/Container/Container.less

@@ -13,22 +13,13 @@
     flex: 1;
     padding: 5px 16px 66px;
     overflow-y: auto;
-    // padding-top: 5px;
 
     &:first-child {
       padding-top: 20px;
     }
 
-    &.card {
-      padding-top: 5px;
-    }
-
     &.grid {
       padding: 0;
     }
-
-    &.report {
-      display: flex;
-    }
   }
 }

webapp/app/components/Container/Title.tsx

@@ -18,25 +18,20 @@
  * >>
  */
 
-import * as React from 'react'
+import React, { FC, forwardRef } from 'react'
+import styles from './Container.less'
 
-const styles = require('./Container.less')
-
-interface IContainerProps {
+interface IContainerTitleProps {
   grid?: boolean
-  card?: boolean
-  children: React.ReactNode,
-  align?: any
+  children: React.ReactNode
 }
 
-export class Title extends React.Component<IContainerProps, {}> {
-  public render () {
-    return (
-      <div className={styles.title}>
-        {this.props.children}
-      </div>
-    )
-  }
+const Title: FC<IContainerTitleProps> = ({ grid, children }, ref) => {
+  return (
+    <div className={styles.title} ref={ref}>
+      {children}
+    </div>
+  )
 }
 
-export default Title
+export default forwardRef(Title)

webapp/app/components/Container/index.tsx

@@ -18,33 +18,18 @@
  * >>
  */
 
-import * as React from 'react'
-import * as classnames from 'classnames'
-
-const styles = require('./Container.less')
-
-import Title from './Title'
-import Body from './Body'
+import React, { FC } from 'react'
+import styles from './Container.less'
 
 interface IContainerProps {
-  grid?: boolean
-  card?: boolean
-  report?: boolean
   children: React.ReactNode
 }
 
-export class Container extends React.Component<IContainerProps, {}> {
-  public static Title = Title
-
-  public static Body = Body
-
-  public render () {
-    return (
-      <div className={styles.container}>
-        {this.props.children}
-      </div>
-    )
-  }
+const Container: FC<IContainerProps> = ({ children }) => {
+  return <div className={styles.container}>{children}</div>
 }
 
 export default Container
+
+export { default as ContainerTitle } from './Title'
+export { default as ContainerBody } from './Body'