+ {options.length === 0 && (
+
No options
+ )}
+
+ {options.map((option, index) => {
+ const value = getOptionValue(option);
+
+ return (
+
{
+ setOpen(false);
+ onSelected?.(value);
+ }}
+ >
+ {typeof option === 'string' ? option : option.displayText}
+
+ );
+ })}
+
{
- this.setSelected(value);
+ onClick={(event) => {
+ if (disabled && !open) {
+ return;
+ }
+ setOpen(!open);
+ onClick?.(event);
}}
>
- {displayText}
-
- );
- });
-
- const to_render = ops.length ? ops : 'No Options Found';
-
- render(
{to_render}
, renderedMenu, () => {
- let singletonPopper = Dropdown.singletonPopper;
- if (singletonPopper === undefined) {
- singletonPopper = createPopper(Dropdown.virtualElement, renderedMenu!, {
- ...DEFAULT_OPTIONS,
- placement: 'bottom-start',
- });
-
- Dropdown.singletonPopper = singletonPopper;
- } else {
- singletonPopper.setOptions({
- ...DEFAULT_OPTIONS,
- placement: 'bottom-start',
- });
-
- singletonPopper.update();
- }
- });
- }
-
- setOpen(open: boolean) {
- this.setState((state) => ({
- ...state,
- open,
- }));
- if (open) {
- setTimeout(() => {
- this.openMenu();
- window.addEventListener('click', this.handleClick);
- });
- } else {
- this.closeMenu();
- window.removeEventListener('click', this.handleClick);
- }
- }
-
- setSelected(selected: string) {
- this.setState((state) => ({
- ...state,
- selected,
- }));
- this.setOpen(false);
- if (this.props.onSelected) {
- this.props.onSelected(selected);
- }
- }
-
- getOptionValue(option): string {
- return typeof option === 'string' ? option : option.value;
- }
-
- getSelectedIndex(): number {
- const selected = this.state.selected || this.props.selected;
- const { options = [] } = this.props;
-
- return options.findIndex((option) => {
- return this.getOptionValue(option) === selected;
- });
- }
-
- toPrevious(): void {
- if (this.props.options.length < 1) {
- return;
- }
-
- let selectedIndex = this.getSelectedIndex();
- const startIndex = 0;
- const endIndex = this.props.options.length - 1;
-
- const hasSelected = selectedIndex >= 0;
- if (!hasSelected) {
- selectedIndex = startIndex;
- }
-
- const previousIndex =
- selectedIndex === startIndex ? endIndex : selectedIndex - 1;
-
- this.setSelected(this.getOptionValue(this.props.options[previousIndex]));
- }
-
- toNext(): void {
- if (this.props.options.length < 1) {
- return;
- }
-
- let selectedIndex = this.getSelectedIndex();
- const startIndex = 0;
- const endIndex = this.props.options.length - 1;
-
- const hasSelected = selectedIndex >= 0;
- if (!hasSelected) {
- selectedIndex = endIndex;
- }
-
- const nextIndex =
- selectedIndex === endIndex ? startIndex : selectedIndex + 1;
-
- this.setSelected(this.getOptionValue(this.props.options[nextIndex]));
- }
-
- render() {
- const { props } = this;
- const {
- icon,
- iconRotation,
- iconSpin,
- clipSelectedText = true,
- color = 'default',
- dropdownStyle,
- over,
- nochevron,
- width,
- onClick,
- onSelected,
- selected,
- disabled,
- displayText,
- buttons,
- ...boxProps
- } = props;
- const { className, ...rest } = boxProps;
-
- const adjustedOpen = over ? !this.state.open : this.state.open;
-
- return (
-
-
- {
- if (disabled && !this.state.open) {
- return;
- }
- this.setOpen(!this.state.open);
- if (onClick) {
- onClick(event);
- }
+ {icon && (
+
+ )}
+
- {icon && (
-
- )}
-
- {displayText || this.state.selected}
+ {displayText || selected}
+
+ {!noChevron && (
+
+
- {nochevron || (
-
-
-
- )}
-
-
+ )}
+
+
{buttons && (
<>
-