添加颜色预览控件

scss/components/_color.scss

@@ -0,0 +1,18 @@
+.#{$ns}ColorField {
+    display: inline-block;
+
+    &-previewIcon {
+        display: inline-block;
+        vertical-align: middle;
+        width: px2rem(16px);
+        height: px2rem(16px);
+        box-shadow: $boxShadowSm;
+        background-color: #ccc;
+    }
+
+    &-value {
+        display: inline-block;
+        margin-left: 10px;
+        vertical-align: middle;
+    }
+}

scss/themes/cxd.scss

@@ -502,6 +502,7 @@ $Card-actions-onChecked-onHover-bg: $white;
 @import "../components/button-group";
 @import "../components/dropdown";
 @import "../components/collapse";
+@import "../components/color";
 @import "../components/wizard";
 @import "../components/crud";
 @import "../components/table";

scss/themes/dark.scss

@@ -184,6 +184,7 @@ pre {
 @import '../components/button-group';
 @import '../components/dropdown';
 @import '../components/collapse';
+@import "../components/color";
 @import '../components/wizard';
 @import '../components/crud';
 @import '../components/table';

scss/themes/default.scss

@@ -49,6 +49,7 @@ $Form-input-borderColor: #cfdadd;
 @import "../components/button-group";
 @import "../components/dropdown";
 @import "../components/collapse";
+@import "../components/color";
 @import "../components/wizard";
 @import "../components/crud";
 @import "../components/table";
@@ -99,4 +100,4 @@ $Form-input-borderColor: #cfdadd;
 @import "../components/form/nested-select";
 @import "../components/form/icon-picker";
 
-@import "../utilities";
+@import "../utilities";

src/index.tsx

@@ -64,6 +64,7 @@ import './renderers/ButtonGroup';
 import './renderers/ButtonToolbar';
 import './renderers/DropDownButton';
 import './renderers/Collapse';
+import './renderers/Color';
 import './renderers/CRUD';
 import './renderers/Pagination';
 import './renderers/Cards';

src/renderers/Color.tsx

@@ -0,0 +1,38 @@
+/**
+ * @file 用来展示颜色块。
+ */
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {resolveVariableAndFilter} from '../utils/tpl-builtin';
+
+export interface ColorProps extends RendererProps {
+    className: string;
+    defaultColor: string;
+    showValue: boolean;
+}
+
+export class ColorField extends React.Component<ColorProps, object> {
+    static defaultProps = {
+        className: '',
+        defaultColor: '#ccc',
+        showValue: true
+    };
+
+    render() {
+        const {className, data, classnames: cx, name, value, defaultColor, showValue} = this.props;
+        const color = value || (name ? resolveVariableAndFilter(name, data, '| raw') : null);
+
+        return (
+            <div className={cx('ColorField', className)}>
+                <i className={cx('ColorField-previewIcon')} style={{backgroundColor: color || defaultColor}} />
+                {showValue ? <span className={cx('ColorField-value')}>{color}</span> : null}
+            </div>
+        );
+    }
+}
+
+@Renderer({
+    test: /(^|\/)color$/,
+    name: 'color'
+})
+export class ColorFieldRenderer extends ColorField {}