@chamn/engine 0.0.10 → 0.0.11

package/src/component/CSSPropertiesVariableBindEditor/index.tsx

@@ -1,366 +0,0 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { CSSPropertyList } from './cssProperties';
-
-import styles from './style.module.scss';
-
-import { AutoComplete, Button, ConfigProvider, Input, message } from 'antd';
-import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
-import { getTextWidth } from './util';
-import { BaseSelectRef } from 'rc-select';
-import { useDebounceFn } from 'ahooks';
-import clsx from 'clsx';
-import { CNodePropsTypeEnum, JSExpressionPropType } from '@chamn/model';
-import { InputStatus } from 'antd/es/_util/statusUtils';
-
-const defaultPropertyOptions = CSSPropertyList.map((el) => {
-  return {
-    value: el,
-  };
-});
-
-export type SinglePropertyEditorProps = {
-  value?: {
-    key: string;
-    value: JSExpressionPropType;
-  };
-  onValueChange: (value: { key: string; value: JSExpressionPropType }) => void;
-  onDelete?: () => void;
-  onCreate?: (value: { key: string; value: JSExpressionPropType }) => {
-    errorKey?: string[];
-  } | void;
-  mod?: 'create' | 'edit';
-};
-
-type SinglePropertyEditorRef = {
-  reset: () => void;
-};
-
-const SinglePropertyEditor = forwardRef<SinglePropertyEditorRef, SinglePropertyEditorProps>(
-  function SinglePropertyEditorCore(props, ref) {
-    const [keyFormatStatus, setKeyFormatStatus] = useState<InputStatus>('');
-    const [valueFormatStatus, setValueFormatStatus] = useState<InputStatus>('');
-
-    const { mod = 'create' } = props;
-    const [innerValue, setInnerVal] = useState<{
-      key: string;
-      value: JSExpressionPropType;
-    }>({
-      key: props.value?.key || '',
-      value: props.value?.value || {
-        type: CNodePropsTypeEnum.EXPRESSION,
-        value: '',
-      },
-    });
-
-    useEffect(() => {
-      if (props.value) {
-        setInnerVal(props.value);
-      }
-    }, [props.value]);
-
-    const [propertyOptions, setPropertyOptions] = useState(defaultPropertyOptions);
-
-    const onSearch = (searchText: string) => {
-      const newOptions = defaultPropertyOptions.filter((el) => el.value.includes(searchText));
-      if (!searchText) {
-        setPropertyOptions(defaultPropertyOptions);
-      } else {
-        setPropertyOptions(newOptions);
-      }
-    };
-
-    const updateOuterValue = () => {
-      props.onValueChange({
-        ...innerValue,
-      });
-    };
-
-    const { run: updateOuterValueDebounce } = useDebounceFn(updateOuterValue, {
-      wait: 20,
-    });
-
-    const [keyInputWidth, setKeyInputWidth] = useState(0);
-
-    useEffect(() => {
-      getTextWidth(innerValue.key, 13.33).then((w) => {
-        let tempW = parseFloat(w);
-        if (innerValue.key === '') {
-          tempW = 200;
-        }
-        setKeyInputWidth(tempW + 6);
-      });
-    }, [innerValue.key]);
-
-    const propertyKeyRef = useRef<BaseSelectRef | null>(null);
-    const [focusState, setFocusState] = useState({
-      key: false,
-      value: false,
-    });
-    useImperativeHandle(
-      ref,
-      () => {
-        return {
-          reset: () => {
-            setInnerVal({
-              key: '',
-              value: {
-                type: CNodePropsTypeEnum.EXPRESSION,
-                value: '',
-              },
-            });
-            propertyKeyRef.current?.focus();
-          },
-        };
-      },
-      []
-    );
-
-    const innerOnCreate = () => {
-      if (innerValue.key === '') {
-        setKeyFormatStatus('error');
-        return;
-      }
-      if (innerValue.value.value === '') {
-        setValueFormatStatus('error');
-        return;
-      }
-      setKeyFormatStatus('');
-      setValueFormatStatus('');
-
-      const res = props.onCreate?.(innerValue);
-      if (res?.errorKey?.includes('key')) {
-        setKeyFormatStatus('error');
-      }
-      if (res?.errorKey?.includes('value')) {
-        setValueFormatStatus('error');
-      }
-    };
-
-    return (
-      <>
-        <div className={styles.cssFieldBox}>
-          <div className={styles.leftBox}>
-            <div className={styles.row}>
-              <span className={styles.fieldLabel}>Name</span>
-              <AutoComplete
-                status={keyFormatStatus}
-                disabled={mod === 'edit'}
-                ref={propertyKeyRef}
-                onSearch={onSearch}
-                dropdownMatchSelectWidth={200}
-                value={innerValue.key}
-                onChange={(val) => {
-                  setKeyFormatStatus('');
-                  setInnerVal({
-                    ...innerValue,
-                    key: val,
-                  });
-                  updateOuterValueDebounce();
-                }}
-                style={{
-                  width: `${keyInputWidth}px`,
-                }}
-                className={clsx([styles.inputBox])}
-                onFocus={() => {
-                  setFocusState({
-                    key: true,
-                    value: false,
-                  });
-                }}
-                onBlur={() => {
-                  setFocusState({
-                    key: false,
-                    value: false,
-                  });
-                }}
-                placeholder="property"
-                options={propertyOptions}
-              />
-            </div>
-            <div className={styles.row}>
-              <span className={styles.fieldLabel}>Value</span>
-              <ConfigProvider
-                theme={{
-                  token: {
-                    borderRadius: 4,
-                  },
-                }}
-              >
-                <Input
-                  status={valueFormatStatus}
-                  value={innerValue.value.value}
-                  onChange={(e) => {
-                    setValueFormatStatus('');
-                    const newVal: {
-                      type: CNodePropsTypeEnum.EXPRESSION;
-                      value: string;
-                    } = {
-                      type: CNodePropsTypeEnum.EXPRESSION,
-                      value: e.target.value,
-                    };
-                    setInnerVal({
-                      ...innerValue,
-                      value: newVal,
-                    });
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.code === 'Enter' && mod === 'create') {
-                      innerOnCreate();
-                      propertyKeyRef.current?.focus();
-                    }
-                  }}
-                />
-              </ConfigProvider>
-            </div>
-          </div>
-          <div className={styles.rightBox}>
-            {props.onDelete && mod === 'edit' && (
-              <Button
-                size="small"
-                type="text"
-                onClick={() => {
-                  props.onDelete?.();
-                }}
-              >
-                <MinusOutlined
-                  style={{
-                    display: 'inline-flex',
-                    fontSize: '12px',
-                  }}
-                />
-              </Button>
-            )}
-          </div>
-          {props.onCreate && mod === 'create' && (
-            <div>
-              <Button
-                size="small"
-                type="text"
-                icon={
-                  <PlusOutlined
-                    style={{
-                      fontSize: '12px',
-                      display: 'inline-flex',
-                    }}
-                  />
-                }
-                onClick={innerOnCreate}
-              ></Button>
-            </div>
-          )}
-        </div>
-      </>
-    );
-  }
-);
-
-export type CSSPropertiesVariableBindEditorProps = {
-  initialValue?: { key: string; value: string }[];
-  onValueChange?: (val: { key: string; value: string }[]) => void;
-};
-export type CSSPropertiesVariableBindEditorRef = {
-  setValue: (val: { key: string; value: string }[]) => void;
-};
-
-export const CSSPropertiesVariableBindEditor = forwardRef<
-  CSSPropertiesVariableBindEditorRef,
-  CSSPropertiesVariableBindEditorProps
->(function CSSPropertiesVariableBindEditorCore(props, ref) {
-  const [propertyList, setPropertyList] = useState<{ key: string; value: any }[]>([]);
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        setValue: (val) => {
-          setPropertyList(val);
-        },
-      };
-    },
-    []
-  );
-
-  useEffect(() => {
-    if (props.initialValue) {
-      setPropertyList(props.initialValue);
-    }
-  }, []);
-
-  const [newProperty, setNewProperty] = useState({
-    key: '',
-    value: {
-      type: CNodePropsTypeEnum.EXPRESSION,
-      value: '',
-    } as JSExpressionPropType,
-  });
-
-  const innerOnValueChange = (val: typeof propertyList) => {
-    props.onValueChange?.(val);
-  };
-
-  const createPropertyRef = useRef<SinglePropertyEditorRef>(null);
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          borderRadius: 4,
-        },
-      }}
-    >
-      <div className={styles.cssBox}>
-        {propertyList.map((el, index) => {
-          return (
-            <div key={index}>
-              <SinglePropertyEditor
-                value={el}
-                mod={'edit'}
-                onValueChange={(newVal) => {
-                  if (newVal.key === '') {
-                    propertyList.splice(index, 1);
-                    setPropertyList([...propertyList]);
-                    return;
-                  }
-                  propertyList[index] = newVal;
-                  setPropertyList([...propertyList]);
-                  innerOnValueChange(propertyList);
-                }}
-                onDelete={() => {
-                  propertyList.splice(index, 1);
-                  setPropertyList([...propertyList]);
-                  innerOnValueChange(propertyList);
-                }}
-              />
-            </div>
-          );
-        })}
-
-        <SinglePropertyEditor
-          value={newProperty}
-          ref={createPropertyRef}
-          mod="create"
-          onValueChange={(newVal) => {
-            setNewProperty(newVal);
-          }}
-          onCreate={(val) => {
-            const hasExits = propertyList.find((el) => el.key === val.key);
-            if (hasExits) {
-              message.error('The attribute name already exists, please replace');
-              return {
-                errorKey: ['key'],
-              };
-            }
-            propertyList.push(val);
-            setPropertyList([...propertyList]);
-            innerOnValueChange(propertyList);
-            setNewProperty({
-              key: '',
-              value: {
-                type: CNodePropsTypeEnum.EXPRESSION,
-                value: '',
-              },
-            });
-          }}
-        />
-      </div>
-    </ConfigProvider>
-  );
-});

package/src/component/CSSPropertiesVariableBindEditor/style.module.scss

@@ -1,48 +0,0 @@
-.cssFieldBox {
-  display: flex;
-  color: $textColor !important;
-  :global {
-    .ant-select-selector input {
-      color: $textColor !important;
-    }
-  }
-  .row {
-    display: flex;
-    padding-bottom: 6px;
-    align-items: center;
-  }
-
-  .fieldLabel {
-    display: inline-block;
-    width: 70px;
-    flex-shrink: 0;
-    font-size: 12px;
-  }
-
-  .leftBox {
-    flex: 1;
-  }
-
-  .rightBox {
-    padding-left: 10px;
-  }
-  .inputBox {
-    flex: 1;
-  }
-}
-
-.cssBox {
-  overflow-x: hidden;
-  :global {
-    .ant-collapse-borderless > .ant-collapse-item {
-      border-bottom: 1px solid #e4e4e4;
-    }
-
-    .ant-collapse-borderless > .ant-collapse-item:last-child {
-      border-bottom: none;
-    }
-    .ant-collapse-content-box {
-      padding-bottom: 30px !important;
-    }
-  }
-}

package/src/component/CSSPropertiesVariableBindEditor/style.module.scss.d.ts

@@ -1,15 +0,0 @@
-import globalClassNames from '../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly cssFieldBox: 'cssFieldBox';
-  readonly 'ant-select-selector': 'ant-select-selector';
-  readonly row: 'row';
-  readonly fieldLabel: 'fieldLabel';
-  readonly leftBox: 'leftBox';
-  readonly rightBox: 'rightBox';
-  readonly inputBox: 'inputBox';
-  readonly cssBox: 'cssBox';
-  readonly 'ant-collapse-borderless': 'ant-collapse-borderless';
-  readonly 'ant-collapse-item': 'ant-collapse-item';
-  readonly 'ant-collapse-content-box': 'ant-collapse-content-box';
-};
-export = classNames;

package/src/component/CSSPropertiesVariableBindEditor/util.ts

@@ -1,19 +0,0 @@
-export const getTextWidth = async (text: string, fontSize = 14) => {
-  return new Promise<string>((resolve, reject) => {
-    const span = document.createElement('span');
-    span.innerHTML = text;
-    span.style.fontSize = `${fontSize}px`;
-    span.style.position = 'fixed';
-    span.style.left = '-1000px';
-    span.style.bottom = '-1000px';
-    span.style.display = 'inline-block';
-    document.body.appendChild(span);
-    setTimeout(() => {
-      const style = window.getComputedStyle(span);
-      resolve(style.width);
-      setTimeout(() => {
-        document.body.removeChild(span);
-      });
-    });
-  });
-};

package/src/component/ClassNameEditor/index.tsx

@@ -1,91 +0,0 @@
-import { forwardRef } from 'react';
-import { ConfigProvider } from 'antd';
-import { CustomSchemaForm } from '../CustomSchemaForm';
-import { ClassNameType, CMaterialPropsType, CNodePropsTypeEnum } from '@chamn/model';
-
-import styles from './style.module.scss';
-
-export type ClassNameEditorProps = {
-  initialValue?: { key: string; value: string }[];
-  onValueChange?: (val: ClassNameType[]) => void;
-};
-export type ClassNameEditorRef = {
-  setValue: (val: { key: string; value: string }[]) => void;
-};
-
-const properties: CMaterialPropsType = [
-  {
-    title: 'Class Names',
-    name: 'className',
-    valueType: 'array',
-    setters: [
-      {
-        componentName: 'ArraySetter',
-        props: {
-          sortLabelKey: 'name',
-          item: {
-            setters: [
-              {
-                componentName: 'ShapeSetter',
-                props: {
-                  collapse: false,
-                  elements: [
-                    {
-                      name: 'name',
-                      title: '类名',
-                      valueType: 'string',
-                      setters: ['StringSetter'],
-                    },
-                    {
-                      name: 'status',
-                      title: '启用',
-                      valueType: 'boolean',
-                      setters: ['ExpressionSetter'],
-                    },
-                  ],
-                },
-                initialValue: {},
-              },
-            ],
-            initialValue: {
-              name: '',
-              status: {
-                type: CNodePropsTypeEnum.EXPRESSION,
-                value: true,
-              },
-            },
-          },
-        },
-        initialValue: [],
-      },
-    ],
-  },
-];
-
-export const ClassNameEditor = forwardRef<ClassNameEditorRef, ClassNameEditorProps>(function CSSPropertiesEditorCore(
-  props,
-  ref
-) {
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          borderRadius: 4,
-        },
-      }}
-    >
-      <div>
-        <CustomSchemaForm
-          initialValue={[]}
-          properties={properties}
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
-          onSetterChange={function () {}}
-          onValueChange={(newVal) => {
-            props.onValueChange?.(newVal.className || []);
-          }}
-          defaultSetterConfig={{}}
-        ></CustomSchemaForm>
-      </div>
-    </ConfigProvider>
-  );
-});

package/src/component/CustomSchemaForm/components/Form/Field/index.tsx

@@ -1,81 +0,0 @@
-import React, { isValidElement, ReactNode, useEffect } from 'react';
-import styles from './style.module.scss';
-import { Tooltip } from 'antd';
-import { CFormContext } from '../context';
-export type CFieldProps = {
-  children: React.ReactNode;
-  label?: string;
-  tips?: ReactNode | (() => ReactNode);
-  name: string;
-  condition?: (formState: Record<string, any>) => boolean;
-  onConditionValueChange?: (val: boolean) => void;
-  noStyle?: boolean;
-};
-
-export const CField = (props: CFieldProps) => {
-  const { children, label, tips, name } = props;
-  let labelView: ReactNode = label;
-  const { formState, updateContext, updateConditionConfig } =
-    React.useContext(CFormContext);
-  useEffect(() => {
-    if (props.condition) {
-      updateConditionConfig(name, props.condition);
-    }
-  }, []);
-
-  useEffect(() => {
-    const condition = props.condition ?? (() => true);
-    const canRender = condition(formState);
-    props.onConditionValueChange?.(canRender);
-  }, [formState, props]);
-
-  if (tips) {
-    let newTip: any = tips;
-    if (typeof tips === 'function') {
-      newTip = tips();
-    }
-    labelView = (
-      <Tooltip
-        title={
-          <span style={{ color: 'rgba(255,255,255,0.9', fontSize: '12px' }}>
-            {newTip}
-          </span>
-        }
-        color="rgba(50,50,50,0.8)"
-      >
-        <span className={styles.tipsLabel}>{label}</span>
-      </Tooltip>
-    );
-  }
-  let newChildren = children;
-
-  if (isValidElement(children)) {
-    const extraProps: any = {
-      onValueChange: (val: any) => {
-        updateContext({
-          ...formState,
-          [name]: val,
-        });
-      },
-    };
-    if ((formState as any)[name] !== undefined) {
-      extraProps.value = (formState as any)[name];
-    }
-    newChildren = React.cloneElement(children, extraProps);
-  }
-  const condition = props.condition ?? (() => true);
-  const canRender = condition(formState);
-  if (!canRender) {
-    return null;
-  }
-  if (props.noStyle) {
-    return <>{newChildren}</>;
-  }
-
-  return (
-    <div className={styles.fieldBox}>
-      <div className={styles.label}>{labelView}</div>
-      <div className={styles.content}>{newChildren}</div>
-    </div>
-  );
-};

package/src/component/CustomSchemaForm/components/Form/Field/style.module.scss

@@ -1,32 +0,0 @@
-.fieldBox {
-  display: flex;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  flex-grow: 1;
-  min-width: 250px;
-  align-items: center;
-  .label {
-    font-size: 12px;
-    color: $textColor;
-    padding-right: 10px;
-    user-select: none;
-    width: 60px;
-    max-height: 40px;
-    word-break: break-all;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
-  }
-  .tipsLabel {
-    text-decoration-line: underline;
-    text-decoration-style: dashed;
-    text-underline-offset: 2px;
-    cursor: help;
-    word-break: break-all;
-  }
-  .content {
-    flex: 1;
-  }
-}

package/src/component/CustomSchemaForm/components/Form/Field/style.module.scss.d.ts

@@ -1,8 +0,0 @@
-import globalClassNames from '../../../../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly fieldBox: 'fieldBox';
-  readonly label: 'label';
-  readonly tipsLabel: 'tipsLabel';
-  readonly content: 'content';
-};
-export = classNames;

package/src/component/CustomSchemaForm/components/Form/context.ts

@@ -1,23 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import React from 'react';
-
-export type ContextState = Record<string, any>;
-
-export type CFormContextData = {
-  formName: string;
-  formState: ContextState;
-  conditionConfig: Record<string, (state: ContextState) => boolean>;
-  updateContext: (newState: ContextState) => void;
-  updateConditionConfig: (
-    name: string,
-    cb: (state: ContextState) => boolean
-  ) => void;
-};
-
-export const CFormContext = React.createContext<CFormContextData>({
-  formName: '',
-  formState: {},
-  conditionConfig: {},
-  updateContext: () => {},
-  updateConditionConfig: () => {},
-});