diff --git a/package.json b/package.json index 9c85c1a..95d0934 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@agentlab/ldkg-ui-react", - "version": "0.1.18", + "version": "0.1.19", "description": "LDKG Forms UI Components", "license": "GPL-3.0", "author": "Alexey Ivanov ", @@ -52,6 +52,7 @@ "lint-staged": "lint-staged" }, "peerDependencies": { + "@agentlab/react-collapse-pane": ">=2.0.3", "@agentlab/sparql-jsld-client": ">=5.0.7", "@ant-design/icons": ">=4.7.0", "@rdfjs/data-model": ">=1.3.4", @@ -66,7 +67,6 @@ "rc-util": ">=5.16.1", "react": ">=17.0.2", "react-base-table": ">=1.13.0", - "react-collapse-pane": ">=2.0.1", "react-dnd": ">=13.1.1", "react-dnd-html5-backend": ">=12.1.1", "react-dom": ">=17.0.2", @@ -83,6 +83,7 @@ "uuid62": ">=1.0.2" }, "dependencies": { + "@agentlab/react-collapse-pane": "^2.0.3", "@agentlab/sparql-jsld-client": "^5.0.7", "@ant-design/icons": "^4.7.0", "@tinymce/tinymce-react": "^3.13.0", @@ -99,7 +100,6 @@ "mst-middlewares": "^5.1.0", "react": "^17.0.2", "react-base-table": "^1.13.0", - "react-collapse-pane": "^2.0.1", "react-dnd": "13.1.1", "react-dnd-html5-backend": "12.1.1", "react-dom": "^17.0.2", @@ -144,7 +144,7 @@ "cssnano": "^5.0.14", "cypress": "^9.2.0", "cypress-storybook": "^0.5.1", - "eslint": "^8.5.0", + "eslint": "^8.6.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-cypress": "^2.12.1", "eslint-plugin-flowtype": "^8.0.3", diff --git a/src/layouts/SplitPaneLayout.tsx b/src/layouts/SplitPaneLayout.tsx index 72599d3..4341ca7 100644 --- a/src/layouts/SplitPaneLayout.tsx +++ b/src/layouts/SplitPaneLayout.tsx @@ -8,7 +8,7 @@ * SPDX-License-Identifier: GPL-3.0-only ********************************************************************************/ import React, { useMemo } from 'react'; -import { SplitPane } from 'react-collapse-pane'; +import { SplitPane } from '@agentlab/react-collapse-pane'; import { FormsDispatch } from '../Form'; import { rankWith, uiTypeIs, RankedTester } from '../testers'; import { withLayoutProps } from '../util/ContextToProps'; @@ -49,7 +49,8 @@ export const SplitPaneLayoutRenderer: React.FC = ({ options.collapseDirection && { collapseDirection: options.collapseDirection, } - }> + } + resizerOptions={options.resizerOptions}> {panes} diff --git a/stories/TwoTables.stories.tsx b/stories/TwoTables.stories.tsx index 9acdf44..f70b9fe 100644 --- a/stories/TwoTables.stories.tsx +++ b/stories/TwoTables.stories.tsx @@ -63,6 +63,25 @@ const Template: Story = (args: any) => { ); }; +/*const css = { + height: '1px', + background: 'rgba(0, 0, 0, 0.1)', + }; + const hoverCss = { + height: '10px', + marginTop: '-10px', + backgroundImage: 'radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)', + backgroundSize: '100% 50px', + backgroundPosition: '50% 0', + backgroundRepeat: 'no-repeat', + borderRight: '1px solid rgba(0, 0, 0, 0.1)', + };*/ +const css = { + width: '2px', + backgroundColor: 'rgba(120, 120, 120, 0.3)', +}; +const hoverCss = { backgroundColor: 'rgba(120, 120, 120, 0.6)' }; + const viewKinds = [ { '@id': 'mktp:TwoTablesViewKind', @@ -163,6 +182,11 @@ const viewKinds = [ }, initialSizes: [30, 70], collapseDirection: 'left', + resizerOptions: { + grabberSize: '2rem', + css: css, + hoverCss: hoverCss, + }, }, elements: [ { diff --git a/yarn.lock b/yarn.lock index 51b0443..0a2817e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,14 @@ # yarn lockfile v1 +"@agentlab/react-collapse-pane@^2.0.3": + version "2.0.3" + resolved "https://registry.yarnpkg.com/@agentlab/react-collapse-pane/-/react-collapse-pane-2.0.3.tgz#4ae144eac4f7e15c3c42af1a3a062801167fa8e8" + integrity sha512-H/z8s+N4z45zc6C8td8lkWCvvd0YNBBLlJ6nIhVp6UWOXqygzA5M0AqMJzHUUfTWAmnACH5ou8UwXJgQtEcxtw== + dependencies: + "@material-ui/core" "^4.12.3" + styled-components "^5.3.3" + "@agentlab/sparql-jsld-client@^5.0.7": version "5.0.7" resolved "https://registry.yarnpkg.com/@agentlab/sparql-jsld-client/-/sparql-jsld-client-5.0.7.tgz#dd155ebbd3b5a7adabdca52c6338a75c7c01a6d2" @@ -1772,9 +1780,9 @@ "@types/yargs" "^16.0.0" chalk "^4.0.0" -"@material-ui/core@^4.11.4": +"@material-ui/core@^4.12.3": version "4.12.3" - resolved "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz" + resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca" integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw== dependencies: "@babel/runtime" "^7.4.4" @@ -3733,7 +3741,7 @@ acorn@^8.2.4: resolved "https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz" integrity sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw== -acorn@^8.6.0: +acorn@^8.6.0, acorn@^8.7.0: version "8.7.0" resolved "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz" integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ== @@ -6672,10 +6680,10 @@ eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.1.0: resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz" integrity sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA== -eslint@^8.5.0: - version "8.5.0" - resolved "https://registry.npmjs.org/eslint/-/eslint-8.5.0.tgz" - integrity sha512-tVGSkgNbOfiHyVte8bCM8OmX+xG9PzVG/B4UCF60zx7j61WIVY/AqJECDgpLD4DbbESD0e174gOg3ZlrX15GDg== +eslint@^8.6.0: + version "8.6.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.6.0.tgz#4318c6a31c5584838c1a2e940c478190f58d558e" + integrity sha512-UvxdOJ7mXFlw7iuHZA4jmzPaUqIw54mZrv+XPYKNbKdLR0et4rf60lIZUU9kiNtnzzMzGWxMV+tQ7uG7JG8DPw== dependencies: "@eslint/eslintrc" "^1.0.5" "@humanwhocodes/config-array" "^0.9.2" @@ -6689,7 +6697,7 @@ eslint@^8.5.0: eslint-scope "^7.1.0" eslint-utils "^3.0.0" eslint-visitor-keys "^3.1.0" - espree "^9.2.0" + espree "^9.3.0" esquery "^1.4.0" esutils "^2.0.2" fast-deep-equal "^3.1.3" @@ -6730,6 +6738,15 @@ espree@^9.2.0: acorn-jsx "^5.3.1" eslint-visitor-keys "^3.1.0" +espree@^9.3.0: + version "9.3.0" + resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.0.tgz#c1240d79183b72aaee6ccfa5a90bc9111df085a8" + integrity sha512-d/5nCsb0JcqsSEeQzFZ8DH1RmxPcglRWh24EFTlUEmCKoehXGdpsx0RkHDubqUI8LSAIKMQp4r9SzQ3n+sm4HQ== + dependencies: + acorn "^8.7.0" + acorn-jsx "^5.3.1" + eslint-visitor-keys "^3.1.0" + esprima@^4.0.0, esprima@^4.0.1: version "4.0.1" resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz" @@ -12255,14 +12272,6 @@ react-base-table@^1.13.0: react-virtualized-auto-sizer "^1.0.2" react-window "^1.8.2" -react-collapse-pane@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/react-collapse-pane/-/react-collapse-pane-2.0.1.tgz#e5dc9c2c16d2ecd98f36ed81daa2a36948960a4a" - integrity sha512-6D95mymzY+NFKDkvjBGgsRNYbcSdLeY3Af7ll+IfIKh7dAmHyqKFh6cGj4sueVdxWoAgtbagiIeRgRcX/rYXUA== - dependencies: - "@material-ui/core" "^4.11.4" - styled-components "^5.3.0" - react-colorful@^5.1.2: version "5.5.1" resolved "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz" @@ -13928,7 +13937,7 @@ styled-components@^2.4.0: stylis "^3.4.0" supports-color "^3.2.3" -styled-components@^5.3.0, styled-components@^5.3.3: +styled-components@^5.3.3: version "5.3.3" resolved "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz" integrity sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==