@xaypay/tui 0.0.63 → 0.0.64

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 (11) hide show
  1. package/dist/index.es.js +107 -19
  2. package/dist/index.js +107 -19
  3. package/package.json +1 -1
  4. package/src/components/autocomplate/index.js +3 -0
  5. package/src/components/input/index.js +13 -2
  6. package/src/components/select/index.js +8 -7
  7. package/src/components/toaster/Toast.js +12 -10
  8. package/src/components/toaster/index.js +68 -11
  9. package/src/components/toaster/toaster.stories.js +120 -38
  10. package/src/stories/configuration.stories.mdx +30 -8
  11. package/src/stories/static/toaster-usage.png +0 -0
package/dist/index.es.js CHANGED
@@ -629,6 +629,14 @@ const Input = ({
629
629
  animation: ${errorAnimation ? animation : 'none'};
630
630
  `;
631
631
  const handleChange = event => {
632
+ // TODO: need to discuss
633
+ // onChange
634
+ // ? type === 'tel'
635
+ // ? phoneNumberRegex.test(event.target.value)
636
+ // ? onChange(event.target.value)
637
+ // : _ => _
638
+ // : onChange(event.target.value)
639
+ // : _ => _;
632
640
  onChange ? onChange(event.target.value) : _ => _;
633
641
  };
634
642
  const handleMouseEnter = () => {
@@ -692,6 +700,8 @@ const Input = ({
692
700
  backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
693
701
  }
694
702
  }, "+374") : '', /*#__PURE__*/React__default.createElement("input", _extends({}, props, {
703
+ // TODO: need to discuss
704
+ // value={type === 'tel' ? phoneNumberRegex.test(value) ? value : '' : maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
695
705
  value: maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value,
696
706
  className: classProps,
697
707
  onChange: handleChange,
@@ -703,7 +713,7 @@ const Input = ({
703
713
  style: {
704
714
  border: 'none',
705
715
  outline: 'none',
706
- pointerEvents: disabled ? 'none' : 'auto',
716
+ cursor: disabled ? 'not-allowed' : 'auto',
707
717
  width: width ? width : configStyles.INPUT.width,
708
718
  fontSize: size ? size : configStyles.INPUT.size,
709
719
  height: height ? height : configStyles.INPUT.height,
@@ -941,9 +951,9 @@ Button.propTypes = {
941
951
  disabledBackgroundColor: PropTypes.string
942
952
  };
943
953
 
944
- var ReactCheckbox = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z\" fill=\"#D1D1D1\"/>\n</svg>";
954
+ var ReactCheckbox = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z\" fill=\"#D1D1D1\"/>\r\n</svg>";
945
955
 
946
- var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z\" fill=\"#00236A\"/>\n</svg>";
956
+ var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z\" fill=\"#00236A\"/>\r\n</svg>";
947
957
 
948
958
  const SelectCheckbox = ({
949
959
  checked
@@ -1214,12 +1224,12 @@ const Select = ({
1214
1224
  style: {
1215
1225
  marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
1216
1226
  }
1217
- }, closeIcon ? closeIcon : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)), /*#__PURE__*/React__default.createElement("div", {
1227
+ }, closeIcon ? closeIcon : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)), !disabled ? /*#__PURE__*/React__default.createElement("div", {
1218
1228
  style: {
1219
1229
  transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
1220
1230
  },
1221
1231
  className: `${styles$6['arrow-icon']}`
1222
- }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default.createElement(SvgArrow, null)))), opened && !disabled ? /*#__PURE__*/React__default.createElement("div", {
1232
+ }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default.createElement(SvgArrow, null)) : '')), opened && !disabled ? /*#__PURE__*/React__default.createElement("div", {
1223
1233
  style: {
1224
1234
  boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
1225
1235
  borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
@@ -1518,19 +1528,25 @@ const Toast = ({
1518
1528
  }, /*#__PURE__*/React__default.createElement(SvgToasterClose, null)));
1519
1529
  };
1520
1530
  Toast.propTypes = {
1531
+ timer: PropTypes.number,
1532
+ title: PropTypes.string,
1521
1533
  description: PropTypes.string,
1522
- title: PropTypes.string.isRequired,
1523
- timer: PropTypes.number.isRequired,
1524
1534
  removeToast: PropTypes.func.isRequired,
1525
- type: PropTypes.oneOf(Object.values(ToasterType)).isRequired,
1526
- position: PropTypes.oneOf(Object.values(ToasterPosition)).isRequired
1535
+ position: PropTypes.oneOf(Object.values(ToasterPosition)),
1536
+ type: PropTypes.oneOf(Object.values(ToasterType)).isRequired
1537
+ };
1538
+ Toast.defaultProps = {
1539
+ timer: 5000,
1540
+ position: 'top-right',
1541
+ title: 'toaster title'
1527
1542
  };
1528
1543
 
1529
1544
  let toastify;
1530
- const removeToast = (ref, position) => {
1531
- const parent = document.getElementById(styles$5[position]);
1545
+ let path = window.location.href;
1546
+ const removeToast = ref => {
1532
1547
  const node = ReactDOM.findDOMNode(ref.current);
1533
1548
  const removeElem = node.parentNode;
1549
+ const parent = removeElem.parentNode;
1534
1550
  parent.removeChild(removeElem);
1535
1551
  if (!parent.hasChildNodes()) {
1536
1552
  toastify.removeChild(parent);
@@ -1538,12 +1554,15 @@ const removeToast = (ref, position) => {
1538
1554
  };
1539
1555
  const createToast = ({
1540
1556
  type,
1541
- title,
1542
1557
  timer,
1558
+ title,
1543
1559
  position,
1544
1560
  description
1545
1561
  }) => {
1546
1562
  let toastParentBlock;
1563
+ if (!toastify) {
1564
+ toastify = document.getElementById('toastify');
1565
+ }
1547
1566
  const toastBlock = document.createElement('div');
1548
1567
  toastBlock.style.position = 'relative';
1549
1568
  toastBlock.style.flexShrink = 0;
@@ -1559,10 +1578,7 @@ const createToast = ({
1559
1578
  description
1560
1579
  });
1561
1580
  ReactDOM.render(newElem, toastBlock);
1562
- if (!toastify) {
1563
- toastify = document.getElementById('toastify');
1564
- }
1565
- if (!document.getElementById(styles$5[position])) {
1581
+ if (!document.getElementById(styles$5[position]) || document.getElementById(styles$5[position]) == null) {
1566
1582
  toastParentBlock = document.createElement('div');
1567
1583
  toastParentBlock.style.position = 'fixed';
1568
1584
  toastParentBlock.style.display = 'flex';
@@ -1575,7 +1591,76 @@ const createToast = ({
1575
1591
  document.getElementById(styles$5[position]).appendChild(toastBlock);
1576
1592
  }
1577
1593
  };
1594
+ const toast = {
1595
+ success: (title, props) => {
1596
+ const {
1597
+ timer,
1598
+ position,
1599
+ description
1600
+ } = props || {};
1601
+ createToast({
1602
+ title,
1603
+ type: 'success',
1604
+ timer: timer ? timer : 5000,
1605
+ position: position ? position : 'top-right',
1606
+ description: description ? description : ''
1607
+ });
1608
+ },
1609
+ info: (title, props) => {
1610
+ const {
1611
+ timer,
1612
+ position,
1613
+ description
1614
+ } = props || {};
1615
+ createToast({
1616
+ title,
1617
+ type: 'info',
1618
+ timer: timer ? timer : 5000,
1619
+ position: position ? position : 'top-right',
1620
+ description: description ? description : ''
1621
+ });
1622
+ },
1623
+ warn: (title, props) => {
1624
+ const {
1625
+ timer,
1626
+ position,
1627
+ description
1628
+ } = props || {};
1629
+ createToast({
1630
+ title,
1631
+ type: 'warn',
1632
+ timer: timer ? timer : 5000,
1633
+ position: position ? position : 'top-right',
1634
+ description: description ? description : ''
1635
+ });
1636
+ },
1637
+ error: (title, props) => {
1638
+ const {
1639
+ timer,
1640
+ position,
1641
+ description
1642
+ } = props || {};
1643
+ createToast({
1644
+ title,
1645
+ type: 'error',
1646
+ timer: timer ? timer : 5000,
1647
+ position: position ? position : 'top-right',
1648
+ description: description ? description : ''
1649
+ });
1650
+ }
1651
+ };
1578
1652
  const Toaster = () => {
1653
+ window.addEventListener('popstate', () => {
1654
+ if (path !== window.location.href) {
1655
+ if (!toastify) {
1656
+ toastify = document.getElementById('toastify');
1657
+ }
1658
+ if (toastify.hasChildNodes()) {
1659
+ toastify.innerHTML = '';
1660
+ }
1661
+ path = window.location.href;
1662
+ }
1663
+ });
1579
1664
  const handleToasterClick = e => {
1580
1665
  e.stopPropagation();
1581
1666
  };
@@ -1585,7 +1670,7 @@ const Toaster = () => {
1585
1670
  });
1586
1671
  };
1587
1672
 
1588
- var ReactInfoIcon = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z\" fill=\"#D1D1D1\"/>\n</svg>";
1673
+ var ReactInfoIcon = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z\" fill=\"#D1D1D1\"/>\r\n</svg>";
1589
1674
 
1590
1675
  var css_248z$4 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
1591
1676
  var styles$4 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
@@ -2056,7 +2141,10 @@ const Autocomplate = ({
2056
2141
  setShowOptions(!showOptions);
2057
2142
  },
2058
2143
  value: inputValue,
2059
- placeholder: placeHolder
2144
+ placeholder: placeHolder,
2145
+ style: {
2146
+ cursor: disabled ? 'not-allowed' : 'auto'
2147
+ }
2060
2148
  }, props)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
2061
2149
  className: styles.errorMessage
2062
2150
  }, errorMessage) : null, optionList));
@@ -2080,4 +2168,4 @@ Autocomplate.defaultProps = {
2080
2168
  required: false
2081
2169
  };
2082
2170
 
2083
- export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SelectCheckbox, Stepper, Table, Toaster, Tooltip, Typography, TypographyType, createToast };
2171
+ export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SelectCheckbox, Stepper, Table, Toaster, Tooltip, Typography, TypographyType, toast };
package/dist/index.js CHANGED
@@ -659,6 +659,14 @@ const Input = ({
659
659
  animation: ${errorAnimation ? animation : 'none'};
660
660
  `;
661
661
  const handleChange = event => {
662
+ // TODO: need to discuss
663
+ // onChange
664
+ // ? type === 'tel'
665
+ // ? phoneNumberRegex.test(event.target.value)
666
+ // ? onChange(event.target.value)
667
+ // : _ => _
668
+ // : onChange(event.target.value)
669
+ // : _ => _;
662
670
  onChange ? onChange(event.target.value) : _ => _;
663
671
  };
664
672
  const handleMouseEnter = () => {
@@ -722,6 +730,8 @@ const Input = ({
722
730
  backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
723
731
  }
724
732
  }, "+374") : '', /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
733
+ // TODO: need to discuss
734
+ // value={type === 'tel' ? phoneNumberRegex.test(value) ? value : '' : maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
725
735
  value: maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value,
726
736
  className: classProps,
727
737
  onChange: handleChange,
@@ -733,7 +743,7 @@ const Input = ({
733
743
  style: {
734
744
  border: 'none',
735
745
  outline: 'none',
736
- pointerEvents: disabled ? 'none' : 'auto',
746
+ cursor: disabled ? 'not-allowed' : 'auto',
737
747
  width: width ? width : configStyles.INPUT.width,
738
748
  fontSize: size ? size : configStyles.INPUT.size,
739
749
  height: height ? height : configStyles.INPUT.height,
@@ -971,9 +981,9 @@ Button.propTypes = {
971
981
  disabledBackgroundColor: PropTypes__default["default"].string
972
982
  };
973
983
 
974
- var ReactCheckbox = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z\" fill=\"#D1D1D1\"/>\n</svg>";
984
+ var ReactCheckbox = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z\" fill=\"#D1D1D1\"/>\r\n</svg>";
975
985
 
976
- var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z\" fill=\"#00236A\"/>\n</svg>";
986
+ var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z\" fill=\"#00236A\"/>\r\n</svg>";
977
987
 
978
988
  const SelectCheckbox = ({
979
989
  checked
@@ -1244,12 +1254,12 @@ const Select = ({
1244
1254
  style: {
1245
1255
  marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
1246
1256
  }
1247
- }, closeIcon ? closeIcon : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)), /*#__PURE__*/React__default["default"].createElement("div", {
1257
+ }, closeIcon ? closeIcon : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)), !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
1248
1258
  style: {
1249
1259
  transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
1250
1260
  },
1251
1261
  className: `${styles$6['arrow-icon']}`
1252
- }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default["default"].createElement(SvgArrow, null)))), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
1262
+ }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default["default"].createElement(SvgArrow, null)) : '')), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
1253
1263
  style: {
1254
1264
  boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
1255
1265
  borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
@@ -1548,19 +1558,25 @@ const Toast = ({
1548
1558
  }, /*#__PURE__*/React__default["default"].createElement(SvgToasterClose, null)));
1549
1559
  };
1550
1560
  Toast.propTypes = {
1561
+ timer: PropTypes__default["default"].number,
1562
+ title: PropTypes__default["default"].string,
1551
1563
  description: PropTypes__default["default"].string,
1552
- title: PropTypes__default["default"].string.isRequired,
1553
- timer: PropTypes__default["default"].number.isRequired,
1554
1564
  removeToast: PropTypes__default["default"].func.isRequired,
1555
- type: PropTypes__default["default"].oneOf(Object.values(ToasterType)).isRequired,
1556
- position: PropTypes__default["default"].oneOf(Object.values(ToasterPosition)).isRequired
1565
+ position: PropTypes__default["default"].oneOf(Object.values(ToasterPosition)),
1566
+ type: PropTypes__default["default"].oneOf(Object.values(ToasterType)).isRequired
1567
+ };
1568
+ Toast.defaultProps = {
1569
+ timer: 5000,
1570
+ position: 'top-right',
1571
+ title: 'toaster title'
1557
1572
  };
1558
1573
 
1559
1574
  let toastify;
1560
- const removeToast = (ref, position) => {
1561
- const parent = document.getElementById(styles$5[position]);
1575
+ let path = window.location.href;
1576
+ const removeToast = ref => {
1562
1577
  const node = ReactDOM__default["default"].findDOMNode(ref.current);
1563
1578
  const removeElem = node.parentNode;
1579
+ const parent = removeElem.parentNode;
1564
1580
  parent.removeChild(removeElem);
1565
1581
  if (!parent.hasChildNodes()) {
1566
1582
  toastify.removeChild(parent);
@@ -1568,12 +1584,15 @@ const removeToast = (ref, position) => {
1568
1584
  };
1569
1585
  const createToast = ({
1570
1586
  type,
1571
- title,
1572
1587
  timer,
1588
+ title,
1573
1589
  position,
1574
1590
  description
1575
1591
  }) => {
1576
1592
  let toastParentBlock;
1593
+ if (!toastify) {
1594
+ toastify = document.getElementById('toastify');
1595
+ }
1577
1596
  const toastBlock = document.createElement('div');
1578
1597
  toastBlock.style.position = 'relative';
1579
1598
  toastBlock.style.flexShrink = 0;
@@ -1589,10 +1608,7 @@ const createToast = ({
1589
1608
  description
1590
1609
  });
1591
1610
  ReactDOM__default["default"].render(newElem, toastBlock);
1592
- if (!toastify) {
1593
- toastify = document.getElementById('toastify');
1594
- }
1595
- if (!document.getElementById(styles$5[position])) {
1611
+ if (!document.getElementById(styles$5[position]) || document.getElementById(styles$5[position]) == null) {
1596
1612
  toastParentBlock = document.createElement('div');
1597
1613
  toastParentBlock.style.position = 'fixed';
1598
1614
  toastParentBlock.style.display = 'flex';
@@ -1605,7 +1621,76 @@ const createToast = ({
1605
1621
  document.getElementById(styles$5[position]).appendChild(toastBlock);
1606
1622
  }
1607
1623
  };
1624
+ const toast = {
1625
+ success: (title, props) => {
1626
+ const {
1627
+ timer,
1628
+ position,
1629
+ description
1630
+ } = props || {};
1631
+ createToast({
1632
+ title,
1633
+ type: 'success',
1634
+ timer: timer ? timer : 5000,
1635
+ position: position ? position : 'top-right',
1636
+ description: description ? description : ''
1637
+ });
1638
+ },
1639
+ info: (title, props) => {
1640
+ const {
1641
+ timer,
1642
+ position,
1643
+ description
1644
+ } = props || {};
1645
+ createToast({
1646
+ title,
1647
+ type: 'info',
1648
+ timer: timer ? timer : 5000,
1649
+ position: position ? position : 'top-right',
1650
+ description: description ? description : ''
1651
+ });
1652
+ },
1653
+ warn: (title, props) => {
1654
+ const {
1655
+ timer,
1656
+ position,
1657
+ description
1658
+ } = props || {};
1659
+ createToast({
1660
+ title,
1661
+ type: 'warn',
1662
+ timer: timer ? timer : 5000,
1663
+ position: position ? position : 'top-right',
1664
+ description: description ? description : ''
1665
+ });
1666
+ },
1667
+ error: (title, props) => {
1668
+ const {
1669
+ timer,
1670
+ position,
1671
+ description
1672
+ } = props || {};
1673
+ createToast({
1674
+ title,
1675
+ type: 'error',
1676
+ timer: timer ? timer : 5000,
1677
+ position: position ? position : 'top-right',
1678
+ description: description ? description : ''
1679
+ });
1680
+ }
1681
+ };
1608
1682
  const Toaster = () => {
1683
+ window.addEventListener('popstate', () => {
1684
+ if (path !== window.location.href) {
1685
+ if (!toastify) {
1686
+ toastify = document.getElementById('toastify');
1687
+ }
1688
+ if (toastify.hasChildNodes()) {
1689
+ toastify.innerHTML = '';
1690
+ }
1691
+ path = window.location.href;
1692
+ }
1693
+ });
1609
1694
  const handleToasterClick = e => {
1610
1695
  e.stopPropagation();
1611
1696
  };
@@ -1615,7 +1700,7 @@ const Toaster = () => {
1615
1700
  });
1616
1701
  };
1617
1702
 
1618
- var ReactInfoIcon = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z\" fill=\"#D1D1D1\"/>\n</svg>";
1703
+ var ReactInfoIcon = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z\" fill=\"#D1D1D1\"/>\r\n</svg>";
1619
1704
 
1620
1705
  var css_248z$4 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
1621
1706
  var styles$4 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
@@ -2086,7 +2171,10 @@ const Autocomplate = ({
2086
2171
  setShowOptions(!showOptions);
2087
2172
  },
2088
2173
  value: inputValue,
2089
- placeholder: placeHolder
2174
+ placeholder: placeHolder,
2175
+ style: {
2176
+ cursor: disabled ? 'not-allowed' : 'auto'
2177
+ }
2090
2178
  }, props)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
2091
2179
  className: styles.errorMessage
2092
2180
  }, errorMessage) : null, optionList));
@@ -2128,4 +2216,4 @@ exports.Toaster = Toaster;
2128
2216
  exports.Tooltip = Tooltip;
2129
2217
  exports.Typography = Typography;
2130
2218
  exports.TypographyType = TypographyType;
2131
- exports.createToast = createToast;
2219
+ exports.toast = toast;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.63",
3
+ "version": "0.0.64",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/autocomplate/index.js CHANGED
@@ -107,6 +107,9 @@ export const Autocomplate = ({
107
107
  onClick={() => { setShowOptions(!showOptions) }}
108
108
  value={inputValue}
109
109
  placeholder={placeHolder}
110
+ style={{
111
+ cursor: disabled ? 'not-allowed' : 'auto'
112
+ }}
110
113
  {...props}
111
114
  />
112
115
  {errorMessage ? <span className={styles.errorMessage}>{errorMessage}</span> : null}
package/src/components/input/index.js CHANGED
@@ -61,6 +61,7 @@ export const Input = ({
61
61
  errorAnimationDuration,
62
62
  ...props
63
63
  }) => {
64
+ const phoneNumberRegex = /^\d{0,8}$/;
64
65
  const [show, setShow] = useState(false);
65
66
  const [isHover, setIsHover] = useState(false);
66
67
 
@@ -90,7 +91,15 @@ export const Input = ({
90
91
  `;
91
92
 
92
93
  const handleChange = (event) => {
93
- onChange ? onChange(event.target.value) : _ => _;
94
+ // TODO: need to discuss
95
+ // onChange
96
+ // ? type === 'tel'
97
+ // ? phoneNumberRegex.test(event.target.value)
98
+ // ? onChange(event.target.value)
99
+ // : _ => _
100
+ // : onChange(event.target.value)
101
+ // : _ => _;
102
+ onChange ? onChange(event.target.value) : _ => _
94
103
  };
95
104
 
96
105
  const handleMouseEnter = () => {
@@ -173,6 +182,8 @@ export const Input = ({
173
182
  }
174
183
  <input
175
184
  {...props}
185
+ // TODO: need to discuss
186
+ // value={type === 'tel' ? phoneNumberRegex.test(value) ? value : '' : maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
176
187
  value={maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
177
188
  className={classProps}
178
189
  onChange={handleChange}
@@ -184,7 +195,7 @@ export const Input = ({
184
195
  style={{
185
196
  border: 'none',
186
197
  outline: 'none',
187
- pointerEvents: disabled ? 'none' : 'auto',
198
+ cursor: disabled ? 'not-allowed' : 'auto',
188
199
  width: width ? width : configStyles.INPUT.width,
189
200
  fontSize: size ? size : configStyles.INPUT.size,
190
201
  height: height ? height : configStyles.INPUT.height,
package/src/components/select/index.js CHANGED
@@ -264,13 +264,14 @@ export const Select = ({
264
264
  </div>
265
265
  }
266
266
 
267
- <div
268
- style={{
269
- transform: opened ? 'rotate(180deg)' : 'rotate(0deg)',
270
- }}
271
- className={`${styles['arrow-icon']}`}>
272
- {arrowIcon ? arrowIcon : <ReactArrowIcon />}
273
- </div>
267
+ {!disabled ? <div
268
+ style={{
269
+ transform: opened ? 'rotate(180deg)' : 'rotate(0deg)',
270
+ }}
271
+ className={`${styles['arrow-icon']}`}>
272
+ {arrowIcon ? arrowIcon : <ReactArrowIcon />}
273
+ </div> : ''
274
+ }
274
275
  </div>
275
276
  </div>
276
277
  {
package/src/components/toaster/Toast.js CHANGED
@@ -10,14 +10,14 @@ import ToasterSuccess from '../icon/ToasterSuccess';
10
10
 
11
11
  import styles from './toaster.module.css';
12
12
 
13
- export const ToasterType = {
13
+ const ToasterType = {
14
14
  info: 'info',
15
15
  warn: 'warn',
16
16
  error: 'error',
17
17
  success: 'success'
18
18
  };
19
19
 
20
- export const ToasterPosition = {
20
+ const ToasterPosition = {
21
21
  topLeft: 'top-left',
22
22
  topRight: 'top-right',
23
23
  topCenter: 'top-center',
@@ -109,8 +109,6 @@ export const Toast = ({
109
109
  : ''
110
110
  }}
111
111
  >
112
- {/* <img
113
- src= */}
114
112
  {
115
113
  type === 'info' ? <ToasterInfo />
116
114
  : type === 'warn' ? <ToasterWarn />
@@ -118,8 +116,6 @@ export const Toast = ({
118
116
  : type === 'success' ? <ToasterSuccess />
119
117
  : ''
120
118
  }
121
- {/* alt="notify icon"
122
- /> */}
123
119
  </div>
124
120
 
125
121
  <div
@@ -170,10 +166,16 @@ export const Toast = ({
170
166
  };
171
167
 
172
168
  Toast.propTypes = {
169
+ timer: PropTypes.number,
170
+ title: PropTypes.string,
173
171
  description: PropTypes.string,
174
- title: PropTypes.string.isRequired,
175
- timer: PropTypes.number.isRequired,
176
172
  removeToast: PropTypes.func.isRequired,
173
+ position: PropTypes.oneOf(Object.values(ToasterPosition)),
177
174
  type: PropTypes.oneOf(Object.values(ToasterType)).isRequired,
178
- position: PropTypes.oneOf(Object.values(ToasterPosition)).isRequired,
179
- }
175
+ };
176
+
177
+ Toast.defaultProps = {
178
+ timer: 5000,
179
+ position: 'top-right',
180
+ title: 'toaster title'
181
+ };
package/src/components/toaster/index.js CHANGED
@@ -6,11 +6,13 @@ import { Toast } from './Toast';
6
6
  import styles from './toaster.module.css';
7
7
 
8
8
  let toastify;
9
+ let path = window.location.href;
9
10
 
10
- const removeToast = (ref, position) => {
11
- const parent = document.getElementById(styles[position]);
11
+ const removeToast = (ref) => {
12
12
  const node = ReactDOM.findDOMNode(ref.current);
13
13
  const removeElem = node.parentNode;
14
+ const parent = removeElem.parentNode;
15
+
14
16
  parent.removeChild(removeElem);
15
17
 
16
18
  if (!parent.hasChildNodes()) {
@@ -18,14 +20,17 @@ const removeToast = (ref, position) => {
18
20
  }
19
21
  };
20
22
 
21
- export const createToast = ({
23
+ const createToast = ({
22
24
  type,
23
- title,
24
25
  timer,
26
+ title,
25
27
  position,
26
28
  description,
27
29
  }) => {
28
30
  let toastParentBlock;
31
+ if (!toastify) {
32
+ toastify = document.getElementById('toastify');
33
+ }
29
34
 
30
35
  const toastBlock = document.createElement('div');
31
36
  toastBlock.style.position = 'relative';
@@ -43,11 +48,7 @@ export const createToast = ({
43
48
  });
44
49
  ReactDOM.render(newElem, toastBlock);
45
50
 
46
- if (!toastify) {
47
- toastify = document.getElementById('toastify');
48
- }
49
-
50
- if (!document.getElementById(styles[position])) {
51
+ if (!document.getElementById(styles[position]) || document.getElementById(styles[position]) == null) {
51
52
  toastParentBlock = document.createElement('div');
52
53
  toastParentBlock.style.position = 'fixed';
53
54
  toastParentBlock.style.display = 'flex';
@@ -61,12 +62,68 @@ export const createToast = ({
61
62
  }
62
63
  };
63
64
 
65
+ export const toast = {
66
+ success: (title, props) => {
67
+ const { timer, position, description } = props || {};
68
+ createToast({
69
+ title,
70
+ type: 'success',
71
+ timer: timer ? timer : 5000,
72
+ position: position ? position : 'top-right',
73
+ description: description ? description : ''
74
+ });
75
+ },
76
+ info: (title, props) => {
77
+ const { timer, position, description } = props || {};
78
+ createToast({
79
+ title,
80
+ type: 'info',
81
+ timer: timer ? timer : 5000,
82
+ position: position ? position : 'top-right',
83
+ description: description ? description : ''
84
+ });
85
+ },
86
+ warn: (title, props) => {
87
+ const { timer, position, description } = props || {};
88
+ createToast({
89
+ title,
90
+ type: 'warn',
91
+ timer: timer ? timer : 5000,
92
+ position: position ? position : 'top-right',
93
+ description: description ? description : ''
94
+ });
95
+ },
96
+ error: (title, props) => {
97
+ const { timer, position, description } = props || {};
98
+ createToast({
99
+ title,
100
+ type: 'error',
101
+ timer: timer ? timer : 5000,
102
+ position: position ? position : 'top-right',
103
+ description: description ? description : ''
104
+ });
105
+ }
106
+ };
107
+
64
108
  export const Toaster = () => {
109
+ window.addEventListener('popstate', () => {
110
+ if (path !== window.location.href) {
111
+ if (!toastify) {
112
+ toastify = document.getElementById('toastify');
113
+ }
114
+
115
+ if (toastify.hasChildNodes()) {
116
+ toastify.innerHTML = '';
117
+ }
118
+
119
+ path = window.location.href;
120
+ }
121
+ });
65
122
  const handleToasterClick = (e) => {
66
123
  e.stopPropagation();
67
124
  };
68
125
 
69
126
  return (
70
- <div onClick={handleToasterClick} id='toastify'></div>
71
- )
127
+ <div onClick={handleToasterClick} id="toastify"></div>
128
+ );
72
129
  };
package/src/components/toaster/toaster.stories.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { Toaster, createToast } from './index';
2
+ import { Toaster, toast } from './index';
3
3
  import { Button } from './../button';
4
4
 
5
5
  export default {
@@ -8,14 +8,48 @@ export default {
8
8
  };
9
9
 
10
10
  const Template = (args) => {
11
- const handleAddToaster = (type, timer, title, position, description) => {
12
- createToast({
13
- type,
14
- timer,
15
- title,
16
- position,
17
- description
18
- });
11
+ const handleAddToaster = (type, empty, title, timer, position, description) => {
12
+ if (type === 'success') {
13
+ if (empty) {
14
+ toast.success();
15
+ } else {
16
+ toast.success(title, {
17
+ timer,
18
+ position,
19
+ description
20
+ });
21
+ }
22
+ } else if (type === 'info') {
23
+ if (empty) {
24
+ toast.info();
25
+ } else {
26
+ toast.info(title, {
27
+ timer,
28
+ position,
29
+ description
30
+ });
31
+ }
32
+ } else if (type === 'warn') {
33
+ if (empty) {
34
+ toast.warn();
35
+ } else {
36
+ toast.warn(title, {
37
+ timer,
38
+ position,
39
+ description
40
+ });
41
+ }
42
+ } else if (type === 'error') {
43
+ if (empty) {
44
+ toast.error();
45
+ } else {
46
+ toast.error(title, {
47
+ timer,
48
+ position,
49
+ description
50
+ });
51
+ }
52
+ }
19
53
  };
20
54
 
21
55
  return (
@@ -23,6 +57,7 @@ const Template = (args) => {
23
57
  style={{
24
58
  height: 'calc(100vh - 100px)',
25
59
  display: 'flex',
60
+ overflowY: 'auto',
26
61
  flexDirection: 'column',
27
62
  justifyContent: 'center'
28
63
  }}
@@ -30,7 +65,55 @@ const Template = (args) => {
30
65
  <div
31
66
  style={{
32
67
  display: 'flex',
33
- marginBottom: '30px',
68
+ marginBottom: '20px',
69
+ paddingBottom: '20px',
70
+ borderBottom: '1.5px solid gray',
71
+ justifyContent: 'space-between'
72
+ }}
73
+ >
74
+ <Button
75
+ outline
76
+ radius='8px'
77
+ color='white'
78
+ contentWidth
79
+ backgroundColor='#10a574'
80
+ label="call empty Success toast"
81
+ onClick={() => handleAddToaster('success', true)}
82
+ />
83
+ <Button
84
+ outline
85
+ radius='8px'
86
+ color='white'
87
+ contentWidth
88
+ label="call empty Info toast"
89
+ backgroundColor='#02246b'
90
+ onClick={() => handleAddToaster('info', true)}
91
+ />
92
+ <Button
93
+ outline
94
+ radius='8px'
95
+ color='white'
96
+ contentWidth
97
+ label="call empty Warn toast"
98
+ backgroundColor='#ff8a04'
99
+ onClick={() => handleAddToaster('warn', true)}
100
+ />
101
+ <Button
102
+ outline
103
+ radius='8px'
104
+ color='white'
105
+ contentWidth
106
+ label="call empty Error toast"
107
+ backgroundColor='#ed0000'
108
+ onClick={() => handleAddToaster('error', true)}
109
+ />
110
+ </div>
111
+
112
+
113
+ <div
114
+ style={{
115
+ display: 'flex',
116
+ marginBottom: '20px',
34
117
  paddingBottom: '20px',
35
118
  borderBottom: '1.5px solid gray',
36
119
  justifyContent: 'space-between'
@@ -43,7 +126,7 @@ const Template = (args) => {
43
126
  color='white'
44
127
  label="Success top left"
45
128
  backgroundColor='#10a574'
46
- onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
129
+ onClick={() => handleAddToaster('success', false, 'Հաջողված', 5000, 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
47
130
  />
48
131
  <Button
49
132
  outline
@@ -52,7 +135,7 @@ const Template = (args) => {
52
135
  color='white'
53
136
  label="Success top right"
54
137
  backgroundColor='#10a574'
55
- onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
138
+ onClick={() => handleAddToaster('success', false, 'Հաջողված', 5000, 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
56
139
  />
57
140
  <Button
58
141
  outline
@@ -61,7 +144,7 @@ const Template = (args) => {
61
144
  color='white'
62
145
  label="Success top center"
63
146
  backgroundColor='#10a574'
64
- onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
147
+ onClick={() => handleAddToaster('success', false, 'Հաջողված', 5000, 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
65
148
  />
66
149
  <Button
67
150
  outline
@@ -70,7 +153,7 @@ const Template = (args) => {
70
153
  color='white'
71
154
  label="Success bottom left"
72
155
  backgroundColor='#10a574'
73
- onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
156
+ onClick={() => handleAddToaster('success', false, 'Հաջողված', 5000, 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
74
157
  />
75
158
  <Button
76
159
  outline
@@ -79,7 +162,7 @@ const Template = (args) => {
79
162
  color='white'
80
163
  label="Success bottom right"
81
164
  backgroundColor='#10a574'
82
- onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
165
+ onClick={() => handleAddToaster('success', false, 'Հաջողված', 5000, 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
83
166
  />
84
167
  <Button
85
168
  outline
@@ -88,14 +171,14 @@ const Template = (args) => {
88
171
  color='white'
89
172
  label="Success bottom center"
90
173
  backgroundColor='#10a574'
91
- onClick={() => handleAddToaster('success', 4000, 'Հաջողված', 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
174
+ onClick={() => handleAddToaster('success', false, 'Հաջողված', 5000, 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
92
175
  />
93
176
  </div>
94
177
 
95
178
  <div
96
179
  style={{
97
180
  display: 'flex',
98
- marginBottom: '30px',
181
+ marginBottom: '20px',
99
182
  paddingBottom: '20px',
100
183
  borderBottom: '1.5px solid gray',
101
184
  justifyContent: 'space-between'
@@ -108,7 +191,7 @@ const Template = (args) => {
108
191
  color='white'
109
192
  label="Info top left"
110
193
  backgroundColor='#02246b'
111
- onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
194
+ onClick={() => handleAddToaster('info', false, 'Տեղեկատվություն', 5000, 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
112
195
  />
113
196
  <Button
114
197
  outline
@@ -117,7 +200,7 @@ const Template = (args) => {
117
200
  color='white'
118
201
  label="Info top right"
119
202
  backgroundColor='#02246b'
120
- onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
203
+ onClick={() => handleAddToaster('info', false, 'Տեղեկատվություն', 5000, 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
121
204
  />
122
205
  <Button
123
206
  outline
@@ -126,7 +209,7 @@ const Template = (args) => {
126
209
  color='white'
127
210
  label="Info top center"
128
211
  backgroundColor='#02246b'
129
- onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
212
+ onClick={() => handleAddToaster('info', false, 'Տեղեկատվություն', 5000, 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
130
213
  />
131
214
  <Button
132
215
  outline
@@ -135,7 +218,7 @@ const Template = (args) => {
135
218
  color='white'
136
219
  label="Info bottom left"
137
220
  backgroundColor='#02246b'
138
- onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
221
+ onClick={() => handleAddToaster('info', false, 'Տեղեկատվություն', 5000, 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
139
222
  />
140
223
  <Button
141
224
  outline
@@ -144,7 +227,7 @@ const Template = (args) => {
144
227
  color='white'
145
228
  label="Info bottom right"
146
229
  backgroundColor='#02246b'
147
- onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
230
+ onClick={() => handleAddToaster('info', false, 'Տեղեկատվություն', 5000, 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
148
231
  />
149
232
  <Button
150
233
  outline
@@ -153,14 +236,14 @@ const Template = (args) => {
153
236
  color='white'
154
237
  label="Info bottom center"
155
238
  backgroundColor='#02246b'
156
- onClick={() => handleAddToaster('info', 4000, 'Տեղեկատվություն', 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
239
+ onClick={() => handleAddToaster('info', false, 'Տեղեկատվություն', 5000, 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
157
240
  />
158
241
  </div>
159
242
 
160
243
  <div
161
244
  style={{
162
245
  display: 'flex',
163
- marginBottom: '30px',
246
+ marginBottom: '20px',
164
247
  paddingBottom: '20px',
165
248
  borderBottom: '1.5px solid gray',
166
249
  justifyContent: 'space-between'
@@ -173,7 +256,7 @@ const Template = (args) => {
173
256
  color='white'
174
257
  label="Warning top left"
175
258
  backgroundColor='#ff8a04'
176
- onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
259
+ onClick={() => handleAddToaster('warn', false, 'Զգուշացում', 5000, 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
177
260
  />
178
261
  <Button
179
262
  outline
@@ -182,7 +265,7 @@ const Template = (args) => {
182
265
  color='white'
183
266
  label="Warning top right"
184
267
  backgroundColor='#ff8a04'
185
- onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
268
+ onClick={() => handleAddToaster('warn', false, 'Զգուշացում', 5000, 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
186
269
  />
187
270
  <Button
188
271
  outline
@@ -191,7 +274,7 @@ const Template = (args) => {
191
274
  color='white'
192
275
  label="Warning top center"
193
276
  backgroundColor='#ff8a04'
194
- onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
277
+ onClick={() => handleAddToaster('warn', false, 'Զգուշացում', 5000, 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
195
278
  />
196
279
  <Button
197
280
  outline
@@ -200,7 +283,7 @@ const Template = (args) => {
200
283
  color='white'
201
284
  label="Warning bottom left"
202
285
  backgroundColor='#ff8a04'
203
- onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
286
+ onClick={() => handleAddToaster('warn', false, 'Զգուշացում', 5000, 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
204
287
  />
205
288
  <Button
206
289
  outline
@@ -209,7 +292,7 @@ const Template = (args) => {
209
292
  color='white'
210
293
  label="Warning bottom right"
211
294
  backgroundColor='#ff8a04'
212
- onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
295
+ onClick={() => handleAddToaster('warn', false, 'Զգուշացում', 5000, 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
213
296
  />
214
297
  <Button
215
298
  outline
@@ -218,14 +301,14 @@ const Template = (args) => {
218
301
  color='white'
219
302
  label="Warning bottom center"
220
303
  backgroundColor='#ff8a04'
221
- onClick={() => handleAddToaster('warn', 4000, 'Զգուշացում', 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
304
+ onClick={() => handleAddToaster('warn', false, 'Զգուշացում', 5000, 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
222
305
  />
223
306
  </div>
224
307
 
225
308
  <div
226
309
  style={{
227
310
  display: 'flex',
228
- marginBottom: '30px',
311
+ marginBottom: '20px',
229
312
  paddingBottom: '20px',
230
313
  borderBottom: '1.5px solid gray',
231
314
  justifyContent: 'space-between'
@@ -238,7 +321,7 @@ const Template = (args) => {
238
321
  color='white'
239
322
  label="Error top left"
240
323
  backgroundColor='#ed0000'
241
- onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
324
+ onClick={() => handleAddToaster('error', false, 'Սխալ', 5000, 'top-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
242
325
  />
243
326
  <Button
244
327
  outline
@@ -247,7 +330,7 @@ const Template = (args) => {
247
330
  color='white'
248
331
  label="Error top right"
249
332
  backgroundColor='#ed0000'
250
- onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
333
+ onClick={() => handleAddToaster('error', false, 'Սխալ', 5000, 'top-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
251
334
  />
252
335
  <Button
253
336
  outline
@@ -256,9 +339,8 @@ const Template = (args) => {
256
339
  color='white'
257
340
  label="Error top center"
258
341
  backgroundColor='#ed0000'
259
- onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
342
+ onClick={() => handleAddToaster('error', false, 'Սխալ', 5000, 'top-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
260
343
  />
261
-
262
344
  <Button
263
345
  outline
264
346
  radius='8px'
@@ -266,7 +348,7 @@ const Template = (args) => {
266
348
  color='white'
267
349
  label="Error bottom left"
268
350
  backgroundColor='#ed0000'
269
- onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
351
+ onClick={() => handleAddToaster('error', false, 'Սխալ', 5000, 'bottom-left', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
270
352
  />
271
353
  <Button
272
354
  outline
@@ -275,7 +357,7 @@ const Template = (args) => {
275
357
  color='white'
276
358
  label="Error bottom right"
277
359
  backgroundColor='#ed0000'
278
- onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
360
+ onClick={() => handleAddToaster('error', false, 'Սխալ', 5000, 'bottom-right', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
279
361
  />
280
362
  <Button
281
363
  outline
@@ -284,7 +366,7 @@ const Template = (args) => {
284
366
  color='white'
285
367
  label="Error bottom center"
286
368
  backgroundColor='#ed0000'
287
- onClick={() => handleAddToaster('error', 4000, 'Սխալ', 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
369
+ onClick={() => handleAddToaster('error', false, 'Սխալ', 5000, 'bottom-center', 'lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla, lorem ipsum bla bla bla')}
288
370
  />
289
371
  </div>
290
372
 
package/src/stories/configuration.stories.mdx CHANGED
@@ -368,16 +368,38 @@ import StackAlt from './assets/stackalt.svg';
368
368
 
369
369
  ### Toaster
370
370
 
371
- #### toaster props are not global, you should set directly
372
- ##### all properties are required except description
373
371
  ```
374
372
  {
375
- createToast({
376
- type, ---> one of this strings ['info', 'warn', 'error', 'success']
377
- timer, ---> timer must be a number, for example 5000, is a 5 seconds
378
- title, ---> title is a string for toast title
379
- description ---> description is a string for toast description
380
- position ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
373
+ toast.success();
374
+ toast.success(title);
375
+ toast.success(title, {
376
+ timer: 5000, ---> timer must be a number, for example 5000, is a 5 seconds
377
+ position: 'top-right', ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
378
+ description: 'Toast description' ---> description is a string for toast description
379
+ });
380
+
381
+ toast.info();
382
+ toast.info(title);
383
+ toast.info(title, {
384
+ timer: 5000, ---> timer must be a number, for example 5000, is a 5 seconds
385
+ position: 'top-right', ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
386
+ description: 'Toast description' ---> description is a string for toast description
387
+ });
388
+
389
+ toast.warn();
390
+ toast.warn(title);
391
+ toast.warn(title, {
392
+ timer: 5000, ---> timer must be a number, for example 5000, is a 5 seconds
393
+ position: 'top-right', ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
394
+ description: 'Toast description' ---> description is a string for toast description
395
+ });
396
+
397
+ toast.error();
398
+ toast.error(title);
399
+ toast.error(title, {
400
+ timer: 5000, ---> timer must be a number, for example 5000, is a 5 seconds
401
+ position: 'top-right', ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
402
+ description: 'Toast description' ---> description is a string for toast description
381
403
  });
382
404
  }
383
405
  ```