suranadira-menu/src/SuranadiraMenu.js

A collection of Suranadira Icons.

import React, { useEffect } from "react";
import SuranadiraIcon from "../../suranadira-icon/src";

// Suranadira Icon
const SuranadiraMenu = args => {
  // Defaults
  let defaults = {
    name: "suranadiraMenu1",
    unit: 10,
    direction: "horizontal",
    visible: true,
    paddingLeft: 30,
    paddingRight: 30,
    color: "#fff",
    colorPressed: "#999",
    background: "#777",
    position: "relative",
    left: 0,
    width: window.innerWidth,
    height: 80,
    maxWidth: 900,
    items: [
      {
        name: "menuItem1",
        composition: ["Z", "IA", "VI", "I"],
        onClick: () => {}
      }
    ],
    styles: {},
    onResize: () => {}
  };

  // Properties
  let properties = Object.assign(defaults, args);
  if (typeof args.styles !== "undefined") {
    properties = Object.assign(properties, args.styles);
  }

  // Append new message to the chat script
  useEffect(() => {
    if (properties.direction === "vertical") {
      properties.onResize({
        menu: properties.name,
        width: properties.width,
        height: properties.height
      });
    }
    // eslint-disable-next-line
  }, [properties.width, properties.height]);

  // Limit menu width
  const limitMenuWidth = () => {
    // Limit component's width
    if (properties.width > properties.maxWidth)
      properties.width = properties.maxWidth;
  };

  const setMenuHeight = () => {
    if (properties.direction === "horizontal") {
      properties.height = properties.unit * 6;
    } else {
      properties.width =
        properties.unit * 8 + properties.paddingLeft + properties.paddingRight; // 6
    }
  };

  setMenuHeight();
  limitMenuWidth();

  return (
    <div
      className="SuranadiraMenu"
      style={{
        background: properties.background,
        display: properties.visible ? "inline-block" : "none",
        position: properties.position,
        zIndex: properties.position === "relative" ? 0 : 1,
        left: properties.left + "px",
        // top: 0,
        // left: 100 + "px",
        width: properties.width + "px",
        height: properties.height + "px",
        textAlign: "left",
        overflow: "hidden",
        boxSizing: "border-box",
        paddingLeft: properties.paddingLeft + "px",
        paddingRight: properties.paddingRight + "px"
      }}
    >
      {properties.items.map(item => (
        <SuranadiraIcon
          key={item.name}
          name={item.name}
          color={
            typeof item.color === "undefined" ? properties.color : item.color
          }
          colorPressed={
            typeof item.colorPressed === "undefined"
              ? properties.colorPressed
              : item.colorPressed
          }
          background={
            typeof item.background === "undefined"
              ? properties.background
              : item.background
          }
          unit={properties.unit}
          elementWidth={properties.elementWidth}
          lineWidth={properties.lineWidth}
          float={typeof item.float === "undefined" ? "none" : item.float}
          composition={item.composition}
          hideIfEmpty={true}
          onClick={item.onClick}
        />
      ))}
    </div>
  );
};
export default SuranadiraMenu;