@talend/react-forms
Version:
React forms library based on json schema form.
239 lines (234 loc) • 7.64 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ICONS_MAPPING = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _Text = _interopRequireDefault(require("../Text"));
var _Widget = _interopRequireDefault(require("../../Widget"));
var _ComparatorModule = _interopRequireDefault(require("./Comparator.module.scss"));
var _reactComponents = require("@talend/react-components");
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
const ICONS_MAPPING = exports.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 => (0, _lodash.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__*/(0, _jsxRuntime.jsxs)("span", {
className: (0, _classnames.default)(_ComparatorModule.default.operator, 'tf-comparator-operator', {
[_ComparatorModule.default.selected]: selected
}),
children: [symbol && !icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _classnames.default)(_ComparatorModule.default.symbol, 'tf-comparator-operator-symbol'),
children: symbol
}), name && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _classnames.default)(_ComparatorModule.default.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 _react.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _classnames.default)(_ComparatorModule.default.comparator),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.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__*/(0, _jsxRuntime.jsx)(_Widget.default, {
...this.props,
onChange: this.onChange,
onFinish: this.onFinish,
schema: this.getValueSchema()
})]
});
}
}
if (process.env.NODE_ENV !== 'production') {
Comparator.propTypes = {
..._Text.default.propTypes,
schema: _propTypes.default.shape({
autoFocus: _propTypes.default.bool,
description: _propTypes.default.string,
disabled: _propTypes.default.bool,
key: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
items: _propTypes.default.array,
readOnly: _propTypes.default.bool,
title: _propTypes.default.string
}),
value: _propTypes.default.object
};
OperatorListElement.propTypes = {
symbol: _propTypes.default.string,
name: _propTypes.default.string,
icon: _propTypes.default.string,
selected: _propTypes.default.bool
};
}
Comparator.defaultProps = {
value: {}
};
var _default = exports.default = Comparator;
//# sourceMappingURL=Comparator.component.js.map