@flowgram.ai/form-materials 0.5.5 → 0.5.6

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

@@ -15,31 +15,23 @@ import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
 import { IConditionRule, ConditionOpConfigs, useCondition } from '@/components/condition-context';
 
 import { ConditionRowValueType } from './types';
-import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
+import './styles.css';
 
 interface PropTypes {
   value?: ConditionRowValueType;
   onChange: (value?: ConditionRowValueType) => void;
   style?: React.CSSProperties;
   readonly?: boolean;
+  /**
+   * @deprecated use ConditionContext instead to pass ruleConfig to multiple
+   */
   ruleConfig?: {
     ops?: ConditionOpConfigs;
     rules?: Record<string, IConditionRule>;
   };
 }
 
-const defaultRuleConfig = {
-  ops: {},
-  rules: {},
-};
-
-export function ConditionRow({
-  style,
-  value,
-  onChange,
-  readonly,
-  ruleConfig = defaultRuleConfig,
-}: PropTypes) {
+export function ConditionRow({ style, value, onChange, readonly, ruleConfig }: PropTypes) {
   const { left, operator, right } = value || {};
 
   const available = useScopeAvailable();
@@ -57,6 +49,7 @@ export function ConditionRow({
   const { rule, opConfig, opOptionList, targetSchema } = useCondition({
     leftSchema,
     operator,
+    ruleConfig,
   });
 
   const renderOpSelect = () => (
@@ -81,10 +74,10 @@ export function ConditionRow({
   );
 
   return (
-    <UIContainer style={style}>
-      <UIOperator>{renderOpSelect()}</UIOperator>
-      <UIValues>
-        <UILeft>
+    <div className="gedit-m-condition-row-container" style={style}>
+      <div className="gedit-m-condition-row-operator">{renderOpSelect()}</div>
+      <div className="gedit-m-condition-row-values">
+        <div className="gedit-m-condition-row-left">
           <InjectVariableSelector
             readonly={readonly}
             style={{ width: '100%' }}
@@ -99,8 +92,8 @@ export function ConditionRow({
               })
             }
           />
-        </UILeft>
-        <UIRight>
+        </div>
+        <div className="gedit-m-condition-row-right">
           {targetSchema ? (
             <InjectDynamicValueInput
               readonly={readonly || !rule}
@@ -116,9 +109,9 @@ export function ConditionRow({
               value={opConfig?.rightDisplay || I18n.t('Empty')}
             />
           )}
-        </UIRight>
-      </UIValues>
-    </UIContainer>
+        </div>
+      </div>
+    </div>
   );
 }
 

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

@@ -3,29 +3,28 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-
-export const UIContainer = styled.div`
+.gedit-m-condition-row-container {
   display: flex;
   align-items: center;
   gap: 4px;
-`;
+}
 
-export const UIOperator = styled.div``;
+.gedit-m-condition-row-operator {
+}
 
-export const UILeft = styled.div`
+.gedit-m-condition-row-left {
   width: 100%;
-`;
+}
 
-export const UIRight = styled.div`
+.gedit-m-condition-row-right {
   width: 100%;
-`;
+}
 
-export const UIValues = styled.div`
+.gedit-m-condition-row-values {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   overflow: hidden;
-`;
+}

package/src/components/coze-editor-extensions/extensions/variable-tag.tsx

@@ -14,7 +14,7 @@ import {
   useCurrentScope,
 } from '@flowgram.ai/editor';
 import { useInjector } from '@flowgram.ai/coze-editor/react';
-import { Popover } from '@douyinfe/semi-ui';
+import { Popover, Tag } from '@douyinfe/semi-ui';
 import { IconIssueStroked } from '@douyinfe/semi-icons';
 import {
   Decoration,
@@ -27,7 +27,7 @@ import {
 
 import { IPolyfillRoot, polyfillCreateRoot } from '@/shared';
 
-import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from '../styles';
+import '../styles.css';
 
 class VariableTagWidget extends WidgetType {
   keyPath?: string[];
@@ -56,9 +56,10 @@ class VariableTagWidget extends WidgetType {
   renderVariable(v?: BaseVariableField) {
     if (!v) {
       this.root.render(
-        <UITag prefixIcon={<IconIssueStroked />} color="amber">
-          Unknown
-        </UITag>
+        <Tag className="gedit-m-coze-editor-tag" color="amber">
+          <IconIssueStroked style={{ marginRight: '4px' }} />
+          <span>Unknown</span>
+        </Tag>
       );
       return;
     }
@@ -67,26 +68,30 @@ class VariableTagWidget extends WidgetType {
     const isRoot = v === rootField;
 
     const rootTitle = (
-      <UIRootTitle>
+      <span className="gedit-m-coze-editor-root-title">
         {rootField.meta?.title ? `${rootField.meta.title} ${isRoot ? '' : '-'} ` : ''}
-      </UIRootTitle>
+      </span>
     );
     const rootIcon = this.renderIcon(rootField?.meta.icon);
 
     this.root.render(
       <Popover
         content={
-          <UIPopoverContent>
+          <div className="gedit-m-coze-editor-popover-content">
             {rootIcon}
             {rootTitle}
-            <UIVarName>{v?.keyPath.slice(1).join('.')}</UIVarName>
-          </UIPopoverContent>
+            <span className="gedit-m-coze-editor-var-name">{v?.keyPath.slice(1).join('.')}</span>
+          </div>
         }
       >
-        <UITag prefixIcon={rootIcon}>
+        <Tag
+          className="gedit-m-coze-editor-tag"
+          style={{ display: 'inline-flex', alignItems: 'center' }}
+        >
+          {rootIcon}
           {rootTitle}
-          {!isRoot && <UIVarName>{v?.key}</UIVarName>}
-        </UITag>
+          {!isRoot && <span className="gedit-m-coze-editor-var-name">{v?.key}</span>}
+        </Tag>
       </Popover>
     );
   }

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 || {};
 
@@ -69,7 +59,8 @@ export function DBConditionRow({
   });
 
   const renderDBOptionSelect = () => (
-    <UISelect
+    <Select
+      className="gedit-m-db-condition-row-select"
       disabled={readonly}
       size="small"
       style={{ width: '100%' }}
@@ -83,10 +74,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 +107,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 +127,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

@@ -12,7 +12,7 @@ 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 {
@@ -24,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 (
@@ -45,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;
@@ -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>
   );
 }