@talend/react-forms/lib-esm/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js

React forms library based on json schema form.

import { useCallback, createElement as _createElement } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { CollapsiblePanel, InlineMessageInformation } from '@talend/design-system';
import { StackVertical } from '@talend/design-system';
import { generateDescriptionId } from '../../Message/generateId';
import Widget from '../../Widget';

/**
 * @return {Arary<string>} itemkey
 * @param {Array<string>} key within an array
 */
import { get } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function getDrillKey(key) {
  let stopped = false;
  return key.reduceRight((acc, value) => {
    if (stopped) {
      return acc;
    }
    if (typeof value === 'number') {
      // finished
      stopped = true;
      return acc;
    }
    acc.splice(0, 0, value);
    return acc;
  }, []);
}
export function defaultTitle(formData, schema, options) {
  var _schema$options2;
  if (schema.title) {
    return schema.title;
  }
  const title = (schema.items || []).reduce((acc, item) => {
    let value;
    if (item.key) {
      const lastKey = getDrillKey(item.key);
      value = get(formData, lastKey.join('.'));
    }
    if (item.items) {
      const sub = defaultTitle(formData, item, options);
      if (sub) {
        acc.push(sub);
      }
    }
    if (item.titleMap && item.titleMap.length > 0) {
      const mappedValue = item.titleMap.find(map => map.value === value);
      if (mappedValue) {
        acc.push(mappedValue.name);
      }
    } else if (value) {
      acc.push(value);
    }
    return acc;
  }, []);
  if (title.length > 0) {
    var _schema$options;
    return title.join((options === null || options === void 0 ? void 0 : options.separator) || ((_schema$options = schema.options) === null || _schema$options === void 0 ? void 0 : _schema$options.separator) || ', ');
  }
  if (options !== null && options !== void 0 && options.emptyTitleFallback) {
    return options.emptyTitleFallback;
  }
  if ((_schema$options2 = schema.options) !== null && _schema$options2 !== void 0 && _schema$options2.emptyTitleFallback) {
    return schema.options.emptyTitleFallback;
  }
  return '';
}

/**
 * createCollapsibleFieldset create a widget with a title function
 * @param {function} title the function called by the component to compute the title
 * @return {function} CollapsibleFieldset react component
 */
// eslint-disable-next-line @typescript-eslint/default-param-last
export default function createCollapsibleFieldset(title = defaultTitle) {
  function CollapsibleFieldset(props) {
    const {
      id,
      schema,
      value,
      actions,
      index,
      ...restProps
    } = props;
    const {
      items,
      managed
    } = schema;
    function onToggleClick() {
      const payload = {
        schema: props.schema,
        value: {
          ...props.value,
          isClosed: !props.value.isClosed
        }
      };
      props.onChange(undefined, payload);
    }
    const getAction = useCallback(() => {
      if (!actions || actions.length === 0 || actions[0] === undefined) {
        return undefined;
      }
      const action = actions[0];
      return {
        ...action,
        tooltip: action.tooltip || action.label,
        callback: action.onClick
      };
    }, [actions]);
    return /*#__PURE__*/_jsx("fieldset", {
      className: classNames('collapsible-panel'),
      children: /*#__PURE__*/_jsxs(CollapsiblePanel, {
        title: title(value, schema),
        onToggleExpanded: onToggleClick,
        index: index,
        managed: !!managed,
        expanded: !value.isClosed,
        action: getAction(),
        children: [schema.description ? /*#__PURE__*/_jsx(InlineMessageInformation, {
          id: generateDescriptionId(id),
          description: schema.description,
          role: undefined,
          "aria-live": undefined
        }, "description") : '', /*#__PURE__*/_jsx(StackVertical, {
          gap: "S",
          align: "stretch",
          children: items.map((itemSchema, idx) => /*#__PURE__*/_createElement(Widget, {
            ...restProps,
            id: id,
            key: `${id}-${idx}`,
            schema: itemSchema,
            value: value
          }))
        })]
      })
    });
  }
  CollapsibleFieldset.defaultProps = {
    value: {},
    actions: []
  };
  CollapsibleFieldset.isCloseable = true;
  if (process.env.NODE_ENV !== 'production') {
    CollapsibleFieldset.propTypes = {
      id: PropTypes.string,
      index: PropTypes.number,
      onChange: PropTypes.func.isRequired,
      schema: PropTypes.shape({
        items: PropTypes.array.isRequired,
        managed: PropTypes.bool,
        description: PropTypes.string
      }).isRequired,
      value: PropTypes.object,
      actions: PropTypes.array
    };
  }
  return CollapsibleFieldset;
}
//# sourceMappingURL=CollapsibleFieldset.component.js.map