调整样式

sxfad · Aug 21, 2019 · 34034a4 · 34034a4
1 parent 0638abb
commit 34034a4
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 26 deletions.
diff --git a/TODO.md b/TODO.md
@@ -15,14 +15,14 @@
     - [x] 登录页面
     - [x] Logo
     - [x] 404 401 等错误页面
-- [ ] antd 组件整理
+- [x] antd 组件整理
 - [x] 相关文档整理
 - [x] 左侧菜单自动滚动到可视范围之内
 - [x] gitBook编写文档
 - [x] 抓取脚本，如果修改了经过webpack构建的文件，会导致首次启动自动打开浏览器是白屏
-- [ ] 去掉QueryItem组件，使用FormElement编写查询条件
+- [x] 去掉QueryItem组件，使用FormElement编写查询条件
 - [x] 优化FormElement组件，参考QueryItem添加布局功能
     - [x] ItemRow组件用于布局，flex方式 使用antd 的Row Col即可
     - [x] 添加propTypes，属性提示
 - [x] 重写可编辑表格组件
-- [ ] FormElement组件 ref问题，有场景需要获取元素的dom，进行获取焦点等操作
+- [x] FormElement组件 ref问题，有场景需要获取元素的dom，进行获取焦点等操作
diff --git a/src/library/components/query-bar/index.jsx b/src/library/components/query-bar/index.jsx
@@ -19,7 +19,9 @@ export default class QueryBar extends React.Component {
     };
 
     static getDerivedStateFromProps(nextProps) {
-        if ('collapsed' in nextProps) return {showCollapsed: true};
+        const showCollapsed = 'collapsed' in nextProps;
+
+        return {showCollapsed};
     }
 
     handleCollapsedChange = (e) => {

diff --git a/src/pages/drag-page/ComponentSettings.jsx b/src/pages/drag-page/ComponentSettings.jsx
@@ -5,7 +5,6 @@ import DropBox from "./DropBox";
 import ComponentSettingsForm from './ComponentSettingsForm';
 
 @config({
-    event: true,
     connect: state => {
         return {
             pageConfig: state.dragPage.pageConfig,
@@ -15,16 +14,7 @@ import ComponentSettingsForm from './ComponentSettingsForm';
     },
 })
 export default class ComponentSettings extends Component {
-    state = {
-        windowHeight: document.body.clientHeight,
-    };
-
-    componentDidMount() {
-        this.props.addEventListener(window, 'resize', () => {
-            const windowHeight = document.body.clientHeight;
-            this.setState({windowHeight});
-        })
-    }
+    state = {};
 
     handleToggleGuideLine = () => {
         const {showGuideLine} = this.props;
@@ -39,8 +29,6 @@ export default class ComponentSettings extends Component {
             currentNode,
         } = this.props;
 
-        const {windowHeight} = this.state;
-
         const allIds = ['0'];
         const loop = node => {
             const {__id, children} = node;
@@ -55,7 +43,7 @@ export default class ComponentSettings extends Component {
         if (!currentNode) currentNode = {};
 
         return (
-            <div style={{display: 'flex', flexDirection: 'column'}}>
+            <div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
                 <div style={{
                     display: 'flex',
                     flex: '0 0 50px',
@@ -87,7 +75,7 @@ export default class ComponentSettings extends Component {
                 </div>
                 <div
                     style={{
-                        height: windowHeight - 36 - 50 - 50,
+                        flex: 1,
                         overflow: 'auto',
                         padding: 10,
                     }}>

diff --git a/src/pages/drag-page/index.jsx b/src/pages/drag-page/index.jsx
@@ -6,29 +6,36 @@ import PageContent from '@/layouts/page-content';
 import ComponentContainer from './ComponentContainer';
 import PageContainer from './PageContainer';
 import ComponentSettings from './ComponentSettings';
+import {getElementTop} from '@/library/utils';
 import './index-style.less';
 
-@config({path: '/drag-page', event: true})
+@config({path: '/drag-page', event: true, noFrame: true})
 export default class index extends Component {
     state = {
         windowHeight: document.body.clientHeight,
     };
 
     componentDidMount() {
+        this.setHeight();
         this.props.addEventListener(window, 'resize', () => {
-            const windowHeight = document.body.clientHeight;
-            this.setState({windowHeight});
-        })
+            this.setHeight();
+        });
     }
 
+    setHeight = () => {
+        const windowHeight = document.body.clientHeight;
+        const top = getElementTop(this.container);
+
+        this.setState({height: windowHeight - 10 - top});
+    };
+
     render() {
-        const {windowHeight} = this.state;
-        const height = windowHeight - 20 - 50;
+        const {height} = this.state;
 
         return (
             <DndProvider backend={HTML5Backend}>
                 <PageContent styleName="root">
-                    <div styleName="component-container" style={{height,}}>
+                    <div ref={node => this.container = node} styleName="component-container" style={{height,}}>
                         <ComponentContainer/>
                     </div>
                     <div styleName="page-container" style={{height,}}>