vap1 0.4.7 → 0.5.1

package/components/Lists/components/LayoutSwitcher.js

@@ -0,0 +1,121 @@
+"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 () {
+    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);
+    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.LayoutSwitcher = exports.useListLayout = void 0;
+var react_1 = __importStar(require("react"));
+var lodash_1 = __importDefault(require("lodash"));
+var Global_1 = require("../../../utils/Global");
+var _Support_1 = require("../../../utils/_Support");
+var useFirstMountState_1 = require("../../../hooks/useFirstMountState");
+var Button_1 = require("../../_adapt/Button");
+var GlobalState = (0, _Support_1.globalDefault)('_V_TEMP_STATE', { mode: Global_1.CONFIG.LIST.LAYOUT_ORDER[0].value });
+var SUPPORT_LAYOUT = new Set(['fields', 'columns', 'row', 'grids', 'timeline']);
+var useListLayout = function (props) {
+    var _a = __read((0, react_1.useState)(function () {
+        var e_1, _a;
+        if (lodash_1.default.has(props, 'defaultLayout') && lodash_1.default.has(props, props.defaultLayout))
+            return props.defaultLayout;
+        if (GlobalState.mode && lodash_1.default.has(props, GlobalState.mode)) {
+            return GlobalState.mode;
+        }
+        try {
+            for (var _b = __values(Global_1.CONFIG.LIST.LAYOUT_ORDER), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var mode = _c.value;
+                if (lodash_1.default.has(props, mode.value)) {
+                    return mode.value;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return null;
+    }), 2), layout = _a[0], setLayout = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (layout != null) {
+            GlobalState.mode = layout;
+        }
+    }, [layout]);
+    var layouts = (0, react_1.useMemo)(function () { return Global_1.CONFIG.LIST.LAYOUT_ORDER.filter(function (item) { return lodash_1.default.has(props, item.value)
+        && SUPPORT_LAYOUT.has(item.value); }); }, []);
+    return { layout: layout, layouts: layouts, setLayout: setLayout };
+};
+exports.useListLayout = useListLayout;
+var LayoutSwitcher = function (_a) {
+    var layouts = _a.layouts, layout = _a.layout, setLayout = _a.setLayout;
+    var _b = __read((0, react_1.useState)(layout), 2), current = _b[0], setCurrent = _b[1];
+    var isFristMount = (0, useFirstMountState_1.useFirstMountState)();
+    (0, react_1.useEffect)(function () {
+        if (isFristMount)
+            return;
+        setLayout(current);
+    }, [current]);
+    return react_1.default.createElement(Button_1.Button.Group, { className: "c-list-layout-switcher" }, layouts.map(function (item) { return react_1.default.createElement(Button_1.Button, { icon: item.icon, type: current == item.value ? 'primary' : 'default', title: item.label, onClick: function () { return setCurrent(item.value); } }); }));
+};
+exports.LayoutSwitcher = LayoutSwitcher;

package/components/Lists/components/SearchTool.d.ts

@@ -0,0 +1,13 @@
+import type { SearchBarProps, SearchBandProps } from '../../SearchTool';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import type { PlainObject, XOR } from '../../../basetype';
+export type SearchToolProps = XOR<{
+    searchBand?: Omit<SearchBandProps, 'onSearch'>;
+}, {
+    searchBar?: Omit<SearchBarProps, 'onChange' | 'onSearch'>;
+}>;
+export declare const SearchTool: FC<PropsWithChildren<SearchToolProps & {
+    onSearch: (data: PlainObject) => void;
+    default?: any;
+    extraAction?: ReactNode;
+}>>;

package/components/Lists/components/SearchTool.js

@@ -0,0 +1,34 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchTool = void 0;
+var react_1 = __importDefault(require("react"));
+var lodash_1 = __importDefault(require("lodash"));
+var SearchTool_1 = require("../../SearchTool");
+var Const_1 = require("../../../utils/Const");
+var SearchTool = function (props) {
+    if (props.searchBand == null && props.searchBar == null) {
+        if (lodash_1.default.isEmpty(props.children))
+            return Const_1.NONE;
+        return react_1.default.createElement(SearchTool_1.SearchBar, { onSearch: function () { }, children: props.children });
+    }
+    if (props.searchBand)
+        return react_1.default.createElement(SearchTool_1.SearchBand, __assign({}, props.searchBand, { default: props.default, onSearch: props.onSearch, children: props.children, extraAction: props.extraAction }));
+    if (props.searchBar)
+        return react_1.default.createElement(SearchTool_1.SearchBar, __assign({}, props.searchBar, { default: props.default, onSearch: props.onSearch, children: props.children }));
+    return Const_1.NONE;
+};
+exports.SearchTool = SearchTool;

package/components/Lists/index.d.ts

@@ -0,0 +1,129 @@
+import type { TimelineProps, TimeLineItemProps } from 'antd/es/timeline';
+import type { ListProps } from 'antd/es/list/index';
+import type { ReactNode } from "react";
+import type { PlainObject } from "../../basetype";
+import type { TableColumn } from '../Tables';
+import type { VTableProps } from '../Tables/VTable';
+import type { IconRender } from './Fields/IconRender';
+import type { SearchToolProps } from './components/SearchTool';
+export type ListItemRender = ListProps<PlainObject>['renderItem'];
+export type ListContentRender = string | ListItemRender;
+/**
+ *
+*/
+type ContentFieldStyle = 'bold' | 'italic' | 'underline' | 'line-through' | 'color-primary' | 'color-success' | 'color-error' | 'color-info' | 'color-warning' | 'tag-blue' | 'tag-purple' | 'tag-cyan' | 'tag-green' | 'tag-magenta' | 'tag-pink' | 'tag-red' | 'tag-orange' | 'tag-yellow' | 'tag-volcano' | 'tag-geekblue' | 'tag-lime' | 'tag-gold' | 'tag-blue-inverse' | 'tag-purple-inverse' | 'tag-cyan-inverse' | 'tag-green-inverse' | 'tag-magenta-inverse' | 'tag-pink-inverse' | 'tag-red-inverse' | 'tag-orange-inverse' | 'tag-yellow-inverse' | 'tag-volcano-inverse' | 'tag-geekblue-inverse' | 'tag-lime-inverse' | 'tag-gold-inverse';
+/**
+ * 类似 Table Column 结构， 用于定义结构，也方便移植 Table Columns
+ *
+*/
+export type ContentField = {
+    dataIndex: string;
+    title?: string;
+    /**
+     * 自定义  className
+    */
+    className?: string;
+    /**
+     * 值的样式，只支持默认主义， 非 html style
+    */
+    style?: ContentFieldStyle;
+    render?: (value: any, record: PlainObject) => ReactNode;
+};
+/**
+ * type =  fields  字段模式
+*/
+export type FieldListProps = {
+    /**
+     * 图标模式
+    */
+    icon?: IconRender;
+    /**
+     * 上左 - 标题
+    */
+    title?: ListContentRender;
+    /**
+     * 上右 - 标题右侧内容
+     * titleRight 仅在有title 时才会出现
+    */
+    titleRight?: ListContentRender;
+    /**
+     * 内容,可使用 类Table的 TableColumn 模式,会自动转换.
+     * 使用  TableColumn 模式时,可使用 null 进行换行.
+     *
+    */
+    content: ListContentRender | ContentField[];
+    /**
+     * 下左 - 通常为操作区域
+    */
+    action?: ListContentRender;
+    /**
+     * 下右 - 通常为说明区域
+    */
+    cite?: ListContentRender;
+};
+/***
+ * 表格模式, 传 columns
+ * 说明, 不支持排序
+ */
+export type TableListProps = Omit<TableColumn, 'sorter'>[];
+/**
+ * type = grid 网格模式
+*/
+export type GridsListProps = {
+    grid: ListProps<any>['grid'];
+    ratio?: number;
+    itemRender: ListItemRender;
+};
+export type BlockListProps = {
+    itemRender: (record: PlainObject, i: number) => ReactNode;
+};
+export type TimelineListProps = Pick<TimelineProps, 'mode' | 'pending' | 'pendingDot' | 'reverse'> & {
+    /**
+     * 自动加 label  时间轴分裂 (在 itemRender 返回 label的情况 下,不会加)
+    */
+    labelRender?: ListContentRender;
+    /**
+     * 自动加 标题 内容上方
+    */
+    titleRender?: ListContentRender;
+    /**
+     * 自动加 action 内容下方
+    */
+    actionRender?: ListItemRender;
+    /**
+     * render 内容
+    */
+    itemRender: (record: PlainObject, i: number) => TimeLineItemProps | ReactNode;
+};
+/**
+ * 说明  ListItemDefine: 以下几个至少必选一个
+*/
+export type ListRenderDefine = {
+    /**
+     * 字段自助模式
+    */
+    fields?: FieldListProps;
+    /**
+     * 表格模式
+    */
+    columns?: TableListProps;
+    /**
+     * 时间轴模式
+    */
+    timeline?: TimelineListProps;
+    /**
+     * 行(自定义)模式
+    */
+    row?: BlockListProps;
+    /**
+     * Grid 宫格模式
+    */
+    grids?: GridsListProps;
+};
+export type ListLayoutType = keyof ListRenderDefine;
+type CommonListProps = Pick<ListProps<PlainObject>, 'rowKey' | 'className' | 'style'> & ListRenderDefine & {
+    defaultLayout?: ListLayoutType;
+};
+export type BaseListProps = CommonListProps & Pick<ListProps<PlainObject>, 'dataSource' | 'loading'>;
+export type VListProps = CommonListProps & SearchToolProps & Pick<VTableProps, 'default' | 'model' | 'mode' | 'pagination' | 'actionBar'>;
+export {};

package/components/Lists/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/components/SearchTool/SearchBand/BandInput.js

@@ -0,0 +1,54 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BandInput = void 0;
+var react_1 = __importStar(require("react"));
+var _register_1 = require("./_register");
+var BandInput = function (props) {
+    var Component = (0, react_1.useMemo)(function () { return (0, _register_1.getSearchBandField)(props.field.type); }, []);
+    return react_1.default.createElement(Component.component, __assign({}, props));
+};
+exports.BandInput = BandInput;

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

@@ -0,0 +1,7 @@
+import type { SearchBandInputProps } from './_register';
+import type { FC } from 'react';
+type BandTagProps = Required<Pick<SearchBandInputProps, 'field' | 'onChange' | 'data'>> & {
+    onRemove: () => void;
+};
+export declare const BandTag: FC<BandTagProps>;
+export {};

package/components/SearchTool/SearchBand/BandTag.js

@@ -0,0 +1,82 @@
+"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 () {
+    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.BandTag = void 0;
+var react_1 = __importStar(require("react"));
+var lodash_1 = __importDefault(require("lodash"));
+var antd_1 = require("antd");
+var _register_1 = require("./_register");
+var BandInput_1 = require("./BandInput");
+var getValueRender = function (field) {
+    if (lodash_1.default.isFunction(field.render))
+        return field.render;
+    var component = (0, _register_1.getSearchBandField)(field.type);
+    if (lodash_1.default.isFunction(component.render)) {
+        return function (val, data) { return component.render(field, val, data); };
+    }
+    if (component.isMulti) {
+        var fields_1 = field.field.split(',');
+        return function (val, data) {
+            var values = fields_1.map(function (item) { return lodash_1.default.get(data, item); }).filter(function (item) { return item !== null && item !== '' && item !== undefined; });
+            if (values.length == 0)
+                return ' - ';
+            return values.join(' - ');
+        };
+    }
+    return function (val, data) { return val; };
+};
+var BandTag = function (_a) {
+    var field = _a.field, onChange = _a.onChange, onRemove = _a.onRemove, data = _a.data;
+    var tagColor = field.tagColor;
+    var Component = (0, react_1.useMemo)(function () { return (0, _register_1.getSearchBandField)(field.type); }, []);
+    var valueRender = (0, react_1.useMemo)(function () { return getValueRender(field); }, []);
+    return react_1.default.createElement(antd_1.Popover, { overlayClassName: 'c-searchband-filed-popup', 
+        // openClassName='c-searchband-filed-popup'
+        // open
+        content: react_1.default.createElement("div", { style: { width: Component.popWidth || 360 } },
+            react_1.default.createElement("h4", null,
+                react_1.default.createElement("span", null, field.label),
+                react_1.default.createElement("small", null,
+                    react_1.default.createElement("a", { onClick: onRemove }, "\u5220\u9664\u6761\u4EF6"))),
+            react_1.default.createElement("div", { className: 'c-searchband-filed-popup-input' },
+                react_1.default.createElement(BandInput_1.BandInput, { field: field, onChange: onChange, isTag: true, data: data }))), placement: "bottomLeft" },
+        react_1.default.createElement(antd_1.Tag, { closable: true, color: tagColor, onClose: onRemove },
+            react_1.default.createElement("label", null, field.label),
+            react_1.default.createElement("em", null, valueRender(lodash_1.default.get(data, field.field), data))));
+};
+exports.BandTag = BandTag;

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

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

package/components/SearchTool/SearchBand/_SearchBandAction.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBandAction = void 0;
+var react_1 = __importDefault(require("react"));
+var SearchBandAction = function (props) {
+    if (props.children) {
+        if (props.extraAction) {
+            return react_1.default.createElement("div", { className: "c-searchbar-actions c-searchband-actions" },
+                props.children,
+                react_1.default.createElement("div", { className: 'c-searchband-actions-extra' }, props.extraAction));
+        }
+        return react_1.default.createElement("div", { className: "c-searchbar-actions c-searchband-actions" }, props.children);
+    }
+    if (props.extraAction) {
+        return react_1.default.createElement("div", { className: "c-searchbar-actions c-searchband-actions" },
+            react_1.default.createElement("div", { className: 'c-searchband-actions-extra' }, props.extraAction));
+    }
+    return react_1.default.createElement("div", { className: "c-searchbar-actions c-searchband-actions" });
+};
+exports.SearchBandAction = SearchBandAction;

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

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

package/components/SearchTool/SearchBand/_SearchBandFix.js

@@ -0,0 +1,72 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBandFix = void 0;
+var react_1 = __importStar(require("react"));
+var BandInput_1 = require("./BandInput");
+var hooks_1 = require("./hooks");
+var _SearchBandAction_1 = require("./_SearchBandAction");
+var utils_1 = require("../../../utils");
+var SearchBandFix = function (props) {
+    var _a = (0, hooks_1.useSearchBand)(props, true), state = _a.state, cols = _a.cols, colgroup = _a.colgroup, rows = _a.rows, changeField = _a.changeField;
+    return react_1.default.createElement("div", { className: utils_1.StringUtil.className(['c-searchband', 'c-searchband-fixed'], props.className) },
+        (0, react_1.isValidElement)(props.tip) && props.tip,
+        react_1.default.createElement("table", { cellPadding: 6, cellSpacing: 0 },
+            react_1.default.createElement("colgroup", null, colgroup.map(function (item, i) { return react_1.default.createElement("col", __assign({}, item, { key: i })); })),
+            rows.length > 0 && react_1.default.createElement("tbody", null, rows.map(function (row, i) { return react_1.default.createElement("tr", { key: i }, row.map(function (field) {
+                var span = field.span > 1 ? (field.span * 2 - 1) : undefined;
+                return react_1.default.createElement(react_1.Fragment, { key: field.field },
+                    react_1.default.createElement("th", null, field.label),
+                    react_1.default.createElement("td", { colSpan: span },
+                        react_1.default.createElement(BandInput_1.BandInput, { data: state, isFix: true, field: field, onChange: function (value) { return changeField(field, value); } })));
+            })); })),
+            (props.children || props.extraAction) && react_1.default.createElement("tfoot", null,
+                react_1.default.createElement("tr", null,
+                    react_1.default.createElement("td", { colSpan: cols * 2 },
+                        react_1.default.createElement("nav", null,
+                            react_1.default.createElement(_SearchBandAction_1.SearchBandAction, __assign({}, props))))))));
+};
+exports.SearchBandFix = SearchBandFix;

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

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

package/components/SearchTool/SearchBand/_SearchBandTag.js

@@ -0,0 +1,75 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBandTag = void 0;
+var react_1 = __importStar(require("react"));
+var BandTag_1 = require("./BandTag");
+var BandInput_1 = require("./BandInput");
+var hooks_1 = require("./hooks");
+var _SearchBandAction_1 = require("./_SearchBandAction");
+var utils_1 = require("../../../utils");
+var SearchBandTag = function (props) {
+    var _a = (0, hooks_1.useSearchBand)(props, false), state = _a.state, cols = _a.cols, colgroup = _a.colgroup, rows = _a.rows, tags = _a.tags, changeField = _a.changeField, removeField = _a.removeField;
+    return react_1.default.createElement("div", { className: utils_1.StringUtil.className(['c-searchband'], props.className) },
+        (0, react_1.isValidElement)(props.tip) && props.tip,
+        react_1.default.createElement("table", { cellPadding: 6, cellSpacing: 0 },
+            react_1.default.createElement("colgroup", null, colgroup.map(function (item, i) { return react_1.default.createElement("col", __assign({}, item, { key: i })); })),
+            rows.length > 0 && react_1.default.createElement("tbody", null, rows.map(function (row, i) { return react_1.default.createElement("tr", { key: i }, row.map(function (field) {
+                var span = field.span > 1 ? (field.span * 2 - 1) : undefined;
+                return react_1.default.createElement(react_1.Fragment, { key: field.field },
+                    react_1.default.createElement("th", null, field.label),
+                    react_1.default.createElement("td", { colSpan: span },
+                        react_1.default.createElement(BandInput_1.BandInput, { data: state, isFix: false, field: field, onChange: function (value) { return changeField(field, value); } })));
+            })); })),
+            (tags.length > 0 || props.children) && react_1.default.createElement("tfoot", null,
+                react_1.default.createElement("tr", null,
+                    react_1.default.createElement("td", { colSpan: cols * 2 },
+                        react_1.default.createElement("nav", null,
+                            react_1.default.createElement("ul", null, tags.map(function (field) { return react_1.default.createElement("li", { key: field.field },
+                                react_1.default.createElement(BandTag_1.BandTag, { field: field, data: state, onChange: function (value) { return changeField(field, value); }, onRemove: function () { return removeField(field); } })); })),
+                            react_1.default.createElement(_SearchBandAction_1.SearchBandAction, __assign({}, props))))))));
+};
+exports.SearchBandTag = SearchBandTag;