diff --git a/src/Input/Input.js b/src/Input/Input.js index 85232174..5f332dae 100644 --- a/src/Input/Input.js +++ b/src/Input/Input.js @@ -1,15 +1,11 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import atomize from '@quarkly/atomize'; import { Box } from '@quarkly/widgets'; import { useOverrides } from '@quarkly/components'; -import { effects, propInfo, defaultProps, overrides } from './props'; +import { propInfo, defaultProps, overrides } from './props'; import { useUniqueId } from '../utils'; +import InnerInput from './components/InnerInput'; import useFormField from '../Form/hooks/useFormField'; -const Input = atomize.input({ - effects, -}); - const InputComponent = ({ name, type, @@ -20,7 +16,7 @@ const InputComponent = ({ required, disabled, list: listFromProps, - maxlength: maxlengthFromProps, + maxLength: maxLengthFromProps, pattern, min, max, @@ -31,9 +27,9 @@ const InputComponent = ({ const { override, rest } = useOverrides(props, overrides); const id = useUniqueId(); - const maxlength = useMemo(() => { - return parseInt(maxlengthFromProps, 10); - }, [maxlengthFromProps]); + const maxLength = useMemo(() => { + return parseInt(maxLengthFromProps, 10); + }, [maxLengthFromProps]); const list = useMemo(() => { return listFromProps.length > 0 ? listFromProps.split(',') : []; @@ -68,7 +64,7 @@ const InputComponent = ({ return ( - 0 ? `datalist-for-input-${id}` : undefined} - maxlength={maxlength > 0 ? maxlength : undefined} - {...override('Input')} + maxLength={maxLength > 0 ? maxLength : undefined} + {...override('InnerInput')} /> {list.length > 0 && ( @@ -103,7 +99,6 @@ Object.assign(InputComponent, { en: 'Input element', ru: 'Элемент Input', }, - effects, propInfo, defaultProps, overrides, diff --git a/src/Input/components/InnerInput.js b/src/Input/components/InnerInput.js new file mode 100644 index 00000000..e7a9a917 --- /dev/null +++ b/src/Input/components/InnerInput.js @@ -0,0 +1,44 @@ +import atomize from '@quarkly/atomize'; + +export default atomize.input( + { + name: 'InnerInput', + description: { + en: 'Input element', + ru: 'Input element', + }, + effects: { + hover: ':hover', + focus: ':focus', + required: ':required', + placeholder: '::placeholder', + invalid: ':invalid', + disabled: ':disabled', + firstChild: ':first-child', + lastChild: ':last-child', + onlyChild: ':only-child', + firstOfType: ':first-of-type', + lastOfType: ':last-of-type', + onlyOfType: ':only-of-type', + }, + propInfo: {}, + useAliases: false, + }, + { + as: 'input', + defaultValue: '', + 'focus-border-color': '--color-lightD1', + 'box-sizing': 'border-box', + 'border-width': '2px', + 'border-style': 'solid', + 'border-color': '--color-lightD2', + 'border-radius': '2px', + 'padding-top': '6px', + 'padding-bottom': '6px', + 'padding-left': '16px', + 'padding-right': '16px', + font: '--base', + color: '--dark', + outline: 'none', + } +); diff --git a/src/Input/props/effects.js b/src/Input/props/effects.js deleted file mode 100644 index 83fa950e..00000000 --- a/src/Input/props/effects.js +++ /dev/null @@ -1,14 +0,0 @@ -export default { - hover: ':hover', - focus: ':focus', - required: ':required', - placeholder: '::placeholder', - invalid: ':invalid', - disabled: ':disabled', - firstChild: ':first-child', - lastChild: ':last-child', - onlyChild: ':only-child', - firstOfType: ':first-of-type', - lastOfType: ':last-of-type', - onlyOfType: ':only-of-type', -}; diff --git a/src/Input/props/index.js b/src/Input/props/index.js index ec4ba945..d0edfe4d 100644 --- a/src/Input/props/index.js +++ b/src/Input/props/index.js @@ -1,4 +1,3 @@ -export { default as effects } from './effects'; export { default as propInfo } from './propsInfo'; export { default as defaultProps } from './propsDefault'; export { default as overrides } from './overrides'; diff --git a/src/Input/props/overrides.js b/src/Input/props/overrides.js index d1e594eb..3f4b35cf 100644 --- a/src/Input/props/overrides.js +++ b/src/Input/props/overrides.js @@ -1,6 +1,6 @@ export default { - Input: { - kind: 'Input', + InnerInput: { + kind: 'InnerInput', props: { width: '100%', padding: '6px 16px', diff --git a/src/Input/props/propsInfo.js b/src/Input/props/propsInfo.js index 5c04ba15..7e4b6eee 100644 --- a/src/Input/props/propsInfo.js +++ b/src/Input/props/propsInfo.js @@ -130,7 +130,7 @@ export default { category: 'Text', weight: 0.5, }, - maxlength: { + maxLength: { title: 'Max length', description: { en: 'The maximum number of characters allowed in the text',