1 | (function (global, factory) {
|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components')) :
|
3 | typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components'], factory) :
|
4 | (global = global || self, factory(global.ReactFreeDropDown = {}, global.React, global.styled));
|
5 | }(this, (function (exports, React, styled) { 'use strict';
|
6 |
|
7 | var React__default = 'default' in React ? React['default'] : React;
|
8 | var styled__default = 'default' in styled ? styled['default'] : styled;
|
9 |
|
10 | |
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | var __assign = function() {
|
26 | __assign = Object.assign || function __assign(t) {
|
27 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
28 | s = arguments[i];
|
29 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
30 | }
|
31 | return t;
|
32 | };
|
33 | return __assign.apply(this, arguments);
|
34 | };
|
35 |
|
36 | function __makeTemplateObject(cooked, raw) {
|
37 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
38 | return cooked;
|
39 | }
|
40 |
|
41 | var GlobalStyle = styled.createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tbody{\n\t\tbackground-color: #ffffff;\n\t\tfont-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n\t}\n\ta {\n\t\tcolor: inherit;\n\t\ttext-decoration: none;\n }\n\tol, ul, li {\n\t\tlist-style: none;\n\t}\n"], ["\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tbody{\n\t\tbackground-color: #ffffff;\n\t\tfont-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n\t}\n\ta {\n\t\tcolor: inherit;\n\t\ttext-decoration: none;\n }\n\tol, ul, li {\n\t\tlist-style: none;\n\t}\n"])));
|
42 | var templateObject_1;
|
43 |
|
44 | var statusChangeState = {
|
45 | isFocus: false
|
46 | };
|
47 | var StatusChangeActionType;
|
48 | (function (StatusChangeActionType) {
|
49 | StatusChangeActionType["IS_FOCUS"] = "IS_FOCUS";
|
50 | StatusChangeActionType["ON_BLUR"] = "ON_BLUR";
|
51 | })(StatusChangeActionType || (StatusChangeActionType = {}));
|
52 | function statusChangeReducer(state, action) {
|
53 | switch (action.type) {
|
54 | case StatusChangeActionType.IS_FOCUS:
|
55 | return __assign(__assign({}, state), { isFocus: action.isFocus });
|
56 | case StatusChangeActionType.ON_BLUR:
|
57 | return __assign(__assign({}, state), { isFocus: false });
|
58 | default:
|
59 | return state;
|
60 | }
|
61 | }
|
62 | var StatusChangeStateContext = React.createContext(undefined);
|
63 | var StatusChangeDispatchContext = React.createContext(undefined);
|
64 | function useStatusChangeState() {
|
65 | var state = React.useContext(StatusChangeStateContext);
|
66 | if (!state)
|
67 | throw new Error('StatusChangeStateContext not found');
|
68 | return state;
|
69 | }
|
70 | function useStatusChangeDispatch() {
|
71 | var dispatch = React.useContext(StatusChangeDispatchContext);
|
72 | if (!dispatch)
|
73 | throw new Error('StatusChangeDispatchContext not found');
|
74 | return dispatch;
|
75 | }
|
76 |
|
77 | var StatusChangeContextProvider = function (_a) {
|
78 | var children = _a.children;
|
79 | var _b = React.useReducer(statusChangeReducer, statusChangeState), state = _b[0], dispatch = _b[1];
|
80 | return (React.createElement(StatusChangeDispatchContext.Provider, { value: dispatch },
|
81 | React.createElement(StatusChangeStateContext.Provider, { value: state }, children)));
|
82 | };
|
83 |
|
84 | var StoreProvider = function (_a) {
|
85 | var children = _a.children;
|
86 | return (React.createElement(React.Fragment, null,
|
87 | React.createElement(GlobalStyle, null),
|
88 | React.createElement(StatusChangeContextProvider, null, children)));
|
89 | };
|
90 |
|
91 | var color = {
|
92 | keyColor: '#1076de',
|
93 | lightGray: 'rgb(240,240,240)',
|
94 | opacityLightGray: 'rgba(245,245,245,0.8)',
|
95 | gray: 'rgb(220,220,220)',
|
96 | darkGray: '#333',
|
97 | opacityDarkGray: 'rgba(51,51,51,0.8)',
|
98 | dark: 'rgb(0,0,0,0.8)',
|
99 | light: 'rgb(255,255,255,0.8)',
|
100 | white: '#fff',
|
101 | black: '#000'
|
102 | };
|
103 |
|
104 | var isLightMode = function (mode) { return mode === 'light'; };
|
105 | var classes = function () {
|
106 | var arg = [];
|
107 | for (var _i = 0; _i < arguments.length; _i++) {
|
108 | arg[_i] = arguments[_i];
|
109 | }
|
110 | return arg.filter(function (a) { return a; }).join(' ');
|
111 | };
|
112 |
|
113 | var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Generator: Adobe Illustrator 24.0.2%2c SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 21.3 21.3' style='enable-background:new 0 0 21.3 21.3%3b' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bdisplay:none%3b%7d .st1%7bfill:%23656565%3b%7d%3c/style%3e%3cg id='%eb%a0%88%ec%9d%b4%ec%96%b4_1' class='st0'%3e %3cimage style='display:inline%3boverflow:visible%3b' width='19' height='21' xlink:href='%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba 2020-02-11 %e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae 1.29.38.png' transform='matrix(1 0 0 1 1.6723 -0.3277)'%3e %3c/image%3e%3c/g%3e%3cg id='%eb%a0%88%ec%9d%b4%ec%96%b4_2'%3e %3cpolygon class='st1' points='10.7%2c15.9 1.4%2c6.8 2.7%2c5.5 10.7%2c13.3 18.6%2c5.5 19.9%2c6.8 '/%3e%3c/g%3e%3c/svg%3e";
|
114 |
|
115 | var RfddSelectStyle = {
|
116 | Wrapper: styled__default.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\t\tpadding: 4px 4px 4px 8px;\n\t\tbox-sizing: border-box;\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\ttransition: color 0.3s;\n\t\t&:hover {\n\t\t\tcolor: ", ";\n\t\t}\n\t\tfont-size: 12px;\n\t\tborder: 1px solid ", ";\n\t\twidth: 100%;\n\t\tmin-height: 30px;\n\t\theight: 100%;\n\t\tposition: relative;\n\t\tspan {\n\t\t\twidth: 80%;\n\t\t\tdisplay: flex;\n\t\t\theight: 100%;\n\t\t\toverflow-x: hidden;\n\t\t\toverflow-y: initial;\n\t\t\talign-items: center;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t"], ["\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\t\tpadding: 4px 4px 4px 8px;\n\t\tbox-sizing: border-box;\n\t\tbackground: ", ";\n\t\tcolor: ",
|
117 | ";\n\t\ttransition: color 0.3s;\n\t\t&:hover {\n\t\t\tcolor: ", ";\n\t\t}\n\t\tfont-size: 12px;\n\t\tborder: 1px solid ", ";\n\t\twidth: 100%;\n\t\tmin-height: 30px;\n\t\theight: 100%;\n\t\tposition: relative;\n\t\tspan {\n\t\t\twidth: 80%;\n\t\t\tdisplay: flex;\n\t\t\theight: 100%;\n\t\t\toverflow-x: hidden;\n\t\t\toverflow-y: initial;\n\t\t\talign-items: center;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t"])), function (_a) {
|
118 | var mode = _a.mode;
|
119 | return (isLightMode(mode) ? color.white : color.dark);
|
120 | }, function (_a) {
|
121 | var mode = _a.mode;
|
122 | return isLightMode(mode) ? color.opacityDarkGray : color.opacityLightGray;
|
123 | }, function (_a) {
|
124 | var mode = _a.mode;
|
125 | return (isLightMode(mode) ? color.black : color.white);
|
126 | }, function (_a) {
|
127 | var mode = _a.mode;
|
128 | return (isLightMode(mode) ? color.gray : color.dark);
|
129 | }),
|
130 | Icon: styled__default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tposition: absolute;\n\t\tright: 10px;\n\t\ttop: 50%;\n\t\tmargin-top: -6px;\n\t\ttransform: ", ";\n\t\timg {\n\t\t\tdisplay: block;\n\t\t\twidth: 12px;\n\t\t\theight: 12px;\n\t\t}\n\t"], ["\n\t\tposition: absolute;\n\t\tright: 10px;\n\t\ttop: 50%;\n\t\tmargin-top: -6px;\n\t\ttransform: ", ";\n\t\timg {\n\t\t\tdisplay: block;\n\t\t\twidth: 12px;\n\t\t\theight: 12px;\n\t\t}\n\t"])), function (_a) {
|
131 | var isFocus = _a.isFocus;
|
132 | return (isFocus ? 'rotate(180deg)' : 'rotate(0deg)');
|
133 | })
|
134 | };
|
135 | var RfddSelect = function (props) {
|
136 | var focusStyle = props.focusStyle, selectClassName = props.selectClassName, selectStyle = props.selectStyle, isValue = props.isValue, mode = props.mode, value = props.value, icon = props.icon, hiddenIcon = props.hiddenIcon;
|
137 | var isFocus = useStatusChangeState().isFocus;
|
138 | var statusChangeDispatch = useStatusChangeDispatch();
|
139 | return (React.createElement(RfddSelectStyle.Wrapper, { className: selectClassName || 'rfdd-select', style: isFocus && focusStyle ? __assign(__assign({}, selectStyle), focusStyle) : selectStyle, onClick: function () { return statusChangeDispatch({ type: StatusChangeActionType.IS_FOCUS, isFocus: !isFocus }); }, isValue: isValue, mode: mode, id: "select", "data-testid": "select" },
|
140 | React.createElement("span", { "data-testid": "select-text" }, value),
|
141 | !hiddenIcon && (React.createElement(RfddSelectStyle.Icon, { isFocus: isFocus },
|
142 | React.createElement("img", { src: icon || img, alt: "default arrow icon" })))));
|
143 | };
|
144 | var templateObject_1$1, templateObject_2;
|
145 |
|
146 | var RfddStyle = {
|
147 | Wrapper: styled__default.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\tbox-sizing: border-box;\n\t\tfont-weight: lighter;\n\t\toutline: none;\n\t\tmin-width: 120px;\n\t\tmin-height: 30px;\n\t\tbackground: white;\n\t"], ["\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\tbox-sizing: border-box;\n\t\tfont-weight: lighter;\n\t\toutline: none;\n\t\tmin-width: 120px;\n\t\tmin-height: 30px;\n\t\tbackground: white;\n\t"]))),
|
148 | Ul: styled__default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tdisplay: block;\n\t\tlist-style: none;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 100%;\n\t\tz-index: 200;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\t", ";\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\toverflow: hidden;\n\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\t\ttransition: max-height 0.2s;\n\t\tmax-height: ", ";\n\t\t", ";\n\t"], ["\n\t\tdisplay: block;\n\t\tlist-style: none;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 100%;\n\t\tz-index: 200;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\t",
|
149 | ";\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\toverflow: hidden;\n\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\t\ttransition: max-height 0.2s;\n\t\tmax-height: ", ";\n\t\t", ";\n\t"])), function (_a) {
|
150 | var mode = _a.mode;
|
151 | if (isLightMode(mode)) {
|
152 | return styled.css(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: rgb(100, 100, 100);\n\t\t\t\t\t&::-webkit-scrollbar {\n\t\t\t\t\t\twidth: 10px;\n\t\t\t\t\t\tpadding: 0 2px;\n\t\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\t}\n\t\t\t\t\t&::-webkit-scrollbar-track {\n\t\t\t\t\t\tpadding: 0 2px;\n\t\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\t\tbackground-color: rgb(220, 220, 220);\n\t\t\t\t\t}\n\t\t\t\t\t&::-webkit-scrollbar-thumb {\n\t\t\t\t\t\tbackground-color: rgb(190, 190, 190);\n\t\t\t\t\t\twidth: 8px;\n\t\t\t\t\t\tborder-radius: 10px;\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\tbackground-color: rgb(180, 180, 180);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t"], ["\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: rgb(100, 100, 100);\n\t\t\t\t\t&::-webkit-scrollbar {\n\t\t\t\t\t\twidth: 10px;\n\t\t\t\t\t\tpadding: 0 2px;\n\t\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\t}\n\t\t\t\t\t&::-webkit-scrollbar-track {\n\t\t\t\t\t\tpadding: 0 2px;\n\t\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\t\tbackground-color: rgb(220, 220, 220);\n\t\t\t\t\t}\n\t\t\t\t\t&::-webkit-scrollbar-thumb {\n\t\t\t\t\t\tbackground-color: rgb(190, 190, 190);\n\t\t\t\t\t\twidth: 8px;\n\t\t\t\t\t\tborder-radius: 10px;\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\tbackground-color: rgb(180, 180, 180);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t"])), color.light);
|
153 | }
|
154 | return styled.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t\t&::-webkit-scrollbar {\n\t\t\t\t\twidth: 10px;\n\t\t\t\t\tpadding: 0 2px;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\t\t&::-webkit-scrollbar-track {\n\t\t\t\t\tbackground-color: rgb(60, 60, 60);\n\t\t\t\t}\n\t\t\t\t&::-webkit-scrollbar-thumb {\n\t\t\t\t\tbackground-color: rgb(150, 150, 150);\n\t\t\t\t\twidth: 8px;\n\t\t\t\t\tborder-radius: 10px;\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground-color: rgb(180, 180, 180);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"], ["\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t\t&::-webkit-scrollbar {\n\t\t\t\t\twidth: 10px;\n\t\t\t\t\tpadding: 0 2px;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\t\t&::-webkit-scrollbar-track {\n\t\t\t\t\tbackground-color: rgb(60, 60, 60);\n\t\t\t\t}\n\t\t\t\t&::-webkit-scrollbar-thumb {\n\t\t\t\t\tbackground-color: rgb(150, 150, 150);\n\t\t\t\t\twidth: 8px;\n\t\t\t\t\tborder-radius: 10px;\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground-color: rgb(180, 180, 180);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), color.dark, color.white);
|
155 | }, function (_a) {
|
156 | var isFocus = _a.isFocus;
|
157 | return (isFocus ? '100px' : '0');
|
158 | }, function (_a) {
|
159 | var isFocus = _a.isFocus;
|
160 | return (isFocus ? 'overflow-y: auto' : 'overflow: hidden');
|
161 | })
|
162 | };
|
163 | var RfddWrap = function (props) {
|
164 | var children = props.children, selectClassName = props.selectClassName, optionOnClick = props.optionOnClick, optionClassName = props.optionClassName, className = props.className, style = props.style, focusStyle = props.focusStyle, selectStyle = props.selectStyle, hoverStyle = props.hoverStyle, optionStyle = props.optionStyle, onChange = props.onChange, value = props.value, _a = props.mode, mode = _a === void 0 ? 'light' : _a, icon = props.icon, hiddenIcon = props.hiddenIcon, _b = props.placeholder, placeholder = _b === void 0 ? '' : _b;
|
165 | var _c = React.useState(''), selectValue = _c[0], setSelectValue = _c[1];
|
166 | var isFocus = useStatusChangeState().isFocus;
|
167 | var statusChangeDispatch = useStatusChangeDispatch();
|
168 | var handleChange = function (optionValue) {
|
169 | if (onChange) {
|
170 | onChange(optionValue);
|
171 | }
|
172 | statusChangeDispatch({ type: StatusChangeActionType.ON_BLUR });
|
173 | };
|
174 | var handleSelectChange = function (optionStr) {
|
175 | setSelectValue(optionStr);
|
176 | statusChangeDispatch({ type: StatusChangeActionType.ON_BLUR });
|
177 | };
|
178 | var isValue = value !== '' || selectValue !== '';
|
179 | return (React.createElement(RfddStyle.Wrapper, { tabIndex: 0, onBlur: function () { return statusChangeDispatch({ type: StatusChangeActionType.ON_BLUR }); }, "data-testid": "rfdd", className: className ? classes('rfdd', className) : 'rfdd', style: __assign({}, style) },
|
180 | React.createElement(RfddSelect, { selectClassName: selectClassName, focusStyle: focusStyle, selectStyle: selectStyle, isValue: isValue, mode: mode, value: selectValue || placeholder, icon: icon, hiddenIcon: hiddenIcon }),
|
181 | children && (React.createElement(RfddStyle.Ul, { isFocus: isFocus, mode: mode, id: "list", "data-testid": "list" }, React.Children.map(children, function (child, index) {
|
182 |
|
183 | if (child.type.displayName === 'RfddOption') {
|
184 | return React.cloneElement(child, {
|
185 | onChange: handleChange,
|
186 | onSelectChange: handleSelectChange,
|
187 | optionClassName: optionClassName,
|
188 | optionOnClick: optionOnClick,
|
189 | index: index,
|
190 | hoverStyle: hoverStyle,
|
191 | optionStyle: optionStyle
|
192 | });
|
193 | }
|
194 | return null;
|
195 | })))));
|
196 | };
|
197 | var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4;
|
198 |
|
199 | var Rfdd = function (props) {
|
200 | return (React.createElement(StoreProvider, null,
|
201 | React.createElement(RfddWrap, __assign({}, props), props.children)));
|
202 | };
|
203 |
|
204 | var RfddOptionStyle = {
|
205 | Wrapper: styled__default.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n\t\tcursor: pointer;\n\t\tlist-style: none;\n\t\tpadding: 8px;\n\t\tbox-sizing: border-box;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\tfont-size: 12px;\n\t\tline-height: 12px;\n\t\twidth: 100%;\n\t\theight: 30px;\n\t\ttext-align: left;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&:hover {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: #ffffff;\n\t\t\t", "\n\t\t}\n\t\t", "\n\t"], ["\n\t\tcursor: pointer;\n\t\tlist-style: none;\n\t\tpadding: 8px;\n\t\tbox-sizing: border-box;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\tfont-size: 12px;\n\t\tline-height: 12px;\n\t\twidth: 100%;\n\t\theight: 30px;\n\t\ttext-align: left;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&:hover {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: #ffffff;\n\t\t\t",
|
206 | "\n\t\t}\n\t\t",
|
207 | "\n\t"])), color.keyColor, function (_a) {
|
208 | var hoverStyle = _a.hoverStyle;
|
209 | return styled.css(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n\t\t\t\t", "\n\t\t\t"], ["\n\t\t\t\t", "\n\t\t\t"])), hoverStyle);
|
210 | }, function (_a) {
|
211 | var optionStyle = _a.optionStyle;
|
212 | return styled.css(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n\t\t\t", "\n\t\t"], ["\n\t\t\t", "\n\t\t"])), optionStyle);
|
213 | })
|
214 | };
|
215 | var RfddOption = function (props) {
|
216 | var optionClassName = props.optionClassName, className = props.className, value = props.value, children = props.children, onChange = props.onChange, index = props.index, style = props.style, hoverStyle = props.hoverStyle, optionStyle = props.optionStyle, onClick = props.onClick, optionOnClick = props.optionOnClick, onSelectChange = props.onSelectChange;
|
217 | return (React.createElement(RfddOptionStyle.Wrapper, { className: className && optionClassName
|
218 | ? classes(className, optionClassName)
|
219 | : className || optionClassName || 'rfdd-option', key: "option" + index, "data-testid": "option" + index, onClick: function () {
|
220 | if (onClick) {
|
221 | onClick();
|
222 | }
|
223 | else if (optionOnClick) {
|
224 | optionOnClick();
|
225 | }
|
226 | if (onSelectChange) {
|
227 | var textToString = '';
|
228 | if (children) {
|
229 | textToString = String(children);
|
230 | }
|
231 | else if (typeof children === 'string') {
|
232 | textToString = children;
|
233 | }
|
234 | onSelectChange(textToString);
|
235 | }
|
236 | var valueToString = '';
|
237 | if (value) {
|
238 | valueToString = value.toString();
|
239 | }
|
240 | else if (typeof children === 'string') {
|
241 | valueToString = children;
|
242 | }
|
243 | return onChange && onChange(valueToString);
|
244 | }, style: style, hoverStyle: hoverStyle, optionStyle: optionStyle }, children));
|
245 | };
|
246 | RfddOption.displayName = 'RfddOption';
|
247 | var templateObject_1$3, templateObject_2$2, templateObject_3$1;
|
248 |
|
249 | exports.Rfdd = Rfdd;
|
250 | exports.RfddOption = RfddOption;
|
251 |
|
252 | Object.defineProperty(exports, '__esModule', { value: true });
|
253 |
|
254 | })));
|