temp storage

Author: GeorgeZhang2035

src/components/editor/operator/sheet/SheetGroup.tsx

@@ -20,7 +20,7 @@ import { Group, Operator } from '../EditorSheet'
 import { SheetContainerSkeleton } from './SheetContainerSkeleton'
 import { GroupNoData } from './SheetNoneData'
 import { useSheet } from './SheetProvider'
-import { GroupItem } from './sheetGroup/SheetGroupItem'
+import { GroupItem, SheetGroupItem } from './sheetGroup/SheetGroupItem'
 
 export interface SheetGroupProps {}
 
@@ -199,17 +199,18 @@ const SheetGroup: FC<SheetGroupProps> = () => {
                 {existedGroups.length ? (
                   <>
                     {existedGroups.map((item) => (
-                      <GroupItem
-                        key={item.name}
-                        existedGroup={existedGroups}
-                        existedOperator={existedOperators}
-                        groupInfo={item}
-                        exist={checkGroupExisted(item.name)}
-                        pinned={checkGroupPinned(item)}
-                        groupRemoveHandle={groupRemoveHandle}
-                        groupPinHandle={groupPinHandle}
-                        groupUpdateHandle={groupUpdateHandle}
-                      />
+                      // <GroupItem
+                      //   key={item.name}
+                      //   existedGroup={existedGroups}
+                      //   existedOperator={existedOperators}
+                      //   groupInfo={item}
+                      //   exist={checkGroupExisted(item.name)}
+                      //   pinned={checkGroupPinned(item)}
+                      //   groupRemoveHandle={groupRemoveHandle}
+                      //   groupPinHandle={groupPinHandle}
+                      //   groupUpdateHandle={groupUpdateHandle}
+                      // />
+                      <SheetGroupItem groupInfo={item} itemType="selected" />
                     ))}
                     <H6 className="my-2 text-center">
                       已显示全部 {existedGroups.length} 个干员组

src/components/editor/operator/sheet/SheetOperatorSkillAbout.tsx

@@ -127,6 +127,7 @@ export const SkillAboutTrigger = ({
         if (operator) e.stopPropagation()
       }}
       role="presentation"
+      className="cursor-pointer"
     >
       <Popover2 content={SkillAboutForm} disabled={!operator}>
         {SkillAboutTrigger}

src/components/editor/operator/sheet/sheetGroup/OperatorInGroupItem.tsx

@@ -0,0 +1,34 @@
+import { Card } from '@blueprintjs/core'
+
+import { FC } from 'react'
+
+import { OperatorAvatar } from '../../EditorOperator'
+import { Operator } from '../../EditorSheet'
+import { SkillAboutTrigger } from '../SheetOperatorSkillAbout'
+
+export interface OperatorInGroupItemProp {
+  operatorInfo: Operator
+  onOperatorSkillChange?: (operatorInfo: Operator) => void
+}
+
+export const OperatorInGroupItem: FC<OperatorInGroupItemProp> = ({
+  onOperatorSkillChange,
+  operatorInfo: { name, ...restField },
+}) => (
+  <Card className="flex items-center w-full h-full justify-between">
+    <>
+      <div className="flex items-center">
+        <OperatorAvatar name={name} size="large" />
+        <p className="font-bold leading-none text-center truncate ml-2 mr-auto">
+          {name}
+        </p>
+      </div>
+      {!!onOperatorSkillChange && (
+        <SkillAboutTrigger
+          operator={{ name, ...restField }}
+          onSkillChange={onOperatorSkillChange}
+        />
+      )}
+    </>
+  </Card>
+)

src/components/editor/operator/sheet/sheetGroup/SheetGroupItem.tsx

@@ -12,15 +12,19 @@ import {
 import { Popover2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
-import { useRef, useState } from 'react'
+import { useAtom, useSetAtom } from 'jotai'
+import { FC, useMemo, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
 import { CardDeleteOption } from 'components/editor/CardOptions'
+import { favGroupAtom } from 'store/useFavGroups'
 
 import { Group, Operator } from '../../EditorSheet'
 import { GroupListModifyProp } from '../SheetGroup'
 import { OperatorNoData } from '../SheetNoneData'
 import { OperatorItem } from '../SheetOperatorItem'
+import { useSheet } from '../SheetProvider'
+import { OperatorInGroupItem } from './OperatorInGroupItem'
 import {
   CollapseButton,
   SheetGroupOperatorSelectProp,
@@ -64,16 +68,20 @@ export const GroupItem = ({
       <div className="w-full pt-1">
         {groupInfo.opers?.length
           ? groupInfo.opers?.map((item) => (
-              <OperatorItem
-                key={item.name}
-                operator={item}
-                name={item.name}
-                selected
-                scaleDisable
-                interactive={false}
-                horizontal
-                readOnly={!exist}
-                onSkillChange={changeGroupedOperatorSkillHandle}
+              // <OperatorItem
+              //   key={item.name}
+              //   operator={item}
+              //   name={item.name}
+              //   selected
+              //   scaleDisable
+              //   interactive={false}
+              //   horizontal
+              //   readOnly={!exist}
+              //   onSkillChange={changeGroupedOperatorSkillHandle}
+              // />
+              <OperatorInGroupItem
+                operatorInfo={item}
+                onOperatorSkillChange={changeGroupedOperatorSkillHandle}
               />
             ))
           : !editable && OperatorNoData}
@@ -147,13 +155,14 @@ export const GroupItem = ({
 
 const GroupTitle = ({
   groupTitle,
-  editable,
+  // editable,
   renameSubmit,
 }: {
   editable: boolean
-  renameSubmit: (newName: string) => void
+  renameSubmit?: (newName: string) => void
   groupTitle: string
 }) => {
+  const editable = !!renameSubmit
   const [editName, setEditName] = useState('')
   const [nameEditState, setNameEditState] = useState(false)
   const [alertState, setAlertState] = useState(false)
@@ -200,7 +209,7 @@ const GroupTitle = ({
         className="flex items-center"
         onSubmit={handleSubmit(() => {
           ignoreBlur.current = true
-          renameSubmit(editName || groupTitle)
+          renameSubmit?.(editName || groupTitle)
           setNameEditState(false)
           inputRef.current?.blur()
         })}
@@ -240,3 +249,79 @@ const GroupTitle = ({
     </>
   )
 }
+
+type ItemType = 'recommend' | 'selected' | 'fav'
+
+export interface SheetGroupItemProp {
+  groupInfo: Group
+  itemType: ItemType
+}
+
+export const SheetGroupItem: FC<SheetGroupItemProp> = ({
+  groupInfo,
+  itemType,
+}) => {
+  const { selected, onGroupNameChange } = useSheetGroupItemController({
+    groupInfo,
+    itemType,
+  })
+
+  return (
+    <Card interactive={!selected} className="mt-1 mx-0.5">
+      <div className="flex items-center justify-between">
+        <GroupTitle
+          groupTitle={groupInfo.name}
+          editable
+          renameSubmit={onGroupNameChange}
+        />
+        <div></div>
+      </div>
+    </Card>
+  )
+}
+
+type SheetGroupItemController = {
+  selected: boolean
+  onGroupNameChange: ((name: string) => void) | undefined
+  defaultOperatorCollapseOpen: boolean
+}
+
+const useSheetGroupItemController = ({
+  groupInfo,
+  itemType,
+}: SheetGroupItemProp): SheetGroupItemController => {
+  const { submitGroup } = useSheet()
+  const [favGroup, setFavGroup] = useAtom(favGroupAtom)
+
+  switch (itemType) {
+    case 'selected':
+      return {
+        selected: true,
+        onGroupNameChange: (name: string) =>
+          submitGroup({ ...groupInfo, name }, undefined, true),
+        defaultOperatorCollapseOpen: true,
+      }
+    case 'recommend':
+      return {
+        selected: false,
+        onGroupNameChange: undefined,
+        defaultOperatorCollapseOpen: false,
+      }
+    case 'fav':
+      return {
+        selected: false,
+        onGroupNameChange: (name: string) =>
+          setFavGroup([
+            ...favGroup.filter(({ name: favName }) => favName !== name),
+            { ...groupInfo, name },
+          ]),
+        defaultOperatorCollapseOpen: false,
+      }
+    default:
+      return {
+        selected: false,
+        onGroupNameChange: undefined,
+        defaultOperatorCollapseOpen: false,
+      }
+  }
+}

src/components/editor/operator/sheet/sheetGroup/SheetGroupOperatorSelect.tsx

@@ -219,10 +219,10 @@ interface CollapseButtonProps extends ButtonProps {
   isCollapse: boolean
 }
 
-export const CollapseButton = ({
+export const CollapseButton: FC<CollapseButtonProps> = ({
   isCollapse,
   ...buttonProps
-}: CollapseButtonProps) => (
+}) => (
   <Button
     {...{
       ...buttonProps,