@flowgram.ai/form-materials 0.1.31 → 0.2.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/bin/materials.js +21 -5
- package/dist/esm/index.js +570 -54
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +206 -28
- package/dist/index.d.ts +206 -28
- package/dist/index.js +582 -59
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/components/batch-variable-selector/config.json +5 -0
- package/src/components/batch-variable-selector/index.tsx +19 -0
- package/src/components/constant-input/config.json +6 -0
- package/src/components/constant-input/index.tsx +81 -0
- package/src/components/constant-input/types.ts +18 -0
- package/src/components/dynamic-value-input/config.json +5 -0
- package/src/components/dynamic-value-input/index.tsx +77 -0
- package/src/components/dynamic-value-input/styles.tsx +19 -0
- package/src/components/index.ts +6 -3
- package/src/components/json-schema-editor/config.json +1 -1
- package/src/components/json-schema-editor/hooks.tsx +35 -24
- package/src/components/json-schema-editor/index.tsx +3 -3
- package/src/components/json-schema-editor/types.ts +3 -3
- package/src/components/type-selector/config.json +1 -1
- package/src/components/type-selector/constants.tsx +2 -2
- package/src/components/type-selector/index.tsx +11 -8
- package/src/components/variable-selector/config.json +2 -2
- package/src/components/variable-selector/index.tsx +76 -16
- package/src/components/variable-selector/styles.tsx +43 -0
- package/src/components/variable-selector/use-variable-tree.tsx +34 -6
- package/src/effects/index.ts +2 -0
- package/src/effects/provide-batch-input/config.json +5 -0
- package/src/effects/provide-batch-input/index.ts +38 -0
- package/src/effects/provide-batch-outputs/config.json +5 -0
- package/src/effects/provide-batch-outputs/index.ts +34 -0
- package/src/index.ts +3 -0
- package/src/typings/flow-value/config.json +5 -0
- package/src/typings/flow-value/index.ts +27 -0
- package/src/typings/index.ts +2 -0
- package/src/typings/json-schema/config.json +5 -0
- package/src/typings/json-schema/index.ts +31 -0
- package/src/utils/format-legacy-refs/config.json +5 -0
- package/src/utils/format-legacy-refs/index.ts +153 -0
- package/src/utils/format-legacy-refs/readme.md +38 -0
- package/src/utils/index.ts +2 -0
- package/src/utils/json-schema/config.json +5 -0
- package/src/utils/json-schema/index.ts +154 -0
- package/src/components/type-selector/types.ts +0 -19
package/dist/esm/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
// src/components/variable-selector/index.tsx
|
|
2
|
-
import React3 from "react";
|
|
3
|
-
import {
|
|
2
|
+
import React3, { useMemo } from "react";
|
|
3
|
+
import { IconChevronDownStroked, IconIssueStroked } from "@douyinfe/semi-icons";
|
|
4
4
|
|
|
5
5
|
// src/components/variable-selector/use-variable-tree.tsx
|
|
6
6
|
import React2, { useCallback } from "react";
|
|
7
|
-
import { useScopeAvailable, ASTMatch } from "@flowgram.ai/editor";
|
|
7
|
+
import { useScopeAvailable, ASTMatch as ASTMatch2 } from "@flowgram.ai/editor";
|
|
8
8
|
import { Icon as Icon2 } from "@douyinfe/semi-ui";
|
|
9
9
|
|
|
10
10
|
// src/components/type-selector/constants.tsx
|
|
@@ -396,18 +396,131 @@ var options = [
|
|
|
396
396
|
}
|
|
397
397
|
];
|
|
398
398
|
|
|
399
|
+
// src/utils/json-schema/index.ts
|
|
400
|
+
import { get } from "lodash";
|
|
401
|
+
import { ASTFactory, ASTKind, ASTMatch } from "@flowgram.ai/editor";
|
|
402
|
+
var JsonSchemaUtils;
|
|
403
|
+
((JsonSchemaUtils2) => {
|
|
404
|
+
function schemaToAST(jsonSchema) {
|
|
405
|
+
const { type, extra } = jsonSchema || {};
|
|
406
|
+
const { weak = false } = extra || {};
|
|
407
|
+
if (!type) {
|
|
408
|
+
return void 0;
|
|
409
|
+
}
|
|
410
|
+
switch (type) {
|
|
411
|
+
case "object":
|
|
412
|
+
if (weak) {
|
|
413
|
+
return { kind: ASTKind.Object, weak: true };
|
|
414
|
+
}
|
|
415
|
+
return ASTFactory.createObject({
|
|
416
|
+
properties: Object.entries(jsonSchema.properties || {}).sort((a, b) => (get(a?.[1], "extra.index") || 0) - (get(b?.[1], "extra.index") || 0)).map(([key, _property]) => ({
|
|
417
|
+
key,
|
|
418
|
+
type: schemaToAST(_property),
|
|
419
|
+
meta: { description: _property.description }
|
|
420
|
+
}))
|
|
421
|
+
});
|
|
422
|
+
case "array":
|
|
423
|
+
if (weak) {
|
|
424
|
+
return { kind: ASTKind.Array, weak: true };
|
|
425
|
+
}
|
|
426
|
+
return ASTFactory.createArray({
|
|
427
|
+
items: schemaToAST(jsonSchema.items)
|
|
428
|
+
});
|
|
429
|
+
case "map":
|
|
430
|
+
if (weak) {
|
|
431
|
+
return { kind: ASTKind.Map, weak: true };
|
|
432
|
+
}
|
|
433
|
+
return ASTFactory.createMap({
|
|
434
|
+
valueType: schemaToAST(jsonSchema.additionalProperties)
|
|
435
|
+
});
|
|
436
|
+
case "string":
|
|
437
|
+
return ASTFactory.createString();
|
|
438
|
+
case "number":
|
|
439
|
+
return ASTFactory.createNumber();
|
|
440
|
+
case "boolean":
|
|
441
|
+
return ASTFactory.createBoolean();
|
|
442
|
+
case "integer":
|
|
443
|
+
return ASTFactory.createInteger();
|
|
444
|
+
default:
|
|
445
|
+
return ASTFactory.createCustomType({ typeName: type });
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
JsonSchemaUtils2.schemaToAST = schemaToAST;
|
|
449
|
+
function astToSchema(typeAST) {
|
|
450
|
+
if (ASTMatch.isString(typeAST)) {
|
|
451
|
+
return {
|
|
452
|
+
type: "string"
|
|
453
|
+
};
|
|
454
|
+
}
|
|
455
|
+
if (ASTMatch.isBoolean(typeAST)) {
|
|
456
|
+
return {
|
|
457
|
+
type: "boolean"
|
|
458
|
+
};
|
|
459
|
+
}
|
|
460
|
+
if (ASTMatch.isNumber(typeAST)) {
|
|
461
|
+
return {
|
|
462
|
+
type: "number"
|
|
463
|
+
};
|
|
464
|
+
}
|
|
465
|
+
if (ASTMatch.isInteger(typeAST)) {
|
|
466
|
+
return {
|
|
467
|
+
type: "integer"
|
|
468
|
+
};
|
|
469
|
+
}
|
|
470
|
+
if (ASTMatch.isObject(typeAST)) {
|
|
471
|
+
return {
|
|
472
|
+
type: "object",
|
|
473
|
+
properties: Object.fromEntries(
|
|
474
|
+
Object.entries(typeAST.properties).map(([key, value]) => [key, astToSchema(value)])
|
|
475
|
+
)
|
|
476
|
+
};
|
|
477
|
+
}
|
|
478
|
+
if (ASTMatch.isArray(typeAST)) {
|
|
479
|
+
return {
|
|
480
|
+
type: "array",
|
|
481
|
+
items: astToSchema(typeAST.items)
|
|
482
|
+
};
|
|
483
|
+
}
|
|
484
|
+
if (ASTMatch.isMap(typeAST)) {
|
|
485
|
+
return {
|
|
486
|
+
type: "map",
|
|
487
|
+
items: astToSchema(typeAST.valueType)
|
|
488
|
+
};
|
|
489
|
+
}
|
|
490
|
+
if (ASTMatch.isCustomType(typeAST)) {
|
|
491
|
+
return {
|
|
492
|
+
type: typeAST.typeName
|
|
493
|
+
};
|
|
494
|
+
}
|
|
495
|
+
return void 0;
|
|
496
|
+
}
|
|
497
|
+
JsonSchemaUtils2.astToSchema = astToSchema;
|
|
498
|
+
function isASTMatchSchema(typeAST, schema) {
|
|
499
|
+
if (Array.isArray(schema)) {
|
|
500
|
+
return typeAST.isTypeEqual(
|
|
501
|
+
ASTFactory.createUnion({
|
|
502
|
+
types: schema.map((_schema) => schemaToAST(_schema)).filter(Boolean)
|
|
503
|
+
})
|
|
504
|
+
);
|
|
505
|
+
}
|
|
506
|
+
return typeAST.isTypeEqual(schemaToAST(schema));
|
|
507
|
+
}
|
|
508
|
+
JsonSchemaUtils2.isASTMatchSchema = isASTMatchSchema;
|
|
509
|
+
})(JsonSchemaUtils || (JsonSchemaUtils = {}));
|
|
510
|
+
|
|
399
511
|
// src/components/variable-selector/use-variable-tree.tsx
|
|
400
|
-
function useVariableTree() {
|
|
512
|
+
function useVariableTree(params) {
|
|
513
|
+
const { includeSchema, excludeSchema } = params;
|
|
401
514
|
const available = useScopeAvailable();
|
|
402
515
|
const getVariableTypeIcon = useCallback((variable) => {
|
|
403
|
-
if (variable.meta
|
|
516
|
+
if (variable.meta?.icon) {
|
|
404
517
|
if (typeof variable.meta.icon === "string") {
|
|
405
518
|
return /* @__PURE__ */ React2.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: variable.meta.icon });
|
|
406
519
|
}
|
|
407
520
|
return variable.meta.icon;
|
|
408
521
|
}
|
|
409
522
|
const _type = variable.type;
|
|
410
|
-
if (
|
|
523
|
+
if (ASTMatch2.isArray(_type)) {
|
|
411
524
|
return /* @__PURE__ */ React2.createElement(
|
|
412
525
|
Icon2,
|
|
413
526
|
{
|
|
@@ -416,32 +529,87 @@ function useVariableTree() {
|
|
|
416
529
|
}
|
|
417
530
|
);
|
|
418
531
|
}
|
|
419
|
-
if (
|
|
532
|
+
if (ASTMatch2.isCustomType(_type)) {
|
|
420
533
|
return /* @__PURE__ */ React2.createElement(Icon2, { size: "small", svg: VariableTypeIcons[_type.typeName.toLowerCase()] });
|
|
421
534
|
}
|
|
422
535
|
return /* @__PURE__ */ React2.createElement(Icon2, { size: "small", svg: VariableTypeIcons[variable.type?.kind.toLowerCase()] });
|
|
423
536
|
}, []);
|
|
424
537
|
const renderVariable = (variable, parentFields = []) => {
|
|
425
538
|
let type = variable?.type;
|
|
539
|
+
if (!type) {
|
|
540
|
+
return null;
|
|
541
|
+
}
|
|
426
542
|
let children;
|
|
427
|
-
if (
|
|
543
|
+
if (ASTMatch2.isObject(type)) {
|
|
428
544
|
children = (type.properties || []).map((_property) => renderVariable(_property, [...parentFields, variable])).filter(Boolean);
|
|
429
545
|
if (!children?.length) {
|
|
430
546
|
return null;
|
|
431
547
|
}
|
|
432
548
|
}
|
|
433
|
-
const
|
|
549
|
+
const keyPath = [...parentFields.map((_field) => _field.key), variable.key];
|
|
550
|
+
const key = keyPath.join(".");
|
|
551
|
+
const isSchemaInclude = includeSchema ? JsonSchemaUtils.isASTMatchSchema(type, includeSchema) : true;
|
|
552
|
+
const isSchemaExclude = excludeSchema ? JsonSchemaUtils.isASTMatchSchema(type, excludeSchema) : false;
|
|
553
|
+
const isSchemaMatch = isSchemaInclude && !isSchemaExclude;
|
|
554
|
+
if (!isSchemaMatch && !children?.length) {
|
|
555
|
+
return null;
|
|
556
|
+
}
|
|
434
557
|
return {
|
|
435
|
-
key
|
|
436
|
-
label: variable.meta
|
|
437
|
-
value:
|
|
558
|
+
key,
|
|
559
|
+
label: variable.meta?.title || variable.key,
|
|
560
|
+
value: key,
|
|
561
|
+
keyPath,
|
|
438
562
|
icon: getVariableTypeIcon(variable),
|
|
439
|
-
children
|
|
563
|
+
children,
|
|
564
|
+
disabled: !isSchemaMatch,
|
|
565
|
+
rootMeta: parentFields[0]?.meta
|
|
440
566
|
};
|
|
441
567
|
};
|
|
442
568
|
return [...available.variables.slice(0).reverse()].map((_variable) => renderVariable(_variable)).filter(Boolean);
|
|
443
569
|
}
|
|
444
570
|
|
|
571
|
+
// src/components/variable-selector/styles.tsx
|
|
572
|
+
import styled from "styled-components";
|
|
573
|
+
import { Tag, TreeSelect } from "@douyinfe/semi-ui";
|
|
574
|
+
var UIRootTitle = styled.span`
|
|
575
|
+
margin-right: 4px;
|
|
576
|
+
color: var(--semi-color-text-2);
|
|
577
|
+
`;
|
|
578
|
+
var UITag = styled(Tag)`
|
|
579
|
+
width: 100%;
|
|
580
|
+
display: flex;
|
|
581
|
+
align-items: center;
|
|
582
|
+
justify-content: flex-start;
|
|
583
|
+
|
|
584
|
+
& .semi-tag-content-center {
|
|
585
|
+
justify-content: flex-start;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
&.semi-tag {
|
|
589
|
+
margin: 0;
|
|
590
|
+
}
|
|
591
|
+
`;
|
|
592
|
+
var UITreeSelect = styled(TreeSelect)`
|
|
593
|
+
outline: ${({ $error }) => $error ? "1px solid red" : "none"};
|
|
594
|
+
|
|
595
|
+
height: 22px;
|
|
596
|
+
min-height: 22px;
|
|
597
|
+
line-height: 22px;
|
|
598
|
+
|
|
599
|
+
& .semi-tree-select-selection {
|
|
600
|
+
padding: 0 2px;
|
|
601
|
+
height: 22px;
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
& .semi-tree-select-selection-content {
|
|
605
|
+
width: 100%;
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
& .semi-tree-select-selection-placeholder {
|
|
609
|
+
padding-left: 10px;
|
|
610
|
+
}
|
|
611
|
+
`;
|
|
612
|
+
|
|
445
613
|
// src/components/variable-selector/index.tsx
|
|
446
614
|
var VariableSelector = ({
|
|
447
615
|
value,
|
|
@@ -449,33 +617,77 @@ var VariableSelector = ({
|
|
|
449
617
|
onChange,
|
|
450
618
|
style,
|
|
451
619
|
readonly = false,
|
|
452
|
-
|
|
620
|
+
includeSchema,
|
|
621
|
+
excludeSchema,
|
|
622
|
+
hasError,
|
|
623
|
+
triggerRender
|
|
453
624
|
}) => {
|
|
454
|
-
const treeData = useVariableTree();
|
|
625
|
+
const treeData = useVariableTree({ includeSchema, excludeSchema });
|
|
626
|
+
const treeValue = useMemo(() => {
|
|
627
|
+
if (typeof value === "string") {
|
|
628
|
+
console.warn(
|
|
629
|
+
"The Value of VariableSelector is a string, it should be an ARRAY. \n",
|
|
630
|
+
"Please check the value of VariableSelector \n"
|
|
631
|
+
);
|
|
632
|
+
return value;
|
|
633
|
+
}
|
|
634
|
+
return value?.join(".");
|
|
635
|
+
}, [value]);
|
|
636
|
+
const renderIcon = (icon) => {
|
|
637
|
+
if (typeof icon === "string") {
|
|
638
|
+
return /* @__PURE__ */ React3.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
|
|
639
|
+
}
|
|
640
|
+
return icon;
|
|
641
|
+
};
|
|
455
642
|
return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
|
|
456
|
-
|
|
643
|
+
UITreeSelect,
|
|
457
644
|
{
|
|
458
645
|
dropdownMatchSelectWidth: false,
|
|
459
646
|
disabled: readonly,
|
|
460
647
|
treeData,
|
|
461
648
|
size: "small",
|
|
462
|
-
value,
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
},
|
|
649
|
+
value: treeValue,
|
|
650
|
+
clearIcon: null,
|
|
651
|
+
$error: hasError,
|
|
652
|
+
style,
|
|
467
653
|
validateStatus: hasError ? "error" : void 0,
|
|
468
|
-
onChange: (
|
|
469
|
-
onChange(
|
|
654
|
+
onChange: (_, _config) => {
|
|
655
|
+
onChange(_config.keyPath);
|
|
470
656
|
},
|
|
471
|
-
|
|
657
|
+
renderSelectedItem: (_option) => {
|
|
658
|
+
if (!_option?.keyPath) {
|
|
659
|
+
return /* @__PURE__ */ React3.createElement(
|
|
660
|
+
UITag,
|
|
661
|
+
{
|
|
662
|
+
prefixIcon: /* @__PURE__ */ React3.createElement(IconIssueStroked, null),
|
|
663
|
+
color: "amber",
|
|
664
|
+
closable: !readonly,
|
|
665
|
+
onClose: () => onChange(void 0)
|
|
666
|
+
},
|
|
667
|
+
config?.notFoundContent ?? "Undefined"
|
|
668
|
+
);
|
|
669
|
+
}
|
|
670
|
+
return /* @__PURE__ */ React3.createElement(
|
|
671
|
+
UITag,
|
|
672
|
+
{
|
|
673
|
+
prefixIcon: renderIcon(_option.rootMeta?.icon || _option?.icon),
|
|
674
|
+
closable: !readonly,
|
|
675
|
+
onClose: () => onChange(void 0)
|
|
676
|
+
},
|
|
677
|
+
/* @__PURE__ */ React3.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null),
|
|
678
|
+
_option.label
|
|
679
|
+
);
|
|
680
|
+
},
|
|
681
|
+
showClear: false,
|
|
682
|
+
arrowIcon: value ? null : /* @__PURE__ */ React3.createElement(IconChevronDownStroked, { size: "small" }),
|
|
683
|
+
triggerRender,
|
|
472
684
|
placeholder: config?.placeholder ?? "Select Variable..."
|
|
473
685
|
}
|
|
474
686
|
));
|
|
475
687
|
};
|
|
476
688
|
|
|
477
689
|
// src/components/type-selector/index.tsx
|
|
478
|
-
import React4, { useMemo } from "react";
|
|
690
|
+
import React4, { useMemo as useMemo2 } from "react";
|
|
479
691
|
import { Button, Cascader } from "@douyinfe/semi-ui";
|
|
480
692
|
var getTypeSelectValue = (value) => {
|
|
481
693
|
if (value?.type === "array" && value?.items) {
|
|
@@ -491,13 +703,14 @@ var parseTypeSelectValue = (value) => {
|
|
|
491
703
|
return { type };
|
|
492
704
|
};
|
|
493
705
|
function TypeSelector(props) {
|
|
494
|
-
const { value, onChange } = props;
|
|
495
|
-
const selectValue =
|
|
706
|
+
const { value, onChange, disabled, style } = props;
|
|
707
|
+
const selectValue = useMemo2(() => getTypeSelectValue(value), [value]);
|
|
496
708
|
return /* @__PURE__ */ React4.createElement(
|
|
497
709
|
Cascader,
|
|
498
710
|
{
|
|
711
|
+
disabled,
|
|
499
712
|
size: "small",
|
|
500
|
-
triggerRender: () => /* @__PURE__ */ React4.createElement(Button, { size: "small", style
|
|
713
|
+
triggerRender: () => /* @__PURE__ */ React4.createElement(Button, { size: "small", style }, getSchemaIcon(value)),
|
|
501
714
|
treeData: options,
|
|
502
715
|
value: selectValue,
|
|
503
716
|
leafOnly: true,
|
|
@@ -509,7 +722,7 @@ function TypeSelector(props) {
|
|
|
509
722
|
}
|
|
510
723
|
|
|
511
724
|
// src/components/json-schema-editor/index.tsx
|
|
512
|
-
import React6, { useMemo as
|
|
725
|
+
import React6, { useMemo as useMemo4, useState as useState2 } from "react";
|
|
513
726
|
import { Button as Button2, Checkbox, IconButton, Input } from "@douyinfe/semi-ui";
|
|
514
727
|
import {
|
|
515
728
|
IconExpand,
|
|
@@ -522,35 +735,35 @@ import {
|
|
|
522
735
|
|
|
523
736
|
// src/components/json-schema-editor/styles.tsx
|
|
524
737
|
import React5 from "react";
|
|
525
|
-
import
|
|
738
|
+
import styled2, { css } from "styled-components";
|
|
526
739
|
import Icon3 from "@douyinfe/semi-icons";
|
|
527
|
-
var UIContainer =
|
|
740
|
+
var UIContainer = styled2.div`
|
|
528
741
|
/* & .semi-input {
|
|
529
742
|
background-color: #fff;
|
|
530
743
|
border-radius: 6px;
|
|
531
744
|
height: 24px;
|
|
532
745
|
} */
|
|
533
746
|
`;
|
|
534
|
-
var UIRow =
|
|
747
|
+
var UIRow = styled2.div`
|
|
535
748
|
display: flex;
|
|
536
749
|
align-items: center;
|
|
537
750
|
gap: 6px;
|
|
538
751
|
`;
|
|
539
|
-
var UICollapseTrigger =
|
|
752
|
+
var UICollapseTrigger = styled2.div`
|
|
540
753
|
cursor: pointer;
|
|
541
754
|
margin-right: 5px;
|
|
542
755
|
`;
|
|
543
|
-
var UIExpandDetail =
|
|
756
|
+
var UIExpandDetail = styled2.div`
|
|
544
757
|
display: flex;
|
|
545
758
|
flex-direction: column;
|
|
546
759
|
`;
|
|
547
|
-
var UILabel =
|
|
760
|
+
var UILabel = styled2.div`
|
|
548
761
|
font-size: 12px;
|
|
549
762
|
color: #999;
|
|
550
763
|
font-weight: 400;
|
|
551
764
|
margin-bottom: 2px;
|
|
552
765
|
`;
|
|
553
|
-
var UIProperties =
|
|
766
|
+
var UIProperties = styled2.div`
|
|
554
767
|
display: grid;
|
|
555
768
|
grid-template-columns: auto 1fr;
|
|
556
769
|
|
|
@@ -559,7 +772,7 @@ var UIProperties = styled.div`
|
|
|
559
772
|
margin-top: 10px;
|
|
560
773
|
`}
|
|
561
774
|
`;
|
|
562
|
-
var UIPropertyLeft =
|
|
775
|
+
var UIPropertyLeft = styled2.div`
|
|
563
776
|
grid-column: 1;
|
|
564
777
|
position: relative;
|
|
565
778
|
|
|
@@ -589,7 +802,7 @@ var UIPropertyLeft = styled.div`
|
|
|
589
802
|
}
|
|
590
803
|
`}
|
|
591
804
|
`;
|
|
592
|
-
var UIPropertyRight =
|
|
805
|
+
var UIPropertyRight = styled2.div`
|
|
593
806
|
grid-column: 2;
|
|
594
807
|
margin-bottom: 10px;
|
|
595
808
|
|
|
@@ -597,7 +810,7 @@ var UIPropertyRight = styled.div`
|
|
|
597
810
|
margin-bottom: 0px;
|
|
598
811
|
}
|
|
599
812
|
`;
|
|
600
|
-
var UIPropertyMain =
|
|
813
|
+
var UIPropertyMain = styled2.div`
|
|
601
814
|
display: flex;
|
|
602
815
|
flex-direction: column;
|
|
603
816
|
gap: 10px;
|
|
@@ -608,19 +821,19 @@ var UIPropertyMain = styled.div`
|
|
|
608
821
|
border-radius: 4px;
|
|
609
822
|
`}
|
|
610
823
|
`;
|
|
611
|
-
var UICollapsible =
|
|
824
|
+
var UICollapsible = styled2.div`
|
|
612
825
|
display: none;
|
|
613
826
|
|
|
614
827
|
${({ $collapse }) => $collapse && css`
|
|
615
828
|
display: block;
|
|
616
829
|
`}
|
|
617
830
|
`;
|
|
618
|
-
var UIName =
|
|
831
|
+
var UIName = styled2.div`
|
|
619
832
|
flex-grow: 1;
|
|
620
833
|
`;
|
|
621
|
-
var UIType =
|
|
622
|
-
var UIRequired =
|
|
623
|
-
var UIActions =
|
|
834
|
+
var UIType = styled2.div``;
|
|
835
|
+
var UIRequired = styled2.div``;
|
|
836
|
+
var UIActions = styled2.div`
|
|
624
837
|
white-space: nowrap;
|
|
625
838
|
`;
|
|
626
839
|
var iconAddChildrenSvg = /* @__PURE__ */ React5.createElement(
|
|
@@ -646,7 +859,7 @@ var iconAddChildrenSvg = /* @__PURE__ */ React5.createElement(
|
|
|
646
859
|
var IconAddChildren = () => /* @__PURE__ */ React5.createElement(Icon3, { size: "small", svg: iconAddChildrenSvg });
|
|
647
860
|
|
|
648
861
|
// src/components/json-schema-editor/hooks.tsx
|
|
649
|
-
import { useEffect, useMemo as
|
|
862
|
+
import { useEffect, useMemo as useMemo3, useRef, useState } from "react";
|
|
650
863
|
var _id = 0;
|
|
651
864
|
function genId() {
|
|
652
865
|
return _id++;
|
|
@@ -661,15 +874,19 @@ function getDrilldownSchema(value, path) {
|
|
|
661
874
|
return { schema: value, path };
|
|
662
875
|
}
|
|
663
876
|
function usePropertiesEdit(value, onChange) {
|
|
664
|
-
const drilldown =
|
|
877
|
+
const drilldown = useMemo3(() => getDrilldownSchema(value), [value, value?.type, value?.items]);
|
|
665
878
|
const isDrilldownObject = drilldown.schema?.type === "object";
|
|
666
|
-
const initPropertyList =
|
|
667
|
-
() => isDrilldownObject ? Object.entries(drilldown.schema?.properties || {}).map(
|
|
668
|
-
([name, _value]) => ({
|
|
879
|
+
const initPropertyList = useMemo3(
|
|
880
|
+
() => isDrilldownObject ? Object.entries(drilldown.schema?.properties || {}).sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(
|
|
881
|
+
([name, _value], index) => ({
|
|
669
882
|
key: genId(),
|
|
670
883
|
name,
|
|
671
884
|
isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
|
|
672
|
-
..._value
|
|
885
|
+
..._value,
|
|
886
|
+
extra: {
|
|
887
|
+
..._value.extra || {},
|
|
888
|
+
index
|
|
889
|
+
}
|
|
673
890
|
})
|
|
674
891
|
) : [],
|
|
675
892
|
[isDrilldownObject]
|
|
@@ -685,7 +902,7 @@ function usePropertiesEdit(value, onChange) {
|
|
|
685
902
|
nameMap.set(_property.name, _property);
|
|
686
903
|
}
|
|
687
904
|
}
|
|
688
|
-
return Object.entries(drilldown.schema?.properties || {}).map(([name, _value]) => {
|
|
905
|
+
return Object.entries(drilldown.schema?.properties || {}).sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(([name, _value]) => {
|
|
689
906
|
const _property = nameMap.get(name);
|
|
690
907
|
if (_property) {
|
|
691
908
|
return {
|
|
@@ -731,7 +948,10 @@ function usePropertiesEdit(value, onChange) {
|
|
|
731
948
|
});
|
|
732
949
|
};
|
|
733
950
|
const onAddProperty = () => {
|
|
734
|
-
updatePropertyList((_list) => [
|
|
951
|
+
updatePropertyList((_list) => [
|
|
952
|
+
..._list,
|
|
953
|
+
{ key: genId(), name: "", type: "string", extra: { index: _list.length + 1 } }
|
|
954
|
+
]);
|
|
735
955
|
};
|
|
736
956
|
const onRemoveProperty = (key) => {
|
|
737
957
|
updatePropertyList((_list) => _list.filter((_property) => _property.key !== key));
|
|
@@ -782,7 +1002,7 @@ function PropertyEdit(props) {
|
|
|
782
1002
|
const [expand, setExpand] = useState2(false);
|
|
783
1003
|
const [collapse, setCollapse] = useState2(false);
|
|
784
1004
|
const { name, type, items, description, isPropertyRequired } = value || {};
|
|
785
|
-
const typeSelectorValue =
|
|
1005
|
+
const typeSelectorValue = useMemo4(() => ({ type, items }), [type, items]);
|
|
786
1006
|
const { propertyList, isDrilldownObject, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(value, onChangeProps);
|
|
787
1007
|
const onChange = (key, _value) => {
|
|
788
1008
|
onChangeProps?.({
|
|
@@ -868,11 +1088,307 @@ function PropertyEdit(props) {
|
|
|
868
1088
|
}
|
|
869
1089
|
))))));
|
|
870
1090
|
}
|
|
1091
|
+
|
|
1092
|
+
// src/components/batch-variable-selector/index.tsx
|
|
1093
|
+
import React7 from "react";
|
|
1094
|
+
import { PrivateScopeProvider } from "@flowgram.ai/editor";
|
|
1095
|
+
var batchVariableSchema = {
|
|
1096
|
+
type: "array",
|
|
1097
|
+
extra: { weak: true }
|
|
1098
|
+
};
|
|
1099
|
+
function BatchVariableSelector(props) {
|
|
1100
|
+
return /* @__PURE__ */ React7.createElement(PrivateScopeProvider, null, /* @__PURE__ */ React7.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
// src/components/constant-input/index.tsx
|
|
1104
|
+
import React8, { useMemo as useMemo5 } from "react";
|
|
1105
|
+
import { Input as Input2, InputNumber, Select } from "@douyinfe/semi-ui";
|
|
1106
|
+
var defaultStrategies = [
|
|
1107
|
+
{
|
|
1108
|
+
hit: (schema) => schema?.type === "string",
|
|
1109
|
+
Renderer: (props) => /* @__PURE__ */ React8.createElement(Input2, { placeholder: "Please Input String", size: "small", disabled: props.readonly, ...props })
|
|
1110
|
+
},
|
|
1111
|
+
{
|
|
1112
|
+
hit: (schema) => schema?.type === "number",
|
|
1113
|
+
Renderer: (props) => /* @__PURE__ */ React8.createElement(
|
|
1114
|
+
InputNumber,
|
|
1115
|
+
{
|
|
1116
|
+
placeholder: "Please Input Number",
|
|
1117
|
+
size: "small",
|
|
1118
|
+
disabled: props.readonly,
|
|
1119
|
+
hideButtons: true,
|
|
1120
|
+
...props
|
|
1121
|
+
}
|
|
1122
|
+
)
|
|
1123
|
+
},
|
|
1124
|
+
{
|
|
1125
|
+
hit: (schema) => schema?.type === "integer",
|
|
1126
|
+
Renderer: (props) => /* @__PURE__ */ React8.createElement(
|
|
1127
|
+
InputNumber,
|
|
1128
|
+
{
|
|
1129
|
+
placeholder: "Please Input Integer",
|
|
1130
|
+
size: "small",
|
|
1131
|
+
disabled: props.readonly,
|
|
1132
|
+
hideButtons: true,
|
|
1133
|
+
precision: 0,
|
|
1134
|
+
...props
|
|
1135
|
+
}
|
|
1136
|
+
)
|
|
1137
|
+
},
|
|
1138
|
+
{
|
|
1139
|
+
hit: (schema) => schema?.type === "boolean",
|
|
1140
|
+
Renderer: (props) => {
|
|
1141
|
+
const { value, onChange, ...rest } = props;
|
|
1142
|
+
return /* @__PURE__ */ React8.createElement(
|
|
1143
|
+
Select,
|
|
1144
|
+
{
|
|
1145
|
+
placeholder: "Please Select Boolean",
|
|
1146
|
+
size: "small",
|
|
1147
|
+
disabled: props.readonly,
|
|
1148
|
+
optionList: [
|
|
1149
|
+
{ label: "True", value: 1 },
|
|
1150
|
+
{ label: "False", value: 0 }
|
|
1151
|
+
],
|
|
1152
|
+
value: value ? 1 : 0,
|
|
1153
|
+
onChange: (value2) => onChange?.(!!value2),
|
|
1154
|
+
...rest
|
|
1155
|
+
}
|
|
1156
|
+
);
|
|
1157
|
+
}
|
|
1158
|
+
}
|
|
1159
|
+
];
|
|
1160
|
+
function ConstantInput(props) {
|
|
1161
|
+
const { value, onChange, schema, strategies: extraStrategies, readonly, ...rest } = props;
|
|
1162
|
+
const strategies = useMemo5(
|
|
1163
|
+
() => [...defaultStrategies, ...extraStrategies || []],
|
|
1164
|
+
[extraStrategies]
|
|
1165
|
+
);
|
|
1166
|
+
const Renderer = useMemo5(() => {
|
|
1167
|
+
const strategy = strategies.find((_strategy) => _strategy.hit(schema));
|
|
1168
|
+
return strategy?.Renderer;
|
|
1169
|
+
}, [strategies, schema]);
|
|
1170
|
+
if (!Renderer) {
|
|
1171
|
+
return /* @__PURE__ */ React8.createElement(Input2, { size: "small", disabled: true, placeholder: "Unsupported type" });
|
|
1172
|
+
}
|
|
1173
|
+
return /* @__PURE__ */ React8.createElement(Renderer, { value, onChange, readonly, ...rest });
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
// src/components/dynamic-value-input/index.tsx
|
|
1177
|
+
import React9 from "react";
|
|
1178
|
+
import { IconButton as IconButton2 } from "@douyinfe/semi-ui";
|
|
1179
|
+
import { IconSetting } from "@douyinfe/semi-icons";
|
|
1180
|
+
|
|
1181
|
+
// src/components/dynamic-value-input/styles.tsx
|
|
1182
|
+
import styled3 from "styled-components";
|
|
1183
|
+
var UIContainer2 = styled3.div`
|
|
1184
|
+
display: flex;
|
|
1185
|
+
align-items: center;
|
|
1186
|
+
gap: 5px;
|
|
1187
|
+
`;
|
|
1188
|
+
var UIMain = styled3.div`
|
|
1189
|
+
flex-grow: 1;
|
|
1190
|
+
|
|
1191
|
+
& .semi-tree-select,
|
|
1192
|
+
& .semi-input-number,
|
|
1193
|
+
& .semi-select {
|
|
1194
|
+
width: 100%;
|
|
1195
|
+
}
|
|
1196
|
+
`;
|
|
1197
|
+
var UITrigger = styled3.div``;
|
|
1198
|
+
|
|
1199
|
+
// src/components/dynamic-value-input/index.tsx
|
|
1200
|
+
function DynamicValueInput({
|
|
1201
|
+
value,
|
|
1202
|
+
onChange,
|
|
1203
|
+
readonly,
|
|
1204
|
+
style,
|
|
1205
|
+
schema,
|
|
1206
|
+
constantProps
|
|
1207
|
+
}) {
|
|
1208
|
+
const renderMain = () => {
|
|
1209
|
+
if (value?.type === "ref") {
|
|
1210
|
+
return /* @__PURE__ */ React9.createElement(
|
|
1211
|
+
VariableSelector,
|
|
1212
|
+
{
|
|
1213
|
+
value: value?.content,
|
|
1214
|
+
onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
|
|
1215
|
+
includeSchema: schema,
|
|
1216
|
+
readonly
|
|
1217
|
+
}
|
|
1218
|
+
);
|
|
1219
|
+
}
|
|
1220
|
+
return /* @__PURE__ */ React9.createElement(
|
|
1221
|
+
ConstantInput,
|
|
1222
|
+
{
|
|
1223
|
+
value: value?.content,
|
|
1224
|
+
onChange: (_v) => onChange({ type: "constant", content: _v }),
|
|
1225
|
+
schema: schema || { type: "string" },
|
|
1226
|
+
readonly,
|
|
1227
|
+
...constantProps
|
|
1228
|
+
}
|
|
1229
|
+
);
|
|
1230
|
+
};
|
|
1231
|
+
const renderTrigger = () => /* @__PURE__ */ React9.createElement(
|
|
1232
|
+
VariableSelector,
|
|
1233
|
+
{
|
|
1234
|
+
style: { width: "100%" },
|
|
1235
|
+
value: value?.type === "ref" ? value?.content : void 0,
|
|
1236
|
+
onChange: (_v) => onChange({ type: "ref", content: _v }),
|
|
1237
|
+
includeSchema: schema,
|
|
1238
|
+
readonly,
|
|
1239
|
+
triggerRender: () => /* @__PURE__ */ React9.createElement(IconButton2, { disabled: readonly, size: "small", icon: /* @__PURE__ */ React9.createElement(IconSetting, { size: "small" }) })
|
|
1240
|
+
}
|
|
1241
|
+
);
|
|
1242
|
+
return /* @__PURE__ */ React9.createElement(UIContainer2, { style }, /* @__PURE__ */ React9.createElement(UIMain, null, renderMain()), /* @__PURE__ */ React9.createElement(UITrigger, null, renderTrigger()));
|
|
1243
|
+
}
|
|
1244
|
+
|
|
1245
|
+
// src/effects/provide-batch-input/index.ts
|
|
1246
|
+
import {
|
|
1247
|
+
ASTFactory as ASTFactory2,
|
|
1248
|
+
createEffectFromVariableProvider,
|
|
1249
|
+
getNodeForm
|
|
1250
|
+
} from "@flowgram.ai/editor";
|
|
1251
|
+
var provideBatchInputEffect = createEffectFromVariableProvider({
|
|
1252
|
+
private: true,
|
|
1253
|
+
parse: (value, ctx) => [
|
|
1254
|
+
ASTFactory2.createVariableDeclaration({
|
|
1255
|
+
key: `${ctx.node.id}_locals`,
|
|
1256
|
+
meta: {
|
|
1257
|
+
title: getNodeForm(ctx.node)?.getValueIn("title"),
|
|
1258
|
+
icon: ctx.node.getNodeRegistry().info?.icon
|
|
1259
|
+
},
|
|
1260
|
+
type: ASTFactory2.createObject({
|
|
1261
|
+
properties: [
|
|
1262
|
+
ASTFactory2.createProperty({
|
|
1263
|
+
key: "item",
|
|
1264
|
+
initializer: ASTFactory2.createEnumerateExpression({
|
|
1265
|
+
enumerateFor: ASTFactory2.createKeyPathExpression({
|
|
1266
|
+
keyPath: value.content || []
|
|
1267
|
+
})
|
|
1268
|
+
})
|
|
1269
|
+
}),
|
|
1270
|
+
ASTFactory2.createProperty({
|
|
1271
|
+
key: "index",
|
|
1272
|
+
type: ASTFactory2.createNumber()
|
|
1273
|
+
})
|
|
1274
|
+
]
|
|
1275
|
+
})
|
|
1276
|
+
})
|
|
1277
|
+
]
|
|
1278
|
+
});
|
|
1279
|
+
|
|
1280
|
+
// src/effects/provide-batch-outputs/index.ts
|
|
1281
|
+
import {
|
|
1282
|
+
ASTFactory as ASTFactory3,
|
|
1283
|
+
createEffectFromVariableProvider as createEffectFromVariableProvider2,
|
|
1284
|
+
getNodeForm as getNodeForm2
|
|
1285
|
+
} from "@flowgram.ai/editor";
|
|
1286
|
+
var provideBatchOutputsEffect = createEffectFromVariableProvider2({
|
|
1287
|
+
private: true,
|
|
1288
|
+
parse: (value, ctx) => [
|
|
1289
|
+
ASTFactory3.createVariableDeclaration({
|
|
1290
|
+
key: `${ctx.node.id}`,
|
|
1291
|
+
meta: {
|
|
1292
|
+
title: getNodeForm2(ctx.node)?.getValueIn("title"),
|
|
1293
|
+
icon: ctx.node.getNodeRegistry().info?.icon
|
|
1294
|
+
},
|
|
1295
|
+
type: ASTFactory3.createObject({
|
|
1296
|
+
properties: Object.entries(value).map(
|
|
1297
|
+
([_key, value2]) => ASTFactory3.createProperty({
|
|
1298
|
+
key: _key,
|
|
1299
|
+
initializer: ASTFactory3.createWrapArrayExpression({
|
|
1300
|
+
wrapFor: ASTFactory3.createKeyPathExpression({
|
|
1301
|
+
keyPath: value2.content || []
|
|
1302
|
+
})
|
|
1303
|
+
})
|
|
1304
|
+
})
|
|
1305
|
+
)
|
|
1306
|
+
})
|
|
1307
|
+
})
|
|
1308
|
+
]
|
|
1309
|
+
});
|
|
1310
|
+
|
|
1311
|
+
// src/utils/format-legacy-refs/index.ts
|
|
1312
|
+
import { isObject } from "lodash";
|
|
1313
|
+
function formatLegacyRefOnSubmit(value) {
|
|
1314
|
+
if (isObject(value)) {
|
|
1315
|
+
if (isLegacyFlowRefValueSchema(value)) {
|
|
1316
|
+
return formatLegacyRefToNewRef(value);
|
|
1317
|
+
}
|
|
1318
|
+
return Object.fromEntries(
|
|
1319
|
+
Object.entries(value).map(([key, value2]) => [
|
|
1320
|
+
key,
|
|
1321
|
+
formatLegacyRefOnSubmit(value2)
|
|
1322
|
+
])
|
|
1323
|
+
);
|
|
1324
|
+
}
|
|
1325
|
+
if (Array.isArray(value)) {
|
|
1326
|
+
return value.map(formatLegacyRefOnSubmit);
|
|
1327
|
+
}
|
|
1328
|
+
return value;
|
|
1329
|
+
}
|
|
1330
|
+
function formatLegacyRefOnInit(value) {
|
|
1331
|
+
if (isObject(value)) {
|
|
1332
|
+
if (isNewFlowRefValueSchema(value)) {
|
|
1333
|
+
return formatNewRefToLegacyRef(value);
|
|
1334
|
+
}
|
|
1335
|
+
return Object.fromEntries(
|
|
1336
|
+
Object.entries(value).map(([key, value2]) => [
|
|
1337
|
+
key,
|
|
1338
|
+
formatLegacyRefOnInit(value2)
|
|
1339
|
+
])
|
|
1340
|
+
);
|
|
1341
|
+
}
|
|
1342
|
+
if (Array.isArray(value)) {
|
|
1343
|
+
return value.map(formatLegacyRefOnInit);
|
|
1344
|
+
}
|
|
1345
|
+
return value;
|
|
1346
|
+
}
|
|
1347
|
+
function isLegacyFlowRefValueSchema(value) {
|
|
1348
|
+
return isObject(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
|
|
1349
|
+
}
|
|
1350
|
+
function isNewFlowRefValueSchema(value) {
|
|
1351
|
+
return isObject(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
|
|
1352
|
+
}
|
|
1353
|
+
function formatLegacyRefToNewRef(value) {
|
|
1354
|
+
const keyPath = value.content.split(".");
|
|
1355
|
+
if (keyPath[1] === "outputs") {
|
|
1356
|
+
return {
|
|
1357
|
+
type: "ref",
|
|
1358
|
+
content: [`${keyPath[0]}.${keyPath[1]}`, ...keyPath.length > 2 ? keyPath.slice(2) : []]
|
|
1359
|
+
};
|
|
1360
|
+
}
|
|
1361
|
+
return {
|
|
1362
|
+
type: "ref",
|
|
1363
|
+
content: keyPath
|
|
1364
|
+
};
|
|
1365
|
+
}
|
|
1366
|
+
function formatNewRefToLegacyRef(value) {
|
|
1367
|
+
return {
|
|
1368
|
+
type: "ref",
|
|
1369
|
+
content: value.content.join(".")
|
|
1370
|
+
};
|
|
1371
|
+
}
|
|
871
1372
|
export {
|
|
872
1373
|
ArrayIcons,
|
|
1374
|
+
BatchVariableSelector,
|
|
1375
|
+
ConstantInput,
|
|
1376
|
+
DynamicValueInput,
|
|
873
1377
|
JsonSchemaEditor,
|
|
1378
|
+
JsonSchemaUtils,
|
|
874
1379
|
TypeSelector,
|
|
875
1380
|
VariableSelector,
|
|
876
|
-
VariableTypeIcons
|
|
1381
|
+
VariableTypeIcons,
|
|
1382
|
+
formatLegacyRefOnInit,
|
|
1383
|
+
formatLegacyRefOnSubmit,
|
|
1384
|
+
formatLegacyRefToNewRef,
|
|
1385
|
+
formatNewRefToLegacyRef,
|
|
1386
|
+
getSchemaIcon,
|
|
1387
|
+
getTypeSelectValue,
|
|
1388
|
+
isLegacyFlowRefValueSchema,
|
|
1389
|
+
isNewFlowRefValueSchema,
|
|
1390
|
+
parseTypeSelectValue,
|
|
1391
|
+
provideBatchInputEffect,
|
|
1392
|
+
provideBatchOutputsEffect
|
|
877
1393
|
};
|
|
878
1394
|
//# sourceMappingURL=index.js.map
|