@qoretechnologies/reqraft 0.7.0 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/form/fields/file/File.d.ts +2 -1
- package/dist/components/form/fields/file/File.d.ts.map +1 -1
- package/dist/components/form/fields/file/File.js +2 -3
- package/dist/components/form/fields/file/File.js.map +1 -1
- package/dist/components/form/fields/object/Object.d.ts +2 -1
- package/dist/components/form/fields/object/Object.d.ts.map +1 -1
- package/dist/components/form/fields/object/Object.js +7 -6
- package/dist/components/form/fields/object/Object.js.map +1 -1
- package/package.json +2 -2
- package/src/components/form/fields/file/File.stories.tsx +8 -0
- package/src/components/form/fields/file/File.tsx +91 -89
- package/src/components/form/fields/object/Object.stories.tsx +17 -0
- package/src/components/form/fields/object/Object.tsx +126 -116
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { IReqoreButtonProps } from '@qoretechnologies/reqore/dist/components/Button';
|
|
2
3
|
import { IReqorePanelProps } from '@qoretechnologies/reqore/dist/components/Panel';
|
|
3
4
|
import { DropzoneOptions } from 'react-dropzone';
|
|
@@ -13,5 +14,5 @@ export interface IReqraftFileFormFieldProps extends Omit<IReqorePanelProps, 'onC
|
|
|
13
14
|
options?: DropzoneOptions;
|
|
14
15
|
valueButtonProps?: IReqoreButtonProps;
|
|
15
16
|
}
|
|
16
|
-
export declare const ReqraftFileFormField: ({ value, onChange, options, valueButtonProps, ...rest }: IReqraftFileFormFieldProps) => import("react/jsx-runtime").JSX.Element
|
|
17
|
+
export declare const ReqraftFileFormField: import("react").MemoExoticComponent<({ value, onChange, options, valueButtonProps, ...rest }: IReqraftFileFormFieldProps) => import("react/jsx-runtime").JSX.Element>;
|
|
17
18
|
//# sourceMappingURL=File.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"File.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/fields/file/File.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAInF,OAAO,EAAU,eAAe,EAAe,MAAM,gBAAgB,CAAC;AAEtE,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC;IACrF,KAAK,EAAE,0BAA0B,CAAC;IAClC,QAAQ,CAAC,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;CACvC;AAED,eAAO,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"File.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/fields/file/File.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAInF,OAAO,EAAU,eAAe,EAAe,MAAM,gBAAgB,CAAC;AAEtE,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC;IACrF,KAAK,EAAE,0BAA0B,CAAC;IAClC,QAAQ,CAAC,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;CACvC;AAED,eAAO,MAAM,oBAAoB,gGAO5B,0BAA0B,6CAoG9B,CAAC"}
|
|
@@ -38,7 +38,7 @@ var filesize_1 = require("filesize");
|
|
|
38
38
|
var lodash_1 = require("lodash");
|
|
39
39
|
var react_1 = require("react");
|
|
40
40
|
var react_dropzone_1 = require("react-dropzone");
|
|
41
|
-
|
|
41
|
+
exports.ReqraftFileFormField = (0, react_1.memo)(function (_a) {
|
|
42
42
|
var value = _a.value, onChange = _a.onChange, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.valueButtonProps, valueButtonProps = _c === void 0 ? {} : _c, rest = __rest(_a, ["value", "onChange", "options", "valueButtonProps"]);
|
|
43
43
|
var contentStyle = (0, react_1.useMemo)(function () { return ({
|
|
44
44
|
display: 'flex',
|
|
@@ -82,6 +82,5 @@ var ReqraftFileFormField = function (_a) {
|
|
|
82
82
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, getInputProps())), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, __assign({ label: value.name, minimal: true, intent: 'info', icon: 'FileLine', rightIcon: 'FileUploadLine', badge: (0, filesize_1.filesize)(value.size || 0), description: "Click here to upload a different ".concat(renderExtensions(true), " file") }, valueButtonProps, getRootProps()))] }));
|
|
83
83
|
}
|
|
84
84
|
return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqorePanel, __assign({ contentStyle: contentStyle }, rest, getRootProps(), { size: 'huge', children: [(0, jsx_runtime_1.jsx)("input", __assign({}, getInputProps())), (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, horizontalAlign: 'center', children: [(0, jsx_runtime_1.jsxs)(reqore_1.ReqoreH4, { size: 'small', children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'FileAddLine', size: 'small' }), " Click or drop files here to upload"] }), renderExtensions()] })] })));
|
|
85
|
-
};
|
|
86
|
-
exports.ReqraftFileFormField = ReqraftFileFormField;
|
|
85
|
+
});
|
|
87
86
|
//# sourceMappingURL=File.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"File.js","sourceRoot":"","sources":["../../../../../src/components/form/fields/file/File.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAOkC;AAGlC,qCAAoC;AACpC,iCAAsC;AACtC,+
|
|
1
|
+
{"version":3,"file":"File.js","sourceRoot":"","sources":["../../../../../src/components/form/fields/file/File.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { IReqoreTabsProps } from '@qoretechnologies/reqore/dist/components/Tabs';
|
|
2
3
|
import { IReqoreTreeProps } from '@qoretechnologies/reqore/dist/components/Tree';
|
|
3
4
|
import { ILongStringFormFieldProps } from '../long-string/LongString';
|
|
@@ -14,5 +15,5 @@ export interface IReqraftObjectFormFieldProps extends Omit<IReqoreTabsProps, 'on
|
|
|
14
15
|
export declare const ReqraftObjectFormFieldTextarea: ({ value, onChange, dataType, resultDataType, ...rest }: Partial<ILongStringFormFieldProps> & Pick<IReqraftObjectFormFieldProps, 'dataType'> & {
|
|
15
16
|
resultDataType: 'json' | 'yaml';
|
|
16
17
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
export declare const ReqraftObjectFormField: ({ onChange, value, type, dataType, resultDataType, editorProps, textareaProps, ...rest }: IReqraftObjectFormFieldProps) => import("react/jsx-runtime").JSX.Element
|
|
18
|
+
export declare const ReqraftObjectFormField: import("react").MemoExoticComponent<({ onChange, value, type, dataType, resultDataType, editorProps, textareaProps, ...rest }: IReqraftObjectFormFieldProps) => import("react/jsx-runtime").JSX.Element>;
|
|
18
19
|
//# sourceMappingURL=Object.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Object.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/fields/object/Object.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAc,MAAM,+CAA+C,CAAC;AAG7F,OAA4B,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAE3F,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IACtF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7D,KAAK,EAAE,MAAM,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAEzC,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAEtC,WAAW,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC;IAC9D,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAE1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,8BAA8B,2DAMxC,QAAQ,yBAAyB,CAAC,GACnC,KAAK,4BAA4B,EAAE,UAAU,CAAC,GAAG;IAAE,cAAc,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"Object.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/fields/object/Object.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAc,MAAM,+CAA+C,CAAC;AAG7F,OAA4B,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAE3F,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IACtF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7D,KAAK,EAAE,MAAM,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAEzC,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAEtC,WAAW,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC;IAC9D,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAE1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,8BAA8B,2DAMxC,QAAQ,yBAAyB,CAAC,GACnC,KAAK,4BAA4B,EAAE,UAAU,CAAC,GAAG;IAAE,cAAc,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,4CAsFrF,CAAC;AAEF,eAAO,MAAM,sBAAsB,iIAU9B,4BAA4B,6CAyHhC,CAAC"}
|
|
@@ -60,7 +60,7 @@ var ReqraftObjectFormFieldTextarea = function (_a) {
|
|
|
60
60
|
}
|
|
61
61
|
return true;
|
|
62
62
|
}, [dataType, resultDataType, localValue]);
|
|
63
|
-
return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, children: [(0, jsx_runtime_1.jsx)(LongString_1.default, __assign({ value: localValue, onChange: handleChange, scaleWithContent: true }, rest, { intent: isValid ? rest.intent : 'danger' })), (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { stack: true, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { label: 'Save', icon: 'CheckLine', compact: true, fluid: true, intent: 'success', disabled: !isValid || rest.disabled || localValue === value, onClick: function () {
|
|
63
|
+
return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, children: [(0, jsx_runtime_1.jsx)(LongString_1.default, __assign({ value: localValue, onChange: handleChange, scaleWithContent: true }, rest, { intent: isValid ? rest.intent : 'danger' })), (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { stack: true, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { size: rest.size, label: 'Save', icon: 'CheckLine', compact: true, fluid: true, intent: 'success', disabled: !isValid || rest.disabled || localValue === value, onClick: function () {
|
|
64
64
|
if (localValue === '' || localValue === undefined) {
|
|
65
65
|
onChange(undefined);
|
|
66
66
|
return;
|
|
@@ -73,10 +73,10 @@ var ReqraftObjectFormFieldTextarea = function (_a) {
|
|
|
73
73
|
parsedValue = js_yaml_1.default.dump(parsedValue);
|
|
74
74
|
}
|
|
75
75
|
onChange(parsedValue);
|
|
76
|
-
} }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { label: 'Discard', icon: 'HistoryLine', compact: true, fixed: true, disabled: localValue === value || rest.disabled, onClick: function () { return setValue(value); } })] }), !isValid && ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreSpan, { intent: 'danger', size: 'small', children: ["Not a valid ", resultDataType.toUpperCase()] }))] }));
|
|
76
|
+
} }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { size: rest.size, label: 'Discard', icon: 'HistoryLine', compact: true, fixed: true, disabled: localValue === value || rest.disabled, onClick: function () { return setValue(value); } })] }), !isValid && ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreSpan, { intent: 'danger', size: 'small', children: ["Not a valid ", resultDataType.toUpperCase()] }))] }));
|
|
77
77
|
};
|
|
78
78
|
exports.ReqraftObjectFormFieldTextarea = ReqraftObjectFormFieldTextarea;
|
|
79
|
-
|
|
79
|
+
exports.ReqraftObjectFormField = (0, react_1.memo)(function (_a) {
|
|
80
80
|
var onChange = _a.onChange, value = _a.value, type = _a.type, dataType = _a.dataType, _b = _a.resultDataType, resultDataType = _b === void 0 ? dataType : _b, editorProps = _a.editorProps, textareaProps = _a.textareaProps, rest = __rest(_a, ["onChange", "value", "type", "dataType", "resultDataType", "editorProps", "textareaProps"]);
|
|
81
81
|
var handleTreeDataChange = (0, react_1.useCallback)(function (data) {
|
|
82
82
|
switch (resultDataType) {
|
|
@@ -126,14 +126,15 @@ var ReqraftObjectFormField = function (_a) {
|
|
|
126
126
|
label: 'Editor',
|
|
127
127
|
icon: 'NodeTree',
|
|
128
128
|
id: 'editor',
|
|
129
|
+
size: rest.size,
|
|
129
130
|
},
|
|
130
131
|
{
|
|
131
132
|
label: 'Text',
|
|
132
133
|
icon: 'Text',
|
|
133
134
|
id: 'text',
|
|
134
135
|
show: resultDataType !== 'native',
|
|
136
|
+
size: rest.size,
|
|
135
137
|
},
|
|
136
|
-
], children: [(0, jsx_runtime_1.jsxs)(reqore_1.ReqoreTabsContent, { tabId: 'editor', children: [!treeData && ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreButton, { onClick: function () { return handleTreeDataChange(type === 'array' ? [] : {}); }, fixed: true, icon: 'AddLine', disabled: rest.disabled, children: ["New ", type === 'array' ? 'List' : 'Object'] })), treeData && ((0, jsx_runtime_1.jsx)(Tree_1.ReqoreTree, __assign({ disabled: rest.disabled, data: treeData, onDataChange: handleTreeDataChange, editable: true, showControls: false }, editorProps))), treeData && ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { onClick: function () { return handleTreeDataChange(undefined); }, fixed: true, icon: 'CloseLine', disabled: rest.disabled, children: "Remove" }))] }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTabsContent, { tabId: 'text', children: (0, jsx_runtime_1.jsx)(exports.ReqraftObjectFormFieldTextarea, __assign({ disabled: rest.disabled }, textareaProps, { value: textData, onChange: onChange, dataType: dataType, resultDataType: resultDataType })) })] })));
|
|
137
|
-
};
|
|
138
|
-
exports.ReqraftObjectFormField = ReqraftObjectFormField;
|
|
138
|
+
], children: [(0, jsx_runtime_1.jsxs)(reqore_1.ReqoreTabsContent, { tabId: 'editor', children: [!treeData && ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreButton, { onClick: function () { return handleTreeDataChange(type === 'array' ? [] : {}); }, fixed: true, icon: 'AddLine', disabled: rest.disabled, size: rest.size, children: ["New ", type === 'array' ? 'List' : 'Object'] })), treeData && ((0, jsx_runtime_1.jsx)(Tree_1.ReqoreTree, __assign({ disabled: rest.disabled, data: treeData, onDataChange: handleTreeDataChange, editable: true, showControls: false, size: rest.size }, editorProps))), treeData && ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { onClick: function () { return handleTreeDataChange(undefined); }, fixed: true, icon: 'CloseLine', disabled: rest.disabled, size: rest.size, children: "Remove" }))] }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTabsContent, { tabId: 'text', children: (0, jsx_runtime_1.jsx)(exports.ReqraftObjectFormFieldTextarea, __assign({ disabled: rest.disabled, size: rest.size }, textareaProps, { value: textData, onChange: onChange, dataType: dataType, resultDataType: resultDataType })) })] })));
|
|
139
|
+
});
|
|
139
140
|
//# sourceMappingURL=Object.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Object.js","sourceRoot":"","sources":["../../../../../src/components/form/fields/object/Object.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAMkC;AAElC,sEAA6F;AAC7F,oDAA6B;AAC7B,+
|
|
1
|
+
{"version":3,"file":"Object.js","sourceRoot":"","sources":["../../../../../src/components/form/fields/object/Object.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAMkC;AAElC,sEAA6F;AAC7F,oDAA6B;AAC7B,+BAA6D;AAC7D,yEAA2F;AAgBpF,IAAM,8BAA8B,GAAG,UAAC,EAOuC;IANpF,IAAA,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,cAAc,oBAAA,EACX,IAAI,cALsC,mDAM9C,CADQ;IAGD,IAAA,KAAyB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAvC,UAAU,QAAA,EAAE,QAAQ,QAAmB,CAAC;IAE/C,IAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,UAAC,QAAgB;QAChD,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,UAAU,GAAG,IAAA,mBAAW,EAC5B,UAAC,IAAgC;QAC/B,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,MAAM;gBACT,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAChC,KAAK,MAAM;gBACT,OAAO,iBAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACjC;gBACE,OAAO,UAAU,CAAC,cAAc,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,UAAU,EAAE,cAAc,CAAC,CACvC,CAAC;IAEF,IAAM,OAAO,GAAG,IAAA,eAAO,EAAC;QACtB,IAAI,UAAU,KAAK,EAAE,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;YAClD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAI,CAAC;YACH,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,UAAU,CAAC,CAAC,CAAC;IAE3C,OAAO,CACL,wBAAC,2BAAkB,IAAC,QAAQ,mBAC1B,uBAAC,oBAAmB,aAClB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,YAAY,EACtB,gBAAgB,UACZ,IAAI,IACR,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,IACxC,EACF,wBAAC,2BAAkB,IAAC,KAAK,mBACvB,uBAAC,qBAAY,IACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,WAAW,EAChB,OAAO,QACP,KAAK,QACL,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAE,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,IAAI,UAAU,KAAK,KAAK,EAC3D,OAAO,EAAE;4BACP,IAAI,UAAU,KAAK,EAAE,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;gCAClD,QAAQ,CAAC,SAAS,CAAC,CAAC;gCACpB,OAAO;4BACT,CAAC;4BAED,IAAI,WAAW,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;4BAEvC,IAAI,cAAc,KAAK,MAAM,EAAE,CAAC;gCAC9B,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;4BACrD,CAAC;iCAAM,IAAI,cAAc,KAAK,MAAM,EAAE,CAAC;gCACrC,WAAW,GAAG,iBAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;4BACzC,CAAC;4BACD,QAAQ,CAAC,WAAW,CAAC,CAAC;wBACxB,CAAC,GACD,EACF,uBAAC,qBAAY,IACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,aAAa,EAClB,OAAO,QACP,KAAK,QACL,QAAQ,EAAE,UAAU,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,EAC/C,OAAO,EAAE,cAAM,OAAA,QAAQ,CAAC,KAAK,CAAC,EAAf,CAAe,GAC9B,IACiB,EACpB,CAAC,OAAO,IAAI,CACX,wBAAC,mBAAU,IAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,6BACzB,cAAc,CAAC,WAAW,EAAE,IAC9B,CACd,IACkB,CACtB,CAAC;AACJ,CAAC,CAAC;AA7FW,QAAA,8BAA8B,kCA6FzC;AAEW,QAAA,sBAAsB,GAAG,IAAA,YAAI,EACxC,UAAC,EAS8B;IAR7B,IAAA,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,sBAAyB,EAAzB,cAAc,mBAAG,QAAQ,KAAA,EACzB,WAAW,iBAAA,EACX,aAAa,mBAAA,EACV,IAAI,cARR,2FASA,CADQ;IAEP,IAAM,oBAAoB,GAAG,IAAA,mBAAW,EACtC,UAAC,IAA8B;QAC7B,QAAQ,cAAc,EAAE,CAAC;YACvB,KAAK,MAAM;gBACT,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;gBACxC,MAAM;YACR,KAAK,MAAM;gBACT,QAAQ,CAAC,iBAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC5B,MAAM;YACR;gBACE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,CAAC;IAEF,IAAM,QAAQ,GAAG,IAAA,eAAO,EAAC;QACvB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,QAAQ,QAAQ,EAAE,CAAC;YACjB,KAAK,MAAM;gBACT,OAAO,IAAI,CAAC,KAAK,CAAC,KAAe,CAAC,CAAC;YACrC,KAAK,MAAM;gBACT,OAAO,iBAAM,CAAC,IAAI,CAAC,KAAe,CAAC,CAAC;YACtC;gBACE,OAAO,KAAK,CAAC;QACjB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAM,QAAQ,GAAW,IAAA,eAAO,EAAC;QAC/B,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,QAAQ,QAAQ,EAAE,CAAC;YACjB,KAAK,MAAM;gBACT,OAAO,KAAe,CAAC;YACzB,KAAK,MAAM;gBACT,OAAO,KAAe,CAAC;YACzB;gBACE,QAAQ,cAAc,EAAE,CAAC;oBACvB,KAAK,MAAM;wBACT,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;oBACxC;wBACE,OAAO,iBAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC9B,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,wBAAC,mBAAU,aACT,WAAW,EAAC,UAAU,IAClB,IAAI,IACR,IAAI,EAAE;YACJ;gBACE,KAAK,EAAE,QAAQ;gBACf,IAAI,EAAE,UAAU;gBAChB,EAAE,EAAE,QAAQ;gBACZ,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,IAAI,EAAE,MAAM;gBACZ,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,cAAc,KAAK,QAAQ;gBACjC,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,aAED,wBAAC,0BAAiB,IAAC,KAAK,EAAC,QAAQ,aAC9B,CAAC,QAAQ,IAAI,CACZ,wBAAC,qBAAY,IACX,OAAO,EAAE,cAAM,OAAA,oBAAoB,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAhD,CAAgD,EAC/D,KAAK,QACL,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,qBAEV,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,IAC5B,CAChB,EACA,QAAQ,IAAI,CACX,uBAAC,iBAAU,aACT,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,QAAQ,EACd,YAAY,EAAE,oBAAoB,EAClC,QAAQ,QACR,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,IACX,WAAW,EACf,CACH,EACA,QAAQ,IAAI,CACX,uBAAC,qBAAY,IACX,OAAO,EAAE,cAAM,OAAA,oBAAoB,CAAC,SAAS,CAAC,EAA/B,CAA+B,EAC9C,KAAK,QACL,IAAI,EAAC,WAAW,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,uBAGF,CAChB,IACiB,EACpB,uBAAC,0BAAiB,IAAC,KAAK,EAAC,MAAM,YAC7B,uBAAC,sCAA8B,aAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,IACX,aAAa,IACjB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAiC,IACjD,GACgB,KACT,CACd,CAAC;AACJ,CAAC,CACF,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qoretechnologies/reqraft",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@babel/preset-typescript": "^7.12.7",
|
|
54
54
|
"@chromatic-com/storybook": "^2.0.2",
|
|
55
55
|
"@netsells/storybook-mockdate": "^0.3.3",
|
|
56
|
-
"@qoretechnologies/reqore": "^0.
|
|
56
|
+
"@qoretechnologies/reqore": "^0.52.3",
|
|
57
57
|
"@storybook/addon-actions": "^8.3.5",
|
|
58
58
|
"@storybook/addon-essentials": "^8.3.5",
|
|
59
59
|
"@storybook/addon-interactions": "^8.3.5",
|
|
@@ -30,6 +30,7 @@ export default meta;
|
|
|
30
30
|
type Story = StoryObj<typeof meta>;
|
|
31
31
|
|
|
32
32
|
export const Default: Story = {};
|
|
33
|
+
|
|
33
34
|
export const WithSpecifiedExtensions: Story = {
|
|
34
35
|
args: {
|
|
35
36
|
options: {
|
|
@@ -58,3 +59,10 @@ export const WithValue: Story = {
|
|
|
58
59
|
},
|
|
59
60
|
},
|
|
60
61
|
};
|
|
62
|
+
|
|
63
|
+
export const Small: Story = {
|
|
64
|
+
args: {
|
|
65
|
+
...WithValue.args,
|
|
66
|
+
valueButtonProps: { size: 'small' },
|
|
67
|
+
},
|
|
68
|
+
};
|
|
@@ -10,7 +10,7 @@ import { IReqoreButtonProps } from '@qoretechnologies/reqore/dist/components/But
|
|
|
10
10
|
import { IReqorePanelProps } from '@qoretechnologies/reqore/dist/components/Panel';
|
|
11
11
|
import { filesize } from 'filesize';
|
|
12
12
|
import { reduce, size } from 'lodash';
|
|
13
|
-
import { useCallback, useEffect, useMemo } from 'react';
|
|
13
|
+
import { memo, useCallback, useEffect, useMemo } from 'react';
|
|
14
14
|
import { Accept, DropzoneOptions, useDropzone } from 'react-dropzone';
|
|
15
15
|
|
|
16
16
|
export interface IReqraftFileFormFieldValue {
|
|
@@ -26,109 +26,111 @@ export interface IReqraftFileFormFieldProps extends Omit<IReqorePanelProps, 'onC
|
|
|
26
26
|
valueButtonProps?: IReqoreButtonProps;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
export const ReqraftFileFormField = (
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
29
|
+
export const ReqraftFileFormField = memo(
|
|
30
|
+
({
|
|
31
|
+
value,
|
|
32
|
+
onChange,
|
|
33
|
+
options = {},
|
|
34
|
+
valueButtonProps = {},
|
|
35
|
+
...rest
|
|
36
|
+
}: IReqraftFileFormFieldProps) => {
|
|
37
|
+
const contentStyle: React.CSSProperties = useMemo(
|
|
38
|
+
(): React.CSSProperties => ({
|
|
39
|
+
display: 'flex',
|
|
40
|
+
flexDirection: 'column',
|
|
41
|
+
justifyContent: 'center',
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
}),
|
|
44
|
+
[]
|
|
45
|
+
);
|
|
45
46
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
|
|
48
|
+
disabled: rest.disabled || rest.readonly,
|
|
49
|
+
maxFiles: 1,
|
|
49
50
|
|
|
50
|
-
|
|
51
|
-
|
|
51
|
+
...options,
|
|
52
|
+
});
|
|
52
53
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
const extensions = useMemo(() => {
|
|
55
|
+
if (!options.accept) {
|
|
56
|
+
return [];
|
|
57
|
+
}
|
|
57
58
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
59
|
+
return reduce<Accept, string[]>(
|
|
60
|
+
options.accept,
|
|
61
|
+
(acc, ext) => {
|
|
62
|
+
return [...acc, ...ext];
|
|
63
|
+
},
|
|
64
|
+
[]
|
|
65
|
+
);
|
|
66
|
+
}, [options.accept]);
|
|
67
|
+
|
|
68
|
+
const renderExtensions = useCallback(
|
|
69
|
+
(asString?: boolean) => {
|
|
70
|
+
if (size(extensions) === 0) {
|
|
71
|
+
return '';
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
if (asString) {
|
|
75
|
+
return extensions.join(', ');
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
return (
|
|
79
|
+
<ReqoreP intent='muted' size='small'>
|
|
80
|
+
{extensions.join(', ')}
|
|
81
|
+
</ReqoreP>
|
|
82
|
+
);
|
|
62
83
|
},
|
|
63
|
-
[]
|
|
84
|
+
[extensions]
|
|
64
85
|
);
|
|
65
|
-
}, [options.accept]);
|
|
66
86
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
return '';
|
|
87
|
+
useEffect(() => {
|
|
88
|
+
if (acceptedFiles.length === 0) {
|
|
89
|
+
return;
|
|
71
90
|
}
|
|
72
91
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
92
|
+
const reader = new FileReader();
|
|
93
|
+
|
|
94
|
+
reader.onload = () => {
|
|
95
|
+
onChange({
|
|
96
|
+
name: acceptedFiles[0].name,
|
|
97
|
+
content: reader.result as string,
|
|
98
|
+
size: acceptedFiles[0].size,
|
|
99
|
+
});
|
|
100
|
+
};
|
|
76
101
|
|
|
102
|
+
reader.readAsDataURL(acceptedFiles[0]);
|
|
103
|
+
}, [acceptedFiles]);
|
|
104
|
+
|
|
105
|
+
if (value) {
|
|
77
106
|
return (
|
|
78
|
-
|
|
79
|
-
{
|
|
80
|
-
|
|
107
|
+
<>
|
|
108
|
+
<input {...getInputProps()} />
|
|
109
|
+
<ReqoreButton
|
|
110
|
+
label={value.name}
|
|
111
|
+
minimal
|
|
112
|
+
intent='info'
|
|
113
|
+
icon='FileLine'
|
|
114
|
+
rightIcon='FileUploadLine'
|
|
115
|
+
badge={filesize(value.size || 0)}
|
|
116
|
+
description={`Click here to upload a different ${renderExtensions(true)} file`}
|
|
117
|
+
{...valueButtonProps}
|
|
118
|
+
{...getRootProps()}
|
|
119
|
+
/>
|
|
120
|
+
</>
|
|
81
121
|
);
|
|
82
|
-
},
|
|
83
|
-
[extensions]
|
|
84
|
-
);
|
|
85
|
-
|
|
86
|
-
useEffect(() => {
|
|
87
|
-
if (acceptedFiles.length === 0) {
|
|
88
|
-
return;
|
|
89
122
|
}
|
|
90
123
|
|
|
91
|
-
const reader = new FileReader();
|
|
92
|
-
|
|
93
|
-
reader.onload = () => {
|
|
94
|
-
onChange({
|
|
95
|
-
name: acceptedFiles[0].name,
|
|
96
|
-
content: reader.result as string,
|
|
97
|
-
size: acceptedFiles[0].size,
|
|
98
|
-
});
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
reader.readAsDataURL(acceptedFiles[0]);
|
|
102
|
-
}, [acceptedFiles]);
|
|
103
|
-
|
|
104
|
-
if (value) {
|
|
105
124
|
return (
|
|
106
|
-
|
|
125
|
+
<ReqorePanel contentStyle={contentStyle} {...rest} {...getRootProps()} size='huge'>
|
|
107
126
|
<input {...getInputProps()} />
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
description={`Click here to upload a different ${renderExtensions(true)} file`}
|
|
116
|
-
{...valueButtonProps}
|
|
117
|
-
{...getRootProps()}
|
|
118
|
-
/>
|
|
119
|
-
</>
|
|
127
|
+
<ReqoreControlGroup vertical horizontalAlign='center'>
|
|
128
|
+
<ReqoreH4 size='small'>
|
|
129
|
+
<ReqoreIcon icon='FileAddLine' size='small' /> Click or drop files here to upload
|
|
130
|
+
</ReqoreH4>
|
|
131
|
+
{renderExtensions()}
|
|
132
|
+
</ReqoreControlGroup>
|
|
133
|
+
</ReqorePanel>
|
|
120
134
|
);
|
|
121
135
|
}
|
|
122
|
-
|
|
123
|
-
return (
|
|
124
|
-
<ReqorePanel contentStyle={contentStyle} {...rest} {...getRootProps()} size='huge'>
|
|
125
|
-
<input {...getInputProps()} />
|
|
126
|
-
<ReqoreControlGroup vertical horizontalAlign='center'>
|
|
127
|
-
<ReqoreH4 size='small'>
|
|
128
|
-
<ReqoreIcon icon='FileAddLine' size='small' /> Click or drop files here to upload
|
|
129
|
-
</ReqoreH4>
|
|
130
|
-
{renderExtensions()}
|
|
131
|
-
</ReqoreControlGroup>
|
|
132
|
-
</ReqorePanel>
|
|
133
|
-
);
|
|
134
|
-
};
|
|
136
|
+
);
|
|
@@ -81,6 +81,23 @@ export const Disabled: Story = {
|
|
|
81
81
|
},
|
|
82
82
|
};
|
|
83
83
|
|
|
84
|
+
export const Small: Story = {
|
|
85
|
+
args: {
|
|
86
|
+
type: 'array',
|
|
87
|
+
size: 'small',
|
|
88
|
+
dataType: 'native',
|
|
89
|
+
resultDataType: 'yaml',
|
|
90
|
+
value: [
|
|
91
|
+
{
|
|
92
|
+
key: 'value',
|
|
93
|
+
},
|
|
94
|
+
'Test',
|
|
95
|
+
12,
|
|
96
|
+
false,
|
|
97
|
+
],
|
|
98
|
+
},
|
|
99
|
+
};
|
|
100
|
+
|
|
84
101
|
export const DisabledWithValue: Story = {
|
|
85
102
|
args: {
|
|
86
103
|
type: 'array',
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
import { IReqoreTabsProps } from '@qoretechnologies/reqore/dist/components/Tabs';
|
|
9
9
|
import { IReqoreTreeProps, ReqoreTree } from '@qoretechnologies/reqore/dist/components/Tree';
|
|
10
10
|
import jsyaml from 'js-yaml';
|
|
11
|
-
import { useCallback, useMemo, useState } from 'react';
|
|
11
|
+
import { memo, useCallback, useMemo, useState } from 'react';
|
|
12
12
|
import LongStringFormField, { ILongStringFormFieldProps } from '../long-string/LongString';
|
|
13
13
|
|
|
14
14
|
export interface IReqraftObjectFormFieldProps extends Omit<IReqoreTabsProps, 'onChange'> {
|
|
@@ -78,6 +78,7 @@ export const ReqraftObjectFormFieldTextarea = ({
|
|
|
78
78
|
/>
|
|
79
79
|
<ReqoreControlGroup stack>
|
|
80
80
|
<ReqoreButton
|
|
81
|
+
size={rest.size}
|
|
81
82
|
label='Save'
|
|
82
83
|
icon='CheckLine'
|
|
83
84
|
compact
|
|
@@ -101,6 +102,7 @@ export const ReqraftObjectFormFieldTextarea = ({
|
|
|
101
102
|
}}
|
|
102
103
|
/>
|
|
103
104
|
<ReqoreButton
|
|
105
|
+
size={rest.size}
|
|
104
106
|
label='Discard'
|
|
105
107
|
icon='HistoryLine'
|
|
106
108
|
compact
|
|
@@ -118,127 +120,135 @@ export const ReqraftObjectFormFieldTextarea = ({
|
|
|
118
120
|
);
|
|
119
121
|
};
|
|
120
122
|
|
|
121
|
-
export const ReqraftObjectFormField = (
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
123
|
+
export const ReqraftObjectFormField = memo(
|
|
124
|
+
({
|
|
125
|
+
onChange,
|
|
126
|
+
value,
|
|
127
|
+
type,
|
|
128
|
+
dataType,
|
|
129
|
+
resultDataType = dataType,
|
|
130
|
+
editorProps,
|
|
131
|
+
textareaProps,
|
|
132
|
+
...rest
|
|
133
|
+
}: IReqraftObjectFormFieldProps) => {
|
|
134
|
+
const handleTreeDataChange = useCallback(
|
|
135
|
+
(data: IReqoreTreeProps['data']) => {
|
|
136
|
+
switch (resultDataType) {
|
|
137
|
+
case 'json':
|
|
138
|
+
onChange(JSON.stringify(data, null, 2));
|
|
139
|
+
break;
|
|
140
|
+
case 'yaml':
|
|
141
|
+
onChange(jsyaml.dump(data));
|
|
142
|
+
break;
|
|
143
|
+
default:
|
|
144
|
+
onChange(data);
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
[resultDataType, onChange]
|
|
148
|
+
);
|
|
149
|
+
|
|
150
|
+
const treeData = useMemo(() => {
|
|
151
|
+
if (!value) {
|
|
152
|
+
return undefined;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
switch (dataType) {
|
|
134
156
|
case 'json':
|
|
135
|
-
|
|
136
|
-
break;
|
|
157
|
+
return JSON.parse(value as string);
|
|
137
158
|
case 'yaml':
|
|
138
|
-
|
|
139
|
-
break;
|
|
159
|
+
return jsyaml.load(value as string);
|
|
140
160
|
default:
|
|
141
|
-
|
|
161
|
+
return value;
|
|
142
162
|
}
|
|
143
|
-
},
|
|
144
|
-
[resultDataType, onChange]
|
|
145
|
-
);
|
|
163
|
+
}, [value]);
|
|
146
164
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
switch (dataType) {
|
|
153
|
-
case 'json':
|
|
154
|
-
return JSON.parse(value as string);
|
|
155
|
-
case 'yaml':
|
|
156
|
-
return jsyaml.load(value as string);
|
|
157
|
-
default:
|
|
158
|
-
return value;
|
|
159
|
-
}
|
|
160
|
-
}, [value]);
|
|
161
|
-
|
|
162
|
-
const textData: string = useMemo(() => {
|
|
163
|
-
if (!value) {
|
|
164
|
-
return undefined;
|
|
165
|
-
}
|
|
165
|
+
const textData: string = useMemo(() => {
|
|
166
|
+
if (!value) {
|
|
167
|
+
return undefined;
|
|
168
|
+
}
|
|
166
169
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
170
|
+
switch (dataType) {
|
|
171
|
+
case 'json':
|
|
172
|
+
return value as string;
|
|
173
|
+
case 'yaml':
|
|
174
|
+
return value as string;
|
|
175
|
+
default:
|
|
176
|
+
switch (resultDataType) {
|
|
177
|
+
case 'json':
|
|
178
|
+
return JSON.stringify(value, null, 2);
|
|
179
|
+
default:
|
|
180
|
+
return jsyaml.dump(value);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}, [value]);
|
|
181
184
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
185
|
+
return (
|
|
186
|
+
<ReqoreTabs
|
|
187
|
+
tabsPadding='vertical'
|
|
188
|
+
{...rest}
|
|
189
|
+
tabs={[
|
|
190
|
+
{
|
|
191
|
+
label: 'Editor',
|
|
192
|
+
icon: 'NodeTree',
|
|
193
|
+
id: 'editor',
|
|
194
|
+
size: rest.size,
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
label: 'Text',
|
|
198
|
+
icon: 'Text',
|
|
199
|
+
id: 'text',
|
|
200
|
+
show: resultDataType !== 'native',
|
|
201
|
+
size: rest.size,
|
|
202
|
+
},
|
|
203
|
+
]}
|
|
204
|
+
>
|
|
205
|
+
<ReqoreTabsContent tabId='editor'>
|
|
206
|
+
{!treeData && (
|
|
207
|
+
<ReqoreButton
|
|
208
|
+
onClick={() => handleTreeDataChange(type === 'array' ? [] : {})}
|
|
209
|
+
fixed
|
|
210
|
+
icon='AddLine'
|
|
211
|
+
disabled={rest.disabled}
|
|
212
|
+
size={rest.size}
|
|
213
|
+
>
|
|
214
|
+
New {type === 'array' ? 'List' : 'Object'}
|
|
215
|
+
</ReqoreButton>
|
|
216
|
+
)}
|
|
217
|
+
{treeData && (
|
|
218
|
+
<ReqoreTree
|
|
219
|
+
disabled={rest.disabled}
|
|
220
|
+
data={treeData}
|
|
221
|
+
onDataChange={handleTreeDataChange}
|
|
222
|
+
editable
|
|
223
|
+
showControls={false}
|
|
224
|
+
size={rest.size}
|
|
225
|
+
{...editorProps}
|
|
226
|
+
/>
|
|
227
|
+
)}
|
|
228
|
+
{treeData && (
|
|
229
|
+
<ReqoreButton
|
|
230
|
+
onClick={() => handleTreeDataChange(undefined)}
|
|
231
|
+
fixed
|
|
232
|
+
icon='CloseLine'
|
|
233
|
+
disabled={rest.disabled}
|
|
234
|
+
size={rest.size}
|
|
235
|
+
>
|
|
236
|
+
Remove
|
|
237
|
+
</ReqoreButton>
|
|
238
|
+
)}
|
|
239
|
+
</ReqoreTabsContent>
|
|
240
|
+
<ReqoreTabsContent tabId='text'>
|
|
241
|
+
<ReqraftObjectFormFieldTextarea
|
|
213
242
|
disabled={rest.disabled}
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
{
|
|
243
|
+
size={rest.size}
|
|
244
|
+
{...textareaProps}
|
|
245
|
+
value={textData}
|
|
246
|
+
onChange={onChange}
|
|
247
|
+
dataType={dataType}
|
|
248
|
+
resultDataType={resultDataType as 'json' | 'yaml'}
|
|
219
249
|
/>
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
icon='CloseLine'
|
|
226
|
-
disabled={rest.disabled}
|
|
227
|
-
>
|
|
228
|
-
Remove
|
|
229
|
-
</ReqoreButton>
|
|
230
|
-
)}
|
|
231
|
-
</ReqoreTabsContent>
|
|
232
|
-
<ReqoreTabsContent tabId='text'>
|
|
233
|
-
<ReqraftObjectFormFieldTextarea
|
|
234
|
-
disabled={rest.disabled}
|
|
235
|
-
{...textareaProps}
|
|
236
|
-
value={textData}
|
|
237
|
-
onChange={onChange}
|
|
238
|
-
dataType={dataType}
|
|
239
|
-
resultDataType={resultDataType as 'json' | 'yaml'}
|
|
240
|
-
/>
|
|
241
|
-
</ReqoreTabsContent>
|
|
242
|
-
</ReqoreTabs>
|
|
243
|
-
);
|
|
244
|
-
};
|
|
250
|
+
</ReqoreTabsContent>
|
|
251
|
+
</ReqoreTabs>
|
|
252
|
+
);
|
|
253
|
+
}
|
|
254
|
+
);
|