@antscorp/antsomi-ui 1.3.5-beta.360 → 1.3.5-beta.361

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.
Files changed (9) hide show
  1. package/es/components/molecules/SelectAccount/AccountChip.js +2 -2
  2. package/es/components/molecules/SelectAccount/ButtonAdd.js +2 -1
  3. package/es/components/molecules/SelectAccount/ButtonViewAll.js +2 -2
  4. package/es/components/molecules/SelectAccount/Content.js +6 -4
  5. package/es/components/molecules/SelectAccount/context/SelectAccountContext.js +7 -3
  6. package/es/components/molecules/SelectAccount/context/reducer.js +9 -3
  7. package/es/components/molecules/SelectAccount/index.js +2 -0
  8. package/es/components/molecules/SelectAccount/type.d.ts +7 -0
  9. package/package.json +1 -1
package/es/components/molecules/SelectAccount/AccountChip.js CHANGED
@@ -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" }))))));
package/es/components/molecules/SelectAccount/ButtonAdd.js CHANGED
@@ -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" },
package/es/components/molecules/SelectAccount/ButtonViewAll.js CHANGED
@@ -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;
package/es/components/molecules/SelectAccount/Content.js CHANGED
@@ -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),
package/es/components/molecules/SelectAccount/context/SelectAccountContext.js CHANGED
@@ -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
- dispatch({ type: 'UPDATE_USERS', payload: (data === null || data === void 0 ? void 0 : data[state === null || state === void 0 ? void 0 : state.dataAccountsKey]) || [] });
41
- dispatch({ type: 'UPDATE_USERS_DISPLAY', payload: (data === null || data === void 0 ? void 0 : data[state === null || state === void 0 ? void 0 : state.dataAccountsKey]) || [] });
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
package/es/components/molecules/SelectAccount/context/reducer.js CHANGED
@@ -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
- draft.users = action.payload;
41
+ if (Array.isArray(action.payload)) {
42
+ draft.users = action.payload;
43
+ }
42
44
  break;
43
45
  case 'UPDATE_USERS_DISPLAY':
44
- draft.usersDisplay = action.payload;
46
+ if (Array.isArray(action.payload)) {
47
+ draft.usersDisplay = action.payload;
48
+ }
45
49
  break;
46
50
  case 'UPDATE_USERS_SELECTED':
47
- draft.usersSelected = action.payload;
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;
package/es/components/molecules/SelectAccount/index.js CHANGED
@@ -17,5 +17,7 @@ SelectAccount.defaultProps = {
17
17
  type: 'default',
18
18
  searchType: 'client',
19
19
  dataAccountsKey: 'data',
20
+ className: '',
21
+ styles: {},
20
22
  };
21
23
  export default SelectAccount;
package/es/components/molecules/SelectAccount/type.d.ts CHANGED
@@ -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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.360",
3
+ "version": "1.3.5-beta.361",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",