|
| 1 | +import { FunctionComponent } from "react"; |
| 2 | +import { Body, ButtonProps, Children, Display, LocalizedString } from ".."; |
| 3 | +import { Box, Stack } from "../internal"; |
| 4 | +import { feedbackStyle } from "./Feedback.css"; |
| 5 | +import { IllustrationProps } from "../Illustrations/IllustrationProps"; |
| 6 | +import { IllustrationNegative, IllustrationPositive } from "../Illustrations"; |
| 7 | + |
| 8 | +type Status = "positive" | "negative"; |
| 9 | + |
| 10 | +type Props = { |
| 11 | + title: LocalizedString; |
| 12 | + description?: LocalizedString; |
| 13 | + action?: Pick<ButtonProps, "label" | "onPress">; |
| 14 | + background?: boolean; |
| 15 | + size: "medium" | "large"; |
| 16 | +} & ( |
| 17 | + | { |
| 18 | + /** Use as: |
| 19 | + * ```tsx |
| 20 | + * <Feedback |
| 21 | + * illustration={IllustrationIdea} |
| 22 | + * // ... |
| 23 | + * /> |
| 24 | + * ``` |
| 25 | + */ |
| 26 | + illustration: (props: IllustrationProps) => Children; |
| 27 | + status?: never; |
| 28 | + } |
| 29 | + | { |
| 30 | + status: Status; |
| 31 | + illustration?: never; |
| 32 | + } |
| 33 | +); |
| 34 | + |
| 35 | +type FeedbackConfig = { |
| 36 | + background: JSX.Element | null; |
| 37 | + positiveIllustration: (props: IllustrationProps) => Children; |
| 38 | + negativeIllustration: (props: IllustrationProps) => Children; |
| 39 | +}; |
| 40 | + |
| 41 | +/** |
| 42 | + * Feedback can render a predefined feedback status (when using the `status` prop) or render a custom illustration |
| 43 | + * (when using the `illustration` prop). |
| 44 | + */ |
| 45 | +export function createFeedback( |
| 46 | + Button: FunctionComponent<ButtonProps>, |
| 47 | + config: FeedbackConfig = { |
| 48 | + background: null, |
| 49 | + positiveIllustration: IllustrationPositive, |
| 50 | + negativeIllustration: IllustrationNegative, |
| 51 | + } |
| 52 | +) { |
| 53 | + return function Feedback({ |
| 54 | + title, |
| 55 | + description, |
| 56 | + action, |
| 57 | + background, |
| 58 | + status, |
| 59 | + illustration, |
| 60 | + size, |
| 61 | + }: Props) { |
| 62 | + return ( |
| 63 | + <Box className={feedbackStyle}> |
| 64 | + <Stack space={size === "large" ? 24 : 16} align="center"> |
| 65 | + {renderIllustration(size, illustrationElement(status, illustration), background)} |
| 66 | + <Stack space={size === "large" ? 8 : 4}> |
| 67 | + <Display size="small" align="center"> |
| 68 | + {title} |
| 69 | + </Display> |
| 70 | + {description && ( |
| 71 | + <Body size="medium" align="center"> |
| 72 | + {description} |
| 73 | + </Body> |
| 74 | + )} |
| 75 | + </Stack> |
| 76 | + {action && ( |
| 77 | + <Button |
| 78 | + label={action.label} |
| 79 | + kind={size === "large" ? "solid" : "transparent"} |
| 80 | + hierarchy="primary" |
| 81 | + onPress={action.onPress} |
| 82 | + /> |
| 83 | + )} |
| 84 | + </Stack> |
| 85 | + </Box> |
| 86 | + ); |
| 87 | + }; |
| 88 | + |
| 89 | + function illustrationElement( |
| 90 | + status: Props["status"], |
| 91 | + illustration: Props["illustration"] |
| 92 | + ): ((props: IllustrationProps) => Children) | undefined { |
| 93 | + if (illustration) { |
| 94 | + return illustration; |
| 95 | + } else if (status) { |
| 96 | + return illustrationForStatus(status!); |
| 97 | + } |
| 98 | + return undefined; |
| 99 | + } |
| 100 | + |
| 101 | + function illustrationForStatus(status: Status) { |
| 102 | + switch (status) { |
| 103 | + case "positive": |
| 104 | + return config.positiveIllustration; |
| 105 | + case "negative": |
| 106 | + return config.negativeIllustration; |
| 107 | + } |
| 108 | + } |
| 109 | + |
| 110 | + function renderIllustration( |
| 111 | + size: "medium" | "large", |
| 112 | + illustration: ((props: IllustrationProps) => Children) | undefined, |
| 113 | + background: boolean | undefined |
| 114 | + ): Children { |
| 115 | + const illustrationProps: IllustrationProps = { |
| 116 | + size: size === "large" ? 160 : 80, |
| 117 | + style: "color", |
| 118 | + }; |
| 119 | + if (background) { |
| 120 | + // NOTE(gabro): when we have a background, the overall size of the illustration is the one of |
| 121 | + // the background so the background has position relative and the illustration has position absolute. |
| 122 | + return ( |
| 123 | + <Box position="relative" width="full"> |
| 124 | + <Box position="relative">{config.background}</Box> |
| 125 | + <Box position="absolute" top={40} width="full" display="flex" justifyContent="center"> |
| 126 | + {illustration && illustration(illustrationProps)} |
| 127 | + </Box> |
| 128 | + </Box> |
| 129 | + ); |
| 130 | + } else { |
| 131 | + return illustration && illustration(illustrationProps); |
| 132 | + } |
| 133 | + } |
| 134 | +} |
0 commit comments