mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2025-02-17 14:30:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'password-input' of https://github.com/lowdefy/lowdefy into password-input

Browse Source
This commit is contained in:
Sandile 2021-09-08 12:24:46 +02:00
commit 9075c1c7f0
5 changed files with 306 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/blocks/blocksAntd/demo/examples/Card.yaml
View File

@ -49,3 +49,13 @@
type: Card
properties:
title: <div style="color:green">Card Title</div>
- id: 'with onClick event'
type: Card
properties:
title: Card block
events:
onClick:
- id: message
type: message
params:
content: Success

7
packages/blocks/blocksAntd/src/blocks/Card/Card.js
View File

@ -18,7 +18,7 @@ import React from 'react';
import { Card } from 'antd';
import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
const CardBlock = ({ blockId, content, properties, methods }) => (
const CardBlock = ({ blockId, content, properties, methods, events }) => (
<Card
id={blockId}
title={
@ -35,6 +35,11 @@ const CardBlock = ({ blockId, content, properties, methods }) => (
hoverable={properties.hoverable}
size={properties.size}
type={properties.inner ? 'inner' : null}
onClick={() => methods.triggerEvent({ name: 'onClick' })}
className={methods.makeCssClass([
{ outline: 'none', cursor: events.onClick && 'pointer' },
properties.style,
])}
>
{content.content && content.content()}
</Card>

10
packages/blocks/blocksAntd/src/blocks/Card/Card.json
View File

@ -51,6 +51,16 @@
"description": "Title to show in the title area - supports html. Overwritten by blocks in the title content area."
}
}
},
"events": {
"type": "object",
"additionalProperties": false,
"properties": {
"onClick": {
"type": "array",
"description": "Trigger actions when the Card is clicked."
}
}
}
}
}

216
packages/blocks/blocksAntd/tests/__snapshots__/Card.mock.test.js.snap
View File

@ -16,6 +16,7 @@ Array [
>
content
</div>,
"className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
"extra": <div
style={
Object {
@ -29,6 +30,7 @@ Array [
"headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
"hoverable": undefined,
"id": "areas.extra:",
"onClick": [Function],
"size": undefined,
"title": <RenderHtml
html="Card block"
@ -48,6 +50,15 @@ Array [
"styleObjectOnly": true,
},
],
Array [
Array [
Object {
"cursor": undefined,
"outline": "none",
},
undefined,
],
],
],
"results": Array [
Object {
@ -58,6 +69,10 @@ Array [
"type": "return",
"value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
},
Object {
"type": "return",
"value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
},
],
},
"registerEvent": [Function],
@ -89,10 +104,12 @@ Array [
>
content
</div>,
"className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
"extra": undefined,
"headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
"hoverable": undefined,
"id": "default",
"onClick": [Function],
"size": undefined,
"title": undefined,
"type": null,
@ -118,10 +135,12 @@ Array [
>
content
</div>,
"className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
"extra": undefined,
"headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
"hoverable": undefined,
"id": "properties.bodyStyle: border: 5px solid blue",
"onClick": [Function],
"size": undefined,
"title": <RenderHtml
html="Card block"
@ -143,6 +162,15 @@ Array [
"styleObjectOnly": true,
},
],
Array [
Array [
Object {
"cursor": undefined,
"outline": "none",
},
undefined,
],
],
],
"results": Array [
Object {
@ -153,6 +181,10 @@ Array [
"type": "return",
"value": "{\\"style\\":{\\"border\\":\\"5px solid blue\\"},\\"options\\":{\\"styleObjectOnly\\":true}}",
},
Object {
"type": "return",
"value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
},
],
},
"registerEvent": [Function],
@ -184,10 +216,12 @@ Array [
>
content
</div>,
"className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
"extra": undefined,
"headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
"hoverable": undefined,
"id": "properties.bordered: false",
"onClick": [Function],
"size": undefined,
"title": <RenderHtml
html="Card block"
@ -207,6 +241,15 @@ Array [
"styleObjectOnly": true,
},
],
Array [
Array [
Object {
"cursor": undefined,
"outline": "none",
},
undefined,
],
],
],
"results": Array [
Object {
@ -217,6 +260,10 @@ Array [
"type": "return",
"value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
},
Object {
"type": "return",
"value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
},
],
},
"registerEvent": [Function],
@ -248,10 +295,12 @@ Array [
>
content
</div>,
"className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
"extra": undefined,
"headStyle": "{\\"style\\":{\\"border\\":\\"5px solid blue\\"},\\"options\\":{\\"styleObjectOnly\\":true}}",
"hoverable": undefined,
"id": "properties.headerStyle: border: 5px solid blue",
"onClick": [Function],
"size": undefined,
"title": <RenderHtml
html="Card block"
@ -273,6 +322,15 @@ Array [
"styleObjectOnly": true,
},
],
Array [
Array [
Object {
"cursor": undefined,
"outline": "none",
},
undefined,
],
],
],
"results": Array [
Object {
@ -283,6 +341,10 @@ Array [
"type": "return",
"value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
},
Object {
"type": "return",
"value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
},
],
},
"registerEvent": [Function],
@ -314,10 +376,12 @@ Array [
>
content
</div>,
"className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
"extra": undefined,
"headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
"hoverable": true,
"id": "properties.hoverable: true",
"onClick": [Function],
"size": undefined,
"title": <RenderHtml
html="Card block"
@ -337,6 +401,15 @@ Array [
"styleObjectOnly": true,
},
],
Array [
Array [
Object {
"cursor": undefined,
"outline": "none",
},
undefined,
],
],
],
"results": Array [
Object {
@ -347,6 +420,10 @@ Array [
"type": "return",
"value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
},
Object {
"type": "return",
"value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
},
],
},
"registerEvent": [Function],
@ -378,10 +455,12 @@ Array [
>
content
</div>,
"className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
"extra": undefined,
"headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
"hoverable": undefined,
"id": "properties.inner: true",
"onClick": [Function],
"size": undefined,
"title": <RenderHtml
html="Card block"
@ -401,6 +480,15 @@ Array [
"styleObjectOnly": true,
},
],
Array [
Array [
Object {
"cursor": undefined,
"outline": "none",
},
undefined,
],
],
],
"results": Array [
Object {
@ -411,6 +499,10 @@ Array [
"type": "return",
"value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
},
Object {
"type": "return",
"value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
},
],
},
"registerEvent": [Function],
@ -442,10 +534,12 @@ Array [
>
content
</div>,
"className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
"extra": undefined,
"headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
"hoverable": undefined,
"id": "properties.size: small",
"onClick": [Function],
"size": "small",
"title": <RenderHtml
html="Card block small"
@ -465,6 +559,15 @@ Array [
"styleObjectOnly": true,
},
],
Array [
Array [
Object {
"cursor": undefined,
"outline": "none",
},
undefined,
],
],
],
"results": Array [
Object {
@ -475,6 +578,10 @@ Array [
"type": "return",
"value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
},
Object {
"type": "return",
"value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
},
],
},
"registerEvent": [Function],
@ -506,10 +613,12 @@ Array [
>
content
</div>,
"className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
"extra": undefined,
"headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
"hoverable": undefined,
"id": "properties.title",
"onClick": [Function],
"size": undefined,
"title": <RenderHtml
html="Card block"
@ -529,6 +638,15 @@ Array [
"styleObjectOnly": true,
},
],
Array [
Array [
Object {
"cursor": undefined,
"outline": "none",
},
undefined,
],
],
],
"results": Array [
Object {
@ -539,6 +657,10 @@ Array [
"type": "return",
"value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
},
Object {
"type": "return",
"value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
},
],
},
"registerEvent": [Function],
@ -570,10 +692,12 @@ Array [
>
content
</div>,
"className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
"extra": undefined,
"headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
"hoverable": undefined,
"id": "with html in title",
"onClick": [Function],
"size": undefined,
"title": <RenderHtml
html=<div style="color:green">
@ -595,6 +719,15 @@ Array [
"styleObjectOnly": true,
},
],
Array [
Array [
Object {
"cursor": undefined,
"outline": "none",
},
undefined,
],
],
],
"results": Array [
Object {
@ -605,6 +738,89 @@ Array [
"type": "return",
"value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
},
Object {
"type": "return",
"value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
},
],
},
"registerEvent": [Function],
"registerMethod": [Function],
"triggerEvent": [Function],
}
}
/>,
"type": null,
},
Object {},
],
]
`;
exports[`Mock render - with onClick event - value[0] - default 1`] = `
Array [
Array [
Object {
"bodyStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
"bordered": undefined,
"children": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>,
"className": "{\\"style\\":[{\\"outline\\":\\"none\\",\\"cursor\\":\\"pointer\\"},null]}",
"extra": undefined,
"headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
"hoverable": undefined,
"id": "with onClick event",
"onClick": [Function],
"size": undefined,
"title": <RenderHtml
html="Card block"
methods={
Object {
"makeCssClass": [MockFunction] {
"calls": Array [
Array [
undefined,
Object {
"styleObjectOnly": true,
},
],
Array [
undefined,
Object {
"styleObjectOnly": true,
},
],
Array [
Array [
Object {
"cursor": "pointer",
"outline": "none",
},
undefined,
],
],
],
"results": Array [
Object {
"type": "return",
"value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
},
Object {
"type": "return",
"value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
},
Object {
"type": "return",
"value": "{\\"style\\":[{\\"outline\\":\\"none\\",\\"cursor\\":\\"pointer\\"},null]}",
},
],
},
"registerEvent": [Function],

74
packages/blocks/blocksAntd/tests/__snapshots__/Card.test.js.snap
View File

@ -2,8 +2,9 @@
exports[`Render areas.extra: - value[0] 1`] = `
<div
className="ant-card ant-card-bordered"
className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered"
id="areas.extra:"
onClick={[Function]}
>
<div
className="ant-card-head"
@ -55,8 +56,9 @@ exports[`Render areas.extra: - value[0] 1`] = `
exports[`Render default - value[0] 1`] = `
<div
className="ant-card ant-card-bordered"
className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered"
id="default"
onClick={[Function]}
>
<div
className="ant-card-body"
@ -78,8 +80,9 @@ exports[`Render default - value[0] 1`] = `
exports[`Render properties.bodyStyle: border: 5px solid blue - value[0] 1`] = `
<div
className="ant-card ant-card-bordered"
className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered"
id="properties.bodyStyle: border: 5px solid blue"
onClick={[Function]}
>
<div
className="ant-card-head"
@ -117,8 +120,9 @@ exports[`Render properties.bodyStyle: border: 5px solid blue - value[0] 1`] = `
exports[`Render properties.bordered: false - value[0] 1`] = `
<div
className="ant-card"
className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]}"
id="properties.bordered: false"
onClick={[Function]}
>
<div
className="ant-card-head"
@ -156,8 +160,9 @@ exports[`Render properties.bordered: false - value[0] 1`] = `
exports[`Render properties.headerStyle: border: 5px solid blue - value[0] 1`] = `
<div
className="ant-card ant-card-bordered"
className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered"
id="properties.headerStyle: border: 5px solid blue"
onClick={[Function]}
>
<div
className="ant-card-head"
@ -195,8 +200,9 @@ exports[`Render properties.headerStyle: border: 5px solid blue - value[0] 1`] =
exports[`Render properties.hoverable: true - value[0] 1`] = `
<div
className="ant-card ant-card-bordered ant-card-hoverable"
className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered ant-card-hoverable"
id="properties.hoverable: true"
onClick={[Function]}
>
<div
className="ant-card-head"
@ -234,8 +240,9 @@ exports[`Render properties.hoverable: true - value[0] 1`] = `
exports[`Render properties.inner: true - value[0] 1`] = `
<div
className="ant-card ant-card-bordered ant-card-type-inner"
className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered ant-card-type-inner"
id="properties.inner: true"
onClick={[Function]}
>
<div
className="ant-card-head"
@ -273,8 +280,9 @@ exports[`Render properties.inner: true - value[0] 1`] = `
exports[`Render properties.size: small - value[0] 1`] = `
<div
className="ant-card ant-card-bordered ant-card-small"
className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered ant-card-small"
id="properties.size: small"
onClick={[Function]}
>
<div
className="ant-card-head"
@ -312,8 +320,9 @@ exports[`Render properties.size: small - value[0] 1`] = `
exports[`Render properties.title - value[0] 1`] = `
<div
className="ant-card ant-card-bordered"
className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered"
id="properties.title"
onClick={[Function]}
>
<div
className="ant-card-head"
@ -351,8 +360,49 @@ exports[`Render properties.title - value[0] 1`] = `
exports[`Render with html in title - value[0] 1`] = `
<div
className="ant-card ant-card-bordered"
className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered"
id="with html in title"
onClick={[Function]}
>
<div
className="ant-card-head"
style="{\\"options\\":{\\"styleObjectOnly\\":true}}"
>
<div
className="ant-card-head-wrapper"
>
<div
className="ant-card-head-title"
>
<span
className="{}"
/>
</div>
</div>
</div>
<div
className="ant-card-body"
style="{\\"options\\":{\\"styleObjectOnly\\":true}}"
>
<div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>
</div>
</div>
`;
exports[`Render with onClick event - value[0] 1`] = `
<div
className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\",\\"cursor\\":\\"pointer\\"},null]} ant-card-bordered"
id="with onClick event"
onClick={[Function]}
>
<div
className="ant-card-head"
@ -427,3 +477,7 @@ exports[`Test Schema properties.title 2`] = `null`;
exports[`Test Schema with html in title 1`] = `true`;
exports[`Test Schema with html in title 2`] = `null`;
exports[`Test Schema with onClick event 1`] = `true`;
exports[`Test Schema with onClick event 2`] = `null`;