Merge pull request #165 from roo12589/dev

Author: GalvinGao

src/components/editor/action/EditorActionAdd.tsx

@@ -28,14 +28,14 @@ import { CopilotDocV1 } from 'models/copilot.schema'
 
 import { useLevels } from '../../../apis/arknights'
 import { findLevelByStageName } from '../../../models/level'
-import { FactItem } from '../../FactItem'
 import { EditorOperatorName } from '../operator/EditorOperator'
 import { EditorOperatorSkillUsage } from '../operator/EditorOperatorSkillUsage'
 import {
   EditorActionPreDelay,
   EditorActionRearDelay,
 } from './EditorActionDelay'
 import { EditorActionDistance } from './EditorActionDistance'
+import { EditorActionModule } from './EditorActionModule'
 
 export interface EditorActionAddProps {
   control: Control<CopilotDocV1.Operation>
@@ -121,7 +121,7 @@ export const EditorActionAdd = ({
 
   return (
     <form onSubmit={onSubmit}>
-      <Card className="mb-2 pb-8 pt-4 overflow-auto h-[calc(100vh-6rem)]">
+      <Card className="mb-2 pb-8 pt-4 overflow-auto">
         <div className="flex items-center mb-4">
           <CardTitle className="mb-0" icon={isNew ? 'add' : 'edit'}>
             <span>{isNew ? '添加' : '编辑'}动作</span>
@@ -258,8 +258,9 @@ export const EditorActionAdd = ({
 
         <div className="h-px w-full bg-gray-200 mt-4 mb-6" />
 
-        <FactItem title="执行条件" icon="stopwatch" className="font-bold" />
-
+        <EditorActionModule
+          title="执行条件" icon="stopwatch" className="font-bold" 
+        >
         <div className="flex flex-wrap">
           <EditorActionExecPredicateKills control={control} />
           <EditorActionExecPredicateCooling control={control} />
@@ -272,39 +273,43 @@ export const EditorActionAdd = ({
           <EditorActionPreDelay control={control} />
           <EditorActionRearDelay control={control} />
         </div>
-
+        </EditorActionModule>
         <div className="h-px w-full bg-gray-200 mt-4 mb-6" />
 
-        <FactItem title="日志" icon="annotation" className="font-bold" />
-
-        <div className="flex flex-col w-full">
-          <EditorActionDocColor
-            shouldUnregister
-            control={control}
-            name="docColor"
-          />
-
-          <FormField
-            label="描述"
-            field="doc"
-            control={control}
-            ControllerProps={{
-              render: ({ field }) => (
-                <TextArea
-                  fill
-                  rows={2}
-                  growVertically
-                  large
-                  id="doc"
-                  placeholder="描述，可选。会显示在界面上，没有实际作用"
-                  {...field}
-                  value={field.value || ''}
-                />
-              ),
-            }}
-          />
-        </div>
+        <EditorActionModule
+          title="日志"
+          icon="annotation"
+          className="font-bold"
+        >
+          <div className="flex flex-col w-full">
+            <EditorActionDocColor
+              shouldUnregister
+              control={control}
+              name="docColor"
+            />
 
+            <FormField
+              label="描述"
+              field="doc"
+              control={control}
+              ControllerProps={{
+                render: ({ field }) => (
+                  <TextArea
+                    fill
+                    rows={2}
+                    growVertically
+                    large
+                    id="doc"
+                    placeholder="描述，可选。会显示在界面上，没有实际作用"
+                    {...field}
+                    value={field.value || ''}
+                  />
+                ),
+              }}
+            />
+          </div>
+        </EditorActionModule>
+        
         <div className="mt-4 flex">
           <Button intent="primary" type="submit" icon={isNew ? 'add' : 'edit'}>
             {isNew ? '添加' : '保存'}

src/components/editor/action/EditorActionModule.tsx

@@ -0,0 +1,41 @@
+import { Icon, IconName } from '@blueprintjs/core'
+
+import clsx from 'clsx'
+import { ReactNode, useState } from 'react'
+import { FCC } from 'types'
+
+import { FactItem } from 'components/FactItem'
+
+export const EditorActionModule: FCC<{
+  icon?: IconName
+  title?: ReactNode
+  dense?: boolean
+  relaxed?: boolean
+  className?: string
+}> = ({ children, ...props }) => {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  return (
+    <>
+      <FactItem {...props}>
+        {
+          <Icon
+            icon="chevron-up"
+            className={clsx(
+              'mr-2 text-zinc-500 ml-auto transition-transform cursor-pointer',
+              isCollapsed && 'rotate-180',
+            )}
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          />
+        }
+      </FactItem>
+      <div
+        className={clsx(
+          'overflow-hidden transition-[max-height] duration-[300ms]',
+          isCollapsed ? 'max-h-0' : 'max-h-[499px]',
+        )}
+      >
+        {children}
+      </div>
+    </>
+  )
+}