release: 1.5.0

.eslintignore

@@ -1,4 +1,5 @@
-node_modules
-doc
-dist
-lib
+node_modules/
+coverage/
+doc/
+dist/
+lib/

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
-node_modules
+node_modules/
+coverage/

.stylelintignore

@@ -1,4 +1,5 @@
-node_modules
-doc
-dist
-lib
+node_modules/
+coverage/
+doc/
+dist/
+lib/

README.md

@@ -270,6 +270,35 @@ Note: Sources code of Examples in the folder `examples`
    */
   onRenderTokenDeleteButtonContent: PropTypes.func,
 
+  /**
+   * A callback function for determine whether the token is inline editable.
+   *
+   * onIsTokenEditable(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: boolean
+   * Description: `true` if editable. `false` if not.
+   */
+  onIsTokenEditable: PropTypes.func,
+
   /**
    * A callback function for getting `string input value`
    * from `tokenValue` for the end-user to perform `edit`
@@ -406,6 +435,7 @@ Enter      | End editing and apply the new value. In case the new value is an `e
     // Token
     onGetTokenClassName: () => {}, // Dummy function
     onGetTokenDisplayLabel: getDefaultTokenEditableValue,
+    onIsTokenEditable: () => true,
     onGetTokenEditableValue: getDefaultTokenEditableValue,
     onGetTokenErrorMessage: getDefaultTokenErrorMessage,
 ```
@@ -428,6 +458,8 @@ Could also reference this [Example Demo](https://seawind543.github.io/react-toke
   onGetDisplayLabel: PropTypes.func.isRequired,
   // Same as props `onRenderTokenDeleteButtonContent` of TokenInput
   onRenderDeleteButtonContent: PropTypes.func,
+  // Same as props `onIsTokenEditable` of TokenInput
+  onIsEditable: PropTypes.func.isRequired,
   // Same as props `onGetTokenEditableValue` of TokenInput
   onGetEditableValue: PropTypes.func.isRequired,
   // Same as props `onGetTokenErrorMessage` of TokenInput

dist/react-customize-token-input.original.css

@@ -1,4 +1,4 @@
-/*! react-customize-token-input v1.4.2 | (c) 2021 Mark Lin. | MIT | https://github.com/seawind543/react-token-input */
+/*! react-customize-token-input v1.5.0 | (c) 2021 Mark Lin. | MIT | https://github.com/seawind543/react-token-input */
 .token-input-container {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -11,11 +11,6 @@
   border: 1px solid #ccc;
   border-radius: 4px;
   outline: 0;
-  -webkit-transition: all 0.2s linear 0s;
-  -moz-transition: all 0.2s linear 0s;
-  -o-transition: all 0.2s linear 0s;
-  -ms-transition: all 0.2s linear 0s;
-  transition: all 0.2s linear 0s;
 }
 .token-input-container *,
 .token-input-container *::before,
@@ -72,20 +67,20 @@
   border-radius: 4px;
   color: #0096cc;
   background-color: #cceaf5;
+  cursor: default;
+}
+.token-input-container .token-input-token-list .token-input-token:hover {
+  background-color: #e6f4fc;
 }
 .token-input-container .token-input-token-list .token-input-token.token-input-token--error {
   color: #db3d44;
   background-color: #f9b5b5;
 }
-.token-input-container .token-input-token-list .token-input-token:hover {
-  cursor: pointer;
-  background-color: #e6f4fc;
-}
-.token-input-container .token-input-token-list .token-input-token:hover.token-input-token--error {
+.token-input-container .token-input-token-list .token-input-token.token-input-token--error:hover {
   background-color: #ffdada;
 }
-.token-input-container .token-input-token-list .token-input-token:hover.token-input-token--read-only {
-  cursor: default;
+.token-input-container .token-input-token-list .token-input-token.token-input-token--editable:hover {
+  cursor: pointer;
 }
 .token-input-container .token-input-token-list .token-input-token.token-input-token--active .token-input-autosized-wrapper {
   display: -webkit-box;