lucid-ui/dist/cjs/components/ExampleComponent/ExampleComponent.js

A UI component library from AppNexus.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
// Required for all new components
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("prop-types"));
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var cx = style_helpers_1.lucidClassNames.bind('&-ExampleComponent');
var bool = prop_types_1.default.bool, func = prop_types_1.default.func, node = prop_types_1.default.node, string = prop_types_1.default.string, object = prop_types_1.default.object;
/**
 * {"categories": ["mycategory"]}
 *
 * Update "mycategory" to set the category your component falls under. You can see available categories
 * in the left hand column.
 *
 * Describe your component here. How it should be used, use cases and more.
 * Please see examples for more information.
 */
var ExampleComponent = component_types_1.createClass({
    displayName: 'ExampleComponent',
    // reducers,
    // selectors,
    // Each prop in propTypes should include a description using /* */ of what
    // the prop is and how it should be used by other developers who consume your
    // component.
    propTypes: {
        /**
         * Appended to the component-specific class names set on the root
         * element.
         */
        className: string,
        /**
         * Any valid React children. This wraps your new component around whatever other React children consumers
         * of your component may choose to use. If consumers can not use any/all React children. Be sure to call
         * that out here.
         */
        children: node,
        /**
         * Example of a boolean prop.
         * Used in this example to control an additional classname
         * `lucid-ExampleComponent-isX' on the root element.
         */
        isX: bool,
        /**
         * Example of a customizable component function. Always show the signature.
         *
         * Signature: `(item, { event, props }) => {}`
         */
        onX: func,
        /**
         * Passed through to the root element.
         */
        style: object,
    },
    handleX: function () {
        alert('This is an example of a handler function');
    },
    render: function () {
        var _a = this.props, className = _a.className, children = _a.children, isX = _a.isX, style = _a.style;
        return (react_1.default.createElement("div", { className: cx('&', className, {
                '&-isX': isX,
            }), style: style }, children));
    },
});
exports.default = ExampleComponent;
//# sourceMappingURL=ExampleComponent.js.map