Is it possible to have a TabNavigator with a tab bar button that launched a modal screen? Basically mimic the behavior of Instagram's center "Share" button.
Assuming you are clear with the concepts of react-redux. You can use it to achieve this task. On the click of the tab perform an action that will set/unset the props that you can use to show/hide the modal.
Your reducer for this will be like,
case SET_MODAL_VISIBILITY:
state = {
...state,
modalVisible: !state.modalVisible,
}
the above case will set/unset the modalVisible prop which can be used in a component that is exported with connect keyword of react-redux.
Than your modal will be like
<Modal
visible={this.props.modalVisible}
onRequestClose={() => //any function you want to call}
//any other attributes you want to use
>
<View>
//any view you want to give your modal to
</View>
<Modal/>
Related
I'm gradually adopting react-hook-form to control a form screen I wrote with custom input components. For the most part, adoption has been relatively smooth using this paradigm:
const {control, handleSubmit, watch, formState: {errors}} = useForm<FormData>();
<Controller
name='myInput'
control={control}
rules={
//some validation rules with custom messages
}
render={({ field: { onChange, value } }) => (
<MyCustomComponent
onChange={onChange}
value={value}
/>
)}
...
/>
{errors.myInput && <Text>{error.myInput.message}</Text>}
However, I have this one element on my form page that looks like an input but is really a button that displays text based upon the route.params passed to my form screen, all of which works via the React Navigation library. The button itself actually just brings up a modal where the user selects "topics", once the user makes their topics selections and clicks a select button on the modal, this triggers navigating back to my forms screen while passing these selected topics back to it, which then updates the display text on the button. Kinda like this:
Form Screen:
export default function FormScreen({ navigation, route }: FormScreenProps) {
const [topics, setTopics] = React.useState<string[]>(route.params.topics);
React.useEffect(() => {
setTopics(route.params.topics);
}, [route.params.topics]);
return (
<SelectTopicsButton
selectedTopics={topics} // This sets the display text of the button
onPress={ // bring up Select Topics Modal }
/>
);
}
In the select topics modal, the only code that matters is that there is a button to dismiss the modal and return to the Form Screen that contains the following:
onPress={() => { navigation.navigate('FormScreen', { topics: selectedTopics }); }}
Ultimately in the form I submit I would like to have a field topics that is managed by react-hook-form so that I can have something like the following in my form screen like I've done with all my other inputs which can have some "You must select at least 1 topic" type validation:
<SelectTopicsButton
selectedTopics={topics} // This sets the display text of the button
onPress={ // bring up Select Topics Modal }
/>
{errors.topics && <Text>{errors.topics.message}</Text>}
Since it isn't an input, it doesn't make sense to wrap it with a Controller object, but I still want to manage its state with react-hook-form. Any suggestions in how to wire this up and achieve this are greatly appreciated, thanks!
I have to access to button's onClick event, something like event.target. When adding button to toolbar we have onAction handler that doesn't expose onClick event but have only isEnabled and setEnabled methods. I can access to window.event, but that is deprecated. So the code would be something like:
editor.ui.registry.addButton('button', {
text: 'Button text',
icon: 'icon',
onAction: (api:ToolbarButtonInstanceApi) => { // Here I have access to only button
//api, but I need access to event as
//well so I can use it as event.currentTarget
},
});```
How could I access to `onClick event`?
I've been researching this too as I needed to do something similar, or at least find a way of accessing the button node when it's clicked, so far I've not come up with anything that can be used inside the onAction handler, and attempting to access .this inside that arrow head function will give you the global window details. I feel there must be some way!
How can I get notified on a CKEditor 5 model, View and widget's click, update and delete events?
Let's assume that I have a custom plugin implementation similar to a link plugin or highlighter plugin. Now, how can I get the following events?
When user clicks on the link/highlighted element.
When user updates the inner content of the highlighted element.
When user removes the entire highlighted link or highlighter element from editor.
The element can be a model element/view element/or a widget.
Here is the code I use. It need to be in the init() method for a plugin. I don't know if this is the correct way to do it, but it works for me(tm).
const editor = this.editor;
const model=editor.model;
const editingView=editor.editing.view;
editingView.addObserver( ClickObserver );
const viewDocument = editor.editing.view.document;
this.listenTo( viewDocument, 'click', (event,data) => {
const target=data.target; // This is the view the user clicked on
const modelObj=editor.editing.mapper.toModelElement(target);
// modelObj is the model object for the element the user clicked on. Now you just need to test if clicking on this model is something you are interested in.
// console.log(modelObj);
} );
Note that this does seem to fail if you click on a AttributeElement (Such as bold text). In that case you can either call on the target.parent until you get a result.
I am using react-native-drawer-layout for navigation drawer.
<DrawerLayoutAndroid
drawerWidth={100}
ref={'Drawer'}
drawerPosition={DrawerLayoutAndroid.positions.Right}
renderNavigationView={() => NavigationView}
/>
When i try to close the drawer total app is getting closed.
Could anybody let me know how to close the drawer with hardware(android) button?
I never user DrawerLayoutAndroid but according to the React Native Docs it has method "closeDrawer()" that is supposed to close it... by using BackHandler you should add an event listener to the component containing the drawer layout, add this:
componentDidMount(){
BackHandler.addEventListener('hardwareBackPress', ()=>{
this.refs.Drawer.closerDrawer();
return true;
});
}
I have a simple ExtJS application that is written MVC style (much of my information from here).
My application creates a viewport, and has a view with a form, some fields and a button.
The application has a controller with a 'loginButtonClick" function, and the controller watches the click event with a:
this.control({
'loginwindow button[action=save]': {
click: this.loginButtonClick
}
}
That works great, but now when the login window is showing, I want the enter key to also execute the loginButtonClick method.
I have tried all kinds of things, but the basic issue I am having is WHERE to put the code for creating the keymap, and how to bind it to the proper instances.
For example, if I create the keymap in the controller (which is my preference), I need to get the specific view instance for that controller (I might have multiple windows open of the same kind).
So, How would you create a key map (or?) from within a controller for it's view (window), calling a local method (this.loginButtonClick) when the enter key is pressed?
What you can do is bind the code that initializes the keyMap to the login window afterrender event like this:
this.control{(
'loginwindow' : {
afterrender: this.initializeKeyMap
}
Then make a function that sets up the keyNav:
initializeKeyMap: function(window, options) {
this.keyNav = Ext.create('Ext.util.KeyNav', window.el, {
enter: this.loginButtonClick,
scope: this
});
}
Now when the dialog is loaded if the user presses the Enter key, it should execute your function.
You could setup all these things on your window render event. So when it is rendered you add an eventlistener for the enter key, and in the handler you call programatically click on the login button.
You can achieve this by adding the following listeners to your text/password fields in the form
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
var form = this.up('form').getForm();
submitLoginForm(form);
}
}
}
Here 'form' is your form and 'submitLoginForm' is the function called at form submit which I guess is loginButtonClick in your case.
Hope this helps.