✨ feat: 添加自定义排序的能力

arvinxx · Apr 9, 2021 · bb70bf4 · bb70bf4
1 parent 49f257d
commit bb70bf4
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/packages/journey-map/src/index.tsx b/packages/journey-map/src/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { FC, CSSProperties } from 'react';
+import type { FC, CSSProperties, ReactNode } from 'react';
 import cls from 'classnames';
 
 import Stage from './Stages';
@@ -8,7 +8,7 @@ import Actions from './Actions';
 import Thoughts from './Thoughts';
 
 import { JourneyMapStore, useJourneyMap } from './useJourneyMap';
-import type { Config, JourneyMapData } from './types';
+import type { Config, JourneyMapData, SectionType } from './types';
 
 import './styles.less';
 
@@ -47,6 +47,22 @@ const JourneyMap: FC<JourneyMapProps> = ({
 }) => {
   const store = useJourneyMap({ data, onChange, title, config });
 
+  const sections: Record<SectionType, ReactNode> = {
+    action: <Actions />,
+    stage: <Stage />,
+    emotion: <Chart />,
+    thought: <Thoughts />,
+    chance: <div />,
+    painSpot: <div />,
+  };
+
+  const arrange = store.config?.arrange || [
+    'stage',
+    'action',
+    'emotion',
+    'thought',
+  ];
+
   return (
     <JourneyMapStore.Provider value={store}>
       <div
@@ -57,10 +73,7 @@ const JourneyMap: FC<JourneyMapProps> = ({
           <div className="avx-journey-map-title">{store.title}</div>
         ) : null}
         <div className="avx-journey-map-content">
-          <Stage />
-          <Actions />
-          <Chart />
-          <Thoughts />
+          {arrange.map((a) => sections[a])}
         </div>
       </div>
     </JourneyMapStore.Provider>

diff --git a/packages/journey-map/src/types/type.ts b/packages/journey-map/src/types/type.ts
@@ -67,7 +67,7 @@ export interface UserAction {
   painSpot?: string[];
 }
 
-type Section =
+export type SectionType =
   | 'stage'
   | 'action'
   | 'emotion'
@@ -94,9 +94,9 @@ export interface Config {
   /**
    * 每个部分的高度
    */
-  height?: Record<Partial<Section>, number>;
+  height?: Record<Partial<SectionType>, number>;
   /**
    * section 的排序
    */
-  arrange?: Partial<Section>[];
+  arrange?: Partial<SectionType>[];
 }
diff --git a/packages/journey-map/src/useJourneyMap.ts b/packages/journey-map/src/useJourneyMap.ts
@@ -11,7 +11,7 @@ export const useJourneyMap = ({
   data,
   onChange,
   title: initTitle,
-  config: initConfig,
+  config: initConfig = {},
 }: StoreParams) => {
   const defaultJourneyMap: JourneyMapData = { stages: [], actions: {} };
 
@@ -21,7 +21,7 @@ export const useJourneyMap = ({
   );
 
   const [title, setTitle] = useState<string>(initTitle);
-  const [config, setConfig] = useState(initConfig || {});
+  const [config, setConfig] = useState(initConfig);
 
   const [store, setStore] = hook;
   /**