@laerdal/life-react-components 1.4.1-dev.4 → 1.4.1-dev.6.full
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/esm/InputFields/Label.js +2 -0
- package/dist/esm/InputFields/Label.js.map +1 -1
- package/dist/js/InputFields/Label.js +1 -1
- package/dist/js/InputFields/Label.js.map +1 -1
- package/dist/umd/InputFields/Label.js +2 -0
- package/dist/umd/InputFields/Label.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["React","BREAKPOINTS","COLORS","RequiredStar","styled","ComponentXSStyling","ComponentXXSStyling","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","InputLabel","inputId","text","size","required","setRequired","useState","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,YAAT,QAA6B,WAA7B;;AAGA;AACA;AACA;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,kBAAT,EAA6BC,mBAA7B,QAAwD,sBAAxD,C,CAEA;;AACA,MAAMC,KAAK,GAAGH,MAAM,CAACI,KAAM;AAC3B,IAAIF,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CAAwB;AAC/C;AACA,IAAIR,WAAW,CAACS,MAAO;AACvB,MAAML,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAAwB;AAChD;AACA;AACA;AACA,MAAMH,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CAAwB;AACjD;AACA;AACA,MAAMJ,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAAwB;AAChD;AACA,
|
|
1
|
+
{"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["React","BREAKPOINTS","COLORS","RequiredStar","styled","ComponentXSStyling","ComponentXXSStyling","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","InputLabel","inputId","text","size","required","setRequired","useState","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,YAAT,QAA6B,WAA7B;;AAGA;AACA;AACA;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,kBAAT,EAA6BC,mBAA7B,QAAwD,sBAAxD,C,CAEA;;AACA,MAAMC,KAAK,GAAGH,MAAM,CAACI,KAAM;AAC3B,IAAIF,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CAAwB;AAC/C;AACA,IAAIR,WAAW,CAACS,MAAO;AACvB,MAAML,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAAwB;AAChD;AACA;AACA;AACA,MAAMH,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CAAwB;AACjD;AACA;AACA,MAAMJ,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAAwB;AAChD;AACA;AACA;AACA,CAfA;AAiBA,MAAME,QAAQ,GAAGP,MAAM,CAACQ,GAAyB;AACjD;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAChE,CAJA,C,CAMA;;AAQA,MAAMC,UAA+C,GAAG,CAAC;AAAEC,EAAAA,OAAF;AAAWC,EAAAA,IAAX;AAAiBC,EAAAA,IAAjB;AAAuBJ,EAAAA;AAAvB,CAAD,KAAiD;AACvG;AACA,QAAM,CAACK,QAAD,EAAWC,WAAX,IAA0BpB,KAAK,CAACqB,QAAN,CAAwB,KAAxB,CAAhC;AAEA;AACF;AACA;;AACErB,EAAAA,KAAK,CAACsB,SAAN,CAAgB,MAAM;AACpB,QAAIC,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,GAAkCS,YAAlC,CAA+C,UAA/C,MAA+D,EAAnE,EAAuE;AACrEL,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,CAACG,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,GAAkCS,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,QAAMC,cAAc,GAAIC,EAAD,IAAsB;AAC3CJ,IAAAA,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,GAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAEd;AAAlB,kBACE,oBAAC,KAAD;AAAO,IAAA,OAAO,EAAEE,OAAhB;AAAyB,IAAA,OAAO,EAAE,MAAMU,cAAc,CAACV,OAAD,CAAtD;AAAiE,IAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KACGD,IADH,CADF,EAIGE,QAAQ,iBAAI,oBAAC,YAAD,YAJf,CADF;AAQD,CA9BD;;;AANEH,EAAAA,O;AACAC,EAAAA,I;AAEAH,EAAAA,M;;AAmCF,eAAeC,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n &.small {\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n }\n &.medium {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n display: flex;\n justify-content: space-between;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n inputId: string;\n text: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n // Globally used variables within the component\n const [required, setRequired] = React.useState<boolean>(false);\n\n /**\n * Checks if field is set as required and we have to mark it accordingly.\n */\n React.useEffect(() => {\n if (document.getElementById(inputId)?.getAttribute('required') === '') {\n setRequired(true);\n } else {\n setRequired(false);\n }\n }, [document.getElementById(inputId)?.getAttribute('required')]);\n /**\n * Triggers a click element on a specific element.\n * @param id - ID of the element which needs to be clicked.\n */\n const onTriggerClick = (id: string): void => {\n document.getElementById(id)?.click();\n };\n\n return (\n <LabelRow margin={margin}>\n <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n {text}\n </Label>\n {required && <RequiredStar>*</RequiredStar>}\n </LabelRow>\n );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
|
|
@@ -42,7 +42,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
42
42
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
43
43
|
|
|
44
44
|
// Add component-specific styles.
|
|
45
|
-
var Label = _styledComponents.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n\n ", " {\n ", "\n }\n\n &.small {\n ", "\n }\n &.medium {\n ", "\n }\n"])), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500));
|
|
45
|
+
var Label = _styledComponents.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n\n ", " {\n ", "\n }\n\n &.small {\n ", "\n }\n &.medium {\n ", "\n }\n\n pointer-events: none;\n"])), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500));
|
|
46
46
|
|
|
47
47
|
var LabelRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n ", "\n"])), function (props) {
|
|
48
48
|
return props.margin ? "margin: ".concat(props.margin, ";") : '';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","COLORS","neutral_500","BREAKPOINTS","MEDIUM","LabelRow","div","props","margin","InputLabel","inputId","text","size","React","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAMA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA,IAAMA,KAAK,GAAGC,0BAAOC,KAAV,
|
|
1
|
+
{"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","COLORS","neutral_500","BREAKPOINTS","MEDIUM","LabelRow","div","props","margin","InputLabel","inputId","text","size","React","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAMA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA,IAAMA,KAAK,GAAGC,0BAAOC,KAAV,iMACP,qCAAoB,CAApB,EAAuBC,eAAOC,WAA9B,CADO,EAGPC,oBAAYC,MAHL,EAIL,oCAAmB,CAAnB,EAAsBH,eAAOC,WAA7B,CAJK,EAQL,qCAAoB,CAApB,EAAuBD,eAAOC,WAA9B,CARK,EAWL,oCAAmB,CAAnB,EAAsBD,eAAOC,WAA7B,CAXK,CAAX;;AAiBA,IAAMG,QAAQ,GAAGN,0BAAOO,GAAV,uIAGV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAHU,CAAd,C,CAMA;;;AAQA,IAAMC,UAA+C,GAAG,SAAlDA,UAAkD,OAAiD;AAAA;;AAAA,MAA9CC,OAA8C,QAA9CA,OAA8C;AAAA,MAArCC,IAAqC,QAArCA,IAAqC;AAAA,MAA/BC,IAA+B,QAA/BA,IAA+B;AAAA,MAAzBJ,MAAyB,QAAzBA,MAAyB;;AACvG;AACA,wBAAgCK,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAI,0BAAAC,QAAQ,CAACC,cAAT,CAAwBT,OAAxB,iFAAkCU,YAAlC,CAA+C,UAA/C,OAA+D,EAAnE,EAAuE;AACrEJ,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,2BAACE,QAAQ,CAACC,cAAT,CAAwBT,OAAxB,CAAD,2DAAC,uBAAkCU,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD,EAAsB;AAAA;;AAC3C,8BAAAJ,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,mFAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAEf;AAAlB,kBACE,oBAAC,KAAD;AAAO,IAAA,OAAO,EAAEE,OAAhB;AAAyB,IAAA,OAAO,EAAE;AAAA,aAAMW,cAAc,CAACX,OAAD,CAApB;AAAA,KAAlC;AAAiE,IAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KACGD,IADH,CADF,EAIGI,QAAQ,iBAAI,oBAAC,qBAAD,YAJf,CADF;AAQD,CA9BD;;;AANEL,EAAAA,O;AACAC,EAAAA,I;AAEAH,EAAAA,M;;eAmCaC,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n &.small {\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n }\n &.medium {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n display: flex;\n justify-content: space-between;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n inputId: string;\n text: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n // Globally used variables within the component\n const [required, setRequired] = React.useState<boolean>(false);\n\n /**\n * Checks if field is set as required and we have to mark it accordingly.\n */\n React.useEffect(() => {\n if (document.getElementById(inputId)?.getAttribute('required') === '') {\n setRequired(true);\n } else {\n setRequired(false);\n }\n }, [document.getElementById(inputId)?.getAttribute('required')]);\n /**\n * Triggers a click element on a specific element.\n * @param id - ID of the element which needs to be clicked.\n */\n const onTriggerClick = (id: string): void => {\n document.getElementById(id)?.click();\n };\n\n return (\n <LabelRow margin={margin}>\n <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n {text}\n </Label>\n {required && <RequiredStar>*</RequiredStar>}\n </LabelRow>\n );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","ComponentXXSStyling","COLORS","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","props","margin","inputId","text","InputLabel","React","document","setRequired","onTriggerClick","id","size","required"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAIA;AACA,QAAMA,KAAK,GAAGC,2BAAOC,KAAM;AAC3B,IAAIC,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AAC/C;AACA,IAAIE,oBAAYC,MAAO;AACvB,MAAMC,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;AACA;AACA;AACA,MAAMJ,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AACjD;AACA;AACA,MAAMI,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;
|
|
1
|
+
{"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","ComponentXXSStyling","COLORS","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","props","margin","inputId","text","InputLabel","React","document","setRequired","onTriggerClick","id","size","required"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAIA;AACA,QAAMA,KAAK,GAAGC,2BAAOC,KAAM;AAC3B,IAAIC,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AAC/C;AACA,IAAIE,oBAAYC,MAAO;AACvB,MAAMC,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;AACA;AACA;AACA,MAAMJ,qCAAmB,CAAnBA,EAAuBC,eAAJ,WAAnBD,CAA2C;AACjD;AACA;AACA,MAAMI,oCAAkB,CAAlBA,EAAsBH,eAAJ,WAAlBG,CAA0C;AAChD;AACA;AACA;AAdA,CAAA;AAiBA,QAAMC,QAAQ,GAAGP,2BAAOQ,GAAyB;AACjD;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACC,MAAhCD,GAAAA,GAA4C,EAAI;AAHhE,CAAA,C,CAMA;;AAQA,QAAMI,UAA+C,GAAG,CAAC;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAuBH,IAAAA;AAAvB,GAAD,KAAiD;AACvG;AACA,UAAM,CAAA,QAAA,EAAA,WAAA,IAA0BI,KAAK,CAALA,QAAAA,CAAhC,KAAgCA,CAAhC;AAEA;AACF;AACA;;AACEA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAIC,QAAQ,CAARA,cAAAA,CAAAA,OAAAA,GAAAA,YAAAA,CAAAA,UAAAA,MAAJ,EAAA,EAAuE;AACrEC,QAAAA,WAAW,CAAXA,IAAW,CAAXA;AADF,OAAA,MAEO;AACLA,QAAAA,WAAW,CAAXA,KAAW,CAAXA;AACD;AALHF,KAAAA,EAMG,CAACC,QAAQ,CAARA,cAAAA,CAAAA,OAAAA,GAAAA,YAAAA,CANJD,UAMIC,CAAD,CANHD;AAOA;AACF;AACA;AACA;;AACE,UAAMG,cAAc,GAAIC,EAAD,IAAsB;AAC3CH,MAAAA,QAAQ,CAARA,cAAAA,CAAAA,EAAAA,GAAAA,KAAAA;AADF,KAAA;;AAIA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAU,MAAA,MAAM,EAAEL;AAAlB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAO,MAAA,OAAO,EAAd,OAAA;AAAyB,MAAA,OAAO,EAAE,MAAMO,cAAc,CAAtD,OAAsD,CAAtD;AAAiE,MAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KAAA,EADF,IACE,CADF,EAIGC,QAAQ,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAA,EALjB,GAKiB,CAJf,CADF;AAtBF,GAAA;;;AANET,IAAAA,O;AACAC,IAAAA,I;AAEAF,IAAAA,M;;oBAmCF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n &.small {\n ${ComponentXXSStyling(1, COLORS.neutral_500)}\n }\n &.medium {\n ${ComponentXSStyling(1, COLORS.neutral_500)}\n }\n\n pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n display: flex;\n justify-content: space-between;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n inputId: string;\n text: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n // Globally used variables within the component\n const [required, setRequired] = React.useState<boolean>(false);\n\n /**\n * Checks if field is set as required and we have to mark it accordingly.\n */\n React.useEffect(() => {\n if (document.getElementById(inputId)?.getAttribute('required') === '') {\n setRequired(true);\n } else {\n setRequired(false);\n }\n }, [document.getElementById(inputId)?.getAttribute('required')]);\n /**\n * Triggers a click element on a specific element.\n * @param id - ID of the element which needs to be clicked.\n */\n const onTriggerClick = (id: string): void => {\n document.getElementById(id)?.click();\n };\n\n return (\n <LabelRow margin={margin}>\n <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n {text}\n </Label>\n {required && <RequiredStar>*</RequiredStar>}\n </LabelRow>\n );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
|