@chamn/engine 0.0.10 → 0.0.11

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

@@ -1,71 +0,0 @@
-import React from 'react';
-import { ReactNode } from 'react';
-import { CFormContext, CFormContextData, ContextState } from './context';
-
-export type CFormProps = {
-  name: string;
-  children?: ReactNode | ReactNode[];
-  initialValue?: Record<string, any>;
-  onValueChange?: (formData: Record<string, any>) => void;
-};
-export class CForm extends React.Component<CFormProps, CFormContextData> {
-  updateContext: (newState: ContextState) => void;
-
-  constructor(props: CFormProps) {
-    super(props);
-    this.updateContext = (newState: ContextState) => {
-      this.setState({
-        formState: newState,
-      });
-      this.props.onValueChange?.(this.formatValue(newState));
-    };
-    this.state = {
-      formName: props.name,
-      formState: props.initialValue ?? {},
-      conditionConfig: {},
-      updateContext: this.updateContext,
-      updateConditionConfig: (
-        name: string,
-        cb: (state: Record<string, any>) => boolean
-      ) => {
-        this.setState({
-          conditionConfig: {
-            ...this.state.conditionConfig,
-            [name]: cb,
-          },
-        });
-      },
-    };
-  }
-
-  getFieldsValue = () => {
-    return this.formatValue(this.state.formState);
-  };
-
-  setFields = (state: Record<string, any>) => {
-    this.setState({
-      formState: state,
-    });
-  };
-
-  formatValue = (data: Record<string, any>) => {
-    const res: Record<string, any> = {};
-    const conditionConfig = this.state.conditionConfig;
-    Object.keys(data).forEach((key) => {
-      const isValid = conditionConfig[key]?.(data) ?? true;
-      if (isValid) {
-        res[key] = data[key];
-      }
-    });
-    return res;
-  };
-
-  render(): ReactNode {
-    const { state } = this;
-    const { children } = this.props;
-
-    return (
-      <CFormContext.Provider value={state}>{children}</CFormContext.Provider>
-    );
-  }
-}

package/src/component/CustomSchemaForm/components/SetterSwitcher/index.tsx

@@ -1,273 +0,0 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { SetterObjType } from '@chamn/model';
-import Setters from '../Setters/index';
-import { CField, CFieldProps } from '../Form/Field';
-import { Collapse, Dropdown, MenuProps } from 'antd';
-import { SwapOutlined } from '@ant-design/icons';
-import styles from './style.module.scss';
-import { CCustomSchemaFormContext } from '../../context';
-
-export type SetterSwitcherProps = {
-  setters: SetterObjType[];
-  keyPaths: string[];
-  prefix?: React.ReactNode;
-  suffix?: React.ReactNode;
-  style?: React.CSSProperties;
-  useField?: boolean;
-} & Omit<CFieldProps, 'children'>;
-
-export const SetterSwitcher = ({ setters, keyPaths, condition, useField = true, ...props }: SetterSwitcherProps) => {
-  const [visible, setVisible] = useState(true);
-  const { onSetterChange, defaultSetterConfig, formRef, pluginCtx } = useContext(CCustomSchemaFormContext);
-
-  const [currentSetter, setCurrentSetter] = useState<SetterObjType | null>(() => {
-    const currentSetterName = defaultSetterConfig[keyPaths.join('.')]?.setter || '';
-    return setters.find((el) => el.componentName === currentSetterName) || setters[0];
-  });
-
-  let CurrentSetterComp = null;
-  if (currentSetter?.componentName) {
-    CurrentSetterComp = (Setters as any)[currentSetter?.componentName];
-  }
-
-  if (!CurrentSetterComp) {
-    CurrentSetterComp = () =>
-      (
-        <div
-          style={{
-            backgroundColor: 'whitesmoke',
-            margin: '5px 0',
-            padding: '5px',
-            borderRadius: '2px',
-            color: 'gray',
-          }}
-        >{`${currentSetter?.componentName} is not found.`}</div>
-      ) as any;
-  }
-
-  const menuItems = setters.map((setter) => {
-    const setterName = setter?.componentName || '';
-    const setterRuntime = Setters[setterName];
-    return {
-      key: setter.componentName,
-      label: setterRuntime?.setterName || setter.componentName,
-    };
-  });
-
-  const onChooseSetter: MenuProps['onClick'] = ({ key }) => {
-    const targetSetter = setters.find((setter) => setter.componentName === key);
-    if (targetSetter) {
-      setCurrentSetter(targetSetter);
-      onSetterChange?.(keyPaths, targetSetter.componentName);
-    }
-  };
-
-  let switcher: any = (
-    <div
-      className={styles.switchBtn}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-    >
-      <Dropdown
-        trigger={['click']}
-        menu={{
-          selectable: true,
-          items: menuItems,
-          onClick: onChooseSetter,
-          defaultSelectedKeys: [currentSetter?.componentName || ''],
-        }}
-      >
-        <SwapOutlined />
-      </Dropdown>
-    </div>
-  );
-
-  if (menuItems.length === 1) {
-    switcher = null;
-  }
-
-  const setterProps = useMemo(() => {
-    let newProps = {
-      ...(currentSetter?.props || {}),
-    };
-    const target = setters.find((el) => el.componentName === currentSetter?.componentName);
-    if (target) {
-      newProps = {
-        ...newProps,
-        ...target.props,
-      };
-    }
-    return newProps;
-  }, [setters]);
-
-  const setterContext = {
-    formRef,
-    pluginCtx,
-  };
-
-  const [collapseHeaderExt, setCollapseHeaderExt] = useState<any>([]);
-  const conditionProps = {
-    condition,
-    onConditionValueChange: (val: boolean) => {
-      setVisible(val);
-    },
-  };
-  let bodyView: any = null;
-  if (['ArraySetter'].includes(currentSetter?.componentName || '')) {
-    bodyView = (
-      <Collapse
-        bordered={false}
-        style={{
-          marginBottom: '10px',
-        }}
-        defaultActiveKey={[props.name]}
-      >
-        <Collapse.Panel
-          header={
-            <div className={styles.collapseHeader}>
-              <span
-                style={{
-                  flex: 1,
-                }}
-              >
-                {props.label}
-              </span>
-              {collapseHeaderExt}
-              {switcher}
-            </div>
-          }
-          key={props.name}
-        >
-          {useField && (
-            <CField {...props} noStyle {...conditionProps}>
-              <CurrentSetterComp
-                {...setterProps}
-                setterContext={{
-                  ...setterContext,
-                  keyPaths: [...keyPaths],
-                  label: props.label,
-                  setCollapseHeaderExt: setCollapseHeaderExt,
-                }}
-              />
-            </CField>
-          )}
-          {!useField && (
-            <CurrentSetterComp
-              {...setterProps}
-              setterContext={{
-                ...setterContext,
-                keyPaths: [...keyPaths],
-                label: props.label,
-                setCollapseHeaderExt: setCollapseHeaderExt,
-              }}
-            />
-          )}
-        </Collapse.Panel>
-      </Collapse>
-    );
-  } else if (['ShapeSetter'].includes(currentSetter?.componentName || '')) {
-    bodyView = (
-      <div className={styles.shapeFieldBox}>
-        {props.prefix ?? null}
-        {(currentSetter?.props as any)?.collapse === false && (
-          <div style={{ width: '100%' }}>
-            {useField && (
-              <CField {...props} noStyle {...conditionProps}>
-                <CurrentSetterComp
-                  {...setterProps}
-                  setterContext={{
-                    ...setterContext,
-                    keyPaths: [...keyPaths],
-                  }}
-                />
-              </CField>
-            )}
-            {!useField && (
-              <CurrentSetterComp
-                {...setterProps}
-                setterContext={{
-                  ...setterContext,
-                  keyPaths: [...keyPaths],
-                }}
-              />
-            )}
-          </div>
-        )}
-        {(currentSetter?.props as any)?.collapse !== false && (
-          <Collapse
-            bordered={false}
-            // defaultActiveKey={[props.name]}
-            style={{ flex: 1 }}
-          >
-            <Collapse.Panel
-              header={
-                <div className={styles.collapseHeader}>
-                  <span
-                    style={{
-                      flex: 1,
-                    }}
-                  >
-                    {props.label}
-                  </span>
-                  {switcher}
-                </div>
-              }
-              key={props.name}
-            >
-              <CField {...props} noStyle {...conditionProps}>
-                <CurrentSetterComp
-                  {...setterProps}
-                  setterContext={{
-                    ...setterContext,
-                    keyPaths: [...keyPaths],
-                  }}
-                />
-              </CField>
-            </Collapse.Panel>
-          </Collapse>
-        )}
-
-        {props.suffix ?? null}
-      </div>
-    );
-  } else {
-    bodyView = (
-      <div style={{ display: 'flex', alignItems: 'center', paddingBottom: '8px' }}>
-        {props.prefix ?? null}
-        {useField && (
-          <CField
-            {...props}
-            condition={condition}
-            onConditionValueChange={(val) => {
-              setVisible(val);
-            }}
-          >
-            <CurrentSetterComp
-              {...setterProps}
-              setterContext={{
-                ...setterContext,
-                keyPaths: [...keyPaths],
-              }}
-            />
-          </CField>
-        )}
-        {!useField && (
-          <CurrentSetterComp
-            {...setterProps}
-            setterContext={{
-              ...setterContext,
-              keyPaths: [...keyPaths],
-            }}
-          />
-        )}
-
-        {switcher}
-        {props.suffix ?? null}
-      </div>
-    );
-  }
-
-  return <div style={{ display: visible ? 'block' : 'none', overflow: 'auto' }}>{bodyView}</div>;
-};

package/src/component/CustomSchemaForm/components/SetterSwitcher/style.module.scss

@@ -1,16 +0,0 @@
-.switchBtn {
-  color: $fontColor;
-  font-size: 12px;
-  padding: 0 5px 0 10px;
-}
-
-.shapeFieldBox,
-.collapseHeader {
-  color: $fontColor;
-  display: flex;
-  font-size: 12px;
-}
-
-.collapseHeader {
-  align-items: center;
-}

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

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

package/src/component/CustomSchemaForm/components/Setters/ArraySetter/ArrayItem.tsx

@@ -1,55 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { CForm } from '../../Form';
-import { SetterSwitcher } from '../../SetterSwitcher';
-import { DeleteOutlined } from '@ant-design/icons';
-import { SetterObjType } from '@chamn/model';
-
-export function ArrayItem(props: {
-  index: number;
-  keyPaths: string[];
-  value: Record<string, any>;
-  setters: SetterObjType[];
-  style: React.CSSProperties;
-  onValueChange: (val: Record<string, any>) => void;
-  onDelete: () => void;
-}) {
-  const { index, keyPaths, setters } = props;
-
-  const style = {
-    ...props.style,
-  };
-  const objectValue = {
-    [index]: props.value,
-  };
-  const formRef = useRef<CForm>(null);
-  useEffect(() => {
-    formRef.current?.setFields({
-      [index]: props.value,
-    });
-  }, [props.value]);
-
-  return (
-    <div style={style}>
-      <CForm ref={formRef} name={String(index)} initialValue={objectValue || {}} onValueChange={props.onValueChange}>
-        <SetterSwitcher
-          suffix={
-            <div
-              onClick={props.onDelete}
-              style={{
-                marginLeft: '8px',
-                cursor: 'pointer',
-                fontSize: '12px',
-              }}
-            >
-              <DeleteOutlined />
-            </div>
-          }
-          name={String(index)}
-          label={`元素${index}`}
-          keyPaths={[...keyPaths, String(index)]}
-          setters={setters}
-        ></SetterSwitcher>
-      </CForm>
-    </div>
-  );
-}

package/src/component/CustomSchemaForm/components/Setters/ArraySetter/SortItemOrderModal.tsx

@@ -1,160 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { CSS, Transform } from '@dnd-kit/utilities';
-import { Modal, ModalProps } from 'antd';
-import {
-  DndContext,
-  DragEndEvent,
-  KeyboardSensor,
-  PointerSensor,
-  useDraggable,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable } from '@dnd-kit/sortable';
-import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
-import { getRandomStr } from '@chamn/model';
-import styles from './style.module.scss';
-
-export type SortItemOrderProps = {
-  list: any[];
-  keyPaths: string[];
-  label: string;
-  sortLabelKey?: string;
-  onValueChange?: (newList: any[]) => void;
-} & ModalProps;
-
-export const SortItemOrderModal = ({
-  list,
-  onValueChange,
-  keyPaths,
-  label,
-  sortLabelKey,
-  ...modalProps
-}: SortItemOrderProps) => {
-  const [listValue, setListValue] = useState<{ val: any; id: string }[]>([]);
-  useEffect(() => {
-    const innerList = list.map((el, index) => ({
-      val: el,
-      oldIndex: index,
-      id: getRandomStr(),
-    }));
-    setListValue(innerList);
-  }, [modalProps.open]);
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 15,
-      },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
-    if (active.id !== over?.id) {
-      const oldIndex = listValue.findIndex((el) => el.id === active?.id);
-      const newIndex = listValue.findIndex((el) => el.id === over?.id);
-      const newInnerListVal = arrayMove(listValue, oldIndex, newIndex);
-      const newVal = newInnerListVal.map((el) => {
-        return el.val;
-      });
-      setListValue(newInnerListVal);
-      onValueChange?.(newVal);
-    }
-  }
-
-  const [modalTransform, setModalTransform] = useState<Transform>({
-    x: 0,
-    y: 0,
-    scaleX: 1,
-    scaleY: 1,
-  });
-
-  return (
-    <Modal
-      {...modalProps}
-      title={`Sort:  ${label} [${keyPaths.join('.')}]`}
-      maskStyle={{
-        backgroundColor: 'rgba(0, 0, 0, 0.1)',
-      }}
-      modalRender={(modal) => {
-        return (
-          <DndContext
-            sensors={sensors}
-            onDragEnd={({ delta }) => {
-              const res = {
-                ...modalTransform,
-                ...delta,
-                x: modalTransform.x + (delta?.x || 0),
-                y: modalTransform.y + (delta?.y || 0),
-              };
-              setModalTransform(res);
-            }}
-          >
-            <ModalDragView modal={modal} transform={modalTransform} />
-          </DndContext>
-        );
-      }}
-    >
-      <div className={styles.sortModalBox}>
-        <DndContext sensors={sensors} onDragEnd={handleDragEnd} modifiers={[restrictToVerticalAxis]}>
-          <SortableContext items={listValue}>
-            {listValue.map(({ id, val }, index) => {
-              return <SortableItem key={id} id={id} index={index} label={val[sortLabelKey || '']} />;
-            })}
-          </SortableContext>
-        </DndContext>
-      </div>
-    </Modal>
-  );
-};
-
-const ModalDragView = ({ modal, transform }: { modal: React.ReactNode; transform: Transform }) => {
-  const id = useRef(getRandomStr());
-  const {
-    setNodeRef,
-    attributes,
-    listeners,
-    transform: tempTransform,
-  } = useDraggable({
-    id: id.current,
-  });
-
-  const finalTransform = {
-    ...transform,
-    ...tempTransform,
-    x: transform.x + (tempTransform?.x || 0),
-    y: transform.y + (tempTransform?.y || 0),
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={{
-        pointerEvents: 'auto',
-        transform: CSS.Transform.toString(finalTransform),
-      }}
-      {...attributes}
-      {...listeners}
-    >
-      {modal}
-    </div>
-  );
-};
-
-const SortableItem = (props: { id: string; index: string | number; label?: string }) => {
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: props.id });
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  };
-  const labelText = props.label || `Ele ${props.index}`;
-  return (
-    <div className={styles.dragItem} ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      {labelText}
-    </div>
-  );
-};

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

@@ -1,129 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Button, ConfigProvider } from 'antd';
-import { CSetterProps } from '../type';
-import { getSetterList } from '../../../utils';
-import { SetterType } from '@chamn/model';
-
-import { ArrayItem } from './ArrayItem';
-import { SortItemOrderModal } from './SortItemOrderModal';
-import styles from './style.module.scss';
-
-export type CArraySetterProps = {
-  item: {
-    setters: SetterType[];
-    initialValue?: any;
-  };
-  sortLabelKey?: string;
-};
-
-function formatValue(value: unknown) {
-  if (Array.isArray(value)) {
-    return value;
-  } else {
-    return [];
-  }
-}
-
-export const ArraySetter = ({
-  onValueChange,
-  setterContext,
-  item: { setters, initialValue },
-  sortLabelKey,
-  ...props
-}: CSetterProps<CArraySetterProps>) => {
-  const { keyPaths, label } = setterContext;
-  const listValue: any[] = useMemo(() => {
-    return formatValue(props.value);
-  }, [props.value]);
-
-  const [sortVisible, setSortVisible] = useState(false);
-  const innerSetters = getSetterList(
-    setters || [
-      {
-        component: 'StringSetter',
-      },
-    ]
-  );
-
-  useEffect(() => {
-    if (setterContext.setCollapseHeaderExt) {
-      setterContext.setCollapseHeaderExt?.(
-        <Button
-          type="text"
-          size="small"
-          style={{
-            color: 'gray',
-          }}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setSortVisible(true);
-          }}
-        >
-          sort
-        </Button>
-      );
-    }
-  }, []);
-
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          borderRadius: 4,
-        },
-      }}
-    >
-      {listValue.map((val, index) => {
-        return (
-          <ArrayItem
-            key={index}
-            style={{ paddingBottom: '10px' }}
-            index={index}
-            keyPaths={keyPaths}
-            value={val}
-            onValueChange={(val) => {
-              listValue[index] = val[index];
-              onValueChange?.([...listValue]);
-            }}
-            setters={innerSetters}
-            onDelete={() => {
-              const newVal = [...listValue];
-              newVal.splice(index);
-              onValueChange?.(newVal);
-            }}
-          />
-        );
-      })}
-
-      <Button
-        className={styles.addOneBtn}
-        size="small"
-        onClick={() => {
-          const newVal = [...listValue];
-          onValueChange?.([...newVal, initialValue ?? '']);
-        }}
-      >
-        Add One
-      </Button>
-      <SortItemOrderModal
-        label={label}
-        sortLabelKey={sortLabelKey}
-        onValueChange={(newVal) => {
-          onValueChange?.([...newVal]);
-        }}
-        open={sortVisible}
-        list={listValue}
-        keyPaths={keyPaths}
-        onCancel={() => {
-          setSortVisible(false);
-        }}
-        onOk={() => {
-          setSortVisible(false);
-        }}
-      />
-    </ConfigProvider>
-  );
-};
-
-ArraySetter.setterName = '数组设置器';