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.
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.
I'm using the OverlayTrigger component to get hover behavior for tooltips, and therefore not using the Overlay component directly. The Overlay component has a container property that I'd like to use to remedy the tooltip getting cut off by its natural container element.
I've attempted to pass a popperConfig object, but that's not working. I've also tried adding a container attribute to the OverlayTrigger component.
<Container fluid className='flex-fill' ref={rowContainer}>
...
<OverlayTrigger delay={{show: 500}} overlay={renderUserTooltip}
popperConfig={{container: rowContainer}}>
<FaUser/>
</OverlayTrigger>
How can I set the container for the Overlay when the Overlay component isn't directly used?
React bootstrap doesn't have a container prop or something similar (I mean it has a target prop but as this part of the docs suggests, for the OverlayTrigger the type is null, so it doesn't accept values and I don't think you can trick it to accept (and I don't think it would be wise to try).
But a pretty nice example, that shows some sort of a workaround in my opinion, can also be find in the docs, under customizing-trigger-behavior.
Starting from that example, if you need your trigger to be totally separated from the container an option is to just wrap everything in a big container that receives ({ ref, ...triggerHandler }) and all is left is to give your container the ref, and the trigger to your FaUser component. So something like:
<OverlayTrigger
placement="bottom"
overlay={<Tooltip id="button-tooltip-2">Check out this avatar</Tooltip>}
>
{({ containerRef, ...triggerHandler }) => (
<Container fluid className='flex-fill' ref={containerRef}>
...
<FaUser/>
</Container>
)}
</OverlayTrigger>
I also created a sandbox with a minimal reproducible example.
I am using an ant design modal on my site which is internationalized. The modal works fine for all languages except Arabic. When it is on Arabic, when you click the 'next' button, it should show you the next page of the modal, but it just shows a blank modal. I suspect because Arabic is a RTL language, this issue would be solved if I could get the modal to slide in the other direction when the user hits next. I see on Ant Design's documentation they have some mention of RTL functionality on the modal page, but I'm not sure how to implement it. It says
Modal.method() RTL mode only supports hooks.
but i'm not sure what it means by that.
On this configuration page it mentions a direction prop, but I passed it a string "rtl" and that didn't seem to have an effect. It says the prop type should be rtl or ltr, so it shouldn't take a string?
Use configProvider and wrap all antd components in it with direction="rtl". you can also apply it conditionally: direction={condition ? "rtl" : "ltr"}.
import { ConfigProvider } from 'antd';
// ...
export default () => (
<ConfigProvider direction="rtl">
<App />
</ConfigProvider>
);
Reference: https://ant.design/components/config-provider/?theme=dark#header
I am happy I can use font-awesome in my projects. I want to put some bars as my open/close button for my menu. The icon itself is not clickable, but the small area between the icon and the border still activates the onClick. The console.log I put in my event handler shows that the icon does not pass the 'name' property needed to activate the state change. Does anyone know how to get around this?
I have tried wrapping it in span and i elements. The icon does show up, but is just not activating the onClick, probably because it is not passing the 'name' property.
My event handler:
menuClick(event) {
/*event.preventDefault();*/
const name = event.target.name;
console.log(name);
this.setState({[name]:!this.state[name]})
}
My button:
<button
name="menuOpen"
style={props.data.menuOpen ?
buttonStyle :
null}
onClick={props.menuClick}
className="menuOpenButton">
<FontAwesomeIcon name="menuOpen" icon="bars" size="3x" />
</button>
and the props are being passed to the child like this:
<Header
data={this.state}
menuClick={this.menuClick} />
Changing the event handler to look for the currentTarget fixed it.
const name = event.currentTarget.name
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.