chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
346 lines (339 loc) • 14 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.useStateValue = exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _lodash = _interopRequireDefault(require("lodash.debounce"));
var _PersonsReducer = require("./PersonsReducer");
var _PersonsApi = require("./PersonsApi");
var _UacGroupApi = require("../uacGroups/UacGroupApi");
var _PersonsConverter = require("./PersonsConverter");
var _FriendsHelper = _interopRequireDefault(require("./FriendsHelper"));
var _simplifyString = _interopRequireDefault(require("../../../../utils/simplifyString"));
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; }
/* eslint-disable no-console */
const ObjectMapping = {
groups: [{
key: 'friends',
lang: {
de: 'Freunde',
en: 'friends'
},
roundIcons: true,
filter: inputValue => e => inputValue ? e.name && ` ${(0, _simplifyString.default)(e.name)}`.includes(` ${(0, _simplifyString.default)(inputValue)}`) || e.personId && e.personId === inputValue : true
}, {
key: 'personsRelated',
lang: {
de: 'Personen',
en: 'persons'
},
roundIcons: true,
show: value => value && value.length >= 3
}, {
key: 'sites',
lang: {
de: 'Sites',
en: 'friends'
},
roundIcons: false,
show: value => value && value.length >= 3
}, {
key: 'personsUnrelated',
lang: {
de: 'Weitere Personen',
en: 'further friends'
},
roundIcons: true,
show: value => value && value.length >= 3
}, {
key: 'groups',
lang: {
de: 'Gruppen',
en: 'groups'
},
filter: inputValue => e => e.name && e.name.toLowerCase().startsWith((inputValue || '').toLowerCase())
}, {
key: 'knownPersons',
lang: {
de: 'Bekannte Personen',
en: 'known persons'
},
roundIcons: true,
show: value => value && value.length >= 3
}, {
key: 'uacPersons',
lang: {
de: 'Personen',
en: 'persons'
},
roundIcons: true,
show: value => value && value.length >= 3
}, {
key: 'addEntry',
lang: {
de: 'Hinzufügen',
en: 'Add'
}
}],
showName: 'name',
identifier: 'id',
search: ['fullName', 'firstName', 'lastName', 'personId'],
relations: 'relations',
imageUrl: 'imageUrl',
verified: 'verificationState'
};
const PersonFinderContext = /*#__PURE__*/(0, _react.createContext)({
..._PersonsReducer.initialState,
dispatch: () => console.warn('[chayns components] PersonsContext: dispatch: no context provided'),
onChange: () => console.warn('[chayns components] PersonsContext: onChange: no context provided'),
onLoadMore: () => console.warn('[chayns components] PersonsContext: onLoadMore: no context provided'),
setFriend: () => console.warn('[chayns components] PersonsContext: setFriend: no context provided'),
isFriend: () => console.warn('[chayns components] PersonsContext: isFriend: no context provided')
});
const PersonFinderStateProvider = _ref => {
let {
children,
take = 20,
enablePersons = true,
enableSites = false,
enableFriends = true,
enableUacGroups = false,
enableKnownPersons,
includeOwn = false,
uacId,
reducerFunction,
inputValue = '',
addInputToList = false
} = _ref;
const [state, dispatch] = (0, _react.useReducer)(_PersonsReducer.reducer, _PersonsReducer.initialState);
const skipPersons = state.data.personsUnrelated.length + state.data.personsRelated.length;
const skipSites = state.data.sites.length;
const skipKnownPersons = state.data.knownPersons.length;
const skipUacPersons = state.data.uacPersons.length;
const knownPersonsInitialized = (0, _react.useRef)(false);
const uacGroupsInitialized = (0, _react.useRef)(false);
const [lastValue, setLastValue] = (0, _react.useState)('');
(0, _react.useEffect)(() => {
if (!enableFriends) return undefined;
_FriendsHelper.default.init();
// Use event listener to update all contexts if friends change
const friendsListener = () => dispatch({
type: 'RECEIVE_FRIENDS',
data: []
});
friendsListener(_FriendsHelper.default.getFriendsList());
_FriendsHelper.default.addUpdateListener(friendsListener);
return () => _FriendsHelper.default.removeUpdateListener(friendsListener);
}, [enableFriends]);
(0, _react.useEffect)(() => {
(async () => {
if (!enableUacGroups || uacGroupsInitialized.current) return;
let groups = await (0, _UacGroupApi.fetchGroups)();
groups = groups.map(_ref2 => {
let {
id,
showName
} = _ref2;
return {
type: 'GROUP',
id,
name: showName,
imageUrl: `https://sub60.tobit.com/l/${chayns.env.site.id}?size=100`
};
});
dispatch({
type: 'RECEIVE_GROUPS',
data: groups
});
uacGroupsInitialized.current = true;
})();
}, [enableUacGroups]);
const loadPersons = (0, _react.useCallback)(async function (inputValue, clear) {
if (clear === void 0) {
clear = false;
}
const value = inputValue.trim();
if (value.length < 3 || !enablePersons || uacId) return;
dispatch({
type: 'REQUEST_PERSONS',
showWaitCursor: {
personsRelated: state.hasMore.personsRelated,
personsUnrelated: !state.hasMore.personsRelated
},
clear
});
const persons = await (0, _PersonsApi.fetchPersons)(value, clear ? 0 : skipPersons, take);
const convertedPersons = (0, _PersonsConverter.convertPersons)(persons);
const hasMore = {
personsRelated: convertedPersons.personsRelated.length === take,
personsUnrelated: persons.length === take
};
// not optimal performance-wise but reduces redundant code
const [ownUser] = (0, _PersonsConverter.convertPersons)([{
type: 'PERSON',
name: chayns.env.user.fullName,
id: chayns.env.user.personId,
fullName: chayns.env.user.fullName,
firstName: chayns.env.user.firstName,
lastName: chayns.env.user.lastName,
personId: chayns.env.user.personId
}]).personsRelated;
// prepend own user when prop is used, user is logged in and name matches
if (includeOwn && clear && chayns.env.user.isAuthenticated && ownUser.fullName && ownUser.fullName.toLowerCase().startsWith(value.toLowerCase())) {
convertedPersons.personsRelated.unshift(ownUser);
} else if (!includeOwn && convertedPersons.personsRelated.some(user => user.personId === ownUser.personId)) {
convertedPersons.personsRelated.splice(convertedPersons.personsRelated.findIndex(user => user.personId === ownUser.personId), 1);
}
dispatch({
type: 'RECEIVE_PERSONS',
data: convertedPersons,
hasMore
});
}, [enablePersons, uacId, state.hasMore.personsRelated, skipPersons, take, includeOwn]);
const loadUacPersons = (0, _react.useCallback)(async function (value, clear) {
if (clear === void 0) {
clear = false;
}
if (value.length < 3 || !uacId) return;
dispatch({
type: 'REQUEST_UAC_PERSONS',
showWaitCursor: true,
clear
});
const persons = await (0, _PersonsApi.fetchUacPersons)(uacId)(value, clear ? 0 : skipUacPersons, take);
const convertedPersons = (0, _PersonsConverter.convertUacPersons)(persons);
const hasMore = convertedPersons.length === take;
dispatch({
type: 'RECEIVE_UAC_PERSONS',
data: convertedPersons,
hasMore
});
}, [uacId, skipUacPersons, take]);
const loadSites = (0, _react.useCallback)(async function (value, clear) {
if (clear === void 0) {
clear = false;
}
if (value.length < 3 || !enableSites) return;
dispatch({
type: 'REQUEST_SITES',
showWaitCursor: true,
clear
});
const sites = await (0, _PersonsApi.fetchSites)(value, clear ? 0 : skipSites, take);
dispatch({
type: 'RECEIVE_SITES',
data: (0, _PersonsConverter.convertSites)(sites),
hasMore: sites.length === take
});
}, [skipSites, take, enableSites]);
const loadKnownPersons = (0, _react.useCallback)(async function (value, clear) {
if (clear === void 0) {
clear = false;
}
if (value.length < 3 || !enableKnownPersons) return;
dispatch({
type: 'REQUEST_KNOWN_PERSONS',
showWaitCursor: true,
clear
});
const persons = await (0, _PersonsApi.fetchKnownPersons)(value, clear ? 0 : skipKnownPersons, take);
dispatch({
type: 'RECEIVE_KNOWN_PERSONS',
data: (0, _PersonsConverter.convertKnownPerson)(persons),
hasMore: persons.length === take
});
}, [skipKnownPersons, take, enableKnownPersons]);
(0, _react.useEffect)(() => {
if (knownPersonsInitialized.current) return;
loadKnownPersons('');
knownPersonsInitialized.current = true;
}, [loadKnownPersons]);
// eslint-disable-next-line react-hooks/exhaustive-deps
const onChange = (0, _react.useCallback)((0, _lodash.default)(async value => {
try {
setLastValue(value);
await Promise.all([loadPersons(value, true), loadUacPersons(value, true), loadSites(value, true), loadKnownPersons(value, true)]);
} catch (err) {
console.error(err);
}
}, 500), [take, enableKnownPersons, enableFriends, enablePersons, enableSites, enableUacGroups, enableKnownPersons, uacId]);
(0, _react.useEffect)(() => {
// only trigger when enablePersons, enableSite, enableKnownPersons or uacId props change
if (lastValue) {
onChange(lastValue);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [enablePersons, enableSites, enableKnownPersons, uacId]);
const onLoadMore = (0, _react.useCallback)(async (type, value) => {
const promises = [];
if (!type || type !== 'sites' && type !== 'knownPersons' && type !== 'uacPersons') {
promises.push(loadPersons(value));
}
if (!type || type === 'uacPersons') {
promises.push(loadUacPersons(value));
}
if (!type || type === 'sites') {
promises.push(loadSites(value));
}
if (!type || type === 'knownPersons' || !enablePersons && type === 'default') {
promises.push(loadKnownPersons(value));
}
await Promise.all(promises);
}, [loadPersons, loadSites, loadKnownPersons, loadUacPersons, enablePersons]);
const unreducedData = {
personsRelated: enablePersons ? state.data.personsRelated : [],
personsUnrelated: enablePersons ? state.data.personsUnrelated : [],
sites: enableSites ? state.data.sites : [],
groups: enableUacGroups ? state.data.groups : [],
knownPersons: enableKnownPersons ? state.data.knownPersons : [],
uacPersons: uacId ? state.data.uacPersons : [],
friends: enableFriends ? _FriendsHelper.default.getFriendsList() : [],
addEntry: addInputToList ? [{
type: 'ADD_ENTRY',
id: -1,
name: inputValue || 'Hinzufügen',
imageUrl: 'https://tsimg.cloud/77896-21884/0ef639efc1322459faf298467f6111383ea72c1a.svg'
}] : []
};
unreducedData.personsRelated = unreducedData.personsRelated.filter(person => !unreducedData.friends.find(friend => friend.personId === person.personId));
unreducedData.personsUnrelated = unreducedData.personsUnrelated.filter(person => !unreducedData.friends.find(friend => friend.personId === person.personId));
const data = typeof reducerFunction === 'function' ? reducerFunction(unreducedData) : unreducedData;
return /*#__PURE__*/_react.default.createElement(PersonFinderContext.Provider, {
value: {
...state,
data,
autoLoading: !enableUacGroups && !enableSites && (enablePersons && !enableKnownPersons || !enablePersons && enableKnownPersons),
dispatch,
onLoadMore,
onChange,
setFriend: _FriendsHelper.default.setFriend,
isFriend: _FriendsHelper.default.isFriend
}
}, children);
};
PersonFinderStateProvider.propTypes = {
children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]),
take: _propTypes.default.number,
enablePersons: _propTypes.default.bool,
enableSites: _propTypes.default.bool,
enableFriends: _propTypes.default.bool,
enableUacGroups: _propTypes.default.bool,
enableKnownPersons: _propTypes.default.bool,
includeOwn: _propTypes.default.bool,
uacId: _propTypes.default.number,
reducerFunction: _propTypes.default.func,
addInputToList: _propTypes.default.bool,
inputValue: _propTypes.default.string
};
var _default = {
Consumer: PersonFinderContext.Consumer,
Provider: PersonFinderStateProvider,
ObjectMapping,
ValueConverter: _PersonsConverter.convertPerson
};
exports.default = _default;
const useStateValue = () => (0, _react.useContext)(PersonFinderContext);
exports.useStateValue = useStateValue;
//# sourceMappingURL=PersonsContext.js.map