chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
326 lines (324 loc) • 11.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _clsx = _interopRequireDefault(require("clsx"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _TagInput = _interopRequireDefault(require("../../react-chayns-tag_input/component/TagInput"));
var _is = require("../../utils/is");
var _PersonsContext = _interopRequireDefault(require("./data/persons/PersonsContext"));
var _PersonsConverter = require("./data/persons/PersonsConverter");
var _PersonFinderView = _interopRequireDefault(require("./PersonFinderView"));
var _VerificationIcon = _interopRequireDefault(require("../../react-chayns-verification_icon/component/VerificationIcon"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
class MultiplePersonFinder extends _react.Component {
constructor(props) {
super(props);
this.state = {
inputValue: props.defaultValue && props.defaultValue[props.context.ObjectMapping.showName] || '',
selectedValue: !!props.defaultValue,
values: props.defaultValues.map(v => {
const value = props.context.ValueConverter ? props.context.ValueConverter(v) : v;
return {
text: value[props.context.ObjectMapping.showName],
value
};
})
};
this.clear = this.clear.bind(this);
this.handleSelect = this.handleSelect.bind(this);
this.handleOnChange = this.handleOnChange.bind(this);
this.handleTagRemove = this.handleTagRemove.bind(this);
}
componentDidUpdate(prevProps, prevState) {
const {
inputValue
} = this.state;
if (!inputValue && prevState.inputValue) {
this.input.focus();
}
}
handleOnChange(inputValue) {
const {
onInput,
max
} = this.props;
const newInputValue = max && max <= this.getValues().length ? '' : inputValue;
this.setState({
inputValue: newInputValue,
selectedValue: false
});
if (onInput) {
for (var _len = arguments.length, other = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
other[_key - 1] = arguments[_key];
}
onInput(newInputValue, ...other);
}
}
handleTagRemove(tag, ev) {
if (this.boxRef && this.boxRef.getHiddenState()) {
var _ev$stopPropagation;
ev === null || ev === void 0 ? void 0 : (_ev$stopPropagation = ev.stopPropagation) === null || _ev$stopPropagation === void 0 ? void 0 : _ev$stopPropagation.call(ev);
}
const {
context: {
ObjectMapping: orm
},
onRemove
} = this.props;
const {
values
} = this.state;
const {
value
} = tag || {};
if (!value) return;
const newValues = values.filter(r => r.value[orm.identifier] !== value[orm.identifier]);
this.setState({
values: newValues
});
this.onChange(newValues);
if (onRemove) {
onRemove(value);
}
}
handleSelect(type, value) {
const {
onAdd,
context: {
ObjectMapping: orm
},
values: valuesProp,
hideVerifiedIcon
} = this.props;
const {
values: valuesState
} = this.state;
const {
ValueConverter
} = _PersonsContext.default;
let values = valuesState;
if (valuesProp) {
values = valuesProp.map(v => {
let retVal = v;
if (!retVal.value) {
retVal = {
value: ValueConverter ? ValueConverter(v) : v
};
}
return retVal;
});
}
const name = value[orm.showName];
if (values.find(v => v.value[orm.identifier] === value[orm.identifier])) {
return;
}
let outValue = {
...value
};
const newValues = [...values, {
text: orm.verified && hideVerifiedIcon !== true ? /*#__PURE__*/_react.default.createElement(_VerificationIcon.default, {
name: name,
verified: value[orm.verified]
}) : name,
value: outValue
}];
this.setState({
inputValue: '',
selectedValue: false,
values: newValues
});
if (onAdd) {
if (outValue && outValue.type === 'PERSON') {
outValue = (0, _PersonsConverter.convertPersonForReturn)(outValue);
}
onAdd(outValue);
}
this.onChange(newValues);
if (this.boxRef) {
setImmediate(this.boxRef.focus);
}
}
onChange(values) {
const {
onChange
} = this.props;
const retVal = values.map(v => v.value);
if (onChange) {
if (retVal.length > 0 && retVal[0].type === 'PERSON') {
onChange(retVal.map(_PersonsConverter.convertPersonForReturn));
} else {
onChange(retVal);
}
}
}
getValues() {
const {
values: valuesProps,
context
} = this.props;
if (valuesProps) {
return valuesProps.map(v => {
const value = context.ValueConverter ? context.ValueConverter(v) : v;
let text = value[context.ObjectMapping.showName];
if (context.ObjectMapping.verified) {
text = /*#__PURE__*/_react.default.createElement(_VerificationIcon.default, {
name: text,
verified: value[context.ObjectMapping.verified]
});
}
return {
text,
value
};
});
}
const {
values: valuesState
} = this.state;
return valuesState;
}
clear() {
this.setState({
inputValue: '',
values: [],
selectedValue: null
});
this.onChange([]);
}
render() {
var _this = this;
const {
showPersons,
showSites,
showUacGroups,
showKnownPersons,
className,
defaultValue,
showId,
context: Context,
contextProps,
max,
value: valueProp,
disableFriends,
...props
} = this.props;
const {
inputValue,
selectedValue
} = this.state;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _clsx.default)('cc__person-finder', className),
style: props.renderInline ? {
minHeight: 0,
width: '100%'
} : undefined
}, /*#__PURE__*/_react.default.createElement(Context.Provider, (0, _extends2.default)({}, Context.Provider === _PersonsContext.default.Provider ? {
uacId: props.uacId,
includeOwn: props.includeOwn,
enableSites: showSites,
enablePersons: showPersons,
enableFriends: (showPersons || !showSites && !showKnownPersons && !showUacGroups) && !disableFriends && !props.uacId,
enableUacGroups: showUacGroups,
enableKnownPersons: showKnownPersons,
reducerFunction: props.reducerFunction,
inputValue
} : null, contextProps), /*#__PURE__*/_react.default.createElement(Context.Consumer, null, ctx => /*#__PURE__*/_react.default.createElement(_PersonFinderView.default, (0, _extends2.default)({}, props, ctx, {
max: max,
orm: Context.ObjectMapping,
inputComponent: _TagInput.default,
inputRef: ref => {
this.input = ref;
},
boxRef: ref => {
this.boxRef = ref;
},
value: (0, _is.isString)(valueProp) ? valueProp : inputValue,
tags: this.getValues(),
inputValue: inputValue,
selectedValue: selectedValue || max && this.getValues().length >= max,
onChange: function () {
_this.handleOnChange(...arguments);
if (typeof ctx.onChange === 'function') {
ctx.onChange(...arguments);
}
},
onRemoveTag: this.handleTagRemove,
onSelect: this.handleSelect
})))));
}
}
MultiplePersonFinder.propTypes = {
onChange: _propTypes.default.func,
showPersons: _propTypes.default.bool,
showSites: _propTypes.default.bool,
showUacGroups: _propTypes.default.bool,
showKnownPersons: _propTypes.default.bool,
disableFriends: _propTypes.default.bool,
className: _propTypes.default.string,
defaultValue: _propTypes.default.oneOfType([_propTypes.default.shape({
name: _propTypes.default.string,
firstName: _propTypes.default.string,
lastName: _propTypes.default.string,
siteId: _propTypes.default.string,
personId: _propTypes.default.string
}), _propTypes.default.string]),
defaultValues: _propTypes.default.arrayOf(_propTypes.default.shape({
name: _propTypes.default.string,
firstName: _propTypes.default.string,
lastName: _propTypes.default.string,
siteId: _propTypes.default.string,
personId: _propTypes.default.string
})),
onAdd: _propTypes.default.func,
onRemove: _propTypes.default.func,
showId: _propTypes.default.bool,
onInput: _propTypes.default.func,
context: _propTypes.default.shape({
Provider: _propTypes.default.func,
// eslint-disable-next-line react/forbid-prop-types
Consumer: _propTypes.default.object,
ObjectMapping: _propTypes.default.shape({
showName: _propTypes.default.string,
identifier: _propTypes.default.string,
verified: _propTypes.default.string
}),
ValueConverter: _propTypes.default.func
}).isRequired,
// eslint-disable-next-line react/forbid-prop-types
contextProps: _propTypes.default.object,
max: _propTypes.default.number,
// eslint-disable-next-line react/forbid-prop-types
values: _propTypes.default.array,
value: _propTypes.default.string,
hideVerifiedIcon: _propTypes.default.bool,
minCharCount: _propTypes.default.number
};
MultiplePersonFinder.defaultProps = {
onChange: null,
showPersons: true,
showSites: false,
showUacGroups: false,
showKnownPersons: false,
disableFriends: false,
defaultValue: null,
className: null,
onAdd: null,
onRemove: null,
showId: false,
defaultValues: [],
onInput: null,
contextProps: null,
max: null,
values: null,
value: null,
hideVerifiedIcon: false,
minCharCount: null
};
MultiplePersonFinder.displayName = 'MultiplePersonFinder';
var _default = MultiplePersonFinder;
exports.default = _default;
//# sourceMappingURL=MultiplePersonFinder.js.map