bug(EJ2-847257): demo sample for showcase public react
This commit is contained in:
Mathanraj3786
Родитель
d492d7e779
Коммит
66fa8d3859
28
README.md
28
README.md
|
|
@ -1,27 +1,27 @@
|
|||
# Essential JS 2 for TypeScript - Loan Calculator
|
||||
# Loan Calculator Showcase Sample in React
|
||||
|
||||
This Loan calculator demo application showcases the usage of several Essential JS 2 components in a real world application scenario. You can use this application to Calculates your loan payment based on your loan amount, interest and term.
|
||||
The Loan Calculator Showcase web application sample is a practical demonstration of a loan calculator built using React and Syncfusion's Essential JS 2 library. This showcase provides users with a user-friendly interface to calculate and visualize various aspects of loan repayment, making it a valuable tool for both individuals and financial institution.
|
||||
|
||||
## Deployment
|
||||
## Installation
|
||||
|
||||
### Install
|
||||
To install the application dependencies, use the following command:
|
||||
|
||||
To install all dependent packages, use the below command
|
||||
|
||||
```
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Run
|
||||
## Build the application
|
||||
|
||||
To run the sample, use the below command
|
||||
To Build the application, use the below command,
|
||||
|
||||
```
|
||||
npm start
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
## Demo
|
||||
## Run the application
|
||||
|
||||
#### <a href="https://ej2.syncfusion.com/showcase/react/loancalculator/" target="_blank">https://ej2.syncfusion.com/showcase/react/loancalculator/</a>
|
||||
To run the sample in the browser with live reload, use the following command:
|
||||
|
||||
Check all the showcase samples from <a href="https://ej2.syncfusion.com/home/index.html" target="_blank">here</a> and also check out the [single page application example](https://blog.syncfusion.com/post/single-page-application-example-using-essential-js-2.aspx) blog.
|
||||
```sh
|
||||
npm run start
|
||||
```
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"styleDependency": [
|
||||
"ej2"
|
||||
],
|
||||
"isShowCase": true,
|
||||
"publishSamples": [
|
||||
"./build/**"
|
||||
]
|
||||
}
|
||||
|
До Ширина: | Высота: | Размер: 6.4 KiB После Ширина: | Высота: | Размер: 6.4 KiB |
|
|
@ -1 +0,0 @@
|
|||
require("@syncfusion/ej2-build");
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="Essential JS 2 for React - Loan calculator">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<title>Essential JS 2 for React - Loan calculator</title>
|
||||
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Raleway:500,600" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="content-area"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
71
package.json
71
package.json
|
|
@ -1,56 +1,37 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-react-samples-template",
|
||||
"version": "0.0.1",
|
||||
"description": "Essential JS 2 for React - Samples template",
|
||||
"name": "@syncfusion/ej2-react-loan-calculator",
|
||||
"version": "1.0.0",
|
||||
"description": "Essential JS 2 - Loan calculator",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
"dependencies": {
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --open --mode development",
|
||||
"build": "webpack --mode production"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@syncfusion/ej2-react-buttons": "*",
|
||||
"@syncfusion/ej2-react-calendars": "*",
|
||||
"@syncfusion/ej2-react-charts": "*",
|
||||
"@syncfusion/ej2-react-grids": "*",
|
||||
"@syncfusion/ej2-react-inputs": "*",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.2.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.1.0",
|
||||
"react-dom": "^18.1.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.6.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
"@types/node": "^20.4.1",
|
||||
"@types/react": "^18.2.14",
|
||||
"@types/react-dom": "^18.2.6",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"css-loader": "^6.8.1",
|
||||
"html-webpack-plugin": "^5.5.3",
|
||||
"mini-css-extract-plugin": "^2.7.6",
|
||||
"terser-webpack-plugin": "^5.3.9",
|
||||
"ts-loader": "^9.4.4",
|
||||
"typescript": "^5.1.6",
|
||||
"webpack": "^5.88.1",
|
||||
"webpack-cli": "^5.1.4",
|
||||
"webpack-dev-server": "^4.15.1",
|
||||
"style-loader": "^0.23.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@syncfusion/ej2-build": "*",
|
||||
"@types/jest": "^27.5.1",
|
||||
"@types/node": "^16.11.36",
|
||||
"@types/react": "^18.0.9",
|
||||
"@types/react-dom": "^18.0.4",
|
||||
"style-loader": "^0.23.1",
|
||||
"typescript": "^3.1.6"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"ci-publish": "gulp publish-samples"
|
||||
},
|
||||
"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"
|
||||
]
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.14.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Essential JS 2 for React - Loan Calculator - You can use this application to Calculates your loan payment based on your loan amount, interest and term"
|
||||
/>
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
|
||||
<title>Essential JS 2 for React - Loan Calculator</title>
|
||||
<link rel="icon" type="image/x-icon" href="../src/favicon.ico">
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Raleway:500,600" rel="stylesheet">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.10/Reflect.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"short_name": "Syncfusion Loan Calculator",
|
||||
"name": "Essential JS 2 for React - Loan Calculator",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
25812
src/assets/styles.css
25812
src/assets/styles.css
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,19 @@
|
|||
import * as React from "react";
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { Home } from "../components/Home/Home";
|
||||
import { About } from "../components/About/About";
|
||||
import { HashRouter, Routes, Route, NavLink } from "react-router-dom";
|
||||
|
||||
const root = createRoot(document.getElementById("content-area") as HTMLElement);
|
||||
root.render(
|
||||
<HashRouter>
|
||||
<div>
|
||||
<div className="content">
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/About" element={<About />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
</HashRouter>
|
||||
);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import * as React from 'react';
|
||||
|
||||
|
||||
export const About = () => {
|
||||
return (
|
||||
<div>
|
||||
<h2>About page</h2>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import * as React from 'react';
|
||||
import { DetailRow, GridComponent, GridModel, Inject, Page } from '@syncfusion/ej2-react-grids';
|
||||
import { ChangeEventArgs, SliderComponent, SliderTickRenderedEventArgs } from '@syncfusion/ej2-react-inputs';
|
||||
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
|
||||
|
|
@ -8,12 +9,10 @@ import { ChartComponent, Legend, LineSeries, SeriesCollectionDirective, SeriesDi
|
|||
import { DateTime, Tooltip } from '@syncfusion/ej2-react-charts';
|
||||
import { closest, Internationalization } from '@syncfusion/ej2-base';
|
||||
import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
|
||||
import './index.css';
|
||||
import './styles.css';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
export default function App() {
|
||||
|
||||
import "../../../styles/index.css";
|
||||
import "../../../styles/styles.css";
|
||||
export const Home = () => {
|
||||
const [loanTicks, setLoanTicks] = useState({});
|
||||
const [dateValue, setDateValue] = useState(new Date());
|
||||
const [interestValue, setInterestValue] = useState(5.5);
|
||||
|
|
@ -259,7 +258,6 @@ export default function App() {
|
|||
}
|
||||
|
||||
function onclickEvent(args: any) {
|
||||
debugger;
|
||||
let target: any = args.target as Element;
|
||||
if (target.classList.contains('e-row-toggle') || target.parentElement.querySelector('.e-row-toggle')) {
|
||||
target = target.parentElement.querySelector('.e-row-toggle') ? target.parentElement.querySelector('.e-row-toggle') : target;
|
||||
|
|
@ -273,7 +271,6 @@ export default function App() {
|
|||
(grid.current as any).detailRowModule.expand(parseInt((closest(target, 'tr') as HTMLElement).getAttribute('data-rowindex')!, 10));
|
||||
}
|
||||
}
|
||||
gridHide();
|
||||
}
|
||||
|
||||
function pointRender(args: IAccPointRenderEventArgs): void {
|
||||
|
|
@ -324,16 +321,6 @@ export default function App() {
|
|||
textAlign:'Center',
|
||||
}
|
||||
]
|
||||
|
||||
function gridHide() {
|
||||
if (width < 439) {
|
||||
let grid: any = document.getElementsByClassName('e-grid');
|
||||
for (let i=0; i < grid.length; i++){
|
||||
grid[i].ej2_instances[0].hideColumns('Payment');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setInitValues();
|
||||
calRangeValues();
|
||||
child = {
|
||||
|
|
@ -381,7 +368,6 @@ export default function App() {
|
|||
size: '12px',
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setLoanTicks({
|
||||
placement: 'After',
|
||||
|
|
@ -393,12 +379,6 @@ export default function App() {
|
|||
setInterestTicks({ placement: 'After', largeStep: 5, smallStep: 1, showSmallTicks: false });
|
||||
},[]);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
gridHide();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="header-style">Loan Calculator</h1>
|
||||
|
|
@ -810,4 +790,4 @@ export default function App() {
|
|||
</div >
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Двоичные данные
src/favicon.ico
Двоичные данные
src/favicon.ico
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 6.4 KiB |
|
|
@ -1,13 +0,0 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<App />
|
||||
);
|
||||
|
||||
// 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
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import "./assets/styles.css";
|
||||
@import "./assets/index.css";
|
||||
|
|
@ -1,4 +1,17 @@
|
|||
/* body {
|
||||
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;
|
||||
} */
|
||||
/* body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
|
|
@ -860,4 +873,4 @@
|
|||
|
||||
.e-grid .e-content .e-table .e-detailrow{
|
||||
background-color: #27304c ;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +1,9 @@
|
|||
{
|
||||
"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"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/",
|
||||
"noImplicitAny": true,
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"jsx": "react"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
var glob = require("glob");
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const TerserPlugin = require("terser-webpack-plugin");
|
||||
const path = require("path");
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
index: glob.sync("./src/**/**/*.tsx")
|
||||
},
|
||||
target: "web",
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx$/,
|
||||
exclude: /node_modules/,
|
||||
use: "ts-loader",
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
"css-loader"
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: "index.html",
|
||||
favicon: "favicon.ico"
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: "index.css",
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
extensions: ['.tsx', '.ts', '.js'],
|
||||
},
|
||||
output: {
|
||||
filename: "[name].js",
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
},
|
||||
optimization: {
|
||||
minimize: true,
|
||||
minimizer: [new TerserPlugin({
|
||||
extractComments: false,
|
||||
})],
|
||||
},
|
||||
};
|
||||
Загрузка…
Ссылка в новой задаче