I am am building a teams app, I want to set the teams theme using fluent theme, what are the exact values for theme in theme provider,
Can i use fluentui/Northstar and fluentui/react together?
Please take a look at Designing your Microsoft Teams app with UI templates. The templates are a collection of Fluent UI-based components that work across common Teams use cases, giving you more time to figure out the best experience for your users.
You can use package '#fluentui/react-northstar' for handling teams theme.
Use it something like below:
import { Provider, teamsTheme, teamsDarkTheme, teamsHighContrastTheme } from '#fluentui/react-northstar'
public setThemeComponent = () => {
const rtl = i18n.dir() === "rtl";
if (this.state.theme === "dark") {
return (
<Provider theme={teamsDarkTheme} rtl={rtl}>
<div className="darkContainer">
{this.getAppDom()}
</div>
</Provider>
);
}
else if (this.state.theme === "contrast") {
return (
<Provider theme={teamsHighContrastTheme} rtl={rtl}>
<div className="highContrastContainer">
{this.getAppDom()}
</div>
</Provider>
);
} else {
return (
<Provider theme={teamsTheme} rtl={rtl}>
<div className="defaultContainer">
{this.getAppDom()}
</div>
</Provider>
);
}
}
Also you can refer below sample apps for it:
https://github.com/OfficeDev/microsoft-teams-apps-company-communicator/blob/master/Source/CompanyCommunicator/ClientApp/src/App.tsx
Related
I’m just getting started learning remix.run and whilst I’ve gone through the tutorials there’s one bit I’m stuck on how I should implement it in remix.
If I wanted to display a common header that might toggle a sign in/sign out button based on the users logged in state where would this live?
My nextjs thinking would be to create the components and reference them in the common document. I know I can do this in the remix.server and remix.client files, but as my “login” component is and isn’t a route (I.e I might want to POST to the route when a user submits the login form but GET /login isn’t really a route) how would you structure something like this and would doing this even allow me to have loader and action functions in the shared component?
Do I just need to adjust my thinking about how to achieve this in remix or am I overthinking it and the above is perfectly valid?
I tried the following and it works. But then I end up just creating an empty "logout" route to process the form data with an action and loader that process the form in the case of the action or just redirect if a GET request via the loader. Is this the best approach?
export const SignIn = ({user}) => {
return (
<>
<form method="POST"action="/logout">
<input type="hidden" id="some" value="foo" />
{user ?
(
<button>sign out</button>
)
: (
<button>sign in</button>
)
}
</form>
</>
)
}
Thanks
based on https://remix.run/docs/en/v1/tutorials/jokes#build-the-login-form
it does indeed look like an empty route for logout:
import type { ActionFunction, LoaderFunction } from "#remix-run/node"
import { redirect } from "#remix-run/node"
import { logout } from "~/utils/session.server"
export const action: ActionFunction = async ({request}) => {
return logout(request);
};
export const loader: LoaderFunction = async () => {
return redirect("/");
};
I'd like to have a Registration/Login component that can be switched between by using ion-segment. It's straightforward with ReactJS, but I don't know how to do it with the TypeScript version of React. How do you conditionally display different components with ion-segment?
Thanks in advance!
<IonToolbar>
<IonSegment value ="register" onIonChange={(e) => handleSegmentChange(e)}>
<IonSegmentButton value="register">
<IonLabel>Register</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="login">
<IonLabel>Login</IonLabel>
</IonSegmentButton>
</IonSegment>
</IonToolbar>
</IonHeader>
<IonContent>
<IonCard>
Register card that appears when I click the "Register" segment
</IonCard>
<IonCard>
Login card that appears when I click the "Login" segment
</IonCard>
</IonContent>
Here's what I'm trying to accomplish.
Find out the solution below. For me is working properly.
import {
IonCard,
IonContent,
IonHeader,
IonLabel,
IonPage,
IonSegment,
IonSegmentButton,
IonToolbar,
} from "#ionic/react";
import React, { useState } from "react";
const Segments = () => {
const [registerActive, setRegisterActive] = useState<boolean>(true);
const [loginActive, setLoginActive] = useState<boolean>(false);
return (
<React.Fragment>
<IonPage className="ion-page" id="main-content">
<IonHeader>
<IonToolbar>
<IonSegment value={registerActive ? "register" : "login"}>
<IonSegmentButton
value="register"
onClick={() => {
setLoginActive(false);
setRegisterActive(true);
}}
>
<IonLabel>Register</IonLabel>
</IonSegmentButton>
<IonSegmentButton
value="login"
onClick={() => {
setRegisterActive(false);
setLoginActive(true);
}}
>
<IonLabel>Login</IonLabel>
</IonSegmentButton>
</IonSegment>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
{registerActive ? (
<IonCard>
Register card that appears when I click the "Register" segment
</IonCard>
) : (
<IonCard>
Login card that appears when I click the "Login" segment
</IonCard>
)}
</IonContent>
</IonPage>
</React.Fragment>
);
};
export default Segments;
Hope this helps you!
I have the below switch statement that routes the user to correct component based on the link they are on.
const Router = (props) => {
switch(props.page) {
case 'Equities' :
this.props.pageName('Equities');
this.props.pageURL('/Equities');
return <Equities />;
case 'Daily' :
return <Daily />;
default :
return ( <Redirect to="/Equities" /> )
}
}
const content = ({ match }) => {
return (
<div className="content">
<Router page={match.params.type} />
</div>
);
}
const mapDispatchToProps = {
pageURL,
pageName
};
export default connect(mapDispatchToProps)(content);
On the 4th line above, I am trying to dispatch an action to Redux to update page name and URL in the redux store that the user is on. I get the below error:
How can I dispatch actions based on the page user is on so I update name and URL to whichever page user is visiting?
So, for anyone experiencing this problem, it seems to be caused by my error on adding redux to the page crashing with the compose module.
My component structure for the app is like this:
App -> Skeleton -> TopBar, Sidebar, Content
So inside Content component I have a switch that displays the correct content for user. I was trying to add this functionality to Content. Now I added to Skeleton, and it works fine and is much better because I don't need to add now 8 different statements inside switch saying if match this do this do that. Now all I have is this.props.pageName(match.url); this.props.pageURL(match.params.type); so I record in redux the user is on and that's all.
I am trying to get a value from the current page by using the pageContext but I am getting either undefined or 404.
This is the situation:
In the Site pages library there are several news pages. Each news page has some tags attached to them. This tags lives in a custom column in the Site Pages library.
There are news that have 1 tag and other several tags. It can be the situation where two or more news share the same tag(s).
The goal is when I open a news page the tags that are attached to that news are also visible.
Until now I am using #pnp/pnpjs and the code looks like this:
var result: any = await sp.web.lists.getByTitle("Site Pages")
.items.getById(15)
.select("Tags")
.get();
return await result.Tags;
And it is giving me 404 error
I also tried this one:
this.context.pageContext.list('Site Pages').listItem['Tags'].get().then((items: any[]) => {
console.log(items);
});
But it giving me Cannot read property 'list' of undefined
Du you have an idea how can get the value of the Tags column asociated with the current news?
Here is an update
Now I am getting the right tag. The question now is how to show it in the screen?
import * as React from 'react';
import styles from './ReadTags.module.scss';
import { IReadTagsProps } from './IReadTagsProps';
import { sp } from '#pnp/pnpjs';
export default class ReadTags extends React.Component<IReadTagsProps, {}> {
constructor(props: IReadTagsProps) {
super(props);
}
private async getTags() {
var id = this.props.context.pageContext.listItem.id;
var result: any = await sp.web.lists.getByTitle("Site Pages")
.items.getById(id)
.select("Tags")
.get();
return await result.Tags;
}
public render(): React.ReactElement<IReadTagsProps> {
console.log(this.getTags());
return (
<div className={ styles.readTags }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
</div>
</div>
</div>
</div>
);
}
}
Regards
Amerco
What you'll probably want to do is store your tags in the state of your component. Then you can show these (if the value from state is not empty) during your render. I can highly recommend working through the React tutorial to understand React lifecycle and state/props.
https://reactjs.org/tutorial/tutorial.html
https://reactjs.org/docs/state-and-lifecycle.html
Something with getting your data in componentDidMount, storing it in the state by using this.setState and then running through them in render with this.state.tags. It's more of a React question then a SPFx question :)
There's a ton of samples here with SPFx and React:
https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples
What is the standard style for jsx? Specifically when HTML is intertwined with js. Are the parenthesis after return in the correct spot? Anyone know of any good formatters that don't mess everything up?
render: function(){
return (
<li>
<input id={this.props.id} type="checkbox" />
<label htmlFor={this.props.id}>{this.props.tag}</label>
</li>
);
}
I like to use Airbnb code style
with Web Storm Editor provide good support for jsx syntax.
Note: you can apply Airbnb style automatically inside Web Storm from Settings->Code Quality
render() {
return (
<MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>
);
}
Found a good style guide here
https://github.com/airbnb/javascript/blob/master/react/README.md