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

package/src/textbox/textbox.jsx

@@ -1,30 +1,8 @@
-import * as styles from '../../utils/styles';
-import { Component, globalDefaultProps } from '../component';
-import { InputStatic, InputPrefixStatic, InputSuffixStatic } from '../input/index';
-
-class Textbox extends Component {
-
-    init() {
-        let children = Array.from(this.element.children);
-        let prefix = document.createDocumentFragment();
-        let suffix = document.createDocumentFragment();
-
-        children.forEach( child => {
-            const isName = child.getAttribute('is');
-
-            if (isName === 'InputPrefix') {
-                prefix.append( ...child.childNodes );
-            }
-
-            if (isName === 'InputSuffix') {
-                suffix.append( ...child.childNodes );
-            }
-        });
-
-        this._props.prefix = prefix;
-        this._props.suffix = suffix;
-    }
+import { globalDefaultProps } from '../component';
+import { Input, InputStatic, InputInnerInputStatic } from '../input/index';
+import { InputValidationIconStatic, InputLoadingIconStatic, InputClearValueStatic } from '../input/index';
 
+class Textbox extends Input {
     render() {
         return <TextboxStatic {...this.props} />;
     }
@@ -38,6 +16,7 @@ function TextboxStatic(props) {
         type,
         value,
         placeholder,
+        autocomplete,
 
         prefix,
         suffix,
@@ -49,6 +28,7 @@ function TextboxStatic(props) {
 
         hover,
         focus,
+        valid,
         invalid,
         required,
         disabled,
@@ -59,64 +39,69 @@ function TextboxStatic(props) {
         ...htmlAttributes
     } = props;
 
+    htmlAttributes.size = size;
+    htmlAttributes.rounded = rounded;
+    htmlAttributes.fillMode = fillMode;
+    htmlAttributes.hover = hover;
+    htmlAttributes.focus = focus;
+    htmlAttributes.valid = valid;
+    htmlAttributes.invalid = invalid;
+    htmlAttributes.required = required;
+    htmlAttributes.disabled = disabled;
+
     const inputAttributes = {
         type,
         value,
         placeholder,
+        autocomplete,
 
         disabled
     };
 
-    let ariaAttr = aria
-        ? {}
-        : {};
-
     let textboxClasses = [
         ownClassName,
-        'k-textbox',
-        styles.sizeClass( size, 'k-textbox' ),
-        styles.roundedClass( rounded ),
-        styles.fillModeClass( fillMode, 'k-textbox' ),
-        {
-            'k-hover': hover === true,
-            'k-focus': focus === true,
-            'k-invalid': invalid === true,
-            'k-required': required === true,
-            'k-disabled': disabled === true
-        }
+        'k-textbox'
     ];
 
-    let legacyClasses = [
-        ownClassName,
-        'k-textbox',
-        {
-            'k-state-hover': hover === true,
-            'k-state-focus': focus === true,
-            'k-state-invalid': invalid === true,
-            'k-state-required': required === true,
-            'k-state-disabled': disabled === true
-        }
-    ];
-
-    // Augment attributes
-    inputAttributes.type = type !== 'password' ? 'text' : type;
+    let ariaAttr = aria
+        ? {}
+        : {};
 
     if (legacy) {
+
+        let legacyClasses = [
+            ownClassName,
+            'k-textbox',
+            {
+                'k-state-hover': hover === true,
+                'k-state-focus': focus === true,
+                'k-state-invalid': invalid === true,
+                'k-state-required': required === true,
+                'k-state-disabled': disabled === true
+            }
+        ];
+
         return (
-            <span className={legacyClasses} {...ariaAttr} {...htmlAttributes}>
-                <InputPrefixStatic>{prefix}</InputPrefixStatic>
-                <InputStatic {...inputAttributes} />
-                <InputSuffixStatic>{suffix}</InputSuffixStatic>
-            </span>
+            <InputStatic className={legacyClasses} {...htmlAttributes}>
+                {prefix}
+                <input type={type} className="k-input" {...inputAttributes} />
+                {suffix}
+                <InputValidationIconStatic {...props} />
+                <InputLoadingIconStatic {...props} />
+                <InputClearValueStatic {...props} />
+            </InputStatic>
         );
     }
 
     return (
-        <span className={textboxClasses} {...ariaAttr} {...htmlAttributes}>
+        <InputStatic className={textboxClasses} {...ariaAttr} {...htmlAttributes}>
             {prefix}
-            <InputStatic {...inputAttributes} />
+            <InputInnerInputStatic {...inputAttributes} />
             {suffix}
-        </span>
+            <InputValidationIconStatic {...props} />
+            <InputLoadingIconStatic {...props} />
+            <InputClearValueStatic {...props} />
+        </InputStatic>
     );
 }
 
@@ -126,6 +111,11 @@ TextboxStatic.defaultProps = {
     type: 'text',
     value: '',
     placeholder: '',
+    autocomplete: 'off',
+
+    showValidationIcon: true,
+    showLoadingIcon: true,
+    showClearButton: true,
 
     size: 'medium',
     rounded: 'medium',
@@ -134,12 +124,20 @@ TextboxStatic.defaultProps = {
 };
 
 TextboxStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+
     type: typeof [ 'text', 'password' ],
     value: typeof '',
     placeholder: typeof '',
+    autocomplete: typeof [ 'on', 'off' ],
+
+    showValidationIcon: typeof true,
+    showLoadingIcon: typeof true,
+    showClearButton: typeof true,
 
-    prefix: typeof document.createDocumentFragment(),
-    suffix: typeof document.createDocumentFragment(),
+    prefix: typeof '#fragment',
+    suffix: typeof '#fragment',
 
     size: typeof [ 'none', 'small', 'medium', 'large' ],
     rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
@@ -150,13 +148,13 @@ TextboxStatic.propTypes = {
     focus: typeof false,
     valid: typeof false,
     invalid: typeof false,
+    loading: typeof false,
     required: typeof false,
     disabled: typeof false,
 
     aria: typeof false,
     legacy: typeof false,
 
-    className: typeof '',
     htmlAttributes: typeof []
 };
 

package/utils/styles.js

@@ -1,4 +1,4 @@
-import { isString, isObject } from './object';
+import { isString, isArray, isObject } from './object';
 
 const SPACE = ' ';
 
@@ -71,6 +71,12 @@ function classNames( ...args ) {
     let temp = args.flat().filter( arg => arg !== true && Boolean( arg ) );
 
     temp.forEach( className => {
+
+        if ( isArray( className ) ) {
+            classNames( className ).split( SPACE ).forEach( part => result.add( part ) );
+            return;
+        }
+
         if ( isString( className ) ) {
             className.split( SPACE ).forEach( part => result.add( part ) );
             return;
@@ -89,6 +95,26 @@ function classNames( ...args ) {
     /* eslint-enable */
 }
 
+function cssStyle( styleObj ) {
+    let result = new Set();
+
+    if ( styleObj === null || styleObj === undefined ) {
+        return '';
+    }
+
+    if ( typeof styleObj === 'string' ) {
+        return styleObj;
+    }
+
+    for (const [ key, value ] of Object.entries(styleObj)) {
+        if ( typeof value === 'string' && value !== '' ) {
+            result.add( `${key}: ${value};` );
+        }
+    }
+
+    return [ ...result ].join( SPACE );
+}
+
 
 export {
     sizeClass,
@@ -97,5 +123,6 @@ export {
     fillModeClass,
     themeColorClass,
 
-    classNames
+    classNames,
+    cssStyle,
 };

package/src/masked/index.js

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

package/src/masked/masked.jsx

@@ -1,139 +0,0 @@
-import * as styles from '../../utils/styles';
-import { Component, globalDefaultProps } from '../component';
-import { IconStatic } from '../icon/index';
-import { InputStatic } from '../input/index';
-
-class MaskedTextbox extends Component {
-
-    render() {
-        return <MaskedTextboxStatic {...this.props} />;
-    }
-}
-
-function MaskedTextboxStatic(props) {
-
-    const {
-        className: ownClassName,
-
-        value,
-        placeholder,
-
-        size,
-        rounded,
-
-        fillMode,
-
-        hover,
-        focus,
-        invalid,
-        required,
-        disabled,
-
-        aria,
-        legacy,
-
-        ...htmlAttributes
-
-    } = props;
-
-    const inputAttributes = {
-        type: 'text',
-        value,
-        placeholder,
-
-        disabled
-    };
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    let maskedClasses = [
-        ownClassName,
-        'k-maskedtextbox',
-        styles.sizeClass( size, 'k-maskedtextbox' ),
-        styles.roundedClass( rounded ),
-        styles.fillModeClass( fillMode, 'k-maskedtextbox' ),
-        {
-            'k-hover': hover === true,
-            'k-focus': focus === true,
-            'k-invalid': invalid === true,
-            'k-required': required === true,
-            'k-disabled': disabled === true
-        }
-    ];
-
-    let legacyClasses = [
-        ownClassName,
-        'k-widget',
-        'k-maskedtextbox',
-        {
-            'k-state-disabled': disabled === true
-        }
-    ];
-
-    let legacyWrapClasses = [
-        ownClassName,
-        'k-textbox',
-        {
-            'k-state-hover': hover === true,
-            'k-state-focused': focus === true,
-            'k-state-invalid': invalid === true
-        }
-    ];
-
-    if (legacy) {
-        return (
-            <span className={legacyClasses} {...ariaAttr} {...htmlAttributes}>
-                <input className={legacyWrapClasses} {...inputAttributes} />
-                {invalid && <IconStatic name="warning" />}
-            </span>
-        );
-    }
-
-    return (
-        <span className={maskedClasses} {...ariaAttr} {...htmlAttributes}>
-            <InputStatic {...inputAttributes} />
-            {invalid && <IconStatic className="k-input-icon" name="warning" />}
-        </span>
-    );
-}
-
-MaskedTextboxStatic.defaultProps = {
-    ...globalDefaultProps,
-
-    value: '',
-    placeholder: '',
-
-    size: 'medium',
-    rounded: 'medium',
-
-    fillMode: 'solid'
-};
-
-MaskedTextboxStatic.propTypes = {
-    type: typeof [ 'text' ],
-    value: typeof '',
-    placeholder: 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,
-
-    className: typeof '',
-    htmlAttributes: typeof []
-};
-
-export { MaskedTextbox, MaskedTextboxStatic };
-

package/src/numeric/index.js

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

package/src/numeric/numeric.jsx

@@ -1,149 +0,0 @@
-import * as styles from '../../utils/styles';
-import { Component, globalDefaultProps } from '../component';
-import { InputStatic } from '../input/index';
-import { SpinButtonStatic } from '../spinbutton/index';
-
-class NumericTextbox extends Component {
-
-    render() {
-        return <NumericTextboxStatic {...this.props} />;
-    }
-}
-
-function NumericTextboxStatic(props) {
-
-    const {
-        className: ownClassName,
-
-        value,
-        placeholder,
-
-        showSpinButtons,
-
-        size,
-        rounded,
-
-        fillMode,
-
-        hover,
-        focus,
-        invalid,
-        required,
-        disabled,
-
-        aria,
-        legacy,
-
-        ...htmlAttributes
-
-    } = props;
-
-    const inputAttributes = {
-        type: 'text',
-        value,
-        placeholder,
-
-        className: "k-formatted-value",
-
-        disabled
-    };
-
-    let ariaAttr = aria
-        ? {}
-        : {};
-
-    let numericClasses = [
-        ownClassName,
-        'k-numerictextbox',
-        styles.sizeClass( size, 'k-numerictextbox' ),
-        styles.roundedClass( rounded ),
-        styles.fillModeClass( fillMode, 'k-numerictextbox' ),
-        {
-            'k-hover': hover === true,
-            'k-focus': focus === true,
-            'k-invalid': invalid === true,
-            'k-required': required === true,
-            'k-disabled': disabled === true
-        }
-    ];
-
-    let legacyClasses = [
-        ownClassName,
-        'k-widget',
-        'k-numerictextbox',
-        {
-            'k-state-disabled': disabled === true
-        }
-    ];
-
-    let legacyWrapClasses = [
-        ownClassName,
-        'k-numeric-wrap',
-        {
-            'k-state-hover': hover === true,
-            'k-state-focused': focus === true,
-            'k-state-invalid': invalid === true
-        }
-    ];
-
-    if (legacy) {
-        return (
-            <span className={legacyClasses} {...ariaAttr} {...htmlAttributes}>
-                <span className={legacyWrapClasses}>
-                    <InputStatic {...inputAttributes} />
-                    {showSpinButtons === true && <SpinButtonStatic />}
-                </span>
-            </span>
-        );
-    }
-
-    return (
-        <span className={numericClasses} {...ariaAttr} {...htmlAttributes}>
-            <InputStatic {...inputAttributes} />
-            {showSpinButtons === true && <SpinButtonStatic className="k-input-spinner k-numeric-spinner" />}
-        </span>
-    );
-}
-
-NumericTextboxStatic.defaultProps = {
-    ...globalDefaultProps,
-
-    value: '',
-    placeholder: '',
-
-    showSpinButtons: true,
-
-    size: 'medium',
-    rounded: 'medium',
-
-    fillMode: 'solid'
-};
-
-NumericTextboxStatic.propTypes = {
-    type: typeof [ 'text' ],
-    value: typeof '',
-    placeholder: typeof '',
-
-    showSpinButtons: typeof true,
-
-    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,
-
-    className: typeof '',
-    htmlAttributes: typeof []
-};
-
-export { NumericTextbox, NumericTextboxStatic };
-