react-icons/md#MdArrowDropDownCircle JavaScript Examples

The following examples show how to use react-icons/md#MdArrowDropDownCircle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: PlotSelector.js    From covid19 with MIT License 5 votes vote down vote up 
render() {
        const { currentPlotType, currentRegion, lang, data, onPlotTypeChange } = this.props
        const plotParameters = plotTypes[currentPlotType]
        const currentRegionIsGlobal = currentRegion.length === 1 && currentRegion[0] === str.GLOBAL_ZH
        const hasSubregions = Object.keys(getDataFromRegion(data, currentRegion)).length > 4 || currentRegionIsGlobal

        return (
            <UncontrolledDropdown className="">
                <DropdownToggle
                    tag="span"
                    className="line-plot-title"
                    data-toggle="dropdown"
                    aria-expanded={this.state.dropdownOpen}
                >
                    <span>{plotParameters.text[lang]}</span>
                    <MdArrowDropDownCircle size={20} className="dropdown-arrow" />
                </DropdownToggle>
                <DropdownMenu
                    modifiers={{
                        setMaxHeight: {
                            enabled: true,
                            order: 890,
                            fn: (data) => {
                                return {
                                    ...data,
                                    styles: {
                                        ...data.styles,
                                        overflowY: 'auto',
                                        maxHeight: this.state.height * 0.6
                                    }
                                }
                            }
                        }
                    }}
                >
                    {Object.keys(plotTypes).map(
                        (plotType) =>
                            // no One-vs-Rest comparison plot when current region is Global
                            plotType === 'plot_one_vs_rest' && currentRegionIsGlobal ? (
                                <div key={`dropdown-${plotType}`} />
                            ) : plotTypes[plotType].subregions && !hasSubregions ? (
                                <div key={`dropdown-${plotType}`} />
                            ) : (
                                <Fragment key={`dropdown-${plotType}`}>
                                    {plotType === 'plot_basic' &&
                                    hasSubregions && <DropdownItem header>{i18n.OVERALL[lang]}</DropdownItem>}
                                    {plotType === 'plot_ranking' && hasSubregions && <DropdownItem divider />}
                                    {plotType === 'plot_ranking' &&
                                    hasSubregions && <DropdownItem header>{i18n.SUBREGIONS[lang]}</DropdownItem>}
                                    <DropdownItem
                                        className={currentPlotType === plotType ? 'current' : ''}
                                        onClick={() => {
                                            onPlotTypeChange(plotType)
                                            this.setState({
                                                dropdownOpen: !this.state.dropdownOpen
                                            })
                                        }}
                                    >
                                        {plotTypes[plotType].text[lang]}
                                    </DropdownItem>
                                </Fragment>
                            )
                    )}
                </DropdownMenu>
            </UncontrolledDropdown>
        )
    }