diff --git a/.changeset/dark-carrots-prove.md b/.changeset/dark-carrots-prove.md new file mode 100644 index 000000000..cbbdf8a5f --- /dev/null +++ b/.changeset/dark-carrots-prove.md @@ -0,0 +1,5 @@ +--- +"@solid-primitives/input-mask": patch +--- + +input-mask: add story illustrating function-type masks diff --git a/packages/input-mask/stories/inputMask.stories.tsx b/packages/input-mask/stories/inputMask.stories.tsx index f9b402bfb..cf1b5225a 100644 --- a/packages/input-mask/stories/inputMask.stories.tsx +++ b/packages/input-mask/stories/inputMask.stories.tsx @@ -198,3 +198,46 @@ export const ArrayMask = meta.story({ ); }, }); + +export const FunctionMask = meta.story({ + name: "IPv4 mask (function format)", + parameters: { + docs: { + description: { + story: + "`createInputMask` accepts a function that receives value and selection and returns new value and selection, in this case to block any input that creates an invalid (partial) IPv4 address.", + }, + }, + }, + render: () => { + const [value, setValue] = createSignal(""); + let previous: [string, Selection] = ["", [0, 0]]; + const mask = createInputMask((addr, sel) => { + const isValid = addr.split(/\./g).every(num => num === "" || !/\D/.test(num) && Number(num) < 256); + if (isValid) { + previous = [addr, sel]; + } + return previous; + }); + + return ( + +

IPv44 Address — "127.0.0.1"

+ +
+ + setValue(mask(e))} + onInput={e => setValue(mask(e))} + onPaste={e => setValue(mask(e))} + style={inputStyle} + /> +
+ + +
+ ); + }, +}); \ No newline at end of file