From 10de10d1de2b02d3729415f9f398398c2ff3f62d Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Tue, 22 Dec 2020 19:29:35 +0100
Subject: [PATCH] fix: mobile dropdown button menu
---
src/components/Button.jsx | 7 +--
.../dropdown-button/DropdownButton.jsx | 48 +++++++++++++++++++
.../dropdown-button/DropdownButtonItem.jsx | 11 +++++
src/components/dropdown-button/index.js | 2 +
src/containers/AddAnnouncementForm.jsx | 1 +
src/containers/AddPostForm.jsx | 45 +++++++----------
6 files changed, 81 insertions(+), 33 deletions(-)
create mode 100644 src/components/dropdown-button/DropdownButton.jsx
create mode 100644 src/components/dropdown-button/DropdownButtonItem.jsx
create mode 100644 src/components/dropdown-button/index.js
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index de5690f..e99c8a7 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -4,10 +4,8 @@ import classNames from "classnames";
const Button = ({
className,
- iconWrapperClassName,
icon,
color = "black",
- iconChildren = null,
hoverActive = true,
fullwidth = false,
loading = false,
@@ -27,15 +25,12 @@ const Button = ({
className
);
- const iconWrapperClass = classNames("btn__icon", iconWrapperClassName);
-
const inner = (
<div className="btn__body-wrap">
<div className="btn__body">{children}</div>
{!!icon && (
- <div className={iconWrapperClass}>
+ <div className="btn__icon">
<i className={icon}></i>
- {iconChildren}
</div>
)}
</div>
diff --git a/src/components/dropdown-button/DropdownButton.jsx b/src/components/dropdown-button/DropdownButton.jsx
new file mode 100644
index 0000000..bb4de55
--- /dev/null
+++ b/src/components/dropdown-button/DropdownButton.jsx
@@ -0,0 +1,48 @@
+import React from "react";
+import classNames from "classnames";
+
+const DropdownButton = ({
+ className,
+ color = "black",
+ hoverActive = true,
+ fullwidth = false,
+ loading = false,
+ disabled = false,
+ items,
+ children,
+ onClick,
+ ...props
+}) => {
+ const btnClass = classNames(
+ "btn btn--icon",
+ `btn--${color}`,
+ {
+ "btn--hoveractive": hoverActive,
+ "btn--fullwidth md:btn--autowidth": fullwidth,
+ "btn--loading": loading,
+ },
+ className
+ );
+
+ const inner = (
+ <div className="btn__body-wrap">
+ <button className="btn__body" onClick={onClick} disabled={disabled}>
+ {children}
+ </button>
+ <button className="btn__icon dropdown-button">
+ <i className="ico--chevron-down"></i>
+ <ul className="dropdown-button__choices bg-white text-black whitespace-no-wrap">
+ {items}
+ </ul>
+ </button>
+ </div>
+ );
+
+ return (
+ <div className={btnClass} {...props}>
+ {inner}
+ </div>
+ );
+};
+
+export default DropdownButton;
diff --git a/src/components/dropdown-button/DropdownButtonItem.jsx b/src/components/dropdown-button/DropdownButtonItem.jsx
new file mode 100644
index 0000000..5deb95f
--- /dev/null
+++ b/src/components/dropdown-button/DropdownButtonItem.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const DropdownButtonItem = ({ onClick, children }) => {
+ return (
+ <li className="dropdown-button__choice hover:bg-grey-125" onClick={onClick}>
+ <span className="block px-4 py-3">{children}</span>
+ </li>
+ );
+};
+
+export default DropdownButtonItem;
diff --git a/src/components/dropdown-button/index.js b/src/components/dropdown-button/index.js
new file mode 100644
index 0000000..e99bbad
--- /dev/null
+++ b/src/components/dropdown-button/index.js
@@ -0,0 +1,2 @@
+export { default as DropdownButton } from "./DropdownButton";
+export { default as DropdownButtonItem } from "./DropdownButtonItem";
diff --git a/src/containers/AddAnnouncementForm.jsx b/src/containers/AddAnnouncementForm.jsx
index 2a3f5fb..195ef9a 100644
--- a/src/containers/AddAnnouncementForm.jsx
+++ b/src/containers/AddAnnouncementForm.jsx
@@ -137,6 +137,7 @@ const AddAnnouncementForm = ({ className }) => {
hoverActive
loading={adding}
disabled={adding}
+ fullwidth
>
Přidat oznámení
</Button>
diff --git a/src/containers/AddPostForm.jsx b/src/containers/AddPostForm.jsx
index 5d39a85..af2996f 100644
--- a/src/containers/AddPostForm.jsx
+++ b/src/containers/AddPostForm.jsx
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import { addPost, addProposal } from "actions/posts";
-import Button from "components/Button";
+import { DropdownButton, DropdownButtonItem } from "components/dropdown-button";
import ErrorMessage from "components/ErrorMessage";
import MarkdownEditor from "components/mde/MarkdownEditor";
import { useActionState } from "hooks";
@@ -50,27 +50,6 @@ const AddPostForm = ({ className }) => {
setType("procedure-proposal");
};
- const buttonDropdownActionList = (
- <ul className="dropdown-button__choices bg-white text-black whitespace-no-wrap">
- {type === "post" && (
- <li
- className="dropdown-button__choice hover:bg-grey-125"
- onClick={setTypeProposal}
- >
- <span className="block px-4 py-3">Navrhnout postup</span>
- </li>
- )}
- {type === "procedure-proposal" && (
- <li
- className="dropdown-button__choice hover:bg-grey-125"
- onClick={setTypePost}
- >
- <span className="block px-4 py-3">Přidat příspěvek</span>
- </li>
- )}
- </ul>
- );
-
return (
<div className={className}>
{addingPostError && (
@@ -100,18 +79,30 @@ const AddPostForm = ({ className }) => {
/>
<div className="space-x-4">
- <Button
+ <DropdownButton
onClick={onAdd}
disabled={addingPost || addingProposal}
loading={addingPost || addingProposal}
+ fullwidth
+ items={
+ <>
+ {type === "post" && (
+ <DropdownButtonItem onClick={setTypeProposal}>
+ Navrhnout postup
+ </DropdownButtonItem>
+ )}
+ {type === "procedure-proposal" && (
+ <DropdownButtonItem onClick={setTypePost}>
+ Přidat příspěvek
+ </DropdownButtonItem>
+ )}
+ </>
+ }
hoverActive
- icon="ico--chevron-down"
- iconWrapperClassName="dropdown-button"
- iconChildren={buttonDropdownActionList}
>
{type === "post" && "Přidat příspěvek"}
{type === "procedure-proposal" && "Navrhnout postup"}
- </Button>
+ </DropdownButton>
<span className="text-sm text-grey-200 hidden lg:inline">
Pro pokročilejší formátování můžete používat{" "}
--
GitLab