feat: upgrade formily (#1880)
* feat: upgrade formily * fix: upgrade @formily/json-schema * fix: optimizing performance * fix: performance code * refactor: `React.memo` and `observer` component add `displayName` property * fix: add cache to Schema.compile * feat: 优化代码 * fix: 修复卡顿最终的问题 * Update SchemaComponentProvider.tsx * feat: 再次优化代码 * feat: optimized code --------- Co-authored-by: dream2023 <1098626505@qq.com>
This commit is contained in:
		
							parent
							
								
									36d16bc015
								
							
						
					
					
						commit
						e6a2a292b3
					
				@ -42,6 +42,7 @@ const HelloProvider = React.memo((props) => {
 | 
			
		||||
  }
 | 
			
		||||
  return <>{props.children}</>
 | 
			
		||||
});
 | 
			
		||||
HelloProvider.displayName = 'HelloProvider'
 | 
			
		||||
 | 
			
		||||
app.use(HelloProvider);
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,8 @@ import { SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 | 
			
		||||
import { Table, TableColumnType } from 'antd';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
 | 
			
		||||
const ArrayTable = observer((props: any) => {
 | 
			
		||||
const ArrayTable = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { rowKey } = props;
 | 
			
		||||
    const field = useField<ArrayField>();
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
@ -24,7 +25,9 @@ const ArrayTable = observer((props: any) => {
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ArrayTable' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const Value = connect((props) => {
 | 
			
		||||
  return <li>value: {props.value}</li>;
 | 
			
		||||
 | 
			
		||||
@ -180,11 +180,11 @@ const Hello = observer((props) => {
 | 
			
		||||
      <div style={{ margin: 50 }}>{props.children}</div>
 | 
			
		||||
    </div>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Hello' });
 | 
			
		||||
 | 
			
		||||
const Page = observer((props) => {
 | 
			
		||||
  return <div>{props.children}</div>;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Page' });
 | 
			
		||||
 | 
			
		||||
export default () => {
 | 
			
		||||
  return (
 | 
			
		||||
@ -240,7 +240,7 @@ const useDragEnd = () => {
 | 
			
		||||
 | 
			
		||||
const Page = observer((props) => {
 | 
			
		||||
  return <DndContext onDragEnd={useDragEnd()}>{props.children}</DndContext>;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Page' });
 | 
			
		||||
 | 
			
		||||
function Draggable(props) {
 | 
			
		||||
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
 | 
			
		||||
@ -289,7 +289,7 @@ const Block = observer((props) => {
 | 
			
		||||
      </div>
 | 
			
		||||
    </Droppable>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Block' });
 | 
			
		||||
 | 
			
		||||
export default function App() {
 | 
			
		||||
  return (
 | 
			
		||||
 | 
			
		||||
@ -103,7 +103,7 @@ const SingleText = connect(Input);
 | 
			
		||||
const UsedObserver = observer((props) => {
 | 
			
		||||
  const form = useForm();
 | 
			
		||||
  return <div>UsedObserver: {form.values.t1}</div>
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'UsedObserver' });
 | 
			
		||||
 | 
			
		||||
const NotUsedObserver = (props) => {
 | 
			
		||||
  const form = useForm();
 | 
			
		||||
@ -310,7 +310,7 @@ const ArrayList = observer((props) => {
 | 
			
		||||
      </ul>
 | 
			
		||||
    </>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'ArrayList' });
 | 
			
		||||
 | 
			
		||||
const Value = connect((props) => {
 | 
			
		||||
  return <li>value: {props.value}</li>
 | 
			
		||||
@ -367,7 +367,7 @@ const ArrayList = observer((props) => {
 | 
			
		||||
      })}
 | 
			
		||||
    </ul>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'ArrayList' });
 | 
			
		||||
 | 
			
		||||
const Value = connect((props) => {
 | 
			
		||||
  return <li>value: {props.value}</li>
 | 
			
		||||
@ -432,7 +432,7 @@ const ArrayTable = observer((props: any) => {
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'ArrayTable' });
 | 
			
		||||
 | 
			
		||||
const Value = connect((props) => {
 | 
			
		||||
  return <li>value: {props.value}</li>;
 | 
			
		||||
 | 
			
		||||
@ -116,11 +116,11 @@ const Hello = observer((props) => {
 | 
			
		||||
      <div style={{ margin: 50 }}>{props.children}</div>
 | 
			
		||||
    </div>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Hello' });
 | 
			
		||||
 | 
			
		||||
const Page = observer((props) => {
 | 
			
		||||
  return <div>{props.children}</div>;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Page' });
 | 
			
		||||
 | 
			
		||||
export default () => {
 | 
			
		||||
  return (
 | 
			
		||||
 | 
			
		||||
@ -182,6 +182,7 @@ const HelloProvider = React.memo((props) => {
 | 
			
		||||
  }
 | 
			
		||||
  return <>{props.children}</>
 | 
			
		||||
});
 | 
			
		||||
HelloProvider.displayName = 'HelloProvider'
 | 
			
		||||
 | 
			
		||||
app.use(HelloProvider);
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,8 @@ import { SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 | 
			
		||||
import { Table, TableColumnType } from 'antd';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
 | 
			
		||||
const ArrayTable = observer((props: any) => {
 | 
			
		||||
const ArrayTable = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { rowKey } = props;
 | 
			
		||||
    const field = useField<ArrayField>();
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
@ -24,7 +25,9 @@ const ArrayTable = observer((props: any) => {
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ArrayTable' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const Value = connect((props) => {
 | 
			
		||||
  return <li>value: {props.value}</li>;
 | 
			
		||||
 | 
			
		||||
@ -183,11 +183,11 @@ const Hello = observer((props) => {
 | 
			
		||||
      <div style={{ margin: 50 }}>{props.children}</div>
 | 
			
		||||
    </div>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Hello' });
 | 
			
		||||
 | 
			
		||||
const Page = observer((props) => {
 | 
			
		||||
  return <div>{props.children}</div>;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Page' });
 | 
			
		||||
 | 
			
		||||
export default () => {
 | 
			
		||||
  return (
 | 
			
		||||
@ -243,7 +243,7 @@ const useDragEnd = () => {
 | 
			
		||||
 | 
			
		||||
const Page = observer((props) => {
 | 
			
		||||
  return <DndContext onDragEnd={useDragEnd()}>{props.children}</DndContext>;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Page' });
 | 
			
		||||
 | 
			
		||||
function Draggable(props) {
 | 
			
		||||
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
 | 
			
		||||
@ -292,7 +292,7 @@ const Block = observer((props) => {
 | 
			
		||||
      </div>
 | 
			
		||||
    </Droppable>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Block' });
 | 
			
		||||
 | 
			
		||||
export default function App() {
 | 
			
		||||
  return (
 | 
			
		||||
 | 
			
		||||
@ -103,7 +103,7 @@ const SingleText = connect(Input);
 | 
			
		||||
const UsedObserver = observer((props) => {
 | 
			
		||||
  const form = useForm();
 | 
			
		||||
  return <div>UsedObserver: {form.values.t1}</div>
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'UsedObserver' });
 | 
			
		||||
 | 
			
		||||
const NotUsedObserver = (props) => {
 | 
			
		||||
  const form = useForm();
 | 
			
		||||
@ -312,7 +312,7 @@ const ArrayList = observer((props) => {
 | 
			
		||||
      </ul>
 | 
			
		||||
    </>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'ArrayList' });
 | 
			
		||||
 | 
			
		||||
const Value = connect((props) => {
 | 
			
		||||
  return <li>value: {props.value}</li>
 | 
			
		||||
@ -369,7 +369,7 @@ const ArrayList = observer((props) => {
 | 
			
		||||
      })}
 | 
			
		||||
    </ul>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'ArrayList' });
 | 
			
		||||
 | 
			
		||||
const Value = connect((props) => {
 | 
			
		||||
  return <li>value: {props.value}</li>
 | 
			
		||||
@ -434,7 +434,7 @@ const ArrayTable = observer((props: any) => {
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'ArrayTable' });
 | 
			
		||||
 | 
			
		||||
const Value = connect((props) => {
 | 
			
		||||
  return <li>value: {props.value}</li>;
 | 
			
		||||
 | 
			
		||||
@ -116,11 +116,11 @@ const Hello = observer((props) => {
 | 
			
		||||
      <div style={{ margin: 50 }}>{props.children}</div>
 | 
			
		||||
    </div>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Hello' });
 | 
			
		||||
 | 
			
		||||
const Page = observer((props) => {
 | 
			
		||||
  return <div>{props.children}</div>;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Page' });
 | 
			
		||||
 | 
			
		||||
export default () => {
 | 
			
		||||
  return (
 | 
			
		||||
 | 
			
		||||
@ -42,6 +42,7 @@ const HelloProvider = React.memo((props) => {
 | 
			
		||||
  }
 | 
			
		||||
  return <>{props.children}</>
 | 
			
		||||
});
 | 
			
		||||
HelloProvider.displayName = 'HelloProvider'
 | 
			
		||||
 | 
			
		||||
app.use(HelloProvider);
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,8 @@ import { SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 | 
			
		||||
import { Table, TableColumnType } from 'antd';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
 | 
			
		||||
const ArrayTable = observer((props: any) => {
 | 
			
		||||
const ArrayTable = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { rowKey } = props;
 | 
			
		||||
    const field = useField<ArrayField>();
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
@ -24,7 +25,9 @@ const ArrayTable = observer((props: any) => {
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ArrayTable' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const Value = connect((props) => {
 | 
			
		||||
  return <li>value: {props.value}</li>;
 | 
			
		||||
 | 
			
		||||
@ -183,11 +183,11 @@ const Hello = observer((props) => {
 | 
			
		||||
      <div style={{ margin: 50 }}>{props.children}</div>
 | 
			
		||||
    </div>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Hello' });
 | 
			
		||||
 | 
			
		||||
const Page = observer((props) => {
 | 
			
		||||
  return <div>{props.children}</div>;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Page' });
 | 
			
		||||
 | 
			
		||||
export default () => {
 | 
			
		||||
  return (
 | 
			
		||||
@ -243,7 +243,7 @@ const useDragEnd = () => {
 | 
			
		||||
 | 
			
		||||
const Page = observer((props) => {
 | 
			
		||||
  return <DndContext onDragEnd={useDragEnd()}>{props.children}</DndContext>;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Page' });
 | 
			
		||||
 | 
			
		||||
function Draggable(props) {
 | 
			
		||||
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
 | 
			
		||||
@ -292,7 +292,7 @@ const Block = observer((props) => {
 | 
			
		||||
      </div>
 | 
			
		||||
    </Droppable>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Block' });
 | 
			
		||||
 | 
			
		||||
export default function App() {
 | 
			
		||||
  return (
 | 
			
		||||
 | 
			
		||||
@ -103,7 +103,7 @@ const SingleText = connect(Input);
 | 
			
		||||
const UsedObserver = observer((props) => {
 | 
			
		||||
  const form = useForm();
 | 
			
		||||
  return <div>UsedObserver: {form.values.t1}</div>
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'UsedObserver' });
 | 
			
		||||
 | 
			
		||||
const NotUsedObserver = (props) => {
 | 
			
		||||
  const form = useForm();
 | 
			
		||||
@ -312,7 +312,7 @@ const ArrayList = observer((props) => {
 | 
			
		||||
      </ul>
 | 
			
		||||
    </>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'ArrayList' });
 | 
			
		||||
 | 
			
		||||
const Value = connect((props) => {
 | 
			
		||||
  return <li>value: {props.value}</li>
 | 
			
		||||
@ -369,7 +369,7 @@ const ArrayList = observer((props) => {
 | 
			
		||||
      })}
 | 
			
		||||
    </ul>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'ArrayList' });
 | 
			
		||||
 | 
			
		||||
const Value = connect((props) => {
 | 
			
		||||
  return <li>value: {props.value}</li>
 | 
			
		||||
@ -434,7 +434,7 @@ const ArrayTable = observer((props: any) => {
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'ArrayTable' });
 | 
			
		||||
 | 
			
		||||
const Value = connect((props) => {
 | 
			
		||||
  return <li>value: {props.value}</li>;
 | 
			
		||||
 | 
			
		||||
@ -116,11 +116,11 @@ const Hello = observer((props) => {
 | 
			
		||||
      <div style={{ margin: 50 }}>{props.children}</div>
 | 
			
		||||
    </div>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Hello'  });
 | 
			
		||||
 | 
			
		||||
const Page = observer((props) => {
 | 
			
		||||
  return <div>{props.children}</div>;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Page' });
 | 
			
		||||
 | 
			
		||||
export default () => {
 | 
			
		||||
  return (
 | 
			
		||||
 | 
			
		||||
@ -176,6 +176,7 @@ const HelloProvider = React.memo((props) => {
 | 
			
		||||
  }
 | 
			
		||||
  return <>{props.children}</>
 | 
			
		||||
});
 | 
			
		||||
HelloProvider.displayName = 'HelloProvider'
 | 
			
		||||
 | 
			
		||||
app.use(HelloProvider);
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,8 @@
 | 
			
		||||
import React from 'react';
 | 
			
		||||
 | 
			
		||||
export default React.memo((props) => {
 | 
			
		||||
const CommonMemo = React.memo((props) => {
 | 
			
		||||
  return <>{props.children}</>;
 | 
			
		||||
});
 | 
			
		||||
CommonMemo.displayName = 'CommonMemo';
 | 
			
		||||
 | 
			
		||||
export default CommonMemo;
 | 
			
		||||
 | 
			
		||||
@ -374,7 +374,7 @@ const Action: any = observer((props: any) => {
 | 
			
		||||
      <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />
 | 
			
		||||
    </VisibleContext.Provider>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Action' });
 | 
			
		||||
 | 
			
		||||
Action.Drawer = observer((props: any) => {
 | 
			
		||||
  const [visible, setVisible] = useContext(VisibleContext);
 | 
			
		||||
@ -411,13 +411,13 @@ Action.Drawer = observer((props: any) => {
 | 
			
		||||
      )}
 | 
			
		||||
    </>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Action.Drawer' });
 | 
			
		||||
 | 
			
		||||
Action.Drawer.Footer = observer((props: any) => {
 | 
			
		||||
  const field = useField();
 | 
			
		||||
  const schema = useFieldSchema();
 | 
			
		||||
  return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Action.Drawer.Footer' });
 | 
			
		||||
 | 
			
		||||
const schema: ISchema = {
 | 
			
		||||
  type: 'object',
 | 
			
		||||
@ -500,7 +500,7 @@ const Hello = observer(({ name }) => {
 | 
			
		||||
      >更新</Button>
 | 
			
		||||
    </div>
 | 
			
		||||
  )
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Hello' });
 | 
			
		||||
 | 
			
		||||
const RouteSchemaComponent = (props) => {
 | 
			
		||||
  const route = useRoute();
 | 
			
		||||
@ -678,7 +678,7 @@ const useDragEnd = () => {
 | 
			
		||||
 | 
			
		||||
const Page = observer((props) => {
 | 
			
		||||
  return <DndContext onDragEnd={useDragEnd()}>{props.children}</DndContext>;
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Page' });
 | 
			
		||||
 | 
			
		||||
function Draggable(props) {
 | 
			
		||||
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
 | 
			
		||||
@ -727,7 +727,7 @@ const Block = observer((props) => {
 | 
			
		||||
      </div>
 | 
			
		||||
    </Droppable>
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
}, { displayName: 'Block' });
 | 
			
		||||
 | 
			
		||||
export default function App() {
 | 
			
		||||
  return (
 | 
			
		||||
 | 
			
		||||
@ -10,9 +10,9 @@
 | 
			
		||||
    "@dnd-kit/core": "^5.0.1",
 | 
			
		||||
    "@dnd-kit/sortable": "^6.0.0",
 | 
			
		||||
    "@emotion/css": "^11.7.1",
 | 
			
		||||
    "@formily/antd": "2.0.20",
 | 
			
		||||
    "@formily/core": "2.0.20",
 | 
			
		||||
    "@formily/react": "2.0.20",
 | 
			
		||||
    "@formily/antd": "2.2.24",
 | 
			
		||||
    "@formily/core": "2.2.24",
 | 
			
		||||
    "@formily/react": "2.2.24",
 | 
			
		||||
    "@nocobase/evaluators": "0.9.4-alpha.2",
 | 
			
		||||
    "@nocobase/sdk": "0.9.4-alpha.2",
 | 
			
		||||
    "@nocobase/utils": "0.9.4-alpha.2",
 | 
			
		||||
 | 
			
		||||
@ -61,6 +61,8 @@ const App = React.memo((props: any) => {
 | 
			
		||||
  return <C />;
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
App.displayName = 'App';
 | 
			
		||||
 | 
			
		||||
export class Application {
 | 
			
		||||
  providers = [];
 | 
			
		||||
  mainComponent = null;
 | 
			
		||||
 | 
			
		||||
@ -3,7 +3,8 @@ import { useDesignable } from '@nocobase/client';
 | 
			
		||||
import { Button } from 'antd';
 | 
			
		||||
import { observer } from '@formily/react';
 | 
			
		||||
 | 
			
		||||
export const Hello: React.FC<any> = observer(({ name }) => {
 | 
			
		||||
export const Hello: React.FC<any> = observer(
 | 
			
		||||
  ({ name }) => {
 | 
			
		||||
    const { patch, remove } = useDesignable();
 | 
			
		||||
    return (
 | 
			
		||||
      <div>
 | 
			
		||||
@ -17,4 +18,6 @@ export const Hello: React.FC<any> = observer(({ name }) => {
 | 
			
		||||
        </Button>
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Hello' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -31,7 +31,8 @@ const useDef = (options, props) => {
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const CollectionFieldsTable: React.FC<TableVoidProps> = observer((props) => {
 | 
			
		||||
export const CollectionFieldsTable: React.FC<TableVoidProps> = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const { rowKey = 'id', useDataSource = useDef, useSelectedRowKeys = useDefSelectedRowKeys } = props;
 | 
			
		||||
    const field = useField<Field>();
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
@ -63,4 +64,6 @@ export const CollectionFieldsTable: React.FC<TableVoidProps> = observer((props)
 | 
			
		||||
        </FormContext.Provider>
 | 
			
		||||
      </AsyncDataProvider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'CollectionFieldsTable' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -79,7 +79,8 @@ interface CategorizeDataItem {
 | 
			
		||||
  data: Array<any>;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export const CollectionFieldsTableArray: React.FC<any> = observer((props) => {
 | 
			
		||||
export const CollectionFieldsTableArray: React.FC<any> = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const sortKeyArr: Array<CategorizeKey> = ['primaryAndForeignKey', 'relation', 'basic', 'systemInfo'];
 | 
			
		||||
    const field = useField<ArrayField>();
 | 
			
		||||
    const { name } = useRecord();
 | 
			
		||||
@ -277,4 +278,6 @@ export const CollectionFieldsTableArray: React.FC<any> = observer((props) => {
 | 
			
		||||
        />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'CollectionFieldsTableArray' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -50,7 +50,8 @@ function Droppable(props) {
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const TabTitle = observer(({ item }: { item: any }) => {
 | 
			
		||||
const TabTitle = observer(
 | 
			
		||||
  ({ item }: { item: any }) => {
 | 
			
		||||
    return (
 | 
			
		||||
      <Droppable id={item.id.toString()} data={item}>
 | 
			
		||||
        <div>
 | 
			
		||||
@ -60,7 +61,9 @@ const TabTitle = observer(({ item }: { item: any }) => {
 | 
			
		||||
        </div>
 | 
			
		||||
      </Droppable>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'TabTitle' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const TabBar = ({ item }) => {
 | 
			
		||||
  const compile = useCompile();
 | 
			
		||||
@ -71,7 +74,8 @@ const TabBar = ({ item }) => {
 | 
			
		||||
    </span>
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
const DndProvider = observer((props) => {
 | 
			
		||||
const DndProvider = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const [activeTab, setActiveId] = useState(null);
 | 
			
		||||
    const { refresh } = useContext(CollectionCategroriesContext);
 | 
			
		||||
    const { refresh: refreshCM } = useResourceActionContext();
 | 
			
		||||
@ -109,7 +113,9 @@ const DndProvider = observer((props) => {
 | 
			
		||||
        </DragOverlay>
 | 
			
		||||
      </DndContext>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'DndProvider' },
 | 
			
		||||
);
 | 
			
		||||
export const ConfigurationTabs = () => {
 | 
			
		||||
  const { data, refresh } = useContext(CollectionCategroriesContext);
 | 
			
		||||
  const { refresh: refreshCM, run, defaultRequest, setState } = useResourceActionContext();
 | 
			
		||||
 | 
			
		||||
@ -3,7 +3,8 @@ import { Tag } from 'antd';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
import { useCompile } from '../../../schema-component';
 | 
			
		||||
 | 
			
		||||
export const CollectionCategory = observer((props: any) => {
 | 
			
		||||
export const CollectionCategory = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { value } = props;
 | 
			
		||||
    const compile = useCompile();
 | 
			
		||||
    return (
 | 
			
		||||
@ -13,4 +14,6 @@ export const CollectionCategory = observer((props: any) => {
 | 
			
		||||
        })}
 | 
			
		||||
      </>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'CollectionCategory' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,8 @@ import React from 'react';
 | 
			
		||||
import { useCompile } from '../../../schema-component';
 | 
			
		||||
import { useCollectionManager } from '../../hooks';
 | 
			
		||||
 | 
			
		||||
export const CollectionFieldInterface = observer((props: any) => {
 | 
			
		||||
export const CollectionFieldInterface = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { value } = props;
 | 
			
		||||
    const { getInterface } = useCollectionManager();
 | 
			
		||||
    const compile = useCompile();
 | 
			
		||||
@ -13,4 +14,6 @@ export const CollectionFieldInterface = observer((props: any) => {
 | 
			
		||||
    if (!schema) return null;
 | 
			
		||||
 | 
			
		||||
    return <Tag>{compile(schema.title)}</Tag>;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'CollectionFieldInterface' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -4,11 +4,14 @@ import React from 'react';
 | 
			
		||||
import { useCompile } from '../../../schema-component';
 | 
			
		||||
import { useCollectionManager } from '../../hooks';
 | 
			
		||||
 | 
			
		||||
export const CollectionTemplate = observer((props: any) => {
 | 
			
		||||
export const CollectionTemplate = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { value } = props;
 | 
			
		||||
    const { getTemplate } = useCollectionManager();
 | 
			
		||||
    const compile = useCompile();
 | 
			
		||||
    const schema = getTemplate(value);
 | 
			
		||||
 | 
			
		||||
    return <Tag>{compile(schema?.title || '{{t("General collection")}}')}</Tag>;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'CollectionTemplate' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,8 @@ import { useTranslation } from 'react-i18next';
 | 
			
		||||
import { useCompile } from '../../../schema-component';
 | 
			
		||||
import { useCollectionManager } from '../../hooks';
 | 
			
		||||
 | 
			
		||||
export const FieldSummary = observer((props: any) => {
 | 
			
		||||
export const FieldSummary = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { schemaKey } = props;
 | 
			
		||||
    const { getInterface } = useCollectionManager();
 | 
			
		||||
    const compile = useCompile();
 | 
			
		||||
@ -38,4 +39,6 @@ export const FieldSummary = observer((props: any) => {
 | 
			
		||||
        ) : null}
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'FieldSummary' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,8 @@ import { useTranslation } from 'react-i18next';
 | 
			
		||||
import { useCompile } from '../../../schema-component';
 | 
			
		||||
import { useCollectionManager } from '../../hooks';
 | 
			
		||||
 | 
			
		||||
export const TemplateSummay = observer((props: any) => {
 | 
			
		||||
export const TemplateSummay = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { schemaKey } = props;
 | 
			
		||||
    const { getTemplate } = useCollectionManager();
 | 
			
		||||
    const compile = useCompile();
 | 
			
		||||
@ -38,4 +39,6 @@ export const TemplateSummay = observer((props: any) => {
 | 
			
		||||
        ) : null}
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'TemplateSummay' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,8 @@ import { useRecord } from '../../../record-provider';
 | 
			
		||||
import { useCompile } from '../../../schema-component';
 | 
			
		||||
import { useCollectionManager } from '../../hooks';
 | 
			
		||||
 | 
			
		||||
export const SourceForeignKey = observer(() => {
 | 
			
		||||
export const SourceForeignKey = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    const record = useRecord();
 | 
			
		||||
    const { getCollection } = useCollectionManager();
 | 
			
		||||
    const collection = record?.collectionName ? getCollection(record.collectionName) : record;
 | 
			
		||||
@ -31,9 +32,12 @@ export const SourceForeignKey = observer(() => {
 | 
			
		||||
        />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'SourceForeignKey' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export const ThroughForeignKey = observer(() => {
 | 
			
		||||
export const ThroughForeignKey = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    const field = useField<Field>();
 | 
			
		||||
    const form = useForm();
 | 
			
		||||
    const { getCollectionFields } = useCollectionManager();
 | 
			
		||||
@ -55,9 +59,12 @@ export const ThroughForeignKey = observer(() => {
 | 
			
		||||
        />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ThroughForeignKey' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export const TargetForeignKey = observer(() => {
 | 
			
		||||
export const TargetForeignKey = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    const field = useField<Field>();
 | 
			
		||||
    const form = useForm();
 | 
			
		||||
    const { getCollectionFields } = useCollectionManager();
 | 
			
		||||
@ -79,9 +86,12 @@ export const TargetForeignKey = observer(() => {
 | 
			
		||||
        />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'TargetForeignKey' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export const SourceCollection = observer(() => {
 | 
			
		||||
export const SourceCollection = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    const record = useRecord();
 | 
			
		||||
    const { getCollection } = useCollectionManager();
 | 
			
		||||
    const collection = record?.collectionName ? getCollection(record.collectionName) : record;
 | 
			
		||||
@ -95,20 +105,28 @@ export const SourceCollection = observer(() => {
 | 
			
		||||
        />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'SourceCollection' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export const SourceKey = observer(() => {
 | 
			
		||||
export const SourceKey = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    return (
 | 
			
		||||
      <div>
 | 
			
		||||
        <Select disabled value={'id'} options={[{ value: 'id', label: 'ID' }]} />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'SourceKey' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export const TargetKey = observer(() => {
 | 
			
		||||
export const TargetKey = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    return (
 | 
			
		||||
      <div>
 | 
			
		||||
        <Select disabled value={'id'} options={[{ value: 'id', label: 'ID' }]} />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'TargetKey' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -166,7 +166,8 @@ export const ds = {
 | 
			
		||||
  useDestroyAction,
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const SubFieldDataSourceProvider = observer((props) => {
 | 
			
		||||
export const SubFieldDataSourceProvider = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
 | 
			
		||||
    const [dataSource, setDataSource] = useState([]);
 | 
			
		||||
    const record = useRecord();
 | 
			
		||||
@ -218,9 +219,12 @@ export const SubFieldDataSourceProvider = observer((props) => {
 | 
			
		||||
        </DataSourceContext.Provider>
 | 
			
		||||
      </CollectionProvider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'SubFieldDataSourceProvider' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export const DataSourceProvider = observer((props: any) => {
 | 
			
		||||
export const DataSourceProvider = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { rowKey, collection, association } = props;
 | 
			
		||||
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
 | 
			
		||||
    const [dataSource, setDataSource] = useState([]);
 | 
			
		||||
@ -269,4 +273,6 @@ export const DataSourceProvider = observer((props: any) => {
 | 
			
		||||
        </DataSourceContext.Provider>
 | 
			
		||||
      </CollectionProvider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'DataSourceProvider' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -217,3 +217,4 @@ function areEqual(prevProps, nextProps) {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export const PreviewFields = React.memo(PreviewCom, areEqual);
 | 
			
		||||
PreviewFields.displayName = 'PreviewFields';
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,8 @@ import { ActionModal } from './Action.Modal';
 | 
			
		||||
import { ActionPage } from './Action.Page';
 | 
			
		||||
import { ComposedActionDrawer } from './types';
 | 
			
		||||
 | 
			
		||||
export const ActionContainer: ComposedActionDrawer = observer((props: any) => {
 | 
			
		||||
export const ActionContainer: ComposedActionDrawer = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { openMode } = useActionContext();
 | 
			
		||||
    if (openMode === 'drawer') {
 | 
			
		||||
      return <ActionDrawer footerNodeName={'Action.Container.Footer'} {...props} />;
 | 
			
		||||
@ -15,12 +16,17 @@ export const ActionContainer: ComposedActionDrawer = observer((props: any) => {
 | 
			
		||||
      return <ActionModal footerNodeName={'Action.Container.Footer'} {...props} />;
 | 
			
		||||
    }
 | 
			
		||||
    return <ActionPage footerNodeName={'Action.Container.Footer'} {...props} />;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ActionContainer' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
ActionContainer.Footer = observer(() => {
 | 
			
		||||
ActionContainer.Footer = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    const field = useField();
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
    return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ActionContainer.Footer' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export default ActionContainer;
 | 
			
		||||
 | 
			
		||||
@ -14,7 +14,8 @@ const openSizeWidthMap = new Map<OpenSize, string>([
 | 
			
		||||
  ['middle', '50%'],
 | 
			
		||||
  ['large', '70%'],
 | 
			
		||||
]);
 | 
			
		||||
export const ActionDrawer: ComposedActionDrawer = observer((props) => {
 | 
			
		||||
export const ActionDrawer: ComposedActionDrawer = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const { footerNodeName = 'Action.Drawer.Footer', ...others } = props;
 | 
			
		||||
    const { t } = useTranslation();
 | 
			
		||||
    const { visible, setVisible, openSize = 'middle' } = useActionContext();
 | 
			
		||||
@ -113,12 +114,17 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
 | 
			
		||||
        )}
 | 
			
		||||
      </>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ActionDrawer' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
ActionDrawer.Footer = observer(() => {
 | 
			
		||||
ActionDrawer.Footer = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    const field = useField();
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
    return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ActionDrawer.Footer' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export default ActionDrawer;
 | 
			
		||||
 | 
			
		||||
@ -3,6 +3,9 @@ import React from 'react';
 | 
			
		||||
import Action from './Action';
 | 
			
		||||
import { ComposedAction } from './types';
 | 
			
		||||
 | 
			
		||||
export const ActionLink: ComposedAction = observer((props: any) => {
 | 
			
		||||
export const ActionLink: ComposedAction = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    return <Action {...props} component={'a'} className={'nb-action-link'} />;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ActionLink' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -12,7 +12,8 @@ const openSizeWidthMap = new Map<OpenSize, string>([
 | 
			
		||||
  ['middle', '60%'],
 | 
			
		||||
  ['large', '80%'],
 | 
			
		||||
]);
 | 
			
		||||
export const ActionModal: ComposedActionDrawer<ModalProps> = observer((props) => {
 | 
			
		||||
export const ActionModal: ComposedActionDrawer<ModalProps> = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const { footerNodeName = 'Action.Modal.Footer', width, ...others } = props;
 | 
			
		||||
    const { visible, setVisible, openSize = 'large' } = useActionContext();
 | 
			
		||||
    const actualWidth = width ?? openSizeWidthMap.get(openSize);
 | 
			
		||||
@ -104,12 +105,17 @@ export const ActionModal: ComposedActionDrawer<ModalProps> = observer((props) =>
 | 
			
		||||
        )}
 | 
			
		||||
      </>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ActionModal' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
ActionModal.Footer = observer(() => {
 | 
			
		||||
ActionModal.Footer = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    const field = useField();
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
    return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ActionModal.Footer' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export default ActionModal;
 | 
			
		||||
 | 
			
		||||
@ -10,7 +10,8 @@ const useScope = (key: string) => {
 | 
			
		||||
  return scope[key];
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const ActionPage: ComposedActionDrawer = observer((props: any) => {
 | 
			
		||||
export const ActionPage: ComposedActionDrawer = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { footerNodeName = 'Action.Page.Footer', ...others } = props;
 | 
			
		||||
    const { containerRefKey, visible, setVisible } = useActionContext();
 | 
			
		||||
    const containerRef = useScope(containerRefKey);
 | 
			
		||||
@ -63,12 +64,17 @@ export const ActionPage: ComposedActionDrawer = observer((props: any) => {
 | 
			
		||||
          )}
 | 
			
		||||
      </>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ActionPage' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
ActionPage.Footer = observer(() => {
 | 
			
		||||
ActionPage.Footer = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    const field = useField();
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
    return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ActionPage.Footer' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export default ActionPage;
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 | 
			
		||||
import { observer, RecursionField, useField, useFieldSchema, useForm } from '@formily/react';
 | 
			
		||||
import { Button, Modal, Popover } from 'antd';
 | 
			
		||||
import classnames from 'classnames';
 | 
			
		||||
import React, { useEffect, useState } from 'react';
 | 
			
		||||
import React, { useEffect, useMemo, useState } from 'react';
 | 
			
		||||
import { useActionContext } from '../..';
 | 
			
		||||
import { useDesignable } from '../../';
 | 
			
		||||
import { Icon } from '../../../icon';
 | 
			
		||||
@ -64,7 +64,8 @@ export const actionDesignerCss = css`
 | 
			
		||||
  }
 | 
			
		||||
`;
 | 
			
		||||
 | 
			
		||||
export const Action: ComposedAction = observer((props: any) => {
 | 
			
		||||
export const Action: ComposedAction = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const {
 | 
			
		||||
      popover,
 | 
			
		||||
      confirm,
 | 
			
		||||
@ -94,6 +95,16 @@ export const Action: ComposedAction = observer((props: any) => {
 | 
			
		||||
    const linkageRules = fieldSchema?.['x-linkage-rules'] || [];
 | 
			
		||||
    const { designable } = useDesignable();
 | 
			
		||||
    const tarComponent = useComponent(component) || component;
 | 
			
		||||
    const renderTitle = useMemo(() => {
 | 
			
		||||
      if (title) {
 | 
			
		||||
        return title;
 | 
			
		||||
      }
 | 
			
		||||
      if (fieldSchema.title) {
 | 
			
		||||
        return compile(fieldSchema.title);
 | 
			
		||||
      }
 | 
			
		||||
      return null;
 | 
			
		||||
    }, [compile, fieldSchema.title, title]);
 | 
			
		||||
 | 
			
		||||
    useEffect(() => {
 | 
			
		||||
      field.linkageProperty = {};
 | 
			
		||||
      linkageRules
 | 
			
		||||
@ -140,7 +151,7 @@ export const Action: ComposedAction = observer((props: any) => {
 | 
			
		||||
          component={tarComponent || Button}
 | 
			
		||||
          className={classnames(className, actionDesignerCss)}
 | 
			
		||||
        >
 | 
			
		||||
        {title || compile(fieldSchema.title)}
 | 
			
		||||
          {renderTitle}
 | 
			
		||||
          <Designer {...designerProps} />
 | 
			
		||||
        </SortableItem>
 | 
			
		||||
      );
 | 
			
		||||
@ -165,9 +176,12 @@ export const Action: ComposedAction = observer((props: any) => {
 | 
			
		||||
        {!popover && props.children}
 | 
			
		||||
      </ActionContext.Provider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Action' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
Action.Popover = observer((props) => {
 | 
			
		||||
Action.Popover = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const { button, visible, setVisible } = useActionContext();
 | 
			
		||||
    return (
 | 
			
		||||
      <Popover
 | 
			
		||||
@ -182,9 +196,12 @@ Action.Popover = observer((props) => {
 | 
			
		||||
        {button}
 | 
			
		||||
      </Popover>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Action.Popover' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
Action.Popover.Footer = observer((props) => {
 | 
			
		||||
Action.Popover.Footer = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    return (
 | 
			
		||||
      <div
 | 
			
		||||
        className={css`
 | 
			
		||||
@ -196,7 +213,9 @@ Action.Popover.Footer = observer((props) => {
 | 
			
		||||
        {props.children}
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Action.Popover.Footer' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
Action.Link = ActionLink;
 | 
			
		||||
Action.Designer = ActionDesigner;
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,8 @@ import { useSchemaInitializer } from '../../../schema-initializer';
 | 
			
		||||
import { DndContext } from '../../common';
 | 
			
		||||
import { useDesignable, useProps } from '../../hooks';
 | 
			
		||||
 | 
			
		||||
export const ActionBar = observer((props: any) => {
 | 
			
		||||
export const ActionBar = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { layout = 'tow-columns', style, spaceProps, ...others } = useProps(props);
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
    const { InitializerComponent } = useSchemaInitializer(fieldSchema['x-initializer']);
 | 
			
		||||
@ -81,4 +82,6 @@ export const ActionBar = observer((props: any) => {
 | 
			
		||||
        <InitializerComponent />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ActionBar' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -18,7 +18,8 @@ const useCloseAction = () => {
 | 
			
		||||
  };
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const Editable = observer((props) => {
 | 
			
		||||
const Editable = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const field = useField<Field>();
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
    return (
 | 
			
		||||
@ -41,7 +42,9 @@ const Editable = observer((props) => {
 | 
			
		||||
        {props.children}
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Editable' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const schema: ISchema = {
 | 
			
		||||
  type: 'object',
 | 
			
		||||
 | 
			
		||||
@ -71,7 +71,8 @@ function TypeSelect(props) {
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const EditOptions = observer((props) => {
 | 
			
		||||
const EditOptions = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const record = ArrayTable.useRecord();
 | 
			
		||||
    const field = useField<Field>();
 | 
			
		||||
    console.log(record.type);
 | 
			
		||||
@ -116,7 +117,9 @@ const EditOptions = observer((props) => {
 | 
			
		||||
        </a>
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'EditOptions' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const SchemaField = createSchemaField({
 | 
			
		||||
  components: {
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,8 @@ import React, { useEffect, useMemo, useState } from 'react';
 | 
			
		||||
import { useCollectionManager } from '../../../collection-manager';
 | 
			
		||||
import { AssociationFieldContext } from './context';
 | 
			
		||||
 | 
			
		||||
export const AssociationFieldProvider = observer((props) => {
 | 
			
		||||
export const AssociationFieldProvider = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const field = useField<Field>();
 | 
			
		||||
    const { getCollectionJoinField, getCollection } = useCollectionManager();
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
@ -63,4 +64,6 @@ export const AssociationFieldProvider = observer((props) => {
 | 
			
		||||
        {props.children}
 | 
			
		||||
      </AssociationFieldContext.Provider>
 | 
			
		||||
    ) : null;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'AssociationFieldProvider' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -11,7 +11,8 @@ export type AssociationSelectProps<P = any> = RemoteSelectProps<P> & {
 | 
			
		||||
  multiple?: boolean;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
 | 
			
		||||
const InternalAssociationSelect = observer(
 | 
			
		||||
  (props: AssociationSelectProps) => {
 | 
			
		||||
    const { fieldNames, objectValue = true } = props;
 | 
			
		||||
    const field: any = useField();
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
@ -45,7 +46,9 @@ const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
 | 
			
		||||
        </Input.Group>
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'InternalAssociationSelect' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
interface AssociationSelectInterface {
 | 
			
		||||
  (props: any): React.ReactElement;
 | 
			
		||||
 | 
			
		||||
@ -12,7 +12,8 @@ import { InternalSubTable } from './InternalSubTable';
 | 
			
		||||
import { CreateRecordAction } from './components/CreateRecordAction';
 | 
			
		||||
import { useAssociationFieldContext } from './hooks';
 | 
			
		||||
 | 
			
		||||
const EditableAssociationField = observer((props: any) => {
 | 
			
		||||
const EditableAssociationField = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { multiple } = props;
 | 
			
		||||
    const field: Field = useField();
 | 
			
		||||
    const form = useForm();
 | 
			
		||||
@ -50,12 +51,17 @@ const EditableAssociationField = observer((props: any) => {
 | 
			
		||||
        {currentMode === 'FileManager' && <InternalFileManager {...props} />}
 | 
			
		||||
      </SchemaComponentOptions>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'EditableAssociationField' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export const Editable = observer((props) => {
 | 
			
		||||
export const Editable = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    return (
 | 
			
		||||
      <AssociationFieldProvider>
 | 
			
		||||
        <EditableAssociationField {...props} />
 | 
			
		||||
      </AssociationFieldProvider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Editable' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -60,7 +60,8 @@ const useTableSelectorProps = () => {
 | 
			
		||||
  };
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const InternalPicker = observer((props: any) => {
 | 
			
		||||
export const InternalPicker = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { value, multiple, onChange, quickUpload, selectFile, ...others } = props;
 | 
			
		||||
    const field: any = useField();
 | 
			
		||||
    const fieldNames = useFieldNames(props);
 | 
			
		||||
@ -102,7 +103,9 @@ export const InternalPicker = observer((props: any) => {
 | 
			
		||||
 | 
			
		||||
    const getValue = () => {
 | 
			
		||||
      if (multiple == null) return null;
 | 
			
		||||
    return Array.isArray(value) ? value.filter(Boolean)?.map((v) => v?.[fieldNames.value]) : value?.[fieldNames.value];
 | 
			
		||||
      return Array.isArray(value)
 | 
			
		||||
        ? value.filter(Boolean)?.map((v) => v?.[fieldNames.value])
 | 
			
		||||
        : value?.[fieldNames.value];
 | 
			
		||||
    };
 | 
			
		||||
    const getFilter = () => {
 | 
			
		||||
      const targetKey = collectionField?.targetKey || 'id';
 | 
			
		||||
@ -172,7 +175,9 @@ export const InternalPicker = observer((props: any) => {
 | 
			
		||||
            </RecordProvider>
 | 
			
		||||
          )}
 | 
			
		||||
        </Input.Group>
 | 
			
		||||
      <ActionContext.Provider value={{ openMode: 'drawer', visible: visibleSelector, setVisible: setVisibleSelector }}>
 | 
			
		||||
        <ActionContext.Provider
 | 
			
		||||
          value={{ openMode: 'drawer', visible: visibleSelector, setVisible: setVisibleSelector }}
 | 
			
		||||
        >
 | 
			
		||||
          <RecordPickerProvider {...pickerProps}>
 | 
			
		||||
            <CollectionProvider name={collectionField?.target}>
 | 
			
		||||
              <FormProvider>
 | 
			
		||||
@ -194,4 +199,6 @@ export const InternalPicker = observer((props: any) => {
 | 
			
		||||
        </ActionContext.Provider>
 | 
			
		||||
      </>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'InternalPicker' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -22,7 +22,8 @@ const toValue = (value, placeholder) => {
 | 
			
		||||
  }
 | 
			
		||||
  return value;
 | 
			
		||||
};
 | 
			
		||||
export const ReadPrettyInternalViewer: React.FC = observer((props: any) => {
 | 
			
		||||
export const ReadPrettyInternalViewer: React.FC = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
    const recordCtx = useRecord();
 | 
			
		||||
    const { enableLink } = fieldSchema['x-component-props'];
 | 
			
		||||
@ -112,4 +113,6 @@ export const ReadPrettyInternalViewer: React.FC = observer((props: any) => {
 | 
			
		||||
        </BlockAssociationContext.Provider>
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ReadPrettyInternalViewer' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -25,7 +25,8 @@ const ToOneNester = (props) => {
 | 
			
		||||
  return <Card bordered={true}>{props.children}</Card>;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const ToManyNester = observer((props) => {
 | 
			
		||||
const ToManyNester = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
    const { options, field, allowMultiple, allowDissociate } = useAssociationFieldContext<ArrayField>();
 | 
			
		||||
    const { t } = useTranslation();
 | 
			
		||||
@ -113,4 +114,6 @@ const ToManyNester = observer((props) => {
 | 
			
		||||
        )}
 | 
			
		||||
      </>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ToManyNester' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -7,7 +7,8 @@ import { InternalSubTable } from './InternalSubTable';
 | 
			
		||||
import { FileManageReadPretty } from './FileManager';
 | 
			
		||||
import { useAssociationFieldContext } from './hooks';
 | 
			
		||||
 | 
			
		||||
const ReadPrettyAssociationField = observer((props: any) => {
 | 
			
		||||
const ReadPrettyAssociationField = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { currentMode } = useAssociationFieldContext();
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
@ -18,12 +19,17 @@ const ReadPrettyAssociationField = observer((props: any) => {
 | 
			
		||||
        {currentMode === 'FileManager' && <FileManageReadPretty {...props} />}
 | 
			
		||||
      </>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ReadPrettyAssociationField' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export const ReadPretty = observer((props) => {
 | 
			
		||||
export const ReadPretty = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    return (
 | 
			
		||||
      <AssociationFieldProvider>
 | 
			
		||||
        <ReadPrettyAssociationField {...props} />
 | 
			
		||||
      </AssociationFieldProvider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ReadPretty' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -5,7 +5,8 @@ import React from 'react';
 | 
			
		||||
import { Table } from '../table-v2/Table';
 | 
			
		||||
import { useAssociationFieldContext } from './hooks';
 | 
			
		||||
 | 
			
		||||
export const SubTable: any = observer((props) => {
 | 
			
		||||
export const SubTable: any = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const { field } = useAssociationFieldContext<ArrayField>();
 | 
			
		||||
    return (
 | 
			
		||||
      <div>
 | 
			
		||||
@ -25,4 +26,6 @@ export const SubTable: any = observer((props) => {
 | 
			
		||||
        )}
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'SubTable' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,8 @@ import { ActionContext, useActionContext } from '../../action';
 | 
			
		||||
import { useAssociationFieldContext, useInsertSchema } from '../hooks';
 | 
			
		||||
import schema from '../schema';
 | 
			
		||||
 | 
			
		||||
export const CreateRecordAction = observer((props) => {
 | 
			
		||||
export const CreateRecordAction = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const field: any = useField();
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
    const ctx = useActionContext();
 | 
			
		||||
@ -36,4 +37,6 @@ export const CreateRecordAction = observer((props) => {
 | 
			
		||||
        </ActionContext.Provider>
 | 
			
		||||
      </CollectionProvider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'CreateRecordAction' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -4,8 +4,11 @@ import { useFieldTitle } from '../../hooks';
 | 
			
		||||
import { RemoteSelect } from '../remote-select';
 | 
			
		||||
import useServiceOptions from './useServiceOptions';
 | 
			
		||||
 | 
			
		||||
export const ReadPretty = observer((props: any) => {
 | 
			
		||||
export const ReadPretty = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const service = useServiceOptions(props);
 | 
			
		||||
    useFieldTitle();
 | 
			
		||||
    return <RemoteSelect.ReadPretty {...props} service={service}></RemoteSelect.ReadPretty>;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ReadPretty' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -3,7 +3,8 @@ import { uid } from '@formily/shared';
 | 
			
		||||
import { BlockItem, DndContext, DragHandler, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
 | 
			
		||||
const Block = observer((props) => {
 | 
			
		||||
const Block = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
    return (
 | 
			
		||||
      <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
 | 
			
		||||
@ -11,7 +12,9 @@ const Block = observer((props) => {
 | 
			
		||||
        <DragHandler />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Block' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export default function App() {
 | 
			
		||||
  return (
 | 
			
		||||
 | 
			
		||||
@ -190,7 +190,8 @@ const CalendarRecordViewer = (props) => {
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const Calendar: any = observer((props: any) => {
 | 
			
		||||
export const Calendar: any = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { dataSource, fieldNames, showLunar, fixedBlock } = useProps(props);
 | 
			
		||||
    const [date, setDate] = useState<Date>(new Date());
 | 
			
		||||
    const [view, setView] = useState<(typeof Weeks)[number]>('month');
 | 
			
		||||
@ -257,4 +258,6 @@ export const Calendar: any = observer((props: any) => {
 | 
			
		||||
        />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Calendar' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -11,7 +11,8 @@ import { DeleteEventContext } from './Calendar';
 | 
			
		||||
import { formatDate } from './utils';
 | 
			
		||||
const { Text } = Typography;
 | 
			
		||||
 | 
			
		||||
export const DeleteEvent = observer(() => {
 | 
			
		||||
export const DeleteEvent = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    const { visible, setVisible } = useActionContext();
 | 
			
		||||
    const { exclude = [], cron, ...record } = useRecord();
 | 
			
		||||
    const { close } = useContext(DeleteEventContext);
 | 
			
		||||
@ -66,6 +67,8 @@ export const DeleteEvent = observer(() => {
 | 
			
		||||
      </Modal>,
 | 
			
		||||
      document.body,
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'DeleteEvent' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export default DeleteEvent;
 | 
			
		||||
 | 
			
		||||
@ -1,6 +1,9 @@
 | 
			
		||||
import { observer } from '@formily/react';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
 | 
			
		||||
export const Event = observer((props) => {
 | 
			
		||||
export const Event = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    return <>{props.children}</>;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Event' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,8 @@ import { navigate } from 'react-big-calendar/lib/utils/constants';
 | 
			
		||||
import { useDesignable } from '../../hooks';
 | 
			
		||||
import { CalendarToolbarContext } from './context';
 | 
			
		||||
 | 
			
		||||
export const Nav = observer((props) => {
 | 
			
		||||
export const Nav = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const { DesignableBar } = useDesignable();
 | 
			
		||||
    const { onNavigate } = useContext(CalendarToolbarContext);
 | 
			
		||||
    return (
 | 
			
		||||
@ -16,4 +17,6 @@ export const Nav = observer((props) => {
 | 
			
		||||
        <DesignableBar />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Nav' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,8 @@ import { useDesignable } from '../../hooks';
 | 
			
		||||
import { CalendarToolbarContext } from './context';
 | 
			
		||||
import { getLunarDay } from './utils';
 | 
			
		||||
 | 
			
		||||
export const Title = observer(() => {
 | 
			
		||||
export const Title = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    const { DesignableBar } = useDesignable();
 | 
			
		||||
    const { date, view, label, showLunar } = useContext(CalendarToolbarContext);
 | 
			
		||||
 | 
			
		||||
@ -22,4 +23,6 @@ export const Title = observer(() => {
 | 
			
		||||
        <DesignableBar />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Title' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,8 @@ import { useTranslation } from 'react-i18next';
 | 
			
		||||
import { useDesignable } from '../../hooks';
 | 
			
		||||
import { CalendarToolbarContext } from './context';
 | 
			
		||||
 | 
			
		||||
export const Today = observer((props) => {
 | 
			
		||||
export const Today = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const { DesignableBar } = useDesignable();
 | 
			
		||||
    const { onNavigate } = useContext(CalendarToolbarContext);
 | 
			
		||||
    const { t } = useTranslation();
 | 
			
		||||
@ -20,4 +21,6 @@ export const Today = observer((props) => {
 | 
			
		||||
        <DesignableBar />
 | 
			
		||||
      </Button>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Today' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,8 @@ import React, { useContext } from 'react';
 | 
			
		||||
import { useDesignable } from '../../hooks';
 | 
			
		||||
import { CalendarToolbarContext } from './context';
 | 
			
		||||
 | 
			
		||||
export const ViewSelect = observer((props) => {
 | 
			
		||||
export const ViewSelect = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const { DesignableBar } = useDesignable();
 | 
			
		||||
    const {
 | 
			
		||||
      views,
 | 
			
		||||
@ -22,4 +23,6 @@ export const ViewSelect = observer((props) => {
 | 
			
		||||
        <DesignableBar />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ViewSelect' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -58,6 +58,6 @@ export const CollectionSelect = connect(
 | 
			
		||||
          ))}
 | 
			
		||||
        </div>
 | 
			
		||||
      );
 | 
			
		||||
    }),
 | 
			
		||||
    }, { displayName: 'CollectionSelectObserver' }),
 | 
			
		||||
  ),
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -15,7 +15,8 @@ const useDef = (options) => {
 | 
			
		||||
  return useRequest(() => Promise.resolve({ data: field.dataSource }), options);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const Filter: any = observer((props: any) => {
 | 
			
		||||
export const Filter: any = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { useDataSource = useDef } = props;
 | 
			
		||||
    const { options, dynamicComponent, className } = useProps(props);
 | 
			
		||||
    const field = useField<ObjectFieldModel>();
 | 
			
		||||
@ -43,7 +44,9 @@ export const Filter: any = observer((props: any) => {
 | 
			
		||||
        </DatePickerProvider>
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Filter' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
Filter.SaveDefaultValue = SaveDefaultValue;
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -11,7 +11,8 @@ import { Action } from '../action';
 | 
			
		||||
 | 
			
		||||
export const FilterActionContext = createContext<any>(null);
 | 
			
		||||
 | 
			
		||||
export const FilterAction = observer((props: any) => {
 | 
			
		||||
export const FilterAction = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { t } = useTranslation();
 | 
			
		||||
    const field = useField<Field>();
 | 
			
		||||
    const [visible, setVisible] = useState(false);
 | 
			
		||||
@ -87,7 +88,9 @@ export const FilterAction = observer((props: any) => {
 | 
			
		||||
        </Popover>
 | 
			
		||||
      </FilterActionContext.Provider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'FilterAction' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const SaveConditions = () => {
 | 
			
		||||
  const { fieldSchema, field, designable, dn } = useContext(FilterActionContext);
 | 
			
		||||
 | 
			
		||||
@ -9,7 +9,8 @@ import { RemoveConditionContext } from './context';
 | 
			
		||||
import { DynamicComponent } from './DynamicComponent';
 | 
			
		||||
import { useValues } from './useValues';
 | 
			
		||||
 | 
			
		||||
export const FilterItem = observer((props: any) => {
 | 
			
		||||
export const FilterItem = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { t } = useTranslation();
 | 
			
		||||
    const compile = useCompile();
 | 
			
		||||
    const remove = useContext(RemoveConditionContext);
 | 
			
		||||
@ -61,4 +62,6 @@ export const FilterItem = observer((props: any) => {
 | 
			
		||||
        </Space>
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'FilterItem' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -5,7 +5,8 @@ import { RemoveConditionContext } from './context';
 | 
			
		||||
import { FilterGroup } from './FilterGroup';
 | 
			
		||||
import { FilterItem } from './FilterItem';
 | 
			
		||||
 | 
			
		||||
export const FilterItems = observer((props) => {
 | 
			
		||||
export const FilterItems = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const field = useField<ArrayFieldModel>();
 | 
			
		||||
    return (
 | 
			
		||||
      <div>
 | 
			
		||||
@ -18,4 +19,6 @@ export const FilterItems = observer((props) => {
 | 
			
		||||
        })}
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'FilterItems' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -53,7 +53,8 @@ const divWrap = (schema: ISchema) => {
 | 
			
		||||
  };
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const FormItem: any = observer((props: any) => {
 | 
			
		||||
export const FormItem: any = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    useEnsureOperatorsValid();
 | 
			
		||||
 | 
			
		||||
    const field = useField<Field>();
 | 
			
		||||
@ -107,7 +108,9 @@ export const FormItem: any = observer((props: any) => {
 | 
			
		||||
        </BlockItem>
 | 
			
		||||
      </ACLCollectionFieldProvider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'FormItem' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
FormItem.Designer = function Designer() {
 | 
			
		||||
  const { getCollectionFields, getInterface, getCollectionJoinField, getCollection } = useCollectionManager();
 | 
			
		||||
 | 
			
		||||
@ -170,7 +170,8 @@ export const Form: React.FC<FormProps> & {
 | 
			
		||||
  FilterDesigner?: any;
 | 
			
		||||
  ReadPrettyDesigner?: any;
 | 
			
		||||
  Templates?: any;
 | 
			
		||||
} = observer((props) => {
 | 
			
		||||
} = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const field = useField<Field>();
 | 
			
		||||
    const { form, disabled, ...others } = useProps(props);
 | 
			
		||||
    const formDisabled = disabled || field.disabled;
 | 
			
		||||
@ -187,4 +188,6 @@ export const Form: React.FC<FormProps> & {
 | 
			
		||||
        </form>
 | 
			
		||||
      </ConfigProvider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Form' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,8 @@ import { useFormBlockContext } from '../../../block-provider';
 | 
			
		||||
import { useCollection } from '../../../collection-manager';
 | 
			
		||||
import { useCompile } from '../../hooks';
 | 
			
		||||
 | 
			
		||||
export const FormField: any = observer((props) => {
 | 
			
		||||
export const FormField: any = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
    const { getField } = useCollection();
 | 
			
		||||
    const field = useField();
 | 
			
		||||
@ -21,4 +22,6 @@ export const FormField: any = observer((props) => {
 | 
			
		||||
      }
 | 
			
		||||
    }, []);
 | 
			
		||||
    return <div>{props.children}</div>;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'FormField' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -83,7 +83,8 @@ const useDefaultValues = (opts: any = {}, props: FormProps = {}) => {
 | 
			
		||||
 | 
			
		||||
const FormBlockContext = createContext<any>(null);
 | 
			
		||||
 | 
			
		||||
export const Form: React.FC<FormProps> & { Designer?: any } = observer((props) => {
 | 
			
		||||
export const Form: React.FC<FormProps> & { Designer?: any } = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const { request, effects, initialValue, useValues = useDefaultValues, ...others } = props;
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
    const field = useField();
 | 
			
		||||
@ -110,7 +111,9 @@ export const Form: React.FC<FormProps> & { Designer?: any } = observer((props) =
 | 
			
		||||
        </Spin>
 | 
			
		||||
      </FormBlockContext.Provider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Form' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
Form.Designer = () => {
 | 
			
		||||
  const { name, title } = useCollection();
 | 
			
		||||
 | 
			
		||||
@ -49,10 +49,13 @@ export default observer(() => {
 | 
			
		||||
    },
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const Output = observer(() => {
 | 
			
		||||
  const Output = observer(
 | 
			
		||||
    () => {
 | 
			
		||||
      const form = useForm();
 | 
			
		||||
      return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
 | 
			
		||||
  });
 | 
			
		||||
    },
 | 
			
		||||
    { displayName: 'Output' },
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <SchemaComponentProvider scope={{ useCloseAction }} components={{ Output, Form, Action, Input, FormItem }}>
 | 
			
		||||
 | 
			
		||||
@ -38,10 +38,13 @@ export default observer(() => {
 | 
			
		||||
    },
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const Output = observer(() => {
 | 
			
		||||
  const Output = observer(
 | 
			
		||||
    () => {
 | 
			
		||||
      const form = useForm();
 | 
			
		||||
      return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
 | 
			
		||||
  });
 | 
			
		||||
    },
 | 
			
		||||
    { displayName: 'Output' },
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  const useSubmit = () => {
 | 
			
		||||
    const form = useForm();
 | 
			
		||||
 | 
			
		||||
@ -38,10 +38,13 @@ export default observer(() => {
 | 
			
		||||
    },
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const Output = observer(() => {
 | 
			
		||||
  const Output = observer(
 | 
			
		||||
    () => {
 | 
			
		||||
      const form = useForm();
 | 
			
		||||
      return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
 | 
			
		||||
  });
 | 
			
		||||
    },
 | 
			
		||||
    { displayName: 'Output' },
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  const useSubmit = () => {
 | 
			
		||||
    const form = useForm();
 | 
			
		||||
 | 
			
		||||
@ -54,10 +54,13 @@ export default observer(() => {
 | 
			
		||||
    },
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const Output = observer(() => {
 | 
			
		||||
  const Output = observer(
 | 
			
		||||
    () => {
 | 
			
		||||
      const form = useForm();
 | 
			
		||||
      return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
 | 
			
		||||
  });
 | 
			
		||||
    },
 | 
			
		||||
    { displayName: 'Output' },
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <SchemaComponentProvider scope={{ useCloseAction }} components={{ Output, Form, Action, Input, FormItem }}>
 | 
			
		||||
 | 
			
		||||
@ -69,10 +69,13 @@ export default observer(() => {
 | 
			
		||||
    },
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const Output = observer(() => {
 | 
			
		||||
  const Output = observer(
 | 
			
		||||
    () => {
 | 
			
		||||
      const form = useForm();
 | 
			
		||||
      return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
 | 
			
		||||
  });
 | 
			
		||||
    },
 | 
			
		||||
    { displayName: 'Output' },
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  const useSubmit = () => {
 | 
			
		||||
    const form = useForm();
 | 
			
		||||
 | 
			
		||||
@ -39,10 +39,13 @@ export default observer(() => {
 | 
			
		||||
    },
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const Output = observer(() => {
 | 
			
		||||
  const Output = observer(
 | 
			
		||||
    () => {
 | 
			
		||||
      const form = useForm();
 | 
			
		||||
      return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
 | 
			
		||||
  });
 | 
			
		||||
    },
 | 
			
		||||
    { displayName: 'Output' },
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  const useSubmit = () => {
 | 
			
		||||
    const form = useForm();
 | 
			
		||||
 | 
			
		||||
@ -36,10 +36,13 @@ const schema: ISchema = {
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const Output = observer(() => {
 | 
			
		||||
const Output = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    const form = useForm();
 | 
			
		||||
    return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Output' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const useSubmit = () => {
 | 
			
		||||
  const form = useForm();
 | 
			
		||||
 | 
			
		||||
@ -127,7 +127,8 @@ export const G2PlotRenderer = forwardRef(function <O = any>(props: ReactG2PlotPr
 | 
			
		||||
  return <div className={cls(['g2plot', className])} ref={containerRef} />;
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
export const G2Plot: any = observer((props: any) => {
 | 
			
		||||
export const G2Plot: any = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { plot, config } = props;
 | 
			
		||||
    const field = useField<Field>();
 | 
			
		||||
    const { t } = useTranslation();
 | 
			
		||||
@ -171,7 +172,9 @@ export const G2Plot: any = observer((props: any) => {
 | 
			
		||||
        />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'G2Plot' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
G2Plot.Designer = G2PlotDesigner;
 | 
			
		||||
G2Plot.plots = plots;
 | 
			
		||||
 | 
			
		||||
@ -1,6 +1,9 @@
 | 
			
		||||
import { observer } from '@formily/react';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
 | 
			
		||||
export const Event = observer((props) => {
 | 
			
		||||
export const Event = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    return <>{props.children}</>;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Event' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,8 @@ import { observer, useFieldSchema } from '@formily/react';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
import { DragHandler } from '../../';
 | 
			
		||||
 | 
			
		||||
export const Block = observer((props) => {
 | 
			
		||||
export const Block = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
    return (
 | 
			
		||||
      <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
 | 
			
		||||
@ -10,4 +11,6 @@ export const Block = observer((props) => {
 | 
			
		||||
        <DragHandler />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Block' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -330,7 +330,8 @@ export const useGridRowContext = () => {
 | 
			
		||||
  return useContext(GridRowContext);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const Grid: any = observer((props: any) => {
 | 
			
		||||
export const Grid: any = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const gridRef = useRef(null);
 | 
			
		||||
    const field = useField();
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
@ -344,7 +345,9 @@ export const Grid: any = observer((props: any) => {
 | 
			
		||||
    }, [gridRef.current]);
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
    <GridContext.Provider value={{ ref: gridRef, fieldSchema, renderSchemaInitializer: render, InitializerComponent }}>
 | 
			
		||||
      <GridContext.Provider
 | 
			
		||||
        value={{ ref: gridRef, fieldSchema, renderSchemaInitializer: render, InitializerComponent }}
 | 
			
		||||
      >
 | 
			
		||||
        <div className={'nb-grid'} style={{ position: 'relative' }} ref={gridRef}>
 | 
			
		||||
          <DndWrapper dndContext={props.dndContext}>
 | 
			
		||||
            <RowDivider
 | 
			
		||||
@ -381,9 +384,12 @@ export const Grid: any = observer((props: any) => {
 | 
			
		||||
        </div>
 | 
			
		||||
      </GridContext.Provider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Grid' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
Grid.Row = observer(() => {
 | 
			
		||||
Grid.Row = observer(
 | 
			
		||||
  () => {
 | 
			
		||||
    const field = useField();
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
    const addr = field.address.toString();
 | 
			
		||||
@ -436,9 +442,12 @@ Grid.Row = observer(() => {
 | 
			
		||||
        </div>
 | 
			
		||||
      </GridRowContext.Provider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Grid.Row' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
Grid.Col = observer((props: any) => {
 | 
			
		||||
Grid.Col = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { cols = [] } = useContext(GridRowContext);
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
    const field = useField();
 | 
			
		||||
@ -467,4 +476,6 @@ Grid.Col = observer((props: any) => {
 | 
			
		||||
        </div>
 | 
			
		||||
      </GridColContext.Provider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Grid.Col' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,8 @@ import { observer, useFieldSchema } from '@formily/react';
 | 
			
		||||
import { BlockItem, DragHandler, Grid, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
 | 
			
		||||
const Block = observer((props) => {
 | 
			
		||||
const Block = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
    return (
 | 
			
		||||
      <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
 | 
			
		||||
@ -10,7 +11,9 @@ const Block = observer((props) => {
 | 
			
		||||
        <DragHandler />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Block' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const schema = {
 | 
			
		||||
  _isJSONSchemaObject: true,
 | 
			
		||||
 | 
			
		||||
@ -10,7 +10,8 @@ import { RecordProvider } from '../../../record-provider';
 | 
			
		||||
import { SchemaComponentOptions } from '../../core/SchemaComponentOptions';
 | 
			
		||||
import { KanbanCardContext } from './context';
 | 
			
		||||
 | 
			
		||||
export const KanbanCard: any = observer((props: any) => {
 | 
			
		||||
export const KanbanCard: any = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { setDisableCardDrag, cardViewerSchema, card, cardField, columnIndex, cardIndex } =
 | 
			
		||||
      useContext(KanbanCardContext);
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
@ -104,4 +105,6 @@ export const KanbanCard: any = observer((props: any) => {
 | 
			
		||||
        )}
 | 
			
		||||
      </SchemaComponentOptions>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'KanbanCard' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,8 @@
 | 
			
		||||
import { observer } from '@formily/react';
 | 
			
		||||
 | 
			
		||||
export const KanbanCardViewer: any = observer((props: any) => {
 | 
			
		||||
export const KanbanCardViewer: any = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    return props.children;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'KanbanCardViewer' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -55,7 +55,8 @@ export const toColumns = (groupField: any, dataSource: Array<any> = []) => {
 | 
			
		||||
  return Object.values(columns);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const Kanban: any = observer((props: any) => {
 | 
			
		||||
export const Kanban: any = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { groupField, onCardDragEnd, ...restProps } = useProps(props);
 | 
			
		||||
    const field = useField<ArrayField>();
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
@ -154,4 +155,6 @@ export const Kanban: any = observer((props: any) => {
 | 
			
		||||
        </Board>
 | 
			
		||||
      </Spin>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Kanban' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -41,7 +41,8 @@ const MarkdownEditor = (props: any) => {
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const MarkdownVoid: any = observer((props: any) => {
 | 
			
		||||
export const MarkdownVoid: any = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { content, className } = props;
 | 
			
		||||
    const field = useField();
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
@ -79,6 +80,8 @@ export const MarkdownVoid: any = observer((props: any) => {
 | 
			
		||||
    ) : (
 | 
			
		||||
      <div className={cls(['nb-markdown', className])} dangerouslySetInnerHTML={{ __html: html }} />
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'MarkdownVoid' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
MarkdownVoid.Designer = MarkdownVoidDesigner;
 | 
			
		||||
 | 
			
		||||
@ -23,7 +23,8 @@ const schema = {
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const Editable = observer((props: any) => {
 | 
			
		||||
const Editable = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const filed = useField<any>();
 | 
			
		||||
    if (filed.editable) {
 | 
			
		||||
      return props.children;
 | 
			
		||||
@ -40,7 +41,9 @@ const Editable = observer((props: any) => {
 | 
			
		||||
        <div>{props.children}</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Editable' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export default () => {
 | 
			
		||||
  return (
 | 
			
		||||
 | 
			
		||||
@ -136,7 +136,8 @@ const useSideMenuRef = () => {
 | 
			
		||||
 | 
			
		||||
const MenuItemDesignerContext = createContext(null);
 | 
			
		||||
 | 
			
		||||
export const Menu: ComposedMenu = observer((props) => {
 | 
			
		||||
export const Menu: ComposedMenu = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const {
 | 
			
		||||
      onSelect,
 | 
			
		||||
      mode,
 | 
			
		||||
@ -344,9 +345,12 @@ export const Menu: ComposedMenu = observer((props) => {
 | 
			
		||||
        </MenuItemDesignerContext.Provider>
 | 
			
		||||
      </DndContext>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Menu' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
Menu.Item = observer((props) => {
 | 
			
		||||
Menu.Item = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const { icon, ...others } = props;
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
    const field = useField();
 | 
			
		||||
@ -380,9 +384,12 @@ Menu.Item = observer((props) => {
 | 
			
		||||
        </SortableItem>
 | 
			
		||||
      </AntdMenu.Item>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'MenuItem' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
Menu.URL = observer((props) => {
 | 
			
		||||
Menu.URL = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const { icon, ...others } = props;
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
    const field = useField();
 | 
			
		||||
@ -419,9 +426,12 @@ Menu.URL = observer((props) => {
 | 
			
		||||
        </SortableItem>
 | 
			
		||||
      </AntdMenu.Item>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'MenuURL' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
Menu.SubMenu = observer((props) => {
 | 
			
		||||
Menu.SubMenu = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const { icon, ...others } = props;
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
    const field = useField();
 | 
			
		||||
@ -451,6 +461,8 @@ Menu.SubMenu = observer((props) => {
 | 
			
		||||
        <RecursionField schema={schema} onlyRenderProperties />
 | 
			
		||||
      </AntdMenu.SubMenu>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'MenuSubMenu' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
Menu.Designer = MenuDesigner;
 | 
			
		||||
 | 
			
		||||
@ -3,7 +3,8 @@ import { Pagination as AntdPagination } from 'antd';
 | 
			
		||||
import React, { KeyboardEventHandler } from 'react';
 | 
			
		||||
import { useProps } from '../../hooks/useProps';
 | 
			
		||||
 | 
			
		||||
export const Pagination = observer((props: any) => {
 | 
			
		||||
export const Pagination = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { hidden, ...others } = useProps(props);
 | 
			
		||||
    if (hidden) {
 | 
			
		||||
      return null;
 | 
			
		||||
@ -19,4 +20,6 @@ export const Pagination = observer((props: any) => {
 | 
			
		||||
        <AntdPagination {...others} />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Pagination' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -25,7 +25,8 @@ const toValue = (value, placeholder) => {
 | 
			
		||||
  return value;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
 | 
			
		||||
export const ReadPrettyRecordPicker: React.FC = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { ellipsis } = props;
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
    const recordCtx = useRecord();
 | 
			
		||||
@ -119,4 +120,6 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
 | 
			
		||||
        </BlockAssociationContext.Provider>
 | 
			
		||||
      </div>
 | 
			
		||||
    ) : null;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ReadPrettyRecordPicker' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,8 @@ import { useRequest } from '../../../api-client';
 | 
			
		||||
import { useRecord } from '../../../record-provider';
 | 
			
		||||
import { useActionContext } from '../action';
 | 
			
		||||
 | 
			
		||||
export const ReadPretty = observer((props: any) => {
 | 
			
		||||
export const ReadPretty = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
 | 
			
		||||
    const field = useField<any>();
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
@ -36,4 +37,6 @@ export const ReadPretty = observer((props: any) => {
 | 
			
		||||
    );
 | 
			
		||||
 | 
			
		||||
    return <Select.ReadPretty {...props} options={data?.data}></Select.ReadPretty>;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ReadPretty' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -12,7 +12,8 @@ type Composed = {
 | 
			
		||||
  Object?: React.FC<any>;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const ReadPretty = observer((props: any) => {
 | 
			
		||||
export const ReadPretty = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
 | 
			
		||||
    const field = useField<any>();
 | 
			
		||||
    const compile = useCompile();
 | 
			
		||||
@ -37,4 +38,6 @@ export const ReadPretty = observer((props: any) => {
 | 
			
		||||
        </EllipsisWithTooltip>
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ReadPretty' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -42,7 +42,8 @@ export const designerCss = css`
 | 
			
		||||
  }
 | 
			
		||||
`;
 | 
			
		||||
 | 
			
		||||
export const TableColumnActionBar = observer((props) => {
 | 
			
		||||
export const TableColumnActionBar = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const Designer = useDesigner();
 | 
			
		||||
    return (
 | 
			
		||||
      <SortableItem className={designerCss}>
 | 
			
		||||
@ -50,4 +51,6 @@ export const TableColumnActionBar = observer((props) => {
 | 
			
		||||
        {props.children}
 | 
			
		||||
      </SortableItem>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'TableColumnActionBar' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -163,7 +163,8 @@ const useValidator = (validator: (value: any) => string) => {
 | 
			
		||||
  }, []);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const Table: any = observer((props: any) => {
 | 
			
		||||
export const Table: any = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { pagination: pagination1, useProps, onChange, ...others1 } = props;
 | 
			
		||||
    const { pagination: pagination2, onClickRow, ...others2 } = useProps?.() || {};
 | 
			
		||||
    const {
 | 
			
		||||
@ -498,4 +499,6 @@ export const Table: any = observer((props: any) => {
 | 
			
		||||
        )}
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Table' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,8 @@ import { useCollection } from '../../../collection-manager';
 | 
			
		||||
import { useCompile } from '../../hooks';
 | 
			
		||||
import { ActionBar } from '../action';
 | 
			
		||||
 | 
			
		||||
export const TableField: any = observer((props) => {
 | 
			
		||||
export const TableField: any = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
    const { getField } = useCollection();
 | 
			
		||||
    const field = useField<Field>();
 | 
			
		||||
@ -26,9 +27,12 @@ export const TableField: any = observer((props) => {
 | 
			
		||||
      field.decoratorProps.asterisk = fieldSchema.required;
 | 
			
		||||
    }, [fieldSchema.required]);
 | 
			
		||||
    return <div>{props.children}</div>;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'TableField' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
TableField.ActionBar = observer((props) => {
 | 
			
		||||
TableField.ActionBar = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const form = useForm();
 | 
			
		||||
    if (form.readPretty) {
 | 
			
		||||
      return null;
 | 
			
		||||
@ -38,4 +42,6 @@ TableField.ActionBar = observer((props) => {
 | 
			
		||||
        <ActionBar {...props} />
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'TableField.ActionBar' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,8 @@ import { SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 | 
			
		||||
import { Table, TableColumnType } from 'antd';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
 | 
			
		||||
const ArrayTable = observer((props: any) => {
 | 
			
		||||
const ArrayTable = observer(
 | 
			
		||||
  (props: any) => {
 | 
			
		||||
    const { rowKey } = props;
 | 
			
		||||
    const field = useField<ArrayField>();
 | 
			
		||||
    const schema = useFieldSchema();
 | 
			
		||||
@ -24,7 +25,9 @@ const ArrayTable = observer((props: any) => {
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    return <Table {...props} rowKey={rowKey} columns={columns} dataSource={field.value} />;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'ArrayTable' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const Value = connect((props) => {
 | 
			
		||||
  return <li>value: {props.value}</li>;
 | 
			
		||||
 | 
			
		||||
@ -151,7 +151,8 @@ const useDefAction = () => {
 | 
			
		||||
  };
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const TableArray: React.FC<any> = observer((props) => {
 | 
			
		||||
export const TableArray: React.FC<any> = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const field = useField<ArrayField>();
 | 
			
		||||
    const columns = useTableColumns();
 | 
			
		||||
    const {
 | 
			
		||||
@ -287,4 +288,6 @@ export const TableArray: React.FC<any> = observer((props) => {
 | 
			
		||||
        </ReactDragListView>
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'TableArray' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -42,7 +42,8 @@ export const designerCss = css`
 | 
			
		||||
  }
 | 
			
		||||
`;
 | 
			
		||||
 | 
			
		||||
export const TableColumnActionBar = observer((props) => {
 | 
			
		||||
export const TableColumnActionBar = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const Designer = useDesigner();
 | 
			
		||||
    return (
 | 
			
		||||
      <SortableItem className={designerCss}>
 | 
			
		||||
@ -50,4 +51,6 @@ export const TableColumnActionBar = observer((props) => {
 | 
			
		||||
        {props.children}
 | 
			
		||||
      </SortableItem>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'TableColumnActionBar' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -9,7 +9,8 @@ type Props = TableProps<any> & { value?: any; onChange?: any; objectValue?: bool
 | 
			
		||||
 | 
			
		||||
const toArr = (value: any) => (isArr(value) ? value : isValid(value) ? [value] : []);
 | 
			
		||||
 | 
			
		||||
export const TableRowSelection = observer((props: Props) => {
 | 
			
		||||
export const TableRowSelection = observer(
 | 
			
		||||
  (props: Props) => {
 | 
			
		||||
    const { rowKey = 'id', objectValue } = props;
 | 
			
		||||
    const field = useField<Field>();
 | 
			
		||||
    const rowSelection: any = {
 | 
			
		||||
@ -25,4 +26,6 @@ export const TableRowSelection = observer((props: Props) => {
 | 
			
		||||
      },
 | 
			
		||||
    };
 | 
			
		||||
    return <TableVoid {...props} rowSelection={rowSelection} />;
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'TableRowSelection' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -80,7 +80,8 @@ const useDefSelectedRowKeys = () => {
 | 
			
		||||
  return [result?.state?.selectedRowKeys, (selectedRowKeys) => result?.setState?.({ selectedRowKeys })];
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const TableVoid: React.FC<TableVoidProps> = observer((props) => {
 | 
			
		||||
export const TableVoid: React.FC<TableVoidProps> = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const { rowKey = 'id', useDataSource = useDef, useSelectedRowKeys = useDefSelectedRowKeys } = props;
 | 
			
		||||
    const field = useField<Field>();
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
@ -121,4 +122,6 @@ export const TableVoid: React.FC<TableVoidProps> = observer((props) => {
 | 
			
		||||
        </FormContext.Provider>
 | 
			
		||||
      </AsyncDataProvider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'TableVoid' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
@ -184,7 +184,8 @@ const schema: ISchema = {
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const DataSourceProvider = observer((props) => {
 | 
			
		||||
const DataSourceProvider = observer(
 | 
			
		||||
  (props) => {
 | 
			
		||||
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
 | 
			
		||||
    const [dataSource, setDataSource] = useState([]);
 | 
			
		||||
    const service = useRequest(
 | 
			
		||||
@ -217,7 +218,9 @@ const DataSourceProvider = observer((props) => {
 | 
			
		||||
        {props.children}
 | 
			
		||||
      </DataSourceContext.Provider>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'DataSourceProvider' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export default () => {
 | 
			
		||||
  return (
 | 
			
		||||
 | 
			
		||||
@ -9,7 +9,8 @@ import { DndContext, SortableItem } from '../../common';
 | 
			
		||||
import { useDesigner } from '../../hooks/useDesigner';
 | 
			
		||||
import { TabsDesigner } from './Tabs.Designer';
 | 
			
		||||
 | 
			
		||||
export const Tabs: any = observer((props: TabsProps) => {
 | 
			
		||||
export const Tabs: any = observer(
 | 
			
		||||
  (props: TabsProps) => {
 | 
			
		||||
    const fieldSchema = useFieldSchema();
 | 
			
		||||
    const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
 | 
			
		||||
    return (
 | 
			
		||||
@ -30,7 +31,9 @@ export const Tabs: any = observer((props: TabsProps) => {
 | 
			
		||||
        </AntdTabs>
 | 
			
		||||
      </DndContext>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'Tabs' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const designerCss = css`
 | 
			
		||||
  position: relative;
 | 
			
		||||
@ -79,7 +82,8 @@ const designerCss = css`
 | 
			
		||||
  }
 | 
			
		||||
`;
 | 
			
		||||
 | 
			
		||||
Tabs.TabPane = observer((props: TabPaneProps & { icon?: any }) => {
 | 
			
		||||
Tabs.TabPane = observer(
 | 
			
		||||
  (props: TabPaneProps & { icon?: any }) => {
 | 
			
		||||
    const Designer = useDesigner();
 | 
			
		||||
    const field = useField();
 | 
			
		||||
    return (
 | 
			
		||||
@ -88,6 +92,8 @@ Tabs.TabPane = observer((props: TabPaneProps & { icon?: any }) => {
 | 
			
		||||
        <Designer />
 | 
			
		||||
      </SortableItem>
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
  },
 | 
			
		||||
  { displayName: 'TabPane' },
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
Tabs.Designer = TabsDesigner;
 | 
			
		||||
 | 
			
		||||
Some files were not shown because too many files have changed in this diff Show More
		Loading…
	
		Reference in New Issue
	
	Block a user