@adeelasif/awesome-editor/dist/Editor/Actions/Banner.js

A full fledge web based photo editor

import React from "react";
import "semantic-ui-css/semantic.min.css";
import { Menu } from "semantic-ui-react"; // Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
// Modal.setAppElement('#yourAppElement')

const Presets = [{
  name: "None",
  action: "none"
}, {
  name: "Pill",
  action: "pill"
}, {
  name: "Circle",
  action: "Circle"
}, {
  name: "Rectangle",
  action: "rectangle"
}, {
  name: "Ribbon",
  action: "ribbon"
}, {
  name: "Bookmark",
  action: "bookmark"
}, {
  name: "Header",
  action: "header"
}];
export const Banner = props => {
  const [activeItem, setActiveItem] = React.useState(null);

  const handleItemClick = (e, {
    name
  }) => {
    setActiveItem(name);
  };

  const applyFilter = filter => {// filter !== "original" &&
    //   global.Caman(`#${props.imageId}`, function () {
    //     this[filter]();
    //     this.render(function () {
    //       // alert("Done!");
    //     });
    //   });
  }; // console.log("Editor -> activeItem", activeItem);


  React.useEffect(() => {// console.log("Filters -> global.caman", global.Caman);
  });
  return /*#__PURE__*/React.createElement(Menu, {
    vertical: true,
    className: "filter-menu"
  }, Presets.map((filter, index) => /*#__PURE__*/React.createElement(Menu.Item, {
    key: index,
    name: filter.name,
    active: activeItem === filter.name,
    onClick: (e, {
      name
    }) => {
      setActiveItem(name);
      applyFilter(filter.action);
    }
  }, /*#__PURE__*/React.createElement("p", null, filter.name))));
};
export default Banner;