Skip to content

Commit

Permalink
feat(btn): dynamic
Browse files Browse the repository at this point in the history 
Signed-off-by: captain-Akshay <[email protected]>
  • Loading branch information
@captain-Akshay
captain-Akshay committed Mar 4, 2024
1 parent 1640348 commit c46f7a8
Show file tree
Hide file tree
Showing 3 changed files with 226 additions and 102 deletions.
2 changes: 1 addition & 1 deletion src/custom/CustomTooltip/customTooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import { CHARCOAL, WHITE } from '../../theme';

type CustomTooltipProps = {
title: string | React.ReactNode;
title: string | React.ReactNode | JSX.Element;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
children: React.ReactNode;
} & Omit<TooltipProps, 'title' | 'onClick'>;
Expand Down
195 changes: 103 additions & 92 deletions src/custom/Feedback/FeedbackButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,20 @@ interface FeedbackComponentProps {
onSubmit: (data: { label: string; message: string }) => void;
containerStyles?: CSSProperties;
feedbackOptionStyles?: CSSProperties;
renderPosition:
| 'bottom-center'
| 'bottom-right'
| 'bottom-left'
| 'right-top'
| 'right-middle'
| 'right-bottom';
}

const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
onSubmit,
containerStyles,
feedbackOptionStyles
feedbackOptionStyles,
renderPosition
}) => {
const [isOpen, setIsOpen] = useState<boolean>(false);
const [submitted, setSubmitted] = useState<boolean>(false);
Expand Down Expand Up @@ -139,98 +147,101 @@ const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
};

return (
<Container isOpen={isOpen} style={containerStyles}>
{submitted ? (
<FeedbackMessage isOpen={isOpen}>
<SuccessIcon width={'32'} height={'32'} />
We got your concern. Thank you!
</FeedbackMessage>
) : (
<>
<FeedbackButton onClick={handleFeedback}>Feedback</FeedbackButton>

<ModalCard
onClose={() => {}}
open={true}
closeComponent={
<CloseButton onClick={() => setIsOpen(false)}>
<CloseIcon width={'30'} height={'30'} fill={CULTURED} />
</CloseButton>
}
actions={
<div
style={{
display: 'flex',
alignItems: 'center'
}}
>
<ActionWrapper>
<StyledCheckbox checked={isChecked} onChange={handleCheckboxChange} />
<Typography style={{ color: 'white', fontSize: '12px', height: '15px' }}>
We may email you for more information or updates
</Typography>
</ActionWrapper>
<FeedbackSubmitButton
type="submit"
disabled={!(messageValue && isChecked)}
isOpen={!(messageValue && isChecked)}
onClick={handleSubmit}
<>
<FeedbackButton onClick={handleFeedback} renderPosition={renderPosition}>
Feedback
</FeedbackButton>
<Container isOpen={isOpen} style={containerStyles} renderPosition={renderPosition}>
{submitted ? (
<FeedbackMessage isOpen={isOpen}>
<SuccessIcon width={'32'} height={'32'} />
We got your concern. Thank you!
</FeedbackMessage>
) : (
<>
<ModalCard
onClose={() => {}}
open={true}
closeComponent={
<CloseButton onClick={() => setIsOpen(false)}>
<CloseIcon width={'30'} height={'30'} fill={CULTURED} />
</CloseButton>
}
actions={
<div
style={{
display: 'flex',
alignItems: 'center'
}}
>
Send
</FeedbackSubmitButton>
</div>
}
leftHeaderIcon={<FeedbackIcon />}
title="Feedback"
helpArea={
<CustomTooltip placement="top" title={tooltipContent} arrow>
<HelperWrapper>
<QuestionIcon width={'30'} height={'30'} />
</HelperWrapper>
</CustomTooltip>
}
helpText={'Help'}
content={
<FeedbackForm>
<FeedbackOptions>
{feedbackData?.map((item) => (
<FeedbackOptionButton
key={item.label}
style={feedbackOptionStyles}
type="button"
onClick={() => {
setCategory(item);
}}
isOpen={category?.label === item.label}
>
<FeedbackMiniIcon>{item.icon}</FeedbackMiniIcon>
<Typography>{item.label}</Typography>
</FeedbackOptionButton>
))}
</FeedbackOptions>
{category?.isTextInput ? (
<FeedbackTextArea>
<StyledTextArea
value={messageValue || ''}
onChange={(e) => {
setMessageValue(e.target.value);
}}
ref={feedbackTextRef}
required
placeholder={category.placeholder}
rows={5}
cols={30}
/>
</FeedbackTextArea>
) : (
<InnerComponentWrapper>{category?.innerComponent}</InnerComponentWrapper>
)}
</FeedbackForm>
}
></ModalCard>
</>
)}
</Container>
<ActionWrapper>
<StyledCheckbox checked={isChecked} onChange={handleCheckboxChange} />
<Typography style={{ color: 'white', fontSize: '12px', height: '15px' }}>
We may email you for more information or updates
</Typography>
</ActionWrapper>
<FeedbackSubmitButton
type="submit"
disabled={!(messageValue && isChecked)}
isOpen={!(messageValue && isChecked)}
onClick={handleSubmit}
>
Send
</FeedbackSubmitButton>
</div>
}
leftHeaderIcon={<FeedbackIcon />}
title="Feedback"
helpArea={
<CustomTooltip placement="top" title={tooltipContent} arrow>
<HelperWrapper>
<QuestionIcon width={'30'} height={'30'} />
</HelperWrapper>
</CustomTooltip>
}
helpText={'Help'}
content={
<FeedbackForm>
<FeedbackOptions>
{feedbackData?.map((item) => (
<FeedbackOptionButton
key={item.label}
style={feedbackOptionStyles}
type="button"
onClick={() => {
setCategory(item);
}}
isOpen={category?.label === item.label}
>
<FeedbackMiniIcon>{item.icon}</FeedbackMiniIcon>
<Typography>{item.label}</Typography>
</FeedbackOptionButton>
))}
</FeedbackOptions>
{category?.isTextInput ? (
<FeedbackTextArea>
<StyledTextArea
value={messageValue || ''}
onChange={(e) => {
setMessageValue(e.target.value);
}}
ref={feedbackTextRef}
required
placeholder={category.placeholder}
rows={5}
cols={30}
/>
</FeedbackTextArea>
) : (
<InnerComponentWrapper>{category?.innerComponent}</InnerComponentWrapper>
)}
</FeedbackForm>
}
></ModalCard>
</>
)}
</Container>
</>
);
};

Expand Down
131 changes: 122 additions & 9 deletions src/custom/Feedback/style.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,95 @@ export const CloseButton = styled('div')({
alignItems: 'center',
fill: CULTURED
});

interface ContainerProps {
interface SubmitProp {
isOpen: boolean;
}
interface RenderPositionType {
renderPosition:
| 'bottom-center'
| 'bottom-right'
| 'bottom-left'
| 'right-top'
| 'right-middle'
| 'right-bottom';
}
interface ContainerProps extends RenderPositionType {
isOpen: boolean;
}
const containerPositionMap: Record<
'bottom-center' | 'bottom-right' | 'bottom-left' | 'right-top' | 'right-middle' | 'right-bottom',
{ open: React.CSSProperties; closed: React.CSSProperties }
> = {
'bottom-center': {
open: {
bottom: '0px',
left: '50%',
transform: 'translateX(-50%)'
},
closed: {
bottom: '-42%',
left: '50%',
transform: 'translateX(-50%)'
}
},
'bottom-right': {
open: {
bottom: '0px',
right: '10px'
},
closed: {
bottom: '-42%',
right: '10px'
}
},
'bottom-left': {
open: {
bottom: '0px',
left: '10px'
},
closed: {
bottom: '-42%',
left: '10px'
}
},
'right-top': {
open: {
top: '0px',
right: '0px'
},
closed: {
top: '0px',
right: '-42%'
}
},
'right-middle': {
open: {
top: '50%',
right: '0px',
transform: 'translateY(-50%)'
},
closed: {
top: '50%',
right: '-42%',
transform: 'translateY(-50%)'
}
},
'right-bottom': {
open: {
bottom: '0px',
right: '0px'
},
closed: {
bottom: '0px',
right: '-42%'
}
}
};

export const Container = styled(Box)<ContainerProps>(({ isOpen }) => ({
export const Container = styled(Box)<ContainerProps>(({ isOpen, renderPosition }) => ({
position: 'fixed',
bottom: isOpen ? '0px' : '-487px',
right: '20px',
transition: 'bottom 0.5s ease'
transition: 'all 0.5s ease',
...containerPositionMap[renderPosition][isOpen ? 'open' : 'closed']
}));

export const FeedbackTextArea = styled('div')({
Expand All @@ -59,7 +138,7 @@ export const FeedbackMiniIcon = styled('div')({
height: '24px'
});

export const FeedbackSubmitButton = styled(Button)<ContainerProps>(({ isOpen }) => ({
export const FeedbackSubmitButton = styled(Button)<SubmitProp>(({ isOpen }) => ({
color: 'white',
width: '4.313rem',
height: '2.25rem',
Expand All @@ -68,20 +147,54 @@ export const FeedbackSubmitButton = styled(Button)<ContainerProps>(({ isOpen })
backgroundColor: isOpen ? buttonDisabled.main : KEPPEL
}));

export const FeedbackButton = styled(Button)(({ theme }) => ({
export const FeedbackButton = styled(Button)<RenderPositionType>(({ theme, renderPosition }) => ({
backgroundColor: theme.palette.mode === 'dark' ? BUTTON_MODAL_DARK : BUTTON_MODAL,
color: CULTURED,
borderRadius: '5px',
padding: '10px 20px',
fontSize: '16px',
transition: 'bottom 0.5s ease',
position: 'fixed',
bottom: '-10px',
...positionMap[renderPosition],
'&:hover': {
backgroundColor: theme.palette.mode === 'dark' ? BLACK : '#213A45'
}
}));

const positionMap: Record<
'bottom-center' | 'bottom-right' | 'bottom-left' | 'right-top' | 'right-middle' | 'right-bottom',
React.CSSProperties
> = {
'bottom-center': {
bottom: '-10px',
left: '50%',
transform: 'translateX(-50%)'
},
'bottom-right': {
bottom: '-10px',
right: '10px'
},
'bottom-left': {
bottom: '-10px',
left: '10px'
},
'right-top': {
top: '8%',
right: '-4%',
transform: 'rotate(-90deg)'
},
'right-middle': {
top: '50%',
right: '-6%',
transform: 'rotate(-90deg) translateY(-50%)'
},
'right-bottom': {
bottom: '5%',
right: '-4%',
transform: 'rotate(-90deg)'
}
};

export const FeedbackForm = styled('form')(({ theme }) => ({
display: 'block',
right: '0',
Expand Down

0 comments on commit c46f7a8

Please sign in to comment.