hyperapp-is 0.1.20 → 0.1.22

package/README.md

@@ -615,6 +615,10 @@ export const NavigatorFinder = function <S> (
 		id            : string
 		currentKeys   : Keys_NavigatorItem
 		columns      ?: (directory: NavigatorItem | undefined) => NavigatorColumn[]
+		plugIn       ?: (props: {
+			state     : S
+			localState: Record<string, any>
+		}) => VNode<S>[]
 		afterRender  ?: (props: {
 			state     : S
 			localState: Recrod<string, any>
@@ -628,49 +632,54 @@ export const NavigatorFinder = function <S> (
 - id           : ユニークID (DOM ID)
 - currentKeys  : カレント NavigatorItem までのパス
 - columns      : NavigatorColumn の配列を返す関数
+- plugIn       : プラグインの挿入
 - afterRender  : レンダーフック
 
 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 id={id}>
+
+	<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>
 
-	<!-- statusBar -->
 	<div class="statusBar">message</div>
+
+	<!-- plugIn 必要な文だけ追加 -->
+	<div id={plugInID}>
+	</div>
 </div>
 ```
 
+**CSS設計**
+- plugInを追加する場合は `grid` で整える前提
+- `flex` で整える場合は `afterRender` を併用し VNode を調整する
+
 ---
 
 ## hyperapp-is/animation

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

@@ -44,21 +44,24 @@ export declare const getParentItems: (item: NavigatorItem | undefined) => Naviga
  * - itemClick
  * 非ノードをクリックした際のアクション
  *
+ * - plugIn
+ * プラグインの追加
+ *
  * - afterRender
  * レンダーフック
- *
- * - extension
- * レンダーフックで参照できる拡張情報
  */
 export declare const NavigatorFinder: <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?: (props: {
         state: S;
         localState: Record<string, any>;
     }, vnode: VNode<S>) => VNode<S>;
-    extension?: Record<string, any>;
     [key: string]: any;
 }) => VNode<S>;

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

@@ -92,26 +92,35 @@ const span = el("span");
  * - itemClick
  * 非ノードをクリックした際のアクション
  *
+ * - plugIn
+ * プラグインの追加
+ *
  * - afterRender
  * レンダーフック
- *
- * - extension
- * レンダーフックで参照できる拡張情報
  */
 export const NavigatorFinder = function (props) {
     var _a, _b;
-    const { state, id, currentKeys, afterRender } = props;
+    const { state, id, currentKeys, plugIn, afterRender } = props;
     const current = getValue(state, currentKeys, undefined);
     // localState
-    const { searchText, selected, sortType, reverse, sortKey } = getLocalState(state, id, {
+    const localState = getLocalState(state, id, {
         searchText: "", // 検索テキスト
         selected: [], // 選択されているボタン名
         sortType: undefined, // ソート用比較関数
         reverse: false, // ソートを逆順にするか
         sortKey: undefined // 使用されているソート名 (column.name)
     });
+    /*
+    const { searchText, selected, sortType, reverse, sortKey } = getLocalState(state, id, {
+        searchText: "",        // 検索テキスト
+        selected  : [],        // 選択されているボタン名
+        sortType  : undefined, // ソート用比較関数
+        reverse   : false,     // ソートを逆順にするか
+        sortKey   : undefined  // 使用されているソート名 (column.name)
+    })
+    */
     // selected filter
-    const isFilter = selected.includes(`${createLocalKey(id)}_filter`);
+    const isFilter = localState.selected.includes(`${createLocalKey(id)}_filter`);
     // ---------- ---------- ----------
     // createColumns
     // ---------- ---------- ----------
@@ -163,7 +172,7 @@ export const NavigatorFinder = function (props) {
     const hitTest = (text) => {
         if (typeof text !== "string")
             return false;
-        const S = searchText.trim().toLowerCase();
+        const S = localState.searchText.trim().toLowerCase();
         if (S === "")
             return false;
         const keys = S.replace(/[ 　]+/g, " ").split(" ").filter(Boolean);
@@ -179,7 +188,7 @@ export const NavigatorFinder = function (props) {
         if (!item || item.children === undefined)
             return [];
         // filter
-        const result = isFilter && searchText !== ""
+        const result = isFilter && localState.searchText !== ""
             ? item.children.filter(child => {
                 return columns.some(col => hitTest(col.text ? col.text(child) : col.val(child)));
             })
@@ -189,9 +198,9 @@ export const NavigatorFinder = function (props) {
     // items
     const items = getItems(current);
     // sort
-    if (sortType) {
-        items.sort(sortType);
-        if (reverse)
+    if (localState.sortType) {
+        items.sort(localState.sortType);
+        if (localState.reverse)
             items.reverse();
     }
     // items count
@@ -253,7 +262,7 @@ export const NavigatorFinder = function (props) {
             return state;
         return setLocalState(state, id, {
             sortType: column.compare,
-            reverse: sortKey === column.name ? !reverse : false,
+            reverse: localState.sortKey === column.name ? !localState.reverse : false,
             sortKey: column.name
         });
     }; // end action_sort
@@ -261,15 +270,13 @@ export const NavigatorFinder = function (props) {
     // VNode
     // ---------- ---------- ----------
     const vnode = div({
-        ...deleteKeys(props, "state", "currentKeys", "columns", "afterRender")
+        ...deleteKeys(props, "state", "currentKeys", "columns", "plugIn", "afterRender")
     }, div({
-        class: "main"
-    }, section({}, div({
         class: "toolBar"
     }, input({
         type: "text",
         placeholder: "search keys",
-        value: searchText,
+        value: localState.searchText,
         oninput: action_inputSearchText
     }), SelectButton({
         state: state,
@@ -289,8 +296,8 @@ export const NavigatorFinder = function (props) {
     }, table({}, thead({}, tr({}, columns.map(col => th({
         class: col.compare ? "sort" : "",
         onclick: [action_sort, col]
-    }, col.name + (sortKey === col.name
-        ? (reverse ? " ▼" : " ▲")
+    }, col.name + (localState.sortKey === col.name
+        ? (localState.reverse ? " ▼" : " ▲")
         : ""))))), tbody({}, items.map(item => tr({
         key: item.path,
         class: item.children === undefined
@@ -307,20 +314,15 @@ export const NavigatorFinder = function (props) {
         }, span({
             class: hitTest(t) ? "hit" : ""
         }, v));
-    })))))))), 
+    })))))), 
     // statusBar
-    div({ class: "statusBar" }, message));
+    div({ class: "statusBar" }, message), 
+    // plugIn
+    plugIn
+        ? plugIn({ state, localState })
+        : []);
     // ---------- ---------- ----------
     // afterRender
     // ---------- ---------- ----------
-    return afterRender ? afterRender({
-        state,
-        localState: {
-            searchText,
-            selected,
-            sortType,
-            reverse,
-            sortKey
-        }
-    }, vnode) : vnode;
+    return afterRender ? afterRender({ state, localState }, vnode) : vnode;
 };

package/package.json

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