phoenix-ui
Version:
future team ui for app with react
306 lines (265 loc) • 11.5 kB
JavaScript
'use strict';
exports.__esModule = true;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _utilsTool = require('../../utils/Tool');
var _icon = require('../../icon');
var _icon2 = _interopRequireDefault(_icon);
/**
* <h5>筛选控件，主要包括组件:</h5>
* <strong><a href='../classes/FilterContainer.html'>FilterContainer 单选筛选</a></strong><br/>
* <strong><a href='../classes/FilterCheckbox.html'>FilterCheckbox 多选筛选</a></strong><br>
* <strong><a href='../classes/FilterPanelSimple.html'>FilterPanelSimple 简单面板</a></strong><br>
* <strong><a href='../classes/FilterPanel.html'>FilterPanel 面板</a></strong><br>
* <strong><a href='../classes/FilterItemGroup.html'>FilterItemGroup 主菜单</a></strong><br>
* <strong><a href='../classes/FilterItem.html'>FilterItem 筛选项</a></strong><br>
* <h6>点击以上链接或者左侧导航栏的组件名称链接进行查看</h6>
* @module 筛选控件
* @main 筛选控件
* @static
*/
/**
* 单选筛选<br/>
* - 可通过index设置筛选默认打开的面板。默认－1，即都不打开。
* - 可通过hideCat选择是否要显示筛选头部。
* - 可通过clickCallback设置有效选择的回调，当没有按钮时选中即触发，有按钮时点击按钮时触发。
*
* 主要属性和接口：
* - index: 默认打开的面板。
* - hideCat: 是否显示筛选头部。
* - clickCallback: 有效选择的回调。
*
* 有2种形式，其一，简单模式。<br/>
* 如：
* ```code
* this.state = {
* panel1:[
* {key:'sndq',value:'上南地区'},
* {key:'ljz',value:'陆家嘴'},
* {key:'bbb',value:'八佰伴'},
* {key:'pdxq',value:'浦东新区'}
* ]
* }
* ...
* <FilterContainer index={0} hideCat={false} clickCallback={this.clickCallback.bind(this)}>
* <PanelSimple readOnly className='panel1' selected={{key:'ljz',value:'陆家嘴'}}>
* {
* this.state.panel1.map(function(item){
* return <Item key={item.key} itemKey={item.key}>{item.value}</Item>
* })
* }
* </PanelSimple>
* </FilterContainer>
* ```
* 其一，双栏模式。<br/>
* 如：
* ```code
* <FilterContainer index={0} hideCat={false} clickCallback={this.clickCallback.bind(this)}>
* <Panel readOnly selected={{key:'s_flower',value:'花店'}}>
* <ItemGroup label={<span style={{color:'red'}}>美食</span>}>
* <Item itemKey='f_all'>全部美食</Item>
* <Item itemKey='f_bbc'>本帮江浙菜</Item>
* ...
* </ItemGroup>
* <ItemGroup label='电影'>
* <Item itemKey='m_all'>全部电影</Item>
* <Item itemKey='m_p'>私人影院</Item>
* ...
* </ItemGroup>
* ...
* </Panel>
* </FilterContainer>
* ```
*
* @class FilterContainer
* @module 筛选控件
* @extends Component
* @constructor
* @since 2.0.0
* @demo ph-filter|ph-filter.js {展示}
* @show true
* */
var FilterContainer = (function (_Component) {
_inherits(FilterContainer, _Component);
_createClass(FilterContainer, null, [{
key: 'propTypes',
value: {
/**
* 默认展开筛选的索引，默认－1，即都不展开
* @property index
* @type Number
* @default -1
* */
index: _react.PropTypes.number,
/**
* 是否隐藏头部
* @property hideCat
* @type Boolean
* @default false
* */
hideCat: _react.PropTypes.bool,
/**
* 有效选择触发的回调函数
* @method clickCallback
* @type Function
* */
clickCallback: _react.PropTypes.func
},
enumerable: true
}, {
key: 'defaultProps',
value: {
index: -1,
hideCat: false,
clickCallback: null
},
enumerable: true
}]);
function FilterContainer(props, context) {
_classCallCheck(this, FilterContainer);
_Component.call(this, props, context);
this.state = {
catList: this.getCatList(),
activeCat: props.index,
fixed: false
};
this.windowScrollHandle = this.windowScrollHandle.bind(this);
this.containerOffsetTop = 0;
window.addEventListener('scroll', this.windowScrollHandle, false);
}
FilterContainer.prototype.windowScrollHandle = function windowScrollHandle() {
if (document.body.scrollTop >= this.containerOffsetTop) {
if (!this.state.fixed) this.setState({ fixed: true });
} else {
if (this.state.fixed) this.setState({ fixed: false });
}
};
FilterContainer.prototype.componentDidMount = function componentDidMount() {
this.containerOffsetTop = this.filterContainer.offsetTop;
};
FilterContainer.prototype.componentWillUnmount = function componentWillUnmount() {
window.removeEventListener('scroll', this.windowScrollHandle, false);
};
FilterContainer.prototype.getCatList = function getCatList() {
var catList = _react2['default'].Children.map(this.props.children, function (panel, index) {
//如果panel设置了selected属性的话直接读取selected属性；如果panel没有设置selected属性，则读取default用来展示在cat列表中
return panel.props.selected ? panel.props.selected : {
key: '',
value: panel.props['default'] ? panel.props['default'] : ''
};
});
return catList;
};
FilterContainer.prototype.setCatList = function setCatList() {
this.setState({
catList: this.getCatList()
});
};
FilterContainer.prototype.categoryChange = function categoryChange(index, category, hasButtons) {
var catList = this.state.catList.slice();
var clickCallback = this.props.clickCallback;
if (hasButtons) return;
catList[index] = category;
this.setState({
catList: catList,
activeCat: -1
});
clickCallback && clickCallback(category.key);
};
FilterContainer.prototype.activeCat = function activeCat(index) {
//展开某一个cat
if (index == this.state.activeCat) {
index = -1;
}
this.setState({
activeCat: index
});
};
FilterContainer.prototype.renderPanelList = function renderPanelList() {
var self = this;
var _self$state = self.state;
var catList = _self$state.catList;
var activeCat = _self$state.activeCat;
return _react2['default'].Children.map(this.props.children, function (panel, index) {
var show = index == activeCat;
if (self.props.hideCat && index == 0) {
show = true;
}
return _react2['default'].cloneElement(panel, {
categoryChange: self.categoryChange.bind(self),
// selected: catList[index],
setCatList: self.setCatList.bind(self),
panelIndex: index,
show: show,
choose: _utilsTool.transToArray(self.props.choose),
getChooseData: self.props.getChooseData
});
});
};
FilterContainer.prototype.renderCatList = function renderCatList() {
if (this.props.hideCat) {
return null;
}
var self = this;
var _self$state2 = self.state;
var catList = _self$state2.catList;
var activeCat = _self$state2.activeCat;
return catList.map(function (catCfg, index) {
return _react2['default'].createElement(
'li',
{ key: 'cat-' + index,
className: _classnames2['default']('ph-col', 'ph-filter-header-item', index == activeCat ? 'active' : ''),
onClick: function () {
self.activeCat(index);
}
},
_react2['default'].createElement(
'a',
{ href: 'javascript:;' },
_react2['default'].createElement(
'span',
{ className: 'ph-filter-header-text' },
catList[index].value
),
_react2['default'].createElement(_icon2['default'], { phIcon: 'expand-more' })
)
);
});
};
FilterContainer.prototype.hidePanel = function hidePanel() {
this.setState({
activeCat: -1
});
};
FilterContainer.prototype.render = function render() {
var _this = this;
return _react2['default'].createElement(
'div',
{ className: 'ph-filter-occupy' },
_react2['default'].createElement(
'div',
{ className: _classnames2['default']('ph-filter-container', this.state.activeCat == -1 ? '' : 'ph-filter-container-shadow', this.state.fixed ? 'ph-filter-container-fixed' : '', this.props.className),
ref: function (filterContainer) {
_this.filterContainer = filterContainer;
}
},
_react2['default'].createElement('div', { className: 'ph-filter-shadow', onClick: this.hidePanel.bind(this) }),
_react2['default'].createElement(
'ul',
{ className: 'cat ph-row ph-filter-header' },
this.renderCatList()
),
this.renderPanelList()
)
);
};
return FilterContainer;
})(_react.Component);
exports['default'] = FilterContainer;
module.exports = exports['default'];