Mirror/Cultivation
1
0
Fork 0
mirror of https://github.com/Grasscutters/Cultivation.git synced 2025-12-13 07:34:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10 from TukanDev/main

Browse Source 
Fix reusable react components duplicate id...
This commit is contained in:
SpikeHD
2022-07-03 19:21:38 -07:00
committed by GitHub
parent 29716c43b6 9ea92a23ee
commit 8eaab56787
11 changed files with 32 additions and 67 deletions
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 | | `#latest_version` | News tabs for latest version button |
| `#newsContent` | Content section of news container | | `#newsContent` | Content section of news container |
| `#newsCommitsTable` | Commits table of news section | | `#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 | | `#downloadMenuContainerGCStable` | Grasscutter stable update container |
| `#downloadMenuLabelGCStable` | Label for stable update button | | `#downloadMenuLabelGCStable` | Label for stable update button |
| `#downloadMenuButtonGCStable` | Button container for stable update button | | `#downloadMenuButtonGCStable` | Button container for stable update button |
@@ -95,35 +91,4 @@
| `#menuOptionsSelectMenuLang` | Language select menu | | `#menuOptionsSelectMenuLang` | Language select menu |
| `#DownloadProgress` | Download progress container | | `#DownloadProgress` | Download progress container |
| `#bottomSectionContainer` | Bottom section container | | `#bottomSectionContainer` | Bottom section container |
| `#miniDownloadContainer` | Container for mini download | | `#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) |

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

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

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

@@ -40,10 +40,10 @@ export default class Checkbox extends React.Component<IProps, IState> {
render() { render() {
return ( return (
<div className="Checkbox" id="commonCheckboxContainer"> <div className="Checkbox">
<input type='checkbox' id={this.props.id} checked={this.state.checked} onChange={this.handleChange} /> <input type='checkbox' id={this.props.id} checked={this.state.checked} onChange={this.handleChange} />
<label id="commonCheckboxLabel" htmlFor={this.props.id}> <label id="commonCheckboxLabel" htmlFor={this.props.id}>
<div className="CheckboxDisplay" id="commonCheckboxDisplay"> <div className="CheckboxDisplay">
{this.state.checked ? <img src={checkmark} alt='Checkmark' /> : null} {this.state.checked ? <img src={checkmark} alt='Checkmark' /> : null}
</div> </div>
<span>{this.props.label || ''}</span> <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() { render() {
return ( return (
<div className='DirInput' id='commonDirInputContainer'> <div className='DirInput'>
<TextInput <TextInput
id='commonDirInputText' id='commonDirInputText'
value={this.state.value} value={this.state.value}
@@ -100,8 +100,8 @@ export default class DirInput extends React.Component<IProps, IState> {
}} }}
customClearBehaviour={this.props.customClearBehaviour} customClearBehaviour={this.props.customClearBehaviour}
/> />
<div className="FileSelectIcon" id="commonDirInputFileSelContainer" onClick={this.handleIconClick}> <div className="FileSelectIcon" onClick={this.handleIconClick}>
<img id="commonDirInputFileSelIcon" src={File} /> <img src={File} />
</div> </div>
</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() { render() {
return ( return (
<div className="DownloadSection" id="commonDownloadSectionContainer"> <div className="DownloadSection">
<div className="DownloadTitle" id="commonDownloadSectionTitle"> <div className="DownloadTitle">
<div className="DownloadPath" id="commonDownloadSectionPath">{this.getFilenameFromPath()}</div> <div className="DownloadPath">{this.getFilenameFromPath()}</div>
<div className="DownloadStatus" id="commonDownloadSectionSize"> - {this.props.downloadManager.getDownloadSize(this.props.downloadName)}</div> <div className="DownloadStatus"> - {this.props.downloadManager.getDownloadSize(this.props.downloadName)}</div>
</div> </div>
<div className="DownloadSectionInner" id="commonDownloadSectionProgress"> <div className="DownloadSectionInner">
<ProgressBar path={this.props.downloadName} downloadManager={this.props.downloadManager} /> <ProgressBar path={this.props.downloadName} downloadManager={this.props.downloadManager} />
</div> </div>
</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() { render() {
return ( return (
<div className="HelpSection" id="commonHelpButtonContainer"> <div className="HelpSection">
<div className="HelpButton" id="commonHelpButtonClosed" onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}> <div className="HelpButton" onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}>
<img id="commonHelpButtonIcon" src={Help} /> <img id="commonHelpButtonIcon" src={Help} />
</div> </div>
<div className="HelpContents" id="commonHelpButtonContainerOpen" style={{ <div className="HelpContents" style={{
display: this.state.opened ? 'block' : 'none' display: this.state.opened ? 'block' : 'none'
}}> }}>
<MiniDialog closeFn={this.setClosed}> <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() { render() {
return ( return (
<div className="MainProgressBarWrapper" id="commonMainProgressContainer"> <div className="MainProgressBarWrapper">
<div className="ProgressBar" id="commonMainProgress"> <div className="ProgressBar">
<div className="InnerProgress" id="commonMainProgressInner" style={{ <div className="InnerProgress" style={{
width: `${(() => { width: `${(() => {
// Handles no files downloading // Handles no files downloading
if (this.state.files === 0) { if (this.state.files === 0) {
@@ -67,7 +67,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
}}></div> }}></div>
</div> </div>
<div className="MainProgressText" id="commonMainProgressText"> <div className="MainProgressText">
<Tr text="main.files_downloading" /> {this.state.files} ({this.state.speed}) <Tr text="main.files_downloading" /> {this.state.files} ({this.state.speed})
<br /> <br />
<Tr text="main.files_extracting" /> {this.state.extracting} <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() { render() {
return ( return (
<div className="ProgressBarWrapper" id="commonProgressBarContainer"> <div className="ProgressBarWrapper">
<div style={{ <div style={{
width: '80%' width: '80%'
}}> }}>
<div className="ProgressBar" id="commonProgressBar"> <div className="ProgressBar">
<div className="InnerProgress" id="commonProgressBarContent" style={{ <div className="InnerProgress" style={{
width: `${(() => { width: `${(() => {
// Handles files with content-lengths of 0 // Handles files with content-lengths of 0
if (this.state.status === 'finished') { if (this.state.status === 'finished') {
@@ -73,14 +73,14 @@ export default class ProgressBar extends React.Component<IProps, IState> {
})()}%`, })()}%`,
}}></div> }}></div>
</div> </div>
<div className="DownloadControls" id="commonProgressbarDownContrContainer"> <div className="DownloadControls">
<div onClick={this.stopDownload} id="commonProgressBarDownStopContainer" className="downloadStop"> <div onClick={this.stopDownload} className="downloadStop">
<img id="commonProgressBarDownStopIcon" src={Stop}></img> <img id="commonProgressBarDownStopIcon" src={Stop}></img>
</div> </div>
</div> </div>
</div> </div>
<div className="ProgressText" id="commonProgressBarText"> <div className="ProgressText">
{capitalize(this.state.status) || 'Waiting'} {capitalize(this.state.status) || 'Waiting'}
</div> </div>
</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() { render() {
return ( 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) => { <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 }) this.setState({ value: e.target.value })
if (this.props.onChange) this.props.onChange(e.target.value) if (this.props.onChange) this.props.onChange(e.target.value)
}} /> }} />
{ {
this.props.clearable ? this.props.clearable ?
<div className="TextClear" id="commonTextInputClearableContainer" onClick={() => { <div className="TextClear" onClick={() => {
// Run custom behaviour first // Run custom behaviour first
if (this.props.customClearBehaviour) return this.props.customClearBehaviour() if (this.props.customClearBehaviour) return this.props.customClearBehaviour()
@@ -61,7 +61,7 @@ export default class TextInput extends React.Component<IProps, IState> {
this.forceUpdate() this.forceUpdate()
}}> }}>
<img src={Close} className="TextInputClear" id="commonTextInputClearableIcon" /> <img src={Close} className="TextInputClear" />
</div> : null </div> : null
} }
</div> </div>

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

@@ -5,8 +5,8 @@ import './Divider.css'
export default class Divider extends React.Component { export default class Divider extends React.Component {
render() { render() {
return ( return (
<div className="Divider" id="dividerContainer"> <div className="Divider">
<div className="DividerLine" id="dividerLine"></div> <div className="DividerLine"></div>
</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) => { const commitsListHtml = commitsList.map((commit: any) => {
return ( return (
<tr className="Commit" id="newsCommitsTable" key={commit.sha}> <tr className="Commit" id="newsCommitsTable" key={commit.sha}>
<td className="CommitAuthor" id="newsCommitsAuthor"><span>{commit.commit.author.name}</span></td> <td className="CommitAuthor"><span>{commit.commit.author.name}</span></td>
<td className="CommitMessage" id="newsCommitsCommitMessage"><span>{commit.commit.message}</span></td> <td className="CommitMessage"><span>{commit.commit.message}</span></td>
</tr> </tr>
) )
}) })