@arcblock/ux 1.16.69 → 1.16.70

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/Tag/index.js +22 -9
  2. package/package.json +4 -4
  3. package/src/Tag/index.js +20 -8
package/lib/Tag/index.js CHANGED
@@ -13,6 +13,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
13
 
14
14
  var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
15
15
 
16
+ var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
17
+
16
18
  var _Util = require("../Util");
17
19
 
18
20
  var _Colors = _interopRequireDefault(require("../Colors"));
@@ -27,20 +29,20 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
27
29
 
28
30
  const types = {
29
31
  error: {
30
- color: _Colors.default.error.main,
31
- backgroundColor: 'rgba(227, 91, 84, 0.2)'
32
+ color: _Colors.default.common.white,
33
+ backgroundColor: _Colors.default.error.main
32
34
  },
33
35
  warning: {
34
- color: _Colors.default.warning.main,
35
- backgroundColor: 'rgba(247, 208, 64, 0.2)'
36
+ color: _Colors.default.common.white,
37
+ backgroundColor: _Colors.default.warning.main
36
38
  },
37
39
  success: {
38
- color: _Colors.default.success.main,
39
- backgroundColor: '#eafbd9'
40
+ color: _Colors.default.common.white,
41
+ backgroundColor: _Colors.default.success.main
40
42
  },
41
43
  primary: {
42
- color: _Colors.default.primary.main,
43
- backgroundColor: '#ECEFFF'
44
+ color: _Colors.default.common.white,
45
+ backgroundColor: _Colors.default.primary.main
44
46
  },
45
47
  reverse: {
46
48
  color: '#fff',
@@ -61,7 +63,18 @@ function Tag(props) {
61
63
  } = newProps,
62
64
  rest = _objectWithoutProperties(newProps, _excluded);
63
65
 
66
+ const {
67
+ palette
68
+ } = (0, _useTheme.default)();
64
69
  const styles = Object.assign({}, types[type] || types.primary, style);
70
+
71
+ if (palette[type]) {
72
+ Object.assign(styles, {
73
+ color: palette[type].contrastText || _Colors.default.common.white,
74
+ backgroundColor: palette[type].main
75
+ });
76
+ }
77
+
65
78
  return /*#__PURE__*/_react.default.createElement(Span, Object.assign({
66
79
  ref: forwardedRef,
67
80
  component: "span",
@@ -92,4 +105,4 @@ exports.default = _default;
92
105
  const Span = (0, _styledComponents.default)(_Typography.default).withConfig({
93
106
  displayName: "Tag__Span",
94
107
  componentId: "sc-wqpeo3-0"
95
- })(["&&{display:inline-flex;justify-content:center;align-items:center;padding:2px 10px;height:20px;line-height:20px;font-size:12px;font-weight:500;}"]);
108
+ })(["&&{display:inline-flex;justify-content:center;align-items:center;padding:2px 10px;height:20px;line-height:20px;font-size:12px;font-weight:500;border-radius:4px;}"]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "1.16.69",
3
+ "version": "1.16.70",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -53,10 +53,10 @@
53
53
  "react": ">=16.12.0",
54
54
  "react-ga": "^2.7.0"
55
55
  },
56
- "gitHead": "703c02798936b92e8c17a9134c6983443901afb3",
56
+ "gitHead": "d6cb72855cb7ef4ea36a4f5b160b5743e5440555",
57
57
  "dependencies": {
58
- "@arcblock/icons": "^1.16.69",
59
- "@arcblock/react-hooks": "^1.16.69",
58
+ "@arcblock/icons": "^1.16.70",
59
+ "@arcblock/react-hooks": "^1.16.70",
60
60
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
61
61
  "@fontsource/lato": "^4.5.3",
62
62
  "@material-ui/core": "^4.12.3",
package/src/Tag/index.js CHANGED
@@ -3,26 +3,27 @@ import PropTypes from 'prop-types';
3
3
  import styled from 'styled-components';
4
4
 
5
5
  import Typography from '@material-ui/core/Typography';
6
+ import useTheme from '@material-ui/core/styles/useTheme';
6
7
 
7
8
  import { mergeProps } from '../Util';
8
9
  import colors from '../Colors';
9
10
 
10
11
  const types = {
11
12
  error: {
12
- color: colors.error.main,
13
- backgroundColor: 'rgba(227, 91, 84, 0.2)',
13
+ color: colors.common.white,
14
+ backgroundColor: colors.error.main,
14
15
  },
15
16
  warning: {
16
- color: colors.warning.main,
17
- backgroundColor: 'rgba(247, 208, 64, 0.2)',
17
+ color: colors.common.white,
18
+ backgroundColor: colors.warning.main,
18
19
  },
19
20
  success: {
20
- color: colors.success.main,
21
- backgroundColor: '#eafbd9',
21
+ color: colors.common.white,
22
+ backgroundColor: colors.success.main,
22
23
  },
23
24
  primary: {
24
- color: colors.primary.main,
25
- backgroundColor: '#ECEFFF',
25
+ color: colors.common.white,
26
+ backgroundColor: colors.primary.main,
26
27
  },
27
28
  reverse: {
28
29
  color: '#fff',
@@ -33,8 +34,18 @@ const types = {
33
34
  function Tag(props) {
34
35
  const newProps = mergeProps(props, Tag, ['style']);
35
36
  const { type, content, children, style, className, forwardedRef, ...rest } = newProps;
37
+
38
+ const { palette } = useTheme();
39
+
36
40
  const styles = Object.assign({}, types[type] || types.primary, style);
37
41
 
42
+ if (palette[type]) {
43
+ Object.assign(styles, {
44
+ color: palette[type].contrastText || colors.common.white,
45
+ backgroundColor: palette[type].main,
46
+ });
47
+ }
48
+
38
49
  return (
39
50
  <Span ref={forwardedRef} component="span" className={className} style={styles} {...rest}>
40
51
  {content || children}
@@ -69,5 +80,6 @@ const Span = styled(Typography)`
69
80
  line-height: 20px;
70
81
  font-size: 12px;
71
82
  font-weight: 500;
83
+ border-radius: 4px;
72
84
  }
73
85
  `;