feat(html): add swap button to daterangepicker html

telerik · Apr 15, 2022 · a43986e · a43986e
1 parent 62d9043
commit a43986e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/packages/html/lib/jsx-runtime.js b/packages/html/lib/jsx-runtime.js
@@ -33,6 +33,8 @@ const attrMap = {
 
     showcheckbox: 'showCheckbox',
 
+    swapbutton: 'swapButton',
+
     // Switch
     onlabel: 'onLabel',
     offlabel: 'offLabel',
@@ -84,6 +86,8 @@ const booleanAttr = new Set([
 
     'showCheckbox',
 
+    'swapButton',
+
     'loading',
 
     'virtualization',

diff --git a/packages/html/src/daterangepicker/daterangepicker.jsx b/packages/html/src/daterangepicker/daterangepicker.jsx
@@ -1,4 +1,6 @@
 import { globalDefaultProps, Component } from '../component/index';
+import { ButtonStatic } from '../button/index';
+import { IconStatic } from '../icon/index';
 import { FloatingLabelStatic } from '../input/index';
 import { DateInputStatic } from '../dateinput/index';
 
@@ -17,6 +19,8 @@ function DateRangePickerStatic(props) {
         rounded,
         fillMode,
 
+        swapButton,
+
         disabled,
 
         aria,
@@ -47,6 +51,11 @@ function DateRangePickerStatic(props) {
             <FloatingLabelStatic label="Start">
                 <DateInputStatic showSpinButton="false" {...dateInputAttributes}/>
             </FloatingLabelStatic>
+            {swapButton &&
+                <ButtonStatic className="k-icon-button" rounded={rounded} size={size} fillMode="flat" themeColor="base">
+                    <IconStatic className="k-button-icon" name="arrows-swap" style="transform: rotate(90deg);"/>
+                </ButtonStatic>
+            }
             <FloatingLabelStatic label="End">
                 <DateInputStatic showSpinButton="false" {...dateInputAttributes}/>
             </FloatingLabelStatic>
@@ -69,6 +78,8 @@ DateRangePickerStatic.propTypes = {
     rounded: typeof [ null, 'small', 'medium', 'large', 'full' ],
     fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
+    swapButton: typeof false,
+
     disabled: typeof false,
 
     aria: typeof false,