diff --git a/.eslintrc b/.eslintrc index 6d03a27..7b08cdb 100644 --- a/.eslintrc +++ b/.eslintrc @@ -5,5 +5,5 @@ "rules": { "react/prop-types": 0 }, - "parser": "babel-eslint" + "parser": "@babel/eslint-parser" } \ No newline at end of file diff --git a/build/build.js b/build/build.js index 3cba390..dd4577f 100644 --- a/build/build.js +++ b/build/build.js @@ -3,11 +3,11 @@ const runSequence = require('gulp4-run-sequence'); var shelljs = require('shelljs'); gulp.task('pre-build', function (done) { - runSequence('copy-barcode-assets', 'update-barcode', 'clean','copy-dependent-scripts', 'copy-src-assets', done); + runSequence('copy-extensions-assets', 'update-extensions-export', 'clean', 'copy-dependent-scripts', 'copy-src-assets', done); }) gulp.task('build', function (done) { - if (shelljs.exec('npm run build')) { + if (shelljs.exec('npm run build').code == 0) { console.log('******* Build Successfully *******'); done(); } diff --git a/build/copy.js b/build/copy.js index 17eeb03..3f9616e 100644 --- a/build/copy.js +++ b/build/copy.js @@ -2,13 +2,15 @@ const gulp = require('gulp'); var shelljs = require('shelljs'); const fs = require('fs'); -const barcodeAssets = ['images', 'barcode.reportitem.css', 'barcode.reportitem.js', 'qrbarcode.reportitem.js']; -const barCodeSrcDir = 'node_modules/@boldreports/javascript-reporting-extensions/'; -const barcodeDir = './src/controls/extensions/report-item-extensions/'; -const barcodeTeml = { +const extensionsAssets = ['images', 'barcode.reportitem.css', 'barcode.reportitem.js', 'qrbarcode.reportitem.js', 'signature.reportitem.css','signature.dialog.css','signature.reportitem.js','signature.dialog.js']; +const extensionsItemSrcDir = 'node_modules/@boldreports/javascript-reporting-extensions/'; +const extensionsItemDir = './src/controls/extensions/report-item-extensions/'; +const extensionsExportTemp = { '1D': 'export { EJBarcode };', - '2D': 'export { EJQRBarcode };' -}; + '2D': 'export { EJQRBarcode };', + 'signature': 'export { EJSignature }', + 'signatureDialog': 'export { SignatureDialog }' +} gulp.task('copy-src-assets', function (done) { shelljs.mkdir(`${process.cwd()}/public/report-viewer`); @@ -29,28 +31,35 @@ gulp.task('copy-dependent-scripts', function (done) { done(); }); -gulp.task('copy-barcode-assets', (done) => { +gulp.task('copy-extensions-assets', (done) => { shelljs.mkdir('-p',`${process.cwd()}/src/controls/extensions/report-item-extensions/`); - barcodeAssets.forEach(file => { - copyFile(`${process.cwd()}/${barCodeSrcDir + file}`, barcodeDir); + extensionsAssets.forEach(file => { + copyFile(`${process.cwd()}/${extensionsItemSrcDir + file}`, extensionsItemDir); }) done(); }) -gulp.task('update-barcode', (done) => { - if (fs.existsSync(`${barcodeDir}barcode.reportitem.js`) && fs.existsSync(`${barcodeDir}qrbarcode.reportitem.js`)) { - var barcode = fs.readFileSync(`${barcodeDir}barcode.reportitem.js`); - var qrbarcode = fs.readFileSync(`${barcodeDir}qrbarcode.reportitem.js`); - if (!barcode.includes(barcodeTeml['1D'])) - fs.writeFileSync(`${barcodeDir}barcode.reportitem.js`, `${barcode} \n ${barcodeTeml['1D']}`); - if (!qrbarcode.includes(barcodeTeml['2D'])) - fs.writeFileSync(`${barcodeDir}qrbarcode.reportitem.js`, `${qrbarcode} \n ${barcodeTeml['2D']}`); - done(); - } - else { - console.log(`!!!... The Barcode files not found in ${barcodeDir} ...!!!`); - process.exit(1); - } +gulp.task('update-extensions-export', (done) => { + const files = { + 'barcode': ['barcode.reportitem.js', '1D'], + 'qrbarcode': ['qrbarcode.reportitem.js', '2D'], + 'signature': ['signature.reportitem.js', 'signature'], + 'signatureDialog': ['signature.dialog.js', 'signatureDialog'] + }; + const updateFile = (key, [filename, exportKey]) => { + const filePath = `${extensionsItemDir}${filename}`; + if (fs.existsSync(filePath)) { + const content = fs.readFileSync(filePath, 'utf8'); + if (!content.includes(extensionsExportTemp[exportKey])) { + fs.writeFileSync(filePath, `${content}\n${extensionsExportTemp[exportKey]}`); + } + } else { + console.log(`!!!... The ${key} file not found in ${extensionsItemDir} ...!!!`); + process.exit(1); + } + }; + Object.entries(files).forEach(([key, value]) => updateFile(key, value)); + done(); }); function copyFile(from , to){ diff --git a/package.json b/package.json index 4b18033..22d6290 100644 --- a/package.json +++ b/package.json @@ -1,26 +1,26 @@ { "name": "react-sample-browser", - "version": "6.3.16", + "version": "7.1.9", "private": true, "dependencies": { - "@boldreports/react-reporting-components": "6.3.16", - "@boldreports/javascript-reporting-extensions": "6.3.16", - "@testing-library/jest-dom": "^5.11.9", - "@testing-library/react": "^11.2.5", - "@testing-library/user-event": "^12.8.3", - "bootstrap": "^4.6.0", - "create-react-class": "^15.7.0", + "@boldreports/react-reporting-components": "7.1.9", + "@boldreports/javascript-reporting-extensions": "7.1.9", + "@testing-library/jest-dom": "5.11.9", + "@testing-library/react": "11.2.5", + "@testing-library/user-event": "12.8.3", + "bootstrap": "5.3.3", + "create-react-class": "15.7.0", "axios": "1.7.7", "fs": "0.0.1-security", "gulp": "4.0.2", - "path": "^0.12.7", - "prismjs": "^1.23.0", - "require-dir": "^1.2.0", + "path": "0.12.7", + "prismjs": "1.29.0", + "require-dir": "1.2.0", "gulp4-run-sequence": "1.0.1", "codemirror": "5.58.2", - "shelljs": "^0.8.4", - "typo-js": "^1.2.0", - "web-vitals": "^1.1.1" + "shelljs": "0.8.5", + "typo-js": "1.2.0", + "web-vitals": "1.1.1" }, "homepage": "./", "scripts": { @@ -32,10 +32,7 @@ }, "eslintConfig": { "extends": [ - "react-app", - "react-app/jest", - "eslint:recommended", - "plugin:react/recommended" + "react-app" ] }, "browserslist": { @@ -51,11 +48,18 @@ ] }, "devDependencies": { - "react": "^17.0.1", - "react-dom": "^17.0.1", - "react-router-dom": "^5.2.0", - "react-scripts": "4.0.3", - "eslint": "^7.27.0", - "eslint-plugin-react": "^7.23.2" + "react": "17.0.1", + "react-dom": "17.0.1", + "react-router-dom": "5.2.0", + "react-scripts": "5.0.1", + "eslint": "9.19.0", + "eslint-plugin-react": "7.37.4", + "@babel/core": "7.25.2", + "@babel/eslint-parser": "7.26.5", + "babel-core": "7.0.0-bridge.0" + }, + "resolutions": { + "@babel/core": "7.x", + "babel-core": "7.0.0-bridge.0" } } diff --git a/src/assets/sidebar/portrait.png b/src/assets/sidebar/portrait.png index beadbc7..7976bd4 100644 Binary files a/src/assets/sidebar/portrait.png and b/src/assets/sidebar/portrait.png differ diff --git a/src/common/header/header.css b/src/common/header/header.css index 6b9bbc1..bf32ce4 100644 --- a/src/common/header/header.css +++ b/src/common/header/header.css @@ -367,6 +367,10 @@ a:hover#home_page { text-decoration: none; } +#home_page { + text-decoration: none; +} + .ej-platform-name { margin: 0 21px 0 25px; font-size: 15px; diff --git a/src/common/header/header.js b/src/common/header/header.js index 0aabb17..b56c9bc 100644 --- a/src/common/header/header.js +++ b/src/common/header/header.js @@ -86,7 +86,7 @@ class Header extends Component { {this.props.isViewer ?
{this.state.open && (
{Object.keys(otherPlatforms).map((name, index) => {name})}
)}
: @@ -97,7 +97,7 @@ class Header extends Component { {/* We hided this element as per management instruction */} {/* Schedule Free Demo */} Product Detail - Try it Free + Try it Free diff --git a/src/common/main-content/main-content.css b/src/common/main-content/main-content.css index aa1d317..6ca5b87 100644 --- a/src/common/main-content/main-content.css +++ b/src/common/main-content/main-content.css @@ -44,6 +44,7 @@ align-items: center; color:#2b3a5c; border-bottom: 2px solid transparent; + text-decoration: none; } .ej-main-body-content .ej-nav-header .ej-nav-item a:hover { @@ -69,6 +70,15 @@ .tab-pane#ej-description { font-size: 14px; margin: 25px 3px 20px 20px; + +} + +.tab-pane#ej-description #description a { + text-decoration: none; +} + +.tab-pane#ej-description #description a:hover { + text-decoration: underline; } .tab-pane form{ @@ -363,11 +373,22 @@ } @media only screen and (min-width: 300px) and (max-width: 872px) { - .ej-main-child-content .ej-lp-footer, .ej-main-child-content .ej-lp-footer > div { + .ej-main-child-content .ej-lp-footer { display: block; } + + .ej-main-child-content .ej-lp-footer .ej-lp-footer-copyright { + padding: 10px; + } +} + +@media only screen and (max-width: 1095px) { + .ej-lp-footer .ej-lp-footer-links { + display: none; + } + .ej-main-child-content .ej-lp-footer .ej-lp-footer-copyright { float: left; - line-height: 30px; + line-height: 21px; } } \ No newline at end of file diff --git a/src/common/main-content/main-content.js b/src/common/main-content/main-content.js index 101c671..d534a82 100644 --- a/src/common/main-content/main-content.js +++ b/src/common/main-content/main-content.js @@ -142,17 +142,17 @@ class MainContentSample extends Component {
@@ -231,14 +231,20 @@ class MainContentSample extends Component { Blog - + Support Feedback + + Knowledge Base + + + Learning Center + -
Copyright © 2001-2024 Syncfusion Inc.
+
Copyright © 2001 - {data.copyrightYear} Syncfusion Inc.
diff --git a/src/common/sidebar/sidebar.css b/src/common/sidebar/sidebar.css index 2c0f9df..6524831 100644 --- a/src/common/sidebar/sidebar.css +++ b/src/common/sidebar/sidebar.css @@ -52,7 +52,7 @@ width: 90px; margin: 8px; background-image: url('./../../assets/sidebar/portrait.png'); - background-size: 100% 1800%; + background-size: 100% 2000%; } .ej-sidebar-content .ej-sb-toc .ej-sb-toc-card .ej-sb-toc-card-link{ diff --git a/src/controls/cmr-report.js b/src/controls/cmr-report.js new file mode 100644 index 0000000..610da2b --- /dev/null +++ b/src/controls/cmr-report.js @@ -0,0 +1,36 @@ +/* eslint-disable */ +import React, { Component } from 'react'; +import { Globals } from '../globals'; + +class CMRReport extends Component { + render() { + if (this.props.content !== 'desc') { + return ( + + ) + } + else { + return ( +
+

+ The CMR International Consignment Note outlines the terms, responsibilities, and legal framework for international road freight transport under the CMR Convention, presented in a comprehensive RDL format. +

+ +

+ More information about the image report item can be found in this documentation section. +

+
+ ); + } + } +} +export default CMRReport; \ No newline at end of file diff --git a/src/controls/designer/designer.js b/src/controls/designer/designer.js index 71d37a1..8bd89de 100644 --- a/src/controls/designer/designer.js +++ b/src/controls/designer/designer.js @@ -30,6 +30,17 @@ var reportItemExtensions = [{ description: 'Display the barcode lines as report item.', title: '2D Barcode' } +}, { + name: 'ESignature', + className: 'EJSignature', + imageClass: 'customitem-signature', + displayName: 'Electronic', + category: 'Signature', + toolTip: { + requirements: 'Add a report item to the designer area.', + description: 'This report item is used to add a graphic signature.', + title: 'Signature' + } }]; function DESIGNER_TOOLBAR_RENDERING(args) { @@ -193,4 +204,4 @@ class Designer extends Component { } } -export { Designer }; \ No newline at end of file +export { Designer }; diff --git a/src/controls/external-parameter-report.js b/src/controls/external-parameter-report.js index a5d7609..371c859 100644 --- a/src/controls/external-parameter-report.js +++ b/src/controls/external-parameter-report.js @@ -145,7 +145,7 @@ class ExternalParameterReport extends Component { value: [2], placeholder: "Select Option", change: function(args) { - $('#update').prop('disabled', !args.value.length); + $('#update').prop('disabled', !args.value.length); } }); startDate.appendTo('#startdate'); diff --git a/src/controls/infographics-report.js b/src/controls/infographics-report.js new file mode 100644 index 0000000..44c6930 --- /dev/null +++ b/src/controls/infographics-report.js @@ -0,0 +1,37 @@ +/* eslint-disable */ +import React, { Component } from 'react'; +import { Globals } from '../globals'; + +class InfographicsReport extends Component { + render() { + if (this.props.content !== 'desc') { + return ( + + ) + } + else { + return ( +
+

+ The Infographics Report showcases the overall academic performance of a college through graphical representations, utilizing the Bold Reports image report item for visually engaging insights. +

+ +

+ More information about the image report item can be found in this documentation section. +

+
+ ); + } + } +} +export default InfographicsReport; \ No newline at end of file diff --git a/src/globals.js b/src/globals.js index 9c8780c..826b413 100644 --- a/src/globals.js +++ b/src/globals.js @@ -32,6 +32,8 @@ import ParameterCustomization from './controls/parameter-customization'; import SubReport from './controls/sub-report'; import PowerPointReport from './controls/powerpoint-report'; import TranscriptReport from './controls/transcript-report'; +import CMRReport from './controls/cmr-report'; +import InfographicsReport from './controls/infographics-report'; import rdlcData from './rdlcData' window.React = React; @@ -106,7 +108,9 @@ const SampleComponents = { ParameterCustomization: ParameterCustomization, SubReport: SubReport, PowerPointReport: PowerPointReport, - TranscriptReport: TranscriptReport + TranscriptReport: TranscriptReport, + CMRReport: CMRReport, + InfographicsReport: InfographicsReport } function onReportLoaded(args) { diff --git a/src/index.js b/src/index.js index 9deb16e..62e9471 100644 --- a/src/index.js +++ b/src/index.js @@ -12,11 +12,22 @@ import './controls/extensions/report-item-extensions/barcode.reportitem.css'; import { EJBarcode } from './controls/extensions/report-item-extensions/barcode.reportitem'; import { EJQRBarcode } from './controls/extensions/report-item-extensions/qrbarcode.reportitem'; +//signature +import './controls/extensions/report-item-extensions/signature.reportitem.css'; +import './controls/extensions/report-item-extensions/signature.dialog.css'; +import { EJSignature } from './controls/extensions/report-item-extensions/signature.reportitem'; +import { SignatureDialog } from './controls/extensions/report-item-extensions/signature.dialog'; + let barcode = 'EJBarcode'; let qrBarcode = 'EJQRBarcode'; window[barcode] = EJBarcode; window[qrBarcode] = EJQRBarcode; +let signature = 'EJSignature'; +let signatureDialog = 'SignatureDialog'; +window[signature] = EJSignature; +window[signatureDialog] = SignatureDialog; + //code-mirror import 'codemirror/lib/codemirror'; import 'codemirror/addon/hint/show-hint'; @@ -39,4 +50,4 @@ ReactDOM.render( // 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(); \ No newline at end of file +reportWebVitals(); diff --git a/src/samples.json b/src/samples.json index 8ab153e..f901465 100644 --- a/src/samples.json +++ b/src/samples.json @@ -6,7 +6,9 @@ "rdlcData", "paystub", "qrbarcode", - "powerpoint" + "powerpoint", + "cmr", + "infographics" ], "otherPlatforms": { "React": "react/#", @@ -24,9 +26,9 @@ "Intuitive drag-and-drop widgets", "Hassle-free licensing" ], - "freeTrialUrl": "https://app.boldid.net/reporting/embedded/register?plan=174&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" + "freeTrialUrl": "https://app.boldid.net/reporting/embedded/register?plan=194&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" }, - "copyrightPath" : "./src/common/main-content/main-content.js", + "copyrightYear": "2025", "samples": [ { "routerPath": "product-line-sales", @@ -434,6 +436,34 @@ "metaData": { "description": "This demo showcases a Transcript Report that effectively presents school student details, including their grades and performance, in the React Bold Report Viewer." } - } + }, + { + "routerPath": "cmr-report", + "sampleName": "CMR Report", + "status": "New", + "basePath": "report-viewer", + "directoryName": "cmr-report", + "imageDetails": { + "isLandscape": false, + "index": 18 + }, + "metaData": { + "description": "This demo shows CMR International Consignment Note usage, standardizing international road freight under the CMR Convention, in React Bold Report Viewer." + } + }, + { + "routerPath": "infographics-report", + "sampleName": "Infographics Report", + "basePath": "report-viewer", + "directoryName": "infographics-report", + "status": "New", + "imageDetails": { + "isLandscape": false, + "index": 17 + }, + "metaData": { + "description": "This demo visualizes an Infographics Report that effectively presents student demographics, course interests, achievements, and study preferences in the React Bold Report Viewer." + } + } ] }