@raystack/apsara 0.19.0 → 0.20.0
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/calendar/date-picker.d.ts +2 -1
- package/dist/calendar/date-picker.d.ts.map +1 -1
- package/dist/index.cjs +121 -38
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +5 -8
- package/dist/index.js +121 -38
- package/dist/index.js.map +1 -1
- package/dist/table/datatable.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -6,8 +6,9 @@ interface DatePickerProps {
|
|
|
6
6
|
textFieldProps?: TextfieldProps;
|
|
7
7
|
calendarProps?: PropsSingleRequired & PropsBase;
|
|
8
8
|
onSelect?: (date: Date) => void;
|
|
9
|
+
placeholder?: string;
|
|
9
10
|
value?: Date;
|
|
10
11
|
}
|
|
11
|
-
export declare function DatePicker({ side, dateFormat, textFieldProps, calendarProps, value, onSelect, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare function DatePicker({ side, dateFormat, placeholder, textFieldProps, calendarProps, value, onSelect, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
export {};
|
|
13
14
|
//# sourceMappingURL=date-picker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../calendar/date-picker.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../calendar/date-picker.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAOlE,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,aAAa,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAY,EACZ,UAAyB,EACzB,WAA0B,EAC1B,cAAc,EACd,aAAa,EACb,KAAkB,EAClB,QAAmB,GACpB,EAAE,eAAe,2CAmIjB"}
|
package/dist/index.cjs
CHANGED
|
@@ -4382,7 +4382,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
|
4382
4382
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
4383
4383
|
PERFORMANCE OF THIS SOFTWARE.
|
|
4384
4384
|
***************************************************************************** */
|
|
4385
|
-
/* global Reflect, Promise
|
|
4385
|
+
/* global Reflect, Promise */
|
|
4386
4386
|
|
|
4387
4387
|
|
|
4388
4388
|
var __assign = function() {
|
|
@@ -4416,12 +4416,7 @@ function __spreadArray(to, from, pack) {
|
|
|
4416
4416
|
}
|
|
4417
4417
|
}
|
|
4418
4418
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
4419
|
-
}
|
|
4420
|
-
|
|
4421
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
4422
|
-
var e = new Error(message);
|
|
4423
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
4424
|
-
};
|
|
4419
|
+
}
|
|
4425
4420
|
|
|
4426
4421
|
var zeroRightClassName = 'right-scroll-bar-position';
|
|
4427
4422
|
var fullWidthClassName = 'width-before-scroll-bar';
|
|
@@ -10193,7 +10188,7 @@ function Image({ alt, children, className, ...props }) {
|
|
|
10193
10188
|
return jsxRuntimeExports.jsx("img", { alt: alt, className: image({ className }), ...props });
|
|
10194
10189
|
}
|
|
10195
10190
|
|
|
10196
|
-
var styles$k = {"textfield":"inputfield-module_textfield__l6K73","textfield-sm":"inputfield-module_textfield-sm__QTt1x","textfield-md":"inputfield-module_textfield-md__pQWpW","textfield-
|
|
10191
|
+
var styles$k = {"textfield":"inputfield-module_textfield__l6K73","textfield-sm":"inputfield-module_textfield-sm__QTt1x","textfield-md":"inputfield-module_textfield-md__pQWpW","textfield-invalid":"inputfield-module_textfield-invalid__XFKPz","textfield-valid":"inputfield-module_textfield-valid__euwnE","bold":"inputfield-module_bold__MzkDx"};
|
|
10197
10192
|
|
|
10198
10193
|
const InputField = ({ label, children, ...props }) => {
|
|
10199
10194
|
return (jsxRuntimeExports.jsxs(Flex, { direction: "column", gap: "extra-small", ...props, children: [label && jsxRuntimeExports.jsx(Label, { className: styles$k.bold, children: label }), children] }));
|
|
@@ -28050,7 +28045,7 @@ function DayPicker(props) {
|
|
|
28050
28045
|
props.footer && (React.createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
|
|
28051
28046
|
}
|
|
28052
28047
|
|
|
28053
|
-
var styles$6 = {"calendarRoot":"calendar-module_calendarRoot__KnBz-","caption_label":"calendar-module_caption_label__C5Ys7","dropdowns":"calendar-module_dropdowns__Wn53e","dropdown_trigger":"calendar-module_dropdown_trigger__dsyaq","dropdown_item_text":"calendar-module_dropdown_item_text__Tudqv","nav_button":"calendar-module_nav_button__8W5py","nav_button_previous":"calendar-module_nav_button_previous__lWJYm","nav_button_next":"calendar-module_nav_button_next__1MzRT","months":"calendar-module_months__IN75k","nav":"calendar-module_nav__aGeze","month_caption":"calendar-module_month_caption__Ws6Hx","day":"calendar-module_day__rQFGK","disabled":"calendar-module_disabled__jqgRB","outside":"calendar-module_outside__nq5XC","selected":"calendar-module_selected__kiiAZ","range_middle":"calendar-module_range_middle__PmzFi","range_start":"calendar-module_range_start__ZUooG","range_end":"calendar-module_range_end__PKrm7","week":"calendar-module_week__kCvKJ","day_button":"calendar-module_day_button__vCKP1","today":"calendar-module_today__iXQIQ","weekday":"calendar-module_weekday__xzf6F","hidden":"calendar-module_hidden__wqJVo","calendarPopover":"calendar-module_calendarPopover__PY4sa","
|
|
28048
|
+
var styles$6 = {"calendarRoot":"calendar-module_calendarRoot__KnBz-","caption_label":"calendar-module_caption_label__C5Ys7","dropdowns":"calendar-module_dropdowns__Wn53e","dropdown_trigger":"calendar-module_dropdown_trigger__dsyaq","dropdown_item_text":"calendar-module_dropdown_item_text__Tudqv","nav_button":"calendar-module_nav_button__8W5py","nav_button_previous":"calendar-module_nav_button_previous__lWJYm","nav_button_next":"calendar-module_nav_button_next__1MzRT","months":"calendar-module_months__IN75k","nav":"calendar-module_nav__aGeze","month_caption":"calendar-module_month_caption__Ws6Hx","day":"calendar-module_day__rQFGK","disabled":"calendar-module_disabled__jqgRB","outside":"calendar-module_outside__nq5XC","selected":"calendar-module_selected__kiiAZ","range_middle":"calendar-module_range_middle__PmzFi","range_start":"calendar-module_range_start__ZUooG","range_end":"calendar-module_range_end__PKrm7","week":"calendar-module_week__kCvKJ","day_button":"calendar-module_day_button__vCKP1","today":"calendar-module_today__iXQIQ","weekday":"calendar-module_weekday__xzf6F","hidden":"calendar-module_hidden__wqJVo","calendarPopover":"calendar-module_calendarPopover__PY4sa","dropdown_icon":"calendar-module_dropdown_icon__rDTbz","dropdown_content":"calendar-module_dropdown_content__ajJ5V"};
|
|
28054
28049
|
|
|
28055
28050
|
const root$1 = cva(styles$6.calendarRoot);
|
|
28056
28051
|
function DropDown({ options = [], value, onChange, onDropdownOpen, }) {
|
|
@@ -28104,7 +28099,7 @@ const Calendar = function ({ className, classNames, showOutsideDays = true, onDr
|
|
|
28104
28099
|
}, className: root$1({ className }), mode: "single", ...props }));
|
|
28105
28100
|
};
|
|
28106
28101
|
|
|
28107
|
-
var styles$5 = {"textfield":"textfield-module_textfield__u4AGg","textfield-sm":"textfield-module_textfield-sm__OKPic","textfield-md":"textfield-module_textfield-md__e2ayW","textfield-
|
|
28102
|
+
var styles$5 = {"textfield":"textfield-module_textfield__u4AGg","textfield-sm":"textfield-module_textfield-sm__OKPic","textfield-md":"textfield-module_textfield-md__e2ayW","textfield-invalid":"textfield-module_textfield-invalid__RtgIy","textfield-valid":"textfield-module_textfield-valid__6rMM9","textfield-leading":"textfield-module_textfield-leading__AE-ld","textfield-trailing":"textfield-module_textfield-trailing__Hj2jX","leadingIcon":"textfield-module_leadingIcon__u-GJ6","trailingIcon":"textfield-module_trailingIcon__q-49S"};
|
|
28108
28103
|
|
|
28109
28104
|
const textfield = cva(styles$5.textfield, {
|
|
28110
28105
|
variants: {
|
|
@@ -28149,24 +28144,105 @@ var dayjs_min = {exports: {}};
|
|
|
28149
28144
|
var dayjs_minExports = dayjs_min.exports;
|
|
28150
28145
|
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
|
|
28151
28146
|
|
|
28152
|
-
|
|
28147
|
+
var customParseFormat$1 = {exports: {}};
|
|
28148
|
+
|
|
28149
|
+
(function (module, exports) {
|
|
28150
|
+
!function(e,t){module.exports=t();}(commonjsGlobal,(function(){var e={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"},t=/(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|YYYY|YY?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g,n=/\d\d/,r=/\d\d?/,i=/\d*[^-_:/,()\s\d]+/,o={},s=function(e){return (e=+e)+(e>68?1900:2e3)};var a=function(e){return function(t){this[e]=+t;}},f=[/[+-]\d\d:?(\d\d)?|Z/,function(e){(this.zone||(this.zone={})).offset=function(e){if(!e)return 0;if("Z"===e)return 0;var t=e.match(/([+-]|\d\d)/g),n=60*t[1]+(+t[2]||0);return 0===n?0:"+"===t[0]?-n:n}(e);}],h=function(e){var t=o[e];return t&&(t.indexOf?t:t.s.concat(t.f))},u=function(e,t){var n,r=o.meridiem;if(r){for(var i=1;i<=24;i+=1)if(e.indexOf(r(i,0,t))>-1){n=i>12;break}}else n=e===(t?"pm":"PM");return n},d={A:[i,function(e){this.afternoon=u(e,!1);}],a:[i,function(e){this.afternoon=u(e,!0);}],S:[/\d/,function(e){this.milliseconds=100*+e;}],SS:[n,function(e){this.milliseconds=10*+e;}],SSS:[/\d{3}/,function(e){this.milliseconds=+e;}],s:[r,a("seconds")],ss:[r,a("seconds")],m:[r,a("minutes")],mm:[r,a("minutes")],H:[r,a("hours")],h:[r,a("hours")],HH:[r,a("hours")],hh:[r,a("hours")],D:[r,a("day")],DD:[n,a("day")],Do:[i,function(e){var t=o.ordinal,n=e.match(/\d+/);if(this.day=n[0],t)for(var r=1;r<=31;r+=1)t(r).replace(/\[|\]/g,"")===e&&(this.day=r);}],M:[r,a("month")],MM:[n,a("month")],MMM:[i,function(e){var t=h("months"),n=(h("monthsShort")||t.map((function(e){return e.slice(0,3)}))).indexOf(e)+1;if(n<1)throw new Error;this.month=n%12||n;}],MMMM:[i,function(e){var t=h("months").indexOf(e)+1;if(t<1)throw new Error;this.month=t%12||t;}],Y:[/[+-]?\d+/,a("year")],YY:[n,function(e){this.year=s(e);}],YYYY:[/\d{4}/,a("year")],Z:f,ZZ:f};function c(n){var r,i;r=n,i=o&&o.formats;for(var s=(n=r.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(t,n,r){var o=r&&r.toUpperCase();return n||i[r]||e[r]||i[o].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,n){return t||n.slice(1)}))}))).match(t),a=s.length,f=0;f<a;f+=1){var h=s[f],u=d[h],c=u&&u[0],l=u&&u[1];s[f]=l?{regex:c,parser:l}:h.replace(/^\[|\]$/g,"");}return function(e){for(var t={},n=0,r=0;n<a;n+=1){var i=s[n];if("string"==typeof i)r+=i.length;else {var o=i.regex,f=i.parser,h=e.slice(r),u=o.exec(h)[0];f.call(t,u),e=e.replace(u,"");}}return function(e){var t=e.afternoon;if(void 0!==t){var n=e.hours;t?n<12&&(e.hours+=12):12===n&&(e.hours=0),delete e.afternoon;}}(t),t}}return function(e,t,n){n.p.customParseFormat=!0,e&&e.parseTwoDigitYear&&(s=e.parseTwoDigitYear);var r=t.prototype,i=r.parse;r.parse=function(e){var t=e.date,r=e.utc,s=e.args;this.$u=r;var a=s[1];if("string"==typeof a){var f=!0===s[2],h=!0===s[3],u=f||h,d=s[2];h&&(d=s[2]),o=this.$locale(),!f&&d&&(o=n.Ls[d]),this.$d=function(e,t,n){try{if(["x","X"].indexOf(t)>-1)return new Date(("X"===t?1e3:1)*e);var r=c(t)(e),i=r.year,o=r.month,s=r.day,a=r.hours,f=r.minutes,h=r.seconds,u=r.milliseconds,d=r.zone,l=new Date,m=s||(i||o?1:l.getDate()),M=i||l.getFullYear(),Y=0;i&&!o||(Y=o>0?o-1:l.getMonth());var p=a||0,v=f||0,D=h||0,g=u||0;return d?new Date(Date.UTC(M,Y,m,p,v,D,g+60*d.offset*1e3)):n?new Date(Date.UTC(M,Y,m,p,v,D,g)):new Date(M,Y,m,p,v,D,g)}catch(e){return new Date("")}}(t,a,r),this.init(),d&&!0!==d&&(this.$L=this.locale(d).$L),u&&t!=this.format(a)&&(this.$d=new Date("")),o={};}else if(a instanceof Array)for(var l=a.length,m=1;m<=l;m+=1){s[1]=a[m-1];var M=n.apply(this,s);if(M.isValid()){this.$d=M.$d,this.$L=M.$L,this.init();break}m===l&&(this.$d=new Date(""));}else i.call(this,e);};}}));
|
|
28151
|
+
} (customParseFormat$1));
|
|
28152
|
+
|
|
28153
|
+
var customParseFormatExports = customParseFormat$1.exports;
|
|
28154
|
+
var customParseFormat = /*@__PURE__*/getDefaultExportFromCjs(customParseFormatExports);
|
|
28155
|
+
|
|
28156
|
+
dayjs.extend(customParseFormat);
|
|
28157
|
+
function DatePicker({ side = "top", dateFormat = "DD/MM/YYYY", placeholder = "DD/MM/YYYY", textFieldProps, calendarProps, value = new Date(), onSelect = () => { }, }) {
|
|
28158
|
+
const defaultDate = dayjs(value).format(dateFormat);
|
|
28153
28159
|
const [showCalendar, setShowCalendar] = React.useState(false);
|
|
28154
|
-
const
|
|
28155
|
-
const
|
|
28160
|
+
const [calendarVal, setCalendarVal] = React.useState(value);
|
|
28161
|
+
const [inputState, setInputState] = React.useState();
|
|
28162
|
+
const isDropdownOpenRef = React.useRef(false);
|
|
28163
|
+
const textFieldRef = React.useRef(null);
|
|
28164
|
+
const contentRef = React.useRef(null);
|
|
28165
|
+
const isInputFieldFocused = React.useRef(false);
|
|
28166
|
+
function isElementOutside(el) {
|
|
28167
|
+
return !isDropdownOpenRef.current && // Month and Year dropdown from Date picker
|
|
28168
|
+
!textFieldRef.current?.contains(el) && // TextField
|
|
28169
|
+
!contentRef.current?.contains(el);
|
|
28170
|
+
}
|
|
28171
|
+
const handleMouseDown = React.useCallback((event) => {
|
|
28172
|
+
const el = (event.target);
|
|
28173
|
+
if (el && isElementOutside(el))
|
|
28174
|
+
removeEventListeners();
|
|
28175
|
+
}, []);
|
|
28176
|
+
function registerEventListeners() {
|
|
28177
|
+
isInputFieldFocused.current = true;
|
|
28178
|
+
document.addEventListener('mouseup', handleMouseDown, true);
|
|
28179
|
+
}
|
|
28180
|
+
function removeEventListeners() {
|
|
28181
|
+
isInputFieldFocused.current = false;
|
|
28182
|
+
setShowCalendar(false);
|
|
28183
|
+
const updatedVal = dayjs(calendarVal).format(dateFormat);
|
|
28184
|
+
if (textFieldRef.current)
|
|
28185
|
+
textFieldRef.current.value = updatedVal;
|
|
28186
|
+
if (inputState === undefined)
|
|
28187
|
+
onSelect(dayjs(updatedVal).toDate());
|
|
28188
|
+
document.removeEventListener('mouseup', handleMouseDown);
|
|
28189
|
+
}
|
|
28156
28190
|
const handleSelect = (day) => {
|
|
28157
28191
|
onSelect(day);
|
|
28158
|
-
|
|
28192
|
+
setCalendarVal(day);
|
|
28193
|
+
setInputState(undefined);
|
|
28194
|
+
removeEventListeners();
|
|
28159
28195
|
};
|
|
28160
28196
|
function onDropdownOpen() {
|
|
28161
|
-
|
|
28197
|
+
isDropdownOpenRef.current = true;
|
|
28162
28198
|
}
|
|
28163
28199
|
function onOpenChange(open) {
|
|
28164
|
-
if (!
|
|
28200
|
+
if (!isDropdownOpenRef.current && !(isInputFieldFocused.current && showCalendar)) {
|
|
28165
28201
|
setShowCalendar(Boolean(open));
|
|
28166
28202
|
}
|
|
28167
|
-
|
|
28203
|
+
isDropdownOpenRef.current = false;
|
|
28204
|
+
}
|
|
28205
|
+
function handleInputFocus() {
|
|
28206
|
+
if (isInputFieldFocused.current)
|
|
28207
|
+
return;
|
|
28208
|
+
if (!showCalendar)
|
|
28209
|
+
setShowCalendar(true);
|
|
28210
|
+
}
|
|
28211
|
+
function handleInputBlur(event) {
|
|
28212
|
+
if (isInputFieldFocused.current) {
|
|
28213
|
+
const el = event.relatedTarget;
|
|
28214
|
+
if (el && isElementOutside(el))
|
|
28215
|
+
removeEventListeners();
|
|
28216
|
+
}
|
|
28217
|
+
else {
|
|
28218
|
+
registerEventListeners();
|
|
28219
|
+
setTimeout(() => textFieldRef.current?.focus());
|
|
28220
|
+
}
|
|
28221
|
+
}
|
|
28222
|
+
function handleKeyUp(event) {
|
|
28223
|
+
if (event.code === 'Enter' && textFieldRef.current) {
|
|
28224
|
+
textFieldRef.current.blur();
|
|
28225
|
+
removeEventListeners();
|
|
28226
|
+
}
|
|
28168
28227
|
}
|
|
28169
|
-
|
|
28228
|
+
function handleInputChange(event) {
|
|
28229
|
+
const { value } = event.target;
|
|
28230
|
+
const format = value.includes("/") ? "DD/MM/YYYY" : value.includes("-") ? "DD-MM-YYYY" : undefined;
|
|
28231
|
+
const date = dayjs(value, format);
|
|
28232
|
+
const isValidDate = date.isValid();
|
|
28233
|
+
const isAfter = calendarProps?.startMonth !== undefined ? dayjs(date).isSameOrAfter(calendarProps.startMonth) : true;
|
|
28234
|
+
const isBefore = calendarProps?.endMonth !== undefined ? dayjs(date).isSameOrBefore(calendarProps.endMonth) : true;
|
|
28235
|
+
const isValid = isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());
|
|
28236
|
+
if (isValid) {
|
|
28237
|
+
setCalendarVal(date.toDate());
|
|
28238
|
+
if (inputState === 'invalid')
|
|
28239
|
+
setInputState(undefined);
|
|
28240
|
+
}
|
|
28241
|
+
else {
|
|
28242
|
+
setInputState('invalid');
|
|
28243
|
+
}
|
|
28244
|
+
}
|
|
28245
|
+
return (jsxRuntimeExports.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports.jsx(TextField, { ref: textFieldRef, defaultValue: defaultDate, trailing: jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: jsxRuntimeExports.jsx(CalendarIcon, {}) }), onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, state: inputState, placeholder: placeholder, onKeyUp: handleKeyUp, ...textFieldProps }), jsxRuntimeExports.jsx(Popover.Content, { side: side, className: styles$6.calendarPopover, ref: contentRef, children: jsxRuntimeExports.jsx(Calendar, { required: true, ...calendarProps, onDropdownOpen: onDropdownOpen, mode: "single", selected: calendarVal, month: calendarVal, onSelect: handleSelect, onMonthChange: setCalendarVal }) })] }));
|
|
28170
28246
|
}
|
|
28171
28247
|
|
|
28172
28248
|
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps, calendarProps, onSelect = () => { }, value = {
|
|
@@ -32148,6 +32224,31 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
|
|
|
32148
32224
|
null;
|
|
32149
32225
|
const [tableState, setTableState] = React.useState({});
|
|
32150
32226
|
const observerRef = React.useRef(null);
|
|
32227
|
+
const lastRowRef = React.useRef(null);
|
|
32228
|
+
React.useEffect(() => {
|
|
32229
|
+
if (!onLoadMore)
|
|
32230
|
+
return;
|
|
32231
|
+
const observer = new IntersectionObserver((entries) => {
|
|
32232
|
+
if (entries[0].isIntersecting && !isLoading) {
|
|
32233
|
+
onLoadMore();
|
|
32234
|
+
}
|
|
32235
|
+
}, { threshold: 0.1 });
|
|
32236
|
+
observerRef.current = observer;
|
|
32237
|
+
return () => observer.disconnect();
|
|
32238
|
+
}, [onLoadMore]);
|
|
32239
|
+
React.useEffect(() => {
|
|
32240
|
+
const observer = observerRef.current;
|
|
32241
|
+
const lastRow = lastRowRef.current;
|
|
32242
|
+
if (observer && lastRow) {
|
|
32243
|
+
observer.disconnect();
|
|
32244
|
+
observer.observe(lastRow);
|
|
32245
|
+
}
|
|
32246
|
+
return () => {
|
|
32247
|
+
if (observer && lastRow) {
|
|
32248
|
+
observer.unobserve(lastRow);
|
|
32249
|
+
}
|
|
32250
|
+
};
|
|
32251
|
+
}, [isLoading]);
|
|
32151
32252
|
const getLoader = (loaderRow, columns) => ([...new Array(loaderRow)].map((_, rowIndex) => (jsxRuntimeExports.jsx(Table.Row, { children: columns.map((_, colIndex) => (jsxRuntimeExports.jsx(Table.Cell, { children: jsxRuntimeExports.jsx(Skeleton, { containerClassName: styles$4.flex1, highlightColor: "var(--background-base)", baseColor: "var(--background-base-hover)" }) }, `col_${colIndex}`))) }, `row_${rowIndex}`))));
|
|
32152
32253
|
const { filteredColumns, addFilterColumn, removeFilterColumn, resetColumns } = useTableColumn();
|
|
32153
32254
|
const columnWithCustomFilter = React.useMemo(() => columns.map((col) => {
|
|
@@ -32187,25 +32288,6 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
|
|
|
32187
32288
|
initialState,
|
|
32188
32289
|
state: tableState,
|
|
32189
32290
|
});
|
|
32190
|
-
const lastRowRef = React.useCallback((node) => {
|
|
32191
|
-
if (isLoading)
|
|
32192
|
-
return;
|
|
32193
|
-
if (observerRef.current)
|
|
32194
|
-
observerRef.current.disconnect();
|
|
32195
|
-
observerRef.current = new IntersectionObserver((entries) => {
|
|
32196
|
-
if (entries[0].isIntersecting && onLoadMore) {
|
|
32197
|
-
onLoadMore();
|
|
32198
|
-
}
|
|
32199
|
-
});
|
|
32200
|
-
if (node)
|
|
32201
|
-
observerRef.current.observe(node);
|
|
32202
|
-
}, [isLoading, onLoadMore]);
|
|
32203
|
-
React.useEffect(() => {
|
|
32204
|
-
return () => {
|
|
32205
|
-
if (observerRef.current)
|
|
32206
|
-
observerRef.current.disconnect();
|
|
32207
|
-
};
|
|
32208
|
-
}, []);
|
|
32209
32291
|
const tableStyle = {
|
|
32210
32292
|
...(table.getRowModel().rows?.length
|
|
32211
32293
|
? { width: "100%" }
|
|
@@ -32244,7 +32326,8 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
|
|
|
32244
32326
|
? lastRowRef
|
|
32245
32327
|
: null, children: row.getVisibleCells().map((cell, index) => (jsxRuntimeExports.jsx(Table.Cell, { style: {
|
|
32246
32328
|
...(cell.column.columnDef?.meta?.style ?? {}),
|
|
32247
|
-
}, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `${cell.id}_${index}`))) }, row.id)))) : (
|
|
32329
|
+
}, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `${cell.id}_${index}`))) }, row.id)))) : (!isLoading ?
|
|
32330
|
+
jsxRuntimeExports.jsx(Table.Row, { children: jsxRuntimeExports.jsx(Table.Cell, { colSpan: columns.length, children: emptyState || "No results." }) }) : jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {})), isLoading && getLoader(loaderRow, columns)] })] }), detail] })] }), footer] }) }));
|
|
32248
32331
|
}
|
|
32249
32332
|
const DataTable = Object.assign(DataTableRoot, {
|
|
32250
32333
|
Toolbar: DataTableToolbar,
|