carbon-react/lib/components/grouped-character/grouped-character.component.js

A library of reusable React components for easily building user interfaces.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../textbox/textbox.component.js"),n=require("./grouped-character.utils.js"),o=require("../../__internal__/utils/helpers/tags/tags.js");function l(e){return e&&e.__esModule?e:{default:e}}function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){u(e,t,r[t])}))}return e}function c(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const s=({target:e},t)=>{const{name:r,id:n}=e;return c(a({},r&&{name:r},n&&{id:n}),{value:t})},i=l(t).default.forwardRef(((t,l)=>{var{groups:u,onBlur:i,onChange:p,onKeyDown:f,separator:g,value:b}=t,y=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(t,["groups","onBlur","onChange","onKeyDown","separator","value"]);const O=g.substring(0,1),d=u.reduce(n.toSum),j=e=>n.generateGroups(u,e).join(O),h=e=>e.split(O).join("").substring(0,d);return e.jsx(r.Textbox,a(c(a({},y),{value:b,formattedValue:j(b),onChange:e=>{const{target:t}=e,{selectionEnd:r}=t;let n=null!=r?r:0;const o=h(t.value),l=j(o),u=t.value.length===n,a=l[n-1]===O;if(u){const e=t.value.split(O).length-1,r=l.split(O).length-1;n+=r-e}else a&&(b.length>o.length||(n+=1));const c=e;c.target=s(e,{rawValue:o,formattedValue:l}),null==p||p(c),setTimeout((()=>t.setSelectionRange(n,n)))},onBlur:e=>{if(i){const{target:t}=e,r=h(t.value),n=j(r),o=e;o.target=s(e,{rawValue:r,formattedValue:n}),i(o)}},onKeyDown:e=>{const{selectionStart:t,selectionEnd:r}=e.target,n=(null!=r?r:0)-(null!=t?t:0)>0;if(1===e.key.length&&d===b.length&&!n&&e.preventDefault(),"Delete"===e.key){const r=null!=t?t:0,n=h(b);if(j(n)[r]===O){e.preventDefault();const t=e.target;setTimeout((()=>t.setSelectionRange(r+1,r+1)))}}f&&f(e)},ref:l}),o.default("grouped-character",y)))}));i.displayName="GroupedCharacter",exports.GroupedCharacter=i,exports.default=i;