Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tooltip for deactivated AddProposalButton (#3909) #3916

Open
wants to merge 8 commits into
base: dev
Choose a base branch
from
Open

Tooltip for deactivated AddProposalButton (#3909) #3916

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4b1ed94
Tooltip for deactivated `AddProposalButton` (#3909)
Dec 2, 2022
c09a9f9
tooltipTitle
traumschule Dec 8, 2022
a7dda8f
Merge branch 'dev' into fix/add-proposal-button-3909
Dec 9, 2022
24b9037
useMemo => fix test
Dec 9, 2022
f7461cc
refactor
Dec 9, 2022
33db75f
types
Dec 9, 2022
21a8bae
fix logic
traumschule Jan 29, 2023
8cf5534
pass tooltip to `TransactionButtonWrapper`
Jun 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/ui/src/common/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export interface TooltipPopupProps {
forBig?: boolean
hideOnComponentLeave?: boolean
boundaryClassName?: string
placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
}

export interface DarkTooltipInnerItemProps {
Expand All @@ -52,14 +53,15 @@ export const Tooltip = ({
offset,
hideOnComponentLeave,
boundaryClassName,
placement = 'bottom-start',
}: TooltipProps) => {
const [isTooltipActive, setTooltipActive] = useState(tooltipOpen)
const [referenceElementRef, setReferenceElementRef] = useState<HTMLElement | null>(null)
const [popperElementRef, setPopperElementRef] = useState<HTMLDivElement | null>(null)
const [boundaryElement, setBoundaryElement] = useState<HTMLElement | null>(null)

const { styles, attributes } = usePopper(referenceElementRef, popperElementRef, {
placement: 'bottom-start',
placement,
modifiers: [
{
name: 'offset',
Expand Down
20 changes: 19 additions & 1 deletion packages/ui/src/proposals/components/AddProposalButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, { useCallback } from 'react'
import { useApi } from '@/api/hooks/useApi'
import { TransactionButton } from '@/common/components/buttons/TransactionButton'
import { PlusIcon } from '@/common/components/icons/PlusIcon'
import { Tooltip } from '@/common/components/Tooltip'
import { useFirstObservableValue } from '@/common/hooks/useFirstObservableValue'
import { useModal } from '@/common/hooks/useModal'
import { AddNewProposalModalCall } from '@/proposals/modals/AddNewProposal'
Expand All @@ -23,7 +24,7 @@ export const AddProposalButton = () => {
)
const areProposalSlotsAvailable = api && maxProposals && currentProposals?.lt(maxProposals)

return (
const txButton = () => (
<TransactionButton
style="primary"
size="medium"
Expand All @@ -34,4 +35,21 @@ export const AddProposalButton = () => {
Add new proposal
</TransactionButton>
)

if (!api) return <Tooltip tooltipText="Connecting to api">{txButton()}</Tooltip>

if (!areProposalSlotsAvailable)
return (
<Tooltip
tooltipTitle="MAX_ACTIVE_PROPOSALS"
traumschule marked this conversation as resolved.
Show resolved Hide resolved
tooltipText="The creation of new proposals is currently disabled because the number of deciding or gracing proposals is restricted to 20."
tooltipLinkText="Proposal System Constants"
tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/proposal-system#constants"
placement="bottom-end"
>
{txButton()}
</Tooltip>
)

return txButton()
}