ar-design 0.4.35 → 0.4.37

package/dist/components/data-display/table/body/Editable.js

@@ -23,32 +23,32 @@ const Editable = function ({ c, item, trackByValue, onEditable, validation, conf
                     const { value } = event.target;
                     setValue(value);
                     onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value }, trackByValue);
-                }, validation: { text: _vText } }));
+                }, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
         case "decimal":
             return (React.createElement(Input.Decimal, { variant: "borderless", name: c.key, value: _value, onChange: (event) => {
                     const { value } = event.target;
                     setValue(value);
                     onEditable({ ...item, [key]: value }, trackByValue);
-                }, validation: { text: _vText }, locale: config.locale }));
+                }, validation: { text: _vText }, locale: config.locale, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
         case "input-formatted-decimal":
             return (React.createElement(Input.FormattedDecimal, { variant: "borderless", name: c.key, value: _value, onChange: (event) => {
                     const { value } = event.target;
                     setValue(value);
                     onEditable({ ...item, [key]: value }, trackByValue);
-                }, validation: { text: _vText }, locale: config.locale }));
+                }, validation: { text: _vText }, locale: config.locale, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
         case "date-picker":
             return (React.createElement(DatePicker, { variant: "borderless", value: _value, onChange: (value) => {
                     setValue(value);
                     onEditable({ ...item, [key]: value }, trackByValue);
-                }, validation: { text: _vText } }));
+                }, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
         case "single-select":
             return (React.createElement(Select, { variant: "borderless", value: selectItem, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (option) => {
                     onEditable({ ...item, [key]: option?.value }, trackByValue);
-                }, validation: { text: _vText } }));
+                }, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
         case "multiple-select":
             return (React.createElement(Select, { variant: "borderless", value: selectItems, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (options) => {
                     onEditable({ ...item, [key]: options.map((option) => option.value) }, trackByValue);
-                }, validation: { text: _vText }, multiple: true }));
+                }, validation: { text: _vText }, multiple: true, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
         default:
             return null;
     }

package/dist/components/data-display/table/body/TBody.js

@@ -6,6 +6,7 @@ function TBody({ data, columns, refs, methods, states, config }) {
     // refs
     const _hasMeasured = useRef(false);
     const _tBodyTR = useRef([]);
+    const _tHeadTH = useRef([]);
     // states
     const [triggerForRender, setTriggerForRender] = useState(false);
     const [rowHeights, setRowHeights] = useState([]);
@@ -19,7 +20,9 @@ function TBody({ data, columns, refs, methods, states, config }) {
             React.createElement("tr", { ref: (element) => {
                     _tBodyTR.current[index] = element;
                 }, ...(methods.rowBackgroundColor ? { style: { backgroundColor: methods.rowBackgroundColor(item) } } : {}), ...(methods.onDnD && data.length > 1 ? { className: "draggable", draggable: true } : {}) },
-                methods.selections && (React.createElement("td", { className: "flex justify-content-center sticky-left", "data-sticky-position": "left" },
+                methods.selections && (React.createElement("td", { ref: (element) => {
+                        _tHeadTH.current[index] = element;
+                    }, className: "flex justify-content-center sticky-left", style: { display: "flex", alignItems: "center", height: rowHeights[index] ?? 0 }, "data-sticky-position": "left" },
                     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) => {
                             const key = methods.trackBy?.(item);
                             if (event.target.checked) {

package/dist/components/data-display/table/index.js

@@ -586,7 +586,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                 React.createElement("thead", null,
                     React.createElement("tr", { key: "selection" },
                         data.some((item) => _subrowSelector in item) && _subrowButton && (React.createElement("td", { style: { width: 0, minWidth: 0 } })),
-                        selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" },
+                        selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left", style: { bottom: 0 } },
                             React.createElement(Checkbox, { variant: "filled", color: "green", checked: selectAll, onChange: (event) => {
                                     if (_checkboxItems.current.length > 0) {
                                         setSelectAll(event.target.checked);

package/dist/libs/core/application/hooks/useValidation.js

@@ -117,7 +117,7 @@ const useValidation = function (data, params, step) {
         param.shape?.forEach((s) => {
             const key = getKey(param.subkey);
             if (param.where) {
-                if (s.type === "required" && Utils.IsNullOrEmpty(value) && param.where(data)) {
+                if (s.type === "required" && !Utils.IsNullOrEmpty(value) && param.where(data)) {
                     setError(param.subkey ? key : param.key, s.message, param.step);
                 }
             }

package/dist/libs/types/index.d.ts

@@ -39,6 +39,7 @@ export type TableColumnType<T> = {
         type: "string" | "number" | "decimal" | "input-formatted-decimal" | "date-picker" | "single-select" | "multiple-select";
         options?: Option[];
         method?: () => void | Promise<void>;
+        where?: (item: T) => boolean;
     };
     config?: {
         width?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.4.35",
+  "version": "0.4.37",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",