@xanui/ui 1.2.1 → 1.2.2
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/Autocomplete/index.cjs +3 -1
- package/Autocomplete/index.cjs.map +1 -1
- package/Autocomplete/index.js +3 -1
- package/Autocomplete/index.js.map +1 -1
- package/Input/index.cjs +3 -3
- package/Input/index.cjs.map +1 -1
- package/Input/index.js +3 -3
- package/Input/index.js.map +1 -1
- package/package.json +1 -1
package/Autocomplete/index.cjs
CHANGED
|
@@ -23,7 +23,9 @@ const Autocomplete = (_a) => {
|
|
|
23
23
|
const [open, setOpen] = React.useState(false);
|
|
24
24
|
const menuRef = React.useRef(null);
|
|
25
25
|
React.useEffect(() => {
|
|
26
|
-
|
|
26
|
+
if (!inputValue) {
|
|
27
|
+
setInputValue(value ? getLabel(value) : "");
|
|
28
|
+
}
|
|
27
29
|
}, [value]);
|
|
28
30
|
getLabel !== null && getLabel !== void 0 ? getLabel : (getLabel = (option) => option.toString());
|
|
29
31
|
multiple !== null && multiple !== void 0 ? multiple : (multiple = false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n options: any[] | ((text: string) => Promise<any[]>)\n getLabel: (option: any) => string;\n onChange?: (value: any) => void;\n value?: any;\n multiple?: boolean;\n renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n // input props customization\n disabled?: boolean;\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n const [_options, setOptions] = React.useState<any[]>()\n const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n const [timer, setTimer] = React.useState<any>(null)\n const [loading, setLoading] = React.useState(false)\n const [focused, setFocused] = React.useState(false)\n const [open, setOpen] = React.useState(false)\n const menuRef = React.useRef<any>(null)\n\n useEffect(() => {\n setInputValue(value ? getLabel(value) : \"\")\n }, [value])\n\n getLabel ??= (option: any) => option.toString();\n multiple ??= false;\n\n let startIcons = []\n if (inputProps.startIcon) {\n startIcons.push(inputProps.startIcon)\n }\n\n if (!!value && multiple && Array.isArray(value)) {\n value.map((v: any, index: number) => {\n startIcons.push(<Chip\n key={index}\n size=\"small\"\n label={getLabel!(v)}\n variant={\"fill\"}\n color=\"default\"\n endIcon={<IconButton\n size={20}\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n let newValue = Array.isArray(value) ? [...value] : []\n newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n onChange && onChange(newValue)\n }}\n >\n <Close />\n </IconButton>}\n />)\n })\n }\n\n let endIcons = []\n if (inputProps.endIcon) {\n endIcons.push(inputProps.endIcon)\n }\n if (loading) {\n endIcons.push(<CircleProgress\n key=\"auto-complete-loading-icon\"\n size=\"small\"\n />)\n } else if (!!value && !multiple) {\n endIcons.unshift(<IconButton\n key=\"auto-complete-clear-button\"\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n onChange && onChange(null)\n setInputValue(\"\")\n }}\n >\n <Close />\n </IconButton>)\n }\n\n const loadOptions = async () => {\n setLoading(true)\n let results = []\n if (typeof options === 'function') {\n results = await options(inputValue)\n } else {\n results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n }\n if (!multiple && inputValue) {\n const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n onChange && onChange(find || null)\n }\n setOptions(results)\n setOpen(true)\n setLoading(false)\n }\n\n useEffect(() => {\n if (focused) {\n clearTimeout(timer)\n setTimer(setTimeout(() => {\n loadOptions()\n }, 300))\n } else {\n setOpen(false)\n }\n }, [focused, inputValue])\n\n\n return (\n <>\n <Input\n {...inputProps as any}\n ref={menuRef}\n slotProps={{\n rootContainer: {\n flexWrap: 'wrap',\n ...(multiple ? { height: \"auto\", gap: .5 } : {})\n },\n input: {\n width: multiple ? 'initial' : '100%',\n flex: 1,\n minWidth: 20,\n }\n }}\n startIcon={startIcons.length ? startIcons : undefined}\n endIcon={endIcons}\n value={inputValue}\n onFocus={() => setFocused(true)}\n onKeyDown={(e) => {\n if (inputProps?.onKeyDown) {\n inputProps.onKeyDown(e)\n }\n if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n let newValue = [...value]\n newValue.pop()\n onChange && onChange(newValue)\n }\n }}\n onChange={(e) => {\n const value = e.target.value;\n setInputValue(value)\n\n }}\n />\n <Menu\n target={open ? menuRef.current : null}\n onClickOutside={() => {\n setFocused(false)\n }}\n slotProps={{\n content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\n }}\n >\n <List\n maxHeight={400}\n overflow={\"auto\"}\n >\n {_options?.map((option, index) => (\n renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\n onClick: () => {\n if (multiple) {\n let newValue = Array.isArray(value) ? [...value] : []\n const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n if (!has) {\n newValue.push(option)\n } else {\n newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n }\n onChange && onChange(newValue)\n } else {\n setFocused(false)\n onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }\n })}</div> : <ListItem\n key={index}\n onClick={() => {\n\n if (multiple) {\n let newValue = Array.isArray(value) ? [...value] : []\n const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n if (!has) {\n newValue.push(option)\n } else {\n newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n }\n onChange && onChange(newValue)\n } else {\n setFocused(false)\n onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }}\n >\n {getLabel!(option)}\n </ListItem>\n ))}\n </List>\n </Menu>\n </>\n )\n}\n\nexport default Autocomplete\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoDA;AAAsB;;;AAGnB;AACA;AACA;AACA
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n options: any[] | ((text: string) => Promise<any[]>)\n getLabel: (option: any) => string;\n onChange?: (value: any) => void;\n value?: any;\n multiple?: boolean;\n renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n // input props customization\n disabled?: boolean;\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n const [_options, setOptions] = React.useState<any[]>()\n const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n const [timer, setTimer] = React.useState<any>(null)\n const [loading, setLoading] = React.useState(false)\n const [focused, setFocused] = React.useState(false)\n const [open, setOpen] = React.useState(false)\n const menuRef = React.useRef<any>(null)\n\n useEffect(() => {\n if (!inputValue) {\n setInputValue(value ? getLabel(value) : \"\")\n }\n }, [value])\n\n getLabel ??= (option: any) => option.toString();\n multiple ??= false;\n\n let startIcons = []\n if (inputProps.startIcon) {\n startIcons.push(inputProps.startIcon)\n }\n\n if (!!value && multiple && Array.isArray(value)) {\n value.map((v: any, index: number) => {\n startIcons.push(<Chip\n key={index}\n size=\"small\"\n label={getLabel!(v)}\n variant={\"fill\"}\n color=\"default\"\n endIcon={<IconButton\n size={20}\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n let newValue = Array.isArray(value) ? [...value] : []\n newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n onChange && onChange(newValue)\n }}\n >\n <Close />\n </IconButton>}\n />)\n })\n }\n\n let endIcons = []\n if (inputProps.endIcon) {\n endIcons.push(inputProps.endIcon)\n }\n if (loading) {\n endIcons.push(<CircleProgress\n key=\"auto-complete-loading-icon\"\n size=\"small\"\n />)\n } else if (!!value && !multiple) {\n endIcons.unshift(<IconButton\n key=\"auto-complete-clear-button\"\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n onChange && onChange(null)\n setInputValue(\"\")\n }}\n >\n <Close />\n </IconButton>)\n }\n\n const loadOptions = async () => {\n setLoading(true)\n let results = []\n if (typeof options === 'function') {\n results = await options(inputValue)\n } else {\n results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n }\n if (!multiple && inputValue) {\n const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n onChange && onChange(find || null)\n }\n setOptions(results)\n setOpen(true)\n setLoading(false)\n }\n\n useEffect(() => {\n if (focused) {\n clearTimeout(timer)\n setTimer(setTimeout(() => {\n loadOptions()\n }, 300))\n } else {\n setOpen(false)\n }\n }, [focused, inputValue])\n\n\n return (\n <>\n <Input\n {...inputProps as any}\n ref={menuRef}\n slotProps={{\n rootContainer: {\n flexWrap: 'wrap',\n ...(multiple ? { height: \"auto\", gap: .5 } : {})\n },\n input: {\n width: multiple ? 'initial' : '100%',\n flex: 1,\n minWidth: 20,\n }\n }}\n startIcon={startIcons.length ? startIcons : undefined}\n endIcon={endIcons}\n value={inputValue}\n onFocus={() => setFocused(true)}\n onKeyDown={(e) => {\n if (inputProps?.onKeyDown) {\n inputProps.onKeyDown(e)\n }\n if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n let newValue = [...value]\n newValue.pop()\n onChange && onChange(newValue)\n }\n }}\n onChange={(e) => {\n const value = e.target.value;\n setInputValue(value)\n\n }}\n />\n <Menu\n target={open ? menuRef.current : null}\n onClickOutside={() => {\n setFocused(false)\n }}\n slotProps={{\n content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\n }}\n >\n <List\n maxHeight={400}\n overflow={\"auto\"}\n >\n {_options?.map((option, index) => (\n renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\n onClick: () => {\n if (multiple) {\n let newValue = Array.isArray(value) ? [...value] : []\n const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n if (!has) {\n newValue.push(option)\n } else {\n newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n }\n onChange && onChange(newValue)\n } else {\n setFocused(false)\n onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }\n })}</div> : <ListItem\n key={index}\n onClick={() => {\n\n if (multiple) {\n let newValue = Array.isArray(value) ? [...value] : []\n const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n if (!has) {\n newValue.push(option)\n } else {\n newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n }\n onChange && onChange(newValue)\n } else {\n setFocused(false)\n onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }}\n >\n {getLabel!(option)}\n </ListItem>\n ))}\n </List>\n </Menu>\n </>\n )\n}\n\nexport default Autocomplete\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoDA;AAAsB;;;AAGnB;AACA;AACA;AACA;;;;AAKM;;AAEN;AAEA;;;AAIA;AACG;;AAGH;;;;AAce;;AAEA;;AAMZ;;;AAIH;AACG;;;AAGA;;AAII;AACJ;;AAMM;;;;AAQT;;;AAGG;AACG;;;AAEA;;AAEH;;AAEG;;;;;AAKN;;;;AAKM;AACG;AACH;;;;;AAIN;AAGA;;AAUY;;AAEG;AACA;AACF;AACH;;AAOK;;;AAGA;;AAEA;;AAEN;AAEG;;;;;AAWA;AACF;;;AAUc;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;;AAIR;;AAKQ;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;AAGN;AASrB;;"}
|
package/Autocomplete/index.js
CHANGED
|
@@ -21,7 +21,9 @@ const Autocomplete = (_a) => {
|
|
|
21
21
|
const [open, setOpen] = React.useState(false);
|
|
22
22
|
const menuRef = React.useRef(null);
|
|
23
23
|
useEffect(() => {
|
|
24
|
-
|
|
24
|
+
if (!inputValue) {
|
|
25
|
+
setInputValue(value ? getLabel(value) : "");
|
|
26
|
+
}
|
|
25
27
|
}, [value]);
|
|
26
28
|
getLabel !== null && getLabel !== void 0 ? getLabel : (getLabel = (option) => option.toString());
|
|
27
29
|
multiple !== null && multiple !== void 0 ? multiple : (multiple = false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n options: any[] | ((text: string) => Promise<any[]>)\n getLabel: (option: any) => string;\n onChange?: (value: any) => void;\n value?: any;\n multiple?: boolean;\n renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n // input props customization\n disabled?: boolean;\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n const [_options, setOptions] = React.useState<any[]>()\n const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n const [timer, setTimer] = React.useState<any>(null)\n const [loading, setLoading] = React.useState(false)\n const [focused, setFocused] = React.useState(false)\n const [open, setOpen] = React.useState(false)\n const menuRef = React.useRef<any>(null)\n\n useEffect(() => {\n setInputValue(value ? getLabel(value) : \"\")\n }, [value])\n\n getLabel ??= (option: any) => option.toString();\n multiple ??= false;\n\n let startIcons = []\n if (inputProps.startIcon) {\n startIcons.push(inputProps.startIcon)\n }\n\n if (!!value && multiple && Array.isArray(value)) {\n value.map((v: any, index: number) => {\n startIcons.push(<Chip\n key={index}\n size=\"small\"\n label={getLabel!(v)}\n variant={\"fill\"}\n color=\"default\"\n endIcon={<IconButton\n size={20}\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n let newValue = Array.isArray(value) ? [...value] : []\n newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n onChange && onChange(newValue)\n }}\n >\n <Close />\n </IconButton>}\n />)\n })\n }\n\n let endIcons = []\n if (inputProps.endIcon) {\n endIcons.push(inputProps.endIcon)\n }\n if (loading) {\n endIcons.push(<CircleProgress\n key=\"auto-complete-loading-icon\"\n size=\"small\"\n />)\n } else if (!!value && !multiple) {\n endIcons.unshift(<IconButton\n key=\"auto-complete-clear-button\"\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n onChange && onChange(null)\n setInputValue(\"\")\n }}\n >\n <Close />\n </IconButton>)\n }\n\n const loadOptions = async () => {\n setLoading(true)\n let results = []\n if (typeof options === 'function') {\n results = await options(inputValue)\n } else {\n results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n }\n if (!multiple && inputValue) {\n const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n onChange && onChange(find || null)\n }\n setOptions(results)\n setOpen(true)\n setLoading(false)\n }\n\n useEffect(() => {\n if (focused) {\n clearTimeout(timer)\n setTimer(setTimeout(() => {\n loadOptions()\n }, 300))\n } else {\n setOpen(false)\n }\n }, [focused, inputValue])\n\n\n return (\n <>\n <Input\n {...inputProps as any}\n ref={menuRef}\n slotProps={{\n rootContainer: {\n flexWrap: 'wrap',\n ...(multiple ? { height: \"auto\", gap: .5 } : {})\n },\n input: {\n width: multiple ? 'initial' : '100%',\n flex: 1,\n minWidth: 20,\n }\n }}\n startIcon={startIcons.length ? startIcons : undefined}\n endIcon={endIcons}\n value={inputValue}\n onFocus={() => setFocused(true)}\n onKeyDown={(e) => {\n if (inputProps?.onKeyDown) {\n inputProps.onKeyDown(e)\n }\n if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n let newValue = [...value]\n newValue.pop()\n onChange && onChange(newValue)\n }\n }}\n onChange={(e) => {\n const value = e.target.value;\n setInputValue(value)\n\n }}\n />\n <Menu\n target={open ? menuRef.current : null}\n onClickOutside={() => {\n setFocused(false)\n }}\n slotProps={{\n content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\n }}\n >\n <List\n maxHeight={400}\n overflow={\"auto\"}\n >\n {_options?.map((option, index) => (\n renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\n onClick: () => {\n if (multiple) {\n let newValue = Array.isArray(value) ? [...value] : []\n const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n if (!has) {\n newValue.push(option)\n } else {\n newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n }\n onChange && onChange(newValue)\n } else {\n setFocused(false)\n onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }\n })}</div> : <ListItem\n key={index}\n onClick={() => {\n\n if (multiple) {\n let newValue = Array.isArray(value) ? [...value] : []\n const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n if (!has) {\n newValue.push(option)\n } else {\n newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n }\n onChange && onChange(newValue)\n } else {\n setFocused(false)\n onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }}\n >\n {getLabel!(option)}\n </ListItem>\n ))}\n </List>\n </Menu>\n </>\n )\n}\n\nexport default Autocomplete\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoDA;AAAsB;;;AAGnB;AACA;AACA;AACA
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n options: any[] | ((text: string) => Promise<any[]>)\n getLabel: (option: any) => string;\n onChange?: (value: any) => void;\n value?: any;\n multiple?: boolean;\n renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n // input props customization\n disabled?: boolean;\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n const [_options, setOptions] = React.useState<any[]>()\n const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n const [timer, setTimer] = React.useState<any>(null)\n const [loading, setLoading] = React.useState(false)\n const [focused, setFocused] = React.useState(false)\n const [open, setOpen] = React.useState(false)\n const menuRef = React.useRef<any>(null)\n\n useEffect(() => {\n if (!inputValue) {\n setInputValue(value ? getLabel(value) : \"\")\n }\n }, [value])\n\n getLabel ??= (option: any) => option.toString();\n multiple ??= false;\n\n let startIcons = []\n if (inputProps.startIcon) {\n startIcons.push(inputProps.startIcon)\n }\n\n if (!!value && multiple && Array.isArray(value)) {\n value.map((v: any, index: number) => {\n startIcons.push(<Chip\n key={index}\n size=\"small\"\n label={getLabel!(v)}\n variant={\"fill\"}\n color=\"default\"\n endIcon={<IconButton\n size={20}\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n let newValue = Array.isArray(value) ? [...value] : []\n newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n onChange && onChange(newValue)\n }}\n >\n <Close />\n </IconButton>}\n />)\n })\n }\n\n let endIcons = []\n if (inputProps.endIcon) {\n endIcons.push(inputProps.endIcon)\n }\n if (loading) {\n endIcons.push(<CircleProgress\n key=\"auto-complete-loading-icon\"\n size=\"small\"\n />)\n } else if (!!value && !multiple) {\n endIcons.unshift(<IconButton\n key=\"auto-complete-clear-button\"\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n onChange && onChange(null)\n setInputValue(\"\")\n }}\n >\n <Close />\n </IconButton>)\n }\n\n const loadOptions = async () => {\n setLoading(true)\n let results = []\n if (typeof options === 'function') {\n results = await options(inputValue)\n } else {\n results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n }\n if (!multiple && inputValue) {\n const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n onChange && onChange(find || null)\n }\n setOptions(results)\n setOpen(true)\n setLoading(false)\n }\n\n useEffect(() => {\n if (focused) {\n clearTimeout(timer)\n setTimer(setTimeout(() => {\n loadOptions()\n }, 300))\n } else {\n setOpen(false)\n }\n }, [focused, inputValue])\n\n\n return (\n <>\n <Input\n {...inputProps as any}\n ref={menuRef}\n slotProps={{\n rootContainer: {\n flexWrap: 'wrap',\n ...(multiple ? { height: \"auto\", gap: .5 } : {})\n },\n input: {\n width: multiple ? 'initial' : '100%',\n flex: 1,\n minWidth: 20,\n }\n }}\n startIcon={startIcons.length ? startIcons : undefined}\n endIcon={endIcons}\n value={inputValue}\n onFocus={() => setFocused(true)}\n onKeyDown={(e) => {\n if (inputProps?.onKeyDown) {\n inputProps.onKeyDown(e)\n }\n if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n let newValue = [...value]\n newValue.pop()\n onChange && onChange(newValue)\n }\n }}\n onChange={(e) => {\n const value = e.target.value;\n setInputValue(value)\n\n }}\n />\n <Menu\n target={open ? menuRef.current : null}\n onClickOutside={() => {\n setFocused(false)\n }}\n slotProps={{\n content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\n }}\n >\n <List\n maxHeight={400}\n overflow={\"auto\"}\n >\n {_options?.map((option, index) => (\n renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\n onClick: () => {\n if (multiple) {\n let newValue = Array.isArray(value) ? [...value] : []\n const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n if (!has) {\n newValue.push(option)\n } else {\n newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n }\n onChange && onChange(newValue)\n } else {\n setFocused(false)\n onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }\n })}</div> : <ListItem\n key={index}\n onClick={() => {\n\n if (multiple) {\n let newValue = Array.isArray(value) ? [...value] : []\n const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n if (!has) {\n newValue.push(option)\n } else {\n newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n }\n onChange && onChange(newValue)\n } else {\n setFocused(false)\n onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }}\n >\n {getLabel!(option)}\n </ListItem>\n ))}\n </List>\n </Menu>\n </>\n )\n}\n\nexport default Autocomplete\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoDA;AAAsB;;;AAGnB;AACA;AACA;AACA;;;;AAKM;;AAEN;AAEA;;;AAIA;AACG;;AAGH;;;;AAce;;AAEA;;AAMZ;;;AAIH;AACG;;;AAGA;;AAII;AACJ;;AAMM;;;;AAQT;;;AAGG;AACG;;;AAEA;;AAEH;;AAEG;;;;;AAKN;;;;AAKM;AACG;AACH;;;;;AAIN;AAGA;;AAUY;;AAEG;AACA;AACF;AACH;;AAOK;;;AAGA;;AAEA;;AAEN;AAEG;;;;;AAWA;AACF;;;AAUc;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;;AAIR;;AAKQ;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;AAGN;AASrB;;"}
|
package/Input/index.cjs
CHANGED
|
@@ -110,14 +110,14 @@ const Input = React.forwardRef((_a, ref) => {
|
|
|
110
110
|
}, children: [!!label && jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { ref: refs === null || refs === void 0 ? void 0 : refs.label, children: label })), jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputRoot, { ref: refs === null || refs === void 0 ? void 0 : refs.inputRoot, baseClass: 'input-root', sxr: {
|
|
111
111
|
width: "100%",
|
|
112
112
|
overflow: "hidden",
|
|
113
|
-
}, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active": {
|
|
113
|
+
}, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active": {
|
|
114
114
|
"-webkit-text-fill-color": "text.primary",
|
|
115
115
|
"box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,
|
|
116
116
|
transition: "background-color 5000s ease-in-out 0s"
|
|
117
117
|
}, "& textarea": {
|
|
118
118
|
resize: "none"
|
|
119
119
|
} }), (!!startIcon && {
|
|
120
|
-
"& :first-child:not(.xui-input)": {
|
|
120
|
+
"& > :first-child:not(.xui-input)": {
|
|
121
121
|
height: "100%",
|
|
122
122
|
alignItems: 'center',
|
|
123
123
|
justifyContent: "center",
|
|
@@ -126,7 +126,7 @@ const Input = React.forwardRef((_a, ref) => {
|
|
|
126
126
|
flex: "0 0 auto",
|
|
127
127
|
},
|
|
128
128
|
})), (!!endIcon && {
|
|
129
|
-
"& :last-child:not(.xui-input)": {
|
|
129
|
+
"& > :last-child:not(.xui-input)": {
|
|
130
130
|
height: "100%",
|
|
131
131
|
alignItems: 'center',
|
|
132
132
|
justifyContent: "center",
|
package/Input/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n value?: string;\n type?: TagProps<'input'>['type'];\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onChange?: (e: React.ChangeEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n refs?: {\n inputRoot?: React.Ref<\"div\">;\n label?: React.Ref<\"label\">;\n rootContainer?: React.Ref<\"div\">;\n // startIcon?: React.Ref<ReactElement>;\n // endIcon?: React.Ref<ReactElement>;\n // inputContainer?: React.Ref<\"div\">;\n input?: React.Ref<'input' | 'textarea'>;\n helperText?: React.Ref<\"div\">;\n };\n\n slotProps?: {\n inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n label?: Omit<LabelProps, \"children\">;\n rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n // startIcon?: Omit<TagProps<'div'>, \"children\">;\n // endIcon?: Omit<TagProps<'div'>, \"children\">;\n // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n helperText?: Omit<TagProps<\"div\">, \"children\">;\n input?: Partial<TagProps<T>>;\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n color,\n label,\n name,\n placeholder,\n type,\n readOnly,\n autoFocus,\n autoComplete,\n onFocus,\n onBlur,\n onChange,\n onKeyDown,\n onKeyUp,\n\n focused,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n fullWidth,\n slotProps,\n\n ...rest\n }, theme] = useInterface<any>(\"Input\", props, {})\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (iconPlacement) _p.iconPlacement = iconPlacement\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (helperText) _p.helperText = helperText\n if (size) _p.size = size\n if (rows) _p.rows = rows\n if (minRows) _p.minRows = minRows\n if (maxRows) _p.maxRows = maxRows\n const p: any = useBreakpointProps(_p)\n startIcon = p.startIcon\n endIcon = p.endIcon\n iconPlacement = p.iconPlacement\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n helperText = p.helperText\n size = p.size ?? 'medium'\n rows = p.rows\n minRows = p.minRows\n maxRows = p.maxRows\n\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n let _focus = focused || _focused\n const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n useEffect(() => {\n if (autoFocus) {\n setTimeout(() => {\n inputRef.current?.focus()\n }, 100);\n }\n }, [autoFocus])\n\n let _rows = useMemo(() => {\n if (rows) return rows\n if (value && multiline) {\n let lines = (value as string).split(`\\n`).length\n if (minRows && minRows > lines) {\n return minRows\n } else if (maxRows && maxRows < lines) {\n return maxRows\n } else {\n return lines\n }\n }\n }, [value]) || 1\n\n const sizes: any = {\n small: {\n height: 38,\n gap: .5,\n fontSize: 'button',\n },\n medium: {\n height: 46,\n gap: 1,\n fontSize: \"text\"\n },\n large: {\n height: 52,\n gap: 1,\n fontSize: 'big'\n }\n }\n\n const _size = sizes[size]\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n borderColor = error ? \"danger.primary\" : borderColor\n let multiprops: any = {}\n if (multiline) {\n multiprops = {\n rows: _rows,\n sx: {\n resize: \"none\"\n }\n }\n }\n\n return (\n <Tag\n width={fullWidth ? \"100%\" : \"auto\"}\n {...rest}\n ref={ref}\n baseClass=\"input-wrapper\"\n sxr={{\n display: 'flex',\n flexDirection: 'column',\n gap: .5,\n }}\n >\n {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\n <Tag\n {...slotProps?.inputRoot}\n ref={refs?.inputRoot}\n baseClass={'input-root'}\n sxr={{\n width: \"100%\",\n overflow: \"hidden\",\n }}\n >\n <Tag\n {...slotProps?.rootContainer}\n ref={refs?.rootContainer}\n baseClass='input-root-container'\n sxr={{\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n transitionProperty: \"border, box-shadow, background\",\n bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n border: variant === \"text\" ? 0 : \"1px solid\",\n borderColor: borderColor,\n borderRadius: 1,\n px: 1,\n // py: .5,\n ..._size,\n height: multiline ? \"auto\" : _size.height,\n minHeight: _size.height,\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n \"-webkit-text-fill-color\": \"text.primary\",\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n transition: \"background-color 5000s ease-in-out 0s\"\n } as any,\n \"& textarea\": {\n resize: \"none\"\n },\n\n ...(!!startIcon && {\n \"& :first-child:not(.xui-input)\": {\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n flex: \"0 0 auto\",\n },\n }),\n\n ...(!!endIcon && {\n \"& :last-child:not(.xui-input)\": {\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n flex: \"0 0 auto\",\n },\n })\n\n }}\n disabled={disabled || false}\n >\n {startIcon}\n <Tag\n {...slotProps?.input}\n ref={inputMergeRef}\n baseClass='input'\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n sxr={{\n border: 0,\n outline: 0,\n bgcolor: \"transparent\",\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: _size.fontSize,\n height: multiline ? \"auto\" : _size.height + \"px!important\",\n width: \"100%\",\n maxHeight: 200,\n }}\n value={value}\n onChange={onChange}\n onFocus={(e: any) => {\n focused ?? setFocused(true)\n onFocus && onFocus(e)\n }}\n onBlur={(e: any) => {\n focused ?? setFocused(false)\n onBlur && onBlur(e)\n }}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n name={name}\n placeholder={placeholder}\n type={type}\n readOnly={readOnly}\n autoComplete={autoComplete}\n />\n {endIcon}\n </Tag>\n {helperText && <Tag\n {...slotProps?.helperText}\n ref={refs?.helperText}\n baseClass=\"input-helper-text\"\n sxr={{\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: \"small\",\n lineHeight: \"text\",\n fontWeight: 'text',\n pl: .5,\n }}\n >{helperText}</Tag>}\n </Tag>\n </Tag>\n )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAaG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AAiBA;AACA;AACA;AACA;AACH;AAKrB;;"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n value?: string;\n type?: TagProps<'input'>['type'];\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onChange?: (e: React.ChangeEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n refs?: {\n inputRoot?: React.Ref<\"div\">;\n label?: React.Ref<\"label\">;\n rootContainer?: React.Ref<\"div\">;\n // startIcon?: React.Ref<ReactElement>;\n // endIcon?: React.Ref<ReactElement>;\n // inputContainer?: React.Ref<\"div\">;\n input?: React.Ref<'input' | 'textarea'>;\n helperText?: React.Ref<\"div\">;\n };\n\n slotProps?: {\n inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n label?: Omit<LabelProps, \"children\">;\n rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n // startIcon?: Omit<TagProps<'div'>, \"children\">;\n // endIcon?: Omit<TagProps<'div'>, \"children\">;\n // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n helperText?: Omit<TagProps<\"div\">, \"children\">;\n input?: Partial<TagProps<T>>;\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n color,\n label,\n name,\n placeholder,\n type,\n readOnly,\n autoFocus,\n autoComplete,\n onFocus,\n onBlur,\n onChange,\n onKeyDown,\n onKeyUp,\n\n focused,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n fullWidth,\n slotProps,\n\n ...rest\n }, theme] = useInterface<any>(\"Input\", props, {})\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (iconPlacement) _p.iconPlacement = iconPlacement\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (helperText) _p.helperText = helperText\n if (size) _p.size = size\n if (rows) _p.rows = rows\n if (minRows) _p.minRows = minRows\n if (maxRows) _p.maxRows = maxRows\n const p: any = useBreakpointProps(_p)\n startIcon = p.startIcon\n endIcon = p.endIcon\n iconPlacement = p.iconPlacement\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n helperText = p.helperText\n size = p.size ?? 'medium'\n rows = p.rows\n minRows = p.minRows\n maxRows = p.maxRows\n\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n let _focus = focused || _focused\n const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n useEffect(() => {\n if (autoFocus) {\n setTimeout(() => {\n inputRef.current?.focus()\n }, 100);\n }\n }, [autoFocus])\n\n let _rows = useMemo(() => {\n if (rows) return rows\n if (value && multiline) {\n let lines = (value as string).split(`\\n`).length\n if (minRows && minRows > lines) {\n return minRows\n } else if (maxRows && maxRows < lines) {\n return maxRows\n } else {\n return lines\n }\n }\n }, [value]) || 1\n\n const sizes: any = {\n small: {\n height: 38,\n gap: .5,\n fontSize: 'button',\n },\n medium: {\n height: 46,\n gap: 1,\n fontSize: \"text\"\n },\n large: {\n height: 52,\n gap: 1,\n fontSize: 'big'\n }\n }\n\n const _size = sizes[size]\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n borderColor = error ? \"danger.primary\" : borderColor\n let multiprops: any = {}\n if (multiline) {\n multiprops = {\n rows: _rows,\n sx: {\n resize: \"none\"\n }\n }\n }\n\n return (\n <Tag\n width={fullWidth ? \"100%\" : \"auto\"}\n {...rest}\n ref={ref}\n baseClass=\"input-wrapper\"\n sxr={{\n display: 'flex',\n flexDirection: 'column',\n gap: .5,\n }}\n >\n {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\n <Tag\n {...slotProps?.inputRoot}\n ref={refs?.inputRoot}\n baseClass={'input-root'}\n sxr={{\n width: \"100%\",\n overflow: \"hidden\",\n }}\n >\n <Tag\n {...slotProps?.rootContainer}\n ref={refs?.rootContainer}\n baseClass='input-root-container'\n sxr={{\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n transitionProperty: \"border, box-shadow, background\",\n bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n border: variant === \"text\" ? 0 : \"1px solid\",\n borderColor: borderColor,\n borderRadius: 1,\n px: 1,\n // py: .5,\n ..._size,\n height: multiline ? \"auto\" : _size.height,\n minHeight: _size.height,\n \"& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active\": {\n \"-webkit-text-fill-color\": \"text.primary\",\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n transition: \"background-color 5000s ease-in-out 0s\"\n } as any,\n \"& textarea\": {\n resize: \"none\"\n },\n\n ...(!!startIcon && {\n \"& > :first-child:not(.xui-input)\": {\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n flex: \"0 0 auto\",\n },\n }),\n\n ...(!!endIcon && {\n \"& > :last-child:not(.xui-input)\": {\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n flex: \"0 0 auto\",\n },\n })\n\n }}\n disabled={disabled || false}\n >\n {startIcon}\n <Tag\n {...slotProps?.input}\n ref={inputMergeRef}\n baseClass='input'\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n sxr={{\n border: 0,\n outline: 0,\n bgcolor: \"transparent\",\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: _size.fontSize,\n height: multiline ? \"auto\" : _size.height + \"px!important\",\n width: \"100%\",\n maxHeight: 200,\n }}\n value={value}\n onChange={onChange}\n onFocus={(e: any) => {\n focused ?? setFocused(true)\n onFocus && onFocus(e)\n }}\n onBlur={(e: any) => {\n focused ?? setFocused(false)\n onBlur && onBlur(e)\n }}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n name={name}\n placeholder={placeholder}\n type={type}\n readOnly={readOnly}\n autoComplete={autoComplete}\n />\n {endIcon}\n </Tag>\n {helperText && <Tag\n {...slotProps?.helperText}\n ref={refs?.helperText}\n baseClass=\"input-helper-text\"\n sxr={{\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: \"small\",\n lineHeight: \"text\",\n fontWeight: 'text',\n pl: .5,\n }}\n >{helperText}</Tag>}\n </Tag>\n </Tag>\n )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAaG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AAiBA;AACA;AACA;AACA;AACH;AAKrB;;"}
|
package/Input/index.js
CHANGED
|
@@ -108,14 +108,14 @@ const Input = React.forwardRef((_a, ref) => {
|
|
|
108
108
|
}, children: [!!label && jsx(Label, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { ref: refs === null || refs === void 0 ? void 0 : refs.label, children: label })), jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputRoot, { ref: refs === null || refs === void 0 ? void 0 : refs.inputRoot, baseClass: 'input-root', sxr: {
|
|
109
109
|
width: "100%",
|
|
110
110
|
overflow: "hidden",
|
|
111
|
-
}, children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active": {
|
|
111
|
+
}, children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active": {
|
|
112
112
|
"-webkit-text-fill-color": "text.primary",
|
|
113
113
|
"box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,
|
|
114
114
|
transition: "background-color 5000s ease-in-out 0s"
|
|
115
115
|
}, "& textarea": {
|
|
116
116
|
resize: "none"
|
|
117
117
|
} }), (!!startIcon && {
|
|
118
|
-
"& :first-child:not(.xui-input)": {
|
|
118
|
+
"& > :first-child:not(.xui-input)": {
|
|
119
119
|
height: "100%",
|
|
120
120
|
alignItems: 'center',
|
|
121
121
|
justifyContent: "center",
|
|
@@ -124,7 +124,7 @@ const Input = React.forwardRef((_a, ref) => {
|
|
|
124
124
|
flex: "0 0 auto",
|
|
125
125
|
},
|
|
126
126
|
})), (!!endIcon && {
|
|
127
|
-
"& :last-child:not(.xui-input)": {
|
|
127
|
+
"& > :last-child:not(.xui-input)": {
|
|
128
128
|
height: "100%",
|
|
129
129
|
alignItems: 'center',
|
|
130
130
|
justifyContent: "center",
|
package/Input/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n value?: string;\n type?: TagProps<'input'>['type'];\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onChange?: (e: React.ChangeEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n refs?: {\n inputRoot?: React.Ref<\"div\">;\n label?: React.Ref<\"label\">;\n rootContainer?: React.Ref<\"div\">;\n // startIcon?: React.Ref<ReactElement>;\n // endIcon?: React.Ref<ReactElement>;\n // inputContainer?: React.Ref<\"div\">;\n input?: React.Ref<'input' | 'textarea'>;\n helperText?: React.Ref<\"div\">;\n };\n\n slotProps?: {\n inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n label?: Omit<LabelProps, \"children\">;\n rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n // startIcon?: Omit<TagProps<'div'>, \"children\">;\n // endIcon?: Omit<TagProps<'div'>, \"children\">;\n // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n helperText?: Omit<TagProps<\"div\">, \"children\">;\n input?: Partial<TagProps<T>>;\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n color,\n label,\n name,\n placeholder,\n type,\n readOnly,\n autoFocus,\n autoComplete,\n onFocus,\n onBlur,\n onChange,\n onKeyDown,\n onKeyUp,\n\n focused,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n fullWidth,\n slotProps,\n\n ...rest\n }, theme] = useInterface<any>(\"Input\", props, {})\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (iconPlacement) _p.iconPlacement = iconPlacement\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (helperText) _p.helperText = helperText\n if (size) _p.size = size\n if (rows) _p.rows = rows\n if (minRows) _p.minRows = minRows\n if (maxRows) _p.maxRows = maxRows\n const p: any = useBreakpointProps(_p)\n startIcon = p.startIcon\n endIcon = p.endIcon\n iconPlacement = p.iconPlacement\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n helperText = p.helperText\n size = p.size ?? 'medium'\n rows = p.rows\n minRows = p.minRows\n maxRows = p.maxRows\n\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n let _focus = focused || _focused\n const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n useEffect(() => {\n if (autoFocus) {\n setTimeout(() => {\n inputRef.current?.focus()\n }, 100);\n }\n }, [autoFocus])\n\n let _rows = useMemo(() => {\n if (rows) return rows\n if (value && multiline) {\n let lines = (value as string).split(`\\n`).length\n if (minRows && minRows > lines) {\n return minRows\n } else if (maxRows && maxRows < lines) {\n return maxRows\n } else {\n return lines\n }\n }\n }, [value]) || 1\n\n const sizes: any = {\n small: {\n height: 38,\n gap: .5,\n fontSize: 'button',\n },\n medium: {\n height: 46,\n gap: 1,\n fontSize: \"text\"\n },\n large: {\n height: 52,\n gap: 1,\n fontSize: 'big'\n }\n }\n\n const _size = sizes[size]\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n borderColor = error ? \"danger.primary\" : borderColor\n let multiprops: any = {}\n if (multiline) {\n multiprops = {\n rows: _rows,\n sx: {\n resize: \"none\"\n }\n }\n }\n\n return (\n <Tag\n width={fullWidth ? \"100%\" : \"auto\"}\n {...rest}\n ref={ref}\n baseClass=\"input-wrapper\"\n sxr={{\n display: 'flex',\n flexDirection: 'column',\n gap: .5,\n }}\n >\n {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\n <Tag\n {...slotProps?.inputRoot}\n ref={refs?.inputRoot}\n baseClass={'input-root'}\n sxr={{\n width: \"100%\",\n overflow: \"hidden\",\n }}\n >\n <Tag\n {...slotProps?.rootContainer}\n ref={refs?.rootContainer}\n baseClass='input-root-container'\n sxr={{\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n transitionProperty: \"border, box-shadow, background\",\n bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n border: variant === \"text\" ? 0 : \"1px solid\",\n borderColor: borderColor,\n borderRadius: 1,\n px: 1,\n // py: .5,\n ..._size,\n height: multiline ? \"auto\" : _size.height,\n minHeight: _size.height,\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n \"-webkit-text-fill-color\": \"text.primary\",\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n transition: \"background-color 5000s ease-in-out 0s\"\n } as any,\n \"& textarea\": {\n resize: \"none\"\n },\n\n ...(!!startIcon && {\n \"& :first-child:not(.xui-input)\": {\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n flex: \"0 0 auto\",\n },\n }),\n\n ...(!!endIcon && {\n \"& :last-child:not(.xui-input)\": {\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n flex: \"0 0 auto\",\n },\n })\n\n }}\n disabled={disabled || false}\n >\n {startIcon}\n <Tag\n {...slotProps?.input}\n ref={inputMergeRef}\n baseClass='input'\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n sxr={{\n border: 0,\n outline: 0,\n bgcolor: \"transparent\",\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: _size.fontSize,\n height: multiline ? \"auto\" : _size.height + \"px!important\",\n width: \"100%\",\n maxHeight: 200,\n }}\n value={value}\n onChange={onChange}\n onFocus={(e: any) => {\n focused ?? setFocused(true)\n onFocus && onFocus(e)\n }}\n onBlur={(e: any) => {\n focused ?? setFocused(false)\n onBlur && onBlur(e)\n }}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n name={name}\n placeholder={placeholder}\n type={type}\n readOnly={readOnly}\n autoComplete={autoComplete}\n />\n {endIcon}\n </Tag>\n {helperText && <Tag\n {...slotProps?.helperText}\n ref={refs?.helperText}\n baseClass=\"input-helper-text\"\n sxr={{\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: \"small\",\n lineHeight: \"text\",\n fontWeight: 'text',\n pl: .5,\n }}\n >{helperText}</Tag>}\n </Tag>\n </Tag>\n )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAaG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AAiBA;AACA;AACA;AACA;AACH;AAKrB;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n value?: string;\n type?: TagProps<'input'>['type'];\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onChange?: (e: React.ChangeEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n refs?: {\n inputRoot?: React.Ref<\"div\">;\n label?: React.Ref<\"label\">;\n rootContainer?: React.Ref<\"div\">;\n // startIcon?: React.Ref<ReactElement>;\n // endIcon?: React.Ref<ReactElement>;\n // inputContainer?: React.Ref<\"div\">;\n input?: React.Ref<'input' | 'textarea'>;\n helperText?: React.Ref<\"div\">;\n };\n\n slotProps?: {\n inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n label?: Omit<LabelProps, \"children\">;\n rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n // startIcon?: Omit<TagProps<'div'>, \"children\">;\n // endIcon?: Omit<TagProps<'div'>, \"children\">;\n // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n helperText?: Omit<TagProps<\"div\">, \"children\">;\n input?: Partial<TagProps<T>>;\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n color,\n label,\n name,\n placeholder,\n type,\n readOnly,\n autoFocus,\n autoComplete,\n onFocus,\n onBlur,\n onChange,\n onKeyDown,\n onKeyUp,\n\n focused,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n fullWidth,\n slotProps,\n\n ...rest\n }, theme] = useInterface<any>(\"Input\", props, {})\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (iconPlacement) _p.iconPlacement = iconPlacement\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (helperText) _p.helperText = helperText\n if (size) _p.size = size\n if (rows) _p.rows = rows\n if (minRows) _p.minRows = minRows\n if (maxRows) _p.maxRows = maxRows\n const p: any = useBreakpointProps(_p)\n startIcon = p.startIcon\n endIcon = p.endIcon\n iconPlacement = p.iconPlacement\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n helperText = p.helperText\n size = p.size ?? 'medium'\n rows = p.rows\n minRows = p.minRows\n maxRows = p.maxRows\n\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n let _focus = focused || _focused\n const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n useEffect(() => {\n if (autoFocus) {\n setTimeout(() => {\n inputRef.current?.focus()\n }, 100);\n }\n }, [autoFocus])\n\n let _rows = useMemo(() => {\n if (rows) return rows\n if (value && multiline) {\n let lines = (value as string).split(`\\n`).length\n if (minRows && minRows > lines) {\n return minRows\n } else if (maxRows && maxRows < lines) {\n return maxRows\n } else {\n return lines\n }\n }\n }, [value]) || 1\n\n const sizes: any = {\n small: {\n height: 38,\n gap: .5,\n fontSize: 'button',\n },\n medium: {\n height: 46,\n gap: 1,\n fontSize: \"text\"\n },\n large: {\n height: 52,\n gap: 1,\n fontSize: 'big'\n }\n }\n\n const _size = sizes[size]\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n borderColor = error ? \"danger.primary\" : borderColor\n let multiprops: any = {}\n if (multiline) {\n multiprops = {\n rows: _rows,\n sx: {\n resize: \"none\"\n }\n }\n }\n\n return (\n <Tag\n width={fullWidth ? \"100%\" : \"auto\"}\n {...rest}\n ref={ref}\n baseClass=\"input-wrapper\"\n sxr={{\n display: 'flex',\n flexDirection: 'column',\n gap: .5,\n }}\n >\n {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\n <Tag\n {...slotProps?.inputRoot}\n ref={refs?.inputRoot}\n baseClass={'input-root'}\n sxr={{\n width: \"100%\",\n overflow: \"hidden\",\n }}\n >\n <Tag\n {...slotProps?.rootContainer}\n ref={refs?.rootContainer}\n baseClass='input-root-container'\n sxr={{\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n transitionProperty: \"border, box-shadow, background\",\n bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n border: variant === \"text\" ? 0 : \"1px solid\",\n borderColor: borderColor,\n borderRadius: 1,\n px: 1,\n // py: .5,\n ..._size,\n height: multiline ? \"auto\" : _size.height,\n minHeight: _size.height,\n \"& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active\": {\n \"-webkit-text-fill-color\": \"text.primary\",\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n transition: \"background-color 5000s ease-in-out 0s\"\n } as any,\n \"& textarea\": {\n resize: \"none\"\n },\n\n ...(!!startIcon && {\n \"& > :first-child:not(.xui-input)\": {\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n flex: \"0 0 auto\",\n },\n }),\n\n ...(!!endIcon && {\n \"& > :last-child:not(.xui-input)\": {\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n flex: \"0 0 auto\",\n },\n })\n\n }}\n disabled={disabled || false}\n >\n {startIcon}\n <Tag\n {...slotProps?.input}\n ref={inputMergeRef}\n baseClass='input'\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n sxr={{\n border: 0,\n outline: 0,\n bgcolor: \"transparent\",\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: _size.fontSize,\n height: multiline ? \"auto\" : _size.height + \"px!important\",\n width: \"100%\",\n maxHeight: 200,\n }}\n value={value}\n onChange={onChange}\n onFocus={(e: any) => {\n focused ?? setFocused(true)\n onFocus && onFocus(e)\n }}\n onBlur={(e: any) => {\n focused ?? setFocused(false)\n onBlur && onBlur(e)\n }}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n name={name}\n placeholder={placeholder}\n type={type}\n readOnly={readOnly}\n autoComplete={autoComplete}\n />\n {endIcon}\n </Tag>\n {helperText && <Tag\n {...slotProps?.helperText}\n ref={refs?.helperText}\n baseClass=\"input-helper-text\"\n sxr={{\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: \"small\",\n lineHeight: \"text\",\n fontWeight: 'text',\n pl: .5,\n }}\n >{helperText}</Tag>}\n </Tag>\n </Tag>\n )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAaG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AAiBA;AACA;AACA;AACA;AACH;AAKrB;;"}
|