temp storage

Author: GeorgeZhang2035

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

@@ -1,25 +1,20 @@
-import {
-  Alert,
-  Button,
-  Divider,
-  H5,
-  H6,
-  InputGroup,
-  Intent,
-} from '@blueprintjs/core'
+import { Button, Divider, H6, InputGroup, Intent } from '@blueprintjs/core'
 
-import { useAtom } from 'jotai'
+import { useAtomValue } from 'jotai'
 import { FC, useMemo, useState } from 'react'
 
 import { AppToaster } from 'components/Toaster'
 import { OPERATORS, PROFESSIONS } from 'models/operator'
 import { favGroupAtom } from 'store/useFavGroups'
 
-import { Group } from '../EditorSheet'
-import { SheetContainerSkeleton } from './SheetContainerSkeleton'
+import { Group, Operator } from '../EditorSheet'
+import {
+  SheetContainerSkeleton,
+  SheetContainerSkeletonProps,
+} from './SheetContainerSkeleton'
 import { GroupNoData } from './SheetNoneData'
 import { useSheet } from './SheetProvider'
-import { SheetGroupItem } from './sheetGroup/SheetGroupItem'
+import { SheetGroupItem, SheetGroupItemProp } from './sheetGroup/SheetGroupItem'
 
 export interface SheetGroupProps {}
 
@@ -73,46 +68,32 @@ const EditorGroupName: FC = () => {
 const SheetGroup: FC<SheetGroupProps> = () => {
   const { existedGroups, existedOperators } = useSheet()
 
-  const [coverGroup, setCoverGroup] = useState<Group>()
-
-  const defaultGroup = useMemo<Group[]>(() => {
-    const result: Group[] = []
-    PROFESSIONS.forEach((proItem) => {
-      proItem.sub?.forEach((subProItem) => {
-        const operators = existedOperators.filter(
-          (opItem) =>
-            OPERATORS.find((opInfoItem) => opInfoItem.name === opItem.name)
-              ?.subProf === subProItem.id,
-        )
-        if (operators.length) {
-          const groupName = proItem.name + '-' + subProItem.name
-          if (!existedGroups.find(({ name }) => name === groupName))
-            result.push({
-              name: groupName,
-              opers: operators,
-            })
-        }
-      })
-    })
-    const otherOperators = existedOperators.filter(
-      (opItem) =>
-        !OPERATORS.find((opInfoItem) => opInfoItem.name === opItem.name),
-    )
-    if (otherOperators.length)
-      result.push({
-        name: '其它',
-        opers: otherOperators,
-      })
-    return result
-  }, [existedOperators, existedGroups])
-
-  const updateFavGroup = (value: Group) =>
-    setFavGroups([
-      ...[...favGroups].filter(({ name }) => name !== value.name),
-      { ...value },
-    ])
+  const defaultGroup = useMemo<Group[]>(
+    () =>
+      Object.entries(
+        existedOperators.reduce(
+          (acc, { name, ...rest }) => {
+            const { prof = '', subProf = '' } =
+              OPERATORS.find(({ name: OPERName }) => OPERName === name) || {}
+            const profInfo = PROFESSIONS.find(({ id }) => id === prof)
+            const subProfName = profInfo?.sub?.find(
+              ({ id }) => id === subProf,
+            )?.name
+            const key = (profInfo?.name || '其它') + '-' + (subProfName || '')
+            if (!acc[key]) acc[key] = []
+            acc[key].push({ name, ...rest })
+            return acc
+          },
+          {} as Record<string, Operator[]>,
+        ),
+      ).map(([key, value]) => ({
+        name: key,
+        opers: value,
+      })),
+    [existedOperators],
+  )
 
-  const [favGroups, setFavGroups] = useAtom(favGroupAtom)
+  const favGroups = useAtomValue(favGroupAtom)
 
   return (
     <>
@@ -127,60 +108,38 @@ const SheetGroup: FC<SheetGroupProps> = () => {
             >
               <EditorGroupName />
             </SheetContainerSkeleton>
-            <SheetContainerSkeleton title="已设置的干员组" icon="cog" mini>
-              <div>
-                {existedGroups.length ? (
-                  <>
-                    {existedGroups.map((item) => (
-                      <SheetGroupItem groupInfo={item} itemType="selected" />
-                    ))}
-                    <H6 className="my-2 text-center">
-                      已显示全部 {existedGroups.length} 个干员组
-                    </H6>
-                  </>
-                ) : (
-                  GroupNoData
-                )}
-              </div>
-            </SheetContainerSkeleton>
+            <SheetGroupItemsWithSkeleton
+              title="已设置的干员组"
+              icon="cog"
+              mini
+              groups={existedGroups}
+              itemType="selected"
+            />
+            {!!existedGroups.length && (
+              <H6 className="my-2 text-center">
+                已显示全部 {existedGroups.length} 个干员组
+              </H6>
+            )}
           </div>
         </div>
         <Divider />
         <div className="flex-1">
-          <SheetContainerSkeleton title="推荐分组" icon="thumbs-up" mini>
-            <div>
-              {defaultGroup.length
-                ? defaultGroup.map((item) => (
-                    <SheetGroupItem groupInfo={item} itemType="recommend" />
-                  ))
-                : GroupNoData}
-            </div>
-          </SheetContainerSkeleton>
-          <SheetContainerSkeleton title="收藏分组" icon="star" mini>
-            <div>
-              {favGroups.length
-                ? favGroups.map((item) => (
-                    <SheetGroupItem groupInfo={item} itemType="fav" />
-                  ))
-                : GroupNoData}
-            </div>
-          </SheetContainerSkeleton>
+          <SheetGroupItemsWithSkeleton
+            title="推荐分组"
+            icon="thumbs-up"
+            mini
+            groups={defaultGroup}
+            itemType="recommend"
+          />
+          <SheetGroupItemsWithSkeleton
+            title="收藏分组"
+            icon="star"
+            mini
+            groups={favGroups}
+            itemType="fav"
+          />
         </div>
       </div>
-      <Alert
-        isOpen={!!coverGroup}
-        confirmButtonText="是"
-        cancelButtonText="否"
-        icon="error"
-        intent={Intent.DANGER}
-        onConfirm={() => updateFavGroup(coverGroup as Group)}
-        onClose={() => setCoverGroup(undefined)}
-      >
-        <div>
-          <H5>收藏干员组: </H5>
-          <p>检测到同名的已收藏干员组 {coverGroup?.name}，是否覆盖？</p>
-        </div>
-      </Alert>
     </>
   )
 }
@@ -190,3 +149,20 @@ export const SheetGroupContainer: FC<SheetGroupProps> = () => (
     <SheetGroup />
   </SheetContainerSkeleton>
 )
+
+const SheetGroupItemsWithSkeleton: FC<
+  SheetContainerSkeletonProps & {
+    groups: SheetGroupItemProp['groupInfo'][]
+    itemType: SheetGroupItemProp['itemType']
+  }
+> = ({ groups, itemType, ...sheetContainerSkeletonProps }) => (
+  <SheetContainerSkeleton {...sheetContainerSkeletonProps}>
+    <div>
+      {groups.length
+        ? groups.map((item) => (
+            <SheetGroupItem groupInfo={item} itemType={itemType} />
+          ))
+        : GroupNoData}
+    </div>
+  </SheetContainerSkeleton>
+)

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

@@ -5,8 +5,6 @@ import { EditorPerformerGroupProps } from '../EditorPerformerGroup'
 import { EditorPerformerOperatorProps } from '../EditorPerformerOperator'
 import { Group, Operator } from '../EditorSheet'
 
-export interface OperatorInSheet {}
-
 export interface SheetProviderProp {
   submitOperator: EditorPerformerOperatorProps['submit']
   existedOperators: Operator[]

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

@@ -15,7 +15,7 @@ export const OperatorInGroupItem: FC<OperatorInGroupItemProp> = ({
   onOperatorSkillChange,
   operatorInfo: { name, ...restField },
 }) => (
-  <Card className="flex items-center w-full h-full justify-between">
+  <Card className="flex items-center mb-1 w-full h-full justify-between">
     <>
       <div className="flex items-center">
         <OperatorAvatar name={name} size="large" />

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

@@ -13,7 +13,7 @@ import { Popover2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
 import { useAtom } from 'jotai'
-import { isEqual, omit } from 'lodash-es'
+import { cloneDeep, isEqual, omit } from 'lodash-es'
 import { FC, ReactNode, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
@@ -33,6 +33,7 @@ import {
   SheetGroupOperatorSelectProp,
   SheetGroupOperatorSelectTrigger,
 } from './SheetGroupOperatorSelect'
+import { SheetOperatorEditor } from './SheetOperatorEditor'
 
 export interface GroupItemProps
   extends SheetGroupOperatorSelectProp,
@@ -293,13 +294,7 @@ export const SheetGroupItem: FC<SheetGroupItemProp> = ({
                 />
               ))
             : OperatorNoData}
-          {/* {editable && (
-            <SheetGroupOperatorSelectTrigger
-              groupInfo={groupInfo}
-              groupUpdateHandle={groupUpdateHandle}
-              {...rest}
-            />
-          )} */}
+          {selected && <SheetOperatorEditor {...groupInfo} />}
         </div>
       </Collapse>
     </Card>
@@ -329,10 +324,13 @@ const useSheetGroupItemController = ({
       const pinned = isEqual({ name, opers }, findFavByName)
 
       const onPinChange: GroupPinOptionProp['onPinChange'] = () => {
+        const newFavGroup = [
+          ...favGroup.filter(({ name: nameInFav }) => nameInFav !== name),
+        ]
         setFavGroup(
           pinned
-            ? favGroup.filter(({ name: nameInFav }) => nameInFav !== name)
-            : [...favGroup, { name, opers, ...rest }],
+            ? newFavGroup
+            : [...newFavGroup, cloneDeep({ name, opers, ...rest })],
         )
       }
       return {