@wix/design-system
Version:
@wix/design-system
31 lines • 1.99 kB
JavaScript
import React from 'react';
import { classes, st } from '../../CornerRadiusInput.st.css.js';
import { RoundedCorner } from '@wix/wix-ui-icons-common';
import Input from '../../../Input';
import NumberInput from '../../../NumberInput';
import FormField from '../../../FormField';
import { dataHooks } from '../../CornerRadiusInput.constants';
// original icon is top-right
const cornerIcons = {
topLeft: (React.createElement(Input.IconAffix, null,
React.createElement(RoundedCorner, { className: st(classes.cornerIcon, { position: 'topLeft' }) }))),
topRight: (React.createElement(Input.IconAffix, null,
React.createElement(RoundedCorner, { className: st(classes.cornerIcon) }))),
bottomLeft: (React.createElement(Input.IconAffix, null,
React.createElement(RoundedCorner, { className: st(classes.cornerIcon, { position: 'bottomLeft' }) }))),
bottomRight: (React.createElement(Input.IconAffix, null,
React.createElement(RoundedCorner, { className: st(classes.cornerIcon, { position: 'bottomRight' }) }))),
};
const Suffix = ({ children }) => {
return React.createElement(Input.Affix, null, children);
};
const InputField = ({ id, name, position, status, suffix, size, ariaLabel, onInvalid, onChange, value, isLinkingEnabled, linkedOnInvalid, linkedOnChange, linkedOnBlur, min, max, }) => {
const dataHook = dataHooks[position];
const icon = cornerIcons[position];
return (React.createElement(FormField, { status: status },
React.createElement(NumberInput, { id: id, name: name, dataHook: dataHook, size: size, prefix: icon, min: min, max: max, suffix: React.createElement(Suffix, null, suffix || 'px'), hideStepper: true, ariaLabel: ariaLabel, value: value, onInvalid: isLinkingEnabled ? linkedOnInvalid : onInvalid, onChange: isLinkingEnabled ? linkedOnChange : onChange, onBlur: () => {
isLinkingEnabled && linkedOnBlur();
} })));
};
export { InputField };
//# sourceMappingURL=InputField.js.map