@progress/kendo-themes-html 6.3.1-dev.0 → 6.4.0-dev.0

package/src/scheduler/tests/scheduler-react-week.tsx

@@ -1,6 +1,7 @@
 
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -20,27 +21,22 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <div className="k-widget k-scheduler k-scheduler-flex" style={{ height: "900px" }}>
                 <Toolbar className="k-scheduler-toolbar">
-                    <span className="k-button-group k-scheduler-navigation">
+                    <ButtonGroup className="k-scheduler-navigation">
                         <Button>Today</Button>
                         <Button icon="caret-alt-left"></Button>
                         <Button icon="caret-alt-right"></Button>
-                    </span>
+                    </ButtonGroup>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Sunday, June 21, 2020 - Saturday, June 27, 2020
                     </Button>
                     <span className="k-spacer"></span>
-                    <span className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                            <option>Week</option>
-                        </select>
-                        <span className="k-button-group k-scheduler-views">
-                            <Button>Day</Button>
-                            <Button selected>Week</Button>
-                            <Button>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </span>
-                    </span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button selected>Week</Button>
+                        <Button>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div className="k-scheduler-layout k-scheduler-layout-flex k-scheduler-day-view">
                     <div className="k-scheduler-head">

package/src/scheduler/tests/scheduler-year.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Toolbar } from '../../toolbar';
 
 const root = ReactDOM.createRoot(
@@ -11,26 +12,21 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <div id="scheduler" className="k-widget k-scheduler">
                 <Toolbar className="k-scheduler-toolbar">
-                    <span className="k-button-group k-scheduler-navigation">
+                    <ButtonGroup className="k-scheduler-navigation">
                         <Button>Today</Button>
                         <Button icon="caret-alt-left"></Button>
                         <Button icon="caret-alt-right"></Button>
-                    </span>
+                    </ButtonGroup>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         2021
                     </Button>
                     <span className="k-spacer"></span>
-                    <span className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                            <option>Year</option>
-                        </select>
-                        <span className="k-button-group k-scheduler-views">
-                            <Button>Day</Button>
-                            <Button>Week</Button>
-                            <Button>Month</Button>
-                            <Button selected>Year</Button>
-                        </span>
-                    </span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button>Week</Button>
+                        <Button>Month</Button>
+                        <Button selected>Year</Button>
+                    </ButtonGroup>
                 </Toolbar>
 
                 <div className="k-scheduler-layout k-scheduler-layout-flex k-scheduler-yearview">

package/src/scheduler/tests/scheduler.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -12,27 +13,24 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <div className="k-widget k-scheduler">
                 <Toolbar className="k-scheduler-toolbar">
-                    <span className="k-button-group k-scheduler-navigation">
+                    <ButtonGroup className="k-scheduler-navigation">
                         <Button>Today</Button>
                         <Button icon="caret-alt-left"></Button>
                         <Button icon="caret-alt-right"></Button>
-                    </span>
+                    </ButtonGroup>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Monday, June 10, 2013 - Friday, June 14, 2013
                     </Button>
                     <span className="k-spacer"></span>
-                    <span className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                            <option>Week</option>
-                        </select>
-                        <span className="k-button-group k-scheduler-views">
-                            <Button>Day</Button>
-                            <Button selected>Week</Button>
-                            <Button>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </span>
-                    </span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button selected>Week</Button>
+                        <Button>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
+
+
                 </Toolbar>
                 <table className="k-scheduler-layout k-scheduler-workWeekview k-scrollbar-v">
                     <tbody>
@@ -564,26 +562,21 @@ root.render(
 
             <div id="scheduler" className="k-widget k-scheduler">
                 <Toolbar className="k-scheduler-toolbar">
-                    <span className="k-button-group k-scheduler-navigation">
+                    <ButtonGroup className="k-scheduler-navigation">
                         <Button>Today</Button>
                         <Button icon="caret-alt-left"></Button>
                         <Button icon="caret-alt-right"></Button>
-                    </span>
+                    </ButtonGroup>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Monday, February 18, 2019
                     </Button>
                     <span className="k-spacer"></span>
-                    <span className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                            <option>Agenda</option>
-                        </select>
-                        <span className="k-button-group k-scheduler-views">
-                            <Button>Day</Button>
-                            <Button>Week</Button>
-                            <Button>Month</Button>
-                            <Button selected>Agenda</Button>
-                        </span>
-                    </span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button>Week</Button>
+                        <Button>Month</Button>
+                        <Button selected>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <table className="k-scheduler-layout k-scheduler-timelineview k-scrollbar-h">
                     <tbody>

package/src/slider/index.ts

@@ -0,0 +1,2 @@
+export * from './slider.spec';
+export * from './slider-tick';

package/src/slider/slider-tick.tsx

@@ -0,0 +1,52 @@
+import { classNames } from '../utils';
+
+const SLIDER_TICK_CLASSNAME = 'k-tick';
+
+const states = [];
+
+const options = {};
+
+export type KendoSliderTickProps = {
+    style?: React.CSSProperties,
+    label?: boolean,
+    orientation?: null | 'horizontal' | 'vertical',
+    large?: boolean,
+    text?: string
+};
+
+const defaultProps = {
+    label: false
+};
+
+export const SliderTick = (
+    props: KendoSliderTickProps &
+        React.HTMLAttributes<HTMLLIElement>
+) => {
+    const {
+        style,
+        label = defaultProps.label,
+        orientation,
+        large,
+        text
+    } = props;
+
+    return (
+        <li className={classNames(
+            props.className,
+            SLIDER_TICK_CLASSNAME,
+            {
+                [`k-tick-${orientation}`]: orientation,
+                'k-tick-large': large
+            }
+        )} style={style} >
+            {label && <span className="k-label">{text}</span>}
+        </li>
+    );
+};
+
+SliderTick.states = states;
+SliderTick.options = options;
+SliderTick.className = SLIDER_TICK_CLASSNAME;
+SliderTick.defaultProps = defaultProps;
+
+export default SliderTick;

package/src/slider/slider.spec.tsx

@@ -0,0 +1,120 @@
+import { classNames, stateClassNames, States } from '../utils';
+import { Button } from '../button';
+
+const SLIDER_CLASSNAME = 'k-slider';
+
+const states = [
+    States.hover,
+    States.focus,
+    States.active,
+    States.disabled,
+    States.readonly
+];
+
+const options = {};
+
+export type KendoSliderProps = {
+    type?: 'single' | 'range' | 'gradient',
+    orientation?: 'horizontal' | 'vertical',
+    dir?: 'ltr' | 'rtl',
+    handlePosition?: 'start' | 'end',
+    trackStyle?: React.CSSProperties
+};
+
+export type KendoSliderState = { [K in (typeof states)[number]]?: boolean };
+
+const defaultProps = {
+    type: 'single',
+    orientation: 'horizontal',
+    readonly: false,
+    disabled: false,
+    handlePosition: 'end'
+};
+
+export const Slider = (
+    props: KendoSliderProps &
+        KendoSliderState &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        type = defaultProps.type,
+        orientation = defaultProps.orientation,
+        readonly = defaultProps.readonly,
+        disabled = defaultProps.disabled,
+        handlePosition = defaultProps.handlePosition,
+        hover,
+        focus,
+        active,
+        trackStyle,
+        dir
+    } = props;
+
+    let iconIncrease;
+    let iconDecrease;
+
+    if ( orientation === 'horizontal' ) {
+        iconIncrease = 'caret-alt-right';
+        iconDecrease = 'caret-alt-left';
+    } else if ( orientation === 'vertical' ) {
+        iconIncrease = 'caret-alt-up';
+        iconDecrease = 'caret-alt-down';
+    }
+
+    return (
+        <div className={classNames(
+            SLIDER_CLASSNAME,
+            props.className,
+            stateClassNames(SLIDER_CLASSNAME, {
+                readonly,
+                disabled
+            }),
+            {
+                [`k-slider-${orientation}`]: orientation,
+                'k-colorgradient-slider': type === 'gradient',
+                'k-range-slider': type === 'range'
+            }
+        )} dir={dir} >
+            { type !== 'gradient' && <Button className="k-button-decrease" rounded="full" icon={iconDecrease} /> }
+            <div className="k-slider-track-wrap">
+                {
+                    type !== 'gradient' &&
+                        <ul className="k-reset k-slider-items">
+                            {props.children}
+                        </ul>
+                }
+                <div className="k-slider-track" style={trackStyle}>
+                    <div className="k-slider-selection"></div>
+                    { type === 'range' &&
+
+                    <span className={classNames(
+                        'k-draghandle',
+                        'k-draghandle-start',
+                        stateClassNames(SLIDER_CLASSNAME, {
+                            hover,
+                            focus,
+                            active
+                        })
+                    )}></span> }
+
+                    <span className={classNames(
+                        'k-draghandle',
+                        `k-draghandle-${handlePosition}`,
+                        stateClassNames(SLIDER_CLASSNAME, {
+                            hover,
+                            focus,
+                            active
+                        })
+                    )}></span>
+                </div>
+            </div>
+            { type !== 'gradient' && <Button className="k-button-increase" rounded="full" icon={iconIncrease} /> }
+        </div>
+    );
+};
+
+Slider.states = states;
+Slider.options = options;
+Slider.className = SLIDER_CLASSNAME;
+Slider.defaultProps = defaultProps;
+
+export default Slider;