innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

feat:实现下拉的Number类型，并添加对应i18n资源

This commit is contained in:
kvkens 2018-11-26 15:32:46 +08:00
parent 5698aff389
commit dac7145533
9 changed files with 20234 additions and 15186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/demolist/Demo27.js
View File

@ -152,7 +152,7 @@ class Demo27 extends Component {
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
{
title: "年龄",
width: 150,
width: 180,
sorter: (a, b) => a.age - b.age,
dataIndex: "age",
key: "age",

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

57
dist/demo.css vendored
View File

@ -2420,9 +2420,6 @@ i.uf {
/*
* 选择时删除文本阴影，及设置默认选中颜色
*/
::-moz-selection {
background: rgb(187,222,251);
text-shadow: none; }
::selection {
background: rgb(187,222,251);
text-shadow: none; }
@ -5286,7 +5283,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
.u-panel .u-panel-body {
padding: 15px 15px;
position: relative; }
.u-panel .u-panel-body .uf {
.u-panel .u-panel-body .u-panel-copy {
position: absolute;
right: 25px;
top: 30px;
@ -5296,7 +5293,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
margin: 8px;
border-radius: 4px;
cursor: pointer; }
.u-panel .u-panel-body .uf:hover {
.u-panel .u-panel-body .u-panel-copy:hover {
color: #a8a7a7; }
.u-panel-default {
@ -6672,7 +6669,8 @@ input.u-button[type="submit"] {
border-radius: 0 500px 500px 0; }
.u-pagination {
font-size: 14px; }
font-size: 14px;
position: relative; }
.u-pagination-list {
float: left;
margin: 5px; }
@ -6810,6 +6808,15 @@ input.u-button[type="submit"] {
margin: 5px; }
.u-pagination-total span {
padding: 0 5px; }
.u-pagination.u-pagination-disabled .u-pagination-disabled-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 46px;
background: rgba(255, 255, 255, 0.6);
z-index: 2;
cursor: not-allowed; }
.pagination-state {
float: left;
@ -6916,15 +6923,29 @@ input.u-button[type="submit"] {
margin: 0 5px;
height: 18px;
line-height: 18px;
font-size: 14px; }
font-size: 14px;
white-space: nowrap;
cursor: pointer;
outline: none;
position: relative;
line-height: 1;
vertical-align: middle; }
.u-checkbox.disabled .u-checkbox-label {
cursor: not-allowed;
opacity: 0.5; }
.u-checkbox input[type='checkbox'] {
display: none;
cursor: pointer; }
position: absolute;
z-index: 3;
cursor: pointer;
opacity: 0;
box-sizing: border-box;
padding: 0;
width: 100%;
height: 100%; }
.u-checkbox input[disabled] {
cursor: not-allowed; }
.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: #1e88e5; }
.u-checkbox.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(30,136,229);
border-color: rgb(30,136,229); }
@ -6976,22 +6997,37 @@ input.u-button[type="submit"] {
box-shadow: inset 0 0 0 10px rgb(76,175,80);
border-color: rgb(76,175,80); }
.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(76,175,80); }
.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(255,152,0);
border-color: rgb(255,152,0); }
.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(255,152,0); }
.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(244,67,54);
border-color: rgb(244,67,54); }
.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(244,67,54); }
.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(97,97,97);
border-color: rgb(97,97,97); }
.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(97,97,97); }
.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(0,188,212);
border-color: rgb(0,188,212); }
.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(0,188,212); }
/* FormGroup */
/* Navlayout */
/* keyframes 定义 */
@ -7529,7 +7565,8 @@ ul {
zoom: 1;
position: absolute;
right: 4px;
padding: 0 0 0 8px; }
padding: 0 0 0 8px;
top: -3px; }
.u-select-selection--multiple .u-select-selection-choice-remove:before {
display: block;
font-family: "uf"; }

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

35236
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -92,4 +92,4 @@
"react-addons-test-utils": "^15.5.0",
"react-dom": "^15.5.0"
}
}
}

99
src/FilterDropDown.js
View File

@ -1,4 +1,9 @@
/**
* 过滤行功能内的下拉条件
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Dropdown from 'bee-dropdown';
import Menu from 'bee-menus';
import Button from 'bee-button';
@ -7,13 +12,19 @@ import i18n from './i18n';
import { getComponentLocale } from 'bee-locale/build/tool';
const { Item } = Menu;
class FilterDropDown extends Component {
constructor() {
super();
this.state = {
selectValue: []
selectValue: []//选择的条件的值
}
}
/**
* 点击下拉菜单
*
* @param {*} s 选中的selectRecord
*/
onSelectDropdown = (s) => {
let { onSelectDropdown } = this.props;
if (onSelectDropdown) {
@ -24,6 +35,11 @@ class FilterDropDown extends Component {
});
}
}
/**
* 清除事件
*
*/
onClickClear = () => {
let { onClickClear } = this.props;
if (onClickClear) {
@ -34,36 +50,81 @@ class FilterDropDown extends Component {
});
}
}
/**
* 根据props来获得指定的Menu
*
* @returns JSX Menu
*/
getMenu = () => {
let { selectValue } = this.state;
let { filterDropdownType } = this.props;
let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
switch (filterDropdownType) {
case 'string':
return <Menu
onSelect={this.onSelectDropdown}
selectedKeys={selectValue}
>
<Item key="2">{locale['include']}</Item>
<Item key="6">{locale['exclusive']}</Item>
<Item key="1">{locale['equal']}</Item>
<Item key="5">{locale['unequal']}</Item>
<Item key="7">{locale['begin']}</Item>
<Item key="3">{locale['end']}</Item>
</Menu>
case 'number':
return <Menu
onSelect={this.onSelectDropdown}
selectedKeys={selectValue}
>
<Item key="1">{locale['greater_than']}</Item>
<Item key="2">{locale['great_than_equal_to']}</Item>
<Item key="3">{locale['less_than']}</Item>
<Item key="4">{locale['less_than_equal_to']}</Item>
<Item key="5">{locale['be_equal_to']}</Item>
<Item key="6">{locale['not_equal_to']}</Item>
</Menu>
default:
return null;
}
}
render() {
let { isShowCondition } = this.props;
let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
let dropmenu = (
<Menu
onSelect={this.onSelectDropdown}
selectedKeys={this.state.selectValue}
>
<Item key="2">{locale['include']}</Item>
<Item key="6">{locale['exclusive']}</Item>
<Item key="1">{locale['equal']}</Item>
<Item key="5">{locale['unequal']}</Item>
<Item key="7">{locale['begin']}</Item>
<Item key="3">{locale['end']}</Item>
</Menu>
);
return (<div className="filter-btns">
{isShowCondition == 'show' && <Dropdown
trigger={['click']}
overlay={dropmenu}
overlay={this.getMenu()}
animation="slide-up"
>
<Button shape="border" style={{ marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }}><Icon style={{ padding: 0 }} type="uf-filter" /></Button>
<Button
shape="border"
style={{ marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }}
>
<Icon style={{ padding: 0, color: '#585858' }} type="uf-filter" />
</Button>
</Dropdown>}
<Button onClick={this.onClickClear} shape="border" style={{ marginLeft: "1px", minWidth: "0px", width: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }}><Icon style={{ padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }} type="uf-filterno" /></Button>
<Button
onClick={this.onClickClear}
shape="border"
style={{ marginLeft: "1px", minWidth: "0px", width: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }}
>
<Icon style={{ padding: 0, color: '#585858', "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }} type="uf-filterno" />
</Button>
</div>
);
}
}
FilterDropDown.propTypes = {
isShowCondition: PropTypes.string,
filterDropdownType: PropTypes.oneOf(['string', 'number'])
}
FilterDropDown.defaultProps = {
isShowCondition: 'show',
filterDropdownType: 'number'
}
export default FilterDropDown;

18
src/i18n.js
View File

@ -7,6 +7,12 @@ module.exports = {
'unequal':'不等于',
'begin':'以开始',
'end':'以结尾',
'greater_than':'大于',
'great_than_equal_to':'大于等于',
'less_than':'小于',
'less_than_equal_to':'小于等于',
'be_equal_to':'等于',
'not_equal_to':'不等于',
'en-us': {
'resetSettings': 'reset settings',
'include': 'include',
@ -15,6 +21,12 @@ module.exports = {
'unequal':'unequal',
'begin':'begin',
'end':'end',
'greater_than':'greater than',
'great_than_equal_to':'great than equal to',
'less_than':'less than',
'less_than_equal_to':'less than equal to',
'be_equal_to':'be equal to',
'not_equal_to':'not equal to',
},
'zh-tw': {
'resetSettings': '還原設置',
@ -24,5 +36,11 @@ module.exports = {
'unequal':'不等於',
'begin':'以開始',
'end':'以結尾',
'greater_than':'大於',
'great_than_equal_to':'大於等於',
'less_than':'小於',
'less_than_equal to':'小於等於',
'be_equal_to':'等於',
'not_equal_to':'不等於'
}
}