@progress/kendo-themes-html 5.8.2-dev.4 → 5.8.2-dev.6

package/src/timepicker/tests/timepicker-adaptive.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Button } from '../../button';
+import { ActionSheet, ActionSheetFooter, ActionSheetHeader } from '../../action-sheet';
 import { TimeSelector } from '../../time-selector';
 
 const root = ReactDOM.createRoot(
@@ -25,50 +25,31 @@ root.render(
             <span>full screen</span>
 
             <section>
-                <div className="k-actionsheet-container">
-                    <div className="k-overlay"></div>
 
-                    <div className="k-actionsheet k-actionsheet-bottom k-adaptive-actionsheet">
-                        <div className="k-actionsheet-titlebar">
-                            <div className="k-actionsheet-title k-text-center">
-                                <div>Select dates</div>
-                                <div className="k-text-muted">DD / MM / YY</div>
-                            </div>
-                            <div className="k-actionsheet-actions">
-                                <Button icon="x" fillMode="flat"></Button>
-                            </div>
-                        </div>
-                        <div className="k-actionsheet-content">
-                            <TimeSelector size="large"></TimeSelector>
-                        </div>
-                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
-                            <Button size="large" themeColor="primary">Select date</Button>
-                        </div>
-                    </div>
-                </div>
+                <ActionSheet adaptive={true}>
+                    <ActionSheetHeader
+                        actions={[ 'x' ]}
+                        title="Select Dates"
+                        subTitle="DD / MM / YY">
+                    </ActionSheetHeader>
+
+                    <TimeSelector size="large"></TimeSelector>
+
+                    <ActionSheetFooter actions={[ '!Select Date' ]} />
+                </ActionSheet>
             </section>
             <section>
-                <div className="k-actionsheet-container">
-                    <div className="k-overlay"></div>
+                <ActionSheet adaptive={true} fullscreen>
+                    <ActionSheetHeader
+                        actions={[ 'x' ]}
+                        title="Select Dates"
+                        subTitle="DD / MM / YY">
+                    </ActionSheetHeader>
+
+                    <TimeSelector size="large"></TimeSelector>
 
-                    <div className="k-actionsheet k-actionsheet-bottom k-actionsheet-fullscreen k-adaptive-actionsheet">
-                        <div className="k-actionsheet-titlebar">
-                            <div className="k-actionsheet-title k-text-center">
-                                <div>Select dates</div>
-                                <div className="k-text-muted">DD / MM / YY</div>
-                            </div>
-                            <div className="k-actionsheet-actions">
-                                <Button icon="x" fillMode="flat"></Button>
-                            </div>
-                        </div>
-                        <div className="k-actionsheet-content">
-                            <TimeSelector size="large"></TimeSelector>
-                        </div>
-                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
-                            <Button size="large" themeColor="primary">Select date</Button>
-                        </div>
-                    </div>
-                </div>
+                    <ActionSheetFooter actions={[ '!Select Date' ]} />
+                </ActionSheet>
             </section>
         </div>