@synerise/ds-form 0.2.19 → 0.4.0

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 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
+
+
+
+
+
+# [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)
+
+
+### Bug Fixes
+
+* **form:** editable-list imports refactor and fix + export in index.ts ([369a6d9](https://github.com/Synerise/synerise-design/commit/369a6d9f8c7aa562eb860fcb105b1f2d1c0b2a99))
+* **form:** initial value, renderProps in EditableList ([9f6ffeb](https://github.com/Synerise/synerise-design/commit/9f6ffeb40efb8e77f16692c5d2f4c91b4e563536))
+
+
+### Features
+
+* **form:** add new component editable-list ([3f3331c](https://github.com/Synerise/synerise-design/commit/3f3331c6e832f396c7f26123539fe074be35e498))
+* **form:** add new component editable-list ([35edb08](https://github.com/Synerise/synerise-design/commit/35edb08fc02079b04ae828664c618849cedb3525))
+
+
+
+
+
 ## [0.2.19](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@0.2.14...@synerise/ds-form@0.2.19) (2022-08-11)
 
 **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.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { EditListProps } from './editable-list.types';
+export declare const EditableList: React.FC<EditListProps>;
+export default EditableList;

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

@@ -0,0 +1,99 @@
+import { Input } from '@synerise/ds-input';
+import Autocomplete from '@synerise/ds-autocomplete';
+import * as React from 'react';
+import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
+import Icon, { Add3M } from '@synerise/ds-icon';
+import Cruds from '@synerise/ds-cruds';
+import * as S from './editable-list.styles';
+export var EditableList = function EditableList(_ref) {
+  var _renderAddButton;
+
+  var leftColumnName = _ref.leftColumnName,
+      rightColumnName = _ref.rightColumnName,
+      autocompleteOptions = _ref.autocompleteOptions,
+      value = _ref.value,
+      _onChange = _ref.onChange,
+      textAddButton = _ref.textAddButton,
+      onSearch = _ref.onSearch,
+      onClickAddRow = _ref.onClickAddRow,
+      renderAddButton = _ref.renderAddButton,
+      renderLeftColumn = _ref.renderLeftColumn,
+      renderRightColumn = _ref.renderRightColumn,
+      renderAdditionalColumn = _ref.renderAdditionalColumn,
+      renderActions = _ref.renderActions;
+
+  var _React$useState = React.useState([]),
+      params = _React$useState[0],
+      setParams = _React$useState[1];
+
+  var paramsWithNewValue = function paramsWithNewValue(id, name, newValue) {
+    var updatedParams = [].concat(params || []);
+    updatedParams[id] = {
+      name: name,
+      value: newValue
+    };
+    return updatedParams;
+  };
+
+  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;
+
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      React.createElement(S.RowWrapper, {
+        key: id
+      }, (_renderLeftColumn = renderLeftColumn == null ? void 0 : renderLeftColumn(param, id)) != null ? _renderLeftColumn : /*#__PURE__*/React.createElement(S.AutoCompleteWrapper, null, /*#__PURE__*/React.createElement(Autocomplete, {
+        style: {
+          width: 350
+        },
+        onSearch: onSearch,
+        value: param.name,
+        onChange: function onChange(paramName) {
+          var newParams = paramsWithNewValue(id, paramName, param.value);
+          setParams(newParams);
+          if (_onChange) _onChange(newParams);
+        },
+        label: id === 0 ? leftColumnName : null
+      }, 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);
+          setParams(newParams);
+          if (_onChange) _onChange(newParams);
+        },
+        style: {
+          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, {
+        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)));
+        }
+      })) || undefined)
+    );
+  }), (_renderAddButton = renderAddButton == null ? void 0 : renderAddButton()) != null ? _renderAddButton : /*#__PURE__*/React.createElement(S.ButtonWrapper, null, /*#__PURE__*/React.createElement(S.AddButton, {
+    onClick: onClickAddRow || onSetParamsDefault,
+    type: "ghost-primary"
+  }, /*#__PURE__*/React.createElement(S.AddIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(Add3M, null),
+    size: 24,
+    color: theme.palette['blue-600']
+  })), /*#__PURE__*/React.createElement("span", null, textAddButton))));
+};
+export default EditableList;

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

@@ -0,0 +1,10 @@
+import Button from '@synerise/ds-button';
+export declare const RowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AutoCompleteWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AddButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
+export declare const AddIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CrudWrapper: import("styled-components").StyledComponent<"div", any, {
+    marginWithLabel?: boolean | React.ReactNode;
+}, never>;
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+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:start;}padding:8px 0px 8px 0px;"]);
+export var AutoCompleteWrapper = styled.div.withConfig({
+  displayName: "editable-liststyles__AutoCompleteWrapper",
+  componentId: "ctaimf-1"
+})(["padding-right:10px;margin-bottom:15px;"]);
+export var ButtonWrapper = styled.div.withConfig({
+  displayName: "editable-liststyles__ButtonWrapper",
+  componentId: "ctaimf-2"
+})([""]);
+export var AddButton = styled(Button).withConfig({
+  displayName: "editable-liststyles__AddButton",
+  componentId: "ctaimf-3"
+})(["span{padding:0 4px;}"]);
+export var AddIconWrapper = styled.div.withConfig({
+  displayName: "editable-liststyles__AddIconWrapper",
+  componentId: "ctaimf-4"
+})(["display:inline-block;"]);
+export var CrudWrapper = styled.div.withConfig({
+  displayName: "editable-liststyles__CrudWrapper",
+  componentId: "ctaimf-5"
+})(["padding-left:4px;margin-top:", ";"], function (props) {
+  return props.marginWithLabel ? '30px' : '4px';
+});
+export var InputWrapper = styled.div.withConfig({
+  displayName: "editable-liststyles__InputWrapper",
+  componentId: "ctaimf-6"
+})(["padding-left:4px;"]);

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export declare type EditableParam = {
+    name: string;
+    value: string;
+};
+export declare type EditListProps = {
+    autocompleteOptions?: string | React.ReactNode;
+    leftColumnName?: string | React.ReactNode;
+    rightColumnName?: string | React.ReactNode;
+    value?: EditableParam[];
+    onChange?: (params: EditableParam[]) => void;
+    onSearch?: (query: string) => void;
+    onClickAddRow?: () => void;
+    textAddButton?: string;
+    renderAddButton?: (params?: EditableParam[]) => 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/dist/editable-list/editable-list.types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1 +1,3 @@
+import { EditableList } from './editable-list/editable-list';
+export { EditableList };
 export { default } from './Form';

package/dist/index.js

@@ -1 +1,3 @@
+import { EditableList } from './editable-list/editable-list';
+export { EditableList };
 export { default } from './Form';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-form",
-  "version": "0.2.19",
+  "version": "0.4.0",
   "description": "Form UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,7 +32,11 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@synerise/ds-button": "^0.17.8",
+    "@synerise/ds-cruds": "^0.3.16",
     "@synerise/ds-divider": "^0.5.19",
+    "@synerise/ds-icon": "^0.50.0",
+    "@synerise/ds-input": "^0.18.18",
     "@synerise/ds-typography": "^0.12.7"
   },
   "peerDependencies": {
@@ -42,5 +46,5 @@
   "devDependencies": {
     "@synerise/ds-utils": "^0.22.8"
   },
-  "gitHead": "a95bdd142863a7e132acf2cc4bf66e247d06a26c"
+  "gitHead": "c92d02f04157e6b1189eb59bba9dea4c1594c123"
 }