playbook_ui 12.24.0.pre.alpha.play824753 → 12.24.0.pre.alpha.railsmultilevelimprovements739
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +45 -110
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +0 -6
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +62 -110
- data/dist/playbook-rails.js +2 -2
- data/lib/playbook/forms/builder/multi_level_select_field.rb +12 -0
- data/lib/playbook/forms/builder.rb +2 -1
- data/lib/playbook/version.rb +1 -1
- metadata +3 -6
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +0 -14
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +0 -60
- data/app/pb_kits/playbook/utilities/object.ts +0 -3
- data/lib/playbook/forms/builder/intl_telephone_field.rb +0 -12
@@ -0,0 +1,12 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module Forms
|
5
|
+
class Builder
|
6
|
+
def multi_level_select(id, _options = {}, _html_options = {}, props: {})
|
7
|
+
props[:id] = id
|
8
|
+
@template.pb_rails("multi_level_select", props: props)
|
9
|
+
end
|
10
|
+
end
|
11
|
+
end
|
12
|
+
end
|
@@ -10,7 +10,7 @@ module Playbook
|
|
10
10
|
require_relative "builder/form_field_builder"
|
11
11
|
require_relative "builder/select_field"
|
12
12
|
require_relative "builder/typeahead_field"
|
13
|
-
require_relative "builder/
|
13
|
+
require_relative "builder/multi_level_select_field"
|
14
14
|
|
15
15
|
prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
|
16
16
|
prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))
|
@@ -20,6 +20,7 @@ module Playbook
|
|
20
20
|
prepend(FormFieldBuilder.new(:password_field, kit_name: "text_input"))
|
21
21
|
prepend(FormFieldBuilder.new(:url_field, kit_name: "text_input"))
|
22
22
|
prepend(FormFieldBuilder.new(:text_area, kit_name: "textarea"))
|
23
|
+
prepend(FormFieldBuilder.new(:multi_level_select, kit_name: "multi_level_select"))
|
23
24
|
|
24
25
|
def actions
|
25
26
|
context = @template.respond_to?(:view_context) ? @template.view_context : @template
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 12.24.0.pre.alpha.
|
4
|
+
version: 12.24.0.pre.alpha.railsmultilevelimprovements739
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2023-06-
|
12
|
+
date: 2023-06-06 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1579,8 +1579,6 @@ files:
|
|
1579
1579
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
|
1580
1580
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
|
1581
1581
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
|
1582
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
|
1583
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
|
1584
1582
|
- app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
|
1585
1583
|
- app/pb_kits/playbook/pb_phone_number_input/docs/index.js
|
1586
1584
|
- app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb
|
@@ -2389,7 +2387,6 @@ files:
|
|
2389
2387
|
- app/pb_kits/playbook/utilities/flexbox_global_props/_justify_self.scss
|
2390
2388
|
- app/pb_kits/playbook/utilities/flexbox_global_props/_order.scss
|
2391
2389
|
- app/pb_kits/playbook/utilities/globalProps.ts
|
2392
|
-
- app/pb_kits/playbook/utilities/object.ts
|
2393
2390
|
- app/pb_kits/playbook/utilities/props.ts
|
2394
2391
|
- app/pb_kits/playbook/utilities/test-utils.js
|
2395
2392
|
- app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js
|
@@ -2428,7 +2425,7 @@ files:
|
|
2428
2425
|
- lib/playbook/forms/builder/collection_select_field.rb
|
2429
2426
|
- lib/playbook/forms/builder/date_picker_field.rb
|
2430
2427
|
- lib/playbook/forms/builder/form_field_builder.rb
|
2431
|
-
- lib/playbook/forms/builder/
|
2428
|
+
- lib/playbook/forms/builder/multi_level_select_field.rb
|
2432
2429
|
- lib/playbook/forms/builder/select_field.rb
|
2433
2430
|
- lib/playbook/forms/builder/typeahead_field.rb
|
2434
2431
|
- lib/playbook/justify_content.rb
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
DELETED
@@ -1,14 +0,0 @@
|
|
1
|
-
<form id="example-form-validation" action="" method="get">
|
2
|
-
<%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
|
3
|
-
<%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
|
4
|
-
</form>
|
5
|
-
|
6
|
-
<% content_for(:pb_js) do %>
|
7
|
-
<%= javascript_tag do %>
|
8
|
-
document.addEventListener('DOMContentLoaded', function () {
|
9
|
-
document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
|
10
|
-
if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
|
11
|
-
})
|
12
|
-
})
|
13
|
-
<% end %>
|
14
|
-
<% end %>
|
@@ -1,60 +0,0 @@
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
2
|
-
import { Button, FixedConfirmationToast, PhoneNumberInput } from "../../";
|
3
|
-
|
4
|
-
const PhoneNumberInputValidation = (props) => {
|
5
|
-
const [formErrors, setFormErrors] = useState("");
|
6
|
-
const [showFormErrors, setShowFormErrors] = useState(false);
|
7
|
-
const [phoneNumber, setPhoneNumber] = useState("");
|
8
|
-
const [countryCode, setCountryCode] = useState("af");
|
9
|
-
|
10
|
-
const handleOnValidate = (valid) => {
|
11
|
-
setFormErrors(
|
12
|
-
valid ? "" : "Please correct the fields below and try again."
|
13
|
-
);
|
14
|
-
};
|
15
|
-
|
16
|
-
const handleOnChange = ({ iso2, number }) => {
|
17
|
-
setCountryCode(iso2);
|
18
|
-
setPhoneNumber(number);
|
19
|
-
};
|
20
|
-
|
21
|
-
const handleOnSubmit = (e) => {
|
22
|
-
if (showFormErrors) e.preventDefault()
|
23
|
-
}
|
24
|
-
|
25
|
-
useEffect(() => {
|
26
|
-
setShowFormErrors(formErrors.length > 0);
|
27
|
-
}, [formErrors]);
|
28
|
-
|
29
|
-
return (
|
30
|
-
<form
|
31
|
-
action=""
|
32
|
-
method="get"
|
33
|
-
onSubmit={handleOnSubmit}
|
34
|
-
>
|
35
|
-
{showFormErrors && (
|
36
|
-
<FixedConfirmationToast
|
37
|
-
marginBottom="md"
|
38
|
-
status="error"
|
39
|
-
text={formErrors}
|
40
|
-
/>
|
41
|
-
)}
|
42
|
-
<PhoneNumberInput
|
43
|
-
error="Missing phone number."
|
44
|
-
id="validation"
|
45
|
-
initialCountry={countryCode}
|
46
|
-
onChange={handleOnChange}
|
47
|
-
onValidate={handleOnValidate}
|
48
|
-
required
|
49
|
-
value={phoneNumber}
|
50
|
-
{...props}
|
51
|
-
/>
|
52
|
-
<Button
|
53
|
-
htmlType="submit"
|
54
|
-
text="Save Phone Number"
|
55
|
-
/>
|
56
|
-
</form>
|
57
|
-
);
|
58
|
-
};
|
59
|
-
|
60
|
-
export default PhoneNumberInputValidation;
|