UNPKG

@carrot-farm/mongsil-ui

Version:
54 lines (53 loc) 2.38 kB
var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; var __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; import * as React from 'react'; import { useState, forwardRef, useCallback } from 'react'; var TextArea = forwardRef(function (_a, ref) { var className = _a.className, disabled = _a.disabled, onChange = _a.onChange, args = __rest(_a, ["className", "disabled", "onChange"]); var _b = useState(false), isFocused = _b[0], setIsFocused = _b[1]; // console.log('> input render: ', args.value); /** event: focus in */ var handleFocus = useCallback(function () { if (disabled === true) { return; } setIsFocused(true); }, [disabled]); /** event: focus out */ var handleBlur = useCallback(function () { setIsFocused(false); }, []); /** 값 변경 */ var handleChange = useCallback(function (e) { var _a = e.target, name = _a.name, value = _a.value; // console.log('> change: ', name, value); if (onChange) { onChange(value, name); } }, [onChange]); // console.log('> input: '); return (React.createElement("div", { className: "Mongsil-textarea-root " + (isFocused ? 'focused' : '') + " " + (disabled === true ? 'disabled' : '') + " " + (className !== null && className !== void 0 ? className : ''), ref: ref, onFocus: handleFocus, onBlur: handleBlur }, React.createElement("textarea", __assign({ className: "Mongsil-textarea-base", disabled: disabled, onChange: handleChange }, args)))); }); TextArea.displayName = 'TextArea'; export default React.memo(TextArea);