@talend/react-forms/lib-esm/UIForm/fields/KeyValue/KeyValue.component.js

React forms library based on json schema form.

import PropTypes from 'prop-types';
import Widget from '../../Widget';
import FieldTemplate from '../FieldTemplate';
import theme from './KeyValue.module.scss';

/**
 * Default part (key or value) schema
 */
import { last } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const defaultPartSchema = {
  schema: {
    type: 'string'
  },
  type: 'text'
};

/**
 * Adapt part (key or value) schema
 * @param parentSchema The KeyValue schema
 * @param part 'key' or 'value'
 */
function getPartSchema(parentSchema, part) {
  const childKey = parentSchema.key.concat(part);
  const childrenSchemas = parentSchema.items || [];
  let childSchema = childrenSchemas.find(item => last(item.key) === part);
  if (!childSchema) {
    childSchema = {};
  }
  return {
    ...defaultPartSchema,
    ...childSchema,
    key: childKey,
    autoFocus: parentSchema.autoFocus || childSchema.autoFocus,
    disabled: parentSchema.disabled || childSchema.disabled,
    readOnly: parentSchema.readOnly || childSchema.readOnly
  };
}
function KeyValue({
  id,
  isValid,
  errorMessage,
  onChange,
  onFinish,
  schema,
  value,
  valueIsUpdating,
  ...restProps
}) {
  const {
    description,
    title,
    labelProps
  } = schema;
  const keySchema = getPartSchema(schema, 'key');
  const valueSchema = getPartSchema(schema, 'value');
  return /*#__PURE__*/_jsx(FieldTemplate, {
    description: description,
    errorMessage: errorMessage,
    errorId: restProps.errorId,
    descriptionId: restProps.descriptionId,
    id: id,
    isValid: isValid,
    label: title,
    labelProps: labelProps,
    required: schema.required,
    valueIsUpdating: valueIsUpdating,
    children: /*#__PURE__*/_jsxs("dl", {
      className: theme['key-value'],
      children: [/*#__PURE__*/_jsx("dt", {
        children: /*#__PURE__*/_jsx(Widget, {
          ...restProps,
          onChange: onChange,
          onFinish: onFinish,
          schema: keySchema,
          value: value.key
        })
      }), /*#__PURE__*/_jsx("dd", {
        children: /*#__PURE__*/_jsx(Widget, {
          ...restProps,
          onChange: onChange,
          onFinish: onFinish,
          schema: valueSchema,
          value: value.value
        })
      })]
    })
  });
}
KeyValue.defaultProps = {
  value: {}
};
if (process.env.NODE_ENV !== 'production') {
  KeyValue.propTypes = {
    id: PropTypes.string,
    isValid: PropTypes.bool,
    errorMessage: PropTypes.string,
    onChange: PropTypes.func.isRequired,
    onFinish: PropTypes.func.isRequired,
    schema: PropTypes.shape({
      autoFocus: PropTypes.bool,
      description: PropTypes.string,
      disabled: PropTypes.bool,
      key: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
      items: PropTypes.array,
      readOnly: PropTypes.bool,
      required: PropTypes.bool,
      title: PropTypes.string,
      labelProps: PropTypes.object
    }),
    value: PropTypes.shape({
      key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    }),
    valueIsUpdating: PropTypes.bool
  };
}
export default KeyValue;
//# sourceMappingURL=KeyValue.component.js.map