@chamn/engine 0.0.10 → 0.0.11

package/src/component/CustomSchemaForm/components/Setters/ArraySetter/style.module.scss

@@ -1,22 +0,0 @@
-.dragItem {
-  cursor: grab;
-  border: 1px solid $borderColor;
-  background-color: white;
-  padding: 10px;
-  text-align: center;
-  margin-bottom: 10px;
-  font-size: $fontSizeSmall;
-  border-radius: $borderRadius;
-}
-
-.sortModalBox {
-  padding: 20px 10px 10px;
-  overflow: auto;
-  max-height: 500px;
-}
-
-.addOneBtn {
-  width: 100%;
-  font-size: $fontSizeSmall !important;
-  color: $fontColor;
-}

package/src/component/CustomSchemaForm/components/Setters/ArraySetter/style.module.scss.d.ts

@@ -1,7 +0,0 @@
-import globalClassNames from '../../../../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly dragItem: 'dragItem';
-  readonly sortModalBox: 'sortModalBox';
-  readonly addOneBtn: 'addOneBtn';
-};
-export = classNames;

package/src/component/CustomSchemaForm/components/Setters/BooleanSetter/index.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { ConfigProvider, Switch, SwitchProps } from 'antd';
-import { CSetter, CSetterProps } from '../type';
-
-type BooleanSetterProps = SwitchProps;
-
-export const BooleanSetter: CSetter<BooleanSetterProps> = ({
-  onValueChange,
-  setterContext,
-  ...props
-}: CSetterProps<BooleanSetterProps>) => {
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          borderRadius: 4,
-        },
-      }}
-    >
-      <Switch
-        {...props}
-        checked={props.value as boolean}
-        onChange={(open, e) => {
-          props.onChange?.(open, e);
-          onValueChange?.(open);
-        }}
-      />
-    </ConfigProvider>
-  );
-};
-
-BooleanSetter.setterName = 'Bool 设置器';

package/src/component/CustomSchemaForm/components/Setters/CSSValueSetter/index.tsx

@@ -1,78 +0,0 @@
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { AutoComplete, ConfigProvider, Input, InputProps } from 'antd';
-import { CSetter, CSetterProps } from '../type';
-import { BaseSelectRef } from 'rc-select';
-import { useDebounceFn } from 'ahooks';
-import clsx from 'clsx';
-import styles from './style.module.scss';
-import { CSSProperties, CSSPropertiesKey } from '../../../../CSSPropertiesEditor/cssProperties';
-
-type CSSValueSetterProps = {
-  propertyKey: string;
-};
-
-export const CSSValueSetter: CSetter<CSSValueSetterProps> = ({
-  onValueChange,
-  setterContext,
-  propertyKey = '',
-  value,
-  ...props
-}: CSetterProps<CSSValueSetterProps>) => {
-  const { keyPaths, onSetterChange } = setterContext;
-  const propertyValueRef = useRef<BaseSelectRef | null>(null);
-  const [innerValue, setInnerVal] = useState<any>(value || '');
-  const [focusState, setFocusState] = useState(false);
-  const updateOuterValue = () => {
-    onValueChange?.(innerValue);
-  };
-  useLayoutEffect(() => {
-    setInnerVal(value);
-  }, [value]);
-  const { run: updateOuterValueDebounce } = useDebounceFn(updateOuterValue, {
-    wait: 10,
-  });
-
-  const optionsValue = useMemo(() => {
-    const list = CSSProperties[propertyKey as unknown as CSSPropertiesKey]?.values || [];
-    return list.map((el) => {
-      return {
-        value: el,
-      };
-    });
-  }, [propertyKey]);
-
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          borderRadius: 4,
-        },
-      }}
-    >
-      <AutoComplete
-        ref={propertyValueRef}
-        dropdownMatchSelectWidth={200}
-        bordered={false}
-        value={innerValue}
-        onChange={(val) => {
-          setInnerVal(val);
-          updateOuterValueDebounce();
-        }}
-        style={{
-          flex: 1,
-        }}
-        onFocus={() => {
-          setFocusState(true);
-        }}
-        onBlur={() => {
-          setFocusState(false);
-        }}
-        className={clsx([styles.inputAuto, focusState && styles.active])}
-        placeholder="value"
-        options={optionsValue}
-      ></AutoComplete>
-    </ConfigProvider>
-  );
-};
-
-CSSValueSetter.setterName = 'CSS值设置器';

package/src/component/CustomSchemaForm/components/Setters/CSSValueSetter/style.module.scss

@@ -1,7 +0,0 @@
-.inputAuto {
-  border-bottom: 1px solid rgba(128, 128, 128, 0.23);
-}
-
-.active {
-  border-bottom: 1px solid rgb(128, 177, 255);
-}

package/src/component/CustomSchemaForm/components/Setters/CSSValueSetter/style.module.scss.d.ts

@@ -1,6 +0,0 @@
-import globalClassNames from '../../../../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly inputAuto: 'inputAuto';
-  readonly active: 'active';
-};
-export = classNames;

package/src/component/CustomSchemaForm/components/Setters/ExpressionSetter/index.tsx

@@ -1,47 +0,0 @@
-import { ConfigProvider, Input, InputProps } from 'antd';
-import { CSetter, CSetterProps } from '../type';
-import { CNodePropsTypeEnum } from '@chamn/model';
-
-export const ExpressionSetter: CSetter<
-  InputProps & {
-    value: {
-      type: string;
-      value: string;
-    };
-  }
-> = ({
-  onValueChange,
-  setterContext,
-  ...props
-}: CSetterProps<
-  InputProps & {
-    value: {
-      type: string;
-      value: string;
-    };
-  }
->) => {
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          borderRadius: 4,
-        },
-      }}
-    >
-      <Input
-        {...props}
-        value={props.value?.value || ''}
-        onChange={(e) => {
-          props.onChange?.(e);
-          onValueChange?.({
-            type: CNodePropsTypeEnum.EXPRESSION,
-            value: e.target.value,
-          });
-        }}
-      />
-    </ConfigProvider>
-  );
-};
-
-ExpressionSetter.setterName = '表达式设置器';

package/src/component/CustomSchemaForm/components/Setters/FunctionSetter/defaultDts.ts

@@ -1,28 +0,0 @@
-export const DefaultTslibSource = `
-type ContextType = {
-  /** 渲染函数的入口参数 */
-  params?: Record<any, any>;
-  /** 全局状态 */
-  globalState?: Record<any, any>;
-  /** 更新全局状态 */
-  updateGlobalState?: (newState: any) => void;
-  /** 当前节点状态 **/
-  state?: Record<any, any>;
-  /** 存储当前节点的数据，不具有响应性 **/
-  staticState?: Record<any, any>;
-  /** 更新当前节点状态 */
-  updateState?: (newState: any) => void;
-  /** 所有节点的索引 */
-  refs?: RefManager;
-  /** 循环渲染中的单个循环数据 */
-  loopData?: Record<any, any>;
-  /**  用于访访问和管理页面被注册为全局的局部 state */
-  stateManager?: Record<string, {
-    state: any,
-    updateState: (newState: Record<string, any>) => void
-  }>;
-};
-
-/** 渲染上下文 */
-declare var $$context: ContextType;
-`;

package/src/component/CustomSchemaForm/components/Setters/FunctionSetter/index.tsx

@@ -1,93 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { Button, ConfigProvider, Modal } from 'antd';
-import { CSetter, CSetterProps } from '../type';
-import { MonacoEditor, MonacoEditorInstance } from '../../../../MonacoEditor';
-import { DefaultTslibSource } from './defaultDts';
-import { CNodePropsTypeEnum } from '@chamn/model';
-
-export const FunctionSetter: CSetter<any> = ({ onValueChange, setterContext, ...props }: CSetterProps<any>) => {
-  const editorRef = useRef<MonacoEditorInstance | null>(null);
-  const [open, setOpen] = useState(false);
-  const onInnerValueChange = () => {
-    const newValStr = editorRef.current?.getValue() || '';
-    onValueChange({
-      type: CNodePropsTypeEnum.FUNCTION,
-      value: newValStr,
-    });
-  };
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          borderRadius: 4,
-        },
-      }}
-    >
-      <Button
-        size="small"
-        style={{
-          marginTop: '5px',
-          width: '100%',
-          color: '#676767',
-          fontSize: '12px',
-        }}
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
-        Edit
-      </Button>
-      <Modal
-        destroyOnClose
-        open={open}
-        title="Function Editor"
-        width="800px"
-        onCancel={() => setOpen(false)}
-        onOk={() => {
-          onInnerValueChange();
-          setOpen(false);
-        }}
-        style={{}}
-      >
-        <div style={{ height: '500px' }}>
-          {open && (
-            <MonacoEditor
-              beforeMount={(monaco) => {
-                monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-                  noSemanticValidation: true,
-                  noSyntaxValidation: false,
-                });
-
-                // compiler options
-                monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-                  target: monaco.languages.typescript.ScriptTarget.ES5,
-                  allowNonTsExtensions: true,
-                });
-
-                const libUri = 'ts:filename/chameleon.default.variable.d.ts';
-                monaco.languages.typescript.javascriptDefaults.addExtraLib(DefaultTslibSource, libUri);
-                // When resolving definitions and references, the editor will try to use created models.
-                // Creating a model for the library allows "peek definition/references" commands to work with the library.
-                const model = monaco.editor.getModel(monaco.Uri.parse(libUri));
-                if (!model) {
-                  monaco.editor.createModel(DefaultTslibSource, 'typescript', monaco.Uri.parse(libUri));
-                }
-              }}
-              onDidMount={(editor) => {
-                editorRef.current = editor;
-              }}
-              initialValue={props.value?.value || ''}
-              language={'javascript'}
-              options={{
-                automaticLayout: true,
-                tabSize: 2,
-              }}
-            />
-          )}
-        </div>
-      </Modal>
-    </ConfigProvider>
-  );
-};
-
-FunctionSetter.setterName = '函数 设置器';

package/src/component/CustomSchemaForm/components/Setters/JSONSetter/index.tsx

@@ -1,80 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { Button, ConfigProvider, Modal } from 'antd';
-import { CSetter, CSetterProps } from '../type';
-import { MonacoEditor, MonacoEditorInstance } from '../../../../MonacoEditor';
-
-export const JSONSetter: CSetter<any> = ({
-  onValueChange,
-  setterContext,
-  ...props
-}: CSetterProps<any>) => {
-  const { keyPaths, onSetterChange } = setterContext;
-
-  const editorRef = useRef<MonacoEditorInstance | null>(null);
-
-  const [open, setOpen] = useState(false);
-  const onInnerValueChange = () => {
-    const newValStr = editorRef.current?.getValue() || '';
-    try {
-      const newVal = JSON.parse(newValStr);
-      onValueChange(newVal);
-    } catch (e) {
-      console.warn(e);
-    }
-  };
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          borderRadius: 4,
-        },
-      }}
-    >
-      <Button
-        size="small"
-        style={{
-          marginTop: '5px',
-          width: '100%',
-          color: '#676767',
-          fontSize: '12px',
-        }}
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
-        Edit
-      </Button>
-      <Modal
-        destroyOnClose
-        open={open}
-        title="JSON Editor"
-        width="800px"
-        onCancel={() => setOpen(false)}
-        onOk={() => {
-          onInnerValueChange();
-          setOpen(false);
-        }}
-        style={{}}
-      >
-        <div style={{ height: '500px' }}>
-          {open && (
-            <MonacoEditor
-              onDidMount={(editor) => {
-                editorRef.current = editor;
-              }}
-              initialValue={JSON.stringify(props.value || {}, null, 2)}
-              language={'json'}
-              options={{
-                automaticLayout: true,
-                tabSize: 2,
-                suggestOnTriggerCharacters: false,
-              }}
-            />
-          )}
-        </div>
-      </Modal>
-    </ConfigProvider>
-  );
-};
-
-JSONSetter.setterName = 'JSON 设置器';

package/src/component/CustomSchemaForm/components/Setters/NumberSetter/index.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { ConfigProvider, InputNumber, InputNumberProps } from 'antd';
-import { CSetter, CSetterProps } from '../type';
-
-export const NumberSetter: CSetter<InputNumberProps> = ({
-  onValueChange,
-  setterContext,
-  ...props
-}: CSetterProps<InputNumberProps>) => {
-  const { keyPaths, onSetterChange } = setterContext;
-
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          borderRadius: 4,
-        },
-      }}
-    >
-      <InputNumber
-        style={{
-          width: '100%',
-        }}
-        {...props}
-        onChange={(value) => {
-          props.onChange?.(value);
-          onValueChange?.(value);
-        }}
-      />
-    </ConfigProvider>
-  );
-};
-
-NumberSetter.setterName = '数字设置器';

package/src/component/CustomSchemaForm/components/Setters/SelectSetter/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { ConfigProvider, Select, SelectProps } from 'antd';
-import { CSetter, CSetterProps } from '../type';
-
-export const SelectSetter: CSetter<SelectProps> = ({
-  onValueChange,
-  setterContext,
-  ...props
-}: CSetterProps<SelectProps>) => {
-  const { keyPaths, onSetterChange } = setterContext;
-
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          borderRadius: 4,
-        },
-      }}
-    >
-      <Select
-        showSearch
-        style={{
-          width: '100%',
-        }}
-        {...props}
-        onChange={(val, option) => {
-          props.onChange?.(val, option);
-          onValueChange?.(val);
-        }}
-      />
-    </ConfigProvider>
-  );
-};
-
-SelectSetter.setterName = '选择设置器';

package/src/component/CustomSchemaForm/components/Setters/ShapeSetter/index.tsx

@@ -1,65 +0,0 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import { ConfigProvider } from 'antd';
-import { CSetter, CSetterProps } from '../type';
-import { CForm } from '../../Form';
-import { SetterSwitcher } from '../../SetterSwitcher';
-import { getSetterList } from '../../../utils';
-import { getMTitle, getMTitleTip, MaterialPropType } from '@chamn/model';
-
-export type CShapeSetterProps = {
-  elements: MaterialPropType[];
-  initialValue?: Record<string, any>;
-  value: Record<string, any>;
-};
-
-export const ShapeSetter: CSetter<CShapeSetterProps> = ({
-  onValueChange,
-  elements,
-  value,
-  setterContext,
-}: CSetterProps<CShapeSetterProps>) => {
-  const { keyPaths } = setterContext;
-  const formRef = useRef<CForm>(null);
-  useEffect(() => {
-    formRef.current?.setFields(value || {});
-  }, [value]);
-
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          borderRadius: 4,
-        },
-      }}
-    >
-      <CForm
-        ref={formRef}
-        name={keyPaths.join('.')}
-        initialValue={value || {}}
-        onValueChange={(val) => {
-          onValueChange?.(val);
-        }}
-      >
-        {elements.map((el, index) => {
-          const setters = getSetterList(el.setters);
-          const title = getMTitle(el.title);
-          const tip = getMTitleTip(el.title);
-          return (
-            <div key={index}>
-              <SetterSwitcher
-                name={el.name}
-                label={title}
-                tips={tip}
-                condition={el.condition}
-                keyPaths={[...keyPaths, el.name]}
-                setters={setters}
-              />
-            </div>
-          );
-        })}
-      </CForm>
-    </ConfigProvider>
-  );
-};
-
-ShapeSetter.setterName = '对象设置器';

package/src/component/CustomSchemaForm/components/Setters/StringSetter/index.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { ConfigProvider, Input, InputProps } from 'antd';
-import { CSetter, CSetterProps } from '../type';
-
-export const StringSetter: CSetter<InputProps> = ({
-  onValueChange,
-  setterContext,
-  ...props
-}: CSetterProps<InputProps>) => {
-  const { keyPaths, onSetterChange } = setterContext;
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          borderRadius: 4,
-        },
-      }}
-    >
-      <Input
-        {...props}
-        onChange={(e) => {
-          props.onChange?.(e);
-          onValueChange?.(e.target.value);
-        }}
-      />
-    </ConfigProvider>
-  );
-};
-
-StringSetter.setterName = '字符设置器';

package/src/component/CustomSchemaForm/components/Setters/TextAreaSetter/index.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { ConfigProvider, Input } from 'antd';
-import { CSetter, CSetterProps } from '../type';
-import { TextAreaProps } from 'antd/es/input';
-
-export const TextAreaSetter: CSetter<TextAreaProps> = ({
-  onValueChange,
-  setterContext,
-  ...props
-}: CSetterProps<TextAreaProps>) => {
-  const { keyPaths, onSetterChange } = setterContext;
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          borderRadius: 4,
-        },
-      }}
-    >
-      <Input.TextArea
-        {...props}
-        onChange={(e) => {
-          props.onChange?.(e);
-          onValueChange?.(e.target.value);
-        }}
-      />
-    </ConfigProvider>
-  );
-};
-
-TextAreaSetter.setterName = '长文本设置器';

package/src/component/CustomSchemaForm/components/Setters/index.ts

@@ -1,26 +0,0 @@
-import { CSetter } from './type';
-import { StringSetter } from './StringSetter';
-import { NumberSetter } from './NumberSetter';
-import { ArraySetter } from './ArraySetter';
-import { ShapeSetter } from './ShapeSetter';
-import { ExpressionSetter } from './ExpressionSetter';
-import { BooleanSetter } from './BooleanSetter';
-import { SelectSetter } from './SelectSetter';
-import { JSONSetter } from './JSONSetter';
-import { FunctionSetter } from './FunctionSetter';
-import { TextAreaSetter } from './TextAreaSetter';
-import { CSSValueSetter } from './CSSValueSetter';
-
-export default {
-  StringSetter,
-  ArraySetter,
-  ShapeSetter,
-  NumberSetter,
-  ExpressionSetter,
-  BooleanSetter,
-  SelectSetter,
-  JSONSetter,
-  FunctionSetter,
-  TextAreaSetter,
-  CSSValueSetter,
-} as Record<string, CSetter>;

package/src/component/CustomSchemaForm/components/Setters/type.ts

@@ -1,18 +0,0 @@
-import { CPluginCtx } from '../../../../core/pluginManager';
-
-export type CSetter<T = any> = {
-  (props: CSetterProps<T>): JSX.Element;
-  setterName: string;
-};
-
-export type CSetterProps<T = { _: any }> = {
-  onValueChange?: ((val: any) => void) | undefined;
-  value?: unknown;
-  setterContext: {
-    pluginCtx: CPluginCtx;
-    setCollapseHeaderExt?: (el: React.ReactNode) => void;
-    onSetterChange: (keyPaths: string[], setterName: string) => void;
-    keyPaths: string[];
-    label: string;
-  };
-} & T;

package/src/component/CustomSchemaForm/context.ts

@@ -1,20 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import React, { Ref } from 'react';
-import { CustomSchemaFormInstance } from '.';
-import { CPluginCtx } from '../../core/pluginManager';
-import { CForm } from './components/Form';
-
-export type ContextState = Record<string, any>;
-
-export type CCustomSchemaFormContextData = {
-  onSetterChange: (keyPaths: string[], setterName: string) => void;
-  defaultSetterConfig: Record<string, { name: string; setter: string }>;
-  formRef?: Ref<CustomSchemaFormInstance | CForm>;
-  pluginCtx?: CPluginCtx;
-};
-
-export const CCustomSchemaFormContext =
-  React.createContext<CCustomSchemaFormContextData>({
-    defaultSetterConfig: {},
-    onSetterChange: () => {},
-  });