feat(html): add actionsheet view wrapper

Author: zhpenkov

packages/html/src/action-sheet/action-sheet.spec.tsx

@@ -2,6 +2,7 @@ import { classNames } from '../misc';
 import { AnimationContainer } from '../animation-container';
 import { ActionSheetFooter } from './actionsheet-footer';
 import { ActionSheetHeader } from './actionsheet-header';
+import { ActionSheetView } from './actionsheet-view';
 
 export const ACTIONSHEET_CLASSNAME = `k-actionsheet`;
 
@@ -16,6 +17,7 @@ export type KendoActionSheetProps = {
     fullscreen?: boolean;
     adaptive?: boolean;
     overlay?: boolean;
+    template?: React.JSX.Element | React.JSX.Element[];
     side?: 'top' | 'right' | 'bottom' | 'left';
 }
 
@@ -35,15 +37,13 @@ export const ActionSheet = (
         fullscreen = defaultOptions.fullscreen,
         adaptive = defaultOptions.adaptive,
         overlay = defaultOptions.overlay,
+        template,
         children,
         header,
         footer,
         ...other
     } = props;
 
-    const _ActionSheetHeader = header?.type === ActionSheetHeader && <ActionSheetHeader adaptive={adaptive} {...header?.props} />;
-    const _ActionSheetFooter = footer?.type === ActionSheetFooter && <ActionSheetFooter {...footer?.props} />;
-
     return (
         <div className="k-actionsheet-container">
             {overlay && <div className="k-overlay"></div>}
@@ -66,13 +66,11 @@ export const ActionSheet = (
                             'k-adaptive-actionsheet': adaptive
                         },
                     )}>
-                    <>
-                        {_ActionSheetHeader}
-                        <div className="k-actionsheet-content">
+                    {template ? template :
+                        <ActionSheetView header={header} footer={footer} adaptive={adaptive} {...props}>
                             {children}
-                        </div>
-                        {_ActionSheetFooter}
-                    </>
+                        </ActionSheetView>
+                    }
                 </div>
             </AnimationContainer>
         </div>

packages/html/src/action-sheet/actionsheet-view.tsx

@@ -0,0 +1,55 @@
+import { classNames } from '../misc';
+import { ActionSheetFooter } from './actionsheet-footer';
+import { ActionSheetHeader } from './actionsheet-header';
+
+export const ACTIONSHEETVIEW_CLASSNAME = `k-actionsheet-view`;
+
+const states = [];
+
+const options = {};
+
+const defaultOptions = {};
+
+export type KendoActionSheetViewProps = {
+    children?: React.JSX.Element | React.JSX.Element[];
+    header?: React.ReactElement<typeof ActionSheetHeader>;
+    footer?: React.ReactElement<typeof ActionSheetFooter>;
+    adaptive?: boolean;
+}
+
+export const ActionSheetView = (
+    props: KendoActionSheetViewProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        adaptive,
+        children,
+        header,
+        footer,
+        ...other
+    } = props;
+
+    const _ActionSheetHeader = header?.type === ActionSheetHeader && <ActionSheetHeader adaptive={adaptive} {...header?.props} />;
+    const _ActionSheetFooter = footer?.type === ActionSheetFooter && <ActionSheetFooter {...footer?.props} />;
+
+    return (
+        <div {...other}
+            className={classNames(
+                props.className,
+                ACTIONSHEETVIEW_CLASSNAME)}
+        >
+            {_ActionSheetHeader}
+            <div className="k-actionsheet-content" >
+                {children}
+            </div>
+            {_ActionSheetFooter}
+        </div >
+    );
+};
+
+ActionSheetView.states = states;
+ActionSheetView.options = options;
+ActionSheetView.className = ACTIONSHEETVIEW_CLASSNAME;
+ActionSheetView.defaultOptions = defaultOptions;
+
+export default ActionSheetView;

packages/html/src/action-sheet/index.ts

@@ -1,4 +1,5 @@
 export * from './action-sheet.spec';
+export * from './actionsheet-view';
 export * from './actionsheet-header';
 export * from './actionsheet-footer';
 export * from './actionsheet-items';