playbook_ui 14.4.0.pre.alpha.dependabotnpmandyarntiptapextensionparagraph2723830 → 14.4.0.pre.alpha.pbntr523enablekitsforradiofix3825

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4ef48ecae877b2daa670c823f5ef26a94be61da325a0e22bf1a198b5cd05cd9d
4
- data.tar.gz: fa445ad0c309fea8a8044b90ce65846a813b8b1d2284c160af24a574ee982dd7
3
+ metadata.gz: 6e64aecd03a565113a062687f860d87de6fa6f43a4fd46a8103a3960b6cd0971
4
+ data.tar.gz: 16d301fc39e4f4992c75cf73c0777b4bb6a5f10d13c4035e7e20073f2d4dfae5
5
5
  SHA512:
6
- metadata.gz: 4ec1caa90b721ce8f17695db9014035168a115a6301f4cfeab1bcb6732ed4887059185c50dee39c4aa84ffdd56318af305c52f1a118f72ca1f508a6fe86e0251
7
- data.tar.gz: 4a3564c715d1cbe5c38e1e68087e9fc982f1aa9bfd122e4067691f37a5a59783fbdc4088e30230f74d0a5bfc9e039bbc1032fec31660d926ff1dea0f4e30f7c3
6
+ metadata.gz: 6d16ab96dd783e0272f0fbf84f45be3fb9182c6809378408134a7a6f1a670275c6d249a2deefd6c35cec715c7c6a9dd64f903e9e9c7b074cbf38e56a4a9fc79f
7
+ data.tar.gz: 4fd4bf2527c4a0d48f25e5bafc294c4be89af6da21499ead277b820eaedcc27633cd1e26f29d38d7a70d84dde15f6924d3da83a8b25b3806da664325dce69e71
@@ -1,28 +1,30 @@
1
- /*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
1
+ /*eslint-disable react/no-multi-comp */
2
2
 
3
- import React, { forwardRef } from 'react'
3
+ import React, { forwardRef, useRef } from 'react'
4
4
  import Body from '../pb_body/_body'
5
+ import Flex from '../pb_flex/_flex'
5
6
  import classnames from 'classnames'
6
7
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
7
8
  import { globalProps, GlobalProps } from '../utilities/globalProps'
8
9
 
9
10
  type RadioProps = {
10
- aria?: {[key: string]: string},
11
+ aria?: { [key: string]: string },
11
12
  alignment?: string,
12
13
  checked?: boolean,
13
14
  children?: React.ReactChild[] | React.ReactChild,
15
+ customChildren?: boolean,
14
16
  className?: string,
15
17
  dark?: boolean,
16
- data?: {[key: string]: string},
18
+ data?: { [key: string]: string },
17
19
  disabled?: boolean,
18
20
  error?: boolean,
19
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
21
+ htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
20
22
  id?: string,
21
23
  label: string,
22
24
  name?: string,
23
25
  value?: string,
24
26
  text?: string,
25
- onChange: (event: React.FormEvent<HTMLInputElement> | null)=>void,
27
+ onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
26
28
  } & GlobalProps
27
29
 
28
30
  const Radio = ({
@@ -30,10 +32,11 @@ const Radio = ({
30
32
  alignment,
31
33
  children,
32
34
  className,
35
+ customChildren= false,
33
36
  dark = false,
34
- data = {},
35
37
  disabled = false,
36
38
  error = false,
39
+ data = {},
37
40
  htmlOptions = {},
38
41
  id,
39
42
  label,
@@ -43,17 +46,28 @@ const Radio = ({
43
46
  onChange = () => { void 0 },
44
47
  ...props
45
48
  }: RadioProps, ref: any) => {
46
- const ariaProps = buildAriaProps(aria)
47
- const dataProps = buildDataProps(data)
48
- const htmlProps = buildHtmlProps(htmlOptions)
49
+ const radioRef = useRef(null);
50
+
51
+ const ariaProps = buildAriaProps(aria);
52
+ const dataProps = buildDataProps(data);
53
+ const htmlProps = buildHtmlProps(htmlOptions);
49
54
  const classes = classnames(
50
- buildCss('pb_radio_kit', alignment ),
51
- dark ? 'dark': null, error ? 'error': null,
55
+ buildCss('pb_radio_kit', alignment),
56
+ dark ? 'dark' : null,
57
+ error ? 'error' : null,
52
58
  globalProps(props),
53
- className)
59
+ className
60
+ );
61
+
62
+ const classesCustom = classnames(
63
+ dark ? 'dark' : null,
64
+ error ? 'error' : null,
65
+ globalProps(props),
66
+ className
67
+ );
54
68
 
55
69
  const displayRadio = (props: RadioProps & any) => {
56
- if (children)
70
+ if (children && customChildren == false)
57
71
  return (children)
58
72
  else
59
73
  return (
@@ -70,24 +84,69 @@ const Radio = ({
70
84
  />
71
85
  )}
72
86
 
87
+ const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
88
+ if (event) {
89
+ const target = event.target as HTMLElement;
90
+ if (
91
+ target.id === 'pb-radio-children-wrapper' ||
92
+ target.closest('#pb-radio-children-wrapper')
93
+ ) {
94
+ radioRef.current?.click();
95
+ }
96
+ }
97
+ };
98
+
73
99
  return (
74
- <label
75
- {...ariaProps}
76
- {...dataProps}
77
- {...htmlProps}
78
- className={classes}
79
- htmlFor={id}
80
- >
81
- <>{displayRadio(props)}</>
82
- <span className="pb_radio_button" />
83
- <Body
84
- dark={dark}
85
- status={error ? 'negative' : null}
86
- text={label}
87
- variant={null}
88
- />
89
- </label>
90
- )
91
- }
100
+ customChildren ? (
101
+ <Flex
102
+ {...ariaProps}
103
+ {...dataProps}
104
+ {...htmlProps}
105
+ align='center'
106
+ className={classesCustom}
107
+ cursor='pointer'
108
+ htmlFor={id}
109
+ htmlOptions={{
110
+ onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
111
+ handleContainerClick(event);
112
+ }) as unknown as () => void
113
+ }}
114
+ id="radio-container"
115
+ >
116
+ <label className={buildCss('pb_radio_kit', alignment)}>
117
+ <input
118
+ disabled={disabled}
119
+ id={id}
120
+ name={name}
121
+ onChange={onChange}
122
+ ref={radioRef}
123
+ type="radio"
124
+ value={value}
125
+ {...props}
126
+ />
127
+ <span className="pb_radio_button" />
128
+ </label>
129
+ <div id="pb-radio-children-wrapper"> {children} </div>
130
+ </Flex>
131
+ ) : (
132
+ <label
133
+ {...ariaProps}
134
+ {...dataProps}
135
+ {...htmlProps}
136
+ className={classes}
137
+ htmlFor={id}
138
+ >
139
+ <>{displayRadio(props)}</>
140
+ <span className="pb_radio_button" />
141
+ <Body
142
+ dark={dark}
143
+ status={error ? 'negative' : null}
144
+ text={label}
145
+ variant={null}
146
+ />
147
+ </label>
148
+ )
149
+ );
150
+ };
92
151
 
93
- export default forwardRef(Radio)
152
+ export default forwardRef(Radio);
@@ -0,0 +1,59 @@
1
+ import React from 'react'
2
+ import Radio from '../_radio'
3
+ import Select from '../../pb_select/_select'
4
+ import Typeahead from '../../pb_typeahead/_typeahead'
5
+ import Title from '../../pb_title/_title'
6
+
7
+ const RadioChildren = (props) => {
8
+
9
+
10
+ const options = [
11
+ { label: 'Orange', value: 'Orange' },
12
+ { label: 'Red', value: 'Red' },
13
+ { label: 'Green', value: 'Green' },
14
+ { label: 'Blue', value: 'Blue' },
15
+ ]
16
+
17
+ return (
18
+ <div>
19
+ <Radio
20
+ customChildren
21
+ label="Select"
22
+ name="Group1"
23
+ tabIndex={0}
24
+ value="Select"
25
+ {...props}
26
+ >
27
+ <Select
28
+ minWidth="xs"
29
+ options={options}
30
+ />
31
+ </Radio>
32
+ <Radio
33
+ customChildren
34
+ label="Typeahead"
35
+ name="Group1"
36
+ tabIndex={0}
37
+ value="Typeahead"
38
+ {...props}
39
+ >
40
+ <Typeahead
41
+ minWidth="xs"
42
+ options={options}
43
+ />
44
+ </Radio>
45
+ <br />
46
+ <Radio
47
+ customChildren
48
+ defaultChecked={false}
49
+ label="Typography"
50
+ name="Group1"
51
+ value="Typography"
52
+ {...props}
53
+ >
54
+ <Title text="Custom Typography" />
55
+ </Radio>
56
+ </div>
57
+ )
58
+ }
59
+ export default RadioChildren
@@ -15,6 +15,7 @@ examples:
15
15
  - radio_error: With Error
16
16
  - radio_alignment: Alignment
17
17
  - radio_disabled: Disabled
18
+ - radio_custom_children: Custom Children
18
19
 
19
20
  swift:
20
21
  - radio_default_swift: Default
@@ -3,3 +3,4 @@ export { default as RadioCustom } from './_radio_custom.jsx'
3
3
  export { default as RadioError } from './_radio_error.jsx'
4
4
  export { default as RadioAlignment } from './_radio_alignment.jsx'
5
5
  export { default as RadioDisabled } from './_radio_disabled.jsx'
6
+ export { default as RadioCustomChildren } from './_radio_custom_children.jsx'