Parse Objs View

A module for easily displaying any item in the database with ReactJS

• Parse Objs View
  • Installation
  • Usage
    • ObjsView
      • PropTypes
      • Default Props
    • SelectObjsView
    • ObjsViewSearch
    • Configuration
    • PropTypes and Default Props
  • Development
  • Features
  • Folder structure
  • Credits
  • License

Installation

npm install --save @owsas/parse-objs-view

Usage

ObjsView

import React from 'react';
import { render } from 'react-dom';
import Parse from 'parse';

import { ObjsView } from '@owsas/parse-objs-view';

// initialize your Parse library
// Parse.initialize(...)
// Parse.serverURL = '...'

const App = () => (
  <div>
    <ObjsView
      Parse={Parse}
      className="Brand"
      renderItem={item => <div key={item.id}>{item.get('name')}</div>}
    />
  </div>
);

render(<App />, document.getElementById('root'));

PropTypes

ObjsView.propTypes = {
  className: PropTypes.string,
  query: PropTypes.instanceOf(Parse.Query),
  equalTo: PropTypes.object,
  greaterThan: PropTypes.object,
  lessThan: PropTypes.object,
  containedIn: PropTypes.object,
  containsAll: PropTypes.object,
  matches: PropTypes.object,
  notEqualTo: PropTypes.object,
  ascending: PropTypes.arrayOf(PropTypes.string),
  descending: PropTypes.arrayOf(PropTypes.string),
  select: PropTypes.arrayOf(PropTypes.string),
  include: PropTypes.arrayOf(PropTypes.string),
  limit: PropTypes.number,
  skip: PropTypes.number,
  containerStyle: PropTypes.instanceOf(Object),
  renderItem: PropTypes.func,
  renderItems: PropTypes.func,
  renderError: PropTypes.func,
  renderLoading: PropTypes.func,
  renderNotFound: PropTypes.func,
  renderLoadMoreButton: PropTypes.func,
  onRender: PropTypes.func,
  onGotResults: PropTypes.func,
  hideLoadMore: PropTypes.bool,
  history: PropTypes.object,
  count: PropTypes.bool,
  hideResultsOnLoad: PropTypes.bool,
  shouldUpdate: PropTypes.bool,
};

Default Props

ObjsView.defaultProps = {
  limit: 10,
  skip: 0,
  containerStyle: {},
  renderItem: null,
  renderItems: null,
  renderError: null,
  renderLoading: null,
  renderNotFound: null,
  renderLoadMoreButton: null,
  query: null,
  onRender: null,
  onGotResults: null,
  hideLoadMore: false,
  equalTo: null,
  notEqualTo: null,
  containedIn: null,
  greaterThan: null,
  lessThan: null,
  include: null,
  matches: null,
  descending: null,
  ascending: null,
  select: null,
  count: false,
  hideResultsOnLoad: false,
  shouldUpdate: true,
};

SelectObjsView

import React from 'react';
import { render } from 'react-dom';
import Parse from 'parse';

import { ObjsView } from '@owsas/parse-objs-view';

// initialize your Parse library
// Parse.initialize(...)
// Parse.serverURL = '...'

const App = () => (
  <div>
    <SelectObjsView
      Parse={Parse}
      className="Country"
      valueKey="countryCode"
      textKey="defaultName"
      onChange={v => console.log(v.target.value)}
    />
  </div>
);

render(<App />, document.getElementById('root'));

ObjsViewSearch

  <ObjsViewSearch
    searchKey="s"
    objsViewProps={{
      className: 'Brand',
      descending: ['likes'],
      renderItem: item => <div key={item.id}>{item.get('name')}</div>,
    }}
    searchBoxProps={{
      placeholder: 'Buscar ...',
    }}
  />

Configuration

You can configure parse-objs-view, to set Parse only once, and use the same Parse instance for all the components, without having to manually pass Parse each time.

import Parse from 'parse';
import { Configuration } from '@owsas/parse-objs-view'

// initialize Parse
Parse.initialize("...", "....");
Parse.serverURL = "....";

Configuration.setParse(Parse);

PropTypes and Default Props

SelectObjsView.defaultProps = Object.assign(ObjsView.defaultProps || {}, {
  showNear: false,
  textKey: 'objectId',
  valueKey: 'objectId',
  defaultValue: undefined,
  inputRef: undefined,
});

SelectObjsView.propTypes = Object.assign(ObjsView.propTypes || {}, {
  showNear: PropTypes.bool,
  textKey: PropTypes.string,
  valueKey: PropTypes.string,
  defaultValue: PropTypes.string,
  inputRef: PropTypes.func,
});

Development

1. Clone this repository
2. Run yarn install (Usage of Yarn is recommended)
3. Edit the src/index.jsx file and then run npm run dev.
4. This will start the webpack-dev-server
5. Then open your browser at localhost:3100
6. The browser will be updated everytime you change the code at src/index.jsx

Features

• Linting with eslint
• Linting code style: Airbnb
• Testing with jest@^21.2.1 and enzyme@^3.1.1
• Uses babel for JS transpiling
• Uses webpack for building the code

Folder structure

• /src: The module code
• /test: The tests for the src components
• /build: The target compilation directory

Credits

Juan Camilo Guarín Peñaranda
Otherwise SAS
Cali, Colombia, 2017

License

MIT