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

ABCDdouyaer commented 1 year ago

Prerequisites

[X] I have searched the existing issues
[X] I understand that providing a SSCCE example is tremendously useful to the maintainers.
[X] I have read the documentation
[X] Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

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

stale[bot] commented 1 week ago

This issue has been automatically marked as possibly close because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.

rjsf-team / react-jsonschema-form