@licklist/design 0.50.1-dev.2 → 0.50.1-dev.3
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EventCard.d.ts","sourceRoot":"","sources":["../../../src/events/event-card/EventCard.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"EventCard.d.ts","sourceRoot":"","sources":["../../../src/events/event-card/EventCard.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAElG,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAS5C,MAAM,WAAW,cAAe,SAAQ,iBAAiB;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAQ,EACR,aAAoB,EACpB,cAAc,EACd,WAAW,EACX,cAAc,EACd,OAAO,EACP,aAAa,GACd,EAAE,cAAc,eAkJhB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),a=require("react"),n=e(a),r=require("@licklist/core/dist/Config"),c=require("react-i18next"),l=require("react-bootstrap"),s=require("../../static/Icon.js"),i=e(require("clsx")),m=require("react-intl"),o=require("../../tiptap-editor/TipTapEditor.js"),u=require("./utils.js"),d=require("../../assets/dashboard/chartBar.svg.js");exports.EventCard=function(e){var
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),a=require("react"),n=e(a),r=require("@licklist/core/dist/Config"),c=require("react-i18next"),l=require("react-bootstrap"),s=require("../../static/Icon.js"),i=e(require("clsx")),m=require("react-intl"),o=require("../../tiptap-editor/TipTapEditor.js"),u=require("./utils.js"),d=require("../../assets/dashboard/chartBar.svg.js");exports.EventCard=function(e){var v=e.name,E=e.description,p=e.date,y=e.imageUrl,f=e.sales,N=e.onPreview,b=e.onEdit,g=e.onCopy,C=e.onRemove,k=e.hasPermission,x=void 0===k||k,h=e.productSetName,q=e.onStatistic,w=e.eventStatistic,T=e.titleId,j=e.descriptionId,I=c.useTranslation("Design").t,P=m.useIntl(),S=P.formatNumber,_=P.formatDate,B=u.getStatisticInfo(w,p),D=B.totalViews,O=t.__rest(B,["totalViews"]),M=a.useMemo((function(){return u.formatContentWithoutTags(E,u.EVENT_DESCRIPTION_SIZE)}),[E]);return n.createElement(l.Card,{className:"d-flex flex-column event-card h-100"},n.createElement("div",{className:i("event-card-image-container",!y&&"no-image")},y&&n.createElement(l.Card.Img,{variant:"top",src:y}),n.createElement(l.Badge,{className:"event-card-date",as:"time",dateTime:p,variant:"primary"},_(new Date(p),{weekday:"short",day:"numeric",month:"short",year:"numeric",hour:"numeric",minute:"numeric"}))),n.createElement(l.Card.Body,null,n.createElement(l.Card.Title,{id:T},v),n.createElement("div",{className:"flex-grow-1"},n.createElement(o.TipTapEditor,{viewMode:!0,disabled:!0,className:i("event-description",!y&&"no-image"),content:M,id:j}),n.createElement("div",{className:"mt-2 ml-2"},Object.keys(O).map((function(e){return n.createElement("div",{className:"event-card-sale",key:e},n.createElement("span",{className:"event-card-sale-name"},I(e),":"," ","totalAmount"===e?S(O[e],{style:"currency",currency:r.Currency.GBP}):O[e]))}))),f&&f.map((function(e){return n.createElement("div",{className:"event-card-sale",key:e.id},n.createElement("div",{className:"event-card-sale-text"},n.createElement("span",{className:"event-card-sale-name"},e.name)," ",n.createElement("span",{className:"event-card-sale-quantity"},[e.current,e.max].map((function(e){return S(e)})).join(" / "))),n.createElement(l.ProgressBar,{now:e.current,max:e.max}))})))),n.createElement(l.Card.Footer,{className:"flex-column"},h&&n.createElement(l.OverlayTrigger,{trigger:["hover","hover"],overlay:n.createElement(l.Popover,{id:"event-product-set-popover"},n.createElement(l.Popover.Content,{className:"event-product-set-card"},h))},n.createElement("div",{className:"pl-3 text-truncate"},I("Design:productSet"),": ",h)),n.createElement("div",{className:"d-flex w-100 justify-content-between"},n.createElement("div",{className:"d-flex"},n.createElement("button",{type:"button",className:"event-card-link-button ml-3 mr-4",onClick:q},n.createElement(d.ReactComponent,null)),n.createElement("div",{className:"event-card-views"},n.createElement(s.default,{type:"eye"}),n.createElement("span",null,S(D)))),n.createElement("div",null,n.createElement("button",{type:"button",className:"event-card-link-button",onClick:N},n.createElement(s.default,{type:"external-link-alt"})),x&&n.createElement(n.Fragment,null,n.createElement("button",{type:"button",className:"event-card-link-button",onClick:b},n.createElement(s.default,{type:"edit"})),n.createElement("button",{type:"button",className:"event-card-link-button",onClick:g},n.createElement(s.default,{type:"copy"})),n.createElement("button",{type:"button",className:"event-card-link-button",onClick:C},n.createElement(s.default,{type:"trash-alt"})))))))};
|
|
@@ -3,7 +3,10 @@ $affiliate-card-box-shadow-focus: $btn-focus-box-shadow !default;
|
|
|
3
3
|
$affiliate-card-transition: $btn-transition !default;
|
|
4
4
|
|
|
5
5
|
$affiliate-card-link-background-color: $affiliate-card-background-color !default;
|
|
6
|
-
$affiliate-card-link-background-color-hover: theme-color-level(
|
|
6
|
+
$affiliate-card-link-background-color-hover: theme-color-level(
|
|
7
|
+
"primary",
|
|
8
|
+
-10.5
|
|
9
|
+
) !default;
|
|
7
10
|
$affiliate-card-link-box-shadow-focus: $affiliate-card-box-shadow-focus !default;
|
|
8
11
|
$affiliate-card-link-padding-x: sp(10) !default;
|
|
9
12
|
$affiliate-card-link-padding-y: sp(10) !default;
|
|
@@ -12,12 +15,20 @@ $affiliate-card-link-text-color-hover: theme-color("primary") !default;
|
|
|
12
15
|
$affiliate-card-link-text-font-weight: $font-weight-normal !default;
|
|
13
16
|
$affiliate-card-link-transition: $affiliate-card-transition !default;
|
|
14
17
|
|
|
15
|
-
$affiliate-card-menu-button-background-color-hover: theme-color(
|
|
18
|
+
$affiliate-card-menu-button-background-color-hover: theme-color(
|
|
19
|
+
"primary"
|
|
20
|
+
) !default;
|
|
16
21
|
$affiliate-card-menu-button-border-radius: $border-radius !default;
|
|
17
22
|
$affiliate-card-menu-button-box-shadow-focus: $affiliate-card-box-shadow-focus !default;
|
|
18
|
-
$affiliate-card-menu-button-icon-color: adjust-color(
|
|
23
|
+
$affiliate-card-menu-button-icon-color: adjust-color(
|
|
24
|
+
theme-color("primary"),
|
|
25
|
+
$alpha: -1/3
|
|
26
|
+
) !default;
|
|
19
27
|
$affiliate-card-menu-button-icon-color-hover: $affiliate-card-background-color !default;
|
|
20
|
-
$affiliate-card-menu-button-icon-color-container-hover: adjust-color(
|
|
28
|
+
$affiliate-card-menu-button-icon-color-container-hover: adjust-color(
|
|
29
|
+
theme-color("primary"),
|
|
30
|
+
$alpha: -1 / 12
|
|
31
|
+
) !default;
|
|
21
32
|
$affiliate-card-menu-button-icon-size: sp(4) !default;
|
|
22
33
|
$affiliate-card-menu-button-inset: sp(2) !default;
|
|
23
34
|
$affiliate-card-menu-button-size: sp(8) !default;
|
|
@@ -139,12 +150,14 @@ $affiliate-card-menu-icon-size: sp(3.5) !default;
|
|
|
139
150
|
}
|
|
140
151
|
}
|
|
141
152
|
|
|
142
|
-
.affiliate-card-popover
|
|
153
|
+
.affiliate-card-popover,
|
|
154
|
+
#event-product-set-popover {
|
|
143
155
|
border-radius: $affiliate-card-popover-border-radius;
|
|
144
156
|
border: none;
|
|
145
157
|
filter: $affiliate-card-popover-box-shadow-filter;
|
|
146
158
|
|
|
147
|
-
.affiliate-card-menu
|
|
159
|
+
.affiliate-card-menu,
|
|
160
|
+
.event-product-set-card {
|
|
148
161
|
padding: $affiliate-card-menu-padding-x $affiliate-card-menu-padding-y;
|
|
149
162
|
border-radius: $affiliate-card-popover-border-radius;
|
|
150
163
|
|
|
@@ -175,5 +188,12 @@ $affiliate-card-menu-icon-size: sp(3.5) !default;
|
|
|
175
188
|
}
|
|
176
189
|
}
|
|
177
190
|
|
|
191
|
+
#event-product-set-popover {
|
|
192
|
+
.event-product-set-card {
|
|
193
|
+
padding-left: 1rem;
|
|
194
|
+
padding-right: 1rem;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
178
198
|
$snippet-template-card-background-color: color("red") !default;
|
|
179
199
|
$snippet-template-card-border: 1px solid red;
|
package/package.json
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import React, { useMemo } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Badge,
|
|
4
|
+
Card,
|
|
5
|
+
OverlayTrigger,
|
|
6
|
+
Popover,
|
|
7
|
+
ProgressBar,
|
|
8
|
+
} from "react-bootstrap";
|
|
3
9
|
import { useIntl } from "react-intl";
|
|
4
10
|
import clsx from "clsx";
|
|
5
11
|
import { useTranslation } from "react-i18next";
|
|
@@ -127,9 +133,21 @@ export function EventCard({
|
|
|
127
133
|
</Card.Body>
|
|
128
134
|
<Card.Footer className="flex-column">
|
|
129
135
|
{productSetName && (
|
|
130
|
-
<
|
|
131
|
-
|
|
132
|
-
|
|
136
|
+
<OverlayTrigger
|
|
137
|
+
// Workaround for bootstrap error with "hover trigger"
|
|
138
|
+
trigger={["hover", "hover"]}
|
|
139
|
+
overlay={
|
|
140
|
+
<Popover id="event-product-set-popover">
|
|
141
|
+
<Popover.Content className="event-product-set-card">
|
|
142
|
+
{productSetName}
|
|
143
|
+
</Popover.Content>
|
|
144
|
+
</Popover>
|
|
145
|
+
}
|
|
146
|
+
>
|
|
147
|
+
<div className="pl-3 text-truncate">
|
|
148
|
+
{t("Design:productSet")}: {productSetName}
|
|
149
|
+
</div>
|
|
150
|
+
</OverlayTrigger>
|
|
133
151
|
)}
|
|
134
152
|
<div className="d-flex w-100 justify-content-between">
|
|
135
153
|
<div className="d-flex">
|
|
@@ -3,7 +3,10 @@ $affiliate-card-box-shadow-focus: $btn-focus-box-shadow !default;
|
|
|
3
3
|
$affiliate-card-transition: $btn-transition !default;
|
|
4
4
|
|
|
5
5
|
$affiliate-card-link-background-color: $affiliate-card-background-color !default;
|
|
6
|
-
$affiliate-card-link-background-color-hover: theme-color-level(
|
|
6
|
+
$affiliate-card-link-background-color-hover: theme-color-level(
|
|
7
|
+
"primary",
|
|
8
|
+
-10.5
|
|
9
|
+
) !default;
|
|
7
10
|
$affiliate-card-link-box-shadow-focus: $affiliate-card-box-shadow-focus !default;
|
|
8
11
|
$affiliate-card-link-padding-x: sp(10) !default;
|
|
9
12
|
$affiliate-card-link-padding-y: sp(10) !default;
|
|
@@ -12,12 +15,20 @@ $affiliate-card-link-text-color-hover: theme-color("primary") !default;
|
|
|
12
15
|
$affiliate-card-link-text-font-weight: $font-weight-normal !default;
|
|
13
16
|
$affiliate-card-link-transition: $affiliate-card-transition !default;
|
|
14
17
|
|
|
15
|
-
$affiliate-card-menu-button-background-color-hover: theme-color(
|
|
18
|
+
$affiliate-card-menu-button-background-color-hover: theme-color(
|
|
19
|
+
"primary"
|
|
20
|
+
) !default;
|
|
16
21
|
$affiliate-card-menu-button-border-radius: $border-radius !default;
|
|
17
22
|
$affiliate-card-menu-button-box-shadow-focus: $affiliate-card-box-shadow-focus !default;
|
|
18
|
-
$affiliate-card-menu-button-icon-color: adjust-color(
|
|
23
|
+
$affiliate-card-menu-button-icon-color: adjust-color(
|
|
24
|
+
theme-color("primary"),
|
|
25
|
+
$alpha: -1/3
|
|
26
|
+
) !default;
|
|
19
27
|
$affiliate-card-menu-button-icon-color-hover: $affiliate-card-background-color !default;
|
|
20
|
-
$affiliate-card-menu-button-icon-color-container-hover: adjust-color(
|
|
28
|
+
$affiliate-card-menu-button-icon-color-container-hover: adjust-color(
|
|
29
|
+
theme-color("primary"),
|
|
30
|
+
$alpha: -1 / 12
|
|
31
|
+
) !default;
|
|
21
32
|
$affiliate-card-menu-button-icon-size: sp(4) !default;
|
|
22
33
|
$affiliate-card-menu-button-inset: sp(2) !default;
|
|
23
34
|
$affiliate-card-menu-button-size: sp(8) !default;
|
|
@@ -139,12 +150,14 @@ $affiliate-card-menu-icon-size: sp(3.5) !default;
|
|
|
139
150
|
}
|
|
140
151
|
}
|
|
141
152
|
|
|
142
|
-
.affiliate-card-popover
|
|
153
|
+
.affiliate-card-popover,
|
|
154
|
+
#event-product-set-popover {
|
|
143
155
|
border-radius: $affiliate-card-popover-border-radius;
|
|
144
156
|
border: none;
|
|
145
157
|
filter: $affiliate-card-popover-box-shadow-filter;
|
|
146
158
|
|
|
147
|
-
.affiliate-card-menu
|
|
159
|
+
.affiliate-card-menu,
|
|
160
|
+
.event-product-set-card {
|
|
148
161
|
padding: $affiliate-card-menu-padding-x $affiliate-card-menu-padding-y;
|
|
149
162
|
border-radius: $affiliate-card-popover-border-radius;
|
|
150
163
|
|
|
@@ -175,5 +188,12 @@ $affiliate-card-menu-icon-size: sp(3.5) !default;
|
|
|
175
188
|
}
|
|
176
189
|
}
|
|
177
190
|
|
|
191
|
+
#event-product-set-popover {
|
|
192
|
+
.event-product-set-card {
|
|
193
|
+
padding-left: 1rem;
|
|
194
|
+
padding-right: 1rem;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
178
198
|
$snippet-template-card-background-color: color("red") !default;
|
|
179
199
|
$snippet-template-card-border: 1px solid red;
|