@os-design/core 1.0.128 → 1.0.129
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/dist/cjs/RadioGroup/index.js +14 -18
- package/dist/cjs/RadioGroup/index.js.map +1 -1
- package/dist/cjs/RadioGroupSkeleton/index.js +59 -0
- package/dist/cjs/RadioGroupSkeleton/index.js.map +1 -0
- package/dist/esm/RadioGroup/index.js +21 -33
- package/dist/esm/RadioGroup/index.js.map +1 -1
- package/dist/esm/RadioGroupSkeleton/index.js +26 -0
- package/dist/esm/RadioGroupSkeleton/index.js.map +1 -0
- package/dist/types/RadioGroup/index.d.ts.map +1 -1
- package/dist/types/RadioGroupSkeleton/index.d.ts +9 -0
- package/dist/types/RadioGroupSkeleton/index.d.ts.map +1 -0
- package/package.json +2 -2
|
@@ -17,12 +17,14 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
|
17
17
|
|
|
18
18
|
var _media = require("@os-design/media");
|
|
19
19
|
|
|
20
|
+
var _theming = require("@os-design/theming");
|
|
21
|
+
|
|
20
22
|
var _Button = _interopRequireDefault(require("../Button"));
|
|
21
23
|
|
|
22
24
|
var _excluded = ["options", "disabled", "value", "defaultValue", "onChange", "size"],
|
|
23
25
|
_excluded2 = ["title", "value", "disabled", "onClick"];
|
|
24
26
|
|
|
25
|
-
var _templateObject, _templateObject2
|
|
27
|
+
var _templateObject, _templateObject2;
|
|
26
28
|
|
|
27
29
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
28
30
|
|
|
@@ -50,22 +52,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
50
52
|
|
|
51
53
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
52
54
|
|
|
53
|
-
var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n\n ", " {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ", ";\n"])),
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
var
|
|
59
|
-
if (length === 1) return _Button["default"];
|
|
60
|
-
if (index === 0) return LeftButton;
|
|
61
|
-
if (index === length - 1) return RightButton;
|
|
62
|
-
return MiddleButton;
|
|
63
|
-
};
|
|
55
|
+
var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('disabled', 'size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: inline-flex;\n flex-wrap: wrap;\n\n border-radius: ", "em;\n overflow: hidden;\n border: 1px solid\n ", ";\n\n ", " {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ", ";\n"])), function (p) {
|
|
56
|
+
return p.theme.borderRadius;
|
|
57
|
+
}, function (p) {
|
|
58
|
+
return p.disabled ? (0, _theming.clr)(p.theme.buttonDisabledGhostColorText) : (0, _theming.clr)(p.theme.colorPrimary);
|
|
59
|
+
}, _media.m.max.xxs, _styles.sizeStyles);
|
|
60
|
+
var StyledButton = (0, _styled["default"])(_Button["default"])(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-radius: 0;\n"])));
|
|
64
61
|
/**
|
|
65
62
|
* The radio buttons that allow a user to select only one of a limited number of options.
|
|
66
63
|
*/
|
|
67
64
|
|
|
68
|
-
|
|
69
65
|
var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
70
66
|
var _ref$options = _ref.options,
|
|
71
67
|
options = _ref$options === void 0 ? [] : _ref$options,
|
|
@@ -87,11 +83,12 @@ var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
87
83
|
forwardedValue = _useForwardedState2[0],
|
|
88
84
|
setForwardedValue = _useForwardedState2[1];
|
|
89
85
|
|
|
90
|
-
return /*#__PURE__*/_react["default"].createElement(Container, _extends({
|
|
86
|
+
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Container, _extends({
|
|
87
|
+
disabled: disabled,
|
|
91
88
|
size: size
|
|
92
89
|
}, rest, {
|
|
93
90
|
ref: ref
|
|
94
|
-
}), options === null || options === void 0 ? void 0 : options.map(function (_ref2
|
|
91
|
+
}), options === null || options === void 0 ? void 0 : options.map(function (_ref2) {
|
|
95
92
|
var title = _ref2.title,
|
|
96
93
|
valueOption = _ref2.value,
|
|
97
94
|
disabledOption = _ref2.disabled,
|
|
@@ -99,8 +96,7 @@ var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
99
96
|
_onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
|
|
100
97
|
buttonRest = _objectWithoutProperties(_ref2, _excluded2);
|
|
101
98
|
|
|
102
|
-
|
|
103
|
-
return /*#__PURE__*/_react["default"].createElement(ButtonComponent, _extends({
|
|
99
|
+
return /*#__PURE__*/_react["default"].createElement(StyledButton, _extends({
|
|
104
100
|
key: valueOption,
|
|
105
101
|
type: forwardedValue === valueOption ? 'primary' : 'ghost',
|
|
106
102
|
wide: "never",
|
|
@@ -111,7 +107,7 @@ var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
111
107
|
_onClick(e);
|
|
112
108
|
}
|
|
113
109
|
}, buttonRest), title);
|
|
114
|
-
}));
|
|
110
|
+
})));
|
|
115
111
|
});
|
|
116
112
|
RadioGroup.displayName = 'RadioGroup';
|
|
117
113
|
var _default = RadioGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["Container","
|
|
1
|
+
{"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["Container","p","theme","borderRadius","disabled","buttonDisabledGhostColorText","colorPrimary","m","max","xxs","sizeStyles","StyledButton","Button","RadioGroup","ref","options","value","defaultValue","onChange","size","rest","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAMA,SAAS,GAAG,wBAChB,KADgB,EAEhB,6BAAiB,UAAjB,EAA6B,MAA7B,CAFgB,CAAH,6RAOI,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,YAAf;AAAA,CAPJ,EAUT,UAACF,CAAD;AAAA,SACAA,CAAC,CAACG,QAAF,GACI,kBAAIH,CAAC,CAACC,KAAF,CAAQG,4BAAZ,CADJ,GAEI,kBAAIJ,CAAC,CAACC,KAAF,CAAQI,YAAZ,CAHJ;AAAA,CAVS,EAeXC,SAAEC,GAAF,CAAMC,GAfK,EAsBXC,kBAtBW,CAAf;AAyBA,IAAMC,YAAY,GAAG,wBAAOC,kBAAP,CAAH,8FAAlB;AAIA;AACA;AACA;;AACA,IAAMC,UAAU,gBAAG,uBACjB,gBAUEC,GAVF,EAWK;AAAA,0BATDC,OASC;AAAA,MATDA,OASC,6BATS,EAST;AAAA,2BARDX,QAQC;AAAA,MARDA,QAQC,8BARU,KAQV;AAAA,MAPDY,KAOC,QAPDA,KAOC;AAAA,MANDC,YAMC,QANDA,YAMC;AAAA,2BALDC,QAKC;AAAA,MALDA,QAKC,8BALU,YAAM,CAAE,CAKlB;AAAA,MAJDC,IAIC,QAJDA,IAIC;AAAA,MAHEC,IAGF;;AACH,2BAA4C,8BAAkB;AAC5DJ,IAAAA,KAAK,EAALA,KAD4D;AAE5DC,IAAAA,YAAY,EAAZA,YAF4D;AAG5DC,IAAAA,QAAQ,EAARA;AAH4D,GAAlB,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AAMA,sBACE,0DACE,gCAAC,SAAD;AAAW,IAAA,QAAQ,EAAElB,QAArB;AAA+B,IAAA,IAAI,EAAEe;AAArC,KAA+CC,IAA/C;AAAqD,IAAA,GAAG,EAAEN;AAA1D,MACGC,OADH,aACGA,OADH,uBACGA,OAAO,CAAEQ,GAAT,CACC;AAAA,QACEC,KADF,SACEA,KADF;AAAA,QAESC,WAFT,SAEET,KAFF;AAAA,QAGYU,cAHZ,SAGEtB,QAHF;AAAA,8BAIEuB,OAJF;AAAA,QAIEA,QAJF,8BAIY,YAAM,CAAE,CAJpB;AAAA,QAKKC,UALL;;AAAA,wBAOE,gCAAC,YAAD;AACE,MAAA,GAAG,EAAEH,WADP;AAEE,MAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,QAAQ,EAAErB,QAAQ,IAAIsB,cAJxB;AAKE,MAAA,OAAO,EAAE,iBAACG,CAAD,EAAO;AACdP,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;;AACAE,QAAAA,QAAO,CAACE,CAAD,CAAP;AACD;AARH,OASMD,UATN,GAWGJ,KAXH,CAPF;AAAA,GADD,CADH,CADF,CADF;AA6BD,CAhDgB,CAAnB;AAmDAX,UAAU,CAACiB,WAAX,GAAyB,YAAzB;eAEejB,U","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n /**\n * The title of the option.\n */\n title: string;\n /**\n * The value of the option.\n */\n value: string;\n}\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n /**\n * Options of the radio group.\n * @default undefined\n */\n options?: RadioGroupOption[];\n /**\n * Whether the radio group is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Selected option.\n * @default false\n */\n value?: string;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string) => void;\n}\n\ninterface ContainerProps extends WithSize {\n disabled: boolean;\n}\nconst Container = styled(\n 'div',\n omitEmotionProps('disabled', 'size')\n)<ContainerProps>`\n display: inline-flex;\n flex-wrap: wrap;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n overflow: hidden;\n border: 1px solid\n ${(p) =>\n p.disabled\n ? clr(p.theme.buttonDisabledGhostColorText)\n : clr(p.theme.colorPrimary)};\n\n ${m.max.xxs} {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ${sizeStyles};\n`;\n\nconst StyledButton = styled(Button)`\n border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (\n {\n options = [],\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <div>\n <Container disabled={disabled} size={size} {...rest} ref={ref}>\n {options?.map(\n ({\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n }) => (\n <StyledButton\n key={valueOption}\n type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n wide='never'\n disabled={disabled || disabledOption}\n onClick={(e) => {\n setForwardedValue(valueOption);\n onClick(e);\n }}\n {...buttonRest}\n >\n {title}\n </StyledButton>\n )\n )}\n </Container>\n </div>\n );\n }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
|
|
14
|
+
var _styles = require("@os-design/styles");
|
|
15
|
+
|
|
16
|
+
var _utils = require("@os-design/utils");
|
|
17
|
+
|
|
18
|
+
var _Skeleton = _interopRequireDefault(require("../Skeleton"));
|
|
19
|
+
|
|
20
|
+
var _excluded = ["width"];
|
|
21
|
+
|
|
22
|
+
var _templateObject;
|
|
23
|
+
|
|
24
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
|
+
|
|
26
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
|
+
|
|
28
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
29
|
+
|
|
30
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
31
|
+
|
|
32
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
33
|
+
|
|
34
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
35
|
+
|
|
36
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
37
|
+
|
|
38
|
+
var StyledRadioGroupSkeleton = (0, _styled["default"])(_Skeleton["default"], (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: calc(", "em + 2px);\n ", ";\n"])), function (p) {
|
|
39
|
+
return p.theme.baseHeight;
|
|
40
|
+
}, _styles.sizeStyles);
|
|
41
|
+
/**
|
|
42
|
+
* Provides a radio group placeholder while a user waits for the content to load.
|
|
43
|
+
*/
|
|
44
|
+
|
|
45
|
+
var RadioGroupSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
46
|
+
var _ref$width = _ref.width,
|
|
47
|
+
width = _ref$width === void 0 ? '10em' : _ref$width,
|
|
48
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
49
|
+
|
|
50
|
+
return /*#__PURE__*/_react["default"].createElement(StyledRadioGroupSkeleton, _extends({
|
|
51
|
+
width: width
|
|
52
|
+
}, rest, {
|
|
53
|
+
ref: ref
|
|
54
|
+
}));
|
|
55
|
+
});
|
|
56
|
+
RadioGroupSkeleton.displayName = 'RadioGroupSkeleton';
|
|
57
|
+
var _default = RadioGroupSkeleton;
|
|
58
|
+
exports["default"] = _default;
|
|
59
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/RadioGroupSkeleton/index.tsx"],"names":["StyledRadioGroupSkeleton","Skeleton","p","theme","baseHeight","sizeStyles","RadioGroupSkeleton","ref","width","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,wBAAwB,GAAG,wBAC/BC,oBAD+B,EAE/B,6BAAiB,MAAjB,CAF+B,CAAH,gHAIb,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,UAAf;AAAA,CAJa,EAK1BC,kBAL0B,CAA9B;AAQA;AACA;AACA;;AACA,IAAMC,kBAAkB,gBAAG,uBACzB,gBAA8BC,GAA9B;AAAA,wBAAGC,KAAH;AAAA,MAAGA,KAAH,2BAAW,MAAX;AAAA,MAAsBC,IAAtB;;AAAA,sBACE,gCAAC,wBAAD;AAA0B,IAAA,KAAK,EAAED;AAAjC,KAA4CC,IAA5C;AAAkD,IAAA,GAAG,EAAEF;AAAvD,KADF;AAAA,CADyB,CAA3B;AAMAD,kBAAkB,CAACI,WAAnB,GAAiC,oBAAjC;eAEeJ,kB","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface RadioGroupSkeletonProps extends SkeletonProps, WithSize {\n /**\n * The width of the skeleton.\n * @default 10em\n */\n width?: string;\n}\n\nconst StyledRadioGroupSkeleton = styled(\n Skeleton,\n omitEmotionProps('size')\n)<WithSize>`\n height: calc(${(p) => p.theme.baseHeight}em + 2px);\n ${sizeStyles};\n`;\n\n/**\n * Provides a radio group placeholder while a user waits for the content to load.\n */\nconst RadioGroupSkeleton = forwardRef<HTMLDivElement, RadioGroupSkeletonProps>(\n ({ width = '10em', ...rest }, ref) => (\n <StyledRadioGroupSkeleton width={width} {...rest} ref={ref} />\n )\n);\n\nRadioGroupSkeleton.displayName = 'RadioGroupSkeleton';\n\nexport default RadioGroupSkeleton;\n"],"file":"index.js"}
|
|
@@ -5,11 +5,17 @@ import { sizeStyles } from '@os-design/styles';
|
|
|
5
5
|
import { omitEmotionProps, useForwardedState } from '@os-design/utils';
|
|
6
6
|
import styled from '@emotion/styled';
|
|
7
7
|
import { m } from '@os-design/media';
|
|
8
|
+
import { clr } from '@os-design/theming';
|
|
8
9
|
import Button from '../Button';
|
|
9
|
-
const Container = styled('div', omitEmotionProps('size'))`
|
|
10
|
-
display: flex;
|
|
10
|
+
const Container = styled('div', omitEmotionProps('disabled', 'size'))`
|
|
11
|
+
display: inline-flex;
|
|
11
12
|
flex-wrap: wrap;
|
|
12
13
|
|
|
14
|
+
border-radius: ${p => p.theme.borderRadius}em;
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
border: 1px solid
|
|
17
|
+
${p => p.disabled ? clr(p.theme.buttonDisabledGhostColorText) : clr(p.theme.colorPrimary)};
|
|
18
|
+
|
|
13
19
|
${m.max.xxs} {
|
|
14
20
|
width: 100%;
|
|
15
21
|
& > button {
|
|
@@ -19,29 +25,13 @@ const Container = styled('div', omitEmotionProps('size'))`
|
|
|
19
25
|
|
|
20
26
|
${sizeStyles};
|
|
21
27
|
`;
|
|
22
|
-
const
|
|
23
|
-
border-top-right-radius: 0;
|
|
24
|
-
border-bottom-right-radius: 0;
|
|
25
|
-
`;
|
|
26
|
-
const RightButton = styled(Button)`
|
|
27
|
-
border-top-left-radius: 0;
|
|
28
|
-
border-bottom-left-radius: 0;
|
|
29
|
-
`;
|
|
30
|
-
const MiddleButton = styled(Button)`
|
|
28
|
+
const StyledButton = styled(Button)`
|
|
31
29
|
border-radius: 0;
|
|
32
30
|
`;
|
|
33
|
-
|
|
34
|
-
const getButtonComponent = (index, length) => {
|
|
35
|
-
if (length === 1) return Button;
|
|
36
|
-
if (index === 0) return LeftButton;
|
|
37
|
-
if (index === length - 1) return RightButton;
|
|
38
|
-
return MiddleButton;
|
|
39
|
-
};
|
|
40
31
|
/**
|
|
41
32
|
* The radio buttons that allow a user to select only one of a limited number of options.
|
|
42
33
|
*/
|
|
43
34
|
|
|
44
|
-
|
|
45
35
|
const RadioGroup = /*#__PURE__*/forwardRef(({
|
|
46
36
|
options = [],
|
|
47
37
|
disabled = false,
|
|
@@ -56,7 +46,8 @@ const RadioGroup = /*#__PURE__*/forwardRef(({
|
|
|
56
46
|
defaultValue,
|
|
57
47
|
onChange
|
|
58
48
|
});
|
|
59
|
-
return /*#__PURE__*/React.createElement(Container, _extends({
|
|
49
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, _extends({
|
|
50
|
+
disabled: disabled,
|
|
60
51
|
size: size
|
|
61
52
|
}, rest, {
|
|
62
53
|
ref: ref
|
|
@@ -66,19 +57,16 @@ const RadioGroup = /*#__PURE__*/forwardRef(({
|
|
|
66
57
|
disabled: disabledOption,
|
|
67
58
|
onClick = () => {},
|
|
68
59
|
...buttonRest
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
onClick
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
}, buttonRest), title);
|
|
81
|
-
}));
|
|
60
|
+
}) => /*#__PURE__*/React.createElement(StyledButton, _extends({
|
|
61
|
+
key: valueOption,
|
|
62
|
+
type: forwardedValue === valueOption ? 'primary' : 'ghost',
|
|
63
|
+
wide: "never",
|
|
64
|
+
disabled: disabled || disabledOption,
|
|
65
|
+
onClick: e => {
|
|
66
|
+
setForwardedValue(valueOption);
|
|
67
|
+
onClick(e);
|
|
68
|
+
}
|
|
69
|
+
}, buttonRest), title))));
|
|
82
70
|
});
|
|
83
71
|
RadioGroup.displayName = 'RadioGroup';
|
|
84
72
|
export default RadioGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["React","forwardRef","sizeStyles","omitEmotionProps","useForwardedState","styled","m","Button","Container","
|
|
1
|
+
{"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["React","forwardRef","sizeStyles","omitEmotionProps","useForwardedState","styled","m","clr","Button","Container","p","theme","borderRadius","disabled","buttonDisabledGhostColorText","colorPrimary","max","xxs","StyledButton","RadioGroup","options","value","defaultValue","onChange","size","rest","ref","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,EAA2BC,iBAA3B,QAAoD,kBAApD;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,MAAP,MAAoC,WAApC;AAiDA,MAAMC,SAAS,GAAGJ,MAAM,CACtB,KADsB,EAEtBF,gBAAgB,CAAC,UAAD,EAAa,MAAb,CAFM,CAGN;AAClB;AACA;AACA;AACA,mBAAoBO,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,YAAa;AAC/C;AACA;AACA,MAAOF,CAAD,IACAA,CAAC,CAACG,QAAF,GACIN,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQG,4BAAT,CADP,GAEIP,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQI,YAAT,CAAuB;AACpC;AACA,IAAIT,CAAC,CAACU,GAAF,CAAMC,GAAI;AACd;AACA;AACA;AACA;AACA;AACA;AACA,IAAIf,UAAW;AACf,CAvBA;AAyBA,MAAMgB,YAAY,GAAGb,MAAM,CAACG,MAAD,CAAS;AACpC;AACA,CAFA;AAIA;AACA;AACA;;AACA,MAAMW,UAAU,gBAAGlB,UAAU,CAC3B,CACE;AACEmB,EAAAA,OAAO,GAAG,EADZ;AAEEP,EAAAA,QAAQ,GAAG,KAFb;AAGEQ,EAAAA,KAHF;AAIEC,EAAAA,YAJF;AAKEC,EAAAA,QAAQ,GAAG,MAAM,CAAE,CALrB;AAMEC,EAAAA,IANF;AAOE,KAAGC;AAPL,CADF,EAUEC,GAVF,KAWK;AACH,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsCxB,iBAAiB,CAAC;AAC5DiB,IAAAA,KAD4D;AAE5DC,IAAAA,YAF4D;AAG5DC,IAAAA;AAH4D,GAAD,CAA7D;AAMA,sBACE,8CACE,oBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEV,QAArB;AAA+B,IAAA,IAAI,EAAEW;AAArC,KAA+CC,IAA/C;AAAqD,IAAA,GAAG,EAAEC;AAA1D,MACGN,OAAO,EAAES,GAAT,CACC,CAAC;AACCC,IAAAA,KADD;AAECT,IAAAA,KAAK,EAAEU,WAFR;AAGClB,IAAAA,QAAQ,EAAEmB,cAHX;AAICC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAJnB;AAKC,OAAGC;AALJ,GAAD,kBAOE,oBAAC,YAAD;AACE,IAAA,GAAG,EAAEH,WADP;AAEE,IAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,IAAA,IAAI,EAAC,OAHP;AAIE,IAAA,QAAQ,EAAElB,QAAQ,IAAImB,cAJxB;AAKE,IAAA,OAAO,EAAGG,CAAD,IAAO;AACdP,MAAAA,iBAAiB,CAACG,WAAD,CAAjB;AACAE,MAAAA,OAAO,CAACE,CAAD,CAAP;AACD;AARH,KASMD,UATN,GAWGJ,KAXH,CARH,CADH,CADF,CADF;AA6BD,CAhD0B,CAA7B;AAmDAX,UAAU,CAACiB,WAAX,GAAyB,YAAzB;AAEA,eAAejB,UAAf","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n /**\n * The title of the option.\n */\n title: string;\n /**\n * The value of the option.\n */\n value: string;\n}\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n /**\n * Options of the radio group.\n * @default undefined\n */\n options?: RadioGroupOption[];\n /**\n * Whether the radio group is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Selected option.\n * @default false\n */\n value?: string;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string) => void;\n}\n\ninterface ContainerProps extends WithSize {\n disabled: boolean;\n}\nconst Container = styled(\n 'div',\n omitEmotionProps('disabled', 'size')\n)<ContainerProps>`\n display: inline-flex;\n flex-wrap: wrap;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n overflow: hidden;\n border: 1px solid\n ${(p) =>\n p.disabled\n ? clr(p.theme.buttonDisabledGhostColorText)\n : clr(p.theme.colorPrimary)};\n\n ${m.max.xxs} {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ${sizeStyles};\n`;\n\nconst StyledButton = styled(Button)`\n border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (\n {\n options = [],\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <div>\n <Container disabled={disabled} size={size} {...rest} ref={ref}>\n {options?.map(\n ({\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n }) => (\n <StyledButton\n key={valueOption}\n type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n wide='never'\n disabled={disabled || disabledOption}\n onClick={(e) => {\n setForwardedValue(valueOption);\n onClick(e);\n }}\n {...buttonRest}\n >\n {title}\n </StyledButton>\n )\n )}\n </Container>\n </div>\n );\n }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import styled from '@emotion/styled';
|
|
4
|
+
import React, { forwardRef } from 'react';
|
|
5
|
+
import { sizeStyles } from '@os-design/styles';
|
|
6
|
+
import { omitEmotionProps } from '@os-design/utils';
|
|
7
|
+
import Skeleton from '../Skeleton';
|
|
8
|
+
const StyledRadioGroupSkeleton = styled(Skeleton, omitEmotionProps('size'))`
|
|
9
|
+
height: calc(${p => p.theme.baseHeight}em + 2px);
|
|
10
|
+
${sizeStyles};
|
|
11
|
+
`;
|
|
12
|
+
/**
|
|
13
|
+
* Provides a radio group placeholder while a user waits for the content to load.
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
const RadioGroupSkeleton = /*#__PURE__*/forwardRef(({
|
|
17
|
+
width = '10em',
|
|
18
|
+
...rest
|
|
19
|
+
}, ref) => /*#__PURE__*/React.createElement(StyledRadioGroupSkeleton, _extends({
|
|
20
|
+
width: width
|
|
21
|
+
}, rest, {
|
|
22
|
+
ref: ref
|
|
23
|
+
})));
|
|
24
|
+
RadioGroupSkeleton.displayName = 'RadioGroupSkeleton';
|
|
25
|
+
export default RadioGroupSkeleton;
|
|
26
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/RadioGroupSkeleton/index.tsx"],"names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledRadioGroupSkeleton","p","theme","baseHeight","RadioGroupSkeleton","width","rest","ref","displayName"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAOC,QAAP,MAAwC,aAAxC;AAUA,MAAMC,wBAAwB,GAAGN,MAAM,CACrCK,QADqC,EAErCD,gBAAgB,CAAC,MAAD,CAFqB,CAG3B;AACZ,iBAAkBG,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,UAAW;AAC3C,IAAIN,UAAW;AACf,CANA;AAQA;AACA;AACA;;AACA,MAAMO,kBAAkB,gBAAGR,UAAU,CACnC,CAAC;AAAES,EAAAA,KAAK,GAAG,MAAV;AAAkB,KAAGC;AAArB,CAAD,EAA8BC,GAA9B,kBACE,oBAAC,wBAAD;AAA0B,EAAA,KAAK,EAAEF;AAAjC,GAA4CC,IAA5C;AAAkD,EAAA,GAAG,EAAEC;AAAvD,GAFiC,CAArC;AAMAH,kBAAkB,CAACI,WAAnB,GAAiC,oBAAjC;AAEA,eAAeJ,kBAAf","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface RadioGroupSkeletonProps extends SkeletonProps, WithSize {\n /**\n * The width of the skeleton.\n * @default 10em\n */\n width?: string;\n}\n\nconst StyledRadioGroupSkeleton = styled(\n Skeleton,\n omitEmotionProps('size')\n)<WithSize>`\n height: calc(${(p) => p.theme.baseHeight}em + 2px);\n ${sizeStyles};\n`;\n\n/**\n * Provides a radio group placeholder while a user waits for the content to load.\n */\nconst RadioGroupSkeleton = forwardRef<HTMLDivElement, RadioGroupSkeletonProps>(\n ({ width = '10em', ...rest }, ref) => (\n <StyledRadioGroupSkeleton width={width} {...rest} ref={ref} />\n )\n);\n\nRadioGroupSkeleton.displayName = 'RadioGroupSkeleton';\n\nexport default RadioGroupSkeleton;\n"],"file":"index.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAKzD,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAInD,KAAK,EAAE,MAAM,CAAC;IAId,KAAK,EAAE,MAAM,CAAC;CACf;AAED,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,QAAQ;IAK5D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAK7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAqCD,QAAA,MAAM,UAAU,wFAiDf,CAAC;AAIF,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { WithSize } from '@os-design/styles';
|
|
3
|
+
import { SkeletonProps } from '../Skeleton';
|
|
4
|
+
export interface RadioGroupSkeletonProps extends SkeletonProps, WithSize {
|
|
5
|
+
width?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const RadioGroupSkeleton: React.ForwardRefExoticComponent<RadioGroupSkeletonProps & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
export default RadioGroupSkeleton;
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RadioGroupSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,WAAW,uBAAwB,SAAQ,aAAa,EAAE,QAAQ;IAKtE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAaD,QAAA,MAAM,kBAAkB,gGAIvB,CAAC;AAIF,eAAe,kBAAkB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.129",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"react": ">=18",
|
|
57
57
|
"react-dom": ">=18"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "c6ecc705e3342b142801166afb0e74ba96129942"
|
|
60
60
|
}
|