react-lite-dropdown: A JavaScript repository from timse

React Lite Dropdown

Dropdown component from Talk by Teambition.

Demo http://teambition.github.io/react-lite-dropdown/

Properties

displayText (React.PropTypes.string)

Text to display when selected. You will get is-chosen in className of root element when it's specified.

defaultText (React.PropTypes.string.isRequired)

Text to display in when displayText is undefined.

name (React.PropTypes.string)

CSS hook for this components, defaults to be default. Suppose it's x, the generated className is is-for-x.

this.props.children

View to render in the menu opened when click.

Supposition

This component suppose you are using it in such scenarios:

it looks like <select>, with default text and selected
but you need to render arbitrary view, rather than list of items
click events bubbles to window and menu is then closed

In chinese. 中文表达更明确一些, 这个组件做了一些假定, 使用需要注意:

基本界面类似 <select>, 有选中/未选中状态, 用 CSS hook 修改颜色
打开菜单具体界面不在 Component 中控制, 要以 this.props.children 传入
通过监听 window 的 click 事件关闭菜单, 注意不好截断

Usage

npm i --save react-lite-dropdown

Read src/main.jsx for details:

import {default as React} from 'react';
import './demo.css';

import {default as LiteDropdown} from 'react-lite-dropdown';
import 'react-lite-dropdown/src/style.css'; // CSS if you need

var languages = 'CoffeeScript PureScript Elm CirruScript'.split(' ');

var App = React.createClass({
  displayName: 'page-app',
  getInitialState: function() {
    return {
      lang: void 0
    };
  },
  onItemClick: function(lang) {
    return this.setState({
      lang: lang
    });
  },
  renderLanguages: function() {
    console.log(languages);
    var self = this;
    return languages.map(function(lang) {
      var onClick = function() {
        return self.onItemClick(lang);
      };
      return <div key={lang} className={'item'} onClick={onClick}>{lang}</div>;
    });
  },
  render: function() {
    return <LiteDropdown
      displayText={this.state.lang}
      defaultText={'Click to select one'}
      name={'css-hook-demo'}>{this.renderLanguages()}</LiteDropdown>
  }
});

var PageApp = React.createFactory(App);

var demo = document.querySelector('.demo');

React.render(PageApp(), demo);

Develop

npm i

You need a static file server for the HTML files. Personally I suggest using Nginx.

Develop:

gulp html # regenerate index.html
webpack-dev-server --hot # enable live-reloading

Build (Pack and optimize js, reivision js and add entry in index.html):

gulp build

License

MIT

timse/react-lite-dropdown