diff --git a/ej2-react-toc.html b/ej2-react-toc.html index 5d1b79f15..c5672d1f7 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -1729,6 +1729,14 @@ OTP Input
  • Pager diff --git a/ej2-react/auto-complete/virtual-scroll.md b/ej2-react/auto-complete/virtual-scroll.md index 44fa52fa2..69f630f01 100644 --- a/ej2-react/auto-complete/virtual-scroll.md +++ b/ej2-react/auto-complete/virtual-scroll.md @@ -40,7 +40,7 @@ In the following example, `text` column from complex data have been mapped to th ## Binding remote data -The AutoComplete supports retrieval of data from remote data services with the help of `DataManager` component. When using remote data, it initially fetches all the data from the server, triggering the `actionBegin` and `actionComplete` events, and then stores the data locally. During virtual scrolling, additional data is retrieved from the locally stored data, triggering the `actionBegin` and `actionComplete` events at that time as well. +The AutoComplete supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well. The following sample displays the OrderId from the `Orders` Data Service. diff --git a/ej2-react/code-snippet/chart/dynamic-update/click-add-point/app/index.tsx b/ej2-react/code-snippet/chart/dynamic-update/click-add-point/app/index.tsx index 38d9ac4e2..a76c40905 100644 --- a/ej2-react/code-snippet/chart/dynamic-update/click-add-point/app/index.tsx +++ b/ej2-react/code-snippet/chart/dynamic-update/click-add-point/app/index.tsx @@ -44,24 +44,24 @@ function App() { const chartMouseClick = (args: IMouseEventArgs): void => { let isRemoved: boolean = false; if (args.axisData) { - for (let i: number = 0; i < (chartInstance.current.series[0] as Series).points.length; i++) { - const markerWidth: number = (chartInstance.current.series[0] as Series).marker.width / 2; + for (let i: number = 0; i < (chartInstance.series[0] as Series).points.length; i++) { + const markerWidth: number = (chartInstance.series[0] as Series).marker.width / 2; let roundedX: number = Math.round(args.axisData['primaryXAxis']) + markerWidth; let roundedY: number = Math.round(args.axisData['primaryYAxis']) + markerWidth; - let pointX: number = Math.round((chartInstance.current.series[0] as Series).points[i].x as number) + markerWidth; - let pointY: number = Math.round((chartInstance.current.series[0] as Series).points[i].y as number) + markerWidth; + let pointX: number = Math.round((chartInstance.series[0] as Series).points[i].x as number) + markerWidth; + let pointY: number = Math.round((chartInstance.series[0] as Series).points[i].y as number) + markerWidth; if ((roundedX === pointX || roundedX + 1 === pointX || roundedX - 1 === pointX) && (roundedY === pointY || roundedY + 1 === pointY || roundedY - 1 === pointY)) { - if ((chartInstance.current.series[0] as Series).points.length > 1) { - const points = (chartInstance.current.series[0] as Series).points; + if ((chartInstance.series[0] as Series).points.length > 1) { + const points = (chartInstance.series[0] as Series).points; const duration: number = i === 0 || i === points[points.length - 1].index ? 500 : 0; - chartInstance.current.series[0].removePoint(i, duration); + chartInstance.series[0].removePoint(i, duration); } isRemoved = true; } } if (!isRemoved) { - chartInstance.current.series[0].addPoint({ x: Math.round(args.axisData['primaryXAxis']), y: Math.round(args.axisData['primaryYAxis']) }); + chartInstance.series[0].addPoint({ x: Math.round(args.axisData['primaryXAxis']), y: Math.round(args.axisData['primaryYAxis']) }); } } }; diff --git a/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/app/index.jsx new file mode 100644 index 000000000..2d392833c --- /dev/null +++ b/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/app/index.jsx @@ -0,0 +1,31 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { DiagramComponent } from "@syncfusion/ej2-react-diagrams"; +let diagramInstance; +// A node is created and stored in nodes array. +let node = [{ + // Position of the node + offsetX: 100, + offsetY: 100, + // Size of the node + width: 100, + height: 100, + style: { + fill: '#6BA5D7', + strokeColor: 'white' + }, + // Sets the Annotation for the Node + annotations: [{ + content: 'Annotation', + //set rotationReference to "page" to disable rotation + rotationReference: 'Page' + + }] + }]; + +// initialize Diagram component +function App() { + return (); +} +const root = ReactDOM.createRoot(document.getElementById('diagram')); +root.render(); diff --git a/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/app/index.tsx new file mode 100644 index 000000000..cb9e9cd97 --- /dev/null +++ b/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/app/index.tsx @@ -0,0 +1,45 @@ + + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { + Diagram, + DiagramComponent, + NodeModel, ConnectorModel +} from "@syncfusion/ej2-react-diagrams"; +let diagramInstance: DiagramComponent; +// A node is created and stored in nodes array. +let node: NodeModel[] = [{ + // Position of the node + offsetX: 100, + offsetY: 100, + // Size of the node + width: 100, + height: 100, + style: { + fill: '#6BA5D7', + strokeColor: 'white' + }, + // Sets the Annotation for the Node + annotations: [{ + content: 'Annotation', + //set rotationReference to "page" to disable rotation + rotationReference: 'Page' + }] +}]; + +// initialize Diagram component +function App() { + return ( + + ); +} +const root = ReactDOM.createRoot(document.getElementById('diagram')); +root.render(); + + diff --git a/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/index.html b/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/index.html new file mode 100644 index 000000000..d2f7f168b --- /dev/null +++ b/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Chart-DataLabel + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/systemjs.config.js new file mode 100644 index 000000000..d2f0366a1 --- /dev/null +++ b/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/systemjs.config.js @@ -0,0 +1,59 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/app/index.jsx new file mode 100644 index 000000000..c0eb24630 --- /dev/null +++ b/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/app/index.jsx @@ -0,0 +1,20 @@ +{% raw %} +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { DiagramComponent } from "@syncfusion/ej2-react-diagrams"; +let diagramInstance; +//initialize connector collection +let collectorCollection = [ + { id: 'connector1', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 150, y: 150 } }, + {id: 'connector2', type: 'Orthogonal', sourcePoint: { x: 170, y: 170 }, targetPoint: { x: 200, y: 200 }}, + { id: 'connector3', type: 'Bezier', sourcePoint: { x: 320, y: 320 }, targetPoint: { x: 400, y: 400 } } +]; +function App() { + return ( (diagramInstance = diagram)} width={'100%'} height={'600px'} created={() => { + //Add collection of connectors + diagramInstance.addElements(collectorCollection); + }}/>); +} +const root = ReactDOM.createRoot(document.getElementById('diagram')); +root.render(); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/app/index.tsx new file mode 100644 index 000000000..b69d3d385 --- /dev/null +++ b/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/app/index.tsx @@ -0,0 +1,30 @@ +{% raw %} +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import {DiagramComponent, ConnectorModel} from "@syncfusion/ej2-react-diagrams"; +let diagramInstance: DiagramComponent; +//initialize connector collection +var collectorCollection:ConnectorModel = [ + { id: 'connector1', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 150, y: 150 } }, + {id: 'connector2', type: 'Orthogonal', sourcePoint: { x: 170, y: 170 }, targetPoint: { x: 200, y: 200 }}, + { id: 'connector3', type: 'Bezier', sourcePoint: { x: 320, y: 320 }, targetPoint: { x: 400, y: 400 } } +]; +function App() { + return ( + (diagramInstance = diagram)} + width={'100%'} + height={'600px'} + created={() => { + //Add collection of connectors + diagramInstance.addElements(collectorCollection); + }} + /> + ); + } + const root = ReactDOM.createRoot(document.getElementById('diagram')); + root.render(); + + + {% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/index.html b/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/index.html new file mode 100644 index 000000000..d2f7f168b --- /dev/null +++ b/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Chart-DataLabel + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/systemjs.config.js b/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/systemjs.config.js new file mode 100644 index 000000000..d2f0366a1 --- /dev/null +++ b/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/systemjs.config.js @@ -0,0 +1,59 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/diagram/getting-started/addnode-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/getting-started/addnode-cs1/app/index.jsx index e30009282..4ef8a491d 100644 --- a/ej2-react/code-snippet/diagram/getting-started/addnode-cs1/app/index.jsx +++ b/ej2-react/code-snippet/diagram/getting-started/addnode-cs1/app/index.jsx @@ -9,7 +9,6 @@ export default function App() { id: 'label1', content: 'Start' }], - shape: { type: 'Flow', shape: 'Terminator' } } ]; return (); diff --git a/ej2-react/code-snippet/diagram/getting-started/addnode-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/addnode-cs1/app/index.tsx index 25ecc751f..4f4ebbb7a 100644 --- a/ej2-react/code-snippet/diagram/getting-started/addnode-cs1/app/index.tsx +++ b/ej2-react/code-snippet/diagram/getting-started/addnode-cs1/app/index.tsx @@ -1,7 +1,7 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDOM from "react-dom/client"; import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams"; export default function App() { @@ -12,7 +12,6 @@ export default function App() { id: 'label1', content: 'Start' }], - shape: { type: 'Flow', shape: 'Terminator' } } ]; return ( @@ -24,6 +23,6 @@ export default function App() { /> ); } -const root = ReactDOM.createRoot(document.getElementById("diagram")); +const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement); root.render(); diff --git a/ej2-react/code-snippet/diagram/getting-started/apply-style/app/index.jsx b/ej2-react/code-snippet/diagram/getting-started/apply-style/app/index.jsx new file mode 100644 index 000000000..b2c0fad9f --- /dev/null +++ b/ej2-react/code-snippet/diagram/getting-started/apply-style/app/index.jsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { DiagramComponent } from "@syncfusion/ej2-react-diagrams"; +export default function App() { + const nodes = [ + { + id: 'Start', width: 140, height: 70, offsetX: 300, offsetY: 100, + annotations: [{ + id: 'label1', + content: 'Start' + }], + //node shape + shape: { type: 'Flow', shape: 'Terminator' }, + //node style + style:{fill:'red',strokeColor:'green',strokeWidth:5,strokeDashArray:'2 2'}, + borderWidth:10, + borderColor:'orange' + } + ]; + return (); +} +const root = ReactDOM.createRoot(document.getElementById("diagram")); +root.render(); \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/getting-started/apply-style/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/apply-style/app/index.tsx new file mode 100644 index 000000000..8ec1b87fd --- /dev/null +++ b/ej2-react/code-snippet/diagram/getting-started/apply-style/app/index.tsx @@ -0,0 +1,29 @@ + + +import * as React from "react"; +import * as ReactDOM from "react-dom/client"; +import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams"; +export default function App() { + const nodes:NodeModel[]= [ + { + id: 'Start', width: 140, height: 70, offsetX: 300, offsetY: 100, + annotations: [{ + id: 'label1', + content: 'Start' + }], + //node shape + shape: { type: 'Flow', shape: 'Terminator' }, + //node style + style:{fill:'red',strokeColor:'green',strokeWidth:5,strokeDashArray:'2 2'}, + borderWidth:10, + borderColor:'orange' + } + ] + return ( + + ); +} +const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement); +root.render(); + + diff --git a/ej2-react/code-snippet/diagram/getting-started/apply-style/index.html b/ej2-react/code-snippet/diagram/getting-started/apply-style/index.html new file mode 100644 index 000000000..d2f7f168b --- /dev/null +++ b/ej2-react/code-snippet/diagram/getting-started/apply-style/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Chart-DataLabel + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/getting-started/apply-style/systemjs.config.js b/ej2-react/code-snippet/diagram/getting-started/apply-style/systemjs.config.js new file mode 100644 index 000000000..e42f94373 --- /dev/null +++ b/ej2-react/code-snippet/diagram/getting-started/apply-style/systemjs.config.js @@ -0,0 +1,59 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/diagram/getting-started/connectnode-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/connectnode-cs1/app/index.tsx index 71287a953..eeca48459 100644 --- a/ej2-react/code-snippet/diagram/getting-started/connectnode-cs1/app/index.tsx +++ b/ej2-react/code-snippet/diagram/getting-started/connectnode-cs1/app/index.tsx @@ -1,7 +1,7 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDOM from "react-dom/client"; import { DiagramComponent, NodeModel, @@ -41,6 +41,6 @@ export default function App() { /> ); } -const root = ReactDOM.createRoot(document.getElementById("diagram")); +const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement); root.render(); diff --git a/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.jsx index 43f0b6ab0..2be9ab2b8 100644 --- a/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.jsx +++ b/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.jsx @@ -1,4 +1,5 @@ {% raw %} + import * as React from "react"; import * as ReactDOM from "react-dom"; import { DiagramComponent } from "@syncfusion/ej2-react-diagrams"; @@ -112,6 +113,15 @@ export default function App() { return ( { node.height = 50; node.width = 140; + if(node.id === "node1" || node.id === "node4"){ + node.style = { fill: "#357BD2", strokeColor: "white" }; + }else if(node.id === "node2" || node.id === "node5"){ + node.style = { fill: "yellow", strokeColor: "white" }; + }else if(node.id === "node3"){ + node.style = { fill: "#00FF00", strokeColor: "white" }; + }else if(node.id === "node6"){ + node.style = { fill: "red", strokeColor: "white" }; + } node.offsetX = 300; return node; }} getConnectorDefaults={(obj) => { @@ -122,4 +132,5 @@ export default function App() { } const root = ReactDOM.createRoot(document.getElementById("diagram")); root.render(); + {% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.tsx index 5258b800c..6dafb32fd 100644 --- a/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.tsx +++ b/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.tsx @@ -2,7 +2,7 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDOM from "react-dom/client"; import { DiagramComponent, NodeModel, @@ -124,12 +124,21 @@ export default function App() { height={"600px"} nodes={nodes} connectors={connectors} - getNodeDefaults={(node: NodeModel): NodeModel => { + getNodeDefaults={(node:NodeModel):NodeModel => { node.height = 50; node.width = 140; + if(node.id === "node1" || node.id === "node4"){ + node.style = { fill: "#357BD2", strokeColor: "white" }; + }else if(node.id === "node2" || node.id === "node5"){ + node.style = { fill: "yellow", strokeColor: "white" }; + }else if(node.id === "node3"){ + node.style = { fill: "#00FF00", strokeColor: "white" }; + }else if(node.id === "node6"){ + node.style = { fill: "red", strokeColor: "white" }; + } node.offsetX = 300; return node; - }} + }} getConnectorDefaults={(obj: ConnectorModel): ConnectorModel => { obj.type = "Orthogonal"; obj.targetDecorator = { shape: 'Arrow', width: 10, height: 10 }; @@ -138,7 +147,7 @@ export default function App() { /> ); } -const root = ReactDOM.createRoot(document.getElementById("diagram")); +const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement); root.render(); diff --git a/ej2-react/code-snippet/diagram/getting-started/initialize-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/initialize-cs1/app/index.tsx index 48a5d933b..d879c3f9d 100644 --- a/ej2-react/code-snippet/diagram/getting-started/initialize-cs1/app/index.tsx +++ b/ej2-react/code-snippet/diagram/getting-started/initialize-cs1/app/index.tsx @@ -1,14 +1,14 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDOM from "react-dom/client"; import { DiagramComponent } from "@syncfusion/ej2-react-diagrams"; export default function App() { return ( ); } -const root = ReactDOM.createRoot(document.getElementById("diagram")); +const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement); root.render(); diff --git a/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.tsx index 7bc854405..765a80e98 100644 --- a/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.tsx +++ b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.tsx @@ -2,12 +2,11 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDOM from "react-dom/client"; import { DiagramComponent } from "@syncfusion/ej2-react-diagrams"; import { Node, HierarchicalTree, - Diagram, NodeModel, ConnectorModel, Inject, @@ -70,7 +69,7 @@ export default function App() { dataSourceSettings={dataSettings} layout={layoutSetting} getNodeDefaults={(node: NodeModel): NodeModel => { - let codes: Object = { + let codes: { [key in EmployeeInfo["Role"]]: string } = { Director: "rgb(0, 139,139)", Manager: "rgb(30, 30,113)", Lead: "rgb(0, 100,0)" @@ -80,7 +79,7 @@ export default function App() { node.annotations = [ { content: (node.data as EmployeeInfo).Name, style: { color: "white" } } ]; - node.style.fill = codes[(node.data as EmployeeInfo).Role]; + (node as Node).style.fill = codes[(node.data as EmployeeInfo).Role]; return node; }} getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => { @@ -93,7 +92,7 @@ export default function App() { ); } -const root = ReactDOM.createRoot(document.getElementById("diagram")); +const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement); root.render(); diff --git a/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/app/index.jsx new file mode 100644 index 000000000..8063068f7 --- /dev/null +++ b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/app/index.jsx @@ -0,0 +1,89 @@ + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { DiagramComponent } from "@syncfusion/ej2-react-diagrams"; +import { HierarchicalTree, Inject, DataBinding,StackPanel,TextElement,ImageElement } from "@syncfusion/ej2-react-diagrams"; +import { DataManager } from "@syncfusion/ej2-data"; +export default function App() { + const data = [ + { + Name: "Elizabeth", + Role: "Director" + }, + { + Name: "Christina", + ReportingPerson: "Elizabeth", + Role: "Manager" + }, + { + Name: "Yoshi", + ReportingPerson: "Christina", + Role: "Lead" + }, + { + Name: "Philip", + ReportingPerson: "Christina", + Role: "Lead" + }, + { + Name: "Yang", + ReportingPerson: "Elizabeth", + Role: "Manager" + }, + { + Name: "Roland", + ReportingPerson: "Yang", + Role: "Lead" + }, + { + Name: "Yvonne", + ReportingPerson: "Yang", + Role: "Lead" + } + ]; + const dataSettings = { + id: "Name", + parentId: "ReportingPerson", + dataManager: new DataManager(data) + }; + const layoutSetting = { type: "OrganizationalChart" }; + return ( { + node.width = 70; + node.height = 30; + return node; + }} getConnectorDefaults={(connector) => { + connector.type = "Orthogonal"; + connector.cornerRadius = 7; + return connector; + }} + setNodeTemplate={(node)=>{ + let codes = { + Director: "rgb(0, 139,139)", + Manager: "rgb(30, 30,113)", + Lead: "rgb(0, 100,0)" + }; + let content = new StackPanel(); + content.id = node.id + "_outerstack"; + content.orientation = "Horizontal"; + content.style.strokeColor = "gray"; + content.style.fill = codes[(node.data).Role]; + content.padding = { left: 5, right: 5, top: 5, bottom: 5} + let innerContent = new ImageElement(); + innerContent.style.strokeColor = "blue"; + innerContent.id = node.id + "_innerstack"; + innerContent.style.fill = "skyblue"; + innerContent.width = 50; + innerContent.height = 50; + let text = new TextElement(); + text.id = node.id + "_text"; + text.content = (node.data).Name; + text.margin = { left: 15, right: 5, top: 5, bottom: 5} + text.style.color = "black"; + content.children = [innerContent, text]; + return content; + }}> + + ); +} +const root = ReactDOM.createRoot(document.getElementById("diagram")); +root.render(); diff --git a/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/app/index.tsx new file mode 100644 index 000000000..93ce693b8 --- /dev/null +++ b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/app/index.tsx @@ -0,0 +1,109 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom/client"; +import { DiagramComponent, ImageElement, StackPanel, TextElement } from "@syncfusion/ej2-react-diagrams"; +import { + HierarchicalTree, + NodeModel, + ConnectorModel, + Inject, + DataBinding +} from "@syncfusion/ej2-react-diagrams"; +import { DataManager } from "@syncfusion/ej2-data"; +export interface EmployeeInfo { + Name: string; + Role: string; + color: string; +} +export default function App() { + const data: Object[] = [ + { + Name: "Elizabeth", + Role: "Director" + }, + { + Name: "Christina", + ReportingPerson: "Elizabeth", + Role: "Manager" + }, + { + Name: "Yoshi", + ReportingPerson: "Christina", + Role: "Lead" + }, + { + Name: "Philip", + ReportingPerson: "Christina", + Role: "Lead" + }, + { + Name: "Yang", + ReportingPerson: "Elizabeth", + Role: "Manager" + }, + { + Name: "Roland", + ReportingPerson: "Yang", + Role: "Lead" + }, + { + Name: "Yvonne", + ReportingPerson: "Yang", + Role: "Lead" + } + ]; + const dataSettings: object = { + id: "Name", + parentId: "ReportingPerson", + dataManager: new DataManager(data as JSON[]) + } + const layoutSetting: object= { type: "OrganizationalChart" } + return ( + { + node.width = 70; + node.height = 30; + return node; + }} + getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => { + connector.type = "Orthogonal"; + connector.cornerRadius = 7; + return connector; + }} + setNodeTemplate={(node: NodeModel) => { + let codes: Object = { + Director: "rgb(0, 139,139)", + Manager: "rgb(30, 30,113)", + Lead: "rgb(0, 100,0)" + }; + let content = new StackPanel(); + content.id = node.id + "_outerstack"; + content.orientation = "Horizontal"; + content.style.strokeColor = "gray"; + content.style.fill = (codes as any)[(node.data as EmployeeInfo).Role] as string; + content.padding = { left: 5, right: 5, top: 5, bottom: 5} + let innerContent = new ImageElement(); + innerContent.style.strokeColor = "blue"; + innerContent.id = node.id + "_innerstack"; + innerContent.style.fill = "skyblue"; + innerContent.width = 50; + innerContent.height = 50; + let text = new TextElement(); + text.id = node.id + "_text"; + text.content = (node.data as EmployeeInfo).Name; + text.margin = { left: 15, right: 5, top: 5, bottom: 5} + text.style.color = "black"; + content.children = [innerContent, text]; + return content; + }} + > + + + ); +} +const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement); +root.render(); diff --git a/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/index.html b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/index.html new file mode 100644 index 000000000..d2f7f168b --- /dev/null +++ b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Chart-DataLabel + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/systemjs.config.js b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/systemjs.config.js new file mode 100644 index 000000000..e42f94373 --- /dev/null +++ b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/systemjs.config.js @@ -0,0 +1,59 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/app/index.jsx new file mode 100644 index 000000000..0d788ef31 --- /dev/null +++ b/ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/app/index.jsx @@ -0,0 +1,29 @@ +{% raw %} +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { DiagramComponent, } from "@syncfusion/ej2-react-diagrams"; +let diagramInstance; +//initialize group nodes +var node = [ + { id: "rectangle1", offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'node1' }] }, + { id: "rectangle2", offsetX: 200, offsetY: 200, width: 100, height: 100, annotations: [{ content: 'node2' }] }, + { id: 'group', children: ['rectangle1', 'rectangle2'] }, + { id: "rectangle3", offsetX: 400, offsetY: 400, width: 100, height: 100, annotations: [{ content: 'node1' }] }, + { id: "rectangle4", offsetX: 500, offsetY: 500, width: 100, height: 100, annotations: [{ content: 'node2' }] }, + { id: 'group', children: ['rectangle3', 'rectangle4'], padding: { left: 10, right: 10, top: 10, bottom: 10 } }, +]; +function App() { + return ( (diagramInstance = diagram)} width={'1500px'} height={'600px'} getNodeDefaults={(node) => { + node.height = 100; + node.width = 100; + node.style.fill = '#6BA5D7'; + node.style.strokeColor = 'white'; + return node; + }} created={() => { + //Add collection of group nodes + diagramInstance.addElements(node); + }}/>); +} +const root = ReactDOM.createRoot(document.getElementById('diagram')); +root.render(); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/app/index.tsx new file mode 100644 index 000000000..dee9c74c6 --- /dev/null +++ b/ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/app/index.tsx @@ -0,0 +1,41 @@ +{% raw %} +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { + Diagram, + DiagramComponent, + NodeModel, +} from "@syncfusion/ej2-react-diagrams"; +let diagramInstance:DiagramComponent; +//initialize group nodes +var node:NodeModel = [ + { id: "rectangle1", offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'node1' }] }, + { id: "rectangle2", offsetX: 200, offsetY: 200, width: 100, height: 100, annotations: [{ content: 'node2' }] }, + { id: 'group', children: ['rectangle1', 'rectangle2'] }, + { id: "rectangle3", offsetX: 400, offsetY: 400, width: 100, height: 100, annotations: [{ content: 'node1' }] }, + { id: "rectangle4", offsetX: 500, offsetY: 500, width: 100, height: 100, annotations: [{ content: 'node2' }] }, + { id: 'group', children: ['rectangle3', 'rectangle4'], padding: { left: 10, right: 10, top: 10, bottom: 10 } }, +]; +function App() { + return ( + (diagramInstance = diagram)} + width={'1500px'} + height={'600px'} + getNodeDefaults={(node: NodeModel) => { + node.height = 100; + node.width = 100; + node.style.fill = '#6BA5D7'; + node.style.strokeColor = 'white'; + return node; + }} + created={() => { + //Add collection of group nodes + diagramInstance.addElements(node); + }} + /> + ); + } + const root = ReactDOM.createRoot(document.getElementById('diagram')); + root.render(); \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/index.html b/ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/index.html new file mode 100644 index 000000000..d2f7f168b --- /dev/null +++ b/ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Chart-DataLabel + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/systemjs.config.js new file mode 100644 index 000000000..d2f0366a1 --- /dev/null +++ b/ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/systemjs.config.js @@ -0,0 +1,59 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/app/index.jsx new file mode 100644 index 000000000..e66a496e8 --- /dev/null +++ b/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/app/index.jsx @@ -0,0 +1,23 @@ +{% raw %} +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { DiagramComponent, NodeConstraints } from "@syncfusion/ej2-react-diagrams"; +let node = [{ + offsetX: 250, + offsetY: 250, + width: 100, + height: 100, + style: { + fill: '#6BA5D7', + strokeColor: 'white' + }, + tooltip: { content: 'node1', position: 'BottomRight', relativeMode: 'Object' }, + constraints: NodeConstraints.Default | NodeConstraints.Tooltip, + fixedUserHandles: [{ tooltip: { content: 'handle1', position: 'BottomRight', relativeMode: 'Object' }, offset: { x: 0, y: 0 }, margin: { right: 20 }, width: 20, height: 20, pathData: 'M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z' }] + }]; +function App() { + return (); +} +const root = ReactDOM.createRoot(document.getElementById('diagram')); +root.render(); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/app/index.tsx new file mode 100644 index 000000000..cb7024c91 --- /dev/null +++ b/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/app/index.tsx @@ -0,0 +1,41 @@ +{% raw %} + + + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { + Diagram, + DiagramComponent, + NodeModel, + NodeConstraints +} from "@syncfusion/ej2-react-diagrams"; +let node: NodeModel[] = [{ + offsetX: 250, + offsetY: 250, + width: 100, + height: 100, + style: { + fill: '#6BA5D7', + strokeColor: 'white' + }, + tooltip: { content: 'node1', position: 'BottomRight', relativeMode: 'Object' }, + constraints: NodeConstraints.Default | NodeConstraints.Tooltip, + fixedUserHandles: [{ tooltip: { content: 'handle1', position: 'BottomRight', relativeMode: 'Object' }, offset: { x: 0, y: 0 }, margin: { right: 20 }, width: 20, height: 20, pathData: 'M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z' }] +}]; +function App() { + return ( + + ); +} +const root = ReactDOM.createRoot(document.getElementById('diagram')); +root.render(); + + + +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/index.html b/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/index.html new file mode 100644 index 000000000..d2f7f168b --- /dev/null +++ b/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Chart-DataLabel + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/systemjs.config.js b/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/systemjs.config.js new file mode 100644 index 000000000..d2f0366a1 --- /dev/null +++ b/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/systemjs.config.js @@ -0,0 +1,59 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/diagram/nodes/es5Node-cs8/app/index.jsx b/ej2-react/code-snippet/diagram/nodes/es5Node-cs8/app/index.jsx new file mode 100644 index 000000000..3705695b1 --- /dev/null +++ b/ej2-react/code-snippet/diagram/nodes/es5Node-cs8/app/index.jsx @@ -0,0 +1,21 @@ +{% raw %} +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import {DiagramComponent }from "@syncfusion/ej2-react-diagrams"; +let diagramInstance; +// initialize nodes collection +var nodesCollection = [ + { id: 'node16', offsetX: 35, offsetY: 260 }, + { id: 'node17', offsetX: 140, offsetY: 260 }, + { id: 'node18', offsetX: 240, offsetY: 260 } +]; +// initialize Diagram component +function App() { + return ( (diagramInstance = diagram)} width={'100%'} height={'600px'} created={() => { + // Add collection of nodes + diagramInstance.addElements(nodesCollection); + }}/>); +} +const root = ReactDOM.createRoot(document.getElementById('diagram')); +root.render(); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/nodes/es5Node-cs8/app/index.tsx b/ej2-react/code-snippet/diagram/nodes/es5Node-cs8/app/index.tsx new file mode 100644 index 000000000..761db6c60 --- /dev/null +++ b/ej2-react/code-snippet/diagram/nodes/es5Node-cs8/app/index.tsx @@ -0,0 +1,29 @@ +{% raw %} +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { DiagramComponent,NodeModel} from "@syncfusion/ej2-react-diagrams"; + +let diagramInstance:DiagramComponent; +//initialize node collection +var nodesCollection:NodeModel= [ + { id: 'node16', offsetX: 35, offsetY: 260 }, + { id: 'node17', offsetX: 140, offsetY: 260 }, + { id: 'node18', offsetX: 240, offsetY: 260 } +];// initialize Diagram component +function App() { + return ( + (diagramInstance = diagram)} + width={'100%'} + height={'600px'} + created={() => { + // Add collection of nodes + diagramInstance.addElements(nodesCollection); + }} + /> + ); + } + const root = ReactDOM.createRoot(document.getElementById('diagram')); + root.render(); + {% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/nodes/es5Node-cs8/index.html b/ej2-react/code-snippet/diagram/nodes/es5Node-cs8/index.html new file mode 100644 index 000000000..d2f7f168b --- /dev/null +++ b/ej2-react/code-snippet/diagram/nodes/es5Node-cs8/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Chart-DataLabel + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/nodes/es5Node-cs8/systemjs.config.js b/ej2-react/code-snippet/diagram/nodes/es5Node-cs8/systemjs.config.js new file mode 100644 index 000000000..d2f0366a1 --- /dev/null +++ b/ej2-react/code-snippet/diagram/nodes/es5Node-cs8/systemjs.config.js @@ -0,0 +1,59 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/diagram/ports/es5Connection/app/index.jsx b/ej2-react/code-snippet/diagram/ports/es5Connection/app/index.jsx new file mode 100644 index 000000000..6be9e82e6 --- /dev/null +++ b/ej2-react/code-snippet/diagram/ports/es5Connection/app/index.jsx @@ -0,0 +1,70 @@ +{% raw %} +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { DiagramComponent, PortVisibility,connectionDirection } from "@syncfusion/ej2-react-diagrams"; +let port1 = { + style: { + strokeColor: '#366F8C', + fill: '#366F8C' + } +}; +port1.shape = 'Square'; +port1.visibility = PortVisibility.Visible; +//specify the connectionDirection of the Port +port1.connectionDirection='Right'; +port1.id = 'port1'; +port1.offset = { + x: 0.5, + y: 0.5 +}; +let port2 = { + style: { + strokeColor: '#366F8C', + fill: '#366F8C' + } +}; +port2.offset = { + x: 0, + y: 0 +}; +port2.id = 'port2'; +port2.visibility = PortVisibility.Visible; +//specify the connectionDirection of the Port +port2.connectionDirection='Left'; +port2.shape = 'Square'; +let nodes = [{ + id: 'node', + width: 100, + height: 100, + offsetX: 100, + offsetY: 100, + ports: [port1] + }, + { + id: 'node1', + width: 100, + height: 100, + offsetX: 300, + offsetY: 100, + ports: [port2] + }, +]; +let connectors = [{ + id: "connector1", + sourceID: 'node', + targetID: 'node1', + sourcePortID: 'port1', + targetPortID: 'port2' + }]; +function App() { + return ( { + node.height = 100; + node.width = 100; + node.style.fill = '#6BA5D7'; + node.style.strokeColor = 'white'; + return node; + }}/>); +} +const root = ReactDOM.createRoot(document.getElementById('diagram')); +root.render(); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/ports/es5Connection/app/index.tsx b/ej2-react/code-snippet/diagram/ports/es5Connection/app/index.tsx new file mode 100644 index 000000000..a85c8a0c0 --- /dev/null +++ b/ej2-react/code-snippet/diagram/ports/es5Connection/app/index.tsx @@ -0,0 +1,94 @@ +{% raw %} + + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { + ConnectorModel, + NodeModel, + BasicShapeModel, + PointPortModel, + Diagram, + DiagramComponent, + PortVisibility, + connectionDirection +} from "@syncfusion/ej2-react-diagrams"; +let port1: PointPortModel = { + style: { + strokeColor: '#366F8C', + fill: '#366F8C' + } + }; + port1.shape = 'Square'; + port1.id = 'nodeportnew'; + port1.visibility = PortVisibility.Visible; + //specify the connectionDirection of the Port + port1.connectionDirection='Right'; + port1.id = 'port1'; + port1.offset = { + x: 0.5, + y: 0.5 + }; +let port2: PointPortModel = { + style: { + strokeColor: '#366F8C', + fill: '#366F8C' + } + }; + port2.offset = { + x: 0, + y: 0 + }; + port2.id = 'port2'; + port2.visibility = PortVisibility.Visible; + //specify the connectionDirection of the Port + port2.connectionDirection='Left'; + port2.shape = 'Square'; +let nodes: NodeModel[] = [{ + id: 'node', + width: 100, + height: 100, + offsetX: 100, + offsetY: 100, + ports: [port1] + }, + { + id: 'node1', + width: 100, + height: 100, + offsetX: 300, + offsetY: 100, + ports: [port2] + }, +]; +let connectors: ConnectorModel[] = [{ + id: "connector1", + sourceID: 'node', + targetID: 'node1', + sourcePortID: 'port1', + targetPortID: 'port2' +}]; +function App() { + return ( + { + node.height = 100; + node.width = 100; + node.style.fill = '#6BA5D7'; + node.style.strokeColor = 'white'; + return node; + }} + /> + ); +} +const root = ReactDOM.createRoot(document.getElementById('diagram')); +root.render(); + + + +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/ports/es5Connection/index.html b/ej2-react/code-snippet/diagram/ports/es5Connection/index.html new file mode 100644 index 000000000..d2f7f168b --- /dev/null +++ b/ej2-react/code-snippet/diagram/ports/es5Connection/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Chart-DataLabel + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/ports/es5Connection/systemjs.config.js b/ej2-react/code-snippet/diagram/ports/es5Connection/systemjs.config.js new file mode 100644 index 000000000..d2f0366a1 --- /dev/null +++ b/ej2-react/code-snippet/diagram/ports/es5Connection/systemjs.config.js @@ -0,0 +1,59 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/image-editor/default-cs1/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs1/app/app.jsx index 2d4dd4045..fcdedcaff 100644 --- a/ej2-react/code-snippet/image-editor/default-cs1/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs1/app/app.jsx @@ -4,19 +4,21 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { - let dimension = imgObj.getImageDimension(); - imgObj.drawText(dimension.x, dimension.y); + let dimension = this.imgObj.getImageDimension(); + this.imgObj.drawText(dimension.x, dimension.y); } render() { return (
    diff --git a/ej2-react/code-snippet/image-editor/default-cs1/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs1/app/app.tsx index fb2cb69bd..b54c7ec52 100644 --- a/ej2-react/code-snippet/image-editor/default-cs1/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs1/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs1/index.html b/ej2-react/code-snippet/image-editor/default-cs1/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs1/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs1/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs10/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs10/app/app.jsx index dae115096..375ba08fa 100644 --- a/ej2-react/code-snippet/image-editor/default-cs10/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs10/app/app.jsx @@ -4,14 +4,16 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs10/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs10/app/app.tsx index 648d03b42..3ee6ababb 100644 --- a/ej2-react/code-snippet/image-editor/default-cs10/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs10/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs10/index.html b/ej2-react/code-snippet/image-editor/default-cs10/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs10/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs10/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs11/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs11/app/app.jsx index e6647bc52..543ef43c9 100644 --- a/ej2-react/code-snippet/image-editor/default-cs11/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs11/app/app.jsx @@ -4,14 +4,16 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs11/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs11/app/app.tsx index f4bdeb153..c1523e79c 100644 --- a/ej2-react/code-snippet/image-editor/default-cs11/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs11/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs11/index.html b/ej2-react/code-snippet/image-editor/default-cs11/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs11/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs11/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs12/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs12/app/app.jsx index cd2f6e243..7c686d125 100644 --- a/ej2-react/code-snippet/image-editor/default-cs12/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs12/app/app.jsx @@ -4,14 +4,16 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs12/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs12/app/app.tsx index 93fcd3c79..cd7ce974e 100644 --- a/ej2-react/code-snippet/image-editor/default-cs12/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs12/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs12/index.html b/ej2-react/code-snippet/image-editor/default-cs12/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs12/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs12/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs13/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs13/app/app.jsx index 9f0a1bfa8..687a0c998 100644 --- a/ej2-react/code-snippet/image-editor/default-cs13/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs13/app/app.jsx @@ -4,14 +4,16 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs13/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs13/app/app.tsx index 17a035857..599c722ff 100644 --- a/ej2-react/code-snippet/image-editor/default-cs13/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs13/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs13/index.html b/ej2-react/code-snippet/image-editor/default-cs13/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs13/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs13/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs14/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs14/app/app.jsx index e3345953a..7c8b70586 100644 --- a/ej2-react/code-snippet/image-editor/default-cs14/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs14/app/app.jsx @@ -4,14 +4,16 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs14/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs14/app/app.tsx index 83e31fadc..3f3f9c0db 100644 --- a/ej2-react/code-snippet/image-editor/default-cs14/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs14/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs14/index.html b/ej2-react/code-snippet/image-editor/default-cs14/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs14/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs14/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs15/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs15/app/app.jsx index a45f62e88..1a6b8b6e9 100644 --- a/ej2-react/code-snippet/image-editor/default-cs15/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs15/app/app.jsx @@ -4,14 +4,16 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs15/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs15/app/app.tsx index 39785213e..8830be028 100644 --- a/ej2-react/code-snippet/image-editor/default-cs15/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs15/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs15/index.html b/ej2-react/code-snippet/image-editor/default-cs15/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs15/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs15/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs16/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs16/app/app.jsx index a9153363c..44941d868 100644 --- a/ej2-react/code-snippet/image-editor/default-cs16/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs16/app/app.jsx @@ -2,14 +2,16 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { toolbar = ['Annotate', "Line", "Rectangle", "Text", 'ZoomIn', 'ZoomOut', { text: 'Custom' }]; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } toolbarItemClicked(args) { diff --git a/ej2-react/code-snippet/image-editor/default-cs16/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs16/app/app.tsx index fc548de06..cb6bd4dd5 100644 --- a/ej2-react/code-snippet/image-editor/default-cs16/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs16/app/app.tsx @@ -5,6 +5,7 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs16/index.html b/ej2-react/code-snippet/image-editor/default-cs16/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs16/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs16/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs17/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs17/app/app.jsx index 3fec159dd..a0fd11360 100644 --- a/ej2-react/code-snippet/image-editor/default-cs17/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs17/app/app.jsx @@ -4,14 +4,16 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } buttonTemplate(data) { diff --git a/ej2-react/code-snippet/image-editor/default-cs17/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs17/app/app.tsx index afcdd13b8..780e2b24a 100644 --- a/ej2-react/code-snippet/image-editor/default-cs17/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs17/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs17/index.html b/ej2-react/code-snippet/image-editor/default-cs17/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs17/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs17/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs18/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs18/app/app.jsx index e2ed0151c..5e1ea5ca9 100644 --- a/ej2-react/code-snippet/image-editor/default-cs18/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs18/app/app.jsx @@ -3,14 +3,16 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } toolbarUpdating(args) { diff --git a/ej2-react/code-snippet/image-editor/default-cs18/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs18/app/app.tsx index 94af2dd87..326af09c5 100644 --- a/ej2-react/code-snippet/image-editor/default-cs18/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs18/app/app.tsx @@ -6,6 +6,7 @@ import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; import { ItemModel } from '@syncfusion/ej2-navigations'; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs18/index.html b/ej2-react/code-snippet/image-editor/default-cs18/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs18/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs18/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs19/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs19/app/app.jsx index 838a11c0e..268ac7909 100644 --- a/ej2-react/code-snippet/image-editor/default-cs19/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs19/app/app.jsx @@ -4,14 +4,16 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs19/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs19/app/app.tsx index 907697bdd..9f0f81867 100644 --- a/ej2-react/code-snippet/image-editor/default-cs19/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs19/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs19/index.html b/ej2-react/code-snippet/image-editor/default-cs19/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs19/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs19/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs2/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs2/app/app.jsx index 36bf595dd..0b84980a8 100644 --- a/ej2-react/code-snippet/image-editor/default-cs2/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs2/app/app.jsx @@ -4,14 +4,15 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs2/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs2/app/app.tsx index cc9b8acb1..0821f380e 100644 --- a/ej2-react/code-snippet/image-editor/default-cs2/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs2/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs2/index.html b/ej2-react/code-snippet/image-editor/default-cs2/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs2/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs2/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs20/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs20/app/app.jsx index a3f72db4b..0c6a920dd 100644 --- a/ej2-react/code-snippet/image-editor/default-cs20/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs20/app/app.jsx @@ -4,14 +4,16 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs20/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs20/app/app.tsx index 1faf94dcb..629ad26c9 100644 --- a/ej2-react/code-snippet/image-editor/default-cs20/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs20/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs20/index.html b/ej2-react/code-snippet/image-editor/default-cs20/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs20/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs20/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs21/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs21/app/app.jsx index 1ccaa6b8f..7843e21ef 100644 --- a/ej2-react/code-snippet/image-editor/default-cs21/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs21/app/app.jsx @@ -4,16 +4,18 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; zoomSettings = {maxZoomFactor: 30, minZoomFactor: 0.1}; zoomLevel = 1; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } zoomInClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs21/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs21/app/app.tsx index 5dc2a1f37..9e087a91c 100644 --- a/ej2-react/code-snippet/image-editor/default-cs21/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs21/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs21/index.html b/ej2-react/code-snippet/image-editor/default-cs21/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs21/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs21/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs22/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs22/app/app.jsx index 24a8e3876..72078128a 100644 --- a/ej2-react/code-snippet/image-editor/default-cs22/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs22/app/app.jsx @@ -4,19 +4,21 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { - let dimension = imgObj.getImageDimension(); - imgObj.drawText(dimension.x, dimension.y,'Enter\nText'); + let dimension = this.imgObj.getImageDimension(); + this.imgObj.drawText(dimension.x, dimension.y,'Enter\nText'); } render() { return (
    diff --git a/ej2-react/code-snippet/image-editor/default-cs22/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs22/app/app.tsx index f4ce476fe..943f7600c 100644 --- a/ej2-react/code-snippet/image-editor/default-cs22/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs22/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs22/index.html b/ej2-react/code-snippet/image-editor/default-cs22/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs22/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs22/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs23/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs23/app/app.jsx index e97de95c0..e73a47327 100644 --- a/ej2-react/code-snippet/image-editor/default-cs23/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs23/app/app.jsx @@ -4,19 +4,21 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { - let dimension = imgObj.getImageDimension(); - imgObj.drawText(dimension.x, dimension.y,'Enter\nText'); + let dimension = this.imgObj.getImageDimension(); + this.imgObj.drawText(dimension.x, dimension.y,'Enter\nText'); } btnClick() { imgObj.deleteShape('shape_1'); diff --git a/ej2-react/code-snippet/image-editor/default-cs23/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs23/app/app.tsx index c537304c6..5dce32ac0 100644 --- a/ej2-react/code-snippet/image-editor/default-cs23/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs23/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs23/index.html b/ej2-react/code-snippet/image-editor/default-cs23/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs23/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs23/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs24/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs24/app/app.jsx index 21e9edc83..ab75bde68 100644 --- a/ej2-react/code-snippet/image-editor/default-cs24/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs24/app/app.jsx @@ -4,21 +4,23 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { - imgObj.freeHandDraw(true); + this.imgObj.freeHandDraw(true); } delClick() { - imgObj.deleteShape('pen_1'); + this.imgObj.deleteShape('pen_1'); } render() { return (
    diff --git a/ej2-react/code-snippet/image-editor/default-cs24/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs24/app/app.tsx index 4ad6adb80..e13ee5007 100644 --- a/ej2-react/code-snippet/image-editor/default-cs24/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs24/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs24/index.html b/ej2-react/code-snippet/image-editor/default-cs24/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs24/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs24/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs25/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs25/app/app.jsx index 4f94b6810..3864b52e2 100644 --- a/ej2-react/code-snippet/image-editor/default-cs25/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs25/app/app.jsx @@ -4,6 +4,8 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; toolbar = ['Annotate', "Line", "Rectangle", "Circle", "Ellipse", "Arrow", "Path"]; @@ -17,10 +19,10 @@ export default class App extends React.Component { } imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } render() { diff --git a/ej2-react/code-snippet/image-editor/default-cs25/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs25/app/app.tsx index 9da65f73b..9bac565b3 100644 --- a/ej2-react/code-snippet/image-editor/default-cs25/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs25/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs25/index.html b/ej2-react/code-snippet/image-editor/default-cs25/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs25/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs25/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs26/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs26/app/app.jsx index 4cc05c068..17e0ee5ce 100644 --- a/ej2-react/code-snippet/image-editor/default-cs26/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs26/app/app.jsx @@ -4,19 +4,21 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { - let dimension = imgObj.getImageDimension(); - imgObj.drawArrow(dimension.x, dimension.y+10, dimension.x+50, dimension.y+10, 10); + let dimension = this.imgObj.getImageDimension(); + this.imgObj.drawArrow(dimension.x, dimension.y+10, dimension.x+50, dimension.y+10, 10); } render() { return (
    diff --git a/ej2-react/code-snippet/image-editor/default-cs26/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs26/app/app.tsx index e2167396d..1739b5cb6 100644 --- a/ej2-react/code-snippet/image-editor/default-cs26/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs26/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs26/index.html b/ej2-react/code-snippet/image-editor/default-cs26/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs26/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs26/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs27/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs27/app/app.jsx index e212e70c4..2765a253c 100644 --- a/ej2-react/code-snippet/image-editor/default-cs27/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs27/app/app.jsx @@ -4,14 +4,15 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } chromeClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs27/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs27/app/app.tsx index 036fc7d08..cfade927f 100644 --- a/ej2-react/code-snippet/image-editor/default-cs27/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs27/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs27/index.html b/ej2-react/code-snippet/image-editor/default-cs27/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs27/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs27/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs28/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs28/app/app.jsx index 0e1ec3ebd..310a3201d 100644 --- a/ej2-react/code-snippet/image-editor/default-cs28/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs28/app/app.jsx @@ -5,14 +5,16 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } blurClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs28/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs28/app/app.tsx index 120777c0c..9e347f17f 100644 --- a/ej2-react/code-snippet/image-editor/default-cs28/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs28/app/app.tsx @@ -9,6 +9,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs28/index.html b/ej2-react/code-snippet/image-editor/default-cs28/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs28/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs28/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs29/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs29/app/app.jsx index 1f777594c..f92f0fcce 100644 --- a/ej2-react/code-snippet/image-editor/default-cs29/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs29/app/app.jsx @@ -4,14 +4,15 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } quickAccessToolbarOpen(args) { diff --git a/ej2-react/code-snippet/image-editor/default-cs29/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs29/app/app.tsx index e80550a0c..28886578a 100644 --- a/ej2-react/code-snippet/image-editor/default-cs29/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs29/app/app.tsx @@ -5,6 +5,7 @@ import { ImageEditorComponent, ImageFinetuneOption } from '@syncfusion/ej2-react import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs29/index.html b/ej2-react/code-snippet/image-editor/default-cs29/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs29/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs29/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs3/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs3/app/app.jsx index 2795f2fb6..43c3d509b 100644 --- a/ej2-react/code-snippet/image-editor/default-cs3/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs3/app/app.jsx @@ -4,23 +4,25 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { - let dimension = imgObj.getImageDimension(); - imgObj.drawRectangle(dimension.x, dimension.y); - imgObj.drawEllipse(dimension.x, dimension.y); - imgObj.drawLine(dimension.x, dimension.y); - imgObj.drawArrow(dimension.x, dimension.y+10, dimension.x+50, dimension.y+10, 10); - imgObj.drawPath([{x: dimension.x, y: dimension.y}, {x: dimension.x+50, y: dimension.y+50}, {x: dimension.x+20, y: dimension.y+50}], 8); + let dimension = this.imgObj.getImageDimension(); + this.imgObj.drawRectangle(dimension.x, dimension.y); + this.imgObj.drawEllipse(dimension.x, dimension.y); + this.imgObj.drawLine(dimension.x, dimension.y); + this.imgObj.drawArrow(dimension.x, dimension.y+10, dimension.x+50, dimension.y+10, 10); + this.imgObj.drawPath([{x: dimension.x, y: dimension.y}, {x: dimension.x+50, y: dimension.y+50}, {x: dimension.x+20, y: dimension.y+50}], 8); } render() { return (
    diff --git a/ej2-react/code-snippet/image-editor/default-cs3/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs3/app/app.tsx index 6606d14d8..1f12b0c23 100644 --- a/ej2-react/code-snippet/image-editor/default-cs3/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs3/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs3/index.html b/ej2-react/code-snippet/image-editor/default-cs3/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs3/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs3/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs30/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs30/app/app.jsx index cb41576ea..2f14e2e8a 100644 --- a/ej2-react/code-snippet/image-editor/default-cs30/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs30/app/app.jsx @@ -4,19 +4,20 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { - let dimension = imgObj.getImageDimension(); - imgObj.drawText(dimension.x, dimension.y); + let dimension = this.imgObj.getImageDimension(); + this.imgObj.drawText(dimension.x, dimension.y); } undoClick() { this.imgObj.undo(); diff --git a/ej2-react/code-snippet/image-editor/default-cs30/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs30/app/app.tsx index 396a640c5..a87be5dd3 100644 --- a/ej2-react/code-snippet/image-editor/default-cs30/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs30/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs30/index.html b/ej2-react/code-snippet/image-editor/default-cs30/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs30/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs30/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs31/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs31/app/app.jsx index 2874b8848..64ea031a0 100644 --- a/ej2-react/code-snippet/image-editor/default-cs31/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs31/app/app.jsx @@ -3,20 +3,21 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; export default class App extends React.Component { imgObj; toolbar = ['Annotate', "Line", "Rectangle", "Text", 'ZoomIn', 'ZoomOut', { text: 'Custom' }]; toolbarItemClicked (args) { if (args.item.text === 'Custom') { - imageEditorObj.rotate(90); + this.imgObj.rotate(90); } } imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } render() { diff --git a/ej2-react/code-snippet/image-editor/default-cs31/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs31/app/app.tsx index cc6ba9c13..f3d2c64e2 100644 --- a/ej2-react/code-snippet/image-editor/default-cs31/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs31/app/app.tsx @@ -5,6 +5,7 @@ import { ImageEditorComponent, ToolbarEventArgs, ClickEventArgs } from '@syncfus import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs31/index.html b/ej2-react/code-snippet/image-editor/default-cs31/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs31/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs31/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs32/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs32/app/app.jsx index 07965c2fc..ad136ebd2 100644 --- a/ej2-react/code-snippet/image-editor/default-cs32/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs32/app/app.jsx @@ -3,15 +3,16 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; export default class App extends React.Component { imgObj; toolbar = ['Annotate' , 'Finetune' , 'Filter' , 'Confirm' , 'Reset' , 'Save', 'ZoomIn', 'ZoomOut']; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } render() { diff --git a/ej2-react/code-snippet/image-editor/default-cs32/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs32/app/app.tsx index 003bb6f42..a04b7b81f 100644 --- a/ej2-react/code-snippet/image-editor/default-cs32/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs32/app/app.tsx @@ -5,6 +5,7 @@ import { ImageEditorComponent, ToolbarEventArgs } from '@syncfusion/ej2-react-im import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs32/index.html b/ej2-react/code-snippet/image-editor/default-cs32/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs32/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs32/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs33/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs33/app/app.jsx index 383fd92c0..57f1767d6 100644 --- a/ej2-react/code-snippet/image-editor/default-cs33/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs33/app/app.jsx @@ -3,15 +3,16 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; export default class App extends React.Component { imgObj; toolbar = ['Annotate', 'Finetune' , 'Filter' , 'Confirm' , 'Reset' , 'Save', 'ZoomIn', 'ZoomOut']; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } render() { diff --git a/ej2-react/code-snippet/image-editor/default-cs33/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs33/app/app.tsx index 003bb6f42..a04b7b81f 100644 --- a/ej2-react/code-snippet/image-editor/default-cs33/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs33/app/app.tsx @@ -5,6 +5,7 @@ import { ImageEditorComponent, ToolbarEventArgs } from '@syncfusion/ej2-react-im import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs33/index.html b/ej2-react/code-snippet/image-editor/default-cs33/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs33/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs33/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs34/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs34/app/app.jsx index 6c2da50d3..1b1f1f7d1 100644 --- a/ej2-react/code-snippet/image-editor/default-cs34/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs34/app/app.jsx @@ -5,14 +5,15 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } brightnessClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs34/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs34/app/app.tsx index 710af0736..31100b658 100644 --- a/ej2-react/code-snippet/image-editor/default-cs34/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs34/app/app.tsx @@ -9,6 +9,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs34/index.html b/ej2-react/code-snippet/image-editor/default-cs34/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs34/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs34/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs35/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs35/app/app.jsx index 2bbad2d65..e14ad60ea 100644 --- a/ej2-react/code-snippet/image-editor/default-cs35/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs35/app/app.jsx @@ -4,14 +4,15 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } matClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs35/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs35/app/app.tsx index 1552da4fa..2ff607e89 100644 --- a/ej2-react/code-snippet/image-editor/default-cs35/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs35/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs35/index.html b/ej2-react/code-snippet/image-editor/default-cs35/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs35/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs35/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs36/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs36/app/app.jsx index 0d94c0ddc..9d498a999 100644 --- a/ej2-react/code-snippet/image-editor/default-cs36/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs36/app/app.jsx @@ -4,15 +4,16 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; export default class App extends React.Component { toolbar = []; imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } aspectClick() { diff --git a/ej2-react/code-snippet/image-editor/default-cs36/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs36/app/app.tsx index 225e152fc..4f0c27b14 100644 --- a/ej2-react/code-snippet/image-editor/default-cs36/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs36/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs36/index.html b/ej2-react/code-snippet/image-editor/default-cs36/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs36/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs36/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs37/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs37/app/app.jsx index 55b8a8562..38d1551bc 100644 --- a/ej2-react/code-snippet/image-editor/default-cs37/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs37/app/app.jsx @@ -4,19 +4,20 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; export default class App extends React.Component { toolbar = []; imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } btnClick() { - let dimension = imgObj.getImageDimension(); + let dimension = this.imgObj.getImageDimension(); this.imgObj.drawImage('flower.png', dimension.x, dimension.y, 100, 80, true, 0); } render() { diff --git a/ej2-react/code-snippet/image-editor/default-cs37/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs37/app/app.tsx index 8f83a0588..84d2e2c73 100644 --- a/ej2-react/code-snippet/image-editor/default-cs37/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs37/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs37/index.html b/ej2-react/code-snippet/image-editor/default-cs37/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs37/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs37/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs38/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs38/app/app.jsx index c967bfd53..3d22d70b3 100644 --- a/ej2-react/code-snippet/image-editor/default-cs38/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs38/app/app.jsx @@ -3,16 +3,18 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { fontFamily = { default: 'Arial', items: [{id: 'arial', text: 'Arial'}, {id: 'brush script mt', text: 'Brush Script MT'}, {id: 'papyrus', text: 'Papyrus'}, {id: 'times new roman', text: 'Times New Roman'}, {id: 'courier new', text: 'Courier New'}] }; imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } diff --git a/ej2-react/code-snippet/image-editor/default-cs38/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs38/app/app.tsx index 9beed17de..91ce949a8 100644 --- a/ej2-react/code-snippet/image-editor/default-cs38/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs38/app/app.tsx @@ -5,6 +5,7 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs38/index.html b/ej2-react/code-snippet/image-editor/default-cs38/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs38/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs38/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs39/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs39/app/app.jsx index ea19c7ae5..61bfbe302 100644 --- a/ej2-react/code-snippet/image-editor/default-cs39/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs39/app/app.jsx @@ -3,14 +3,15 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } diff --git a/ej2-react/code-snippet/image-editor/default-cs39/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs39/app/app.tsx index c6a86f3f6..db0d98d4d 100644 --- a/ej2-react/code-snippet/image-editor/default-cs39/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs39/app/app.tsx @@ -5,6 +5,7 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs39/index.html b/ej2-react/code-snippet/image-editor/default-cs39/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs39/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs39/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs4/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs4/app/app.jsx index c7c59b5a1..f8e93fa4a 100644 --- a/ej2-react/code-snippet/image-editor/default-cs4/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs4/app/app.jsx @@ -4,6 +4,8 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; shapeChanging(args) { @@ -12,15 +14,15 @@ export default class App extends React.Component { } } btnClick() { - let dimension = imgObj.getImageDimension(); - imgObj.drawText(dimension.x, dimension.y, 'Enter\nText'); + let dimension = this.imgObj.getImageDimension(); + this.imgObj.drawText(dimension.x, dimension.y, 'Enter\nText'); } imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } render() { diff --git a/ej2-react/code-snippet/image-editor/default-cs4/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs4/app/app.tsx index f3887be32..ec45935c3 100644 --- a/ej2-react/code-snippet/image-editor/default-cs4/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs4/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs4/index.html b/ej2-react/code-snippet/image-editor/default-cs4/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs4/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs4/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs40/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs40/app/app.jsx index 6f94c48ef..a831409fb 100644 --- a/ej2-react/code-snippet/image-editor/default-cs40/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs40/app/app.jsx @@ -3,14 +3,15 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } render() { diff --git a/ej2-react/code-snippet/image-editor/default-cs40/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs40/app/app.tsx index f5c943fa6..91ca5e0bc 100644 --- a/ej2-react/code-snippet/image-editor/default-cs40/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs40/app/app.tsx @@ -5,6 +5,7 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs40/index.html b/ej2-react/code-snippet/image-editor/default-cs40/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs40/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs40/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs5/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs5/app/app.jsx index d81ac3c29..316843e54 100644 --- a/ej2-react/code-snippet/image-editor/default-cs5/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs5/app/app.jsx @@ -4,6 +4,8 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; shapeChanging(args) { @@ -14,10 +16,10 @@ export default class App extends React.Component { } imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } render() { diff --git a/ej2-react/code-snippet/image-editor/default-cs5/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs5/app/app.tsx index a5ce5597e..9142b2a2a 100644 --- a/ej2-react/code-snippet/image-editor/default-cs5/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs5/app/app.tsx @@ -6,6 +6,7 @@ import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs5/index.html b/ej2-react/code-snippet/image-editor/default-cs5/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs5/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs5/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs6/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs6/app/app.jsx index 521bfc48d..8a37a6d06 100644 --- a/ej2-react/code-snippet/image-editor/default-cs6/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs6/app/app.jsx @@ -1,6 +1,8 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { render() { return (
    diff --git a/ej2-react/code-snippet/image-editor/default-cs6/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs6/app/app.tsx index c211b37fd..27b77d40b 100644 --- a/ej2-react/code-snippet/image-editor/default-cs6/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs6/app/app.tsx @@ -3,6 +3,7 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { diff --git a/ej2-react/code-snippet/image-editor/default-cs6/index.html b/ej2-react/code-snippet/image-editor/default-cs6/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs6/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs6/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs8/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs8/app/app.jsx index 3c028e55a..b25a03e0b 100644 --- a/ej2-react/code-snippet/image-editor/default-cs8/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs8/app/app.jsx @@ -3,6 +3,8 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { L10n } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + L10n.load({ 'de-DE': { 'image-editor': { @@ -48,10 +50,10 @@ export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } render() { diff --git a/ej2-react/code-snippet/image-editor/default-cs8/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs8/app/app.tsx index 815fe3370..2e85ec752 100644 --- a/ej2-react/code-snippet/image-editor/default-cs8/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs8/app/app.tsx @@ -5,6 +5,7 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { L10n, Browser} from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; L10n.load({ 'de-DE': { diff --git a/ej2-react/code-snippet/image-editor/default-cs8/index.html b/ej2-react/code-snippet/image-editor/default-cs8/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs8/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs8/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/image-editor/default-cs9/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs9/app/app.jsx index b35dfaec9..ec53a0978 100644 --- a/ej2-react/code-snippet/image-editor/default-cs9/app/app.jsx +++ b/ej2-react/code-snippet/image-editor/default-cs9/app/app.jsx @@ -3,14 +3,16 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; + export default class App extends React.Component { imgObj; imageEditorCreated() { if (Browser.isDevice) { - this.imgObj.open('flower.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png'); } else { - this.imgObj.open('bridge.png'); + this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png'); } } render() { diff --git a/ej2-react/code-snippet/image-editor/default-cs9/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs9/app/app.tsx index cb4b6d0ef..e97a2abc1 100644 --- a/ej2-react/code-snippet/image-editor/default-cs9/app/app.tsx +++ b/ej2-react/code-snippet/image-editor/default-cs9/app/app.tsx @@ -5,6 +5,7 @@ import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; import { Browser } from '@syncfusion/ej2-base'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import './index.css'; function App() { let imgObj: ImageEditorComponent; diff --git a/ej2-react/code-snippet/image-editor/default-cs9/index.html b/ej2-react/code-snippet/image-editor/default-cs9/index.html index acf04c9fc..eecc4f429 100644 --- a/ej2-react/code-snippet/image-editor/default-cs9/index.html +++ b/ej2-react/code-snippet/image-editor/default-cs9/index.html @@ -14,6 +14,7 @@ + diff --git a/ej2-react/code-snippet/listbox/basic-cs13/app/index.jsx b/ej2-react/code-snippet/listbox/basic-cs13/app/index.jsx index add82a3f6..4ea9170b1 100644 --- a/ej2-react/code-snippet/listbox/basic-cs13/app/index.jsx +++ b/ej2-react/code-snippet/listbox/basic-cs13/app/index.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns'; +import { ListBoxComponent, Inject, CheckBoxSelection } from '@syncfusion/ej2-react-dropdowns'; function App() { let data = [ { text: 'Hennessey Venom', id: 'list-01' }, @@ -14,8 +14,9 @@ function App() { { text: 'McLaren P1', id: 'list-09' }, { text: 'Ferrari LaFerrari', id: 'list-10' } ]; - let selection = { mode: "single" }; - return (); + let selection = { mode: "single", showCheckbox: true }; + return ( + ); } export default App; ReactDOM.render(, document.getElementById('sample')); diff --git a/ej2-react/code-snippet/listbox/basic-cs13/app/index.tsx b/ej2-react/code-snippet/listbox/basic-cs13/app/index.tsx index 6bd9bf322..7a9cc5eec 100644 --- a/ej2-react/code-snippet/listbox/basic-cs13/app/index.tsx +++ b/ej2-react/code-snippet/listbox/basic-cs13/app/index.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns'; +import { ListBoxComponent, Inject, CheckBoxSelection } from '@syncfusion/ej2-react-dropdowns'; function App() { let data: { [key: string]: Object }[] = [ @@ -18,9 +18,10 @@ function App() { { text: 'McLaren P1', id: 'list-09' }, { text: 'Ferrari LaFerrari', id: 'list-10' } ]; - let selection:object = { mode:"single" } + let selection:object = { mode:"single", showCheckbox: true } return ( - + + ); } export default App; diff --git a/ej2-react/code-snippet/listbox/basic-cs14/app/index.jsx b/ej2-react/code-snippet/listbox/basic-cs14/app/index.jsx index 3511eec22..a378af0a1 100644 --- a/ej2-react/code-snippet/listbox/basic-cs14/app/index.jsx +++ b/ej2-react/code-snippet/listbox/basic-cs14/app/index.jsx @@ -14,8 +14,9 @@ function App() { { text: 'McLaren P1', id: 'list-09' }, { text: 'Ferrari LaFerrari', id: 'list-10' } ]; - let selection = { mode: "multiple" }; - return (); + let selection = { mode: "multiple", showCheckbox: true }; + return ( + ); } export default App; ReactDOM.render(, document.getElementById('sample')); diff --git a/ej2-react/code-snippet/listbox/basic-cs14/app/index.tsx b/ej2-react/code-snippet/listbox/basic-cs14/app/index.tsx index 091e30052..2d36f00b8 100644 --- a/ej2-react/code-snippet/listbox/basic-cs14/app/index.tsx +++ b/ej2-react/code-snippet/listbox/basic-cs14/app/index.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns'; +import { ListBoxComponent, Inject, CheckBoxSelection } from '@syncfusion/ej2-react-dropdowns'; function App() { let data: { [key: string]: Object }[] = [ @@ -18,9 +18,10 @@ function App() { { text: 'McLaren P1', id: 'list-09' }, { text: 'Ferrari LaFerrari', id: 'list-10' } ]; - let selection:object = { mode:"multiple" } + let selection:object = { mode:"multiple", showCheckbox: true } return ( - + + ); } export default App; diff --git a/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/app/index.jsx b/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/app/index.jsx new file mode 100644 index 000000000..c67f04fcb --- /dev/null +++ b/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/app/index.jsx @@ -0,0 +1,15 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + const ariaLables = ['First digit', 'Second digit', 'Third digit', 'Fourth digit']; + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/app/index.tsx b/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/app/index.tsx new file mode 100644 index 000000000..769510267 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + const ariaLables: string[] = ['First digit', 'Second digit', 'Third digit', 'Fourth digit']; + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/index.html b/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/styles.css b/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/systemjs.config.js b/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/accessibility/ariaLabels/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/app/index.jsx b/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/app/index.jsx new file mode 100644 index 000000000..04618f77f --- /dev/null +++ b/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/app/index.jsx @@ -0,0 +1,15 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + const htmlAttributes = { title : "One-Time Password"} ; + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/app/index.tsx b/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/app/index.tsx new file mode 100644 index 000000000..19ade15e6 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + const htmlAttributes: { [key: string]: string; } = { title : "One-Time Password"} ; + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/index.html b/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/styles.css b/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/systemjs.config.js b/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/accessibility/htmlAttributes/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/appearance/cssClass/app/index.jsx b/ej2-react/code-snippet/otp-input/appearance/cssClass/app/index.jsx new file mode 100644 index 000000000..1d582e95e --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/cssClass/app/index.jsx @@ -0,0 +1,12 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/appearance/cssClass/app/index.tsx b/ej2-react/code-snippet/otp-input/appearance/cssClass/app/index.tsx new file mode 100644 index 000000000..2e0422413 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/cssClass/app/index.tsx @@ -0,0 +1,15 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/appearance/cssClass/index.html b/ej2-react/code-snippet/otp-input/appearance/cssClass/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/cssClass/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/appearance/cssClass/styles.css b/ej2-react/code-snippet/otp-input/appearance/cssClass/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/cssClass/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/appearance/cssClass/systemjs.config.js b/ej2-react/code-snippet/otp-input/appearance/cssClass/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/cssClass/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/appearance/disabled/app/index.jsx b/ej2-react/code-snippet/otp-input/appearance/disabled/app/index.jsx new file mode 100644 index 000000000..4a23121b3 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/disabled/app/index.jsx @@ -0,0 +1,12 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/appearance/disabled/app/index.tsx b/ej2-react/code-snippet/otp-input/appearance/disabled/app/index.tsx new file mode 100644 index 000000000..bc11d602e --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/disabled/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/appearance/disabled/index.html b/ej2-react/code-snippet/otp-input/appearance/disabled/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/disabled/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/appearance/disabled/styles.css b/ej2-react/code-snippet/otp-input/appearance/disabled/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/disabled/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/appearance/disabled/systemjs.config.js b/ej2-react/code-snippet/otp-input/appearance/disabled/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/disabled/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/appearance/length/app/index.jsx b/ej2-react/code-snippet/otp-input/appearance/length/app/index.jsx new file mode 100644 index 000000000..f51caf830 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/length/app/index.jsx @@ -0,0 +1,12 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/appearance/length/app/index.tsx b/ej2-react/code-snippet/otp-input/appearance/length/app/index.tsx new file mode 100644 index 000000000..8109c9cb3 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/length/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/appearance/length/index.html b/ej2-react/code-snippet/otp-input/appearance/length/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/length/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/appearance/length/styles.css b/ej2-react/code-snippet/otp-input/appearance/length/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/length/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/appearance/length/systemjs.config.js b/ej2-react/code-snippet/otp-input/appearance/length/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/appearance/length/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/blur/app/index.jsx b/ej2-react/code-snippet/otp-input/events/blur/app/index.jsx new file mode 100644 index 000000000..585dac322 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/blur/app/index.jsx @@ -0,0 +1,15 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + const blurFunction = (args) => { + //your required action here + } + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/events/blur/app/index.tsx b/ej2-react/code-snippet/otp-input/events/blur/app/index.tsx new file mode 100644 index 000000000..d4e372560 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/blur/app/index.tsx @@ -0,0 +1,18 @@ +// Import the OTP Input. +import { OtpInputComponent, OtpFocusEventArgs } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + const blurFunction = (args: OtpFocusEventArgs) => { + //your required action here + } + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/events/blur/index.html b/ej2-react/code-snippet/otp-input/events/blur/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/blur/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/blur/styles.css b/ej2-react/code-snippet/otp-input/events/blur/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/blur/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/blur/systemjs.config.js b/ej2-react/code-snippet/otp-input/events/blur/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/blur/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/created/app/index.jsx b/ej2-react/code-snippet/otp-input/events/created/app/index.jsx new file mode 100644 index 000000000..bd8f7f23c --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/created/app/index.jsx @@ -0,0 +1,15 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + const createdFunction = () => { + //your required action here + } + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/events/created/app/index.tsx b/ej2-react/code-snippet/otp-input/events/created/app/index.tsx new file mode 100644 index 000000000..79bead185 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/created/app/index.tsx @@ -0,0 +1,18 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + const createdFunction = () => { + //your required action here + } + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/events/created/index.html b/ej2-react/code-snippet/otp-input/events/created/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/created/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/created/styles.css b/ej2-react/code-snippet/otp-input/events/created/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/created/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/created/systemjs.config.js b/ej2-react/code-snippet/otp-input/events/created/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/created/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/focus/app/index.jsx b/ej2-react/code-snippet/otp-input/events/focus/app/index.jsx new file mode 100644 index 000000000..73888f749 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/focus/app/index.jsx @@ -0,0 +1,15 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + const focusFunction = (args) => { + //your required action here + } + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/events/focus/app/index.tsx b/ej2-react/code-snippet/otp-input/events/focus/app/index.tsx new file mode 100644 index 000000000..5926fcc69 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/focus/app/index.tsx @@ -0,0 +1,18 @@ +// Import the OTP Input. +import { OtpInputComponent, OtpFocusEventArgs } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + const focusFunction = (args: OtpFocusEventArgs) => { + //your required action here + } + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/events/focus/index.html b/ej2-react/code-snippet/otp-input/events/focus/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/focus/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/focus/styles.css b/ej2-react/code-snippet/otp-input/events/focus/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/focus/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/focus/systemjs.config.js b/ej2-react/code-snippet/otp-input/events/focus/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/focus/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/input/app/index.jsx b/ej2-react/code-snippet/otp-input/events/input/app/index.jsx new file mode 100644 index 000000000..fa05a57b5 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/input/app/index.jsx @@ -0,0 +1,15 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + const inputFunction = (args) => { + //your required action here + } + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/events/input/app/index.tsx b/ej2-react/code-snippet/otp-input/events/input/app/index.tsx new file mode 100644 index 000000000..27b79f0a0 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/input/app/index.tsx @@ -0,0 +1,18 @@ +// Import the OTP Input. +import { OtpInputComponent, OtpInputEventArgs } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + const inputFunction = (args: OtpInputEventArgs) => { + //your required action here + } + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/events/input/index.html b/ej2-react/code-snippet/otp-input/events/input/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/input/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/input/styles.css b/ej2-react/code-snippet/otp-input/events/input/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/input/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/input/systemjs.config.js b/ej2-react/code-snippet/otp-input/events/input/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/input/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/valueChanged/app/index.jsx b/ej2-react/code-snippet/otp-input/events/valueChanged/app/index.jsx new file mode 100644 index 000000000..bdb16e16e --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/valueChanged/app/index.jsx @@ -0,0 +1,15 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + const valueChangeFuntion = (args) => { + //your required action here + } + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/events/valueChanged/app/index.tsx b/ej2-react/code-snippet/otp-input/events/valueChanged/app/index.tsx new file mode 100644 index 000000000..15506dc70 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/valueChanged/app/index.tsx @@ -0,0 +1,18 @@ +// Import the OTP Input. +import { OtpInputComponent, OtpChangedEventArgs } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + const valueChangeFuntion = (args: OtpChangedEventArgs) => { + //your required action here + } + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/events/valueChanged/index.html b/ej2-react/code-snippet/otp-input/events/valueChanged/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/valueChanged/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/valueChanged/styles.css b/ej2-react/code-snippet/otp-input/events/valueChanged/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/valueChanged/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/valueChanged/systemjs.config.js b/ej2-react/code-snippet/otp-input/events/valueChanged/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/valueChanged/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/valueChangedEvent/app/index.jsx b/ej2-react/code-snippet/otp-input/events/valueChangedEvent/app/index.jsx new file mode 100644 index 000000000..4060e9476 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/valueChangedEvent/app/index.jsx @@ -0,0 +1,17 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + const valueChangeFuntion = (args) => { + alert("Entered OTP value: " + args.value); + } + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/events/valueChangedEvent/app/index.tsx b/ej2-react/code-snippet/otp-input/events/valueChangedEvent/app/index.tsx new file mode 100644 index 000000000..0784e89a1 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/valueChangedEvent/app/index.tsx @@ -0,0 +1,18 @@ +// Import the OTP Input. +import { OtpInputComponent, OtpChangedEventArgs } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + const valueChangeFuntion = (args: OtpChangedEventArgs) => { + alert("Entered OTP value: " + args.value); + } + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/events/valueChangedEvent/index.html b/ej2-react/code-snippet/otp-input/events/valueChangedEvent/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/valueChangedEvent/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/valueChangedEvent/styles.css b/ej2-react/code-snippet/otp-input/events/valueChangedEvent/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/valueChangedEvent/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/events/valueChangedEvent/systemjs.config.js b/ej2-react/code-snippet/otp-input/events/valueChangedEvent/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/events/valueChangedEvent/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/getting-started-cs1/styles.css b/ej2-react/code-snippet/otp-input/getting-started-cs1/styles.css index bb8fe48d9..9a97100d2 100644 --- a/ej2-react/code-snippet/otp-input/getting-started-cs1/styles.css +++ b/ej2-react/code-snippet/otp-input/getting-started-cs1/styles.css @@ -1,4 +1,16 @@ #container { - margin-top: 30px; - padding: 30px; + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; } \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/getting-started-cs1/systemjs.config.js b/ej2-react/code-snippet/otp-input/getting-started-cs1/systemjs.config.js index 5b4b4e745..063ee7859 100644 --- a/ej2-react/code-snippet/otp-input/getting-started-cs1/systemjs.config.js +++ b/ej2-react/code-snippet/otp-input/getting-started-cs1/systemjs.config.js @@ -22,8 +22,14 @@ System.config({ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", - "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js" + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", diff --git a/ej2-react/code-snippet/otp-input/input-types/number/app/index.jsx b/ej2-react/code-snippet/otp-input/input-types/number/app/index.jsx new file mode 100644 index 000000000..f138c2aba --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/number/app/index.jsx @@ -0,0 +1,12 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/input-types/number/app/index.tsx b/ej2-react/code-snippet/otp-input/input-types/number/app/index.tsx new file mode 100644 index 000000000..d0fb2bfef --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/number/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/input-types/number/index.html b/ej2-react/code-snippet/otp-input/input-types/number/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/number/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/input-types/number/styles.css b/ej2-react/code-snippet/otp-input/input-types/number/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/number/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/input-types/number/systemjs.config.js b/ej2-react/code-snippet/otp-input/input-types/number/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/number/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/input-types/password/app/index.jsx b/ej2-react/code-snippet/otp-input/input-types/password/app/index.jsx new file mode 100644 index 000000000..5f05b1262 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/password/app/index.jsx @@ -0,0 +1,12 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/input-types/password/app/index.tsx b/ej2-react/code-snippet/otp-input/input-types/password/app/index.tsx new file mode 100644 index 000000000..38f9f6228 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/password/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/input-types/password/index.html b/ej2-react/code-snippet/otp-input/input-types/password/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/password/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/input-types/password/styles.css b/ej2-react/code-snippet/otp-input/input-types/password/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/password/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/input-types/password/systemjs.config.js b/ej2-react/code-snippet/otp-input/input-types/password/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/password/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/input-types/text/app/index.jsx b/ej2-react/code-snippet/otp-input/input-types/text/app/index.jsx new file mode 100644 index 000000000..c99d85a61 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/text/app/index.jsx @@ -0,0 +1,12 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/input-types/text/app/index.tsx b/ej2-react/code-snippet/otp-input/input-types/text/app/index.tsx new file mode 100644 index 000000000..db8e23df7 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/text/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/input-types/text/index.html b/ej2-react/code-snippet/otp-input/input-types/text/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/text/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/input-types/text/styles.css b/ej2-react/code-snippet/otp-input/input-types/text/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/text/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/input-types/text/systemjs.config.js b/ej2-react/code-snippet/otp-input/input-types/text/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/text/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/input-types/value/app/index.jsx b/ej2-react/code-snippet/otp-input/input-types/value/app/index.jsx new file mode 100644 index 000000000..cc38ed14a --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/value/app/index.jsx @@ -0,0 +1,12 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/input-types/value/app/index.tsx b/ej2-react/code-snippet/otp-input/input-types/value/app/index.tsx new file mode 100644 index 000000000..f59a90c71 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/value/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/input-types/value/index.html b/ej2-react/code-snippet/otp-input/input-types/value/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/value/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/input-types/value/styles.css b/ej2-react/code-snippet/otp-input/input-types/value/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/value/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/input-types/value/systemjs.config.js b/ej2-react/code-snippet/otp-input/input-types/value/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/input-types/value/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/app/index.jsx b/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/app/index.jsx new file mode 100644 index 000000000..579e08e86 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/app/index.jsx @@ -0,0 +1,12 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/app/index.tsx b/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/app/index.tsx new file mode 100644 index 000000000..e979e147f --- /dev/null +++ b/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/index.html b/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/styles.css b/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/systemjs.config.js b/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/placeholder/placeholder_char/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/app/index.jsx b/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/app/index.jsx new file mode 100644 index 000000000..d3981c897 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/app/index.jsx @@ -0,0 +1,12 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/app/index.tsx b/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/app/index.tsx new file mode 100644 index 000000000..011c66a47 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/index.html b/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/styles.css b/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/systemjs.config.js b/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/placeholder/placeholder_string/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/separator/app/index.jsx b/ej2-react/code-snippet/otp-input/separator/app/index.jsx new file mode 100644 index 000000000..fe079e364 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/separator/app/index.jsx @@ -0,0 +1,12 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/separator/app/index.tsx b/ej2-react/code-snippet/otp-input/separator/app/index.tsx new file mode 100644 index 000000000..0ef535b38 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/separator/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/separator/index.html b/ej2-react/code-snippet/otp-input/separator/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/separator/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/separator/styles.css b/ej2-react/code-snippet/otp-input/separator/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/separator/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/separator/systemjs.config.js b/ej2-react/code-snippet/otp-input/separator/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/separator/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/styling-modes/filled/app/index.jsx b/ej2-react/code-snippet/otp-input/styling-modes/filled/app/index.jsx new file mode 100644 index 000000000..0f37e6338 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/filled/app/index.jsx @@ -0,0 +1,12 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/styling-modes/filled/app/index.tsx b/ej2-react/code-snippet/otp-input/styling-modes/filled/app/index.tsx new file mode 100644 index 000000000..d25ff0966 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/filled/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/styling-modes/filled/index.html b/ej2-react/code-snippet/otp-input/styling-modes/filled/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/filled/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/styling-modes/filled/styles.css b/ej2-react/code-snippet/otp-input/styling-modes/filled/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/filled/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/styling-modes/filled/systemjs.config.js b/ej2-react/code-snippet/otp-input/styling-modes/filled/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/filled/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/styling-modes/outlined/app/index.jsx b/ej2-react/code-snippet/otp-input/styling-modes/outlined/app/index.jsx new file mode 100644 index 000000000..22f0edea6 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/outlined/app/index.jsx @@ -0,0 +1,12 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/styling-modes/outlined/app/index.tsx b/ej2-react/code-snippet/otp-input/styling-modes/outlined/app/index.tsx new file mode 100644 index 000000000..c5b6b820a --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/outlined/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/styling-modes/outlined/index.html b/ej2-react/code-snippet/otp-input/styling-modes/outlined/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/outlined/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/styling-modes/outlined/styles.css b/ej2-react/code-snippet/otp-input/styling-modes/outlined/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/outlined/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/styling-modes/outlined/systemjs.config.js b/ej2-react/code-snippet/otp-input/styling-modes/outlined/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/outlined/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/styling-modes/underlined/app/index.jsx b/ej2-react/code-snippet/otp-input/styling-modes/underlined/app/index.jsx new file mode 100644 index 000000000..4b5036ff4 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/underlined/app/index.jsx @@ -0,0 +1,12 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; +// To render OTP Input. +function App() { + return (
    + +
    ); +} +export default App; +ReactDom.render(, document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/styling-modes/underlined/app/index.tsx b/ej2-react/code-snippet/otp-input/styling-modes/underlined/app/index.tsx new file mode 100644 index 000000000..09667ca33 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/underlined/app/index.tsx @@ -0,0 +1,16 @@ +// Import the OTP Input. +import { OtpInputComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +// To render OTP Input. +function App() { + + return ( +
    + +
    + ); +} +export default App; +ReactDom.render(,document.getElementById('element')); diff --git a/ej2-react/code-snippet/otp-input/styling-modes/underlined/index.html b/ej2-react/code-snippet/otp-input/styling-modes/underlined/index.html new file mode 100644 index 000000000..05656cc50 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/underlined/index.html @@ -0,0 +1,23 @@ + + + + + EJ2 React OTP Input + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/styling-modes/underlined/styles.css b/ej2-react/code-snippet/otp-input/styling-modes/underlined/styles.css new file mode 100644 index 000000000..9a97100d2 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/underlined/styles.css @@ -0,0 +1,16 @@ +#container { + margin: 50px auto; + width: 350px; +} + +/* Represents the styles for loader */ +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/otp-input/styling-modes/underlined/systemjs.config.js b/ej2-react/code-snippet/otp-input/styling-modes/underlined/systemjs.config.js new file mode 100644 index 000000000..063ee7859 --- /dev/null +++ b/ej2-react/code-snippet/otp-input/styling-modes/underlined/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/combo-box/virtual-scroll.md b/ej2-react/combo-box/virtual-scroll.md index b34fe0607..9cca77ee2 100644 --- a/ej2-react/combo-box/virtual-scroll.md +++ b/ej2-react/combo-box/virtual-scroll.md @@ -42,7 +42,7 @@ In the following example, `id` column and `text` column from complex data have b ## Binding remote data -The Combobox supports retrieval of data from remote data services with the help of `DataManager` component. When using remote data, it initially fetches all the data from the server, triggering the `actionBegin` and `actionComplete` events, and then stores the data locally. During virtual scrolling, additional data is retrieved from the locally stored data, triggering the `actionBegin` and `actionComplete` events at that time as well. +The Combobox supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well. The following sample displays the OrderId from the `Orders` Data Service. diff --git a/ej2-react/common/globalization/internationalization.md b/ej2-react/common/globalization/internationalization.md index b15b7e447..ce3b0645a 100644 --- a/ej2-react/common/globalization/internationalization.md +++ b/ej2-react/common/globalization/internationalization.md @@ -14,31 +14,52 @@ The `Internationalization` library provides support for formatting and parsing d ## Loading Culture Data -It requires the following CLDR data to be load using `loadCldr` function for cultures other than `en-US`. +Syncfusion CLDR data package contains only JSON data files generated using the official [Unicode CLDR](http://cldr.unicode.org/) JSON data. This helps users avoid utilizing the existing [cldr-data](https://www.npmjs.com/package/cldr-data) package, which has third-party library vulnerabilities. The `loadCldr` function is required to load the following CLDR data for cultures other than `en-US`. + +N> Syncfusion CLDR data package is published based on the releases of the Unicode CLDR JSON data. The package will be published within a week after the official [Unicode CLDR](http://cldr.unicode.org/) JSON data is released. + +### Individual file path reference + +Syncfusion CLDR data can be loaded by referring to individual paths from the package below, such as: + +| File Name | Path | +| ------------- | ------------- | +| ca-gregorian | @syncfusion/ej2-cldr-data/main/en/ca-gregorian.json | +| timeZoneNames |@syncfusion/ej2-cldr-data/main/en/timeZoneNames.json | +| numbers | @syncfusion/ej2-cldr-data/main/en/numbers.json | +| currencies | @syncfusion/ej2-cldr-data/main/en/currencies.json | +| numberingSystems | @syncfusion/ej2-cldr-data/supplemental/numberingSystems.json | + + +### Single file path reference + +Syncfusion CLDR data can also be loaded by referring to a single path from the package below, such as: | File Name | Path | | ------------- | ------------- | -| ca-gregorian | cldr/main/en/ca-gregorian.json | -| timeZoneNames |cldr/main/en/timeZoneNames.json | -| numbers | cldr/main/en/numbers.json | -| numberingSystems | cldr/supplemental/numberingSystems.json | -| currencies | cldr/main/en/currencies.json | +| ca-gregorian, timeZoneNames, numbers, currencies | @syncfusion/ej2-cldr-data/main/en/all.json | +| numberingSystems | @syncfusion/ej2-cldr-data/supplemental/numberingSystems.json | >Note: For `en`, dependency files are already loaded in the library. -### Installing CLDR Data +### Installing CLDR data -CLDR data is available as npm package. So, we can install it through below command to our package. +Syncfusion CLDR data is available as npm package. So, we can install it through below command to our package. ```bash -npm install cldr-data +npm install @syncfusion/ej2-cldr-data ``` ### Binding to i18n library -```ts +The i18n library to use the CLDR data to format, parse number and date/time values in a way that is appropriate for the `en` culture. The loadCldr function takes two arguments, enNumberData and enTimeZoneData, which are the CLDR data for numbers and time zones, respectively, for the en culture. + +```typescript + +import { loadCldr } from "@syncfusion/ej2-base"; +import enNumberData from "@syncfusion/ej2-cldr-data/main/en/numbers.json"; +import entimeZoneData from "@syncfusion/ej2-cldr-data/main/en/timeZoneNames.json"; -import { loadCldr } from '@syncfusion/ej2-base'; loadcldr(enNumberData, entimeZoneData); ``` diff --git a/ej2-react/diagram/connectors.md b/ej2-react/diagram/connectors.md index 075dda3fb..871d508e7 100644 --- a/ej2-react/diagram/connectors.md +++ b/ej2-react/diagram/connectors.md @@ -50,6 +50,23 @@ The following code example illustrates how to add connector at runtime. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5Connectorsatruntime-cs1" %} +## Add collection of connectors at runtime + +* The collection of connectors can be dynamically added using 'addElements' method.Each time an element is added to the diagram canvas, the 'collectionChange' event will be triggered. + +The following code illustrates how to add a connectors collection at runtime. + +{% tabs %} +{% highlight ts tabtitle="index.jsx" %} +{% include code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/app/index.jsx %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/es5ConnectoraddatRunTime-cs2" %} + ## Connectors from palette Connectors can be predefined and added to the symbol palette. You can drop those connectors into the diagram, when required. diff --git a/ej2-react/diagram/getting-started.md b/ej2-react/diagram/getting-started.md index 75087c9e4..7a4ffd4b3 100644 --- a/ej2-react/diagram/getting-started.md +++ b/ej2-react/diagram/getting-started.md @@ -8,10 +8,14 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started +# Getting started with react diagram This section explains the steps required to create a simple diagram and demonstrates the basic usage of the diagram control. +## Prerequisites + +[System requirements for Syncfusion React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement) + ## Dependencies The following list of dependencies are required to use the `Diagram` component in your application. @@ -32,18 +36,45 @@ The following list of dependencies are required to use the `Diagram` component i ## Installation and configuration -You can use [`create-react-app`](https://github.com/facebookincubator/create-react-app) to setup the applications. To install `create-react-app` run the following command. +You can use [`create-react-app`](https://github.com/facebookincubator/create-react-app) to setup the applications. Run the following command to install `create-react-app` in `JavaScript` environment. + +{% tabs %} +{% highlight js tabtitle="npx" %} +```javascript + npx create-react-app my-diagram-app + cd my-diagram-app + npm start +``` +{% endhighlight %} +{% highlight js tabtitle="yarn" %} +```javascript + yarn create react-app my-diagram-app + cd my-diagram-app + yarn start +``` +{% endhighlight %} +{% endtabs %} - ``` - npm install -g create-react-app - ``` -* To setup basic `React` sample use following commands. +To set-up a React application in `TypeScript` environment, run the following command. - ``` - create-react-app quickstart --scripts-version=react-scripts-ts - cd quickstart - ``` + +{% tabs %} +{% highlight js tabtitle="npx" %} +```javascript + npx create-react-app my-diagram-app --template typescript + cd my-diagram-app + npm start +``` +{% endhighlight %} +{% highlight js tabtitle="yarn" %} +```javascript + yarn create react-app my-diagram-app --template typescript + cd my-diagram-app + yarn start +``` +{% endhighlight %} +{% endtabs %} ### Adding Syncfusion packages @@ -52,65 +83,26 @@ All the available Essential JS 2 packages are published in [`Node Package Manage To install Diagram component, use the following command ```bash -npm install @syncfusion/ej2-react-diagrams –save +npm install @syncfusion/ej2-react-diagrams --save ``` ### Adding Style sheet to the Application -Add Diagram component's styles as given below in `App.css`. +The following CSS files are available in ../node_modules/@syncfusion package folder. This can be added as reference in `src/App.css`. ```css -@import "../node_modules/@syncfusion/ej2-diagrams/styles/material.css"; +@import "../node_modules/@syncfusion/ej2-react-diagrams/styles/material.css"; @import "../node_modules/@syncfusion/ej2-base/styles/material.css"; @import "../node_modules/@syncfusion/ej2-popups/styles/material.css"; @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css"; @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css"; ``` +>To refer App.css in the application, import it in the src/App.tsx file. `import './App.css';` -### Adding Diagram component to the Application - -* To include the Diagram component in application import the `DiagramComponent` from `ej2-react-diagrams` package. - -* Then add the Diagram component as shown in below code example. - -`[src/index.tsx]` - -```ts -import * as React from "react"; -import "./App.css"; -// import the DiagramComponent -import { DiagramComponent } from "@syncfusion/ej2-react-diagrams"; -export default function App() { - return ( - - ); -} -``` - -### Run the application - -Now run the `npm start` command in the console, it will run your application and open the browser window. - -``` -npm start -``` - -The below examples shows the basic Diagram component. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/diagram/getting-started/initialize-cs1/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/diagram/getting-started/initialize-cs1/app/index.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/diagram/getting-started/initialize-cs1" %} ## Module Injection -The diagram component is divided into individual feature-wise modules. In order to use a particular feature, inject the required module. The following list describes the module names and their description. +The diagram component is divided into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the App. The following list describes the module names and their description. * `BpmnDiagrams` - Inject this provider to add built-in BPMN Shapes to diagrams. * `ConnectorBridging` - Inject this provider to add bridges to connectors. @@ -126,12 +118,13 @@ The diagram component is divided into individual feature-wise modules. In order * `Snapping` - Inject this provider to Snap the objects. * `SymmetricLayout` - Inject this provider to render layout in symmetrical method. * `UndoRedo` - Inject this provider to revert and restore the changes. +* `Ej1Serialization` - Inject this provider to load ej1 diagram json in ej2 diagram. -These modules should be imported and injected into the Diagram component using `Diagram.Inject` method as follows. +These modules should be injected into the diagram using the **Inject** directive. ```javascript import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDOM from "react-dom/client"; import { DiagramComponent, HierarchicalTree, @@ -147,12 +140,14 @@ import { UndoRedo, LayoutAnimation, DiagramContextMenu, - ConnectorEditing + ConnectorEditing, + Ej1Serialization, + Inject } from "@syncfusion/ej2-react-diagrams"; export default function App() { return ( - + @@ -178,6 +174,70 @@ const root = ReactDOM.createRoot(document.getElementById("diagram")); root.render(); ``` +### Adding Diagram component to the Application + +* To include the Diagram component in application import the `DiagramComponent` from `ej2-react-diagrams` package. + +* Then add the Diagram component as shown in below code example. + +`[src/App.js]` + +```ts +import './App.css'; +import { DiagramComponent } from '@syncfusion/ej2-react-diagrams'; +function App() { + return ( +
    + +
    + ); +} +export default App; + +``` + +## Defining Basic Diagram + +The below examples shows the basic diagram component which renders an empty diagram. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/diagram/getting-started/initialize-cs1/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/diagram/getting-started/initialize-cs1/app/index.tsx %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/getting-started/initialize-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/diagram/getting-started/initialize-cs1" %} + + Now run the `npm start` command in the console, it will run your application and open the browser window. + +``` +npm start +``` + +## Basic Diagram elements + +* `Node`: Visualizes any graphical object using nodes, which can also be arranged and manipulated on a diagram page. +* `Connector`: Represents the relationship between two nodes. Three types of connectors provided as follows: + +``` + +1) Orthogonal +2) Bezier +3) Straight + +``` +* `Port`: Acts as the connection points of node or connector and allows you to create connections with only specific points. +* `Annotation`: Shows additional information by adding text or labels on nodes and connectors. + ## Flow Diagram ### Create and Add Node @@ -191,30 +251,85 @@ Create and add a `node` (JSON data) with specific position, size, label, and sha {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/diagram/getting-started/addnode-cs1/app/index.tsx %} {% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/getting-started/addnode-cs1/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/diagram/getting-started/addnode-cs1" %} -### Connect two Nodes with a Connector +### Apply shape and style to node + +Syncfusion diagram control provides support to render many built-in shapes in diagram. +Please refer to [`Shapes`](shapes) to know about built-in Shapes. + +The appearance of a node can be customized by changing its [`fill`](../api/diagram/shapeStyleModel#fill-string) color, [`strokeColor`](../api/diagram/shapeStyleModel#strokecolor-string), [`strokeWidth`](../api/diagram/shapeStyleModel#strokewidth-number), [`borderColor`](../api/diagram/node#borderColor-string), [`borderWidth`](../api/diagram/node#borderWidth-number), [`strokeDashArray`](../api/diagram/shapeStyleModel#strokeDashArray-number), [`opacity`](../api/diagram/shapeStyleModel#opacity-number), and [`shadow`](../api/diagram/shapeStyleModel#shadow-number). -Add two node to the diagram as shown in the previous example. Connect these nodes by adding a connector using the `connector` property and refer the source and target end by using the `sourceNode` and `targetNode` properties. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/diagram/getting-started/connectnode-cs1/app/index.jsx %} +{% include code-snippet/diagram/getting-started/apply-style/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/diagram/getting-started/connectnode-cs1/app/index.tsx %} +{% include code-snippet/diagram/getting-started/apply-style/app/index.tsx %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/getting-started/apply-style/index.html %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/diagram/getting-started/connectnode-cs1" %} + {% previewsample "page.domainurl/code-snippet/diagram/getting-started/apply-style" %} + +### Add other flowchart nodes to the diagram -Default values for all `nodes` and `connectors` can be set using the `getNodeDefaults` and `getConnectorDefaults` properties, respectively. For example, if all nodes have the same width and height, such properties can be moved into `getNodeDefaults`. +You can add multiple nodes with different shapes into diagram. -### Complete Flow Diagram +```Javascript -Similarly we can add required nodes and connectors to form a complete flow diagram. +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { DiagramComponent } from "@syncfusion/ej2-react-diagrams"; +export default function App() { + const nodes = [ + { + id: 'Start', width: 140, height: 70, offsetX: 300, offsetY: 100, + annotations: [{ + id: 'label1', + content: 'Start' + }], + shape: { type: 'Flow', shape: 'Terminator' }, + style:{fill:'skyblue',strokeColor:'skyblue',}, + }, + { + id: 'Process', width: 140, height: 70, offsetX: 300, offsetY: 200, + annotations: [{ + id: 'label1', + content: 'Process' + }], + shape: { type: 'Flow', shape: 'Process' }, + style:{fill:'skyblue',strokeColor:'skyblue',}, + }, + { + id: 'Decision', width: 140, height: 70, offsetX: 300, offsetY: 300, + annotations: [{ + id: 'label1', + content: 'Decision' + }], + shape: { type: 'Flow', shape: 'Decision' }, + style:{fill:'skyblue',strokeColor:'skyblue',}, + } + ]; + return (); +} +const root = ReactDOM.createRoot(document.getElementById("diagram")); +root.render(); + +``` + +### Connect flow chart nodes + +Connect these nodes by adding a connector using the [`connectors`](../api/diagram/connectorModel/) property of diagram and refer the source and target end by using the [`sourceID`](../api/diagram/connectorModel/#sourceid) and [`targetID`](../api/diagram/connectorModel/#targetid) properties. +The required nodes and connectors can be added to form a complete flow diagram. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -223,15 +338,21 @@ Similarly we can add required nodes and connectors to form a complete flow diagr {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.tsx %} {% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/getting-started/flowdiagram-cs1/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/diagram/getting-started/flowdiagram-cs1" %} + +Default values for all [`nodes`](../api/diagram/nodemodel/) and [`connectors`](../api/diagram/connectorModel/) can be set using the [`getNodeDefaults`](../api/diagram/#getnodedefaults) and [`getConnectorDefaults`](../api/diagram/#getconnectordefaults) properties, respectively. For example, if all nodes have the same width and height, such properties can be moved into `getNodeDefaults`. + ## Automatic Organization Chart In ‘Flow Diagram’ section we saw how to create a diagram manually, now let us see how to create and position diagram automatically. -### Business object (Employee information) +### Create Business object (Employee information) Define Employee Information as JSON data. The following code example shows an employee array whose, `Name` is used as an unique identifier and `ReportingPerson` is used to identify the person to whom an employee report to, in the organization. @@ -337,9 +458,9 @@ const root = ReactDOM.createRoot(document.getElementById("diagram")); root.render(); ``` -### Visualize employee +### Rendering layout with Datasource -Following code examples indicate how to define the default appearance of node and connector using default settings. +To create an organizational chart, the [`type`](../api/diagram/layout) of layout should be set as an `OrganizationalChart`. The following code example shows how DataManager is used to generate Layout based on the DataSourceSettings of the Diagram. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -348,8 +469,30 @@ Following code examples indicate how to define the default appearance of node an {% highlight ts tabtitle="index.tsx" %} {% include code-snippet/diagram/getting-started/orgchart-cs1/app/index.tsx %} {% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/getting-started/orgchart-cs1/index.html %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/diagram/getting-started/orgchart-cs1" %} + +### Customize employee appearance + +The following code examples indicate how to define the default appearance of nodes and connectors. The [`setNodeTemplate`](../api/diagram/#setnodetemplate) is used to update each node based on employee data. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/diagram/getting-started/orgchart-cs2/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/diagram/getting-started/orgchart-cs2/app/index.tsx %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/getting-started/orgchart-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/diagram/getting-started/orgchart-cs2" %} + > You can refer to our [React Diagram](https://www.syncfusion.com/react-components/react-diagram) feature tour page for its groundbreaking feature representations. You can also explore our [React Diagram example](https://ej2.syncfusion.com/react/demos/#/material/diagram/default-functionality) that shows how to render the Diagram in React. \ No newline at end of file diff --git a/ej2-react/diagram/group.md b/ej2-react/diagram/group.md index e8b9bdbbd..084d4c840 100644 --- a/ej2-react/diagram/group.md +++ b/ej2-react/diagram/group.md @@ -69,6 +69,23 @@ The following code illustrates how a group node is added at runtime. {% previewsample "page.domainurl/code-snippet/diagram/group/es5groupadd-cs1" %} +## Add collection of group nodes at runtime + +* The collection of group nodes can be dynamically added using 'addElements' method.Each time an element is added to the diagram canvas, the 'collectionChange' event will be triggered. + +The following code illustrates how to add a group nodes collection at runtime. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/diagram/group/es5groupaddatruntime-cs1/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/diagram/group/es5groupaddatruntime-cs1/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/group/es5groupaddatruntime-cs1" %} + ## Add children To group at runtime diff --git a/ej2-react/diagram/images/1after.png b/ej2-react/diagram/images/after.png similarity index 100% rename from ej2-react/diagram/images/1after.png rename to ej2-react/diagram/images/after.png diff --git a/ej2-react/diagram/images/0before.png b/ej2-react/diagram/images/before.png similarity index 100% rename from ej2-react/diagram/images/0before.png rename to ej2-react/diagram/images/before.png diff --git a/ej2-react/diagram/images/0.5center.png b/ej2-react/diagram/images/center.png similarity index 100% rename from ej2-react/diagram/images/0.5center.png rename to ej2-react/diagram/images/center.png diff --git a/ej2-react/diagram/images/connectionDirection1.png b/ej2-react/diagram/images/connectionDirection1.png new file mode 100644 index 000000000..8ba844517 Binary files /dev/null and b/ej2-react/diagram/images/connectionDirection1.png differ diff --git a/ej2-react/diagram/images/page_rotationreference.gif b/ej2-react/diagram/images/page_rotationreference.gif new file mode 100644 index 000000000..9cd22dd6c Binary files /dev/null and b/ej2-react/diagram/images/page_rotationreference.gif differ diff --git a/ej2-react/diagram/images/parent_rotationreference.gif b/ej2-react/diagram/images/parent_rotationreference.gif new file mode 100644 index 000000000..f1b691904 Binary files /dev/null and b/ej2-react/diagram/images/parent_rotationreference.gif differ diff --git a/ej2-react/diagram/labels.md b/ej2-react/diagram/labels.md index 8980b4980..db0b435c6 100644 --- a/ej2-react/diagram/labels.md +++ b/ej2-react/diagram/labels.md @@ -368,3 +368,23 @@ You can add any number of annotations to a node or connector. The following code ## Constraints The constraints property of annotation allows you to enable/disable certain annotation behaviors. For instance, you can disable annotation editing. + +## Annotation rotation + +The [rotationReference] property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure rotationReference for an annotation. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/diagram/annotations/es5Rotation-cs1/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/diagram/annotations/es5Rotation-cs1/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Rotation-cs1" %} + +| Value | Description | Image | +| -------- | -------- | -------- | +| Page | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![No_Rotation](images\page_rotationreference.gif) | +| Parent | In this case, the annotation rotates along with its parent node. | ![Rotation](images\parent_rotationreference.gif)| diff --git a/ej2-react/diagram/nodes.md b/ej2-react/diagram/nodes.md index fede3f49e..96baab421 100644 --- a/ej2-react/diagram/nodes.md +++ b/ej2-react/diagram/nodes.md @@ -55,6 +55,23 @@ The following code illustrates how to add a node. {% previewsample "page.domainurl/code-snippet/diagram/nodes/es5run-cs1" %} +## Add collection of nodes at runtime + +* The collection of nodes can be dynamically added using 'addElements' method.Each time an element is added to the diagram canvas, the 'collectionChange' event will be triggered. + +The following code illustrates how to add a nodes collection at run time. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/diagram/nodes/es5Node-cs8/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/diagram/nodes/es5Node-cs8/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/es5Node-cs8" %} + ## Add node from palette Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information diff --git a/ej2-react/diagram/ports.md b/ej2-react/diagram/ports.md index ee754d1b7..efda3c70e 100644 --- a/ej2-react/diagram/ports.md +++ b/ej2-react/diagram/ports.md @@ -273,3 +273,20 @@ The offset property of port is used to align the port based on fractions. 0 repr The constraints property allows to enable/disable certain behaviors of ports. For more information about port constraints, refer to [`Port Constraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/port#constraints-portconstraints). + +## Specify connection direction to port + +The [connectionDirection] property of a port allows users to specify the direction in which a connector should establish a connection. This can be either to the port (incoming) or from the port (outgoing). + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/diagram/ports/es5Connection/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/diagram/ports/es5Connection/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/diagram/ports/es5Connection" %} + + ![maxSegmentThumb](images\connectionDirection1.png) \ No newline at end of file diff --git a/ej2-react/diagram/user-handle.md b/ej2-react/diagram/user-handle.md index 5ba1482c7..60cdfe760 100644 --- a/ej2-react/diagram/user-handle.md +++ b/ej2-react/diagram/user-handle.md @@ -164,9 +164,9 @@ The following table shows all the possible alignments visually shows the fixed u | Offset | Alignment | Output | | -------- | -------- | -------- | -| 0 | Before |![fixed user handle for node](images/0before.png)| -| 0.5 | Center |![fixed user handle for node](images/0.5center.png)| -| 1 | After |![fixed user handle for node](images/1after.png)| +| 0 | Before |![fixed user handle for node](images/before.png)| +| 0.5 | Center |![fixed user handle for node](images/center.png)| +| 1 | After |![fixed user handle for node](images/after.png)| ### Displacement @@ -210,4 +210,19 @@ To show tooltip on mouse over, the [`tooltip`](https://ej2.syncfusion.com/react/ {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs2" %} \ No newline at end of file + {% previewsample "page.domainurl/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs2" %} + + ### Tooltip support for Fixed User Handle + +The diagram provides support to show tooltip when the mouse hovers over any fixed user handle. To show the tooltip on mouse over, the [`tooltip`](../api/diagram#tooltip) property of diagram model needs to be set with the tooltip [`content`](../api/diagram/diagramTooltip/#content) and [`position`](../api/diagram/diagramTooltip/#position) as shown in the following example. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs3" %} \ No newline at end of file diff --git a/ej2-react/drop-down-list/virtual-scroll.md b/ej2-react/drop-down-list/virtual-scroll.md index d8f4fd0c2..e0c84bdaf 100644 --- a/ej2-react/drop-down-list/virtual-scroll.md +++ b/ej2-react/drop-down-list/virtual-scroll.md @@ -42,7 +42,7 @@ In the following example, `id` column and `text` column from complex data have b ## Binding remote data -The DropDownList supports retrieval of data from remote data services with the help of `DataManager` component. When using remote data, it initially fetches all the data from the server, triggering the `actionBegin` and `actionComplete` events, and then stores the data locally. During virtual scrolling, additional data is retrieved from the locally stored data, triggering the `actionBegin` and `actionComplete` events at that time as well. +The DropDownList supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well. The following sample displays the OrderId from the `Orders` Data Service. diff --git a/ej2-react/multi-select/virtual-scroll.md b/ej2-react/multi-select/virtual-scroll.md index 0b0de21a8..efee03a30 100644 --- a/ej2-react/multi-select/virtual-scroll.md +++ b/ej2-react/multi-select/virtual-scroll.md @@ -1,6 +1,6 @@ --- layout: post -title: Virtualization in React Drop MultiSelect Dropdown component | Syncfusion +title: Virtualization in React MultiSelect Dropdown component | Syncfusion description: Learn here all about Virtualization in Syncfusion React MultiSelect Dropdown component of Syncfusion Essential JS 2 and more. control: Virtualization platform: ej2-react @@ -39,7 +39,7 @@ In the following example, `id` column and `text` column from complex data have b ## Binding remote data -The MultiSelect supports retrieval of data from remote data services with the help of `DataManager` component. When using remote data, it initially fetches all the data from the server, triggering the `actionBegin` and `actionComplete` events, and then stores the data locally. During virtual scrolling, additional data is retrieved from the locally stored data, triggering the `actionBegin` and `actionComplete` events at that time as well. +The MultiSelect supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well. The following sample displays the OrderId from the `Orders` Data Service. @@ -133,7 +133,7 @@ The following sample shows the example for checkbox with Virtualization. ## Custom value with virtualization -The MultiSelect component supports custom valie with Virtualization. When the [`allowCustomValue`](../api/multi-select/#allowcustomvalue) property is enabled, the MultiSelect enables users to include a new option not currently available in the component value. Upon selecting this newly added custom value, the MultiSelect triggers the [`customValueSelection`](../api/multi-select/#customvalueselection) event and also custom value will be added to the end of the complete list. +The MultiSelect component supports custom value with Virtualization. When the [`allowCustomValue`](../api/multi-select/#allowcustomvalue) property is enabled, the MultiSelect enables users to include a new option not currently available in the component value. Upon selecting this newly added custom value, the MultiSelect triggers the [`customValueSelection`](../api/multi-select/#customvalueselection) event and also custom value will be added to the end of the complete list. The following sample shows the example for custom value with Virtualization. diff --git a/ej2-react/otp-input/accessibility.md b/ej2-react/otp-input/accessibility.md new file mode 100644 index 000000000..cabc1b7b2 --- /dev/null +++ b/ej2-react/otp-input/accessibility.md @@ -0,0 +1,101 @@ +--- +layout: post +title: Accessibility in React OTP Input component | Syncfusion +description: Learn here all about Accessibility in Syncfusion React OTP Input component of Syncfusion Essential JS 2 and more. +platform: ej2-react +control: OTP Input +documentation: ug +domainurl: ##DomainURL## +--- + +# Accessibility in React OTP Input component + +The OTP Input component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. + +The accessibility compliance for the OTP Input component is outlined below. + +| Accessibility Criteria | Compatibility | +| -- | -- | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | +| [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | +| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | +| [Color Contrast](../common/accessibility#color-contrast) | Yes | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | +| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | Yes | +| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | + + +
    Yes - All features of the control meet the requirement.
    + +
    Intermediate - Some features of the control do not meet the requirement.
    + +
    No - The control does not meet the requirement.
    + +## WAI-ARIA attributes + +The following ARIA attributes are used in the OTP Input component: + +| Attributes | Purpose | +| ------------ | ----------------------- | +| `role=group` | Attributes used to form a collection of items.| +| `aria-label` | Attributes provides the text label for the OTP Inputs. | + +## Keyboard interaction + +The following keyboard shortcuts are supported by the OTP Input component. + +| **Press** | **To do this** | +| --- | --- | +| Left Arrow | Focuses the previous input in the OTP. | +| Right Arrow | Focuses the next input in OTP | +| Tab | Moves the initial focus and shifts focus to the next input of the OTP. | +| Shift + Tab | Moves the focus to the previous input of the OTP. | + +## Ensuring accessibility + +The OTP Input component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. + +## See also + +* [Accessibility in Syncfusion React controls](../common/accessibility) + +## HtmlAttributes + +HtmlAttributes allow you to specify additional HTML attributes to be applied to the OTP input component. These attributes provide extra customization and control over the behavior and appearance of the OTP input fields. + +You can pass HTML attributes as key-value pairs to the [htmlAttributes](https://ej2.syncfusion.com/react/documentation/api/otp-input/#htmlattributes) property. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/accessibility/htmlAttributes/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/accessibility/htmlAttributes/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/accessibility/htmlAttributes" %} + +## AriaLabels + +AriaLabels define the ARIA-label attribute for each input field in the OTP input component. ARIA-labels enhance accessibility by providing descriptive labels for screen reader users, improving the user experience for individuals with disabilities. + +You can provide an array of strings as ARIA-labels to the [ariaLabels](https://ej2.syncfusion.com/react/documentation/api/otp-input/#arialabels) property. Each string corresponds to the ARIA-label attribute for the respective input field in the OTP input component. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/accessibility/ariaLabels/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/accessibility/ariaLabels/app/index.jsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/accessibility/ariaLabels" %} diff --git a/ej2-react/otp-input/appearance.md b/ej2-react/otp-input/appearance.md new file mode 100644 index 000000000..14e51f2f0 --- /dev/null +++ b/ej2-react/otp-input/appearance.md @@ -0,0 +1,66 @@ +--- +layout: post +title: Appearance in React OTP Input component | Syncfusion +description: Learn here all about Appearance in Syncfusion React OTP Input component of Syncfusion Essential JS 2 and more. +platform: ej2-react +control: OTP Input +documentation: ug +domainurl: ##DomainURL## +--- + +# Appearance in React OTP Input component + +You can also customize the appearance of OTP Input component. + +## Setting input length + +You can specify the length of OTP by using the [length](https://ej2.syncfusion.com/react/documentation/api/otp-input/#length) property. The default value is `4`. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/appearance/length/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/appearance/length/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/appearance/length" %} + +## Disable inputs + +You can disable the OTP Input control by using the [disabled](https://ej2.syncfusion.com/react/documentation/api/otp-input/#disabled) property. By default the value is `false`. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/appearance/disabled/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/appearance/disabled/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/appearance/disabled" %} + +## CssClass + +You can customize the appearance of the OTP Input component, such as by changing its colors, fonts, sizes or other visual aspects by using the [cssClass](https://ej2.syncfusion.com/react/documentation/api/otp-input/#cssclass) property. + +The OTP input component supports the following predefined styles that can be defined using the `cssClass` property. You can customize by replacing the `cssClass` property with the below defined class names. + +| cssClass | Description | +| -------- | -------- | +| `e-success` | Used to represent a positive action. | +| `e-warning` | Used to represent an action with caution. | +| `e-error` | Used to represent a negative action. | + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/appearance/cssClass/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/appearance/cssClass/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/appearance/cssClass" %} diff --git a/ej2-react/otp-input/events.md b/ej2-react/otp-input/events.md new file mode 100644 index 000000000..7396cf30f --- /dev/null +++ b/ej2-react/otp-input/events.md @@ -0,0 +1,91 @@ +--- +layout: post +title: Events in React OTP Input component | Syncfusion +description: Learn here all about Events in Syncfusion React OTP Input component of Syncfusion Essential JS 2 and more. +platform: ej2-react +control: OTP Input +documentation: ug +domainurl: ##DomainURL## +--- + +# Events in React OTP Input component + +This section describes the OTP Input events that will be triggered when appropriate actions are performed. The following events are available in the OTP Input component. + +## created + +The OTP Input component triggers the [created](https://ej2.syncfusion.com/react/documentation/api/otp-input/#created) event when the component rendering is completed. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/events/created/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/events/created/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +## focus + +The OTP Input component triggers the [focus](https://ej2.syncfusion.com/react/documentation/api/otp-input/#focus) event when the OTP Input is focused. The [OtpFocusEventArgs](https://ej2.syncfusion.com/react/documentation/api/otp-input/otpFocusEventArgs/) passed as an event argument provides the details of the focus event. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/events/focus/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/events/focus/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +## blur + +The OTP Input component triggers the [blur](https://ej2.syncfusion.com/react/documentation/api/otp-input/#blur) event when the OTP input is focused out. The [OtpFocusEventArgs](https://ej2.syncfusion.com/react/documentation/api/otp-input/otpFocusEventArgs/) passed as an event argument provides the details of the blur event. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/events/blur/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/events/blur/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +## input + +The OTP Input component triggers the [input](https://ej2.syncfusion.com/react/documentation/api/otp-input/#input) event when the value of each OTP Input is changed. The [OtpInputEventArgs](https://ej2.syncfusion.com/react/documentation/api/otp-input/otpInputEventArgs/) passed as an event argument provides the details of the each value is changed. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/events/input/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/events/input/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +## valueChanged + +The OTP Input control triggers the [valueChanged](https://ej2.syncfusion.com/react/documentation/api/otp-input/#valuechanged) event when the value of the OTP Input is changed and matching the OTP Input length. The [OtpChangedEventArgs](https://ej2.syncfusion.com/react/documentation/api/otp-input/otpChangedEventArgs/) passed as an event argument provides the details when value is changed. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/events/valueChanged/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/events/valueChanged/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +Below example demonstrates the valueChanged event of the OTP Input control. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/events/valueChangedEvent/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/events/valueChangedEvent/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/events/valueChangedEvent" %} diff --git a/ej2-react/otp-input/getting-started.md b/ej2-react/otp-input/getting-started.md index febf22cdf..33e9aaf63 100644 --- a/ej2-react/otp-input/getting-started.md +++ b/ej2-react/otp-input/getting-started.md @@ -2,7 +2,7 @@ layout: post title: Getting started with React OTP Input component | Syncfusion description: Checkout and learn about Getting started with React OTP Input component of Syncfusion Essential JS 2 and more details. -control: Getting started +control: OTP Input platform: ej2-react documentation: ug domainurl: ##DomainURL## diff --git a/ej2-react/otp-input/input-types.md b/ej2-react/otp-input/input-types.md new file mode 100644 index 000000000..d63438ffc --- /dev/null +++ b/ej2-react/otp-input/input-types.md @@ -0,0 +1,75 @@ +--- +layout: post +title: Input Types in React OTP Input component | Syncfusion +description: Checkout and learn about Input Types with React OTP Input component of Syncfusion Essential JS 2 and more. +platform: ej2-react +control: OTP Input +documentation: ug +domainurl: ##DomainURL## +--- + +# Input Types in React OTP Input component + +## Types + +This section explains the the various types of OTP (One-Time Password) input controls, explaining their default behaviors and appropriate use cases. + +### Number type + +You can set the [type](https://ej2.syncfusion.com/react/documentation/api/otp-input/#type) property to [number](https://ej2.syncfusion.com/react/documentation/api/otp-input/otpInputType/) to use this input type as number. This is ideal for OTP input scenarios with numeric-only codes. By default `type` property is `number`. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/input-types/number/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/input-types/number/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/input-types/number" %} + +### Text type + +You can set the [type](https://ej2.syncfusion.com/react/documentation/api/otp-input/#type) property to [text](https://ej2.syncfusion.com/react/documentation/api/otp-input/otpInputType/) to use this input type as text. This is suitable when the OTP input need to include both letters and numbers. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/input-types/text/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/input-types/text/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/input-types/text" %} + +### Password type + +You can set the [type](https://ej2.syncfusion.com/react/documentation/api/otp-input/#type) property to [password](https://ej2.syncfusion.com/react/documentation/api/otp-input/otpInputType/) to use this input type as password in the OTP Input. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/input-types/password/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/input-types/password/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/input-types/password" %} + +## Value + +You can specify the value of OTP Input by using the [value](https://ej2.syncfusion.com/react/documentation/api/otp-input/#value) property. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/input-types/value/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/input-types/value/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/input-types/value" %} diff --git a/ej2-react/otp-input/placeholder.md b/ej2-react/otp-input/placeholder.md new file mode 100644 index 000000000..dddca64bf --- /dev/null +++ b/ej2-react/otp-input/placeholder.md @@ -0,0 +1,39 @@ +--- +layout: post +title: Placeholder in React OTP Input component | Syncfusion +description: Checkout and learn about Placeholder with React OTP Input component of Syncfusion Essential JS 2 and more. +platform: ej2-react +control: OTP Input +documentation: ug +domainurl: ##DomainURL## +--- + +# Placeholder in React OTP Input component + +The placeholder in OTP Input specifies the text that is shown as a hint or placeholder until the user enters a value in the input field. It acts as a guidance for the users regarding the expected input format or purpose of the input field. + +You can set the placeholder text by using the [placeholder](https://ej2.syncfusion.com/react/documentation/api/otp-input/#placeholder) property. Additionally, when providing a single character as the placeholder value all input fields within the OTP Input component will display the same character. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/placeholder/placeholder_char/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/placeholder/placeholder_char/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/placeholder/placeholder_char" %} + +When a placeholder with multiple placeholder characters is provided each input field will display characters from the placeholder string in sequence based on the available OTP input length. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/placeholder/placeholder_string/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/placeholder/placeholder_string/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/placeholder/placeholder_string" %} diff --git a/ej2-react/otp-input/separator.md b/ej2-react/otp-input/separator.md new file mode 100644 index 000000000..012f5af5c --- /dev/null +++ b/ej2-react/otp-input/separator.md @@ -0,0 +1,24 @@ +--- +layout: post +title: Separator in React OTP Input component | Syncfusion +description: Checkout and learn about Separator with React OTP Input component of Syncfusion Essential JS 2 and more. +platform: ej2-react +control: OTP Input +documentation: ug +domainurl: ##DomainURL## +--- + +# Separator in React OTP Input component + +The separator in OTP Input specifies the character or symbol used to separate each input field in the OTP Input component. This separator is displayed between each input field to visually distinguish between each inputs. You can set the separator character by using the [separator](https://ej2.syncfusion.com/react/documentation/api/otp-input/#separator) property. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/separator/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/separator/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/separator" %} diff --git a/ej2-react/otp-input/styling-modes.md b/ej2-react/otp-input/styling-modes.md new file mode 100644 index 000000000..58fc3380e --- /dev/null +++ b/ej2-react/otp-input/styling-modes.md @@ -0,0 +1,58 @@ +--- +layout: post +title: Styling Modes in React OTP Input component | Syncfusion +description: Checkout and learn about Styling Modes with React OTP Input component of Syncfusion Essential JS 2 and more. +platform: ej2-react +control: OTP Input +documentation: ug +domainurl: ##DomainURL## +--- + +# Styling Modes in React OTP Input component + +Styling modes specify the style variants for the input fields in the OTP Input component. These modes allows you to customize the appearance of the OTP input fields. + +## Outline mode + +You can use the outline style by setting the [stylingMode](https://ej2.syncfusion.com/react/documentation/api/otp-input/#stylingmode) property to [outlined](https://ej2.syncfusion.com/react/documentation/api/otp-input/otpInputStyle/). The default styling mode is `outlined`. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/styling-modes/outlined/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/styling-modes/outlined/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/styling-modes/outlined" %} + +## Filled mode + +You can use the filled style by setting the [stylingMode](https://ej2.syncfusion.com/react/documentation/api/otp-input/#stylingmode) property to [filled](https://ej2.syncfusion.com/react/documentation/api/otp-input/otpInputStyle/). + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/styling-modes/filled/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/styling-modes/filled/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/styling-modes/filled" %} + +## Underline mode + +You can use the underline style by setting the [stylingMode](https://ej2.syncfusion.com/react/documentation/api/otp-input/#stylingmode) property to [underlined](https://ej2.syncfusion.com/react/documentation/api/otp-input/otpInputStyle/). + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/otp-input/styling-modes/underlined/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/otp-input/styling-modes/underlined/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/otp-input/styling-modes/underlined" %} diff --git a/ej2-react/pdfviewer/images/copy.gif b/ej2-react/pdfviewer/images/copy.gif new file mode 100644 index 000000000..873be152b Binary files /dev/null and b/ej2-react/pdfviewer/images/copy.gif differ diff --git a/ej2-react/pdfviewer/images/delete.gif b/ej2-react/pdfviewer/images/delete.gif new file mode 100644 index 000000000..c42870a36 Binary files /dev/null and b/ej2-react/pdfviewer/images/delete.gif differ diff --git a/ej2-react/pdfviewer/images/insert.gif b/ej2-react/pdfviewer/images/insert.gif new file mode 100644 index 000000000..a001f23c8 Binary files /dev/null and b/ej2-react/pdfviewer/images/insert.gif differ diff --git a/ej2-react/pdfviewer/images/organize-page.png b/ej2-react/pdfviewer/images/organize-page.png new file mode 100644 index 000000000..b43b9d5d4 Binary files /dev/null and b/ej2-react/pdfviewer/images/organize-page.png differ diff --git a/ej2-react/pdfviewer/images/rearrange.gif b/ej2-react/pdfviewer/images/rearrange.gif new file mode 100644 index 000000000..fa1cc50ff Binary files /dev/null and b/ej2-react/pdfviewer/images/rearrange.gif differ diff --git a/ej2-react/pdfviewer/images/rotate.gif b/ej2-react/pdfviewer/images/rotate.gif new file mode 100644 index 000000000..e8b9017dc Binary files /dev/null and b/ej2-react/pdfviewer/images/rotate.gif differ diff --git a/ej2-react/pdfviewer/images/selectall.gif b/ej2-react/pdfviewer/images/selectall.gif new file mode 100644 index 000000000..435e2649a Binary files /dev/null and b/ej2-react/pdfviewer/images/selectall.gif differ diff --git a/ej2-react/pdfviewer/images/undo-redo.gif b/ej2-react/pdfviewer/images/undo-redo.gif new file mode 100644 index 000000000..75c209669 Binary files /dev/null and b/ej2-react/pdfviewer/images/undo-redo.gif differ diff --git a/ej2-react/pdfviewer/organize-pdf.md b/ej2-react/pdfviewer/organize-pdf.md index 25a9a6304..56afb790b 100644 --- a/ej2-react/pdfviewer/organize-pdf.md +++ b/ej2-react/pdfviewer/organize-pdf.md @@ -16,6 +16,8 @@ The PDF Viewer allows you to manage your PDF documents efficiently by organizing To access the organize pages feature, simply open the PDF document in the PDF Viewer and navigate to the left vertical toolbar. Look for the `Organize Pages` option to begin utilizing these capabilities. +![Alt text](images/organize-page.png) + The page organization support enables you to perform various actions such as rotating, rearranging, inserting, copying, and deleting pages within a PDF document using organize pages dialog. ### Rotating PDF pages @@ -25,12 +27,16 @@ You can adjust the orientation of PDF pages to ensure proper alignment. The rota * `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise. * `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise. +![Alt text](images/rotate.gif) + ### Rearranging PDF pages You can easily change the sequence of pages within your document using the drag and drop method: * `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order. +![Alt text](images/rearrange.gif) + ### Inserting new pages Effortlessly add new pages to your document with the following options: @@ -38,6 +44,8 @@ Effortlessly add new pages to your document with the following options: * `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon. * `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon. +![Alt text](images/insert.gif) + ### Deleting PDF pages Removing unwanted pages from your document is straight forward: @@ -45,16 +53,22 @@ Removing unwanted pages from your document is straight forward: * `Select pages to delete`: Click on the page thumbnails you wish to remove. You can select multiple pages at once. * `Delete selected pages`: Use the delete option in the organize pages pane to remove the selected pages from the document. +![Alt text](images/delete.gif) + ### Copying PDF pages Duplicate the pages within your PDF document effortlessly: * `Select pages to copy`: Click on the page thumbnails you wish to duplicate. Use the copy option to create duplicates. When a page is copied, the duplicate is automatically added to the right of the selected page. Multiple copies can be made using the toolbar action. +![Alt text](images/copy.gif) + ### Selecting all pages Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document. +![Alt text](images/selectall.gif) + ### Real-time updates Witness instant changes in page organization reflected within the PDF Viewer. Simply click the **Save** button to preserve your modifications. @@ -308,6 +322,8 @@ The following keyboard shortcuts are available at the organize pages dialog. * **Ctrl+Z** : Undo the last action performed. * **Ctrl+Y** : Redo the action that was undone +![Alt text](images/undo-redo.gif) + #### Conclusion With the Organize Pages feature in the PDF Viewer, managing your PDF documents has never been easier. Whether you are adding new content, adjusting page orientation, moving the pages, duplicating the pages, or removing unnecessary pages, this feature provides the tools you need to streamline your document management workflow. Explore these capabilities today and take control of your PDF documents with ease!