From 5db270dcf668feeb0b3bbfc83a1646179b708a5a Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sun, 10 Apr 2022 11:34:25 +0800
Subject: [PATCH] feat: improve status

---
 .../client/src/tiptap/extensions/status.ts    |  15 ++-
 .../client/src/tiptap/menus/insert/index.tsx  |   2 +-
 .../client/src/tiptap/menus/quick-insert.tsx  |   9 +-
 .../client/src/tiptap/styles/selection.scss   |   9 +-
 .../src/tiptap/wrappers/status/index.tsx      | 119 +++++++++++++++---
 5 files changed, 125 insertions(+), 29 deletions(-)

diff --git a/packages/client/src/tiptap/extensions/status.ts b/packages/client/src/tiptap/extensions/status.ts
index 89a35c95..7d30c59e 100644
--- a/packages/client/src/tiptap/extensions/status.ts
+++ b/packages/client/src/tiptap/extensions/status.ts
@@ -3,10 +3,16 @@ import { ReactNodeViewRenderer } from '@tiptap/react';
 import { StatusWrapper } from '../wrappers/status';
 import { getDatasetAttribute } from '../utils/dataset';
 
+type IStatusAttrs = {
+  color?: string;
+  text?: string;
+  defaultShowPicker?: boolean;
+};
+
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     status: {
-      setStatus: () => ReturnType;
+      setStatus: (arg: IStatusAttrs) => ReturnType;
     };
   }
 }
@@ -21,13 +27,16 @@ export const Status = Node.create({
   addAttributes() {
     return {
       color: {
-        default: 'grey',
+        default: '#FFA39E',
         parseHTML: getDatasetAttribute('color'),
       },
       text: {
-        default: '',
+        default: '请设置状态内容',
         parseHTML: getDatasetAttribute('text'),
       },
+      defaultShowPicker: {
+        default: false,
+      },
     };
   },
 
diff --git a/packages/client/src/tiptap/menus/insert/index.tsx b/packages/client/src/tiptap/menus/insert/index.tsx
index 0b27b5dc..7179d21c 100644
--- a/packages/client/src/tiptap/menus/insert/index.tsx
+++ b/packages/client/src/tiptap/menus/insert/index.tsx
@@ -86,7 +86,7 @@ export const Insert: React.FC<{ editor: Editor }> = ({ editor }) => {
           <Dropdown.Divider />
           <Dropdown.Title>卡片</Dropdown.Title>
 
-          <Dropdown.Item onClick={() => editor.chain().focus().setStatus().run()}>
+          <Dropdown.Item onClick={() => editor.chain().focus().setStatus({ defaultShowPicker: true }).run()}>
             <IconStatus /> 状态
           </Dropdown.Item>
 
diff --git a/packages/client/src/tiptap/menus/quick-insert.tsx b/packages/client/src/tiptap/menus/quick-insert.tsx
index c16c2b99..40903083 100644
--- a/packages/client/src/tiptap/menus/quick-insert.tsx
+++ b/packages/client/src/tiptap/menus/quick-insert.tsx
@@ -219,7 +219,14 @@ export const QUICK_INSERT_ITEMS = [
         状态
       </Space>
     ),
-    command: (editor: Editor) => editor.chain().focus().setStatus().run(),
+    command: (editor: Editor) =>
+      editor
+        .chain()
+        .focus()
+        .setStatus({
+          defaultShowPicker: true,
+        })
+        .run(),
   },
 
   {
diff --git a/packages/client/src/tiptap/styles/selection.scss b/packages/client/src/tiptap/styles/selection.scss
index 539b41f1..c35c022f 100644
--- a/packages/client/src/tiptap/styles/selection.scss
+++ b/packages/client/src/tiptap/styles/selection.scss
@@ -5,7 +5,7 @@
 
   .tableWrapper {
     ::selection {
-      background-color: transparent;
+      //background-color: transparent;
     }
 
     &.selected-node {
@@ -18,7 +18,6 @@
 
   .node-status {
     .semi-tag-default {
-      height: 27px;
       border: 1px solid var(--node-border-color);
     }
 
@@ -95,7 +94,7 @@
         &::after {
           position: absolute;
           content: '';
-          inset: 0px;
+          inset: 0;
           pointer-events: none;
           background-color: rgba(179, 212, 255, 0.3);
         }
@@ -111,7 +110,7 @@
         &::after {
           position: absolute;
           content: '';
-          inset: 0px;
+          inset: 0;
           pointer-events: none;
           background-color: transparent;
           border: 1px solid var(--node-hover-border-color) !important;
@@ -133,7 +132,7 @@
         &::after {
           position: absolute;
           content: '';
-          inset: 0px;
+          inset: 0;
           pointer-events: none;
           background-color: rgba(179, 212, 255, 0.3);
           border: 1px solid var(--node-selected-border-color) !important;
diff --git a/packages/client/src/tiptap/wrappers/status/index.tsx b/packages/client/src/tiptap/wrappers/status/index.tsx
index 2305563e..cfb84a6e 100644
--- a/packages/client/src/tiptap/wrappers/status/index.tsx
+++ b/packages/client/src/tiptap/wrappers/status/index.tsx
@@ -1,42 +1,123 @@
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
-import { Space, Popover, Tag, Input } from '@douyinfe/semi-ui';
+import { Button, Collapsible, Space, Popover, Tag, Input } from '@douyinfe/semi-ui';
 import cls from 'classnames';
+import { useToggle } from 'hooks/use-toggle';
 import styles from './index.module.scss';
+import { useCallback, useEffect, useRef } from 'react';
+
+const colors = [
+  '#F5222D',
+  '#FA541C',
+  '#FA8C16',
+  '#FADB14',
+  '#52C41A',
+  '#13C2C2',
+  '#1890FF',
+  '#2F54EB',
+  '#722ED1',
+  '#EB2F96',
+  '#FFE8E6',
+  '#FFECE0',
+  '#FFEFD1',
+  '#DEE8FC',
+  '#EFE1FA',
+  '#FAE1EB',
+  '#FFA39E',
+  '#FFBB96',
+  '#FFD591',
+  '#FFFB8F',
+  '#B7EB8F',
+  '#87E8DE',
+  '#91D5FF',
+  '#ADC6FF',
+  '#D3ADF7',
+  '#FFADD2',
+  '#FF4D4F',
+  '#FF7A45',
+  '#FFA940',
+  '#FFEC3D',
+  '#73D13D',
+  '#36CFC9',
+  '#40A9FF',
+  '#597EF7',
+  '#9254DE',
+  '#F759AB',
+  '#CF1322',
+  '#D4380D',
+  '#D46B08',
+  '#D4B106',
+  '#389E0D',
+  '#08979C',
+];
 
 export const StatusWrapper = ({ editor, node, updateAttributes }) => {
   const isEditable = editor.isEditable;
-  const { color, text } = node.attrs;
+  const { color, text, defaultShowPicker } = node.attrs;
+  const ref = useRef<HTMLInputElement>();
+  const [visible, toggleVisible] = useToggle(false);
+  const [isOpen, toggleOpen] = useToggle(false);
+
   const content = (
-    <Tag className="render-wrapper" color={color}>
+    <Tag className="render-wrapper" style={{ backgroundColor: color }}>
       {text || '点击设置状态'}
     </Tag>
   );
 
+  const onVisibleChange = useCallback(
+    (value) => {
+      toggleVisible(value);
+      if (defaultShowPicker) {
+        updateAttributes({ defaultShowPicker: false });
+      }
+    },
+    [defaultShowPicker, updateAttributes]
+  );
+
+  useEffect(() => {
+    if (defaultShowPicker) {
+      toggleVisible(true);
+    }
+  }, [defaultShowPicker]);
+
+  useEffect(() => {
+    if (visible) {
+      ref.current?.focus();
+    }
+  }, [visible]);
+
   return (
     <NodeViewWrapper as="span" className={cls(styles.wrap, 'status')}>
       <NodeViewContent />
       {isEditable ? (
         <Popover
           showArrow
+          visible={visible}
+          onVisibleChange={onVisibleChange}
           content={
-            <>
+            <div style={{ width: 216 }}>
               <div style={{ marginBottom: 8 }}>
-                <Input autofocus placeholder="输入状态" onChange={(v) => updateAttributes({ text: v })} />
+                <Input ref={ref} placeholder="输入状态" onChange={(v) => updateAttributes({ text: v })} />
               </div>
-              <Space>
-                {['grey', 'red', 'green', 'orange', 'purple', 'teal'].map((color) => {
-                  return (
-                    <Tag
-                      key={color}
-                      style={{ width: 24, height: 24, cursor: 'pointer' }}
-                      type="solid"
-                      color={color as unknown as any}
-                      onClick={() => updateAttributes({ color })}
-                    ></Tag>
-                  );
-                })}
-              </Space>
-            </>
+              <Collapsible isOpen={isOpen} collapseHeight={28}>
+                <Space wrap={true}>
+                  {colors.map((color) => {
+                    return (
+                      <Tag
+                        key={color}
+                        style={{ width: 24, height: 24, cursor: 'pointer', background: color }}
+                        type="solid"
+                        onClick={() => updateAttributes({ color })}
+                      />
+                    );
+                  })}
+                </Space>
+              </Collapsible>
+              <div style={{ textAlign: 'right', marginTop: 8 }}>
+                <Button size={'small'} onClick={toggleOpen}>
+                  {isOpen ? '收起' : '更多'}
+                </Button>
+              </div>
+            </div>
           }
           trigger="click"
         >