Multiple image upload (#971)

* feat: Add multiple image upload

* refactor: Slight cleanup

* feat: Add progress bar for multi-image upload

* fix: Fix progress bar

* fix: Messed up fix last time

* refactor: Use await where possible

* Update translation logic

* Did suggested PR changes

* Updating translations

* Fix i18 issue

* Make prettier actually check src in hopes it will fix CI issue
This commit is contained in:
SleeplessOne1917 2023-04-04 08:40:00 -04:00 committed by GitHub
parent a8d6df9688
commit 699c3ff4b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 276 additions and 178 deletions

View file

@ -10,11 +10,12 @@ interface LanguageSelectProps {
allLanguages: Language[];
siteLanguages: number[];
selectedLanguageIds?: number[];
multiple: boolean;
multiple?: boolean;
onChange(val: number[]): any;
showAll?: boolean;
showSite?: boolean;
iconVersion?: boolean;
disabled?: boolean;
}
export class LanguageSelect extends Component<LanguageSelectProps, any> {
@ -55,19 +56,19 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
)}
<div className="form-group row">
<label
className={classNames("col-form-label", {
"col-sm-3": this.props.multiple,
"col-sm-2": !this.props.multiple,
})}
className={classNames(
"col-form-label",
`col-sm-${this.props.multiple ? 3 : 2}`
)}
htmlFor={this.id}
>
{i18n.t(this.props.multiple ? "language_plural" : "language")}
</label>
<div
className={classNames("input-group", {
"col-sm-9": this.props.multiple,
"col-sm-10": !this.props.multiple,
})}
className={classNames(
"input-group",
`col-sm-${this.props.multiple ? 9 : 10}`
)}
>
{this.selectBtn}
{this.props.multiple && (
@ -87,8 +88,8 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
}
get selectBtn() {
let selectedLangs = this.props.selectedLanguageIds;
let filteredLangs = selectableLanguages(
const selectedLangs = this.props.selectedLanguageIds;
const filteredLangs = selectableLanguages(
this.props.allLanguages,
this.props.siteLanguages,
this.props.showAll,
@ -98,14 +99,17 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
return (
<select
className={classNames("lang-select-action", {
"form-control custom-select": !this.props.iconVersion,
"btn btn-sm text-muted": this.props.iconVersion,
})}
className={classNames(
"lang-select-action",
this.props.iconVersion
? "btn btn-sm text-muted"
: "form-control custom-select"
)}
id={this.id}
onChange={linkEvent(this, this.handleLanguageChange)}
aria-label="action"
multiple={this.props.multiple}
disabled={this.props.disabled}
>
{filteredLangs.map(l => (
<option