mirror of
https://github.com/maputnik/editor.git
synced 2025-12-24 07:00:01 +00:00
c6f599cc61
## Launch Checklist This removes the `@mdi` (material design icons) package and uses the icons from `react-icons`. The icons are not exactly the same, but have the same idea behind them. - [x] Briefly describe the changes in this PR. - [x] Include before/after visuals or gifs if this PR includes visual changes. - [x] Add an entry to `CHANGELOG.md` under the `## main` section. Main changes can be found below. Before: <img width="580" height="780" alt="image" src="https://github.com/user-attachments/assets/e3d5fc8a-bd59-48fe-bdae-31bb290749c8" /> After: <img width="580" height="780" alt="image" src="https://github.com/user-attachments/assets/bacdbdba-9e73-4bef-bd30-26fe946269c1" /> --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import {MdArrowDropDown, MdArrowDropUp} from "react-icons/md";
|
|
import {
|
|
AccordionItem,
|
|
AccordionItemHeading,
|
|
AccordionItemButton,
|
|
AccordionItemPanel,
|
|
} from "react-accessible-accordion";
|
|
|
|
|
|
type LayerEditorGroupProps = {
|
|
"id"?: string
|
|
"data-wd-key"?: string
|
|
title: string
|
|
isActive: boolean
|
|
children: React.ReactElement
|
|
onActiveToggle(active: boolean): unknown
|
|
};
|
|
|
|
|
|
export default class LayerEditorGroup extends React.Component<LayerEditorGroupProps> {
|
|
render() {
|
|
return <AccordionItem uuid={this.props.id}>
|
|
<AccordionItemHeading className="maputnik-layer-editor-group"
|
|
data-wd-key={"layer-editor-group:"+this.props["data-wd-key"]}
|
|
onClick={_e => this.props.onActiveToggle(!this.props.isActive)}
|
|
>
|
|
<AccordionItemButton className="maputnik-layer-editor-group__button">
|
|
<span style={{flexGrow: 1, alignContent: "center"}}>{this.props.title}</span>
|
|
<MdArrowDropUp size={"2em"} className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--up"></MdArrowDropUp>
|
|
<MdArrowDropDown size={"2em"} className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--down"></MdArrowDropDown>
|
|
</AccordionItemButton>
|
|
</AccordionItemHeading>
|
|
<AccordionItemPanel>
|
|
{this.props.children}
|
|
</AccordionItemPanel>
|
|
</AccordionItem>;
|
|
}
|
|
}
|