code7-leia 0.1.6 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/code7-leia.cjs.development.js +21 -3
- package/dist/code7-leia.cjs.development.js.map +1 -1
- package/dist/code7-leia.cjs.production.min.js +1 -1
- package/dist/code7-leia.cjs.production.min.js.map +1 -1
- package/dist/code7-leia.esm.js +21 -3
- package/dist/code7-leia.esm.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/utils/getLanguage.d.ts +6 -0
- package/package.json +1 -1
- package/src/Leia.tsx +5 -3
- package/src/index.tsx +1 -0
- package/src/utils/getLanguage.tsx +23 -0
|
@@ -92,12 +92,30 @@ Tabs.propTypes = {
|
|
|
92
92
|
onChange: PropTypes.func.isRequired
|
|
93
93
|
};
|
|
94
94
|
|
|
95
|
+
var getLanguage = function getLanguage(language) {
|
|
96
|
+
var languages = {
|
|
97
|
+
en: {
|
|
98
|
+
files: 'Files',
|
|
99
|
+
test: 'Test'
|
|
100
|
+
},
|
|
101
|
+
'pt-br': {
|
|
102
|
+
files: 'Arquivos',
|
|
103
|
+
test: 'Teste'
|
|
104
|
+
},
|
|
105
|
+
es: {
|
|
106
|
+
files: 'Archivos',
|
|
107
|
+
test: 'Prueba'
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
return languages[language] || languages['pt-br'];
|
|
111
|
+
};
|
|
112
|
+
|
|
95
113
|
var Leia = function Leia(props) {
|
|
96
114
|
var match = reactRouterDom.useRouteMatch();
|
|
97
115
|
var _useLocation = reactRouterDom.useLocation(),
|
|
98
116
|
pathname = _useLocation.pathname;
|
|
99
117
|
var history = reactRouterDom.useHistory();
|
|
100
|
-
|
|
118
|
+
var t = getLanguage(props.language);
|
|
101
119
|
var activeTab = React.useMemo(function () {
|
|
102
120
|
return pathname.split('/')[5] || 'files';
|
|
103
121
|
}, [pathname]);
|
|
@@ -108,9 +126,9 @@ var Leia = function Leia(props) {
|
|
|
108
126
|
}
|
|
109
127
|
}, React__default.createElement(Tab$1, {
|
|
110
128
|
value: "files"
|
|
111
|
-
},
|
|
129
|
+
}, t.files), React__default.createElement(Tab$1, {
|
|
112
130
|
value: "test"
|
|
113
|
-
},
|
|
131
|
+
}, t.test));
|
|
114
132
|
};
|
|
115
133
|
|
|
116
134
|
function Code7(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code7-leia.cjs.development.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n children: ReactNode;\n}\n\ninterface OptionProps {\n children: ReactNode;\n onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n width: max-content;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n padding: 12px;\n color: var(--neutral-3);\n font-size: 0.875rem;\n font-weight: normal;\n position: relative;\n cursor: pointer;\n\n svg {\n fill: var(--neutral-3) !important;\n margin-left: 8px;\n }\n\n &.active {\n color: var(--primary-700-light);\n\n svg {\n fill: var(--primary-700-light) !important;\n }\n\n ::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: var(--primary-700-light);\n }\n }\n\n &:not(:last-child) {\n margin-right: 8px;\n }\n`;\n\nexport const DropdownContainer = styled.div`\n position: absolute;\n left: 0px;\n top: 40px;\n display: flex;\n flex-direction: column;\n\n background: #ffffff;\n\n border: 1px solid #979aa5;\n box-sizing: border-box;\n box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n 0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n border-radius: 4px;\n padding: 8px;\n z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n padding: 8px;\n font-size: 14px;\n border-radius: 4px;\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n background-color: var(--primary-800-light);\n color: white;\n }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n children: ReactNode;\n active?: boolean;\n}\n\ninterface ITabsProps {\n children: ReactNode;\n value: string | number;\n onChange: (e: any) => void;\n active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n return (\n <S.Tab className={cc({ active })} {...rest}>\n {children}\n </S.Tab>\n );\n};\n\nTab.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.element,\n PropTypes.node,\n ]).isRequired,\n onChange: PropTypes.func,\n value: PropTypes.string,\n active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n onChange: () => {},\n value: '',\n active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n const children = React.Children.map(childrenProp, (child) => {\n if (!React.isValidElement(child)) {\n return null;\n }\n\n if (Array.isArray(child.props?.children)) {\n return React.cloneElement(child as React.ReactElement<any>, {\n active: child.props?.value === value,\n value,\n onChange,\n });\n }\n\n return React.cloneElement(child as React.ReactElement<any>, {\n active: child.props?.value === value,\n onClick: () => onChange(child.props?.value),\n });\n });\n\n return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n children: PropTypes.node.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n onChange: PropTypes.func.isRequired,\n};\n","import React, { useMemo } from 'react';\n\nimport { useLocation, useRouteMatch, useHistory } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nexport const Leia = (props: Props) => {\n const match = useRouteMatch();\n const { pathname } = useLocation();\n const history = useHistory();\n\n
|
|
1
|
+
{"version":3,"file":"code7-leia.cjs.development.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/utils/getLanguage.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n children: ReactNode;\n}\n\ninterface OptionProps {\n children: ReactNode;\n onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n width: max-content;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n padding: 12px;\n color: var(--neutral-3);\n font-size: 0.875rem;\n font-weight: normal;\n position: relative;\n cursor: pointer;\n\n svg {\n fill: var(--neutral-3) !important;\n margin-left: 8px;\n }\n\n &.active {\n color: var(--primary-700-light);\n\n svg {\n fill: var(--primary-700-light) !important;\n }\n\n ::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: var(--primary-700-light);\n }\n }\n\n &:not(:last-child) {\n margin-right: 8px;\n }\n`;\n\nexport const DropdownContainer = styled.div`\n position: absolute;\n left: 0px;\n top: 40px;\n display: flex;\n flex-direction: column;\n\n background: #ffffff;\n\n border: 1px solid #979aa5;\n box-sizing: border-box;\n box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n 0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n border-radius: 4px;\n padding: 8px;\n z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n padding: 8px;\n font-size: 14px;\n border-radius: 4px;\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n background-color: var(--primary-800-light);\n color: white;\n }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n children: ReactNode;\n active?: boolean;\n}\n\ninterface ITabsProps {\n children: ReactNode;\n value: string | number;\n onChange: (e: any) => void;\n active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n return (\n <S.Tab className={cc({ active })} {...rest}>\n {children}\n </S.Tab>\n );\n};\n\nTab.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.element,\n PropTypes.node,\n ]).isRequired,\n onChange: PropTypes.func,\n value: PropTypes.string,\n active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n onChange: () => {},\n value: '',\n active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n const children = React.Children.map(childrenProp, (child) => {\n if (!React.isValidElement(child)) {\n return null;\n }\n\n if (Array.isArray(child.props?.children)) {\n return React.cloneElement(child as React.ReactElement<any>, {\n active: child.props?.value === value,\n value,\n onChange,\n });\n }\n\n return React.cloneElement(child as React.ReactElement<any>, {\n active: child.props?.value === value,\n onClick: () => onChange(child.props?.value),\n });\n });\n\n return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n children: PropTypes.node.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n onChange: PropTypes.func.isRequired,\n};\n","type Language = {\n files: string;\n test: string;\n};\n\nexport const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Language>): Language => {\n const languages: Record<'en' | 'pt-br' | 'es', Language> = {\n en: {\n files: 'Files',\n test: 'Test',\n },\n 'pt-br': {\n files: 'Arquivos',\n test: 'Teste',\n },\n es: {\n files: 'Archivos',\n test: 'Prueba',\n }\n };\n\n return languages[language] || languages['pt-br'];\n};\n","import React, { useMemo } from 'react';\n\nimport { useLocation, useRouteMatch, useHistory } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nimport { getLanguage } from './utils/getLanguage'\n\nexport const Leia = (props: Props) => {\n const match = useRouteMatch();\n const { pathname } = useLocation();\n const history = useHistory();\n\n const t = getLanguage(props.language)\n\n const activeTab = useMemo(() => {\n return pathname.split('/')[5] || 'files';\n }, [pathname]);\n\n return (\n <Tabs\n value={activeTab}\n onChange={(value) => history.push(`${match.url}/${value}`)}\n >\n <Tab value=\"files\">{t.files}</Tab>\n <Tab value=\"test\">{t.test}</Tab>\n </Tabs>\n );\n};","import type { PropsWithChildren } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n id: string;\n activeTab: string;\n language: \"en\" | \"pt-br\" | \"es\";\n}>;\n\nexport function Code7(props: Props) {\n return <Leia {...props} />;\n}"],"names":["TabsPane","styled","ul","_templateObject","_taggedTemplateLiteralLoose","Tab","li","_templateObject2","_ref","active","children","rest","_objectWithoutPropertiesLoose","_excluded","React","S","className","cc","propTypes","PropTypes","oneOfType","string","element","node","isRequired","onChange","func","value","bool","defaultProps","Tabs","_ref2","childrenProp","_excluded2","Children","map","child","isValidElement","Array","isArray","_child$props","props","_child$props2","cloneElement","_child$props3","onClick","_child$props4","number","getLanguage","language","languages","en","files","test","es","Leia","match","useRouteMatch","_useLocation","useLocation","pathname","history","useHistory","t","activeTab","useMemo","split","push","url","Code7"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,IAAMA,QAAQ,gBAAGC,MAAM,CAACC,EAAE,CAAAC,eAAA,KAAAA,eAAA,gBAAAC,2BAAA,yHAKhC;AAEM,IAAMC,GAAG,gBAAGJ,MAAM,CAACK,EAAE,CAAAC,gBAAA,KAAAA,gBAAA,gBAAAH,2BAAA,8lBAkC3B;;;;ACrDD,AAkBO,IAAMC,KAAG,GAAG,SAANA,KAAGA,CAAAG,IAAA;MAAMC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAKC,IAAI,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,SAAA;EAC7C,OACEC,6BAACC,GAAK;IAACC,SAAS,EAAEC,EAAE,CAAC;MAAER,MAAM,EAANA;KAAQ;KAAOE,IAAI,GACvCD,QAAQ,CACH;AAEZ,CAAC;AAEDL,KAAG,CAACa,SAAS,GAAG;EACdR,QAAQ,eAAES,SAAS,CAACC,SAAS,CAAC,CAC5BD,SAAS,CAACE,MAAM,EAChBF,SAAS,CAACG,OAAO,EACjBH,SAAS,CAACI,IAAI,CACf,CAAC,CAACC,UAAU;EACbC,QAAQ,EAAEN,SAAS,CAACO,IAAI;EACxBC,KAAK,EAAER,SAAS,CAACE,MAAM;EACvBZ,MAAM,EAAEU,SAAS,CAACS;CACnB;AAEDvB,KAAG,CAACwB,YAAY,GAAG;EACjBJ,QAAQ,EAAE,SAAAA,aAAQ;EAClBE,KAAK,EAAE,EAAE;EACTlB,MAAM,EAAE;CACT;AAED,AAAO,IAAMqB,IAAI,GAAG,SAAPA,IAAIA,CAAAC,KAAA;MAAgBC,YAAY,GAAAD,KAAA,CAAtBrB,QAAQ;IAAgBiB,KAAK,GAAAI,KAAA,CAALJ,KAAK;IAAEF,QAAQ,GAAAM,KAAA,CAARN,QAAQ;IAAKd,IAAI,GAAAC,6BAAA,CAAAmB,KAAA,EAAAE,UAAA;EACrE,IAAMvB,QAAQ,GAAGI,cAAK,CAACoB,QAAQ,CAACC,GAAG,CAACH,YAAY,EAAE,UAACI,KAAK;;IACtD,IAAI,CAACtB,cAAK,CAACuB,cAAc,CAACD,KAAK,CAAC,EAAE;MAChC,OAAO,IAAI;;IAGb,IAAIE,KAAK,CAACC,OAAO,EAAAC,YAAA,GAACJ,KAAK,CAACK,KAAK,qBAAXD,YAAA,CAAa9B,QAAQ,CAAC,EAAE;MAAA,IAAAgC,aAAA;MACxC,OAAO5B,cAAK,CAAC6B,YAAY,CAACP,KAAgC,EAAE;QAC1D3B,MAAM,EAAE,EAAAiC,aAAA,GAAAN,KAAK,CAACK,KAAK,qBAAXC,aAAA,CAAaf,KAAK,MAAKA,KAAK;QACpCA,KAAK,EAALA,KAAK;QACLF,QAAQ,EAARA;OACD,CAAC;;IAGJ,OAAOX,cAAK,CAAC6B,YAAY,CAACP,KAAgC,EAAE;MAC1D3B,MAAM,EAAE,EAAAmC,aAAA,GAAAR,KAAK,CAACK,KAAK,qBAAXG,aAAA,CAAajB,KAAK,MAAKA,KAAK;MACpCkB,OAAO,EAAE,SAAAA;QAAA,IAAAC,aAAA;QAAA,OAAMrB,QAAQ,EAAAqB,aAAA,GAACV,KAAK,CAACK,KAAK,qBAAXK,aAAA,CAAanB,KAAK,CAAC;;KAC5C,CAAC;GACH,CAAC;EAEF,OAAOb,6BAACC,QAAU,oBAAKJ,IAAI,GAAGD,QAAQ,CAAc;AACtD,CAAC;AAEDoB,IAAI,CAACZ,SAAS,GAAG;EACfR,QAAQ,EAAES,SAAS,CAACI,IAAI,CAACC,UAAU;EACnCG,KAAK,eAAER,SAAS,CAACC,SAAS,CAAC,CAACD,SAAS,CAACE,MAAM,EAAEF,SAAS,CAAC4B,MAAM,CAAC,CAAC,CAACvB,UAAU;EAC3EC,QAAQ,EAAEN,SAAS,CAACO,IAAI,CAACF;CAC1B;;ACjEM,IAAMwB,WAAW,GAAG,SAAdA,WAAWA,CAAIC,QAAuD;EACjF,IAAMC,SAAS,GAA4C;IACzDC,EAAE,EAAE;MACFC,KAAK,EAAE,OAAO;MACdC,IAAI,EAAE;KACP;IACD,OAAO,EAAE;MACPD,KAAK,EAAE,UAAU;MACjBC,IAAI,EAAE;KACP;IACDC,EAAE,EAAE;MACFF,KAAK,EAAE,UAAU;MACjBC,IAAI,EAAE;;GAET;EAED,OAAOH,SAAS,CAACD,QAAQ,CAAC,IAAIC,SAAS,CAAC,OAAO,CAAC;AAClD,CAAC;;ACbM,IAAMK,IAAI,GAAG,SAAPA,IAAIA,CAAId,KAAY;EAC/B,IAAMe,KAAK,GAAGC,4BAAa,EAAE;EAC7B,IAAAC,YAAA,GAAqBC,0BAAW,EAAE;IAA1BC,QAAQ,GAAAF,YAAA,CAARE,QAAQ;EAChB,IAAMC,OAAO,GAAGC,yBAAU,EAAE;EAE5B,IAAMC,CAAC,GAAGf,WAAW,CAACP,KAAK,CAACQ,QAAQ,CAAC;EAErC,IAAMe,SAAS,GAAGC,aAAO,CAAC;IACxB,OAAOL,QAAQ,CAACM,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,OAAO;GACzC,EAAE,CAACN,QAAQ,CAAC,CAAC;EAEd,OACE9C,6BAACgB,IAAI;IACHH,KAAK,EAAEqC,SAAS;IAChBvC,QAAQ,EAAE,SAAAA,SAACE,KAAK;MAAA,OAAKkC,OAAO,CAACM,IAAI,CAAIX,KAAK,CAACY,GAAG,SAAIzC,KAAO,CAAC;;KAE1Db,6BAACT,KAAG;IAACsB,KAAK,EAAC;KAASoC,CAAC,CAACX,KAAK,CAAO,EAClCtC,6BAACT,KAAG;IAACsB,KAAK,EAAC;KAAQoC,CAAC,CAACV,IAAI,CAAO,CAC3B;AAEX,CAAC;;SCnBegB,KAAKA,CAAC5B,KAAY;EAChC,OAAO3B,6BAACyC,IAAI,oBAAKd,KAAK,EAAI;AAC5B;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,r
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,t,r=require("react"),i=e(r),a=require("react-router-dom"),l=e(require("prop-types")),o=e(require("classcat")),u=e(require("styled-components"));function s(e,n){if(null==e)return{};var t,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)n.indexOf(t=a[r])>=0||(i[t]=e[t]);return i}function c(e,n){return n||(n=e.slice(0)),e.raw=n,e}var p=u.ul(n||(n=c(["\n width: max-content;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--neutral-1);\n"]))),v=u.li(t||(t=c(["\n padding: 12px;\n color: var(--neutral-3);\n font-size: 0.875rem;\n font-weight: normal;\n position: relative;\n cursor: pointer;\n\n svg {\n fill: var(--neutral-3) !important;\n margin-left: 8px;\n }\n\n &.active {\n color: var(--primary-700-light);\n\n svg {\n fill: var(--primary-700-light) !important;\n }\n\n ::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: var(--primary-700-light);\n }\n }\n\n &:not(:last-child) {\n margin-right: 8px;\n }\n"]))),f=["active","children"],d=["children","value","onChange"],h=function(e){var n=e.active,t=e.children,r=s(e,f);return i.createElement(v,Object.assign({className:o({active:n})},r),t)};h.propTypes={children:l.oneOfType([l.string,l.element,l.node]).isRequired,onChange:l.func,value:l.string,active:l.bool},h.defaultProps={onChange:function(){},value:"",active:!1};var m=function(e){var n=e.children,t=e.value,r=e.onChange,a=s(e,d),l=i.Children.map(n,(function(e){var n,a,l;return i.isValidElement(e)?Array.isArray(null==(n=e.props)?void 0:n.children)?i.cloneElement(e,{active:(null==(l=e.props)?void 0:l.value)===t,value:t,onChange:r}):i.cloneElement(e,{active:(null==(a=e.props)?void 0:a.value)===t,onClick:function(){var n;return r(null==(n=e.props)?void 0:n.value)}}):null}));return i.createElement(p,Object.assign({},a),l)};m.propTypes={children:l.node.isRequired,value:l.oneOfType([l.string,l.number]).isRequired,onChange:l.func.isRequired};var g=function(e){var n,t=a.useRouteMatch(),l=a.useLocation().pathname,o=a.useHistory(),u=(n={en:{files:"Files",test:"Test"},"pt-br":{files:"Arquivos",test:"Teste"},es:{files:"Archivos",test:"Prueba"}})[e.language]||n["pt-br"],s=r.useMemo((function(){return l.split("/")[5]||"files"}),[l]);return i.createElement(m,{value:s,onChange:function(e){return o.push(t.url+"/"+e)}},i.createElement(h,{value:"files"},u.files),i.createElement(h,{value:"test"},u.test))};exports.Code7=function(e){return i.createElement(g,Object.assign({},e))};
|
|
2
2
|
//# sourceMappingURL=code7-leia.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code7-leia.cjs.production.min.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n children: ReactNode;\n}\n\ninterface OptionProps {\n children: ReactNode;\n onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n width: max-content;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n padding: 12px;\n color: var(--neutral-3);\n font-size: 0.875rem;\n font-weight: normal;\n position: relative;\n cursor: pointer;\n\n svg {\n fill: var(--neutral-3) !important;\n margin-left: 8px;\n }\n\n &.active {\n color: var(--primary-700-light);\n\n svg {\n fill: var(--primary-700-light) !important;\n }\n\n ::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: var(--primary-700-light);\n }\n }\n\n &:not(:last-child) {\n margin-right: 8px;\n }\n`;\n\nexport const DropdownContainer = styled.div`\n position: absolute;\n left: 0px;\n top: 40px;\n display: flex;\n flex-direction: column;\n\n background: #ffffff;\n\n border: 1px solid #979aa5;\n box-sizing: border-box;\n box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n 0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n border-radius: 4px;\n padding: 8px;\n z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n padding: 8px;\n font-size: 14px;\n border-radius: 4px;\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n background-color: var(--primary-800-light);\n color: white;\n }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n children: ReactNode;\n active?: boolean;\n}\n\ninterface ITabsProps {\n children: ReactNode;\n value: string | number;\n onChange: (e: any) => void;\n active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n return (\n <S.Tab className={cc({ active })} {...rest}>\n {children}\n </S.Tab>\n );\n};\n\nTab.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.element,\n PropTypes.node,\n ]).isRequired,\n onChange: PropTypes.func,\n value: PropTypes.string,\n active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n onChange: () => {},\n value: '',\n active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n const children = React.Children.map(childrenProp, (child) => {\n if (!React.isValidElement(child)) {\n return null;\n }\n\n if (Array.isArray(child.props?.children)) {\n return React.cloneElement(child as React.ReactElement<any>, {\n active: child.props?.value === value,\n value,\n onChange,\n });\n }\n\n return React.cloneElement(child as React.ReactElement<any>, {\n active: child.props?.value === value,\n onClick: () => onChange(child.props?.value),\n });\n });\n\n return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n children: PropTypes.node.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n onChange: PropTypes.func.isRequired,\n};\n","import React, { useMemo } from 'react';\n\nimport { useLocation, useRouteMatch, useHistory } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nexport const Leia = (props: Props) => {\n const match = useRouteMatch();\n const { pathname } = useLocation();\n const history = useHistory();\n\n
|
|
1
|
+
{"version":3,"file":"code7-leia.cjs.production.min.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/utils/getLanguage.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n children: ReactNode;\n}\n\ninterface OptionProps {\n children: ReactNode;\n onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n width: max-content;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n padding: 12px;\n color: var(--neutral-3);\n font-size: 0.875rem;\n font-weight: normal;\n position: relative;\n cursor: pointer;\n\n svg {\n fill: var(--neutral-3) !important;\n margin-left: 8px;\n }\n\n &.active {\n color: var(--primary-700-light);\n\n svg {\n fill: var(--primary-700-light) !important;\n }\n\n ::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: var(--primary-700-light);\n }\n }\n\n &:not(:last-child) {\n margin-right: 8px;\n }\n`;\n\nexport const DropdownContainer = styled.div`\n position: absolute;\n left: 0px;\n top: 40px;\n display: flex;\n flex-direction: column;\n\n background: #ffffff;\n\n border: 1px solid #979aa5;\n box-sizing: border-box;\n box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n 0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n border-radius: 4px;\n padding: 8px;\n z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n padding: 8px;\n font-size: 14px;\n border-radius: 4px;\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n background-color: var(--primary-800-light);\n color: white;\n }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n children: ReactNode;\n active?: boolean;\n}\n\ninterface ITabsProps {\n children: ReactNode;\n value: string | number;\n onChange: (e: any) => void;\n active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n return (\n <S.Tab className={cc({ active })} {...rest}>\n {children}\n </S.Tab>\n );\n};\n\nTab.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.element,\n PropTypes.node,\n ]).isRequired,\n onChange: PropTypes.func,\n value: PropTypes.string,\n active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n onChange: () => {},\n value: '',\n active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n const children = React.Children.map(childrenProp, (child) => {\n if (!React.isValidElement(child)) {\n return null;\n }\n\n if (Array.isArray(child.props?.children)) {\n return React.cloneElement(child as React.ReactElement<any>, {\n active: child.props?.value === value,\n value,\n onChange,\n });\n }\n\n return React.cloneElement(child as React.ReactElement<any>, {\n active: child.props?.value === value,\n onClick: () => onChange(child.props?.value),\n });\n });\n\n return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n children: PropTypes.node.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n onChange: PropTypes.func.isRequired,\n};\n","type Language = {\n files: string;\n test: string;\n};\n\nexport const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Language>): Language => {\n const languages: Record<'en' | 'pt-br' | 'es', Language> = {\n en: {\n files: 'Files',\n test: 'Test',\n },\n 'pt-br': {\n files: 'Arquivos',\n test: 'Teste',\n },\n es: {\n files: 'Archivos',\n test: 'Prueba',\n }\n };\n\n return languages[language] || languages['pt-br'];\n};\n","import React, { useMemo } from 'react';\n\nimport { useLocation, useRouteMatch, useHistory } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nimport { getLanguage } from './utils/getLanguage'\n\nexport const Leia = (props: Props) => {\n const match = useRouteMatch();\n const { pathname } = useLocation();\n const history = useHistory();\n\n const t = getLanguage(props.language)\n\n const activeTab = useMemo(() => {\n return pathname.split('/')[5] || 'files';\n }, [pathname]);\n\n return (\n <Tabs\n value={activeTab}\n onChange={(value) => history.push(`${match.url}/${value}`)}\n >\n <Tab value=\"files\">{t.files}</Tab>\n <Tab value=\"test\">{t.test}</Tab>\n </Tabs>\n );\n};","import type { PropsWithChildren } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n id: string;\n activeTab: string;\n language: \"en\" | \"pt-br\" | \"es\";\n}>;\n\nexport function Code7(props: Props) {\n return <Leia {...props} />;\n}"],"names":["TabsPane","styled","ul","_templateObject","_taggedTemplateLiteralLoose","Tab","li","_templateObject2","_ref","active","children","rest","_objectWithoutPropertiesLoose","_excluded","React","S","className","cc","propTypes","PropTypes","oneOfType","string","element","node","isRequired","onChange","func","value","bool","defaultProps","Tabs","_ref2","childrenProp","_excluded2","Children","map","child","_child$props2","isValidElement","Array","isArray","_child$props","props","cloneElement","_child$props3","onClick","_child$props4","number","Leia","languages","match","useRouteMatch","pathname","useLocation","history","useHistory","t","en","files","test","pt-br","es","language","activeTab","useMemo","split","push","url"],"mappings":"udAYO,IAAMA,EAAWC,EAAOC,GAAEC,IAAAA,EAAAC,2HAOpBC,EAAMJ,EAAOK,GAAEC,IAAAA,EAAAH,0pBCDfC,EAAM,SAAHG,OAAMC,EAAMD,EAANC,OAAQC,EAAQF,EAARE,SAAaC,EAAIC,EAAAJ,EAAAK,GAC7C,OACEC,gBAACC,iBAAMC,UAAWC,EAAG,CAAER,OAAAA,KAAeE,GACnCD,IAKPL,EAAIa,UAAY,CACdR,SAAUS,EAAUC,UAAU,CAC5BD,EAAUE,OACVF,EAAUG,QACVH,EAAUI,OACTC,WACHC,SAAUN,EAAUO,KACpBC,MAAOR,EAAUE,OACjBZ,OAAQU,EAAUS,MAGpBvB,EAAIwB,aAAe,CACjBJ,SAAU,aACVE,MAAO,GACPlB,QAAQ,GAGH,IAAMqB,EAAO,SAAHC,OAAgBC,EAAYD,EAAtBrB,SAAwBiB,EAAKI,EAALJ,MAAOF,EAAQM,EAARN,SAAad,EAAIC,EAAAmB,EAAAE,GAC/DvB,EAAWI,EAAMoB,SAASC,IAAIH,GAAc,SAACI,WAKPC,EAJ1C,OAAKvB,EAAMwB,eAAeF,GAItBG,MAAMC,eAAOC,EAACL,EAAMM,cAAND,EAAa/B,UACtBI,EAAM6B,aAAaP,EAAkC,CAC1D3B,eAAQ4B,EAAAD,EAAMM,cAANL,EAAaV,SAAUA,EAC/BA,MAAAA,EACAF,SAAAA,IAIGX,EAAM6B,aAAaP,EAAkC,CAC1D3B,eAAQmC,EAAAR,EAAMM,cAANE,EAAajB,SAAUA,EAC/BkB,QAAS,WAAA,IAAAC,EAAA,OAAMrB,SAAQqB,EAACV,EAAMM,cAANI,EAAanB,UAb9B,QAiBX,OAAOb,gBAACC,mBAAeJ,GAAOD,IAGhCoB,EAAKZ,UAAY,CACfR,SAAUS,EAAUI,KAAKC,WACzBG,MAAOR,EAAUC,UAAU,CAACD,EAAUE,OAAQF,EAAU4B,SAASvB,WACjEC,SAAUN,EAAUO,KAAKF,YChEpB,ICIMwB,EAAO,SAACN,GACnB,IDJMO,ECIAC,EAAQC,kBACNC,EAAaC,gBAAbD,SACFE,EAAUC,eAEVC,GDRAP,EAAqD,CACzDQ,GAAI,CACFC,MAAO,QACPC,KAAM,QAERC,QAAS,CACPF,MAAO,WACPC,KAAM,SAERE,GAAI,CACFH,MAAO,WACPC,KAAM,YCHYjB,EAAMoB,WDOEb,EAAU,SCLlCc,EAAYC,WAAQ,WACxB,OAAOZ,EAASa,MAAM,KAAK,IAAM,UAChC,CAACb,IAEJ,OACEtC,gBAACgB,GACCH,MAAOoC,EACPtC,SAAU,SAACE,GAAK,OAAK2B,EAAQY,KAAQhB,EAAMiB,QAAOxC,KAElDb,gBAACT,GAAIsB,MAAM,SAAS6B,EAAEE,OACtB5C,gBAACT,GAAIsB,MAAM,QAAQ6B,EAAEG,+BChBLjB,GACpB,OAAO5B,gBAACkC,mBAASN"}
|
package/dist/code7-leia.esm.js
CHANGED
|
@@ -85,12 +85,30 @@ Tabs.propTypes = {
|
|
|
85
85
|
onChange: PropTypes.func.isRequired
|
|
86
86
|
};
|
|
87
87
|
|
|
88
|
+
var getLanguage = function getLanguage(language) {
|
|
89
|
+
var languages = {
|
|
90
|
+
en: {
|
|
91
|
+
files: 'Files',
|
|
92
|
+
test: 'Test'
|
|
93
|
+
},
|
|
94
|
+
'pt-br': {
|
|
95
|
+
files: 'Arquivos',
|
|
96
|
+
test: 'Teste'
|
|
97
|
+
},
|
|
98
|
+
es: {
|
|
99
|
+
files: 'Archivos',
|
|
100
|
+
test: 'Prueba'
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
return languages[language] || languages['pt-br'];
|
|
104
|
+
};
|
|
105
|
+
|
|
88
106
|
var Leia = function Leia(props) {
|
|
89
107
|
var match = useRouteMatch();
|
|
90
108
|
var _useLocation = useLocation(),
|
|
91
109
|
pathname = _useLocation.pathname;
|
|
92
110
|
var history = useHistory();
|
|
93
|
-
|
|
111
|
+
var t = getLanguage(props.language);
|
|
94
112
|
var activeTab = useMemo(function () {
|
|
95
113
|
return pathname.split('/')[5] || 'files';
|
|
96
114
|
}, [pathname]);
|
|
@@ -101,9 +119,9 @@ var Leia = function Leia(props) {
|
|
|
101
119
|
}
|
|
102
120
|
}, React.createElement(Tab$1, {
|
|
103
121
|
value: "files"
|
|
104
|
-
},
|
|
122
|
+
}, t.files), React.createElement(Tab$1, {
|
|
105
123
|
value: "test"
|
|
106
|
-
},
|
|
124
|
+
}, t.test));
|
|
107
125
|
};
|
|
108
126
|
|
|
109
127
|
function Code7(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code7-leia.esm.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n children: ReactNode;\n}\n\ninterface OptionProps {\n children: ReactNode;\n onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n width: max-content;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n padding: 12px;\n color: var(--neutral-3);\n font-size: 0.875rem;\n font-weight: normal;\n position: relative;\n cursor: pointer;\n\n svg {\n fill: var(--neutral-3) !important;\n margin-left: 8px;\n }\n\n &.active {\n color: var(--primary-700-light);\n\n svg {\n fill: var(--primary-700-light) !important;\n }\n\n ::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: var(--primary-700-light);\n }\n }\n\n &:not(:last-child) {\n margin-right: 8px;\n }\n`;\n\nexport const DropdownContainer = styled.div`\n position: absolute;\n left: 0px;\n top: 40px;\n display: flex;\n flex-direction: column;\n\n background: #ffffff;\n\n border: 1px solid #979aa5;\n box-sizing: border-box;\n box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n 0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n border-radius: 4px;\n padding: 8px;\n z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n padding: 8px;\n font-size: 14px;\n border-radius: 4px;\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n background-color: var(--primary-800-light);\n color: white;\n }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n children: ReactNode;\n active?: boolean;\n}\n\ninterface ITabsProps {\n children: ReactNode;\n value: string | number;\n onChange: (e: any) => void;\n active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n return (\n <S.Tab className={cc({ active })} {...rest}>\n {children}\n </S.Tab>\n );\n};\n\nTab.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.element,\n PropTypes.node,\n ]).isRequired,\n onChange: PropTypes.func,\n value: PropTypes.string,\n active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n onChange: () => {},\n value: '',\n active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n const children = React.Children.map(childrenProp, (child) => {\n if (!React.isValidElement(child)) {\n return null;\n }\n\n if (Array.isArray(child.props?.children)) {\n return React.cloneElement(child as React.ReactElement<any>, {\n active: child.props?.value === value,\n value,\n onChange,\n });\n }\n\n return React.cloneElement(child as React.ReactElement<any>, {\n active: child.props?.value === value,\n onClick: () => onChange(child.props?.value),\n });\n });\n\n return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n children: PropTypes.node.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n onChange: PropTypes.func.isRequired,\n};\n","import React, { useMemo } from 'react';\n\nimport { useLocation, useRouteMatch, useHistory } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nexport const Leia = (props: Props) => {\n const match = useRouteMatch();\n const { pathname } = useLocation();\n const history = useHistory();\n\n
|
|
1
|
+
{"version":3,"file":"code7-leia.esm.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/utils/getLanguage.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n children: ReactNode;\n}\n\ninterface OptionProps {\n children: ReactNode;\n onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n width: max-content;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n padding: 12px;\n color: var(--neutral-3);\n font-size: 0.875rem;\n font-weight: normal;\n position: relative;\n cursor: pointer;\n\n svg {\n fill: var(--neutral-3) !important;\n margin-left: 8px;\n }\n\n &.active {\n color: var(--primary-700-light);\n\n svg {\n fill: var(--primary-700-light) !important;\n }\n\n ::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: var(--primary-700-light);\n }\n }\n\n &:not(:last-child) {\n margin-right: 8px;\n }\n`;\n\nexport const DropdownContainer = styled.div`\n position: absolute;\n left: 0px;\n top: 40px;\n display: flex;\n flex-direction: column;\n\n background: #ffffff;\n\n border: 1px solid #979aa5;\n box-sizing: border-box;\n box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n 0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n border-radius: 4px;\n padding: 8px;\n z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n padding: 8px;\n font-size: 14px;\n border-radius: 4px;\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n background-color: var(--primary-800-light);\n color: white;\n }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n children: ReactNode;\n active?: boolean;\n}\n\ninterface ITabsProps {\n children: ReactNode;\n value: string | number;\n onChange: (e: any) => void;\n active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n return (\n <S.Tab className={cc({ active })} {...rest}>\n {children}\n </S.Tab>\n );\n};\n\nTab.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.element,\n PropTypes.node,\n ]).isRequired,\n onChange: PropTypes.func,\n value: PropTypes.string,\n active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n onChange: () => {},\n value: '',\n active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n const children = React.Children.map(childrenProp, (child) => {\n if (!React.isValidElement(child)) {\n return null;\n }\n\n if (Array.isArray(child.props?.children)) {\n return React.cloneElement(child as React.ReactElement<any>, {\n active: child.props?.value === value,\n value,\n onChange,\n });\n }\n\n return React.cloneElement(child as React.ReactElement<any>, {\n active: child.props?.value === value,\n onClick: () => onChange(child.props?.value),\n });\n });\n\n return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n children: PropTypes.node.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n onChange: PropTypes.func.isRequired,\n};\n","type Language = {\n files: string;\n test: string;\n};\n\nexport const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Language>): Language => {\n const languages: Record<'en' | 'pt-br' | 'es', Language> = {\n en: {\n files: 'Files',\n test: 'Test',\n },\n 'pt-br': {\n files: 'Arquivos',\n test: 'Teste',\n },\n es: {\n files: 'Archivos',\n test: 'Prueba',\n }\n };\n\n return languages[language] || languages['pt-br'];\n};\n","import React, { useMemo } from 'react';\n\nimport { useLocation, useRouteMatch, useHistory } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nimport { getLanguage } from './utils/getLanguage'\n\nexport const Leia = (props: Props) => {\n const match = useRouteMatch();\n const { pathname } = useLocation();\n const history = useHistory();\n\n const t = getLanguage(props.language)\n\n const activeTab = useMemo(() => {\n return pathname.split('/')[5] || 'files';\n }, [pathname]);\n\n return (\n <Tabs\n value={activeTab}\n onChange={(value) => history.push(`${match.url}/${value}`)}\n >\n <Tab value=\"files\">{t.files}</Tab>\n <Tab value=\"test\">{t.test}</Tab>\n </Tabs>\n );\n};","import type { PropsWithChildren } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n id: string;\n activeTab: string;\n language: \"en\" | \"pt-br\" | \"es\";\n}>;\n\nexport function Code7(props: Props) {\n return <Leia {...props} />;\n}"],"names":["TabsPane","styled","ul","_templateObject","_taggedTemplateLiteralLoose","Tab","li","_templateObject2","_ref","active","children","rest","_objectWithoutPropertiesLoose","_excluded","React","S","className","cc","propTypes","PropTypes","oneOfType","string","element","node","isRequired","onChange","func","value","bool","defaultProps","Tabs","_ref2","childrenProp","_excluded2","Children","map","child","isValidElement","Array","isArray","_child$props","props","_child$props2","cloneElement","_child$props3","onClick","_child$props4","number","getLanguage","language","languages","en","files","test","es","Leia","match","useRouteMatch","_useLocation","useLocation","pathname","history","useHistory","t","activeTab","useMemo","split","push","url","Code7"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
package/package.json
CHANGED
package/src/Leia.tsx
CHANGED
|
@@ -5,12 +5,14 @@ import { useLocation, useRouteMatch, useHistory } from 'react-router-dom';
|
|
|
5
5
|
import type { Props } from './index';
|
|
6
6
|
import { Tab, Tabs } from './components/Tabs'
|
|
7
7
|
|
|
8
|
+
import { getLanguage } from './utils/getLanguage'
|
|
9
|
+
|
|
8
10
|
export const Leia = (props: Props) => {
|
|
9
11
|
const match = useRouteMatch();
|
|
10
12
|
const { pathname } = useLocation();
|
|
11
13
|
const history = useHistory();
|
|
12
14
|
|
|
13
|
-
|
|
15
|
+
const t = getLanguage(props.language)
|
|
14
16
|
|
|
15
17
|
const activeTab = useMemo(() => {
|
|
16
18
|
return pathname.split('/')[5] || 'files';
|
|
@@ -21,8 +23,8 @@ export const Leia = (props: Props) => {
|
|
|
21
23
|
value={activeTab}
|
|
22
24
|
onChange={(value) => history.push(`${match.url}/${value}`)}
|
|
23
25
|
>
|
|
24
|
-
<Tab value="files">
|
|
25
|
-
<Tab value="test">
|
|
26
|
+
<Tab value="files">{t.files}</Tab>
|
|
27
|
+
<Tab value="test">{t.test}</Tab>
|
|
26
28
|
</Tabs>
|
|
27
29
|
);
|
|
28
30
|
};
|
package/src/index.tsx
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
type Language = {
|
|
2
|
+
files: string;
|
|
3
|
+
test: string;
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
export const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Language>): Language => {
|
|
7
|
+
const languages: Record<'en' | 'pt-br' | 'es', Language> = {
|
|
8
|
+
en: {
|
|
9
|
+
files: 'Files',
|
|
10
|
+
test: 'Test',
|
|
11
|
+
},
|
|
12
|
+
'pt-br': {
|
|
13
|
+
files: 'Arquivos',
|
|
14
|
+
test: 'Teste',
|
|
15
|
+
},
|
|
16
|
+
es: {
|
|
17
|
+
files: 'Archivos',
|
|
18
|
+
test: 'Prueba',
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
return languages[language] || languages['pt-br'];
|
|
23
|
+
};
|