jianliaoim / React Lite Dropdown
Programming Languages
React Lite Dropdown
Dropdown component from Talk by Teambition.
Demo http://ui.talk.ai/react-lite-dropdown/
Properties
####Dropdown
-
displayText
(string)
Text to display when selected. You will get is-chosen
in className
of root element when it's specified.
-
defaultText
(string.isRequired)
Text to display when displayText
is undefined
.
-
name
(string)
CSS hook for this components, defaults to default
. Suppose it's x
, the generated className
is is-for-x
.
-
show
(bool.isRequired)
Defines whether DropdownMenu
is shown or not.
-
onToggle
(func.isRequired)
Things happened when toggle dropdown.
this.props.children
Content to render in the menu opened after clicked.
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(compiles with Babel) 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: undefined
};
},
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