diff --git a/src/components/Button.jsx b/src/components/Button.jsx index de5690f97fee3032f2b35f78c01620736c13e15f..e99c8a78db24ae459e1d45f258170421de09d70e 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 0000000000000000000000000000000000000000..bb4de55e32a76ce5397f7824239f5cc87db24421 --- /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 0000000000000000000000000000000000000000..5deb95ff773e7a445093c87c5a35b4cb9887f796 --- /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 0000000000000000000000000000000000000000..e99bbade902adefd8fd822b34f8b4a81e4040657 --- /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 2a3f5fbaa750a8ca9bc080d8461af17f4577831a..195ef9a64627cfba465ebd86ca87da6f70286fc1 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 5d39a8535cc7628e4ae1808b63414722033267be..af2996feeba7f50401c398af4d2871d784dc1480 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{" "}