drnaf/src/elements/DRNAFButton.js

Dynamic React-Native Application Framework

import React, { Component } from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { DRNAFComponent } from '../inherites/DRNAFComponent'
import { l } from '../utilities/Logs';

export class DRNAFButton extends DRNAFComponent {
  constructor(props) {
    super(props, "DRNAFButton")

    // prepare usage variables
    const mtn = this.ct + "constructor() ";
    const request = props.request;
    if (!request) {
      // default state
      this.state = {
        callback: null,
        label: 'no',
        style: {
          alignSelf: "baseline",
          backgroundColor: 'purple',
          borderRadius: 10,
          padding: 5,
        }
      }

      // exit from this process
      return;
    }

    this.state = {
      callback: props.callback,
      style: request.style,
      // style: {
      //   alignSelf: "baseline",
      //   backgroundColor: 'purple',
      //   borderRadius: 10,
      //   padding: 5,
      // },
      label: request.label,

    }

    const val = this.deleteUselessField(this.state.style, [
      {
        name: 'width',
        commands: ['int', 'percentage'],
        negative: [{
          action: 'delete',
        }]
      },
      {
        name: 'height',
        commands: ['int', 'percentage'],
        negative: [{
          action: 'delete',
        }]
      }
    ]);

    // l.obj(mtn + "result: ", val);
    // l.obj(mtn + "style: ", this.state.style);


  }

  /** [Inbound] Feature methods */
  x = () => {
    return "AAAA";// this.state.label;

  }

  render() {
    // clickable 
    return <TouchableOpacity onPress={() => {
      if (!this.state.callback) return;

      // update entity
      const actions = this.entities.actions;
      // just fixed 
      actions.push({
        action: {
          type: 'api',
          response: {
            type: 'new-page',
            page_id: 'xA1234',
            validators: {
              validate_fields: [
                { 
                  reference_field: 'status',
                  value: true,
                }
              ]
            }
          },
          props: {
            url: 'http://192.168.1.109:3008/work',
            method: 'post',
            attach_fields: {
              'work': "CALCULATE_TWO_PARAMS",

            }
          }
        },
      })

      // callback
      this.state.callback({
        actions: actions
      });;

    }}
      // style={{
      //   alignItems: 'center',
      //   width: '100%',
      //   // width: 'ab',
      //   // marginLeft: 5,
      //   // marginTop: 5,
      //   backgroundColor: '#33D4FF',
      //   padding: 10,
      // }}
      style={this.state.style}
    >
      { /** Button container */}
      <View style={{
        // backgroundColor: 'green',
      }}>

        {/* Button label */}
        <Text>
          <Text style={{
            fontSize: 20,
            textAlignVertical: "center",
            textAlign: "center",
            color: 'white',

          }}>{this.state.label}</Text>
        </Text>

      </View>
    </TouchableOpacity>
  }
}