Form add CodeEditor item type

Author: docoder

example/src/containers/BaseForm/index.js

@@ -244,6 +244,20 @@ export default class BaseForm extends React.Component {
                 label: '字段22',
                 type: 'month'
             },
+            {
+                key: 'code',
+                label: '代码',
+                type: 'codeEditor',
+                value: `
+public class HelloWorld {
+
+    public static void main(String[] args) {
+        // Prints "Hello, World" to the terminal window.
+        System.out.println("Hello, World");
+    }
+
+}`
+            },
         ];
         this.rowColCounts = [2,2,4,2,1,3,4]
         // const index = this.forms.findIndex(f => f.key === 'add2')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-colony-ui",
-  "version": "1.6.12",
+  "version": "1.7.0",
   "description": "Ant Colony UI Toolkit based on Ant Design and React",
   "author": "docoder",
   "license": "MIT",
@@ -51,6 +51,7 @@
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.5",
     "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-prismjs": "^1.1.1",
     "babel-plugin-styled-components": "^1.10.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
@@ -84,5 +85,9 @@
   "files": [
     "dist"
   ],
-  "dependencies": {}
+  "dependencies": {
+    "css-initials": "^0.3.1",
+    "prismjs": "^1.17.1",
+    "react-simple-code-editor": "^0.10.0"
+  }
 }

rollup.config.js

@@ -55,12 +55,17 @@ export default {
           "stage-0",
           "react"
       ],
-      plugins: [ 
+      plugins: [
+        ["prismjs", {
+          "languages": ["javascript", "jsx", "typescript", "tsx", "java", "sql"],
+          "theme": "coy",
+          "css": true
+        }],
         'external-helpers', 
-        'babel-plugin-styled-components',
+        'babel-plugin-styled-components'
       ]
     }),
     resolve(),
     commonjs()
-  ]
+  ],
 }

src/components/UI/Form/CodeEditor.js

@@ -0,0 +1,50 @@
+/*
+* @Author: docoder
+* @Email:  [email protected]
+*/
+import * as React from 'react';
+import Editor from 'react-simple-code-editor';
+import styled from 'styled-components';
+import initials from '../../css-initials';
+const Container = styled.div`
+    & pre {
+        ${initials}
+        all: initials;
+    }
+`;
+export default class CodeEditor extends React.Component {
+  render() {
+    return (
+        <Container style={{
+            overflow: 'auto',
+            border: '1px solid #d9d9d9',
+            borderRadius: 4,
+            minHeight: 46,
+            maxHeight: 150,
+            lineHeight: 'normal'
+        }}>
+            <Editor
+                {...this.props}
+                onValueChange={this.props.onChange}
+                highlight={code => Prism.highlight(code, Prism.languages.js)}
+                padding={10}
+                tabSize={4}
+                style={{
+                    fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+                    fontSize: 12,
+                    lineHeight: 'normal',
+                    width: '-webkit-max-content',
+                    width: '-moz-max-content',
+                    width: 'max-content',
+                    width: 'intrinsic',
+                    height: '-webkit-max-content',
+                    height: '-moz-max-content',
+                    height: 'max-content',
+                    height: 'intrinsic',
+                    display: 'inline-block'
+                }}
+            />
+        </Container>
+    )
+  }
+}

src/components/UI/Form/index.js

@@ -13,6 +13,10 @@ import {
 import Button from '../Button';
 import cloneDeep from 'lodash/cloneDeep';
 
+
+import CodeEditor from "./CodeEditor";
+import Prism from 'prismjs';
+
 const { TextArea } = Input;
 const FormItem = AntForm.Item;
 const { RangePicker, MonthPicker } = DatePicker;
@@ -209,6 +213,14 @@ class Form extends React.Component {
                 return (
                     <TextArea onChange={(...args)=>{this.itemOnChange(item,...args)}} disabled={selectDisabled} placeholder={selectPlaceholder} autosize={{ minRows, maxRows }} />
                 );
+            case 'codeEditor':
+                return (
+                    <CodeEditor
+                        onChange={(...args)=>{this.itemOnChange(item,...args)}}
+                        disabled={selectDisabled} 
+                        placeholder={selectPlaceholder}
+                    />
+                )
             case 'date':
                 return (
                     <DatePicker

src/components/css-initials/index.js

@@ -0,0 +1,12 @@
+/*
+* @Author: docoder
+* @Email:  [email protected]
+*/
+import cssInitials from 'css-initials';
+
+const toCSS = obj => Object.keys(obj).map(key => `${key}: ${obj[key]};`).join('\n');
+
+export default `
+  ${toCSS(cssInitials)}
+  
+`;

yarn.lock

@@ -1675,6 +1675,11 @@ babel-plugin-jest-hoist@^20.0.3:
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-20.0.3.tgz#afedc853bd3f8dc3548ea671fbe69d03cc2c1767"
   integrity sha1-r+3IU70/jcNUjqZx++adA8wsF2c=
 
+babel-plugin-prismjs@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-prismjs/-/babel-plugin-prismjs-1.1.1.tgz#974b2346d6ea8bdb2b16c3fdf1342bbe97fc6f51"
+  integrity sha512-MmwxA//jBpXH0IhJ2FbpBJmd6Bvq5rBe3UD3udUqfkkOdh6lmQeYxoVGpkIvLuuXecrynWjpPqwM0JPxErebpQ==
+
 "babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939"
@@ -2895,6 +2900,15 @@ cli-width@^2.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
   integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
 
+clipboard@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
+  integrity sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -3346,6 +3360,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
   integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
 
+css-initials@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/css-initials/-/css-initials-0.3.1.tgz#0406d78e586fd12b9984a3f7d8a87fcbb2073208"
+  integrity sha512-fkshKv9vV8AmcxkAWVQ9DmEAKiqe09GHdnFaXecp0NIfsGnXIHVJAHfsxdRy9KXV0/KiWdjBqrCYto2fYIO4xQ==
+
 [email protected]:
   version "0.28.7"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
@@ -3686,6 +3705,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -5189,6 +5213,13 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
@@ -8453,6 +8484,13 @@ pretty-format@^20.0.3:
     ansi-regex "^2.1.1"
     ansi-styles "^3.0.0"
 
+prismjs@^1.17.1:
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"
+  integrity sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 private@^0.1.6, private@^0.1.7, private@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -9281,6 +9319,11 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-simple-code-editor@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz#73e7ac550a928069715482aeb33ccba36efe2373"
+  integrity sha512-bL5W5mAxSW6+cLwqqVWY47Silqgy2DKDTR4hDBrLrUqC5BXc29YVx17l2IZk5v36VcDEq1Bszu2oHm1qBwKqBA==
+
 react-slick@~0.24.0:
   version "0.24.0"
   resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.24.0.tgz#1a4e078a82de4e9458255d9ce26aa6f3b17b168b"
@@ -9918,6 +9961,11 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 selfsigned@^1.9.1:
   version "1.10.4"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.4.tgz#cdd7eccfca4ed7635d47a08bf2d5d3074092e2cd"
@@ -10700,6 +10748,11 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tinycolor2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"