@synerise/ds-form 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@0.4.0...@synerise/ds-form@0.5.0) (2022-08-31)
+
+
+### Features
+
+* **form:** add onClickDelete to editable-list ([95c67a6](https://github.com/Synerise/synerise-design/commit/95c67a693c31d4b60532bd6fc62cdb0f885d8560))
+
+
+
+
+
+# [0.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@0.3.1...@synerise/ds-form@0.4.0) (2022-08-29)
+
+
+### Features
+
+* **form:** add index for render column functions in EditableList ([54a2699](https://github.com/Synerise/synerise-design/commit/54a26997a4b6d136273da47f20b14ff17939119b))
+
+
+
+
+
+## [0.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@0.3.0...@synerise/ds-form@0.3.1) (2022-08-25)
+
+**Note:** Version bump only for package @synerise/ds-form
+
+
+
+
+
 # [0.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@0.2.19...@synerise/ds-form@0.3.0) (2022-08-22)
 
 

package/dist/editable-list/__spec__/editable-list.spec.js

@@ -0,0 +1,10 @@
+describe('editable-list', function () {
+  it.todo('is able to invalidate every second row'
+  /* () => {
+  const container = renderWithProvider(<EditableList value={[{}, {}, {}, {}]} renderLeftColumn={(param, i) => <input className={i % 2 == 'error' : ''}/>}>)
+  container.querySelectorAll('.error')
+  return render
+  } */
+  );
+  it.todo('onClickDelete is called when removing items (and has removed item and its index)');
+});

package/dist/editable-list/editable-list.js

@@ -15,6 +15,8 @@ export var EditableList = function EditableList(_ref) {
       _onChange = _ref.onChange,
       textAddButton = _ref.textAddButton,
       onSearch = _ref.onSearch,
+      onClickAddRow = _ref.onClickAddRow,
+      onClickDelete = _ref.onClickDelete,
       renderAddButton = _ref.renderAddButton,
       renderLeftColumn = _ref.renderLeftColumn,
       renderRightColumn = _ref.renderRightColumn,
@@ -37,6 +39,16 @@ export var EditableList = function EditableList(_ref) {
   React.useEffect(function () {
     setParams(value);
   }, [value]);
+
+  var onSetParamsDefault = function onSetParamsDefault() {
+    return setParams(function (prevParams) {
+      return [].concat(prevParams || [], [{
+        name: '',
+        value: ''
+      }]);
+    });
+  };
+
   return /*#__PURE__*/React.createElement("div", null, params == null ? void 0 : params.map(function (param, id) {
     var _renderLeftColumn, _renderRightColumn;
 
@@ -45,7 +57,7 @@ export var EditableList = function EditableList(_ref) {
       // eslint-disable-next-line react/no-array-index-key
       React.createElement(S.RowWrapper, {
         key: id
-      }, (_renderLeftColumn = renderLeftColumn == null ? void 0 : renderLeftColumn(param)) != null ? _renderLeftColumn : /*#__PURE__*/React.createElement(S.AutoCompleteWrapper, null, /*#__PURE__*/React.createElement(Autocomplete, {
+      }, (_renderLeftColumn = renderLeftColumn == null ? void 0 : renderLeftColumn(param, id)) != null ? _renderLeftColumn : /*#__PURE__*/React.createElement(S.AutoCompleteWrapper, null, /*#__PURE__*/React.createElement(Autocomplete, {
         style: {
           width: 350
         },
@@ -57,7 +69,7 @@ export var EditableList = function EditableList(_ref) {
           if (_onChange) _onChange(newParams);
         },
         label: id === 0 ? leftColumnName : null
-      }, autocompleteOptions)), (_renderRightColumn = renderRightColumn == null ? void 0 : renderRightColumn(param)) != null ? _renderRightColumn : /*#__PURE__*/React.createElement(S.InputWrapper, null, /*#__PURE__*/React.createElement(Input, {
+      }, autocompleteOptions)), (_renderRightColumn = renderRightColumn == null ? void 0 : renderRightColumn(param, id)) != null ? _renderRightColumn : /*#__PURE__*/React.createElement(S.InputWrapper, null, /*#__PURE__*/React.createElement(Input, {
         value: param.value,
         onChange: function onChange(ev) {
           var newParams = paramsWithNewValue(id, param.name, ev.target.value);
@@ -68,23 +80,24 @@ export var EditableList = function EditableList(_ref) {
           width: '300px'
         },
         label: id === 0 ? rightColumnName : null
-      })), renderAdditionalColumn == null ? void 0 : renderAdditionalColumn(), typeof renderActions === 'function' && (renderActions == null ? void 0 : renderActions(param, id, params)) || renderActions === true && /*#__PURE__*/React.createElement(S.CrudWrapper, {
+      })), renderAdditionalColumn == null ? void 0 : renderAdditionalColumn(), typeof renderActions === 'function' && (renderActions == null ? void 0 : renderActions(param, id, params, {
+        onClickDelete: onClickDelete
+      })) || renderActions === true && /*#__PURE__*/React.createElement(S.CrudWrapper, {
         marginWithLabel: id === 0 ? leftColumnName : null
       }, /*#__PURE__*/React.createElement(Cruds, {
         onRemove: function onRemove() {
-          return setParams([].concat(params.slice(0, id), params.slice(id + 1, params.length)));
+          var newParams = params ? [].concat(params.slice(0, id), params.slice(id + 1, params.length)) : [];
+
+          if (onClickDelete) {
+            onClickDelete(param, id, newParams);
+          } else {
+            setParams(newParams);
+          }
         }
       })) || undefined)
     );
   }), (_renderAddButton = renderAddButton == null ? void 0 : renderAddButton()) != null ? _renderAddButton : /*#__PURE__*/React.createElement(S.ButtonWrapper, null, /*#__PURE__*/React.createElement(S.AddButton, {
-    onClick: function onClick() {
-      return setParams(function (prevParams) {
-        return [].concat(prevParams || [], [{
-          name: '',
-          value: ''
-        }]);
-      });
-    },
+    onClick: onClickAddRow || onSetParamsDefault,
     type: "ghost-primary"
   }, /*#__PURE__*/React.createElement(S.AddIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(Add3M, null),

package/dist/editable-list/editable-list.styles.js

@@ -3,7 +3,7 @@ import Button from '@synerise/ds-button';
 export var RowWrapper = styled.div.withConfig({
   displayName: "editable-liststyles__RowWrapper",
   componentId: "ctaimf-0"
-})(["@media (min-width:1280px){display:flex;padding:8px 200px 8px 0px;align-items:center;}padding:8px 0px 8px 0px;"]);
+})(["@media (min-width:1280px){display:flex;padding:8px 200px 8px 0px;align-items:start;}padding:8px 0px 8px 0px;"]);
 export var AutoCompleteWrapper = styled.div.withConfig({
   displayName: "editable-liststyles__AutoCompleteWrapper",
   componentId: "ctaimf-1"
@@ -23,8 +23,8 @@ export var AddIconWrapper = styled.div.withConfig({
 export var CrudWrapper = styled.div.withConfig({
   displayName: "editable-liststyles__CrudWrapper",
   componentId: "ctaimf-5"
-})(["padding-left:4px;margin:", ";"], function (props) {
-  return props.marginWithLabel ? '8px 0 0' : '0 0 16px';
+})(["padding-left:4px;margin-top:", ";"], function (props) {
+  return props.marginWithLabel ? '30px' : '4px';
 });
 export var InputWrapper = styled.div.withConfig({
   displayName: "editable-liststyles__InputWrapper",

package/dist/editable-list/editable-list.types.d.ts

@@ -10,10 +10,12 @@ export declare type EditListProps = {
     value?: EditableParam[];
     onChange?: (params: EditableParam[]) => void;
     onSearch?: (query: string) => void;
+    onClickAddRow?: () => void;
+    onClickDelete?: (param?: EditableParam, index?: number, params?: EditableParam[]) => void;
     textAddButton?: string;
     renderAddButton?: (params?: EditableParam[]) => JSX.Element;
-    renderLeftColumn?: (props?: EditableParam) => JSX.Element;
-    renderRightColumn?: (props?: EditableParam, ref?: React.ClassAttributes<{}>['ref']) => JSX.Element;
+    renderLeftColumn?: (param?: EditableParam, index?: number) => JSX.Element;
+    renderRightColumn?: (param?: EditableParam, index?: number, ref?: React.ClassAttributes<{}>['ref']) => JSX.Element;
     renderAdditionalColumn?: (row?: EditableParam[]) => JSX.Element;
-    renderActions?: boolean | ((param?: EditableParam, idx?: number, params?: EditableParam[]) => JSX.Element);
+    renderActions?: boolean | ((param?: EditableParam, idx?: number, params?: EditableParam[], actionsCallbacks?: object) => JSX.Element);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-form",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Form UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,11 +32,11 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.17.2",
-    "@synerise/ds-cruds": "^0.3.9",
+    "@synerise/ds-button": "^0.17.8",
+    "@synerise/ds-cruds": "^0.3.16",
     "@synerise/ds-divider": "^0.5.19",
-    "@synerise/ds-icon": "^0.49.0",
-    "@synerise/ds-input": "^0.18.10",
+    "@synerise/ds-icon": "^0.50.0",
+    "@synerise/ds-input": "^0.18.18",
     "@synerise/ds-typography": "^0.12.7"
   },
   "peerDependencies": {
@@ -46,5 +46,5 @@
   "devDependencies": {
     "@synerise/ds-utils": "^0.22.8"
   },
-  "gitHead": "44b5cd564f1f5d1b2d896849591aa5297ba26f30"
+  "gitHead": "46da8adb55d48c5b05bad4ce548b4f13e37c09c1"
 }