flexlayout-react 0.8.0 → 0.8.2

package/src/view/Layout.tsx

@@ -85,7 +85,7 @@ export interface ILayoutProps {
  */
 export class Layout extends React.Component<ILayoutProps> {
     /** @internal */
-    private selfRef: React.RefObject<LayoutInternal>;
+    private selfRef: React.RefObject<LayoutInternal | null>;
     /** @internal */
     private revision: number; // so LayoutInternal knows this is a parent render (used for optimization)
 
@@ -190,10 +190,10 @@ interface ILayoutInternalState {
 export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayoutInternalState> {
     public static dragState: DragState | undefined = undefined;
 
-    private selfRef: React.RefObject<HTMLDivElement>;
-    private moveablesRef: React.RefObject<HTMLDivElement>;
-    private findBorderBarSizeRef: React.RefObject<HTMLDivElement>;
-    private mainRef: React.RefObject<HTMLDivElement>;
+    private selfRef: React.RefObject<HTMLDivElement | null>;
+    private moveablesRef: React.RefObject<HTMLDivElement | null>;
+    private findBorderBarSizeRef: React.RefObject<HTMLDivElement | null>;
+    private mainRef: React.RefObject<HTMLDivElement | null>;
     private previousModel?: Model;
     private orderedIds: string[];
     private moveableElementMap = new Map<string, HTMLElement>();
@@ -1033,7 +1033,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
 
 
     public setDragComponent(event: DragEvent, component: React.ReactNode, x: number, y: number) {
-        let dragElement: JSX.Element = (
+        let dragElement = (
             <div style={{ position: "unset" }}
                 className={this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT) + " " + this.getClassName(CLASSES.FLEXLAYOUT__DRAG_RECT)}>
                 {component}
@@ -1224,6 +1224,8 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     // *************************** End Drag Drop *************************************
 }
 
+export const FlexLayoutVersion = "0.8.1";
+
 export type DragRectRenderCallback = (
     content: React.ReactNode | undefined,
     node?: Node,

package/src/view/TabButton.tsx

@@ -31,8 +31,12 @@ export const TabButton = (props: ITabButtonProps) => {
     });
 
     const onDragStart = (event: React.DragEvent<HTMLElement>) => {
-        event.stopPropagation(); // prevent starting a tabset drag as well
-        layout.setDragNode(event.nativeEvent, node as TabNode);
+        if (node.isEnableDrag()) {
+            event.stopPropagation(); // prevent starting a tabset drag as well
+            layout.setDragNode(event.nativeEvent, node as TabNode);
+        } else {
+            event.preventDefault();
+        }
     };
 
     const onDragEnd = (event: React.DragEvent<HTMLElement>) => {

package/src/view/TabSet.tsx

@@ -73,8 +73,12 @@ export const TabSet = (props: ITabSetProps) => {
 
     const onDragStart = (event: React.DragEvent<HTMLElement>) => {
         if (!layout.getEditingTab()) {
-            event.stopPropagation();
-            layout.setDragNode(event.nativeEvent, node as TabSetNode);
+            if (node.isEnableDrag()) {
+                event.stopPropagation();
+                layout.setDragNode(event.nativeEvent, node as TabSetNode);
+            } else {
+                event.preventDefault();
+            }
         } else {
             event.preventDefault();
         }

package/style/dark.css

@@ -2,12 +2,12 @@
   --color-text: #eeeeee;
   --color-background: black;
   --color-base: black;
-  --color-1: #121212;
-  --color-2: #1a1a1a;
-  --color-3: #262626;
+  --color-1: rgb(17.85, 17.85, 17.85);
+  --color-2: rgb(25.5, 25.5, 25.5);
+  --color-3: rgb(38.25, 38.25, 38.25);
   --color-4: #333333;
-  --color-5: #404040;
-  --color-6: #4d4d4d;
+  --color-5: rgb(63.75, 63.75, 63.75);
+  --color-6: rgb(76.5, 76.5, 76.5);
   --color-drag1: rgb(207, 232, 255);
   --color-drag2: rgb(183, 209, 181);
   --color-drag1-background: rgba(128, 128, 128, 0.15);

package/style/gray.css

@@ -2,12 +2,12 @@
   --color-text: black;
   --color-background: white;
   --color-base: white;
-  --color-1: #f7f7f7;
-  --color-2: #e6e6e6;
-  --color-3: #d9d9d9;
+  --color-1: rgb(247.35, 247.35, 247.35);
+  --color-2: rgb(229.5, 229.5, 229.5);
+  --color-3: rgb(216.75, 216.75, 216.75);
   --color-4: #cccccc;
-  --color-5: #bfbfbf;
-  --color-6: #b3b3b3;
+  --color-5: rgb(191.25, 191.25, 191.25);
+  --color-6: rgb(178.5, 178.5, 178.5);
   --color-drag1: rgb(95, 134, 196);
   --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);

package/style/light.css

@@ -2,12 +2,12 @@
   --color-text: black;
   --color-background: white;
   --color-base: white;
-  --color-1: #f7f7f7;
-  --color-2: #f0f0f0;
-  --color-3: #e9e9e9;
-  --color-4: #e2e2e2;
-  --color-5: #dbdbdb;
-  --color-6: #d4d4d4;
+  --color-1: rgb(247.35, 247.35, 247.35);
+  --color-2: rgb(239.9295, 239.9295, 239.9295);
+  --color-3: rgb(232.731615, 232.731615, 232.731615);
+  --color-4: rgb(225.74966655, 225.74966655, 225.74966655);
+  --color-5: rgb(218.9771765535, 218.9771765535, 218.9771765535);
+  --color-6: rgb(212.4078612569, 212.4078612569, 212.4078612569);
   --color-drag1: rgb(95, 134, 196);
   --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);

package/style/rounded.css

@@ -2,12 +2,12 @@
   --color-text: black;
   --color-background: transparent;
   --color-base: #f2f6fb;
-  --color-1: #e7eef8;
-  --color-2: #dce7f4;
-  --color-3: #d1dff1;
-  --color-4: #c7d8ee;
-  --color-5: #bdd1eb;
-  --color-6: #b3cae8;
+  --color-1: rgb(230.69, 238.17, 247.52);
+  --color-2: rgb(219.7193, 230.5749, 244.1444);
+  --color-3: rgb(209.077721, 223.207653, 240.870068);
+  --color-4: rgb(198.75538937, 216.06142341, 237.69396596);
+  --color-5: rgb(188.7427276889, 209.1295807077, 234.6131469812);
+  --color-6: rgb(179.0304458582, 202.4056932865, 231.6247525718);
   --color-drag1: rgb(95, 134, 196);
   --color-drag2: rgb(95, 134, 196);
   --color-drag1-background: rgba(95, 134, 196, 0.1);

package/style/underline.css

@@ -2,12 +2,12 @@
   --color-text: black;
   --color-background: white;
   --color-base: white;
-  --color-1: #fafafa;
-  --color-2: whitesmoke;
-  --color-3: #eeeeee;
-  --color-4: #e6e6e6;
-  --color-5: #e0e0e0;
-  --color-6: #d9d9d9;
+  --color-1: rgb(249.9, 249.9, 249.9);
+  --color-2: rgb(244.902, 244.902, 244.902);
+  --color-3: rgb(237.55494, 237.55494, 237.55494);
+  --color-4: rgb(230.4282918, 230.4282918, 230.4282918);
+  --color-5: rgb(223.515443046, 223.515443046, 223.515443046);
+  --color-6: rgb(216.8099797546, 216.8099797546, 216.8099797546);
   --color-drag1: rgb(95, 134, 196);
   --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);