xchain-components/src/components/XDropdown/index.js

Xchain Components

/* @flow */
/* eslint react/jsx-filename-extension: 0 */

import React from 'react';
import { Dropdown, Icon } from 'semantic-ui-react';

type Props = {
  placeholder: string,
  value: string,
  selection?: boolean,
  search?: boolean,
  inline?: boolean,
  textFontSize?: string,
  iconName?: string,
  iconFontSize?: string,
  dropdownWidth?: string,
  dropdownHeight?: string,
  menuItems: Array<{ key: string, value: string, [key: string]: string }>,
  onChange: () => void,
  onSearchChange?: () => void,
  compact?: boolean,
  fluid?: boolean,
  // itemComponent: string,
  // itemComponentCommonProps: OtherValues,
};

const XDropDown = (props: Props) => {
  const {
    placeholder,
    value,
    menuItems,
    selection, search, inline,
    textFontSize,
    iconName, iconFontSize, dropdownWidth, dropdownHeight, onChange,
    onSearchChange, compact, fluid,
    // itemComponent, itemComponentCommonProps,
  } = props;
  return (
    <div
      style={{
        height: dropdownHeight,
        width:dropdownWidth,
      }}
    >
      <Dropdown
        style={{
          fontSize: textFontSize,
        }}
        fluid={fluid}
        compact={compact}
        onChange={onChange}
        placeholder={placeholder}
        search={search}
        onSearchChange={onSearchChange}
        selection={selection}
        inline={inline}
        options={menuItems}
        value={value}
        icon={(
          <Icon
            style={{
              fontSize: iconFontSize,
            }}
            name={iconName}
          />
       )}
      />
    </div>
  );
};


XDropDown.defaultProps = {
  fluid: false,
  compact: true,
  selection: false,
  search: false,
  inline: false,
  textFontSize: '15px',
  iconName: 'dropdown',
  iconFontSize: '15px',
  dropdownWidth: '100px',
  dropdownHeight: '19px',
  onSearchChange: () => { },
};

export default XDropDown;