archive-gh-me/ShadowEditor
1
0
Fork 0
mirror of https://github.com/tengge1/ShadowEditor.git synced 2026-01-25 15:08:11 +00:00
Code Issues Projects Releases Wiki Activity

SearchField.jsx代码优化。

Browse Source
This commit is contained in:
tengge1 2019-09-19 21:29:17 +08:00
parent b7dc3bd2b1
commit cb68fd346d
18 changed files with 92 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ShadowEditor.Web/locales/zh-CN.json
View File

@ -743,7 +743,7 @@
"Role Management": "角色管理",
"Authority Management": "权限管理",
"The name is already existed.": "该名称已经存在。",
"Create Time": "创建时间",
"Update Time": "最后更新时间",
"Create Date": "创建日期",
"Update Date": "更新日期",
"Status": "状态"
}

2
ShadowEditor.Web/src/editor/assets/AnimationPanel.jsx
View File

@ -63,6 +63,8 @@ class AnimationPanel extends React.Component {
<SearchField
data={categoryData}
placeholder={_t('Search Content')}
showAddButton={true}
showFilterButton={true}
onAdd={this.handleAdd}
onInput={this.handleSearch.bind(this)}></SearchField>
<ImageList

2
ShadowEditor.Web/src/editor/assets/AudioPanel.jsx
View File

@ -63,6 +63,8 @@ class AudioPanel extends React.Component {
<SearchField
data={categoryData}
placeholder={_t('Search Content')}
showAddButton={true}
showFilterButton={true}
onAdd={this.handleAdd}
onInput={this.handleSearch.bind(this)}></SearchField>
<ImageList

2
ShadowEditor.Web/src/editor/assets/CharacterPanel.jsx
View File

@ -61,7 +61,7 @@ class CharacterPanel extends React.Component {
<SearchField
data={categoryData}
placeholder={_t('Search Content')}
addHidden={true}
showFilterButton={true}
onInput={this.handleSearch.bind(this)}></SearchField>
<ImageList
data={imageListData}

2
ShadowEditor.Web/src/editor/assets/MapPanel.jsx
View File

@ -73,7 +73,7 @@ class MapPanel extends React.Component {
className={'search'}
data={categoryData}
placeholder={_t('Search Content')}
addHidden={true}
showFilterButton={true}
onInput={this.handleSearch.bind(this)}></SearchField>
</div>
<ImageList

2
ShadowEditor.Web/src/editor/assets/MaterialPanel.jsx
View File

@ -62,7 +62,7 @@ class MaterialPanel extends React.Component {
<SearchField
data={categoryData}
placeholder={_t('Search Content')}
addHidden={true}
showFilterButton={true}
onInput={this.handleSearch.bind(this)}></SearchField>
<ImageList
data={imageListData}

2
ShadowEditor.Web/src/editor/assets/ModelPanel.jsx
View File

@ -62,6 +62,8 @@ class ModelPanel extends React.Component {
<SearchField
data={categoryData}
placeholder={_t('Search Content')}
showAddButton={true}
showFilterButton={true}
onAdd={this.handleAdd}
onInput={this.handleSearch.bind(this)}></SearchField>
<ImageList

2
ShadowEditor.Web/src/editor/assets/ParticlePanel.jsx
View File

@ -61,7 +61,7 @@ class ParticlePanel extends React.Component {
<SearchField
data={categoryData}
placeholder={_t('Search Content')}
addHidden={true}
showFilterButton={true}
onInput={this.handleSearch.bind(this)}></SearchField>
<ImageList
data={imageListData}

2
ShadowEditor.Web/src/editor/assets/PrefabPanel.jsx
View File

@ -61,7 +61,7 @@ class PrefabPanel extends React.Component {
<SearchField
data={categoryData}
placeholder={_t('Search Content')}
addHidden={true}
showFilterButton={true}
onInput={this.handleSearch.bind(this)}></SearchField>
<ImageList
data={imageListData}

2
ShadowEditor.Web/src/editor/assets/ScenePanel.jsx
View File

@ -59,7 +59,7 @@ class ScenePanel extends React.Component {
<SearchField
data={categoryData}
placeholder={_t('Search Content')}
addHidden={true}
showFilterButton={true}
onInput={this.handleSearch.bind(this)}></SearchField>
<ImageList
data={imageListData}

2
ShadowEditor.Web/src/editor/assets/ScreenshotPanel.jsx
View File

@ -60,7 +60,7 @@ class ScreenshotPanel extends React.Component {
<SearchField
data={categoryData}
placeholder={_t('Search Content')}
addHidden={true}
showFilterButton={true}
onInput={this.handleSearch.bind(this)}></SearchField>
<ImageList
data={imageListData}

2
ShadowEditor.Web/src/editor/assets/VideoPanel.jsx
View File

@ -60,7 +60,7 @@ class VideoPanel extends React.Component {
<SearchField
data={categoryData}
placeholder={_t('Search Content')}
addHidden={true}
showFilterButton={true}
onInput={this.handleSearch.bind(this)}></SearchField>
<ImageList
data={imageListData}

25
ShadowEditor.Web/src/editor/menu/window/RoleManageWindow.jsx
View File

@ -1,5 +1,5 @@
import './css/RoleManageWindow.css';
import { Window, Content, Toolbar, Label, Input, Button, DataGrid, Columns, Column } from '../../../third_party';
import { Window, Content, Toolbar, Label, Input, Button, DataGrid, Columns, Column, ToolbarFiller, SearchField } from '../../../third_party';
import EditRoleWindow from './role/EditRoleWindow.jsx';
/**
@ -40,14 +40,25 @@ class RoleManageWindow extends React.Component {
<Content>
<Toolbar>
<Button onClick={this.handleAdd}>{_t('Create')}</Button>
<Button onClick={this.handleAdd}>{_t('Edit')}</Button>
<Button onClick={this.handleAdd}>{_t('Delete')}</Button>
<ToolbarFiller></ToolbarFiller>
<SearchField placeholder={_t('Search Content')}></SearchField>
</Toolbar>
<DataGrid data={data} pageSize={pageSize} pageNum={pageNum} total={total} selected={selected} onSelect={this.handleSelect} keyField={'ID'}>
<DataGrid data={data}
pages={true}
pageSize={pageSize}
pageNum={pageNum}
total={total}
selected={selected}
onSelect={this.handleSelect}
keyField={'ID'}>
<Columns>
<Column type={'number'} title={'#'}></Column>
<Column field={'Name'} title={_t('Name')}></Column>
<Column field={'CreateTime'} title={_t('Create Time')}></Column>
<Column field={'UpdateTime'} title={_t('Update Time')}></Column>
<Column field={'Status'} title={_t('Status')} renderer={this.renderStatus}></Column>
<Column field={'CreateTime'} title={_t('Create Date')} width={80} align={'center'} renderer={this.renderDate}></Column>
<Column field={'UpdateTime'} title={_t('Update Date')} width={80} align={'center'} renderer={this.renderDate}></Column>
<Column field={'Status'} title={_t('Status')} width={50} align={'center'} renderer={this.renderStatus}></Column>
</Columns>
</DataGrid>
</Content>
@ -85,6 +96,10 @@ class RoleManageWindow extends React.Component {
app.removeElement(this);
}
renderDate(value) {
return value.split(' ')[0];
}
renderStatus(value) {
return value === 0 ? '启用' : '禁用';
}

10
ShadowEditor.Web/src/editor/menu/window/css/RoleManageWindow.css
View File

@ -5,6 +5,16 @@
bottom: 0;
}
.Window.RoleManageWindow>.wrap>.content>.Toolbar>.Button {
height: 20px;
line-height: 20px;
font-size: 12px;
}
.Window.RoleManageWindow>.wrap>.content>.Toolbar>.SearchField {
width: 240px;
}
.Window.RoleManageWindow>.wrap>.content>.DataGrid {
height: calc(100% - 25px);
}

21
ShadowEditor.Web/src/ui/form/SearchField.jsx
View File

@ -30,14 +30,11 @@ class SearchField extends React.Component {
}
render() {
const { className, style, data, placeholder, addHidden } = this.props;
const { className, style, data, placeholder, showAddButton, showFilterButton } = this.props;
const { value, categories, filterShow } = this.state;
return <div className={classNames('SearchField', className)} onClick={this.stopPropagation}>
<IconButton
className={classNames(addHidden && 'hidden')}
icon={'add'}
onClick={this.handleAdd}></IconButton>
{showAddButton && <IconButton icon={'add'} onClick={this.handleAdd}></IconButton>}
<input
className={'input'}
style={style}
@ -50,11 +47,11 @@ class SearchField extends React.Component {
<IconButton
icon={'close'}
onClick={this.handleReset}></IconButton>
<IconButton
{showFilterButton && <IconButton
icon={'filter'}
className={classNames(filterShow && 'selected')}
onClick={this.handleShowFilter}></IconButton>
<div className={classNames('category', !filterShow && 'hidden')}>
onClick={this.handleShowFilter}></IconButton>}
{showFilterButton && <div className={classNames('category', !filterShow && 'hidden')}>
<div className={'item'} key={''}>
<CheckBox name={''} checked={categories.indexOf('') > -1} onChange={this.handleCheckBoxChange}></CheckBox>
<label className={'title'}>{_t('No Type')}</label>
@ -68,7 +65,7 @@ class SearchField extends React.Component {
<label className={'title'}>{n.Name}</label>
</div>;
})}
</div>
</div>}
</div>;
}
@ -153,10 +150,11 @@ SearchField.propTypes = {
value: PropTypes.string,
data: PropTypes.array,
placeholder: PropTypes.string,
showAddButton: PropTypes.bool,
showFilterButton: PropTypes.bool,
onAdd: PropTypes.func,
onChange: PropTypes.func,
onInput: PropTypes.func,
addHidden: PropTypes.bool,
};
SearchField.defaultProps = {
@ -165,10 +163,11 @@ SearchField.defaultProps = {
value: '',
data: [],
placeholder: 'Enter a keyword',
showAddButton: false,
showFilterButton: false,
onAdd: null,
onChange: null,
onInput: null,
addHidden: false,
};
export default SearchField;

1
ShadowEditor.Web/src/ui/form/css/Button.css
View File

@ -2,6 +2,7 @@
height: 24px;
margin: 0 4px;
padding: 0 8px;
line-height: 24px;
color: #fff;
background-color: #e74c3c;
border: none;

66
ShadowEditor.Web/src/ui/table/DataGrid.jsx
View File

@ -18,45 +18,45 @@ class DataGrid extends React.Component {
render() {
const { className, style, children, pages, data, keyField, pageSize, pageNum, total, selected } = this.props;
// 表格列
const columns = children.props.children.map(n => {
return {
type: n.props.type,
field: n.props.field,
title: n.props.title,
renderer: n.props.renderer,
};
return n.props;
});
const header = <thead>
<tr>
{columns.map(n => {
let field = n.type === 'number' ? 'number' : n.field;
return <td name={n.field} key={field}>{n.title}</td>;
})}
</tr>
</thead>;
const body = <tbody>
{data.map((row, i) => {
return <tr className={selected === row[keyField] ? 'selected' : null} data-id={row[keyField]} key={row[keyField]} onClick={this.handleClick}>
{columns.map(col => {
if (col.type === 'number') {
const value = col.renderer ? col.renderer(i + 1, row, col) : (i + 1);
return <td className={'number'} key={'number'}>{value}</td>;
} else {
const value = col.renderer ? col.renderer(row[col.field]) : row[col.field];
return <td key={col.field}>{value}</td>;
}
// 表格头
const head = <table className={'head'}>
<thead>
<tr>
{columns.map(n => {
let field = n.type === 'number' ? 'number' : n.field;
return <th className={n.type === 'number' ? 'number' : null} name={n.field} key={field}>{n.title}</th>;
})}
</tr>;
})}
</tbody>;
</tr>
</thead>
</table>;
// 表格体
const body = <table className={'body'}>
<tbody>
{data.map((row, i) => {
return <tr className={selected === row[keyField] ? 'selected' : null} data-id={row[keyField]} key={row[keyField]} onClick={this.handleClick}>
{columns.map(col => {
if (col.type === 'number') {
const value = col.renderer ? col.renderer(i + 1, row, col) : (i + 1);
return <td className={'number'} key={'number'}>{value}</td>;
} else {
const value = col.renderer ? col.renderer(row[col.field]) : row[col.field];
return <td key={col.field}>{value}</td>;
}
})}
</tr>;
})}
</tbody>
</table>;
return <div className={classNames('DataGrid', className)} style={style}>
<table>
{header}
{body}
</table>
{head}
{body}
</div>;
}

4
ShadowEditor.Web/src/ui/table/css/DataGrid.css
View File

@ -34,14 +34,14 @@
background-color: #3399ff;
}
.DataGrid>table>thead>tr>td,
.DataGrid>table>thead>tr>th,
.DataGrid>table>tbody>tr>td {
padding: 0 16px;
border: 1px solid #ebebeb;
box-sizing: border-box;
}
.DataGrid>table>thead>tr>td.number,
.DataGrid>table>thead>tr>th.number,
.DataGrid>table>tbody>tr>td.number {
width: 60px;
}