From ffef8f78ea1d4ab97b01dd998a506a22c6a69340 Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Thu, 28 Jul 2022 16:45:32 +0300 Subject: [PATCH] ref(polls) Use new button component (#11918) --- css/_polls.scss | 83 +------------ .../base/ui/components/web/Button.tsx | 12 +- .../web/{PollAnswer.js => PollAnswer.tsx} | 66 ++++++----- .../web/{PollCreate.js => PollCreate.tsx} | 109 ++++++++++-------- .../web/{PollsPane.js => PollsPane.tsx} | 19 +-- 5 files changed, 125 insertions(+), 164 deletions(-) rename react/features/polls/components/web/{PollAnswer.js => PollAnswer.tsx} (59%) rename react/features/polls/components/web/{PollCreate.js => PollCreate.tsx} (79%) rename react/features/polls/components/web/{PollsPane.js => PollsPane.tsx} (70%) diff --git a/css/_polls.scss b/css/_polls.scss index 248b939665..f7afa5dc9d 100644 --- a/css/_polls.scss +++ b/css/_polls.scss @@ -291,6 +291,10 @@ ol.poll-result-list { h1, strong ,span { color: #fff; } + + button > span { + color: inherit; + } } .poll-create-label { @@ -363,82 +367,3 @@ ol.poll-result-list { .poll-answer-footer { padding: 8px 0 0 0; } - -.poll-button { - align-items: center; - border: 0; - border-radius: 6px; - font-size: 14px; - font-weight: 600; - display: flex; - justify-content: center; - min-height: 40px; - width: 100%; - - &:disabled { - cursor: initial; - } - - @media (max-width: 580px) { - min-height: 48px; - } -} - -.poll-button-primary { - background-color: #0056E0; - - &:hover { - background-color: #246FE5; - } - - &:active { - background-color: #0045B3; - } - - &:focus { - background-color: #0045B3; - border: 3px solid #99BBF3; - } - - &:disabled { - background-color: #00225A; - color: #858585; - } -} - -.poll-button-secondary { - background-color: #3D3D3D; - - &:hover { - background-color: #525252; - } - - &:active { - background-color: #292929; - } - - &:focus { - background-color: #292929; - border: 3px solid #858585; - } - - &:disabled { - background-color: #141414; - color: #858585; - } -} - -.poll-button-short { - max-width: 132px; -} - -.poll-button-shortest { - max-width: 117px; -} - -.poll-button-short, -.poll-button-shortest { - @media (max-width: 580px) { - min-width: 49%; - } -} diff --git a/react/features/base/ui/components/web/Button.tsx b/react/features/base/ui/components/web/Button.tsx index 1af85e7d75..0173df2760 100644 --- a/react/features/base/ui/components/web/Button.tsx +++ b/react/features/base/ui/components/web/Button.tsx @@ -26,10 +26,15 @@ interface IButtonProps extends ButtonProps { */ id?: string; + /** + * Whether or not the button is a submit form button. + */ + isSubmit?: boolean; + /** * Click callback. */ - onClick: (e?: React.MouseEvent) => void; + onClick?: (e?: React.MouseEvent) => void; /** * Which size the button should be. @@ -178,8 +183,9 @@ const Button = ({ fullWidth, icon, id, + isSubmit, label, - onClick, + onClick = () => null, size = 'medium', testId, type = BUTTON_TYPES.PRIMARY @@ -197,7 +203,7 @@ const Button = ({ disabled = { disabled } { ...(id ? { id } : {}) } onClick = { onClick } - type = 'button'> + type = { isSubmit ? 'submit' : 'button' }> {icon && } diff --git a/react/features/polls/components/web/PollAnswer.js b/react/features/polls/components/web/PollAnswer.tsx similarity index 59% rename from react/features/polls/components/web/PollAnswer.js rename to react/features/polls/components/web/PollAnswer.tsx index a2d5c47303..160aa6ea22 100644 --- a/react/features/polls/components/web/PollAnswer.js +++ b/react/features/polls/components/web/PollAnswer.tsx @@ -1,24 +1,38 @@ -// @flow - +/* eslint-disable lines-around-comment */ import { Checkbox } from '@atlaskit/checkbox'; +import { makeStyles } from '@material-ui/styles'; import React from 'react'; +import Button from '../../../base/ui/components/web/Button'; +import { BUTTON_TYPES } from '../../../base/ui/constants'; +import { Theme } from '../../../base/ui/types'; +// @ts-ignore import { isSubmitAnswerDisabled } from '../../functions'; +// @ts-ignore import AbstractPollAnswer from '../AbstractPollAnswer'; +// @ts-ignore import type { AbstractProps } from '../AbstractPollAnswer'; -const PollAnswer = (props: AbstractProps) => { - const { - creatorName, - checkBoxStates, - poll, - setCheckbox, - skipAnswer, - skipChangeVote, - submitAnswer, - t - } = props; +const useStyles = makeStyles((theme: Theme) => { + return { + buttonMargin: { + marginRight: `${theme.spacing(2)}px` + } + }; +}); + +const PollAnswer = ({ + creatorName, + checkBoxStates, + poll, + setCheckbox, + skipAnswer, + skipChangeVote, + submitAnswer, + t +}: AbstractProps) => { const { changingVote } = poll; + const styles = useStyles(); return (
@@ -32,7 +46,7 @@ const PollAnswer = (props: AbstractProps) => {
    { - poll.answers.map((answer, index) => ( + poll.answers.map((answer: any, index: number) => (
  1. @@ -48,19 +62,19 @@ const PollAnswer = (props: AbstractProps) => { }
- - + fullWidth = { true } + label = { t('polls.answer.submit') } + onClick = { submitAnswer } />
); diff --git a/react/features/polls/components/web/PollCreate.js b/react/features/polls/components/web/PollCreate.tsx similarity index 79% rename from react/features/polls/components/web/PollCreate.js rename to react/features/polls/components/web/PollCreate.tsx index cafab658d3..d10d903839 100644 --- a/react/features/polls/components/web/PollCreate.js +++ b/react/features/polls/components/web/PollCreate.tsx @@ -1,35 +1,49 @@ -// @flow - +/* eslint-disable lines-around-comment */ +import { makeStyles } from '@material-ui/core'; import React, { useCallback, useEffect, useRef, useState } from 'react'; -import { Icon, IconMenu } from '../../../base/icons'; +import Icon from '../../../base/icons/components/Icon'; +import { IconMenu } from '../../../base/icons/svg/index'; +// @ts-ignore import { Tooltip } from '../../../base/tooltip'; +import Button from '../../../base/ui/components/web/Button'; +import { BUTTON_TYPES } from '../../../base/ui/constants'; +import { Theme } from '../../../base/ui/types'; +// @ts-ignore import { ANSWERS_LIMIT, CHAR_LIMIT } from '../../constants'; +// @ts-ignore import AbstractPollCreate from '../AbstractPollCreate'; +// @ts-ignore import type { AbstractProps } from '../AbstractPollCreate'; -const PollCreate = (props: AbstractProps) => { +const useStyles = makeStyles((theme: Theme) => { + return { + buttonMargin: { + marginRight: `${theme.spacing(2)}px` + } + }; +}); - - const { - addAnswer, - answers, - isSubmitDisabled, - moveAnswer, - onSubmit, - question, - removeAnswer, - setAnswer, - setCreateMode, - setQuestion, - t - } = props; +const PollCreate = ({ + addAnswer, + answers, + isSubmitDisabled, + moveAnswer, + onSubmit, + question, + removeAnswer, + setAnswer, + setCreateMode, + setQuestion, + t +}: AbstractProps) => { + const styles = useStyles(); /* * This ref stores the Array of answer input fields, allowing us to focus on them. * This array is maintained by registerfieldRef and the useEffect below. */ - const answerInputs = useRef([]); + const answerInputs = useRef>([]); const registerFieldRef = useCallback((i, r) => { if (r === null) { return; @@ -45,7 +59,7 @@ const PollCreate = (props: AbstractProps) => { * This state allows us to requestFocus asynchronously, without having to worry * about whether a newly created input field has been rendered yet or not. */ - const [ lastFocus, requestFocus ] = useState(null); + const [ lastFocus, requestFocus ] = useState(null); useEffect(() => { if (lastFocus === null) { @@ -82,7 +96,7 @@ const PollCreate = (props: AbstractProps) => { if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) { return; } - }); + }, []); const onQuestionKeyDown = useCallback(ev => { if (checkModifiers(ev)) { @@ -93,7 +107,7 @@ const PollCreate = (props: AbstractProps) => { requestFocus(0); ev.preventDefault(); } - }); + }, []); // Called on keypress in answer fields const onAnswerKeyDown = useCallback((i, ev) => { @@ -132,7 +146,7 @@ const PollCreate = (props: AbstractProps) => { const [ grabbing, setGrabbing ] = useState(null); - const interchangeHeights = (i, j) => { + const interchangeHeights = (i: number, j: number) => { const h = answerInputs.current[i].scrollHeight; answerInputs.current[i].style.height = `${answerInputs.current[j].scrollHeight}px`; @@ -151,16 +165,17 @@ const PollCreate = (props: AbstractProps) => { return null; }); }, { once: true }); - }); + }, []); + const onMouseOver = useCallback(i => { if (grabbing !== null && grabbing !== i) { interchangeHeights(i, grabbing); moveAnswer(grabbing, i); setGrabbing(i); } - }); + }, []); - const autogrow = ev => { + const autogrow = (ev: React.ChangeEvent) => { const el = ev.target; el.style.height = '1px'; @@ -188,11 +203,11 @@ const PollCreate = (props: AbstractProps) => { onKeyDown = { onQuestionKeyDown } placeholder = { t('polls.create.questionPlaceholder') } required = { true } - row = '1' + rows = { 1 } value = { question } />
    - {answers.map((answer, i) => + {answers.map((answer: any, i: number) => (
  1. { placeholder = { t('polls.create.answerPlaceholder', { index: i + 1 }) } ref = { r => registerFieldRef(i, r) } required = { true } - row = { 1 } + rows = { 1 } value = { answer } /> @@ -234,34 +249,32 @@ const PollCreate = (props: AbstractProps) => { )}
- + type = { BUTTON_TYPES.SECONDARY } />
- - + fullWidth = { true } + isSubmit = { true } + label = { t('polls.create.send') } />
); diff --git a/react/features/polls/components/web/PollsPane.js b/react/features/polls/components/web/PollsPane.tsx similarity index 70% rename from react/features/polls/components/web/PollsPane.js rename to react/features/polls/components/web/PollsPane.tsx index 7b4f70bca0..3d8a8f63a5 100644 --- a/react/features/polls/components/web/PollsPane.js +++ b/react/features/polls/components/web/PollsPane.tsx @@ -1,11 +1,15 @@ -// @flow - +/* eslint-disable lines-around-comment */ import React from 'react'; +import Button from '../../../base/ui/components/web/Button'; +// @ts-ignore import AbstractPollsPane from '../AbstractPollsPane'; +// @ts-ignore import type { AbstractProps } from '../AbstractPollsPane'; +// @ts-ignore import PollCreate from './PollCreate'; +// @ts-ignore import PollsList from './PollsList'; @@ -19,13 +23,12 @@ const PollsPane = (props: AbstractProps) => {
- + onClick = { onCreate } />
; };