@progress/kendo-themes-html 5.0.0-beta.0 → 5.0.0-beta.4

package/src/treeview/treeview.jsx

@@ -0,0 +1,125 @@
+import * as styles from '../../utils/styles';
+import { Component, globalDefaultProps } from '../component/index';
+import { TreeviewGroupStatic } from './treeview-group.jsx';
+import { TreeviewItemStatic } from './treeview-item.jsx';
+
+class Treeview extends Component {
+
+    static transformUL( ul ) {
+        let children = ul.props.children;
+        let items = [];
+
+        children.filter( child => child.type === 'LI' ).forEach( li => {
+            items.push( Treeview.transformLI( li ) );
+        });
+
+        return items;
+    }
+
+    static transformLI( li ) {
+        let children = li.props.children;
+        let text = li.props.text || '';
+        let items = [];
+
+        children.forEach( child => {
+            if (text === '' && child.type === '#text') {
+                text = child.props.text;
+            }
+            if (child.type === 'UL') {
+                items.push( ...Treeview.transformUL( child ) );
+            }
+        });
+
+        li.props.children = [];
+        li.props.text = text;
+        li.props.items = items;
+
+        return <TreeviewItemStatic {...li.props} />;
+    }
+
+    init() {
+        let children = this._props.children;
+        let items = [];
+
+        children.filter( child => child.type === 'LI' ).forEach( li => {
+            items.push( Treeview.transformLI( li ) );
+        });
+
+        this._props.children = [];
+        this._props.items = items;
+    }
+
+    render() {
+        return <TreeviewStatic {...this.props} />;
+    }
+}
+
+function TreeviewStatic(props) {
+    const {
+        className: ownClassName,
+
+        items,
+
+        size,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let treeviewClasses = [
+        ownClassName,
+        'k-treeview',
+        styles.sizeClass( size, 'k-treeview' )
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (legacy) {
+
+        let legacyTreeviewClasses = [
+            ownClassName,
+            'k-treeview'
+        ];
+
+        return (
+            <div className={legacyTreeviewClasses} {...ariaAttr} {...htmlAttributes}>
+                <TreeviewGroupStatic className="k-treeview-lines" items={items} />
+            </div>
+        );
+    }
+
+    return (
+        <div className={treeviewClasses} {...ariaAttr} {...htmlAttributes}>
+            <TreeviewGroupStatic className="k-treeview-lines" items={items} />
+        </div>
+    );
+}
+
+TreeviewStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    children: [],
+    items: [],
+
+    size: 'medium'
+};
+
+TreeviewStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+
+    items: typeof [],
+
+    size: typeof [ null, 'small', 'medium', 'large' ],
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { Treeview, TreeviewStatic };

package/utils/styles.js

@@ -72,6 +72,14 @@ function borderedClass( bordered, prefix ) {
     return `${prefix}-bordered`;
 }
 
+function positionClass( position, prefix ) {
+    if ( position === null ) {
+        return '';
+    }
+
+    return `k-pos-absolute ${prefix}-${position}`;
+}
+
 function classNames( ...args ) {
 
     /* eslint-disable arrow-body-style, no-nested-ternary */
@@ -131,6 +139,7 @@ export {
     fillModeClass,
     themeColorClass,
     borderedClass,
+    positionClass,
 
     classNames,
     cssStyle,

package/src/chip/chip-remove-icon.jsx

@@ -1,45 +0,0 @@
-import { IconStatic } from '../icon/index';
-
-function ChipRemoveIconStatic(chipProps) {
-
-    const {
-        className: ownClassName,
-
-        showRemoveIcon,
-
-        aria,
-        legacy
-    } = chipProps;
-
-    if (!showRemoveIcon) {
-        return <></>;
-    }
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    let iconClasses = [
-        ownClassName,
-        'k-chip-remove-icon',
-        'k-chip-icon'
-    ];
-
-    let legacyClasses = [
-        ownClassName,
-        'k-remove-icon'
-    ];
-
-    if (legacy) {
-        return (
-            <IconStatic className={legacyClasses} name="x-circle" {...ariaAttr} />
-        );
-    }
-
-    return (
-        <IconStatic className={iconClasses} name="x-circle" {...ariaAttr} />
-    );
-
-}
-
-export { ChipRemoveIconStatic };

package/src/chip/chip-selected-icon.jsx

@@ -1,47 +0,0 @@
-import { IconStatic } from '../icon/index';
-
-function ChipSelectedIconStatic(chipProps) {
-
-    const {
-        className: ownClassName,
-
-        showSelectedIcon,
-
-        selected,
-
-        aria,
-        legacy
-    } = chipProps;
-
-    if (!showSelectedIcon || !selected) {
-        return <></>;
-    }
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    let iconClasses = [
-        ownClassName,
-        'k-selected-icon',
-        'k-chip-icon'
-    ];
-
-    let legacyClasses = [
-        ownClassName,
-        'k-chip-selected-icon'
-    ];
-
-    if (legacy) {
-        return (
-            <span className="k-selected-icon-wrapper">
-                <IconStatic name="check" className={legacyClasses} {...ariaAttr} />
-            </span>
-        );
-    }
-
-    return ("");
-
-}
-
-export { ChipSelectedIconStatic };

package/src/dropdownbutton/dropdownbutton.jsx

@@ -1,149 +0,0 @@
-import { Component, globalDefaultProps } from '../component';
-import { ButtonStatic } from '../button/index';
-
-class DropDownButton extends Component {
-
-    init() {
-        this._props.text = this.element.innerHTML;
-    }
-
-    render() {
-        return <DropDownButtonStatic {...this.props} />;
-    }
-}
-
-function DropDownButtonStatic(props) {
-    const {
-        className: ownClassName,
-
-        text,
-
-        size,
-        rounded,
-        shape,
-
-        fillMode,
-        themeColor,
-
-        icon,
-
-        showArrow,
-        arrowIconName,
-
-        hover,
-        focus,
-        active,
-        selected,
-        disabled,
-
-        aria,
-        legacy,
-
-        ...htmlAttributes
-    } = props;
-
-    let dropDownButtonClasses = [
-        ownClassName,
-        'k-dropdown-button',
-        {
-            'k-focus': focus === true
-        }
-    ];
-
-
-    let legacyDropDownButtonClasses = [
-        ownClassName,
-        'k-widget',
-        'k-dropdown-button',
-        {
-            'k-state-focused': focus === true
-        }
-    ];
-
-    // Augment attributes
-    htmlAttributes.disabled = disabled;
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    if (legacy) {
-        return (
-            <div className={legacyDropDownButtonClasses} {...ariaAttr} {...htmlAttributes}>
-                <ButtonStatic legacy={true}></ButtonStatic>
-            </div>
-        );
-    }
-    // eslint-disable-next-line no-nested-ternary
-    let renderText = text !== '' && showArrow ?
-        <>{text}<span className={`k-icon k-i-${arrowIconName || 'arrow-s'}`}></span></> :
-        // eslint-disable-next-line no-nested-ternary
-        text !== '' && !showArrow ?
-            text :
-            text === '' && showArrow ?
-                <span className={`k-icon k-i-${arrowIconName || 'arrow-s'}`}></span> :
-                undefined;
-
-    return (
-        <div className={dropDownButtonClasses} {...ariaAttr} {...htmlAttributes}>
-            <ButtonStatic
-                text={renderText}
-                disabled={disabled}
-                hover={hover}
-                active={active}
-                selected={selected}
-                focus={focus}
-                size={size}
-                rounded={rounded}
-                shape={shape}
-                fillMode={fillMode}
-                themeColor={themeColor}
-                icon={icon}></ButtonStatic>
-        </div>
-    );
-}
-
-DropDownButtonStatic.defaultProps = {
-    ...globalDefaultProps,
-
-    text: '',
-    icon: '',
-
-    className: '',
-
-    size: 'medium',
-    rounded: 'medium',
-    shape: 'rectangle',
-
-    fillMode: 'solid',
-    themeColor: 'base'
-};
-
-DropDownButtonStatic.propTypes = {
-    text: typeof '',
-    icon: typeof '',
-
-    showArrow: typeof false,
-    arrowIconName: typeof '',
-
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', '0', 'small', 'medium', 'large', 'pill', 'circle' ],
-    shape: typeof [ 'none', 'rectangle', 'square' ],
-
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline', 'link' ],
-    themeColor: typeof [ 'none', 'surface', 'base', 'primary' ],
-
-    hover: typeof false,
-    focus: typeof false,
-    active: typeof false,
-    selected: typeof false,
-    disabled: typeof false,
-
-    aria: typeof false,
-    legacy: typeof false,
-
-    className: typeof '',
-    htmlAttributes: typeof []
-};
-
-export { DropDownButton, DropDownButtonStatic };

package/src/dropdownbutton/index.js

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

package/src/list/list-footer.jsx

@@ -1,61 +0,0 @@
-import { Component, globalDefaultProps } from '../component';
-
-class ListFooter extends Component {
-    render() {
-        return <ListFooterStatic {...this.props} />;
-    }
-}
-
-function ListFooterStatic(props) {
-    const {
-        className: ownClassName,
-
-        aria,
-        legacy,
-
-        ...htmlAttributes
-    } = props;
-
-    let listFooterClasses = [
-        ownClassName,
-        'k-list-footer'
-    ];
-
-    let legacyListFooterClasses = [
-        ownClassName
-    ];
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    if (legacy) {
-        return (
-            <div className={legacyListFooterClasses} {...ariaAttr} {...htmlAttributes}>
-
-            </div>
-        );
-    }
-
-    return (
-        <div className={listFooterClasses} {...ariaAttr} {...htmlAttributes}>
-
-        </div>
-    );
-}
-
-ListFooterStatic.defaultProps = {
-    ...globalDefaultProps,
-
-    className: ''
-};
-
-ListFooterStatic.propTypes = {
-    aria: typeof false,
-    legacy: typeof false,
-
-    className: typeof '',
-    htmlAttributes: typeof []
-};
-
-export { ListFooter, ListFooterStatic };

package/src/list/list-group-header.jsx

@@ -1,92 +0,0 @@
-import { Component, globalDefaultProps } from '../component';
-
-class ListGroupHeader extends Component {
-    render() {
-        return <ListGroupHeaderStatic {...this.props} />;
-    }
-}
-
-function ListGroupHeaderStatic(props) {
-    const {
-        className: ownClassName,
-
-        stuck,
-        virtualization,
-
-        aria,
-        legacy,
-
-        ...htmlAttributes
-    } = props;
-
-    let listGroupHeaderClasses = [
-        ownClassName,
-        'k-list-group-header',
-        {
-            'k-stuck': stuck === true
-        }
-    ];
-
-    let legacyListGroupHeaderClasses = [
-        ownClassName,
-        'k-outer-group-header',
-        {
-            'k-first': stuck === true,
-            'k-virtual-item': virtualization === true
-        }
-    ];
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    if (legacy) {
-        if (stuck) {
-            return (
-                <div className={legacyListGroupHeaderClasses} {...ariaAttr} {...htmlAttributes}>
-
-                </div>
-            );
-        } else {
-            return (
-                <li className={legacyListGroupHeaderClasses} {...ariaAttr} {...htmlAttributes}>
-
-                </li>
-            );
-        }
-    }
-
-    if (stuck) {
-        return (
-            <div className={listGroupHeaderClasses} {...ariaAttr} {...htmlAttributes}>
-
-            </div>
-        );
-    } else {
-        return (
-            <li className={listGroupHeaderClasses} {...ariaAttr} {...htmlAttributes}>
-
-            </li>
-        );
-    }
-}
-
-ListGroupHeaderStatic.defaultProps = {
-    ...globalDefaultProps,
-
-    className: '',
-
-    stuck: false
-};
-
-ListGroupHeaderStatic.propTypes = {
-    stuck: typeof false,
-
-    aria: typeof false,
-    legacy: typeof false,
-
-    className: typeof '',
-    htmlAttributes: typeof []
-};
-
-export { ListGroupHeader, ListGroupHeaderStatic };

package/src/list/list-item-text.jsx

@@ -1,62 +0,0 @@
-import { Component, globalDefaultProps } from '../component';
-
-class ListItemText extends Component {
-    render() {
-        return <ListItemTextStatic {...this.props} />;
-    }
-}
-
-function ListItemTextStatic(props) {
-    const {
-        className: ownClassName,
-
-        aria,
-        legacy,
-
-        ...htmlAttributes
-    } = props;
-
-    let listItemTextClasses = [
-        ownClassName,
-        'k-list-item-text'
-    ];
-
-
-    let legacyListItemTextClasses = [
-        ownClassName,
-    ];
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    if (legacy) {
-        return (
-            <span className={legacyListItemTextClasses} {...ariaAttr} {...htmlAttributes}>
-
-            </span>
-        );
-    }
-
-    return (
-        <span className={listItemTextClasses} {...ariaAttr} {...htmlAttributes}>
-
-        </span>
-    );
-}
-
-ListItemTextStatic.defaultProps = {
-    ...globalDefaultProps,
-
-    className: ''
-};
-
-ListItemTextStatic.propTypes = {
-    aria: typeof false,
-    legacy: typeof false,
-
-    className: typeof '',
-    htmlAttributes: typeof []
-};
-
-export { ListItemText, ListItemTextStatic };

package/src/menuitem/README.md

@@ -1,26 +0,0 @@
-```html
-<!-- default rendering -->
-<li class="k-item k-menu-item">
-     <span class="k-link k-menu-link">
-        {icon !== '' && <span class="k-icon k-i-${icon}"></span>}
-        {text !== '' && <span class="k-menu-link-text">Text</span>}
-        <span className="k-menu-expand-arrow k-icon k-i-${arrowIconName || 'none'}"></span>
-     </span>
-</li>
-
-<!-- canonical rendering -->
-<li class="
-    k-item
-    k-menu-item
-    ${hover && 'k-hover'}
-    ${focus && 'k-focus'}
-    ${active && 'k-active'}
-    ${disabled && 'k-disabled'}
-" disabled={disabled}>
-     <span class="k-link k-menu-link">
-        {icon !== '' && <span class="k-icon k-i-${icon}"></span>}
-        {text !== '' && <span class="k-menu-link-text">Text</span>}
-        <span className="k-menu-expand-arrow k-icon k-i-${arrowIconName || 'none'}"></span>
-     </span>
-</li>
-```

package/src/menulist/README.md

@@ -1,11 +0,0 @@
-```html
-<!-- default rendering -->
-<ul class="k-group k-menu-group k-reset"></ul>
-
-<!-- canonical rendering -->
-<ul class="
-        k-group k-menu-group k-reset
-        k-menulist-${size}
-    "
-></ul>
-```

package/src/menulist/index.js

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