add Color

Author: jljsj33

assets/index.less

@@ -22,22 +22,25 @@
       color: @text-color;
       box-shadow: none;
       font-weight: 200;
+
       &::placeholder {
         color: fade(@text-color, 15);
       }
     }
+
     .ant-select {
       &-selection {
         background: @bg-color2;
         border-color: @line-color;
         color: @text-color;
         box-shadow: none;
       }
+
       &-arrow {
         color: inherit;
       }
     }
-    
+
   }
 
   &-breadcrumb {
@@ -49,6 +52,7 @@
     .ant-breadcrumb {
       color: fade(@title-color, 70);
       transition: color .3s;
+
       >span {
         cursor: pointer;
       }
@@ -93,7 +97,7 @@
     &-string {
       margin: 8px 0;
     }
-    
+
   }
 
   &-title {
@@ -110,6 +114,7 @@
       margin: 8px 0;
       color: @text-color2;
     }
+
     &-z {
       color: @text-color;
       border-top: 1px solid @line-color;
@@ -186,9 +191,11 @@
       .anticon {
         margin-right: 8px;
       }
+
       a {
-        
+
         color: @primary-color;
+
         &:hover {
           color: lighten(@primary-color, 5%)
         }
@@ -207,6 +214,7 @@
       overflow: hidden;
     }
   }
+
   &-upload-button {
     width: 100%;
     border-radius: 4px;
@@ -218,9 +226,11 @@
     overflow: hidden;
     cursor: pointer;
     position: relative;
+
     p {
       position: relative;
     }
+
     em {
       position: absolute;
       left: 0;
@@ -232,4 +242,135 @@
       transition: width .3s;
     }
   }
+
+  &-color {
+    width: 60px;
+    height: 22px;
+    border-radius: 4px;
+    cursor: pointer;
+    overflow: hidden;
+    display: inline-block;
+    transition: box-shadow .3s, border .3s;
+    border: 1px solid #A4A7A8;
+
+    &-input {
+      display: inline-block;
+      width: ~"calc(100% - 8px - 60px)";
+      margin-left: 8px;
+      vertical-align: top;
+    }
+
+    &-picker-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    &-picker-show {
+      .@{editorJSON}-color-mask {
+        position: fixed;
+        z-index: 9998;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+    }
+
+    &-picker {
+      position: absolute;
+      left: -41px;
+      perspective: 300px;
+      margin-top: 5px;
+      z-index: 9999;
+
+      .sketch-picker {
+        background: @line-color  !important;
+        span {
+          color: @text-color !important;
+        }
+        input {
+          border-radius: 4px;
+          overflow: hidden;
+          color: rgba(0, 0, 0, 0.65)
+        }
+        .flexbox-fix {
+          border-top-color: @bg-color !important;
+        }
+      }
+
+      .block-picker {
+        background: @line-color  !important;
+        box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.15);
+
+        >div {
+          &:nth-child(1) {
+            border-color: transparent transparent @line-color  !important;
+            left: 10px !important;
+            margin-left: 0 !important;
+          }
+
+          &:nth-child(2), input {
+            display: none !important;
+          }
+          &:nth-child(3) {
+            padding-bottom: 0 !important;
+          }
+        }
+      }
+    }
+
+    i {
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: relative;
+
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-bottom: 4px solid white;
+        border-left: 4px solid transparent;
+        right: 1px;
+        bottom: 1px;
+      }
+    }
+
+    &.active {
+      //border-color: @input-line-color-hover;
+      //box-shadow: 0 0 4px @input-line-color-hover;
+    }
+
+    &-wrapper {
+      &:hover {
+        .color-close {
+          opacity: 1;
+        }
+      }
+
+      .color-close {
+        position: absolute;
+        line-height: 12px;
+        text-align: center;
+        width: 12px;
+        height: 12px;
+        top: -5px;
+        left: -5px;
+        border-radius: 100%;
+        background: #ff0000;
+        color: #fff;
+        opacity: 0;
+        cursor: pointer;
+        transition: opacity .3s;
+
+        .anticon-close {
+          font-size: 12px;
+          transform: scale(.8);
+        }
+      }
+    }
+  }
 }

examples/simple.tsx

@@ -2,11 +2,16 @@
 import EditorJSON from '../src/';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { schema } from 'schema-util';
+import { schema } from 'schemas-utile';
 import '../assets/index.less';
 
 const schemaJSON = schema(`
-Object(产品优势_0) {
+Object(产品优势) {
+  wrapper(背景编辑):Object {
+    backgroundColor(背景颜色): Object {
+      children(背景颜色): Color[color: "#FFFFFF,#FAFBFC"]
+    }
+  },
   blockWrapper(主要信息): Object{
     bannerBgPC(电脑端背景): Object {
       children(图片地址): Image
@@ -87,6 +92,9 @@ Object(产品优势_0) {
 const dataSource = {
   wrapper: {
     className: 'product-banner',
+    backgroundColor: {
+      children: '#FFFFFF',
+    },
   },
   blockWrapper: {
     className: 'product-banner-wrapper',
@@ -221,6 +229,12 @@ const dataSource = {
 };
 
 const dataBasic = {
+  wrapper: {
+    className: 'product-banner',
+    backgroundColor: {
+      children: '#FFFFFF',
+    },
+  },
   blockWrapper: {
     dynamic: {
       children: [
@@ -268,7 +282,7 @@ const dataBasic = {
   },
 };
 
-const d = ['blockWrapper', 'descriptionContent'];
+const d = [];
 export default class Demo extends React.Component<any, any> {
   state = {
     selected: d

package.json

@@ -45,9 +45,11 @@
     "babel-runtime": "^6.26.0",
     "classnames": "^2.2.6",
     "medium-editor": "^5.23.3",
+    "rc-tween-one": "^2.4.1",
     "react-beautiful-dnd": "^11.0.3",
-    "simple-evaluate": "^1.2.0",
-    "schema-util": "^3.4.2"
+    "react-color": "^2.17.3",
+    "schemas-utile": "^1.0.0",
+    "simple-evaluate": "^1.2.0"
   },
   "devDependencies": {
     "@types/enzyme": "^3.9.3",

src/components/ArrayType.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Icon } from 'antd';
 import classnames from 'classnames';
-import mock from 'schema-util/lib/mock';
+import mock from 'schemas-utile/lib/mock';
 import evaluate from 'simple-evaluate';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 /* import Comp from './Comp'; */