@invoicebox/ui 0.1.0-alpha.40 → 0.1.0-alpha.41
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/components/form/PositiveIntegerInput/index.js +2 -2
- package/dist/components/form/Select/components/Input/index.d.ts +6 -0
- package/dist/components/form/Select/components/Input/index.js +42 -0
- package/dist/components/form/Select/components/Input/index.stories.d.ts +5 -0
- package/dist/components/form/Select/components/Input/index.stories.js +27 -0
- package/dist/components/form/Select/components/Input/styles.d.ts +2 -0
- package/dist/components/form/Select/components/Input/styles.js +12 -0
- package/dist/components/form/Select/index.d.ts +11 -0
- package/dist/components/form/Select/index.js +122 -0
- package/dist/components/form/Select/index.stories.d.ts +5 -0
- package/dist/components/form/Select/index.stories.js +83 -0
- package/dist/components/form/Select/styles.d.ts +5 -0
- package/dist/components/form/Select/styles.js +25 -0
- package/dist/hooks/useClickOutside.d.ts +2 -0
- package/dist/hooks/useClickOutside.js +22 -0
- package/package.json +1 -1
- /package/dist/hooks/{useFocusField.d.ts → useInputFocus.d.ts} +0 -0
- /package/dist/hooks/{useFocusField.js → useInputFocus.js} +0 -0
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.PositiveIntegerInput = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var S = _interopRequireWildcard(require("./styles"));
|
|
10
|
-
var
|
|
10
|
+
var _useInputFocus2 = require("../../../hooks/useInputFocus");
|
|
11
11
|
var _InputLabel = require("../InputLabel");
|
|
12
12
|
var _PureInput = require("../PureInput");
|
|
13
13
|
var _Arrow = require("../../common/Arrow");
|
|
@@ -30,7 +30,7 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
|
|
|
30
30
|
onFocus = _ref.onFocus,
|
|
31
31
|
onBlur = _ref.onBlur,
|
|
32
32
|
name = _ref.name;
|
|
33
|
-
var _useInputFocus = (0,
|
|
33
|
+
var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
|
|
34
34
|
onFocus: onFocus,
|
|
35
35
|
onBlur: onBlur
|
|
36
36
|
}),
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { TProps as TInputLabelProps } from '../../../InputLabel';
|
|
3
|
+
import { TProps as TPureInputProps } from '../../../PureInput';
|
|
4
|
+
import { TProps as TArrowProps } from '../../../../common/Arrow';
|
|
5
|
+
export type TProps = Pick<TInputLabelProps, 'inFocus' | 'label'> & Pick<TPureInputProps, 'hasError' | 'placeholder' | 'name' | 'onFocus' | 'onBlur' | 'value'> & Pick<TArrowProps, 'isOpen'>;
|
|
6
|
+
export declare const Input: FC<TProps>;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
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); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.Input = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var S = _interopRequireWildcard(require("./styles"));
|
|
10
|
+
var _InputLabel = require("../../../InputLabel");
|
|
11
|
+
var _PureInput = require("../../../PureInput");
|
|
12
|
+
var _Arrow = require("../../../../common/Arrow");
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
16
|
+
var Input = exports.Input = function Input(_ref) {
|
|
17
|
+
var hasError = _ref.hasError,
|
|
18
|
+
inFocus = _ref.inFocus,
|
|
19
|
+
placeholder = _ref.placeholder,
|
|
20
|
+
onFocus = _ref.onFocus,
|
|
21
|
+
onBlur = _ref.onBlur,
|
|
22
|
+
value = _ref.value,
|
|
23
|
+
name = _ref.name,
|
|
24
|
+
label = _ref.label,
|
|
25
|
+
isOpen = _ref.isOpen;
|
|
26
|
+
return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
|
|
27
|
+
inFocus: inFocus,
|
|
28
|
+
label: label
|
|
29
|
+
}, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, {
|
|
30
|
+
hasError: hasError,
|
|
31
|
+
inFocus: inFocus,
|
|
32
|
+
name: name,
|
|
33
|
+
placeholder: placeholder,
|
|
34
|
+
onFocus: onFocus,
|
|
35
|
+
onBlur: onBlur,
|
|
36
|
+
value: value,
|
|
37
|
+
readOnly: true,
|
|
38
|
+
paddingRight: 52
|
|
39
|
+
}), /*#__PURE__*/_react["default"].createElement(S.IconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Arrow.Arrow, {
|
|
40
|
+
isOpen: isOpen
|
|
41
|
+
})));
|
|
42
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.Default = void 0;
|
|
7
|
+
var _addonActions = require("@storybook/addon-actions");
|
|
8
|
+
var _ = require(".");
|
|
9
|
+
var meta = {
|
|
10
|
+
title: 'form/Select/_components/Input',
|
|
11
|
+
component: _.Input,
|
|
12
|
+
tags: ['autodocs']
|
|
13
|
+
};
|
|
14
|
+
var _default = exports["default"] = meta;
|
|
15
|
+
var Default = exports.Default = {
|
|
16
|
+
args: {
|
|
17
|
+
hasError: false,
|
|
18
|
+
inFocus: false,
|
|
19
|
+
placeholder: 'placeholder',
|
|
20
|
+
onFocus: (0, _addonActions.action)('focus'),
|
|
21
|
+
onBlur: (0, _addonActions.action)('blur'),
|
|
22
|
+
value: 'Selected option',
|
|
23
|
+
name: 'name',
|
|
24
|
+
label: 'label',
|
|
25
|
+
isOpen: false
|
|
26
|
+
}
|
|
27
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.IconWrapper = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
9
|
+
var IconWrapper = exports.IconWrapper = _styledComponents["default"].div.withConfig({
|
|
10
|
+
displayName: "styles__IconWrapper",
|
|
11
|
+
componentId: "sc-1fsrle6-0"
|
|
12
|
+
})(["position:absolute;right:14px;height:100%;top:0;display:flex;align-items:center;"]);
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { TProps as TInputProps } from './components/Input';
|
|
2
|
+
type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placeholder' | 'onFocus' | 'onBlur' | 'name'> & {
|
|
3
|
+
value: TValue | null;
|
|
4
|
+
onChange: (value: TValue) => void;
|
|
5
|
+
options: {
|
|
6
|
+
label: string;
|
|
7
|
+
value: TValue;
|
|
8
|
+
}[];
|
|
9
|
+
};
|
|
10
|
+
export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, onFocus, onBlur, name, value, onChange, options, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
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); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.Select = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var S = _interopRequireWildcard(require("./styles"));
|
|
10
|
+
var _Input = require("./components/Input");
|
|
11
|
+
var _useInputFocus2 = require("../../../hooks/useInputFocus");
|
|
12
|
+
var _Dropdown = require("../../common/Dropdown");
|
|
13
|
+
var _Scrollbar = require("../../common/Scrollbar");
|
|
14
|
+
var _useClickOutside = require("../../../hooks/useClickOutside");
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
17
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
18
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
19
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
20
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
21
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
22
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
23
|
+
var LIST_HEIGHT = 294;
|
|
24
|
+
var OPTION_IDENTIFIER = 'option-identifier';
|
|
25
|
+
var Select = exports.Select = function Select(_ref) {
|
|
26
|
+
var label = _ref.label,
|
|
27
|
+
hasError = _ref.hasError,
|
|
28
|
+
placeholder = _ref.placeholder,
|
|
29
|
+
onFocus = _ref.onFocus,
|
|
30
|
+
onBlur = _ref.onBlur,
|
|
31
|
+
name = _ref.name,
|
|
32
|
+
value = _ref.value,
|
|
33
|
+
onChange = _ref.onChange,
|
|
34
|
+
options = _ref.options;
|
|
35
|
+
var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
|
|
36
|
+
onFocus: onFocus,
|
|
37
|
+
onBlur: onBlur
|
|
38
|
+
}),
|
|
39
|
+
inFocus = _useInputFocus.inFocus,
|
|
40
|
+
focusHandler = _useInputFocus.handleFocus,
|
|
41
|
+
blurHandler = _useInputFocus.handleBlur;
|
|
42
|
+
var _useState = (0, _react.useState)(false),
|
|
43
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
44
|
+
isOpen = _useState2[0],
|
|
45
|
+
setIsOpen = _useState2[1];
|
|
46
|
+
|
|
47
|
+
/*
|
|
48
|
+
существует интеграционная проблема селекта с final-form
|
|
49
|
+
Суть:
|
|
50
|
+
- пользователь выбирает опцию;
|
|
51
|
+
- срабатывает onBlur;
|
|
52
|
+
- final-form помечает поле, как toched;
|
|
53
|
+
- если поле не валидно, hasError становится true, отображается красная рамка;
|
|
54
|
+
- срабатывает onChange, и если поле валидно рамка пропадает;
|
|
55
|
+
т.е. рамка мигает, хотя такого быть не должно;
|
|
56
|
+
так появилась логика delayBlur
|
|
57
|
+
*/
|
|
58
|
+
var delayBlur = (0, _react.useRef)(null);
|
|
59
|
+
var selectedOption = (0, _react.useMemo)(function () {
|
|
60
|
+
return options.find(function (option) {
|
|
61
|
+
return option.value === value;
|
|
62
|
+
});
|
|
63
|
+
}, [options, value]);
|
|
64
|
+
var handleShow = (0, _react.useCallback)(function () {
|
|
65
|
+
return setIsOpen(true);
|
|
66
|
+
}, []);
|
|
67
|
+
var handleHide = (0, _react.useCallback)(function () {
|
|
68
|
+
return setIsOpen(false);
|
|
69
|
+
}, []);
|
|
70
|
+
var wrapperRef = (0, _useClickOutside.useOutsideClick)(handleHide);
|
|
71
|
+
var handleFocus = (0, _react.useCallback)(function (event) {
|
|
72
|
+
handleShow();
|
|
73
|
+
focusHandler(event);
|
|
74
|
+
}, [focusHandler, handleShow]);
|
|
75
|
+
var handleBlur = (0, _react.useCallback)(function (event) {
|
|
76
|
+
var relatedTarget = event.relatedTarget;
|
|
77
|
+
var isOptionClick = (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.dataset.optionIdentifier) === OPTION_IDENTIFIER;
|
|
78
|
+
if (!isOptionClick) {
|
|
79
|
+
blurHandler(event);
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
delayBlur.current = function () {
|
|
83
|
+
return blurHandler(event);
|
|
84
|
+
};
|
|
85
|
+
}, [blurHandler]);
|
|
86
|
+
var handleSelect = (0, _react.useCallback)(function (event) {
|
|
87
|
+
var newValue = JSON.parse(event.currentTarget.dataset.value);
|
|
88
|
+
onChange(newValue);
|
|
89
|
+
handleHide();
|
|
90
|
+
if (delayBlur.current) {
|
|
91
|
+
delayBlur.current();
|
|
92
|
+
delayBlur.current = null;
|
|
93
|
+
}
|
|
94
|
+
}, [handleHide, onChange]);
|
|
95
|
+
return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
|
|
96
|
+
ref: wrapperRef
|
|
97
|
+
}, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_Input.Input, {
|
|
98
|
+
label: label,
|
|
99
|
+
hasError: hasError,
|
|
100
|
+
inFocus: inFocus,
|
|
101
|
+
placeholder: placeholder,
|
|
102
|
+
onFocus: handleFocus,
|
|
103
|
+
onBlur: handleBlur,
|
|
104
|
+
value: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '',
|
|
105
|
+
name: name,
|
|
106
|
+
isOpen: isOpen
|
|
107
|
+
})), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
|
|
108
|
+
isOpen: isOpen,
|
|
109
|
+
isAutoPosition: true,
|
|
110
|
+
width: "100%"
|
|
111
|
+
}, /*#__PURE__*/_react["default"].createElement(S.Options, null, /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
|
|
112
|
+
maxHeight: LIST_HEIGHT
|
|
113
|
+
}, options.map(function (option) {
|
|
114
|
+
return /*#__PURE__*/_react["default"].createElement(S.Option, {
|
|
115
|
+
key: option.value,
|
|
116
|
+
variant: "bodyMRegular",
|
|
117
|
+
onClick: handleSelect,
|
|
118
|
+
"data-value": JSON.stringify(option.value),
|
|
119
|
+
"data-option-identifier": OPTION_IDENTIFIER
|
|
120
|
+
}, option.label);
|
|
121
|
+
})))));
|
|
122
|
+
};
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
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); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = exports.Default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _addonActions = require("@storybook/addon-actions");
|
|
10
|
+
var _ = require(".");
|
|
11
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
12
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
13
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
14
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
15
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
16
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
17
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
18
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
19
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
20
|
+
var meta = {
|
|
21
|
+
title: 'form/Select',
|
|
22
|
+
component: _.Select,
|
|
23
|
+
tags: ['autodocs']
|
|
24
|
+
};
|
|
25
|
+
var _default = exports["default"] = meta;
|
|
26
|
+
var selectOptions = [{
|
|
27
|
+
label: 'Option 1',
|
|
28
|
+
value: 'option-1'
|
|
29
|
+
}, {
|
|
30
|
+
label: 'Option 2',
|
|
31
|
+
value: 'option-2'
|
|
32
|
+
}, {
|
|
33
|
+
label: 'Option 3',
|
|
34
|
+
value: 'option-3'
|
|
35
|
+
}, {
|
|
36
|
+
label: 'Option 4',
|
|
37
|
+
value: 'option-4'
|
|
38
|
+
}, {
|
|
39
|
+
label: 'Option 5',
|
|
40
|
+
value: 'option-5'
|
|
41
|
+
}, {
|
|
42
|
+
label: 'Option 6',
|
|
43
|
+
value: 'option-6'
|
|
44
|
+
}, {
|
|
45
|
+
label: 'Option 7',
|
|
46
|
+
value: 'option-7'
|
|
47
|
+
}, {
|
|
48
|
+
label: 'Option 8',
|
|
49
|
+
value: 'option-8'
|
|
50
|
+
}, {
|
|
51
|
+
label: 'Option 9',
|
|
52
|
+
value: 'option-9'
|
|
53
|
+
}, {
|
|
54
|
+
label: 'Option 10',
|
|
55
|
+
value: 'option-10'
|
|
56
|
+
}, {
|
|
57
|
+
label: 'Option 11',
|
|
58
|
+
value: 'option-11'
|
|
59
|
+
}, {
|
|
60
|
+
label: 'Option 12',
|
|
61
|
+
value: 'option-12'
|
|
62
|
+
}];
|
|
63
|
+
var Default = exports.Default = {
|
|
64
|
+
args: {
|
|
65
|
+
hasError: false,
|
|
66
|
+
label: 'Label',
|
|
67
|
+
name: 'name',
|
|
68
|
+
onBlur: (0, _addonActions.action)('blur'),
|
|
69
|
+
onFocus: (0, _addonActions.action)('focus'),
|
|
70
|
+
placeholder: 'Placeholder'
|
|
71
|
+
},
|
|
72
|
+
render: function Component(props) {
|
|
73
|
+
var _useState = (0, _react.useState)(null),
|
|
74
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
75
|
+
value = _useState2[0],
|
|
76
|
+
setValue = _useState2[1];
|
|
77
|
+
return /*#__PURE__*/_react["default"].createElement(_.Select, _extends({}, props, {
|
|
78
|
+
value: value,
|
|
79
|
+
onChange: setValue,
|
|
80
|
+
options: selectOptions
|
|
81
|
+
}));
|
|
82
|
+
}
|
|
83
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
3
|
+
export declare const InputWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
4
|
+
export declare const Options: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
5
|
+
export declare const Option: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TProps, import("styled-components/dist/types").BaseObject>> & Omit<import("react").FC<import("../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Wrapper = exports.Options = exports.Option = exports.InputWrapper = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _Typography = require("../../common/Typography");
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
10
|
+
var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
|
|
11
|
+
displayName: "styles__Wrapper",
|
|
12
|
+
componentId: "sc-1x9n0z5-0"
|
|
13
|
+
})(["position:relative;width:100%;"]);
|
|
14
|
+
var InputWrapper = exports.InputWrapper = _styledComponents["default"].div.withConfig({
|
|
15
|
+
displayName: "styles__InputWrapper",
|
|
16
|
+
componentId: "sc-1x9n0z5-1"
|
|
17
|
+
})(["cursor:pointer;input{cursor:pointer;}"]);
|
|
18
|
+
var Options = exports.Options = _styledComponents["default"].div.withConfig({
|
|
19
|
+
displayName: "styles__Options",
|
|
20
|
+
componentId: "sc-1x9n0z5-2"
|
|
21
|
+
})(["display:flex;flex-direction:column;"]);
|
|
22
|
+
var Option = exports.Option = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
|
|
23
|
+
displayName: "styles__Option",
|
|
24
|
+
componentId: "sc-1x9n0z5-3"
|
|
25
|
+
})(["overflow:hidden;display:flex;width:100%;text-align:left;flex-direction:column;padding:12px 20px;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;&:hover{background-color:rgba(241,242,246,0.5);}"]);
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useOutsideClick = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var useOutsideClick = exports.useOutsideClick = function useOutsideClick(onClick) {
|
|
9
|
+
var ref = (0, _react.useRef)(null);
|
|
10
|
+
(0, _react.useEffect)(function () {
|
|
11
|
+
var handleOutsideClick = function handleOutsideClick(event) {
|
|
12
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
13
|
+
onClick();
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
document.addEventListener('mousedown', handleOutsideClick);
|
|
17
|
+
return function () {
|
|
18
|
+
document.removeEventListener('mousedown', handleOutsideClick);
|
|
19
|
+
};
|
|
20
|
+
}, [ref, onClick]);
|
|
21
|
+
return ref;
|
|
22
|
+
};
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|