@legion-ui-kit/react-core
Version:
<div align="center"> <img height="108" width="116" src="https://legion.digitaltelkom.id/favicon.svg?v=4643a71fb65fa61a5f2b266b769ea7b1" /> <h1 align="center">Legion UI Kit - React Core</h1> </div>
1 lines • 6.07 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../../src/components/TextArea/index.tsx"],"sourcesContent":["// Modules\r\nimport { useId } from 'react';\r\nimport cn from 'classnames';\r\n\r\n// Types\r\nimport type { TTextAreaProps, TTextAreaStatus } from './TextArea.type';\r\n\r\n// Styles\r\nimport styles from './styles/styles.module.scss';\r\n\r\n// Components\r\nimport Icon from '../Icon';\r\n\r\n// Helpers\r\nimport { kebabCase } from '../../helpers/typography';\r\n\r\n// Constants\r\nimport { TEXT_AREA_DEFAULT_PROPS, TEXT_AREA_STATUS, TEXT_AREA_VARIANT } from './TextArea.constant';\r\nimport { ICON_NAME } from '../Icon/Icon.constant';\r\n\r\nconst getCaptionIcon = (status: TTextAreaStatus) => {\r\n switch (status) {\r\n case TEXT_AREA_STATUS.error:\r\n return ICON_NAME['error-triangle'];\r\n case TEXT_AREA_STATUS.success:\r\n return ICON_NAME['success-circle'];\r\n default:\r\n return ICON_NAME['info-circle'];\r\n }\r\n};\r\n\r\nconst TextArea = (props: TTextAreaProps) => {\r\n const {\r\n block,\r\n caption,\r\n captionClassName,\r\n captionStyle,\r\n className,\r\n disabled,\r\n hint,\r\n hintClassName,\r\n hintStyle,\r\n id,\r\n inputClassName,\r\n inputStyle,\r\n inputWrapperClassName,\r\n inputWrapperStyle,\r\n label,\r\n labelClassName,\r\n labelStyle,\r\n placeholder,\r\n size = TEXT_AREA_DEFAULT_PROPS.size,\r\n status = TEXT_AREA_DEFAULT_PROPS.status,\r\n style,\r\n variant = TEXT_AREA_DEFAULT_PROPS.variant,\r\n ...restProps\r\n } = props;\r\n const initId = useId();\r\n const inputId = id || `legion_textarea_${kebabCase(initId)}`;\r\n const isOutline = variant === TEXT_AREA_VARIANT.outline;\r\n\r\n const textAreaCN = cn(styles.legion_text_area, styles[size!], styles[status!], className, {\r\n [styles.block]: block,\r\n [styles.disabled]: disabled,\r\n [styles[variant!]]: variant\r\n });\r\n const captionCN = cn(styles.text_area_caption, captionClassName);\r\n const hintCN = cn(styles.text_area_hint, hintClassName);\r\n const inputWrapperCN = cn(styles.input_wrapper, inputWrapperClassName);\r\n const inputCN = cn(styles.text_area_input, inputClassName);\r\n const labelCN = cn(styles.text_area_label, labelClassName);\r\n\r\n const captionIcon = getCaptionIcon(status!);\r\n\r\n return (\r\n <div className={textAreaCN} style={style}>\r\n {label && (\r\n <label\r\n htmlFor={inputId}\r\n className={labelCN}\r\n style={labelStyle}\r\n >\r\n {label}\r\n </label>\r\n )}\r\n <div className={inputWrapperCN} style={inputWrapperStyle}>\r\n\t\t\t\t<textarea\r\n className={inputCN}\r\n id={inputId}\r\n placeholder={placeholder}\r\n disabled={disabled}\r\n style={inputStyle}\r\n {...restProps}\r\n />\r\n {isOutline && (\r\n <svg\r\n className={styles.text_area_outline}\r\n xmlns={'http://www.w3.org/2000/svg'}\r\n >\r\n <rect height={'100%'} width={'100%'} strokeWidth={'2px'} fill={'none'}/>\r\n </svg>\r\n )}\r\n </div>\r\n {caption && (\r\n <p className={captionCN} style={captionStyle}>\r\n <Icon className={styles.caption_icon} icon={captionIcon}/>\r\n {caption}\r\n </p>\r\n )}\r\n {hint && (\r\n <p className={hintCN} style={hintStyle}>\r\n {hint}\r\n </p>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default TextArea;\r\n"],"names":["props","block","caption","captionClassName","captionStyle","className","disabled","hint","hintClassName","hintStyle","id","inputClassName","inputStyle","inputWrapperClassName","inputWrapperStyle","label","labelClassName","labelStyle","placeholder","size","TEXT_AREA_DEFAULT_PROPS","status","style","variant","restProps","initId","useId","inputId","kebabCase","isOutline","TEXT_AREA_VARIANT","outline","textAreaCN","cn","styles","legion_text_area","captionCN","text_area_caption","hintCN","text_area_hint","inputWrapperCN","input_wrapper","inputCN","text_area_input","labelCN","text_area_label","captionIcon","TEXT_AREA_STATUS","error","ICON_NAME","success","getCaptionIcon","_jsxs","children","_jsx","htmlFor","text_area_outline","xmlns","height","width","strokeWidth","fill","Icon","caption_icon","icon"],"mappings":"kaA+BkBA,IAChB,MAAMC,MACJA,EAAKC,QACLA,EAAOC,iBACPA,EAAgBC,aAChBA,EAAYC,UACZA,EAASC,SACTA,EAAQC,KACRA,EAAIC,cACJA,EAAaC,UACbA,EAASC,GACTA,EAAEC,eACFA,EAAcC,WACdA,EAAUC,sBACVA,EAAqBC,kBACrBA,EAAiBC,MACjBA,EAAKC,eACLA,EAAcC,WACdA,EAAUC,YACVA,EAAWC,KACXA,EAAOC,EAAAA,wBAAwBD,KAAIE,OACnCA,EAASD,EAAAA,wBAAwBC,OAAMC,MACvCA,EAAKC,QACLA,EAAUH,EAAAA,wBAAwBG,WAC/BC,GACDxB,EACEyB,EAASC,EAAAA,QACTC,EAAUjB,GAAM,mBAAmBkB,EAAAA,UAAUH,KAC7CI,EAAYN,IAAYO,EAAAA,kBAAkBC,QAE1CC,EAAaC,EAAAA,QAAGC,EAAAA,QAAOC,iBAAkBD,EAAAA,QAAOf,GAAQe,EAAAA,QAAOb,GAAUhB,EAAW,CACxF,CAAC6B,EAAAA,QAAOjC,OAAQA,EAChB,CAACiC,EAAAA,QAAO5B,UAAWA,EACnB,CAAC4B,EAAAA,QAAOX,IAAYA,IAEhBa,EAAYH,EAAAA,QAAGC,UAAOG,kBAAmBlC,GACzCmC,EAASL,EAAAA,QAAGC,UAAOK,eAAgB/B,GACnCgC,EAAiBP,EAAAA,QAAGC,UAAOO,cAAe5B,GAC1C6B,EAAUT,EAAAA,QAAGC,UAAOS,gBAAiBhC,GACrCiC,EAAUX,EAAAA,QAAGC,UAAOW,gBAAiB7B,GAErC8B,EApDe,CAACzB,IACtB,OAAQA,GACN,KAAK0B,EAAAA,iBAAiBC,MACpB,OAAOC,EAAAA,UAAU,kBACnB,KAAKF,EAAAA,iBAAiBG,QACpB,OAAOD,EAAAA,UAAU,kBACnB,QACE,OAAOA,EAAAA,UAAU,iBA6CDE,CAAe9B,GAEnC,OACE+B,OAAA,MAAA,CAAK/C,UAAW2B,EAAYV,MAAOA,EAAK+B,SAAA,CACrCtC,GACCuC,EAAAA,aACEC,QAAS5B,EACTtB,UAAWuC,EACXtB,MAAOL,EAAUoC,SAEhBtC,IAGLqC,EAAAA,KAAA,MAAA,CAAK/C,UAAWmC,EAAgBlB,MAAOR,EAAiBuC,SAAA,CAC1DC,EAAAA,IAAA,WAAA,CACMjD,UAAWqC,EACXhC,GAAIiB,EACJT,YAAaA,EACbZ,SAAUA,EACVgB,MAAOV,KACHY,IAELK,GACCyB,EAAAA,IAAA,MAAA,CACEjD,UAAW6B,EAAAA,QAAOsB,kBAClBC,MAAO,6BAA4BJ,SAEnCC,EAAAA,IAAA,OAAA,CAAMI,OAAQ,OAAQC,MAAO,OAAQC,YAAa,MAAOC,KAAM,cAIpE3D,GACCkD,EAAAA,UAAG/C,UAAW+B,EAAWd,MAAOlB,EAAYiD,SAAA,CAC1CC,EAAAA,IAACQ,UAAI,CAACzD,UAAW6B,EAAAA,QAAO6B,aAAcC,KAAMlB,IAC3C5C,KAGJK,GACC+C,MAAA,IAAA,CAAGjD,UAAWiC,EAAQhB,MAAOb,WAC1BF"}