@momentum-ui/react-collaboration/dist/esm/legacy/Input/examples/KitchenSink.js

Cisco Momentum UI Framework for React Collaboration Applications

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React from 'react';
import { Icon, Input } from '@momentum-ui/react-collaboration';
var InputKitchenSink = /** @class */ (function (_super) {
    __extends(InputKitchenSink, _super);
    function InputKitchenSink() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    InputKitchenSink.prototype.render = function () {
        var inputs = function (value) { return (React.createElement(React.Fragment, null,
            React.createElement(Input, { name: "inputSuccess".concat(value), label: "Success", htmlId: "inputSuccess".concat(value), containerSize: "small-12", value: "Error Text", messageArr: [
                    {
                        message: "This is where the success message would be.\n              This is where the success message would be.\n              This is where the success message would be.\n              This is where the success message would be.\n              This is where the success message would be.",
                        type: 'success',
                    },
                ] }),
            React.createElement(Input, { name: "inputError".concat(value), label: "Error", htmlId: "inputError".concat(value), containerSize: "small-12", value: "Error Text", messageArr: [{ message: 'This is where the error message would be.', type: 'error' }] }),
            React.createElement(Input, { name: "inputWarning".concat(value), label: "Warning", htmlId: "inputWarning".concat(value), containerSize: "small-12", value: "Warning Text", messageArr: [
                    {
                        message: 'This is where the warning message would be.',
                        type: 'warning',
                    },
                ] }),
            React.createElement(Input, { name: "inputDoubleWarning".concat(value), label: "Double Warning", htmlId: "inputDoubleWarning".concat(value), containerSize: "small-12", value: "Double Warning Text", messageArr: [
                    {
                        message: 'This is where the warning message would be.',
                        type: 'warning',
                    },
                    {
                        message: 'This is where the warning message would be.',
                        type: 'warning',
                    },
                ] }),
            React.createElement(Input, { name: "default".concat(value), label: "Default", htmlId: "default".concat(value), containerSize: "small-12" }),
            React.createElement(Input, { name: "default".concat(value), label: "Default", htmlId: "default".concat(value), containerSize: "small-12", shape: "pill" }),
            React.createElement(Input, { name: "Multiline".concat(value), label: "Multiline", htmlId: "Multiline".concat(value), containerSize: "small-12", multiline: true }),
            React.createElement(Input, { name: "nested".concat(value), label: "Nested 1", htmlId: "nested".concat(value), containerSize: "small-12", nestedLevel: 1 }),
            React.createElement(Input, { name: "nested2".concat(value), label: "Nested 2", htmlId: "nested2".concat(value), containerSize: "small-12", nestedLevel: 2 }),
            React.createElement(Input, { name: "nested3".concat(value), label: "Nested 3", htmlId: "nested3".concat(value), containerSize: "small-12", nestedLevel: 3 }),
            React.createElement(Input, { name: "readOnly".concat(value), label: "Read Only", htmlId: "readOnly".concat(value), containerSize: "small-12", value: "With Placeholder", readOnly: true }),
            React.createElement(Input, { name: "disabled".concat(value), label: "Disabled", htmlId: "disabled".concat(value), containerSize: "small-12", placeholder: "With Placeholder", disabled: true }),
            React.createElement(Input, { name: "disabledWithValue".concat(value), label: "Disabled Value", htmlId: "disabledWithValue".concat(value), containerSize: "small-12", value: "With Value", disabled: true }),
            React.createElement(Input, { name: "disabledro".concat(value), label: "Disabled Read Only", htmlId: "disabledro".concat(value), containerSize: "small-12", value: "Disabled ReadOnly Input", disabled: true, readOnly: true }),
            React.createElement(Input, { name: "placeholder".concat(value), label: "Placeholder", htmlId: "placeholder".concat(value), containerSize: "small-12", placeholder: "With Placeholder" }),
            React.createElement(Input, { name: "clearInput".concat(value), label: "Clear", htmlId: "clearInput".concat(value), containerSize: "small-12", placeholder: "Placeholder Text", clear: true }),
            React.createElement(Input, { name: "clearWithValueInput".concat(value), label: "Clear with Value", htmlId: "clearWithValueInput".concat(value), containerSize: "small-12", value: "Clear", clear: true }),
            React.createElement(Input, { name: "rightIcon".concat(value), label: "Right Icon", htmlId: "rightIcon".concat(value), containerSize: "small-12", placeholder: "Placeholder Text", inputAfter: React.createElement(Icon, { name: "accessibility_16" }) }),
            React.createElement(Input, { name: "leftIcon".concat(value), label: "Left Icon", htmlId: "leftIcon".concat(value), containerSize: "small-12", placeholder: "Placeholder Text", inputBefore: React.createElement(Icon, { name: "accessibility_16" }) }),
            React.createElement(Input, { name: "leftIconDisabled".concat(value), label: "Left Icon Disabled", htmlId: "leftIconDisabled".concat(value), containerSize: "small-12", placeholder: "Placeholder Text", inputBefore: React.createElement(Icon, { name: "accessibility_16" }), disabled: true }),
            React.createElement(Input, { name: "clearLeftIcon".concat(value), label: "Clear and Left Icon", htmlId: "clearLeftIcon".concat(value), containerSize: "small-12", placeholder: "Placeholder Text", inputBefore: React.createElement(Icon, { name: "accessibility_16" }), clear: true }),
            React.createElement(Input, { name: "help".concat(value), label: "Help Text", htmlId: "help".concat(value), containerSize: "small-12", placeholder: "With Placeholder", helpText: "Help Text" }),
            React.createElement(Input, { name: "longHelp".concat(value), label: "Long Help Text", htmlId: "longHelp".concat(value), containerSize: "small-12", placeholder: "With Placeholder", helpText: "\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n            Nullam et quam id ipsum ultrices gravida.\n            Donec tempor mattis erat, at suscipit ligula.\n            Nullam nec dui laoreet, tempor justo sed, consequat sapien.\n            Suspendisse eget odio id eros feugiat sollicitudin id vel eros.\n            Nunc mattis ac ligula sit amet consequat.\n            Etiam semper felis blandit enim dignissim, a semper diam viverra.\n            Praesent quis vehicula libero. Curabitur ut semper lorem, vel iaculis ex.\n          " }),
            React.createElement(Input, { name: "inputSecondaryLabel".concat(value), label: "Secondary Label", htmlId: "inputSecondaryLabel".concat(value), containerSize: "small-12", secondaryLabel: "Secondary Label" }),
            React.createElement(Input, { name: "inputDisabledSecondaryLabel".concat(value), label: "Disabled Secondary Label", htmlId: "inputDisabledSecondaryLabel".concat(value), containerSize: "small-12", secondaryLabel: "Secondary Label", disabled: true }),
            React.createElement(Input, { name: "inputSecondaryHelpLabel".concat(value), label: "Secondary/Help Label", htmlId: "inputSecondaryHelpLabel".concat(value), containerSize: "small-12", secondaryLabel: "Secondary Label", helpText: "Help Text" }),
            React.createElement(Input, { name: "inputSecondaryHelpLabelDisabled".concat(value), label: "Disabled Secondary/Help Label", htmlId: "inputSecondaryHelpLabelDisabled".concat(value), containerSize: "small-12", secondaryLabel: "Secondary Label", helpText: "Help Text", disabled: true }),
            React.createElement(Input, { name: "Filldefault".concat(value), label: "Filled", htmlId: "Filldefault".concat(value), isFilled: true, containerSize: "small-12" }),
            React.createElement(Input, { name: "FillreadOnly".concat(value), label: "Filled Read Only", htmlId: "FillreadOnly".concat(value), isFilled: true, containerSize: "small-12", value: "With Placeholder", readOnly: true }),
            React.createElement(Input, { name: "Filldisabled".concat(value), label: "Filled Disabled", htmlId: "Filldisabled".concat(value), isFilled: true, containerSize: "small-12", placeholder: "With Placeholder", disabled: true }),
            React.createElement(Input, { name: "Filldisabledro".concat(value), label: "Filled Disabled Read Only", htmlId: "Filldisabledro".concat(value), containerSize: "small-12", isFilled: true, value: "Disabled ReadOnly Input", disabled: true, readOnly: true }),
            React.createElement(Input, { name: "Fillplaceholder".concat(value), label: "Filled Placeholder", htmlId: "Fillplaceholder".concat(value), isFilled: true, containerSize: "small-12", placeholder: "With Placeholder" }),
            React.createElement(Input, { name: "FillclearInput".concat(value), label: "Filled Clear", htmlId: "FillclearInput".concat(value), isFilled: true, containerSize: "small-12", placeholder: "Placeholder Text", clear: true }),
            React.createElement(Input, { name: "filledClearInput".concat(value), label: "Filled Clear with Value", htmlId: "filledClearInput".concat(value), isFilled: true, containerSize: "small-12", value: "Clear", clear: true }),
            React.createElement(Input, { name: "FillrightIcon".concat(value), label: "Filled Right Icon", htmlId: "FillrightIcon".concat(value), isFilled: true, containerSize: "small-12", placeholder: "Placeholder Text", inputAfter: React.createElement(Icon, { name: "accessibility_16" }) }),
            React.createElement(Input, { name: "FillleftIcon".concat(value), label: "Filled Left Icon", htmlId: "FillleftIcon".concat(value), isFilled: true, containerSize: "small-12", placeholder: "Placeholder Text", inputBefore: React.createElement(Icon, { name: "accessibility_16" }) }),
            React.createElement(Input, { name: "FillclearLeftIcon".concat(value), label: "Filled Clear and Left Icon", htmlId: "FillclearLeftIcon".concat(value), isFilled: true, containerSize: "small-12", placeholder: "Placeholder Text", inputBefore: React.createElement(Icon, { name: "accessibility_16" }), clear: true }),
            React.createElement(Input, { name: "Fillhelp".concat(value), label: "Filled Help Text", htmlId: "Fillhelp".concat(value), isFilled: true, containerSize: "small-12", placeholder: "With Placeholder", helpText: "Help Text" }),
            React.createElement(Input, { name: "FillinputSecondaryLabel".concat(value), label: "Filled Secondary Label", htmlId: "FillinputSecondaryLabel".concat(value), isFilled: true, containerSize: "small-12", secondaryLabel: "Secondary Label" }),
            React.createElement(Input, { name: "FillinputSecondaryHelpLabel".concat(value), label: "Filled Secondary/Help Label", htmlId: "FillinputSecondaryHelpLabel".concat(value), isFilled: true, containerSize: "small-12", secondaryLabel: "Secondary Label", helpText: "Help Text" }))); };
        return (React.createElement(React.Fragment, null,
            React.createElement("div", { className: "row", style: { padding: '1rem' } }, inputs(1)),
            React.createElement("div", { className: "md--dark row", style: { backgroundColor: 'black', padding: '1rem' } }, inputs(2)),
            React.createElement("div", { className: "md--contrast" },
                React.createElement("div", { className: "row", style: { padding: '1rem' } }, inputs(3)),
                React.createElement("div", { className: "md--dark row", style: { backgroundColor: 'black', padding: '1rem' } }, inputs(4)))));
    };
    return InputKitchenSink;
}(React.PureComponent));
export default InputKitchenSink;
//# sourceMappingURL=KitchenSink.js.map