hyperapp-is 0.1.22 → 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
@@ -635,6 +638,13 @@ export const NavigatorFinder = function <S> (
 - 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}>
@@ -676,9 +686,54 @@ vnode
 </div>
 ```
 
-**CSS設計**
-- plugInを追加する場合は `grid` で整える前提
-- `flex` で整える場合は `afterRender` を併用し VNode を調整する
+---
+
+### 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 // ファイルを表示
 
 ---
 

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

@@ -35,15 +35,12 @@ export declare const getParentItems: (item: NavigatorItem | undefined) => Naviga
  * - 必須項目
  * state, id, currentKeys
  *
+ * - 拡張項目
+ * columns, plugIn, afterRender
+ *
  * - columns
  * カラムの表示設定
  *
- * - maxItemsCount
- * 最大表示させるアイテム数
- *
- * - itemClick
- * 非ノードをクリックした際のアクション
- *
  * - plugIn
  * プラグインの追加
  *
@@ -55,10 +52,54 @@ export declare const NavigatorFinder: <S>(props: {
     id: string;
     currentKeys: Keys_NavigatorItem;
     columns?: (directory: NavigatorItem | undefined) => NavigatorColumn[];
-    plugIn?: (props: {
+    plugIn?: (state: S, localState: Record<string, any>) => VNode<S>[];
+    afterRender?: (props: {
         state: S;
         localState: Record<string, any>;
-    }) => VNode<S>[];
+    }, 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>;

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,15 +86,12 @@ const span = el("span");
  * - 必須項目
  * state, id, currentKeys
  *
+ * - 拡張項目
+ * columns, plugIn, afterRender
+ *
  * - columns
  * カラムの表示設定
  *
- * - maxItemsCount
- * 最大表示させるアイテム数
- *
- * - itemClick
- * 非ノードをクリックした際のアクション
- *
  * - plugIn
  * プラグインの追加
  *
@@ -101,24 +101,16 @@ const span = el("span");
 export const NavigatorFinder = function (props) {
     var _a, _b;
     const { state, id, currentKeys, plugIn, afterRender } = props;
+    // current
     const current = getValue(state, currentKeys, undefined);
     // localState
     const localState = getLocalState(state, id, {
         searchText: "", // 検索テキスト
         selected: [], // 選択されているボタン名
-        sortType: undefined, // ソート用比較関数
+        sortType: undefined, // ソート用比較関数: (a: NavigatorItem, b: NavigatorItem) => number
         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 = localState.selected.includes(`${createLocalKey(id)}_filter`);
     // ---------- ---------- ----------
@@ -319,10 +311,261 @@ export const NavigatorFinder = function (props) {
     div({ class: "statusBar" }, message), 
     // plugIn
     plugIn
-        ? plugIn({ state, localState })
+        ? plugIn(state, localState)
         : []);
     // ---------- ---------- ----------
     // afterRender
     // ---------- ---------- ----------
     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);
+            });
+        }
+        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.22",
+  "version": "0.1.23",
   "description": "UI foundation library for Hyperapp by is4416",
   "license": "MIT",
   "type": "module",