Feliday/Feliday-UI
5
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use linkEvent where appropriate

Browse source
This commit is contained in:
abias 2023-06-13 22:49:31 -04:00
parent c6a6c99efe
commit df2ea3311e
1 changed files with 31 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/shared/components/common/searchable-select.tsx
View file

@ -38,12 +38,38 @@ function handleSearch(i: SearchableSelect, e: ChangeEvent<HTMLInputElement>) {
}); });
} }
function focusSearch(i: SearchableSelect) {
if (i.toggleButtonRef.current?.ariaExpanded !== "true") {
i.searchInputRef.current?.focus();
if (i.props.onSearch) {
i.props.onSearch("");
}
i.setState({
searchText: "",
});
}
}
function handleChange({ option, i }: { option: Choice; i: SearchableSelect }) {
const { onChange, value } = i.props;
if (option.value !== value?.toString()) {
if (onChange) {
onChange(option);
}
i.setState({ searchText: "" });
}
}
export class SearchableSelect extends Component< export class SearchableSelect extends Component<
SearchableSelectProps, SearchableSelectProps,
SearchableSelectState SearchableSelectState
> { > {
private searchInputRef: RefObject<HTMLInputElement> = createRef(); searchInputRef: RefObject<HTMLInputElement> = createRef();
private toggleButtonRef: RefObject<HTMLButtonElement> = createRef(); toggleButtonRef: RefObject<HTMLButtonElement> = createRef();
private loadingEllipsesInterval?: NodeJS.Timer = undefined; private loadingEllipsesInterval?: NodeJS.Timer = undefined;
state: SearchableSelectState = { state: SearchableSelectState = {
@ -55,9 +81,6 @@ export class SearchableSelect extends Component<
constructor(props: SearchableSelectProps, context: any) { constructor(props: SearchableSelectProps, context: any) {
super(props, context); super(props, context);
this.handleChange = this.handleChange.bind(this);
this.focusSearch = this.focusSearch.bind(this);
if (props.value) { if (props.value) {
let selectedIndex = props.options.findIndex( let selectedIndex = props.options.findIndex(
({ value }) => value === props.value?.toString() ({ value }) => value === props.value?.toString()
@ -86,7 +109,8 @@ export class SearchableSelect extends Component<
className="custom-select text-start" className="custom-select text-start"
aria-haspopup="listbox" aria-haspopup="listbox"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
onClick={this.focusSearch} onClick={linkEvent(this, focusSearch)}
ref={this.toggleButtonRef}
> >
{loading {loading
? `${i18n.t("loading")}${loadingEllipses}` ? `${i18n.t("loading")}${loadingEllipses}`
@ -127,7 +151,7 @@ export class SearchableSelect extends Component<
aria-disabled={option.disabled} aria-disabled={option.disabled}
disabled={option.disabled} disabled={option.disabled}
aria-selected={selectedIndex === index} aria-selected={selectedIndex === index}
onClick={() => this.handleChange(option)} onClick={linkEvent({ i: this, option }, handleChange)}
type="button" type="button"
> >
{option.label} {option.label}
@ -138,20 +162,6 @@ export class SearchableSelect extends Component<
); );
} }
focusSearch() {
if (this.toggleButtonRef.current?.ariaExpanded !== "true") {
this.searchInputRef.current?.focus();
if (this.props.onSearch) {
this.props.onSearch("");
}
this.setState({
searchText: "",
});
}
}
static getDerivedStateFromProps({ static getDerivedStateFromProps({
value, value,
options, options,
@ -189,16 +199,4 @@ export class SearchableSelect extends Component<
clearInterval(this.loadingEllipsesInterval); clearInterval(this.loadingEllipsesInterval);
} }
} }
handleChange(option: Choice) {
const { onChange, value } = this.props;
if (option.value !== value?.toString()) {
if (onChange) {
onChange(option);
}
this.setState({ searchText: "" });
}
}
} }