Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 31x 31x 31x 31x 31x 6x 12x 2x 10x 31x 6x 6x 6x 6x 6x 6x 6x 6x 6x | /*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you 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.
*/
import classNames = require('classnames');
import Hjson from 'hjson';
import React, { useState } from 'react';
import AceEditor from 'react-ace';
import './json-input.scss';
function parseHjson(str: string) {
return str === '' ? null : Hjson.parse(str);
}
function stringifyJson(item: any): string {
if (item != null) {
return JSON.stringify(item, null, 2);
} else {
return '';
}
}
interface JsonInputProps {
value: any;
onChange: (value: any) => void;
placeholder?: string;
focus?: boolean;
width?: string;
height?: string;
}
export const JsonInput = React.memo(function JsonInput(props: JsonInputProps) {
const { onChange, placeholder, focus, width, height, value } = props;
const stringifiedValue = stringifyJson(value);
const [stringValue, setStringValue] = useState(stringifiedValue);
const [blurred, setBlurred] = useState(false);
let parsedValue: any;
try {
parsedValue = parseHjson(stringValue);
} catch {}
Iif (typeof parsedValue !== 'object') parsedValue = undefined;
Iif (parsedValue !== undefined && stringifyJson(parsedValue) !== stringifiedValue) {
setStringValue(stringifiedValue);
}
return (
<AceEditor
className={classNames('json-input', { invalid: parsedValue === undefined && blurred })}
mode="hjson"
theme="solarized_dark"
onChange={(inputJson: string) => {
try {
const value = parseHjson(inputJson);
onChange(value);
} catch {}
setStringValue(inputJson);
}}
onFocus={() => setBlurred(false)}
onBlur={() => setBlurred(true)}
focus={focus}
fontSize={12}
width={width || '100%'}
height={height || '8vh'}
showPrintMargin={false}
showGutter={false}
value={stringValue}
placeholder={placeholder}
editorProps={{
$blockScrolling: Infinity,
}}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
showLineNumbers: false,
tabSize: 2,
}}
style={{}}
/>
);
});
|