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

package/src/input/picker.jsx

@@ -0,0 +1,145 @@
+import * as styles from '../../utils/styles';
+import { Component, globalDefaultProps } from '../component';
+
+class Picker 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 (
+            <PickerStatic {...this.props} />
+        );
+    }
+}
+
+function PickerStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        size,
+        rounded,
+
+        fillMode,
+
+        hover,
+        focus,
+        invalid,
+        required,
+        disabled,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let pickerClasses = [
+        ownClassName,
+        'k-picker',
+        styles.sizeClass( size, 'k-input' ),
+        styles.roundedClass( rounded ),
+        styles.fillModeClass( fillMode, 'k-input' ),
+        {
+            'k-hover': hover === true,
+            'k-focus': focus === true,
+            'k-invalid': invalid === true,
+            'k-required': required === true,
+            'k-disabled': disabled === true
+        }
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if ( legacy ) {
+
+        let legacyClasses = [
+            ownClassName
+        ];
+
+        return (
+            <span className={legacyClasses} {...htmlAttributes}>
+                {props.children}
+            </span>
+        );
+    }
+
+    return (
+        <span className={pickerClasses} {...ariaAttr} {...htmlAttributes}>
+            {props.children}
+        </span>
+    );
+}
+
+PickerStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    type: 'text',
+    value: '',
+    placeholder: '',
+    autocomplete: 'off',
+
+    size: 'medium',
+    rounded: 'medium',
+
+    fillMode: 'solid'
+};
+
+PickerStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+
+    type: typeof [],
+    value: typeof '',
+    placeholder: typeof '',
+    autocomplete: typeof [ 'on', 'off' ],
+
+    prefix: typeof '#fragment',
+    suffix: typeof '#fragment',
+
+    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 []
+};
+
+export { Picker, PickerStatic };

package/src/maskedtextbox/README.md

@@ -0,0 +1,24 @@
+```html
+<!-- default rendering -->
+<span class="k-maskedtextbox k-input k-input-md k-rounded-md k-input-solid">
+    <input type="text" class="k-input-inner" value="..." placeholder="..." />
+</span>
+
+<!-- canonical rendering -->
+<span class="
+    k-maskedtextbox
+    k-input
+    k-input-${size}
+    k-rounded-${rounded}
+    k-input-${fillMode}
+
+    ${valid && 'k-valid'}
+    ${invalid && 'k-invalid'}
+    ${required && 'k-required'}
+    ${disabled && 'k-disabled'}
+">
+    <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
+    {valid && <span class="k-input-icon k-icon k-i-check"></span>}
+    {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
+</span>
+```

package/src/maskedtextbox/index.js

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

package/src/maskedtextbox/maskedtextbox.jsx

@@ -0,0 +1,155 @@
+import { Component, globalDefaultProps } from '../component';
+import { InputStatic, InputInnerInputStatic } from '../input/index';
+import { InputValidationIconStatic, InputLoadingIconStatic, InputClearValueStatic } from '../input/index';
+
+class MaskedTextbox extends Component {
+    render() {
+        return <MaskedTextboxStatic {...this.props} />;
+    }
+}
+
+function MaskedTextboxStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        type,
+        value,
+        placeholder,
+        autocomplete,
+
+        size,
+        rounded,
+
+        fillMode,
+
+        hover,
+        focus,
+        valid,
+        invalid,
+        required,
+        disabled,
+
+        aria,
+        legacy,
+
+        ...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 maskedClasses = [
+        ownClassName,
+        'k-maskedtextbox'
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (legacy) {
+
+        let legacyClasses = [
+            ownClassName,
+            'k-widget',
+            'k-maskedtextbox',
+            {
+                'k-state-disabled': disabled === true
+            }
+        ];
+
+        let legacyInputClasses = [
+            'k-textbox',
+            {
+                'k-state-hover': hover === true,
+                'k-state-focused': focus === true,
+                'k-state-invalid': invalid === true
+            }
+        ];
+
+        return (
+            <InputStatic className={legacyClasses} {...htmlAttributes}>
+                <input type={type} className={legacyInputClasses} {...inputAttributes} />
+            </InputStatic>
+        );
+    }
+
+    return (
+        <InputStatic className={maskedClasses} {...ariaAttr} {...htmlAttributes}>
+            <InputInnerInputStatic {...inputAttributes} />
+            <InputValidationIconStatic {...props} />
+            <InputLoadingIconStatic {...props} />
+            <InputClearValueStatic {...props} />
+        </InputStatic>
+    );
+}
+
+MaskedTextboxStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    type: 'text',
+    value: '',
+    placeholder: '',
+    autocomplete: 'off',
+
+    showValidationIcon: true,
+    showLoadingIcon: true,
+    showClearButton: true,
+
+    size: 'medium',
+    rounded: 'medium',
+
+    fillMode: 'solid'
+};
+
+MaskedTextboxStatic.propTypes = {
+    className: typeof '',
+
+    type: typeof [ 'text' ],
+    value: typeof '',
+    placeholder: typeof '',
+    autocomplete: typeof [ 'on', 'off' ],
+
+    showValidationIcon: typeof true,
+    showLoadingIcon: typeof true,
+    showClearButton: 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,
+    loading: typeof false,
+    required: typeof false,
+    disabled: typeof false,
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { MaskedTextbox, MaskedTextboxStatic };
+

package/src/numerictextbox/README.md

@@ -0,0 +1,42 @@
+```html
+<!-- default rendering -->
+<span class="k-numerictextbox k-input k-input-md k-rounded-md k-input-solid">
+    <input type="text" class="k-input-inner" value="..." placeholder="..." />
+    <span class="k-input-spinner k-spin-button">
+        <button class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base">
+            <span class="k-button-icon k-icon k-i-arrow-n"></span>
+        </button>
+        <button class="k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base">
+            <span class="k-button-icon k-icon k-i-arrow-s"></span>
+        </button>
+    </span>
+</span>
+
+<!-- canonical rendering -->
+<span class="
+    k-numerictextbox
+    k-input
+    k-input-${size}
+    k-rounded-${rounded}
+    k-input-${fillMode}
+
+    ${valid && 'k-valid'}
+    ${invalid && 'k-invalid'}
+    ${required && 'k-required'}
+    ${disabled && 'k-disabled'}
+">
+    <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />
+    {valid && <span class="k-input-icon k-icon k-i-check"></span>}
+    {invalid && <span class="k-input-icon k-icon k-i-check"></span>}
+    {showSpinButton &&
+        <span class="k-input-spinner k-spin-button">
+            <button class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base">
+                <span class="k-button-icon k-icon k-i-arrow-n"></span>
+            </button>
+            <button class="k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base">
+                <span class="k-button-icon k-icon k-i-arrow-s"></span>
+            </button>
+        </span>
+    }
+</span>
+```

package/src/numerictextbox/index.js

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

package/src/numerictextbox/numerictextbox.jsx

@@ -0,0 +1,171 @@
+import { Component, globalDefaultProps } from '../component';
+import { InputStatic, InputInnerInputStatic } from '../input/index';
+import { InputValidationIconStatic, InputLoadingIconStatic, InputClearValueStatic } from '../input/index';
+import { SpinButtonStatic } from '../spinbutton/index';
+
+class NumericTextbox extends Component {
+    render() {
+        return <NumericTextboxStatic {...this.props} />;
+    }
+}
+
+function NumericTextboxStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        type,
+        value,
+        placeholder,
+        autocomplete,
+
+        showSpinButton,
+
+        size,
+        rounded,
+
+        fillMode,
+
+        hover,
+        focus,
+        valid,
+        invalid,
+        required,
+        disabled,
+
+        aria,
+        legacy,
+
+        ...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: 'text',
+        value,
+        placeholder,
+        autocomplete,
+
+        disabled
+    };
+
+    let numericClasses = [
+        ownClassName,
+        'k-numerictextbox'
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (legacy) {
+
+        let legacyClasses = [
+            ownClassName,
+            'k-widget',
+            'k-numerictextbox',
+            {
+                'k-state-disabled': disabled === true
+            }
+        ];
+
+        let legacyWrapClasses = [
+            'k-numeric-wrap',
+            {
+                'k-state-hover': hover === true,
+                'k-state-focused': focus === true,
+                'k-state-invalid': invalid === true
+            }
+        ];
+
+        let legacyInputClasses = [
+            'k-input',
+            'k-formatted-value'
+        ];
+
+        return (
+            <InputStatic className={legacyClasses} {...htmlAttributes}>
+                <span className={legacyWrapClasses}>
+                    <input type={type} className={legacyInputClasses} {...inputAttributes} />
+                    <InputValidationIconStatic {...props} />
+                    <InputLoadingIconStatic {...props} />
+                    <InputClearValueStatic {...props} />
+                    {showSpinButton === true && <SpinButtonStatic />}
+                </span>
+            </InputStatic>
+        );
+    }
+
+    return (
+        <InputStatic className={numericClasses} {...ariaAttr} {...htmlAttributes}>
+            <InputInnerInputStatic {...inputAttributes} />
+            <InputValidationIconStatic {...props} />
+            <InputLoadingIconStatic {...props} />
+            <InputClearValueStatic {...props} />
+            {showSpinButton === true && <SpinButtonStatic className="k-input-spinner" />}
+        </InputStatic>
+    );
+}
+
+NumericTextboxStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    value: '',
+    placeholder: '',
+    autocomplete: 'off',
+
+    showSpinButton: true,
+
+    showValidationIcon: true,
+    showLoadingIcon: true,
+    showClearButton: true,
+
+    size: 'medium',
+    rounded: 'medium',
+
+    fillMode: 'solid'
+};
+
+NumericTextboxStatic.propTypes = {
+    type: typeof [ 'text' ],
+    value: typeof '',
+    placeholder: typeof '',
+    autocomplete: typeof [ 'on', 'off' ],
+
+    showSpinButton: typeof true,
+
+    showValidationIcon: typeof true,
+    showLoadingIcon: typeof true,
+    showClearButton: 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 };
+

package/src/radio/README.md

@@ -0,0 +1,21 @@
+```html
+<!-- default rendering -->
+<input type="radio" class="k-radio k-radio-md k-rounded-md" />
+
+<!-- canonical rendering -->
+<input type="radio"
+    class="
+        k-radio
+        k-radio-${size}
+        k-rounded-${rounded}
+
+        ${checked && 'k-checked'}
+
+        ${valid && 'k-valid'}
+        ${invalid && 'k-invalid'}
+        ${required && 'k-required'}
+        ${disabled && 'k-disabled'}
+    "
+    disabled={disabled}
+/>
+```

package/src/radio/index.js

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

package/src/radio/radio.jsx

@@ -0,0 +1,103 @@
+import * as styles from '../../utils/styles';
+import { Component, globalDefaultProps } from '../component';
+
+class Radio extends Component {
+    render() {
+        return <RadioStatic {...this.props} />;
+    }
+}
+
+function RadioStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        checked,
+
+        size,
+
+        hover,
+        focus,
+        invalid,
+        disabled,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+
+    } = props;
+
+    htmlAttributes.checked = checked;
+    htmlAttributes.disabled = disabled;
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    let radioClasses = [
+        ownClassName,
+        'k-radio',
+        styles.sizeClass( size, 'k-radio' ),
+        {
+            'k-hover': hover === true,
+            'k-focus': focus === true,
+            'k-invalid': invalid === true,
+            'k-disabled': disabled === true,
+            'k-checked': checked === true,
+        }
+    ];
+
+    if (legacy) {
+
+        let legacyClasses = [
+            ownClassName,
+            'k-radio',
+            {
+                'k-state-hover': hover === true,
+                'k-state-focus': focus === true,
+                'k-state-invalid': invalid === true,
+                'k-state-disabled': disabled === true,
+                'k-state-checked': checked === true,
+            }
+        ];
+
+        return <input type="radio" className={legacyClasses} {...ariaAttr} {...htmlAttributes}/>;
+    }
+
+    return <input type="radio" className={radioClasses} {...ariaAttr} {...htmlAttributes}/>;
+}
+
+RadioStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    id: '',
+    name: '',
+
+    size: 'medium'
+};
+
+RadioStatic.propTypes = {
+    className: typeof '',
+
+    id: typeof '',
+    name: typeof '',
+    value: typeof '',
+
+    checked: typeof false,
+
+    size: typeof [ 'none', 'small', 'medium', 'large' ],
+
+    hover: typeof false,
+    focus: typeof false,
+    valid: typeof false,
+    invalid: typeof false,
+    disabled: typeof false,
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { Radio, RadioStatic };

package/src/searchbox/README.md

@@ -0,0 +1,26 @@
+```html
+<!-- default rendering -->
+<span class="k-searchbox k-input k-input-md k-rounded-md k-input-solid">
+    <input type="text" class="k-input-inner" value="..." placeholder="..." />
+    <span class="k-input-icon k-icon k-i-search"></span>
+</span>
+
+<!-- canonical rendering -->
+<span class="
+    k-searchbox
+    k-input
+    k-input-${size}
+    k-rounded-${rounded}
+    k-input-${fillMode}
+
+    ${valid && 'k-valid'}
+    ${invalid && 'k-invalid'}
+    ${required && 'k-required'}
+    ${disabled && 'k-disabled'}
+">
+    {showIcon && iconPosition === 'leading' && <span class="k-input-icon k-icon k-i-{iconName}"></span>}
+    <input type={type} class="k-input-inner" value={value} placeholder={placeholder} disabled={disabled} />}
+    {text !== '' <span class="k-clear-value"></span>}
+    {showIcon && iconPosition === 'trailing' && <span class="k-input-icon k-icon k-i-{iconName}"></span>}
+</span>
+```

package/src/searchbox/index.js

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