@purr-react-styled-components/components.radio-group 0.0.9 → 0.0.10
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/index.cjs +51 -0
- package/dist/index.d.cts +38 -0
- package/dist/index.d.ts +38 -0
- package/dist/index.js +51 -0
- package/package.json +5 -5
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
'use strict';var y=require('clsx'),h=require('react'),G=require('@purr-core/hooks.sync-state-with-props'),m=require('styled-components'),utils_helpers=require('@purr-core/utils.helpers');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var y__default=/*#__PURE__*/_interopDefault(y);var h__default=/*#__PURE__*/_interopDefault(h);var G__default=/*#__PURE__*/_interopDefault(G);var m__default=/*#__PURE__*/_interopDefault(m);var i={Container:m__default.default.div`
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: ${({$direction:o})=>o};
|
|
4
|
+
align-items: ${({$direction:o})=>o==="column"?"flex-start":"inherit"};
|
|
5
|
+
gap: 16px;
|
|
6
|
+
position: relative;
|
|
7
|
+
`,OptionLabel:m__default.default.label`
|
|
8
|
+
display: flex;
|
|
9
|
+
align-items: center;
|
|
10
|
+
gap: 12px;
|
|
11
|
+
cursor: ${({$disabled:o})=>o?"not-allowed":"pointer"};
|
|
12
|
+
opacity: ${({$disabled:o})=>o?.4:1};
|
|
13
|
+
`,OptionInput:m__default.default.input`
|
|
14
|
+
appearance: none;
|
|
15
|
+
width: 16px;
|
|
16
|
+
height: 16px;
|
|
17
|
+
border: 1px solid #d9d9d9;
|
|
18
|
+
border-radius: 50%;
|
|
19
|
+
background-color: #ffffff;
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
transition: all 300ms ease-in-out;
|
|
22
|
+
|
|
23
|
+
&::before {
|
|
24
|
+
content: "";
|
|
25
|
+
display: block;
|
|
26
|
+
margin-top: 4px;
|
|
27
|
+
margin-left: 4px;
|
|
28
|
+
width: 6px;
|
|
29
|
+
height: 6px;
|
|
30
|
+
border-radius: 50%;
|
|
31
|
+
background-color: #ffffff;
|
|
32
|
+
transform: scale(0);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&:checked::before {
|
|
36
|
+
transform: scale(1);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:checked {
|
|
40
|
+
background-color: #44403c;
|
|
41
|
+
border-color: #44403c;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&[type="radio" i] {
|
|
45
|
+
margin: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&:hover:not(:disabled) {
|
|
49
|
+
border-color: #44403c;
|
|
50
|
+
}
|
|
51
|
+
`};var f=h.memo(({label:o,value:r,name:e,disabled:t,htmlAttributes:u,isStandalone:n,currentValue:s,setCurrentValue:l,onChange:p})=>{let d=n?void 0:s===r,b=h.useCallback(c=>{p?.(r,c),l?.(r);},[p,l,r]);return h__default.default.createElement(i.OptionLabel,{$disabled:t,...u,className:"radio-group-option"},h__default.default.createElement(i.OptionInput,{className:y__default.default("radio-group-option-input",d?"radio-group-option-input--checked":""),name:e,type:"radio",value:r,checked:d,onChange:b,disabled:t}),o)},utils_helpers.arePropsShallowEqual(["currentValue"],(o,r,e)=>{if(o==="currentValue")return e.currentValue===e.value==(r.currentValue===r.value)}));f.displayName="RadioGroupOption";var S=h.forwardRef(({options:o,className:r,name:e,value:t="",onChange:u,isStandalone:n=false,direction:s="column",disabled:l=false,htmlAttributes:p,optionHtmlAttributes:d},b)=>{let{currentValue:c,setCurrentValue:x}=G__default.default(t,n);return h__default.default.createElement(i.Container,{...p,$direction:s,className:y__default.default("radio-group",r)},o?.map(a=>h__default.default.createElement(f,{key:a.key,label:a.label,value:a.value,name:e,htmlAttributes:d??a.htmlAttributes,isStandalone:n,currentValue:c,setCurrentValue:x,onChange:u,disabled:a.disabled??l})))});S.displayName="RadioGroup";exports.RadioGroup=S;
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React, { ReactNode, LabelHTMLAttributes, HTMLAttributes, ChangeEvent } from 'react';
|
|
2
|
+
import { IExtendable } from '@purr-core/utils.definitions';
|
|
3
|
+
|
|
4
|
+
type TRadioGroupDirection = "column" | "row";
|
|
5
|
+
interface IRadioGroupOption {
|
|
6
|
+
key: string;
|
|
7
|
+
value: string;
|
|
8
|
+
label?: ReactNode;
|
|
9
|
+
htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
}
|
|
12
|
+
interface IRadioGroupOptionProps extends IRadioGroupOption {
|
|
13
|
+
name: string;
|
|
14
|
+
currentValue?: string;
|
|
15
|
+
isStandalone?: boolean;
|
|
16
|
+
setCurrentValue?: (value: string) => void;
|
|
17
|
+
onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
|
|
18
|
+
}
|
|
19
|
+
interface IRadioGroupLabelProps {
|
|
20
|
+
label?: ReactNode;
|
|
21
|
+
htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
|
|
22
|
+
}
|
|
23
|
+
interface IRadioGroupProps {
|
|
24
|
+
className?: string;
|
|
25
|
+
options: IRadioGroupOption[];
|
|
26
|
+
name: string;
|
|
27
|
+
value?: string;
|
|
28
|
+
isStandalone?: boolean;
|
|
29
|
+
direction?: TRadioGroupDirection;
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
|
|
32
|
+
optionHtmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
|
|
33
|
+
onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
declare const RadioGroup: React.ForwardRefExoticComponent<IRadioGroupProps & React.RefAttributes<HTMLElement>>;
|
|
37
|
+
|
|
38
|
+
export { type IRadioGroupLabelProps, type IRadioGroupOption, type IRadioGroupOptionProps, type IRadioGroupProps, RadioGroup, type TRadioGroupDirection };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React, { ReactNode, LabelHTMLAttributes, HTMLAttributes, ChangeEvent } from 'react';
|
|
2
|
+
import { IExtendable } from '@purr-core/utils.definitions';
|
|
3
|
+
|
|
4
|
+
type TRadioGroupDirection = "column" | "row";
|
|
5
|
+
interface IRadioGroupOption {
|
|
6
|
+
key: string;
|
|
7
|
+
value: string;
|
|
8
|
+
label?: ReactNode;
|
|
9
|
+
htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
}
|
|
12
|
+
interface IRadioGroupOptionProps extends IRadioGroupOption {
|
|
13
|
+
name: string;
|
|
14
|
+
currentValue?: string;
|
|
15
|
+
isStandalone?: boolean;
|
|
16
|
+
setCurrentValue?: (value: string) => void;
|
|
17
|
+
onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
|
|
18
|
+
}
|
|
19
|
+
interface IRadioGroupLabelProps {
|
|
20
|
+
label?: ReactNode;
|
|
21
|
+
htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
|
|
22
|
+
}
|
|
23
|
+
interface IRadioGroupProps {
|
|
24
|
+
className?: string;
|
|
25
|
+
options: IRadioGroupOption[];
|
|
26
|
+
name: string;
|
|
27
|
+
value?: string;
|
|
28
|
+
isStandalone?: boolean;
|
|
29
|
+
direction?: TRadioGroupDirection;
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
|
|
32
|
+
optionHtmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
|
|
33
|
+
onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
declare const RadioGroup: React.ForwardRefExoticComponent<IRadioGroupProps & React.RefAttributes<HTMLElement>>;
|
|
37
|
+
|
|
38
|
+
export { type IRadioGroupLabelProps, type IRadioGroupOption, type IRadioGroupOptionProps, type IRadioGroupProps, RadioGroup, type TRadioGroupDirection };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import y from'clsx';import h,{memo,useCallback,forwardRef}from'react';import G from'@purr-core/hooks.sync-state-with-props';import m from'styled-components';import {arePropsShallowEqual}from'@purr-core/utils.helpers';var i={Container:m.div`
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: ${({$direction:o})=>o};
|
|
4
|
+
align-items: ${({$direction:o})=>o==="column"?"flex-start":"inherit"};
|
|
5
|
+
gap: 16px;
|
|
6
|
+
position: relative;
|
|
7
|
+
`,OptionLabel:m.label`
|
|
8
|
+
display: flex;
|
|
9
|
+
align-items: center;
|
|
10
|
+
gap: 12px;
|
|
11
|
+
cursor: ${({$disabled:o})=>o?"not-allowed":"pointer"};
|
|
12
|
+
opacity: ${({$disabled:o})=>o?.4:1};
|
|
13
|
+
`,OptionInput:m.input`
|
|
14
|
+
appearance: none;
|
|
15
|
+
width: 16px;
|
|
16
|
+
height: 16px;
|
|
17
|
+
border: 1px solid #d9d9d9;
|
|
18
|
+
border-radius: 50%;
|
|
19
|
+
background-color: #ffffff;
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
transition: all 300ms ease-in-out;
|
|
22
|
+
|
|
23
|
+
&::before {
|
|
24
|
+
content: "";
|
|
25
|
+
display: block;
|
|
26
|
+
margin-top: 4px;
|
|
27
|
+
margin-left: 4px;
|
|
28
|
+
width: 6px;
|
|
29
|
+
height: 6px;
|
|
30
|
+
border-radius: 50%;
|
|
31
|
+
background-color: #ffffff;
|
|
32
|
+
transform: scale(0);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&:checked::before {
|
|
36
|
+
transform: scale(1);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:checked {
|
|
40
|
+
background-color: #44403c;
|
|
41
|
+
border-color: #44403c;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&[type="radio" i] {
|
|
45
|
+
margin: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&:hover:not(:disabled) {
|
|
49
|
+
border-color: #44403c;
|
|
50
|
+
}
|
|
51
|
+
`};var f=memo(({label:o,value:r,name:e,disabled:t,htmlAttributes:u,isStandalone:n,currentValue:s,setCurrentValue:l,onChange:p})=>{let d=n?void 0:s===r,b=useCallback(c=>{p?.(r,c),l?.(r);},[p,l,r]);return h.createElement(i.OptionLabel,{$disabled:t,...u,className:"radio-group-option"},h.createElement(i.OptionInput,{className:y("radio-group-option-input",d?"radio-group-option-input--checked":""),name:e,type:"radio",value:r,checked:d,onChange:b,disabled:t}),o)},arePropsShallowEqual(["currentValue"],(o,r,e)=>{if(o==="currentValue")return e.currentValue===e.value==(r.currentValue===r.value)}));f.displayName="RadioGroupOption";var S=forwardRef(({options:o,className:r,name:e,value:t="",onChange:u,isStandalone:n=false,direction:s="column",disabled:l=false,htmlAttributes:p,optionHtmlAttributes:d},b)=>{let{currentValue:c,setCurrentValue:x}=G(t,n);return h.createElement(i.Container,{...p,$direction:s,className:y("radio-group",r)},o?.map(a=>h.createElement(f,{key:a.key,label:a.label,value:a.value,name:e,htmlAttributes:d??a.htmlAttributes,isStandalone:n,currentValue:c,setCurrentValue:x,onChange:u,disabled:a.disabled??l})))});S.displayName="RadioGroup";export{S as RadioGroup};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purr-react-styled-components/components.radio-group",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
"react": "*",
|
|
26
26
|
"styled-components": "*",
|
|
27
27
|
"clsx": "*",
|
|
28
|
-
"@purr-core/utils.definitions": "0.0.
|
|
29
|
-
"@purr-core/utils.helpers": "0.0.
|
|
30
|
-
"@purr-core/hooks.sync-state-with-props": "0.0.
|
|
28
|
+
"@purr-core/utils.definitions": "0.0.12",
|
|
29
|
+
"@purr-core/utils.helpers": "0.0.12",
|
|
30
|
+
"@purr-core/hooks.sync-state-with-props": "0.0.9"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@purr-react-styled-components/components.form-field": "0.0.
|
|
33
|
+
"@purr-react-styled-components/components.form-field": "0.0.3"
|
|
34
34
|
},
|
|
35
35
|
"author": "@DinhThienPhuc",
|
|
36
36
|
"license": "ISC",
|