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

React forms library based on json schema form.

function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import PropTypes from 'prop-types';
import { Component } from 'react';
import classNames from 'classnames';
import Text from '../Text';
import Widget from '../../Widget';
import theme from './Comparator.module.scss';
import { ActionDropdown } from "@talend/react-components";
import { last } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const ICONS_MAPPING = {
  equals: 'talend-equal',
  not_equals: 'talend-not-equal',
  contains: 'talend-contains',
  not_contains: 'talend-not-contains',
  starts_with: 'talend-starts-with',
  ends_with: 'talend-ends-with',
  between: 'talend-between',
  greater_than: 'talend-greater-than',
  greater_equals_to: 'talend-greater-than-equal',
  less_than: 'talend-less-than',
  less_equals_to: 'talend-less-than-equal',
  regex: 'talend-regex'
};

/**
 * Format operator title
 * @param operator Operator
 * @param value Operator value as fallback
 * @returns {string} Formatted title
 */
function getFormattedTitle(operator, value) {
  if (operator) {
    if (operator.symbol) {
      return `${operator.symbol} (${operator.name})`;
    }
    return operator.name;
  }
  return value;
}

/**
 * Adapt part (operator or value) schema
 * @param schema The Comparator schema
 * @param part 'operator' or 'value'
 */
function getPartSchema(schema, part) {
  const schemaRest = {
    ...schema
  };
  delete schemaRest.key;
  delete schemaRest.items;
  delete schemaRest.schema;
  delete schemaRest.type;
  delete schemaRest.widget;
  const childKey = schema.key.concat(part);
  const childrenSchemas = schema.items || [];
  let childSchema = childrenSchemas.find(item => last(item.key) === part);
  if (!childSchema) {
    childSchema = {};
  }
  return {
    ...childSchema,
    ...schemaRest,
    key: childKey
  };
}
function OperatorListElement({
  symbol,
  icon,
  name,
  selected
}) {
  if (icon && !name) {
    return null;
  }
  return /*#__PURE__*/_jsxs("span", {
    className: classNames(theme.operator, 'tf-comparator-operator', {
      [theme.selected]: selected
    }),
    children: [symbol && !icon && /*#__PURE__*/_jsx("span", {
      className: classNames(theme.symbol, 'tf-comparator-operator-symbol'),
      children: symbol
    }), name && /*#__PURE__*/_jsx("span", {
      className: classNames(theme.name, 'tf-comparator-operator-name'),
      children: name
    })]
  });
}

// The 'Comparator' is not ready to be used in Apps. Code can (will) change outside the release process until it's ready.",

class Comparator extends Component {
  constructor(props) {
    super(props);
    _defineProperty(this, "getOperatorSchema", getPartSchema.bind(this, this.props.schema, 'operator'));
    _defineProperty(this, "getValueSchema", getPartSchema.bind(this, this.props.schema, 'value'));
    this.onSelect = this.onSelect.bind(this);
    this.onChange = this.onChange.bind(this);
    this.onFinish = this.onFinish.bind(this);
  }
  onSelect(event, {
    value
  }) {
    this.props.onChange(event, {
      schema: this.props.schema,
      value: {
        ...this.props.value,
        operator: value
      }
    });
  }
  onChange(event, {
    value
  }) {
    this.props.onChange(event, {
      schema: this.props.schema,
      value: {
        ...this.props.value,
        value
      }
    });
  }
  onFinish(event) {
    this.props.onFinish(event, {
      schema: this.props.schema,
      value: this.props.value
    }, {
      deepValidation: true
    });
  }
  getFormattedOperators() {
    const {
      schema
    } = this.props;
    const map = schema.titleMap || [];
    const symbols = schema.options && schema.options.symbols || {};
    return this.getOperatorSchema().titleMap.map(({
      value
    }) => {
      const operator = map.find(m => m.value === value);
      const title = getFormattedTitle(operator, value);
      return {
        value,
        title,
        name: operator ? operator.name : '',
        symbol: symbols[value] || value,
        icon: ICONS_MAPPING[value]
      };
    });
  }
  getOperatorsMap() {
    return this.getFormattedOperators().map(({
      value,
      title,
      name,
      symbol,
      icon
    }) => ({
      value,
      title,
      label: /*#__PURE__*/_jsx(OperatorListElement, {
        selected: this.props.value.operator === value,
        name: name,
        symbol: symbol,
        icon: icon
      }),
      icon
    }));
  }
  render() {
    const formatted = this.getFormattedOperators();
    const current = formatted.find(f => f.value === this.props.value.operator);
    return /*#__PURE__*/_jsxs("div", {
      className: classNames(theme.comparator),
      children: [/*#__PURE__*/_jsx(ActionDropdown, {
        id: `comparator-action-${this.props.id}`,
        icon: current && current.icon,
        hideLabel: !!(current && current.icon),
        label: current && (current.icon && current.name ? current.name : current.symbol),
        onSelect: this.onSelect,
        disabled: this.getOperatorSchema().disabled,
        items: this.getOperatorsMap().map(({
          label,
          value,
          title,
          icon
        }, index) => ({
          id: `comparison-operator-${index}`,
          label,
          value,
          title,
          icon
        })),
        noCaret: true
      }), /*#__PURE__*/_jsx(Widget, {
        ...this.props,
        onChange: this.onChange,
        onFinish: this.onFinish,
        schema: this.getValueSchema()
      })]
    });
  }
}
if (process.env.NODE_ENV !== 'production') {
  Comparator.propTypes = {
    ...Text.propTypes,
    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,
      title: PropTypes.string
    }),
    value: PropTypes.object
  };
  OperatorListElement.propTypes = {
    symbol: PropTypes.string,
    name: PropTypes.string,
    icon: PropTypes.string,
    selected: PropTypes.bool
  };
}
Comparator.defaultProps = {
  value: {}
};
export default Comparator;
//# sourceMappingURL=Comparator.component.js.map