dtable-ui-component 5.0.9-beta.3 → 5.0.10
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.
- package/lib/DTableRadioGroup/index.css +48 -0
- package/lib/DTableRadioGroup/index.js +58 -0
- package/lib/index.js +8 -1
- package/package.json +1 -1
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
.radio-group-wrapper {
|
|
2
|
+
display: block;
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: 2.375rem;
|
|
5
|
+
color: #212529;
|
|
6
|
+
background-color: #fff;
|
|
7
|
+
background-clip: padding-box;
|
|
8
|
+
border: 1px solid rgba(0, 40, 100, 0.12);
|
|
9
|
+
border-radius: 3px;
|
|
10
|
+
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.radio-group-options {
|
|
14
|
+
height: 100%;
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
padding: 4px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.radio-group-options .radio-group-button {
|
|
22
|
+
display: inline-flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
flex: 1;
|
|
26
|
+
height: 100%;
|
|
27
|
+
padding: 0 8px;
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
text-overflow: ellipsis;
|
|
30
|
+
white-space: nowrap;
|
|
31
|
+
border-radius: 3px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.radio-group-options .radio-group-button:hover {
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
background-color: #f0f0f0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.radio-group-options .radio-group-button.readOnly {
|
|
40
|
+
cursor: default;
|
|
41
|
+
opacity: 0.6;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.radio-group-options .radio-group-button.btn-primary:hover {
|
|
45
|
+
color: #fff;
|
|
46
|
+
background-color: #ED7109;
|
|
47
|
+
border-color: #ED7109;
|
|
48
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
require("./index.css");
|
|
10
|
+
class DTableRadioGroup extends _react.default.Component {
|
|
11
|
+
constructor(props) {
|
|
12
|
+
super(props);
|
|
13
|
+
this.onSelectChanged = event => {
|
|
14
|
+
const {
|
|
15
|
+
option
|
|
16
|
+
} = event.target.dataset;
|
|
17
|
+
if (option === this.state.activeOption) return;
|
|
18
|
+
this.setState({
|
|
19
|
+
activeOption: option
|
|
20
|
+
});
|
|
21
|
+
this.props.onSelectChanged(option);
|
|
22
|
+
};
|
|
23
|
+
this.state = {
|
|
24
|
+
activeOption: props.activeOption
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
componentDidUpdate(prevProps) {
|
|
28
|
+
if (this.props.activeOption !== prevProps.activeOption) {
|
|
29
|
+
this.setState({
|
|
30
|
+
activeOption: this.props.activeOption
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
render() {
|
|
35
|
+
const {
|
|
36
|
+
options,
|
|
37
|
+
optionsDisplay
|
|
38
|
+
} = this.props;
|
|
39
|
+
const {
|
|
40
|
+
activeOption
|
|
41
|
+
} = this.state;
|
|
42
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
43
|
+
className: "radio-group-wrapper"
|
|
44
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
45
|
+
className: "radio-group-options"
|
|
46
|
+
}, options.map(option => {
|
|
47
|
+
const isActive = activeOption === option ? true : false;
|
|
48
|
+
const displayOption = optionsDisplay && optionsDisplay[option] || '';
|
|
49
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
50
|
+
key: option,
|
|
51
|
+
className: "radio-group-button ".concat(isActive ? 'btn-primary' : ''),
|
|
52
|
+
"data-option": option,
|
|
53
|
+
onClick: this.onSelectChanged
|
|
54
|
+
}, displayOption);
|
|
55
|
+
})));
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
var _default = exports.default = DTableRadioGroup;
|
package/lib/index.js
CHANGED
|
@@ -106,6 +106,12 @@ Object.defineProperty(exports, "DTableRadio", {
|
|
|
106
106
|
return _DTableRadio.default;
|
|
107
107
|
}
|
|
108
108
|
});
|
|
109
|
+
Object.defineProperty(exports, "DTableRadioGroup", {
|
|
110
|
+
enumerable: true,
|
|
111
|
+
get: function () {
|
|
112
|
+
return _DTableRadioGroup.default;
|
|
113
|
+
}
|
|
114
|
+
});
|
|
109
115
|
Object.defineProperty(exports, "DTableSearchInput", {
|
|
110
116
|
enumerable: true,
|
|
111
117
|
get: function () {
|
|
@@ -465,4 +471,5 @@ var _DepartmentSelectFilter = _interopRequireDefault(require("./DepartmentSelect
|
|
|
465
471
|
var _FieldDisplaySetting = _interopRequireDefault(require("./FieldDisplaySetting"));
|
|
466
472
|
var _DTableFiltersPopover = _interopRequireDefault(require("./DTableFiltersPopover"));
|
|
467
473
|
var _ClickOutside = _interopRequireDefault(require("./ClickOutside"));
|
|
468
|
-
var _CollapsibleSettingLayout = _interopRequireDefault(require("./CollapsibleSettingLayout"));
|
|
474
|
+
var _CollapsibleSettingLayout = _interopRequireDefault(require("./CollapsibleSettingLayout"));
|
|
475
|
+
var _DTableRadioGroup = _interopRequireDefault(require("./DTableRadioGroup"));
|