-
-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #310 from ashik-75/work
add svg & qrcode
- Loading branch information
Showing
17 changed files
with
369 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { Card, Form, Input } from "antd"; | ||
| import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy"; | ||
| import PageGrid from "components/Layouts/PageGrid"; | ||
| import React, { ChangeEvent, useState } from "react"; | ||
| import { combineSVGPaths } from "./utils/helper"; | ||
|
|
||
| const { TextArea } = Input; | ||
|
|
||
| const SvgFormatter: React.FC = () => { | ||
| const [value, setValue] = useState(""); | ||
| const [outputSVG, setOutputSVG] = useState<string>(""); | ||
|
|
||
| const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => { | ||
| const newValue = e.target.value; | ||
| setValue(newValue); | ||
|
|
||
| const combinedSvgOutput = combineSVGPaths(newValue); | ||
| setOutputSVG(combinedSvgOutput); | ||
| }; | ||
| return ( | ||
| <PageGrid> | ||
| <Card> | ||
| <Form layout="vertical"> | ||
| <Form.Item label="Svg Input"> | ||
| <TextArea | ||
| placeholder="Enter svg value" | ||
| value={value} | ||
| rows={10} | ||
| onChange={handleChange} | ||
| data-gramm={false} | ||
| allowClear | ||
| /> | ||
| </Form.Item> | ||
| </Form> | ||
| </Card> | ||
|
|
||
| {outputSVG && ( | ||
| <Card> | ||
| <CodeHighlightWithCopy | ||
| language="css" | ||
| codeString={outputSVG} | ||
| /> | ||
| </Card> | ||
| )} | ||
| </PageGrid> | ||
| ); | ||
| }; | ||
|
|
||
| export default SvgFormatter; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| function combineSVGPaths(svgInput: string): string { | ||
| try { | ||
| const parser = new DOMParser(); | ||
| const svgDocument = parser.parseFromString(svgInput, "image/svg+xml"); | ||
|
|
||
| const pathElements = svgDocument.querySelectorAll("path"); | ||
|
|
||
| if (pathElements.length === 0) { | ||
| throw new Error("No <path> elements found in the SVG."); | ||
| } | ||
|
|
||
| const pathDataArray = Array.from(pathElements).map((path) => | ||
| path.getAttribute("d") | ||
| ); | ||
|
|
||
| const combinedPathData = pathDataArray.join("\n"); | ||
| const svgElement = svgDocument.querySelector("svg"); | ||
|
|
||
| if (svgElement) { | ||
| svgElement.innerHTML = `<path d="${combinedPathData}" stroke="#F0F" />`; | ||
| } else { | ||
| throw new Error("<svg> element not found in the SVG."); | ||
| } | ||
|
|
||
| const serializer = new XMLSerializer(); | ||
| const combinedSVGString = serializer.serializeToString(svgDocument); | ||
|
|
||
| return combinedSVGString; | ||
| } catch (error) { | ||
| console.error(error); | ||
| return "Error combining SVG paths."; | ||
| } | ||
| } | ||
|
|
||
| export { combineSVGPaths }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| .qrcode { | ||
| &__label { | ||
| display: flex; | ||
| width: 100vw; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| &__output { | ||
| height: 266px; | ||
| &__result, | ||
| &__notfound { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| &__notfound { | ||
| height: 200px; | ||
| text-align: center; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.