alicia-design-system 1.74.3 → 1.74.4
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/dist/cjs/alicia/common/List/List.d.ts +3 -1
- package/dist/cjs/alicia/common/List/List.js +6 -5
- package/dist/cjs/alicia/common/List/List.js.map +1 -1
- package/dist/esm/alicia/common/List/List.d.ts +3 -1
- package/dist/esm/alicia/common/List/List.js +6 -5
- package/dist/esm/alicia/common/List/List.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const CustomListItem: ({ list, withLeftIcon, rightIconColor, itemFontSize, withRightIcon, withLeftIconBackground, leftIconColor, onItemClick, isClickable, itemFont, itemColor, selectedItemColor, selectedItemBackgroundColor, enableVisualEffects, data, }: CustomListItemProps) => JSX.Element;
|
|
2
|
+
export declare const CustomListItem: ({ list, withLeftIcon, rightIconColor, itemFontSize, withRightIcon, withLeftIconBackground, leftIconColor, onItemClick, isClickable, itemFont, itemColor, selectedItemColor, selectedItemBackgroundColor, enableVisualEffects, data, hoveredItem, setHoveredItem, }: CustomListItemProps) => JSX.Element;
|
|
3
3
|
export declare const List: (props: ListProps) => JSX.Element;
|
|
4
4
|
export type ListProps = {
|
|
5
5
|
list: ListOption[];
|
|
@@ -27,6 +27,8 @@ export type CustomListItemProps = ListProps & {
|
|
|
27
27
|
description?: string;
|
|
28
28
|
index: number;
|
|
29
29
|
};
|
|
30
|
+
hoveredItem: string;
|
|
31
|
+
setHoveredItem: (value: string) => void;
|
|
30
32
|
};
|
|
31
33
|
type ListOption = {
|
|
32
34
|
value: string;
|
|
@@ -10,8 +10,7 @@ const icons_1 = require("../icons");
|
|
|
10
10
|
const getRandomNumber = (min, max) => {
|
|
11
11
|
return Math.floor(Math.random() * (max - min + 1) + min);
|
|
12
12
|
};
|
|
13
|
-
const CustomListItem = ({ list, withLeftIcon, rightIconColor, itemFontSize, withRightIcon, withLeftIconBackground = true, leftIconColor = undefined, onItemClick, isClickable = false, itemFont = 'UntitledSansRegular', itemColor = 'text', selectedItemColor = '#00ec00', selectedItemBackgroundColor = '#00ec00', enableVisualEffects = true, data, }) => {
|
|
14
|
-
const [isHovered, setHovered] = (0, react_2.useState)(false);
|
|
13
|
+
const CustomListItem = ({ list, withLeftIcon, rightIconColor, itemFontSize, withRightIcon, withLeftIconBackground = true, leftIconColor = undefined, onItemClick, isClickable = false, itemFont = 'UntitledSansRegular', itemColor = 'text', selectedItemColor = '#00ec00', selectedItemBackgroundColor = '#00ec00', enableVisualEffects = true, data, hoveredItem, setHoveredItem, }) => {
|
|
15
14
|
const [degree] = (0, react_2.useState)(getRandomNumber(349, 367));
|
|
16
15
|
const onClickItem = (item) => {
|
|
17
16
|
if (isClickable && onItemClick) {
|
|
@@ -21,7 +20,7 @@ const CustomListItem = ({ list, withLeftIcon, rightIconColor, itemFontSize, with
|
|
|
21
20
|
const ArrowIcon = (0, icons_1.ArrowForwardCircleIcon)({ fillColor: itemColor });
|
|
22
21
|
return ((0, jsx_runtime_1.jsxs)(react_1.ListItem, Object.assign({ pos: "relative", color: itemColor, cursor: isClickable ? 'pointer' : 'auto', onClick: () => {
|
|
23
22
|
data && onClickItem({ value: data === null || data === void 0 ? void 0 : data.value, label: data === null || data === void 0 ? void 0 : data.label });
|
|
24
|
-
}, zIndex: 4, display: ['flex', 'inherit'], alignItems: "center", fontFamily: itemFont, paddingY: 2, fontSize: "2xl", onMouseEnter: () =>
|
|
23
|
+
}, zIndex: 4, display: ['flex', 'inherit'], alignItems: "center", fontFamily: itemFont, paddingY: 2, fontSize: "2xl", onMouseEnter: () => setHoveredItem(data.value), onMouseLeave: () => setHoveredItem(""), w: "100%" }, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ justifyContent: "space-between", w: "100%" }, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ maxW: withRightIcon ? '90%' : '100%' }, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ alignItems: "center" }, { children: [(data === null || data === void 0 ? void 0 : data.index) !== list.length - 1 && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { width: '0' }, animate: { width: '100%' }, style: {
|
|
25
24
|
width: '100%',
|
|
26
25
|
opacity: 0.3,
|
|
27
26
|
zIndex: '2',
|
|
@@ -36,7 +35,7 @@ const CustomListItem = ({ list, withLeftIcon, rightIconColor, itemFontSize, with
|
|
|
36
35
|
? itemColor
|
|
37
36
|
: selectedItemBackgroundColor}`, mr: "1.5", fontSize: 20, bg: enableVisualEffects
|
|
38
37
|
? 'transparent'
|
|
39
|
-
: selectedItemBackgroundColor, color: enableVisualEffects ? undefined : 'white' }, { children: Number(data === null || data === void 0 ? void 0 : data.index) + 1 }))] })))] })), (0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ flexDirection: "column" }, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, Object.assign({ as: "span", fontSize: itemFontSize, wordBreak: "break-all" }, { children: data === null || data === void 0 ? void 0 : data.label })), (data === null || data === void 0 ? void 0 : data.description) && ((0, jsx_runtime_1.jsx)(react_1.Text, Object.assign({ as: "span", fontSize: (0, polished_1.rem)(14) }, { children: data === null || data === void 0 ? void 0 : data.description })))] }))] })), withRightIcon && ((0, jsx_runtime_1.jsx)(ArrowIcon, { fill: rightIconColor, pr: (0, polished_1.rem)(10), float: "right", width: (0, polished_1.rem)(30), height: (0, polished_1.rem)(30) }))] })), isClickable &&
|
|
38
|
+
: selectedItemBackgroundColor, color: enableVisualEffects ? undefined : 'white' }, { children: Number(data === null || data === void 0 ? void 0 : data.index) + 1 }))] })))] })), (0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ flexDirection: "column" }, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, Object.assign({ as: "span", fontSize: itemFontSize, wordBreak: "break-all" }, { children: data === null || data === void 0 ? void 0 : data.label })), (data === null || data === void 0 ? void 0 : data.description) && ((0, jsx_runtime_1.jsx)(react_1.Text, Object.assign({ as: "span", fontSize: (0, polished_1.rem)(14) }, { children: data === null || data === void 0 ? void 0 : data.description })))] }))] })), withRightIcon && ((0, jsx_runtime_1.jsx)(ArrowIcon, { fill: rightIconColor, pr: (0, polished_1.rem)(10), float: "right", width: (0, polished_1.rem)(30), height: (0, polished_1.rem)(30) }))] })), isClickable && (hoveredItem === data.value) && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { width: '0', transform: "rotate('32deg')" }, animate: {
|
|
40
39
|
width: '100%',
|
|
41
40
|
transform: enableVisualEffects
|
|
42
41
|
? 'rotate(-0.4deg)'
|
|
@@ -56,7 +55,9 @@ const CustomListItem = ({ list, withLeftIcon, rightIconColor, itemFontSize, with
|
|
|
56
55
|
};
|
|
57
56
|
exports.CustomListItem = CustomListItem;
|
|
58
57
|
const List = (props) => {
|
|
59
|
-
|
|
58
|
+
var _a;
|
|
59
|
+
const [isHovered, setHovered] = (0, react_2.useState)((_a = props.selectedValue) !== null && _a !== void 0 ? _a : "");
|
|
60
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ flexDirection: "column" }, { children: [props.title && ((0, jsx_runtime_1.jsx)(react_1.Flex, Object.assign({ as: "span", mb: (0, polished_1.rem)(18), fontSize: (0, polished_1.rem)(14), fontWeight: "500" }, { children: props.title }))), props.type === 'ordered' && ((0, jsx_runtime_1.jsx)(react_1.List, { children: props.list.map(({ value, label, description }, index) => ((0, jsx_runtime_1.jsx)(exports.CustomListItem, Object.assign({ hoveredItem: isHovered, setHoveredItem: setHovered, data: { value, label, description, index } }, props), index))) }))] })));
|
|
60
61
|
};
|
|
61
62
|
exports.List = List;
|
|
62
63
|
//# sourceMappingURL=List.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../../src/alicia/common/List/List.tsx"],"names":[],"mappings":";;;;AAAA,4CAM0B;AAC1B,iDAAuC;AACvC,uCAA+B;AAC/B,iCAAiC;AACjC,oCAAkD;AAElD,MAAM,eAAe,GAAG,CAAC,GAAW,EAAE,GAAW,EAAE,EAAE;IACnD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;AAC3D,CAAC,CAAC;AAEK,MAAM,cAAc,GAAG,CAAC,EAC7B,IAAI,EACJ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,aAAa,EACb,sBAAsB,GAAG,IAAI,EAC7B,aAAa,GAAG,SAAS,EACzB,WAAW,EACX,WAAW,GAAG,KAAK,EACnB,QAAQ,GAAG,qBAAqB,EAChC,SAAS,GAAG,MAAM,EAClB,iBAAiB,GAAG,SAAS,EAC7B,2BAA2B,GAAG,SAAS,EACvC,mBAAmB,GAAG,IAAI,EAC1B,IAAI,
|
|
1
|
+
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../../src/alicia/common/List/List.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const CustomListItem: ({ list, withLeftIcon, rightIconColor, itemFontSize, withRightIcon, withLeftIconBackground, leftIconColor, onItemClick, isClickable, itemFont, itemColor, selectedItemColor, selectedItemBackgroundColor, enableVisualEffects, data, }: CustomListItemProps) => JSX.Element;
|
|
2
|
+
export declare const CustomListItem: ({ list, withLeftIcon, rightIconColor, itemFontSize, withRightIcon, withLeftIconBackground, leftIconColor, onItemClick, isClickable, itemFont, itemColor, selectedItemColor, selectedItemBackgroundColor, enableVisualEffects, data, hoveredItem, setHoveredItem, }: CustomListItemProps) => JSX.Element;
|
|
3
3
|
export declare const List: (props: ListProps) => JSX.Element;
|
|
4
4
|
export type ListProps = {
|
|
5
5
|
list: ListOption[];
|
|
@@ -27,6 +27,8 @@ export type CustomListItemProps = ListProps & {
|
|
|
27
27
|
description?: string;
|
|
28
28
|
index: number;
|
|
29
29
|
};
|
|
30
|
+
hoveredItem: string;
|
|
31
|
+
setHoveredItem: (value: string) => void;
|
|
30
32
|
};
|
|
31
33
|
type ListOption = {
|
|
32
34
|
value: string;
|
|
@@ -7,8 +7,7 @@ import { ArrowForwardCircleIcon } from '../icons';
|
|
|
7
7
|
const getRandomNumber = (min, max) => {
|
|
8
8
|
return Math.floor(Math.random() * (max - min + 1) + min);
|
|
9
9
|
};
|
|
10
|
-
export const CustomListItem = ({ list, withLeftIcon, rightIconColor, itemFontSize, withRightIcon, withLeftIconBackground = true, leftIconColor = undefined, onItemClick, isClickable = false, itemFont = 'UntitledSansRegular', itemColor = 'text', selectedItemColor = '#00ec00', selectedItemBackgroundColor = '#00ec00', enableVisualEffects = true, data, }) => {
|
|
11
|
-
const [isHovered, setHovered] = useState(false);
|
|
10
|
+
export const CustomListItem = ({ list, withLeftIcon, rightIconColor, itemFontSize, withRightIcon, withLeftIconBackground = true, leftIconColor = undefined, onItemClick, isClickable = false, itemFont = 'UntitledSansRegular', itemColor = 'text', selectedItemColor = '#00ec00', selectedItemBackgroundColor = '#00ec00', enableVisualEffects = true, data, hoveredItem, setHoveredItem, }) => {
|
|
12
11
|
const [degree] = useState(getRandomNumber(349, 367));
|
|
13
12
|
const onClickItem = (item) => {
|
|
14
13
|
if (isClickable && onItemClick) {
|
|
@@ -18,7 +17,7 @@ export const CustomListItem = ({ list, withLeftIcon, rightIconColor, itemFontSiz
|
|
|
18
17
|
const ArrowIcon = ArrowForwardCircleIcon({ fillColor: itemColor });
|
|
19
18
|
return (_jsxs(ListItem, Object.assign({ pos: "relative", color: itemColor, cursor: isClickable ? 'pointer' : 'auto', onClick: () => {
|
|
20
19
|
data && onClickItem({ value: data === null || data === void 0 ? void 0 : data.value, label: data === null || data === void 0 ? void 0 : data.label });
|
|
21
|
-
}, zIndex: 4, display: ['flex', 'inherit'], alignItems: "center", fontFamily: itemFont, paddingY: 2, fontSize: "2xl", onMouseEnter: () =>
|
|
20
|
+
}, zIndex: 4, display: ['flex', 'inherit'], alignItems: "center", fontFamily: itemFont, paddingY: 2, fontSize: "2xl", onMouseEnter: () => setHoveredItem(data.value), onMouseLeave: () => setHoveredItem(""), w: "100%" }, { children: [_jsxs(Flex, Object.assign({ justifyContent: "space-between", w: "100%" }, { children: [_jsxs(Flex, Object.assign({ maxW: withRightIcon ? '90%' : '100%' }, { children: [_jsxs(Flex, Object.assign({ alignItems: "center" }, { children: [(data === null || data === void 0 ? void 0 : data.index) !== list.length - 1 && (_jsx(motion.div, { initial: { width: '0' }, animate: { width: '100%' }, style: {
|
|
22
21
|
width: '100%',
|
|
23
22
|
opacity: 0.3,
|
|
24
23
|
zIndex: '2',
|
|
@@ -33,7 +32,7 @@ export const CustomListItem = ({ list, withLeftIcon, rightIconColor, itemFontSiz
|
|
|
33
32
|
? itemColor
|
|
34
33
|
: selectedItemBackgroundColor}`, mr: "1.5", fontSize: 20, bg: enableVisualEffects
|
|
35
34
|
? 'transparent'
|
|
36
|
-
: selectedItemBackgroundColor, color: enableVisualEffects ? undefined : 'white' }, { children: Number(data === null || data === void 0 ? void 0 : data.index) + 1 }))] })))] })), _jsxs(Flex, Object.assign({ flexDirection: "column" }, { children: [_jsx(Text, Object.assign({ as: "span", fontSize: itemFontSize, wordBreak: "break-all" }, { children: data === null || data === void 0 ? void 0 : data.label })), (data === null || data === void 0 ? void 0 : data.description) && (_jsx(Text, Object.assign({ as: "span", fontSize: rem(14) }, { children: data === null || data === void 0 ? void 0 : data.description })))] }))] })), withRightIcon && (_jsx(ArrowIcon, { fill: rightIconColor, pr: rem(10), float: "right", width: rem(30), height: rem(30) }))] })), isClickable &&
|
|
35
|
+
: selectedItemBackgroundColor, color: enableVisualEffects ? undefined : 'white' }, { children: Number(data === null || data === void 0 ? void 0 : data.index) + 1 }))] })))] })), _jsxs(Flex, Object.assign({ flexDirection: "column" }, { children: [_jsx(Text, Object.assign({ as: "span", fontSize: itemFontSize, wordBreak: "break-all" }, { children: data === null || data === void 0 ? void 0 : data.label })), (data === null || data === void 0 ? void 0 : data.description) && (_jsx(Text, Object.assign({ as: "span", fontSize: rem(14) }, { children: data === null || data === void 0 ? void 0 : data.description })))] }))] })), withRightIcon && (_jsx(ArrowIcon, { fill: rightIconColor, pr: rem(10), float: "right", width: rem(30), height: rem(30) }))] })), isClickable && (hoveredItem === data.value) && (_jsx(motion.div, { initial: { width: '0', transform: "rotate('32deg')" }, animate: {
|
|
37
36
|
width: '100%',
|
|
38
37
|
transform: enableVisualEffects
|
|
39
38
|
? 'rotate(-0.4deg)'
|
|
@@ -52,6 +51,8 @@ export const CustomListItem = ({ list, withLeftIcon, rightIconColor, itemFontSiz
|
|
|
52
51
|
}, transition: { duration: enableVisualEffects ? 0.5 : 0 } }))] }), data === null || data === void 0 ? void 0 : data.value));
|
|
53
52
|
};
|
|
54
53
|
export const List = (props) => {
|
|
55
|
-
|
|
54
|
+
var _a;
|
|
55
|
+
const [isHovered, setHovered] = useState((_a = props.selectedValue) !== null && _a !== void 0 ? _a : "");
|
|
56
|
+
return (_jsxs(Flex, Object.assign({ flexDirection: "column" }, { children: [props.title && (_jsx(Flex, Object.assign({ as: "span", mb: rem(18), fontSize: rem(14), fontWeight: "500" }, { children: props.title }))), props.type === 'ordered' && (_jsx(ChakraList, { children: props.list.map(({ value, label, description }, index) => (_jsx(CustomListItem, Object.assign({ hoveredItem: isHovered, setHoveredItem: setHovered, data: { value, label, description, index } }, props), index))) }))] })));
|
|
56
57
|
};
|
|
57
58
|
//# sourceMappingURL=List.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../../src/alicia/common/List/List.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,IAAI,IAAI,UAAU,EAClB,GAAG,EACH,IAAI,EACJ,IAAI,GACL,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,eAAe,GAAG,CAAC,GAAW,EAAE,GAAW,EAAE,EAAE;IACnD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;AAC3D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,IAAI,EACJ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,aAAa,EACb,sBAAsB,GAAG,IAAI,EAC7B,aAAa,GAAG,SAAS,EACzB,WAAW,EACX,WAAW,GAAG,KAAK,EACnB,QAAQ,GAAG,qBAAqB,EAChC,SAAS,GAAG,MAAM,EAClB,iBAAiB,GAAG,SAAS,EAC7B,2BAA2B,GAAG,SAAS,EACvC,mBAAmB,GAAG,IAAI,EAC1B,IAAI,
|
|
1
|
+
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../../src/alicia/common/List/List.tsx"],"names":[],"mappings":"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"}
|