mirror of
https://github.com/Microsoft/vscode
synced 2024-10-13 14:57:14 +00:00
Merge pull request #431 from kheiakiyama/rm_inputbox2
Delete files not using
This commit is contained in:
commit
144eda776f
|
@ -1,194 +0,0 @@
|
|||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-inputbox2 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", sans-serif, "Droid Sans Fallback";
|
||||
line-height: auto !important;
|
||||
|
||||
/* Customizable */
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.monaco-inputbox2 > .wrapper > .placeholder-shim,
|
||||
.monaco-inputbox2 > .wrapper > .input {
|
||||
|
||||
/* Customizable */
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.monaco-inputbox2 > .wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.monaco-inputbox2 > .wrapper > .input {
|
||||
display: inline-block;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: inherit;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.monaco-inputbox2 > .wrapper > .input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.monaco-inputbox2 > .wrapper > .message {
|
||||
position: absolute;
|
||||
border: 1px solid red;
|
||||
background: white;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.monaco-inputbox2 > .wrapper > .placeholder-shim {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
opacity: 0.5;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
/* Context view */
|
||||
|
||||
.monaco-inputbox-container2 {
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.monaco-inputbox-container2 .monaco-inputbox-message {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0.4em;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
min-height: 34px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
/* Theming */
|
||||
|
||||
.monaco-inputbox2.idle {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.monaco-inputbox2.info {
|
||||
border: 1px solid #009CCC;
|
||||
}
|
||||
|
||||
.monaco-inputbox-container2 .monaco-inputbox-message.info {
|
||||
background: #D6ECF2;
|
||||
border: 1px solid #009CCC;
|
||||
}
|
||||
|
||||
.monaco-inputbox2.warning {
|
||||
border: 1px solid #F2CB1D;
|
||||
}
|
||||
|
||||
.monaco-inputbox-container2 .monaco-inputbox-message.warning {
|
||||
background: #F6F5D2;
|
||||
border: 1px solid #F2CB1D;
|
||||
}
|
||||
|
||||
.monaco-inputbox2.error {
|
||||
border: 1px solid #E51400;
|
||||
}
|
||||
|
||||
.monaco-inputbox-container2 .monaco-inputbox-message.error {
|
||||
background: #f2dede;
|
||||
border: 1px solid #E51400;
|
||||
}
|
||||
|
||||
/* VS Dark */
|
||||
|
||||
.vs-dark .monaco-inputbox2.info {
|
||||
border-color: #55AAFF;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-inputbox-container2 .monaco-inputbox-message.info {
|
||||
background-color: #063B49;
|
||||
border-color: #55AAFF;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-inputbox2.warning {
|
||||
border-color: #B89500;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-inputbox-container2 .monaco-inputbox-message.warning {
|
||||
background-color: #352A05;
|
||||
border-color: #B89500;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-inputbox2.error {
|
||||
border-color: #BE1100;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-inputbox-container2 .monaco-inputbox-message.error {
|
||||
background-color: #5A1D1D;
|
||||
border-color: #BE1100;
|
||||
}
|
||||
|
||||
/* High Contrast Theming */
|
||||
.hc-black .monaco-inputbox2.idle {
|
||||
border: 1px solid #6FC3DF;
|
||||
}
|
||||
|
||||
.hc-black .monaco-inputbox-container2 .monaco-inputbox-message.info {
|
||||
background-color: #000;
|
||||
border-color: #6FC3DF;
|
||||
}
|
||||
|
||||
.hc-black .monaco-inputbox2.warning {
|
||||
border-color: #B89500;
|
||||
}
|
||||
|
||||
.hc-black .monaco-inputbox-container2 .monaco-inputbox-message.warning {
|
||||
background-color: #000;
|
||||
border-color: #B89500;
|
||||
}
|
||||
|
||||
.hc-black .monaco-inputbox2.error {
|
||||
border-color: #BE1100;
|
||||
}
|
||||
|
||||
.hc-black .monaco-inputbox-container2 .monaco-inputbox-message.error {
|
||||
background-color: #000;
|
||||
border-color: #BE1100;
|
||||
}
|
|
@ -1,209 +0,0 @@
|
|||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
'use strict';
|
||||
|
||||
import 'vs/css!./inputBox2';
|
||||
import Browser = require('vs/base/browser/browser');
|
||||
import React = require('lib/react');
|
||||
|
||||
var DOM = React.DOM,
|
||||
div = DOM.div,
|
||||
input = DOM.input,
|
||||
label = DOM.label,
|
||||
span = DOM.span;
|
||||
|
||||
export interface InputBoxProps {
|
||||
type?: string;
|
||||
placeholder?: string;
|
||||
ariaLabel?: string;
|
||||
disabled?: boolean;
|
||||
message?: IMessage;
|
||||
|
||||
value: string;
|
||||
|
||||
onChange?: (newValue: string) => void;
|
||||
onKeyDown: (e: React.KeyboardEvent) => void;
|
||||
}
|
||||
|
||||
export interface IMessage {
|
||||
content?: string;
|
||||
type?: MessageType;
|
||||
}
|
||||
export function messageEquals(a:IMessage, b:IMessage): boolean {
|
||||
if (!a || !b) {
|
||||
return !a && !b;
|
||||
}
|
||||
return (
|
||||
a.content === b.content
|
||||
&& a.type === b.type
|
||||
);
|
||||
}
|
||||
|
||||
export enum MessageType {
|
||||
INFO = 1,
|
||||
WARNING = 2,
|
||||
ERROR = 3
|
||||
}
|
||||
|
||||
export interface IRange {
|
||||
start: number;
|
||||
end: number;
|
||||
}
|
||||
|
||||
export interface InputBoxState {}
|
||||
export class InputBoxSpec extends React.BaseComponent<InputBoxProps, InputBoxState> {
|
||||
|
||||
private refs: {
|
||||
input: React.DomReferencer2<HTMLInputElement>;
|
||||
};
|
||||
|
||||
public getInitialState(): InputBoxState {
|
||||
return {};
|
||||
}
|
||||
|
||||
public shouldComponentUpdate(nextProps:InputBoxProps, nextState:InputBoxState): boolean {
|
||||
return (
|
||||
this.props.type !== nextProps.type
|
||||
|| this.props.placeholder !== nextProps.placeholder
|
||||
|| this.props.ariaLabel !== nextProps.ariaLabel
|
||||
|| this.props.disabled !== nextProps.disabled
|
||||
|| !messageEquals(this.props.message, nextProps.message)
|
||||
|| this.props.value !== nextProps.value
|
||||
);
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<any, any> {
|
||||
var inputAttr = <React.DomAttributes>{
|
||||
ref: 'input',
|
||||
className: 'input',
|
||||
type: (this.props.type || 'text'),
|
||||
wrap: 'off',
|
||||
autoCorrect: 'off',
|
||||
autoCapitalize: 'off',
|
||||
spellCheck: 'false',
|
||||
value: this.props.value,
|
||||
onKeyDown: this._onKeyDown
|
||||
};
|
||||
if (this.props.ariaLabel) {
|
||||
inputAttr['aria-label'] = this.props.ariaLabel;
|
||||
}
|
||||
if (this.props.disabled) {
|
||||
inputAttr.disabled = this.props.disabled;
|
||||
}
|
||||
if (this.props.onChange) {
|
||||
inputAttr.onChange = this._onValueChange;
|
||||
}
|
||||
if (Browser.isIE9) {
|
||||
inputAttr.onKeyUp = this._onValueChange;
|
||||
}
|
||||
|
||||
var extraWrapperChild: React.ReactDOMElement<React.DomAttributes> = null;
|
||||
if (this.props.placeholder) {
|
||||
if (!supportsInputPlaceholder()) {
|
||||
extraWrapperChild = label(<React.DomAttributes>{
|
||||
className: 'placeholder-shim' + (this.props.value ? ' hidden': ''),
|
||||
for: 'input',
|
||||
onClick: this._onPlaceholderShimClick,
|
||||
'aria-hidden': (this.props.value ? 'true' : 'false')
|
||||
}, this.props.placeholder);
|
||||
} else {
|
||||
inputAttr['placeholder'] = this.props.placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
var wrapperChildren:React.ReactElement<any, any>[] = [];
|
||||
if (extraWrapperChild) {
|
||||
wrapperChildren.push(extraWrapperChild);
|
||||
}
|
||||
wrapperChildren.push(input(inputAttr));
|
||||
if (this.props.message) {
|
||||
var messageChildren:React.ReactElement<any, any>[] = [];
|
||||
if (this.props.message.content) {
|
||||
messageChildren.push(span({
|
||||
className: 'monaco-inputbox-message ' + this._classForType(this.props.message.type)
|
||||
},
|
||||
this.props.message.content
|
||||
));
|
||||
}
|
||||
|
||||
wrapperChildren.push(
|
||||
div({
|
||||
className: 'monaco-inputbox-container2',
|
||||
children: messageChildren
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
var topLevelClassName = 'monaco-inputbox2';
|
||||
if (this.props.message) {
|
||||
topLevelClassName += ' ' + this._classForType(this.props.message.type);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
div({ className: topLevelClassName },
|
||||
div({
|
||||
className: 'wrapper',
|
||||
children: wrapperChildren
|
||||
})
|
||||
)
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
private _getInputElement(): HTMLInputElement {
|
||||
return this.refs.input.getDOMNode();
|
||||
}
|
||||
|
||||
public focus(): void {
|
||||
this._getInputElement().focus();
|
||||
}
|
||||
|
||||
public select(range: IRange = null): void {
|
||||
var inputElement = this._getInputElement();
|
||||
inputElement.select();
|
||||
if (range) {
|
||||
inputElement.setSelectionRange(range.start, range.end);
|
||||
}
|
||||
}
|
||||
|
||||
private _onKeyDown(e: React.KeyboardEvent): void {
|
||||
this.props.onKeyDown(e);
|
||||
}
|
||||
|
||||
private _classForType(type: MessageType): string {
|
||||
switch (type) {
|
||||
case MessageType.INFO: return 'info';
|
||||
case MessageType.WARNING: return 'warning';
|
||||
default: return 'error';
|
||||
}
|
||||
}
|
||||
|
||||
private _onValueChange(): void {
|
||||
this.props.onChange(this._getInputElement().value);
|
||||
}
|
||||
|
||||
private _onPlaceholderShimClick(e:React.MouseEvent): void {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this._getInputElement().focus();
|
||||
}
|
||||
}
|
||||
export var InputBox = React.createFactoryForTS<InputBoxProps>(InputBoxSpec.prototype);
|
||||
|
||||
var supportsInputPlaceholder = (function() {
|
||||
var result: boolean;
|
||||
|
||||
return function supportsInputPlaceholder() {
|
||||
if (typeof result === 'undefined') {
|
||||
// http://stackoverflow.com/questions/8245093/html5-placeholder-feature-detection-woes
|
||||
var input = document.createElement('input');
|
||||
result = (typeof input.placeholder !== 'undefined');
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
})();
|
Loading…
Reference in a new issue