@xaypay/tui 0.0.95 → 0.0.97

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 (7) hide show
  1. package/dist/index.es.js +18 -9
  2. package/dist/index.js +18 -9
  3. package/package.json +1 -1
  4. package/src/components/input/index.js +7 -5
  5. package/src/components/modal/index.js +10 -3
  6. package/src/stories/configuration.stories.mdx +3 -1
  7. package/tui.config.js +3 -1
package/dist/index.es.js CHANGED
@@ -455,13 +455,15 @@ const Modal = ({
455
455
  headerSize,
456
456
  imageHeight,
457
457
  headerColor,
458
+ borderStyle,
459
+ borderWidth,
460
+ borderColor,
458
461
  outsideClose,
459
462
  headerWeight,
460
463
  headerHeight,
461
464
  justifyContent,
462
465
  backgroundColor,
463
- layerBackgroundColor,
464
- borderWidth
466
+ layerBackgroundColor
465
467
  }) => {
466
468
  const [select, setSelect] = useState(0);
467
469
  const [innerData, setInnerData] = useState([]);
@@ -546,7 +548,7 @@ const Modal = ({
546
548
  height: height ? height : configStyles.MODAL.height,
547
549
  position: 'relative',
548
550
  display: 'grid',
549
- overflow: 'auto',
551
+ overflow: 'hidden',
550
552
  boxSizing: 'border-box',
551
553
  gridTemplateRows: 'auto 10fr',
552
554
  borderRadius: radius ? radius : configStyles.MODAL.radius,
@@ -608,7 +610,10 @@ const Modal = ({
608
610
  alignItems: 'center',
609
611
  boxSizing: 'border-box',
610
612
  justifyContent: 'center',
611
- borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth
613
+ overflow: 'auto',
614
+ borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
615
+ borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
616
+ borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor
612
617
  }
613
618
  }, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default.createElement("div", {
614
619
  style: {
@@ -683,6 +688,8 @@ Modal.propTypes = {
683
688
  imageWidth: PropTypes.string,
684
689
  headerSize: PropTypes.string,
685
690
  outsideClose: PropTypes.bool,
691
+ borderStyle: PropTypes.string,
692
+ borderWidth: PropTypes.string,
686
693
  headerColor: PropTypes.string,
687
694
  imageHeight: PropTypes.string,
688
695
  headerWeight: PropTypes.string,
@@ -790,7 +797,7 @@ const Input = ({
790
797
  const handleChange = event => {
791
798
  const currentValue = event.target.value;
792
799
  let prevValue = innerValue;
793
- setInnerValue(currentValue);
800
+ setInnerValue(() => currentValue);
794
801
  if (change) {
795
802
  change(currentValue);
796
803
  }
@@ -818,9 +825,10 @@ const Input = ({
818
825
  if (type === 'number') {
819
826
  const regNum = /^\d+(\.)?(\d+)?$/;
820
827
  if (!regNum.test(currentValue)) {
821
- setInnerValue(prevValue);
828
+ const newStr = currentValue.replace(/[^\d+]/g, '');
829
+ setInnerValue(newStr);
822
830
  if (change) {
823
- change(prevValue);
831
+ change(newStr);
824
832
  }
825
833
  }
826
834
  if (minNumSize && currentValue < minNumSize) {
@@ -913,9 +921,10 @@ const Input = ({
913
921
  if (type === 'number') {
914
922
  const regNum = /^\d+(\.)?(\d+)?$/;
915
923
  if (!regNum.test(value)) {
916
- setInnerValue('');
924
+ const newStr = value.replace(/[^\d+]/g, '');
925
+ setInnerValue(newStr);
917
926
  if (change) {
918
- change('');
927
+ change(newStr);
919
928
  }
920
929
  }
921
930
  if (minNumSize && value < minNumSize) {
package/dist/index.js CHANGED
@@ -485,13 +485,15 @@ const Modal = ({
485
485
  headerSize,
486
486
  imageHeight,
487
487
  headerColor,
488
+ borderStyle,
489
+ borderWidth,
490
+ borderColor,
488
491
  outsideClose,
489
492
  headerWeight,
490
493
  headerHeight,
491
494
  justifyContent,
492
495
  backgroundColor,
493
- layerBackgroundColor,
494
- borderWidth
496
+ layerBackgroundColor
495
497
  }) => {
496
498
  const [select, setSelect] = React.useState(0);
497
499
  const [innerData, setInnerData] = React.useState([]);
@@ -576,7 +578,7 @@ const Modal = ({
576
578
  height: height ? height : configStyles.MODAL.height,
577
579
  position: 'relative',
578
580
  display: 'grid',
579
- overflow: 'auto',
581
+ overflow: 'hidden',
580
582
  boxSizing: 'border-box',
581
583
  gridTemplateRows: 'auto 10fr',
582
584
  borderRadius: radius ? radius : configStyles.MODAL.radius,
@@ -638,7 +640,10 @@ const Modal = ({
638
640
  alignItems: 'center',
639
641
  boxSizing: 'border-box',
640
642
  justifyContent: 'center',
641
- borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth
643
+ overflow: 'auto',
644
+ borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
645
+ borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
646
+ borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor
642
647
  }
643
648
  }, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default["default"].createElement("div", {
644
649
  style: {
@@ -713,6 +718,8 @@ Modal.propTypes = {
713
718
  imageWidth: PropTypes__default["default"].string,
714
719
  headerSize: PropTypes__default["default"].string,
715
720
  outsideClose: PropTypes__default["default"].bool,
721
+ borderStyle: PropTypes__default["default"].string,
722
+ borderWidth: PropTypes__default["default"].string,
716
723
  headerColor: PropTypes__default["default"].string,
717
724
  imageHeight: PropTypes__default["default"].string,
718
725
  headerWeight: PropTypes__default["default"].string,
@@ -820,7 +827,7 @@ const Input = ({
820
827
  const handleChange = event => {
821
828
  const currentValue = event.target.value;
822
829
  let prevValue = innerValue;
823
- setInnerValue(currentValue);
830
+ setInnerValue(() => currentValue);
824
831
  if (change) {
825
832
  change(currentValue);
826
833
  }
@@ -848,9 +855,10 @@ const Input = ({
848
855
  if (type === 'number') {
849
856
  const regNum = /^\d+(\.)?(\d+)?$/;
850
857
  if (!regNum.test(currentValue)) {
851
- setInnerValue(prevValue);
858
+ const newStr = currentValue.replace(/[^\d+]/g, '');
859
+ setInnerValue(newStr);
852
860
  if (change) {
853
- change(prevValue);
861
+ change(newStr);
854
862
  }
855
863
  }
856
864
  if (minNumSize && currentValue < minNumSize) {
@@ -943,9 +951,10 @@ const Input = ({
943
951
  if (type === 'number') {
944
952
  const regNum = /^\d+(\.)?(\d+)?$/;
945
953
  if (!regNum.test(value)) {
946
- setInnerValue('');
954
+ const newStr = value.replace(/[^\d+]/g, '');
955
+ setInnerValue(newStr);
947
956
  if (change) {
948
- change('');
957
+ change(newStr);
949
958
  }
950
959
  }
951
960
  if (minNumSize && value < minNumSize) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.95",
3
+ "version": "0.0.97",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/input/index.js CHANGED
@@ -108,7 +108,7 @@ export const Input = ({
108
108
 
109
109
  let prevValue = innerValue;
110
110
 
111
- setInnerValue(currentValue);
111
+ setInnerValue(() => currentValue);
112
112
  if (change) {
113
113
  change(currentValue);
114
114
  }
@@ -138,9 +138,10 @@ export const Input = ({
138
138
  if (type === 'number') {
139
139
  const regNum = /^\d+(\.)?(\d+)?$/;
140
140
  if (!regNum.test(currentValue)) {
141
- setInnerValue(prevValue);
141
+ const newStr = currentValue.replace(/[^\d+]/g, '');
142
+ setInnerValue(newStr);
142
143
  if (change) {
143
- change(prevValue);
144
+ change(newStr);
144
145
  }
145
146
  }
146
147
  if (minNumSize && currentValue < minNumSize) {
@@ -243,9 +244,10 @@ export const Input = ({
243
244
  if (type === 'number') {
244
245
  const regNum = /^\d+(\.)?(\d+)?$/;
245
246
  if (!regNum.test(value)) {
246
- setInnerValue('');
247
+ const newStr = value.replace(/[^\d+]/g, '');
248
+ setInnerValue(newStr);
247
249
  if (change) {
248
- change('');
250
+ change(newStr);
249
251
  }
250
252
  }
251
253
  if (minNumSize && value < minNumSize) {
package/src/components/modal/index.js CHANGED
@@ -31,13 +31,15 @@ export const Modal = ({
31
31
  headerSize,
32
32
  imageHeight,
33
33
  headerColor,
34
+ borderStyle,
35
+ borderWidth,
36
+ borderColor,
34
37
  outsideClose,
35
38
  headerWeight,
36
39
  headerHeight,
37
40
  justifyContent,
38
41
  backgroundColor,
39
42
  layerBackgroundColor,
40
- borderWidth,
41
43
  }) => {
42
44
  const [select, setSelect] = useState(0);
43
45
  const [innerData, setInnerData] = useState([]);
@@ -133,7 +135,7 @@ export const Modal = ({
133
135
  height: height ? height : configStyles.MODAL.height,
134
136
  position: 'relative',
135
137
  display: 'grid',
136
- overflow: 'auto',
138
+ overflow: 'hidden',
137
139
  boxSizing: 'border-box',
138
140
  gridTemplateRows: 'auto 10fr',
139
141
  borderRadius: radius ? radius : configStyles.MODAL.radius,
@@ -213,7 +215,10 @@ export const Modal = ({
213
215
  alignItems: 'center',
214
216
  boxSizing: 'border-box',
215
217
  justifyContent: 'center',
216
- borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth
218
+ overflow: 'auto',
219
+ borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
220
+ borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
221
+ borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor,
217
222
  }}
218
223
  >
219
224
  {
@@ -319,6 +324,8 @@ Modal.propTypes = {
319
324
  imageWidth: PropTypes.string,
320
325
  headerSize: PropTypes.string,
321
326
  outsideClose: PropTypes.bool,
327
+ borderStyle: PropTypes.string,
328
+ borderWidth: PropTypes.string,
322
329
  headerColor: PropTypes.string,
323
330
  imageHeight: PropTypes.string,
324
331
  headerWeight: PropTypes.string,
package/src/stories/configuration.stories.mdx CHANGED
@@ -599,5 +599,7 @@ import StackAlt from './assets/stackalt.svg';
599
599
  backgroundColor: 'white', // for modal background color
600
600
  padding: '10px 20px 20px', // for modal padding
601
601
  layerBackgroundColor: 'rgba(0,0,0,0.4)', // for modal parent layer background color
602
+ borderWidth: '20px', // for modal padding from border transparent
603
+ borderStyle: 'solid', // for modal border style
602
604
  }
603
- ```
605
+ ```
package/tui.config.js CHANGED
@@ -395,7 +395,9 @@ module.exports = {
395
395
  backgroundColor: 'white', // for modal background color
396
396
  padding: '20px 20px 20px', // for modal padding
397
397
  layerBackgroundColor: 'rgba(0,0,0,0.4)', // for modal parent layer background color
398
- borderWidth: '20px solid transparent', // for modal padding from border transparent
398
+ borderWidth: '20px', // for modal padding from border transparent
399
+ borderStyle: 'solid', // for modal border style
400
+ borderColor: 'transparent', // for modal border color
399
401
  },
400
402
  // default properties for <Table /> component
401
403
  TABLE: {