Merge pull request #373 from lowdefy/docs

Docs
2025-02-17 14:30:34 +08:00 · 2021-01-29 17:33:40 +02:00 · 2021-01-29 17:33:40 +02:00 · bc2fda9701
commit bc2fda9701
parent e7c84f41ee 01cc8fc275
6 changed files with 180 additions and 12 deletions
--- a/packages/blocks/blocksAntd/demo/examples/S3UploadButton.yaml
+++ b/packages/blocks/blocksAntd/demo/examples/S3UploadButton.yaml
@ -1,23 +1,30 @@
 - id: default
  type: S3UploadButton
+  properties:
+    s3PostPolicyRequestId: s3PostPolicyRequestId
 - id: properties.accept
  type: S3UploadButton
  properties:
    accept: '.png,.jpg'
+    s3PostPolicyRequestId: s3PostPolicyRequestId
 - id: properties.button
  type: S3UploadButton
  properties:
    button:
      type: primary
+    s3PostPolicyRequestId: s3PostPolicyRequestId
 - id: properties.disabled
  type: S3UploadButton
  properties:
    disabled: true
+    s3PostPolicyRequestId: s3PostPolicyRequestId
 - id: properties.showUploadList
  type: S3UploadButton
  properties:
+    s3PostPolicyRequestId: s3PostPolicyRequestId
    showUploadList: true
 - id: properties.singleFile
  type: S3UploadButton
  properties:
-    singleFile: true
+    s3PostPolicyRequestId: s3PostPolicyRequestId
+    singleFile: true
--- a/packages/blocks/blocksAntd/src/blocks/S3UploadButton/S3UploadButton.json
+++ b/packages/blocks/blocksAntd/src/blocks/S3UploadButton/S3UploadButton.json
@ -4,14 +4,23 @@
  "schema": {
    "properties": {
      "type": "object",
+      "required": ["s3PostPolicyRequestId"],
      "properties": {
        "accept": {
          "type": "string",
-          "description": "File types accepted by the input. See html file type input [accept property](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)."
+          "description": "File types accepted by the input. See html file type input accept property at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept."
        },
        "button": {
          "type": "object",
-          "description": "Button block properties."
+          "description": "Button block properties.",
+          "docs": {
+            "displayType": "button"
+          },
+          "default": {
+            "icon": "UploadOutlined",
+            "title": "Upload",
+            "type": "default"
+          }
        },
        "disabled": {
          "type": "boolean",
@ -19,7 +28,37 @@
        },
        "s3PostPolicyRequestId": {
          "type": "string",
-          "description": "Id of a request of type AwsS3PresignedPostPolicy that defines to which S3 bucket and how the file should be uploaded."
+          "description": "Id of a request of type AwsS3PresignedPostPolicy that defines to which S3 bucket and how the file should be uploaded.",
+          "docs": {
+            "displayType": "manual",
+            "block": {
+              "id": "block_properties_s3PostPolicyRequestId",
+              "layout": { "_global": "settings_input_layout" },
+              "type": "Label",
+              "required": true,
+              "properties": {
+                "title": "s3PostPolicyRequestId",
+                "span": 8,
+                "align": "right"
+
+              },
+              "blocks": [
+                {
+                  "id": "block_properties_s3PostPolicyRequestId_text",
+                  "type": "Markdown",
+                  "style": {
+                    "color": "#8c8c8c",
+                    ".markdown-body": {
+                      "fontSize": "14px"
+                    }
+                  },
+                  "properties": {
+                    "content": "Id of a request of type AwsS3PresignedPostPolicy that defines to which S3 bucket and how the file should be uploaded."
+                  }
+                }
+              ]
+            }
+          }
        },
        "showUploadList": {
          "type": "boolean",
--- a/packages/docs/blocks/input/ButtonSelector.yaml
+++ b/packages/docs/blocks/input/ButtonSelector.yaml
@ -22,7 +22,7 @@ _ref:
      __optionsType: Label-value pairs
    init_property_values:
      options:
-        - label: First 
+        - label: First
          value: one
          primitive: one
        - label: Second
--- a/packages/docs/blocks/input/S3UploadButton.yaml
+++ b/packages/docs/blocks/input/S3UploadButton.yaml
@ -0,0 +1,46 @@
+# Copyright 2020-2021 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+_ref:
+  path: templates/blocks/template.yaml.njk
+  vars:
+    block_type: S3UploadButton
+    value_type: object
+    category: input
+    description_content: |
+      The `S3UploadButton` block allows a user to to upload a file to AWS S3.
+
+      The `s3PostPolicyRequestId` property is required, and should be the `id` of a [`AwsS3PresignedPostPolicy`](/AWSS3) request. This request is called by the block when the user uploads a file, to create a policy that allows a file to be uploaded to AWS S3.
+
+      The block has an object value in state, with a `file` key, which has an object corresponding to the last uploaded file, and a `fileList` array with objects for each the files.
+    default_properties:
+      _ref:
+        path: ../blocks/blocksAntd/src/blocks/S3UploadButton/S3UploadButton.json
+        transformer: templates/blocks/defaultValueTransformer.js
+    properties_getter:
+      _ref:
+        path: ../blocks/blocksAntd/src/blocks/S3UploadButton/S3UploadButton.json
+        transformer: templates/blocks/propertiesGetterTransformer.js
+    properties_form:
+      _ref:
+        path: ../blocks/blocksAntd/src/blocks/S3UploadButton/S3UploadButton.json
+        transformer: templates/blocks/propertiesFormTransformer.js
+
+    available_actions_description: |
+      ###### onChange
+      Triggered when value is changed.
+
+    examples:
+      - title: S3UploadButtonBlock
+        properties: '{"s3PostPolicyRequestId": "my_request_id"}'
--- a/packages/docs/lowdefy.yaml
+++ b/packages/docs/lowdefy.yaml
@ -23,7 +23,7 @@ global:
    span: 23
    sm:
      span: 23
-      
+
 types:
  TitleInput:
    url: https://unpkg.com/@lowdefy/blocks-antd@^3.0.0/dist/meta/TitleInput.json
@ -181,6 +181,9 @@ menus:
          - id: RatingSlider
            type: MenuLink
            pageId: RatingSlider
+          - id: S3UploadButton
+            type: MenuLink
+            pageId: S3UploadButton
          - id: Selector
            type: MenuLink
            pageId: Selector
@ -421,6 +424,7 @@ pages:
  - _ref: blocks/input/ParagraphInput.yaml
  - _ref: blocks/input/RadioSelector.yaml
  - _ref: blocks/input/RatingSlider.yaml
+  - _ref: blocks/input/S3UploadButton.yaml
  - _ref: blocks/input/Selector.yaml
  - _ref: blocks/input/Switch.yaml
  - _ref: blocks/input/TextArea.yaml
--- a/packages/docs/templates/blocks/propertiesFormTransformer.js
+++ b/packages/docs/templates/blocks/propertiesFormTransformer.js
@ -13,6 +13,74 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 */
+
+const button = (propertyName) => ({
+  id: 'button_card',
+  type: 'Card',
+  layout: {
+    contentGutter: 0,
+  },
+  properties: {
+    size: 'small',
+    title: 'button:',
+    inner: true,
+  },
+  blocks: [
+    {
+      id: `block.properties.${propertyName}.icon`,
+      type: 'Selector',
+      layout: {
+        _global: 'settings_input_layout',
+      },
+      properties: {
+        title: 'icon',
+        size: 'small',
+        label: {
+          span: 8,
+          align: 'right',
+          extra: 'Name of an Ant Design Icon or properties of an Icon block to use icon in button.',
+        },
+        showSearch: true,
+        allowClear: true,
+        options: { _global: 'all_icons' },
+      },
+    },
+    {
+      id: `block.properties.${propertyName}.title`,
+      type: 'TextInput',
+      layout: {
+        _global: 'settings_input_layout',
+      },
+      properties: {
+        title: 'title',
+        size: 'small',
+        label: {
+          span: 8,
+          align: 'right',
+          extra: 'Title text on the button.',
+        },
+      },
+    },
+    {
+      id: `block.properties.${propertyName}.type`,
+      type: 'ButtonSelector',
+      layout: {
+        _global: 'settings_input_layout',
+      },
+      properties: {
+        title: 'type',
+        size: 'small',
+        options: ['primary', 'default', 'dashed', 'danger', 'link', 'text'],
+        label: {
+          span: 8,
+          align: 'right',
+          extra: 'The button type.',
+        },
+      },
+    },
+  ],
+});
+
 const label = {
  id: 'label_card',
  type: 'Card',
@ -125,10 +193,11 @@ const label = {
  ],
 };

-function makeBlockDefinition(propertyName, propertyDescription) {
+function makeBlockDefinition(propertyName, propertyDescription, requiredProperties) {
  const block = {
    id: `block.properties.${propertyName}`,
    layout: { _global: 'settings_input_layout' },
+    required: requiredProperties.includes(propertyName),
    properties: {
      title: propertyName,
      size: 'small',
@ -154,7 +223,6 @@ function makeBlockDefinition(propertyName, propertyDescription) {
        return propertyDescription.docs.block;
      case 'icon':
        block.type = 'Selector';
-        block.layout = { _global: 'settings_input_layout' };
        block.properties = {
          ...block.properties,
          showSearch: true,
@ -170,6 +238,8 @@ function makeBlockDefinition(propertyName, propertyDescription) {
        return block;
      case 'label':
        return label;
+      case 'button':
+        return button(propertyName);
      case 'optionsString':
        block.type = 'ControlledList';
        block.blocks = [
@ -507,7 +577,8 @@ function makeBlockDefinition(propertyName, propertyDescription) {
                    return Object.keys(item.properties).map((objectPropertyName) => {
                      bl = makeBlockDefinition(
                        `${propertyName}.${objectPropertyName}`,
-                        item.properties[objectPropertyName]
+                        item.properties[objectPropertyName],
+                        []
                      );
                      bl.properties.title = objectPropertyName;
                      bl.visible = {
@ -522,7 +593,7 @@ function makeBlockDefinition(propertyName, propertyDescription) {
                      return bl;
                    });
                  }
-                  bl = makeBlockDefinition(`${propertyName}.__${item.type}`, item);
+                  bl = makeBlockDefinition(`${propertyName}.__${item.type}`, item, []);
                  bl.visible = {
                    _if: {
                      test: {
@ -548,10 +619,11 @@ function makeBlockDefinition(propertyName, propertyDescription) {

 function transformer(obj) {
  const blockProperties = obj.schema.properties.properties;
+  const requiredProperties = obj.schema.properties.required || [];
  const blocks = Object.keys(blockProperties)
    .sort()
-    .map((key) => {
-      return makeBlockDefinition(key, blockProperties[key]);
+    .map((propertyName) => {
+      return makeBlockDefinition(propertyName, blockProperties[propertyName], requiredProperties);
    });
  return blocks;
 }