@cloudbase/weda-ui 3.1.0 → 3.1.3

package/dist/web/components/chart/statisticsCard/index.css

@@ -0,0 +1,63 @@
+/* pc style */
+.weda-statistics-card {
+  background: #ffffff;
+  border: 0.07143rem solid #f1f2f5;
+  box-sizing: border-box;
+  box-shadow: 0 0.07143rem 0.14286rem rgba(0, 0, 0, 0.1);
+  border-radius: 0.42857rem;
+  box-sizing: border-box;
+  font-size: 1rem;
+}
+.weda-statistics-card.weda-statistics-card-pc {
+  width: 19.71429rem;
+  min-height: 9.14286rem;
+}
+
+.weda-statistics-card .weda-statistics-card__wrapper {
+  width: 100%;
+  padding: 2rem 1.71429rem;
+}
+
+.weda-statistics-card .weda-statistics-card__title {
+  font-size: 1em;
+  line-height: 1.57142em;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weda-statistics-card .weda-statistics-card__detail {
+  margin-top: 0.57143rem;
+}
+
+.weda-statistics-card .weda-statistics-card__count {
+  font-size: 2.28571em;
+  line-height: 3.14285em;
+  color: rgba(0, 0, 0, 0.9);
+  word-break: break-all;
+}
+
+.weda-statistics-card .weda-statistics-card__unit {
+  font-size: 1em;
+  line-height: 1.57142em;
+  color: rgba(0, 0, 0, 0.4);
+  margin-left: 0.28571rem;
+  vertical-align: middle;
+}
+
+/* h5 style */
+.weda-statistics-card.weda-statistics-card-mobile {
+  max-width: 100%;
+  min-height: 10rem;
+}
+.weda-statistics-card-mobile .weda-statistics-card__wrapper {
+  width: 100%;
+  padding: 2.85714rem 1.71429rem;
+}
+
+.weda-statistics-card-mobile .weda-statistics-card__detail {
+  margin-top: 0.28571rem;
+}
+
+.weda-statistics-card-mobile .weda-statistics-card__count {
+  font-size: 2em;
+  line-height: 2.42857em;
+}

package/dist/web/components/chart/statisticsCard/index.d.ts

@@ -0,0 +1,85 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../../types';
+import './index.css';
+import { IDataSource, IField } from './interface';
+interface PropsType extends CommonPropsType {
+    /**
+     * 数据源
+     */
+    dataSource?: IDataSource;
+    /**
+     * 数据筛选
+     */
+    filterData?: any;
+    /**
+     * 字段
+     */
+    field?: IField;
+    /**
+     * 统计方式
+     */
+    operationType?: string;
+    /**
+     * 字段展示名称
+     */
+    label?: string;
+    /**
+     * 是否统计空值
+     */
+    isCountEmpty?: boolean;
+    /**
+     * 是否显示单位
+     */
+    isShowUnit?: boolean;
+    /**
+     * 单位
+     */
+    unit?: number;
+    /**
+     * 小数位数
+     */
+    decimalDigits?: number;
+    /**
+     * 后缀
+     */
+    suffix?: number;
+    /**
+     * app.cloud 对象依赖，默认会从 window.app 取值
+     */
+    appCloud?: {
+        callDataSource?: any;
+        callWedaApi?: any;
+    };
+    /**
+     * 其他属性
+     */
+    [key: string]: any;
+}
+/**
+ * 修复科学计数法问题
+ * @param num 小数
+ * @returns {string}
+ */
+export declare function scientificToNumber(num: any): any;
+/**
+ * 补齐小数位数0
+ * @param source          源字符串
+ * @param targetLength    目标长度
+ * @returns {string}
+ */
+export declare function padEnd(source: any, targetLength: any): any;
+/**
+ * 修复toFixed四舍五入不准确问题
+ * @param num
+ * @param digit 小数位数
+ * @returns {string}
+ */
+export declare function customToFixed(num: any, digit?: number): string;
+/**
+ * 添加千位分隔符
+ * @param fixedString
+ * @param digit
+ */
+export declare function addDelimiter(fixedString: any, digit: any): string;
+export default function StatisticsCard({ dataSource, filterData, field, operationType, label, isCountEmpty, isShowUnit, unit, decimalDigits, suffix, className, style, events, id, role, appCloud, }: PropsType): JSX.Element;
+export {};

package/dist/web/components/chart/statisticsCard/index.js

@@ -0,0 +1,203 @@
+import React, { useState } from 'react';
+import './index.css';
+import classNames from '../../../utils/classnames';
+import { ConfigProvider } from 'tea-component';
+import { usePlatform } from '../../../utils/platform';
+import { useDeepCompareEffect, useIsMounted } from '@react-hookz/web';
+import { callDataSource, callWedaApi } from '../../../utils/tcb';
+const CLASS_PREFIX = 'weda-statistics-card';
+// 默认显示值
+const defaultVal = 1000;
+/**
+ * 修复科学计数法问题
+ * @param num 小数
+ * @returns {string}
+ */
+export function scientificToNumber(num) {
+    const str = num;
+    const reg = /^([-]?\d+\.?\d*)(e)([-|+]?\d+)$/;
+    let zero = '';
+    if (!reg.test(str)) {
+        return num;
+    }
+    const arr = reg.exec(str);
+    const len = Math.abs(+arr[3]) - 1;
+    for (let i = 0; i < len; i += 1) {
+        zero += '0';
+    }
+    if (arr[1].indexOf('-') === 0) {
+        return `-0.${zero}${arr[1].replace('-', '').replace('.', '')}`;
+    }
+    return `0.${zero}${arr[1].replace('.', '')}`;
+}
+/**
+ * 补齐小数位数0
+ * @param source          源字符串
+ * @param targetLength    目标长度
+ * @returns {string}
+ */
+export function padEnd(source, targetLength) {
+    targetLength = Math.floor(targetLength); //floor if number or convert non-number to 0;
+    if (source.length > targetLength) {
+        return source;
+    }
+    else {
+        targetLength = targetLength - source.length;
+        return source + '0'.repeat(targetLength);
+    }
+}
+/**
+ * 修复toFixed四舍五入不准确问题
+ * @param num
+ * @param digit 小数位数
+ * @returns {string}
+ */
+export function customToFixed(num, digit = 0) {
+    const pow = Math.pow(10, digit);
+    let value = `${num}`;
+    // 如果是小数，四舍五入进行转化处理确保精度正确
+    if (!Number.isInteger(num)) {
+        if (num > 0) {
+            value = (Math.round((num + Number.EPSILON) * pow) / pow).toString();
+        }
+        else if (num < 0) {
+            value = (Math.round((num - Number.EPSILON) * pow) / pow).toString();
+        }
+    }
+    value = scientificToNumber(value);
+    const [integer, decimal = ''] = value.split('.');
+    if (digit > 0) {
+        return `${integer}.${padEnd(decimal, digit)}`;
+    }
+    return integer;
+}
+/**
+ * 添加千位分隔符
+ * @param fixedString
+ * @param digit
+ */
+export function addDelimiter(fixedString, digit) {
+    const len = fixedString.length;
+    let result = '';
+    const decimalPoint = digit > 0 ? digit + 1 : 0;
+    for (let i = len - 1; i >= 0; i--) {
+        const stepFromTail = len - 1 - i;
+        const char = fixedString.charAt(i);
+        if (stepFromTail <= decimalPoint) {
+            // 小数部分不处理
+            result = char + result;
+        }
+        else {
+            if ((stepFromTail - decimalPoint) % 3 === 0) {
+                if (char !== '-') {
+                    result = ',' + result;
+                }
+            }
+            result = char + result;
+        }
+    }
+    return result;
+}
+/**
+ * 格式化：添加千分符，四舍五入
+ * @param val
+ * @param digits
+ */
+const formatNumber = (val, digits = 0) => {
+    return isNaN(val) ? val : addDelimiter(customToFixed(val, digits), digits);
+};
+const defaultAppCloud = { callDataSource, callWedaApi };
+export default function StatisticsCard({ dataSource, filterData, field, operationType, label, isCountEmpty, isShowUnit, unit, decimalDigits, suffix, className, style, events, id, role, appCloud = defaultAppCloud, }) {
+    const [val, setVal] = useState(defaultVal);
+    const isMounted = useIsMounted();
+    async function getSourceData(dataSource, filterData, field, operationType, isCountEmpty) {
+        const where = (filterData === null || filterData === void 0 ? void 0 : filterData.map)
+            ? filterData.map((val) => {
+                let arrLogicData = val.logicData;
+                if (val.logicData && val.logicData.length > 0) {
+                    arrLogicData = val.logicData.map((mval) => {
+                        return {
+                            Key: mval.key,
+                            Rel: mval.rel,
+                            Value: mval.value,
+                            Logic: mval.logic,
+                        };
+                    });
+                }
+                return {
+                    GroupLogic: val.groupLogic,
+                    LogicData: arrLogicData,
+                };
+            })
+            : [];
+        const params = {
+            dataSourceName: dataSource === null || dataSource === void 0 ? void 0 : dataSource.name,
+            where,
+            value: [
+                {
+                    Key: field === null || field === void 0 ? void 0 : field.name,
+                    OperationType: operationType,
+                    IsCountEmpty: isCountEmpty,
+                },
+            ],
+        };
+        try {
+            if ((dataSource === null || dataSource === void 0 ? void 0 : dataSource.type) === 'database') {
+                return await (appCloud === null || appCloud === void 0 ? void 0 : appCloud.callWedaApi({
+                    action: 'DescribeChartCardData',
+                    data: params,
+                }));
+            }
+            return await (appCloud === null || appCloud === void 0 ? void 0 : appCloud.callDataSource({
+                dataSourceName: dataSource === null || dataSource === void 0 ? void 0 : dataSource.name,
+                methodName: dataSource === null || dataSource === void 0 ? void 0 : dataSource.methodName,
+            }));
+        }
+        catch {
+            return [];
+        }
+    }
+    const initCard = async () => {
+        var _a, _b;
+        // 内部数据源需要字段和统计方式，外部数据源不需要
+        if (((dataSource === null || dataSource === void 0 ? void 0 : dataSource.type) === 'database' && field && operationType) ||
+            (dataSource && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.type) !== 'database')) {
+            let data = await getSourceData(dataSource, filterData, field, operationType, isCountEmpty);
+            // 自定义连接器 返回处理
+            if ((dataSource === null || dataSource === void 0 ? void 0 : dataSource.type) !== 'database' && (data === null || data === void 0 ? void 0 : data.result)) {
+                data = data === null || data === void 0 ? void 0 : data.result;
+            }
+            if (data === null || data === void 0 ? void 0 : data.length) {
+                const val = isNaN((_a = data[0]) === null || _a === void 0 ? void 0 : _a.Value) ? 0 : (_b = data[0]) === null || _b === void 0 ? void 0 : _b.Value;
+                isMounted && setVal(val);
+            }
+            else {
+                // 返回数据为空 使用 0
+                isMounted && setVal(0);
+            }
+        }
+        else {
+            // 没有配置数据使用默认数据
+            isMounted && setVal(defaultVal);
+        }
+    };
+    useDeepCompareEffect(() => {
+        initCard();
+    }, [dataSource, filterData, field, operationType, isCountEmpty]);
+    const platform = usePlatform();
+    const cls = classNames({
+        'weda-ui': true,
+        [CLASS_PREFIX]: true,
+        [className]: className,
+        [`${CLASS_PREFIX}-mobile`]: platform === 'h5',
+        [`${CLASS_PREFIX}-pc`]: platform !== 'h5',
+    });
+    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement("div", { id: id, role: role, className: cls, style: style, onClick: (e) => events.tap({}, { originEvent: e }) },
+            React.createElement("div", { className: `${CLASS_PREFIX}__wrapper` },
+                React.createElement("div", { className: `${CLASS_PREFIX}__title` }, label),
+                React.createElement("div", { className: `${CLASS_PREFIX}__detail` },
+                    React.createElement("div", { className: `${CLASS_PREFIX}__count` },
+                        isShowUnit ? formatNumber(val / unit, decimalDigits) : val,
+                        isShowUnit && (React.createElement("label", { className: `${CLASS_PREFIX}__unit` }, suffix))))))));
+}

package/dist/web/components/chart/statisticsCard/interface.d.ts

@@ -0,0 +1,13 @@
+export interface IDataSource {
+    name: string;
+    type: string;
+    subType: string;
+    provider?: string;
+    methodName: string;
+}
+export interface IField {
+    format: string;
+    type: string;
+    title: string;
+    name: string;
+}

package/dist/web/components/chart/statisticsCard/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/web/components/container/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+export default function Container({ children, title, events, className, style, id, }: PropsType): JSX.Element;
+export interface PropsType extends CommonPropsType {
+    title?: string;
+}

package/dist/web/components/container/index.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import classNames from '../../utils/classnames';
+import { emptyObject } from '../../utils/constant';
+export default function Container({ children, title, events = emptyObject, className, style, id, }) {
+    return (React.createElement("div", { role: "container", id: id, style: style, className: classNames({ 'weda-ui': true, [className]: className }), title: title, onClick: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.tap) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, onContextMenu: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.longpress) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, onTouchStart: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.touchstart) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, onTouchMove: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.touchmove) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, onTouchCancel: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.touchcancel) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, onTouchEnd: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.touchend) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); } }, children));
+}

package/dist/web/components/dataView/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { IDataView } from './interface';
+/**
+ * 数据容器-列表视图
+ */
+export default function DataView(props: IDataView): JSX.Element;

package/dist/web/components/dataView/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ListView from '../listView';
+/**
+ * 数据容器-列表视图
+ */
+export default function DataView(props) {
+    return (React.createElement(ListView, { ...props, isRecords: false, orderBy: undefined, orderType: undefined, template: "none", pageSize: 1, pagination: "none", beforeDataChange: (values) => values === null || values === void 0 ? void 0 : values[0] }));
+}

package/dist/web/components/dataView/interface.d.ts

@@ -0,0 +1,5 @@
+import { IDataContainer } from '../listView/interface';
+/**
+ * 数据容器-数据视图
+ */
+export declare type IDataView = IDataContainer;

package/dist/web/components/dataView/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/web/components/drawer/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { DrawerProps } from 'tea-component';
+import type { CommonPropsType } from '../../types';
+declare const TeaDrawer: ({ size, title, style, events, visible, subtitle, showMask, className, placement, extraSlot, footerSlot, childrenSlot, disableCloseIcon, outerClickClosable, }: PropsType) => JSX.Element;
+export interface PropsType extends CommonPropsType, Pick<DrawerProps, 'size' | 'title' | 'showMask' | 'placement' | 'disableCloseIcon' | 'outerClickClosable' | 'subtitle'> {
+    visible: boolean;
+    title?: string;
+    extraSlot?: React.ReactNode;
+    footerSlot?: React.ReactNode;
+    childrenSlot?: React.ReactNode;
+}
+export default TeaDrawer;
+export { TeaDrawer };

package/dist/web/components/drawer/index.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ConfigProvider, Drawer } from 'tea-component';
+const TeaDrawer = ({ size, title, style, events, visible, subtitle, showMask, className, placement, extraSlot, footerSlot, childrenSlot, disableCloseIcon, outerClickClosable, }) => {
+    const eventsList = {
+        onClose: () => (events === null || events === void 0 ? void 0 : events.onClose) && events.onClose({}),
+        onExited: () => (events === null || events === void 0 ? void 0 : events.onExited) && events.onExited({}),
+    };
+    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement(Drawer, { size: size, title: title, style: style, visible: visible, extra: extraSlot, footer: footerSlot, subtitle: subtitle, showMask: showMask, className: className, placement: placement, disableCloseIcon: disableCloseIcon, outerClickClosable: outerClickClosable, ...eventsList }, childrenSlot)));
+};
+export default TeaDrawer;
+export { TeaDrawer };

package/dist/web/components/form/checkbox/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { CommonFormPropsType } from '../types';
+export default function Checkbox({ id, className, style, events, name, label, labelVisible, format, enumName, range, layout, disabled, requiredFlag, decorator, controlValue, }: PropsType): JSX.Element;
+export interface PropsType extends CommonFormPropsType {
+    range?: Readonly<{
+        label: string;
+        value: any;
+        [key: string]: any;
+    }[]>;
+    format?: string;
+    enumName?: string;
+    controlValue?: [];
+}

package/dist/web/components/form/checkbox/index.js

@@ -0,0 +1,167 @@
+import React, { useEffect, useState } from 'react';
+import { Checkbox as TeaCheckbox, ConfigProvider } from 'tea-component';
+import classNames from '../../../utils/classnames';
+import getLocalCounter from '../../../utils/getLocalCounter';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import fromEntries from 'object.fromentries';
+import { usePlatform } from '../../../utils/platform';
+import { renderDecorator } from '../renderDecorator';
+import { callWedaApi } from '../../../utils/tcb';
+import destr from 'destr';
+import { emptyArray, emptyObject } from '../../../utils/constant';
+export default function Checkbox({ 
+// 系统属性
+id, className, style, events = emptyObject, 
+// 组件属性
+name = 'formCheckbox', label = '标题', labelVisible = true, format = '', enumName = '', range = emptyArray, layout = 'horizontal', disabled = false, requiredFlag = false, decorator, controlValue, }) {
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-checkbox': true,
+        [className]: className,
+    });
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
+    const subCls = classNames({
+        'weui-cell': isH5,
+        'weui-cell_active': isH5,
+        'weui-check__label': isH5,
+        'weui-cell_disabled': isH5 && disabled,
+    });
+    const [option, setOption] = useState(range);
+    const [enumOptions, setEnumOptions] = useState([]);
+    const [checkedItems, setCheckedItems] = React.useState(platform === 'h5'
+        ? fromEntries(option.map(({ value, checked }) => [value, !!checked]))
+        : option.filter(({ checked }) => checked).map(({ value }) => value));
+    // 两次range不同时, 需要刷新checkedItems
+    const prevRangeRef = React.useRef();
+    React.useEffect(() => {
+        if (!isObjectEqual(prevRangeRef.current, option)) {
+            prevRangeRef.current = JSON.parse(JSON.stringify(option));
+            setCheckedItems(fromEntries(option.map(({ value, checked }) => [value, !!checked])));
+        }
+    });
+    useEffect(() => {
+        // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+        if (format === 'x-enum' && enumName) {
+            fetchData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+        }
+    }, []);
+    useEffect(() => {
+        if (format === 'x-enum') {
+            const opt = enumOptions &&
+                enumOptions.map((item) => {
+                    const checked = controlValue && controlValue.find((val) => val === item.value);
+                    return {
+                        value: item.value,
+                        label: item.label,
+                        checked: !!checked,
+                    };
+                });
+            setOption(opt);
+        }
+    }, [controlValue]);
+    useEffect(() => {
+        if (format !== 'x-enum') {
+            setOption(range);
+        }
+    }, [range]);
+    const fetchData = async (param) => {
+        var _a, _b, _c;
+        const data = await callWedaApi({
+            action: 'DescribeGeneralOptionsDetailList',
+            data: param,
+        });
+        /* istanbul ignore next */
+        const config = (_c = destr((_b = (_a = data === null || data === void 0 ? void 0 : data.Items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.Config)) !== null && _c !== void 0 ? _c : [];
+        const enumOption = config.map((item) => {
+            return {
+                label: item.value,
+                value: item.key,
+                checked: false,
+            };
+        });
+        setEnumOptions(enumOption);
+        const opt = enumOption &&
+            enumOption.map((item) => {
+                const checked = controlValue && controlValue.find((val) => val === item.value);
+                return {
+                    value: item.value,
+                    label: item.label,
+                    checked: !!checked,
+                };
+            });
+        setOption(opt);
+    };
+    /**
+     * 在ios h5端, label和input的绑定不生效
+     * 导致 onChange 事件触发有问题, 所以改为监听 onClick 事件
+     */
+    const getChangeHandler = function (value) {
+        const onChange = function (e) {
+            e.stopPropagation();
+            const checked = !checkedItems[value];
+            const newMap = Object.assign({}, checkedItems, { [value]: checked });
+            if (!disabled) {
+                setCheckedItems(newMap);
+                events.change({
+                    value: Object.entries(newMap)
+                        .filter(([, checked]) => checked)
+                        .map(([value]) => value),
+                }, { originEvent: e });
+            }
+        };
+        return onChange;
+    };
+    // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
+    const hashcode = React.useMemo(() => getLocalCounter(), []);
+    let checkboxElement;
+    if (platform === 'h5') {
+        checkboxElement = option.map(({ label, value }, index) => {
+            const _id = `checkbox-${hashcode}-${index}`;
+            const _name = `checkbox-${hashcode}-${name}`;
+            return (React.createElement("div", { key: _id, onClickCapture: getChangeHandler(value), className: subCls },
+                React.createElement("div", { className: "weui-cell__hd" },
+                    React.createElement("input", { type: "checkbox", className: "weui-check", value: value, id: _id, name: _name, checked: checkedItems[value], disabled: disabled }),
+                    React.createElement("i", { className: "weui-icon-checked" })),
+                React.createElement("div", { className: "weui-cell__bd" },
+                    React.createElement("p", null, label))));
+        });
+    }
+    else {
+        checkboxElement = (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+            React.createElement(TeaCheckbox.Group, { disabled: disabled, value: Object.entries(checkedItems)
+                    .filter(([, checked]) => checked)
+                    .map(([value]) => value), onChange: (value) => {
+                    const newMap = option
+                        .map((opt) => opt.value)
+                        .reduce((acc, cur) => {
+                        const idx = value.indexOf(cur);
+                        if (idx < 0) {
+                            acc[cur] = false;
+                        }
+                        else {
+                            acc[cur] = true;
+                        }
+                        return acc;
+                    }, {});
+                    setCheckedItems(newMap);
+                    events.change({
+                        value: Object.entries(newMap)
+                            .filter(([, checked]) => checked)
+                            .map(([value]) => value),
+                    });
+                } }, option.map(({ value, label }, index) => {
+                const _id = `checkbox-${hashcode}-${index}`;
+                return (React.createElement(TeaCheckbox, { key: _id, name: value, id: _id }, label));
+            }))));
+    }
+    return renderDecorator(checkboxElement, decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: true,
+        requiredFlag,
+    });
+}