jsbox-cview 1.5.18 → 1.5.20

package/components/dialogs/form-dialog.ts

@@ -1,19 +1,51 @@
+import { Base } from "../base";
 import { PreferenceListView, PreferenceSection } from "../static-preference-listview";
 import { DialogSheet } from "./dialog-sheet";
 
+class DialogSheetForm extends DialogSheet {
+  private _checkHandler: (values: { [key: string]: any }) => boolean;
+  constructor(sheetProps: {
+    title: string;
+    cview: Base<any, any>;
+    doneHandler?: () => void;
+    presentMode?: number;
+    bgcolor?: UIColor;
+    doneButtonHidden?: boolean;
+  }, checkHandler: (values: { [key: string]: any }) => boolean) {
+    super(sheetProps);
+    this._checkHandler = checkHandler;
+  }
+
+  done() {
+    this._done = true;
+    if (this.resolve && this._props.doneHandler) {
+      const values = this._props.doneHandler();
+      const success = this._checkHandler(values);
+      if (success) {
+        this.resolve(values);
+        this.dismiss();
+      }
+    }
+  }
+}
+
 /**
  * 显示一个表单
  * @param sections 表单分组, 请参考`PreferenceListView`中的`PreferenceSection`
  * @param title 标题
  */
-export function formDialog({ sections, title }: { sections: PreferenceSection[]; title: string }): Promise<{ [key: string]: any }> {
+export function formDialog({ sections, title, checkHandler }: {
+  sections: PreferenceSection[];
+  title: string;
+  checkHandler?: (values: { [key: string]: any }) => boolean;
+}): Promise<{ [key: string]: any }> {
   const view = new PreferenceListView({ sections });
-  const sheet = new DialogSheet({
+  const sheet = new DialogSheetForm({
     title,
     bgcolor: $color("insetGroupedBackground"),
     cview: view,
     doneHandler: () => view.values
-  });
+  }, checkHandler || (() => true));
   return new Promise((resolve, reject) => {
     sheet.promisify(resolve, reject);
     sheet.present();

package/components/refresh-button.ts

@@ -26,6 +26,7 @@ export class RefreshButton extends Base<UIButtonView, UiTypes.ButtonOptions> {
     events?: UiTypes.BaseViewEvents<UIButtonView>;
   }) {
     super();
+    this._layout = layout;
     this._defineView = () => {
       return {
         type: "button",
@@ -35,7 +36,7 @@ export class RefreshButton extends Base<UIButtonView, UiTypes.ButtonOptions> {
           enabled: props?.enabled ?? true,
           hidden: props?.hidden ?? false,
         },
-        layout,
+        layout: this._layout,
         events,
         views: [
           {

package/dist/components/dialogs/form-dialog.js

@@ -3,19 +3,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.formDialog = void 0;
 const static_preference_listview_1 = require("../static-preference-listview");
 const dialog_sheet_1 = require("./dialog-sheet");
+class DialogSheetForm extends dialog_sheet_1.DialogSheet {
+    constructor(sheetProps, checkHandler) {
+        super(sheetProps);
+        this._checkHandler = checkHandler;
+    }
+    done() {
+        this._done = true;
+        if (this.resolve && this._props.doneHandler) {
+            const values = this._props.doneHandler();
+            const success = this._checkHandler(values);
+            if (success) {
+                this.resolve(values);
+                this.dismiss();
+            }
+        }
+    }
+}
 /**
  * 显示一个表单
  * @param sections 表单分组, 请参考`PreferenceListView`中的`PreferenceSection`
  * @param title 标题
  */
-function formDialog({ sections, title }) {
+function formDialog({ sections, title, checkHandler }) {
     const view = new static_preference_listview_1.PreferenceListView({ sections });
-    const sheet = new dialog_sheet_1.DialogSheet({
+    const sheet = new DialogSheetForm({
         title,
         bgcolor: $color("insetGroupedBackground"),
         cview: view,
         doneHandler: () => view.values
-    });
+    }, checkHandler || (() => true));
     return new Promise((resolve, reject) => {
         sheet.promisify(resolve, reject);
         sheet.present();

package/dist/components/refresh-button.js

@@ -15,6 +15,7 @@ class RefreshButton extends base_1.Base {
     constructor({ props, layout, events = {} }) {
         super();
         this._loading = false;
+        this._layout = layout;
         this._defineView = () => {
             var _a, _b, _c;
             return {
@@ -25,7 +26,7 @@ class RefreshButton extends base_1.Base {
                     enabled: (_a = props === null || props === void 0 ? void 0 : props.enabled) !== null && _a !== void 0 ? _a : true,
                     hidden: (_b = props === null || props === void 0 ? void 0 : props.hidden) !== null && _b !== void 0 ? _b : false,
                 },
-                layout,
+                layout: this._layout,
                 events,
                 views: [
                     {

package/dist/test/form-dialog.js

@@ -0,0 +1,58 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const form_dialog_1 = require("../components/dialogs/form-dialog");
+$ui.render({
+    views: [{
+            type: "button",
+            props: {
+                title: "Show Form Dialog"
+            },
+            layout: $layout.center,
+            events: {
+                tapped: () => __awaiter(void 0, void 0, void 0, function* () {
+                    const values = yield (0, form_dialog_1.formDialog)({
+                        sections: [
+                            {
+                                title: "Section 1",
+                                rows: [
+                                    {
+                                        type: "boolean",
+                                        title: "Switch",
+                                        key: "switch",
+                                        value: true
+                                    },
+                                    {
+                                        type: "string",
+                                        title: "String",
+                                        key: "string",
+                                        value: "Hello, World!"
+                                    }
+                                ]
+                            }
+                        ],
+                        title: "Form Dialog",
+                        checkHandler: values => {
+                            console.log(values);
+                            if (values.switch)
+                                return true;
+                            else
+                                return false;
+                        }
+                    });
+                    $ui.alert({
+                        title: "Values",
+                        message: JSON.stringify(values, null, 2)
+                    });
+                })
+            }
+        }]
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsbox-cview",
-  "version": "1.5.18",
+  "version": "1.5.20",
   "description": "为 JSBox 设计的微型框架",
   "repository": {
     "type": "git",

package/test/form-dialog.ts

@@ -0,0 +1,47 @@
+import { formDialog } from "../components/dialogs/form-dialog";
+
+$ui.render({
+  views: [{
+    type: "button",
+    props: {
+      title: "Show Form Dialog"
+    },
+    layout: $layout.center,
+    events: {
+      tapped: async () => {
+        const values = await formDialog({
+          sections: [
+            {
+              title: "Section 1",
+              rows: [
+                {
+                  type: "boolean",
+                  title: "Switch",
+                  key: "switch",
+                  value: true
+                },
+                {
+                  type: "string",
+                  title: "String",
+                  key: "string",
+                  value: "Hello, World!"
+                }
+              ]
+            }
+          ],
+          title: "Form Dialog",
+          checkHandler: values => {
+            console.log(values);
+            if (values.switch) return true;
+            else return false;
+          }
+        });
+        $ui.alert({
+          title: "Values",
+          message: JSON.stringify(values, null, 2)
+        });
+      }
+    }
+  }]
+})
+