From ae772f9dadfa1be871b691fbcc85430b734815a8 Mon Sep 17 00:00:00 2001 From: Karl Maresch Date: Sat, 4 Apr 2020 18:27:03 +0200 Subject: [PATCH 1/3] Add option for accepting input via different keys and onBlur --- src/index.tsx | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 0bf6bce..c99d9c5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -13,6 +13,8 @@ export interface ReactTagInputProps { editable?: boolean; readOnly?: boolean; removeOnBackspace?: boolean; + addOnBlur?: boolean + delimiters?: [number] } interface State { @@ -33,10 +35,10 @@ export default class ReactTagInput extends React.Component) => { const { input } = this.state; - const { validator, removeOnBackspace } = this.props; + const { validator, removeOnBackspace, delimiters } = this.props; - // On enter - if (e.keyCode === 13) { + // Check if default Enter or one of the delimiter keys was hit + if (e.keyCode === 13 || delimiters?.includes(e.keyCode)) { // Prevent form submission if tag input is nested in
e.preventDefault(); @@ -69,6 +71,29 @@ export default class ReactTagInput extends React.Component { + + const { input } = this.state + const { validator, addOnBlur } = this.props + + if (addOnBlur) { + + // If input is blank, do nothing + if (input === "") { return; } + + // Check if input is valid + const valid = validator !== undefined ? validator(input) : true + if (!valid) { + return; + } + + // Add input to tag list + this.addTag(input) + + } + + } + addTag = (value: string) => { const tags = [ ...this.props.tags ]; if (!tags.includes(value)) { @@ -131,6 +156,7 @@ export default class ReactTagInput extends React.Component } From 3d34cefab94a31e0ca1e4b3c6b130607f416efb5 Mon Sep 17 00:00:00 2001 From: Karl Maresch Date: Sat, 4 Apr 2020 19:28:02 +0200 Subject: [PATCH 2/3] to use fork for the time --- .gitignore | 1 - dist/example.f69400ca.css | 97 + dist/example.f69400ca.js | 32648 +++++++++++++++++++++++++++++++++ dist/example.f69400ca.js.map | 1 + dist/index.html | 18 + dist/index.js | 392 + dist/index.js.map | 1 + 7 files changed, 33157 insertions(+), 1 deletion(-) create mode 100644 dist/example.f69400ca.css create mode 100644 dist/example.f69400ca.js create mode 100644 dist/example.f69400ca.js.map create mode 100644 dist/index.html create mode 100644 dist/index.js create mode 100644 dist/index.js.map diff --git a/.gitignore b/.gitignore index a2e4de3..ea87ad1 100644 --- a/.gitignore +++ b/.gitignore @@ -10,7 +10,6 @@ lerna-debug.log* .idea/ -dist/ build/ keys/ diff --git a/dist/example.f69400ca.css b/dist/example.f69400ca.css new file mode 100644 index 0000000..fb28691 --- /dev/null +++ b/dist/example.f69400ca.css @@ -0,0 +1,97 @@ +.react-tag-input { + box-sizing: border-box; + position: relative; + width: 100%; + height: auto; + min-height: 2.375em; + padding: 0.1875em 0.375em; + overflow-y: auto; + display: flex; + flex-wrap: wrap; + align-items: center; + font-size: 1rem; + background: white; + color: #333; + border: 1px solid #e1e1e1; + border-radius: 3px; +} +.react-tag-input * { + box-sizing: border-box; +} +.react-tag-input > * { + margin: 0.1875em; +} +.react-tag-input__input { + width: auto; + flex-grow: 1; + height: 1.875em; + padding: 0 0 0 0.1875em; + margin: 0 0.1875em; + font-size: 1em; + line-height: 1; + background: transparent; + color: #333; + border: none; + border-radius: 3px; + outline: 0; + box-shadow: none; + -webkit-appearance: none; +} +.react-tag-input__input::placeholder, .react-tag-input__input:-moz-placeholder, .react-tag-input__input:-ms-input-placeholder, .react-tag-input__input::-moz-placeholder, .react-tag-input__input::-webkit-input-placeholder { + color: #333; +} +.react-tag-input__input:focus { + border: none; +} + +.react-tag-input__tag { + position: relative; + display: flex; + align-items: center; + font-size: 0.85em; + line-height: 1; + background: #e1e1e1; + border-radius: 3px; +} + +.react-tag-input__tag__content { + outline: 0; + border: none; + white-space: nowrap; + padding: 0 0.46875em; +} + +.react-tag-input__tag__remove { + position: relative; + height: 2em; + width: 2em; + font-size: 0.85em; + cursor: pointer; + background: #d4d4d4; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} +.react-tag-input__tag__remove:before, .react-tag-input__tag__remove:after { + position: absolute; + top: 50%; + left: 50%; + content: " "; + height: 0.9em; + width: 0.15em; + background-color: #333; +} +.react-tag-input__tag__remove:before { + transform: translateX(-50%) translateY(-50%) rotate(45deg); +} +.react-tag-input__tag__remove:after { + transform: translateX(-50%) translateY(-50%) rotate(-45deg); +} +.react-tag-input__tag__remove-readonly { + width: 0; +} +.react-tag-input__tag__remove-readonly:before, .react-tag-input__tag__remove-readonly:after { + content: ""; + width: 0; +} + +/*# sourceMappingURL=/example.f69400ca.css.map */ \ No newline at end of file diff --git a/dist/example.f69400ca.js b/dist/example.f69400ca.js new file mode 100644 index 0000000..b7b294d --- /dev/null +++ b/dist/example.f69400ca.js @@ -0,0 +1,32648 @@ +// modules are defined as an array +// [ module function, map of requires ] +// +// map of requires is short require name -> numeric require +// +// anything defined in a previous bundle is accessed via the +// orig method which is the require for previous bundles +parcelRequire = (function (modules, cache, entry, globalName) { + // Save the require from previous bundle to this closure if any + var previousRequire = typeof parcelRequire === 'function' && parcelRequire; + var nodeRequire = typeof require === 'function' && require; + + function newRequire(name, jumped) { + if (!cache[name]) { + if (!modules[name]) { + // if we cannot find the module within our internal map or + // cache jump to the current global require ie. the last bundle + // that was added to the page. + var currentRequire = typeof parcelRequire === 'function' && parcelRequire; + if (!jumped && currentRequire) { + return currentRequire(name, true); + } + + // If there are other bundles on this page the require from the + // previous one is saved to 'previousRequire'. Repeat this as + // many times as there are bundles until the module is found or + // we exhaust the require chain. + if (previousRequire) { + return previousRequire(name, true); + } + + // Try the node require function if it exists. + if (nodeRequire && typeof name === 'string') { + return nodeRequire(name); + } + + var err = new Error('Cannot find module \'' + name + '\''); + err.code = 'MODULE_NOT_FOUND'; + throw err; + } + + localRequire.resolve = resolve; + localRequire.cache = {}; + + var module = cache[name] = new newRequire.Module(name); + + modules[name][0].call(module.exports, localRequire, module, module.exports, this); + } + + return cache[name].exports; + + function localRequire(x){ + return newRequire(localRequire.resolve(x)); + } + + function resolve(x){ + return modules[name][1][x] || x; + } + } + + function Module(moduleName) { + this.id = moduleName; + this.bundle = newRequire; + this.exports = {}; + } + + newRequire.isParcelRequire = true; + newRequire.Module = Module; + newRequire.modules = modules; + newRequire.cache = cache; + newRequire.parent = previousRequire; + newRequire.register = function (id, exports) { + modules[id] = [function (require, module) { + module.exports = exports; + }, {}]; + }; + + var error; + for (var i = 0; i < entry.length; i++) { + try { + newRequire(entry[i]); + } catch (e) { + // Save first error but execute all entries + if (!error) { + error = e; + } + } + } + + if (entry.length) { + // Expose entry point to Node, AMD or browser globals + // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js + var mainExports = newRequire(entry[entry.length - 1]); + + // CommonJS + if (typeof exports === "object" && typeof module !== "undefined") { + module.exports = mainExports; + + // RequireJS + } else if (typeof define === "function" && define.amd) { + define(function () { + return mainExports; + }); + + // + + \ No newline at end of file diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..2aa852d --- /dev/null +++ b/dist/index.js @@ -0,0 +1,392 @@ +// modules are defined as an array +// [ module function, map of requires ] +// +// map of requires is short require name -> numeric require +// +// anything defined in a previous bundle is accessed via the +// orig method which is the require for previous bundles +parcelRequire = (function (modules, cache, entry, globalName) { + // Save the require from previous bundle to this closure if any + var previousRequire = typeof parcelRequire === 'function' && parcelRequire; + var nodeRequire = typeof require === 'function' && require; + + function newRequire(name, jumped) { + if (!cache[name]) { + if (!modules[name]) { + // if we cannot find the module within our internal map or + // cache jump to the current global require ie. the last bundle + // that was added to the page. + var currentRequire = typeof parcelRequire === 'function' && parcelRequire; + if (!jumped && currentRequire) { + return currentRequire(name, true); + } + + // If there are other bundles on this page the require from the + // previous one is saved to 'previousRequire'. Repeat this as + // many times as there are bundles until the module is found or + // we exhaust the require chain. + if (previousRequire) { + return previousRequire(name, true); + } + + // Try the node require function if it exists. + if (nodeRequire && typeof name === 'string') { + return nodeRequire(name); + } + + var err = new Error('Cannot find module \'' + name + '\''); + err.code = 'MODULE_NOT_FOUND'; + throw err; + } + + localRequire.resolve = resolve; + localRequire.cache = {}; + + var module = cache[name] = new newRequire.Module(name); + + modules[name][0].call(module.exports, localRequire, module, module.exports, this); + } + + return cache[name].exports; + + function localRequire(x){ + return newRequire(localRequire.resolve(x)); + } + + function resolve(x){ + return modules[name][1][x] || x; + } + } + + function Module(moduleName) { + this.id = moduleName; + this.bundle = newRequire; + this.exports = {}; + } + + newRequire.isParcelRequire = true; + newRequire.Module = Module; + newRequire.modules = modules; + newRequire.cache = cache; + newRequire.parent = previousRequire; + newRequire.register = function (id, exports) { + modules[id] = [function (require, module) { + module.exports = exports; + }, {}]; + }; + + var error; + for (var i = 0; i < entry.length; i++) { + try { + newRequire(entry[i]); + } catch (e) { + // Save first error but execute all entries + if (!error) { + error = e; + } + } + } + + if (entry.length) { + // Expose entry point to Node, AMD or browser globals + // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js + var mainExports = newRequire(entry[entry.length - 1]); + + // CommonJS + if (typeof exports === "object" && typeof module !== "undefined") { + module.exports = mainExports; + + // RequireJS + } else if (typeof define === "function" && define.amd) { + define(function () { + return mainExports; + }); + + // - - \ No newline at end of file diff --git a/dist/index.js b/dist/index.js deleted file mode 100644 index 2aa852d..0000000 --- a/dist/index.js +++ /dev/null @@ -1,392 +0,0 @@ -// modules are defined as an array -// [ module function, map of requires ] -// -// map of requires is short require name -> numeric require -// -// anything defined in a previous bundle is accessed via the -// orig method which is the require for previous bundles -parcelRequire = (function (modules, cache, entry, globalName) { - // Save the require from previous bundle to this closure if any - var previousRequire = typeof parcelRequire === 'function' && parcelRequire; - var nodeRequire = typeof require === 'function' && require; - - function newRequire(name, jumped) { - if (!cache[name]) { - if (!modules[name]) { - // if we cannot find the module within our internal map or - // cache jump to the current global require ie. the last bundle - // that was added to the page. - var currentRequire = typeof parcelRequire === 'function' && parcelRequire; - if (!jumped && currentRequire) { - return currentRequire(name, true); - } - - // If there are other bundles on this page the require from the - // previous one is saved to 'previousRequire'. Repeat this as - // many times as there are bundles until the module is found or - // we exhaust the require chain. - if (previousRequire) { - return previousRequire(name, true); - } - - // Try the node require function if it exists. - if (nodeRequire && typeof name === 'string') { - return nodeRequire(name); - } - - var err = new Error('Cannot find module \'' + name + '\''); - err.code = 'MODULE_NOT_FOUND'; - throw err; - } - - localRequire.resolve = resolve; - localRequire.cache = {}; - - var module = cache[name] = new newRequire.Module(name); - - modules[name][0].call(module.exports, localRequire, module, module.exports, this); - } - - return cache[name].exports; - - function localRequire(x){ - return newRequire(localRequire.resolve(x)); - } - - function resolve(x){ - return modules[name][1][x] || x; - } - } - - function Module(moduleName) { - this.id = moduleName; - this.bundle = newRequire; - this.exports = {}; - } - - newRequire.isParcelRequire = true; - newRequire.Module = Module; - newRequire.modules = modules; - newRequire.cache = cache; - newRequire.parent = previousRequire; - newRequire.register = function (id, exports) { - modules[id] = [function (require, module) { - module.exports = exports; - }, {}]; - }; - - var error; - for (var i = 0; i < entry.length; i++) { - try { - newRequire(entry[i]); - } catch (e) { - // Save first error but execute all entries - if (!error) { - error = e; - } - } - } - - if (entry.length) { - // Expose entry point to Node, AMD or browser globals - // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js - var mainExports = newRequire(entry[entry.length - 1]); - - // CommonJS - if (typeof exports === "object" && typeof module !== "undefined") { - module.exports = mainExports; - - // RequireJS - } else if (typeof define === "function" && define.amd) { - define(function () { - return mainExports; - }); - - //