Merge pull request #212 from lowdefy/blocks-antd-timeline

feat(blocksAntd): timeline examples

packages/blocksAntd/demo/examples/Timeline.yaml

@@ -1,8 +0,0 @@
-- id: default
-  type: Timeline
-- id: properties.items
-  type: Timeline
-  properties:
-    items: 
-      - title: one
-      - title: two

packages/blocksAntd/demo/examples/TimelineList.yaml

@@ -0,0 +1,177 @@
+- id: default
+  type: TimelineList
+- id: "properties.mode: alternate"
+  type: TimelineList
+  properties:
+    mode: alternate
+    data:
+      - icon: FireOutlined
+        color: red
+        position: left
+      - icon: SettingOutlined
+        color: green
+        position: right
+      - icon: RocketOutlined
+        color: blue
+        position: left
+  blocks:
+    - id: Title 1
+      type: Title
+      properties:
+        level: 4
+    - id: Text 2
+      type: Paragraph
+      properties:
+        content: >
+          Text 2
+    - id: Text 3
+      type: Paragraph
+      properties:
+        content: >
+          Text 3
+- id: "properties.mode: right"
+  type: TimelineList
+  properties:
+    mode: right
+    data:
+      - icon: FireOutlined
+        color: red
+        position: left
+      - icon: SettingOutlined
+        color: green
+        position: right
+      - icon: RocketOutlined
+        color: blue
+        position: left
+  blocks:
+    - id: Title 1
+      type: Title
+      properties:
+        level: 4
+    - id: Text 2
+      type: Paragraph
+      properties:
+        content: >
+          Text 2
+    - id: Text 3
+      type: Paragraph
+      properties:
+        content: >
+          Text 3
+- id: "properties.mode: left"
+  type: TimelineList
+  properties:
+    mode: left
+    data:
+      - icon: FireOutlined
+        color: red
+        position: left
+      - icon: SettingOutlined
+        color: green
+        position: right
+      - icon: RocketOutlined
+        color: blue
+        position: left
+  blocks:
+    - id: Title 1
+      type: Title
+      properties:
+        level: 4
+    - id: Text 2
+      type: Paragraph
+      properties:
+        content: >
+          Text 2
+    - id: Text 3
+      type: Paragraph
+      properties:
+        content: >
+          Text 3
+- id: "properties.reverse: true"
+  type: TimelineList
+  properties:
+    reverse: true
+    data:
+      - icon: FireOutlined
+        color: red
+        position: left
+      - icon: SettingOutlined
+        color: green
+        position: right
+      - icon: RocketOutlined
+        color: blue
+        position: left
+  blocks:
+    - id: Title 1
+      type: Title
+      properties:
+        level: 4
+    - id: Text 2
+      type: Paragraph
+      properties:
+        content: >
+          Text 2
+    - id: Text 3
+      type: Paragraph
+      properties:
+        content: >
+          Text 3
+- id: "properties.pending: true"
+  type: TimelineList
+  properties:
+    pending: true
+    data:
+      - icon: FireOutlined
+        color: red
+        position: left
+      - icon: SettingOutlined
+        color: green
+        position: right
+      - icon: RocketOutlined
+        color: blue
+        position: left
+  blocks:
+    - id: Title 1
+      type: Title
+      properties:
+        level: 4
+    - id: Text 2
+      type: Paragraph
+      properties:
+        content: >
+          Text 2
+    - id: Text 3
+      type: Paragraph
+      properties:
+        content: >
+          Text 3
+- id: "properties.pendingDotIcon: "
+  type: TimelineList
+  properties:
+    pending: true
+    pendingDotIcon: FireFilled
+    data:
+      - icon: FireOutlined
+        color: red
+        position: left
+      - icon: SettingOutlined
+        color: green
+        position: right
+      - icon: RocketOutlined
+        color: blue
+        position: left
+  blocks:
+    - id: Title 1
+      type: Title
+      properties:
+        level: 4
+    - id: Text 2
+      type: Paragraph
+      properties:
+        content: >
+          Text 2
+    - id: Text 3
+      type: Paragraph
+      properties:
+        content: >
+          Text 3

packages/blocksAntd/src/blocks/Icon/Icon.js

@@ -57,7 +57,7 @@ const IconBlock = ({ actions, blockId, methods, properties, ...props }) => {
       {actions.onClick && actions.onClick.loading && !propertiesObj.disableLoadingIcon ? (
         <Loading3QuartersOutlined {...{ ...iconProps, spin: true }} />
       ) : (
-        <ErrorBoundary fallback={<ExclamationCircleOutlined {...iconProps} />}>
+        <ErrorBoundary fallback={() => <ExclamationCircleOutlined {...iconProps} />}>
           <Suspense fallback={<Loading3QuartersOutlined {...{ ...iconProps, spin: true }} />}>
             <IconComp
               id={blockId}

packages/blocksAntd/src/blocks/TimelineList/TimelineList.js

@@ -21,7 +21,7 @@ import { get, mergeObjects, serializer, type } from '@lowdefy/helpers';
 
 import Icon from '../Icon/Icon';
 
-const TimelineBlock = ({ blockId, list, methods, properties }) => {
+const TimelineList = ({ blockId, list, methods, properties }) => {
   const other = {};
   if (properties.mode) {
     other.mode = properties.mode;
@@ -75,6 +75,6 @@ const TimelineBlock = ({ blockId, list, methods, properties }) => {
   );
 };
 
-TimelineBlock.defaultProps = blockDefaultProps;
+TimelineList.defaultProps = blockDefaultProps;
 
-export default TimelineBlock;
+export default TimelineList;

packages/blocksAntd/src/index.js

@@ -69,7 +69,7 @@ import Spin from './blocks/Spin/Spin';
 import Statistic from './blocks/Statistic/Statistic';
 import Switch from './blocks/Switch/Switch';
 import Tabs from './blocks/Tabs/Tabs';
-import Timeline from './blocks/Timeline/Timeline';
+import TimelineList from './blocks/TimelineList/TimelineList';
 import TextArea from './blocks/TextArea/TextArea';
 import TextInput from './blocks/TextInput/TextInput';
 import Title from './blocks/Title/Title';
@@ -132,7 +132,7 @@ export {
   Statistic,
   Switch,
   Tabs,
-  Timeline,
+  TimelineList,
   TextArea,
   TextInput,
   Title,
@@ -195,7 +195,7 @@ export default {
   Statistic,
   Switch,
   Tabs,
-  Timeline,
+  TimelineList,
   TextArea,
   TextInput,
   Title,

packages/blocksAntd/tests/TimelineList.mock.test.js

@@ -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 { Timeline } from 'antd';
+
+Enzyme.configure({ adapter: new Adapter() });
+import TimelineList from '../src/blocks/TimelineList/TimelineList';
+import examples from '../demo/examples/TimelineList.yaml';
+import meta from '../src/blocks/TimelineList/TimelineList.json';
+
+jest.mock('antd/lib/timeline', () => {
+  const timeline = jest.fn((props) => props.toString());
+  timeline.Item = jest.fn((props) => props.toString());
+  return timeline;
+});
+
+const mocks = [
+  {
+    name: 'default',
+    fn: Timeline,
+  },
+];
+
+runMockRenderTests({ examples, Block: TimelineList, meta, mocks, enzyme: { mount } });

packages/blocksAntd/tests/TimelineList.test.js

@@ -16,9 +16,9 @@
 
 import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-tools';
 
-import Timeline from '../src/blocks/Timeline/Timeline';
-import examples from '../demo/examples/Timeline.yaml';
-import meta from '../src/blocks/Timeline/Timeline.json';
+import TimelineList from '../src/blocks/TimelineList/TimelineList';
+import examples from '../demo/examples/TimelineList.yaml';
+import meta from '../src/blocks/TimelineList/TimelineList.json';
 
-runRenderTests({ examples, Block: Timeline, meta });
+runRenderTests({ examples, Block: TimelineList, meta });
 runBlockSchemaTests({ examples, meta });

packages/blocksAntd/tests/__snapshots__/Timeline.test.js.snap

@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render default - value[0] 1`] = `
-<ul
-  className="ant-timeline {\\"style\\":[{\\"padding\\":\\"5px 0px 0px 5px\\"},null]}"
-  id="default"
-/>
-`;
-
-exports[`Render properties.items - value[0] 1`] = `
-<ul
-  className="ant-timeline {\\"style\\":[{\\"padding\\":\\"5px 0px 0px 5px\\"},null]}"
-  id="properties.items"
-/>
-`;
-
-exports[`Test Schema default 1`] = `true`;
-
-exports[`Test Schema default 2`] = `null`;
-
-exports[`Test Schema properties.items 1`] = `false`;
-
-exports[`Test Schema properties.items 2`] = `
-Array [
-  Object {
-    "dataPath": "/properties",
-    "keyword": "additionalProperties",
-    "message": "should NOT have additional properties",
-    "params": Object {
-      "additionalProperty": "items",
-    },
-    "schemaPath": "#/properties/properties/additionalProperties",
-  },
-]
-`;