@synerise/ds-form 0.2.17 → 0.3.0

package/CHANGELOG.md

@@ -3,23 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.2.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@0.2.16...@synerise/ds-form@0.2.17) (2022-08-04)
-
-**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))
 
 
-## [0.2.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@0.2.14...@synerise/ds-form@0.2.16) (2022-08-04)
+### Features
 
-**Note:** Version bump only for package @synerise/ds-form
+* **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.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@0.2.14...@synerise/ds-form@0.2.15) (2022-08-04)
+## [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/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,95 @@
+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,
+      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]);
+  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)) != 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)) != 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: function onClick() {
+      return setParams(function (prevParams) {
+        return [].concat(prevParams || [], [{
+          name: '',
+          value: ''
+        }]);
+      });
+    },
+    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:center;}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:", ";"], function (props) {
+  return props.marginWithLabel ? '8px 0 0' : '0 0 16px';
+});
+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,19 @@
+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;
+    textAddButton?: string;
+    renderAddButton?: (params?: EditableParam[]) => JSX.Element;
+    renderLeftColumn?: (props?: EditableParam) => JSX.Element;
+    renderRightColumn?: (props?: EditableParam, 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.17",
+  "version": "0.3.0",
   "description": "Form UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,15 +32,19 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-divider": "^0.5.17",
-    "@synerise/ds-typography": "^0.12.5"
+    "@synerise/ds-button": "^0.17.2",
+    "@synerise/ds-cruds": "^0.3.9",
+    "@synerise/ds-divider": "^0.5.19",
+    "@synerise/ds-icon": "^0.49.0",
+    "@synerise/ds-input": "^0.18.10",
+    "@synerise/ds-typography": "^0.12.7"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
   "devDependencies": {
-    "@synerise/ds-utils": "^0.22.6"
+    "@synerise/ds-utils": "^0.22.8"
   },
-  "gitHead": "28486eab4b37b485cbe2a383e3ae9b8e9d789862"
+  "gitHead": "44b5cd564f1f5d1b2d896849591aa5297ba26f30"
 }