flexlayout-react 0.6.6 → 0.6.9

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,104 @@
+name: '🐛 Bug report'
+description: Create a report to help us improve
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for reporting an issue :pray:.
+
+        This issue tracker is for reporting bugs found in `FlexLayout` (https://github.com/caplin/FlexLayout).
+        If you have a question about how to achieve something and are struggling, please post a question
+        inside of `FlexLayout` Discussions tab: https://github.com/caplin/FlexLayout/discussions
+
+        Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already:
+         - `FlexLayout` Issues tab: https://github.com/caplin/FlexLayout/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
+         - `FlexLayout` closed issues tab: https://github.com/caplin/FlexLayout/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed
+         - `FlexLayout` Discussions tab: https://github.com/caplin/FlexLayout/discussions
+
+        The more information you fill in, the better the community can help you.
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: Provide a clear and concise description of the challenge you are running into.
+    validations:
+      required: true
+  - type: input
+    id: link
+    attributes:
+      label: Your Example Website or App
+      description: |
+        Which website or app were you using when the bug happened?
+        Note:
+        - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the `FlexLayout` npm package.
+        - To create a shareable code example you can use Stackblitz (https://stackblitz.com/). Please no localhost URLs.
+        - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.
+      placeholder: |
+        e.g. https://stackblitz.com/edit/...... OR Github Repo
+    validations:
+      required: false
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to Reproduce the Bug or Issue
+      description: Describe the steps we have to take to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior
+      description: Provide a clear and concise description of what you expected to happen.
+      placeholder: |
+        As a user, I expected ___ behavior, but I am seeing ___
+    validations:
+      required: true
+  - type: input
+    id: os
+    attributes:
+      label: Operating System
+      description: What opearting system are you using?
+      placeholder: |
+        - OS: [e.g. macOS, Windows, Linux]
+    validations:
+      required: true
+  - type: input
+    id: browsers
+    attributes:
+      label: Browser Type?
+      description: What browsers are you seeing the problem on?
+      placeholder: |
+        - OS: [e.g. Google Chrome, Safari, Firefox, Opera etc]
+    validations:
+      required: true
+  - type: input
+    id: browser_version
+    attributes:
+      label: Browser Version
+      description: What browser version are you using?
+      placeholder: |
+        - Version: [e.g. 91.1]
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots_or_videos
+    attributes:
+      label: Screenshots or Videos
+      description: |
+        If applicable, add screenshots or a video to help explain your problem.
+        For more information on the supported file image/file types and the file size limits, please refer
+        to the following link: https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files
+      placeholder: |
+        You can drag your video or image files inside of this editor ↓
+    validations:
+      required: true
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: 🤔 Feature Requests & Questions
+    url: https://github.com/caplin/FlexLayout/discussions
+    about: Please ask and answer questions here.

package/ChangeLog.txt

@@ -1,3 +1,12 @@
+0.6.9
+fix for #308, Allow dragging within a maximized tabset
+
+0.6.8
+Added onTabSetPlaceHolder prop to render the tabset area when there are no tabs.
+
+0.6.7
+More css variables, added Underline theme, updated dependencies
+
 0.6.6 
 fix for #296
 

package/README.md

@@ -101,6 +101,7 @@ The `<Layout>` component renders the tabsets and splitters, it takes the followi
 | onContextMenu    | callback for handling context actions on tabs and tabsets |
 | onAuxMouseClick  | callback for handling mouse clicks on tabs and tabsets with alt, meta, shift keys, also handles center mouse clicks |
 | onShowOverflowMenu | callback for handling the display of the tab overflow menu |
+| onTabSetPlaceHolder | callback for rendering a placeholder when a tabset is empty |
 | iconFactory      | a factory function for creating icon components for tab bar buttons. <br/><br/> NOTE: for greater customization of the tab use onRenderTab instead of this callback |
 | titleFactory     | a factory function for creating title components for tab bar buttons. <br /><br /> NOTE: for greater customization of the tab use onRenderTab instead of this callback  |
 
@@ -610,5 +611,14 @@ yarn cypress
 
 To build the npm distribution run 'yarn build', this will create the artifacts in the dist dir.
 
+## Alternative Layout Managers
+
+| Name | Repository |
+| ------------- |:-------------|
+| rc-dock | https://github.com/ticlo/rc-dock | 
+| lumino | https://github.com/jupyterlab/lumino | 
+| golden-layout | https://github.com/golden-layout/golden-layout |
+| react-mosaic | https://github.com/nomcopter/react-mosaic |
+
 
 

package/declarations/Types.d.ts

@@ -14,6 +14,7 @@ export declare enum CLASSES {
     FLEXLAYOUT__BORDER_INNER_ = "flexlayout__border_inner_",
     FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER = "flexlayout__border_inner_tab_container",
     FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ = "flexlayout__border_inner_tab_container_",
+    FLEXLAYOUT__BORDER_TAB_DIVIDER = "flexlayout__border_tab_divider",
     FLEXLAYOUT__BORDER_SIZER = "flexlayout__border_sizer",
     FLEXLAYOUT__BORDER_TOOLBAR = "flexlayout__border_toolbar",
     FLEXLAYOUT__BORDER_TOOLBAR_ = "flexlayout__border_toolbar_",
@@ -41,6 +42,8 @@ export declare enum CLASSES {
     FLEXLAYOUT__TABSET_MAXIMIZED = "flexlayout__tabset-maximized",
     FLEXLAYOUT__TABSET_SELECTED = "flexlayout__tabset-selected",
     FLEXLAYOUT__TABSET_SIZER = "flexlayout__tabset_sizer",
+    FLEXLAYOUT__TABSET_TAB_DIVIDER = "flexlayout__tabset_tab_divider",
+    FLEXLAYOUT__TABSET_CONTENT = "flexlayout__tabset_content",
     FLEXLAYOUT__TABSET_TABBAR_INNER = "flexlayout__tabset_tabbar_inner",
     FLEXLAYOUT__TABSET_TABBAR_INNER_ = "flexlayout__tabset_tabbar_inner_",
     FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER = "flexlayout__tabset_tabbar_inner_tab_container",

package/declarations/view/Layout.d.ts

@@ -20,6 +20,7 @@ export declare type ShowOverflowMenuCallback = (node: TabSetNode | BorderNode, m
     index: number;
     node: TabNode;
 }) => void) => void;
+export declare type TabSetPlaceHolderCallback = (node: TabSetNode) => React.ReactNode;
 export interface ILayoutProps {
     model: Model;
     factory: (node: TabNode) => React.ReactNode;
@@ -56,6 +57,7 @@ export interface ILayoutProps {
     onContextMenu?: NodeMouseEvent;
     onAuxMouseClick?: NodeMouseEvent;
     onShowOverflowMenu?: ShowOverflowMenuCallback;
+    onTabSetPlaceHolder?: TabSetPlaceHolderCallback;
 }
 export interface IFontValues {
     size?: string;
@@ -65,6 +67,7 @@ export interface IFontValues {
 }
 export interface ITabSetRenderValues {
     headerContent?: React.ReactNode;
+    centerContent?: React.ReactNode;
     stickyButtons: React.ReactNode[];
     buttons: React.ReactNode[];
     headerButtons: React.ReactNode[];