amis 2.0.0-rc.9 → 2.0.0

package/esm/renderers/Tasks.d.ts

@@ -0,0 +1,140 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { Payload } from 'amis-core';
+import { IScopedContext } from 'amis-core';
+import { BaseSchema, SchemaApi, SchemaClassName, SchemaName } from '../Schema';
+/**
+ * Tasks 渲染器，格式说明
+ * 文档：https://baidu.gitee.io/amis/docs/components/tasks
+ */
+export interface TasksSchema extends BaseSchema {
+    /** 指定为任务类型 */
+    type: 'tasks';
+    btnClassName?: SchemaClassName;
+    /**
+     * 操作按钮文字
+     * @default 上线
+     */
+    btnText?: string;
+    /**
+     * 用来获取任务状态的 API，当没有进行时任务时不会发送。
+     */
+    checkApi?: SchemaApi;
+    /**
+     * 当有任务进行中，会每隔一段时间再次检测，而时间间隔就是通过此项配置，默认 3s。
+     * @default 3000
+     */
+    interval?: number;
+    items?: Array<{
+        /**
+         * 任务键值，请唯一区分
+         */
+        key?: string;
+        /**
+         * 任务名称
+         */
+        label?: string;
+        /**
+         * 当前任务状态，支持 html
+         */
+        remark?: string;
+        /**
+         * 任务状态：
+         * 0: 初始状态，不可操作。
+         * 1: 就绪，可操作状态。
+         * 2: 进行中，还没有结束。
+         * 3：有错误，不可重试。
+         * 4: 已正常结束。
+         * 5：有错误，且可以重试。
+         */
+        status?: 0 | 1 | 2 | 3 | 4 | 5;
+    }>;
+    name?: SchemaName;
+    /**
+     * 操作列说明
+     */
+    operationLabel?: string;
+    /**
+     * 如果任务失败，且可以重试，提交的时候会使用此 API
+     */
+    reSubmitApi?: SchemaApi;
+    /**
+     * 备注列说明
+     * @default 备注
+     */
+    remarkLabel?: string;
+    /**
+     * 配置容器重试按钮 className
+     * @default btn-sm btn-danger
+     */
+    retryBtnClassName?: SchemaClassName;
+    /**
+     * 重试操作按钮文字
+     * @default 重试
+     */
+    retryBtnText?: string;
+    /**
+     * 状态列说明
+     * @default 状态
+     */
+    statusLabel?: string;
+    /**
+     * 状态显示对应的类名配置。
+     * @default [ "label-warning", "label-info", "label-success", "label-danger", "label-default", "label-danger" ]
+     */
+    statusLabelMap?: Array<string>;
+    /**
+     * 状态显示对应的文字显示配置。
+     * @default ["未开始", "就绪", "进行中", "出错", "已完成", "出错"],
+     */
+    statusTextMap?: Array<string>;
+    /**
+     * 提交任务使用的 API
+     */
+    submitApi?: SchemaApi;
+    /**
+     * 配置 table className
+     */
+    tableClassName?: SchemaClassName;
+    /**
+     * 任务名称列说明
+     * @default 任务名称
+     */
+    taskNameLabel?: string;
+    initialStatusCode?: number;
+    readyStatusCode?: number;
+    loadingStatusCode?: number;
+    canRetryStatusCode?: number;
+    finishStatusCode?: number;
+    errorStatusCode?: number;
+}
+export interface TaskProps extends RendererProps, Omit<TasksSchema, 'className'> {
+}
+export interface TaskItem {
+    label?: string;
+    key?: string;
+    remark?: string;
+    status?: any;
+}
+export interface TaskState {
+    error?: string;
+    items: Array<TaskItem>;
+}
+export default class Task extends React.Component<TaskProps, TaskState> {
+    static defaultProps: Partial<TaskProps>;
+    timer: any;
+    constructor(props: TaskProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: TaskProps): void;
+    componentWillUnmount(): void;
+    reload(): void;
+    tick(force?: boolean): void;
+    handleLoaded(ret: Payload): void;
+    submitTask(item: TaskItem, index: number, retry?: boolean): void;
+    render(): JSX.Element;
+}
+export declare class TaskRenderer extends Task {
+    static contextType: React.Context<IScopedContext>;
+    constructor(props: TaskProps, context: IScopedContext);
+    componentWillUnmount(): void;
+}

package/esm/renderers/Tasks.js

@@ -0,0 +1,209 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { isApiOutdated, isEffectiveApi, createObject, ScopedContext, Renderer } from 'amis-core';
+import update from 'immutability-helper';
+import { Spinner } from 'amis-ui';
+
+var Task = /** @class */ (function (_super) {
+    __extends(Task, _super);
+    function Task(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            items: props.items ? props.items.concat() : []
+        };
+        _this.handleLoaded = _this.handleLoaded.bind(_this);
+        _this.tick = _this.tick.bind(_this);
+        return _this;
+    }
+    Task.prototype.componentDidMount = function () {
+        this.tick(!!this.props.checkApi);
+    };
+    Task.prototype.componentDidUpdate = function (prevProps) {
+        var props = this.props;
+        if (prevProps.items !== props.items) {
+            this.setState({
+                items: props.items ? props.items.concat() : []
+            });
+        }
+        else if (isApiOutdated(prevProps.checkApi, props.checkApi, prevProps.data, props.data)) {
+            this.tick(true);
+        }
+    };
+    Task.prototype.componentWillUnmount = function () {
+        clearTimeout(this.timer);
+    };
+    Task.prototype.reload = function () {
+        this.tick(true);
+    };
+    Task.prototype.tick = function (force) {
+        var _this = this;
+        if (force === void 0) { force = false; }
+        var _a = this.props, loadingStatusCode = _a.loadingStatusCode, data = _a.data, interval = _a.interval, checkApi = _a.checkApi, env = _a.env;
+        var items = this.state.items;
+        clearTimeout(this.timer);
+        // 如果每个 task 都完成了, 则不需要取查看状态.
+        if (!force && !items.some(function (item) { return item.status === loadingStatusCode; })) {
+            return;
+        }
+        if (interval && !isEffectiveApi(checkApi)) {
+            return env.alert('checkApi 没有设置, 不能及时获取任务状态');
+        }
+        isEffectiveApi(checkApi, data) &&
+            env &&
+            env
+                .fetcher(checkApi, data)
+                .then(this.handleLoaded)
+                .catch(function (e) { return _this.setState({ error: e }); });
+    };
+    Task.prototype.handleLoaded = function (ret) {
+        if (!Array.isArray(ret.data)) {
+            return this.props.env.alert('返回格式不正确, 期望 response.data 为数组, 包含每个 task 的状态信息');
+        }
+        this.setState({
+            items: ret.data
+        });
+        var interval = this.props.interval;
+        clearTimeout(this.timer);
+        this.timer = setTimeout(this.tick, interval);
+    };
+    Task.prototype.submitTask = function (item, index, retry) {
+        var _this = this;
+        if (retry === void 0) { retry = false; }
+        var _a = this.props, submitApi = _a.submitApi, reSubmitApi = _a.reSubmitApi, loadingStatusCode = _a.loadingStatusCode, errorStatusCode = _a.errorStatusCode, data = _a.data, env = _a.env;
+        if (!retry && !isEffectiveApi(submitApi)) {
+            return env.alert('submitApi 没有配置');
+        }
+        else if (retry && !isEffectiveApi(reSubmitApi)) {
+            return env.alert('reSubmitApi 没有配置');
+        }
+        this.setState(update(this.state, {
+            items: {
+                $splice: [
+                    [
+                        index,
+                        1,
+                        __assign(__assign({}, item), { status: loadingStatusCode })
+                    ]
+                ]
+            }
+        }));
+        var api = retry ? reSubmitApi : submitApi;
+        isEffectiveApi(api, data) &&
+            env &&
+            env
+                .fetcher(api, createObject(data, item))
+                .then(function (ret) {
+                if (ret && ret.data) {
+                    if (Array.isArray(ret.data)) {
+                        _this.handleLoaded(ret);
+                    }
+                    else {
+                        api && api.replaceData;
+                        var items = _this.state.items.map(function (item) {
+                            return item.key === ret.data.key
+                                ? __assign(__assign({}, (api.replaceData ? {} : item)), ret.data) : item;
+                        });
+                        _this.handleLoaded(__assign(__assign({}, ret), { data: items }));
+                    }
+                    return;
+                }
+                clearTimeout(_this.timer);
+                _this.timer = setTimeout(_this.tick, 4);
+            })
+                .catch(function (e) {
+                return _this.setState(update(_this.state, {
+                    items: {
+                        $splice: [
+                            [
+                                index,
+                                1,
+                                __assign(__assign({}, item), { status: errorStatusCode, remark: e.message || e })
+                            ]
+                        ]
+                    }
+                }));
+            });
+    };
+    Task.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, cx = _a.classnames, className = _a.className, tableClassName = _a.tableClassName, taskNameLabel = _a.taskNameLabel, operationLabel = _a.operationLabel, statusLabel = _a.statusLabel, remarkLabel = _a.remarkLabel, btnText = _a.btnText, retryBtnText = _a.retryBtnText, btnClassName = _a.btnClassName, retryBtnClassName = _a.retryBtnClassName, statusLabelMap = _a.statusLabelMap, statusTextMap = _a.statusTextMap, readyStatusCode = _a.readyStatusCode, loadingStatusCode = _a.loadingStatusCode, canRetryStatusCode = _a.canRetryStatusCode, __ = _a.translate, render = _a.render;
+        var items = this.state.items;
+        var error = this.state.error;
+        return (React.createElement("div", { className: cx('Table-content', className) },
+            React.createElement("table", { className: cx('Table-table', tableClassName) },
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        React.createElement("th", null, taskNameLabel),
+                        React.createElement("th", null, __(operationLabel)),
+                        React.createElement("th", null, statusLabel),
+                        React.createElement("th", null, remarkLabel))),
+                React.createElement("tbody", null, error ? (React.createElement("tr", null,
+                    React.createElement("td", { colSpan: 4 },
+                        React.createElement("div", { className: "text-danger" }, error)))) : (items.map(function (item, key) { return (React.createElement("tr", { key: key },
+                    React.createElement("td", null, item.label),
+                    React.createElement("td", null, item.status == loadingStatusCode ? (React.createElement(Spinner, { show: true, icon: "reload", spinnerClassName: cx('Task-spinner') })) : item.status == canRetryStatusCode ? (React.createElement("a", { onClick: function () { return _this.submitTask(item, key, true); }, className: cx('Button', 'Button--danger', retryBtnClassName || btnClassName) }, retryBtnText || btnText)) : (React.createElement("a", { onClick: function () { return _this.submitTask(item, key); }, className: cx('Button', 'Button--default', btnClassName, {
+                            disabled: item.status !== readyStatusCode
+                        }) }, btnText))),
+                    React.createElement("td", null,
+                        React.createElement("span", { className: cx('label', statusLabelMap && statusLabelMap[item.status || 0]) }, statusTextMap && statusTextMap[item.status || 0])),
+                    React.createElement("td", null, item.remark ? render("".concat(key, "/remark"), item.remark) : null))); }))))));
+    };
+    Task.defaultProps = {
+        className: '',
+        tableClassName: '',
+        taskNameLabel: '任务名称',
+        operationLabel: 'Table.operation',
+        statusLabel: '状态',
+        remarkLabel: '备注说明',
+        btnText: '上线',
+        retryBtnText: '重试',
+        btnClassName: '',
+        retryBtnClassName: '',
+        statusLabelMap: [
+            'label-warning',
+            'label-info',
+            'label-info',
+            'label-danger',
+            'label-success',
+            'label-danger'
+        ],
+        statusTextMap: ['未开始', '就绪', '进行中', '出错', '已完成', '出错'],
+        initialStatusCode: 0,
+        readyStatusCode: 1,
+        loadingStatusCode: 2,
+        errorStatusCode: 3,
+        finishStatusCode: 4,
+        canRetryStatusCode: 5,
+        interval: 3000
+    };
+    return Task;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(TaskRenderer, _super);
+    function TaskRenderer(props, context) {
+        var _this = _super.call(this, props) || this;
+        var scoped = context;
+        scoped.registerComponent(_this);
+        return _this;
+    }
+    TaskRenderer.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        var scoped = this.context;
+        scoped.unRegisterComponent(this);
+    };
+    TaskRenderer.contextType = ScopedContext;
+    TaskRenderer = __decorate([
+        Renderer({
+            type: 'tasks'
+        }),
+        __metadata("design:paramtypes", [Object, Object])
+    ], TaskRenderer);
+    return TaskRenderer;
+})(Task));
+
+export { Task as default };

package/esm/renderers/Timeline.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaApi, SchemaCollection, SchemaTokenizeableString } from '../Schema';
+export interface TimelineItemSchema extends Omit<BaseSchema, 'type'> {
+    /**
+     * 时间点
+     */
+    time: string;
+    /**
+     * 时间节点标题
+     */
+    title?: SchemaCollection;
+    /**
+     * 详细内容
+     */
+    detail?: string;
+    /**
+     * detail折叠时文案
+     */
+    detailCollapsedText?: string;
+    /**
+     * detail展开时文案
+     */
+    detailExpandedText?: string;
+    /**
+     * 时间点圆圈颜色
+     */
+    color?: string;
+    /**
+     * 图标
+     */
+    icon?: SchemaCollection;
+}
+export interface TimelineSchema extends BaseSchema {
+    /**
+     * 指定为 Timeline 时间轴渲染器
+     */
+    type: 'timeline';
+    /**
+     * 节点数据
+     */
+    items?: Array<TimelineItemSchema>;
+    /**
+     * API 或 数据映射
+     */
+    source?: SchemaApi | SchemaTokenizeableString;
+    /**
+     * 文字相对于时间轴展示方向
+     */
+    mode?: 'left' | 'right' | 'alternate';
+    /**
+     * 展示方向
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * 节点倒序
+     */
+    reverse?: boolean;
+}
+export interface TimelineProps extends RendererProps, Omit<TimelineSchema, 'className'> {
+}
+export declare function TimelineCmpt(props: TimelineProps): JSX.Element;
+export declare class TimelineRenderer extends React.Component<TimelineProps> {
+    render(): JSX.Element;
+}

package/esm/renderers/Timeline.js

@@ -0,0 +1,54 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __rest, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { Renderer, filter } from 'amis-core';
+import { withRemoteConfig, Timeline } from 'amis-ui';
+
+function TimelineCmpt(props) {
+    var items = props.items, mode = props.mode, direction = props.direction, reverse = props.reverse, data = props.data, config = props.config; props.source; var render = props.render;
+    // 获取源数据
+    var timelineItemsRow = config || items || [];
+    // 渲染内容
+    var resolveRender = function (region, val) {
+        return typeof val === 'string' ? filter(val, data) : val && render(region, val);
+    };
+    // 处理源数据
+    var resolveTimelineItems = timelineItemsRow === null || timelineItemsRow === void 0 ? void 0 : timelineItemsRow.map(function (timelineItem) {
+        return __assign(__assign({}, timelineItem), { icon: resolveRender('icon', timelineItem.icon), title: resolveRender('title', timelineItem.title) });
+    });
+    return (React.createElement(Timeline, { items: resolveTimelineItems, direction: direction, reverse: reverse, mode: mode }));
+}
+var TimelineWithRemoteConfig = withRemoteConfig({
+    adaptor: function (data) { return data.items || data; }
+})(/** @class */ (function (_super) {
+    __extends(class_1, _super);
+    function class_1() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    class_1.prototype.render = function () {
+        var _a = this.props, config = _a.config; _a.deferLoad; _a.loading; _a.updateConfig; var rest = __rest(_a, ["config", "deferLoad", "loading", "updateConfig"]);
+        return React.createElement(TimelineCmpt, __assign({ config: config }, rest));
+    };
+    return class_1;
+}(React.Component)));
+/** @class */ ((function (_super) {
+    __extends(TimelineRenderer, _super);
+    function TimelineRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TimelineRenderer.prototype.render = function () {
+        return React.createElement(TimelineWithRemoteConfig, __assign({}, this.props));
+    };
+    TimelineRenderer = __decorate([
+        Renderer({
+            type: 'timeline'
+        })
+    ], TimelineRenderer);
+    return TimelineRenderer;
+})(React.Component));
+
+export { TimelineCmpt };

package/esm/renderers/TooltipWrapper.d.ts

@@ -0,0 +1,133 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaCollection } from '../Schema';
+import type { Trigger } from 'amis-ui/lib/components/TooltipWrapper';
+export interface TooltipWrapperSchema extends BaseSchema {
+    /**
+     * 文字提示容器
+     */
+    type: 'tooltip-wrapper';
+    /**
+     * 文字提示标题
+     */
+    title?: string;
+    /**
+     * 文字提示内容，兼容 tooltip，但建议通过 content 来实现提示内容
+     */
+    content?: string;
+    /**
+     *  @deprecated 文字提示内容
+     */
+    tooltip?: string;
+    /**
+     * 文字提示浮层出现位置，默认为top
+     */
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * 浮层位置相对偏移量
+     */
+    offset?: [number, number];
+    /**
+     * 是否展示浮层指向箭头
+     */
+    showArrow?: boolean;
+    /**
+     * 是否禁用提示
+     */
+    disabled?: boolean;
+    /**
+     * 浮层触发方式，默认为hover
+     */
+    trigger?: Trigger | Array<Trigger>;
+    /**
+     * 浮层延迟显示时间, 单位 ms
+     */
+    mouseEnterDelay?: number;
+    /**
+     * 浮层延迟隐藏时间, 单位 ms
+     */
+    mouseLeaveDelay?: number;
+    /**
+     * 是否点击非内容区域关闭提示，默认为true
+     */
+    rootClose?: boolean;
+    /**
+     * 内容区域
+     */
+    body?: SchemaCollection;
+    /**
+     * 内容区包裹标签
+     */
+    wrapperComponent: string;
+    /**
+     * 内容区是否内联显示，默认为false
+     */
+    inline?: boolean;
+    /**
+     * 主题样式， 默认为light
+     */
+    tooltipTheme?: 'light' | 'dark';
+    /**
+     * 内容区自定义样式
+     */
+    style?: {
+        [propName: string]: any;
+    };
+    /**
+     * 是否可以移入浮层中, 默认true
+     */
+    enterable?: boolean;
+    /**
+     * 自定义提示浮层样式
+     */
+    tooltipStyle?: {
+        [propName: string]: any;
+    };
+    /**
+     * 内容区CSS类名
+     */
+    className?: string;
+    /**
+     * 文字提示浮层CSS类名
+     */
+    tooltipClassName?: string;
+}
+export interface TooltipWrapperProps extends RendererProps {
+    /**
+     * 文字提示标题
+     */
+    title?: string;
+    /**
+     * 文字提示
+     */
+    content?: string;
+    tooltip?: string;
+    /**
+     * 文字提示位置
+     */
+    placement: 'top' | 'right' | 'bottom' | 'left';
+    inline?: boolean;
+    trigger: Trigger | Array<Trigger>;
+    rootClose?: boolean;
+    showArrow?: boolean;
+    offset?: [number, number];
+    disabled?: boolean;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    container?: React.ReactNode;
+    style?: React.CSSProperties;
+    tooltipStyle?: React.CSSProperties;
+    wrapperComponent?: string;
+    tooltipTheme?: 'light' | 'dark';
+}
+interface TooltipWrapperState {
+}
+export default class TooltipWrapper extends React.Component<TooltipWrapperProps, TooltipWrapperState> {
+    static defaultProps: Pick<TooltipWrapperProps, 'placement' | 'trigger' | 'rootClose' | 'mouseEnterDelay' | 'mouseLeaveDelay' | 'inline' | 'wrap' | 'tooltipTheme'>;
+    constructor(props: TooltipWrapperProps);
+    renderBody(): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class TooltipWrapperRenderer extends TooltipWrapper {
+}
+export {};

package/esm/renderers/TooltipWrapper.js

@@ -0,0 +1,70 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate } from 'tslib';
+import React from 'react';
+import { buildStyle, filter, Renderer } from 'amis-core';
+import { TooltipWrapper as TooltipWrapper$1 } from 'amis-ui';
+
+var TooltipWrapper = /** @class */ (function (_super) {
+    __extends(TooltipWrapper, _super);
+    function TooltipWrapper(props) {
+        return _super.call(this, props) || this;
+    }
+    TooltipWrapper.prototype.renderBody = function () {
+        var _a = this.props, render = _a.render, cx = _a.classnames, body = _a.body, className = _a.className, wrapperComponent = _a.wrapperComponent, inline = _a.inline, style = _a.style, data = _a.data; _a.wrap;
+        var Comp = wrapperComponent ||
+            (inline ? 'span' : 'div');
+        return (React.createElement(Comp, { className: cx('TooltipWrapper', className, {
+                'TooltipWrapper--inline': inline
+            }), style: buildStyle(style, data) }, render('body', body)));
+    };
+    TooltipWrapper.prototype.render = function () {
+        var _a = this.props, ns = _a.classPrefix, cx = _a.classnames, tooltipClassName = _a.tooltipClassName, tooltipTheme = _a.tooltipTheme, container = _a.container, placement = _a.placement, rootClose = _a.rootClose, tooltipStyle = _a.tooltipStyle, title = _a.title, content = _a.content, tooltip = _a.tooltip, mouseEnterDelay = _a.mouseEnterDelay, mouseLeaveDelay = _a.mouseLeaveDelay, trigger = _a.trigger, offset = _a.offset, showArrow = _a.showArrow, disabled = _a.disabled, enterable = _a.enterable, data = _a.data, env = _a.env;
+        var tooltipObj = {
+            title: filter(title, data),
+            content: filter(content || tooltip, data),
+            style: buildStyle(tooltipStyle, data),
+            placement: placement,
+            trigger: trigger,
+            rootClose: rootClose,
+            container: container !== undefined ? container : (env && env.getModalContainer ? env.getModalContainer : undefined),
+            tooltipTheme: tooltipTheme,
+            tooltipClassName: tooltipClassName,
+            mouseEnterDelay: mouseEnterDelay,
+            mouseLeaveDelay: mouseLeaveDelay,
+            offset: offset,
+            showArrow: showArrow,
+            disabled: disabled,
+            enterable: enterable
+        };
+        return (React.createElement(TooltipWrapper$1, { classPrefix: ns, classnames: cx, tooltip: tooltipObj }, this.renderBody()));
+    };
+    TooltipWrapper.defaultProps = {
+        placement: 'top',
+        trigger: 'hover',
+        rootClose: true,
+        mouseEnterDelay: 0,
+        mouseLeaveDelay: 200,
+        inline: false,
+        wrap: false,
+        tooltipTheme: 'light'
+    };
+    return TooltipWrapper;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(TooltipWrapperRenderer, _super);
+    function TooltipWrapperRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TooltipWrapperRenderer = __decorate([
+        Renderer({
+            type: 'tooltip-wrapper'
+        })
+    ], TooltipWrapperRenderer);
+    return TooltipWrapperRenderer;
+})(TooltipWrapper));
+
+export { TooltipWrapper as default };