Does anyone know how can I show the property pane without creating webpart?
I want to show the property pane after clicking the User Management icon, which is created with extension
Taken from this repo which has some of the official samples from the SPFx extensions model and depicts a pretty close use-case to the one that you are searching, there is an element in Fluent UI called Panel.
As it is written in the documentation:
Panels are overlays that contain supplementary content and are used for complex creation, edit, or management experiences. For example, viewing details about an item in a list or editing settings.
Furthermore, scouring the repo we can see that the panel is triggered:
...
import { Panel, PanelType } from "office-ui-fabric-react/lib/Panel";
...
class GraphBot extends React.Component<IGraphBotProps, IGraphBotState> {
....
public render() {
// Be careful, the user Id is mandatory to be able to use the bot state service (i.e privateConversationData)
return (
<div className={ styles.banner }>
<ActionButton onClick= { this._login } checked={ true } iconProps={ { iconName: "Robot", className: styles.banner__chatButtonIcon } } className={ styles.banner__chatButton}>
{ strings.GraphBotButtonLabel }
</ActionButton>
<Panel
isOpen={ this.state.showPanel }
type={ PanelType.medium}
isLightDismiss={ true }
onDismiss={ () => this.setState({ showPanel: false }) }
>
{ this.state.isBotInitializing ?
....
}
</Panel>
</div>
);
}
There is an <ActionButton> with an OnClick Eventhandler to execute the below function :
private async _login() {
this.setState({
isBotInitializing :true,
showPanel: true,
});
....
The above function sets the showPanel prop to true and this prop is used in the Panel Component, where it checks when set to true to open the Panel and move on with the Business Logic of the application extension.
The same can be seen in the Fluent UI Documentation here, in the basic example.
import * as React from 'react';
import { DefaultButton } from '#fluentui/react/lib/Button';
import { Panel } from '#fluentui/react/lib/Panel';
import { useBoolean } from '#fluentui/react-hooks';
export const PanelBasicExample: React.FunctionComponent = () => {
const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
return (
<div>
<DefaultButton text="Open panel" onClick={openPanel} />
<Panel
headerText="Sample panel"
isOpen={isOpen}
onDismiss={dismissPanel}
// You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
closeButtonAriaLabel="Close"
>
<p>Content goes here.</p>
</Panel>
</div>
);
};
Related
Senario : I have a dialog, and i use a react-hook to make it disappear ,like const[show,setShow]= useState(false) , this dialog file is a seperate file with main screen file, which contain button to show this dialog
Problem : I don't know how to show this dialog in main screen, for example, my dialog file called Mydialog.js have componet Mydialog, so i tried to put that hook show in props , Mydialog(show), but look like it not work that way, i still can't show the dialog
Question. How can i use react-hook for multi file, like i have hook in dialog file, present the dialog status ( show or not) then i can use it in mainScreen file to set show to true, then i can use that show and set to false when click button in dialog
If I understood it right you're trying to bring up a dialog when you interact with something on the main page and then close it by clicking on the X within the dialog. Would something like this work?
Main.js:
import "./styles.css";
import { useState } from "react";
import MyDialog from "./MyDialog";
export default function App() {
const [showDialog, setShowDialog] = useState(false);
const handleDialog = () => {
setShowDialog(!showDialog);
};
return (
<>
<button onClick={handleDialog}>Show Dialog</button>
Show Dialog: {showDialog?.toString()}
{showDialog && <MyDialog handleDialog={handleDialog} />}
</>
);
}
MyDialog.js:
import "./styles.css";
export default function MyDialog({ handleDialog }) {
return (
<>
<div className="popup">
<div className="popup_open">
<h1>Dialog Content</h1>
<button onClick={handleDialog}>X</button>
</div>
</div>
</>
);
}
Sandbox link if you want to test: https://codesandbox.io/s/admiring-feather-sy1gf
You can use Context to maintain state between multiple components.
const DialogContext = createContext();
const DialogProvider = ({ children }) => {
const [isDialogVisible, setDialogVisible] = useState(false);
const value = {
isDialogVisible,
setDialogVisible,
}
return <DialogContext.Provider value={value}>{children}</DialogContext.Provider>
}
const useDialog = () => {
const context = useContext(DialogContext);
return context;
}
Render the DialogProvider in one of the top-level components, for example in App.js.
// App.js
return (
<DialogProvider>
// ...
</DialogProvider>
)
Then inside of your components you can use your hook and trigger the visibility of the dialog.
MyComponentA:
const { isDialogVisible, setDialogVisible } = useDialog();
const toggleDialogVisibility = () => {
setDialogVisible(!isDialogVisible);
}
return (
<Button title="Toggle" onPress={toggleDialogVisibility} />
)
MyComponentB:
const { isDialogVisible } = useDialog();
if(isDialogVisible) {
return <Text>My Dialog</Text>
}
return null;
A very simple example of usage, here's a Snack for the above.
How to call add row functionality of the material table when clicking the button from outside of the material table
Add new row in the material table
Import import { forwardRef } from "react";
Call
const addActionRef = React.useRef();
Include this code in the place u want ur button. I am using material ui button here
<Button
color="primary"
variant="contained"
onClick={() => addActionRef.current.click()} //The line you need
>
Add new item
</Button>
and override the action in material table
components = {
{
Action: props => {
//If isn't the add action
if (typeof props.action === typeof Function || props.action.tooltip !== 'Add') {
return <MTableAction { ...props
}
/>
} else {
return <div ref = {
addActionRef
}
onClick = {
props.action.onClick
}
/>;
}
}
}
}
If u have any question please ask.
I have used here react js with material ui.
https://github.com/mbrn/material-table/issues/2133
This link might help u.... this is from where I got the answer
I am trying to toggle between the dark and light themes using icon, i have tried using the radio buttons and it works absolutely fine i don't know where i am going wrong with icons.
Here is the code that works with vs-radio buttons:
<vs-radio v-model="changeTheme" vs-value="light" vs-name="theme-mode-light">Light</vs-radio>
<vs-radio v-model="changeTheme" vs-value="dark" vs-name="theme-mode-dark">Dark</vs-radio>
...
<script>
watch: {
layoutType (val) {
// Reset unsupported options
if (val === 'horizontal') {
if (this.changeTheme === 'semi-dark') this.changeTheme = 'light'
if (this.navbarType === 'hidden') this.navbarTypeLocal = 'floating'
this.$emit('updateNavbarColor', '#fff')
}
}
},
computed: {
changeTheme: {
get () { return this.$store.state.themecolr},
set (val) { this.$store.dispatch('updateTheme', val) }
},
}
</script>
Here is the code which i am trying to achieve currently:
<div class="con-img ml-3">
<feather-icon v-if="this.$store.state.themecolr=== 'light'" icon="Icon" v-model="changeTheme" vs-name="theme-mode-light"/>
</div>
<div class="con-img ml-3">
<feather-icon v-if="this.$store.state.themecolr=== 'dark'" icon="Icon" v-model="changeTheme" vs-value="dark" vs-name="theme-mode-light"/>
</div>
...
methods: {
changeTheme: {
get () { return this.$store.state.themecolr},
set (val) { this.$store.dispatch('updateTheme', val) }
},
}
I tried adding #change and #click to the feather icon but that did not work out, and i also tried adding the function like this :
changeTheme (){
if(this.$store.state.themecolr=== 'light'){
return this.$store.state.themecolr=== 'dark'
}else if(this.$store.state.themecolr=== 'dark'){
this.$store.state.themecolr=== 'light'
}
}
Please someone help me to achieve this, i want to toggle the theme using the feather icons, but i am able to do it with the radio buttons, but that s not what i want.
I looked at the implementation of the vue-feather-icons here
and it is missing the event handlers.
If that is the case, it means those components don't emit any events.
I would suggest you move your event handler to the surrounding div for the icons. see what I did here for an example: https://codesandbox.io/s/distracted-noether-gud0p?file=/src/App.vue
the question is clear. I think it can be done with react native elements. But how? I am very new to react native.
I read the documentation in here. It has a code like this:
import { ThemeProvider, Button } from 'react-native-elements';
const theme = {
Button: {
raised: true,
},
};
// Your App
const App = () => {
return (
<ThemeProvider theme={theme}>
<Button title="My Button" />
<Button title="My 2nd Button" />
</ThemeProvider>
);
};
What if this part of the code:
const theme = {
Button: {
raised: true,
},
};
was coded in another file. How will I make the buttons raised?
You have 2 ways to aboard your problem.
First, if you want to use the same style for your react-native-elements components across certain files and they are all the children of the same parent file, you use this bit of code :
<ThemeProvider theme={theme}>
<Button title="My Button" />
<Button title="My 2nd Button"/> // ... plus any other component that contains your react native elements components
</ThemeProvider>
for this case if you want to put your config variable in another file , you can do it like this :
create a new file that contains your config variable let say for example a new file called config.js
// config.js file
export default {
Button:{
raised:true
}
// ... other RN-elements props
}
// or this
const theme = {
Button: {
raised: true,
},
}
export {theme}
then import it in your workspace like so :
// the file were you are using your themeProvider
import theme from "path_to_your_config.js_file"
// or respectively
import {theme} from "path_to_your_config.js_file"
// then use the variable theme as you like
the second way is that you create your own custom component and you style it however you want and you use it in your app.
Been trying to migrate from react-portal from v2 to v4, due to recent upgrade of React to 16.8.6.
Stucked at Portal, whereby the dialog box doesn't show up even when isOpen=true. Found out that onOpen is not firing. Any suggestion on how should I change the codes?
import * as React from 'react';
import { Portal } from 'react-portal';
import 'dialog-polyfill/dialog-polyfill.css';
import 'dialog-polyfill/dialog-polyfill.js';
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from 'react-mdl';
class Confirm extends React.Component {
onOpen() {
if (!this.dialog.showModal) {
dialogPolyfill.registerDialog(this.dialog);
}
this.dialog.showModal();
}
closeDialog() {
this.dialog.close();
this.portal.closePortal();
}
render() {
const props = this.props;
return (
<Portal ref={c => this.portal = c} onOpen={this.onOpen.bind(this)} isOpen={Boolean(props.callback)} {...props}>
<dialog ref={c => this.dialog = c} className="mdl-dialog" style={props.style}>
<DialogTitle>{props.title}</DialogTitle>
<DialogContent>
{props.message}
</DialogContent>
<DialogActions>
<Button type='button' onClick={() => {this.closeDialog(); props.confirm();}}>Confirm</Button>
<Button type='button' onClick={() => {this.closeDialog(); props.dismissConfirmation();}}>Cancel</Button>
</DialogActions>
</dialog>
</Portal>
);
}
}
export default Confirm;
Expected Result: A confirmation dialog box to pop up.
From browser, already can see the dialog box is there by modifying the css.
Ended up realized it's due to openByClickOn no longer supported. As explained in:
openByClickOn Not Supported In React-Portal v4