import React from 'react';
import { useHistory } from 'react-router';
import { Alert } from 'react-native';
import { UIProvider, Form } from 'react-native-web-jsonschema-form';
import { Router, Switch } from 'react-router-dom';
// import { Router, Switch } from 'react-router-native';

const theme = {
  input: {
    focused: StyleSheet.create({
      border: {
        borderColor: 'yellow',
      },
    }),
  },
};

const schema = {
  type: 'object',
  properties: {
    username: { type: 'string' },
    password: { type: 'string' },
  },
};

const BasicForm = ({ formData, onChange }) => (
  <Form
    formData={formData}
    schema={schema}
    onChange={onChange}
  />
);

const ThemeWrapper = ({ children }) => {
  const history = useHistory();

  return (
    <UIProvider theme={theme} history={history}>
      {children}
    </UIProvider>
  );
};

const App = () => {
  const [formData, setFormData] = useState({});
  
  const onChange = (event) => setFormData({
    ...formData,
    [event.params.name]: event.params.value,
  });

  return (
    <Router>
      <Switch>
        <ThemeWrapper>
          <BasicForm
            formData={formData}
            onChange={onChange}
          />
        </ThemeWrapper>
      </Switch>
    </Router>
  );
};

import React from 'React';
import PropTypes from 'prop-types';
import { Loading, Alert } from 'react-native-web-ui-components';
import { Form } from 'react-native-web-jsonschema-form';

class MyForm extends React.Component {
  static propTypes = {
    controller: PropTypes.string.isRequired,
    action: PropTypes.string.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      schema: null,
      message: null,
      posting: null,
    };
  }

  onSubmit = async (event) => {
    const { action, controller } = this.props;
    const { values } = event.params;
    this.setState({ posting: true });
    return fetch(`/${controller}/${action}`, {
      method: 'POST',
      body: JSON.stringify(values),
    });
  };

  onSuccess = async (event) => {
    const { response } = event.params;
    this.setState({
      posting: false,
      message: response.message,
    });
  };

  onError = async (event) => {
    // These are errors for fields that are not included in the schema
    const { exceptions } = event.params;
    const warning = Object.keys(exceptions).map(k => exceptions[k].join('\n'));
    this.setState({
      posting: false,
      message: warning.length ? warning.join('\n') : null,
    });
  };

  render() {
    const { schema, posting, message } = this.state;
    if (!schema) {
      const self = this;
      fetch(`/get-schema/${controller}/${action}`)
        .then((schema) => self.setState({ schema }));

      return <Loading />;
    }

    return (
      <React.Fragment>
        {posting ? <Loading /> : null}
        {message ? (
          <Alert>
            Message
          </Alert>
        ) : null}
        <Form
          schema={schema}
          onSubmit={this.onSubmit}
          onSuccess={this.onSuccess}
          onError={this.onError}
        />
      </React.Fragment>
    );
  }
}

const theme = {
  input: {
    focused: StyleSheet.create({
      border: {
        borderColor: 'yellow',
        borderWidth: 2,
        borderStyle: 'solid',
      },
      background: {
        backgroundColor: 'white',
      },
      text: {
        fontSize: 14,
        color: '#545454',
      },
      placeholder: {
        color: '#FAFAFA',
      },
      opacity: {
        opacity: 1,
      },
      selected: {
        color: 'blue',
      },
      unselected: {
        color: '#FAFAFA',
      },
    }),
    regular: {...},
    disabled: {...},
    readonly: {...},
    error: {...},
  },
};

const ThemeWrapper = ({ children }) => {
  const history = useHistory();

  return (
    <UIProvider theme={theme} history={history}>
      {children}
    </UIProvider>
  );
};

import React from 'react';
import Form from 'react-native-web-jsonschema-form';

const Example = ({
  // Misc
  name, // String to be used as id, if empty a hash will be used instead.
  onRef, // Function to be called with the form instance. This is NOT a DOM/Native element.
  scroller, // If provided, this will be passed to the widgets to allow disabling ScrollView during a gesture.
  wigdets, // Object with a list of custom widgets.

  
  // Data
  formData, // Initial data to populate the form. If this attribute changes, the form will update the data.
  filterEmptyValues, // If true, all empty and non-required fields will be omitted from the submitted values.

  // Schema
  schema, // JSON schema
  uiSchema, // JSON schema modifying UI defaults for schema
  errorSchema, // JSON schema with errors
  
  // Events
  // * All events can be synchronous or asynchronous functions.
  // * All events receive one parameter `event` with `name`, `preventDefault()` and `params`.
  onFocus,
  onChange,
  onSubmit,
  onCancel,
  onSuccess,
  onError,

  // Layout
  buttonPosition, // left, right, center
  submitButton, // If false, it will not be rendered. If it is a string, it will be used as the default button text.
  cancelButton, // If false, it will not be rendered. If it is a string, it will be used as the default button text.
  SubmitButton, // Component to render the submit button
  CancelButton, // Component to render the cancel button
}) => (
  <Form />
)