@sps-woodland/sorting-header 8.21.0 → 8.21.1
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/lib/{index.es.js → index.js} +2 -2
- package/lib/index.umd.cjs +95 -0
- package/lib/style.css +1 -1
- package/package.json +10 -10
- package/vite.config.mjs +2 -2
- package/lib/index.cjs.js +0 -95
|
@@ -54,7 +54,7 @@ var $ = (e, o, r) => {
|
|
|
54
54
|
for (var [i, p] of e.compoundVariants)
|
|
55
55
|
$(i, t, e.defaultVariants) && (r += " " + p);
|
|
56
56
|
return r;
|
|
57
|
-
}, K = D({ defaultClassName: "pkg_sps-woodland_sorting-
|
|
57
|
+
}, K = D({ defaultClassName: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_7ljhcs0", variantClassNames: { up: { true: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_7ljhcs1" }, down: { true: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_7ljhcs2" } }, defaultVariants: {}, compoundVariants: [] }), j = D({ defaultClassName: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl0", variantClassNames: { disabled: { true: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl1" }, active: { true: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl2" }, __autoLayout: { true: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl3", false: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl4" } }, defaultVariants: { disabled: !1, active: !1, __autoLayout: !1 }, compoundVariants: [] });
|
|
58
58
|
function O({
|
|
59
59
|
className: e,
|
|
60
60
|
sortKey: o,
|
|
@@ -125,7 +125,7 @@ M.set(O, {
|
|
|
125
125
|
widthRem: { type: "number" }
|
|
126
126
|
}
|
|
127
127
|
});
|
|
128
|
-
var A = D({ defaultClassName: "pkg_sps-woodland_sorting-
|
|
128
|
+
var A = D({ defaultClassName: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81640", variantClassNames: { pinned: { true: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81641", false: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81642" }, scrollParentIsWindow: { true: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81643", false: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81644" }, __autoLayout: { true: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81645", false: "pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81646" } }, defaultVariants: { pinned: !1, scrollParentIsWindow: !1, __autoLayout: !1 }, compoundVariants: [[{ pinned: !0, scrollParentIsWindow: !0 }, "pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81647"]] }), U = "pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81648";
|
|
129
129
|
function G({
|
|
130
130
|
sort: e,
|
|
131
131
|
onSortChange: o,
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
(function(h,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils"],v):(h=typeof globalThis<"u"?globalThis:h||self,v(h.SortingHeader={},h.React,h.core,h.utils))})(this,function(h,v,s,V){"use strict";function x(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const o=x(v);function L(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function j(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r&&(t=t.filter(function(d){return Object.getOwnPropertyDescriptor(e,d).enumerable})),n.push.apply(n,t)}return n}function M(e){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};r%2?j(Object(n),!0).forEach(function(t){L(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var W=(e,r,n)=>{for(var t of Object.keys(e)){var d;if(e[t]!==((d=r[t])!==null&&d!==void 0?d:n[t]))return!1}return!0},A=e=>r=>{var n=e.defaultClassName,t=M(M({},e.defaultVariants),r);for(var d in t){var p,l=(p=t[d])!==null&&p!==void 0?p:e.defaultVariants[d];if(l!=null){var _=l;typeof _=="boolean"&&(_=_===!0?"true":"false");var g=e.variantClassNames[d][_];g&&(n+=" "+g)}}for(var[a,m]of e.compoundVariants)W(a,t,e.defaultVariants)&&(n+=" "+m);return n},K=A({defaultClassName:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_7ljhcs0",variantClassNames:{up:{true:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_7ljhcs1"},down:{true:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_7ljhcs2"}},defaultVariants:{},compoundVariants:[]}),G=A({defaultClassName:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl0",variantClassNames:{disabled:{true:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl1"},active:{true:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl2"},__autoLayout:{true:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl3",false:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl4"}},defaultVariants:{disabled:!1,active:!1,__autoLayout:!1},compoundVariants:[]});function D({className:e,sortKey:r,sort:n,sortDisabled:t,onSortChange:d,onClick:p,children:l,style:_,widthPx:g,widthRem:a,__autoLayout:m=!1,...c}){const u=o.useMemo(()=>{const w=!!r&&!t&&Array.isArray(n)&&n.find(y=>y.key===r);return w?w.direction:void 0},[n,r,t]),E=g?g/16:a,S=E?{..._,width:`${E}rem`}:_,b=w=>{r&&!t&&d&&d([{key:r,direction:u===s.SortDirection.ASCENDING?s.SortDirection.DESCENDING:s.SortDirection.ASCENDING}]),p&&p(w)};return m?o.createElement("td",{className:s.cl(e,G({disabled:t,active:!!u,__autoLayout:m}),u&&K({up:u===s.SortDirection.ASCENDING,down:u===s.SortDirection.DESCENDING})),onClick:b,style:S,...c},l):o.createElement("div",{className:s.cl(e,G({disabled:t,active:!!u,__autoLayout:m}),u&&K({up:u===s.SortDirection.ASCENDING,down:u===s.SortDirection.DESCENDING})),onClick:b,style:S,...c},l)}s.Metadata.set(D,{name:"Sorting Header Cell",props:{sortKey:{type:"string"},sort:{type:"SortedColumn[]"},sortDisabled:{type:"boolean"},onSortChange:{type:"SortChangeHandler"},widthPx:{type:"number"},widthRem:{type:"number"}}});var I=A({defaultClassName:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81640",variantClassNames:{pinned:{true:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81641",false:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81642"},scrollParentIsWindow:{true:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81643",false:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81644"},__autoLayout:{true:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81645",false:"pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81646"}},defaultVariants:{pinned:!1,scrollParentIsWindow:!1,__autoLayout:!1},compoundVariants:[[{pinned:!0,scrollParentIsWindow:!0},"pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81647"]]}),z="pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81648";function H({sort:e,onSortChange:r,children:n,className:t,pinSortingHeader:d=!1,__autoLayout:p=!1,...l}){const[_,g]=o.useState(!1),a=o.useRef(null),m=o.useRef(null),c=o.useRef({height:"",width:"",unpinAtTop:0,unpinAtBottom:0,cellWidths:[]}),u=o.useCallback(()=>a.current&&s.getScrollParent(a.current)||window,[]),E=o.useCallback(i=>{const f=i||u();return f.scrollY||f.scrollTop||0},[]),S=o.useCallback(i=>{var f,k,N;if(d&&a.current){const P=i||u(),R=E(P),T=p?(k=(f=a.current.parentElement)==null?void 0:f.parentElement)==null?void 0:k.getBoundingClientRect():(N=a.current.parentElement)==null?void 0:N.getBoundingClientRect();if(T){const C=a.current.getBoundingClientRect();c.current.height=`${C.height}px`,c.current.width=`${C.width}px`,P===window?(c.current.unpinAtBottom=T.bottom+R-C.height*2,c.current.unpinAtTop=C.top+R-C.height):(c.current.unpinAtBottom=T.bottom+R-C.height*2,c.current.unpinAtTop=T.top+R),c.current.cellWidths=[],a.current.childNodes.forEach((B,Y)=>{B instanceof HTMLElement&&(c.current.cellWidths[Y]=`${B.getBoundingClientRect().width}px`)})}}},[d]),b=o.useCallback(()=>{m.current&&(m.current.style.width=c.current.width,m.current.style.height=c.current.height,m.current.childNodes.forEach((i,f)=>{i instanceof HTMLElement&&(i.style.width=c.current.cellWidths[f]||"")}))},[]);o.useLayoutEffect(()=>{S()}),o.useLayoutEffect(()=>{let i;const f=u();return d?(i=V.lockToAnimationFrames(()=>{S(f);const{unpinAtTop:k,unpinAtBottom:N}=c.current,P=E(f);k&&N&&(P>=k&&P<=N?(g(!0),a.current&&(a.current.style.visibility="hidden")):(g(!1),a.current&&(a.current.style.visibility="visible")))}),f.addEventListener("scroll",i),i()):a.current&&(a.current.style.visibility="visible"),()=>{i&&f.removeEventListener("scroll",i)}},[d,S]),o.useLayoutEffect(()=>{let i;return _&&(i=()=>{S(),b()},window.addEventListener("resize",i),i()),()=>{i&&window.removeEventListener("resize",i)}},[_,S,b]);const[w]=s.selectChildren(n,[{type:D}]),y=s.modChildren(w,()=>[{sort:e,onSortChange:r}]),O=u()===window;if(p){const i=o.createElement("tr",null,o.createElement("td",{className:s.cl(z),colSpan:100}));return o.createElement(o.Fragment,null,o.createElement("tr",{ref:a,className:s.cl(I({pinned:!1,scrollParentIsWindow:O,__autoLayout:p}),t),...l},y),i,_&&o.createElement("tr",{ref:m,className:s.cl(t,I({pinned:!0,scrollParentIsWindow:O,__autoLayout:p})),...l,id:l.id?`pinned-${l.id}`:void 0,"data-testid":l["data-testid"]?`pinned-${l["data-testid"]}`:void 0},y))}return o.createElement(o.Fragment,null,o.createElement("div",{ref:a,className:s.cl(t,I({pinned:!1,scrollParentIsWindow:O,__autoLayout:p})),...l},y),_&&o.createElement("div",{ref:m,className:s.cl(t,I({pinned:!0,scrollParentIsWindow:O,__autoLayout:p})),...l,id:l.id?`pinned-${l.id}`:void 0,"data-testid":l["data-testid"]?`pinned-${l["data-testid"]}`:void 0},y))}s.Metadata.set(H,{name:"Sorting Header",props:{sort:{type:"SortedColumn[]"},onSortChange:{type:"SortChangeHandler"}}});const F={"Sorting Header":{components:[H,D],examples:{basic:{label:"Sorting Header",examples:{basic:{react:V.code`
|
|
2
|
+
import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
|
|
3
|
+
import { Icon } from "@sps-woodland/core";
|
|
4
|
+
import { ContentRow } from "@sps-woodland/content-row";
|
|
5
|
+
import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
|
|
6
|
+
import { sprinkles, grid } from "@sps-woodland/tokens";
|
|
7
|
+
function MyComponent() {
|
|
8
|
+
const [sort, setSort] = React.useState([
|
|
9
|
+
{ key: "id", direction: SortDirection.DESCENDING },
|
|
10
|
+
]);
|
|
11
|
+
|
|
12
|
+
const items = React.useMemo(
|
|
13
|
+
() =>
|
|
14
|
+
[
|
|
15
|
+
{
|
|
16
|
+
id: "9712323",
|
|
17
|
+
icon: SpsIcon.STATUS_IN_PROCESS,
|
|
18
|
+
color: "purple-medium",
|
|
19
|
+
type: "850",
|
|
20
|
+
timestamp: "July 21, 2021 @ 4:40 PM",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
id: "8712378",
|
|
24
|
+
icon: SpsIcon.STATUS_OK,
|
|
25
|
+
color: "green-medium",
|
|
26
|
+
type: "810",
|
|
27
|
+
timestamp: "May 24, 2021 @ 4:39 PM",
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
id: "8912389",
|
|
31
|
+
icon: SpsIcon.STATUS_REJECTED,
|
|
32
|
+
color: "red-medium",
|
|
33
|
+
type: "850",
|
|
34
|
+
timestamp: "May 23, 2021 @ 4:38 PM",
|
|
35
|
+
},
|
|
36
|
+
].sort((a, b) => {
|
|
37
|
+
if (!sort.length) {
|
|
38
|
+
return 0;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const [{ key, direction }] = sort;
|
|
42
|
+
if (a[key] < b[key]) {
|
|
43
|
+
return direction === SortDirection.ASCENDING ? -1 : 1;
|
|
44
|
+
} else if (a[key] > b[key]) {
|
|
45
|
+
return direction === SortDirection.ASCENDING ? 1 : -1;
|
|
46
|
+
} else {
|
|
47
|
+
return 0;
|
|
48
|
+
}
|
|
49
|
+
}),
|
|
50
|
+
[sort]
|
|
51
|
+
);
|
|
52
|
+
|
|
53
|
+
return (
|
|
54
|
+
<div className={grid.root}>
|
|
55
|
+
<SortingHeader sort={sort} onSortChange={setSort} className={grid[12]}>
|
|
56
|
+
<SortingHeaderCell sortKey="id">ID</SortingHeaderCell>
|
|
57
|
+
<SortingHeaderCell sortKey="type">Type</SortingHeaderCell>
|
|
58
|
+
<SortingHeaderCell sortKey="timestamp" widthPx={150}>
|
|
59
|
+
Timestamp
|
|
60
|
+
</SortingHeaderCell>
|
|
61
|
+
</SortingHeader>
|
|
62
|
+
|
|
63
|
+
{items.map((item) => {
|
|
64
|
+
return (
|
|
65
|
+
<ContentRow key={item.id} className={grid[12]}>
|
|
66
|
+
<ContentRowCol>
|
|
67
|
+
<Icon
|
|
68
|
+
icon={item.icon}
|
|
69
|
+
color={item.color}
|
|
70
|
+
size={SpsIconSize.LARGE}
|
|
71
|
+
className={sprinkles({ mr: "sm" })}
|
|
72
|
+
/>
|
|
73
|
+
<a href="#">
|
|
74
|
+
{item.id}
|
|
75
|
+
</a>
|
|
76
|
+
</ContentRowCol>
|
|
77
|
+
<ContentRowCol>
|
|
78
|
+
<KeyValueSet>
|
|
79
|
+
<KeyValueSetItem itemKey="Type">{item.type}</KeyValueSetItem>
|
|
80
|
+
</KeyValueSet>
|
|
81
|
+
</ContentRowCol>
|
|
82
|
+
<ContentRowCol widthPx={250}>
|
|
83
|
+
<KeyValueSet>
|
|
84
|
+
<KeyValueSetItem itemKey="Timestamp">
|
|
85
|
+
{item.timestamp}
|
|
86
|
+
</KeyValueSetItem>
|
|
87
|
+
</KeyValueSet>
|
|
88
|
+
</ContentRowCol>
|
|
89
|
+
</ContentRow>
|
|
90
|
+
);
|
|
91
|
+
})}
|
|
92
|
+
</>
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
`}}}}}};h.MANIFEST=F,h.SortingHeader=H,h.SortingHeaderCell=D,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-woodland_sorting-
|
|
1
|
+
.pkg_sps-woodland_sorting-header__version_8_21_1__hash_7ljhcs0:after{content:"";border-left-color:transparent;border-right-color:transparent;border-style:solid;border-width:.375rem .25rem;height:0;position:absolute;right:.5rem}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_7ljhcs1:after{border-bottom-color:#1f282c;border-top-color:transparent;top:calc(50% - 9px)}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_7ljhcs2:after{border-top-color:#1f282c;border-bottom-color:transparent;top:calc(50% - 3px)}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl0{display:table-cell;vertical-align:middle;color:#4b5356;font-size:.75rem;font-weight:600;line-height:1.25rem;padding:.5rem;position:relative}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl0:hover{background-color:#f3f4f4}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl1{cursor:default}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl1:hover{background-color:#e9e9ea}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl2{color:#1f282c;background-color:#d2d4d4}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl3{text-align:left}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl3:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_1crs4gl3:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81640{padding:0;border-radius:.25rem;vertical-align:bottom;cursor:pointer;background-color:#e9e9ea}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81641{border-radius:0;position:fixed;top:0;z-index:999}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81641:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;position:absolute;top:100%;left:-.0625rem;width:100%}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81645{display:table-row}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81646{display:table;table-layout:fixed;width:100%}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81647{top:3.75rem}.pkg_sps-woodland_sorting-header__version_8_21_1__hash_sk81648{height:1rem;background:transparent;border:0}
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/sorting-header",
|
|
3
3
|
"description": "SPS Woodland Design System sorting-header and sorting-header cell components",
|
|
4
|
-
"version": "8.21.
|
|
4
|
+
"version": "8.21.1",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/sorting-header",
|
|
8
8
|
"homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/sorting-header#readme",
|
|
9
9
|
"type": "module",
|
|
10
|
-
"module": "./lib/index.
|
|
11
|
-
"main": "./lib/index.cjs
|
|
10
|
+
"module": "./lib/index.js",
|
|
11
|
+
"main": "./lib/index.umd.cjs",
|
|
12
12
|
"types": "./lib/index.d.ts",
|
|
13
13
|
"exports": {
|
|
14
14
|
".": {
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"default": "./lib/index.
|
|
15
|
+
"require": "./lib/index.umd.cjs",
|
|
16
|
+
"import": "./lib/index.js",
|
|
17
|
+
"default": "./lib/index.js",
|
|
18
18
|
"types": "./lib/index.d.ts"
|
|
19
19
|
},
|
|
20
20
|
"./lib/style.css": {
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0",
|
|
30
30
|
"react": "^16.14.0",
|
|
31
31
|
"react-dom": "^16.14.0",
|
|
32
|
-
"@sps-woodland/core": "8.21.
|
|
33
|
-
"@sps-woodland/tokens": "8.21.
|
|
32
|
+
"@sps-woodland/core": "8.21.1",
|
|
33
|
+
"@sps-woodland/tokens": "8.21.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@spscommerce/utils": "^7.0.0",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
40
40
|
"react": "^16.14.0",
|
|
41
41
|
"react-dom": "^16.14.0",
|
|
42
|
-
"@sps-woodland/core": "8.21.
|
|
43
|
-
"@sps-woodland/tokens": "8.21.
|
|
42
|
+
"@sps-woodland/core": "8.21.1",
|
|
43
|
+
"@sps-woodland/tokens": "8.21.1"
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"build": "pnpm run build:js && pnpm run build:types",
|
package/vite.config.mjs
CHANGED
|
@@ -18,8 +18,8 @@ export default defineConfig({
|
|
|
18
18
|
build: {
|
|
19
19
|
lib: {
|
|
20
20
|
entry: path.resolve(__dirname, "src/index.ts"),
|
|
21
|
-
|
|
22
|
-
fileName:
|
|
21
|
+
name: "SortingHeader",
|
|
22
|
+
fileName: "index",
|
|
23
23
|
},
|
|
24
24
|
outDir: path.resolve(__dirname, "./lib"),
|
|
25
25
|
emptyOutDir: false,
|
package/lib/index.cjs.js
DELETED
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),a=require("@sps-woodland/core"),K=require("@spscommerce/utils");function L(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const o=L(B);function x(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function H(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter(function(d){return Object.getOwnPropertyDescriptor(e,d).enumerable})),r.push.apply(r,t)}return r}function V(e){for(var n=1;n<arguments.length;n++){var r=arguments[n]!=null?arguments[n]:{};n%2?H(Object(r),!0).forEach(function(t){x(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):H(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var W=(e,n,r)=>{for(var t of Object.keys(e)){var d;if(e[t]!==((d=n[t])!==null&&d!==void 0?d:r[t]))return!1}return!0},R=e=>n=>{var r=e.defaultClassName,t=V(V({},e.defaultVariants),n);for(var d in t){var _,l=(_=t[d])!==null&&_!==void 0?_:e.defaultVariants[d];if(l!=null){var p=l;typeof p=="boolean"&&(p=p===!0?"true":"false");var h=e.variantClassNames[d][p];h&&(r+=" "+h)}}for(var[i,m]of e.compoundVariants)W(i,t,e.defaultVariants)&&(r+=" "+m);return r},j=R({defaultClassName:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_7ljhcs0",variantClassNames:{up:{true:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_7ljhcs1"},down:{true:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_7ljhcs2"}},defaultVariants:{},compoundVariants:[]}),M=R({defaultClassName:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_1crs4gl0",variantClassNames:{disabled:{true:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_1crs4gl1"},active:{true:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_1crs4gl2"},__autoLayout:{true:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_1crs4gl3",false:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_1crs4gl4"}},defaultVariants:{disabled:!1,active:!1,__autoLayout:!1},compoundVariants:[]});function O({className:e,sortKey:n,sort:r,sortDisabled:t,onSortChange:d,onClick:_,children:l,style:p,widthPx:h,widthRem:i,__autoLayout:m=!1,...c}){const u=o.useMemo(()=>{const S=!!n&&!t&&Array.isArray(r)&&r.find(w=>w.key===n);return S?S.direction:void 0},[r,n,t]),C=h?h/16:i,g=C?{...p,width:`${C}rem`}:p,v=S=>{n&&!t&&d&&d([{key:n,direction:u===a.SortDirection.ASCENDING?a.SortDirection.DESCENDING:a.SortDirection.ASCENDING}]),_&&_(S)};return m?o.createElement("td",{className:a.cl(e,M({disabled:t,active:!!u,__autoLayout:m}),u&&j({up:u===a.SortDirection.ASCENDING,down:u===a.SortDirection.DESCENDING})),onClick:v,style:g,...c},l):o.createElement("div",{className:a.cl(e,M({disabled:t,active:!!u,__autoLayout:m}),u&&j({up:u===a.SortDirection.ASCENDING,down:u===a.SortDirection.DESCENDING})),onClick:v,style:g,...c},l)}a.Metadata.set(O,{name:"Sorting Header Cell",props:{sortKey:{type:"string"},sort:{type:"SortedColumn[]"},sortDisabled:{type:"boolean"},onSortChange:{type:"SortChangeHandler"},widthPx:{type:"number"},widthRem:{type:"number"}}});var I=R({defaultClassName:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_sk81640",variantClassNames:{pinned:{true:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_sk81641",false:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_sk81642"},scrollParentIsWindow:{true:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_sk81643",false:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_sk81644"},__autoLayout:{true:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_sk81645",false:"pkg_sps-woodland_sorting-header__version_8_21_0__hash_sk81646"}},defaultVariants:{pinned:!1,scrollParentIsWindow:!1,__autoLayout:!1},compoundVariants:[[{pinned:!0,scrollParentIsWindow:!0},"pkg_sps-woodland_sorting-header__version_8_21_0__hash_sk81647"]]}),z="pkg_sps-woodland_sorting-header__version_8_21_0__hash_sk81648";function A({sort:e,onSortChange:n,children:r,className:t,pinSortingHeader:d=!1,__autoLayout:_=!1,...l}){const[p,h]=o.useState(!1),i=o.useRef(null),m=o.useRef(null),c=o.useRef({height:"",width:"",unpinAtTop:0,unpinAtBottom:0,cellWidths:[]}),u=o.useCallback(()=>i.current&&a.getScrollParent(i.current)||window,[]),C=o.useCallback(s=>{const f=s||u();return f.scrollY||f.scrollTop||0},[]),g=o.useCallback(s=>{var f,E,b;if(d&&i.current){const k=s||u(),P=C(k),D=_?(E=(f=i.current.parentElement)==null?void 0:f.parentElement)==null?void 0:E.getBoundingClientRect():(b=i.current.parentElement)==null?void 0:b.getBoundingClientRect();if(D){const y=i.current.getBoundingClientRect();c.current.height=`${y.height}px`,c.current.width=`${y.width}px`,k===window?(c.current.unpinAtBottom=D.bottom+P-y.height*2,c.current.unpinAtTop=y.top+P-y.height):(c.current.unpinAtBottom=D.bottom+P-y.height*2,c.current.unpinAtTop=D.top+P),c.current.cellWidths=[],i.current.childNodes.forEach((T,G)=>{T instanceof HTMLElement&&(c.current.cellWidths[G]=`${T.getBoundingClientRect().width}px`)})}}},[d]),v=o.useCallback(()=>{m.current&&(m.current.style.width=c.current.width,m.current.style.height=c.current.height,m.current.childNodes.forEach((s,f)=>{s instanceof HTMLElement&&(s.style.width=c.current.cellWidths[f]||"")}))},[]);o.useLayoutEffect(()=>{g()}),o.useLayoutEffect(()=>{let s;const f=u();return d?(s=K.lockToAnimationFrames(()=>{g(f);const{unpinAtTop:E,unpinAtBottom:b}=c.current,k=C(f);E&&b&&(k>=E&&k<=b?(h(!0),i.current&&(i.current.style.visibility="hidden")):(h(!1),i.current&&(i.current.style.visibility="visible")))}),f.addEventListener("scroll",s),s()):i.current&&(i.current.style.visibility="visible"),()=>{s&&f.removeEventListener("scroll",s)}},[d,g]),o.useLayoutEffect(()=>{let s;return p&&(s=()=>{g(),v()},window.addEventListener("resize",s),s()),()=>{s&&window.removeEventListener("resize",s)}},[p,g,v]);const[S]=a.selectChildren(r,[{type:O}]),w=a.modChildren(S,()=>[{sort:e,onSortChange:n}]),N=u()===window;if(_){const s=o.createElement("tr",null,o.createElement("td",{className:a.cl(z),colSpan:100}));return o.createElement(o.Fragment,null,o.createElement("tr",{ref:i,className:a.cl(I({pinned:!1,scrollParentIsWindow:N,__autoLayout:_}),t),...l},w),s,p&&o.createElement("tr",{ref:m,className:a.cl(t,I({pinned:!0,scrollParentIsWindow:N,__autoLayout:_})),...l,id:l.id?`pinned-${l.id}`:void 0,"data-testid":l["data-testid"]?`pinned-${l["data-testid"]}`:void 0},w))}return o.createElement(o.Fragment,null,o.createElement("div",{ref:i,className:a.cl(t,I({pinned:!1,scrollParentIsWindow:N,__autoLayout:_})),...l},w),p&&o.createElement("div",{ref:m,className:a.cl(t,I({pinned:!0,scrollParentIsWindow:N,__autoLayout:_})),...l,id:l.id?`pinned-${l.id}`:void 0,"data-testid":l["data-testid"]?`pinned-${l["data-testid"]}`:void 0},w))}a.Metadata.set(A,{name:"Sorting Header",props:{sort:{type:"SortedColumn[]"},onSortChange:{type:"SortChangeHandler"}}});const F={components:[A,O],examples:{basic:{label:"Sorting Header",examples:{basic:{react:K.code`
|
|
2
|
-
import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
|
|
3
|
-
import { Icon } from "@sps-woodland/core";
|
|
4
|
-
import { ContentRow } from "@sps-woodland/content-row";
|
|
5
|
-
import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
|
|
6
|
-
import { sprinkles, grid } from "@sps-woodland/tokens";
|
|
7
|
-
function MyComponent() {
|
|
8
|
-
const [sort, setSort] = React.useState([
|
|
9
|
-
{ key: "id", direction: SortDirection.DESCENDING },
|
|
10
|
-
]);
|
|
11
|
-
|
|
12
|
-
const items = React.useMemo(
|
|
13
|
-
() =>
|
|
14
|
-
[
|
|
15
|
-
{
|
|
16
|
-
id: "9712323",
|
|
17
|
-
icon: SpsIcon.STATUS_IN_PROCESS,
|
|
18
|
-
color: "purple-medium",
|
|
19
|
-
type: "850",
|
|
20
|
-
timestamp: "July 21, 2021 @ 4:40 PM",
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
id: "8712378",
|
|
24
|
-
icon: SpsIcon.STATUS_OK,
|
|
25
|
-
color: "green-medium",
|
|
26
|
-
type: "810",
|
|
27
|
-
timestamp: "May 24, 2021 @ 4:39 PM",
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
id: "8912389",
|
|
31
|
-
icon: SpsIcon.STATUS_REJECTED,
|
|
32
|
-
color: "red-medium",
|
|
33
|
-
type: "850",
|
|
34
|
-
timestamp: "May 23, 2021 @ 4:38 PM",
|
|
35
|
-
},
|
|
36
|
-
].sort((a, b) => {
|
|
37
|
-
if (!sort.length) {
|
|
38
|
-
return 0;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const [{ key, direction }] = sort;
|
|
42
|
-
if (a[key] < b[key]) {
|
|
43
|
-
return direction === SortDirection.ASCENDING ? -1 : 1;
|
|
44
|
-
} else if (a[key] > b[key]) {
|
|
45
|
-
return direction === SortDirection.ASCENDING ? 1 : -1;
|
|
46
|
-
} else {
|
|
47
|
-
return 0;
|
|
48
|
-
}
|
|
49
|
-
}),
|
|
50
|
-
[sort]
|
|
51
|
-
);
|
|
52
|
-
|
|
53
|
-
return (
|
|
54
|
-
<div className={grid.root}>
|
|
55
|
-
<SortingHeader sort={sort} onSortChange={setSort} className={grid[12]}>
|
|
56
|
-
<SortingHeaderCell sortKey="id">ID</SortingHeaderCell>
|
|
57
|
-
<SortingHeaderCell sortKey="type">Type</SortingHeaderCell>
|
|
58
|
-
<SortingHeaderCell sortKey="timestamp" widthPx={150}>
|
|
59
|
-
Timestamp
|
|
60
|
-
</SortingHeaderCell>
|
|
61
|
-
</SortingHeader>
|
|
62
|
-
|
|
63
|
-
{items.map((item) => {
|
|
64
|
-
return (
|
|
65
|
-
<ContentRow key={item.id} className={grid[12]}>
|
|
66
|
-
<ContentRowCol>
|
|
67
|
-
<Icon
|
|
68
|
-
icon={item.icon}
|
|
69
|
-
color={item.color}
|
|
70
|
-
size={SpsIconSize.LARGE}
|
|
71
|
-
className={sprinkles({ mr: "sm" })}
|
|
72
|
-
/>
|
|
73
|
-
<a href="#">
|
|
74
|
-
{item.id}
|
|
75
|
-
</a>
|
|
76
|
-
</ContentRowCol>
|
|
77
|
-
<ContentRowCol>
|
|
78
|
-
<KeyValueSet>
|
|
79
|
-
<KeyValueSetItem itemKey="Type">{item.type}</KeyValueSetItem>
|
|
80
|
-
</KeyValueSet>
|
|
81
|
-
</ContentRowCol>
|
|
82
|
-
<ContentRowCol widthPx={250}>
|
|
83
|
-
<KeyValueSet>
|
|
84
|
-
<KeyValueSetItem itemKey="Timestamp">
|
|
85
|
-
{item.timestamp}
|
|
86
|
-
</KeyValueSetItem>
|
|
87
|
-
</KeyValueSet>
|
|
88
|
-
</ContentRowCol>
|
|
89
|
-
</ContentRow>
|
|
90
|
-
);
|
|
91
|
-
})}
|
|
92
|
-
</>
|
|
93
|
-
);
|
|
94
|
-
}
|
|
95
|
-
`}}}}},Y={"Sorting Header":F};exports.MANIFEST=Y;exports.SortingHeader=A;exports.SortingHeaderCell=O;
|