alibaba/x-render

@xrenders/schema-builder 使用后布局错误

canyuegongzi opened this issue · 2 comments

canyuegongzi commented

1.依赖仓库的版本(Dependencies versions)：

  • react：18
  • form-render：
  • table-render:
  • antd：

2.问题描述(Bug description)：
使用@xrenders/schema-builder 后页面布局错误 感觉是编辑器的定位有问题
image

3.出现问题的 schema demo(Reproduction schema demo)：

const FormContent = forwardRef((_props, _ref) => {

  const [config, setConfig] = useState({
    importBtn: true,
    exportBtn: true,
    pubBtn: false,
    clearBtn: true,
    saveBtn: true
  })

  const [schema, setSchema] = useState({})

  const designRef = useRef<any>();

  useImperativeHandle(_ref, (): FormContentHandler => {
    return {
      setValue: async (_value: Record<any, any>) => {
        setSchema(_value)
        designRef?.current.setValue?.(_value);
        return Promise.resolve(true)
      },
      getValue: async () =>{
        return await designRef?.current.getValue?.();
      },
      updateConfig: async (value: Record<any, any>) => {
        setConfig({...config, ...value});
        return Promise.resolve(true)
      },
      designFun: async (api: string, ...args: any) => {
        const apiVal = (designRef?.current as any)[api]
        if (apiVal) {
          if (typeof apiVal === 'function') {
            return apiVal(...args)
          }
          return apiVal
        }
        return null;
      }
    }
  })
  return (
    <SchemaBuilder
      defaultValue={schema}
      ref={designRef}
      {...config}
    />
  )
})
<div style={{width: '100vw', height: '90vh'}}>
      <Example/>
    </div>

4.最小复现 demo(Reproduction demo)：

form-render demo https://codesandbox.io/s/unruffled-flower-jl78h
table-render demo https://codesandbox.io/s/sweet-euler-bdoty
fr-generator demo https://codesandbox.io/s/s13sh

canyuegongzi commented

@xrenders/schema-builder": "1.0.0-alpha.13

canyuegongzi commented

曲线救国 只能通过 css 隐藏掉
image