@lanaco/lnc-react-ui 2.1.12 → 2.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/index.esm.js +112 -249
  2. package/lib/index.js +112 -249
  3. package/package.json +1 -1
package/lib/index.esm.js CHANGED
@@ -31313,7 +31313,9 @@ var Content$4 = newStyled.div(function (props) {
31313
31313
  padding: "0.3125rem",
31314
31314
  border: "0.065rem solid ".concat(props.theme.palette.gray[600]),
31315
31315
  borderTop: props.basic ? "none" : "0.065rem solid ".concat(props.theme.palette.gray[600]),
31316
- borderRadius: "0 0 0.2rem 0.2rem"
31316
+ borderRadius: "0 0 0.2rem 0.2rem",
31317
+ maxHeight: "calc(100vh - 220px)",
31318
+ overflowY: "auto"
31317
31319
  };
31318
31320
  });
31319
31321
 
@@ -49280,97 +49282,26 @@ var TableView = function TableView(props) {
49280
49282
  OnHeaderClick = _props$Config$OnHeade === void 0 ? function () {} : _props$Config$OnHeade,
49281
49283
  ReadOnly = _props$Config.ReadOnly,
49282
49284
  _props$Config$IsLooku = _props$Config.IsLookup,
49283
- IsLookup = _props$Config$IsLooku === void 0 ? false : _props$Config$IsLooku;
49285
+ IsLookup = _props$Config$IsLooku === void 0 ? false : _props$Config$IsLooku,
49286
+ _props$Config$LookupT = _props$Config.LookupTakeItem,
49287
+ LookupTakeItem = _props$Config$LookupT === void 0 ? function () {} : _props$Config$LookupT;
49284
49288
  var _props$Localization = props.Localization,
49285
49289
  Localization = _props$Localization === void 0 ? {} : _props$Localization;
49286
49290
  props.Export;
49287
49291
  props.Icons;
49288
- // const [headerHoverIndex, setHeaderHoverIndex] = useState(-1);
49289
- // const [rowHoverIndex, setRowHoverIndex] = useState(-1);
49290
- // const [rowSelectedIndices, setRowSelectedIndices] = useState([]);
49291
- //======== FUNCTIONS ========
49292
+ //======== FUNCTIONS ========
49292
49293
 
49293
49294
  function isFunction(functionToCheck) {
49294
49295
  return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
49295
49296
  }
49296
49297
 
49297
49298
  var handleOnSelection = function handleOnSelection(rowData, val) {
49298
- // if (e.target.checked && rowIndex >= 0) {
49299
- // if (SelectionType === TableSelectionType.MULTIPLE) {
49300
- // let tmpArray = [...rowSelectedIndices];
49301
- // tmpArray.push(rowIndex);
49302
- // // setRowSelectedIndices(tmpArray);
49303
- // } else if (SelectionType === TableSelectionType.SINGLE) {
49304
- // // setRowSelectedIndices([rowIndex]);
49305
- // }
49306
- // } else if (!e.target.checked && rowIndex >= 0) {
49307
- // if (SelectionType === TableSelectionType.MULTIPLE) {
49308
- // let tmpArray = rowSelectedIndices.map((x) => x !== rowIndex);
49309
- // // setRowSelectedIndices(tmpArray);
49310
- // } else if (SelectionType === TableSelectionType.SINGLE) {
49311
- // // setRowSelectedIndices([]);
49312
- // }
49313
- // }
49314
49299
  OnSelection(rowData, val, SelectionType);
49315
49300
  };
49316
49301
 
49317
49302
  var handleSelectAll = function handleSelectAll(val) {
49318
49303
  OnSelectAll(val);
49319
49304
  }; //======== RENDER ========
49320
- // const renderSelectionHeader = () => {
49321
- // if (!EnableSelection || ReadOnly) return null;
49322
- // if (props.accentColor) {
49323
- // const style = {
49324
- // backgroundColor: props.accentColor,
49325
- // color: props.color
49326
- // ? props.color
49327
- // : isColorDark(props.accentColor)
49328
- // ? "white"
49329
- // : "black",
49330
- // };
49331
- // const styleForHover = {
49332
- // backgroundColor: getDarkerColor(props.accentColor, 0.2),
49333
- // color: props.color
49334
- // ? props.color
49335
- // : isColorDark(props.accentColor)
49336
- // ? "white"
49337
- // : "black",
49338
- // };
49339
- // return (
49340
- // <th
49341
- // className={mergeCSS([styles.header, styles.selectColumn])}
49342
- // style={headerHoverIndex === 0 ? styleForHover : style}
49343
- // onMouseEnter={() => setHeaderHoverIndex(0)}
49344
- // onMouseLeave={() => setHeaderHoverIndex(-1)}
49345
- // >
49346
- // {renderSelectAll()}
49347
- // </th>
49348
- // );
49349
- // }
49350
- // return (
49351
- // <th className={mergeCSS([styles.header, styles.selectColumn])}>
49352
- // {renderSelectAll()}
49353
- // </th>
49354
- // );
49355
- // };
49356
- // const renderSelectAll = () => {
49357
- // if (SelectionType === TableSelectionType.MULTIPLE) {
49358
- // return (
49359
- // <input
49360
- // title={
49361
- // SelectedEntirePage
49362
- // ? Localization.DeselectAll
49363
- // : Localization.SelectAll
49364
- // }
49365
- // type="checkbox"
49366
- // checked={SelectedEntirePage}
49367
- // onChange={(e) => OnSelectAll(e.target.checked)}
49368
- // className={styles.pointer}
49369
- // ></input>
49370
- // );
49371
- // }
49372
- // return null;
49373
- // };
49374
49305
 
49375
49306
 
49376
49307
  var isItemInArray = function isItemInArray(item, array, byProp) {
@@ -49378,33 +49309,7 @@ var TableView = function TableView(props) {
49378
49309
  return x[byProp] === item[byProp];
49379
49310
  }));
49380
49311
  return array.indexOf(item) > -1;
49381
- }; // const renderSelectionCheckbox = (rowData, rowIndex = -1) => {
49382
- // if (EnableSelection && !ReadOnly) {
49383
- // return (
49384
- // <td
49385
- // className={mergeCSS([styles.specialRenderCell, styles.selectColumn])}
49386
- // >
49387
- // <input
49388
- // type="checkbox"
49389
- // checked={isItemInArray(rowData, SelectedData, SelectionIndicator)}
49390
- // onChange={(e) => handleOnSelection(rowData, e, rowIndex)}
49391
- // className={styles.pointer}
49392
- // ></input>
49393
- // </td>
49394
- // );
49395
- // } else return <></>;
49396
- // };
49397
- // const renderHeader = () => {
49398
- // return (
49399
- // <tr>
49400
- // {renderSelectionHeader()}
49401
- // {Columns.filter((x) => x.hide !== true).map((def, i) =>
49402
- // renderHeaderCell(def, i)
49403
- // )}
49404
- // </tr>
49405
- // );
49406
- // };
49407
-
49312
+ };
49408
49313
 
49409
49314
  var renderBody = function renderBody() {
49410
49315
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, Data.map(function (dataItem, i) {
@@ -49425,42 +49330,24 @@ var TableView = function TableView(props) {
49425
49330
  }).map(function (col, j) {
49426
49331
  return renderBodyCell(dataItem, col, i, j);
49427
49332
  })));
49428
- }; // const renderCell = (rowData, def, key) => {
49429
- // let onClick = !isFunction(def.specialRender)
49430
- // ? () => {
49431
- // ChangeToFormView(rowData);
49432
- // }
49433
- // : () => {};
49434
- // if (!EnableFormView) onClick = () => {};
49435
- // if (!EnableFormView && EnableSelection) {
49436
- // var checked = isItemInArray(rowData, SelectedData, SelectionIndicator);
49437
- // onClick = () =>
49438
- // handleOnSelection(rowData, { target: { checked: !checked } });
49439
- // }
49440
- // let cellData =
49441
- // def.isObject === true
49442
- // ? rowData[def.accessor][def.objectAccessor]
49443
- // : rowData[def.accessor];
49444
- // return (
49445
- // <td key={key} className={styles.cell} onClick={onClick}>
49446
- // {isFunction(def.specialRender) ? def.specialRender(rowData) : cellData}
49447
- // </td>
49448
- // );
49449
- // };
49450
-
49333
+ };
49451
49334
 
49452
49335
  var renderBodyCell = function renderBodyCell(dataItem, def, rowIndex, cellIndex) {
49453
49336
  var tabIndex = rowIndex * Columns.length + cellIndex + 50;
49454
49337
  var onClick = !isFunction(def.specialRender) ? function () {
49455
49338
  ChangeToFormView(dataItem);
49456
49339
  } : function () {};
49457
- if (!EnableFormView) onClick = function onClick() {}; // if (!EnableFormView && EnableSelection) {
49458
- // var checked = isItemInArray(dataItem, SelectedData, SelectionIndicator);
49459
- // onClick = () =>
49460
- // handleOnSelection(dataItem, { target: { checked: !checked } });
49461
- // }
49340
+ if (!EnableFormView) onClick = function onClick() {};
49341
+ if (!EnableSelection || ReadOnly) onClick = function onClick() {};
49342
+
49343
+ if (IsLookup) {
49344
+ onClick = function onClick() {
49345
+ if (!IsLoading) {
49346
+ LookupTakeItem(dataItem);
49347
+ }
49348
+ };
49349
+ }
49462
49350
 
49463
- if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) onClick = function onClick() {};
49464
49351
  var cellData = def.isObject === true ? dataItem[def.accessor][def.objectAccessor] : dataItem[def.accessor];
49465
49352
  return /*#__PURE__*/React__default.createElement(TableBodyCell$1, {
49466
49353
  key: tabIndex,
@@ -49469,7 +49356,22 @@ var TableView = function TableView(props) {
49469
49356
  };
49470
49357
 
49471
49358
  var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
49472
- if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
49359
+ if (IsLookup) {
49360
+ return /*#__PURE__*/React__default.createElement(TableBodyCell$1, {
49361
+ selectionCell: true,
49362
+ key: -1
49363
+ }, /*#__PURE__*/React__default.createElement(Button$1, {
49364
+ inverted: true,
49365
+ onClick: function onClick() {
49366
+ if (!IsLoading) {
49367
+ LookupTakeItem(dataItem);
49368
+ }
49369
+ },
49370
+ icon: "arrow-right"
49371
+ }));
49372
+ }
49373
+
49374
+ if (!EnableSelection || ReadOnly || IsLookup) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
49473
49375
  return /*#__PURE__*/React__default.createElement(TableBodyCell$1, {
49474
49376
  selectionCell: true,
49475
49377
  key: -1
@@ -49480,60 +49382,7 @@ var TableView = function TableView(props) {
49480
49382
  },
49481
49383
  id: rowIndex
49482
49384
  }));
49483
- }; // const renderRow = (rowData, key) => {
49484
- // let evenOddClass = key % 2 === 0 ? styles.tableRowEven : styles.tableRowOdd;
49485
- // let selectionClass = isItemInArray(
49486
- // rowData,
49487
- // SelectedData,
49488
- // SelectionIndicator
49489
- // )
49490
- // ? styles.checkedRow
49491
- // : "";
49492
- // if (props.accentColor) {
49493
- // const style = {
49494
- // border: "0px",
49495
- // backgroundColor: key % 2 === 0 ? "white" : "whitesmoke",
49496
- // borderLeft: "1px solid transparent",
49497
- // borderRight: "1px solid transparent",
49498
- // borderTop: "1px solid transparent",
49499
- // };
49500
- // const styleForHover = {
49501
- // border: "1px solid " + getLighterColor(props.accentColor, 0.75),
49502
- // backgroundColor: key % 2 === 0 ? "white" : "whitesmoke",
49503
- // };
49504
- // const styleForSelect = {
49505
- // backgroundColor: getLighterColor(props.accentColor, 0.75),
49506
- // };
49507
- // return (
49508
- // <tr
49509
- // key={key}
49510
- // style={
49511
- // rowSelectedIndices.includes(key)
49512
- // ? styleForSelect
49513
- // : rowHoverIndex === key
49514
- // ? styleForHover
49515
- // : style
49516
- // }
49517
- // onMouseEnter={() => setRowHoverIndex(key)}
49518
- // onMouseLeave={() => setRowHoverIndex(-1)}
49519
- // >
49520
- // {renderSelectionCheckbox(rowData, key)}
49521
- // {Columns.filter((x) => x.hide !== true).map((def, i) =>
49522
- // renderCell(rowData, def, i)
49523
- // )}
49524
- // </tr>
49525
- // );
49526
- // }
49527
- // return (
49528
- // <tr key={key} className={evenOddClass + " " + selectionClass}>
49529
- // {renderSelectionCheckbox(rowData)}
49530
- // {Columns.filter((x) => x.hide !== true).map((def, i) =>
49531
- // renderCell(rowData, def, i)
49532
- // )}
49533
- // </tr>
49534
- // );
49535
- // };
49536
-
49385
+ };
49537
49386
 
49538
49387
  var renderHeaderCell = function renderHeaderCell(def, i) {
49539
49388
  var headerClick = function headerClick() {};
@@ -49569,6 +49418,10 @@ var TableView = function TableView(props) {
49569
49418
  };
49570
49419
 
49571
49420
  var renderSelectAllHeaderCell = function renderSelectAllHeaderCell() {
49421
+ if (IsLookup) return /*#__PURE__*/React__default.createElement(TableHeadCell$1, {
49422
+ selectionCell: true,
49423
+ key: -1
49424
+ });
49572
49425
  if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
49573
49426
  if (SelectedEntirePage && Localization.DeselectAll) ;
49574
49427
  if (!SelectedEntirePage && Localization.SelectAll) ;
@@ -49590,17 +49443,7 @@ var TableView = function TableView(props) {
49590
49443
  return x.hide !== true;
49591
49444
  }).map(function (col, i) {
49592
49445
  return renderHeaderCell(col, i);
49593
- }))), /*#__PURE__*/React__default.createElement(TableBody$1, null, renderBody())))); // return (
49594
- // <div>
49595
- // <div className={styles.tableDiv}>
49596
- // <table className={styles.table}>
49597
- // <thead>{renderHeader()}</thead>
49598
- // <tbody>{renderBody()}</tbody>
49599
- // </table>
49600
- // </div>
49601
- // <div>{renderPagination()}</div>
49602
- // </div>
49603
- // );
49446
+ }))), /*#__PURE__*/React__default.createElement(TableBody$1, null, renderBody()))));
49604
49447
  };
49605
49448
 
49606
49449
  var _templateObject$e, _templateObject2$a;
@@ -49686,7 +49529,7 @@ var Container$c = newStyled.div(_templateObject$d || (_templateObject$d = _tagge
49686
49529
  });
49687
49530
  var TableContainer$1 = newStyled.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n font-family: var(--font-base-ubuntu);\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n"])));
49688
49531
  var PaginationContainer$1 = newStyled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n border-top: 1px solid #80808025;\n"])));
49689
- var FormContainer$2 = newStyled.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n height: 100%;\n overflow-y: auto;\n max-height: calc(100vh - 120px);\n border-radius: 3px;\n\n ", "\n"])), function (props) {
49532
+ var FormContainer$2 = newStyled.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n height: 100%;\n // overflow-y: auto;\n // max-height: calc(100vh - 120px);\n border-radius: 3px;\n\n ", "\n"])), function (props) {
49690
49533
  return getBorderSyle$1(props.borderStyle, props.read, props.theme, props.color);
49691
49534
  });
49692
49535
  var HeaderContainer$1 = newStyled.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items: center;\n padding: 4px 0;\n border-radius: 3px;\n font-size: 12px;\n font-family: \"Ubuntu\";\n"])));
@@ -49746,12 +49589,10 @@ var DataView = function DataView(props) {
49746
49589
  GoToAdd = _props$GoToAdd === void 0 ? emptyFunc : _props$GoToAdd;
49747
49590
  props.GoToAddWithCopy;
49748
49591
  var _props$DiscardEdited = props.DiscardEdited,
49749
- DiscardEdited = _props$DiscardEdited === void 0 ? emptyFunc : _props$DiscardEdited,
49750
- _props$SetSelectedDat = props.SetSelectedData,
49751
- SetSelectedData = _props$SetSelectedDat === void 0 ? emptyFunc : _props$SetSelectedDat,
49752
- _props$ClearSelectedD = props.ClearSelectedData,
49753
- ClearSelectedData = _props$ClearSelectedD === void 0 ? emptyFunc : _props$ClearSelectedD,
49754
- _props$Localization = props.Localization,
49592
+ DiscardEdited = _props$DiscardEdited === void 0 ? emptyFunc : _props$DiscardEdited;
49593
+ props.SetSelectedData;
49594
+ props.ClearSelectedData;
49595
+ var _props$Localization = props.Localization,
49755
49596
  Localization = _props$Localization === void 0 ? {} : _props$Localization,
49756
49597
  _props$Export = props.Export,
49757
49598
  Export = _props$Export === void 0 ? function () {} : _props$Export,
@@ -49827,15 +49668,15 @@ var DataView = function DataView(props) {
49827
49668
  size: size,
49828
49669
  color: color
49829
49670
  }; //======== LOOKUP ========
49830
-
49831
- useEffect(function () {
49832
- if (General.IsLookup) SetSelectedData(Lookup.SelectedData);
49833
- }, [Lookup.SelectedData]);
49834
- useEffect(function () {
49835
- return function cleanup() {
49836
- if (General.IsLookup) ClearSelectedData();
49837
- };
49838
- }, []); //======== CONFIGS ========
49671
+ // useEffect(() => {
49672
+ // if (General.IsLookup) SetSelectedData(Lookup.SelectedData);
49673
+ // }, [Lookup.SelectedData]);
49674
+ // useEffect(() => {
49675
+ // return function cleanup() {
49676
+ // if (General.IsLookup) ClearSelectedData();
49677
+ // };
49678
+ // }, []);
49679
+ //======== CONFIGS ========
49839
49680
 
49840
49681
  var formViewMovementConfig = {
49841
49682
  Dirty: Form.Dirty,
@@ -49867,6 +49708,9 @@ var DataView = function DataView(props) {
49867
49708
  SelectedData: Table.SelectedData,
49868
49709
  ChangeToFormView: ChangeToFormView,
49869
49710
  //---------------------------
49711
+ IsLookup: General.IsLookup,
49712
+ LookupTakeItem: Lookup.LookupTakeItem ? Lookup.LookupTakeItem : function () {},
49713
+ //---------------------------
49870
49714
  EnableOrdering: Options.EnableOrdering,
49871
49715
  Column: Ordering.Column,
49872
49716
  Accessor: Ordering.Accessor,
@@ -49897,27 +49741,6 @@ var DataView = function DataView(props) {
49897
49741
  if (Form.Mode === FormMode.ADD) return "add";
49898
49742
  }; //======== RENDER ========
49899
49743
 
49900
-
49901
- var renderLookupTakeValues = function renderLookupTakeValues() {
49902
- if (General.IsLookup) {
49903
- var loading = freezeLoading([Table.SelectedData.length === 0]);
49904
- return /*#__PURE__*/React__default.createElement(FlexItem$1, null, /*#__PURE__*/React__default.createElement(Button$1, {
49905
- tooltip: Localization.TakeValues,
49906
- onClick: function onClick() {
49907
- if (!loading) {
49908
- Lookup.TakeValues(Table.SelectedData);
49909
- if (ClearSelectedData) ClearSelectedData();
49910
- }
49911
- },
49912
- disabled: Table.SelectedData.length === 0,
49913
- icon: "arrow-circle-down",
49914
- inverted: true
49915
- }));
49916
- }
49917
-
49918
- return false;
49919
- };
49920
-
49921
49744
  var renderContextMenu = function renderContextMenu() {
49922
49745
  if (Options.EnableActions && General.CurrentView === ViewType.TABLE_VIEW && Table.Actions && Table.Actions.length > 0) {
49923
49746
  return /*#__PURE__*/React__default.createElement(FlexItem$1, null, /*#__PURE__*/React__default.createElement(DropdownMenu, {
@@ -50017,7 +49840,7 @@ var DataView = function DataView(props) {
50017
49840
 
50018
49841
  var renderSpinner = function renderSpinner() {
50019
49842
  if (!General.IsLoading) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
50020
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LoaderContainer$1, null), /*#__PURE__*/React__default.createElement(LoaderContainerTransparent$1, null, /*#__PURE__*/React__default.createElement(Loader$1, null, Table.Data.length > 2 ? /*#__PURE__*/React__default.createElement(Spinner, null) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null))));
49843
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LoaderContainer$1, null), /*#__PURE__*/React__default.createElement(LoaderContainerTransparent$1, null, /*#__PURE__*/React__default.createElement(Loader$1, null, Table.Data !== null && Table.Data.length > 2 ? /*#__PURE__*/React__default.createElement(Spinner, null) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null))));
50021
49844
  };
50022
49845
 
50023
49846
  var renderFiltering = function renderFiltering() {
@@ -50043,7 +49866,7 @@ var DataView = function DataView(props) {
50043
49866
  var x6 = General.CurrentView !== "TableView" ? false : true;
50044
49867
  var x7 = General.IsLookup && Table.SelectionType === "multiple" ? true : false;
50045
49868
  var x8 = Options.EnableActions && General.CurrentView === ViewType.TABLE_VIEW && Table.Actions && Table.Actions.length > 0;
50046
- if (x1 || x2 || x3 || x4 || x5 || x6 || x7 || x8) return /*#__PURE__*/React__default.createElement(HeaderContainer$1, null, renderChangeToTableView(), renderDeleteSelectedButton(), renderGoToAddButton(), renderFormViewMovement(), renderSwitchToEditModeButton(), renderRefreshButton(), renderLookupTakeValues(), renderContextMenu());
49869
+ if (x1 || x2 || x3 || x4 || x5 || x6 || x7 || x8) return /*#__PURE__*/React__default.createElement(HeaderContainer$1, null, renderChangeToTableView(), renderDeleteSelectedButton(), renderGoToAddButton(), renderFormViewMovement(), renderSwitchToEditModeButton(), renderRefreshButton(), renderContextMenu());
50047
49870
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
50048
49871
  };
50049
49872
 
@@ -52902,9 +52725,11 @@ Alet.defaultProps = {
52902
52725
  size: "small",
52903
52726
  theme: theme,
52904
52727
  color: "primary",
52905
- hasContainer: true
52728
+ hasContainer: true,
52729
+ message: ""
52906
52730
  };
52907
52731
  Alet.propTypes = {
52732
+ message: PropTypes.string,
52908
52733
  theme: PropTypes.object.isRequired,
52909
52734
  className: PropTypes.string,
52910
52735
  hasContainer: PropTypes.bool,
@@ -53325,7 +53150,7 @@ Item.propTypes = {
53325
53150
  var css_248z = ".option-item-enter {\n opacity: 0;\n}\n\n.option-item-enter-active {\n transition: all 0.2s ease-in;\n opacity: 1;\n}\n\n.option-item-exit {\n}\n\n.option--exit-active {\n opacity: 0;\n transition: opacity 200ms ease-out;\n}\n";
53326
53151
  styleInject(css_248z);
53327
53152
 
53328
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
53153
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
53329
53154
  var spin = keyframes$2(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 100% {\n transform: rotate(360deg);\n }\n\n 0% {\n transform: rotate(0deg);\n }\n"])));
53330
53155
 
53331
53156
  var getIconFontSize = function getIconFontSize(props) {
@@ -53373,7 +53198,7 @@ var Input = newStyled.input(_templateObject7 || (_templateObject7 = _taggedTempl
53373
53198
  var Content = newStyled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n position: absolute;\n background-color: white;\n z-index: 1;\n margin-top: 0.25rem;\n padding: 0.1875rem;\n width: calc(100% - 0.625rem);\n border-radius: 0.15625rem;\n box-shadow: 0 0 0.375rem #bebebe;\n border: 0.125rem solid ", ";\n flex-direction: column;\n transition: all 250ms ease;\n"])), function (props) {
53374
53199
  return props.theme.palette[props.color].main;
53375
53200
  });
53376
- var ContentItem = newStyled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n font-family: ", ";\n font-size: ", ";\n padding: 0.375rem;\n cursor: pointer;\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: whitesmoke;\n color: ", ";\n }\n"])), function (props) {
53201
+ var ContentItem = newStyled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n font-family: ", ";\n font-size: ", ";\n\n padding: 0.375rem;\n cursor: pointer;\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: whitesmoke;\n color: ", ";\n }\n"])), function (props) {
53377
53202
  return props.theme.typography.fontFamily;
53378
53203
  }, function (props) {
53379
53204
  return props.theme.typography[props.size].fontSize;
@@ -53408,12 +53233,14 @@ var LoadingIcon = newStyled.div(_templateObject12 || (_templateObject12 = _tagge
53408
53233
  var InnerContainer = newStyled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: no-wrap;\n align-items: stretch;\n"])));
53409
53234
  var ItemsContent = newStyled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n flex-grow: 1;\n"])));
53410
53235
  var Controls = newStyled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n display: flex;\n"])));
53236
+ var AddOptionText = newStyled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n font-weight: bold;\n"])));
53411
53237
 
53412
53238
  var MultiSelectDropdown = function MultiSelectDropdown(props) {
53413
53239
  var items = props.items,
53414
53240
  options = props.options,
53415
53241
  load = props.load,
53416
53242
  onChange = props.onChange,
53243
+ onAdd = props.onAdd,
53417
53244
  clearOptions = props.clearOptions,
53418
53245
  loading = props.loading,
53419
53246
  notItemsFoundText = props.notItemsFoundText,
@@ -53424,7 +53251,9 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
53424
53251
  mapValueTo = props.mapValueTo,
53425
53252
  size = props.size,
53426
53253
  color = props.color,
53427
- theme = props.theme;
53254
+ theme = props.theme,
53255
+ enableAdd = props.enableAdd,
53256
+ addOptionText = props.addOptionText;
53428
53257
 
53429
53258
  var _useState = useState(false),
53430
53259
  _useState2 = _slicedToArray(_useState, 2),
@@ -53466,17 +53295,23 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
53466
53295
 
53467
53296
  if (options !== null && options.length !== 0 && inFocus) {
53468
53297
  if (e.keyCode === 38 && cursor > 0) setCursor(cursor - 1);
53469
- if (e.keyCode === 40 && cursor < options.length - 1) setCursor(cursor + 1);
53470
- if (e.keyCode === 13) optionSelected([].concat(_toConsumableArray(items), [options[cursor]]));
53298
+
53299
+ if (e.keyCode === 40 && (cursor === options.length - 1 && enableAdd || cursor < options.length - 1)) {
53300
+ setCursor(cursor + 1);
53301
+ }
53302
+
53303
+ if (e.keyCode === 13 && cursor != options.length) optionSelected([].concat(_toConsumableArray(items), [options[cursor]]));
53304
+ if (e.keyCode === 13 && cursor === options.length && enableAdd) addNew();
53471
53305
 
53472
53306
  if (e.key === "Backspace" && items.length > 0 && value === "") {
53473
53307
  handleRemoveItem(items.length - 1);
53474
53308
  }
53475
53309
 
53476
- console.log("ARR DOWN");
53477
53310
  return;
53478
53311
  }
53479
53312
 
53313
+ if (e.keyCode === 13 && enableAdd && (options === null || options !== null && options.length === 0)) addNew();
53314
+
53480
53315
  if (e.keyCode === 40) {
53481
53316
  setInFocus(true);
53482
53317
  setCursor(0);
@@ -53502,6 +53337,14 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
53502
53337
  setCursor(0);
53503
53338
  };
53504
53339
 
53340
+ var addNew = function addNew() {
53341
+ onAdd(value);
53342
+ setValue("");
53343
+ clearOptions(id);
53344
+ setInFocus(false);
53345
+ setCursor(0);
53346
+ };
53347
+
53505
53348
  var onInputBlur = function onInputBlur() {
53506
53349
  setInFocus(false);
53507
53350
  setInputFocus(false);
@@ -53539,7 +53382,15 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
53539
53382
  },
53540
53383
  hover: cursor === i
53541
53384
  }), item[mapValueTo]);
53542
- })));
53385
+ }), enableAdd && !options.map(function (y) {
53386
+ return y.value;
53387
+ }).includes(value) ? /*#__PURE__*/React__default.createElement(ContentItem, _extends({}, themeProps, {
53388
+ key: options.length,
53389
+ onMouseDown: function onMouseDown() {
53390
+ return addNew();
53391
+ },
53392
+ hover: cursor === options.length
53393
+ }), /*#__PURE__*/React__default.createElement(AddOptionText, null, addOptionText), value) : ""));
53543
53394
  }
53544
53395
 
53545
53396
  var empty = options === null || options !== null && options.length === 0;
@@ -53547,9 +53398,15 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
53547
53398
  if (inFocus && empty && loading === false) {
53548
53399
  return /*#__PURE__*/React__default.createElement(FadeIn, null, /*#__PURE__*/React__default.createElement(Content, _extends({}, themeProps, {
53549
53400
  key: 0
53550
- }), /*#__PURE__*/React__default.createElement(ContentItem, _extends({}, themeProps, {
53401
+ }), enableAdd ? /*#__PURE__*/React__default.createElement(ContentItem, _extends({}, themeProps, {
53551
53402
  key: 0,
53552
- hover: true,
53403
+ onMouseDown: function onMouseDown() {
53404
+ return addNew();
53405
+ },
53406
+ hover: true
53407
+ }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, notItemsFoundText, /*#__PURE__*/React__default.createElement(AddOptionText, null, addOptionText), value)) : /*#__PURE__*/React__default.createElement(ContentItem, _extends({}, themeProps, {
53408
+ key: 0,
53409
+ hover: false,
53553
53410
  onMouseDown: onInputBlur
53554
53411
  }), notItemsFoundText)));
53555
53412
  }
@@ -53610,6 +53467,7 @@ MultiSelectDropdown.defaultProps = {
53610
53467
  disabled: false,
53611
53468
  load: function load() {},
53612
53469
  onChange: function onChange() {},
53470
+ onAdd: function onAdd() {},
53613
53471
  clearOptions: function clearOptions() {},
53614
53472
  items: [],
53615
53473
  options: [],
@@ -53619,7 +53477,9 @@ MultiSelectDropdown.defaultProps = {
53619
53477
  notItemsFoundText: "No items found...",
53620
53478
  theme: theme,
53621
53479
  mapIdTo: "id",
53622
- mapValueTo: "value"
53480
+ mapValueTo: "value",
53481
+ enableAdd: false,
53482
+ addOptionText: "Add new item"
53623
53483
  };
53624
53484
  MultiSelectDropdown.propTypes = {
53625
53485
  theme: PropTypes.object.isRequired,
@@ -53627,6 +53487,7 @@ MultiSelectDropdown.propTypes = {
53627
53487
  disabled: PropTypes.bool,
53628
53488
  load: PropTypes.func,
53629
53489
  onChange: PropTypes.func,
53490
+ onAdd: PropTypes.func,
53630
53491
  clearOptions: PropTypes.func,
53631
53492
  className: PropTypes.string,
53632
53493
  items: PropTypes.array,
@@ -53635,7 +53496,9 @@ MultiSelectDropdown.propTypes = {
53635
53496
  mapValueTo: PropTypes.string,
53636
53497
  notItemsFoundText: PropTypes.string,
53637
53498
  size: PropTypes.oneOf(["small", "medium", "large"]),
53638
- color: PropTypes.oneOf(["primary", "secondary", "success", "error", "warning", "gray", "background", "transparent"])
53499
+ color: PropTypes.oneOf(["primary", "secondary", "success", "error", "warning", "gray", "background", "transparent"]),
53500
+ enableAdd: PropTypes.bool,
53501
+ addOptionText: PropTypes.string
53639
53502
  };
53640
53503
 
53641
53504
  export { Alet as Alert, Button$1 as Button, CheckBox, CheckboxLookup, ConfirmationForm, DataView, DateInput, DropDown, DropdownLookup, DropdownMenu, FormContainer, FormField, Grid, Icon$1 as Icon, ItemCounter, Modal$1 as Modal, MultiSelectDropdown, NumberInput, Pagination, PasswordInput, PeriodSelector, SearchBar, Spinner, Tabs, TagSelector, TextArea, TextInput, ToggleSwitch, theme };
package/lib/index.js CHANGED
@@ -31354,7 +31354,9 @@ var Content$4 = newStyled.div(function (props) {
31354
31354
  padding: "0.3125rem",
31355
31355
  border: "0.065rem solid ".concat(props.theme.palette.gray[600]),
31356
31356
  borderTop: props.basic ? "none" : "0.065rem solid ".concat(props.theme.palette.gray[600]),
31357
- borderRadius: "0 0 0.2rem 0.2rem"
31357
+ borderRadius: "0 0 0.2rem 0.2rem",
31358
+ maxHeight: "calc(100vh - 220px)",
31359
+ overflowY: "auto"
31358
31360
  };
31359
31361
  });
31360
31362
 
@@ -49321,97 +49323,26 @@ var TableView = function TableView(props) {
49321
49323
  OnHeaderClick = _props$Config$OnHeade === void 0 ? function () {} : _props$Config$OnHeade,
49322
49324
  ReadOnly = _props$Config.ReadOnly,
49323
49325
  _props$Config$IsLooku = _props$Config.IsLookup,
49324
- IsLookup = _props$Config$IsLooku === void 0 ? false : _props$Config$IsLooku;
49326
+ IsLookup = _props$Config$IsLooku === void 0 ? false : _props$Config$IsLooku,
49327
+ _props$Config$LookupT = _props$Config.LookupTakeItem,
49328
+ LookupTakeItem = _props$Config$LookupT === void 0 ? function () {} : _props$Config$LookupT;
49325
49329
  var _props$Localization = props.Localization,
49326
49330
  Localization = _props$Localization === void 0 ? {} : _props$Localization;
49327
49331
  props.Export;
49328
49332
  props.Icons;
49329
- // const [headerHoverIndex, setHeaderHoverIndex] = useState(-1);
49330
- // const [rowHoverIndex, setRowHoverIndex] = useState(-1);
49331
- // const [rowSelectedIndices, setRowSelectedIndices] = useState([]);
49332
- //======== FUNCTIONS ========
49333
+ //======== FUNCTIONS ========
49333
49334
 
49334
49335
  function isFunction(functionToCheck) {
49335
49336
  return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
49336
49337
  }
49337
49338
 
49338
49339
  var handleOnSelection = function handleOnSelection(rowData, val) {
49339
- // if (e.target.checked && rowIndex >= 0) {
49340
- // if (SelectionType === TableSelectionType.MULTIPLE) {
49341
- // let tmpArray = [...rowSelectedIndices];
49342
- // tmpArray.push(rowIndex);
49343
- // // setRowSelectedIndices(tmpArray);
49344
- // } else if (SelectionType === TableSelectionType.SINGLE) {
49345
- // // setRowSelectedIndices([rowIndex]);
49346
- // }
49347
- // } else if (!e.target.checked && rowIndex >= 0) {
49348
- // if (SelectionType === TableSelectionType.MULTIPLE) {
49349
- // let tmpArray = rowSelectedIndices.map((x) => x !== rowIndex);
49350
- // // setRowSelectedIndices(tmpArray);
49351
- // } else if (SelectionType === TableSelectionType.SINGLE) {
49352
- // // setRowSelectedIndices([]);
49353
- // }
49354
- // }
49355
49340
  OnSelection(rowData, val, SelectionType);
49356
49341
  };
49357
49342
 
49358
49343
  var handleSelectAll = function handleSelectAll(val) {
49359
49344
  OnSelectAll(val);
49360
49345
  }; //======== RENDER ========
49361
- // const renderSelectionHeader = () => {
49362
- // if (!EnableSelection || ReadOnly) return null;
49363
- // if (props.accentColor) {
49364
- // const style = {
49365
- // backgroundColor: props.accentColor,
49366
- // color: props.color
49367
- // ? props.color
49368
- // : isColorDark(props.accentColor)
49369
- // ? "white"
49370
- // : "black",
49371
- // };
49372
- // const styleForHover = {
49373
- // backgroundColor: getDarkerColor(props.accentColor, 0.2),
49374
- // color: props.color
49375
- // ? props.color
49376
- // : isColorDark(props.accentColor)
49377
- // ? "white"
49378
- // : "black",
49379
- // };
49380
- // return (
49381
- // <th
49382
- // className={mergeCSS([styles.header, styles.selectColumn])}
49383
- // style={headerHoverIndex === 0 ? styleForHover : style}
49384
- // onMouseEnter={() => setHeaderHoverIndex(0)}
49385
- // onMouseLeave={() => setHeaderHoverIndex(-1)}
49386
- // >
49387
- // {renderSelectAll()}
49388
- // </th>
49389
- // );
49390
- // }
49391
- // return (
49392
- // <th className={mergeCSS([styles.header, styles.selectColumn])}>
49393
- // {renderSelectAll()}
49394
- // </th>
49395
- // );
49396
- // };
49397
- // const renderSelectAll = () => {
49398
- // if (SelectionType === TableSelectionType.MULTIPLE) {
49399
- // return (
49400
- // <input
49401
- // title={
49402
- // SelectedEntirePage
49403
- // ? Localization.DeselectAll
49404
- // : Localization.SelectAll
49405
- // }
49406
- // type="checkbox"
49407
- // checked={SelectedEntirePage}
49408
- // onChange={(e) => OnSelectAll(e.target.checked)}
49409
- // className={styles.pointer}
49410
- // ></input>
49411
- // );
49412
- // }
49413
- // return null;
49414
- // };
49415
49346
 
49416
49347
 
49417
49348
  var isItemInArray = function isItemInArray(item, array, byProp) {
@@ -49419,33 +49350,7 @@ var TableView = function TableView(props) {
49419
49350
  return x[byProp] === item[byProp];
49420
49351
  }));
49421
49352
  return array.indexOf(item) > -1;
49422
- }; // const renderSelectionCheckbox = (rowData, rowIndex = -1) => {
49423
- // if (EnableSelection && !ReadOnly) {
49424
- // return (
49425
- // <td
49426
- // className={mergeCSS([styles.specialRenderCell, styles.selectColumn])}
49427
- // >
49428
- // <input
49429
- // type="checkbox"
49430
- // checked={isItemInArray(rowData, SelectedData, SelectionIndicator)}
49431
- // onChange={(e) => handleOnSelection(rowData, e, rowIndex)}
49432
- // className={styles.pointer}
49433
- // ></input>
49434
- // </td>
49435
- // );
49436
- // } else return <></>;
49437
- // };
49438
- // const renderHeader = () => {
49439
- // return (
49440
- // <tr>
49441
- // {renderSelectionHeader()}
49442
- // {Columns.filter((x) => x.hide !== true).map((def, i) =>
49443
- // renderHeaderCell(def, i)
49444
- // )}
49445
- // </tr>
49446
- // );
49447
- // };
49448
-
49353
+ };
49449
49354
 
49450
49355
  var renderBody = function renderBody() {
49451
49356
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, Data.map(function (dataItem, i) {
@@ -49466,42 +49371,24 @@ var TableView = function TableView(props) {
49466
49371
  }).map(function (col, j) {
49467
49372
  return renderBodyCell(dataItem, col, i, j);
49468
49373
  })));
49469
- }; // const renderCell = (rowData, def, key) => {
49470
- // let onClick = !isFunction(def.specialRender)
49471
- // ? () => {
49472
- // ChangeToFormView(rowData);
49473
- // }
49474
- // : () => {};
49475
- // if (!EnableFormView) onClick = () => {};
49476
- // if (!EnableFormView && EnableSelection) {
49477
- // var checked = isItemInArray(rowData, SelectedData, SelectionIndicator);
49478
- // onClick = () =>
49479
- // handleOnSelection(rowData, { target: { checked: !checked } });
49480
- // }
49481
- // let cellData =
49482
- // def.isObject === true
49483
- // ? rowData[def.accessor][def.objectAccessor]
49484
- // : rowData[def.accessor];
49485
- // return (
49486
- // <td key={key} className={styles.cell} onClick={onClick}>
49487
- // {isFunction(def.specialRender) ? def.specialRender(rowData) : cellData}
49488
- // </td>
49489
- // );
49490
- // };
49491
-
49374
+ };
49492
49375
 
49493
49376
  var renderBodyCell = function renderBodyCell(dataItem, def, rowIndex, cellIndex) {
49494
49377
  var tabIndex = rowIndex * Columns.length + cellIndex + 50;
49495
49378
  var onClick = !isFunction(def.specialRender) ? function () {
49496
49379
  ChangeToFormView(dataItem);
49497
49380
  } : function () {};
49498
- if (!EnableFormView) onClick = function onClick() {}; // if (!EnableFormView && EnableSelection) {
49499
- // var checked = isItemInArray(dataItem, SelectedData, SelectionIndicator);
49500
- // onClick = () =>
49501
- // handleOnSelection(dataItem, { target: { checked: !checked } });
49502
- // }
49381
+ if (!EnableFormView) onClick = function onClick() {};
49382
+ if (!EnableSelection || ReadOnly) onClick = function onClick() {};
49383
+
49384
+ if (IsLookup) {
49385
+ onClick = function onClick() {
49386
+ if (!IsLoading) {
49387
+ LookupTakeItem(dataItem);
49388
+ }
49389
+ };
49390
+ }
49503
49391
 
49504
- if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) onClick = function onClick() {};
49505
49392
  var cellData = def.isObject === true ? dataItem[def.accessor][def.objectAccessor] : dataItem[def.accessor];
49506
49393
  return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
49507
49394
  key: tabIndex,
@@ -49510,7 +49397,22 @@ var TableView = function TableView(props) {
49510
49397
  };
49511
49398
 
49512
49399
  var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
49513
- if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
49400
+ if (IsLookup) {
49401
+ return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
49402
+ selectionCell: true,
49403
+ key: -1
49404
+ }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
49405
+ inverted: true,
49406
+ onClick: function onClick() {
49407
+ if (!IsLoading) {
49408
+ LookupTakeItem(dataItem);
49409
+ }
49410
+ },
49411
+ icon: "arrow-right"
49412
+ }));
49413
+ }
49414
+
49415
+ if (!EnableSelection || ReadOnly || IsLookup) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
49514
49416
  return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
49515
49417
  selectionCell: true,
49516
49418
  key: -1
@@ -49521,60 +49423,7 @@ var TableView = function TableView(props) {
49521
49423
  },
49522
49424
  id: rowIndex
49523
49425
  }));
49524
- }; // const renderRow = (rowData, key) => {
49525
- // let evenOddClass = key % 2 === 0 ? styles.tableRowEven : styles.tableRowOdd;
49526
- // let selectionClass = isItemInArray(
49527
- // rowData,
49528
- // SelectedData,
49529
- // SelectionIndicator
49530
- // )
49531
- // ? styles.checkedRow
49532
- // : "";
49533
- // if (props.accentColor) {
49534
- // const style = {
49535
- // border: "0px",
49536
- // backgroundColor: key % 2 === 0 ? "white" : "whitesmoke",
49537
- // borderLeft: "1px solid transparent",
49538
- // borderRight: "1px solid transparent",
49539
- // borderTop: "1px solid transparent",
49540
- // };
49541
- // const styleForHover = {
49542
- // border: "1px solid " + getLighterColor(props.accentColor, 0.75),
49543
- // backgroundColor: key % 2 === 0 ? "white" : "whitesmoke",
49544
- // };
49545
- // const styleForSelect = {
49546
- // backgroundColor: getLighterColor(props.accentColor, 0.75),
49547
- // };
49548
- // return (
49549
- // <tr
49550
- // key={key}
49551
- // style={
49552
- // rowSelectedIndices.includes(key)
49553
- // ? styleForSelect
49554
- // : rowHoverIndex === key
49555
- // ? styleForHover
49556
- // : style
49557
- // }
49558
- // onMouseEnter={() => setRowHoverIndex(key)}
49559
- // onMouseLeave={() => setRowHoverIndex(-1)}
49560
- // >
49561
- // {renderSelectionCheckbox(rowData, key)}
49562
- // {Columns.filter((x) => x.hide !== true).map((def, i) =>
49563
- // renderCell(rowData, def, i)
49564
- // )}
49565
- // </tr>
49566
- // );
49567
- // }
49568
- // return (
49569
- // <tr key={key} className={evenOddClass + " " + selectionClass}>
49570
- // {renderSelectionCheckbox(rowData)}
49571
- // {Columns.filter((x) => x.hide !== true).map((def, i) =>
49572
- // renderCell(rowData, def, i)
49573
- // )}
49574
- // </tr>
49575
- // );
49576
- // };
49577
-
49426
+ };
49578
49427
 
49579
49428
  var renderHeaderCell = function renderHeaderCell(def, i) {
49580
49429
  var headerClick = function headerClick() {};
@@ -49610,6 +49459,10 @@ var TableView = function TableView(props) {
49610
49459
  };
49611
49460
 
49612
49461
  var renderSelectAllHeaderCell = function renderSelectAllHeaderCell() {
49462
+ if (IsLookup) return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
49463
+ selectionCell: true,
49464
+ key: -1
49465
+ });
49613
49466
  if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
49614
49467
  if (SelectedEntirePage && Localization.DeselectAll) ;
49615
49468
  if (!SelectedEntirePage && Localization.SelectAll) ;
@@ -49631,17 +49484,7 @@ var TableView = function TableView(props) {
49631
49484
  return x.hide !== true;
49632
49485
  }).map(function (col, i) {
49633
49486
  return renderHeaderCell(col, i);
49634
- }))), /*#__PURE__*/React__default['default'].createElement(TableBody$1, null, renderBody())))); // return (
49635
- // <div>
49636
- // <div className={styles.tableDiv}>
49637
- // <table className={styles.table}>
49638
- // <thead>{renderHeader()}</thead>
49639
- // <tbody>{renderBody()}</tbody>
49640
- // </table>
49641
- // </div>
49642
- // <div>{renderPagination()}</div>
49643
- // </div>
49644
- // );
49487
+ }))), /*#__PURE__*/React__default['default'].createElement(TableBody$1, null, renderBody()))));
49645
49488
  };
49646
49489
 
49647
49490
  var _templateObject$e, _templateObject2$a;
@@ -49727,7 +49570,7 @@ var Container$c = newStyled.div(_templateObject$d || (_templateObject$d = _tagge
49727
49570
  });
49728
49571
  var TableContainer$1 = newStyled.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral__default['default'](["\n font-family: var(--font-base-ubuntu);\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n"])));
49729
49572
  var PaginationContainer$1 = newStyled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n border-top: 1px solid #80808025;\n"])));
49730
- var FormContainer$2 = newStyled.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral__default['default'](["\n height: 100%;\n overflow-y: auto;\n max-height: calc(100vh - 120px);\n border-radius: 3px;\n\n ", "\n"])), function (props) {
49573
+ var FormContainer$2 = newStyled.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral__default['default'](["\n height: 100%;\n // overflow-y: auto;\n // max-height: calc(100vh - 120px);\n border-radius: 3px;\n\n ", "\n"])), function (props) {
49731
49574
  return getBorderSyle$1(props.borderStyle, props.read, props.theme, props.color);
49732
49575
  });
49733
49576
  var HeaderContainer$1 = newStyled.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items: center;\n padding: 4px 0;\n border-radius: 3px;\n font-size: 12px;\n font-family: \"Ubuntu\";\n"])));
@@ -49787,12 +49630,10 @@ var DataView = function DataView(props) {
49787
49630
  GoToAdd = _props$GoToAdd === void 0 ? emptyFunc : _props$GoToAdd;
49788
49631
  props.GoToAddWithCopy;
49789
49632
  var _props$DiscardEdited = props.DiscardEdited,
49790
- DiscardEdited = _props$DiscardEdited === void 0 ? emptyFunc : _props$DiscardEdited,
49791
- _props$SetSelectedDat = props.SetSelectedData,
49792
- SetSelectedData = _props$SetSelectedDat === void 0 ? emptyFunc : _props$SetSelectedDat,
49793
- _props$ClearSelectedD = props.ClearSelectedData,
49794
- ClearSelectedData = _props$ClearSelectedD === void 0 ? emptyFunc : _props$ClearSelectedD,
49795
- _props$Localization = props.Localization,
49633
+ DiscardEdited = _props$DiscardEdited === void 0 ? emptyFunc : _props$DiscardEdited;
49634
+ props.SetSelectedData;
49635
+ props.ClearSelectedData;
49636
+ var _props$Localization = props.Localization,
49796
49637
  Localization = _props$Localization === void 0 ? {} : _props$Localization,
49797
49638
  _props$Export = props.Export,
49798
49639
  Export = _props$Export === void 0 ? function () {} : _props$Export,
@@ -49868,15 +49709,15 @@ var DataView = function DataView(props) {
49868
49709
  size: size,
49869
49710
  color: color
49870
49711
  }; //======== LOOKUP ========
49871
-
49872
- React.useEffect(function () {
49873
- if (General.IsLookup) SetSelectedData(Lookup.SelectedData);
49874
- }, [Lookup.SelectedData]);
49875
- React.useEffect(function () {
49876
- return function cleanup() {
49877
- if (General.IsLookup) ClearSelectedData();
49878
- };
49879
- }, []); //======== CONFIGS ========
49712
+ // useEffect(() => {
49713
+ // if (General.IsLookup) SetSelectedData(Lookup.SelectedData);
49714
+ // }, [Lookup.SelectedData]);
49715
+ // useEffect(() => {
49716
+ // return function cleanup() {
49717
+ // if (General.IsLookup) ClearSelectedData();
49718
+ // };
49719
+ // }, []);
49720
+ //======== CONFIGS ========
49880
49721
 
49881
49722
  var formViewMovementConfig = {
49882
49723
  Dirty: Form.Dirty,
@@ -49908,6 +49749,9 @@ var DataView = function DataView(props) {
49908
49749
  SelectedData: Table.SelectedData,
49909
49750
  ChangeToFormView: ChangeToFormView,
49910
49751
  //---------------------------
49752
+ IsLookup: General.IsLookup,
49753
+ LookupTakeItem: Lookup.LookupTakeItem ? Lookup.LookupTakeItem : function () {},
49754
+ //---------------------------
49911
49755
  EnableOrdering: Options.EnableOrdering,
49912
49756
  Column: Ordering.Column,
49913
49757
  Accessor: Ordering.Accessor,
@@ -49938,27 +49782,6 @@ var DataView = function DataView(props) {
49938
49782
  if (Form.Mode === FormMode.ADD) return "add";
49939
49783
  }; //======== RENDER ========
49940
49784
 
49941
-
49942
- var renderLookupTakeValues = function renderLookupTakeValues() {
49943
- if (General.IsLookup) {
49944
- var loading = freezeLoading([Table.SelectedData.length === 0]);
49945
- return /*#__PURE__*/React__default['default'].createElement(FlexItem$1, null, /*#__PURE__*/React__default['default'].createElement(Button$1, {
49946
- tooltip: Localization.TakeValues,
49947
- onClick: function onClick() {
49948
- if (!loading) {
49949
- Lookup.TakeValues(Table.SelectedData);
49950
- if (ClearSelectedData) ClearSelectedData();
49951
- }
49952
- },
49953
- disabled: Table.SelectedData.length === 0,
49954
- icon: "arrow-circle-down",
49955
- inverted: true
49956
- }));
49957
- }
49958
-
49959
- return false;
49960
- };
49961
-
49962
49785
  var renderContextMenu = function renderContextMenu() {
49963
49786
  if (Options.EnableActions && General.CurrentView === ViewType.TABLE_VIEW && Table.Actions && Table.Actions.length > 0) {
49964
49787
  return /*#__PURE__*/React__default['default'].createElement(FlexItem$1, null, /*#__PURE__*/React__default['default'].createElement(DropdownMenu, {
@@ -50058,7 +49881,7 @@ var DataView = function DataView(props) {
50058
49881
 
50059
49882
  var renderSpinner = function renderSpinner() {
50060
49883
  if (!General.IsLoading) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
50061
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(LoaderContainer$1, null), /*#__PURE__*/React__default['default'].createElement(LoaderContainerTransparent$1, null, /*#__PURE__*/React__default['default'].createElement(Loader$1, null, Table.Data.length > 2 ? /*#__PURE__*/React__default['default'].createElement(Spinner, null) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null))));
49884
+ return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(LoaderContainer$1, null), /*#__PURE__*/React__default['default'].createElement(LoaderContainerTransparent$1, null, /*#__PURE__*/React__default['default'].createElement(Loader$1, null, Table.Data !== null && Table.Data.length > 2 ? /*#__PURE__*/React__default['default'].createElement(Spinner, null) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null))));
50062
49885
  };
50063
49886
 
50064
49887
  var renderFiltering = function renderFiltering() {
@@ -50084,7 +49907,7 @@ var DataView = function DataView(props) {
50084
49907
  var x6 = General.CurrentView !== "TableView" ? false : true;
50085
49908
  var x7 = General.IsLookup && Table.SelectionType === "multiple" ? true : false;
50086
49909
  var x8 = Options.EnableActions && General.CurrentView === ViewType.TABLE_VIEW && Table.Actions && Table.Actions.length > 0;
50087
- if (x1 || x2 || x3 || x4 || x5 || x6 || x7 || x8) return /*#__PURE__*/React__default['default'].createElement(HeaderContainer$1, null, renderChangeToTableView(), renderDeleteSelectedButton(), renderGoToAddButton(), renderFormViewMovement(), renderSwitchToEditModeButton(), renderRefreshButton(), renderLookupTakeValues(), renderContextMenu());
49910
+ if (x1 || x2 || x3 || x4 || x5 || x6 || x7 || x8) return /*#__PURE__*/React__default['default'].createElement(HeaderContainer$1, null, renderChangeToTableView(), renderDeleteSelectedButton(), renderGoToAddButton(), renderFormViewMovement(), renderSwitchToEditModeButton(), renderRefreshButton(), renderContextMenu());
50088
49911
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
50089
49912
  };
50090
49913
 
@@ -52943,9 +52766,11 @@ Alet.defaultProps = {
52943
52766
  size: "small",
52944
52767
  theme: theme,
52945
52768
  color: "primary",
52946
- hasContainer: true
52769
+ hasContainer: true,
52770
+ message: ""
52947
52771
  };
52948
52772
  Alet.propTypes = {
52773
+ message: PropTypes__default['default'].string,
52949
52774
  theme: PropTypes__default['default'].object.isRequired,
52950
52775
  className: PropTypes__default['default'].string,
52951
52776
  hasContainer: PropTypes__default['default'].bool,
@@ -53366,7 +53191,7 @@ Item.propTypes = {
53366
53191
  var css_248z = ".option-item-enter {\n opacity: 0;\n}\n\n.option-item-enter-active {\n transition: all 0.2s ease-in;\n opacity: 1;\n}\n\n.option-item-exit {\n}\n\n.option--exit-active {\n opacity: 0;\n transition: opacity 200ms ease-out;\n}\n";
53367
53192
  styleInject(css_248z);
53368
53193
 
53369
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
53194
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
53370
53195
  var spin = keyframes$2(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n 100% {\n transform: rotate(360deg);\n }\n\n 0% {\n transform: rotate(0deg);\n }\n"])));
53371
53196
 
53372
53197
  var getIconFontSize = function getIconFontSize(props) {
@@ -53414,7 +53239,7 @@ var Input = newStyled.input(_templateObject7 || (_templateObject7 = _taggedTempl
53414
53239
  var Content = newStyled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n position: absolute;\n background-color: white;\n z-index: 1;\n margin-top: 0.25rem;\n padding: 0.1875rem;\n width: calc(100% - 0.625rem);\n border-radius: 0.15625rem;\n box-shadow: 0 0 0.375rem #bebebe;\n border: 0.125rem solid ", ";\n flex-direction: column;\n transition: all 250ms ease;\n"])), function (props) {
53415
53240
  return props.theme.palette[props.color].main;
53416
53241
  });
53417
- var ContentItem = newStyled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default['default'](["\n font-family: ", ";\n font-size: ", ";\n padding: 0.375rem;\n cursor: pointer;\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: whitesmoke;\n color: ", ";\n }\n"])), function (props) {
53242
+ var ContentItem = newStyled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default['default'](["\n font-family: ", ";\n font-size: ", ";\n\n padding: 0.375rem;\n cursor: pointer;\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: whitesmoke;\n color: ", ";\n }\n"])), function (props) {
53418
53243
  return props.theme.typography.fontFamily;
53419
53244
  }, function (props) {
53420
53245
  return props.theme.typography[props.size].fontSize;
@@ -53449,12 +53274,14 @@ var LoadingIcon = newStyled.div(_templateObject12 || (_templateObject12 = _tagge
53449
53274
  var InnerContainer = newStyled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-wrap: no-wrap;\n align-items: stretch;\n"])));
53450
53275
  var ItemsContent = newStyled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral__default['default'](["\n flex-grow: 1;\n"])));
53451
53276
  var Controls = newStyled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n"])));
53277
+ var AddOptionText = newStyled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral__default['default'](["\n font-weight: bold;\n"])));
53452
53278
 
53453
53279
  var MultiSelectDropdown = function MultiSelectDropdown(props) {
53454
53280
  var items = props.items,
53455
53281
  options = props.options,
53456
53282
  load = props.load,
53457
53283
  onChange = props.onChange,
53284
+ onAdd = props.onAdd,
53458
53285
  clearOptions = props.clearOptions,
53459
53286
  loading = props.loading,
53460
53287
  notItemsFoundText = props.notItemsFoundText,
@@ -53465,7 +53292,9 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
53465
53292
  mapValueTo = props.mapValueTo,
53466
53293
  size = props.size,
53467
53294
  color = props.color,
53468
- theme = props.theme;
53295
+ theme = props.theme,
53296
+ enableAdd = props.enableAdd,
53297
+ addOptionText = props.addOptionText;
53469
53298
 
53470
53299
  var _useState = React.useState(false),
53471
53300
  _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -53507,17 +53336,23 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
53507
53336
 
53508
53337
  if (options !== null && options.length !== 0 && inFocus) {
53509
53338
  if (e.keyCode === 38 && cursor > 0) setCursor(cursor - 1);
53510
- if (e.keyCode === 40 && cursor < options.length - 1) setCursor(cursor + 1);
53511
- if (e.keyCode === 13) optionSelected([].concat(_toConsumableArray__default['default'](items), [options[cursor]]));
53339
+
53340
+ if (e.keyCode === 40 && (cursor === options.length - 1 && enableAdd || cursor < options.length - 1)) {
53341
+ setCursor(cursor + 1);
53342
+ }
53343
+
53344
+ if (e.keyCode === 13 && cursor != options.length) optionSelected([].concat(_toConsumableArray__default['default'](items), [options[cursor]]));
53345
+ if (e.keyCode === 13 && cursor === options.length && enableAdd) addNew();
53512
53346
 
53513
53347
  if (e.key === "Backspace" && items.length > 0 && value === "") {
53514
53348
  handleRemoveItem(items.length - 1);
53515
53349
  }
53516
53350
 
53517
- console.log("ARR DOWN");
53518
53351
  return;
53519
53352
  }
53520
53353
 
53354
+ if (e.keyCode === 13 && enableAdd && (options === null || options !== null && options.length === 0)) addNew();
53355
+
53521
53356
  if (e.keyCode === 40) {
53522
53357
  setInFocus(true);
53523
53358
  setCursor(0);
@@ -53543,6 +53378,14 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
53543
53378
  setCursor(0);
53544
53379
  };
53545
53380
 
53381
+ var addNew = function addNew() {
53382
+ onAdd(value);
53383
+ setValue("");
53384
+ clearOptions(id);
53385
+ setInFocus(false);
53386
+ setCursor(0);
53387
+ };
53388
+
53546
53389
  var onInputBlur = function onInputBlur() {
53547
53390
  setInFocus(false);
53548
53391
  setInputFocus(false);
@@ -53580,7 +53423,15 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
53580
53423
  },
53581
53424
  hover: cursor === i
53582
53425
  }), item[mapValueTo]);
53583
- })));
53426
+ }), enableAdd && !options.map(function (y) {
53427
+ return y.value;
53428
+ }).includes(value) ? /*#__PURE__*/React__default['default'].createElement(ContentItem, _extends__default['default']({}, themeProps, {
53429
+ key: options.length,
53430
+ onMouseDown: function onMouseDown() {
53431
+ return addNew();
53432
+ },
53433
+ hover: cursor === options.length
53434
+ }), /*#__PURE__*/React__default['default'].createElement(AddOptionText, null, addOptionText), value) : ""));
53584
53435
  }
53585
53436
 
53586
53437
  var empty = options === null || options !== null && options.length === 0;
@@ -53588,9 +53439,15 @@ var MultiSelectDropdown = function MultiSelectDropdown(props) {
53588
53439
  if (inFocus && empty && loading === false) {
53589
53440
  return /*#__PURE__*/React__default['default'].createElement(FadeIn, null, /*#__PURE__*/React__default['default'].createElement(Content, _extends__default['default']({}, themeProps, {
53590
53441
  key: 0
53591
- }), /*#__PURE__*/React__default['default'].createElement(ContentItem, _extends__default['default']({}, themeProps, {
53442
+ }), enableAdd ? /*#__PURE__*/React__default['default'].createElement(ContentItem, _extends__default['default']({}, themeProps, {
53592
53443
  key: 0,
53593
- hover: true,
53444
+ onMouseDown: function onMouseDown() {
53445
+ return addNew();
53446
+ },
53447
+ hover: true
53448
+ }), /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, notItemsFoundText, /*#__PURE__*/React__default['default'].createElement(AddOptionText, null, addOptionText), value)) : /*#__PURE__*/React__default['default'].createElement(ContentItem, _extends__default['default']({}, themeProps, {
53449
+ key: 0,
53450
+ hover: false,
53594
53451
  onMouseDown: onInputBlur
53595
53452
  }), notItemsFoundText)));
53596
53453
  }
@@ -53651,6 +53508,7 @@ MultiSelectDropdown.defaultProps = {
53651
53508
  disabled: false,
53652
53509
  load: function load() {},
53653
53510
  onChange: function onChange() {},
53511
+ onAdd: function onAdd() {},
53654
53512
  clearOptions: function clearOptions() {},
53655
53513
  items: [],
53656
53514
  options: [],
@@ -53660,7 +53518,9 @@ MultiSelectDropdown.defaultProps = {
53660
53518
  notItemsFoundText: "No items found...",
53661
53519
  theme: theme,
53662
53520
  mapIdTo: "id",
53663
- mapValueTo: "value"
53521
+ mapValueTo: "value",
53522
+ enableAdd: false,
53523
+ addOptionText: "Add new item"
53664
53524
  };
53665
53525
  MultiSelectDropdown.propTypes = {
53666
53526
  theme: PropTypes__default['default'].object.isRequired,
@@ -53668,6 +53528,7 @@ MultiSelectDropdown.propTypes = {
53668
53528
  disabled: PropTypes__default['default'].bool,
53669
53529
  load: PropTypes__default['default'].func,
53670
53530
  onChange: PropTypes__default['default'].func,
53531
+ onAdd: PropTypes__default['default'].func,
53671
53532
  clearOptions: PropTypes__default['default'].func,
53672
53533
  className: PropTypes__default['default'].string,
53673
53534
  items: PropTypes__default['default'].array,
@@ -53676,7 +53537,9 @@ MultiSelectDropdown.propTypes = {
53676
53537
  mapValueTo: PropTypes__default['default'].string,
53677
53538
  notItemsFoundText: PropTypes__default['default'].string,
53678
53539
  size: PropTypes__default['default'].oneOf(["small", "medium", "large"]),
53679
- color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray", "background", "transparent"])
53540
+ color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray", "background", "transparent"]),
53541
+ enableAdd: PropTypes__default['default'].bool,
53542
+ addOptionText: PropTypes__default['default'].string
53680
53543
  };
53681
53544
 
53682
53545
  exports.Alert = Alet;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lanaco/lnc-react-ui",
3
- "version": "2.1.12",
3
+ "version": "2.1.16",
4
4
  "description": "component library",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",