vap1 0.4.7 → 0.5.0

package/components/SearchTool/SearchBand/_register.d.ts

@@ -0,0 +1,47 @@
+import type { ComponentType, ReactNode } from "react";
+import type { SearchBandFiled } from './type';
+import type { PlainObject } from '../../../basetype';
+/**
+ * 输入组件
+*/
+export type SearchBandInputProps = {
+    /**
+     * field
+    */
+    field: SearchBandFiled;
+    /**
+     *
+    */
+    onChange: (val: any) => void;
+    /**
+     * 是否在 Fixed 模式
+    */
+    isFix?: boolean;
+    /**
+     * 是否在 Tag 中弹开的模式
+     * */
+    isTag?: boolean;
+    /**
+     * fix / tag 模式中时，数据
+     * */
+    data?: PlainObject;
+};
+/**
+ * 组件特性
+*/
+export type SearchBandFieldOptions = {
+    isMulti?: boolean;
+    popWidth?: number;
+    breakCol?: boolean;
+    render?: (field: SearchBandFiled, value: any, formData: PlainObject) => ReactNode;
+};
+/**
+ * 通用 SearchBar 搜索字段定义
+*/
+export type SearchBandFieldComponent = ComponentType<SearchBandInputProps>;
+type SearchBandField = SearchBandFieldOptions & {
+    component: SearchBandFieldComponent;
+};
+export declare const registerSearchBandField: (type: string, component: SearchBandFieldComponent, options?: SearchBandFieldOptions, forceOverWrite?: boolean) => void;
+export declare const getSearchBandField: (type: string) => SearchBandField;
+export {};

package/components/SearchTool/SearchBand/_register.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSearchBandField = exports.registerSearchBandField = void 0;
+var _RegisterUtil_1 = require("../../_RegisterUtil");
+var _Support_1 = require("../../../utils/_Support");
+var _C_SEARCHBAND = (0, _Support_1.globalDefault)('_C_SEARCHBAND', new Map());
+var DEFAULT = { isMulti: false, breakCol: false, popWidth: 320 };
+var registerSearchBandField = function (type, component, options, forceOverWrite) {
+    (0, _RegisterUtil_1.register)(_C_SEARCHBAND, type, DEFAULT, component, options, forceOverWrite);
+};
+exports.registerSearchBandField = registerSearchBandField;
+var getSearchBandField = function (type) {
+    return _C_SEARCHBAND.has(type) ? _C_SEARCHBAND.get(type) : _C_SEARCHBAND.get('text');
+};
+exports.getSearchBandField = getSearchBandField;

package/components/SearchTool/SearchBand/hooks.d.ts

@@ -0,0 +1,12 @@
+import type { ColHTMLAttributes } from 'react';
+import type { PlainObject } from '../../../basetype';
+import type { SearchBandFiled, SearchBandProps } from './type';
+export declare const useSearchBand: (props: SearchBandProps, fixMode: boolean) => {
+    colgroup: ColHTMLAttributes<HTMLTableColElement>[];
+    cols: number;
+    rows: SearchBandFiled[][];
+    tags: SearchBandFiled[];
+    state: PlainObject;
+    changeField: (field: SearchBandFiled, value: any) => void;
+    removeField: (field: SearchBandFiled) => void;
+};

package/components/SearchTool/SearchBand/hooks.js

@@ -0,0 +1,181 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchBand = void 0;
+var react_1 = require("react");
+var lodash_1 = __importDefault(require("lodash"));
+var hooks_1 = require("../../../hooks");
+var Global_1 = require("../../../utils/Global");
+var FONT_SIZE = 16;
+var maxWidth = function (fields) {
+    return FONT_SIZE * lodash_1.default.max(fields.map(function (field) { return field.label.length; })) + 32;
+};
+var inTag = function (field, data) {
+    var e_1, _a;
+    var isMulti = field.indexOf(',') > 0; // 是否多字模式
+    if (!isMulti)
+        return lodash_1.default.has(data, field) && data[field] !== undefined;
+    var fields = field.split(',');
+    try {
+        for (var fields_1 = __values(fields), fields_1_1 = fields_1.next(); !fields_1_1.done; fields_1_1 = fields_1.next()) {
+            var item = fields_1_1.value;
+            if (lodash_1.default.has(data, item) && data[item] !== undefined)
+                return true;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (fields_1_1 && !fields_1_1.done && (_a = fields_1.return)) _a.call(fields_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return false;
+};
+var useTableColumns = function (props, labelWidth, data, fixMode) {
+    var cols = props.cols, fields = props.fields;
+    var MAX = cols || Global_1.CONFIG.SEARCHBAND.DEFALULT_COL;
+    return (0, react_1.useMemo)(function () {
+        var rows = [];
+        var tags = [];
+        var rowUse = 0;
+        fields.forEach(function (field, i) {
+            // note : segmented 用不出现在 tag 中
+            var inSearch = (fixMode || field.type == 'segmented') ? false : inTag(field.field, data);
+            if (inSearch) {
+                tags.push(__assign(__assign({}, field), { value: data[field.field] }));
+                return;
+            }
+            if (MAX <= 1) {
+                rows.push([__assign(__assign({}, field), { span: 1 })]);
+                return;
+            }
+            var tailMode = false;
+            if (rows.length && rowUse < MAX) {
+                if ((field.span || 1) <= (MAX - rowUse)) {
+                    tailMode = true; // 直接追尾
+                }
+                else {
+                    // 无法追尾， 补全最后一列
+                    var lastRow_1 = rows[rows.length - 1];
+                    var total = lodash_1.default.sum(lastRow_1.map(function (item) { return item.span; }));
+                    var diff = MAX - total;
+                    if (diff > 0) {
+                        lastRow_1[lastRow_1.length - 1].span = lastRow_1[lastRow_1.length - 1].span + diff;
+                    }
+                }
+            }
+            if (tailMode) {
+                rows[rows.length - 1].push(__assign(__assign({}, field), { span: lodash_1.default.min([field.span || 1, MAX]) }));
+            }
+            else {
+                rows.push([__assign(__assign({}, field), { span: lodash_1.default.min([field.span || 1, MAX]) })]);
+            }
+            var lastRow = rows[rows.length - 1];
+            rowUse = lodash_1.default.sum(lastRow.map(function (item) { return (item.span || 1); }));
+        });
+        if (MAX > 1 && rowUse < MAX) {
+            if (rows.length > 0) {
+                var lastRow = rows[rows.length - 1];
+                lastRow[lastRow.length - 1].span += (MAX - rowUse);
+            }
+        }
+        return {
+            colgroup: lodash_1.default.flatten(lodash_1.default.range(MAX).map(function () { return [{ style: { width: labelWidth } }, {}]; })),
+            cols: MAX,
+            rows: rows,
+            tags: tags,
+        };
+    }, [data]);
+};
+var useSearchBand = function (props, fixMode) {
+    var _a = __read((0, react_1.useState)(props.default || {}), 2), state = _a[0], setState = _a[1];
+    var isFristMount = (0, hooks_1.useFirstMountState)();
+    var labelWidth = (0, react_1.useMemo)(function () {
+        if (lodash_1.default.isNumber(props.labelWidth))
+            return props.labelWidth;
+        return maxWidth(props.fields);
+    }, [props.fields, props.labelWidth]);
+    var colDefined = useTableColumns(props, labelWidth, state, fixMode);
+    (0, react_1.useEffect)(function () {
+        if (isFristMount)
+            return;
+        props.onSearch(state);
+    }, [state]);
+    var changeField = (0, react_1.useCallback)(function (field, value) {
+        var isMulti = field.field.indexOf(',') > 0; // 是否多字模式
+        if (!isMulti) {
+            setState(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[field.field] = value, _a)));
+            });
+            return;
+        }
+        var fileds = field.field.split(',');
+        setState(function (prev) {
+            var extend = {};
+            fileds.forEach(function (field) {
+                if (lodash_1.default.has(value, field)) {
+                    extend[field] = value[field];
+                }
+            });
+            return __assign(__assign({}, prev), extend);
+        });
+    }, []);
+    var removeField = (0, react_1.useCallback)(function (field) { return setState(function (prev) {
+        var isMulti = field.field.indexOf(',') > 0; // 是否多字模式
+        if (!isMulti) {
+            if (!lodash_1.default.has(prev, field.field))
+                return prev;
+            var value_1 = __assign({}, prev);
+            lodash_1.default.unset(value_1, field.field);
+            // setState(prev => ({ ...prev, [field.field]: value }));
+            return value_1;
+        }
+        var value = __assign({}, prev);
+        field.field.split(',').forEach(function (item) { return lodash_1.default.unset(value, item); });
+        return value;
+    }); }, []);
+    return __assign({ state: state, changeField: changeField, removeField: removeField }, colDefined);
+};
+exports.useSearchBand = useSearchBand;

package/components/SearchTool/SearchBand/index.d.ts

@@ -0,0 +1,3 @@
+import type { FC, PropsWithChildren } from 'react';
+import type { SearchBandProps } from './type';
+export declare const SearchBand: FC<PropsWithChildren<SearchBandProps>>;

package/components/SearchTool/SearchBand/index.js

@@ -0,0 +1,66 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.SearchBand = void 0;
+var react_1 = __importStar(require("react"));
+var lodash_1 = __importDefault(require("lodash"));
+var Global_1 = require("../../../utils/Global");
+var _SearchBandTag_1 = require("./_SearchBandTag");
+var _SearchBandFix_1 = require("./_SearchBandFix");
+var SearchBand = function (props) {
+    var fixMode = (0, react_1.useMemo)(function () {
+        if (lodash_1.default.isBoolean(props.fixMode))
+            return props.fixMode;
+        return Global_1.CONFIG.SEARCHBAND.FIX_MODE;
+    }, [props.fixMode]);
+    if (fixMode)
+        return react_1.default.createElement(_SearchBandFix_1.SearchBandFix, __assign({}, props));
+    return react_1.default.createElement(_SearchBandTag_1.SearchBandTag, __assign({}, props));
+};
+exports.SearchBand = SearchBand;

package/components/SearchTool/SearchBand/type.d.ts

@@ -0,0 +1,71 @@
+import type { Field } from "../SearchBar/type";
+import type { PlainObject } from '../../../basetype';
+import type { ReactNode } from "react";
+import type { TagProps } from 'antd/es/tag';
+declare const BuiltInType: readonly ["select", "multi-select", "segmented", "text", "number", "number-range", "slider-range", "date", "daterange", "daterange-single", "datetime", "datetimerange", "datetimerange-single"];
+export type SearchBandFiled = Omit<Field, 'type'> & {
+    /**
+     *
+    */
+    type?: typeof BuiltInType[number] | (string & {});
+    /**
+     * 选中后的TAG色， 默认为 default
+    */
+    tagColor?: TagProps['color'];
+    /**
+     * 自定义  render 用于 tag 展示
+    */
+    render?: (value: any, data: PlainObject) => ReactNode;
+    /**
+     * 在 radio / checkbox 时生效
+     * 选项展示模式，目前 支持 link(默认) tag button
+     * origin 时  radio = Radio CheckBox = checkbox
+    */
+    optionStyle?: 'tag' | 'link' | 'button' | 'origin';
+};
+export type SearchBandProps = {
+    /**
+     * searchBar扩展类名称
+     */
+    className?: string;
+    /**
+     * 搜索参数
+     * 说明 : FlatSearchBar 支持的 type 与 SearchBar 一致
+     * 目前只支持  radio / checkbox / select / slider-range / timerange / datarange
+     */
+    fields: SearchBandFiled[];
+    /**
+     * 搜索参数支持的列，最多支持3，默认为1
+     */
+    cols?: 1 | 2 | 3;
+    /**
+     * 搜索被触发时
+     */
+    onSearch: (param: PlainObject) => void;
+    /**
+     * 默认参数
+     */
+    default?: PlainObject;
+    /**
+     * 如果为true, 则不会以Tag显示
+    */
+    fixMode?: boolean;
+    /**
+     * @external
+     * 提示信息
+    */
+    tip?: ReactNode;
+    /**
+     * @external
+     * 额外的 ACTION  , 说明: 无特殊情况不要使用
+    */
+    extraAction?: ReactNode | undefined;
+    /**
+     * 说明:
+     * 系统会自动计算label需要的宽度
+     * 使用 labelWidth时,
+     * 会强制使用 labelWidth 做为label宽度, 用于个别场景
+    */
+    labelWidth?: number;
+};
+export {};

package/components/SearchTool/SearchBand/type.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var BuiltInType = ['select', 'multi-select', 'segmented', 'text', 'number', 'number-range', 'slider-range', 'date', 'daterange', 'daterange-single', 'datetime', 'datetimerange', 'datetimerange-single'];

package/components/SearchTool/SearchBar/ActionButtons.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __values = (this && this.__values) || function(o) {
     var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
     if (m) return m.call(o);

package/components/SearchTool/SearchBar/ByField.d.ts

@@ -1,5 +1,5 @@
 import type { FC, RefAttributes, ForwardRefExoticComponent } from 'react';
-import type { SearchBarByFieldProps } from './index';
+import type { SearchBarByFieldProps } from './type';
 /**
  * 仅内容使用
 */

package/components/SearchTool/SearchBar/ByField.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;

package/components/SearchTool/SearchBar/ByKeyword.d.ts

@@ -1,3 +1,3 @@
 import type { FC } from 'react';
-import type { SearchBarProps } from './index';
+import type { SearchBarProps } from './type';
 export declare const SearchBarByKeyword: FC<SearchBarProps>;

package/components/SearchTool/SearchBar/ByKeyword.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;

package/components/SearchTool/SearchBar/SearchField.d.ts

@@ -1,6 +1,6 @@
 import { SearchFieldComponent } from './_register';
 import type { FC } from 'react';
-import type { Field } from '../index';
+import type { Field } from './type';
 export type FieldInput = FC<{
     SearchField: SearchFieldComponent;
     disabled: boolean;

package/components/SearchTool/SearchBar/_register.d.ts

@@ -1,4 +1,4 @@
-import type { Field } from '../index';
+import type { Field } from './type';
 import type { ComponentType } from 'react';
 export type SearchFieldProps = {
     /**

package/components/SearchTool/SearchBar/index.d.ts

@@ -1,70 +1,6 @@
 import { ActionButtons } from './ActionButtons';
 import type { PropsWithChildren, ExoticComponent } from 'react';
-import type { Field } from '../index';
-import type { PlainObject } from '../../../basetype';
-/**
- * 当没有指定 keyword时，SearchBar的配置参数
- * 指字 keyword 时，将出以弹出方式展示
-*/
-export type SearchBarByFieldProps = {
-    /**
-     * 禁用
-    */
-    disabled?: boolean;
-    /**
-     * searchBar扩展类名称
-     */
-    className?: string;
-    /**
-     * 1. 传一个字，代表 inside 模式宽度
-     * 2. 传一个数字数组，
-     *      代表 outside 模式 [label宽度，input宽度]
-     *      或是 inside 模式加各的结果
-     */
-    fieldWidth?: number | [number, number];
-    /**
-     * 搜索参数
-     */
-    fields?: Field[];
-    /**
-     * 搜索参数支持的列，最多支持4，默认为3
-     */
-    cols?: 1 | 2 | 3 | 4;
-    /**
-     * 变量有变动时使用
-    */
-    onChange?: (param: PlainObject) => void;
-    /**
-     * 搜索被触发时
-     */
-    onSearch: (param: PlainObject) => void;
-    /**
-     * 显示更多时触发
-     */
-    onExpand?: (isShowMore: boolean) => void;
-    /**
-     * 默认参数
-     */
-    default?: any;
-    /**
-     * 用于单独使用时，不需要按钮的情况
-    */
-    hideAction?: boolean;
-};
-export type KeyWord = true | {
-    /**
-     * 提示，默认为 "请填写关键字"
-    */
-    placeholder?: string;
-    /**
-     * 需要高亮的字段
-     * 高亮设定： 说明：高亮设定后， column 指定的 render 会失效
-    */
-    highlight?: string[];
-};
-export type SearchBarProps = SearchBarByFieldProps & {
-    keyword?: KeyWord;
-};
+import type { SearchBarProps } from './type';
 export interface SearchBar extends ExoticComponent<PropsWithChildren<SearchBarProps>> {
     ActionButtons: typeof ActionButtons;
 }