@mtes-mct/monitor-ui 17.2.2 → 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 +7 -0
- package/fields/Checkbox.d.ts +5 -1
- package/fields/Checkbox.d.ts.map +1 -1
- package/index.js +186 -64
- 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,10 @@
|
|
|
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
|
+
|
|
1
8
|
## [17.2.1](https://github.com/MTES-MCT/monitor-ui/compare/v17.2.0...v17.2.1) (2024-05-21)
|
|
2
9
|
|
|
3
10
|
|
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';
|
|
@@ -54380,7 +54380,8 @@ function useFieldUndefineEffect(disabled, onChange, onDisable) {
|
|
|
54380
54380
|
return cleanText.length > 0 ? cleanText : undefined;
|
|
54381
54381
|
}
|
|
54382
54382
|
|
|
54383
|
-
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 }) {
|
|
54384
54385
|
const controlledClassName = useMemo(()=>classnames('Field-Checkbox', className), [
|
|
54385
54386
|
className
|
|
54386
54387
|
]);
|
|
@@ -54410,7 +54411,7 @@ function Checkbox({ checked = false, className, disabled = false, error, hasErro
|
|
|
54410
54411
|
children: [
|
|
54411
54412
|
/*#__PURE__*/ jsx(StyledRsuiteCheckbox, {
|
|
54412
54413
|
$hasError: hasControlledError,
|
|
54413
|
-
$isChecked: checked,
|
|
54414
|
+
$isChecked: checked || indeterminate,
|
|
54414
54415
|
$isDisabled: disabled,
|
|
54415
54416
|
$isLight: isLight,
|
|
54416
54417
|
$isReadOnly: readOnly,
|
|
@@ -54418,6 +54419,7 @@ function Checkbox({ checked = false, className, disabled = false, error, hasErro
|
|
|
54418
54419
|
checked: checked,
|
|
54419
54420
|
disabled: disabled,
|
|
54420
54421
|
id: name,
|
|
54422
|
+
indeterminate: indeterminate,
|
|
54421
54423
|
name: name,
|
|
54422
54424
|
onChange: handleChange,
|
|
54423
54425
|
readOnly: readOnly,
|
|
@@ -54436,7 +54438,8 @@ const StyledRsuiteCheckbox = styled(Checkbox$1)`
|
|
|
54436
54438
|
user-select: none;
|
|
54437
54439
|
}
|
|
54438
54440
|
|
|
54439
|
-
> .rs-checkbox-checker
|
|
54441
|
+
> .rs-checkbox-checker,
|
|
54442
|
+
&.rs-checkbox-indeterminate > .rs-checkbox-checker {
|
|
54440
54443
|
min-height: unset;
|
|
54441
54444
|
padding: 0 0 0 24px;
|
|
54442
54445
|
|
|
@@ -76261,33 +76264,76 @@ function useReactTable(options) {
|
|
|
76261
76264
|
return tableRef.current;
|
|
76262
76265
|
}
|
|
76263
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
|
+
|
|
76264
76321
|
const Table$1 = styled.table.attrs((props)=>({
|
|
76265
76322
|
className: classnames('Table-SimpleTable', props.className)
|
|
76266
76323
|
}))`
|
|
76267
|
-
width: 100%;
|
|
76268
|
-
table-layout: auto;
|
|
76269
|
-
overflow: auto;
|
|
76270
76324
|
border-collapse: separate;
|
|
76325
|
+
overflow: auto;
|
|
76326
|
+
table-layout: auto;
|
|
76271
76327
|
`;
|
|
76272
76328
|
const Head$1 = styled.thead`
|
|
76273
76329
|
position: sticky;
|
|
76274
76330
|
top: 0;
|
|
76275
76331
|
z-index: 1;
|
|
76276
76332
|
|
|
76277
|
-
th:first-child {
|
|
76333
|
+
> th:first-child {
|
|
76278
76334
|
border-left: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76279
76335
|
}
|
|
76280
76336
|
`;
|
|
76281
|
-
const SortContainer$1 = styled.div`
|
|
76282
|
-
display: flex;
|
|
76283
|
-
justify-content: space-between;
|
|
76284
|
-
align-items: center;
|
|
76285
|
-
cursor: default;
|
|
76286
|
-
|
|
76287
|
-
&.cursor-pointer {
|
|
76288
|
-
cursor: pointer;
|
|
76289
|
-
}
|
|
76290
|
-
`;
|
|
76291
76337
|
const Th$2 = styled.th`
|
|
76292
76338
|
background-color: ${(p)=>p.theme.color.gainsboro};
|
|
76293
76339
|
border-top: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
@@ -76296,35 +76342,36 @@ const Th$2 = styled.th`
|
|
|
76296
76342
|
color: ${(p)=>p.theme.color.slateGray};
|
|
76297
76343
|
font-size: 13px;
|
|
76298
76344
|
font-weight: 500;
|
|
76299
|
-
|
|
76345
|
+
line-height: 22px;
|
|
76346
|
+
padding: 9px 10px;
|
|
76300
76347
|
overflow: hidden;
|
|
76301
76348
|
text-overflow: ellipsis;
|
|
76349
|
+
${(p)=>!!p.$width && `width: ${p.$width}px;`}
|
|
76302
76350
|
white-space: nowrap;
|
|
76303
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
|
+
`;
|
|
76304
76362
|
const BodyTr$1 = styled.tr`
|
|
76305
|
-
|
|
76363
|
+
&:hover {
|
|
76306
76364
|
> td {
|
|
76307
76365
|
background-color: ${(p)=>p.theme.color.blueYonder25};
|
|
76308
76366
|
}
|
|
76309
76367
|
}
|
|
76310
|
-
td:first-child {
|
|
76368
|
+
> td:first-child {
|
|
76311
76369
|
border-left: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76312
76370
|
}
|
|
76313
76371
|
`;
|
|
76314
|
-
const Td$2 = styled.td`
|
|
76315
|
-
font-size: 13px;
|
|
76316
|
-
font-weight: 500;
|
|
76317
|
-
color: ${(p)=>p.theme.color.gunMetal};
|
|
76318
|
-
text-align: ${(p)=>p.$isCenter ? 'center' : 'left'};
|
|
76319
|
-
border-bottom: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76320
|
-
border-right: 1px solid ${(p)=>p.theme.color.lightGray};
|
|
76321
|
-
overflow: hidden;
|
|
76322
|
-
padding: 10px;
|
|
76323
|
-
text-overflow: ellipsis;
|
|
76324
|
-
white-space: nowrap;
|
|
76325
|
-
`;
|
|
76326
76372
|
const SimpleTable = {
|
|
76327
76373
|
BodyTr: BodyTr$1,
|
|
76374
|
+
CellLoader,
|
|
76328
76375
|
Head: Head$1,
|
|
76329
76376
|
SortContainer: SortContainer$1,
|
|
76330
76377
|
Table: Table$1,
|
|
@@ -76431,60 +76478,135 @@ function DataTable({ columns, data, initialSorting }) {
|
|
|
76431
76478
|
});
|
|
76432
76479
|
}
|
|
76433
76480
|
|
|
76434
|
-
function RowCheckbox({
|
|
76435
|
-
|
|
76436
|
-
|
|
76437
|
-
|
|
76438
|
-
|
|
76439
|
-
|
|
76440
|
-
|
|
76441
|
-
|
|
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,
|
|
76442
76495
|
onClick: stopMouseEventPropagation
|
|
76443
76496
|
});
|
|
76444
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
|
+
`;
|
|
76445
76531
|
|
|
76446
76532
|
const Table = styled(SimpleTable.Table)`
|
|
76447
76533
|
border-collapse: separate;
|
|
76448
76534
|
border-spacing: 0 5px;
|
|
76449
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
|
+
`}
|
|
76450
76556
|
`;
|
|
76451
76557
|
const Head = styled(SimpleTable.Head)`
|
|
76452
|
-
|
|
76453
|
-
|
|
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
|
+
}
|
|
76454
76572
|
}
|
|
76455
76573
|
`;
|
|
76456
|
-
const SortContainer = styled(SimpleTable.SortContainer)`
|
|
76457
|
-
justify-content: start;
|
|
76458
|
-
gap: 8px;
|
|
76459
|
-
`;
|
|
76460
76574
|
const Th = styled(SimpleTable.Th)`
|
|
76461
76575
|
background-color: ${(p)=>p.theme.color.white};
|
|
76462
|
-
|
|
76463
|
-
|
|
76464
|
-
|
|
76465
|
-
|
|
76466
|
-
|
|
76576
|
+
line-height: 22px;
|
|
76577
|
+
padding: 9px 16px;
|
|
76578
|
+
`;
|
|
76579
|
+
const SortContainer = styled(SimpleTable.SortContainer)`
|
|
76580
|
+
gap: 8px;
|
|
76581
|
+
justify-content: start;
|
|
76467
76582
|
`;
|
|
76468
76583
|
const BodyTr = styled(SimpleTable.BodyTr)`
|
|
76469
|
-
td
|
|
76470
|
-
border-
|
|
76471
|
-
|
|
76472
|
-
|
|
76473
|
-
|
|
76474
|
-
|
|
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
|
+
}
|
|
76475
76600
|
}
|
|
76476
76601
|
`;
|
|
76477
76602
|
const Td = styled(SimpleTable.Td)`
|
|
76478
76603
|
background-color: ${(p)=>p.theme.color.cultured};
|
|
76479
|
-
|
|
76480
|
-
|
|
76481
|
-
border-right: none;
|
|
76482
|
-
padding: 4px 16px;
|
|
76483
|
-
border-right: ${(p)=>p.$hasRightBorder ? `1px solid ${p.theme.color.lightGray}` : ''};
|
|
76484
|
-
width: ${(p)=>p.$width}px;
|
|
76604
|
+
${(p)=>!!p.$hasRightBorder && `border-right: 1px solid ${p.theme.color.lightGray};`}
|
|
76605
|
+
padding: 9px 16px;
|
|
76485
76606
|
`;
|
|
76486
76607
|
const TableWithSelectableRows = {
|
|
76487
76608
|
BodyTr,
|
|
76609
|
+
CellLoader: SimpleTable.CellLoader,
|
|
76488
76610
|
Head,
|
|
76489
76611
|
RowCheckbox,
|
|
76490
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"}
|