venice-ui 2.2.1 → 2.2.5

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 (7) hide show
  1. package/dist/cjs/components/List/List.js +29 -9
  2. package/dist/cjs/components/List/list.styles.js +14 -1
  3. package/dist/esm/components/List/List.js +30 -10
  4. package/dist/esm/components/List/list.styles.js +13 -0
  5. package/dist/types/components/List/List.d.ts +7 -1
  6. package/dist/types/components/List/list.styles.d.ts +8 -1
  7. package/package.json +1 -1
package/dist/cjs/components/List/List.js CHANGED
@@ -8,8 +8,12 @@ const Aligment_1 = require("../Aligment");
8
8
  const react_1 = __importDefault(require("react"));
9
9
  const list_styles_1 = require("./list.styles");
10
10
  const Checkbox_1 = require("../Checkbox");
11
+ const styled_components_1 = require("styled-components");
11
12
  const Icons_1 = require("../Icons");
12
- const List = ({ isCheckbox, isCollapsable, items, handleChange, }) => {
13
+ const Theme_1 = require("../../Theme");
14
+ const Table_styles_1 = require("../Table/Table.styles");
15
+ const DropdownMenu_1 = require("../DropdownMenu");
16
+ const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, items, handleChange, handleSelect, selected, theme = Theme_1.mainTheme, moreActions = [], }) => {
13
17
  const updateItem = (items, rowID, updater) => {
14
18
  items.forEach((_item) => {
15
19
  if (_item.id === rowID) {
@@ -84,21 +88,37 @@ const List = ({ isCheckbox, isCollapsable, items, handleChange, }) => {
84
88
  checkParent(newListOption, item.id);
85
89
  handleChange(newListOption);
86
90
  };
91
+ const handleRowClick = (item, e) => {
92
+ e.stopPropagation();
93
+ if (isCheckbox) {
94
+ handleClick(item);
95
+ }
96
+ else if (isSelectable && handleSelect) {
97
+ handleSelect(item.id);
98
+ }
99
+ };
87
100
  const gerenrateRow = (row, level) => {
88
101
  return (react_1.default.createElement(react_1.default.Fragment, null,
89
- react_1.default.createElement(list_styles_1.ListRow, { key: row.id, level: level },
90
- isCollapsable && (react_1.default.createElement(list_styles_1.ListIconWrapper, { extend: row.extend || false }, row.children.length !== 0 && (react_1.default.createElement(Icons_1.Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })))),
91
- isCheckbox && (react_1.default.createElement(Checkbox_1.Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "small" })),
92
- react_1.default.createElement(list_styles_1.ListText, null, row.value)),
102
+ react_1.default.createElement(list_styles_1.ListRow, { key: row.id, level: level, selected: selected ? selected === row.id : false, action: isCheckbox || isSelectable },
103
+ isCollapsable && (react_1.default.createElement(list_styles_1.ListIconWrapper, { extend: row.extend || false, onClick: (e) => {
104
+ e.stopPropagation();
105
+ } }, row.children.length !== 0 && (react_1.default.createElement(Icons_1.Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })))),
106
+ isCheckbox && (react_1.default.createElement("div", { onClick: (e) => e.stopPropagation() },
107
+ react_1.default.createElement(Checkbox_1.Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "small" }))),
108
+ react_1.default.createElement(list_styles_1.ListText, { onClick: (e) => handleRowClick(row, e), action: isCheckbox || isSelectable }, row.value),
109
+ haveMoreOptions && (react_1.default.createElement(list_styles_1.MoreWrapper, null,
110
+ react_1.default.createElement(Table_styles_1.OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
111
+ react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: moreActions, targetID: row.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))))),
93
112
  row.extend &&
94
113
  row.children.length > 0 &&
95
114
  row.children.map((_chiledRow) => {
96
115
  return gerenrateRow(_chiledRow, level + 1);
97
116
  })));
98
117
  };
99
- let level = 1;
100
- return (react_1.default.createElement(Aligment_1.Aligment, { direction: "column", width: "100%", align: "flex-start" }, items.map((_row) => {
101
- return gerenrateRow(_row, level);
102
- })));
118
+ let level = 0;
119
+ return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
120
+ react_1.default.createElement(Aligment_1.Aligment, { direction: "column", width: "100%", align: "flex-start" }, items.map((_row) => {
121
+ return gerenrateRow(_row, level);
122
+ }))));
103
123
  };
104
124
  exports.List = List;
package/dist/cjs/components/List/list.styles.js CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ListIconWrapper = exports.ListText = exports.ListRow = void 0;
6
+ exports.MoreWrapper = exports.ListIconWrapper = exports.ListText = exports.ListRow = void 0;
7
7
  const styled_components_1 = __importDefault(require("styled-components"));
8
8
  exports.ListRow = styled_components_1.default.div `
9
9
  display: flex;
@@ -15,9 +15,18 @@ exports.ListRow = styled_components_1.default.div `
15
15
  gap: 8px;
16
16
  align-content: center;
17
17
  align-items: center;
18
+ background-color: ${(p) => p.selected
19
+ ? p.theme.tableCellActiveBackground
20
+ : p.theme.tableCellBackground};
21
+ :hover {
22
+ background-color: ${(p) => p.theme.tableCellActiveBackground};
23
+ }
18
24
  `;
19
25
  exports.ListText = styled_components_1.default.div `
20
26
  font-size: 16px;
27
+ :hover {
28
+ cursor: ${(p) => (p.action ? 'pointer' : 'default')};
29
+ }
21
30
  `;
22
31
  exports.ListIconWrapper = styled_components_1.default.div `
23
32
  width: 24px;
@@ -29,3 +38,7 @@ exports.ListIconWrapper = styled_components_1.default.div `
29
38
  transition: 300ms;
30
39
  transform: rotate(${(p) => (p.extend ? '0deg' : '-90deg')});
31
40
  `;
41
+ exports.MoreWrapper = styled_components_1.default.div `
42
+ position:absolute;
43
+ right:30px;
44
+ `;
package/dist/esm/components/List/List.js CHANGED
@@ -1,9 +1,13 @@
1
1
  import { Aligment } from '../Aligment';
2
2
  import React from 'react';
3
- import { ListIconWrapper, ListRow, ListText } from './list.styles';
3
+ import { ListIconWrapper, ListRow, ListText, MoreWrapper } from './list.styles';
4
4
  import { Checkbox } from '../Checkbox';
5
+ import { ThemeProvider } from 'styled-components';
5
6
  import { Icon } from '../Icons';
6
- export const List = ({ isCheckbox, isCollapsable, items, handleChange, }) => {
7
+ import { mainTheme } from '../../Theme';
8
+ import { OptionTableCellWrapper } from '../Table/Table.styles';
9
+ import { DropdownMenu } from '../DropdownMenu';
10
+ export const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, items, handleChange, handleSelect, selected, theme = mainTheme, moreActions = [], }) => {
7
11
  const updateItem = (items, rowID, updater) => {
8
12
  items.forEach((_item) => {
9
13
  if (_item.id === rowID) {
@@ -78,20 +82,36 @@ export const List = ({ isCheckbox, isCollapsable, items, handleChange, }) => {
78
82
  checkParent(newListOption, item.id);
79
83
  handleChange(newListOption);
80
84
  };
85
+ const handleRowClick = (item, e) => {
86
+ e.stopPropagation();
87
+ if (isCheckbox) {
88
+ handleClick(item);
89
+ }
90
+ else if (isSelectable && handleSelect) {
91
+ handleSelect(item.id);
92
+ }
93
+ };
81
94
  const gerenrateRow = (row, level) => {
82
95
  return (React.createElement(React.Fragment, null,
83
- React.createElement(ListRow, { key: row.id, level: level },
84
- isCollapsable && (React.createElement(ListIconWrapper, { extend: row.extend || false }, row.children.length !== 0 && (React.createElement(Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })))),
85
- isCheckbox && (React.createElement(Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "small" })),
86
- React.createElement(ListText, null, row.value)),
96
+ React.createElement(ListRow, { key: row.id, level: level, selected: selected ? selected === row.id : false, action: isCheckbox || isSelectable },
97
+ isCollapsable && (React.createElement(ListIconWrapper, { extend: row.extend || false, onClick: (e) => {
98
+ e.stopPropagation();
99
+ } }, row.children.length !== 0 && (React.createElement(Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })))),
100
+ isCheckbox && (React.createElement("div", { onClick: (e) => e.stopPropagation() },
101
+ React.createElement(Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "small" }))),
102
+ React.createElement(ListText, { onClick: (e) => handleRowClick(row, e), action: isCheckbox || isSelectable }, row.value),
103
+ haveMoreOptions && (React.createElement(MoreWrapper, null,
104
+ React.createElement(OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
105
+ React.createElement(DropdownMenu, { options: moreActions, targetID: row.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))))),
87
106
  row.extend &&
88
107
  row.children.length > 0 &&
89
108
  row.children.map((_chiledRow) => {
90
109
  return gerenrateRow(_chiledRow, level + 1);
91
110
  })));
92
111
  };
93
- let level = 1;
94
- return (React.createElement(Aligment, { direction: "column", width: "100%", align: "flex-start" }, items.map((_row) => {
95
- return gerenrateRow(_row, level);
96
- })));
112
+ let level = 0;
113
+ return (React.createElement(ThemeProvider, { theme: theme },
114
+ React.createElement(Aligment, { direction: "column", width: "100%", align: "flex-start" }, items.map((_row) => {
115
+ return gerenrateRow(_row, level);
116
+ }))));
97
117
  };
package/dist/esm/components/List/list.styles.js CHANGED
@@ -9,9 +9,18 @@ export const ListRow = styled.div `
9
9
  gap: 8px;
10
10
  align-content: center;
11
11
  align-items: center;
12
+ background-color: ${(p) => p.selected
13
+ ? p.theme.tableCellActiveBackground
14
+ : p.theme.tableCellBackground};
15
+ :hover {
16
+ background-color: ${(p) => p.theme.tableCellActiveBackground};
17
+ }
12
18
  `;
13
19
  export const ListText = styled.div `
14
20
  font-size: 16px;
21
+ :hover {
22
+ cursor: ${(p) => (p.action ? 'pointer' : 'default')};
23
+ }
15
24
  `;
16
25
  export const ListIconWrapper = styled.div `
17
26
  width: 24px;
@@ -23,3 +32,7 @@ export const ListIconWrapper = styled.div `
23
32
  transition: 300ms;
24
33
  transform: rotate(${(p) => (p.extend ? '0deg' : '-90deg')});
25
34
  `;
35
+ export const MoreWrapper = styled.div `
36
+ position:absolute;
37
+ right:30px;
38
+ `;
package/dist/types/components/List/List.d.ts CHANGED
@@ -1,10 +1,16 @@
1
1
  import { FC } from 'react';
2
+ import { IAction } from 'types/';
2
3
  export interface IListProps {
3
4
  items: IListItem[];
5
+ handleChange: (items: IListItem[]) => void;
6
+ handleSelect?: (id: string) => void;
7
+ selected?: string;
4
8
  isCheckbox?: boolean;
5
9
  isCollapsable?: boolean;
10
+ isSelectable?: boolean;
11
+ haveMoreOptions?: boolean;
6
12
  theme?: any;
7
- handleChange: (items: IListItem[]) => void;
13
+ moreActions?: IAction[];
8
14
  }
9
15
  export interface IListItem {
10
16
  id: string;
package/dist/types/components/List/list.styles.d.ts CHANGED
@@ -1,10 +1,17 @@
1
1
  interface IListRow {
2
2
  level: number;
3
+ selected: boolean;
4
+ action: boolean;
5
+ theme: any;
3
6
  }
4
7
  export declare const ListRow: import("styled-components").StyledComponent<"div", any, IListRow, never>;
5
- export declare const ListText: import("styled-components").StyledComponent<"div", any, {}, never>;
8
+ interface IListRowPRops {
9
+ action: boolean;
10
+ }
11
+ export declare const ListText: import("styled-components").StyledComponent<"div", any, IListRowPRops, never>;
6
12
  interface IListIconWrapperProps {
7
13
  extend: boolean;
8
14
  }
9
15
  export declare const ListIconWrapper: import("styled-components").StyledComponent<"div", any, IListIconWrapperProps, never>;
16
+ export declare const MoreWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
10
17
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.2.1",
3
+ "version": "2.2.5",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",