renamed folder database to xoonips.

src/xoonips/Xoonips.module.css

@@ -0,0 +1,70 @@
+.database {
+  margin: 0;
+}
+
+.database :global(.list) {
+  width: 100%;
+}
+
+.database :global(.listTable) {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 5px;
+}
+
+.database :global(.listTable .listIcon),
+.database :global(.listTable .listExtra) {
+  vertical-align: middle;
+  text-align: center;
+  width: 65px;
+  line-height: 0;
+}
+
+.database :global(.itemDetail) {
+  border-collapse: separate;
+  border-spacing: 1px;
+}
+.database :global(.itemDetail .head) {
+  width: 30%;
+}
+
+.database :global(.itemDetail .readme),
+.database :global(.itemDetail .rights) {
+  background-color: #ffffff;
+  width: 100%;
+  max-height: 200px;
+  overflow: auto;
+}
+
+.database :global(.advancedSearch .head) {
+  width: 30%;
+}
+
+.database :global(.advancedSearch .search) {
+  text-align: center;
+  margin: 10px;
+}
+
+.database :global(.advancedSearch .itemtype) {
+  margin-bottom: 5px;
+}
+
+.database :global(.advancedSearch .itemtype .itemtypeName),
+.database :global(.advancedSearch .itemtype .itemtypeFields) {
+  border-collapse: separate;
+  border-spacing: 1px;
+}
+
+.database :global(.advancedSearch .itemtype .itemtypeName th) {
+  padding: 5px;
+}
+
+.database :global(.advancedSearch .fieldDateLabel) {
+  display: inline-block;
+  width: 50px;
+}
+
+.database :global(.advancedSearch .fieldDate select),
+.database :global(.advancedSearch .fieldDate input) {
+  margin: 0 5px 0 0;
+}

src/xoonips/Xoonips.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import { Helmet } from 'react-helmet-async';
+import { Route, Routes, useLocation } from 'react-router-dom';
+import PageNotFound from '../common/lib/PageNotFound';
+import { BrainAtlasType, MultiLang } from '../config';
+import Functions from '../functions';
+import XoonipsAdvancedSearch from './XoonipsAdvancedSearch';
+import XoonipsDetailItem from './XoonipsDetailItem';
+import XoonipsSearchByAdvancedKeyword from './XoonipsSearchByAdvancedKeyword';
+import XoonipsSearchByIndexId from './XoonipsSearchByIndexId';
+import XoonipsSearchByItemType from './XoonipsSearchByItemType';
+import XoonipsSearchByKeyword from './XoonipsSearchByKeyword';
+import XoonipsTop from './XoonipsTop';
+import { INDEX_ID_PUBLIC } from './lib/IndexUtil';
+
+import styles from './Xoonips.module.css';
+
+interface Props {
+  lang: MultiLang;
+  type: BrainAtlasType;
+}
+
+const ItemDetail: React.FC<Props> = (props) => {
+  const { lang, type } = props;
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const itemId_ = params.get('item_id') ?? '';
+  const itemId = /^\d+$/.test(itemId_) ? parseInt(itemId_, 10) : 0;
+  const doi = params.get('id') ?? '';
+  return <XoonipsDetailItem lang={lang} id={itemId} doi={doi} type={type} />;
+};
+
+const ItemList: React.FC<Props> = (props) => {
+  const { lang, type } = props;
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const id = params.get('index_id') ?? '';
+  const indexId = /^\d+$/.test(id) ? parseInt(id, 10) : INDEX_ID_PUBLIC;
+  return <XoonipsSearchByIndexId lang={lang} type={type} indexId={indexId} />;
+};
+
+const ItemSelect: React.FC<Props> = (props) => {
+  const { lang, type } = props;
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const op = params.get('op') ?? '';
+  switch (op) {
+    case 'itemtypesearch': {
+      const searchItemtype = params.get('search_itemtype') ?? '';
+      const match = searchItemtype.match(/^xnp([a-z]+)$/);
+      const itemType = match !== null ? match[1] : '';
+      return <XoonipsSearchByItemType lang={lang} itemType={itemType} subItemType="" type={type} />;
+    }
+    case 'itemsubtypesearch': {
+      const searchItemtype = params.get('search_itemtype') ?? '';
+      const match = searchItemtype.match(/^xnp([a-z]+)$/);
+      const itemType = match !== null ? match[1] : '';
+      const subItemtype = params.get('search_subitemtype') ?? '';
+      return (
+        <XoonipsSearchByItemType
+          lang={lang}
+          itemType={itemType}
+          subItemType={subItemtype}
+          type={type}
+        />
+      );
+    }
+    case 'quicksearch': {
+      return <XoonipsSearchByKeyword lang={lang} type={type} />;
+    }
+    case 'advanced': {
+      return <XoonipsSearchByAdvancedKeyword lang={lang} type={type} />;
+    }
+  }
+  return <PageNotFound lang={lang} />;
+};
+
+const Xoonips: React.FC<Props> = (props) => {
+  const { lang, type } = props;
+  return (
+    <div className={styles.database}>
+      <Helmet>
+        <title>
+          {Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} -{' '}
+          {Functions.siteTitle(lang)}
+        </title>
+      </Helmet>
+      <Routes>
+        <Route index element={<XoonipsTop lang={lang} type={type} />} />
+        <Route path="index.php" element={<XoonipsTop lang={lang} type={type} />} />
+        <Route path="detail.php" element={<ItemDetail lang={lang} type={type} />} />
+        <Route path="listitem.php" element={<ItemList lang={lang} type={type} />} />
+        <Route path="itemselect.php" element={<ItemSelect lang={lang} type={type} />} />
+        <Route
+          path="advanced_search.php"
+          element={<XoonipsAdvancedSearch lang={lang} type={type} />}
+        />
+        <Route path="*" element={<PageNotFound lang={lang} />} />
+      </Routes>
+    </div>
+  );
+};
+
+export default Xoonips;

src/xoonips/XoonipsAdvancedSearch.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { useNavigate } from 'react-router-dom';
+import Config, { BrainAtlasType, MultiLang } from '../config';
+import Functions from '../functions';
+import ItemType from './item-type';
+import AdvancedSearchQuery from './lib/AdvancedSearchQuery';
+import ItemUtil from './lib/ItemUtil';
+
+interface Props {
+  lang: MultiLang;
+  type: BrainAtlasType;
+}
+
+const XoonipsAdvancedSearch: React.FC<Props> = (props) => {
+  const { lang, type } = props;
+  const query = new AdvancedSearchQuery();
+  const navigate = useNavigate();
+
+  const handleClickSearchButton = () => {
+    if (!query.empty()) {
+      const url = ItemUtil.getSearchByAdvancedKeywordsUrl(type, query);
+      navigate(url);
+    }
+  };
+
+  return (
+    <div className="advancedSearch">
+      <h3>{Functions.mlang('[en]Search Items[/en][ja]アイテム検索[/ja]', lang)}</h3>
+      <div className="search">
+        <button className="formButton" onClick={handleClickSearchButton}>
+          Search
+        </button>
+      </div>
+      {Config.XOONIPS_ITEMTYPES.map((type) => {
+        return <ItemType.AdvancedSearch key={type} type={`xnp${type}`} lang={lang} query={query} />;
+      })}
+      <div className="search">
+        <button className="formButton" onClick={handleClickSearchButton}>
+          Search
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default XoonipsAdvancedSearch;

src/xoonips/XoonipsDetailItem.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { Helmet } from 'react-helmet-async';
+import Loading from '../common/lib/Loading';
+import PageNotFound from '../common/lib/PageNotFound';
+import { BrainAtlasType, MultiLang } from '../config';
+import Functions from '../functions';
+import ItemType from './item-type';
+import ItemUtil, { Item } from './lib/ItemUtil';
+
+interface Props {
+  lang: MultiLang;
+  type: BrainAtlasType;
+  id: number;
+  doi: string;
+}
+
+const XoonipsDetailItem: React.FC<Props> = (props) => {
+  const { lang, type, id, doi } = props;
+
+  const [loading, setLoading] = React.useState<boolean>(true);
+  const [item, setItem] = React.useState<Item | null>(null);
+
+  React.useEffect(() => {
+    if (doi !== '') {
+      ItemUtil.getByDoi(type, doi, (item) => {
+        setItem(item);
+        setLoading(false);
+      });
+    } else if (id !== 0) {
+      ItemUtil.get(type, id, (item) => {
+        setItem(item);
+        setLoading(false);
+      });
+    } else {
+      setLoading(true);
+    }
+  }, [type, id, doi]);
+
+  if (loading) {
+    return <Loading />;
+  }
+  if (item === null) {
+    return <PageNotFound lang={lang} />;
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {Functions.mlang(item.title, lang)} -{' '}
+          {Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} -{' '}
+          {Functions.siteTitle(lang)}
+        </title>
+      </Helmet>
+      <h3>{Functions.mlang('[en]Detail[/en][ja]詳細[/ja]', lang)}</h3>
+      <br />
+      <ItemType.Detail lang={lang} item={item} type={type} />
+    </>
+  );
+};
+
+export default XoonipsDetailItem;

src/xoonips/XoonipsSearchByAdvancedKeyword.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { useLocation } from 'react-router-dom';
+import { BrainAtlasType, MultiLang } from '../config';
+import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
+import XoonipsListItem from './lib/XoonipsListItem';
+
+interface Props {
+  lang: MultiLang;
+  type: BrainAtlasType;
+}
+
+const XoonipsSearchByAdvancedKeyword: React.FC<Props> = (props) => {
+  const { lang, type } = props;
+  const location = useLocation();
+  const query = ItemUtil.getAdvancedSearchQueryByQuery(location.search);
+
+  const searchFunc = (condition: SortCondition, func: SearchCallbackFunc) => {
+    ItemUtil.getListByAdvancedSearchQuery(type, query, condition, func);
+  };
+
+  const baseUrl = ItemUtil.getSearchByAdvancedKeywordsUrl(type, query);
+
+  return (
+    <div className="list">
+      <h3>Listing item</h3>
+      <XoonipsListItem lang={lang} url={baseUrl} search={searchFunc} type={type} />
+    </div>
+  );
+};
+
+export default XoonipsSearchByAdvancedKeyword;

src/xoonips/XoonipsSearchByIndexId.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import { Helmet } from 'react-helmet-async';
+import { Link } from 'react-router-dom';
+import Loading from '../common/lib/Loading';
+import PageNotFound from '../common/lib/PageNotFound';
+import { BrainAtlasType, MultiLang } from '../config';
+import Functions from '../functions';
+import IndexUtil, { Index } from './lib/IndexUtil';
+import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
+import XoonipsListIndex from './lib/XoonipsListIndex';
+import XoonipsListItem from './lib/XoonipsListItem';
+
+interface Props {
+  lang: MultiLang;
+  type: BrainAtlasType;
+  indexId: number;
+}
+
+const XoonipsSearchByIndexId: React.FC<Props> = (props) => {
+  const { lang, type, indexId } = props;
+
+  const [notFound, setNotFound] = React.useState<boolean>(false);
+  const [index, setIndex] = React.useState<Index | null>(null);
+  const [parents, setParents] = React.useState<{ title: string; node: React.ReactNode }>({
+    title: '',
+    node: null,
+  });
+
+  const searchFunc = (condition: SortCondition, func: SearchCallbackFunc) => {
+    if (indexId === 0) {
+      const res = { total: 0, data: [] };
+      func(res);
+    } else {
+      ItemUtil.getListByIndexId(type, indexId, condition, func);
+    }
+  };
+
+  React.useEffect(() => {
+    IndexUtil.get(type, indexId, (index) => {
+      setIndex(index);
+      if (index == null) {
+        setNotFound(true);
+      } else {
+        IndexUtil.getParents(type, indexId, (pIndexes) => {
+          const parents = pIndexes.map((index: Index) => {
+            const url: string = IndexUtil.getUrl(type, index.id);
+            const title = Functions.mlang(index.title, lang);
+            return (
+              <React.Fragment key={index.id}>
+                / <Link to={url}>{title}</Link>{' '}
+              </React.Fragment>
+            );
+          });
+          const title = pIndexes
+            .map((index) => {
+              return '/' + Functions.mlang(index.title, lang);
+            })
+            .join('');
+          setParents({ title: title, node: parents });
+        });
+      }
+    });
+  }, [indexId, lang, type]);
+
+  if (notFound) {
+    return <PageNotFound lang={lang} />;
+  }
+
+  if (index == null) {
+    return <Loading />;
+  }
+  const baseUrl = indexId === 0 ? '/' : IndexUtil.getUrl(type, indexId);
+
+  return (
+    <div className="list">
+      <Helmet>
+        <title>
+          {Functions.mlang(parents.title, lang)} -{' '}
+          {Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} -{' '}
+          {Functions.siteTitle(lang)}
+        </title>
+      </Helmet>
+      <h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
+      <div>{parents.node}</div>
+      <XoonipsListIndex lang={lang} index={index} type={type} />
+      <XoonipsListItem lang={lang} url={baseUrl} search={searchFunc} type={type} />
+    </div>
+  );
+};
+
+export default XoonipsSearchByIndexId;

src/xoonips/XoonipsSearchByItemType.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { BrainAtlasType, MultiLang } from '../config';
+import Functions from '../functions';
+import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
+import XoonipsListItem from './lib/XoonipsListItem';
+
+interface Props {
+  lang: MultiLang;
+  itemType: string;
+  subItemType: string;
+  type: BrainAtlasType;
+}
+
+const XoonipsSearchByItemType: React.FC<Props> = (props) => {
+  const { lang, itemType, subItemType, type } = props;
+
+  const searchFunc = (condition: SortCondition, func: SearchCallbackFunc) => {
+    if (itemType === '') {
+      const res = { total: 0, data: [] };
+      func(res);
+    } else {
+      ItemUtil.getListByItemType(type, itemType, subItemType, condition, func);
+    }
+  };
+
+  const baseUrl = ItemUtil.getItemTypeSearchUrl(type, itemType, subItemType);
+
+  return (
+    <div className="list">
+      <h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
+      <XoonipsListItem lang={lang} url={baseUrl} search={searchFunc} type={type} />
+    </div>
+  );
+};
+
+export default XoonipsSearchByItemType;

src/xoonips/XoonipsSearchByKeyword.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { useLocation } from 'react-router-dom';
+import { BrainAtlasType, MultiLang } from '../config';
+import Functions from '../functions';
+import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
+import XoonipsListItem from './lib/XoonipsListItem';
+
+interface Props {
+  lang: MultiLang;
+  type: BrainAtlasType;
+}
+
+const XoonipsSearchByKeyword: React.FC<Props> = (props) => {
+  const { lang, type } = props;
+
+  const location = useLocation();
+  const query = ItemUtil.getSearchKeywordByQuery(location.search);
+
+  const searchFunc = (condition: SortCondition, func: SearchCallbackFunc) => {
+    if (query.keyword === '') {
+      const res = { total: 0, data: [] };
+      func(res);
+    } else {
+      ItemUtil.getListByKeyword(type, query.type, query.keyword, condition, func);
+    }
+  };
+
+  const baseUrl = ItemUtil.getSearchByKeywordUrl(type, query.type, query.keyword);
+  return (
+    <div className="list">
+      <h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
+      <p>
+        {Functions.mlang('[en]Search Keyword[/en][ja]検索キーワード[/ja]', lang)} : {query.keyword}
+      </p>
+      <XoonipsListItem lang={lang} url={baseUrl} search={searchFunc} type={type} />
+    </div>
+  );
+};
+
+export default XoonipsSearchByKeyword;

src/xoonips/XoonipsTop.module.css

@@ -0,0 +1,13 @@
+.itemTypes .itemType {
+  width: 50%;
+  padding: 5px;
+}
+
+.itemTypes .itemType :global(table) {
+  width: auto;
+}
+
+.itemTypes .itemType :global(table .itemTypeName) {
+  vertical-align: middle;
+  font-size: large;
+}

src/xoonips/XoonipsTop.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import Config, { BrainAtlasType, MultiLang } from '../config';
+import ItemType from './item-type';
+
+import styles from './XoonipsTop.module.css';
+
+interface Props {
+  lang: MultiLang;
+  type: BrainAtlasType;
+}
+
+const XoonipsTop: React.FC<Props> = (props) => {
+  const { lang, type } = props;
+  const types: string[][] = [];
+  const len = Config.XOONIPS_ITEMTYPES.length;
+  for (let i = 0; i < Math.ceil(len / 2); i++) {
+    const j = i * 2;
+    const p = Config.XOONIPS_ITEMTYPES.slice(j, j + 2);
+    types.push(p);
+  }
+  return (
+    <table className={styles.itemTypes}>
+      <tbody>
+        {types.map((value, idx) => {
+          return (
+            <tr key={idx}>
+              {value.map((itemType, idx) => {
+                return (
+                  <td key={idx} className={styles.itemType}>
+                    {itemType !== '' && (
+                      <ItemType.Top lang={lang} itemType={'xnp' + itemType} type={type} />
+                    )}
+                  </td>
+                );
+              })}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+export default XoonipsTop;

src/xoonips/XoonipsXoopsPathRedirect.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+
+import { Navigate, useLocation } from 'react-router-dom';
+import PageNotFound from '../common/lib/PageNotFound';
+import { MultiLang } from '../config';
+import Functions from '../functions';
+
+interface Props {
+  lang: MultiLang;
+}
+
+const XoonipsXoopsPathRedirect: React.FC<Props> = (props) => {
+  const { lang } = props;
+  const location = useLocation();
+
+  const getRedirectUrl = (): string => {
+    const pathname = location.pathname || '';
+    const query = new URLSearchParams(location.search);
+    const search = new RegExp('^/modules/xoonips(?:/+(.*))?$');
+    const matches = pathname.match(search);
+    if (matches === null) {
+      return '';
+    }
+    const path = matches[1] || '';
+    switch (path) {
+      case '':
+      case 'index.php': {
+        return '/database';
+      }
+      case 'detail.php': {
+        const id = query.get('id');
+        if (id !== null) {
+          return '/database/item/id/' + Functions.escape(id);
+        }
+        const itemId = query.get('item_id');
+        if (itemId?.match(/^\d+$/) != null) {
+          return '/database/item/' + Functions.escape(itemId);
+        }
+        return '';
+      }
+      case 'listitem.php': {
+        const indexId = query.get('index_id');
+        if (indexId?.match(/^\d+$/) != null) {
+          const params = new URLSearchParams();
+          [
+            { qKey: 'orderby', pKey: 'orderby', isNumber: false },
+            { qKey: 'order_dir', pKey: 'order_dir', isNumber: true },
+            { qKey: 'itemcount', pKey: 'itemcount', isNumber: true },
+            { qKey: 'page', pKey: 'page', isNumber: true },
+          ].forEach(({ qKey, pKey, isNumber }) => {
+            const v = query.get(qKey);
+            if (v == null || v.length === 0) {
+              return;
+            }
+            if (isNumber && v.match(/^\d+$/) != null) {
+              return;
+            }
+            params.set(pKey, v);
+          });
+          const paramStr = params.toString();
+          return (
+            `/database/list/${Functions.escape(indexId)}` +
+            (paramStr.length > 0 ? `?${paramStr}` : '')
+          );
+        }
+        break;
+      }
+      case 'itemselect.php': {
+        const op = query.get('op');
+        if (op === null) {
+          break;
+        }
+        switch (op) {
+          case 'quicksearch': {
+            const keyword = query.get('keyword');
+            const itemType = query.get('search_itemtype');
+            if (keyword === null || itemType === null || keyword === '') {
+              return '';
+            }
+            const type = itemType.replace('xnp', '');
+            if (itemType !== 'basic' && itemType !== 'all' && itemType.match(/^xnp.+/) === null) {
+              return '';
+            }
+            const params = new URLSearchParams({ type, keyword });
+            [
+              { qKey: 'orderby', pKey: 'orderby', isNumber: false },
+              { qKey: 'orderdir', pKey: 'order_dir', isNumber: true },
+              { qKey: 'item_per_page', pKey: 'itemcount', isNumber: true },
+              { qKey: 'page', pKey: 'page', isNumber: true },
+            ].forEach(({ qKey, pKey, isNumber }) => {
+              const v = query.get(qKey);
+              if (v == null || v.length === 0) {
+                return;
+              }
+              if (isNumber && v.match(/^\d+$/) != null) {
+                return;
+              }
+              params.set(pKey, v);
+            });
+            return '/database/search?' + params.toString();
+          }
+          case 'itemtypesearch': {
+            const itemType = query.get('search_itemtype');
+            if (itemType?.match(/^xnp.+/) == null) {
+              return '';
+            }
+            const type = itemType.replace('xnp', '');
+            return '/database/search/itemtype/' + Functions.escape(type);
+          }
+          case 'itemsubtypesearch': {
+            let type = '';
+            let subtype = '';
+            query.forEach((v, k) => {
+              if (k.match(/^xnp[a-z]+$/) !== null && !!v) {
+                type = k.replace('xnp', '');
+                return;
+              }
+            });
+            if (type === '') {
+              return '';
+            }
+            query.forEach((v, k) => {
+              if (k.match(`^xnp${type}_.+$`) !== null && !!v) {
+                subtype = v;
+                return;
+              }
+            });
+            if (subtype === '') {
+              return '';
+            }
+            return (
+              '/database/search/itemtype/' +
+              Functions.escape(type) +
+              '/' +
+              Functions.escape(subtype)
+            );
+          }
+        }
+        return '';
+      }
+      case 'advanced_search.php': {
+        return '/database/advanced';
+      }
+    }
+    return '';
+  };
+
+  const url = getRedirectUrl();
+  if (url === '') {
+    return <PageNotFound lang={lang} />;
+  }
+  return <Navigate to={url} />;
+};
+
+export default XoonipsXoopsPathRedirect;

src/xoonips/assets/simpf-links.json

@@ -0,0 +1 @@
+[]

src/xoonips/blocks/IndexTree.module.css

@@ -0,0 +1,109 @@
+.indexTree {
+  border-top: 1px solid #999999;
+  border-left: 1px solid #999999;
+  border-bottom: 1px solid #404040;
+  border-right: 1px solid #404040;
+  background-color: white;
+  height: 400px;
+  width: calc(100% - 6px);
+  overflow: auto;
+  margin: 0 auto;
+  padding: 3px;
+  line-height: 100%;
+}
+
+.formButton {
+  margin: 3px 3px 10px;
+}
+
+.indexTree div span {
+  color: #333;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 19px;
+  vertical-align: bottom;
+}
+
+.indexTree div span:hover {
+  color: #f60;
+}
+
+.indexTree:global(.rc-tree .rc-tree-treenode) {
+  line-height: 20px;
+  white-space: nowrap;
+}
+.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent) {
+  display: inline-block;
+}
+.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit) {
+  display: inline-block;
+  height: 20px;
+  width: 9px;
+  background: url(../assets/images/tree_line.png);
+}
+.indexTree:global(
+    .rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:not(:last-child)
+  ) {
+  background-position: -9px 0;
+}
+.indexTree:global(
+    .rc-tree
+      .rc-tree-treenode
+      .rc-tree-indent
+      .rc-tree-indent-unit:not(:last-child).rc-tree-indent-unit-end
+  ) {
+  background-position: -18px 0;
+}
+.indexTree:global(
+    .rc-tree
+      .rc-tree-treenode
+      .rc-tree-indent
+      .rc-tree-indent-unit:last-child.rc-tree-indent-unit-end
+  ) {
+  background-position: -27px 0;
+}
+
+.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-switcher) {
+  display: inline-block;
+  height: 20px;
+  width: 16px;
+  margin-right: 2px;
+  background: url(../assets/images/tree_node.png);
+  cursor: pointer;
+}
+.indexTree:global(.rc-tree .rc-tree-treenode:first-child .rc-tree-switcher.rc-tree-switcher-noop) {
+  background-position: 0 0;
+  cursor: auto;
+}
+.indexTree:global(.rc-tree .rc-tree-treenode:first-child .rc-tree-switcher.rc-tree-switcher_open) {
+  background-position: -16px 0;
+}
+.indexTree:global(.rc-tree .rc-tree-treenode:first-child .rc-tree-switcher.rc-tree-switcher_close) {
+  background-position: -32px 0;
+}
+.indexTree:global(
+    .rc-tree .rc-tree-treenode:not(:first-child) .rc-tree-switcher.rc-tree-switcher-noop
+  ) {
+  background-position: 0 -20px;
+  cursor: auto;
+}
+.indexTree:global(
+    .rc-tree .rc-tree-treenode:not(:first-child) .rc-tree-switcher.rc-tree-switcher_open
+  ) {
+  background-position: -16px -20px;
+}
+.indexTree:global(
+    .rc-tree .rc-tree-treenode:not(:first-child) .rc-tree-switcher.rc-tree-switcher_close
+  ) {
+  background-position: -32px -20px;
+}
+
+.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper) {
+  display: inline-block;
+  height: 20px;
+  cursor: pointer;
+}
+.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper .rc-tree-title) {
+  vertical-align: middle;
+  line-height: 20px;
+}

src/xoonips/blocks/IndexTree.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+
+import Tree from 'rc-tree';
+import { DataNode, EventDataNode } from 'rc-tree/lib/interface';
+import { useNavigate } from 'react-router';
+import Loading from '../../common/lib/Loading';
+import { BrainAtlasType, MultiLang } from '../../config';
+import Functions from '../../functions';
+import IndexUtil, { INDEX_ID_PUBLIC, Index } from '../lib/IndexUtil';
+
+import styles from './IndexTree.module.css';
+
+interface Props {
+  lang: MultiLang;
+  type: BrainAtlasType;
+}
+
+const IndexTree: React.FC<Props> = (props) => {
+  const { lang, type } = props;
+  const navigate = useNavigate();
+
+  const [tree, setTree] = React.useState<DataNode[]>([]);
+  const [keys, setKeys] = React.useState<string[]>([]);
+  const [expandedKeys, setExpandedKeys] = React.useState<string[]>([]);
+  const [selectedKeys, setSelectedKeys] = React.useState<number[]>([]);
+
+  React.useEffect(() => {
+    const tree: DataNode[] = [];
+    const keys: string[] = [];
+    const eKeys: string[] = [];
+    const makeTreeNode = (index: Index, depth: number, func: (node: DataNode) => void): void => {
+      const title =
+        Functions.mlang(index.title, lang) +
+        (index.numOfItems > 0 ? ' (' + index.numOfItems + ')' : '');
+      IndexUtil.getChildren(type, index.id, (children) => {
+        if (children.length === 0) {
+          func({ key: String(index.id), title: title });
+        } else {
+          if (depth < 1) {
+            eKeys.push(String(index.id));
+          }
+          keys.push(String(index.id));
+          const childTreeNodes: DataNode[] = [];
+          let called = 0;
+          children.forEach((value: Index) => {
+            makeTreeNode(value, depth + 1, (cNode) => {
+              called++;
+              childTreeNodes.push(cNode);
+              if (called === children.length) {
+                func({ key: String(index.id), title: title, children: childTreeNodes });
+              }
+            });
+          });
+        }
+      });
+    };
+    IndexUtil.get(type, INDEX_ID_PUBLIC, (index) => {
+      if (index != null) {
+        makeTreeNode(index, 0, (node) => {
+          tree.push(node);
+          setTree(tree);
+          setKeys(keys);
+          setExpandedKeys(eKeys);
+          setSelectedKeys([]);
+        });
+      }
+    });
+  }, [lang, type]);
+
+  const handleClickOpenAll = () => {
+    setExpandedKeys(keys);
+  };
+
+  const handleClickCloseAll = () => {
+    setExpandedKeys([]);
+  };
+
+  const handleExpand: (
+    expandedKeys: React.Key[],
+    info: {
+      node: EventDataNode<DataNode>;
+      expanded: boolean;
+      nativeEvent: MouseEvent;
+    },
+  ) => void = (expandedKeys) => {
+    const keys: string[] = expandedKeys.map((key) => {
+      return typeof key === 'string' ? key : String(key);
+    });
+    setExpandedKeys(keys);
+  };
+
+  const handleSelect: (
+    selectedKeys: React.Key[],
+    info: {
+      event: 'select';
+      selected: boolean;
+      node: EventDataNode<DataNode>;
+      selectedNodes: DataNode[];
+      nativeEvent: MouseEvent;
+    },
+  ) => void = (selectedKeys) => {
+    const selectedKey = selectedKeys.shift() ?? 0;
+    const key = typeof selectedKey === 'string' ? parseInt(selectedKey, 10) : selectedKey;
+    const url = IndexUtil.getUrl(type, key);
+    navigate(url);
+    setSelectedKeys([]);
+  };
+
+  if (tree.length === 0) {
+    return <Loading />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <button className={styles.formButton} onClick={handleClickOpenAll}>
+        open all
+      </button>
+      <button className={styles.formButton} onClick={handleClickCloseAll}>
+        close all
+      </button>
+      <Tree
+        className={styles.indexTree}
+        expandedKeys={expandedKeys}
+        selectedKeys={selectedKeys}
+        onExpand={handleExpand}
+        onSelect={handleSelect}
+        showIcon={false}
+        treeData={tree}
+      />
+    </div>
+  );
+};
+
+export default IndexTree;

src/xoonips/item-type/binder/BinderAdvancedSearch.tsx

@@ -0,0 +1,31 @@
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+
+class BinderAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = 'binder';
+    this.title = 'Binder';
+    this.state.values.title = '';
+    this.state.values.keyword = '';
+    this.state.values.description = '';
+    this.state.values.doi = '';
+  }
+
+  getRows() {
+    const rows = [
+      { label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
+      {
+        label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+        value: this.renderFieldInputText('keyword', 50),
+      },
+      {
+        label: '[en]Description[/en][ja]概要[/ja]',
+        value: this.renderFieldInputText('description', 50),
+      },
+      { label: 'ID', value: this.renderFieldInputText('doi', 50) },
+    ];
+    return rows;
+  }
+}
+
+export default BinderAdvancedSearch;

src/xoonips/item-type/binder/BinderDetail.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+
+import ItemType from '..';
+import { BrainAtlasType, MultiLang } from '../../../config';
+import Functions from '../../../functions';
+import ItemUtil, { Item, ItemBinder } from '../../lib/ItemUtil';
+import DetailBase from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
+
+interface Props {
+  lang: MultiLang;
+  item: ItemBinder;
+  type: BrainAtlasType;
+}
+
+const BinderLinkItems: React.FC<Props> = (props) => {
+  const { lang, item, type } = props;
+  const [items, setItems] = React.useState<Item[]>([]);
+
+  const isMounted = React.useRef<boolean>(false);
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  React.useEffect(() => {
+    const itemIds = item.item_link;
+    ItemUtil.getList(type, itemIds, (results) => {
+      if (isMounted.current) {
+        setItems(results.data);
+      }
+    });
+  }, [item.item_link, type]);
+
+  return (
+    <table className="listTable">
+      <tbody>
+        {items.map((item, idx) => {
+          const evenodd = idx % 2 ? 'even' : 'odd';
+          return (
+            <tr key={item.item_id}>
+              <td className={evenodd}>
+                <ItemType.List lang={lang} item={item} type={type} />
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+class BinderDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemBinder;
+    return [
+      { label: 'ID', value: item.doi },
+      { label: '[en]Title[/en][ja]タイトル[/ja]', value: Functions.mlang(item.title, lang) },
+      {
+        label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+        value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
+      },
+      {
+        label: '[en]Description[/en][ja]概要[/ja]',
+        value: <ItemTypeField.Description lang={lang} description={item.description} />,
+      },
+      {
+        label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
+      },
+      {
+        label: '[en]Created Date[/en][ja]作成日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
+      },
+      {
+        label: '[en]Contributor[/en][ja]登録者[/ja]',
+        value: <ItemTypeField.Contributor lang={lang} uname={item.uname} name={item.name} />,
+      },
+      { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
+      {
+        label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
+        value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
+      },
+      {
+        label: 'Index',
+        value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} />,
+      },
+    ];
+  }
+
+  render() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemBinder;
+    const detail = super.render.call(this);
+    return (
+      <>
+        {detail}
+        <h4>Registered Items</h4>
+        <BinderLinkItems lang={lang} item={item} type={type} />
+      </>
+    );
+  }
+}
+
+export default BinderDetail;

src/xoonips/item-type/binder/BinderList.tsx

@@ -0,0 +1,28 @@
+import { Link } from 'react-router-dom';
+import Functions from '../../../functions';
+import { ItemBinder } from '../../lib/ItemUtil';
+import ListBase, { ListBaseProps } from '../lib/ListBase';
+
+import iconFile from '../../assets/images/icon_binder.gif';
+
+class BinderList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = 'Binder';
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemBinder;
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {Functions.mlang(item.description, lang)}
+      </>
+    );
+  }
+}
+
+export default BinderList;

src/xoonips/item-type/binder/BinderTop.tsx

@@ -0,0 +1,15 @@
+import TopBase, { TopBaseProps } from '../lib/TopBase';
+
+import iconFile from '../../assets/images/icon_binder.gif';
+
+class BinderTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = 'binder';
+    this.label = 'Binder';
+    this.icon = iconFile;
+    this.description = '[en]Binder collection.[/en][ja]バインダー[/ja]';
+  }
+}
+
+export default BinderTop;

src/xoonips/item-type/binder/index.tsx

@@ -0,0 +1,13 @@
+import BinderAdvancedSearch from './BinderAdvancedSearch';
+import BinderDetail from './BinderDetail';
+import BinderList from './BinderList';
+import BinderTop from './BinderTop';
+
+const ItemTypeBinder = {
+  Top: BinderTop,
+  List: BinderList,
+  Detail: BinderDetail,
+  AdvancedSearch: BinderAdvancedSearch,
+};
+
+export default ItemTypeBinder;

src/xoonips/item-type/book/BookAdvancedSearch.tsx

@@ -0,0 +1,55 @@
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+
+class BookAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = 'book';
+    this.title = 'Book';
+    this.state.values.title = '';
+    this.state.values.keyword = '';
+    this.state.values.description = '';
+    this.state.values.doi = '';
+    this.state.values.author = '';
+    this.state.values.editor = '';
+    this.state.values.publisher = '';
+    this.state.values.publication_year = '';
+    this.state.values.isbn = '';
+    this.state.values['file.book_pdf.original_file_name'] = '';
+  }
+
+  getRows() {
+    const rows = [
+      {
+        label: '[en]Book Title[/en][ja]著書名[/ja]',
+        value: this.renderFieldInputText('title', 50),
+      },
+      {
+        label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+        value: this.renderFieldInputText('keyword', 50),
+      },
+      {
+        label: '[en]Description[/en][ja]概要[/ja]',
+        value: this.renderFieldInputText('description', 50),
+      },
+      { label: 'ID', value: this.renderFieldInputText('doi', 50) },
+      { label: '[en]Author[/en][ja]著者[/ja]', value: this.renderFieldInputText('author', 50) },
+      { label: '[en]Editor[/en][ja]編集者[/ja]', value: this.renderFieldInputText('editor', 50) },
+      {
+        label: '[en]Publisher[/en][ja]出版社[/ja]',
+        value: this.renderFieldInputText('publisher', 50),
+      },
+      {
+        label: '[en]Publication Year[/en][ja]出版年[/ja]',
+        value: this.renderFieldInputText('publication_year', 10),
+      },
+      { label: 'ISBN', value: this.renderFieldInputText('isbn', 50) },
+      {
+        label: '[en]PDF File[/en][ja]PDF ファイル[/ja]',
+        value: this.renderFieldInputText('file.book_pdf.original_file_name', 50),
+      },
+    ];
+    return rows;
+  }
+}
+
+export default BookAdvancedSearch;

src/xoonips/item-type/book/BookDetail.tsx

@@ -0,0 +1,81 @@
+import Functions from '../../../functions';
+import { ItemBook } from '../../lib/ItemUtil';
+import DetailBase from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
+
+class BookDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemBook;
+    return [
+      { label: 'ID', value: item.doi },
+      {
+        label: '[en]Language[/en][ja]言語[/ja]',
+        value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
+      },
+      { label: '[en]Book Title[/en][ja]著書名[/ja]', value: Functions.mlang(item.title, lang) },
+      {
+        label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+        value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
+      },
+      {
+        label: '[en]Description[/en][ja]概要[/ja]',
+        value: <ItemTypeField.Description lang={lang} description={item.description} />,
+      },
+      {
+        label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
+      },
+      {
+        label: '[en]Created Date[/en][ja]作成日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
+      },
+      {
+        label: '[en]Contributor[/en][ja]登録者[/ja]',
+        value: <ItemTypeField.Contributor lang={lang} uname={item.uname} name={item.name} />,
+      },
+      { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
+      {
+        label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
+        value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
+      },
+      {
+        label: '[en]Author[/en][ja]著者[/ja]',
+        value: <ItemTypeField.Author lang={lang} author={item.author} />,
+      },
+      { label: '[en]Editor[/en][ja]編集者[/ja]', value: Functions.mlang(item.editor, lang) },
+      { label: '[en]Publisher[/en][ja]出版社[/ja]', value: Functions.mlang(item.publisher, lang) },
+      { label: '[en]Publication Year[/en][ja]出版年[/ja]', value: item.publication_year },
+      {
+        label: 'URL',
+        value: (
+          <a href={item.url} target="_blank" rel="noopener noreferrer">
+            {item.url}
+          </a>
+        ),
+      },
+      {
+        label: '[en]PDF File[/en][ja]PDF ファイル[/ja]',
+        value: (
+          <ItemTypeField.ItemFile
+            lang={lang}
+            file={item.file}
+            fileType="book_pdf"
+            downloadLimit={item.attachment_dl_limit}
+            type={type}
+          />
+        ),
+      },
+      {
+        label: 'Index',
+        value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} />,
+      },
+      {
+        label: '[en]Related to[/en][ja]関連アイテム[/ja]',
+        value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} />,
+      },
+    ];
+  }
+}
+
+export default BookDetail;

src/xoonips/item-type/book/BookList.tsx

@@ -0,0 +1,37 @@
+import { Fragment } from 'react';
+import { Link } from 'react-router-dom';
+import Functions from '../../../functions';
+import { ItemBook } from '../../lib/ItemUtil';
+import ListBase, { ListBaseProps } from '../lib/ListBase';
+
+import iconFile from '../../assets/images/icon_book.gif';
+
+class BookList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = 'Book';
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemBook;
+    const authors = item.author.map((author, i) => {
+      return (
+        <Fragment key={i}>
+          {i > 0 && ', '}
+          {Functions.mlang(author, lang)}
+        </Fragment>
+      );
+    });
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {authors}
+      </>
+    );
+  }
+}
+
+export default BookList;

src/xoonips/item-type/book/BookTop.tsx

@@ -0,0 +1,15 @@
+import TopBase, { TopBaseProps } from '../lib/TopBase';
+
+import iconFile from '../../assets/images/icon_book.gif';
+
+class BookTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = 'book';
+    this.label = 'Book';
+    this.icon = iconFile;
+    this.description = '[en]Related book collection.[/en][ja]関連書籍[/ja]';
+  }
+}
+
+export default BookTop;

src/xoonips/item-type/book/index.tsx

@@ -0,0 +1,13 @@
+import BookAdvancedSearch from './BookAdvancedSearch';
+import BookDetail from './BookDetail';
+import BookList from './BookList';
+import BookTop from './BookTop';
+
+const ItemTypeBook = {
+  Top: BookTop,
+  List: BookList,
+  Detail: BookDetail,
+  AdvancedSearch: BookAdvancedSearch,
+};
+
+export default ItemTypeBook;

src/xoonips/item-type/conference/ConferenceAdvancedSearch.tsx

@@ -0,0 +1,70 @@
+import { ItemConferenceSubTypes } from '../../lib/ItemUtil';
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+
+class ConferenceAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = 'conference';
+    this.title = 'Conference';
+    const now = new Date();
+    const year = String(now.getFullYear());
+    const month = String(now.getMonth() + 1);
+    const mday = String(now.getDate());
+    this.state.values.title = '';
+    this.state.values.presentation_type = '';
+    this.state.values.author = '';
+    this.state.values.conference_from_year = year;
+    this.state.values.conference_from_month = month;
+    this.state.values.conference_from_mday = mday;
+    this.state.values.conference_to_year = year;
+    this.state.values.conference_to_month = month;
+    this.state.values.conference_to_mday = mday;
+    this.setIgnoreKey('conference_from_year');
+    this.setIgnoreKey('conference_from_month');
+    this.setIgnoreKey('conference_from_mday');
+    this.setIgnoreKey('conference_to_year');
+    this.setIgnoreKey('conference_to_month');
+    this.setIgnoreKey('conference_to_mday');
+  }
+
+  renderDate() {
+    return (
+      <>
+        <div>
+          {this.renderFieldDate(
+            'From',
+            'conference_from_year',
+            'conference_from_month',
+            'conference_from_mday',
+          )}
+        </div>
+        <div>
+          {this.renderFieldDate(
+            'To',
+            'conference_to_year',
+            'conference_to_month',
+            'conference_to_mday',
+          )}
+        </div>
+      </>
+    );
+  }
+
+  getRows() {
+    const rows = [
+      {
+        label: '[en]Presentation Title[/en][ja]発表議題[/ja]',
+        value: this.renderFieldInputText('title', 50),
+      },
+      {
+        label: '[en]Presentation Type[/en][ja]発表資料ファイル形式[/ja]',
+        value: this.renderFieldSelect('presentation_type', ItemConferenceSubTypes),
+      },
+      { label: '[en]Author[/en][ja]発表者[/ja]', value: this.renderFieldInputText('author', 50) },
+      { label: '[en]Date[/en][ja]日付[/ja]', value: this.renderDate() },
+    ];
+    return rows;
+  }
+}
+
+export default ConferenceAdvancedSearch;

src/xoonips/item-type/conference/ConferenceDetail.tsx

@@ -0,0 +1,93 @@
+import Functions from '../../../functions';
+import { ItemConference } from '../../lib/ItemUtil';
+import DetailBase from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
+import ConferenceUtil from './ConferenceUtil';
+
+class ConferenceDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemConference;
+    return [
+      { label: 'ID', value: item.doi },
+      {
+        label: '[en]Language[/en][ja]言語[/ja]',
+        value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
+      },
+      {
+        label: '[en]Conference Title[/en][ja]学会名[/ja]',
+        value: Functions.mlang(item.conference_title, lang),
+      },
+      { label: '[en]Place[/en][ja]開催地[/ja]', value: item.place },
+      {
+        label: '[en]Date[/en][ja]日付[/ja]',
+        value: <ConferenceUtil.ConferenceDate lang={lang} item={item} />,
+      },
+      {
+        label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
+      },
+      {
+        label: '[en]Created Date[/en][ja]作成日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
+      },
+      {
+        label: '[en]Contributor[/en][ja]登録者[/ja]',
+        value: <ItemTypeField.Contributor lang={lang} uname={item.uname} name={item.name} />,
+      },
+      { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
+      {
+        label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
+        value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
+      },
+      {
+        label: '[en]Presentation Title[/en][ja]発表議題[/ja]',
+        value: Functions.mlang(item.title, lang),
+      },
+      {
+        label: '[en]Author[/en][ja]発表者[/ja]',
+        value: <ItemTypeField.Author lang={lang} author={item.author} />,
+      },
+      {
+        label: '[en]Abstract[/en][ja]要約[/ja]',
+        value: <ItemTypeField.Description lang={lang} description={item.abstract} />,
+      },
+      {
+        label: '[en]Presentation File[/en][ja]発表資料[/ja]',
+        value: (
+          <ItemTypeField.ItemFile
+            lang={lang}
+            file={item.file}
+            fileType="conference_file"
+            type={type}
+          />
+        ),
+      },
+      {
+        label: '[en]Presentation Type[/en][ja]発表資料ファイル形式[/ja]',
+        value: <ConferenceUtil.PresentationType lang={lang} type={item.presentation_type} />,
+      },
+      {
+        label: '[en]Conference Paper[/en][ja]学会資料[/ja]',
+        value: (
+          <ItemTypeField.ItemFile
+            lang={lang}
+            file={item.file}
+            fileType="conference_paper"
+            type={type}
+          />
+        ),
+      },
+      {
+        label: 'Index',
+        value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} />,
+      },
+      {
+        label: '[en]Related to[/en][ja]関連アイテム[/ja]',
+        value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} />,
+      },
+    ];
+  }
+}
+
+export default ConferenceDetail;

src/xoonips/item-type/conference/ConferenceList.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+import Functions from '../../../functions';
+import { ItemConference } from '../../lib/ItemUtil';
+import ListBase, { ListBaseProps } from '../lib/ListBase';
+import ConferenceUtil from './ConferenceUtil';
+
+import iconFile from '../../assets/images/icon_conference.gif';
+
+class ConferenceList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = 'Conference';
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemConference;
+    const authors = item.author.map((author, i) => {
+      return (
+        <React.Fragment key={i}>
+          {i > 0 && ', '}
+          {Functions.mlang(author, lang)}
+        </React.Fragment>
+      );
+    });
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {Functions.mlang(item.conference_title, lang)} (
+        <ConferenceUtil.PresentationType lang={lang} type={item.presentation_type} />)<br />
+        {authors}
+      </>
+    );
+  }
+}
+
+export default ConferenceList;

src/xoonips/item-type/conference/ConferenceTop.tsx

@@ -0,0 +1,17 @@
+import { ItemConferenceSubTypes } from '../../lib/ItemUtil';
+import TopBase, { TopBaseProps } from '../lib/TopBase';
+
+import iconFile from '../../assets/images/icon_conference.gif';
+
+class ConferenceTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = 'conference';
+    this.label = 'Conference';
+    this.icon = iconFile;
+    this.description = '[en]Electrical presentation files for conference.[/en][ja]学会発表[/ja]';
+    this.subTypes = ItemConferenceSubTypes;
+  }
+}
+
+export default ConferenceTop;

src/xoonips/item-type/conference/ConferenceUtil.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { MultiLang } from '../../../config';
+import { ItemConference, ItemConferenceSubType, ItemConferenceSubTypes } from '../../lib/ItemUtil';
+
+interface PresentationTypeProps {
+  lang: MultiLang;
+  type: ItemConferenceSubType;
+}
+
+const PresentationType: React.FC<PresentationTypeProps> = (props: PresentationTypeProps) => {
+  const { type } = props;
+  const subtype = ItemConferenceSubTypes.find((value) => {
+    return value.type === type;
+  });
+  if (typeof subtype === 'undefined') {
+    return null;
+  }
+  return <span>{subtype.label}</span>;
+};
+
+interface ConferenceDateProps {
+  lang: MultiLang;
+  item: ItemConference;
+}
+
+const ConferenceDate: React.FC<ConferenceDateProps> = (props: ConferenceDateProps) => {
+  const { item } = props;
+  const monthStr = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ];
+  const from =
+    'From: ' +
+    monthStr[item.conference_from_month - 1] +
+    ' ' +
+    item.conference_from_mday +
+    ', ' +
+    item.conference_from_year;
+  const to =
+    'To: ' +
+    monthStr[item.conference_to_month - 1] +
+    ' ' +
+    item.conference_to_mday +
+    ', ' +
+    item.conference_to_year;
+  return (
+    <span>
+      {from} {to}
+    </span>
+  );
+};
+
+const ConferenceUtil = {
+  PresentationType,
+  ConferenceDate,
+};
+
+export default ConferenceUtil;

src/xoonips/item-type/conference/index.tsx

@@ -0,0 +1,13 @@
+import ConferenceAdvancedSearch from './ConferenceAdvancedSearch';
+import ConferenceDetail from './ConferenceDetail';
+import ConferenceList from './ConferenceList';
+import ConferenceTop from './ConferenceTop';
+
+const ItemTypeConference = {
+  Top: ConferenceTop,
+  List: ConferenceList,
+  Detail: ConferenceDetail,
+  AdvancedSearch: ConferenceAdvancedSearch,
+};
+
+export default ItemTypeConference;

src/xoonips/item-type/data/DataAdvancedSearch.tsx

@@ -0,0 +1,71 @@
+import { ItemDataSubTypes } from '../../lib/ItemUtil';
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+
+class DataAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = 'data';
+    this.title = 'Data';
+    const now = new Date();
+    const year = String(now.getFullYear());
+    const month = String(now.getMonth() + 1);
+    const mday = String(now.getDate());
+    this.state.values.title = '';
+    this.state.values.keyword = '';
+    this.state.values.description = '';
+    this.state.values.doi = '';
+    this.state.values.data_type = '';
+    this.state.values.experimenter = '';
+    this.state.values.publication_year = year;
+    this.state.values.publication_month = month;
+    this.state.values.publication_mday = mday;
+    this.state.values['file.preview.caption'] = '';
+    this.state.values['file.data_file.original_file_name'] = '';
+    this.setIgnoreKey('publication_year');
+    this.setIgnoreKey('publication_month');
+    this.setIgnoreKey('publication_mday');
+  }
+
+  getRows() {
+    const rows = [
+      { label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
+      {
+        label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+        value: this.renderFieldInputText('keyword', 50),
+      },
+      {
+        label: '[en]Description[/en][ja]概要[/ja]',
+        value: this.renderFieldInputText('description', 50),
+      },
+      { label: 'ID', value: this.renderFieldInputText('doi', 50) },
+      {
+        label: '[en]Data Type[/en][ja]データタイプ[/ja]',
+        value: this.renderFieldSelect('data_type', ItemDataSubTypes),
+      },
+      {
+        label: '[en]Experimenter[/en][ja]実験者[/ja]',
+        value: this.renderFieldInputText('experimenter', 50),
+      },
+      {
+        label: '[en]Date[/en][ja]日付[/ja]',
+        value: this.renderFieldDate(
+          '',
+          'publication_year',
+          'publication_month',
+          'publication_mday',
+        ),
+      },
+      {
+        label: '[en]Caption[/en][ja]キャプション[/ja]',
+        value: this.renderFieldInputText('file.preview.caption', 50),
+      },
+      {
+        label: '[en]Data File[/en][ja]データファイル[/ja]',
+        value: this.renderFieldInputText('file.data_file.original_file_name', 50),
+      },
+    ];
+    return rows;
+  }
+}
+
+export default DataAdvancedSearch;

src/xoonips/item-type/data/DataDetail.tsx

@@ -0,0 +1,117 @@
+import Functions from '../../../functions';
+import ItemUtil, { ItemData } from '../../lib/ItemUtil';
+import DetailBase from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
+import SimPFLinkIcon from '../lib/field/SimPFLinkIcon';
+import DataUtil from './DataUtil';
+
+class DataDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemData;
+    const fields = [
+      { label: 'ID', value: item.doi },
+      {
+        label: '[en]Language[/en][ja]言語[/ja]',
+        value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
+      },
+      { label: '[en]Title[/en][ja]タイトル[/ja]', value: Functions.mlang(item.title, lang) },
+      {
+        label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+        value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
+      },
+      {
+        label: '[en]Description[/en][ja]概要[/ja]',
+        value: <ItemTypeField.Description lang={lang} description={item.description} />,
+      },
+      {
+        label: '[en]Date[/en][ja]日付[/ja]',
+        value: (
+          <ItemTypeField.PublicationDate
+            lang={lang}
+            year={item.publication_year}
+            month={item.publication_month}
+            mday={item.publication_mday}
+          />
+        ),
+      },
+      {
+        label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
+      },
+      {
+        label: '[en]Created Date[/en][ja]作成日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
+      },
+      {
+        label: '[en]Contributor[/en][ja]登録者[/ja]',
+        value: <ItemTypeField.Contributor lang={lang} uname={item.uname} name={item.name} />,
+      },
+      { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
+      {
+        label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
+        value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
+      },
+      {
+        label: '[en]Data Type[/en][ja]データタイプ[/ja]',
+        value: <DataUtil.DataType lang={lang} type={item.data_type} />,
+      },
+      {
+        label: '[en]Experimenter[/en][ja]実験者[/ja]',
+        value: <ItemTypeField.Author lang={lang} author={item.experimenter} />,
+      },
+      {
+        label: '[en]Preview[/en][ja]プレビュー[/ja]',
+        value: <ItemTypeField.Preview lang={lang} file={item.file} type={type} />,
+      },
+      {
+        label: '[en]Data File[/en][ja]データファイル[/ja]',
+        value: (
+          <ItemTypeField.ItemFile
+            lang={lang}
+            file={item.file}
+            fileType="data_file"
+            rights={item.rights}
+            useCc={item.use_cc}
+            ccCommercialUse={item.cc_commercial_use}
+            ccModification={item.cc_modification}
+            downloadLimit={item.attachment_dl_limit}
+            type={type}
+          />
+        ),
+      },
+      { label: 'Readme', value: <ItemTypeField.Readme lang={lang} readme={item.readme} /> },
+      {
+        label: 'Rights',
+        value: (
+          <ItemTypeField.Rights
+            lang={lang}
+            rights={item.rights}
+            useCc={item.use_cc}
+            ccCommercialUse={item.cc_commercial_use}
+            ccModification={item.cc_modification}
+          />
+        ),
+      },
+      {
+        label: 'Index',
+        value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} />,
+      },
+      {
+        label: '[en]Related to[/en][ja]関連アイテム[/ja]',
+        value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} />,
+      },
+    ];
+    const simpfLinkUrl = ItemUtil.getSimPFLinkUrl(item.item_id);
+    if (simpfLinkUrl !== '') {
+      const field = {
+        label: 'Online Simulation',
+        value: <SimPFLinkIcon lang={lang} url={simpfLinkUrl} isDetail={true} />,
+      };
+      fields.splice(14, 0, field);
+    }
+    return fields;
+  }
+}
+
+export default DataDetail;

src/xoonips/item-type/data/DataList.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+import Functions from '../../../functions';
+import { ItemData } from '../../lib/ItemUtil';
+import ListBase, { ListBaseProps } from '../lib/ListBase';
+
+import iconFile from '../../assets/images/icon_data.gif';
+
+class DataList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = 'Data';
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemData;
+    const authors = item.experimenter.map((author, i) => {
+      return (
+        <React.Fragment key={i}>
+          {i > 0 && ', '}
+          {Functions.mlang(author, lang)}
+        </React.Fragment>
+      );
+    });
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {authors}
+      </>
+    );
+  }
+}
+
+export default DataList;

src/xoonips/item-type/data/DataTop.tsx

@@ -0,0 +1,18 @@
+import { ItemDataSubTypes } from '../../lib/ItemUtil';
+import TopBase, { TopBaseProps } from '../lib/TopBase';
+
+import iconFile from '../../assets/images/icon_data.gif';
+
+class DataTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = 'data';
+    this.label = 'Data';
+    this.icon = iconFile;
+    this.description =
+      '[en]Result data in numerical text/image/movie formats.[/en][ja]実験結果の数値データ/画像/動画など[/ja]';
+    this.subTypes = ItemDataSubTypes;
+  }
+}
+
+export default DataTop;

src/xoonips/item-type/data/DataUtil.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { MultiLang } from '../../../config';
+import { ItemDataSubType, ItemDataSubTypes } from '../../lib/ItemUtil';
+
+interface DataTypeProps {
+  lang: MultiLang;
+  type: ItemDataSubType;
+}
+
+const DataType: React.FC<DataTypeProps> = (props: DataTypeProps) => {
+  const { type } = props;
+  const subtype = ItemDataSubTypes.find((value) => {
+    return value.type === type;
+  });
+  if (typeof subtype === 'undefined') {
+    return null;
+  }
+  return <span>{subtype.label}</span>;
+};
+
+const DataUtil = {
+  DataType,
+};
+
+export default DataUtil;

src/xoonips/item-type/data/index.tsx

@@ -0,0 +1,13 @@
+import DataAdvancedSearch from './DataAdvancedSearch';
+import DataDetail from './DataDetail';
+import DataList from './DataList';
+import DataTop from './DataTop';
+
+const ItemTypeData = {
+  Top: DataTop,
+  List: DataList,
+  Detail: DataDetail,
+  AdvancedSearch: DataAdvancedSearch,
+};
+
+export default ItemTypeData;

src/xoonips/item-type/files/FilesAdvancedSearch.tsx

@@ -0,0 +1,44 @@
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+
+class FilesAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = 'files';
+    this.title = 'Files';
+    this.state.values.title = '';
+    this.state.values.data_file_name = '';
+    this.state.values.data_file_mimetype = '';
+    this.state.values.data_file_filetype = '';
+    this.state.values.keyword = '';
+    this.state.values.description = '';
+  }
+
+  getRows() {
+    const rows = [
+      { label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
+      {
+        label: '- [en]File Name[/en][ja]ファイル名[/ja]',
+        value: this.renderFieldInputText('data_file_name', 50),
+      },
+      {
+        label: '- [en]MIME Type[/en][ja]MIMEタイプ[/ja]',
+        value: this.renderFieldInputText('data_file_mimetype', 50),
+      },
+      {
+        label: '- [en]File Type[/en][ja]ファイルタイプ[/ja]',
+        value: this.renderFieldInputText('data_file_filetype', 20),
+      },
+      {
+        label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+        value: this.renderFieldInputText('keyword', 50),
+      },
+      {
+        label: '[en]Description[/en][ja]概要[/ja]',
+        value: this.renderFieldInputText('description', 50),
+      },
+    ];
+    return rows;
+  }
+}
+
+export default FilesAdvancedSearch;

src/xoonips/item-type/files/FilesDetail.tsx

@@ -0,0 +1,63 @@
+import Functions from '../../../functions';
+import { ItemFiles } from '../../lib/ItemUtil';
+import DetailBase from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
+
+class FilesDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemFiles;
+    return [
+      { label: 'ID', value: item.doi },
+      {
+        label: '[en]Language[/en][ja]言語[/ja]',
+        value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
+      },
+      { label: '[en]Title[/en][ja]タイトル[/ja]', value: Functions.mlang(item.title, lang) },
+      {
+        label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
+      },
+      {
+        label: '[en]Created Date[/en][ja]作成日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
+      },
+      {
+        label: '[en]Contributor[/en][ja]登録者[/ja]',
+        value: <ItemTypeField.Contributor lang={lang} uname={item.uname} name={item.name} />,
+      },
+      { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
+      {
+        label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
+        value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
+      },
+      {
+        label: '[en]Data File[/en][ja]データファイル[/ja]',
+        value: (
+          <ItemTypeField.ItemFile lang={lang} file={item.file} fileType="files_file" type={type} />
+        ),
+      },
+      { label: '- [en]File Name[/en][ja]ファイル名[/ja]', value: item.data_file_name },
+      { label: '- [en]MIME Type[/en][ja]MIMEタイプ[/ja]', value: item.data_file_mimetype },
+      { label: '- [en]File Type[/en][ja]ファイルタイプ[/ja]', value: item.data_file_filetype },
+      {
+        label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+        value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
+      },
+      {
+        label: '[en]Description[/en][ja]概要[/ja]',
+        value: <ItemTypeField.Description lang={lang} description={item.description} />,
+      },
+      {
+        label: 'Index',
+        value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} />,
+      },
+      {
+        label: '[en]Related to[/en][ja]関連アイテム[/ja]',
+        value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} />,
+      },
+    ];
+  }
+}
+
+export default FilesDetail;

src/xoonips/item-type/files/FilesList.tsx

@@ -0,0 +1,31 @@
+import { Link } from 'react-router-dom';
+import Functions from '../../../functions';
+import { ItemFiles } from '../../lib/ItemUtil';
+import ListBase, { ListBaseProps } from '../lib/ListBase';
+import Contributor from '../lib/field/Contributor';
+
+import iconFile from '../../assets/images/icon_files.gif';
+
+class FilesList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = 'Files';
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemFiles;
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        <Contributor lang={lang} uname={item.uname} name={item.name} />
+        <br />
+        {item.data_file_mimetype}
+      </>
+    );
+  }
+}
+
+export default FilesList;

src/xoonips/item-type/files/FilesTop.tsx

@@ -0,0 +1,17 @@
+import { ItemFilesSubTypes } from '../../lib/ItemUtil';
+import TopBase, { TopBaseProps } from '../lib/TopBase';
+
+import iconFile from '../../assets/images/icon_files.gif';
+
+class FilesTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = 'files';
+    this.label = 'Files';
+    this.icon = iconFile;
+    this.description = '[en]Various type of File.[/en][ja]ファイル[/ja]';
+    this.subTypes = ItemFilesSubTypes;
+  }
+}
+
+export default FilesTop;

src/xoonips/item-type/files/FilesUtil.tsx

@@ -0,0 +1,3 @@
+const FilesUtil = {};
+
+export default FilesUtil;

src/xoonips/item-type/files/index.tsx

@@ -0,0 +1,13 @@
+import FilesAdvancedSearch from './FilesAdvancedSearch';
+import FilesDetail from './FilesDetail';
+import FilesList from './FilesList';
+import FilesTop from './FilesTop';
+
+const ItemTypeFiles = {
+  Top: FilesTop,
+  List: FilesList,
+  Detail: FilesDetail,
+  AdvancedSearch: FilesAdvancedSearch,
+};
+
+export default ItemTypeFiles;

src/xoonips/item-type/index.tsx

@@ -0,0 +1,198 @@
+import { BrainAtlasType, MultiLang } from '../../config';
+import AdvancedSearchQuery from '../lib/AdvancedSearchQuery';
+import {
+  Item,
+  ItemBinder,
+  ItemBook,
+  ItemConference,
+  ItemData,
+  ItemFiles,
+  ItemMemo,
+  ItemModel,
+  ItemPaper,
+  ItemPresentation,
+  ItemSimulator,
+  ItemStimulus,
+  ItemTool,
+  ItemUrl,
+} from '../lib/ItemUtil';
+import ItemTypeBinder from './binder';
+import ItemTypeBook from './book';
+import ItemTypeConference from './conference';
+import ItemTypeData from './data';
+import ItemTypeFiles from './files';
+import ItemTypeMemo from './memo';
+import ItemTypeModel from './model';
+import ItemTypePaper from './paper';
+import ItemTypePresentation from './presentation';
+import ItemTypeSimulator from './simulator';
+import ItemTypeStimulus from './stimulus';
+import ItemTypeTool from './tool';
+import ItemTypeUrl from './url';
+
+interface TopProps {
+  lang: MultiLang;
+  itemType: string;
+  type: BrainAtlasType;
+}
+const Top = (props: TopProps) => {
+  const { lang, itemType, type } = props;
+  switch (itemType) {
+    case 'xnpbinder':
+      return <ItemTypeBinder.Top lang={lang} type={type} />;
+    case 'xnpbook':
+      return <ItemTypeBook.Top lang={lang} type={type} />;
+    case 'xnpconference':
+      return <ItemTypeConference.Top lang={lang} type={type} />;
+    case 'xnpdata':
+      return <ItemTypeData.Top lang={lang} type={type} />;
+    case 'xnpfiles':
+      return <ItemTypeFiles.Top lang={lang} type={type} />;
+    case 'xnpmemo':
+      return <ItemTypeMemo.Top lang={lang} type={type} />;
+    case 'xnpmodel':
+      return <ItemTypeModel.Top lang={lang} type={type} />;
+    case 'xnppaper':
+      return <ItemTypePaper.Top lang={lang} type={type} />;
+    case 'xnppresentation':
+      return <ItemTypePresentation.Top lang={lang} type={type} />;
+    case 'xnpsimulator':
+      return <ItemTypeSimulator.Top lang={lang} type={type} />;
+    case 'xnpstimulus':
+      return <ItemTypeStimulus.Top lang={lang} type={type} />;
+    case 'xnptool':
+      return <ItemTypeTool.Top lang={lang} type={type} />;
+    case 'xnpurl':
+      return <ItemTypeUrl.Top lang={lang} type={type} />;
+    default:
+      return null;
+  }
+};
+
+interface ListProps {
+  lang: MultiLang;
+  item: Item;
+  type: BrainAtlasType;
+}
+const List = (props: ListProps) => {
+  const { lang, item, type } = props;
+  switch (item.item_type_name) {
+    case 'xnpbinder':
+      return <ItemTypeBinder.List lang={lang} item={item as ItemBinder} type={type} />;
+    case 'xnpbook':
+      return <ItemTypeBook.List lang={lang} item={item as ItemBook} type={type} />;
+    case 'xnpconference':
+      return <ItemTypeConference.List lang={lang} item={item as ItemConference} type={type} />;
+    case 'xnpdata':
+      return <ItemTypeData.List lang={lang} item={item as ItemData} type={type} />;
+    case 'xnpfiles':
+      return <ItemTypeFiles.List lang={lang} item={item as ItemFiles} type={type} />;
+    case 'xnpmemo':
+      return <ItemTypeMemo.List lang={lang} item={item as ItemMemo} type={type} />;
+    case 'xnpmodel':
+      return <ItemTypeModel.List lang={lang} item={item as ItemModel} type={type} />;
+    case 'xnppaper':
+      return <ItemTypePaper.List lang={lang} item={item as ItemPaper} type={type} />;
+    case 'xnppresentation':
+      return <ItemTypePresentation.List lang={lang} item={item as ItemPresentation} type={type} />;
+    case 'xnpsimulator':
+      return <ItemTypeSimulator.List lang={lang} item={item as ItemSimulator} type={type} />;
+    case 'xnpstimulus':
+      return <ItemTypeStimulus.List lang={lang} item={item as ItemStimulus} type={type} />;
+    case 'xnptool':
+      return <ItemTypeTool.List lang={lang} item={item as ItemTool} type={type} />;
+    case 'xnpurl':
+      return <ItemTypeUrl.List lang={lang} item={item as ItemUrl} type={type} />;
+    default:
+      return null;
+  }
+};
+
+interface DetailProps {
+  lang: MultiLang;
+  item: Item;
+  type: BrainAtlasType;
+}
+const Detail = (props: DetailProps) => {
+  const { lang, item, type } = props;
+  switch (item.item_type_name) {
+    case 'xnpbinder':
+      return <ItemTypeBinder.Detail lang={lang} item={item as ItemBinder} type={type} />;
+    case 'xnpbook':
+      return <ItemTypeBook.Detail lang={lang} item={item as ItemBook} type={type} />;
+    case 'xnpconference':
+      return <ItemTypeConference.Detail lang={lang} item={item as ItemConference} type={type} />;
+    case 'xnpdata':
+      return <ItemTypeData.Detail lang={lang} item={item as ItemData} type={type} />;
+    case 'xnpfiles':
+      return <ItemTypeFiles.Detail lang={lang} item={item as ItemFiles} type={type} />;
+    case 'xnpmemo':
+      return <ItemTypeMemo.Detail lang={lang} item={item as ItemMemo} type={type} />;
+    case 'xnpmodel':
+      return <ItemTypeModel.Detail lang={lang} item={item as ItemModel} type={type} />;
+    case 'xnppaper':
+      return <ItemTypePaper.Detail lang={lang} item={item as ItemPaper} type={type} />;
+    case 'xnppresentation':
+      return (
+        <ItemTypePresentation.Detail lang={lang} item={item as ItemPresentation} type={type} />
+      );
+    case 'xnpsimulator':
+      return <ItemTypeSimulator.Detail lang={lang} item={item as ItemSimulator} type={type} />;
+    case 'xnpstimulus':
+      return <ItemTypeStimulus.Detail lang={lang} item={item as ItemStimulus} type={type} />;
+    case 'xnptool':
+      return <ItemTypeTool.Detail lang={lang} item={item as ItemTool} type={type} />;
+    case 'xnpurl':
+      return <ItemTypeUrl.Detail lang={lang} item={item as ItemUrl} type={type} />;
+    default:
+      return null;
+  }
+};
+
+interface AdvancedSearchProps {
+  lang: MultiLang;
+  type: string;
+  query: AdvancedSearchQuery;
+}
+const AdvancedSearch = (props: AdvancedSearchProps) => {
+  const { lang, type, query } = props;
+  switch (type) {
+    case 'xnpbinder':
+      return <ItemTypeBinder.AdvancedSearch lang={lang} query={query} />;
+    case 'xnpbook':
+      return <ItemTypeBook.AdvancedSearch lang={lang} query={query} />;
+    case 'xnpconference':
+      return <ItemTypeConference.AdvancedSearch lang={lang} query={query} />;
+    case 'xnpdata':
+      return <ItemTypeData.AdvancedSearch lang={lang} query={query} />;
+    case 'xnpfiles':
+      return <ItemTypeFiles.AdvancedSearch lang={lang} query={query} />;
+    case 'xnpmemo':
+      return <ItemTypeMemo.AdvancedSearch lang={lang} query={query} />;
+    case 'xnpmodel':
+      return <ItemTypeModel.AdvancedSearch lang={lang} query={query} />;
+    case 'xnppaper':
+      return <ItemTypePaper.AdvancedSearch lang={lang} query={query} />;
+    case 'xnppresentation':
+      return <ItemTypePresentation.AdvancedSearch lang={lang} query={query} />;
+    case 'xnpsimulator':
+      return <ItemTypeSimulator.AdvancedSearch lang={lang} query={query} />;
+    case 'xnpstimulus':
+      return <ItemTypeStimulus.AdvancedSearch lang={lang} query={query} />;
+    case 'xnptool':
+      return <ItemTypeTool.AdvancedSearch lang={lang} query={query} />;
+    case 'xnpurl':
+      return <ItemTypeUrl.AdvancedSearch lang={lang} query={query} />;
+    default:
+      return null;
+  }
+};
+
+const ItemType = {
+  Top,
+  List,
+  Detail,
+  AdvancedSearch,
+};
+
+export default ItemType;

src/xoonips/item-type/lib/AdvancedSearchBase.tsx

@@ -0,0 +1,231 @@
+import React from 'react';
+import { MultiLang } from '../../../config';
+import Functions from '../../../functions';
+import AdvancedSearchQuery from '../../lib/AdvancedSearchQuery';
+import { ItemSubTypesAll } from '../../lib/ItemUtil';
+
+export interface AdvancedSearchBaseProps {
+  lang: MultiLang;
+  query: AdvancedSearchQuery;
+}
+
+interface State {
+  show: boolean;
+  values: Record<string, string>;
+}
+
+class AdvancedSearchBase extends React.Component<AdvancedSearchBaseProps, State> {
+  protected type = 'base';
+  protected title = 'Base';
+  protected query: AdvancedSearchQuery;
+  protected ignoreKeys: string[] = [];
+
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.state = {
+      show: false,
+      values: {},
+    };
+    this.query = props.query;
+    this.handleChangeTitleCheck = this.handleChangeTitleCheck.bind(this);
+  }
+
+  updateQuery(key: string, value: string) {
+    if (this.ignoreKeys.includes(key)) {
+      this.query.delete(this.type, key);
+    } else {
+      this.query.set(this.type, key, value);
+    }
+  }
+
+  setIgnoreKey(key: string) {
+    if (!this.ignoreKeys.includes(key)) {
+      this.ignoreKeys = this.ignoreKeys.concat(key);
+    }
+    this.query.delete(this.type, key);
+  }
+
+  deleteIgnoreKey(key: string) {
+    if (this.ignoreKeys.includes(key)) {
+      this.ignoreKeys = this.ignoreKeys.filter((v) => {
+        return v !== key;
+      });
+    }
+    this.query.set(this.type, key, this.state.values[key]);
+  }
+
+  updateField(key: string, value: string) {
+    const values = Object.assign({}, this.state.values);
+    values[key] = value;
+    this.updateQuery(key, value);
+    this.setState({ values });
+  }
+
+  handleChangeTitleCheck(e: React.ChangeEvent<HTMLInputElement>) {
+    const show = e.target.checked;
+    if (show) {
+      Object.keys(this.state.values).forEach((key) => {
+        const value = this.state.values[key];
+        this.updateQuery(key, value);
+      });
+    } else {
+      this.query.deleteType(this.type);
+    }
+    this.setState({ show });
+  }
+
+  getRows(): { label: string; value: JSX.Element }[] {
+    return [];
+  }
+
+  renderFieldInputText(key: string, size: number) {
+    const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+      this.updateField(key, e.target.value);
+    };
+    return (
+      <input
+        className="fieldInputText"
+        type="text"
+        value={this.state.values[key]}
+        size={size}
+        onChange={onChange}
+      />
+    );
+  }
+
+  renderFieldSelect(key: string, values: ItemSubTypesAll) {
+    const onChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
+      this.updateField(key, e.target.value);
+    };
+    const options = values.map(({ type, label }, i) => {
+      return (
+        <option key={i} value={type}>
+          {label}
+        </option>
+      );
+    });
+    return (
+      <select className="fieldSelect" value={this.state.values[key]} onChange={onChange}>
+        <option value="">Any</option>
+        {options}
+      </select>
+    );
+  }
+
+  renderFieldDate(label: string, keyYear: string, keyMonth: string, keyMday: string) {
+    const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+      if (e.target.checked) {
+        this.deleteIgnoreKey(keyYear);
+        keyMonth !== '' && this.deleteIgnoreKey(keyMonth);
+        keyMday !== '' && this.deleteIgnoreKey(keyMday);
+      } else {
+        this.setIgnoreKey(keyYear);
+        keyMonth !== '' && this.setIgnoreKey(keyMonth);
+        keyMday !== '' && this.setIgnoreKey(keyMday);
+      }
+    };
+    const month = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ];
+    const monthOptions = month.map((value, i) => {
+      return (
+        <option key={i} value={i + 1}>
+          {value}
+        </option>
+      );
+    });
+    const mdayOptions: JSX.Element[] = [];
+    for (let i = 1; i <= 31; i++) {
+      mdayOptions.push(
+        <option key={i} value={i}>
+          {i}
+        </option>,
+      );
+    }
+    return (
+      <div className="fieldDate">
+        <input type="checkbox" onChange={onChange} />
+        {label.length !== 0 && <label className="fieldDateLabel">{label}</label>}
+        {keyMonth !== '' && (
+          <select
+            value={this.state.values[keyMonth]}
+            onChange={(e) => this.updateField(keyMonth, e.target.value)}
+          >
+            {monthOptions}
+          </select>
+        )}
+        {keyMday !== '' && (
+          <select
+            value={this.state.values[keyMday]}
+            onChange={(e) => this.updateField(keyMday, e.target.value)}
+          >
+            {mdayOptions}
+          </select>
+        )}
+        <input
+          type="text"
+          value={this.state.values[keyYear]}
+          size={5}
+          onChange={(e) => this.updateField(keyYear, e.target.value)}
+        />
+      </div>
+    );
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    if (this.state.show === false) {
+      return null;
+    }
+    const rows = this.getRows();
+    const fields = rows.map((value, idx) => {
+      const evenodd = idx % 2 === 0 ? 'even' : 'odd';
+      return (
+        <tr key={idx}>
+          <td className="head">{Functions.mlang(value.label, lang)}</td>
+          <td className={evenodd}>{value.value}</td>
+        </tr>
+      );
+    });
+    return (
+      <table className="itemtypeFields outer">
+        <tbody>{fields}</tbody>
+      </table>
+    );
+  }
+
+  render() {
+    return (
+      <div className="itemtype">
+        <table className="itemtypeName outer">
+          <tbody>
+            <tr>
+              <th align="left">
+                <input
+                  type="checkbox"
+                  checked={this.state.show}
+                  onChange={(e) => this.handleChangeTitleCheck(e)}
+                />
+                {this.title}
+              </th>
+            </tr>
+          </tbody>
+        </table>
+        {this.renderBody()}
+      </div>
+    );
+  }
+}
+
+export default AdvancedSearchBase;

src/xoonips/item-type/lib/DetailBase.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { BrainAtlasType, MultiLang } from '../../../config';
+import Functions from '../../../functions';
+import { Item } from '../../lib/ItemUtil';
+
+export interface DetailBaseField {
+  label: string;
+  value: React.ReactNode;
+}
+
+export interface DetailBaseProps {
+  lang: MultiLang;
+  item: Item;
+  type: BrainAtlasType;
+}
+
+class DetailBase extends React.Component<DetailBaseProps> {
+  getFields(): DetailBaseField[] {
+    return [];
+  }
+
+  render() {
+    const { lang } = this.props;
+    const elements = this.getFields().map((value, idx) => {
+      const evenodd = idx % 2 === 0 ? 'even' : 'odd';
+      return (
+        <tr key={idx}>
+          <td className="head">{Functions.mlang(value.label, lang)}</td>
+          <td className={evenodd}>{value.value}</td>
+        </tr>
+      );
+    });
+    return (
+      <table className="outer itemDetail">
+        <tbody>{elements}</tbody>
+      </table>
+    );
+  }
+}
+
+export default DetailBase;

src/xoonips/item-type/lib/ListBase.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { BrainAtlasType, MultiLang } from '../../../config';
+import ItemUtil, { Item } from '../../lib/ItemUtil';
+import SimPFLinkIcon from './field/SimPFLinkIcon';
+
+export interface ListBaseProps {
+  lang: MultiLang;
+  item: Item;
+  type: BrainAtlasType;
+}
+
+class ListBase extends React.Component<ListBaseProps> {
+  protected label = '';
+  protected icon = '';
+  protected url: string;
+  protected simpfLinkUrl: string;
+
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.url = ItemUtil.getUrl(props.type, props.item);
+    this.simpfLinkUrl = ItemUtil.getSimPFLinkUrl(props.item.item_id);
+  }
+
+  renderBody() {
+    return <></>;
+  }
+
+  render() {
+    const { lang } = this.props;
+    return (
+      <table>
+        <tbody>
+          <tr>
+            <td className="listIcon">
+              <img src={this.icon} alt={this.label} />
+            </td>
+            <td>{this.renderBody()}</td>
+            <td className="listExtra">
+              <SimPFLinkIcon lang={lang} url={this.simpfLinkUrl} isDetail={false} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default ListBase;

src/xoonips/item-type/lib/TopBase.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+import { BrainAtlasType, MultiLang } from '../../../config';
+import Functions from '../../../functions';
+import ItemUtil, { ItemSubTypesAll } from '../../lib/ItemUtil';
+
+export interface TopBaseProps {
+  lang: MultiLang;
+  type: BrainAtlasType;
+}
+
+class TopBase extends React.Component<TopBaseProps> {
+  protected type = '';
+  protected label = '';
+  protected icon = '';
+  protected description = '';
+  protected subTypes: ItemSubTypesAll = [];
+
+  render() {
+    const { lang, type } = this.props;
+    const url = ItemUtil.getItemTypeSearchUrl(type, this.type, '');
+    const links = this.subTypes.map((subtype, i) => {
+      const url = ItemUtil.getItemTypeSearchUrl(type, this.type, subtype.type);
+      return (
+        <React.Fragment key={i}>
+          {i > 0 && ' / '}
+          <Link to={url}>{subtype.label}</Link>
+        </React.Fragment>
+      );
+    });
+    return (
+      <div>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <img src={this.icon} alt={this.label} />
+              </td>
+              <td className="itemTypeName">
+                <Link to={url}>{this.label}</Link>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <hr />
+        <div>{Functions.mlang(this.description, lang)}</div>
+        {links}
+      </div>
+    );
+  }
+}
+
+export default TopBase;

src/xoonips/item-type/lib/field/Author.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { MultiLang } from '../../../../config';
+
+interface Props {
+  lang: MultiLang;
+  author: string[];
+}
+
+const Author: React.FC<Props> = (props) => {
+  const { author } = props;
+  if (author.length === 0) {
+    return null;
+  }
+  const elements = author.map((value, idx) => {
+    const evenodd = idx % 2 === 0 ? 'even' : 'odd';
+    return (
+      <tr key={idx}>
+        <td className={evenodd}>{value}</td>
+      </tr>
+    );
+  });
+  return (
+    <table>
+      <tbody>{elements}</tbody>
+    </table>
+  );
+};
+
+export default Author;

src/xoonips/item-type/lib/field/ChangeLog.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { MultiLang } from '../../../../config';
+import Functions from '../../../../functions';
+import { ItemBasicChangeLog } from '../../../lib/ItemUtil';
+import DateTime from './DateTime';
+
+interface Props {
+  lang: MultiLang;
+  changelog: ItemBasicChangeLog[];
+}
+
+const ChangeLog: React.FC<Props> = (props) => {
+  const { lang, changelog } = props;
+  if (changelog.length === 0) {
+    return null;
+  }
+  const elements = changelog.map((value, i) => {
+    return (
+      <tr key={i}>
+        <td>
+          <DateTime lang={lang} date={value.log_date} onlyDate={true} />
+        </td>
+        <td>{Functions.mlang(value.log, lang)}</td>
+      </tr>
+    );
+  });
+  return (
+    <table>
+      <tbody>{elements}</tbody>
+    </table>
+  );
+};
+
+export default ChangeLog;

src/xoonips/item-type/lib/field/Contributor.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { MultiLang } from '../../../../config';
+import Functions from '../../../../functions';
+
+interface Props {
+  lang: MultiLang;
+  uname: string;
+  name: string;
+}
+
+const Contributor: React.FC<Props> = (props) => {
+  const { lang, name, uname } = props;
+  const unsubscribed = '([en]Unsubscribed User[/en][ja]退会済みユーザ[/ja])';
+  const label = uname === '' ? unsubscribed : name === '' ? uname : name + ' (' + uname + ')';
+  return <span>{Functions.mlang(label, lang)}</span>;
+};
+
+export default Contributor;

src/xoonips/item-type/lib/field/CreativeCommons.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import { MultiLang } from '../../../../config';
+
+type CreativeCommonsType = 'by' | 'by-nc' | 'by-nc-nd' | 'by-nc-sa' | 'by-nd' | 'by-sa';
+
+const getCreativeCommonsType = (
+  ccCommercialUse: number,
+  ccModification: number,
+): CreativeCommonsType => {
+  const cc = ccCommercialUse * 10 + ccModification;
+  switch (cc) {
+    case 0:
+      return 'by-nc-nd';
+    case 1:
+      return 'by-nc-sa';
+    case 2:
+      return 'by-nc';
+    case 10:
+      return 'by-nd';
+    case 11:
+      return 'by-sa';
+    case 12:
+    default:
+      return 'by';
+  }
+};
+
+interface Props {
+  lang: MultiLang;
+  ccCommercialUse: number;
+  ccModification: number;
+}
+
+const CreativeCommons: React.FC<Props> = (props) => {
+  const { ccCommercialUse, ccModification } = props;
+  const type = getCreativeCommonsType(ccCommercialUse, ccModification);
+  const url = 'http://creativecommons.org/licenses/' + type + '/4.0/';
+  const logoUrl = 'https://i.creativecommons.org/l/' + type + '/4.0/88x31.png';
+  const labels = {
+    by: 'Attribution',
+    nc: 'NonCommercial',
+    nd: 'NoDerivatives',
+    sa: 'ShareAlike',
+  };
+  const label = type
+    .split('-')
+    .map((value) => {
+      const prop = value as 'by' | 'nc' | 'nd' | 'sa';
+      return labels[prop];
+    })
+    .join('-');
+  return (
+    <table style={{ borderCollapse: 'separate', borderSpacing: '5px' }}>
+      <tbody>
+        <tr>
+          <td>
+            <a href={url} target="_blank" rel="license noopener noreferrer">
+              <img alt="Creative Commons License" src={logoUrl} />
+            </a>
+          </td>
+          <td>
+            This work is licensed under a{' '}
+            <a href={url} target="_blank" rel="license noopener noreferrer">
+              Creative Commons {label} 4.0 International License
+            </a>
+            .
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+export default CreativeCommons;

src/xoonips/item-type/lib/field/DateTime.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import moment from 'moment';
+import { MultiLang } from '../../../../config';
+
+interface Props {
+  lang: MultiLang;
+  date: number;
+  onlyDate?: boolean;
+}
+
+const DateTime: React.FC<Props> = (props) => {
+  const { date, onlyDate } = props;
+  const d = moment(new Date(date * 1000));
+  let format = 'MMM D, Y';
+  if (typeof onlyDate === 'undefined' || !onlyDate) {
+    format += ' HH:mm:ss';
+  }
+  return <span>{d.format(format)}</span>;
+};
+
+export default DateTime;

src/xoonips/item-type/lib/field/Description.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import XoopsCode from '../../../../common/lib/XoopsCode';
+import { MultiLang } from '../../../../config';
+
+interface Props {
+  lang: MultiLang;
+  description: string;
+  className?: string;
+}
+
+const Description: React.FC<Props> = (props) => {
+  const { lang, description, className } = props;
+  const textarea = <XoopsCode lang={lang} text={description} dobr={true} />;
+  const name = typeof className === 'undefined' ? 'description' : className;
+  return <div className={name}>{textarea}</div>;
+};
+
+export default Description;

src/xoonips/item-type/lib/field/FileDownloadButton.module.css

@@ -0,0 +1,21 @@
+.downloadButton {
+  display: inline-block;
+  padding: 7px 20px;
+  text-decoration: none !important;
+  font-weight: normal !important;
+  background: #f0f0f0;
+  color: #000 !important;
+  border: solid 1px #e0e0e0;
+  box-shadow: 2px 2px #bbbbbb;
+  border-radius: 5px;
+}
+
+.downloadButton:hover {
+  background: #e8e8e8 !important;
+  border: solid 1px #cccccc;
+}
+
+.downloadButton:active {
+  transform: translate(2px, 2px);
+  box-shadow: none;
+}

src/xoonips/item-type/lib/field/FileDownloadButton.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { BrainAtlasType, MultiLang } from '../../../../config';
+import ItemUtil, { ItemBasicFile } from '../../../lib/ItemUtil';
+import LicenseAgreementDialog from './LicenseAgreementDialog';
+
+import styles from './FileDownloadButton.module.css';
+
+interface Props {
+  lang: MultiLang;
+  file: ItemBasicFile;
+  rights: string;
+  useCc: number;
+  ccCommercialUse: number;
+  ccModification: number;
+  type: BrainAtlasType;
+}
+
+const FileDownloadButton: React.FC<Props> = (props) => {
+  const { lang, file, rights, useCc, ccCommercialUse, ccModification, type } = props;
+
+  const [show, setShow] = React.useState<boolean>(false);
+
+  const handleClickDownload: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+    if (rights !== '') {
+      e.stopPropagation();
+      e.preventDefault();
+      setShow(true);
+    }
+  };
+
+  const url = ItemUtil.getFileUrl(type, file);
+  return (
+    <>
+      <a
+        className={styles.downloadButton}
+        href={url}
+        download={file.original_file_name}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={handleClickDownload}
+      >
+        Download
+      </a>
+      <LicenseAgreementDialog
+        lang={lang}
+        file={file}
+        rights={rights}
+        useCc={useCc}
+        ccCommercialUse={ccCommercialUse}
+        ccModification={ccModification}
+        show={show}
+        unsetShow={() => setShow(false)}
+        type={type}
+      />
+    </>
+  );
+};
+
+export default FileDownloadButton;

src/xoonips/item-type/lib/field/FileSize.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { MultiLang } from '../../../../config';
+
+interface Props {
+  lang: MultiLang;
+  size: number;
+}
+
+const FileSize: React.FC<Props> = (props) => {
+  const { size } = props;
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const power = size > 0 ? Math.floor(Math.log(size) / Math.log(1024)) : 0;
+  const label = Math.round((size / Math.pow(1024, power)) * 10) / 10 + ' ' + units[power];
+  return <span>{label}</span>;
+};
+
+export default FileSize;

src/xoonips/item-type/lib/field/FreeKeyword.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { MultiLang } from '../../../../config';
+
+interface Props {
+  lang: MultiLang;
+  keyword: string[];
+}
+
+const FreeKeyword: React.FC<Props> = (props) => {
+  const { keyword } = props;
+  if (keyword.length === 0) {
+    return null;
+  }
+  const label = keyword.join(', ');
+  return <span>{label}</span>;
+};
+
+export default FreeKeyword;

src/xoonips/item-type/lib/field/ItemFile.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import { BrainAtlasType, MultiLang } from '../../../../config';
+import Functions from '../../../../functions';
+import { ItemBasicFile } from '../../../lib/ItemUtil';
+import DateTime from './DateTime';
+import FileDownloadButton from './FileDownloadButton';
+import FileSize from './FileSize';
+
+interface Props {
+  lang: MultiLang;
+  file: ItemBasicFile[];
+  fileType: string;
+  rights?: string;
+  useCc?: number;
+  ccCommercialUse?: number;
+  ccModification?: number;
+  downloadLimit?: number;
+  type: BrainAtlasType;
+}
+
+const ItemFile: React.FC<Props> = (props) => {
+  const {
+    lang,
+    file,
+    fileType,
+    type,
+    rights = '',
+    useCc = 0,
+    ccCommercialUse = 0,
+    ccModification = 0,
+    downloadLimit = 0,
+  } = props;
+
+  const data = file.find((value) => {
+    return value.file_type_name === fileType;
+  });
+
+  if (typeof data === 'undefined') {
+    return null;
+  }
+  const date = new Date(data.timestamp);
+  const timestamp = Math.floor(date.valueOf() / 1000);
+  return (
+    <div>
+      {data.original_file_name}
+      <br />
+      <table>
+        <tbody>
+          <tr>
+            <td>Type</td>
+            <td>: {data.mime_type}</td>
+            <td rowSpan={4}>
+              {downloadLimit === 0 && (
+                <FileDownloadButton
+                  lang={lang}
+                  file={data}
+                  rights={rights}
+                  useCc={useCc}
+                  ccCommercialUse={ccCommercialUse}
+                  ccModification={ccModification}
+                  type={type}
+                />
+              )}
+            </td>
+          </tr>
+          <tr>
+            <td>Size</td>
+            <td>
+              : <FileSize lang={lang} size={data.file_size} />
+            </td>
+          </tr>
+          <tr>
+            <td>Last updated</td>
+            <td>
+              : <DateTime lang={lang} date={timestamp} onlyDate={true} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      {downloadLimit === 1 && (
+        <>
+          <br />(
+          {Functions.mlang('[en]File has been removed[/en][ja]ファイルは削除されました[/ja]', lang)}
+          )
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ItemFile;

src/xoonips/item-type/lib/field/ItemIndex.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+import { BrainAtlasType, MultiLang } from '../../../../config';
+import Functions from '../../../../functions';
+import IndexUtil from '../../../lib/IndexUtil';
+import { ItemBasicIndex } from '../../../lib/ItemUtil';
+
+interface Props {
+  lang: MultiLang;
+  index: ItemBasicIndex[];
+  type: BrainAtlasType;
+}
+
+const ItemIndex: React.FC<Props> = (props) => {
+  const { lang, index, type } = props;
+  if (index.length === 0) {
+    return null;
+  }
+  const elements = index.map((value, idx) => {
+    const evenodd = idx % 2 === 0 ? 'even' : 'odd';
+    const url = IndexUtil.getUrl(type, value.index_id);
+    return (
+      <tr key={value.index_id}>
+        <td className={evenodd}>
+          <Link to={url}>{Functions.mlang(value.title, lang)}</Link>
+        </td>
+      </tr>
+    );
+  });
+  return (
+    <table>
+      <tbody>{elements}</tbody>
+    </table>
+  );
+};
+
+export default ItemIndex;

src/xoonips/item-type/lib/field/Language.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { MultiLang } from '../../../../config';
+import Functions from '../../../../functions';
+import { ItemBasicLang } from '../../../lib/ItemUtil';
+
+interface Props {
+  lang: MultiLang;
+  itemLang: ItemBasicLang;
+}
+
+const Language: React.FC<Props> = (props) => {
+  const { lang, itemLang } = props;
+  const langStr = {
+    eng: '[en]English[/en][ja]英語[/ja]',
+    jpn: '[en]Japanese[/en][ja]日本語[/ja]',
+    fra: '[en]French[/en][ja]フランス語[/ja]',
+    deu: '[en]German[/en][ja]ドイツ語[/ja]',
+    esl: '[en]Spanish[/en][ja]スペイン語[/ja]',
+    ita: '[en]Italian[/en][ja]イタリア語[/ja]',
+    dut: '[en]Dutch[/en][ja]オランダ語[/ja]',
+    sve: '[en]Swedish[/en][ja]スウェーデン語[/ja]',
+    nor: '[en]Norwegian[/en][ja]ノルウェー語[/ja]',
+    dan: '[en]Danish[/en][ja]デンマーク語[/ja]',
+    fin: '[en]Finnish[/en][ja]フィンランド語[/ja]',
+    por: '[en]Portuguese[/en][ja]ポルトガル語[/ja]',
+    chi: '[en]Chinese[/en][ja]中国語[/ja]',
+    kor: '[en]Korean[/en][ja]韓国語[/ja]',
+  };
+  if (!(itemLang in langStr)) {
+    return null;
+  }
+  return <span>{Functions.mlang(langStr[itemLang], lang)}</span>;
+};
+
+export default Language;

src/xoonips/item-type/lib/field/LicenseAgreementDialog.module.css

@@ -0,0 +1,38 @@
+.overlay {
+  position: fixed;
+  z-index: 90;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #000000;
+  opacity: 0.8;
+}
+
+.dialog {
+  position: fixed;
+  background-color: #d8d8d8;
+  width: 570px;
+  z-index: 100;
+  top: 50%;
+  left: 50%;
+  right: auto;
+  bottom: auto;
+  margin: 0 auto;
+  padding: 20px;
+  transform: translate(-50%, -50%);
+  border-radius: 5px;
+}
+
+.box {
+  background-color: #fff;
+  padding: 10px;
+}
+
+.download {
+  text-align: center;
+}
+
+.download button {
+  margin: 5px 5px 0;
+}

src/xoonips/item-type/lib/field/LicenseAgreementDialog.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+
+import { Modal } from 'react-overlays';
+import { RenderModalBackdropProps } from 'react-overlays/cjs/Modal';
+import { BrainAtlasType, MultiLang } from '../../../../config';
+import Functions from '../../../../functions';
+import ItemUtil, { ItemBasicFile } from '../../../lib/ItemUtil';
+import DateTime from './DateTime';
+import FileSize from './FileSize';
+import Rights from './Rights';
+
+import styles from './LicenseAgreementDialog.module.css';
+
+interface Props {
+  lang: MultiLang;
+  file: ItemBasicFile;
+  rights: string;
+  useCc: number;
+  ccCommercialUse: number;
+  ccModification: number;
+  show: boolean;
+  unsetShow: () => void;
+  type: BrainAtlasType;
+}
+
+const LicenseAgreementDialog: React.FC<Props> = (props) => {
+  const { lang, file, rights, useCc, ccCommercialUse, ccModification, show, unsetShow, type } =
+    props;
+
+  const [isShow, setIsShow] = React.useState<boolean>(show);
+  const [disabled, setDisabled] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    if (show) {
+      setDisabled(true);
+    }
+  }, [show]);
+
+  const handleChangeCheckbox: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const disabled = e.target.value === '0';
+    setDisabled(disabled);
+  };
+
+  const handleClickDownload: React.MouseEventHandler<HTMLButtonElement> = () => {
+    unsetShow();
+    setIsShow(false);
+  };
+
+  const handleClickCancel = () => {
+    unsetShow();
+    setIsShow(false);
+  };
+
+  const renderBackdrop = (props: RenderModalBackdropProps) => {
+    return <div className={styles.overlay} {...props} />;
+  };
+
+  const date = new Date(file.timestamp);
+  const timestamp = Math.floor(date.valueOf() / 1000);
+  const url = ItemUtil.getFileUrl(type, file);
+  return (
+    <Modal
+      className={styles.dialog}
+      show={isShow}
+      onHide={handleClickCancel}
+      renderBackdrop={renderBackdrop}
+    >
+      <div>
+        <div>
+          {Functions.mlang(
+            '[en]Download file information[/en][ja]ダウンロードするファイルの情報[/ja]',
+            lang,
+          )}
+          <div className={styles.box}>
+            {file.original_file_name}
+            <br />
+            <table>
+              <tbody>
+                <tr>
+                  <td>Type</td>
+                  <td>: {file.mime_type}</td>
+                </tr>
+                <tr>
+                  <td>Size</td>
+                  <td>
+                    : <FileSize lang={lang} size={file.file_size} />
+                  </td>
+                </tr>
+                <tr>
+                  <td>Last updated</td>
+                  <td>
+                    : <DateTime lang={lang} date={timestamp} onlyDate={true} />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <br />
+        <div>
+          {Functions.mlang('[en]License agreement[/en][ja]ファイルのライセンス[/ja]', lang)}
+          <div className={styles.box}>
+            {Functions.mlang(
+              '[en]Please read the following license agreement carefully.[/en][ja]このファイルには下記のライセンスが設定されています。[/ja]',
+              lang,
+            )}
+            <div>
+              <Rights
+                lang={lang}
+                rights={rights}
+                useCc={useCc}
+                ccCommercialUse={ccCommercialUse}
+                ccModification={ccModification}
+              />
+              <input
+                type="radio"
+                name="radio_license"
+                value="1"
+                onChange={handleChangeCheckbox}
+                checked={!disabled}
+              />
+              {Functions.mlang(
+                '[en]I accept the terms in the license agreement.[/en][ja]ライセンスに同意します。[/ja]',
+                lang,
+              )}
+              <br />
+              <input
+                type="radio"
+                name="radio_license"
+                value="0"
+                onChange={handleChangeCheckbox}
+                checked={disabled}
+              />
+              {Functions.mlang(
+                '[en]I do not accept the terms in the license agreement.[/en][ja]ライセンスに同意しません。[/ja]',
+                lang,
+              )}
+              <br />
+            </div>
+          </div>
+        </div>
+        <br />
+        <div className={styles.download}>
+          Acceptance is needed to download this file.
+          <br />
+          <a href={url} download={file.original_file_name}>
+            <button className="formButton" onClick={handleClickDownload} disabled={disabled}>
+              Download
+            </button>
+          </a>
+          <button className="formButton" onClick={handleClickCancel}>
+            Cancel
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default LicenseAgreementDialog;

src/xoonips/item-type/lib/field/Preview.module.css

@@ -0,0 +1,23 @@
+.previewBox {
+  text-align: center;
+  margin: 10px;
+}
+
+.previewBox::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.preview {
+  width: 200px;
+  margin: 0 auto;
+  float: left;
+  text-align: center;
+}
+
+.preview caption {
+  width: 200px;
+  margin: 5px;
+  font-size: 80%;
+}

src/xoonips/item-type/lib/field/Preview.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import Lightbox, { SlideImage } from 'yet-another-react-lightbox';
+import { BrainAtlasType, MultiLang } from '../../../../config';
+import Functions from '../../../../functions';
+import ItemUtil, { ItemBasicFile } from '../../../lib/ItemUtil';
+
+import 'yet-another-react-lightbox/styles.css';
+import styles from './Preview.module.css';
+
+interface Props {
+  lang: MultiLang;
+  file: ItemBasicFile[];
+  type: BrainAtlasType;
+}
+
+const Preview: React.FC<Props> = (props) => {
+  const { lang, file, type } = props;
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [imageIndex, setImageIndex] = React.useState<number>(0);
+
+  const data = file.filter((value) => {
+    return value.file_type_name === 'preview';
+  });
+  if (data.length === 0) {
+    return null;
+  }
+  const slides: SlideImage[] = [];
+
+  const previews = data.map((value, idx) => {
+    const fileUrl = ItemUtil.getFileUrl(type, value);
+    const previewUrl = ItemUtil.getPreviewFileUrl(type, value);
+    const caption = Functions.mlang(value.caption, lang);
+    slides.push({ src: fileUrl });
+    return (
+      <figure key={value.file_id} className={styles.preview}>
+        <a
+          href={fileUrl}
+          download={value.original_file_name}
+          onClick={(e) => {
+            e.preventDefault();
+            setIsOpen(true);
+            setImageIndex(idx);
+          }}
+        >
+          <img src={previewUrl} alt={caption} />
+        </a>
+        <figcaption>{caption}</figcaption>
+      </figure>
+    );
+  });
+
+  return (
+    <>
+      <div className={styles.previewBox}>{previews}</div>
+      {isOpen && <Lightbox index={imageIndex} slides={slides} close={() => setIsOpen(false)} />}
+    </>
+  );
+};
+
+export default Preview;

src/xoonips/item-type/lib/field/PublicationDate.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { MultiLang } from '../../../../config';
+import DateTime from './DateTime';
+
+interface Props {
+  lang: MultiLang;
+  year: number;
+  month: number;
+  mday: number;
+}
+
+const PublicationDate: React.FC<Props> = (props) => {
+  const { lang, year, month, mday } = props;
+  const d = new Date(year + '-' + month + '-' + mday);
+  const timestamp = Math.floor(d.valueOf() / 1000);
+  return <DateTime lang={lang} date={timestamp} onlyDate={true} />;
+};
+
+export default PublicationDate;

src/xoonips/item-type/lib/field/Readme.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { MultiLang } from '../../../../config';
+import Description from './Description';
+
+interface Props {
+  lang: MultiLang;
+  readme: string;
+}
+
+const Readme: React.FC<Props> = (props) => {
+  const { lang, readme } = props;
+  return <Description lang={lang} description={readme} className="readme" />;
+};
+
+export default Readme;

src/xoonips/item-type/lib/field/RelatedTo.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import ItemType from '../..';
+import { BrainAtlasType, MultiLang } from '../../../../config';
+import ItemUtil from '../../../lib/ItemUtil';
+
+interface Props {
+  lang: MultiLang;
+  relatedTo: number[];
+  type: BrainAtlasType;
+}
+
+const RelatedTo: React.FC<Props> = (props) => {
+  const { lang, relatedTo, type } = props;
+  const isMounted = React.useRef<boolean>(false);
+
+  const [elements, setElements] = React.useState<React.ReactNode[]>([]);
+
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (relatedTo.length === 0) {
+      setElements([]);
+    } else {
+      ItemUtil.getList(type, relatedTo, (results) => {
+        const elements = results.data.map((item, idx) => {
+          const evenodd = idx % 0 ? 'even' : 'odd';
+          return (
+            <tr key={item.item_id}>
+              <td className={evenodd}>
+                <ItemType.List lang={lang} item={item} type={type} />
+              </td>
+            </tr>
+          );
+        });
+        if (isMounted.current) {
+          setElements(elements);
+        }
+      });
+    }
+  }, [lang, relatedTo, type]);
+
+  if (elements.length === 0) {
+    return null;
+  }
+  return (
+    <table className="listTable">
+      <tbody>
+        <tr>
+          <th>Item summary</th>
+        </tr>
+        {elements}
+      </tbody>
+    </table>
+  );
+};
+
+export default RelatedTo;

src/xoonips/item-type/lib/field/Rights.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { MultiLang } from '../../../../config';
+import CreativeCommons from './CreativeCommons';
+import Description from './Description';
+
+interface Props {
+  lang: MultiLang;
+  rights: string;
+  useCc: number;
+  ccCommercialUse: number;
+  ccModification: number;
+}
+
+const Rights: React.FC<Props> = (props) => {
+  const { lang, rights, useCc, ccCommercialUse, ccModification } = props;
+  if (useCc === 0) {
+    return <Description lang={lang} description={rights} className="rights" />;
+  }
+  return (
+    <CreativeCommons
+      lang={lang}
+      ccCommercialUse={ccCommercialUse}
+      ccModification={ccModification}
+    />
+  );
+};
+
+export default Rights;

src/xoonips/item-type/lib/field/SimPFLinkIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { MultiLang } from '../../../../config';
+import imageButton from '../../../assets/images/simpf_button.png';
+
+interface Props {
+  lang: MultiLang;
+  url: string;
+  isDetail: boolean;
+}
+
+const SimPFLinkIcon: React.FC<Props> = (props) => {
+  const { url, isDetail } = props;
+  const title = 'Online Simulation';
+  const size = isDetail ? 64 : 35;
+  if (url === '') {
+    return null;
+  }
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer" title={title}>
+      <img src={imageButton} alt={title} width={size} height={size} />
+    </a>
+  );
+};
+
+export default SimPFLinkIcon;

src/xoonips/item-type/lib/field/index.tsx

@@ -0,0 +1,39 @@
+import Author from './Author';
+import ChangeLog from './ChangeLog';
+import Contributor from './Contributor';
+import CreativeCommons from './CreativeCommons';
+import DateTime from './DateTime';
+import Description from './Description';
+import FileDownloadButton from './FileDownloadButton';
+import FileSize from './FileSize';
+import FreeKeyword from './FreeKeyword';
+import ItemFile from './ItemFile';
+import ItemIndex from './ItemIndex';
+import Language from './Language';
+import Preview from './Preview';
+import PublicationDate from './PublicationDate';
+import Readme from './Readme';
+import RelatedTo from './RelatedTo';
+import Rights from './Rights';
+
+const ItemTypeField = {
+  Author,
+  ChangeLog,
+  Contributor,
+  CreativeCommons,
+  DateTime,
+  Description,
+  FileDownloadButton,
+  FileSize,
+  FreeKeyword,
+  ItemFile,
+  ItemIndex,
+  Language,
+  Preview,
+  PublicationDate,
+  Readme,
+  RelatedTo,
+  Rights,
+};
+
+export default ItemTypeField;

src/xoonips/item-type/memo/MemoAdvancedSearch.tsx

@@ -0,0 +1,36 @@
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+
+class MemoAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = 'memo';
+    this.title = 'Memo';
+    this.state.values.title = '';
+    this.state.values.keyword = '';
+    this.state.values.description = '';
+    this.state.values.doi = '';
+    this.state.values.item_link = '';
+  }
+
+  getRows() {
+    const rows = [
+      { label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
+      {
+        label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+        value: this.renderFieldInputText('keyword', 50),
+      },
+      {
+        label: '[en]Description[/en][ja]概要[/ja]',
+        value: this.renderFieldInputText('description', 50),
+      },
+      { label: 'ID', value: this.renderFieldInputText('doi', 50) },
+      {
+        label: '[en]Item Link[/en][ja]リンク[/ja]',
+        value: this.renderFieldInputText('item_link', 50),
+      },
+    ];
+    return rows;
+  }
+}
+
+export default MemoAdvancedSearch;

src/xoonips/item-type/memo/MemoDetail.tsx

@@ -0,0 +1,66 @@
+import XoopsCode from '../../../common/lib/XoopsCode';
+import Functions from '../../../functions';
+import { ItemMemo } from '../../lib/ItemUtil';
+import DetailBase from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
+
+class MemoDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemMemo;
+    const fields = [
+      { label: 'ID', value: item.doi },
+      {
+        label: '[en]Language[/en][ja]言語[/ja]',
+        value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
+      },
+      { label: '[en]Title[/en][ja]タイトル[/ja]', value: Functions.mlang(item.title, lang) },
+      {
+        label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+        value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
+      },
+      {
+        label: '[en]Description[/en][ja]概要[/ja]',
+        value: <ItemTypeField.Description lang={lang} description={item.description} />,
+      },
+      {
+        label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
+      },
+      {
+        label: '[en]Created Date[/en][ja]作成日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
+      },
+      {
+        label: '[en]Contributor[/en][ja]登録者[/ja]',
+        value: <ItemTypeField.Contributor lang={lang} uname={item.uname} name={item.name} />,
+      },
+      { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
+      {
+        label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
+        value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
+      },
+      {
+        label: '[en]Item Link[/en][ja]リンク[/ja]',
+        value: <XoopsCode lang={lang} text={item.item_link} />,
+      },
+      {
+        label: '[en]Memo File[/en][ja]メモファイル[/ja]',
+        value: (
+          <ItemTypeField.ItemFile lang={lang} file={item.file} fileType="memo_file" type={type} />
+        ),
+      },
+      {
+        label: 'Index',
+        value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} />,
+      },
+      {
+        label: '[en]Related to[/en][ja]関連アイテム[/ja]',
+        value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} />,
+      },
+    ];
+    return fields;
+  }
+}
+
+export default MemoDetail;

src/xoonips/item-type/memo/MemoList.tsx

@@ -0,0 +1,30 @@
+import { Link } from 'react-router-dom';
+import XoopsCode from '../../../common/lib/XoopsCode';
+import Functions from '../../../functions';
+import { ItemMemo } from '../../lib/ItemUtil';
+import ListBase, { ListBaseProps } from '../lib/ListBase';
+
+import iconFile from '../../assets/images/icon_memo.gif';
+
+class MemoList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = 'Memo';
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemMemo;
+    const link = item.item_link !== '' ? <XoopsCode lang={lang} text={item.item_link} /> : null;
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {link}
+      </>
+    );
+  }
+}
+
+export default MemoList;

src/xoonips/item-type/memo/MemoTop.tsx

@@ -0,0 +1,15 @@
+import TopBase, { TopBaseProps } from '../lib/TopBase';
+
+import iconFile from '../../assets/images/icon_memo.gif';
+
+class MemoTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = 'memo';
+    this.label = 'Memo';
+    this.icon = iconFile;
+    this.description = '[en]Personal Memo Pad.[/en][ja]汎用メモパッド[/ja]';
+  }
+}
+
+export default MemoTop;

src/xoonips/item-type/memo/index.tsx

@@ -0,0 +1,13 @@
+import MemoAdvancedSearch from './MemoAdvancedSearch';
+import MemoDetail from './MemoDetail';
+import MemoList from './MemoList';
+import MemoTop from './MemoTop';
+
+const ItemTypeMemo = {
+  Top: MemoTop,
+  List: MemoList,
+  Detail: MemoDetail,
+  AdvancedSearch: MemoAdvancedSearch,
+};
+
+export default ItemTypeMemo;

src/xoonips/item-type/model/ModelAdvancedSearch.tsx

@@ -0,0 +1,49 @@
+import { ItemModelSubTypes } from '../../lib/ItemUtil';
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+
+class ModelAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = 'model';
+    this.title = 'Model';
+    this.state.values.title = '';
+    this.state.values.keyword = '';
+    this.state.values.description = '';
+    this.state.values.doi = '';
+    this.state.values.model_type = '';
+    this.state.values.creator = '';
+    this.state.values['file.preview.caption'] = '';
+    this.state.values['file.model_data.original_file_name'] = '';
+  }
+
+  getRows() {
+    const rows = [
+      { label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
+      {
+        label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+        value: this.renderFieldInputText('keyword', 50),
+      },
+      {
+        label: '[en]Description[/en][ja]概要[/ja]',
+        value: this.renderFieldInputText('description', 50),
+      },
+      { label: 'ID', value: this.renderFieldInputText('doi', 50) },
+      {
+        label: '[en]Model Type[/en][ja]モデルタイプ[/ja]',
+        value: this.renderFieldSelect('model_type', ItemModelSubTypes),
+      },
+      { label: '[en]Creator[/en][ja]作成者[/ja]', value: this.renderFieldInputText('creator', 50) },
+      {
+        label: '[en]Caption[/en][ja]キャプション[/ja]',
+        value: this.renderFieldInputText('file.preview.caption', 50),
+      },
+      {
+        label: '[en]Model File[/en][ja]モデルファイル[/ja]',
+        value: this.renderFieldInputText('file.model_data.original_file_name', 50),
+      },
+    ];
+    return rows;
+  }
+}
+
+export default ModelAdvancedSearch;

src/xoonips/item-type/model/ModelDetail.tsx

@@ -0,0 +1,106 @@
+import Functions from '../../../functions';
+import ItemUtil, { ItemModel } from '../../lib/ItemUtil';
+import DetailBase from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
+import SimPFLinkIcon from '../lib/field/SimPFLinkIcon';
+import ModelUtil from './ModelUtil';
+
+class ModelDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemModel;
+    const fields = [
+      { label: 'ID', value: item.doi },
+      {
+        label: '[en]Language[/en][ja]言語[/ja]',
+        value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
+      },
+      { label: '[en]Title[/en][ja]タイトル[/ja]', value: Functions.mlang(item.title, lang) },
+      {
+        label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+        value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
+      },
+      {
+        label: '[en]Description[/en][ja]概要[/ja]',
+        value: <ItemTypeField.Description lang={lang} description={item.description} />,
+      },
+      {
+        label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
+      },
+      {
+        label: '[en]Created Date[/en][ja]作成日[/ja]',
+        value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
+      },
+      {
+        label: '[en]Contributor[/en][ja]登録者[/ja]',
+        value: <ItemTypeField.Contributor lang={lang} uname={item.uname} name={item.name} />,
+      },
+      { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
+      {
+        label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
+        value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
+      },
+      {
+        label: '[en]Model Type[/en][ja]モデルタイプ[/ja]',
+        value: <ModelUtil.ModelType lang={lang} type={item.model_type} />,
+      },
+      {
+        label: '[en]Creator[/en][ja]作成者[/ja]',
+        value: <ItemTypeField.Author lang={lang} author={item.creator} />,
+      },
+      {
+        label: '[en]Preview[/en][ja]プレビュー[/ja]',
+        value: <ItemTypeField.Preview lang={lang} file={item.file} type={type} />,
+      },
+      {
+        label: '[en]Model File[/en][ja]モデルファイル[/ja]',
+        value: (
+          <ItemTypeField.ItemFile
+            lang={lang}
+            file={item.file}
+            fileType="model_data"
+            rights={item.rights}
+            useCc={item.use_cc}
+            ccCommercialUse={item.cc_commercial_use}
+            ccModification={item.cc_modification}
+            downloadLimit={item.attachment_dl_limit}
+            type={type}
+          />
+        ),
+      },
+      { label: 'Readme', value: <ItemTypeField.Readme lang={lang} readme={item.readme} /> },
+      {
+        label: 'Rights',
+        value: (
+          <ItemTypeField.Rights
+            lang={lang}
+            rights={item.rights}
+            useCc={item.use_cc}
+            ccCommercialUse={item.cc_commercial_use}
+            ccModification={item.cc_modification}
+          />
+        ),
+      },
+      {
+        label: 'Index',
+        value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} />,
+      },
+      {
+        label: '[en]Related to[/en][ja]関連アイテム[/ja]',
+        value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} />,
+      },
+    ];
+    const simpfLinkUrl = ItemUtil.getSimPFLinkUrl(item.item_id);
+    if (simpfLinkUrl !== '') {
+      const field = {
+        label: 'Online Simulation',
+        value: <SimPFLinkIcon lang={lang} url={simpfLinkUrl} isDetail={true} />,
+      };
+      fields.splice(13, 0, field);
+    }
+    return fields;
+  }
+}
+
+export default ModelDetail;

src/xoonips/item-type/model/ModelList.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+import Functions from '../../../functions';
+import { ItemModel } from '../../lib/ItemUtil';
+import ListBase, { ListBaseProps } from '../lib/ListBase';
+
+import iconFile from '../../assets/images/icon_model.gif';
+
+class ModelList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = 'Model';
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemModel;
+    const authors = item.creator.map((author, i) => {
+      return (
+        <React.Fragment key={i}>
+          {i > 0 && ', '}
+          {Functions.mlang(author, lang)}
+        </React.Fragment>
+      );
+    });
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {authors}
+      </>
+    );
+  }
+}
+
+export default ModelList;

src/xoonips/item-type/model/ModelTop.tsx

@@ -0,0 +1,17 @@
+import { ItemModelSubTypes } from '../../lib/ItemUtil';
+import TopBase, { TopBaseProps } from '../lib/TopBase';
+
+import iconFile from '../../assets/images/icon_model.gif';
+
+class ModelTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = 'model';
+    this.label = 'Model';
+    this.icon = iconFile;
+    this.description = '[en]Model programs/scripts.[/en][ja]モデル プログラム/スクリプト[/ja]';
+    this.subTypes = ItemModelSubTypes;
+  }
+}
+
+export default ModelTop;

src/xoonips/item-type/model/ModelUtil.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { MultiLang } from '../../../config';
+import { ItemModelSubType, ItemModelSubTypes } from '../../lib/ItemUtil';
+
+interface ModelTypeProps {
+  lang: MultiLang;
+  type: ItemModelSubType;
+}
+
+const ModelType: React.FC<ModelTypeProps> = (props: ModelTypeProps) => {
+  const { type } = props;
+  const subtype = ItemModelSubTypes.find((value) => {
+    return value.type === type;
+  });
+  if (typeof subtype === 'undefined') {
+    return null;
+  }
+  return <span>{subtype.label}</span>;
+};
+
+const ModelUtil = {
+  ModelType,
+};
+
+export default ModelUtil;

src/xoonips/item-type/model/index.tsx

@@ -0,0 +1,13 @@
+import ModelAdvancedSearch from './ModelAdvancedSearch';
+import ModelDetail from './ModelDetail';
+import ModelList from './ModelList';
+import ModelTop from './ModelTop';
+
+const ItemTypeModel = {
+  Top: ModelTop,
+  List: ModelList,
+  Detail: ModelDetail,
+  AdvancedSearch: ModelAdvancedSearch,
+};
+
+export default ItemTypeModel;

src/xoonips/item-type/paper/PaperAdvancedSearch.tsx

@@ -0,0 +1,51 @@
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+
+class PaperAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = 'paper';
+    this.title = 'Paper';
+    this.state.values.pubmed_id = '';
+    this.state.values.title = '';
+    this.state.values.keyword = '';
+    this.state.values.description = '';
+    this.state.values.doi = '';
+    this.state.values.author = '';
+    this.state.values.journal = '';
+    this.state.values.publication_year = '';
+    this.state.values.volume = '';
+    this.state.values.number = '';
+    this.state.values.page = '';
+  }
+
+  getRows() {
+    const rows = [
+      { label: 'PubMed ID', value: this.renderFieldInputText('pubmed_id', 50) },
+      { label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
+      {
+        label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
+        value: this.renderFieldInputText('keyword', 50),
+      },
+      {
+        label: '[en]Description[/en][ja]概要[/ja]',
+        value: this.renderFieldInputText('description', 50),
+      },
+      { label: 'ID', value: this.renderFieldInputText('doi', 50) },
+      { label: '[en]Author[/en][ja]著者[/ja]', value: this.renderFieldInputText('author', 50) },
+      {
+        label: '[en]Journal[/en][ja]ジャーナル[/ja]',
+        value: this.renderFieldInputText('journal', 50),
+      },
+      {
+        label: '[en]Publication Year[/en][ja]出版年[/ja]',
+        value: this.renderFieldInputText('publication_year', 10),
+      },
+      { label: '[en]Volume[/en][ja]巻[/ja]', value: this.renderFieldInputText('volume', 50) },
+      { label: '[en]Number[/en][ja]号[/ja]', value: this.renderFieldInputText('number', 50) },
+      { label: '[en]Page[/en][ja]ページ[/ja]', value: this.renderFieldInputText('page', 50) },
+    ];
+    return rows;
+  }
+}
+
+export default PaperAdvancedSearch;