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

React forms library based on json schema form.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = createCollapsibleFieldset;
exports.defaultTitle = defaultTitle;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _generateId = require("../../Message/generateId");
var _Widget = _interopRequireDefault(require("../../Widget"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * @return {Arary<string>} itemkey
 * @param {Array<string>} key within an array
 */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;
  }, []);
}
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 = (0, _lodash.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
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 = (0, _react.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__*/(0, _jsxRuntime.jsx)("fieldset", {
      className: (0, _classnames.default)('collapsible-panel'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.CollapsiblePanel, {
        title: title(value, schema),
        onToggleExpanded: onToggleClick,
        index: index,
        managed: !!managed,
        expanded: !value.isClosed,
        action: getAction(),
        children: [schema.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.InlineMessageInformation, {
          id: (0, _generateId.generateDescriptionId)(id),
          description: schema.description,
          role: undefined,
          "aria-live": undefined
        }, "description") : '', /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.StackVertical, {
          gap: "S",
          align: "stretch",
          children: items.map((itemSchema, idx) => /*#__PURE__*/(0, _react.createElement)(_Widget.default, {
            ...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.default.string,
      index: _propTypes.default.number,
      onChange: _propTypes.default.func.isRequired,
      schema: _propTypes.default.shape({
        items: _propTypes.default.array.isRequired,
        managed: _propTypes.default.bool,
        description: _propTypes.default.string
      }).isRequired,
      value: _propTypes.default.object,
      actions: _propTypes.default.array
    };
  }
  return CollapsibleFieldset;
}
//# sourceMappingURL=CollapsibleFieldset.component.js.map