@antscorp/antsomi-ui 1.3.5-beta.360 → 1.3.5-beta.362
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/es/components/molecules/SelectAccount/AccountChip.js +2 -2
- package/es/components/molecules/SelectAccount/ButtonAdd.js +2 -1
- package/es/components/molecules/SelectAccount/ButtonViewAll.js +2 -2
- package/es/components/molecules/SelectAccount/Content.js +6 -4
- package/es/components/molecules/SelectAccount/context/SelectAccountContext.js +7 -3
- package/es/components/molecules/SelectAccount/context/reducer.js +9 -3
- package/es/components/molecules/SelectAccount/index.js +2 -0
- package/es/components/molecules/SelectAccount/type.d.ts +7 -0
- package/es/components/organism/AccountSharing/AccountSharing.js +5 -2
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ import { Tooltip } from '../../atoms';
|
|
|
9
9
|
const AccountChip = props => {
|
|
10
10
|
const { user, label, value, disabled, isViewMode, isError, errorMsg, onRemove } = props;
|
|
11
11
|
const { state } = useContext(SelectAccountContext);
|
|
12
|
-
const { disabledAccount, userIdKey } = state;
|
|
12
|
+
const { disabledAccount, userIdKey, styles } = state;
|
|
13
13
|
const handleRemove = () => {
|
|
14
14
|
if (typeof onRemove === 'function') {
|
|
15
15
|
onRemove({ value, user });
|
|
@@ -17,7 +17,7 @@ const AccountChip = props => {
|
|
|
17
17
|
};
|
|
18
18
|
const isDisabled = disabled || (state === null || state === void 0 ? void 0 : state.disabled) || (disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(user === null || user === void 0 ? void 0 : user[userIdKey]));
|
|
19
19
|
return (React.createElement(Tooltip, { open: isError ? undefined : false, title: errorMsg },
|
|
20
|
-
React.createElement(AccountChipWrapper, { disabled: isDisabled, isError: isError },
|
|
20
|
+
React.createElement(AccountChipWrapper, { className: "select-account-chip", style: Object.assign({}, ((styles === null || styles === void 0 ? void 0 : styles.accountChip) || {})), disabled: isDisabled, isError: isError },
|
|
21
21
|
React.createElement("div", { className: "name" }, label),
|
|
22
22
|
!isViewMode && !(state === null || state === void 0 ? void 0 : state.isViewMode) && !isDisabled && (React.createElement("div", { className: "icon-remove", onClick: handleRemove },
|
|
23
23
|
React.createElement(Icon, { type: "icon-ants-remove-slim" }))))));
|
|
@@ -7,6 +7,7 @@ import { ButtonAddStyled } from './styled';
|
|
|
7
7
|
import { Icon, Popover } from '../../atoms';
|
|
8
8
|
import AccountList from './AccountList';
|
|
9
9
|
const ButtonAdd = () => {
|
|
10
|
+
var _a;
|
|
10
11
|
const { state, dispatch } = useContext(SelectAccountContext);
|
|
11
12
|
const handleClose = visible => {
|
|
12
13
|
if (!visible) {
|
|
@@ -19,7 +20,7 @@ const ButtonAdd = () => {
|
|
|
19
20
|
}
|
|
20
21
|
};
|
|
21
22
|
return (React.createElement(Popover, { open: state.openAccountList, content: React.createElement(AccountList, null), trigger: "click", arrow: false, overlayInnerStyle: { padding: 0 }, destroyTooltipOnHide: true, onOpenChange: handleClose, afterOpenChange: handleAfterClose },
|
|
22
|
-
React.createElement(ButtonAddStyled, { loading: !state.isInitDone, onClick: () => state.openAccountList
|
|
23
|
+
React.createElement(ButtonAddStyled, { className: "select-account-btn-add", style: Object.assign({}, (((_a = state === null || state === void 0 ? void 0 : state.styles) === null || _a === void 0 ? void 0 : _a.btnAdd) || {})), loading: !state.isInitDone, onClick: () => state.openAccountList
|
|
23
24
|
? dispatch({ type: 'CLOSE_ACCOUNT_LIST' })
|
|
24
25
|
: dispatch({ type: 'OPEN_ACCOUNT_LIST' }) },
|
|
25
26
|
React.createElement("div", { className: "icon" },
|
|
@@ -8,7 +8,7 @@ import { Popover } from '../../atoms';
|
|
|
8
8
|
import AccountChip from './AccountChip';
|
|
9
9
|
const ButtonViewAll = () => {
|
|
10
10
|
const { state, dispatch } = useContext(SelectAccountContext);
|
|
11
|
-
const { usersSelected, nameKey, userIdKey, users } = state;
|
|
11
|
+
const { usersSelected, nameKey, userIdKey, users, styles } = state;
|
|
12
12
|
const handleRemove = ({ userId, index }) => {
|
|
13
13
|
dispatch({ type: 'REMOVE_USER', payload: { userId, index } });
|
|
14
14
|
};
|
|
@@ -32,6 +32,6 @@ const ButtonViewAll = () => {
|
|
|
32
32
|
return (React.createElement(AccountChip, { key: user === null || user === void 0 ? void 0 : user[userIdKey], user: user, value: user === null || user === void 0 ? void 0 : user[userIdKey], label: user === null || user === void 0 ? void 0 : user[nameKey], onRemove: () => handleRemove({ userId: user === null || user === void 0 ? void 0 : user[userIdKey], index }) }));
|
|
33
33
|
})));
|
|
34
34
|
return (React.createElement(Popover, { content: () => contentViewAll(), trigger: "click", arrow: false, overlayInnerStyle: { padding: 0 }, destroyTooltipOnHide: true },
|
|
35
|
-
React.createElement(ButtonViewAllStyled, { type: "text" }, "View all")));
|
|
35
|
+
React.createElement(ButtonViewAllStyled, { className: "select-account-view-all", style: Object.assign({}, ((styles === null || styles === void 0 ? void 0 : styles.btnViewAll) || {})), type: "text" }, "View all")));
|
|
36
36
|
};
|
|
37
37
|
export default ButtonViewAll;
|
|
@@ -10,11 +10,11 @@ import ButtonViewAll from './ButtonViewAll';
|
|
|
10
10
|
export const Content = () => {
|
|
11
11
|
var _a;
|
|
12
12
|
const { state, dispatch } = useContext(SelectAccountContext);
|
|
13
|
-
const { usersSelected, nameKey, userIdKey, users, disabled } = state;
|
|
13
|
+
const { usersSelected, nameKey, userIdKey, users, disabled, className, styles } = state;
|
|
14
14
|
const handleRemove = ({ userId, index }) => {
|
|
15
15
|
dispatch({ type: 'REMOVE_USER', payload: { userId, index } });
|
|
16
16
|
};
|
|
17
|
-
return (React.createElement(Wrapper, { disabled: !!disabled },
|
|
17
|
+
return (React.createElement(Wrapper, { className: `select-account ${className}`, style: Object.assign({}, ((styles === null || styles === void 0 ? void 0 : styles.wrapper) || {})), disabled: !!disabled },
|
|
18
18
|
state.type === 'group'
|
|
19
19
|
? usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.map((id, index) => {
|
|
20
20
|
var _a;
|
|
@@ -22,7 +22,7 @@ export const Content = () => {
|
|
|
22
22
|
return null;
|
|
23
23
|
const group = (_a = state === null || state === void 0 ? void 0 : state.listAccountGroup) === null || _a === void 0 ? void 0 : _a.find(u => (u === null || u === void 0 ? void 0 : u[state === null || state === void 0 ? void 0 : state.groupIdKey]) === id);
|
|
24
24
|
if (!group) {
|
|
25
|
-
const user = users.find(u => (u === null || u === void 0 ? void 0 : u[userIdKey]) === id);
|
|
25
|
+
const user = users === null || users === void 0 ? void 0 : users.find(u => (u === null || u === void 0 ? void 0 : u[userIdKey]) === id);
|
|
26
26
|
if (!user)
|
|
27
27
|
return null;
|
|
28
28
|
return (React.createElement(AccountChip, { key: user === null || user === void 0 ? void 0 : user[userIdKey], user: user, value: user === null || user === void 0 ? void 0 : user[userIdKey], label: user === null || user === void 0 ? void 0 : user[nameKey], onRemove: () => handleRemove({ userId: user === null || user === void 0 ? void 0 : user[userIdKey], index }) }));
|
|
@@ -32,7 +32,9 @@ export const Content = () => {
|
|
|
32
32
|
: usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.map((id, index) => {
|
|
33
33
|
if (index >= (state === null || state === void 0 ? void 0 : state.limitShow))
|
|
34
34
|
return null;
|
|
35
|
-
const user = users.find(u => (u === null || u === void 0 ? void 0 : u[userIdKey]) === id);
|
|
35
|
+
const user = users === null || users === void 0 ? void 0 : users.find(u => (u === null || u === void 0 ? void 0 : u[userIdKey]) === id);
|
|
36
|
+
if (!user)
|
|
37
|
+
return null;
|
|
36
38
|
return (React.createElement(AccountChip, { key: user === null || user === void 0 ? void 0 : user[userIdKey], user: user, value: user === null || user === void 0 ? void 0 : user[userIdKey], label: user === null || user === void 0 ? void 0 : user[nameKey], onRemove: () => handleRemove({ userId: user === null || user === void 0 ? void 0 : user[userIdKey], index }) }));
|
|
37
39
|
}),
|
|
38
40
|
((_a = state === null || state === void 0 ? void 0 : state.usersSelected) === null || _a === void 0 ? void 0 : _a.length) > (state === null || state === void 0 ? void 0 : state.limitShow) && React.createElement(ButtonViewAll, null),
|
|
@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
// Libraries
|
|
13
13
|
import React, { createContext, useEffect, useMemo, useReducer } from 'react';
|
|
14
|
-
import { uniq } from 'lodash';
|
|
14
|
+
import { uniq, get } from 'lodash';
|
|
15
15
|
// Reducer
|
|
16
16
|
import { initialState, reducer } from './reducer';
|
|
17
17
|
// Hooks
|
|
@@ -37,8 +37,12 @@ export const SelectAccountProvider = props => {
|
|
|
37
37
|
}, []);
|
|
38
38
|
useEffect(() => {
|
|
39
39
|
if (!isLoading) {
|
|
40
|
-
|
|
41
|
-
dispatch({
|
|
40
|
+
const newData = get(data, state === null || state === void 0 ? void 0 : state.dataAccountsKey, Array.isArray(data) ? data : []);
|
|
41
|
+
dispatch({
|
|
42
|
+
type: 'UPDATE_USERS',
|
|
43
|
+
payload: newData,
|
|
44
|
+
});
|
|
45
|
+
dispatch({ type: 'UPDATE_USERS_DISPLAY', payload: newData });
|
|
42
46
|
}
|
|
43
47
|
}, [data]);
|
|
44
48
|
// Callback OnChange
|
|
@@ -38,13 +38,19 @@ export const reducer = (state, action) => produce(state, draft => {
|
|
|
38
38
|
draft.openAccountList = false;
|
|
39
39
|
break;
|
|
40
40
|
case 'UPDATE_USERS':
|
|
41
|
-
|
|
41
|
+
if (Array.isArray(action.payload)) {
|
|
42
|
+
draft.users = action.payload;
|
|
43
|
+
}
|
|
42
44
|
break;
|
|
43
45
|
case 'UPDATE_USERS_DISPLAY':
|
|
44
|
-
|
|
46
|
+
if (Array.isArray(action.payload)) {
|
|
47
|
+
draft.usersDisplay = action.payload;
|
|
48
|
+
}
|
|
45
49
|
break;
|
|
46
50
|
case 'UPDATE_USERS_SELECTED':
|
|
47
|
-
|
|
51
|
+
if (Array.isArray(action.payload)) {
|
|
52
|
+
draft.usersSelected = action.payload;
|
|
53
|
+
}
|
|
48
54
|
break;
|
|
49
55
|
case 'UPDATE_DRAFT_USERS_SELECTED': {
|
|
50
56
|
const { userId } = action.payload;
|
|
@@ -15,6 +15,13 @@ export type SelectAccountProps = {
|
|
|
15
15
|
disabled?: boolean;
|
|
16
16
|
disabledAccount?: any[];
|
|
17
17
|
limitShow?: number;
|
|
18
|
+
className?: string;
|
|
19
|
+
styles?: {
|
|
20
|
+
wrapper?: React.CSSProperties;
|
|
21
|
+
accountChip?: React.CSSProperties;
|
|
22
|
+
btnAdd?: React.CSSProperties;
|
|
23
|
+
btnViewAll?: React.CSSProperties;
|
|
24
|
+
};
|
|
18
25
|
nameKey: string;
|
|
19
26
|
userIdKey: string;
|
|
20
27
|
dataAccountsKey: string;
|
|
@@ -356,7 +356,7 @@ export const AccountSharing = props => {
|
|
|
356
356
|
xhr.send(JSON.stringify(data));
|
|
357
357
|
});
|
|
358
358
|
const selectNetwork = network => {
|
|
359
|
-
if (networkId === network.networkId) {
|
|
359
|
+
if (+networkId === +network.networkId) {
|
|
360
360
|
return;
|
|
361
361
|
}
|
|
362
362
|
loginNetworkWithToken(network);
|
|
@@ -399,7 +399,10 @@ export const AccountSharing = props => {
|
|
|
399
399
|
React.createElement(Flex, { gap: 10 },
|
|
400
400
|
React.createElement(Button, { type: "text", onClick: () => setTab('account'), icon: React.createElement(Icon, { type: "icon-ants-angle-left", style: { fontSize: '12px' } }) }, translateLang('KEY_BACK')),
|
|
401
401
|
React.createElement(InputSearch, { className: "--portal", value: portalSearch, onChange: value => setPortalSearch(value), onClickRemove: () => setPortalSearch('') })),
|
|
402
|
-
React.createElement("div", { className: "network-select" }, filterListNetwork === null || filterListNetwork === void 0 ? void 0 : filterListNetwork.map((network) => (React.createElement("div", { key: network.networkId, className: `network-item ${networkId === +network.networkId
|
|
402
|
+
React.createElement("div", { className: "network-select" }, filterListNetwork === null || filterListNetwork === void 0 ? void 0 : filterListNetwork.map((network) => (React.createElement("div", { key: network.networkId, className: `network-item ${+networkId === +network.networkId ||
|
|
403
|
+
+(currentNetwork === null || currentNetwork === void 0 ? void 0 : currentNetwork.networkId) === +network.networkId
|
|
404
|
+
? 'disabled'
|
|
405
|
+
: ''}`, onClick: () => selectNetwork(network) },
|
|
403
406
|
React.createElement("div", { className: "image-wrapper" },
|
|
404
407
|
React.createElement("img", { src: network.logo, style: {
|
|
405
408
|
borderRadius: 0,
|