@zonos/amino 5.1.22 → 5.1.23
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,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
2
|
type SimpleTableHeaderBaseProps = {
|
|
3
3
|
/**
|
|
4
4
|
* Text alignment for a column
|
|
@@ -44,6 +44,7 @@ export type SimpleTableProps<T extends object> = {
|
|
|
44
44
|
* Disable hover background color effect on rows
|
|
45
45
|
*/
|
|
46
46
|
noHoverBackground?: boolean;
|
|
47
|
+
renderFooter?: ReactNode;
|
|
47
48
|
/**
|
|
48
49
|
* @default false
|
|
49
50
|
* Show checkbox on each row, and checkbox for toggling all in header
|
|
@@ -73,5 +74,5 @@ export type SimpleTableProps<T extends object> = {
|
|
|
73
74
|
* - 'row-hover-show': Shows only when the row is hovered
|
|
74
75
|
* - 'cell-hover-show': Shows only when the cell is hovered
|
|
75
76
|
*/
|
|
76
|
-
export declare const SimpleTable: <T extends object>({ className, headers, items, keyExtractor, loading, loadingItems, noHoverBackground, onRowClick, onRowHover, selectable, }: SimpleTableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
77
|
+
export declare const SimpleTable: <T extends object>({ className, headers, items, keyExtractor, loading, loadingItems, noHoverBackground, onRowClick, onRowHover, renderFooter, selectable, }: SimpleTableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
77
78
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("../../_tslib-ccfac372.js"),n=require("react/jsx-runtime"),t=require("styled-components"),r=require("../checkbox/Checkbox.js"),o=require("../skeleton/Skeleton.js"),i=require("../text/Text.js"),a=require("../../styles/constants/theme.js");function l(e){return e&&e.__esModule?e:{default:e}}require("react"),require("framer-motion"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/getTestId.js");var c,d,s,h,u,x,g=l(t),m=g.default.table(c||(c=e.__makeTemplateObject(["\n width: 100%;\n"],["\n width: 100%;\n"]))),b=g.default.thead(d||(d=e.__makeTemplateObject(["\n text-transform: uppercase;\n"],["\n text-transform: uppercase;\n"]))),p=g.default.tr(s||(s=e.__makeTemplateObject(["\n border-bottom: ",";\n height: 48px;\n"],["\n border-bottom: ",";\n height: 48px;\n"])),a.theme.border),k=g.default.th(h||(h=e.__makeTemplateObject(["\n padding: ",";\n white-space: nowrap;\n text-align: ",";\n"],["\n padding: ",";\n white-space: nowrap;\n text-align: ",";\n"])),a.theme.space16,(function(e){return e.$textAlign})),v=g.default.tr(u||(u=e.__makeTemplateObject(["\n height: 48px;\n cursor: ",";\n & {\n border-bottom: ",";\n }\n\n &.with-hover:hover {\n background-color: ",";\n }\n\n &:not(:hover) {\n .row-hover-show {\n visibility: collapse;\n }\n }\n"],["\n height: 48px;\n cursor: ",";\n & {\n border-bottom: ",";\n }\n\n &.with-hover:hover {\n background-color: ",";\n }\n\n &:not(:hover) {\n .row-hover-show {\n visibility: collapse;\n }\n }\n"])),(function(e){return e.clickable?"pointer":"auto"}),a.theme.border,a.theme.gray50),j=g.default.td(x||(x=e.__makeTemplateObject(["\n padding: ",";\n text-align: ",";\n\n &:not(:hover) {\n .cell-hover-show {\n visibility: collapse;\n }\n }\n"],["\n padding: ",";\n text-align: ",";\n\n &:not(:hover) {\n .cell-hover-show {\n visibility: collapse;\n }\n }\n"])),(function(e){return e.$noPadding?void 0:a.theme.space16}),(function(e){return e.$textAlign}));exports.SimpleTable=function(t){var a=t.className,l=t.headers,c=t.items,d=t.keyExtractor,s=t.loading,h=void 0!==s&&s,u=t.loadingItems,x=void 0===u?10:u,g=t.noHoverBackground,f=void 0!==g&&g,w=t.onRowClick,y=t.onRowHover,_=t.
|
|
1
|
+
"use strict";var e=require("../../_tslib-ccfac372.js"),n=require("react/jsx-runtime"),t=require("styled-components"),r=require("../checkbox/Checkbox.js"),o=require("../skeleton/Skeleton.js"),i=require("../text/Text.js"),a=require("../../styles/constants/theme.js");function l(e){return e&&e.__esModule?e:{default:e}}require("react"),require("framer-motion"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/getTestId.js");var c,d,s,h,u,x,g=l(t),m=g.default.table(c||(c=e.__makeTemplateObject(["\n width: 100%;\n"],["\n width: 100%;\n"]))),b=g.default.thead(d||(d=e.__makeTemplateObject(["\n text-transform: uppercase;\n"],["\n text-transform: uppercase;\n"]))),p=g.default.tr(s||(s=e.__makeTemplateObject(["\n border-bottom: ",";\n height: 48px;\n"],["\n border-bottom: ",";\n height: 48px;\n"])),a.theme.border),k=g.default.th(h||(h=e.__makeTemplateObject(["\n padding: ",";\n white-space: nowrap;\n text-align: ",";\n"],["\n padding: ",";\n white-space: nowrap;\n text-align: ",";\n"])),a.theme.space16,(function(e){return e.$textAlign})),v=g.default.tr(u||(u=e.__makeTemplateObject(["\n height: 48px;\n cursor: ",";\n & {\n border-bottom: ",";\n }\n\n &.with-hover:hover {\n background-color: ",";\n }\n\n &:not(:hover) {\n .row-hover-show {\n visibility: collapse;\n }\n }\n"],["\n height: 48px;\n cursor: ",";\n & {\n border-bottom: ",";\n }\n\n &.with-hover:hover {\n background-color: ",";\n }\n\n &:not(:hover) {\n .row-hover-show {\n visibility: collapse;\n }\n }\n"])),(function(e){return e.clickable?"pointer":"auto"}),a.theme.border,a.theme.gray50),j=g.default.td(x||(x=e.__makeTemplateObject(["\n padding: ",";\n text-align: ",";\n\n &:not(:hover) {\n .cell-hover-show {\n visibility: collapse;\n }\n }\n"],["\n padding: ",";\n text-align: ",";\n\n &:not(:hover) {\n .cell-hover-show {\n visibility: collapse;\n }\n }\n"])),(function(e){return e.$noPadding?void 0:a.theme.space16}),(function(e){return e.$textAlign}));exports.SimpleTable=function(t){var a=t.className,l=t.headers,c=t.items,d=t.keyExtractor,s=t.loading,h=void 0!==s&&s,u=t.loadingItems,x=void 0===u?10:u,g=t.noHoverBackground,f=void 0!==g&&g,w=t.onRowClick,y=t.onRowHover,_=t.renderFooter,C=t.selectable,$=void 0===C?{enabled:!1}:C;return n.jsxs(m,{className:a,children:[n.jsxs("colgroup",{children:[!!$.onHeaderCheckboxChange&&n.jsx("col",{}),l.map((function(e){return n.jsx("col",{width:void 0!==e.width?"".concat(e.width,"%"):void 0},e.key)}))]}),n.jsx(b,{children:n.jsxs(p,{children:[!!$.onHeaderCheckboxChange&&n.jsx(k,{$textAlign:"center",children:n.jsx(r.Checkbox,{checked:!h&&$.headerCheckboxValue||!1,disabled:h,onChange:$.onHeaderCheckboxChange})}),l.map((function(e){return n.jsx(k,{$textAlign:e.align||"start",children:n.jsx(i.Text,{color:"gray800",type:"small-header",children:e.name})},e.key)}))]})}),n.jsx("tbody",{children:h?e.__spreadArray([],e.__read(Array(x+1).keys()),!1).map((function(e){return n.jsx(v,{clickable:!1,children:l.map((function(t){return n.jsx(j,{$noPadding:!!t.noPadding,$textAlign:"center",children:n.jsx(o.Skeleton,{height:30},e)},t.key)}))},e)})):c.map((function(e,t){var o;return n.jsxs(v,{className:f?"":"with-hover",clickable:!!w,onClick:function(){return null==w?void 0:w(e)},onMouseEnter:function(){return null==y?void 0:y(e)},children:[$.enabled&&n.jsx(j,{$noPadding:!1,$textAlign:"center",children:n.jsx(r.Checkbox,{checked:(null===(o=$.selectedRowIndexes)||void 0===o?void 0:o.includes(t))||!1,onChange:function(e){var n;return null===(n=$.onRowCheckboxChange)||void 0===n?void 0:n.call($,e,t)}})}),l.map((function(t){return function(e,t){var r=t[e.key];return e.renderCustom?n.jsx(j,{$noPadding:e.noPadding||!1,$textAlign:e.align||"start",children:e.renderCustom(r,t)},e.key):n.jsx(j,{$noPadding:e.noPadding||!1,$textAlign:e.align||"start",children:String(r)},e.key)}(t,e)}))]},d(e))}))}),_]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var n=require("../../_tslib-ccfac372.js"),e=require("react/jsx-runtime"),t=require("clsx"),i=require("styled-components"),
|
|
1
|
+
"use strict";var n=require("../../_tslib-ccfac372.js"),e=require("react/jsx-runtime"),t=require("clsx"),i=require("styled-components"),a=require("../text/Text.js"),r=require("../../styles/constants/theme.js");function p(n){return n&&n.__esModule?n:{default:n}}var o,l,x,h,d,c,s,g,u,m,b=p(t),f=p(i),k=f.default.div(o||(o=n.__makeTemplateObject(["\n background: ",";\n box-shadow: ",";\n height: 14px;\n width: 14px;\n border-radius: 50%;\n transition: ",";\n position: absolute;\n top: 1px;\n left: ",";\n [data-theme='night'] & {\n background: ",";\n }\n"],["\n background: ",";\n box-shadow: ",";\n height: 14px;\n width: 14px;\n border-radius: 50%;\n transition: ",";\n position: absolute;\n top: 1px;\n left: ",";\n [data-theme='night'] & {\n background: ",";\n }\n"])),r.theme.gray0,(function(n){return n.checked?"0px -1px 1px 0px rgba(68, 94, 238, 0.08) inset, 0px 1px 3px 0px rgba(0, 0, 0, 0.20)":"0px -1px 1px 0px rgba(0, 0, 0, 0.08) inset, 0px 1px 3px 0px rgba(0, 0, 0, 0.20)"}),r.theme.transition,(function(n){return n.checked?"calc(100% - 15px)":"1px"}),r.theme.gray1200),w=f.default(k)(l||(l=n.__makeTemplateObject(["\n height: 28px;\n width: 28px;\n top: 2px;\n left: ",";\n box-shadow:\n 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,\n 0px 1px 3px 0px rgba(0, 0, 0, 0.4);\n [data-theme='night'] & {\n background: ",";\n }\n"],["\n height: 28px;\n width: 28px;\n top: 2px;\n left: ",";\n box-shadow:\n 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,\n 0px 1px 3px 0px rgba(0, 0, 0, 0.4);\n [data-theme='night'] & {\n background: ",";\n }\n"])),(function(n){return n.checked?"calc(100% - 30px)":"2px"}),r.theme.gray200),j=f.default.div(x||(x=n.__makeTemplateObject(["\n margin-right: ",";\n width: 32px;\n height: 16px;\n min-width: 32px;\n min-height: 16px;\n line-height: 16px;\n border-radius: 20px;\n background: ",";\n box-shadow: ",";\n display: block;\n user-select: none;\n position: relative;\n"],["\n margin-right: ",";\n width: 32px;\n height: 16px;\n min-width: 32px;\n min-height: 16px;\n line-height: 16px;\n border-radius: 20px;\n background: ",";\n box-shadow: ",";\n display: block;\n user-select: none;\n position: relative;\n"])),r.theme.space16,(function(n){return n.checked?r.theme.primary:r.theme.gray100}),r.theme.v3ShadowInset),y=f.default(j)(h||(h=n.__makeTemplateObject(["\n width: 62px;\n height: 32px;\n min-width: 24px;\n background: ",";\n"],["\n width: 62px;\n height: 32px;\n min-width: 24px;\n background: ",";\n"])),r.theme.gray50),_=f.default(a.Text)(d||(d=n.__makeTemplateObject(["\n margin-bottom: 0;\n"],["\n margin-bottom: 0;\n"]))),v=f.default(a.Text)(c||(c=n.__makeTemplateObject([""],[""]))),T=f.default.span(s||(s=n.__makeTemplateObject(["\n margin-left: 4px;\n color: ",";\n"],["\n margin-left: 4px;\n color: ",";\n"])),r.theme.gray600),O=f.default.div(g||(g=n.__makeTemplateObject(["\n display: flex;\n align-items: center;\n line-height: 16px;\n\n svg {\n margin-right: 4px;\n }\n"],["\n display: flex;\n align-items: center;\n line-height: 16px;\n\n svg {\n margin-right: 4px;\n }\n"]))),q=f.default.label(u||(u=n.__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n cursor: pointer;\n\n &.disabled {\n "," {\n opacity: 0.6;\n }\n "," {\n opacity: 0.95;\n }\n "," {\n color: ",";\n }\n "," {\n color: ",";\n }\n\n cursor: not-allowed;\n }\n"],["\n display: flex;\n flex-direction: row;\n cursor: pointer;\n\n &.disabled {\n "," {\n opacity: 0.6;\n }\n "," {\n opacity: 0.95;\n }\n "," {\n color: ",";\n }\n "," {\n color: ",";\n }\n\n cursor: not-allowed;\n }\n"])),j,k,_,r.theme.gray600,v,r.theme.gray400),I=f.default.div(m||(m=n.__makeTemplateObject(["\n position: absolute;\n top: 6px;\n left: ",";\n right: ",";\n svg {\n height: 20px;\n width: 20px;\n }\n"],["\n position: absolute;\n top: 6px;\n left: ",";\n right: ",";\n svg {\n height: 20px;\n width: 20px;\n }\n"])),(function(n){return n.left?"5.8px":"auto"}),(function(n){return n.left?"auto":"5.6px"}));exports.Switch=function(n){var t=n.checked,i=n.className,a=n.disabled,r=n.label,p=n.labelDescription,o=n.labelIcon,l=n.onChange,x=n.subtitle,h=n.switchIconLeft,d=n.switchIconRight,c=null==r?void 0:r.replace(/\s/g,"-").toLowerCase(),s=Boolean(h||d);return e.jsxs(q,{checked:t,className:b.default(i,{disabled:a}),htmlFor:c,onClick:function(){return!a&&l(!t)},children:[s?e.jsxs(y,{checked:t,children:[e.jsx(w,{checked:t,id:c}),e.jsx(I,{left:!0,children:h}),e.jsx(I,{children:d})]}):e.jsx(j,{checked:t,children:e.jsx(k,{checked:t,id:c})}),e.jsxs("div",{children:[e.jsxs(O,{children:[o,e.jsxs(_,{type:"input-label",children:[r,p&&e.jsx(T,{children:p})]})]}),x&&e.jsx(v,{type:"subtitle",children:x})]})]})};
|
package/package.json
CHANGED
package/theme.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
:root,
|
|
2
2
|
[data-theme='day'] {
|
|
3
3
|
color-scheme: light;
|
|
4
|
-
--amino-transition: all 0.2s ease-in-out 0s, visibility
|
|
4
|
+
--amino-transition: all 0.2s ease-in-out 0s, visibility 0s;
|
|
5
5
|
--amino-type-scale-base: 16px;
|
|
6
6
|
--amino-glass-0: #10111600;
|
|
7
7
|
--amino-glass-50: #1011160a;
|