Merge branch 'develop' into blocks-antd-pagehcf

This commit is contained in:
Sam Tolmay 2020-11-23 11:30:34 +02:00
commit d2b8a06c75
17 changed files with 3557 additions and 52 deletions

View File

@ -4,3 +4,52 @@
type: Result
properties:
title: Result title
- id: "properties.subTitle: subTitle text"
type: Result
properties:
subTitle: subTitle text
- id: "areas.extra"
type: Result
areas:
content:
blocks:
- id: test
type: Test
extra:
blocks:
- id: test
type: Test
- id: "properties. icon: ApiFilled"
type: Result
properties:
icon: ApiFilled
- id: "properties. status: success default is info"
type: Result
properties:
status: success
- id: "properties. status: error"
type: Result
properties:
status: error
- id: "properties. status: info"
type: Result
properties:
status: info
- id: "properties. status: warning"
type: Result
properties:
status: warning
- id: "properties. status: 404"
type: Result
properties:
status: "404"
- id: "properties. status: 403"
type: Result
properties:
status: "403"
- id: "properties. status: 500"
type: Result
properties:
status: "500"

View File

@ -1,10 +1,335 @@
- id: default
type: Tabs
- id: properties.tabs
- id: properties.tabs.key
type: Tabs
properties:
tabs:
- title: one
key: one
- title: two
key: two
- key: content_one
- key: content_two
- key: content_three
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test
- id: properties.tabs.title
type: Tabs
properties:
tabs:
- key: content_one
title: Title One
- key: content_two
title: Title Two
- key: content_three
title: Title Three
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test
- id: properties.extraAreaKey
type: Tabs
properties:
extraAreaKey: content_two
tabs:
- key: content_one
title: Title One
- key: content_two
title: Title Two
- key: content_three
title: Title Three
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test
- id: properties.tabs.disabled
type: Tabs
properties:
tabs:
- key: content_one
title: Title One
disabled: true
- key: content_two
title: Title Two
- key: content_three
title: Title Three
disabled: true
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test
- id: properties.tabs.icon
type: Tabs
properties:
tabs:
- key: content_one
title: Title One
icon: WarningOutlined
- key: content_two
title: Title Two
- key: content_three
title: Title Three
icon: SaveOutlined
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test
- id: "properties.activeKey: content_two"
type: Tabs
properties:
activeKey: content_two
tabs:
- key: content_one
title: Title One
- key: content_two
title: Title Two
- key: content_three
title: Title Three
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test
- id: "properties.defaultActiveKey: content_three"
type: Tabs
properties:
defaultActiveKey: content_three
tabs:
- key: content_one
title: Title One
- key: content_two
title: Title Two
- key: content_three
title: Title Three
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test
- id: "properties.animated: false"
type: Tabs
properties:
animated: false
tabs:
- key: content_one
title: Title One
- key: content_two
title: Title Two
- key: content_three
title: Title Three
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test
- id: "properties.size: small"
type: Tabs
properties:
size: small
tabs:
- key: content_one
title: Title One
- key: content_two
title: Title Two
- key: content_three
title: Title Three
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test
- id: "properties.size: large"
type: Tabs
properties:
size: large
tabs:
- key: content_one
title: Title One
- key: content_two
title: Title Two
- key: content_three
title: Title Three
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test
- id: "properties.tabPosition: right - top is default"
type: Tabs
properties:
tabPosition: right
tabs:
- key: content_one
title: Title One
- key: content_two
title: Title Two
- key: content_three
title: Title Three
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test
- id: "properties.tabPosition: bottom"
type: Tabs
properties:
tabPosition: bottom
tabs:
- key: content_one
title: Title One
- key: content_two
title: Title Two
- key: content_three
title: Title Three
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test
- id: "properties.tabPosition: left"
type: Tabs
properties:
tabPosition: left
tabs:
- key: content_one
title: Title One
- key: content_two
title: Title Two
- key: content_three
title: Title Three
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test
- id: "properties. tabType: card - line is default"
type: Tabs
properties:
tabType: card
tabs:
- key: content_one
title: Title One
- key: content_two
title: Title Two
- key: content_three
title: Title Three
areas:
content_one:
blocks:
- id: ex_1_block_1
type: Test
content_two:
blocks:
- id: ex_1_block_2
type: Test
content_three:
blocks:
- id: ex_1_block_3
type: Test

View File

@ -45,7 +45,7 @@
},
"button": {
"type": "object",
"description": "Button object to customized the close button. Fires onClose action when clicked."
"description": "Button object to customized the close button. Triggers onClose action when clicked."
},
"description": {
"type": "string",

View File

@ -107,11 +107,11 @@
"properties": {
"onExpand": {
"type": "array",
"description": "Fire action when ellipse expand is clicked."
"description": "Trigger action when ellipse expand is clicked."
},
"onCopy": {
"type": "array",
"description": "Fire action when copy text is clicked."
"description": "Trigger action when copy text is clicked."
}
}
}

View File

@ -173,15 +173,15 @@
"properties": {
"onExpand": {
"type": "array",
"description": "Fire action when ellipse expand is clicked."
"description": "Trigger action when ellipse expand is clicked."
},
"onCopy": {
"type": "array",
"description": "Fire action when copy text is clicked."
"description": "Trigger action when copy text is clicked."
},
"onChange": {
"type": "array",
"description": "Fire action when paragraph is changed."
"description": "Trigger action when paragraph is changed."
}
}
}

View File

@ -31,8 +31,10 @@ const ResultBlock = ({ blockId, content, methods, properties }) => (
<Icon blockId={`${blockId}_icon`} methods={methods} properties={properties.icon} />
)
}
extra={content.content && content.content({ justifyContent: 'center' })}
/>
extra={content.extra && content.extra({ justifyContent: 'center' })}
>
{content.content && content.content({ justifyContent: 'center' })}
</Result>
);
ResultBlock.defaultProps = blockDefaultProps;

View File

@ -25,9 +25,6 @@
"description": "Result title or primary text."
}
}
},
"actions": {
"type": "object"
}
}
}

View File

@ -20,49 +20,60 @@ import { blockDefaultProps } from '@lowdefy/block-tools';
import Icon from '../Icon/Icon';
const TabsBlock = ({ blockId, content, methods, properties }) => {
const tabs = (
properties.tabs ||
Object.keys(content)
const getTabs = ({ content, properties }) => {
let tabs = properties.tabs;
if (!tabs) {
tabs = Object.keys(content)
.sort()
.map((key) => ({ key, title: key }))
).filter((tab) => tab.key !== 'tabBarExtraContent');
.map((key) => ({ key, title: key }));
}
// remove extraAreaKey key area from tabs
return tabs.filter((tab) => tab.key !== properties.extraAreaKey);
};
const getAdditionalProps = ({ content, properties }) => {
const additionalProps = {};
if (properties.activeKey) {
additionalProps.activeKey = properties.activeKey;
}
if (properties.extraAreaKey) {
additionalProps.tabBarExtraContent =
content[properties.extraAreaKey] && content[properties.extraAreaKey]();
}
return additionalProps;
};
const TabsBlock = ({ blockId, content, methods, properties }) => {
const tabs = getTabs({ content, properties });
const additionalProps = getAdditionalProps({ content, properties });
return (
<Tabs
id={blockId}
defaultActiveKey={properties.defaultActiveKey || tabs[0].key}
animated={properties.animated !== undefined ? properties.animated : true}
defaultActiveKey={properties.defaultActiveKey || tabs[0].key}
id={blockId}
onChange={(activeKey) => methods.callAction({ action: 'onChange', args: { activeKey } })}
size={properties.size || 'default'}
tabBarStyle={methods.makeCssClass(properties.tabBarStyle, { styleObjectOnly: true })}
tabPosition={properties.tabPosition || 'top'}
type={properties.tabType || 'line'}
onChange={(activeKey) => methods.callAction({ action: 'onChange', args: { activeKey } })}
onTabScroll={({ direction }) =>
methods.callAction({ action: 'onTabScroll', args: { direction } })
}
onTabClick={(key) => methods.callAction({ action: 'onTabClick', args: { key } })}
tabBarExtraContent={content.extra && content.extra()}
tabBarStyle={methods.makeCssClass(properties.tabBarStyle, { styleObjectOnly: true })}
// eslint-disable-next-line react/jsx-props-no-spreading
{...additionalProps}
>
{tabs.map((tab, i) => (
<Tabs.TabPane
disabled={tab.disabled}
key={tab.key}
tab={
tab.icon ? (
<span className={methods.makeCssClass(tab.titleStyle)}>
{tab.icon && (
<Icon blockId={`${blockId}_icon`} methods={methods} properties={tab.icon} />
)}
{tab.title || tab.key}
</span>
) : (
<span className={methods.makeCssClass(tab.titleStyle)}>{tab.title || tab.key}</span>
)
}
key={tab.key}
>
{content[tab.key] && content[tab.key]()}
</Tabs.TabPane>

View File

@ -34,7 +34,7 @@
"tabType": {
"type": "string",
"default": "line",
"enum": ["line", "card", "editable-card"],
"enum": ["line", "card"],
"description": "Type of tabs."
},
"tabs": {
@ -65,6 +65,10 @@
"tabBarStyle": {
"type": "object",
"description": "Css style to apply to the tab bar."
},
"extraAreaKey": {
"type": "string",
"description": "Area key for the extra area blocks."
}
}
}
@ -73,13 +77,16 @@
"type": "object",
"properties": {
"onChange": {
"type": "array"
"type": "array",
"description": "Trigger action on tab change."
},
"onTabScroll": {
"type": "array"
"type": "array",
"description": "Trigger action on tab scroll."
},
"onTabClick": {
"type": "array"
"type": "array",
"description": "Trigger action on tab click."
}
}
}

View File

@ -112,11 +112,11 @@
"properties": {
"onExpand": {
"type": "array",
"description": "Fire action when ellipse expand is clicked."
"description": "Trigger action when ellipse expand is clicked."
},
"onCopy": {
"type": "array",
"description": "Fire action when copy text is clicked."
"description": "Trigger action when copy text is clicked."
}
}
}

View File

@ -176,15 +176,15 @@
"properties": {
"onExpand": {
"type": "array",
"description": "Fire action when ellipse expand is clicked."
"description": "Trigger action when ellipse expand is clicked."
},
"onCopy": {
"type": "array",
"description": "Fire action when copy text is clicked."
"description": "Trigger action when copy text is clicked."
},
"onChange": {
"type": "array",
"description": "Fire action when paragraph is changed."
"description": "Trigger action when paragraph is changed."
}
}
}

View File

@ -0,0 +1,38 @@
/*
Copyright 2020 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.
*/
import { runMockRenderTests } from '@lowdefy/block-tools';
import Enzyme, { mount } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import { Result } from 'antd';
Enzyme.configure({ adapter: new Adapter() });
import ResultBlock from '../src/blocks/Result/Result';
import examples from '../demo/examples/Result.yaml';
import meta from '../src/blocks/Result/Result.json';
jest.mock('antd/lib/result', () => {
return jest.fn(() => 'mocked');
});
const mocks = [
{
name: 'default',
fn: Result,
},
];
runMockRenderTests({ examples, Block: ResultBlock, meta, mocks, enzyme: { mount } });

View File

@ -0,0 +1,40 @@
/*
Copyright 2020 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.
*/
import { runMockRenderTests } from '@lowdefy/block-tools';
import Enzyme, { mount } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import { Tabs } from 'antd';
Enzyme.configure({ adapter: new Adapter() });
import TabsBlock from '../src/blocks/Tabs/Tabs';
import examples from '../demo/examples/Tabs.yaml';
import meta from '../src/blocks/Tabs/Tabs.json';
jest.mock('antd/lib/tabs', () => {
const tabs = jest.fn(() => 'mocked');
tabs.TabPane = jest.fn(() => 'mocked');
return tabs;
});
const mocks = [
{
name: 'default',
fn: Tabs,
},
];
runMockRenderTests({ examples, Block: TabsBlock, meta, mocks, enzyme: { mount } });

View File

@ -0,0 +1,346 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Mock render - areas.extra - value[0] - default 1`] = `
Array [
Array [
Object {
"children": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>,
"extra": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
extra
</div>,
"icon": undefined,
"id": "areas.extra",
"status": undefined,
"subTitle": undefined,
"title": undefined,
},
Object {},
],
]
`;
exports[`Mock render - default - value[0] - default 1`] = `
Array [
Array [
Object {
"children": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>,
"extra": undefined,
"icon": undefined,
"id": "default",
"status": undefined,
"subTitle": undefined,
"title": undefined,
},
Object {},
],
]
`;
exports[`Mock render - properties. icon: ApiFilled - value[0] - default 1`] = `
Array [
Array [
Object {
"children": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>,
"extra": undefined,
"icon": <IconBlock
actions={Object {}}
blockId="properties. icon: ApiFilled_icon"
content={Object {}}
list={Array []}
menus={Array []}
methods={
Object {
"callAction": [Function],
"makeCssClass": [Function],
"registerAction": [Function],
"registerMethod": [Function],
}
}
properties="ApiFilled"
required={false}
user={Object {}}
validation={
Object {
"errors": Array [],
"status": null,
"warnings": Array [],
}
}
/>,
"id": "properties. icon: ApiFilled",
"status": undefined,
"subTitle": undefined,
"title": undefined,
},
Object {},
],
]
`;
exports[`Mock render - properties. status: 403 - value[0] - default 1`] = `
Array [
Array [
Object {
"children": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>,
"extra": undefined,
"icon": undefined,
"id": "properties. status: 403",
"status": "403",
"subTitle": undefined,
"title": undefined,
},
Object {},
],
]
`;
exports[`Mock render - properties. status: 404 - value[0] - default 1`] = `
Array [
Array [
Object {
"children": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>,
"extra": undefined,
"icon": undefined,
"id": "properties. status: 404",
"status": "404",
"subTitle": undefined,
"title": undefined,
},
Object {},
],
]
`;
exports[`Mock render - properties. status: 500 - value[0] - default 1`] = `
Array [
Array [
Object {
"children": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>,
"extra": undefined,
"icon": undefined,
"id": "properties. status: 500",
"status": "500",
"subTitle": undefined,
"title": undefined,
},
Object {},
],
]
`;
exports[`Mock render - properties. status: error - value[0] - default 1`] = `
Array [
Array [
Object {
"children": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>,
"extra": undefined,
"icon": undefined,
"id": "properties. status: error",
"status": "error",
"subTitle": undefined,
"title": undefined,
},
Object {},
],
]
`;
exports[`Mock render - properties. status: info - value[0] - default 1`] = `
Array [
Array [
Object {
"children": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>,
"extra": undefined,
"icon": undefined,
"id": "properties. status: info",
"status": "info",
"subTitle": undefined,
"title": undefined,
},
Object {},
],
]
`;
exports[`Mock render - properties. status: success default is info - value[0] - default 1`] = `
Array [
Array [
Object {
"children": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>,
"extra": undefined,
"icon": undefined,
"id": "properties. status: success default is info",
"status": "success",
"subTitle": undefined,
"title": undefined,
},
Object {},
],
]
`;
exports[`Mock render - properties. status: warning - value[0] - default 1`] = `
Array [
Array [
Object {
"children": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>,
"extra": undefined,
"icon": undefined,
"id": "properties. status: warning",
"status": "warning",
"subTitle": undefined,
"title": undefined,
},
Object {},
],
]
`;
exports[`Mock render - properties.subTitle: subTitle text - value[0] - default 1`] = `
Array [
Array [
Object {
"children": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>,
"extra": undefined,
"icon": undefined,
"id": "properties.subTitle: subTitle text",
"status": undefined,
"subTitle": "subTitle text",
"title": undefined,
},
Object {},
],
]
`;
exports[`Mock render - properties.title - value[0] - default 1`] = `
Array [
Array [
Object {
"children": <div
style={
Object {
"border": "1px solid red",
"padding": 10,
}
}
>
content
</div>,
"extra": undefined,
"icon": undefined,
"id": "properties.title",
"status": undefined,
"subTitle": undefined,
"title": "Result title",
},
Object {},
],
]
`;

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -4,6 +4,58 @@ exports[`Test Schema default 1`] = `true`;
exports[`Test Schema default 2`] = `null`;
exports[`Test Schema properties.tabs 1`] = `true`;
exports[`Test Schema properties. tabType: card - line is default 1`] = `true`;
exports[`Test Schema properties.tabs 2`] = `null`;
exports[`Test Schema properties. tabType: card - line is default 2`] = `null`;
exports[`Test Schema properties.activeKey: content_two 1`] = `true`;
exports[`Test Schema properties.activeKey: content_two 2`] = `null`;
exports[`Test Schema properties.animated: false 1`] = `true`;
exports[`Test Schema properties.animated: false 2`] = `null`;
exports[`Test Schema properties.defaultActiveKey: content_three 1`] = `true`;
exports[`Test Schema properties.defaultActiveKey: content_three 2`] = `null`;
exports[`Test Schema properties.extraAreaKey 1`] = `true`;
exports[`Test Schema properties.extraAreaKey 2`] = `null`;
exports[`Test Schema properties.size: large 1`] = `true`;
exports[`Test Schema properties.size: large 2`] = `null`;
exports[`Test Schema properties.size: small 1`] = `true`;
exports[`Test Schema properties.size: small 2`] = `null`;
exports[`Test Schema properties.tabPosition: bottom 1`] = `true`;
exports[`Test Schema properties.tabPosition: bottom 2`] = `null`;
exports[`Test Schema properties.tabPosition: left 1`] = `true`;
exports[`Test Schema properties.tabPosition: left 2`] = `null`;
exports[`Test Schema properties.tabPosition: right - top is default 1`] = `true`;
exports[`Test Schema properties.tabPosition: right - top is default 2`] = `null`;
exports[`Test Schema properties.tabs.disabled 1`] = `true`;
exports[`Test Schema properties.tabs.disabled 2`] = `null`;
exports[`Test Schema properties.tabs.icon 1`] = `true`;
exports[`Test Schema properties.tabs.icon 2`] = `null`;
exports[`Test Schema properties.tabs.key 1`] = `true`;
exports[`Test Schema properties.tabs.key 2`] = `null`;
exports[`Test Schema properties.tabs.title 1`] = `true`;
exports[`Test Schema properties.tabs.title 2`] = `null`;