aiden
/
tailchat
mirror of https://github.com/msgbyte/tailchat
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: add split component

Browse Source
pull/81/head
moonrailgun 3 years ago
parent f42ed49449
commit 1db87df614
4 changed files with 107 additions and 8 deletions
Show Stats Download Patch File Download Diff File

58
pnpm-lock.yaml
Unescape Escape View File

@ -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

1
web/package.json
Unescape Escape View File

@ -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",

23
web/src/components/SplitPanel.less
Unescape Escape View File

@ -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);
}
}
}

33
web/src/components/SplitPanel.tsx
Unescape Escape View File

@ -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<SplitPanelProps> = React.memo((props) => {
const [sizes, { save: saveSizes }] = useStorage('pin-sizes', [90, 10]);
const handleDragEnd = (sizes: number[]) => {
saveSizes(sizes);
};
return (
<Split
className={clsx('split', props.className)}
sizes={sizes}
minSize={250}
expandToMin={true}
onDragEnd={handleDragEnd}
>
{props.children}
</Split>
);
});
SplitPanel.displayName = 'SplitPanel';
Write Preview
Loading…
Cancel
Save