@progress/kendo-themes-html 5.8.2-dev.5 → 5.9.0

package/src/time-selector/time-selector.tsx

@@ -1,12 +1,19 @@
 import * as React from 'react';
 import { classNames, kendoThemeMaps } from '../utils';
-import { Button } from '../button';
+import { TimeSelectorHeader, TimeSelectorColumn, TimeSelectorFastSelection } from '../time-selector';
+
+
+export type timeType = 'dd' | 'HH' | 'mm' | 'ss' | 'SSS' | 'tt';
 
 export interface TimeSelectorProps {
+    header?: null | React.ReactElement<TimeSelectorHeader>;
+    fastSelection?: null | React.ReactElement<TimeSelectorFastSelection>;
     className?: string;
     value?: string;
     size?: null | 'small' | 'medium' | 'large';
-    disabled?: boolean;
+    columns: Array<timeType>;
+    focusedColumn?: null | timeType;
+    disabled?: null | boolean;
 }
 
 export class TimeSelector extends React.Component<TimeSelectorProps> {
@@ -18,10 +25,32 @@ export class TimeSelector extends React.Component<TimeSelectorProps> {
     render() {
 
         const {
+            header,
+            fastSelection,
             className,
-            size
+            size,
+            columns,
+            focusedColumn
         } = this.props;
 
+        const columnsDom = columns.map(function(columnType, index) {
+            let focus = false;
+            let separator = true;
+
+            if (columnType === focusedColumn) {
+                focus = true;
+            }
+            if (index === 0 || columnType === "tt") {
+                separator = false;
+            }
+
+            return (
+                <>
+                    <TimeSelectorColumn type={columnType} focus={focus} separator={separator}></TimeSelectorColumn>
+                </>
+            );
+        });
+
         return (
             <div
                 className={classNames(
@@ -32,153 +61,15 @@ export class TimeSelector extends React.Component<TimeSelectorProps> {
                     }
 
                 )}>
-                <div className="k-time-part">
-                    <div className="k-time-header">
-                        <span className="k-title">10:00:00 AM</span>
-                        <Button fillMode="flat" className="k-time-now">Now</Button>
-                    </div>
-                    <div className="k-time-list-container">
-                        <span className="k-time-highlight"></span>
-                        <div className="k-time-list-wrapper">
-                            <span className="k-title">Hour</span>
-                            <div className="k-time-list">
-                                <div className="k-content k-scrollable k-time-container">
-                                    <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
-                                        <li className="k-item">
-                                            <span>0</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>1</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>2</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>3</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>4</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>5</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>6</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>7</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>8</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>9</span>
-                                        </li>
-                                    </ul>
-                                    <div className="k-scrollable-placeholder"></div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="k-time-separator">:</div>
-                        <div className="k-time-list-wrapper k-focus">
-                            <span className="k-title">Minute</span>
-                            <div className="k-time-list">
-                                <div className="k-content k-scrollable k-time-container">
-                                    <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
-                                        <li className="k-item">
-                                            <span>0</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>1</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>2</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>3</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>4</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>5</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>6</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>7</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>8</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>9</span>
-                                        </li>
-                                    </ul>
-                                    <div className="k-scrollable-placeholder"></div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="k-time-separator">:</div>
-                        <div className="k-time-list-wrapper">
-                            <span className="k-title">Second</span>
-                            <div className="k-time-list">
-                                <div className="k-content k-scrollable k-time-container">
-                                    <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
-                                        <li className="k-item">
-                                            <span>0</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>1</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>2</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>3</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>4</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>5</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>6</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>7</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>8</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>9</span>
-                                        </li>
-                                    </ul>
-                                    <div className="k-scrollable-placeholder"></div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="k-time-separator">:</div>
-                        <div className="k-time-list-wrapper">
-                            <span className="k-title">AM/PM</span>
-                            <div className="k-time-list">
-                                <div className="k-content k-scrollable k-time-container">
-                                    <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
-                                        <li className="k-item">
-                                            <span>AM</span>
-                                        </li>
-                                        <li className="k-item">
-                                            <span>PM</span>
-                                        </li>
-                                    </ul>
-                                    <div className="k-scrollable-placeholder"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                <>
+                    {header}
+                </>
+                <>
+                    {fastSelection}
+                </>
+                <div className="k-time-list-container">
+                    <span className="k-time-highlight"></span>
+                    {columnsDom}
                 </div>
             </div>
         );

package/src/timedurationpicker/index.ts

@@ -0,0 +1 @@
+export * from './timedurationpicker';

package/src/timedurationpicker/tests/timedurationpicker-expanded.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { TimeDurationPicker } from '../../timedurationpicker';
+import { TimeSelector, TimeSelectorFastSelection } from '../../time-selector';
+import { Button } from '../../button';
+import { ActionButtons } from '../../action-buttons';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const style = `
+    .k-animation-container {
+        width: min-content;
+        max-width: 100%;
+        position: relative;
+        overflow: visible;
+    }
+`;
+
+root.render(
+    <>
+        <style>{style}</style>
+
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <span>TimeDurationPicker</span>
+            <span>TimeDurationPicker RTL</span>
+
+            <div>
+                <TimeDurationPicker placeholder="02 days : 01 hours : 30 mins" />
+            </div>
+            <div dir="rtl">
+                <TimeDurationPicker placeholder="02 days : 01 hours : 30 mins" />
+            </div>
+
+
+            <div className="k-animation-container">
+                <div className="k-popup k-reset">
+                    <TimeSelector columns={[ "dd", "HH", "mm" ]} focusedColumn="HH" fastSelection={(<TimeSelectorFastSelection/>)}/>
+                    <ActionButtons alignment="stretched" className="k-timeduration-footer">
+                        <Button className="k-time-cancel">Cancel</Button>
+                        <Button themeColor="primary" className="k-time-accept">Set</Button>
+                    </ActionButtons>
+                </div>
+            </div>
+            <div className="k-animation-container">
+                <div className="k-popup k-reset k-rtl">
+                    <TimeSelector columns={[ "dd", "HH", "mm" ]} focusedColumn="HH" fastSelection={(<TimeSelectorFastSelection/>)}/>
+                    <ActionButtons alignment="stretched" className="k-timeduration-footer">
+                        <Button className="k-time-cancel">Cancel</Button>
+                        <Button themeColor="primary" className="k-time-accept">Set</Button>
+                    </ActionButtons>
+                </div>
+            </div>
+
+        </div>
+
+    </>
+);

package/src/timedurationpicker/tests/timedurationpicker.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { TimeDurationPicker } from '../../timedurationpicker';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        max-width: 660px;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span>TimeDurationPicker</span>
+            <span>TimeDurationPicker RTL</span>
+
+            <div>
+                <TimeDurationPicker placeholder="02 days : 01 hours : 30 mins" />
+            </div>
+            <div dir="rtl">
+                <TimeDurationPicker placeholder="02 days : 01 hours : 30 mins" />
+            </div>
+
+            <div>
+                <TimeDurationPicker value="Normal" />
+            </div>
+            <div dir="rtl">
+                <TimeDurationPicker value="Normal" />
+            </div>
+
+            <div>
+                <TimeDurationPicker value="Hover" hover />
+            </div>
+            <div dir="rtl">
+                <TimeDurationPicker value="Hover" hover />
+            </div>
+
+            <div>
+                <TimeDurationPicker value="Focus" focus />
+            </div>
+            <div dir="rtl">
+                <TimeDurationPicker value="Focus" focus />
+            </div>
+
+            <div>
+                <TimeDurationPicker value="Disabled" disabled />
+            </div>
+            <div dir="rtl">
+                <TimeDurationPicker value="Disabled" disabled />
+            </div>
+
+            <div>
+                <TimeDurationPicker value="Invalid" invalid />
+            </div>
+            <div dir="rtl">
+                <TimeDurationPicker value="Invalid" invalid />
+            </div>
+
+            <div>
+                <TimeDurationPicker value="Invalid Focus" invalid focus />
+            </div>
+            <div dir="rtl">
+                <TimeDurationPicker value="Invalid Focus" invalid focus />
+            </div>
+
+            <div>
+                <TimeDurationPicker value="Loading..." loading />
+            </div>
+            <div dir="rtl">
+                <TimeDurationPicker value="Loading..." loading />
+            </div>
+
+        </div>
+    </>
+);

package/src/timedurationpicker/timedurationpicker.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { classNames } from '../utils';
+import { Button } from '../button';
+import {
+    Input,
+    InputInnerInput,
+    InputClearValue,
+    InputLoadingIcon,
+    InputValidationIcon,
+    InputPrefix,
+    InputSuffix
+} from '../input';
+
+export interface TimeDurationPickerProps {
+    className?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    type?: string;
+    value?: string;
+    placeholder?: string;
+    size?: null | 'small' | 'medium' | 'large';
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    fillMode?: null | 'solid' | 'outline' | 'flat';
+    hover?: boolean;
+    focus?: boolean;
+    valid?: boolean;
+    invalid?: boolean
+    required?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export class TimeDurationPicker extends React.Component<TimeDurationPickerProps> {
+
+    render() {
+        const {
+            className,
+            prefix,
+            suffix,
+            value,
+            placeholder,
+            size,
+            rounded,
+            fillMode,
+            hover,
+            focus,
+            valid,
+            invalid,
+            required,
+            loading,
+            disabled,
+        } = this.props;
+
+        return (
+            <Input
+                size={size}
+                rounded={rounded}
+                fillMode={fillMode}
+                hover={hover}
+                focus={focus}
+                valid={valid}
+                invalid={invalid}
+                required={required}
+                loading={loading}
+                disabled={disabled}
+                className={classNames(className, 'k-timedurationpicker')}
+            >
+                <InputPrefix>{prefix}</InputPrefix>
+                <InputInnerInput placeholder={placeholder} value={value} />
+                <InputSuffix>{suffix}</InputSuffix>
+                <InputValidationIcon {...this.props} />
+                <InputLoadingIcon {...this.props} />
+                <InputClearValue {...this.props} />
+                <Button
+                    className="k-input-button"
+                    icon="clock-arrow-rotate"
+                    rounded={null}
+                    size={size}
+                    fillMode={fillMode}>
+                </Button>
+            </Input>
+        );
+    }
+}

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

@@ -1,16 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { ActionSheet, ActionSheetFooter, ActionSheetHeader } from '../../action-sheet';
 import { Button } from '../../button';
-import { TimeSelector } from '../../time-selector';
+import { TimeSelector, TimeSelectorHeader } from '../../time-selector';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
 );
 
 const styles = `
-    .k-actionsheet-container {
-        width: 100%;
+    #test-area {
+        --kendo-actionsheet-height: 500px;
+        --kendo-actionsheet-max-height: 500px;
+    }
+    #test-area > section {
         height: 600px;
+        outline: 1px dotted;
+        overflow: hidden;
         position: relative;
         transform: translateZ(0);
     }
@@ -25,50 +31,34 @@ 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" columns={[ "HH", "mm", "ss", "tt" ]} focusedColumn="HH" header={(
+                        <TimeSelectorHeader title="10:00:00 АМ">
+                            <Button fillMode="flat" className="k-time-now">Now</Button>
+                        </TimeSelectorHeader>
+                    )}/>
+                    <ActionSheetFooter actions={[ '!Select Date' ]} />
+                </ActionSheet>
             </section>
             <section>
-                <div className="k-actionsheet-container">
-                    <div className="k-overlay"></div>
-
-                    <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>
+                <ActionSheet adaptive={true} fullscreen>
+                    <ActionSheetHeader
+                        actions={[ 'x' ]}
+                        title="Select Dates"
+                        subTitle="DD / MM / YY">
+                    </ActionSheetHeader>
+                    <TimeSelector size="large" columns={[ "HH", "mm", "ss", "tt" ]} focusedColumn="HH" header={(
+                        <TimeSelectorHeader title="10:00:00 АМ">
+                            <Button fillMode="flat" className="k-time-now">Now</Button>
+                        </TimeSelectorHeader>
+                    )}/>
+                    <ActionSheetFooter actions={[ '!Select Date' ]} />
+                </ActionSheet>
             </section>
         </div>
 

package/src/timepicker/timepicker.tsx

@@ -29,7 +29,6 @@ export interface TimePickerProps {
     loading?: boolean;
     disabled?: boolean;
 }
-
 export class TimePicker extends React.Component<TimePickerProps> {
 
     render() {