@ludo.ninja/components 2.1.11 → 2.1.13

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 (4) hide show
  1. package/build/system/Cards/CardCheckbox/index.js +41 -49
  2. package/build/system/Cards/CreationCard/index.d.ts +3 -3
  3. package/build/system/Cards/CreationCard/index.js +2 -7
  4. package/package.json +1 -1
package/build/system/Cards/CardCheckbox/index.js CHANGED
@@ -4,65 +4,57 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const jsx_runtime_1 = require("react/jsx-runtime");
7
- const react_1 = require("react");
8
7
  const styled_components_1 = __importDefault(require("styled-components"));
9
8
  const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
10
9
  const ScreenWidth_1 = require("../../../styles/ScreenWidth");
11
10
  const colors_1 = require("../../../styles/colors");
12
11
  // Styles
13
- const StyledCardCheckBox = styled_components_1.default.div `
12
+ const StyledCardCheckBox = styled_components_1.default.button `
13
+ display: flex;
14
+ padding: 0;
15
+ margin: 0;
16
+ border: unset;
17
+ background: unset;
14
18
  position: absolute;
15
19
  top: 16px;
16
20
  right: 16px;
17
21
  z-index: 10;
18
22
 
19
- .cardCheckboxLabel {
23
+ .cardCustomCheckbox {
20
24
  cursor: pointer;
21
- -webkit-tap-highlight-color: transparent;
25
+ width: 32px;
26
+ height: 32px;
27
+ border: 2px solid ${colors_1.WhiteColor};
28
+ background-color: #12183a33;
29
+ border-radius: 50%;
30
+ display: inline-block;
22
31
 
23
- .cardCheckboxInput {
24
- margin: 0;
25
- visibility: hidden;
26
-
27
- &:checked + span {
28
- border: none;
29
- }
30
-
31
- &:checked + span:after {
32
- opacity: 1;
33
- }
32
+ &.active::after {
33
+ opacity: 1;
34
34
  }
35
35
 
36
- .cardCustomCheckbox {
37
- cursor: pointer;
36
+ &::after {
37
+ content: '';
38
+ display: block;
39
+ background-image: url('/forms/checkbox/checked.svg');
40
+ background-size: cover;
41
+ background-repeat: no-repeat;
38
42
  width: 32px;
39
43
  height: 32px;
40
- border: 2px solid ${colors_1.WhiteColor};
41
- background-color: #12183a33;
42
- border-radius: 50%;
43
- display: inline-block;
44
- position: relative;
44
+ opacity: 0;
45
+ transition: opacity 0.2s;
46
+ position: absolute;
47
+ top: 0;
48
+ left: 0;
49
+ }
45
50
 
46
- &::after {
47
- content: '';
48
- display: block;
49
- background-image: url('/forms/checkbox/checked.svg');
50
- background-size: cover;
51
- background-repeat: no-repeat;
52
- width: 32px;
53
- height: 32px;
54
- opacity: 0;
55
- transition: opacity 0.2s;
56
- }
51
+ @media (max-width: 767px) {
52
+ width: 24px;
53
+ height: 24px;
57
54
 
58
- @media (max-width: 767px) {
55
+ &::after {
59
56
  width: 24px;
60
57
  height: 24px;
61
-
62
- &::after {
63
- width: 24px;
64
- height: 24px;
65
- }
66
58
  }
67
59
  }
68
60
  }
@@ -70,27 +62,27 @@ const StyledCardCheckBox = styled_components_1.default.div `
70
62
  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
71
63
  top: ${(0, _4k_1.adaptiveValueCalc)(16)};
72
64
  right: ${(0, _4k_1.adaptiveValueCalc)(16)};
73
- .cardCheckboxLabel {
74
- .cardCustomCheckbox {
65
+
66
+ .cardCustomCheckbox {
67
+ width: ${(0, _4k_1.adaptiveValueCalc)(32)};
68
+ height: ${(0, _4k_1.adaptiveValueCalc)(32)};
69
+ border-width: ${(0, _4k_1.adaptiveValueCalc)(2)};
70
+
71
+ &::after {
75
72
  width: ${(0, _4k_1.adaptiveValueCalc)(32)};
76
73
  height: ${(0, _4k_1.adaptiveValueCalc)(32)};
77
- border-width: ${(0, _4k_1.adaptiveValueCalc)(2)};
78
- &::after {
79
- width: ${(0, _4k_1.adaptiveValueCalc)(32)};
80
- height: ${(0, _4k_1.adaptiveValueCalc)(32)};
81
- }
82
74
  }
83
75
  }
84
76
  }
85
77
  `;
86
78
  // Component
87
79
  const CardCheckBox = ({ isActiveCheckbox, onChange, }) => {
88
- const id = (0, react_1.useId)();
89
80
  return ((0, jsx_runtime_1.jsx)(StyledCardCheckBox, { onClick: (e) => {
90
- console.log("StyledCardCheckBox click");
81
+ console.log('StyledCardCheckBox click');
91
82
  e.preventDefault();
92
83
  e.stopPropagation();
93
- }, children: (0, jsx_runtime_1.jsxs)("label", { htmlFor: id, className: "cardCheckboxLabel", children: [(0, jsx_runtime_1.jsx)("input", { className: "cardCheckboxInput", type: "checkbox", name: 'checkbox', id: id, onChange: onChange, checked: isActiveCheckbox }), (0, jsx_runtime_1.jsx)("span", { className: "cardCustomCheckbox" })] }) }));
84
+ onChange();
85
+ }, children: (0, jsx_runtime_1.jsx)("span", { className: `cardCustomCheckbox ${isActiveCheckbox ? 'active' : ''}` }) }));
94
86
  };
95
87
  // Export
96
88
  exports.default = CardCheckBox;
package/build/system/Cards/CreationCard/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ReactNode } from "react";
1
2
  import { searchSchema as schema } from "@ludo.ninja/api";
2
3
  import GalleryEntityV2 from '../../../dto/GalleryEntityV2';
3
4
  import { TCreationAndCollection } from '../../../modules/virtuoso/types';
@@ -7,8 +8,7 @@ export type RemoveToolsType = {
7
8
  };
8
9
  export interface ICheckboxState {
9
10
  isShowCheckbox?: boolean;
10
- isActiveCheckbox?: boolean;
11
- toggleCreationToGallery?: (creation: TCreationAndCollection) => void;
11
+ checkboxSlot?: ReactNode;
12
12
  }
13
13
  export interface ICreationCard {
14
14
  creationName?: string;
@@ -23,4 +23,4 @@ export interface ICreationCard {
23
23
  isRegularCard?: boolean;
24
24
  currentMyGalleryId?: false | string;
25
25
  }
26
- export declare const CreationCard: ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard, isShowCheckbox, isActiveCheckbox, toggleCreationToGallery, currentMyGalleryId, }: ICreationCard & ICheckboxState) => import("react/jsx-runtime").JSX.Element;
26
+ export declare const CreationCard: ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard, isShowCheckbox, checkboxSlot, currentMyGalleryId, }: ICreationCard & ICheckboxState) => import("react/jsx-runtime").JSX.Element;
package/build/system/Cards/CreationCard/index.js CHANGED
@@ -39,7 +39,6 @@ const colors_1 = require("../../../styles/colors");
39
39
  const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
40
40
  const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
41
41
  const index_1 = require("../../index");
42
- const CardCheckbox_1 = __importDefault(require("../CardCheckbox"));
43
42
  const CardContent_1 = __importDefault(require("../CardContent"));
44
43
  const CardCategory_1 = __importDefault(require("../CardContent/CardCategory"));
45
44
  const CardLikes_1 = __importDefault(require("../CardContent/CardLikes"));
@@ -96,7 +95,7 @@ const StyledRegularCard = styled_components_1.default.div `
96
95
  }
97
96
  `;
98
97
  // Component
99
- const CreationCard = ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard = true, isShowCheckbox, isActiveCheckbox, toggleCreationToGallery, currentMyGalleryId, }) => {
98
+ const CreationCard = ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard = true, isShowCheckbox, checkboxSlot, currentMyGalleryId, }) => {
100
99
  const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
101
100
  const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
102
101
  const { likes, addLike, deleteLike } = (0, likes_1.default)({
@@ -121,11 +120,7 @@ const CreationCard = ({ creationName, creation, isNeedHeight, likesDynamicInfo,
121
120
  // } else {
122
121
  // window.open(`${domain}/rewards/${userId}`,'_self');
123
122
  // }
124
- return ((0, jsx_runtime_1.jsxs)(StyledRegularCard, { isNeedHeight: isNeedHeight, isNeedTransform: isNeedShowMoreButton, isShowCheckbox: isShowCheckbox, children: [isShowCheckbox && ((0, jsx_runtime_1.jsx)(CardCheckbox_1.default, { isActiveCheckbox: !!isActiveCheckbox, onChange: () => {
125
- console.log("CardCheckBox", toggleCreationToGallery);
126
- console.log("toggleCreationToGallery", creation);
127
- toggleCreationToGallery?.(creation);
128
- } })), (0, jsx_runtime_1.jsxs)(HideLink, { className: "linkRegularCard", href: getLink(creation.getCreationLink()), children: [(0, jsx_runtime_1.jsxs)(Head_1.default, { children: [creation.detectMediaType().displaySingleMedia(), (0, jsx_runtime_1.jsx)(CardHead_1.CardHead, { isRegularCard: !!isRegularCard, isIconLiked: likes.isLiked, creation: creation, addLikeToCard: addLike, deleteLikeFromCard: deleteLike, isUserProfile: isUserProfile || false, isDisabled: !!isLoadingLikes, isShowCheckbox: isShowCheckbox, currentMyGalleryId: currentMyGalleryId })] }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { creationName: creationName, firstName: creation.getCreatorAddress(), secondName: creation.getName(), cuttedSecondName: creation.getCuttedSecondName(!isMobile), itemId: creation.getItemId(), isNeedShowMoreButton: isNeedShowMoreButton || false, href: creation.getCreationLink(), children: (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: "end", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: creation.getLabel() }), !isProd() &&
123
+ return ((0, jsx_runtime_1.jsxs)(StyledRegularCard, { isNeedHeight: isNeedHeight, isNeedTransform: isNeedShowMoreButton, isShowCheckbox: isShowCheckbox, children: [isShowCheckbox && checkboxSlot, (0, jsx_runtime_1.jsxs)(HideLink, { className: "linkRegularCard", href: getLink(creation.getCreationLink()), children: [(0, jsx_runtime_1.jsxs)(Head_1.default, { children: [creation.detectMediaType().displaySingleMedia(), (0, jsx_runtime_1.jsx)(CardHead_1.CardHead, { isRegularCard: !!isRegularCard, isIconLiked: likes.isLiked, creation: creation, addLikeToCard: addLike, deleteLikeFromCard: deleteLike, isUserProfile: isUserProfile || false, isDisabled: !!isLoadingLikes, isShowCheckbox: isShowCheckbox, currentMyGalleryId: currentMyGalleryId })] }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { creationName: creationName, firstName: creation.getCreatorAddress(), secondName: creation.getName(), cuttedSecondName: creation.getCuttedSecondName(!isMobile), itemId: creation.getItemId(), isNeedShowMoreButton: isNeedShowMoreButton || false, href: creation.getCreationLink(), children: (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: "end", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: creation.getLabel() }), !isProd() &&
129
124
  (isLoadingLikes ? ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { style: { borderRadius: "3px" }, height: "100%", width: "30px" })) : ((0, jsx_runtime_1.jsx)(CardLikes_1.default, { isLiked: likes.isLiked, likes: likes.likesCount })))] }) })] })] }));
130
125
  };
131
126
  exports.CreationCard = CreationCard;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ludo.ninja/components",
3
- "version": "2.1.11",
3
+ "version": "2.1.13",
4
4
  "private": false,
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",