Browse Source

初始化目录图层列表

master
Cmen 3 years ago
parent
commit
3b05f38b11
  1. 38
      src/editor/Catalog/index.tsx
  2. 11
      src/editor/Catalog/style.less
  3. 24
      src/store/index.ts
  4. 3
      src/store/selectors.ts

38
src/editor/Catalog/index.tsx

@ -1,20 +1,48 @@
import { Collapse } from "antd"; import { Collapse } from "antd";
import { useSelector } from "react-redux";
import { mapStateSelector } from "@store";
import { IOverlay } from "@store";
import "./style.less"; import "./style.less";
const { Panel } = Collapse; const { Panel } = Collapse;
export type OverlayListProps = {
overlays: IOverlay[];
};
const OverlayList = (props: OverlayListProps) => {
const { overlays } = props;
return (
<>
{overlays.map((overlay, index) => {
return (
<div key={index} className="overlay-item">
{overlay.name}
</div>
);
})}
</>
);
};
const Catalog = () => { const Catalog = () => {
const callback = (key: string | string[]) => console.log(key); // const callback = (key: string | string[]) => console.log(key);
const { rectangles, polygons } = useSelector(mapStateSelector);
return ( return (
<Collapse <Collapse
defaultActiveKey={["1"]} defaultActiveKey={["1"]}
onChange={callback} // onChange={callback}
expandIconPosition="right" expandIconPosition="right"
> >
<Panel header="矩形" key="1"></Panel> <Panel header="矩形" key={1}>
<Panel header="多边形" key="2"></Panel> <OverlayList overlays={rectangles} />
<Panel header="线段" key="3"></Panel> </Panel>
<Panel header="多边形" key={2}>
<OverlayList overlays={polygons} />
</Panel>
</Collapse> </Collapse>
); );
}; };

11
src/editor/Catalog/style.less

@ -2,4 +2,15 @@
padding: 6px 8px; padding: 6px 8px;
font-size: 12px; font-size: 12px;
background-color: #f7fafc; background-color: #f7fafc;
}
.ant-collapse-content > .ant-collapse-content-box{
padding: 4px 12px;
font-size: 12px;
}
.overlay-item{
margin-bottom: 4px;
cursor: pointer;
&:hover, &[data-selected]{
background-color: #f7fafc;
}
} }

24
src/store/index.ts

@ -1,10 +1,11 @@
import { createStore, Store } from "redux"; import { createStore, Store } from "redux";
import { createContext, Context, useContext } from "react"; import { createContext, Context } from "react";
import { reducer, Action } from "./reducers"; import { reducer, Action } from "./reducers";
import { IEditorState } from "./type"; import { IEditorState } from "./type";
import { EditorAction } from "./actions"; import { EditorAction } from "./actions";
export * from "./type"; export * from "./type";
export * from "./selectors";
type IStore = Store<IEditorState, Action>; type IStore = Store<IEditorState, Action>;
const store: IStore = createStore(reducer); const store: IStore = createStore(reducer);
@ -13,29 +14,8 @@ const store: IStore = createStore(reducer);
export { store }; export { store };
// export class Store {
// // editorState: IEditorState;
// // mapState: IMapState;
// constructor() {
// this.editorState = {};
// this.mapState = {
// polygons: [],
// };
// }
// addPolygon() {
// //
// }
// }
export const editorAction = new EditorAction(); export const editorAction = new EditorAction();
export const StoreContext = createContext<IStore | null>( export const StoreContext = createContext<IStore | null>(
null null
) as Context<IStore>; ) as Context<IStore>;
// export const useStore = () => {
// const store = useReduxContext(StoreContext);
// return store;
// };

3
src/store/selectors.ts

@ -0,0 +1,3 @@
import { editorAction, IEditorState } from "@store";
export const mapStateSelector = (state: IEditorState) => state.map;
Loading…
Cancel
Save