Kindly help me with the Victory Native Config or for the below requirement:
The tooltip for Victory Pie should be active and remain active even after press out for the sector pressed. Also, all other tooltips for various pie sectors should close, only the one pressed recently should be active.
If this cannot be handled by Victory-Native out of the box, please guide me on how to do it otherwise.
This pretty much works for the requirement:
Note eventKey='all' in onPressIn to first to deactivate all the tooltips (label component should be tooltip) and then activate the required tooltip in onPressOut
<VictoryPie
...
labelComponent = {<VictoryToolTip/>}
events={[
{
target: 'data',
eventHandlers: {
onPressIn: ({nativeEvent}) => {
return [
{
// Add an event to reset all the points to the original color
target: 'labels',
eventKey: 'all',
mutation: () => ({active: false}),
},
];
},
onPressOut: ({nativeEvent}) => {
return [
{
target: 'labels',
mutation: () => ({active: true}),
}
];
},
},
},
]}
/>
Related
I'm using videojs to render youtube videos.
But I can't remove the video title, share button or youtube logo.
My videojs config:
React.useEffect(() => {
if (videoNode.current) {
const playerInstance = videojs(videoNode.current, {
...initialOptions,
...options,
BlockYoutubeButton: false,
});
setPlayer(playerInstance);
}
}, [videoNode?.current, options]);
Options:
const videoJsOptions = {
...optionsPlayer,
playing: true,
sources: [
{
type: "video/youtube",
src: optionsPlayer.urlVideoTY
? optionsPlayer.urlVideoTY
: "https://www.youtube.com/watch?v=hzqmRq56X8o",
},
],
techOrder: ["youtube"],
};
can someone help me to remove the buttons?
Thank you very much
I've already tried adding the css to override the class and adding diplay:none, but I can't access the iframe either.
I already tried to add the parameter: controls: false and controlBar: false in the videojs options, but it didn't work either
We're trying to use ag-grid to display and edit different types of data, for example a color. We have a react component that displays a set of colors for the user to choose from, with OK and CANCEL buttons that close the dialog (it's a MUI Dialog component) and calls a callback function prop with the selected color (if OK clicked).
We are able to get this dialog to display from the ag-grid cell, but can't figure out how to get the color returned to the cell. Currently the color dialog is defined as
const ColorChooser = ({initialColor, callback}) => {
const [color, setColor] = useState(initialColor);
const [open, setOpen] = useState(true);
and the OK button handler is simply
const okHandler = () => {
if (callback) {
callback(color);
}
setOpen(false);
}
where the open state opens / closes the MUI Dialog.
In another component we are able to display the dialog from the ag-grid based on the 'type' of the data in the grid cell:
//
// Return the appropriate editor based on the cell contents
const selectEditor = (params) => {
if (params.data.dataType === 'string') {
return (
{
component: 'agTextCellEditor',
params: params,
}
)
}
else if (params.data.dataType === 'color') {
return (
{
component: ColorChooser,
params: params,
popup: true,
popupPosition: 'under'
}
)
}
}
const [columnDefs] = useState([
{ field: 'property', lockPosition: 'left', resizable: true, sortable: true, flex: 1 },
{ field: 'value', editable: true, flex: 1, cellEditorSelector: selectEditor, cellRendererSelector: selectRenderer }
]);
and this is where we're stumped. The color dialog displays but we can't figure out how to get the selection back to the cell when the OK button is clicked.
In case it's not obvious I'm fairly new to react and ag-grid, apologies if this is too elementary. Thanks!
I have a React app with Fluent-UI 8 set up using npm install #fluentui/react according to the documents from Microsoft.
When I try their combobox or dropdown components, the dropdown list doesn't appear when clicked on it. I use their examples from the docs, which compiles without errors. But none of their examples work out of the box, and no other information is provided.
The problem is that the dropdown list does not appear when clicked on. Not in Edge, not in Firefox. When I check the elements on the page, I do not see the html elements with the list items, although I can cycle through them with the arrow keys. The list appears from the side when the window is tablet format, and setting ResponsiveMode did nothing. Whith a normal screen however, nothing is displaying, and no onchange events are fired.
This is my code for the dropdown:
import { IStackTokens, ResponsiveMode, Stack } from '#fluentui/react';
import { Dropdown, DropdownMenuItemType, IDropdownOption, IDropdownStyles } from '#fluentui/react/lib/Dropdown';
const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 300 } };
const DropdownControlledMultiExampleOptions = [
{ key: 'fruitsHeader', text: 'Spooler status', itemType: DropdownMenuItemType.Header },
{ key: 'apple', text: 'Apple' },
{ key: 'banana', text: 'Banana' },
{ key: 'grape', text: 'Grape' },
{ key: 'broccoli', text: 'Broccoli' },
{ key: 'carrot', text: 'Carrot' },
{ key: 'lettuce', text: 'Lettuce' },
];
export const DropdownList: React.FunctionComponent = () => {
const stackTokens: IStackTokens = { childrenGap: 20 };
return (
<Stack tokens={stackTokens}>
<Dropdown
placeholder="Select an option"
label="Disabled responsive"
options={DropdownControlledMultiExampleOptions}
styles={dropdownStyles}
responsiveMode={ResponsiveMode.unknown}
/>
<Dropdown
placeholder="Select an option"
label="Responsive with panel"
options={DropdownControlledMultiExampleOptions}
styles={dropdownStyles}
/>
</Stack>
);
};
Which I load in my app.tsx
function App() {
return (
<div className="App">
<DropdownList/>
</div>
);
}
Does anyone have an idea how I can get this to work? Or what is causing this?
EDIT and possible solution: It seems that removing the <React.Strict> tags in index.tsx does the job. Don't know why, but then the Fluid-UI controls work fine.
I am trying to display a Persona component on the far right of my CommandBar component, which I use as a header for my application.
Here's a code snippet
const getFarItems = () => {
return [
{
key: 'profile',
text: <Persona text="Kat Larrson" />,
onClick: () => console.log('Sort')
}
]
}
const FabricHeader: React.SFC<props> = () => {
return (
<div>
<CommandBar
items={getItems()}
farItems={getFarItems()}
ariaLabel={'Use left and right arrow keys to navigate between commands'}
/>
</div>
);
}
This throws a type error because the text prop expects a string and not a component. Any help would be appreciated!
Under the ICommandBarItemProps there is a property called commandBarButtonAs that the docs state:
Method to override the render of the individual command bar button.
Note, is not used when rendered in overflow
And its default component is CommandBarButton which is basically a Button
Basically there are two ways to do this.
Keep using Button, and apply your own renderer. Basically the IButtonProps you can add onRenderChildren which would allow you to add any Component such as Persona to render. This example would show you how it is done https://codepen.io/micahgodbolt/pen/qMoYQo
const farItems = [{
// Set to null if you have submenus that want to hide the down arrow.
onRenderMenuIcon: () => null,
// Any renderer
onRenderChildren: () => ,
key: 'persona',
name: 'Persona',
iconOnly: true,
}]
Or add your own crazy component not dependent on CommandBarButton but that means you need to handle everything like focus, accessibility yourself. This example would show you how it is done https://codepen.io/mohamedhmansour/pen/GPNKwM
const farItems = [
{
key: 'persona',
name: 'Persona',
commandBarButtonAs: PersonaCommandBarComponent
}
];
function PersonaCommandBarComponent() {
return (
);
}
I'll use my code as a reference:
export default class DrawingContainer extends Component {
static propTypes = {
onPolygonComplete: PropTypes.func
};
state = {
drawingMode: 'rectangle'
};
render() {
return (
<DrawingManager
drawingMode={this.state.drawingMode}
onPolygonComplete={polygon => {
this.setState({
drawingMode: ''
}, () => {
if (this.props.onPolygonComplete) {
this.props.onPolygonComplete(convertPolygonToPoints(polygon));
}
});
}}
onRectangleComplete={rectangle => {
this.setState({
drawingMode: ''
}, () => {
if (this.props.onPolygonComplete) {
this.props.onPolygonComplete(
convertBoundsToPoints(rectangle.getBounds())
);
}
});
}}
defaultOptions={{
drawingControl: true,
drawingControlOptions: {
position: window.google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
window.google.maps.drawing.OverlayType.POLYGON,
window.google.maps.drawing.OverlayType.RECTANGLE
]
},
rectangleOptions: polygonOptions,
polygonOptions
}}
/>
);
}
}
So there are two approaches I followed to try to toggle the drawing mode to default drag mode after first drawing.
Either I save the current drawing mode(polygon or rectangle) to my own state and pass it to DrawingManager. I set my default varialbe in state called drawingMode to 'rectangle', pass it to the DrawingManager and then, in the function onRectangleComplete, I set it as an empty string, and it works since the map initially loads with the rectangle mode. But once I click on one of the drawing control, it never stops drawing, even though the variable is being set to an empty string. So I think there's a breach of controlled component here.
The second approach I tried was to explicitly try and find the google DrawingManager class to use it's setDrawingMode function. But I tried using ref on drawing manager and then went to it's state, and was able to see it there, but then I read the variable name DO_NOT_USE_THIS_ELSE_YOU_WILL_BE_FIRED - I believe the library prevents this approach.
So how do I use the drawing controls along with changing the drawing mode back to the default after I complete my first drawing?
handlePolygonComplete(polygon) {
console.log(this);
const paths = polygon.getPath().getArray();
if (paths.length < 3) {
polygon.setPaths([]);
alert("You need to enter at least 3 points.")
} else {
const coords = paths.map((a) => [a.lat(), a.lng()]);
this.setDrawingMode(null);
this.setOptions({ drawingControlOptions: { drawingModes: [] } });
window.addPolygonToState(coords);
}
and
<DrawingManager
onPolygonComplete={this.handlePolygonComplete}
>
Here I check if the user put at least 3 points, if he/she did, get its coordinates, and remove the drawing mode.
So I just set a toggle with a function that stopped rendering the DrawingManager
<GoogleMap
defaultZoom={10}
defaultCenter={new google.maps.LatLng(38.9072, -77.0369)}
>
{this.props.creatingPolygon && <DrawingManager
defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
defaultOptions={
{
drawingControl: this.props.creatingPolygon,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
this.props.creatingPolygon && google.maps.drawing.OverlayType.POLYGON
],
}
}
}
onPolygonComplete={(polygon) => this.createDeliveryZone(polygon)}
/>}
</GoogleMap>