react-free-dropdown
Version:
Easy custom dropdown list with React
255 lines (234 loc) • 22 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components'], factory) :
(global = global || self, factory(global.ReactFreeCustomDropDown = {}, global.React, global.styled));
}(this, (function (exports, React, styled) { 'use strict';
var React__default = 'default' in React ? React['default'] : React;
var styled__default = 'default' in styled ? styled['default'] : styled;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
}
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"])));
var templateObject_1;
var statusChangeState = {
isFocus: false
};
var StatusChangeActionType;
(function (StatusChangeActionType) {
StatusChangeActionType["IS_FOCUS"] = "IS_FOCUS";
StatusChangeActionType["ON_BLUR"] = "ON_BLUR";
})(StatusChangeActionType || (StatusChangeActionType = {}));
function statusChangeReducer(state, action) {
switch (action.type) {
case StatusChangeActionType.IS_FOCUS:
return __assign(__assign({}, state), { isFocus: action.isFocus });
case StatusChangeActionType.ON_BLUR:
return __assign(__assign({}, state), { isFocus: false });
default:
return state;
}
}
var StatusChangeStateContext = React.createContext(undefined);
var StatusChangeDispatchContext = React.createContext(undefined);
function useStatusChangeState() {
var state = React.useContext(StatusChangeStateContext);
if (!state)
throw new Error('StatusChangeStateContext not found');
return state;
}
function useStatusChangeDispatch() {
var dispatch = React.useContext(StatusChangeDispatchContext);
if (!dispatch)
throw new Error('StatusChangeDispatchContext not found');
return dispatch;
}
var StatusChangeContextProvider = function (_a) {
var children = _a.children;
var _b = React.useReducer(statusChangeReducer, statusChangeState), state = _b[0], dispatch = _b[1];
return (React.createElement(StatusChangeDispatchContext.Provider, { value: dispatch },
React.createElement(StatusChangeStateContext.Provider, { value: state }, children)));
};
var StoreProvider = function (_a) {
var children = _a.children;
return (React.createElement(React.Fragment, null,
React.createElement(GlobalStyle, null),
React.createElement(StatusChangeContextProvider, null, children)));
};
var color = {
keyColor: '#1076de',
lightGray: 'rgb(240,240,240)',
opacityLightGray: 'rgba(245,245,245,0.8)',
gray: 'rgb(220,220,220)',
darkGray: '#333',
opacityDarkGray: 'rgba(51,51,51,0.8)',
dark: 'rgb(0,0,0,0.8)',
light: 'rgb(255,255,255,0.8)',
white: '#fff',
black: '#000'
};
var isLightMode = function (mode) { return mode === 'light'; };
var classes = function () {
var arg = [];
for (var _i = 0; _i < arguments.length; _i++) {
arg[_i] = arguments[_i];
}
return arg.filter(function (a) { return a; }).join(' ');
};
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";
var RfddSelectStyle = {
Wrapper: styled__default.div(templateObject_3 || (templateObject_3 = __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\t", "\n\t\ttransition: color 0.3s;\n\t\t&:hover {\n\t\t\tcolor: ", ";\n\t\t}\n\t\tfont-size: 12px;\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\t",
"\n\t\ttransition: color 0.3s;\n\t\t&:hover {\n\t\t\tcolor: ", ";\n\t\t}\n\t\tfont-size: 12px;\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) {
var mode = _a.mode;
return isLightMode(mode)
? styled.css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n\t\t\t\t\t\tborder: 1px solid ", ";\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t "], ["\n\t\t\t\t\t\tborder: 1px solid ", ";\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t "])), color.gray, color.white, color.opacityDarkGray) : styled.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\t\t\t\tborder: 1px solid ", ";\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t "], ["\n\t\t\t\t\t\tborder: 1px solid ", ";\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t "])), color.dark, color.dark, color.opacityLightGray);
}, function (_a) {
var mode = _a.mode;
return (isLightMode(mode) ? color.black : color.white);
}),
Icon: styled__default.div(templateObject_4 || (templateObject_4 = __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) {
var isFocus = _a.isFocus;
return (isFocus ? 'rotate(180deg)' : 'rotate(0deg)');
})
};
var RfddSelect = function (props) {
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;
var isFocus = useStatusChangeState().isFocus;
var statusChangeDispatch = useStatusChangeDispatch();
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" },
React.createElement("span", { "data-testid": "select-text" }, value),
!hiddenIcon && (React.createElement(RfddSelectStyle.Icon, { isFocus: isFocus },
React.createElement("img", { src: icon || img, alt: "default arrow icon" })))));
};
var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4;
var RfddStyle = {
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"]))),
Ul: styled__default.ul(templateObject_6 || (templateObject_6 = __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\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",
";\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\t",
";\n\t"])), function (_a) {
var mode = _a.mode;
if (isLightMode(mode)) {
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);
}
return styled.css(templateObject_3$1 || (templateObject_3$1 = __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);
}, function (_a) {
var isFocus = _a.isFocus, listStyle = _a.listStyle;
return isFocus
? styled.css(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n\t\t\t\t\t\tmax-height: 100px;\n\t\t\t\t\t\toverflow-y: auto;\n\t\t\t\t\t\t", "\n\t\t\t\t "], ["\n\t\t\t\t\t\tmax-height: 100px;\n\t\t\t\t\t\toverflow-y: auto;\n\t\t\t\t\t\t", "\n\t\t\t\t "])), listStyle) : styled.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\t\t\t\tmax-height: 0;\n\t\t\t\t\t\toverflow: hidden;\n\t\t\t\t "], ["\n\t\t\t\t\t\tmax-height: 0;\n\t\t\t\t\t\toverflow: hidden;\n\t\t\t\t "])));
})
};
var RfddWrap = function (props) {
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, _c = props.listStyle, listStyle = _c === void 0 ? '' : _c;
var _d = React.useState(''), selectValue = _d[0], setSelectValue = _d[1];
var isFocus = useStatusChangeState().isFocus;
var statusChangeDispatch = useStatusChangeDispatch();
var handleChange = function (optionValue) {
if (onChange) {
onChange(optionValue);
}
statusChangeDispatch({ type: StatusChangeActionType.ON_BLUR });
};
var handleSelectChange = function (optionStr) {
setSelectValue(optionStr);
statusChangeDispatch({ type: StatusChangeActionType.ON_BLUR });
};
React.useEffect(function () {
if (typeof value === 'string') {
setSelectValue(value);
}
}, [value]);
var isValue = value !== '' || selectValue !== '';
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) },
React.createElement(RfddSelect, { selectClassName: selectClassName, focusStyle: focusStyle, selectStyle: selectStyle, isValue: isValue, mode: mode, value: selectValue || placeholder, icon: icon, hiddenIcon: hiddenIcon }),
children && (React.createElement(RfddStyle.Ul, { isFocus: isFocus, mode: mode, id: "list", "data-testid": "list", listStyle: listStyle }, React.Children.map(children, function (child, index) {
// Render when RfddOption is enabled only
if (child.type.displayName === 'RfddOption') {
return React.cloneElement(child, {
onChange: handleChange,
onSelectChange: handleSelectChange,
optionClassName: optionClassName,
optionOnClick: optionOnClick,
index: index,
hoverStyle: hoverStyle,
optionStyle: optionStyle
});
}
return null;
})))));
};
var templateObject_1$2, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5, templateObject_6;
var Rfdd = function (props) {
return (React.createElement(StoreProvider, null,
React.createElement(RfddWrap, __assign({}, props), props.children)));
};
var RfddOptionStyle = {
Wrapper: styled__default.div(templateObject_3$2 || (templateObject_3$2 = __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",
"\n\t\t}\n\t\t",
"\n\t"])), color.keyColor, function (_a) {
var hoverStyle = _a.hoverStyle;
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);
}, function (_a) {
var optionStyle = _a.optionStyle;
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);
})
};
var RfddOption = function (props) {
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;
return (React.createElement(RfddOptionStyle.Wrapper, { className: className && optionClassName
? classes(className, optionClassName)
: className || optionClassName || 'rfdd-option', key: "option" + index, "data-testid": "option" + index, onClick: function () {
if (onClick) {
onClick();
}
else if (optionOnClick) {
optionOnClick();
}
if (onSelectChange) {
var textToString = '';
if (children) {
textToString = String(children);
}
else if (typeof children === 'string') {
textToString = children;
}
onSelectChange(textToString);
}
var valueToString = '';
if (value) {
valueToString = value.toString();
}
else if (typeof children === 'string') {
valueToString = children;
}
return onChange && onChange(valueToString);
}, style: style, hoverStyle: hoverStyle, optionStyle: optionStyle }, children));
};
RfddOption.displayName = 'RfddOption';
var templateObject_1$3, templateObject_2$2, templateObject_3$2;
exports.Rfdd = Rfdd;
exports.RfddOption = RfddOption;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=react-free-dropdown.js.map