UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

1 lines 4.41 kB
{"version":3,"file":"ControlInput.mjs","names":["Input","Flexbox","ActionIcon"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport type { InputRef } from 'antd';\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Input, { type InputProps } from '@/Input';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n onChange?: (value: string) => void;\n onChangeEnd?: (value: string) => void;\n onValueChanging?: (value: string) => void;\n submitIcon?: ActionIconProps['icon'];\n texts?: {\n reset?: string;\n submit?: string;\n };\n value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n ({\n value,\n onChange,\n onValueChanging,\n onChangeEnd,\n onCompositionEnd,\n onCompositionStart,\n onPressEnter,\n onFocus,\n submitIcon,\n style,\n texts,\n ...rest\n }) => {\n const ref = useRef<InputRef>(null);\n const [input, setInput] = useState<string>(value || '');\n\n const isChineseInput = useRef(false);\n\n useEffect(() => {\n if (value !== undefined) setInput(value);\n }, [value]);\n\n const handleUpload = () => {\n onChange?.(input);\n ref?.current?.blur();\n onChangeEnd?.(input);\n };\n\n return (\n <Input\n autoFocus\n onChange={(e) => {\n setInput(e.target.value);\n onValueChanging?.(e.target.value);\n }}\n onCompositionEnd={(e) => {\n isChineseInput.current = false;\n onCompositionEnd?.(e);\n }}\n onCompositionStart={(e) => {\n isChineseInput.current = true;\n onCompositionStart?.(e);\n }}\n onFocus={onFocus}\n onPressEnter={(e) => {\n if (!e.shiftKey && !isChineseInput.current) {\n e.preventDefault();\n handleUpload();\n onPressEnter?.(e);\n }\n }}\n ref={ref}\n style={{\n width: '100%',\n ...style,\n }}\n suffix={\n value === input ? (\n <span />\n ) : (\n <Flexbox\n gap={2}\n horizontal\n style={{\n marginRight: -4,\n zIndex: 1,\n }}\n >\n <ActionIcon\n icon={RotateCcw}\n onClick={(e) => {\n e.preventDefault();\n setInput(value || '');\n }}\n size=\"small\"\n title={texts?.reset || 'Reset'}\n />\n <ActionIcon\n icon={submitIcon || Save}\n onClick={(e) => {\n e.preventDefault();\n handleUpload();\n }}\n size=\"small\"\n title={texts?.submit || 'Submit'}\n variant={'filled'}\n />\n </Flexbox>\n )\n }\n value={input}\n {...rest}\n />\n );\n },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAiB,KAAK;CAClC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,GAAG;CAEvD,MAAM,iBAAiB,OAAO,MAAM;AAEpC,iBAAgB;AACd,MAAI,UAAU,OAAW,UAAS,MAAM;IACvC,CAAC,MAAM,CAAC;CAEX,MAAM,qBAAqB;AACzB,aAAW,MAAM;AACjB,OAAK,SAAS,MAAM;AACpB,gBAAc,MAAM;;AAGtB,QACE,oBAACA;EACC;EACA,WAAW,MAAM;AACf,YAAS,EAAE,OAAO,MAAM;AACxB,qBAAkB,EAAE,OAAO,MAAM;;EAEnC,mBAAmB,MAAM;AACvB,kBAAe,UAAU;AACzB,sBAAmB,EAAE;;EAEvB,qBAAqB,MAAM;AACzB,kBAAe,UAAU;AACzB,wBAAqB,EAAE;;EAEhB;EACT,eAAe,MAAM;AACnB,OAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;AAC1C,MAAE,gBAAgB;AAClB,kBAAc;AACd,mBAAe,EAAE;;;EAGhB;EACL,OAAO;GACL,OAAO;GACP,GAAG;GACJ;EACD,QACE,UAAU,QACR,oBAAC,WAAO,GAER,qBAACC;GACC,KAAK;GACL;GACA,OAAO;IACL,aAAa;IACb,QAAQ;IACT;cAED,oBAACC;IACC,MAAM;IACN,UAAU,MAAM;AACd,OAAE,gBAAgB;AAClB,cAAS,SAAS,GAAG;;IAEvB,MAAK;IACL,OAAO,OAAO,SAAS;KACvB,EACF,oBAACA;IACC,MAAM,cAAc;IACpB,UAAU,MAAM;AACd,OAAE,gBAAgB;AAClB,mBAAc;;IAEhB,MAAK;IACL,OAAO,OAAO,UAAU;IACxB,SAAS;KACT;IACM;EAGd,OAAO;EACP,GAAI;GACJ;EAGP;AAED,aAAa,cAAc;AAE3B,2BAAe"}