@fdmg/fd-my-interests
Version:
FD-themed my interests
1 lines • 13.9 kB
JavaScript
module.exports=function(n){var e={};function t(l){if(e[l])return e[l].exports;var a=e[l]={i:l,l:!1,exports:{}};return n[l].call(a.exports,a,a.exports,t),a.l=!0,a.exports}return t.m=n,t.c=e,t.d=function(n,e,l){t.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:l})},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.t=function(n,e){if(1&e&&(n=t(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var l=Object.create(null);if(t.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var a in n)t.d(l,a,function(e){return n[e]}.bind(null,a));return l},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.p="",t(t.s=0)}([function(n,e,t){n.exports=t(1)},function(n,e,t){"use strict";var l=this&&this.__makeTemplateObject||function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},a=this&&this.__importStar||function(n){if(n&&n.__esModule)return n;var e={};if(null!=n)for(var t in n)Object.hasOwnProperty.call(n,t)&&(e[t]=n[t]);return e.default=n,e};Object.defineProperty(e,"__esModule",{value:!0});var r=a(t(2)),o=t(3),i=a(t(4)),s=a(t(5)),d=t(6);e.default=function(n){var e=r.useState(""),t=e[0],l=e[1],a=r.useState(!1),o=a[0],c=a[1],u=r.useState(!0),f=u[0],p=u[1],y=function(e){var t=e.currentTarget;"true"===t.getAttribute("data-selected")?n.onUnfollowClick(t.getAttribute("data-tag")):n.onFollowClick(t.getAttribute("data-tag"))},x=function(e){var t=e.currentTarget;n.onEnableAlertClick(t.getAttribute("data-tag"))},g=function(e){var t=e.currentTarget;n.onDisableAlertClick(t.getAttribute("data-tag"))},h=function(){p(!f)};return r.default.createElement(r.default.Fragment,null,r.default.createElement(m,null),r.default.createElement(s.default,{cardStyle:n.cardStyle,className:"fd-my-interests"+(n.className?" "+n.className:"")+(o?" show-all":"")},r.default.createElement(i.default,{className:"fd-my-interests-h",textStyle:"card-h"},r.default.createElement("h3",null,r.default.createElement("span",null,n.title?n.title:"Onderwerpen aanpassen")," ",f?r.default.createElement("i",{className:"icon-chevron-up",onClick:h}):r.default.createElement("i",{className:"icon-chevron-down",onClick:h}))),f?r.default.createElement("div",{className:"content"},r.default.createElement("div",{className:"fd-my-interests-controls"},r.default.createElement("div",{className:"fd-my-interests-input"},r.default.createElement("input",{type:"text",placeholder:"Nieuw onderwerp...",onChange:function(n){l(n.currentTarget.value)},value:t,onKeyUp:function(e){13===e.keyCode&&(l(""),n.onAddInterest&&n.onAddInterest(e.currentTarget.value))}})," ",r.default.createElement(d.AddButton,{buttonStyle:"persoonlijk"===n.cardStyle?n.cardStyle:"default",onClick:function(){n.onAddInterest&&n.onAddInterest(t),l("")}},"Toevoegen"))),r.default.createElement("ul",null,n.interests.map(function(e,t){return t>4?null:r.default.createElement("li",{key:e.uuid},r.default.createElement("div",{className:"interest-container"+(e.selected?" selected":"")},r.default.createElement("a",{href:""+(e.link?e.link:"/tag/"+e.tag),title:e.tag},e.tag),r.default.createElement("span",{className:"interest-controls"},r.default.createElement("span",{className:"alert"+(e.alertSelected?" selected":""),"data-addurl":e.addAlertLink?e.addAlertLink:"/add-alert","data-deleteurl":e.addAlertLink?e.addAlertLink:"/add-alert"},r.default.createElement("i",{className:"default-icon icon-bell","data-tag":e.tag,onClick:x}),r.default.createElement("i",{className:"active-icon icon-bell1","data-tag":e.tag,onClick:g})),r.default.createElement(d.FollowButton,{buttonStyle:"persoonlijk"===n.cardStyle?n.cardStyle:"default",onClick:y,tag:e.tag,selected:e.selected,followLink:e.addInterestLink,unFollowLink:e.deleteInterestLink,followButtonText:e.buttonText,unFollowButtonText:e.activeButtonText}))))})),n.interests.length>4?r.default.createElement(r.default.Fragment,null,r.default.createElement("ul",{className:"optional-content"},n.interests.map(function(e,t){return t<=4?null:r.default.createElement("li",{key:e.uuid},r.default.createElement("div",{className:"interest-container"+(e.selected?" selected":"")},r.default.createElement("a",{href:""+(e.link?e.link:"/tag/"+e.tag),title:e.tag},e.tag),r.default.createElement("span",{className:"interest-controls"},r.default.createElement("span",{className:"alert"+(e.alertSelected?" selected":""),"data-addurl":e.addAlertLink?e.addAlertLink:"/add-alert","data-deleteurl":e.addAlertLink?e.addAlertLink:"/add-alert"},r.default.createElement("i",{className:"default-icon icon-bell","data-tag":e.tag,onClick:x}),r.default.createElement("i",{className:"active-icon icon-bell1","data-tag":e.tag,onClick:g})),r.default.createElement(d.FollowButton,{buttonStyle:"persoonlijk"===n.cardStyle?n.cardStyle:"default",onClick:y,tag:e.tag,selected:e.selected,followLink:e.addInterestLink,unFollowLink:e.deleteInterestLink,followButtonText:e.buttonText,unFollowButtonText:e.activeButtonText}))))})),r.default.createElement("span",{className:"show-less",onClick:function(){c(!1)}},r.default.createElement("i",{className:"icon-chevron-up"}),r.default.createElement("div",null,"Toon minder")),r.default.createElement("span",{className:"show-more",onClick:function(){c(!0)}},r.default.createElement("div",null,"Toon meer"),r.default.createElement("i",{className:"icon-chevron-down"}))):null):null))};var c=o.css(u||(u=l(["\n.fd-my-interests {\n display: flex;\n flex-direction: column;\n\n .card-h.fd-my-interests-h,\n ul {\n padding: 12px 10px;\n @media only screen and (min-width: 641px) {\n padding: 12px;\n }\n @media only screen and (min-width: 861px) {\n padding: 12px 15px;\n }\n }\n\n h3.fd-my-interests-h {\n min-height: 20px;\n display: flex;\n align-items: center;\n }\n h3.fd-my-interests-h > span {\n flex: 1 1 auto;\n }\n\n\n .icon-chevron-up,\n .icon-chevron-down {\n cursor: pointer;\n color: #677381;\n user-select: none;\n @media only screen and (min-width: 641px) {\n display: none;\n }\n }\n\n .fd-my-interests-controls,\n ul {\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n .fd-my-interests-controls {\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n }\n .fd-my-interests-input {\n display: flex;\n margin: 10px;\n justify-content: space-between;\n height: 30px;\n input {\n flex: 1 1 auto;\n border: 0;\n background: transparent;\n outline: none;\n font-family: 'ProximaNovaRegular', sans-serif;\n font-size: 1rem;\n @media only screen and (min-width: 641px) {\n font-size: 1.0625rem;\n }\n }\n }\n\n li {\n display: inline-block;\n width: 100%;\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n > div {\n margin: 10px;\n display: flex;\n position: relative;\n height: 30px;\n }\n }\n\n .interest-container a {\n flex-grow: 1;\n position: relative;\n top: 5px;\n color: #191919;\n &:hover {\n color: #49a4a2;\n }\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-decoration: none;\n font-family: 'ProximaNovaRegular', Helvetica, sans-serif;\n }\n\n .interest-controls {\n display: flex;\n justify-content: flex-end;\n flex: 0 0 140px;\n\n .alert {\n margin-right: .5rem;\n color: #677381;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n i {\n display: none;\n cursor: pointer;\n }\n }\n }\n\n .interest-container.selected {\n .default-icon {\n display: inline;\n }\n }\n\n .alert.selected {\n .default-icon {\n display: none;\n }\n .active-icon {\n display: inline;\n }\n }\n\n .show-less,\n .optional-content {\n display: none;\n }\n\n .show-more {\n display: flex;\n }\n\n &.show-all {\n .show-less {\n display: flex;\n }\n .optional-content {\n display: block;\n }\n .show-more {\n display: none;\n }\n }\n\n .show-more, .show-less {\n border-top: 1px solid rgba(0,0,0,0.1);\n flex-direction: column;\n justify-content: center;\n cursor: pointer;\n padding: .5rem;\n font-family: 'ProximaNovaRegular',Helvetica,sans-serif;\n font-size: 1rem;\n @media only screen and (min-width: 641px) {\n font-size: 1.0625rem;\n }\n &:hover {\n background: rgba(0, 0, 0, 0.04);\n }\n div {\n text-align: center;\n }\n i {\n color: #677381;\n display: flex;\n align-content: center;\n justify-content: center;\n }\n }\n}\n"],["\n.fd-my-interests {\n display: flex;\n flex-direction: column;\n\n .card-h.fd-my-interests-h,\n ul {\n padding: 12px 10px;\n @media only screen and (min-width: 641px) {\n padding: 12px;\n }\n @media only screen and (min-width: 861px) {\n padding: 12px 15px;\n }\n }\n\n h3.fd-my-interests-h {\n min-height: 20px;\n display: flex;\n align-items: center;\n }\n h3.fd-my-interests-h > span {\n flex: 1 1 auto;\n }\n\n\n .icon-chevron-up,\n .icon-chevron-down {\n cursor: pointer;\n color: #677381;\n user-select: none;\n @media only screen and (min-width: 641px) {\n display: none;\n }\n }\n\n .fd-my-interests-controls,\n ul {\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n .fd-my-interests-controls {\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n }\n .fd-my-interests-input {\n display: flex;\n margin: 10px;\n justify-content: space-between;\n height: 30px;\n input {\n flex: 1 1 auto;\n border: 0;\n background: transparent;\n outline: none;\n font-family: 'ProximaNovaRegular', sans-serif;\n font-size: 1rem;\n @media only screen and (min-width: 641px) {\n font-size: 1.0625rem;\n }\n }\n }\n\n li {\n display: inline-block;\n width: 100%;\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n > div {\n margin: 10px;\n display: flex;\n position: relative;\n height: 30px;\n }\n }\n\n .interest-container a {\n flex-grow: 1;\n position: relative;\n top: 5px;\n color: #191919;\n &:hover {\n color: #49a4a2;\n }\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-decoration: none;\n font-family: 'ProximaNovaRegular', Helvetica, sans-serif;\n }\n\n .interest-controls {\n display: flex;\n justify-content: flex-end;\n flex: 0 0 140px;\n\n .alert {\n margin-right: .5rem;\n color: #677381;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n i {\n display: none;\n cursor: pointer;\n }\n }\n }\n\n .interest-container.selected {\n .default-icon {\n display: inline;\n }\n }\n\n .alert.selected {\n .default-icon {\n display: none;\n }\n .active-icon {\n display: inline;\n }\n }\n\n .show-less,\n .optional-content {\n display: none;\n }\n\n .show-more {\n display: flex;\n }\n\n &.show-all {\n .show-less {\n display: flex;\n }\n .optional-content {\n display: block;\n }\n .show-more {\n display: none;\n }\n }\n\n .show-more, .show-less {\n border-top: 1px solid rgba(0,0,0,0.1);\n flex-direction: column;\n justify-content: center;\n cursor: pointer;\n padding: .5rem;\n font-family: 'ProximaNovaRegular',Helvetica,sans-serif;\n font-size: 1rem;\n @media only screen and (min-width: 641px) {\n font-size: 1.0625rem;\n }\n &:hover {\n background: rgba(0, 0, 0, 0.04);\n }\n div {\n text-align: center;\n }\n i {\n color: #677381;\n display: flex;\n align-content: center;\n justify-content: center;\n }\n }\n}\n"])));e.MyInterestsStyle=o.css(f||(f=l(["\n","\n","\n","\n","\n","\n"],["\n","\n","\n","\n","\n","\n"])),s.CardStyle,i.getAllTextStyles(["card-h"]),d.AddButtonStyle,d.FollowButtonStyle,c);var u,f,p,m=o.createGlobalStyle(p||(p=l(["",""],["",""])),e.MyInterestsStyle)},function(n,e){n.exports=require("react")},function(n,e){n.exports=require("styled-components")},function(n,e){n.exports=require("@fdmg/fd-typography")},function(n,e){n.exports=require("@fdmg/fd-card")},function(n,e){n.exports=require("@fdmg/fd-buttons")}]);