@lanaco/lnc-react-ui 2.1.23 → 2.1.27

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 +50 -23
  2. package/lib/index.js +50 -23
  3. package/package.json +1 -1
package/lib/index.esm.js CHANGED
@@ -2326,6 +2326,7 @@ var Button$1 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
2326
2326
  var handleOnClick = function handleOnClick(e) {
2327
2327
  if (preventDefault) e.preventDefault();
2328
2328
  onClick(id);
2329
+ if (e.stopImmediatePropagation) e.stopImmediatePropagation();
2329
2330
  };
2330
2331
 
2331
2332
  var title = "";
@@ -49340,9 +49341,11 @@ var TableView = function TableView(props) {
49340
49341
 
49341
49342
  var renderBodyCell = function renderBodyCell(dataItem, def, rowIndex, cellIndex) {
49342
49343
  var tabIndex = rowIndex * Columns.length + cellIndex + 50;
49343
- var onClick = !isFunction(def.specialRender) ? function () {
49344
+
49345
+ var onClick = function onClick() {
49344
49346
  ChangeToFormView(dataItem);
49345
- } : function () {};
49347
+ };
49348
+
49346
49349
  if (!EnableFormView) onClick = function onClick() {};
49347
49350
  if (!EnableSelection || ReadOnly) onClick = function onClick() {};
49348
49351
 
@@ -49358,7 +49361,9 @@ var TableView = function TableView(props) {
49358
49361
  return /*#__PURE__*/React__default.createElement(TableBodyCell$1, {
49359
49362
  key: tabIndex,
49360
49363
  onClick: onClick
49361
- }, isFunction(def.specialRender) ? def.specialRender(dataItem, onClick) : cellData);
49364
+ }, isFunction(def.specialRender) ? def.specialRender(dataItem, function () {
49365
+ ChangeToFormView(dataItem);
49366
+ }) : cellData);
49362
49367
  };
49363
49368
 
49364
49369
  var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
@@ -52284,32 +52289,42 @@ var heightBySize$3 = function heightBySize(size) {
52284
52289
  };
52285
52290
 
52286
52291
  var Container$9 = newStyled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n display: inline-block;\n box-sizing: border-box;\n"])));
52287
- var Inner$3 = newStyled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n display: flex;\n align-items: flex-start;\n flex-direction: row;\n border: 0.0625rem solid #bfbfbf80;\n font-family: ", ";\n font-size: ", ";\n padding: 0;\n margin: 0;\n border-radius: 0.5rem;\n cursor: pointer;\n\n min-height: ", ";\n max-height: ", ";\n"])), function (props) {
52292
+ var Inner$3 = newStyled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n display: flex;\n align-items: flex-start;\n flex-direction: row;\n border: 0.0625rem solid #bfbfbf80;\n font-family: ", ";\n font-size: ", ";\n padding: 0;\n margin: 0;\n border-radius: 0.5rem;\n cursor: ", ";\n\n min-height: ", ";\n max-height: ", ";\n"])), function (props) {
52288
52293
  return props.theme.typography.fontFamily;
52289
52294
  }, function (props) {
52290
52295
  return props.theme.typography[props.size].fontSize;
52296
+ }, function (props) {
52297
+ return props.disabled ? "default" : "pointer";
52291
52298
  }, function (props) {
52292
52299
  return heightBySize$3(props.size);
52293
52300
  }, function (props) {
52294
52301
  return heightBySize$3(props.size);
52295
52302
  });
52296
52303
  var TextSpan$1 = newStyled.span(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral([""])));
52297
- var Text$1 = newStyled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n flex: 1;\n\n padding: ", ";\n transition: all 250ms ease;\n border-radius: 0.5rem 0 0 0.5rem;\n white-space: pre;\n flex-grow: 10;\n height: 100%;\n background-color: ", ";\n\n color: ", ";\n"])), function (props) {
52304
+ var Text$1 = newStyled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n flex: 1;\n\n padding: ", ";\n transition: all 250ms ease;\n border-radius: 0.5rem 0 0 0.5rem;\n white-space: pre;\n flex-grow: 10;\n height: 100%;\n opacity: ", ";\n background-color: ", ";\n\n color: ", ";\n"])), function (props) {
52298
52305
  return paddingBySize$4(props.size);
52306
+ }, function (props) {
52307
+ return props.disabled ? "0.6" : "1";
52299
52308
  }, function (props) {
52300
52309
  return props.inactive ? props.theme.palette.gray[900] : props.theme.palette.primary.main;
52301
52310
  }, function (props) {
52302
52311
  return props.theme.palette.primary.text;
52303
52312
  });
52304
- var AdditionalInfo = newStyled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n padding: ", ";\n transition: all 250ms ease;\n white-space: pre;\n flex-grow: 10;\n height: 100%;\n background-color: ", ";\n\n color: ", ";\n"])), function (props) {
52313
+ var AdditionalInfo = newStyled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n padding: ", ";\n transition: all 250ms ease;\n white-space: pre;\n flex-grow: 10;\n height: 100%;\n opacity: ", ";\n background-color: ", ";\n\n color: ", ";\n"])), function (props) {
52305
52314
  return paddingBySize$4(props.size);
52315
+ }, function (props) {
52316
+ return props.disabled ? "0.6" : "1";
52306
52317
  }, function (props) {
52307
52318
  return props.inactive ? props.theme.palette.gray[100] : props.theme.palette.primary.lighter;
52308
52319
  }, function (props) {
52309
52320
  return props.theme.palette.primary.textDark;
52310
52321
  });
52311
- var ButtonContainer$1 = newStyled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n display: inline;\n cursor: pointer;\n padding: ", ";\n transition: all 250ms ease;\n border-radius: 0 0.5rem 0.5rem 0;\n // flex-grow: 0;\n align-self: flex-end;\n margin-left: auto;\n height: 100%;\n\n background-color: ", ";\n\n color: ", ";\n\n & i {\n font-size: ", ";\n }\n"])), function (props) {
52322
+ var ButtonContainer$1 = newStyled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n display: inline;\n cursor: ", ";\n padding: ", ";\n transition: all 250ms ease;\n border-radius: 0 0.5rem 0.5rem 0;\n // flex-grow: 0;\n align-self: flex-end;\n margin-left: auto;\n height: 100%;\n opacity: ", ";\n background-color: ", ";\n\n color: ", ";\n\n & i {\n font-size: ", ";\n }\n"])), function (props) {
52323
+ return props.disabled ? "default" : "pointer";
52324
+ }, function (props) {
52312
52325
  return paddingBySize$4(props.size);
52326
+ }, function (props) {
52327
+ return props.disabled ? "0.6" : "1";
52313
52328
  }, function (props) {
52314
52329
  return getBtnContainerColor(props);
52315
52330
  }, function (props) {
@@ -52354,7 +52369,8 @@ var Chip = function Chip(props) {
52354
52369
  additional: additionalInfo && additionalInfo !== "",
52355
52370
  onClick: function onClick() {
52356
52371
  return onRemove(id);
52357
- }
52372
+ },
52373
+ disabled: disabled
52358
52374
  }), /*#__PURE__*/React__default.createElement("i", {
52359
52375
  className: "fas fa-times"
52360
52376
  }))));
@@ -52418,9 +52434,9 @@ var iconPaddingBySize$1 = function iconPaddingBySize(size) {
52418
52434
  if (size === "large") return "0.78125rem 0.625rem 0.375rem 0.625rem";
52419
52435
  };
52420
52436
 
52421
- var Container$8 = newStyled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n border: 0.09375rem solid #bfbfbf;\n background-color: white;\n border-radius: 0.1875rem;\n width: 100%;\n\n transition: all 250ms ease;\n"])));
52422
- var ItemContainer$1 = newStyled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n padding: 0.15rem;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n flex-grow: 10;\n transition: all 250ms ease;\n"])));
52423
- var ItemWrapper$1 = newStyled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n display: inline-block;\n margin: 0.125rem;\n flex-grow: 1;\n transition: all 250ms ease;\n\n & > div {\n width: 100%;\n }\n"])));
52437
+ var Container$8 = newStyled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n border: 0.09375rem solid #bfbfbf;\n background-color: white;\n border-radius: 0.1875rem;\n width: 100%;\n transition: all 250ms ease;\n"])));
52438
+ var ItemContainer$1 = newStyled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n padding: 0.15rem;\n transition: all 250ms ease;\n display: inline-block;\n"])));
52439
+ var ItemWrapper$1 = newStyled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n display: inline-block;\n margin: 0.125rem;\n flex-grow: 1;\n transition: all 250ms ease;\n width: fit-content;\n & > div {\n width: 100%;\n }\n"])));
52424
52440
  var InputContainer$1 = newStyled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n display: inline-block;\n box-sizing: border-box;\n margin: 0.125rem;\n margin-left: 0.25rem;\n flex-grow: 1;\n transition: all 250ms ease;\n"])));
52425
52441
  var Input$1 = newStyled.input(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n width: 100%;\n transition: all 250ms ease;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n box-sizing: border-box;\n outline: none;\n border: none;\n padding: ", ";\n background-color: transparent;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n border-radius: 0.1875rem;\n"])), function (props) {
52426
52442
  return inputPaddingBySize$1(props.size);
@@ -52431,22 +52447,24 @@ var Input$1 = newStyled.input(_templateObject5$3 || (_templateObject5$3 = _tagge
52431
52447
  }, function (props) {
52432
52448
  return props.theme.palette[props.color].textDark;
52433
52449
  });
52434
- var Inner$2 = newStyled.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n display: flex;\n // align-items: center;\n"])));
52450
+ var Inner$2 = newStyled.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n"])));
52435
52451
  var SearchIcon = newStyled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n padding: ", ";\n color: ", ";\n font-size: ", ";\n background-color: whitesmoke;\n transition: all 250ms ease;\n"])), function (props) {
52436
52452
  return iconPaddingBySize$1(props.size);
52437
52453
  }, function (props) {
52438
- return props.theme.palette[props.color].main;
52454
+ return props.disabled ? props.theme.palette.gray[800] : props.theme.palette[props.color].main;
52439
52455
  }, function (props) {
52440
52456
  return getIconFontSize$1(props);
52441
52457
  });
52442
- var ClearIcon$1 = newStyled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n padding: ", ";\n color: ", ";\n font-size: ", ";\n background-color: whitesmoke;\n transition: all 250ms ease;\n cursor: pointer;\n"])), function (props) {
52458
+ var ClearIcon$1 = newStyled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n padding: ", ";\n color: ", ";\n font-size: ", ";\n background-color: whitesmoke;\n transition: all 250ms ease;\n cursor: ", ";\n margin-right: 0;\n margin-left: auto;\n"])), function (props) {
52443
52459
  return iconPaddingBySize$1(props.size);
52444
52460
  }, function (props) {
52445
- return props.theme.palette[props.color].main;
52461
+ return props.disabled ? props.theme.palette.gray[800] : props.theme.palette[props.color].main;
52446
52462
  }, function (props) {
52447
52463
  return getIconFontSize$1(props);
52464
+ }, function (props) {
52465
+ return props.disabled ? "default" : "pointer";
52448
52466
  });
52449
- var Content$2 = newStyled.div(_templateObject9$1 || (_templateObject9$1 = _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 display: flex;\n flex-direction: column;\n transition: all 250ms ease;\n"])), function (props) {
52467
+ var Content$2 = newStyled.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\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 display: flex;\n flex-direction: column;\n transition: all 250ms ease;\n"])), function (props) {
52450
52468
  return props.theme.palette[props.color].main;
52451
52469
  });
52452
52470
  var ContentItem$1 = newStyled.div(_templateObject10$1 || (_templateObject10$1 = _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) {
@@ -52466,6 +52484,7 @@ var SearchBar = function SearchBar(props) {
52466
52484
  suggestions = props.suggestions,
52467
52485
  onChange = props.onChange,
52468
52486
  id = props.id,
52487
+ disabled = props.disabled,
52469
52488
  className = props.className,
52470
52489
  size = props.size,
52471
52490
  color = props.color,
@@ -52579,7 +52598,9 @@ var SearchBar = function SearchBar(props) {
52579
52598
 
52580
52599
  return /*#__PURE__*/React__default.createElement(Container$8, _extends({
52581
52600
  className: className
52582
- }, themeProps), /*#__PURE__*/React__default.createElement(Inner$2, themeProps, /*#__PURE__*/React__default.createElement(SearchIcon, themeProps, /*#__PURE__*/React__default.createElement("i", {
52601
+ }, themeProps), /*#__PURE__*/React__default.createElement(Inner$2, themeProps, /*#__PURE__*/React__default.createElement(SearchIcon, _extends({}, themeProps, {
52602
+ disabled: disabled
52603
+ }), /*#__PURE__*/React__default.createElement("i", {
52583
52604
  className: "fas fa-search fa-fw"
52584
52605
  })), /*#__PURE__*/React__default.createElement(ItemContainer$1, themeProps, /*#__PURE__*/React__default.createElement(TransitionGroup$1, {
52585
52606
  component: null
@@ -52598,28 +52619,33 @@ var SearchBar = function SearchBar(props) {
52598
52619
  additionalInfo: x.value,
52599
52620
  inactive: !x.active,
52600
52621
  onRemove: function onRemove() {
52601
- return handleRemoveItem(key);
52622
+ return disabled ? {} : handleRemoveItem(key);
52602
52623
  },
52603
52624
  onClick: function onClick() {
52604
- return handleActiveInactive(key);
52605
- }
52625
+ return disabled ? {} : handleActiveInactive(key);
52626
+ },
52627
+ disabled: disabled
52606
52628
  }))));
52607
52629
  })), /*#__PURE__*/React__default.createElement(InputContainer$1, themeProps, /*#__PURE__*/React__default.createElement(Input$1, _extends({}, themeProps, {
52608
52630
  ref: InputRef,
52609
52631
  value: value,
52610
52632
  onBlur: onInputBlur,
52611
52633
  onChange: onInputChange,
52612
- onKeyDown: onKeyDown
52613
- })))), /*#__PURE__*/React__default.createElement(ClearIcon$1, themeProps, /*#__PURE__*/React__default.createElement("i", {
52634
+ onKeyDown: onKeyDown,
52635
+ disabled: disabled
52636
+ })))), /*#__PURE__*/React__default.createElement(ClearIcon$1, _extends({}, themeProps, {
52637
+ disabled: disabled
52638
+ }), /*#__PURE__*/React__default.createElement("i", {
52614
52639
  className: "fas fa-times fa-fw",
52615
52640
  onClick: function onClick() {
52616
- return onChange(id, []);
52641
+ return disabled ? {} : onChange(id, []);
52617
52642
  }
52618
52643
  }))), renderSuggestions());
52619
52644
  };
52620
52645
 
52621
52646
  SearchBar.defaultProps = {
52622
52647
  id: "",
52648
+ disabled: false,
52623
52649
  onChange: function onChange() {},
52624
52650
  items: [],
52625
52651
  suggestions: [],
@@ -52631,6 +52657,7 @@ SearchBar.defaultProps = {
52631
52657
  SearchBar.propTypes = {
52632
52658
  theme: PropTypes.object.isRequired,
52633
52659
  id: PropTypes.any,
52660
+ disabled: PropTypes.bool,
52634
52661
  onChange: PropTypes.func,
52635
52662
  className: PropTypes.string,
52636
52663
  items: PropTypes.array,
package/lib/index.js CHANGED
@@ -2367,6 +2367,7 @@ var Button$1 = /*#__PURE__*/React__default['default'].forwardRef(function (props
2367
2367
  var handleOnClick = function handleOnClick(e) {
2368
2368
  if (preventDefault) e.preventDefault();
2369
2369
  onClick(id);
2370
+ if (e.stopImmediatePropagation) e.stopImmediatePropagation();
2370
2371
  };
2371
2372
 
2372
2373
  var title = "";
@@ -49381,9 +49382,11 @@ var TableView = function TableView(props) {
49381
49382
 
49382
49383
  var renderBodyCell = function renderBodyCell(dataItem, def, rowIndex, cellIndex) {
49383
49384
  var tabIndex = rowIndex * Columns.length + cellIndex + 50;
49384
- var onClick = !isFunction(def.specialRender) ? function () {
49385
+
49386
+ var onClick = function onClick() {
49385
49387
  ChangeToFormView(dataItem);
49386
- } : function () {};
49388
+ };
49389
+
49387
49390
  if (!EnableFormView) onClick = function onClick() {};
49388
49391
  if (!EnableSelection || ReadOnly) onClick = function onClick() {};
49389
49392
 
@@ -49399,7 +49402,9 @@ var TableView = function TableView(props) {
49399
49402
  return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
49400
49403
  key: tabIndex,
49401
49404
  onClick: onClick
49402
- }, isFunction(def.specialRender) ? def.specialRender(dataItem, onClick) : cellData);
49405
+ }, isFunction(def.specialRender) ? def.specialRender(dataItem, function () {
49406
+ ChangeToFormView(dataItem);
49407
+ }) : cellData);
49403
49408
  };
49404
49409
 
49405
49410
  var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
@@ -52325,32 +52330,42 @@ var heightBySize$3 = function heightBySize(size) {
52325
52330
  };
52326
52331
 
52327
52332
  var Container$9 = newStyled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral__default['default'](["\n display: inline-block;\n box-sizing: border-box;\n"])));
52328
- var Inner$3 = newStyled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n align-items: flex-start;\n flex-direction: row;\n border: 0.0625rem solid #bfbfbf80;\n font-family: ", ";\n font-size: ", ";\n padding: 0;\n margin: 0;\n border-radius: 0.5rem;\n cursor: pointer;\n\n min-height: ", ";\n max-height: ", ";\n"])), function (props) {
52333
+ var Inner$3 = newStyled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n align-items: flex-start;\n flex-direction: row;\n border: 0.0625rem solid #bfbfbf80;\n font-family: ", ";\n font-size: ", ";\n padding: 0;\n margin: 0;\n border-radius: 0.5rem;\n cursor: ", ";\n\n min-height: ", ";\n max-height: ", ";\n"])), function (props) {
52329
52334
  return props.theme.typography.fontFamily;
52330
52335
  }, function (props) {
52331
52336
  return props.theme.typography[props.size].fontSize;
52337
+ }, function (props) {
52338
+ return props.disabled ? "default" : "pointer";
52332
52339
  }, function (props) {
52333
52340
  return heightBySize$3(props.size);
52334
52341
  }, function (props) {
52335
52342
  return heightBySize$3(props.size);
52336
52343
  });
52337
52344
  var TextSpan$1 = newStyled.span(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral__default['default']([""])));
52338
- var Text$1 = newStyled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n flex: 1;\n\n padding: ", ";\n transition: all 250ms ease;\n border-radius: 0.5rem 0 0 0.5rem;\n white-space: pre;\n flex-grow: 10;\n height: 100%;\n background-color: ", ";\n\n color: ", ";\n"])), function (props) {
52345
+ var Text$1 = newStyled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n flex: 1;\n\n padding: ", ";\n transition: all 250ms ease;\n border-radius: 0.5rem 0 0 0.5rem;\n white-space: pre;\n flex-grow: 10;\n height: 100%;\n opacity: ", ";\n background-color: ", ";\n\n color: ", ";\n"])), function (props) {
52339
52346
  return paddingBySize$4(props.size);
52347
+ }, function (props) {
52348
+ return props.disabled ? "0.6" : "1";
52340
52349
  }, function (props) {
52341
52350
  return props.inactive ? props.theme.palette.gray[900] : props.theme.palette.primary.main;
52342
52351
  }, function (props) {
52343
52352
  return props.theme.palette.primary.text;
52344
52353
  });
52345
- var AdditionalInfo = newStyled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral__default['default'](["\n padding: ", ";\n transition: all 250ms ease;\n white-space: pre;\n flex-grow: 10;\n height: 100%;\n background-color: ", ";\n\n color: ", ";\n"])), function (props) {
52354
+ var AdditionalInfo = newStyled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral__default['default'](["\n padding: ", ";\n transition: all 250ms ease;\n white-space: pre;\n flex-grow: 10;\n height: 100%;\n opacity: ", ";\n background-color: ", ";\n\n color: ", ";\n"])), function (props) {
52346
52355
  return paddingBySize$4(props.size);
52356
+ }, function (props) {
52357
+ return props.disabled ? "0.6" : "1";
52347
52358
  }, function (props) {
52348
52359
  return props.inactive ? props.theme.palette.gray[100] : props.theme.palette.primary.lighter;
52349
52360
  }, function (props) {
52350
52361
  return props.theme.palette.primary.textDark;
52351
52362
  });
52352
- var ButtonContainer$1 = newStyled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral__default['default'](["\n display: inline;\n cursor: pointer;\n padding: ", ";\n transition: all 250ms ease;\n border-radius: 0 0.5rem 0.5rem 0;\n // flex-grow: 0;\n align-self: flex-end;\n margin-left: auto;\n height: 100%;\n\n background-color: ", ";\n\n color: ", ";\n\n & i {\n font-size: ", ";\n }\n"])), function (props) {
52363
+ var ButtonContainer$1 = newStyled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral__default['default'](["\n display: inline;\n cursor: ", ";\n padding: ", ";\n transition: all 250ms ease;\n border-radius: 0 0.5rem 0.5rem 0;\n // flex-grow: 0;\n align-self: flex-end;\n margin-left: auto;\n height: 100%;\n opacity: ", ";\n background-color: ", ";\n\n color: ", ";\n\n & i {\n font-size: ", ";\n }\n"])), function (props) {
52364
+ return props.disabled ? "default" : "pointer";
52365
+ }, function (props) {
52353
52366
  return paddingBySize$4(props.size);
52367
+ }, function (props) {
52368
+ return props.disabled ? "0.6" : "1";
52354
52369
  }, function (props) {
52355
52370
  return getBtnContainerColor(props);
52356
52371
  }, function (props) {
@@ -52395,7 +52410,8 @@ var Chip = function Chip(props) {
52395
52410
  additional: additionalInfo && additionalInfo !== "",
52396
52411
  onClick: function onClick() {
52397
52412
  return onRemove(id);
52398
- }
52413
+ },
52414
+ disabled: disabled
52399
52415
  }), /*#__PURE__*/React__default['default'].createElement("i", {
52400
52416
  className: "fas fa-times"
52401
52417
  }))));
@@ -52459,9 +52475,9 @@ var iconPaddingBySize$1 = function iconPaddingBySize(size) {
52459
52475
  if (size === "large") return "0.78125rem 0.625rem 0.375rem 0.625rem";
52460
52476
  };
52461
52477
 
52462
- var Container$8 = newStyled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral__default['default'](["\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n border: 0.09375rem solid #bfbfbf;\n background-color: white;\n border-radius: 0.1875rem;\n width: 100%;\n\n transition: all 250ms ease;\n"])));
52463
- var ItemContainer$1 = newStyled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral__default['default'](["\n padding: 0.15rem;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n flex-grow: 10;\n transition: all 250ms ease;\n"])));
52464
- var ItemWrapper$1 = newStyled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n display: inline-block;\n margin: 0.125rem;\n flex-grow: 1;\n transition: all 250ms ease;\n\n & > div {\n width: 100%;\n }\n"])));
52478
+ var Container$8 = newStyled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral__default['default'](["\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n border: 0.09375rem solid #bfbfbf;\n background-color: white;\n border-radius: 0.1875rem;\n width: 100%;\n transition: all 250ms ease;\n"])));
52479
+ var ItemContainer$1 = newStyled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral__default['default'](["\n padding: 0.15rem;\n transition: all 250ms ease;\n display: inline-block;\n"])));
52480
+ var ItemWrapper$1 = newStyled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n display: inline-block;\n margin: 0.125rem;\n flex-grow: 1;\n transition: all 250ms ease;\n width: fit-content;\n & > div {\n width: 100%;\n }\n"])));
52465
52481
  var InputContainer$1 = newStyled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral__default['default'](["\n display: inline-block;\n box-sizing: border-box;\n margin: 0.125rem;\n margin-left: 0.25rem;\n flex-grow: 1;\n transition: all 250ms ease;\n"])));
52466
52482
  var Input$1 = newStyled.input(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral__default['default'](["\n width: 100%;\n transition: all 250ms ease;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n box-sizing: border-box;\n outline: none;\n border: none;\n padding: ", ";\n background-color: transparent;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n border-radius: 0.1875rem;\n"])), function (props) {
52467
52483
  return inputPaddingBySize$1(props.size);
@@ -52472,22 +52488,24 @@ var Input$1 = newStyled.input(_templateObject5$3 || (_templateObject5$3 = _tagge
52472
52488
  }, function (props) {
52473
52489
  return props.theme.palette[props.color].textDark;
52474
52490
  });
52475
- var Inner$2 = newStyled.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n // align-items: center;\n"])));
52491
+ var Inner$2 = newStyled.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n width: 100%;\n"])));
52476
52492
  var SearchIcon = newStyled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral__default['default'](["\n padding: ", ";\n color: ", ";\n font-size: ", ";\n background-color: whitesmoke;\n transition: all 250ms ease;\n"])), function (props) {
52477
52493
  return iconPaddingBySize$1(props.size);
52478
52494
  }, function (props) {
52479
- return props.theme.palette[props.color].main;
52495
+ return props.disabled ? props.theme.palette.gray[800] : props.theme.palette[props.color].main;
52480
52496
  }, function (props) {
52481
52497
  return getIconFontSize$1(props);
52482
52498
  });
52483
- var ClearIcon$1 = newStyled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral__default['default'](["\n padding: ", ";\n color: ", ";\n font-size: ", ";\n background-color: whitesmoke;\n transition: all 250ms ease;\n cursor: pointer;\n"])), function (props) {
52499
+ var ClearIcon$1 = newStyled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral__default['default'](["\n padding: ", ";\n color: ", ";\n font-size: ", ";\n background-color: whitesmoke;\n transition: all 250ms ease;\n cursor: ", ";\n margin-right: 0;\n margin-left: auto;\n"])), function (props) {
52484
52500
  return iconPaddingBySize$1(props.size);
52485
52501
  }, function (props) {
52486
- return props.theme.palette[props.color].main;
52502
+ return props.disabled ? props.theme.palette.gray[800] : props.theme.palette[props.color].main;
52487
52503
  }, function (props) {
52488
52504
  return getIconFontSize$1(props);
52505
+ }, function (props) {
52506
+ return props.disabled ? "default" : "pointer";
52489
52507
  });
52490
- var Content$2 = newStyled.div(_templateObject9$1 || (_templateObject9$1 = _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 display: flex;\n flex-direction: column;\n transition: all 250ms ease;\n"])), function (props) {
52508
+ var Content$2 = newStyled.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral__default['default'](["\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 display: flex;\n flex-direction: column;\n transition: all 250ms ease;\n"])), function (props) {
52491
52509
  return props.theme.palette[props.color].main;
52492
52510
  });
52493
52511
  var ContentItem$1 = newStyled.div(_templateObject10$1 || (_templateObject10$1 = _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) {
@@ -52507,6 +52525,7 @@ var SearchBar = function SearchBar(props) {
52507
52525
  suggestions = props.suggestions,
52508
52526
  onChange = props.onChange,
52509
52527
  id = props.id,
52528
+ disabled = props.disabled,
52510
52529
  className = props.className,
52511
52530
  size = props.size,
52512
52531
  color = props.color,
@@ -52620,7 +52639,9 @@ var SearchBar = function SearchBar(props) {
52620
52639
 
52621
52640
  return /*#__PURE__*/React__default['default'].createElement(Container$8, _extends__default['default']({
52622
52641
  className: className
52623
- }, themeProps), /*#__PURE__*/React__default['default'].createElement(Inner$2, themeProps, /*#__PURE__*/React__default['default'].createElement(SearchIcon, themeProps, /*#__PURE__*/React__default['default'].createElement("i", {
52642
+ }, themeProps), /*#__PURE__*/React__default['default'].createElement(Inner$2, themeProps, /*#__PURE__*/React__default['default'].createElement(SearchIcon, _extends__default['default']({}, themeProps, {
52643
+ disabled: disabled
52644
+ }), /*#__PURE__*/React__default['default'].createElement("i", {
52624
52645
  className: "fas fa-search fa-fw"
52625
52646
  })), /*#__PURE__*/React__default['default'].createElement(ItemContainer$1, themeProps, /*#__PURE__*/React__default['default'].createElement(TransitionGroup$1, {
52626
52647
  component: null
@@ -52639,28 +52660,33 @@ var SearchBar = function SearchBar(props) {
52639
52660
  additionalInfo: x.value,
52640
52661
  inactive: !x.active,
52641
52662
  onRemove: function onRemove() {
52642
- return handleRemoveItem(key);
52663
+ return disabled ? {} : handleRemoveItem(key);
52643
52664
  },
52644
52665
  onClick: function onClick() {
52645
- return handleActiveInactive(key);
52646
- }
52666
+ return disabled ? {} : handleActiveInactive(key);
52667
+ },
52668
+ disabled: disabled
52647
52669
  }))));
52648
52670
  })), /*#__PURE__*/React__default['default'].createElement(InputContainer$1, themeProps, /*#__PURE__*/React__default['default'].createElement(Input$1, _extends__default['default']({}, themeProps, {
52649
52671
  ref: InputRef,
52650
52672
  value: value,
52651
52673
  onBlur: onInputBlur,
52652
52674
  onChange: onInputChange,
52653
- onKeyDown: onKeyDown
52654
- })))), /*#__PURE__*/React__default['default'].createElement(ClearIcon$1, themeProps, /*#__PURE__*/React__default['default'].createElement("i", {
52675
+ onKeyDown: onKeyDown,
52676
+ disabled: disabled
52677
+ })))), /*#__PURE__*/React__default['default'].createElement(ClearIcon$1, _extends__default['default']({}, themeProps, {
52678
+ disabled: disabled
52679
+ }), /*#__PURE__*/React__default['default'].createElement("i", {
52655
52680
  className: "fas fa-times fa-fw",
52656
52681
  onClick: function onClick() {
52657
- return onChange(id, []);
52682
+ return disabled ? {} : onChange(id, []);
52658
52683
  }
52659
52684
  }))), renderSuggestions());
52660
52685
  };
52661
52686
 
52662
52687
  SearchBar.defaultProps = {
52663
52688
  id: "",
52689
+ disabled: false,
52664
52690
  onChange: function onChange() {},
52665
52691
  items: [],
52666
52692
  suggestions: [],
@@ -52672,6 +52698,7 @@ SearchBar.defaultProps = {
52672
52698
  SearchBar.propTypes = {
52673
52699
  theme: PropTypes__default['default'].object.isRequired,
52674
52700
  id: PropTypes__default['default'].any,
52701
+ disabled: PropTypes__default['default'].bool,
52675
52702
  onChange: PropTypes__default['default'].func,
52676
52703
  className: PropTypes__default['default'].string,
52677
52704
  items: PropTypes__default['default'].array,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lanaco/lnc-react-ui",
3
- "version": "2.1.23",
3
+ "version": "2.1.27",
4
4
  "description": "component library",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",