We Keep Coding

dropdownClassName datepicker to disable animation or transition

is there a way to disable dialog animation of RangePicker or DatePicker in antd?
https://codesandbox.io/s/antd-datepicker-forked-129d43?file=/src/App.js:581-615
<RangePicker open={open} />
I would like the dialog to open instantly
I tried to add
<RangePicker open={open} dropdownClassName="something" />
and apply transition: none; and animation: 0; it doesn't work

just apply this
.ant-calendar-picker-container {
animation:none !important;
}
https://codesandbox.io/s/antd-datepicker-forked-n6vtsv

React js material-ui textfield endAdornment background

I followed the instructions found here: https://stackoverflow.com/a/61708197/8024296
But the example code doesn't seem to work anymore.
How can I do such a thing, but without that margin on the right is that it follows the rounded trend of the input field.
I tried the following, but it doesn't seem to work:
<TextField
label="Name File"
id="outlined-start-adornment"
className={clsx(classes.margin, classes.textField)}
InputProps={{
endAdornment: <InputAdornment position="end">.docx</InputAdornment>,
classes: {
adornedEnd: classes.adornedEnd
}
}}
variant="outlined"
/>
Link: codesandbox
Can you give me a hand?

Your code is working as expected to achieve the desired style I suggest adding this line of code:
background: 'linear-gradient(-90deg, #CCC 30%, #FFF 30%)'
instead of backgroundColor: "#ccc".
Happy coding!

you were so close just addjust your code to be like this
adornedEnd: {
backgroundColor: "#ccc",
height: "2.4rem",
maxHeight: "3rem",
}
And modify InputProps as follow:
InputProps={{endAdornment: <InputAdornment className={clsx(classes.adornedEnd)} position="end">.docx</InputAdornment>,
style: {
paddingRight: "0"
}}}
this will solve the problem
a working example on codepen.io
a working example on codesandbox.io
(be careful you can edit it)

React How to remove the animation of Material-UI Select

I'm using the React Material UI's Select Component. I wish to remove or speeden the animation that comes when the menu is opening. I tried something like:
<Select
...
TransitionComponent={({children}) => children}
>
<MenuItem value={...}>...</MenuItem>
...
</Select>
But this is not working, please help

add this to your stylesheet:
.MuiMenu-paper {
transition-duration: 0s !important;
}
This basically overrides the transition duration of the select dropdown and sets it to 0 seconds.
You can also change the duration according to what you like (make it faster). The default animation duration is:
transition-duration: 251ms, 167ms;

The reason why it doesn't work:
MUI <Select /> API don't have props TransitionComponent, as well as some other components like <Tooltip /> do have
Refer: API document of
MUI Tooltip
MUI Select
Related QA: React Material UI Tooltips Disable Animation
Solution
Override the transition style would be fine.
div.MuiPaper-root {
transition: none !important;
}
Explanation
The HTML structure for options:
Since it's been dynamically generated outside the main component, it's not suitable for us to directly set styles for them.
However, we can optionally override the styles by those classNames like MuiPaper-root, or some other ways like a given id.
<div
class="MuiPaper-root MuiMenu-paper MuiPopover-paper MuiPaper-elevation8 MuiPaper-rounded"
tabindex="-1"
style="opacity: 1; transform: none; min-width: 40px; transition: opacity 251ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 167ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; top: 16px; left: 16px; transform-origin: -8px 7.7px;"
>
<ul
class="MuiList-root MuiMenu-list MuiList-padding"
role="listbox"
tabindex="-1"
>
...
</ul>
</div>;

To add to keikai's answer, you can also do this globally with a theme change:
const theme = createMuiTheme({
overrides: {
MuiPaper: {
root: {
transition: 'none !important'
},
},
}
});

For those that are using a corresponding Material UI InputLabel component with a mui Select component, I was able to pass in the following props to the InputLabel component to disable the animation and shrink altogether:
<div>
<FormControl>
<InputLabel
disableAnimation={true}
shrink={false}
...
>
{`some label`}
</InputLabel>
<Select>
{`...`}
</Select>
</FormControl>
</div>
MUI Input Label API

How to set default font family and size in draft.js

I am learning draft.js editor and can't find how to configure default font-family and font size.
I tried this way:
let editorState = EditorState.createEmpty();
let newState = RichUtils.toggleBlockType(
editorState,
'aligncenter'
);
newState = RichUtils.toggleInlineStyle(
newState,
'FONT_SIZE_36'
);
newState = RichUtils.toggleInlineStyle(
newState,
'TIMES_NEW_ROMAN'
);
What is weird, aligncenter style works fine, but font size and family disappears when component gets focus.
Can you please suggest correct way how to do it?

Using RichUtils.toggleInlineStyle() is for modifying the currently selected range of text (or setting the inline style for text that will be entered at the current cursor position). There is not a way to use this to set the default inline styles for the entire document (nor is this recommended).
To get default styles, you should use CSS and set the styles you want for the entire editor. Then you should override those styles for specific text ranges using toggleInlineStyle when the user wants a non-default style (for instance selecting font-size from a dropdown).
Here's the catch. Currently you can pre-define these inline styles using styleMap but you can't really create them on-the-fly as a user chooses an arbitrary font-family (or size or color).
I have been struggling with this also while trying to implement a color-picker for react-rte.org.
(Technically, you can add styles on the fly, but it won't trigger a re-render, so that's not really usable.)
There is an open issue for this here:
https://github.com/facebook/draft-js/issues/52
I expect this will be resolved within a week or so and I can edit this answer with example code to accomplish what you're after.

if your trying to set the default font size in draft.js Editor just set up your component like this below
notice the div that is wrapped around the Editor, EmojiSuggestions, and mentionSuggestion components. Just set the className for the editor to your font size. in my case it is fs-1. Note I have added an editorStyles.editor class that is coming from an attached scss file. This contains some scss for the editor.
Here is what the scss looks like, no need to add this though if you are just trying to edit the default font style
Just showing this, but not needed to set default font size. That is done in div wrapper
.editor {
box-sizing: border-box;
border: 1px solid #ddd;
cursor: text;
padding: 16px;
border-radius: 2px;
margin-bottom: 9px;
box-shadow: inset 0px 1px 8px -3px #ABABAB;
background: #fefefe;
}
.editor :global(.public-DraftEditor-content) {
min-height: 140px;
}
.mention {
color: #2c7be5
}
<div
style={{minHeight: "7em", maxHeight: "10em", overflow: "auto"}}
className={`border border-2x border-300 bg-light rounded-soft fs-1 ${editorStyles.editor}` }
onClick={() => { messageFieldRef.current.focus(); }}
>
<Editor
editorKey={'editor'}
currentContent={ContentState}
editorState={tempEditorState ? tempEditorState : editorState}
onChange={setEditorState}
plugins={plugins}
ref={messageFieldRef}
/>
<EmojiSuggestions />
<MentionSuggestions
open={open}
onOpenChange={onOpenChange}
suggestions={suggestions}
onSearchChange={onSearchChange}
onAddMention={(e) => {// get the mention object selected
}}
entryComponent={Entry}
/>
</div>
<div>
<EmojiSelect closeOnEmojiSelect />
<span color="light" className="px-3 py-1 bg-soft-info rounded-capsule shadow-none fs--1 ml-3" >
<FontAwesomeIcon icon="tags" transform="left-3"/>
Press <strong>#</strong> while typing to insert custom fields
</span>
</div>

tooltip div with ReactJS

objective
I have a div that I want to make act like a tooltip with reactjs.
HTML
<div>on hover here we will show the tooltip</div>
<div>
<div class="tooltip_custom">this is the tooltip!!</div>
</div>
I am used to angularjs using the ng-show with a condition on the <div> , I was wondering if there is such binding in reactjs , or else how can I do this functionality ?
Thanks

You can make your component to return the following markup
return (
<div>
<div onMouseOver={this.handleMouseIn.bind(this)} onMouseOut={this.handleMouseOut.bind(this)}>on hover here we will show the tooltip</div>
<div>
<div style={tooltipStyle}>this is the tooltip!!</div>
</div>
</div>
);
Where tooltipStyle is assigned like this:
const tooltipStyle = {
display: this.state.hover ? 'block' : 'none'
}
So tooltip depends on component state, now in handleMouseIn and handleMouseOut you need to change component state to make tooltip visible.
handleMouseIn() {
this.setState({ hover: true })
}
handleMouseOut() {
this.setState({ hover: false })
}
Here is working example.
You can start diving in React with this article: Thinking in React.

One option is just to do it in CSS. It's not quite as flexible, but with markup like:
<div className="tooltip-on-hover">Hover here</div>
<div className="tooltip">This is the tooltip</div>
You could do:
.tooltip {
...
visibility: hidden; /* Or display: none, depending on how you want it to behave */
}
.tooltip-on-hover:hover + .tooltip { /* Uses the adjacent sibling selector */
visibility: visible; /* Or display: block */
}
Example:
.tooltip { display: none; }
.tooltip-on-hover:hover + .tooltip { display: block; }
<div class="tooltip-on-hover">Hover here</div>
<div class="tooltip">This is the tooltip</div>
You could also nest the tooltip inside the element so you could use a normal descendant selector like .tooltip-on-hover:hover .tooltip. You could even use a ::before or ::after pseudo-element, there are guides around on how to do this.

I think whatever you want to show as tooltip, just add that to the "title" of the div where you want to show it.
Eg:
<div title="I am the tooltip text">I am the div where you should hover</div>
But if its a custom designed div then go as the answers given before.

Install npm package:
npm install react-tooltip
Usage:
import ReactTooltip from "react-tooltip";
<div data-tip="msg to show" data-for='toolTip1' data-place='top'>Tooltip</div>
<ReactTooltip id="toolTip1" />

You can also use React Mapple ToolTip which is easy to use and customize and also comes with predefined themes.
Disclaimer: I am the author of this library
reactjs-mappletooltip

You can use react-tooltip package. Super easy to use and handy also.
Installation: npm i react-tootip.
Example:
1. import it :
import ReactTooltip from "react-tooltip"
Include it in your component:
<div className="createContent">
**<ReactTooltip />**
<div className="contentPlaceholder">
add tool tip to your button/div or any element: data-tip="add tooltip message"
<button className="addSection" data-tip="add tooltip message" onClick={() => this.onAddChild()}>+</button>
package url: https://www.npmjs.com/package/react-tooltip

import Tooltip from "#material-ui/core/Tooltip";
const HtmlTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: 'rgba(255,250,228)',
color: 'rgba(0, 0, 0, 0.87)',
maxWidth: 400,
fontSize: theme.typography.pxToRem(12),
border: '1px solid #dadde9',
},
}))(Tooltip);
headerName: 'FEEDBACK',
field: "remarks",
flex: 0.30,
renderCell: (params: GridCellParams) => (
<Grid>
<HtmlTooltip title={params.value} placement="bottom">
<Typography style={{ color: "inherit", cursor: "pointer" }}>{params.value}</Typography>
</HtmlTooltip>
</Grid>
)

In case, if you are using react-bootstrap in your project, then use https://react-bootstrap.github.io/components/overlays/ Overlay with the tooltip.
MouseEnter and MoverLeave need to be used though.
<OverlayTrigger
placement="right"
delay={{ show: 250, hide: 400 }}
overlay={renderTooltip}>
<div>on hover here we will show the tooltip</div>
</OverlayTrigger>