className 支持对象配置方式,支持表达式 (#1575)

docs/zh-CN/concepts/expression.md

@@ -8,7 +8,7 @@ icon:
 order: 13
 ---
 
-一般来说，属性名类似于`xxxOn`的配置项，都可以使用表达式进行配置，表达式具有如下的语法：
+一般来说，属性名类似于`xxxOn` 或者 `className` 的配置项，都可以使用表达式进行配置，表达式具有如下的语法：
 
 ```json
 {

docs/zh-CN/types/classname.md

@@ -0,0 +1,57 @@
+---
+title: ClassName
+description:
+type: 0
+menuName: ClassName
+icon:
+order: 40
+---
+
+amis 中大部分的组件都支持配置 className 和 xxxClassName，他可以用来配置组件 dom 上的 css 类名，可以结合帮助类 css 来定制一些样式。具体帮助类 css 请前往[这里](../../style/index#辅助-class)。
+
+配置方式有两种：
+
+1. 直接配置字符串如：`className: "text-danger"` 文字标红。
+2. 采用对象配置，这个用法主要是方便写表达式如：`className: {"text-danger": "this.status == 1"}` 表示当数据 status 状态是 1 时，文字飘红。
+
+```schema
+{
+
+    "type": "page",
+    "title": "引用",
+    "body": [
+        {
+            "type": "form",
+            "actions": [],
+            "debug": true,
+            "mode": "horizontal",
+            "controls": [
+                {
+                    "type": "radios",
+                    "name": "status",
+                    "value": "1",
+                    "label": "状态",
+                    "options": {
+                        "1": "离线",
+                        "2": "在线"
+                    }
+                },
+
+                {
+                    "type": "mapping",
+                    "name": "status",
+                    "label": "状态展示",
+                    "map": {
+                        "1": "离线",
+                        "2": "在线"
+                    },
+                    "inputClassName": {
+                        "text-muted": "this.status == 1",
+                        "text-success": "this.status == 2"
+                    }
+                }
+            ]
+        }
+    ]
+}
+```

examples/components/DocNavCN.ts

@@ -123,6 +123,15 @@ export default [
             makeMarkdownRenderer
           )
       },
+      {
+        label: 'ClassName',
+        path: '/zh-CN/docs/types/classname',
+        getComponent: () =>
+          // @ts-ignore
+          import('../../docs/zh-CN/types/classname.md').then(
+            makeMarkdownRenderer
+          )
+      },
       {
         label: 'API',
         path: '/zh-CN/docs/types/api',

src/Schema.ts

@@ -197,10 +197,28 @@ export type SchemaCollection =
  */
 export type SchemaExpression = string;
 
+/**
+ * css类名，配置字符串，或者对象。
+ *
+ *     className: "red"
+ *
+ * 用对象配置时意味着你能跟表达式一起搭配使用，如：
+ *
+ *     className: {
+ *         "red": "data.progress > 80",
+ *         "blue": "data.progress > 60"
+ *     }
+ */
+export type SchemaClassName =
+  | string
+  | {
+      [propName: string]: true | false | null | SchemaExpression;
+    };
+
 // /**
 //  * css类名，配置字符串，或者对象。
 //  *
-//  *     className: "red"
+//  *   className: "red"
 //  *
 //  * 用对象配置时意味着你能跟表达式一起搭配使用，如：
 //  *
@@ -209,16 +227,7 @@ export type SchemaExpression = string;
 //  *         "blue": "data.progress > 60"
 //  *     }
 //  */
-// export type SchemaClassName =
-//   | string
-//   | {
-//       [propName: string]: true | false | null | SchemaExpression;
-//     };
-
-/**
- * css类名，字符串格式
- */
-export type SchemaClassName = string; // todo 支持上面那种格式。
+// export type SchemaClassName = string;
 
 export interface SchemaApiObject {
   /**

src/factory.tsx

@@ -103,7 +103,7 @@ export interface RendererProps extends ThemeProps, LocaleProps {
     [propName: string]: any;
   };
   defaultData?: object;
-  className?: string;
+  className?: any;
   [propName: string]: any;
 }
 

src/renderers/Action.tsx

@@ -298,16 +298,16 @@ import {DrawerSchema, DrawerSchemaBase} from './Drawer';
 import {generateIcon} from '../utils/icon';
 
 export interface ActionProps
-  extends ButtonSchema,
+  extends Omit<ButtonSchema, 'className' | 'iconClassName'>,
     ThemeProps,
-    AjaxActionSchema,
-    UrlActionSchema,
-    LinkActionSchema,
-    DialogActionSchema,
-    DrawerActionSchema,
-    CopyActionSchema,
-    ReloadActionSchema,
-    OtherActionSchema {
+    Omit<AjaxActionSchema, 'type' | 'className' | 'iconClassName'>,
+    Omit<UrlActionSchema, 'type' | 'className' | 'iconClassName'>,
+    Omit<LinkActionSchema, 'type' | 'className' | 'iconClassName'>,
+    Omit<DialogActionSchema, 'type' | 'className' | 'iconClassName'>,
+    Omit<DrawerActionSchema, 'type' | 'className' | 'iconClassName'>,
+    Omit<CopyActionSchema, 'type' | 'className' | 'iconClassName'>,
+    Omit<ReloadActionSchema, 'type' | 'className' | 'iconClassName'>,
+    Omit<OtherActionSchema, 'type' | 'className' | 'iconClassName'> {
   actionType: any;
   onAction?: (
     e: React.MouseEvent<any> | void | null,

src/renderers/App.tsx

@@ -134,7 +134,9 @@ export interface AppSchema extends BaseSchema {
   className?: SchemaClassName;
 }
 
-export interface AppProps extends RendererProps, Omit<AppSchema, 'type'> {
+export interface AppProps
+  extends RendererProps,
+    Omit<AppSchema, 'type' | 'className'> {
   children?: JSX.Element | ((props?: any) => JSX.Element);
   store: IAppStore;
 }

src/renderers/Audio.tsx

@@ -48,7 +48,9 @@ export interface AudioSchema extends BaseSchema {
   controls?: Array<'rates' | 'play' | 'time' | 'process' | 'volume'>;
 }
 
-export interface AudioProps extends RendererProps, AudioSchema {}
+export interface AudioProps
+  extends RendererProps,
+    Omit<AudioSchema, 'className'> {}
 
 export interface AudioState {
   src?: string;

src/renderers/ButtonToolbar.tsx

@@ -18,7 +18,7 @@ export interface ButtonToolbarSchema extends BaseSchema {
 
 export interface ButtonToolbarProps
   extends RendererProps,
-    ButtonToolbarSchema {}
+    Omit<ButtonToolbarSchema, 'className'> {}
 
 export default class ButtonToolbar extends React.Component<
   ButtonToolbarProps,

src/renderers/CRUD.tsx

@@ -304,7 +304,9 @@ export type CRUDTableSchem = CRUDCommonSchema & {
  */
 export type CRUDSchema = CRUDCardsSchema | CRUDListSchema | CRUDTableSchem;
 
-export interface CRUDProps extends RendererProps, CRUDCommonSchema {
+export interface CRUDProps
+  extends RendererProps,
+    Omit<CRUDCommonSchema, 'type' | 'className'> {
   store: ICRUDStore;
   pickerMode?: boolean; // 选择模式，用做表单中的选择操作
 }

src/renderers/Card.tsx

@@ -151,7 +151,9 @@ export interface CardSchema extends BaseSchema {
   actions?: Array<ActionSchema>;
 }
 
-export interface CardProps extends RendererProps, CardSchema {
+export interface CardProps
+  extends RendererProps,
+    Omit<CardSchema, 'className'> {
   onCheck: (item: IItem) => void;
   itemIndex?: number;
   multiple?: boolean;

src/renderers/Cards.tsx

@@ -134,7 +134,9 @@ export interface Column {
   [propName: string]: any;
 }
 
-export interface GridProps extends RendererProps, CardsSchema {
+export interface GridProps
+  extends RendererProps,
+    Omit<CardsSchema, 'className' | 'itemClassName'> {
   store: IListStore;
   selectable?: boolean;
   selected?: Array<any>;

src/renderers/Carousel.tsx

@@ -88,7 +88,9 @@ const animationStyles: {
   [EXITING]: 'out'
 };
 
-export interface CarouselProps extends RendererProps, CarouselSchema {
+export interface CarouselProps
+  extends RendererProps,
+    Omit<CarouselSchema, 'className'> {
   value?: any;
 }
 

src/renderers/Chart.tsx

@@ -144,7 +144,9 @@ function recoverFunctionType(config: object) {
   });
 }
 
-export interface ChartProps extends RendererProps, Omit<ChartSchema, 'type'> {
+export interface ChartProps
+  extends RendererProps,
+    Omit<ChartSchema, 'type' | 'className'> {
   chartRef?: (echart: any) => void;
   onDataFilter?: (config: any, echarts: any) => any;
   onChartWillMount?: (echarts: any) => void | Promise<void>;

src/renderers/Collapse.tsx

@@ -76,7 +76,7 @@ export interface CollapseSchema extends BaseSchema {
 
 export interface CollapseProps
   extends RendererProps,
-    Omit<CollapseSchema, 'type'> {
+    Omit<CollapseSchema, 'type' | 'className'> {
   wrapperComponent?: any;
   headingComponent?: any;
 

src/renderers/Color.tsx

@@ -27,7 +27,9 @@ export interface ColorSchema extends BaseSchema {
   showValue?: boolean;
 }
 
-export interface ColorProps extends RendererProps, ColorSchema {}
+export interface ColorProps
+  extends RendererProps,
+    Omit<ColorSchema, 'type' | 'className'> {}
 
 export class ColorField extends React.Component<ColorProps, object> {
   static defaultProps = {

src/renderers/Container.tsx

@@ -31,7 +31,9 @@ export interface ContainerSchema extends BaseSchema {
   };
 }
 
-export interface ContainerProps extends RendererProps, ContainerSchema {
+export interface ContainerProps
+  extends RendererProps,
+    Omit<ContainerSchema, 'type' | 'className'> {
   children?: (props: any) => React.ReactNode;
 }
 

src/renderers/Date.tsx

@@ -45,7 +45,9 @@ export interface DateSchema extends BaseSchema {
   updateFrequency?: number;
 }
 
-export interface DateProps extends RendererProps, DateSchema {}
+export interface DateProps
+  extends RendererProps,
+    Omit<DateSchema, 'type' | 'className'> {}
 
 export interface DateState {
   random?: number;

src/renderers/Dialog.tsx

@@ -84,7 +84,9 @@ export interface DialogSchema extends BaseSchema {
 
 export type DialogSchemaBase = Omit<DialogSchema, 'type'>;
 
-export interface DialogProps extends RendererProps, DialogSchema {
+export interface DialogProps
+  extends RendererProps,
+    Omit<DialogSchema, 'className'> {
   onClose: () => void;
   onConfirm: (
     values: Array<object>,

src/renderers/Divider.tsx

@@ -12,7 +12,9 @@ export interface DividerSchema extends BaseSchema {
   [propName: string]: any;
 }
 
-export interface DividerProps extends RendererProps, DividerSchema {}
+export interface DividerProps
+  extends RendererProps,
+    Omit<DividerSchema, 'type' | 'className'> {}
 
 export default class Divider extends React.Component<DividerProps, object> {
   static defaultProps: Pick<DividerProps, 'className' | 'lineStyle'> = {

src/renderers/Drawer.tsx

@@ -101,7 +101,9 @@ export interface DrawerSchema extends BaseSchema {
 
 export type DrawerSchemaBase = Omit<DrawerSchema, 'type'>;
 
-export interface DrawerProps extends RendererProps, DrawerSchema {
+export interface DrawerProps
+  extends RendererProps,
+    Omit<DrawerSchema, 'className'> {
   onClose: () => void;
   onConfirm: (
     values: Array<object>,

src/renderers/DropDownButton.tsx

@@ -80,7 +80,7 @@ export interface DropdownButtonSchema extends BaseSchema {
 
 export interface DropDownButtonProps
   extends RendererProps,
-    Omit<DropdownButtonSchema, 'type'> {
+    Omit<DropdownButtonSchema, 'type' | 'className'> {
   disabledTip?: string | TooltipObject;
   /**
    * 按钮提示文字，hover focus 时显示

src/renderers/Form/Array.tsx

@@ -28,7 +28,12 @@ export interface ArrayControlSchema
   items: FormControlSchema;
 }
 
-export interface ArrayProps extends FormControlProps, ArrayControlSchema {
+export interface ArrayProps
+  extends FormControlProps,
+    Omit<
+      ArrayControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {
   store: IComboStore;
 }
 

src/renderers/Form/Button.tsx

@@ -10,7 +10,9 @@ import {ActionSchema} from '../Action';
  */
 export type ButtonControlSchema = ActionSchema & FormBaseControl;
 
-export interface ButtonProps extends FormControlProps, Omit<Button, 'size'> {}
+export interface ButtonProps
+  extends FormControlProps,
+    Omit<Button, 'size' | 'className'> {}
 
 export class ButtonControl extends React.Component<ButtonProps, any> {
   static defaultProps: Partial<ButtonProps> = {};

src/renderers/Form/ButtonGroup.tsx

@@ -24,7 +24,16 @@ export interface ButtonGroupControlSchema
 
 export interface ButtonGroupProps
   extends OptionsControlProps,
-    Omit<ButtonGroupControlSchema, 'size' | 'source'> {
+    Omit<
+      ButtonGroupControlSchema,
+      | 'size'
+      | 'source'
+      | 'type'
+      | 'className'
+      | 'descriptionClassName'
+      | 'inputClassName'
+      | 'btnClassName'
+    > {
   options: Array<Option>;
 }
 

src/renderers/Form/ButtonToolbar.tsx

@@ -16,7 +16,10 @@ export interface ButtonToolbarControlSchema
 
 export interface ButtonToolbarProps
   extends FormControlProps,
-    ButtonToolbarControlSchema {}
+    Omit<
+      ButtonToolbarControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {}
 
 export class ButtonToolbarControl extends React.Component<ButtonToolbarProps> {
   static defaultProps = {};

src/renderers/Form/ChainedSelect.tsx

@@ -21,7 +21,15 @@ export interface ChainedSelectControlSchema extends FormOptionsControl {
 
 export interface ChainedSelectProps
   extends OptionsControlProps,
-    Omit<ChainedSelectControlSchema, 'options' | 'source'> {}
+    Omit<
+      ChainedSelectControlSchema,
+      | 'options'
+      | 'type'
+      | 'source'
+      | 'className'
+      | 'descriptionClassName'
+      | 'inputClassName'
+    > {}
 
 export interface SelectState {
   stack: Array<{

src/renderers/Form/Checkbox.tsx

@@ -31,7 +31,10 @@ export interface CheckboxControlSchema extends FormBaseControl {
 
 export interface CheckboxProps
   extends FormControlProps,
-    CheckboxControlSchema {}
+    Omit<
+      CheckboxControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {}
 
 export default class CheckboxControl extends React.Component<
   CheckboxProps,

src/renderers/Form/Checkboxes.tsx

@@ -37,7 +37,14 @@ export interface CheckboxesControlSchema extends FormOptionsControl {
 
 export interface CheckboxesProps
   extends OptionsControlProps,
-    Omit<CheckboxesControlSchema, 'options'> {
+    Omit<
+      CheckboxesControlSchema,
+      | 'options'
+      | 'type'
+      | 'className'
+      | 'descriptionClassName'
+      | 'inputClassName'
+    > {
   placeholder?: any;
   itemClassName?: string;
   columnsCount?: number;

src/renderers/Form/City.tsx

@@ -53,7 +53,7 @@ export interface CityControlSchema extends FormBaseControl {
 }
 
 export interface CityPickerProps
-  extends Omit<CityControlSchema, 'type'>,
+  extends Omit<CityControlSchema, 'type' | 'className'>,
     LocaleProps,
     ThemeProps {
   value: any;

src/renderers/Form/Color.tsx

@@ -41,7 +41,10 @@ export interface ColorControlSchema extends FormBaseControl {
 
 export interface ColorProps
   extends FormControlProps,
-    Omit<ColorControlSchema, 'type'> {}
+    Omit<
+      ColorControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {}
 
 export interface ColorControlState {
   open: boolean;

src/renderers/Form/Combo.tsx

@@ -250,7 +250,12 @@ function pickVars(vars: any, fields: Array<string>) {
   }, {});
 }
 
-export interface ComboProps extends FormControlProps, ComboControlSchema {
+export interface ComboProps
+  extends FormControlProps,
+    Omit<
+      ComboControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {
   store: IComboStore;
   changeImmediately?: boolean;
 }

src/renderers/Form/ConditionBuilder.tsx

@@ -33,7 +33,10 @@ export interface ConditionBuilderControlSchema extends FormBaseControl {
 
 export interface ConditionBuilderProps
   extends FormControlProps,
-    ConditionBuilderControlSchema {}
+    Omit<
+      ConditionBuilderControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {}
 
 export default class ConditionBuilderControl extends React.PureComponent<ConditionBuilderProps> {
   render() {

src/renderers/Form/DateRange.tsx

@@ -73,7 +73,10 @@ export interface DateRangeControlSchema extends FormBaseControl {
 
 export interface DateRangeProps
   extends FormControlProps,
-    Omit<DateRangeControlSchema, 'type'> {
+    Omit<
+      DateRangeControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {
   delimiter: string;
   format: string;
   joinValues: boolean;

src/renderers/Form/DiffEditor.tsx

@@ -41,7 +41,10 @@ function loadComponent(): Promise<any> {
 
 export interface DiffEditorProps
   extends FormControlProps,
-    Omit<DiffControlSchema, 'type'> {}
+    Omit<
+      DiffControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {}
 
 function normalizeValue(value: any, language?: string) {
   if (value && typeof value !== 'string') {

src/renderers/Form/FieldSet.tsx

@@ -65,7 +65,10 @@ export interface FieldSetControlSchema
 
 export interface FieldSetProps
   extends RendererProps,
-    Omit<FieldSetControlSchema, 'type'> {}
+    Omit<
+      FieldSetControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {}
 
 export default class FieldSetControl extends React.Component<
   FieldSetProps,

src/renderers/Form/File.tsx

@@ -190,7 +190,10 @@ export interface FileControlSchema extends FormBaseControl {
 
 export interface FileProps
   extends FormControlProps,
-    Omit<FileControlSchema, 'type'> {
+    Omit<
+      FileControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {
   stateTextMap: {
     init: string;
     pending: string;

src/renderers/Form/Formula.tsx

@@ -46,7 +46,10 @@ export interface FormulaControlSchema extends FormBaseControl {
 
 export interface FormulaProps
   extends FormControlProps,
-    Omit<FormulaControlSchema, 'type'> {}
+    Omit<
+      FormulaControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {}
 
 export default class FormulaControl extends React.Component<
   FormControlProps,

src/renderers/Form/Grid.tsx

@@ -51,7 +51,10 @@ export interface GridControlSchema
 
 export interface GridProps
   extends FormControlProps,
-    Omit<GridControlSchema, 'type'> {
+    Omit<
+      GridControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {
   store: IIRendererStore;
 }
 const defaultHorizontal = {

src/renderers/Form/Group.tsx

@@ -53,7 +53,7 @@ export interface GroupControlSchema extends FormBaseControl {
 
 export interface InputGroupProps
   extends RendererProps,
-    Omit<GroupControlSchema, 'type'> {}
+    Omit<GroupControlSchema, 'type' | 'className'> {}
 
 @Renderer({
   test: /(^|\/)form(?:\/.+)?\/control\/(?:\d+\/)?group$/,

src/renderers/Form/HBox.tsx

@@ -41,7 +41,12 @@ export interface HBoxControlSchema
   >;
 }
 
-interface HBoxProps extends FormControlProps, HBoxControlSchema {
+interface HBoxProps
+  extends FormControlProps,
+    Omit<
+      HBoxControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {
   store: IIRendererStore;
 }
 

src/renderers/Form/Image.tsx

@@ -228,7 +228,10 @@ let preventEvent = (e: any) => e.stopPropagation();
 
 export interface ImageProps
   extends FormControlProps,
-    Omit<ImageControlSchema, 'type'> {
+    Omit<
+      ImageControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {
   onImageEnlarge?: (
     info: Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'> & {
       index?: number;

src/renderers/Form/List.tsx

@@ -35,7 +35,14 @@ export interface ListControlSchema extends FormOptionsControl {
 
 export interface ListProps
   extends OptionsControlProps,
-    Omit<ListControlSchema, 'type' | 'options'> {}
+    Omit<
+      ListControlSchema,
+      | 'type'
+      | 'options'
+      | 'className'
+      | 'descriptionClassName'
+      | 'inputClassName'
+    > {}
 
 export default class ListControl extends React.Component<ListProps, any> {
   static propsList = ['itemSchema', 'value', 'renderFormItems'];

src/renderers/Form/Location.tsx

@@ -23,8 +23,11 @@ export interface LocationControlSchema extends FormBaseControl {
 
 export interface LocationControlProps
   extends FormControlProps,
-    ThemeProps,
-    Omit<LocationControlSchema, 'type'> {
+    Omit<ThemeProps, 'className'>,
+    Omit<
+      LocationControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {
   value: any;
   onChange: (value: any) => void;
   vendor: 'baidu' | 'gaode' | 'tenxun';

src/renderers/Form/MonthRange.tsx

@@ -74,7 +74,10 @@ export interface MonthRangeControlSchema extends FormBaseControl {
 
 export interface MonthRangeProps
   extends FormControlProps,
-    Omit<MonthRangeControlSchema, 'type'> {
+    Omit<
+      MonthRangeControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {
   delimiter: string;
   format: string;
   joinValues: boolean;

src/renderers/Form/Options.tsx

@@ -184,7 +184,10 @@ export interface OptionsConfig extends OptionsBasicConfig {
 // 下发给注册进来的组件的属性。
 export interface OptionsControlProps
   extends FormControlProps,
-    Omit<FormOptionsControl, 'type'> {
+    Omit<
+      FormOptionsControl,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {
   options: Array<Option>;
   onToggle: (
     option: Option,
@@ -207,7 +210,9 @@ export interface OptionsControlProps
 }
 
 // 自己接收的属性。
-export interface OptionsProps extends FormControlProps, OptionProps {
+export interface OptionsProps
+  extends FormControlProps,
+    Omit<OptionProps, 'className'> {
   source?: Api;
   deferApi?: Api;
   creatable?: boolean;

src/renderers/Form/Table.tsx

@@ -136,7 +136,10 @@ export interface TableControlSchema extends FormBaseControl, TableSchema {
 
 export interface TableProps
   extends FormControlProps,
-    Omit<TableControlSchema, 'type'> {}
+    Omit<
+      TableControlSchema,
+      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
+    > {}
 
 export interface TableState {
   columns: Array<any>;

src/renderers/Form/TabsTransfer.tsx

@@ -45,7 +45,14 @@ export interface TabsTransferControlSchema extends FormOptionsControl {
 
 export interface TabsTransferProps
   extends OptionsControlProps,
-    Omit<TabsTransferControlSchema, 'type' | 'options'> {}
+    Omit<
+      TabsTransferControlSchema,
+      | 'type'
+      | 'options'
+      | 'inputClassName'
+      | 'className'
+      | 'descriptionClassName'
+    > {}
 
 @OptionsControl({
   type: 'tabs-transfer'

src/renderers/Form/Transfer.tsx

@@ -80,7 +80,14 @@ export interface TransferControlSchema extends FormOptionsControl {
 
 export interface BaseTransferProps
   extends OptionsControlProps,
-    Omit<TransferControlSchema, 'type' | 'options'> {}
+    Omit<
+      TransferControlSchema,
+      | 'type'
+      | 'options'
+      | 'className'
+      | 'descriptionClassName'
+      | 'inputClassName'
+    > {}
 
 export class BaseTransferRenderer<
   T extends OptionsControlProps = BaseTransferProps

src/renderers/Form/Tree.tsx

@@ -58,7 +58,14 @@ export interface TreeControlSchema extends FormOptionsControl {
 
 export interface TreeProps
   extends OptionsControlProps,
-    Omit<TreeControlSchema, 'type' | 'options'> {}
+    Omit<
+      TreeControlSchema,
+      | 'type'
+      | 'options'
+      | 'className'
+      | 'inputClassName'
+      | 'descriptionClassName'
+    > {}
 
 export default class TreeControl extends React.Component<TreeProps> {
   static defaultProps: Partial<TreeProps> = {

src/renderers/Form/index.tsx

@@ -298,7 +298,9 @@ export interface FormGroupArray extends Array<FormGroupNode> {}
 
 export type FormHorizontal = FormSchemaHorizontal;
 
-export interface FormProps extends RendererProps, Omit<FormSchema, 'mode'> {
+export interface FormProps
+  extends RendererProps,
+    Omit<FormSchema, 'mode' | 'className'> {
   data: any;
   store: IFormStore;
   wrapperComponent: React.ElementType;

src/renderers/Grid.tsx

@@ -128,7 +128,9 @@ export interface GridSchema extends BaseSchema {
   columns: Array<GridColumn>;
 }
 
-export interface GridProps extends RendererProps, GridSchema {
+export interface GridProps
+  extends RendererProps,
+    Omit<GridSchema, 'type' | 'className' | 'columnClassName'> {
   itemRender?: (
     item: any,
     key: number,
@@ -190,7 +192,7 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
         key={key}
         className={cx(
           copProps2Class(colProps),
-          fromBsClass((column as GridColumn).columnClassName!)
+          fromBsClass((column as any).columnClassName!)
         )}
       >
         {Array.isArray(column) ? (

src/renderers/Grid2D.tsx

@@ -94,7 +94,9 @@ export interface Grid2DSchema extends BaseSchema {
   grids: Array<Grid>;
 }
 
-export interface Grid2DProps extends RendererProps, Grid2DSchema {
+export interface Grid2DProps
+  extends RendererProps,
+    Omit<Grid2DSchema, 'type' | 'className'> {
   itemRender?: (
     item: any,
     key: number,

src/renderers/IFrame.tsx

@@ -30,7 +30,9 @@ export interface IFrameSchema extends BaseSchema {
   height?: number | string;
 }
 
-export interface IFrameProps extends RendererProps, IFrameSchema {}
+export interface IFrameProps
+  extends RendererProps,
+    Omit<IFrameSchema, 'type' | 'className'> {}
 
 export default class IFrame extends React.Component<IFrameProps, object> {
   IFrameRef: React.RefObject<HTMLIFrameElement> = React.createRef();

src/renderers/Icon.tsx

@@ -17,7 +17,9 @@ export interface IconSchema extends BaseSchema {
   vendor?: 'iconfont' | 'fa';
 }
 
-export interface IconProps extends RendererProps, IconSchema {}
+export interface IconProps
+  extends RendererProps,
+    Omit<IconSchema, 'type' | 'className'> {}
 
 export class Icon extends React.Component<IconProps, object> {
   static defaultProps: Partial<IconProps> = {

src/renderers/Image.tsx

@@ -76,7 +76,7 @@ export interface ImageSchema extends BaseSchema {
 export interface ImageThumbProps
   extends LocaleProps,
     ThemeProps,
-    Omit<ImageSchema, 'type'> {
+    Omit<ImageSchema, 'type' | 'className'> {
   onEnlarge?: (info: ImageThumbProps) => void;
   index?: number;
   onLoad?: React.EventHandler<any>;

src/renderers/Images.tsx

@@ -85,7 +85,9 @@ export interface ImagesSchema extends BaseSchema {
   listClassName?: SchemaClassName;
 }
 
-export interface ImagesProps extends RendererProps, Omit<ImagesSchema, 'type'> {
+export interface ImagesProps
+  extends RendererProps,
+    Omit<ImagesSchema, 'type' | 'className'> {
   delimiter: string;
 
   onEnlarge?: (

src/renderers/Link.tsx

@@ -24,7 +24,9 @@ export interface LinkSchema extends BaseSchema {
   body?: SchemaTpl;
 }
 
-export interface LinkProps extends RendererProps, LinkSchema {}
+export interface LinkProps
+  extends RendererProps,
+    Omit<LinkSchema, 'type' | 'className'> {}
 
 export class LinkField extends React.Component<LinkProps, object> {
   static defaultProps = {

src/renderers/List.tsx

@@ -217,7 +217,9 @@ export interface Column {
   [propName: string]: any;
 }
 
-export interface ListProps extends RendererProps, ListSchema {
+export interface ListProps
+  extends RendererProps,
+    Omit<ListSchema, 'type' | 'className'> {
   store: IListStore;
   selectable?: boolean;
   selected?: Array<any>;
@@ -997,7 +999,9 @@ export class ListRenderer extends List {
   onCheck: (item: IItem) => void;
 }
 
-export interface ListItemProps extends RendererProps, ListItemSchema {
+export interface ListItemProps
+  extends RendererProps,
+    Omit<ListItemSchema, 'type' | 'className'> {
   hideCheckToggler?: boolean;
   item: IItem;
   itemIndex?: number;

src/renderers/Mapping.tsx

@@ -34,7 +34,9 @@ export interface MappingSchema extends BaseSchema {
   placeholder?: string;
 }
 
-export interface MappingProps extends RendererProps, MappingSchema {}
+export interface MappingProps
+  extends RendererProps,
+    Omit<MappingSchema, 'type' | 'className'> {}
 
 export class MappingField extends React.Component<MappingProps, object> {
   static defaultProps: Partial<MappingProps> = {

src/renderers/Nav.tsx

@@ -75,7 +75,10 @@ export interface NavigationState {
   error?: string;
 }
 
-export interface NavigationProps extends RendererProps, ThemeProps, NavSchema {
+export interface NavigationProps
+  extends RendererProps,
+    Omit<ThemeProps, 'className'>,
+    Omit<NavSchema, 'type' | 'className'> {
   onSelect?: (item: Link) => any;
 }
 

src/renderers/Operation.tsx

@@ -26,7 +26,9 @@ export interface OperationSchema extends BaseSchema {
   buttons: Array<ActionSchema>;
 }
 
-export interface OperationProps extends RendererProps, OperationSchema {}
+export interface OperationProps
+  extends RendererProps,
+    Omit<OperationSchema, 'type' | 'className'> {}
 
 export class OperationField extends React.Component<OperationProps, object> {
   static propsList: Array<string> = ['buttons', 'label'];

src/renderers/Page.tsx

@@ -146,7 +146,9 @@ export interface PageSchema extends BaseSchema {
   cssVars?: any;
 }
 
-export interface PageProps extends RendererProps, PageSchema {
+export interface PageProps
+  extends RendererProps,
+    Omit<PageSchema, 'type' | 'className'> {
   data: any;
   store: IServiceStore;
   location?: Location;

src/renderers/Pagination.tsx

@@ -27,7 +27,9 @@ export interface PaginationSchema extends BaseSchema {
   maxButtons?: number;
 }
 
-export interface PaginationProps extends RendererProps, PaginationSchema {
+export interface PaginationProps
+  extends RendererProps,
+    Omit<PaginationSchema, 'type' | 'className'> {
   activePage: number;
   lastPage: number;
   hasNext: boolean;

src/renderers/PaginationWrapper.tsx

@@ -45,7 +45,7 @@ export interface PaginationWrapperSchema extends BaseSchema {
 
 export interface PaginationWrapProps
   extends RendererProps,
-    PaginationWrapperSchema {
+    Omit<PaginationWrapperSchema, 'type' | 'className'> {
   inputName: string;
   outputName: string;
   perPage: number;

src/renderers/Panel.tsx

@@ -78,7 +78,12 @@ export interface PanelSchema extends BaseSchema {
   affixFooter?: boolean | 'always';
 }
 
-export interface PanelProps extends RendererProps, PanelSchema {}
+export interface PanelProps
+  extends RendererProps,
+    Omit<
+      PanelSchema,
+      'type' | 'className' | 'panelClassName' | 'bodyClassName'
+    > {}
 
 export default class Panel extends React.Component<PanelProps> {
   static propsList: Array<string> = [

src/renderers/Plain.tsx

@@ -30,7 +30,9 @@ export interface PlainSchema extends BaseSchema {
    */
   placeholder?: string;
 }
-export interface PlainProps extends RendererProps, PlainSchema {
+export interface PlainProps
+  extends RendererProps,
+    Omit<PlainSchema, 'type' | 'className'> {
   wrapperComponent?: any;
 }
 

src/renderers/Progress.tsx

@@ -54,7 +54,9 @@ export interface ProgressSchema extends BaseSchema {
   animate?: boolean;
 }
 
-export interface ProgressProps extends RendererProps, ProgressSchema {
+export interface ProgressProps
+  extends RendererProps,
+    Omit<ProgressSchema, 'type' | 'className'> {
   map: Array<SchemaClassName>;
 }
 

src/renderers/QRCode.tsx

@@ -51,7 +51,9 @@ export interface QRCodeSchema extends BaseSchema {
   placeholder?: string;
 }
 
-export interface QRCodeProps extends FormControlProps, QRCodeSchema {}
+export interface QRCodeProps
+  extends FormControlProps,
+    Omit<QRCodeSchema, 'type' | 'className'> {}
 
 export default class QRCode extends React.Component<QRCodeProps, any> {
   static defaultProps: Partial<QRCodeProps> = {

src/renderers/Remark.tsx

@@ -77,7 +77,9 @@ export function filterContents(
   return tooltip;
 }
 
-export interface RemarkProps extends RendererProps, RemarkSchema {
+export interface RemarkProps
+  extends RendererProps,
+    Omit<RemarkSchema, 'type' | 'className'> {
   icon: string;
   trigger: Array<'hover' | 'click' | 'focus'>;
 }

src/renderers/SearchBox.tsx

@@ -34,7 +34,9 @@ export interface SearchBoxSchema extends BaseSchema {
   searchImediately?: boolean;
 }
 
-interface SearchBoxProps extends RendererProps, SearchBoxSchema {
+interface SearchBoxProps
+  extends RendererProps,
+    Omit<SearchBoxSchema, 'type' | 'className'> {
   name: string;
   onQuery?: (query: {[propName: string]: string}) => void;
 }

src/renderers/Service.tsx

@@ -97,7 +97,9 @@ export interface ServiceSchema extends BaseSchema {
   name?: SchemaName;
 }
 
-export interface ServiceProps extends RendererProps, ServiceSchema {
+export interface ServiceProps
+  extends RendererProps,
+    Omit<ServiceSchema, 'type' | 'className'> {
   store: IServiceStore;
   messages: SchemaMessage;
 }

src/renderers/SparkLine.tsx

@@ -71,7 +71,9 @@ export interface SparkLineSchema extends BaseSchema {
   >;
 }
 
-interface SparkLineRendProps extends RendererProps, SparkLineSchema {}
+interface SparkLineRendProps
+  extends RendererProps,
+    Omit<SparkLineSchema, 'type' | 'className'> {}
 
 @Renderer({
   test: /(^|\/)sparkline$/,

src/renderers/Status.tsx

@@ -55,7 +55,9 @@ export interface StatusSchema extends BaseSchema {
   };
 }
 
-export interface StatusProps extends RendererProps, StatusSchema {}
+export interface StatusProps
+  extends RendererProps,
+    Omit<StatusSchema, 'className'> {}
 
 export class StatusField extends React.Component<StatusProps, object> {
   static defaultProps: Partial<StatusProps> = {

src/renderers/Switch.tsx

@@ -46,7 +46,9 @@ export interface SwitchSchema extends BaseSchema {
   saveImmediately?: boolean;
 }
 
-export interface SwitchProps extends RendererProps, SwitchSchema {}
+export interface SwitchProps
+  extends RendererProps,
+    Omit<SwitchSchema, 'className'> {}
 
 export class SwitchField extends React.Component<SwitchProps, object> {
   static defaultProps: Partial<SwitchProps> = {

src/renderers/Table/index.tsx

@@ -239,7 +239,7 @@ export interface TableProps extends RendererProps {
   headerClassName?: string;
   footerClassName?: string;
   store: ITableStore;
-  columns?: Array<TableColumn>;
+  columns?: Array<any>;
   headingClassName?: string;
   toolbarClassName?: string;
   headerToolbarClassName?: string;

src/renderers/Tabs.tsx

@@ -120,7 +120,9 @@ export interface TabsSchema extends BaseSchema {
   toolbar?: ActionSchema;
 }
 
-export interface TabsProps extends RendererProps, TabsSchema {
+export interface TabsProps
+  extends RendererProps,
+    Omit<TabsSchema, 'className' | 'contentClassName'> {
   activeKey?: string | number;
   location?: any;
   tabRender?: (tab: TabSchema, props: TabsProps, index: number) => JSX.Element;

src/renderers/Tasks.tsx

@@ -138,7 +138,9 @@ export interface TasksSchema extends BaseSchema {
   errorStatusCode?: number;
 }
 
-export interface TaskProps extends RendererProps, TasksSchema {}
+export interface TaskProps
+  extends RendererProps,
+    Omit<TasksSchema, 'className'> {}
 
 export interface TaskItem {
   label?: string;

src/renderers/VBox.tsx

@@ -22,7 +22,9 @@ export interface VBoxSchema extends BaseSchema {
   rows?: Array<HboxRow>;
 }
 
-export interface HBoxProps extends RendererProps, VBoxSchema {}
+export interface HBoxProps
+  extends RendererProps,
+    Omit<VBoxSchema, 'className'> {}
 
 export default class VBox extends React.Component<HBoxProps, object> {
   static propsList: Array<string> = ['rows'];

src/renderers/Video.tsx

@@ -381,7 +381,9 @@ export class HlsSource extends React.Component<HlsSourceProps, any> {
   }
 }
 
-export interface VideoProps extends RendererProps, VideoSchema {
+export interface VideoProps
+  extends RendererProps,
+    Omit<VideoSchema, 'className'> {
   columnsCount: number;
 }
 

src/renderers/Wizard.tsx

@@ -159,7 +159,9 @@ export interface WizardSchema extends BaseSchema {
   steps: Array<WizardStepSchema>;
 }
 
-export interface WizardProps extends RendererProps, WizardSchema {
+export interface WizardProps
+  extends RendererProps,
+    Omit<WizardSchema, 'className'> {
   store: IServiceStore;
   onFinished: (values: object, action: any) => any;
 }

src/renderers/Wrapper.tsx

@@ -21,7 +21,9 @@ export interface WrapperSchema extends BaseSchema {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'none';
 }
 
-export interface WrapperProps extends RendererProps, WrapperSchema {
+export interface WrapperProps
+  extends RendererProps,
+    Omit<WrapperSchema, 'className'> {
   children?: JSX.Element | ((props?: any) => JSX.Element);
 }
 

src/utils/filter-schema.ts

@@ -1,7 +1,9 @@
 import {evalExpression, filter} from './tpl';
 
 import {Schema, PlainObject} from '../types';
-import {injectPropsToObject} from './helper';
+import {injectPropsToObject, mapObject} from './helper';
+import isPlainObject from 'lodash/isPlainObject';
+import cx from 'classnames';
 
 /**
  * 处理 Props 数据，所有带 On 结束的做一次
@@ -27,13 +29,13 @@ export default function getExprProperties(
       return;
     }
 
-    let parts = /^(.*)(On|Expr)$/.exec(key);
+    let parts = /^(.*)(On|Expr|(?:c|C)lassName)(Raw)?$/.exec(key);
     let value: any = schema[key];
 
     if (
       value &&
       typeof value === 'string' &&
-      parts &&
+      parts?.[1] &&
       (parts[2] === 'On' || parts[2] === 'Expr')
     ) {
       key = parts[1];
@@ -57,6 +59,18 @@ export default function getExprProperties(
       }
 
       exprProps[key] = value;
+    } else if (
+      value &&
+      isPlainObject(value) &&
+      (parts?.[2] === 'className' || parts?.[2] === 'ClassName')
+    ) {
+      key = parts[1] + parts[2];
+      exprProps[`${key}Raw`] = value;
+      exprProps[key] = cx(
+        mapObject(value, (value: any) =>
+          typeof value === 'string' ? evalExpression(value, data) : value
+        )
+      );
     }
   });