hyperapp-is 0.1.15 → 0.1.18

package/README.md

@@ -364,7 +364,7 @@ Hyperapp の h 関数ラッパー。JSX と競合する場合に使用
 children の処理も同時に行っているため、本ライブラリでは VNode を作成する際に使用しています
 
 ```ts
-export const el = (tag: string) => <S> (
+export const el = <S = any> (tag: string) => (
 	props   ?: { [key: string]: any },
 	children?: Array
 ): VNode<S>
@@ -615,14 +615,10 @@ export const NavigatorFinder = function <S> (
 		id            : string
 		currentKeys   : Keys_NavigatorItem
 		columns      ?: (directory: NavigatorItem | undefined) => NavigatorColumn[]
-		maxItemsCount?: number
-		itemClick    ?: (state: S, item: NavigatorItem) => S | [S, Effect<S>]
 		afterRender  ?: (props: {
 			state     : S
-			current  ?: NavigatorItem
-			extension?: Record<string, any>
+			localState: Recrod<string, any>
 		}, vnode: VNode<S>) => VNode<S>
-		extension   ?: Record<string, any>
 		[key: string]: any
 	}
 ): VNode<S>
@@ -632,12 +628,48 @@ export const NavigatorFinder = function <S> (
 - id           : ユニークID (DOM ID)
 - currentKeys  : カレント NavigatorItem までのパス
 - columns      : NavigatorColumn の配列を返す関数
-- maxItemsCount: 最大表示するアイテム数
-- itemClick    : アイテムをクリックした時のアクション
 - afterRender  : レンダーフック
-- extension    : レンダーフックに渡す拡張情報
 
-`maxItemsCount` は、そのうち表示数コントロールを作成するかも
+vnode
+```html
+<div>
+	<div class="main">
+		<section>
+			<div class="toolBar">
+				<input type="text" />
+				<button type="button">FILTER</button>
+			</div>
+
+			<div class="parentItems">
+				<ol>
+					<li>parent</li>
+				</ol>
+				<button type="button">COPY</button>
+			</div>
+
+			<div class="items">
+				<table>
+					<thead>
+						<tr>
+							<th>ヘッダー</th>
+							<th class="sort">ソート付きヘッダー</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td class="file"><span>value</span></td>
+							<td class="directory"><span>value</span></td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</section>
+	</div>
+
+	<!-- statusBar -->
+	<div class="statusBar">message</div>
+</div>
+```
 
 ---
 

package/dist/hyperapp-is/core/navigator.d.ts

@@ -1,4 +1,4 @@
-import { VNode, Effect } from "hyperapp";
+import { VNode } from "hyperapp";
 import { Keys_NavigatorItem } from "./state";
 export interface NavigatorItem {
     parent: NavigatorItem | null;
@@ -55,12 +55,9 @@ export declare const NavigatorFinder: <S>(props: {
     id: string;
     currentKeys: Keys_NavigatorItem;
     columns?: (directory: NavigatorItem | undefined) => NavigatorColumn[];
-    maxItemsCount?: number;
-    itemClick?: (state: S, item: NavigatorItem) => S | [S, Effect<S>];
     afterRender?: (props: {
         state: S;
-        current?: NavigatorItem;
-        extension?: Record<string, any>;
+        localState: Record<string, any>;
     }, vnode: VNode<S>) => VNode<S>;
     extension?: Record<string, any>;
     [key: string]: any;

package/dist/hyperapp-is/core/navigator.js

@@ -32,7 +32,8 @@ export const convertJsonToNavigatorItem = function (props) {
                 data: entry.data,
                 getEntries,
                 isNode: entry.isNode,
-                depth: depth + 1
+                depth: depth + 1,
+                extension
             }));
         }
     });
@@ -60,6 +61,7 @@ export const getParentItems = (item) => {
 // vnodes
 // ---------- ---------- ---------- ---------- ----------
 const div = el("div");
+const section = el("section");
 const table = el("table");
 const thead = el("thead");
 const tbody = el("tbody");
@@ -67,6 +69,7 @@ const tr = el("tr");
 const th = el("th");
 const td = el("td");
 const ol = el("ol");
+const ul = el("ul");
 const li = el("li");
 const button = el("button");
 const input = el("input");
@@ -97,7 +100,7 @@ const span = el("span");
  */
 export const NavigatorFinder = function (props) {
     var _a, _b;
-    const { state, id, currentKeys, maxItemsCount = 0, itemClick, afterRender, extension } = props;
+    const { state, id, currentKeys, afterRender } = props;
     const current = getValue(state, currentKeys, undefined);
     // localState
     const { searchText, selected, sortType, reverse, sortKey } = getLocalState(state, id, {
@@ -181,11 +184,7 @@ export const NavigatorFinder = function (props) {
                 return columns.some(col => hitTest(col.text ? col.text(child) : col.val(child)));
             })
             : item.children;
-        // maxCount
-        const count = maxItemsCount === 0
-            ? result.length
-            : Math.min(maxItemsCount, result.length);
-        return result.slice(0, count);
+        return result;
     }; // end getItems
     // items
     const items = getItems(current);
@@ -203,6 +202,8 @@ export const NavigatorFinder = function (props) {
     const hitCount = isFilter
         ? items.length
         : items.filter(item => columns.some(col => hitTest(col.text ? col.text(item) : col.val(item)))).length;
+    // message
+    const message = `hit items = ${hitCount} / ${count}`;
     // ---------- ---------- ----------
     // action_parentClick
     // ---------- ---------- ----------
@@ -260,10 +261,10 @@ export const NavigatorFinder = function (props) {
     // VNode
     // ---------- ---------- ----------
     const vnode = div({
-        ...deleteKeys(props, "state", "currentKeys", "columns", "itemClick", "afterRender", "extension")
-    }, 
-    // toolBar
-    div({
+        ...deleteKeys(props, "state", "currentKeys", "columns", "afterRender")
+    }, div({
+        class: "main"
+    }, section({}, div({
         class: "toolBar"
     }, input({
         type: "text",
@@ -274,25 +275,29 @@ export const NavigatorFinder = function (props) {
         state: state,
         id: `${createLocalKey(id)}_filter`,
         keyNames: [createLocalKey(id), "selected"]
-    }, "FILTER"), button({
+    }, "FILTER")), div({
+        class: "parentItems"
+    }, ol({}, parentItems.map(parent => li({
+        key: parent.path,
+        onclick: [action_parentClick, parent]
+    }, parent.name))), button({
         type: "button",
         title: "現在のフォルダパスを、クリップボードにコピー",
         onclick: action_copyFolderPath
-    }, "COPY")), 
-    // parentItems
-    ol({}, parentItems.map(parent => li({
-        key: parent.path,
-        onclick: [action_parentClick, parent]
-    }, parent.name))), 
-    // items
-    table({}, thead({}, tr({}, columns.map(col => th({
+    }, "COPY")), div({
+        class: "items"
+    }, table({}, thead({}, tr({}, columns.map(col => th({
+        class: col.compare ? "sort" : "",
         onclick: [action_sort, col]
     }, col.name + (sortKey === col.name
         ? (reverse ? " ▼" : " ▲")
         : ""))))), tbody({}, items.map(item => tr({
         key: item.path,
+        class: item.children === undefined
+            ? "file"
+            : "directory",
         onclick: item.children === undefined
-            ? itemClick ? [itemClick, item] : undefined
+            ? undefined
             : [action_itemClick, item]
     }, columns.map(col => {
         const v = col.val(item);
@@ -302,13 +307,20 @@ export const NavigatorFinder = function (props) {
         }, span({
             class: hitTest(t) ? "hit" : ""
         }, v));
-    }))))), 
+    })))))))), 
     // statusBar
-    div({
-        class: "statusBar"
-    }, `items ${items.length} / ${count}` + (searchText !== "" ? ` (${hitCount} hit)` : "")));
+    div({ class: "statusBar" }, message));
     // ---------- ---------- ----------
     // afterRender
     // ---------- ---------- ----------
-    return afterRender ? afterRender({ state, current, extension }, vnode) : vnode;
+    return afterRender ? afterRender({
+        state,
+        localState: {
+            searchText,
+            selected,
+            sortType,
+            reverse,
+            sortKey
+        }
+    }, vnode) : vnode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperapp-is",
-  "version": "0.1.15",
+  "version": "0.1.18",
   "description": "UI foundation library for Hyperapp by is4416",
   "license": "MIT",
   "type": "module",