I have two components List and Form. Onthes components, i'm using Dropzone
I disabled click, just Drag and Drop is possible
But, on the form component, I would like to add a button, wich enable to add a dcument in browsing.
In the form component, I call my component dropzone
<UploadZone onupload={this.props.onCreateDocument} onsuccessupload={this.uploadedfile} lastfileupload={this.props.lastuploadfile} />
I've added my button :
<RaisedButton label="Add" primary={true} onClick={this.browseDz}/>
browseDz = () => {
}
I don't know how call Dropzone on the button to add a document
Thank you for yours answers
You wouldn't use Dropzone for this part, you implement it yourself. You could use the trick where you put this button in a <label htmlFor={id}> and have a file input with the same id. You'll have two ways of receiving files, so just store the latest selection from the user in one state key.
Related
I am working with antd Datepicker and I want custom Datepicker component look like this.
Now, I use prop renderExtraFooter to add custom footer. My input time in footer is other lib (react-datepicker). My problem is here. I can't change, select, focus any input render in extra footer. I want my input time can use (select, change, focus, ...) but I don't know how to do this.
Here is my trying code: https://codesandbox.io/s/antd-custom-antd-12hgbd
I try .blur() antd Datepicker input but still not work.
Any can help me or tell me a lib to custom DatePicker look like picture. Thank for your help.
The only solution is kind of an hack & you will need to handle open & closing of the panel via a state variable.
<DatePicker
showToday={false}
open={true}
renderExtraFooter={() => (
<div onMouseDown={(e) => e.stopPropagation()}>
<input />
</div>
)}
/>
If you remove the open={true} prop, the input will focus but the picker will close immediately. You need to control the visibility of the panel with the open property.
So, I'm trying to use Semantic UI modal component with the form component.
My problem is that if I use these two together the UI becomes bad.
I created a sandbox about my current situation: https://codesandbox.io/s/2n1pj96ry
As you can see now the submit button does not attached to the form.
If I move the Form component directly inside the Modal component, like this:
<Modal...>
<Form>
...
</Form>
</Modal>
the submit will attached to the form, but the UI breakes down.
I tried to add different classes to these components (like ui modal to the Form component, but it doesnt worked well).
Do you have any suggetsion?
Thanks for you help!
You can use the as prop on the Modal to make it a form element.
<Modal
as={Form}
onSubmit={e => handleSubmit(e)}
open={true}
size="tiny">
Any button with the submit type in your modal will fire the onSubmit handler. I find this to be a nice way to opt-in to required fields and easy validation by the browser on form elements.
Be sure to pass the event to your submit handler and use the preventDefault method to avoid the browser from automatically trying to post your form.
Forked your sandbox and made a working example. The modal is changed to a <form> element, the Input has the required property and the browser will demand the element is valid before firing the onSubmit handler. The default form action is prevented, and you can handle as desired with whatever.
I'm fairly new to React and I'm using the Ant Design framework (https://ant.design/).
I have a table list of items that I'm looking to have a button on each so that when it is pressed additional information about that row becomes available (which is a secondary API call specific to that row).
I'm trying to use a popover but I'm noticing that the popover wants the text before being rendered which is a problem since I don't have that information until the second API call. The best idea I've come up so far is to have the button press trigger the api call and then the state is updated but that creates a funky experience (as it is update after the popover is already opened - after starting with the previous rows information). It isn't a huge amount of time but it still isn't an ideal experience.
This is what I have so far:
<Popover content={this.contentSec([record['section']])} title=
{record['section']} trigger="click">
<Button onClick={() => this.sectionAttributes(record['section'])}>
<Icon type="info-circle-o" />
</Button>
</Popover>
this.sectionAttributes triggers my fetch request. and this.contentSec does the formatting on the existing popup (see below).
contentSec(props) {
const listItems = this.state.attributes.map((item) =>
<li>{item}</li>
);
return <div><ul>{listItems}</ul></div>
}
Any ideas of a better way to handle this so that there isn't that buggy delay when clicking the button for the popover?
Thanks.
As the content is populated after the second api call, You can send two props content which can be empty string or any default value and loading variable as true on click. Once you have the data after the API call you can send the updated props ie content with actual text and loading as false and finally handle your logic and state update in componentwillrecieveprops() in the popover component.
You can use the loading prop to switch from a loader initially to the actual content.
Write a condition to check if the response from this.sectionAttributes(record['section'] is true, if it is true then
<Popover content={this.contentSec([record['section']])} title=
{record['section']} trigger="click">
<Button onClick={() => this.sectionAttributes(record['section'])}>
<Icon type="info-circle-o" />
</Button>
</Popover>
else simply use
<Button onClick={() => this.sectionAttributes(record['section'])}>
<Icon type="info-circle-o" />
</Button>
For the first time user clicks on button, the component rerenders and state gets updated, so when it rerenders you can see popover as the if condition satisfy.
I am trying to add labels to nested <SpeedDialAction /> components, and have button text displayed next to icons like so:
but it seems like children do not get rendered:
...
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
onClick={this.handleClick}
>
Foo
</SpeedDialAction>
...
I also tried using the ButtonProps prop as listed in the docs but that did not do the trick either.
I take a look at the SpeedDialAction source code https://github.com/mui-org/material-ui/blob/6f9eecf48baca339a6b15c5fcfb683cba11e4871/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
The title of Tooltip only shows on hover, but it can be easily done by changing default state to true, eg: state={ tooltipOpen: true } in SpeedDialAction.js file.
However, Tooltip component in SpeedDialAction has no reference, so there is no easy way to setState from outside.
The easiest solution is to create a custom SpeedDialAction component.
SpeedDialAction component contents only Tooltip and Button, which it's hard to modify.
There is the codesandbox https://codesandbox.io/s/9zpyj4o0zo
You can simply add SpeedDialAction.js file to your project.
Update:
Removed onClose event in Tooltip in codesandobox. Fixed the problem where title disappear after click.
I am trying to get a form working inside of a Material UI Dialog component. If I wrap the Dialog in the form tags, they do not even show up in the resulting html (no idea why yet)...
<form onSubmit={someFunction}>
<Dialog>
...
</Dialog>
</form>
If I reverse it and put the form tags inside the Dialog, the form elements show up in the resulting html, but then the action button set to type="submit" will not fire the form's onSubmit.
<Dialog>
<form onSubmit={someFunction}>
...
</form>
</Dialog>
Has anyone had any success getting this combination to work? I know I can just call the function directly from the action button click, but I am also using Redux Form and have other non-dialog forms in the app, so I have it bound to the form element. So I really need to invoke the form submit from a Dialog somehow.
Actually - I have/had the onSubmit={handleSubmit(this.myFunction)} to begin with and that was not the issue. The issue turned out to be how Material UI mounts the Dialog (which apparently is different than react-toolbox). They mount it on the body - I assume for easier positioning - so anything outside of the Dialog is ignored.
With the form inside the Dialog, the buttons are outside the form (which is again apparently different than react-toolbox). So to make it work, you have to use the HTML 5 'form' attribute as detailed here (along with a poly-fill for older browsers if needed). The form needs an id attribute and then the button outside it needs a form attribute with the value set to the id of the form. Then the form elements inside the dialog behave as expected. Thanks for the response though!
The material-ui Dialog component inherits from the material-ui Modal component, which means it accepts the prop "disablePortal" - which is false by default.
from the docs:
"Disable the portal behavior. The children stay within it's parent DOM hierarchy."
https://material-ui.com/api/modal/#props
by default, the dialog is rendered as a child of your root html node, to have it render inside the <form> tag, you need to disable the portal behavior.
<form onSubmit={someFunction}>
<Dialog disablePortal>
<DialogTitle>
title!
</DialogTitle>
<DialogContent>
form fields go here
</DialogContent>
<DialogActions>
<button type="submit">submit!</button>
</DialogActions>
</Dialog>
</form>
<form onSubmit={someFunction}>
<Dialog disablePortal>
<DialogTitle>
title!
</DialogTitle>
<DialogContent>
form fields go here
</DialogContent>
<DialogActions>
<button type="submit">submit!</button>
</DialogActions>
</Dialog>
</form>
Hey yeah I have this combo working... well I am using the Dialog component from react-toolbox which is very similar to Material-ui but they use Css-modules for styles instead of inline.
So the function you provide to the onSubmit attribute of the form element is going to be the handleSubmit function from redux-form. If you want to do anything such as dispatch actions and store the data then you will need to pass in an onSubmit function to the handleSubmit function. What happens is your onSubmit function is called with the values(object with properties of the values of your form) and the dispatch function from the redux store. You can see the project I have which has the setup you are looking for.
Instead of onSubmit={someFunction}, make it
<Dialog>
<form onSubmit={this.someFunction}>
...
</form>
</Dialog>