vap1 0.0.1

package/components/Trees/index.d.ts

@@ -0,0 +1,134 @@
+import type { ReactNode } from 'react';
+import type { Key, PlainObject } from '../../basetype';
+import type { BaseTreeOpts } from '../../utils/TreeUtil';
+import type { UFormField, UFormFieldGroup } from '../UForm';
+export { STree } from './STree';
+export { DTree } from './DTree';
+export { FTree } from './FTree';
+/**
+ * 基础参数
+*/
+export type BaseTreeProps = BaseTreeOpts & {
+    /**
+     * 自定义 className
+    */
+    className?: string;
+    /**
+     * 树显示Icon字段 ，默认为空，传入后，以此字段显示图标
+    */
+    iconField?: string | ((item: any) => ReactNode);
+    /**
+     * title 字段，传字段名称。
+     * 如果需要支持 i18n ，则传一个对象，支持3个字段
+    */
+    titleField: string | {
+        /**
+         * 简体中文使用名称字段
+        */
+        zhCN?: string;
+        /**
+         * 英语名称字段
+        */
+        enUS?: string;
+        /**
+         * 繁体中文使用名称字段
+        */
+        zhHK?: string;
+    };
+    /**
+     * 是否默认展开所有结点
+    */
+    defaultExpandAll?: boolean;
+    /**
+     * 是否必选，
+    */
+    mustSelect?: boolean;
+    /**
+     * 是否禁用树
+     * 禁用后无法进行 select 操作
+     *  */
+    disabled?: boolean;
+    /**
+     * 是否禁用结点，返回true为禁用
+    */
+    disabledNode?: (node: PlainObject) => boolean;
+    /**
+     * 选中后的回调函数
+     * 参数1 ： key
+     * 参数2 ： 选中的对象，可能会返回空
+     * 参数3 :  选中对象的父节点
+     * 参数4 :  选中对象的位置
+    */
+    onSelect?: (key: Key, node: PlainObject, parentNode: PlainObject, crumb: PlainObject[], pos: number[]) => void;
+    /**
+     * 搜索关键字
+    */
+    searchValue?: string;
+};
+export type ActionProps = {
+    /**
+     * 对象的 Label
+    */
+    objectName?: string;
+    /**
+     * 对象Label 的 i18nKey
+    */
+    ik?: string;
+    /**
+     * 添加、修改、删除的接口
+     * 需要符合VAP规范
+     * 必须传些参数才有 CRUD功能
+    */
+    api?: string;
+    /**
+     * 是否可以插入节点
+    */
+    canAdd?: boolean;
+    /**
+     * 是否允许插入根节点
+    */
+    canAddRoot?: boolean;
+    /**
+     * 是否允许修改节点
+    */
+    canUpdate?: boolean;
+    /**
+     * 是否允许修改根节点
+    */
+    canUpdateRoot?: boolean;
+    /**
+     * 是否可以删除节点
+    */
+    canDelete?: boolean;
+    /**
+     * 是否支持排序
+    */
+    canSort?: boolean;
+    /**
+     * 添加编辑，使用UForm,如果不传，则自动使用 key,title,parent,icon,
+    */
+    formFields?: (UFormField[]) | (UFormFieldGroup[]);
+    /**
+     * 添加编辑一个节点时，给默认值
+    */
+    formDefault?: PlainObject | ((selectNode: PlainObject) => PlainObject);
+    /**
+     * 是否去缓存，默认缓存，如果强制不缓存，则传 notCache = true
+    */
+    notCache?: boolean;
+    /**
+     * 说明，当api 的key 与 id 不同时，可指定 idForApiField，
+     * 可用于编辑，排序，删除
+    */
+    idForApiField?: string;
+};
+/**
+ * 说明 针对节点进行操作
+ * 说明，节点信息，位置信息，可通过 onSelect 方法的第五个参数可以拿到
+*/
+export type ActionRef = {
+    updateData: (node: PlainObject, pos: number[]) => void;
+    update: (node: PlainObject, pos: number[]) => Promise<void>;
+    del: (node: PlainObject, pos: number[]) => Promise<void>;
+    add: (node: PlainObject, pos: number[]) => void;
+};

package/components/Trees/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FTree = exports.DTree = exports.STree = void 0;
+var STree_1 = require("./STree");
+Object.defineProperty(exports, "STree", { enumerable: true, get: function () { return STree_1.STree; } });
+var DTree_1 = require("./DTree");
+Object.defineProperty(exports, "DTree", { enumerable: true, get: function () { return DTree_1.DTree; } });
+var FTree_1 = require("./FTree");
+Object.defineProperty(exports, "FTree", { enumerable: true, get: function () { return FTree_1.FTree; } });

package/components/UForm/FormWrapper.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { UFromProps } from './index';
+import type { MutableRefObject, PropsWithChildren } from 'react';
+export type FormState = {
+    width: number;
+    cols: 1 | 2 | 3;
+    isGroup: boolean;
+    colSpan: number;
+    labelSpan: number;
+    inputSpan: number;
+    maxLabel: number;
+    hiddenFields: MutableRefObject<Set<string>>;
+    disableFields: MutableRefObject<Set<string>>;
+    multipleFields: MutableRefObject<Set<string>>;
+    requireFields: MutableRefObject<Map<string, boolean>>;
+    optionFields: MutableRefObject<Map<string, any[]>>;
+};
+export declare const useFormLayout: () => FormState;
+export declare const getDefault: (props: UFromProps) => [boolean, number, 1 | 2 | 3, number];
+export declare const FormWrapper: React.FC<PropsWithChildren<UFromProps & {
+    isInfo: boolean;
+}>>;

package/components/UForm/FormWrapper.js

@@ -0,0 +1,270 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormWrapper = exports.getDefault = exports.useFormLayout = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../../utils");
+const _register_1 = require("./_register");
+const lodash_1 = __importDefault(require("lodash"));
+const LABEL_NOT_CHINESE = 0.66;
+const useFormLayout = () => (0, react_1.useContext)(FormContext);
+exports.useFormLayout = useFormLayout;
+const FormContext = (0, react_1.createContext)(null);
+/**
+ * 默认排版
+ * [默认宽度， 一行显示列数， Label最高可占据span数]
+ * */
+const LAYOUTS = {
+    common: [880, 2, 12],
+    simple: [640, 1, 8],
+    compress: [1080, 3, 9],
+};
+const COLS_SPLIT = 8;
+const FONT_SIZE = 12;
+const getDefault = (props) => {
+    const isGroup = lodash_1.default.has(props.fields[0], 'fields');
+    let width, cols, colMax;
+    if (lodash_1.default.has(LAYOUTS, props.layout)) {
+        [width, cols, colMax] = LAYOUTS[props.layout];
+    }
+    else {
+        let col = 0;
+        if (!isGroup) {
+            col = props.fields.length;
+        }
+        else {
+            col = lodash_1.default.sum(props.fields.map((item) => lodash_1.default.filter(item.fields, v => v).length));
+        }
+        [width, cols, colMax] = (col > COLS_SPLIT) ? LAYOUTS.common : LAYOUTS.simple;
+    }
+    return [isGroup, width, cols, colMax];
+};
+exports.getDefault = getDefault;
+/**
+ * 判断表单默认展示形式
+*/
+const getFormLayout = (props, root) => {
+    let [isGroup, width, cols, colMax] = (0, exports.getDefault)(props);
+    if (lodash_1.default.has(props, 'width')) {
+        width = props.width;
+    }
+    else {
+        let totalWidth = root.getBoundingClientRect().width;
+        if (width > totalWidth) {
+            width = totalWidth;
+        }
+    }
+    let isInfo = false, isEdit = false, isCreate = false;
+    switch (props.mode) {
+        case 'ADD':
+            isCreate = true;
+            break;
+        case 'EDIT':
+            isEdit = true;
+            break;
+        case 'INFO':
+            isInfo = true;
+            break;
+        default:
+            if (props.isInfo) {
+                isInfo = true;
+                break;
+            }
+            if (props.isEdit) {
+                isEdit = true;
+                break;
+            }
+            isCreate = true;
+        // if (props.data != null || _.keys(props.data).length == 0) {
+        //     isInfo = true;
+        //     break;
+        // }
+        // isInfo = true;
+    }
+    return [isGroup, cols, width, colMax, isInfo, isEdit, isCreate];
+};
+const getMaxTitleWidth = (field) => {
+    if (field.type && (0, _register_1.getUFormInput)(field.type).breakTitle)
+        return 0;
+    let title = null;
+    if (field.ik)
+        title = utils_1.i18n.txt(field.ik);
+    if (title == null)
+        title = lodash_1.default.isString(field.title) ? field.title : '';
+    let sum = 0;
+    for (let i = 0, _i = title.length; i < _i; i++) {
+        if (title.charCodeAt(i) < 12800) {
+            sum += LABEL_NOT_CHINESE;
+        }
+        else {
+            sum += 1;
+        }
+    }
+    return Math.ceil(sum);
+};
+// 遍历字段，计算表单属性
+const _LOOP = (fs, maxLabel, isInfo, isEdit, isCreate, hiddFields, disableFields) => {
+    fs.map(field => {
+        // @ts-ignore // 兼容 && 写法
+        if (field == null || field === false)
+            return;
+        let show = true;
+        if (field.roleCode && !utils_1.PageUtil.hasRole(field.roleCode)) {
+            show = false;
+        }
+        else if (lodash_1.default.has(field, 'show')) {
+            if (field.show === false || field.show === true) {
+                show = field.show;
+            }
+            else if (field.show) {
+                switch (field.show) {
+                    case 'A':
+                        show = !isInfo && !isEdit;
+                        break;
+                    case 'AE':
+                        show = !isInfo;
+                        break;
+                    case 'I':
+                        show = isInfo;
+                        break;
+                    case 'IE':
+                        show = !isEdit;
+                        break;
+                    case 'IE':
+                        show = isInfo || isEdit;
+                        break;
+                    case 'E':
+                        show = isEdit && !isInfo;
+                        break;
+                    case 'IAE':
+                        show = true;
+                        break;
+                }
+            }
+        }
+        if (!show) {
+            hiddFields.add(field.field);
+            return;
+        }
+        let maxCount = getMaxTitleWidth(field);
+        if (maxLabel.current < maxCount)
+            maxLabel.current = maxCount;
+        let disabled = false;
+        if (!isInfo && lodash_1.default.has(field, 'disabled')) {
+            if (field.disabled === false || field.disabled === true) {
+                disabled = field.disabled;
+            }
+            else if (field.disabled) {
+                switch (field.disabled) {
+                    case 'A':
+                    case 'IE':
+                        disabled = !isEdit;
+                        break;
+                    case 'IE':
+                    case 'E':
+                        disabled = isEdit;
+                        break;
+                    case 'AE':
+                    case 'IAE':
+                        disabled = true;
+                        break;
+                }
+            }
+        }
+        if (disabled) {
+            disableFields.add(field.field);
+        }
+    });
+};
+const FormWrapper = (props) => {
+    const DisableFieldRef = (0, react_1.useRef)(null);
+    const HiddenFieldRef = (0, react_1.useRef)(null);
+    const OptionsMapRef = (0, react_1.useRef)(null);
+    const RequiredMapRef = (0, react_1.useRef)(null);
+    const multipleFieldsRef = (0, react_1.useRef)(null);
+    const formContainer = (0, react_1.useRef)(null);
+    const maxLabelRef = (0, react_1.useRef)(0);
+    // maxLabel
+    const [state, setState] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (DisableFieldRef.current == null) {
+            DisableFieldRef.current = new Set();
+            HiddenFieldRef.current = new Set();
+            OptionsMapRef.current = new Map();
+            RequiredMapRef.current = new Map();
+            multipleFieldsRef.current = new Set();
+        }
+        const { fields } = props;
+        if (fields == null || fields.length == 0)
+            throw new Error('Must Have Fields');
+        const [isGroup, cols, width, colMax, isInfo, isEdit, isCreate] = getFormLayout(props, formContainer.current);
+        let colSpan = 24 / cols;
+        // const MAX_LABEL_SPAN = COLMAX[cols];
+        if (isGroup) {
+            fields.map(group => _LOOP(group.fields, maxLabelRef, isInfo, isEdit, isCreate, HiddenFieldRef.current, DisableFieldRef.current));
+        }
+        else {
+            _LOOP(fields, maxLabelRef, isInfo, isEdit, isCreate, HiddenFieldRef.current, DisableFieldRef.current);
+        }
+        let fieldWidth = width / cols;
+        var percent = (maxLabelRef.current * FONT_SIZE + 20) / fieldWidth;
+        let labelSpan = Math.ceil(percent * 24);
+        if (labelSpan > colMax) {
+            labelSpan = colMax;
+        }
+        var fix = labelSpan % cols;
+        if (fix != 0) {
+            labelSpan += fix;
+        }
+        if (cols == 1) {
+            if (labelSpan < 6) {
+                labelSpan = 6;
+            }
+        }
+        let inputSpan = 24 - labelSpan;
+        if (cols == 1 && inputSpan > 14) {
+            inputSpan = inputSpan - 1;
+        }
+        setState({
+            maxLabel: maxLabelRef.current,
+            width,
+            cols,
+            isGroup,
+            colSpan,
+            labelSpan,
+            inputSpan,
+            hiddenFields: HiddenFieldRef,
+            disableFields: DisableFieldRef,
+            multipleFields: multipleFieldsRef,
+            requireFields: RequiredMapRef,
+            optionFields: OptionsMapRef,
+        });
+    }, []);
+    return react_1.default.createElement("div", { ref: formContainer, className: props.className, style: props.style }, state == null ? [] : react_1.default.createElement(FormContext.Provider, { value: state }, props.children));
+};
+exports.FormWrapper = FormWrapper;

package/components/UForm/UDescriptions.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { UDescriptionsItemProps, UDescriptionsProps } from './index';
+export declare const UDescriptions: React.ExoticComponent<React.PropsWithChildren<UDescriptionsProps>> & {
+    Item: React.FC<UDescriptionsItemProps>;
+};

package/components/UForm/UDescriptions.js

@@ -0,0 +1,134 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UDescriptions = void 0;
+const react_1 = __importDefault(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../../utils");
+const isReactFragment = (variableToInspect) => {
+    if (variableToInspect.type)
+        return variableToInspect.type === react_1.default.Fragment;
+    return false;
+};
+const toArray = (children) => {
+    let ret = [];
+    react_1.default.Children.forEach(children, child => {
+        if (child === undefined || child === null) {
+            return;
+        }
+        if (isReactFragment(child)) {
+            //@ts-ignore
+            ret = ret.concat(toArray(child.props.children));
+            return;
+        }
+        if (Array.isArray(child)) {
+            ret = ret.concat(toArray(child));
+        }
+        else {
+            ret.push(child);
+        }
+    });
+    return ret;
+};
+const _UDescriptions = props => {
+    const { className, style, title, labelWidth, column, theme, hideBorder, ik } = props;
+    let cols = column || 2;
+    let mode = theme ? theme : 'label';
+    const items = toArray(props.children);
+    if (items.length == 0)
+        return utils_1.Const.NONE;
+    let clazz = ['c-des', 'c-des-t' + mode,];
+    if (hideBorder) {
+        if (lodash_1.default.isString(hideBorder)) {
+            clazz.push('c-des-h' + hideBorder);
+        }
+        else {
+            hideBorder.map(item => clazz.push('c-des-h' + item));
+        }
+    }
+    if (className) {
+        clazz.push(className);
+    }
+    const rows = generateChildrenRows(items, cols);
+    let groupTitle = utils_1.i18n.getText(ik, title);
+    return react_1.default.createElement("div", { className: clazz.join(' '), style: style },
+        groupTitle && react_1.default.createElement("div", { className: "c-des-title" }, groupTitle),
+        react_1.default.createElement("div", { className: `c-des-view c-des-c${cols}l${labelWidth}` },
+            react_1.default.createElement("table", null,
+                react_1.default.createElement("colgroup", null, lodash_1.default.range(cols * 2).map(i => react_1.default.createElement("col", { className: (i % 2 == 0) ? 'c-des-glabel' : 'c-des-gvalue' }))),
+                react_1.default.createElement("tbody", null,
+                    react_1.default.createElement("tr", { className: "c-des-align" }, lodash_1.default.range(cols * 2).map(i => (i % 2 == 0) ? react_1.default.createElement("th", null) : react_1.default.createElement("td", null))),
+                    rows.map((row) => react_1.default.createElement("tr", { className: "c-des-row" }, renderRow(row, column)))))));
+};
+const generateChildrenRows = (items, column) => {
+    const rows = [];
+    let columns = null;
+    let leftSpans;
+    items.forEach((node, index) => {
+        // let itemNode = node;
+        if (!columns) {
+            leftSpans = column;
+            columns = [];
+            rows.push(columns);
+        }
+        var { span = 1 } = node.props;
+        if (span >= column) {
+            span = column;
+        }
+        if (index === items.length - 1) {
+            span = leftSpans;
+        }
+        if (span <= leftSpans) {
+            leftSpans -= span;
+        }
+        else {
+            // 超出结界，换行重构
+            let cells = columns.map(item => item.props.span);
+            let diffSpan = column - lodash_1.default.sum(cells);
+            const lastNode = columns.pop();
+            columns.push(react_1.default.cloneElement(lastNode, { span: lastNode.props.span + diffSpan }));
+            leftSpans = column - span;
+            columns = [];
+            rows.push(columns);
+        }
+        columns.push(react_1.default.cloneElement(node, { span }));
+        if (leftSpans <= 0) {
+            columns = null;
+        }
+    });
+    return rows;
+};
+const Col = (props) => {
+    if (props.isLabel)
+        return react_1.default.createElement("th", { className: "c-des-label" }, props.children);
+    let colSpan = 1;
+    if (props.breakLabel)
+        colSpan += 1;
+    if (props.span && props.span > 1)
+        colSpan += ((props.span - 1) * 2);
+    return react_1.default.createElement("td", { className: "c-des-value " + (props.className ? props.className : ''), colSpan: colSpan }, props.children);
+};
+const renderRow = (row, cols) => {
+    let columns = [];
+    row.map(col => {
+        if (col.props.roleCode && !utils_1.PageUtil.hasRole(col.props.roleCode))
+            return;
+        let label = null;
+        if (col.props.ik) {
+            label = utils_1.i18n.txt(col.props.ik);
+        }
+        else if (col.props.label) {
+            label = col.props.label;
+        }
+        let breakLabel = label == null || col.props.breakLabel;
+        if (!breakLabel) {
+            columns.push(react_1.default.createElement(Col, { isLabel: true, breakLabel: breakLabel, className: col.props.className, span: col.props.span, cols: cols }, label));
+        }
+        columns.push(react_1.default.createElement(Col, { isLabel: false, breakLabel: breakLabel, className: col.props.className, span: col.props.span, cols: cols }, col.props.children));
+    });
+    return columns;
+};
+exports.UDescriptions = _UDescriptions;
+exports.UDescriptions.Item = (props) => utils_1.Const.NONE;

package/components/UForm/UForm.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { UFromProps } from './index';
+import type { FormState } from './FormWrapper';
+import type { PlainObject } from '../../basetype';
+export type UFomFunctions = {
+    /**
+     * 获取当前表单数据
+    */
+    data: () => PlainObject;
+    /**
+     * 获取当前表单数据
+     * 会先进行验证表单有效性，验证不通过则不返回
+    */
+    validate: () => Promise<PlainObject>;
+    /**
+     * 重置表单
+    */
+    reset: () => void;
+};
+export declare const initValue: (props: UFromProps & {
+    state: FormState;
+}) => {
+    [x: string]: any;
+};
+/**
+ * 说明：
+ * 相比旧版UForm ,新版本 UForm 功能更强
+ * 1. 降低大部分没必要的渲染，性能提升
+ * 2. 现已支持 Link 联动 返回 Promise
+ * 3. 支持 ref 控制方法
+ * 4. filed 支持更多提示，验证方法
+*/
+export declare const UForm: React.ForwardRefExoticComponent<UFromProps & React.RefAttributes<UFomFunctions>>;