@progress/kendo-themes-html 6.7.0-dev.0 → 6.7.0-dev.2

package/src/pager/pager.spec.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable complexity */
 import { Button } from '../button';
 import { DropdownList } from '../dropdownlist';
-import { Textbox } from '../textbox';
+import { NumericTextbox } from '../numerictextbox';
 import { classNames, optionClassNames, stateClassNames, States, Size } from '../misc';
 
 export const PAGER_CLASSNAME = `k-pager`;
@@ -19,7 +20,8 @@ export type KendoPagerOptions = {
 };
 
 export type KendoPagerProps = KendoPagerOptions & {
-    mobile?: null | 'small' | 'medium';
+    adaptive?: boolean;
+    itemsPerPage?: boolean;
     type?: 'numeric' | 'input';
     pageSizes?: boolean;
     refresh?: boolean;
@@ -31,7 +33,8 @@ export type KendoPagerState = { [K in (typeof states)[number]]?: boolean };
 
 const defaultProps = {
     size: Size.medium,
-    mobile: null,
+    adaptive: false,
+    itemsPerPage: true,
     type: 'numeric',
     pageSizes: true,
     refresh: true,
@@ -45,7 +48,8 @@ export const Pager = (
 ) => {
     const {
         size = defaultProps.size,
-        mobile = defaultProps.mobile,
+        adaptive = defaultProps.adaptive,
+        itemsPerPage = defaultProps.itemsPerPage,
         type = defaultProps.type,
         pageSizes = defaultProps.pageSizes,
         refresh = defaultProps.refresh,
@@ -69,11 +73,7 @@ export const Pager = (
                 stateClassNames(PAGER_CLASSNAME, {
                     focus,
                     disabled,
-                }),
-                {
-                    'k-pager-mobile-md': mobile === 'medium',
-                    'k-pager-mobile-sm': mobile === 'small'
-                }
+                })
             )}>
             <div
                 className={classNames(
@@ -102,21 +102,7 @@ export const Pager = (
                     icon={dir === "rtl" ? "caret-alt-right" : "caret-alt-left" }
                 >
                 </Button>
-                <select
-                    className={classNames(
-                        'k-picker',
-                        'k-picker-solid',
-                        'k-dropdown-list',
-                        'k-dropdown',
-                        'k-rounded-md',
-                        optionClassNames('k-picker', {
-                            size,
-                        })
-                    )}
-                >
-                    <option>1</option>
-                </select>
-                { type === 'numeric' &&
+                { type === 'numeric' && !adaptive &&
                     <div
                         className={classNames(
                             'k-pager-numbers'
@@ -178,14 +164,33 @@ export const Pager = (
                         </Button>
                     </div>
                 }
+                { type === 'numeric' &&
+                    <select
+                        className={classNames(
+                            'k-picker',
+                            'k-picker-solid',
+                            'k-dropdown-list',
+                            'k-dropdown',
+                            'k-rounded-md',
+                            optionClassNames('k-picker', {
+                                size,
+                            }),
+                            {
+                                ['k-hidden']: !adaptive
+                            }
+                        )}
+                    >
+                        <option>99</option>
+                    </select>
+                }
                 { type === 'input' &&
                     <span
                         className={classNames(
                             'k-pager-input'
                         )}>
-                        Page
-                        <Textbox showClearButton={false} size={size} value="999" />
-                        of 8
+                        { !adaptive && <span>Page</span> }
+                        <NumericTextbox value="999" size={size} showSpinButton={false} showClearButton={false}></NumericTextbox>
+                        { !adaptive && <span>of 8</span> }
                     </span> }
                 <Button
                     className={classNames(
@@ -215,8 +220,10 @@ export const Pager = (
                     className={classNames(
                         'k-pager-sizes'
                     )}>
-                    <DropdownList value="20" size={size} />
-                    items per page
+                    <DropdownList value="99" size={size} />
+                    { itemsPerPage &&
+                        <span>items per page</span>
+                    }
                 </span>
             }
             { refresh &&

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

@@ -0,0 +1,25 @@
+import { Pager } from '..';
+
+
+const styles = `
+    #test-area {
+        gap: 20px;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+            <span>&gt;= 640 px</span>
+            <Pager size="large"/>
+            <Pager size="large" type="input"/>
+            <span>500 px</span>
+            <Pager size="large" adaptive info={false} refresh={false} itemsPerPage={false} style={{ width: "500px" }}/>
+            <Pager size="large" type="input" adaptive info={false} refresh={false} itemsPerPage={false} style={{ width: "500px" }}/>
+            <span>360 px</span>
+            <Pager size="large" adaptive info={false} refresh={false} itemsPerPage={false} pageSizes={false} style={{ width: "360px" }}/>
+            <Pager size="large" type="input" adaptive info={false} refresh={false} itemsPerPage={false} pageSizes={false} style={{ width: "360px" }}/>
+        </div>
+    </>
+);

package/src/radio/index.ts

@@ -1 +1,4 @@
 export * from './radio.spec';
+export * from "./templates/radio-normal";
+export * from "./templates/radio-label";
+export * from "./templates/radio-inside-label";

package/src/radio/templates/radio-inside-label.tsx

@@ -0,0 +1,10 @@
+import RadioButton from "../radio.spec";
+
+export const RadioButtonInsideLabel = ({ children, ...other }: any) => (
+    <>
+        <label className="k-radio-label">
+            <RadioButton {...other} />
+            {children}
+        </label>
+    </>
+);

package/src/radio/templates/radio-label.tsx

@@ -0,0 +1,8 @@
+import RadioButton from "../radio.spec";
+
+export const RadioButtonLabel = ({ children, id, ...other }: any) => (
+    <>
+        <RadioButton {...other} id={id} />
+        <label className="k-radio-label" htmlFor={id}>{children}</label>
+    </>
+);

package/src/radio/templates/radio-normal.tsx

@@ -0,0 +1,3 @@
+import RadioButton from "../radio.spec";
+
+export const RadioButtonNormal = (props: any) => <RadioButton {...props}/>;

package/src/radio/tests/radio-size.tsx

@@ -1,9 +1,8 @@
-import { RadioButton } from '../../radio';
-
+import { RadioButton, RadioButtonLabel } from '../../radio';
 
 const styles = `
     #test-area {
-        grid-template-columns: 120px repeat(3, 1fr);
+        grid-template-columns: repeat(3, 1fr);
     }
 `;
 
@@ -11,80 +10,19 @@ export default () =>(
     <>
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid">
-            <span></span>
             <span>Small</span>
             <span>Medium</span>
             <span>Large</span>
 
-            <span></span>
-            <div>
-                <RadioButton size="small" id="rad1" checked />
-                <label className="k-radio-label" htmlFor="rad1">Checked</label>
-            </div>
-            <div>
-                <RadioButton size="medium" id="rad1" checked />
-                <label className="k-radio-label" htmlFor="rad1">Checked</label>
-            </div>
-            <div>
-                <RadioButton size="large" id="rad1" checked />
-                <label className="k-radio-label" htmlFor="rad1">Checked</label>
-            </div>
-
-            <span></span>
-            <div>
-                <RadioButton size="small" id="rad3" checked disabled />
-                <label className="k-radio-label" htmlFor="rad3">Checked</label>
-            </div>
-            <div>
-                <RadioButton size="medium" id="rad3" checked disabled />
-                <label className="k-radio-label" htmlFor="rad3">Checked</label>
-            </div>
-            <div>
-                <RadioButton size="large" id="rad3" checked disabled />
-                <label className="k-radio-label" htmlFor="rad3">Checked</label>
-            </div>
-
-            <span></span>
-            <div>
-                <RadioButton size="small" id="rad2" />
-                <label className="k-radio-label" htmlFor="rad2">Unchecked</label>
-            </div>
-            <div>
-                <RadioButton size="medium" id="rad2" />
-                <label className="k-radio-label" htmlFor="rad2">Unchecked</label>
-            </div>
-            <div>
-                <RadioButton size="large" id="rad2" />
-                <label className="k-radio-label" htmlFor="rad2">Unchecked</label>
-            </div>
-
-            <span></span>
-            <div>
-                <RadioButton size="small" id="rad4" disabled />
-                <label className="k-radio-label" htmlFor="rad4">Unchecked</label>
-            </div>
-            <div>
-                <RadioButton size="medium" id="rad4" disabled />
-                <label className="k-radio-label" htmlFor="rad4">Unchecked</label>
-            </div>
-            <div>
-                <RadioButton size="large" id="rad4" disabled />
-                <label className="k-radio-label" htmlFor="rad4">Unchecked</label>
-            </div>
-
-            <span></span>
-            <div>
-                <RadioButton size="small" id="radRequired" invalid required/>
-                <label className="k-radio-label" htmlFor="radRequired">Invalid</label>
-            </div>
-            <div>
-                <RadioButton size="medium" id="radRequired" invalid required/>
-                <label className="k-radio-label" htmlFor="radRequired">Invalid</label>
-            </div>
-            <div>
-                <RadioButton size="large" id="radRequired" invalid required/>
-                <label className="k-radio-label" htmlFor="radRequired">Invalid</label>
-            </div>
+            {[ 'unchecked', ...RadioButton.states ].map((state) => (
+                <>
+                    { RadioButton.options.size.map((size) => (
+                        <section>
+                            <RadioButtonLabel id={'rad-' + [ state ] + '-' + [ size ]} { ...{ [state]: true }} size={size}>{state}</RadioButtonLabel>
+                        </section>
+                    ))}
+                </>
+            ))}
         </div>
     </>
 );

package/src/radio/tests/radio.tsx

@@ -1,5 +1,4 @@
-import { RadioButton } from '../../radio';
-
+import { RadioButton, RadioButtonLabel, RadioButtonInsideLabel } from '../../radio';
 
 const styles = `
     .k-ripple-container .k-radio:focus::after,
@@ -17,174 +16,62 @@ export default () =>(
             <span dir="rtl">Radio button RTL</span>
             <span dir="rtl">In label RTL</span>
 
-            <div>
-                <RadioButton id="rad1" checked />
-                <label className="k-radio-label" htmlFor="rad1">Checked</label>
-            </div>
-            <div>
-                <label className="k-radio-label">
-                    <RadioButton checked />
-                    Checked
-                </label>
-            </div>
-            <div dir="rtl">
-                <RadioButton id="rad1-rtl" checked />
-                <label className="k-radio-label" htmlFor="rad1-rtl">Checked</label>
-            </div>
-            <div dir="rtl">
-                <label className="k-radio-label">
-                    <RadioButton checked />
-                    Checked
-                </label>
-            </div>
+            {[ 'unchecked', ...RadioButton.states ].map((state) => (
+                <>
+                    <div>
+                        <RadioButtonLabel id={'rad-' + [ state ]} { ...{ [state]: true }}>{state}</RadioButtonLabel>
+                    </div>
+                    <div>
+                        <RadioButtonInsideLabel { ...{ [state]: true }} >{state}</RadioButtonInsideLabel>
+                    </div>
 
-            <div>
-                <RadioButton id="rad2" disabled checked />
-                <label className="k-radio-label" htmlFor="rad2">Checked</label>
-            </div>
-            <div>
-                <label className="k-radio-label">
-                    <RadioButton disabled checked />
-                    Checked
-                </label>
-            </div>
-            <div dir="rtl">
-                <RadioButton id="rad2-rtl" disabled checked />
-                <label className="k-radio-label" htmlFor="rad2-rtl">Checked</label>
-            </div>
-            <div dir="rtl">
-                <label className="k-radio-label">
-                    <RadioButton disabled checked />
-                    Checked
-                </label>
-            </div>
+                    <div dir="rtl">
+                        <RadioButtonLabel id={'rad-' + [ state ] + '-rtl'} { ...{ [state]: true }}>{state}</RadioButtonLabel>
+                    </div>
+                    <div dir="rtl">
+                        <RadioButtonInsideLabel { ...{ [state]: true }} >{state}</RadioButtonInsideLabel>
+                    </div>
+                </>
+            ))}
 
             <div>
-                <RadioButton id="rad3" />
-                <label className="k-radio-label" htmlFor="rad3">Unchecked</label>
+                <RadioButtonLabel id="rad-disabled-checked" disabled checked>disabled checked</RadioButtonLabel>
             </div>
             <div>
-                <label className="k-radio-label">
-                    <RadioButton />
-                    Unchecked
-                </label>
+                <RadioButtonInsideLabel disabled checked >disabled checked</RadioButtonInsideLabel>
             </div>
             <div dir="rtl">
-                <RadioButton id="rad3-rtl" />
-                <label className="k-radio-label" htmlFor="rad3-rtl">Unchecked</label>
+                <RadioButtonLabel id="rad-disabled-checked-rtl" disabled checked>disabled checked</RadioButtonLabel>
             </div>
             <div dir="rtl">
-                <label className="k-radio-label">
-                    <RadioButton />
-                    Unchecked
-                </label>
-            </div>
-
-            <div>
-                <RadioButton id="rad4" disabled />
-                <label className="k-radio-label" htmlFor="rad4">Unchecked</label>
-            </div>
-            <div>
-                <label className="k-radio-label">
-                    <RadioButton disabled />
-                    Unchecked
-                </label>
-            </div>
-            <div dir="rtl">
-                <RadioButton id="rad4-rtl" disabled />
-                <label className="k-radio-label" htmlFor="rad4-rtl">Unchecked</label>
-            </div>
-            <div dir="rtl">
-                <label className="k-radio-label">
-                    <RadioButton disabled />
-                    Unchecked
-                </label>
-            </div>
-
-            <div>
-                <RadioButton id="radError" invalid required />
-                <label className="k-radio-label" htmlFor="radError">Invalid</label>
-            </div>
-            <div>
-                <label className="k-radio-label">
-                    <RadioButton invalid required />
-                    Invalid
-                </label>
-            </div>
-            <div dir="rtl">
-                <RadioButton id="radError-rtl" invalid required />
-                <label className="k-radio-label" htmlFor="radError-rtl">Invalid</label>
-            </div>
-            <div dir="rtl">
-                <label className="k-radio-label">
-                    <RadioButton invalid required />
-                    Invalid
-                </label>
-            </div>
-
-            <div>
-                <RadioButton id="radFocus" focus />
-                <label className="k-radio-label" htmlFor="radFocus">Focus</label>
-            </div>
-            <div>
-                <label className="k-radio-label">
-                    <RadioButton focus />
-                    Focus
-                </label>
-            </div>
-            <div dir="rtl">
-                <RadioButton id="radFocus-rtl" focus />
-                <label className="k-radio-label" htmlFor="radFocus-rtl">Focus</label>
-            </div>
-            <div dir="rtl">
-                <label className="k-radio-label">
-                    <RadioButton focus />
-                    Focus
-                </label>
+                <RadioButtonInsideLabel disabled checked >disabled checked</RadioButtonInsideLabel>
             </div>
 
             <div className="k-ripple-container">
-                <RadioButton id="radRipple" focus />
-                <label className="k-radio-label" htmlFor="radRipple">Ripple</label>
+                <RadioButtonLabel id="rad-ripple" focus>ripple</RadioButtonLabel>
             </div>
             <div className="k-ripple-container">
-                <label className="k-radio-label">
-                    <RadioButton focus />
-                    Ripple
-                </label>
+                <RadioButtonInsideLabel focus >ripple</RadioButtonInsideLabel>
             </div>
             <div className="k-ripple-container" dir="rtl">
-                <RadioButton id="radRipple-rtl" focus />
-                <label className="k-radio-label" htmlFor="radRipple-rtl">Ripple</label>
+                <RadioButtonLabel id="rad-ripple-rtl" focus>ripple</RadioButtonLabel>
             </div>
             <div className="k-ripple-container" dir="rtl">
-                <label className="k-radio-label">
-                    <RadioButton focus />
-                    Ripple
-                </label>
+                <RadioButtonInsideLabel focus >ripple</RadioButtonInsideLabel>
             </div>
 
             <div>
-                <RadioButton id="radLong" checked />
-                <label className="k-radio-label" htmlFor="radLong">Long label Vivamus a arcu lacus. Integer augue leo.</label>
+                <RadioButtonLabel id="rad-long" checked>Long label Vivamus a arcu lacus. Integer augue leo.</RadioButtonLabel>
             </div>
             <div>
-                <label className="k-radio-label">
-                    <RadioButton checked />
-                    Long label Vivamus a arcu lacus. Integer augue leo.
-                </label>
+                <RadioButtonInsideLabel checked >Long label Vivamus a arcu lacus. Integer augue leo.</RadioButtonInsideLabel>
             </div>
             <div dir="rtl">
-                <RadioButton id="radLong-rtl" checked />
-                <label className="k-radio-label" htmlFor="radLong-rtl">Long label Vivamus a arcu lacus. Integer augue leo.</label>
+                <RadioButtonLabel id="rad-long-rtl" checked>Long label Vivamus a arcu lacus. Integer augue leo.</RadioButtonLabel>
             </div>
             <div dir="rtl">
-                <label className="k-radio-label">
-                    <RadioButton checked />
-                    Long label Vivamus a arcu lacus. Integer augue leo.
-                </label>
+                <RadioButtonInsideLabel checked >Long label Vivamus a arcu lacus. Integer augue leo.</RadioButtonInsideLabel>
             </div>
-
         </div>
     </>
 );

package/src/scrollview/index.ts

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

package/src/scrollview/scrollview-spec.tsx

@@ -0,0 +1,134 @@
+import { classNames } from '../misc';
+import { Icon } from '../icon';
+
+const SCROLLVIEW_CLASSNAME = 'k-scrollview';
+
+const states = [];
+
+const options = {};
+
+export type KendoScrollViewProps = {
+    mode?: "light" | "normal" | "dark";
+    views?: number;
+    animate?: boolean;
+    arrows?: boolean;
+    pager?: boolean;
+    rtl?: boolean;
+};
+
+const defaultProps = {
+    mode: "normal",
+    views: 9,
+    animate: true,
+    arrows: true,
+    pager: true,
+    rtl: false
+};
+
+export const ScrollView = (
+    props: KendoScrollViewProps
+        & React.HtmlHTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        mode = defaultProps.mode,
+        views = defaultProps.views,
+        animate = defaultProps.animate,
+        arrows = defaultProps.arrows,
+        pager = defaultProps.pager,
+        rtl = defaultProps.rtl,
+        ...other
+    } = props;
+
+    const scrollviewViews: JSX.Element | JSX.Element[] = [];
+
+    const iconPrev = rtl ? 'chevron-right' : 'chevron-left';
+    const iconNext = rtl ? 'chevron-left' : 'chevron-right';
+
+    for ( let i = 0; i < views; i++ ) {
+        scrollviewViews.push(
+            <div className="k-scrollview-view" key={i}></div>
+        );
+    }
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                SCROLLVIEW_CLASSNAME,
+                props.className,
+                {
+                    [`${SCROLLVIEW_CLASSNAME}-${mode}`]: mode !== "normal",
+                    ['k-rtl']: rtl
+                }
+            )}>
+            <div className={classNames(
+                'k-scrollview-wrap',
+                {
+                    ['k-scrollview-animate']: animate
+                }
+            )} style={{ "--kendo-scrollview-views": views, "--kendo-scrollview-current": 5 } as React.CSSProperties}>
+                {scrollviewViews}
+            </div>
+            <div className="k-scrollview-elements">
+                { arrows &&
+                    <>
+                        <span className="k-scrollview-prev">
+                            <Icon icon={iconPrev} size="xxxlarge"></Icon>
+                        </span>
+                        <span className="k-scrollview-next">
+                            <Icon icon={iconNext} size="xxxlarge"></Icon>
+                        </span>
+                    </>
+                }
+                { pager &&
+                    <div className="k-scrollview-nav-wrap">
+                        <div className="k-scrollview-nav">
+                            { mode === "light" &&
+                                <>
+                                    <span className="k-link"></span>
+                                    <span className="k-link k-primary"></span>
+                                    <span className="k-link k-primary k-focus"></span>
+                                    <span className="k-link k-focus"></span>
+                                    <span className="k-link"></span>
+                                </>
+                            }
+                            {
+                                mode === 'normal' &&
+                               <>
+                                   <span className="k-link" style={{ transform: "scale(0.5)" }}></span>
+                                   <span className="k-link" style={{ transform: "scale(0.65)" }}></span>
+                                   <span className="k-link" style={{ transform: "scale(0.8)" }}></span>
+                                   <span className="k-link"></span>
+                                   <span className="k-link k-primary"></span>
+                                   <span className="k-link"></span>
+                                   <span className="k-link" style={{ transform: "scale(0.8)" }}></span>
+                                   <span className="k-link" style={{ transform: "scale(0.65)" }}></span>
+                                   <span className="k-link" style={{ transform: "scale(0.5)" }}></span>
+                               </>
+                            }
+                            {
+                                mode === "dark" &&
+                                <>
+                                    <span className="k-link" style={{ transform: "scale(0.5)" }}></span>
+                                    <span className="k-link" style={{ transform: "scale(0.65)" }}></span>
+                                    <span className="k-link"></span>
+                                    <span className="k-link k-primary"></span>
+                                    <span className="k-link"></span>
+                                    <span className="k-link" style={{ transform: "scale(0.65)" }}></span>
+                                    <span className="k-link" style={{ transform: "scale(0.5)" }}></span>
+                                </>
+                            }
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+    );
+};
+
+ScrollView.states = states;
+ScrollView.options = options;
+ScrollView.className = SCROLLVIEW_CLASSNAME;
+ScrollView.defaultProps = defaultProps;
+
+export default ScrollView;