74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
import React, { Component } from 'react';
|
|
import { RouteComponentProps } from 'react-router';
|
|
import { MultiLang } from '../config';
|
|
import Functions from '../functions';
|
|
import DatabaseListItem from './lib/DatabaseListItem';
|
|
import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
|
|
|
|
interface Params {
|
|
itemType: string;
|
|
subItemType: string;
|
|
}
|
|
|
|
interface Props extends RouteComponentProps<Params> {
|
|
lang: MultiLang;
|
|
}
|
|
|
|
interface State {
|
|
itemType: string;
|
|
subItemType: string;
|
|
}
|
|
|
|
class DatabaseSearchByItemType extends Component<Props, State> {
|
|
|
|
constructor(props: Props) {
|
|
super(props);
|
|
const { params } = this.props.match;
|
|
this.state = {
|
|
itemType: params.itemType ? params.itemType : '',
|
|
subItemType: params.subItemType ? params.subItemType : '',
|
|
};
|
|
this.searchFunc = this.searchFunc.bind(this);
|
|
}
|
|
|
|
static getDerivedStateFromProps(nextProps: Props, prevState: State) {
|
|
const { params } = nextProps.match;
|
|
const item_type = params.itemType ? params.itemType : '';
|
|
const sub_item_type = params.subItemType ? params.subItemType : '';
|
|
if (prevState.itemType !== item_type || prevState.subItemType !== sub_item_type) {
|
|
return { item_type, sub_item_type };
|
|
}
|
|
return null;
|
|
}
|
|
|
|
searchFunc(condition: SortCondition, func: SearchCallbackFunc) {
|
|
if (this.state.itemType === '') {
|
|
const res = { total: 0, data: [] };
|
|
func(res);
|
|
} else {
|
|
ItemUtil.getListByItemType(this.state.itemType, this.state.subItemType, condition, func);
|
|
}
|
|
}
|
|
|
|
getUrl() {
|
|
let url = ItemUtil.getItemTypeSearchUrl(this.state.itemType);
|
|
if (this.state.subItemType !== '') {
|
|
url += '/' + this.state.subItemType;
|
|
}
|
|
return url;
|
|
}
|
|
|
|
render() {
|
|
const { lang } = this.props;
|
|
const baseUrl = this.getUrl();
|
|
return (
|
|
<div className="list">
|
|
<h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
|
|
<DatabaseListItem lang={lang} url={baseUrl} search={this.searchFunc} />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default DatabaseSearchByItemType;
|