dtable-ui-component 5.0.9-beta.3 → 5.0.9-beta.4
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/RadioGroup/index.css +48 -0
- package/lib/RadioGroup/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 RadioGroup 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 = RadioGroup;
|
package/lib/index.js
CHANGED
|
@@ -286,6 +286,12 @@ Object.defineProperty(exports, "NumberFormatter", {
|
|
|
286
286
|
return _NumberFormatter.default;
|
|
287
287
|
}
|
|
288
288
|
});
|
|
289
|
+
Object.defineProperty(exports, "RadioGroup", {
|
|
290
|
+
enumerable: true,
|
|
291
|
+
get: function () {
|
|
292
|
+
return _RadioGroup.default;
|
|
293
|
+
}
|
|
294
|
+
});
|
|
289
295
|
Object.defineProperty(exports, "RateFormatter", {
|
|
290
296
|
enumerable: true,
|
|
291
297
|
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 _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
|