@sqlrooms/layout 0.8.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -23,7 +23,7 @@ const MosaicLayout = (props) => {
|
|
|
23
23
|
setDragging(false);
|
|
24
24
|
onRelease?.(newNode);
|
|
25
25
|
}, [onRelease]);
|
|
26
|
-
return (_jsxs("div", { className: "relative
|
|
26
|
+
return (_jsxs("div", { className: "bg relative h-full w-full", children: [_jsx("style", { children: customMosaicStyles }), _jsx(Mosaic, { ...props, className: "" /* to avoid using blueprint theme */, onChange: handleLayoutChange, onRelease: handleLayoutRelease, renderTile: (id, path) => (_jsx(MosaicTile, { id: id, className: "bg-secondary/10", path: path, isDragging: isDragging, content: renderTile(id, path) })) })] }));
|
|
27
27
|
};
|
|
28
28
|
export default MosaicLayout;
|
|
29
29
|
//# sourceMappingURL=MosaicLayout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MosaicLayout.js","sourceRoot":"","sources":["../../src/mosaic/MosaicLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAK,WAAW,EAAC,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAC,MAAM,EAA0B,MAAM,wBAAwB,CAAC;AACvE,OAAO,mDAAmD,CAAC;AAC3D,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,2DAA2D;AAC3D,MAAM,kBAAkB,GAAG;;;;;;;CAO1B,CAAC;AAEF,MAAM,YAAY,GAA4B,CAAC,KAAK,EAAE,EAAE;IACtD,MAAM,EAAC,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,GAAG,KAAK,CAAC;IAChD,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,KAAgC,EAAE,EAAE;QACnC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,OAAkC,EAAE,EAAE;QACrC,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2BAA2B,aACxC,0BAAQ,kBAAkB,GAAS,EACnC,KAAC,MAAM,OACD,KAAK,EACT,SAAS,EAAC,EAAE,CAAC,oCAAoC,EACjD,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAE,mBAAmB,EAC9B,UAAU,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,CACxB,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,iBAAiB,EAC3B,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,GAC7B,CACH,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React, {FC, useCallback} from 'react';\nimport {Mosaic, MosaicNode, MosaicProps} from 'react-mosaic-component';\nimport 'react-mosaic-component/react-mosaic-component.css';\nimport MosaicTile from './MosaicTile';\n\n// Add custom styles for the mosaic split line hover effect\nconst customMosaicStyles = `\n .mosaic-split {\n background-color: hsl(var(--border) / 0.2);\n }\n .mosaic-split:hover {\n background-color: hsl(var(--primary) / 0.4);\n }\n`;\n\nconst MosaicLayout: FC<MosaicProps<string>> = (props) => {\n const {onChange, onRelease, renderTile} = props;\n const [isDragging, setDragging] = React.useState(false);\n const handleLayoutChange = useCallback(\n (nodes: MosaicNode<string> | null) => {\n setDragging(true);\n onChange?.(nodes);\n },\n [onChange],\n );\n const handleLayoutRelease = useCallback(\n (newNode: MosaicNode<string> | null) => {\n setDragging(false);\n onRelease?.(newNode);\n },\n [onRelease],\n );\n\n return (\n <div className=\"relative
|
|
1
|
+
{"version":3,"file":"MosaicLayout.js","sourceRoot":"","sources":["../../src/mosaic/MosaicLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAK,WAAW,EAAC,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAC,MAAM,EAA0B,MAAM,wBAAwB,CAAC;AACvE,OAAO,mDAAmD,CAAC;AAC3D,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,2DAA2D;AAC3D,MAAM,kBAAkB,GAAG;;;;;;;CAO1B,CAAC;AAEF,MAAM,YAAY,GAA4B,CAAC,KAAK,EAAE,EAAE;IACtD,MAAM,EAAC,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,GAAG,KAAK,CAAC;IAChD,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,KAAgC,EAAE,EAAE;QACnC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,OAAkC,EAAE,EAAE;QACrC,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2BAA2B,aACxC,0BAAQ,kBAAkB,GAAS,EACnC,KAAC,MAAM,OACD,KAAK,EACT,SAAS,EAAC,EAAE,CAAC,oCAAoC,EACjD,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAE,mBAAmB,EAC9B,UAAU,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,CACxB,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,iBAAiB,EAC3B,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,GAC7B,CACH,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React, {FC, useCallback} from 'react';\nimport {Mosaic, MosaicNode, MosaicProps} from 'react-mosaic-component';\nimport 'react-mosaic-component/react-mosaic-component.css';\nimport MosaicTile from './MosaicTile';\n\n// Add custom styles for the mosaic split line hover effect\nconst customMosaicStyles = `\n .mosaic-split {\n background-color: hsl(var(--border) / 0.2);\n }\n .mosaic-split:hover {\n background-color: hsl(var(--primary) / 0.4);\n }\n`;\n\nconst MosaicLayout: FC<MosaicProps<string>> = (props) => {\n const {onChange, onRelease, renderTile} = props;\n const [isDragging, setDragging] = React.useState(false);\n const handleLayoutChange = useCallback(\n (nodes: MosaicNode<string> | null) => {\n setDragging(true);\n onChange?.(nodes);\n },\n [onChange],\n );\n const handleLayoutRelease = useCallback(\n (newNode: MosaicNode<string> | null) => {\n setDragging(false);\n onRelease?.(newNode);\n },\n [onRelease],\n );\n\n return (\n <div className=\"bg relative h-full w-full\">\n <style>{customMosaicStyles}</style>\n <Mosaic<string>\n {...props}\n className=\"\" /* to avoid using blueprint theme */\n onChange={handleLayoutChange}\n onRelease={handleLayoutRelease}\n renderTile={(id, path) => (\n <MosaicTile\n id={id}\n className=\"bg-secondary/10\"\n path={path}\n isDragging={isDragging}\n content={renderTile(id, path)}\n />\n )}\n />\n </div>\n );\n};\n\nexport default MosaicLayout;\n"]}
|
|
@@ -5,7 +5,7 @@ import { MosaicWindow } from 'react-mosaic-component';
|
|
|
5
5
|
const ENABLE_LAYOUT_REARRANGE = false;
|
|
6
6
|
const MosaicTile = (props) => {
|
|
7
7
|
const { id, content, path, isDragging, className } = props;
|
|
8
|
-
const body = (_jsx("div", { className: cn('
|
|
8
|
+
const body = (_jsx("div", { className: cn('h-full flex-1 flex-col overflow-hidden rounded-md p-2', className, isDragging ? 'pointer-events-none' : ''), children: content }));
|
|
9
9
|
if (!ENABLE_LAYOUT_REARRANGE || id === MAIN_VIEW) {
|
|
10
10
|
return body;
|
|
11
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MosaicTile.js","sourceRoot":"","sources":["../../src/mosaic/MosaicTile.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,OAAO,EAAe,YAAY,EAAC,MAAM,wBAAwB,CAAC;AAElE,MAAM,uBAAuB,GAAG,KAAK,CAAC;AAEtC,MAAM,UAAU,GAMX,CAAC,KAAK,EAAE,EAAE;IACb,MAAM,EAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAC,GAAG,KAAK,CAAC;IACzD,MAAM,IAAI,GAAG,CACX,cACE,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,EACT,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CACxC,YAEA,OAAO,GACJ,CACP,CAAC;IACF,IAAI,CAAC,uBAAuB,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;QACjD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL,KAAC,YAAY,IACX,KAAK,EAAE,EAAE;QACT,uBAAuB;QACvB,IAAI;QACJ,qCAAqC;QACrC,IAAI,EAAE,IAAI;QACV,8DAA8D;QAC9D,oEAAoE;QACpE,aAAa,EAAE,GAAG,EAAE,CAClB,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,CACjB,eAAO,CACR,CAAC,CAAC,CAAC,CACF,cAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAC,GAEtD,CACP,YAGF,IAAI,GACQ,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {MAIN_VIEW} from '@sqlrooms/project-config';\nimport {cn} from '@sqlrooms/ui';\nimport {FC} from 'react';\nimport {MosaicBranch, MosaicWindow} from 'react-mosaic-component';\n\nconst ENABLE_LAYOUT_REARRANGE = false;\n\nconst MosaicTile: FC<{\n id: string;\n path: MosaicBranch[];\n content: React.ReactNode;\n isDragging: boolean;\n className?: string;\n}> = (props) => {\n const {id, content, path, isDragging, className} = props;\n const body = (\n <div\n className={cn(\n '
|
|
1
|
+
{"version":3,"file":"MosaicTile.js","sourceRoot":"","sources":["../../src/mosaic/MosaicTile.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,OAAO,EAAe,YAAY,EAAC,MAAM,wBAAwB,CAAC;AAElE,MAAM,uBAAuB,GAAG,KAAK,CAAC;AAEtC,MAAM,UAAU,GAMX,CAAC,KAAK,EAAE,EAAE;IACb,MAAM,EAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAC,GAAG,KAAK,CAAC;IACzD,MAAM,IAAI,GAAG,CACX,cACE,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,EACT,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CACxC,YAEA,OAAO,GACJ,CACP,CAAC;IACF,IAAI,CAAC,uBAAuB,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;QACjD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL,KAAC,YAAY,IACX,KAAK,EAAE,EAAE;QACT,uBAAuB;QACvB,IAAI;QACJ,qCAAqC;QACrC,IAAI,EAAE,IAAI;QACV,8DAA8D;QAC9D,oEAAoE;QACpE,aAAa,EAAE,GAAG,EAAE,CAClB,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,CACjB,eAAO,CACR,CAAC,CAAC,CAAC,CACF,cAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAC,GAEtD,CACP,YAGF,IAAI,GACQ,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {MAIN_VIEW} from '@sqlrooms/project-config';\nimport {cn} from '@sqlrooms/ui';\nimport {FC} from 'react';\nimport {MosaicBranch, MosaicWindow} from 'react-mosaic-component';\n\nconst ENABLE_LAYOUT_REARRANGE = false;\n\nconst MosaicTile: FC<{\n id: string;\n path: MosaicBranch[];\n content: React.ReactNode;\n isDragging: boolean;\n className?: string;\n}> = (props) => {\n const {id, content, path, isDragging, className} = props;\n const body = (\n <div\n className={cn(\n 'h-full flex-1 flex-col overflow-hidden rounded-md p-2',\n className,\n isDragging ? 'pointer-events-none' : '',\n )}\n >\n {content}\n </div>\n );\n if (!ENABLE_LAYOUT_REARRANGE || id === MAIN_VIEW) {\n return body;\n }\n return (\n <MosaicWindow<string>\n title={id}\n // additionalControls={\n // }\n // createNode={() => genRandomStr(6)}\n path={path}\n // onDragStart={() => console.log('MosaicWindow.onDragStart')}\n // onDragEnd={(type) => console.log('MosaicWindow.onDragEnd', type)}\n renderToolbar={() =>\n id === MAIN_VIEW ? (\n <div />\n ) : (\n <div style={{display: 'flex', width: '100%', height: '100%'}}>\n {/* <ProjectBuilderPanelHeader panelKey={id as ProjectPanelTypes} /> */}\n </div>\n )\n }\n >\n {body}\n </MosaicWindow>\n );\n};\n\nexport default MosaicTile;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/layout",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"access": "public"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@sqlrooms/project-config": "0.8.
|
|
23
|
-
"@sqlrooms/ui": "0.8.
|
|
22
|
+
"@sqlrooms/project-config": "0.8.1",
|
|
23
|
+
"@sqlrooms/ui": "0.8.1"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"react": "*",
|
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"lint": "eslint .",
|
|
33
33
|
"typedoc": "typedoc"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "7b5e727b79d675c17b93412c109d1ba1b22699c8"
|
|
36
36
|
}
|