@react-pakistan/react-ui-collection
Version:
React UI Collection built upon React Storybook
42 lines (41 loc) • 16.7 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DropDownWrapper = exports.DropDownItem = exports.DropDownItemContainer = exports.DropDownContainer = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
var rc_dropdown_1 = __importDefault(require("rc-dropdown"));
exports.DropDownContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n box-sizing: border-box;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n font-size: 14px;\n min-width: ", ";\n margin: ", ";\n padding: ", ";\n border-radius: ", ";\n border: ", ";\n background-color: ", ";\n font-family: ", ";\n"], ["\n position: relative;\n width: 100%;\n box-sizing: border-box;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n font-size: 14px;\n min-width: ", ";\n margin: ", ";\n padding: ", ";\n border-radius: ", ";\n border: ", ";\n background-color: ", ";\n font-family: ", ";\n"])), function (_a) {
var minWidth = _a.minWidth;
return minWidth || '12em';
}, function (_a) {
var margin = _a.margin;
return margin || '0';
}, function (_a) {
var padding = _a.padding;
return padding || '0.5em 1em';
}, function (_a) {
var borderRadius = _a.borderRadius;
return borderRadius || '0.25em';
}, function (_a) {
var theme = _a.theme;
return "1px solid ".concat(theme.colors.lightGrey);
}, function (_a) {
var theme = _a.theme;
return theme.colors.white;
}, function (_a) {
var theme = _a.theme;
return theme.typography.p1.fontFamily;
});
exports.DropDownItemContainer = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: red;\n display: flex;\n flex-flow: column nowrap;\n justify-content: space-between;\n margin: 0;\n padding: 0;\n position: relative;\n width: 100%;\n"], ["\n align-items: flex-start;\n background-color: red;\n display: flex;\n flex-flow: column nowrap;\n justify-content: space-between;\n margin: 0;\n padding: 0;\n position: relative;\n width: 100%;\n"])));
exports.DropDownItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 0 1 100%;\n font-family: ", ";\n list-style-type: none;\n margin: 0;\n padding: 0;\n"], ["\n flex: 0 1 100%;\n font-family: ", ";\n list-style-type: none;\n margin: 0;\n padding: 0;\n"])), function (_a) {
var theme = _a.theme;
return theme.typography.p1.fontFamily;
});
exports.DropDownWrapper = (0, styled_components_1.default)(rc_dropdown_1.default)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n\n @font-face {\n font-family: 'anticon';\n src: url('//at.alicdn.com/t/font_1434092639_4910953.eot');\n /* IE9*/\n src: url('//at.alicdn.com/t/font_1434092639_4910953.eot?#iefix') format('embedded-opentype'),\n /* IE6-IE8 */ url('//at.alicdn.com/t/font_1434092639_4910953.woff') format('woff'),\n /* chrome\u3001firefox */ url('//at.alicdn.com/t/font_1434092639_4910953.ttf') format('truetype'),\n /* chrome\u3001firefox\u3001opera\u3001Safari, Android, iOS 4.2+*/\n url('//at.alicdn.com/t/font_1434092639_4910953.svg#iconfont') format('svg');\n /* iOS 4.1- */\n }\n .rc-dropdown {\n position: absolute;\n left: -9999px;\n top: -9999px;\n z-index: 1070;\n display: block;\n font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n font-size: 12px;\n font-weight: normal;\n line-height: 1.5;\n }\n .rc-dropdown-hidden {\n display: none;\n }\n .rc-dropdown-menu {\n outline: none;\n position: relative;\n list-style-type: none;\n padding: 0;\n margin: 2px 0 0 0;\n text-align: left;\n background-color: #fff;\n border-radius: 3px;\n box-shadow: 0 1px 5px #ccc;\n background-clip: padding-box;\n border: 1px solid #ccc;\n }\n .rc-dropdown-menu > li {\n margin: 0;\n padding: 0;\n }\n .rc-dropdown-menu:before {\n content: \"\";\n position: absolute;\n top: -4px;\n left: 0;\n width: 100%;\n height: 4px;\n background: #ffffff;\n background: rgba(255, 255, 255, 0.01);\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item {\n position: relative;\n display: block;\n padding: 7px 10px;\n clear: both;\n font-size: 12px;\n font-weight: normal;\n color: #666666;\n white-space: nowrap;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item:hover,\n .rc-dropdown-menu > .rc-dropdown-menu-item-active,\n .rc-dropdown-menu > .rc-dropdown-menu-item-selected {\n background-color: #ebfaff;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item-selected {\n position: relative;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item-selected:after {\n content: 'e613';\n font-family: 'anticon';\n font-weight: bold;\n position: absolute;\n top: 6px;\n right: 16px;\n color: #3CB8F0;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item-disabled {\n color: #ccc;\n cursor: not-allowed;\n pointer-events: none;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item-disabled:hover {\n color: #ccc;\n background-color: #fff;\n cursor: not-allowed;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item:last-child {\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item:first-child {\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item-divider {\n height: 1px;\n margin: 1px 0;\n overflow: hidden;\n background-color: #e5e5e5;\n line-height: 0;\n }\n .rc-dropdown-slide-up-enter,\n .rc-dropdown-slide-up-appear {\n animation-duration: 0.3s;\n animation-fill-mode: both;\n transform-origin: 0 0;\n display: block !important;\n opacity: 0;\n animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n animation-play-state: paused;\n }\n .rc-dropdown-slide-up-leave {\n animation-duration: 0.3s;\n animation-fill-mode: both;\n transform-origin: 0 0;\n display: block !important;\n opacity: 1;\n animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\n animation-play-state: paused;\n }\n .rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-bottomLeft,\n .rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-bottomLeft,\n .rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-bottomCenter,\n .rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-bottomCenter,\n .rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-bottomRight,\n .rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-bottomRight {\n animation-name: rcDropdownSlideUpIn;\n animation-play-state: running;\n }\n .rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-topLeft,\n .rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-topLeft,\n .rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-topCenter,\n .rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-topCenter,\n .rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-topRight,\n .rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-topRight {\n animation-name: rcDropdownSlideDownIn;\n animation-play-state: running;\n }\n .rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-bottomLeft,\n .rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-bottomCenter,\n .rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-bottomRight {\n animation-name: rcDropdownSlideUpOut;\n animation-play-state: running;\n }\n .rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-topLeft,\n .rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-topCenter,\n .rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-topRight {\n animation-name: rcDropdownSlideDownOut;\n animation-play-state: running;\n }\n @keyframes rcDropdownSlideUpIn {\n 0% {\n opacity: 0;\n transform-origin: 0% 0%;\n transform: scaleY(0);\n }\n 100% {\n opacity: 1;\n transform-origin: 0% 0%;\n transform: scaleY(1);\n }\n }\n @keyframes rcDropdownSlideUpOut {\n 0% {\n opacity: 1;\n transform-origin: 0% 0%;\n transform: scaleY(1);\n }\n 100% {\n opacity: 0;\n transform-origin: 0% 0%;\n transform: scaleY(0);\n }\n }\n @keyframes rcDropdownSlideDownIn {\n 0% {\n opacity: 0;\n transform-origin: 0% 100%;\n transform: scaleY(0);\n }\n 100% {\n opacity: 1;\n transform-origin: 0% 100%;\n transform: scaleY(1);\n }\n }\n @keyframes rcDropdownSlideDownOut {\n 0% {\n opacity: 1;\n transform-origin: 0% 100%;\n transform: scaleY(1);\n }\n 100% {\n opacity: 0;\n transform-origin: 0% 100%;\n transform: scaleY(0);\n }\n }\n"], ["\n position: relative;\n\n @font-face {\n font-family: 'anticon';\n src: url('//at.alicdn.com/t/font_1434092639_4910953.eot');\n /* IE9*/\n src: url('//at.alicdn.com/t/font_1434092639_4910953.eot?#iefix') format('embedded-opentype'),\n /* IE6-IE8 */ url('//at.alicdn.com/t/font_1434092639_4910953.woff') format('woff'),\n /* chrome\u3001firefox */ url('//at.alicdn.com/t/font_1434092639_4910953.ttf') format('truetype'),\n /* chrome\u3001firefox\u3001opera\u3001Safari, Android, iOS 4.2+*/\n url('//at.alicdn.com/t/font_1434092639_4910953.svg#iconfont') format('svg');\n /* iOS 4.1- */\n }\n .rc-dropdown {\n position: absolute;\n left: -9999px;\n top: -9999px;\n z-index: 1070;\n display: block;\n font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n font-size: 12px;\n font-weight: normal;\n line-height: 1.5;\n }\n .rc-dropdown-hidden {\n display: none;\n }\n .rc-dropdown-menu {\n outline: none;\n position: relative;\n list-style-type: none;\n padding: 0;\n margin: 2px 0 0 0;\n text-align: left;\n background-color: #fff;\n border-radius: 3px;\n box-shadow: 0 1px 5px #ccc;\n background-clip: padding-box;\n border: 1px solid #ccc;\n }\n .rc-dropdown-menu > li {\n margin: 0;\n padding: 0;\n }\n .rc-dropdown-menu:before {\n content: \"\";\n position: absolute;\n top: -4px;\n left: 0;\n width: 100%;\n height: 4px;\n background: #ffffff;\n background: rgba(255, 255, 255, 0.01);\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item {\n position: relative;\n display: block;\n padding: 7px 10px;\n clear: both;\n font-size: 12px;\n font-weight: normal;\n color: #666666;\n white-space: nowrap;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item:hover,\n .rc-dropdown-menu > .rc-dropdown-menu-item-active,\n .rc-dropdown-menu > .rc-dropdown-menu-item-selected {\n background-color: #ebfaff;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item-selected {\n position: relative;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item-selected:after {\n content: '\\e613';\n font-family: 'anticon';\n font-weight: bold;\n position: absolute;\n top: 6px;\n right: 16px;\n color: #3CB8F0;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item-disabled {\n color: #ccc;\n cursor: not-allowed;\n pointer-events: none;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item-disabled:hover {\n color: #ccc;\n background-color: #fff;\n cursor: not-allowed;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item:last-child {\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item:first-child {\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n }\n .rc-dropdown-menu > .rc-dropdown-menu-item-divider {\n height: 1px;\n margin: 1px 0;\n overflow: hidden;\n background-color: #e5e5e5;\n line-height: 0;\n }\n .rc-dropdown-slide-up-enter,\n .rc-dropdown-slide-up-appear {\n animation-duration: 0.3s;\n animation-fill-mode: both;\n transform-origin: 0 0;\n display: block !important;\n opacity: 0;\n animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n animation-play-state: paused;\n }\n .rc-dropdown-slide-up-leave {\n animation-duration: 0.3s;\n animation-fill-mode: both;\n transform-origin: 0 0;\n display: block !important;\n opacity: 1;\n animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\n animation-play-state: paused;\n }\n .rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-bottomLeft,\n .rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-bottomLeft,\n .rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-bottomCenter,\n .rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-bottomCenter,\n .rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-bottomRight,\n .rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-bottomRight {\n animation-name: rcDropdownSlideUpIn;\n animation-play-state: running;\n }\n .rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-topLeft,\n .rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-topLeft,\n .rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-topCenter,\n .rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-topCenter,\n .rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-topRight,\n .rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-topRight {\n animation-name: rcDropdownSlideDownIn;\n animation-play-state: running;\n }\n .rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-bottomLeft,\n .rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-bottomCenter,\n .rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-bottomRight {\n animation-name: rcDropdownSlideUpOut;\n animation-play-state: running;\n }\n .rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-topLeft,\n .rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-topCenter,\n .rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-topRight {\n animation-name: rcDropdownSlideDownOut;\n animation-play-state: running;\n }\n @keyframes rcDropdownSlideUpIn {\n 0% {\n opacity: 0;\n transform-origin: 0% 0%;\n transform: scaleY(0);\n }\n 100% {\n opacity: 1;\n transform-origin: 0% 0%;\n transform: scaleY(1);\n }\n }\n @keyframes rcDropdownSlideUpOut {\n 0% {\n opacity: 1;\n transform-origin: 0% 0%;\n transform: scaleY(1);\n }\n 100% {\n opacity: 0;\n transform-origin: 0% 0%;\n transform: scaleY(0);\n }\n }\n @keyframes rcDropdownSlideDownIn {\n 0% {\n opacity: 0;\n transform-origin: 0% 100%;\n transform: scaleY(0);\n }\n 100% {\n opacity: 1;\n transform-origin: 0% 100%;\n transform: scaleY(1);\n }\n }\n @keyframes rcDropdownSlideDownOut {\n 0% {\n opacity: 1;\n transform-origin: 0% 100%;\n transform: scaleY(1);\n }\n 100% {\n opacity: 0;\n transform-origin: 0% 100%;\n transform: scaleY(0);\n }\n }\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;