hyperapp-is 0.1.7 → 0.1.9

package/README.md

@@ -532,16 +532,14 @@ getEntriesの返す値
 
 ```ts
 export interface JsonEntry <D> {
-	name      : string
-	data      : D
-	isProperty: boolean
-	isNode    : boolean
+	name  : string
+	data  : D
+	isNode: boolean
 }
 ```
 
 - name      : 名前
 - data      : データ
-- isProperty: プロパティか
 - isNode    : ディレクトリか
 
 ---
@@ -609,7 +607,7 @@ export const NavigatorFinder = function <S> (
 	props: {
 		state         : S
 		currentKeys   : Keys_NavigatorItem
-		columns      ?: NavigatorColumn[]
+		columns      ?: (directory: NavigatorItem | undefined) => NavigatorColumn[]
 		maxItemsCount?: number
 		itemClick    ?: (state: S, item: NavigatorItem) => S | [S, Effect<S>]
 		afterRender  ?: (props: {
@@ -625,7 +623,7 @@ export const NavigatorFinder = function <S> (
 
 - state        : ステート
 - currentKeys  : カレント NavigatorItem までのパス
-- columns      : NavigatorColumn の配列
+- columns      : NavigatorColumn の配列を返す関数
 - maxItemsCount: 最大表示するアイテム数
 - itemClick    : アイテムをクリックした時のアクション
 - afterRender  : レンダーフック

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

@@ -1,47 +1,22 @@
 import { VNode, Effect } from "hyperapp";
 import { Keys_NavigatorItem } from "./state";
-/**
- * ツリー構造となるナビゲーションオブジェクト
- *
- * parent     - 親アイテム
- * name       - 名前
- * properties - プロパティオブジェクト
- * children   - 子アイテムリスト (undefinedのときはファイル)
- * path       - パス
- * extension  - 拡張情報
- */
 export interface NavigatorItem {
     parent: NavigatorItem | null;
     name: string;
+    path: string;
     properties?: Record<string, any>;
     children?: NavigatorItem[];
-    path: string;
     extension?: Record<string, any>;
 }
-/**
- * getEntriesで返すオブジェクト
- *
- * name       - 名前
- * data       - データ
- * isNode     - ディレクトリか
- */
 export interface JsonEntry<D> {
     name: string;
     data: D;
     isNode: boolean;
 }
-/**
- * ヘッダー名と値
- */
 export interface NavigatorColumn {
     name: string;
     val: (item: NavigatorItem) => any;
 }
-/**
- * Json から NavigatorItem に変換
- * getEntries の採用により、JSON の形を問わない
- * extension により、任意情報を保存できる
- */
 export declare const convertJsonToNavigatorItem: <D>(props: {
     parent: NavigatorItem | null;
     name: string;
@@ -51,15 +26,25 @@ export declare const convertJsonToNavigatorItem: <D>(props: {
     depth?: number;
     extension?: (item: NavigatorItem, data: D, depth: number) => Record<string, any> | undefined;
 }) => NavigatorItem;
-/**
- * NavigatorItem の親をリストで取得する
- */
 export declare const getParentItems: (item: NavigatorItem | undefined) => NavigatorItem[];
 /**
- * ナビゲーションファインダーコンポーネント
+ * @template S
+ * @param props - props
+ *
+ * @param {S} props.state
+ * @param {string} props.id
+ * @param {Keys_NavigatorItem} props.currentKeys
+ * @param {(directory: NavigatorItem | undefined) => NavigatorColumn[]} [props.columns]
+ * @param {number} [props.maxItemsCount]
+ * @param {(state: S, item: NavigatorItem) => S | [S, Effect<S>]} [props.itemClick]
+ * @param {(props: {state: S, current?: NavigatorItem, extension?: Record<string, any>}, vnode: VNode<S>) => VNode<S>} [props.afterRender]
+ * @param {Record<string, any>} [props.extension]
+ *
+ * @returns {VNode<S>}
  */
 export declare const NavigatorFinder: <S>(props: {
     state: S;
+    id: string;
     currentKeys: Keys_NavigatorItem;
     columns?: (directory: NavigatorItem | undefined) => NavigatorColumn[];
     maxItemsCount?: number;

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

@@ -1,28 +1,9 @@
 // hyperapp-is / core / navigator.ts
-import { getValue, setValue } from "./state";
-import { el, deleteKeys } from "./component";
-/* element */
-const div = el("div");
-const table = el("table");
-const thead = el("thead");
-const tbody = el("tbody");
-const tr = el("tr");
-const th = el("th");
-const td = el("td");
-const ul = el("ul");
-const ol = el("ol");
-const li = el("li");
-const button = el("button");
-const input = el("input");
-const span = el("span");
+import { getValue, setValue, getLocalState, setLocalState, createLocalKey } from "./state";
+import { el, deleteKeys, SelectButton } from "./component";
 // ---------- ---------- ---------- ---------- ----------
 // convertJsonToNavigatorItem
 // ---------- ---------- ---------- ---------- ----------
-/**
- * Json から NavigatorItem に変換
- * getEntries の採用により、JSON の形を問わない
- * extension により、任意情報を保存できる
- */
 export const convertJsonToNavigatorItem = function (props) {
     const { parent, name, data, getEntries, isNode, depth = 0, extension } = props;
     const result = {
@@ -30,7 +11,6 @@ export const convertJsonToNavigatorItem = function (props) {
         name,
         path: parent ? parent.path + "/" + name : "/" + name
     };
-    // 拡張情報
     if (extension) {
         const ext = extension(result, data, depth);
         if (ext)
@@ -41,11 +21,9 @@ export const convertJsonToNavigatorItem = function (props) {
     const children = [];
     getEntries(data, depth).forEach(entry => {
         const isProperty = typeof entry.data !== "object" || Array.isArray(entry.data);
-        // プロパティ
         if (isProperty) {
             properties[entry.name] = entry.data;
             hasProperty = true;
-            // 子アイテム
         }
         else {
             children.push(convertJsonToNavigatorItem({
@@ -62,15 +40,12 @@ export const convertJsonToNavigatorItem = function (props) {
     if (hasProperty)
         result.properties = properties;
     if (isNode)
-        result.children = children; // ファイルのときは undefined
+        result.children = children;
     return result;
 };
 // ---------- ---------- ---------- ---------- ----------
 // getParentItems
 // ---------- ---------- ---------- ---------- ----------
-/**
- * NavigatorItem の親をリストで取得する
- */
 export const getParentItems = (item) => {
     if (!item)
         return [];
@@ -83,16 +58,54 @@ export const getParentItems = (item) => {
     return result.reverse();
 };
 // ---------- ---------- ---------- ---------- ----------
+// vnodes
+// ---------- ---------- ---------- ---------- ----------
+const div = el("div");
+const table = el("table");
+const thead = el("thead");
+const tbody = el("tbody");
+const tr = el("tr");
+const th = el("th");
+const td = el("td");
+const ul = el("ul");
+const ol = el("ol");
+const li = el("li");
+const button = el("button");
+const input = el("input");
+const span = el("span");
+// ---------- ---------- ---------- ---------- ----------
 // NavigatorFinder Component
 // ---------- ---------- ---------- ---------- ----------
 /**
- * ナビゲーションファインダーコンポーネント
+ * @template S
+ * @param props - props
+ *
+ * @param {S} props.state
+ * @param {string} props.id
+ * @param {Keys_NavigatorItem} props.currentKeys
+ * @param {(directory: NavigatorItem | undefined) => NavigatorColumn[]} [props.columns]
+ * @param {number} [props.maxItemsCount]
+ * @param {(state: S, item: NavigatorItem) => S | [S, Effect<S>]} [props.itemClick]
+ * @param {(props: {state: S, current?: NavigatorItem, extension?: Record<string, any>}, vnode: VNode<S>) => VNode<S>} [props.afterRender]
+ * @param {Record<string, any>} [props.extension]
+ *
+ * @returns {VNode<S>}
  */
 export const NavigatorFinder = function (props) {
     var _a, _b;
-    const { state, currentKeys, maxItemsCount = 0, itemClick, afterRender, extension } = props;
+    // variable
+    const { state, id, currentKeys, maxItemsCount = 0, itemClick, afterRender, extension } = props;
     const current = getValue(state, currentKeys, undefined);
+    // localState
+    const { searchText, selected } = getLocalState(state, id, {
+        searchText: "",
+        selected: []
+    });
+    // selected filter
+    const isFilter = selected.includes(`${createLocalKey(id)}_filter`);
+    // ---------- ---------- ----------
     // createColumns
+    // ---------- ---------- ----------
     const createColumns = (_a = props.columns) !== null && _a !== void 0 ? _a : ((directory) => {
         const result = [];
         if (!directory)
@@ -109,8 +122,6 @@ export const NavigatorFinder = function (props) {
             // get properties
             // 子アイテムのプロパティをすべて確認して抽出しています
             children.forEach(child => {
-                if (!child.children)
-                    return;
                 if (child.properties) {
                     Object.keys(child.properties).forEach(key => names.push(key));
                 }
@@ -136,25 +147,60 @@ export const NavigatorFinder = function (props) {
     const parentItems = getParentItems(current);
     if (current)
         parentItems.push(current);
+    // ---------- ---------- ----------
+    // hitTest
+    // ---------- ---------- ----------
+    const hitTest = (text) => {
+        const S = searchText.trim().toLowerCase();
+        if (S === "")
+            return false;
+        const keys = S.replace(/[ 　]+/g, " ").split(" ").filter(Boolean);
+        if (keys.length === 0)
+            return false;
+        if (typeof text !== "string")
+            return false;
+        const sText = text.toLowerCase();
+        return keys.every(key => sText.includes(key));
+    }; // end hitTest
+    // ---------- ---------- ----------
     // getItems
+    // ---------- ---------- ----------
     const getItems = (item) => {
         if (!item || item.children === undefined)
             return [];
+        // filter
+        const result = isFilter && searchText !== ""
+            ? item.children.filter(child => {
+                return columns.some(col => hitTest(col.val(child)));
+            })
+            : item.children;
+        // maxCount
         const count = maxItemsCount === 0
-            ? item.children.length
-            : Math.min(maxItemsCount, item.children.length);
-        return item.children.slice(0, count);
+            ? result.length
+            : Math.min(maxItemsCount, result.length);
+        return result.slice(0, count);
     }; // end getItems
     // items
     const items = getItems(current);
+    // items count
     const count = current
         ? (_b = current.children) === null || _b === void 0 ? void 0 : _b.length
         : 0;
+    // items hitCount
+    const hitCount = isFilter
+        ? items.length
+        : items.filter(item => columns.some(col => hitTest(col.val(item)))).length;
+    // ---------- ---------- ----------
     // action_parentClick
+    // ---------- ---------- ----------
     const action_parentClick = (state, item) => {
-        return setValue(state, currentKeys, item);
+        return setLocalState(setValue(state, currentKeys, item), id, {
+            selected: []
+        });
     };
+    // ---------- ---------- ----------
     // action_itemClick
+    // ---------- ---------- ----------
     const action_itemClick = (state, item) => {
         // 子アイテムがすべてプロパティのときは移動しない
         const children = item.children;
@@ -162,16 +208,54 @@ export const NavigatorFinder = function (props) {
             return state;
         if (!children.some(child => typeof child === "object" && !Array.isArray(child)))
             return state;
-        return setValue(state, currentKeys, item);
+        // filterは解除する
+        return setLocalState(setValue(state, currentKeys, item), id, {
+            selected: []
+        });
     };
+    // ---------- ---------- ----------
+    // action_inputSearchText
+    // ---------- ---------- ----------
+    const action_inputSearchText = (state, e) => {
+        const input = e.currentTarget;
+        if (!input)
+            return state;
+        return setLocalState(state, id, {
+            searchText: input.value
+        });
+    }; // end action_inputSearchText
+    // ---------- ---------- ----------
+    // action_copyFolderPath
+    // ---------- ---------- ----------
+    const action_copyFolderPath = (state) => {
+        if (!current)
+            return state;
+        navigator.clipboard.writeText(current.path);
+        return state;
+    }; // end action_copyFolderPath
+    // ---------- ---------- ----------
     // VNode
+    // ---------- ---------- ----------
     const vnode = div({
         ...deleteKeys(props, "state", "currentKeys", "columns", "itemClick", "afterRender", "extension")
     }, 
     // toolBar
     div({
         class: "toolBar"
-    }, "toolBar (未実装)"), 
+    }, input({
+        type: "text",
+        placeholder: "search keys",
+        value: searchText,
+        oninput: action_inputSearchText
+    }), SelectButton({
+        state: state,
+        id: `${createLocalKey(id)}_filter`,
+        keyNames: [createLocalKey(id), "selected"]
+    }, "FILTER"), button({
+        type: "button",
+        title: "現在のフォルダパスを、クリップボードにコピー",
+        onclick: action_copyFolderPath
+    }, "COPY")), 
     // parentItems
     ol({}, parentItems.map(parent => li({
         key: parent.path,
@@ -185,11 +269,15 @@ export const NavigatorFinder = function (props) {
             : [action_itemClick, item]
     }, columns.map(col => td({
         title: col.val(item)
-    }, col.val(item))))))), 
+    }, span({
+        class: hitTest(col.val(item)) ? "hit" : ""
+    }, col.val(item)))))))), 
     // statusBar
     div({
         class: "statusBar"
-    }, `items ${items.length} / ${count}`));
+    }, `items ${items.length} / ${count}` + (searchText !== "" ? ` (${hitCount} hit)` : "")));
+    // ---------- ---------- ----------
     // afterRender
+    // ---------- ---------- ----------
     return afterRender ? afterRender({ state, current, extension }, vnode) : vnode;
 };

package/package.json

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