@mtes-mct/monitor-ui 17.2.1 → 18.0.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/CHANGELOG.md +14 -0
- package/fields/Checkbox.d.ts +5 -1
- package/fields/Checkbox.d.ts.map +1 -1
- package/index.js +188 -65
- package/package.json +1 -1
- package/tables/SimpleTable/CellLoader.d.ts +2 -0
- package/tables/SimpleTable/CellLoader.d.ts.map +1 -0
- package/tables/SimpleTable/Td.d.ts +6 -0
- package/tables/SimpleTable/Td.d.ts.map +1 -0
- package/tables/{SimpleTable.d.ts → SimpleTable/index.d.ts} +9 -4
- package/tables/SimpleTable/index.d.ts.map +1 -0
- package/tables/TableWithSelectableRows/RowCheckbox.d.ts +5 -8
- package/tables/TableWithSelectableRows/RowCheckbox.d.ts.map +1 -1
- package/tables/TableWithSelectableRows/index.d.ts +11 -9
- package/tables/TableWithSelectableRows/index.d.ts.map +1 -1
- package/tables/SimpleTable.d.ts.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [17.2.2](https://github.com/MTES-MCT/monitor-ui/compare/v17.2.1...v17.2.2) (2024-05-21)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **elements:** fix IconButton border ([f55eb2c](https://github.com/MTES-MCT/monitor-ui/commit/f55eb2ca036cd0c1c06b78eaaacfc1983e48ffb3))
|
|
7
|
+
|
|
8
|
+
## [17.2.1](https://github.com/MTES-MCT/monitor-ui/compare/v17.2.0...v17.2.1) (2024-05-21)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* **types:** fix AnyEnum key type ([de3f0cc](https://github.com/MTES-MCT/monitor-ui/commit/de3f0cce9a5228db0e1c48a7d6a7f4ec662b7ab0))
|
|
14
|
+
|
|
1
15
|
## [17.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v17.1.1...v17.2.0) (2024-05-21)
|
|
2
16
|
|
|
3
17
|
|
package/fields/Checkbox.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type CSSProperties } from 'react';
|
|
2
2
|
import type { CheckboxProps as RsuiteCheckboxProps } from 'rsuite';
|
|
3
|
+
import type { ValueType } from 'rsuite/esm/Checkbox';
|
|
3
4
|
import type { Promisable } from 'type-fest';
|
|
4
5
|
export type CheckboxProps = Omit<RsuiteCheckboxProps, 'as' | 'checked' | 'defaultChecked' | 'id' | 'onChange'> & {
|
|
5
6
|
checked?: boolean | undefined;
|
|
@@ -25,5 +26,8 @@ export type CheckboxProps = Omit<RsuiteCheckboxProps, 'as' | 'checked' | 'defaul
|
|
|
25
26
|
readOnly?: boolean | undefined;
|
|
26
27
|
style?: CSSProperties | undefined;
|
|
27
28
|
};
|
|
28
|
-
export declare function Checkbox({ checked, className, disabled, error, hasError, isErrorMessageHidden, isLight, isTransparent, isUndefinedWhenDisabled, label, name, onChange, readOnly, style, ...originalProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export declare function Checkbox({ checked, className, disabled, error, hasError, indeterminate, isErrorMessageHidden, isLight, isTransparent, isUndefinedWhenDisabled, label, name, onChange, readOnly, style, ...originalProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare const StyledRsuiteCheckbox: import("styled-components").StyledComponent<import("rsuite/esm/@types/common").RsRefForwardingComponent<"div", RsuiteCheckboxProps<ValueType>>, import("styled-components").DefaultTheme, import("./shared/types").CommonFieldStyleProps & {
|
|
31
|
+
$isChecked: boolean;
|
|
32
|
+
}, never>;
|
|
29
33
|
//# sourceMappingURL=Checkbox.d.ts.map
|
package/fields/Checkbox.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/fields/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AAWhE,OAAO,KAAK,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/fields/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AAWhE,OAAO,KAAK,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,QAAQ,CAAA;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,SAAS,GAAG,gBAAgB,GAAG,IAAI,GAAG,UAAU,CAAC,GAAG;IAC/G,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1C,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,uBAAuB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,GAAG,SAAS,KAAK,UAAU,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;CAClC,CAAA;AACD,wBAAgB,QAAQ,CAAC,EACvB,OAAe,EACf,SAAS,EACT,QAAgB,EAChB,KAAK,EACL,QAAgB,EAEhB,aAAqB,EACrB,oBAA4B,EAC5B,OAAe,EACf,aAAqB,EACrB,uBAA+B,EAC/B,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAgB,EAChB,KAAK,EACL,GAAG,aAAa,EACjB,EAAE,aAAa,2CA4Cf;AAED,eAAO,MAAM,oBAAoB;;SAmGhC,CAAA"}
|
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css } from 'styled-components';
|
|
1
|
+
import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css, keyframes } from 'styled-components';
|
|
2
2
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import * as t from 'react';
|
|
4
4
|
import t__default, { useMemo, PureComponent, forwardRef, useEffect, useReducer, useState, useRef, isValidElement, cloneElement, useLayoutEffect, useCallback, useImperativeHandle, createContext, useContext } from 'react';
|
|
@@ -53373,7 +53373,8 @@ const PADDING$1 = {
|
|
|
53373
53373
|
// We can't use $-prefixed props here for some reason (maybe because the `as` prop exclude them?).
|
|
53374
53374
|
const StyledButton = styled.button`
|
|
53375
53375
|
align-items: center;
|
|
53376
|
-
border: solid
|
|
53376
|
+
border-style: solid;
|
|
53377
|
+
border-width: ${(p)=>p.isCompact ? 0 : 1}px;
|
|
53377
53378
|
display: flex;
|
|
53378
53379
|
justify-content: center;
|
|
53379
53380
|
padding: ${(p)=>p.isCompact ? 0 : PADDING$1[p.size]};
|
|
@@ -54379,7 +54380,8 @@ function useFieldUndefineEffect(disabled, onChange, onDisable) {
|
|
|
54379
54380
|
return cleanText.length > 0 ? cleanText : undefined;
|
|
54380
54381
|
}
|
|
54381
54382
|
|
|
54382
|
-
function Checkbox({ checked = false, className, disabled = false, error, hasError = false,
|
|
54383
|
+
function Checkbox({ checked = false, className, disabled = false, error, hasError = false, // eslint-disable-next-line @typescript-eslint/naming-convention
|
|
54384
|
+
indeterminate = false, isErrorMessageHidden = false, isLight = false, isTransparent = false, isUndefinedWhenDisabled = false, label, name, onChange, readOnly = false, style, ...originalProps }) {
|
|
54383
54385
|
const controlledClassName = useMemo(()=>classnames('Field-Checkbox', className), [
|
|
54384
54386
|
className
|
|
54385
54387
|
]);
|
|
@@ -54409,7 +54411,7 @@ function Checkbox({ checked = false, className, disabled = false, error, hasErro
|
|
|
54409
54411
|
children: [
|
|
54410
54412
|
/*#__PURE__*/ jsx(StyledRsuiteCheckbox, {
|
|
54411
54413
|
$hasError: hasControlledError,
|
|
54412
|
-
$isChecked: checked,
|
|
54414
|
+
$isChecked: checked || indeterminate,
|
|
54413
54415
|
$isDisabled: disabled,
|
|
54414
54416
|
$isLight: isLight,
|
|
54415
54417
|
$isReadOnly: readOnly,
|
|
@@ -54417,6 +54419,7 @@ function Checkbox({ checked = false, className, disabled = false, error, hasErro
|
|
|
54417
54419
|
checked: checked,
|
|
54418
54420
|
disabled: disabled,
|
|
54419
54421
|
id: name,
|
|
54422
|
+
indeterminate: indeterminate,
|
|
54420
54423
|
name: name,
|
|
54421
54424
|
onChange: handleChange,
|
|
54422
54425
|
readOnly: readOnly,
|
|
@@ -54435,7 +54438,8 @@ const StyledRsuiteCheckbox = styled(Checkbox$1)`
|
|
|
54435
54438
|
user-select: none;
|
|
54436
54439
|
}
|
|
54437
54440
|
|
|
54438
|
-
> .rs-checkbox-checker
|
|
54441
|
+
> .rs-checkbox-checker,
|
|
54442
|
+
&.rs-checkbox-indeterminate > .rs-checkbox-checker {
|
|
54439
54443
|
min-height: unset;
|
|
54440
54444
|
padding: 0 0 0 24px;
|
|
54441
54445
|
|
|
@@ -76260,33 +76264,76 @@ function useReactTable(options) {
|
|
|
76260
76264
|
return tableRef.current;
|
|
76261
76265
|
}
|
|
76262
76266
|
|
|
76267
|
+
const cellLoaderAnimation = keyframes`
|
|
76268
|
+
from {
|
|
76269
|
+
left: -100%;
|
|
76270
|
+
}
|
|
76271
|
+
|
|
76272
|
+
to {
|
|
76273
|
+
left: 100%;
|
|
76274
|
+
}
|
|
76275
|
+
`;
|
|
76276
|
+
const CellLoader = styled.div`
|
|
76277
|
+
background: ${(p)=>p.theme.color.gainsboro};
|
|
76278
|
+
height: 22px;
|
|
76279
|
+
overflow: hidden;
|
|
76280
|
+
position: relative;
|
|
76281
|
+
|
|
76282
|
+
&:before {
|
|
76283
|
+
animation: ${cellLoaderAnimation} 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
76284
|
+
background: linear-gradient(to right, transparent 0%, ${(p)=>p.theme.color.white} 50%, transparent 100%);
|
|
76285
|
+
content: '';
|
|
76286
|
+
display: block;
|
|
76287
|
+
height: 100%;
|
|
76288
|
+
left: -100%;
|
|
76289
|
+
position: absolute;
|
|
76290
|
+
top: 0;
|
|
76291
|
+
width: 100%;
|
|
76292
|
+
}
|
|
76293
|
+
`;
|
|
76294
|
+
|
|
76295
|
+
const Td$2 = styled.td.attrs((props)=>({
|
|
76296
|
+
children: props.$isLoading ? /*#__PURE__*/ jsx(CellLoader, {}) : props.children
|
|
76297
|
+
}))`
|
|
76298
|
+
border-bottom: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76299
|
+
border-right: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76300
|
+
color: ${(p)=>p.theme.color.gunMetal};
|
|
76301
|
+
font-size: 13px;
|
|
76302
|
+
font-weight: 500;
|
|
76303
|
+
line-height: 22px;
|
|
76304
|
+
max-width: 0;
|
|
76305
|
+
overflow: hidden;
|
|
76306
|
+
padding: 9px 10px;
|
|
76307
|
+
text-align: ${(p)=>p.$isCenter ? 'center' : 'left'};
|
|
76308
|
+
text-overflow: ellipsis;
|
|
76309
|
+
white-space: nowrap;
|
|
76310
|
+
|
|
76311
|
+
/**
|
|
76312
|
+
Dirty hack to prevent 'display: inline-flex;' from breaking row height.
|
|
76313
|
+
This may be fixable by internal alignment cleanup in <Tag /> component.
|
|
76314
|
+
*/
|
|
76315
|
+
> .Element-Tag {
|
|
76316
|
+
align-self: unset;
|
|
76317
|
+
vertical-align: bottom;
|
|
76318
|
+
}
|
|
76319
|
+
`;
|
|
76320
|
+
|
|
76263
76321
|
const Table$1 = styled.table.attrs((props)=>({
|
|
76264
76322
|
className: classnames('Table-SimpleTable', props.className)
|
|
76265
76323
|
}))`
|
|
76266
|
-
width: 100%;
|
|
76267
|
-
table-layout: auto;
|
|
76268
|
-
overflow: auto;
|
|
76269
76324
|
border-collapse: separate;
|
|
76325
|
+
overflow: auto;
|
|
76326
|
+
table-layout: auto;
|
|
76270
76327
|
`;
|
|
76271
76328
|
const Head$1 = styled.thead`
|
|
76272
76329
|
position: sticky;
|
|
76273
76330
|
top: 0;
|
|
76274
76331
|
z-index: 1;
|
|
76275
76332
|
|
|
76276
|
-
th:first-child {
|
|
76333
|
+
> th:first-child {
|
|
76277
76334
|
border-left: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76278
76335
|
}
|
|
76279
76336
|
`;
|
|
76280
|
-
const SortContainer$1 = styled.div`
|
|
76281
|
-
display: flex;
|
|
76282
|
-
justify-content: space-between;
|
|
76283
|
-
align-items: center;
|
|
76284
|
-
cursor: default;
|
|
76285
|
-
|
|
76286
|
-
&.cursor-pointer {
|
|
76287
|
-
cursor: pointer;
|
|
76288
|
-
}
|
|
76289
|
-
`;
|
|
76290
76337
|
const Th$2 = styled.th`
|
|
76291
76338
|
background-color: ${(p)=>p.theme.color.gainsboro};
|
|
76292
76339
|
border-top: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
@@ -76295,35 +76342,36 @@ const Th$2 = styled.th`
|
|
|
76295
76342
|
color: ${(p)=>p.theme.color.slateGray};
|
|
76296
76343
|
font-size: 13px;
|
|
76297
76344
|
font-weight: 500;
|
|
76298
|
-
|
|
76345
|
+
line-height: 22px;
|
|
76346
|
+
padding: 9px 10px;
|
|
76299
76347
|
overflow: hidden;
|
|
76300
76348
|
text-overflow: ellipsis;
|
|
76349
|
+
${(p)=>!!p.$width && `width: ${p.$width}px;`}
|
|
76301
76350
|
white-space: nowrap;
|
|
76302
76351
|
`;
|
|
76352
|
+
const SortContainer$1 = styled.div`
|
|
76353
|
+
align-items: center;
|
|
76354
|
+
cursor: default;
|
|
76355
|
+
display: flex;
|
|
76356
|
+
justify-content: space-between;
|
|
76357
|
+
|
|
76358
|
+
&.cursor-pointer {
|
|
76359
|
+
cursor: pointer;
|
|
76360
|
+
}
|
|
76361
|
+
`;
|
|
76303
76362
|
const BodyTr$1 = styled.tr`
|
|
76304
|
-
|
|
76363
|
+
&:hover {
|
|
76305
76364
|
> td {
|
|
76306
76365
|
background-color: ${(p)=>p.theme.color.blueYonder25};
|
|
76307
76366
|
}
|
|
76308
76367
|
}
|
|
76309
|
-
td:first-child {
|
|
76368
|
+
> td:first-child {
|
|
76310
76369
|
border-left: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76311
76370
|
}
|
|
76312
76371
|
`;
|
|
76313
|
-
const Td$2 = styled.td`
|
|
76314
|
-
font-size: 13px;
|
|
76315
|
-
font-weight: 500;
|
|
76316
|
-
color: ${(p)=>p.theme.color.gunMetal};
|
|
76317
|
-
text-align: ${(p)=>p.$isCenter ? 'center' : 'left'};
|
|
76318
|
-
border-bottom: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76319
|
-
border-right: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76320
|
-
overflow: hidden;
|
|
76321
|
-
padding: 10px;
|
|
76322
|
-
text-overflow: ellipsis;
|
|
76323
|
-
white-space: nowrap;
|
|
76324
|
-
`;
|
|
76325
76372
|
const SimpleTable = {
|
|
76326
76373
|
BodyTr: BodyTr$1,
|
|
76374
|
+
CellLoader,
|
|
76327
76375
|
Head: Head$1,
|
|
76328
76376
|
SortContainer: SortContainer$1,
|
|
76329
76377
|
Table: Table$1,
|
|
@@ -76430,60 +76478,135 @@ function DataTable({ columns, data, initialSorting }) {
|
|
|
76430
76478
|
});
|
|
76431
76479
|
}
|
|
76432
76480
|
|
|
76433
|
-
function RowCheckbox({
|
|
76434
|
-
|
|
76435
|
-
|
|
76436
|
-
|
|
76437
|
-
|
|
76438
|
-
|
|
76439
|
-
|
|
76440
|
-
|
|
76481
|
+
function RowCheckbox({ onChange, ...nativeProps }) {
|
|
76482
|
+
const handleOnChange = useCallback((_value, _checked, event)=>{
|
|
76483
|
+
if (onChange) {
|
|
76484
|
+
onChange(event);
|
|
76485
|
+
}
|
|
76486
|
+
}, [
|
|
76487
|
+
onChange
|
|
76488
|
+
]);
|
|
76489
|
+
return /*#__PURE__*/ jsx(RestyledRsuiteCheckbox, {
|
|
76490
|
+
$isChecked: nativeProps.checked || nativeProps.indeterminate,
|
|
76491
|
+
$isDisabled: nativeProps.disabled,
|
|
76492
|
+
$isReadOnly: nativeProps.readOnly,
|
|
76493
|
+
...nativeProps,
|
|
76494
|
+
onChange: handleOnChange,
|
|
76441
76495
|
onClick: stopMouseEventPropagation
|
|
76442
76496
|
});
|
|
76443
76497
|
}
|
|
76498
|
+
const RestyledRsuiteCheckbox = styled(StyledRsuiteCheckbox)`
|
|
76499
|
+
vertical-align: top;
|
|
76500
|
+
|
|
76501
|
+
> .rs-checkbox-checker,
|
|
76502
|
+
&.rs-checkbox-indeterminate > .rs-checkbox-checker {
|
|
76503
|
+
padding: 0;
|
|
76504
|
+
|
|
76505
|
+
> label {
|
|
76506
|
+
> .rs-checkbox-wrapper {
|
|
76507
|
+
bottom: 0;
|
|
76508
|
+
top: 3px;
|
|
76509
|
+
|
|
76510
|
+
&:before {
|
|
76511
|
+
}
|
|
76512
|
+
&:after {
|
|
76513
|
+
bottom: 0;
|
|
76514
|
+
left: 0;
|
|
76515
|
+
right: 0;
|
|
76516
|
+
top: 0;
|
|
76517
|
+
}
|
|
76518
|
+
|
|
76519
|
+
> .rs-checkbox-inner {
|
|
76520
|
+
&:before {
|
|
76521
|
+
}
|
|
76522
|
+
|
|
76523
|
+
/* Checkmark */
|
|
76524
|
+
&:after {
|
|
76525
|
+
}
|
|
76526
|
+
}
|
|
76527
|
+
}
|
|
76528
|
+
}
|
|
76529
|
+
}
|
|
76530
|
+
`;
|
|
76444
76531
|
|
|
76445
76532
|
const Table = styled(SimpleTable.Table)`
|
|
76446
76533
|
border-collapse: separate;
|
|
76447
76534
|
border-spacing: 0 5px;
|
|
76448
76535
|
table-layout: fixed;
|
|
76536
|
+
|
|
76537
|
+
${(p)=>!!p.$withRowCheckbox && `
|
|
76538
|
+
> thead > tr > th:first-child {
|
|
76539
|
+
padding: 0 0 0 8px;
|
|
76540
|
+
|
|
76541
|
+
> .rs-checkbox {
|
|
76542
|
+
> .rs-checkbox-checker {
|
|
76543
|
+
> label {
|
|
76544
|
+
> .rs-checkbox-wrapper {
|
|
76545
|
+
left: -8px;
|
|
76546
|
+
}
|
|
76547
|
+
}
|
|
76548
|
+
}
|
|
76549
|
+
}
|
|
76550
|
+
}
|
|
76551
|
+
|
|
76552
|
+
> tbody > tr > td:first-child {
|
|
76553
|
+
padding: 0 0 0 8px;
|
|
76554
|
+
}
|
|
76555
|
+
`}
|
|
76449
76556
|
`;
|
|
76450
76557
|
const Head = styled(SimpleTable.Head)`
|
|
76451
|
-
|
|
76452
|
-
|
|
76558
|
+
> tr {
|
|
76559
|
+
> th {
|
|
76560
|
+
border-bottom: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76561
|
+
border-right: none;
|
|
76562
|
+
border-top: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76563
|
+
|
|
76564
|
+
&:first-child {
|
|
76565
|
+
border-left: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76566
|
+
}
|
|
76567
|
+
|
|
76568
|
+
&:last-child {
|
|
76569
|
+
border-right: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76570
|
+
}
|
|
76571
|
+
}
|
|
76453
76572
|
}
|
|
76454
76573
|
`;
|
|
76455
|
-
const SortContainer = styled(SimpleTable.SortContainer)`
|
|
76456
|
-
justify-content: start;
|
|
76457
|
-
gap: 8px;
|
|
76458
|
-
`;
|
|
76459
76574
|
const Th = styled(SimpleTable.Th)`
|
|
76460
76575
|
background-color: ${(p)=>p.theme.color.white};
|
|
76461
|
-
|
|
76462
|
-
|
|
76463
|
-
|
|
76464
|
-
|
|
76465
|
-
|
|
76576
|
+
line-height: 22px;
|
|
76577
|
+
padding: 9px 16px;
|
|
76578
|
+
`;
|
|
76579
|
+
const SortContainer = styled(SimpleTable.SortContainer)`
|
|
76580
|
+
gap: 8px;
|
|
76581
|
+
justify-content: start;
|
|
76466
76582
|
`;
|
|
76467
76583
|
const BodyTr = styled(SimpleTable.BodyTr)`
|
|
76468
|
-
td
|
|
76469
|
-
border-
|
|
76470
|
-
|
|
76471
|
-
|
|
76472
|
-
|
|
76473
|
-
|
|
76584
|
+
> td {
|
|
76585
|
+
border-bottom: 1px solid ${(p)=>p.$isHighlighted ? p.theme.color.blueGray : p.theme.color.lightGray};
|
|
76586
|
+
border-right: none;
|
|
76587
|
+
border-top: 1px solid ${(p)=>p.$isHighlighted ? p.theme.color.blueGray : p.theme.color.lightGray};
|
|
76588
|
+
${(p)=>!!p.$isHighlighted && `box-shadow: 0 -1px 0 ${p.theme.color.blueGray} inset, 0 1px 0 ${p.theme.color.blueGray} inset;`}
|
|
76589
|
+
|
|
76590
|
+
&:first-child {
|
|
76591
|
+
border-left: 1px solid ${(p)=>p.$isHighlighted ? p.theme.color.blueGray : p.theme.color.lightGray};
|
|
76592
|
+
${(p)=>!!p.$isHighlighted && `box-shadow: 0 -1px 0 ${p.theme.color.blueGray} inset, 0 1px 0 ${p.theme.color.blueGray} inset, 1px 0 0 ${p.theme.color.blueGray} inset;`}
|
|
76593
|
+
}
|
|
76594
|
+
|
|
76595
|
+
&:last-child {
|
|
76596
|
+
border-right: 1px solid ${(p)=>p.$isHighlighted ? p.theme.color.blueGray : p.theme.color.lightGray};
|
|
76597
|
+
${(p)=>!!p.$isHighlighted && `box-shadow: 0 -1px 0 ${p.theme.color.blueGray} inset, 0 1px 0 ${p.theme.color.blueGray} inset, -1px 0 0 ${p.theme.color.blueGray} inset;`}
|
|
76598
|
+
overflow: visible;
|
|
76599
|
+
}
|
|
76474
76600
|
}
|
|
76475
76601
|
`;
|
|
76476
76602
|
const Td = styled(SimpleTable.Td)`
|
|
76477
76603
|
background-color: ${(p)=>p.theme.color.cultured};
|
|
76478
|
-
|
|
76479
|
-
|
|
76480
|
-
border-right: none;
|
|
76481
|
-
padding: 4px 16px;
|
|
76482
|
-
border-right: ${(p)=>p.$hasRightBorder ? `1px solid ${p.theme.color.lightGray}` : ''};
|
|
76483
|
-
width: ${(p)=>p.$width}px;
|
|
76604
|
+
${(p)=>!!p.$hasRightBorder && `border-right: 1px solid ${p.theme.color.lightGray};`}
|
|
76605
|
+
padding: 9px 16px;
|
|
76484
76606
|
`;
|
|
76485
76607
|
const TableWithSelectableRows = {
|
|
76486
76608
|
BodyTr,
|
|
76609
|
+
CellLoader: SimpleTable.CellLoader,
|
|
76487
76610
|
Head,
|
|
76488
76611
|
RowCheckbox,
|
|
76489
76612
|
SortContainer,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mtes-mct/monitor-ui",
|
|
3
3
|
"description": "Common React components, hooks, utilities and CSS stylesheets for MonitorFish, MonitorEnv and RapportNav.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "18.0.0",
|
|
5
5
|
"license": "AGPL-3.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"engines": {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CellLoader.d.ts","sourceRoot":"","sources":["../../../src/tables/SimpleTable/CellLoader.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,UAAU,yGAiBtB,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { TdHTMLAttributes } from 'react';
|
|
2
|
+
export declare const Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, TdHTMLAttributes<HTMLTableCellElement> & {
|
|
3
|
+
$isCenter?: boolean | undefined;
|
|
4
|
+
$isLoading?: boolean | undefined;
|
|
5
|
+
}, keyof TdHTMLAttributes<HTMLTableCellElement> | "$isCenter" | "$isLoading">;
|
|
6
|
+
//# sourceMappingURL=Td.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Td.d.ts","sourceRoot":"","sources":["../../../src/tables/SimpleTable/Td.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAM7C,eAAO,MAAM,EAAE;gBAHD,OAAO,GAAG,SAAS;iBAClB,OAAO,GAAG,SAAS;6EA0BjC,CAAA"}
|
|
@@ -1,11 +1,16 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
export declare const SimpleTable: {
|
|
2
3
|
BodyTr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
CellLoader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
5
|
Head: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, {}, never>;
|
|
4
6
|
SortContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
5
7
|
Table: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
-
Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {
|
|
7
|
-
$isCenter?: boolean;
|
|
8
|
+
Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, import("react").TdHTMLAttributes<HTMLTableCellElement> & {
|
|
9
|
+
$isCenter?: boolean | undefined;
|
|
10
|
+
$isLoading?: boolean | undefined;
|
|
11
|
+
}, keyof import("react").TdHTMLAttributes<HTMLTableCellElement> | "$isCenter" | "$isLoading">;
|
|
12
|
+
Th: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {
|
|
13
|
+
$width?: number | undefined;
|
|
8
14
|
}, never>;
|
|
9
|
-
Th: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {}, never>;
|
|
10
15
|
};
|
|
11
|
-
//# sourceMappingURL=
|
|
16
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tables/SimpleTable/index.tsx"],"names":[],"mappings":";AAkEA,eAAO,MAAM,WAAW;;;;;;;;;;;iBAvCb,MAAM,GAAG,SAAS;;CA+C5B,CAAA"}
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
import { type HTMLProps } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
isChecked?: boolean;
|
|
6
|
-
isIndeterminate?: boolean;
|
|
7
|
-
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
1
|
+
import { type ChangeEvent, type HTMLProps } from 'react';
|
|
2
|
+
import { type CheckboxProps as RsuiteCheckboxProps } from 'rsuite';
|
|
3
|
+
export type RowCheckboxProps = Omit<RsuiteCheckboxProps, 'onClick' | 'onChange'> & {
|
|
4
|
+
onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
8
5
|
};
|
|
9
|
-
export declare function RowCheckbox({
|
|
6
|
+
export declare function RowCheckbox({ onChange, ...nativeProps }: RowCheckboxProps & HTMLProps<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
|
|
10
7
|
//# sourceMappingURL=RowCheckbox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RowCheckbox.d.ts","sourceRoot":"","sources":["../../../src/tables/TableWithSelectableRows/RowCheckbox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RowCheckbox.d.ts","sourceRoot":"","sources":["../../../src/tables/TableWithSelectableRows/RowCheckbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,EAAE,KAAK,aAAa,IAAI,mBAAmB,EAAE,MAAM,QAAQ,CAAA;AAKlE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IAEjF,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACxE,CAAA;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,EAAE,gBAAgB,GAAG,SAAS,CAAC,gBAAgB,CAAC,2CAoBvG"}
|
|
@@ -1,22 +1,24 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { RowCheckbox } from './RowCheckbox';
|
|
2
|
-
export { RowCheckbox };
|
|
3
3
|
export declare const TableWithSelectableRows: {
|
|
4
4
|
BodyTr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {
|
|
5
5
|
$isHighlighted?: boolean;
|
|
6
6
|
}, never>;
|
|
7
|
+
CellLoader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
8
|
Head: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, {}, never>;
|
|
8
9
|
RowCheckbox: typeof RowCheckbox;
|
|
9
10
|
SortContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
10
|
-
Table: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {
|
|
11
|
-
|
|
12
|
-
$isCenter?: boolean;
|
|
13
|
-
} & {
|
|
14
|
-
$hasRightBorder: boolean;
|
|
15
|
-
$isHighlighted?: boolean;
|
|
16
|
-
$width: number;
|
|
11
|
+
Table: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {
|
|
12
|
+
$withRowCheckbox?: boolean;
|
|
17
13
|
}, never>;
|
|
14
|
+
Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, import("react").TdHTMLAttributes<HTMLTableCellElement> & {
|
|
15
|
+
$isCenter?: boolean | undefined;
|
|
16
|
+
$isLoading?: boolean | undefined;
|
|
17
|
+
} & {
|
|
18
|
+
$hasRightBorder?: boolean;
|
|
19
|
+
}, keyof import("react").TdHTMLAttributes<HTMLTableCellElement> | "$isCenter" | "$isLoading">;
|
|
18
20
|
Th: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {
|
|
19
|
-
$width
|
|
21
|
+
$width?: number | undefined;
|
|
20
22
|
}, never>;
|
|
21
23
|
};
|
|
22
24
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tables/TableWithSelectableRows/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tables/TableWithSelectableRows/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAkG3C,eAAO,MAAM,uBAAuB;;yBAnCjB,OAAO;;;;;;;2BA3DL,OAAO;;;;;;0BAuFR,OAAO;;;;;CAgB1B,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleTable.d.ts","sourceRoot":"","sources":["../../src/tables/SimpleTable.tsx"],"names":[],"mappings":"AAuEA,eAAO,MAAM,WAAW;;;;;;oBAbW,OAAO;;;CAoBzC,CAAA"}
|