├── src
    ├── sass
    │   ├── clean
    │   │   ├── _mixins.sass
    │   │   ├── Formol.sass
    │   │   ├── fields
    │   │   │   └── SwitchButton.sass
    │   │   ├── _base.sass
    │   │   ├── _variables.sass
    │   │   └── Field.sass
    │   ├── default.sass
    │   ├── clean.sass
    │   └── default
    │   │   ├── fields
    │   │       ├── Preview.sass
    │   │       ├── TextAreaField.sass
    │   │       ├── NumberField.sass
    │   │       ├── ColorField.sass
    │   │       ├── PasswordField.sass
    │   │       ├── RangeField.sass
    │   │       ├── PasswordStrengthField.sass
    │   │       ├── SwitchButton.sass
    │   │       ├── BooleanField.sass
    │   │       └── FileField.sass
    │   │   ├── async
    │   │       ├── CalendarField.sass
    │   │       ├── SelectMenuField.sass
    │   │       └── HTMLField.sass
    │   │   ├── Inliner.sass
    │   │   ├── _variables.sass
    │   │   ├── _mixins.sass
    │   │   ├── _base.sass
    │   │   ├── Formol.sass
    │   │   └── Field.sass
    ├── fields
    │   ├── Datefield.css
    │   ├── CalendarField.jsx
    │   ├── SelectMenuField.jsx
    │   ├── PasswordStrengthField.jsx
    │   ├── FileField.jsx
    │   ├── HTMLField.jsx
    │   ├── UrlField.jsx
    │   ├── EmailField.jsx
    │   ├── MonthField.jsx
    │   ├── TimeField.jsx
    │   ├── WeekField.jsx
    │   ├── DatetimeLocalField.jsx
    │   ├── DateNativeField.jsx
    │   ├── TelField.jsx
    │   ├── RadioField.jsx
    │   ├── TextareaField.jsx
    │   ├── CheckboxField.jsx
    │   ├── ColorField.jsx
    │   ├── NumberField.jsx
    │   ├── InputField.jsx
    │   ├── BooleanField.jsx
    │   ├── SwitchField.jsx
    │   ├── RadioSetField.jsx
    │   ├── RangeField.jsx
    │   ├── CheckboxSetField.jsx
    │   ├── PasswordField.jsx
    │   ├── SelectField.jsx
    │   ├── MoneyField.jsx
    │   └── DateField.jsx
    ├── Inliner.jsx
    ├── FormolContext.jsx
    ├── __mocks__
    │   └── react-text-mask.jsx
    ├── ConditionalContext.jsx
    ├── utils
    │   ├── Preview.jsx
    │   ├── choicesAdapter.jsx
    │   ├── SwitchButton.jsx
    │   ├── index.js
    │   ├── multipleAdapter.jsx
    │   ├── Async.jsx
    │   ├── object.js
    │   ├── FieldSet.jsx
    │   ├── memoizedChoices.jsx
    │   ├── MenuList.jsx
    │   └── fieldPropsAdapter.jsx
    ├── async
    │   ├── CalendarFieldLocales.js
    │   ├── HTMLField.jsx
    │   ├── PasswordStrengthField.jsx
    │   ├── CalendarField.jsx
    │   ├── SelectMenuField.jsx
    │   └── FileField.jsx
    ├── index.js
    ├── i18n
    │   ├── fr.js
    │   └── en.js
    ├── ext
    │   └── unrest.js
    ├── Conditional.jsx
    └── Field.jsx
├── test
    ├── styleMock.js
    ├── setup.js
    ├── samples
    │   ├── pixel.png.base64.js
    │   ├── blank.pdf.base64.js
    │   └── molecule.svg.base64.js
    ├── helpers.js
    ├── formol
    │   ├── util.test.jsx
    │   ├── types
    │   │   ├── text.test.jsx
    │   │   ├── switch.test.jsx
    │   │   ├── area.test.jsx
    │   │   ├── radio.test.jsx
    │   │   ├── checkbox.test.jsx
    │   │   ├── dates.test.jsx
    │   │   ├── radio-set.test.jsx
    │   │   ├── password.test.jsx
    │   │   ├── checkbox-set.test.jsx
    │   │   ├── color.test.jsx
    │   │   ├── datepicker.test.jsx
    │   │   ├── tel.test.jsx
    │   │   ├── email.test.jsx
    │   │   ├── number.test.jsx
    │   │   ├── html.test.jsx
    │   │   └── select.test.jsx
    │   └── conditional.test.jsx
    └── utils.object.test.js
├── demos
    ├── public
    │   ├── favicon.png
    │   ├── github.svg
    │   ├── formol-simple-logo.svg
    │   ├── formol-baseline-logo.svg
    │   └── index.html
    ├── src
    │   ├── components
    │   │   └── VersionHeader.jsx
    │   ├── index.jsx
    │   ├── pages
    │   │   ├── AllFieldsDemo.jsx
    │   │   └── FeaturesDemo.jsx
    │   └── demos.sass
    └── deploy.sh
├── .gitignore
├── assets
    ├── favicon.png
    ├── github.svg
    └── formol-simple-logo.svg
├── jsconfig.json
├── .prettierrc
├── babel.config.js
├── jest.config.js
├── LICENSE
├── webpack.config.demos.js
├── webpack.config.babel.js
└── package.json


/src/sass/clean/_mixins.sass:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/test/styleMock.js:
--------------------------------------------------------------------------------
1 | module.exports = {}
2 | 


--------------------------------------------------------------------------------
/demos/public/favicon.png:
--------------------------------------------------------------------------------
1 | ../../assets/favicon.png


--------------------------------------------------------------------------------
/demos/public/github.svg:
--------------------------------------------------------------------------------
1 | ../../assets/github.svg


--------------------------------------------------------------------------------
/demos/public/formol-simple-logo.svg:
--------------------------------------------------------------------------------
1 | ../../assets/formol-simple-logo.svg


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | lib/
3 | coverage/
4 | .cache/
5 | demos/dist
6 | 


--------------------------------------------------------------------------------
/demos/public/formol-baseline-logo.svg:
--------------------------------------------------------------------------------
1 | ../../assets/formol-baseline-logo.svg


--------------------------------------------------------------------------------
/src/sass/default.sass:
--------------------------------------------------------------------------------
1 | @import default/variables
2 | @import default/base
3 | 


--------------------------------------------------------------------------------
/src/fields/Datefield.css:
--------------------------------------------------------------------------------
1 | .react-datepicker-wrapper {
2 |   width: 100%;
3 | }
4 | 


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kozea/formol/HEAD/assets/favicon.png


--------------------------------------------------------------------------------
/src/sass/clean/Formol.sass:
--------------------------------------------------------------------------------
1 | // form
2 | .Formol_Formol
3 |   font-family: sans-serif
4 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "experimentalDecorators": true,
4 |     "allowJs": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/src/sass/clean.sass:
--------------------------------------------------------------------------------
1 | @import clean/variables
2 | @import default/variables
3 | @import default/base
4 | @import clean/base
5 | 


--------------------------------------------------------------------------------
/src/sass/clean/fields/SwitchButton.sass:
--------------------------------------------------------------------------------
1 | .Formol_Field--type-switch
2 |   input[type='checkbox'] + label
3 |     border: solid 2px
4 | 


--------------------------------------------------------------------------------
/src/sass/default/fields/Preview.sass:
--------------------------------------------------------------------------------
1 | .Formol_Preview
2 |   display: block
3 |   margin: 0 auto
4 |   max-height: 15em
5 |   max-width: 100%
6 | 


--------------------------------------------------------------------------------
/src/sass/clean/_base.sass:
--------------------------------------------------------------------------------
1 | // formol general style
2 | @import Field
3 | @import Formol
4 | 
5 | // specific fields
6 | @import fields/SwitchButton
7 | 


--------------------------------------------------------------------------------
/test/setup.js:
--------------------------------------------------------------------------------
1 | import { configure } from 'enzyme'
2 | import Adapter from 'enzyme-adapter-react-16'
3 | 
4 | configure({ adapter: new Adapter() })
5 | 


--------------------------------------------------------------------------------
/src/sass/default/fields/TextAreaField.sass:
--------------------------------------------------------------------------------
1 | .Formol_Field--type-area
2 |   .Formol_Field
3 |     &__element
4 |       max-width: 100%
5 |       width: $formol-big-field-size
6 | 


--------------------------------------------------------------------------------
/test/samples/pixel.png.base64.js:
--------------------------------------------------------------------------------
1 | export default 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJgggw=' // eslint-disable-line max-len
2 | 


--------------------------------------------------------------------------------
/src/fields/CalendarField.jsx:
--------------------------------------------------------------------------------
1 | import Async from '../utils/Async'
2 | 
3 | export default Async(
4 |   () => import(/* webpackChunkName: "CalendarField" */ '../async/CalendarField')
5 | )
6 | 


--------------------------------------------------------------------------------
/src/sass/default/fields/NumberField.sass:
--------------------------------------------------------------------------------
1 | .Formol_Field--readOnly
2 |   &.Formol_Field--type-number
3 |     .Formol_Field
4 |       &__element[type=number]
5 |         -moz-appearance: textfield
6 | 


--------------------------------------------------------------------------------
/src/fields/SelectMenuField.jsx:
--------------------------------------------------------------------------------
1 | import Async from '../utils/Async'
2 | 
3 | export default Async(
4 |   () =>
5 |     import(/* webpackChunkName: "SelectMenuField" */ '../async/SelectMenuField')
6 | )
7 | 


--------------------------------------------------------------------------------
/test/helpers.js:
--------------------------------------------------------------------------------
1 | export const forCondition = async (condition, wrapper) => {
2 |   while (!condition()) {
3 |     await new Promise((resolve) => setTimeout(resolve, 1))
4 |     wrapper.update()
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "printWidth": 80,
 3 |   "tabWidth": 2,
 4 |   "useTabs": false,
 5 |   "semi": false,
 6 |   "singleQuote": true,
 7 |   "trailingComma": "es5",
 8 |   "bracketSpacing": true,
 9 |   "bracketSameLine": false
10 | }
11 | 


--------------------------------------------------------------------------------
/src/fields/PasswordStrengthField.jsx:
--------------------------------------------------------------------------------
 1 | import Async from '../utils/Async'
 2 | 
 3 | export default Async(
 4 |   () =>
 5 |     import(
 6 |       /* webpackChunkName: "PasswordField" */
 7 |       '../async/PasswordStrengthField'
 8 |     )
 9 | )
10 | 


--------------------------------------------------------------------------------
/src/fields/FileField.jsx:
--------------------------------------------------------------------------------
1 | import Async from '../utils/Async'
2 | 
3 | const FileField = Async(
4 |   () => import(/* webpackChunkName: "FileField" */ '../async/FileField')
5 | )
6 | FileField.formolFieldLabelElement = 'div'
7 | export default FileField
8 | 


--------------------------------------------------------------------------------
/test/samples/blank.pdf.base64.js:
--------------------------------------------------------------------------------
1 | export default 'JVBERi0xLgoxIDAgb2JqPDwvUGFnZXMgMiAwIFI+PmVuZG9iagoyIDAgb2JqPDwvS2lkc1szIDAgUl0vQ291bnQgMT4+ZW5kb2JqCjMgMCBvYmo8PC9QYXJlbnQgMiAwIFI+PmVuZG9iagp0cmFpbGVyIDw8L1Jvb3QgMSAwIFI+Pg==' // eslint-disable-line max-len
2 | 


--------------------------------------------------------------------------------
/src/fields/HTMLField.jsx:
--------------------------------------------------------------------------------
 1 | import Async from '../utils/Async'
 2 | 
 3 | const HTMLField = Async(
 4 |   () => import(/* webpackChunkName: "HTMLField" */ '../async/HTMLField')
 5 | )
 6 | 
 7 | HTMLField.formolFieldLabelElement = 'div'
 8 | 
 9 | export default HTMLField
10 | 


--------------------------------------------------------------------------------
/src/sass/clean/_variables.sass:
--------------------------------------------------------------------------------
1 | // colors
2 | $formol-color: #222f3e
3 | $formol-color-action: #341f97
4 | $formol-color-inactive: rgba($formol-color-action, .35)
5 | $formol-background-color: rgba($formol-color, .01)
6 | 
7 | // fields margin & padding
8 | $formol-field-margin: 2em
9 | 


--------------------------------------------------------------------------------
/src/Inliner.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from './utils'
 4 | 
 5 | @block
 6 | export default class Inliner extends React.PureComponent {
 7 |   render(b) {
 8 |     const { children } = this.props
 9 |     return <div className={b}>{children}</div>
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/sass/default/async/CalendarField.sass:
--------------------------------------------------------------------------------
 1 | .Formol_Field--type-calendar
 2 |   .Formol_CalendarField
 3 |     @extend .Formol_Field__element
 4 | 
 5 |     &__field
 6 |       +hidden-field__element
 7 | 
 8 | 
 9 | .Formol_Field--readOnly
10 |   .Formol_CalendarField
11 |     +read-only-field__element
12 | 


--------------------------------------------------------------------------------
/src/sass/default/Inliner.sass:
--------------------------------------------------------------------------------
 1 | @use 'sass:math'
 2 | 
 3 | .Formol_Inliner
 4 |   margin: math.div(-$formol-field-margin, 2) 0
 5 | 
 6 |   .Formol_Field
 7 |     display: inline-block
 8 |     margin: math.div($formol-field-margin, 2) 0
 9 |     vertical-align: top
10 | 
11 |     &:not(:last-of-type)
12 |       margin-right: 1em
13 | 


--------------------------------------------------------------------------------
/src/sass/default/fields/ColorField.sass:
--------------------------------------------------------------------------------
 1 | .Formol_Field--type-color
 2 |   .Formol_Field
 3 |     &__element
 4 |       box-sizing: content-box
 5 |       cursor: pointer
 6 |       height: 1.5em
 7 |       // padding: .5em
 8 |       width: 1.5em
 9 | 
10 |   &.Formol_Field--disabled
11 |     .Formol_Field
12 |       &__element
13 |         cursor: default
14 | 


--------------------------------------------------------------------------------
/src/fields/UrlField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import InputField from './InputField'
 5 | 
 6 | @block
 7 | export default class UrlField extends React.PureComponent {
 8 |   render(b) {
 9 |     const { className, ...props } = this.props
10 |     return <InputField className={b.mix(className)} {...props} />
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/demos/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Formol Demos</title>
 7 |     <link rel="icon" type="image/png" href="favicon.png">
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/fields/EmailField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import InputField from './InputField'
 5 | 
 6 | @block
 7 | export default class EmailField extends React.PureComponent {
 8 |   render(b) {
 9 |     const { className, ...props } = this.props
10 |     return <InputField className={b.mix(className)} {...props} />
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/fields/MonthField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import InputField from './InputField'
 5 | 
 6 | @block
 7 | export default class MonthField extends React.PureComponent {
 8 |   render(b) {
 9 |     const { className, ...props } = this.props
10 |     return <InputField className={b.mix(className)} {...props} />
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/fields/TimeField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import InputField from './InputField'
 5 | 
 6 | @block
 7 | export default class TimeField extends React.PureComponent {
 8 |   render(b) {
 9 |     const { className, ...props } = this.props
10 |     return <InputField className={b.mix(className)} {...props} />
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/fields/WeekField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import InputField from './InputField'
 5 | 
 6 | @block
 7 | export default class WeekField extends React.PureComponent {
 8 |   render(b) {
 9 |     const { className, ...props } = this.props
10 |     return <InputField className={b.mix(className)} {...props} />
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/fields/DatetimeLocalField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import InputField from './InputField'
 5 | 
 6 | @block
 7 | export default class DatetimeLocalField extends React.PureComponent {
 8 |   render(b) {
 9 |     const { className, ...props } = this.props
10 |     return <InputField className={b.mix(className)} {...props} />
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/fields/DateNativeField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import InputField from './InputField'
 5 | 
 6 | @block
 7 | export default class DateNativeField extends React.PureComponent {
 8 |   render(b) {
 9 |     const { className, ...props } = this.props
10 |     return <InputField className={b.mix(className)} {...props} type="date" />
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/FormolContext.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export const FormolContext = React.createContext({})
 4 | 
 5 | export default function FormolContextWrapper(Component) {
 6 |   // eslint-disable-next-line react/display-name
 7 |   return (props) => (
 8 |     <FormolContext.Consumer>
 9 |       {(context) => <Component {...props} context={context} />}
10 |     </FormolContext.Consumer>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/src/__mocks__/react-text-mask.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | // https://github.com/text-mask/text-mask/issues/427#issuecomment-479945031
 4 | const mock = React.forwardRef((props, ref) => {
 5 |   const { render, ...otherProps } = props
 6 | 
 7 |   return render ? (
 8 |     render(ref, { ...otherProps })
 9 |   ) : (
10 |     <input ref={ref} {...otherProps} />
11 |   )
12 | })
13 | 
14 | export default mock
15 | 


--------------------------------------------------------------------------------
/src/fields/TelField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import InputField from './InputField'
 5 | 
 6 | @block
 7 | export default class TelField extends React.PureComponent {
 8 |   render(b) {
 9 |     const { className, pattern, ...props } = this.props
10 |     props.pattern = pattern || props.i18n.tel.pattern.source
11 |     return <InputField className={b.mix(className)} {...props} />
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/ConditionalContext.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export const ConditionalContext = React.createContext({})
 4 | 
 5 | export default function ConditionalContextWrapper(Component) {
 6 |   // eslint-disable-next-line react/display-name
 7 |   return (props) => (
 8 |     <ConditionalContext.Consumer>
 9 |       {(conditionalContext) => (
10 |         <Component {...props} conditionalContext={conditionalContext} />
11 |       )}
12 |     </ConditionalContext.Consumer>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (api) {
 2 |   api.cache(true)
 3 | 
 4 |   const presets = ['@babel/preset-react', '@babel/preset-env']
 5 |   const plugins = [
 6 |     'dynamic-import-node',
 7 |     '@babel/plugin-proposal-object-rest-spread',
 8 |     ['@babel/plugin-proposal-decorators', { legacy: true }],
 9 |     ['@babel/plugin-proposal-class-properties', { loose: true }],
10 |     '@babel/plugin-transform-runtime',
11 |   ]
12 | 
13 |   return {
14 |     presets,
15 |     plugins,
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/fields/RadioField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import BooleanField from './BooleanField'
 5 | 
 6 | @block
 7 | export default class RadioField extends React.PureComponent {
 8 |   static defaultFieldProps = {
 9 |     classNameModifiers: (_, value) => ({
10 |       label: { on: value },
11 |     }),
12 |   }
13 |   render(b) {
14 |     const { className, ...props } = this.props
15 |     return <BooleanField className={b.mix(className)} {...props} />
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/fields/TextareaField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | 
 5 | @block
 6 | export default class TextAreaField extends React.PureComponent {
 7 |   render(b) {
 8 |     const { type, i18n, className, elementRef, onChange, ...props } = this.props
 9 |     return (
10 |       <textarea
11 |         ref={elementRef}
12 |         className={b.mix(className)}
13 |         onChange={(e) => onChange(e.target.value)}
14 |         {...props}
15 |       />
16 |     )
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleFileExtensions: ['js', 'jsx', 'mjs', 'json'],
 3 |   modulePaths: ['<rootDir>/src'],
 4 |   moduleDirectories: ['node_modules'],
 5 |   moduleNameMapper: {
 6 |     '\\.(css|sass)$': '<rootDir>/test/styleMock.js',
 7 |   },
 8 |   setupFiles: ['<rootDir>/test/setup.js'],
 9 |   collectCoverageFrom: ['src/**/*.{js,jsx}', '!src/i18n/*'],
10 |   testURL: 'http://localhost/',
11 |   transformIgnorePatterns: [
12 |     'node_modules/(?!(react-syntax-highlighter|date-fns))',
13 |   ],
14 | }
15 | 


--------------------------------------------------------------------------------
/src/fields/CheckboxField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import BooleanField from './BooleanField'
 5 | 
 6 | @block
 7 | export default class CheckboxField extends React.PureComponent {
 8 |   static defaultFieldProps = {
 9 |     classNameModifiers: (_, value) => ({
10 |       label: { on: value },
11 |     }),
12 |   }
13 | 
14 |   render(b) {
15 |     const { className, ...props } = this.props
16 |     return <BooleanField className={b.mix(className)} {...props} />
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/fields/ColorField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import InputField from './InputField'
 5 | 
 6 | @block
 7 | export default class ColorField extends React.PureComponent {
 8 |   static defaultFieldProps = {
 9 |     validator: () => (v) =>
10 |       v && !v.match(/#[0-9bA-Fa-f]{6}/) && `${v} is not a valid color`,
11 |   }
12 |   render(b) {
13 |     const { className, ...props } = this.props
14 |     return <InputField className={b.mix(className)} {...props} />
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/fields/NumberField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import InputField from './InputField'
 5 | 
 6 | @block
 7 | export default class NumberField extends React.PureComponent {
 8 |   render(b) {
 9 |     const { className, onChange, ...props } = this.props
10 |     return (
11 |       <InputField
12 |         className={b.mix(className)}
13 |         onChange={(v) => onChange(isNaN(parseFloat(v)) ? null : parseFloat(v))}
14 |         {...props}
15 |       />
16 |     )
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/demos/src/components/VersionHeader.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const VersionHeader = () => (
 4 |   <div className="demo-header">
 5 |     <div className="logo-version-container">
 6 |       <img
 7 |         src="formol-baseline-logo.svg"
 8 |         alt="Formol logo with baseline"
 9 |         className="logo-baseline"
10 |       />
11 |       <span className="version">4.2.1</span>
12 |     </div>
13 |     <h4>Formol is a full featured object edition form framework for React.</h4>
14 |   </div>
15 | )
16 | 
17 | export default VersionHeader
18 | 


--------------------------------------------------------------------------------
/src/fields/InputField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | 
 5 | @block
 6 | export default class InputField extends React.PureComponent {
 7 |   static defaultProps = { type: 'text' }
 8 | 
 9 |   render(b) {
10 |     const { i18n, className, elementRef, onChange, ...props } = this.props
11 |     return (
12 |       <input
13 |         ref={elementRef}
14 |         className={b.mix(className)}
15 |         onChange={(e) => onChange(e.target.value)}
16 |         {...props}
17 |       />
18 |     )
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/sass/default/_variables.sass:
--------------------------------------------------------------------------------
 1 | // colors
 2 | $formol-color: #596275 !default
 3 | $formol-color-action: #546de5 !default
 4 | $formol-color-inactive: rgba($formol-color, .65) !default
 5 | $formol-color-error: #e66767 !default
 6 | $formol-background-color: transparent !default
 7 | 
 8 | 
 9 | // font-size
10 | $formol-font-size: 1em !default
11 | 
12 | // fields size
13 | $formol-big-field-size: 50em !default
14 | $formol-medium-field-size: 25em !default
15 | 
16 | // fields margin & padding
17 | $formol-field-margin: 1.5em !default
18 | $formol-field-padding: .75em !default
19 | 


--------------------------------------------------------------------------------
/src/sass/default/_mixins.sass:
--------------------------------------------------------------------------------
 1 | =hidden-input
 2 |   bottom: 0
 3 |   height: 0
 4 |   left: 0
 5 |   margin: auto !important
 6 |   opacity: 0
 7 |   position: absolute
 8 |   right: 0
 9 |   width: 0
10 |   z-index: -1
11 | 
12 | 
13 | =hidden-field__element
14 |   border: 0
15 |   margin: 0
16 |   padding: 0
17 | 
18 | 
19 | =read-only-field__element
20 |   background-color: transparent
21 |   border-color: transparent
22 |   color: $formol-color
23 |   margin: 0
24 |   padding: $formol-field-padding 0
25 | 
26 | 
27 | =field-colors($color)
28 |   color: $color
29 | 
30 |   .Formol_Field__label
31 |     border-color: $color
32 | 


--------------------------------------------------------------------------------
/src/fields/BooleanField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | 
 5 | @block
 6 | export default class BooleanField extends React.PureComponent {
 7 |   render(b) {
 8 |     const { value, i18n, readOnly, className, elementRef, onChange, ...props } =
 9 |       this.props
10 |     if (readOnly) {
11 |       props.disabled = true
12 |     }
13 |     return (
14 |       <input
15 |         ref={elementRef}
16 |         className={b.mix(className)}
17 |         checked={value}
18 |         onChange={(e) => onChange(e.target.checked)}
19 |         {...props}
20 |       />
21 |     )
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/sass/default/_base.sass:
--------------------------------------------------------------------------------
 1 | @import mixins
 2 | // @import variables
 3 | 
 4 | // formol general style
 5 | @import Field
 6 | @import Formol
 7 | @import Inliner
 8 | 
 9 | // specific fields from external libs
10 | @import async/CalendarField
11 | @import async/HTMLField
12 | @import async/SelectMenuField
13 | 
14 | // specific fields
15 | @import fields/BooleanField
16 | @import fields/ColorField
17 | @import fields/FileField
18 | @import fields/NumberField
19 | @import fields/PasswordField
20 | @import fields/PasswordStrengthField
21 | @import fields/Preview
22 | @import fields/RangeField
23 | @import fields/SwitchButton
24 | @import fields/TextAreaField
25 | 


--------------------------------------------------------------------------------
/src/sass/clean/Field.sass:
--------------------------------------------------------------------------------
 1 | // @import variables
 2 | 
 3 | 
 4 | // field group
 5 | .Formol_Field
 6 | 
 7 |   // states
 8 |   &:hover, &--modified, &--focus, &--error
 9 |     .Formol_Field__title::after
10 |       opacity: 1
11 | 
12 |   &__title
13 |     &::after
14 |       color: inherit
15 |       content: '•'
16 |       display: inline-block
17 |       font-size: 1.75em
18 |       line-height: 0
19 |       margin-left: .25em
20 |       opacity: .15
21 |       transition: opacity .2s
22 |       vertical-align: middle
23 | 
24 |   &__element
25 |     border-width: 0
26 |     border-bottom-width: 2px
27 |     border-radius: 0
28 |     transition: background-color .2s, border-color .2s
29 | 


--------------------------------------------------------------------------------
/src/utils/Preview.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from './'
 4 | 
 5 | const b = block('Preview')
 6 | 
 7 | export default function Preview({ data, ext, mime }) {
 8 |   if (mime === 'image/svg+xml') {
 9 |     ext = 'svg'
10 |   } else {
11 |     ;[, ext] = mime.split('/')
12 |   }
13 |   data = `data:${mime};base64,${data}`
14 |   const type = ext.toLowerCase()
15 |   if (['pdf', 'svg'].includes(type)) {
16 |     return <object data={data} className={b.m({ type: 'pdf' })} />
17 |   }
18 |   if (['jpg', 'jpeg', 'png', 'gif', 'tiff'].includes(type)) {
19 |     return <img src={data} className={b.m({ type: 'image' })} alt={ext} />
20 |   }
21 |   return null
22 | }
23 | 


--------------------------------------------------------------------------------
/src/utils/choicesAdapter.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function choicesAdapter(WrappedComponent) {
 4 |   class ChoicesAdapter extends React.PureComponent {
 5 |     render() {
 6 |       const { choices, ...props } = this.props
 7 |       const normalizedChoices = Array.isArray(choices)
 8 |         ? choices.map((c) => (Array.isArray(c) ? c : [c, c]))
 9 |         : Object.entries(choices || {})
10 |       return <WrappedComponent choices={normalizedChoices} {...props} />
11 |     }
12 |   }
13 | 
14 |   ChoicesAdapter.defaultFieldProps = WrappedComponent.defaultFieldProps
15 |   ChoicesAdapter.formolFieldLabelElement =
16 |     WrappedComponent.formolFieldLabelElement
17 |   return ChoicesAdapter
18 | }
19 | 


--------------------------------------------------------------------------------
/src/fields/SwitchField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import SwitchButton from '../utils/SwitchButton'
 5 | 
 6 | @block
 7 | export default class SwitchField extends React.PureComponent {
 8 |   static defaultFieldProps = {
 9 |     classNameModifiers: (_, value) => ({
10 |       label: { on: value },
11 |     }),
12 |   }
13 | 
14 |   render(b) {
15 |     const { type, i18n, leftLabel, rightLabel, className, ...props } =
16 |       this.props
17 | 
18 |     return (
19 |       <SwitchButton
20 |         className={b.mix(className)}
21 |         label={leftLabel || i18n.no}
22 |         labelRight={rightLabel || i18n.yes}
23 |         {...props}
24 |       />
25 |     )
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/async/CalendarFieldLocales.js:
--------------------------------------------------------------------------------
 1 | import { format, toDate } from 'date-fns'
 2 | import { fr as localeFr } from 'date-fns/locale'
 3 | 
 4 | const getCalendarLocaleUtils = (locale, fdow = 0) => ({
 5 |   formatDay: (date) => format(toDate(date), 'PPPP', { locale }),
 6 |   formatMonthTitle: (date) => format(toDate(date), 'MMMM yyyy', { locale }),
 7 |   formatWeekdayLong: (day) => locale.localize.day(day, { width: 'wide' }),
 8 |   formatWeekdayShort: (day) =>
 9 |     locale.localize.day(day, { width: 'abbreviated' }).replace(/.$/, ''),
10 |   // Fix this when date-fns has a first day of week
11 |   getFirstDayOfWeek: () => fdow,
12 | })
13 | 
14 | export default {
15 |   fr: {
16 |     calendar: getCalendarLocaleUtils(localeFr),
17 |     date: localeFr,
18 |   },
19 | }
20 | 


--------------------------------------------------------------------------------
/src/utils/SwitchButton.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import BooleanField from '../fields/BooleanField'
 4 | import { block } from '../utils'
 5 | 
 6 | @block
 7 | export default class SwitchButton extends React.PureComponent {
 8 |   static defaultProps = {
 9 |     mode: 'switch',
10 |     name: Math.random(),
11 |   }
12 |   render(b) {
13 |     const { type, name, label, labelRight, mode, ...props } = this.props
14 |     return (
15 |       <div className={b.m({ mode })}>
16 |         {label && <label htmlFor={name}>{label}</label>}
17 |         <BooleanField id={name} name={name} type="checkbox" {...props} />
18 |         <label htmlFor={name} />
19 |         {labelRight && <label htmlFor={name}>{labelRight}</label>}
20 |       </div>
21 |     )
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/sass/default/async/SelectMenuField.sass:
--------------------------------------------------------------------------------
 1 | .Formol_Field--type-select-menu
 2 |   max-width: 100%
 3 |   width: $formol-medium-field-size
 4 | 
 5 |   .Formol_SelectMenuField
 6 |     @extend .Formol_Field__element
 7 |     box-shadow: none
 8 |     color: inherit
 9 |     padding: 0
10 |     position: relative
11 | 
12 |     &__hidden-input
13 |       +hidden-input
14 | 
15 |     &__control
16 |       border: 0
17 |       box-shadow: none
18 | 
19 |     &__menu
20 |       border: solid 1px $formol-color-action
21 |       box-shadow: none
22 | 
23 | .Formol_Field--readOnly
24 |   .Select-control
25 |     +read-only-field__element
26 | 
27 |   .Select-value
28 |     padding: 0 !important
29 | 
30 | 
31 |   .Select.is-disabled > .Select-control
32 |     background-color: transparent
33 | 


--------------------------------------------------------------------------------
/src/sass/default/Formol.sass:
--------------------------------------------------------------------------------
 1 | .Formol_Formol
 2 |   box-shadow: -1px 0 0 transparent
 3 |   box-sizing: border-box
 4 |   color: $formol-color
 5 |   padding-left: 0
 6 |   font-size: $formol-font-size
 7 |   transition: box-shadow 250ms 250ms, opacity 500ms ease-in, padding 250ms
 8 | 
 9 |   &--errors
10 |     box-shadow: -1px 0 0 $formol-color-error
11 |     padding-left: 1em
12 | 
13 |   &--loading
14 |     opacity: .5
15 | 
16 |   & &__submit, & &__cancel
17 |     cursor: pointer
18 |     font: inherit
19 | 
20 |     &:disabled
21 |       cursor: not-allowed
22 | 
23 |   & &__submit
24 |     margin-right: 1.5em
25 |     margin-top: 2em
26 | 
27 |   & &__cancel
28 |     background: 0
29 |     border: 0
30 |     font-size: $formol-font-size * .85
31 |     margin-bottom: $formol-field-margin * 2
32 |     padding: 0
33 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | import { blockMaker } from 'bemboo'
 2 | 
 3 | export const readAsBase64 = (file) =>
 4 |   new Promise((resolve, reject) => {
 5 |     if (!file) {
 6 |       return reject(new Error('No file was given'))
 7 |     }
 8 |     const reader = new FileReader()
 9 |     reader.onload = (e) => resolve(e.target.result)
10 |     reader.readAsDataURL(file)
11 |   })
12 | 
13 | export const fileSize = (size) => {
14 |   const i = Math.floor(Math.log(size) / Math.log(1024))
15 |   return `${(size / Math.pow(1024, i)).toFixed(2) * 1} ${
16 |     ['o', 'ko', 'Mo', 'Go', 'To', 'Po', 'Eo', 'Zo', 'Yo'][i]
17 |   }`
18 | }
19 | export const nameExt = (name) => name.match(/(.+?)(?:\.([^.]+))?$/).slice(1, 3)
20 | 
21 | export const block = blockMaker({ namespace: 'Formol_' })
22 | 
23 | export const noOp = () => {}
24 | 


--------------------------------------------------------------------------------
/src/sass/default/fields/PasswordField.sass:
--------------------------------------------------------------------------------
 1 | .Formol_PasswordField
 2 |   width: calc(100% - 1.75em)
 3 | 
 4 |   &__wrapper
 5 |     @extend .Formol_Field__element
 6 |     cursor: text
 7 |     max-width: 100%
 8 |     position: relative
 9 | 
10 |     .Formol_Field__element
11 |       +hidden-field__element
12 | 
13 |   &__eye
14 |     align-items: center
15 |     background-color: transparent
16 |     border: 0
17 |     cursor: pointer
18 |     display: flex
19 |     opacity: .75
20 |     padding: 0
21 |     position: absolute
22 |     right: .25em
23 |     transition: opacity .2s
24 |     transform: translateY(-50%)
25 |     top: 50%
26 |     z-index: 2
27 | 
28 |     svg
29 |       background-color: $formol-color-inactive
30 |       border-radius: 100%
31 |       padding: .45em
32 | 
33 |     &:hover
34 |       opacity: 1
35 | 


--------------------------------------------------------------------------------
/src/sass/default/fields/RangeField.sass:
--------------------------------------------------------------------------------
 1 | @use 'sass:math'
 2 | 
 3 | .Formol_Field--type-range
 4 |   .Formol_Field
 5 |     &--focus
 6 |       color: $formol-color-action
 7 | 
 8 |     &__element
 9 |       background-color: transparent
10 |       color: inherit
11 | 
12 | 
13 | .Formol_RangeField
14 |   align-items: center
15 |   display: flex
16 |   margin: $formol-field-margin 0 calc(#{$formol-field-margin} + 1.5em)
17 | 
18 |   &__range
19 |     border: 0
20 |     padding: 0
21 | 
22 |   &__value-wrapper
23 |     color: inherit
24 |     margin: 0 .5em
25 |     position: relative
26 |     transition: color .25s
27 | 
28 |   &__value
29 |     left: 0
30 |     text-align: center
31 |     top: 100%
32 |     width: 100%
33 |     position: absolute
34 | 
35 |   &__min, &__max
36 |     font-size: math.div($formol-font-size, 1.25)
37 | 


--------------------------------------------------------------------------------
/demos/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | set -e
 4 | 
 5 | if [[ -n $(git status --porcelain) ]]; then
 6 |   echo "There are uncommitted changes. Please commit or stash them before deploying."
 7 |   exit 1
 8 | fi
 9 | 
10 | yarn demos-build
11 | 
12 | TEMP_DIR=$(mktemp --directory)
13 | 
14 | cp demos/dist/* $TEMP_DIR
15 | cp assets/* $TEMP_DIR
16 | 
17 | git switch gh-pages
18 | git fetch origin gh-pages
19 | git reset --hard origin/gh-pages
20 | 
21 | cp $TEMP_DIR/* .
22 | 
23 | git add index.html demos.*.js demos.*.css
24 | git add *.svg *.png
25 | 
26 | if git diff-index --quiet HEAD --; then
27 |   echo "No changes to commit."
28 | else
29 |   git -c commit.gpgSign=false commit --no-verify --message="Deploy demos"
30 |   git push origin gh-pages
31 | fi
32 | 
33 | git clean --force
34 | git switch -
35 | 
36 | rm --recursive --force $TEMP_DIR
37 | 


--------------------------------------------------------------------------------
/src/sass/default/async/HTMLField.sass:
--------------------------------------------------------------------------------
 1 | .Formol_HTMLField
 2 |   @extend .Formol_Field__element
 3 |   cursor: text
 4 |   padding: 0
 5 |   position: relative
 6 |   width: $formol-big-field-size
 7 | 
 8 |   &__hidden-input
 9 |     +hidden-input
10 | 
11 |   .quill
12 |     border-color: inherit
13 | 
14 |     .ql-container
15 |       border-bottom-color: inherit
16 |       margin: 0
17 |       border: none
18 | 
19 |       .ql-editor
20 |         max-height: 50vh
21 |         min-height: 8em
22 |         overflow: auto
23 | 
24 |     .ql-toolbar
25 |       border-top: 0
26 |       border-left: 0
27 |       border-right: 0
28 |       border-bottom-color: inherit
29 | 
30 | 
31 |   img
32 |     max-width: 100%
33 | 
34 | 
35 | .Formol_Field--readOnly, .Formol_Field--disabled
36 |   .ql-editor
37 |       min-height: auto
38 | 
39 |   .ql-toolbar
40 |     display: none
41 | 


--------------------------------------------------------------------------------
/assets/github.svg:
--------------------------------------------------------------------------------
1 | <svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>


--------------------------------------------------------------------------------
/src/fields/RadioSetField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import choicesAdapter from '../utils/choicesAdapter'
 5 | import FieldSet from '../utils/FieldSet'
 6 | import memoizedChoices from '../utils/memoizedChoices'
 7 | 
 8 | @choicesAdapter
 9 | @memoizedChoices
10 | @block
11 | export default class RadioSetField extends React.PureComponent {
12 |   static formolFieldLabelElement = 'div'
13 |   static defaultFieldProps = {
14 |     multiple: () => false,
15 |   }
16 | 
17 |   render(b) {
18 |     const { type, i18n, onChange, readOnly, className, ...props } = this.props
19 |     if (readOnly) {
20 |       props.disabled = true
21 |     }
22 |     return (
23 |       <FieldSet
24 |         type="radio"
25 |         className={b.mix(className)}
26 |         isChecked={(choice, value) => choice === value}
27 |         onChange={(choice, value, checked) => checked && onChange(choice)}
28 |         {...props}
29 |       />
30 |     )
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/utils/multipleAdapter.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function multipleAdapter(WrappedComponent) {
 4 |   class MultipleAdapter extends React.PureComponent {
 5 |     render() {
 6 |       const { value, multiple, ...props } = this.props
 7 |       let normalizedValue = value
 8 |       if (!multiple && Array.isArray(value)) {
 9 |         normalizedValue = value.length ? value[0] : ''
10 |       }
11 |       if (multiple && !Array.isArray(value)) {
12 |         normalizedValue =
13 |           value !== null && value !== void 0 && value !== '' ? [value] : []
14 |       }
15 |       return (
16 |         <WrappedComponent
17 |           value={normalizedValue}
18 |           multiple={multiple}
19 |           {...props}
20 |         />
21 |       )
22 |     }
23 |   }
24 | 
25 |   MultipleAdapter.defaultFieldProps = WrappedComponent.defaultFieldProps
26 |   MultipleAdapter.formolFieldLabelElement =
27 |     WrappedComponent.formolFieldLabelElement
28 |   return MultipleAdapter
29 | }
30 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | // This is not optimal, we might need to find a better solution
 2 | export { default } from './Formol'
 3 | export { default as Field } from './Field'
 4 | export { default as Inliner } from './Inliner'
 5 | export { default as Conditional } from './Conditional'
 6 | export { default as FormolContextWrapper, FormolContext } from './FormolContext'
 7 | export {
 8 |   default as ConditionalContextWrapper,
 9 |   ConditionalContext,
10 | } from './ConditionalContext'
11 | 
12 | export { default as SwitchButton } from './utils/SwitchButton'
13 | export { default as choicesAdapter } from './utils/choicesAdapter'
14 | export { default as fieldPropsAdapter } from './utils/fieldPropsAdapter'
15 | export { default as FieldSet } from './utils/FieldSet'
16 | export { default as multipleAdapter } from './utils/multipleAdapter'
17 | export { default as memoizedChoices } from './utils/memoizedChoices'
18 | 
19 | export { default as unrest, NoRequestNeeded } from './ext/unrest'
20 | export {
21 |   nullishToEmptyString,
22 |   emptyStringToNull,
23 |   get,
24 |   set,
25 |   copy,
26 |   insert,
27 |   diff,
28 |   isModified,
29 | } from './utils/object'
30 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Florian Mounier
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/fields/RangeField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import NumberField from './NumberField'
 5 | 
 6 | @block
 7 | export default class RangeField extends React.PureComponent {
 8 |   static defaultProps = {
 9 |     min: 0,
10 |     max: 100,
11 |   }
12 | 
13 |   render(b) {
14 |     const { className, noLabels, min, max, value, ...props } = this.props
15 |     const range = (
16 |       <NumberField
17 |         className={b.e('range').mix(className)}
18 |         min={min}
19 |         max={max}
20 |         value={value}
21 |         {...props}
22 |       />
23 |     )
24 |     return (
25 |       <div className={b}>
26 |         {noLabels ? (
27 |           range
28 |         ) : (
29 |           <>
30 |             <div className={b.e('min')}>{min}</div>
31 |             <div className={b.e('value-wrapper')}>
32 |               {range}
33 |               <span className={b.e('value')}>
34 |                 {[null, void 0, ''].includes(value) ? '' : value}
35 |               </span>
36 |             </div>
37 |             <div className={b.e('max')}>{max}</div>
38 |           </>
39 |         )}
40 |       </div>
41 |     )
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/fields/CheckboxSetField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import choicesAdapter from '../utils/choicesAdapter'
 5 | import FieldSet from '../utils/FieldSet'
 6 | import memoizedChoices from '../utils/memoizedChoices'
 7 | import multipleAdapter from '../utils/multipleAdapter'
 8 | 
 9 | @multipleAdapter
10 | @choicesAdapter
11 | @memoizedChoices
12 | @block
13 | export default class CheckboxSetField extends React.PureComponent {
14 |   static formolFieldLabelElement = 'div'
15 |   static defaultProps = { value: [] }
16 |   static defaultFieldProps = {
17 |     multiple: () => true,
18 |   }
19 | 
20 |   render(b) {
21 |     const { i18n, type, className, onChange, readOnly, ...props } = this.props
22 |     if (readOnly) {
23 |       props.disabled = true
24 |     }
25 |     return (
26 |       <FieldSet
27 |         className={b.mix(className)}
28 |         isChecked={(choice, value) => value.includes(choice)}
29 |         onChange={(choice, value, checked) =>
30 |           onChange(
31 |             checked ? [...value, choice] : value.filter((val) => val !== choice)
32 |           )
33 |         }
34 |         type="checkbox"
35 |         {...props}
36 |       />
37 |     )
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/utils/Async.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default (resolve) =>
 4 |   class AsyncWrapper extends React.PureComponent {
 5 |     constructor(props) {
 6 |       super(props)
 7 |       this._promise = null
 8 |       this.state = {
 9 |         Component: null,
10 |         error: null,
11 |       }
12 |     }
13 | 
14 |     componentDidMount() {
15 |       this.unmounted = false
16 |       this._promise = this.resolve()
17 |     }
18 | 
19 |     componentWillUnmount() {
20 |       this.unmounted = true
21 |     }
22 | 
23 |     async resolve() {
24 |       try {
25 |         const module = await resolve()
26 |         const Component = module.default
27 |         AsyncWrapper.module = module
28 |         if (!this.unmounted) {
29 |           this.setState({ Component })
30 |         }
31 |       } catch (error) {
32 |         console.error(error)
33 |         if (!this.unmounted) {
34 |           this.setState({ error })
35 |         }
36 |       }
37 |     }
38 | 
39 |     render() {
40 |       const { Component, error } = this.state
41 |       if (error) {
42 |         return 'Error'
43 |       }
44 |       if (!Component) {
45 |         return 'Loading'
46 |       }
47 |       return <Component {...this.props} />
48 |     }
49 |   }
50 | 


--------------------------------------------------------------------------------
/src/sass/default/fields/PasswordStrengthField.sass:
--------------------------------------------------------------------------------
 1 | @use 'sass:math'
 2 | 
 3 | @mixin strength-meter($steps, $strengths)
 4 |   @for $i from 0 through $steps
 5 |       .Formol_PasswordStrengthField--score-#{$i} .Formol_PasswordStrengthField
 6 |         &__strength
 7 |           background-color: nth($strengths, $i + 1)
 8 |           width: percentage(.1 + $i * math.div(.9, $steps))
 9 | 
10 |         &__description
11 |           color: nth($strengths, $i + 1)
12 | 
13 | .Formol_PasswordStrengthField
14 |   &__description
15 |     font-size: $formol-font-size * .85
16 |     margin: .35em 0
17 |     transition: color 250ms
18 | 
19 |   &__strength
20 |     height: .15em
21 |     transition: background-color 250ms, width 250ms
22 | 
23 | 
24 |   &__default
25 |     $strengths: $formol-color-inactive, $formol-color-inactive, $formol-color, $formol-color, $formol-color-action, $formol-color-action
26 |     @include strength-meter(5, $strengths)
27 | 
28 |   &__basic
29 |     $basic-strengths: $formol-color-inactive, $formol-color, $formol-color-action
30 |     @include strength-meter(2, $basic-strengths)
31 | 
32 |   &--pristine .Formol_PasswordStrengthField
33 |     &__strength, &__description
34 |       visibility: hidden
35 | 
36 | .Formol_Field--readOnly .Formol_PasswordStrengthField
37 |   &__strength, &__description
38 |     display: none
39 | 


--------------------------------------------------------------------------------
/src/sass/default/fields/SwitchButton.sass:
--------------------------------------------------------------------------------
 1 | .Formol_Field--type-switch
 2 |   .Formol_Field__label
 3 |     > .Formol_Field__element
 4 |       background-color: transparent
 5 |       border: 0
 6 |       color: inherit
 7 |       margin: .75em 0
 8 |       padding: 0
 9 | 
10 |     &--on
11 |       color: $formol-color
12 | 
13 |       input[type='checkbox'] + label
14 |         &::after
15 |           color: $formol-color-action
16 | 
17 |   label
18 |     cursor: pointer
19 |     display: inline-block
20 | 
21 | 
22 |   // Switch
23 | .Formol_SwitchButton
24 |   position: relative
25 |   margin: 1em 0
26 | 
27 |   input[type='checkbox'] + label
28 |     @extend .Formol_Field__element
29 |     align-items: center
30 |     border-radius: 1em !important
31 |     color: inherit
32 |     display: inline-flex
33 |     flex-direction: row
34 |     height: 1.5em
35 |     margin: 0 .5em
36 |     padding: .25em
37 |     user-select: none
38 |     vertical-align: middle
39 |     width: 3em
40 | 
41 |     &::after
42 |       background-color: currentColor
43 |       border-radius: 1em
44 |       content: ''
45 |       display: block
46 |       height: 1em
47 |       transition: all .4s
48 |       width: 1em
49 | 
50 |   input[type='checkbox']:checked + label::after
51 |     margin-left: 1.4em
52 | 
53 | 
54 |   // Hide the default input checkbox
55 |   input[type='checkbox']
56 |     +hidden-input
57 | 


--------------------------------------------------------------------------------
/src/i18n/fr.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   // General
 3 |   yes: 'Oui',
 4 |   no: 'Non',
 5 |   submit: 'Envoyer',
 6 |   cancel: 'Annuler',
 7 |   required: 'Veuillez renseigner ce champ',
 8 |   unmodified: 'Aucun changement dans le formulaire',
 9 |   // CalendarField
10 |   calendar: {
11 |     dateFormat: 'dd/MM/yyyy',
12 |     datePattern: /^([0-2][0-9]|30|31)\/(0[0-9]|10|11|12)\/[0-9]{4}$/,
13 |     dateError: 'La date doit être au format jj/mm/aaaa',
14 |     locale: 'fr',
15 |   },
16 |   file: {
17 |     rejected: 'Veuillez sélectionner un fichier valide.',
18 |     rejectedMultiple: 'Certains de vos fichiers ne sont pas valides.',
19 |     noFile: 'Aucun fichier',
20 |     singleOnly: 'Veuillez sélectionner un seul fichier',
21 |   },
22 |   tel: {
23 |     pattern: /^(?:0|\(?\+33\)?\s?|0033\s?)[1-79](?:[.\-\s]?\d\d){4}$/,
24 |   },
25 |   html: {
26 |     placeholder: 'Entrez votre texte ici…',
27 |   },
28 |   passwordStrength: {
29 |     tooshort: 'trop court',
30 |     tooweak: 'très peu sécurisé',
31 |     weak: 'peu sécurisé',
32 |     average: 'passable',
33 |     strong: 'sécurisé',
34 |     stronger: 'très sécurisé',
35 |     error: 'Veuillez entrer un mot de passe plus sécurisé.',
36 |   },
37 |   money: {
38 |     unit: '€',
39 |     precision: 2,
40 |   },
41 |   selectMenu: {
42 |     noOptions: () => 'Aucun résultat',
43 |     loading: () => 'Chargement',
44 |     select: 'Sélectionner…',
45 |   },
46 | }
47 | 


--------------------------------------------------------------------------------
/src/i18n/en.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   // General
 3 |   yes: 'Yes',
 4 |   no: 'No',
 5 |   submit: 'Submit',
 6 |   cancel: 'Cancel',
 7 |   required: 'Please fill out this field',
 8 |   unmodified: 'No change in form',
 9 |   // CalendarField
10 |   calendar: {
11 |     dateFormat: 'MM/dd/yyyy',
12 |     datePattern: /^(0[0-9]|10|11|12)\/([0-2][0-9]|30|31)\/[0-9]{4}$/,
13 |     dateError: 'Date must match mm/dd/yyyy format',
14 |     locale: 'en',
15 |   },
16 |   file: {
17 |     rejected: 'Please select a valid file.',
18 |     rejectedMultiple: 'Some of your files are invalid.',
19 |     noFile: 'No file',
20 |     singleOnly: 'Please select only one file',
21 |   },
22 |   html: {
23 |     placeholder: 'Enter text here',
24 |   },
25 |   tel: {
26 |     /*
27 |      * pattern is validated with v flag
28 |      * https://stackoverflow.com/a/76287241
29 |      */
30 |     // eslint-disable-next-line no-useless-escape
31 |     pattern: /\d{3}[\-]\d{3}[\-]\d{4}/,
32 |   },
33 |   passwordStrength: {
34 |     tooshort: 'too short',
35 |     tooweak: 'too weak',
36 |     weak: 'weak',
37 |     average: 'average',
38 |     strong: 'strong',
39 |     stronger: 'stronger',
40 |     error: 'Please choose a more secure password.',
41 |   },
42 |   money: {
43 |     unit: '$',
44 |     precision: 2,
45 |   },
46 |   selectMenu: {
47 |     noOptions: () => 'No options',
48 |     loading: () => 'Loading',
49 |     select: 'Select…',
50 |   },
51 | }
52 | 


--------------------------------------------------------------------------------
/src/fields/PasswordField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { FaEye, FaEyeSlash } from 'react-icons/fa'
 3 | 
 4 | import { block } from '../utils'
 5 | import InputField from './InputField'
 6 | 
 7 | @block
 8 | export default class PasswordField extends React.PureComponent {
 9 |   constructor(props) {
10 |     super(props)
11 |     this.state = {
12 |       type: 'password',
13 |     }
14 |     this.handleBlur = this.handleBlur.bind(this)
15 |     this.handleVisibilityChange = this.handleVisibilityChange.bind(this)
16 |   }
17 | 
18 |   handleVisibilityChange() {
19 |     const { type } = this.state
20 |     this.setState({ type: type === 'password' ? 'text' : 'password' })
21 |   }
22 | 
23 |   handleBlur(e) {
24 |     const { onBlur } = this.props
25 |     this.setState({ type: 'password' })
26 |     return onBlur(e)
27 |   }
28 | 
29 |   render(b) {
30 |     const { className, onBlur, ...props } = this.props
31 |     const { type } = this.state
32 |     return (
33 |       <div className={b.e('wrapper')}>
34 |         <InputField
35 |           className={b.mix(className)}
36 |           onBlur={this.handleBlur}
37 |           {...props}
38 |           type={type}
39 |         />
40 |         <button
41 |           type="button"
42 |           className={b.e('eye')}
43 |           onClick={this.handleVisibilityChange}
44 |         >
45 |           {type === 'text' ? <FaEyeSlash /> : <FaEye />}
46 |         </button>
47 |       </div>
48 |     )
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/test/samples/molecule.svg.base64.js:
--------------------------------------------------------------------------------
1 | export default 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCA5MzMgODgyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHN0eWxlPSJmb250LXNpemU6MjM4LjcwMzY4OTU4cHg7Zm9udC1zdHlsZTpub3JtYWw7Zm9udC12YXJpYW50Om5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zdHJldGNoOm5vcm1hbDtsaW5lLWhlaWdodDoxMDAlO3dyaXRpbmctbW9kZTpsci10Yjt0ZXh0LWFuY2hvcjpzdGFydDtmaWxsOmJsYWNrO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxcHQ7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW9wYWNpdHk6MTtmb250LWZhbWlseTpBcmlhbCI+CiAgICA8dGV4dCB4PSIzNzEuMzkwMTQiIHk9IjIzMS43ODY1Ij5PPC90ZXh0PgogICAgPHRleHQgeD0iMzUuNzQxNTU0IiB5PSI4MjkuMjk0MzEiPkg8L3RleHQ+CiAgICA8dGV4dCB4PSI3MjYuNzMzNjQiIHk9IjgyOS4yOTQzMSI+SDwvdGV4dD4KICAgIDx0ZXh0IHg9IjM3OS4xMzQyMiIgeT0iNjI2LjU0NTA0Ij5DPC90ZXh0PgogIDwvZz4KICA8ZyBzdHlsZT0iZmlsbDpub25lO2ZpbGwtb3BhY2l0eTowLjc1O2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpibGFjaztzdHJva2Utd2lkdGg6MTU7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSI+CiAgICA8cGF0aCBkPSJNIDIzMC44Nzc2LDY3Ny44MjAwMSBMIDM2OS44OTY5Myw1OTcuNTU3MTYiIC8+CiAgICA8cGF0aCBkPSJNIDcwMy43NzcxNSw2NzcuODIwMDEgTCA1NjQuNzU3ODIsNTk3LjU1NzE2IiAvPgogICAgPHBhdGggZD0iTSA0MzYuNDg3MzIsMjU5Ljg0MjcxIEwgNDM2LjQ4NzMyLDQyNC4zMzk3OSIgLz4KICAgIDxwYXRoIGQ9Ik0gNDk3LjU2Mjk3LDI1OS44NDI3MSBMIDQ5Ny41NjI5Nyw0MjQuMzM5NzkiIC8+CiAgPC9nPgo8L3N2Zz4K' // eslint-disable-line max-len
2 | 


--------------------------------------------------------------------------------
/src/fields/SelectField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import choicesAdapter from '../utils/choicesAdapter'
 5 | import memoizedChoices from '../utils/memoizedChoices'
 6 | import multipleAdapter from '../utils/multipleAdapter'
 7 | 
 8 | @multipleAdapter
 9 | @choicesAdapter
10 | @memoizedChoices
11 | @block
12 | export default class SelectField extends React.PureComponent {
13 |   constructor(props) {
14 |     super(props)
15 |     this.handleChange = this.handleChange.bind(this)
16 |   }
17 | 
18 |   handleChange(e) {
19 |     const { multiple, onChange } = this.props
20 |     return onChange(
21 |       multiple
22 |         ? [...e.target.options].filter((o) => o.selected).map((o) => o.value)
23 |         : e.target.value
24 |     )
25 |   }
26 | 
27 |   render(b) {
28 |     const {
29 |       choices,
30 |       i18n,
31 |       readOnly,
32 |       className,
33 |       elementRef,
34 |       onChange,
35 |       ...props
36 |     } = this.props
37 |     if (readOnly) {
38 |       props.disabled = true
39 |     }
40 |     return (
41 |       <select
42 |         ref={elementRef}
43 |         className={b.mix(className)}
44 |         onChange={this.handleChange}
45 |         {...props}
46 |       >
47 |         {!props.multiple && choices.every(([k]) => k) && <option value="" />}
48 |         {choices.map(([label, key]) => (
49 |           <option key={key} value={key}>
50 |             {label}
51 |           </option>
52 |         ))}
53 |       </select>
54 |     )
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/ext/unrest.js:
--------------------------------------------------------------------------------
 1 | import { diff } from '../utils/object'
 2 | 
 3 | function NoRequestNeeded(message) {
 4 |   this.name = 'NoRequestNeeded'
 5 |   this.message = message
 6 |   this.stack = new Error().stack
 7 | }
 8 | NoRequestNeeded.prototype = new Error()
 9 | 
10 | export { NoRequestNeeded }
11 | 
12 | export default ({ pk, onCreate, onPatch, onValid, onError, onFail }) =>
13 |   async (transientItem, item, names) => {
14 |     let onSend, args
15 |     const pks = pk(item)
16 |     // If some pk values are undefined, consider that it's a create
17 |     const mode =
18 |       !Object.keys(pks).length || Object.values(pks).some((v) => v === void 0)
19 |         ? 'create'
20 |         : 'patch'
21 |     if (mode === 'create') {
22 |       onSend = onCreate
23 |       args = [transientItem]
24 |     } else {
25 |       onSend = onPatch
26 |       args = [pks, diff(transientItem, item, names)]
27 |     }
28 | 
29 |     let report
30 |     try {
31 |       report = await onSend(...args)
32 |     } catch (err) {
33 |       if (err instanceof NoRequestNeeded) {
34 |         return {}
35 |       }
36 |       onFail && onFail(err, mode)
37 |       return
38 |     }
39 | 
40 |     if (report.metadata.code === 202) {
41 |       // If it's invalid, errors should be reported
42 |       return report.metadata.errors[0].fields
43 |     }
44 |     if (report.metadata.code === 200) {
45 |       onValid && onValid(report, mode)
46 |       // If it's valid, errors should be removed
47 |       return {}
48 |     }
49 |     onError && onError(report, mode)
50 |   }
51 | 


--------------------------------------------------------------------------------
/src/utils/object.js:
--------------------------------------------------------------------------------
 1 | export const nullishToEmptyString = (v) => (v === null || v === void 0 ? '' : v)
 2 | 
 3 | export const emptyStringToNull = (v) => (v === '' ? null : v)
 4 | 
 5 | // Get a sub object value (ie. obj['a.b.0.key'])
 6 | export const get = (data, key) =>
 7 |   nullishToEmptyString(
 8 |     key.split('.').reduce((pointer, part) => pointer && pointer[part], data)
 9 |   )
10 | 
11 | // Set a sub object value (ie. obj['a.b.0.key'] = val)
12 | export const set = (data, key, value, noArray = false) =>
13 |   (key
14 |     .split('.')
15 |     .slice(0, -1)
16 |     .reduce(
17 |       (pointer, part, i) =>
18 |         pointer[part] === void 0
19 |           ? (pointer[part] = noArray
20 |               ? {}
21 |               : isNaN(key.split('.')[i + 1])
22 |                 ? {}
23 |                 : [])
24 |           : pointer[part],
25 |       data
26 |     )[key.split('.').slice(-1)[0]] = emptyStringToNull(value))
27 | 
28 | export const copy = (o, names) =>
29 |   names.reduce((copied, key) => {
30 |     set(copied, key, get(o, key))
31 |     return copied
32 |   }, {})
33 | 
34 | export const insert = (transientItem, name, value, names) => {
35 |   const o = copy(transientItem, names)
36 |   set(o, name, value)
37 |   return o
38 | }
39 | 
40 | export const diff = (newItem, oldItem, names) =>
41 |   names.reduce((o, key) => {
42 |     if (get(newItem, key) !== get(oldItem, key)) {
43 |       set(o, key, get(newItem, key), true)
44 |     }
45 |     return o
46 |   }, {})
47 | 
48 | export const isModified = (newItem, oldItem, names) =>
49 |   !!Object.keys(diff(newItem, oldItem, names)).length
50 | 


--------------------------------------------------------------------------------
/demos/src/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | 
 4 | import '../../src/sass/default.sass'
 5 | import './demos.sass'
 6 | 
 7 | import AllFieldsDemo from './pages/AllFieldsDemo'
 8 | import FeaturesDemo from './pages/FeaturesDemo'
 9 | 
10 | const App = () => {
11 |   const [currentDemo, setCurrentDemo] = useState('AllFieldsDemo')
12 | 
13 |   return (
14 |     <div className="app-container">
15 |       <nav className="navbar">
16 |         <img
17 |           src="formol-simple-logo.svg"
18 |           alt="Formol logo"
19 |           className="navbar-logo"
20 |         />
21 |         <div className="demo-selector">
22 |           <button
23 |             onClick={() => setCurrentDemo('AllFieldsDemo')}
24 |             className={currentDemo === 'AllFieldsDemo' ? 'active' : ''}
25 |           >
26 |             Fields
27 |           </button>
28 |           <button
29 |             onClick={() => setCurrentDemo('FeaturesDemo')}
30 |             className={currentDemo === 'FeaturesDemo' ? 'active' : ''}
31 |           >
32 |             Features
33 |           </button>
34 |         </div>
35 |         <a href="https://github.com/Kozea/formol" className="github-link">
36 |           <img src="github.svg" alt="GitHub icon" className="github-icon" />
37 |           GitHub
38 |         </a>
39 |       </nav>
40 | 
41 |       <div className="demo-container">
42 |         {currentDemo === 'AllFieldsDemo' ? <AllFieldsDemo /> : <FeaturesDemo />}
43 |       </div>
44 |     </div>
45 |   )
46 | }
47 | 
48 | ReactDOM.render(
49 |   <React.StrictMode>
50 |     <App />
51 |   </React.StrictMode>,
52 |   document.getElementById('root')
53 | )
54 | 
55 | export default App
56 | 


--------------------------------------------------------------------------------
/src/fields/MoneyField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { block } from '../utils'
 4 | import InputField from './InputField'
 5 | 
 6 | @block
 7 | export default class MoneyField extends React.PureComponent {
 8 |   static defaultFieldProps = {
 9 |     unit: ({ unit, context: { i18n } }) => (unit ? unit : i18n.money.unit),
10 |     normalizer:
11 |       ({ precision, context: { i18n } }) =>
12 |       (value) => {
13 |         precision =
14 |           !precision && precision !== 0 ? i18n.money.precision : precision
15 |         if (!value) {
16 |           return
17 |         }
18 |         if (value.includes('.') && ![...value].every((c) => '0.'.includes(c))) {
19 |           const decimalLength = value.split('.')[1].length
20 |           if (decimalLength > precision) {
21 |             value = value.slice(0, precision - decimalLength)
22 |           } else if (decimalLength < precision) {
23 |             value += '0'.repeat(precision - decimalLength)
24 |           }
25 |         }
26 |         return value
27 |       },
28 |   }
29 | 
30 |   render(b) {
31 |     const { className, precision, onChange, ...props } = this.props
32 |     const order =
33 |       !precision && precision !== 0 ? props.i18n.money.precision : precision
34 |     if (!props.min) {
35 |       props.min = 0
36 |     }
37 |     props.type = 'number'
38 |     return (
39 |       <InputField
40 |         className={b.mix(className)}
41 |         onChange={(value) =>
42 |           // Convert back exponential notation to classic number
43 |           onChange(
44 |             value && value.includes('e')
45 |               ? parseFloat(value).toFixed(order)
46 |               : value
47 |           )
48 |         }
49 |         step={order === 0 ? 1 : `0.${'0'.repeat(order - 1)}1`}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/utils/FieldSet.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import BooleanField from '../fields/BooleanField'
 4 | import { block } from '../utils'
 5 | 
 6 | @block
 7 | export default class FieldSet extends React.PureComponent {
 8 |   constructor(props) {
 9 |     super(props)
10 |     this.state = {
11 |       focused: null,
12 |     }
13 |   }
14 | 
15 |   render(b) {
16 |     const {
17 |       type,
18 |       isChecked,
19 |       value,
20 |       choices,
21 |       elementRef,
22 |       dangerousRawHTMLLabels,
23 |       onChange,
24 |       ...props
25 |     } = this.props
26 | 
27 |     const { focused } = this.state
28 | 
29 |     return (
30 |       <fieldset className={b} ref={elementRef}>
31 |         {choices.map(([choiceLabel, choice]) => (
32 |           <label
33 |             key={choice}
34 |             className={b
35 |               .e('label')
36 |               .m({ on: isChecked(choice, value), focus: focused === choice })}
37 |           >
38 |             <BooleanField
39 |               {...props}
40 |               type={type}
41 |               onFocus={() => {
42 |                 this.setState({ focused: choice })
43 |                 props.onFocus()
44 |               }}
45 |               onBlur={() => {
46 |                 this.setState({ focused: null })
47 |                 props.onBlur()
48 |               }}
49 |               value={isChecked(choice, value)}
50 |               onChange={(checked) => onChange(choice, value, checked)}
51 |             />
52 |             <span className={b.e('title')}>
53 |               {dangerousRawHTMLLabels ? (
54 |                 // eslint-disable-next-line react/no-danger
55 |                 <span dangerouslySetInnerHTML={{ __html: choiceLabel }} />
56 |               ) : (
57 |                 choiceLabel
58 |               )}
59 |             </span>
60 |           </label>
61 |         ))}
62 |       </fieldset>
63 |     )
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/sass/default/fields/BooleanField.sass:
--------------------------------------------------------------------------------
 1 | // boolean element
 2 | .Formol_Field--type-checkbox .Formol_Field, .Formol_Field--type-radio .Formol_Field, .Formol_Field--type-checkbox-set .Formol_FieldSet, .Formol_Field--type-radio-set .Formol_FieldSet
 3 |   &__label
 4 |     @extend .Formol_Field__element
 5 |     align-items: center
 6 |     color: $formol-color-inactive
 7 |     cursor: pointer
 8 |     display: inline-flex
 9 |     transition: color .2s, border-color .2s
10 | 
11 |     &--on, &--on:hover
12 |       color: $formol-color
13 | 
14 |   &__title
15 |     font-size: $formol-font-size
16 |     margin-left: .5em
17 |     order: 1
18 | 
19 | 
20 | // fieldset
21 | .Formol_Field--type-checkbox-set, .Formol_Field--type-radio-set
22 |   .Formol_FieldSet
23 |     border: 0
24 |     margin: .5em 0
25 |     padding: 0
26 | 
27 |     &__label
28 |       @extend .Formol_Field
29 | 
30 |       &--focus, &--focus:hover
31 |         color: $formol-color-action
32 | 
33 |   .Formol_FieldSet .Formol_FieldSet__label
34 |     margin: 0 calc(#{$formol-field-margin} / 2) calc(#{$formol-field-margin} / 2) 0
35 | 
36 | .Formol_BooleanField
37 |   accent-color: $formol-color-action
38 |   margin: 0
39 | 
40 | 
41 | 
42 | .Formol_Field--type-checkbox.Formol_Field--readOnly .Formol_Field, .Formol_Field--type-radio.Formol_Field--readOnly .Formol_Field, .Formol_Field--type-checkbox-set.Formol_Field--readOnly .Formol_FieldSet, .Formol_Field--type-radio-set.Formol_Field--readOnly .Formol_FieldSet
43 |   &__label
44 |     display: none
45 | 
46 |     &--on
47 |       +read-only-field__element
48 |       display: inline-flex
49 |       margin: 0 calc(#{$formol-field-margin} / 2) calc(#{$formol-field-margin} / 2) 0
50 | 
51 | 
52 | 
53 | .Formol_Field--type-checkbox.Formol_Field--disabled .Formol_Field, .Formol_Field--type-radio.Formol_Field--disabled .Formol_Field, .Formol_Field--type-checkbox-set.Formol_Field--disabled .Formol_FieldSet, .Formol_Field--type-radio-set.Formol_Field--disabled .Formol_FieldSet
54 |   &__label
55 |     cursor: default
56 | 


--------------------------------------------------------------------------------
/test/formol/util.test.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { mount } from 'enzyme'
 3 | 
 4 | import { noOp, readAsBase64 } from '../../src/utils'
 5 | import Async from '../../src/utils/Async'
 6 | import Preview from '../../src/utils/Preview'
 7 | 
 8 | describe('Preview', () => {
 9 |   it('returns nothing if type is unknown', () => {
10 |     const wrapper = mount(<Preview data="test" ext="txt" mime="text/plain" />)
11 |     expect(wrapper.children()).toHaveLength(0)
12 |   })
13 | })
14 | describe('Async', () => {
15 |   it('raises an error in case of module load error', async () => {
16 |     // // Prevent console.error from cluttering the output
17 |     jest.spyOn(console, 'error')
18 |     global.console.error.mockImplementation(() => {})
19 | 
20 |     const BrokenAsync = Async(() => import('./unexisting/file.js'))
21 | 
22 |     const wrapper = mount(<BrokenAsync />)
23 | 
24 |     const asyncWrapper = () => wrapper.find('AsyncWrapper')
25 |     expect(asyncWrapper().text()).toEqual('Loading')
26 |     await asyncWrapper().instance()._promise
27 |     wrapper.update()
28 |     expect(asyncWrapper().text()).toEqual('Error')
29 | 
30 |     global.console.error.mockRestore()
31 |   })
32 |   it('does not crash on error when unmounted', async () => {
33 |     // // Prevent console.error from cluttering the output
34 |     jest.spyOn(console, 'error')
35 |     global.console.error.mockImplementation(() => {})
36 | 
37 |     const BrokenAsync = Async(() => import('./unexisting/file.js'))
38 | 
39 |     const wrapper = mount(<BrokenAsync />)
40 | 
41 |     const asyncWrapper = () => wrapper.find('AsyncWrapper')
42 |     expect(asyncWrapper().text()).toEqual('Loading')
43 |     const promise = asyncWrapper().instance()._promise
44 |     wrapper.unmount()
45 |     await promise
46 | 
47 |     global.console.error.mockRestore()
48 |   })
49 | })
50 | 
51 | describe('readAsBase64', () => {
52 |   it('errors on empty file', () =>
53 |     expect(readAsBase64()).rejects.toEqual(new Error('No file was given')))
54 | })
55 | 
56 | describe('noOp', () => {
57 |   it('does nothing', () => expect(noOp()).toBeUndefined())
58 | })
59 | 


--------------------------------------------------------------------------------
/src/Conditional.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import deepEqual from 'fast-deep-equal'
 3 | 
 4 | import { ConditionalContext } from './ConditionalContext'
 5 | import FormolContextWrapper from './FormolContext'
 6 | 
 7 | @FormolContextWrapper
 8 | export default class Conditional extends React.PureComponent {
 9 |   static contextFromProps(
10 |     { children, show, context: { transientItem }, ...callableProps },
11 |     { conditionalContext }
12 |   ) {
13 |     return {
14 |       show: !show || show(transientItem),
15 |       conditionalContext: {
16 |         ...conditionalContext,
17 |         propsOverride: Object.entries(callableProps).reduce(
18 |           (calledProps, [key, prop]) => {
19 |             calledProps[key] = prop(transientItem)
20 |             return calledProps
21 |           },
22 |           {}
23 |         ),
24 |       },
25 |       currentProps: { show, ...callableProps },
26 |       transientItem,
27 |     }
28 |   }
29 | 
30 |   constructor(props) {
31 |     super(props)
32 |     this.names = []
33 |     this.state = Conditional.contextFromProps(props, {
34 |       conditionalContext: {
35 |         register: this.register.bind(this),
36 |         unregister: this.unregister.bind(this),
37 |       },
38 |     })
39 |   }
40 | 
41 |   static getDerivedStateFromProps(nextProps, prevState) {
42 |     const { children, context, ...nextCallableProps } = nextProps
43 |     const { transientItem } = context
44 |     if (
45 |       !deepEqual(transientItem, prevState.transientItem) ||
46 |       !deepEqual(nextCallableProps, prevState.currentProps)
47 |     ) {
48 |       return Conditional.contextFromProps(nextProps, prevState)
49 |     }
50 |     return null
51 |   }
52 | 
53 |   register(name) {
54 |     this.names.push(name)
55 |   }
56 | 
57 |   unregister(name) {
58 |     this.names.splice(this.names.indexOf(name), 1)
59 |   }
60 | 
61 |   render() {
62 |     const { children } = this.props
63 |     const { show, conditionalContext } = this.state
64 |     if (!show) {
65 |       return null
66 |     }
67 | 
68 |     return (
69 |       <ConditionalContext.Provider value={conditionalContext}>
70 |         {children}
71 |       </ConditionalContext.Provider>
72 |     )
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/webpack.config.demos.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 5 | 
 6 | module.exports = {
 7 |   mode: 'development',
 8 |   entry: './demos/src/index.jsx',
 9 |   output: {
10 |     path: path.resolve(__dirname, 'demos', 'dist'),
11 |     filename: 'demos.[contenthash].js',
12 |   },
13 |   module: {
14 |     rules: [
15 |       {
16 |         test: /\.(js|jsx)$/,
17 |         exclude: /node_modules/,
18 |         use: {
19 |           loader: 'babel-loader',
20 |           options: {
21 |             presets: ['@babel/preset-react', '@babel/preset-env'],
22 |             plugins: [
23 |               '@babel/plugin-syntax-dynamic-import',
24 |               '@babel/plugin-proposal-object-rest-spread',
25 |               ['@babel/plugin-proposal-decorators', { legacy: true }],
26 |               'add-react-static-displayname',
27 |               ['@babel/plugin-proposal-class-properties', { loose: true }],
28 |               '@babel/plugin-transform-runtime',
29 |             ],
30 |           },
31 |         },
32 |       },
33 |       {
34 |         test: /\.css$/,
35 |         use: [MiniCssExtractPlugin.loader, 'css-loader'],
36 |       },
37 |       {
38 |         test: /\.sass$/,
39 |         use: [
40 |           MiniCssExtractPlugin.loader,
41 |           'css-loader',
42 |           {
43 |             loader: 'sass-loader',
44 |             options: {
45 |               sassOptions: {
46 |                 includePaths: [path.join(__dirname, 'src')],
47 |               },
48 |             },
49 |           },
50 |         ],
51 |       },
52 |     ],
53 |   },
54 |   plugins: [
55 |     new MiniCssExtractPlugin({ filename: 'demos.[contenthash].css' }),
56 |     new HtmlWebpackPlugin({
57 |       template: './demos/public/index.html',
58 |       filename: 'index.html',
59 |     }),
60 |   ],
61 |   devServer: {
62 |     static: {
63 |       directory: path.join(__dirname, 'demos', 'public'),
64 |     },
65 |     compress: true,
66 |     port: 9000,
67 |   },
68 |   resolve: {
69 |     extensions: ['.js', '.jsx'],
70 |     alias: {
71 |       formol: path.resolve(__dirname, './src'),
72 |     },
73 |   },
74 | }
75 | 


--------------------------------------------------------------------------------
/src/fields/DateField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Datepicker from 'react-datepicker'
 3 | import 'react-datepicker/dist/react-datepicker.css'
 4 | import { format, parse } from 'date-fns'
 5 | import { fr, enUS } from 'date-fns/locale'
 6 | import MaskedInput from 'react-text-mask'
 7 | 
 8 | import { block } from '../utils'
 9 | 
10 | import './Datefield.css'
11 | 
12 | @block
13 | export default class DateField extends React.PureComponent {
14 |   componentDidMount() {
15 |     const { readOnly, disabled, elementRef } = this.props
16 |     if (!(readOnly || disabled)) {
17 |       elementRef.current = this.datepicker.customInput
18 |     }
19 |   }
20 |   componentWillUnmount() {
21 |     const { elementRef } = this.props
22 |     elementRef.current = null
23 |   }
24 |   render(b) {
25 |     const {
26 |       value,
27 |       onBlur,
28 |       onChange,
29 |       onFocus,
30 |       i18n,
31 |       readOnly,
32 |       required,
33 |       name,
34 |       placeholder,
35 |       disabled,
36 |       format: userFormat,
37 |       className,
38 |       ...datepickerProps
39 |     } = this.props
40 |     const restOfProps = { onBlur, onFocus, readOnly, required, name, disabled }
41 |     const locales = { fr, en: enUS }
42 |     const locale = locales[i18n.calendar.locale]
43 |     const dateFormat = userFormat || i18n.calendar.dateFormat
44 |     const isoDateFormat = 'yyyy-MM-dd'
45 | 
46 |     return (
47 |       <Datepicker
48 |         ref={(ref) => (this.datepicker = ref)}
49 |         selected={value ? parse(value, isoDateFormat, new Date()) : null}
50 |         onChange={(date) => {
51 |           this.setState({ date })
52 |           onChange(date ? format(date, isoDateFormat) : '')
53 |         }}
54 |         isClearable={!(disabled || readOnly)}
55 |         locale={locale}
56 |         dateFormat={dateFormat}
57 |         className={b.mix('Formol_InputField').mix(className).s}
58 |         shouldCloseOnSelect
59 |         showMonthDropdown
60 |         showYearDropdown
61 |         dropdownMode="select"
62 |         placeholderText={placeholder || dateFormat}
63 |         {...restOfProps}
64 |         {...datepickerProps}
65 |         customInput={
66 |           <MaskedInput
67 |             type="text"
68 |             mask={[/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]}
69 |           />
70 |         }
71 |       />
72 |     )
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/test/formol/types/text.test.jsx:
--------------------------------------------------------------------------------
 1 | import { mount } from 'enzyme'
 2 | import React from 'react'
 3 | 
 4 | import Formol, { Field } from '../../../src'
 5 | 
 6 | describe('Text field', () => {
 7 |   it('handles changes', async () => {
 8 |     const onSubmit = jest.fn()
 9 |     const wrapper = mount(
10 |       <Formol onSubmit={onSubmit} item={{ text: 'foo' }}>
11 |         <Field type="text">Text</Field>
12 |       </Formol>
13 |     )
14 |     const input = () => wrapper.find('Field').find('input').first()
15 |     const submit = () => wrapper.find('.Formol_Formol__submit')
16 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
17 | 
18 |     expect(submit().props().disabled).toBeTruthy()
19 |     expect(cancel().props().disabled).toBeTruthy()
20 |     expect(input().props().type).toEqual('text')
21 |     expect(input().props().value).toEqual('foo')
22 | 
23 |     await input().simulate('focus')
24 |     await input().simulate('change', { target: { value: 'foo bar' } })
25 |     await input().simulate('blur')
26 | 
27 |     expect(input().props().value).toEqual('foo bar')
28 |     expect(submit().props().disabled).toBeFalsy()
29 |     expect(cancel().props().disabled).toBeFalsy()
30 | 
31 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
32 | 
33 |     await submit().simulate('submit')
34 | 
35 |     expect(onSubmit).toHaveBeenCalledWith(
36 |       { text: 'foo bar' },
37 |       { text: 'foo' },
38 |       ['text'],
39 |       true
40 |     )
41 |     expect(input().props().value).toEqual('foo bar')
42 |   })
43 |   it('cancels changes', async () => {
44 |     const onSubmit = jest.fn()
45 |     const wrapper = mount(
46 |       <Formol onSubmit={onSubmit} item={{ text: 'foo' }}>
47 |         <Field type="text">Text</Field>
48 |       </Formol>
49 |     )
50 |     const input = () => wrapper.find('Field').find('input').first()
51 |     const submit = () => wrapper.find('.Formol_Formol__submit')
52 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
53 | 
54 |     expect(submit().props().disabled).toBeTruthy()
55 |     expect(cancel().props().disabled).toBeTruthy()
56 |     expect(input().props().value).toEqual('foo')
57 | 
58 |     await input().simulate('focus')
59 |     await input().simulate('change', { target: { value: 'foo bar' } })
60 |     await input().simulate('blur')
61 | 
62 |     expect(input().props().value).toEqual('foo bar')
63 |     expect(submit().props().disabled).toBeFalsy()
64 |     expect(cancel().props().disabled).toBeFalsy()
65 | 
66 |     await cancel().simulate('click')
67 | 
68 |     expect(input().props().value).toEqual('foo')
69 |   })
70 | })
71 | 


--------------------------------------------------------------------------------
/src/sass/default/fields/FileField.sass:
--------------------------------------------------------------------------------
  1 | .Formol_Field--type-file
  2 |   max-width: 100%
  3 |   width: $formol-big-field-size
  4 | 
  5 | 
  6 | .Formol_FileField
  7 |   @extend .Formol_Field__element
  8 |   border-style: dashed
  9 |   color: inherit
 10 |   padding: 0
 11 |   position: relative
 12 |   width: 100%
 13 | 
 14 |   &__hidden-input
 15 |     +hidden-input
 16 | 
 17 | 
 18 |   &__dropzone
 19 |     > input[type="file"]
 20 |       // This is an important hack to avoid the :
 21 |       // "An invalid form control with name="..."
 22 |       // is not focusable." error at validation
 23 |       display: block !important
 24 |       +hidden-input
 25 | 
 26 |   &__placeholder
 27 |     align-items: flex-start
 28 |     cursor: pointer
 29 |     display: flex
 30 |     flex-wrap: wrap
 31 |     transition: color .2s
 32 |     width: 100%
 33 | 
 34 |     > svg
 35 |       display: block
 36 |       font-size: $formol-font-size * 2
 37 |       margin: 1em auto .1em
 38 |       width: 100%
 39 | 
 40 |     > span
 41 |       display: block
 42 |       font-size: $formol-font-size * .85
 43 |       margin: 0 auto 3em
 44 | 
 45 | 
 46 |   &__previews
 47 |     align-items: flex-start
 48 |     display: flex
 49 |     flex-wrap: wrap
 50 | 
 51 |   &__preview
 52 |     border: solid 1px
 53 |     color: $formol-color
 54 |     margin: 1em
 55 |     min-width: 8em
 56 |     max-width: 10em
 57 |     position: relative
 58 | 
 59 |     img
 60 |       max-width: 100%
 61 | 
 62 |     &-caption
 63 |       box-sizing: border-box
 64 |       border-top: solid 1px
 65 |       font-size: $formol-font-size * .75
 66 |       padding: .5em
 67 | 
 68 |     &-name, &-size, &-type
 69 |       display: block
 70 |       margin: .25rem .5rem
 71 | 
 72 |     &-name
 73 |       line-height: 1.5
 74 |       max-height: calc(1em * 1.5)
 75 |       overflow: hidden
 76 |       text-overflow: ellipsis
 77 |       transition: max-height .25s
 78 |       width: calc(100% - 1rem)
 79 | 
 80 |       &:hover
 81 |         max-height: 10em
 82 | 
 83 |     &--error
 84 |       color: $formol-color-error
 85 | 
 86 | 
 87 |   &__close
 88 |     border: solid 1px
 89 |     cursor: pointer
 90 |     font-size: 0
 91 |     background-color: #fff
 92 |     padding: 0
 93 |     position: absolute
 94 |     right: -1px
 95 |     top: -1px
 96 |     transition: background-color .25s
 97 | 
 98 |     svg
 99 |       font-size: 1rem
100 |       margin: .5em
101 | 
102 | 
103 |   &__image-delete
104 |     min-height: 3em
105 | 
106 | 
107 | .Formol_Field--readOnly
108 |   .Formol_FileField__preview
109 |     margin-left: 0
110 |     margin-top: 0
111 | 


--------------------------------------------------------------------------------
/test/formol/types/switch.test.jsx:
--------------------------------------------------------------------------------
 1 | import { mount } from 'enzyme'
 2 | import React from 'react'
 3 | 
 4 | import Formol, { Field } from '../../../src'
 5 | 
 6 | describe('Switch field', () => {
 7 |   it('handles changes', async () => {
 8 |     const onSubmit = jest.fn()
 9 |     const wrapper = mount(
10 |       <Formol onSubmit={onSubmit} item={{ switch: false }}>
11 |         <Field type="switch">Switch</Field>
12 |       </Formol>
13 |     )
14 |     const input = () => wrapper.find('Field').find('input').first()
15 |     const submit = () => wrapper.find('.Formol_Formol__submit')
16 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
17 | 
18 |     expect(submit().props().disabled).toBeTruthy()
19 |     expect(cancel().props().disabled).toBeTruthy()
20 |     expect(input().props().type).toEqual('checkbox')
21 |     expect(input().props().checked).toEqual(false)
22 | 
23 |     await input().simulate('focus')
24 |     await input().simulate('change', { target: { checked: true } })
25 |     await input().simulate('blur')
26 | 
27 |     expect(input().props().checked).toEqual(true)
28 |     expect(submit().props().disabled).toBeFalsy()
29 |     expect(cancel().props().disabled).toBeFalsy()
30 | 
31 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
32 | 
33 |     await submit().simulate('submit')
34 | 
35 |     expect(onSubmit).toHaveBeenCalledWith(
36 |       { switch: true },
37 |       { switch: false },
38 |       ['switch'],
39 |       true
40 |     )
41 |     expect(input().props().checked).toEqual(true)
42 |   })
43 |   it('cancels changes', async () => {
44 |     const onSubmit = jest.fn()
45 |     const wrapper = mount(
46 |       <Formol onSubmit={onSubmit} item={{ switch: false }}>
47 |         <Field type="switch">Switch</Field>
48 |       </Formol>
49 |     )
50 |     const input = () => wrapper.find('Field').find('input').first()
51 |     const submit = () => wrapper.find('.Formol_Formol__submit')
52 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
53 | 
54 |     expect(submit().props().disabled).toBeTruthy()
55 |     expect(cancel().props().disabled).toBeTruthy()
56 |     expect(input().props().checked).toEqual(false)
57 | 
58 |     await input().simulate('focus')
59 |     await input().simulate('change', { target: { checked: true } })
60 |     await input().simulate('blur')
61 | 
62 |     expect(input().props().checked).toEqual(true)
63 |     expect(submit().props().disabled).toBeFalsy()
64 |     expect(cancel().props().disabled).toBeFalsy()
65 | 
66 |     await cancel().simulate('click')
67 | 
68 |     expect(input().props().checked).toEqual(false)
69 |   })
70 | })
71 | 


--------------------------------------------------------------------------------
/test/formol/types/area.test.jsx:
--------------------------------------------------------------------------------
 1 | import { mount } from 'enzyme'
 2 | import React from 'react'
 3 | 
 4 | import Formol, { Field } from '../../../src'
 5 | 
 6 | describe('Textarea field', () => {
 7 |   it('handles changes', async () => {
 8 |     const onSubmit = jest.fn()
 9 |     const wrapper = mount(
10 |       <Formol onSubmit={onSubmit} item={{ area: 'foo\nbar' }}>
11 |         <Field type="area">Area</Field>
12 |       </Formol>
13 |     )
14 |     const input = () => wrapper.find('Field').find('textarea').first()
15 |     const submit = () => wrapper.find('.Formol_Formol__submit')
16 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
17 | 
18 |     expect(submit().props().disabled).toBeTruthy()
19 |     expect(cancel().props().disabled).toBeTruthy()
20 |     expect(input().props().value).toEqual('foo\nbar')
21 | 
22 |     await input().simulate('focus')
23 |     await input().simulate('change', { target: { value: 'foo\nbar\nbaz' } })
24 |     await input().simulate('blur')
25 | 
26 |     expect(input().props().value).toEqual('foo\nbar\nbaz')
27 |     expect(submit().props().disabled).toBeFalsy()
28 |     expect(cancel().props().disabled).toBeFalsy()
29 | 
30 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
31 | 
32 |     await submit().simulate('submit')
33 | 
34 |     expect(onSubmit).toHaveBeenCalledWith(
35 |       { area: 'foo\nbar\nbaz' },
36 |       { area: 'foo\nbar' },
37 |       ['area'],
38 |       true
39 |     )
40 |     expect(input().props().value).toEqual('foo\nbar\nbaz')
41 |   })
42 |   it('cancels changes', async () => {
43 |     const onSubmit = jest.fn()
44 |     const wrapper = mount(
45 |       <Formol onSubmit={onSubmit} item={{ area: 'foo\nbar' }}>
46 |         <Field type="area">Area</Field>
47 |       </Formol>
48 |     )
49 |     const input = () => wrapper.find('Field').find('textarea').first()
50 |     const submit = () => wrapper.find('.Formol_Formol__submit')
51 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
52 | 
53 |     expect(submit().props().disabled).toBeTruthy()
54 |     expect(cancel().props().disabled).toBeTruthy()
55 |     expect(input().props().value).toEqual('foo\nbar')
56 | 
57 |     await input().simulate('focus')
58 |     await input().simulate('change', { target: { value: 'foo\nbar\nbaz' } })
59 |     await input().simulate('blur')
60 | 
61 |     expect(input().props().value).toEqual('foo\nbar\nbaz')
62 |     expect(submit().props().disabled).toBeFalsy()
63 |     expect(cancel().props().disabled).toBeFalsy()
64 | 
65 |     await cancel().simulate('click')
66 | 
67 |     expect(input().props().value).toEqual('foo\nbar')
68 |   })
69 | })
70 | 


--------------------------------------------------------------------------------
/assets/formol-simple-logo.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="244" height="30" viewBox="0 0 244 30">
 2 |   <defs>
 3 |     <clipPath id="clip-formol-simple-logo-without-margins">
 4 |       <rect width="244" height="30"/>
 5 |     </clipPath>
 6 |   </defs>
 7 |   <g id="formol-simple-logo-without-margins" clip-path="url(#clip-formol-simple-logo-without-margins)">
 8 |     <g id="Groupe_16" data-name="Groupe 16" transform="translate(-27.493 -27.493)">
 9 |       <path id="Tracé_32" data-name="Tracé 32" d="M0,28.492V.02H26.25V5.744H5.787v5.619H22.266v5.766H5.787V28.471H0Z" transform="translate(28.493 28.515)" fill="#190e4f"/>
10 |       <path id="Tracé_33" data-name="Tracé 33" d="M20.673,28.5a5.418,5.418,0,0,1-2.872-.776,5.678,5.678,0,0,1-2.055-2.055A5.559,5.559,0,0,1,14.97,22.8V5.713a5.418,5.418,0,0,1,.776-2.872A5.844,5.844,0,0,1,17.8.786,5.559,5.559,0,0,1,20.673.01H37.76a5.324,5.324,0,0,1,2.83.776A6.082,6.082,0,0,1,42.666,2.84a5.382,5.382,0,0,1,.8,2.872V22.8a5.435,5.435,0,0,1-.8,2.872,5.9,5.9,0,0,1-2.076,2.055,5.324,5.324,0,0,1-2.83.776H20.673Zm.252-5.745H37.446s.147,0,.168-.063a.238.238,0,0,0,.063-.168V6.006s0-.147-.063-.168a.238.238,0,0,0-.168-.063H20.924s-.147,0-.168.063a.238.238,0,0,0-.063.168V22.528s0,.147.063.168a.238.238,0,0,0,.168.063Z" transform="translate(44.909 28.504)" fill="#190e4f"/>
11 |       <path id="Tracé_34" data-name="Tracé 34" d="M32.051,28.47V.04H54.778a5.418,5.418,0,0,1,2.872.776,5.963,5.963,0,0,1,2.076,2.076,5.416,5.416,0,0,1,.8,2.851v7.506a5.343,5.343,0,0,1-.8,2.83,5.9,5.9,0,0,1-2.076,2.055,5.366,5.366,0,0,1-2.872.776l-17.046.042V28.47h-5.7Zm5.933-15.305H54.506s.147,0,.168-.063a.19.19,0,0,0,.063-.147v-7s0-.147-.063-.168a.238.238,0,0,0-.168-.063H37.984s-.147,0-.168.063a.238.238,0,0,0-.063.168v7a.2.2,0,0,0,.063.147A.238.238,0,0,0,37.984,13.165ZM54.443,28.47,46.014,18.427h7.464l6.961,8.261V28.47H54.422Z" transform="translate(63.618 28.537)" fill="#190e4f"/>
12 |       <path id="Tracé_35" data-name="Tracé 35" d="M49.02,28.492V.02h6.059l9.959,11.909L74.955.02h6.08V28.492H75.312V8.511L65.038,20.8,54.723,8.532V28.45h-5.7Z" transform="translate(82.249 28.515)" fill="#190e4f"/>
13 |       <path id="Tracé_36" data-name="Tracé 36" d="M102,28.514V0h5.7V22.769h22.769v5.724H102Z" transform="translate(140.348 28.493)" fill="#190e4f"/>
14 |       <path id="Tracé_37" data-name="Tracé 37" d="M127.094,28.292h-53a6.567,6.567,0,0,1-6.751-6.374V6.4A6.581,6.581,0,0,1,74.091.03h53A6.567,6.567,0,0,1,133.845,6.4V21.919A6.581,6.581,0,0,1,127.094,28.292Zm-53-22.539a.686.686,0,0,0-.713.671V21.94a.7.7,0,0,0,.713.671h53a.686.686,0,0,0,.713-.671V6.4a.7.7,0,0,0-.713-.671h-53Z" transform="translate(102.339 28.526)" fill="#6e57ff"/>
15 |     </g>
16 |   </g>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/src/sass/default/Field.sass:
--------------------------------------------------------------------------------
  1 | .Formol_Field
  2 |   margin: $formol-field-margin 0
  3 |   max-width: 100%
  4 |   width: fit-content
  5 |   width: -moz-fit-content
  6 |   width: -webkit-fit-content
  7 |   +field-colors($formol-color-inactive)
  8 | 
  9 |   &--required &__title
 10 |     &::before
 11 |       content: '* '
 12 | 
 13 | 
 14 |   &--readOnly
 15 |     &.Formol_Field--required
 16 |       .Formol_Field__title::before
 17 |         display: none
 18 | 
 19 |     .Formol_Field
 20 |       &__title
 21 |         font-size: $formol-font-size * .7
 22 | 
 23 |     .Formol_InputField, .Formol_TextAreaField, .Formol_PasswordField__wrapper, .Formol_FileField, .Formol_HTMLField
 24 |       +read-only-field__element
 25 | 
 26 |     .Formol_Field
 27 |       &--type-date, &--type-time
 28 |         &__element[type=date]
 29 |           -moz-appearance: textfield
 30 |           border: none
 31 |           clip-path: inset(0 17px 0 0)
 32 |           outline: none
 33 |           outline: 0
 34 | 
 35 | 
 36 |   &--disabled
 37 |     // cursor: default
 38 |     opacity: .75
 39 | 
 40 |     .Formol_Field__label
 41 |       &, & *
 42 |         cursor: default
 43 | 
 44 | 
 45 |   // states
 46 |   &:hover
 47 |     +field-colors($formol-color)
 48 | 
 49 |   &--modified, &--modified:hover
 50 |     +field-colors($formol-color)
 51 | 
 52 |   &--focus, &--focus:hover
 53 |     +field-colors($formol-color-action)
 54 | 
 55 |     *:focus
 56 |       outline: transparent
 57 | 
 58 |   &--error, &--error:hover
 59 |     box-shadow: none
 60 |     +field-colors($formol-color-error)
 61 | 
 62 | 
 63 |   // elements
 64 |   &__label
 65 |     color: inherit
 66 | 
 67 |   &__title
 68 |     color: inherit
 69 |     display: flex
 70 |     font-size: $formol-font-size * .85
 71 |     transition: color .2s
 72 |     width: 100%
 73 | 
 74 |     > svg
 75 |       margin-left: .5em
 76 |       min-width: 1em
 77 | 
 78 |   &__element
 79 |     background-color: $formol-background-color
 80 |     border: solid 1px
 81 |     border-color: inherit
 82 |     border-radius: .15em
 83 |     box-sizing: border-box
 84 |     box-shadow: none
 85 |     color: $formol-color
 86 |     font: inherit
 87 |     margin: .5em 0
 88 |     max-width: 100%
 89 |     padding: $formol-field-padding
 90 |     transition: border-color .2s
 91 | 
 92 |   &__unit
 93 |     display: inline-block
 94 |     margin-left: .75em
 95 | 
 96 |   &__error-text
 97 |     font-size: $formol-font-size * .85
 98 |     font-style: italic
 99 | 
100 |     &::before
101 |       background-color: currentColor
102 |       content: ''
103 |       display: inline-block
104 |       height: 1px
105 |       margin-right: .5em
106 |       vertical-align: middle
107 |       width: 1em
108 | 


--------------------------------------------------------------------------------
/demos/src/pages/AllFieldsDemo.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import Formol, { Field } from 'formol'
 3 | 
 4 | import VersionHeader from '../components/VersionHeader'
 5 | import molecule from '../../../test/samples/molecule.svg.base64'
 6 | 
 7 | export const colorChoices = {
 8 |   White: '#ffffff',
 9 |   Silver: '#c0c0c0',
10 |   Gray: '#808080',
11 |   Black: 0,
12 |   Red: '#ff0000',
13 |   Maroon: '#800000',
14 |   Yellow: '#ffff00',
15 |   Olive: '#808000',
16 |   Lime: '#00ff00',
17 |   Green: '#008000',
18 |   Aqua: '#00ffff',
19 |   Teal: '#008080',
20 |   Blue: '#0000ff',
21 |   Navy: '#000080',
22 |   Fuchsia: '#ff00ff',
23 |   Purple: '#800080',
24 | }
25 | 
26 | const initialState = {
27 |   text: 'text',
28 |   area: 'Text\nArea ',
29 |   email: 'email@exemple.com',
30 |   number: 12,
31 |   password: 'P455w0rD',
32 |   'password-strength': '57r0nG P455w0rD',
33 |   tel: '541-754-3010',
34 |   url: 'https://example.com/',
35 |   color: '#663399',
36 |   date: '2024-05-21',
37 |   'date-native': '2024-05-21',
38 |   time: '17:14',
39 |   'datetime-local': '2018-08-01T17:14',
40 |   month: '2018-08',
41 |   week: '2018-W12',
42 |   range: 42,
43 |   money: '12.50',
44 |   calendar: '2018-08-01',
45 |   switch: true,
46 |   html: '<p><span style="color: rgb(251,160,38);">H</span><strong>T</strong><del>M</del><em>L</em></p>', // eslint-disable-line max-len
47 |   radio: true,
48 |   'radio-set': '#ffff00',
49 |   checkbox: true,
50 |   'checkbox-set': ['#800000', '#ffff00'],
51 |   file: {
52 |     data: molecule,
53 |     ext: 'svg',
54 |     name: 'formol',
55 |     size: 1086,
56 |     type: 'image/svg+xml',
57 |   },
58 |   select: '#800000',
59 |   'select-menu': '#800000',
60 | }
61 | const definitions = Object.keys(initialState).reduce((acc, key) => {
62 |   acc[key] = { name: key, label: key }
63 | 
64 |   if (['radio-set', 'checkbox-set', 'select', 'select-menu'].includes(key)) {
65 |     acc[key].choices = colorChoices
66 |   }
67 | 
68 |   return acc
69 | }, {})
70 | 
71 | const AllFieldsDemo = () => {
72 |   const [formValues, setFormValues] = useState(initialState)
73 | 
74 |   return (
75 |     <>
76 |       <div className="form-container">
77 |         <VersionHeader />
78 | 
79 |         <h1>All fields</h1>
80 |         <Formol item={formValues} onChange={(item) => setFormValues(item)}>
81 |           {Object.values(definitions).map(({ name, label, choices }) => (
82 |             <Field key={name} name={name} type={name} choices={choices}>
83 |               {label}
84 |             </Field>
85 |           ))}
86 |         </Formol>
87 |       </div>
88 | 
89 |       <pre className="panel">{JSON.stringify(formValues, null, 2)}</pre>
90 |     </>
91 |   )
92 | }
93 | 
94 | export default AllFieldsDemo
95 | 


--------------------------------------------------------------------------------
/src/async/HTMLField.jsx:
--------------------------------------------------------------------------------
  1 | import ReactQuill from 'react-quill'
  2 | import 'react-quill/dist/quill.snow.css'
  3 | import React from 'react'
  4 | 
  5 | import { block, noOp } from '../utils'
  6 | 
  7 | export const normalize = (value) =>
  8 |   value === '<p><br></p>' ? '' : value ? value.trim() : ''
  9 | 
 10 | @block
 11 | export default class HTMLField extends React.PureComponent {
 12 |   constructor(props) {
 13 |     super(props)
 14 |     this.state = {
 15 |       editorState: null,
 16 |       value: null,
 17 |     }
 18 |     this.handleChange = this.handleChange.bind(this)
 19 |     this.handleFocus = this.handleFocus.bind(this)
 20 |     this.handleBlur = this.handleBlur.bind(this)
 21 |   }
 22 | 
 23 |   static getDerivedStateFromProps(
 24 |     { elementRef: { current }, value },
 25 |     { value: oldValue }
 26 |   ) {
 27 |     if (value !== oldValue) {
 28 |       value = normalize(value)
 29 |       current && (current.value = value)
 30 |       return {
 31 |         value,
 32 |       }
 33 |     }
 34 |     return null
 35 |   }
 36 | 
 37 |   handleChange(value) {
 38 |     const {
 39 |       elementRef: { current },
 40 |       onChange,
 41 |     } = this.props
 42 |     value = normalize(value)
 43 |     // Synchronise value with input for html5 form validation
 44 |     current && (current.value = value)
 45 |     this.setState({ value })
 46 |     onChange(value)
 47 |   }
 48 | 
 49 |   handleFocus(e) {
 50 |     const { onFocus } = this.props
 51 |     onFocus(e)
 52 |   }
 53 | 
 54 |   handleBlur(e) {
 55 |     const { onBlur } = this.props
 56 |     onBlur(e)
 57 |   }
 58 | 
 59 |   render(b) {
 60 |     const {
 61 |       className,
 62 |       elementRef,
 63 |       i18n,
 64 |       readOnly,
 65 |       disabled,
 66 |       onFocus,
 67 |       onBlur,
 68 |       onKeyDown,
 69 |       toolbar,
 70 |       placeholder,
 71 |       type,
 72 |       reactQuillRef,
 73 |       modules,
 74 |       formats,
 75 |       onChange,
 76 |       ...props
 77 |     } = this.props
 78 |     const { value } = this.state
 79 |     return (
 80 |       <div className={b}>
 81 |         <ReactQuill
 82 |           onFocus={this.handleFocus}
 83 |           onBlur={this.handleBlur}
 84 |           value={value}
 85 |           onChange={this.handleChange}
 86 |           handleReturn={onKeyDown}
 87 |           placeholder={placeholder || i18n.html.placeholder}
 88 |           readOnly={readOnly || disabled}
 89 |           modules={modules}
 90 |           formats={formats}
 91 |           ref={reactQuillRef}
 92 |         />
 93 |         <input
 94 |           className={b.e('hidden-input').mix(className)}
 95 |           ref={elementRef}
 96 |           {...props}
 97 |           value={value}
 98 |           onChange={noOp}
 99 |           type="text"
100 |         />
101 |       </div>
102 |     )
103 |   }
104 | }
105 | 


--------------------------------------------------------------------------------
/src/utils/memoizedChoices.jsx:
--------------------------------------------------------------------------------
 1 | import deepEqual from 'fast-deep-equal'
 2 | import React from 'react'
 3 | 
 4 | export default function memoizedChoices(WrappedComponent) {
 5 |   class MemoizedChoices extends React.PureComponent {
 6 |     static memoPrefix = '##formol_memo_'
 7 | 
 8 |     constructor(props) {
 9 |       super(props)
10 |       this.state = {
11 |         choices: [],
12 |         _rawChoices: [],
13 |         value: null,
14 |         _rawValue: null,
15 |         objectMemo: {},
16 |       }
17 |       this.handleChange = this.handleChange.bind(this)
18 |     }
19 | 
20 |     static getDerivedStateFromProps(nextProps, prevState) {
21 |       const { choices, multiple, value } = nextProps
22 |       let state = null
23 | 
24 |       if (!deepEqual(choices, prevState._rawChoices)) {
25 |         const newMemo = {}
26 |         const normalizedChoices = choices.map(([key, val], i) => {
27 |           if (typeof val === 'string') {
28 |             return [key, val]
29 |           }
30 |           const memoKey = `${MemoizedChoices.memoPrefix}${i}`
31 |           newMemo[memoKey] = val
32 |           return [key, memoKey]
33 |         })
34 |         state = {
35 |           choices: normalizedChoices,
36 |           objectMemo: newMemo,
37 |           _rawChoices: choices,
38 |         }
39 |       }
40 |       if (state || value !== prevState._rawValue) {
41 |         const { objectMemo } = state || prevState
42 |         let newValue = value
43 |         if (Object.keys(objectMemo).length) {
44 |           const getToMemoMaybe = (val) => {
45 |             const memo = Object.entries(objectMemo).find((entry) =>
46 |               deepEqual(entry[1], val)
47 |             )
48 |             return memo ? memo[0] : val
49 |           }
50 |           newValue = multiple
51 |             ? value.map(getToMemoMaybe)
52 |             : getToMemoMaybe(value)
53 |         }
54 |         state = {
55 |           ...(state || {}),
56 |           value: newValue,
57 |           _rawValue: value,
58 |         }
59 |       }
60 |       return state
61 |     }
62 | 
63 |     handleChange(value) {
64 |       const { objectMemo } = this.state
65 |       const { multiple, onChange } = this.props
66 |       const getFromMemoMaybe = (v) =>
67 |         v && v.startsWith(MemoizedChoices.memoPrefix) ? objectMemo[v] : v
68 |       return onChange(
69 |         multiple && value
70 |           ? value.map(getFromMemoMaybe)
71 |           : getFromMemoMaybe(value)
72 |       )
73 |     }
74 | 
75 |     render() {
76 |       const { choices, value } = this.state
77 |       return (
78 |         <WrappedComponent
79 |           {...this.props}
80 |           onChange={this.handleChange}
81 |           choices={choices}
82 |           value={value}
83 |         />
84 |       )
85 |     }
86 |   }
87 | 
88 |   MemoizedChoices.defaultFieldProps = WrappedComponent.defaultFieldProps
89 |   MemoizedChoices.formolFieldLabelElement =
90 |     WrappedComponent.formolFieldLabelElement
91 | 
92 |   return MemoizedChoices
93 | }
94 | 


--------------------------------------------------------------------------------
/webpack.config.babel.js:
--------------------------------------------------------------------------------
  1 | import fs from 'fs'
  2 | import path from 'path'
  3 | 
  4 | import MiniCssExtractPlugin from 'mini-css-extract-plugin'
  5 | import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
  6 | 
  7 | import config from './package.json'
  8 | 
  9 | export default {
 10 |   mode: 'production',
 11 |   devtool: 'source-map',
 12 |   entry: {
 13 |     formol: ['./src'],
 14 |     ...fs
 15 |       .readdirSync(path.join(__dirname, 'src', 'sass'))
 16 |       .reduce((themes, theme) => {
 17 |         if (theme.endsWith('.sass')) {
 18 |           themes[theme.slice(0, -5)] = path.join(
 19 |             __dirname,
 20 |             'src',
 21 |             'sass',
 22 |             theme
 23 |           )
 24 |         }
 25 |         return themes
 26 |       }, {}),
 27 |   },
 28 |   output: {
 29 |     path: path.join(__dirname, 'lib'),
 30 |     publicPath: 'assets/formol/',
 31 |     filename: '[name].js',
 32 |     library: 'formol',
 33 |     libraryTarget: 'umd',
 34 |     umdNamedDefine: true,
 35 |     globalObject: 'this',
 36 |   },
 37 |   externals: Object.keys(config.peerDependencies),
 38 |   plugins: [
 39 |     new MiniCssExtractPlugin({ filename: '[name].css' }),
 40 |     new BundleAnalyzerPlugin({
 41 |       analyzerMode: 'static',
 42 |       openAnalyzer: false,
 43 |       logLevel: 'error',
 44 |     }),
 45 |   ],
 46 |   module: {
 47 |     rules: [
 48 |       {
 49 |         test: /\.jsx?$/,
 50 |         include: path.join(__dirname, 'src'),
 51 |         loader: 'babel-loader',
 52 |         options: {
 53 |           cacheDirectory: true,
 54 |           babelrc: false,
 55 |           presets: [
 56 |             '@babel/preset-react',
 57 |             [
 58 |               '@babel/preset-env',
 59 |               {
 60 |                 targets: {
 61 |                   browsers: ['defaults'],
 62 |                 },
 63 |                 modules: false,
 64 |               },
 65 |             ],
 66 |           ],
 67 |           plugins: [
 68 |             '@babel/plugin-syntax-dynamic-import',
 69 |             '@babel/plugin-proposal-object-rest-spread',
 70 |             ['@babel/plugin-proposal-decorators', { legacy: true }],
 71 |             'add-react-static-displayname',
 72 |             ['@babel/plugin-proposal-class-properties', { loose: true }],
 73 |             '@babel/plugin-transform-runtime',
 74 |           ],
 75 |         },
 76 |       },
 77 |       {
 78 |         test: /\.css$/,
 79 |         use: [MiniCssExtractPlugin.loader, 'css-loader'],
 80 |       },
 81 |       {
 82 |         test: /\.sass$/,
 83 |         use: [
 84 |           MiniCssExtractPlugin.loader,
 85 |           'css-loader',
 86 |           {
 87 |             loader: 'sass-loader',
 88 |             options: {
 89 |               sassOptions: {
 90 |                 includePaths: [path.join(__dirname, 'src')],
 91 |               },
 92 |             },
 93 |           },
 94 |         ],
 95 |       },
 96 |     ],
 97 |   },
 98 |   resolve: {
 99 |     extensions: ['.mjs', '.js', '.jsx'],
100 |   },
101 | }
102 | 


--------------------------------------------------------------------------------
/test/formol/types/radio.test.jsx:
--------------------------------------------------------------------------------
 1 | import { mount } from 'enzyme'
 2 | import React from 'react'
 3 | 
 4 | import Formol, { Field } from '../../../src'
 5 | 
 6 | describe('Radio field', () => {
 7 |   it('handles changes', async () => {
 8 |     const onSubmit = jest.fn()
 9 |     const wrapper = mount(
10 |       <Formol onSubmit={onSubmit} item={{ radio: false }}>
11 |         <Field type="radio">Radio</Field>
12 |       </Formol>
13 |     )
14 |     const input = () => wrapper.find('Field').find('input').first()
15 |     const submit = () => wrapper.find('.Formol_Formol__submit')
16 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
17 | 
18 |     expect(submit().props().disabled).toBeTruthy()
19 |     expect(cancel().props().disabled).toBeTruthy()
20 |     expect(input().props().type).toEqual('radio')
21 |     expect(input().props().checked).toEqual(false)
22 | 
23 |     await input().simulate('focus')
24 |     await input().simulate('change', { target: { checked: true } })
25 |     await input().simulate('blur')
26 | 
27 |     expect(input().props().checked).toEqual(true)
28 |     expect(submit().props().disabled).toBeFalsy()
29 |     expect(cancel().props().disabled).toBeFalsy()
30 | 
31 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
32 | 
33 |     await submit().simulate('submit')
34 | 
35 |     expect(onSubmit).toHaveBeenCalledWith(
36 |       { radio: true },
37 |       { radio: false },
38 |       ['radio'],
39 |       true
40 |     )
41 |     expect(input().props().checked).toEqual(true)
42 |   })
43 |   it('cancels changes', async () => {
44 |     const onSubmit = jest.fn()
45 |     const wrapper = mount(
46 |       <Formol onSubmit={onSubmit} item={{ radio: false }}>
47 |         <Field type="radio">Radio</Field>
48 |       </Formol>
49 |     )
50 |     const input = () => wrapper.find('Field').find('input').first()
51 |     const submit = () => wrapper.find('.Formol_Formol__submit')
52 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
53 | 
54 |     expect(submit().props().disabled).toBeTruthy()
55 |     expect(cancel().props().disabled).toBeTruthy()
56 |     expect(input().props().checked).toEqual(false)
57 | 
58 |     await input().simulate('focus')
59 |     await input().simulate('change', { target: { checked: true } })
60 |     await input().simulate('blur')
61 | 
62 |     expect(input().props().checked).toEqual(true)
63 |     expect(submit().props().disabled).toBeFalsy()
64 |     expect(cancel().props().disabled).toBeFalsy()
65 | 
66 |     await cancel().simulate('click')
67 | 
68 |     expect(input().props().checked).toEqual(false)
69 |   })
70 |   it('sets disabled when readOnly', () => {
71 |     const onSubmit = jest.fn()
72 |     const wrapper = mount(
73 |       <Formol onSubmit={onSubmit} item={{ radio: false }}>
74 |         <Field type="radio" readOnly>
75 |           Radio
76 |         </Field>
77 |       </Formol>
78 |     )
79 |     const input = () => wrapper.find('Field').find('input').first()
80 | 
81 |     expect(input().props().checked).toEqual(false)
82 |     expect(input().props().disabled).toEqual(true)
83 |   })
84 | })
85 | 


--------------------------------------------------------------------------------
/src/utils/MenuList.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { VariableSizeList } from 'react-window'
  3 | 
  4 | const sum = (a, b) => a + b
  5 | 
  6 | class OptionWrapper extends React.PureComponent {
  7 |   render() {
  8 |     const { style, index, data } = this.props
  9 |     return <div style={style}>{data[index]}</div>
 10 |   }
 11 | }
 12 | 
 13 | export default (listDefaultHeight = 19, listApproximatedLengthBreak = 50) =>
 14 |   // eslint-disable-next-line react/no-multi-comp
 15 |   class MenuList extends React.PureComponent {
 16 |     constructor(props) {
 17 |       super(props)
 18 |       this.itemSize = this.itemSize.bind(this)
 19 |       this.list = React.createRef()
 20 | 
 21 |       this.state = {
 22 |         rawChildren: null,
 23 |         maxHeight: null,
 24 |         currentIndex: 0,
 25 |       }
 26 |     }
 27 | 
 28 |     static getDerivedStateFromProps(
 29 |       { children: rawChildren, maxHeight },
 30 |       state
 31 |     ) {
 32 |       if (rawChildren !== state.rawChildren || maxHeight !== state.maxHeight) {
 33 |         const children = Array.isArray(rawChildren)
 34 |           ? rawChildren
 35 |           : [rawChildren]
 36 | 
 37 |         // Waiting for https://github.com/bvaughn/react-window/issues/6
 38 |         const heights = children.map(
 39 |           ({ props: { label } }) =>
 40 |             8 +
 41 |             8 +
 42 |             listDefaultHeight *
 43 |               Math.ceil((label || '_').length / listApproximatedLengthBreak)
 44 |         )
 45 |         const totalHeight = heights.reduce(sum)
 46 |         const height = Math.min(maxHeight, totalHeight)
 47 |         const itemCount = children.length
 48 | 
 49 |         const currentIndex = Math.max(
 50 |           children.findIndex(({ props: { isFocused } }) => isFocused),
 51 |           0
 52 |         )
 53 | 
 54 |         const estimatedItemSize = Math.floor(totalHeight / itemCount)
 55 | 
 56 |         return {
 57 |           height,
 58 |           itemCount,
 59 |           heights,
 60 |           estimatedItemSize,
 61 |           maxHeight,
 62 |           rawChildren,
 63 |           currentIndex,
 64 |         }
 65 |       }
 66 |       return null
 67 |     }
 68 | 
 69 |     componentDidMount() {
 70 |       this.componentDidUpdate()
 71 |     }
 72 | 
 73 |     componentDidUpdate() {
 74 |       const { currentIndex } = this.state
 75 |       this.list.current.scrollToItem(currentIndex)
 76 |     }
 77 | 
 78 |     itemSize(index) {
 79 |       return this.state.heights[index]
 80 |     }
 81 | 
 82 |     render() {
 83 |       const { children, innerRef } = this.props
 84 |       const { height, itemCount, estimatedItemSize } = this.state
 85 |       return (
 86 |         <div ref={innerRef}>
 87 |           <VariableSizeList
 88 |             ref={this.list}
 89 |             height={height}
 90 |             itemCount={itemCount}
 91 |             itemSize={this.itemSize}
 92 |             estimatedItemSize={estimatedItemSize}
 93 |             itemData={Array.isArray(children) ? children : [children]}
 94 |           >
 95 |             {OptionWrapper}
 96 |           </VariableSizeList>
 97 |         </div>
 98 |       )
 99 |     }
100 |   }
101 | 


--------------------------------------------------------------------------------
/test/formol/types/checkbox.test.jsx:
--------------------------------------------------------------------------------
 1 | import { mount } from 'enzyme'
 2 | import React from 'react'
 3 | 
 4 | import Formol, { Field } from '../../../src'
 5 | 
 6 | describe('Checkbox field', () => {
 7 |   it('handles changes', async () => {
 8 |     const onSubmit = jest.fn()
 9 |     const wrapper = mount(
10 |       <Formol onSubmit={onSubmit} item={{ checkbox: true }}>
11 |         <Field type="checkbox">Checkbox</Field>
12 |       </Formol>
13 |     )
14 |     const input = () => wrapper.find('Field').find('input').first()
15 |     const submit = () => wrapper.find('.Formol_Formol__submit')
16 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
17 | 
18 |     expect(submit().props().disabled).toBeTruthy()
19 |     expect(cancel().props().disabled).toBeTruthy()
20 |     expect(input().props().type).toEqual('checkbox')
21 |     expect(input().props().checked).toEqual(true)
22 | 
23 |     await input().simulate('focus')
24 |     await input().simulate('change', { target: { checked: false } })
25 |     await input().simulate('blur')
26 | 
27 |     expect(input().props().checked).toEqual(false)
28 |     expect(submit().props().disabled).toBeFalsy()
29 |     expect(cancel().props().disabled).toBeFalsy()
30 | 
31 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
32 | 
33 |     await submit().simulate('submit')
34 | 
35 |     expect(onSubmit).toHaveBeenCalledWith(
36 |       { checkbox: false },
37 |       { checkbox: true },
38 |       ['checkbox'],
39 |       true
40 |     )
41 |     expect(input().props().checked).toEqual(false)
42 |   })
43 |   it('cancels changes', async () => {
44 |     const onSubmit = jest.fn()
45 |     const wrapper = mount(
46 |       <Formol onSubmit={onSubmit} item={{ checkbox: true }}>
47 |         <Field type="checkbox">Checkbox</Field>
48 |       </Formol>
49 |     )
50 |     const input = () => wrapper.find('Field').find('input').first()
51 |     const submit = () => wrapper.find('.Formol_Formol__submit')
52 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
53 | 
54 |     expect(submit().props().disabled).toBeTruthy()
55 |     expect(cancel().props().disabled).toBeTruthy()
56 |     expect(input().props().checked).toEqual(true)
57 | 
58 |     await input().simulate('focus')
59 |     await input().simulate('change', { target: { checked: false } })
60 |     await input().simulate('blur')
61 | 
62 |     expect(input().props().checked).toEqual(false)
63 |     expect(submit().props().disabled).toBeFalsy()
64 |     expect(cancel().props().disabled).toBeFalsy()
65 | 
66 |     await cancel().simulate('click')
67 | 
68 |     expect(input().props().checked).toEqual(true)
69 |   })
70 |   it('sets disabled when readOnly', () => {
71 |     const onSubmit = jest.fn()
72 |     const wrapper = mount(
73 |       <Formol onSubmit={onSubmit} item={{ checkbox: true }}>
74 |         <Field type="checkbox" readOnly>
75 |           Checkbox
76 |         </Field>
77 |       </Formol>
78 |     )
79 |     const input = () => wrapper.find('Field').find('input').first()
80 |     const submit = () => wrapper.find('.Formol_Formol__submit')
81 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
82 | 
83 |     expect(submit().props().disabled).toBeTruthy()
84 |     expect(cancel().props().disabled).toBeTruthy()
85 |     expect(input().props().checked).toEqual(true)
86 |     expect(input().props().disabled).toEqual(true)
87 |   })
88 | })
89 | 


--------------------------------------------------------------------------------
/src/async/PasswordStrengthField.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import zxcvbn from 'zxcvbn'
  3 | 
  4 | import { block } from '../utils'
  5 | import PasswordField from '../fields/PasswordField'
  6 | 
  7 | /* Inspired from https://github.com/mmw/react-password-strength
  8 |    Forked here to handle a value instead of a value and
  9 |    props change
 10 | */
 11 | @block
 12 | export default class PasswordStrengthField extends React.PureComponent {
 13 |   static getState(value, minScore, minLength, userInputs, basic) {
 14 |     const rawScore = zxcvbn(value, userInputs).score
 15 | 
 16 |     return {
 17 |       value,
 18 |       score:
 19 |         !value || value.length < minLength
 20 |           ? -1 // Too short
 21 |           : basic
 22 |             ? Math.floor(rawScore / minScore)
 23 |             : rawScore,
 24 |     }
 25 |   }
 26 | 
 27 |   static defaultProps = {
 28 |     minLength: 5,
 29 |     minScore: 3,
 30 |   }
 31 | 
 32 |   constructor(props) {
 33 |     super(props)
 34 |     this.state = {
 35 |       value: null,
 36 |       score: -1,
 37 |       isPristine: true,
 38 |     }
 39 |     this.handleChange = this.handleChange.bind(this)
 40 |   }
 41 | 
 42 |   static getDerivedStateFromProps(
 43 |     { value, userInputs, minLength, minScore, basic },
 44 |     { value: oldValue }
 45 |   ) {
 46 |     if (value !== oldValue) {
 47 |       return PasswordStrengthField.getState(
 48 |         value,
 49 |         minScore,
 50 |         minLength,
 51 |         userInputs,
 52 |         basic
 53 |       )
 54 |     }
 55 |     return null
 56 |   }
 57 | 
 58 |   handleChange(value) {
 59 |     const { i18n, minScore, minLength, userInputs, onChange, basic } =
 60 |       this.props
 61 |     const state = PasswordStrengthField.getState(
 62 |       value,
 63 |       minScore,
 64 |       minLength,
 65 |       userInputs,
 66 |       basic
 67 |     )
 68 |     this.setState((prevState) => ({
 69 |       ...state,
 70 |       isPristine: prevState.isPristine && value.length === 0,
 71 |     }))
 72 |     const isTooWeak = basic ? state.score < 1 : state.score < minScore
 73 |     onChange(value, isTooWeak ? i18n.passwordStrength.error : '')
 74 |   }
 75 | 
 76 |   render(b) {
 77 |     const { className, i18n, scoreWords, onChange, minScore, basic, ...props } =
 78 |       this.props
 79 |     const { value, score, isPristine } = this.state
 80 |     const strengthLevels = basic
 81 |       ? [
 82 |           i18n.passwordStrength.tooshort,
 83 |           i18n.passwordStrength.weak,
 84 |           i18n.passwordStrength.strong,
 85 |         ]
 86 |       : [
 87 |           i18n.passwordStrength.tooshort,
 88 |           i18n.passwordStrength.tooweak,
 89 |           i18n.passwordStrength.weak,
 90 |           i18n.passwordStrength.average,
 91 |           i18n.passwordStrength.strong,
 92 |           i18n.passwordStrength.stronger,
 93 |         ]
 94 |     const description = (scoreWords || strengthLevels)[score + 1]
 95 | 
 96 |     return (
 97 |       <div className={b.e(`${basic ? 'basic' : 'default'}`)}>
 98 |         <div className={b.m({ score: score + 1 })}>
 99 |           <PasswordField
100 |             className={b.mix(className)}
101 |             onChange={this.handleChange}
102 |             {...props}
103 |           />
104 |           <div className={b.m({ pristine: !value && isPristine })}>
105 |             <div className={b.e('strength')} />
106 |             <span className={b.e('description')}>{description}</span>
107 |           </div>
108 |         </div>
109 |       </div>
110 |     )
111 |   }
112 | }
113 | 


--------------------------------------------------------------------------------
/src/async/CalendarField.jsx:
--------------------------------------------------------------------------------
  1 | import 'react-day-picker/lib/style.css'
  2 | 
  3 | import { format, parse } from 'date-fns'
  4 | import React from 'react'
  5 | import DayPickerInput from 'react-day-picker/DayPickerInput'
  6 | 
  7 | import { block } from '../utils'
  8 | import locales from './CalendarFieldLocales'
  9 | 
 10 | const isDate = (d) => d instanceof Date && !isNaN(d.valueOf())
 11 | 
 12 | @block
 13 | export default class CalendarField extends React.PureComponent {
 14 |   constructor(props) {
 15 |     super(props)
 16 |     this.handleChange = this.handleChange.bind(this)
 17 |   }
 18 | 
 19 |   componentDidMount() {
 20 |     const { readOnly, disabled, elementRef } = this.props
 21 |     if (!(readOnly || disabled)) {
 22 |       elementRef.current = this.daypicker.input
 23 |     }
 24 |   }
 25 | 
 26 |   componentWillUnmount() {
 27 |     const { elementRef } = this.props
 28 |     elementRef.current = null
 29 |   }
 30 | 
 31 |   handleChange(newDate) {
 32 |     const { i18n, onChange } = this.props
 33 |     const locale = (locales[i18n.calendar.locale] || {}).date
 34 |     onChange(
 35 |       isDate(newDate)
 36 |         ? format(newDate, 'yyyy-MM-dd', { locale })
 37 |         : newDate || null
 38 |     )
 39 |   }
 40 | 
 41 |   render(b) {
 42 |     const {
 43 |       className,
 44 |       elementRef,
 45 |       i18n,
 46 |       placeholder,
 47 |       format: userFormat,
 48 |       pattern,
 49 |       value,
 50 |       readOnly,
 51 |       disabled,
 52 |       type,
 53 |       onChange,
 54 |       ...inputProps
 55 |     } = this.props
 56 |     const locale = (locales[i18n.calendar.locale] || {}).date
 57 |     const dateFormat = userFormat || i18n.calendar.dateFormat
 58 |     const datePattern = pattern || i18n.calendar.datePattern
 59 |     const maybeDate = parse(value, 'yyyy-MM-dd', new Date(), { locale })
 60 |     const date = isDate(maybeDate) ? maybeDate : value
 61 |     if (readOnly || disabled) {
 62 |       return (
 63 |         <input
 64 |           type="text"
 65 |           className={b.mix(className)}
 66 |           placeholder={placeholder || dateFormat}
 67 |           readOnly={readOnly}
 68 |           disabled={disabled}
 69 |           value={isDate(maybeDate) ? format(date, dateFormat) : value}
 70 |         />
 71 |       )
 72 |     }
 73 | 
 74 |     return (
 75 |       <DayPickerInput
 76 |         classNames={{
 77 |           container: b.mix('DayPickerInput').s,
 78 |           overlayWrapper: b
 79 |             .e('overlay-wrapper')
 80 |             .mix('DayPickerInput-OverlayWrapper').s,
 81 |           overlay: b.e('overlay').mix('DayPickerInput-Overlay').s,
 82 |         }}
 83 |         value={date}
 84 |         ref={(ref) => (this.daypicker = ref)}
 85 |         placeholder={placeholder || dateFormat}
 86 |         format={dateFormat}
 87 |         formatDate={(value_, format_) => format(value_, format_, { locale })}
 88 |         parseDate={(value_, format_) =>
 89 |           datePattern.exec(value_)
 90 |             ? parse(value_, format_, new Date(), { locale })
 91 |             : void 0
 92 |         }
 93 |         dayPickerProps={{
 94 |           locale: i18n.calendar.locale,
 95 |           localeUtils: (locales[i18n.calendar.locale] || {}).calendar,
 96 |         }}
 97 |         onDayChange={this.handleChange}
 98 |         inputProps={{
 99 |           ...inputProps,
100 |           pattern: datePattern.source,
101 |           title: i18n.calendar.dateError,
102 |           className: b.e('field').mix(className),
103 |         }}
104 |       />
105 |     )
106 |   }
107 | }
108 | 


--------------------------------------------------------------------------------
/test/utils.object.test.js:
--------------------------------------------------------------------------------
  1 | import { get, set } from '../src/utils/object'
  2 | 
  3 | it('Gets it', () => {
  4 |   const o = {
  5 |     a: 1,
  6 |     b: 2,
  7 |     c: {
  8 |       d: 3,
  9 |       e: {
 10 |         f: 4,
 11 |       },
 12 |       g: [{ h: 5 }, { i: { j: 6 }, k: 7 }, 8],
 13 |     },
 14 |   }
 15 |   expect(get(o, 'a')).toEqual(1)
 16 |   expect(get(o, 'c.d')).toEqual(3)
 17 |   expect(get(o, 'c.e.f')).toEqual(4)
 18 |   expect(get(o, 'c.g.0')).toEqual({ h: 5 })
 19 |   expect(get(o, 'c.g.0.h')).toEqual(5)
 20 |   expect(get(o, 'c.g.1.i.j')).toEqual(6)
 21 |   expect(get(o, 'c.g.2')).toEqual(8)
 22 |   expect(get(o, 'a.b.c.d.e.f')).toEqual('')
 23 | })
 24 | 
 25 | it('Sets it when existing', () => {
 26 |   const getO = () => ({
 27 |     a: 1,
 28 |     b: 2,
 29 |     c: {
 30 |       d: 3,
 31 |       e: {
 32 |         f: 4,
 33 |       },
 34 |       g: [{ h: 5 }, { i: { j: 6 }, k: 7 }, 8],
 35 |     },
 36 |   })
 37 |   let o = getO()
 38 |   set(o, 'a', 11)
 39 |   expect(o).toEqual({
 40 |     a: 11,
 41 |     b: 2,
 42 |     c: {
 43 |       d: 3,
 44 |       e: {
 45 |         f: 4,
 46 |       },
 47 |       g: [{ h: 5 }, { i: { j: 6 }, k: 7 }, 8],
 48 |     },
 49 |   })
 50 |   o = getO()
 51 |   set(o, 'c.d', 33)
 52 |   expect(o).toEqual({
 53 |     a: 1,
 54 |     b: 2,
 55 |     c: {
 56 |       d: 33,
 57 |       e: {
 58 |         f: 4,
 59 |       },
 60 |       g: [{ h: 5 }, { i: { j: 6 }, k: 7 }, 8],
 61 |     },
 62 |   })
 63 |   o = getO()
 64 |   set(o, 'c.e.f', 44)
 65 |   expect(o).toEqual({
 66 |     a: 1,
 67 |     b: 2,
 68 |     c: {
 69 |       d: 3,
 70 |       e: {
 71 |         f: 44,
 72 |       },
 73 |       g: [{ h: 5 }, { i: { j: 6 }, k: 7 }, 8],
 74 |     },
 75 |   })
 76 |   o = getO()
 77 |   set(o, 'c.g.0.h', 55)
 78 |   expect(o).toEqual({
 79 |     a: 1,
 80 |     b: 2,
 81 |     c: {
 82 |       d: 3,
 83 |       e: {
 84 |         f: 4,
 85 |       },
 86 |       g: [{ h: 55 }, { i: { j: 6 }, k: 7 }, 8],
 87 |     },
 88 |   })
 89 |   o = getO()
 90 |   set(o, 'c.g.1.i.j', 66)
 91 |   expect(o).toEqual({
 92 |     a: 1,
 93 |     b: 2,
 94 |     c: {
 95 |       d: 3,
 96 |       e: {
 97 |         f: 4,
 98 |       },
 99 |       g: [{ h: 5 }, { i: { j: 66 }, k: 7 }, 8],
100 |     },
101 |   })
102 |   o = getO()
103 |   set(o, 'c.g.2', 88)
104 |   expect(o).toEqual({
105 |     a: 1,
106 |     b: 2,
107 |     c: {
108 |       d: 3,
109 |       e: {
110 |         f: 4,
111 |       },
112 |       g: [{ h: 5 }, { i: { j: 6 }, k: 7 }, 88],
113 |     },
114 |   })
115 | })
116 | 
117 | it('Sets it when absent', () => {
118 |   const getO = () => ({})
119 |   let o = getO()
120 |   set(o, 'a', 11)
121 |   expect(o).toEqual({
122 |     a: 11,
123 |   })
124 |   o = getO()
125 |   set(o, 'c.d', 33)
126 |   expect(o).toEqual({
127 |     c: {
128 |       d: 33,
129 |     },
130 |   })
131 |   o = getO()
132 |   set(o, 'c.e.f', 44)
133 |   expect(o).toEqual({
134 |     c: {
135 |       e: {
136 |         f: 44,
137 |       },
138 |     },
139 |   })
140 |   o = getO()
141 |   set(o, 'c.g.0.h', 55)
142 |   expect(o).toEqual({
143 |     c: {
144 |       g: [{ h: 55 }],
145 |     },
146 |   })
147 |   o = getO()
148 |   set(o, 'c.g.1.i.j', 66)
149 |   expect(o).toEqual({
150 |     c: {
151 |       g: [void 0, { i: { j: 66 } }],
152 |     },
153 |   })
154 |   o = getO()
155 |   set(o, 'c.g.2', 88)
156 |   expect(o).toEqual({
157 |     c: {
158 |       g: [void 0, void 0, 88],
159 |     },
160 |   })
161 |   o = getO()
162 |   set(o, 'c.g.2', 88, true)
163 |   expect(o).toEqual({
164 |     c: {
165 |       g: { 2: 88 },
166 |     },
167 |   })
168 | })
169 | 


--------------------------------------------------------------------------------
/test/formol/types/dates.test.jsx:
--------------------------------------------------------------------------------
  1 | import { mount } from 'enzyme'
  2 | import React from 'react'
  3 | import Formol, { Field } from '../../../src'
  4 | 
  5 | const dateMock = [
  6 |   {
  7 |     type: 'date-native',
  8 |     nativeType: 'date',
  9 |     title: 'Date',
 10 |     value1: '05/27/1988',
 11 |     value2: '12/12/2121',
 12 |   },
 13 |   {
 14 |     type: 'time',
 15 |     nativeType: 'time',
 16 |     title: 'Time',
 17 |     value1: '11:59',
 18 |     value2: '05:12',
 19 |   },
 20 |   {
 21 |     type: 'datetime-local',
 22 |     nativeType: 'datetime-local',
 23 |     title: 'DateTime Local',
 24 |     value1: '2008-02-19T18:14',
 25 |     value2: '1902-01-10T04:29',
 26 |   },
 27 |   {
 28 |     type: 'month',
 29 |     nativeType: 'month',
 30 |     title: 'Month',
 31 |     value1: '2148-02',
 32 |     value2: '2000-01',
 33 |   },
 34 |   {
 35 |     type: 'week',
 36 |     nativeType: 'week',
 37 |     title: 'Week',
 38 |     value1: '1998-W12',
 39 |     value2: '2100-W03',
 40 |   },
 41 | ]
 42 | 
 43 | dateMock.map(({ type, title, value1, value2, nativeType }) =>
 44 |   describe(`${title} field`, () => {
 45 |     it('handles changes', async () => {
 46 |       const onSubmit = jest.fn()
 47 |       const wrapper = mount(
 48 |         <Formol onSubmit={onSubmit} item={{ [type]: value1 }}>
 49 |           <Field name={type} type={type}>
 50 |             {title}
 51 |           </Field>
 52 |         </Formol>
 53 |       )
 54 |       const input = () => wrapper.find('Field').find('input').first()
 55 |       const submit = () => wrapper.find('.Formol_Formol__submit')
 56 |       const cancel = () => wrapper.find('.Formol_Formol__cancel')
 57 | 
 58 |       expect(submit().props().disabled).toBeTruthy()
 59 |       expect(cancel().props().disabled).toBeTruthy()
 60 |       expect(input().props().type).toEqual(nativeType)
 61 |       expect(input().props().value).toEqual(value1)
 62 | 
 63 |       await input().simulate('focus')
 64 |       await input().simulate('change', { target: { value: value2 } })
 65 |       await input().simulate('blur')
 66 | 
 67 |       expect(input().props().value).toEqual(value2)
 68 |       expect(submit().props().disabled).toBeFalsy()
 69 |       expect(cancel().props().disabled).toBeFalsy()
 70 | 
 71 |       // Validity is broken in current jsdom
 72 |       // TODO: Uncomment with jsdom 16
 73 |       // expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
 74 | 
 75 |       await submit().simulate('submit')
 76 | 
 77 |       expect(onSubmit).toHaveBeenCalledWith(
 78 |         { [type]: value2 },
 79 |         { [type]: value1 },
 80 |         [type],
 81 |         true
 82 |       )
 83 |       expect(input().props().value).toEqual(value2)
 84 |     })
 85 |     it('cancels changes', async () => {
 86 |       const onSubmit = jest.fn()
 87 |       const wrapper = mount(
 88 |         <Formol onSubmit={onSubmit} item={{ [type]: value1 }}>
 89 |           <Field name={type} type={type}>
 90 |             {title}
 91 |           </Field>
 92 |         </Formol>
 93 |       )
 94 |       const input = () => wrapper.find('Field').find('input').first()
 95 |       const submit = () => wrapper.find('.Formol_Formol__submit')
 96 |       const cancel = () => wrapper.find('.Formol_Formol__cancel')
 97 | 
 98 |       expect(submit().props().disabled).toBeTruthy()
 99 |       expect(cancel().props().disabled).toBeTruthy()
100 |       expect(input().props().value).toEqual(value1)
101 | 
102 |       await input().simulate('focus')
103 |       await input().simulate('change', { target: { value: value2 } })
104 |       await input().simulate('blur')
105 | 
106 |       expect(input().props().value).toEqual(value2)
107 |       expect(submit().props().disabled).toBeFalsy()
108 |       expect(cancel().props().disabled).toBeFalsy()
109 | 
110 |       await cancel().simulate('click')
111 | 
112 |       expect(input().props().value).toEqual(value1)
113 |     })
114 |   })
115 | )
116 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "formol",
  3 |   "version": "4.2.1",
  4 |   "description": "An opinionated react form framework.",
  5 |   "main": "lib/formol.js",
  6 |   "module": "src/index.js",
  7 |   "repository": "https://github.com/Kozea/formol",
  8 |   "author": "Kozea dev team <dev@kozea.fr>",
  9 |   "license": "MIT",
 10 |   "scripts": {
 11 |     "build": "rimraf lib && webpack",
 12 |     "lint": "eslint src test",
 13 |     "fix": "prettier --write **/*.{js,jsx}",
 14 |     "test": "jest --coverage",
 15 |     "coverage": "cat ./coverage/lcov.info | coveralls",
 16 |     "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
 17 |     "prepublish": "npm run build",
 18 |     "demos": "webpack-dev-server --config webpack.config.demos.js --mode development",
 19 |     "demos-build": "rimraf demos/dist && webpack --config webpack.config.demos.js --mode production",
 20 |     "demos-deploy": "./demos/deploy.sh"
 21 |   },
 22 |   "pre-commit": "lint,test",
 23 |   "devDependencies": {
 24 |     "@babel/cli": "^7.28.3",
 25 |     "@babel/core": "^7.28.5",
 26 |     "@babel/eslint-parser": "^7.28.5",
 27 |     "@babel/plugin-proposal-class-properties": "^7.18.6",
 28 |     "@babel/plugin-proposal-decorators": "^7.28.0",
 29 |     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
 30 |     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
 31 |     "@babel/plugin-transform-runtime": "^7.28.5",
 32 |     "@babel/preset-env": "^7.28.5",
 33 |     "@babel/preset-react": "^7.28.5",
 34 |     "@babel/register": "^7.28.3",
 35 |     "@eslint/compat": "^1.4.1",
 36 |     "babel-core": "^7.0.0-bridge.0",
 37 |     "babel-loader": "^8.4.1",
 38 |     "babel-plugin-add-react-static-displayname": "^0.0.2",
 39 |     "babel-plugin-dynamic-import-node": "^2.3.3",
 40 |     "coveralls": "^3.1.1",
 41 |     "css-loader": "^3.6.0",
 42 |     "date-fns": "^4.1.0",
 43 |     "enzyme": "^3.11.0",
 44 |     "enzyme-adapter-react-16": "^1.15.8",
 45 |     "eslint": "^9.39.1",
 46 |     "eslint-plugin-import": "^2.32.0",
 47 |     "eslint-plugin-react": "^7.37.5",
 48 |     "globals": "^16.5.0",
 49 |     "html-webpack-plugin": "^5.6.5",
 50 |     "import-sort": "^6.0.0",
 51 |     "import-sort-cli": "^6.0.0",
 52 |     "import-sort-parser-babylon": "^6.0.0",
 53 |     "import-sort-style-module": "^6.0.0",
 54 |     "jest": "^25.5.4",
 55 |     "mini-css-extract-plugin": "^0.9.0",
 56 |     "moment": "^2.30.1",
 57 |     "pre-commit": "^1.2.2",
 58 |     "prettier": "^3.7.1",
 59 |     "quill-image-resize-module-react": "^3.0.0",
 60 |     "react": "^16.14.0",
 61 |     "react-dom": "^16.14.0",
 62 |     "react-syntax-highlighter": "^12.2.1",
 63 |     "react-test-renderer": "^16.14.0",
 64 |     "sass": "^1.94.2",
 65 |     "sass-loader": "^8.0.2",
 66 |     "scudd": "^0.0.1",
 67 |     "webpack": "^5.103.0",
 68 |     "webpack-bundle-analyzer": "^4.10.2",
 69 |     "webpack-cli": "^5.1.4",
 70 |     "webpack-dev-server": "^5.2.2"
 71 |   },
 72 |   "files": [
 73 |     "lib/",
 74 |     "src/"
 75 |   ],
 76 |   "importSort": {
 77 |     ".js, .jsx": {
 78 |       "parser": "babylon",
 79 |       "style": "module"
 80 |     }
 81 |   },
 82 |   "dependencies": {
 83 |     "@babel/runtime": "^7.28.4",
 84 |     "bemboo": "^2.0.0",
 85 |     "fast-deep-equal": "^3.1.3",
 86 |     "js-search": "^2.0.1",
 87 |     "react-datepicker": "^3.8.0",
 88 |     "react-day-picker": "^7.4.10",
 89 |     "react-dropzone": "^10.2.2",
 90 |     "react-icons": "^3.11.0",
 91 |     "react-quill": "^1.3.5",
 92 |     "react-select": "^3.2.0",
 93 |     "react-text-mask": "^5.5.0",
 94 |     "react-window": "^1.8.11",
 95 |     "zxcvbn": "^4.4.2"
 96 |   },
 97 |   "peerDependencies": {
 98 |     "date-fns": "^4.1.0",
 99 |     "react": "^16.14.0",
100 |     "react-dom": "^16.14.0",
101 |     "react-icons": "^3.11.0"
102 |   },
103 |   "resolutions": {
104 |     "cheerio": "1.0.0-rc.3"
105 |   },
106 |   "engines": {
107 |     "node": "20.x || 22.x || 24.x"
108 |   }
109 | }
110 | 


--------------------------------------------------------------------------------
/test/formol/types/radio-set.test.jsx:
--------------------------------------------------------------------------------
  1 | import { mount } from 'enzyme'
  2 | import React from 'react'
  3 | 
  4 | import Formol, { Field } from '../../../src'
  5 | 
  6 | describe('Radio Set field', () => {
  7 |   it('handles changes', async () => {
  8 |     const onSubmit = jest.fn()
  9 |     const wrapper = mount(
 10 |       <Formol onSubmit={onSubmit} item={{ radioSet: 'II' }}>
 11 |         <Field
 12 |           type="radio-set"
 13 |           choices={{
 14 |             one: 1,
 15 |             two: 'II',
 16 |             three: true,
 17 |           }}
 18 |         >
 19 |           Radio Set
 20 |         </Field>
 21 |       </Formol>
 22 |     )
 23 |     const inputs = () => wrapper.find('Field').find('input')
 24 | 
 25 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 26 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 27 | 
 28 |     expect(submit().props().disabled).toBeTruthy()
 29 |     expect(cancel().props().disabled).toBeTruthy()
 30 |     inputs().map((input) => expect(input.props().type).toEqual('radio'))
 31 |     const expectValues = (...values) =>
 32 |       inputs().map((input, i) =>
 33 |         expect(input.props().checked).toEqual(values[i])
 34 |       )
 35 | 
 36 |     expectValues(false, true, false)
 37 | 
 38 |     await inputs().at(2).simulate('focus')
 39 |     await inputs()
 40 |       .at(2)
 41 |       .simulate('change', { target: { checked: true } })
 42 |     await inputs().at(2).simulate('blur')
 43 | 
 44 |     expectValues(false, false, true)
 45 | 
 46 |     expect(submit().props().disabled).toBeFalsy()
 47 |     expect(cancel().props().disabled).toBeFalsy()
 48 | 
 49 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
 50 | 
 51 |     await submit().simulate('submit')
 52 | 
 53 |     expect(onSubmit).toHaveBeenCalledWith(
 54 |       { radioSet: true },
 55 |       { radioSet: 'II' },
 56 |       ['radioSet'],
 57 |       true
 58 |     )
 59 | 
 60 |     expectValues(false, false, true)
 61 |   })
 62 |   it('cancels changes', async () => {
 63 |     const onSubmit = jest.fn()
 64 |     const wrapper = mount(
 65 |       <Formol onSubmit={onSubmit} item={{ radioSet: 'II' }}>
 66 |         <Field
 67 |           type="radio-set"
 68 |           choices={{
 69 |             one: 1,
 70 |             two: 'II',
 71 |             three: true,
 72 |           }}
 73 |         >
 74 |           Radio Set
 75 |         </Field>
 76 |       </Formol>
 77 |     )
 78 |     const inputs = () => wrapper.find('Field').find('input')
 79 | 
 80 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 81 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 82 | 
 83 |     expect(submit().props().disabled).toBeTruthy()
 84 |     expect(cancel().props().disabled).toBeTruthy()
 85 |     inputs().map((input) => expect(input.props().type).toEqual('radio'))
 86 |     const expectValues = (...values) =>
 87 |       inputs().map((input, i) =>
 88 |         expect(input.props().checked).toEqual(values[i])
 89 |       )
 90 | 
 91 |     expectValues(false, true, false)
 92 | 
 93 |     await inputs().at(2).simulate('focus')
 94 |     await inputs()
 95 |       .at(2)
 96 |       .simulate('change', { target: { checked: true } })
 97 |     await inputs().at(2).simulate('blur')
 98 | 
 99 |     expectValues(false, false, true)
100 | 
101 |     expect(submit().props().disabled).toBeFalsy()
102 |     expect(cancel().props().disabled).toBeFalsy()
103 | 
104 |     await cancel().simulate('click')
105 | 
106 |     expect(submit().props().disabled).toBeTruthy()
107 |     expect(cancel().props().disabled).toBeTruthy()
108 |     expectValues(false, true, false)
109 |   })
110 |   it('sets disabled when readOnly', () => {
111 |     const onSubmit = jest.fn()
112 |     const wrapper = mount(
113 |       <Formol onSubmit={onSubmit} item={{ radioSet: 'II' }}>
114 |         <Field type="radio-set" readOnly>
115 |           Radio Set
116 |         </Field>
117 |       </Formol>
118 |     )
119 |     const inputs = () => wrapper.find('Field').find('input')
120 |     inputs().map((input) => expect(input.props().disabled).toEqual(true))
121 |   })
122 | })
123 | 


--------------------------------------------------------------------------------
/test/formol/types/password.test.jsx:
--------------------------------------------------------------------------------
  1 | import { mount } from 'enzyme'
  2 | import React from 'react'
  3 | 
  4 | import Formol, { Field } from '../../../src'
  5 | 
  6 | describe('Password field', () => {
  7 |   it('handles changes', async () => {
  8 |     const onSubmit = jest.fn()
  9 |     const wrapper = mount(
 10 |       <Formol onSubmit={onSubmit} item={{ password: 'passw0rd' }}>
 11 |         <Field type="password">Password</Field>
 12 |       </Formol>
 13 |     )
 14 |     const input = () => wrapper.find('Field').find('input').first()
 15 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 16 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 17 | 
 18 |     expect(submit().props().disabled).toBeTruthy()
 19 |     expect(cancel().props().disabled).toBeTruthy()
 20 |     expect(input().props().type).toEqual('password')
 21 |     expect(input().props().value).toEqual('passw0rd')
 22 | 
 23 |     await input().simulate('focus')
 24 |     await input().simulate('change', { target: { value: 'u#@*/p=u58+e' } })
 25 |     await input().simulate('blur')
 26 | 
 27 |     expect(input().props().value).toEqual('u#@*/p=u58+e')
 28 |     expect(submit().props().disabled).toBeFalsy()
 29 |     expect(cancel().props().disabled).toBeFalsy()
 30 | 
 31 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
 32 | 
 33 |     await submit().simulate('submit')
 34 | 
 35 |     expect(onSubmit).toHaveBeenCalledWith(
 36 |       { password: 'u#@*/p=u58+e' },
 37 |       { password: 'passw0rd' },
 38 |       ['password'],
 39 |       true
 40 |     )
 41 |     expect(input().props().value).toEqual('u#@*/p=u58+e')
 42 |   })
 43 |   it('cancels changes', async () => {
 44 |     const onSubmit = jest.fn()
 45 |     const wrapper = mount(
 46 |       <Formol onSubmit={onSubmit} item={{ password: 'passw0rd' }}>
 47 |         <Field type="password">Password</Field>
 48 |       </Formol>
 49 |     )
 50 |     const input = () => wrapper.find('Field').find('input').first()
 51 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 52 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 53 | 
 54 |     expect(submit().props().disabled).toBeTruthy()
 55 |     expect(cancel().props().disabled).toBeTruthy()
 56 |     expect(input().props().value).toEqual('passw0rd')
 57 | 
 58 |     await input().simulate('focus')
 59 |     await input().simulate('change', { target: { value: 'u#@*/p=u58+e' } })
 60 |     await input().simulate('blur')
 61 | 
 62 |     expect(input().props().value).toEqual('u#@*/p=u58+e')
 63 |     expect(submit().props().disabled).toBeFalsy()
 64 |     expect(cancel().props().disabled).toBeFalsy()
 65 | 
 66 |     await cancel().simulate('click')
 67 | 
 68 |     expect(input().props().value).toEqual('passw0rd')
 69 |   })
 70 |   it('shows password on eye click', async () => {
 71 |     const wrapper = mount(
 72 |       <Formol item={{ password: 'passw0rd' }}>
 73 |         <Field type="password">Password</Field>
 74 |       </Formol>
 75 |     )
 76 |     const input = () => wrapper.find('Field').find('input').first()
 77 |     const eye = () => wrapper.find('Field').find('.Formol_PasswordField__eye')
 78 | 
 79 |     expect(input().props().value).toEqual('passw0rd')
 80 |     expect(input().props().type).toEqual('password')
 81 |     await eye().simulate('click')
 82 |     expect(input().props().value).toEqual('passw0rd')
 83 |     expect(input().props().type).toEqual('text')
 84 | 
 85 |     await input().simulate('focus')
 86 |     await input().simulate('change', { target: { value: 'u#@*/p=u58+e' } })
 87 |     await input().simulate('blur')
 88 |     // bluring the field should restore password type
 89 |     expect(input().props().type).toEqual('password')
 90 |     expect(input().props().value).toEqual('u#@*/p=u58+e')
 91 | 
 92 |     await eye().simulate('click')
 93 | 
 94 |     expect(input().props().value).toEqual('u#@*/p=u58+e')
 95 |     expect(input().props().type).toEqual('text')
 96 | 
 97 |     await eye().simulate('click')
 98 | 
 99 |     expect(input().props().value).toEqual('u#@*/p=u58+e')
100 |     expect(input().props().type).toEqual('password')
101 |   })
102 | })
103 | 


--------------------------------------------------------------------------------
/test/formol/types/checkbox-set.test.jsx:
--------------------------------------------------------------------------------
  1 | import { mount } from 'enzyme'
  2 | import React from 'react'
  3 | 
  4 | import Formol, { Field } from '../../../src'
  5 | 
  6 | describe('Checkbox Set field', () => {
  7 |   it('handles changes', async () => {
  8 |     const onSubmit = jest.fn()
  9 |     const wrapper = mount(
 10 |       <Formol onSubmit={onSubmit} item={{ checkboxSet: [1, true] }}>
 11 |         <Field
 12 |           type="checkbox-set"
 13 |           choices={{
 14 |             one: 1,
 15 |             two: 'II',
 16 |             three: true,
 17 |           }}
 18 |         >
 19 |           Checkbox Set
 20 |         </Field>
 21 |       </Formol>
 22 |     )
 23 |     const inputs = () => wrapper.find('Field').find('input')
 24 | 
 25 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 26 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 27 | 
 28 |     expect(submit().props().disabled).toBeTruthy()
 29 |     expect(cancel().props().disabled).toBeTruthy()
 30 |     inputs().map((input) => expect(input.props().type).toEqual('checkbox'))
 31 |     const expectValues = (...values) =>
 32 |       inputs().map((input, i) =>
 33 |         expect(input.props().checked).toEqual(values[i])
 34 |       )
 35 | 
 36 |     expectValues(true, false, true)
 37 | 
 38 |     await inputs().at(1).simulate('focus')
 39 |     await inputs()
 40 |       .at(1)
 41 |       .simulate('change', { target: { checked: true } })
 42 |     await inputs().at(1).simulate('blur')
 43 | 
 44 |     expectValues(true, true, true)
 45 | 
 46 |     expect(submit().props().disabled).toBeFalsy()
 47 |     expect(cancel().props().disabled).toBeFalsy()
 48 | 
 49 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
 50 | 
 51 |     await submit().simulate('submit')
 52 | 
 53 |     expect(onSubmit).toHaveBeenCalledWith(
 54 |       { checkboxSet: [1, true, 'II'] },
 55 |       { checkboxSet: [1, true] },
 56 |       ['checkboxSet'],
 57 |       true
 58 |     )
 59 | 
 60 |     expectValues(true, true, true)
 61 |   })
 62 |   it('cancels changes', async () => {
 63 |     const onSubmit = jest.fn()
 64 |     const wrapper = mount(
 65 |       <Formol onSubmit={onSubmit} item={{ checkboxSet: [1, true] }}>
 66 |         <Field
 67 |           type="checkbox-set"
 68 |           choices={{
 69 |             one: 1,
 70 |             two: 'II',
 71 |             three: true,
 72 |           }}
 73 |         >
 74 |           Checkbox Set
 75 |         </Field>
 76 |       </Formol>
 77 |     )
 78 |     const inputs = () => wrapper.find('Field').find('input')
 79 | 
 80 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 81 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 82 | 
 83 |     expect(submit().props().disabled).toBeTruthy()
 84 |     expect(cancel().props().disabled).toBeTruthy()
 85 |     inputs().map((input) => expect(input.props().type).toEqual('checkbox'))
 86 |     const expectValues = (...values) =>
 87 |       inputs().map((input, i) =>
 88 |         expect(input.props().checked).toEqual(values[i])
 89 |       )
 90 | 
 91 |     expectValues(true, false, true)
 92 | 
 93 |     await inputs().at(0).simulate('focus')
 94 |     await inputs()
 95 |       .at(0)
 96 |       .simulate('change', { target: { checked: false } })
 97 |     await inputs().at(0).simulate('blur')
 98 | 
 99 |     expectValues(false, false, true)
100 | 
101 |     expect(submit().props().disabled).toBeFalsy()
102 |     expect(cancel().props().disabled).toBeFalsy()
103 | 
104 |     await cancel().simulate('click')
105 | 
106 |     expect(submit().props().disabled).toBeTruthy()
107 |     expect(cancel().props().disabled).toBeTruthy()
108 |     expectValues(true, false, true)
109 |   })
110 |   it('sets disabled when readOnly', () => {
111 |     const onSubmit = jest.fn()
112 |     const wrapper = mount(
113 |       <Formol onSubmit={onSubmit} item={{ checkboxSet: ['II'] }}>
114 |         <Field type="checkbox-set" readOnly>
115 |           Checkbox Set
116 |         </Field>
117 |       </Formol>
118 |     )
119 |     const inputs = () => wrapper.find('Field').find('input')
120 |     inputs().map((input) => expect(input.props().disabled).toEqual(true))
121 |   })
122 | })
123 | 


--------------------------------------------------------------------------------
/src/Field.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { FaQuestionCircle } from 'react-icons/fa'
  3 | 
  4 | import { block } from './utils'
  5 | import fieldPropsAdapter from './utils/fieldPropsAdapter'
  6 | 
  7 | @fieldPropsAdapter
  8 | @block
  9 | export default class Field extends React.PureComponent {
 10 |   constructor(props) {
 11 |     super(props)
 12 |     this.element = React.createRef()
 13 |     this.state = {
 14 |       focus: false,
 15 |     }
 16 | 
 17 |     this.handleChange = this.handleChange.bind(this)
 18 |     this.handleFocus = this.handleFocus.bind(this)
 19 |     this.handleBlur = this.handleBlur.bind(this)
 20 |   }
 21 | 
 22 |   componentDidMount() {
 23 |     const { register, name, validator, validityErrors } = this.props
 24 |     register(name, this.element, validator, validityErrors)
 25 |   }
 26 | 
 27 |   componentWillUnmount() {
 28 |     const { unregister, name } = this.props
 29 |     unregister(name)
 30 |     this.handleChange()
 31 |   }
 32 | 
 33 |   handleChange(value, error) {
 34 |     const { name, unformatter, handleChange } = this.props
 35 |     handleChange(name, unformatter(value), error)
 36 |   }
 37 | 
 38 |   handleFocus() {
 39 |     this.setState({
 40 |       focus: true,
 41 |     })
 42 |   }
 43 | 
 44 |   handleBlur() {
 45 |     const { name, value, normalizer, handleChange, handleEntered } = this.props
 46 |     // Normalize data
 47 |     const normalized = normalizer(value)
 48 |     if (normalized !== value) {
 49 |       handleChange(name, normalized)
 50 |     }
 51 |     this.setState({
 52 |       focus: false,
 53 |     })
 54 |     handleEntered(name)
 55 |   }
 56 | 
 57 |   render(b) {
 58 |     const {
 59 |       name,
 60 |       value,
 61 |       type,
 62 |       title,
 63 |       modified,
 64 |       className,
 65 |       validator,
 66 |       readOnly,
 67 |       disabled,
 68 |       unit,
 69 |       extras,
 70 |       formatter,
 71 |       normalizer,
 72 |       unformatter,
 73 |       children,
 74 |       classNameModifiers,
 75 |       TypeField,
 76 |       i18n,
 77 |       error,
 78 |       validityErrors,
 79 |       handleChange,
 80 |       handleEntered,
 81 |       register,
 82 |       unregister,
 83 |       ...props
 84 |     } = this.props
 85 | 
 86 |     const { focus } = this.state
 87 | 
 88 |     const Label = TypeField.formolFieldLabelElement || 'label'
 89 |     return (
 90 |       <div
 91 |         className={b.mix(className).m({
 92 |           type,
 93 |           name,
 94 |           error: !!error,
 95 |           disabled,
 96 |           readOnly,
 97 |           required: !!props.required,
 98 |           modified,
 99 |           focus,
100 |           ...classNameModifiers.field,
101 |         })}
102 |       >
103 |         <Label
104 |           className={b.e('label').m(classNameModifiers.label)}
105 |           title={title}
106 |           onClick={(evt) => {
107 |             /*
108 |               To prevent the calendar from not closing when the datepicker is
109 |               wrapped inside label. See this issue
110 |               https://github.com/Hacker0x01/react-datepicker/issues/1012#issuecomment-735342311
111 |             */
112 |             if (type === 'date' && evt.target.id !== 'labelContent') {
113 |               evt.preventDefault()
114 |             }
115 |           }}
116 |         >
117 |           {children && (
118 |             <span
119 |               className={b.e('title').m(classNameModifiers.labelText)}
120 |               id="labelContent"
121 |             >
122 |               {children}
123 |               {title && <FaQuestionCircle />}
124 |             </span>
125 |           )}
126 |           <TypeField
127 |             name={name}
128 |             value={value}
129 |             type={type}
130 |             disabled={disabled}
131 |             readOnly={readOnly}
132 |             i18n={i18n}
133 |             elementRef={this.element}
134 |             className={b.e('element')}
135 |             onFocus={this.handleFocus}
136 |             onBlur={this.handleBlur}
137 |             onChange={this.handleChange}
138 |             {...props}
139 |           />
140 |           {unit && (
141 |             <div className={b.e('unit').m(classNameModifiers.unit)}>{unit}</div>
142 |           )}
143 |           {extras}
144 |         </Label>
145 |         {error && (
146 |           <div className={b.e('error-text').m(classNameModifiers.error)}>
147 |             {error}
148 |           </div>
149 |         )}
150 |       </div>
151 |     )
152 |   }
153 | }
154 | 


--------------------------------------------------------------------------------
/test/formol/types/color.test.jsx:
--------------------------------------------------------------------------------
  1 | import { mount } from 'enzyme'
  2 | import React from 'react'
  3 | 
  4 | import Formol, { Field } from '../../../src'
  5 | 
  6 | describe('Color field', () => {
  7 |   it('handles changes', async () => {
  8 |     const onSubmit = jest.fn()
  9 |     const wrapper = mount(
 10 |       <Formol onSubmit={onSubmit} item={{ color: '#bada55' }}>
 11 |         <Field type="color">Color</Field>
 12 |       </Formol>
 13 |     )
 14 |     const input = () => wrapper.find('Field').find('input').first()
 15 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 16 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 17 | 
 18 |     expect(submit().props().disabled).toBeTruthy()
 19 |     expect(cancel().props().disabled).toBeTruthy()
 20 |     expect(input().props().type).toEqual('color')
 21 |     expect(input().props().value).toEqual('#bada55')
 22 | 
 23 |     await input().simulate('focus')
 24 |     await input().simulate('change', { target: { value: '#c0ffee' } })
 25 |     await input().simulate('blur')
 26 | 
 27 |     expect(input().props().value).toEqual('#c0ffee')
 28 |     expect(submit().props().disabled).toBeFalsy()
 29 |     expect(cancel().props().disabled).toBeFalsy()
 30 | 
 31 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
 32 | 
 33 |     await submit().simulate('submit')
 34 | 
 35 |     expect(onSubmit).toHaveBeenCalledWith(
 36 |       { color: '#c0ffee' },
 37 |       { color: '#bada55' },
 38 |       ['color'],
 39 |       true
 40 |     )
 41 |     expect(input().props().value).toEqual('#c0ffee')
 42 |   })
 43 |   it('cancels changes', async () => {
 44 |     const onSubmit = jest.fn()
 45 |     const wrapper = mount(
 46 |       <Formol onSubmit={onSubmit} item={{ color: '#bada55' }}>
 47 |         <Field type="color">Color</Field>
 48 |       </Formol>
 49 |     )
 50 |     const input = () => wrapper.find('Field').find('input').first()
 51 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 52 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 53 | 
 54 |     expect(submit().props().disabled).toBeTruthy()
 55 |     expect(cancel().props().disabled).toBeTruthy()
 56 |     expect(input().props().value).toEqual('#bada55')
 57 | 
 58 |     await input().simulate('focus')
 59 |     await input().simulate('change', { target: { value: '#c0ffee' } })
 60 |     await input().simulate('blur')
 61 | 
 62 |     expect(input().props().value).toEqual('#c0ffee')
 63 |     expect(submit().props().disabled).toBeFalsy()
 64 |     expect(cancel().props().disabled).toBeFalsy()
 65 | 
 66 |     await cancel().simulate('click')
 67 | 
 68 |     expect(input().props().value).toEqual('#bada55')
 69 |   })
 70 |   it('prevents submission on field error', async () => {
 71 |     const onSubmit = jest.fn()
 72 |     const wrapper = mount(
 73 |       <Formol onSubmit={onSubmit} item={{ color: '#bada55' }}>
 74 |         <Field type="color">Color</Field>
 75 |       </Formol>
 76 |     )
 77 |     const input = () => wrapper.find('Field').find('input').first()
 78 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 79 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 80 | 
 81 |     expect(submit().props().disabled).toBeTruthy()
 82 |     expect(cancel().props().disabled).toBeTruthy()
 83 |     expect(input().props().value).toEqual('#bada55')
 84 | 
 85 |     await input().simulate('focus')
 86 |     await input().simulate('change', { target: { value: 'not an color' } })
 87 |     await input().simulate('blur')
 88 |     expect(wrapper.find('.Formol_Field__error-text').text()).toEqual(
 89 |       'not an color is not a valid color'
 90 |     )
 91 | 
 92 |     expect(input().props().value).toEqual('not an color')
 93 |     expect(submit().props().disabled).toBeFalsy()
 94 |     expect(cancel().props().disabled).toBeFalsy()
 95 | 
 96 |     expect(wrapper.getDOMNode().checkValidity()).toBeFalsy()
 97 | 
 98 |     expect(input().props().value).toEqual('not an color')
 99 | 
100 |     await input().simulate('focus')
101 |     await input().simulate('change', {
102 |       target: { value: '#deadbe' },
103 |     })
104 |     await input().simulate('blur')
105 |     expect(wrapper.find('.Formol_Field__error-text').length).toEqual(0)
106 | 
107 |     await submit().simulate('submit')
108 | 
109 |     expect(onSubmit).toHaveBeenCalledWith(
110 |       { color: '#deadbe' },
111 |       { color: '#bada55' },
112 |       ['color'],
113 |       true
114 |     )
115 |     expect(input().props().value).toEqual('#deadbe')
116 |   })
117 | })
118 | 


--------------------------------------------------------------------------------
/test/formol/types/datepicker.test.jsx:
--------------------------------------------------------------------------------
  1 | import { mount } from 'enzyme'
  2 | import React from 'react'
  3 | 
  4 | import Formol, { Field } from '../../../src'
  5 | 
  6 | const nativeType = 'text' // react-datepicker uses input with type='text'
  7 | const rawValue1 = '1988-05-27'
  8 | const rawValue2 = '2121-12-12'
  9 | const title = 'Date'
 10 | const type = 'date'
 11 | const value1 = '05/27/1988'
 12 | const value2 = '12/12/2121'
 13 | 
 14 | describe('Datepicker field', () => {
 15 |   it('handles changes', async () => {
 16 |     const onSubmit = jest.fn()
 17 |     const wrapper = mount(
 18 |       <Formol onSubmit={onSubmit} item={{ [type]: rawValue1 }}>
 19 |         <Field name={type} type={type}>
 20 |           {title}
 21 |         </Field>
 22 |       </Formol>
 23 |     )
 24 |     const input = () => wrapper.find('Field').find('input').first()
 25 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 26 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 27 | 
 28 |     expect(submit().props().disabled).toBeTruthy()
 29 |     expect(cancel().props().disabled).toBeTruthy()
 30 |     expect(input().props().type).toEqual(nativeType)
 31 |     expect(input().props().value).toEqual(value1)
 32 | 
 33 |     await input().simulate('change', { target: { value: value2 } })
 34 | 
 35 |     expect(input().props().value).toEqual(value2)
 36 |     expect(submit().props().disabled).toBeFalsy()
 37 |     expect(cancel().props().disabled).toBeFalsy()
 38 | 
 39 |     // Validity is broken in current jsdom
 40 |     // TODO: Uncomment with jsdom 16
 41 |     // expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
 42 | 
 43 |     await submit().simulate('submit')
 44 | 
 45 |     expect(onSubmit).toHaveBeenCalledWith(
 46 |       { [type]: rawValue2 },
 47 |       { [type]: rawValue1 },
 48 |       [type],
 49 |       true
 50 |     )
 51 |     expect(input().props().value).toEqual(value2)
 52 |   })
 53 |   it('cancels changes', async () => {
 54 |     const onSubmit = jest.fn()
 55 |     const wrapper = mount(
 56 |       <Formol onSubmit={onSubmit} item={{ [type]: rawValue1 }}>
 57 |         <Field name={type} type={type}>
 58 |           {title}
 59 |         </Field>
 60 |       </Formol>
 61 |     )
 62 |     const input = () => wrapper.find('Field').find('input').first()
 63 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 64 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 65 | 
 66 |     expect(submit().props().disabled).toBeTruthy()
 67 |     expect(cancel().props().disabled).toBeTruthy()
 68 |     expect(input().props().value).toEqual(value1)
 69 | 
 70 |     await input().simulate('change', { target: { value: value2 } })
 71 | 
 72 |     expect(input().props().value).toEqual(value2)
 73 |     expect(submit().props().disabled).toBeFalsy()
 74 |     expect(cancel().props().disabled).toBeFalsy()
 75 | 
 76 |     await cancel().simulate('click')
 77 | 
 78 |     expect(input().props().value).toEqual(value1)
 79 |   })
 80 |   it('calls event.preventDefault when type is date', () => {
 81 |     const event = { preventDefault: jest.fn() }
 82 |     jest.spyOn(event, 'preventDefault')
 83 |     const wrapper = mount(
 84 |       <Formol>
 85 |         <Field type="date" />
 86 |       </Formol>
 87 |     )
 88 | 
 89 |     wrapper.find('label').simulate('click', event)
 90 |     expect(event.preventDefault).toBeCalled()
 91 |   })
 92 |   it('renders properly when read only', () => {
 93 |     const wrapper = mount(
 94 |       <Formol item={{ [type]: rawValue1 }}>
 95 |         <Field type="date" readOnly>
 96 |           {title}
 97 |         </Field>
 98 |       </Formol>
 99 |     )
100 |     const input = () => wrapper.find('input')
101 |     expect(input().props().readOnly).toBeTruthy()
102 |     expect(input().props().value).toBe(value1)
103 |   })
104 |   it('handles empty value', async () => {
105 |     const onSubmit = jest.fn()
106 |     const wrapper = mount(
107 |       <Formol onSubmit={onSubmit}>
108 |         <Field type={type} name={type}>
109 |           {title}
110 |         </Field>
111 |       </Formol>
112 |     )
113 | 
114 |     const input = () => wrapper.find(`input[name="${type}"]`)
115 |     const clearDate = () => wrapper.find('button[aria-label="Close"]')
116 | 
117 |     expect(input().props().value).toEqual('')
118 | 
119 |     await input().simulate('change', { target: { value: rawValue1 } })
120 |     expect(input().props().value).toEqual(value1)
121 | 
122 |     await clearDate().simulate('click')
123 |     expect(input().props().value).toEqual('')
124 |   })
125 | })
126 | 


--------------------------------------------------------------------------------
/test/formol/types/tel.test.jsx:
--------------------------------------------------------------------------------
  1 | import { mount } from 'enzyme'
  2 | import React from 'react'
  3 | 
  4 | import Formol, { Field } from '../../../src'
  5 | 
  6 | describe('Tel field', () => {
  7 |   it('handles changes', async () => {
  8 |     const onSubmit = jest.fn()
  9 |     const wrapper = mount(
 10 |       <Formol onSubmit={onSubmit} item={{ tel: '311-555-2368' }}>
 11 |         <Field type="tel">Tel</Field>
 12 |       </Formol>
 13 |     )
 14 |     const input = () => wrapper.find('Field').find('input').first()
 15 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 16 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 17 | 
 18 |     expect(submit().props().disabled).toBeTruthy()
 19 |     expect(cancel().props().disabled).toBeTruthy()
 20 |     expect(input().props().type).toEqual('tel')
 21 |     expect(input().props().value).toEqual('311-555-2368')
 22 | 
 23 |     await input().simulate('focus')
 24 |     await input().simulate('change', { target: { value: '311-555-1212' } })
 25 |     await input().simulate('blur')
 26 | 
 27 |     expect(input().props().value).toEqual('311-555-1212')
 28 |     expect(submit().props().disabled).toBeFalsy()
 29 |     expect(cancel().props().disabled).toBeFalsy()
 30 | 
 31 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
 32 | 
 33 |     await submit().simulate('submit')
 34 | 
 35 |     expect(onSubmit).toHaveBeenCalledWith(
 36 |       { tel: '311-555-1212' },
 37 |       { tel: '311-555-2368' },
 38 |       ['tel'],
 39 |       true
 40 |     )
 41 |     expect(input().props().value).toEqual('311-555-1212')
 42 |   })
 43 |   it('cancels changes', async () => {
 44 |     const onSubmit = jest.fn()
 45 |     const wrapper = mount(
 46 |       <Formol onSubmit={onSubmit} item={{ tel: '311-555-2368' }}>
 47 |         <Field type="tel">Tel</Field>
 48 |       </Formol>
 49 |     )
 50 |     const input = () => wrapper.find('Field').find('input').first()
 51 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 52 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 53 | 
 54 |     expect(submit().props().disabled).toBeTruthy()
 55 |     expect(cancel().props().disabled).toBeTruthy()
 56 |     expect(input().props().value).toEqual('311-555-2368')
 57 | 
 58 |     await input().simulate('focus')
 59 |     await input().simulate('change', { target: { value: '311-555-1212' } })
 60 |     await input().simulate('blur')
 61 | 
 62 |     expect(input().props().value).toEqual('311-555-1212')
 63 |     expect(submit().props().disabled).toBeFalsy()
 64 |     expect(cancel().props().disabled).toBeFalsy()
 65 | 
 66 |     await cancel().simulate('click')
 67 | 
 68 |     expect(input().props().value).toEqual('311-555-2368')
 69 |   })
 70 |   it('prevents submission on field error', async () => {
 71 |     const onSubmit = jest.fn()
 72 |     const wrapper = mount(
 73 |       <Formol onSubmit={onSubmit} item={{ tel: '311-555-2368' }}>
 74 |         <Field type="tel">Tel</Field>
 75 |       </Formol>
 76 |     )
 77 |     const input = () => wrapper.find('Field').find('input').first()
 78 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 79 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 80 | 
 81 |     expect(submit().props().disabled).toBeTruthy()
 82 |     expect(cancel().props().disabled).toBeTruthy()
 83 |     expect(input().props().value).toEqual('311-555-2368')
 84 | 
 85 |     await input().simulate('focus')
 86 |     await input().simulate('change', { target: { value: 'not an tel' } })
 87 |     await input().simulate('blur')
 88 |     expect(wrapper.find('.Formol_Field__error-text').text()).toEqual(
 89 |       'Constraints not satisfied'
 90 |     )
 91 | 
 92 |     expect(input().props().value).toEqual('not an tel')
 93 |     expect(submit().props().disabled).toBeFalsy()
 94 |     expect(cancel().props().disabled).toBeFalsy()
 95 | 
 96 |     expect(wrapper.getDOMNode().checkValidity()).toBeFalsy()
 97 | 
 98 |     expect(input().props().value).toEqual('not an tel')
 99 | 
100 |     await input().simulate('focus')
101 |     await input().simulate('change', { target: { value: '888-235-5678' } })
102 |     await input().simulate('blur')
103 |     expect(wrapper.find('.Formol_Field__error-text').length).toEqual(0)
104 | 
105 |     await submit().simulate('submit')
106 | 
107 |     expect(onSubmit).toHaveBeenCalledWith(
108 |       { tel: '888-235-5678' },
109 |       { tel: '311-555-2368' },
110 |       ['tel'],
111 |       true
112 |     )
113 |     expect(input().props().value).toEqual('888-235-5678')
114 |   })
115 | })
116 | 


--------------------------------------------------------------------------------
/test/formol/types/email.test.jsx:
--------------------------------------------------------------------------------
  1 | import { mount } from 'enzyme'
  2 | import React from 'react'
  3 | 
  4 | import Formol, { Field } from '../../../src'
  5 | 
  6 | describe('Email field', () => {
  7 |   it('handles changes', async () => {
  8 |     const onSubmit = jest.fn()
  9 |     const wrapper = mount(
 10 |       <Formol onSubmit={onSubmit} item={{ email: 'foo@bar.baz' }}>
 11 |         <Field type="email">Email</Field>
 12 |       </Formol>
 13 |     )
 14 |     const input = () => wrapper.find('Field').find('input').first()
 15 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 16 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 17 | 
 18 |     expect(submit().props().disabled).toBeTruthy()
 19 |     expect(cancel().props().disabled).toBeTruthy()
 20 |     expect(input().props().type).toEqual('email')
 21 |     expect(input().props().value).toEqual('foo@bar.baz')
 22 | 
 23 |     await input().simulate('focus')
 24 |     await input().simulate('change', { target: { value: 'fuu@bar.baz' } })
 25 |     await input().simulate('blur')
 26 | 
 27 |     expect(input().props().value).toEqual('fuu@bar.baz')
 28 |     expect(submit().props().disabled).toBeFalsy()
 29 |     expect(cancel().props().disabled).toBeFalsy()
 30 | 
 31 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
 32 | 
 33 |     await submit().simulate('submit')
 34 | 
 35 |     expect(onSubmit).toHaveBeenCalledWith(
 36 |       { email: 'fuu@bar.baz' },
 37 |       { email: 'foo@bar.baz' },
 38 |       ['email'],
 39 |       true
 40 |     )
 41 |     expect(input().props().value).toEqual('fuu@bar.baz')
 42 |   })
 43 |   it('cancels changes', async () => {
 44 |     const onSubmit = jest.fn()
 45 |     const wrapper = mount(
 46 |       <Formol onSubmit={onSubmit} item={{ email: 'foo@bar.baz' }}>
 47 |         <Field type="email">Email</Field>
 48 |       </Formol>
 49 |     )
 50 |     const input = () => wrapper.find('Field').find('input').first()
 51 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 52 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 53 | 
 54 |     expect(submit().props().disabled).toBeTruthy()
 55 |     expect(cancel().props().disabled).toBeTruthy()
 56 |     expect(input().props().value).toEqual('foo@bar.baz')
 57 | 
 58 |     await input().simulate('focus')
 59 |     await input().simulate('change', { target: { value: 'fuu@bar.baz' } })
 60 |     await input().simulate('blur')
 61 | 
 62 |     expect(input().props().value).toEqual('fuu@bar.baz')
 63 |     expect(submit().props().disabled).toBeFalsy()
 64 |     expect(cancel().props().disabled).toBeFalsy()
 65 | 
 66 |     await cancel().simulate('click')
 67 | 
 68 |     expect(input().props().value).toEqual('foo@bar.baz')
 69 |   })
 70 |   it('prevents submission on field error', async () => {
 71 |     const onSubmit = jest.fn()
 72 |     const wrapper = mount(
 73 |       <Formol onSubmit={onSubmit} item={{ email: 'foo@bar.baz' }}>
 74 |         <Field type="email">Email</Field>
 75 |       </Formol>
 76 |     )
 77 |     const input = () => wrapper.find('Field').find('input').first()
 78 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 79 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 80 | 
 81 |     expect(submit().props().disabled).toBeTruthy()
 82 |     expect(cancel().props().disabled).toBeTruthy()
 83 |     expect(input().props().value).toEqual('foo@bar.baz')
 84 | 
 85 |     await input().simulate('focus')
 86 |     await input().simulate('change', { target: { value: 'not an email' } })
 87 |     await input().simulate('blur')
 88 |     expect(wrapper.find('.Formol_Field__error-text').text()).toEqual(
 89 |       'Constraints not satisfied'
 90 |     )
 91 | 
 92 |     expect(input().props().value).toEqual('not an email')
 93 |     expect(submit().props().disabled).toBeFalsy()
 94 |     expect(cancel().props().disabled).toBeFalsy()
 95 | 
 96 |     expect(wrapper.getDOMNode().checkValidity()).toBeFalsy()
 97 | 
 98 |     expect(input().props().value).toEqual('not an email')
 99 | 
100 |     await input().simulate('focus')
101 |     await input().simulate('change', { target: { value: 'bar@bar.bar' } })
102 |     await input().simulate('blur')
103 |     expect(wrapper.find('.Formol_Field__error-text').length).toEqual(0)
104 | 
105 |     await submit().simulate('submit')
106 | 
107 |     expect(onSubmit).toHaveBeenCalledWith(
108 |       { email: 'bar@bar.bar' },
109 |       { email: 'foo@bar.baz' },
110 |       ['email'],
111 |       true
112 |     )
113 |     expect(input().props().value).toEqual('bar@bar.bar')
114 |   })
115 | })
116 | 


--------------------------------------------------------------------------------
/demos/src/demos.sass:
--------------------------------------------------------------------------------
  1 | @import '../src/sass/default'
  2 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap')
  3 | @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap')
  4 | 
  5 | $grey: #8D929A
  6 | $lightgrey: #F6F8FA
  7 | $navyblue: #190E4F
  8 | $purple: #6E57FF
  9 | $purpleHover: $lightgrey
 10 | $silver: #CED0D4
 11 | 
 12 | $formol-color: $navyblue
 13 | $formol-color-action: $purple
 14 | 
 15 | body
 16 |   color: $navyblue
 17 |   font-family: "Inter", sans-serif
 18 |   font-optical-sizing: auto
 19 |   font-style: normal
 20 |   font-variation-settings:"slnt" 0
 21 |   font-weight: normal
 22 |   margin: 0
 23 | 
 24 | h1
 25 |   color: $navyblue
 26 |   font-weight: 500
 27 | 
 28 | h2
 29 |   color: $navyblue
 30 |   font-weight: normal
 31 | 
 32 | h3
 33 |   color: $purple
 34 |   font-family: 'JetBrains Mono', monospace
 35 |   font-weight: 500
 36 | 
 37 |   &::before
 38 |     background: $purple
 39 |     content: ''
 40 |     display: inline-block
 41 |     height: 2px
 42 |     margin-right: .25em
 43 |     vertical-align: middle
 44 |     width: 10px
 45 | 
 46 | h4
 47 |   font-size: 1.15rem
 48 |   font-weight: normal
 49 | 
 50 | .flex-container
 51 |   display: flex
 52 | 
 53 | .app-container
 54 |   box-sizing: border-box
 55 |   display: flex
 56 |   flex-direction: column
 57 |   height: 100vh
 58 |   padding-top: 70px
 59 | 
 60 | .navbar
 61 |   border-bottom: 1px solid $silver
 62 |   box-sizing: border-box
 63 |   display: flex
 64 |   height: 70px
 65 |   justify-content: space-between
 66 |   padding: 1rem 6rem
 67 |   position: fixed
 68 |   top: 0
 69 |   width: 100%
 70 |   z-index: 1000
 71 | 
 72 |   &-logo
 73 |     width: 130px
 74 | 
 75 |   .demo-selector
 76 |     align-items: center
 77 |     display: flex
 78 |     justify-items: center
 79 | 
 80 |   button
 81 |     background-color: #fff
 82 |     border-radius: 4px
 83 |     border: 2px solid transparent
 84 |     color: $navyblue
 85 |     cursor: pointer
 86 |     font-size: 16px
 87 |     margin: 0 10px
 88 |     padding: 0.5rem 1.5rem
 89 |     transition: background .3s
 90 | 
 91 |     &:hover
 92 |       background-color: $purpleHover
 93 | 
 94 |     &.active
 95 |       border-color: $purple
 96 |       color: $purple
 97 | 
 98 |   .github
 99 |     &-link
100 |       align-items: center
101 |       border-radius: 4px
102 |       color: $navyblue !important
103 |       cursor: pointer
104 |       display: flex
105 |       justify-items: center
106 |       padding: 0.5rem 1rem
107 |       text-decoration: none
108 | 
109 |       &:hover
110 |         background-color: $purpleHover
111 | 
112 |     &-icon
113 |       height: 1.2em
114 |       margin-right: 0.5em
115 |       width: 1.2em
116 | 
117 | .demo-container
118 |   box-sizing: border-box
119 |   display: grid
120 |   flex: 1
121 |   grid-template-columns: 1fr 40%
122 |   height: calc(100vh - 70px)
123 | 
124 | .demo-header
125 |   border-bottom: 1px solid $silver
126 | 
127 |   .logo-version-container
128 |     align-items: end
129 |     display: flex
130 |     flex-direction: row
131 | 
132 |     .logo-baseline
133 |       margin: 1em 0
134 |       width: 250px
135 | 
136 |     .version
137 |       color: $grey
138 |       font-size: 1.15rem
139 |       font-weight: 500
140 |       margin-bottom: 0.85rem
141 |       margin-left: 20px
142 | 
143 |   h4
144 |     margin-top: 10px
145 | 
146 | .form-container
147 |   box-sizing: border-box
148 |   overflow-y: auto
149 |   padding: 1rem 6rem
150 | 
151 | .panel
152 |   background-color: $lightgrey
153 |   box-sizing: border-box
154 |   height: 100%
155 |   line-height: 1.75em
156 |   margin: 0
157 |   overflow-y: auto
158 |   padding: 2em 4em
159 |   position: relative
160 | 
161 | pre
162 |   font-family: "JetBrains Mono", monospace
163 |   font-optical-sizing: auto
164 |   font-size: 0.825em
165 |   font-style: normal
166 |   font-weight: 400
167 |   white-space: pre-wrap
168 |   word-wrap: break-word
169 | 
170 | .Formol_Field__title
171 |   color: $navyblue !important
172 |   font-weight: 500
173 | 
174 | .Formol_Field__element
175 |   border-color: $silver!important
176 | 
177 |   &:hover, &:focus
178 |     border-color: $purple!important
179 | 
180 | .Formol_Formol
181 |   &__submit, &__cancel
182 |     background-color: white
183 |     border-radius: 4px
184 |     border: 2px solid $purple
185 |     color: $purple
186 |     height: 40px
187 |     width: 80px
188 | 
189 |     &:hover
190 |       background-color: $purpleHover !important
191 | 
192 | .Formol_FileField__placeholder
193 |   align-items: center
194 |   padding: 1em 0
195 | 
196 |   > svg
197 |     margin: 0 auto
198 | 
199 | .Formol_PasswordField__eye svg
200 |   background-color: $silver!important
201 | 
202 | .react-datepicker__close-icon::after
203 |   background-color: $purple!important
204 | 


--------------------------------------------------------------------------------
/src/utils/fieldPropsAdapter.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | import ConditionalContextWrapper from '../ConditionalContext'
  4 | import FormolContextWrapper from '../FormolContext'
  5 | import { diff, get } from './object'
  6 | 
  7 | let UNAMED_COUNT = 0
  8 | 
  9 | // These aren't static because we need to know which props has been given
 10 | const defaultProps = {
 11 |   type: 'text',
 12 |   formatter: (v) => v,
 13 |   normalizer: (v) => (v && v.trim ? v.trim() : v),
 14 |   unformatter: (v) => v,
 15 |   classNameModifiers: {},
 16 | }
 17 | 
 18 | export default function fieldPropsAdapter(WrappedComponent) {
 19 |   @ConditionalContextWrapper
 20 |   @FormolContextWrapper
 21 |   class FieldPropsAdapter extends React.PureComponent {
 22 |     constructor(props) {
 23 |       super(props)
 24 |       if (props.value) {
 25 |         throw new Error(
 26 |           'Do not use value on fields. ' +
 27 |             'Set a value for this field in the form item attribute.'
 28 |         )
 29 |       }
 30 |       if (!props.context.transientItem) {
 31 |         throw new Error('Field must be used inside Form')
 32 |       }
 33 | 
 34 |       if (props.name) {
 35 |         this.name = props.name
 36 |       } else if (typeof props.children === 'string') {
 37 |         this.name = props.children
 38 |           .toLowerCase()
 39 |           .replace(/\W+(.)/g, (match, chr) => chr.toUpperCase())
 40 |       } else {
 41 |         this.name = `field-${++UNAMED_COUNT}`
 42 |       }
 43 | 
 44 |       this.register = this.register.bind(this)
 45 |       this.unregister = this.unregister.bind(this)
 46 |     }
 47 | 
 48 |     componentDidUpdate(oldProps) {
 49 |       const {
 50 |         context: { transientItem: oldTransientItem },
 51 |       } = oldProps
 52 |       const {
 53 |         context: { transientItem, handleChanged },
 54 |       } = this.props
 55 |       const propsDiff = diff(this.props, oldProps, Object.keys(this.props))
 56 |       if (
 57 |         get(transientItem, this.name) !== get(oldTransientItem, this.name) ||
 58 |         (Object.keys(propsDiff).length &&
 59 |           !Object.keys(propsDiff).every((prop) =>
 60 |             ['context', 'conditionalContext'].includes(prop)
 61 |           ))
 62 |       ) {
 63 |         handleChanged(this.name)
 64 |       }
 65 |     }
 66 | 
 67 |     register(name, element, validator, validityErrors) {
 68 |       const { context, conditionalContext } = this.props
 69 |       context.register(name, element, validator, validityErrors)
 70 |       conditionalContext.register && conditionalContext.register(name)
 71 |     }
 72 | 
 73 |     unregister(name) {
 74 |       const { context, conditionalContext } = this.props
 75 |       context.unregister(name)
 76 |       conditionalContext.unregister && conditionalContext.unregister(name)
 77 |     }
 78 | 
 79 |     render() {
 80 |       const props = { ...defaultProps, ...this.props }
 81 |       const TypeField = props.context.types[props.type]
 82 |       if (!TypeField) {
 83 |         throw new Error(`Unknown type "${props.type}" for field "${this.name}"`)
 84 |       }
 85 |       const itemValue = get(props.context.item, this.name)
 86 |       const transientValue = get(props.context.transientItem, this.name)
 87 |       const value = props.formatter(transientValue)
 88 |       const propsDefaultsFromField = TypeField.defaultFieldProps
 89 |         ? Object.entries(TypeField.defaultFieldProps).reduce(
 90 |             (newProps, [name, getter]) => {
 91 |               newProps[name] = getter(props, value)
 92 |               return newProps
 93 |             },
 94 |             {}
 95 |           )
 96 |         : {}
 97 | 
 98 |       const {
 99 |         context: {
100 |           readOnly: formReadOnly,
101 |           i18n,
102 |           errors,
103 |           enteredFields,
104 |           handleChange,
105 |           handleEntered,
106 |         },
107 |         conditionalContext,
108 |         readOnly,
109 |         ...finalProps
110 |       } = {
111 |         name: this.name,
112 |         value,
113 |         modified: itemValue !== transientValue,
114 |         TypeField,
115 |         ...defaultProps,
116 |         ...propsDefaultsFromField,
117 |         ...this.props,
118 |         ...props.conditionalContext.propsOverride,
119 |       }
120 | 
121 |       return (
122 |         <WrappedComponent
123 |           {...finalProps}
124 |           readOnly={formReadOnly || readOnly}
125 |           i18n={i18n}
126 |           error={
127 |             enteredFields.includes(this.name) && errors[this.name]
128 |               ? errors[this.name]
129 |               : null
130 |           }
131 |           handleChange={handleChange}
132 |           handleEntered={handleEntered}
133 |           register={this.register}
134 |           unregister={this.unregister}
135 |         />
136 |       )
137 |     }
138 |   }
139 |   return FieldPropsAdapter
140 | }
141 | 


--------------------------------------------------------------------------------
/test/formol/types/number.test.jsx:
--------------------------------------------------------------------------------
  1 | import { mount } from 'enzyme'
  2 | import React from 'react'
  3 | 
  4 | import Formol, { Field } from '../../../src'
  5 | 
  6 | describe('Number field', () => {
  7 |   it('handles changes', async () => {
  8 |     const onSubmit = jest.fn()
  9 |     const wrapper = mount(
 10 |       <Formol onSubmit={onSubmit} item={{ number: 42 }}>
 11 |         <Field type="number">Number</Field>
 12 |       </Formol>
 13 |     )
 14 |     const input = () => wrapper.find('Field').find('input').first()
 15 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 16 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 17 | 
 18 |     expect(submit().props().disabled).toBeTruthy()
 19 |     expect(cancel().props().disabled).toBeTruthy()
 20 |     expect(input().props().value).toEqual(42)
 21 | 
 22 |     await input().simulate('focus')
 23 |     await input().simulate('change', { target: { value: 1337 } })
 24 |     await input().simulate('blur')
 25 | 
 26 |     expect(input().props().value).toEqual(1337)
 27 |     expect(submit().props().disabled).toBeFalsy()
 28 |     expect(cancel().props().disabled).toBeFalsy()
 29 | 
 30 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
 31 | 
 32 |     await submit().simulate('submit')
 33 | 
 34 |     expect(onSubmit).toHaveBeenCalledWith(
 35 |       { number: 1337 },
 36 |       { number: 42 },
 37 |       ['number'],
 38 |       true
 39 |     )
 40 |     expect(input().props().value).toEqual(1337)
 41 |   })
 42 |   it('cancels changes', async () => {
 43 |     const onSubmit = jest.fn()
 44 |     const wrapper = mount(
 45 |       <Formol onSubmit={onSubmit} item={{ number: 42 }}>
 46 |         <Field type="number">Number</Field>
 47 |       </Formol>
 48 |     )
 49 |     const input = () => wrapper.find('Field').find('input').first()
 50 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 51 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 52 | 
 53 |     expect(submit().props().disabled).toBeTruthy()
 54 |     expect(cancel().props().disabled).toBeTruthy()
 55 |     expect(input().props().value).toEqual(42)
 56 | 
 57 |     await input().simulate('focus')
 58 |     await input().simulate('change', { target: { value: 1337 } })
 59 |     await input().simulate('blur')
 60 | 
 61 |     expect(input().props().value).toEqual(1337)
 62 |     expect(submit().props().disabled).toBeFalsy()
 63 |     expect(cancel().props().disabled).toBeFalsy()
 64 | 
 65 |     await cancel().simulate('click')
 66 | 
 67 |     expect(input().props().value).toEqual(42)
 68 |   })
 69 |   it('prevents submission on field error', async () => {
 70 |     const onSubmit = jest.fn()
 71 |     const wrapper = mount(
 72 |       <Formol onSubmit={onSubmit} item={{ number: 42 }}>
 73 |         <Field type="number" max={2000}>
 74 |           Number
 75 |         </Field>
 76 |       </Formol>
 77 |     )
 78 |     const input = () => wrapper.find('Field').find('input').first()
 79 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 80 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 81 | 
 82 |     expect(submit().props().disabled).toBeTruthy()
 83 |     expect(cancel().props().disabled).toBeTruthy()
 84 |     expect(input().props().type).toEqual('number')
 85 |     expect(input().props().value).toEqual(42)
 86 | 
 87 |     await input().simulate('focus')
 88 |     await input().simulate('change', { target: { value: 4000 } })
 89 |     await input().simulate('blur')
 90 | 
 91 |     expect(wrapper.find('.Formol_Field__error-text').text()).toEqual(
 92 |       'Constraints not satisfied'
 93 |     )
 94 | 
 95 |     expect(input().props().value).toEqual(4000)
 96 |     expect(submit().props().disabled).toBeFalsy()
 97 |     expect(cancel().props().disabled).toBeFalsy()
 98 | 
 99 |     expect(wrapper.getDOMNode().checkValidity()).toBeFalsy()
100 | 
101 |     expect(input().props().value).toEqual(4000)
102 | 
103 |     await input().simulate('focus')
104 |     await input().simulate('change', { target: { value: 1664 } })
105 |     await input().simulate('blur')
106 |     expect(wrapper.find('.Formol_Field__error-text').length).toEqual(0)
107 | 
108 |     await submit().simulate('submit')
109 | 
110 |     expect(onSubmit).toHaveBeenCalledWith(
111 |       { number: 1664 },
112 |       { number: 42 },
113 |       ['number'],
114 |       true
115 |     )
116 |     expect(input().props().value).toEqual(1664)
117 |   })
118 |   it('prevents change when not a number', async () => {
119 |     const onSubmit = jest.fn()
120 |     const wrapper = mount(
121 |       <Formol onSubmit={onSubmit} item={{ number: 42 }}>
122 |         <Field type="number">Number</Field>
123 |       </Formol>
124 |     )
125 |     const input = () => wrapper.find('Field').find('input').first()
126 |     const submit = () => wrapper.find('.Formol_Formol__submit')
127 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
128 | 
129 |     expect(submit().props().disabled).toBeTruthy()
130 |     expect(cancel().props().disabled).toBeTruthy()
131 |     expect(input().props().value).toEqual(42)
132 | 
133 |     await input().simulate('focus')
134 |     await input().simulate('change', { target: { value: 'not a number' } })
135 |     await input().simulate('blur')
136 | 
137 |     expect(input().props().value).toEqual('')
138 |   })
139 | })
140 | 


--------------------------------------------------------------------------------
/src/async/SelectMenuField.jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   AllSubstringsIndexStrategy,
  3 |   Search,
  4 |   UnorderedSearchIndex,
  5 | } from 'js-search'
  6 | import React from 'react'
  7 | import Select from 'react-select'
  8 | import makeAnimated from 'react-select/animated'
  9 | import deepEqual from 'fast-deep-equal'
 10 | 
 11 | import { block, noOp } from '../utils'
 12 | import choicesAdapter from '../utils/choicesAdapter'
 13 | import getMenuList from '../utils/MenuList'
 14 | import memoizedChoices from '../utils/memoizedChoices'
 15 | import multipleAdapter from '../utils/multipleAdapter'
 16 | 
 17 | export const DELIMITER = '__/__'
 18 | 
 19 | @multipleAdapter
 20 | @choicesAdapter
 21 | @memoizedChoices
 22 | @block
 23 | export default class SelectMenuField extends React.PureComponent {
 24 |   static defaultProps = {
 25 |     virtualizedThreshold: 100,
 26 |   }
 27 | 
 28 |   constructor(props) {
 29 |     super(props)
 30 |     this.state = {
 31 |       inputValue: null,
 32 |       search: null,
 33 |       filterOptions: null,
 34 |       options: [],
 35 |       value: null,
 36 |       _rawChoices: null,
 37 |       _rawValue: null,
 38 |     }
 39 | 
 40 |     this.handleChange = this.handleChange.bind(this)
 41 |     this.handleInputChange = this.handleInputChange.bind(this)
 42 |     this.filter = this.filter.bind(this)
 43 |     this.select = React.createRef()
 44 |     this.searchResults = null
 45 |   }
 46 | 
 47 |   static getDerivedStateFromProps(nextProps, prevState) {
 48 |     const {
 49 |       choices,
 50 |       searchIndex,
 51 |       indexStrategy,
 52 |       sanitizer,
 53 |       tokenizer,
 54 |       elementRef: { current },
 55 |       indexes,
 56 |       value,
 57 |       multiple,
 58 |     } = nextProps
 59 |     let state = null
 60 | 
 61 |     if (!deepEqual(choices, prevState._rawChoices)) {
 62 |       const options = choices.map(([label, choice]) => ({
 63 |         value: choice,
 64 |         label,
 65 |       }))
 66 | 
 67 |       // Prepare a searcher
 68 |       const search = new Search('value')
 69 |       search.searchIndex = searchIndex || new UnorderedSearchIndex()
 70 |       search.indexStrategy = indexStrategy || new AllSubstringsIndexStrategy()
 71 |       if (sanitizer) {
 72 |         search.sanitizer = sanitizer
 73 |       }
 74 | 
 75 |       if (tokenizer) {
 76 |         search.tokenizer = tokenizer
 77 |       }
 78 | 
 79 |       if (indexes) {
 80 |         indexes.forEach((index) => {
 81 |           search.addIndex(index)
 82 |         })
 83 |       } else {
 84 |         search.addIndex('label')
 85 |       }
 86 | 
 87 |       search.addDocuments(options)
 88 | 
 89 |       state = {
 90 |         options,
 91 |         search,
 92 |         _rawChoices: choices,
 93 |       }
 94 |     }
 95 |     if (!deepEqual(value, prevState._rawValue) || (state && state.options)) {
 96 |       const opts = state ? state.options : prevState.options
 97 |       state = {
 98 |         ...(state === null ? {} : state),
 99 |         value: multiple
100 |           ? value.map((single) => opts.find(({ value: v }) => v === single))
101 |           : opts.find(({ value: v }) => v === value) || null,
102 |         _rawValue: value,
103 |       }
104 |       current && (current.value = value)
105 |     }
106 | 
107 |     return state
108 |   }
109 | 
110 |   handleChange(newValue) {
111 |     const { multiple, onChange } = this.props
112 |     return onChange(
113 |       newValue &&
114 |         (multiple ? newValue.map(({ value }) => value) : newValue.value)
115 |     )
116 |   }
117 | 
118 |   handleInputChange(inputValue) {
119 |     const { search } = this.state
120 |     this.setState({ inputValue })
121 |     this.searchResults = inputValue
122 |       ? search.search(inputValue).map(({ value }) => value)
123 |       : null
124 |   }
125 | 
126 |   filter({ value }) {
127 |     // Looking up in the precomputed results
128 |     return this.searchResults ? this.searchResults.indexOf(value) > -1 : true
129 |   }
130 | 
131 |   render(b) {
132 |     const {
133 |       i18n,
134 |       className,
135 |       multiple,
136 |       readOnly,
137 |       disabled,
138 |       placeholder,
139 |       value: rawValue,
140 |       choices,
141 |       searchIndex,
142 |       indexStrategy,
143 |       sanitizer,
144 |       tokenizer,
145 |       indexes,
146 |       windowThreshold,
147 |       elementRef,
148 |       onChange,
149 |       onFocus,
150 |       onBlur,
151 |       onKeyDown,
152 |       animated,
153 |       styles,
154 |       listApproximatedLengthBreak,
155 |       listDefaultHeight,
156 |       virtualizedThreshold,
157 |       ...props
158 |     } = this.props
159 |     const { value, options } = this.state
160 |     const virtualized = options.length > virtualizedThreshold
161 |     return (
162 |       <div className={b}>
163 |         <Select
164 |           className={b.e('select')}
165 |           classNamePrefix={b.s}
166 |           ref={this.select}
167 |           isDisabled={disabled || readOnly /* There's no readOnly */}
168 |           options={options}
169 |           placeholder={placeholder || i18n.selectMenu.select}
170 |           isMulti={multiple}
171 |           value={value}
172 |           components={{
173 |             ...(animated === false ? {} : makeAnimated()),
174 |             ...(virtualized
175 |               ? {
176 |                   MenuList: getMenuList(
177 |                     listDefaultHeight,
178 |                     listApproximatedLengthBreak
179 |                   ),
180 |                 }
181 |               : {}),
182 |           }}
183 |           onChange={this.handleChange}
184 |           onFocus={onFocus}
185 |           onBlur={onBlur}
186 |           onKeyDown={onKeyDown}
187 |           onInputChange={this.handleInputChange}
188 |           delimiter={DELIMITER}
189 |           styles={styles}
190 |           isClearable
191 |           filterOption={this.filter}
192 |           noOptionsMessage={i18n.selectMenu.noOptions}
193 |           loadingMessage={i18n.selectMenu.loading}
194 |         />
195 |         {
196 |           // We have to add another input field since the
197 |           // react-select one is not overridable
198 |         }
199 |         <input
200 |           className={b.mix(className).e('hidden-input')}
201 |           ref={elementRef}
202 |           {...props}
203 |           value={multiple ? rawValue.join(DELIMITER) : rawValue}
204 |           onChange={noOp}
205 |           type="text"
206 |         />
207 |       </div>
208 |     )
209 |   }
210 | }
211 | 


--------------------------------------------------------------------------------
/test/formol/conditional.test.jsx:
--------------------------------------------------------------------------------
  1 | import { mount } from 'enzyme'
  2 | import React from 'react'
  3 | 
  4 | import Formol, { Field, Conditional } from '../../src'
  5 | 
  6 | describe('Conditional field', () => {
  7 |   it('hides fields dependending on other value', async () => {
  8 |     const onSubmit = jest.fn()
  9 |     const wrapper = mount(
 10 |       <Formol onSubmit={onSubmit} item={{ ok: false }}>
 11 |         <Field name="ok" type="switch" />
 12 |         <Conditional show={({ ok }) => ok}>
 13 |           <Field name="why" />
 14 |         </Conditional>
 15 |         <Conditional show={({ ok }) => !ok}>
 16 |           <Field name="whynot" />
 17 |         </Conditional>
 18 |       </Formol>
 19 |     )
 20 | 
 21 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 22 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 23 | 
 24 |     expect(submit().props().disabled).toBeTruthy()
 25 |     expect(cancel().props().disabled).toBeTruthy()
 26 | 
 27 |     const fields = () => wrapper.find('Field')
 28 |     expect(fields()).toHaveLength(2)
 29 | 
 30 |     expect(fields().at(0).props().name).toEqual('ok')
 31 |     expect(fields().at(1).props().name).toEqual('whynot')
 32 | 
 33 |     const input = () => fields().at(1).find('input')
 34 | 
 35 |     await input().simulate('focus')
 36 |     await input().simulate('change', { target: { value: 'foo' } })
 37 |     await input().simulate('blur')
 38 | 
 39 |     expect(input().props().value).toEqual('foo')
 40 |     expect(submit().props().disabled).toBeFalsy()
 41 |     expect(cancel().props().disabled).toBeFalsy()
 42 | 
 43 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
 44 | 
 45 |     await submit().simulate('submit')
 46 | 
 47 |     expect(onSubmit).toHaveBeenCalledWith(
 48 |       { ok: false, whynot: 'foo' },
 49 |       { ok: false },
 50 |       ['ok', 'whynot'],
 51 |       true
 52 |     )
 53 |     expect(input().props().value).toEqual('foo')
 54 | 
 55 |     const ok = () => fields().at(0).find('input')
 56 | 
 57 |     await ok().simulate('focus')
 58 |     await ok().simulate('change', { target: { checked: true } })
 59 |     await ok().simulate('blur')
 60 | 
 61 |     expect(fields().at(0).props().name).toEqual('ok')
 62 |     expect(fields().at(1).props().name).toEqual('why')
 63 | 
 64 |     await input().simulate('focus')
 65 |     await input().simulate('change', { target: { value: 'bar' } })
 66 |     await input().simulate('blur')
 67 | 
 68 |     expect(input().props().value).toEqual('bar')
 69 |     expect(submit().props().disabled).toBeFalsy()
 70 |     expect(cancel().props().disabled).toBeFalsy()
 71 | 
 72 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
 73 | 
 74 |     await submit().simulate('submit')
 75 | 
 76 |     expect(onSubmit).toHaveBeenCalledWith(
 77 |       { ok: true, why: 'bar' },
 78 |       { ok: false },
 79 |       ['ok', 'why'],
 80 |       true
 81 |     )
 82 |     expect(input().props().value).toEqual('bar')
 83 |     wrapper.unmount()
 84 |   })
 85 |   it('disables fields dependending on other value', async () => {
 86 |     const onSubmit = jest.fn()
 87 |     const wrapper = mount(
 88 |       <Formol onSubmit={onSubmit} item={{ ok: true }}>
 89 |         <Field name="ok" type="switch" />
 90 |         <Conditional disabled={({ ok }) => ok}>
 91 |           <Field name="why" />
 92 |         </Conditional>
 93 |         <Conditional disabled={({ ok }) => !ok}>
 94 |           <Field name="whynot" />
 95 |         </Conditional>
 96 |       </Formol>
 97 |     )
 98 | 
 99 |     const fields = () => wrapper.find('Field')
100 |     expect(fields()).toHaveLength(3)
101 | 
102 |     expect(fields().at(0).props().name).toEqual('ok')
103 |     expect(fields().at(1).props().name).toEqual('why')
104 |     expect(fields().at(2).props().name).toEqual('whynot')
105 |     expect(fields().at(1).find('input').props().disabled).toBeTruthy()
106 |     expect(fields().at(2).find('input').props().disabled).toBeFalsy()
107 | 
108 |     const ok = () => fields().at(0).find('input')
109 | 
110 |     await ok().simulate('focus')
111 |     await ok().simulate('change', { target: { checked: false } })
112 |     await ok().simulate('blur')
113 | 
114 |     expect(fields().at(1).find('input').props().disabled).toBeFalsy()
115 |     expect(fields().at(2).find('input').props().disabled).toBeTruthy()
116 |   })
117 |   it('handles props changing', async () => {
118 |     class PropsChangingForm extends React.Component {
119 |       state = { conditionalProps: { disabled: ({ ok }) => ok } }
120 | 
121 |       render() {
122 |         const { conditionalProps } = this.state
123 | 
124 |         return (
125 |           <Formol item={{ ok: true }}>
126 |             <Field name="ok" type="switch" />
127 |             <button
128 |               className="change"
129 |               onClick={() =>
130 |                 this.setState({
131 |                   conditionalProps: { readOnly: ({ ok }) => ok },
132 |                 })
133 |               }
134 |             />
135 |             <Conditional {...conditionalProps}>
136 |               <Field name="why" />
137 |             </Conditional>
138 |           </Formol>
139 |         )
140 |       }
141 |     }
142 | 
143 |     const wrapper = mount(<PropsChangingForm />)
144 | 
145 |     const fields = () => wrapper.find('Field')
146 |     expect(fields()).toHaveLength(2)
147 | 
148 |     expect(fields().at(0).props().name).toEqual('ok')
149 |     expect(fields().at(1).props().name).toEqual('why')
150 | 
151 |     expect(fields().at(1).find('input').props().disabled).toBeTruthy()
152 |     expect(fields().at(1).find('input').props().readOnly).toBeFalsy()
153 | 
154 |     const change = () => wrapper.find('button.change')
155 |     await change().simulate('click')
156 | 
157 |     expect(fields().at(1).find('input').props().disabled).toBeFalsy()
158 |     expect(fields().at(1).find('input').props().readOnly).toBeTruthy()
159 |   })
160 |   it('initializes multiple fields on show condition change', async () => {
161 |     const wrapper = mount(
162 |       <Formol
163 |         item={{
164 |           switchMe: false,
165 |           lName: 'Doe',
166 |           fName: 'John',
167 |         }}
168 |       >
169 |         <Field name="switchMe" type="switch">
170 |           Switch me
171 |         </Field>
172 |         <Conditional show={({ switchMe }) => switchMe}>
173 |           <Field name="lName">Last name</Field>
174 |           <Field name="fName">First name</Field>
175 |         </Conditional>
176 |       </Formol>
177 |     )
178 |     const switchBtn = () => wrapper.find('input[name="switchMe"]')
179 | 
180 |     await switchBtn().simulate('change', { target: { checked: true } })
181 |     const lName = () => wrapper.find('input[name="lName"]')
182 |     const fName = () => wrapper.find('input[name="fName"]')
183 | 
184 |     expect(lName().props().value).toBe('Doe')
185 |     expect(fName().props().value).toBe('John')
186 |   })
187 | })
188 | 


--------------------------------------------------------------------------------
/test/formol/types/html.test.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { mount } from 'enzyme'
  3 | 
  4 | import { forCondition } from '../../helpers'
  5 | import Formol, { Field } from '../../../src'
  6 | import molecule from '../../samples/molecule.svg.base64'
  7 | 
  8 | const voidSelection = () => () => ({
  9 |   anchorNode: null,
 10 |   anchorOffset: 0,
 11 |   baseNode: null,
 12 |   baseOffset: 0,
 13 |   extentNode: null,
 14 |   extentOffset: 0,
 15 |   focusNode: null,
 16 |   focusOffset: 0,
 17 |   isCollapsed: true,
 18 |   rangeCount: 0,
 19 |   type: 'None',
 20 | })
 21 | 
 22 | const simpleSelection = (node, start, end) => () => ({
 23 |   anchorNode: node,
 24 |   anchorOffset: start,
 25 |   baseNode: node,
 26 |   baseOffset: start,
 27 |   extentNode: node,
 28 |   extentOffset: end,
 29 |   focusNode: node,
 30 |   focusOffset: end,
 31 |   isCollapsed: false,
 32 |   rangeCount: 1,
 33 |   type: 'Range',
 34 |   setStart() {},
 35 |   setEnd() {},
 36 |   addRange() {},
 37 |   getRangeAt(i) {
 38 |     if (i !== 0) {
 39 |       throw new Error('NotImplemented')
 40 |     }
 41 |     return {
 42 |       startContainer: node,
 43 |       endContainer: node,
 44 |       startOffset: start,
 45 |       endOffset: end,
 46 |       collapsed: start === end,
 47 |     }
 48 |   },
 49 |   removeAllRanges() {
 50 |     Object.assign(this, voidSelection()())
 51 |   },
 52 | })
 53 | 
 54 | describe('Html field', () => {
 55 |   it('handles changes', async () => {
 56 |     global.document.getSelection = simpleSelection(null, 0, 0)
 57 |     global.document.createRange = simpleSelection(null, 0, 0)
 58 |     const onSubmit = jest.fn()
 59 |     const wrapper = mount(
 60 |       <Formol onSubmit={onSubmit} item={{ html: '<p>foo</p>' }}>
 61 |         <Field type="html">Html</Field>
 62 |       </Formol>
 63 |     )
 64 |     const asyncWrapper = () => wrapper.find('AsyncWrapper')
 65 |     expect(asyncWrapper().text()).toEqual('Loading')
 66 |     await asyncWrapper().instance()._promise
 67 |     wrapper.update()
 68 |     expect(asyncWrapper().text()).not.toEqual('Loading')
 69 | 
 70 |     const field = () => wrapper.find('HTMLField').first()
 71 |     const input = () =>
 72 |       wrapper.find('.Formol_Field__element').find('input').first()
 73 | 
 74 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 75 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 76 | 
 77 |     expect(submit().props().disabled).toBeTruthy()
 78 |     expect(cancel().props().disabled).toBeTruthy()
 79 | 
 80 |     expect(field().props().type).toEqual('html')
 81 |     expect(input().props().type).toEqual('text')
 82 | 
 83 |     expect(field().props().value).toEqual('<p>foo</p>')
 84 |     expect(input().props().value).toEqual('<p>foo</p>')
 85 | 
 86 |     const quill = wrapper.find('Quill').instance().getEditor()
 87 | 
 88 |     wrapper.find('Quill').prop('onFocus')()
 89 |     quill.clipboard.dangerouslyPasteHTML('<p>f<strong>oo</strong></p>')
 90 |     wrapper.find('Quill').prop('onBlur')()
 91 |     wrapper.update()
 92 | 
 93 |     expect(field().props().value).toEqual('<p>f<strong>oo</strong></p>')
 94 |     expect(input().props().value).toEqual('<p>f<strong>oo</strong></p>')
 95 |     expect(submit().props().disabled).toBeFalsy()
 96 |     expect(cancel().props().disabled).toBeFalsy()
 97 | 
 98 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
 99 | 
100 |     await submit().simulate('submit')
101 | 
102 |     expect(onSubmit).toHaveBeenCalledWith(
103 |       { html: '<p>f<strong>oo</strong></p>' },
104 |       { html: '<p>foo</p>' },
105 |       ['html'],
106 |       true
107 |     )
108 |     expect(field().props().value).toEqual('<p>f<strong>oo</strong></p>')
109 |     expect(input().props().value).toEqual('<p>f<strong>oo</strong></p>')
110 |   })
111 |   it('cancels changes', async () => {
112 |     const onSubmit = jest.fn()
113 |     const wrapper = mount(
114 |       <Formol onSubmit={onSubmit} item={{ html: '<p>foo</p>' }}>
115 |         <Field type="html">Html</Field>
116 |       </Formol>
117 |     )
118 |     const asyncWrapper = () => wrapper.find('AsyncWrapper')
119 |     expect(asyncWrapper().text()).toEqual('Loading')
120 |     await asyncWrapper().instance()._promise
121 |     wrapper.update()
122 |     expect(asyncWrapper().text()).not.toEqual('Loading')
123 | 
124 |     const field = () => wrapper.find('HTMLField').first()
125 |     const input = () =>
126 |       wrapper
127 |         .find('.Formol_Field__element')
128 |         .find('input')
129 | 
130 |         .first()
131 | 
132 |     const submit = () => wrapper.find('.Formol_Formol__submit')
133 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
134 | 
135 |     expect(submit().props().disabled).toBeTruthy()
136 |     expect(cancel().props().disabled).toBeTruthy()
137 |     expect(field().props().value).toEqual('<p>foo</p>')
138 |     expect(input().props().value).toEqual('<p>foo</p>')
139 | 
140 |     const quill = wrapper.find('Quill').instance().getEditor()
141 | 
142 |     quill.clipboard.dangerouslyPasteHTML('<p>f<strong>oo</strong></p>')
143 |     wrapper.update()
144 | 
145 |     expect(field().props().value).toEqual('<p>f<strong>oo</strong></p>')
146 |     expect(input().props().value).toEqual('<p>f<strong>oo</strong></p>')
147 |     expect(submit().props().disabled).toBeFalsy()
148 |     expect(cancel().props().disabled).toBeFalsy()
149 | 
150 |     await cancel().simulate('click')
151 | 
152 |     expect(field().props().value).toEqual('<p>foo</p>')
153 |     expect(input().props().value).toEqual('<p>foo</p>')
154 |   })
155 |   it('works with no initial value', async () => {
156 |     const onSubmit = jest.fn()
157 |     const wrapper = mount(
158 |       <Formol onSubmit={onSubmit}>
159 |         <Field type="html">Html</Field>
160 |       </Formol>
161 |     )
162 |     const asyncWrapper = () => wrapper.find('AsyncWrapper')
163 |     expect(asyncWrapper().text()).toEqual('Loading')
164 |     await asyncWrapper().instance()._promise
165 |     wrapper.update()
166 |     expect(asyncWrapper().text()).not.toEqual('Loading')
167 | 
168 |     const field = () => wrapper.find('HTMLField').first()
169 |     const input = () =>
170 |       wrapper.find('.Formol_Field__element').find('input').first()
171 | 
172 |     const submit = () => wrapper.find('.Formol_Formol__submit')
173 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
174 | 
175 |     expect(submit().props().disabled).toBeTruthy()
176 |     expect(cancel().props().disabled).toBeTruthy()
177 | 
178 |     expect(field().props().type).toEqual('html')
179 |     expect(input().props().type).toEqual('text')
180 |     expect(wrapper.find('Quill').prop('value')).toEqual('')
181 |     expect(field().props().value).toEqual('')
182 |     expect(input().props().value).toEqual('')
183 |   })
184 |   it('understands empty value', async () => {
185 |     const onSubmit = jest.fn()
186 |     const wrapper = mount(
187 |       <Formol onSubmit={onSubmit} item={{ html: '<p><br></p>' }}>
188 |         <Field type="html">Html</Field>
189 |       </Formol>
190 |     )
191 |     const asyncWrapper = () => wrapper.find('AsyncWrapper')
192 |     expect(asyncWrapper().text()).toEqual('Loading')
193 |     await asyncWrapper().instance()._promise
194 |     wrapper.update()
195 |     expect(asyncWrapper().text()).not.toEqual('Loading')
196 | 
197 |     // Can't really test anything here for now
198 |   })
199 | })
200 | 


--------------------------------------------------------------------------------
/demos/src/pages/FeaturesDemo.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react'
  2 | import Formol, { Field, Conditional } from 'formol'
  3 | 
  4 | const initialFormState = {
  5 |   newsletter: {
  6 |     subscribe: false,
  7 |     name: '',
  8 |     email: '',
  9 |   },
 10 |   edit: {
 11 |     enabled: false,
 12 |     text: 'The quick brown fox jumps over the lazy dog',
 13 |   },
 14 |   format: {
 15 |     text: 'why are you yelling?',
 16 |     number: '1337',
 17 |     numberblur: '42',
 18 |   },
 19 |   bidir: {
 20 |     rgbColor: 'rgb(102, 51, 153)',
 21 |   },
 22 |   valid: {
 23 |     color: '#c0ffee',
 24 |   },
 25 |   prime: 127843,
 26 |   single: {
 27 |     image: null,
 28 |   },
 29 | }
 30 | 
 31 | const initialCrossedState = {
 32 |   number0: 0,
 33 |   number1: 1,
 34 |   number2: 2,
 35 | }
 36 | 
 37 | const initialDifferedState = {
 38 |   text: 'Saved on submit',
 39 | }
 40 | 
 41 | const rgbToHex = (rgb) => {
 42 |   if (!rgb) {
 43 |     return ''
 44 |   }
 45 |   const [r, g, b] = rgb.match(/\d+/g).map((x) => parseInt(x))
 46 |   return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
 47 | }
 48 | 
 49 | const hexToRgb = (hex) =>
 50 |   hex
 51 |     ? `rgb(${hex
 52 |         .substring(1)
 53 |         .match(/.{2}/g)
 54 |         .map((x) => parseInt(x, 16))
 55 |         .join(', ')})`
 56 |     : ''
 57 | 
 58 | function isPrimeNumber(n) {
 59 |   // 0 and 1 are not prime numbers
 60 |   if (n <= 1) {
 61 |     return false
 62 |   }
 63 |   // 2 and 3 are prime numbers
 64 |   if (n <= 3) {
 65 |     return true
 66 |   }
 67 | 
 68 |   // Eliminate even numbers and multiples of 3
 69 |   if (n % 2 === 0 || n % 3 === 0) {
 70 |     return false
 71 |   }
 72 | 
 73 |   // 6k±1 rule, from 5 to square root of n
 74 |   for (let i = 5; i * i <= n; i += 6) {
 75 |     if (n % i === 0 || n % (i + 2) === 0) {
 76 |       return false
 77 |     }
 78 |   }
 79 | 
 80 |   return true
 81 | }
 82 | 
 83 | const FeaturesDemo = () => {
 84 |   const [formValues, setFormValues] = useState(initialFormState)
 85 |   const [crossedValues, setCrossedValues] = useState(initialCrossedState)
 86 |   const [differedValues, setDifferedValues] = useState(initialDifferedState)
 87 | 
 88 |   return (
 89 |     <>
 90 |       <div className="form-container">
 91 |         <h1>Features</h1>
 92 |         <Formol item={formValues} onChange={(item) => setFormValues(item)}>
 93 |           <h2>Conditionals</h2>
 94 |           <h3>show</h3>
 95 |           <Field name="newsletter.subscribe" type="switch">
 96 |             Subscribe to the newsletter
 97 |           </Field>
 98 |           <Conditional show={({ newsletter }) => newsletter.subscribe}>
 99 |             Cool 😎, please fill these fields:
100 |             <div>
101 |               <Field name="newsletter.name">Name</Field>
102 |               <Field name="newsletter.email">Email</Field>
103 |             </div>
104 |           </Conditional>
105 | 
106 |           <h3>disabled</h3>
107 |           <Field name="edit.enabled" type="switch">
108 |             Edit mode
109 |           </Field>
110 |           <Conditional disabled={({ edit }) => !edit.enabled}>
111 |             <Field name="edit.text">Text</Field>
112 |           </Conditional>
113 | 
114 |           <h2>Formatters</h2>
115 |           <h3>Item to field</h3>
116 |           <Field name="format.text" formatter={(v) => v.toUpperCase()}>
117 |             CAPSLOCK
118 |           </Field>
119 | 
120 |           <h3>Field to item</h3>
121 |           <Field
122 |             name="format.number"
123 |             unformatter={(v) => v && v.replace(/\D/g, '')}
124 |           >
125 |             String allowing only numbers
126 |           </Field>
127 | 
128 |           <h3>Field normalizer</h3>
129 |           <Field
130 |             name="format.numberblur"
131 |             normalizer={(v) => v && v.replace(/\D/g, '')}
132 |           >
133 |             String cleaned and parsed as a number on blur
134 |           </Field>
135 | 
136 |           <h3>Bidirectional formatter</h3>
137 |           <Field
138 |             name="bidir.rgbColor"
139 |             type="color"
140 |             validator={(v) =>
141 |               v &&
142 |               !v.match(/rgb\(\d{1,3}, \d{1,3}, \d{1,3}\)/) &&
143 |               `${v} is not a valid color`
144 |             }
145 |             formatter={rgbToHex}
146 |             unformatter={hexToRgb}
147 |           >
148 |             rgb(r, g, b) color
149 |           </Field>
150 | 
151 |           <h2>Validators</h2>
152 |           <h3>Pattern + custom error messages</h3>
153 |           <Field
154 |             name="valid.color"
155 |             minLength={4}
156 |             pattern="#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})"
157 |             title="A hexadecimal color: (i.e. #3c23ad)"
158 |             validityErrors={({ valueMissing, patternMismatch, tooShort }) => {
159 |               if (valueMissing) {
160 |                 return 'A color connot be empty, we need a color!'
161 |               }
162 |               if (tooShort) {
163 |                 return 'A color cannot be that short'
164 |               }
165 |               if (patternMismatch) {
166 |                 return 'A color must have a # followed by 3 or 6 hexadecimal digit'
167 |               }
168 |             }}
169 |           >
170 |             Hexadecimal color
171 |           </Field>
172 | 
173 |           <h3>Complex</h3>
174 |           <Field
175 |             name="prime"
176 |             type="number"
177 |             min={0}
178 |             max={100000000}
179 |             validator={(v) => !isPrimeNumber(v) && `${v} is not a prime number`}
180 |           >
181 |             Prime
182 |           </Field>
183 | 
184 |           <h2>Cases</h2>
185 |           <h3>Single file required</h3>
186 |           <Field
187 |             name="single.image"
188 |             type="file"
189 |             accept="image/*"
190 |             multiple={false}
191 |             required
192 |           >
193 |             Only 1 image please
194 |           </Field>
195 |         </Formol>
196 | 
197 |         <Formol
198 |           item={crossedValues}
199 |           validator={(item) =>
200 |             new Array(3).fill().reduce((validators, _, i) => {
201 |               if (i !== 0) {
202 |                 validators[`number${i}`] =
203 |                   item[`number${i}`] <= item[`number${i - 1}`]
204 |                     ? `Number ${i} must be superior to Number ${i - 1}:
205 |                     ${item[`number${i - 1}`]}`
206 |                     : null
207 |               }
208 |               return validators
209 |             }, {})
210 |           }
211 |           onChange={(item) => setCrossedValues(item)}
212 |         >
213 |           <h3>Cross field validation</h3>
214 |           {new Array(3).fill().map((_, i) => (
215 |             <Field
216 |               key={Object.keys(crossedValues)[i]}
217 |               name={`number${i}`}
218 |               type="number"
219 |             >
220 |               Number {i}
221 |             </Field>
222 |           ))}
223 |         </Formol>
224 | 
225 |         <div
226 |           style={{
227 |             border: '1px solid #bbb',
228 |             width: 'fit-content',
229 |             padding: '0 10px',
230 |           }}
231 |         >
232 |           <Formol
233 |             item={differedValues}
234 |             onSubmit={(item) => setDifferedValues(item)}
235 |           >
236 |             <h2>Saved on submit</h2>
237 |             <Field name="text">Text</Field>
238 |           </Formol>
239 |         </div>
240 |       </div>
241 | 
242 |       <pre className="panel">
243 |         {JSON.stringify(formValues, null, 2)}
244 |         <br />
245 |         <br />
246 |         {JSON.stringify(crossedValues, null, 2)}
247 |         <br />
248 |         <br />
249 |         {JSON.stringify(differedValues, null, 2)}
250 |       </pre>
251 |     </>
252 |   )
253 | }
254 | 
255 | export default FeaturesDemo
256 | 


--------------------------------------------------------------------------------
/src/async/FileField.jsx:
--------------------------------------------------------------------------------
  1 | import { FaTrash } from 'react-icons/fa'
  2 | import { MdCloudUpload } from 'react-icons/md'
  3 | import Dropzone from 'react-dropzone'
  4 | import React from 'react'
  5 | import deepEqual from 'fast-deep-equal'
  6 | 
  7 | import { block, fileSize, nameExt, noOp, readAsBase64 } from '../utils'
  8 | import Preview from '../utils/Preview'
  9 | import multipleAdapter from '../utils/multipleAdapter'
 10 | 
 11 | const key = (file) => [file.name, file.ext].join('.')
 12 | 
 13 | const rename = (files) =>
 14 |   files
 15 |     .reverse()
 16 |     .reduce(
 17 |       ({ renamed, counter }, file) => {
 18 |         const name = file.name.replace(/--\d+$/, '')
 19 |         const k = key({ ...file, name })
 20 |         const newCounter = {
 21 |           ...counter,
 22 |           [k]: k in counter ? counter[k] + 1 : 0,
 23 |         }
 24 |         return {
 25 |           counter: newCounter,
 26 |           renamed: [
 27 |             ...renamed,
 28 |             {
 29 |               ...file,
 30 |               name: newCounter[k] ? `${name}--${newCounter[k]}` : name,
 31 |             },
 32 |           ],
 33 |         }
 34 |       },
 35 |       { renamed: [], counter: {} }
 36 |     )
 37 |     .renamed.reverse()
 38 | 
 39 | @multipleAdapter
 40 | @block
 41 | export default class FileField extends React.PureComponent {
 42 |   static valueToField(value, multiple) {
 43 |     if (!value) {
 44 |       return ''
 45 |     }
 46 |     if (multiple) {
 47 |       return value.map(key).join(',')
 48 |     }
 49 |     return key(value)
 50 |   }
 51 | 
 52 |   constructor(props) {
 53 |     super(props)
 54 |     this.state = {
 55 |       value: null,
 56 |       rejected: [],
 57 |     }
 58 |     this.handleDrop = this.handleDrop.bind(this)
 59 |     this.handleRemove = this.handleRemove.bind(this)
 60 |   }
 61 | 
 62 |   static getDerivedStateFromProps(
 63 |     newProps,
 64 |     { value: oldValue, rejected: oldRejected }
 65 |   ) {
 66 |     let {
 67 |       multiple,
 68 |       elementRef: { current },
 69 |       value: rawValue,
 70 |     } = newProps
 71 |     const value = FileField.valueToField(rawValue, multiple)
 72 |     if (!deepEqual(value, oldValue)) {
 73 |       const rejected = oldRejected.filter((f) =>
 74 |         multiple ? value.split(',').includes(f) : value === f
 75 |       )
 76 |       current && (current.value = value)
 77 |       return {
 78 |         value,
 79 |         rejected,
 80 |       }
 81 |     }
 82 |     return null
 83 |   }
 84 | 
 85 |   async fileToObject(file) {
 86 |     const [name, ext] = nameExt(file.name)
 87 |     return {
 88 |       name,
 89 |       ext,
 90 |       type: file.type,
 91 |       size: file.size,
 92 |       data: (await readAsBase64(file)).split(',', 2)[1],
 93 |     }
 94 |   }
 95 | 
 96 |   handleChange(value, rejected, { singleOnly = false } = {}) {
 97 |     const { i18n, multiple, onChange } = this.props
 98 |     let error = ''
 99 |     if (singleOnly) {
100 |       error = i18n.file.singleOnly
101 |     } else if (rejected.length) {
102 |       error = multiple
103 |         ? `${i18n.file.rejectedMultiple} (${rejected.join(', ')})`
104 |         : i18n.file.rejected
105 |     }
106 |     onChange(value, error)
107 |   }
108 | 
109 |   async handleDrop(acceptedFiles, rejectedFiles) {
110 |     const {
111 |       value,
112 |       multiple,
113 |       onFocus,
114 |       onBlur,
115 |       elementRef: { current },
116 |     } = this.props
117 |     onFocus()
118 |     let { rejected } = this.state
119 |     let newFiles, newValue
120 | 
121 |     rejectedFiles = rejectedFiles.filter((maybeFile) => maybeFile.name)
122 |     const droppedCount = acceptedFiles.length + rejectedFiles.length
123 |     const singleOnly = !multiple && droppedCount > 1
124 |     const files = await Promise.all(
125 |       acceptedFiles.concat(rejectedFiles).map(this.fileToObject)
126 |     )
127 |     if (rejectedFiles.length) {
128 |       rejected = [...rejected, ...files.slice(-rejectedFiles.length).map(key)]
129 |     }
130 |     if (singleOnly) {
131 |       newFiles = null
132 |       newValue = ''
133 |       rejected = []
134 |     } else {
135 |       newFiles = multiple ? rename([...files, ...value]) : files[0]
136 |       newValue = FileField.valueToField(newFiles, multiple)
137 |     }
138 |     this.handleChange(newFiles, rejected, { singleOnly })
139 |     this.setState({ value: newValue, rejected })
140 |     onBlur()
141 |   }
142 | 
143 |   handleRemove(e, file) {
144 |     const {
145 |       value,
146 |       multiple,
147 |       elementRef: { current },
148 |       onFocus,
149 |       onBlur,
150 |     } = this.props
151 |     onFocus()
152 |     const changed = multiple ? value.filter((f) => key(f) !== key(file)) : null
153 |     const rejected = this.state.rejected.filter((rej) => rej !== key(file))
154 | 
155 |     const newValue = FileField.valueToField(changed, multiple)
156 |     current.value = newValue
157 |     this.handleChange(changed, rejected)
158 |     this.setState({
159 |       value: newValue,
160 |       rejected,
161 |     })
162 |     e.stopPropagation()
163 |     onBlur()
164 |   }
165 | 
166 |   renderPreview(b, file) {
167 |     const { disabled, readOnly } = this.props
168 |     const { rejected } = this.state
169 |     const fileKey = key(file)
170 |     return (
171 |       <figure
172 |         className={b.e('preview').m({ error: rejected.includes(fileKey) })}
173 |         key={fileKey}
174 |       >
175 |         <div className={b.e('image-delete')}>
176 |           <Preview data={file.data} mime={file.type} ext={file.ext} />
177 |           {!readOnly && !disabled ? (
178 |             <button
179 |               className={b.e('close')}
180 |               onClick={(e) => this.handleRemove(e, file)}
181 |               type="button"
182 |             >
183 |               <FaTrash /> Enlever
184 |             </button>
185 |           ) : null}
186 |         </div>
187 |         <figcaption className={b.e('preview-caption')}>
188 |           <span className={b.e('preview-name')}>{fileKey}</span>
189 |           {file.size && (
190 |             <span className={b.e('preview-size')}>{fileSize(file.size)}</span>
191 |           )}
192 |           {file.type && (
193 |             <span className={b.e('preview-type')}>{file.type}</span>
194 |           )}
195 |         </figcaption>
196 |       </figure>
197 |     )
198 |   }
199 | 
200 |   render(b) {
201 |     const {
202 |       name,
203 |       value,
204 |       i18n,
205 |       accept,
206 |       placeholder,
207 |       className,
208 |       multiple,
209 |       readOnly,
210 |       disabled,
211 |       elementRef,
212 |       onChange,
213 |       onKeyDown,
214 |       ...inputProps
215 |     } = this.props
216 |     const { rejected } = this.state
217 |     let preview = null
218 |     if (multiple) {
219 |       preview = (
220 |         <div className={b.e('previews')}>
221 |           {value.map((file) => this.renderPreview(b, file))}
222 |         </div>
223 |       )
224 |     } else if (value) {
225 |       preview = this.renderPreview(b, value)
226 |     }
227 | 
228 |     if (readOnly || disabled) {
229 |       return (
230 |         <div className={b.mix(className)}>{preview || i18n.file.noFile}</div>
231 |       )
232 |     }
233 | 
234 |     return (
235 |       <div className={b.m({ invalid: !!rejected.length })}>
236 |         <Dropzone
237 |           accept={accept || 'image/*'}
238 |           className={b.e('dropzone').s}
239 |           activeClassName={b.e('dropzone').m({ active: true }).s}
240 |           acceptClassName={b.e('dropzone').m({ accept: true }).s}
241 |           rejectClassName={b.e('dropzone').m({ reject: true }).s}
242 |           disabledClassName={b.e('dropzone').m({ disabled: true }).s}
243 |           name={name}
244 |           multiple={multiple}
245 |           onDrop={this.handleDrop}
246 |         >
247 |           {({ getRootProps, getInputProps, isDragActive }) => (
248 |             <div
249 |               {...getRootProps()}
250 |               className={b.e('dropzone-wrapper').m({ isDragActive })}
251 |             >
252 |               <input {...getInputProps()} />
253 |               <div className={b.e('placeholder')}>
254 |                 {!multiple && preview ? (
255 |                   preview
256 |                 ) : (
257 |                   <>
258 |                     <MdCloudUpload />
259 |                     <span>{placeholder}</span>
260 |                   </>
261 |                 )}
262 |               </div>
263 |             </div>
264 |           )}
265 |         </Dropzone>
266 |         {multiple && preview}
267 |         <input
268 |           className={b.mix(className).e('hidden-input')}
269 |           ref={elementRef}
270 |           {...inputProps}
271 |           value={FileField.valueToField(value, multiple)}
272 |           onChange={noOp}
273 |           type="text" // We need a text input instead of the file one
274 |           // because file inputs are read-only
275 |         />
276 |       </div>
277 |     )
278 |   }
279 | }
280 | 


--------------------------------------------------------------------------------
/test/formol/types/select.test.jsx:
--------------------------------------------------------------------------------
  1 | import { mount } from 'enzyme'
  2 | import React from 'react'
  3 | 
  4 | import Formol, { Field } from '../../../src'
  5 | 
  6 | describe('Select field', () => {
  7 |   it('handles changes', async () => {
  8 |     const onSubmit = jest.fn()
  9 |     const wrapper = mount(
 10 |       <Formol onSubmit={onSubmit} item={{ select: 'II' }}>
 11 |         <Field
 12 |           type="select"
 13 |           choices={{
 14 |             one: 1,
 15 |             two: 'II',
 16 |             three: true,
 17 |           }}
 18 |         >
 19 |           Select
 20 |         </Field>
 21 |       </Formol>
 22 |     )
 23 |     const select = () => wrapper.find('Field').find('select')
 24 | 
 25 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 26 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 27 | 
 28 |     expect(submit().props().disabled).toBeTruthy()
 29 |     expect(cancel().props().disabled).toBeTruthy()
 30 | 
 31 |     expect(select().children()).toHaveLength(4)
 32 |     select()
 33 |       .children()
 34 |       .forEach((option) => expect(option.type()).toEqual('option'))
 35 |     expect(select().children().at(0).text()).toEqual('')
 36 |     expect(select().children().at(1).text()).toEqual('one')
 37 |     expect(select().children().at(2).text()).toEqual('two')
 38 |     expect(select().children().at(3).text()).toEqual('three')
 39 |     expect(select().children().at(0).props().value).toEqual('')
 40 |     expect(select().children().at(1).props().value).toEqual('##formol_memo_0')
 41 |     expect(select().children().at(2).props().value).toEqual('II')
 42 |     expect(select().children().at(3).props().value).toEqual('##formol_memo_2')
 43 | 
 44 |     expect(select().props().value).toEqual('II')
 45 | 
 46 |     await select().simulate('focus')
 47 |     await select().simulate('change', {
 48 |       target: {
 49 |         value: select().children().at(1).props().value,
 50 |       },
 51 |     })
 52 |     await select().simulate('blur')
 53 | 
 54 |     expect(submit().props().disabled).toBeFalsy()
 55 |     expect(cancel().props().disabled).toBeFalsy()
 56 | 
 57 |     expect(select().props().value).toEqual('##formol_memo_0')
 58 | 
 59 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
 60 | 
 61 |     await submit().simulate('submit')
 62 | 
 63 |     expect(onSubmit).toHaveBeenCalledWith(
 64 |       { select: 1 },
 65 |       { select: 'II' },
 66 |       ['select'],
 67 |       true
 68 |     )
 69 |     expect(select().props().value).toEqual('##formol_memo_0')
 70 |   })
 71 |   it('cancels changes', async () => {
 72 |     const onSubmit = jest.fn()
 73 |     const wrapper = mount(
 74 |       <Formol onSubmit={onSubmit} item={{ select: 1 }}>
 75 |         <Field
 76 |           type="select"
 77 |           choices={{
 78 |             one: 1,
 79 |             two: 'II',
 80 |             three: true,
 81 |           }}
 82 |         >
 83 |           Select
 84 |         </Field>
 85 |       </Formol>
 86 |     )
 87 |     const select = () => wrapper.find('Field').find('select')
 88 | 
 89 |     const submit = () => wrapper.find('.Formol_Formol__submit')
 90 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
 91 | 
 92 |     expect(submit().props().disabled).toBeTruthy()
 93 |     expect(cancel().props().disabled).toBeTruthy()
 94 | 
 95 |     expect(select().props().value).toEqual('##formol_memo_0')
 96 | 
 97 |     await select().simulate('focus')
 98 |     await select().simulate('change', { target: { value: 'II' } })
 99 |     await select().simulate('blur')
100 | 
101 |     expect(submit().props().disabled).toBeFalsy()
102 |     expect(cancel().props().disabled).toBeFalsy()
103 | 
104 |     expect(select().props().value).toEqual('II')
105 | 
106 |     await cancel().simulate('click')
107 | 
108 |     expect(submit().props().disabled).toBeTruthy()
109 |     expect(cancel().props().disabled).toBeTruthy()
110 | 
111 |     expect(select().props().value).toEqual('##formol_memo_0')
112 |   })
113 |   it('handles changes with multiple values', async () => {
114 |     const onSubmit = jest.fn()
115 |     const wrapper = mount(
116 |       <Formol onSubmit={onSubmit} item={{ select: [1, 'II'] }}>
117 |         <Field
118 |           type="select"
119 |           multiple
120 |           choices={{
121 |             one: 1,
122 |             two: 'II',
123 |             three: true,
124 |           }}
125 |         >
126 |           Select
127 |         </Field>
128 |       </Formol>
129 |     )
130 |     const select = () => wrapper.find('Field').find('select')
131 | 
132 |     const submit = () => wrapper.find('.Formol_Formol__submit')
133 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
134 | 
135 |     expect(submit().props().disabled).toBeTruthy()
136 |     expect(cancel().props().disabled).toBeTruthy()
137 | 
138 |     // There's no empty option in multiple
139 |     expect(select().children()).toHaveLength(3)
140 | 
141 |     select()
142 |       .children()
143 |       .forEach((option) => expect(option.type()).toEqual('option'))
144 |     expect(select().children().at(0).text()).toEqual('one')
145 |     expect(select().children().at(1).text()).toEqual('two')
146 |     expect(select().children().at(2).text()).toEqual('three')
147 |     expect(select().children().at(0).props().value).toEqual('##formol_memo_0')
148 |     expect(select().children().at(1).props().value).toEqual('II')
149 |     expect(select().children().at(2).props().value).toEqual('##formol_memo_2')
150 | 
151 |     expect(select().props().value).toEqual(['##formol_memo_0', 'II'])
152 |     // Simulating removal of first property and the add of the last
153 |     await select().simulate('focus')
154 |     await select().simulate('change', {
155 |       target: {
156 |         options: select()
157 |           .children()
158 |           .map((option, i) => ({ ...option.props(), selected: i > 0 })),
159 |       },
160 |     })
161 |     await select().simulate('blur')
162 | 
163 |     expect(submit().props().disabled).toBeFalsy()
164 |     expect(cancel().props().disabled).toBeFalsy()
165 | 
166 |     expect(select().props().value).toEqual(['II', '##formol_memo_2'])
167 | 
168 |     expect(wrapper.getDOMNode().checkValidity()).toBeTruthy()
169 | 
170 |     await submit().simulate('submit')
171 | 
172 |     expect(onSubmit).toHaveBeenCalledWith(
173 |       { select: ['II', true] },
174 |       { select: [1, 'II'] },
175 |       ['select'],
176 |       true
177 |     )
178 |     expect(select().props().value).toEqual(['II', '##formol_memo_2'])
179 |   })
180 |   it('cancels changes in multiple', async () => {
181 |     const onSubmit = jest.fn()
182 |     const wrapper = mount(
183 |       <Formol onSubmit={onSubmit} item={{ select: [1, 'II'] }}>
184 |         <Field
185 |           type="select"
186 |           multiple
187 |           choices={{
188 |             one: 1,
189 |             two: 'II',
190 |             three: true,
191 |           }}
192 |         >
193 |           Select
194 |         </Field>
195 |       </Formol>
196 |     )
197 |     const select = () => wrapper.find('Field').find('select')
198 | 
199 |     const submit = () => wrapper.find('.Formol_Formol__submit')
200 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
201 | 
202 |     expect(submit().props().disabled).toBeTruthy()
203 |     expect(cancel().props().disabled).toBeTruthy()
204 | 
205 |     expect(select().props().value).toEqual(['##formol_memo_0', 'II'])
206 |     // Simulating removal of first property and the add of the last
207 |     await select().simulate('focus')
208 |     await select().simulate('change', {
209 |       target: {
210 |         options: select()
211 |           .children()
212 |           .map((option, i) => ({ ...option.props(), selected: i > 0 })),
213 |       },
214 |     })
215 |     await select().simulate('blur')
216 | 
217 |     expect(submit().props().disabled).toBeFalsy()
218 |     expect(cancel().props().disabled).toBeFalsy()
219 | 
220 |     expect(select().props().value).toEqual(['II', '##formol_memo_2'])
221 | 
222 |     await cancel().simulate('click')
223 | 
224 |     expect(submit().props().disabled).toBeTruthy()
225 |     expect(cancel().props().disabled).toBeTruthy()
226 | 
227 |     expect(select().props().value).toEqual(['##formol_memo_0', 'II'])
228 |   })
229 |   it('sets disabled when readOnly', () => {
230 |     const onSubmit = jest.fn()
231 |     const wrapper = mount(
232 |       <Formol onSubmit={onSubmit} item={{ select: 'II' }}>
233 |         <Field type="select" readOnly>
234 |           Select
235 |         </Field>
236 |       </Formol>
237 |     )
238 |     const input = () => wrapper.find('Field').find('select')
239 | 
240 |     const submit = () => wrapper.find('.Formol_Formol__submit')
241 |     const cancel = () => wrapper.find('.Formol_Formol__cancel')
242 | 
243 |     expect(submit().props().disabled).toBeTruthy()
244 |     expect(cancel().props().disabled).toBeTruthy()
245 |     expect(input().props().disabled).toEqual(true)
246 |   })
247 |   it('handles edge case of multiple and non array value and vice versa', () => {
248 |     const onSubmit = jest.fn()
249 |     const wrapper = mount(
250 |       <Formol onSubmit={onSubmit} item={{ select: [] }}>
251 |         <Field type="select">Select</Field>
252 |       </Formol>
253 |     )
254 |     const select = (w) => w.find('Field').find('select')
255 |     expect(select(wrapper).props().value).toEqual('')
256 | 
257 |     const wrapper2 = mount(
258 |       <Formol onSubmit={onSubmit} item={{ select: 'II' }}>
259 |         <Field type="select" multiple>
260 |           Select
261 |         </Field>
262 |       </Formol>
263 |     )
264 |     expect(select(wrapper2).props().value).toEqual(['II'])
265 |     const wrapper3 = mount(
266 |       <Formol onSubmit={onSubmit}>
267 |         <Field type="select" multiple>
268 |           Select
269 |         </Field>
270 |       </Formol>
271 |     )
272 |     expect(select(wrapper3).props().value).toEqual([])
273 |   })
274 | })
275 | 


--------------------------------------------------------------------------------