@csegames/camelot-unchained/lib/components/Input.js

Camelot Unchained Client Library

"use strict";
/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

var __assign = undefined && undefined.__assign || Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) {
            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
    }
    return t;
};
var __rest = undefined && undefined.__rest || function (s, e) {
    var t = {};
    for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
    }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
    }return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var aphrodite_1 = require("aphrodite");
var client_1 = require("../core/client");
exports.defaultInputStyle = {
    inputWrapper: {
        display: 'flex',
        flexDirection: 'column'
    },
    input: {
        flex: '1 1 auto',
        padding: '5px 15px',
        backgroundColor: 'transparent',
        background: 'rgba(0, 0, 0, 0.1)',
        border: 'solid 1px rgba(255, 255, 255, 0.2)',
        color: '#8f8f8f',
        fontSize: '1em',
        lineHeight: '1em',
        boxShadow: 'inset 0px 0px 2px 0px rgba(200,200,200,.1)',
        '::-webkit-input-placeholder': {
            fontSize: '1em',
            lineHeight: '1em'
        },
        '::placeholder': {
            fontSize: '1em',
            lineHeight: '1em'
        }
    },
    label: {
        flex: '1 1 auto'
    }
};
exports.Input = function (props) {
    var ss = aphrodite_1.StyleSheet.create(exports.defaultInputStyle);
    var styles = props.styles,
        inputProps = __rest(props, ["styles"]);
    var custom = aphrodite_1.StyleSheet.create(styles || {});
    return React.createElement("div", { className: aphrodite_1.css(ss.inputWrapper, custom.inputWrapper) }, props.label ? React.createElement("label", { className: aphrodite_1.css(ss.label, custom.label) }, props.label) : null, React.createElement("input", __assign({ ref: function ref(r) {
            return props.inputRef ? props.inputRef(r) : null;
        }, onClick: function onClick() {
            return client_1.default.RequestInputOwnership();
        }, onBlur: function onBlur() {
            return client_1.default.ReleaseInputOwnership();
        }, className: aphrodite_1.css(ss.input, custom.input) }, inputProps)));
};
exports.default = exports.Input;