I would like to make my redux-form fields 'active' by default. Is there a way to do this using RF v.6.5.0 ? Thank you!
At the moment I don't think there is a property to set on refux-form Fields to set it to active by default. You can set it via refs once the component is mounted though.
Edit: Here might be a cleaner implementation using getRenderedComponent()
componentDidMount() {
this.refs.defaultInput
.getRenderedComponent()
.focus()
}
<Field name="defaultInput" ref="defaultInput" withRef component="input"/>
From redux-form Github There are a few other examples and link in that Github issue.
Related
I'm using react-bootstrap-typeahead for adding items in to a list.
I want to disable remove button of the added items according to a condition.
https://ericgio.github.io/react-bootstrap-typeahead/
Yes, you can use the renderToken prop to customize how the tokens are rendered.
The tokens themselves accept a disabled prop. If true, the token will be read-only and have a disabled appearance.
Alternatively, omitting the onRemove prop on the token will make it read-only without the disabled appearance.
Here's a basic example of how to specify each of the methods described above:
<Typeahead
...
multiple
renderToken={(option, props, idx) => (
<Token
disabled={idx === 0}
onRemove={idx === 1 ? undefined : props.onRemove}>
{option.label}
</Token>
)}
/>
Working sandbox: https://codesandbox.io/s/react-bootstrap-typeahead-token-customization-495-54gtg
Note: In both the disabled and read-only cases, users will not be able to remove the selections once added, so be careful about the user experience. The disabled state is generally best used when the entire typeahead is disabled. In that case, the disabled state is automatically passed down to the token components. Read-only selections are good when you want to pre-select required options, for example.
You can use this to disable it:
<Joyride
styles={
{
buttonClose: {
display: 'none',
},
}
}
Situation:
I'm using React in a Meteor app.
My packages for authentication: accounts-password; useraccounts:core
I also use the gadicc:blaze-react-component to render the {{> atForm }} template in my react component =><Blaze template="atForm" />
Problem:
I don't know what should be the proper syntax to secure a specific page as described in the useraccounts guide but with react.
Lets suppose that I want to secure <Mypage /> imported from './mypage.jsx'
How can I call {{> ensureSignedIn template="myTemplate"}} and reaplace "myTemplate" by <Mypage /> ?
I tried <Blaze template="atForm" template={Mypage} /> without success...
Is it even possible to make something like this ?
You can check Meteor.userId() in ComponentWillMount(), set state and check it in render(). Or use some kind of checkings in your router
I found a solution:
With kadira:flow-router Meteor's package, using react-layout and useraccounts:flow-routing, I can do something like that:
FlowRouter.route('/private', {
triggersEnter: [AccountsTemplates.ensureSignedIn],
action: function() {
ReactLayout.render(Mypage, {myprops: myprops.value});
}
});
It seems that it all happens into triggersEnter: [...] key.
More details here.
I'm currently getting used to using FlowRouter after a while using Iron Router and trying to set up some best practices. I'm subscribing to my collection at a template level.
Previously I've waited for a template to render using onRendered and then targeted my input field and applied focus(), however I am now trying to only show my template in Blaze when the subscriptions are ready using the following (please excuse the Jade but I think it's pretty clear in this case)
template(name="subjectNew")
unless Template.subscriptionsReady
+spinner
else
form
input(type="text" name="name")
So the basic idea is that until the subscriptions are ready the spinner shows. The issue I'm having is that now even when the template renders, the focus won't apply. I've tried various methods of wrapping it in an autorun call but not sure the best way of trying to target the first field when combined with this approach?
Template.subjectNew.onRendered(function() {
console.log('rendered');
$('input').first().focus();
});
Is it possible?
Many thanks for any ideas.
Your subjectNew is considered rendered even when it is only showing the spinner. Just stick your:
form
input(type="text" name="name")
Into a separate template and then attach your focus code to the onRendered handler of that other template.
template(name="subjectNew")
unless Template.subscriptionsReady
+spinner
else
+myForm
template(name="myForm")
form
input(type="text" name="name")
js:
Template.myForm.onRendered(function(){
$('input').focus()
});
I think using an autorun would be a good approach but then you would have to employ Tracker.afterFlush() to wait to set the focus after the form is rendered.
Something like:
Template.subjectNew.onRendered(function() {
this.autorun(() => {
if (this.subscriptionsReady()) {
Tracker.afterFlush(() => $('input').first().focus());
}
});
});
I have a polymer component(lets call it component-one) which exposes an attribute value. I want to use this in another polymer component which has an Observable list property called data. I want to do the following:
<template repeat="{{obj in data}}">
<component-one value="{{obj}}"></component-one>
</template>
But it generates error saying that there is no "obj=" method.
Can somebody let me know how to data-bind a read-only property to a read-write attribute?
Thanks for your time!
Seems you are running into this bug https://code.google.com/p/dart/issues/detail?id=17981. This bug seems to be fixes for about 6 weeks.
You should check that you use a recent Dart version and a recent Polymer package.
If this doesn't help please add a comment.
I am trying to make enabled="false" to one form field in my flex application. But the appearance of the field after disabling it
is looking furious. I want to change the look of the field after disabling it in my way. So can i change the look and feel of a field after disabling it ?
Thanks in advance...
I think you have to write a skin for your component.
Every skin has different states for skinning. In your case, you have to write skin for disabled state.
To get started, this tutorial might be useful - http://www.adobe.com/devnet/flex/articles/flex4_skinning.html
For detailed information on skinning, please visit http://help.adobe.com/en_US/flex/using/WSC8DB0C28-F7A6-48ff-9899-7957415A0A49.html
Yes.
Concept: -
Use constraint based layout concept.
If you are using actionscript use move()
Ex: -
button.move(100,100);
if(button.visible)
{
button1.move(button.x + button.height + 5,button.y);
}
so on....
Please add some code so that we can suggest what exactly you are looking for.