format commit
This commit is contained in:
parent
10431fdede
commit
952d4dc68e
|
|
@ -0,0 +1,51 @@
|
|||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:react/recommended",
|
||||
"airbnb",
|
||||
"plugin:prettier/recommended"
|
||||
],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
},
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"react",
|
||||
"@typescript-eslint"
|
||||
],
|
||||
"ignorePatterns": [
|
||||
"**/*.css"
|
||||
],
|
||||
"rules": {
|
||||
"import/extensions": [
|
||||
"error",
|
||||
"ignorePackages",
|
||||
{
|
||||
"ts": "never",
|
||||
"tsx": "never"
|
||||
}
|
||||
],
|
||||
"react/jsx-filename-extension": [
|
||||
1,
|
||||
{
|
||||
"extensions": [
|
||||
".jsx",
|
||||
".tsx"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"settings": {
|
||||
"import/resolver": {
|
||||
"typescript": {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
node_modules
|
||||
build
|
||||
|
|
@ -27,6 +27,20 @@
|
|||
"react-scripts": "5.0.0",
|
||||
"typescript": "^4.6.3",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^5.18.0",
|
||||
"@typescript-eslint/parser": "^5.18.0",
|
||||
"eslint": "^8.13.0",
|
||||
"eslint-config-airbnb": "^19.0.4",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-import-resolver-typescript": "^2.7.1",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.5.1",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-react": "^7.29.4",
|
||||
"eslint-plugin-react-hooks": "^4.4.0",
|
||||
"prettier": "^2.6.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
|
|
@ -7036,9 +7050,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/eslint": {
|
||||
"version": "8.12.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.12.0.tgz",
|
||||
"integrity": "sha512-it1oBL9alZg1S8UycLm5YDMAkIhtH6FtAzuZs6YvoGVldWjbS08BkAdb/ymP9LlAyq8koANu32U7Ib/w+UNh8Q==",
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.13.0.tgz",
|
||||
"integrity": "sha512-D+Xei61eInqauAyTJ6C0q6x9mx7kTUC1KZ0m0LSEexR0V+e94K12LmWX076ZIsldwfQ2RONdaJe0re0TRGQbRQ==",
|
||||
"dependencies": {
|
||||
"@eslint/eslintrc": "^1.2.1",
|
||||
"@humanwhocodes/config-array": "^0.9.2",
|
||||
|
|
@ -7086,6 +7100,67 @@
|
|||
"url": "https://opencollective.com/eslint"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-config-airbnb": {
|
||||
"version": "19.0.4",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz",
|
||||
"integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"object.assign": "^4.1.2",
|
||||
"object.entries": "^1.1.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": "^7.32.0 || ^8.2.0",
|
||||
"eslint-plugin-import": "^2.25.3",
|
||||
"eslint-plugin-jsx-a11y": "^6.5.1",
|
||||
"eslint-plugin-react": "^7.28.0",
|
||||
"eslint-plugin-react-hooks": "^4.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-config-airbnb-base": {
|
||||
"version": "15.0.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz",
|
||||
"integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"confusing-browser-globals": "^1.0.10",
|
||||
"object.assign": "^4.1.2",
|
||||
"object.entries": "^1.1.5",
|
||||
"semver": "^6.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10.12.0 || >=12.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": "^7.32.0 || ^8.2.0",
|
||||
"eslint-plugin-import": "^2.25.2"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-config-airbnb-base/node_modules/semver": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
|
||||
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-config-prettier": {
|
||||
"version": "8.5.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
|
||||
"integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"eslint-config-prettier": "bin/cli.js"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-config-react-app": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.0.tgz",
|
||||
|
|
@ -7130,6 +7205,26 @@
|
|||
"ms": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-import-resolver-typescript": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz",
|
||||
"integrity": "sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"debug": "^4.3.4",
|
||||
"glob": "^7.2.0",
|
||||
"is-glob": "^4.0.3",
|
||||
"resolve": "^1.22.0",
|
||||
"tsconfig-paths": "^3.14.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": "*",
|
||||
"eslint-plugin-import": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-module-utils": {
|
||||
"version": "2.7.3",
|
||||
"resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
|
||||
|
|
@ -7326,6 +7421,27 @@
|
|||
"eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-plugin-prettier": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz",
|
||||
"integrity": "sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"prettier-linter-helpers": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": ">=7.28.0",
|
||||
"prettier": ">=2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"eslint-config-prettier": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-plugin-react": {
|
||||
"version": "7.29.4",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz",
|
||||
|
|
@ -7809,6 +7925,12 @@
|
|||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
|
||||
},
|
||||
"node_modules/fast-diff": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
|
||||
"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fast-glob": {
|
||||
"version": "3.2.11",
|
||||
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
|
||||
|
|
@ -13375,6 +13497,33 @@
|
|||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
|
||||
"integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"prettier": "bin-prettier.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier-linter-helpers": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
|
||||
"integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fast-diff": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/pretty-bytes": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
|
||||
|
|
@ -21559,9 +21708,9 @@
|
|||
}
|
||||
},
|
||||
"eslint": {
|
||||
"version": "8.12.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.12.0.tgz",
|
||||
"integrity": "sha512-it1oBL9alZg1S8UycLm5YDMAkIhtH6FtAzuZs6YvoGVldWjbS08BkAdb/ymP9LlAyq8koANu32U7Ib/w+UNh8Q==",
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.13.0.tgz",
|
||||
"integrity": "sha512-D+Xei61eInqauAyTJ6C0q6x9mx7kTUC1KZ0m0LSEexR0V+e94K12LmWX076ZIsldwfQ2RONdaJe0re0TRGQbRQ==",
|
||||
"requires": {
|
||||
"@eslint/eslintrc": "^1.2.1",
|
||||
"@humanwhocodes/config-array": "^0.9.2",
|
||||
|
|
@ -21676,6 +21825,44 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"eslint-config-airbnb": {
|
||||
"version": "19.0.4",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz",
|
||||
"integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"object.assign": "^4.1.2",
|
||||
"object.entries": "^1.1.5"
|
||||
}
|
||||
},
|
||||
"eslint-config-airbnb-base": {
|
||||
"version": "15.0.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz",
|
||||
"integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"confusing-browser-globals": "^1.0.10",
|
||||
"object.assign": "^4.1.2",
|
||||
"object.entries": "^1.1.5",
|
||||
"semver": "^6.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"semver": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
|
||||
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"eslint-config-prettier": {
|
||||
"version": "8.5.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
|
||||
"integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"eslint-config-react-app": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.0.tgz",
|
||||
|
|
@ -21716,6 +21903,19 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"eslint-import-resolver-typescript": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz",
|
||||
"integrity": "sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"debug": "^4.3.4",
|
||||
"glob": "^7.2.0",
|
||||
"is-glob": "^4.0.3",
|
||||
"resolve": "^1.22.0",
|
||||
"tsconfig-paths": "^3.14.1"
|
||||
}
|
||||
},
|
||||
"eslint-module-utils": {
|
||||
"version": "2.7.3",
|
||||
"resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
|
||||
|
|
@ -21857,6 +22057,15 @@
|
|||
"minimatch": "^3.0.4"
|
||||
}
|
||||
},
|
||||
"eslint-plugin-prettier": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz",
|
||||
"integrity": "sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"prettier-linter-helpers": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"eslint-plugin-react": {
|
||||
"version": "7.29.4",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz",
|
||||
|
|
@ -22117,6 +22326,12 @@
|
|||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
|
||||
},
|
||||
"fast-diff": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
|
||||
"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
|
||||
"dev": true
|
||||
},
|
||||
"fast-glob": {
|
||||
"version": "3.2.11",
|
||||
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
|
||||
|
|
@ -25977,6 +26192,21 @@
|
|||
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
|
||||
"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
|
||||
},
|
||||
"prettier": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
|
||||
"integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
|
||||
"dev": true
|
||||
},
|
||||
"prettier-linter-helpers": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
|
||||
"integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fast-diff": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"pretty-bytes": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
|
||||
|
|
|
|||
|
|
@ -28,7 +28,10 @@
|
|||
"start-client": "react-scripts start",
|
||||
"build-client": "react-scripts build",
|
||||
"test-client": "react-scripts test",
|
||||
"eject-client": "react-scripts eject"
|
||||
"eject-client": "react-scripts eject",
|
||||
"lint": "eslint src/*",
|
||||
"lint:fix": "eslint --fix src/*",
|
||||
"format": "prettier --write \"**/*.+(ts|tsx)\""
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
|
|
@ -47,5 +50,19 @@
|
|||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^5.18.0",
|
||||
"@typescript-eslint/parser": "^5.18.0",
|
||||
"eslint": "^8.13.0",
|
||||
"eslint-config-airbnb": "^19.0.4",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-import-resolver-typescript": "^2.7.1",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.5.1",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-react": "^7.29.4",
|
||||
"eslint-plugin-react-hooks": "^4.4.0",
|
||||
"prettier": "^2.6.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,22 @@
|
|||
import PhotoAlbum, {Photo} from "react-photo-album";
|
||||
import PhotoAlbum, { Photo } from "react-photo-album";
|
||||
|
||||
function ImageGallery({images}: { images: Photo[] }) {
|
||||
// For all kind of settings see:
|
||||
// https://react-photo-album.com/examples/playground
|
||||
// https://codesandbox.io/s/github/igordanchenko/react-photo-album/tree/main/examples/playground
|
||||
function ImageGallery({ images }: { images: Photo[] }) {
|
||||
// For all kind of settings see:
|
||||
// https://react-photo-album.com/examples/playground
|
||||
// https://codesandbox.io/s/github/igordanchenko/react-photo-album/tree/main/examples/playground
|
||||
|
||||
return (
|
||||
<>
|
||||
{images.length === 0
|
||||
? <p>No images available. You may want to add images in your root directory.</p>
|
||||
: <PhotoAlbum layout="masonry" photos={images}/>}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{images.length === 0 ? (
|
||||
<p>
|
||||
No images available. You may want to add images in your root
|
||||
directory.
|
||||
</p>
|
||||
) : (
|
||||
<PhotoAlbum layout="masonry" photos={images} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ImageGallery;
|
||||
|
|
|
|||
|
|
@ -4,25 +4,33 @@ import MenuIcon from "@mui/icons-material/Menu";
|
|||
import Typography from "@mui/material/Typography";
|
||||
import AppBar from "../MuiLayout/AppBar";
|
||||
|
||||
function ImageGalleryAppBar({open, drawerWidth, onDrawerOpenClick}: { open: boolean, drawerWidth: number, onDrawerOpenClick: () => void }) {
|
||||
return (
|
||||
<AppBar position="fixed" open={open} drawerwidth={drawerWidth}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
onClick={onDrawerOpenClick}
|
||||
edge="start"
|
||||
sx={{mr: 2, ...(open && {display: 'none'})}}
|
||||
>
|
||||
<MenuIcon/>
|
||||
</IconButton>
|
||||
<Typography variant="h6" noWrap component="div">
|
||||
{process.env.TITLE ?? "Image Gallery"}
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
)
|
||||
function ImageGalleryAppBar({
|
||||
open,
|
||||
drawerWidth,
|
||||
onDrawerOpenClick,
|
||||
}: {
|
||||
open: boolean;
|
||||
drawerWidth: number;
|
||||
onDrawerOpenClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<AppBar position="fixed" open={open} drawerwidth={drawerWidth}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
onClick={onDrawerOpenClick}
|
||||
edge="start"
|
||||
sx={{ mr: 2, ...(open && { display: "none" }) }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" noWrap component="div">
|
||||
{process.env.TITLE ?? "Image Gallery"}
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
|
||||
export default ImageGalleryAppBar;
|
||||
export default ImageGalleryAppBar;
|
||||
|
|
|
|||
|
|
@ -3,100 +3,150 @@ import DrawerHeader from "../MuiLayout/DrawerHeader";
|
|||
import IconButton from "@mui/material/IconButton";
|
||||
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
|
||||
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
||||
import FolderIcon from '@mui/icons-material/Folder';
|
||||
import FolderOpenIcon from '@mui/icons-material/FolderOpen';
|
||||
import FolderIcon from "@mui/icons-material/Folder";
|
||||
import FolderOpenIcon from "@mui/icons-material/FolderOpen";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import {useTheme} from "@mui/material/styles";
|
||||
import {TreeItem, TreeView} from '@mui/lab';
|
||||
import {Folders} from "./models";
|
||||
import {useLocation, useNavigate} from "react-router-dom";
|
||||
import {useState} from "react";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { TreeItem, TreeView } from "@mui/lab";
|
||||
import { Folders } from "./models";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { useState } from "react";
|
||||
|
||||
function getDefaultExpanded(pathname: string): string[] {
|
||||
const pathParts = []
|
||||
let curPathName = pathname.substring(0, pathname.lastIndexOf("/"))
|
||||
while (curPathName.length > 0) {
|
||||
pathParts.push(curPathName)
|
||||
curPathName = curPathName.substring(0, curPathName.lastIndexOf("/"))
|
||||
}
|
||||
return pathParts
|
||||
const pathParts = [];
|
||||
let curPathName = pathname.substring(0, pathname.lastIndexOf("/"));
|
||||
while (curPathName.length > 0) {
|
||||
pathParts.push(curPathName);
|
||||
curPathName = curPathName.substring(0, curPathName.lastIndexOf("/"));
|
||||
}
|
||||
return pathParts;
|
||||
}
|
||||
|
||||
function generateTreeViewChildren(folders: Folders[], navigateAndToggleExpand: (path: string, navigationAllowed: boolean) => void) {
|
||||
return (<>
|
||||
{folders.map(f => {
|
||||
const label = f.numberOfFiles === 0 ? f.name : `${f.name} - (${f.numberOfFiles})`;
|
||||
const containsImages = f.numberOfFiles > 0;
|
||||
if (f.children.length === 0) {
|
||||
return (<TreeItem key={f.fullPath} nodeId={f.fullPath} label={label} onClick={() => navigateAndToggleExpand(f.fullPath, containsImages)}/>)
|
||||
}
|
||||
return (
|
||||
<TreeItem key={f.fullPath} nodeId={f.fullPath} label={label} onClick={() => navigateAndToggleExpand(f.fullPath, containsImages)}>
|
||||
{generateTreeViewChildren(f.children, navigateAndToggleExpand)}
|
||||
</TreeItem>
|
||||
)
|
||||
})}
|
||||
</>)
|
||||
}
|
||||
|
||||
function GenerateTreeView({root}: { root: Folders }) {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [expanded, setExpanded] = useState<string[]>(getDefaultExpanded(location.pathname))
|
||||
|
||||
const toggleExpanded = (path: string) => {
|
||||
if (expanded.includes(path)) {
|
||||
setExpanded(expanded.filter(p => p !== path))
|
||||
} else {
|
||||
setExpanded([path, ...expanded])
|
||||
function generateTreeViewChildren(
|
||||
folders: Folders[],
|
||||
navigateAndToggleExpand: (path: string, navigationAllowed: boolean) => void
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
{folders.map((f) => {
|
||||
const label =
|
||||
f.numberOfFiles === 0 ? f.name : `${f.name} - (${f.numberOfFiles})`;
|
||||
const containsImages = f.numberOfFiles > 0;
|
||||
if (f.children.length === 0) {
|
||||
return (
|
||||
<TreeItem
|
||||
key={f.fullPath}
|
||||
nodeId={f.fullPath}
|
||||
label={label}
|
||||
onClick={() =>
|
||||
navigateAndToggleExpand(f.fullPath, containsImages)
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const navigateAndToggleExpand = (path: string, navigationAllowed: boolean) => {
|
||||
if (!navigationAllowed || location.pathname === path) {
|
||||
toggleExpanded(path);
|
||||
return;
|
||||
}
|
||||
toggleExpanded(path);
|
||||
navigate(path)
|
||||
}
|
||||
|
||||
return (
|
||||
<TreeView
|
||||
disableSelection={true}
|
||||
defaultCollapseIcon={<FolderOpenIcon/>}
|
||||
defaultExpandIcon={<FolderIcon/>}
|
||||
expanded={expanded}
|
||||
>
|
||||
<TreeItem key={root.fullPath} nodeId={root.fullPath} label={`${root.name} - (${root.numberOfFiles})`} onClick={() => navigate(root.fullPath)}/>
|
||||
{root.children.length > 0 ? generateTreeViewChildren(root.children, navigateAndToggleExpand) : <></>}
|
||||
</TreeView>
|
||||
)
|
||||
return (
|
||||
<TreeItem
|
||||
key={f.fullPath}
|
||||
nodeId={f.fullPath}
|
||||
label={label}
|
||||
onClick={() => navigateAndToggleExpand(f.fullPath, containsImages)}
|
||||
>
|
||||
{generateTreeViewChildren(f.children, navigateAndToggleExpand)}
|
||||
</TreeItem>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ImageGalleryDrawer({open, drawerWidth, folder, onDrawerCloseClick}: { open: boolean, drawerWidth: number, folder: Folders, onDrawerCloseClick: () => void }) {
|
||||
const theme = useTheme();
|
||||
return (<Drawer
|
||||
sx={{
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
'& .MuiDrawer-paper': {
|
||||
width: drawerWidth,
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
}}
|
||||
variant="persistent"
|
||||
anchor="left"
|
||||
open={open}
|
||||
function GenerateTreeView({ root }: { root: Folders }) {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [expanded, setExpanded] = useState<string[]>(
|
||||
getDefaultExpanded(location.pathname)
|
||||
);
|
||||
|
||||
const toggleExpanded = (path: string) => {
|
||||
if (expanded.includes(path)) {
|
||||
setExpanded(expanded.filter((p) => p !== path));
|
||||
} else {
|
||||
setExpanded([path, ...expanded]);
|
||||
}
|
||||
};
|
||||
|
||||
const navigateAndToggleExpand = (
|
||||
path: string,
|
||||
navigationAllowed: boolean
|
||||
) => {
|
||||
if (!navigationAllowed || location.pathname === path) {
|
||||
toggleExpanded(path);
|
||||
return;
|
||||
}
|
||||
toggleExpanded(path);
|
||||
navigate(path);
|
||||
};
|
||||
|
||||
return (
|
||||
<TreeView
|
||||
disableSelection={true}
|
||||
defaultCollapseIcon={<FolderOpenIcon />}
|
||||
defaultExpandIcon={<FolderIcon />}
|
||||
expanded={expanded}
|
||||
>
|
||||
<DrawerHeader>
|
||||
<IconButton onClick={onDrawerCloseClick}>
|
||||
{theme.direction === 'ltr' ? <ChevronLeftIcon/> : <ChevronRightIcon/>}
|
||||
</IconButton>
|
||||
</DrawerHeader>
|
||||
<Divider/>
|
||||
<GenerateTreeView root={folder}/>
|
||||
</Drawer>)
|
||||
<TreeItem
|
||||
key={root.fullPath}
|
||||
nodeId={root.fullPath}
|
||||
label={`${root.name} - (${root.numberOfFiles})`}
|
||||
onClick={() => navigate(root.fullPath)}
|
||||
/>
|
||||
{root.children.length > 0 ? (
|
||||
generateTreeViewChildren(root.children, navigateAndToggleExpand)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</TreeView>
|
||||
);
|
||||
}
|
||||
|
||||
export default ImageGalleryDrawer;
|
||||
function ImageGalleryDrawer({
|
||||
open,
|
||||
drawerWidth,
|
||||
folder,
|
||||
onDrawerCloseClick,
|
||||
}: {
|
||||
open: boolean;
|
||||
drawerWidth: number;
|
||||
folder: Folders;
|
||||
onDrawerCloseClick: () => void;
|
||||
}) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Drawer
|
||||
sx={{
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
"& .MuiDrawer-paper": {
|
||||
width: drawerWidth,
|
||||
boxSizing: "border-box",
|
||||
},
|
||||
}}
|
||||
variant="persistent"
|
||||
anchor="left"
|
||||
open={open}
|
||||
>
|
||||
<DrawerHeader>
|
||||
<IconButton onClick={onDrawerCloseClick}>
|
||||
{theme.direction === "ltr" ? (
|
||||
<ChevronLeftIcon />
|
||||
) : (
|
||||
<ChevronRightIcon />
|
||||
)}
|
||||
</IconButton>
|
||||
</DrawerHeader>
|
||||
<Divider />
|
||||
<GenerateTreeView root={folder} />
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
export default ImageGalleryDrawer;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export interface Folders {
|
||||
name: string
|
||||
fullPath: string
|
||||
numberOfFiles: number
|
||||
children: Folders[]
|
||||
name: string;
|
||||
fullPath: string;
|
||||
numberOfFiles: number;
|
||||
children: Folders[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import {useEffect, useState} from "react";
|
||||
import {Photo} from "react-photo-album";
|
||||
import Box from '@mui/material/Box';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import {Folders} from "./ImageGallery/models";
|
||||
import {useLocation} from "react-router-dom";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Photo } from "react-photo-album";
|
||||
import Box from "@mui/material/Box";
|
||||
import CssBaseline from "@mui/material/CssBaseline";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { Folders } from "./ImageGallery/models";
|
||||
import ImageGalleryAppBar from "./ImageGallery/ImageGalleryAppBar";
|
||||
import DrawerHeader from "./MuiLayout/DrawerHeader";
|
||||
import ImageGalleryDrawer from "./ImageGallery/ImageGalleryDrawer";
|
||||
|
|
@ -13,43 +13,56 @@ import Main from "./MuiLayout/Main";
|
|||
const drawerWidth = 240;
|
||||
|
||||
function ImageGalleryLayout() {
|
||||
const [open, setOpen] = useState(true);
|
||||
const [folders, setFolders] = useState<Folders>({name: "Home", fullPath: "/", numberOfFiles: 0, children: []});
|
||||
const location = useLocation();
|
||||
const [open, setOpen] = useState(true);
|
||||
const [folders, setFolders] = useState<Folders>({
|
||||
name: "Home",
|
||||
fullPath: "/",
|
||||
numberOfFiles: 0,
|
||||
children: [],
|
||||
});
|
||||
const location = useLocation();
|
||||
|
||||
const handleDrawerOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleDrawerOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDrawerClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
const [images, setImages] = useState<Photo[]>([]);
|
||||
const handleDrawerClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
const [images, setImages] = useState<Photo[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/${location.pathname}`)
|
||||
.then((res) => res.json())
|
||||
.then((data) => setImages(data.images));
|
||||
}, [location.pathname]);
|
||||
useEffect(() => {
|
||||
fetch(`/api/${location.pathname}`)
|
||||
.then((res) => res.json())
|
||||
.then((data) => setImages(data.images));
|
||||
}, [location.pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/directories")
|
||||
.then((res) => res.json())
|
||||
.then((data) => setFolders(data));
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
fetch("/directories")
|
||||
.then((res) => res.json())
|
||||
.then((data) => setFolders(data));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box sx={{display: 'flex'}}>
|
||||
<CssBaseline/>
|
||||
<ImageGalleryAppBar open={open} drawerWidth={drawerWidth} onDrawerOpenClick={handleDrawerOpen}/>
|
||||
<ImageGalleryDrawer open={open} drawerWidth={drawerWidth} folder={folders} onDrawerCloseClick={handleDrawerClose}/>
|
||||
<Main open={open} drawerwidth={drawerWidth}>
|
||||
<DrawerHeader/>
|
||||
<ImageGallery images={images}/>
|
||||
</Main>
|
||||
|
||||
</Box>
|
||||
);
|
||||
return (
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<CssBaseline />
|
||||
<ImageGalleryAppBar
|
||||
open={open}
|
||||
drawerWidth={drawerWidth}
|
||||
onDrawerOpenClick={handleDrawerOpen}
|
||||
/>
|
||||
<ImageGalleryDrawer
|
||||
open={open}
|
||||
drawerWidth={drawerWidth}
|
||||
folder={folders}
|
||||
onDrawerCloseClick={handleDrawerClose}
|
||||
/>
|
||||
<Main open={open} drawerwidth={drawerWidth}>
|
||||
<DrawerHeader />
|
||||
<ImageGallery images={images} />
|
||||
</Main>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default ImageGalleryLayout;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
import {styled} from "@mui/material/styles";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import MuiAppBar from "@mui/material/AppBar";
|
||||
|
||||
const AppBar = styled(MuiAppBar, {
|
||||
shouldForwardProp: (prop) => prop !== 'open',
|
||||
shouldForwardProp: (prop) => prop !== "open",
|
||||
})<{
|
||||
open?: boolean;
|
||||
drawerwidth: number;
|
||||
}>(({theme, open, drawerwidth}) => ({
|
||||
transition: theme.transitions.create(['margin', 'width'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
...(open && {
|
||||
width: `calc(100% - ${drawerwidth}px)`,
|
||||
marginLeft: `${drawerwidth}px`,
|
||||
transition: theme.transitions.create(['margin', 'width'], {
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
open?: boolean;
|
||||
drawerwidth: number;
|
||||
}>(({ theme, open, drawerwidth }) => ({
|
||||
transition: theme.transitions.create(["margin", "width"], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
...(open && {
|
||||
width: `calc(100% - ${drawerwidth}px)`,
|
||||
marginLeft: `${drawerwidth}px`,
|
||||
transition: theme.transitions.create(["margin", "width"], {
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
}),
|
||||
}));
|
||||
|
||||
export default AppBar;
|
||||
export default AppBar;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import {styled} from "@mui/material/styles";
|
||||
import { styled } from "@mui/material/styles";
|
||||
|
||||
const DrawerHeader = styled('div')(({theme}) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: theme.spacing(0, 1),
|
||||
// necessary for content to be below app bar
|
||||
...theme.mixins.toolbar,
|
||||
justifyContent: 'flex-end',
|
||||
const DrawerHeader = styled("div")(({ theme }) => ({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: theme.spacing(0, 1),
|
||||
// necessary for content to be below app bar
|
||||
...theme.mixins.toolbar,
|
||||
justifyContent: "flex-end",
|
||||
}));
|
||||
|
||||
export default DrawerHeader;
|
||||
export default DrawerHeader;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,23 @@
|
|||
import {styled} from "@mui/material/styles";
|
||||
import { styled } from "@mui/material/styles";
|
||||
|
||||
const Main = styled('main', {shouldForwardProp: (prop) => prop !== 'open'})<{
|
||||
open?: boolean;
|
||||
drawerwidth: number;
|
||||
}>(
|
||||
({theme, open, drawerwidth}) => ({
|
||||
flexGrow: 1,
|
||||
padding: theme.spacing(3),
|
||||
transition: theme.transitions.create('margin', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
marginLeft: `-${drawerwidth}px`,
|
||||
...(open && {
|
||||
transition: theme.transitions.create('margin', {
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
marginLeft: 0,
|
||||
}),
|
||||
const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })<{
|
||||
open?: boolean;
|
||||
drawerwidth: number;
|
||||
}>(({ theme, open, drawerwidth }) => ({
|
||||
flexGrow: 1,
|
||||
padding: theme.spacing(3),
|
||||
transition: theme.transitions.create("margin", {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
marginLeft: `-${drawerwidth}px`,
|
||||
...(open && {
|
||||
transition: theme.transitions.create("margin", {
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
);
|
||||
marginLeft: 0,
|
||||
}),
|
||||
}));
|
||||
|
||||
export default Main;
|
||||
export default Main;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
import React from 'react';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import './index.css';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import "./index.css";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import reportWebVitals from "./reportWebVitals";
|
||||
import ImageGalleryLayout from "./ImageGalleryLayout";
|
||||
import {BrowserRouter} from "react-router-dom";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById("root") as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<BrowserRouter>
|
||||
<ImageGalleryLayout/>
|
||||
</BrowserRouter>
|
||||
)
|
||||
<BrowserRouter>
|
||||
<ImageGalleryLayout />
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
/// <reference types="react-scripts" />
|
||||
/// <reference types="react-scripts" />
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { ReportHandler } from 'web-vitals';
|
||||
import { ReportHandler } from "web-vitals";
|
||||
|
||||
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@
|
|||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
import "@testing-library/jest-dom";
|
||||
|
|
|
|||
Loading…
Reference in New Issue