@xaypay/tui 0.0.53 → 0.0.54

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 +1001 -978
  2. package/dist/index.js +1000 -977
  3. package/package.json +1 -1
  4. package/src/assets/icons/tooltip.svg +3 -0
  5. package/src/components/tooltip/index.js +39 -29
  6. package/src/components/tooltip/tooltip.module.css +7 -0
  7. package/src/components/tooltip/tooltip.stories.js +10 -6
  8. package/src/components/typography/index.js +20 -6
  9. package/src/components/typography/typography.stories.js +1 -1
  10. package/src/index.js +11 -11
  11. package/tui.config.js +2 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.53",
3
+ "version": "0.0.54",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/assets/icons/tooltip.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <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"/>
3
+ </svg>
package/src/components/tooltip/index.js CHANGED
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
3
3
  import classnames from 'classnames';
4
4
  import { compereConfigs } from "./../../utils";
5
5
 
6
+ // import ReactInfoIcon from './../../assets/icons/tooltip.svg';
7
+
6
8
  import styles from "./tooltip.module.css";
7
9
 
8
10
  export const Tooltip = ({
@@ -10,6 +12,7 @@ export const Tooltip = ({
10
12
  text,
11
13
  width,
12
14
  color,
15
+ tIcon,
13
16
  height,
14
17
  bgColor,
15
18
  fontSize,
@@ -55,41 +58,47 @@ export const Tooltip = ({
55
58
  backgroundColor: bgColor ? bgColor : configStyles.TOOLTIP.bgColor,
56
59
  }}
57
60
  >
58
- <div
59
- ref={tooltipRef}
60
- className={classProps}
61
- style={{
62
- backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.tBgColor,
63
- borderRadius: tBorderRadius ? tBorderRadius : configStyles.TOOLTIP.tBorderRadius,
64
- top: type === 'top' ? `calc(-${tooltipHeight + 7}px)` : type === 'bottom' ? 'calc(100% + 7px)' : type === 'left' || type === 'right' ? `calc(50% - ${tooltipHeight / 2}px)` : '0px',
65
- left: type === 'top' || type === 'bottom' ? `calc(50% - ${tooltipWidth / 2}px)` : type === 'left' ? `-${tooltipWidth + 7}px` : type === 'right' ? 'calc(100% + 7px)' : '0px'
66
- }}
67
- >
61
+ {
62
+ showTooltip ?
68
63
  <div
69
- className={`${styles['tooltip-rel']}`}
64
+ ref={tooltipRef}
65
+ className={classProps}
66
+ style={{
67
+ backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.tBgColor,
68
+ borderRadius: tBorderRadius ? tBorderRadius : configStyles.TOOLTIP.tBorderRadius,
69
+ top: type === 'top' ? `calc(-${tooltipHeight + 7}px)` : type === 'bottom' ? 'calc(100% + 7px)' : type === 'left' || type === 'right' ? `calc(50% - ${tooltipHeight / 2}px)` : '0px',
70
+ left: type === 'top' || type === 'bottom' ? `calc(50% - ${tooltipWidth / 2}px)` : type === 'left' ? `-${tooltipWidth + 7}px` : type === 'right' ? 'calc(100% + 7px)' : '0px'
71
+ }}
70
72
  >
71
73
  <div
72
- className={`${styles['tooltip-decor']}`}
73
- style={{
74
- backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.bgColor,
75
- left: type === 'top' || type === 'bottom' ? 'calc(50% - 5px)' : type === 'right' ? '-15px' : type === 'left' ? 'calc(100% + 5px)' : '0px',
76
- top: type === 'top' ? 'calc(100% + 5px)' : type === 'bottom' ? '-15px' : type === 'right' || type === 'left' ? 'calc(50% - 5px)' : '0px'
77
- }}
78
- ></div>
79
- <p
80
- style={{
81
- color: color ? color : configStyles.TOOLTIP.color,
82
- fontSize: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
83
- lineHeight: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
84
- fontFamily: fontFamily ? fontFamily : configStyles.TOOLTIP.fontFamily
85
- }}
74
+ className={`${styles['tooltip-rel']}`}
86
75
  >
87
- { text }
88
- </p>
76
+ <div
77
+ className={`${styles['tooltip-decor']}`}
78
+ style={{
79
+ backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.bgColor,
80
+ left: type === 'top' || type === 'bottom' ? 'calc(50% - 5px)' : type === 'right' ? '-15px' : type === 'left' ? 'calc(100% + 5px)' : '0px',
81
+ top: type === 'top' ? 'calc(100% + 5px)' : type === 'bottom' ? '-15px' : type === 'right' || type === 'left' ? 'calc(50% - 5px)' : '0px'
82
+ }}
83
+ ></div>
84
+ <p
85
+ style={{
86
+ color: color ? color : configStyles.TOOLTIP.color,
87
+ fontSize: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
88
+ lineHeight: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
89
+ fontFamily: fontFamily ? fontFamily : configStyles.TOOLTIP.fontFamily
90
+ }}
91
+ >
92
+ { text }
93
+ </p>
94
+ </div>
89
95
  </div>
96
+ : ''
97
+ }
98
+
99
+ <div style={{cursor: 'pointer'}} onClick={handleShow}>
100
+ {/* {tIcon ? tIcon : <img src={ReactInfoIcon} alt="ReactInfoIcon" />} */}
90
101
  </div>
91
-
92
-
93
102
  </div>
94
103
  );
95
104
  };
@@ -97,6 +106,7 @@ export const Tooltip = ({
97
106
  Tooltip.propTypes = {
98
107
  width: PropTypes.string,
99
108
  color: PropTypes.string,
109
+ tIcon: PropTypes.element,
100
110
  height: PropTypes.string,
101
111
  bgColor: PropTypes.string,
102
112
  tBgColor: PropTypes.string,
package/src/components/tooltip/tooltip.module.css CHANGED
@@ -1,3 +1,10 @@
1
+ .tooltip-block {
2
+ position: relative;
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ }
7
+
1
8
  .tooltip {
2
9
  position: absolute;
3
10
  z-index: 1;
package/src/components/tooltip/tooltip.stories.js CHANGED
@@ -7,15 +7,14 @@ export default {
7
7
  title: "Components/Tooltip",
8
8
  };
9
9
 
10
- export const Template = (args) => {
10
+ const Template = (args) => {
11
11
  return (
12
12
  <div
13
13
  style={{
14
- width: '80px',
15
- height: '100px',
16
- position: 'relative',
17
- backgroundColor: 'red',
18
- margin: '100px auto'
14
+ display: 'flex',
15
+ alignItems: 'center',
16
+ justifyContent: 'center',
17
+ height: 'calc(100vh - 32px)'
19
18
  }}
20
19
  >
21
20
  <Tooltip {...args} />
@@ -23,4 +22,9 @@ export const Template = (args) => {
23
22
  );
24
23
  };
25
24
 
25
+ export const Default = Template.bind({});
26
+ Default.args = {
27
+ type: 'bottom',
28
+ text: 'new tooltip'
29
+ }
26
30
 
package/src/components/typography/index.js CHANGED
@@ -17,6 +17,7 @@ export const TypographyType = {
17
17
 
18
18
  export const Typography = ({
19
19
  size,
20
+ color,
20
21
  weight,
21
22
  onClick,
22
23
  variant,
@@ -24,26 +25,38 @@ export const Typography = ({
24
25
  className,
25
26
  ...props
26
27
  }) => {
27
- const [validVariant, setValidVariant] = useState(false);
28
-
29
28
  const configStyles = compereConfigs();
30
29
  const classProps = classnames(className);
31
30
 
31
+ const [validVariant, setValidVariant] = useState(false);
32
+ const [style, setStyle] = useState({
33
+ fontSize: size ? size : configStyles.TYPOGRAPHY['fSize'+variant],
34
+ fontWeight: weight ? weight : configStyles.TYPOGRAPHY['fWeight'+variant]
35
+ });
36
+
32
37
  useEffect(() => {
33
38
  if (!Object.values(TypographyType).includes(variant)) {
34
39
  setValidVariant(true);
35
40
  }
36
41
  }, [variant]);
37
42
 
43
+ useEffect(() => {
44
+ if (color) {
45
+ setStyle(prev => {
46
+ return {
47
+ ...prev,
48
+ color: color
49
+ }
50
+ })
51
+ }
52
+ }, [color]);
53
+
38
54
  const tagT = React.createElement(
39
55
  variant,
40
56
  {
57
+ style,
41
58
  ...props,
42
59
  className: classProps,
43
- style: {
44
- fontSize: size ? size : configStyles.TYPOGRAPHY['fSize'+variant],
45
- fontWeight: weight ? weight : configStyles.TYPOGRAPHY['fWeight'+variant]
46
- },
47
60
  onClick: onClick ? onClick : _ => _,
48
61
  },
49
62
  [children]
@@ -56,6 +69,7 @@ export const Typography = ({
56
69
 
57
70
  Typography.propTypes = {
58
71
  size: PropTypes.string,
72
+ color: PropTypes.string,
59
73
  weight: PropTypes.string,
60
74
  onClick: PropTypes.func,
61
75
  className: PropTypes.string,
package/src/components/typography/typography.stories.js CHANGED
@@ -12,7 +12,7 @@ export const Template = (args) => <>
12
12
  <Typography {...args} variant="h1">Dynamic Typography</Typography>
13
13
  {
14
14
  staticTag.map((tag,key) => {
15
- return <Typography key={key} size="12px" variant={tag}>{tag}</Typography>;
15
+ return <Typography key={key} variant={tag} color={"#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase()}>{tag}</Typography>;
16
16
  })
17
17
  }
18
18
  </>;
package/src/index.js CHANGED
@@ -1,15 +1,15 @@
1
- export * from './components/tooltip';
2
- export * from './components/button';
3
- export * from './components/typography';
4
- export * from './components/autocomplate';
5
- export * from './components/checkbox';
6
- export * from './components/icon/Icon';
1
+ export * from './components/file';
2
+ export * from './components/table';
3
+ export * from './components/modal';
7
4
  export * from './components/input';
8
- export * from './components/pagination';
9
5
  export * from './components/radio';
6
+ export * from './components/button';
7
+ export * from './components/select';
8
+ export * from './components/tooltip';
10
9
  export * from './components/captcha';
11
10
  export * from './components/stepper';
12
- export * from './components/select';
13
- export * from './components/file';
14
- export * from './components/modal';
15
- export * from './components/table';
11
+ export * from './components/checkbox';
12
+ export * from './components/icon/Icon';
13
+ export * from './components/typography';
14
+ export * from './components/pagination';
15
+ export * from './components/autocomplate';
package/tui.config.js CHANGED
@@ -38,7 +38,8 @@ module.exports = {
38
38
  boxShadowHover: '0 0 0 2px #3c393e'
39
39
  },
40
40
  TOOLTIP: {
41
-
41
+ width: '46px',
42
+ height: '46px'
42
43
  },
43
44
  TYPOGRAPHY: {
44
45
  fSizep: '13px',