@codeleap/web 7.2.3-next.1 → 7.3.0-next.0
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.
- package/dist/components/RadioInput/index.d.ts +3 -1
- package/dist/components/RadioInput/index.d.ts.map +1 -1
- package/dist/components/RadioInput/index.js +7 -3
- package/dist/components/RadioInput/index.js.map +1 -1
- package/dist/components/RadioInput/types.d.ts +7 -4
- package/dist/components/RadioInput/types.d.ts.map +1 -1
- package/package.json +17 -17
- package/src/components/RadioInput/index.tsx +16 -5
- package/src/components/RadioInput/types.ts +8 -4
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { RadioInputProps } from './types';
|
|
1
|
+
import { RadioOptionProps, RadioInputProps } from './types';
|
|
2
2
|
export * from './styles';
|
|
3
3
|
export * from './types';
|
|
4
|
+
export declare const RadioOption: <T extends string | number>(props: RadioOptionProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
4
5
|
/**
|
|
5
6
|
* Single-select radio group that renders each option as a `Touchable` row with an indicator circle and label, separated by optional dividers.
|
|
6
7
|
* Integrates with `@codeleap/form` via `SelectableField`; pair with `field` or `value`/`onValueChange`.
|
|
@@ -8,6 +9,7 @@ export * from './types';
|
|
|
8
9
|
*/
|
|
9
10
|
export declare const RadioInput: {
|
|
10
11
|
<T extends string | number>(props: RadioInputProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
12
|
+
Option: <T extends string | number>(props: RadioOptionProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
11
13
|
styleRegistryName: string;
|
|
12
14
|
elements: string[];
|
|
13
15
|
rootElement: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/index.tsx"],"names":[],"mappings":"AAKA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAQ3D,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AAEvB,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,OAAO,gBAAgB,CAAC,CAAC,CAAC,qDAwChF,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU;KAAI,CAAC,SAAS,MAAM,GAAG,MAAM,SAAS,eAAe,CAAC,CAAC,CAAC;aA/CnD,CAAC,SAAS,MAAM,GAAG,MAAM,SAAS,gBAAgB,CAAC,CAAC,CAAC;;;;;CAuHhF,CAAA"}
|
|
@@ -12,8 +12,11 @@ import { Field } from '../Field';
|
|
|
12
12
|
import { toDataAttrs } from '../../lib';
|
|
13
13
|
export * from './styles';
|
|
14
14
|
export * from './types';
|
|
15
|
-
const
|
|
16
|
-
const { debugName,
|
|
15
|
+
export const RadioOption = (props) => {
|
|
16
|
+
const { debugName, disabled, styles: providedStyles, fieldContext, style, selected, onSelect, separator = false, } = props;
|
|
17
|
+
const item = 'item' in props ? props?.item : { label: props.label, value: props?.value, disabled: disabled || props?.disabled };
|
|
18
|
+
const ownStyles = useStylesFor(RadioInput.styleRegistryName, style, fieldContext);
|
|
19
|
+
const styles = providedStyles ?? ownStyles;
|
|
17
20
|
const isDisabled = disabled || item?.disabled;
|
|
18
21
|
const stateAttrs = toDataAttrs({ selected: !!selected, disabled: !!isDisabled });
|
|
19
22
|
return (_jsxs(React.Fragment, { children: [_jsxs(Touchable, { debugName: `${debugName} option ${item.value}`, style: styles.optionWrapper, onPress: onSelect, disabled: isDisabled, children: [_jsx(View, { style: styles.optionIndicator, ...stateAttrs, children: _jsx(View, { style: styles.optionIndicatorInner, ...stateAttrs }) }), TypeGuards.isString(item.label) ? _jsx(Text, { style: styles.optionLabel, text: item.label }) : item.label] }), separator ? _jsx(View, { style: styles.optionSeparator }) : null] }));
|
|
@@ -37,8 +40,9 @@ export const RadioInput = (props) => {
|
|
|
37
40
|
focused: false,
|
|
38
41
|
};
|
|
39
42
|
const styles = useStylesFor(RadioInput.styleRegistryName, style, fieldContext);
|
|
40
|
-
return (_jsx(Field.Provider, { context: fieldContext, label: label, helper: validation?.showError ? validation?.message : helper, leftSection: leftSection, rightSection: rightSection, componentName: 'radioInput', children: _jsxs(Field.Wrapper, { ref: wrapperRef, style: styles.wrapper, children: [_jsx(Field.Heading, { style: styles.heading }), _jsx(View, { style: styles.box, children: options?.map((item, idx) => (_jsx(
|
|
43
|
+
return (_jsx(Field.Provider, { context: fieldContext, label: label, helper: validation?.showError ? validation?.message : helper, leftSection: leftSection, rightSection: rightSection, componentName: 'radioInput', children: _jsxs(Field.Wrapper, { ref: wrapperRef, style: styles.wrapper, children: [_jsx(Field.Heading, { style: styles.heading }), _jsx(View, { style: styles.box, children: options?.map((item, idx) => (_jsx(RadioOption, { debugName: debugName, item: item, fieldContext: fieldContext, disabled: disabled, styles: styles, selected: inputValue === item.value, onSelect: () => onInputValueChange(item.value), separator: idx < options?.length - 1 }, idx))) }), _jsx(Field.Helper, { style: styles.helper })] }) }));
|
|
41
44
|
};
|
|
45
|
+
RadioInput.Option = RadioOption;
|
|
42
46
|
RadioInput.styleRegistryName = 'RadioInput';
|
|
43
47
|
RadioInput.elements = [...Field.elements, 'optionWrapper', 'optionLabel', 'optionIndicator', 'optionIndicatorInner', 'optionSeparator'];
|
|
44
48
|
RadioInput.rootElement = 'wrapper';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RadioInput/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RadioInput/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import { Option } from '@codeleap/types';
|
|
|
2
2
|
import { ICSS, StyleProp } from '@codeleap/styles';
|
|
3
3
|
import { RadioInputComposition } from './styles';
|
|
4
4
|
import { SelectableField } from '@codeleap/form';
|
|
5
|
-
import { FieldProps } from '../Field';
|
|
5
|
+
import { FieldProps, FieldStateContext } from '../Field';
|
|
6
6
|
type RadioOption<T extends string | number> = Option<T> & {
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
};
|
|
@@ -24,13 +24,16 @@ export type RadioInputProps<T extends string | number> = Pick<FieldProps, 'label
|
|
|
24
24
|
};
|
|
25
25
|
/** Internal props for the per-option row rendered inside `RadioInput`. */
|
|
26
26
|
export type RadioOptionProps<T extends string | number> = {
|
|
27
|
-
item: RadioOption<T>;
|
|
28
27
|
selected: boolean;
|
|
29
28
|
onSelect(): void;
|
|
30
|
-
|
|
29
|
+
fieldContext?: FieldStateContext;
|
|
30
|
+
style?: RadioInputProps<T>['style'];
|
|
31
|
+
styles?: Record<RadioInputComposition, ICSS>;
|
|
31
32
|
debugName?: string;
|
|
32
33
|
disabled?: boolean;
|
|
33
34
|
separator?: boolean;
|
|
34
|
-
}
|
|
35
|
+
} & (RadioOption<T> | {
|
|
36
|
+
item: RadioOption<T>;
|
|
37
|
+
});
|
|
35
38
|
export {};
|
|
36
39
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAExD,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,MAAM,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAA;CAChD;AAED;;;GAGG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IACnD,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,aAAa,GAAG,cAAc,CAAC,GAAG;IACtE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,qBAAqB,EAAE,MAAM,kBAAkB,CAAC,CAAA;IAClE,KAAK,CAAC,EAAE,eAAe,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;IAC/B,KAAK,CAAC,EAAE,CAAC,CAAA;IACT,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAEH,0EAA0E;AAC1E,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAExD,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,IAAI,IAAI,CAAA;IAChB,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAChC,KAAK,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG;IACpB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,CAAA;CACrB,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codeleap/web",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.3.0-next.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -22,15 +22,15 @@
|
|
|
22
22
|
},
|
|
23
23
|
"license": "UNLICENSED",
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@codeleap/config": "7.
|
|
26
|
-
"@codeleap/form": "7.
|
|
27
|
-
"@codeleap/hooks": "7.
|
|
28
|
-
"@codeleap/logger": "7.
|
|
29
|
-
"@codeleap/query": "7.
|
|
30
|
-
"@codeleap/styles": "7.
|
|
31
|
-
"@codeleap/types": "7.
|
|
32
|
-
"@codeleap/utils": "7.
|
|
33
|
-
"@codeleap/store": "7.
|
|
25
|
+
"@codeleap/config": "7.3.0-next.0",
|
|
26
|
+
"@codeleap/form": "7.3.0-next.0",
|
|
27
|
+
"@codeleap/hooks": "7.3.0-next.0",
|
|
28
|
+
"@codeleap/logger": "7.3.0-next.0",
|
|
29
|
+
"@codeleap/query": "7.3.0-next.0",
|
|
30
|
+
"@codeleap/styles": "7.3.0-next.0",
|
|
31
|
+
"@codeleap/types": "7.3.0-next.0",
|
|
32
|
+
"@codeleap/utils": "7.3.0-next.0",
|
|
33
|
+
"@codeleap/store": "7.3.0-next.0",
|
|
34
34
|
"@tanstack/react-query": "5.100.9"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
@@ -60,13 +60,13 @@
|
|
|
60
60
|
"uuid": "13.0.0"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
|
-
"@codeleap/types": "7.
|
|
64
|
-
"@codeleap/utils": "7.
|
|
65
|
-
"@codeleap/hooks": "7.
|
|
66
|
-
"@codeleap/query": "7.
|
|
67
|
-
"@codeleap/logger": "7.
|
|
68
|
-
"@codeleap/styles": "7.
|
|
69
|
-
"@codeleap/store": "7.
|
|
63
|
+
"@codeleap/types": "7.3.0-next.0",
|
|
64
|
+
"@codeleap/utils": "7.3.0-next.0",
|
|
65
|
+
"@codeleap/hooks": "7.3.0-next.0",
|
|
66
|
+
"@codeleap/query": "7.3.0-next.0",
|
|
67
|
+
"@codeleap/logger": "7.3.0-next.0",
|
|
68
|
+
"@codeleap/styles": "7.3.0-next.0",
|
|
69
|
+
"@codeleap/store": "7.3.0-next.0",
|
|
70
70
|
"@emotion/react": "11.14.0",
|
|
71
71
|
"@reach/router": "^1.3.4",
|
|
72
72
|
"dayjs": "1.11.18",
|
|
@@ -7,24 +7,32 @@ import { RadioOptionProps, RadioInputProps } from './types'
|
|
|
7
7
|
import { useStylesFor } from '../../lib/hooks/useStylesFor'
|
|
8
8
|
import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
|
|
9
9
|
import { useFieldInput } from '../Field'
|
|
10
|
-
import {
|
|
10
|
+
import { fields } from '@codeleap/form'
|
|
11
11
|
import { Field } from '../Field'
|
|
12
12
|
import { toDataAttrs } from '../../lib'
|
|
13
13
|
|
|
14
14
|
export * from './styles'
|
|
15
15
|
export * from './types'
|
|
16
16
|
|
|
17
|
-
const
|
|
17
|
+
export const RadioOption = <T extends string | number>(props: RadioOptionProps<T>) => {
|
|
18
18
|
const {
|
|
19
19
|
debugName,
|
|
20
|
-
|
|
20
|
+
|
|
21
21
|
disabled,
|
|
22
|
-
styles,
|
|
22
|
+
styles: providedStyles,
|
|
23
|
+
fieldContext,
|
|
24
|
+
style,
|
|
23
25
|
selected,
|
|
24
26
|
onSelect,
|
|
25
27
|
separator = false,
|
|
26
28
|
} = props
|
|
27
29
|
|
|
30
|
+
const item = 'item' in props ? props?.item : { label: props.label, value: props?.value, disabled: disabled || props?.disabled }
|
|
31
|
+
|
|
32
|
+
const ownStyles = useStylesFor(RadioInput.styleRegistryName, style, fieldContext)
|
|
33
|
+
|
|
34
|
+
const styles = providedStyles ?? ownStyles
|
|
35
|
+
|
|
28
36
|
const isDisabled = disabled || item?.disabled
|
|
29
37
|
const stateAttrs = toDataAttrs({ selected: !!selected, disabled: !!isDisabled })
|
|
30
38
|
|
|
@@ -107,10 +115,11 @@ export const RadioInput = <T extends string | number>(props: RadioInputProps<T>)
|
|
|
107
115
|
|
|
108
116
|
<View style={styles.box}>
|
|
109
117
|
{options?.map((item, idx) => (
|
|
110
|
-
<
|
|
118
|
+
<RadioOption
|
|
111
119
|
debugName={debugName}
|
|
112
120
|
item={item}
|
|
113
121
|
key={idx}
|
|
122
|
+
fieldContext={fieldContext}
|
|
114
123
|
disabled={disabled}
|
|
115
124
|
styles={styles}
|
|
116
125
|
selected={inputValue === item.value}
|
|
@@ -126,6 +135,8 @@ export const RadioInput = <T extends string | number>(props: RadioInputProps<T>)
|
|
|
126
135
|
)
|
|
127
136
|
}
|
|
128
137
|
|
|
138
|
+
RadioInput.Option = RadioOption
|
|
139
|
+
|
|
129
140
|
RadioInput.styleRegistryName = 'RadioInput'
|
|
130
141
|
RadioInput.elements = [...Field.elements, 'optionWrapper', 'optionLabel', 'optionIndicator', 'optionIndicatorInner', 'optionSeparator']
|
|
131
142
|
RadioInput.rootElement = 'wrapper'
|
|
@@ -2,7 +2,7 @@ import { Option } from '@codeleap/types'
|
|
|
2
2
|
import { ICSS, StyleProp } from '@codeleap/styles'
|
|
3
3
|
import { RadioInputComposition } from './styles'
|
|
4
4
|
import { SelectableField } from '@codeleap/form'
|
|
5
|
-
import { FieldProps } from '../Field'
|
|
5
|
+
import { FieldProps, FieldStateContext } from '../Field'
|
|
6
6
|
|
|
7
7
|
type RadioOption<T extends string | number> = Option<T> & {
|
|
8
8
|
disabled?: boolean
|
|
@@ -29,11 +29,15 @@ export type RadioInputProps<T extends string | number> =
|
|
|
29
29
|
|
|
30
30
|
/** Internal props for the per-option row rendered inside `RadioInput`. */
|
|
31
31
|
export type RadioOptionProps<T extends string | number> = {
|
|
32
|
-
|
|
32
|
+
|
|
33
33
|
selected: boolean
|
|
34
34
|
onSelect(): void
|
|
35
|
-
|
|
35
|
+
fieldContext?: FieldStateContext
|
|
36
|
+
style?: RadioInputProps<T>['style']
|
|
37
|
+
styles?: Record<RadioInputComposition, ICSS>
|
|
36
38
|
debugName?: string
|
|
37
39
|
disabled?: boolean
|
|
38
40
|
separator?: boolean
|
|
39
|
-
}
|
|
41
|
+
} & (RadioOption<T> | {
|
|
42
|
+
item: RadioOption<T>
|
|
43
|
+
})
|