cozy-ui 127.10.1 → 127.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/package.json +1 -1
- package/react/Contacts/GroupsSelect/GroupCreation.jsx +95 -0
- package/react/Contacts/GroupsSelect/GroupsSelect.jsx +159 -0
- package/react/Contacts/GroupsSelect/GroupsSelect.spec.jsx +248 -0
- package/react/Contacts/GroupsSelect/GroupsSelectProvider.jsx +39 -0
- package/react/Contacts/GroupsSelect/Readme.md +1 -0
- package/react/Contacts/GroupsSelect/SelectBox/Control.jsx +36 -0
- package/react/Contacts/GroupsSelect/SelectBox/EditGroupName.jsx +52 -0
- package/react/Contacts/GroupsSelect/SelectBox/Menu.jsx +26 -0
- package/react/Contacts/GroupsSelect/SelectBox/Option.jsx +67 -0
- package/react/Contacts/GroupsSelect/SelectBox/SelectContainer.jsx +15 -0
- package/react/Contacts/GroupsSelect/SelectBox/styles.styl +2 -0
- package/react/Contacts/GroupsSelect/helpers.js +25 -0
- package/react/Contacts/GroupsSelect/locales/en.json +21 -0
- package/react/Contacts/GroupsSelect/locales/fr.json +21 -0
- package/react/Contacts/GroupsSelect/locales/index.jsx +12 -0
- package/react/Contacts/GroupsSelect/styles.styl +47 -0
- package/react/Contacts/GroupsSelect/useGroupSelect.jsx +88 -0
- package/react/Contacts/Header/GroupsSelection.jsx +74 -0
- package/react/Contacts/Header/ImportDropdown.jsx +78 -0
- package/react/Contacts/Header/Readme.md +40 -0
- package/react/Contacts/Header/SearchInput.jsx +19 -0
- package/react/Contacts/Header/index.jsx +79 -0
- package/react/Contacts/Header/locales/en.json +15 -0
- package/react/Contacts/Header/locales/fr.json +15 -0
- package/react/Contacts/Header/locales/index.jsx +12 -0
- package/react/Contacts/Readme.md +1 -0
- package/react/ContactsList/ContactCell.jsx +58 -0
- package/react/ContactsList/helpers.js +50 -1
- package/react/ContactsList/helpers.spec.js +50 -1
- package/react/ContactsList/locales/en.json +3 -1
- package/react/ContactsList/locales/fr.json +3 -1
- package/react/providers/Selection/Readme.md +28 -0
- package/react/providers/Selection/index.jsx +85 -0
- package/transpiled/react/Contacts/GroupsSelect/GroupCreation.d.ts +3 -0
- package/transpiled/react/Contacts/GroupsSelect/GroupCreation.js +133 -0
- package/transpiled/react/Contacts/GroupsSelect/GroupsSelect.d.ts +56 -0
- package/transpiled/react/Contacts/GroupsSelect/GroupsSelect.js +181 -0
- package/transpiled/react/Contacts/GroupsSelect/GroupsSelect.spec.d.ts +22 -0
- package/transpiled/react/Contacts/GroupsSelect/GroupsSelectProvider.d.ts +5 -0
- package/transpiled/react/Contacts/GroupsSelect/GroupsSelectProvider.js +38 -0
- package/transpiled/react/Contacts/GroupsSelect/SelectBox/Control.d.ts +14 -0
- package/transpiled/react/Contacts/GroupsSelect/SelectBox/Control.js +37 -0
- package/transpiled/react/Contacts/GroupsSelect/SelectBox/EditGroupName.d.ts +7 -0
- package/transpiled/react/Contacts/GroupsSelect/SelectBox/EditGroupName.js +71 -0
- package/transpiled/react/Contacts/GroupsSelect/SelectBox/Menu.d.ts +7 -0
- package/transpiled/react/Contacts/GroupsSelect/SelectBox/Menu.js +34 -0
- package/transpiled/react/Contacts/GroupsSelect/SelectBox/Option.d.ts +18 -0
- package/transpiled/react/Contacts/GroupsSelect/SelectBox/Option.js +66 -0
- package/transpiled/react/Contacts/GroupsSelect/SelectBox/SelectContainer.d.ts +2 -0
- package/transpiled/react/Contacts/GroupsSelect/SelectBox/SelectContainer.js +12 -0
- package/transpiled/react/Contacts/GroupsSelect/helpers.d.ts +9 -0
- package/transpiled/react/Contacts/GroupsSelect/helpers.js +30 -0
- package/transpiled/react/Contacts/GroupsSelect/locales/index.d.ts +6 -0
- package/transpiled/react/Contacts/GroupsSelect/locales/index.js +49 -0
- package/transpiled/react/Contacts/GroupsSelect/useGroupSelect.d.ts +11 -0
- package/transpiled/react/Contacts/GroupsSelect/useGroupSelect.js +179 -0
- package/transpiled/react/Contacts/Header/GroupsSelection.d.ts +7 -0
- package/transpiled/react/Contacts/Header/GroupsSelection.js +84 -0
- package/transpiled/react/Contacts/Header/ImportDropdown.d.ts +4 -0
- package/transpiled/react/Contacts/Header/ImportDropdown.js +88 -0
- package/transpiled/react/Contacts/Header/SearchInput.d.ts +4 -0
- package/transpiled/react/Contacts/Header/SearchInput.js +24 -0
- package/transpiled/react/Contacts/Header/index.d.ts +26 -0
- package/transpiled/react/Contacts/Header/index.js +72 -0
- package/transpiled/react/Contacts/Header/locales/index.d.ts +6 -0
- package/transpiled/react/Contacts/Header/locales/index.js +37 -0
- package/transpiled/react/ContactsList/ContactCell.d.ts +8 -0
- package/transpiled/react/ContactsList/ContactCell.js +68 -0
- package/transpiled/react/ContactsList/helpers.d.ts +1 -0
- package/transpiled/react/ContactsList/helpers.js +51 -1
- package/transpiled/react/ContactsList/locales/withContactsListLocales.js +6 -2
- package/transpiled/react/providers/Selection/index.d.ts +6 -0
- package/transpiled/react/providers/Selection/index.js +99 -0
- package/transpiled/react/stylesheet.css +1 -1
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
+
|
|
4
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
|
+
|
|
6
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
7
|
+
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import React, { useState } from 'react';
|
|
10
|
+
import { useClient } from 'cozy-client';
|
|
11
|
+
import CustomMenu from "cozy-ui/transpiled/react/Contacts/GroupsSelect/SelectBox/Menu";
|
|
12
|
+
import CustomOption from "cozy-ui/transpiled/react/Contacts/GroupsSelect/SelectBox/Option";
|
|
13
|
+
import CustomSelectContainer from "cozy-ui/transpiled/react/Contacts/GroupsSelect/SelectBox/SelectContainer";
|
|
14
|
+
import useGroupsSelect from "cozy-ui/transpiled/react/Contacts/GroupsSelect/useGroupSelect";
|
|
15
|
+
import ClickAwayListener from "cozy-ui/transpiled/react/ClickAwayListener";
|
|
16
|
+
import SelectBox from "cozy-ui/transpiled/react/SelectBox";
|
|
17
|
+
import { useBreakpoints } from "cozy-ui/transpiled/react/providers/Breakpoints";
|
|
18
|
+
|
|
19
|
+
var captureEscapeEvent = function captureEscapeEvent(e) {
|
|
20
|
+
if (e.key === 'Escape') {
|
|
21
|
+
e.stopPropagation();
|
|
22
|
+
e.target.blur();
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export var GroupsSelect = function GroupsSelect(_ref) {
|
|
27
|
+
var allGroups = _ref.allGroups,
|
|
28
|
+
closeMenuOnSelect = _ref.closeMenuOnSelect,
|
|
29
|
+
value = _ref.value,
|
|
30
|
+
styles = _ref.styles,
|
|
31
|
+
isMulti = _ref.isMulti,
|
|
32
|
+
noOptionsMessage = _ref.noOptionsMessage,
|
|
33
|
+
withCheckbox = _ref.withCheckbox,
|
|
34
|
+
components = _ref.components,
|
|
35
|
+
onGroupCreated = _ref.onGroupCreated,
|
|
36
|
+
onChange = _ref.onChange,
|
|
37
|
+
onGroupCreate = _ref.onGroupCreate,
|
|
38
|
+
onGroupUpdate = _ref.onGroupUpdate,
|
|
39
|
+
onGroupDelete = _ref.onGroupDelete,
|
|
40
|
+
menuPosition = _ref.menuPosition;
|
|
41
|
+
var client = useClient();
|
|
42
|
+
|
|
43
|
+
var _useBreakpoints = useBreakpoints(),
|
|
44
|
+
isMobile = _useBreakpoints.isMobile;
|
|
45
|
+
|
|
46
|
+
var _useState = useState({
|
|
47
|
+
menuIsOpen: false,
|
|
48
|
+
editedGroupId: ''
|
|
49
|
+
}),
|
|
50
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
51
|
+
_useState2$ = _useState2[0],
|
|
52
|
+
menuIsOpen = _useState2$.menuIsOpen,
|
|
53
|
+
editedGroupId = _useState2$.editedGroupId,
|
|
54
|
+
setState = _useState2[1];
|
|
55
|
+
|
|
56
|
+
var _useGroupsSelect = useGroupsSelect({
|
|
57
|
+
allGroups: allGroups,
|
|
58
|
+
onGroupCreated: onGroupCreated,
|
|
59
|
+
client: client,
|
|
60
|
+
onGroupCreate: onGroupCreate,
|
|
61
|
+
onGroupUpdate: onGroupUpdate
|
|
62
|
+
}),
|
|
63
|
+
createGroup = _useGroupsSelect.createGroup,
|
|
64
|
+
renameGroup = _useGroupsSelect.renameGroup;
|
|
65
|
+
|
|
66
|
+
var toggleMenu = function toggleMenu() {
|
|
67
|
+
setState(function (prev) {
|
|
68
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
|
69
|
+
menuIsOpen: !prev.menuIsOpen
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
var closeMenu = function closeMenu() {
|
|
75
|
+
setState(function (prev) {
|
|
76
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
|
77
|
+
menuIsOpen: false
|
|
78
|
+
});
|
|
79
|
+
});
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
var setEditedGroupId = function setEditedGroupId(id) {
|
|
83
|
+
setState(function (prev) {
|
|
84
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
|
85
|
+
editedGroupId: id
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
var handleChange = function handleChange(props) {
|
|
91
|
+
if (closeMenuOnSelect) {
|
|
92
|
+
closeMenu();
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
onChange(props);
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
var handleDelete = function handleDelete(group) {
|
|
99
|
+
closeMenu();
|
|
100
|
+
onGroupDelete(group);
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
var defaultComponents = {
|
|
104
|
+
Menu: CustomMenu,
|
|
105
|
+
Option: CustomOption,
|
|
106
|
+
SelectContainer: CustomSelectContainer
|
|
107
|
+
};
|
|
108
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ClickAwayListener, {
|
|
109
|
+
onClickAway: menuIsOpen ? closeMenu : function () {}
|
|
110
|
+
}, /*#__PURE__*/React.createElement(SelectBox, {
|
|
111
|
+
className: isMobile ? 'u-mb-half' : 'u-mr-half',
|
|
112
|
+
classNamePrefix: "react-select",
|
|
113
|
+
isMulti: isMulti,
|
|
114
|
+
withCheckbox: withCheckbox,
|
|
115
|
+
menuIsOpen: menuIsOpen,
|
|
116
|
+
blurInputOnSelect: true,
|
|
117
|
+
hideSelectedOptions: false,
|
|
118
|
+
isSearchable: false,
|
|
119
|
+
isClearable: false,
|
|
120
|
+
closeMenuOnSelect: closeMenuOnSelect,
|
|
121
|
+
tabSelectsValue: false,
|
|
122
|
+
onKeyDown: captureEscapeEvent,
|
|
123
|
+
noOptionsMessage: noOptionsMessage,
|
|
124
|
+
options: allGroups,
|
|
125
|
+
value: value,
|
|
126
|
+
onChange: handleChange,
|
|
127
|
+
getOptionLabel: function getOptionLabel(group) {
|
|
128
|
+
return group.name;
|
|
129
|
+
},
|
|
130
|
+
getOptionValue: function getOptionValue(group) {
|
|
131
|
+
return group._id;
|
|
132
|
+
},
|
|
133
|
+
components: _objectSpread(_objectSpread({}, defaultComponents), components),
|
|
134
|
+
createGroup: createGroup,
|
|
135
|
+
deleteGroup: handleDelete,
|
|
136
|
+
renameGroup: renameGroup,
|
|
137
|
+
styles: styles,
|
|
138
|
+
onControlClicked: toggleMenu,
|
|
139
|
+
setEditedGroupId: setEditedGroupId,
|
|
140
|
+
editedGroupId: editedGroupId,
|
|
141
|
+
menuPosition: menuPosition,
|
|
142
|
+
fullwidth: true
|
|
143
|
+
})));
|
|
144
|
+
};
|
|
145
|
+
GroupsSelect.propTypes = {
|
|
146
|
+
allGroups: PropTypes.array.isRequired,
|
|
147
|
+
styles: PropTypes.object,
|
|
148
|
+
// for multiple selections, value can be an array
|
|
149
|
+
value: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
|
|
150
|
+
// to customize react-select elements
|
|
151
|
+
components: PropTypes.object,
|
|
152
|
+
// to define if it is possible to select more than one option
|
|
153
|
+
isMulti: PropTypes.bool,
|
|
154
|
+
// noOptionsMessage is used to show a message when there is no options in the menu list
|
|
155
|
+
noOptionsMessage: PropTypes.func,
|
|
156
|
+
// hide/show checkbox besides menu list options
|
|
157
|
+
withCheckbox: PropTypes.bool,
|
|
158
|
+
onChange: PropTypes.func.isRequired,
|
|
159
|
+
// function to be triggered after creating a group
|
|
160
|
+
onGroupCreated: PropTypes.func,
|
|
161
|
+
// function to be triggered when creating a group
|
|
162
|
+
onGroupCreate: PropTypes.func,
|
|
163
|
+
// function to be triggered when updating a group
|
|
164
|
+
onGroupUpdate: PropTypes.func,
|
|
165
|
+
// function to be triggered when deleting a group
|
|
166
|
+
onGroupDelete: PropTypes.func,
|
|
167
|
+
closeMenuOnSelect: PropTypes.bool,
|
|
168
|
+
menuPosition: PropTypes.oneOf(['fixed', 'absolute'])
|
|
169
|
+
};
|
|
170
|
+
GroupsSelect.defaultProps = {
|
|
171
|
+
isMulti: false,
|
|
172
|
+
components: {},
|
|
173
|
+
closeMenuOnSelect: false
|
|
174
|
+
};
|
|
175
|
+
GroupsSelect.propTypes = {
|
|
176
|
+
allGroups: PropTypes.array.isRequired,
|
|
177
|
+
onGroupCreate: PropTypes.func.isRequired,
|
|
178
|
+
onGroupUpdate: PropTypes.func.isRequired,
|
|
179
|
+
onGroupDelete: PropTypes.func.isRequired
|
|
180
|
+
};
|
|
181
|
+
export default GroupsSelect;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export const groups: {
|
|
2
|
+
id: string;
|
|
3
|
+
_id: string;
|
|
4
|
+
_type: string;
|
|
5
|
+
_rev: string;
|
|
6
|
+
cozyMetadata: {
|
|
7
|
+
createdAt: string;
|
|
8
|
+
createdByApp: string;
|
|
9
|
+
createdByAppVersion: string;
|
|
10
|
+
metadataVersion: number;
|
|
11
|
+
updatedAt: string;
|
|
12
|
+
updatedByApps: {
|
|
13
|
+
date: string;
|
|
14
|
+
slug: string;
|
|
15
|
+
version: string;
|
|
16
|
+
}[];
|
|
17
|
+
};
|
|
18
|
+
metadata: {
|
|
19
|
+
version: number;
|
|
20
|
+
};
|
|
21
|
+
name: string;
|
|
22
|
+
}[];
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
+
import React, { useContext, useState } from 'react';
|
|
3
|
+
import { translatedDefaultSelectedGroup } from "cozy-ui/transpiled/react/Contacts/GroupsSelect/helpers";
|
|
4
|
+
import { locales } from "cozy-ui/transpiled/react/Contacts/GroupsSelect/locales";
|
|
5
|
+
import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
|
|
6
|
+
var SelectedGroupContext = /*#__PURE__*/React.createContext();
|
|
7
|
+
export var useSelectedGroup = function useSelectedGroup() {
|
|
8
|
+
var context = useContext(SelectedGroupContext);
|
|
9
|
+
|
|
10
|
+
if (!context) {
|
|
11
|
+
throw new Error('useSelectedGroup must be used within a SelectedGroupProvider');
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
return context;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
var SelectedGroupProvider = function SelectedGroupProvider(_ref) {
|
|
18
|
+
var children = _ref.children;
|
|
19
|
+
useExtendI18n(locales);
|
|
20
|
+
|
|
21
|
+
var _useI18n = useI18n(),
|
|
22
|
+
t = _useI18n.t;
|
|
23
|
+
|
|
24
|
+
var _useState = useState(translatedDefaultSelectedGroup(t)),
|
|
25
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
26
|
+
selectedGroup = _useState2[0],
|
|
27
|
+
setSelectedGroup = _useState2[1];
|
|
28
|
+
|
|
29
|
+
var contextValue = {
|
|
30
|
+
selectedGroup: selectedGroup,
|
|
31
|
+
setSelectedGroup: setSelectedGroup
|
|
32
|
+
};
|
|
33
|
+
return /*#__PURE__*/React.createElement(SelectedGroupContext.Provider, {
|
|
34
|
+
value: contextValue
|
|
35
|
+
}, children);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export default SelectedGroupProvider;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export default Control;
|
|
2
|
+
declare function Control({ innerRef, innerProps, selectProps: { onControlClicked } }: {
|
|
3
|
+
innerRef: any;
|
|
4
|
+
innerProps: any;
|
|
5
|
+
selectProps: {
|
|
6
|
+
onControlClicked: any;
|
|
7
|
+
};
|
|
8
|
+
}): JSX.Element;
|
|
9
|
+
declare namespace Control {
|
|
10
|
+
namespace propTypes {
|
|
11
|
+
const selectProps: PropTypes.Validator<object>;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
import PropTypes from "prop-types";
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import Button from "cozy-ui/transpiled/react/Buttons";
|
|
5
|
+
import Icon from "cozy-ui/transpiled/react/Icon";
|
|
6
|
+
import BottomSelectIcon from "cozy-ui/transpiled/react/Icons/BottomSelect";
|
|
7
|
+
import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
|
|
8
|
+
import { locales } from "cozy-ui/transpiled/react/Contacts/GroupsSelect/locales";
|
|
9
|
+
|
|
10
|
+
var Control = function Control(_ref) {
|
|
11
|
+
var innerRef = _ref.innerRef,
|
|
12
|
+
innerProps = _ref.innerProps,
|
|
13
|
+
onControlClicked = _ref.selectProps.onControlClicked;
|
|
14
|
+
useExtendI18n(locales);
|
|
15
|
+
|
|
16
|
+
var _useI18n = useI18n(),
|
|
17
|
+
t = _useI18n.t;
|
|
18
|
+
|
|
19
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
20
|
+
ref: innerRef
|
|
21
|
+
}, innerProps), /*#__PURE__*/React.createElement(Button, {
|
|
22
|
+
variant: "secondary",
|
|
23
|
+
size: "small",
|
|
24
|
+
onClick: onControlClicked,
|
|
25
|
+
onTouchStart: onControlClicked,
|
|
26
|
+
label: t('Contacts.GroupsSelect.manage'),
|
|
27
|
+
startIcon: /*#__PURE__*/React.createElement(Icon, {
|
|
28
|
+
icon: BottomSelectIcon,
|
|
29
|
+
width: "12"
|
|
30
|
+
})
|
|
31
|
+
}));
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
Control.propTypes = {
|
|
35
|
+
selectProps: PropTypes.object.isRequired
|
|
36
|
+
};
|
|
37
|
+
export default Control;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
2
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import React, { useRef } from 'react';
|
|
5
|
+
import Input from "cozy-ui/transpiled/react/Input";
|
|
6
|
+
|
|
7
|
+
var EditGroupName = function EditGroupName(_ref) {
|
|
8
|
+
var groupId = _ref.groupId,
|
|
9
|
+
groupName = _ref.groupName,
|
|
10
|
+
setEditedGroupId = _ref.setEditedGroupId,
|
|
11
|
+
renameGroup = _ref.renameGroup;
|
|
12
|
+
var inputRef = useRef();
|
|
13
|
+
|
|
14
|
+
var stopPropagation = function stopPropagation(e) {
|
|
15
|
+
e.stopPropagation();
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
var exitEditMode = function exitEditMode() {
|
|
19
|
+
return setEditedGroupId('');
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
var handleKeyDown = /*#__PURE__*/function () {
|
|
23
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
|
|
24
|
+
var ENTER_KEY_CODE;
|
|
25
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
26
|
+
while (1) {
|
|
27
|
+
switch (_context.prev = _context.next) {
|
|
28
|
+
case 0:
|
|
29
|
+
ENTER_KEY_CODE = 13;
|
|
30
|
+
|
|
31
|
+
if (e.keyCode == ENTER_KEY_CODE) {
|
|
32
|
+
exitEditMode();
|
|
33
|
+
renameGroup(groupId, inputRef.current.value);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
stopPropagation(e);
|
|
37
|
+
|
|
38
|
+
case 3:
|
|
39
|
+
case "end":
|
|
40
|
+
return _context.stop();
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}, _callee);
|
|
44
|
+
}));
|
|
45
|
+
|
|
46
|
+
return function handleKeyDown(_x) {
|
|
47
|
+
return _ref2.apply(this, arguments);
|
|
48
|
+
};
|
|
49
|
+
}();
|
|
50
|
+
|
|
51
|
+
return /*#__PURE__*/React.createElement(Input, {
|
|
52
|
+
id: "editGroupInput",
|
|
53
|
+
ref: inputRef,
|
|
54
|
+
type: "text",
|
|
55
|
+
defaultValue: groupName,
|
|
56
|
+
size: "tiny",
|
|
57
|
+
autoComplete: "off",
|
|
58
|
+
autoFocus: true,
|
|
59
|
+
onKeyDown: handleKeyDown,
|
|
60
|
+
onClick: stopPropagation,
|
|
61
|
+
onFocus: stopPropagation,
|
|
62
|
+
onMouseDown: stopPropagation,
|
|
63
|
+
onBlur: exitEditMode
|
|
64
|
+
});
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
Option.propTypes = {
|
|
68
|
+
groupName: PropTypes.string.isRequired,
|
|
69
|
+
setEditedGroupId: PropTypes.string.isRequired
|
|
70
|
+
};
|
|
71
|
+
export default EditGroupName;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["children", "selectProps", "className"],
|
|
4
|
+
_excluded2 = ["createGroup"];
|
|
5
|
+
import cx from 'classnames';
|
|
6
|
+
import React from 'react';
|
|
7
|
+
var styles = {
|
|
8
|
+
"menu": "styles__menu___120ui"
|
|
9
|
+
};
|
|
10
|
+
import { components } from "cozy-ui/transpiled/react/SelectBox";
|
|
11
|
+
import Typography from "cozy-ui/transpiled/react/Typography";
|
|
12
|
+
import GroupCreation from "cozy-ui/transpiled/react/Contacts/GroupsSelect/GroupCreation";
|
|
13
|
+
|
|
14
|
+
var Menu = function Menu(_ref) {
|
|
15
|
+
var children = _ref.children,
|
|
16
|
+
selectProps = _ref.selectProps,
|
|
17
|
+
className = _ref.className,
|
|
18
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
19
|
+
|
|
20
|
+
var createGroup = selectProps.createGroup,
|
|
21
|
+
restSelectProps = _objectWithoutProperties(selectProps, _excluded2);
|
|
22
|
+
|
|
23
|
+
return /*#__PURE__*/React.createElement(components.Menu, _extends({}, props, {
|
|
24
|
+
className: cx(className, styles['menu']),
|
|
25
|
+
selectProps: restSelectProps
|
|
26
|
+
}), /*#__PURE__*/React.createElement(Typography, {
|
|
27
|
+
variant: "body1",
|
|
28
|
+
component: "div"
|
|
29
|
+
}, children, /*#__PURE__*/React.createElement(GroupCreation, {
|
|
30
|
+
createGroup: createGroup
|
|
31
|
+
})));
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export default Menu;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export default Option;
|
|
2
|
+
declare function Option(props: any): JSX.Element;
|
|
3
|
+
declare namespace Option {
|
|
4
|
+
namespace propTypes {
|
|
5
|
+
const selectProps: PropTypes.Requireable<PropTypes.InferProps<{
|
|
6
|
+
editedGroupId: PropTypes.Validator<string>;
|
|
7
|
+
deleteGroup: PropTypes.Validator<(...args: any[]) => any>;
|
|
8
|
+
setEditedGroupId: PropTypes.Validator<(...args: any[]) => any>;
|
|
9
|
+
withCheckbox: PropTypes.Requireable<boolean>;
|
|
10
|
+
}>>;
|
|
11
|
+
const data: PropTypes.Requireable<PropTypes.InferProps<{
|
|
12
|
+
name: PropTypes.Validator<string>;
|
|
13
|
+
id: PropTypes.Requireable<string>;
|
|
14
|
+
withNoAction: PropTypes.Requireable<boolean>;
|
|
15
|
+
}>>;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
import PropTypes from "prop-types";
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import EditGroupName from "cozy-ui/transpiled/react/Contacts/GroupsSelect/SelectBox/EditGroupName";
|
|
5
|
+
import { ActionsOption, Option as DefaultOption } from "cozy-ui/transpiled/react/SelectBox";
|
|
6
|
+
|
|
7
|
+
var Option = function Option(props) {
|
|
8
|
+
var _props$data = props.data,
|
|
9
|
+
groupName = _props$data.name,
|
|
10
|
+
groupId = _props$data.id,
|
|
11
|
+
withNoAction = _props$data.withNoAction;
|
|
12
|
+
var _props$selectProps = props.selectProps,
|
|
13
|
+
editedGroupId = _props$selectProps.editedGroupId,
|
|
14
|
+
setEditedGroupId = _props$selectProps.setEditedGroupId,
|
|
15
|
+
deleteGroup = _props$selectProps.deleteGroup,
|
|
16
|
+
renameGroup = _props$selectProps.renameGroup,
|
|
17
|
+
withCheckbox = _props$selectProps.withCheckbox;
|
|
18
|
+
|
|
19
|
+
if (editedGroupId === groupId) {
|
|
20
|
+
return /*#__PURE__*/React.createElement(EditGroupName, {
|
|
21
|
+
groupId: groupId,
|
|
22
|
+
groupName: groupName,
|
|
23
|
+
setEditedGroupId: setEditedGroupId,
|
|
24
|
+
renameGroup: renameGroup
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
if (withNoAction) {
|
|
29
|
+
return /*#__PURE__*/React.createElement(DefaultOption, props);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
return /*#__PURE__*/React.createElement(ActionsOption, _extends({}, props, {
|
|
33
|
+
withCheckbox: withCheckbox,
|
|
34
|
+
actions: [{
|
|
35
|
+
icon: 'pen',
|
|
36
|
+
onClick: function onClick(_ref) {
|
|
37
|
+
var data = _ref.data;
|
|
38
|
+
return setEditedGroupId(data.id);
|
|
39
|
+
},
|
|
40
|
+
iconProps: {
|
|
41
|
+
'data-testid': "ActionsOption_".concat(props.children, "-icon_pen")
|
|
42
|
+
}
|
|
43
|
+
}, {
|
|
44
|
+
icon: 'trash',
|
|
45
|
+
onClick: function onClick(_ref2) {
|
|
46
|
+
var data = _ref2.data;
|
|
47
|
+
return deleteGroup(data);
|
|
48
|
+
}
|
|
49
|
+
}]
|
|
50
|
+
}));
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
Option.propTypes = {
|
|
54
|
+
selectProps: PropTypes.shape({
|
|
55
|
+
editedGroupId: PropTypes.string.isRequired,
|
|
56
|
+
deleteGroup: PropTypes.func.isRequired,
|
|
57
|
+
setEditedGroupId: PropTypes.func.isRequired,
|
|
58
|
+
withCheckbox: PropTypes.bool
|
|
59
|
+
}),
|
|
60
|
+
data: PropTypes.shape({
|
|
61
|
+
name: PropTypes.string.isRequired,
|
|
62
|
+
id: PropTypes.string,
|
|
63
|
+
withNoAction: PropTypes.bool
|
|
64
|
+
})
|
|
65
|
+
};
|
|
66
|
+
export default Option;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { components } from "cozy-ui/transpiled/react/SelectBox";
|
|
5
|
+
|
|
6
|
+
var SelectContainer = function SelectContainer(props) {
|
|
7
|
+
return /*#__PURE__*/React.createElement(components.SelectContainer, _extends({}, props, {
|
|
8
|
+
className: classNames(props.className, 'react-select__custom__container')
|
|
9
|
+
}));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export default SelectContainer;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export function isExistingGroup(groupsAlreadyCreated: any, groupToCreate: any): boolean;
|
|
2
|
+
export namespace defaultSelectedGroup {
|
|
3
|
+
const name: string;
|
|
4
|
+
const withNoAction: boolean;
|
|
5
|
+
}
|
|
6
|
+
export function translatedDefaultSelectedGroup(t: Function): {
|
|
7
|
+
name: any;
|
|
8
|
+
withNoAction: boolean;
|
|
9
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
|
|
3
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
|
+
|
|
5
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
|
+
|
|
7
|
+
export var isExistingGroup = function isExistingGroup(groupsAlreadyCreated, groupToCreate) {
|
|
8
|
+
var isNameAlreadyUsed = groupsAlreadyCreated.find(function (group) {
|
|
9
|
+
return group.name.toLowerCase() === groupToCreate.name.toLowerCase();
|
|
10
|
+
}) !== undefined;
|
|
11
|
+
return isNameAlreadyUsed;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Returns the group defined as default in the group filter
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
export var defaultSelectedGroup = {
|
|
18
|
+
name: 'Contacts.GroupsSelect.filter.all-groups',
|
|
19
|
+
withNoAction: true
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Returns the translated group defined as default in the group filter
|
|
23
|
+
* @param {function} t - Translate
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
export var translatedDefaultSelectedGroup = function translatedDefaultSelectedGroup(t) {
|
|
27
|
+
return _objectSpread(_objectSpread({}, defaultSelectedGroup), {}, {
|
|
28
|
+
name: t(defaultSelectedGroup.name)
|
|
29
|
+
});
|
|
30
|
+
};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
var en = {
|
|
2
|
+
Contacts: {
|
|
3
|
+
GroupsSelect: {
|
|
4
|
+
create: "Create a group",
|
|
5
|
+
name: "Name of the group",
|
|
6
|
+
already_exists: "The group %{name} already exists.",
|
|
7
|
+
manage: "Groups",
|
|
8
|
+
filter: {
|
|
9
|
+
"all-groups": "All groups"
|
|
10
|
+
},
|
|
11
|
+
created: {
|
|
12
|
+
success: "The group has been created correctly.",
|
|
13
|
+
error: "The group has not been created."
|
|
14
|
+
},
|
|
15
|
+
renamed: {
|
|
16
|
+
success: "The group has been renamed correctly.",
|
|
17
|
+
error: "The group has not been renamed."
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
var fr = {
|
|
23
|
+
Contacts: {
|
|
24
|
+
GroupsSelect: {
|
|
25
|
+
create: "Cr\xE9er un groupe",
|
|
26
|
+
name: "Nom du groupe",
|
|
27
|
+
already_exists: "Le groupe %{name} existe d\xE9j\xE0.",
|
|
28
|
+
manage: "Groupes",
|
|
29
|
+
filter: {
|
|
30
|
+
"all-groups": "Tous les groupes"
|
|
31
|
+
},
|
|
32
|
+
created: {
|
|
33
|
+
success: "Le groupe a bien \xE9t\xE9 cr\xE9\xE9.",
|
|
34
|
+
error: "Le groupe n'a pas \xE9t\xE9 cr\xE9\xE9."
|
|
35
|
+
},
|
|
36
|
+
renamed: {
|
|
37
|
+
success: "Le groupe a bien \xE9t\xE9 renomm\xE9.",
|
|
38
|
+
error: "Le groupe n'a pas \xE9t\xE9 renomm\xE9."
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}; // import { getI18n } from '../../../providers/I18n/helpers'
|
|
43
|
+
// import withOnlyLocales from '../../../providers/I18n/withOnlyLocales'
|
|
44
|
+
|
|
45
|
+
export var locales = {
|
|
46
|
+
en: en,
|
|
47
|
+
fr: fr
|
|
48
|
+
}; // export const getOwnI18n = () => getI18n(undefined, lang => locales[lang])
|
|
49
|
+
// export default withOnlyLocales(locales)
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export default useGroupsSelect;
|
|
2
|
+
declare function useGroupsSelect({ allGroups, onGroupCreated, client, onGroupCreate, onGroupUpdate }: {
|
|
3
|
+
allGroups: any;
|
|
4
|
+
onGroupCreated: any;
|
|
5
|
+
client: any;
|
|
6
|
+
onGroupCreate: any;
|
|
7
|
+
onGroupUpdate: any;
|
|
8
|
+
}): {
|
|
9
|
+
createGroup: (group: any) => Promise<void>;
|
|
10
|
+
renameGroup: (groupId: any, newName: any) => Promise<void>;
|
|
11
|
+
};
|