@progress/kendo-themes-html 4.41.3-dev.3 → 5.0.0-alpha.0

package/src/icon/icon.jsx

@@ -1,4 +1,4 @@
-import { Component } from '../component';
+import { Component, globalDefaultProps } from '../component';
 
 class Icon extends Component {
     render() {
@@ -8,30 +8,52 @@ class Icon extends Component {
 
 function IconStatic(props) {
     const {
+        className: ownClassName,
+
         name,
-        className: ownClassName
+
+        aria,
+
+        ...htmlAttributes
+
     } = props;
 
-    let iconClassName = [
+    let iconClasses = [
         ownClassName,
         'k-icon',
         `k-i-${name}`
     ];
 
+    let ariaAttr = aria
+        ? {}
+        : {};
+
     return (
         <>
-            { name && <span className={iconClassName}></span> }
+            { name &&
+                <span className={iconClasses} {...ariaAttr} {...htmlAttributes}>
+                    {props.children}
+                </span>
+            }
         </>
     );
 }
 
 IconStatic.defaultProps = {
-    name: '',
-    className: ''
+    ...globalDefaultProps,
+
+    name: ''
 };
 IconStatic.propTypes = {
+    className: typeof '',
+
     name: typeof '',
-    className: typeof ''
+
+    children: typeof [],
+
+    aria: typeof false,
+
+    htmlAttributes: typeof [],
 };
 
 export { Icon, IconStatic };

package/src/index.js

@@ -2,7 +2,7 @@
 /* global kendo */
 import { isFunction } from '../utils/object';
 
-window.addEventListener('DOMContentLoaded', () => {
+export function init() {
     document.querySelectorAll('[is]').forEach( element => {
         const componentName = element.getAttribute('is');
         const component = kendo.Html[componentName];
@@ -11,7 +11,9 @@ window.addEventListener('DOMContentLoaded', () => {
             new component( element );
         }
     });
-});
+}
+
+window.addEventListener('DOMContentLoaded', init);
 
 // Dependencies
 export * from './component';
@@ -19,9 +21,36 @@ export * from './component';
 // Generic content
 export * from './icon/index';
 
-// Basic forms
+// Primitive components
+export * from './input/index';
+// export * from './picker/index';
+// export * from './popup/index';
+// export * from './list/index';
+
+// Native forms
 export * from './button/index';
 export * from './textbox/index';
 export * from './textarea/index';
-export * from './masked/index';
-export * from './numeric/index';
+export * from './checkbox/index';
+export * from './radio/index';
+// export * from './listbox/index';
+// export * from './progressbar/index';
+// export * from './slider/index';
+
+// Augmented inputs
+export * from './autocomplete/index';
+// export * from './captcha/index';
+export * from './colorpicker/index';
+export * from './combobox/index';
+// export * from './datetime/index';
+// export * from './dropdowngrid/index';
+export * from './dropdownlist/index';
+// export * from './dropdowntree/index';
+export * from './maskedtextbox/index';
+// export * from './multiselect/index';
+export * from './numerictextbox/index';
+// export * from './rating/index';
+export * from './searchbox/index';
+export * from './switch/index';
+// export * from './upload/index';
+// export * from './dropzone/index';

package/src/input/index.js

@@ -1,3 +1,8 @@
 export * from './input.jsx';
+export * from './picker.jsx';
+export * from './input-inner.jsx';
 export * from './input-prefix.jsx';
 export * from './input-suffix.jsx';
+export * from './input-validation-icon.jsx';
+export * from './input-loading-icon.jsx';
+export * from './input-clear-value.jsx';

package/src/input/input-clear-value.jsx

@@ -0,0 +1,30 @@
+import { IconStatic } from '../icon/index';
+
+function InputClearValueStatic(inputProps) {
+
+    const {
+        value,
+
+        showClearButton,
+
+        loading,
+        disabled,
+
+        aria
+    } = inputProps;
+
+    if (disabled || loading || !showClearButton || value === '' ) {
+        return <></>;
+    }
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    return (
+        <span className="k-clear-value" {...ariaAttr}><IconStatic name="x" /></span>
+    );
+
+}
+
+export { InputClearValueStatic };

package/src/input/input-inner-input.jsx

@@ -0,0 +1,77 @@
+import { Component, globalDefaultProps } from '../component';
+
+class InputInnerInput extends Component {
+    render() {
+        return <InputInnerInputStatic {...this.props} />;
+    }
+}
+
+function InputInnerInputStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        type,
+        value,
+        placeholder,
+        autocomplete,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    let inputClasses = [
+        ownClassName,
+        'k-input-inner'
+    ];
+
+    let legacyClasses = [
+        ownClassName,
+        'k-input'
+    ];
+
+    htmlAttributes.value = value;
+    htmlAttributes.placeholder = placeholder;
+    htmlAttributes.autocomplete = autocomplete;
+
+    if (legacy) {
+        return (
+            <input type={type} className={legacyClasses} {...ariaAttr} {...htmlAttributes} />
+        );
+    }
+
+    return (
+        <input type={type} className={inputClasses} {...ariaAttr} {...htmlAttributes} />
+    );
+}
+
+InputInnerInputStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    type: 'text',
+    value: '',
+    placeholder: '',
+    autocomplete: 'off'
+};
+
+InputInnerInputStatic.propTypes = {
+    className: typeof '',
+
+    type: typeof [],
+    value: typeof '',
+    placeholder: typeof '',
+    autocomplete: typeof [ 'on', 'off' ],
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { InputInnerInput, InputInnerInputStatic };

package/src/input/input-inner-span.jsx

@@ -0,0 +1,91 @@
+import { IconStatic } from '../icon/index';
+import { Component, globalDefaultProps } from '../component';
+
+class InputInnerSpan extends Component {
+    render() {
+        return <InputInnerSpanStatic {...this.props} />;
+    }
+}
+
+function InputInnerSpanStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        value,
+        placeholder,
+
+        showValue,
+        valueIcon,
+        valueIconName,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    let inputClasses = [
+        ownClassName,
+        'k-input-inner'
+    ];
+
+    if (legacy) {
+
+        let legacyClasses = [
+            ownClassName,
+            'k-input'
+        ];
+
+        return (
+            <span className={legacyClasses} {...htmlAttributes}>
+                {valueIcon}
+                {valueIcon === null && <IconStatic className="k-icon k-input-value-icon" name={valueIconName} />}
+                {showValue && value === '' && placeholder}
+                {showValue && value && <span className="k-input-value-text">{value}</span>}
+            </span>
+        );
+    }
+
+    return (
+        <span className={inputClasses} {...ariaAttr} {...htmlAttributes}>
+            {valueIcon}
+            {valueIcon === null && <IconStatic className="k-icon k-input-value-icon" name={valueIconName} />}
+            {showValue && value === '' && placeholder}
+            {showValue && value && <span className="k-value-text">{value}</span>}
+        </span>
+    );
+}
+
+InputInnerSpanStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    value: '',
+    placeholder: '',
+
+    showValue: true,
+    valueIcon: null,
+    valueIconName: '',
+};
+
+InputInnerSpanStatic.propTypes = {
+    className: typeof '',
+
+    value: typeof '',
+    placeholder: typeof '',
+
+    showValue: typeof true,
+    valueIcon: typeof '#fragment',
+    valueIconName: typeof '',
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { InputInnerSpan, InputInnerSpanStatic };

package/src/input/input-inner-textarea.jsx

@@ -0,0 +1,74 @@
+import { Component, globalDefaultProps } from '../component';
+
+class InputInnerTextarea extends Component {
+    render() {
+        return <InputInnerTextareaStatic {...this.props} />;
+    }
+}
+
+function InputInnerTextareaStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        value,
+        placeholder,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    let inputClasses = [
+        ownClassName,
+        'k-input-inner'
+    ];
+
+    let legacyClasses = [
+        ownClassName,
+        'k-input'
+    ];
+
+    htmlAttributes.value = value;
+    htmlAttributes.placeholder = placeholder;
+
+    if (legacy) {
+        return (
+            <textarea className={legacyClasses} {...ariaAttr} {...htmlAttributes}>
+                {value}
+            </textarea>
+        );
+    }
+
+    return (
+        <textarea className={inputClasses} {...ariaAttr} {...htmlAttributes}>
+            {value}
+        </textarea>
+    );
+}
+
+InputInnerTextareaStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    value: '',
+    placeholder: ''
+};
+
+InputInnerTextareaStatic.propTypes = {
+    className: typeof '',
+
+    value: typeof '',
+    placeholder: typeof '',
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { InputInnerTextarea, InputInnerTextareaStatic };

package/src/input/input-inner.jsx

@@ -0,0 +1,3 @@
+export * from './input-inner-input.jsx';
+export * from './input-inner-span.jsx';
+export * from './input-inner-textarea.jsx';

package/src/input/input-loading-icon.jsx

@@ -0,0 +1,28 @@
+import { IconStatic } from '../icon/index';
+
+function InputLoadingIconStatic(inputProps) {
+
+    const {
+        showLoadingIcon,
+
+        loading,
+        disabled,
+
+        aria
+    } = inputProps;
+
+    if (disabled || !showLoadingIcon || !loading) {
+        return <></>;
+    }
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    return (
+        <IconStatic name="loading" className="k-input-loading-icon" {...ariaAttr} />
+    );
+
+}
+
+export { InputLoadingIconStatic };

package/src/input/input-prefix.jsx

@@ -21,9 +21,7 @@ function InputPrefixStatic(props) {
         'k-input-prefix'
     ];
 
-    let childCount = children.childNodes.length;
-
-    if (childCount === 0) {
+    if (children.length === 0) {
         return <></>;
     }
 
@@ -42,7 +40,6 @@ InputPrefixStatic.defaultProps = {
 
 InputPrefixStatic.propTypes = {
     children: typeof [],
-
     className: typeof '',
 
     htmlAttributes: typeof []

package/src/input/input-suffix.jsx

@@ -21,9 +21,7 @@ function InputSuffixStatic(props) {
         'k-input-suffix'
     ];
 
-    let childCount = children.childNodes.length;
-
-    if (childCount === 0) {
+    if (children.length === 0) {
         return <></>;
     }
 
@@ -42,7 +40,6 @@ InputSuffixStatic.defaultProps = {
 
 InputSuffixStatic.propTypes = {
     children: typeof [],
-
     className: typeof '',
 
     htmlAttributes: typeof []

package/src/input/input-validation-icon.jsx

@@ -0,0 +1,37 @@
+import { IconStatic } from '../icon/index';
+
+function InputValidationIconStatic(inputProps) {
+
+    const {
+        showValidationIcon,
+
+        valid,
+        invalid,
+        loading,
+        disabled,
+
+        aria
+    } = inputProps;
+
+    if (disabled || loading || !showValidationIcon ) {
+        return <></>;
+    }
+
+    let iconName = invalid ? 'warning' : 'check';
+    let renderValidationIcon = Boolean( valid || invalid );
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (renderValidationIcon === false) {
+        return <></>;
+    }
+
+    return (
+        <IconStatic name={iconName} className="k-input-validation-icon" {...ariaAttr} />
+    );
+
+}
+
+export { InputValidationIconStatic };

package/src/input/input.jsx

@@ -1,8 +1,39 @@
+import * as styles from '../../utils/styles';
 import { Component, globalDefaultProps } from '../component';
 
 class Input extends Component {
+
+    init() {
+        let prefix = <></>;
+        let suffix = <></>;
+        let children = this._props.children;
+        let newChildren = [];
+
+        children.forEach( child => {
+            let component = child._component;
+
+            if (component === 'InputPrefix') {
+                prefix.props.children.push( child );
+                return;
+            }
+
+            if (component === 'InputSuffix') {
+                suffix.props.children.push( child );
+                return;
+            }
+
+            newChildren.push( child );
+        });
+
+        this._props.prefix = prefix;
+        this._props.suffix = suffix;
+        this._props.children = newChildren;
+    }
+
     render() {
-        return <InputStatic {...this.props} />;
+        return (
+            <InputStatic {...this.props} />
+        );
     }
 }
 
@@ -11,78 +42,105 @@ function InputStatic(props) {
     const {
         className: ownClassName,
 
-        value,
-        placeholder,
-        autocomplete,
+        size,
+        rounded,
 
-        renderAs,
+        fillMode,
+
+        hover,
+        focus,
+        valid,
+        invalid,
+        required,
+        disabled,
 
         aria,
+        legacy,
+
         ...htmlAttributes
     } = props;
 
     let inputClasses = [
         ownClassName,
-        'k-input'
+        'k-input',
+        styles.sizeClass( size, 'k-input' ),
+        styles.roundedClass( rounded ),
+        styles.fillModeClass( fillMode, 'k-input' ),
+        {
+            'k-hover': hover === true,
+            'k-focus': focus === true,
+            'k-valid': valid === true,
+            'k-invalid': invalid === true,
+            'k-required': required === true,
+            'k-disabled': disabled === true
+        }
     ];
 
     let ariaAttr = aria
         ? {}
         : {};
 
-    // console.log( value );
-
-    if (renderAs === 'span') {
-        return (
-            <span className={inputClasses} {...ariaAttr} {...htmlAttributes}>
-                {value !== '' && placeholder}
-                {value}
-            </span>
-        );
-    }
+    if ( legacy ) {
 
-    if (renderAs === 'textarea') {
-        htmlAttributes.placeholder = placeholder;
+        let legacyClasses = [
+            ownClassName
+        ];
 
         return (
-            <textarea className={inputClasses} {...ariaAttr} {...htmlAttributes}>
-                {value}
-            </textarea>
+            <span className={legacyClasses} {...htmlAttributes}>
+                {props.children}
+            </span>
         );
     }
 
-    htmlAttributes.value = value;
-    htmlAttributes.placeholder = placeholder;
-    htmlAttributes.autocomplete = autocomplete;
-
     return (
-        <input type="text"
-            className={inputClasses}
-            {...ariaAttr}
-            {...htmlAttributes} />
+        <span className={inputClasses} {...ariaAttr} {...htmlAttributes}>
+            {props.children}
+        </span>
     );
 }
 
 InputStatic.defaultProps = {
     ...globalDefaultProps,
 
+    type: 'text',
     value: '',
     placeholder: '',
     autocomplete: 'off',
 
-    renderAs: 'input'
+    size: 'medium',
+    rounded: 'medium',
+
+    fillMode: 'solid'
 };
 
 InputStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+
+    type: typeof [],
     value: typeof '',
     placeholder: typeof '',
     autocomplete: typeof [ 'on', 'off' ],
 
-    renderAs: typeof [ 'input', 'span', 'textarea' ],
+    prefix: typeof '#fragment',
+    suffix: typeof '#fragment',
 
-    className: typeof '',
+    size: typeof [ 'none', 'small', 'medium', 'large' ],
+    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+
+    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+
+    hover: typeof false,
+    focus: typeof false,
+    valid: typeof false,
+    invalid: typeof false,
+    required: typeof false,
+    disabled: typeof false,
 
     aria: typeof false,
+    legacy: typeof false,
+
     htmlAttributes: typeof []
 };