Feature request for [AlertDialog]
hyochan opened this issue ยท 7 comments
Is your feature request related to a problem? Please describe.
It'd be good to have dooboo-ui
's own AlertDialog
or we should use the non fancy default dialog.
Describe the solution you'd like
Additional context
Above can be implemented in @dooboo-ui/alert-dialog
as a seperate package because I think we might need react-native-modalbox.
I want to develop this task.
Can you assign it to me?
@do02reen24
Looking forward to your work!
I'm sure you know better than me, but I'll share some source just in case it helps.
- Reading this will be helpful.
- If you're going to implement in
@dooboo-ui/alert-dialog
, you can start withlerna create alert-dialog
andlerna add react-native-modalbox --scope=alert-dialog
. - There are two ways to manage open state of modal in
react-native-modalbox
.
opened
props. (recommended)open/close
method
You won't need second way, but just in case you want it, here's some code example. (there's no example of this in docs)
export default function AlertDialog(props: Props): ReactElement {
const modal = useRef(null);
return (
<>
<Button title="Closer" onPress={() => modal.current.close()} />,
<Modal ref={modal} {...props} />
</>
);
}
Please let me know if I know something wrong.
Hope this helps!
I want to develop this task.
Can you assign it to me?
Thanks for your interest~! I've just assigned you here.
Actually, you can start working on this even if you are not assigned. In the future, you can just tell us that you are working on it if you want to share your progress.
@yujong-lee Thanks for sharing the spec. This looks really useful!
I've summarized the props that AlertDialog needs.
Is there any option to add, modify, or remove? Please give me feedback.
types | default | |
---|---|---|
isOpen? | boolean | false |
type? | "alert" |"confirm" |"prompt" | "alert" |
color? | string | "#000000" |
modalStyle? | StyleProp | undefined |
backdropOpacity? | Number | 0.5 |
backdropPressToClose? | boolean | true |
renderContent? | (string) => JSX.Element | (string) => JSX.Element |
onPress | (result: any) => void | - |
@doreen0224 Great! ๐
There's few things I want to point out.
All component in dooboo-ui
should follow this rule for styling.
Never make style props as another props.
So we need style
for referring itself, and styles
for wrapping things like modalStyle
.
#69 is my work related to this.
See this comment by @hyochan.
Code below is Button
's prop written by @hyochan .
type Styles = {
container?: StyleProp<ViewStyle>;
text?: StyleProp<TextStyle>;
disabledButton?: StyleProp<ViewStyle>;
disabledText?: StyleProp<TextStyle>;
hovered?: StyleProp<ViewStyle>;
};
export interface ButtonProps {
testID?: string;
indicatorColor?: string;
loading?: boolean;
disabled?: boolean;
outlined?: boolean;
style?: StyleProp<ViewStyle>;
styles?: Styles;
leftElement?: ReactElement;
rightElement?: ReactElement;
activeOpacity?: TouchableOpacityProps['activeOpacity'];
text?: string;
onPress?: TouchableOpacityProps['onPress'];
touchableOpacityProps?: Partial<TouchableOpacityProps>;
textProps?: Partial<TextProps>;
type?: ButtonType;
size?: ButtonSize;
}
The [AlertDialog] might be used globally so you might want to consider support for context provider which we had in Snackbar Legacy.
In out current SnackBar, we don't have the context provider and I just thought we need this support for the snackbar.
Thinking further, I think the [AlertDialog] is enough to be provided as ref
unlike the [Snackbar] because it is not necessary to run on multiple screens simultaneouly. The snackbar should be opened even when page is expired (if this is hard to understand, we can have a sync!).
As said in the description
, you can use react-native-modalbox
but then it should be written in separate package in package directory since we need extra dependency. This is one of our policy (still not explicitly written in our document ๐) on managing packages. I've also wrote a reply on the current context. Hope this helps!
Please tell if there are any further questions.