Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactoring , create Component OpenInCodepeio

Browse Source
This commit is contained in:
dialmedu 2023-11-26 23:44:57 -05:00
parent 3a6a5f8632
commit b093a8f79e
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.tsx
View File

@ -323,7 +323,7 @@ function App() {
> >
Copy Code <FaCopy className="ml-2" /> Copy Code <FaCopy className="ml-2" />
</span> </span>
<OpenInCodepenio code={generatedCode} ></OpenInCodepenio> <OpenInCodepenio code={generatedCode} onDoOpen={()=>toast.success("Opening codepen.io, enable redirect permission")} ></OpenInCodepenio>
</div> </div>
<CodeMirror <CodeMirror
code={generatedCode} code={generatedCode}

7
frontend/src/components/OpenInCodepenio.tsx
View File

@ -31,8 +31,9 @@ interface Library {
* @param { OpenInCodepenioProps } props * @param { OpenInCodepenioProps } props
* @property {string} code - this generated code. * @property {string} code - this generated code.
* @property {Function} onDoOpen - handle after open and redirect to Codepen Editor * @property {Function} onDoOpen - handle after open and redirect to Codepen Editor
* @property {Record} libraries - add support diferent tecnologies adding css, js libraries * @property {Function} libraries[SupportType].css: [array style sheets libraries]
* to css_external and js_external atributte of Codepen Editor. * @property {Function} libraries[SupportType].js: [array javascript libraries]
* @property {Function} libraries[SupportType].validate: return Boolean the result of custom validating
*/ */
class OpenInCodepenio extends Component<OpenInCodepenioProps> { class OpenInCodepenio extends Component<OpenInCodepenioProps> {
@ -62,7 +63,7 @@ class OpenInCodepenio extends Component<OpenInCodepenioProps> {
getExternalLibraries = (type: LibraryType): string => { getExternalLibraries = (type: LibraryType): string => {
let library: string[] = [] let library: string[] = []
const { code, support = SupportType.HTML } = this.props; const { code, support = SupportType.HTML } = this.props;
debugger
Object.values(this.libraries).forEach((value: Library) => { Object.values(this.libraries).forEach((value: Library) => {
if( value.validate(support, code)){ if( value.validate(support, code)){
library = value[type] library = value[type]