@synerise/ds-form 0.5.1 → 0.5.5

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@0.5.3...@synerise/ds-form@0.5.5) (2022-09-07)
+
+**Note:** Version bump only for package @synerise/ds-form
+
+
+
+
+
+## [0.5.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@0.5.3...@synerise/ds-form@0.5.4) (2022-09-07)
+
+**Note:** Version bump only for package @synerise/ds-form
+
+
+
+
+
+## [0.5.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@0.5.2...@synerise/ds-form@0.5.3) (2022-09-06)
+
+**Note:** Version bump only for package @synerise/ds-form
+
+
+
+
+
+## [0.5.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@0.5.1...@synerise/ds-form@0.5.2) (2022-09-05)
+
+**Note:** Version bump only for package @synerise/ds-form
+
+
+
+
+
 ## [0.5.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@0.5.0...@synerise/ds-form@0.5.1) (2022-08-31)
 
 **Note:** Version bump only for package @synerise/ds-form

package/README.md

@@ -36,3 +36,15 @@ import Form from '@synerise/ds-form'
 | className   | Class name applied to the element   | string  | -       |
 | description | Description text                    | string  | -       |
 | withLine    | Whether divider should be displayed | boolean |`false`  |
+
+
+### EditableList
+
+| Property    | Description                         | Type    | Default |
+| ----------- | ----------------------------------- | ------- | ------- |
+| firstInputProps*    | Enable overwriting first input props                        | AutocompleteProps / undefined  | -       |
+| secondInputProps*   | Enable overwriting second input props   | InputProps / undefined  | -       |
+| validation | Enable validation on first and second column                    | Record<'validateLeftColumn' / 'validateLeftColumn', (val: string) => string / ReactNode / null  | -       |
+| addButtonConfig    | Define props for button | AddButtonConfigProps / undefined | -  |
+
+* in order to overwrite f.e. styles in first two columns, it is possible to use spread operator used in component implementation, to overwrite style of third column it is required to import styled component wrapper and overwrite it

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

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import { Input } from '@synerise/ds-input';
 import Autocomplete from '@synerise/ds-autocomplete';
 import * as React from 'react';
@@ -5,6 +7,16 @@ 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';
+var defaultFirstInputProps = {
+  style: {
+    width: 350
+  }
+};
+var defaultSecondInputProps = {
+  style: {
+    width: 300
+  }
+};
 export var EditableList = function EditableList(_ref) {
   var _renderAddButton;
 
@@ -13,15 +25,19 @@ export var EditableList = function EditableList(_ref) {
       autocompleteOptions = _ref.autocompleteOptions,
       value = _ref.value,
       _onChange = _ref.onChange,
-      textAddButton = _ref.textAddButton,
+      addButtonConfig = _ref.addButtonConfig,
       onSearch = _ref.onSearch,
-      onClickAddRow = _ref.onClickAddRow,
       onClickDelete = _ref.onClickDelete,
       renderAddButton = _ref.renderAddButton,
       renderLeftColumn = _ref.renderLeftColumn,
       renderRightColumn = _ref.renderRightColumn,
       renderAdditionalColumn = _ref.renderAdditionalColumn,
-      renderActions = _ref.renderActions;
+      renderActions = _ref.renderActions,
+      validation = _ref.validation,
+      _ref$firstInputProps = _ref.firstInputProps,
+      firstInputProps = _ref$firstInputProps === void 0 ? defaultFirstInputProps : _ref$firstInputProps,
+      _ref$secondInputProps = _ref.secondInputProps,
+      secondInputProps = _ref$secondInputProps === void 0 ? defaultSecondInputProps : _ref$secondInputProps;
 
   var _React$useState = React.useState([]),
       params = _React$useState[0],
@@ -57,10 +73,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, id)) != null ? _renderLeftColumn : /*#__PURE__*/React.createElement(S.AutoCompleteWrapper, null, /*#__PURE__*/React.createElement(Autocomplete, {
-        style: {
-          width: 350
-        },
+      }, (_renderLeftColumn = renderLeftColumn == null ? void 0 : renderLeftColumn(param, id)) != null ? _renderLeftColumn : /*#__PURE__*/React.createElement(S.AutoCompleteWrapper, null, /*#__PURE__*/React.createElement(Autocomplete, _extends({
         onSearch: onSearch,
         value: param.name,
         onChange: function onChange(paramName) {
@@ -68,19 +81,20 @@ export var EditableList = function EditableList(_ref) {
           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, {
+        label: id === 0 ? leftColumnName : null,
+        error: Boolean(validation == null ? void 0 : validation.validateLeftColumn == null ? void 0 : validation.validateLeftColumn(param.name)),
+        errorText: validation == null ? void 0 : validation.validateLeftColumn == null ? void 0 : validation.validateLeftColumn(param.name)
+      }, firstInputProps), autocompleteOptions)), (_renderRightColumn = renderRightColumn == null ? void 0 : renderRightColumn(param, id)) != null ? _renderRightColumn : /*#__PURE__*/React.createElement(S.InputWrapper, null, /*#__PURE__*/React.createElement(Input, _extends({
         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, {
+        label: id === 0 ? rightColumnName : null,
+        error: Boolean(validation == null ? void 0 : validation.validateRightColumn == null ? void 0 : validation.validateRightColumn(param.value)),
+        errorText: validation == null ? void 0 : validation.validateRightColumn == null ? void 0 : validation.validateRightColumn(param.value)
+      }, secondInputProps))), 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
@@ -97,12 +111,13 @@ 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: onClickAddRow || onSetParamsDefault,
-    type: "ghost-primary"
+    onClick: (addButtonConfig == null ? void 0 : addButtonConfig.onClickAddRow) || onSetParamsDefault,
+    type: "ghost-primary",
+    disabled: addButtonConfig == null ? void 0 : addButtonConfig.disableAddButton
   }, /*#__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))));
+  })), /*#__PURE__*/React.createElement("span", null, addButtonConfig == null ? void 0 : addButtonConfig.textAddButton))));
 };
 export default EditableList;

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:start;}padding:8px 0px 8px 0px;"]);
+})(["@media (min-width:1280px){display:flex;align-items:start;}padding:8px 0px 8px 0px;"]);
 export var AutoCompleteWrapper = styled.div.withConfig({
   displayName: "editable-liststyles__AutoCompleteWrapper",
   componentId: "ctaimf-1"

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

@@ -1,8 +1,15 @@
 import * as React from 'react';
+import type { AutocompleteProps } from '@synerise/ds-autocomplete';
+import type { InputProps } from 'antd/lib/input';
 export declare type EditableParam = {
     name: string;
     value: string;
 };
+declare type AddButtonConfigProps = {
+    textAddButton?: string;
+    disableAddButton?: boolean;
+    onClickAddRow?: () => void;
+};
 export declare type EditListProps = {
     autocompleteOptions?: string | React.ReactNode;
     leftColumnName?: string | React.ReactNode;
@@ -10,12 +17,18 @@ 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;
+    addButtonConfig?: AddButtonConfigProps;
+    validation?: {
+        validateLeftColumn?: (val: string) => string | React.ReactNode | null;
+        validateRightColumn?: (val: string) => string | React.ReactNode | null;
+    };
     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[], actionsCallbacks?: object) => JSX.Element);
+    firstInputProps?: AutocompleteProps;
+    secondInputProps?: InputProps;
 };
+export {};

package/dist/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-form",
-  "version": "0.5.1",
+  "version": "0.5.5",
   "description": "Form UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,9 +34,9 @@
   "dependencies": {
     "@synerise/ds-button": "^0.17.9",
     "@synerise/ds-cruds": "^0.3.17",
-    "@synerise/ds-divider": "^0.5.19",
+    "@synerise/ds-divider": "^0.5.21",
     "@synerise/ds-icon": "^0.51.0",
-    "@synerise/ds-input": "^0.18.19",
+    "@synerise/ds-input": "^0.18.22",
     "@synerise/ds-typography": "^0.12.7"
   },
   "peerDependencies": {
@@ -44,7 +44,7 @@
     "react": ">=16.9.0 < 17.0.0"
   },
   "devDependencies": {
-    "@synerise/ds-utils": "^0.22.8"
+    "@synerise/ds-utils": "^0.22.10"
   },
-  "gitHead": "ef480757296035e4ba2928cd169a98458477b8d1"
+  "gitHead": "c90bb8af07578c7561792537ba59d87bab251b69"
 }