DmitriyB/pixelstreamingui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

добавлена анимация открытия/закрытия доп кнопок для декстопа, пофикшен баг, когда в моб версии при открытом разделе можно было закрыть тулбар

Browse Source
This commit is contained in:
DmitriyB
2022-08-15 12:12:21 +05:00
parent 66e5a49777
commit c728248620
3 changed files with 140 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mainScreen/toolbar/buttonContainer.tsx
+103 -86
View File
@@ -1,4 +1,5 @@
import React, { useContext, useState } from "react";
import { CSSTransition } from "react-transition-group";
import { ContextWindowHeight } from "../../contextWindowHeight";
import { ControlButton } from "./controlButton";
import { ToolbarButton } from "./toolbarButton";
@@ -16,13 +17,15 @@ type TProps = {
isSelected?: boolean
}>
isOpenToolbar: boolean
openedAddButtons?: string
setOpenedAddButtons?: React.Dispatch<React.SetStateAction<string>>
isBorderLineTop?: 'hide' | 'show'
isBorderLineBottom?: 'hide' | 'show'
}
export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
const windowHeight = useContext(ContextWindowHeight);
const [openedAddButtons, setOpenedAddButtons] = useState<string>('');
// const [openedAddButtons, setOpenedAddButtons] = useState<string>('');
const controlStates = ['default', 'questing', 'return', 'questing'];// temp
const [currentControlState, setCurrentControlState] = useState<number>(0); // temp
const typeUser = 'admin' // 'user' // temp
@@ -42,15 +45,14 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
}
{props.buttons.map((button, index) => {
function onClick() {
if(openedAddButtons === button.type + index + 'areacont') {
setOpenedAddButtons('');
if(props.openedAddButtons === button.type + index) {
props?.setOpenedAddButtons('');
} else {
setOpenedAddButtons(button.type + index + 'areacont')
props?.setOpenedAddButtons(button.type + index);
}
}
return <div className="toolbar-button-area-container" key={button.type + index + 'areacont'}>
return <div className="toolbar-button-area-container" key={button.type + index}>
<ToolbarButton
// key={button.type + index}
onClick={() => {
onClick();
button.onClick()
@@ -61,99 +63,114 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
active={button?.active}
isCaption={button.isCaption}
isSelected={button?.isSelected}
isVisible={openedAddButtons === button.type + index + 'areacont' && windowHeight > 700 && (button.type.includes('user') || button.type.includes('language'))}
isVisible={props?.openedAddButtons === button.type + index + 'areacont' && windowHeight > 700 && (button.type.includes('user') || button.type.includes('language'))}
/>
{
button.type.includes('user') && windowHeight > 700 ?
<div className={`toolbar-open-add-button-container ${openedAddButtons === button.type + index + 'areacont' && props.isOpenToolbar ? 'show' : ''}`}>
<ToolbarButton
// key={button.type + index}
onClick={() => onClick()}
type={button.type}
isNotification={button?.isNotification}
caption={CaptionToolbarButtons[button.type]}
active={button?.active}
isCaption={false}
isSelected={button?.isSelected}
/>
<ToolbarButton
onClick={() => null}
type={"micro"}
caption={''}
isCaption={false}
/>
{
// temp
currentControlState === 0
? <ControlButton
onClick={() => nextControlState()}
state={"default"}
userType={typeUser}
<CSSTransition
in={props?.openedAddButtons === button.type + index && props.isOpenToolbar}
timeout={300}
classNames={'show-add-buttons'}
unmountOnExit
>
{/* <div className={`toolbar-open-add-button-container ${props?.openedAddButtons === button.type + index && props.isOpenToolbar ? 'show' : ''}`}> */}
<div className={`toolbar-open-add-button-container show`}>
<ToolbarButton
onClick={() => onClick()}
type={button.type}
isNotification={button?.isNotification}
caption={CaptionToolbarButtons[button.type]}
active={button?.active}
isCaption={false}
isSelected={button?.isSelected}
/>
: currentControlState === 1
? <>
<ToolbarButton
onClick={() => nextControlState()}
type={"no"}
caption={''}
isCaption={false}
size={"medium"}
/>
<ToolbarButton
onClick={() => nextControlState()}
type={"yes"}
caption={''}
isCaption={false}
size={"medium"}
/>
</>
: currentControlState === 2
? <ControlButton
onClick={() => nextControlState()}
state={"waiting"}
userType={typeUser}
<ToolbarButton
onClick={() => null}
type={"micro"}
caption={''}
isCaption={false}
/>
: currentControlState === 3
? <>
<ToolbarButton
{
// temp
currentControlState === 0
? <ControlButton
onClick={() => nextControlState()}
type={"no"}
caption={''}
isCaption={false}
size={"medium"}
state={"default"}
userType={typeUser}
/>
<ToolbarButton
: currentControlState === 1
? <>
<ToolbarButton
onClick={() => nextControlState()}
type={"no"}
caption={''}
isCaption={false}
size={"medium"}
/>
<ToolbarButton
onClick={() => nextControlState()}
type={"yes"}
caption={''}
isCaption={false}
size={"medium"}
/>
</>
: currentControlState === 2
? <ControlButton
onClick={() => nextControlState()}
type={"yes"}
caption={''}
isCaption={false}
size={"medium"}
state={"waiting"}
userType={typeUser}
/>
</>
: null
}
</div>
: currentControlState === 3
? <>
<ToolbarButton
onClick={() => nextControlState()}
type={"no"}
caption={''}
isCaption={false}
size={"medium"}
/>
<ToolbarButton
onClick={() => nextControlState()}
type={"yes"}
caption={''}
isCaption={false}
size={"medium"}
/>
</>
: null
}
</div>
</CSSTransition>
: null
}
{
button.type.includes('language') && windowHeight > 700 ?
<div className={`toolbar-open-add-button-container ${openedAddButtons === button.type + index + 'areacont' && props.isOpenToolbar ? 'show' : ''}`}>
<ToolbarButton
onClick={() => {onClick(); button.onClick()}}
type={button.type}
caption={CaptionToolbarButtons[button.type]}
isCaption={false}
isSelected={button.isSelected}
/>
<ToolbarButton
onClick={() => null}
type={"language en"}
caption={CaptionToolbarButtons[button.type]}
isCaption={false}
isSelected={false}
/>
</div>
<CSSTransition
in={props?.openedAddButtons === button.type + index && props.isOpenToolbar}
timeout={300}
classNames={'show-add-buttons'}
unmountOnExit
>
{/* <div className={`toolbar-open-add-button-container ${props?.openedAddButtons === button.type + index && props.isOpenToolbar ? 'show' : ''}`}> */}
<div className={`toolbar-open-add-button-container show`}>
<ToolbarButton
onClick={() => {onClick(); button.onClick()}}
type={button.type}
caption={CaptionToolbarButtons[button.type]}
isCaption={false}
isSelected={button.isSelected}
/>
<ToolbarButton
onClick={() => null}
type={"language en"}
caption={CaptionToolbarButtons[button.type]}
isCaption={false}
isSelected={false}
/>
</div>
</CSSTransition>
: null
}
</div>
src/components/mainScreen/toolbar/toolbar.css
+19
View File
@@ -461,6 +461,25 @@
transform: translateX(-60px);
}
.show-add-buttons-enter {
opacity: 0;
}
.show-add-buttons-enter-active {
opacity: 1;
transition: .3s;
}
.show-add-buttons-exit {
opacity: 1;
}
.show-add-buttons-exit-active {
opacity: 0;
transition: .3s;
}
@media screen and (max-height: 700px) {
.toolbar-field {
padding: 20px 14px;
src/components/mainScreen/toolbar/toolbar.tsx
+18 -3
View File
@@ -19,6 +19,7 @@ type TProps = {
export const Toolbar:React.FC<TProps> = React.memo((props) => {
const windowHeight = useContext(ContextWindowHeight);
const [showAddButtonsContOnDekstop, setShowAddButtonsContOnDekstop] = useState<boolean>(false);
const [openedAddButtons, setOpenedAddButtons] = useState<string>('');
function showAddButtons() {
setShowAddButtonsContOnDekstop(!showAddButtonsContOnDekstop);
@@ -50,7 +51,9 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
isSelected: props?.isOpenUsersMobilePart
}
]}
isOpenToolbar={props.isOpen}
isOpenToolbar={props.isOpen}
openedAddButtons={openedAddButtons}
setOpenedAddButtons={setOpenedAddButtons}
/>
</div>
<div className="toolbar-field-part">
@@ -70,6 +73,8 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
}
]}
isOpenToolbar={props.isOpen}
openedAddButtons={openedAddButtons}
setOpenedAddButtons={setOpenedAddButtons}
/>
{/* <BorderLine /> */}
<ToolbarButton
@@ -77,11 +82,15 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
onClick={props.onClickMobileOther}
caption={CaptionToolbarButtons["other"]}
isCaption={false}
isSelected={props.isOpenOtherMobilePart}
isSelected={props.isOpenOtherMobilePart}
/>
</div>
</div>
<button className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
<button className='toolbar-open-button' onClick={() => {
if(!(props.isOpenOtherMobilePart || props.isOpenUsersMobilePart))
props.onClickOpenButton()
}}
>
<span className="toolbar-open-button-icon"></span>
</button>
</div>
@@ -128,6 +137,8 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
]}
isOpenToolbar={props.isOpen}
openedAddButtons={openedAddButtons}
setOpenedAddButtons={setOpenedAddButtons}
/>
</div>
<div className="toolbar-field-part">
@@ -147,6 +158,8 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
}
]}
isOpenToolbar={props.isOpen}
openedAddButtons={openedAddButtons}
setOpenedAddButtons={setOpenedAddButtons}
/>
<ButtonContainer
buttons={[
@@ -164,6 +177,8 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
]}
isBorderLineTop={"hide"}
isOpenToolbar={props.isOpen}
openedAddButtons={openedAddButtons}
setOpenedAddButtons={setOpenedAddButtons}
/>
{/* <ToolbarButton
type="share"