Bläddra i källkod

优化dom的层级

方正 7 år sedan
förälder
incheckning
3b5d8881be

+ 3 - 0
src/HandleLayout/index.css

@@ -4,4 +4,7 @@
     color: white;
     border-radius: 5px;
     
+}
+.layout-Item{
+    width: 100%;
 }

+ 0 - 1
src/StaticWidget/index.css

@@ -7,7 +7,6 @@
     display: flex;
     align-items: center;
     height: 100%;
-    padding-left: 12px;
 }
 
 .layout-Cell:hover {

+ 4 - 2
src/StaticWidget/index.tsx

@@ -22,8 +22,10 @@ const fakeData = () => {
 const Cell = (props: any) => {
     const { item } = props;
     return (
-        <div className={`layout-Cell ${item.static ? "static" : ""}`} style={{ background: item.static ? "#e8e8e8" : "" }}>
-            <div style={{ paddingLeft: 12, color: '#595959' }}>{item.content}</div>
+        <div className={`layout-Cell ${item.static ? "static" : ""}`}
+            style={{ background: item.static ? "#e8e8e8" : "", width: "100%" }}
+        >
+            <div style={{ padding:10,color: '#595959' }}>{item.content}</div>
         </div>
     )
 }

+ 11 - 0
src/lib/dragact.tsx

@@ -179,6 +179,17 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
             const newlayout = syncLayout(this.state.mapLayout, bundles)
 
 
+            // this.state = {
+            //     ...this.state,
+            //     GridXMoving: GridX,
+            //     GridYMoving: GridY,
+            //     wMoving: w,
+            //     hMoving: h,
+            //     placeholderShow: true,
+            //     placeholderMoving: true,
+            //     mapLayout: newlayout,
+            //     dragType: 'drag'
+            // }
             this.setState({
                 GridXMoving: GridX,
                 GridYMoving: GridY,

+ 1 - 1
src/lib/dragger/index.tsx

@@ -429,7 +429,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
                 }}
                 {...dragMix}
             >
-                {React.Children.only(this.props.children)}
+                {this.props.children ? React.Children.only(this.props.children) : null}
                 {canResize !== false ?
                     <span
                         {...resizeMix}

+ 1 - 4
src/lib/gridItem.tsx

@@ -206,7 +206,6 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
         const { x, y } = this.calGridItemPosition(GridX, GridY)
         const { wPx, hPx } = this.calWHtoPx(w, h);
         return (
-
             <Dragger
                 style={{
                     ...style,
@@ -232,9 +231,7 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
                 canDrag={canDrag}
                 canResize={canResize}
             >
-                <div style={{ height: '100%', width: "100%" }}>
-                    {React.Children.map(this.props.children, (child) => child)}
-                </div>
+                {this.props.children}
             </Dragger>
         )
     }