-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
and fix some bugs
- Loading branch information
Tien Dao
authored
Nov 16, 2022
1 parent
45c501d
commit ff1d1a2
Showing
68 changed files
with
3,359 additions
and
563 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import clsx from 'clsx' | ||
|
|
||
| /*** | ||
| * @param textCopy text copy into clipboard | ||
| * @param textTitle text show on screen | ||
| * @param onCopy trigger event copy | ||
| * @param iconCopy only copy when user click on icon | ||
| */ | ||
| interface Props { | ||
| classes?: string | ||
| onClose: Function | ||
| } | ||
|
|
||
| const CloseButton = ({ classes, onClose }: Props) => { | ||
| const onClick = (e: any) => { | ||
| e.preventDefault() | ||
| onClose() | ||
| } | ||
|
|
||
| return ( | ||
| <a onClick={onClick} className={clsx('link block-hor-center', classes)}> | ||
| <span className={clsx('pointer icon-close text text-base contrast-color-100')} /> | ||
| </a> | ||
| ) | ||
| } | ||
|
|
||
| export default CloseButton |
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,25 @@ | ||
| import CopyButton from 'components/Button/CopyButton' | ||
| import Prism from 'prismjs' | ||
| import 'prismjs/components/prism-gettext' | ||
| import { useEffect } from 'react' | ||
|
|
||
| interface Props { | ||
| code: string | ||
| filename: string | ||
| } | ||
|
|
||
| const AutoLanguageView = ({ code, filename }: Props) => { | ||
| useEffect(() => { | ||
| Prism.highlightAll() | ||
| }, []) | ||
| return ( | ||
| <div className="margin-bottom-xl"> | ||
| <CopyButton textCopy={code} textTitle={filename} classes="margin-bottom-sm" /> | ||
| <pre style={{ maxHeight: 500 }}> | ||
| <code className="language-gettext">{code}</code> | ||
| </pre> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default AutoLanguageView |
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,25 @@ | ||
| import CopyButton from 'components/Button/CopyButton' | ||
| import Prism from 'prismjs' | ||
| import 'prismjs/components/prism-json' | ||
| import { useEffect } from 'react' | ||
|
|
||
| interface Props { | ||
| code: string | ||
| filename: string | ||
| } | ||
|
|
||
| const JsonView = ({ code, filename }: Props) => { | ||
| useEffect(() => { | ||
| Prism.highlightAll() | ||
| }, []) | ||
| return ( | ||
| <div className="margin-bottom-xl"> | ||
| <CopyButton textCopy={code} textTitle={filename} classes="margin-bottom-sm" /> | ||
| <pre style={{ maxHeight: 500 }}> | ||
| <code className="language-json">{code}</code> | ||
| </pre> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default JsonView |
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,25 @@ | ||
| import CopyButton from 'components/Button/CopyButton' | ||
| import Prism from 'prismjs' | ||
| import 'prismjs/components/prism-solidity' | ||
| import { useEffect } from 'react' | ||
|
|
||
| interface Props { | ||
| code: string | ||
| filename: string | ||
| } | ||
|
|
||
| const SolidityView = ({ code, filename }: Props) => { | ||
| useEffect(() => { | ||
| Prism.highlightAll() | ||
| }, []) | ||
| return ( | ||
| <div className="margin-bottom-xl"> | ||
| <CopyButton textCopy={code} textTitle={filename} classes="margin-bottom-sm" /> | ||
| <pre style={{ maxHeight: 500 }}> | ||
| <code className="language-solidity">{code}</code> | ||
| </pre> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default SolidityView |
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,104 @@ | ||
| import clsx from 'clsx' | ||
| import { useEffect, useRef, useState } from 'react' | ||
| import styles from './style.module.scss' | ||
|
|
||
| /** | ||
| * @param label | ||
| * @param inputInfo: Caption text, description, error notification | ||
| * * icon: font icon | ||
| * * type: default normal | ||
| * | ||
| */ | ||
| export interface TextAreaProps | ||
| extends React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> { | ||
| label?: React.ReactNode | ||
| inputInfo?: { | ||
| icon?: string | ||
| text: React.ReactNode | ||
| type?: 'error' | 'normal' | ||
| } | ||
| statusType?: 'error' | 'normal' | ||
| classes?: { | ||
| wapper?: string | ||
| label?: string | ||
| inputFont?: string | ||
| inputWrapperPadding?: string | ||
| } | ||
| } | ||
| export default function TextArea({ | ||
| label, | ||
| statusType, | ||
| classes, | ||
| inputInfo, | ||
| disabled, | ||
| readOnly, | ||
| onChange, | ||
| ...rest | ||
| }: TextAreaProps) { | ||
| const [_focus, _setFocus] = useState(false) | ||
| const inputWrapperRef = useRef<HTMLTextAreaElement>(null) | ||
|
|
||
| useEffect(() => { | ||
| if (inputWrapperRef) { | ||
| inputWrapperRef.current?.addEventListener('focusin', _focusin, true) | ||
| inputWrapperRef.current?.addEventListener('focusout', _focusout, true) | ||
| } | ||
| return () => { | ||
| if (inputWrapperRef) { | ||
| inputWrapperRef.current?.removeEventListener('focusin', _focusin) | ||
| inputWrapperRef.current?.removeEventListener('focusout', _focusout) | ||
| } | ||
| } | ||
| }, [inputWrapperRef]) | ||
|
|
||
| const _focusin = () => { | ||
| _setFocus(true) | ||
| } | ||
| const _focusout = () => { | ||
| _setFocus(false) | ||
| } | ||
|
|
||
| return ( | ||
| <div className={clsx(classes?.wapper, 'flex flex-column margin-bottom-md')}> | ||
| {label ? ( | ||
| <span className={classes?.label || 'text text-base contrast-color-70 padding-bottom-xs work-break-all'}> | ||
| {label} | ||
| </span> | ||
| ) : null} | ||
| <textarea | ||
| {...rest} | ||
| onChange={onChange} | ||
| disabled={disabled} | ||
| readOnly={readOnly} | ||
| ref={inputWrapperRef} | ||
| className={clsx( | ||
| styles.textAreaWrapper, | ||
| 'width-100 flex', | ||
| 'contrast-bg-color-10', | ||
| 'contrast-color-100', | ||
| classes?.inputWrapperPadding || 'padding-left-sm padding-right-sm padding-top-xs padding-bottom-xs', | ||
| 'radius-lg', | ||
| 'border border-base', | ||
| 'width-100', | ||
| 'text text-base', | ||
| { | ||
| [styles.inputError]: statusType === 'error', | ||
| [styles.inputDisabled]: disabled, | ||
| [styles.focus]: !disabled && _focus | ||
| } | ||
| )} | ||
| /> | ||
| {inputInfo ? ( | ||
| <div | ||
| className={clsx('text text-base margin-top-xs word-break-all', { | ||
| 'contrast-color-70': inputInfo.type !== 'error', | ||
| 'alert-color-error': inputInfo.type === 'error' | ||
| })} | ||
| > | ||
| {inputInfo.icon ? <span className={clsx(inputInfo.icon, 'margin-right-xs')}></span> : null} | ||
| <span>{inputInfo.text}</span> | ||
| </div> | ||
| ) : null} | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.