Hi I am using bootstrap 5.2.1 and react-bootsrap 2.5.0 in my project. I am trying to use a tooltip with component. But when I hover over the badge tooltip overflows from the page and scrollbars mementarily activates. then it fixes itself. but this causes a flicker on the page. Am I missing something? here is the component
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import { Badge, OverlayTrigger, Tooltip } from "react-bootstrap";
import { BugFill, Globe, ListTask, PcDisplay, Search, Wrench, } from "react-bootstrap-icons";
function TaskTypeDisplay(props) {
const getType = (taskType) => {
let itaskType = parseInt(props.taskType)
switch (itaskType) {
case 1:
return { color: "bg-warning text-dark", object: <Wrench /> };
case 2:
return { color: "bg-warning text-dark", object: <Globe /> };
case 3:
return { color: "bg-primary", object: <PcDisplay /> };
case 4:
return { color: "bg-danger", object: <BugFill /> };
case 5:
return { color: "bg-dark", object: <Search /> };
case 6:
return { color: "bg-primary ", object: <ListTask /> };
default:
return { color: "bg-primary", object: "" };
}
}
return (
<>
<OverlayTrigger placement="right"
overlay={
<Tooltip >
aaaaaaaaaa
</Tooltip>
}
>
<Badge className={getType(props.taskType).color}> {getType(props.taskType).object} </Badge>
</OverlayTrigger>
</>);
}
export default TaskTypeDisplay;
"wrong positioning" is my guess. I am not sure.
Related
I have used react simple maps, and want to add a custom zoom control to change zoom levels based on button clicks.
import React, { memo, useState } from "react";
import {
ZoomableGroup,
ComposableMap,
Geographies,
Geography
} from "react-simple-maps";
import ReactTooltip from "react-tooltip";
const geoUrl = "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json";
export const MapChart = () => {
const [tooltipContent, setTooltipContent] = useState("");
const [zoomLevel, setZoomLevel] = useState(1);
return (
<>
<ComposableMap height="400" data-tip="" projectionConfig={{ scale: 100 }}>
<ZoomableGroup zoom={zoomLevel} >
<Geographies geography={geoUrl}>
{({ geographies }) =>
geographies.map(geo => (
<Geography
// key={geo.rsmKey}
geography={geo}
onMouseEnter={() => {
const { NAME, POP_EST, POP_RANK } = geo.properties;
setTooltipContent(`${NAME} — ${POP_RANK}`);
}}
onMouseLeave={() => {
setTooltipContent("");
}}
style={{
default: {
fill: "#D6D6DA",
outline: ["black"]
},
hover: {
fill: "blue ",
outline: "none"
},
pressed: {
fill: "blue",
outline: "none"
}
}
}
/>
))
}
</Geographies>
</ZoomableGroup>
</ComposableMap >
<ReactTooltip>{tooltipContent}</ReactTooltip>
<button onClick={() => setZoomLevel(zoomLevel + 1)}>zoom</button>
<div>legends</div>
</>
);
};
export default memo(MapChart);
unfortunately, when i try to change the zoom, I end up with the following error -
zoom.js:91 Uncaught TypeError: selection.interrupt is not a function
at push../node_modules/d3-zoom/src/zoom.js.__webpack_exports__.default.zoom.transform (zoom.js:91)
at Selection.call (call.js:4)
at index.umd.js:1
at commitHookEffectListMount (react-dom.development.js:19731)
at commitPassiveHookEffects (react-dom.development.js:19769)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at flushPassiveEffectsImpl (react-dom.development.js:22853)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushPassiveEffects (react-dom.development.js:22820)
at react-dom.development.js:22699
at workLoop (scheduler.development.js:597)
at flushWork (scheduler.development.js:552)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:164)
Basically, the zoom doesnt work for any values othen 1.
I have installed npm i ckeditor4 to my stencil project and I have used it like this. But Im not getting the ckeditor, tell me where to add the script tag I am completely new to stencil
ui-editor.tsx
import { Component, h } from '#stencil/core';
#Component({
tag: 'ui-editor',
styleUrl: 'style.scss',
shadow: true
})
export class UiEditor {
render() {
return (
<div id="editor">
<p>This is the editor content.</p>
</div>
)
}
}
As said in the documentation https://www.npmjs.com/package/ckeditor4 where should I add the scripts
<script src="./node_modules/ckeditor4/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'editor' );
</script>
Try removing the script tag from your index.html file. The following component will automatically add the script tag from unpkg.
Example on webcomponents.dev
import { h, Component, State, Host } from "#stencil/core";
#Component({
tag: "ck-editor"
})
export class CkEditor {
_textarea: HTMLTextAreaElement;
componentWillLoad() {
return this.appendScript();
}
componentDidLoad() {
//#ts-ignore
let editor = CKEDITOR.replace(this._textarea, {
width: "99%",
height: "300px",
});
}
private async submit() {
// #ts-ignore
console.log(
CKEDITOR.instances[
this._textarea.nextSibling.id.replace("cke_", "")
].getData()
);
}
appendScript() {
return new Promise((resolve) => {
if (document.getElementById("ckeditor-script")) {
resolve();
return;
}
const ckeditorScript = document.createElement("script");
ckeditorScript.id = "ckeditor-script";
ckeditorScript.src = "https://unpkg.com/ckeditor4#4.14.1/ckeditor.js";
ckeditorScript.onload = () => resolve();
document.body.appendChild(ckeditorScript);
});
}
render() {
return (
<Host>
<textarea ref={(el) => (this._textarea = el)}></textarea>
<button onClick={() => this.submit()}>Submit</button>
</Host>
);
}
}
You should be able to import ckeditor but I haven't tested to see how that handles in rollup. The project I was recently working on was already loading ckeditor from unpkg so we went that direction instead.
I have a program that includes some nested custom elements. The leaves of one of these component's shadowRoot contains instances of an element like <div contentEditable>. In Chrome79 and Chromium-Edge-Beta the contentEditable feature works as one would expect it to - that is, the elements focus when you click or tab to them, show a focus outline, and are editable. In FireFox72 they behave erratically, mainly in that clicking on one will focus on it only some of the time, and that while they can be tabbed to, they do not focus such that they can be typed into.
After some whittling, I think I've arrived at a minimal reproduction. It is two custom elements: A root element ce-main and the leaf element ce-leaf that is instantiated arbitrarily many times from within ce-main and attached to ce-main's shadowRoot.
class Main extends HTMLElement {
constructor() { super(); }
connectedCallback() {
this.attachShadow({mode: "open"});
this.shadowRoot.innerHTML = `
<style>
[contentEditable] {
min-height:2em;
padding:.5em;
border:1px dashed rgba(0,0,0,.0625);
}
[contentEditable]:empty::before {
color: rgba(0,0,0,.15);
content: "You should be able to focus and type here.";
cursor:text;
}
</style>
<div id="container" style=""></div>`;
customElements.whenDefined("ce-leaf").then(
() => this.constructFromSomeDataSource()
);
}
constructFromSomeDataSource() {
let rows = [];
for (let i = 0; i < 4; i++) {
let leaf = document.createElement("ce-leaf");
this.shadowRoot.querySelector("#container").appendChild(leaf);
};
}
}
class Leaf extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<div contentEditable></div>
`;
}
}
customElements.define("ce-main", Main);
customElements.define("ce-leaf", Leaf);
<ce-main></ce-main>
If we do without the shadowRoot, everything is nicely focusable in Chrome/EdgeBeta/Firefox:
class Main extends HTMLElement {
constructor() { super(); }
connectedCallback() {
customElements.whenDefined("ce-leaf").then(
() => this.constructFromSomeDataSource()
);
}
constructFromSomeDataSource() {
let rows = [];
for (let i = 0; i < 4; i++) {
let leaf = document.createElement("ce-leaf");
this.appendChild(leaf);
};
}
}
class Leaf extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<div contentEditable></div>
`;
}
}
customElements.define("ce-main", Main);
customElements.define("ce-leaf", Leaf);
[contentEditable] {
min-height:2em;
padding:.5em;
border:1px dashed rgba(0,0,0,.0625);
}
[contentEditable]:empty::before {
color: rgba(0,0,0,.15);
content: "You should be able to focus and type here.";
cursor:text;
}
<ce-main></ce-main>
Can anyone verify if this is a bug in FF, or if I am simply doing something that is not in line with how it should be done in FF?
Had to dig through many Firefox/Focus posts.
Similar behaviour in a FireFox bug going back some 6 years: https://bugzilla.mozilla.org/show_bug.cgi?id=904846
Workaround
Found the best approach here: Clicking outside a contenteditable div stills give focus to it?
Handle the contenteditable attribute and setting focus() yourself with click & blur events:
(note: leafCounter is valid CSS, just does not work in StackOverflow inline code, works in JSFiddle)
class Main extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.attachShadow({ mode: "open" })
.innerHTML = `<style>
ce-leaf div {
padding: .5em;
cursor: text;
counter-increment: leafCounter;
}
ce-leaf div:empty::before {
color: lightgrey;
content: "placeholder text #" counter(leafCounter);
}
[contenteditable]:focus{
background: lightgreen;
}
</style>` + "<ce-leaf></ce-leaf>".repeat(5);
}
}
class Leaf extends HTMLElement {
constructor() {
super();
let div = this.appendChild(document.createElement("div"));
div.addEventListener("click", evt => {
evt.target.contentEditable = true;
evt.target.focus();
});
div.addEventListener("blur", evt => {
evt.target.contentEditable = false;
});
}
}
customElements.define("ce-main", Main);
customElements.define("ce-leaf", Leaf);
<ce-main></ce-main>
<ce-leaf> IS an element!
You don't need that DIV inside a <ce-leaf> Custom Element...
JSFiddle version does the contenteditable on <ce-leaf>
https://jsfiddle.net/dannye/udmgL03p/
constructor() {
super();
this.addEventListener("click", evt => {
this.contentEditable = true;
this.focus();
});
this.addEventListener("blur", evt => {
this.contentEditable = false;
});
}
Update: Alas another Firefox with contenteditable bug: You can't select part of a text and replace it in the JSfiddle..
stick with the DIV inside an element solution.
I am trying the increment and decrement tutorial . When I type a number at the textinput, this value is to be reflected to the this text given. But I am getting error. The error says
undefined is not a function(evaluating 'this.props.counterSet(count)')
These are the codes that I have tried. Can anybody tell me where I have done the mistake.
Thank You
- App
-Actions
-ActionTypes.js
-CounterAction.js
-Reducers
-counterReducer.js
app.js
counterReducer.js
export default (state = 0, action) => {
switch (action.type) {
case 'SET':
return action.payload;
default:
return state;
}
}
counterAction.js
export const counterSet = (receivedNumber) => {
return {
type: 'SET',
payload: receivedNumber
}
}
ActionTypes.js
export * from './CounterAction';
app.js
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, TextInput, View, Button } from 'react-native';
import { connect } from 'react-redux';
import { counterSet } from './Actions/ActionTypes';
class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.onChangeText = this.onChangeText.bind(this);
}
onChangeText(number) {
let count = parseInt(number);
// alert("inside", count);
this.props.counterSet(count);
}
render() {
return (
<View style={styles.container}>
<TextInput
style={{ width: 40, height: 40, borderWidth: 1 }}
onChangeText={this.onChangeText}
value={this.props.count.toString()}
/>
<View style={styles.countViewStyle}>
<Text style={styles.welcome}>
{this.props.count}
</Text>
</View>
</View>
);
}
}
function mapStateToProps(state) {
return {
count: state
}
}
export default connect(mapStateToProps, { counterIncrement, counterDecrement, counterClear, counterSet })(App);
Change the import from
export * from './CounterAction';
to
export { counterSet } from './CounterAction;
Hope this will help!
I'm using react native v0.49 and I'm trying to implement custom transition when navigate to other page.
what I'm trying to do is to make transition only for one scene from scene 2 to scene3. but not for all the app.
this example I found it's for all web so I want to make just for one screen and for all the app because if I do that way it will effect for all the app and it's not what I'm looking for. any idea?
class SceneOne extends Component {
render() {
return (
<View>
<Text>{'Scene One'}</Text>
</View>
)
}
}
class SceneTwo extends Component {
render() {
return (
<View>
<Text>{'Scene Two'}</Text>
</View>
)
}
}
let AppScenes = {
SceneOne: {
screen: SceneOne
},
SceneTwo: {
screen: SceneTwo
},
SceneThree: {
screen: SceneTwo
},
}
let MyTransition = (index, position) => {
const inputRange = [index - 1, index, index + 1];
const opacity = position.interpolate({
inputRange,
outputRange: [.8, 1, 1],
});
const scaleY = position.interpolate({
inputRange,
outputRange: ([0.8, 1, 1]),
});
return {
opacity,
transform: [
{scaleY}
]
};
};
let TransitionConfiguration = () => {
return {
// Define scene interpolation, eq. custom transition
screenInterpolator: (sceneProps) => {
const {position, scene} = sceneProps;
const {index} = scene;
return MyTransition(index, position);
}
}
};
class App extends Component {
return (
<View>
<AppNavigator />
</View>
)
}
Here's an example of how we do it, you can add your own transitions to make it your own. Our goal was simply to expose the baked-in transition configurations to have more control over the animations. Our transition configuration: https://gist.github.com/jasongaare/db0c928673aec0fba7b4c8d1c456efb6
Then, in your StackNavigator, add that config like so:
StackNavigator(
{
LoginScreen: { screen: LoginScreen },
HomeScreen: { screen: HomeScreen },
},
{
stateName: 'MainStack',
initialRouteName: 'HomeScreen',
initialRouteParams: { transition: 'fade' },
transitionConfig: TransitionConfig,
}
);
Finally, when you navigate, just add your params when you navigate:
this.props.navigation.navigate('HomeScreen', { transition: 'vertical' })