feat: added panel radio buttons that list timer options
William Grant
2 years ago
parent
8abd624c47
commit
a42aff35fc
@ -0,0 +1,62 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { SessionRadio } from '../basic/SessionRadio';
|
||||
import { PanelButton, PanelButtonProps, StyledContent, StyledText } from './PanelButton';
|
||||
|
||||
const StyledPanelButton = styled(PanelButton)`
|
||||
padding-top: var(--margins-lg);
|
||||
padding-bottom: var(--margins-lg);
|
||||
|
||||
div {
|
||||
span {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSubtitle = styled.p``;
|
||||
|
||||
const StyledCheckContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
interface PanelRadioButtonProps extends Omit<PanelButtonProps, 'children' | 'onClick'> {
|
||||
value: any;
|
||||
text: string;
|
||||
subtitle?: string;
|
||||
isSelected: boolean;
|
||||
onSelect?: (...args: any[]) => void;
|
||||
onUnselect?: (...args: any[]) => void;
|
||||
}
|
||||
|
||||
export const PanelRadioButton = (props: PanelRadioButtonProps) => {
|
||||
const { value, text, subtitle, isSelected, onSelect, onUnselect, disableBg, dataTestId } = props;
|
||||
|
||||
return (
|
||||
<StyledPanelButton
|
||||
disableBg={disableBg}
|
||||
onClick={() => {
|
||||
isSelected ? onUnselect?.('bye') : onSelect?.('hi');
|
||||
}}
|
||||
dataTestId={dataTestId}
|
||||
>
|
||||
<StyledContent>
|
||||
<StyledText>{text}</StyledText>
|
||||
{subtitle && <StyledSubtitle></StyledSubtitle>}
|
||||
<StyledCheckContainer>
|
||||
<SessionRadio active={isSelected} value={value} inputName={value} label="" />
|
||||
</StyledCheckContainer>
|
||||
</StyledContent>
|
||||
</StyledPanelButton>
|
||||
);
|
||||
};
|
||||
@ -1,24 +1,78 @@
|
||||
import React from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import React, { useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import styled from 'styled-components';
|
||||
import { setDisappearingMessagesByConvoId } from '../../../../interactions/conversationInteractions';
|
||||
import { resetRightOverlayMode } from '../../../../state/ducks/section';
|
||||
import { getSelectedConversationKey } from '../../../../state/selectors/conversations';
|
||||
import { getTimerOptions } from '../../../../state/selectors/timerOptions';
|
||||
import { SessionButton } from '../../../basic/SessionButton';
|
||||
import { PanelButtonGroup } from '../../../buttons';
|
||||
import { PanelRadioButton } from '../../../buttons/PanelRadioButton';
|
||||
|
||||
export const OverlayDisappearingMessages = () => {
|
||||
const dispatch = useDispatch();
|
||||
const StyledContainer = styled.div`
|
||||
width: 100%;
|
||||
|
||||
function resetOverlay() {
|
||||
dispatch(resetRightOverlayMode());
|
||||
.session-button {
|
||||
font-weight: 500;
|
||||
min-width: 90px;
|
||||
width: fit-content;
|
||||
margin: 35px auto 0;
|
||||
}
|
||||
`;
|
||||
|
||||
type TimerOptionsProps = {
|
||||
options: any[];
|
||||
selected: number;
|
||||
setSelected: (value: number) => void;
|
||||
};
|
||||
|
||||
const TimeOptions = (props: TimerOptionsProps) => {
|
||||
const { options, selected, setSelected } = props;
|
||||
|
||||
// const timerOptions = useSelector(getTimerOptions).timerOptions;
|
||||
return (
|
||||
<PanelButtonGroup>
|
||||
{options.map((option: any) => (
|
||||
<PanelRadioButton
|
||||
key={option.name}
|
||||
text={option.name}
|
||||
value={option.name}
|
||||
isSelected={selected === option.value}
|
||||
onSelect={() => {
|
||||
setSelected(option.value);
|
||||
}}
|
||||
disableBg={true}
|
||||
/>
|
||||
))}
|
||||
</PanelButtonGroup>
|
||||
);
|
||||
};
|
||||
|
||||
export const OverlayDisappearingMessages = () => {
|
||||
const dispatch = useDispatch();
|
||||
const selectedConversationKey = useSelector(getSelectedConversationKey);
|
||||
const timerOptions = useSelector(getTimerOptions).timerOptions;
|
||||
|
||||
// const disappearingMessagesOptions = timerOptions.map(option => {
|
||||
// return {
|
||||
// content: option.name,
|
||||
// onClick: () => {
|
||||
// void setDisappearingMessagesByConvoId(id, option.value);
|
||||
// },
|
||||
// };
|
||||
// });
|
||||
const [selected, setSelected] = useState(timerOptions[0].value);
|
||||
|
||||
return <div onClick={resetOverlay}>TODO</div>;
|
||||
return (
|
||||
<StyledContainer>
|
||||
<div
|
||||
onClick={() => {
|
||||
dispatch(resetRightOverlayMode());
|
||||
}}
|
||||
>
|
||||
TODO
|
||||
</div>
|
||||
<TimeOptions options={timerOptions} selected={selected} setSelected={setSelected} />
|
||||
<SessionButton
|
||||
onClick={() => {
|
||||
if (selectedConversationKey) {
|
||||
void setDisappearingMessagesByConvoId(selectedConversationKey, selected);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{window.i18n('set')}
|
||||
</SessionButton>
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue