feat: add style setter

packages/editor/src/config/assets.js

@@ -164,6 +164,10 @@ export default {
         {
           name: 'children',
           propType: 'node'
+        },
+        {
+          name: 'style',
+          propType: 'object'
         }
       ],
     },

packages/plugin-setters/package.json

@@ -12,10 +12,6 @@
     "test:snapshot": "ava --update-snapshots"
   },
   "dependencies": {
-    "@alifd/next": "^1.19.16",
-    "classnames": "^2.2.6",
-    "react": "^16",
-    "react-dom": "^16.7.0",
     "@ali/iceluna-comp-expression": "^1.0.6",
     "@ali/iceluna-comp-form": "^1.0.20",
     "@ali/iceluna-comp-list": "^1.0.26",
@@ -23,10 +19,15 @@
     "@ali/iceluna-comp-object-button": "^1.0.23",
     "@ali/iceluna-comp-react-node": "^1.0.5",
     "@ali/iceluna-sdk": "^1.0.5-beta.24",
+    "@ali/lc-style-setter": "^0.0.1",
+    "@alifd/next": "^1.19.16",
     "acorn": "^6.4.1",
+    "classnames": "^2.2.6",
     "intl-messageformat": "^8.2.1",
     "monaco-editor": "^0.20.0",
     "qs": "^6.9.1",
+    "react": "^16",
+    "react-dom": "^16.7.0",
     "react-monaco-editor": "^0.34.0"
   },
   "devDependencies": {
@@ -37,9 +38,9 @@
     "@types/react-dom": "^16",
     "eslint": "^6.5.1",
     "prettier": "^1.18.2",
+    "ts-node": "^8.0.1",
     "tslib": "^1.9.3",
-    "typescript": "^3.1.3",
+    "typescript": "^3.1.3"
-    "ts-node": "^8.0.1"
   },
   "ava": {
     "compileEnhancements": false,

packages/plugin-setters/src/index.tsx

@@ -10,6 +10,7 @@ import {
 import ExpressionSetter from './expression-setter';
 import MixinSetter from './mixin-setter';
 import EventsSetter from './events-setter';
+import StyleSetter from './style-setter';
 
 registerSetter('ClassNameSetter', () => {
   return <div className="lc-block-setter">这里是类名绑定</div>;
@@ -38,3 +39,5 @@ registerSetter('DateSetter', DatePicker);
 registerSetter('DateYearSetter', DatePicker.YearPicker);
 registerSetter('DateMonthSetter', DatePicker.MonthPicker);
 registerSetter('DateRangeSetter', DatePicker.RangePicker);
+
+registerSetter('StyleSetter', StyleSetter);

packages/plugin-setters/src/style-setter/index.tsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import LowStyleSetter from '@ali/lc-style-setter';
+import './style.less';
+
+export default class StyleSetter extends Component{
+
+  static displayName = 'StyleSetter';
+  static propTypes = {
+    value: PropTypes.object,
+    onChange: PropTypes.func,
+    placeholder: PropTypes.string,
+    locale: PropTypes.string
+  };
+  static defaultProps = {
+    value: {},
+    onChange: () => {},
+    placeholder: '',
+    locale: 'zh-CN'
+  };
+
+  onChange = (val: any) => {
+    const { onChange } = this.props;
+    onChange(val.native);
+  }
+
+  render () {
+    console.log(this.props);
+    const { value } = this.props;
+    return (
+      <div className="lc-block-setter">
+        <LowStyleSetter value={value} onChange={this.onChange} />
+      </div>
+    );
+  }
+
+}

packages/plugin-setters/src/style-setter/style.less

@@ -0,0 +1,417 @@
+/**
+ * Popover Component Style for uxcore
+ * @author eternalsky
+ *
+ * Copyright 2014-2015, Uxcore Team, Alinw.
+ * All rights reserved.
+ */
+ .kuma-popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1050;
+  cursor: auto;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+  white-space: normal;
+  font-size: 12px;
+  line-height: 1.4;
+  font-weight: normal;
+  text-align: left;
+}
+.kuma-popover-button-group {
+  padding: 6px 0 0;
+  text-align: right;
+  background: #fff;
+}
+.kuma-popover-button-group .kuma-button {
+  margin-left: 10px;
+  margin-right: 0;
+}
+.kuma-popover-hidden {
+  display: none;
+}
+.kuma-popover-placement-top,
+.kuma-popover-placement-topLeft,
+.kuma-popover-placement-topRight {
+  margin-top: -7px;
+  padding-bottom: 11px;
+}
+.kuma-popover-placement-right,
+.kuma-popover-placement-rightTop,
+.kuma-popover-placement-rightBottom {
+  margin-left: 7px;
+  padding-left: 11px;
+}
+.kuma-popover-placement-bottom,
+.kuma-popover-placement-bottomLeft,
+.kuma-popover-placement-bottomRight {
+  margin-top: 7px;
+  padding-top: 11px;
+}
+.kuma-popover-placement-left,
+.kuma-popover-placement-leftTop,
+.kuma-popover-placement-leftBottom {
+  margin-left: -7px;
+  padding-right: 11px;
+}
+.kuma-popover-inner {
+  min-width: 320px;
+  max-width: 560px;
+  background-color: #fff;
+  border: 1px solid #bcc3cd;
+  border-radius: 3px;
+  box-shadow: 0 1px 4px 0 rgba(31, 56, 88, 0.15);
+  padding: 16px 16px 16px 24px;
+}
+.kuma-popover-inner .kuma-popover-content {
+  color: rgba(0, 0, 0, 0.4);
+}
+.kuma-popover-inner .kuma-popover-content > div:first-child {
+  padding: 0;
+}
+.kuma-popover-title {
+  padding: 0;
+  line-height: 32px;
+  height: 32px;
+  font-size: 16px;
+  border: none;
+  color: rgba(0, 0, 0, 0.8);
+}
+.kuma-popover-title + .kuma-popover-content > div:first-child {
+  padding: 5px 0;
+}
+.kuma-popover-arrow,
+.kuma-popover-arrow:after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.kuma-popover-arrow {
+  border-width: 8px;
+}
+.kuma-popover-arrow:after {
+  border-width: 7px;
+  content: "";
+}
+.kuma-popover-placement-top .kuma-popover-arrow,
+.kuma-popover-placement-topLeft .kuma-popover-arrow,
+.kuma-popover-placement-topRight .kuma-popover-arrow {
+  left: 50%;
+  border-bottom-width: 0;
+  border-top-color: #bcc3cd;
+  bottom: 4px;
+}
+.kuma-popover-placement-top .kuma-popover-arrow:after,
+.kuma-popover-placement-topLeft .kuma-popover-arrow:after,
+.kuma-popover-placement-topRight .kuma-popover-arrow:after {
+  content: " ";
+  bottom: 1px;
+  margin-left: -7px;
+  border-bottom-width: 0;
+  border-top-color: #fff;
+}
+.kuma-popover-placement-topLeft .kuma-popover-arrow {
+  left: 10px;
+}
+.kuma-popover-placement-topRight .kuma-popover-arrow {
+  right: 10px;
+  left: auto;
+}
+.kuma-popover-placement-top .kuma-popover-arrow {
+  margin-left: -8px;
+}
+.kuma-popover-placement-right .kuma-popover-arrow,
+.kuma-popover-placement-rightTop .kuma-popover-arrow,
+.kuma-popover-placement-rightBottom .kuma-popover-arrow {
+  top: 50%;
+  left: 4px;
+  border-left-width: 0;
+  border-right-color: #bcc3cd;
+}
+.kuma-popover-placement-right .kuma-popover-arrow:after,
+.kuma-popover-placement-rightTop .kuma-popover-arrow:after,
+.kuma-popover-placement-rightBottom .kuma-popover-arrow:after {
+  content: " ";
+  left: 1px;
+  bottom: -7px;
+  border-left-width: 0;
+  border-right-color: #fff;
+}
+.kuma-popover-placement-rightTop .kuma-popover-arrow {
+  top: 10px;
+}
+.kuma-popover-placement-rightBottom .kuma-popover-arrow {
+  top: auto;
+  bottom: 10px;
+}
+.kuma-popover-placement-right .kuma-popover-arrow {
+  margin-top: -8px;
+}
+.kuma-popover-placement-bottom .kuma-popover-arrow,
+.kuma-popover-placement-bottomLeft .kuma-popover-arrow,
+.kuma-popover-placement-bottomRight .kuma-popover-arrow {
+  left: 50%;
+  border-top-width: 0;
+  border-bottom-color: #bcc3cd;
+  top: 4px;
+}
+.kuma-popover-placement-bottom .kuma-popover-arrow:after,
+.kuma-popover-placement-bottomLeft .kuma-popover-arrow:after,
+.kuma-popover-placement-bottomRight .kuma-popover-arrow:after {
+  content: " ";
+  top: 1px;
+  margin-left: -7px;
+  border-top-width: 0;
+  border-bottom-color: #fff;
+}
+.kuma-popover-placement-bottomLeft .kuma-popover-arrow {
+  left: 10px;
+}
+.kuma-popover-placement-bottomRight .kuma-popover-arrow {
+  right: 10px;
+  left: auto;
+}
+.kuma-popover-placement-bottom .kuma-popover-arrow {
+  margin-left: -8px;
+}
+.kuma-popover-placement-left .kuma-popover-arrow,
+.kuma-popover-placement-leftTop .kuma-popover-arrow,
+.kuma-popover-placement-leftBottom .kuma-popover-arrow {
+  top: 50%;
+  right: 4px;
+  border-right-width: 0;
+  border-left-color: #bcc3cd;
+}
+.kuma-popover-placement-left .kuma-popover-arrow:after,
+.kuma-popover-placement-leftTop .kuma-popover-arrow:after,
+.kuma-popover-placement-leftBottom .kuma-popover-arrow:after {
+  content: " ";
+  right: 1px;
+  border-right-width: 0;
+  border-left-color: #fff;
+  bottom: -7px;
+}
+.kuma-popover-placement-leftTop .kuma-popover-arrow {
+  top: 10px;
+}
+.kuma-popover-placement-leftBottom .kuma-popover-arrow {
+  bottom: 10px;
+  top: auto;
+}
+.kuma-popover-placement-left .kuma-popover-arrow {
+  margin-top: -8px;
+}
+@keyframes popoverSlideInLeft {
+  0% {
+    transform: translate(10px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+@keyframes popoverSlideOutLeft {
+  0% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(10px, 0);
+    opacity: 0;
+  }
+}
+.kuma-popover-placement-right.popover-slide-enter,
+.kuma-popover-placement-rightTop.popover-slide-enter,
+.kuma-popover-placement-rightBottom.popover-slide-enter,
+.kuma-popover-placement-right.popover-slide-appear,
+.kuma-popover-placement-rightTop.popover-slide-appear,
+.kuma-popover-placement-rightBottom.popover-slide-appear {
+  opacity: 0;
+  transform: translate(10px, 0);
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+  animation-duration: .3s;
+}
+.kuma-popover-placement-right.popover-slide-enter-active,
+.kuma-popover-placement-rightTop.popover-slide-enter-active,
+.kuma-popover-placement-rightBottom.popover-slide-enter-active,
+.kuma-popover-placement-right.popover-slide-appear-active,
+.kuma-popover-placement-rightTop.popover-slide-appear-active,
+.kuma-popover-placement-rightBottom.popover-slide-appear-active {
+  animation-name: popoverSlideInLeft;
+}
+.kuma-popover-placement-right.popover-slide-leave,
+.kuma-popover-placement-rightTop.popover-slide-leave,
+.kuma-popover-placement-rightBottom.popover-slide-leave {
+  opacity: 1;
+  transform: translate(0, 0);
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+  animation-duration: .3s;
+}
+.kuma-popover-placement-right.popover-slide-leave-active,
+.kuma-popover-placement-rightTop.popover-slide-leave-active,
+.kuma-popover-placement-rightBottom.popover-slide-leave-active {
+  animation-name: popoverSlideOutLeft;
+}
+@keyframes popoverSlideInRight {
+  0% {
+    transform: translate(-10px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+@keyframes popoverSlideOutRight {
+  0% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-10px, 0);
+    opacity: 0;
+  }
+}
+.kuma-popover-placement-left.popover-slide-enter,
+.kuma-popover-placement-leftTop.popover-slide-enter,
+.kuma-popover-placement-leftBottom.popover-slide-enter,
+.kuma-popover-placement-left.popover-slide-appear,
+.kuma-popover-placement-leftTop.popover-slide-appear,
+.kuma-popover-placement-leftBottom.popover-slide-appear {
+  opacity: 0;
+  transform: translate(-10px, 0);
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+  animation-duration: .3s;
+}
+.kuma-popover-placement-left.popover-slide-enter-active,
+.kuma-popover-placement-leftTop.popover-slide-enter-active,
+.kuma-popover-placement-leftBottom.popover-slide-enter-active,
+.kuma-popover-placement-left.popover-slide-appear-active,
+.kuma-popover-placement-leftTop.popover-slide-appear-active,
+.kuma-popover-placement-leftBottom.popover-slide-appear-active {
+  animation-name: popoverSlideInRight;
+}
+.kuma-popover-placement-left.popover-slide-leave,
+.kuma-popover-placement-leftTop.popover-slide-leave,
+.kuma-popover-placement-leftBottom.popover-slide-leave {
+  opacity: 1;
+  transform: translate(0, 0);
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+  animation-duration: .3s;
+}
+.kuma-popover-placement-left.popover-slide-leave-active,
+.kuma-popover-placement-leftTop.popover-slide-leave-active,
+.kuma-popover-placement-leftBottom.popover-slide-leave-active {
+  animation-name: popoverSlideOutRight;
+}
+@keyframes popoverSlideInBottom {
+  0% {
+    transform: translate(0, -10px);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+@keyframes popoverSlideOutBottom {
+  0% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0, -10px);
+    opacity: 0;
+  }
+}
+.kuma-popover-placement-top.popover-slide-enter,
+.kuma-popover-placement-topLeft.popover-slide-enter,
+.kuma-popover-placement-topRight.popover-slide-enter,
+.kuma-popover-placement-top.popover-slide-appear,
+.kuma-popover-placement-topLeft.popover-slide-appear,
+.kuma-popover-placement-topRight.popover-slide-appear {
+  opacity: 0;
+  transform: translate(0, -10px);
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+  animation-duration: .3s;
+}
+.kuma-popover-placement-top.popover-slide-enter-active,
+.kuma-popover-placement-topLeft.popover-slide-enter-active,
+.kuma-popover-placement-topRight.popover-slide-enter-active,
+.kuma-popover-placement-top.popover-slide-appear-active,
+.kuma-popover-placement-topLeft.popover-slide-appear-active,
+.kuma-popover-placement-topRight.popover-slide-appear-active {
+  animation-name: popoverSlideInBottom;
+}
+.kuma-popover-placement-top.popover-slide-leave,
+.kuma-popover-placement-topLeft.popover-slide-leave,
+.kuma-popover-placement-topRight.popover-slide-leave {
+  opacity: 1;
+  transform: translate(0, 0);
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+  animation-duration: .3s;
+}
+.kuma-popover-placement-top.popover-slide-leave-active,
+.kuma-popover-placement-topLeft.popover-slide-leave-active,
+.kuma-popover-placement-topRight.popover-slide-leave-active {
+  animation-name: popoverSlideOutBottom;
+}
+@keyframes popoverSlideInTop {
+  0% {
+    transform: translate(0, 10px);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+@keyframes popoverSlideOutTop {
+  0% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0, 10px);
+    opacity: 0;
+  }
+}
+.kuma-popover-placement-bottom.popover-slide-enter,
+.kuma-popover-placement-bottomLeft.popover-slide-enter,
+.kuma-popover-placement-bottomRight.popover-slide-enter,
+.kuma-popover-placement-bottom.popover-slide-appear,
+.kuma-popover-placement-bottomLeft.popover-slide-appear,
+.kuma-popover-placement-bottomRight.popover-slide-appear {
+  opacity: 0;
+  transform: translate(0, 10px);
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+  animation-duration: .3s;
+}
+.kuma-popover-placement-bottom.popover-slide-enter-active,
+.kuma-popover-placement-bottomLeft.popover-slide-enter-active,
+.kuma-popover-placement-bottomRight.popover-slide-enter-active,
+.kuma-popover-placement-bottom.popover-slide-appear-active,
+.kuma-popover-placement-bottomLeft.popover-slide-appear-active,
+.kuma-popover-placement-bottomRight.popover-slide-appear-active {
+  animation-name: popoverSlideInTop;
+}
+.kuma-popover-placement-bottom.popover-slide-leave,
+.kuma-popover-placement-bottomLeft.popover-slide-leave,
+.kuma-popover-placement-bottomRight.popover-slide-leave {
+  opacity: 1;
+  transform: translate(0, 0);
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+  animation-duration: .3s;
+}
+.kuma-popover-placement-bottom.popover-slide-leave-active,
+.kuma-popover-placement-bottomLeft.popover-slide-leave-active,
+.kuma-popover-placement-bottomRight.popover-slide-leave-active {
+  animation-name: popoverSlideOutTop;
+}