chenw-tool/pocket-input/pocket-input.js

React components using pure Bootstrap 5+ which does not contain any external style and script libraries.

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("react"));
	else if(typeof define === 'function' && define.amd)
		define("myInput", ["react"], factory);
	else if(typeof exports === 'object')
		exports["myInput"] = factory(require("react"));
	else
		root["myInput"] = factory(root["react"]);
})(this, (__WEBPACK_EXTERNAL_MODULE_react__) => {
return /******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./src/Input.scss":
/*!************************!*\
  !*** ./src/Input.scss ***!
  \************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://myInput/./src/Input.scss?");

/***/ }),

/***/ "./src/Input.tsx":
/*!***********************!*\
  !*** ./src/Input.tsx ***!
  \***********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Input_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Input.scss */ \"./src/Input.scss\");\n/* harmony import */ var _utils_cls__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/cls */ \"../utils/cls.ts\");\n\n\n\nvar Input = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, externalRef) {\n    var id = props.id, name = props.name, wrapperClassName = props.wrapperClassName, controlGroupWrapperClassName = props.controlGroupWrapperClassName, defaultValue = props.defaultValue, placeholder = props.placeholder, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onPressEnter = props.onPressEnter, type = props.type, readonly = props.readonly, disabled = props.disabled, required = props.required, requiredLabel = props.requiredLabel, label = props.label, labelClassName = props.labelClassName, controlClassName = props.controlClassName, controlGroupTextClassName = props.controlGroupTextClassName, iconLeft = props.iconLeft, iconRight = props.iconRight, _a = props.autoComplete, autoComplete = _a === void 0 ? \"on\" : _a, size = props.size, min = props.min, max = props.max, step = props.step;\n    var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n    var idRes = id;\n    var typeRes = typeof type === \"undefined\" ? \"text\" : type;\n    var _b = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"), inputValue = _b[0], setInputValue = _b[1];\n    var handleChange = function (event) {\n        var newValue = event.target.value;\n        setInputValue(newValue);\n        if (onChange) {\n            onChange(newValue); // 触发父组件的 onChange 回调\n        }\n    };\n    var handleBlur = function () {\n        if (onBlur) {\n            onBlur(); // 触发父组件的 onBlur 回调\n        }\n    };\n    var handleFoucus = function () {\n        if (onFocus) {\n            onFocus();\n        }\n    };\n    var handleKeyDown = function (event) {\n        if (onPressEnter) {\n            onPressEnter(event);\n        }\n    };\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n        if (defaultValue != null && defaultValue !== \"\") {\n            setInputValue(defaultValue);\n        }\n        else {\n            setInputValue(\"\");\n        }\n    }, [defaultValue]);\n    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, \"mb-3 position-relative\"), ref: rootRef },\n            label ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, typeof label === \"string\" ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"label\", { htmlFor: idRes, className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(labelClassName, \"form-label\") }, label)) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"label\", { htmlFor: idRes, className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(labelClassName, \"form-label\") }, label)))) : null,\n            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_2__.clsCombine)(\"position-relative\", (0,_utils_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupWrapperClassName, \"input-group\")), style: { width: \"\".concat(size, \"px\") } },\n                iconLeft ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", { className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, \"input-group-text\") }, iconLeft)) : null,\n                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { id: idRes, name: name, type: typeRes, value: inputValue, placeholder: placeholder, onChange: handleChange, onBlur: handleBlur, onFocus: handleFoucus, onKeyDown: handleKeyDown, disabled: disabled || null, readOnly: readonly || null, className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlClassName, \"form-control\"), autoComplete: autoComplete, min: typeRes === \"number\" ? min : undefined, max: typeRes === \"number\" ? max : undefined, step: typeRes === \"number\" ? step : undefined }),\n                iconRight ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", { className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, \"input-group-text\") }, iconRight)) : null),\n            required ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, requiredLabel || requiredLabel === \"\" ? (requiredLabel) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", { className: \"position-absolute end-0 top-0 my-2 mx-2\" },\n                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", { className: \"text-danger\" }, \"*\"))))) : (\"\"))));\n});\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Input);\n\n\n//# sourceURL=webpack://myInput/./src/Input.tsx?");

/***/ }),

/***/ "../utils/cls.ts":
/*!***********************!*\
  !*** ../utils/cls.ts ***!
  \***********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   clsCombine: () => (/* binding */ clsCombine),\n/* harmony export */   clsWrite: () => (/* binding */ clsWrite)\n/* harmony export */ });\nfunction clsWrite(s, defaultCls, targetCls) {\n    if (s || s === \"\") {\n        return targetCls !== undefined ? targetCls : s;\n    }\n    return defaultCls;\n}\nfunction clsCombine() {\n    var classes = [];\n    for (var _i = 0; _i < arguments.length; _i++) {\n        classes[_i] = arguments[_i];\n    }\n    return classes\n        .map(function (cls) {\n        if (typeof cls === \"string\") {\n            return cls;\n        }\n        else if (typeof cls === \"object\" && cls !== null) {\n            return Object.keys(cls)\n                .filter(function (key) { return cls[key]; }) // 仅选择值为 true 的类名\n                .join(\" \");\n        }\n        return \"\";\n    })\n        .filter(Boolean) // 过滤掉 falsy 值\n        .join(\" \"); // 用空格连接\n}\n\n\n\n//# sourceURL=webpack://myInput/../utils/cls.ts?");

/***/ }),

/***/ "react":
/*!************************!*\
  !*** external "react" ***!
  \************************/
/***/ ((module) => {

module.exports = __WEBPACK_EXTERNAL_MODULE_react__;

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/compat get default export */
/******/ 	(() => {
/******/ 		// getDefaultExport function for compatibility with non-harmony modules
/******/ 		__webpack_require__.n = (module) => {
/******/ 			var getter = module && module.__esModule ?
/******/ 				() => (module['default']) :
/******/ 				() => (module);
/******/ 			__webpack_require__.d(getter, { a: getter });
/******/ 			return getter;
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/define property getters */
/******/ 	(() => {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = (exports, definition) => {
/******/ 			for(var key in definition) {
/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
/******/ 	(() => {
/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
/******/ 	
/************************************************************************/
/******/ 	
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = __webpack_require__("./src/Input.tsx");
/******/ 	
/******/ 	return __webpack_exports__;
/******/ })()
;
});