mirror of
https://github.com/ansible/awx.git
synced 2026-01-12 10:30:03 -03:30
Merge pull request #11125 from nixocio/ui_remove_component
Remove unused component VariablesInput
This commit is contained in:
commit
2c7d9320e2
@ -1,104 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { string, func, bool, number } from 'prop-types';
|
||||
import { Split, SplitItem } from '@patternfly/react-core';
|
||||
import styled from 'styled-components';
|
||||
import { yamlToJson, jsonToYaml, isJsonString } from 'util/yaml';
|
||||
import MultiButtonToggle from '../MultiButtonToggle';
|
||||
import CodeEditor from './CodeEditor';
|
||||
import { JSON_MODE, YAML_MODE } from './constants';
|
||||
|
||||
function formatJson(jsonString) {
|
||||
return JSON.stringify(JSON.parse(jsonString), null, 2);
|
||||
}
|
||||
|
||||
const SplitItemRight = styled(SplitItem)`
|
||||
margin-bottom: 5px;
|
||||
`;
|
||||
|
||||
function VariablesInput(props) {
|
||||
const { id, label, readOnly, rows, error, onError, className, name } = props;
|
||||
/* eslint-disable react/destructuring-assignment */
|
||||
const defaultValue = isJsonString(props.value)
|
||||
? formatJson(props.value)
|
||||
: props.value;
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
const [mode, setMode] = useState(isJsonString(value) ? JSON_MODE : YAML_MODE);
|
||||
const isControlled = !!props.onChange;
|
||||
/* eslint-enable react/destructuring-assignment */
|
||||
|
||||
const onChange = (newValue) => {
|
||||
if (isControlled) {
|
||||
props.onChange(newValue);
|
||||
}
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`pf-c-form__group ${className || ''}`}>
|
||||
<Split hasGutter>
|
||||
<SplitItem>
|
||||
<label htmlFor={id} className="pf-c-form__label">
|
||||
{label}
|
||||
</label>
|
||||
</SplitItem>
|
||||
<SplitItemRight>
|
||||
<MultiButtonToggle
|
||||
buttons={[
|
||||
[YAML_MODE, 'YAML'],
|
||||
[JSON_MODE, 'JSON'],
|
||||
]}
|
||||
value={mode}
|
||||
onChange={(newMode) => {
|
||||
try {
|
||||
if (mode === JSON_MODE) {
|
||||
onChange(jsonToYaml(value));
|
||||
} else {
|
||||
onChange(yamlToJson(value));
|
||||
}
|
||||
setMode(newMode);
|
||||
} catch (err) {
|
||||
onError(err.message);
|
||||
}
|
||||
}}
|
||||
name={name}
|
||||
/>
|
||||
</SplitItemRight>
|
||||
</Split>
|
||||
<CodeEditor
|
||||
mode={mode}
|
||||
readOnly={readOnly}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
rows={rows}
|
||||
hasErrors={!!error}
|
||||
/>
|
||||
{error ? (
|
||||
<div className="pf-c-form__helper-text pf-m-error" aria-live="polite">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
VariablesInput.propTypes = {
|
||||
id: string.isRequired,
|
||||
label: string.isRequired,
|
||||
value: string.isRequired,
|
||||
readOnly: bool,
|
||||
error: string,
|
||||
rows: number,
|
||||
onChange: func,
|
||||
onError: func,
|
||||
name: string.isRequired,
|
||||
};
|
||||
VariablesInput.defaultProps = {
|
||||
readOnly: false,
|
||||
onChange: null,
|
||||
rows: 6,
|
||||
error: null,
|
||||
onError: () => {},
|
||||
};
|
||||
|
||||
export default styled(VariablesInput)`
|
||||
--pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
|
||||
`;
|
||||
@ -3,5 +3,4 @@ import CodeEditor from './CodeEditor';
|
||||
export default CodeEditor;
|
||||
export { default as CodeEditorField } from './CodeEditorField';
|
||||
export { default as VariablesDetail } from './VariablesDetail';
|
||||
export { default as VariablesInput } from './VariablesInput';
|
||||
export { default as VariablesField } from './VariablesField';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user