UNPKG

4.08 kBSource Map (JSON)View Raw
1{"version":3,"file":"Field.js","sources":["../src/components/Field/Field.js"],"sourcesContent":["import React, { useMemo } from 'react'\nimport PropTypes from 'prop-types'\nimport { Inside } from 'use-inside'\nimport { useTheme } from '../../theme'\nimport { textStyle, GU } from '../../style'\nimport { unselectable } from '../../utils'\n\n// This variable is used as a simple mechanism to generate unique IDs, that can\n// be used to link the <label> to a specific form element by using a render\n// prop. See `children` in the Field documentation for more details.\nlet fieldId = 1\n\nfunction Field({ children, label, required, ...props }) {\n const theme = useTheme()\n\n const isRequired =\n required ||\n React.Children.toArray(children).some(\n ({ props }) => props && props.required\n )\n\n const id = useMemo(\n () => (typeof children === 'function' ? `Field_${fieldId++}` : null),\n [children]\n )\n\n const labelProps = id === null ? {} : { htmlFor: id }\n\n return (\n <Inside name=\"Field\">\n <div\n css={`\n margin-bottom: ${3 * GU}px;\n `}\n {...props}\n >\n <label {...labelProps}>\n <div\n css={`\n display: flex;\n align-items: center;\n height: ${2 * GU}px;\n margin-bottom: ${0.5 * GU}px;\n color: ${theme.surfaceContentSecondary};\n white-space: nowrap;\n ${textStyle('label2')};\n ${unselectable};\n `}\n >\n <Inside name=\"Field:label\">\n {label}\n {isRequired && (\n <span\n css={`\n color: ${theme.accent};\n `}\n title=\"Required\"\n >\n {'\\u00a0*'}\n </span>\n )}\n </Inside>\n </div>\n <Inside name=\"Field:content\">\n {typeof children === 'function' ? children({ id }) : children}\n </Inside>\n </label>\n </div>\n </Inside>\n )\n}\n\nField.propTypes = {\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n label: PropTypes.node,\n required: PropTypes.bool,\n}\n\nexport default Field\n"],"names":["fieldId","unselectable","Field","children","label","required","props","theme","useTheme","isRequired","React","Children","toArray","some","id","useMemo","labelProps","htmlFor","Inside","GU","surfaceContentSecondary","textStyle","accent","propTypes","PropTypes","oneOfType","node","func","bool"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;;AACA,IAAIA,OAAO,GAAG,CAAd;;;;;;;;;;;;;;;;;;;;GAoCgBC;;;;;;;;;AAlChB,SAASC,KAAT,OAAwD;AAAA,MAAvCC,QAAuC,QAAvCA,QAAuC;AAAA,MAA7BC,KAA6B,QAA7BA,KAA6B;AAAA,MAAtBC,QAAsB,QAAtBA,QAAsB;AAAA,MAATC,KAAS;;AACtD,MAAMC,KAAK,GAAGC,cAAQ,EAAtB;AAEA,MAAMC,UAAU,GACdJ,QAAQ,IACRK,cAAK,CAACC,QAAN,CAAeC,OAAf,CAAuBT,QAAvB,EAAiCU,IAAjC,CACE;AAAA,QAAGP,KAAH,SAAGA,KAAH;AAAA,WAAeA,KAAK,IAAIA,KAAK,CAACD,QAA9B;AAAA,GADF,CAFF;AAMA,MAAMS,EAAE,GAAGC,aAAO,CAChB;AAAA,WAAO,OAAOZ,QAAP,KAAoB,UAApB,mBAA0CH,OAAO,EAAjD,IAAwD,IAA/D;AAAA,GADgB,EAEhB,CAACG,QAAD,CAFgB,CAAlB;AAKA,MAAMa,UAAU,GAAGF,EAAE,KAAK,IAAP,GAAc,EAAd,GAAmB;AAAEG,IAAAA,OAAO,EAAEH;AAAX,GAAtC;AAEA,sBACEJ,6BAACQ,SAAD;AAAQ,IAAA,IAAI,EAAC;AAAb,kBACER,iEAIMJ,KAJN;AAAA,UAEqB,IAAIa;AAFzB,mBAMET,sCAAWM,UAAX,eACEN;AAAA,WAIc,IAAIS,YAJlB;AAAA,WAKqB,MAAMA,YAL3B;AAAA,WAMaZ,KAAK,CAACa,uBANnB;AAAA,WAQMC,oBAAS,CAAC,QAAD;AARf,kBAYEX,6BAACQ,SAAD;AAAQ,IAAA,IAAI,EAAC;AAAb,KACGd,KADH,EAEGK,UAAU,iBACTC;AAIE,IAAA,KAAK,EAAC,UAJR;AAAA,WAEaH,KAAK,CAACe;AAFnB,KAMG,OANH,CAHJ,CAZF,CADF,eA2BEZ,6BAACQ,SAAD;AAAQ,IAAA,IAAI,EAAC;AAAb,KACG,OAAOf,QAAP,KAAoB,UAApB,GAAiCA,QAAQ,CAAC;AAAEW,IAAAA,EAAE,EAAFA;AAAF,GAAD,CAAzC,GAAoDX,QADvD,CA3BF,CANF,CADF,CADF;AA0CD;;AAEDD,KAAK,CAACqB,SAAN,GAAkB;AAChBpB,EAAAA,QAAQ,EAAEqB,eAAS,CAACC,SAAV,CAAoB,CAACD,eAAS,CAACE,IAAX,EAAiBF,eAAS,CAACG,IAA3B,CAApB,CADM;AAEhBvB,EAAAA,KAAK,EAAEoB,eAAS,CAACE,IAFD;AAGhBrB,EAAAA,QAAQ,EAAEmB,eAAS,CAACI;AAHJ,CAAlB;;;;"}
\No newline at end of file