@edu-tosel/design 1.0.82 → 1.0.84

package/interface/Data.d.ts

@@ -1,5 +1,5 @@
 import { Replace } from "./Action";
-import { OnClick, Titles } from "./Property";
+import { Click, OnClick, Titles } from "./Property";
 export interface DataPackage<T> {
     dataField: DataField<T>;
     dataSet: Omit<DataSet<T>, "renderItem">;
@@ -40,10 +40,10 @@ declare function isDataSelectRoll(obj: any): obj is DataSelectRoll;
 type DataButton<T> = {
     type: "button";
     onClick: OnClick<T>;
-    hoverTitle?: string;
+    hoverTitle?: Click<T, string> | string;
     option?: {
-        text?: string;
-        background?: string;
+        text?: Click<T, string> | string;
+        background?: Click<T, string> | string;
     };
 };
 declare function isDataButton<T>(obj: any): obj is DataButton<T>;

package/interface/Property.d.ts

@@ -41,6 +41,7 @@ export type Size = "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "
  * @property {"full"} full - Full size
  */
 export type ImageSize = "sub" | "full";
+export type Click<REQ = unknown, RES = any> = (prop?: REQ) => RES;
 export type OnClick<Request = unknown, Response = unknown> = (prop?: Request) => Response | ((prop?: Request) => Promise<Response>);
 export interface Button extends LabelWidget {
 }

package/layout/design/Row.design/index.js

@@ -44,7 +44,16 @@ function RowElement(props) {
     if (isDataSelectRoll(data)) {
         return _jsx(SelectRoll, { item: item, entry: props.entry, data: data });
     }
-    if (isDataButton(data))
-        return (_jsx(Label.Button, { title: item[key], hoverTitle: data.hoverTitle, onClick: () => data.onClick(item), option: { ...data.option, width: "xs", height: "xs" } }));
+    if (isDataButton(data)) {
+        const { onClick, hoverTitle, option } = data;
+        const { background, text } = option ?? {};
+        return (_jsx(Label.Button, { title: item[key], hoverTitle: typeof hoverTitle === "string" ? hoverTitle : hoverTitle?.(item), onClick: () => onClick(item), option: {
+                ...data.option,
+                background: typeof background === "string" ? background : background?.(item),
+                text: typeof text === "string" ? text : text?.(item),
+                width: "xs",
+                height: "xs",
+            } }));
+    }
     return _jsx(_Fragment, { children: item[key] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.82",
+  "version": "1.0.84",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.82
+1.0.84