diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 79645a97..f12d1287 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -162,6 +162,7 @@ importers: react-helmet: ^6.1.0 react-router: ^5.2.0 react-router-dom: ^5.2.0 + react-split: ^2.0.14 react-transition-group: ^4.4.2 react-use-gesture: ^9.1.3 react-virtualized-auto-sizer: ^1.0.6 @@ -208,6 +209,7 @@ importers: react-helmet: registry.npmmirror.com/react-helmet/6.1.0_react@17.0.2 react-router: registry.npmmirror.com/react-router/5.2.1_react@17.0.2 react-router-dom: registry.npmmirror.com/react-router-dom/5.3.0_react@17.0.2 + react-split: registry.npmmirror.com/react-split/2.0.14_react@17.0.2 react-transition-group: registry.nlark.com/react-transition-group/4.4.2_react-dom@17.0.2+react@17.0.2 react-use-gesture: registry.npmmirror.com/react-use-gesture/9.1.3_react@17.0.2 react-virtualized-auto-sizer: registry.npmmirror.com/react-virtualized-auto-sizer/1.0.6_react-dom@17.0.2+react@17.0.2 @@ -3444,6 +3446,7 @@ packages: hasBin: true dependencies: js-tokens: registry.nlark.com/js-tokens/4.0.0 + dev: false registry.nlark.com/lower-case/2.0.2: resolution: {integrity: sha1-b6I3xj29xKgsoP2ILkci3F5jTig=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/lower-case/download/lower-case-2.0.2.tgz} @@ -3745,6 +3748,7 @@ packages: name: object-assign version: 4.1.1 engines: {node: '>=0.10.0'} + dev: false registry.nlark.com/object-hash/2.2.0: resolution: {integrity: sha1-WtUYWB7vxEO9djRyuP8unCwNVKU=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/object-hash/download/object-hash-2.2.0.tgz} @@ -11013,7 +11017,7 @@ packages: version: 4.10.1 dependencies: '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.16.5 - loose-envify: registry.nlark.com/loose-envify/1.4.0 + loose-envify: registry.npmmirror.com/loose-envify/1.4.0 resolve-pathname: registry.nlark.com/resolve-pathname/3.0.0 tiny-invariant: registry.npmmirror.com/tiny-invariant/1.2.0 tiny-warning: registry.nlark.com/tiny-warning/1.0.3 @@ -12048,6 +12052,11 @@ packages: version: 0.8.0 dev: false + registry.npmmirror.com/js-tokens/4.0.0: + resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz} + name: js-tokens + version: 4.0.0 + registry.npmmirror.com/js-yaml/3.14.1: resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/js-yaml/download/js-yaml-3.14.1.tgz} name: js-yaml @@ -12306,6 +12315,14 @@ packages: wrap-ansi: registry.nlark.com/wrap-ansi/6.2.0 dev: true + registry.npmmirror.com/loose-envify/1.4.0: + resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz} + name: loose-envify + version: 1.4.0 + hasBin: true + dependencies: + js-tokens: registry.npmmirror.com/js-tokens/4.0.0 + registry.npmmirror.com/lz-string/1.4.4: resolution: {integrity: sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lz-string/download/lz-string-1.4.4.tgz} name: lz-string @@ -12613,6 +12630,12 @@ packages: path-key: registry.nlark.com/path-key/3.1.1 dev: true + registry.npmmirror.com/object-assign/4.1.1: + resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz} + name: object-assign + version: 4.1.1 + engines: {node: '>=0.10.0'} + registry.npmmirror.com/object-inspect/1.12.0: resolution: {integrity: sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/object-inspect/download/object-inspect-1.12.0.tgz} name: object-inspect @@ -13141,12 +13164,12 @@ packages: dev: true registry.npmmirror.com/prop-types/15.8.0: - resolution: {integrity: sha512-fDGekdaHh65eI3lMi5OnErU6a8Ighg2KjcjQxO7m8VHyWjcPyj5kiOgV1LQDOOOgVy3+5FgjXvdSSX7B8/5/4g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/prop-types/download/prop-types-15.8.0.tgz} + resolution: {integrity: sha512-fDGekdaHh65eI3lMi5OnErU6a8Ighg2KjcjQxO7m8VHyWjcPyj5kiOgV1LQDOOOgVy3+5FgjXvdSSX7B8/5/4g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/prop-types/-/prop-types-15.8.0.tgz} name: prop-types version: 15.8.0 dependencies: - loose-envify: registry.nlark.com/loose-envify/1.4.0 - object-assign: registry.nlark.com/object-assign/4.1.1 + loose-envify: registry.npmmirror.com/loose-envify/1.4.0 + object-assign: registry.npmmirror.com/object-assign/4.1.1 react-is: registry.npmmirror.com/react-is/16.13.1 registry.npmmirror.com/property-expr/2.0.4: @@ -13687,12 +13710,12 @@ packages: dev: false registry.npmmirror.com/react-is/16.13.1: - resolution: {integrity: sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-is/download/react-is-16.13.1.tgz} + resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz} name: react-is version: 16.13.1 registry.npmmirror.com/react-is/17.0.2: - resolution: {integrity: sha1-5pHUqOnHiTZWVVOas3J2Kw77VPA=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-is/download/react-is-17.0.2.tgz} + resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz} name: react-is version: 17.0.2 @@ -13797,6 +13820,19 @@ packages: react: registry.npmmirror.com/react/17.0.2 dev: false + registry.npmmirror.com/react-split/2.0.14_react@17.0.2: + resolution: {integrity: sha512-bKWydgMgaKTg/2JGQnaJPg51T6dmumTWZppFgEbbY0Fbme0F5TuatAScCLaqommbGQQf/ZT1zaejuPDriscISA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-split/-/react-split-2.0.14.tgz} + id: registry.npmmirror.com/react-split/2.0.14 + name: react-split + version: 2.0.14 + peerDependencies: + react: '*' + dependencies: + prop-types: registry.npmmirror.com/prop-types/15.8.0 + react: registry.npmmirror.com/react/17.0.2 + split.js: registry.npmmirror.com/split.js/1.6.5 + dev: false + registry.npmmirror.com/react-use-gesture/9.1.3_react@17.0.2: resolution: {integrity: sha1-kr0UPk9Y5pvUJFFKW/zLoqHWLsA=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-use-gesture/download/react-use-gesture-9.1.3.tgz} id: registry.npmmirror.com/react-use-gesture/9.1.3 @@ -14124,8 +14160,8 @@ packages: name: scheduler version: 0.20.2 dependencies: - loose-envify: registry.nlark.com/loose-envify/1.4.0 - object-assign: registry.nlark.com/object-assign/4.1.1 + loose-envify: registry.npmmirror.com/loose-envify/1.4.0 + object-assign: registry.npmmirror.com/object-assign/4.1.1 dev: false registry.npmmirror.com/schema-utils/3.1.1: @@ -14329,6 +14365,12 @@ packages: version: 3.0.11 dev: true + registry.npmmirror.com/split.js/1.6.5: + resolution: {integrity: sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/split.js/-/split.js-1.6.5.tgz} + name: split.js + version: 1.6.5 + dev: false + registry.npmmirror.com/split2/3.2.2: resolution: {integrity: sha1-vyzyo32DgxLCSciSBv16F90SNl8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/split2/download/split2-3.2.2.tgz} name: split2 diff --git a/web/package.json b/web/package.json index 7962ade4..a6884268 100644 --- a/web/package.json +++ b/web/package.json @@ -42,6 +42,7 @@ "react-helmet": "^6.1.0", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", + "react-split": "^2.0.14", "react-transition-group": "^4.4.2", "react-use-gesture": "^9.1.3", "react-virtualized-auto-sizer": "^1.0.6", diff --git a/web/src/components/SplitPanel.less b/web/src/components/SplitPanel.less new file mode 100644 index 00000000..b22e637d --- /dev/null +++ b/web/src/components/SplitPanel.less @@ -0,0 +1,23 @@ +.split { + display: flex; + flex-direction: row; + + .gutter { + background-color: rgba(238, 238, 238, 0.8); + background-repeat: no-repeat; + background-position: 50%; + } + + .gutter.gutter-horizontal { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); + cursor: col-resize; + } +} + +.dark { + .split { + .gutter { + background-color: rgba(238, 238, 238, 0.1); + } + } +} diff --git a/web/src/components/SplitPanel.tsx b/web/src/components/SplitPanel.tsx new file mode 100644 index 00000000..298921e5 --- /dev/null +++ b/web/src/components/SplitPanel.tsx @@ -0,0 +1,33 @@ +import clsx from 'clsx'; +import React from 'react'; +import Split from 'react-split'; +import { useStorage } from 'tailchat-shared'; +import './SplitPanel.less'; + +/** + * Reference: https://split.js.org/#/ + */ + +interface SplitPanelProps { + className?: string; +} +export const SplitPanel: React.FC = React.memo((props) => { + const [sizes, { save: saveSizes }] = useStorage('pin-sizes', [90, 10]); + + const handleDragEnd = (sizes: number[]) => { + saveSizes(sizes); + }; + + return ( + + {props.children} + + ); +}); +SplitPanel.displayName = 'SplitPanel';