@nocobase/client 0.5.0-alpha.36 → 0.7.0-alpha.0

package/lib/components/schema-renderer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/schema-renderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAc,MAAM,eAAe,CAAC;AACvD,OAAO,EAGL,MAAM,EAKP,MAAM,gBAAgB,CAAC;AAIxB,OAAO,KAAwB,MAAM,OAAO,CAAC;AA+C7C,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAIvD,eAAO,MAAM,YAAY;;EAAmC,CAAC;AAI7D,UAAU,sBAAsB;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB,YAAa,GAAG,aAAa,GAAG,SAY9D,CAAC;AAEF,eAAO,MAAM,yBAAyB,gBAEf,UAAU,iBAqBhC,CAAC;AAEF,eAAO,MAAM,mBAAmB,0BAEL,kBAAkB,EAAE,SAAS,UAAU,SAuBjE,CAAC;AA8BF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEtB,CAAC;AAEH,eAAO,MAAM,iBAAiB,uCAA4C,CAAC;AAE3E,wBAAgB,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG;;;EAGnC;AAED,wBAAgB,WAAW,CAAC,IAAI,KAAA,GAAG,MAAM,EAAE,CAQ1C;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,GAAG,MAAM,CAmBrE;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,cAAc,QAS/E;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,cAAc,QAS9E;AAcD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,OAMnD;AAED,wBAAgB,aAAa,CAAC,IAAI,CAAC,EAAE,GAAG;;;;;;;wBA6BhB,OAAO,GAAG,cAAc,eAAe,GAAG,KAAG,MAAM;4BAgC/C,OAAO,GAAG,cAAc,eAAe,GAAG,KAAG,MAAM;4BA2BnD,OAAO,GAAG,cAAc,eAAe,GAAG,KAAG,MAAM;2BAsBpD,OAAO,GAAG,cAAc,eAAe,GAAG,GAAG,MAAM;;4BAmDlD,GAAG;wBA4BP,GAAG;;;EAuD1B;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,SAgB3C;AAED,wBAAgB,aAAa,UAI5B;AA6BD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,CAAC;IAC1C,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,gBAgHxD,CAAC","file":"index.d.ts","sourcesContent":["import { ArrayField, createForm } from '@formily/core';\nimport {\n  createSchemaField,\n  FormProvider,\n  Schema,\n  SchemaOptionsContext,\n  useField,\n  useFieldSchema,\n  useForm,\n} from '@formily/react';\nimport { uid } from '@formily/shared';\nimport constate from 'constate';\nimport { get } from 'lodash';\nimport React, { createContext } from 'react';\nimport { useState } from 'react';\nimport { useContext } from 'react';\nimport { useMemo } from 'react';\n\nimport { CodeOutlined } from '@ant-design/icons';\nimport Editor from '@monaco-editor/react';\n\nimport { ArrayItems, ArrayCollapse, FormLayout, FormItem as FormilyFormItem } from '@formily/antd';\n\nimport { Space, Card, Modal, Spin } from 'antd';\nimport { ArrayTable } from '../../schemas/array-table';\nimport { Action } from '../../schemas/action';\nimport { AddNew } from '../../schemas/add-new';\nimport { Calendar } from '../../schemas/calendar';\nimport { Cascader } from '../../schemas/cascader';\nimport { Checkbox } from '../../schemas/checkbox';\nimport { ColorSelect } from '../../schemas/color-select';\nimport { DatabaseField, DatabaseCollection } from '../../schemas/database-field';\nimport { DatePicker } from '../../schemas/date-picker';\nimport { Filter } from '../../schemas/filter';\nimport { Form } from '../../schemas/form';\nimport { ActionLogs } from '../../schemas/action-logs';\nimport { Grid } from '../../schemas/grid';\nimport { IconPicker } from '../../schemas/icon-picker';\nimport { Input } from '../../schemas/input';\nimport { InputNumber } from '../../schemas/input-number';\nimport { Markdown } from '../../schemas/markdown';\nimport { Kanban } from '../../schemas/kanban';\nimport { Menu } from '../../schemas/menu';\nimport { Password } from '../../schemas/password';\nimport { Radio } from '../../schemas/radio';\nimport { Select } from '../../schemas/select';\nimport { Table } from '../../schemas/table';\nimport { CollectionFieldContext, TableRowContext } from '../../schemas/table';\nimport { Tabs } from '../../schemas/tabs';\nimport { TimePicker } from '../../schemas/time-picker';\nimport { Upload } from '../../schemas/upload';\nimport { FormItem } from '../../schemas/form-item';\nimport { BlockItem } from '../../schemas/block-item';\nimport { CardItem } from '../../schemas/card-item';\nimport { DragAndDrop } from '../../schemas/drag-and-drop';\nimport { TreeSelect } from '../../schemas/tree-select';\nimport { Page } from '../../schemas/page';\nimport { Chart } from '../../schemas/chart';\nimport { useDesignableSwitchContext } from '../../constate/DesignableSwitch';\nimport { action } from '@formily/reactive';\nimport { ISchema, FormilyISchema } from '../../schemas';\nimport { Resource } from '../../resource';\nimport { useRequest } from 'ahooks';\nimport { CascaderOptionType } from 'antd/lib/cascader';\nimport { useClient, useCollectionContext, useResourceRequest } from '../../constate';\nimport { i18n } from '../../i18n';\n\nexport const BlockContext = createContext({ dragRef: null });\n\nconst Div = (props) => <div {...props} />;\n\ninterface DesignableContextProps {\n  schema?: Schema;\n  refresh?: any;\n}\n\nexport const useAsyncDataSource = (service: any) => (field: any) => {\n  field.loading = true;\n  const disableAsyncDataSource = field.componentProps.disableAsyncDataSource;\n  if (disableAsyncDataSource) {\n    return;\n  }\n  service(field).then(\n    action.bound((data: any) => {\n      field.dataSource = data;\n      field.loading = false;\n    }),\n  );\n};\n\nexport const loadChinaRegionDataSource = function () {\n  const resource = useResourceRequest('china_regions');\n  return async (field: ArrayField) => {\n    if (field.readPretty) {\n      return [];\n    }\n    const maxLevel = field.componentProps.maxLevel || 3;\n    const { data } = await resource.list({\n      perPage: -1,\n      filter: {\n        level: 1,\n      },\n    });\n    console.log('loadChinaRegions', data, field.value);\n    return (\n      data?.map((item) => {\n        if (maxLevel !== 1) {\n          item.isLeaf = false;\n        }\n        return item;\n      }) || []\n    );\n  };\n};\n\nexport const loadChinaRegionData = function () {\n  const resource = useResourceRequest('china_regions');\n  return (selectedOptions: CascaderOptionType[], field: ArrayField) => {\n    const maxLevel = field.componentProps.maxLevel || 3;\n    const targetOption = selectedOptions[selectedOptions.length - 1];\n    targetOption.loading = true;\n    resource\n      .list({\n        perPage: -1,\n        filter: {\n          parent_code: targetOption['code'],\n        },\n      })\n      .then((data) => {\n        targetOption.loading = false;\n        targetOption.children =\n          data?.data?.map((item) => {\n            if (maxLevel > item.level) {\n              item.isLeaf = false;\n            }\n            return item;\n          }) || [];\n        field.dataSource = [...field.dataSource];\n      });\n  };\n};\n\nconst useChinaRegionFieldValue = (field: ArrayField) => {\n  if (field.readPretty) {\n    field.value = field?.value?.sort((a, b) => a.level - b.level);\n  }\n  console.log('useChinaRegionFieldValue', field);\n};\n\nconst useAssociationResource = (options) => {\n  const { schema } = useDesignable();\n  const collectionField = useContext(CollectionFieldContext);\n  const { collection } = useCollectionContext();\n  const ctx = useContext(TableRowContext);\n  const associatedIndex = ctx?.record?.id;\n  console.log('useAssociationResource', collection, collectionField, schema['x-component-props']);\n  const { associatedName, resourceName } = schema['x-component-props'] || {};\n  const resource = useResourceRequest({\n    associatedName,\n    resourceName,\n    associatedIndex,\n  });\n  const service = useRequest((params) => resource.list(params), {\n    manual: schema['x-component'] === 'Form',\n    formatResult: (data) => data?.data?.[0] || {},\n    onSuccess: options?.onSuccess,\n  });\n  return { resource, service, initialValues: service.data, ...service };\n};\n\nexport const SchemaField = createSchemaField({\n  scope: {\n    t: i18n.t.bind(i18n),\n    Table,\n    Calendar,\n    Kanban,\n    useAsyncDataSource,\n    useClient,\n    useResourceRequest,\n    ChinaRegion: {\n      useFieldValue: useChinaRegionFieldValue,\n      loadData: loadChinaRegionData,\n      loadDataSource: loadChinaRegionDataSource,\n    },\n    Select,\n    Association: {\n      useResource: useAssociationResource,\n    },\n  },\n  components: {\n    Card,\n    Div,\n    Space,\n    Page,\n    Chart,\n\n    ArrayItems,\n    ArrayCollapse,\n    ArrayTable,\n    FormLayout,\n    TreeSelect,\n    FormilyFormItem,\n\n    DragAndDrop,\n\n    BlockItem,\n    CardItem,\n    FormItem,\n\n    Action,\n    AddNew,\n    Calendar,\n    Cascader,\n    Checkbox,\n    ColorSelect,\n    DatabaseField,\n    DatabaseCollection,\n    DatePicker,\n    Filter,\n    Form,\n    Grid,\n    IconPicker,\n    Input,\n    InputNumber,\n    Kanban,\n    Markdown,\n    Menu,\n    Password,\n    Radio,\n    Select,\n    Table,\n    Tabs,\n    TimePicker,\n    Upload,\n\n    ActionLogs,\n  },\n});\n\nexport const DesignableContext = createContext<DesignableContextProps>({});\n\nexport function useSchema(path?: any) {\n  const { schema, refresh } = useContext(DesignableContext);\n  return { schema, refresh };\n}\n\nexport function pathToArray(path): string[] {\n  if (Array.isArray(path)) {\n    return [...path];\n  }\n\n  if (typeof path === 'string') {\n    return path.split('.');\n  }\n}\n\nexport function findPropertyByPath(schema: Schema, path?: any): Schema {\n  if (!path) {\n    return schema;\n  }\n  const arr = pathToArray(path);\n  let property = schema;\n  while (arr.length) {\n    const name = arr.shift();\n    if (!property.properties) {\n      console.warn('property does not exist.');\n      return null;\n    }\n    property = property.properties[name];\n    if (!property) {\n      console.warn('property does not exist.');\n      return null;\n    }\n  }\n  return property;\n}\n\nexport function addPropertyBefore(target: Schema, data: ISchema | FormilyISchema) {\n  Object.keys(target.parent.properties).forEach((name) => {\n    if (name === target.name) {\n      target.parent.addProperty(data.name, data);\n    }\n    const property = target.parent.properties[name];\n    property.parent.removeProperty(property.name);\n    target.parent.addProperty(property.name, property.toJSON());\n  });\n}\n\nexport function addPropertyAfter(target: Schema, data: ISchema | FormilyISchema) {\n  Object.keys(target.parent.properties).forEach((name) => {\n    const property = target.parent.properties[name];\n    property.parent.removeProperty(property.name);\n    target.parent.addProperty(property.name, property.toJSON());\n    if (name === target.name) {\n      target.parent.addProperty(data.name, data);\n    }\n  });\n}\n\nfunction setKeys(schema: ISchema | FormilyISchema, parentKey = null) {\n  if (!schema['key']) {\n    schema['key'] = uid();\n  }\n  if (parentKey) {\n    schema['parentKey'] = parentKey;\n  }\n  Object.keys(schema.properties || {}).forEach((name) => {\n    setKeys(schema.properties[name], schema['key']);\n  });\n}\n\nexport function useSchemaComponent(component: string) {\n  if (!component) {\n    return null;\n  }\n  const options = useContext(SchemaOptionsContext);\n  return get(options.components, component);\n}\n\nexport function useDesignable(path?: any) {\n  let { designable = true } = useDesignableSwitchContext();\n  const { schema = new Schema({}), refresh } = useContext(DesignableContext);\n  const schemaPath = path || useSchemaPath();\n  const fieldSchema = useFieldSchema();\n  let current;\n  let currentSchema = (current = findPropertyByPath(schema, schemaPath) || ({} as Schema));\n  if (!currentSchema) {\n    currentSchema = fieldSchema;\n  }\n  if (Object.keys(currentSchema).length === 0) {\n    currentSchema = fieldSchema;\n  }\n  // console.log('useDesignable', { schema, schemaPath, currentSchema });\n  const options = useContext(SchemaOptionsContext);\n  let DesignableBar = get(options.components, currentSchema['x-designable-bar']);\n  if (!designable) {\n    DesignableBar = () => null;\n  }\n  if (!DesignableBar) {\n    DesignableBar = () => null;\n  }\n  return {\n    designable,\n    root: schema,\n    currentSchema: current,\n    DesignableBar,\n    schema: currentSchema,\n    refresh,\n    prepend: (property: ISchema | FormilyISchema, targetPath?: any): Schema => {\n      let target = currentSchema;\n      if (targetPath) {\n        target = findPropertyByPath(schema, targetPath);\n      }\n      if (!target) {\n        console.error('target schema does not exist.');\n        return;\n      }\n      if (!property.name) {\n        property.name = uid();\n      }\n      if (target['key']) {\n        property['parentKey'] = target['key'];\n        setKeys(property);\n        property['__prepend__'] = true;\n        // if (!property['key']) {\n        //   property['key'] = uid();\n        // }\n      }\n      const properties = {};\n      properties[property.name] = property;\n      Object.keys(target.properties).forEach((name, index) => {\n        const current = target.properties[name];\n        current.parent.removeProperty(current.name);\n        properties[current.name] = current.toJSON();\n      });\n      // console.log({ properties }, target.properties);\n      target.setProperties(properties);\n      refresh();\n      return target.properties[property.name];\n    },\n    appendChild: (property: ISchema | FormilyISchema, targetPath?: any): Schema => {\n      let target = currentSchema;\n      if (targetPath) {\n        target = findPropertyByPath(schema, targetPath);\n      }\n      if (!target) {\n        console.error('target schema does not exist.');\n        return;\n      }\n      if (!property.name) {\n        property.name = uid();\n      }\n      if (target['key']) {\n        property['parentKey'] = target['key'];\n        // if (!property['key']) {\n        //   property['key'] = uid();\n        // }\n        setKeys(property);\n      }\n      target.addProperty(property.name, property);\n      // BUG: 空 properties 时，addProperty 无反应。\n      const tmp = { name: uid() };\n      addPropertyAfter(target, tmp);\n      target.parent.removeProperty(tmp.name);\n      refresh();\n      return target.properties[property.name];\n    },\n    insertAfter: (property: ISchema | FormilyISchema, targetPath?: any): Schema => {\n      let target = currentSchema;\n      if (targetPath) {\n        target = findPropertyByPath(schema, targetPath);\n      }\n      if (!target) {\n        console.error('target schema does not exist.');\n        return;\n      }\n      if (!property.name) {\n        property.name = uid();\n      }\n      console.log('target.parentKey', target);\n      if (target['parentKey']) {\n        property['parentKey'] = target['parentKey'];\n        setKeys(property);\n        property['__insertAfter__'] = target['key'];\n      }\n      addPropertyAfter(target, property);\n      refresh();\n      return target.parent.properties[property.name];\n    },\n    insertBefore(property: ISchema | FormilyISchema, targetPath?: any): Schema {\n      let target = currentSchema;\n      if (targetPath) {\n        target = findPropertyByPath(schema, targetPath);\n      }\n      if (!target) {\n        console.error('target schema does not exist.');\n        return;\n      }\n      if (!property.name) {\n        property.name = uid();\n      }\n      if (target['parentKey']) {\n        property['parentKey'] = target['parentKey'];\n        setKeys(property);\n        property['__insertBefore__'] = target['key'];\n      }\n      addPropertyBefore(target, property);\n      refresh();\n      return target.parent.properties[property.name];\n    },\n    deepRemoveIfEmpty(targetPath) {\n      let target = currentSchema;\n      if (targetPath) {\n        target = findPropertyByPath(schema, targetPath);\n      }\n      if (!target) {\n        console.error('target schema does not exist.');\n        return;\n      }\n      const removed = [];\n      const remove = (s: Schema) => {\n        if (!s.parent) {\n          return;\n        }\n        s.parent.removeProperty(s.name);\n        removed.push(s);\n        if (s['x-component'] === 'Grid.Row') {\n          return;\n        }\n        if (Object.keys(s.parent.properties || {}).length === 0) {\n          remove(s.parent);\n        }\n      };\n      console.log({ removed });\n      if (Object.keys(target.properties || {}).length === 0) {\n        remove(target);\n      }\n      refresh();\n      return removed;\n    },\n    deepRemove(targetPath?: any) {\n      let target = currentSchema;\n      if (targetPath) {\n        target = findPropertyByPath(schema, targetPath);\n      }\n      if (!target) {\n        console.error('target schema does not exist.');\n        return;\n      }\n      const removed = [];\n      const remove = (s: Schema) => {\n        if (!s.parent) {\n          return;\n        }\n        s.parent.removeProperty(s.name);\n        removed.push(s);\n        if (s['x-component'] === 'Grid.Row') {\n          return;\n        }\n        if (Object.keys(s.parent.properties || {}).length === 0) {\n          remove(s.parent);\n        }\n      };\n      console.log({ removed });\n      remove(target);\n      refresh();\n      return removed;\n    },\n    remove(targetPath?: any) {\n      let target = currentSchema;\n      if (targetPath) {\n        target = findPropertyByPath(schema, targetPath);\n      }\n      if (!target) {\n        console.error('target schema does not exist.');\n        return;\n      }\n      target.parent.removeProperty(target.name);\n      refresh();\n      return target;\n    },\n    moveToBefore(path1, path2) {\n      const source = findPropertyByPath(schema, path1);\n      const property = source.toJSON() as ISchema;\n      const target = findPropertyByPath(schema, path2);\n      if (!target) {\n        console.error('target schema does not exist.');\n        return;\n      }\n      if (!property.name) {\n        property.name = uid();\n      }\n      if (target['parentKey']) {\n        property['parentKey'] = target['parentKey'];\n        setKeys(property);\n        property['__insertBefore__'] = target['key'];\n      }\n      addPropertyBefore(target, property);\n      refresh();\n      return target.parent.properties[property.name];\n    },\n    moveToAfter(path1, path2) {\n      const source = findPropertyByPath(schema, path1);\n      const property = source.toJSON() as ISchema;\n      const target = findPropertyByPath(schema, path2);\n      if (!target) {\n        console.error('target schema does not exist.');\n        return;\n      }\n      if (!property.name) {\n        property.name = uid();\n      }\n      if (target['parentKey']) {\n        property['parentKey'] = target['parentKey'];\n        setKeys(property);\n        property['__insertAfter__'] = target['key'];\n      }\n      addPropertyAfter(target, property);\n\n      refresh();\n      return target.parent.properties[property.name];\n    },\n  };\n}\n\nexport function getSchemaPath(schema: Schema) {\n  const path = schema['x-path'] || [schema.name];\n  let parent = schema.parent;\n  while (parent) {\n    // if (!parent.name) {\n    //   break;\n    // }\n    if (parent['x-path']) {\n      path.unshift(...parent['x-path']);\n    } else if (parent.name) {\n      path.unshift(parent.name);\n    }\n    parent = parent.parent;\n  }\n  // console.log('getSchemaPath', path, schema);\n  return [...path];\n}\n\nexport function useSchemaPath() {\n  const schema = useFieldSchema();\n  const path = getSchemaPath(schema);\n  return [...path];\n}\n\nconst FormValues = () => {\n  const form = useForm();\n  const [visible, setVisible] = useState(false);\n  return (\n    <>\n      <CodeOutlined onClick={() => setVisible(true)} />\n      <Modal width={'50%'} onOk={() => setVisible(false)} onCancel={() => setVisible(false)} visible={visible}>\n        <Editor height=\"60vh\" defaultLanguage=\"json\" value={JSON.stringify(form.values, null, 2)} />\n        {/* <pre>{JSON.stringify(schema.toJSON(), null, 2)}</pre> */}\n      </Modal>\n    </>\n  );\n};\n\nconst CodePreview = ({ schema }) => {\n  const [visible, setVisible] = useState(false);\n  return (\n    <>\n      <CodeOutlined style={{ position: 'relative', zIndex: 100 }} onClick={() => setVisible(true)} />\n      <Modal width={'50%'} onOk={() => setVisible(false)} onCancel={() => setVisible(false)} visible={visible}>\n        <Editor height=\"60vh\" defaultLanguage=\"json\" value={JSON.stringify(schema.toJSON(), null, 2)} />\n        {/* <pre>{JSON.stringify(schema.toJSON(), null, 2)}</pre> */}\n      </Modal>\n    </>\n  );\n};\n\nexport interface SchemaRendererProps {\n  schema: Schema | ISchema | FormilyISchema;\n  form?: any;\n  render?: any;\n  components?: any;\n  scope?: any;\n  debug?: boolean;\n  onlyRenderProperties?: boolean;\n  onRefresh?: any;\n  [key: string]: any;\n}\n\nexport const SchemaRenderer = (props: SchemaRendererProps) => {\n  const { designable = true } = useDesignableSwitchContext();\n  const [, refresh] = useState(uid());\n  const form = useMemo(() => props.form || createForm(), []);\n  const schema = useMemo(() => {\n    if (Schema.isSchemaInstance(props.schema)) {\n      return props.schema;\n    }\n    let s = props.schema;\n    if (props.onlyRenderProperties) {\n      s = {\n        type: 'object',\n        properties: s.properties,\n      };\n    } else if (s.name) {\n      s = {\n        type: 'object',\n        properties: {\n          [s.name]: s,\n        },\n      };\n    }\n    return new Schema(s);\n  }, []);\n\n  const resource = useResourceRequest('china_regions');\n\n  const loadChinaRegionDataSource = function () {\n    return async (field: ArrayField) => {\n      if (field.readPretty) {\n        return [];\n      }\n      const maxLevel = field.componentProps.maxLevel || 3;\n      const { data } = await resource.list({\n        perPage: -1,\n        filter: {\n          level: 1,\n        },\n      });\n      console.log('loadChinaRegions', data, field.value);\n      return (\n        data?.map((item) => {\n          if (maxLevel !== 1) {\n            item.isLeaf = false;\n          }\n          return item;\n        }) || []\n      );\n    };\n  };\n\n  const loadChinaRegionData = function () {\n    return (selectedOptions: CascaderOptionType[], field: ArrayField) => {\n      const maxLevel = field.componentProps.maxLevel || 3;\n      const targetOption = selectedOptions[selectedOptions.length - 1];\n      targetOption.loading = true;\n      resource\n        .list({\n          perPage: -1,\n          filter: {\n            parent_code: targetOption['code'],\n          },\n        })\n        .then((data) => {\n          targetOption.loading = false;\n          targetOption.children =\n            data?.data?.map((item) => {\n              if (maxLevel > item.level) {\n                item.isLeaf = false;\n              }\n              return item;\n            }) || [];\n          field.dataSource = [...field.dataSource];\n        });\n    };\n  };\n\n  // useEffect(() => {\n  //   refresh(uid());\n  // }, [designable]);\n  console.log({ designable }, 'designable');\n  const defaultRender = ({ schema }) => (\n    <FormProvider form={form}>\n      <SchemaField\n        components={props.components}\n        scope={{\n          ...props.scope,\n          ChinaRegion: {\n            useFieldValue: useChinaRegionFieldValue,\n            loadData: loadChinaRegionData,\n            loadDataSource: loadChinaRegionDataSource,\n          },\n        }}\n        schema={schema}\n      />\n      {props.debug && <CodePreview schema={schema} />}\n      {props.debug && <FormValues />}\n    </FormProvider>\n  );\n  return (\n    <DesignableContext.Provider\n      value={{\n        schema,\n        refresh: () => {\n          props.onRefresh && props.onRefresh(schema);\n          refresh(uid());\n        },\n      }}\n    >\n      <DesignableContext.Consumer>{props.render || defaultRender}</DesignableContext.Consumer>\n    </DesignableContext.Provider>\n  );\n};\n"]}