import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 } from "../../common" ; import { DISABLED , FILL , HTML_SELECT , LARGE , MINIMAL } from "../../common/classes" ; import { IElementRefProps , OptionProps } from "../../common/props" ; import { Icon , IconProps } from "../icon/icon" ; export type HTMLSelectProps = IHTMLSelectProps ; deprecated export interface IHTMLSelectProps extends IElementRefProps < HTMLSelectElement > , React . SelectHTMLAttributes < HTMLSelectElement > { /** Whether this element is non-interactive. */ disabled ? : boolean ; /** Whether this element should fill its container. */ fill ? : boolean ; /** Props to spread to the `<Icon>` element. */ iconProps ? : Partial < IconProps > ; /** Whether to use large styles. */ large ? : boolean ; /** Whether to use minimal styles. */ minimal ? : boolean ; /** Multiple select is not supported. */ multiple ? : never ; /** Change event handler. Use `event.currentTarget.value` to access the new value. */ onChange ? : React . ChangeEventHandler < HTMLSelectElement > ; /**
     * Shorthand for supplying options: an array of basic types or
     * `{ label?, value }` objects. If no `label` is supplied, `value`
     * will be used as the label.
     */ options ? : Array < string | number | OptionProps > ; /** Controlled value of this component. */ value ? : string | number ; } @ polyfill export class HTMLSelect extends AbstractPureComponent2 < HTMLSelectProps > { public render ( ) { const { className , disabled , elementRef , fill , iconProps , large , minimal , options = [ ] , ... htmlProps } = this . props ; const classes = classNames ( HTML_SELECT , { [ DISABLED ] : disabled , [ FILL ] : fill , [ LARGE ] : large , [ MINIMAL ] : minimal , } , className ) ; const optionChildren = options . map ( option => { const props = typeof option === "object" ? option : { value : option } ; return < option { ... props } key = { props . value } children = { props . label || props . value } / > ; } ) ; return ( < div className = { classes } > < select disabled = { disabled } ref = { elementRef } { ... htmlProps } multiple = { false } > { optionChildren } { htmlProps . children } < /select> < Icon icon = "double-caret-vertical" title = "Open dropdown" { ... iconProps } /> < /div>); } }