@flowgram.ai/form-materials 0.1.0-alpha.17 → 0.1.0-alpha.19

package/src/components/coze-editor-extensions/{styles.tsx → styles.css}

@@ -3,25 +3,22 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-import { Tag } from '@douyinfe/semi-ui';
-
-export const UIRootTitle = styled.div`
+.gedit-m-coze-editor-root-title {
   margin-right: 4px;
   min-width: 20px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--semi-color-text-2);
-`;
+}
 
-export const UIVarName = styled.div`
+.gedit-m-coze-editor-var-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`;
+}
 
-export const UITag = styled(Tag)`
+.gedit-m-coze-editor-tag {
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
@@ -34,11 +31,11 @@ export const UITag = styled(Tag)`
   &.semi-tag {
     margin: 0 5px;
   }
-`;
+}
 
-export const UIPopoverContent = styled.div`
+.gedit-m-coze-editor-popover-content {
   padding: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
-`;
+}

package/src/components/db-condition-row/index.tsx

@@ -18,15 +18,7 @@ import {
 } from '@/components/condition-context';
 
 import { DBConditionOptionType, DBConditionRowValueType } from './types';
-import {
-  UIContainer,
-  UILeft,
-  UIOperator,
-  UIOptionLabel,
-  UIRight,
-  UISelect,
-  UIValues,
-} from './styles';
+import './styles.css';
 
 interface PropTypes {
   value?: DBConditionRowValueType;
@@ -34,24 +26,22 @@ interface PropTypes {
   style?: React.CSSProperties;
   options?: DBConditionOptionType[];
   readonly?: boolean;
+  /**
+   * @deprecated use ConditionContext instead to pass ruleConfig to multiple
+   */
   ruleConfig?: {
     ops?: ConditionOpConfigs;
     rules?: Record<string, IConditionRule>;
   };
 }
 
-const defaultRuleConfig = {
-  ops: {},
-  rules: {},
-};
-
 export function DBConditionRow({
   style,
   value,
   onChange,
   readonly,
   options,
-  ruleConfig = defaultRuleConfig,
+  ruleConfig,
 }: PropTypes) {
   const { left, operator, right } = value || {};
 
@@ -66,10 +56,23 @@ export function DBConditionRow({
     leftSchema,
     operator,
     ruleConfig,
+    onClearOp() {
+      onChange({
+        ...value,
+        operator: undefined,
+      });
+    },
+    onClearRight() {
+      onChange({
+        ...value,
+        right: undefined,
+      });
+    },
   });
 
   const renderDBOptionSelect = () => (
-    <UISelect
+    <Select
+      className="gedit-m-db-condition-row-select"
       disabled={readonly}
       size="small"
       style={{ width: '100%' }}
@@ -83,10 +86,10 @@ export function DBConditionRow({
       optionList={
         options?.map((item) => ({
           label: (
-            <UIOptionLabel>
+            <div className="gedit-m-db-condition-row-option-label">
               <Icon size="small" svg={typeManager.getDisplayIcon(item.schema)} />
               {item.label}
-            </UIOptionLabel>
+            </div>
           ),
           value: item.value,
         })) || []
@@ -116,11 +119,11 @@ export function DBConditionRow({
   );
 
   return (
-    <UIContainer style={style}>
-      <UIOperator>{renderOpSelect()}</UIOperator>
-      <UIValues>
-        <UILeft>{renderDBOptionSelect()}</UILeft>
-        <UIRight>
+    <div className="gedit-m-db-condition-row-container" style={style}>
+      <div className="gedit-m-db-condition-row-operator">{renderOpSelect()}</div>
+      <div className="gedit-m-db-condition-row-values">
+        <div className="gedit-m-db-condition-row-left">{renderDBOptionSelect()}</div>
+        <div className="gedit-m-db-condition-row-right">
           {targetSchema ? (
             <InjectDynamicValueInput
               readonly={readonly || !rule}
@@ -136,9 +139,9 @@ export function DBConditionRow({
               value={opConfig?.rightDisplay || I18n.t('Empty')}
             />
           )}
-        </UIRight>
-      </UIValues>
-    </UIContainer>
+        </div>
+      </div>
+    </div>
   );
 }
 

package/src/components/db-condition-row/{styles.tsx → styles.css}

@@ -3,41 +3,39 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-import { Select } from '@douyinfe/semi-ui';
-
-export const UIContainer = styled.div`
+.gedit-m-db-condition-row-container {
   display: flex;
   align-items: center;
   gap: 4px;
-`;
+}
 
-export const UIOperator = styled.div``;
+.gedit-m-db-condition-row-operator {
+}
 
-export const UILeft = styled.div`
+.gedit-m-db-condition-row-left {
   width: 100%;
-`;
+}
 
-export const UIRight = styled.div`
+.gedit-m-db-condition-row-right {
   width: 100%;
-`;
+}
 
-export const UIValues = styled.div`
+.gedit-m-db-condition-row-values {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
-`;
+}
 
-export const UIOptionLabel = styled.div`
+.gedit-m-db-condition-row-option-label {
   display: flex;
   align-items: center;
   gap: 10px;
-`;
+}
 
-export const UISelect = styled(Select)`
+.gedit-m-db-condition-row-select {
   & .semi-select-selection {
     margin-left: 5px;
   }
-`;
+}

package/src/components/db-condition-row/types.ts

@@ -9,7 +9,6 @@ import { IFlowConstantRefValue } from '@/shared';
 
 export interface DBConditionRowValueType {
   left?: string;
-  schema?: IJsonSchema;
   operator?: string;
   right?: IFlowConstantRefValue;
 }

package/src/components/display-inputs-values/index.tsx

@@ -8,14 +8,15 @@ import React, { useMemo } from 'react';
 import { isPlainObject } from 'lodash-es';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
+import { IInputsValues } from '@/shared/flow-value';
 import { FlowValueUtils } from '@/shared';
 import { DisplayFlowValue } from '@/components/display-flow-value';
 
-import { DisplayInputsWrapper } from './styles';
+import './styles.css';
 import { DisplaySchemaTag } from '../display-schema-tag';
 
 interface PropsType {
-  value?: any;
+  value?: IInputsValues;
   showIconInTree?: boolean;
 }
 
@@ -23,7 +24,7 @@ export function DisplayInputsValues({ value, showIconInTree }: PropsType) {
   const childEntries = Object.entries(value || {});
 
   return (
-    <DisplayInputsWrapper>
+    <div className="gedit-m-display-inputs-wrapper">
       {childEntries.map(([key, value]) => {
         if (FlowValueUtils.isFlowValue(value)) {
           return (
@@ -44,7 +45,7 @@ export function DisplayInputsValues({ value, showIconInTree }: PropsType) {
 
         return null;
       })}
-    </DisplayInputsWrapper>
+    </div>
   );
 }
 

package/src/components/display-inputs-values/{styles.ts → styles.css}

@@ -3,10 +3,8 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-
-export const DisplayInputsWrapper = styled.div`
+.gedit-m-display-inputs-wrapper {
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
-`;
+}

package/src/components/display-outputs/index.tsx

@@ -10,7 +10,7 @@ import { useCurrentScope, useRefresh } from '@flowgram.ai/editor';
 
 import { DisplaySchemaTag } from '@/components/display-schema-tag';
 
-import { DisplayOutputsWrapper } from './styles';
+import './styles.css';
 
 interface PropsType {
   value?: IJsonSchema;
@@ -24,7 +24,7 @@ export function DisplayOutputs({ value, showIconInTree, displayFromScope }: Prop
   const refresh = useRefresh();
 
   useEffect(() => {
-    if (!displayFromScope) {
+    if (!displayFromScope || !scope) {
       return () => null;
     }
 
@@ -38,7 +38,7 @@ export function DisplayOutputs({ value, showIconInTree, displayFromScope }: Prop
   }, [displayFromScope]);
 
   const properties: IJsonSchema['properties'] = displayFromScope
-    ? scope.output.variables?.reduce((acm, curr) => {
+    ? (scope?.output.variables || []).reduce((acm, curr) => {
         acm = {
           ...acm,
           ...(JsonSchemaUtils.astToSchema(curr.type)?.properties || {}),
@@ -50,7 +50,7 @@ export function DisplayOutputs({ value, showIconInTree, displayFromScope }: Prop
   const childEntries = Object.entries(properties || {});
 
   return (
-    <DisplayOutputsWrapper>
+    <div className="gedit-m-display-outputs-wrapper">
       {childEntries.map(([key, schema]) => (
         <DisplaySchemaTag
           key={key}
@@ -60,6 +60,6 @@ export function DisplayOutputs({ value, showIconInTree, displayFromScope }: Prop
           warning={!schema}
         />
       ))}
-    </DisplayOutputsWrapper>
+    </div>
   );
 }

package/src/components/display-outputs/{styles.ts → styles.css}

@@ -3,10 +3,8 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-
-export const DisplayOutputsWrapper = styled.div`
+.gedit-m-display-outputs-wrapper {
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
-`;
+}

package/src/components/display-schema-tag/index.tsx

@@ -6,12 +6,12 @@
 import React from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
-import { Popover } from '@douyinfe/semi-ui';
+import { Popover, Tag } from '@douyinfe/semi-ui';
 
 import { useTypeManager } from '@/plugins';
 import { DisplaySchemaTree } from '@/components/display-schema-tree';
 
-import { PopoverContent, StyledTag, TitleSpan } from './styles';
+import './styles.css';
 
 interface PropsType {
   title?: JSX.Element | string;
@@ -28,18 +28,18 @@ export function DisplaySchemaTag({ value = {}, showIconInTree, title, warning }:
   return (
     <Popover
       content={
-        <PopoverContent>
+        <div className="gedit-m-display-schema-tag-popover-content">
           <DisplaySchemaTree value={value} typeManager={typeManager} showIcon={showIconInTree} />
-        </PopoverContent>
+        </div>
       }
     >
-      <StyledTag color={warning ? 'amber' : 'white'}>
+      <Tag color={warning ? 'amber' : 'white'} className="gedit-m-display-schema-tag-tag">
         {icon &&
           React.cloneElement(icon, {
             className: 'tag-icon',
           })}
-        {title && <TitleSpan>{title}</TitleSpan>}
-      </StyledTag>
+        {title && <span className="gedit-m-display-schema-tag-title">{title}</span>}
+      </Tag>
     </Popover>
   );
 }

package/src/components/display-schema-tag/{styles.ts → styles.css}

@@ -3,26 +3,23 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-import { Tag } from '@douyinfe/semi-ui';
-
-export const PopoverContent = styled.div`
+.gedit-m-display-schema-tag-popover-content {
   padding: 10px;
-`;
+}
 
-export const StyledTag = styled(Tag)`
+.gedit-m-display-schema-tag-tag {
   padding: 4px;
 
-  .tag-icon {
+  & .tag-icon {
     width: 12px;
     height: 12px;
   }
-`;
+}
 
-export const TitleSpan = styled.span`
+.gedit-m-display-schema-tag-title {
   display: inline-block;
   margin-left: 4px;
   margin-top: -1px;
   overflow: hidden;
   text-overflow: ellipsis;
-`;
+}

package/src/components/display-schema-tree/index.tsx

@@ -11,7 +11,7 @@ import {
   useTypeManager,
 } from '@flowgram.ai/json-schema';
 
-import { HorizontalLine, TreeItem, TreeLevel, TreeRow, TreeTitle } from './styles';
+import './styles.css';
 
 interface PropsType {
   value?: IJsonSchema;
@@ -45,15 +45,15 @@ function SchemaTree(props: PropsType) {
   const childEntries = Object.entries(properties || {});
 
   return (
-    <TreeItem depth={depth} key={parentKey || 'root'}>
-      <TreeRow>
-        {depth !== 0 && <HorizontalLine />}
+    <div className={`gedit-m-display-schema-tree-item depth-${depth}`} key={parentKey || 'root'}>
+      <div className="gedit-m-display-schema-tree-row">
+        {depth !== 0 && <div className="gedit-m-display-schema-tree-horizontal-line" />}
         {showIcon &&
           icon &&
           React.cloneElement(icon, {
             className: 'tree-icon',
           })}
-        <TreeTitle>
+        <div className="gedit-m-display-schema-tree-title">
           {parentKey ? (
             <>
               {`${parentKey} (`}
@@ -63,15 +63,15 @@ function SchemaTree(props: PropsType) {
           ) : (
             title
           )}
-        </TreeTitle>
-      </TreeRow>
+        </div>
+      </div>
       {childEntries?.length ? (
-        <TreeLevel>
+        <div className="gedit-m-display-schema-tree-level">
           {childEntries.map(([key, value]) => (
             <SchemaTree key={key} {...props} parentKey={key} value={value} depth={depth + 1} />
           ))}
-        </TreeLevel>
+        </div>
       ) : null}
-    </TreeItem>
+    </div>
   );
 }

package/src/components/display-schema-tree/{styles.tsx → styles.css}

@@ -3,13 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled, { css } from 'styled-components';
-
-export const TreeRow = styled.div`
+.gedit-m-display-schema-tree-row {
   display: flex;
   align-items: center;
 
-  .tree-icon {
+  & .tree-icon {
     margin-right: 8px;
     width: 14px;
     height: 14px;
@@ -17,14 +15,14 @@ export const TreeRow = styled.div`
 
   height: 27px;
   white-space: nowrap;
-`;
+}
 
-export const HorizontalLine = styled.div`
+.gedit-m-display-schema-tree-horizontal-line {
   position: relative;
 
   &::before,
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     background-color: var(--semi-color-text-3);
   }
@@ -35,14 +33,14 @@ export const HorizontalLine = styled.div`
     width: 15px;
     height: 1px;
   }
-`;
+}
 
-export const TreeTitle = styled.div`
-  // overflow: hidden;
-  // text-overflow: ellipsis;
-`;
+.gedit-m-display-schema-tree-title {
+  /* overflow: hidden;
+  text-overflow: ellipsis; */
+}
 
-export const TreeLevel = styled.div`
+.gedit-m-display-schema-tree-level {
   padding-left: 30px;
   position: relative;
 
@@ -55,13 +53,13 @@ export const TreeLevel = styled.div`
     left: -22px;
     width: 1px;
   } */
-`;
+}
 
-export const TreeItem = styled.div<{ depth: number }>`
+.gedit-m-display-schema-tree-item {
   position: relative;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     background-color: var(--semi-color-text-3);
   }
@@ -80,11 +78,7 @@ export const TreeItem = styled.div<{ depth: number }>`
     left: -22px;
   }
 
-  ${(props) =>
-    props.depth === 0 &&
-    css`
-      &::before {
-        width: 0px !important;
-      }
-    `}
-`;
+  &.depth-0::before {
+    width: 0px !important;
+  }
+}

package/src/components/dynamic-value-input/index.tsx

@@ -20,7 +20,7 @@ import { InjectVariableSelector } from '@/components/variable-selector';
 import { TypeSelector } from '@/components/type-selector';
 import { ConstantInput, ConstantInputStrategy } from '@/components/constant-input';
 
-import { UIContainer, UIMain, UITrigger, UIType } from './styles';
+import './styles.css';
 import { useIncludeSchema, useRefVariable, useSelectSchema } from './hooks';
 
 interface PropsType {
@@ -144,11 +144,11 @@ export function DynamicValueInput({
   );
 
   return (
-    <UIContainer style={style}>
-      <UIType>{renderTypeSelector()}</UIType>
-      <UIMain>{renderMain()}</UIMain>
-      <UITrigger>{renderTrigger()}</UITrigger>
-    </UIContainer>
+    <div className="gedit-m-dynamic-value-input-container" style={style}>
+      <div className="gedit-m-dynamic-value-input-type">{renderTypeSelector()}</div>
+      <div className="gedit-m-dynamic-value-input-main">{renderMain()}</div>
+      <div className="gedit-m-dynamic-value-input-trigger">{renderTrigger()}</div>
+    </div>
   );
 }
 

package/src/components/dynamic-value-input/{styles.tsx → styles.css}

@@ -3,20 +3,17 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-
-export const UIContainer = styled.div`
+.gedit-m-dynamic-value-input-container {
   display: flex;
   align-items: center;
   border-radius: 4px;
   border: 1px solid var(--semi-color-border);
-
+  line-height: normal;
   overflow: hidden;
-
   background-color: var(--semi-color-fill-0);
-`;
+}
 
-export const UIMain = styled.div`
+.gedit-m-dynamic-value-input-main {
   flex-grow: 1;
   overflow: hidden;
   min-width: 0;
@@ -47,16 +44,16 @@ export const UIMain = styled.div`
     border-radius: 0;
     word-break: break-all;
   }
-`;
+}
 
-export const UIType = styled.div`
+.gedit-m-dynamic-value-input-type {
   & .semi-button {
     border-radius: 0;
   }
-`;
+}
 
-export const UITrigger = styled.div`
+.gedit-m-dynamic-value-input-trigger {
   & .semi-button {
     border-radius: 0;
   }
-`;
+}

package/src/components/inputs-values/index.tsx

@@ -15,7 +15,7 @@ import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
 import { BlurInput } from '@/components/blur-input';
 
 import { PropsType } from './types';
-import { UIRow, UIRows } from './styles';
+import './styles.css';
 
 export function InputsValues({
   value,
@@ -34,9 +34,9 @@ export function InputsValues({
 
   return (
     <div>
-      <UIRows style={style}>
+      <div className="gedit-m-inputs-values-rows" style={style}>
         {list.map((item) => (
-          <UIRow key={item.id}>
+          <div className="gedit-m-inputs-values-row" key={item.id}>
             <BlurInput
               style={{ width: 100, minWidth: 100, maxWidth: 100 }}
               disabled={readonly}
@@ -64,9 +64,9 @@ export function InputsValues({
               size="small"
               onClick={() => remove(item.id)}
             />
-          </UIRow>
+          </div>
         ))}
-      </UIRows>
+      </div>
       <Button
         disabled={readonly}
         icon={<IconPlus />}

package/src/components/inputs-values/{styles.tsx → styles.css}

@@ -3,17 +3,15 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-
-export const UIRows = styled.div`
+.gedit-m-inputs-values-rows {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 10px;
-`;
+}
 
-export const UIRow = styled.div`
+.gedit-m-inputs-values-row {
   display: flex;
   align-items: flex-start;
   gap: 5px;
-`;
+}