Button component

packages/docs/components-listview.md

@@ -0,0 +1,51 @@
+---
+id: components-listview
+title: ListView
+sidebar_label: ListView
+---
+
+## ListView
+
+List View is a special type of view that can display items one by one based in a list.
+
+```JS
+const DATA = [
+  {
+    title: 'Main dishes',
+    data: ['Pizza', 'Burger', 'Risotto'],
+  },
+  {
+    title: 'Sides',
+    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
+  },
+  {
+    title: 'Drinks',
+    data: ['Water', 'Coke', 'Beer'],
+  },
+  {
+    title: 'Desserts',
+    data: ['Cheese Cake', 'Ice Cream'],
+  },
+];
+
+function Item({ title }) {
+  return (
+    <View style={styles.item}>
+      <Text style={styles.title}>{title}</Text>
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+      <SectionList
+        sections={DATA}
+        keyExtractor={(item, index) => item + index}
+        renderItem={({ item }) => <Item title={item} />}
+        renderSectionHeader={({ section: { title } }) => (
+          <Text>{title}</Text>
+        )}
+      />
+  );
+}
+```

packages/react-ape/reactApeEntry.js

@@ -25,6 +25,7 @@ export const render = ReactApeRenderer.render;
 export const Image = 'Image';
 export const View = 'View';
 export const Text = 'Text';
+export const Button = 'Button';
 
 export const StyleSheet = StyleSheetModule;
 export const Dimensions = DimensionsModule;

packages/react-ape/renderer/constants/index.js

@@ -12,6 +12,28 @@ export const ViewDefaults = {
   size: 200, // 200x200
   lineHeight: 24,
 };
+export const ButtonDefaults = {
+  containerStyle: {
+    width: 85,
+    elevation: 4,
+    height: 30,
+    backgroundColor: '#2196F3',
+    borderRadius: 2,
+  },
+  textStyle: {
+    textAlign: 'center',
+    margin: 8,
+    color: 'white',
+    fontSize: 18,
+  },
+  buttonDisabled: {
+    elevation: 0,
+    backgroundColor: '#dfdfdf',
+  },
+  textDisabled: {
+    color: '#cdcdcd',
+  },
+};
 
 // ReactApe Internal Constants
 export const _SectionBlockSize: number = 80; // 80x80

packages/react-ape/renderer/elements/Button.js

@@ -0,0 +1,189 @@
+/**
+ * @https://github.com/facebook/react-native/blob/main/Libraries/Components/Button.js
+ *
+ * @flow
+ *
+ */
+
+import {ButtonDefaults} from '../constants';
+
+//TODO adjust Opacity when focus, Blur
+type PressEvent = {||};
+type ButtonProps = {|
+  title: string,
+  onPress: (event?: PressEvent) => mixed,
+  onClick: (event?: SyntheticMouseEvent<HTMLButtonElement>) => mixed,
+  touchSoundDisabled?: ?boolean,
+  color?: ?string,
+  /**
+   * TV next focus down (see documentation for the View component).
+   *
+   * @platform android
+   */
+  nextFocusDown?: ?number,
+  /**
+   * TV next focus forward (see documentation for the View component).
+   *
+   * @platform android
+   */
+  nextFocusForward?: ?number,
+
+  /**
+   * TV next focus left (see documentation for the View component).
+   *
+   * @platform android
+   */
+  nextFocusLeft?: ?number,
+
+  /**
+    * TV next focus right (see documentation for the View component).
+    *
+    * @platform android
+    */
+  nextFocusRight?: ?number,
+
+  /**
+    * TV next focus up (see documentation for the View component).
+    *
+    * @platform android
+    */
+  nextFocusUp?: ?number,
+
+  /**
+    * Text to display for blindness accessibility features
+    */
+  accessibilityLabel?: ?string,
+
+  /**
+    * If true, disable all interactions for this component.
+    */
+  disabled?: ?boolean,
+
+  /**
+    * Used to locate this view in end-to-end tests.
+    */
+  testID?: ?string,
+|};
+
+function renderButton(props: ButtonProps, apeContext, parentLayout) {
+  //
+  console.log('[RENDER]');
+  const {spatialGeometry = {x: 0, y: 0}} = parentLayout;
+  const {ctx} = apeContext;
+
+  // If is relative and x and y haven't be processed, don't render
+  if (!spatialGeometry) return null;
+  // start drawing the canvas
+  const {title, color} = props;
+  const borderRadius = ButtonDefaults.containerStyle.borderRadius;
+  const backgroundColor = ButtonDefaults.containerStyle.backgroundColor;
+  let x = spatialGeometry.x || 0;
+  let y = spatialGeometry.y || 0;
+  let width = x + y;
+  let height = ButtonDefaults.containerStyle.height;
+  let globalStyle = {
+    width: width,
+    height: height,
+    color: color,
+    borderRadius: borderRadius,
+    backgroundColor,
+    lineWidth: 0,
+    borderColor: 'transparent',
+  };
+  const resetStyle = newStyle => {
+    globalStyle = {...globalStyle, newStyle};
+    console.log('style)))))', globalStyle);
+  };
+  const redrawButton = ctx => {
+    // TODO reset Style on focus
+    let newStyle = {
+      lineWidth: 2,
+      borderColor: '#ccc',
+    };
+    //let prevStyle = globalStyle
+    resetStyle(newStyle);
+  };
+
+  ctx.beginPath();
+  ctx.fillStyle = backgroundColor;
+  ctx.moveTo(x, y);
+  /**
+*  Top Right Radius
+*/
+  ctx.lineTo(x + width - borderRadius, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + borderRadius);
+  /**
+*  Bottom right Radius
+*/
+
+  ctx.lineTo(x + width, y + height - borderRadius);
+  ctx.quadraticCurveTo(
+    x + width,
+    y + height,
+    x + width - borderRadius,
+    y + height
+  );
+
+  /**
+*  Bottom Left Radius
+*/
+  ctx.lineTo(x + borderRadius, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - borderRadius);
+  /** Top left Radius */
+  ctx.lineTo(x, y + borderRadius);
+  ctx.quadraticCurveTo(x, y, x + borderRadius, y);
+
+  ctx.fill();
+  ctx.lineWidth = globalStyle.lineWidth;
+  ctx.strokeStyle = globalStyle.borderColor;
+  ctx.stroke();
+  ctx.fillStyle = color || ButtonDefaults.textStyle.color;
+  ctx.font = `${ButtonDefaults.textStyle.fontSize} Helvetica`;
+  //ctx.fillText('Start', x+ width/2 , y + height / 2);
+  ctx.textAlign = 'center';
+  ctx.fillText(title, x + width / 2, y + height / 2);
+  ctx.closePath();
+
+  const onClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
+    const rect = {
+      x,
+      y,
+      height,
+      width,
+    };
+    const mousePosition = trackMousePosition(ctx.canvas, event);
+    if (isInside(mousePosition, rect)) {
+      redrawButton(ctx);
+      if (props.onClick && typeof props.onClick === 'function') {
+        props.onClick(event);
+      }
+    }
+  };
+  function trackMousePosition(canvas, event) {
+    return {
+      x: event.clientX - canvas.offsetLeft,
+      y: event.clientY - canvas.offsetTop,
+    };
+  }
+  const isInside = (pos, rect) => {
+    return (
+      pos.x > rect.x &&
+      pos.x < rect.x + rect.width &&
+      pos.y < rect.y + rect.height &&
+      pos.y > rect.y
+    );
+  };
+
+  ctx.canvas.addEventListener('click', onClick, false);
+  ctx.canvas.addEventListener('focus', redrawButton);
+  ctx.canvas.addEventListener('blur', redrawButton);
+
+  // events
+}
+
+export default function createButtonInstance(props: ButtonProps): mixed {
+  return {
+    type: 'Button',
+    render: renderButton.bind(this, props),
+  };
+}

packages/react-ape/renderer/elements/__tests__/Button-test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {ButtonDefaults} from '../../constants';
+import CreateButtonInstance from '../Button';
+
+describe('Button', () => {
+  describe('Call the button with Props', () => {
+    it('Should render properly', () => {
+      const title = 'Press Me';
+      const color = '#f8a978';
+      const x = 40;
+      const y = 20;
+      const width = x + y;
+      const height = ButtonDefaults.containerStyle.height;
+      const props = {title, color};
+      const apeContext = {
+        ctx: {
+          beginPath: jest.fn(),
+          fillStyle: jest.fn(),
+          moveTo: jest.fn(),
+          fillText: jest.fn(),
+          fill: jest.fn(),
+          stroke: jest.fn(),
+          closePath: jest.fn(),
+          lineTo: jest.fn(),
+          quadraticCurveTo: jest.fn(),
+          font: 'Helvetica',
+          canvas: {
+            addEventListener: jest.fn(),
+          },
+        },
+      };
+
+      const Button = CreateButtonInstance(props);
+      Button.render(apeContext, {spatialGeometry: {x, y}});
+      const {
+        beginPath,
+        fillStyle,
+        moveTo,
+        fillText,
+        fill,
+        stroke,
+        closePath,
+        lineTo,
+        quadraticCurveTo,
+        font,
+      } = apeContext.ctx;
+      expect(beginPath.mock.calls.length).toBe(1);
+      expect(beginPath).toBeCalledWith();
+      expect(closePath).toBeCalledWith();
+      expect(stroke).toBeCalledWith();
+      expect(moveTo).toBeCalledWith(x, y);
+      expect(lineTo.mock.calls.length).toEqual(4);
+      expect(fill.mock.calls.length).toBe(1);
+      expect(fillText.mock.calls.length).toBe(1);
+      expect(fillText).toBeCalledWith(title, x + width / 2, y + height / 2);
+      expect(font).toEqual(`${ButtonDefaults.textStyle.fontSize} Helvetica`);
+      expect(quadraticCurveTo.mock.calls.length).toEqual(4);
+      expect(fillStyle).toBe(color);
+      expect(Button).toMatchSnapshot();
+    });
+  });
+});

packages/react-ape/renderer/elements/__tests__/__snapshots__/Button-test.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button Call the button with Props Should render properly 1`] = `
+Object {
+  "render": [Function],
+  "type": "Button",
+}
+`;

packages/react-ape/renderer/reactApeComponent.js

@@ -9,6 +9,7 @@
 import Image from './elements/Image';
 import Text from './elements/Text';
 import View from './elements/View';
+import Button from './elements/Button';
 import {CustomComponents} from '../modules/Register';
 
 const CHILDREN = 'children';
@@ -36,6 +37,7 @@ const ReactApeComponent = {
       Image: Image(props),
       Text: Text(props),
       View: new View(props),
+      Button: Button(props),
     };
 
     if (!COMPONENTS[type]) {