@flexmatch-dev/react-ui 0.0.2 → 0.0.3
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/cjs/components/Input/Selectable/InputButtonMultiSelect.d.ts +14 -0
- package/cjs/components/Input/Selectable/InputButtonMultiSelect.d.ts.map +1 -0
- package/cjs/components/Input/Selectable/InputButtonMultiSelect.js +96 -0
- package/cjs/components/Input/Selectable/InputButtonSelect.d.ts +14 -0
- package/cjs/components/Input/Selectable/InputButtonSelect.d.ts.map +1 -0
- package/cjs/components/Input/Selectable/InputButtonSelect.js +65 -0
- package/cjs/components/Input/Selectable/InputButtonSelectButton.d.ts +14 -0
- package/cjs/components/Input/Selectable/InputButtonSelectButton.d.ts.map +1 -0
- package/cjs/components/Input/Selectable/InputButtonSelectButton.js +78 -0
- package/cjs/components/Input/Selectable/InputCardSelect.d.ts +2 -1
- package/cjs/components/Input/Selectable/InputCardSelect.d.ts.map +1 -1
- package/cjs/components/Input/Selectable/InputCardSelect.js +4 -1
- package/cjs/components/Input/Selectable/InputCardSelectButton.d.ts +2 -1
- package/cjs/components/Input/Selectable/InputCardSelectButton.d.ts.map +1 -1
- package/cjs/components/Input/Selectable/InputCardSelectButton.js +4 -2
- package/cjs/components/Input/Selectable/InputRadiobutton.d.ts.map +1 -1
- package/cjs/components/Input/Selectable/InputRadiobutton.js +6 -30
- package/cjs/components/atoms/card-select.ui.d.ts.map +1 -1
- package/cjs/components/atoms/index.d.ts +1 -0
- package/cjs/components/atoms/index.d.ts.map +1 -1
- package/cjs/components/atoms/index.js +7 -0
- package/cjs/components/atoms/radio.ui.d.ts +14 -0
- package/cjs/components/atoms/radio.ui.d.ts.map +1 -0
- package/cjs/components/atoms/radio.ui.js +52 -0
- package/cjs/components/atoms/textbox.ui.d.ts +2 -1
- package/cjs/components/atoms/textbox.ui.d.ts.map +1 -1
- package/cjs/components/atoms/textbox.ui.js +11 -8
- package/cjs/context/Input.d.ts +10 -0
- package/cjs/context/Input.d.ts.map +1 -1
- package/cjs/index.d.ts +3 -0
- package/cjs/index.d.ts.map +1 -1
- package/cjs/index.js +21 -0
- package/dist/index.css +74 -10
- package/lib/components/Input/Selectable/InputButtonMultiSelect.d.ts +14 -0
- package/lib/components/Input/Selectable/InputButtonMultiSelect.d.ts.map +1 -0
- package/lib/components/Input/Selectable/InputButtonMultiSelect.js +89 -0
- package/lib/components/Input/Selectable/InputButtonSelect.d.ts +14 -0
- package/lib/components/Input/Selectable/InputButtonSelect.d.ts.map +1 -0
- package/lib/components/Input/Selectable/InputButtonSelect.js +58 -0
- package/lib/components/Input/Selectable/InputButtonSelectButton.d.ts +14 -0
- package/lib/components/Input/Selectable/InputButtonSelectButton.d.ts.map +1 -0
- package/lib/components/Input/Selectable/InputButtonSelectButton.js +71 -0
- package/lib/components/Input/Selectable/InputCardSelect.d.ts +2 -1
- package/lib/components/Input/Selectable/InputCardSelect.d.ts.map +1 -1
- package/lib/components/Input/Selectable/InputCardSelect.js +4 -1
- package/lib/components/Input/Selectable/InputCardSelectButton.d.ts +2 -1
- package/lib/components/Input/Selectable/InputCardSelectButton.d.ts.map +1 -1
- package/lib/components/Input/Selectable/InputCardSelectButton.js +4 -2
- package/lib/components/Input/Selectable/InputRadiobutton.d.ts.map +1 -1
- package/lib/components/Input/Selectable/InputRadiobutton.js +7 -31
- package/lib/components/atoms/card-select.ui.d.ts.map +1 -1
- package/lib/components/atoms/index.d.ts +1 -0
- package/lib/components/atoms/index.d.ts.map +1 -1
- package/lib/components/atoms/index.js +2 -1
- package/lib/components/atoms/radio.ui.d.ts +14 -0
- package/lib/components/atoms/radio.ui.d.ts.map +1 -0
- package/lib/components/atoms/radio.ui.js +45 -0
- package/lib/components/atoms/textbox.ui.d.ts +2 -1
- package/lib/components/atoms/textbox.ui.d.ts.map +1 -1
- package/lib/components/atoms/textbox.ui.js +11 -8
- package/lib/context/Input.d.ts +10 -0
- package/lib/context/Input.d.ts.map +1 -1
- package/lib/index.d.ts +3 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +4 -1
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ exports["default"] = void 0;
|
|
|
8
8
|
var _clsx = _interopRequireDefault(require("clsx"));
|
|
9
9
|
var _react = require("react");
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
-
var _excluded = ["className", "label", "readOnly", "disabled", "error", "height"];
|
|
11
|
+
var _excluded = ["className", "label", "readOnly", "disabled", "error", "height", "labelSide"];
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
13
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
14
14
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -25,11 +25,13 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
|
|
|
25
25
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
26
26
|
var TextboxUI = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
27
27
|
var className = _ref.className,
|
|
28
|
-
|
|
28
|
+
Label = _ref.label,
|
|
29
29
|
readOnly = _ref.readOnly,
|
|
30
30
|
disabled = _ref.disabled,
|
|
31
31
|
error = _ref.error,
|
|
32
32
|
height = _ref.height,
|
|
33
|
+
_ref$labelSide = _ref.labelSide,
|
|
34
|
+
labelSide = _ref$labelSide === void 0 ? 'right' : _ref$labelSide,
|
|
33
35
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
34
36
|
var _useState = (0, _react.useState)(0),
|
|
35
37
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -37,10 +39,10 @@ var TextboxUI = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
37
39
|
setLabelWidth = _useState2[1];
|
|
38
40
|
var labelRef = (0, _react.useRef)(null);
|
|
39
41
|
(0, _react.useEffect)(function () {
|
|
40
|
-
if (
|
|
42
|
+
if (Label && labelRef.current) {
|
|
41
43
|
setLabelWidth(labelRef.current.offsetWidth);
|
|
42
44
|
}
|
|
43
|
-
}, [
|
|
45
|
+
}, [Label]);
|
|
44
46
|
var heightStyle = (0, _react.useMemo)(function () {
|
|
45
47
|
if (typeof height === 'number') {
|
|
46
48
|
return "".concat(height, "px");
|
|
@@ -54,7 +56,8 @@ var TextboxUI = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
54
56
|
className: (0, _clsx["default"])('flexmatch-textbox-container', className),
|
|
55
57
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
|
|
56
58
|
style: {
|
|
57
|
-
paddingRight: "".concat(labelWidth +
|
|
59
|
+
paddingRight: labelSide === 'right' ? "".concat(labelWidth + 16, "px") : '12px',
|
|
60
|
+
paddingLeft: labelSide === 'left' ? "".concat(labelWidth + 16, "px") : '12px',
|
|
58
61
|
height: heightStyle
|
|
59
62
|
},
|
|
60
63
|
ref: ref
|
|
@@ -63,11 +66,11 @@ var TextboxUI = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
63
66
|
readOnly: readOnly,
|
|
64
67
|
disabled: disabled,
|
|
65
68
|
className: (0, _clsx["default"])(className, 'flexmatch-textbox', error && 'error')
|
|
66
|
-
})),
|
|
69
|
+
})), Label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
67
70
|
htmlFor: props.id,
|
|
68
71
|
ref: labelRef,
|
|
69
|
-
className: (0, _clsx["default"])('flexmatch-textbox-label text-b3', disabled && 'disabled', readOnly && 'readonly'),
|
|
70
|
-
children:
|
|
72
|
+
className: (0, _clsx["default"])('flexmatch-textbox-label text-b3', disabled && 'disabled', readOnly && 'readonly', labelSide === 'left' ? 'left' : 'right'),
|
|
73
|
+
children: Label
|
|
71
74
|
})]
|
|
72
75
|
});
|
|
73
76
|
});
|
package/cjs/context/Input.d.ts
CHANGED
|
@@ -3,6 +3,11 @@ export interface InputSelectableOption<T> {
|
|
|
3
3
|
value: T;
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
}
|
|
6
|
+
export interface InputMultiSelectableOption<T> {
|
|
7
|
+
label: string;
|
|
8
|
+
value: T | '*';
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
}
|
|
6
11
|
export interface InputSelectableExtraOption<T> {
|
|
7
12
|
value: T;
|
|
8
13
|
description?: string;
|
|
@@ -13,4 +18,9 @@ export interface InputSelectableProps<T> {
|
|
|
13
18
|
onChange?: (value: T) => void;
|
|
14
19
|
options: InputSelectableOption<T>[];
|
|
15
20
|
}
|
|
21
|
+
export interface InputMultiSelectableProps<T> {
|
|
22
|
+
value?: T[] | undefined;
|
|
23
|
+
onChange?: (value: T[]) => void;
|
|
24
|
+
options: InputMultiSelectableOption<T>[];
|
|
25
|
+
}
|
|
16
26
|
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/context/Input.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;CACrC"}
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/context/Input.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;CACrC;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC;CAC1C"}
|
package/cjs/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { IconCheck } from '@assets/index';
|
|
2
|
+
export { default as RadioUI } from '@atoms/radio.ui';
|
|
2
3
|
export { default as TextboxUI } from '@atoms/textbox.ui';
|
|
3
4
|
export { default as TextareaUI } from '@atoms/textarea.ui';
|
|
4
5
|
export { default as InfoCardUI } from '@atoms/info-card.ui';
|
|
@@ -8,5 +9,7 @@ export { default as InputSelectbox } from '@components/Input/Selectable/InputSel
|
|
|
8
9
|
export { default as InputCheckbox } from '@components/Input/Selectable/InputCheckbox';
|
|
9
10
|
export { default as InputCardSelect } from '@components/Input/Selectable/InputCardSelect';
|
|
10
11
|
export { default as InputRadiobutton } from '@components/Input/Selectable/InputRadiobutton';
|
|
12
|
+
export { default as InputButtonSelect } from '@components/Input/Selectable/InputButtonSelect';
|
|
13
|
+
export { default as InputButtonMultiSelect } from '@components/Input/Selectable/InputButtonMultiSelect';
|
|
11
14
|
export type { InputSelectableOption, InputSelectableExtraOption, InputSelectableProps, } from '@context/Input';
|
|
12
15
|
//# sourceMappingURL=index.d.ts.map
|
package/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAG5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6CAA6C,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAG5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6CAA6C,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,qDAAqD,CAAC;AAExG,YAAY,EACV,qBAAqB,EACrB,0BAA0B,EAC1B,oBAAoB,GACrB,MAAM,gBAAgB,CAAC"}
|
package/cjs/index.js
CHANGED
|
@@ -15,6 +15,18 @@ Object.defineProperty(exports, "InfoCardUI", {
|
|
|
15
15
|
return _infoCard["default"];
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
+
Object.defineProperty(exports, "InputButtonMultiSelect", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _InputButtonMultiSelect["default"];
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "InputButtonSelect", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function get() {
|
|
27
|
+
return _InputButtonSelect["default"];
|
|
28
|
+
}
|
|
29
|
+
});
|
|
18
30
|
Object.defineProperty(exports, "InputCardSelect", {
|
|
19
31
|
enumerable: true,
|
|
20
32
|
get: function get() {
|
|
@@ -51,6 +63,12 @@ Object.defineProperty(exports, "InputSelectbox", {
|
|
|
51
63
|
return _InputSelectbox["default"];
|
|
52
64
|
}
|
|
53
65
|
});
|
|
66
|
+
Object.defineProperty(exports, "RadioUI", {
|
|
67
|
+
enumerable: true,
|
|
68
|
+
get: function get() {
|
|
69
|
+
return _radio["default"];
|
|
70
|
+
}
|
|
71
|
+
});
|
|
54
72
|
Object.defineProperty(exports, "TextareaUI", {
|
|
55
73
|
enumerable: true,
|
|
56
74
|
get: function get() {
|
|
@@ -64,6 +82,7 @@ Object.defineProperty(exports, "TextboxUI", {
|
|
|
64
82
|
}
|
|
65
83
|
});
|
|
66
84
|
var _assets = require("./assets");
|
|
85
|
+
var _radio = _interopRequireDefault(require("./components/atoms/radio.ui"));
|
|
67
86
|
var _textbox = _interopRequireDefault(require("./components/atoms/textbox.ui"));
|
|
68
87
|
var _textarea = _interopRequireDefault(require("./components/atoms/textarea.ui"));
|
|
69
88
|
var _infoCard = _interopRequireDefault(require("./components/atoms/info-card.ui"));
|
|
@@ -73,4 +92,6 @@ var _InputSelectbox = _interopRequireDefault(require("./components/Input/Selecta
|
|
|
73
92
|
var _InputCheckbox = _interopRequireDefault(require("./components/Input/Selectable/InputCheckbox"));
|
|
74
93
|
var _InputCardSelect = _interopRequireDefault(require("./components/Input/Selectable/InputCardSelect"));
|
|
75
94
|
var _InputRadiobutton = _interopRequireDefault(require("./components/Input/Selectable/InputRadiobutton"));
|
|
95
|
+
var _InputButtonSelect = _interopRequireDefault(require("./components/Input/Selectable/InputButtonSelect"));
|
|
96
|
+
var _InputButtonMultiSelect = _interopRequireDefault(require("./components/Input/Selectable/InputButtonMultiSelect"));
|
|
76
97
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
package/dist/index.css
CHANGED
|
@@ -1532,6 +1532,43 @@
|
|
|
1532
1532
|
}
|
|
1533
1533
|
|
|
1534
1534
|
|
|
1535
|
+
/* === ./button-select.ui.css === */
|
|
1536
|
+
.flexmatch-button-select-container {
|
|
1537
|
+
display: flex;
|
|
1538
|
+
flex: 1;
|
|
1539
|
+
flex-direction: row;
|
|
1540
|
+
flex-wrap: wrap;
|
|
1541
|
+
gap: 24px;
|
|
1542
|
+
}
|
|
1543
|
+
|
|
1544
|
+
.flexmatch-button-select-button-container {
|
|
1545
|
+
display: flex;
|
|
1546
|
+
flex-direction: row;
|
|
1547
|
+
gap: 8px;
|
|
1548
|
+
align-items: center;
|
|
1549
|
+
width: fit-content;
|
|
1550
|
+
border-radius: 14px;
|
|
1551
|
+
cursor: pointer;
|
|
1552
|
+
border: 1px solid var(--color-gray-200);
|
|
1553
|
+
border-radius: 10px;
|
|
1554
|
+
}
|
|
1555
|
+
|
|
1556
|
+
.flexmatch-button-select-button-container.selected {
|
|
1557
|
+
background-color: var(--color-primary-100);
|
|
1558
|
+
border: 1px solid var(--color-primary-100);
|
|
1559
|
+
}
|
|
1560
|
+
|
|
1561
|
+
.flexmatch-button-select-button-container.small {
|
|
1562
|
+
min-height: 40px;
|
|
1563
|
+
padding: 10px 32px;
|
|
1564
|
+
}
|
|
1565
|
+
|
|
1566
|
+
.flexmatch-button-select-button-container.normal {
|
|
1567
|
+
min-height: 50px;
|
|
1568
|
+
padding: 10px 32px;
|
|
1569
|
+
}
|
|
1570
|
+
|
|
1571
|
+
|
|
1535
1572
|
/* === ./card-select.ui.css === */
|
|
1536
1573
|
|
|
1537
1574
|
.flexmatch-card-select-container {
|
|
@@ -1549,13 +1586,20 @@
|
|
|
1549
1586
|
gap: 1rem;
|
|
1550
1587
|
align-items: center;
|
|
1551
1588
|
width: 100%;
|
|
1552
|
-
min-height: 98px;
|
|
1553
|
-
padding: 24px;
|
|
1554
1589
|
border-radius: 14px;
|
|
1555
1590
|
border: 2px solid var(--color-gray-200);
|
|
1556
1591
|
cursor: pointer;
|
|
1557
1592
|
}
|
|
1558
1593
|
|
|
1594
|
+
.flexmatch-card-select-button-container.small {
|
|
1595
|
+
min-height: 64px;
|
|
1596
|
+
padding: 16px;
|
|
1597
|
+
}
|
|
1598
|
+
|
|
1599
|
+
.flexmatch-card-select-button-container.normal {
|
|
1600
|
+
min-height: 98px;
|
|
1601
|
+
padding: 24px;
|
|
1602
|
+
}
|
|
1559
1603
|
.flexmatch-card-select-button-container.selected {
|
|
1560
1604
|
border: 2px solid var(--color-primary-100);
|
|
1561
1605
|
background-color: var(--color-primary-10);
|
|
@@ -1568,7 +1612,6 @@
|
|
|
1568
1612
|
width: 40px;
|
|
1569
1613
|
height: 40px;
|
|
1570
1614
|
border-radius: 10px;
|
|
1571
|
-
background-color: var(--color-primary-100);
|
|
1572
1615
|
}
|
|
1573
1616
|
|
|
1574
1617
|
.flexmatch-card-select-button-content {
|
|
@@ -1602,6 +1645,7 @@
|
|
|
1602
1645
|
}
|
|
1603
1646
|
|
|
1604
1647
|
|
|
1648
|
+
|
|
1605
1649
|
/* === ./checkbox.ui.css === */
|
|
1606
1650
|
.flexmatch-checkbox-container {
|
|
1607
1651
|
display: flex;
|
|
@@ -1826,6 +1870,21 @@
|
|
|
1826
1870
|
animation: flexmatch-modal-open 0.3s ease-out;
|
|
1827
1871
|
}
|
|
1828
1872
|
|
|
1873
|
+
@keyframes flexmatch-right-sidebar-open {
|
|
1874
|
+
from {
|
|
1875
|
+
transform: translateX(100%);
|
|
1876
|
+
opacity: 0;
|
|
1877
|
+
}
|
|
1878
|
+
to {
|
|
1879
|
+
transform: translateX(0);
|
|
1880
|
+
opacity: 1;
|
|
1881
|
+
}
|
|
1882
|
+
}
|
|
1883
|
+
|
|
1884
|
+
.flexmatch-right-sidebar {
|
|
1885
|
+
animation: flexmatch-right-sidebar-open 0.3s ease-out;
|
|
1886
|
+
}
|
|
1887
|
+
|
|
1829
1888
|
|
|
1830
1889
|
/* === ./textbox.ui.css === */
|
|
1831
1890
|
.flexmatch-textbox-container {
|
|
@@ -1837,12 +1896,18 @@
|
|
|
1837
1896
|
display: flex;
|
|
1838
1897
|
align-items: center;
|
|
1839
1898
|
justify-content: center;
|
|
1840
|
-
top:
|
|
1841
|
-
height: calc(100% -
|
|
1842
|
-
right: 12px;
|
|
1899
|
+
top: 2px;
|
|
1900
|
+
height: calc(100% - 4px);
|
|
1843
1901
|
color: var(--color-gray-600);
|
|
1844
1902
|
background-color: rgba(255, 255, 255, 0.8);
|
|
1845
|
-
|
|
1903
|
+
}
|
|
1904
|
+
.flexmatch-textbox-label.left {
|
|
1905
|
+
left: 12px;
|
|
1906
|
+
right: auto;
|
|
1907
|
+
}
|
|
1908
|
+
.flexmatch-textbox-label.right {
|
|
1909
|
+
left: auto;
|
|
1910
|
+
right: 12px;
|
|
1846
1911
|
}
|
|
1847
1912
|
.flexmatch-textbox-label.disabled,
|
|
1848
1913
|
.flexmatch-textbox-label.readonly {
|
|
@@ -2066,11 +2131,10 @@
|
|
|
2066
2131
|
}
|
|
2067
2132
|
|
|
2068
2133
|
.flexmatch-radiobutton-icon-checked {
|
|
2069
|
-
width:
|
|
2070
|
-
height:
|
|
2134
|
+
width: 11px;
|
|
2135
|
+
height: 11px;
|
|
2071
2136
|
border-radius: 50%;
|
|
2072
2137
|
background-color: var(--color-primary-200);
|
|
2073
|
-
transform-origin: center;
|
|
2074
2138
|
animation: flexmatch-radiobutton-checked-scale 0.2s ease-out;
|
|
2075
2139
|
}
|
|
2076
2140
|
.flexmatch-radiobutton-label {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { InputMultiSelectableProps, InputSelectableExtraOption } from '@/context/Input';
|
|
2
|
+
export interface InputButtonMultiSelectProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, InputMultiSelectableProps<T> {
|
|
3
|
+
id?: string | undefined;
|
|
4
|
+
title?: string | undefined;
|
|
5
|
+
description?: string | undefined;
|
|
6
|
+
extraOptions: InputSelectableExtraOption<T>[];
|
|
7
|
+
size?: 'small' | 'normal';
|
|
8
|
+
}
|
|
9
|
+
declare const InputButtonMultiSelect: {
|
|
10
|
+
<T>({ id, className, options, size, value, onChange, title, description, extraOptions, ...props }: InputButtonMultiSelectProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
displayName: string;
|
|
12
|
+
};
|
|
13
|
+
export default InputButtonMultiSelect;
|
|
14
|
+
//# sourceMappingURL=InputButtonMultiSelect.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputButtonMultiSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputButtonMultiSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,yBAAyB,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAIxF,MAAM,WAAW,2BAA2B,CAAC,CAAC,CAC5C,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAC5F,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,YAAY,EAAE,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B;AACD,QAAA,MAAM,sBAAsB;KAAI,CAAC,iGAW9B,2BAA2B,CAAC,CAAC,CAAC;;CAqDhC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
var _excluded = ["id", "className", "options", "size", "value", "onChange", "title", "description", "extraOptions"];
|
|
3
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
7
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
8
|
+
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
9
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
11
|
+
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
12
|
+
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
13
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
14
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
15
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
16
|
+
import clsx from 'clsx';
|
|
17
|
+
import { useCallback, useMemo } from 'react';
|
|
18
|
+
import InputButtonSelectButton from "./InputButtonSelectButton";
|
|
19
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
|
+
var InputButtonMultiSelect = function InputButtonMultiSelect(_ref) {
|
|
21
|
+
var id = _ref.id,
|
|
22
|
+
className = _ref.className,
|
|
23
|
+
options = _ref.options,
|
|
24
|
+
_ref$size = _ref.size,
|
|
25
|
+
size = _ref$size === void 0 ? 'normal' : _ref$size,
|
|
26
|
+
value = _ref.value,
|
|
27
|
+
onChange = _ref.onChange,
|
|
28
|
+
title = _ref.title,
|
|
29
|
+
description = _ref.description,
|
|
30
|
+
extraOptions = _ref.extraOptions,
|
|
31
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
32
|
+
var trueOptions = useMemo(function () {
|
|
33
|
+
return options.filter(function (option) {
|
|
34
|
+
return option.value !== '*';
|
|
35
|
+
}).map(function (_ref2) {
|
|
36
|
+
var value = _ref2.value;
|
|
37
|
+
return value;
|
|
38
|
+
});
|
|
39
|
+
}, [options]);
|
|
40
|
+
var handleSelect = useCallback(function (eventKey) {
|
|
41
|
+
if (eventKey !== null) {
|
|
42
|
+
var option = options.find(function (opt) {
|
|
43
|
+
return String(opt.value) === String(eventKey);
|
|
44
|
+
});
|
|
45
|
+
if (option && onChange) {
|
|
46
|
+
if (option.value === '*') {
|
|
47
|
+
if ((value === null || value === void 0 ? void 0 : value.length) === trueOptions.length) {
|
|
48
|
+
onChange([]);
|
|
49
|
+
} else {
|
|
50
|
+
onChange(trueOptions);
|
|
51
|
+
}
|
|
52
|
+
} else {
|
|
53
|
+
var isSelected = value === null || value === void 0 ? void 0 : value.includes(option.value);
|
|
54
|
+
if (isSelected) {
|
|
55
|
+
var _value$filter;
|
|
56
|
+
onChange((_value$filter = value === null || value === void 0 ? void 0 : value.filter(function (v) {
|
|
57
|
+
return v !== option.value;
|
|
58
|
+
})) !== null && _value$filter !== void 0 ? _value$filter : []);
|
|
59
|
+
} else {
|
|
60
|
+
onChange([].concat(_toConsumableArray(value !== null && value !== void 0 ? value : []), [option.value]));
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}, [options, onChange, value, trueOptions]);
|
|
66
|
+
return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
|
|
67
|
+
id: id,
|
|
68
|
+
className: clsx(className, 'flexmatch-button-select-container')
|
|
69
|
+
}, props), {}, {
|
|
70
|
+
children: options.map(function (option) {
|
|
71
|
+
var extraOption = extraOptions.find(function (opt) {
|
|
72
|
+
return opt.value === option.value;
|
|
73
|
+
});
|
|
74
|
+
var isSelected = option.value === '*' ? (value === null || value === void 0 ? void 0 : value.length) === trueOptions.length : value === null || value === void 0 ? void 0 : value.includes(option.value);
|
|
75
|
+
return /*#__PURE__*/_jsx(InputButtonSelectButton, {
|
|
76
|
+
size: size,
|
|
77
|
+
disabled: option.disabled,
|
|
78
|
+
isSelected: isSelected,
|
|
79
|
+
eventKey: String(option.value),
|
|
80
|
+
onSelect: handleSelect,
|
|
81
|
+
title: option.label,
|
|
82
|
+
description: extraOption === null || extraOption === void 0 ? void 0 : extraOption.description,
|
|
83
|
+
icon: extraOption === null || extraOption === void 0 ? void 0 : extraOption.icon
|
|
84
|
+
}, String(option.value));
|
|
85
|
+
})
|
|
86
|
+
}));
|
|
87
|
+
};
|
|
88
|
+
InputButtonMultiSelect.displayName = 'InputButtonMultiSelect';
|
|
89
|
+
export default InputButtonMultiSelect;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { InputSelectableExtraOption, InputSelectableProps } from '@/context/Input';
|
|
2
|
+
export interface InputButtonSelectProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, InputSelectableProps<T> {
|
|
3
|
+
id?: string | undefined;
|
|
4
|
+
title?: string | undefined;
|
|
5
|
+
description?: string | undefined;
|
|
6
|
+
extraOptions: InputSelectableExtraOption<T>[];
|
|
7
|
+
size?: 'small' | 'normal';
|
|
8
|
+
}
|
|
9
|
+
declare const InputButtonSelect: {
|
|
10
|
+
<T>({ id, className, options, size, value, onChange, title, description, extraOptions, ...props }: InputButtonSelectProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
displayName: string;
|
|
12
|
+
};
|
|
13
|
+
export default InputButtonSelect;
|
|
14
|
+
//# sourceMappingURL=InputButtonSelect.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputButtonSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputButtonSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAInF,MAAM,WAAW,sBAAsB,CAAC,CAAC,CACvC,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC;IACvF,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,YAAY,EAAE,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B;AACD,QAAA,MAAM,iBAAiB;KAAI,CAAC,iGAWzB,sBAAsB,CAAC,CAAC,CAAC;;CAiC3B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
var _excluded = ["id", "className", "options", "size", "value", "onChange", "title", "description", "extraOptions"];
|
|
3
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
7
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
8
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
9
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
10
|
+
import clsx from 'clsx';
|
|
11
|
+
import { useCallback } from 'react';
|
|
12
|
+
import InputButtonSelectButton from "./InputButtonSelectButton";
|
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
+
var InputButtonSelect = function InputButtonSelect(_ref) {
|
|
15
|
+
var id = _ref.id,
|
|
16
|
+
className = _ref.className,
|
|
17
|
+
options = _ref.options,
|
|
18
|
+
_ref$size = _ref.size,
|
|
19
|
+
size = _ref$size === void 0 ? 'normal' : _ref$size,
|
|
20
|
+
value = _ref.value,
|
|
21
|
+
onChange = _ref.onChange,
|
|
22
|
+
title = _ref.title,
|
|
23
|
+
description = _ref.description,
|
|
24
|
+
extraOptions = _ref.extraOptions,
|
|
25
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
26
|
+
var handleSelect = useCallback(function (eventKey) {
|
|
27
|
+
if (eventKey !== null) {
|
|
28
|
+
var option = options.find(function (opt) {
|
|
29
|
+
return String(opt.value) === String(eventKey);
|
|
30
|
+
});
|
|
31
|
+
if (option && onChange) {
|
|
32
|
+
onChange(option.value);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}, [options, onChange]);
|
|
36
|
+
return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
|
|
37
|
+
id: id,
|
|
38
|
+
className: clsx(className, 'flexmatch-button-select-container')
|
|
39
|
+
}, props), {}, {
|
|
40
|
+
children: options.map(function (option) {
|
|
41
|
+
var extraOption = extraOptions.find(function (opt) {
|
|
42
|
+
return opt.value === option.value;
|
|
43
|
+
});
|
|
44
|
+
return /*#__PURE__*/_jsx(InputButtonSelectButton, {
|
|
45
|
+
size: size,
|
|
46
|
+
disabled: option.disabled,
|
|
47
|
+
isSelected: option.value === value,
|
|
48
|
+
eventKey: String(option.value),
|
|
49
|
+
onSelect: handleSelect,
|
|
50
|
+
title: option.label,
|
|
51
|
+
description: extraOption === null || extraOption === void 0 ? void 0 : extraOption.description,
|
|
52
|
+
icon: extraOption === null || extraOption === void 0 ? void 0 : extraOption.icon
|
|
53
|
+
}, String(option.value));
|
|
54
|
+
})
|
|
55
|
+
}));
|
|
56
|
+
};
|
|
57
|
+
InputButtonSelect.displayName = 'InputButtonSelect';
|
|
58
|
+
export default InputButtonSelect;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
interface InputButtonSelectButtonProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onSelect'> {
|
|
2
|
+
size?: 'small' | 'normal';
|
|
3
|
+
title?: string | undefined;
|
|
4
|
+
icon?: React.ReactNode | undefined;
|
|
5
|
+
description?: string | undefined;
|
|
6
|
+
disabled?: boolean | undefined;
|
|
7
|
+
isSelected?: boolean | undefined;
|
|
8
|
+
eventKey?: string | number | null | undefined;
|
|
9
|
+
onSelect?: ((eventKey: string | number | null, event: React.SyntheticEvent<HTMLButtonElement>) => void) | undefined;
|
|
10
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
11
|
+
}
|
|
12
|
+
declare const InputButtonSelectButton: ({ title, size, icon, description, disabled, isSelected, eventKey, onSelect, onClick, children, className, ...props }: InputButtonSelectButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export default InputButtonSelectButton;
|
|
14
|
+
//# sourceMappingURL=InputButtonSelectButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputButtonSelectButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputButtonSelectButton.tsx"],"names":[],"mappings":"AAKA,UAAU,4BAA6B,SAAQ,IAAI,CACjD,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC,UAAU,CACX;IACC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE1B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAEnC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAE/B,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAEjC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAE9C,QAAQ,CAAC,EACL,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC,GAC5F,SAAS,CAAC;IAEd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;CAClE;AAED,QAAA,MAAM,uBAAuB,GAAI,sHAa9B,4BAA4B,4CAgE9B,CAAC;AACF,eAAe,uBAAuB,CAAC"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
var _excluded = ["title", "size", "icon", "description", "disabled", "isSelected", "eventKey", "onSelect", "onClick", "children", "className"];
|
|
3
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
7
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
8
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
9
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
10
|
+
import clsx from 'clsx';
|
|
11
|
+
import { useCallback } from 'react';
|
|
12
|
+
import { ButtonUI } from "../../atoms";
|
|
13
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
+
var InputButtonSelectButton = function InputButtonSelectButton(_ref) {
|
|
15
|
+
var title = _ref.title,
|
|
16
|
+
_ref$size = _ref.size,
|
|
17
|
+
size = _ref$size === void 0 ? 'normal' : _ref$size,
|
|
18
|
+
icon = _ref.icon,
|
|
19
|
+
description = _ref.description,
|
|
20
|
+
disabled = _ref.disabled,
|
|
21
|
+
isSelected = _ref.isSelected,
|
|
22
|
+
eventKey = _ref.eventKey,
|
|
23
|
+
onSelect = _ref.onSelect,
|
|
24
|
+
onClick = _ref.onClick,
|
|
25
|
+
children = _ref.children,
|
|
26
|
+
className = _ref.className,
|
|
27
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
28
|
+
var handleClick = useCallback(function (e) {
|
|
29
|
+
if (disabled) {
|
|
30
|
+
e.preventDefault();
|
|
31
|
+
e.stopPropagation();
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
if (onClick) {
|
|
35
|
+
onClick(e);
|
|
36
|
+
}
|
|
37
|
+
if (!e.defaultPrevented) {
|
|
38
|
+
if (onSelect) {
|
|
39
|
+
onSelect(eventKey !== null && eventKey !== void 0 ? eventKey : null, e);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}, [disabled, onClick, onSelect, eventKey]);
|
|
43
|
+
var handleKeyDown = useCallback(function (e) {
|
|
44
|
+
if (disabled) {
|
|
45
|
+
e.preventDefault();
|
|
46
|
+
e.stopPropagation();
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
50
|
+
e.preventDefault();
|
|
51
|
+
if (onClick) {
|
|
52
|
+
onClick(e);
|
|
53
|
+
}
|
|
54
|
+
if (!e.defaultPrevented) {
|
|
55
|
+
if (onSelect) {
|
|
56
|
+
onSelect(eventKey !== null && eventKey !== void 0 ? eventKey : null, e);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}, [disabled, onClick, onSelect, eventKey]);
|
|
61
|
+
return /*#__PURE__*/_jsxs(ButtonUI, _objectSpread(_objectSpread({
|
|
62
|
+
className: clsx('flexmatch-button-select-button-container', className, isSelected && 'selected', size === 'small' && 'small', size === 'normal' && 'normal'),
|
|
63
|
+
onClick: handleClick,
|
|
64
|
+
onKeyDown: handleKeyDown,
|
|
65
|
+
tabIndex: disabled ? -1 : 0,
|
|
66
|
+
"aria-disabled": disabled
|
|
67
|
+
}, props), {}, {
|
|
68
|
+
children: [icon, title]
|
|
69
|
+
}));
|
|
70
|
+
};
|
|
71
|
+
export default InputButtonSelectButton;
|
|
@@ -4,9 +4,10 @@ export interface InputCardSelectProps<T> extends Omit<React.HTMLAttributes<HTMLD
|
|
|
4
4
|
title?: string | undefined;
|
|
5
5
|
description?: string | undefined;
|
|
6
6
|
extraOptions: InputSelectableExtraOption<T>[];
|
|
7
|
+
size?: 'small' | 'normal';
|
|
7
8
|
}
|
|
8
9
|
declare const InputCardSelect: {
|
|
9
|
-
<T>({ id, className, options, value, onChange, title, description, extraOptions, ...props }: InputCardSelectProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
<T>({ id, className, options, size, value, onChange, title, description, extraOptions, ...props }: InputCardSelectProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
10
11
|
displayName: string;
|
|
11
12
|
};
|
|
12
13
|
export default InputCardSelect;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputCardSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputCardSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAInF,MAAM,WAAW,oBAAoB,CAAC,CAAC,CACrC,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC;IACvF,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,YAAY,EAAE,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"InputCardSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputCardSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAInF,MAAM,WAAW,oBAAoB,CAAC,CAAC,CACrC,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC;IACvF,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,YAAY,EAAE,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B;AACD,QAAA,MAAM,eAAe;KAAI,CAAC,iGAWvB,oBAAoB,CAAC,CAAC,CAAC;;CAiCzB,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
var _excluded = ["id", "className", "options", "value", "onChange", "title", "description", "extraOptions"];
|
|
2
|
+
var _excluded = ["id", "className", "options", "size", "value", "onChange", "title", "description", "extraOptions"];
|
|
3
3
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
4
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
5
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
@@ -15,6 +15,8 @@ var InputCardSelect = function InputCardSelect(_ref) {
|
|
|
15
15
|
var id = _ref.id,
|
|
16
16
|
className = _ref.className,
|
|
17
17
|
options = _ref.options,
|
|
18
|
+
_ref$size = _ref.size,
|
|
19
|
+
size = _ref$size === void 0 ? 'normal' : _ref$size,
|
|
18
20
|
value = _ref.value,
|
|
19
21
|
onChange = _ref.onChange,
|
|
20
22
|
title = _ref.title,
|
|
@@ -40,6 +42,7 @@ var InputCardSelect = function InputCardSelect(_ref) {
|
|
|
40
42
|
return opt.value === option.value;
|
|
41
43
|
});
|
|
42
44
|
return /*#__PURE__*/_jsx(InputCardSelectButton, {
|
|
45
|
+
size: size,
|
|
43
46
|
disabled: option.disabled,
|
|
44
47
|
isSelected: option.value === value,
|
|
45
48
|
eventKey: String(option.value),
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
interface InputCardSelectButtonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
2
|
+
size?: 'small' | 'normal';
|
|
2
3
|
title?: string | undefined;
|
|
3
4
|
icon?: React.ReactNode | undefined;
|
|
4
5
|
description?: string | undefined;
|
|
@@ -8,6 +9,6 @@ interface InputCardSelectButtonProps extends Omit<React.HTMLAttributes<HTMLDivEl
|
|
|
8
9
|
onSelect?: ((eventKey: string | number | null, event: React.SyntheticEvent<HTMLElement>) => void) | undefined;
|
|
9
10
|
onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
10
11
|
}
|
|
11
|
-
declare const InputCardSelectButton:
|
|
12
|
+
declare const InputCardSelectButton: ({ title, size, icon, description, disabled, isSelected, eventKey, onSelect, onClick, children, className, ...props }: InputCardSelectButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
export default InputCardSelectButton;
|
|
13
14
|
//# sourceMappingURL=InputCardSelectButton.d.ts.map
|