@rubin-epo/epo-widget-lib 0.4.0 → 0.4.2
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/FilterTool.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),i=require("react-i18next"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),i=require("react-i18next"),m=require("@rubin-epo/epo-react-lib/SelectListbox"),_=require("@rubin-epo/epo-react-lib/ColorSwatch"),r=require("./widgets/FilterTool/styles.cjs"),d=e=>e&&e.__esModule?e:{default:e},b=d(m),C=d(_),j=({selectedColor:e="none",selectionCallback:f,isDisabled:c=!1,id:h,labelledById:u})=>{const{t:l}=i.useTranslation(),t={violet:"#861cff",blue:"#0019ff",green:"#6bd853",yellow:"#ffdd15",orange:"#f18922",red:"#ec1c24",none:"transparent"},p={violet:"M546.1,312.5l212.8,1.9h0.4l0.5,0.2L1396,522.8c6.9,2.3,10.7,9.7,8.5,16.7s-9.7,10.7-16.7,8.5l0,0l-0.4-0.1L757.8,320.4l0.9,0.2L546.1,312.5z",blue:"M546.1,312.4l206.5-4.4h0.4l0.4,0.1l641.1,164c7,1.8,11.2,8.9,9.4,15.9c-1.8,7-8.9,11.2-15.9,9.4l-0.4-0.1L751.8,313.8l0.8,0.1L546.1,312.4z",green:"M547.8,312l200.6-10.6h0.3l0.4,0.1l644.8,120.3c7,1.4,11.5,8.2,10.1,15.2c-1.4,6.9-8,11.4-14.9,10.2l-0.4-0.1L747.8,307.4l0.7,0.1L547.8,312z",yellow:"M546.1,312.5l205.8-17.3h0.3h0.4l640.4,75.3c7.1,0.8,12.2,7.2,11.3,14.3c-0.8,7.1-7.2,12.2-14.3,11.3l-0.4-0.1l-637.9-94.5h0.6L546.1,312.5z",orange:"M546.1,311l189.3-21.8h0.2h0.3l656.5,33.3c7,0.4,12.4,6.3,12,13.3s-6.3,12.4-13.3,12h-0.4l-655.2-52.9h0.5L546.1,311z",red:"M546.1,311L730,283.9h0.1h0.2l661.4-9.9c6.9-0.1,12.6,5.4,12.7,12.3s-5.4,12.6-12.3,12.7h-0.4l-661.4-9.8h0.4L546.1,311z"},n={violet:[[1426.5,547.9],[1353.2,550.6],[1377.9,530.1],[1372.3,498.5]],blue:[[1431.5,496.4],[1358.6,504.1],[1381.8,482],[1374.1,450.9]],green:[[1437.9,443.4],[1366.1,458.4],[1387,434.1],[1376.2,403.9]],yellow:[[1438.9,389.7],[1368,408.2],[1387.6,382.8],[1375.4,353.3]],orange:[[1443.7,340.3],[1373.9,362.8],[1392.1,336.4],[1378.2,307.5]],red:[[1441.9,290],[1372.4,313.2],[1390.3,286.6],[1376.1,257.9]]},g=Object.keys(t).map(s=>({value:s,label:l(`filterTool.colors.${s}`),icon:o.jsx(C.default,{color:s,size:"small"})})),x=s=>e!==s&&e!=="none",y=l("filterTool.selectLabel"),a=e==="none";return o.jsxs(r.Wrapper,{children:[o.jsxs(r.PrismSVG,{version:"1.1",viewBox:"0 0 1551.6 736.7","aria-labelledby":u,children:[o.jsxs("defs",{children:[o.jsxs("linearGradient",{id:"no-arrow-red",children:[o.jsx("stop",{offset:"0%",stopColor:t.red}),o.jsx("stop",{offset:"81%",stopColor:t.red}),o.jsx("stop",{offset:"81%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-orange",children:[o.jsx("stop",{offset:"0%",stopColor:t.orange}),o.jsx("stop",{offset:"80%",stopColor:t.orange}),o.jsx("stop",{offset:"80%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-yellow",children:[o.jsx("stop",{offset:"0%",stopColor:t.yellow}),o.jsx("stop",{offset:"79%",stopColor:t.yellow}),o.jsx("stop",{offset:"79%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-green",children:[o.jsx("stop",{offset:"0%",stopColor:t.green}),o.jsx("stop",{offset:"78%",stopColor:t.green}),o.jsx("stop",{offset:"78%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-blue",children:[o.jsx("stop",{offset:"0%",stopColor:t.blue}),o.jsx("stop",{offset:"77%",stopColor:t.blue}),o.jsx("stop",{offset:"77%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-violet",children:[o.jsx("stop",{offset:"0%",stopColor:t.violet}),o.jsx("stop",{offset:"77%",stopColor:t.violet}),o.jsx("stop",{offset:"77%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]})]}),o.jsxs("radialGradient",{id:"gradient_1_",cx:"718.4264",cy:"-294.6529",r:"417.8",fx:"638.9412",fy:"-303.5418",gradientTransform:"matrix(1 0 0 1 0 534)",gradientUnits:"userSpaceOnUse",children:[o.jsx("stop",{offset:"0.12",style:{stopColor:"#FFFFFF"}}),o.jsx("stop",{offset:"1",style:{stopColor:"#000000"}})]}),o.jsxs("g",{children:[o.jsx(r.WhiteLine,{id:"white_ray",x1:"108.2",y1:"463.3",x2:"546.1",y2:"312.5"}),o.jsx(r.WhiteLine,{id:"white_light_arrow_line",x1:"376.8",y1:"327.9",x2:"430",y2:"309.6"}),o.jsx("polygon",{id:"white_light_arrow",points:"420.7,325.4 428.1,310.3 413,302.9 422.5,299.7 437.6,307 430.2,322.1",fill:"#ffffff"}),o.jsx("text",{transform:"matrix(0.9446 -0.3282 0.3282 0.9446 152.0965 417.697)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.whiteLight"})})]}),o.jsxs("g",{children:[o.jsx("text",{transform:"matrix(1 0 0 1 598.2964 606.0872)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.prism"})}),o.jsx("polygon",{id:"gradient",points:"653.2,127 867.4,498 438.9,498",fill:"url(#gradient_1_)",style:{opacity:.3}})]}),o.jsx(r.PrismOutline,{id:"outline",points:"653.2,127 760.3,312.5 867.4,498 653.2,498 438.9,498 546.1,312.5 "}),o.jsx("g",{role:"list",id:"rays_out","aria-label":l("filterTool.light_out"),children:Object.keys(p).map(s=>o.jsx(r.Ray,{id:`${s}_ray`,style:{"--ray-fill":x(s)?`url(#no-arrow-${s})`:t[s]},d:p[s],role:"listitem","aria-label":l(`filterTool.colors.${s}`)},s))}),o.jsxs("g",{children:[o.jsx("text",{transform:"matrix(1 0 0 1 1206.5464 164.1372)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.filter"})}),o.jsx(r.Filter,{id:"filter",x1:"1255.6",y1:"235.7",x2:"1193.1",y2:"550.3",stroke:t[e],fill:"#ffffff","aria-label":l(`filterTool.colors.${e}`)})]}),o.jsxs("g",{role:"list",id:"rays_filtered","aria-label":l("filterTool.light_filtered"),children:[Object.keys(n).map(s=>o.jsx(r.Arrow,{id:`${s}_arrow`,style:{"--arrow-opacity":x(s)&&0,"--arrow-fill":t[s]},points:n[s].map(w=>w.join(",")).join(" "),role:a?"listitem":"presentation","aria-label":a?l(`filterTool.colors.${s}`):void 0},s)),!a&&o.jsx("text",{role:"listitem",x:n[e][3][0],y:n[e][3][1],fill:"#ffffff",dy:"-25",children:o.jsx(i.Trans,{i18nKey:`filterTool.colors.${e}`})})]})]}),o.jsx(r.SelectContainer,{children:o.jsx(b.default,{options:g,isDisabled:c,value:e,onChangeCallback:s=>f&&f(s||"none"),placeholder:y,maxWidth:"100%",width:"200px",id:h})})]})};j.displayName="Widgets.FilterTool";exports.default=j;
|
package/dist/FilterTool.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx as o, jsxs as l } from "react/jsx-runtime";
|
|
2
2
|
import { useTranslation as C, Trans as n } from "react-i18next";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { Wrapper as
|
|
6
|
-
const
|
|
3
|
+
import b from "@rubin-epo/epo-react-lib/SelectListbox";
|
|
4
|
+
import u from "@rubin-epo/epo-react-lib/ColorSwatch";
|
|
5
|
+
import { Wrapper as L, PrismSVG as T, WhiteLine as c, PrismOutline as _, Ray as v, Filter as F, Arrow as G, SelectContainer as $ } from "./widgets/FilterTool/styles.js";
|
|
6
|
+
const j = ({
|
|
7
7
|
selectedColor: e = "none",
|
|
8
8
|
selectionCallback: a,
|
|
9
|
-
isDisabled:
|
|
10
|
-
id:
|
|
11
|
-
labelledById:
|
|
9
|
+
isDisabled: h = !1,
|
|
10
|
+
id: m,
|
|
11
|
+
labelledById: g
|
|
12
12
|
}) => {
|
|
13
13
|
const { t: i } = C(), r = {
|
|
14
14
|
violet: "#861cff",
|
|
@@ -26,24 +26,54 @@ const M = ({
|
|
|
26
26
|
orange: "M546.1,311l189.3-21.8h0.2h0.3l656.5,33.3c7,0.4,12.4,6.3,12,13.3s-6.3,12.4-13.3,12h-0.4l-655.2-52.9h0.5L546.1,311z",
|
|
27
27
|
red: "M546.1,311L730,283.9h0.1h0.2l661.4-9.9c6.9-0.1,12.6,5.4,12.7,12.3s-5.4,12.6-12.3,12.7h-0.4l-661.4-9.8h0.4L546.1,311z"
|
|
28
28
|
}, s = {
|
|
29
|
-
violet:
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
violet: [
|
|
30
|
+
[1426.5, 547.9],
|
|
31
|
+
[1353.2, 550.6],
|
|
32
|
+
[1377.9, 530.1],
|
|
33
|
+
[1372.3, 498.5]
|
|
34
|
+
],
|
|
35
|
+
blue: [
|
|
36
|
+
[1431.5, 496.4],
|
|
37
|
+
[1358.6, 504.1],
|
|
38
|
+
[1381.8, 482],
|
|
39
|
+
[1374.1, 450.9]
|
|
40
|
+
],
|
|
41
|
+
green: [
|
|
42
|
+
[1437.9, 443.4],
|
|
43
|
+
[1366.1, 458.4],
|
|
44
|
+
[1387, 434.1],
|
|
45
|
+
[1376.2, 403.9]
|
|
46
|
+
],
|
|
47
|
+
yellow: [
|
|
48
|
+
[1438.9, 389.7],
|
|
49
|
+
[1368, 408.2],
|
|
50
|
+
[1387.6, 382.8],
|
|
51
|
+
[1375.4, 353.3]
|
|
52
|
+
],
|
|
53
|
+
orange: [
|
|
54
|
+
[1443.7, 340.3],
|
|
55
|
+
[1373.9, 362.8],
|
|
56
|
+
[1392.1, 336.4],
|
|
57
|
+
[1378.2, 307.5]
|
|
58
|
+
],
|
|
59
|
+
red: [
|
|
60
|
+
[1441.9, 290],
|
|
61
|
+
[1372.4, 313.2],
|
|
62
|
+
[1390.3, 286.6],
|
|
63
|
+
[1376.1, 257.9]
|
|
64
|
+
]
|
|
65
|
+
}, y = Object.keys(r).map((t) => ({
|
|
36
66
|
value: t,
|
|
37
67
|
label: i(`filterTool.colors.${t}`),
|
|
38
|
-
icon: /* @__PURE__ */ o(
|
|
39
|
-
})), d = (t) => e !== t && e !== "none",
|
|
40
|
-
return /* @__PURE__ */ l(
|
|
68
|
+
icon: /* @__PURE__ */ o(u, { color: t, size: "small" })
|
|
69
|
+
})), d = (t) => e !== t && e !== "none", w = i("filterTool.selectLabel"), f = e === "none";
|
|
70
|
+
return /* @__PURE__ */ l(L, { children: [
|
|
41
71
|
/* @__PURE__ */ l(
|
|
42
|
-
|
|
72
|
+
T,
|
|
43
73
|
{
|
|
44
74
|
version: "1.1",
|
|
45
75
|
viewBox: "0 0 1551.6 736.7",
|
|
46
|
-
"aria-labelledby":
|
|
76
|
+
"aria-labelledby": g,
|
|
47
77
|
children: [
|
|
48
78
|
/* @__PURE__ */ l("defs", { children: [
|
|
49
79
|
/* @__PURE__ */ l("linearGradient", { id: "no-arrow-red", children: [
|
|
@@ -102,7 +132,7 @@ const M = ({
|
|
|
102
132
|
),
|
|
103
133
|
/* @__PURE__ */ l("g", { children: [
|
|
104
134
|
/* @__PURE__ */ o(
|
|
105
|
-
|
|
135
|
+
c,
|
|
106
136
|
{
|
|
107
137
|
id: "white_ray",
|
|
108
138
|
x1: "108.2",
|
|
@@ -112,7 +142,7 @@ const M = ({
|
|
|
112
142
|
}
|
|
113
143
|
),
|
|
114
144
|
/* @__PURE__ */ o(
|
|
115
|
-
|
|
145
|
+
c,
|
|
116
146
|
{
|
|
117
147
|
id: "white_light_arrow_line",
|
|
118
148
|
x1: "376.8",
|
|
@@ -151,7 +181,7 @@ const M = ({
|
|
|
151
181
|
)
|
|
152
182
|
] }),
|
|
153
183
|
/* @__PURE__ */ o(
|
|
154
|
-
|
|
184
|
+
_,
|
|
155
185
|
{
|
|
156
186
|
id: "outline",
|
|
157
187
|
points: "653.2,127 760.3,312.5 867.4,498 653.2,498 438.9,498 546.1,312.5 "
|
|
@@ -164,7 +194,7 @@ const M = ({
|
|
|
164
194
|
id: "rays_out",
|
|
165
195
|
"aria-label": i("filterTool.light_out"),
|
|
166
196
|
children: Object.keys(p).map((t) => /* @__PURE__ */ o(
|
|
167
|
-
|
|
197
|
+
v,
|
|
168
198
|
{
|
|
169
199
|
id: `${t}_ray`,
|
|
170
200
|
style: {
|
|
@@ -181,7 +211,7 @@ const M = ({
|
|
|
181
211
|
/* @__PURE__ */ l("g", { children: [
|
|
182
212
|
/* @__PURE__ */ o("text", { transform: "matrix(1 0 0 1 1206.5464 164.1372)", fill: "#ffffff", children: /* @__PURE__ */ o(n, { i18nKey: "filterTool.filter" }) }),
|
|
183
213
|
/* @__PURE__ */ o(
|
|
184
|
-
|
|
214
|
+
F,
|
|
185
215
|
{
|
|
186
216
|
id: "filter",
|
|
187
217
|
x1: "1255.6",
|
|
@@ -202,14 +232,14 @@ const M = ({
|
|
|
202
232
|
"aria-label": i("filterTool.light_filtered"),
|
|
203
233
|
children: [
|
|
204
234
|
Object.keys(s).map((t) => /* @__PURE__ */ o(
|
|
205
|
-
|
|
235
|
+
G,
|
|
206
236
|
{
|
|
207
237
|
id: `${t}_arrow`,
|
|
208
238
|
style: {
|
|
209
239
|
"--arrow-opacity": d(t) && 0,
|
|
210
240
|
"--arrow-fill": r[t]
|
|
211
241
|
},
|
|
212
|
-
points: s[t],
|
|
242
|
+
points: s[t].map((x) => x.join(",")).join(" "),
|
|
213
243
|
role: f ? "listitem" : "presentation",
|
|
214
244
|
"aria-label": f ? i(`filterTool.colors.${t}`) : void 0
|
|
215
245
|
},
|
|
@@ -219,8 +249,8 @@ const M = ({
|
|
|
219
249
|
"text",
|
|
220
250
|
{
|
|
221
251
|
role: "listitem",
|
|
222
|
-
x:
|
|
223
|
-
y:
|
|
252
|
+
x: s[e][3][0],
|
|
253
|
+
y: s[e][3][1],
|
|
224
254
|
fill: "#ffffff",
|
|
225
255
|
dy: "-25",
|
|
226
256
|
children: /* @__PURE__ */ o(n, { i18nKey: `filterTool.colors.${e}` })
|
|
@@ -232,22 +262,22 @@ const M = ({
|
|
|
232
262
|
]
|
|
233
263
|
}
|
|
234
264
|
),
|
|
235
|
-
/* @__PURE__ */ o(
|
|
236
|
-
|
|
265
|
+
/* @__PURE__ */ o($, { children: /* @__PURE__ */ o(
|
|
266
|
+
b,
|
|
237
267
|
{
|
|
238
|
-
options:
|
|
239
|
-
isDisabled:
|
|
268
|
+
options: y,
|
|
269
|
+
isDisabled: h,
|
|
240
270
|
value: e,
|
|
241
271
|
onChangeCallback: (t) => a && a(t || "none"),
|
|
242
|
-
placeholder:
|
|
272
|
+
placeholder: w,
|
|
243
273
|
maxWidth: "100%",
|
|
244
274
|
width: "200px",
|
|
245
|
-
id:
|
|
275
|
+
id: m
|
|
246
276
|
}
|
|
247
277
|
) })
|
|
248
278
|
] });
|
|
249
279
|
};
|
|
250
|
-
|
|
280
|
+
j.displayName = "Widgets.FilterTool";
|
|
251
281
|
export {
|
|
252
|
-
|
|
282
|
+
j as default
|
|
253
283
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { FunctionComponent } from "react";
|
|
2
2
|
interface FilterToolProps {
|
|
3
3
|
selectionCallback?: (color: FilterColor) => void;
|
|
4
|
-
selectedColor?: FilterColor;
|
|
4
|
+
selectedColor?: FilterColor | "none";
|
|
5
5
|
isDisabled?: boolean;
|
|
6
6
|
id?: string;
|
|
7
7
|
labelledById?: string;
|
|
8
8
|
}
|
|
9
|
-
type FilterColor = "violet" | "blue" | "green" | "yellow" | "orange" | "red"
|
|
9
|
+
type FilterColor = "violet" | "blue" | "green" | "yellow" | "orange" | "red";
|
|
10
10
|
declare const FilterTool: FunctionComponent<FilterToolProps>;
|
|
11
11
|
export default FilterTool;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rubin-epo/epo-widget-lib",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.2",
|
|
4
4
|
"description": "Rubin Observatory Education & Public Outreach team React scientific and educational widgets.",
|
|
5
5
|
"author": "Rubin EPO",
|
|
6
6
|
"license": "MIT",
|
|
@@ -23,7 +23,8 @@
|
|
|
23
23
|
"import": "./dist/*.js",
|
|
24
24
|
"require": "./dist/*.cjs",
|
|
25
25
|
"types": "./dist/*.d.ts"
|
|
26
|
-
}
|
|
26
|
+
},
|
|
27
|
+
"./localeStrings": "./dist/localeStrings"
|
|
27
28
|
},
|
|
28
29
|
"publishConfig": {
|
|
29
30
|
"access": "public",
|