Updated to support responsive layouts
This commit is contained in:
Takashi Shinohara
parent
60923d94f7
commit
53561ec6ff
|
|
@ -0,0 +1,5 @@
|
|||
require("@rushstack/eslint-config/patch/modern-module-resolution");
|
||||
module.exports = {
|
||||
extends: ["@microsoft/eslint-config-spfx/lib/profiles/react"],
|
||||
parserOptions: { tsconfigRootDir: __dirname },
|
||||
};
|
||||
|
|
@ -8,8 +8,8 @@ This web part demonstrates displaying the list of approval requests of Power Aut
|
|||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
|
@ -48,6 +48,7 @@ react-my-approvals|[Takashi Shinohara](https://github.com/karamem0) ([@karamem0]
|
|||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.3|November 2, 2022|Updated to support responsive layouts<br/>Upgraded to SPFx v1.15.2
|
||||
1.2|March 28, 2022|Upgraded to SPFx v1.14
|
||||
1.1|January 22, 2022|Updated to allow multiple environments to be selected
|
||||
1.0|January 11, 2022|Initial release
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"solution": {
|
||||
"name": "my-approvals",
|
||||
"id": "35ebc939-0c57-456f-9fea-bc8f2bae3e58",
|
||||
"version": "1.2.0.0",
|
||||
"version": "1.3.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false,
|
||||
|
|
|
|||
|
|
@ -13,4 +13,4 @@ build.rig.getTasks = function () {
|
|||
return result;
|
||||
};
|
||||
|
||||
build.initialize(require('gulp'));
|
||||
build.initialize(require('gulp'));
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "react-my-approvals",
|
||||
"version": "1.2.0",
|
||||
"version": "1.3.0",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"scripts": {
|
||||
|
|
@ -9,33 +9,38 @@
|
|||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.14.0",
|
||||
"@microsoft/sp-lodash-subset": "1.14.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.14.0",
|
||||
"@microsoft/sp-property-pane": "1.14.0",
|
||||
"@microsoft/sp-webpart-base": "1.14.0",
|
||||
"@microsoft/sp-core-library": "1.15.2",
|
||||
"@microsoft/sp-lodash-subset": "1.15.2",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.15.2",
|
||||
"@microsoft/sp-property-pane": "1.15.2",
|
||||
"@microsoft/sp-webpart-base": "1.15.2",
|
||||
"@pnp/common": "1.3.11",
|
||||
"@pnp/logging": "1.3.11",
|
||||
"@pnp/odata": "1.3.11",
|
||||
"@pnp/sp": "1.3.11",
|
||||
"@pnp/sp-clientsvc": "1.3.11",
|
||||
"@pnp/sp-taxonomy": "1.3.11",
|
||||
"@pnp/spfx-controls-react": "^3.5.0",
|
||||
"@pnp/spfx-property-controls": "^3.3.0",
|
||||
"office-ui-fabric-react": "7.183.1",
|
||||
"@pnp/spfx-controls-react": "3.11.0",
|
||||
"@pnp/spfx-property-controls": "3.10.0",
|
||||
"office-ui-fabric-react": "7.199.6",
|
||||
"react": "16.13.1",
|
||||
"react-dom": "16.13.1",
|
||||
"react-intl": "^5.24.2"
|
||||
"react-intl": "5.25.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/rush-stack-compiler-3.9": "0.4.48",
|
||||
"@microsoft/sp-build-web": "1.14.0",
|
||||
"@microsoft/sp-module-interfaces": "1.14.0",
|
||||
"@microsoft/sp-tslint-rules": "1.14.0",
|
||||
"@microsoft/eslint-plugin-spfx": "1.15.2",
|
||||
"@microsoft/eslint-config-spfx": "1.15.2",
|
||||
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
|
||||
"@microsoft/sp-build-web": "1.15.2",
|
||||
"@microsoft/sp-module-interfaces": "1.15.2",
|
||||
"@microsoft/sp-tslint-rules": "1.15.2",
|
||||
"@rushstack/eslint-config": "2.5.1",
|
||||
"@types/react": "16.9.51",
|
||||
"@types/react-dom": "16.9.8",
|
||||
"@types/webpack-env": "1.16.3",
|
||||
"ajv": "~6.12.3",
|
||||
"eslint": "8.7.0",
|
||||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"gulp": "~4.0.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,21 +2,35 @@
|
|||
|
||||
.root {
|
||||
width: 100%;
|
||||
.container {
|
||||
.large {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
.count {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
width: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
.items {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
}
|
||||
.small {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
gap: 1rem;
|
||||
.count {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
.items {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.loading {
|
||||
|
|
|
|||
|
|
@ -27,8 +27,20 @@ const MyApprovals = ({
|
|||
}: IMyApprovalsProps) => {
|
||||
|
||||
const intl = useIntl();
|
||||
const root = React.useRef<HTMLDivElement>();
|
||||
const [width, setWidth] = React.useState<number>(0);
|
||||
const [approvals, setApprovals] = React.useState<IMyApprovalsState[]>();
|
||||
|
||||
const handleResize = React.useCallback(() => {
|
||||
if (root.current) {
|
||||
setWidth(root.current.offsetWidth);
|
||||
}
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
window.addEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!httpService) return;
|
||||
if (!environments.length) return;
|
||||
|
|
@ -44,6 +56,7 @@ const MyApprovals = ({
|
|||
requestUser: value.properties.principals.filter((item) => item.id === value.properties.owner.id)[0].displayName,
|
||||
}))))
|
||||
);
|
||||
handleResize();
|
||||
})();
|
||||
}, [
|
||||
httpService,
|
||||
|
|
@ -51,7 +64,9 @@ const MyApprovals = ({
|
|||
]);
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<div
|
||||
className={styles.root}
|
||||
ref={root}>
|
||||
{
|
||||
environments.length
|
||||
? (
|
||||
|
|
@ -63,9 +78,9 @@ const MyApprovals = ({
|
|||
{
|
||||
approvals
|
||||
? (
|
||||
<div className={styles.container}>
|
||||
<div className={width <= 480 ? styles.small : styles.large}>
|
||||
<div className={styles.count}>
|
||||
<Text variant='mega'>
|
||||
<Text variant='superLarge'>
|
||||
{approvals.length}
|
||||
</Text>
|
||||
<Text variant='medium'>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue