hyperapp-is 0.1.21 → 0.1.23

package/README.md

@@ -153,6 +153,8 @@ npm で非公開の関数 (実験用)は、解説に記載します
 - [convertJsonToNavigatorItem](#convertjsontonavigatoritem)
 - [getParentItems](#getparentitems)
 - [NavigatorFinder](#navigatorfinder)
+- [SearchResult](#searchresult)
+- [NavigatorSearch](#navigatorsearch)
 
 **animation / step.ts**
 - [effect_throwMessageStart](#effect_throwmessagestart)
@@ -221,6 +223,7 @@ src
 	 │  └ navigator.ts
 	 │       Keys_NavigatorItem, NavigatorItem, JsonEntry, NavigatorColumn
 	 │       convertJsonToNavigatorItem, getParentItems, NavigatorFinder
+	 │       SearchResult, NavigatorSearch
 	 │
 	 ├ animation
 	 │  ├ step.ts
@@ -615,6 +618,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,11 +635,20 @@ export const NavigatorFinder = function <S> (
 - id           : ユニークID (DOM ID)
 - currentKeys  : カレント NavigatorItem までのパス
 - columns      : NavigatorColumn の配列を返す関数
+- plugIn       : プラグインの挿入
 - afterRender  : レンダーフック
 
+localState
+- searchText: "" as string     // 検索テキスト
+- selected  : [] as string[]   // 選択されているボタン名
+- sortType  : undefined        // ソート用比較関数: (a: NavigatorItem, b: NavigatorItem) => number
+- reverse   : false as boolean // ソートを逆順にするか
+- sortKey   : undefined as undefined | string // 使用されているソート名 (column.name)
+
 vnode
 ```html
 <div id={id}>
+
 	<div class="toolBar">
 		<input type="text" />
 		<button type="button">FILTER</button>
@@ -662,13 +678,65 @@ vnode
 		</table>
 	</div>
 
-	<!-- statusBar -->
 	<div class="statusBar">message</div>
+
+	<!-- plugIn 必要な文だけ追加 -->
+	<div id={plugInID}>
+	</div>
 </div>
 ```
 
 ---
 
+### SearchResult
+`NavigatorSearch` で検索結果となる構造体
+
+```ts
+export interface SearchResult {
+	item : NavigatorItem
+	depth: number
+}
+```
+
+---
+
+### NavigatorSearch
+`NavigatorFinder` プラグイン
+
+```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  ?: (props: {
+			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  : レンダーフック
+
+localState
+- maxItemsCount: props.maxItemsCount as number   // カードの最大表示数
+- sortName     : undefined as undefined | string // ソート名
+- sortFn       : undefined as undefined | ((a: SearchResult, b: SearchResult) => number) // 比較関数
+- isDirectory  : true // ディレクトリを表示
+- isFile       : true // ファイルを表示
+
+---
+
 ## hyperapp-is/animation
 
 ### effect_throwMessageStart

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

@@ -35,30 +35,74 @@ export declare const getParentItems: (item: NavigatorItem | undefined) => Naviga
  * - 必須項目
  * state, id, currentKeys
  *
+ * - 拡張項目
+ * columns, plugIn, afterRender
+ *
  * - columns
  * カラムの表示設定
  *
- * - maxItemsCount
- * 最大表示させるアイテム数
- *
- * - itemClick
- * 非ノードをクリックした際のアクション
+ * - plugIn
+ * プラグインの追加
  *
  * - afterRender
  * レンダーフック
- *
- * - extension
- * レンダーフックで参照できる拡張情報
  */
 export declare const NavigatorFinder: <S>(props: {
     state: S;
     id: string;
     currentKeys: Keys_NavigatorItem;
     columns?: (directory: NavigatorItem | undefined) => NavigatorColumn[];
+    plugIn?: (state: S, localState: Record<string, any>) => VNode<S>[];
+    afterRender?: (props: {
+        state: S;
+        localState: Record<string, any>;
+    }, vnode: VNode<S>) => VNode<S>;
+    [key: string]: any;
+}) => VNode<S>;
+/**
+ * 検索結果
+ *
+ * - item
+ * ヒットしたアイテム
+ *
+ * - depth
+ * current からの深度
+ */
+export interface SearchResult {
+    item: NavigatorItem;
+    depth: number;
+}
+/**
+ * ファイルサーチ - NavigatorFinder プラグイン
+ *
+ * - 必須項目
+ * state, id, currentKeys, searchResult, hitTest, maxItemsCount
+ *
+ * - searchResult
+ * カードとして表示するVNode
+ *
+ * - hitTest
+ * 抽出条件
+ *
+ * - maxItemsCount
+ * 最初に表示させるカードの最大数
+ *
+ * - 拡張項目
+ * afterRender
+ *
+ * - afterRender
+ * レンダーフック
+ */
+export declare const NavigatorSearch: <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?: (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

@@ -1,5 +1,6 @@
 // hyperapp-is / core / navigator.ts
-import { getValue, setValue, getLocalState, setLocalState, createLocalKey } from "./state";
+import { getValue, setValue, getLocalState, setLocalState, createLocalKey, } from "./state";
+import { getScrollMargin } from "../dom/utils";
 import { el, deleteKeys, SelectButton } from "./component";
 // ---------- ---------- ---------- ---------- ----------
 // convertJsonToNavigatorItem
@@ -61,7 +62,6 @@ 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");
@@ -74,6 +74,9 @@ const li = el("li");
 const button = el("button");
 const input = el("input");
 const span = el("span");
+const svg = el("svg");
+const rect = el("rect");
+const path = el("path");
 // ---------- ---------- ---------- ---------- ----------
 // NavigatorFinder Component
 // ---------- ---------- ---------- ---------- ----------
@@ -83,35 +86,33 @@ const span = el("span");
  * - 必須項目
  * state, id, currentKeys
  *
+ * - 拡張項目
+ * columns, plugIn, afterRender
+ *
  * - columns
  * カラムの表示設定
  *
- * - maxItemsCount
- * 最大表示させるアイテム数
- *
- * - 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;
+    // current
     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, // ソート用比較関数
+        sortType: undefined, // ソート用比較関数: (a: NavigatorItem, b: NavigatorItem) => number
         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 +164,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 +180,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 +190,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 +254,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,13 +262,13 @@ export const NavigatorFinder = function (props) {
     // VNode
     // ---------- ---------- ----------
     const vnode = div({
-        ...deleteKeys(props, "state", "currentKeys", "columns", "afterRender", "extension")
+        ...deleteKeys(props, "state", "currentKeys", "columns", "plugIn", "afterRender")
     }, div({
         class: "toolBar"
     }, input({
         type: "text",
         placeholder: "search keys",
-        value: searchText,
+        value: localState.searchText,
         oninput: action_inputSearchText
     }), SelectButton({
         state: state,
@@ -287,8 +288,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,18 +308,264 @@ export const NavigatorFinder = function (props) {
         }, 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
+    return afterRender ? afterRender({ state, localState }, vnode) : vnode;
+};
+// ---------- ---------- ---------- ---------- ----------
+// svg icon
+// ---------- ---------- ---------- ---------- ----------
+// icon_depth
+const icon_depth = svg({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+}, rect({
+    x: 9,
+    y: 3,
+    width: 6,
+    height: 4,
+    rx: 1
+}), rect({
+    x: 3,
+    y: 15,
+    width: 6,
+    height: 4,
+    rx: 1
+}), rect({
+    x: 15,
+    y: 15,
+    width: 6,
+    height: 4,
+    rx: 1
+}), path({
+    d: "M12 7v4"
+}), path({
+    d: "M6 15v-4h12v4"
+}));
+// icon_name
+const icon_name = svg({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+}, path({ d: "M4 18l2-8 2 8M5 14h2" }), path({ d: "M10 10h6l-6 8h6" }), path({ d: "M20 6v12" }), path({ d: "M17 15l3 3 3-3" }));
+// icon_directory
+const icon_directory = svg({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+}, path({ d: "M3 7h6l2 2h10v8a2 2 0 0 1-2 2H3z" }));
+// icon_file
+const icon_file = svg({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    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" }));
+// ---------- ---------- ---------- ---------- ----------
+// NavigatorSearch Component (NavigatorFinder plugIn)
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * ファイルサーチ - NavigatorFinder プラグイン
+ *
+ * - 必須項目
+ * state, id, currentKeys, searchResult, hitTest, maxItemsCount
+ *
+ * - searchResult
+ * カードとして表示するVNode
+ *
+ * - hitTest
+ * 抽出条件
+ *
+ * - maxItemsCount
+ * 最初に表示させるカードの最大数
+ *
+ * - 拡張項目
+ * afterRender
+ *
+ * - afterRender
+ * レンダーフック
+ */
+export const NavigatorSearch = function (props) {
+    const { state, id, currentKeys, searchResult, hitTest, afterRender } = props;
+    // localKey
+    const localKey = createLocalKey(id);
+    // localState
+    const localState = getLocalState(state, id, {
+        maxItemsCount: props.maxItemsCount, // カードの最大表示数
+        sortName: undefined, // ソート名
+        sortFn: undefined, // 比較関数
+        isDirectory: true, // ディレクトリを表示
+        isFile: true // ファイルを表示
+    });
+    // current
+    const current = getValue(state, currentKeys, undefined);
+    // ---------- ---------- ----------
+    // searchItems
+    // ---------- ---------- ----------
+    /**
+     * アイテムの検索
+     * 検索アイテムのフラット化をしていないので、速度によっては拡張を検討
+     */
+    const searchItems = (item, depth) => {
+        if (!item)
+            return [];
+        const result = [];
+        if (hitTest(item))
+            result.push({ item, depth });
+        if (item.children && item.children.length !== 0) {
+            item.children.forEach(child => {
+                const r = searchItems(child, depth + 1);
+                if (r.length !== 0)
+                    result.push(...r);
+            });
         }
-    }, vnode) : vnode;
+        return result;
+    }; // end searchItems
+    // get items
+    const items = current
+        ? searchItems(current, 0)
+        : [];
+    // sort
+    if (localState.sortFn !== undefined)
+        items.sort(localState.sortFn);
+    // drawItems (filter, maxItemsCount の適用)
+    const drawItems = items.filter(item => {
+        return item.item.children
+            ? localState.isDirectory
+            : localState.isFile;
+    }).slice(0, localState.maxItemsCount);
+    // get parentItems
+    const parentItems = current
+        ? getParentItems(current).concat(current)
+        : [];
+    // message
+    const message = `hit ${items.length} items`;
+    // ---------- ---------- ----------
+    // action_itemsScroll
+    // ---------- ---------- ----------
+    /**
+     * items のスクロール状況で、maxItemsCount を追加
+     */
+    const action_itemsScroll = (state, e) => {
+        const margin = getScrollMargin(e);
+        return setLocalState(state, id, {
+            maxItemsCount: margin.bottom < 10
+                ? localState.maxItemsCount + 10 < items.length
+                    ? localState.maxItemsCount + 10
+                    : Math.max(10, items.length)
+                : localState.maxItemsCount
+        });
+    };
+    // ---------- ---------- ----------
+    // action_setSort
+    // ---------- ---------- ----------
+    /**
+     * 仕様するソート名をセット
+     * sortFn をステートに持つように変更する場合、ここも修正
+     */
+    const action_setSort = (state, newSortName) => {
+        const reverse = localState.sortName === newSortName;
+        const obj = {
+            "depth": (a, b) => a.depth - b.depth,
+            "name": (a, b) => {
+                if (a.item.name === b.item.name)
+                    return 0;
+                return a.item.name < b.item.name ? -1 : 1;
+            }
+        };
+        const fn = obj[newSortName] !== undefined
+            ? reverse
+                ? (a, b) => obj[newSortName](b, a)
+                : (a, b) => obj[newSortName](a, b)
+            : (a, b) => {
+                return a.depth === b.depth
+                    ? obj["name"](a, b)
+                    : obj["depth"](a, b);
+            };
+        return setLocalState(state, id, {
+            sortName: reverse ? `r_${newSortName}` : newSortName,
+            sortFn: fn
+        });
+    };
+    // ---------- ---------- ----------
+    // vnode
+    // ---------- ---------- ----------
+    const vnode = div({
+        ...deleteKeys(props, "state", "currentKeys", "searchResult", "hitTest", "maxItemsCount", "afterRender")
+    }, 
+    // toolBar
+    div({
+        class: "toolBar"
+    }, 
+    // sort
+    button({
+        type: "button",
+        onclick: [action_setSort, "depth"]
+    }, icon_depth), button({
+        type: "button",
+        onclick: [action_setSort, "name"]
+    }, icon_name), 
+    // filter
+    button({
+        type: "button",
+        class: localState.isDirectory ? "" : "ignore",
+        onclick: (state) => setLocalState(state, id, {
+            isDirectory: !localState.isDirectory
+        })
+    }, icon_directory), button({
+        type: "button",
+        class: localState.isFile ? "" : "ignore",
+        onclick: (state) => setLocalState(state, id, {
+            isFile: !localState.isFile
+        })
+    }, icon_file)), 
+    // parentItems
+    div({
+        class: "parentItems"
+    }, ol({}, parentItems.map(item => li({
+        onclick: (state) => setValue(state, currentKeys, item)
+    }, item.name)))), 
+    // items
+    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({
+        class: "statusBar"
+    }, message));
+    // ---------- ---------- ----------
+    // afterRender
+    // ---------- ---------- ----------
+    return afterRender ? afterRender({ state, localState }, vnode) : vnode;
 };

package/dist/hyperapp-is/index.d.ts

@@ -1,8 +1,8 @@
 export type { Keys, Keys_String, Keys_ArrayString, Keys_Number, Keys_ArrayNumber, Keys_ArrayRAFTask, Keys_NavigatorItem, } from "./core/state";
-export type { NavigatorItem, JsonEntry, NavigatorColumn } from "./core/navigator";
+export type { NavigatorItem, JsonEntry, NavigatorColumn, SearchResult } from "./core/navigator";
 export { getValue, setValue, getLocalState, setLocalState, createLocalKey } from "./core/state";
 export { el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton } from "./core/component";
-export { convertJsonToNavigatorItem, getParentItems, NavigatorFinder } from "./core/navigator";
+export { convertJsonToNavigatorItem, getParentItems, NavigatorFinder, NavigatorSearch } from "./core/navigator";
 export type { InternalEffect, RAFEvent } from "./animation/raf";
 export type { CSSProperty } from "./animation/properties";
 export { RAFTask, subscription_RAFManager } from "./animation/raf";

package/dist/hyperapp-is/index.js

@@ -1,7 +1,7 @@
 // hyperapp-is / index.ts
 export { getValue, setValue, getLocalState, setLocalState, createLocalKey } from "./core/state";
 export { el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton } from "./core/component";
-export { convertJsonToNavigatorItem, getParentItems, NavigatorFinder } from "./core/navigator";
+export { convertJsonToNavigatorItem, getParentItems, NavigatorFinder, NavigatorSearch } from "./core/navigator";
 export { RAFTask, subscription_RAFManager } from "./animation/raf";
 export { progress_easing } from "./animation/easing";
 export { createUnits, createRAFProperties, effect_RAFProperties } from "./animation/properties";

package/package.json

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