feat：condition-builder 支持 fieldClassName 控制输入项宽度 (#1786)

2024-11-30 10:59:42 +08:00 · 2021-04-12 19:52:10 +08:00 · 2021-04-12 19:52:10 +08:00 · 4bf476bcef
commit 4bf476bcef
parent a6450e081d
10 changed files with 80 additions and 3 deletions
--- a/docs/zh-CN/components/form/condition-builder.md
+++ b/docs/zh-CN/components/form/condition-builder.md
@ -375,3 +375,10 @@ type Value = ValueGroup;
    ]
 }
 ```
+
+## 属性表
+
+| 属性名         | 类型     | 默认值 | 说明           |
+| -------------- | -------- | ------ | -------------- |
+| className      | `string` |        | 外层 dom 类名  |
+| fieldClassName | `string` |        | 输入字段的类名 |
--- a/docs/zh-CN/components/form/static.md
+++ b/docs/zh-CN/components/form/static.md
@ -250,3 +250,26 @@ order: 52
 ```

 想要调整展示组件的配置，请查阅相应组件的文档。
+
+## 快速编辑
+
+通过 `quickEdit` 开启快速编辑功能，比如
+
+```schema: scope="body"
+{
+    "type": "form",
+    "controls": [
+        {
+            "name": "static",
+            "type": "static",
+            "label": "静态展示",
+            "value": "aaa",
+            "quickEdit": {
+                "type": "number"
+            }
+        }
+    ]
+}
+```
+
+其他配置项参考 [快速编辑](../crud#快速编辑)
--- a/docs/zh-CN/components/tpl.md
+++ b/docs/zh-CN/components/tpl.md
@ -27,6 +27,29 @@ order: 70

 更多模板相关配置请看[模板文档](../../docs/concepts/template)

+## 快速编辑
+
+通过 `quickEdit` 开启快速编辑功能，比如
+
+```schema: scope="body"
+{
+    "type": "form",
+    "controls": [
+        {
+            "name": "static",
+            "type": "static",
+            "label": "静态展示",
+            "value": "123",
+            "quickEdit": {
+                "type": "number"
+            }
+        }
+    ]
+}
+```
+
+其他配置项参考 [快速编辑](crud#快速编辑)
+
 ## 属性表

 | 属性名    | 类型                                 | 默认值  | 说明            |
--- a/src/components/condition-builder/Expression.tsx
+++ b/src/components/condition-builder/Expression.tsx
@ -41,6 +41,7 @@ export interface ExpressionProps extends ThemeProps {
  op?: OperatorType;
  config: Config;
  disabled?: boolean;
+  fieldClassName?: string;
 }

 const fieldMap = {
@ -126,6 +127,7 @@ export class Expression extends React.Component<ExpressionProps> {
      fields,
      op,
      classnames: cx,
+      fieldClassName,
      config,
      data,
      disabled
@ -166,6 +168,7 @@ export class Expression extends React.Component<ExpressionProps> {
          <ConditionField
            value={(value as any)?.field}
            onChange={this.handleFieldChange}
+            fieldClassName={fieldClassName}
            disabled={disabled}
            options={
              valueField
@ -185,6 +188,7 @@ export class Expression extends React.Component<ExpressionProps> {
            config={config}
            value={value as ExpressionFunc}
            onChange={this.handleFuncChange}
+            fieldClassName={fieldClassName}
            funcs={funcs}
            fields={fields}
            allowedTypes={allowedTypes}
--- a/src/components/condition-builder/Field.tsx
+++ b/src/components/condition-builder/Field.tsx
@ -11,6 +11,7 @@ export interface ConditionFieldProps extends ThemeProps {
  value: any;
  onChange: (value: any) => void;
  disabled?: boolean;
+  fieldClassName?: string;
 }

 const option2value = (item: any) => item.name;
@ -20,6 +21,7 @@ export function ConditionField({
  onChange,
  value,
  classnames: cx,
+  fieldClassName,
  disabled
 }: ConditionFieldProps) {
  return (
@ -38,7 +40,11 @@ export function ConditionField({
      {({onClick, ref, isOpened}) => (
        <div className={cx('CBGroup-field')}>
          <ResultBox
-            className={cx('CBGroup-fieldInput', isOpened ? 'is-active' : '')}
+            className={cx(
+              'CBGroup-fieldInput',
+              fieldClassName,
+              isOpened ? 'is-active' : ''
+            )}
            ref={ref}
            allowInput={false}
            result={
--- a/src/components/condition-builder/Func.tsx
+++ b/src/components/condition-builder/Func.tsx
@ -17,6 +17,7 @@ export interface ConditionFuncProps extends ThemeProps {
  fields?: Field[];
  funcs?: Funcs;
  allowedTypes?: Array<'value' | 'field' | 'func' | 'formula'>;
+  fieldClassName?: string;
 }

 const option2value = (item: Func) => item.type;
@ -67,7 +68,7 @@ export class ConditionFunc extends React.Component<ConditionFuncProps> {
  }

  render() {
-    const {value, classnames: cx, funcs, disabled} = this.props;
+    const {value, classnames: cx, fieldClassName, funcs, disabled} = this.props;
    const func = value
      ? findTree(funcs!, item => (item as Func).type === value.func)
      : null;
@ -91,6 +92,7 @@ export class ConditionFunc extends React.Component<ConditionFuncProps> {
              <ResultBox
                className={cx(
                  'CBGroup-fieldInput',
+                  fieldClassName,
                  isOpened ? 'is-active' : ''
                )}
                ref={ref}
--- a/src/components/condition-builder/Group.tsx
+++ b/src/components/condition-builder/Group.tsx
@ -19,6 +19,7 @@ export interface ConditionGroupProps extends ThemeProps {
  removeable?: boolean;
  onRemove?: (e: React.MouseEvent) => void;
  onDragStart?: (e: React.MouseEvent) => void;
+  fieldClassName?: string;
 }

 export class ConditionGroup extends React.Component<ConditionGroupProps> {
@ -112,6 +113,7 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
  render() {
    const {
      classnames: cx,
+      fieldClassName,
      value,
      data,
      fields,
@ -193,6 +195,7 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
                config={config}
                key={item.id}
                fields={fields}
+                fieldClassName={fieldClassName}
                value={item as ConditionGroupValue}
                index={index}
                onChange={this.handleItemChange}
--- a/src/components/condition-builder/GroupOrItem.tsx
+++ b/src/components/condition-builder/GroupOrItem.tsx
@ -20,6 +20,7 @@ export interface CBGroupOrItemProps extends ThemeProps {
  removeable?: boolean;
  onDragStart?: (e: React.MouseEvent) => void;
  onRemove?: (index: number) => void;
+  fieldClassName?: string;
 }

 export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
@ -36,6 +37,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
  render() {
    const {
      classnames: cx,
+      fieldClassName,
      value,
      config,
      fields,
@ -67,6 +69,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
              fields={fields}
              value={value as ConditionGroupValue}
              onChange={this.handleItemChange}
+              fieldClassName={fieldClassName}
              funcs={funcs}
              removeable
              onRemove={this.handleItemRemove}
@ -80,6 +83,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
                fields={fields}
                value={value as ConditionValue}
                onChange={this.handleItemChange}
+                fieldClassName={fieldClassName}
                funcs={funcs}
                data={data}
              />
--- a/src/components/condition-builder/Item.tsx
+++ b/src/components/condition-builder/Item.tsx
@ -32,6 +32,7 @@ export interface ConditionItemProps extends ThemeProps {
  data?: any;
  disabled?: boolean;
  onChange: (value: ConditionRule, index?: number) => void;
+  fieldClassName?: string;
 }

 export class ConditionItem extends React.Component<ConditionItemProps> {
@ -97,13 +98,14 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
  }

  renderLeft() {
-    const {value, fields, funcs, config, disabled} = this.props;
+    const {value, fields, funcs, config, disabled, fieldClassName} = this.props;

    return (
      <Expression
        config={config}
        funcs={funcs}
        value={value.left}
+        fieldClassName={fieldClassName}
        onChange={this.handleLeftChange}
        fields={fields}
        disabled={disabled}
--- a/src/components/condition-builder/index.tsx
+++ b/src/components/condition-builder/index.tsx
@ -25,6 +25,7 @@ export interface ConditionBuilderProps extends ThemeProps, LocaleProps {
  onChange: (value: ConditionGroupValue) => void;
  config?: Config;
  disabled?: boolean;
+  fieldClassName?: string;
 }

 export class QueryBuilder extends React.Component<ConditionBuilderProps> {
@ -193,6 +194,7 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
  render() {
    const {
      classnames: cx,
+      fieldClassName,
      fields,
      funcs,
      onChange,
@ -226,6 +228,7 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
        value={normalizedValue as any}
        onChange={onChange}
        classnames={cx}
+        fieldClassName={fieldClassName}
        removeable={false}
        onDragStart={this.handleDragStart}
        showNot={showNot}