1. Repo restructuring - updated code
This commit is contained in:
Kushal Mehrotra
Родитель
c468d88812
Коммит
2f19be0926
|
|
@ -0,0 +1,24 @@
|
||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.eslintcache
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
/dist
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
/.vs
|
||||||
|
/public
|
||||||
|
/src/Examples
|
||||||
|
/src/App.css
|
||||||
|
/src/App.tsx
|
||||||
|
/src/index.tsx
|
||||||
|
/src/index.css
|
||||||
|
/src/App.test.tsx
|
||||||
|
/.npmrc
|
||||||
|
/package-lock.json
|
||||||
|
/tsconfig.json
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) Microsoft Corporation.
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE
|
||||||
|
|
@ -0,0 +1,224 @@
|
||||||
|
# FluidUI Editable DetailsList
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
FluentUI is a great UI library with some really cool controls, all adhering to Accessibility Standards.
|
||||||
|
|
||||||
|
DetailsList control of FluidUI is great when your requirement is a read-only grid. However, it does not offer any in-place editability functionality just yet.
|
||||||
|
|
||||||
|
This component(Editable DetailsList) is a wrapper over the existing DetailsList that makes in-place editability work like a dream(among many other new features).
|
||||||
|
|
||||||
|
Some of the features of the Editable Grid are:-
|
||||||
|
>- Single Cell Edit (in-place)
|
||||||
|
>- Single Row Edit (in-place)
|
||||||
|
>- Single Column Edit
|
||||||
|
>- Multi-Column, multi-row edit (Bulk Edit)
|
||||||
|
>- Full Edit (Edit Mode)
|
||||||
|
>- Deleting Rows
|
||||||
|
>- Adding Rows
|
||||||
|
>- Default Data Export (to Excel, CSV)
|
||||||
|
>- Implement Custom Export functionality
|
||||||
|
>- Callback hook to recieve grid data in the consuming component(for Save etc.)
|
||||||
|
>- Support for various controls in grid in-place edit like TextField, Multiline TextField, DatePicker (Support for Dropdown will be released soon)
|
||||||
|
>- Flexibility to implement onChange callback on any cell value change (For cases like calculating summation of a column etc)
|
||||||
|
>- Length Validations during edit
|
||||||
|
>- Type Validations during edit
|
||||||
|
>- The component is completely Accessible
|
||||||
|
|
||||||
|
## Clone & Run
|
||||||
|
- clone the repository on your local machine.
|
||||||
|
- open the project
|
||||||
|
- open terminal and change directory to your project path
|
||||||
|
- type '***npm install***'
|
||||||
|
- after the installation is complete, type '***npm start***'
|
||||||
|
|
||||||
|
This starts the project on port 8080 and you are ready to play around with the Editable DetailsList
|
||||||
|
|
||||||
|
## NPM Install
|
||||||
|
npm i fluentui-editable-grid
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
import { DetailsListLayoutMode, SelectionMode } from '@fluentui/react';
|
||||||
|
import { EditableGrid, EditControlType, IColumnConfig } from 'fluentui-editable-grid';
|
||||||
|
import { Fabric } from 'office-ui-fabric-react';
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
const Consumer = () => {
|
||||||
|
const [items, setItems] = useState<any[]>([]);
|
||||||
|
const columns: IColumnConfig[] = [
|
||||||
|
{
|
||||||
|
key: 'id',
|
||||||
|
name: 'ID',
|
||||||
|
text: 'ID',
|
||||||
|
editable: false,
|
||||||
|
dataType: 'number',
|
||||||
|
minWidth: 100,
|
||||||
|
maxWidth: 100,
|
||||||
|
isResizable: true,
|
||||||
|
includeColumnInExport: true,
|
||||||
|
includeColumnInSearch: true,
|
||||||
|
applyColumnFilter: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'name',
|
||||||
|
name: 'Name',
|
||||||
|
text: 'Name',
|
||||||
|
editable: true,
|
||||||
|
dataType: 'string',
|
||||||
|
minWidth: 100,
|
||||||
|
maxWidth: 100,
|
||||||
|
isResizable: true,
|
||||||
|
includeColumnInExport: true,
|
||||||
|
includeColumnInSearch: true,
|
||||||
|
applyColumnFilter: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'age',
|
||||||
|
name: 'Age',
|
||||||
|
text: 'Age',
|
||||||
|
editable: true,
|
||||||
|
dataType: 'number',
|
||||||
|
minWidth: 100,
|
||||||
|
maxWidth: 100,
|
||||||
|
isResizable: true,
|
||||||
|
includeColumnInExport: true,
|
||||||
|
includeColumnInSearch: true,
|
||||||
|
applyColumnFilter: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'designation',
|
||||||
|
name: 'Designation',
|
||||||
|
text: 'Designation',
|
||||||
|
editable: true,
|
||||||
|
dataType: 'string',
|
||||||
|
minWidth: 100,
|
||||||
|
maxWidth: 100,
|
||||||
|
isResizable: true,
|
||||||
|
includeColumnInExport: true,
|
||||||
|
includeColumnInSearch: true,
|
||||||
|
inputType: EditControlType.MultilineTextField,
|
||||||
|
applyColumnFilter: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'salary',
|
||||||
|
name: 'Salary',
|
||||||
|
text: 'Salary',
|
||||||
|
editable: true,
|
||||||
|
dataType: 'number',
|
||||||
|
minWidth: 100,
|
||||||
|
maxWidth: 100,
|
||||||
|
isResizable: true,
|
||||||
|
includeColumnInExport: false,
|
||||||
|
includeColumnInSearch: true,
|
||||||
|
maxLength:5,
|
||||||
|
applyColumnFilter: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'dateofjoining',
|
||||||
|
name: 'Date of Joining',
|
||||||
|
text: 'Date of Joining',
|
||||||
|
editable: true,
|
||||||
|
dataType: 'date',
|
||||||
|
minWidth: 150,
|
||||||
|
maxWidth: 150,
|
||||||
|
isResizable: true,
|
||||||
|
includeColumnInExport: true,
|
||||||
|
includeColumnInSearch: true,
|
||||||
|
inputType: EditControlType.Date
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const SetDummyData = () : void => {
|
||||||
|
const dummyData = [
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
name: "Name1",
|
||||||
|
age:32,
|
||||||
|
designation:'Designation1',
|
||||||
|
salary:75000,
|
||||||
|
dateofjoining:'2010-04-01T14:57:10'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
|
name: "Name2",
|
||||||
|
age:32,
|
||||||
|
designation:'Designation2',
|
||||||
|
salary:75000,
|
||||||
|
dateofjoining:'2014-06-09T14:57:10'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3",
|
||||||
|
name: "Name3",
|
||||||
|
age:32,
|
||||||
|
designation:'Designation3',
|
||||||
|
salary:75000,
|
||||||
|
dateofjoining:'2005-07-02T14:57:10'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4",
|
||||||
|
name: "Name4",
|
||||||
|
age:32,
|
||||||
|
designation:'Designation4',
|
||||||
|
salary:75000,
|
||||||
|
dateofjoining:'2019-04-01T14:57:10'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
setItems(dummyData);
|
||||||
|
}
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
SetDummyData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fabric>
|
||||||
|
<EditableGrid
|
||||||
|
id={1}
|
||||||
|
columns={columns}
|
||||||
|
items={items}
|
||||||
|
enableCellEdit={true}
|
||||||
|
enableExport={true}
|
||||||
|
enableTextFieldEditMode={true}
|
||||||
|
enableTextFieldEditModeCancel={true}
|
||||||
|
enableGridRowsDelete={true}
|
||||||
|
enableGridRowsAdd={true}
|
||||||
|
height={'70vh'}
|
||||||
|
width={'140vh'}
|
||||||
|
position={'relative'}
|
||||||
|
enableUnsavedEditIndicator={true}
|
||||||
|
//onGridSave={onGridSave}
|
||||||
|
enableGridReset={true}
|
||||||
|
enableColumnFilters={true}
|
||||||
|
enableColumnFilterRules={true}
|
||||||
|
enableRowAddWithValues={{enable : true, enableRowsCounterInPanel : true}}
|
||||||
|
layoutMode={DetailsListLayoutMode.justified}
|
||||||
|
selectionMode={SelectionMode.multiple}
|
||||||
|
enableRowEdit={true}
|
||||||
|
enableRowEditCancel={true}
|
||||||
|
enableBulkEdit={true}
|
||||||
|
enableColumnEdit={true}
|
||||||
|
enableSave={true}
|
||||||
|
/>
|
||||||
|
</Fabric>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Consumer;
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
This project welcomes contributions and suggestions. Most contributions require you to agree to a
|
||||||
|
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
|
||||||
|
the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
|
||||||
|
|
||||||
|
When you submit a pull request, a CLA bot will automatically determine whether you need to provide
|
||||||
|
a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions
|
||||||
|
provided by the bot. You will only need to do this once across all repos using our CLA.
|
||||||
|
|
||||||
|
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
|
||||||
|
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
|
||||||
|
contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
_For more details please check out [Fluent UI Editable DetailsList Wiki](https://github.com/microsoft/FluentUIEditableDetailsList/wiki)._
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!-- BEGIN MICROSOFT SECURITY.MD V0.0.5 BLOCK -->
|
||||||
|
|
||||||
|
## Security
|
||||||
|
|
||||||
|
Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
|
||||||
|
|
||||||
|
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
|
||||||
|
|
||||||
|
## Reporting Security Issues
|
||||||
|
|
||||||
|
**Please do not report security vulnerabilities through public GitHub issues.**
|
||||||
|
|
||||||
|
Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report).
|
||||||
|
|
||||||
|
If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc).
|
||||||
|
|
||||||
|
You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).
|
||||||
|
|
||||||
|
Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
|
||||||
|
|
||||||
|
* Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
|
||||||
|
* Full paths of source file(s) related to the manifestation of the issue
|
||||||
|
* The location of the affected source code (tag/branch/commit or direct URL)
|
||||||
|
* Any special configuration required to reproduce the issue
|
||||||
|
* Step-by-step instructions to reproduce the issue
|
||||||
|
* Proof-of-concept or exploit code (if possible)
|
||||||
|
* Impact of the issue, including how an attacker might exploit the issue
|
||||||
|
|
||||||
|
This information will help us triage your report more quickly.
|
||||||
|
|
||||||
|
If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty) page for more details about our active programs.
|
||||||
|
|
||||||
|
## Preferred Languages
|
||||||
|
|
||||||
|
We prefer all communications to be in English.
|
||||||
|
|
||||||
|
## Policy
|
||||||
|
|
||||||
|
Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/en-us/msrc/cvd).
|
||||||
|
|
||||||
|
<!-- END MICROSOFT SECURITY.MD BLOCK -->
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
# TODO: The maintainer of this repo has not yet edited this file
|
||||||
|
|
||||||
|
**REPO OWNER**: Do you want Customer Service & Support (CSS) support for this product/project?
|
||||||
|
|
||||||
|
- **No CSS support:** Fill out this template with information about how to file issues and get help.
|
||||||
|
- **Yes CSS support:** Fill out an intake form at [aka.ms/spot](https://aka.ms/spot). CSS will work with/help you to determine next steps. More details also available at [aka.ms/onboardsupport](https://aka.ms/onboardsupport).
|
||||||
|
- **Not sure?** Fill out a SPOT intake as though the answer were "Yes". CSS will help you decide.
|
||||||
|
|
||||||
|
*Then remove this first heading from this SUPPORT.MD file before publishing your repo.*
|
||||||
|
|
||||||
|
# Support
|
||||||
|
|
||||||
|
## How to file issues and get help
|
||||||
|
|
||||||
|
This project uses GitHub Issues to track bugs and feature requests. Please search the existing
|
||||||
|
issues before filing new issues to avoid duplicates. For new issues, file your bug or
|
||||||
|
feature request as a new Issue.
|
||||||
|
|
||||||
|
For help and questions about using this project, please **REPO MAINTAINER: INSERT INSTRUCTIONS HERE
|
||||||
|
FOR HOW TO ENGAGE REPO OWNERS OR COMMUNITY FOR HELP. COULD BE A STACK OVERFLOW TAG OR OTHER
|
||||||
|
CHANNEL. WHERE WILL YOU HELP PEOPLE?**.
|
||||||
|
|
||||||
|
## Microsoft Support Policy
|
||||||
|
|
||||||
|
Support for this **PROJECT or PRODUCT** is limited to the resources listed above.
|
||||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,93 @@
|
||||||
|
{
|
||||||
|
"name": "fluentui-editable-grid",
|
||||||
|
"version": "1.1.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"description": "Wrapper over the existing DetailsList that makes in-place editability work like a dream(among many other new features)",
|
||||||
|
"main": "dist/index.js",
|
||||||
|
"typings": "dist/index.d.ts",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/microsoft/FluentUIEditableDetailsList"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"editable",
|
||||||
|
"grid",
|
||||||
|
"detailslist",
|
||||||
|
"fluentui"
|
||||||
|
],
|
||||||
|
"bugs": "https://github.com/microsoft/FluentUIEditableDetailsList/issues",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
|
||||||
|
"@babel/cli": "7.12.1",
|
||||||
|
"@babel/core": "^7.14.8",
|
||||||
|
"@babel/preset-env": "^7.14.9",
|
||||||
|
"@babel/preset-react": "^7.14.5",
|
||||||
|
"@babel/preset-stage-0": "^7.8.3",
|
||||||
|
"@fluentui/react": "^8.26.0",
|
||||||
|
"@testing-library/jest-dom": "^5.14.1",
|
||||||
|
"@testing-library/react": "^11.2.7",
|
||||||
|
"@testing-library/user-event": "^12.8.3",
|
||||||
|
"@types/file-saver": "^2.0.1",
|
||||||
|
"@types/jest": "^26.0.24",
|
||||||
|
"@types/node": "^12.20.17",
|
||||||
|
"@types/react": "^17.0.15",
|
||||||
|
"@types/react-dom": "^17.0.9",
|
||||||
|
"cpx": "^1.5.0",
|
||||||
|
"file-saver": "^2.0.2",
|
||||||
|
"office-ui-fabric-react": "^7.0.0",
|
||||||
|
"react": "^17.0.2",
|
||||||
|
"react-dom": "^17.0.2",
|
||||||
|
"react-scripts": "^4.0.3",
|
||||||
|
"typescript": "^4.3.5",
|
||||||
|
"web-vitals": "^1.1.2",
|
||||||
|
"webpack-cli": "^4.7.2",
|
||||||
|
"xlsx": "^0.16.6",
|
||||||
|
"y18n": "^3.2.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"just-scripts": "^0.27.0",
|
||||||
|
"just-stack-react": "^1.0.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build-site": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject",
|
||||||
|
"clean": "if exist dist rd /s /q dist",
|
||||||
|
"prepareBuild": "npm run clean && mkdir dist",
|
||||||
|
"compile": "set NODE_ENV=production & babel src/libs --out-dir dist --extensions \".ts,.tsx\" --copy-files",
|
||||||
|
"copy": "cpx \"{package.json,README.md}\" dist",
|
||||||
|
"build": "npm run prepareBuild && npm run compile && tsc && npm run copy",
|
||||||
|
"prepare": "npm run build"
|
||||||
|
},
|
||||||
|
"babel": {
|
||||||
|
"presets": [
|
||||||
|
"@babel/env",
|
||||||
|
"@babel/preset-react",
|
||||||
|
"@babel/preset-typescript"
|
||||||
|
],
|
||||||
|
"ignore": [
|
||||||
|
"**/*.test.js",
|
||||||
|
"**/stories.js",
|
||||||
|
"**/*.stories.js"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.8 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
.App {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-logo {
|
||||||
|
height: 40vmin;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
.App-logo {
|
||||||
|
animation: App-logo-spin infinite 20s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-header {
|
||||||
|
background-color: #282c34;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: calc(10px + 2vmin);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-link {
|
||||||
|
color: #61dafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes App-logo-spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { render, screen } from '@testing-library/react';
|
||||||
|
import { App } from './App';
|
||||||
|
|
||||||
|
it('renders "Welcome to Your Fluent UI App"', () => {
|
||||||
|
render(<App />);
|
||||||
|
const linkElement = screen.getByText(/Welcome to Your Fluent UI App/i);
|
||||||
|
expect(linkElement).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Stack, Text, Link, FontWeights, IStackTokens, IStackStyles, ITextStyles } from '@fluentui/react';
|
||||||
|
import logo from './logo.svg';
|
||||||
|
import './App.css';
|
||||||
|
import Consumer from './Examples/gridconsumer/gridconsumer';
|
||||||
|
|
||||||
|
const boldStyle: Partial<ITextStyles> = { root: { fontWeight: FontWeights.semibold } };
|
||||||
|
const stackTokens: IStackTokens = { childrenGap: 15 };
|
||||||
|
const stackStyles: Partial<IStackStyles> = {
|
||||||
|
root: {
|
||||||
|
width: '960px',
|
||||||
|
margin: '0 auto',
|
||||||
|
textAlign: 'center',
|
||||||
|
color: '#605e5c',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const App: React.FunctionComponent = () => {
|
||||||
|
return (
|
||||||
|
<Stack horizontalAlign="center" verticalAlign="center" verticalFill styles={stackStyles} tokens={stackTokens}>
|
||||||
|
<Consumer />
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
import { NumberAndDateOperators, StringOperators } from "../../libs/types/cellstyleruletype";
|
||||||
|
import { IColumnConfig } from "../../libs/types/columnconfigtype";
|
||||||
|
import { EditControlType } from "../../libs/types/editcontroltype";
|
||||||
|
import { IGridItemsType } from "../../libs/types/griditemstype";
|
||||||
|
|
||||||
|
export const GridColumnConfig : IColumnConfig[] =
|
||||||
|
[
|
||||||
|
{
|
||||||
|
key: 'id',
|
||||||
|
name: 'ID',
|
||||||
|
text: 'ID',
|
||||||
|
editable: false,
|
||||||
|
dataType: 'number',
|
||||||
|
minWidth: 100,
|
||||||
|
maxWidth: 100,
|
||||||
|
isResizable: true,
|
||||||
|
includeColumnInExport: true,
|
||||||
|
includeColumnInSearch: true,
|
||||||
|
applyColumnFilter: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'name',
|
||||||
|
name: 'Name',
|
||||||
|
text: 'Name',
|
||||||
|
editable: true,
|
||||||
|
dataType: 'string',
|
||||||
|
minWidth: 100,
|
||||||
|
maxWidth: 100,
|
||||||
|
isResizable: true,
|
||||||
|
includeColumnInExport: true,
|
||||||
|
includeColumnInSearch: true,
|
||||||
|
applyColumnFilter: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'age',
|
||||||
|
name: 'Age',
|
||||||
|
text: 'Age',
|
||||||
|
editable: true,
|
||||||
|
dataType: 'number',
|
||||||
|
minWidth: 100,
|
||||||
|
maxWidth: 100,
|
||||||
|
isResizable: true,
|
||||||
|
includeColumnInExport: true,
|
||||||
|
includeColumnInSearch: true,
|
||||||
|
applyColumnFilter: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'designation',
|
||||||
|
name: 'Designation',
|
||||||
|
text: 'Designation',
|
||||||
|
editable: true,
|
||||||
|
dataType: 'string',
|
||||||
|
minWidth: 100,
|
||||||
|
maxWidth: 100,
|
||||||
|
isResizable: true,
|
||||||
|
includeColumnInExport: true,
|
||||||
|
includeColumnInSearch: true,
|
||||||
|
inputType: EditControlType.MultilineTextField,
|
||||||
|
applyColumnFilter: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'salary',
|
||||||
|
name: 'Salary',
|
||||||
|
text: 'Salary',
|
||||||
|
editable: true,
|
||||||
|
dataType: 'number',
|
||||||
|
minWidth: 100,
|
||||||
|
maxWidth: 100,
|
||||||
|
isResizable: true,
|
||||||
|
includeColumnInExport: false,
|
||||||
|
includeColumnInSearch: true,
|
||||||
|
maxLength:5,
|
||||||
|
applyColumnFilter: true,
|
||||||
|
cellStyleRule: {
|
||||||
|
enable: true,
|
||||||
|
rule: {
|
||||||
|
operator : NumberAndDateOperators.LESSTHAN,
|
||||||
|
value: 50000
|
||||||
|
},
|
||||||
|
whenTrue: { textColor: '#EF5350', fontWeight: 'bold' },
|
||||||
|
whenFalse: { textColor: '#9CCC65' }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'dateofjoining',
|
||||||
|
name: 'Date of Joining',
|
||||||
|
text: 'Date of Joining',
|
||||||
|
editable: true,
|
||||||
|
dataType: 'date',
|
||||||
|
minWidth: 150,
|
||||||
|
maxWidth: 150,
|
||||||
|
isResizable: true,
|
||||||
|
includeColumnInExport: true,
|
||||||
|
includeColumnInSearch: true,
|
||||||
|
inputType: EditControlType.Date
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export interface GridItemsType {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
age: number;
|
||||||
|
designation: string;
|
||||||
|
salary: number;
|
||||||
|
dateofjoining: string;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,111 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
import { DefaultButton, DetailsList, DetailsListLayoutMode, Fabric, mergeStyles, mergeStyleSets, SelectionMode, TextField } from 'office-ui-fabric-react';
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import EditableGrid from '../../libs/editablegrid/editablegrid';
|
||||||
|
import { ICallBackParams, ICallBackRequestParams } from '../../libs/types/callbackparams';
|
||||||
|
import { IColumnConfig } from '../../libs/types/columnconfigtype';
|
||||||
|
import { GridColumnConfig, GridItemsType } from './gridconfig';
|
||||||
|
import { EventEmitter, EventType } from '../../libs/eventemitter/EventEmitter.js';
|
||||||
|
|
||||||
|
const Consumer = () => {
|
||||||
|
|
||||||
|
const [items, setItems] = useState<GridItemsType[]>([]);
|
||||||
|
|
||||||
|
const classNames = mergeStyleSets({
|
||||||
|
controlWrapper: {
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const GetRandomDate = (start : Date, end : Date) : Date => {
|
||||||
|
var diff = end.getTime() - start.getTime();
|
||||||
|
var new_diff = diff * Math.random();
|
||||||
|
var date = new Date(start.getTime() + new_diff);
|
||||||
|
return date;
|
||||||
|
}
|
||||||
|
|
||||||
|
const GetRandomInt = (min : number, max : number) : number => {
|
||||||
|
min = Math.ceil(min);
|
||||||
|
max = Math.floor(max);
|
||||||
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||||
|
};
|
||||||
|
|
||||||
|
const SetDummyData = () : void => {
|
||||||
|
var dummyData : GridItemsType[] = []
|
||||||
|
for(var i = 1; i <= 100; i++){
|
||||||
|
dummyData.push({
|
||||||
|
id: i,
|
||||||
|
name: 'Name'+ GetRandomInt(1, 10),
|
||||||
|
age: GetRandomInt(20,40),
|
||||||
|
designation: 'Designation' + GetRandomInt(1, 15),
|
||||||
|
salary: GetRandomInt(35000, 75000),
|
||||||
|
dateofjoining: '2010-10-10T14:57:10'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setItems(dummyData);
|
||||||
|
}
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
SetDummyData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onGridSave = (data: any[]): void => {
|
||||||
|
alert('Grid Data Saved');
|
||||||
|
setItems([...data]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDesignationChanged = (callbackRequestParamObj : ICallBackParams): any[] => {
|
||||||
|
callbackRequestParamObj.rowindex.forEach((index) => {
|
||||||
|
callbackRequestParamObj.data.filter((item) => item._grid_row_id_ == index).map((item) => item.salary = 30000);
|
||||||
|
});
|
||||||
|
|
||||||
|
return callbackRequestParamObj.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
const attachGridValueChangeCallbacks = (columnConfig : IColumnConfig[]) : IColumnConfig[] => {
|
||||||
|
columnConfig.filter((item) => item.key == 'designation').map((item) => item.onChange = onDesignationChanged);
|
||||||
|
return columnConfig;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fabric>
|
||||||
|
<div className={classNames.controlWrapper}>
|
||||||
|
<TextField placeholder='Search Grid' className={mergeStyles({ width: '60vh', paddingBottom:'10px' })} onChange={(event) => EventEmitter.dispatch(EventType.onSearch, event)}/>
|
||||||
|
</div>
|
||||||
|
<EditableGrid
|
||||||
|
id={1}
|
||||||
|
enableColumnEdit={true}
|
||||||
|
enableSave={true}
|
||||||
|
columns={attachGridValueChangeCallbacks(GridColumnConfig)}
|
||||||
|
layoutMode={DetailsListLayoutMode.justified}
|
||||||
|
selectionMode={SelectionMode.multiple}
|
||||||
|
enableRowEdit={true}
|
||||||
|
enableRowEditCancel={true}
|
||||||
|
enableBulkEdit={true}
|
||||||
|
items={items}
|
||||||
|
enableCellEdit={true}
|
||||||
|
enableExport={true}
|
||||||
|
enableTextFieldEditMode={true}
|
||||||
|
enableTextFieldEditModeCancel={true}
|
||||||
|
enableGridRowsDelete={true}
|
||||||
|
enableGridRowsAdd={true}
|
||||||
|
height={'70vh'}
|
||||||
|
width={'140vh'}
|
||||||
|
position={'relative'}
|
||||||
|
enableUnsavedEditIndicator={true}
|
||||||
|
onGridSave={onGridSave}
|
||||||
|
enableGridReset={true}
|
||||||
|
enableColumnFilters={true}
|
||||||
|
enableColumnFilterRules={true}
|
||||||
|
enableRowAddWithValues={{enable : true, enableRowsCounterInPanel : true}}
|
||||||
|
/>
|
||||||
|
</Fabric>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Consumer;
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
|
||||||
|
'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import { App } from './App';
|
||||||
|
import { mergeStyles } from '@fluentui/react';
|
||||||
|
import reportWebVitals from './reportWebVitals';
|
||||||
|
|
||||||
|
// Inject some global styles
|
||||||
|
mergeStyles({
|
||||||
|
':global(body,html,#root)': {
|
||||||
|
margin: 0,
|
||||||
|
padding: 0,
|
||||||
|
height: '100vh',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
ReactDOM.render(<App />, document.getElementById('root'));
|
||||||
|
|
||||||
|
// If you want to start measuring performance in your app, pass a function
|
||||||
|
// to log results (for example: reportWebVitals(console.log))
|
||||||
|
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||||
|
reportWebVitals();
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
import { ConstrainMode, DatePicker, IStackStyles, IStackTokens, ITextFieldStyles, mergeStyleSets, Position, PrimaryButton, SpinButton, Stack, TextField } from "office-ui-fabric-react";
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { IColumnConfig } from "../types/columnconfigtype";
|
||||||
|
import { EditControlType } from "../types/editcontroltype";
|
||||||
|
import { DayPickerStrings } from "./datepickerconfig";
|
||||||
|
import { controlClass, horizontalGapStackTokens, stackStyles, textFieldStyles, verticalGapStackTokens } from "./editablegridstyles";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
onChange: any;
|
||||||
|
columnConfigurationData: IColumnConfig[];
|
||||||
|
enableRowsCounterField?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AddRowPanel = (props: Props) => {
|
||||||
|
let AddSpinRef: any = React.createRef();
|
||||||
|
|
||||||
|
const updateObj : any = {};
|
||||||
|
|
||||||
|
const onTextUpdate = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string): void => {
|
||||||
|
updateObj[(ev.target as Element).id] = text;
|
||||||
|
//console.log(updateObj);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onPanelSubmit = (): void => {
|
||||||
|
props.onChange(updateObj, props.enableRowsCounterField ? AddSpinRef.current.value : 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onCellDateChange = (date: Date | null | undefined, item : any): void => {
|
||||||
|
updateObj[item.key] = date;
|
||||||
|
};
|
||||||
|
|
||||||
|
const createTextFields = () : any[] => {
|
||||||
|
let tmpRenderObj : any[] = [];
|
||||||
|
props.columnConfigurationData.forEach((item, index) => {
|
||||||
|
switch(item.inputType){
|
||||||
|
case EditControlType.Date:
|
||||||
|
tmpRenderObj.push(<DatePicker
|
||||||
|
label={item.text}
|
||||||
|
strings={DayPickerStrings}
|
||||||
|
placeholder="Select a date..."
|
||||||
|
ariaLabel="Select a date"
|
||||||
|
onSelectDate={(date) => onCellDateChange(date, item)}
|
||||||
|
//value={props != null && props.panelValues != null ? new Date(props.panelValues[item.key]) : new Date()}
|
||||||
|
value={new Date()}
|
||||||
|
/>);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
tmpRenderObj.push(<TextField
|
||||||
|
name={item.text}
|
||||||
|
id={item.key}
|
||||||
|
label={item.text}
|
||||||
|
styles={textFieldStyles}
|
||||||
|
onChange={(ev, text) => onTextUpdate(ev, text!)}
|
||||||
|
defaultValue = { '' }
|
||||||
|
/>);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if(props.enableRowsCounterField){
|
||||||
|
tmpRenderObj.push(
|
||||||
|
<SpinButton
|
||||||
|
componentRef = {AddSpinRef}
|
||||||
|
label="# of Rows to Add"
|
||||||
|
labelPosition={Position.top}
|
||||||
|
defaultValue="0"
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
step={1}
|
||||||
|
incrementButtonAriaLabel="Increase value by 1"
|
||||||
|
decrementButtonAriaLabel="Decrease value by 1"
|
||||||
|
styles={{ spinButtonWrapper: { width: 75 } }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(tmpRenderObj);
|
||||||
|
return tmpRenderObj;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack>
|
||||||
|
<Stack tokens={verticalGapStackTokens}>
|
||||||
|
{createTextFields()}
|
||||||
|
</Stack>
|
||||||
|
<Stack horizontal disableShrink styles={stackStyles} tokens={horizontalGapStackTokens}>
|
||||||
|
<PrimaryButton
|
||||||
|
text="Save To Grid"
|
||||||
|
className={controlClass.submitStylesEditpanel}
|
||||||
|
onClick={onPanelSubmit}
|
||||||
|
allowDisabledFocus
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddRowPanel;
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { Callout, DirectionalHint } from "office-ui-fabric-react";
|
||||||
|
import React from "react";
|
||||||
|
import { useId } from '@uifabric/react-hooks';
|
||||||
|
import { styles } from "./filtercalloutstyles";
|
||||||
|
import FilterList from "./filterlist";
|
||||||
|
import { IFilterCalloutProps } from "../../types/columnfilterstype";
|
||||||
|
|
||||||
|
interface Props extends IFilterCalloutProps {
|
||||||
|
onApply: any;
|
||||||
|
onCancel: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
const FilterCallout = (props : Props) => {
|
||||||
|
const labelId: string = useId('callout-label');
|
||||||
|
const descriptionId: string = useId('callout-description');
|
||||||
|
console.log(props.columnClass);
|
||||||
|
return(
|
||||||
|
<>
|
||||||
|
<Callout
|
||||||
|
className={styles.callout}
|
||||||
|
ariaLabelledBy={labelId}
|
||||||
|
ariaDescribedBy={descriptionId}
|
||||||
|
role="filtercallout"
|
||||||
|
gapSpace={5}
|
||||||
|
target={`.${props.columnClass}`}
|
||||||
|
isBeakVisible={true}
|
||||||
|
directionalHint={DirectionalHint.topCenter}
|
||||||
|
>
|
||||||
|
<FilterList onCancel={props.onCancel} onApply={props.onApply} columnKey={props.columnKey} columnName={props.columnName} filterList={props.filterList} />
|
||||||
|
</Callout>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FilterCallout;
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { mergeStyleSets } from "office-ui-fabric-react";
|
||||||
|
|
||||||
|
export const styles = mergeStyleSets({
|
||||||
|
callout: {
|
||||||
|
maxWidth: 500,
|
||||||
|
padding: 30
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,189 @@
|
||||||
|
import { ActionButton, Checkbox, DefaultButton, Dropdown, mergeStyles, PrimaryButton, ScrollablePane, ScrollbarVisibility, Stack, TextField } from "office-ui-fabric-react";
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { IFilterCalloutProps, IFilterItem, IFilterListItem, IFilterListProps } from "../../types/columnfilterstype";
|
||||||
|
import { styles, stackTokens } from "./filterliststyles";
|
||||||
|
|
||||||
|
interface Props extends IFilterListProps {
|
||||||
|
onApply: any;
|
||||||
|
onCancel: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
const FilterList = (props : Props) => {
|
||||||
|
const [filterItemsList, setFilterItemsList] = React.useState<IFilterListItem[]>([]);
|
||||||
|
const [filterListContent, setFilterListContent] = React.useState<JSX.Element[] | undefined>([]);
|
||||||
|
const [appliedFilters, setAppliedFilters] = React.useState<IFilterItem[]>([]);
|
||||||
|
|
||||||
|
const [isSelectAllIndeterminate, setIsSelectAllIndeterminate] = React.useState(true);
|
||||||
|
const [isSelectAllChecked, setIsSelectAllChecked] = React.useState(true);
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
debugger;
|
||||||
|
if(props && props.filterList && props.filterList.length > 0){
|
||||||
|
setFilterItemsList(props.filterList.map((item, index) => {
|
||||||
|
return {key: index, text : item.text, isFilteredIn : true, isChecked : item.isChecked};
|
||||||
|
}))
|
||||||
|
setAppliedFilters(props.filterList.map((item, index) => {
|
||||||
|
return {text : item.text, isChecked : item.isChecked};
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
setFilterItemsList([]);
|
||||||
|
}
|
||||||
|
},[props.filterList])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
}, [appliedFilters]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
debugger;
|
||||||
|
SetIndeterminate(filterItemsList);
|
||||||
|
if(filterItemsList && filterItemsList.length > 0){
|
||||||
|
let tmpRenderObj : any[] = [];
|
||||||
|
filterItemsList.filter((item) => item.isFilteredIn == true).forEach((item, index) => {
|
||||||
|
tmpRenderObj.push(<Checkbox
|
||||||
|
label={item.text}
|
||||||
|
key={item.key}
|
||||||
|
onChange={(ev, checked) => onCheckChanged(ev!, checked!, item.key!, item.text)}
|
||||||
|
//defaultChecked={item.isChecked}
|
||||||
|
className={styles.checkbox}
|
||||||
|
checked={item.isChecked}
|
||||||
|
/>);
|
||||||
|
});
|
||||||
|
setFilterListContent(tmpRenderObj);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
setFilterListContent(undefined);
|
||||||
|
}
|
||||||
|
},[filterItemsList])
|
||||||
|
|
||||||
|
const SetIndeterminate = (filterItemsList : IFilterListItem[]) : void => {
|
||||||
|
var checkedCount = filterItemsList.filter((item) => item.isChecked == true).length;
|
||||||
|
var totalCount = filterItemsList.length;
|
||||||
|
var uncheckedCount = totalCount - checkedCount;
|
||||||
|
|
||||||
|
if(checkedCount == totalCount){
|
||||||
|
setIsSelectAllIndeterminate(false);
|
||||||
|
setIsSelectAllChecked(true);
|
||||||
|
}
|
||||||
|
else if(uncheckedCount == totalCount){
|
||||||
|
setIsSelectAllIndeterminate(false);
|
||||||
|
setIsSelectAllChecked(false);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
setIsSelectAllIndeterminate(true);
|
||||||
|
setIsSelectAllChecked(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCheckChanged(ev: React.FormEvent<HTMLElement>, isChecked: boolean, key : number, text: string) {
|
||||||
|
debugger;
|
||||||
|
|
||||||
|
var filterItemsListTmp : IFilterListItem[] = [...filterItemsList];
|
||||||
|
filterItemsListTmp.filter((item) => item.key == key).map((item) => item.isChecked = isChecked);
|
||||||
|
setFilterItemsList(filterItemsListTmp);
|
||||||
|
|
||||||
|
var appliedFiltersTmp : IFilterItem[] = [...appliedFilters];
|
||||||
|
appliedFiltersTmp.filter((item) => item.text == text).map((item) => item.isChecked = isChecked);
|
||||||
|
setAppliedFilters(appliedFiltersTmp);
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSelectAllCheckChanged = (ev: React.FormEvent<HTMLElement>, isChecked: boolean) : void => {
|
||||||
|
var filterItemsListTmp : IFilterListItem[] = [...filterItemsList];
|
||||||
|
filterItemsListTmp.map((item) => item.isChecked = isChecked);
|
||||||
|
setFilterItemsList(filterItemsListTmp);
|
||||||
|
|
||||||
|
var appliedFiltersTmp : IFilterItem[] = [...appliedFilters];
|
||||||
|
appliedFiltersTmp.map((item) => item.isChecked = isChecked);
|
||||||
|
setAppliedFilters(appliedFiltersTmp);
|
||||||
|
}
|
||||||
|
|
||||||
|
const onReset = (): void => {
|
||||||
|
var filterItemsListTmp : IFilterListItem[] = [...filterItemsList];
|
||||||
|
filterItemsListTmp.map((item) => item.isChecked = false);
|
||||||
|
setFilterItemsList(filterItemsListTmp);
|
||||||
|
|
||||||
|
var appliedFiltersTmp : IFilterItem[] = [...appliedFilters];
|
||||||
|
appliedFiltersTmp.map((item) => item.isChecked = false);
|
||||||
|
setAppliedFilters(appliedFiltersTmp);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onApply = (): void => {
|
||||||
|
if(props.onApply){
|
||||||
|
var onApplyParams : IFilterListProps = { columnKey: props.columnKey, columnName: props.columnName, filterList: appliedFilters }
|
||||||
|
props.onApply(onApplyParams);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onFilterTextUpdate = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string | undefined): void => {
|
||||||
|
if(text){
|
||||||
|
let searchResult : IFilterListItem[] = [...filterItemsList];
|
||||||
|
searchResult.filter(
|
||||||
|
(_data, index) => {
|
||||||
|
var BreakException = {};
|
||||||
|
try{
|
||||||
|
if(_data.text.toString().toLowerCase().includes(text.trim().toLowerCase())){
|
||||||
|
_data.isFilteredIn = true;
|
||||||
|
throw BreakException;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
_data.isFilteredIn = false;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// if (e !== BreakException) throw e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
setFilterItemsList(searchResult);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
var filterItemsListTmp : IFilterListItem[] = [...filterItemsList];
|
||||||
|
filterItemsListTmp.map((item) => item.isFilteredIn = true);
|
||||||
|
setFilterItemsList(filterItemsListTmp);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return(
|
||||||
|
<>
|
||||||
|
<Stack verticalAlign="start" tokens={stackTokens}>
|
||||||
|
<TextField
|
||||||
|
placeholder={`Filter ${props.columnName}`}
|
||||||
|
onChange={(ev, text) => onFilterTextUpdate(ev, text)}
|
||||||
|
/>
|
||||||
|
<div className={mergeStyles({ height: '25vh', width: '30vh', position: 'relative', backgroundColor: 'white' })}>
|
||||||
|
<ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
|
||||||
|
<Checkbox
|
||||||
|
label="(Select All)"
|
||||||
|
key={'SelectAll'}
|
||||||
|
indeterminate={isSelectAllIndeterminate}
|
||||||
|
checked={isSelectAllChecked}
|
||||||
|
className={styles.selectAllCheckbox}
|
||||||
|
onChange={(ev, checked) => onSelectAllCheckChanged(ev!, checked!)}
|
||||||
|
/>
|
||||||
|
{filterListContent}
|
||||||
|
</ScrollablePane>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Stack horizontal horizontalAlign="start">
|
||||||
|
<ActionButton
|
||||||
|
className={styles.button}
|
||||||
|
onClick={onApply}
|
||||||
|
text="Apply" />
|
||||||
|
|
||||||
|
<ActionButton
|
||||||
|
text="Clear All"
|
||||||
|
className={styles.button}
|
||||||
|
onClick={onReset}
|
||||||
|
disabled={appliedFilters.filter((item) => item.isChecked == true).length == 0} />
|
||||||
|
|
||||||
|
<ActionButton
|
||||||
|
text="Cancel"
|
||||||
|
className={styles.button}
|
||||||
|
onClick={props.onCancel} />
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FilterList;
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { IStackTokens, mergeStyleSets } from "office-ui-fabric-react";
|
||||||
|
|
||||||
|
export const stackTokens: IStackTokens = { childrenGap: 20, maxWidth:1000 };
|
||||||
|
|
||||||
|
export const styles = mergeStyleSets({
|
||||||
|
checkbox: {
|
||||||
|
padding: 5,
|
||||||
|
},
|
||||||
|
selectAllCheckbox:{
|
||||||
|
padding: 5
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
margin: 10
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,221 @@
|
||||||
|
import { DefaultButton, Dialog, DialogFooter, Dropdown, IDialogStyleProps, IDialogStyles, IDropdownOption, IDropdownStyles, IStackTokens, ITextFieldStyles, mergeStyleSets, PrimaryButton, Stack, TextField } from "office-ui-fabric-react";
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { IColumnConfig } from "../../types/columnconfigtype";
|
||||||
|
import { IFilter, IOperators, operatorsArr } from "../../types/filterstype";
|
||||||
|
import { controlClass, dropdownStyles, modelProps, stackTokens, textFieldStyles } from "./columnfilterdialogStyles";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
columnConfigurationData: IColumnConfig[];
|
||||||
|
gridData: any[];
|
||||||
|
onDialogCancel?: any;
|
||||||
|
onDialogSave?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ColumnFilterDialog = (props : Props) => {
|
||||||
|
//const [gridColumn, setGridColumn] = useState('');
|
||||||
|
const [gridColumn, setGridColumn] = useState<IColumnConfig>();
|
||||||
|
const [operator, setOperator] = useState('');
|
||||||
|
const [value, setValue] = useState('');
|
||||||
|
//const [filter, setFilter] = useState<IFilter>({ column:'', operator:'', value: '' });
|
||||||
|
|
||||||
|
const onSelectGridColumn = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined, index: number | undefined): void => {
|
||||||
|
console.log(item)
|
||||||
|
//setGridColumn(item!.key.toString());
|
||||||
|
setGridColumn(props.columnConfigurationData.filter((val) => val.key == item!.key)[0]);
|
||||||
|
// var filterTmp : IFilter = {...filter};
|
||||||
|
// filterTmp.column = item!.key.toString();
|
||||||
|
// setFilter(filterTmp);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSelectOperator = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined, index: number | undefined): void => {
|
||||||
|
debugger;
|
||||||
|
console.log(item)
|
||||||
|
setOperator(item!.text.toString());
|
||||||
|
//var filterTmp : IFilter = {...filter};
|
||||||
|
//filterTmp.operator = item!.text.toString();
|
||||||
|
//setFilter(filterTmp);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSelectValue = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined, index: number | undefined): void => {
|
||||||
|
console.log(item)
|
||||||
|
setValue(item!.key.toString());
|
||||||
|
// var filterTmp : IFilter = {...filter};
|
||||||
|
// filterTmp.value = item!.key.toString();
|
||||||
|
// setFilter(filterTmp);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onTextUpdate = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string): void => {
|
||||||
|
console.log('Text Changed: ' + text);
|
||||||
|
setValue(text);
|
||||||
|
// var filterTmp : IFilter = {...filter};
|
||||||
|
// filterTmp.value = text;
|
||||||
|
// setFilter(filterTmp);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if(gridColumn && gridColumn.key && gridColumn.key.length > 0){
|
||||||
|
var column = props.columnConfigurationData.filter(x => x.key == gridColumn!.key);
|
||||||
|
if(column.length > 0){
|
||||||
|
var valueOptions = createValueOptions(column[0]);
|
||||||
|
switch(column[0].dataType){
|
||||||
|
case 'number':
|
||||||
|
setInputFieldContent(
|
||||||
|
<TextField
|
||||||
|
className={controlClass.textFieldClass}
|
||||||
|
placeholder="Value"
|
||||||
|
onChange={(ev, text) => onTextUpdate(ev, text!)}
|
||||||
|
styles={textFieldStyles}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
setOperatorDropDownContent(<Dropdown
|
||||||
|
placeholder="Select the Column"
|
||||||
|
options={createCompareOptions()}
|
||||||
|
styles={dropdownStyles}
|
||||||
|
onChange={onSelectOperator}
|
||||||
|
/>);
|
||||||
|
break;
|
||||||
|
case 'string':
|
||||||
|
setInputFieldContent(
|
||||||
|
<TextField
|
||||||
|
className={controlClass.textFieldClass}
|
||||||
|
placeholder="Value"
|
||||||
|
onChange={(ev, text) => onTextUpdate(ev, text!)}
|
||||||
|
styles={textFieldStyles}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
setOperatorDropDownContent(<Dropdown
|
||||||
|
placeholder="Select the Column"
|
||||||
|
options={createCompareOptions()}
|
||||||
|
styles={dropdownStyles}
|
||||||
|
onChange={onSelectOperator}
|
||||||
|
/>);
|
||||||
|
break;
|
||||||
|
case 'date':
|
||||||
|
setInputFieldContent(<Dropdown
|
||||||
|
placeholder="Select the Column"
|
||||||
|
options={valueOptions}
|
||||||
|
styles={dropdownStyles}
|
||||||
|
onChange={onSelectValue}
|
||||||
|
/>)
|
||||||
|
setOperatorDropDownContent(<Dropdown
|
||||||
|
placeholder="Select the Column"
|
||||||
|
options={createCompareOptions()}
|
||||||
|
styles={dropdownStyles}
|
||||||
|
onChange={onSelectOperator}
|
||||||
|
/>);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}, [gridColumn]);
|
||||||
|
|
||||||
|
const createDropDownOptions = () : IDropdownOption[] => {
|
||||||
|
let dropdownOptions: IDropdownOption[] = [];
|
||||||
|
props.columnConfigurationData.forEach((item, index) => {
|
||||||
|
dropdownOptions.push({ key: item.key, text: item.text});
|
||||||
|
});
|
||||||
|
|
||||||
|
return dropdownOptions;
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = createDropDownOptions();
|
||||||
|
|
||||||
|
const createCompareOptions = () : IDropdownOption[] => {
|
||||||
|
debugger;
|
||||||
|
if(!(gridColumn && gridColumn.key && gridColumn.key.length > 0)){
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
let dataType = props.columnConfigurationData.filter(x => x.key == gridColumn.key)[0].dataType;
|
||||||
|
let dropdownOptions: IDropdownOption[] = [];
|
||||||
|
let operatorsOptions : any[] = [];
|
||||||
|
switch(dataType){
|
||||||
|
case 'string':
|
||||||
|
operatorsOptions = operatorsArr.filter((item) => item.type == 'string')[0].value;
|
||||||
|
break;
|
||||||
|
case 'number':
|
||||||
|
operatorsOptions = operatorsArr.filter((item) => item.type == 'number')[0].value;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
operatorsOptions.forEach((item, index) => {
|
||||||
|
dropdownOptions.push({ key: item+index, text: item});
|
||||||
|
});
|
||||||
|
|
||||||
|
return dropdownOptions;
|
||||||
|
}
|
||||||
|
|
||||||
|
const createValueOptions = (column : IColumnConfig) : IDropdownOption[] => {
|
||||||
|
var columnData = props.gridData.map((item) => item[column.key]);
|
||||||
|
let dropdownOptions: IDropdownOption[] = [];
|
||||||
|
columnData.forEach((item, index) => {
|
||||||
|
dropdownOptions.push({ key: item+index, text: item});
|
||||||
|
});
|
||||||
|
|
||||||
|
return dropdownOptions;
|
||||||
|
};
|
||||||
|
|
||||||
|
//const compareOptions = createCompareOptions();
|
||||||
|
|
||||||
|
const [inputFieldContent, setInputFieldContent] = React.useState<JSX.Element | undefined>(
|
||||||
|
<Dropdown
|
||||||
|
placeholder="Select the Column"
|
||||||
|
options={options}
|
||||||
|
styles={dropdownStyles}
|
||||||
|
onChange={onSelectValue}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const [operatorDropDownContent, setOperatorDropDownContent] = React.useState<JSX.Element | undefined>(
|
||||||
|
<Dropdown
|
||||||
|
placeholder="Select the Column"
|
||||||
|
options={createCompareOptions()}
|
||||||
|
styles={dropdownStyles}
|
||||||
|
onChange={onSelectValue}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const closeDialog = React.useCallback((): void => {
|
||||||
|
if(props.onDialogCancel){
|
||||||
|
props.onDialogCancel();
|
||||||
|
}
|
||||||
|
|
||||||
|
setInputFieldContent(undefined)
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const saveDialog = (): void => {
|
||||||
|
debugger;
|
||||||
|
var filterObj : IFilter = { column: gridColumn!, operator: operator, value: value }
|
||||||
|
if(props.onDialogSave){
|
||||||
|
props.onDialogSave(filterObj);
|
||||||
|
}
|
||||||
|
|
||||||
|
setInputFieldContent(undefined);
|
||||||
|
};
|
||||||
|
|
||||||
|
return(
|
||||||
|
<Dialog modalProps={modelProps} hidden={!inputFieldContent} onDismiss={closeDialog} closeButtonAriaLabel="Close">
|
||||||
|
<Stack verticalAlign="start" tokens={stackTokens}>
|
||||||
|
<Dropdown
|
||||||
|
placeholder="Select the Column"
|
||||||
|
options={options}
|
||||||
|
styles={dropdownStyles}
|
||||||
|
onChange={onSelectGridColumn}
|
||||||
|
/>
|
||||||
|
{operatorDropDownContent}
|
||||||
|
{inputFieldContent}
|
||||||
|
</Stack>
|
||||||
|
<DialogFooter>
|
||||||
|
<PrimaryButton
|
||||||
|
// eslint-disable-next-line react/jsx-no-bind
|
||||||
|
onClick={saveDialog}
|
||||||
|
text="Save"
|
||||||
|
/>
|
||||||
|
<DefaultButton
|
||||||
|
//onClick={closeDialog}
|
||||||
|
text="Cancel" />
|
||||||
|
</DialogFooter>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ColumnFilterDialog;
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { IDropdownStyles, IStackTokens, ITextFieldStyles, mergeStyleSets } from "office-ui-fabric-react";
|
||||||
|
|
||||||
|
export const dropdownStyles: Partial<IDropdownStyles> = {
|
||||||
|
dropdown: { width: '90%', margin:10 },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const controlClass = mergeStyleSets({
|
||||||
|
textFieldClass:{
|
||||||
|
display: 'block',
|
||||||
|
margin: 10,
|
||||||
|
width: '90%'
|
||||||
|
},
|
||||||
|
datePickerClass:{
|
||||||
|
display: 'block',
|
||||||
|
margin: 10,
|
||||||
|
width: '90%'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const stackTokens: IStackTokens = { childrenGap: 20, maxWidth:1000 };
|
||||||
|
export const textFieldStyles: Partial<ITextFieldStyles> = { fieldGroup: {} };
|
||||||
|
export const modelProps = {
|
||||||
|
isBlocking: false,
|
||||||
|
styles: { main: { maxWidth: '100vh' }},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,161 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
import { DatePicker, DefaultButton, Dialog, DialogFooter, Dropdown, IDropdownOption, IDropdownStyles, IStackTokens, ITextFieldStyles, mergeStyleSets, PrimaryButton, Stack, TextField } from "office-ui-fabric-react";
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { IColumnConfig } from "../types/columnconfigtype";
|
||||||
|
import { EditControlType } from "../types/editcontroltype";
|
||||||
|
import { DayPickerStrings } from "./datepickerconfig";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
columnConfigurationData: IColumnConfig[];
|
||||||
|
onDialogCancel?: any;
|
||||||
|
onDialogSave?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ColumnUpdateDialog = (props : Props) => {
|
||||||
|
const controlClass = mergeStyleSets({
|
||||||
|
textFieldClass:{
|
||||||
|
display: 'block',
|
||||||
|
margin: 10,
|
||||||
|
width: '90%'
|
||||||
|
},
|
||||||
|
datePickerClass:{
|
||||||
|
display: 'block',
|
||||||
|
margin: 10,
|
||||||
|
width: '90%'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const textFieldStyles: Partial<ITextFieldStyles> = { fieldGroup: {} };
|
||||||
|
|
||||||
|
|
||||||
|
const [gridColumn, setGridColumn] = useState('');
|
||||||
|
const [columnDialogValues, setColumnDialogValues] = useState({
|
||||||
|
});
|
||||||
|
|
||||||
|
const stackTokens: IStackTokens = { childrenGap: 10 };
|
||||||
|
const dropdownStyles: Partial<IDropdownStyles> = {
|
||||||
|
dropdown: { width: '90%', margin:10 },
|
||||||
|
};
|
||||||
|
|
||||||
|
const onTextUpdate = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string): void => {
|
||||||
|
console.log('Text Changed: ' + text);
|
||||||
|
setColumnDialogValues({[gridColumn]: text});
|
||||||
|
};
|
||||||
|
|
||||||
|
const [inputFieldContent, setInputFieldContent] = React.useState<JSX.Element | undefined>(
|
||||||
|
<TextField
|
||||||
|
className={controlClass.textFieldClass}
|
||||||
|
placeholder="Value"
|
||||||
|
onChange={(ev, text) => onTextUpdate(ev, text!)}
|
||||||
|
styles={textFieldStyles}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const onSelectDate = (date: Date | null | undefined): void => {
|
||||||
|
setColumnDialogValues({[gridColumn] : date!.toDateString()});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSelectGridColumn = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
|
||||||
|
console.log(item)
|
||||||
|
setGridColumn(item!.key.toString());
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeDialog = React.useCallback((): void => {
|
||||||
|
if(props.onDialogCancel){
|
||||||
|
props.onDialogCancel();
|
||||||
|
}
|
||||||
|
|
||||||
|
setInputFieldContent(undefined)
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const saveDialog = (): void => {
|
||||||
|
debugger;
|
||||||
|
if(props.onDialogSave){
|
||||||
|
props.onDialogSave(columnDialogValues);
|
||||||
|
}
|
||||||
|
|
||||||
|
setInputFieldContent(undefined);
|
||||||
|
};
|
||||||
|
|
||||||
|
const createDropDownOptions = () : IDropdownOption[] => {
|
||||||
|
let dropdownOptions: IDropdownOption[] = [];
|
||||||
|
props.columnConfigurationData.forEach((item, index) => {
|
||||||
|
if(item.editable == true){
|
||||||
|
dropdownOptions.push({ key: item.key, text: item.text});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return dropdownOptions;
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = createDropDownOptions();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
},[columnDialogValues]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
//debugger;
|
||||||
|
setColumnDialogValues({[gridColumn]:''});
|
||||||
|
var column = props.columnConfigurationData.filter(x => x.key == gridColumn);
|
||||||
|
if(column.length > 0){
|
||||||
|
switch(column[0].inputType){
|
||||||
|
case EditControlType.TextField:
|
||||||
|
setInputFieldContent(
|
||||||
|
<TextField
|
||||||
|
className={controlClass.textFieldClass}
|
||||||
|
placeholder="Value"
|
||||||
|
onChange={(ev, text) => onTextUpdate(ev, text!)}
|
||||||
|
styles={textFieldStyles}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case EditControlType.Date:
|
||||||
|
setInputFieldContent(<DatePicker
|
||||||
|
strings={DayPickerStrings}
|
||||||
|
placeholder="Select a date..."
|
||||||
|
ariaLabel="Select a date"
|
||||||
|
className={controlClass.datePickerClass}
|
||||||
|
onSelectDate={onSelectDate}
|
||||||
|
/>);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
setInputFieldContent(
|
||||||
|
<TextField
|
||||||
|
className={controlClass.textFieldClass}
|
||||||
|
placeholder="Value"
|
||||||
|
onChange={(ev, text) => onTextUpdate(ev, text!)}
|
||||||
|
styles={textFieldStyles}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [gridColumn]);
|
||||||
|
|
||||||
|
return(
|
||||||
|
<Dialog hidden={!inputFieldContent} onDismiss={closeDialog} closeButtonAriaLabel="Close">
|
||||||
|
<Stack verticalAlign="start" tokens={stackTokens}>
|
||||||
|
<Dropdown
|
||||||
|
placeholder="Select the Column"
|
||||||
|
options={options}
|
||||||
|
styles={dropdownStyles}
|
||||||
|
onChange={onSelectGridColumn}
|
||||||
|
/>
|
||||||
|
{inputFieldContent}
|
||||||
|
</Stack>
|
||||||
|
<DialogFooter>
|
||||||
|
<PrimaryButton
|
||||||
|
// eslint-disable-next-line react/jsx-no-bind
|
||||||
|
onClick={saveDialog}
|
||||||
|
text="Save"
|
||||||
|
/>
|
||||||
|
<DefaultButton onClick={closeDialog} text="Cancel" />
|
||||||
|
</DialogFooter>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ColumnUpdateDialog;
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
import { IDatePickerStrings } from "office-ui-fabric-react";
|
||||||
|
|
||||||
|
export const DayPickerStrings: IDatePickerStrings = {
|
||||||
|
months: [
|
||||||
|
'January',
|
||||||
|
'February',
|
||||||
|
'March',
|
||||||
|
'April',
|
||||||
|
'May',
|
||||||
|
'June',
|
||||||
|
'July',
|
||||||
|
'August',
|
||||||
|
'September',
|
||||||
|
'October',
|
||||||
|
'November',
|
||||||
|
'December',
|
||||||
|
],
|
||||||
|
shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||||
|
|
||||||
|
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||||||
|
|
||||||
|
shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
|
||||||
|
|
||||||
|
goToToday: 'Go to today',
|
||||||
|
prevMonthAriaLabel: 'Go to previous month',
|
||||||
|
nextMonthAriaLabel: 'Go to next month',
|
||||||
|
prevYearAriaLabel: 'Go to previous year',
|
||||||
|
nextYearAriaLabel: 'Go to next year',
|
||||||
|
closeButtonAriaLabel: 'Close date picker',
|
||||||
|
|
||||||
|
isRequiredErrorMessage: 'Field is required.',
|
||||||
|
|
||||||
|
invalidInputErrorMessage: 'Invalid date format.',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function dateToISOLikeButLocal(date: any) {
|
||||||
|
const offsetMs = date.getTimezoneOffset() * 60 * 1000;
|
||||||
|
const msLocal = date.getTime() - offsetMs;
|
||||||
|
const dateLocal = new Date(msLocal);
|
||||||
|
const iso = dateLocal.toISOString();
|
||||||
|
const isoLocal = iso.slice(0, 10);
|
||||||
|
return isoLocal;
|
||||||
|
}
|
||||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,81 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
import { IColumn, ICommandBarItemProps, IconButton, TextField } from "office-ui-fabric-react";
|
||||||
|
import React from "react";
|
||||||
|
import { IColumnConfig } from "../types/columnconfigtype";
|
||||||
|
import { Operation } from "../types/operation";
|
||||||
|
import { controlClass, textFieldStyles } from "./editablegridstyles";
|
||||||
|
import { initializeIcons } from 'office-ui-fabric-react';
|
||||||
|
import { EditControlType } from "../types/editcontroltype";
|
||||||
|
|
||||||
|
initializeIcons(/* optional base url */);
|
||||||
|
|
||||||
|
export const InitializeInternalGrid = (items : any[]) : any[] => {
|
||||||
|
return items.map((obj, index) => {
|
||||||
|
if(Object.keys(obj).indexOf('_grid_row_id_') == -1 && Object.keys(obj).indexOf('_grid_row_operation_') == -1)
|
||||||
|
{
|
||||||
|
obj._grid_row_id_ = index;
|
||||||
|
obj._grid_row_operation_ = Operation.None;
|
||||||
|
obj._is_filtered_in_ = true;
|
||||||
|
obj._is_filtered_in_grid_search_ = true;
|
||||||
|
obj._is_filtered_in_column_filter_ = true;
|
||||||
|
}
|
||||||
|
return obj;
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ResetGridRowID = (items : any[]) : any[] => {
|
||||||
|
return items.map((obj, index) => {
|
||||||
|
obj._grid_row_id_ = index;
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const InitializeInternalGridEditStructure = (items : any[]) : any[] => {
|
||||||
|
let activateCellEditTmp : any[] = [];
|
||||||
|
items.forEach((item, index) => {
|
||||||
|
let activateCellEditRowTmp : any = {'isActivated' : false, properties : {}};
|
||||||
|
var objectKeys = Object.keys(item);
|
||||||
|
objectKeys.forEach((objKey) => {
|
||||||
|
activateCellEditRowTmp.properties[objKey] = {'activated' : false, 'value' : item[objKey]};
|
||||||
|
})
|
||||||
|
|
||||||
|
activateCellEditTmp.push(activateCellEditRowTmp);
|
||||||
|
});
|
||||||
|
console.log(activateCellEditTmp);
|
||||||
|
return activateCellEditTmp;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ShallowCopyDefaultGridToEditGrid = (defaultGrid : any[], editGrid : any[]) : any[] => {
|
||||||
|
debugger;
|
||||||
|
defaultGrid.forEach((item, index) => {
|
||||||
|
var objectKeys = Object.keys(item);
|
||||||
|
objectKeys.forEach((objKey) => {
|
||||||
|
editGrid[index].properties[objKey]['value'] = item[objKey];
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
return editGrid;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ShallowCopyEditGridToDefaultGrid = (defaultGrid : any[], editGrid : any[]) : any[] => {
|
||||||
|
editGrid.forEach((item) => {
|
||||||
|
var index = defaultGrid.findIndex((row) => row._grid_row_id_ == item.properties._grid_row_id_.value);
|
||||||
|
if(index >= 0){
|
||||||
|
var objectKeys = Object.keys(item.properties);
|
||||||
|
objectKeys.forEach((objKey) => {
|
||||||
|
if(defaultGrid[index][objKey] != item.properties[objKey].value){
|
||||||
|
defaultGrid[index][objKey] = item.properties[objKey].value;
|
||||||
|
|
||||||
|
if(defaultGrid[index]['_grid_row_operation_'] != Operation.Add && defaultGrid[index]['_grid_row_operation_'] != Operation.Update){
|
||||||
|
defaultGrid[index]['_grid_row_operation_'] = Operation.Update;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return defaultGrid;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
import { getTheme, IDetailsColumnStyles, IStackStyles, IStackTokens, ITextFieldStyles, mergeStyleSets } from "office-ui-fabric-react";
|
||||||
|
import { ICellStyleRulesType } from "../types/cellstyleruletype";
|
||||||
|
import { IColumnConfig } from "../types/columnconfigtype";
|
||||||
|
import { EvaluateRule } from "./helper";
|
||||||
|
|
||||||
|
export const stackStyles: Partial<IStackStyles> = { root: { width: 500 } };
|
||||||
|
|
||||||
|
export const controlClass = mergeStyleSets({
|
||||||
|
control: {
|
||||||
|
marginBottom: '10px',
|
||||||
|
marginRight: '30px',
|
||||||
|
maxWidth: '300px',
|
||||||
|
},
|
||||||
|
searchStyles: {
|
||||||
|
marginTop: '5px',
|
||||||
|
},
|
||||||
|
submitStyles: {
|
||||||
|
marginTop: '20px',
|
||||||
|
marginLeft: '10px',
|
||||||
|
},
|
||||||
|
buttonStyles: {
|
||||||
|
margin: 5
|
||||||
|
},
|
||||||
|
textFieldClass:{
|
||||||
|
display: 'block',
|
||||||
|
margin: 10
|
||||||
|
},
|
||||||
|
spanStyles:{
|
||||||
|
display:'inline-block',
|
||||||
|
width:'100%',
|
||||||
|
height:'100%',
|
||||||
|
//lineHeight:'250%'
|
||||||
|
},
|
||||||
|
dialogSubMessageStyles : {
|
||||||
|
margin: 10,
|
||||||
|
},
|
||||||
|
dialogHeaderStyles : {
|
||||||
|
margin: 10,
|
||||||
|
},
|
||||||
|
submitStylesEditpanel: {
|
||||||
|
marginTop: '20px',
|
||||||
|
marginLeft: '10px',
|
||||||
|
marginRight: '10px',
|
||||||
|
maxWidth: '300px',
|
||||||
|
},
|
||||||
|
labelValue: {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const GetDynamicSpanStyles = (column : IColumnConfig, cellValue : number | string | undefined) : string => {
|
||||||
|
|
||||||
|
var styleRule = column.cellStyleRule ?? undefined;
|
||||||
|
var isRuleTrue : boolean = EvaluateRule(column.dataType ?? 'string', cellValue, styleRule);
|
||||||
|
var styles = mergeStyleSets({
|
||||||
|
dynamicSpanStyle: {
|
||||||
|
display:'inline-block',
|
||||||
|
width:'100%',
|
||||||
|
height:'100%',
|
||||||
|
//textAlign:'center',
|
||||||
|
color:(!column.cellStyleRule || !column.cellStyleRule.enable) ? undefined : (isRuleTrue ? styleRule?.whenTrue?.textColor : styleRule?.whenFalse?.textColor),
|
||||||
|
//backgroundColor: (!column.cellStyleRule || !column.cellStyleRule.enable) ? undefined : (isRuleTrue ? styleRule?.whenTrue?.backgroundColor : styleRule?.whenFalse?.backgroundColor),
|
||||||
|
//lineHeight:'250%',
|
||||||
|
fontWeight:(!column.cellStyleRule || !column.cellStyleRule.enable) ? undefined : (isRuleTrue ? styleRule?.whenTrue?.fontWeight : styleRule?.whenFalse?.fontWeight)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return styles.dynamicSpanStyle;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const verticalGapStackTokens: IStackTokens = {
|
||||||
|
childrenGap: 15,
|
||||||
|
padding: 10,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const horizontalGapStackTokens: IStackTokens = {
|
||||||
|
childrenGap: 10,
|
||||||
|
padding: 10,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const textFieldStyles: Partial<ITextFieldStyles> = { fieldGroup: {} };
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
import { DatePicker, IStackStyles, IStackTokens, ITextFieldStyles, mergeStyleSets, PrimaryButton, Stack, TextField } from "office-ui-fabric-react";
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { IColumnConfig } from "../types/columnconfigtype";
|
||||||
|
import { EditControlType } from "../types/editcontroltype";
|
||||||
|
import { DayPickerStrings } from "./datepickerconfig";
|
||||||
|
import { controlClass, horizontalGapStackTokens, stackStyles, textFieldStyles, verticalGapStackTokens } from "./editablegridstyles";
|
||||||
|
import { IsValidDataType } from "./helper";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
onChange: any;
|
||||||
|
columnConfigurationData: IColumnConfig[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const EditPanel = (props: Props) => {
|
||||||
|
const updateObj : any = {};
|
||||||
|
|
||||||
|
const onTextUpdate = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string, column : IColumnConfig): void => {
|
||||||
|
debugger;
|
||||||
|
if(!IsValidDataType(column.dataType, text) || text.trim() == ''){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateObj[(ev.target as Element).id] = text;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onPanelSubmit = (): void => {
|
||||||
|
console.log(updateObj);
|
||||||
|
props.onChange(updateObj);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onCellDateChange = (date: Date | null | undefined, item : any): void => {
|
||||||
|
updateObj[item.key] = date;
|
||||||
|
};
|
||||||
|
|
||||||
|
const createTextFields = () : any[] => {
|
||||||
|
let tmpRenderObj : any[] = [];
|
||||||
|
props.columnConfigurationData.forEach((item, index) => {
|
||||||
|
if(item.editable == true){
|
||||||
|
switch(item.inputType){
|
||||||
|
case EditControlType.Date:
|
||||||
|
tmpRenderObj.push(<DatePicker
|
||||||
|
label={item.text}
|
||||||
|
strings={DayPickerStrings}
|
||||||
|
placeholder="Select a date..."
|
||||||
|
ariaLabel="Select a date"
|
||||||
|
onSelectDate={(date) => onCellDateChange(date, item)}
|
||||||
|
//value={props != null && props.panelValues != null ? new Date(props.panelValues[item.key]) : new Date()}
|
||||||
|
value={new Date()}
|
||||||
|
/>);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
tmpRenderObj.push(<TextField
|
||||||
|
name={item.text}
|
||||||
|
id={item.key}
|
||||||
|
label={item.text}
|
||||||
|
styles={textFieldStyles}
|
||||||
|
onChange={(ev, text) => onTextUpdate(ev, text!, item)}
|
||||||
|
defaultValue = { '' }
|
||||||
|
/>);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
console.log(tmpRenderObj);
|
||||||
|
return tmpRenderObj;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack>
|
||||||
|
<Stack tokens={verticalGapStackTokens}>
|
||||||
|
{createTextFields()}
|
||||||
|
</Stack>
|
||||||
|
<Stack horizontal disableShrink styles={stackStyles} tokens={horizontalGapStackTokens}>
|
||||||
|
<PrimaryButton
|
||||||
|
text="Save To Grid"
|
||||||
|
className={controlClass.submitStylesEditpanel}
|
||||||
|
onClick={onPanelSubmit}
|
||||||
|
allowDisabledFocus
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditPanel;
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
import { ExportType } from "../types/exporttype";
|
||||||
|
import * as XLSX from 'xlsx';
|
||||||
|
import * as FileSaver from 'file-saver';
|
||||||
|
|
||||||
|
export const ExportToExcelUtil = (exportData : any[], fileName : string): void =>
|
||||||
|
{
|
||||||
|
let fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
|
||||||
|
|
||||||
|
const ws = XLSX.utils.json_to_sheet(exportData);
|
||||||
|
const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };
|
||||||
|
const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
|
||||||
|
const data = new Blob([excelBuffer], {type: fileType});
|
||||||
|
FileSaver.saveAs(data, fileName);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ExportToCSVUtil = (exportData : any[], fileName : string) : void => {
|
||||||
|
if (!exportData || !exportData.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const separator = ',';
|
||||||
|
const keys = Object.keys(exportData[0]);
|
||||||
|
const csvContent =
|
||||||
|
keys.join(separator) +
|
||||||
|
'\n' +
|
||||||
|
exportData.map(row => {
|
||||||
|
return keys.map(k => {
|
||||||
|
let cell = row[k] === null || row[k] === undefined ? '' : row[k];
|
||||||
|
cell = cell instanceof Date
|
||||||
|
? cell.toLocaleString()
|
||||||
|
: cell.toString().replace(/"/g, '""');
|
||||||
|
if (cell.search(/("|,|\n)/g) >= 0) {
|
||||||
|
cell = `"${cell}"`;
|
||||||
|
}
|
||||||
|
return cell;
|
||||||
|
}).join(separator);
|
||||||
|
}).join('\n');
|
||||||
|
|
||||||
|
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||||
|
if (navigator.msSaveBlob) { // IE 10+
|
||||||
|
navigator.msSaveBlob(blob, fileName);
|
||||||
|
} else {
|
||||||
|
const link = document.createElement('a');
|
||||||
|
if (link.download !== undefined) {
|
||||||
|
// Browsers that support HTML5 download attribute
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
link.setAttribute('href', url);
|
||||||
|
link.setAttribute('download', fileName);
|
||||||
|
link.style.visibility = 'hidden';
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
import { ICellStyleRulesType } from "../types/cellstyleruletype";
|
||||||
|
import { IGridColumnFilter } from "../types/columnfilterstype";
|
||||||
|
import { dateOperatorEval, IFilter, numberOperatorEval, stringOperatorEval } from "../types/filterstype";
|
||||||
|
|
||||||
|
export const filterGridData = (data : any[], filters : IFilter[]) : any[] => {
|
||||||
|
debugger;
|
||||||
|
var dataTmp : any[] = [...data];
|
||||||
|
dataTmp.forEach((row) => {
|
||||||
|
var isRowIncluded : boolean = true;
|
||||||
|
filters.forEach((item) => {
|
||||||
|
if(isRowIncluded){
|
||||||
|
var columnType = item.column.dataType;
|
||||||
|
switch(columnType){
|
||||||
|
case 'number':
|
||||||
|
isRowIncluded = isRowIncluded && numberOperatorEval(row[item.column.key], item.value, item.operator);
|
||||||
|
break;
|
||||||
|
case 'string':
|
||||||
|
isRowIncluded = isRowIncluded && stringOperatorEval(row[item.column.key], item.value, item.operator);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if(isRowIncluded){
|
||||||
|
row._is_filtered_in_ = true;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
row._is_filtered_in_ = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return dataTmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const applyGridColumnFilter = (data : any[], gridColumnFilterArr : IGridColumnFilter[]) : any[] => {
|
||||||
|
debugger;
|
||||||
|
var dataTmp : any[] = [...data];
|
||||||
|
if(gridColumnFilterArr.filter((item) => item.isApplied == true).length > 0){
|
||||||
|
dataTmp.map((row) => row._is_filtered_in_column_filter_ = true);
|
||||||
|
}
|
||||||
|
|
||||||
|
gridColumnFilterArr.filter((gridColumnFilter) => gridColumnFilter.isApplied == true).forEach((gridColumnFilter, index) => {
|
||||||
|
dataTmp.filter((row) => row._is_filtered_in_column_filter_ == true).forEach((row, i) => {
|
||||||
|
row._is_filtered_in_column_filter_ = gridColumnFilter.filterCalloutProps!.filterList.filter(a => a.isChecked == true).map(a => a.text).includes(row[gridColumnFilter.column.key]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return dataTmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const isColumnDataTypeSupportedForFilter = (datatype : string | undefined) : boolean => {
|
||||||
|
switch(datatype){
|
||||||
|
case 'number':
|
||||||
|
return true;
|
||||||
|
case 'string':
|
||||||
|
return true;
|
||||||
|
default:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const IsValidDataType = (type : string | undefined, text : string) : boolean => {
|
||||||
|
var isValid = true;
|
||||||
|
switch(type){
|
||||||
|
case 'number':
|
||||||
|
isValid = !isNaN(Number(text));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return isValid;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const EvaluateRule = (datatType : string, cellValue: string | number | undefined, styleRule: ICellStyleRulesType | undefined): boolean => {
|
||||||
|
if(!styleRule){
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch(datatType){
|
||||||
|
case 'number':
|
||||||
|
return numberOperatorEval(Number(cellValue), styleRule?.rule!.value as number, styleRule?.rule!.operator);
|
||||||
|
case 'string':
|
||||||
|
return stringOperatorEval(String(cellValue), styleRule?.rule!.value as string, styleRule?.rule!.operator)
|
||||||
|
case 'date':
|
||||||
|
return dateOperatorEval(new Date(String(cellValue)), new Date(styleRule?.rule!.value), styleRule?.rule!.operator);
|
||||||
|
default:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
import { DefaultButton, Dialog, DialogFooter, mergeStyleSets } from "office-ui-fabric-react";
|
||||||
|
import React, { useEffect } from "react";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
message?: string;
|
||||||
|
subMessage?: string;
|
||||||
|
onDialogClose?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MessageDialog = (props : Props) => {
|
||||||
|
const [messageDialogContent, setMessageDialogContent] = React.useState<JSX.Element | undefined>(undefined);
|
||||||
|
const closeDialog = React.useCallback((): void => {
|
||||||
|
if(props.onDialogClose){
|
||||||
|
props.onDialogClose();
|
||||||
|
}
|
||||||
|
setMessageDialogContent(undefined);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const controlClass = mergeStyleSets({
|
||||||
|
dialogSubMessageStyles : {
|
||||||
|
margin: 10,
|
||||||
|
},
|
||||||
|
dialogHeaderStyles : {
|
||||||
|
margin: 10,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMessageDialogContent(
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<h3 className={controlClass.dialogHeaderStyles}>{props && props.message ? props.message : ''}</h3>
|
||||||
|
<div className={controlClass.dialogSubMessageStyles}>
|
||||||
|
{props && props.subMessage ? props.subMessage : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<DefaultButton onClick={() => closeDialog()} text="Close" />
|
||||||
|
</DialogFooter>
|
||||||
|
</>,
|
||||||
|
);
|
||||||
|
}, [props]);
|
||||||
|
|
||||||
|
return(
|
||||||
|
<Dialog hidden={!messageDialogContent} onDismiss={closeDialog} closeButtonAriaLabel="Close">
|
||||||
|
{messageDialogContent}
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MessageDialog;
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
export const EventType = {
|
||||||
|
onSearch: 'onSearch',
|
||||||
|
onClick: 'onClick'
|
||||||
|
};
|
||||||
|
|
||||||
|
export const EventEmitter = {
|
||||||
|
events: {},
|
||||||
|
|
||||||
|
subscribe: function(event, callback) {
|
||||||
|
if (!this.events[event]) this.events[event] = [];
|
||||||
|
if (this.events[event].some(c => c === callback)) {
|
||||||
|
console.warn(event + ' Already subscribed by ');
|
||||||
|
console.log(callback);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.events[event].push(callback);
|
||||||
|
},
|
||||||
|
|
||||||
|
unsubscribe: function(event, callback) {
|
||||||
|
this.events[event] = this.events[event].filter(c => c !== callback);
|
||||||
|
},
|
||||||
|
|
||||||
|
dispatch: function(event, data) {
|
||||||
|
if (!this.events[event]) return;
|
||||||
|
this.events[event].forEach(callback => callback(data));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
export { default as EditableGrid } from "./editablegrid/editablegrid";
|
||||||
|
export type { ICallBackParams, ICallBackRequestParams } from "./types/callbackparams";
|
||||||
|
export type { IColumnConfig } from "./types/columnconfigtype";
|
||||||
|
export { EditControlType } from "./types/editcontroltype";
|
||||||
|
export type { IGridItemsType } from "./types/griditemstype";
|
||||||
|
export { EventEmitter, EventType } from "./eventemitter/EventEmitter";
|
||||||
|
export { NumberAndDateOperators, StringOperators } from './types/cellstyleruletype';
|
||||||
|
export type { ICellStyleRulesType } from './types/cellstyleruletype';
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
export enum CalculationType {
|
||||||
|
Addition,
|
||||||
|
Subtraction,
|
||||||
|
Multiplication,
|
||||||
|
Division
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
export interface ICallBackRequestParams extends ICallBackParams {
|
||||||
|
callbackhook : any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ICallBackParams {
|
||||||
|
data : any[];
|
||||||
|
rowindex: Number[];
|
||||||
|
triggerkey: string;
|
||||||
|
activatetriggercell: boolean;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
export interface ICellStyleRulesType {
|
||||||
|
enable?: boolean;
|
||||||
|
rule?: IStringCellValueRule | INumberCellValueRule;
|
||||||
|
whenTrue?: ICellStyle;
|
||||||
|
whenFalse?: ICellStyle;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IStringCellValueRule {
|
||||||
|
operator: StringOperators;
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface INumberCellValueRule {
|
||||||
|
operator: NumberAndDateOperators;
|
||||||
|
value: number | Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum StringOperators {
|
||||||
|
EQUALS = 'equals',
|
||||||
|
CONTAINS = 'contains',
|
||||||
|
STARTSWITH = 'starts with',
|
||||||
|
ENDSWITH = 'ends with',
|
||||||
|
NOTEQUALTO = 'not equal to'
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum NumberAndDateOperators {
|
||||||
|
GREATERTHAN = '>',
|
||||||
|
LESSTHAN = '<',
|
||||||
|
GREATERTHANOREQUALTO = '>=',
|
||||||
|
LESSTHANOREQUALTO = '<=',
|
||||||
|
EQUALTO = '=',
|
||||||
|
NOTEQUALTO = '!='
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ICellStyle {
|
||||||
|
textColor?: string;
|
||||||
|
//backgroundColor: string;
|
||||||
|
fontWeight?: string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
import { ConstrainMode, IColumn, IDetailsHeaderProps } from 'office-ui-fabric-react/lib/components/DetailsList/DetailsList.types';
|
||||||
|
import { CalculationType } from "./calculationtype";
|
||||||
|
import { ICellStyleRulesType } from './cellstyleruletype';
|
||||||
|
import { EditControlType } from "./editcontroltype";
|
||||||
|
|
||||||
|
export interface IColumnConfig extends IColumn {
|
||||||
|
key: string;
|
||||||
|
text: string;
|
||||||
|
editable?: boolean;
|
||||||
|
dataType?: string;
|
||||||
|
isResizable?: boolean;
|
||||||
|
includeColumnInExport?: boolean;
|
||||||
|
includeColumnInSearch?: boolean;
|
||||||
|
inputType?: EditControlType;
|
||||||
|
calculatedColumn?: { type: CalculationType, fields: any[] };
|
||||||
|
onChange?: any;
|
||||||
|
maxLength?: number;
|
||||||
|
applyColumnFilter?: boolean;
|
||||||
|
cellStyleRule?: ICellStyleRulesType;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
import { IColumnConfig } from "./columnconfigtype";
|
||||||
|
|
||||||
|
export interface IFilterItem {
|
||||||
|
text: any;
|
||||||
|
isChecked: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IFilterListItem extends IFilterItem {
|
||||||
|
key : number;
|
||||||
|
isFilteredIn : boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IFilterListProps {
|
||||||
|
columnKey: string;
|
||||||
|
columnName: string;
|
||||||
|
filterList : IFilterItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IFilterCalloutProps extends IFilterListProps {
|
||||||
|
columnClass: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IGridColumnFilter {
|
||||||
|
index: number;
|
||||||
|
column: IColumnConfig;
|
||||||
|
isApplied: boolean;
|
||||||
|
isHidden: boolean;
|
||||||
|
filterCalloutProps?: IFilterCalloutProps;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IColumnFilterValues{
|
||||||
|
column: IColumnConfig;
|
||||||
|
value: any[];
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { ConstrainMode } from "office-ui-fabric-react/lib/components/DetailsList";
|
||||||
|
import { IDetailsListProps } from "office-ui-fabric-react/lib/components/DetailsList/DetailsList";
|
||||||
|
import { IColumnConfig } from "./columnconfigtype";
|
||||||
|
import { IRowAddWithValues } from "./rowaddtype";
|
||||||
|
|
||||||
|
export interface Props extends IDetailsListProps {
|
||||||
|
id: number;
|
||||||
|
items: any[];
|
||||||
|
columns: IColumnConfig[];
|
||||||
|
enableExport?: boolean;
|
||||||
|
exportFileName?: string;
|
||||||
|
enableSave?: boolean;
|
||||||
|
enableRowEdit?: boolean;
|
||||||
|
enableRowEditCancel?: boolean;
|
||||||
|
enableColumnEdit?: boolean;
|
||||||
|
enableBulkEdit?: boolean;
|
||||||
|
enableCellEdit?: boolean;
|
||||||
|
onGridSelectionChange?: any;
|
||||||
|
onGridUpdate?:any;
|
||||||
|
onGridSave?:any
|
||||||
|
enableGridRowsDelete? : boolean;
|
||||||
|
enableGridRowsAdd?: boolean;
|
||||||
|
enableRowAddWithValues?: IRowAddWithValues;
|
||||||
|
enableTextFieldEditMode?: boolean;
|
||||||
|
enableTextFieldEditModeCancel?: boolean;
|
||||||
|
enablePagination?: boolean;
|
||||||
|
pageSize?: number;
|
||||||
|
onExcelExport?: any;
|
||||||
|
height?: string;
|
||||||
|
width? : string;
|
||||||
|
position?: string;
|
||||||
|
constrainMode?:ConstrainMode;
|
||||||
|
enableUnsavedEditIndicator?: boolean;
|
||||||
|
enableGridReset?: boolean;
|
||||||
|
enableColumnFilterRules?: boolean;
|
||||||
|
enableColumnFilters?: boolean;
|
||||||
|
enableCommandBar?: boolean;
|
||||||
|
enableSingleClickCellEdit?: boolean;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
export enum EditControlType {
|
||||||
|
None,
|
||||||
|
TextField,
|
||||||
|
DropDown,
|
||||||
|
Date,
|
||||||
|
MultilineTextField,
|
||||||
|
DateTime
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
export enum EditType {
|
||||||
|
None,
|
||||||
|
ColumnEdit,
|
||||||
|
BulkEdit,
|
||||||
|
RowEdit,
|
||||||
|
DeleteRow,
|
||||||
|
AddRow,
|
||||||
|
ColumnFilter,
|
||||||
|
AddRowWithData
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
export enum ExportType {
|
||||||
|
XLSX,
|
||||||
|
CSV,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
import { IColumnConfig } from "./columnconfigtype";
|
||||||
|
|
||||||
|
export interface IOperators{
|
||||||
|
type: string;
|
||||||
|
value: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IFilter{
|
||||||
|
column: IColumnConfig;
|
||||||
|
operator: string;
|
||||||
|
value: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const operatorsArr : IOperators[] = [
|
||||||
|
{
|
||||||
|
type:'string',
|
||||||
|
value:['equals', 'contains', 'starts with', 'ends with', 'not equal to']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type:'number',
|
||||||
|
value:['>', '<', '>=', '<=', '=', '!=']
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export const operatorEval1 = {
|
||||||
|
'equals': (a : string, b : string) : boolean => { return a == b },
|
||||||
|
'contains': (a : string, b : string) : boolean => { return a.indexOf(b) >= 0 },
|
||||||
|
'starts with': (a : string, b : string) : boolean => { return a.startsWith(b) },
|
||||||
|
'ends with': (a : string, b : string) : boolean => { return a.endsWith(b) },
|
||||||
|
'not equal to': (a : string, b : string) : boolean => { return a != b },
|
||||||
|
'>': (a : number, b : number) : boolean => { return a > b },
|
||||||
|
'<': (a : number, b : number) : boolean => { return a < b },
|
||||||
|
'>=': (a : number, b : number) : boolean => { return a >= b },
|
||||||
|
'<=': (a : number, b : number) : boolean => { return a <= b },
|
||||||
|
'=': (a : number, b : number) : boolean => { return a == b },
|
||||||
|
'!=': (a : number, b : number) : boolean => { return a != b },
|
||||||
|
}
|
||||||
|
|
||||||
|
export const numberOperatorEval = (var1 : number, var2 : number, operator : string) : boolean => {
|
||||||
|
switch(operator){
|
||||||
|
case '>':
|
||||||
|
return var1 > var2;
|
||||||
|
case '<':
|
||||||
|
return var1 < var2;
|
||||||
|
case '>=':
|
||||||
|
return var1 >= var2;
|
||||||
|
case '<=':
|
||||||
|
return var1 <= var2;
|
||||||
|
case '=':
|
||||||
|
return var1 == var2;
|
||||||
|
case '!=':
|
||||||
|
return var1 != var2;
|
||||||
|
default:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const dateOperatorEval = (var1 : Date, var2 : Date, operator : string) : boolean => {
|
||||||
|
switch(operator){
|
||||||
|
case '>':
|
||||||
|
return var1 > var2;
|
||||||
|
case '<':
|
||||||
|
return var1 < var2;
|
||||||
|
case '>=':
|
||||||
|
return var1 >= var2;
|
||||||
|
case '<=':
|
||||||
|
return var1 <= var2;
|
||||||
|
case '=':
|
||||||
|
return var1 == var2;
|
||||||
|
case '!=':
|
||||||
|
return var1 != var2;
|
||||||
|
default:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const stringOperatorEval = (var1 : string, var2 : string, operator : string) : boolean => {
|
||||||
|
switch(operator){
|
||||||
|
case 'equals':
|
||||||
|
return var1 == var2;
|
||||||
|
case 'contains':
|
||||||
|
return var1.indexOf(var2) >= 0;
|
||||||
|
case 'starts with':
|
||||||
|
return var1.startsWith(var2);
|
||||||
|
case 'ends with':
|
||||||
|
return var1.endsWith(var2);
|
||||||
|
case 'not equal to':
|
||||||
|
return var1 != var2;
|
||||||
|
default:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
import { Operation } from "./operation";
|
||||||
|
|
||||||
|
export interface IGridItemsType {
|
||||||
|
_grid_row_id_ : number;
|
||||||
|
_grid_row_operation_ : Operation;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
// Copyright (c) Microsoft Corporation.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
|
||||||
|
export enum Operation{
|
||||||
|
None = 1,
|
||||||
|
Add,
|
||||||
|
Update,
|
||||||
|
Delete
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
export interface IRowAddWithValues {
|
||||||
|
enable? : boolean;
|
||||||
|
enableRowsCounterInPanel? : boolean;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
||||||
|
<g fill="#61DAFB">
|
||||||
|
<path
|
||||||
|
d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z" />
|
||||||
|
<circle cx="420.9" cy="296.5" r="45.7" />
|
||||||
|
<path d="M520.5 78.1z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
После Ширина: | Высота: | Размер: 2.6 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="react-scripts" />
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { ReportHandler } from 'web-vitals';
|
||||||
|
|
||||||
|
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
|
||||||
|
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||||
|
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||||
|
getCLS(onPerfEntry);
|
||||||
|
getFID(onPerfEntry);
|
||||||
|
getFCP(onPerfEntry);
|
||||||
|
getLCP(onPerfEntry);
|
||||||
|
getTTFB(onPerfEntry);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default reportWebVitals;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||||
|
// 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';
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"esnext"
|
||||||
|
],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"downlevelIteration": true,
|
||||||
|
"declaration": true,
|
||||||
|
"outDir": "dist"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/libs"
|
||||||
|
]
|
||||||
|
}
|
||||||
Загрузка…
Ссылка в новой задаче