@synerise/ds-form 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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

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

@@ -0,0 +1,9 @@
+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
+  } */
+  );
+});

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

@@ -15,6 +15,7 @@ export var EditableList = function EditableList(_ref) {
       _onChange = _ref.onChange,
       textAddButton = _ref.textAddButton,
       onSearch = _ref.onSearch,
+      onClickAddRow = _ref.onClickAddRow,
       renderAddButton = _ref.renderAddButton,
       renderLeftColumn = _ref.renderLeftColumn,
       renderRightColumn = _ref.renderRightColumn,
@@ -37,6 +38,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 +56,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 +68,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);
@@ -77,14 +88,7 @@ export var EditableList = function EditableList(_ref) {
       })) || 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,11 @@ export declare type EditListProps = {
     value?: EditableParam[];
     onChange?: (params: EditableParam[]) => void;
     onSearch?: (query: string) => void;
+    onClickAddRow?: () => 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);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-form",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Form UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,7 +36,7 @@
     "@synerise/ds-cruds": "^0.3.16",
     "@synerise/ds-divider": "^0.5.19",
     "@synerise/ds-icon": "^0.50.0",
-    "@synerise/ds-input": "^0.18.17",
+    "@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": "c9530f0548fa244796b0c6b1ea5fa3d6330e84ea"
+  "gitHead": "c92d02f04157e6b1189eb59bba9dea4c1594c123"
 }