{
+ const value = (parseFloat((val.split('%')[0])) / 100).toFixed(2);
+ utils.setPropertyValue(this.props, 'opacity', value);
+ }}
+ min={0}
+ max={100}
+ units={[{
+ type: '%',
+ list: true,
+ }]}
+ />
+ );
+ }
+}
+
+export default Opacity;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/effects/shadow.js b/packages/editor-setters/src/style-setter/lc-style-setter/effects/shadow.js
new file mode 100644
index 000000000..775d5c3c4
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/effects/shadow.js
@@ -0,0 +1,210 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import Field from '@ali/ve-field';
+import Icons from '@ali/ve-icons';
+import NumberControl from '@ali/ve-number-control';
+import ColorControl from '@ali/ve-color-control';
+
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+const generateShadow = (c = 'rgba(0,0,0,0)', x = '0', y = '0', b = '0', s = '0') => `${c} ${x} ${y} ${b} ${s}`;
+
+class Shadow extends Component {
+ static propTypes = {
+ prop: PropTypes.object,
+ className: PropTypes.string,
+ };
+
+ static displayName = 'StyleShadowSetter';
+
+ static transducer = utils.transducer;
+
+ componentWillMount() {
+
+ }
+
+ componentWillUnmount() {
+
+ }
+
+ render() {
+ const className = classNames('vs-style-shadow', this.props.className);
+ const shadow = utils.getPropertyValue(this.props, 'box-shadow').value;
+
+ let c = ''; // color
+ let x = ''; // x
+ let y = ''; // y
+ let b = ''; // blur
+ let s = ''; // spread
+
+ // @todo shadow parser 比较复杂考虑情况比较多，这里有明显的 Bug
+ // 由于时间问题，这里先留坑，满足可用性，后面有时间再来修复一下。
+ if (shadow !== 'none' && !!shadow && typeof shadow === 'string') {
+ const res = shadow.split(' ');
+ s = res.pop();
+ b = res.pop();
+ y = res.pop();
+ x = res.pop();
+ c = res.join(' ');
+ }
+
+ return (
+
+
+
+
+
+)}
+ >
+ {
+ utils.setPropertyValue(this.props, 'box-shadow', generateShadow(val, x, y, b, s));
+ }}
+ />
+
+
+
+
+ {
+ utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, val, y, b, s));
+ }}
+ min={0}
+ max={100}
+ units={[
+ {
+ type: 'px',
+ list: true,
+ },
+ {
+ type: '%',
+ list: true,
+ },
+ {
+ type: 'em',
+ list: true,
+ },
+ ]}
+ />
+
+
+ {
+ utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, x, val, b, s));
+ }}
+ min={0}
+ max={100}
+ units={[
+ {
+ type: 'px',
+ list: true,
+ },
+ {
+ type: '%',
+ list: true,
+ },
+ {
+ type: 'em',
+ list: true,
+ },
+ ]}
+ />
+
+
+
+
+
+
+)}
+ >
+ {
+ utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, x, y, val, s));
+ }}
+ min={0}
+ max={100}
+ units={[
+ {
+ type: 'px',
+ list: true,
+ },
+ {
+ type: '%',
+ list: true,
+ },
+ {
+ type: 'em',
+ list: true,
+ },
+ ]}
+ />
+
+
+
+
+)}
+ >
+ {
+ utils.setPropertyValue(this.props, 'box-shadow', generateShadow(c, x, y, b, val));
+ }}
+ min={0}
+ max={100}
+ units={[
+ {
+ type: 'px',
+ list: true,
+ },
+ {
+ type: '%',
+ list: true,
+ },
+ {
+ type: 'em',
+ list: true,
+ },
+ ]}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+StyleSetter.Layout = Layout;
+StyleSetter.Typography = Typography;
+StyleSetter.Background = Background;
+StyleSetter.Effects = Effects;
+StyleSetter.Border = Border;
+
+// StyleSetter.Svg = Svg;
+
+export default StyleSetter;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/display.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/display.js
new file mode 100644
index 000000000..464abdf23
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/display.js
@@ -0,0 +1,44 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import ChoiceControl from '@ali/ve-choice-control';
+import Icons from '@ali/ve-icons';
+import utils from '../utils';
+class Display extends Component {
+ static propTypes = {
+ prop: PropTypes.object,
+ className: PropTypes.string,
+ };
+
+ static displayName = 'StyleLayoutDisplaySetter';
+
+ render() {
+ const display = utils.getPropertyValue(this.props, 'display').value;
+ return (
+ ,
+ value: 'block',
+ }, {
+ title: ,
+ value: 'inline-block',
+ }, {
+ title: ,
+ value: 'inline',
+ }, {
+ title: ,
+ value: 'flex',
+ },
+ // {
+ // title: ,
+ // value: 'none',
+ // }
+ ]}
+ onChange={val => utils.setPropertyValue(this.props, 'display', val)}
+ />
+ );
+ }
+}
+
+export default Display;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/flex.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/flex.js
new file mode 100644
index 000000000..3e3e3addc
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/flex.js
@@ -0,0 +1,176 @@
+import React, { Component, PropTypes } from 'react';
+import ChoiceControl from '@ali/ve-choice-control';
+import Icons from '@ali/ve-icons';
+import Field from '@ali/ve-field';
+import utils from '../utils';
+class Flex extends Component {
+ static propTypes = {
+ prop: PropTypes.object,
+ };
+
+ static displayName = 'StyleLayoutFlexSetter';
+
+ render() {
+ // flex-direction
+ const direction = utils.getPropertyValue(this.props, 'flex-direction').value;
+ // align-items
+ const align = utils.getPropertyValue(this.props, 'align-items').value;
+ // justify-content
+ const justify = utils.getPropertyValue(this.props, 'justify-content').value;
+ /*
+ // flex-warp
+ const wrap = getPropertyValue(this.props, 'flex-wrap').value;
+ const isWrap = /^wrap/.test(wrap);
+ // align-content
+ const alignColumns = getPropertyValue(this.props, 'align-content').value;
+ */
+
+ const isVertical = /^column/.test(direction);
+ const v = isVertical ? '-v' : '';
+ const reverseClass = /reverse$/.test(direction)
+ ? `vs-style-reverse${isVertical ? '-v' : '-h'}` : null;
+
+ return (
+
+ ,
+ tip: 'Direction:row',
+ value: 'row',
+ }, {
+ title: ,
+ tip: 'Direction:column',
+ value: 'column',
+ }, {
+ title: ,
+ tip: 'Direction:row-reverse',
+ value: 'row-reverse',
+ }, {
+ title: (),
+ tip: 'Direction:column-reverse',
+ value: 'column-reverse',
+ }]}
+ onChange={(val) => utils.setPropertyValue(this.props, 'flex-direction', val)}
+ />
+
+ ),
+ tip: 'Align:flex-start',
+ value: 'flex-start',
+ }, {
+ title: (
+
+ ),
+ tip: 'Align:center',
+ value: 'center',
+ }, {
+ title: (
+
+ ),
+ tip: 'Align:flex-end',
+ value: 'flex-end',
+ }, {
+ title: (
+
+ ),
+ tip: 'Align:stretch',
+ value: 'stretch',
+ }, {
+ title: (
+
+ ),
+ tip: 'Align:baseline',
+ value: 'baseline',
+ }]}
+ onChange={(val) => utils.setPropertyValue(this.props, 'align-items', val)}
+ />
+
+ ),
+ tip: 'Justify:flex-start',
+ value: 'flex-start',
+ }, {
+ title: (
+
+ ),
+ tip: 'Justify:center',
+ value: 'center',
+ }, {
+ title: (
+
+ ),
+ tip: 'Justify:flex-end',
+ value: 'flex-end',
+ }, {
+ title: (
+
+ ),
+ tip: 'Justify:space-between',
+ value: 'space-between',
+ }, {
+ title: (
+
+ ),
+ tip: 'Justify:space-around',
+ value: 'space-around',
+ }]}
+ onChange={(val) => utils.setPropertyValue(this.props, 'justify-content', val)}
+ />
+
+ );
+ }
+}
+
+export default Flex;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/flexitem.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/flexitem.js
new file mode 100644
index 000000000..0a432e05f
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/flexitem.js
@@ -0,0 +1,10 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+
+class FlexItem extends Component {
+ render() {
+ return null;
+ }
+}
+
+export default FlexItem;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/height.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/height.js
new file mode 100644
index 000000000..26e0afa45
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/height.js
@@ -0,0 +1,19 @@
+import React, { Component, PropTypes } from 'react';
+import Size from './size';
+import utils from '../utils';
+class Height extends Component {
+ static propTypes = {
+ prop: PropTypes.object,
+ className: PropTypes.string,
+ };
+
+ static displayName = 'StyleLayoutWidthSetter';
+
+ static transducer = utils.transducer;
+
+ render() {
+ return ;
+ }
+}
+
+export default Height;
diff --git a/packages/editor-setters/src/style-setter/lc-style-setter/layout/index.js b/packages/editor-setters/src/style-setter/lc-style-setter/layout/index.js
new file mode 100644
index 000000000..4a32635ca
--- /dev/null
+++ b/packages/editor-setters/src/style-setter/lc-style-setter/layout/index.js
@@ -0,0 +1,107 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import Field from '@ali/ve-field';
+import Display from './display';
+import Flex from './flex';
+import FlexItem from './flexitem';
+import PaddingMargin from './padding+margin';
+import Width from './width';
+import Height from './height';
+import Position from './position'; // advanced
+import utils from '../utils';
+import $i18n from '../i18n/index';
+
+function inFlexBox(node) {
+ const nativeNode = node;
+ if (!nativeNode) return false;
+ const { parentNode } = nativeNode;
+ if (!parentNode) return false;
+ const display = window.getComputedStyle(parentNode).getPropertyValue('display');
+ return /flex/.test(display);
+}
+
+function isFlexBox(props) {
+ const display = utils.getPropertyValue(props, 'display').value;
+ return /flex$/.test(display);
+}
+
+class Layout extends Component {
+ static propTypes = {
+ prop: PropTypes.object,
+ className: PropTypes.string,
+ };
+
+ static displayName = 'StyleLayoutSetter';
+
+ componentWillMount() {
+
+ }
+
+ // shouldComponentUpdate() {
+ // return false;
+ // }
+
+ componentWillUnmount() {
+
+ }
+
+ render() {
+ const className = classNames('vs-style-layout', this.props.className);
+ const aFlexBox = isFlexBox(this.props);
+ const aFlexItem = inFlexBox(this.props.node);
+
+ return (
+
+
+
+
+ {aFlexBox && (
+
+
+
+ )}
+ {/* todo: aFlexItem &&
+
+ */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* todo:
+ {advanced &&
+
+ }
+ */}
+
+ {!this.state.editing && (
+
+ {display}
+
+ )}
+ {this.state.editing && (
+ this.setValue(e.target.value)}
+ onKeyDown={this.keyDown.bind(this)}
+ onBlur={this.exitEdit.bind(this)}
+ />
+ )}
+
+ );
+ }
+}
+
+function spliteMargin(all) {
+ if (!all) {
+ return {
+ top: null,
+ right: null,
+ bottom: null,
+ left: null,
+ };
+ }
+ let [top, right, bottom, left] = all.trim().split(/\s+/); // eslint-disable-line
+ if (utils.isEmptyCssValue(right)) {
+ right = top;
+ }
+ if (utils.isEmptyCssValue(bottom)) {
+ bottom = top;
+ }
+ if (utils.isEmptyCssValue(left)) {
+ left = right;
+ }
+ return {
+ top, right, bottom, left,
+ };
+}
+
+function compositeMargin(all, top, right, bottom, left) {
+ const ret = spliteMargin(all);
+
+ if (!utils.isEmptyCssValue(top)) {
+ ret.top = top;
+ }
+ if (!utils.isEmptyCssValue(right)) {
+ ret.right = right;
+ }
+ if (!utils.isEmptyCssValue(bottom)) {
+ ret.bottom = bottom;
+ }
+ if (!utils.isEmptyCssValue(left)) {
+ ret.left = left;
+ }
+
+ return ret;
+}
+
+function isFull(box) {
+ return (
+ !utils.isEmptyCssValue(box.top)
+ && !utils.isEmptyCssValue(box.right)
+ && !utils.isEmptyCssValue(box.bottom)
+ && !utils.isEmptyCssValue(box.left)
+ );
+}
+
+class LayoutBox extends Component {
+ static propTypes = {
+ prop: PropTypes.object,
+ className: PropTypes.string,
+ name: PropTypes.string,
+ negtive: PropTypes.bool,
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.pattern = this.props.negtive
+ ? /^(-?\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i
+ : /^(\d+(?:\.\d+)?)(px|rem|em|%|pt)?$|^auto$/i;
+ }
+
+ componentDidMount() {
+ this.shell.addEventListener('mousedown', (e) => {
+ // todo: dragging & interval add
+ const t = e.target;
+ if (t.dataset && t.dataset.handle) {
+ this.add(t.dataset.handle);
+ }
+ });
+ }
+
+ add(dir, factor = 1) {
+ if (!this.current || !this.inherit) return;
+ let value = utils.isEmptyCssValue(this.current[dir]) ? this.inherit[dir] : this.current[dir];
+
+ if (utils.isEmptyCssValue(value) || value.toLowerCase() === 'auto') {
+ value = this.compute(dir);
+ }
+
+ const m = this.pattern.exec(value);
+ if (!m[1]) return;
+ let n = parseFloat(m[1]) + factor;
+ if (!this.props.negtive && n < 0) {
+ n = 0;
+ }
+ this.change(this.current, dir, `${n}${m[2] || 'px'}`);
+ }
+
+ change(box, dir, val) {
+ const { name } = this.props;
+ box[dir] = val;
+ if (isFull(box)) {
+ utils.setPropertyValue(
+ this.props,
+ {
+ [name]: `${box.top} ${box.right} ${box.bottom} ${box.left}`,
+ [`${name}-top`]: null,
+ [`${name}-right`]: null,
+ [`${name}-bottom`]: null,
+ [`${name}-left`]: null,
+ },
+ );
+ } else {
+ utils.setPropertyValue(
+ this.props,
+ {
+ [name]: null,
+ [`${name}-top`]: box.top,
+ [`${name}-right`]: box.right,
+ [`${name}-bottom`]: box.bottom,
+ [`${name}-left`]: box.left,
+ },
+ );
+ }
+ }
+
+ compute(dir) {
+ const { name, node } = this.props;
+ // if (external) {
+ // return getComputePropertyValue(node, `${name}-${dir}`);
+ // }
+ return '0px';
+ }
+
+ render() {
+ const {
+ name, negtive,
+ } = this.props;
+
+ const all = utils.getPropertyValue(this.props, name);
+ const top = utils.getPropertyValue(this.props, `${name}-top`);
+ const right = utils.getPropertyValue(this.props, `${name}-right`);
+ const bottom = utils.getPropertyValue(this.props, `${name}-bottom`);
+ const left = utils.getPropertyValue(this.props, `${name}-left`);
+
+ const current = compositeMargin(
+ all.current,
+ top.current,
+ right.current,
+ bottom.current,
+ left.current,
+ );
+
+ const inherit = compositeMargin(
+ all.inherit,
+ top.inherit,
+ right.inherit,
+ bottom.inherit,
+ left.inherit,
+ );
+
+ this.current = current;
+ this.inherit = inherit;
+
+ return (
+ {
+ this.shell = ref;
+ }}
+ >
+
+
+
+
this.compute('top')}
+ negtive={negtive}
+ highlight={current.top != undefined}
+ onChange={val => this.change(current, 'top', val)}
+ />
+
+
+
+
+ this.compute('right')}
+ onChange={val => this.change(current, 'right', val)}
+ />
+
+
+ {name}
+
+
+ this.compute('bottom')}
+ onChange={val => this.change(current, 'bottom', val)}
+ />
+
+
+
+
+ this.compute('left')}
+ onChange={val => this.change(current, 'left', val)}
+ />
+