diff --git a/.babelrc b/.babelrc index 0846fcb..7ba07a4 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,5 @@ { - "presets": ["react", "es2015"], + "presets": [ "env", "react" ], "plugins": [ "transform-object-rest-spread", "transform-class-properties" diff --git a/.coveralls.yml b/.coveralls.yml new file mode 100644 index 0000000..388f87f --- /dev/null +++ b/.coveralls.yml @@ -0,0 +1 @@ +repo_token: jy8nWhrENkOhXTJhe2dHJ6T7ddk8wJE2L \ No newline at end of file diff --git a/.gitignore b/.gitignore index c87fe93..96d68e6 100644 --- a/.gitignore +++ b/.gitignore @@ -8,7 +8,6 @@ yarn.lock package-lock.json - # Numerous always-ignore extensions *.diff *.err diff --git a/.travis.yml b/.travis.yml index fd98430..264cec1 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,3 +10,4 @@ env: - ACTION="run dist" script: - npm $ACTION +- npm test && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js \ No newline at end of file diff --git a/README.md b/README.md index 3d20046..ed53aa0 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,751 @@ -# react-jsonschema-form-extras +[![Build Status](https://travis-ci.org/RxNT/react-jsonschema-form-extas.svg?branch=master)](https://travis-ci.org/RxNT/react-jsonschema-form-extras) +[![Coverage Status](https://coveralls.io/repos/github/RxNT/react-jsonschema-form-extras/badge.svg)](https://coveralls.io/github/RxNT/react-jsonschema-form-extras) +[![npm version](https://badge.fury.io/js/react-jsonschema-form-extras.svg)](https://badge.fury.io/js/react-jsonschema-form-extras) -## Usage -FormWithExtras is a wrapper for Mozilla's JSON Schema Form that adds extra useful components. +# Catalogue -Use this project as you would use Mozilla's JSON Schema Form (see their documentation), but to leverage the extra widgets just reference them in the ui:widget parameter. +This project provides light integration over established React components, +trying to keep configurations compatible with original project. +All configurations you can specify in original projects, can be reused here. -##List of widgets +- Composite array field (`ui:field` > `compositeArray`) +- Collapsible fields (`ui:field` > `collapsible`) +- Alternative input fields (`ui:field` > `altInput`) +- Typeahead, based on [react-bootstrap-typeahead](https://github.com/ericgio/react-bootstrap-typeahead) (`ui:field` > `typeahead`) +- Async Typeahead based on [react-bootstrap-typeahead](https://github.com/ericgio/react-bootstrap-typeahead) (`ui:field` > `asyncTypeahead`) +- RTE, based on [react-rte](https://github.com/sstur/react-rte) (`ui:field` > `rte`) +- Tables, based on [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table) (`ui:field` > `table`) -As of the current commit, these are not fully functional. The code is changing rapidly. +## Table of Contents -- TableWidget: Given a URL for AJAX requests, allows typeahead functionality in string fields. -https://github.com/ericgio/react-bootstrap-typeahead Any selections are added to the corresponding table. Table columns and rules can be defined via the widget's props. + - [Use](#use) + - [Composite array field (compositeArray)](#composite-array-field-compositearray) + - [Purpose](#purpose) + - [Use](#use) + - [Properties](#properties) + - [Collapsible fields (collapsible)](#collapsible-fields-collapsible) + - [Purpose](#purpose) + - [Use](#use) + - [Properties](#properties) + - [Examples](#examples) + - [Using specific legend in collapsible field.](#using-specific-legend-in-collapsible-field) + - [Properties](#properties) + - [Typeahead, based on react-bootstrap-typeahead (typeahead)](#typeahead-based-on-react-bootstrap-typeahead-typeahead) + - [Purpose](#purpose) + - [Use](#use) + - [Properties](#properties) + - [Label key](#label-key) + - [Mapping](#mapping) + - [Async Typeahead based on react-bootstrap-typeahead (asyncTypeahead)](#async-typeahead-based-on-react-bootstrap-typeahead-asynctypeahead) + - [Purpose](#purpose) + - [Use](#use) + - [Properties](#properties) + - [RTE, based on react-rte (rte)](#rte-based-on-react-rte-rte) + - [Purpose](#purpose) + - [Use](#use) + - [Properties](#properties) + - [Tables, based on react-bootstrap-table (table)](#tables-based-on-react-bootstrap-table-table) + - [Purpose](#purpose) + - [Use](#use) + - [Properties](#properties) + - [Columns order](#columns-order) + - [Cell dataFormat](#cell-dataformat) + - [Additional column actions](#additional-column-actions) + - [React Day Picker, based on react-day-picker (rdp)](#react-day-picker-based-on-react-day-picker-rdp) + - [Purpose](#purpose) + - [Use](#use) + - [Properties](#properties) + - [Contribute](#contribute) + - [Support](#support) + - [License](#license) -- TableWidget: A table widget with editable text fields, date fields, drop down menus, and deletable rows. +--- + +## Use + +This project uses internal react-jsonschema-form extension mechanism, through ui:field option in uiSchema. +The simplest example of using it out of the box, is like this: + +```js +import Form from "react-jsonschema-form"; +import fields from "react-jsonschema-form-extras"; + +ReactDOM.render( +
, + document.getElementById("app") +); +``` +[![Edit p3z45m8rpq](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/p3z45m8rpq) + +If you want multiple fields: + +```js +import Form from "react-jsonschema-form"; +import { TypeaheadField } from "react-jsonschema-form-extras/lib/TypeaheadField"; +import ReactDatePicker from "react-jsonschema-form-extras/lib/ReactDatePicker"; + +ReactDOM.render( + , + document.getElementById("app") +); +``` +[![Edit wnyl7n07zk](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/wnyl7n07zk) + +## Composite array field (`compositeArray`) + +### Purpose + +This is a simple UI pattern, where you want to separate entering a new value to the array and working with existing values. + +### Use + +The simplest `uiSchema` configuration would be: + +```json +{ + "ui:field": "compositeArray", + "inputField": "typeahead", + "arrayField": "table", + "typeahead": { }, + "table": { } +} +``` + +This means the final field will be presented in 2 parts + - initial input with `typeahead` field + - array field in `table` form + +You can specify configurations for each field representation independently. + +### Properties + +There are only 2 properties needed for it to work + - `inputField` field from form registry to use as a new field input presentation + - `arrayField` field from form registry to use to present existing array values + +## Collapsible fields (`collapsible`) + +### Purpose + +Collapsible helps you to hide content, that might take up too much space on the screen an expand it if user wishes. + +### Use + +The simplest `uiSchema` configuration would be: + +```json +{ + "ui:field": "collapsible", + "collapse": { + "field": "table" + } +} +``` + +This is a hidden `table` field configuration, which will be presented as collapsed `schema` `title` name. + +### Properties + +You can customize presentation of collapsible field, with "collapse" object in uiSchema +- `field` `string` an actual hidden field to use +- `collapsed` `boolean` - indicating initial state (default `true`) +- `icon` `object` icons configuration in `enabled` and `disabled` state + - `enabled` `string` icon, when the field is shown (default `glyphicon glyphicon-chevron-down`) + - `disabled` `string` icon, when field is hidden (default `glyphicon glyphicon-chevron-right`) + - `add` `string` icon, to use in place of an add sign (default `glyphicon glyphicon-plus-sign`) +- `separate` `boolean` enable