Grasscutters/Cultivation
1
0
Fork 0
mirror of https://github.com/Grasscutters/Cultivation.git synced 2024-11-26 21:30:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix reusable react components duplicate id... dumbass

Browse Source
This commit is contained in:
TukanDev 2022-07-04 04:14:35 +02:00
parent 29716c43b6
commit 9ea92a23ee
11 changed files with 32 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
docs/elementIds.md
View File

@ -35,10 +35,6 @@
| `#latest_version` | News tabs for latest version button |
| `#newsContent` | Content section of news container |
| `#newsCommitsTable` | Commits table of news section |
| `#mewsCommitsAuthor` | Commit author of commit |
| `#newsCommitsCommitMessage` | Commit message of commit |
| `#dividerContainer` | Container for divider line |
| `#dividerLine` | Divider line |
| `#downloadMenuContainerGCStable` | Grasscutter stable update container |
| `#downloadMenuLabelGCStable` | Label for stable update button |
| `#downloadMenuButtonGCStable` | Button container for stable update button |
@ -95,35 +91,4 @@
| `#menuOptionsSelectMenuLang` | Language select menu |
| `#DownloadProgress` | Download progress container |
| `#bottomSectionContainer` | Bottom section container |
| `#miniDownloadContainer` | Container for mini download |
| `#commonBigButtonContent` | Content of big button component |
| `#commonCheckboxContainer` | Container of common Checkbox component |
| `#commonCheckboxLabel` | Label of common checkbox |
| `#commonCheckboxDisplay` | is checked? section of common checkbox |
| `#commonDirInputContainer` | Container of DirInput component |
| `#commonDirInputText` | Text of DirInput component |
| `#commonDirInputFileSelContainer` | DirInput file selector container |
| `#commonDirInputFileSelIcon` | DirInput file selector icon |
| `#commonDownloadSectionContainer` | DownloadSection component container |
| `#commonDownloadSectionTitle` | Title of download section |
| `#commonDownloadSectionPath` | Path of the download section |
| `#commonDownloadSectionSize` | File size of download section's file |
| `#commonDownloadSectionProgress` | Progressbar of the download section |
| `#commonHelpButtonContainer` | Container for HelpButtons |
| `#commonHelpButtonClosed` | HelpButton closed content container |
| `#commonHelpButtonIcon` | HelpButton icon |
| `#commonHelpButtonContainerOpen` | Container of opened HelpButton |
| `#commonMainProgressContainer` | MainProgressBar container |
| `#commonMainProgress` | Container for inner content of MainProgressBar |
| `#commonMainProgressInner` | MainProgressBar inner |
| `#commonMainProgressText` | Text of MainProgressBar |
| `#commonProgressBarContainer` | ProgressBar container |
| `#commonProgressBar` | ProgressBar container before content |
| `#commonProgressBarContent` | ProgressBar content |
| `#commonProgressbarDownContrContainer` | Container for ProgressBar controls |
| `#commonProgressBarDownStopContainer` | Container for download stop |
| `#commonProgressBarDownStopIcon` | Download stop icon (SVG) |
| `#commonProgressBarText` | Text describing the progress bar's job |
| `#commonTextInputContainer` | Container of TextInput component |
| `#commonTextInputClearableContainer` | Container if TextInput is clearable |
| `#commonTextInputClearableIcon` | TextInput clearable icon (SVG) |
| `#miniDownloadContainer` | Container for mini download |

2
src/ui/components/common/BigButton.tsx
View File

@ -38,7 +38,7 @@ export default class BigButton extends React.Component<IProps, IState> {
render() {
return (
<div className={'BigButton ' + (this.state.disabled ? 'disabled' : '')} onClick={this.handleClick} id={this.props.id}>
<div className="BigButtonText" id="commonBigButtonContent">{this.props.children}</div>
<div className="BigButtonText">{this.props.children}</div>
</div>
)
}

4
src/ui/components/common/Checkbox.tsx
View File

@ -40,10 +40,10 @@ export default class Checkbox extends React.Component<IProps, IState> {
render() {
return (
<div className="Checkbox" id="commonCheckboxContainer">
<div className="Checkbox">
<input type='checkbox' id={this.props.id} checked={this.state.checked} onChange={this.handleChange} />
<label id="commonCheckboxLabel" htmlFor={this.props.id}>
<div className="CheckboxDisplay" id="commonCheckboxDisplay">
<div className="CheckboxDisplay">
{this.state.checked ? <img src={checkmark} alt='Checkmark' /> : null}
</div>
<span>{this.props.label || ''}</span>

6
src/ui/components/common/DirInput.tsx
View File

@ -86,7 +86,7 @@ export default class DirInput extends React.Component<IProps, IState> {
render() {
return (
<div className='DirInput' id='commonDirInputContainer'>
<div className='DirInput'>
<TextInput
id='commonDirInputText'
value={this.state.value}
@ -100,8 +100,8 @@ export default class DirInput extends React.Component<IProps, IState> {
}}
customClearBehaviour={this.props.customClearBehaviour}
/>
<div className="FileSelectIcon" id="commonDirInputFileSelContainer" onClick={this.handleIconClick}>
<img id="commonDirInputFileSelIcon" src={File} />
<div className="FileSelectIcon" onClick={this.handleIconClick}>
<img src={File} />
</div>
</div>
)

10
src/ui/components/common/DownloadSection.tsx
View File

@ -21,12 +21,12 @@ export default class DownloadSection extends React.Component<IProps, never> {
render() {
return (
<div className="DownloadSection" id="commonDownloadSectionContainer">
<div className="DownloadTitle" id="commonDownloadSectionTitle">
<div className="DownloadPath" id="commonDownloadSectionPath">{this.getFilenameFromPath()}</div>
<div className="DownloadStatus" id="commonDownloadSectionSize"> - {this.props.downloadManager.getDownloadSize(this.props.downloadName)}</div>
<div className="DownloadSection">
<div className="DownloadTitle">
<div className="DownloadPath">{this.getFilenameFromPath()}</div>
<div className="DownloadStatus"> - {this.props.downloadManager.getDownloadSize(this.props.downloadName)}</div>
</div>
<div className="DownloadSectionInner" id="commonDownloadSectionProgress">
<div className="DownloadSectionInner">
<ProgressBar path={this.props.downloadName} downloadManager={this.props.downloadManager} />
</div>
</div>

6
src/ui/components/common/HelpButton.tsx
View File

@ -36,12 +36,12 @@ export default class HelpButton extends React.Component<IProps, IState> {
render() {
return (
<div className="HelpSection" id="commonHelpButtonContainer">
<div className="HelpButton" id="commonHelpButtonClosed" onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}>
<div className="HelpSection">
<div className="HelpButton" onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}>
<img id="commonHelpButtonIcon" src={Help} />
</div>
<div className="HelpContents" id="commonHelpButtonContainerOpen" style={{
<div className="HelpContents" style={{
display: this.state.opened ? 'block' : 'none'
}}>
<MiniDialog closeFn={this.setClosed}>

8
src/ui/components/common/MainProgressBar.tsx
View File

@ -49,9 +49,9 @@ export default class ProgressBar extends React.Component<IProps, IState> {
render() {
return (
<div className="MainProgressBarWrapper" id="commonMainProgressContainer">
<div className="ProgressBar" id="commonMainProgress">
<div className="InnerProgress" id="commonMainProgressInner" style={{
<div className="MainProgressBarWrapper">
<div className="ProgressBar">
<div className="InnerProgress" style={{
width: `${(() => {
// Handles no files downloading
if (this.state.files === 0) {
@ -67,7 +67,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
}}></div>
</div>
<div className="MainProgressText" id="commonMainProgressText">
<div className="MainProgressText">
<Tr text="main.files_downloading" /> {this.state.files} ({this.state.speed})
<br />
<Tr text="main.files_extracting" /> {this.state.extracting}

12
src/ui/components/common/ProgressBar.tsx
View File

@ -53,12 +53,12 @@ export default class ProgressBar extends React.Component<IProps, IState> {
render() {
return (
<div className="ProgressBarWrapper" id="commonProgressBarContainer">
<div className="ProgressBarWrapper">
<div style={{
width: '80%'
}}>
<div className="ProgressBar" id="commonProgressBar">
<div className="InnerProgress" id="commonProgressBarContent" style={{
<div className="ProgressBar">
<div className="InnerProgress" style={{
width: `${(() => {
// Handles files with content-lengths of 0
if (this.state.status === 'finished') {
@ -73,14 +73,14 @@ export default class ProgressBar extends React.Component<IProps, IState> {
})()}%`,
}}></div>
</div>
<div className="DownloadControls" id="commonProgressbarDownContrContainer">
<div onClick={this.stopDownload} id="commonProgressBarDownStopContainer" className="downloadStop">
<div className="DownloadControls">
<div onClick={this.stopDownload} className="downloadStop">
<img id="commonProgressBarDownStopIcon" src={Stop}></img>
</div>
</div>
</div>
<div className="ProgressText" id="commonProgressBarText">
<div className="ProgressText">
{capitalize(this.state.status) || 'Waiting'}
</div>
</div>

6
src/ui/components/common/TextInput.tsx
View File

@ -44,14 +44,14 @@ export default class TextInput extends React.Component<IProps, IState> {
render() {
return (
<div className="TextInputWrapper" id="commonTextInputContainer" style={this.props.style || {}}>
<div className="TextInputWrapper" style={this.props.style || {}}>
<input id={this.props?.id} readOnly={this.props.readOnly || false} placeholder={this.props.placeholder || ''} className="TextInput" value={this.state.value} onChange={(e) => {
this.setState({ value: e.target.value })
if (this.props.onChange) this.props.onChange(e.target.value)
}} />
{
this.props.clearable ?
<div className="TextClear" id="commonTextInputClearableContainer" onClick={() => {
<div className="TextClear" onClick={() => {
// Run custom behaviour first
if (this.props.customClearBehaviour) return this.props.customClearBehaviour()
@ -61,7 +61,7 @@ export default class TextInput extends React.Component<IProps, IState> {
this.forceUpdate()
}}>
<img src={Close} className="TextInputClear" id="commonTextInputClearableIcon" />
<img src={Close} className="TextInputClear" />
</div> : null
}
</div>

4
src/ui/components/menu/Divider.tsx
View File

@ -5,8 +5,8 @@ import './Divider.css'
export default class Divider extends React.Component {
render() {
return (
<div className="Divider" id="dividerContainer">
<div className="DividerLine" id="dividerLine"></div>
<div className="Divider">
<div className="DividerLine"></div>
</div>
)
}

4
src/ui/components/news/NewsSection.tsx
View File

@ -69,8 +69,8 @@ export default class NewsSection extends React.Component<IProps, IState> {
const commitsListHtml = commitsList.map((commit: any) => {
return (
<tr className="Commit" id="newsCommitsTable" key={commit.sha}>
<td className="CommitAuthor" id="newsCommitsAuthor"><span>{commit.commit.author.name}</span></td>
<td className="CommitMessage" id="newsCommitsCommitMessage"><span>{commit.commit.message}</span></td>
<td className="CommitAuthor"><span>{commit.commit.author.name}</span></td>
<td className="CommitMessage"><span>{commit.commit.message}</span></td>
</tr>
)
})