├── .npmignore
├── .gitignore
├── publish-examples.sh
├── .prettierrc.json
├── scss
    ├── input-textarea.scss
    ├── _group.scss
    ├── _input-generic.scss
    ├── index.scss
    ├── _input-radio.scss
    ├── _input-dropdown.scss
    ├── _input-checkbox.scss
    ├── _variables.scss
    ├── _template.scss
    ├── _input-toggle.scss
    └── _input-range.scss
├── .travis.yml
├── tsconfig.examples.json
├── tsconfig.json
├── src
    ├── input-generic.tsx
    ├── input-textarea.tsx
    ├── group.tsx
    ├── input-toggle.tsx
    ├── input-range.tsx
    ├── input-radio.tsx
    ├── input-checkbox.tsx
    ├── input-dropdown.tsx
    ├── types.ts
    ├── utils.ts
    ├── template.tsx
    └── index.tsx
├── LICENSE
├── examples
    ├── src
    │   ├── index.scss
    │   ├── index.ejs
    │   ├── form-config.tsx
    │   └── index.tsx
    └── dist
    │   ├── common.js
    │   ├── index.html
    │   └── main.css
├── webpack.config.js
├── tslint.json
├── package.json
└── README.md


/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | examples
3 | node_modules
4 | .rpt2_cache
5 | dist
6 | *.sh
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | es
2 | lib
3 | node_modules
4 | css
5 | .rpt2_cache
6 | *.log
7 | yarn.lock
8 | 


--------------------------------------------------------------------------------
/publish-examples.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | 
3 | echo "Publishing examples to Github pages...."
4 | 
5 | git config --global user.email "travis@travis-ci.org"
6 | git config --global user.name "Travis CI"
7 | yarn publish:examples
8 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "singleQuote": true,
 3 |   "trailingComma": "all",
 4 |   "semi": false,
 5 |   "overrides": [
 6 |     {
 7 |       "files": "*.scss",
 8 |       "options": {
 9 |         "singleQuote": false
10 |       }
11 |     }
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/scss/input-textarea.scss:
--------------------------------------------------------------------------------
 1 | .input-textarea {
 2 |   textarea {
 3 |     width: 100%;
 4 |     min-height: 100px;
 5 |     @include common;
 6 |     @include transition;
 7 |     &:focus {
 8 |       border-color: $input-border-color-dark;
 9 |     }
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 | - '8'
 4 | before_script: yarn build
 5 | after_success: ./publish-examples.sh
 6 | deploy:
 7 |   provider: npm
 8 |   email: praneshpranesh@gmail.com
 9 |   api_key: $NPM_API_KEY
10 |   skip_cleanup: true
11 |   on:
12 |     tags: true
13 |     branch: master
14 | 


--------------------------------------------------------------------------------
/tsconfig.examples.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "experimentalDecorators": true,
 4 |     "jsx": "react",
 5 |     "module": "es6",
 6 |     "moduleResolution": "node",
 7 |     "noImplicitAny": true,
 8 |     "target": "es5",
 9 |     "downlevelIteration": true,
10 |     "lib": ["es2017", "dom"]
11 |   },
12 |   "exclude": ["node_modules"]
13 | }
14 | 


--------------------------------------------------------------------------------
/scss/_group.scss:
--------------------------------------------------------------------------------
 1 | .formland-group {
 2 |   margin-bottom: 40px;
 3 |   padding-bottom: 40px;
 4 |   border-bottom: 1px solid $input-border-color;
 5 |   &:last-child {
 6 |     border-bottom: none;
 7 |   }
 8 |   .group-title {
 9 |     font-size: 18px;
10 |     font-weight: 600;
11 |     margin-bottom: 10px;
12 |   }
13 |   .group-description {
14 |     margin-bottom: 30px;
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "experimentalDecorators": true,
 4 |     "jsx": "react",
 5 |     "module": "es6",
 6 |     "moduleResolution": "node",
 7 |     "noImplicitAny": true,
 8 |     "target": "es5",
 9 |     "declaration": true,
10 |     "downlevelIteration": true,
11 |     "lib": ["es2017", "dom"]
12 |   },
13 |   "include": ["./src/*"],
14 |   "exclude": ["node_modules"]
15 | }
16 | 


--------------------------------------------------------------------------------
/src/input-generic.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | const cn = require('classnames')
 3 | 
 4 | import { IFormElementProps } from './types'
 5 | 
 6 | const InputGeneric: React.SFC<IFormElementProps> = ({
 7 |   value = '',
 8 |   config,
 9 |   callbacks = {},
10 | }) => {
11 |   return (
12 |     <div className={cn('form-Element', 'input-text', config.className)}>
13 |       <input
14 |         {...callbacks}
15 |         {...config.componentProps}
16 |         type={config.type}
17 |         value={value}
18 |         placeholder={config.placeholder}
19 |         name={config.id}
20 |         id={config.id}
21 |       />
22 |     </div>
23 |   )
24 | }
25 | 
26 | export default InputGeneric
27 | 


--------------------------------------------------------------------------------
/src/input-textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | const cn = require('classnames')
 3 | 
 4 | import { IFormElementProps } from './types'
 5 | 
 6 | const InputTextArea: React.SFC<IFormElementProps> = ({
 7 |   callbacks = {},
 8 |   config,
 9 |   value = '',
10 | }) => {
11 |   return (
12 |     <div className={cn('form-element', 'input-textarea', config.className)}>
13 |       <textarea
14 |         {...callbacks}
15 |         {...config.componentProps}
16 |         placeholder={config.placeholder}
17 |         className={config.className}
18 |         name={config.id}
19 |         id={config.id}
20 |         value={value}
21 |       />
22 |     </div>
23 |   )
24 | }
25 | 
26 | export default InputTextArea
27 | 


--------------------------------------------------------------------------------
/src/group.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { IFormlandConfig } from './types'
 3 | 
 4 | export interface FormlandGroupProps {
 5 |   config: IFormlandConfig
 6 | }
 7 | 
 8 | export interface FormlandGroupState {}
 9 | 
10 | class FormlandGroup extends React.Component<
11 |   FormlandGroupProps,
12 |   FormlandGroupState
13 | > {
14 |   public render(): JSX.Element {
15 |     const { config } = this.props
16 |     return (
17 |       <div className="formland-group">
18 |         <div className="group-title">{config.displayName}</div>
19 |         <p className="group-description">{config.description}</p>
20 |         <div className="formland-group-elements">{this.props.children}</div>
21 |       </div>
22 |     )
23 |   }
24 | }
25 | 
26 | export default FormlandGroup
27 | 


--------------------------------------------------------------------------------
/scss/_input-generic.scss:
--------------------------------------------------------------------------------
 1 | .input-text {
 2 |   input[type="date"],
 3 |   input[type="email"],
 4 |   input[type="month"],
 5 |   input[type="number"],
 6 |   input[type="text"],
 7 |   input[type="tel"],
 8 |   input[type="time"],
 9 |   input[type="url"],
10 |   input[type="week"] {
11 |     width: 100%;
12 |     @include common;
13 |     @include transition;
14 |     &:focus {
15 |       border-color: $input-border-color-dark;
16 |     }
17 |   }
18 |   input[type="color"] {
19 |     -webkit-appearance: none;
20 |     border: none;
21 |     width: 100%;
22 |     height: 41px;
23 |   }
24 |   input[type="color"]::-webkit-color-swatch-wrapper {
25 |     padding: 0;
26 |   }
27 |   input[type="color"]::-webkit-color-swatch {
28 |     border: none;
29 |     border-radius: 4px;
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/scss/index.scss:
--------------------------------------------------------------------------------
 1 | @import "variables";
 2 | 
 3 | .formland {
 4 |   font-size: $input-font-size;
 5 |   @import "template";
 6 |   @import "group";
 7 |   @import "input-generic";
 8 |   @import "input-textarea";
 9 |   @import "input-dropdown";
10 |   @import "input-radio";
11 |   @import "input-checkbox";
12 |   @import "input-toggle";
13 |   @import "input-range";
14 | 
15 |   .form-buttons-container {
16 |     margin-top: 20px;
17 |     display: flex;
18 |     justify-content: flex-end;
19 |     button {
20 |       padding: 10px 15px;
21 |       min-width: 100px;
22 |       border-radius: 4px;
23 |       border: none;
24 |       background-color: $primary-color;
25 |       color: $white;
26 |       font-weight: 600;
27 |       margin-left: 30px;
28 |       display: inline-flex;
29 |       align-items: center;
30 |       justify-content: center;
31 |       cursor: pointer;
32 |       &.cancel {
33 |         background-color: $white;
34 |         color: $primary-color;
35 |       }
36 |     }
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/input-toggle.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | const cn = require('classnames')
 3 | 
 4 | import { IFormElementProps } from './types'
 5 | 
 6 | const InputToggle: React.SFC<IFormElementProps> = ({
 7 |   value = false,
 8 |   config,
 9 |   callbacks = {},
10 | }) => {
11 |   const _id = Math.random()
12 |     .toString(36)
13 |     .slice(-5)
14 |   const componentProps = config.componentProps || {}
15 |   return (
16 |     <div className={cn('form-element', 'input-toggle', config.className)}>
17 |       <span className="input-toggle-wrapper">
18 |         <input
19 |           {...callbacks}
20 |           {...componentProps}
21 |           checked={value}
22 |           value={(!value).toString()}
23 |           id={`${config.id}_${_id}`}
24 |           type="checkbox"
25 |         />
26 |         <label htmlFor={`${config.id}_${_id}`} />
27 |       </span>
28 |       <span className="info-text">{componentProps.infoText}</span>
29 |     </div>
30 |   )
31 | }
32 | 
33 | export default InputToggle
34 | 


--------------------------------------------------------------------------------
/src/input-range.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | const cn = require('classnames')
 3 | 
 4 | import { IFormElementProps } from './types'
 5 | 
 6 | const InputRange: React.SFC<IFormElementProps> = ({
 7 |   value,
 8 |   config,
 9 |   callbacks = {},
10 | }) => {
11 |   const componentProps = config.componentProps || {}
12 |   return (
13 |     <div className={cn('form-element', 'input-range', config.className)}>
14 |       {componentProps.showValue !== false && (
15 |         <div className="value">{value || componentProps.min}</div>
16 |       )}
17 |       <input
18 |         {...callbacks}
19 |         {...componentProps}
20 |         type="range"
21 |         value={value || componentProps.min}
22 |         name={config.id}
23 |         id={config.id}
24 |       />
25 |       {componentProps.showRange !== false && (
26 |         <div className="range">
27 |           <span className="min">{componentProps.min}</span>
28 |           <span className="max">{componentProps.max}</span>
29 |         </div>
30 |       )}
31 |     </div>
32 |   )
33 | }
34 | 
35 | export default InputRange
36 | 


--------------------------------------------------------------------------------
/scss/_input-radio.scss:
--------------------------------------------------------------------------------
 1 | .input-radio {
 2 |   .radio-button {
 3 |     display: inline-block;
 4 |     margin-right: 20px;
 5 |     display: inline-flex;
 6 |     align-items: center;
 7 |     * {
 8 |       cursor: pointer;
 9 |     }
10 |     label {
11 |       margin: 0;
12 |     }
13 |     input[type="radio"] {
14 |       margin-right: 5px;
15 |       appearance: none;
16 |       width: 20px;
17 |       height: 20px;
18 |       border-radius: 50%;
19 |       border: $input-border-width solid $input-border-color;
20 |       outline: none;
21 |       &:focus {
22 |         border-color: $input-border-color-dark;
23 |       }
24 |       &:checked {
25 |         border-color: $primary-color;
26 |         & + label {
27 |           position: relative;
28 |           &:after {
29 |             content: " ";
30 |             position: absolute;
31 |             left: -20px;
32 |             top: 5px;
33 |             width: 10px;
34 |             height: 10px;
35 |             border-radius: 50%;
36 |             background-color: $primary-color;
37 |           }
38 |         }
39 |       }
40 |     }
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Pranesh Ravi
 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 | 


--------------------------------------------------------------------------------
/examples/src/index.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |   padding: 15px;
 3 |   a {
 4 |     color: #4c5af7;
 5 |     text-decoration: none;
 6 |   }
 7 |   .banner {
 8 |     padding: 50px 15px;
 9 |     margin: -15px;
10 |     margin-bottom: 50px;
11 |     background-color: #4c5af7;
12 |     color: #fff;
13 |     p {
14 |       opacity: 0.5;
15 |     }
16 |     .button-container {
17 |       margin-top: 30px;
18 |       button {
19 |         padding: 10px 15px;
20 |         cursor: pointer;
21 |         background-color: #ffffff;
22 |         border-radius: 4px;
23 |         border: none;
24 |         color: #4c5af7;
25 |         text-transform: uppercase;
26 |         min-width: 100px;
27 |         font-weight: 600;
28 |       }
29 |     }
30 |   }
31 |   .mx-400 {
32 |     max-width: 400px;
33 |     margin-bottom: 30px;
34 |     h4,
35 |     a {
36 |       margin-bottom: 30px;
37 |       display: inline-block;
38 |       margin-right: 15px;
39 |     }
40 |   }
41 |   .section {
42 |     margin-bottom: 30px;
43 |   }
44 |   .config {
45 |     .CodeMirror {
46 |       height: 600px;
47 |     }
48 |   }
49 |   .store {
50 |     .CodeMirror {
51 |       height: 200px;
52 |     }
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/input-radio.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | const cn = require('classnames')
 3 | 
 4 | import { IFormElementProps } from './types'
 5 | 
 6 | const InputRadio: React.SFC<IFormElementProps> = ({
 7 |   value = '',
 8 |   config,
 9 |   callbacks = {},
10 | }) => {
11 |   const radioInputs = (config.options || []).map(option => {
12 |     const unique = Math.random()
13 |       .toString(36)
14 |       .slice(-5)
15 |     return (
16 |       <span className="radio-button" key={`${config.id}_${option.value}`}>
17 |         <input
18 |           {...callbacks}
19 |           {...config.componentProps}
20 |           checked={value === option.value}
21 |           className={config.className}
22 |           type="radio"
23 |           id={`${config.id}_${option.value}_${unique}`}
24 |           value={option.value}
25 |           disabled={option.disabled || false}
26 |         />
27 |         <label htmlFor={`${config.id}_${option.value}_${unique}`}>
28 |           {option.label}
29 |         </label>
30 |       </span>
31 |     )
32 |   })
33 |   return (
34 |     <div className={cn('form-element', 'input-radio', config.className)}>
35 |       {radioInputs}
36 |     </div>
37 |   )
38 | }
39 | 
40 | export default InputRadio
41 | 


--------------------------------------------------------------------------------
/scss/_input-dropdown.scss:
--------------------------------------------------------------------------------
 1 | .input-dropdown {
 2 |   .dropdown-wrapper {
 3 |     position: relative;
 4 |     &.multi {
 5 |       &:after {
 6 |         content: none;
 7 |       }
 8 |       select {
 9 |         padding: $input-textbox-padding;
10 |         option {
11 |           padding: $input-textbox-padding;
12 |           cursor: pointer;
13 |           &:checked {
14 |             background-color: $primary-color;
15 |           }
16 |         }
17 |       }
18 |     }
19 |     &:after {
20 |       content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAp0lEQVRIS+2SUQrDIAyG/6AH2E3WI1i8dmDuBt1NegDFIrgRhC22UNYHffIh/l/yGcLJh07OxwCohoeiiyvy3i9ElGOMcwhhle06527W2geAlZnnb6P8/OQKuANYJESETwCezOwOAUqQMSYQ0QdSgmrnU875lVJy7XQSpq5pC6mPu8JLrQooRQ0EPZ2/p+gCSEi5a1p2KVIXXSnonuAoaABUc0PR/xVtJW9OGV1k1e8AAAAASUVORK5CYII=");
21 |       position: absolute;
22 |       right: 5px;
23 |       top: -2px;
24 |       color: $input-border-color;
25 |       pointer-events: none;
26 |     }
27 |     select {
28 |       appearance: none;
29 |       @include common;
30 |       @include transition;
31 |       padding-right: 30px;
32 |       &:focus {
33 |         border-color: $input-border-color-dark;
34 |       }
35 |     }
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/input-checkbox.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | const cn = require('classnames')
 3 | 
 4 | import { IFormElementProps } from './types'
 5 | 
 6 | const InputCheckbox: React.SFC<IFormElementProps> = ({
 7 |   value = '',
 8 |   config,
 9 |   callbacks = {},
10 | }) => {
11 |   const { separator = ',' } = config
12 |   const valueArray: any[] = config.simpleValues ? value.split(separator) : value
13 | 
14 |   const checkboxInputs = (config.options || []).map(option => {
15 |     const unique = Math.random()
16 |       .toString(36)
17 |       .slice(-5)
18 |     return (
19 |       <span className="checkbox-wrapper" key={`${config.id}_${unique}`}>
20 |         <input
21 |           {...callbacks}
22 |           {...config.componentProps}
23 |           checked={valueArray.indexOf(option.value) > -1}
24 |           value={option.value.toString()}
25 |           id={`${config.id}_${unique}`}
26 |           type="checkbox"
27 |         />
28 |         <label htmlFor={`${config.id}_${unique}`}>{option.label}</label>
29 |       </span>
30 |     )
31 |   })
32 | 
33 |   return (
34 |     <div className={cn(['form-element', 'input-checkbox', config.className])}>
35 |       {checkboxInputs}
36 |     </div>
37 |   )
38 | }
39 | 
40 | export default InputCheckbox
41 | 


--------------------------------------------------------------------------------
/examples/src/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
 6 |     <title>Formland</title>
 7 |     <meta name="author" content="Indix" />
 8 |     <meta name="description" content="A simple, super-flexible, extensible config based form generator for React." />
 9 | 
10 |     <meta content="Formland" property="og:site_name" />
11 |     <meta content="object" property="og:type" />
12 |     <meta content="Formland" property="og:title" />
13 |     <meta content="https://oss.indix.com/formland/" property="og:url" />
14 |     <meta content="A simple, super-flexible, extensible config based form generator for React." property="og:description" />
15 | 
16 |     <meta name="twitter:site" value="@Indix" />
17 |     <meta name="twitter:creator" value="@Indix" />
18 |     <meta name="twitter:title" content="Formland" />
19 |     <meta name="twitter:description" content="A simple, super-flexible, extensible config based form generator for React." />
20 |   </head>
21 |   <body>
22 |   <div id="app"></div>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/examples/dist/common.js:
--------------------------------------------------------------------------------
1 | (function(a){function b(c){if(d[c])return d[c].exports;var e=d[c]={i:c,l:!1,exports:{}};return a[c].call(e.exports,e,e.exports,b),e.l=!0,e.exports}var c=window.webpackJsonp;window.webpackJsonp=function(d,f,g){for(var h,j,k,l=0,i=[];l<d.length;l++)j=d[l],e[j]&&i.push(e[j][0]),e[j]=0;for(h in f)Object.prototype.hasOwnProperty.call(f,h)&&(a[h]=f[h]);for(c&&c(d,f,g);i.length;)i.shift()();if(g)for(l=0;l<g.length;l++)k=b(b.s=g[l]);return k};var d={},e={1:0};b.e=function(a){function c(){h.onerror=h.onload=null,clearTimeout(i);var b=e[a];0!==b&&(b&&b[1](new Error("Loading chunk "+a+" failed.")),e[a]=void 0)}var d=e[a];if(0===d)return new Promise(function(a){a()});if(d)return d[2];var f=new Promise(function(b,c){d=e[a]=[b,c]});d[2]=f;var g=document.getElementsByTagName("head")[0],h=document.createElement("script");h.type="text/javascript",h.charset="utf-8",h.async=!0,h.timeout=1.2e5,b.nc&&h.setAttribute("nonce",b.nc),h.src=b.p+""+a+".js";var i=setTimeout(c,1.2e5);return h.onerror=h.onload=c,g.appendChild(h),f},b.m=a,b.c=d,b.d=function(a,c,d){b.o(a,c)||Object.defineProperty(a,c,{configurable:!1,enumerable:!0,get:d})},b.n=function(a){var c=a&&a.__esModule?function(){return a["default"]}:function(){return a};return b.d(c,"a",c),c},b.o=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)},b.p="",b.oe=function(a){throw console.error(a),a}})([]);


--------------------------------------------------------------------------------
/examples/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
 6 |     <title>Formland</title>
 7 |     <meta name="author" content="Indix" />
 8 |     <meta name="description" content="A simple, super-flexible, extensible config based form generator for React." />
 9 | 
10 |     <meta content="Formland" property="og:site_name" />
11 |     <meta content="object" property="og:type" />
12 |     <meta content="Formland" property="og:title" />
13 |     <meta content="https://oss.indix.com/formland/" property="og:url" />
14 |     <meta content="A simple, super-flexible, extensible config based form generator for React." property="og:description" />
15 | 
16 |     <meta name="twitter:site" value="@Indix" />
17 |     <meta name="twitter:creator" value="@Indix" />
18 |     <meta name="twitter:title" content="Formland" />
19 |     <meta name="twitter:description" content="A simple, super-flexible, extensible config based form generator for React." />
20 |   <link href="main.css" rel="stylesheet"></head>
21 |   <body>
22 |   <div id="app"></div>
23 |   <script type="text/javascript" src="common.js"></script><script type="text/javascript" src="main.js"></script></body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/scss/_input-checkbox.scss:
--------------------------------------------------------------------------------
 1 | .input-checkbox {
 2 |   .checkbox-wrapper {
 3 |     display: inline-block;
 4 |     margin-right: 20px;
 5 |     display: inline-flex;
 6 |     align-items: center;
 7 |     * {
 8 |       cursor: pointer;
 9 |     }
10 |     label {
11 |       margin: 0;
12 |     }
13 |     input[type="checkbox"] {
14 |       margin-right: 5px;
15 |       appearance: none;
16 |       height: 20px;
17 |       width: 20px;
18 |       border: $input-border-width solid $input-border-color;
19 |       border-radius: $input-border-radius;
20 |       outline: none;
21 |       &:focus {
22 |         border-color: $input-border-color-dark;
23 |       }
24 |       &:checked {
25 |         background-color: $primary-color;
26 |         border-color: $primary-color;
27 |         & + label {
28 |           position: relative;
29 |           &:after {
30 |             content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAApklEQVRIS+2U0Q2EIBAF53VgJ3claOV318HZiR2s2UQNIepC1D/4JPBmGRbEw0MP59MAoeGmCDPrgA8wSRpyZ5cUJeFv4Cepvw2QhY9AL2m6BVAa7rBdRWb2BwwY8qpqwiPAC3DQBqkNPwN4Z3yBDbK49W7xCz10XnwHS7UpxPdWhR+eYK0ig/h0ceVrRvgOEojv2W3Fsw8pBIS/WbCgAUKDTVGoaAbVdEgZ6zcjOAAAAABJRU5ErkJggg==");
31 |             position: absolute;
32 |             left: -20px;
33 |             transform: scale3d(0.8, 0.8, 0.8);
34 |             left: -27px;
35 |             top: -1px;
36 |           }
37 |         }
38 |       }
39 |     }
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/scss/_variables.scss:
--------------------------------------------------------------------------------
 1 | // Common
 2 | $primary-color: #4c5af7;
 3 | $input-border-color: #e0e0e0;
 4 | $white: #ffffff;
 5 | $input-border-color-dark: lighten($primary-color, 25%);
 6 | $input-border-width: 2px;
 7 | $input-border-radius: 4px;
 8 | $input-background-color: $white;
 9 | $input-font-size: 14px;
10 | 
11 | // Input Text
12 | $input-textbox-padding: 10px;
13 | 
14 | // Input Toggle
15 | $input-toggle-border-radius: 4px;
16 | $input-toggle-handle-background: $white;
17 | $input-toggle-track-background: $input-border-color;
18 | $input-toggle-handle-width: 20px;
19 | $input-toggle-handle-height: 24px;
20 | $input-toggle-track-width: 50px;
21 | $input-toggle-track-height: 30px;
22 | $input-toggle-handle-margin-left: 24px;
23 | 
24 | // Input Range
25 | $input-range-thumb-height: 20px;
26 | $input-range-thumb-width: 20px;
27 | $input-range-thumb-radius: 10px;
28 | $input-range-track-height: 5px;
29 | 
30 | // Template
31 | $template-margin-bottom: 30px;
32 | $template-margin-right: 30px;
33 | $template-label-margin-bottom: 10px;
34 | $template-error-background: #ff3a3a;
35 | $template-error-font-color: $white;
36 | 
37 | @mixin common {
38 |   padding: $input-textbox-padding;
39 |   border: $input-border-width solid $input-border-color;
40 |   border-radius: $input-border-radius;
41 |   background-color: $input-background-color;
42 |   outline: none;
43 | }
44 | 
45 | @mixin transition($props: all) {
46 |   transition: $props 0.2s ease;
47 | }
48 | 


--------------------------------------------------------------------------------
/src/input-dropdown.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | const cn = require('classnames')
 3 | import { IFormElementProps } from './types'
 4 | 
 5 | const InputDropdown: React.SFC<IFormElementProps> = ({
 6 |   value: v,
 7 |   config,
 8 |   callbacks = {},
 9 | }) => {
10 |   const value =
11 |     (v &&
12 |     (config.componentProps &&
13 |       config.componentProps.multiple &&
14 |       config.simpleValues)
15 |       ? v.split(config.separator || ',')
16 |       : v) ||
17 |     (config.componentProps && config.componentProps.multiple ? [] : '')
18 | 
19 |   const options = (config.options || []).map((option, i) => {
20 |     return (
21 |       <option
22 |         key={`${config.id}_${i}`}
23 |         value={option.value}
24 |         disabled={option.disabled || false}
25 |       >
26 |         {option.label}
27 |       </option>
28 |     )
29 |   })
30 | 
31 |   return (
32 |     <div className={cn('form-element', 'input-dropdown', config.className)}>
33 |       <span
34 |         className={cn('dropdown-wrapper', {
35 |           multi: config.componentProps && config.componentProps.multiple,
36 |         })}
37 |       >
38 |         <select
39 |           {...callbacks}
40 |           {...config.componentProps}
41 |           value={value}
42 |           name={config.id}
43 |           id={config.id}
44 |         >
45 |           {options}
46 |         </select>
47 |       </span>
48 |     </div>
49 |   )
50 | }
51 | 
52 | export default InputDropdown
53 | 


--------------------------------------------------------------------------------
/scss/_template.scss:
--------------------------------------------------------------------------------
 1 | .formland-template {
 2 |   margin-bottom: $template-margin-bottom;
 3 |   &.dir-horizontal {
 4 |     display: inline-block;
 5 |     margin-right: $template-margin-right;
 6 |   }
 7 |   &:last-child {
 8 |     margin-bottom: 0;
 9 |   }
10 |   .formland-label {
11 |     margin-bottom: $template-label-margin-bottom;
12 |     .optional {
13 |       display: inline-block;
14 |       margin-left: 5px;
15 |       opacity: 0.5;
16 |       font-size: 12px;
17 |     }
18 |   }
19 |   .help-text-trigger {
20 |     display: inline-block;
21 |     margin-left: 7px;
22 |     opacity: 0.5;
23 |     cursor: help;
24 |     img {
25 |       width: 15px;
26 |     }
27 |   }
28 |   .formland-field {
29 |     position: relative;
30 |     .error {
31 |       position: absolute;
32 |       font-size: 12px;
33 |       padding: 3px 10px;
34 |       border-radius: 4px;
35 |       color: $template-error-font-color;
36 |       background-color: $template-error-background;
37 |       bottom: -30px;
38 |       opacity: 0;
39 |       pointer-events: none;
40 |       &.is-error {
41 |         opacity: 1;
42 |         pointer-events: all;
43 |       }
44 |       &:before {
45 |         position: absolute;
46 |         bottom: 100%;
47 |         left: 10px;
48 |         z-index: 15;
49 |         width: 0;
50 |         height: 0;
51 |         pointer-events: none;
52 |         content: " ";
53 |         border: solid transparent;
54 |         border-bottom-color: $template-error-background;
55 |       }
56 |     }
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | export interface IOptions {
 2 |   value: any
 3 |   label: string
 4 | 
 5 |   disabled?: boolean
 6 | }
 7 | 
 8 | export interface IFormlandConfig {
 9 |   id: string
10 |   type:
11 |     | 'group'
12 |     | 'dropdown'
13 |     | 'text'
14 |     | 'toggle'
15 |     | 'radio'
16 |     | 'checkbox'
17 |     | 'range'
18 |     | 'textarea'
19 |     | string
20 |   resultPath?: string
21 | 
22 |   displayName?: string
23 |   elements?: IFormlandConfig[]
24 |   description?: string
25 |   className?: string
26 |   isHidden?: <T>(store: T) => boolean
27 |   optional?: boolean
28 |   placeholder?: string
29 |   options?: IOptions[]
30 |   separator?: string
31 |   topComponent?: <T>(store: T) => JSX.Element
32 |   simpleValues?: boolean
33 |   bottomComponent?: <T>(store: T) => JSX.Element
34 |   componentProps?: any
35 |   helpText?: string
36 |   helpTextOptions?: any
37 |   instantValidation?: boolean
38 |   required?: boolean | string
39 |   validation?: (value: any) => string | false | null | undefined
40 |   modifyStoreBeforeChange?: <T>(
41 |     config: IFormlandConfig,
42 |     value: any,
43 |     previousStore: T,
44 |   ) => T
45 | }
46 | 
47 | export interface ISupportedGlobalCallbacks<T> {
48 |   onChange?: Function
49 |   onFocus?: Function
50 |   onBlur?: Function
51 | }
52 | 
53 | export interface IFormElementProps {
54 |   value: any
55 |   config: IFormlandConfig
56 |   componentProps: any
57 |   callbacks: any
58 | }
59 | 
60 | export interface IFormErrors {
61 |   id: string
62 |   error: string | null
63 | }
64 | 


--------------------------------------------------------------------------------
/scss/_input-toggle.scss:
--------------------------------------------------------------------------------
 1 | .__dummy {
 2 |   content: "";
 3 |   display: block;
 4 |   position: absolute;
 5 |   top: 3px;
 6 |   left: 3px;
 7 | }
 8 | .input-toggle {
 9 |   display: inline-flex;
10 |   align-items: center;
11 |   .info-text {
12 |     display: inline-block;
13 |     margin-left: 15px;
14 |     margin-top: -5px;
15 |   }
16 |   input[type="checkbox"] {
17 |     position: absolute;
18 |     visibility: hidden;
19 |     & + label {
20 |       position: relative;
21 |       cursor: pointer;
22 |       outline: none;
23 |       user-select: none;
24 |       width: $input-toggle-track-width;
25 |       height: $input-toggle-track-height;
26 |       background-color: $input-toggle-track-background;
27 |       border-radius: $input-toggle-border-radius;
28 |       overflow: hidden;
29 |       margin-bottom: 0;
30 |       @include transition(background);
31 |       &:before {
32 |         @extend .__dummy;
33 |         right: 1px;
34 |         background-color: $input-toggle-handle-background;
35 |         border-radius: $input-toggle-border-radius;
36 |       }
37 |       &:after {
38 |         @extend .__dummy;
39 |         width: $input-toggle-handle-width;
40 |         height: $input-toggle-handle-height;
41 |         background-color: $input-toggle-handle-background;
42 |         border-radius: $input-toggle-border-radius;
43 |         @include transition(margin);
44 |       }
45 |     }
46 |     &:checked {
47 |       & + label {
48 |         background-color: $primary-color;
49 |         &:after {
50 |           margin-left: $input-toggle-handle-margin-left;
51 |         }
52 |       }
53 |     }
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 3 | const webpack = require('webpack')
 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 5 | const MinifyPlugin = require('babel-minify-webpack-plugin')
 6 | 
 7 | module.exports = {
 8 |   entry: {
 9 |     main: './examples/src/index.tsx',
10 |   },
11 |   resolve: {
12 |     extensions: ['.jsx', '.tsx', '.ts', '.scss', '.css', '.js'],
13 |   },
14 |   output: {
15 |     path: path.resolve(__dirname, 'examples/dist'),
16 |     filename: '[name].js',
17 |   },
18 |   devServer: {
19 |     contentBase: path.resolve(__dirname, 'examples/dist'),
20 |     port: 8000,
21 |     hot: true,
22 |   },
23 |   module: {
24 |     rules: [
25 |       {
26 |         test: /\.tsx?$/,
27 |         use: [
28 |           {
29 |             loader: 'ts-loader',
30 |             options: {
31 |               configFile: 'tsconfig.examples.json',
32 |             },
33 |           },
34 |         ],
35 |         exclude: /node_modules/,
36 |       },
37 |       {
38 |         test: /\.s?css$/,
39 |         use: ExtractTextPlugin.extract({
40 |           fallback: 'style-loader',
41 |           use: ['css-loader?minimize=true', 'sass-loader'],
42 |         }),
43 |       },
44 |     ],
45 |   },
46 |   plugins: [
47 |     new HtmlWebpackPlugin({
48 |       template: './examples/src/index.ejs',
49 |     }),
50 |     new webpack.optimize.CommonsChunkPlugin({
51 |       name: 'common',
52 |       filename: 'common.js',
53 |       minChunk: 2,
54 |     }),
55 |     new ExtractTextPlugin('main.css'),
56 |   ].concat(
57 |     process.env.NODE_ENV === 'production'
58 |       ? [
59 |           new MinifyPlugin(),
60 |           new webpack.DefinePlugin({
61 |             'process.env.NODE_ENV': JSON.stringify('production'),
62 |           }),
63 |         ]
64 |       : [new webpack.HotModuleReplacementPlugin()],
65 |   ),
66 | }
67 | 


--------------------------------------------------------------------------------
/scss/_input-range.scss:
--------------------------------------------------------------------------------
 1 | .input-range {
 2 |   .value {
 3 |     font-size: 18px;
 4 |     margin: 10px 0;
 5 |     font-weight: 800;
 6 |     color: $primary-color;
 7 |   }
 8 |   .range {
 9 |     margin-top: 10px;
10 |     display: flex;
11 |     justify-content: space-between;
12 |     opacity: 0.5;
13 |   }
14 |   input[type="range"] {
15 |     -webkit-appearance: none;
16 |     width: 100%;
17 |     background: transparent;
18 |   }
19 |   input[type="range"]::-webkit-slider-thumb {
20 |     -webkit-appearance: none;
21 |   }
22 |   input[type="range"]:focus {
23 |     outline: none;
24 |   }
25 | 
26 |   input[type="range"]::-webkit-slider-thumb {
27 |     appearance: none;
28 |     height: $input-range-thumb-height;
29 |     width: $input-range-thumb-width;
30 |     border-radius: $input-range-thumb-radius;
31 |     background: $primary-color;
32 |     cursor: pointer;
33 |     margin-top: -8px;
34 |     transform: scale3d(1, 1, 1);
35 |     @include transition(transform);
36 |   }
37 |   input[type="range"]:focus::-webkit-slider-thumb {
38 |     transform: scale3d(1.2, 1.2, 1.2);
39 |   }
40 |   input[type="range"]::-moz-range-thumb {
41 |     appearance: none;
42 |     height: $input-range-thumb-height;
43 |     width: $input-range-thumb-width;
44 |     border-radius: $input-range-thumb-radius;
45 |     background: $primary-color;
46 |     cursor: pointer;
47 |   }
48 | 
49 |   input[type="range"]::-webkit-slider-runnable-track {
50 |     width: 100%;
51 |     height: $input-range-track-height;
52 |     cursor: pointer;
53 |     background: $input-border-color;
54 |     border-radius: $input-border-radius;
55 |     @include transition(background);
56 |   }
57 | 
58 |   input[type="range"]:focus::-webkit-slider-runnable-track {
59 |     background: $input-border-color-dark;
60 |   }
61 | 
62 |   input[type="range"]::-moz-range-track {
63 |     width: 100%;
64 |     height: $input-range-track-height;
65 |     cursor: pointer;
66 |     background: $input-border-color;
67 |     border-radius: $input-border-radius;
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "jsRules": {
  3 |       "class-name": true,
  4 |       "eofline": true,
  5 |       "comment-format": [
  6 |         true,
  7 |         "check-space"
  8 |       ],
  9 |       "indent": [
 10 |         true,
 11 |         "spaces"
 12 |       ],
 13 |       "no-duplicate-variable": true,
 14 |       "no-eval": true,
 15 |       "no-trailing-whitespace": true,
 16 |       "no-unsafe-finally": true,
 17 |       "one-line": [
 18 |         true,
 19 |         "check-open-brace",
 20 |         "check-whitespace"
 21 |       ],
 22 |       "quotemark": [
 23 |         true,
 24 |         "single"
 25 |       ],
 26 |       "semicolon": [
 27 |         true,
 28 |         "always"
 29 |       ],
 30 |       "triple-equals": [
 31 |         true,
 32 |         "allow-null-check"
 33 |       ],
 34 |       "trailing-comma": [
 35 |         true,
 36 |         {
 37 |           "multiline": "always",
 38 |           "singleline": "never"
 39 |         }
 40 |       ],
 41 |       "variable-name": [
 42 |         true,
 43 |         "ban-keywords"
 44 |       ],
 45 |       "whitespace": [
 46 |         true,
 47 |         "check-branch",
 48 |         "check-decl",
 49 |         "check-operator",
 50 |         "check-separator",
 51 |         "check-type"
 52 |       ]
 53 |     },
 54 |     "rulesDirectory": [
 55 |       "node_modules/tslint-eslint-rules/dist/rules"
 56 |     ],
 57 |     "rules": {
 58 |       "class-name": true,
 59 |       "eofline": true,
 60 |       "comment-format": [
 61 |         true,
 62 |         "check-space"
 63 |       ],
 64 |       "indent": [
 65 |         true,
 66 |         "spaces"
 67 |       ],
 68 |       "no-eval": true,
 69 |       "no-internal-module": true,
 70 |       "no-trailing-whitespace": true,
 71 |       "no-unsafe-finally": true,
 72 |       "no-var-keyword": true,
 73 |       "one-line": [
 74 |         true,
 75 |         "check-open-brace",
 76 |         "check-whitespace"
 77 |       ],
 78 |       "quotemark": [
 79 |         true,
 80 |         "single",
 81 |         "jsx-double"
 82 |       ],
 83 |       "semicolon": [
 84 |         false,
 85 |         "always"
 86 |       ],
 87 |       "triple-equals": [
 88 |         true,
 89 |         "allow-null-check"
 90 |       ],
 91 |       "trailing-comma": [
 92 |         true,
 93 |         {
 94 |           "multiline": "always",
 95 |           "singleline": "never"
 96 |         }
 97 |       ],
 98 |       "typedef-whitespace": [
 99 |         true,
100 |         {
101 |           "call-signature": "nospace",
102 |           "index-signature": "nospace",
103 |           "parameter": "nospace",
104 |           "property-declaration": "nospace",
105 |           "variable-declaration": "nospace"
106 |         }
107 |       ],
108 |       "variable-name": [
109 |         true,
110 |         "ban-keywords"
111 |       ],
112 |       "whitespace": [
113 |         true,
114 |         "check-branch",
115 |         "check-decl",
116 |         "check-operator",
117 |         "check-separator",
118 |         "check-type"
119 |       ]
120 |     }
121 |   }
122 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | import { IFormlandConfig } from './types'
 2 | 
 3 | const dot = require('dot-prop-immutable')
 4 | 
 5 | const getNewState = (
 6 |   callback: (val: any) => void,
 7 |   store: any,
 8 |   customValueResolver?: { (config: IFormlandConfig, args: any[]): any }[],
 9 | ) => {
10 |   const getValue = (...agmnts: any[]) => {
11 |     const [config, event] = agmnts
12 |     switch (config.type) {
13 |       case 'color':
14 |       case 'date':
15 |       case 'email':
16 |       case 'month':
17 |       case 'text':
18 |       case 'range':
19 |       case 'tel':
20 |       case 'time':
21 |       case 'url':
22 |       case 'week':
23 |       case 'textarea':
24 |       case 'radio':
25 |         return event.currentTarget.value
26 |       case 'number':
27 |         return parseInt(event.currentTarget.value, 10)
28 |       case 'dropdown':
29 |         if (config.componentProps && config.componentProps.multiple) {
30 |           const options = event.currentTarget.options
31 |           const value = []
32 |           for (let i = 0, l = options.length; i < l; i++) {
33 |             if (options[i].selected) {
34 |               value.push(options[i].value)
35 |             }
36 |           }
37 |           return config.simpleValues
38 |             ? value.join(config.separator || ',')
39 |             : value
40 |         }
41 |         return event.currentTarget.value
42 |       case 'checkbox':
43 |         const value = event.currentTarget.value
44 |         const existingValue = dot.get(store, config.resultPath) || []
45 |         const existingValueArray =
46 |           config.simpleValues && existingValue.split
47 |             ? existingValue.split(config.separator || ',')
48 |             : existingValue
49 |         const valuesSet = new Set(existingValueArray)
50 |         if (valuesSet.has(value)) {
51 |           valuesSet.delete(value)
52 |         } else {
53 |           valuesSet.add(value)
54 |         }
55 |         const valueArray = [...valuesSet]
56 |         return config.simpleValues
57 |           ? valueArray.join(config.separator || ',')
58 |           : valueArray
59 |       case 'toggle':
60 |         return event.currentTarget.value === 'true'
61 |       default:
62 |         if (customValueResolver) {
63 |           let value = ''
64 |           let i = 0
65 |           while (i < customValueResolver.length) {
66 |             value = customValueResolver[i].apply(null, agmnts)
67 |             if (value || typeof value === 'boolean') {
68 |               break
69 |             }
70 |             i++
71 |           }
72 |           return value
73 |         }
74 |         return ''
75 |     }
76 |   }
77 |   return (config: IFormlandConfig, ...rest: any[]) => {
78 |     const value = getValue.apply(null, [config].concat(rest))
79 |     const intermediateStore = dot.set(store, config.resultPath, value)
80 |     const newStore = config.modifyStoreBeforeChange
81 |       ? config.modifyStoreBeforeChange(config, value, intermediateStore) ||
82 |         intermediateStore
83 |       : intermediateStore
84 |     return callback(newStore)
85 |   }
86 | }
87 | 
88 | export { getNewState }
89 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "formland",
 3 |   "version": "1.0.1",
 4 |   "description":
 5 |     "A simple, super-flexible, extensible config based form generator for React.",
 6 |   "keywords": [
 7 |     "component",
 8 |     "components",
 9 |     "config",
10 |     "extensible",
11 |     "form",
12 |     "forms",
13 |     "frontend",
14 |     "react",
15 |     "react-component",
16 |     "ui"
17 |   ],
18 |   "homepage": "https://oss.indix.com/formland/",
19 |   "bugs": {
20 |     "url": "https://github.com/indix/formland/issues"
21 |   },
22 |   "license": "MIT",
23 |   "contributors": ["Pranesh Ravi <praneshpranesh@gmail.com>"],
24 |   "main": "lib/index",
25 |   "repository": "https://github.com/indix/formland.git",
26 |   "scripts": {
27 |     "build": "yarn build:js && yarn build:scss",
28 |     "build:examples": "webpack --color --progress",
29 |     "build:js": "tsc --outDir lib/",
30 |     "build:js:watch": "tsc --outDir lib/ -w",
31 |     "build:scss": "yarn run task:scss & yarn run task:autoprefix",
32 |     "precommit": "pretty-quick --staged",
33 |     "publish:examples":
34 |       "NODE_ENV=production yarn build:examples && gh-pages -d examples/dist -r $GITHUB_REPO_URL",
35 |     "publish:examples:local":
36 |       "NODE_ENV=production yarn build:examples && gh-pages -d examples/dist",
37 |     "scss:watch": "nodemon --watch scss/ -e scss --exec yarn run build:scss",
38 |     "start:examples": "webpack-dev-server --open",
39 |     "task:autoprefix": "postcss css/*.css --use autoprefixer -d css",
40 |     "task:scss": "node-sass-chokidar scss/index.scss -o css",
41 |     "test": "echo 'Work in Progress'"
42 |   },
43 |   "dependencies": {
44 |     "babel-runtime": "^6.26.0",
45 |     "classnames": "^2.2.5",
46 |     "dot-prop-immutable": "^1.4.0",
47 |     "rc-tooltip": "^3.7.0"
48 |   },
49 |   "devDependencies": {
50 |     "@types/classnames": "^2.2.3",
51 |     "@types/core-js": "^0.9.43",
52 |     "@types/rc-tooltip": "^3.4.10",
53 |     "@types/react": "^16.0.25",
54 |     "@types/react-dom": "^16.0.3",
55 |     "@types/react-select": "^1.0.60",
56 |     "@types/rollup": "^0.51.1",
57 |     "@types/shortid": "^0.0.29",
58 |     "autoprefixer": "^7.1.6",
59 |     "babel-minify-webpack-plugin": "^0.2.0",
60 |     "codemirror": "^5.35.0",
61 |     "css-loader": "^0.28.7",
62 |     "eslint": "^4.12.1",
63 |     "extract-text-webpack-plugin": "^3.0.2",
64 |     "gh-pages": "^1.1.0",
65 |     "html-webpack-plugin": "^2.30.1",
66 |     "husky": "^0.14.3",
67 |     "node-sass": "^4.7.2",
68 |     "node-sass-chokidar": "^0.0.3",
69 |     "nodemon": "^1.12.1",
70 |     "postcss-cli": "^4.1.1",
71 |     "prettier": "^1.10.2",
72 |     "pretty-quick": "^1.2.3",
73 |     "react": "^16.2.0",
74 |     "react-codemirror2": "^4.0.0",
75 |     "react-dom": "^16.2.0",
76 |     "react-select": "^1.1.0",
77 |     "sass-loader": "^6.0.6",
78 |     "style-loader": "^0.19.0",
79 |     "ts-loader": "^3.2.0",
80 |     "tslint": "^5.8.0",
81 |     "tslint-eslint-rules": "^4.1.1",
82 |     "typescript": "^2.9.1",
83 |     "webpack": "^3.9.1",
84 |     "webpack-dev-server": "^3.1.11"
85 |   },
86 |   "peerDependencies": {
87 |     "react": "^16.2.0",
88 |     "react-dom": "^16.2.0"
89 |   },
90 |   "maintainers": ["Pranesh Ravi <praneshpranesh@gmail.com>"]
91 | }
92 | 


--------------------------------------------------------------------------------
/src/template.tsx:
--------------------------------------------------------------------------------
 1 | require('rc-tooltip/assets/bootstrap.css')
 2 | import * as React from 'react'
 3 | import Tooltip from 'rc-tooltip'
 4 | 
 5 | const cn = require('classnames')
 6 | 
 7 | import { IFormlandConfig } from './types'
 8 | 
 9 | export interface FormlandTemplateProps {
10 |   store: any
11 |   config: IFormlandConfig
12 |   error: any
13 | }
14 | 
15 | export interface FormlandTemplateState {}
16 | 
17 | class FormlandTemplate extends React.Component<
18 |   FormlandTemplateProps,
19 |   FormlandTemplateState
20 | > {
21 |   private getTopComponent(config: IFormlandConfig, store: any) {
22 |     return (
23 |       <div className="formland-top-component">{config.topComponent(store)}</div>
24 |     )
25 |   }
26 | 
27 |   private getBottomComponent(config: IFormlandConfig, store: any) {
28 |     return (
29 |       <div className="formland-bottom-component">
30 |         {config.bottomComponent(store)}
31 |       </div>
32 |     )
33 |   }
34 | 
35 |   public render(): JSX.Element {
36 |     const { config, store, error, children } = this.props
37 | 
38 |     const helpText = config.helpText && (
39 |       <Tooltip
40 |         placement="top"
41 |         overlay={<span>{config.helpText}</span>}
42 |         {...config.helpTextOptions}
43 |       >
44 |         <span className="help-text-trigger">
45 |           <img
46 |             src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PGcgY2xhc3M9Im5jLWljb24td3JhcHBlciIgZmlsbD0iIzQ0NDQ0NCI+PGNpcmNsZSBmaWxsPSJub25lIiBzdHJva2U9IiM0NDQ0NDQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBjeD0iMTIiIGN5PSIxMiIgcj0iMTEiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiPjwvY2lyY2xlPiA8cGF0aCBkYXRhLWNvbG9yPSJjb2xvci0yIiBmaWxsPSJub25lIiBzdHJva2U9IiM0NDQ0NDQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTIsMTV2LTIgYzEuNjA5LDAsMy0xLjM5MSwzLTNzLTEuMzkxLTMtMy0zYy0xLjE5NCwwLTIuMzQyLDAuODkzLTIuNzkyLDEuOTIxIiBzdHJva2UtbGluZWpvaW49Im1pdGVyIj48L3BhdGg+IDxjaXJjbGUgZGF0YS1jb2xvcj0iY29sb3ItMiIgZGF0YS1zdHJva2U9Im5vbmUiIGZpbGw9IiM0NDQ0NDQiIGN4PSIxMiIgY3k9IjE4IiByPSIxIiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIj48L2NpcmNsZT48L2c+PC9zdmc+"
47 |             alt="help"
48 |           />
49 |         </span>
50 |       </Tooltip>
51 |     )
52 | 
53 |     return (
54 |       <div className="formland-template">
55 |         {typeof config.topComponent === 'function' &&
56 |           this.getTopComponent(config, store)}
57 |         <div className="formland-label">
58 |           <span>{config.displayName}</span>
59 |           <span>{helpText}</span>
60 |           {config.optional && <span className="optional">(optional)</span>}
61 |         </div>
62 |         <div className="formland-field">
63 |           <div className="form-element-wrapper">{children}</div>
64 |           <div className={cn('error', { 'is-error': error })}>
65 |             {error || ' '}
66 |           </div>
67 |         </div>
68 |         {typeof config.bottomComponent === 'function' &&
69 |           this.getBottomComponent(config, store)}
70 |       </div>
71 |     )
72 |   }
73 | }
74 | 
75 | export default FormlandTemplate
76 | 


--------------------------------------------------------------------------------
/examples/src/form-config.tsx:
--------------------------------------------------------------------------------
  1 | export default [
  2 |   {
  3 |     id: 'group-1',
  4 |     type: 'group',
  5 |     displayName: 'Group 1',
  6 |     description:
  7 |       'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia impedit minus laudantium, excepturi unde tenetur commodi voluptatem iste, beatae saepe ipsa consequatur maiores eaque provident dolor qui numquam nam laborum.',
  8 |     elements: [
  9 |       {
 10 |         id: 'text',
 11 |         type: 'text',
 12 |         resultPath: 'input.text',
 13 |         displayName: 'Input Textbox',
 14 |         placeholder: 'Enter something',
 15 |       },
 16 |       {
 17 |         id: 'textarea',
 18 |         type: 'textarea',
 19 |         resultPath: 'input.textarea',
 20 |         displayName: 'Input Textarea',
 21 |         placeholder: 'placeholder',
 22 |         validation: (value: any) =>
 23 |           value && value.includes('textarea')
 24 |             ? null
 25 |             : `Value should contain 'textarea'.`,
 26 |         optional: true,
 27 |       },
 28 |       {
 29 |         id: 'checkbox',
 30 |         type: 'checkbox',
 31 |         helpText: 'help text',
 32 |         required: true,
 33 |         resultPath: 'input.checkbox',
 34 |         displayName: 'Input Checkbox',
 35 |         simpleValues: true,
 36 |         separator: '_',
 37 |         options: [
 38 |           {
 39 |             value: 'one',
 40 |             label: 'One',
 41 |           },
 42 |           {
 43 |             value: 'two',
 44 |             label: 'Two',
 45 |           },
 46 |           {
 47 |             value: 'three',
 48 |             label: 'Three',
 49 |           },
 50 |         ],
 51 |       },
 52 |     ],
 53 |   },
 54 |   {
 55 |     id: 'group-2',
 56 |     type: 'group',
 57 |     displayName: 'Group 2',
 58 |     description:
 59 |       'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil officia possimus rerum, dolor ea temporibus quidem necessitatibus omnis praesentium cumque magnam, autem atque dignissimos consequatur. Distinctio, consequatur nemo? Quibusdam, maiores!',
 60 |     elements: [
 61 |       {
 62 |         id: 'radio',
 63 |         type: 'radio',
 64 |         resultPath: 'input.radio',
 65 |         displayName: 'Input Radio',
 66 |         options: [
 67 |           {
 68 |             value: 'one',
 69 |             label: 'One',
 70 |           },
 71 |           {
 72 |             value: 'two',
 73 |             label: 'Two',
 74 |           },
 75 |           {
 76 |             value: 'three',
 77 |             label: 'Three',
 78 |           },
 79 |         ],
 80 |       },
 81 |       {
 82 |         id: 'dropdown',
 83 |         type: 'dropdown',
 84 |         resultPath: 'input.dropdown',
 85 |         displayName: 'Input Dropdown',
 86 |         options: [
 87 |           {
 88 |             value: 'one',
 89 |             label: 'One',
 90 |           },
 91 |           {
 92 |             value: 'two',
 93 |             label: 'Two',
 94 |           },
 95 |           {
 96 |             value: 'three',
 97 |             label: 'Three',
 98 |           },
 99 |         ],
100 |       },
101 |       {
102 |         id: 'toggle',
103 |         type: 'toggle',
104 |         resultPath: 'input.toggle',
105 |         displayName: 'Input Toggle',
106 |       },
107 |       {
108 |         id: 'range',
109 |         type: 'range',
110 |         resultPath: 'input.range',
111 |         displayName: 'Input Range',
112 |         required: true,
113 |         componentProps: {
114 |           step: 1,
115 |           min: 0,
116 |           max: 50,
117 |         },
118 |       },
119 |     ],
120 |   },
121 |   {
122 |     id: 'react-select',
123 |     type: 'react-select',
124 |     resultPath: 'input.react',
125 |     displayName: 'React Select',
126 |     optional: true,
127 |     options: [
128 |       {
129 |         value: 'one',
130 |         label: 'One',
131 |       },
132 |       {
133 |         value: 'two',
134 |         label: 'Two',
135 |       },
136 |       {
137 |         value: 'three',
138 |         label: 'Three',
139 |       },
140 |     ],
141 |   },
142 | ]
143 | 


--------------------------------------------------------------------------------
/examples/src/index.tsx:
--------------------------------------------------------------------------------
  1 | require('react-select/dist/react-select.css')
  2 | require('codemirror/lib/codemirror.css')
  3 | require('codemirror/theme/zenburn.css')
  4 | require('codemirror')
  5 | require('../../css/index.css')
  6 | require('./index.scss')
  7 | 
  8 | import * as React from 'react'
  9 | import * as ReactDOM from 'react-dom'
 10 | import Select from 'react-select'
 11 | import { UnControlled as CodeMirror } from 'react-codemirror2'
 12 | 
 13 | import Formland from '../../lib'
 14 | import config from './form-config'
 15 | 
 16 | interface FormlandProps {}
 17 | 
 18 | interface FormlandState {
 19 |   input?: any
 20 |   errors?: any
 21 | }
 22 | 
 23 | const customComponentResolver = (type: string) => {
 24 |   switch (type) {
 25 |     case 'react-select':
 26 |       return (props: any) => (
 27 |         <Select
 28 |           {...props.callbacks}
 29 |           {...props.config.componentProps}
 30 |           options={props.config.options}
 31 |           value={props.value}
 32 |         />
 33 |       )
 34 |   }
 35 | }
 36 | 
 37 | const customValueResolver = (config: any, value: any) => {
 38 |   switch (config.type) {
 39 |     case 'react-select':
 40 |       return value ? value.value : ''
 41 |   }
 42 | }
 43 | 
 44 | class FormlandExamples extends React.Component<FormlandProps, FormlandState> {
 45 |   forms: Formland
 46 |   constructor(props: FormlandProps) {
 47 |     super(props)
 48 |     this.onChange = this.onChange.bind(this)
 49 |     this.validate = this.validate.bind(this)
 50 |     this.state = {
 51 |       input: {},
 52 |       errors: {},
 53 |     }
 54 |   }
 55 | 
 56 |   private onChange(a: FormlandState) {
 57 |     this.setState(a)
 58 |   }
 59 | 
 60 |   private validate() {
 61 |     this.setState({
 62 |       errors: this.forms.validate(),
 63 |     })
 64 |   }
 65 | 
 66 |   public render(): JSX.Element {
 67 |     return (
 68 |       <div className="react-forms-example">
 69 |         <div className="banner">
 70 |           <h1>Formland</h1>
 71 |           <p>
 72 |             A simple, super-flexible, extensible config based form generator for
 73 |             React.
 74 |           </p>
 75 |           <div className="button-container">
 76 |             <a href="https://github.com/praneshr/react-forms">
 77 |               <button>Github</button>
 78 |             </a>
 79 |           </div>
 80 |         </div>
 81 |         <div className="row">
 82 |           <div className="col-xs-12 col-md-6">
 83 |             <div className="mx-400">
 84 |               <h4>Basic Form</h4>
 85 |               <a href="https://github.com/praneshr/react-forms/blob/master/examples/src/index.tsx">
 86 |                 (View source)
 87 |               </a>
 88 |               <Formland
 89 |                 secondaryButton={false}
 90 |                 onSubmit={this.validate}
 91 |                 ref={el => (this.forms = el)}
 92 |                 customValueResolvers={[customValueResolver]}
 93 |                 customComponentResolvers={[customComponentResolver]}
 94 |                 onChange={this.onChange}
 95 |                 config={config}
 96 |                 store={this.state}
 97 |               />
 98 |             </div>
 99 |           </div>
100 |           <div className="col-xs-12 col-md-6">
101 |             <div className="section config">
102 |               <h4>Config</h4>
103 |               <CodeMirror
104 |                 value={JSON.stringify(config, null, 4)}
105 |                 options={{
106 |                   theme: 'zenburn',
107 |                 }}
108 |               />
109 |             </div>
110 |             <div className="section store">
111 |               <h4>Store</h4>
112 |               <CodeMirror
113 |                 onChange={() => {}}
114 |                 value={JSON.stringify(this.state.input, null, 4)}
115 |                 options={{
116 |                   theme: 'zenburn',
117 |                   readOnly: true,
118 |                 }}
119 |               />
120 |             </div>
121 |             <div className="section store">
122 |               <h4>Errors</h4>
123 |               <CodeMirror
124 |                 onChange={() => {}}
125 |                 value={JSON.stringify(this.state.errors, null, 4)}
126 |                 options={{
127 |                   theme: 'zenburn',
128 |                   readOnly: true,
129 |                 }}
130 |               />
131 |             </div>
132 |           </div>
133 |         </div>
134 |       </div>
135 |     )
136 |   }
137 | }
138 | 
139 | ReactDOM.render(<FormlandExamples />, document.getElementById('app'))
140 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react'
  2 | 
  3 | import { getNewState } from './utils'
  4 | 
  5 | import Template from './template'
  6 | import Group from './group'
  7 | import InputGeneric from './input-generic'
  8 | import Toggle from './input-toggle'
  9 | import Radio from './input-radio'
 10 | import Dropdown from './input-dropdown'
 11 | import Checkbox from './input-checkbox'
 12 | import Range from './input-range'
 13 | import TextArea from './input-textarea'
 14 | 
 15 | const dotObject = require('dot-prop-immutable')
 16 | 
 17 | import {
 18 |   IFormlandConfig,
 19 |   IOptions,
 20 |   ISupportedGlobalCallbacks,
 21 |   IFormErrors,
 22 | } from './types'
 23 | 
 24 | interface FormlandsProps extends ISupportedGlobalCallbacks<{}> {
 25 |   config: IFormlandConfig[]
 26 |   store?: any
 27 |   customComponentResolvers?: { (type: string): any }[]
 28 |   customValueResolvers?: { (config: IFormlandConfig, args: any[]): any }[]
 29 |   useNativeEvent?: boolean
 30 |   onSubmit?: (e?: any) => void
 31 |   primaryButton?: string | false | undefined
 32 |   secondaryButton?: string | false | undefined
 33 |   onSecondaryButtonClick?: (e?: any) => void
 34 | }
 35 | export interface IFormlandConfig extends IFormlandConfig {}
 36 | interface FormlandsState {
 37 |   validate?: boolean
 38 | }
 39 | 
 40 | class Formlands extends React.Component<FormlandsProps, FormlandsState> {
 41 |   errors: {
 42 |     [key: string]: IFormErrors[]
 43 |   }
 44 | 
 45 |   static defaultProps = {
 46 |     useNativeEvent: false,
 47 |     store: {},
 48 |     primaryButton: 'Submit',
 49 |     secondaryButton: 'Cancel',
 50 |     onSecondaryButtonClick: () => {},
 51 |     onSubmit: () => {},
 52 |   }
 53 | 
 54 |   constructor(props: FormlandsProps) {
 55 |     super(props)
 56 |     this.state = {
 57 |       validate: false,
 58 |     }
 59 |     this.errors = {}
 60 |     this.onSubmit = this.onSubmit.bind(this)
 61 |   }
 62 | 
 63 |   public validate() {
 64 |     this.setState({
 65 |       validate: true,
 66 |     })
 67 |     return this.errors
 68 |   }
 69 | 
 70 |   private eventProxyHandlers(
 71 |     config: IFormlandConfig,
 72 |     callback: any,
 73 |     args: any[],
 74 |   ) {
 75 |     getNewState(
 76 |       callback,
 77 |       this.props.store,
 78 |       this.props.customValueResolvers,
 79 |     ).apply(null, [config].concat(...args))
 80 |   }
 81 | 
 82 |   private bindCallbacks(config: IFormlandConfig, callbacks: any): any {
 83 |     const bindedCallbacks: any = {}
 84 |     Object.keys(callbacks || {}).forEach(event => {
 85 |       if (callbacks[event]) {
 86 |         bindedCallbacks[event] = (...args: any[]): void => {
 87 |           if (this.props.useNativeEvent || event !== 'onChange') {
 88 |             callbacks[event].apply(null, [config].concat(...args))
 89 |           } else {
 90 |             this.eventProxyHandlers(config, callbacks[event], args)
 91 |           }
 92 |         }
 93 |       }
 94 |     })
 95 |     return bindedCallbacks
 96 |   }
 97 | 
 98 |   private getFormElement(type: string) {
 99 |     switch (type) {
100 |       case 'color':
101 |       case 'date':
102 |       case 'email':
103 |       case 'month':
104 |       case 'number':
105 |       case 'text':
106 |       case 'tel':
107 |       case 'time':
108 |       case 'url':
109 |       case 'week':
110 |         return InputGeneric
111 |       case 'toggle':
112 |         return Toggle
113 |       case 'radio':
114 |         return Radio
115 |       case 'dropdown':
116 |         return Dropdown
117 |       case 'checkbox':
118 |         return Checkbox
119 |       case 'range':
120 |         return Range
121 |       case 'textarea':
122 |         return TextArea
123 |       default:
124 |         const { customComponentResolvers } = this.props
125 |         if (customComponentResolvers) {
126 |           let Component = null
127 |           let i = 0
128 |           while (i < customComponentResolvers.length) {
129 |             Component = customComponentResolvers[i](type)
130 |             if (Component) {
131 |               break
132 |             }
133 |             i++
134 |           }
135 |           return Component
136 |         }
137 |         return null
138 |     }
139 |   }
140 | 
141 |   private onSubmit(e: any) {
142 |     e.preventDefault()
143 |     this.props.onSubmit(e)
144 |   }
145 | 
146 |   private validateField(value: any, config: IFormlandConfig) {
147 |     if (typeof config.validation === 'function') {
148 |       return config.validation(value) || null
149 |     }
150 |     if (
151 |       typeof config.required !== 'undefined' &&
152 |       typeof value === 'undefined'
153 |     ) {
154 |       return typeof config.required === 'string'
155 |         ? config.required
156 |         : 'Required Value'
157 |     }
158 |     return null
159 |   }
160 | 
161 |   private getFormGroup(
162 |     config: IFormlandConfig,
163 |     callbacks: any,
164 |     store: any,
165 |   ): JSX.Element {
166 |     return (
167 |       <Group config={config} key={config.id}>
168 |         {this.getFormElements(config.elements, callbacks, store, config.id)}
169 |       </Group>
170 |     )
171 |   }
172 | 
173 |   private getFormElements(
174 |     configs: IFormlandConfig[],
175 |     callbacks: any,
176 |     store: any,
177 |     groupId: string = 'default',
178 |   ) {
179 |     return configs.map((config, i) => {
180 |       if (config.type === 'group') {
181 |         return this.getFormGroup(config, callbacks, store)
182 |       }
183 |       if (config.isHidden && config.isHidden(store)) {
184 |         return false
185 |       }
186 |       if (!config.resultPath) {
187 |         return new Error(`Provide a resultPath in config[${i}]`)
188 |       }
189 |       const value = dotObject.get(store, config.resultPath, undefined)
190 |       const error = this.validateField(value, config)
191 |       this.errors[groupId] = this.errors[groupId] || []
192 |       this.errors[groupId][i] = {
193 |         id: config.id,
194 |         error,
195 |       }
196 |       const props = {
197 |         config,
198 |         value,
199 |         callbacks: this.bindCallbacks(config, callbacks),
200 |       }
201 | 
202 |       const Element: any = this.getFormElement(config.type)
203 | 
204 |       return (
205 |         <Template
206 |           error={(this.state.validate || config.instantValidation) && error}
207 |           config={config}
208 |           store={store}
209 |           key={config.id}
210 |         >
211 |           {Element ? <Element {...props} /> : null}
212 |         </Template>
213 |       )
214 |     })
215 |   }
216 | 
217 |   public render(): JSX.Element {
218 |     const {
219 |       config,
220 |       onBlur,
221 |       onChange,
222 |       onFocus,
223 |       store,
224 |       primaryButton,
225 |       secondaryButton,
226 |       onSecondaryButtonClick,
227 |     } = this.props
228 |     const formElements = this.getFormElements(
229 |       config,
230 |       { onChange, onBlur, onFocus },
231 |       store,
232 |     )
233 |     return (
234 |       <form className="formland" onSubmit={this.onSubmit}>
235 |         <div className="form-elements">{formElements}</div>
236 |         <div className="form-buttons-container">
237 |           {this.props.children || (
238 |             <div className="form-buttons">
239 |               {secondaryButton && (
240 |                 <button
241 |                   className="cancel"
242 |                   onClick={onSecondaryButtonClick}
243 |                   type="button"
244 |                 >
245 |                   {secondaryButton}
246 |                 </button>
247 |               )}
248 |               {primaryButton && (
249 |                 <button className="submit" type="submit">
250 |                   {primaryButton}
251 |                 </button>
252 |               )}
253 |             </div>
254 |           )}
255 |         </div>
256 |       </form>
257 |     )
258 |   }
259 | }
260 | 
261 | export default Formlands
262 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![Logo](https://image.ibb.co/iF9Doe/formland.png)
  2 | 
  3 | [![Build Status](https://travis-ci.org/indix/formland.svg?branch=master)](https://travis-ci.org/indix/formland)
  4 | [![npm version](https://badge.fury.io/js/formland.svg)](https://badge.fury.io/js/formland)
  5 | 
  6 | A simple, super-flexible, extensible config based form generator for React.
  7 | 
  8 | ## Features
  9 | 
 10 | * Super-flexible
 11 | * Config based form element creation
 12 | * Take super control over all the form elements
 13 | * Use third party components as form element
 14 | 
 15 | ## Install
 16 | 
 17 | ```bash
 18 |   npm i formland
 19 | 
 20 |   # or
 21 | 
 22 |   yarn add formland
 23 | ```
 24 | 
 25 | ## Usage
 26 | 
 27 | ```javascript
 28 | import 'formland/css/index.css'
 29 | import React, { Component } from 'react'
 30 | import Form from 'formland'
 31 | 
 32 | class Example extends Component {
 33 |   constructor() {
 34 |     super()
 35 |     this.state = {}
 36 |     this.onChange = this.onChange.bind(this)
 37 |   }
 38 | 
 39 |   onChange(newState) {
 40 |     this.setState(newState)
 41 |   }
 42 | 
 43 |   render() {
 44 |     const config = [
 45 |       {
 46 |         id: 'firstName',
 47 |         type: 'text',
 48 |         displayName: 'First Name',
 49 |         resultPath: 'name.firstName',
 50 |         placeholder: 'Enter your first name',
 51 |       },
 52 |     ]
 53 | 
 54 |     return <Form config={config} store={this.state} onChange={this.onChange} />
 55 |   }
 56 | }
 57 | ```
 58 | 
 59 | ## Props
 60 | 
 61 | | Property                 | Type                         | Default   | Description                                                         |
 62 | | ------------------------ | ---------------------------- | --------- | ------------------------------------------------------------------- |
 63 | | config                   | array                        | []        | Config to populate form elements.                                   |
 64 | | store                    | object \| array              | {}        | The data store to read the values from.                             |
 65 | | onChange                 | function                     | undefined | Callback for `onChange` event                                       |
 66 | | onBlur                   | function                     | undefined | Callback for `onBlur` event                                         |
 67 | | onFocus                  | function                     | undefined | Callback fro `onFocus` event                                        |
 68 | | customComponentResolvers | array                        | undefined | Array of resolvers to resolve custom form elements                  |
 69 | | customValueResolvers     | array                        | undefined | Array of resolvers to resolve the value of the custom form elements |
 70 | | useNativeEvent           | boolean                      | false     | Whether to return the new state or native JS event object on events |
 71 | | primaryButton            | string \| false \| undefined | 'Submit'  | Title for the primary button. `false` to remove button              |
 72 | | secondaryButton          | string \| false \| undefined | 'Cancel'  | Title for the secondary button. `false` to remove button            |
 73 | | onSecondaryButtonClick   | function                     | `()=> {}` | onClick event handler for secondary button                          |
 74 | 
 75 | ## Configuration File Properties
 76 | 
 77 | | Property                | Type     | Default   | Description                                                                                                                                                                                                                                                                     |
 78 | | ----------------------- | -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 79 | | id                      | string   | undefined | ID for each form field. This should be unique.                                                                                                                                                                                                                                  |
 80 | | type                    | string   | undefined | Type of the form field to be generated. The native package supports `text`, `color`, `date`, `email`, `month`, `number`, `tel`, `time`, `url`, `week`, `toggle`, `radio`, `checkbox`, `range`, `textarea`, `dropdown` types. New types can be added via `Custom Form Elements`. |
 81 | | resultPath              | string   | undefined | A [dot-prop-immutable](https://github.com/debitoor/dot-prop-immutable) compatible path to store the form field value.                                                                                                                                                           |
 82 | | displayName             | string   | undefined | Display text for the form field.                                                                                                                                                                                                                                                |
 83 | | className               | string   | undefined | ClassName for the root form field element.                                                                                                                                                                                                                                      |
 84 | | isHidden                | function | undefined | Method to hide form field element in runtime. `(store) => boolean`                                                                                                                                                                                                              |
 85 | | optional                | boolean  | undefined | Says if the form field is optional.                                                                                                                                                                                                                                             |
 86 | | placeholder             | string   | undefined | Placeholder text for the form elements                                                                                                                                                                                                                                          |
 87 | | helpText                | string   | undefined | Help text for a form element                                                                                                                                                                                                                                                    |
 88 | | helpTextOptions         | object   | undefined | See rc-tooltip [props](https://github.com/react-component/tooltip#props)                                                                                                                                                                                                        |
 89 | | options                 | array    | []        | Array of options. `({ value: any, label: any })[]`                                                                                                                                                                                                                              |
 90 | | separator               | string   | ','       | Separator to join/separate multiple values. Used by checkbox, multi-dropdown, etc.                                                                                                                                                                                              |
 91 | | topComponent            | function | undefined | Method to render any additional elements to the top of the form field element. `(store) => JSX.Element`                                                                                                                                                                         |
 92 | | simpleValues            | boolean  | false     | Handle multi values as string. Works along with `separator`.                                                                                                                                                                                                                    |
 93 | | bottomComponent         | function | undefined | Method to render any additional elements to the bottom of the form field element. `(store) => JSX.Element`                                                                                                                                                                      |
 94 | | componentProps          | object   | undefined | Any additional props that should be passed to the underlying form field element. For example, to make the `dropdown` multi-select, pass `componentProps: { multiple: true }`.                                                                                                   |
 95 | | instantValidation       | boolean  | false     | Do validation on user input.                                                                                                                                                                                                                                                    |
 96 | | required                | boolean  | false     | Make the field required.                                                                                                                                                                                                                                                        |
 97 | | validation              | function | undefined | Method to perform validation. `(value) => errorMessage|null`                                                                                                                                                                                                                    |
 98 | | modifyStoreBeforeChange | function | undefined | Method to modify store before `onChange` handler is called. `(config, value, store) => store`.                                                                                                                                                                                  |
 99 | 
100 | ### Available `componentProps`
101 | 
102 | #### `type: toggle`
103 | 
104 | | Property | Type   | Default   | Description                                                 |
105 | | -------- | ------ | --------- | ----------------------------------------------------------- |
106 | | infoText | string | undefined | Info text to be displayed to the right of the toggle switch |
107 | 
108 | #### `type: range`
109 | 
110 | | Property  | Type    | Default | Description                                   |
111 | | --------- | ------- | ------- | --------------------------------------------- |
112 | | showRange | boolean | true    | Shows the `min` and `max` value of the slider |
113 | | showValue | boolean | true    | Shows the current range value explicitly      |
114 | 
115 | ## Form Groups
116 | 
117 | It is possible to group form elements. Take a look at the following example.
118 | 
119 | ```javascript
120 | import 'formland/css/index.css'
121 | import React, { Component } from 'react'
122 | import Form from 'formland'
123 | 
124 | class Example extends Component {
125 |   constructor() {
126 |     super()
127 |     this.state = {}
128 |     this.onChange = this.onChange.bind(this)
129 |   }
130 | 
131 |   onChange(newState) {
132 |     this.setState(newState)
133 |   }
134 | 
135 |   render() {
136 |     const config = [
137 |       {
138 |         id: 'group-1',
139 |         type: 'group',
140 |         displayName: 'Group 1',
141 |         description: 'This is group 1',
142 |         elements: [
143 |           {
144 |             id: 'firstName',
145 |             type: 'text',
146 |             displayName: 'First Name',
147 |             resultPath: 'name.firstName',
148 |             placeholder: 'Enter your first name',
149 |           },
150 |           {
151 |             id: 'LastName',
152 |             type: 'text',
153 |             displayName: 'Last Name',
154 |             resultPath: 'name.LastName',
155 |             placeholder: 'Enter your last name',
156 |           },
157 |         ],
158 |       },
159 |       {
160 |         id: 'group-2',
161 |         type: 'group',
162 |         displayName: 'Group 2',
163 |         description: 'This is group 1',
164 |         elements: [
165 |           {
166 |             id: 'country',
167 |             type: 'text',
168 |             displayName: 'First Name',
169 |             resultPath: 'name.country',
170 |             placeholder: 'Enter your country',
171 |           },
172 |           {
173 |             id: 'state',
174 |             type: 'text',
175 |             displayName: 'Last Name',
176 |             resultPath: 'name.state',
177 |             placeholder: 'Enter your state',
178 |           },
179 |         ],
180 |       },
181 |     ]
182 | 
183 |     return <Form config={config} store={this.state} onChange={this.onChange} />
184 |   }
185 | }
186 | ```
187 | 
188 | ## Validation
189 | 
190 | Validations are done per form element. Add a `validation()` method in the form element config. Validations can be done in two ways.
191 | 
192 | * Set `instantValidation: true` in the form element config. Now, the validation method will be called each time on user input.
193 | 
194 | * Use `validate()` method of the form instance. This returns an array of errors, if any. Useful for conditional based approach.
195 | 
196 | ```javascript
197 | import 'formland/css/index.css'
198 | import React, { Component } from 'react'
199 | import Form from 'formland'
200 | 
201 | class Example extends Component {
202 |   constructor() {
203 |     super()
204 |     this.state = {}
205 |     this.onChange = this.onChange.bind(this)
206 |   }
207 | 
208 |   onChange(newState) {
209 |     this.setState(newState)
210 |   }
211 | 
212 |   onSubmit() {
213 |     const errors = this.form.validate()
214 |     console.log(errors)
215 |   }
216 | 
217 |   render() {
218 |     const config = [
219 |       {
220 |         id: 'answer',
221 |         type: 'text',
222 |         displayName: 'What is 4 + 5',
223 |         resultPath: 'answer',
224 |         placeholder: 'Answer',
225 |         validation: value => value !== '9' && 'Wrong Answer',
226 |       },
227 |     ]
228 | 
229 |     return (
230 |       <Form
231 |         ref={el => (this.form = el)}
232 |         config={config}
233 |         store={this.state}
234 |         onChange={this.onChange}
235 |       />
236 |     )
237 |   }
238 | }
239 | ```
240 | 
241 | ## Modify store value directly from config
242 | 
243 | You can access the store and change any store value directly from the config using `modifyStoreBeforeChange` method. This method will be called before `onChange` event. You can return a modified state and it will be passed to the `onChange` handler. The primary use case for this will be, to change a form value based on another form value.
244 | 
245 | ```javascript
246 | import 'formland/css/index.css'
247 | import React, { Component } from 'react'
248 | import Form from 'formland'
249 | 
250 | class Example extends Component {
251 |   constructor() {
252 |     super()
253 |     this.state = {}
254 |     this.onChange = this.onChange.bind(this)
255 |   }
256 | 
257 |   onChange(newState) {
258 |     this.setState(newState)
259 |   }
260 | 
261 |   render() {
262 |     const config = [
263 |       {
264 |         id: 'firstName',
265 |         type: 'text',
266 |         displayName: 'First Name',
267 |         resultPath: 'name.firstName',
268 |         placeholder: 'Enter your first name',
269 |         modifyStoreBeforeChange: (config, value, store) => {
270 |           store.readonly = value
271 |           return store
272 |         },
273 |       },
274 |       {
275 |         id: 'readyonly',
276 |         type: 'text',
277 |         displayName: 'Output',
278 |         resultPath: 'readonly',
279 |         componentProps: {
280 |           disabled: true,
281 |         },
282 |       },
283 |     ]
284 | 
285 |     return <Form config={config} store={this.state} onChange={this.onChange} />
286 |   }
287 | }
288 | ```
289 | 
290 | ## Custom Buttons
291 | 
292 | It is possible to add custom buttons. Just wrap your buttons with `<Form>`.
293 | 
294 | ```javascript
295 | <Form
296 |   ref={el => (this.form = el)}
297 |   config={config}
298 |   store={this.state}
299 |   onChange={this.onChange}
300 | >
301 |   <button type="submit">Custom Button</button>
302 | </Form>
303 | ```
304 | 
305 | ## Custom Form Elements
306 | 
307 | Custom form elements can be added to any instance of formland via `customComponentResolvers` and `customValueResolvers` props.
308 | 
309 | * `customComponentResolvers(type: string) => ({ config: IReactFormConfig, value: any, callbacks: any }) => JSX.Element`
310 | 
311 | Returns a valid React stateless function based on the custom type.
312 | 
313 | * `customValueResolvers(config: IReactFormConfig, value: any) => any`
314 | 
315 | Returns a resolved value based on the custom type.
316 | 
317 | See the following example to understand how it works.
318 | 
319 | ```javascript
320 | import 'formland/css/index.css'
321 | import React, { Component } from 'react'
322 | import Select from 'react-select'
323 | import Form, { getNewState } from 'formland'
324 | 
325 | const customComponentsResolver = (type) => {
326 |   switch(type) {
327 |     case 'custom-dropdown':
328 |       return ({ config, value = '', callbacks= {}}) =>
329 |         <Select
330 |           value={value}
331 |           options={config.options}
332 |           { ...callbacks }
333 |           { ...config.componentProps } />
334 |     default:
335 |       return <span/>
336 |   }
337 | }
338 | 
339 | const customValueResolver = (config: any, value: any) => {
340 |   switch (config.type) {
341 |     case 'react-select':
342 |       return value ? value.value : ''
343 |   }
344 | }
345 | 
346 | class Example extends Component {
347 |   constructor() {
348 |     super()
349 |     this.state = {}
350 |     this.onChange = this.onChange.bind(this)
351 |   }
352 | 
353 |   onChange(newState) {
354 |     this.setState(newState)
355 |   }
356 | 
357 |   render() {
358 |     const config = [
359 |       {
360 |         id: 'firstName',
361 |         type: 'custom-dropdown',
362 |         resultPath: 'country'
363 |         displayName: 'Shipping Country',
364 |         placeholder: 'Select a country',
365 |         options: [
366 |           {
367 |             value: 'india',
368 |             label: 'India',
369 |           },
370 |           {
371 |             value: 'usa',
372 |             label: 'The United States',
373 |           },
374 |           {
375 |             value: 'china',
376 |             label: 'China',
377 |           }
378 |         ],
379 |       },
380 |     ]
381 | 
382 |     return <Form
383 |       customComponentResolvers={[customComponentsResolver]}
384 |       customValueResolvers={[customValueResolver]}
385 |       config={config}
386 |       store={this.state}
387 |       onChange={this.onChange} />
388 |   }
389 | }
390 | ```
391 | 
392 | ## Custom Form Element Packages
393 | 
394 | * [formland-react-select](https://github.com/praneshr/formland-react-select) - `react-select` components for formland
395 | 
396 | ## Development
397 | 
398 | ```bash
399 | yarn install
400 | yarn build
401 | yarn start:examples
402 | ```
403 | 
404 | Refer `package.json` for more commands
405 | 
406 | ## License
407 | 
408 | MIT
409 | 


--------------------------------------------------------------------------------
/examples/dist/main.css:
--------------------------------------------------------------------------------
   1 | .Select {
   2 |   position: relative;
   3 | }
   4 | .Select input::-webkit-contacts-auto-fill-button,
   5 | .Select input::-webkit-credentials-auto-fill-button {
   6 |   display: none !important;
   7 | }
   8 | .Select input::-ms-clear,
   9 | .Select input::-ms-reveal {
  10 |   display: none !important;
  11 | }
  12 | .Select,
  13 | .Select div,
  14 | .Select input,
  15 | .Select span {
  16 |   -webkit-box-sizing: border-box;
  17 |   -moz-box-sizing: border-box;
  18 |   box-sizing: border-box;
  19 | }
  20 | .Select.is-disabled .Select-arrow-zone {
  21 |   cursor: default;
  22 |   pointer-events: none;
  23 |   opacity: 0.35;
  24 | }
  25 | .Select.is-disabled > .Select-control {
  26 |   background-color: #f9f9f9;
  27 | }
  28 | .Select.is-disabled > .Select-control:hover {
  29 |   box-shadow: none;
  30 | }
  31 | .Select.is-open > .Select-control {
  32 |   border-bottom-right-radius: 0;
  33 |   border-bottom-left-radius: 0;
  34 |   background: #fff;
  35 |   border-color: #b3b3b3 #ccc #d9d9d9;
  36 | }
  37 | .Select.is-open > .Select-control .Select-arrow {
  38 |   top: -2px;
  39 |   border-color: transparent transparent #999;
  40 |   border-width: 0 5px 5px;
  41 | }
  42 | .Select.is-searchable.is-focused:not(.is-open) > .Select-control,
  43 | .Select.is-searchable.is-open > .Select-control {
  44 |   cursor: text;
  45 | }
  46 | .Select.is-focused > .Select-control {
  47 |   background: #fff;
  48 | }
  49 | .Select.is-focused:not(.is-open) > .Select-control {
  50 |   border-color: #007eff;
  51 |   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
  52 |     0 0 0 3px rgba(0, 126, 255, 0.1);
  53 |   background: #fff;
  54 | }
  55 | .Select.has-value.is-clearable.Select--single > .Select-control .Select-value {
  56 |   padding-right: 42px;
  57 | }
  58 | .Select.has-value.is-pseudo-focused.Select--single
  59 |   > .Select-control
  60 |   .Select-value
  61 |   .Select-value-label,
  62 | .Select.has-value.Select--single
  63 |   > .Select-control
  64 |   .Select-value
  65 |   .Select-value-label {
  66 |   color: #333;
  67 | }
  68 | .Select.has-value.is-pseudo-focused.Select--single
  69 |   > .Select-control
  70 |   .Select-value
  71 |   a.Select-value-label,
  72 | .Select.has-value.Select--single
  73 |   > .Select-control
  74 |   .Select-value
  75 |   a.Select-value-label {
  76 |   cursor: pointer;
  77 |   text-decoration: none;
  78 | }
  79 | .Select.has-value.is-pseudo-focused.Select--single
  80 |   > .Select-control
  81 |   .Select-value
  82 |   a.Select-value-label:focus,
  83 | .Select.has-value.is-pseudo-focused.Select--single
  84 |   > .Select-control
  85 |   .Select-value
  86 |   a.Select-value-label:hover,
  87 | .Select.has-value.Select--single
  88 |   > .Select-control
  89 |   .Select-value
  90 |   a.Select-value-label:focus,
  91 | .Select.has-value.Select--single
  92 |   > .Select-control
  93 |   .Select-value
  94 |   a.Select-value-label:hover {
  95 |   color: #007eff;
  96 |   outline: none;
  97 |   text-decoration: underline;
  98 | }
  99 | .Select.has-value.is-pseudo-focused.Select--single
 100 |   > .Select-control
 101 |   .Select-value
 102 |   a.Select-value-label:focus,
 103 | .Select.has-value.Select--single
 104 |   > .Select-control
 105 |   .Select-value
 106 |   a.Select-value-label:focus {
 107 |   background: #fff;
 108 | }
 109 | .Select.has-value.is-pseudo-focused .Select-input {
 110 |   opacity: 0;
 111 | }
 112 | .Select.is-open .Select-arrow,
 113 | .Select .Select-arrow-zone:hover > .Select-arrow {
 114 |   border-top-color: #666;
 115 | }
 116 | .Select.Select--rtl {
 117 |   direction: rtl;
 118 |   text-align: right;
 119 | }
 120 | .Select-control {
 121 |   background-color: #fff;
 122 |   border-color: #d9d9d9 #ccc #b3b3b3;
 123 |   border-radius: 4px;
 124 |   border: 1px solid #ccc;
 125 |   color: #333;
 126 |   cursor: default;
 127 |   display: table;
 128 |   border-spacing: 0;
 129 |   border-collapse: separate;
 130 |   height: 36px;
 131 |   outline: none;
 132 |   overflow: hidden;
 133 |   position: relative;
 134 |   width: 100%;
 135 | }
 136 | .Select-control:hover {
 137 |   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
 138 | }
 139 | .Select-control .Select-input:focus {
 140 |   outline: none;
 141 |   background: #fff;
 142 | }
 143 | .Select--single > .Select-control .Select-value,
 144 | .Select-placeholder {
 145 |   bottom: 0;
 146 |   color: #aaa;
 147 |   left: 0;
 148 |   line-height: 34px;
 149 |   padding-left: 10px;
 150 |   padding-right: 10px;
 151 |   position: absolute;
 152 |   right: 0;
 153 |   top: 0;
 154 |   max-width: 100%;
 155 |   overflow: hidden;
 156 |   text-overflow: ellipsis;
 157 |   white-space: nowrap;
 158 | }
 159 | .Select-input {
 160 |   height: 34px;
 161 |   padding-left: 10px;
 162 |   padding-right: 10px;
 163 |   vertical-align: middle;
 164 | }
 165 | .Select-input > input {
 166 |   width: 100%;
 167 |   background: none transparent;
 168 |   border: 0 none;
 169 |   box-shadow: none;
 170 |   cursor: default;
 171 |   display: inline-block;
 172 |   font-family: inherit;
 173 |   font-size: inherit;
 174 |   margin: 0;
 175 |   outline: none;
 176 |   line-height: 17px;
 177 |   padding: 8px 0 12px;
 178 |   -webkit-appearance: none;
 179 | }
 180 | .is-focused .Select-input > input {
 181 |   cursor: text;
 182 | }
 183 | .has-value.is-pseudo-focused .Select-input {
 184 |   opacity: 0;
 185 | }
 186 | .Select-control:not(.is-searchable) > .Select-input {
 187 |   outline: none;
 188 | }
 189 | .Select-loading-zone {
 190 |   cursor: pointer;
 191 |   display: table-cell;
 192 |   text-align: center;
 193 | }
 194 | .Select-loading,
 195 | .Select-loading-zone {
 196 |   position: relative;
 197 |   vertical-align: middle;
 198 |   width: 16px;
 199 | }
 200 | .Select-loading {
 201 |   -webkit-animation: Select-animation-spin 0.4s infinite linear;
 202 |   -o-animation: Select-animation-spin 0.4s infinite linear;
 203 |   animation: Select-animation-spin 0.4s infinite linear;
 204 |   height: 16px;
 205 |   box-sizing: border-box;
 206 |   border-radius: 50%;
 207 |   border: 2px solid #ccc;
 208 |   border-right-color: #333;
 209 |   display: inline-block;
 210 | }
 211 | .Select-clear-zone {
 212 |   -webkit-animation: Select-animation-fadeIn 0.2s;
 213 |   -o-animation: Select-animation-fadeIn 0.2s;
 214 |   animation: Select-animation-fadeIn 0.2s;
 215 |   color: #999;
 216 |   cursor: pointer;
 217 |   display: table-cell;
 218 |   position: relative;
 219 |   text-align: center;
 220 |   vertical-align: middle;
 221 |   width: 17px;
 222 | }
 223 | .Select-clear-zone:hover {
 224 |   color: #d0021b;
 225 | }
 226 | .Select-clear {
 227 |   display: inline-block;
 228 |   font-size: 18px;
 229 |   line-height: 1;
 230 | }
 231 | .Select--multi .Select-clear-zone {
 232 |   width: 17px;
 233 | }
 234 | .Select-arrow-zone {
 235 |   cursor: pointer;
 236 |   display: table-cell;
 237 |   position: relative;
 238 |   text-align: center;
 239 |   vertical-align: middle;
 240 |   width: 25px;
 241 |   padding-right: 5px;
 242 | }
 243 | .Select--rtl .Select-arrow-zone {
 244 |   padding-right: 0;
 245 |   padding-left: 5px;
 246 | }
 247 | .Select-arrow {
 248 |   border-color: #999 transparent transparent;
 249 |   border-style: solid;
 250 |   border-width: 5px 5px 2.5px;
 251 |   display: inline-block;
 252 |   height: 0;
 253 |   width: 0;
 254 |   position: relative;
 255 | }
 256 | .Select-control > :last-child {
 257 |   padding-right: 5px;
 258 | }
 259 | .Select--multi .Select-multi-value-wrapper {
 260 |   display: inline-block;
 261 | }
 262 | .Select .Select-aria-only {
 263 |   position: absolute;
 264 |   display: inline-block;
 265 |   height: 1px;
 266 |   width: 1px;
 267 |   margin: -1px;
 268 |   clip: rect(0, 0, 0, 0);
 269 |   overflow: hidden;
 270 |   float: left;
 271 | }
 272 | @-webkit-keyframes Select-animation-fadeIn {
 273 |   0% {
 274 |     opacity: 0;
 275 |   }
 276 |   to {
 277 |     opacity: 1;
 278 |   }
 279 | }
 280 | @keyframes Select-animation-fadeIn {
 281 |   0% {
 282 |     opacity: 0;
 283 |   }
 284 |   to {
 285 |     opacity: 1;
 286 |   }
 287 | }
 288 | .Select-menu-outer {
 289 |   border-bottom-right-radius: 4px;
 290 |   border-bottom-left-radius: 4px;
 291 |   background-color: #fff;
 292 |   border: 1px solid #ccc;
 293 |   border-top-color: #e6e6e6;
 294 |   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
 295 |   box-sizing: border-box;
 296 |   margin-top: -1px;
 297 |   max-height: 200px;
 298 |   position: absolute;
 299 |   top: 100%;
 300 |   width: 100%;
 301 |   z-index: 1;
 302 |   -webkit-overflow-scrolling: touch;
 303 | }
 304 | .Select-menu {
 305 |   max-height: 198px;
 306 |   overflow-y: auto;
 307 | }
 308 | .Select-option {
 309 |   box-sizing: border-box;
 310 |   background-color: #fff;
 311 |   color: #666;
 312 |   cursor: pointer;
 313 |   display: block;
 314 |   padding: 8px 10px;
 315 | }
 316 | .Select-option:last-child {
 317 |   border-bottom-right-radius: 4px;
 318 |   border-bottom-left-radius: 4px;
 319 | }
 320 | .Select-option.is-selected {
 321 |   background-color: #f5faff;
 322 |   background-color: rgba(0, 126, 255, 0.04);
 323 |   color: #333;
 324 | }
 325 | .Select-option.is-focused {
 326 |   background-color: #ebf5ff;
 327 |   background-color: rgba(0, 126, 255, 0.08);
 328 |   color: #333;
 329 | }
 330 | .Select-option.is-disabled {
 331 |   color: #ccc;
 332 |   cursor: default;
 333 | }
 334 | .Select-noresults {
 335 |   box-sizing: border-box;
 336 |   color: #999;
 337 |   cursor: default;
 338 |   display: block;
 339 |   padding: 8px 10px;
 340 | }
 341 | .Select--multi .Select-input {
 342 |   vertical-align: middle;
 343 |   margin-left: 10px;
 344 |   padding: 0;
 345 | }
 346 | .Select--multi.Select--rtl .Select-input {
 347 |   margin-left: 0;
 348 |   margin-right: 10px;
 349 | }
 350 | .Select--multi.has-value .Select-input {
 351 |   margin-left: 5px;
 352 | }
 353 | .Select--multi .Select-value {
 354 |   background-color: #ebf5ff;
 355 |   background-color: rgba(0, 126, 255, 0.08);
 356 |   border-radius: 2px;
 357 |   border: 1px solid #c2e0ff;
 358 |   border: 1px solid rgba(0, 126, 255, 0.24);
 359 |   color: #007eff;
 360 |   display: inline-block;
 361 |   font-size: 0.9em;
 362 |   line-height: 1.4;
 363 |   margin-left: 5px;
 364 |   margin-top: 5px;
 365 |   vertical-align: top;
 366 | }
 367 | .Select--multi .Select-value-icon,
 368 | .Select--multi .Select-value-label {
 369 |   display: inline-block;
 370 |   vertical-align: middle;
 371 | }
 372 | .Select--multi .Select-value-label {
 373 |   border-bottom-right-radius: 2px;
 374 |   border-top-right-radius: 2px;
 375 |   cursor: default;
 376 |   padding: 2px 5px;
 377 | }
 378 | .Select--multi a.Select-value-label {
 379 |   color: #007eff;
 380 |   cursor: pointer;
 381 |   text-decoration: none;
 382 | }
 383 | .Select--multi a.Select-value-label:hover {
 384 |   text-decoration: underline;
 385 | }
 386 | .Select--multi .Select-value-icon {
 387 |   cursor: pointer;
 388 |   border-bottom-left-radius: 2px;
 389 |   border-top-left-radius: 2px;
 390 |   border-right: 1px solid #c2e0ff;
 391 |   border-right: 1px solid rgba(0, 126, 255, 0.24);
 392 |   padding: 1px 5px 3px;
 393 | }
 394 | .Select--multi .Select-value-icon:focus,
 395 | .Select--multi .Select-value-icon:hover {
 396 |   background-color: #d8eafd;
 397 |   background-color: rgba(0, 113, 230, 0.08);
 398 |   color: #0071e6;
 399 | }
 400 | .Select--multi .Select-value-icon:active {
 401 |   background-color: #c2e0ff;
 402 |   background-color: rgba(0, 126, 255, 0.24);
 403 | }
 404 | .Select--multi.Select--rtl .Select-value {
 405 |   margin-left: 0;
 406 |   margin-right: 5px;
 407 | }
 408 | .Select--multi.Select--rtl .Select-value-icon {
 409 |   border-right: none;
 410 |   border-left: 1px solid #c2e0ff;
 411 |   border-left: 1px solid rgba(0, 126, 255, 0.24);
 412 | }
 413 | .Select--multi.is-disabled .Select-value {
 414 |   background-color: #fcfcfc;
 415 |   border: 1px solid #e3e3e3;
 416 |   color: #333;
 417 | }
 418 | .Select--multi.is-disabled .Select-value-icon {
 419 |   cursor: not-allowed;
 420 |   border-right: 1px solid #e3e3e3;
 421 | }
 422 | .Select--multi.is-disabled .Select-value-icon:active,
 423 | .Select--multi.is-disabled .Select-value-icon:focus,
 424 | .Select--multi.is-disabled .Select-value-icon:hover {
 425 |   background-color: #fcfcfc;
 426 | }
 427 | @keyframes Select-animation-spin {
 428 |   to {
 429 |     transform: rotate(1turn);
 430 |   }
 431 | }
 432 | @-webkit-keyframes Select-animation-spin {
 433 |   to {
 434 |     -webkit-transform: rotate(1turn);
 435 |   }
 436 | }
 437 | .CodeMirror {
 438 |   font-family: monospace;
 439 |   height: 300px;
 440 |   color: #000;
 441 |   direction: ltr;
 442 | }
 443 | .CodeMirror-lines {
 444 |   padding: 4px 0;
 445 | }
 446 | .CodeMirror pre {
 447 |   padding: 0 4px;
 448 | }
 449 | .CodeMirror-gutter-filler,
 450 | .CodeMirror-scrollbar-filler {
 451 |   background-color: #fff;
 452 | }
 453 | .CodeMirror-gutters {
 454 |   border-right: 1px solid #ddd;
 455 |   background-color: #f7f7f7;
 456 |   white-space: nowrap;
 457 | }
 458 | .CodeMirror-linenumber {
 459 |   padding: 0 3px 0 5px;
 460 |   min-width: 20px;
 461 |   text-align: right;
 462 |   color: #999;
 463 |   white-space: nowrap;
 464 | }
 465 | .CodeMirror-guttermarker {
 466 |   color: #000;
 467 | }
 468 | .CodeMirror-guttermarker-subtle {
 469 |   color: #999;
 470 | }
 471 | .CodeMirror-cursor {
 472 |   border-left: 1px solid #000;
 473 |   border-right: none;
 474 |   width: 0;
 475 | }
 476 | .CodeMirror div.CodeMirror-secondarycursor {
 477 |   border-left: 1px solid silver;
 478 | }
 479 | .cm-fat-cursor .CodeMirror-cursor {
 480 |   width: auto;
 481 |   border: 0 !important;
 482 |   background: #7e7;
 483 | }
 484 | .cm-fat-cursor div.CodeMirror-cursors {
 485 |   z-index: 1;
 486 | }
 487 | .cm-fat-cursor-mark {
 488 |   background-color: rgba(20, 255, 20, 0.5);
 489 | }
 490 | .cm-animate-fat-cursor,
 491 | .cm-fat-cursor-mark {
 492 |   -webkit-animation: blink 1.06s steps(1) infinite;
 493 |   -moz-animation: blink 1.06s steps(1) infinite;
 494 |   animation: blink 1.06s steps(1) infinite;
 495 | }
 496 | .cm-animate-fat-cursor {
 497 |   width: auto;
 498 |   border: 0;
 499 |   background-color: #7e7;
 500 | }
 501 | @-moz-keyframes blink {
 502 |   50% {
 503 |     background-color: transparent;
 504 |   }
 505 | }
 506 | @-webkit-keyframes blink {
 507 |   50% {
 508 |     background-color: transparent;
 509 |   }
 510 | }
 511 | @keyframes blink {
 512 |   50% {
 513 |     background-color: transparent;
 514 |   }
 515 | }
 516 | .cm-tab {
 517 |   display: inline-block;
 518 |   text-decoration: inherit;
 519 | }
 520 | .CodeMirror-rulers {
 521 |   position: absolute;
 522 |   left: 0;
 523 |   right: 0;
 524 |   top: -50px;
 525 |   bottom: -20px;
 526 |   overflow: hidden;
 527 | }
 528 | .CodeMirror-ruler {
 529 |   border-left: 1px solid #ccc;
 530 |   top: 0;
 531 |   bottom: 0;
 532 |   position: absolute;
 533 | }
 534 | .cm-s-default .cm-header {
 535 |   color: blue;
 536 | }
 537 | .cm-s-default .cm-quote {
 538 |   color: #090;
 539 | }
 540 | .cm-negative {
 541 |   color: #d44;
 542 | }
 543 | .cm-positive {
 544 |   color: #292;
 545 | }
 546 | .cm-header,
 547 | .cm-strong {
 548 |   font-weight: 700;
 549 | }
 550 | .cm-em {
 551 |   font-style: italic;
 552 | }
 553 | .cm-link {
 554 |   text-decoration: underline;
 555 | }
 556 | .cm-strikethrough {
 557 |   text-decoration: line-through;
 558 | }
 559 | .cm-s-default .cm-keyword {
 560 |   color: #708;
 561 | }
 562 | .cm-s-default .cm-atom {
 563 |   color: #219;
 564 | }
 565 | .cm-s-default .cm-number {
 566 |   color: #164;
 567 | }
 568 | .cm-s-default .cm-def {
 569 |   color: #00f;
 570 | }
 571 | .cm-s-default .cm-variable-2 {
 572 |   color: #05a;
 573 | }
 574 | .cm-s-default .cm-type,
 575 | .cm-s-default .cm-variable-3 {
 576 |   color: #085;
 577 | }
 578 | .cm-s-default .cm-comment {
 579 |   color: #a50;
 580 | }
 581 | .cm-s-default .cm-string {
 582 |   color: #a11;
 583 | }
 584 | .cm-s-default .cm-string-2 {
 585 |   color: #f50;
 586 | }
 587 | .cm-s-default .cm-meta,
 588 | .cm-s-default .cm-qualifier {
 589 |   color: #555;
 590 | }
 591 | .cm-s-default .cm-builtin {
 592 |   color: #30a;
 593 | }
 594 | .cm-s-default .cm-bracket {
 595 |   color: #997;
 596 | }
 597 | .cm-s-default .cm-tag {
 598 |   color: #170;
 599 | }
 600 | .cm-s-default .cm-attribute {
 601 |   color: #00c;
 602 | }
 603 | .cm-s-default .cm-hr {
 604 |   color: #999;
 605 | }
 606 | .cm-s-default .cm-link {
 607 |   color: #00c;
 608 | }
 609 | .cm-invalidchar,
 610 | .cm-s-default .cm-error {
 611 |   color: red;
 612 | }
 613 | .CodeMirror-composing {
 614 |   border-bottom: 2px solid;
 615 | }
 616 | div.CodeMirror span.CodeMirror-matchingbracket {
 617 |   color: #0b0;
 618 | }
 619 | div.CodeMirror span.CodeMirror-nonmatchingbracket {
 620 |   color: #a22;
 621 | }
 622 | .CodeMirror-matchingtag {
 623 |   background: rgba(255, 150, 0, 0.3);
 624 | }
 625 | .CodeMirror-activeline-background {
 626 |   background: #e8f2ff;
 627 | }
 628 | .CodeMirror {
 629 |   position: relative;
 630 |   overflow: hidden;
 631 |   background: #fff;
 632 | }
 633 | .CodeMirror-scroll {
 634 |   overflow: scroll !important;
 635 |   margin-bottom: -30px;
 636 |   margin-right: -30px;
 637 |   padding-bottom: 30px;
 638 |   height: 100%;
 639 |   outline: none;
 640 |   position: relative;
 641 | }
 642 | .CodeMirror-sizer {
 643 |   position: relative;
 644 |   border-right: 30px solid transparent;
 645 | }
 646 | .CodeMirror-gutter-filler,
 647 | .CodeMirror-hscrollbar,
 648 | .CodeMirror-scrollbar-filler,
 649 | .CodeMirror-vscrollbar {
 650 |   position: absolute;
 651 |   z-index: 6;
 652 |   display: none;
 653 | }
 654 | .CodeMirror-vscrollbar {
 655 |   right: 0;
 656 |   top: 0;
 657 |   overflow-x: hidden;
 658 |   overflow-y: scroll;
 659 | }
 660 | .CodeMirror-hscrollbar {
 661 |   bottom: 0;
 662 |   left: 0;
 663 |   overflow-y: hidden;
 664 |   overflow-x: scroll;
 665 | }
 666 | .CodeMirror-scrollbar-filler {
 667 |   right: 0;
 668 |   bottom: 0;
 669 | }
 670 | .CodeMirror-gutter-filler {
 671 |   left: 0;
 672 |   bottom: 0;
 673 | }
 674 | .CodeMirror-gutters {
 675 |   position: absolute;
 676 |   left: 0;
 677 |   top: 0;
 678 |   min-height: 100%;
 679 |   z-index: 3;
 680 | }
 681 | .CodeMirror-gutter {
 682 |   white-space: normal;
 683 |   height: 100%;
 684 |   display: inline-block;
 685 |   vertical-align: top;
 686 |   margin-bottom: -30px;
 687 | }
 688 | .CodeMirror-gutter-wrapper {
 689 |   position: absolute;
 690 |   z-index: 4;
 691 |   background: none !important;
 692 |   border: none !important;
 693 | }
 694 | .CodeMirror-gutter-background {
 695 |   position: absolute;
 696 |   top: 0;
 697 |   bottom: 0;
 698 |   z-index: 4;
 699 | }
 700 | .CodeMirror-gutter-elt {
 701 |   position: absolute;
 702 |   cursor: default;
 703 |   z-index: 4;
 704 | }
 705 | .CodeMirror-gutter-wrapper ::selection {
 706 |   background-color: transparent;
 707 | }
 708 | .CodeMirror-gutter-wrapper ::-moz-selection {
 709 |   background-color: transparent;
 710 | }
 711 | .CodeMirror-lines {
 712 |   cursor: text;
 713 |   min-height: 1px;
 714 | }
 715 | .CodeMirror pre {
 716 |   -moz-border-radius: 0;
 717 |   -webkit-border-radius: 0;
 718 |   border-radius: 0;
 719 |   border-width: 0;
 720 |   background: transparent;
 721 |   font-family: inherit;
 722 |   font-size: inherit;
 723 |   margin: 0;
 724 |   white-space: pre;
 725 |   word-wrap: normal;
 726 |   line-height: inherit;
 727 |   color: inherit;
 728 |   z-index: 2;
 729 |   position: relative;
 730 |   overflow: visible;
 731 |   -webkit-tap-highlight-color: transparent;
 732 |   -webkit-font-variant-ligatures: contextual;
 733 |   font-variant-ligatures: contextual;
 734 | }
 735 | .CodeMirror-wrap pre {
 736 |   word-wrap: break-word;
 737 |   white-space: pre-wrap;
 738 |   word-break: normal;
 739 | }
 740 | .CodeMirror-linebackground {
 741 |   position: absolute;
 742 |   left: 0;
 743 |   right: 0;
 744 |   top: 0;
 745 |   bottom: 0;
 746 |   z-index: 0;
 747 | }
 748 | .CodeMirror-linewidget {
 749 |   position: relative;
 750 |   z-index: 2;
 751 |   padding: 0.1px;
 752 | }
 753 | .CodeMirror-rtl pre {
 754 |   direction: rtl;
 755 | }
 756 | .CodeMirror-code {
 757 |   outline: none;
 758 | }
 759 | .CodeMirror-gutter,
 760 | .CodeMirror-gutters,
 761 | .CodeMirror-linenumber,
 762 | .CodeMirror-scroll,
 763 | .CodeMirror-sizer {
 764 |   -moz-box-sizing: content-box;
 765 |   box-sizing: content-box;
 766 | }
 767 | .CodeMirror-measure {
 768 |   position: absolute;
 769 |   width: 100%;
 770 |   height: 0;
 771 |   overflow: hidden;
 772 |   visibility: hidden;
 773 | }
 774 | .CodeMirror-cursor {
 775 |   position: absolute;
 776 |   pointer-events: none;
 777 | }
 778 | .CodeMirror-measure pre {
 779 |   position: static;
 780 | }
 781 | div.CodeMirror-cursors {
 782 |   visibility: hidden;
 783 |   position: relative;
 784 |   z-index: 3;
 785 | }
 786 | .CodeMirror-focused div.CodeMirror-cursors,
 787 | div.CodeMirror-dragcursors {
 788 |   visibility: visible;
 789 | }
 790 | .CodeMirror-selected {
 791 |   background: #d9d9d9;
 792 | }
 793 | .CodeMirror-focused .CodeMirror-selected {
 794 |   background: #d7d4f0;
 795 | }
 796 | .CodeMirror-crosshair {
 797 |   cursor: crosshair;
 798 | }
 799 | .CodeMirror-line::selection,
 800 | .CodeMirror-line > span::selection,
 801 | .CodeMirror-line > span > span::selection {
 802 |   background: #d7d4f0;
 803 | }
 804 | .CodeMirror-line::-moz-selection,
 805 | .CodeMirror-line > span::-moz-selection,
 806 | .CodeMirror-line > span > span::-moz-selection {
 807 |   background: #d7d4f0;
 808 | }
 809 | .cm-searching {
 810 |   background-color: #ffa;
 811 |   background-color: rgba(255, 255, 0, 0.4);
 812 | }
 813 | .cm-force-border {
 814 |   padding-right: 0.1px;
 815 | }
 816 | @media print {
 817 |   .CodeMirror div.CodeMirror-cursors {
 818 |     visibility: hidden;
 819 |   }
 820 | }
 821 | .cm-tab-wrap-hack:after {
 822 |   content: '';
 823 | }
 824 | span.CodeMirror-selectedtext {
 825 |   background: none;
 826 | }
 827 | .cm-s-zenburn .CodeMirror-gutters {
 828 |   background: #3f3f3f !important;
 829 | }
 830 | .cm-s-zenburn .CodeMirror-foldgutter-open,
 831 | .CodeMirror-foldgutter-folded {
 832 |   color: #999;
 833 | }
 834 | .cm-s-zenburn .CodeMirror-cursor {
 835 |   border-left: 1px solid #fff;
 836 | }
 837 | .cm-s-zenburn {
 838 |   background-color: #3f3f3f;
 839 |   color: #dcdccc;
 840 | }
 841 | .cm-s-zenburn span.cm-builtin {
 842 |   color: #dcdccc;
 843 |   font-weight: 700;
 844 | }
 845 | .cm-s-zenburn span.cm-comment {
 846 |   color: #7f9f7f;
 847 | }
 848 | .cm-s-zenburn span.cm-keyword {
 849 |   color: #f0dfaf;
 850 |   font-weight: 700;
 851 | }
 852 | .cm-s-zenburn span.cm-atom {
 853 |   color: #bfebbf;
 854 | }
 855 | .cm-s-zenburn span.cm-def {
 856 |   color: #dcdccc;
 857 | }
 858 | .cm-s-zenburn span.cm-variable {
 859 |   color: #dfaf8f;
 860 | }
 861 | .cm-s-zenburn span.cm-variable-2 {
 862 |   color: #dcdccc;
 863 | }
 864 | .cm-s-zenburn span.cm-string,
 865 | .cm-s-zenburn span.cm-string-2 {
 866 |   color: #cc9393;
 867 | }
 868 | .cm-s-zenburn span.cm-number {
 869 |   color: #dcdccc;
 870 | }
 871 | .cm-s-zenburn span.cm-tag {
 872 |   color: #93e0e3;
 873 | }
 874 | .cm-s-zenburn span.cm-attribute,
 875 | .cm-s-zenburn span.cm-property {
 876 |   color: #dfaf8f;
 877 | }
 878 | .cm-s-zenburn span.cm-qualifier {
 879 |   color: #7cb8bb;
 880 | }
 881 | .cm-s-zenburn span.cm-meta {
 882 |   color: #f0dfaf;
 883 | }
 884 | .cm-s-zenburn span.cm-header,
 885 | .cm-s-zenburn span.cm-operator {
 886 |   color: #f0efd0;
 887 | }
 888 | .cm-s-zenburn span.CodeMirror-matchingbracket {
 889 |   box-sizing: border-box;
 890 |   background: transparent;
 891 |   border-bottom: 1px solid;
 892 | }
 893 | .cm-s-zenburn span.CodeMirror-nonmatchingbracket {
 894 |   border-bottom: 1px solid;
 895 |   background: none;
 896 | }
 897 | .cm-s-zenburn .CodeMirror-activeline,
 898 | .cm-s-zenburn .CodeMirror-activeline-background {
 899 |   background: #000;
 900 | }
 901 | .cm-s-zenburn div.CodeMirror-selected {
 902 |   background: #545454;
 903 | }
 904 | .cm-s-zenburn .CodeMirror-focused div.CodeMirror-selected {
 905 |   background: #4f4f4f;
 906 | }
 907 | .formland {
 908 |   font-size: 14px;
 909 | }
 910 | .formland .formland-template {
 911 |   margin-bottom: 30px;
 912 | }
 913 | .formland .formland-template.dir-horizontal {
 914 |   display: inline-block;
 915 |   margin-right: 30px;
 916 | }
 917 | .formland .formland-template:last-child {
 918 |   margin-bottom: 0;
 919 | }
 920 | .formland .formland-template .formland-label {
 921 |   margin-bottom: 10px;
 922 | }
 923 | .formland .formland-template .formland-label .optional {
 924 |   display: inline-block;
 925 |   margin-left: 5px;
 926 |   opacity: 0.5;
 927 |   font-size: 12px;
 928 | }
 929 | .formland .formland-template .help-text-trigger {
 930 |   display: inline-block;
 931 |   margin-left: 7px;
 932 |   opacity: 0.5;
 933 |   cursor: help;
 934 | }
 935 | .formland .formland-template .help-text-trigger img {
 936 |   width: 15px;
 937 | }
 938 | .formland .formland-template .formland-field {
 939 |   position: relative;
 940 | }
 941 | .formland .formland-template .formland-field .error {
 942 |   position: absolute;
 943 |   font-size: 12px;
 944 |   padding: 3px 10px;
 945 |   border-radius: 4px;
 946 |   color: #fff;
 947 |   background-color: #ff3a3a;
 948 |   bottom: -30px;
 949 |   opacity: 0;
 950 |   pointer-events: none;
 951 | }
 952 | .formland .formland-template .formland-field .error.is-error {
 953 |   opacity: 1;
 954 |   pointer-events: all;
 955 | }
 956 | .formland .formland-template .formland-field .error:before {
 957 |   position: absolute;
 958 |   bottom: 100%;
 959 |   left: 10px;
 960 |   z-index: 15;
 961 |   width: 0;
 962 |   height: 0;
 963 |   pointer-events: none;
 964 |   content: ' ';
 965 |   border: solid transparent;
 966 |   border-bottom-color: #ff3a3a;
 967 | }
 968 | .formland .formland-group {
 969 |   margin-bottom: 40px;
 970 |   padding-bottom: 40px;
 971 |   border-bottom: 1px solid #e0e0e0;
 972 | }
 973 | .formland .formland-group:last-child {
 974 |   border-bottom: none;
 975 | }
 976 | .formland .formland-group .group-title {
 977 |   font-size: 18px;
 978 |   font-weight: 600;
 979 |   margin-bottom: 10px;
 980 | }
 981 | .formland .formland-group .group-description {
 982 |   margin-bottom: 30px;
 983 | }
 984 | .formland .input-text input[type='date'],
 985 | .formland .input-text input[type='email'],
 986 | .formland .input-text input[type='month'],
 987 | .formland .input-text input[type='number'],
 988 | .formland .input-text input[type='tel'],
 989 | .formland .input-text input[type='text'],
 990 | .formland .input-text input[type='time'],
 991 | .formland .input-text input[type='url'],
 992 | .formland .input-text input[type='week'] {
 993 |   width: 100%;
 994 |   padding: 10px;
 995 |   border: 2px solid #e0e0e0;
 996 |   border-radius: 4px;
 997 |   background-color: #fff;
 998 |   outline: none;
 999 |   -webkit-transition: all 0.2s ease;
1000 |   transition: all 0.2s ease;
1001 | }
1002 | .formland .input-text input[type='date']:focus,
1003 | .formland .input-text input[type='email']:focus,
1004 | .formland .input-text input[type='month']:focus,
1005 | .formland .input-text input[type='number']:focus,
1006 | .formland .input-text input[type='tel']:focus,
1007 | .formland .input-text input[type='text']:focus,
1008 | .formland .input-text input[type='time']:focus,
1009 | .formland .input-text input[type='url']:focus,
1010 | .formland .input-text input[type='week']:focus {
1011 |   border-color: #c6cbfc;
1012 | }
1013 | .formland .input-text input[type='color'] {
1014 |   -webkit-appearance: none;
1015 |   border: none;
1016 |   width: 100%;
1017 |   height: 41px;
1018 | }
1019 | .formland .input-text input[type='color']::-webkit-color-swatch-wrapper {
1020 |   padding: 0;
1021 | }
1022 | .formland .input-text input[type='color']::-webkit-color-swatch {
1023 |   border: none;
1024 |   border-radius: 4px;
1025 | }
1026 | .formland .input-textarea textarea {
1027 |   width: 100%;
1028 |   min-height: 100px;
1029 |   padding: 10px;
1030 |   border: 2px solid #e0e0e0;
1031 |   border-radius: 4px;
1032 |   background-color: #fff;
1033 |   outline: none;
1034 |   -webkit-transition: all 0.2s ease;
1035 |   transition: all 0.2s ease;
1036 | }
1037 | .formland .input-textarea textarea:focus {
1038 |   border-color: #c6cbfc;
1039 | }
1040 | .formland .input-dropdown .dropdown-wrapper {
1041 |   position: relative;
1042 | }
1043 | .formland .input-dropdown .dropdown-wrapper.multi:after {
1044 |   content: none;
1045 | }
1046 | .formland .input-dropdown .dropdown-wrapper.multi select {
1047 |   padding: 10px;
1048 | }
1049 | .formland .input-dropdown .dropdown-wrapper.multi select option {
1050 |   padding: 10px;
1051 |   cursor: pointer;
1052 | }
1053 | .formland .input-dropdown .dropdown-wrapper.multi select option:checked {
1054 |   background-color: #4c5af7;
1055 | }
1056 | .formland .input-dropdown .dropdown-wrapper:after {
1057 |   content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAp0lEQVRIS+2SUQrDIAyG/6AH2E3WI1i8dmDuBt1NegDFIrgRhC22UNYHffIh/l/yGcLJh07OxwCohoeiiyvy3i9ElGOMcwhhle06527W2geAlZnnb6P8/OQKuANYJESETwCezOwOAUqQMSYQ0QdSgmrnU875lVJy7XQSpq5pC6mPu8JLrQooRQ0EPZ2/p+gCSEi5a1p2KVIXXSnonuAoaABUc0PR/xVtJW9OGV1k1e8AAAAASUVORK5CYII=');
1058 |   position: absolute;
1059 |   right: 5px;
1060 |   top: -2px;
1061 |   color: #e0e0e0;
1062 |   pointer-events: none;
1063 | }
1064 | .formland .input-dropdown .dropdown-wrapper select {
1065 |   -webkit-appearance: none;
1066 |   -moz-appearance: none;
1067 |   appearance: none;
1068 |   padding: 10px;
1069 |   border: 2px solid #e0e0e0;
1070 |   border-radius: 4px;
1071 |   background-color: #fff;
1072 |   outline: none;
1073 |   -webkit-transition: all 0.2s ease;
1074 |   transition: all 0.2s ease;
1075 |   padding-right: 30px;
1076 | }
1077 | .formland .input-dropdown .dropdown-wrapper select:focus {
1078 |   border-color: #c6cbfc;
1079 | }
1080 | .formland .input-radio .radio-button {
1081 |   display: inline-block;
1082 |   margin-right: 20px;
1083 |   display: -webkit-inline-box;
1084 |   display: -ms-inline-flexbox;
1085 |   display: inline-flex;
1086 |   -webkit-box-align: center;
1087 |   -ms-flex-align: center;
1088 |   align-items: center;
1089 | }
1090 | .formland .input-radio .radio-button * {
1091 |   cursor: pointer;
1092 | }
1093 | .formland .input-radio .radio-button label {
1094 |   margin: 0;
1095 | }
1096 | .formland .input-radio .radio-button input[type='radio'] {
1097 |   margin-right: 5px;
1098 |   -webkit-appearance: none;
1099 |   -moz-appearance: none;
1100 |   appearance: none;
1101 |   width: 20px;
1102 |   height: 20px;
1103 |   border-radius: 50%;
1104 |   border: 2px solid #e0e0e0;
1105 |   outline: none;
1106 | }
1107 | .formland .input-radio .radio-button input[type='radio']:focus {
1108 |   border-color: #c6cbfc;
1109 | }
1110 | .formland .input-radio .radio-button input[type='radio']:checked {
1111 |   border-color: #4c5af7;
1112 | }
1113 | .formland .input-radio .radio-button input[type='radio']:checked + label {
1114 |   position: relative;
1115 | }
1116 | .formland .input-radio .radio-button input[type='radio']:checked + label:after {
1117 |   content: ' ';
1118 |   position: absolute;
1119 |   left: -20px;
1120 |   top: 5px;
1121 |   width: 10px;
1122 |   height: 10px;
1123 |   border-radius: 50%;
1124 |   background-color: #4c5af7;
1125 | }
1126 | .formland .input-checkbox .checkbox-wrapper {
1127 |   display: inline-block;
1128 |   margin-right: 20px;
1129 |   display: -webkit-inline-box;
1130 |   display: -ms-inline-flexbox;
1131 |   display: inline-flex;
1132 |   -webkit-box-align: center;
1133 |   -ms-flex-align: center;
1134 |   align-items: center;
1135 | }
1136 | .formland .input-checkbox .checkbox-wrapper * {
1137 |   cursor: pointer;
1138 | }
1139 | .formland .input-checkbox .checkbox-wrapper label {
1140 |   margin: 0;
1141 | }
1142 | .formland .input-checkbox .checkbox-wrapper input[type='checkbox'] {
1143 |   margin-right: 5px;
1144 |   -webkit-appearance: none;
1145 |   -moz-appearance: none;
1146 |   appearance: none;
1147 |   height: 20px;
1148 |   width: 20px;
1149 |   border: 2px solid #e0e0e0;
1150 |   border-radius: 4px;
1151 |   outline: none;
1152 | }
1153 | .formland .input-checkbox .checkbox-wrapper input[type='checkbox']:focus {
1154 |   border-color: #c6cbfc;
1155 | }
1156 | .formland .input-checkbox .checkbox-wrapper input[type='checkbox']:checked {
1157 |   background-color: #4c5af7;
1158 |   border-color: #4c5af7;
1159 | }
1160 | .formland
1161 |   .input-checkbox
1162 |   .checkbox-wrapper
1163 |   input[type='checkbox']:checked
1164 |   + label {
1165 |   position: relative;
1166 | }
1167 | .formland
1168 |   .input-checkbox
1169 |   .checkbox-wrapper
1170 |   input[type='checkbox']:checked
1171 |   + label:after {
1172 |   content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAApklEQVRIS+2U0Q2EIBAF53VgJ3claOV318HZiR2s2UQNIepC1D/4JPBmGRbEw0MP59MAoeGmCDPrgA8wSRpyZ5cUJeFv4Cepvw2QhY9AL2m6BVAa7rBdRWb2BwwY8qpqwiPAC3DQBqkNPwN4Z3yBDbK49W7xCz10XnwHS7UpxPdWhR+eYK0ig/h0ceVrRvgOEojv2W3Fsw8pBIS/WbCgAUKDTVGoaAbVdEgZ6zcjOAAAAABJRU5ErkJggg==');
1173 |   position: absolute;
1174 |   left: -20px;
1175 |   -webkit-transform: scale3d(0.8, 0.8, 0.8);
1176 |   transform: scale3d(0.8, 0.8, 0.8);
1177 |   left: -27px;
1178 |   top: -1px;
1179 | }
1180 | .formland .__dummy,
1181 | .formland .input-toggle input[type='checkbox'] + label:after,
1182 | .formland .input-toggle input[type='checkbox'] + label:before {
1183 |   content: '';
1184 |   display: block;
1185 |   position: absolute;
1186 |   top: 3px;
1187 |   left: 3px;
1188 | }
1189 | .formland .input-toggle {
1190 |   display: -webkit-inline-box;
1191 |   display: -ms-inline-flexbox;
1192 |   display: inline-flex;
1193 |   -webkit-box-align: center;
1194 |   -ms-flex-align: center;
1195 |   align-items: center;
1196 | }
1197 | .formland .input-toggle .info-text {
1198 |   display: inline-block;
1199 |   margin-left: 15px;
1200 |   margin-top: -5px;
1201 | }
1202 | .formland .input-toggle input[type='checkbox'] {
1203 |   position: absolute;
1204 |   visibility: hidden;
1205 | }
1206 | .formland .input-toggle input[type='checkbox'] + label {
1207 |   position: relative;
1208 |   cursor: pointer;
1209 |   outline: none;
1210 |   -webkit-user-select: none;
1211 |   -moz-user-select: none;
1212 |   -ms-user-select: none;
1213 |   user-select: none;
1214 |   width: 50px;
1215 |   height: 30px;
1216 |   background-color: #e0e0e0;
1217 |   border-radius: 4px;
1218 |   overflow: hidden;
1219 |   margin-bottom: 0;
1220 |   -webkit-transition: background 0.2s ease;
1221 |   transition: background 0.2s ease;
1222 | }
1223 | .formland .input-toggle input[type='checkbox'] + label:before {
1224 |   right: 1px;
1225 |   background-color: #fff;
1226 |   border-radius: 4px;
1227 | }
1228 | .formland .input-toggle input[type='checkbox'] + label:after {
1229 |   width: 20px;
1230 |   height: 24px;
1231 |   background-color: #fff;
1232 |   border-radius: 4px;
1233 |   -webkit-transition: margin 0.2s ease;
1234 |   transition: margin 0.2s ease;
1235 | }
1236 | .formland .input-toggle input[type='checkbox']:checked + label {
1237 |   background-color: #4c5af7;
1238 | }
1239 | .formland .input-toggle input[type='checkbox']:checked + label:after {
1240 |   margin-left: 24px;
1241 | }
1242 | .formland .input-range .value {
1243 |   font-size: 18px;
1244 |   margin: 10px 0;
1245 |   font-weight: 800;
1246 |   color: #4c5af7;
1247 | }
1248 | .formland .input-range .range {
1249 |   margin-top: 10px;
1250 |   display: -webkit-box;
1251 |   display: -ms-flexbox;
1252 |   display: flex;
1253 |   -webkit-box-pack: justify;
1254 |   -ms-flex-pack: justify;
1255 |   justify-content: space-between;
1256 |   opacity: 0.5;
1257 | }
1258 | .formland .input-range input[type='range'] {
1259 |   -webkit-appearance: none;
1260 |   width: 100%;
1261 |   background: transparent;
1262 | }
1263 | .formland .input-range input[type='range']:focus {
1264 |   outline: none;
1265 | }
1266 | .formland .input-range input[type='range']::-webkit-slider-thumb {
1267 |   -webkit-appearance: none;
1268 |   appearance: none;
1269 |   height: 20px;
1270 |   width: 20px;
1271 |   border-radius: 10px;
1272 |   background: #4c5af7;
1273 |   cursor: pointer;
1274 |   margin-top: -8px;
1275 |   -webkit-transform: scaleX(1);
1276 |   transform: scaleX(1);
1277 |   -webkit-transition: -webkit-transform 0.2s ease;
1278 |   transition: -webkit-transform 0.2s ease;
1279 |   transition: transform 0.2s ease;
1280 |   transition: transform 0.2s ease, -webkit-transform 0.2s ease;
1281 | }
1282 | .formland .input-range input[type='range']:focus::-webkit-slider-thumb {
1283 |   -webkit-transform: scale3d(1.2, 1.2, 1.2);
1284 |   transform: scale3d(1.2, 1.2, 1.2);
1285 | }
1286 | .formland .input-range input[type='range']::-moz-range-thumb {
1287 |   -moz-appearance: none;
1288 |   appearance: none;
1289 |   height: 20px;
1290 |   width: 20px;
1291 |   border-radius: 10px;
1292 |   background: #4c5af7;
1293 |   cursor: pointer;
1294 | }
1295 | .formland .input-range input[type='range']::-webkit-slider-runnable-track {
1296 |   width: 100%;
1297 |   height: 5px;
1298 |   cursor: pointer;
1299 |   background: #e0e0e0;
1300 |   border-radius: 4px;
1301 |   -webkit-transition: background 0.2s ease;
1302 |   transition: background 0.2s ease;
1303 | }
1304 | .formland
1305 |   .input-range
1306 |   input[type='range']:focus::-webkit-slider-runnable-track {
1307 |   background: #c6cbfc;
1308 | }
1309 | .formland .input-range input[type='range']::-moz-range-track {
1310 |   width: 100%;
1311 |   height: 5px;
1312 |   cursor: pointer;
1313 |   background: #e0e0e0;
1314 |   border-radius: 4px;
1315 | }
1316 | .formland .form-buttons-container {
1317 |   margin-top: 20px;
1318 |   display: -webkit-box;
1319 |   display: -ms-flexbox;
1320 |   display: flex;
1321 |   -webkit-box-pack: end;
1322 |   -ms-flex-pack: end;
1323 |   justify-content: flex-end;
1324 | }
1325 | .formland .form-buttons-container button {
1326 |   padding: 10px 15px;
1327 |   min-width: 100px;
1328 |   border-radius: 4px;
1329 |   border: none;
1330 |   background-color: #4c5af7;
1331 |   color: #fff;
1332 |   font-weight: 600;
1333 |   margin-left: 30px;
1334 |   display: -webkit-inline-box;
1335 |   display: -ms-inline-flexbox;
1336 |   display: inline-flex;
1337 |   -webkit-box-align: center;
1338 |   -ms-flex-align: center;
1339 |   align-items: center;
1340 |   -webkit-box-pack: center;
1341 |   -ms-flex-pack: center;
1342 |   justify-content: center;
1343 |   cursor: pointer;
1344 | }
1345 | .formland .form-buttons-container button.cancel {
1346 |   background-color: #fff;
1347 |   color: #4c5af7;
1348 | }
1349 | body {
1350 |   padding: 15px;
1351 | }
1352 | body a {
1353 |   color: #4c5af7;
1354 |   text-decoration: none;
1355 | }
1356 | body .banner {
1357 |   padding: 50px 15px;
1358 |   margin: -15px;
1359 |   margin-bottom: 50px;
1360 |   background-color: #4c5af7;
1361 |   color: #fff;
1362 | }
1363 | body .banner p {
1364 |   opacity: 0.5;
1365 | }
1366 | body .banner .button-container {
1367 |   margin-top: 30px;
1368 | }
1369 | body .banner .button-container button {
1370 |   padding: 10px 15px;
1371 |   cursor: pointer;
1372 |   background-color: #fff;
1373 |   border-radius: 4px;
1374 |   border: none;
1375 |   color: #4c5af7;
1376 |   text-transform: uppercase;
1377 |   min-width: 100px;
1378 |   font-weight: 600;
1379 | }
1380 | body .mx-400 {
1381 |   max-width: 400px;
1382 |   margin-bottom: 30px;
1383 | }
1384 | body .mx-400 a,
1385 | body .mx-400 h4 {
1386 |   margin-bottom: 30px;
1387 |   display: inline-block;
1388 |   margin-right: 15px;
1389 | }
1390 | body .section {
1391 |   margin-bottom: 30px;
1392 | }
1393 | body .config .CodeMirror {
1394 |   height: 600px;
1395 | }
1396 | body .store .CodeMirror {
1397 |   height: 200px;
1398 | }
1399 | .rc-tooltip.rc-tooltip-zoom-enter,
1400 | .rc-tooltip.rc-tooltip-zoom-leave {
1401 |   display: block;
1402 | }
1403 | .rc-tooltip-zoom-appear,
1404 | .rc-tooltip-zoom-enter {
1405 |   opacity: 0;
1406 |   -webkit-animation-duration: 0.3s;
1407 |   animation-duration: 0.3s;
1408 |   -webkit-animation-fill-mode: both;
1409 |   animation-fill-mode: both;
1410 |   -webkit-animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
1411 |   animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
1412 |   -webkit-animation-play-state: paused;
1413 |   animation-play-state: paused;
1414 | }
1415 | .rc-tooltip-zoom-leave {
1416 |   -webkit-animation-duration: 0.3s;
1417 |   animation-duration: 0.3s;
1418 |   -webkit-animation-fill-mode: both;
1419 |   animation-fill-mode: both;
1420 |   -webkit-animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
1421 |   animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
1422 |   -webkit-animation-play-state: paused;
1423 |   animation-play-state: paused;
1424 | }
1425 | .rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active,
1426 | .rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active {
1427 |   -webkit-animation-name: rcToolTipZoomIn;
1428 |   animation-name: rcToolTipZoomIn;
1429 |   -webkit-animation-play-state: running;
1430 |   animation-play-state: running;
1431 | }
1432 | .rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
1433 |   -webkit-animation-name: rcToolTipZoomOut;
1434 |   animation-name: rcToolTipZoomOut;
1435 |   -webkit-animation-play-state: running;
1436 |   animation-play-state: running;
1437 | }
1438 | @-webkit-keyframes rcToolTipZoomIn {
1439 |   0% {
1440 |     opacity: 0;
1441 |     -webkit-transform-origin: 50% 50%;
1442 |     transform-origin: 50% 50%;
1443 |     -webkit-transform: scale(0);
1444 |     transform: scale(0);
1445 |   }
1446 |   to {
1447 |     opacity: 1;
1448 |     -webkit-transform-origin: 50% 50%;
1449 |     transform-origin: 50% 50%;
1450 |     -webkit-transform: scale(1);
1451 |     transform: scale(1);
1452 |   }
1453 | }
1454 | @keyframes rcToolTipZoomIn {
1455 |   0% {
1456 |     opacity: 0;
1457 |     -webkit-transform-origin: 50% 50%;
1458 |     transform-origin: 50% 50%;
1459 |     -webkit-transform: scale(0);
1460 |     transform: scale(0);
1461 |   }
1462 |   to {
1463 |     opacity: 1;
1464 |     -webkit-transform-origin: 50% 50%;
1465 |     transform-origin: 50% 50%;
1466 |     -webkit-transform: scale(1);
1467 |     transform: scale(1);
1468 |   }
1469 | }
1470 | @-webkit-keyframes rcToolTipZoomOut {
1471 |   0% {
1472 |     opacity: 1;
1473 |     -webkit-transform-origin: 50% 50%;
1474 |     transform-origin: 50% 50%;
1475 |     -webkit-transform: scale(1);
1476 |     transform: scale(1);
1477 |   }
1478 |   to {
1479 |     opacity: 0;
1480 |     -webkit-transform-origin: 50% 50%;
1481 |     transform-origin: 50% 50%;
1482 |     -webkit-transform: scale(0);
1483 |     transform: scale(0);
1484 |   }
1485 | }
1486 | @keyframes rcToolTipZoomOut {
1487 |   0% {
1488 |     opacity: 1;
1489 |     -webkit-transform-origin: 50% 50%;
1490 |     transform-origin: 50% 50%;
1491 |     -webkit-transform: scale(1);
1492 |     transform: scale(1);
1493 |   }
1494 |   to {
1495 |     opacity: 0;
1496 |     -webkit-transform-origin: 50% 50%;
1497 |     transform-origin: 50% 50%;
1498 |     -webkit-transform: scale(0);
1499 |     transform: scale(0);
1500 |   }
1501 | }
1502 | .rc-tooltip {
1503 |   position: absolute;
1504 |   z-index: 1070;
1505 |   display: block;
1506 |   visibility: visible;
1507 |   font-size: 12px;
1508 |   line-height: 1.5;
1509 |   opacity: 0.9;
1510 | }
1511 | .rc-tooltip-hidden {
1512 |   display: none;
1513 | }
1514 | .rc-tooltip-placement-top,
1515 | .rc-tooltip-placement-topLeft,
1516 | .rc-tooltip-placement-topRight {
1517 |   padding: 5px 0 9px;
1518 | }
1519 | .rc-tooltip-placement-right,
1520 | .rc-tooltip-placement-rightBottom,
1521 | .rc-tooltip-placement-rightTop {
1522 |   padding: 0 5px 0 9px;
1523 | }
1524 | .rc-tooltip-placement-bottom,
1525 | .rc-tooltip-placement-bottomLeft,
1526 | .rc-tooltip-placement-bottomRight {
1527 |   padding: 9px 0 5px;
1528 | }
1529 | .rc-tooltip-placement-left,
1530 | .rc-tooltip-placement-leftBottom,
1531 | .rc-tooltip-placement-leftTop {
1532 |   padding: 0 9px 0 5px;
1533 | }
1534 | .rc-tooltip-inner {
1535 |   padding: 8px 10px;
1536 |   color: #fff;
1537 |   text-align: left;
1538 |   text-decoration: none;
1539 |   background-color: #373737;
1540 |   border-radius: 6px;
1541 |   box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
1542 |   min-height: 34px;
1543 | }
1544 | .rc-tooltip-arrow {
1545 |   position: absolute;
1546 |   width: 0;
1547 |   height: 0;
1548 |   border-color: transparent;
1549 |   border-style: solid;
1550 | }
1551 | .rc-tooltip-placement-top .rc-tooltip-arrow,
1552 | .rc-tooltip-placement-topLeft .rc-tooltip-arrow,
1553 | .rc-tooltip-placement-topRight .rc-tooltip-arrow {
1554 |   bottom: 4px;
1555 |   margin-left: -5px;
1556 |   border-width: 5px 5px 0;
1557 |   border-top-color: #373737;
1558 | }
1559 | .rc-tooltip-placement-top .rc-tooltip-arrow {
1560 |   left: 50%;
1561 | }
1562 | .rc-tooltip-placement-topLeft .rc-tooltip-arrow {
1563 |   left: 15%;
1564 | }
1565 | .rc-tooltip-placement-topRight .rc-tooltip-arrow {
1566 |   right: 15%;
1567 | }
1568 | .rc-tooltip-placement-right .rc-tooltip-arrow,
1569 | .rc-tooltip-placement-rightBottom .rc-tooltip-arrow,
1570 | .rc-tooltip-placement-rightTop .rc-tooltip-arrow {
1571 |   left: 4px;
1572 |   margin-top: -5px;
1573 |   border-width: 5px 5px 5px 0;
1574 |   border-right-color: #373737;
1575 | }
1576 | .rc-tooltip-placement-right .rc-tooltip-arrow {
1577 |   top: 50%;
1578 | }
1579 | .rc-tooltip-placement-rightTop .rc-tooltip-arrow {
1580 |   top: 15%;
1581 |   margin-top: 0;
1582 | }
1583 | .rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
1584 |   bottom: 15%;
1585 | }
1586 | .rc-tooltip-placement-left .rc-tooltip-arrow,
1587 | .rc-tooltip-placement-leftBottom .rc-tooltip-arrow,
1588 | .rc-tooltip-placement-leftTop .rc-tooltip-arrow {
1589 |   right: 4px;
1590 |   margin-top: -5px;
1591 |   border-width: 5px 0 5px 5px;
1592 |   border-left-color: #373737;
1593 | }
1594 | .rc-tooltip-placement-left .rc-tooltip-arrow {
1595 |   top: 50%;
1596 | }
1597 | .rc-tooltip-placement-leftTop .rc-tooltip-arrow {
1598 |   top: 15%;
1599 |   margin-top: 0;
1600 | }
1601 | .rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
1602 |   bottom: 15%;
1603 | }
1604 | .rc-tooltip-placement-bottom .rc-tooltip-arrow,
1605 | .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
1606 | .rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
1607 |   top: 4px;
1608 |   margin-left: -5px;
1609 |   border-width: 0 5px 5px;
1610 |   border-bottom-color: #373737;
1611 | }
1612 | .rc-tooltip-placement-bottom .rc-tooltip-arrow {
1613 |   left: 50%;
1614 | }
1615 | .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
1616 |   left: 15%;
1617 | }
1618 | .rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
1619 |   right: 15%;
1620 | }
1621 | 


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