@intuitionrobotics/thunderstorm
Version:
93 lines • 3.94 kB
JavaScript
"use strict";
/*
* Thunderstorm is a full web app framework!
*
* Typescript & Express backend infrastructure that natively runs on firebase function
* Typescript & React frontend infrastructure
*
* Copyright (C) 2020 Intuition Robotics
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.TS_Input = void 0;
const React = require("react");
const ts_common_1 = require("@intuitionrobotics/ts-common");
const MIN_DELTA = 200;
class TS_Input extends React.Component {
// static defaultProps: Partial<Props_FilterInput<string>> = {
// id: generateHex(16)
// };
constructor(props) {
super(props);
this.handleKeyEvent = (ev) => {
ev.stopPropagation();
if (this.props.onAccept && ev.key === "Enter")
this.props.onAccept();
if (this.props.onCancel && ev.key === "Escape")
this.props.onCancel();
};
this.onClick = (ev) => {
if (!this.ref || !this.props.focus)
return;
ev.stopPropagation();
const now = (0, ts_common_1.currentTimeMillies)();
if (!this.clickedTimestamp || now - this.clickedTimestamp >= MIN_DELTA)
return this.clickedTimestamp = now;
this.timeout && (0, ts_common_1._clearTimeout)(this.timeout);
delete this.clickedTimestamp;
this.ref.select();
};
this.changeValue = (event) => {
const value = event.target.value;
this.props.onChange(value, event.target.id);
this.setState({ value: value });
};
this.state = TS_Input.getInitialState(props);
}
;
static getInitialState(props) {
return {
id: props.id,
name: props.name,
initialValue: props.value,
value: props.value || ""
};
}
static getDerivedStateFromProps(props, state) {
if (props.id === state.id && state.name === props.name && state.initialValue === props.value)
return { value: state.value };
return TS_Input.getInitialState(props);
}
componentWillUnmount() {
var _a;
(_a = this.ref) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.props.handleKeyEvent || this.handleKeyEvent);
}
render() {
const handleKeyEvent = this.props.handleKeyEvent || this.handleKeyEvent;
return React.createElement("input", { className: this.props.className, name: this.props.name || this.props.id, style: this.props.style, key: this.props.id, id: this.props.id, type: this.props.type, onClick: this.onClick, value: this.state.value, placeholder: this.props.placeholder, onChange: this.changeValue, onBlur: () => {
var _a;
(_a = this.ref) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', handleKeyEvent);
this.ref = null;
this.props.onBlur && this.props.onBlur();
}, ref: input => {
if (this.ref || !input)
return;
this.ref = input;
this.props.focus && this.ref.focus();
this.ref.addEventListener('keydown', handleKeyEvent);
}, spellCheck: this.props.spellCheck });
}
}
exports.TS_Input = TS_Input;
//# sourceMappingURL=TS_Input.js.map