Feature request for [AlertDialog]

[dooboolab-community]

Feature request for [AlertDialog]

[do02reen24]

I want to develop this task.
Can you assign it to me?

[hyochan]

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!

[yujonglee]

@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.

@hyochan mentioned it.

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;
}

[yujonglee]

@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.

1. Reading this will be helpful.
2. If you're going to implement in @dooboo-ui/alert-dialog, you can start with lerna create alert-dialog and lerna add react-native-modalbox --scope=alert-dialog.
3. 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!

[doreen0224]

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	-

[hyochan]

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.

[hyochan]

Closes via #87. Wasn't linked properly.