@purr-react-styled-components/components.collapse 0.0.4 → 0.0.5

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.
Files changed (5) hide show
  1. package/dist/index.cjs +71 -0
  2. package/dist/index.d.cts +59 -0
  3. package/dist/index.d.ts +59 -0
  4. package/dist/index.js +71 -0
  5. package/package.json +7 -7
package/dist/index.cjs ADDED
@@ -0,0 +1,71 @@
1
+ 'use strict';var A=require('clsx'),I=require('react'),components_divider=require('@purr-react-styled-components/components.divider'),p=require('styled-components'),utils_helpers=require('@purr-react-styled-components/utils.helpers'),components_typography=require('@purr-react-styled-components/components.typography'),components_icon=require('@purr-react-styled-components/components.icon');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var A__default=/*#__PURE__*/_interopDefault(A);var I__default=/*#__PURE__*/_interopDefault(I);var p__default=/*#__PURE__*/_interopDefault(p);var o={Container:p__default.default.div`
2
+ border: 1px solid #d9d9d9;
3
+ border-radius: 8px;
4
+ overflow: hidden;
5
+ `,ItemContainer:p__default.default.div`
6
+ transition: margin 150ms ease-in-out;
7
+ width: 100%;
8
+ will-change: margin;
9
+
10
+ &:first-of-type {
11
+ margin-top: 0px;
12
+ }
13
+
14
+ &:last-of-type {
15
+ margin-bottom: 0px;
16
+ }
17
+
18
+ ${({$disabled:t})=>t?p.css`
19
+ opacity: 0.3;
20
+ pointer-events: none;
21
+ cursor: not-allowed;
22
+ `:p.css`
23
+ cursor: pointer;
24
+ `};
25
+ `,ItemHeader:p__default.default.button`
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: space-between;
29
+ gap: 16px;
30
+ padding: 0px 16px;
31
+ width: 100%;
32
+ height: 46px;
33
+ border-bottom: 1px solid
34
+ ${({$isExpanded:t})=>t?"#d9d9d9":"transparent"};
35
+ background-color: #00000005;
36
+ ${utils_helpers.getInvisibleButton}
37
+ `,ItemHeaderSection:p__default.default.span`
38
+ display: flex;
39
+ align-items: center;
40
+ gap: 16px;
41
+ `,ItemHeaderSectionGroup:p__default.default.span`
42
+ display: flex;
43
+ justify-content: space-between;
44
+ flex-grow: 1;
45
+ `,ItemHeaderExpandIcon:p__default.default.span`
46
+ display: flex;
47
+ transition: all 250ms ease-in-out;
48
+ transform: ${({$isExpanded:t})=>t?"rotate(180deg)":"none"};
49
+ `,ItemContent:p__default.default.div`
50
+ transition:
51
+ max-height 150ms ease-in-out,
52
+ opacity 150ms ease-in-out,
53
+ padding-top 150ms ease-in-out,
54
+ padding-bottom 150ms ease-in-out;
55
+ padding-left: 16px;
56
+ padding-right: 16px;
57
+ overflow: hidden;
58
+ will-change: max-height, opacity, padding-top, padding-bottom;
59
+
60
+ ${({$isExpanded:t})=>t?p.css`
61
+ max-height: 200vh;
62
+ padding-top: 16px;
63
+ padding-bottom: 16px;
64
+ opacity: 1;
65
+ `:p.css`
66
+ max-height: 0px;
67
+ padding-top: 0px;
68
+ padding-bottom: 0px;
69
+ opacity: 0;
70
+ `};
71
+ `};var H=I.memo(({expandIcon:t,isExpanded:r,htmlAttributes:l,showExpandIcon:n})=>(console.log("showExpandIcon",n),n?I__default.default.createElement(o.ItemHeaderExpandIcon,{...l,$isExpanded:r,className:"collapse-item__header__right__expand-icon"},t??I__default.default.createElement(components_icon.Icon,{name:"chevron-down",width:14,height:14})):null));H.displayName="CollapseItemExpandIcon";var C=I.memo(({label:t,preIcon:r,postIcon:l,expandIcon:n,isExpanded:s,isOnlyOneExpand:x,id:d,showExpandIcon:u,expandIconHtmlAttributes:y,htmlAttributes:b,labelHtmlAttributes:m,setItemDictionary:e})=>{let a=c=>()=>{e(x?i=>({...Object.keys(i).reduce((E,$)=>(E[$]=false,E),{}),[c]:!i[c]}):i=>({...i,[c]:!i[c]}));},h=I.useMemo(()=>I__default.default.createElement(o.ItemHeaderSectionGroup,null,I__default.default.createElement(o.ItemHeaderSection,{className:"collapse-item__header__left"},r,I__default.default.createElement(components_typography.Typography,{className:"collapse-item__header-label",htmlAttributes:m},t)),I__default.default.createElement(o.ItemHeaderSection,{className:"collapse-item__header__right"},l)),[t,m,l,r]);return I__default.default.createElement(o.ItemHeader,{...b,$isExpanded:s,className:"collapse-item__header",onClick:a(d)},I__default.default.createElement(H,{htmlAttributes:y,expandIcon:n,isExpanded:s,showExpandIcon:u}),h)});C.displayName="CollapseItemHeader";var _=I.memo(({id:t,label:r,body:l,preIcon:n,postIcon:s,expandIcon:x,disabled:d,bodyHtmlAttributes:u,htmlAttributes:y,expandIconHtmlAttributes:b,itemHeaderHtmlAttributes:m,itemHeaderLabelHtmlAttributes:e,isExpanded:a,isOnlyOneExpand:h,showExpandIcon:c,setItemDictionary:i})=>I__default.default.createElement(o.ItemContainer,{...y,$disabled:d,className:A__default.default("collapse-item",a&&"collapse-item--isExpanded",d&&"collapse-item--disabled")},I__default.default.createElement(C,{label:r,preIcon:n,postIcon:s,expandIcon:x,isExpanded:a,isOnlyOneExpand:h,id:t,showExpandIcon:c,expandIconHtmlAttributes:b,htmlAttributes:m,labelHtmlAttributes:e,setItemDictionary:i}),I__default.default.createElement(o.ItemContent,{...u,$isExpanded:a,className:A__default.default("collapse-item__content",a&&"collapse-item__content--isExpanded")},l)));_.displayName="CollapseItem";var pe=({items:t,className:r,isOnlyOneExpand:l=false,expandIds:n,preIcon:s=null,postIcon:x=null,expandIcon:d=null,disabled:u=false,htmlAttributes:y})=>{let[b,m]=I.useState(()=>n?n.reduce((e,a)=>(e[a]=true,e),{}):{});return I__default.default.createElement(o.Container,{...y,className:A__default.default("collapse",r)},t?.map((e,a)=>I__default.default.createElement(I.Fragment,{key:e.id},!!a&&I__default.default.createElement(components_divider.Divider,{color:"#d9d9d9",className:"collapse-divider"}),I__default.default.createElement(_,{id:e.id,label:e.label,body:e.body,preIcon:s??e.preIcon,postIcon:x??e.postIcon,expandIcon:d??e.expandIcon,disabled:u||e.disabled,bodyHtmlAttributes:e.bodyHtmlAttributes,htmlAttributes:e.htmlAttributes,expandIconHtmlAttributes:e.expandIconHtmlAttributes,itemHeaderHtmlAttributes:e.itemHeaderHtmlAttributes,itemHeaderLabelHtmlAttributes:e.itemHeaderLabelHtmlAttributes,isExpanded:e.id?!!b[e.id]:false,showExpandIcon:e.showExpandIcon??true,isOnlyOneExpand:l,setItemDictionary:m}))))};exports.Collapse=pe;
package/dist/index.d.cts ADDED
@@ -0,0 +1,59 @@
1
+ import React, { ReactNode, HTMLAttributes, ButtonHTMLAttributes, Dispatch, SetStateAction } from 'react';
2
+ import { IExtendable } from '@purr-core/utils.definitions';
3
+
4
+ type TItemDictionary = Record<string, boolean>;
5
+ interface ICollapseItem {
6
+ id: string;
7
+ label: string;
8
+ body: ReactNode;
9
+ preIcon?: ReactNode;
10
+ postIcon?: ReactNode;
11
+ expandIcon?: ReactNode;
12
+ disabled?: boolean;
13
+ bodyHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
14
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
15
+ expandIconHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
16
+ itemHeaderHtmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
17
+ itemHeaderLabelHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
18
+ showExpandIcon?: boolean;
19
+ }
20
+ interface ICollapseItemProps extends ICollapseItem {
21
+ isExpanded: boolean;
22
+ isOnlyOneExpand: boolean;
23
+ setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
24
+ }
25
+ interface ICollapseProps {
26
+ items?: ICollapseItem[];
27
+ className?: string;
28
+ disabled?: boolean;
29
+ preIcon?: ReactNode;
30
+ postIcon?: ReactNode;
31
+ expandIcon?: ReactNode;
32
+ expandIds?: string[];
33
+ isOnlyOneExpand?: boolean;
34
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
35
+ }
36
+ interface ICollapseItemExpandIconProps {
37
+ expandIcon?: ReactNode;
38
+ isExpanded: boolean;
39
+ htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
40
+ showExpandIcon?: boolean;
41
+ }
42
+ interface ICollapseItemHeaderProps {
43
+ label: string;
44
+ preIcon?: ReactNode;
45
+ postIcon?: ReactNode;
46
+ expandIcon?: ReactNode;
47
+ isExpanded: boolean;
48
+ isOnlyOneExpand: boolean;
49
+ id: string;
50
+ showExpandIcon?: boolean;
51
+ expandIconHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
52
+ htmlAttributes?: HTMLAttributes<HTMLButtonElement> & IExtendable;
53
+ labelHtmlAttributes?: HTMLAttributes<HTMLElement> & IExtendable;
54
+ setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
55
+ }
56
+
57
+ declare const Collapse: ({ items, className, isOnlyOneExpand, expandIds, preIcon, postIcon, expandIcon, disabled, htmlAttributes, }: ICollapseProps) => React.JSX.Element;
58
+
59
+ export { Collapse, type ICollapseItem, type ICollapseItemExpandIconProps, type ICollapseItemHeaderProps, type ICollapseItemProps, type ICollapseProps, type TItemDictionary };
package/dist/index.d.ts ADDED
@@ -0,0 +1,59 @@
1
+ import React, { ReactNode, HTMLAttributes, ButtonHTMLAttributes, Dispatch, SetStateAction } from 'react';
2
+ import { IExtendable } from '@purr-core/utils.definitions';
3
+
4
+ type TItemDictionary = Record<string, boolean>;
5
+ interface ICollapseItem {
6
+ id: string;
7
+ label: string;
8
+ body: ReactNode;
9
+ preIcon?: ReactNode;
10
+ postIcon?: ReactNode;
11
+ expandIcon?: ReactNode;
12
+ disabled?: boolean;
13
+ bodyHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
14
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
15
+ expandIconHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
16
+ itemHeaderHtmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
17
+ itemHeaderLabelHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
18
+ showExpandIcon?: boolean;
19
+ }
20
+ interface ICollapseItemProps extends ICollapseItem {
21
+ isExpanded: boolean;
22
+ isOnlyOneExpand: boolean;
23
+ setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
24
+ }
25
+ interface ICollapseProps {
26
+ items?: ICollapseItem[];
27
+ className?: string;
28
+ disabled?: boolean;
29
+ preIcon?: ReactNode;
30
+ postIcon?: ReactNode;
31
+ expandIcon?: ReactNode;
32
+ expandIds?: string[];
33
+ isOnlyOneExpand?: boolean;
34
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
35
+ }
36
+ interface ICollapseItemExpandIconProps {
37
+ expandIcon?: ReactNode;
38
+ isExpanded: boolean;
39
+ htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
40
+ showExpandIcon?: boolean;
41
+ }
42
+ interface ICollapseItemHeaderProps {
43
+ label: string;
44
+ preIcon?: ReactNode;
45
+ postIcon?: ReactNode;
46
+ expandIcon?: ReactNode;
47
+ isExpanded: boolean;
48
+ isOnlyOneExpand: boolean;
49
+ id: string;
50
+ showExpandIcon?: boolean;
51
+ expandIconHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
52
+ htmlAttributes?: HTMLAttributes<HTMLButtonElement> & IExtendable;
53
+ labelHtmlAttributes?: HTMLAttributes<HTMLElement> & IExtendable;
54
+ setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
55
+ }
56
+
57
+ declare const Collapse: ({ items, className, isOnlyOneExpand, expandIds, preIcon, postIcon, expandIcon, disabled, htmlAttributes, }: ICollapseProps) => React.JSX.Element;
58
+
59
+ export { Collapse, type ICollapseItem, type ICollapseItemExpandIconProps, type ICollapseItemHeaderProps, type ICollapseItemProps, type ICollapseProps, type TItemDictionary };
package/dist/index.js ADDED
@@ -0,0 +1,71 @@
1
+ import A from'clsx';import I,{memo,useMemo,useState,Fragment}from'react';import {Divider}from'@purr-react-styled-components/components.divider';import p,{css}from'styled-components';import {getInvisibleButton}from'@purr-react-styled-components/utils.helpers';import {Typography}from'@purr-react-styled-components/components.typography';import {Icon}from'@purr-react-styled-components/components.icon';var o={Container:p.div`
2
+ border: 1px solid #d9d9d9;
3
+ border-radius: 8px;
4
+ overflow: hidden;
5
+ `,ItemContainer:p.div`
6
+ transition: margin 150ms ease-in-out;
7
+ width: 100%;
8
+ will-change: margin;
9
+
10
+ &:first-of-type {
11
+ margin-top: 0px;
12
+ }
13
+
14
+ &:last-of-type {
15
+ margin-bottom: 0px;
16
+ }
17
+
18
+ ${({$disabled:t})=>t?css`
19
+ opacity: 0.3;
20
+ pointer-events: none;
21
+ cursor: not-allowed;
22
+ `:css`
23
+ cursor: pointer;
24
+ `};
25
+ `,ItemHeader:p.button`
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: space-between;
29
+ gap: 16px;
30
+ padding: 0px 16px;
31
+ width: 100%;
32
+ height: 46px;
33
+ border-bottom: 1px solid
34
+ ${({$isExpanded:t})=>t?"#d9d9d9":"transparent"};
35
+ background-color: #00000005;
36
+ ${getInvisibleButton}
37
+ `,ItemHeaderSection:p.span`
38
+ display: flex;
39
+ align-items: center;
40
+ gap: 16px;
41
+ `,ItemHeaderSectionGroup:p.span`
42
+ display: flex;
43
+ justify-content: space-between;
44
+ flex-grow: 1;
45
+ `,ItemHeaderExpandIcon:p.span`
46
+ display: flex;
47
+ transition: all 250ms ease-in-out;
48
+ transform: ${({$isExpanded:t})=>t?"rotate(180deg)":"none"};
49
+ `,ItemContent:p.div`
50
+ transition:
51
+ max-height 150ms ease-in-out,
52
+ opacity 150ms ease-in-out,
53
+ padding-top 150ms ease-in-out,
54
+ padding-bottom 150ms ease-in-out;
55
+ padding-left: 16px;
56
+ padding-right: 16px;
57
+ overflow: hidden;
58
+ will-change: max-height, opacity, padding-top, padding-bottom;
59
+
60
+ ${({$isExpanded:t})=>t?css`
61
+ max-height: 200vh;
62
+ padding-top: 16px;
63
+ padding-bottom: 16px;
64
+ opacity: 1;
65
+ `:css`
66
+ max-height: 0px;
67
+ padding-top: 0px;
68
+ padding-bottom: 0px;
69
+ opacity: 0;
70
+ `};
71
+ `};var H=memo(({expandIcon:t,isExpanded:r,htmlAttributes:l,showExpandIcon:n})=>(console.log("showExpandIcon",n),n?I.createElement(o.ItemHeaderExpandIcon,{...l,$isExpanded:r,className:"collapse-item__header__right__expand-icon"},t??I.createElement(Icon,{name:"chevron-down",width:14,height:14})):null));H.displayName="CollapseItemExpandIcon";var C=memo(({label:t,preIcon:r,postIcon:l,expandIcon:n,isExpanded:s,isOnlyOneExpand:x,id:d,showExpandIcon:u,expandIconHtmlAttributes:y,htmlAttributes:b,labelHtmlAttributes:m,setItemDictionary:e})=>{let a=c=>()=>{e(x?i=>({...Object.keys(i).reduce((E,$)=>(E[$]=false,E),{}),[c]:!i[c]}):i=>({...i,[c]:!i[c]}));},h=useMemo(()=>I.createElement(o.ItemHeaderSectionGroup,null,I.createElement(o.ItemHeaderSection,{className:"collapse-item__header__left"},r,I.createElement(Typography,{className:"collapse-item__header-label",htmlAttributes:m},t)),I.createElement(o.ItemHeaderSection,{className:"collapse-item__header__right"},l)),[t,m,l,r]);return I.createElement(o.ItemHeader,{...b,$isExpanded:s,className:"collapse-item__header",onClick:a(d)},I.createElement(H,{htmlAttributes:y,expandIcon:n,isExpanded:s,showExpandIcon:u}),h)});C.displayName="CollapseItemHeader";var _=memo(({id:t,label:r,body:l,preIcon:n,postIcon:s,expandIcon:x,disabled:d,bodyHtmlAttributes:u,htmlAttributes:y,expandIconHtmlAttributes:b,itemHeaderHtmlAttributes:m,itemHeaderLabelHtmlAttributes:e,isExpanded:a,isOnlyOneExpand:h,showExpandIcon:c,setItemDictionary:i})=>I.createElement(o.ItemContainer,{...y,$disabled:d,className:A("collapse-item",a&&"collapse-item--isExpanded",d&&"collapse-item--disabled")},I.createElement(C,{label:r,preIcon:n,postIcon:s,expandIcon:x,isExpanded:a,isOnlyOneExpand:h,id:t,showExpandIcon:c,expandIconHtmlAttributes:b,htmlAttributes:m,labelHtmlAttributes:e,setItemDictionary:i}),I.createElement(o.ItemContent,{...u,$isExpanded:a,className:A("collapse-item__content",a&&"collapse-item__content--isExpanded")},l)));_.displayName="CollapseItem";var pe=({items:t,className:r,isOnlyOneExpand:l=false,expandIds:n,preIcon:s=null,postIcon:x=null,expandIcon:d=null,disabled:u=false,htmlAttributes:y})=>{let[b,m]=useState(()=>n?n.reduce((e,a)=>(e[a]=true,e),{}):{});return I.createElement(o.Container,{...y,className:A("collapse",r)},t?.map((e,a)=>I.createElement(Fragment,{key:e.id},!!a&&I.createElement(Divider,{color:"#d9d9d9",className:"collapse-divider"}),I.createElement(_,{id:e.id,label:e.label,body:e.body,preIcon:s??e.preIcon,postIcon:x??e.postIcon,expandIcon:d??e.expandIcon,disabled:u||e.disabled,bodyHtmlAttributes:e.bodyHtmlAttributes,htmlAttributes:e.htmlAttributes,expandIconHtmlAttributes:e.expandIconHtmlAttributes,itemHeaderHtmlAttributes:e.itemHeaderHtmlAttributes,itemHeaderLabelHtmlAttributes:e.itemHeaderLabelHtmlAttributes,isExpanded:e.id?!!b[e.id]:false,showExpandIcon:e.showExpandIcon??true,isOnlyOneExpand:l,setItemDictionary:m}))))};export{pe as Collapse};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@purr-react-styled-components/components.collapse",
3
- "version": "0.0.4",
3
+ "version": "0.0.5",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -25,14 +25,14 @@
25
25
  "react": "*",
26
26
  "styled-components": "*",
27
27
  "clsx": "*",
28
- "@purr-core/utils.definitions": "0.0.11",
29
- "@purr-react-styled-components/components.icon": "0.0.8",
30
- "@purr-react-styled-components/components.typography": "0.0.9",
31
- "@purr-react-styled-components/components.divider": "0.0.4",
32
- "@purr-react-styled-components/utils.helpers": "0.0.7"
28
+ "@purr-core/utils.definitions": "0.0.12",
29
+ "@purr-react-styled-components/utils.helpers": "0.0.8",
30
+ "@purr-react-styled-components/components.icon": "0.0.9",
31
+ "@purr-react-styled-components/components.typography": "0.0.10",
32
+ "@purr-react-styled-components/components.divider": "0.0.5"
33
33
  },
34
34
  "devDependencies": {
35
- "@purr-react-styled-components/components.flex-box": "0.0.9"
35
+ "@purr-react-styled-components/components.flex-box": "0.0.10"
36
36
  },
37
37
  "author": "@DinhThienPhuc",
38
38
  "license": "ISC",