@chakra-ui/input
Version:
A React component for input text field
1 lines • 4.57 kB
Source Map (JSON)
{"version":3,"sources":["../src/input-group.tsx"],"sourcesContent":["import { createContext } from \"@chakra-ui/react-context\"\nimport { getValidChildren } from \"@chakra-ui/react-children-utils\"\nimport {\n chakra,\n forwardRef,\n HTMLChakraProps,\n omitThemingProps,\n SystemStyleObject,\n ThemingProps,\n useMultiStyleConfig,\n} from \"@chakra-ui/system\"\nimport { cx } from \"@chakra-ui/shared-utils\"\nimport { compact } from \"@chakra-ui/object-utils\"\nimport { cloneElement } from \"react\"\n\nconst [InputGroupStylesProvider, useInputGroupStyles] = createContext<\n Record<string, SystemStyleObject>\n>({\n name: `InputGroupStylesContext`,\n errorMessage: `useInputGroupStyles returned is 'undefined'. Seems you forgot to wrap the components in \"<InputGroup />\" `,\n})\n\nexport { useInputGroupStyles }\n\nexport interface InputGroupProps\n extends HTMLChakraProps<\"div\">,\n ThemingProps<\"Input\"> {}\n\nexport const InputGroup = forwardRef<InputGroupProps, \"div\">(\n function InputGroup(props, ref) {\n const styles = useMultiStyleConfig(\"Input\", props)\n const { children, className, ...rest } = omitThemingProps(props)\n\n const _className = cx(\"chakra-input__group\", className)\n const groupStyles: InputGroupProps = {}\n\n const validChildren = getValidChildren(children)\n\n const input: any = styles.field\n\n validChildren.forEach((child: any) => {\n if (!styles) return\n\n if (input && child.type.id === \"InputLeftElement\") {\n groupStyles.paddingStart = input.height ?? input.h\n }\n\n if (input && child.type.id === \"InputRightElement\") {\n groupStyles.paddingEnd = input.height ?? input.h\n }\n\n if (child.type.id === \"InputRightAddon\") {\n groupStyles.borderEndRadius = 0\n }\n\n if (child.type.id === \"InputLeftAddon\") {\n groupStyles.borderStartRadius = 0\n }\n })\n\n const clones = validChildren.map((child: any) => {\n /**\n * Make it possible to override the size and variant from `Input`\n */\n\n const theming = compact({\n size: child.props?.size || props.size,\n variant: child.props?.variant || props.variant,\n })\n\n return child.type.id !== \"Input\"\n ? cloneElement(child, theming)\n : cloneElement(child, Object.assign(theming, groupStyles, child.props))\n })\n\n return (\n <chakra.div\n className={_className}\n ref={ref}\n __css={{\n width: \"100%\",\n display: \"flex\",\n position: \"relative\",\n // Parts of inputs override z-index to ensure that they stack correctly on each other\n // Create a new stacking context so that these overrides don't leak out and conflict with other z-indexes\n isolation: \"isolate\",\n ...styles.group,\n }}\n data-group\n {...rest}\n >\n <InputGroupStylesProvider value={styles}>\n {clones}\n </InputGroupStylesProvider>\n </chakra.div>\n )\n },\n)\n\nInputGroup.displayName = \"InputGroup\"\n"],"mappings":";;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EAGA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAS,eAAe;AACxB,SAAS,oBAAoB;AA8ErB;AA5ER,IAAM,CAAC,0BAA0B,mBAAmB,IAAI,cAEtD;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAQM,IAAM,aAAa;AAAA,EACxB,SAASA,YAAW,OAAO,KAAK;AAC9B,UAAM,SAAS,oBAAoB,SAAS,KAAK;AACjD,UAAM,EAAE,UAAU,WAAW,GAAG,KAAK,IAAI,iBAAiB,KAAK;AAE/D,UAAM,aAAa,GAAG,uBAAuB,SAAS;AACtD,UAAM,cAA+B,CAAC;AAEtC,UAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,UAAM,QAAa,OAAO;AAE1B,kBAAc,QAAQ,CAAC,UAAe;AAxC1C;AAyCM,UAAI,CAAC;AAAQ;AAEb,UAAI,SAAS,MAAM,KAAK,OAAO,oBAAoB;AACjD,oBAAY,gBAAe,WAAM,WAAN,YAAgB,MAAM;AAAA,MACnD;AAEA,UAAI,SAAS,MAAM,KAAK,OAAO,qBAAqB;AAClD,oBAAY,cAAa,WAAM,WAAN,YAAgB,MAAM;AAAA,MACjD;AAEA,UAAI,MAAM,KAAK,OAAO,mBAAmB;AACvC,oBAAY,kBAAkB;AAAA,MAChC;AAEA,UAAI,MAAM,KAAK,OAAO,kBAAkB;AACtC,oBAAY,oBAAoB;AAAA,MAClC;AAAA,IACF,CAAC;AAED,UAAM,SAAS,cAAc,IAAI,CAAC,UAAe;AA5DrD;AAiEM,YAAM,UAAU,QAAQ;AAAA,QACtB,QAAM,WAAM,UAAN,mBAAa,SAAQ,MAAM;AAAA,QACjC,WAAS,WAAM,UAAN,mBAAa,YAAW,MAAM;AAAA,MACzC,CAAC;AAED,aAAO,MAAM,KAAK,OAAO,UACrB,aAAa,OAAO,OAAO,IAC3B,aAAa,OAAO,OAAO,OAAO,SAAS,aAAa,MAAM,KAAK,CAAC;AAAA,IAC1E,CAAC;AAED,WACE;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,OAAO;AAAA,UACL,OAAO;AAAA,UACP,SAAS;AAAA,UACT,UAAU;AAAA;AAAA;AAAA,UAGV,WAAW;AAAA,UACX,GAAG,OAAO;AAAA,QACZ;AAAA,QACA,cAAU;AAAA,QACT,GAAG;AAAA,QAEJ,8BAAC,4BAAyB,OAAO,QAC9B,kBACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;","names":["InputGroup"]}