rjsf-team / react-jsonschema-form

A React component for building Web forms from JSON Schema.
https://rjsf-team.github.io/react-jsonschema-form/
Apache License 2.0
14.15k stars 2.18k forks source link

The UISchema definition of the object in the list as "color" is not taking effect #3798

Open ABCDdouyaer opened 1 year ago

ABCDdouyaer commented 1 year ago

Prerequisites

What theme are you using?

bootstrap-4

Version

5.10.x

Current Behavior

cardList ui:widget is not taking effect

schema

{
  "type": "object",
  "properties": {
    "baseConfig": {
      "type": "object",
      "description": "时间轴的样式配置",
      "properties": {
        "pointColor": {
          "type": "string",
          "title": "圆点颜色",
          "default": "#3371f9"
        },
        "lineColor": {
          "type": "string",
          "title": "时间线颜色",
          "default": "#a8aebb"
        },
        "lineStyle": {
          "type": "string",
          "title": "时间线样式",
          "default": "dashed",
          "enum": [
            "solid",
            "dashed",
            "groove",
            "dotted"
          ]
        },
        "lineWidth": {
          "type": "integer",
          "title": "时间线宽度(px)",
          "minimum": 1,
          "maximum": 10,
          "default": 2
        }
      }
    },
    "cardList": {
      "type": "array",
      "title": "卡片的配置",
      "items": {
        "type": "object",
        "properties": {
          "time": {
            "title": "时间文案",
            "type": "string",
            "default": "1990.01.01"
          },
          "timeColor": {
            "title": "时间颜色",
            "type": "string",
            "default": "#576998"
          },
          "title": {
            "title": "标题",
            "type": "string",
            "default": "1990.01.01"
          },
          "titleColor": {
            "title": "标题颜色",
            "type": "string",
            "default": "#0f286e"
          },
          "desc": {
            "title": "描述",
            "type": "string",
            "default": "我是一段描述"
          },
          "descColor": {
            "title": "标题颜色",
            "type": "string",
            "default": "#a8aebb"
          },
          "cardBackground": {
            "title": "卡片背景色",
            "type": "string",
            "default": "#dde7fb"
          }
        }
      }
    }
  }
}

UISchema

{
  "baseConfig": {
    "pointColor": {
      "ui:widget": "color"
    },
    "lineColor": {
      "ui:widget": "color"
    },
    "lineStyle": {
      "ui:placeholder": "Choose one"
    },
    "lineWidth": {
      "ui:widget": "updown"
    }
  },
  "cardList": [
    {
      "timeColor": {
        "ui:widget": "color"
      },
      "titleColor": {
        "ui:widget": "color"
      },
      "descColor": {
        "ui:widget": "color"
      },
      "cardBackground": {
        "ui:widget": "color"
      }
    }
  ]
}

Expected Behavior

...

Steps To Reproduce

...

Environment

"@rjsf/bootstrap-4": "^5.10.0",
    "@rjsf/core": "^5.10.0",
    "@rjsf/utils": "^5.10.0",
    "@rjsf/validator-ajv8": "^5.10.0",
    "react": "^18.2.0",
    "react-bootstrap": "^1.6.7",
    "react-dom": "^18.2.0",

Anything else?

...

nickgros commented 1 year ago

Playground link with titles/descriptions removed (#3698)

nickgros commented 1 year ago

@ABCDdouyaer For array properties, you need to use the items keyword, not brackets. Try this UI schema:

{
  "baseConfig": {
    "pointColor": {
      "ui:widget": "color"
    },
    "lineColor": {
      "ui:widget": "color"
    },
    "lineStyle": {
      "ui:placeholder": "Choose one"
    },
    "lineWidth": {
      "ui:widget": "updown"
    }
  },
  "cardList": {
    "items": {
      "timeColor": {
        "ui:widget": "color"
      },
      "titleColor": {
        "ui:widget": "color"
      },
      "descColor": {
        "ui:widget": "color"
      },
      "cardBackground": {
        "ui:widget": "color"
      }
    }
  }
}

Here's a playground link