@harvest-profit/npk
Version:
NPK UI Design System
127 lines • 7.52 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBaseInput = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const BaseInput_module_css_1 = __importDefault(require("./BaseInput.module.css"));
const Placeholder_1 = __importDefault(require("../Placeholder"));
const utils_1 = require("../utils");
const BaseInputContext = react_1.default.createContext({});
const useBaseInput = (props) => {
const inheritedContext = (0, react_1.useContext)(BaseInputContext);
return {
disabled: props.disabled || inheritedContext.disabled || props.loading || inheritedContext.loading,
'aria-label': props['aria-label'] || inheritedContext['aria-label'],
'aria-labelledby': props['aria-labelledby'] || inheritedContext['aria-labelledby'],
id: props.id,
autoFocus: props.autoFocus,
placeholder: props.placeholder,
'aria-invalid': props['aria-invalid'],
'aria-required': props['aria-required'],
'aria-describedby': props['aria-describedby'],
'aria-controls': props['aria-controls'],
'aria-activedescendant': props['aria-activedescendant'],
'aria-autocomplete': props['aria-autocomplete'],
'autoComplete': props['autoComplete'],
'autoCorrect': props['autoCorrect'],
'autoCapitalize': props['autoCapitalize'],
form: props.form,
rows: props.rows,
type: props.type || 'text',
};
};
exports.useBaseInput = useBaseInput;
const isPlainContents = (element) => {
return typeof element === 'string' || typeof element === 'number';
};
const isValidElement = (element) => {
return typeof element === 'string' || react_1.default.isValidElement(element);
};
const preventFocusOnMouseDown = (event) => {
const targetNode = event.target;
if (targetNode.parentNode && targetNode.parentNode.contains(document.activeElement)) {
event.preventDefault();
}
};
const BaseInput = ({ className = '', variant, as: Tag = 'span', disabled, label, labelDescription, info, error, size, align, block, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, children, contentsProps = {}, contentsRef = () => null, containsSegments, onClick, onMouseDown, style, width, loading = false, ...props }) => {
const inheritedContext = (0, react_1.useContext)(BaseInputContext);
variant = variant || inheritedContext.variant;
size = size || inheritedContext.size;
align = align || inheritedContext.align;
disabled = disabled || inheritedContext.disabled;
props['aria-label'] = props['aria-label'] || inheritedContext['aria-label'];
props['aria-labelledby'] = props['aria-labelledby'] || inheritedContext['aria-labelledby'];
const widthStyles = width ? { width } : {};
let renderResult = null;
if (loading) {
const style = { height: null };
if (props.type === 'textarea' && props.rows) {
style.height = `${props.rows * 24}px`;
}
renderResult = (0, jsx_runtime_1.jsx)(Placeholder_1.default, { className: BaseInput_module_css_1.default.BaseInputPlaceholder, width: width || (block ? 'auto' : 210), "data-size": size, style: style });
}
else {
const tagProps = {};
if (props['data-component'])
tagProps['data-component'] = props['data-component'];
renderResult = ((0, jsx_runtime_1.jsxs)(Tag, { className: `${BaseInput_module_css_1.default.BaseInput} ${containsSegments ? BaseInput_module_css_1.default.SegmentedInput : ''} ${label ? '' : className}`, "data-variant": variant, "data-size": size, "data-align": align, "data-block": block, "aria-disabled": disabled, onClick: onClick, onMouseDown: onMouseDown, style: { ...widthStyles, ...style }, "data-textarea": props.type === 'textarea' ? 'true' : undefined, ...tagProps, children: [LeadingVisual && ((0, jsx_runtime_1.jsx)("span", { "data-component": "leadingVisual", onMouseDown: preventFocusOnMouseDown, "data-visual": isPlainContents(LeadingVisual) ? 'text' : 'visual', children: isValidElement(LeadingVisual) ? LeadingVisual : (0, jsx_runtime_1.jsx)(LeadingVisual, {}) })), (0, jsx_runtime_1.jsx)("div", { ...contentsProps, ref: contentsRef, "data-component": "contents", children: (0, jsx_runtime_1.jsx)(BaseInputContext.Provider, { value: {
disabled,
loading,
variant: 'plain',
size,
align,
'aria-label': props['aria-label'],
'aria-labelledby': props['aria-labelledby'],
}, children: children }) }), TrailingVisual && ((0, jsx_runtime_1.jsx)("span", { "data-component": "trailingVisual", onMouseDown: preventFocusOnMouseDown, "data-visual": isPlainContents(TrailingVisual) ? 'text' : 'visual', children: isValidElement(TrailingVisual) ? TrailingVisual : (0, jsx_runtime_1.jsx)(TrailingVisual, {}) }))] }));
}
if (label) {
return ((0, jsx_runtime_1.jsxs)("label", { className: `${BaseInput_module_css_1.default.Label} ${className}`, onClick: (e) => {
if (e.currentTarget.contains(document.activeElement)) {
e.preventDefault();
return;
}
const nextElem = (0, utils_1.nextFocusableElement)({ parentElem: e.currentTarget });
nextElem?.focus();
e.preventDefault();
}, children: [(0, jsx_runtime_1.jsx)("span", { "data-component": "label-contents", children: label }), labelDescription && (0, jsx_runtime_1.jsx)("span", { "data-component": "label-description", children: labelDescription }), renderResult, (info || error) && ((0, jsx_runtime_1.jsx)("span", { "data-component": "label-info", "data-error": !!error, children: error || info }))] }));
}
return renderResult;
};
exports.default = BaseInput;
//# sourceMappingURL=BaseInput.js.map