Merge pull request #14 from BUPTlhuanyu/restructure

Restructure
BUPTlhuanyu · Jul 16, 2021 · d422b65 · d422b65
2 parents a028ec2 + 1e37234
commit d422b65
Show file tree

Hide file tree

Showing 8 changed files with 503 additions and 369 deletions.
diff --git a/packages/views/src/components/useCodemirror/code.ts b/packages/views/src/components/useCodemirror/code.ts
@@ -119,4 +119,24 @@ export function createCodemirror(ele: any) {
     });
 }
 
+export const scrollToLine = (editor: codemirror.Editor, line: number) => {
+    if (!editor || !editor.getDoc) {
+        return;
+    }
+    // @ts-ignore
+    editor.scrollTo(0, editor.charCoords({line}, 'local').top - editor.charCoords({line}, 'line').top);
+    const textMarker = editor.getDoc().markText(
+        // @ts-ignore
+        {line: line - 1},
+        {line},
+        {
+            css: 'background-color: #FFFAAA',
+            atomic: true
+        }
+    );
+    setTimeout(() => {
+        textMarker.clear();
+    }, 500);
+};
+
 export default codemirror;
diff --git a/packages/views/src/electron/menu/index.ts b/packages/views/src/electron/menu/index.ts
@@ -33,7 +33,6 @@ export function registerContextMenu() {
 
 export function registerTopMenuListener() {
     pandora.ipcRenderer.on(`pandora:${CREATE_FILE}`, () => {
-        console.log('pandora:pandora:');
         fileEvent.emit(FS_CREATE_FILE);
     });
     pandora.ipcRenderer.on(`pandora:${CREATE_DIR}`, () => {

diff --git a/packages/views/src/pages/editor/components/sider/header/index.scss b/packages/views/src/pages/editor/components/sider/header/index.scss
@@ -0,0 +1,59 @@
+.sider-panel-header {
+    line-height: 30px;
+    height: 30px;
+    background-color: #f3f3f7;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: rgba(17, 17, 26, 0.1) 0px 2px 4px, rgba(17, 17, 26, 0.05) 0px 4px 8px;
+    &-icon {
+        display: flex;
+        cursor: pointer;
+    }
+    &-back {
+        &:hover {
+            background: #e1e1e1;
+            border-radius: 6px;
+        }
+    }
+    .ant-input-affix-wrapper {
+        border: none;
+        width: 0%;
+        animation: widthSpread .3s ease-in forwards;
+    }
+    .ant-input-affix-wrapper :focus{
+        border-color: #FFB531;
+        box-shadow: none;
+    }
+    .ant-input-affix-wrapper-focused {
+        // border-color: #FFB531;
+        border: none;
+        box-shadow: none;
+    }
+    &-input {
+        height: 20px;
+        background: transparent;
+        padding: 0;
+        margin-right: 4px;
+        margin-left: 4px;
+        border-radius: 0;
+        border-top: 0;
+        border-left: 0;
+        border-right: 0;
+        &:focus, &:hover {
+            border-color: #FFB531;
+            box-shadow: none;
+        }
+        &-selected {
+            background: #e1e1e1;
+            border-radius: 6px;
+        }
+        .ant-input {
+            font-size: 12px;
+            background: transparent;
+        }
+        .ant-input-suffix {
+            display: flex;
+        }
+    }
+}
diff --git a/packages/views/src/pages/editor/components/sider/header/index.tsx b/packages/views/src/pages/editor/components/sider/header/index.tsx
@@ -0,0 +1,99 @@
+// 非受控，减少外层代码量
+import * as React from 'react';
+import './index.scss';
+import getClassname from 'views/src/utils/classMaker';
+
+import Icon from 'views/src/components/icon';
+import {Input} from 'antd';
+
+interface ISiderProps {
+    className?: string;
+    onBack?: React.MouseEventHandler<HTMLSpanElement>;
+    onPressEnter?: (value: string, caseSensitive: boolean, wholeWord: boolean) => void;
+    onCaseSensitive?: React.MouseEventHandler<HTMLSpanElement>;
+    onCheckWholeWord?: React.MouseEventHandler<HTMLSpanElement>;
+    focused?: boolean;
+}
+
+export default function Header(props: ISiderProps) {
+    const [caseSensitive, setCaseSensitive] = React.useState<boolean>(false);
+    const [wholeWord, setWholeWord] = React.useState<boolean>(false);
+    const inputRef = React.useRef<Input>(null);
+
+    const [className] = React.useState(() => {
+        return getClassname([
+            'sider-panel-header',
+            props.className
+        ]);
+    });
+
+    const onCaseSensitive = React.useCallback(() => {
+        setCaseSensitive(!caseSensitive);
+    }, [caseSensitive, setCaseSensitive, props.onCaseSensitive]);
+
+    const onCheckWholeWord = React.useCallback(() => {
+        setWholeWord(!wholeWord);
+    }, [wholeWord, setWholeWord, props.onCheckWholeWord]);
+
+    const onPressEnter = React.useCallback(
+        e => {
+            if (!e || !e.target) {
+                return;
+            }
+            const value = e.target.value;
+            typeof props.onPressEnter === 'function' && props.onPressEnter(value, caseSensitive, wholeWord);
+        },
+        [props.onPressEnter, caseSensitive, wholeWord]
+    );
+
+    React.useEffect(() => {
+        props.focused && inputRef.current && inputRef.current?.focus();
+    }, [props.focused]);
+
+    return (
+        <div className={className}>
+            {/* TODO: renderProp */}
+            <span className="sider-panel-header-icon sider-panel-header-back" onClick={props.onBack}>
+                <Icon type="left" style={{fontSize: '20px'}} />
+            </span>
+            <Input
+                ref={inputRef}
+                onPressEnter={onPressEnter}
+                placeholder="查找"
+                className="sider-panel-header-input"
+                suffix={
+                    <>
+                        <span
+                            title="区分大小写"
+                            className={`sider-panel-header-icon ${
+                                caseSensitive ? 'sider-panel-header-input-selected' : ''
+                            }`}
+                            onClick={onCaseSensitive}
+                        >
+                            <Icon type="case" style={{fontSize: '20px'}} />
+                        </span>
+                        <span
+                            title="查找整个单词"
+                            className={`sider-panel-header-icon ${
+                                wholeWord ? 'sider-panel-header-input-selected' : ''
+                            }`}
+                            onClick={onCheckWholeWord}
+                        >
+                            <Icon type="word" style={{fontSize: '20px'}} />
+                        </span>
+                    </>
+                }
+            />
+        </div>
+    );
+};
+
+function noop() {}
+Header.defaultProps = {
+    className: '',
+    onBack: noop,
+    onPressEnter: noop,
+    onCaseSensitive: noop,
+    onCheckWholeWord: noop,
+    focused: noop
+};
diff --git a/packages/views/src/pages/editor/components/sider/index.scss b/packages/views/src/pages/editor/components/sider/index.scss
@@ -148,6 +148,14 @@
             border-top-width: 1px;
             border-top-style: solid;
         }
+        .sider-file-empty {
+            display: flex;
+            flex: 1;
+            height: 100%;
+            justify-content: center;
+            align-items: center;
+            color: #7a7a7a;
+        }
         .sider-file-folder {
             background: transparent;
             overflow-x: auto;