@gravity-ui/dynamic-forms 1.0.0 → 1.0.2

package/build/esm/lib/kit/components/LongValue/LongValue.css

@@ -0,0 +1,15 @@
+.df-long-value {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.df-long-value_open {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.df-long-value_long {
+  cursor: pointer;
+}
+.df-long-value_long:hover {
+  color: var(--yc-color-text-secondary);
+}

package/build/esm/lib/kit/components/LongValue/LongValue.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './LongValue.css';
+export interface LongValueProps {
+    value?: string | number | boolean;
+    className?: string;
+}
+export declare const LongValue: React.FC<LongValueProps>;

package/build/esm/lib/kit/components/LongValue/LongValue.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { block } from '../../utils';
+import './LongValue.css';
+const b = block('long-value');
+export const LongValue = ({ value, className }) => {
+    const prevValue = React.useRef(null);
+    const ref = React.useRef(null);
+    const [open, setOpen] = React.useState(false);
+    const [long, setLong] = React.useState(false);
+    const handleClick = React.useCallback(() => setOpen((f) => !f), [setOpen]);
+    React.useEffect(() => {
+        if (ref.current) {
+            if (value !== prevValue.current) {
+                const { offsetWidth, scrollWidth } = ref.current;
+                if (offsetWidth < scrollWidth) {
+                    if (!long) {
+                        setLong(true);
+                    }
+                }
+                else {
+                    if (long) {
+                        setLong(false);
+                    }
+                    if (open) {
+                        setOpen(false);
+                    }
+                }
+                prevValue.current = value;
+            }
+        }
+    });
+    return (React.createElement("div", { ref: ref, className: b({ open, long }, className), onClick: long ? handleClick : undefined }, value));
+};

package/build/esm/lib/kit/components/LongValue/index.d.ts

@@ -0,0 +1 @@
+export * from './LongValue';

package/build/esm/lib/kit/components/LongValue/index.js

@@ -0,0 +1 @@
+export * from './LongValue';

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css

@@ -0,0 +1,55 @@
+.df-simple-vertical-accordeon {
+  margin-bottom: 20px;
+}
+.df-simple-vertical-accordeon:last-child {
+  margin-bottom: 0;
+}
+.df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
+  padding-left: 20px;
+  margin-left: 5px;
+  border-left: 1px solid var(--yc-color-line-generic-accent);
+}
+.df-simple-vertical-accordeon__header {
+  display: flex;
+  align-items: center;
+}
+.df-simple-vertical-accordeon__header-inner {
+  margin-left: -13px;
+}
+.df-simple-vertical-accordeon__title {
+  font-weight: 500;
+}
+.df-simple-vertical-accordeon__title_size_s {
+  margin-bottom: 0;
+  font-size: var(--yc-text-body-font-size);
+}
+.df-simple-vertical-accordeon__title_size_m {
+  margin-bottom: 1px;
+  font-size: var(--yc-text-body2-font-size);
+}
+.df-simple-vertical-accordeon__title_size_l {
+  margin-bottom: 2px;
+  font-size: var(--yc-text-body3-font-size);
+}
+.df-simple-vertical-accordeon__tooltip {
+  margin-right: 8px;
+}
+.df-simple-vertical-accordeon__tooltip .yc-help-popover {
+  display: flex;
+}
+.df-simple-vertical-accordeon__tooltip .yc-help-popover > span {
+  display: flex;
+}
+.df-simple-vertical-accordeon__chevron {
+  transform: rotate(-90deg);
+}
+.df-simple-vertical-accordeon__chevron_open {
+  transform: none;
+}
+.df-simple-vertical-accordeon__body {
+  margin-top: 4px;
+  padding-top: 6px;
+}
+.df-simple-vertical-accordeon__body_hidden {
+  display: none;
+}

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import './SimpleVerticalAccordeon.css';
+interface SimpleVerticalAccordeonProps {
+    children: React.ReactNode;
+    title: string;
+    titleSize?: 's' | 'm' | 'l';
+    note?: string;
+    openTitle?: string;
+    open: boolean;
+    headerActionsTemplate?: React.ReactNode;
+    className?: string;
+    contentClassName?: string;
+    buttonClassName?: string;
+    onOpenChange?: (open: boolean) => void;
+    hideInsteadOfDestroy?: boolean;
+    withBranchView?: boolean;
+    viewLayout?: boolean;
+}
+interface SimpleVerticalAccordeonState {
+    open: boolean;
+    hidden: boolean;
+    isFirstRender: boolean;
+}
+export declare class SimpleVerticalAccordeon extends React.Component<SimpleVerticalAccordeonProps, SimpleVerticalAccordeonState> {
+    static defaultProps: {
+        titleSize: string;
+        open: boolean;
+        withBranchView: boolean;
+    };
+    componentRef: React.RefObject<HTMLDivElement>;
+    constructor(props: SimpleVerticalAccordeonProps);
+    componentDidUpdate(prevProps: Readonly<SimpleVerticalAccordeonProps>): void;
+    componentDidMount(): void;
+    render(): false | JSX.Element | null;
+    checkVisibility: () => void;
+    private handleClick;
+    private getTitle;
+    private getTooltip;
+}
+export {};

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { ChevronDown } from '@gravity-ui/icons';
+import { Button, HelpPopover, Icon } from '@gravity-ui/uikit';
+import { block } from '../../utils';
+import './SimpleVerticalAccordeon.css';
+const b = block('simple-vertical-accordeon');
+export class SimpleVerticalAccordeon extends React.Component {
+    constructor(props) {
+        super(props);
+        this.componentRef = React.createRef();
+        this.checkVisibility = () => {
+            if (this.props.viewLayout) {
+                if (this.componentRef.current &&
+                    this.componentRef.current.children.length &&
+                    this.state.hidden) {
+                    this.setState({ hidden: false });
+                }
+                else if (this.componentRef.current &&
+                    !this.componentRef.current.children.length &&
+                    !this.state.hidden) {
+                    this.setState({ hidden: true });
+                }
+            }
+        };
+        this.handleClick = () => {
+            const { onOpenChange } = this.props;
+            const open = !this.state.open;
+            this.setState({ open });
+            if (onOpenChange) {
+                onOpenChange(open);
+            }
+        };
+        this.state = { open: props.open, hidden: true, isFirstRender: true };
+    }
+    componentDidUpdate(prevProps) {
+        const { open } = this.props;
+        if (prevProps.open !== open) {
+            this.setState({ open });
+        }
+        this.checkVisibility();
+    }
+    componentDidMount() {
+        this.setState({ isFirstRender: false });
+        this.checkVisibility();
+    }
+    render() {
+        const { titleSize, children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, } = this.props;
+        const { open, hidden, isFirstRender } = this.state;
+        const content = hideInsteadOfDestroy ? (React.createElement("div", { ref: this.componentRef, className: b('body', { hidden: !open }) }, children)) : (open && (React.createElement("div", { ref: this.componentRef, className: b('body', contentClassName) }, children)));
+        if (viewLayout && !isFirstRender && hidden) {
+            return null;
+        }
+        return (Boolean(React.Children.count(children)) && (React.createElement("div", { className: b({ branch: withBranchView, view: viewLayout }, className) },
+            React.createElement("div", { className: b('header') },
+                React.createElement(Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick },
+                    React.createElement("b", { className: b('title', { size: titleSize }) }, this.getTitle()),
+                    React.createElement(Icon, { data: ChevronDown, className: b('chevron', { open }), size: 16 })),
+                this.getTooltip(),
+                headerActionsTemplate ? headerActionsTemplate : null),
+            content)));
+    }
+    getTitle() {
+        const { openTitle, title } = this.props;
+        if (!openTitle) {
+            return title;
+        }
+        return this.state.open ? openTitle : title;
+    }
+    getTooltip() {
+        const { note } = this.props;
+        return note ? (React.createElement("span", { className: b('tooltip') },
+            React.createElement(HelpPopover, { htmlContent: note, placement: ['bottom', 'top'] }))) : null;
+    }
+}
+SimpleVerticalAccordeon.defaultProps = {
+    titleSize: 's',
+    open: false,
+    withBranchView: false,
+};

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/index.d.ts

@@ -0,0 +1 @@
+export * from './SimpleVerticalAccordeon';

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/index.js

@@ -0,0 +1 @@
+export * from './SimpleVerticalAccordeon';

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.d.ts

@@ -0,0 +1,2 @@
+import { ArrayViewLayoutProps, ObjectViewLayoutProps } from '../../../../core';
+export declare const ViewAccordeon: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ value, spec, children, }: T) => JSX.Element | null;

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { isNotEmptyValue } from '../../../utils';
+import { SimpleVerticalAccordeon } from '../../SimpleVerticalAccordeon';
+export const ViewAccordeon = ({ value, spec, children, }) => {
+    const [open, setOpen] = React.useState(true);
+    if (!isNotEmptyValue(value, spec)) {
+        return null;
+    }
+    return (React.createElement(SimpleVerticalAccordeon, { title: spec.viewSpec.layoutTitle || '', open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
+};

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeon/index.d.ts

@@ -0,0 +1 @@
+export * from './ViewAccordeon';

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeon/index.js

@@ -0,0 +1 @@
+export * from './ViewAccordeon';

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.d.ts

@@ -0,0 +1,2 @@
+import { ArrayViewLayoutProps, ObjectViewLayoutProps } from '../../../../core';
+export declare const ViewAccordeonCard: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ value, spec, children, }: T) => JSX.Element | null;

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AccordeonCard } from '../../';
+import { isNotEmptyValue } from '../../../utils';
+export const ViewAccordeonCard = ({ value, spec, children, }) => {
+    const [open, setOpen] = React.useState(true);
+    const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
+    if (!isNotEmptyValue(value, spec)) {
+        return null;
+    }
+    return (React.createElement(AccordeonCard, { header: spec.viewSpec.layoutTitle || '', open: open, onToggle: onToggle, className: "df-accordeon-card-layout" }, children));
+};

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/index.d.ts

@@ -0,0 +1 @@
+export * from './ViewAccordeonCard';

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/index.js

@@ -0,0 +1 @@
+export * from './ViewAccordeonCard';

package/build/esm/lib/kit/components/ViewLayouts/ViewCardAccordeon.d.ts

@@ -0,0 +1,2 @@
+import { ArrayViewLayoutProps, ObjectViewLayoutProps } from '../../../core';
+export declare const ViewCardAccordeon: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ value, spec, children, }: T) => JSX.Element | null;

package/build/esm/lib/kit/components/ViewLayouts/ViewCardAccordeon.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Card } from '../';
+import { isNotEmptyValue } from '../../utils';
+export const ViewCardAccordeon = ({ value, spec, children, }) => {
+    const [open, setOpen] = React.useState(true);
+    const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
+    if (!isNotEmptyValue(value, spec)) {
+        return null;
+    }
+    return (React.createElement(Card, { title: spec.viewSpec.layoutTitle, open: open, onToggle: onToggle, checkEmptyBody: true }, children));
+};

package/build/esm/lib/kit/components/ViewLayouts/ViewCardSection.d.ts

@@ -0,0 +1,2 @@
+import { FormValue, Spec, ViewLayoutProps } from '../../../core';
+export declare const ViewCardSection: <T extends FormValue, S extends Spec>({ value, spec, children, }: ViewLayoutProps<T, S>) => JSX.Element | null;

package/build/esm/lib/kit/components/ViewLayouts/ViewCardSection.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Card } from '../../components';
+import { isNotEmptyValue } from '../../utils';
+export const ViewCardSection = ({ value, spec, children, }) => {
+    if (!isNotEmptyValue(value, spec)) {
+        return null;
+    }
+    return (React.createElement(Card, { title: spec.viewSpec.layoutTitle, alwaysOpen: true, checkEmptyBody: true }, children));
+};

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css

@@ -0,0 +1,40 @@
+.df-view-row {
+  width: 100%;
+  display: flex;
+  margin-bottom: 20px;
+}
+.df-view-row:last-child {
+  margin-bottom: 0;
+}
+.df-view-row__left {
+  width: 300px;
+  max-width: 300px;
+  min-width: 300px;
+  display: flex;
+  align-items: baseline;
+  overflow: hidden;
+}
+.df-view-row__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--yc-color-text-secondary);
+}
+.df-view-row__dots {
+  min-width: 40px;
+  flex-grow: 1;
+  margin: 0 2px;
+  border-bottom: 1px dotted var(--yc-color-text-secondary);
+}
+.df-view-row__right {
+  max-width: 480px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.df-view-row__right > .df-view-transparent {
+  margin-bottom: 6px;
+}
+.df-view-row__right > .df-view-transparent:last-child {
+  margin-bottom: 0;
+}

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.d.ts

@@ -0,0 +1,3 @@
+import { FormValue, Spec, ViewLayoutProps } from '../../../../core';
+import './ViewRow.css';
+export declare const ViewRow: <T extends FormValue, S extends Spec>({ value, spec, children, }: ViewLayoutProps<T, S>) => JSX.Element | null;

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { block, isNotEmptyValue } from '../../../utils';
+import './ViewRow.css';
+const b = block('view-row');
+export const ViewRow = ({ value, spec, children, }) => {
+    if (!isNotEmptyValue(value, spec)) {
+        return null;
+    }
+    return (React.createElement("div", { className: b() },
+        React.createElement("div", { className: b('left') },
+            React.createElement("div", { className: b('title'), title: spec.viewSpec.layoutTitle }, spec.viewSpec.layoutTitle),
+            React.createElement("div", { className: b('dots') })),
+        React.createElement("div", { className: b('right') }, children)));
+};

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/index.d.ts

@@ -0,0 +1 @@
+export * from './ViewRow';

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/index.js

@@ -0,0 +1 @@
+export * from './ViewRow';

package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/ViewRow2.css

@@ -0,0 +1,42 @@
+.df-view-row2 {
+  width: 100%;
+  display: flex;
+  border-bottom: 1px solid var(--yc-color-line-generic);
+  padding: 11px 0;
+}
+.df-view-row2:last-child {
+  border: none;
+}
+.df-view-row2_next-not-row {
+  margin-bottom: 20px;
+  border-bottom: none;
+}
+.df-view-row2__left {
+  width: 190px;
+  max-width: 190px;
+  min-width: 190px;
+  display: flex;
+  align-items: baseline;
+  overflow: hidden;
+  padding-right: 10px;
+}
+.df-view-row2__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 700;
+  color: var(--yc-color-text-primary);
+}
+.df-view-row2__right {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--yc-color-text-secondary);
+}
+.df-view-row2__right > .df-view-transparent {
+  margin-bottom: 6px;
+}
+.df-view-row2__right > .df-view-transparent:last-child {
+  margin-bottom: 0;
+}

package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/ViewRow2.d.ts

@@ -0,0 +1,3 @@
+import { FormValue, Spec, ViewLayoutProps } from '../../../../core';
+import './ViewRow2.css';
+export declare const ViewRow2: <T extends FormValue, S extends Spec>({ value, spec, children, }: ViewLayoutProps<T, S>) => JSX.Element | null;

package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/ViewRow2.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { block, isNotEmptyValue } from '../../../utils';
+import './ViewRow2.css';
+const b = block('view-row2');
+const isNextNodeNotViewRow2 = (node) => {
+    var _a;
+    return Boolean(node === null || node === void 0 ? void 0 : node.nextElementSibling) &&
+        !((_a = node === null || node === void 0 ? void 0 : node.nextElementSibling) === null || _a === void 0 ? void 0 : _a.className.includes('df-view-row2'));
+};
+export const ViewRow2 = ({ value, spec, children, }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a, _b;
+        if (isNextNodeNotViewRow2(ref.current) &&
+            !((_a = ref.current) === null || _a === void 0 ? void 0 : _a.className.includes('df-view-row2_next-not-row'))) {
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.classList.add('df-view-row2_next-not-row');
+        }
+    });
+    if (!isNotEmptyValue(value, spec)) {
+        return null;
+    }
+    return (React.createElement("div", { ref: ref, className: b({ 'next-not-row': isNextNodeNotViewRow2(ref.current) }) },
+        React.createElement("div", { className: b('left') },
+            React.createElement("div", { className: b('title'), title: spec.viewSpec.layoutTitle }, spec.viewSpec.layoutTitle)),
+        React.createElement("div", { className: b('right') }, children)));
+};

package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/index.d.ts

@@ -0,0 +1 @@
+export * from './ViewRow2';

package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/index.js

@@ -0,0 +1 @@
+export * from './ViewRow2';

package/build/esm/lib/kit/components/ViewLayouts/ViewSection/ViewSection.d.ts

@@ -0,0 +1,5 @@
+import { FormValue, Spec, ViewLayoutProps } from '../../../../core';
+export declare const ViewSection: <T extends FormValue, S extends Spec>(props: ViewLayoutProps<T, S>) => JSX.Element | null;
+export declare const ViewSection2: <T extends FormValue, S extends Spec>(props: ViewLayoutProps<T, S>) => JSX.Element | null;
+export declare const ViewGroup: <T extends FormValue, S extends Spec>(props: ViewLayoutProps<T, S>) => JSX.Element | null;
+export declare const ViewGroup2: <T extends FormValue, S extends Spec>(props: ViewLayoutProps<T, S>) => JSX.Element | null;

package/build/esm/lib/kit/components/ViewLayouts/ViewSection/ViewSection.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { isNotEmptyValue } from '../../../utils';
+import { Group, Group2, Section, Section2 } from '../../Layouts';
+export const ViewSection = (props) => isNotEmptyValue(props.value, props.spec) ? React.createElement(Section, Object.assign({}, props, { ignoreDescription: true })) : null;
+export const ViewSection2 = (props) => isNotEmptyValue(props.value, props.spec) ? React.createElement(Section2, Object.assign({}, props, { ignoreDescription: true })) : null;
+export const ViewGroup = (props) => isNotEmptyValue(props.value, props.spec) ? React.createElement(Group, Object.assign({}, props, { ignoreDescription: true })) : null;
+export const ViewGroup2 = (props) => isNotEmptyValue(props.value, props.spec) ? React.createElement(Group2, Object.assign({}, props, { ignoreDescription: true })) : null;

package/build/esm/lib/kit/components/ViewLayouts/ViewSection/index.d.ts

@@ -0,0 +1 @@
+export * from './ViewSection';

package/build/esm/lib/kit/components/ViewLayouts/ViewSection/index.js

@@ -0,0 +1 @@
+export * from './ViewSection';

package/build/esm/lib/kit/components/ViewLayouts/ViewSectionCard/ViewSectionCard.d.ts

@@ -0,0 +1,3 @@
+import { FormValue, Spec, ViewLayoutProps } from '../../../../core';
+export declare const ViewSectionCard: <T extends FormValue, S extends Spec>(props: ViewLayoutProps<T, S>) => JSX.Element | null;
+export declare const ViewSectionCard2: <T extends FormValue, S extends Spec>(props: ViewLayoutProps<T, S>) => JSX.Element | null;

package/build/esm/lib/kit/components/ViewLayouts/ViewSectionCard/ViewSectionCard.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { isNotEmptyValue } from '../../../utils';
+import { SectionCard, SectionCard2 } from '../../Layouts';
+export const ViewSectionCard = (props) => isNotEmptyValue(props.value, props.spec) ? React.createElement(SectionCard, Object.assign({}, props, { ignoreDescription: true })) : null;
+export const ViewSectionCard2 = (props) => isNotEmptyValue(props.value, props.spec) ? React.createElement(SectionCard2, Object.assign({}, props, { ignoreDescription: true })) : null;

package/build/esm/lib/kit/components/ViewLayouts/ViewSectionCard/index.d.ts

@@ -0,0 +1 @@
+export * from './ViewSectionCard';

package/build/esm/lib/kit/components/ViewLayouts/ViewSectionCard/index.js

@@ -0,0 +1 @@
+export * from './ViewSectionCard';

package/build/esm/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.css

@@ -0,0 +1,14 @@
+.df-view-table-cell {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.df-view-table-cell > .df-view-row:last-child {
+  margin-bottom: 0;
+}
+.df-view-table-cell > .df-view-transparent {
+  margin-bottom: 6px;
+}
+.df-view-table-cell > .df-view-transparent:last-child {
+  margin-bottom: 0;
+}

package/build/esm/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.d.ts

@@ -0,0 +1,3 @@
+import { FormValue, Spec, ViewLayoutProps } from '../../../../core';
+import './ViewTableCell.css';
+export declare const ViewTableCell: <T extends FormValue, S extends Spec>({ value, spec, children, }: ViewLayoutProps<T, S>) => JSX.Element;

package/build/esm/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { block, isNotEmptyValue } from '../../../utils';
+import './ViewTableCell.css';
+const b = block('view-table-cell');
+export const ViewTableCell = ({ value, spec, children, }) => (React.createElement("div", { className: b() }, isNotEmptyValue(value, spec) ? children : '—'));

package/build/esm/lib/kit/components/ViewLayouts/ViewTableCell/index.d.ts

@@ -0,0 +1 @@
+export * from './ViewTableCell';

package/build/esm/lib/kit/components/ViewLayouts/ViewTableCell/index.js

@@ -0,0 +1 @@
+export * from './ViewTableCell';

package/build/esm/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.css

@@ -0,0 +1,6 @@
+.df-view-transparent {
+  margin-bottom: 20px;
+}
+.df-view-transparent:last-child {
+  margin-bottom: 0;
+}

package/build/esm/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.d.ts

@@ -0,0 +1,3 @@
+import { FormValue, Spec, ViewLayoutProps } from '../../../../core';
+import './ViewTransparent.css';
+export declare const ViewTransparent: <T extends FormValue, S extends Spec>({ value, spec, children, }: ViewLayoutProps<T, S>) => JSX.Element | null;

package/build/esm/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { block, isNotEmptyValue } from '../../../utils';
+import './ViewTransparent.css';
+const b = block('view-transparent');
+export const ViewTransparent = ({ value, spec, children, }) => isNotEmptyValue(value, spec) ? React.createElement("div", { className: b() }, children) : null;

package/build/esm/lib/kit/components/ViewLayouts/ViewTransparent/index.d.ts

@@ -0,0 +1 @@
+export * from './ViewTransparent';

package/build/esm/lib/kit/components/ViewLayouts/ViewTransparent/index.js

@@ -0,0 +1 @@
+export * from './ViewTransparent';

package/build/esm/lib/kit/components/ViewLayouts/index.d.ts

@@ -0,0 +1,10 @@
+export * from './ViewAccordeon';
+export * from './ViewAccordeonCard';
+export * from './ViewCardAccordeon';
+export * from './ViewCardSection';
+export * from './ViewRow';
+export * from './ViewRow2';
+export * from './ViewSection';
+export * from './ViewSectionCard';
+export * from './ViewTableCell';
+export * from './ViewTransparent';

package/build/esm/lib/kit/components/ViewLayouts/index.js

@@ -0,0 +1,10 @@
+export * from './ViewAccordeon';
+export * from './ViewAccordeonCard';
+export * from './ViewCardAccordeon';
+export * from './ViewCardSection';
+export * from './ViewRow';
+export * from './ViewRow2';
+export * from './ViewSection';
+export * from './ViewSectionCard';
+export * from './ViewTableCell';
+export * from './ViewTransparent';

package/build/esm/lib/kit/components/Views/ArrayBaseView.d.ts

@@ -0,0 +1,2 @@
+import { ArrayView } from '../../../core';
+export declare const ArrayBaseView: ArrayView;

package/build/esm/lib/kit/components/Views/ArrayBaseView.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ViewController, isCorrectSpec } from '../../../core';
+export const ArrayBaseView = ({ spec, name, value = [] }) => {
+    const itemSpecCorrect = React.useMemo(() => isCorrectSpec(spec.items), [spec.items]);
+    const getItemSpec = React.useCallback((idx) => {
+        if (!itemSpecCorrect) {
+            return null;
+        }
+        const itemSpec = Object.assign({}, spec.items);
+        itemSpec.viewSpec = Object.assign(Object.assign({}, itemSpec.viewSpec), { layoutTitle: itemSpec.viewSpec.layoutTitle
+                ? `${itemSpec.viewSpec.layoutTitle} ${idx + 1}`
+                : `${idx + 1}` });
+        return itemSpec;
+    }, [spec.items, itemSpecCorrect]);
+    const items = React.useMemo(() => value.map((__, idx) => {
+        const itemSpec = getItemSpec(idx);
+        if (!itemSpec) {
+            return null;
+        }
+        return (React.createElement(ViewController, { spec: itemSpec, name: `${name}[${idx}]`, key: `${name}[${idx}]` }));
+    }), [value.length, name, getItemSpec]);
+    if (!itemSpecCorrect) {
+        return null;
+    }
+    return React.createElement(React.Fragment, null, items);
+};