hyperapp-is 0.1.24 → 0.1.26

package/README.md

@@ -614,26 +614,29 @@ export const getParentItems = (
 ```ts
 export const NavigatorFinder = function <S> (
 	props: {
-		state         : S
-		id            : string
-		currentKeys   : Keys_NavigatorItem
-		columns      ?: (directory: NavigatorItem | undefined) => NavigatorColumn[]
-		plugIn       ?: (props: {
-			state     : S
-			localState: Record<string, any>
-		}) => VNode<S>[]
-		afterRender  ?: (state: S, localState: Recrod<string, any>, vnode: VNode<S>) => VNode<S>
+		state            : S
+		id               : string
+		currentKeys      : Keys_NavigatorItem
+		columns         ?: (directory: NavigatorItem | undefined) => NavigatorColumn[]
+		plugIn          ?: (state: S, localState: Record<string, any>) => VNode<S>[]
+		toolBarNode     ?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>
+		parentItemsNode ?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>
+		statusBarNode   ?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>
+		afterRender     ?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>
 		[key: string]: any
 	}
 ): VNode<S>
 ```
 
-- state        : ステート
-- id           : ユニークID (DOM ID)
-- currentKeys  : カレント NavigatorItem までのパス
-- columns      : NavigatorColumn の配列を返す関数
-- plugIn       : プラグインの挿入
-- afterRender  : レンダーフック
+- state          : ステート
+- id             : ユニークID (DOM ID)
+- currentKeys    : カレント NavigatorItem までのパス
+- columns        : NavigatorColumn の配列を返す関数
+- plugIn         : プラグインの挿入
+- toolBarNode    : `toolBar` レンダーフック
+- parentItemsNode: `parentItems` レンダーフック
+- statusBarNode  : `statusBar` レンダーフック
+- afterRender    : 全体のレンダーフック
 
 localState
 - searchText: "" as string     // 検索テキスト
@@ -645,39 +648,40 @@ localState
 vnode
 ```html
 <div id={id}>
-
-	<div class="toolBar">
-		<input type="text" />
-		<button type="button">FILTER</button>
+	<div class="rapper">
+		<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>
+
+		<div class="statusBar">message</div>
 	</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>
-
-	<div class="statusBar">message</div>
-
-	<!-- plugIn 必要な文だけ追加 -->
+	<!-- plugIn 必要な分だけ追加 -->
 	<div id={plugInID}>
 	</div>
 </div>
@@ -703,24 +707,31 @@ export interface SearchResult {
 ```ts
 export const NavigatorSearch = function <S> (
 	props: {
-		state         : S
-		id            : string
-		currentKeys   : Keys_NavigatorItem
-		searchResult  : (item: NavigatorItem, depth: number) => VNode<S> | VNode<S>[]
-		hitTest       : (item: NavigatorItem) => boolean
-		maxItemsCount : number
-		afterRender  ?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>
-		[key: string]: any
+		state           : S
+		id              : string
+		currentKeys     : Keys_NavigatorItem
+		searchResult    : (item: NavigatorItem, depth: number) => VNode<S> | VNode<S>[]
+		hitTest         : (item: NavigatorItem) => boolean
+		maxItemsCount   : number
+		toolBarNode    ?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>
+		parentItemsNode?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>
+		statusBarNode  ?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>
+		afterRender    ?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>
+		[key: string]   : any
 	}
 ): VNode<S>
 ```
 
-- state        : ステート
-- id           : ユニークID (DOM ID)
-- searchResult : カードとして表示する VNode
-- hitTest      : 抽出条件
-- maxItemsCount: 最初に表示するカードの最大数
-- afterRender  : レンダーフック
+- state          : ステート
+- id             : ユニークID (DOM ID)
+- currentKeys    : カレント NavigatorItem までのパス
+- searchResult   : カードとして表示する VNode
+- hitTest        : 抽出条件
+- maxItemsCount  : 最初に表示するカードの最大数
+- toolBarNode    : `toolBar` レンダーフック
+- parentItemsNode: `parentItems` レンダーフック
+- statusBarNode  : `statusBar` レンダーフック
+- afterRender    : 全体のレンダーフック
 
 localState
 - maxItemsCount: props.maxItemsCount as number   // カードの最大表示数

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

@@ -53,6 +53,9 @@ export declare const NavigatorFinder: <S>(props: {
     currentKeys: Keys_NavigatorItem;
     columns?: (directory: NavigatorItem | undefined) => NavigatorColumn[];
     plugIn?: (state: S, localState: Record<string, any>) => VNode<S>[];
+    toolBarNode?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
+    parentItemsNode?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
+    statusBarNode?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
     afterRender?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
     [key: string]: any;
 }) => VNode<S>;
@@ -97,6 +100,9 @@ export declare const NavigatorSearch: <S>(props: {
     searchResult: (item: NavigatorItem, depth: number) => VNode<S> | VNode<S>[];
     hitTest: (item: NavigatorItem) => boolean;
     maxItemsCount: number;
+    toolBarNode?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
+    parentItemsNode?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
+    statusBarNode?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
     afterRender?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
     [key: string]: any;
 }) => VNode<S>;

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

@@ -238,15 +238,6 @@ export const NavigatorFinder = function (props) {
         });
     }; // end action_inputSearchText
     // ---------- ---------- ----------
-    // action_copyFolderPath
-    // ---------- ---------- ----------
-    const action_copyFolderPath = (state) => {
-        if (!current)
-            return state;
-        navigator.clipboard.writeText(current.path);
-        return state;
-    }; // end action_copyFolderPath
-    // ---------- ---------- ----------
     // action_sort
     // ---------- ---------- ----------
     const action_sort = (state, column) => {
@@ -261,29 +252,37 @@ export const NavigatorFinder = function (props) {
     // ---------- ---------- ----------
     // VNode
     // ---------- ---------- ----------
-    const vnode = div({
-        ...deleteKeys(props, "state", "currentKeys", "columns", "plugIn", "afterRender")
-    }, div({
+    // toolBarNode
+    const toolBarNode = div({
         class: "toolBar"
     }, input({
         type: "text",
         placeholder: "search keys",
         value: localState.searchText,
         oninput: action_inputSearchText
-    }), SelectButton({
+    }), button({
+        type: "button",
+        title: "delete keys",
+        onclick: (state) => {
+            return setLocalState(state, id, {
+                searchText: ""
+            });
+        }
+    }, icon_trashBox), SelectButton({
         state: state,
         id: `${createLocalKey(id)}_filter`,
-        keyNames: [createLocalKey(id), "selected"]
-    }, "FILTER")), div({
+        keyNames: [createLocalKey(id), "selected"],
+        title: "filter"
+    }, icon_filter));
+    // parentItemsNode
+    const parentItemsNode = 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")), div({
+    }, parent.name))));
+    // itemsNode
+    const itemsNode = div({
         class: "items"
     }, table({}, thead({}, tr({}, columns.map(col => th({
         class: col.compare ? "sort" : "",
@@ -306,9 +305,15 @@ export const NavigatorFinder = function (props) {
         }, span({
             class: hitTest(t) ? "hit" : ""
         }, v));
-    })))))), 
-    // statusBar
-    div({ class: "statusBar" }, message), 
+    }))))));
+    // statusBarNode
+    const statusBarNode = div({ class: "statusBar" }, message);
+    // vnode
+    const vnode = div({
+        ...deleteKeys(props, "state", "currentKeys", "columns", "plugIn", "toolBarNode", "parentItemsNode", "statusBarNode", "afterRender")
+    }, div({
+        class: "rapper"
+    }, props.toolBarNode ? props.toolBarNode(state, localState, toolBarNode) : toolBarNode, props.parentItemsNode ? props.parentItemsNode(state, localState, parentItemsNode) : parentItemsNode, itemsNode, props.statusBarNode ? props.statuBarNode(state, localState, statusBarNode) : statusBarNode), 
     // plugIn
     plugIn
         ? plugIn(state, localState)
@@ -387,6 +392,39 @@ const icon_file = svg({
     strokeLinecap: "round",
     strokeLinejoin: "round"
 }, path({ d: "M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z" }), path({ d: "M14 2v6h6" }));
+// icon_trashBox
+const icon_trashBox = svg({
+    viewBox: "0 0 24 24",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+}, path({ d: "M3 6h18" }), path({ d: "M8 6V4h8v2" }), path({ d: "M6 6l1 14h10l1-14" }), path({ d: "M10 11v6" }), path({ d: "M14 11v6" }));
+// icon_filter
+const icon_filter = svg({
+    viewBox: "0 0 24 24",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+}, path({ d: "M3 5h18" }), path({ d: "M6 12h12" }), path({ d: "M10 19h4" }));
+// icon_copy
+const icon_copy = svg({
+    viewBox: "0 0 24 24",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+}, path({ d: "M9 9h11v11H9z" }), path({ d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }));
 // ---------- ---------- ---------- ---------- ----------
 // NavigatorSearch Component (NavigatorFinder plugIn)
 // ---------- ---------- ---------- ---------- ----------
@@ -516,54 +554,58 @@ export const NavigatorSearch = function (props) {
     // ---------- ---------- ----------
     // vnode
     // ---------- ---------- ----------
-    const vnode = div({
-        ...deleteKeys(props, "state", "currentKeys", "searchResult", "hitTest", "maxItemsCount", "afterRender")
-    }, 
-    // toolBar
-    div({
+    const toolBarNode = div({
         class: "toolBar"
     }, 
     // sort
     button({
         type: "button",
+        title: "sort depth",
         onclick: [action_setSort, "depth"]
     }, icon_depth), button({
         type: "button",
+        title: "sort name",
         onclick: [action_setSort, "name"]
     }, icon_name), 
     // filter
     button({
         type: "button",
         class: localState.isDirectory ? "" : "ignore",
+        title: "directory",
         onclick: (state) => setLocalState(state, id, {
             isDirectory: !localState.isDirectory
         })
     }, icon_directory), button({
         type: "button",
         class: localState.isFile ? "" : "ignore",
+        title: "file",
         onclick: (state) => setLocalState(state, id, {
             isFile: !localState.isFile
         })
-    }, icon_file)), 
-    // parentItems
-    div({
+    }, icon_file));
+    // parentItemsNode
+    const parentItemsNode = div({
         class: "parentItems"
     }, ol({}, parentItems.map(item => li({
         onclick: (state) => setValue(state, currentKeys, item)
-    }, item.name)))), 
-    // items
-    div({
+    }, item.name))));
+    // itemsNode
+    const itemsNode = div({
         class: "items",
         onscroll: action_itemsScroll
     }, ul({}, drawItems.map(item => li({
         class: "item",
         key: item.item.path,
         title: item.item.path
-    }, searchResult(item.item, item.depth))))), 
-    // statusBar
-    div({
+    }, searchResult(item.item, item.depth)))));
+    // statusBarNode
+    const statusBarNode = div({
         class: "statusBar"
-    }, message));
+    }, message);
+    // vnode
+    const vnode = div({
+        ...deleteKeys(props, "state", "currentKeys", "searchResult", "hitTest", "maxItemsCount", "toolBarNode", "parentItemsNode", "statusBarNode", "afterRender")
+    }, props.toolBarNode ? props.toolBarNode(state, localState, toolBarNode) : toolBarNode, props.parentItemsNode ? props.parentItemsNode(state, localState, parentItemsNode) : parentItemsNode, itemsNode, props.statusBarNode ? props.statusBarNode(state, localState, statusBarNode) : statusBarNode);
     // ---------- ---------- ----------
     // afterRender
     // ---------- ---------- ----------

package/package.json

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