Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-customize-token-input
Advanced tools
react-customize-token-input - npm Package Compare versions
Comparing version 0.5.2 to 1.2.1
1163
lib/index.js
@@ -1,1162 +0,3 @@ | ||
| /*! react-customize-token-input v0.5.2 | (c) 2018 Mark Lin. | MIT | https://github.com/seawind543/react-token-input */ | ||
| module.exports = | ||
| /******/ (function(modules) { // webpackBootstrap | ||
| /******/ // The module cache | ||
| /******/ var installedModules = {}; | ||
| /******/ | ||
| /******/ // The require function | ||
| /******/ function __webpack_require__(moduleId) { | ||
| /******/ | ||
| /******/ // Check if module is in cache | ||
| /******/ if(installedModules[moduleId]) { | ||
| /******/ return installedModules[moduleId].exports; | ||
| /******/ } | ||
| /******/ // Create a new module (and put it into the cache) | ||
| /******/ var module = installedModules[moduleId] = { | ||
| /******/ i: moduleId, | ||
| /******/ l: false, | ||
| /******/ exports: {} | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // Execute the module function | ||
| /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); | ||
| /******/ | ||
| /******/ // Flag the module as loaded | ||
| /******/ module.l = true; | ||
| /******/ | ||
| /******/ // Return the exports of the module | ||
| /******/ return module.exports; | ||
| /******/ } | ||
| /******/ | ||
| /******/ | ||
| /******/ // expose the modules object (__webpack_modules__) | ||
| /******/ __webpack_require__.m = modules; | ||
| /******/ | ||
| /******/ // expose the module cache | ||
| /******/ __webpack_require__.c = installedModules; | ||
| /******/ | ||
| /******/ // define getter function for harmony exports | ||
| /******/ __webpack_require__.d = function(exports, name, getter) { | ||
| /******/ if(!__webpack_require__.o(exports, name)) { | ||
| /******/ Object.defineProperty(exports, name, { | ||
| /******/ configurable: false, | ||
| /******/ enumerable: true, | ||
| /******/ get: getter | ||
| /******/ }); | ||
| /******/ } | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // getDefaultExport function for compatibility with non-harmony modules | ||
| /******/ __webpack_require__.n = function(module) { | ||
| /******/ var getter = module && module.__esModule ? | ||
| /******/ function getDefault() { return module['default']; } : | ||
| /******/ function getModuleExports() { return module; }; | ||
| /******/ __webpack_require__.d(getter, 'a', getter); | ||
| /******/ return getter; | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // Object.prototype.hasOwnProperty.call | ||
| /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; | ||
| /******/ | ||
| /******/ // __webpack_public_path__ | ||
| /******/ __webpack_require__.p = ""; | ||
| /******/ | ||
| /******/ // Load entry module and return exports | ||
| /******/ return __webpack_require__(__webpack_require__.s = 6); | ||
| /******/ }) | ||
| /************************************************************************/ | ||
| /******/ ([ | ||
| /* 0 */ | ||
| /***/ (function(module, exports) { | ||
| module.exports = require("react"); | ||
| /***/ }), | ||
| /* 1 */ | ||
| /***/ (function(module, exports) { | ||
| module.exports = require("prop-types"); | ||
| /***/ }), | ||
| /* 2 */ | ||
| /***/ (function(module, exports) { | ||
| // removed by extract-text-webpack-plugin | ||
| module.exports = {"container":"customize-token-input---container---32eEd","focused":"customize-token-input---focused---2EN4q","errors":"customize-token-input---errors---1qMJA","token-list":"customize-token-input---token-list---5WBoW","tokenList":"customize-token-input---token-list---5WBoW","token":"customize-token-input---token---2ASwp","active":"customize-token-input---active---30GFu","error":"customize-token-input---error---1c3qq","read-only":"customize-token-input---read-only---2A6-P","readOnly":"customize-token-input---read-only---2A6-P","label-wrapper":"customize-token-input---label-wrapper---2CrTg","labelWrapper":"customize-token-input---label-wrapper---2CrTg","delete-button":"customize-token-input---delete-button---3A_UK","deleteButton":"customize-token-input---delete-button---3A_UK","autosized-wrapper":"customize-token-input---autosized-wrapper---33t7e","autosizedWrapper":"customize-token-input---autosized-wrapper---33t7e"}; | ||
| /***/ }), | ||
| /* 3 */ | ||
| /***/ (function(module, exports) { | ||
| module.exports = require("classnames"); | ||
| /***/ }), | ||
| /* 4 */ | ||
| /***/ (function(module, exports) { | ||
| module.exports = require("react-input-autosize"); | ||
| /***/ }), | ||
| /* 5 */ | ||
| /***/ (function(module, exports, __webpack_require__) { | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| /** | ||
| * Default function for TokenInput to build user input value into default data structure | ||
| * buildDataFromValue(value) | ||
| * | ||
| * @ value | ||
| * Type: string | ||
| * Description: user input value // (value are the input string separate by separators) | ||
| * | ||
| * @ return | ||
| * Type: string | ||
| * Description: default data structure | ||
| */ | ||
| var buildDataFromValue = exports.buildDataFromValue = function buildDataFromValue(value) { | ||
| return value.trim(); | ||
| }; | ||
| /** | ||
| * Default function for TokenInput to get value from customize data structure for user to perform "edit" | ||
| * dataValue(data) | ||
| * | ||
| * @ data | ||
| * Type: object || string || number | ||
| * Description: customize data onject | ||
| * | ||
| * @ return | ||
| * Type: string | ||
| * Description: The value for user to edit | ||
| */ | ||
| var getDataValue = exports.getDataValue = function getDataValue(value) { | ||
| return value; | ||
| }; | ||
| /** | ||
| * Function for TokenInput to build default token data with user's customize data | ||
| * dataItemToTokenData(userData, index) | ||
| * | ||
| * @ userData | ||
| * Type: object || string || number | ||
| * Description: user's customize data | ||
| * | ||
| * @ index | ||
| * Type: number | ||
| * Description: array index for this customize data in data array | ||
| * | ||
| * @ return | ||
| * Type: object | ||
| * Description: token data | ||
| */ | ||
| var dataItemToTokenData = exports.dataItemToTokenData = function dataItemToTokenData(item, index) { | ||
| return { | ||
| value: item, | ||
| meta: { | ||
| key: JSON.stringify(item) + "-" + Date.now() + "-" + index, | ||
| activated: false, | ||
| error: null | ||
| } | ||
| }; | ||
| }; | ||
| /***/ }), | ||
| /* 6 */ | ||
| /***/ (function(module, exports, __webpack_require__) { | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| var _TokenInput = __webpack_require__(7); | ||
| var _TokenInput2 = _interopRequireDefault(_TokenInput); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| exports.default = _TokenInput2.default; | ||
| /***/ }), | ||
| /* 7 */ | ||
| /***/ (function(module, exports, __webpack_require__) { | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
| var _react = __webpack_require__(0); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _propTypes = __webpack_require__(1); | ||
| var _propTypes2 = _interopRequireDefault(_propTypes); | ||
| var _classnames = __webpack_require__(3); | ||
| var _classnames2 = _interopRequireDefault(_classnames); | ||
| var _TokenCreator = __webpack_require__(8); | ||
| var _TokenCreator2 = _interopRequireDefault(_TokenCreator); | ||
| var _Token = __webpack_require__(9); | ||
| var _Token2 = _interopRequireDefault(_Token); | ||
| var _utils = __webpack_require__(5); | ||
| var _styles = __webpack_require__(2); | ||
| var _styles2 = _interopRequireDefault(_styles); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } | ||
| function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
| var TokenInput = function (_PureComponent) { | ||
| _inherits(TokenInput, _PureComponent); | ||
| function TokenInput(props) { | ||
| _classCallCheck(this, TokenInput); | ||
| var _this = _possibleConstructorReturn(this, (TokenInput.__proto__ || Object.getPrototypeOf(TokenInput)).call(this, props)); | ||
| _this.actions = { | ||
| keepFocus: function keepFocus() { | ||
| _this.tokenCreator && _this.tokenCreator.focus(); | ||
| }, | ||
| onFocus: function onFocus(e) { | ||
| _this.setState({ focused: true }); | ||
| }, | ||
| onBlur: function onBlur(e) { | ||
| _this.setState({ focused: false }); | ||
| }, | ||
| updateTokens: function updateTokens(tokens) { | ||
| var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| var _options$keepFocus = options.keepFocus, | ||
| keepFocus = _options$keepFocus === undefined ? false : _options$keepFocus; | ||
| var hasInvalid = false; | ||
| var values = tokens.map(function (token) { | ||
| return token.value; | ||
| }); | ||
| var newTokens = tokens.map(function (token, index, tokens) { | ||
| var newToken = _extends({}, token); | ||
| newToken.meta.error = _this.props.validator(token.value, index, values); | ||
| if (newToken.meta.error && !newToken.meta.activated) { | ||
| hasInvalid = true; | ||
| } | ||
| return newToken; | ||
| }); | ||
| _this.setState({ | ||
| tokens: newTokens, | ||
| error: hasInvalid | ||
| }, function () { | ||
| if (keepFocus === true) { | ||
| _this.actions.keepFocus(); | ||
| } | ||
| // TODO: Fix me. | ||
| // onDataUpdate? | ||
| _this.props.onTokensUpdate(newTokens); | ||
| }); | ||
| }, | ||
| onStartEditToken: function onStartEditToken(index) { | ||
| return function () { | ||
| var tokens = [].concat(_toConsumableArray(_this.state.tokens)); | ||
| tokens[index].meta.activated = true; | ||
| _this.actions.updateTokens(tokens); | ||
| }; | ||
| }, | ||
| onEndEditToken: function onEndEditToken(index) { | ||
| return function (data) { | ||
| var tokens = [].concat(_toConsumableArray(_this.state.tokens)); | ||
| tokens[index].meta.activated = false; | ||
| if (typeof data !== 'undefined') { | ||
| tokens[index].value = data; | ||
| } | ||
| _this.actions.updateTokens(tokens); | ||
| }; | ||
| }, | ||
| onDeleteToken: function onDeleteToken(index) { | ||
| return function () { | ||
| _this.actions.deleteToken(index); | ||
| }; | ||
| }, | ||
| onDeleteLastToken: function onDeleteLastToken() { | ||
| _this.actions.deleteToken(-1); | ||
| }, | ||
| deleteToken: function deleteToken(index) { | ||
| var tokens = [].concat(_toConsumableArray(_this.state.tokens)); | ||
| tokens.splice(index, 1); | ||
| _this.actions.updateTokens(tokens, { keepFocus: true }); | ||
| }, | ||
| onAddTokens: function onAddTokens() { | ||
| var newTokens = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; | ||
| if (newTokens.length > 0) { | ||
| // avoid meaningless update | ||
| var tokens = [].concat(_toConsumableArray(_this.state.tokens), _toConsumableArray(newTokens)); | ||
| _this.actions.updateTokens(tokens, { keepFocus: true }); | ||
| } | ||
| }, | ||
| tokenCreatePreprocessor: function tokenCreatePreprocessor(inputValues) { | ||
| var preprocessor = _this.props.preprocessor; | ||
| if (typeof preprocessor === 'function') { | ||
| var values = preprocessor(inputValues); | ||
| if (Array.isArray(values) !== true) { | ||
| throw new Error('prop preprocessor should return array of values'); | ||
| } | ||
| return values; | ||
| } | ||
| return inputValues; | ||
| } | ||
| }; | ||
| _this.state = { | ||
| focused: false, | ||
| error: false, | ||
| tokens: [] | ||
| }; | ||
| return _this; | ||
| } | ||
| _createClass(TokenInput, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| var tokens = this.props.defaultData.map(_utils.dataItemToTokenData); | ||
| this.actions.updateTokens(tokens); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _classNames, | ||
| _this2 = this; | ||
| var _props = this.props, | ||
| className = _props.className, | ||
| readOnly = _props.readOnly, | ||
| placeholder = _props.placeholder, | ||
| autoFocus = _props.autoFocus, | ||
| separators = _props.separators, | ||
| buildDataFromValue = _props.buildDataFromValue, | ||
| dataValue = _props.dataValue, | ||
| tokenClassName = _props.tokenClassName, | ||
| tokenLabelRender = _props.tokenLabelRender, | ||
| tokenErrorMessage = _props.tokenErrorMessage, | ||
| tokenRender = _props.tokenRender, | ||
| onInputValueChange = _props.onInputValueChange, | ||
| props = _objectWithoutProperties(_props, ['className', 'readOnly', 'placeholder', 'autoFocus', 'separators', 'buildDataFromValue', 'dataValue', 'tokenClassName', 'tokenLabelRender', 'tokenErrorMessage', 'tokenRender', 'onInputValueChange']); | ||
| var _state = this.state, | ||
| focused = _state.focused, | ||
| error = _state.error, | ||
| tokens = _state.tokens; | ||
| // Remove un-render-able props | ||
| delete props.defaultData; | ||
| delete props.preprocessor; | ||
| delete props.validator; | ||
| delete props.onTokensUpdate; | ||
| var customizeToken = typeof tokenRender === 'function'; | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| _extends({}, props, { | ||
| className: (0, _classnames2.default)(className, _styles2.default.container, (_classNames = {}, _defineProperty(_classNames, _styles2.default.focused, focused), _defineProperty(_classNames, _styles2.default.errors, error), _classNames)), | ||
| onClick: this.actions.keepFocus, | ||
| role: 'presentation' | ||
| }), | ||
| _react2.default.createElement( | ||
| 'div', | ||
| { className: _styles2.default['token-list'] }, | ||
| customizeToken && tokens.map(function (token, index) { | ||
| var key = token.meta.key; | ||
| return tokenRender({ | ||
| key: key, | ||
| readOnly: readOnly, | ||
| data: token.value, | ||
| meta: token.meta, | ||
| onStartEdit: _this2.actions.onStartEditToken(index), | ||
| onEndEdit: _this2.actions.onEndEditToken(index), | ||
| onDelete: _this2.actions.onDeleteToken(index) | ||
| }); | ||
| }), | ||
| !customizeToken && tokens.map(function (token, index) { | ||
| var key = token.meta.key; | ||
| return _react2.default.createElement(_Token2.default, { | ||
| key: key, | ||
| readOnly: readOnly, | ||
| buildDataFromValue: buildDataFromValue, | ||
| dataValue: dataValue, | ||
| tokenClassName: tokenClassName, | ||
| tokenLabelRender: tokenLabelRender, | ||
| tokenErrorMessage: tokenErrorMessage, | ||
| data: token, | ||
| onStartEdit: _this2.actions.onStartEditToken(index), | ||
| onEndEdit: _this2.actions.onEndEditToken(index), | ||
| onDelete: _this2.actions.onDeleteToken(index) | ||
| }); | ||
| }) | ||
| ), | ||
| !readOnly && _react2.default.createElement(_TokenCreator2.default, { | ||
| ref: function ref(node) { | ||
| _this2.tokenCreator = node; | ||
| }, | ||
| placeholder: placeholder, | ||
| autoFocus: autoFocus, | ||
| onFocus: this.actions.onFocus, | ||
| onBlur: this.actions.onBlur, | ||
| onInputValueChange: onInputValueChange, | ||
| preprocessor: this.actions.tokenCreatePreprocessor, | ||
| separators: separators | ||
| // reproduceValue={reproduceValue} | ||
| , buildDataFromValue: buildDataFromValue, | ||
| addTokens: this.actions.onAddTokens, | ||
| onDeleteLastToken: this.actions.onDeleteLastToken | ||
| }) | ||
| ); | ||
| } | ||
| }]); | ||
| return TokenInput; | ||
| }(_react.PureComponent); | ||
| TokenInput.propTypes = { | ||
| // style: PropTypes.object, | ||
| className: _propTypes2.default.string, | ||
| // Specific TokenInput is readOnly or not | ||
| readOnly: _propTypes2.default.bool, | ||
| // placeholder of TokenInput | ||
| placeholder: _propTypes2.default.string, | ||
| // Specific TokenInput should be autoFocus or not | ||
| autoFocus: _propTypes2.default.bool, | ||
| // data for TokenInput to build pre-set tokens. Default is empty array | ||
| defaultData: _propTypes2.default.array, | ||
| /** | ||
| * Array of characters for separate user input string. | ||
| * For example, separate user input string 'abc;def' into [abc, def] by separators [';'] | ||
| */ | ||
| separators: _propTypes2.default.array, | ||
| /** | ||
| * function for pre-process user input values. | ||
| * | ||
| * Case 1: | ||
| * Make your normalize process in this function, such as trim. | ||
| * | ||
| * Case 2: | ||
| * Sometimes, we will want to auto-fit user input, this function could help on it. | ||
| * For example, user input is 'www.google.com', | ||
| * and we want to auto fit it into 'http://www.google.com' and 'https://www.google.com' | ||
| * | ||
| * preprocessor(values) | ||
| * | ||
| * @ values | ||
| * Type: array of string values | ||
| * Description: user input values // (values that input string separate by separators) | ||
| * | ||
| * @ return | ||
| * Type: array of string values | ||
| * Description: values after pre-process | ||
| */ | ||
| preprocessor: _propTypes2.default.func, | ||
| /** | ||
| * function for TokenInput to build user input value into customize data structure. | ||
| * You could make your normalize process in this function too. | ||
| * buildDataFromValue(value) | ||
| * | ||
| * @ value | ||
| * Type: string | ||
| * Description: user input value // (value are the input string separate by separators) | ||
| * | ||
| * @ return | ||
| * Type: object || string || number | ||
| * Description: customize data | ||
| */ | ||
| buildDataFromValue: _propTypes2.default.func, | ||
| /** | ||
| * function for TokenInput to get value from customize data structure for user to perform "edit" | ||
| * dataValue(data) | ||
| * | ||
| * @ data | ||
| * Type: object || string || number | ||
| * Description: customize data onject | ||
| * | ||
| * @ return | ||
| * Type: string | ||
| * Description: The value for user to edit | ||
| */ | ||
| dataValue: _propTypes2.default.func, | ||
| /** | ||
| * function for TokenInput to get className for a token | ||
| * tokenClassName(data, meta) | ||
| * | ||
| * @ data | ||
| * Type: object || string || number | ||
| * Description: customize data onject | ||
| * | ||
| * @ meta | ||
| * Description: token's meta data | ||
| * { | ||
| * key, // private key for render | ||
| * activated, // Boolean; Specific the token is activated for edit or not | ||
| * error // null or ERROR object. Specific the token's validate status | ||
| * } | ||
| * | ||
| * | ||
| * @ return | ||
| * Type: string | ||
| * Description: The className | ||
| */ | ||
| tokenClassName: _propTypes2.default.func, | ||
| /** | ||
| * A token label renderer for TokenInput to rendering a token's content part (label) | ||
| * Apply this to customize token's content. For example render token with "icon and text". | ||
| * tokenLabelRender(data) | ||
| * | ||
| * @ data | ||
| * Type: object || string || number | ||
| * Description: customize data onject | ||
| * | ||
| * @ return | ||
| * Type: string || node | ||
| * Description: The token's content. By default, will apply dataValue() | ||
| */ | ||
| tokenLabelRender: _propTypes2.default.func, | ||
| /** | ||
| * function for TokenInput to get error message from customize error | ||
| * The "customize error" is generate by "validator" function | ||
| * tokenErrorMessage(error) | ||
| * | ||
| * @ error | ||
| * Type: customize error | ||
| * Description: customize error | ||
| * | ||
| * @ return | ||
| * Type: string | ||
| * Description: The error message to describe an invalidte token | ||
| */ | ||
| tokenErrorMessage: _propTypes2.default.func, | ||
| /** | ||
| * A token renderer for TokenInput to rendering a token | ||
| * Apply this to customize all token. | ||
| * tokenRender(props) | ||
| * | ||
| * @ props.key | ||
| * Type: string | ||
| * Description: Each child in an array or iterator should have a unique "key" prop. | ||
| * | ||
| * @ props.data | ||
| * Type: object || string || number | ||
| * Description: customize data onject | ||
| * | ||
| * @ props.meta | ||
| * Description: token's meta data | ||
| * { | ||
| * key, // private key for render | ||
| * activated, // Boolean; Specific the token is activated for edit or not | ||
| * error // null or ERROR object. Specific the token's validate status | ||
| * } | ||
| * | ||
| * @ props.readOnly | ||
| * Type: boolean | ||
| * Description: Is readOnly or not | ||
| * | ||
| * @ props.onStartEdit | ||
| * Type: function | ||
| * Description: Callback function invoked when user start edit the token | ||
| * | ||
| * @ props.onEndEdit(data) | ||
| * Type: function | ||
| * Description: Callback function invoked when user end edit the token | ||
| * parameter: | ||
| * data => customize data onject for update result of edit. | ||
| * Make no change, in case do not provide data. | ||
| * | ||
| * @ props.onDelete | ||
| * Type: function | ||
| * Description: Callback function invoked when user delete the token | ||
| * | ||
| * | ||
| * @ return | ||
| * Type: node | ||
| * Description: The token's content. | ||
| */ | ||
| tokenRender: _propTypes2.default.func, | ||
| /** | ||
| * function for validate data | ||
| * validator(data, index, allData) | ||
| * | ||
| * @ data | ||
| * Type: object || string || number | ||
| * Description: customize data onject | ||
| * | ||
| * @ index | ||
| * Type: number | ||
| * Description: data's array index in allData | ||
| * | ||
| * @ allData | ||
| * Type: array | ||
| * Description: array of allData | ||
| * | ||
| * @ return | ||
| * Type: null || customize error | ||
| * Description: The error. | ||
| * Could be error message to display or error object | ||
| * return null means "validate" | ||
| */ | ||
| validator: _propTypes2.default.func, | ||
| /** | ||
| * Callback function invoked when user typing but not become token yet | ||
| * onInputValueChange(value) | ||
| * | ||
| * @ value | ||
| * Type: string | ||
| * Description: user input string | ||
| */ | ||
| onInputValueChange: _propTypes2.default.func, | ||
| /** | ||
| * Callback function invoked data updated | ||
| * onTokensUpdate(tokens) | ||
| * | ||
| * @ tokens | ||
| * Type: Array | ||
| * Description: Array of token data | ||
| * | ||
| * token data | ||
| * { | ||
| * value, // customize data | ||
| * meta: { | ||
| * key, // private key for render | ||
| * activated, // Boolean; Specific the token is activated for edit or not | ||
| * error // null or ERROR object. Specific the token's validate status | ||
| * } | ||
| * } | ||
| */ | ||
| onTokensUpdate: _propTypes2.default.func | ||
| }; | ||
| TokenInput.defaultProps = { | ||
| className: '', | ||
| readOnly: false, | ||
| placeholder: '', | ||
| autoFocus: false, | ||
| defaultData: [], | ||
| separators: [',', ';', '\n', // for copy past | ||
| '\r', // for copy past | ||
| '\r\n' // for copy past | ||
| ], | ||
| // reproduceValue: reproduceValue, | ||
| buildDataFromValue: _utils.buildDataFromValue, | ||
| dataValue: _utils.getDataValue, | ||
| tokenClassName: function tokenClassName() { | ||
| return ''; | ||
| }, | ||
| tokenLabelRender: _utils.getDataValue, | ||
| validator: function validator() { | ||
| return null; | ||
| }, | ||
| tokenErrorMessage: function tokenErrorMessage(errorMsg) { | ||
| return errorMsg; | ||
| }, | ||
| onInputValueChange: function onInputValueChange(value) { | ||
| return value; | ||
| }, | ||
| onTokensUpdate: function onTokensUpdate() {} // dummy function | ||
| }; | ||
| exports.default = TokenInput; | ||
| /***/ }), | ||
| /* 8 */ | ||
| /***/ (function(module, exports, __webpack_require__) { | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
| var _react = __webpack_require__(0); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _propTypes = __webpack_require__(1); | ||
| var _propTypes2 = _interopRequireDefault(_propTypes); | ||
| var _reactInputAutosize = __webpack_require__(4); | ||
| var _reactInputAutosize2 = _interopRequireDefault(_reactInputAutosize); | ||
| var _utils = __webpack_require__(5); | ||
| var _styles = __webpack_require__(2); | ||
| var _styles2 = _interopRequireDefault(_styles); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
| var TokenCreator = function (_PureComponent) { | ||
| _inherits(TokenCreator, _PureComponent); | ||
| function TokenCreator(props) { | ||
| _classCallCheck(this, TokenCreator); | ||
| var _this = _possibleConstructorReturn(this, (TokenCreator.__proto__ || Object.getPrototypeOf(TokenCreator)).call(this, props)); | ||
| _this.actions = { | ||
| updateValue: function updateValue() { | ||
| var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; | ||
| _this.setState({ value: value }, function () { | ||
| _this.props.onInputValueChange(value); | ||
| }); | ||
| }, | ||
| // event handler | ||
| handleChangeValue: function handleChangeValue(e) { | ||
| var value = e.target.value; | ||
| var lastChar = value.substr(-1); | ||
| var pattens = new RegExp(_this.props.separators.join('|')); | ||
| if (pattens.test(lastChar) === true) { | ||
| _this.actions.createTokens(); | ||
| return; | ||
| } | ||
| _this.actions.updateValue(value); | ||
| }, | ||
| createTokens: function createTokens() { | ||
| var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.value; | ||
| var _this$props = _this.props, | ||
| separators = _this$props.separators, | ||
| preprocessor = _this$props.preprocessor, | ||
| buildDataFromValue = _this$props.buildDataFromValue, | ||
| addTokens = _this$props.addTokens; | ||
| var trimmedValue = value.trim(); | ||
| // Skip empty | ||
| if (trimmedValue === '') { | ||
| return; | ||
| } | ||
| var inputValues = trimmedValue.split(new RegExp(separators.join('|'))); | ||
| var values = preprocessor(inputValues); | ||
| var tokens = values.map(function (value, index) { | ||
| var data = buildDataFromValue(value); | ||
| return (0, _utils.dataItemToTokenData)(data, index); | ||
| }); | ||
| addTokens(tokens); | ||
| _this.actions.updateValue(''); // clear value | ||
| }, | ||
| handleKeyDown: function handleKeyDown(e) { | ||
| // const { value } = e.target; | ||
| var value = _this.state.value; | ||
| var eventKey = void 0; | ||
| // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key | ||
| var eventKeys = ['Backspace', 'Enter', 'Escape']; | ||
| var keyIndex = eventKeys.indexOf(e.key); | ||
| eventKey = eventKeys[keyIndex]; | ||
| // backward compatibility for browser not support event.key, such as safari | ||
| // https://www.w3schools.com/jsref/event_key_key.asp | ||
| if (eventKey === undefined) { | ||
| eventKey = { | ||
| 8: 'Backspace', | ||
| 13: 'Enter', | ||
| 27: 'Escape' | ||
| }[e.keyCode]; | ||
| } | ||
| // TODO: Fix me. check functional | ||
| if (value.length === 0 && eventKey === 'Backspace') { | ||
| _this.props.onDeleteLastToken(); | ||
| } | ||
| if (eventKey === 'Escape') { | ||
| _this.actions.updateValue(''); // clear value | ||
| return; | ||
| } | ||
| if (eventKey === 'Enter') { | ||
| _this.actions.createTokens(); | ||
| return; | ||
| } | ||
| }, | ||
| handleFocus: function handleFocus(e) { | ||
| _this.props.onFocus(e); | ||
| }, | ||
| handleBlur: function handleBlur(e) { | ||
| _this.actions.createTokens(); | ||
| _this.props.onBlur(e); | ||
| }, | ||
| handlePaste: function handlePaste(e) { | ||
| e.preventDefault(); | ||
| var pastedText = e.clipboardData.getData('text'); | ||
| _this.actions.createTokens(pastedText); | ||
| } | ||
| }; | ||
| _this.focus = function () { | ||
| _this.tokenCreator.input && _this.tokenCreator.input.focus(); | ||
| }; | ||
| _this.state = { | ||
| value: '' | ||
| }; | ||
| return _this; | ||
| } | ||
| _createClass(TokenCreator, [{ | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this2 = this; | ||
| var _props = this.props, | ||
| placeholder = _props.placeholder, | ||
| autoFocus = _props.autoFocus; | ||
| var value = this.state.value; | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| { className: _styles2.default['autosized-wrapper'] }, | ||
| _react2.default.createElement(_reactInputAutosize2.default, { | ||
| ref: function ref(node) { | ||
| _this2.tokenCreator = node; | ||
| }, | ||
| placeholder: placeholder, | ||
| value: value, | ||
| autoFocus: autoFocus, | ||
| onFocus: this.actions.handleFocus, | ||
| onBlur: this.actions.handleBlur, | ||
| onChange: this.actions.handleChangeValue, | ||
| onKeyDown: this.actions.handleKeyDown, | ||
| onPaste: this.actions.handlePaste | ||
| }) | ||
| ); | ||
| } | ||
| }]); | ||
| return TokenCreator; | ||
| }(_react.PureComponent); | ||
| TokenCreator.propTypes = { | ||
| separators: _propTypes2.default.array.isRequired, | ||
| placeholder: _propTypes2.default.string.isRequired, | ||
| autoFocus: _propTypes2.default.bool.isRequired, | ||
| onFocus: _propTypes2.default.func.isRequired, | ||
| onBlur: _propTypes2.default.func.isRequired, | ||
| addTokens: _propTypes2.default.func.isRequired, | ||
| onDeleteLastToken: _propTypes2.default.func.isRequired, | ||
| buildDataFromValue: _propTypes2.default.func.isRequired, | ||
| onInputValueChange: _propTypes2.default.func.isRequired, | ||
| preprocessor: _propTypes2.default.func.isRequired | ||
| }; | ||
| exports.default = TokenCreator; | ||
| /***/ }), | ||
| /* 9 */ | ||
| /***/ (function(module, exports, __webpack_require__) { | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
| var _react = __webpack_require__(0); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _propTypes = __webpack_require__(1); | ||
| var _propTypes2 = _interopRequireDefault(_propTypes); | ||
| var _classnames = __webpack_require__(3); | ||
| var _classnames2 = _interopRequireDefault(_classnames); | ||
| var _reactInputAutosize = __webpack_require__(4); | ||
| var _reactInputAutosize2 = _interopRequireDefault(_reactInputAutosize); | ||
| var _styles = __webpack_require__(2); | ||
| var _styles2 = _interopRequireDefault(_styles); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
| var DeleteButton = function DeleteButton(props) { | ||
| return _react2.default.createElement('i', { | ||
| className: _styles2.default['delete-button'], | ||
| 'aria-hidden': 'true' | ||
| }); | ||
| }; | ||
| var Token = function (_PureComponent) { | ||
| _inherits(Token, _PureComponent); | ||
| function Token(props) { | ||
| _classCallCheck(this, Token); | ||
| var _this = _possibleConstructorReturn(this, (Token.__proto__ || Object.getPrototypeOf(Token)).call(this, props)); | ||
| _this.actions = { | ||
| onStartEdit: function onStartEdit() { | ||
| var _this$props = _this.props, | ||
| data = _this$props.data, | ||
| onStartEdit = _this$props.onStartEdit, | ||
| dataValue = _this$props.dataValue; | ||
| _this.setState({ | ||
| value: dataValue(data.value, data.meta) | ||
| }, function () { | ||
| onStartEdit(); | ||
| }); | ||
| }, | ||
| onEndEdit: function onEndEdit() { | ||
| var rollback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; | ||
| var buildDataFromValue = _this.props.buildDataFromValue; | ||
| var value = _this.state.value; | ||
| // handle input value length === 0 case: Rollback token | ||
| if (rollback === true || value.length === 0) { | ||
| _this.props.onEndEdit(); | ||
| return; | ||
| } | ||
| _this.props.onEndEdit(buildDataFromValue(value)); | ||
| }, | ||
| // event handler | ||
| handleClick: function handleClick(e) { | ||
| e.stopPropagation(); | ||
| var _e$target$className = e.target.className, | ||
| className = _e$target$className === undefined ? '' : _e$target$className; | ||
| var isDeleteButton = className.indexOf(_styles2.default['delete-button']) !== -1; | ||
| var _this$props2 = _this.props, | ||
| readOnly = _this$props2.readOnly, | ||
| onDelete = _this$props2.onDelete; | ||
| if (readOnly === true) { | ||
| return; | ||
| } | ||
| if (isDeleteButton) { | ||
| onDelete(); | ||
| return; | ||
| } | ||
| _this.actions.onStartEdit(); | ||
| }, | ||
| handleChangeValue: function handleChangeValue(e) { | ||
| var value = e.target.value; | ||
| _this.setState({ value: value }); | ||
| }, | ||
| handleKeyDown: function handleKeyDown(e) { | ||
| var eventKey = void 0; | ||
| // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key | ||
| var eventKeys = ['Enter', 'Escape']; | ||
| var keyIndex = eventKeys.indexOf(e.key); | ||
| eventKey = eventKeys[keyIndex]; | ||
| // backward compatibility for browser not support event.key, such as safari | ||
| // https://www.w3schools.com/jsref/event_key_key.asp | ||
| if (eventKey === undefined) { | ||
| eventKey = { | ||
| 13: 'Enter', | ||
| 27: 'Escape' | ||
| }[e.keyCode]; | ||
| } | ||
| if (eventKey === 'Escape') { | ||
| // End editing with Rollback token | ||
| _this.actions.onEndEdit(true); | ||
| return; | ||
| } | ||
| if (eventKey === 'Enter') { | ||
| _this.actions.onEndEdit(); | ||
| return; | ||
| } | ||
| }, | ||
| handleBlur: function handleBlur(e) { | ||
| _this.actions.onEndEdit(); | ||
| } | ||
| }; | ||
| _this.state = { | ||
| value: '' | ||
| }; | ||
| return _this; | ||
| } | ||
| _createClass(Token, [{ | ||
| key: 'render', | ||
| value: function render() { | ||
| var _classNames; | ||
| var _props = this.props, | ||
| readOnly = _props.readOnly, | ||
| data = _props.data, | ||
| tokenClassName = _props.tokenClassName, | ||
| tokenLabelRender = _props.tokenLabelRender, | ||
| tokenErrorMessage = _props.tokenErrorMessage; | ||
| var value = this.state.value; | ||
| var _data$meta = data.meta, | ||
| activated = _data$meta.activated, | ||
| error = _data$meta.error; | ||
| var title = error === null ? null : tokenErrorMessage(error); | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| { | ||
| className: (0, _classnames2.default)(tokenClassName(data.value, data.meta), _styles2.default.token, (_classNames = {}, _defineProperty(_classNames, _styles2.default.active, activated), _defineProperty(_classNames, _styles2.default.error, error && !activated), _defineProperty(_classNames, _styles2.default['read-only'], readOnly), _classNames)), | ||
| onClick: this.actions.handleClick, | ||
| role: 'presentation', | ||
| title: title | ||
| }, | ||
| !activated && _react2.default.createElement( | ||
| 'div', | ||
| { className: _styles2.default['label-wrapper'] }, | ||
| tokenLabelRender(data.value) | ||
| ), | ||
| !activated && !readOnly && _react2.default.createElement(DeleteButton, null), | ||
| activated && _react2.default.createElement( | ||
| 'div', | ||
| { className: _styles2.default['autosized-wrapper'] }, | ||
| _react2.default.createElement(_reactInputAutosize2.default, { | ||
| ref: function ref(input) { | ||
| return input && input.focus(); | ||
| }, | ||
| value: value, | ||
| onChange: this.actions.handleChangeValue, | ||
| onKeyDown: this.actions.handleKeyDown, | ||
| onBlur: this.actions.handleBlur | ||
| }) | ||
| ) | ||
| ); | ||
| } | ||
| }]); | ||
| return Token; | ||
| }(_react.PureComponent); | ||
| Token.propTypes = { | ||
| readOnly: _propTypes2.default.bool.isRequired, | ||
| tokenClassName: _propTypes2.default.func.isRequired, | ||
| tokenLabelRender: _propTypes2.default.func.isRequired, | ||
| tokenErrorMessage: _propTypes2.default.func.isRequired, | ||
| dataValue: _propTypes2.default.func.isRequired, | ||
| buildDataFromValue: _propTypes2.default.func.isRequired, | ||
| data: _propTypes2.default.object.isRequired, | ||
| onStartEdit: _propTypes2.default.func.isRequired, | ||
| onEndEdit: _propTypes2.default.func.isRequired, | ||
| onDelete: _propTypes2.default.func.isRequired | ||
| }; | ||
| exports.default = Token; | ||
| /***/ }) | ||
| /******/ ]); | ||
| /*! For license information please see index.js.LICENSE.txt */ | ||
| !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n="object"==typeof exports?t(require("react")):t(e.React);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(self,(function(e){return(()=>{var t={184:(e,t)=>{var n;!function(){"use strict";var r={}.hasOwnProperty;function o(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var a=typeof n;if("string"===a||"number"===a)e.push(n);else if(Array.isArray(n)){if(n.length){var u=o.apply(null,n);u&&e.push(u)}}else if("object"===a)if(n.toString===Object.prototype.toString)for(var i in n)r.call(n,i)&&n[i]&&e.push(i);else e.push(n.toString())}}return e.join(" ")}e.exports?(o.default=o,e.exports=o):void 0===(n=function(){return o}.apply(t,[]))||(e.exports=n)}()},703:(e,t,n)=>{"use strict";var r=n(414);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,a,u){if(u!==r){var i=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw i.name="Invariant Violation",i}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:o};return n.PropTypes=n,n}},697:(e,t,n)=>{e.exports=n(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},639:(e,t,n)=>{"use strict";var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=n(698),u=l(a),i=l(n(697));function l(e){return e&&e.__esModule?e:{default:e}}var s={position:"absolute",top:0,left:0,visibility:"hidden",height:0,overflow:"scroll",whiteSpace:"pre"},c=["extraWidth","injectStyles","inputClassName","inputRef","inputStyle","minWidth","onAutosize","placeholderIsMinWidth"],f=function(e,t){t.style.fontSize=e.fontSize,t.style.fontFamily=e.fontFamily,t.style.fontWeight=e.fontWeight,t.style.fontStyle=e.fontStyle,t.style.letterSpacing=e.letterSpacing,t.style.textTransform=e.textTransform},p=!("undefined"==typeof window||!window.navigator)&&/MSIE |Trident\/|Edge\//.test(window.navigator.userAgent),d=function(){return p?"_"+Math.random().toString(36).substr(2,12):void 0},y=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var n=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.inputRef=function(e){n.input=e,"function"==typeof n.props.inputRef&&n.props.inputRef(e)},n.placeHolderSizerRef=function(e){n.placeHolderSizer=e},n.sizerRef=function(e){n.sizer=e},n.state={inputWidth:e.minWidth,inputId:e.id||d(),prevId:e.id},n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),o(t,null,[{key:"getDerivedStateFromProps",value:function(e,t){var n=e.id;return n!==t.prevId?{inputId:n||d(),prevId:n}:null}}]),o(t,[{key:"componentDidMount",value:function(){this.mounted=!0,this.copyInputStyles(),this.updateInputWidth()}},{key:"componentDidUpdate",value:function(e,t){t.inputWidth!==this.state.inputWidth&&"function"==typeof this.props.onAutosize&&this.props.onAutosize(this.state.inputWidth),this.updateInputWidth()}},{key:"componentWillUnmount",value:function(){this.mounted=!1}},{key:"copyInputStyles",value:function(){if(this.mounted&&window.getComputedStyle){var e=this.input&&window.getComputedStyle(this.input);e&&(f(e,this.sizer),this.placeHolderSizer&&f(e,this.placeHolderSizer))}}},{key:"updateInputWidth",value:function(){if(this.mounted&&this.sizer&&void 0!==this.sizer.scrollWidth){var e=void 0;e=this.props.placeholder&&(!this.props.value||this.props.value&&this.props.placeholderIsMinWidth)?Math.max(this.sizer.scrollWidth,this.placeHolderSizer.scrollWidth)+2:this.sizer.scrollWidth+2,(e+="number"===this.props.type&&void 0===this.props.extraWidth?16:parseInt(this.props.extraWidth)||0)<this.props.minWidth&&(e=this.props.minWidth),e!==this.state.inputWidth&&this.setState({inputWidth:e})}}},{key:"getInput",value:function(){return this.input}},{key:"focus",value:function(){this.input.focus()}},{key:"blur",value:function(){this.input.blur()}},{key:"select",value:function(){this.input.select()}},{key:"renderStyles",value:function(){var e=this.props.injectStyles;return p&&e?u.default.createElement("style",{dangerouslySetInnerHTML:{__html:"input#"+this.state.inputId+"::-ms-clear {display: none;}"}}):null}},{key:"render",value:function(){var e=[this.props.defaultValue,this.props.value,""].reduce((function(e,t){return null!=e?e:t})),t=r({},this.props.style);t.display||(t.display="inline-block");var n=r({boxSizing:"content-box",width:this.state.inputWidth+"px"},this.props.inputStyle),o=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(this.props,[]);return function(e){c.forEach((function(t){return delete e[t]}))}(o),o.className=this.props.inputClassName,o.id=this.state.inputId,o.style=n,u.default.createElement("div",{className:this.props.className,style:t},this.renderStyles(),u.default.createElement("input",r({},o,{ref:this.inputRef})),u.default.createElement("div",{ref:this.sizerRef,style:s},e),this.props.placeholder?u.default.createElement("div",{ref:this.placeHolderSizerRef,style:s},this.props.placeholder):null)}}]),t}(a.Component);y.propTypes={className:i.default.string,defaultValue:i.default.any,extraWidth:i.default.oneOfType([i.default.number,i.default.string]),id:i.default.string,injectStyles:i.default.bool,inputClassName:i.default.string,inputRef:i.default.func,inputStyle:i.default.object,minWidth:i.default.oneOfType([i.default.number,i.default.string]),onAutosize:i.default.func,onChange:i.default.func,placeholder:i.default.string,placeholderIsMinWidth:i.default.bool,style:i.default.object,value:i.default.any},y.defaultProps={minWidth:1,injectStyles:!0},t.Z=y},698:t=>{"use strict";t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var a=n[e]={exports:{}};return t[e](a,a.exports,r),a.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{"use strict";r.r(o),r.d(o,{default:()=>q});var e=r(698),t=r.n(e),n=r(697),a=r.n(n),u=r(184),i=r.n(u),l=r(639);const s=function(e,t){var n,r=t.onBackspace,o=void 0===r?function(){}:r,a=t.onEnter,u=void 0===a?function(){}:a,i=t.onEscape,l=void 0===i?function(){}:i,s=["Backspace","Enter","Escape"],c=s.indexOf(e.key);switch(void 0===(n=s[c])&&(n={8:"Backspace",13:"Enter",27:"Escape"}[e.keyCode]),n){case"Backspace":o();break;case"Enter":u();break;case"Escape":l()}},c="customize-token-input---delete-button---RxqGs",f="customize-token-input---autosized-wrapper---TXzhr";function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var d=(0,e.forwardRef)((function(n,r){var o,a,u=n.separators,i=n.onPreprocess,c=n.onBuildTokenValue,d=n.onNewTokenValuesAppend,y=n.onLastTokenDelete,h=n.placeholder,m=n.autoFocus,b=n.onFocus,v=n.onBlur,k=n.onInputValueChange,g=(o=(0,e.useState)(""),a=2,function(e){if(Array.isArray(e))return e}(o)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(o,a)||function(e,t){if(e){if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,t):void 0}}(o,a)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),T=g[0],S=g[1],E=(0,e.useMemo)((function(){return new RegExp(u.join("|"))}),[u]),C=(0,e.useCallback)((function(e){S(e),k(e,T)}),[k,T,S]),w=(0,e.useCallback)((function(e){if(0!==e.length){var t=e.split(E),n=i(t).map((function(e){return c(e)}));d(n),C("")}}),[E,i,c,d,C]),A=(0,e.useCallback)((function(e){var t=e.target.value,n=t.substr(-1);!0!==E.test(n)?C(t):w(T)}),[E,w,T,C]),I=(0,e.useCallback)((function(e){s(e,{onBackspace:function(){0===T.length&&y()},onEscape:function(){return C("")},onEnter:function(){return w(T)}})}),[T,y,C,w]),O=(0,e.useCallback)((function(e){w(T),v(e)}),[w,T,v]),j=(0,e.useCallback)((function(e){e.preventDefault();var t=e.clipboardData.getData("text");w(t)}),[w]);return t().createElement("div",{className:f},t().createElement(l.Z,{ref:r,autoFocus:m,placeholder:h,value:T,onChange:A,onKeyDown:I,onPaste:j,onFocus:b,onBlur:O}))}));d.displayName="TokenCreator",d.propTypes={placeholder:a().string.isRequired,autoFocus:a().bool.isRequired,onFocus:a().func.isRequired,onBlur:a().func.isRequired,separators:a().array.isRequired,onInputValueChange:a().func.isRequired,onPreprocess:a().func.isRequired,onBuildTokenValue:a().func.isRequired,onNewTokenValuesAppend:a().func.isRequired,onLastTokenDelete:a().func.isRequired};const y=d,h=function(){return t().createElement("span",{role:"button",className:c,"aria-hidden":"true","data-component-name":"DeleteButton"})};function m(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var v=function(e){e.stopPropagation()},k=function(n){var r,o,a=n.readOnly,u=n.tokenValue,p=n.tokenMeta,d=n.onGetClassName,y=n.onGetDisplayLabel,k=n.onGetEditableValue,g=n.onGetErrorMessage,T=n.onBuildTokenValue,S=n.onEditStart,E=n.onEditEnd,C=n.onDelete,w=(0,e.useRef)(null),A=(r=(0,e.useState)(""),o=2,function(e){if(Array.isArray(e))return e}(r)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(r,o)||function(e,t){if(e){if("string"==typeof e)return b(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?b(e,t):void 0}}(r,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),I=A[0],O=A[1],j=p.activated,V=p.error,R=(0,e.useCallback)((function(){var e=k(u,p);O(e),S()}),[O,u,p,k,S]);(0,e.useEffect)((function(){j&&w.current&&w.current.focus()}),[j]);var x=(0,e.useCallback)((function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.reset,n=void 0!==t&&t,r=0===I.length;if(n||r)E();else{var o=T(I);E(o)}}),[I,T,E]),M=(0,e.useCallback)((function(e){if(e.stopPropagation(),!a){var t=e.target.className;-1!==(void 0===t?"":t).indexOf(c)?C():R()}}),[a,C,R]),z=(0,e.useCallback)((function(e){var t=e.target.value;O(t)}),[O]),P=(0,e.useCallback)((function(e){s(e,{onEscape:function(){return x({reset:!0})},onEnter:function(){return x()}})}),[x]),N=(0,e.useCallback)((function(){x()}),[x]),W=(0,e.useMemo)((function(){var e;return i()(d(u,p),"customize-token-input---token---gTkkf",(m(e={},"customize-token-input---active---jZZPP",j),m(e,"customize-token-input---error---eNFRx",V&&!j),m(e,"customize-token-input---read-only---_IB6t",a),e))}),[a,V,j,d,u,p]),D=(0,e.useMemo)((function(){return g(u,p)}),[g,u,p]);return j?t().createElement("div",{role:"presentation",className:W,onClick:v},t().createElement("div",{className:f},t().createElement(l.Z,{ref:w,value:I,onChange:z,onKeyDown:P,onBlur:N}))):t().createElement("div",{role:"presentation",className:W,onClick:M,title:D,"data-component-name":"Token"},t().createElement("div",{className:"customize-token-input---label-wrapper---RRpXn"},y(u,p)),!a&&t().createElement(h,null))};k.propTypes={readOnly:a().bool.isRequired,tokenValue:a().any.isRequired,tokenMeta:a().object.isRequired,onGetClassName:a().func.isRequired,onGetDisplayLabel:a().func.isRequired,onGetEditableValue:a().func.isRequired,onGetErrorMessage:a().func.isRequired,onBuildTokenValue:a().func.isRequired,onEditStart:a().func.isRequired,onEditEnd:a().func.isRequired,onDelete:a().func.isRequired};const g=k;function T(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}const S=function(){var t,n,r=(t=(0,e.useState)(!1),n=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(t,n)||function(e,t){if(e){if("string"==typeof e)return T(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?T(e,t):void 0}}(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),o=r[0],a=r[1];return{isTokenInputFocused:o,handleTokenInputFocus:(0,e.useCallback)((function(){a(!0)}),[]),handleTokenInputBlur:(0,e.useCallback)((function(){a(!1)}),[])}},E=function(e,t,n){return{key:"".concat(JSON.stringify(t),"-").concat(Date.now(),"-").concat(n),activated:!1,error:e}};function C(e,t){if(e){if("string"==typeof e)return w(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?w(e,t):void 0}}function w(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}const A=function(){var t,n,r=(t=(0,e.useState)([]),n=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(t,n)||C(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),o=r[0],a=r[1],u=(0,e.useCallback)((function(e,t){if(e>=o.length)throw new Error("setTokenActivated out of tokenMetas scope; targetIndex ".concat(e,"; tokenMetas.length ").concat(o.length));var n=function(e){return function(e){if(Array.isArray(e))return w(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||C(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(o);n[e].activated=t,a(n)}),[o]);return{buildTokenMeta:E,tokenMetas:o,setTokenMetas:a,setTokenActivated:u}};function I(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return a}}(e,t)||O(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function O(e,t){if(e){if("string"==typeof e)return j(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?j(e,t):void 0}}function j(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}const V=function(t){var n=t.tokenValues,r=t.onTokenValueValidate,o=A(),a=o.buildTokenMeta,u=o.tokenMetas,i=o.setTokenMetas,l=o.setTokenActivated,s=I((0,e.useState)(!1),2),c=s[0],f=s[1],p=I((0,e.useState)([]),2),d=p[0],y=p[1];return(0,e.useLayoutEffect)((function(){var e,t=!1,o=n.map((function(e,o){var u=r(e,o,n),i=a(u,e,o);return i.error&&!i.activated&&(t=!0),i}));y(function(e){if(Array.isArray(e))return j(e)}(e=n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||O(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),i(o),f(t)}),[n,r,i,a]),{hasInvalidToken:c,internalTokenValues:d,tokenMetas:u,setTokenActivated:l}};function R(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}const x=function(t){var n=t.tokenValues,r=t.onTokenValuesChange,o=t.setTokenActivated,a=t.handleTokenInputFocus,u=t.handleTokenInputBlur,i=t.focusTokenCreator;return{handleTokenEditStart:(0,e.useCallback)((function(e){return function(){o(e,!0),a()}}),[o,a]),handleTokenEditEnd:(0,e.useCallback)((function(e){return function(t){if(o(e,!1),u(),i(),void 0!==t){var a=function(e){if(Array.isArray(e))return R(e)}(l=n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(l)||function(e,t){if(e){if("string"==typeof e)return R(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?R(e,t):void 0}}(l)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}();a[e]=t,r(a)}var l}}),[n,r,o,u,i])}};function M(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}const z=function(t){var n=t.tokenValues,r=t.onTokenValuesChange,o=t.focusTokenCreator,a=(0,e.useCallback)((function(e){var t,a=function(e){if(Array.isArray(e))return M(e)}(t=n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(t)||function(e,t){if(e){if("string"==typeof e)return M(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?M(e,t):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}();a.splice(e,1),r(a),o()}),[n,r,o]);return{handleTokenDelete:(0,e.useCallback)((function(e){return function(){a(e)}}),[a]),handleLastTokenDelete:(0,e.useCallback)((function(){a(-1)}),[a])}},P=function(e,t){return e};var N=["className","readOnly","autoFocus","placeholder","tokenValues","onTokenValuesChange","onBuildTokenValue","customizeTokenComponent","onGetTokenClassName","onGetTokenDisplayLabel","onGetTokenEditableValue","onGetTokenErrorMessage","separators","onPreprocess","onInputValueChange","onTokenValueValidate"];function W(){return(W=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function D(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function G(e){return function(e){if(Array.isArray(e))return _(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return _(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var B=function(n){var r,o=n.className,a=n.readOnly,u=n.autoFocus,l=n.placeholder,s=n.tokenValues,c=n.onTokenValuesChange,f=n.onBuildTokenValue,p=n.customizeTokenComponent,d=n.onGetTokenClassName,h=n.onGetTokenDisplayLabel,m=n.onGetTokenEditableValue,b=n.onGetTokenErrorMessage,v=n.separators,k=n.onPreprocess,T=n.onInputValueChange,E=n.onTokenValueValidate,C=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(n,N),w=S(),A=w.isTokenInputFocused,I=w.handleTokenInputFocus,O=w.handleTokenInputBlur,j=function(){var t=(0,e.useRef)(null),n=(0,e.useCallback)((function(){t&&t.current&&t.current.focus()}),[]);return{tokenCreatorRef:t,focusTokenCreator:n}}(),R=j.tokenCreatorRef,M=j.focusTokenCreator,P=V({tokenValues:s,onTokenValueValidate:E}),_=P.hasInvalidToken,B=P.internalTokenValues,q=P.tokenMetas,F=P.setTokenActivated,L=x({tokenValues:s,onTokenValuesChange:c,setTokenActivated:F,handleTokenInputFocus:I,handleTokenInputBlur:O,focusTokenCreator:M}),U=L.handleTokenEditStart,H=L.handleTokenEditEnd,$=z({tokenValues:s,onTokenValuesChange:c,focusTokenCreator:M}),Z=$.handleTokenDelete,X=$.handleLastTokenDelete,K=(0,e.useCallback)((function(e){if(0!==e.length){var t=[].concat(G(s),G(e));c(t)}}),[s,c]),Y=(0,e.useCallback)((function(e){if("function"!=typeof k)return e;var t=k(e);if(!0!==Array.isArray(t))throw new Error("onPreprocess should return an array of values");return t}),[k]),J=p||g;return t().createElement("div",W({},C,{className:i()(o,"customize-token-input---container---F6cN_",(r={},D(r,"customize-token-input---focused---k4Zch",A),D(r,"customize-token-input---errors---QXs7u",_),r)),onClick:M,role:"presentation","data-component-name":"TokenInput"}),t().createElement("div",{className:"customize-token-input---token-list---mZYkR"},B.map((function(e,n){var r=q[n],o=r.key;return t().createElement(J,{key:o,readOnly:a,tokenValue:e,tokenMeta:r,onGetClassName:d,onGetDisplayLabel:h,onGetEditableValue:m,onGetErrorMessage:b,onBuildTokenValue:f,onEditStart:U(n),onEditEnd:H(n),onDelete:Z(n)})}))),!a&&t().createElement(y,{ref:R,placeholder:l,autoFocus:u,onFocus:I,onBlur:O,separators:v,onPreprocess:Y,onBuildTokenValue:f,onNewTokenValuesAppend:K,onLastTokenDelete:X,onInputValueChange:T}))};B.propTypes={style:a().object,className:a().string,readOnly:a().bool,autoFocus:a().bool,placeholder:a().string,tokenValues:a().array.isRequired,onTokenValuesChange:a().func,separators:a().array,onPreprocess:a().func,onBuildTokenValue:a().func,onInputValueChange:a().func,onTokenValueValidate:a().func,onGetTokenClassName:a().func,onGetTokenDisplayLabel:a().func,onGetTokenEditableValue:a().func,onGetTokenErrorMessage:a().func,customizeTokenComponent:a().func},B.defaultProps={className:"",readOnly:!1,autoFocus:!1,placeholder:"",separators:[",",";","\n","\r","\r\n"],onBuildTokenValue:function(e){return e.trim()},onInputValueChange:function(){},onTokenValueValidate:function(){},onGetTokenClassName:function(){return""},onGetTokenDisplayLabel:P,onGetTokenEditableValue:P,onGetTokenErrorMessage:function(e,t){return t.error}};const q=B})(),o})()})); | ||
| //# sourceMappingURL=index.js.map |
129
package.json
| { | ||
| "name": "react-customize-token-input", | ||
| "version": "0.5.2", | ||
| "description": "A react token input component. Allow customize data structure and render functions", | ||
| "version": "1.2.1", | ||
| "description": "A react token (tag) input component. Allow customize data structure and render functions", | ||
| "main": "lib/index.js", | ||
@@ -11,13 +11,20 @@ "files": [ | ||
| "scripts": { | ||
| "prepublish": "npm run eslint && npm test && npm run clean && npm run build && npm run build-examples", | ||
| "build": "webpack && npm run cleancss", | ||
| "build-examples": "cd examples; webpack", | ||
| "prepublish": "yarn run eslint && yarn run clean && yarn run build && yarn run build:examples", | ||
| "build": "webpack", | ||
| "build:examples": "cd examples; webpack", | ||
| "clean": "rm -f {lib,dist}/*", | ||
| "cleancss": "cleancss -o dist/react-customize-token-input.min.css dist/react-customize-token-input.css", | ||
| "demo": "http-server -p 8000 docs/", | ||
| "eslint": "eslint --ext .js --ext .jsx *.js examples src test", | ||
| "test": "tap test/*.js --node-arg=--require --node-arg=babel-register --node-arg=--require --node-arg=babel-polyfill", | ||
| "coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=babel-register --nyc-arg=--require --nyc-arg=babel-polyfill | coveralls", | ||
| "dev": "cd examples; webpack-dev-server --hot --inline --host 0.0.0.0 --port 8000 --content-base ../docs" | ||
| "eslint": "eslint --max-warnings 0 --ext .jsx,.js,.ts,.tsx examples src test", | ||
| "dev": "cd examples; webpack && webpack serve --hot --inline --host 0.0.0.0 --port 8000 --content-base ../docs" | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "lint-staged" | ||
| } | ||
| }, | ||
| "lint-staged": { | ||
| "src/**/*.{js,jsx,ts,tsx}": [ | ||
| "prettier --write", | ||
| "eslint --fix --max-warnings 0" | ||
| ] | ||
| }, | ||
| "repository": { | ||
@@ -32,57 +39,61 @@ "type": "git", | ||
| "react", | ||
| "react-token-input", | ||
| "react-customize-token-input", | ||
| "token-input", | ||
| "token", | ||
| "tag", | ||
| "token input", | ||
| "tag input", | ||
| "preprocess", | ||
| "inline edit", | ||
| "customize", | ||
| "customize data structure", | ||
| "Customize render functions", | ||
| "pre-processs", | ||
| "preprocesss" | ||
| "customize render" | ||
| ], | ||
| "peerDependencies": { | ||
| "react": "^16.10.2" | ||
| }, | ||
| "dependencies": { | ||
| "classnames": "2.2.5", | ||
| "prop-types": "15.6.2", | ||
| "react": "16.4.2", | ||
| "react-input-autosize": "2.2.1" | ||
| "classnames": "^2.3.1", | ||
| "prop-types": "^15.7.2", | ||
| "react-input-autosize": "^3.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-cli": "6.26.0", | ||
| "babel-core": "6.26.3", | ||
| "babel-eslint": "8.2.3", | ||
| "babel-loader": "7.1.4", | ||
| "babel-plugin-transform-decorators-legacy": "1.3.4", | ||
| "babel-preset-env": "1.7.0", | ||
| "babel-preset-react": "6.24.1", | ||
| "babel-preset-stage-0": "6.24.1", | ||
| "clean-css": "4.1.11", | ||
| "clean-css-cli": "4.1.11", | ||
| "coveralls": "3.0.1", | ||
| "css-loader": "0.28.11", | ||
| "enzyme": "3.3.0", | ||
| "enzyme-adapter-react-16": "1.1.1", | ||
| "eslint": "4.19.1", | ||
| "eslint-config-trendmicro": "1.3.1", | ||
| "eslint-loader": "2.0.0", | ||
| "eslint-plugin-import": "2.12.0", | ||
| "eslint-plugin-jsx-a11y": "6.0.3", | ||
| "eslint-plugin-react": "7.8.2", | ||
| "extract-text-webpack-plugin": "3.0.2", | ||
| "file-loader": "1.1.11", | ||
| "find-imports": "0.5.2", | ||
| "html-webpack-plugin": "3.2.0", | ||
| "http-server": "0.10.0", | ||
| "jsdom": "11.11.0", | ||
| "nib": "1.1.2", | ||
| "react": "16.4.2", | ||
| "react-dom": "16.4.2", | ||
| "style-loader": "0.21.0", | ||
| "stylint": "1.5.9", | ||
| "stylint-loader": "1.0.0", | ||
| "stylus-loader": "3.0.2", | ||
| "tap": "12.0.1", | ||
| "trendmicro-ui": "0.5.2", | ||
| "url-loader": "1.0.1", | ||
| "webpack": "3.11.0", | ||
| "webpack-dev-server": "2.11.2" | ||
| "@babel/core": "^7.14.8", | ||
| "@babel/eslint-parser": "^7.14.9", | ||
| "@babel/eslint-plugin": "^7.14.5", | ||
| "@babel/preset-env": "^7.14.9", | ||
| "@babel/preset-react": "^7.14.5", | ||
| "babel-loader": "^8.2.2", | ||
| "babel-plugin-transform-react-qa-classes": "^1.6.0", | ||
| "css-loader": "^6.2.0", | ||
| "eslint": "^7.32.0", | ||
| "eslint-config-airbnb-base": "^14.2.1", | ||
| "eslint-config-prettier": "^8.3.0", | ||
| "eslint-config-react-app": "^6.0.0", | ||
| "eslint-plugin-import": "^2.23.4", | ||
| "eslint-plugin-jsx-a11y": "^6.4.1", | ||
| "eslint-plugin-prettier": "^3.4.0", | ||
| "eslint-plugin-react": "^7.24.0", | ||
| "eslint-plugin-react-hooks": "^4.2.0", | ||
| "eslint-webpack-plugin": "^3.0.1", | ||
| "html-webpack-plugin": "^5.3.2", | ||
| "husky": "^7.0.1", | ||
| "lint-staged": "^11.1.1", | ||
| "mini-css-extract-plugin": "^2.1.0", | ||
| "nib": "^1.1.2", | ||
| "prettier": "^2.3.2", | ||
| "react": "^16.10.2", | ||
| "react-dev-utils": "^11.0.4", | ||
| "react-dom": "^16.14.0", | ||
| "style-loader": "^3.2.1", | ||
| "stylelint": "^13.13.1", | ||
| "stylelint-config-prettier": "^8.0.2", | ||
| "stylelint-config-rational-order": "^0.1.2", | ||
| "stylelint-config-standard": "^22.0.0", | ||
| "stylelint-prettier": "^1.2.0", | ||
| "stylelint-webpack-plugin": "^3.0.1", | ||
| "stylus": "^0.54.8", | ||
| "stylus-loader": "^6.1.0", | ||
| "webpack": "^5.48.0", | ||
| "webpack-cli": "^4.7.2", | ||
| "webpack-dev-server": "^3.11.2" | ||
| } | ||
| } |
609
README.md
@@ -5,11 +5,16 @@ # React TokenInput [](https://travis-ci.org/seawind543/react-token-input) [](https://coveralls.io/github/seawind543/react-token-input?branch=master) | ||
| A react token input component, which allow: | ||
| 1. Apply **customize data structure**. | ||
| 2. **Customize render functions** for `token label part` or `the complete token`. | ||
| 3. Customize **separate characters** for separate user input. | ||
| 4. **Pre-processs** function for **normalized** user input value . | ||
| React TokenInput (react-customize-token-input) | ||
| A react token (tag) `controlled` input component, which support: | ||
| - Apply to **customize data structure**. | ||
| - **Customize token component** for `label of token` or `the complete token`. | ||
| - Customize **separate characters** for separate end-user input string. | ||
| - **Inline editing** on exist token. | ||
| - **Paste** on values. | ||
| - **Preprocessing** function for **normalized** user input value. | ||
| It could be helpful to reproduce a single value into multiple values too. | ||
| 5. **Validate** function. | ||
| - **Validate** function. | ||
| Demo: https://seawind543.github.io/react-token-input/ | ||
| Live Demo: https://seawind543.github.io/react-token-input/ | ||
@@ -21,6 +26,6 @@ ## Installation | ||
| ``` | ||
| npm install --save react react-customize-token-input | ||
| yarn add react react-customize-token-input | ||
| ``` | ||
| 2. At this point you can import `react-token-input` and its styles in your application as follows: | ||
| 2. At this point you can import `react-token-input` and its styles in your application by: | ||
@@ -36,13 +41,11 @@ ```javascript | ||
| ## Dev | ||
| 1. Run `npm install` to install required packages. | ||
| 2. Run `npm run dev` to launch `webpack-dev-server`. | ||
| 1. Run `yarn install` to install required packages. | ||
| 2. Run `yarn dev` to launch `webpack-dev-server`. | ||
| 3. After step 2, you will see following message output in command console. | ||
| ``` | ||
| Project is running at http://0.0.0.0:8000/ | ||
| webpack output is served from / | ||
| ``` | ||
| 4. It might take some time for webpack to compiled. Please wait for message below output in the command console. | ||
| ``` | ||
| webpack: Compiled with warnings. | ||
| ｢wds｣: Project is running at http://0.0.0.0:8000/ | ||
| ｢wds｣: webpack output is served from / | ||
| ｢wds｣: Content not from webpack is served from ../docs | ||
| ``` | ||
@@ -52,276 +55,354 @@ | ||
| 4. After step 3 complete, you could access `http://localhost:8000/` to see result. | ||
| ## Usage | ||
| ```javascript | ||
| // Simple sample. | ||
| // Take default, data is array of string | ||
| <TokenInput /> | ||
| ``` | ||
| See Live Demo: https://seawind543.github.io/react-token-input/ | ||
| ```javascript | ||
| // Read only | ||
| <TokenInput readOnly={true} /> | ||
| ``` | ||
| (Examples in the folder `examples`) | ||
| ```javascript | ||
| // Customize data structure and validator | ||
| <TokenInput | ||
| defaultData={this.state.cData} | ||
| buildDataFromValue={this.actions.cData.buildDataFromValue} | ||
| dataValue={this.actions.cData.dataValue} | ||
| tokenLabelRender={this.actions.cData.tokenLabelRender} | ||
| validator={this.actions.cData.validator} | ||
| tokenErrorMessage={this.actions.cData.tokenErrorMessage} | ||
| onTokensUpdate={this.actions.cData.handleTokensUpdate} | ||
| /> | ||
| ``` | ||
| ## Props | ||
| ```javascript | ||
| // Reproduce value | ||
| <TokenInput | ||
| reproduceValue={this.actions.urls.reproduceValue} | ||
| onTokensUpdate={this.actions.urls.handleTokensUpdate} | ||
| /> | ||
| ``` | ||
| // Assign style to the TokenInput | ||
| style: PropTypes.object, | ||
| ## Props | ||
| // Assign className to the TokenInput | ||
| className: PropTypes.string, | ||
| ```javascript | ||
| // style: PropTypes.object, | ||
| className: PropTypes.string, | ||
| // Specific TokenInput is `readOnly` or not | ||
| readOnly: PropTypes.bool, | ||
| // Specific TokenInput is readOnly or not | ||
| readOnly: PropTypes.bool, | ||
| // Specific TokenInput should be autoFocus or not | ||
| autoFocus: PropTypes.bool, | ||
| // placeholder of TokenInput | ||
| placeholder: PropTypes.string, | ||
| // Placeholder of TokenInput | ||
| placeholder: PropTypes.string, | ||
| // Specific TokenInput should be autoFocus or not | ||
| autoFocus: PropTypes.bool, | ||
| // [Required] An array of tokenValue of TokenInput | ||
| tokenValues: PropTypes.array.isRequired, | ||
| // data for TokenInput to build pre-set tokens. Default is empty array | ||
| defaultData: PropTypes.array, | ||
| /** | ||
| * A callback function invoked when tokenValues update | ||
| * | ||
| * onTokenValuesChange(modifiedTokenValues) | ||
| * | ||
| * @ modifiedTokenValues | ||
| * Type: An array of tokenValue of TokenInput | ||
| * Description: Updated tokenValues | ||
| */ | ||
| onTokenValuesChange: PropTypes.func, | ||
| /** | ||
| * Array of characters for separate user input string. | ||
| * For example, separate user input string 'abc;def' into [abc, def] by separators [';'] | ||
| */ | ||
| separators: PropTypes.array, | ||
| /** | ||
| * An array of characters for split the user input string. | ||
| * For example, | ||
| * Split the user input string `abc;def` into `['abc', 'def']` | ||
| * by separators `[';']` | ||
| * | ||
| * Note: | ||
| * It take the `String.prototype.split()` and `RegExp` to split the user input string. | ||
| * Make sure your customized separators could be used with `RegExp`. | ||
| * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp | ||
| */ | ||
| separators: PropTypes.array, | ||
| /** | ||
| * function for pre-process user input values. | ||
| * | ||
| * Case 1: | ||
| * Make your normalize process in this function, such as trim. | ||
| * | ||
| * Case 2: | ||
| * Sometimes, we will want to auto-fit user input, this function could help on it. | ||
| * For example, user input is 'www.google.com', | ||
| * and we want to auto fit it into 'http://www.google.com' and 'https://www.google.com' | ||
| * | ||
| * preprocessor(values) | ||
| * | ||
| * @ values | ||
| * Type: array of string values | ||
| * Description: user input values // (values that input string separate by separators) | ||
| * | ||
| * @ return | ||
| * Type: array of string values | ||
| * Description: values after pre-process | ||
| */ | ||
| preprocessor: PropTypes.func, | ||
| /** | ||
| * A callback function for preprocessing the user input string | ||
| * (after it is split into `array of value`). | ||
| * | ||
| * Note: This function execute after `split` but before `onBuildTokenValue` | ||
| * | ||
| * [Use case 1] | ||
| * Make your normalize process in this function, such as `String.prototype.trim()`. | ||
| * | ||
| * [Use case 2] | ||
| * Sometimes, we will want to auto-fit user input, this function could help with it. | ||
| * For example, the user input string is `www.google.com`, | ||
| * and we want to auto-fit it into `http://www.google.com` and `https://www.google.com`. | ||
| * | ||
| * | ||
| * onPreprocess(inputStringValues) | ||
| * | ||
| * @ inputStringValues | ||
| * Type: An array of string values | ||
| * Description: | ||
| * The user input string values // (split from the user input string by the `separators`) | ||
| * | ||
| * @ return | ||
| * Type: An array of string values | ||
| * Description: The values after preprocess | ||
| */ | ||
| onPreprocess: PropTypes.func, | ||
| /** | ||
| * function for TokenInput to build user input value into customize data structure. | ||
| * You could make your normalize process in this function too. | ||
| * buildDataFromValue(value) | ||
| * | ||
| * @ value | ||
| * Type: string | ||
| * Description: user input value // (value are the input string separate by separators) | ||
| * | ||
| * @ return | ||
| * Type: object || string || number | ||
| * Description: customize data | ||
| */ | ||
| buildDataFromValue: PropTypes.func, | ||
| /** | ||
| * A callback function for building `user input string value` into | ||
| * the `tokenValue` (customize data structure). | ||
| * | ||
| * Note: You could make your normalize process in this function too. | ||
| * | ||
| * onBuildTokenValue(stringValue) | ||
| * | ||
| * @ stringValue | ||
| * Type: string | ||
| * Description: The user input value // (A value split by separators) | ||
| * | ||
| * @ return | ||
| * Type: any (string | number | object | customize data structure) | ||
| * Description: customize data structure | ||
| */ | ||
| onBuildTokenValue: PropTypes.func, | ||
| /** | ||
| * function for TokenInput to get value from customize data structure for user to perform "edit" | ||
| * dataValue(data) | ||
| * | ||
| * @ data | ||
| * Type: object || string || number | ||
| * Description: customize data onject | ||
| * | ||
| * @ return | ||
| * Type: string | ||
| * Description: The value for user to edit | ||
| */ | ||
| dataValue: PropTypes.func, | ||
| /** | ||
| * A callback function invoked when end-user typing but not become token yet | ||
| * | ||
| * onInputValueChange(newValue, previousValue) | ||
| * | ||
| * @ newValue | ||
| * Type: string | ||
| * Description: end-user input string | ||
| * | ||
| * @ previousValue | ||
| * Type: string | ||
| * Description: previous end-user input string | ||
| */ | ||
| onInputValueChange: PropTypes.func, | ||
| /** | ||
| * function for TokenInput to get className for a token | ||
| * tokenClassName(data, meta) | ||
| * | ||
| * @ data | ||
| * Type: object || string || number | ||
| * Description: customize data onject | ||
| * | ||
| * @ meta | ||
| * Description: token's meta data | ||
| * { | ||
| * key, // private key for render | ||
| * activated, // Boolean; Specific the token is activated for edit or not | ||
| * error // null or ERROR object. Specific the token's validate status | ||
| * } | ||
| * | ||
| * | ||
| * @ return | ||
| * Type: string | ||
| * Description: The className | ||
| */ | ||
| tokenClassName: PropTypes.func, | ||
| /** | ||
| * A callback function for validate tokenValue | ||
| * | ||
| * onTokenValueValidate(tokenValue, tokenIndex, tokenValues) | ||
| * | ||
| * @ tokenValue | ||
| * Type: any (string | number | object | customize data structure) | ||
| * Description: The tokenValue build by `onBuildTokenValue` | ||
| * | ||
| * @ tokenIndex | ||
| * Type: number | ||
| * Description: The array index for this tokenValue in tokenValues | ||
| * | ||
| * @ tokenValues | ||
| * Type: array | ||
| * Description: The array of tokenValue of TokenInput | ||
| * | ||
| * @ return | ||
| * Type: any (string | number | object | customize data structure) | ||
| * Description: | ||
| * The customize error. | ||
| * Specific the token's validate status or errorMessage. | ||
| * Could be an error message to display or error object | ||
| * | ||
| * Will be use by `onGetTokenErrorMessage` | ||
| */ | ||
| onTokenValueValidate: PropTypes.func, | ||
| /** | ||
| * A token label renderer for TokenInput to rendering a token's content part (label) | ||
| * Apply this to customize token's content. For example render token with "icon and text". | ||
| * tokenLabelRender(data) | ||
| * | ||
| * @ data | ||
| * Type: object || string || number | ||
| * Description: customize data onject | ||
| * | ||
| * @ return | ||
| * Type: string || node | ||
| * Description: The token's content. By default, will apply dataValue() | ||
| */ | ||
| tokenLabelRender: PropTypes.func, | ||
| /** | ||
| * A callback function for getting customizes `className` for a token | ||
| * | ||
| * onGetTokenClassName(tokenValue, tokenMeta) | ||
| * | ||
| * @ tokenValue | ||
| * Type: any (string | number | object | customize data structure) | ||
| * Description: The tokenValue build by `onBuildTokenValue` | ||
| * | ||
| * @ tokenMeta | ||
| * Description: token's meta data | ||
| * { | ||
| * // A private key for render | ||
| * key: string, | ||
| * | ||
| * // Specific the token is activated for `edit` or not | ||
| * activated: boolean, | ||
| * | ||
| * // Customize data structure built by `onTokenValue Validate` | ||
| * // Specific the token's validate status or errorMessage | ||
| * error: any, | ||
| * } | ||
| * | ||
| * @ return | ||
| * Type: string | ||
| * Description: The customizes className | ||
| */ | ||
| onGetTokenClassName: PropTypes.func, | ||
| /** | ||
| * function for TokenInput to get error message from customize error | ||
| * The "customize error" is generate by "validator" function | ||
| * tokenErrorMessage(error) | ||
| * | ||
| * @ error | ||
| * Type: customize error | ||
| * Description: customize error | ||
| * | ||
| * @ return | ||
| * Type: string | ||
| * Description: The error message to describe an invalidte token | ||
| */ | ||
| tokenErrorMessage: PropTypes.func, | ||
| /** | ||
| * A callback function for getting displayable `label` for a token | ||
| * Apply this to customize the token's content | ||
| * For example, render token with `icon` or `Additional text` | ||
| * | ||
| * onGetTokenDisplayLabel(tokenValue, tokenMeta) | ||
| * | ||
| * @ tokenValue | ||
| * Type: any (string | number | object | customize data structure) | ||
| * Description: The tokenValue build by `onBuildTokenValue` | ||
| * | ||
| * @ tokenMeta | ||
| * Description: token's meta data | ||
| * { | ||
| * // A private key for render | ||
| * key: string, | ||
| * | ||
| * // Specific the token is activated for `edit` or not | ||
| * activated: boolean, | ||
| * | ||
| * // Customize data structure built by `onTokenValue Validate` | ||
| * // Specific the token's validate status or errorMessage | ||
| * error: any, | ||
| * } | ||
| * | ||
| * @ return | ||
| * Type: string || react node | ||
| * Description: The token's content. | ||
| * By default, will apply `getDefaultTokenEditableValue` | ||
| */ | ||
| onGetTokenDisplayLabel: PropTypes.func, | ||
| /** | ||
| * A token renderer for TokenInput to rendering a token | ||
| * Apply this to customize all token. | ||
| * tokenRender(props) | ||
| * | ||
| * @ props.key | ||
| * Type: string | ||
| * Description: Each child in an array or iterator should have a unique "key" prop. | ||
| * | ||
| * @ props.data | ||
| * Type: object || string || number | ||
| * Description: customize data onject | ||
| * | ||
| * @ props.meta | ||
| * Description: token's meta data | ||
| * { | ||
| * key, // private key for render | ||
| * activated, // Boolean; Specific the token is activated for edit or not | ||
| * error // null or ERROR object. Specific the token's validate status | ||
| * } | ||
| * | ||
| * @ props.readOnly | ||
| * Type: boolean | ||
| * Description: Is readOnly or not | ||
| * | ||
| * @ props.onStartEdit | ||
| * Type: function | ||
| * Description: Callback function invoked when user start edit the token | ||
| * | ||
| * @ props.onEndEdit(data) | ||
| * Type: function | ||
| * Description: Callback function invoked when user end edit the token | ||
| * parameter: | ||
| * data => customize data onject for update result of edit. | ||
| * Make no change, in case do not provide data. | ||
| * | ||
| * @ props.onDelete | ||
| * Type: function | ||
| * Description: Callback function invoked when user delete the token | ||
| * | ||
| * | ||
| * @ return | ||
| * Type: node | ||
| * Description: The token's content. | ||
| */ | ||
| tokenRender: PropTypes.func, | ||
| /** | ||
| * A callback function for getting `string input value` | ||
| * from `tokenValue` for the end-user to perform `edit` | ||
| * | ||
| * onGetTokenEditableValue(tokenValue) | ||
| * | ||
| * @ tokenValue | ||
| * Type: any (string | number | object | customize data structure) | ||
| * Description: The tokenValue build by `onBuildTokenValue` | ||
| * | ||
| * @ return | ||
| * Type: string | ||
| * Description: The value for end-user to `edit` in an input field | ||
| */ | ||
| onGetTokenEditableValue: PropTypes.func, | ||
| /** | ||
| * function for validate data | ||
| * validator(data, index, allData) | ||
| * | ||
| * @ data | ||
| * Type: object || string || number | ||
| * Description: customize data onject | ||
| * | ||
| * @ index | ||
| * Type: number | ||
| * Description: data's array index in allData | ||
| * | ||
| * @ allData | ||
| * Type: array | ||
| * Description: array of allData | ||
| * | ||
| * @ return | ||
| * Type: null || customize error | ||
| * Description: The error. | ||
| * Could be error message to display or error object | ||
| * return null means "validate" | ||
| */ | ||
| validator: PropTypes.func, | ||
| /** | ||
| * A callback function for getting the error message from the customize error | ||
| * The `customize error` is generate by `onTokenValueValidate` | ||
| * | ||
| * onGetTokenErrorMessage(tokenValue, tokenMeta) | ||
| * | ||
| * @ error | ||
| * Type: customize error | ||
| * Description: customize error | ||
| * | ||
| * @ return | ||
| * Type: string | any | ||
| * Description: The error message to describe an invalid token | ||
| */ | ||
| onGetTokenErrorMessage: PropTypes.func, | ||
| /** | ||
| * Callback function invoked when user typing but not become token yet | ||
| * onInputValueChange(value) | ||
| * | ||
| * @ value | ||
| * Type: string | ||
| * Description: user input string | ||
| */ | ||
| onInputValueChange: PropTypes.func, | ||
| /** | ||
| * A customize react functional component for rendering a token | ||
| * Apply this to customize all token function. | ||
| * | ||
| * customizeTokenComponent={MyToken} | ||
| */ | ||
| customizeTokenComponent: PropTypes.func, | ||
| ``` | ||
| /** | ||
| * Callback function invoked data updated | ||
| * onTokensUpdate(tokens) | ||
| * | ||
| * @ tokens | ||
| * Type: Array | ||
| * Description: Array of token data | ||
| * | ||
| * token data | ||
| * { | ||
| * value, // customize data | ||
| * meta: { | ||
| * key, // private key for render | ||
| * activated, // Boolean; Specific the token is activated for edit or not | ||
| * error // null or ERROR object. Specific the token's validate status | ||
| * } | ||
| * } | ||
| */ | ||
| onTokensUpdate: PropTypes.func | ||
| ## Default value of optional Props | ||
| ```javascript | ||
| className: '', | ||
| readOnly: false, | ||
| autoFocus: false, | ||
| placeholder: '', | ||
| // TokenCreator | ||
| separators: [ | ||
| ',', | ||
| ';', | ||
| '\n', // for copy past | ||
| '\r', // for copy past | ||
| '\r\n', // for copy past | ||
| ]; | ||
| onBuildTokenValue: buildDefaultTokenValue, | ||
| onInputValueChange: () => {}, // Dummy function | ||
| onTokenValueValidate: () => undefined, | ||
| // Token | ||
| onGetTokenClassName: () => '', | ||
| onGetTokenDisplayLabel: getDefaultTokenEditableValue, | ||
| onGetTokenEditableValue: getDefaultTokenEditableValue, | ||
| onGetTokenErrorMessage: getDefaultTokenErrorMessage, | ||
| ``` | ||
| ### Priority of props | ||
| ## Props of customizeTokenComponent | ||
| When ```tokenRender``` is provide, following props will be ignored. | ||
| ```javascript | ||
| buildDataFromValue | ||
| dataValue | ||
| tokenClassName | ||
| tokenLabelRender | ||
| tokenErrorMessage | ||
| // Same as props of TokenInput | ||
| readOnly: PropTypes.bool.isRequired, | ||
| // tokenValue of token | ||
| tokenValue: PropTypes.any.isRequired, | ||
| // tokenMeta of token | ||
| tokenMeta: PropTypes.object.isRequired, | ||
| // Same as props `onGetTokenClassName` of TokenInput | ||
| onGetClassName: PropTypes.func.isRequired, | ||
| // Same as props `onGetTokenDisplayLabel` of TokenInput | ||
| onGetDisplayLabel: PropTypes.func.isRequired, | ||
| // Same as props `onGetTokenEditableValue` of TokenInput | ||
| onGetEditableValue: PropTypes.func.isRequired, | ||
| // Same as props `onGetTokenErrorMessage` of TokenInput | ||
| onGetErrorMessage: PropTypes.func.isRequired, | ||
| // Editing | ||
| // Same as props `onBuildTokenValue` of TokenInput | ||
| onBuildTokenValue: PropTypes.func.isRequired, | ||
| /** | ||
| * A callback function, which should be `invoked` when end-user `start editing` | ||
| * | ||
| * Note: | ||
| * Call this function to tell TokenInput it is start to editing the token. | ||
| * As result, TokenInput will set `tokenMeta.activate` to `true` | ||
| * | ||
| * onEditStart() | ||
| * | ||
| * @ return | ||
| * Type: void | ||
| */ | ||
| onEditStart: PropTypes.func.isRequired, | ||
| /** | ||
| * A callback function, which should be `invoked` when end-user `end editing` | ||
| * | ||
| * Note: | ||
| * Call this function to tell TokenInput it is finish editing the token. | ||
| * As result, TokenInput will set `tokenMeta.activate` to `false` | ||
| * | ||
| * onEditEnd(newTokenValue?) | ||
| * | ||
| * @ newTokenValue | ||
| * Type: undefined | any (string | number | object | customize data structure) | ||
| * Description: | ||
| * The new tokenValue build by `onBuildTokenValue. | ||
| * TokenInput will update it, and | ||
| * TokenInput will call `onTokenValuesChange` | ||
| * | ||
| * Note: | ||
| * When newTokenValue is `undefined`, | ||
| * TokenInput will treat as `Cancel` (End without update newTokenValue). | ||
| * The `onTokenValuesChange` will not be called. | ||
| * | ||
| * @ return | ||
| * Type: void | ||
| */ | ||
| onEditEnd: PropTypes.func.isRequired, | ||
| /** | ||
| * A callback function, which should be `invoked` when end-user `delete` the token | ||
| * | ||
| * Note: | ||
| * Call this function to tell TokenInput to delete the token. | ||
| * As result, TokenInput will remove it, and | ||
| * TokenInput will call `onTokenValuesChange` to update tokenValues. | ||
| * | ||
| * onDelete() | ||
| * | ||
| * @ return | ||
| * Type: void | ||
| */ | ||
| onDelete: PropTypes.func.isRequired, | ||
| ``` | ||
@@ -328,0 +409,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by28.36%
146248
- Number of lines in readme file
- increased by24.77%
408
Worsened metrics
- Dev dependency count
- increased by2.63%
39
- Number of low license alerts
- increased byInfinity%
1
- License quality
- decreased by-20%
80
- Lines of code
- decreased by-89.37%
116
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedclassnames@2.5.1(transitive)
+ Addedprop-types@15.8.1(transitive)
+ Addedreact@16.14.0(transitive)
+ Addedreact-input-autosize@3.0.0(transitive)
+ Addedreact-is@16.13.1(transitive)
- Removedreact@16.4.2
- Removedasap@2.0.6(transitive)
- Removedclassnames@2.2.5(transitive)
- Removedcore-js@1.2.7(transitive)
- Removedencoding@0.1.13(transitive)
- Removedfbjs@0.8.18(transitive)
- Removediconv-lite@0.6.3(transitive)
- Removedis-stream@1.1.0(transitive)
- Removedisomorphic-fetch@2.2.1(transitive)
- Removednode-fetch@1.7.3(transitive)
- Removedpromise@7.3.1(transitive)
- Removedprop-types@15.6.2(transitive)
- Removedreact@16.4.2(transitive)
- Removedreact-input-autosize@2.2.1(transitive)
- Removedsafer-buffer@2.1.2(transitive)
- Removedsetimmediate@1.0.5(transitive)
- Removedua-parser-js@0.7.39(transitive)
- Removedwhatwg-fetch@3.6.20(transitive)
Updatedclassnames@^2.3.1
Updatedprop-types@^15.7.2
Updatedreact-input-autosize@^3.0.0