Material UI 4

BREAKING CHANGES

Support for material-ui@4

New Editor: Trumbowyg

Breaking Changes

https://alex-d.github.io/Trumbowyg

Due facebookarchive/draft-js#1895 we decided to move away from draftjs for now. The props of FieldHtml didn't change only the global config.

New Config Example:

import ConfigBuilder from '@react-form-fields/material-ui/config/builder';
import { setConfig } from '@react-form-fields/material-ui/config';

const config = new ConfigBuilder()
   .setTrumbowygLocale(() => import('trumbowyg/dist/langs/pt_br.min.js'))
   .setTrumbowygPlugins(() => [
          import('trumbowyg/dist/plugins/history/trumbowyg.history.min.js'),
          import('trumbowyg/dist/plugins/cleanpaste/trumbowyg.cleanpaste.min.js')
   ])
  .setTrumbowygConfig({ // <~ any Trumbowyg options
        btns: [['strong', 'em',], ['insertImage']],
        autogrow: true
  })
 .build()

setConfig(config);

Default Plugins Loaded:

• history
• cleanpaste

Lang pt-br already load the right locale

Partial Draftjs Android Support

See: facebookarchive/draft-js#2035

New Autocomplete component

Breaking changes

Change autocomplete component from react-autosuggest to react-select. Only the specific props will be affect.

<FieldAutocomplete
   label='Autocomplete'
   helperText='If you try to '
   name='autocomplete'
   value={model.autocompleteId}
   validation='required'
   options={[{ value: 1, label: 'Auto 1' }, { value: 2, label: 'Auto 2' }, { value: 3, label: 'Auto 3' }]}
   onChange={(v => this.setState({ model: { ...model, autocompleteId: v } }))}
 />

Bug Fixes + Improvement

Bug fixes

• Html editor: Placeholder still shows when creating list:
  

• Html editor: Output is different from editor:
  

Improvements

• Color: better color value indicator:
  

Update Core

See: https://github.com/react-form-fields/core/releases/tag/v1.5.0

Breaking Changes

-- none --

HTML editor and bugfixes

• New HTML Editor:

<FieldHtml
  label='Descrição'
  value={model.description}
  onChange={html => this.setState({ html }) }
  validation='required'
/>

You can pass toolbar as a prop or set through config.

// App.jsx
<FormFieldsContext config={{
    editorLocale: 'pt',
    editorToolbar: {
      inline: { options: ['bold', 'italic', 'underline'] },
      list: { options: ['unordered', 'ordered'] }
    },
    validation: validationMessage
  }}>
 // ... your app
</FormFieldsContext>

• New config props: editorLocale and editorToolbar.

Bugfixes

• Select now return null value when emptyOption is selected.
• Select now allow to set an option with value 0.
• All helperText now allow pass elements as value.

Update material-ui-pickers

Breaking change

Add FormFieldsContext in your App (Root) component, see more in config section.

See Config Section

Update Core and Typings

No Breaking changes

Use Select instead of TextField

Breaking Changes

Use Select instead of TextField, all props must be equals to Select from material ui and the prop emptyOption a string with the message of the empty option.