@pisell/materials 2.2.47 → 2.2.49

package/es/components/dataSourceComponents/dataSourceForm/group/index.js

@@ -0,0 +1,82 @@
+import React, { useMemo, useRef } from 'react';
+import classNames from 'classnames';
+import { Col, Row } from 'antd';
+import { useSize } from "ahooks";
+import useFormSetting from "../provider/hooks/useFormSetting";
+import usePisellConfig from "../../../pisell-config-provider/hooks/usePisellConfig";
+import "./index.less";
+/**
+ * @title: 表单分组组件
+ * @description: 用于在表单中划分分组，支持标题、描述、背景色等配置
+ * @return: *
+ * @Author: shengjie.zuo
+ * @Date: 2024-11-25 17:14:25
+ */
+var FormGroup = function FormGroup(props) {
+  var title = props.title,
+    description = props.description,
+    propsShowTitle = props.showTitle,
+    propsShowDescription = props.showDescription,
+    showBackgroundColor = props.showBackgroundColor,
+    propsBackgroundColor = props.backgroundColor,
+    children = props.children;
+  var ref = useRef(null);
+  var size = useSize(ref);
+  var _useFormSetting = useFormSetting(),
+    formSettingGroupInfoPosition = _useFormSetting.groupInfoPosition;
+  var _usePisellConfig = usePisellConfig(),
+    platform = _usePisellConfig.platform;
+
+  // 根据平台判断分组信息位置 默认移动端为top
+  var groupInfoPosition = useMemo(function () {
+    var isMobile = platform === 'h5';
+    if (isMobile || ((size === null || size === void 0 ? void 0 : size.width) || 0) < 500) {
+      return 'top';
+    }
+    return formSettingGroupInfoPosition;
+  }, [platform, formSettingGroupInfoPosition, size === null || size === void 0 ? void 0 : size.width]);
+
+  // 根据配置决定背景色是否生效
+  var backgroundColor = showBackgroundColor ? propsBackgroundColor : undefined;
+
+  // 容器样式
+  var wrapperStyle = useMemo(function () {
+    return {
+      backgroundColor: groupInfoPosition === 'side' ? undefined : backgroundColor
+    };
+  }, [groupInfoPosition, backgroundColor]);
+
+  // 内容样式
+  var contentStyle = useMemo(function () {
+    return {
+      backgroundColor: groupInfoPosition === 'side' ? backgroundColor : undefined
+    };
+  }, [groupInfoPosition, backgroundColor]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: wrapperStyle,
+    className: classNames('pisell-lowcode-data-source-form-group', {
+      'pisell-lowcode-data-source-form-group-top': groupInfoPosition === 'top',
+      'pisell-lowcode-data-source-form-group-side': groupInfoPosition === 'side'
+    }),
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Row, {
+    style: {
+      flex: 1
+    },
+    gutter: 16
+  }, /*#__PURE__*/React.createElement(Col, {
+    span: groupInfoPosition === 'top' ? 24 : 6
+  }, (propsShowTitle && title || propsShowDescription && description) && /*#__PURE__*/React.createElement("div", {
+    className: 'pisell-lowcode-data-source-form-group-info'
+  }, propsShowTitle && title && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-data-source-form-group-title"
+  }, title), propsShowDescription && description && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-data-source-form-group-description"
+  }, description))), /*#__PURE__*/React.createElement(Col, {
+    span: groupInfoPosition === 'top' ? 24 : 18
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-data-source-form-group-content",
+    style: contentStyle
+  }, children))));
+};
+export default FormGroup;

package/es/components/dataSourceComponents/dataSourceForm/group/index.less

@@ -0,0 +1,42 @@
+.pisell-lowcode-data-source-form-group {
+  display: flex;
+  padding: 20px 20px 0;
+  border-radius: 8px;
+  border: 1px solid var(--Gray-300, #d0d5dd);
+  margin-bottom: 24px;
+  .pisell-lowcode-data-source-form-group-title {
+    font-size: 18px;
+    color: #000;
+    font-weight: 600;
+    line-height: 24px;
+  }
+  .pisell-lowcode-data-source-form-group-description {
+    font-size: 14px;
+    color: #000;
+    font-weight: 400;
+    line-height: 20px;
+  }
+  &-top {
+    flex-direction: column;
+  }
+  &-side {
+    flex-direction: row;
+    border: none;
+    padding: 0;
+    .pisell-lowcode-data-source-form-group-content {
+      border: 1px solid var(--Gray-300, #d0d5dd);
+      border-radius: 8px;
+      padding: 20px 20px 0;
+    }
+  }
+  &-info {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 20px;
+  }
+  &-content {
+    flex: 1;
+  }
+}

package/es/components/dataSourceComponents/dataSourceForm/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const _default: any;
+export default _default;

package/es/components/dataSourceComponents/dataSourceForm/index.js

@@ -0,0 +1,27 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { forwardRef } from 'react';
+import DataSourceProvider from "../provider/dataSource/DataSourceProvider";
+import Form from "../../form";
+import BaseForm from "./BaseForm";
+import "./index.less";
+
+/**
+ * @title: 数据源表单组件
+ * @description: 基于数据源动态生成表单，支持编辑、查看、禁用三种模式
+ */
+var DataSourceForm = /*#__PURE__*/forwardRef(function (props, ref) {
+  var dataSource = props.dataSource,
+    currentValue = props.currentValue,
+    __designMode = props.__designMode,
+    extraParams = props.extraParams;
+  return /*#__PURE__*/React.createElement(DataSourceProvider, {
+    dataSource: dataSource,
+    currentValue: currentValue,
+    __designMode: __designMode,
+    extraParams: extraParams
+  }, /*#__PURE__*/React.createElement(BaseForm, _extends({}, props, {
+    ref: ref
+  })));
+});
+DataSourceForm.List = Form.List;
+export default DataSourceForm;

package/es/components/dataSourceComponents/dataSourceForm/index.less

@@ -0,0 +1,24 @@
+.pisell-lowcode-data-source-form {
+  
+}
+
+.pisell-lowcode-data-source-form-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 24px;
+}
+
+.pisell-lowcode-data-source-form-title {
+  color: #000;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+}
+
+.pisell-lowcode-data-source-form-description {
+  color: #000;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+}

package/es/components/dataSourceComponents/dataSourceForm/provider/formSetting/FormSettingContext.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ModeType } from '../../type';
+export interface FormSettingContextType {
+    onDataSourceFinish?: (values: any, result: any, form: any) => void;
+    renderMode?: ModeType;
+    groupInfoPosition?: 'top' | 'side';
+    children?: React.ReactNode;
+    currentValue?: 'server' | 'local';
+    size?: 'small' | 'middle' | 'large';
+    formatSubmitValues?: (values: Record<string, any>) => Record<string, any>;
+    formatInitialValues?: (values: Record<string, any>) => Record<string, any>;
+    customSubmit?: (values: Record<string, any>) => Promise<any>;
+}
+export declare const FormSettingContext: import("react").Context<FormSettingContextType>;
+export default FormSettingContext;

package/es/components/dataSourceComponents/dataSourceForm/provider/formSetting/FormSettingContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+var initialContext = {
+  renderMode: "edit",
+  size: 'large'
+};
+export var FormSettingContext = /*#__PURE__*/createContext(initialContext);
+export default FormSettingContext;

package/es/components/dataSourceComponents/dataSourceForm/provider/formSetting/FormSettingProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FormSettingContextType } from './FormSettingContext';
+/**
+ * @title: 表单设置Provider
+ * @description: 提供表单设置信息
+ */
+declare const FormSettingProvider: React.FC<FormSettingContextType>;
+export default FormSettingProvider;

package/es/components/dataSourceComponents/dataSourceForm/provider/formSetting/FormSettingProvider.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import FormSettingContext from "./FormSettingContext";
+
+/**
+ * @title: 表单设置Provider
+ * @description: 提供表单设置信息
+ */
+var FormSettingProvider = function FormSettingProvider(props) {
+  var children = props.children,
+    renderMode = props.renderMode,
+    groupInfoPosition = props.groupInfoPosition,
+    currentValue = props.currentValue,
+    size = props.size,
+    onDataSourceFinish = props.onDataSourceFinish,
+    formatSubmitValues = props.formatSubmitValues,
+    formatInitialValues = props.formatInitialValues,
+    customSubmit = props.customSubmit;
+  var value = React.useMemo(function () {
+    return {
+      renderMode: renderMode,
+      groupInfoPosition: groupInfoPosition,
+      currentValue: currentValue,
+      size: size,
+      onDataSourceFinish: onDataSourceFinish,
+      formatSubmitValues: formatSubmitValues,
+      formatInitialValues: formatInitialValues,
+      customSubmit: customSubmit
+    };
+  }, [renderMode, groupInfoPosition, currentValue, size]);
+  return /*#__PURE__*/React.createElement(FormSettingContext.Provider, {
+    value: value
+  }, children);
+};
+export default FormSettingProvider;

package/es/components/dataSourceComponents/dataSourceForm/provider/hooks/useFormSetting.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 获取表单配置
+ */
+declare const useFormSetting: () => import("../formSetting/FormSettingContext").FormSettingContextType;
+export default useFormSetting;

package/es/components/dataSourceComponents/dataSourceForm/provider/hooks/useFormSetting.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import FormSettingContext from "../formSetting/FormSettingContext";
+
+/**
+ * 获取表单配置
+ */
+var useFormSetting = function useFormSetting() {
+  var config = useContext(FormSettingContext);
+  return config;
+};
+export default useFormSetting;

package/es/components/dataSourceComponents/dataSourceForm/provider/hooks/useJsonPrefixPath.d.ts

@@ -0,0 +1,5 @@
+declare const useJsonPrefixPath: () => {
+    path: (string | number)[];
+    level: number;
+};
+export default useJsonPrefixPath;

package/es/components/dataSourceComponents/dataSourceForm/provider/hooks/useJsonPrefixPath.js

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import JsonWrapperContext from "../jsonWrapper/JsonWrapperContext";
+var useJsonPrefixPath = function useJsonPrefixPath() {
+  var prefixPath = useContext(JsonWrapperContext);
+  return prefixPath;
+};
+export default useJsonPrefixPath;

package/es/components/dataSourceComponents/dataSourceForm/provider/jsonWrapper/JsonWrapperContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const JsonWrapperContext: import("react").Context<{
+    path: (string | number)[];
+    level: number;
+}>;
+export default JsonWrapperContext;

package/es/components/dataSourceComponents/dataSourceForm/provider/jsonWrapper/JsonWrapperContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+var JsonWrapperContext = /*#__PURE__*/createContext({
+  path: [],
+  level: 0
+});
+export default JsonWrapperContext;

package/es/components/dataSourceComponents/dataSourceForm/provider/jsonWrapper/JsonWrapperProvider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface JsonWrapperProps {
+    prefix: string | number | (string | number)[];
+    name?: string;
+}
+declare const JsonWrapperProvider: React.FC<React.PropsWithChildren<JsonWrapperProps>>;
+export default JsonWrapperProvider;

package/es/components/dataSourceComponents/dataSourceForm/provider/jsonWrapper/JsonWrapperProvider.js

@@ -0,0 +1,45 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import React, { useMemo, useContext } from 'react';
+import FormItem from "../../formItem";
+import { toArr } from "../../utils";
+import JsonWrapperContext from "./JsonWrapperContext";
+var JsonWrapperProvider = function JsonWrapperProvider(props) {
+  var children = props.children,
+    prefix = props.prefix,
+    label = props.label,
+    style = props.style;
+  var _ref = useContext(JsonWrapperContext) || {},
+    _ref$path = _ref.path,
+    prefixPath = _ref$path === void 0 ? [] : _ref$path,
+    _ref$level = _ref.level,
+    level = _ref$level === void 0 ? 0 : _ref$level;
+  var concatPath = useMemo(function () {
+    return [].concat(_toConsumableArray(prefixPath), _toConsumableArray(toArr(prefix)));
+  }, [prefixPath, prefix]);
+  var contextValue = useMemo(function () {
+    return {
+      path: concatPath,
+      level: level + 1
+    };
+  }, [concatPath, level]);
+  return /*#__PURE__*/React.createElement(JsonWrapperContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(FormItem, {
+    label: label,
+    style: _objectSpread({
+      marginBottom: 0
+    }, style || {})
+  }, /*#__PURE__*/React.createElement("div", null, children)));
+};
+export default JsonWrapperProvider;

package/es/components/dataSourceComponents/dataSourceForm/serve.d.ts

@@ -0,0 +1,149 @@
+export interface DataSourceType {
+    key: string;
+    displayName: string;
+    status: string;
+    type: string;
+    isDBInstance: boolean;
+    collections: Collection[];
+}
+export declare type ActionsItem = {
+    method: string;
+    path: string;
+    params: {
+        name: string;
+        value: string;
+    }[];
+    headers: {
+        name: string;
+        value: string;
+    }[];
+    body: Record<string, any>;
+};
+export interface Collection {
+    name: string;
+    title: string;
+    tableName: string;
+    timestamps: boolean;
+    autoGenId: boolean;
+    filterTargetKey: string;
+    fields: Field[];
+    introspected: boolean;
+    unavailableActions: any[];
+    actions: {
+        get: ActionsItem;
+        update: ActionsItem;
+        create: ActionsItem;
+        delete: ActionsItem;
+        list: ActionsItem;
+    };
+}
+interface Field {
+    name: string;
+    type: string;
+    allowNull: boolean;
+    primaryKey: boolean;
+    unique: boolean;
+    autoIncrement: boolean;
+    description?: (null | string)[];
+    possibleTypes?: string[];
+    rawType: string;
+    interface: string;
+    uiSchema: UiSchema;
+    key?: string;
+    collectionName?: string;
+    collectionKey?: any;
+    dataSourceKey?: string;
+    defaultValue?: any;
+}
+interface UiSchema {
+    type?: string;
+    'x-component': string;
+    'x-component-props'?: Xcomponentprops;
+    'x-validator'?: string;
+    title: string;
+    default?: any;
+    enum?: any[];
+}
+interface Xcomponentprops {
+    style?: Style;
+    autoSize?: AutoSize;
+    stringMode?: boolean;
+    step?: string;
+    dateFormat?: string;
+    showTime?: boolean;
+}
+interface AutoSize {
+    minRows: number;
+}
+interface Style {
+    width: string;
+}
+/**
+ * 获取nocobase自定义数据源
+ */
+export declare const getNocobaseDataSource: () => Promise<DataSourceType[]>;
+/**
+ * 获取nocobase主数据源
+ */
+export declare const getNocobaseMainDataSource: () => Promise<any>;
+/**
+ * 获取nocobase数据源设置
+ */
+export declare const getNocobaseDataSourceOptions: () => Promise<any>;
+/**
+ * 创建nocobase数据
+ */
+export declare const createNocobaseData: (params: {
+    key: string;
+    data: any;
+    headers?: any;
+}) => Promise<any>;
+/**
+ * nocobase get数据
+ */
+export declare const getNocobaseData: (params: {
+    key: string;
+    query: Record<string, any>;
+    headers?: any;
+}) => Promise<any>;
+/**
+ * 自定义api接口
+ */
+export declare const customApi: (url: string, data: Record<string, any>, options: {
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+    baseUrl?: string | undefined;
+    headers?: {
+        name: string;
+        value: any;
+    }[] | undefined;
+    params?: {
+        name: string;
+        value: any;
+    }[] | undefined;
+    body?: Record<string, any> | undefined;
+}) => Promise<any>;
+/**
+ * 更新nocobase数据
+ */
+export declare const updateNocobaseData: (params: {
+    key: string;
+    data: any;
+    headers?: any;
+    query?: Record<string, any> | undefined;
+}) => Promise<any>;
+/**
+ * 获取nocobase数据列表
+ */
+export declare const getNocobaseDataList: (allParams: {
+    key: string;
+    params: {
+        page: number;
+        pageSize: number;
+    };
+    headers?: any;
+}) => Promise<any>;
+/**
+ * 删除nocobase数据
+ */
+export declare const deleteNocobaseData: (key: string, id: string, headers?: any) => Promise<any>;
+export {};