UNPKG

12 kBJavaScriptView Raw
1var ReactFreeDropDown=function(t,O,e){"use strict";"default"in O&&O.default;var n="default"in e?e.default:e,F=function(){return(F=Object.assign||function(t){for(var n,e=1,o=arguments.length;e<o;e++)for(var r in n=arguments[e])Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r]);return t}).apply(this,arguments)};function o(t,n){return Object.defineProperty?Object.defineProperty(t,"raw",{value:n}):t.raw=n,t}var r,E,i,l=e.createGlobalStyle(r=r||o(['\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'])),a={isFocus:!1};function s(t,n){switch(n.type){case E.IS_FOCUS:return F(F({},t),{isFocus:n.isFocus});case E.ON_BLUR:return F(F({},t),{isFocus:!1});default:return t}}(i=E=E||{}).IS_FOCUS="IS_FOCUS",i.ON_BLUR="ON_BLUR";var c=O.createContext(void 0),d=O.createContext(void 0);function R(){var t=O.useContext(c);if(!t)throw new Error("StatusChangeStateContext not found");return t}function I(){var t=O.useContext(d);if(!t)throw new Error("StatusChangeDispatchContext not found");return t}function p(t){var n=t.children,e=O.useReducer(s,a),o=e[0],r=e[1];return O.createElement(d.Provider,{value:r},O.createElement(c.Provider,{value:o},n))}function b(t){var n=t.children;return O.createElement(O.Fragment,null,O.createElement(l,null),O.createElement(p,null,n))}function u(t){return"light"===t}function U(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return t.filter(function(t){return t}).join(" ")}function _(t){var n=t.focusStyle,e=t.selectClassName,o=t.selectStyle,r=t.isValue,i=t.mode,l=t.value,a=t.icon,s=t.hiddenIcon,c=R().isFocus,d=I();return O.createElement(G.Wrapper,{className:e||"rfdd-select",style:c&&n?F(F({},o),n):o,onClick:function(){return d({type:E.IS_FOCUS,isFocus:!c})},isValue:r,mode:i,id:"select","data-testid":"select"},O.createElement("span",{"data-testid":"select-text"},l),!s&&O.createElement(G.Icon,{isFocus:c},O.createElement("img",{src:a||"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",alt:"default arrow icon"})))}function g(t){function e(t){u&&u(t),z({type:E.ON_BLUR})}function o(t){S(t),z({type:E.ON_BLUR})}var n=t.children,r=t.selectClassName,i=t.optionOnClick,l=t.optionClassName,a=t.className,s=t.style,c=t.focusStyle,d=t.selectStyle,p=t.hoverStyle,b=t.optionStyle,u=t.onChange,g=t.value,x=t.mode,f=void 0===x?"light":x,h=t.icon,m=t.hiddenIcon,v=t.placeholder,w=void 0===v?"":v,y=O.useState(""),k=y[0],S=y[1],C=R().isFocus,z=I(),N=""!==g||""!==k;return O.createElement(A.Wrapper,{tabIndex:0,onBlur:function(){return z({type:E.ON_BLUR})},"data-testid":"rfdd",className:a?U("rfdd",a):"rfdd",style:F({},s)},O.createElement(_,{selectClassName:r,focusStyle:c,selectStyle:d,isValue:N,mode:f,value:k||w,icon:h,hiddenIcon:m}),n&&O.createElement(A.Ul,{isFocus:C,mode:f,id:"list","data-testid":"list"},O.Children.map(n,function(t,n){return"RfddOption"===t.type.displayName?O.cloneElement(t,{onChange:e,onSelectChange:o,optionClassName:l,optionOnClick:i,index:n,hoverStyle:p,optionStyle:b}):null})))}function x(t){var n=t.optionClassName,e=t.className,o=t.value,r=t.children,i=t.onChange,l=t.index,a=t.style,s=t.hoverStyle,c=t.optionStyle,d=t.onClick,p=t.optionOnClick,b=t.onSelectChange;return O.createElement(D.Wrapper,{className:e&&n?U(e,n):e||n||"rfdd-option",key:"option"+l,"data-testid":"option"+l,onClick:function(){if(d?d():p&&p(),b){var t="";r?t=String(r):"string"==typeof r&&(t=r),b(t)}var n="";return o?n=o.toString():"string"==typeof r&&(n=r),i&&i(n)},style:a,hoverStyle:s,optionStyle:c},r)}var f,h,m,v,w,y,k,S,C,z="#1076de",N="rgba(245,245,245,0.8)",B="rgb(220,220,220)",L="rgba(51,51,51,0.8)",P="rgb(0,0,0,0.8)",V="rgb(255,255,255,0.8)",W="#fff",j="#000",G={Wrapper:n.div(f=f||o(["\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: ",";\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(t){var n=t.mode;return u(n)?W:P},function(t){var n=t.mode;return u(n)?L:N},function(t){var n=t.mode;return u(n)?j:W},function(t){var n=t.mode;return u(n)?B:P}),Icon:n.div(h=h||o(["\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(t){return t.isFocus?"rotate(180deg)":"rotate(0deg)"})},A={Wrapper:n.div(m=m||o(["\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:n.ul(y=y||o(["\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",";\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(t){var n=t.mode;return u(n)?e.css(v=v||o(["\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"]),V):e.css(w=w||o(["\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"]),P,W)},function(t){return t.isFocus?"100px":"0"},function(t){return t.isFocus?"overflow-y: auto":"overflow: hidden"})},D={Wrapper:n.div(C=C||o(["\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"]),z,function(t){var n=t.hoverStyle;return e.css(k=k||o(["\n\t\t\t\t","\n\t\t\t"],["\n\t\t\t\t","\n\t\t\t"]),n)},function(t){var n=t.optionStyle;return e.css(S=S||o(["\n\t\t\t","\n\t\t"],["\n\t\t\t","\n\t\t"]),n)})};return x.displayName="RfddOption",t.Rfdd=function(t){return O.createElement(b,null,O.createElement(g,F({},t),t.children))},t.RfddOption=x,t}({},React,styled);