@hzab/form-render 1.7.11 → 1.7.13

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# @hzab/form-render@1.7.13
+
+feat: ArrayBase 相关 api 暴露
+
+# @hzab/form-render@1.7.12
+
+feat: ArrayBase 暴露 useArray useIndex useRecord
+feat: ArrayTable onSortStart onSortEnd 回调
+
 # @hzab/form-render@1.7.11
 
 feat: 只读模式 PreviewText emptyValue 配置

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.7.11",
+  "version": "1.7.13",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/ArrayBase/index.tsx

@@ -52,37 +52,39 @@ export interface IArrayBaseProps {
   onRemove?: (index: number) => void;
   onMoveDown?: (index: number) => void;
   onMoveUp?: (index: number) => void;
+  onSortStart?: (e) => void;
+  onSortEnd?: (e) => void;
   deletePopconfirmTitle?: () => ReactNode;
   deletePopconfirm?: boolean;
 }
 
-type ComposedArrayBase = React.FC<React.PropsWithChildren<IArrayBaseProps>> &
+export type ComposedArrayBase = React.FC<React.PropsWithChildren<IArrayBaseProps>> &
   ArrayBaseMixins & {
     Item?: React.FC<React.PropsWithChildren<IArrayBaseItemProps>>;
     mixin?: <T extends JSXComponent>(target: T) => T & ArrayBaseMixins;
   };
 
-const ArrayBaseContext = createContext<IArrayBaseContext>(null);
+export const ArrayBaseContext = createContext<IArrayBaseContext>(null);
 
-const ItemContext = createContext<IArrayBaseItemProps>(null);
+export const ItemContext = createContext<IArrayBaseItemProps>(null);
 
-const takeRecord = (val: any, index?: number) => (typeof val === "function" ? val(index) : val);
+export const takeRecord = (val: any, index?: number) => (typeof val === "function" ? val(index) : val);
 
-const useArray = () => {
+export const useArray = () => {
   return useContext(ArrayBaseContext);
 };
 
-const useIndex = (index?: number) => {
+export const useIndex = (index?: number) => {
   const ctx = useContext(ItemContext);
   return ctx ? ctx.index : index;
 };
 
-const useRecord = (record?: number) => {
+export const useRecord = (record?: number) => {
   const ctx = useContext(ItemContext);
   return takeRecord(ctx ? ctx.record : record, ctx?.index);
 };
 
-const getSchemaDefaultValue = (schema: Schema) => {
+export const getSchemaDefaultValue = (schema: Schema) => {
   if (schema?.type === "array") return [];
   if (schema?.type === "object") return {};
   if (schema?.type === "void") {
@@ -93,7 +95,7 @@ const getSchemaDefaultValue = (schema: Schema) => {
   }
 };
 
-const getDefaultValue = (defaultValue: any, schema: Schema) => {
+export const getDefaultValue = (defaultValue: any, schema: Schema) => {
   if (isValid(defaultValue)) return clone(defaultValue);
   if (Array.isArray(schema?.items)) return getSchemaDefaultValue(schema?.items[0]);
   return getSchemaDefaultValue(schema?.items);
@@ -109,7 +111,7 @@ ArrayBase.Item = ({ children, ...props }) => {
   return <ItemContext.Provider value={props}>{children}</ItemContext.Provider>;
 };
 
-const SortHandle = SortableHandle((props: any) => {
+export const SortHandle = SortableHandle((props: any) => {
   const prefixCls = usePrefixCls("formily-array-base");
   return (
     <MenuOutlined {...props} className={cls(`${prefixCls}-sort-handle`, props.className)} style={{ ...props.style }} />

package/src/components/ArrayCards/index.tsx

@@ -8,33 +8,33 @@ import { ISchema } from "@formily/json-schema";
 import { usePrefixCls } from "c-formily-antd/lib/__builtins__";
 import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from "../ArrayBase";
 
-type ComposedArrayCards = React.FC<React.PropsWithChildren<CardProps & IArrayBaseProps>> & ArrayBaseMixins;
+export type ComposedArrayCards = React.FC<React.PropsWithChildren<CardProps & IArrayBaseProps>> & ArrayBaseMixins;
 
-const isAdditionComponent = (schema: ISchema) => {
+export const isAdditionComponent = (schema: ISchema) => {
   return schema["x-component"]?.indexOf("Addition") > -1;
 };
 
-const isIndexComponent = (schema: ISchema) => {
+export const isIndexComponent = (schema: ISchema) => {
   return schema["x-component"]?.indexOf?.("Index") > -1;
 };
 
-const isRemoveComponent = (schema: ISchema) => {
+export const isRemoveComponent = (schema: ISchema) => {
   return schema["x-component"]?.indexOf?.("Remove") > -1;
 };
 
-const isCopyComponent = (schema: ISchema) => {
+export const isCopyComponent = (schema: ISchema) => {
   return schema["x-component"]?.indexOf?.("Copy") > -1;
 };
 
-const isMoveUpComponent = (schema: ISchema) => {
+export const isMoveUpComponent = (schema: ISchema) => {
   return schema["x-component"]?.indexOf?.("MoveUp") > -1;
 };
 
-const isMoveDownComponent = (schema: ISchema) => {
+export const isMoveDownComponent = (schema: ISchema) => {
   return schema["x-component"]?.indexOf?.("MoveDown") > -1;
 };
 
-const isOperationComponent = (schema: ISchema) => {
+export const isOperationComponent = (schema: ISchema) => {
   return (
     isAdditionComponent(schema) ||
     isRemoveComponent(schema) ||

package/src/components/ArrayTable/index.tsx

@@ -11,14 +11,14 @@ import { Schema } from "@formily/json-schema";
 import { usePrefixCls, SortableContainer, SortableElement } from "c-formily-antd/lib/__builtins__";
 import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from "../ArrayBase";
 
-interface ObservableColumnSource {
+export interface ObservableColumnSource {
   field: GeneralField;
   columnProps: ColumnProps<any>;
   schema: Schema;
   display: FieldDisplayTypes;
   name: string;
 }
-interface IArrayTablePaginationProps extends PaginationProps {
+export interface IArrayTablePaginationProps extends PaginationProps {
   dataSource?: any[];
   showPagination?: boolean;
   children?: (
@@ -30,38 +30,38 @@ interface IArrayTablePaginationProps extends PaginationProps {
   ) => React.ReactElement;
 }
 
-interface IStatusSelectProps extends SelectProps<any> {
+export interface IStatusSelectProps extends SelectProps<any> {
   pageSize?: number;
 }
 
-type ComposedArrayTable = React.FC<React.PropsWithChildren<TableProps<any> & IArrayBaseProps>> &
+export type ComposedArrayTable = React.FC<React.PropsWithChildren<TableProps<any> & IArrayBaseProps>> &
   ArrayBaseMixins & {
     Column?: React.FC<React.PropsWithChildren<ColumnProps<any>>>;
   };
 
-interface PaginationAction {
+export interface PaginationAction {
   totalPage?: number;
   pageSize?: number;
   showPagination?: boolean;
   changePage?: (page: number) => void;
 }
 
-const SortableRow = SortableElement((props: any) => <tr {...props} />);
-const SortableBody = SortableContainer((props: any) => <tbody {...props} />);
+export const SortableRow = SortableElement((props: any) => <tr {...props} />);
+export const SortableBody = SortableContainer((props: any) => <tbody {...props} />);
 
-const isColumnComponent = (schema: Schema) => {
+export const isColumnComponent = (schema: Schema) => {
   return schema["x-component"]?.indexOf("Column") > -1;
 };
 
-const isOperationsComponent = (schema: Schema) => {
+export const isOperationsComponent = (schema: Schema) => {
   return schema["x-component"]?.indexOf("Operations") > -1;
 };
 
-const isAdditionComponent = (schema: Schema) => {
+export const isAdditionComponent = (schema: Schema) => {
   return schema["x-component"]?.indexOf("Addition") > -1;
 };
 
-const useArrayTableSources = () => {
+export const useArrayTableSources = () => {
   const arrayField = useField();
   const schema = useFieldSchema();
   const parseSources = (schema: Schema): ObservableColumnSource[] => {
@@ -105,7 +105,7 @@ const useArrayTableSources = () => {
   return parseArrayItems(schema.items);
 };
 
-const useArrayTableColumns = (
+export const useArrayTableColumns = (
   dataSource: any[],
   field: ArrayField,
   sources: ObservableColumnSource[],
@@ -130,7 +130,7 @@ const useArrayTableColumns = (
   }, []);
 };
 
-const useAddition = () => {
+export const useAddition = () => {
   const schema = useFieldSchema();
   return schema.reduceProperties((addition, schema, key) => {
     if (isAdditionComponent(schema)) {
@@ -140,11 +140,11 @@ const useAddition = () => {
   }, null);
 };
 
-const schedulerRequest = {
+export const schedulerRequest = {
   request: null,
 };
 
-const StatusSelect: ReactFC<IStatusSelectProps> = observer(
+export const StatusSelect: ReactFC<IStatusSelectProps> = observer(
   (props) => {
     const field = useField<ArrayField>();
     const prefixCls = usePrefixCls("formily-array-table");
@@ -193,8 +193,8 @@ const StatusSelect: ReactFC<IStatusSelectProps> = observer(
   },
 );
 
-const PaginationContext = createContext<PaginationAction>({});
-const usePagination = () => {
+export const PaginationContext = createContext<PaginationAction>({});
+export const usePagination = () => {
   return useContext(PaginationContext);
 };
 
@@ -313,10 +313,10 @@ export const ArrayTable: ComposedArrayTable = observer((props) => {
     });
   };
   const getWrapperComp = useCallback(
-    (dataSource: any[], start: number) => (props: any) =>
+    (dataSource: any[], start: number) => (wrapperProps: any) =>
       (
         <SortableBody
-          {...props}
+          {...wrapperProps}
           start={start}
           list={dataSource.slice()}
           accessibility={{
@@ -324,11 +324,14 @@ export const ArrayTable: ComposedArrayTable = observer((props) => {
           }}
           onSortStart={(event) => {
             addTdStyles(event.active.id as number);
+            props.onSortStart && props.onSortStart(event);
           }}
-          onSortEnd={({ oldIndex, newIndex }) => {
+          onSortEnd={(params) => {
+            const { oldIndex, newIndex } = params;
             field.move(oldIndex, newIndex);
+            props.onSortEnd && props.onSortEnd(params);
           }}
-          className={cls(`${prefixCls}-sort-helper`, props.className)}
+          className={cls(`${prefixCls}-sort-helper`, wrapperProps.className)}
         />
       ),
     [field],
@@ -389,7 +392,7 @@ ArrayTable.Column = () => {
 
 ArrayBase.mixin(ArrayTable);
 
-const Addition: ArrayBaseMixins["Addition"] = (props) => {
+export const Addition: ArrayBaseMixins["Addition"] = (props) => {
   const array = ArrayBase.useArray();
   const { totalPage = 0, pageSize = 10, changePage, showPagination } = usePagination();
   return (

package/src/index.tsx

@@ -179,13 +179,12 @@ const FormRender = forwardRef((props: any, parentRef) => {
         wrapperCol={props.schema.form.wrapperCol}
         onAutoSubmit={autoSubmit}
         onAutoSubmitFailed={autoSubmitFailed}
+        previewTextPlaceholder={props?.emptyValue}
       >
-        <PreviewText.Placeholder value={props?.emptyValue}>
-          <FormLayout {...formLayoutProps}>
-            <SchemaField schema={schema}></SchemaField>
-            <div className="form-render-footer xxm">{footer}</div>
-          </FormLayout>
-        </PreviewText.Placeholder>
+        <FormLayout {...formLayoutProps}>
+          <SchemaField schema={schema}></SchemaField>
+          <div className="form-render-footer xxm">{footer}</div>
+        </FormLayout>
       </Form>
     </GlobalPropsContext.Provider>
   );