|
|
|
@ -1,17 +1,32 @@
|
|
|
|
|
import { Tooltip } from "antd"; |
|
|
|
|
|
|
|
|
|
type IconWithTipProps = { |
|
|
|
|
type: string,
|
|
|
|
|
text: string, |
|
|
|
|
placement?: "top" | "right", |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const IconWithTip = ({ type, text, placement="top" } : IconWithTipProps) => { |
|
|
|
|
return ( |
|
|
|
|
<Tooltip title={text} placement={placement}> |
|
|
|
|
<span className={`icon icon-${type}`}></span> |
|
|
|
|
</Tooltip> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const Tools = () => { |
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
<div className="marker-tools"> |
|
|
|
|
<span className="icon icon-rect"></span> |
|
|
|
|
<span className="icon icon-circle"></span> |
|
|
|
|
<IconWithTip type="rect" text="矩形工具" /> |
|
|
|
|
<IconWithTip type="circle" text="圆形工具" /> |
|
|
|
|
</div> |
|
|
|
|
<div className="common-tools"> |
|
|
|
|
<div className="tools-group"> |
|
|
|
|
<span className="icon icon-search"></span> |
|
|
|
|
<IconWithTip type="search" text="搜索定位" placement="right" /> |
|
|
|
|
</div> |
|
|
|
|
<div className="tools-group"> |
|
|
|
|
<span className="icon icon-select"></span> |
|
|
|
|
<IconWithTip type="select" text="选择" placement="right" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</> |
|
|
|
|