ar-design 0.4.36 → 0.4.37
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.
|
@@ -23,32 +23,32 @@ const Editable = function ({ c, item, trackByValue, onEditable, validation, conf
|
|
|
23
23
|
const { value } = event.target;
|
|
24
24
|
setValue(value);
|
|
25
25
|
onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value }, trackByValue);
|
|
26
|
-
}, validation: { text: _vText } }));
|
|
26
|
+
}, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
|
|
27
27
|
case "decimal":
|
|
28
28
|
return (React.createElement(Input.Decimal, { variant: "borderless", name: c.key, value: _value, onChange: (event) => {
|
|
29
29
|
const { value } = event.target;
|
|
30
30
|
setValue(value);
|
|
31
31
|
onEditable({ ...item, [key]: value }, trackByValue);
|
|
32
|
-
}, validation: { text: _vText }, locale: config.locale }));
|
|
32
|
+
}, validation: { text: _vText }, locale: config.locale, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
|
|
33
33
|
case "input-formatted-decimal":
|
|
34
34
|
return (React.createElement(Input.FormattedDecimal, { variant: "borderless", name: c.key, value: _value, onChange: (event) => {
|
|
35
35
|
const { value } = event.target;
|
|
36
36
|
setValue(value);
|
|
37
37
|
onEditable({ ...item, [key]: value }, trackByValue);
|
|
38
|
-
}, validation: { text: _vText }, locale: config.locale }));
|
|
38
|
+
}, validation: { text: _vText }, locale: config.locale, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
|
|
39
39
|
case "date-picker":
|
|
40
40
|
return (React.createElement(DatePicker, { variant: "borderless", value: _value, onChange: (value) => {
|
|
41
41
|
setValue(value);
|
|
42
42
|
onEditable({ ...item, [key]: value }, trackByValue);
|
|
43
|
-
}, validation: { text: _vText } }));
|
|
43
|
+
}, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
|
|
44
44
|
case "single-select":
|
|
45
45
|
return (React.createElement(Select, { variant: "borderless", value: selectItem, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (option) => {
|
|
46
46
|
onEditable({ ...item, [key]: option?.value }, trackByValue);
|
|
47
|
-
}, validation: { text: _vText } }));
|
|
47
|
+
}, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
|
|
48
48
|
case "multiple-select":
|
|
49
49
|
return (React.createElement(Select, { variant: "borderless", value: selectItems, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (options) => {
|
|
50
50
|
onEditable({ ...item, [key]: options.map((option) => option.value) }, trackByValue);
|
|
51
|
-
}, validation: { text: _vText }, multiple: true }));
|
|
51
|
+
}, validation: { text: _vText }, multiple: true, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
|
|
52
52
|
default:
|
|
53
53
|
return null;
|
|
54
54
|
}
|
|
@@ -6,6 +6,7 @@ function TBody({ data, columns, refs, methods, states, config }) {
|
|
|
6
6
|
// refs
|
|
7
7
|
const _hasMeasured = useRef(false);
|
|
8
8
|
const _tBodyTR = useRef([]);
|
|
9
|
+
const _tHeadTH = useRef([]);
|
|
9
10
|
// states
|
|
10
11
|
const [triggerForRender, setTriggerForRender] = useState(false);
|
|
11
12
|
const [rowHeights, setRowHeights] = useState([]);
|
|
@@ -19,7 +20,9 @@ function TBody({ data, columns, refs, methods, states, config }) {
|
|
|
19
20
|
React.createElement("tr", { ref: (element) => {
|
|
20
21
|
_tBodyTR.current[index] = element;
|
|
21
22
|
}, ...(methods.rowBackgroundColor ? { style: { backgroundColor: methods.rowBackgroundColor(item) } } : {}), ...(methods.onDnD && data.length > 1 ? { className: "draggable", draggable: true } : {}) },
|
|
22
|
-
methods.selections && (React.createElement("td", {
|
|
23
|
+
methods.selections && (React.createElement("td", { ref: (element) => {
|
|
24
|
+
_tHeadTH.current[index] = element;
|
|
25
|
+
}, className: "flex justify-content-center sticky-left", style: { display: "flex", alignItems: "center", height: rowHeights[index] ?? 0 }, "data-sticky-position": "left" },
|
|
23
26
|
React.createElement(Checkbox, { key: Date.now(), ref: (element) => (refs._checkboxItems.current[index] = element), variant: "filled", color: "green", checked: refs._selectionItems.current.some((selectionItem) => methods.trackBy?.(selectionItem) === methods.trackBy?.(item)), onChange: (event) => {
|
|
24
27
|
const key = methods.trackBy?.(item);
|
|
25
28
|
if (event.target.checked) {
|
|
@@ -586,7 +586,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
586
586
|
React.createElement("thead", null,
|
|
587
587
|
React.createElement("tr", { key: "selection" },
|
|
588
588
|
data.some((item) => _subrowSelector in item) && _subrowButton && (React.createElement("td", { style: { width: 0, minWidth: 0 } })),
|
|
589
|
-
selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" },
|
|
589
|
+
selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left", style: { bottom: 0 } },
|
|
590
590
|
React.createElement(Checkbox, { variant: "filled", color: "green", checked: selectAll, onChange: (event) => {
|
|
591
591
|
if (_checkboxItems.current.length > 0) {
|
|
592
592
|
setSelectAll(event.target.checked);
|
|
@@ -39,6 +39,7 @@ export type TableColumnType<T> = {
|
|
|
39
39
|
type: "string" | "number" | "decimal" | "input-formatted-decimal" | "date-picker" | "single-select" | "multiple-select";
|
|
40
40
|
options?: Option[];
|
|
41
41
|
method?: () => void | Promise<void>;
|
|
42
|
+
where?: (item: T) => boolean;
|
|
42
43
|
};
|
|
43
44
|
config?: {
|
|
44
45
|
width?: number;
|