playbook_ui_docs 14.11.1.pre.alpha.PBNTR573datepickerinvestigation5355 → 14.11.1.pre.alpha.PLAY1720phonenumberinputformatAsYouType5377
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +1 -12
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb +15 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx +24 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0dfdb2965d4da6b14296f6889d764c82cfe8da03887caf24cf025edaa207200f
|
|
4
|
+
data.tar.gz: 79759144fb6967dc2387b5b760fee9d12a4181b16baea9960851a8709348b21c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4f876f41581df495eea28fdb1025ba99894eb8b4ebbcecf39e012e4986b6f23ed5267d626ae2cdcfb76806b64b918fd02557748ca94f0c52aa76bee2083b24d8
|
|
7
|
+
data.tar.gz: b4a053adceb9931b17ab13da80fdd13ed01ad2fb04143a983f41fe91726f1e5792ef43e7cf0c616f614f9799b8d15840d35df38aa217f93cb158de9ba98aa929
|
|
@@ -1,12 +1 @@
|
|
|
1
|
-
<%= pb_rails("date_picker", props: { picker_id: "date-picker-default"
|
|
2
|
-
<%= pb_rails("button", props: { id: "date-picker-loader", text: "Load Custom Event" }) %>
|
|
3
|
-
|
|
4
|
-
<script>
|
|
5
|
-
document.getElementById("date-picker-loader").addEventListener("click", () => {
|
|
6
|
-
window.document.dispatchEvent(
|
|
7
|
-
new CustomEvent("datePickerLoader", {
|
|
8
|
-
bubbles: true,
|
|
9
|
-
})
|
|
10
|
-
);
|
|
11
|
-
});
|
|
12
|
-
</script>
|
|
1
|
+
<%= pb_rails("date_picker", props: { picker_id: "date-picker-default"}) %>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<%= pb_rails("phone_number_input", props: {
|
|
2
|
+
id: "phone_number_input",
|
|
3
|
+
format_as_you_type: true
|
|
4
|
+
}) %>
|
|
5
|
+
|
|
6
|
+
<%= pb_rails("button", props: {id: "clickable", text: "Save Phone Number"}) %>
|
|
7
|
+
|
|
8
|
+
<%= javascript_tag do %>
|
|
9
|
+
document.querySelector('#clickable').addEventListener('click', () => {
|
|
10
|
+
const formattedPhoneNumber = document.querySelector('#phone_number_input').value
|
|
11
|
+
const unformattedPhoneNumber = formattedPhoneNumber.replace(/\D/g, "")
|
|
12
|
+
|
|
13
|
+
alert(`Formatted: ${formattedPhoneNumber}. Unformatted: ${unformattedPhoneNumber}`)
|
|
14
|
+
})
|
|
15
|
+
<% end %>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { PhoneNumberInput, Body } from "playbook-ui";
|
|
3
|
+
|
|
4
|
+
const PhoneNumberInputFormat = (props) => {
|
|
5
|
+
const [phoneNumber, setPhoneNumber] = useState("");
|
|
6
|
+
|
|
7
|
+
const handleOnChange = ({ number }) => {
|
|
8
|
+
setPhoneNumber(number);
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
return (
|
|
12
|
+
<>
|
|
13
|
+
<PhoneNumberInput
|
|
14
|
+
formatAsYouType
|
|
15
|
+
id="format"
|
|
16
|
+
onChange={handleOnChange}
|
|
17
|
+
{...props}
|
|
18
|
+
/>
|
|
19
|
+
{phoneNumber && <Body>Unformatted number: {phoneNumber}</Body>}
|
|
20
|
+
</>
|
|
21
|
+
);
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export default PhoneNumberInputFormat;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
NOTE: the `number` in the React `onChange` event will not include formatting (no spaces, dashes, and parentheses). For Rails, the `value` will include formatting and its value must be sanitized manually.
|
|
@@ -8,10 +8,12 @@ examples:
|
|
|
8
8
|
- phone_number_input_validation: Form Validation
|
|
9
9
|
- phone_number_input_clear_field: Clearing the Input Field
|
|
10
10
|
- phone_number_input_access_input_element: Accessing the Input Element
|
|
11
|
+
- phone_number_input_format: Format as You Type
|
|
11
12
|
|
|
12
13
|
rails:
|
|
13
14
|
- phone_number_input_default: Default
|
|
14
15
|
- phone_number_input_preferred_countries: Preferred Countries
|
|
15
16
|
- phone_number_input_initial_country: Initial Country
|
|
16
17
|
- phone_number_input_only_countries: Limited Countries
|
|
17
|
-
- phone_number_input_validation: Form Validation
|
|
18
|
+
- phone_number_input_validation: Form Validation
|
|
19
|
+
- phone_number_input_format: Format as You Type
|
|
@@ -5,3 +5,4 @@ export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_
|
|
|
5
5
|
export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
|
|
6
6
|
export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
|
|
7
7
|
export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
|
|
8
|
+
export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
|